/* CSS for FRUOnline v2 */
/* (c) BDGreen  Brian Green Consultancy CIC */
/* Version #1.9, 06/09/11 */

body {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    /*  background-image:url('images/donotuse.png');   PLEASE DELETE ME in production */
    color: #4b4b4b;
    /* font-family: 'Mako', serif; /* Plus <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Mako"> in HTML */
    font-family: "lucida sans","Lucida Grande","lucida","Lucida Sans Unicode", "Arial", "sans-serif";
    border-top: 2px solid #2A4F6F;
}

/* HELP! */
/**************************************************************************************************/

a.help img {
    border: none;
}

a.help {
    position: relative;
    text-decoration: none;
}

    a.help:hover {
        background-color: #f8f9f4;
    }

    a.help span {
        display: none;
    }

    a.help:hover span, a.help:focus span, a.help:active span {
        display: block;
        position: absolute;
        z-index: 100000;
        top: 0em;
        left: 2em;
        width: 150px;
        border-width: 1px;
        border-style: dotted;
        border-color: #528031;
        color: #ff0000;
        font-size: 0.92em;
        background-color: #F4F4F4;
        padding: 0.75em 1em 0.75em 1em;
    }

/* Wrapper */
/**************************************************************************************************/

#wrapper {
    width: 920px; /* WIDTH of Wrapper = WIDTH of Navigation bar (Minimum 200px) + WIDTH of Content + 20px */
    margin: 0 auto;
}

/* Header */
/**************************************************************************************************/

#header {
    margin-top: 5px;
    border-top: 1px solid #778899;
    border-bottom: 1px solid #778899;
    height: 6em;
}

    #header .slogan {
        font-size: 1.4em;
        color: #002e5f;
        background-color: transparent;
        float: left;
        text-align: left;
        margin-left: 2em;
        margin-top: 0.5em;
    }

    #header .logo {
        float: left;
        margin-left: 1.5em;
        margin-top: 0.5em;
    }

    #header .quit {
        float: right;
        -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
        -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
        box-shadow: inset 0px 1px 0px 0px #ffffff;
        background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
        background: -moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
        background-color: #F4F4F4;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        border: 1px solid #dcdcdc;
        display: inline-block;
        font-size: 1em;
        font-weight: bold;
        padding: 6px 24px;
        margin-top: 2em;
        text-decoration: none;
        text-shadow: 1px 1px 0px #ffffff;
    }

        #header .quit:hover {
            background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
            background: -moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
            background-color: #dfdfdf;
        }

        #header .quit:active {
            position: relative;
            top: 1px;
        }

/* Navigation */
/**************************************************************************************************/

#nav {
    float: left;
    color: #5aa225;
    top: 7em;
    margin-left: 10px;
    width: 200px; /* WIDTH of Navigation bar (Minimum 200px) */
}

    #nav ul {
        margin-left: 1em;
        padding-left: 0;
    }

    #nav li {
        font-size: 0.8em;
        border-bottom: 1px #B2BCC6;
        margin-bottom: 0.3em;
    }

    #nav span {
        color: #C0C0C0;
        text-decoration: none;
        border-bottom-width: 1px;
        border-bottom-style: dotted;
        border-bottom-color: #C0C0C0;
    }

    #nav a.greyed_out {
        color: lightgray !important;
        text-decoration: none;
        border-bottom-width: 1px;
        border-bottom-style: dotted;
        border-bottom-color: #5aa225;
    }

    #nav a:link, a:visited {
        color: #5aa225;
        text-decoration: none;
        border-bottom-width: 1px;
        border-bottom-style: dotted;
        border-bottom-color: #5aa225;
    }

    #nav a:hover {
        color: #528031;
        border-bottom-width: 1px;
        border-bottom-style: dotted;
        border-bottom-color: #528031;
    }

    #nav h2 {
        font-size: 1.1em;
        color: #002e5f;
        background-color: transparent;
        border-bottom: 1px dotted #cccccc;
    }

    #nav p {
        padding: 0.4em 1.2em 0.4em 1.2em;
        background: #F4F4F4;
        border-left: 1px dotted #5aa225;
        border-right: 1px dotted #5aa225;
        border-bottom: 1px dotted #5aa225;
        border-top: 1px dotted #5aa225;
        font-weight: 700;
        font-size: 0.8em;
        line-height: 1.6em;
        padding-left: 1.2em;
        margin-bottom: 1.5em;
        line-height: 1.5;
        color: #002e5f;
        font-weight: normal;
        letter-spacing: 0.03em;
        background: #F4F4F4;
        border-bottom: 1px dotted #cccccc;
    }

