/*
 * Step 1: Take widths off everything and make them squishy
 */
img {
    max-width: 100%;
}

/* These selectors are ordered as they appear in the DOM */
section#wrap {
    width: 96%;
    max-width: 1040px;
    padding: 0 2%;
}

#content-wrap,
nav#sub-nav {
    max-width: 100%;
    width: auto;
}

@media (max-width: 540px) {
    /* Makes table rows just full width, it doesn't work every time but will help with most tables */
    table td, table th {
        width: 96% !important;
        clear: both !important;
        /* float: left !important; replaced by responsive-tables.css */
        padding-left: 2% !important;
        padding-right: 2% !important;
    }

        /* JD added 19/02/15 */
        table th.responsive-optional, table td.responsive-optional {
            display: none;
            width: 0;
            height: 0;
            opacity: 0;
            visibility: collapse;
        }

    .checkout table th {
        display: none;
    }
}
/* Step 2: Make everything use percentages for widths instead of nasty old pixels */
/* Forms */
form input[type="text"],
form input[type="password"],
form textarea, form select {
    width: 96%;
    max-width: 100%;
    padding: 0.66em 2%;
    margin: 0 0 1em 0;
}

/* Left sidebar */
#content #side-left {
    width: 23.684210526%;
    /* 180px */
}

@media (max-width: 540px) {
    #content #side-left {
        width: 100%;
    }
}

.treeview li,
#content #side-left nav#side-menu {
    width: 90%;
}

/* Main content area */
#content {
    width: 79.166666667%;
    background-color: #fff;
}

@media (max-width: 540px) {
    #content {
        margin-top: 1em;
    }
}

@media (max-width: 759px) {
    #content {
        width: 100%;
    }
}

#content #main {
    width: 71.052631579%;
    /* 560px */
    /*margin-left: 2.631578947%;*/
    margin-left: 10px;
    /* 20px */
    padding-right: 2.631578947%;
}

@media (max-width: 540px) {
    #content #main {
        margin: 0;
        padding: 0 2%;
        width: 96%;
    }
}


/* Right sidebar */
.side-page {
    width: 18.75%;
    /* 180px */
    /* These form elements appear in the shopping basket screens */
}

@media (max-width: 759px) {
    .side-page {
        width: 92%;
        float: left;
        background-color: #fff;
        padding: 4%;
    }
}

.side-page input[type=submit] {
    cursor: pointer;
    background-color: #008c9a;
    color: #FFF;
    margin: 0 0 1em 0;
    width: auto;
    height: 23px;
    line-height: 1em;
    display: inline-block;
    font-weight: bold;
    font-size: 11px;
    text-align: center;
    float: left;
    border: none;
    padding: 0.25em 1em;
    border-radius: 1em;
}

/* Cross-selling widgets in the right sidebar */
@media (max-width: 759px) {
    .widgets hr {
        display: none;
        /* The hr elements break the layout unless they are removed at smaller sizes */
    }
}

.widgets p {
    width: 100%;
}

@media (max-width: 759px) {
    .widgets p {
        /* Sidebar widgets now only span 1 column at smaller widths */
        width: 100%;
        float: left;
        border-bottom: 1px solid #e9e9e9;
        padding-bottom: 0.5em;
        margin-top: 0;
    }
}

/* Used for centre addresses */
#side-bar .info-box {
    width: auto;
}

@media (max-width: 759px) {
    #side-bar .info-box {
        width: 94%;
        padding: 1% 3% 2%;
    }
}



#content #side-left #pdf-box, #content #side-left #tel-box {
    width: auto;
}

@media (max-width: 759px) {
    #content #side-left #pdf-box, #content #side-left #tel-box {
        display: none;
    }
}

@media (max-width: 759px) {
    #content #side-left #pdf-box + p, #content #side-left #tel-box + p {
        display: none;
    }
}

/* Footer */
footer section {
    height: auto;
    width: 96%;
    max-width: 1040px;
    padding: 0 2%;
    overflow: hidden;
}

@media (max-width: 759px) {
    footer section > div {
        line-height: 4em;
    }
}

footer section > div > span {
    padding-left: 5% !important;
}

@media (max-width: 759px) {
    footer section > div > span {
        display: block;
        padding-left: 0 !important;
    }
}

section#footer-wrap {
    height: auto;
}

/* Step 3: Tweak things */
@media (max-width: 759px) {
    body {
        background-image: none !important;
        background-color: #e5f1f3;
    }
}

@media (max-width: 759px) {
    #content #breadcrumb {
        top: 0;
    }
}

.treeview li {
    float: none;
    /* For some reason the responsive nav plugin won't work without this */
}

