html { height: 100%; }

body {
	font-family: "Trebuchet MS", sans-serif;
	background: url("bgPhoto.jpg") center top black no-repeat;
	margin: 0;
	font-size: 12px;
	height: 100%;
}

img { display: block; }

a { color: black; }
a:hover { color: #418daf; }

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

h3 {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
}

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: 964px;
	height: auto;
	min-height: 100%;
	position: relative;
	margin: 0 auto;
	padding-top: 0px;
	background: transparent url("pageBG.png") repeat-x center top ;
}

	body.home #pageFrame {
		background-image: url("introPageBG.png");
	}

	body.wide #pageFrame {
		width: auto;
		margin: 0 50px;
	}

	#headerGraphic {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	#branchOverlay {
		position: absolute;
		top: 1088px;
		right: 0;
		z-index: 1;
	}

	#muteButton {
		position: absolute;
		left: 737px;
		top: 176px;
		z-index: 3;
		font-size: 14px;
		font-weight: bold;
		text-transform: lowercase;
		cursor: pointer;
	}

		#muteButton span.img {
			width: 26px;
			height: 29px;
			margin: -3px 8px 0 0;
			background: url("muteButton.png") transparent left top no-repeat;
			display: inline-block;
			vertical-align: middle;
		}

			#muteButton.off span.img { background-position: left -29px; }

	#audioPlayer {
		position: absolute;
		left: -10000px;
		top: 0;
		width: 1px;
		height: 1px;
	}

