/*

        EBI site-wide positioning for generic elements

        ~ generic masthead rules
        ~ masthead menus
        ~ global masthead
                ~ global menu
                ~ global search
        ~ local masthead
                ~ local menu
                ~ local search
        ~ local footer
        ~ global footer
                (includes global expanded nav)


        AUTHOR: Francis Rowland
        DATE:   Feb 2012

*/


/*
===================================================
MASTHEAD STYLE RULES FROM OTHER CSS -- START
===================================================
*/

html, body {
    min-width: 1024px;
}
html {
background: white url(//www.ebi.ac.uk/web_guidelines/images/global/pale_grey_slight_texture.jpg) top left repeat;
}
body {
    background: #fff;
    width: 100%;
    margin: 0;
}
div#footerdiv *,
div#headerdiv * {
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    text-align: left;
    text-indent: 0;
    line-height: 1.538;
}
.contents {
    background-color: #fff;
    position: inherit;
    top: auto;
    width: 98%;
    z-index: auto;
    margin: 0 1%;
    padding-bottom: 20px;
    min-height: 724px;
}
div#local-masthead h1 {
    top: inherit;
    left: inherit;
    position: relative;
    font-size: 131%;
    padding: 0;
    padding: 0px! important;
    margin: 0;
}
div#local-masthead {
    margin-bottom: 0.5em;
}

div#headerdiv form fieldset {
    border:2px solid #fff;
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    background-color: rgba(255, 255, 255, 0.5);
}

div#headerdiv form {
    white-space: nowrap;
    padding: 0;
}


div#headerdiv img.logo {
    margin-bottom: 7px;
    margin-bottom: 0px;
}
div#local-title-logo .logo {
    /*    width: 24px;*/
    /*    min-width: 1em;*/
    width: 5%;
    min-width: 0em;
    max-width: 30px;

}
div#local-title-logo h1 {
    font-size: 280%;
    color: #424242;
    top: auto;
    left: auto;

}
div#local-title-logo p {
    padding: 0;
    margin: 10px 0;
}
div#local-title-logo span.strapline {
    padding: 0;
    color: #4a4a4a;
    font-size: 154%;
}

div#at15s * a {
    text-decoration: none;
    border-bottom: none;
}

form#local-search input.submit {
    width: 4.5em;
}

form#local-search div.form {
    width: 100%;
    white-space: nowrap;
}

div#headerdiv a {
    color: #666;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
}

div#headerdiv a:visited { color: #551a8b; }

div#headerdiv a:hover { color: #06e; }

div#headerdiv a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */

div#headerdiv a:hover,
div#headerdiv a:active { outline: 0; }

/* --- Links --- */
div#headerdiv a:link,
div#headerdiv a:visited {
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: inherit;
}

div#headerdiv a:hover,
div#headerdiv a:focus,
div#headerdiv a:active { border-bottom-style: solid; }

div#headerdiv a.special {
    font-style: italic;
    border-bottom-style:double;
    border-bottom-width: 3px;
    padding: 0.1em 0.3em;
}

div#local-service h1.heading {
    font-size: 240%;
    text-align: center;
    color: #424242;
}
div#local-service a.tinyURL {
    display: none;
    font-size: 167%;
    text-align: center;
}

div#local-service {
    text-align: center;
}
div#local-logo {
    margin: 0px 1% 0px 1%;
    white-space: nowrap;
    z-index: 2;
    _padding-bottom: 1em! important;
}
div#local-logo {
    white-space: nowrap;
}
div#local-logo div.grid_1 {
    min-width: 4em;
    white-space: nowrap;
}
div#local-logo img.logo {
    padding: 5px 0;
    width: 2em;
}
div#local-logo h1.strapline {
    /*font-size: 120%;*/
    font-size: 167%;
    top: 0;
    line-height: inherit;
    margin: 0px;
    /*color: #111;*/
    /*color: #424242;*/
    color: #666;
}
div#local-logo h1.heading {
    /*font-size: 167%;*/
    font-size: 197%;
    line-height: inherit;
    /*margin: 5px 0 0;*/
    margin: 0;
}
div#local-masthead h1.heading span {
    color: #424242;
    font-size: 104%;
    letter-spacing: normal;
    margin-left: 5px;
    line-height: 1.2;
    display: inline-block;
    display: -moz-inline-stack;
    *display: inline;
    zoom: 1;
    vertical-align: top;
}
div#local-logo h1.heading a {
    vertical-align: top;
}