.in-this-section {
    /* What was the left hand sidebar is now a drop-down menu on mobiles */
}

@media (max-width: 540px) {
    .in-this-section {
        overflow: hidden;
        padding: 0.25em 0.5em;
        margin: 0 0.5em 2em;
        border: 1px solid #e9e9e9;
        border-radius: 5px;
    }

        .in-this-section .nav-toggle {
            background-color: #fff;
            border-bottom: none;
            position: relative;
            font-family: Arial,Helvetica,sans-serif,sans-serif;
            font-size: 14px;
            padding-bottom: 0.5em;
            font-weight: bold;
        }

            .in-this-section .nav-toggle:after {
                border-top-color: #ccc;
            }
}

/* Publications boxes */
#content #main .square {
    width: 49%;
    margin: 0 2% 3% 0;
}

@media (max-width: 540px) {
    #content #main .square {
        width: 100%;
        margin: 0px 0px 20px;
    }

        #content #main .square h3 a {
            text-align: left;
        }

        #content #main .square a {
            display: block;
            text-align: center;
        }
}

@media (max-width: 540px) and (max-width: 540px) {
    #content #main .square a {
        text-align: left;
    }

        #content #main .square a.read-more {
            text-align: center;
        }
}

#content #main .square a.read-more {
    margin-top: 0.5em;
}

#content #main .square.end {
    margin-right: 0;
}

/* Generic content boxes */
.box {
    overflow: hidden;
}

@media (max-width: 540px) {
    #content #main .box .inner-wimg {
        width: 100%;
    }
}

/* Home page */
#home nav#menu {
    height: auto;
}

@media (max-width: 759px) {
    #home nav#menu ul {
        padding: 1em 0;
    }
}

@media (max-width: 759px) {
    #home #top-nav ul {
        padding: 1.2em 0;
    }
}

/* Checkout process */
p.progressbar {
    text-align: left;
    padding: 0.5em;
    border-bottom: none;
}

/* Courses selector on outdoor classroom page */
.course-finder input[type=submit] {
    margin-left: 16px;
}

/* Feedback button */
#feedback-btn {
    width: 100%;
    float: left;
    text-align: right;
}

    #feedback-btn a {
        /* Reset all the values */
        position: static;
        background-image: none;
        height: auto;
        width: auto;
        top: auto;
        right: auto;
        display: inline-block;
        margin-top: 0.5em;
        background-color: #f4f4f4;
        padding: 0.5em 0.75em;
        border-radius: 2em;
        font-family: 'CheltenhamFSBookCondensed', Georgia, Times, 'Times New Roman', serif;
        font-size: 1.4em;
    }

        #feedback-btn a:hover, #feedback-btn a:active, #feedback-btn a:focus {
            background-color: #008c9a;
            color: #fff;
        }

/* Centre home page */
.mobile-carousel-replacement {
    width: 100%;
    display: none;
}

@media (max-width: 759px) {
    .mobile-carousel-replacement {
        display: block;
    }
}

@media (max-width: 759px) {
    .carousel {
        display: none !important;
    }
}

#content #main #image-box, #content #main #image-box-one {
    width: auto;
    max-width: 556px;
}

.tel-box {
    /* The second tel box that's only shown on mobiles in the main content column */
    display: none;
    color: #008c9a;
    font-size: 1.5em;
    background-color: #eeeeee;
    padding: 0.22em 1em;
    margin-bottom: 1em;
}

@media (max-width: 759px) {
    .tel-box {
        display: block;
    }
}

.fixed-layout section#wrap {
    width: 960px;
}

.fixed-layout #fsc-logo {
    position: absolute;
    left: 0;
    top: 1.5em;
    padding-top: 0;
}

    .fixed-layout #fsc-logo a, .fixed-layout #fsc-logo img {
        width: 157px;
        height: 65px;
    }

.fixed-layout nav#top-nav ul {
    width: auto;
    right: 0;
    left: auto;
    position: absolute;
}

    .fixed-layout nav#top-nav ul li {
        padding: 0 !important;
        margin: 0 0 0 2em !important;
        display: inline-block;
    }

.fixed-layout #tagline {
    position: absolute;
    top: 2em;
    left: 180px;
    max-width: 20em;
    margin-bottom: 0;
    font-size: 1.833333333em;
}

.fixed-layout #search-box {
    position: absolute;
    right: 0;
    top: 6em;
    width: 33%;
    margin-bottom: 0;
}