#rightTopMenu  {
	position: relative;
	margin: auto;
	padding: 75px 15px 0 60px;
	z-index: 2;
	height: 20px;
}

	/* 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-size: 13px;
		color: #1c1b19;
		text-decoration: none;
		padding: 1px 8px;
	}

	#rightTopMenu a:hover {
		color: black;
		text-decoration: underline;
	}

#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 {
	position: relative;
	width: 934px;
	padding: 5px 15px 15px;
	overflow: hidden; /* for IE7 bug, where the right-floated #serverResponse makes this item "leak" a lot of right "margin" */
	z-index: 2;
	min-height: 600px;
}

	body.home #mainContentBox { padding-top: 200px; }

	body.wide #mainContentBox { width: auto; }

	/* 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; }

	#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 h1 .smaller {
			font-size: 12px;
			margin-left: 25px;
		}

	#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: 722px;
	height: 600px;
	margin: 0;
	border: 1px solid black;
	float: left;
}

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

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

div.infoWindow {
	width: 450px;
	overflow: auto;
	font-size: 12px;
}

	div.infoWindow.wide {
		width: 650px;
	}

	div.infoWindow.tall {
		/* max-height: 410px; */
		max-height: 434px;
	}

	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 h3,
	div.infoWindow strong,
	div.infoWindow input {
		color: #6e9db7;
		font-size: 14px;
		font-weight: bold;
		font-family: "Trebuchet MS", sans-serif;
	}

	div.infoWindow span.editButtons {
		clear: none;
		display: inline-block;
	}

	div.infoWindow h3,
	div.infoWindow h4,
	div.infoWindow strong {
		margin:  0;
	}

	div.infoWindow h3 {
		margin-bottom: 5px;
	}

	div.infoWindow h4 {
		text-align: right;
		font-size: 12px;
		font-weight: bold;
	}

	div.infoWindow div.editField {
		margin: 0 0 5px 0;
		line-height: 22px;
		vertical-align: middle;
	}

		div.infoWindow div.editField input,
		div.infoWindow div.editField select {
			color: #655f54;
			font-size: 12px;
			font-weight: normal;
			font-family: "Trebuchet MS", sans-serif;
			display: inline-block;
		}

	div.infoWindow textarea {
		clear: left;
		width: 370px;
		font-family: "Trebuchet MS", sans-serif;
		font-size: 12px;
		color:#655f54;
		max-height: 185px;
		padding: 0;
	}

	div.infoWindow table {
		border-collapse: collapse;
		width: 625px;
		margin-bottom: 10px;
	}

		div.infoWindow table td {
			vertical-align: top;
			padding: 0;
			margin: 0;
		}

			div.infoWindow table td.left {
				width: 375px;
				padding-right: 5px;
			}

			div.infoWindow table td.right {
				width: 235px;
				background-color: #f6f6f6;
				padding: 5px 5px 0;
			}

				div.infoWindow table td.right input {
					width: 140px;
				}

				div.infoWindow table td.right span.editButtons {
					margin-bottom: 10px;
				}

	div.infoWindow #reference { width: 500px; }
	div.infoWindow #source_other {
		width: 200px;
		height: 35px;
		/* margin: 3px 0 0 15px; */ /* for when the select box was above it */
		margin: 0 0 0 15px;
	}
		div.infoWindow #source_other.hidden { display: none; }

	div.infoWindow #descriptionC {
		height: 125px;
		width: 375px;
		overflow: auto;
	}

		div.infoWindow.tall #descriptionC {
			/* height: 215px; */
			height: 239px;
		}

		div.infoWindow #descriptionC span.editButtons {
			margin-bottom: 0;
		}

	div.infoWindow hr#langDivider { margin: 20px 0; }

	div.infoWindow #descriptionWrapper {
		margin-top: 10px;
		max-height: 400px;
		overflow-y: auto;
	}

		div.infoWindow #descriptionWrapper p.credit {
			margin: 10px 5px 0;
			font-size: 10px;
			font-style: italic;
			text-align: right;
		}

	div.infoWindow div.category {
		margin-top: 15px;
	}

	div.infoWindow .deleteButton {
		float: left;
		margin: 0 0 5px 0;
		clear: left;
		width: 120px;
	}

	div.infoWindow .uploadButton {
		float: left;
		margin: 0 10px 5px 0;
		clear: left;
		width: 120px;
	}

	div.infoWindow #savePos {
		color: green;
	}

	div.infoWindow #restorePos {
		color: red;
	}

	div.infoWindow video,
	div.infoWindow audio {
		display: block;
		margin: 0.25em 0 1em;
	}	

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

	img.albumMarkerImage {
		float: left;
		display: inline; /* for IE6 */
		margin: 10px 25px 20px 0;
		width: 120px;
		border: none;
	}

	div.flash {
		background-color: black;
		margin: 0 10px 5px 0;
		width: 240px;
		border: 1px solid #979797;
		float: left;
		clear: left;
	}

	div.flash.audioPlayer { height: 24px; }

	#markerImageC,
	#markerVideoC,
	#markerAudioC {
		float: left;
		display: inline;
		margin: 0 10px 5px 0;
		clear: left;
	}

		#markerImageC img.markerImage {
			float: none;
			margin: 0;
			margin-bottom: 10px;
		}

	div.infoWindow span.note {
		font-style: italic;
	}

	div.infoWindow span.markerID {
		float: right;
		font-style: italic;
		color: #979797;
		line-height: 24px;
	}

	div.areaMap div.infoWindow span.markerID {
		padding-right: 100px; //so it doesn't end up under the map inset on big infowindows
	}

	div.areaMap div.infoWindow button {
		clear: left;
	}

	#serverResponse {
		float: right;
		font-style: italic;
	}

		#serverResponse .error {
			color: red;
			font-weight: bold;
		}

	#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.table {
		width: 100%;
	}

	#map_panel h1 {
		margin: 0 0 10px 0;
		float: none;
	}
		#map_panel h1 a { color: #281b10; }

	#map_panel button {
		margin-bottom: 13px;
	}

		#map_panel.table button { margin-bottom: 0; }

	#map_panel select {
		color: #655f54;
		width: 100%;
		margin-bottom: 15px;
		margin-bottom: 0;
		margin-top: 3px;
	}

		#map_panel.table select { width: 145px; }

	#map_panel a { color: #6e9db7; }

	div.checkPanel {
		line-height: 1.5em;
	}

		div.checkPanel div {
			position: relative;
			width: 195px;
		}

			div.checkPanel div a {
				text-decoration: none;
				border-bottom: 1px solid #aaa;
				display: block;
				margin-bottom: 3px;
			}
				#map_panel div.checkPanel div a { color: black; }

			div.checkPanel div img.marker {
				position: absolute;
				right: 1px;
				top: 0px;
				width: 10px;
				height: 17px;
				border-width: 0;
				border-style: none;
				opacity: 1.0;
				filter: alpha(opacity=100);
			}

			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.kipawa img      { background-color: #fa3411; border-color: #fa3411; }
				div.maganasipi img  { background-color: #c500ff; border-color: #c500ff; }
				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;
			}

	#markerTable {
		width: 932px;
		border: 1px solid #979797;
		margin: 15px 0;
		font-size: 12px;
		border-spacing: 0;
		border-collapse: collapse;
	}

		body.wide #markerTable { width: auto; }

		#markerTable tr {
			color: #574029;
			background-color: #e3e3e3;
			border: 1px solid #979797;
			cursor: pointer;
		}

			#markerTable tbody tr:hover {
				color: #6e9db7;
				background-color: white;
			}

			#markerTable thead tr {
				cursor: default;
				background-color: #f2f2f2;
			}

			#markerTable thead th {
				font-weight: bold;
				text-align: left;
				padding: 5px 7px;
				text-transform: uppercase;
			}

			#markerTable td {
				border-top: 1px solid #979797;
				border-bottom: 1px solid #979797;
				padding: 5px 7px;
			}

			#markerTable th.del,
			#markerTable td.del {
				border-left: 1px solid #bbb;
				/* padding-right: 0; */
			}

			#markerTable img {
				display: inline;
				vertical-align: top;
			}

	div.search {
		height: 26px;
		margin-top: 10px;
		white-space: nowrap;
		width: 100%;
		overflow: hidden;
	}

		div.search span.searchBox { position: relative; }
		div.search #searchX {
			position: absolute;
			right: 2px;
			top: 0px;
			background-color: #e3e3e3;
			color: black;
			padding: 0 2px;
			cursor: pointer;
			display: none;
		}
			div.search.full #searchX { display: block; }

		#search {
			width: 77px;
			font-family: "Trebuchet MS", sans-serif;
			font-size: 12px;
			padding-right: 15px;
		}
			body.fr #search { width: 47px; }

		#map_panel #searchGo {
			margin-bottom: 0;
			font-family: "Trebuchet MS", sans-serif;
			font-size: 12px;
		}

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

		#map_panel.edit #markerList {
			height: 238px;
		}

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

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

		#markerList a {
			text-decoration: none;
			color: black;
			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;
	float: right;
}

