@import url(/ocartoBase.css);

body {
	background: url(images/topGradient.png);
	background-repeat: repeat-x;
	margin: 0 auto;
	color: #666;
}

a, a:visited {
	color: #5C8AB5;
}

b {
	color: #666E4A;
}

textarea.fit {
	width: 100%;
	border: solid 1px #999;
	height: 150px;
}

#container{
	position: relative;
	margin: 0 auto;
	width: 1060px;	
}

#logo {
	position: absolute;
	top: 10px;
	left: 10px;
}

#mainTabs {
	position: absolute;
	top: 80px;
	border-bottom: 1px solid #bbb;
	width: 100%;	
}

#tagLine h1{
	position: absolute;
	top: 18px;
	left: 150px;
	color: #fff;
	font-size: 1.2em;
		
}

#mainTabs ul {
	list-style:none; 
	padding:0; 
	margin: 0px 0px 0px 10px; 
}

#mainTabs li {
	position: relative;
	top: 1px;
	float:left; 
	margin: 0px 5px 0px 0px; 
	padding:0px;
	border-bottom: 1px solid #bcbcbc;	
}

#mainTabs li.active {
	border-bottom: 1px solid #fff;	
}

#mainTabs h3 {
	border-top: 1px solid #bcbcbc;	
	padding: 1px 8px 3px 8px;
	background-color: #fff;
	font-size: 1.3em;
}

#mainTabs a, #mainTabs a:hover, #mainTabs a:active, #mainTabs a:focus {
	color: #999; 
	background: url(/images/tabOutlineL.gif) left top no-repeat; 
	font-weight:bold; 
	padding-left: 6px; 
	text-decoration:none
}

#mainTabs li.active a, #mainTabs li.active a span {
	color: #5C8AB5; 
}

#mainTabs  a, #mainTabs a span {
	display:block; 
	float: left;
}

#mainTabs a span {
	background: url(/images/tabOutlineR.gif) right top no-repeat; 
	padding-right:6px
}

/* main app area */

#main {
	position: absolute;
 	left: 10px;
	top: 110px;	 
}

#footer {
	position: absolute;
	width: 1040px;
	top: 610px;	 
	text-align: center;
	border: solid 1px #d9d9d9;
	background-color: #efefef;
}

#footer .pad {
	padding: 2px;	
}
 /************* maps **********/
 #mapContainer {
	position: absolute;
	top:0px;
	left:240px;
    height: 600px;
    width: 800px;
	border: solid 1px #d9d9d9;
 }
 
/*.map {
	position: absolute;
	top:0px;
	left:0px;
    height: 100%;
    width: 100%;
	border: none 0px #fff;
	background: none;
}
 
.map * {
	background: none;
}*/

 #mapSizer {
	position: absolute;
	top:0px;
	left:240px;
    height: 600px;
    width: 800px;
	border: solid 1px #d9d9d9;
	/*z-index: 1100;*/	
 }

 .mapSizserScreen {
	z-index: 1100; 
 }
 
#mapScreenTL, #mapScreenBL, #mapScreenTR, #mapScreenBR, #mapScreenTC, #mapScreenBC, #mapScreenCL, #mapScreenCR {
	position: absolute;
	background-color: #fff;
}

#mapScreenTL, #mapScreenBL, #mapScreenTR, #mapScreenBR {
	width: 25%;
	height: 25%;
}

#mapScreenCL, #mapScreenCR {
	width: 25%;
	height: 50%;
}

#mapScreenTC, #mapScreenBC {
	width: 50%;
	height: 25%;
}

#mapScreenCC {
	background: none;
	width: 50%;
	height: 50%;
	border: solid 1px #666;
}

/* border for the adjustable map area is actually on the surronding screen divs */
#mapScreenCL {
	border-right: solid 1px #d9d9d9;	
}

#mapScreenCR {
	border-left: solid 1px #d9d9d9;	
}

#mapScreenTC {
	border-bottom: solid 1px #d9d9d9;	
}

#mapScreenBC {
	border-top: solid 1px #d9d9d9;	
}

/*
.canv {
	position: absolute;
	top:0px;
	left:0px;
	padding: 0px;
	margin: 0px;
	border: none 0px #fff;
	z-index: 500;
}
 
.ve_map {
	overflow: hidden;
 }
 */
/***********************************
 				TOOLS
************************************/
.toolsBox{
	position: absolute;
	width: 230px;
	background-color: #f9f9f9;
	border: solid 1px #d9d9d9;
 	z-index: 2000;
	height: 600px;
}

.toolsBox .content {
	padding: 30px 9px 9px 9px;	
}

