/********** Layout **********/

@font-face
{
    font-family: 'stag-book';
    src: url('../fonts/Stag-Book.eot');
    src: url('../fonts/Stag-Book.eot') format('embedded-opentype'), url('../fonts/Stag-Book.woff') format('woff'), url('../fonts/Stag-Book.ttf') format('truetype'), url('../fonts/Stag-Book.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: "Stag Black";
    src: url("../fonts/Stag-Black.woff") format("woff"),url("../fonts/Stag-Black.ttf") format("truetype");
}

@font-face
{
    font-family: "Stag Bold";
    src: url("../fonts/Stag-Bold.woff") format("woff"),url("../fonts/Stag-Bold.ttf") format("truetype");
}

@font-face
{
    font-family: "Stag Medium";
    font-weight: 300;
    src: url("../fonts/Stag-Medium.woff") format("woff"),url("../fonts/Stag-Medium.ttf") format("truetype");
}

html
{
    background: #F8F1D8;
}

body
{
    font-family: 'stag-book';
    color: #00455c;
    font-size: 16px;
    line-height: 1.25;
}

a
{
    -webkit-transition: all 700ms;
    transition: all 700ms;
}

    a:hover
    {
        text-decoration: none;
    }

.rotate
{
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.uk-table th
{
    background: #00455C;
    color: #fff;
}

.uk-table tr:nth-child(odd)
{
    background: #CFE7E7;
}

.uk-table tr:nth-child(even)
{
    background: #E7F3F3;
}

h1
{
    font-weight: 700;
    line-height: 35px;
    font-family: Stag Bold !important;
    margin-top: 0;
}

h2
{
    color: #f04e3e;
    font-family: stag-book !important;
    font-weight: normal;
    font-size: 23px;
}

.menuItemToggle2
{
    display: block;
    position: absolute;
    z-index: 9;
    right: 10px;
    top: 10px;
    width: 25px;
    height: 25px;
    margin: 0;
    padding: 0;
    border-radius: 3px;
    background: url(../images/menu-icon.png) center center no-repeat #F04E3E;
}


.container
{
    max-width: 1170px;
    margin: auto;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

#header
{
    background: #00455C;
    position: relative;
}

#strapLogo
{
    line-height: 60px;
    padding: 7px 15px;
    height: 85px;
    display: inline-block;
    margin: 5px;
    margin-left: -15px;
    box-sizing: border-box;
}

    #strapLogo img
    {
        max-height: 100%;
    }

#navBar
{
    padding: 0;
    margin: 0 15px 0 0;
    list-style-type: none;
    bottom: 0;
    position: absolute;
    right: 0;
}

    #navBar li
    {
        float: left;
    }

        #navBar li a
        {
            color: #fff;
            font-family: stag-book;
            padding: 7px 11px 5px 11px;
            line-height: 35px;
            display: block;
        }

            #navBar li a:hover
            {
                background: #00455c;
            }

.parentItem
{
    position: relative;
}

    .parentItem li a:hover
    {
        background: #F04E3E !important;
    }

.greenItem li a:hover
{
    background: #61AEAE !important;
}

.sub-menu
{
    list-style-type: none;
    padding: 0;
    margin: 0;
    background: #F04E3E;
    z-index: 50;
    width: 200px;
}

    .sub-menu li
    {
        display: block;
        float: none !important;
        padding: 10px !important;
    }

        .sub-menu li a
        {
            color: #00455c !important;
            line-height: 1 !important;
        }

            .sub-menu li a:hover
            {
                color: #fff !important;
            }

.greenItem .sub-menu
{
    background: #61AEAE;
}

.level2ParentItem
{
    position: relative;
}

.level2
{
    position: absolute;
    display: none;
    top: 46px;
}

.level3
{
    position: absolute;
    display: none;
    right: -200px;
    top: 0;
}

.redItem
{
    background: #F04E3E;
}

#homeItem
{
    border-top-left-radius: 8px;
}

#extrasItem
{
    border-top-right-radius: 8px;
}

.greenItem
{
    background: #61AEAE;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

#navBar .social
{
    font-size: 21px;
    color: #F15A4C;
}

    #navBar .social:hover
    {
        color: #fff;
    }

#toggle
{
    display: none;
    color: #fff;
    height: 32px;
    width: 42px;
    background: #808080;
    box-sizing: border-box;
    text-align: center;
    border-radius: 4px;
    font-size: 20px;
    line-height: 32px;
    position: absolute;
    right: 2rem;
    top: 1.4rem;
}

#main
{
    background: #F8F1D8;
    padding: 0 15px;
    display: block;
    overflow: hidden;
}

    #main .container
    {
        padding: 30px;
        box-sizing: border-box;
        background: #fff;
        min-height: 500px;
        display: block;
        overflow: hidden;
    }

#footer
{
    background: #00455C;
    line-height: 20px;
    color: #00232d;
    clear: both;
}

    #footer a
    {
        color: #f8f1d8;
    }

        #footer a:hover
        {
            color: #939393;
        }

#addressFooter, #emailFooter
{
    padding-top: 67px;
    padding-bottom: 30px;
    color: #f8f1d8;
}

    #addressFooter:hover
    {
        color: #9c9a88;
    }

#socialFooterWrapper
{
    background: #f8f1d8;
    border-top: 1px solid #00455C;
}

#socialFooter
{
    color: #015875;
    padding-top: 67px;
    padding-bottom: 30px;
}

    #socialFooter a
    {
        color: #015875;
    }

    #socialFooter ul
    {
        margin: 0 0 1.5em -30px !important;
        list-style-type: none;
        padding: 0;
        text-align: center;
    }

    #socialFooter li
    {
        display: inline-block;
        margin: 5px;
    }

        #socialFooter li a
        {
            font-size: 18px;
            color: #015875;
        }

.noArrears
{
    color: #3BA88E;
}



/********** Ajax *********/
.ajax__tab_body
{
    font-family: Helvetica, Arial, Geneva,sanserif !important;
    font-weight: normal !important;
    font-size: 0.8em !important;
    color: #656565 !important;
}

.ajax__tab_header
{
    display: none;
}

.ajax__tab_body
{
    border: none !important;
    padding: 0px !important;
    margin: 0px !important;
}

    .ajax__tab_body span
    {
        display: inline-block;
        font-family: 'stag-book';
        font-size: 16px;
        color: #00455c;
        font-weight: bold;
    }

    .ajax__tab_body table tr td:first-of-type
    {
        min-width: 150px;
        width: 200px;
    }

    .ajax__tab_body table tr td:nth-child(2)
    {
        padding-left: 10px;
        box-sizing: border-box;
    }

    .ajax__tab_body input[type="text"], .ajax__tab_body select
    {
        width: 100%;
        margin-top: 5px !important;
        margin-bottom: 10px !important;
    }

    .ajax__tab_body table
    {
        width: 100%;
    }

/********** Login *********/

.loginPage #main .container
{
    padding: 0;
}

.loginPage h1
{
}

#loginLeft
{
    padding: 30px;
    box-sizing: border-box;
}

    #loginLeft .uk-alert-danger
    {
        margin-top: 0;
    }

#loginRightWrapper
{
    background: #61AEAE;
}

#loginRight
{
    min-height: 500px;
    padding-right: 35px;
    box-sizing: border-box;
    color: #fff;
}

    #loginRight h2
    {
        color: #fff;
        margin-top: 1rem;
    }

    #loginRight p
    {
        font-size: 12px;
        line-height: 1.3em;
    }

    #loginRight a:hover
    {
        color: #f04e3e;
    }

.loginPage #poweredBy
{
    display: none;
}

/********** Register *********/

.registerInterestPage #main .container
{
    background-image: url('../images/join_bg2.jpg');
    background-position: right 25px top;
    background-repeat: no-repeat;
}

#registerTop
{
    max-width: 700px;
}

#registerBottom
{
    max-width: 600px;
}

    #registerBottom .uk-form input[type="text"], #registerBottom .uk-form select
    {
        width: 100%;
    }

/********** Register Iframe *********/

#iframeContact
{
    width: 100%;
    padding: 1em;
    box-sizing: border-box;
}

    #iframeContact .uk-form-row
    {
        margin-bottom: 10px;
    }

    #iframeContact .uk-form-label
    {
        margin-top: 10px;
    }

    #iframeContact .uk-form-row input[type="text"], #iframeContact .uk-form-row select
    {
        width: 100%;
        margin-top: 10px;
    }

    #iframeContact .ajax__tab_panel td
    {
        display: block;
        padding-left: 0;
        width: auto;
    }

@media (max-width:500px)
{
    #iframeContact h1
    {
        font-size: 23px;
    }
}

/********** Timetables **********/

.timetablePage #main .container
{
    padding: 0;
    max-width: 1110px;
}

.timetablePage #poweredBy
{
    display: none;
}

#timetablePDF li
{
    display: none;
}

#timetableA
{
    background-image: url('../images/hero-1200px-tiemtables-4.jpg');
    height: 281px;
    background-position: center;
    position: relative;
}

#bookClassNow
{
    margin: auto;
    font-family: stag-book;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    width: 200px;
    height: 60px;
    line-height: 60px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 10px;
    padding-right: 10px;
}

#timetableB
{
    padding: 10px;
    box-sizing: border-box;
}

    #timetableB h1
    {
        text-transform: uppercase;
        color: #fff;
        background-color: #00455c;
        font-size: 30px;
        padding: 30px 30px 25px 30px;
        margin-bottom: 0;
        margin-left: -10px;
        margin-right: -10px;
        margin-top: -10px;
    }

    #timetableB h2
    {
        color: #00455c;
        font-family: Stag Bold !important;
        font-weight: bold;
        font-size: 27px;
        margin-top: 0;
        padding-top: 0;
    }

    #timetableB a
    {
        color: #f04e3e;
    }

    #timetableB ul
    {
        padding-left: 0;
    }

        #timetableB ul li
        {
            margin: 1px 0 1px 3% !important;
            list-style-image: url('../images/bullet-red-7px-padded.gif') !important;
            text-align: left !important;
        }

#timetableC
{
    padding: 30px;
}

    #timetableC h2
    {
        color: #00455c !important;
        text-transform: uppercase;
        margin-bottom: 2rem;
    }

#timetableD
{
    background: #61AEAE;
    padding: 2em 2.5em;
    color: #00455c;
}

    #timetableD h3
    {
        color: #fff;
        font-family: stag-book !important;
        letter-spacing: 0.05em;
        font-size: 23px;
        font-weight: normal;
    }

#timetableE
{
    background: #F04E3E;
    padding: 30px 30px 30px 30px;
}

    #timetableE h3
    {
        color: #404040;
        text-transform: uppercase;
        margin-bottom: 30px;
        font-weight: bold;
        font-size: 23px;
        padding-bottom: 5px;
    }

    #timetableE ul
    {
        padding: 0;
    }

        #timetableE ul li
        {
            list-style: none;
            list-style-image: url('../images/bullet-white-12px-padded-arrow.png') !important;
            margin: 15px 0;
            text-align: left;
            margin-left: 3%;
            position: relative;
            padding-left: 10px;
        }

            #timetableE ul li a
            {
                color: #fff;
            }


.uk-accordion-title
{
    border-radius: 0;
    color: #fff;
    border-bottom: none;
    font-size: 23px;
    line-height: 1.5;
    text-transform: capitalize;
    letter-spacing: 0;
    font-family: stag-book;
    padding: 5px;
    font-weight: normal;
    box-sizing: border-box;
    margin: 0;
    margin-bottom: 10px;
    position: relative;
}

    .uk-accordion-title.uk-active
    {
        background: #71B4B2 !important;
    }

.uk-accordion-content table
{
    width: 100%;
    border-spacing: 0;
    margin-top: -1px;
    border-spacing: 1px;
}

    .uk-accordion-content table th, .uk-accordion-content table td
    {
        padding: 4px 8px;
        vertical-align: middle;
        text-align: left;
    }

    .uk-accordion-content table th
    {
        background: #004C63;
        color: #fff;
        font-family: stag-book;
        text-transform: uppercase;
        padding: 8px;
    }

    .uk-accordion-content table td
    {
        padding: 10px 6px;
        color: #004c63;
        font-family: stag-book;
    }

    .uk-accordion-content table tr:nth-child(odd)
    {
        background: #CFE7E7;
    }

    .uk-accordion-content table tr:nth-child(even)
    {
        background: #E7F3F3;
    }


.keys
{
    display: block;
    width: 20px;
    height: 20px;
    background: #aaa;
    margin: 0 0.5rem 0 0.25rem;
}

/********** Class Grid **********/

.classPage #main .container
{
    max-width: 100%;
    margin-top: 15px;
    margin-bottom: 0;
}

.classWrapper:first-of-type .classDateHeaderWrapper:first-of-type
{
    border-top-left-radius: 2px !important;
}

.classWrapper:last-of-type .classDateHeaderWrapper:first-of-type
{
    border-top-right-radius: 2px;
}

#classCalendarDesktop, .uk-accordion
{
    clear: both;
}

#classFilter
{
    cursor: pointer;
    position: fixed;
    right: -500px;
    top: 0;
    background: #F7ECD0;
    z-index: 20;
    padding: 0.5rem;
    border: 4px solid #fff;
    border-top: 0;
    border-right: 0;
    box-sizing: border-box;
    outline: 1px solid #ddd;
    transition: right 0.5s linear;
    opacity: 1;
    display: block;
}

    #classFilter img
    {
        width: 150px;
        max-width: 100%;
    }

#resetFilter, #filterClose
{
    font-size: 0.8rem;
    line-height: 1;
    max-height: 40px;
    min-height: 0;
    margin-top: 5px !important;
}

.filterShowing
{
    right: 0 !important;
    opacity: 0;
}

.classHidden
{
    display: none;
}

.classNameMobile
{
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
}

.classMobileRight
{
    color: #fff;
}

.uk-accordion-content .classMobileWrapper:first-of-type
{
    border-top-left-radius: 1px;
    border-top-right-radius: 1px;
}

.uk-accordion-content .classMobileWrapper:last-of-type
{
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
}

.SWEAT
{
    background: #E84133 !important;
}

.FOCUS
{
    background: #A97588 !important;
}

.FIGHT
{
    background: #1A5A9F !important;
}

.DANCE
{
    background: #E87F51 !important;
}

.SHAPE
{
    background: #3BA88E !important;
}

/*.upComingBookings tr td:first-of-type, .upComingBookings tr th:first-of-type
{
    display: none;
}*/


/********** Join **********/
#termsLink
{
    color: #f04e3e;
}

#ctl00_mainContent_CostPanel .JoinCostFooter
{
    text-align: right;
    right: 10%;
    position: absolute;
}

.JoinCostOuterBox table tr td:nth-child(odd)
{
    background: #CFE7E7;
}

.JoinCostOuterBox table tr td:nth-child(even)
{
    background: #E7F3F3;
}

.JoinCostOuterBox table td
{
    padding: 8px;
}

.proRata
{
    display: block;
    width: 300px;
    left: 0;
    max-width: 90%;
    background: #fff;
    border-radius: 4px;
    padding: 1rem;
    border: 1px solid;
    margin: auto;
}

#ctl00_mainContent_Attribute17
{
    color: #f04e3e;
    font-family: stag-book !important;
    font-weight: normal;
    font-size: 23px;
}

/********** Pre Login **********/

.postLogin
{
    display: none !important;
}

/********** Post Login **********/

.LOGGEDIN .postLogin
{
    display: block !important; /*or whatever display property you need*/
}

.LOGGEDIN .preLogin
{
    display: none !important;
}


/********** Responsive **********/

/*X-Large*/
@media (max-width:1250px)
{
    .classWrapper .uk-panel-box
    {
        min-height: 150px;
    }

    .classPage #main .container, .classDateHeaderWrapper
    {
        font-size: 0.9rem;
    }
}

@media (min-width:1101px)
{
    #navBar
    {
        display: block !important;
    }

    .expanded
    {
        display: none !important;
    }

    .parentItem:hover > .level2
    {
        display: block !important;
    }

    .level2ParentItem:hover > .level3
    {
        display: block !important;
    }
}

@media (max-width:1100px)
{

    #header
    {
        display: block;
        overflow: hidden;
    }

    #strapLogo
    {
        height: 76px;
        line-height: 1;
        margin: 0;
    }

    #navBar
    {
        display: none;
        position: relative;
        margin-top: 2rem;
        margin-right: 0;
    }

        #navBar li
        {
            display: block;
            float: none;
            border-bottom: 1px solid #EDEDED;
        }

            #navBar li:last-of-type
            {
                border-bottom: 0;
            }

    .LOGGEDIN .redItem, .LOGGEDIN .socialIcon
    {
        display: none !important;
    }

    .LOGGEDIN #navBar
    {
        margin-bottom: 20px;
    }

        .LOGGEDIN #navBar li:last-of-type
        {
            border-bottom: none;
        }

    #homeItem, #extrasItem, .greenItem
    {
        border-radius: 0;
    }

    .sub-menu
    {
        position: relative;
        top: 0;
        right: 0;
        left: 0;
        display: none;
        width: 100%;
        margin: auto;
        padding-left: 25px;
        box-sizing: border-box;
    }

        .sub-menu li
        {
            padding-top: 7px !important;
            padding-bottom: 5px !important;
        }

    .level2 li:last-of-type, .level3 li:last-of-type
    {
        border-bottom: none !important;
    }

    .menuItemToggle
    {
        display: block;
        position: absolute;
        z-index: 9;
        right: 0;
        top: 5px;
        width: 25px;
        height: 25px;
        margin: 0;
        padding: 0;
        border-radius: 3px;
        background: url(../images/menu-icon.png) center center no-repeat #e96656;
    }

    .greenItem .menuItemToggle
    {
        background: url(../images/menu-icon.png) center center no-repeat #3B858E;
    }

    #toggle
    {
        display: block !important;
    }

    #registerTop
    {
        max-width: 550px;
    }

    #registerBottom
    {
        max-width: 500px;
    }

    .classPage #main .container
    {
        margin-top: 0;
        margin-bottom: 0;
    }

    .classPage #main, .classPage #main .container
    {
        padding: 15px;
    }
}

/*Large*/
@media (max-width:959px)
{

    .registerInterestPage table td
    {
        display: block;
        padding-left: 0 !important;
        padding-top: 15px;
        width: auto !important;
    }

        .registerInterestPage table td:nth-child(2)
        {
            padding-top: 5px !important;
        }

    .registerInterestPage table tr:first-of-type td:first-of-type
    {
        padding-top: 0 !important;
    }

    .registerInterestPage #main .container
    {
        background-image: none;
    }

    #registerTop
    {
        margin: auto;
        text-align: center;
    }

    #registerBottom
    {
        margin: auto;
    }

    #loginRightWrapper
    {
        background: #F8F1D8;
    }

    #loginRight
    {
        padding-left: 35px;
        padding-bottom: 35px;
        min-height: 0;
        background: #61AEAE;
    }

    #socialFooterWrapper
    {
        background: #022E3F;
    }

    #socialFooter
    {
        background: none;
    }

    #addressFooter, #emailFooter, #socialFooter
    {
        padding: 1.5rem 1rem 1rem 1rem;
    }
}

/*Medium*/
@media (max-width:767px)
{
    #classFilter
    {
        padding: 0.5rem;
    }

    #socialFooterWrapper
    {
        background: none;
    }

    #socialFooter
    {
        background: #f8f1d8;
    }

    .classPage #main .container
    {
        margin-top: 0;
        margin-bottom: 15px;
        padding: 15px;
    }

    #timeTable tr:first-of-type
    {
        display: none;
    }

    #timeTable td
    {
        display: block !important;
        border-bottom: 1px solid #fff;
        padding-left: 50%;
        position: relative;
        height: 41px;
        box-sizing: border-box;
    }

        #timeTable td:before
        {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
        }

        #timeTable td:nth-of-type(1):before
        {
            content: "Time";
        }

        #timeTable td:nth-of-type(2):before
        {
            content: "Type";
        }

        #timeTable td:nth-of-type(3):before
        {
            content: "Class";
        }

        #timeTable td:nth-of-type(4):before
        {
            content: "Instructor";
        }

        #timeTable td:nth-of-type(5):before
        {
            content: "Duration";
        }

        #timeTable td:nth-of-type(6):before
        {
            content: "Studio";
        }
}

/*Small*/
@media (max-width:479px)
{

    #main
    {
        padding: 0 !important;
    }

    .container
    {
        margin: 0 !important;
    }

    input[type="text"], input[type="password"], select, .uk-button
    {
        width: 100%;
    }

    label, #ctl00_mainContent_tcInterest_ctl00 span
    {
        display: block;
        margin-top: 0.5rem;
    }

    #classFilter img
    {
        width: 100px;
        max-width: 100%;
    }

    #resetFilter, #filterClose
    {
        width: 100px;
        max-width: 100%;
        padding: 0;
        height: 40px;
        line-height: 40px;
    }
}

/*Xtra Small*/
@media (max-width:320px)
{
    #mobileHeader img
    {
        max-width: 35px;
    }

    #mobileHeader h1
    {
        font-size: 1.1rem;
        margin: 0;
    }

    #drawerToggleMobile
    {
        top: 1.15rem;
    }
}


/********** uiKit **********/

/*The following will need to be changed directly in the uiKit files depending upon which modules are being used
    
    1. Datepicker
    2. Alerts
    3. Success/Danger forms
    4. Buttons
    5. Anchors
    6. Panels / Boxes
    7. Accordions
    8. Badges
*/

/********** Other Notes **********/

/*
    DO NOT START WORK UNLESS A WEBSKINREQUEST FORM (webskinrequest.ez-runner.com) HAS BEEN FILLED OUT AND THE DEV WEBSKIN HAS BEEN AGREED AS COMPLETE BY THE CUSTOMER.
    ALSO MAKE SURE THE CONFIG HAS BEEN COMPLETED BY THE PM OR SEND IT BACK.

    1. All images must be stored locally and using <asp:image> tags
    2. Make sure you replace images/logo.png with their logo as its used in other places.
    3. You will need to change the ajax loader image and also make sure the loading box is the correct height for their logo.
    4. Make sure you check the wait.aspx files to make sure their logo works with a white background.
    5. Change the Yes/No I am jumping tick box colours to match their company colors as these are inline.
    6. Make sure all fonts are either downloaded and stored locally or that they use a https url.
    7. Make sure you update the fav icon.
    8. Make sure all language files are correct.
    9. Make sure your post login and pre-login classes are applied to the required elements.
    10. Make sure you have replicated the mobile menu design - pre-login and post login
    11. Update email templates as required.
    12. Update Jumpsettings.cfg with required BE's from web skin request form. Include double jump explanation text in only the ones where you can book a second hour.
    13. Update appsettings.cfg with options and info from web skin form.
    14. Add any party extras images to images/extras. Resize to get the file size down. They dont need to be any bigger than 500 x 500.
    15. Don't forget to style the waiverstation if they are using it.
    16. Any custom jquery scripts you need to create need to be placed in js/ez-runner.js. 
        If you want to protect them from failing on a post back then place inside of the prm.add_pageLoaded(pageLoaded); function.
    17. Check browser console to make sure there are no errors.
    18. Browserstack test in IE 10 and above, OSX, Firefox, Chrome, IOS and Android.
    19. Before going live make sure all of their links on the master page and any within the emails are pointing to the live url.
*/

/********** Useful Resources **********/
/*
    css-tricks.com - If you need any CSS properties explained
    w3schools.com -  If you need any CSS or JQuery explained
    rgb.to - To get compatable colours to use for alerts etc
    colllor.com - To darken and lighten a colour
*/