#mainContentBox h1.loginForm {
	width: 500px;
	margin-top: 50px;
	text-align: right;
	float: none;
}

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

div.buttonBar { clear: both; }

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

#mainContentBox .intro h1 {
	float: none;
	text-align: center;
	font-size: 18px;
	margin: 0 0 10px 0;
}

#mainContentBox .intro p {
	margin: 20px 0;
}

.intro table.columns {
	border-spacing: 0;
	text-align: left;
}

	.intro table.columns td:first-child { padding: 0 20px 0 0; }
	.intro table.columns td {
		padding: 0 20px;
		vertical-align: top;
	}
	.intro table.columns td:last-child { padding: 0 0 0 20px; }

	.intro table.columns td img {
		border: 5px solid black;
		margin: auto;
	}

.intro img.photo {
	border: 10px solid black;
}

.intro div.viewMap {
	text-align: center;
	margin: 25px auto 0;
}

	.intro div.viewMap img {
		border: 1px solid black;
		margin: 0 auto 5px;
	}

.intro div.logos {
	text-align: center;
	margin-top: -10px;
}

	.intro div.logos img {
		display: inline;
		vertical-align: middle;
		margin: 0 45px;
		border: none;
	}

.intro span.mcccf {
	text-align: center;
	margin-top: 20px;
	font-size: 10px;
	font-style: italic;
	display: block;
}

	.intro span.mcccf img {
		display: inline;
		vertical-align: middle;
		margin: 10px 0;
		border: none;
	}

.footer {
	clear: both;
	padding-top: 30px;
}

.footer div.logos {
	text-align: center;
}

	.footer div.logos a { text-decoration: none; }

	.footer div.logos img {
		display: inline;
		vertical-align: middle;
		margin: 0 20px;
		border: none;
	}

.footer div.logos span.mcccf {
	text-align: left;
	font-size: 10px;
	font-style: italic;
	display: inline-block;
	width: 260px;
	line-height: 12px;
	vertical-align: middle;
	margin: 0 0 0 50px;
}

.footer div.logos a.mcccf img { margin-left: 10px; }

div.photoCredit {
	font-size: 10px;
	font-style: italic;
	text-align: center;
}