a.blueBtn, a.blueBtn:visited {
	display: block;
	width: 90px;
	height: 20px;
	background-image: url('/images/btnBlue.gif');	
	overflow: hidden;
	color: #fff;
	text-align: center;
	font-size: 11px;
	line-height:18px;
	float: right;	
}

.boxRightDrawer{
	background: #fff url('/images/drawerShadow.gif');
	background-repeat: repeat-y;
	position: absolute; 
	left: 231px; 
	width: 250px;
	height: 90%;
	border-top: solid 1px #aaa;
	border-right: solid 1px #aaa;
	border-bottom: solid 1px #aaa;
	overflow: auto;

}

.boxRightDrawer .header{
	color: #666;
	padding: 10px 1px 5px 15px;
}

.boxRightDrawer .content{
	color: #666;
	padding-left: 7px;
	height: 100%;
}

.boxDrawerControl{
	padding-right: 3px;
	text-align: right;
	font-weight: bold;	
	font-size: 12px;
}

#SaveBox .save{
	margin-bottom: 20px;	
}

#SaveBox input.text{
	width: 95%;
	border: solid 1px #888;	
}

#widthControl{
 	position: absolute;
	left: 410px;
	top: 282px;
	width: 411px;
	height: 11px;
	z-index: 1101;
 }

#widthControlTrack{
 	position: absolute;
	width: 395px;
	height: 1px;
}
 
#widthControlHandle{
 	background: url(images/mapSizerHandleW.gif);
	position: relative;
	top: 0px;
	width: 12px;
	height: 38px;
	overflow: hidden;
	z-index: 1101;
	cursor: e-resize;
}

#heightControl{
 	position: absolute;
	left: 382px;
	top: 310px;
	width: 11px;
	height: 311px;
	z-index: 1101;
}

#heightControlTrack{
 	position: absolute;
	width: 1px;
	height: 296px;
}
 
#heightControlHandle{
 	background: url(images/mapSizerHandleH.gif);
	position: relative;
	top: 0px;
	width: 38px;
	height: 12px;
	overflow: hidden;
	cursor: n-resize;
}



#usrMsgBox{
	position: absolute;
	width: 350px;
	border-right: solid 1px #aaa;
	border-left: solid 1px #ddd;
	border-bottom: solid 1px #aaa;
	border-top: solid 1px #ddd;
	background-color: #fff;
 	z-index: 2000;
}

#usrMsgBox .content{
	padding: 5px;
}

#usrAlertBox{
	position: absolute;
	background-color: #ffc;
	width: 150px;
	left: 565px;
	top: 200px;
 	z-index: 2000;
	border: solid 1px #aaa;
}

#usrAlert{
	padding: 5px;
}

#iframeBox{
	height: 400px;
 	z-index: 2000;
}

#iframeBox iframe{
	width: 100%;
	height: 400px;
}

/* IE needs to have it this way rather than just putting padding-top in #controls */
#MapLayersBoxContent{

}

/* maps controls */

.mapControlLi{
	list-style: none;
 	position: relative;
  	width: 211px;
 	height: 40px;
	background: url(images/layerControlBgOff3.png);
	padding: 0px;
	margin-bottom: 5px;
 }

.mapOpacControl{
 	position: absolute;
	left: 110px;
	top: 24px;
	height: 11px;
	padding: 0px;
	margin: 0px;
 }

 .mapOpacTrack{
 	position: absolute;
	width: 63px;
	height: 0px;
}
 
 .mapOpacHandle{
 	background: url(images/opacityControl3.png);
	position: relative;
	top: 0px;
	width: 11px;
	height: 11px;
	overflow: hidden;
	cursor: e-resize;
 }
 
 .opacityLabel {
	position: absolute;
 	top: 23px;
	left: 77px;
	font-size: 9px;
	color: #888;
 }
 .controlHandle{
	position: absolute;
 	top: 9px;
	left: 12px;
	width: 20px;
	height: 20px;
	cursor: move;
}

.infoLabel{
	position: absolute;
 	left: 8px;
	top: 5px;
	width: 165px;
	height: 10px;
	color: #666E4A;
	font-weight: bold;	
}

.mapInfo{
 	left: 38px;
}

.layerOnOff{
	position: absolute;
 	left: 186px;
	top: 22px;
	width: 16px;
	height: 12px; 
}

#controlSaveHtml{
 	position: relative;
  	width: 211px;
 	height: 99px;
	background: url(images/saveMapBg.png);
}

#error{
 	position: absolute;
	top: 20px;
	left: 50px;
	padding: 0px;
	margin: 0px;
}

#debug{
	display: none;
 	position: absolute;
	top: 300px;
	left: 10px;
	height:200px;
	width:400px;
	padding: 0px;
	margin: 0px;
	overflow: scroll;
	background-color: #fff;
}