@charset "utf-8";
header, section, footer, aside, nav, main, article, figure {
    display: block;
} 
html{
    font-family:Arial,Helvetica Neue,Helvetica,sans-serif !important;
    font-size:0.9em;
    overflow-x: hidden;
    background:#C9E4BC;
}
body{
    background:#E5E5E5;
    margin:0;
}
#header, #footer{
     background-color:#c6e4b7;
}
header{
    background: url("http://afar.bgs.ac.uk/pure/images/PURE_logo_72dpi.png") no-repeat;
    background-size:contain;
}
header{
    min-height:5em;
}
#header div{
    position:relative;
    
}
#slogan{
    font-weight:bold;
}
#footer{
        clear:both;
        position:absolute;
}
#navigation{
    background:rgba(230,243,224,0.7);
}
#navigation ul{
    margin-left:-2.5em;
}
#navigation ul li{
    list-style:none;
    text-align:left;
}
#widthBox{
    background:#fff;
    background-size:cover;
    opacity:0.9;
}
nav .sectionBox .sectionBody{
    overflow:hidden;
    padding-top:5em;
}
#homeBox{
    background:rgba(230,243,224,0.6);
}
/*same size for all screen sizes*/
.menuRow{
    width:100%;
    text-align:left;
    min-height:1.8em;
    padding-top:3px;
    padding-left:2%;
    border-left:#8ec96f 6px solid;
    border-bottom:#8ec96f 2px solid;
    border-top:#8ec96f 2px solid;
}
/*end*/
.menuRow a:hover, .menuRow a:visited, .menuRow a:link{
    
    text-decoration: none;
    color:#000;
}
.copyright img {
    float:left;
    clear:right;
}
.advancedOrSimpleBar{
    background-color:#80B564;
    width:20%;
    float:left;
    clear:right;
    font-size:1.2em;
    color:#000;
    margin-top:1em;
    cursor:pointer;
    
}
.advancedOrSimpleBar i{
    float:right;
    padding:2px 2px 0 0;
}
table{
    border-collapse: collapse;
}
table th{
   background-color:#80B564; 
}
table th,table td{
    border:rgba(0,0,0,0.2) 1px solid;
    padding:2px;
}
.imgBoxLeft25 input, .imgBoxLeft25 select{
    width:100%;
}
#policyMakersPage .filter{
    display:inline-block;
    margin-bottom:2em;
}
.fieldName{
    font-weight:bold;
}
.advancedSearchForm .filter{
    width:100%;
    min-height:2.5em;
}
.advancedSearchForm .filter input, .advancedSearchForm .filter select{
    width:60%;
}
.advancedSearchForm .fieldName{
    width:27%;
    float:left;
}
.advancedSearchForm .fieldInput{
    width:67%;
    float:left;
}
.fieldValue{
    overflow-x: auto;
}
#textSearch{
    margin-left:0;
}
.marginlefttextfield{
    margin-left:20% !important;
}
.fa-question-circle{
    color:#8ABA71;
    font-size:1.5em;
}
.filter{
    border-top:1px solid rgba(0,0,0,0.1);
    padding-top:5px;
}
@media screen and (min-width: 50em) {
    .top{
        margin-top:1.5em;
    }
    .k div{
        width:30%;
        float:left;
    }
    .k div div{
        width:80%;
        float:left;
    }
    .k div i{
        background:#CCE4C0;
    }
    .buttonHolder{
        width:30%;
        margin:2% auto;
        display:block;
    }
    #navigation nav{
        display:block;
    }
    #centerColumn{
        width:100%;
        display:inline-block;
        position:relative;
    }
    #centeringBox{
        width:100%;
        display:inline-block;
        position:relative;
    }
    #slogan{
        display:inline-block;
        position:absolute;
        bottom:0.5em;
        right:1%;
        font-size:1.4em;
        
    }
    header{
        float:left;
        min-width:50%;
    }
    #header div{
        min-height:5em;
    }
    #header{
        width:100%;
        min-height:5em;
        overflow:auto;
    }
    #navigation{
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        display:inline-block;
        width:20%;
        min-height:51.5em;
        float:left;
        margin-bottom:-1.4em;
    }
    #midCol{
        display:inline-block;
        min-height:76vh;
        text-align:left;
        position:relative;
        padding:2%;
        margin:0 0 0 2%;
        min-width:94%;
        left:0;
        right:0;
        top:0;
        bottom:0;
        background:rgba(230,243,224,0.7);
    }
    #midCol h1{
        margin-top:0;
    }
    #mainContent #midCol .sectionBox{
       min-height:100%;
       width:100vh;
    }
    #homeBox{
        position:absolute;
        bottom:2em;
        right:12%;
        width:60%;
        min-height:10em;
    }

    #mainContent{
        width:80%;
        float:right;
        margin-bottom:-1%;
    }
    #copyrightFooterText{
        float:left;
        text-align:left;
        padding:6px 10px;
        font-size:0.9em;
    }
    #footer{
       width:100%;
       min-height:5em;
    }
    .fieldSection{
        width:100%;
        float:left;
        min-height:2.5em;
        border-bottom:rgba(0,0,0,0.2) 1px solid;
    }
    .fieldLabel{
        width:29%;
        float:left;
        border-right:rgba(0,0,0,0.2) 1px solid;
        min-height:2.5em;
    }
    .fieldValue{
        padding-left:2%;
        width:66%;
        float:left;
    }
    .fieldValue table{
        border-collapse: collapse;
        margin-top:10px;
        margin-bottom:10px;
    }
    .fieldValue table tr td{
        border:1px rgba(0,0,0,0.2) solid;
    }
    input[type=checkbox]{
        width:5% !important;
    }
    .downloadContainer{
        width:70%;
        margin-left:0;
        margin-right:0;
        display:inline-block;
    }
    .downloadButton{
        width:43%;
        margin-left:2.5%;
        margin-right:2.5%;
        float:left;
        text-align:center;
        background-color:rgba(180, 180, 180, 0.2);
        padding-top:10px;
        border-radius:10px;
        border:rgba(0,0,0,0.1) 1px solid;
    }
    .downloadButton:hover{
        cursor:pointer;
        border:rgba(0,0,0,0.4) 1px solid;
        background-color:rgba(180, 180, 180, 0.4);
    }
    .downloadButton:hover > span{
        background-color: rgba(180, 180, 180, 0.8)
    }
    .downloadButton:hover a{
        color:#000;
    }
    .downloadButton i{
        width:50%;
        font-size:9em;
        color:#80B564;
        margin-left:25%;
        margin-right:25%;
    }
    .downloadButton a{
        text-decoration: none;
    }
    .downloadButton span{
        margin-top:10px;
        width:100%;
        min-height:3em;
        display:inline-block;
        background:rgba(180, 180, 180, 0.6);
    }
}
@media screen and (max-width: 50em) {
    .k div{
        text-align:left;
    }
    .advancedOrSimpleBar{
        width:100%;
        padding: 0.5em 0;
        margin-bottom:1em;
    }
    body{
        min-height:100vh;
    }
    #centeringBox{
        min-height:100vh;
    }
    #widthBox{
        min-height:100vh;
    }
    html{
        text-align:left !important;
    }
    #centerColumn{
        width:100%;
        display:inline-block;
        position:relative;
    }
    #centeringBox{
        width:100%;
        display:inline-block;
        position:relative;
    }
    #slogan{
        clear:both;
        display:block;
        margin:0 auto;
        bottom:0.5em;
        margin-bottom:0;
        
    }
    header{
        width:100%;
        background: url("http://afar.bgs.ac.uk/pure/images/PURE_logo_72dpi.png") no-repeat center;
        background-size:contain;
    }
    #header{
        width:100%;
        min-height:2em;
       
    }
    #header div{
        min-height:2em;
    }
    #navigation{
        position:relative;
        display:inline-block;
        width:100%;
        float:left;
        margin-left:0;
        margin-bottom:0;
        clear:both;
    }
    #navigation nav{
        display:none;
    }
    #navContent{
        display:inline-block;
        position:relative;
        width:100%;
    }
    
    #midCol{
        position:relative;
        display:inline-block;
        width:100%;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin-top:0;
        min-height:0;
        overflow-x:scroll;
    }
    .overflow{
        overflow-x:scroll;
    }
    nav .sectionBox .sectionBody{
        padding-top:0;
    }
    #mainContent #midCol .sectionBox{
       min-height:100%;
       width:100vw;
    }
    #mainContent #midCol .sectionBox p,#mainContent #midCol .sectionBox ol{
        width:85%;
        text-align:left;
    }
    #homeBox{
        width:100%;
        min-height:10em;
    }
    #homeBox p{
        width:80%;
        text-align:left;
    }
    #mainContent{
        width:100%;
        float:left;
        display:inline-block;
        position:relative;
    }
    #footer{
       width:100%;
       margin-top:4em;
       
    }
    .toggleNavMobile{
        margin-top:2em;
        margin-left:1em;
        position:relative;
        width:35px;
        height:30px;
        float:none;
        clear:both;
        cursor:pointer;
    }
    .line{
        height:5px;
        width:30px;
        margin-bottom:5px;
        background:#fff;
        border-radius:2px;
    }
    .fieldName{
        text-align:left;
        padding-left:5px;
    }
    .advancedSearchForm .filter input, .advancedSearchForm .filter select{
       width:100%;
       float:left;
    }
    .fieldLabel{
        width:23%;
        float:left;
        text-align:left;
        background: rgba(230, 243, 224, 0.7) none repeat scroll 0 0;
        min-height:2em;
        display:inline-block;
       
        padding-top:5px;
    }
    .fieldValue{
        width:75%;
        float:left;
        text-align:left;
        min-height:2em;
        display:inline-block;
        padding-top:5px;
    }
    .fieldSection{
        padding:0.5em 0.5em;
        display:inline-block;
        min-height:1em;
        width:100%;
         border-bottom:1px solid rgba(0,0,0,0.2);
    }
    table{
        max-width:100%;
    }
    .downloadContainer{
        width:70%;
        margin-left:0;
        margin-right:0;
        display:inline-block;
    }
    .downloadButton{
        width:43%;
        margin-left:2.5%;
        margin-right:2.5%;
        float:left;
        text-align:center;
        background-color:rgba(180, 180, 180, 0.2);
        padding-top:10px;
        border-radius:10px;
        border:rgba(0,0,0,0.1) 1px solid;
    }
    .downloadButton:hover{
        cursor:pointer;
        border:rgba(0,0,0,0.4) 1px solid;
        background-color:rgba(180, 180, 180, 0.4);
    }
    .downloadButton:hover > span{
        background-color: rgba(180, 180, 180, 0.8)
    }
    .downloadButton:hover a{
        color:#000;
    }
    .downloadButton i{
        width:50%;
        font-size:5em;
        color:#80B564;
        margin-left:25%;
        margin-right:25%;
    }
    .downloadButton a{
        text-decoration: none;
    }
    .downloadButton span{
        margin-top:10px;
        width:100%;
        min-height:5em;
        display:inline-block;
        background:rgba(180, 180, 180, 0.6);
        vertical-align: middle;
    }
    .marginlefttextfield{
        margin-left:0 !important;
    }
    
}