@charset "utf-8";
/* CSS Document */
html { overflow-y: scroll; }

body {
	background-image: url(../img/header2_bg.jpg);
	background-repeat: repeat-x;
	background-color: #DFF0DB;
	margin: 0px auto;
	padding: 0px;
	font-family: Open Sans, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #34495e;
	line-height: 1.45;
	text-align: justify;
}

table { 
	border-collapse: collapse;
	width: 100%
}
td, th{
	border: 2px solid #E4CC9E;
	width: 25px
}

a, a:visited {
	color: #A33D49;
	text-decoration: none;
	font-weight: bold;
}

a:active, a:hover {
	color: #2F4572;
	text-decoration: none;
	font-weight: bold;
}

#pagecontainer {
	width: 968px; 
	margin: 0px auto; 
	padding: 0px;
}

#bodycontainer_map {
	width: 948px; 
	height: 640px;
	margin: 0px auto; 
	padding: 10px;
	background-color: #FFF;
}

#bodycontainer {
	width: 962px; 
	/*height: 640px;*/
	/*margin: 0px auto; */
	padding: 3px;
	padding-bottom: 55px;
	background-color: #FFF;
	background-image: url(../img/footer.png);
	background-position: bottom;
	background-repeat: no-repeat;
}



#bodyleft {
	width: 680px; 
	height: 100%;
	padding: 3px;
}

#bodyright {
	padding: 3px;
	width: 250px; 
	height: 100%;
	float: right;
	border-left:dashed;
	border-left-style:dashed;
	border-left-color:#999;
	border-left-width:thin;
	font-size: 0.9em;
	text-align:left;
	
	
}

#footer {
    position : relative;
    bottom : 0;
	left: 150px;
    height : 20px;
	margin-bottom: -40px;
}

#menublock {
	/*width: 948px;*/
	height: 24px;
	margin: 0px;
	margin-bottom: 3px;
	padding: 0px;
	/*background-color: #8ab0c6;*/
	/* This line stops the gaps between the menu items appearing */
	font-size:0;
	/*border: 1px solid #888;*/
}

#mapwindow {
	width: 686px;
	height: 560px;
	margin: 0px;
	padding: 0px;
	background-color: #FFF;
	border: 1px solid #888;
	float: left;
}



#datawindow {
	width: 234px;
	height: 588px;
	margin: 0px;
	padding: 4px;
	background-color: #FFF;
	border: 1px solid #888;
	float: right;
}

header { 
	padding: 0px;
	margin: auto;
	margin-top: 3px;
	margin-bottom: 0px;
	display:block;
	width: 968px;
	height: 103px;
	position: relative;
}

h1 {
	background-image: url(../img/header4.jpg);
	text-indent: -9999px;
	display:block;	
	width: 968px;
	height: 103px;
	padding: 0px;
	margin: 0px;
	
}

#epa-box-link { 
	display: block;
	position: absolute;
	top: 5%;
	left: 5%;
	width: 90px;
	height: 70px;
	padding: 0px;
/* 	margin-right: 100px; */
	background-color: transparent;

}

#teag-box-link { 
	display: block;
	position: absolute;
	top: 20%;
	right: 3%;
	width: 90px;
	height: 40px;
	padding: 0px;
/* 	margin-right: 100px; */
	background-color: transparent;

}

#CU-box-link { 
	display: block;
	position: absolute;
	top: 65%;
	right: 3%;
	width: 90px;
	height: 30px;
	padding: 0px;
/* 	margin-right: 100px; */
	background-color: transparent;

}


h2 {
	color: #2E4572;
}

/* CSS lightbox stuff */
.black_overlay{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
}
 
.white_content {
	display: none;
	position: absolute;
	top: 25%;
	left:25%;
	width: 50%;
	height: 50%;
	padding: 8px;	
	border: 8px solid #d1e1ee;
	background-color: white;
	z-index:1002;
	overflow: auto;
}

/*Legend customisation*/
.esriLegendServiceLabel {
    display: none;
}
.esriLegendLayerLabel {
	display: none;
}


/* For soil description page */
.ss_descriptor{
	margin: 4px;
	border: 1px solid;
	border-radius: 5px;
	border-color: #666;
	padding: 4px;
}


a.soilscapeLink{
	color:#000;
	text-decoration: none;
	font-weight: normal;
}

a:hover.soilscapeLink{
	color:#C00;
	text-decoration: none;
	font-weight: normal;
}

/*------------------------------------
Experiemntal IE fix for top menu
--------------------------------------*/
/* *    Setup */ 
ul.cssmenu {
	list-style: none;
	padding: 0px;
	margin: 0;
}
.displace {
	position: absolute;
	left: -5000px;
}
ul.cssmenu li {
	float: left;
}
ul.cssmenu li.home a {
	display: block;
	width: 158px;
	height: 24px;
	background: url('../img/menu.jpg');
	background-position: 0px -24px;
} 
ul.cssmenu li.maps a {
	display: block;
	width: 158px;
	height: 24px;
	background: url('../img/menu.jpg');
	background-position: -159px -24px;
} 
ul.cssmenu li.guide a {
	display: block;
	width: 158px;
	height: 24px;
	background: url('../img/menu.jpg');
	background-position: -318px -24px;
} 
ul.cssmenu li.downloads a {
	display: block;
	width: 158px;
	height: 24px;
	background: url('../img/menu.jpg');
	background-position: -477px -24px;
} 
ul.cssmenu li.about a {
	display: block;
	width: 158px;
	height: 24px;
	background: url('../img/menu.jpg');
	background-position: -636px -24px;
} 
ul.cssmenu li.help a {
	display: block;
	width: 158px;
	height: 24px;
	background: url('../img/menu.jpg');
	background-position: -795px -24px;
} 




