body {
    font: 100% Verdana, Helvetica, Arial, sans-serif;
    background: #3CC url('/images/bg.gif') top right repeat-x fixed;
    margin: 0;	padding: 0;
    text-align: center;
    color: #FFF;
}

body.homeBody {
    background: white;
    height: 100%
    margin: 0;
}

#mxContainer {
    width: 1024px;
    background: #34679B;
    margin: 0 auto;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    text-align: left;
    padding-top:25px;
    position:relative;
}

a:link, a:active, a:visited { text-decoration:none; }

#mxPass { background:url('/images/pass.jpg') no-repeat; width:200px; height:150px;
          position:absolute; right:15px; padding:48px 30px; color:#D02619; }
#mxPass h4 { font-size:80%; padding-top:0; padding-bottom:10px; margin:0; }
#mxPass form { margin:0; padding:0; }
#mxPass label { color:#D02619; font-size:8pt; font-weight:bold; }


#mxMenu { border-top:1px solid #34679B; border-bottom:1px solid #34679B; }

#mxMenu .sf-menu { width:100%; background:#FFCD31; font-size:10pt; }
#mxMenu .sf-menu li {
    background-image:none;
    background:#FFCD31;
}

#mxMenu .sf-menu #current a { background: red; color:white; } /* NB: can change BG color of anchor's container, but not text...so using a */

#mxMenu .sf-menu a { border:none; font-weight: bold; }
#mxMenu .sf-menu li a { border-left:1px solid #34679B; }
#mxMenu .sf-menu li a:hover { background:red; color:white; }
#mxMenu .sf-menu ul li a { border:none; }

.mxContent { clear:both; padding:10px 15px; }
/* should perhaps swap orange links to more specific selector and have this as default (less specific, easy to override)*/
/* 2010-04-26 swapped to class */
.mxContent a:link, .mxContent a:active, .mxContent a:visited { color:#FFCD31; font-weight:bold; }
.mxContent a:hover { color:#D02619; }

#mxFooter { clear:both; font-size:80%; padding:20px 20px; }
#mxFooter a:link, #mxFooter a:active, #mxFooter a:visited { color:#FFF; }
#mxFooter a:hover { color:#FFCD31; font-weight:bold; }

.coloured { color:#3CC; }

div.message {
    font-weight:bold;
    color:white;
}

.failure {
    color:yellow;
    border-bottom:1px solid red;
}

pre {
    background-color: #eee;
    padding: 10px;
    font-size: 11px;
}

.fieldWithErrors {
    padding: 2px;
    background-color: red;
    display: table;
}

#errorExplanation {
    width: 400px;
    border: 2px solid red;
    padding: 7px;
    padding-bottom: 12px;
    margin-bottom: 20px;
    background-color: #f0f0f0;
}

#errorExplanation h2 {
    text-align: left;
    font-weight: bold;
    padding: 5px 5px 5px 15px;
    font-size: 12px;
    margin: -7px;
    background-color: #c00;
    color: #fff;
}

#errorExplanation p {
    color: #333;
    margin-bottom: 0;
    padding: 5px;
}

#errorExplanation ul li {
    font-size: 12px;
    list-style: square;
    color: #000;
}

a.mx-button-yellow:link, a.mx-button-yellow:active, a.mx-button-yellow:visited, input.mx-button-yellow {
    background: #FFCD31;
    color:#34679B;
    font-weight: bold;
    padding:5px 10px;
    cursor: hand; cursor: pointer;

    -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
    position: relative;
    behavior: url(/stylesheets/PIE.htc);
    border: 1px solid white;
    font-size: 1.1em;
}

a.mx-button-yellow:hover, .mx-button-yellow.ui-state-hover {

    color:#3CC;
}
.mxContent a.mx-button-radio-small:link, .mxContent a.mx-button-radio-small:active, .mxContent a.mx-button-radio-small:visited,
.mxContent .mx-button-radio-small {
    border:none;
    background: #34679B url(/images/logo_tiny_on_blue.jpg) 93% 50% no-repeat;
    color:#FFCD31;
    font-size:9px;
    font-weight:normal;
    padding:2px 25px 2px 20px;
    text-align:center;
    -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
    cursor: hand; cursor: pointer;
    position: relative; 
    behavior: url(/stylesheets/PIE.htc);
}

.mxContent a.mx-button-radio-small:hover, .mxContent .mx-button-radio-small.ui-state-hover {
    color:#FFF;
}

