/*
Index:
1 - General CSS
2 - Header CSS
3 - NavBar CSS
4 - Content CSS
5 - Footer CSS

404 - 404 Page CSS

********************************************************************************
*******************************************************************************/

/* 1 - General CSS
------------------------------------------------------------------------------*/    
    body, div, ul, li, a, p{
        margin: 0;
        padding: 0;  
    }
/* End 1 - General CSS
------------------------------------------------------------------------------*/


/* 2 - Header CSS
------------------------------------------------------------------------------*/
    #title{
        width: 500px;
        height: 120px;
        margin: 25px 0 0 140px; 
        background: pink;
    }
    @media screen and (min-width: 1600px){
    #title{
        margin: 25px 0 0 450px;
    }}
/* End 2 - Header CSS
------------------------------------------------------------------------------*/


/*  3 - NavBar CSS
------------------------------------------------------------------------------*/
    #nav{
        width: 365px;
        height: 25px;
        margin: -78px 200px 0 0;
        float: right;
        
    }
    #admin{
        border-right: solid wheat 1px;
    }
    #home{
        border-right: solid wheat 1px;
    }
    #seatSetup{
        border-right: solid wheat 1px;
    }
    #reports{
        
    }
    #nav ul{
        border-radius: 5px;
        padding: 10px;
    }
    .navLinks{
        display: inline-block;
        
    }
    #nav a{
        text-decoration: none;
        color: wheat;
        padding: 5px 15px;
        display: block;
    }
    #nav a:hover{
        color: goldenrod;
    }
/* End 3 - NavBar CSS
------------------------------------------------------------------------------*/


/* 4 - Content CSS
------------------------------------------------------------------------------*/
    #pageContainer{
        width: 1050px;
        height: 650px;
        margin: 0 auto; 
        margin-top: 50px;
        background: pink;
    }
    .sideBoxes{
        min-height: 165px;
        width: 195px;
        float: right;
        background: coral;
    }
    /* Left side content*/
    #leftContainer{
        width: 190px;
        height: 100%;
        float: left;   
    }
    #left1 {
        width: 0px !important;
        height: 0px !important; 
        padding: 0px !important;
    }

    #left2{
        margin: 15px 5px 0 0;
    }
    #left2 p{
        margin: 10px;
    }
    #left3{
        margin: 5px;
    }
    #left4{
        margin: 5px;
        
    }
    #left4 p, table{
       margin: 5px; 
    }
    .priceBox{
        width: 50px;
        text-align: center;
        padding: 2px 5px;   
    }
    #standardSelect{
        background: white;
        padding: 1px 10px;
        color: black;
    }
    #childSelect{
        padding: 3px 1px;
    }
    #seniorSelect{
        padding: 3px 1px;
    }
    #specialSelect{
        padding: 3px 1px;
    }
    /**/

    /* Right Side Content*/
    #rightContainer{
        width: 190px;
        height: 100%;
        float: right;
    }
    /* Legand */
    #legand{
        float: left;
        background: coral;
        height: 165px;
        width: 195px;
        margin: 15px 0 0 5px;
    }
    #legand p{
        margin: -20px 10px -50px 50px;
    }
    .legandSeatContainer{
        width: 175px;
        height: 21px;       
    }
    .legandSeat{
        width: 24px;
        height: 21px;
        margin: 10px 0 0 10px;
    }
        /**/
    #right1{
        float: left;
        background: coral;
        height: 150px;
        width: 195px;
        margin: 5px;
    }
    #right2{
        float: left;
        background: coral;
        height: 150px;
        width: 195px;
        margin: 5px;
    }
    #right3{
        float: left;
        background: coral;
        height: 150px;
        width: 195px;
        margin: 5px;
    }
    #bookButton{
        float: left;
        height: 60px;
        width: 170px;
        margin: 50px 0 0 2px;
        text-align: center;
        font-size: 50px; 
    }
    /**/

    #p{
        margin: 50px;
    }
    /* Centre Content*/
    #contentWrapper{
        width: 660px;
        height: 690px;
        margin: 0 auto;
        position: relative;
    }
    #contentContainer{
        top: -30px;/* Makes top of box stick above box behind*/
        position: absolute;
        padding: 5px 5px 40px 5px;;
        background: cornflowerblue; 
    }
    #header{
        margin: 20px 0 0 5px; 
        height: 65px;
        width: 500px;
        background: lightblue;
    }
    #content{
        height: 560px;
        width: 650px;
        margin: 0 auto;
        margin-top: 20px;
        background: lemonchiffon;
    }
    /**/


    /* Booking */
    .bookingWrapper{
        width: 100%;
        z-index: 9999;
        position: absolute;
        display: none;
            
    }
    #bookingContainer, #ticketContainer {
        width: 1000px;
        height: 660px;
        margin: 0 auto;
    }
    #bookingContent, #ticketContent{
        width: 1050px;
        height: 720px;
        margin-left: -35px;
        position: absolute;
        z-index: 50;   
    }
    #closeButton, #ticketCloseButton {
        width: 60px;
        height: 60px;
        //float: right;
        //margin: 15px;
        position: absolute;
        top: 15px;
        right: 15px;
    }
    
    #confirmButton, #returnButton{
        width:150px;
        height: 50px;
        position: absolute;
        bottom: 30px;
        right: 20px;
        // float: right;
        // margin: 655px -75px 0 0;
    }
    
    #confirmDetails, #ticketOptions {
        width: 230px;
        border: orange 1px dashed;
        float: right;
        margin: 100px 30px 0px 0px;
        padding: 20px;
    }
    
    #confirmDetails h4, #ticketOptions h4 {
        margin: 0px;
        padding: 0px;
    }
    
    #confirmLayout, #ticketLayout {
        width: 650px;
        height: 560px;
        border: 1px dashed green;
        margin: 100px 20px 0px 60px;
    }
    
    /**/
    .active{
        display: block;
    }
/* End 4 - Content CSS
------------------------------------------------------------------------------*/
/* 5 - Footer CSS
------------------------------------------------------------------------------*/
/* End 5 - Footer CSS
------------------------------------------------------------------------------*/