/* Content */
/**************************************************************************************************/

#content {
    font-size: 0.85em;
    float: right;
    margin-left: 10px;
    width: 700px; /* WIDTH of Content */
}

    #content .button, .submit {
        padding: 1px 6px;
        font-size: 1.2em;
        background-color: #F4F4F4;
    }

    #content h1 {
        font-size: 1.461em;
        margin-bottom: 1em;
        letter-spacing: 0.04em;
    }

    #content h2 {
        display: block;
        font-size: 1.2em;
        margin-bottom: 1em;
        letter-spacing: 0.04em;
    }

    #content h3 {
        display: block;
        font-size: 1em;
        margin-bottom: 1em;
        letter-spacing: 0.04em;
    }

    #content h5 {
        /* Content Heading <h1> equivalent */
        font-size: 1.461em;
        border-bottom-width: 4px;
        border-bottom-style: solid;
        border-bottom-color: #5aa225;
        margin-bottom: 1em;
        letter-spacing: 0.04em;
    }

h1 + h6 {
    margin-top: 0;
}

#content h6 {
    /* Content Heading <h2> equivalent - with lower border */
    font-size: 1.2em;
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: #5aa225;
    margin-bottom: 1em;
    letter-spacing: 0.04em;
}

#content p {
    display: block;
    padding-left: 0;
    margin-bottom: 1.5em;
    line-height: 1.5;
    font-weight: normal;
    letter-spacing: 0.03em;
}

#content ul {
    margin-left: 2em;
    padding-left: 0;
}

#content li {
    border-bottom: 1px;
    margin-bottom: 0.3em;
    background-color: transparent;
    background-image: url("images/bullet.gif");
    background-position: 0;
    background-repeat: no-repeat;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    padding-bottom: 0;
    padding-left: 26px;
    padding-right: 0;
    padding-top: 0;
}

#content .lpad {
    padding-left: 2em;
}

#content .ralign {
    float: right;
}

#content .lalign {
    float: left;
}

#skip {
    float: right;
    display: block;
}

    #skip a {
        padding: 5px;
        font-weight: bold
    }

#content .back {
    display: block;
    font-size: 1.2em;
    color: #002e5f;
    background-color: transparent;
    float: right;
    text-align: right;
    margin-right: 0em;
    margin-top: 5em;
}

#content .error_text {
    padding: 0.4em 1.2em 0.4em 1.2em;
    background: #F4F4F4;
    border-left: 1px dotted #5aa225;
    border-right: 1px dotted #5aa225;
    border-bottom: 1px dotted #5aa225;
    border-top: 1px dotted #5aa225;
    color: #ff0000;
}

#content .advice_text {
    padding: 0.4em 1.2em 0.4em 1.2em;
    background: #F4F4F4;
    border-left: 1px dotted #5aa225;
    border-right: 1px dotted #5aa225;
    border-bottom: 1px dotted #5aa225;
    border-top: 1px dotted #5aa225;
    color: #0000ff;
}

#content a:link, a:visited {
    color: #5aa225;
    text-decoration: none;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #5aa225;
}

div.datepick-popup table {
    margin: 0;
}

div.datepick-popup select {
    width: auto;
}

/* Content Table */
/*********************************************/