.helpContainer {
    width: 290px;
    height: 370px;
    float: left;
    margin-left: 20px;
    text-align: center;
    background: white;
    color: black;
    padding: 0 10px;
    font-size: 85%;
    cursor: hand;
    cursor: pointer;
}

p.helpIncludes {
    color: #34679B;
    margin: 0 auto;
    font-weight: bold;
}

a.helpIncludes:link, a.helpIncludes:active, a.helpIncludes:visited {
    color: #34679B;
    font-weight: bold;
    display: block;
}

a.helpIncludes:hover {
    color: #D02619;
}

.helpSection div a.helpPageLink:link, .helpSection div a.helpPageLink:visited { color: black; }
.helpSection div a.helpPageLink:hover { color: #D02619; }

.helpSectionHover .ui-dialog-titlebar { display:none; }
.helpSectionHover .ui-dialog-content { background: #FFF4D3; }

.helpPageContent { float: left; margin-left: 20px; background: white;color: black;padding: 5px 10px;font-size: 85%; }
.helpPageContentHeader { margin: 0 auto; color:#34679B; font-weight:900; text-align: center; }

.helpPageContent a.hover_box_link:link, a.hover_box_link:active, a.hover_box_link:visited {
    color: #34679B;
    font-weight: bold;
    font-family: verdana, sans-serif;
}
.helpPageContent a.hover_box_link:hover {
    color: #D02619;
}

.recruitContent tr{
   color: black;
}

.recruitOfferHeader {
    text-align: center;
    color: #FFCD31;
}

.offerHeaderRed {
    color: red;
}

.homeBanner {
    margin: 0;
    width: 60%;
    background-color: #009CA6;
    height: 30px;
    padding: 20px 20%;
    float: left;
}

#social-container div {
    text-align: right;
    float:right;
    width:30px;
    height:30px;
    margin-right:10px;
}

#home-logo {
    display: inline;
    width: 100%;
    text-align: center;
}

#home-logo img {
    width: 100%;
    max-width: 300px;
}

.homeBannerOffer {
    display: inline;
}

.recruitOfferHeaderHome {
    text-align: center;
    color: red;
    font-size: 0.8em;
    display: inline;
    font-weight: bold;
}


/*
 * AUDIO JS STYLING
 */
.audiojs { height: 22px; background: #404040;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444), color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, #444));
    background-image: -moz-linear-gradient(center top, #444 0%, #555 50%, #444 51%, #444 100%);
    -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
    -o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
    width: 220px;
}
.audiojs .play-pause { width: 15px; height: 20px; padding: 0px 8px 0px 0px; }
.audiojs p { width: 25px; height: 20px; margin: -3px 0px 0px -1px; }
.audiojs .scrubber { background: #5a5a5a; width: 75px; height: 10px; margin: 5px;}
.audiojs .progress { height: 10px; width: 0px; background: #ccc;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc), color-stop(0.5, #ddd), color-stop(0.51, #ccc), color-stop(1, #ccc));
    background-image: -moz-linear-gradient(center top, #ccc 0%, #ddd 50%, #ccc 51%, #ccc 100%); }
.audiojs .loaded { height: 10px; background: #000;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222), color-stop(0.5, #333), color-stop(0.51, #222), color-stop(1, #222));
    background-image: -moz-linear-gradient(center top, #222 0%, #333 50%, #222 51%, #222 100%); }
.audiojs .time { float: left; height: 25px; line-height: 25px; }
.audiojs .error-message { height: 24px;line-height: 24px; }

#ctaPanel {
    margin-top: 10px;
    background-color: rgba(255, 205, 49, 0.1);
    color: black;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:1px solid #33CCCC;
    padding: 10px;
    text-align: center;
}

#homeContainer {
    min-height: 100%;
    position: relative;
}

#home-footer {
    margin: 0;
    background-color: #FFCD31;
    height: 30px;
    padding: 20px 20%;

    width: 60%;
    float: left;
}

#homeContent {
    width: 900px;
    padding-bottom: 10px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#lower-photo-panel {
    float: left;
    text-align: center;
    width: 100%;
    height: 135px;
    overflow: hidden;
}

#lower-photo-panel img {
    margin-top: 5px;
}

.flagBanner {
    float: left;
    height: 40px;
    width: 100%;
    background: #34679B url(/images/Flags.jpg) 0 0 repeat-x;
    background-size: auto 40px
}