/**
* SHARKS map viewer CSS stylesheet
*
*/
body { font: normal 12px; font-family: Verdana, "Liberation Sans", Arial, Helvetica, sans-serif; height: 100%; margin: 0; padding: 0; text-align: center; width: 100%; }
body { background-color: rgb(55,96,146); }
body.embed { background-color: white; }
a, a:visited { color: #2d8b8c; text-decoration: none; }
a:hover, a:active { color: #756bb1; cursor: pointer; }
ul, li { list-style-type: none; }
.embed #header { display: none; }
#wrapper { margin: 0; text-align: left; position: fixed; top: 0; left: 0; bottom: 0; right: 0; }
.wrapper_e_M { margin: 0px; text-align: left; width: 720px; }
.wrapper_e_L { margin: 0px; text-align: left; width: 920px; }

#top1 { background-color : #fff;font-size: 25px; height: 60px; margin: 0; padding: 0; text-shadow: rgb(204, 204, 204) 2px 2px 2px; vertical-align: bottom; width: 100%; }
#top2 { background-color: rgb(55,96,146); height: 40px; margin: 0; padding: 0; width: 100%; overflow: hidden; }
#top2 span { color: rgba(255,255,255,.7); font-size: 25px; font-weight: bold; line-height: 38px; margin: 0 1em; text-shadow: 2px 2px 2px rgba(0,0,0,.6); }
/* 
#mapWrapper { position: absolute; display: block; top: 100px; left: 0; right: 0; height: 100%; background-color : #fff; box-shadow: 0px 3px 6px #000; }
 */
#header { background-color: rgb(13,108,172); box-shadow: inset 8px -12px 10px rgb(55,96,146); height: 75px; left: 0; overflow: hidden; position: absolute; right: 0; top: 0; width: 100%; }
#header * { background-repeat: no-repeat; border: none; border-collapse: collapse; margin: 0; overflow: hidden; padding: 0; }
#header>div { height: 75px; position: absolute; top: 0; }
#header div.elements, #header div.backgrounds { left: 0; right: 0; }
#header div.elements { min-width: 1600px; }
#header div.backgrounds>div { height: 75px; position: absolute; top: 0; }
#header div.elements>div { display: inline-block; height: 75px; }
#header div>a, #header div>span { display: block; height: 75px; }
#header div>a>span { color: #fff; display: block; height: 75px; }
#header .bgRight { background-image: url(../img/banner/bgright.png); right: 86px; width: 776px; }
#header .bgLeft { background-image: linear-gradient( to right, rgba(52,56,124,0),rgba(52,56,124,1),rgba(52,56,124,0)); left: 8%; right: 60%; }
#header .goFaoHome { margin-left: 10px; }
#header .goFaoHome a { width: 333px; }
#header .goFaoHome span { background-image: url(../img/banner/fao.png); background-position: 0 5px; width: 333px; }
#header .divider { margin: 0 5px; }
#header .divider span { background-image: url(../img/banner/vbar.png); background-position: 0 15px; width: 6px; }
#header .sharksViewer { overflow: hidden; position: relative; width: 800px; }
#header .sharksViewer h1, #header .sharksViewer h2 { color: #fff; display: block; font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; left: 0; margin: 0; padding: 0; position: absolute; text-shadow: 2px 2px 4px rgba(0,0,0,.7); }
#header .sharksViewer h1 { font-size: 22px; font-weight: bold; top: 16px; }
#header .sharksViewer h2 { font-size: 14px; font-weight: normal; top: 44px; }
#header .goSharksHome { right: 0; width: 86px; }
#header .goSharksHome span { background-image: url(../img/banner/home.png); width: 86px; }


#mapWrapper { background-color: #fff; box-shadow: 0px 6px 6px rgba(0,0,0,.7); display: block; height: 100%; left: 0; position: absolute; right: 0; top: 76px; }
#header a img { opacity: .9; }
#header a:hover img { opacity: 1; }
.embed #mapWrapper { top: 0; box-shadow: none; }

#main { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.main_e_M { float: left; height: 500px; width: 720px; }
.main_e_L { float: left; height: 670px; width: 920px; }

#map { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.map_e_M { clear: both; height: 500px; left: 20px; width: 720px; }
.map_e_L { clear: both; height: 670px; left: 20px; width: 920px; }

#sidebar { border: solid 1px #000; border-width: 0 0 0 1px; bottom: 0; font-size: 12px; padding: 0; position: absolute; right: 0; top: 0; width: 210px; }
#sidebar .legend { margin: .5em; }
#sidebar .legendTitle { font-weight: bold; padding: .5em 0; }
#MemberCountries { }
#title { color: #036; display: block; font-size: 30px; font-style: normal; font-weight: bold; left: 0.5em; margin: 0; padding: 0; text-shadow: #CCC 2px 2px 2px; top: 0.5em; }
#footer { position: absolute; left: 0; bottom: 0; right: 0; }

#bottomBar1 {
	position: absolute;
	margin: 0 auto;
	width: 100%;
	opacity: .7;
	bottom: 10px;
	clear: both;
	color: black;
	font-size:  12px;
	font-weight: bold;
	line-height: 1.5em;              
	text-align: center;
	z-index:1000;
}

#bottomBar1_e {
	position: absolute;
	margin: 0 auto;
	width: 100%;
	opacity: .7;
	bottom: 10px;
	clear: both;
	color: black;
	font-size:  12px;
	font-weight: bold;
	line-height: 1.5em;              
	text-align: center;
	z-index:1000;
}