#content .table {
    float: left;
    width: 100%;
    table-layout: fixed;
}

#content .unfloat_table {
    width: 100%;
    table-layout: fixed;
}

#content table {
    color: #2A4F6F;
    font-size: 95%;
    border: 1px solid #999;
    border-collapse: collapse;
    margin: 0 0 10px 40px;
}

#content th {
    text-align: left;
    vertical-align: top;
    padding: 1px 4px;
    border: 1px dotted #5aa225;
    background: #eee;
}

#content td {
    text-align: left;
    vertical-align: top;
    padding: 1px 4px;
    border: 1px;
    border-color: #5aa225;
    border-style: dotted;
}

img.resit {
    text-align: center;
    vertical-align: middle;
    width: 14px;
    height: 14px;
}

/* Tables for Welcome page */
/*********************************************/
#welcome table {
    border: 0px;
    margin: 0px;
    padding: 0 0 2px 0;
    color: #4b4b4b;
}

#welcome td {
    border: 0;
    border-color: #0;
}

#welcome form div label {
    padding-right: 2em;
    color: #2A4F6F;
    float: left;
    width: 20%;
}

/* Content Form */
/*********************************************/

.forms {
    width: 60%;
    display: block;
    margin: 0 0 0 40px;
}

input[type="text"], input[type="password"], textarea {
    color: #2A4F6F;
    background-color: #e3f2f7;
    border: 1px inset #00008b;
    width: 200px;
}

    input[type="text"].input-validation-error,
    input[type="password"].input-validation-error,
    textarea.input-validation-error,
    select.input-validation-error {
        background-color: #FFCCCC;
    }

.field-validation-error {
    color: Red;
}

textarea {
    resize: none;
}

.submit {
}

.field_error {
    color: Red;
}

select {
    color: #2A4F6F;
    background-color: #e3f2f7;
    border: 1px inset #00008b;
    width: 203px;
}

.calendar {
    background: #FFF url(images/calendar.gif) no-repeat center right;
}

.history {
    margin-left: 40px;
}

.readOnlyInput {
    background-color: #dddddd;
}

.required_field {
    color: Red !important;
}

.greyed_out_booking {
    color: #C0C0C0;
    text-decoration: none;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #C0C0C0;
}

    .greyed_out_booking a {
        color: #C0C0C0;
        text-decoration: none;
        border-bottom-width: 1px;
        border-bottom-style: dotted;
        border-bottom-color: #C0C0C0;
    }

form div {
    clear: left;
    margin: 0;
    padding: 0;
    padding-top: 5px;
}

    form div > label {
        padding-right: 2em;
        color: #2A4F6F;
        float: left;
        width: 25%;
    }

fieldset {
    border: 1px dotted #61b5cf;
    margin: 1.4em 0 1.4em 0;
}

legend {
    font-weight: bold;
    color: #2A4F6F;
    background-color: #ffffff;
}

/* Footer */
/**************************************************************************************************/

#footer {
    clear: both;
    background-color: #F4F4F4;
    border-top: 1px solid #778899;
    padding: 10px;
}

    #footer h2 {
        text-transform: uppercase;
        font-size: .8em;
        font-weight: bold;
        margin: 0 0 5px 0;
        letter-spacing: 0.25em;
    }

    #footer p {
        font-size: 0.75em;
        color: #002e5f;
    }

.footer_table {
    background: transparent;
    border: transparent;
    width: 80%;
    margin-left: 4em;
}

    .footer_table th, td {
        border: transparent;
        background: transparent;
        vertical-align: top;
        margin: 0;
    }

    .footer_table a:link, a:visited {
        color: #5aa225;
        text-decoration: none;
        border-bottom-width: 1px;
        border-bottom-style: dotted;
        border-bottom-color: #5aa225;
    }

    .footer_table a:hover {
        color: #528031;
        border-bottom-width: 1px;
        border-bottom-style: dotted;
        border-bottom-color: #528031;
    }