.fixed-layout #sub-nav {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.93, #F8F9DA), color-stop(1, #EDEDD0));
    border-top: 4px solid #acb640;
    background-image: -o-linear-gradient(bottom, #F8F9DA 93%, #EDEDD0 100%);
    background-image: -moz-linear-gradient(bottom, #F8F9DA 93%, #EDEDD0 100%);
    background-image: -webkit-linear-gradient(bottom, #F8F9DA 93%, #EDEDD0 100%);
    background-image: -ms-linear-gradient(bottom, #F8F9DA 93%, #EDEDD0 100%);
    background-image: linear-gradient(to bottom, #F8F9DA 93%, #EDEDD0 100%);
}

    .fixed-layout #sub-nav li {
        display: inline-block;
    }

    .fixed-layout #sub-nav a {
        padding: 0.66em 0.9em;
        margin: 0.33em 0.33em 0;
        border-bottom: none;
    }

        .fixed-layout #sub-nav a:before {
            border-right: 2px solid #e6e7bb;
        }

.fixed-layout table td, .fixed-layout table th {
    width: inherit !important;
    clear: none !important;
    float: none !important;
    padding-left: inherit !important;
    padding-right: inherit !important;
}

.fixed-layout .checkout table th {
    display: table-cell;
}

.fixed-layout #content #side-left {
    width: 23.684210526%;
    /* 180px */
}

.fixed-layout #content {
    width: 79.166666667%;
}

    .fixed-layout #content #main {
        width: 71.052631579%;
        /* 560px */
        margin-left: 2.631578947%;
        /* 20px */
        padding-right: 2.631578947%;
        padding-left: 0;
    }

.fixed-layout .side-page {
    width: 18.75%;
    /* 180px */
    padding: 0;
}

.fixed-layout .widgets hr {
    display: block;
}

.fixed-layout .widgets p {
    float: none;
    border-bottom: none;
    padding: 0;
}

.fixed-layout footer section {
    padding: 0;
    width: 100%;
    max-width: 960px;
    overflow: visible;
}

    .fixed-layout footer section > div {
        line-height: inherit;
    }

        .fixed-layout footer section > div > span {
            padding-left: 5% !important;
            display: inline;
        }

.fixed-layout #content #breadcrumb {
    top: 0;
}

.fixed-layout .in-this-section {
    overflow: visible;
    border: none;
    border-radius: none;
    margin: 0;
    padding: 0;
}

.fixed-layout #content #main .square {
    width: 49%;
    margin: 0 2% 2% 0;
}

    .fixed-layout #content #main .square h3 a {
        text-align: left;
    }

    .fixed-layout #content #main .square a {
        display: inline;
        text-align: left;
    }

    .fixed-layout #content #main .square .read-more {
        margin-top: 0.5em;
    }

.fixed-layout #content #main .box .inner-wimg {
    width: 316px;
}

.fixed-layout .feedback-btn {
    float: none;
}

/* Course listing */
.list-of-course-search-results {
    list-style: none outside none;
    clear: both;
    float: left;
    margin: 1em 0 !important;
    padding: 0 !important;
    width: 100%;
}

    .list-of-course-search-results li {
        padding: 19px 14px;
        background-color: #e0f7c8;
        border-bottom: 3px solid #fff;
    }

        .list-of-course-search-results li:nth-child(odd) {
            background-color: #f8f9da;
        }

    .list-of-course-search-results p {
        margin: 0;
        color: #333;
        font-size: 13px;
    }

    .list-of-course-search-results a:hover, .list-of-course-search-results a:active, .list-of-course-search-results a:focus {
        color: #333;
        text-decoration: underline;
    }

    .list-of-course-search-results .label {
        color: #777;
        display: block;
        font-size: 11px;
        line-height: 1.5em;
    }

    .list-of-course-search-results .course-title {
        font-size: 18px;
        font-weight: bold;
        display: block;
        margin-bottom: 7px;
    }

    .list-of-course-search-results .course-centre {
        font-size: 15px;
        margin-right: 1em;
    }

        .list-of-course-search-results .course-centre .label {
            position: relative;
            top: 3px;
        }

@media (max-width: 900px) {
    .list-of-course-search-results .course-centre {
        display: block;
        margin: 0 0 7px;
    }
}

.list-of-course-search-results .course-centre,
.list-of-course-search-results .course-dates,
.list-of-course-search-results .course-tutor,
.list-of-course-search-results .course-level {
    margin-right: 1em;
    display: inline-block;
}

@media (max-width: 900px) {
    .list-of-course-search-results .course-dates {
        display: block;
        margin: 0 0 7px;
    }
}

.list-of-course-search-results .course-level {
    margin-right: 0;
}

.search-pagination input[type=submit] {
    margin: 0;
    float: right;
}