@font-face{
	font-family: 'Lato', serif;
}


html, body {
	min-width: 800px;
	margin: 0 auto;
	background-color:#404952;
}

#contentHolder{
	margin-top:10px;
	max-width: 100%;
	min-width: 600px;
	height:100%;
/*border:solid thin #000;*/
}

#widgTitle{
	font-family:Lato, serif;
	font-size:28px;
	color:#fff;
	margin-left:10px;
	float:left;
}

#topHolder{
	width:100%;
	height:40px;
	/*border:solid thin #2E87C8;*/
	position:relative;
}

#topLeftHolder{
	width:1079px;
	height:40px;
	/*border:solid thin #2E87C8;*/
	float:left;
}

#topRightHolder{
	width:380px;
	height:40px;
	background-image:url('media/uiGraphics/tabGraphic.png');
	background-repeat: no-repeat;
	right:0px;
	position:absolute;
}

#layerMultiGrphButtGrp{
	float:right;
	margin-right:18px;
	margin-top:12px;
}

#layersButt,
#multiGrphButt{
	width:148px; 
}

#middleHolder{
	height:800px;
	/*border:solid thin #2EC26F;*/
	position:relative;
}

#middleLeftHolder{
	width:100%;
	background-color:#fff;
	height:800px;
	/*border:solid thin #2E87C8;*/
	float:left;
	position:relative;
}

/*
#mapDiv{
	width:1300px;
	height:780px;
}
*/

.basemapTogButtHold{
	width:69px; 
	height:83px; 
	position:absolute; 
	left:30px; 
	bottom:30px; 
	background-color: rgba(255, 255, 255, 0.5);
	z-index:2000;
	border-radius: 6px;
	cursor: pointer;
	
}

.basemapTogButt{
	width:60px;
	height:74px;
	background-image:url('media/uiGraphics/baseMap_IMGY.png');
	margin:5px;
}


.zoomButtHold{
	width:30px; 
	height:53px; 
	position:absolute; 
	left:30px; 
	top:30px; 
	background-color: rgba(255, 255, 255, 0.5);
	z-index:2000;
	border-radius: 4px;
}

.zoomInButt{
	width:24px;
	height:22px;
	background-image:url('media/uiGraphics/zoomInButt_Norm.png');
	margin-top:3px;
	margin-left:3px;
	margin-right:3px;
	margin-bottom:3px;
}

.zoomInButt:hover{
	background-image:url('media/uiGraphics/zoomInButt_Hov.png');
}

.zoomOutButt{
	width:24px;
	height:22px;
	background-image:url('media/uiGraphics/zoomOutButt_Norm.png');
	margin-top:2px;
	margin-left:3px;
	margin-right:3px;
	margin-bottom:3px;
}

.zoomOutButt:hover{
	background-image:url('media/uiGraphics/zoomOutButt_Hov.png');
}

/* Resytle the existing zoom buttons to match the images provided */
div.olControlZoom .olButton {
    background-color: #45879f !important;
    width: 24px;
}

div.olControlZoom .olButton:hover {
    background-color: #0079a4 !important;
    opacity: 0.5;
}

.permLinkButtHold{
	width:30px; 
	height:30px; 
	position:absolute; 
	left:38px; 
	top:75px; 
	background-color: rgba(255, 255, 255, 0.5);
	z-index:2000;
	border-radius: 4px;
	cursor: pointer;
}

.permLinkButt{
	width:24px;
	height:24px;
	background-image:url('media/uiGraphics/permaLinkButt_Norm.png');
	margin:3px;
}

.permLinkButt:hover{
	background-image:url('media/uiGraphics/permaLinkButt_Hov.png');
}




#middleRightHolder{
	width:430px;
	height:800px;
	background-color:#DADBDC;
	right:0px;
	position:absolute;
	z-index:1000;
}

#mapHolder{
	height:780px;
	margin:10px;
	background-color:#ccc;
	position:relative;
}

#layersHolder{
	width:410px;
	height:780px;
	margin-left:0px;
	margin-top:10px;
	margin-right:10px;
	margin-bottom:0px;
	background-color:#aaaaaa;
	float:left;
}

#slug{
	width:10px;
	height:800px;
	background-color:#fff;
	
	float:left;
	
}

#layerButtHolder{
	width:410px;
	height:171px;
	/*border:solid thin #fff;*/
	padding-top:1px;
/*background-color:#AAABAB;*/
}

#layerButtCol_Left,
#layerButtCol_Right{
	width:202px;
	height:170px;
	float:left;
	/*border:solid thin #D83A7C;*/
	margin-left:1px;
}

.layerMenu{
	width:200px;
	height:40px;
	/*border:solid thin #ddd;*/
	margin:2px;
	font-family:Lato, serif;
	font-size:10px;
	font-weight:bold;
	color:#fff;
	background-color:#888888;
}

.layerMenu:hover{
	background-color:#0079A4;
	/*opacity: 0.4;*/
	filter: alpha(opacity=40); /* For IE8 and earlier */
/*color:#ccc;*/
}