div#local-masthead ul li {
    border-color: transparent;
    border-right: 1px dotted #f8f8f8;
}

div#local-masthead ul li.action {
    background-color: #111;
    float: right;
}

/*div#headerdiv nav ul#local-nav li.action{
    font-size: 92%
}*/



div#local-masthead ul li.last { border-right: 0 none; }

div#local-masthead ul li a {
}

div#local-masthead ul li a:link,
div#local-masthead ul li a:visited {
    border-bottom:0 none;
    color: #f6f6f6;
}

div#local-masthead ul li.action a:link,
div#local-masthead ul li.action a:visited {
    /*    padding-top: 0px;*/
    border-bottom: none;
    background-color: #333;
}

div#local-masthead ul li.action a:hover,
div#local-masthead ul li.action a:focus,
div#local-masthead ul li.action a:active {
    border-bottom: none;
    color: #fff;
    background-color: #111;
}


div#footerdiv .affiliate-list,
div#local-masthead .affiliate-list {
    margin-bottom: 1em;
    margin-top: 1.1em;
    white-space: normal;
    display: inline;
    float: right;
}
div#footerdiv .affiliate,
div#local-masthead .affiliate {
    padding: 10px;
    float: none;
    zoom: 1;
    _width: 0;
}
div#local-masthead .affiliate {
    padding: 0 2px;
}
div#footerdiv .affiliate *,
div#local-masthead .affiliate * {
    text-decoration: none! important;
    border: none! important;
}
div#footerdiv .affiliate a,
div#local-masthead .affiliate a {
    text-decoration: none;
    border: none;
}
div#footerdiv .affiliate img,
div#local-masthead .affiliate img {
    text-decoration: none;
    border: none;
    width: 7em;
    vertical-align: middle;
    padding: 2px 0 7px;
}
div#local-masthead .affiliate span {
    text-decoration: none;
    border: none;
    font-family: "Times New Roman";
    font-weight: bold;
    color: #606060;
    font-size: 93%;
    vertical-align: top;
}
#local-footer a {
    border-bottom: 0 none;
}
div#footerdiv div#local-footer a:link {
    color: #fff; /*Toms fix */
}
#local-nav-expanded * {
   display: inline;
   float: left;
}
#local-nav-expanded img {
    width: 90px;
    margin: 5px 0;
}
#local-nav-expanded div.logo {
margin: 7px 0;
height: 21px;
overflow: hidden;
}
#local-nav-expanded div.logo img {
    margin: 0;
}

div#local-masthead div#local-service div {
    /*width: 98%*/
    white-space: nowrap;
}
div#local-masthead div#local-service div:last-child {
    display: none;
}
form#local-search fieldset span.examples { float: left; }

div#local-masthead form input {
    margin:0.2em 0.1em 0.2em 0.2em;
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    vertical-align: middle;
}

