body {
	font-family: "Trebuchet MS", sans-serif;
	background-color: #d1e4ea;
	background: url("bgMap.jpg") repeat-x top center #d1e4ea;
	margin: 0;
	font-size: 12px;
}

img { display: block; }

a { color: #4d3925; }
a:hover { color: #418daf; }

img.inline {
	border: 1px solid #979797;
	float: right;
	margin: 0 0 10px 40px;
}

ul.pageNav {
	margin: 0 0 25px 0;
	padding: 0;
	list-style: none;
	float: left;
	font-size: 13px;
}

	ul.pageNav li {
		/* 
		float: left;
		padding-right: 30px;
		margin-bottom: 3px;
		*/
	}
	
		ul.pageNav li a {
			color: #5d859b;
			font-weight: bold;
			text-decoration: none;
			font-size: 13px;
		}
	
		ul.pageNav li a:hover {
			color: #6e9db7;
		}
		
	/* stuff to handle auto-clearing of elements with floats without the need for a clearing div */				
	/* thanks to: http://www.positioniseverything.net/easyclearing.html */	
	ul.pageNav:after {
		content: ".";
		display: block;
		visibility: hidden;
		clear: both;
		height: 1%;
		font-size: 0.1em;
		line-height: 0;
	}			

	/* patch to make easyclearing hack work in IE7 */
	/* thanks to: http://www.tanfa.co.uk/archives/show.asp?var=300 */
	ul.pageNav { display: inline-block; }
	ul.pageNav { display: block; }		


ul.linkList {
	margin-top: 30px;
}

	ul.linkList li {
		margin: 15px 0;
	}

		ul.linkList a {
			text-decoration: none;
		}

#pageFrame {
	width: 974px;
	position: relative;
	margin: 0 auto 10px auto;
	padding-top: 0px;
	background: url("bgMap.jpg") repeat-x top center #d1e4ea;
}

#rightTopMenu  {
	position: relative;
	background-image: url("headerMain.jpg");
	background-position: top left;
	background-repeat: no-repeat;
	background-color: #4c3824;
	width: 940px;
	margin: auto;
	padding: 70px 10px 0 10px;	
	text-transform: uppercase;
}

	/* stuff to handle auto-clearing of elements with floats without the need for a clearing div */				
	/* thanks to: http://www.positioniseverything.net/easyclearing.html */	
	#rightTopMenu:after {
		content: ".";
		display: block;
		visibility: hidden;
		clear: both;
		height: 1%;
		font-size: 0.1em;
		line-height: 0;
	}			

	/* patch to make easyclearing hack work in IE7 */
	/* thanks to: http://www.tanfa.co.uk/archives/show.asp?var=300 */
	#rightTopMenu { display: inline-block; }
	#rightTopMenu { display: block; }

	#rightTopMenu ul {
		font-size: 12px;
		margin: 0;
		padding: 0;		
	}
	
	#rightTopMenu li {
		list-style: none;
		float: left;
		padding-right: 5px;
	}
	
	#rightTopMenu a {
		font-weight: bold;
		color: #f1f1f1;
		text-decoration: none;	
		padding: 1px 8px;	
	}
	
	#rightTopMenu a:hover {
		color: #f1f1f1;
		background-color: #281b10;
	}

#leftMenuBar {
	color: white;
	width: 144px;
	z-index: 1;
	float: left;
}

	#leftMenuBar a {
		display: block;
		padding: 5px;
		margin: 0;
		color: #4e3925;
		text-decoration: none;
		text-transform: uppercase;
		font-size: 12px;
		font-weight: bold;
	}
	
		#leftMenuBar a:hover { 
			color: #281b10; 
			background-color: #e9fae0;
		}
	
	#leftMenuBar ul {			
		list-style: none;
		margin: 0;
		padding: 0;
	}
		
		#leftMenuBar li {
			display: block;
			margin: 5px 10px 0 10px;
			font-size: 14px;
		}		


