/**
* FIRMS 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: #f90; 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; }
#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 .firmsLogo a { width: 299px; }
#header .firmsLogo span { background-image: url(../img/banner/firms.png); background-position: 0 6px; width: 299px; }
#header .firmsViewer { overflow: hidden; position: relative; width: 800px; }
#header .firmsViewer h1, #header .firmsViewer 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 .firmsViewer h1 { font-size: 22px; font-weight: bold; top: 16px; }
#header .firmsViewer h2 { font-size: 14px; font-weight: normal; top: 44px; }
#header .goFirmsHome { right: 0; width: 86px; }
#header .goFirmsHome 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; }
#map { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
#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 { background-color: rgb(51, 102, 153); color: white; font-size: 12px; line-height: 1.5em; margin: 0; text-align: right; padding: 0 1em; }
#bottomBar1 a, #bottomBar1 a:visited { color: #fff; }
#bottomBar1 a:hover, #bottomBar1 a:active { 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; }
.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: 160px; 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; }

@media print { #resourceSwitcher { display: none; } }
#resourceSwitcher { top: 145px; left: .5em; position: absolute; width: 200px; z-index: 100; font-size: 12px; }
#resourceSwitcher * { transition: all .5s; }
#resourceSwitcher div { border-radius: 10px; font-size: 100%; margin: 0 0 .5em 0; padding: 5px 10px; text-align: left;  opacity: .4; }
.category-filters{ display:none; padding-left:5px;color:white;}
#resourceSwitcherPanelResource { background-color: rgba(0,51,153,.8); color: rgba(255,255,0,.8); }
#resourceSwitcherPanelFishery { background-color: rgba(102,0,102,.8); color: rgba(255,255,0,.8); }
#resourceSwitcher div.active { opacity: .9; }
/* 
#resourceSwitcher div.active .category-filters { display:block; }
 */
#resourceSwitcher div.inactive:hover { opacity: .7; }
#resourceSwitcher div.inactive:hover * { cursor: pointer; }
#resourceSwitcher div ul { display: none; }
#resourceSwitcher div.active:hover ul { display: block; }
#resourceSwitcher div li { opacity: 0; }
#resourceSwitcher div.active:hover li { opacity: 1; }
#resourceSwitcher img.iconsearch { float: right; margin: 0; padding: 0; border: none; margin-top: -4px; margin-right: -6px; opacity : .7; }
#resourceSwitcher div.active img.iconsearch { cursor: pointer; }
#resourceSwitcher div.active img.iconsearch:hover { opacity: 1; margin-top: -8px;  }


/* fts, Full Text Search */
@media print { #ftsContainer { display: none; } }
#ftsContainer { position: absolute; transition: all .5s; z-index: 100; border-radius: 10px; border: 0; }
#ftsContainer img.iconSearch { position: absolute; transition: all .5s; }
#ftsContainer #ftsText { margin: 10px 20px; font-size: 18px; background-color: rgba(255,255,255,.5); transition: width .5s;}
#ftsContainer.open #ftsBox { transition: all .5s; }
#ftsContainer.open { background-color: rgba(128,128,80,.8); height: 130px; left: 240px; top: 30px; width: 550px; }
#ftsContainer.open img.iconSearch { height: 120px; right: 5px; top: 5px; width: 120px; }
#ftsContainer.open #ftsBox { opacity: 1; }
#ftsContainer.open #ftsCloser { color: #fff; cursor: pointer; position: absolute; right: 5px; text-shadow: 2px 2px 2px rgba(0,0,0,.8); top: 0; z-index: 102; }
#ftsContainer.open #ftsTitle { font-weight: bold; color: #fff; text-shadow: 2px 2px 2px rgba(0,0,0,.8); font-size: 18px; padding: 5px 20px; }
#ftsContainer.open #ftsText { width: 400px; }
#ftsContainer.closed { background-color: rgba(255,153,0,.8); cursor: pointer; opacity: .6; height: 80px; left: 100px; top: 40px; width: 80px; }
#ftsContainer.closed:hover { opacity: 1; }
#ftsContainer.closed img.iconSearch { height: 60px; left: 10px; top: 10px; width: 60px; }
#ftsContainer.closed #ftsBox { opacity: 0; }
#ftsContainer.closed #ftsBox * { display: none; }
#ftsContainer.closed #ftsText { width: 20px; }
#ftsResult { color: rgba(0,0,0,.8); font-size: 10px; margin: -10px 0 0 20px; width: 400px; padding: .5em 0; }
#ftsContainer.closed #ftsResult { display: none; }
#ftsResult.haveResults { background-color: rgba(255,255,255,.8); border-radius: 0 0 10px 10px; max-height: 320px; overflow-y: auto; }
#ftsResult.noResults { }
#ftsResult p { padding: 0; margin: .5em; }
#ftsResult p.ftsComment { text-align: center; color : rgba(0,0,0,.7); font-style: italic; margin-top: .2em; }

#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; }


/* FIRMS viewer popup */
.ol-popup { padding: 0 !important; border: none !important; background-color:transparent !important; }
/* 
.ol-popup-content { width: auto !important; height: auto !important; min-width: none !important;max-height: 400px !important; }
 */
.ol-popup-content { width: auto !important; height: auto !important; min-width: 220px !important; max-height: 430px !important; }
.ol-popup-closer { font-size:100% !important; }
.FVPopopBody { max-height: 300px; overflow-y: auto; }

/* only here to hide style set in moniker, .ol-popup:after rule to be removed from moniker css */
.ol-popup:after { border-top-width: 0px !important;} 
.ol-popup.top:after { border-top-width: 10px !important;}
/* popup css to be set in moniker. The rule .ol-popup.top:after should be different according to resource/fishery type. Here below is the one for resource */
/*
.ol-popup.top:after { border-top-color: #039 !important; }
.ol-popup.bottom:after { border-bottom-color: #ff9034 !important; }
*/
.ol-loading-panel {
        /*background-image : url(../img/swiming_fish.gif) !important;*/
        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; }

#relsArea {
	top: 260px; left: 0; position: absolute; width: 250px; z-index: 100; font-size: 12px; bottom: 90px;
	background-color : rgba(240,240,180,.7); padding: 0; margin: 0; border-radius: 0 16px 16px 0;
	transition: all .5s linear; box-shadow: 2px 2px 4px #666;
}
#relsArea.disabled { left: -250px; opacity: 0; bottom: 400px; }
#relsAreaCloser { cursor: pointer; float: right; font-size: 16px; opacity: .4; margin: 4px 8px 0 0; }
#relsAreaCloser:hover { opacity: 1; }
#relsAreaTitle { font-weight: bold; font-style: italic; color: rgba(0,0,0,.5); padding: .6em 1em; }
/*#relsAreaContent { padding: 0; margin: 1em; overflow: auto; }*/
#relsAreaContent { position: absolute; top: 2em; left: 1em; right: .5em; bottom: .5em; overflow: auto; }
#relsAreaContent a { display: block; padding: 0; margin: .5em 0; color: #330; }
#relsAreaContent a:hover { color: #339; }