div#local-masthead form input.submit {
    /*    display:block;*/
    margin:0.5em 0;
    padding: 3px 9px;

    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-size: 108%;	/* 12px */
    border-width: 1px;

    border-color: #618658;

    background-color: #71b360;	/* colour P1 */
    background-image: -moz-linear-gradient(top, #9DD98E, #71b360);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #9DD98E),color-stop(1, #71b360));
    background-image: -webkit-linear-gradient(#9DD98E, #71b360);
    background-image: linear-gradient(top, #9DD98E, #71b360);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#9DD98E', EndColorStr='#71b360');

    box-shadow: 0px 2px 2px #adadad;
    -moz-box-shadow: 0px 2px 2px #adadad;
    -khtml-box-shadow: 0px 2px 2px #adadad;
    -webkit-box-shadow: 0px 2px 2px #adadad;

    color: #111111;
    text-shadow: #f7f7f7 0 1px 1px;
    width: auto;

    /* IE7 */
    *padding-top: 0px;
    *padding-bottom: 0px;
}

div#local-masthead form input.submit:hover,
div#local-masthead form input.submit:focus,
div#local-masthead form input.submit:active {
    background: #71b360;		/* colour C1 */
}

div#local-masthead form input.submit:active {
    box-shadow: 0 0 0 transparent;
    -moz-box-shadow: 0 0 0 transparent;
    -khtml-box-shadow: 0 0 0 transparent;
    -webkit-box-shadow: 0 0 0 transparent;
}
/*.alpha {
    margin-left: 0;
}

.omega {
    margin-right: 0;
}



.grid_1 {
    width:2.167%;
}

.grid_2 {
    width:6.333%;
}

.grid_3 {
    width:10.5%;
}

.grid_4 {
    width:14.667%;
}

.grid_5 {
    width:18.833%;
}

.grid_6 {
    width:23.0%;
}

.grid_7 {
    width:27.167%;
}

.grid_8 {
    width:31.333%;
}

.grid_9 {
    width:35.5%;
}

.grid_10 {
    width:39.667%;
}

.grid_11 {
    width:43.833%;
}

.grid_12 {
    width:48.0%;
}

.grid_13 {
    width:52.167%;
}

.grid_14 {
    width:56.333%;
}

.grid_15 {
    width:60.5%;
}

.grid_16 {
    width:64.667%;
}

.grid_17 {
    width:68.833%;
}

.grid_18 {
    width:73.0%;
}

.grid_19 {
    width:77.167%;
}

.grid_20 {
    width:81.333%;
}

.grid_21 {
    width:85.5%;
}

.grid_22 {
    width:89.667%;
}

.grid_23 {
    width:93.833%;
}

.grid_24 {
    width:98.0%;
}*/

@media only screen and (max-width: 1100px) {
    div#local-title-logo h1 {
        font-size: 240%;
        font-size: 220%;
    }
    div#local-title-logo .logo {
        width: 5%;
        min-width: 0px;
        max-width: 24px;
    }
}

/*
===================================================
EBI-PATCH CSS
===================================================
*/


body,
.container_24,
.container_24 .grid_24 { width: 100%; margin: 0 auto; }

body { max-width: 1350px; }
body.full-width { max-width: none; }

section#global-nav-expanded .grid_4 h3 { padding: 0; }

section#global-nav-expanded .grid_4 h3 a {
    display: block;
    padding: 0.5em 0.3em 0 0.3em;
}
section#global-nav-expanded .grid_4 h3 a:hover,
section#global-nav-expanded .grid_4 h3 a:focus,
section#global-nav-expanded .grid_4 h3 a:active { background-color: #ddd; }


div#global-masthead ul li a {
    padding-top: 4px;
    /* this is to stop the strange
    text shudder that ingvar reported
    when hovering over the Global links
    */
}


@media screen and (min-height: 600px) {
    div#content { min-height: 250px; }
}

@media screen and (min-height: 1000px) {
    div#content { min-height: 450px; }
}

@media screen and (max-width: 940px) {
    h1, h2 { line-height: 2; margin: 0.1em 0; }

    h1 { font-size:277%; }

    h2 { font-size:182%;}
}

@media screen and (max-width: 600px) {

    div#local-masthead .grid_12 { float: none; width: 100%; }

    div#local-masthead form fieldset { margin: 0; }

    h1 { margin-bottom: -0.8em;}

}

@media screen and (max-width: 530px) {

    h1 { font-size:182%; margin-bottom: -1em;}

    h2 { font-size:135%;}

    div#global-masthead nav { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }	/* visually hidden */

    form#local-search fieldset span.examples { float: left; }

    section#global-nav-expanded .grid_4 { width: 100%; float: none; }

    section#global-nav-expanded .grid_4 ul { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }	/* visually hidden */

    section#global-nav-expanded .grid_4 h3 {
        line-height: 1.1;
        margin: 0.4em 0.2em;
    }

}

@media screen and (max-width: 350px) {
    form#local-search fieldset div.left { width: 65%; }

    form#local-search fieldset div.right { width: 32%; }
}