#mainContentBox {
	background-image: url(mainContentTopCorners.gif);
	background-repeat: no-repeat;
	color: #655f54;
	position: relative;
	width: 974px;
	background-color: #cae5b3;
	margin-top: 210px;
	padding: 10px 0 1px 0;
}

	/* stuff to handle auto-clearing of elements with floats without the need for a clearing div */				
	/* thanks to: http://www.positioniseverything.net/easyclearing.html */	
	#mainContentBox:after {
		content: ".";
		display: block;
		visibility: hidden;
		clear: both;
		height: 1%;
		font-size: 0.1em;
		line-height: 0;
	}			

	/* patch to make easyclearing hack work in IE7 */
	/* thanks to: http://www.tanfa.co.uk/archives/show.asp?var=300 */
	#mainContentBox { display: inline-block; }
	#mainContentBox { display: block; }		

	#mainContentBoxInside {	
		overflow: hidden; /* for IE7 bug, where the right-floated #serverResponse makes this item "leak" a lot of right "margin" */
		background-color: white;
		width: 790px;
		padding: 15px;
	}
	
		/* stuff to handle auto-clearing of elements with floats without the need for a clearing div */				
		/* thanks to: http://www.positioniseverything.net/easyclearing.html */	
		#mainContentBoxInside:after {
			content: ".";
			display: block;
			visibility: hidden;
			clear: both;
			height: 1%;
			font-size: 0.1em;
			line-height: 0;
		}			

		/* patch to make easyclearing hack work in IE7 */
		/* thanks to: http://www.tanfa.co.uk/archives/show.asp?var=300 */
		#mainContentBoxInside { display: inline-block; }
		#mainContentBoxInside { display: block; }		
	
		#pageTitle {
			position: absolute;
			width: 974px;
			height: 201px;
			left: -164px;
			left: 0;
			top: -210px;
		}
		
			#pageTitle img {
				position: absolute;
				left: 0;
				bottom: 0;
			}
	
	#mainContentBox p {
		margin: 0 0 20px 0;
	}

	#mainContentBox h1 {
		color: #281b10;
		font-size: 14px;
		font-weight: bold;
		margin: 0 50px 10px 0;
		float: left;	
		text-transform: uppercase;	
	}

	#mainContentBox h2 {
		color: #6e9db7;
		font-size: 13px;
		margin: 20px 0 10px 0;
		padding-bottom: 5px;
		clear: both;
		border-bottom: 1px solid black;
	}
	
	#mainContentBox p.mapLink a {
		float: right;
		text-decoration: none;
		/* font-size: smaller; */
	}
		
		/* stuff to handle auto-clearing of elements with floats without the need for a clearing div */				
		/* thanks to: http://www.positioniseverything.net/easyclearing.html */	
		#mainContentBox p.mapLink:after {
			content: ".";
			display: block;
			visibility: hidden;
			clear: both;
			height: 1%;
			font-size: 0.1em;
			line-height: 0;
		}			

		/* patch to make easyclearing hack work in IE7 */
		/* thanks to: http://www.tanfa.co.uk/archives/show.asp?var=300 */
		#mainContentBox p.mapLink { display: inline-block; }
		#mainContentBox p.mapLink { display: block; }			

.bigMap {
	width: 788px;
	height: 430px;
	margin: auto;
	border: 1px solid #979797;
}	
	
.areaMap {
	width: 578px;
	height: 560px;
	margin: 0;
	border: 1px solid #979797;
	float: left;
}

.editMap {
	width: 788px;
	height: 560px;
	margin: auto;
	border: 1px solid #979797;
}

.mapError {
	margin: 20px auto;
	text-align: center;
	color: #c43434;
	font-weight: bold;
}

div.infoWindow {
	width: 350px;
	max-height: 350px;
	overflow: auto;
	font-size: 12px;
}

	div.infoWindow div.hr {
		margin: 7px 0;
		padding: 0;
		height: 1px;
		overflow: hidden; /* for IE6 */
		border-top: 1px solid #7e7d7b;
		border-right: 1px solid #eee;
		border-bottom: 1px solid #eee;
		border-left: 1px solid #7e7d7b;
	}
	
		div.infoWindow div.hr.topLine { margin-bottom: 20px; }
		div.infoWindow div.hr.bottomLine { margin-top: 20px; }

	div.infoWindow strong, 
	div.infoWindow input {
		color: #6e9db7;
		display: block;
		font-size: 14px;
		font-weight: bold;
		font-family: "Trebuchet MS", sans-serif;
	}

	div.infoWindow strong {
		margin-bottom: 10px;
	}
	
	div.infoWindow textarea {
		clear: left;
		width: 345px;
		font-family: "Trebuchet MS", sans-serif;
		font-size: 12px;
		color:#655f54;
		max-height: 132px;
		padding: 0;
	}
	
	div.infoWindow span.editButtons {
		clear: both;
		display: block;
		margin-bottom: 10px;
	}
	
	div.infoWindow #descriptionC {	
		height: 160px;
		width: 349px;
		overflow: auto;
		margin-bottom: 10px;
	}
	
		div.infoWindow #descriptionC span.editButtons {
			margin-bottom: 0;
		}
	
	div.infoWindow div.category {
		margin-top: 15px;
	}
	
	div.infoWindow #uploadButton {
		float: left;
		margin: 0 5px 5px 0;
	}

	img.markerImage {
		float: left;
		margin: 0 10px 5px 0;
		width: 120px;
		/* height: 90px; */
	}

	img.albumMarkerImage {
		float: left;
		display: inline; /* for IE6 */
		margin: 10px 25px 20px 0;
		width: 120px;
		border: none;
	}
	
	#markerImageC { 
		position: relative;
		float: left;
		margin: 0 10px 5px 0;
	}
	
		#markerImageC img.markerImage { 
			float: none;
			margin: 0;
		}
		
		#markerImageC a.imageDel {
			position: absolute;
			top: 0;
			right: 0;
			width: 15px;
			height: 15px;
			background-color: #6e9db7;
			color: white;
			font-weight: bold;
			font-size: 13px;
			font-family: "Trebuchet MS", sans-serif;
			text-decoration: none;
			text-align: center;
			line-height: 12px;
		}
	
	div.infoWindow span.note {
		font-style: italic;
	}
	
	div.areaMap div.infoWindow button {
		margin: 13px 0;
	}
	
	#serverResponse {
		float: right;
		font-style: italic;
	}
	
	#uploadForm {
		display: none;
		width: 349px;
	}
	
		#uploadForm input {
			font-size: 14px;
			font-weight: normal;
			color: black;
			float: left;
		}
	
		#uploadForm_iframe {
			border: none;
			width: 0;
			height: 0;
		}