/* *    Hover Links */
ul.cssmenu li.home a:hover {
	background-position: 0px 0px;
}
ul.cssmenu li.maps a:hover {
	background-position: -159px 0px;
}
ul.cssmenu li.guide a:hover {
	background-position: -318px 0px;
} 
ul.cssmenu li.downloads a:hover {
	background-position: -477px 0px;
}
ul.cssmenu li.about a:hover {
	background-position: -636px 0px;
}
ul.cssmenu li.help a:hover {
	background-position: -795px 0px;
}



/* *    Selected/Active Links */
ul.cssmenu li.home a.selected {
	background-position: 0 -48px;
}
ul.cssmenu li.maps a.selected {
	background-position: -159px -48px;
}
ul.cssmenu li.guide a.selected {
	background-position: -318px -48px;
}
ul.cssmenu li.downloads a.selected {
	background-position: -477px -48px;
}
ul.cssmenu li.about a.selected {
	background-position: -636px -48px;
}
ul.cssmenu li.help a.selected {
	background-position: -795px -48px;
}



/* 
---------------------------
CSS rollover menu (OLD, DOESN'T WORK with IE <= 7)
---------------------------
 */
a.imagemenu_home {
	display:inline-block;
	width:158px;
	height:24px;
	background:url(../img/menu.jpg) no-repeat 0px -24px;
	text-indent:-9999px;
}
a:hover.imagemenu_home {
	background-position: 0px 0px;
}
a.imagemenu_home_selected {
	display:inline-block;
	width:158px;
	height:24px;
	background:url(../img/menu.jpg) no-repeat 0px -48px;
	text-indent:-9999px;
}
/* ------------ */
a.imagemenu_guide {
	display:inline-block;
	width:158px;
	height:24px;
	background:url(../img/menu.jpg) no-repeat -158px -24px;
	text-indent:-9999px;
}
a:hover.imagemenu_guide {
	background-position: -158px 0px;
}
a.imagemenu_guide_selected {
	display:inline-block;
	width:158px;
	height:24px;
	background:url(../img/menu.jpg) no-repeat -158px -48px;
	text-indent:-9999px;
}
/* ------------ */
a.imagemenu_help {
	display:inline-block;
	width:158px;
	height:24px;
	background:url(../img/menu.jpg) no-repeat -316px -24px;
	text-indent:-9999px;
}
a:hover.imagemenu_help {
	background-position: -316px 0px;
}
a.imagemenu_help_selected {
	display:inline-block;
	width:158px;
	height:24px;
	background:url(../img/menu.jpg) no-repeat -316px -48px;
	text-indent:-9999px;
}
/* ------------ */
a.imagemenu_search {
	display:inline-block;
	width:158px;
	height:24px;
	background:url(../img/menu.jpg) no-repeat -474px -24px;
	text-indent:-9999px;
}
a:hover.imagemenu_search {
	background-position: -474px 0px;
}
a.imagemenu_search_selected {
	display:inline-block;
	width:158px;
	height:24px;
	background:url(../img/menu.jpg) no-repeat -474px -48px;
	text-indent:-9999px;
}
/* ------------ */
a.imagemenu_contact {
	display:inline-block;
	width:158px;
	height:24px;
	background:url(../img/menu.jpg) no-repeat -632px -24px;
	text-indent:-9999px;
}
a:hover.imagemenu_contact {
	background-position: -632px 0px;
}
a.imagemenu_contact_selected {
	display:inline-block;
	width:158px;
	height:24px;
	background:url(../img/menu.jpg) no-repeat -632px -48px;
	text-indent:-9999px;
}
/* ------------ */
a.imagemenu_about {
	display:inline-block;
	width:158px;
	height:24px;
	background:url(../img/menu.jpg) no-repeat -790px -24px;
	text-indent:-9999px;
}
a:hover.imagemenu_about {
	background-position: -790px 0px;
}
a.imagemenu_about_selected {
	display:inline-block;
	width:158px;
	height:24px;
	background:url(../img/menu.jpg) no-repeat -790px -48px;
	text-indent:-9999px;
}
/* ------------ */


@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
#mapwindow {
	width: 700px;
	height: 860px;
}
	
#bodycontainer {
	width: 940px; 
	height: 940px;
}

#datawindow {
	width: 220px;
	height: 852px;
}
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only, as above */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
#mapwindow {
	width: 700px;
	height: 460px;
}
	
/*
#bodycontainer {
	width: 940px; 
	height: 540px;

}
*/

#datawindow {
	width: 220px;
	height: 452px;
}
}