@charset "utf-8";
/* CSS Document */
html, body{
    margin: 0;
    padding: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section{
    display: block;}
/*Div elements*/
.screen_reader{
    display: none;}
.top_banner{
    z-index: 2;
    color: #fff;
    text-shadow: #000 0.075em 0.075em;}
.top_banner_box{
    min-height: 7em;
    position: relative;
    background: url(/images/slideshow/Jigsaw-Logo2.jpg) no-repeat;}
.top_banner_box img{
    margin: 0.1em;
    float: left;
    max-height: 6.5em;}
a:link.top_banner, a:visited.top_banner{
    color: #136683;
    font-size: 0.8em;}
.img{
    border: #136683 0.1em solid;}
a img{
    border: none;}
label{
    font-size: 80%;
    color: #333;
    padding-top: 0.2em;
    display: block;
    text-align: center;}
.borderedTable{
    border: #ddeafb 0.1em solid;
    margin: 0;
    overflow: auto;}
.borderedTable th{
    background-color: #136683;
    color: #FFFFFF;
    border: #ddeafb 0.1em solid;
    padding: 0.5em;
    margin: 0;}
.borderedTable td{
    border: #ddeafb 0.1em solid;
    vertical-align: top;
    padding: 0.5em;
    margin: 0;}
.borderedTable .even td{
    border: #ddeafb 0.1em solid;
    background-color: #ddeafb;}
.borderedTable .odd td{
    border: #ddeafb 0.1em solid;
    background-color: #eaeaea;}
.top_banner{
    position: absolute;
    right: 0.2em;
    bottom: 0.2em;}
.top_menu{
    color: #FFFFFF;}
.languages{
    float: right;}
.blue_title{
    color: #FFFFFF;
    font-weight: bold;}
.welcome{
    box-sizing: border-box;
    margin-bottom: 1em;
    border-radius: 0.2em;
    overflow: auto;
    background-color: #eee;
    margin-top: 1em;
    border-radius: 0.4em;}
.welcome h2{
    background: #fbf9f9;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#33000000', GradientType=0 );}
.welcome > h2, .welcome > p{
    padding: 0.5em;}
div > img, .imgBox img, .imgBoxRight50 img, .left img, .right img, .imgBox10 img, .imgBoxLeft50 img{
    padding-top: 0;
    margin-top: 0;
    max-width: 96%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;}
.left img, .right img{
    display: block;}
#content .left img, #content .right img{
    border-radius: 0.4em;
    box-shadow: 0.2em 0.2em #aaa;
    border: solid 1px #aaa;
    padding: 0.2em;
    margin-bottom: 0.4em;}
.imgBox10{
    width: 10%;
    margin: 0.4em;
    float: left;}
.fullwidth_coloured{
    background-color: #eeeeee;
    padding: 0.8em 0 0.8em 0.8em;
    margin-left: 0.5em;}
footer{
    border-top: solid 4px #2e668f;
    clear: both;}
#menu li{
    clear: both;
    padding-bottom: 0;
    list-style: none;
    list-style-type: none;}
#menu li a, #menu dt a{
    display: inline-block;}
.horizontal_links div:not(#menu), .horizontal_links dl{
    background: #136683;
    background: -moz-linear-gradient(top, #136683 0%, #132e83 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #136683), color-stop(100%, #132e83));
    background: -webkit-linear-gradient(top, #136683 0%, #132e83 100%);
    background: -o-linear-gradient(top, #136683 0%, #132e83 100%);
    background: -ms-linear-gradient(top, #136683 0%, #132e83 100%);
    background: linear-gradient(to bottom, #136683 0%, #132e83 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#136683', endColorstr='#132e83', GradientType=0 );}
.horizontal_links dl, footer .horizontal_links div{
    display: inline-block;
    margin: 0;
    margin-left: 0.25%;
    margin-right: 0.25%;
    vertical-align: top;}
.horizontal_links dt, footer .horizontal_links div{
    padding: 0.5em;
    margin: 0;}
.horizontal_links #menu dt a, .horizontal_links div a{
    color: #fff;
    padding: 0.2em;}
.horizontal_links{
    clear: both;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5em;}
.embed-container{
    position: relative;
    padding-bottom: 59%; /* 16/9 ratio */
    padding-top: 2em; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
    margin-bottom: 0.5em;
    z-index: 0;}
.embed-container iframe, .embed-container object, .embed-container embed, .embed-container script{
    position: absolute;
    top: 0.1em;
    width: 100%;
    height: 100%;}
p.disclaimer{
    font-size: 75%;
    color: #444;
    clear: both;}
p.disclaimer a{
    color: #333;}
.longURL{
    word-wrap: break-word;
    display: block;
    width: 100%;}
.quote{
    font-size: 140%;
    text-align: center;
    padding: 0.8em;
    margin-left: 4.5em;
    font-family: serif;
    font-style: italic;}
.floatLeft{
    text-align: center;
    clear: both;}
.floatLeftP{
    padding: 0.2em;
    font-weight: bold;}
.floatLeft .clear{
    font-size: 120%;
    font-style: italic;
    font-weight: bold;
    color: #006600;
    padding-bottom: 0.8em;}
pre{
    font-size: 110%;}
.center{
    text-align: center;}
a.strong{
    font-weight: bold;}
img.nob{
    border: 0;}
td.INSPIRE{
    background-color: #325595;
    color: white;}
td.CGI{
    background-color: #97771A;
    color: white;}
.whats_new_text .kids a.menus, .links .kids a.menus{
    color: #000;}
.borders{
    border-bottom: double #CCCCCC;
    clear: both;
    line-height: 0.1em;}
.print{
    display: none;}
a.lightbox span{
    background: url("https://resources.bgs.ac.uk/images/zoom-in.png") no-repeat left top transparent;
    height: 1.7em;
    width: 1.7em;
    z-index: 10;
    position: absolute;
    right: 0.5em;
    top: 0.5em;}
body{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.95em;
    margin: 0.2em;
    padding: 0.8em;}
.larger{
    font-size: 130%;}
h1, h2, h3{
    color: #132e83;
    font-weight: normal;}
h1{
    font-size: 2.2em;
    padding: 0;
    margin: 0;}
h2{
    font-size: 1.8em;
    padding-top: 0.5em;
    margin-top: 0;
    margin-bottom: 0.2em;
    padding-bottom: 0;}
h3{
    font-size: 1.5em;
    padding-top: 0.5em;
    margin-top: 0;
    margin-bottom: 0.2em;}
h4{
    font-size: 108%;
    padding-top: 0.2em;
    margin-top: 0;
    margin-bottom: 0.2em;}
h5{
    font-size: 100%;
    padding-top: 0.2em;
    margin: 0;}
hr{
    padding-left: 0.2em;
    padding-right: 0.2em;
    color: #666666;}
.left ul, .right ul{
    margin-top: 0;
    padding-top: 0;}
p{
    padding-top: 0.2em;
    padding-bottom: 0.2em;}
#content ul{
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    margin-top: 0.1em;
    margin-bottom: 0.1em;}
ul li{
    list-style-type: square;
    padding-bottom: 0.2em;}
ol li ul li{
    list-style-type: square;
    padding-bottom: 0.2em;}
a:link, a:visited{
    color: #135383;
    text-decoration: none;}
p a:link, li a:link{   
    font-weight:bolder;}
a:hover{
    text-decoration: underline;}
sub{
    line-height: 0;}
sup{
    line-height: 0;}
.clear{
    clear: both;}
.columnRight img{
    margin-left: 0.2em;
    width: 100%;}
#menu a:link, #menu a:visited{
    color: #135383;}
.home, .what_is, .participants, .organisation, .getting_involved, .portal, .technical_overview, .technical_progress, .extra{
    margin-top: 0.2em;
    padding-left: 1%;
    padding-right: 1%;
    min-height: 2em;
    padding-top: 0.5em;
    clear: both;
    margin-bottom: 0.8em;
    font-size: 0.8em;}
.indent{
    text-indent: -2em;
    margin-left: 2em;
    margin-top: 0;
    margin-bottom: 0.2em;}
/* ACCORDION */
.Accordion{
    overflow: auto;}
.AccordionMenuPanel{
    padding-bottom: 0.8em;
    clear: both;}
.AccordionMenuPanelTab{
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    background: url(/images/accordianMenuClosed.jpg);
    background-repeat: no-repeat;
    background-position: top left;}
.AccordionPanelTab{
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    background-image: url(/images/accordianClosed.gif);
    background-repeat: no-repeat;
    background-position: center left;
    background-color: #ddeafb;
    margin: 0;
    padding: 0;
    padding-right: 2.5em;
    border-bottom: solid 1px #CCCCCC;}
.AccordionPanelTab h3, .AccordionPanelTab p{
    padding: 0.5em;
    padding-left: 2.5em;
    margin: 0em;
    display: block;}
.AccordionPanelContent{
    overflow: auto;
    margin: 0;
    padding-bottom: 0.8em;
    padding-left: 2%;
    clear: both;
    border: solid 1px #CCC;}
.AccordionFocused{
}
.AccordionPanelOpen .AccordionPanelTab{
    background: url(/images/accordianOpen.gif);
    background-repeat: no-repeat;
    background-position: center left;
    background-color: #ddeafb;}
.AccordionMenuPanelOpen .AccordionMenuPanelTab{
    background: url(/images/accordianMenuOpen.jpg);
    background-repeat: no-repeat;
    background-position: top left;}
.AccordionLink{
    text-decoration: none;}
.AccordionLink:Hover{
    text-decoration: underline;}
.animationContainer{
}
.hideInitially{
    visibility: hidden;}
/* Tooltip */
.iframeTooltip{
    position: absolute;
    z-index: 1010;
    opacity: 0.1;
    filter: alpha(opacity=10)}
.toolTip{
    color: #2b2480;}
.tipBox{
    background-color: #136683;
    color: #FFFFFF;
    padding: 0.2em;
    width: 15em;}
.yellowKey{
    background-color: #ffff00;
    color: #ffff00;}
.greenKey{
    background-color: #006600;
    color: #006600;}
.orangeKey{
    background-color: #cc6600;
    color: #cc6600;}
.number{
    font-size: large;
    color: #FF0000;
    border: solid 0.1em #666666;
    padding: 0.1em;}
@keyframes fadein{
 from{ opacity: 0;}
 to{ opacity: 1;}}
/* Firefox < 16 */
@-moz-keyframes fadein{
 from{
opacity: 0;}
to{
    opacity: 1;}
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein{
 from{opacity: 0;}
 to{opacity: 1;}
}
/* Opera < 12.1 */
@-o-keyframes fadein{
 from{opacity: 0;}
 to{opacity: 1;}
}
 @media screen and (min-width:50em){
img#oneGeologylogo{
    max-width: 20%;
    margin: 1%;}
#menu dl dd{
    left: -999em;
    position: absolute;
    z-index: 100;
    width: 90%;
    max-width: 1300px;
    border: solid 2px #136683;
    color: #fff;
    text-align: center;
    background-color: #fff;
    margin: 0;}
#menu dl dd ul li{
    display: inline-block;
    padding-right: 0.5em;
    border-right: solid 1px #ddd;
    margin: 0;}
#menu dl dd ul li:last-child{
    border: none;}
#menu dl:hover dd{
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s; /* Firefox < 16 */
    -ms-animation: fadein 1s; /* Internet Explorer */
    -o-animation: fadein 1s; /* Opera < 12.1 */
    animation: fadein 1s;
    left: 5%;}
#outer_container{
    width: 98%;
    max-width: 1500px;}
.top_banner{
    font-size: 1.6em;
    max-width: 50%;}
#mobileMenu{
    display: none;}
.home, .what_is, .participants, .organisation, .getting_involved, .portal, .technical_progress, .extra{
    width: 98%;}
#content{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    min-height: 40em;
    background-position: center top;}
.siteMap #menu{
    width: 100%;}
.imgBox{
    float: right;
    width: 40%;}
.imgBoxRight50, .rightCol50, .imgBoxRight25, .imgBoxLeft25, .imgBoxLeft50, .leftCol50{
    box-sizing: border-box;
    margin-top: 0.5em;
    margin-bottom: 0.5em;}
.imgBoxLeft25, .imgBoxLeft50, .leftCol50{
    float: left;
    margin-right: 0.5%;}
.imgBoxRight50, .rightCol50, .imgBoxRight25{
    float: right;
    margin-left: 0.5%;}
.imgBoxRight25, .imgBoxLeft25{
    width: 24%;}
.imgBoxLeft25 + .imgBoxLeft50, .leftCol25 + .leftCol50{
    margin-left: 0.5%;
    width: 49%;}
.imgBoxRight50, .imgBoxLeft50, .leftCol50, .rightCol50{
    width: 49%;}
.floatLeft{
    float: left;
    width: 58%;
    margin-left: 15%;}
.floatLeftP{
    float: left;
    width: 23%;}
#map{
    width: 100%;
    height: 35em;}
.legend{
    float: left;
    margin-left: 1em;
    margin-bottom: 1em;
    width: 60%;}
.yellowKey, .greenKey, .orangeKey{
    float: left;
    height: 6em;
    width: 6em;
    margin: 0.5em;}
.imgBoxLeft33{
    width: 32%;
    float: left;}
div.imgBoxLeft33:nth-child(3n-1){
    margin-left: 2%;
    margin-right: 2%;}
div.imgBoxLeft33:nth-child(3n+1){
    clear: left;}
}
@media screen and (max-width:49.99em){
body{
    margin: 0;
    padding: 0.2em;}
header{
    height: 8em;}
#mobileMenu{
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    z-index: 20;
    color: #132e83;
    background-color: #fff;
    border-radius: 0.5em;
    padding: 0.5em;
    border: solid 1px #000;
    box-shadow: 0.1em 0.1em #999;}
#menu{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 30;
    width: 85%;
    background-color: #fff;}
#menu dl{
    width: 100%;
    display: block;}
#menu dd{
    background-color: #fff;}
#menu dd, #menu dd ul, #menu dd ul li{
    margin: 0;
    padding: 0;}
#menu dt span{
    color: #fff;
    float: right;}
.top_banner{
    font-size: 1.2em;}
#content{
    clear: both;}
img#oneGeologylogo{
    max-height: 6em;}
footer .horizontal_links div{
    padding-left: 5%;
    padding-right: 5%;
    margin-left: 1%;
    margin-bottom: 0.2em;}
#map{
    width: 100%;
    height: 30em;}
}
@media screen and (min-width:35em){
.left{
    margin-right: 48%;
    padding-right: 2%;}
.right{
    width: 48%;
    float: right;}
h2 img{
    width: 35%;
    float: right;}
.quote{
    float: left;
    width: 60%;}
.columnLeft{
    float: left;
    width: 48%;}
.columnRight{
    float: left;
    width: 48%;
    margin-left: 1%;}
.leftCol25{
    width: 25%;
    float: left;
    margin-top: 0.5em;}
.rightCol25{
    width: 25%;
    float: right;
    margin-top: 0.5em;}
.column{
    float: left;
    width: 50%;}
}
 @media screen and (max-width:35em){
.welcome{
    margin-left: 0;
    padding: 0.2em;
    clear: both;
    margin-top: 0.4em;}
.left, .right, .columnLeft, .columnRight, .column{
    margin-top: 0.4em;}
h2 img, .sharesb ul li img{
    width: 100%;}
.floatLeftP{
    float: left;
    width: 46%;}
.mobileFloat img{
    max-width: 50%;
    float: left;}
}
@media screen and (min-width:35em) and (max-width:49.99em){
#menu dt{
    float: left;
    width: 48%;}
}