#map_panel {
	float: right;
	width: 195px;
	font-size: 12px;
}

	#map_panel h1 {
		margin: 0 0 10px 0;
		float: none;
	}
		#map_panel h1 a { color: #281b10; }
	
	#map_panel button {
		margin-bottom: 13px;
	}
	
	#map_panel select {
		color: #655f54;
		width: 100%;
		margin-bottom: 15px;
		margin-top: 3px;
	}
	
	#map_panel a { color: #6e9db7; }
	
	div.checkPanel {
		line-height: 1.5em;
	}
	
		div.checkPanel div { 
			position: relative;
			width: 195px; 
		}
		
			div.checkPanel div img {
				position: absolute;
				right: 1px;
				top: 9px;
				width: 55px;
				height: 5px;
				border-width: 1px;
				border-style: solid;
				opacity: 0.6;
				filter: alpha(opacity=60);
			}

				div.ansi img        { background-color: #ffff73; border-color: #a8a800; }
				div.esabio img      { background-color: #ff7f7f; border-color: #ff0000; }
				div.esahyd img      { background-color: #e8beff; border-color: #c500ff; }
				div.esaphy img      { background-color: #ffebaf; border-color: #ffaa00; }
				div.forests img     { background-color: #abcd66; border-color: #4c7300; }
				div.wetland img     { background-color: #e9ffbe; border-color: #70a800; }
				div.rivers img	    { background-color: #0a93fc; border-color: #0a93fc; }			
				div.waterbodies img { background-color: #bed2ff; border-color: #73b2ff; }
	
			div.checkPanel input {
				margin: 0 10px 2px 0;
				padding: 0;
				vertical-align: middle;
			}

	#markerList {
		width: 193px;
		height: 275px;
		height: 202px;
		overflow: auto;
		border: 1px solid #979797;
		padding: 0;
		margin: 15px 0;
		font-size: 12px;
	}

		#markerList li {
			margin: 0;
			padding: 0;
			border-bottom: 1px solid #979797;
		}

			#markerList li.last { border-bottom: none; }

		#markerList a {
			text-decoration: none;
			color: #574029;
			background-color: #e3e3e3;
			padding: 5px 7px;
			display: block;
			outline: none;
			-moz-outline-style: none;		
		}

			#markerList a:hover { 
				color: #6e9db7; 
				background-color: white;
			}

table.passwordForm {
	margin-top: 20px;
}

div.loginForm {
	width: 500px;
	text-align: right;
}

.mapLabel,
.mapLabelOutline {
	font-weight: bold;
	line-height: 1.2em;
	font-size: 17px;
	text-align: center;
	white-space: nowrap;
}
	.mapLabel { color: #120000; }
	.mapLabelOutline { color: white; }

div.copyEditor textarea {
	width: 780px;
	font-family: "Trebuchet MS",Helvetica,sans-serif;
	color: #655f54;
	margin-bottom: 1px;
	font-size: 12px;
}

div.copyEditor button {
	margin-top: 20px;
}

.smallHeaderType {
	float: right;
	text-transform: uppercase;
	font-size: 9px;
	color: #f1f1f1;
	

}