#bottomBar1 a, #bottomBar1 a:visited,
#bottomBar1_e a, #bottomBar1_e a:visited {
	color : #000;
}
#bottomBar1 a:hover, #bottomBar1 a:active,
#bottomBar1_e a:hover, #bottomBar1_e a:active {
	opacity:1;
	color : #f90;
}

#embed { border-top: 1px solid; margin-top: 20px; }
#embed-code textarea { height: 300px; }
.embed-link { color: black; text-decoration: underline; }
/** * OL CSS Stuff to be moved progressively * to js/vendor/ol3/ol3-figismap.css * | * V */
/* 
.olControlLoadingPanel { background-image: url(../img/loading.gif); background-position: center; background-repeat: no-repeat; display: none; }
.olControlMousePosition { bottom: 0px; display: block; left: 9px; position: absolute; }
.olControlAttribution { color: Blue; display: block; font-size: 12px !important; font-style: normal; left: 50px; position: absolute; top: 0.5em; }
.olControlGraticuleActive svg g text * { font-size: 11px; }
.olControlGraticuleActive svg g polyline { opacity: .7; }
.FigisMapLegend { border-top: 1px solid; clear: both; font-size: 12px; padding-top: 20px; text-align: left; width: 100%; }
.FigisMapLegend div { display: inline; margin-right: 1em; text-align: center; }
.FigisMapLegend div img { margin-right: 3px; vertical-align: middle; }
 */
/** * ^ * | */

#legend { margin-bottom: 0px; }
.legend img { vertical-align: middle; }