.layerInfoButtHold{
    cursor: pointer;
	height:21px;
	width:21px;
	margin-left:40px;
	margin-top:6px;
	float:left;
}

.layerInfoButtHoldUnselected {
    background-image:url('media/uiGraphics/infoButtOff.png');
}

.layerInfoButtHoldSelected {
    background-image:url('media/uiGraphics/infoButtOn.png');
}


.layerLabelHold{
	height:36px;
	margin-left:8px;
	margin-top:4px;
	float:left;
}

/* Removed - overridden in new scrollbar fixes below
.holderForOneLayerGroup {
	width:410px;
	height:194px;
	background-color:#aaaaaa;
	
	margin-bottom:0px;
}
*/

.headerHolder{
	width:410px;
	height:33px;
	background-color:#565656;
/*background-image: url('css/images/ui-bg_glass_20_555555_1x400.png') repeat-x scroll 50% 50% #555;*/
}

/* Removed - overridden in new scrollbar fixes below
.layerGroupLayersHolder {
	margin-top:0px;
	overflow-x:hidden;
}
*/

.layerSetStaDatHolder{
	width:410px;
	height:154px;
	background-color:#0079A4;
}

.layer{
	width:100%;
	height:48px;
	//border:solid thin #ccc;
	margin-top:2px;
	
	background-color:#888888;
}

.layerTopContentHold{
	width:100%;
	height:35px;
	
}

.layCheckHoldStyle{
	width:300px;
	height:19px;
	margin-left:20px;
	margin-top:10px;
	float:left;
}

.layTitleHoldStyle{
	font-family:Lato, serif;
	font-size:14px;
	font-weight:bold;
	line-height:12px;
	color:#fff;
	float:left;
	margin-left:8px;
}

.layOpacLabHoldStyle{
	
	height:15px;
	float:left;
	background-color:#dbdbdb;

}

.layOpacLabStyle{
	float:left; 
	margin-left:15px;
	font-family:Lato, serif;
	font-size:10px;
	font-weight:bold;
	line-height:13px;
	color:#fff;
}

.layOpacSlidHold{
	width:100%; 
	height:12px; 
	background-color:#999999
}

.layerOpacSlider{
	float:left; 
	margin-top:-2px;
	}

	

.lyrInfoTitleHold{
	width:100%;
	height:30px;
	background-color:#565656;
	padding:5px;

}

/*.lyrInfo-title{
	 font-family:Lato, serif;
	font-size:16px;
	font-weight:bold;
	color:#fff;
	margin-left:25px;
	line-height:25px;
}*/

.layerInfoInfoHolder{
	margin-top:0;
	height:286px;
	width:409px;
	overflow-y:auto;
    overflow-x:hidden;
}


.lyrInfo-name{
	 font-family:Lato, serif;
	font-size:14px;
	font-weight:bold;
	color:#fff;
	margin-left:25px;
	margin-top:7px;
	
}

.srcLab{
	font-family:Lato, serif;
	font-size:11px;
	font-weight:bold;
	color:#fff;
	margin-left:25px;
	line-height:11px;
float:left;
}
      
.lyrInfo-src{

	font-family:Lato, serif;
	font-size:11px;
	font-weight:bold;
	color:#fff;
	margin-left:5px;
	line-height:11px;
}

.legDescHold{
	margin-top:15px;

}
.lyrInfo-desc{
	font-family:Lato, serif;
	font-size:12px;
	font-weight:bold;
	color:#fff;
	margin-left:25px;
	margin-top:10px;
	margin-bottom:14px;
	line-height:12px;
	float:left;
	width:360px;
}

.lyrInfo-legend{
	margin-left:12px;
	margin-bottom:12px;
}
	
.headerText{
	font-family:Lato, serif;
	font-size:16px;
	font-weight:bold;
	color:#fff;
	margin-left:25px;
	line-height:30px;
}

.statDatLayer{
	width:406px;
	height:30px;
	border:solid thin #ddd;
	margin-top:2px;
	
}

.statDatLayCheckHoldStyle{
	width:300px;
	height:19px;
	margin-left:20px;
	margin-top:7px;
	float:left;
}

.statDatLayerTopContentHold{
	width:100%;
	height:20px;
}

.statDatLayTitleHoldStyle{
	font-family:Lato, serif;
	font-size:14px;
	font-weight:bold;
	line-height:12px;
	color:#fff;
	float:left;
	margin-left:8px;
}

#multiGrphHeaderHolder{
	width:624px;
	height:40px;
	background-color:#565656;
}

#multiGrphHolder{
	height:780px;
	margin:10px;
	background-color:#AAAAAA;
}

#multiGrphPanel{
	margin-top:0;
	width:100%;
	height:700px;
	border:solid thin #888888;
	//overflow-y:auto;
    //overflow-x:hidden;
}

 #acis-link {
	 color: white;
	 font-weight: 700;
	 float: left;
	 padding-top: 7px;
	 padding-left: 10px;
 }

#multiGrphButtHold{
	float:right;
	margin-right:20px;
	margin-top:0px;
}

#precipButt,
#tempButt{
	padding:3px;
	font-size:11px;
	font-weight:bold;
	border:solid thin #888888;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	margin-right:0px;
	
}

#mgButtBar{
	width:626px;
	height:32px;
	background-color:#888888;
}

.stationPaneHeader{
	width:100%;
	height:36px;
	background: url('ui/jqwidgets/styles/images/darkness/ui-bg_glass_20_555555_1x400.png') repeat-x scroll 50% 50% #666;
	margin-left:0px;
}

.stationPaneContentHold{
	height:10px;
	padding:5px;
}

.mgPaneTopContentHold{
	height:15px;
	padding-left:16px;
	font-family:Lato, serif;
	font-size:14px;
	font-weight:bold;
	line-height:25px;
	color:#fff;
}



.mgPaneStyle{
	width:100%;
	height:208px;
	margin-left:0px;
	margin-top:2px;
	margin-bottom:1px;
	background-color:#888888;
}


.mgNumStyle{
	font-family:Lato, serif;
	font-size:16px;
	font-weight:bold;
	line-height:20px;
	color:#fff;
	float:left;
	margin-left:5px;
}

.mgTitleStyle{
	font-family:Lato, serif;
	font-size:16px;
	font-weight:bold;
	line-height:20px;
	color:#fff;
	float:left;
	margin-left:5px;
}

.mgCloseButtStyle{
	padding:2px;
	float:right;
	margin-right:4px;
	margin-top:0px;
}

.XButon{
	font-family:Lato, serif;
	font-size:10px;
	font-weight:bold;
	line-height:4px;
	color:#fff;
	border-radius:4px;
}

.mgPaneBotContentHold{
	width:580px;
	height:172px;
	/*border:solid thin #ddd;*/
	margin-top:10px;
	margin-left:10px;
}


#menuPanel{
	margin-top:0px;
	width:410px;
	height:100%;
	position:absolute;
	
}

.topHeader{
	width:100%;
	height:45px;
	background-color:#DADBDC;
	position:relative;
	z-index:20;
}

.topHeaderLabel{
	font-family:Lato, serif;
	font-size:24px;
	font-weight:bold;
	line-height:12px;
	color:#565656;
	float:left;
	margin-left:15px;
	margin-top:15px;
}






.menuBar{
	width:409px;
	height:45px;
	background: url('ui/jqwidgets/styles/images/darkness/ui-bg_glass_20_555555_1x400.png') repeat-x scroll 50% 50% #555;
	position:relative;
	border-bottom: solid thin #ccc;
	z-index:20;
}

.topBarContHold{
	width:408px;
	height:43px;
}

.topBarContLeft{
	width:355px;;
	height:30px;
	margin-top:10px;
	margin-left:10px;
	float:left;
}

.topBarContRight{
	width:40px;
	height:45px;
	float:right;
}

#openCloseiconHold{
	margin-top:15px;
	margin-left:16px;
	
}

#topicsLabel{
	font-family:Lato, serif;
	font-size:18px;
	font-weight:bold;
	color:#fff;
}

.topOpenButtStyle{
	width:40px;
	height:45px;
	cursor:pointer;
}

/*.topOpenButtStyle:hover{
  background-color:#eee;
  }*/

.CE_MenuContHold{ 
	border:1px solid #888;
	width:407px;
	height:27px;
	background-color:#888888;
	padding-left:0px;
	padding-top:0px;
	display:block;
	border-bottom:thin solid #666;
	cursor:pointer;
}

.CE_MenuTitleHoldStyle{
	width:220px;
	padding-left:25px;
	font-family:Lato, serif;
	font-size:14px;
	font-weight:bold;
	line-height:24px;
	color:#fff;
}  
#menuContainer{
	width:408px;
	height:780px;
	position:absolute;
	top:0;
	overflow:hidden;
}

#menuItemHolder{
	width:408px;
	height:232px;
	position:relative;	
	top:-140px;
}

#holderForAllLayerGroups {
	width:408px;
	position:relative;	
	top:-140px;
	
}
.layerInfoHold{
background-color:#888888;
width:408px;
height:319px;
}


/* New styles for CSS scrollbars fix in Mavericks */
.holderForOneLayerGroup {
    width:100%;
    height:184px;
    background-color:#aaa;
    /*overflow-y:auto;*/
    /*overflow-x:hidden;*/
    margin-bottom:0px;
}

.layerGroupLayersHolder {
    margin-top:0px;
    width:100%;
    height:150px;
    overflow-y:auto;
    overflow-x:hidden;
}

.layersHolderClass {
    overflow-y: auto;
   // border: 1px solid black;
    line-height: 1em;
}

.layersHolderClass::-webkit-scrollbar {
    -webkit-appearance: none;
}

.layersHolderClass::-webkit-scrollbar:vertical {
    width: 11px;
}

.layersHolderClass::-webkit-scrollbar:horizontal {
    height: 11px;
}

.layersHolderClass::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 1px solid #aaa; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}