@media print { .sidePanel { display: none; } }
.sidePanel, .ol-unselectable.ol-control.layer-switcher { border-radius: 0 0 10px 10px; font-size: 12px; z-index: 100; }
.sidePanel, .sidePanel *, .ol-unselectable.ol-control.layer-switcher, .ol-unselectable.ol-control.layer-switcher * { transition: all .5s; }
.ol-unselectable.ol-control.layer-switcher * { -moz-transition: none; }
div.sidePanel:hover, .ol-unselectable.ol-control.layer-switcher.shown { box-shadow: 2px 2px 4px #666; }
.sidePanel blockquote { background-color: rgba(255,255,255,.8); border-radius: 0 0 10px 10px; margin: 0; opacity: 0; overflow-y: hidden; padding: 0 10px;font-size: inherit !important;}
.sidePanel blockquote { height: 0px; }
.sidePanel:hover blockquote, .sidePanel *:hover blockquote, .sidePanel blockquote:hover { opacity: 1; padding: 5px 10px 0 10px; }
#projectionPanel { left: 60px; position: absolute; top: 0; width: 180px; cursor: default;}
#linkPanel { position: absolute; right: 300px; top: 0; width: 220px; cursor: default;}
body.embed #linkPanel { display: none; }
.sidePanel:hover blockquote, .sidePanel *:hover blockquote, .sidePanel blockquote:hover { height: 100%; }
.sidePanel h4 { background-color: rgba(55,96,146,.6); border-radius: 0 0 10px 10px; color: rgba(255,255,255,.6); font-size: 100%; margin: 0; padding: 5px 10px; text-align: center; }
.sidePanel:hover h4 { background-color: rgba(55,96,146,1); border-radius: 0 0 0 0; }
#linkPanel blockquote div { margin: .5em 0; padding: 0; }
#linkPanel input { width: 195px; }
#linkPanel blockquote label { opacity: .7; }
.ol-unselectable.ol-control.layer-switcher { color: rgba(255,255,255,.6); font-size: 12px; margin: 0; padding: 0; position: absolute; right: 30px; text-align: left; top: 0; width: 220px; }
.ol-unselectable.ol-control.layer-switcher button { background: none; background-color: rgba(55,96,146,.6); border-radius: 0 0 10px 10px; float: none; font-size: 12px; font-weight: normal; height: 26px; margin: 0; width: 220px; }
.ol-unselectable.ol-control.layer-switcher.shown button { background-color: rgba(55,96,146,1); border-radius: 0 0 0 0; }
.ol-unselectable.ol-control.layer-switcher button:before { color: rgba(255,255,255,.9); content: 'Legend'; }
.ol-unselectable.ol-control.layer-switcher .panel { background-color: rgba(255,255,255,.8); border-radius: 0 0 10px 10px; color: #000; font-size: 12px; margin: 0; opacity: 0; padding: 0 10px 5px 10px; }
.ol-unselectable.ol-control.layer-switcher.shown .panel { opacity: 1; }
.ol-unselectable.ol-control.layer-switcher.layer-switcher ul { margin: 0; padding: 0; }

#progressIndicator { background-color: rgba(128,128,128,.5); border: solid 1px rgba(64,64,64,.5); border-radius: 4px; box-shadow: 2px 2px 2px rgba(0,0,0,.5); height: 8px; left: 50%; margin-left: -8%; overflow: hidden; position: absolute; bottom: 10%; width: 16%; z-index: 100; }
#progressIndicatorValue { background-color: rgba(204,102,0,.6); height: 14px; width: 0px; }

#bottomBar1 { background: none; bottom: 10px; color: black; font-size: 12px; font-weight: bold; line-height: 1.5em; margin: 0; padding: 0; opacity: .7; position: absolute; text-align: center; width: 100%; z-index: 1000; text-align: center; }
#bottomBar1 a, #bottomBar1 a:visited { color: #000; }
#bottomBar1 a:hover, #bottomBar1 a:active { opacity:1; color: #f90; }

/**
* NEW POPUP STYLE OUT OF GEOEXT
*/

/**
 * Custom OL3 css
 */
.ol-popup {
	background: #FFFFFF;
    	background-color: rgba(255, 255, 255, 0.8) !important;
    	border-radius: 10px;
    	box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.5);
    	border-width: 1px;
    	border-style: solid;
    	border-color: #999999;
    	-moz-border-radius: 10px;
    	-webkit-border-radius: 10px;
    	-khtml-border-radius: 10px;
    	border-radius: 10px;
	padding:12px 6px 12px 6px;
	width: 398px !important;
	min-height: 300px !important;
	max-height: 600px !important;
	z-index:6000;
}
body .ol-popup-content { max-height: 100%; font-size: 80%;}
body .ol-popup-closer { font-size:100%; }

.ol-popup.top:after { border-top-color: rgba(255, 255, 255, 0.8) !important; }
.ol-popup.bottom:after { border-bottom-color: rgba(255, 255, 255, 0.8) !important; }

/**
 * VME content Handler css
 */

.ol-popup-content > .popup-container{
}

.ol-popup-content > .popup-container input {
	height: 1.5em;
	visibility: hidden;
}

.ol-popup-content > .popup-container input.visible {
  visibility: visible !important;
}

.ol-popup-content > .popup-container label { 
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#dcdcdc+0,f6f6f6+50,ededed+100 */
	background: #dcdcdc; /* Old browsers */
	background: -moz-linear-gradient(top,  #dcdcdc 0%, #f6f6f6 50%, #ededed 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #dcdcdc 0%,#f6f6f6 50%,#ededed 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #dcdcdc 0%,#f6f6f6 50%,#ededed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcdcdc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
	border-radius: .25em .25em 0 0;
	border: 1px #999999 solid;
	color: #aaa;
	font: normal 11px tahoma,arial,helvetica;
	font-weight:bold;
	display: block;
	float: left;
	padding: 6px 1.5em 6px 1.5em;
	text-align: center;
}

.ol-popup-content > .popup-container input:hover + .popup-label {
	background: #ddd;
	color: #666; 
}

.ol-popup-content > .popup-container input:checked + .popup-label {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f6f6f6+50,ededed+100 */
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 50%, #ededed 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 50%,#ededed 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 50%,#ededed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
	border-width:1px 1px 1px 1px;
	border-bottom-color: #ededed;
	color: #444;
	position: relative;
	z-index: 6;
}

.ol-popup-content > .popup-container > .popup-content {
	min-height: 240px;
	position: relative;
	width: 100%;
	z-index: 5;
	outline-offset: 2px;
    	outline: 1px solid #999999;
    	border-width: 1px 0px 0px 0px;
    	margin-top: 16px;
}

.ol-popup-content > .popup-container > .popup-content div.tab-content {
	opacity: 0;
	padding: 0;
	position: absolute;
	width:100%;
	height: 100%;
	overflow-x: auto;
}

.ol-popup-content > .popup-container input#tab-0:checked ~ .popup-content #content-0,
.ol-popup-content > .popup-container input#tab-1:checked ~ .popup-content #content-1,
.ol-popup-content > .popup-container input#tab-2:checked ~ .popup-content #content-2 {
    	opacity: 1;
    	z-index: 100;
	overflow-y:auto;
}


/** popup content */
.popup-result{
    	font-family: asap, sans-serif;
    	font-size: 12px;
    	font-weight: normal;
    	line-height: 1.5;
	margin:0;
	padding: 6px 2px;
	text-align: left;
    	border: 1px #ccc solid;
    	border-width: 1px 0px 0px 0px;
}
.popup-result h3{
    	font-family: asap, sans-serif;
    	font-size: 22px;
    	font-weight: 400;
    	padding: 0px;
}
.popup-result em{
	font-weight: bold;
}

.dataTables_length {display:none;}
.dataTables_info {display:none;}
.nav-tabs{ border-bottom: 1px solid #756bb1; }
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { border: 1px solid #756bb1; }
.nav-tabs>li { font-weight:bold; } 


.ext-el-mask {
	width:0;
	height:0;
}

.x-view-over{background-color:rgba(219, 241, 255, 0.56);cursor:default;}
.x-view-selected{background-color:rgba(162, 202, 229, 0.81)}



.ol-loading-panel {
        width: 300px !important;
        height: 116px !important;
}
span.ol-loading-panel.ol-unselectable {
	margin-left: -220px;
	margin-bottom: -70px;
}
.ol-attribution-baselayer.ol-uncollapsible { bottom: 3em; left: .5em; right: auto; top: auto; height: 2em; background-color : rgba(0,0,0,.3); padding: .2em 1em; border-radius: 8px; line-height: 1.8em; border: 2px solid rgba(255,255,255,.5); }
.ol-attribution-baselayer ul { color: rgba(255,255,128,.7); font-size: 2em; font-weight: bold; text-shadow: 2px 2px 2px rgba(0,0,0,.6); }
.ol-attribution-baselayer.ol-uncollapsible ul li .buttons { font-size: 1em !important; }
.ol-attribution-baselayer.ol-uncollapsible .buttons a:link { color: #fff; }

.bIcon { min-width:300px; padding: 1em; }
.bIcon div { border-top: dotted 1px rgba(255,255,255,.5); padding-top: 1em; margin: 0; }
.bIcon table { width: 100%; max-width: 260px; margin: 0 auto; }
.bIcon table td { padding: 0 1em; vertical-align: top; height: 38px; }
#tdIconMap { text-align: left; }
#tdIconRels { text-align: center; }
#tdIconFS { text-align: right; }
.bIcon td.disabled img { opacity: .15; }
.bIcon a img { opacity: .75; }
.bIcon a:hover img { opacity: 1; }