@charset "UTF-8";
/* CSS Document */

/*  PAGE LAYOUT */
body{
	font-family:Helvetica Neue, Helvetica, Verdana, Ariel, sans-serif;
	color:#534741;
	font-size:11px;
	background-color:#DBCEC3;
	text-align:center;
	padding:5px 20px 20px 20px;
}



a,
a:link,
a:active,
a:visited{
	color:#534741;
	text-decoration:none;
}

a:hover{
	color:#558080;
	text-decoration:none;
}

a.active{
	text-decoration:underline;
}


.preview{
	display:none;
	height:200px;
}

.veticaltext{
	float:left;
	margin-top:10px;
}

h2.windowtitle{
	font-weight:normal;
	font-size:14px;
	padding:0px;
	margin:0px;
	color:#534741;
}

p.windowtitle{
	font-weight:normal;
	font-size:10px;
	padding:0px 0px 8px 0px;
	margin:0px;
}


ul{
	list-style-type:none;
	float:left;
	margin:0px;
	padding:10px 0px 0px 10px;
}



li{
	display:block;
	clear:both;
}


#bodycontainer{
	background-color:white;
	width:840px;
	padding:8px;
}


#header{
	width:inherit;
	height:50px;
}

#header h1{
	font-size:30px;
	letter-spacing:1px;
	color:#534741;
	margin:0px;
	padding:10px 0px 0px 4px;
	float:left;
	font-weight:normal;
}

#header #navlinks{
display:block;
float:right;
margin-top:23px;
padding:6px;
}


#header #navlinks a,
#header #navlinks a:link,
#header #navlinks a:active,
#header #navlinks a:visited{
display:block;
float:left;
color:#534741;
padding:0px 5px 0px 5px;
text-decoration:none;
}


#header #navlinks a:hover{
color:#558080;
text-decoration:none;
}


#mapwindow{
background-color:#F4EEE9;
padding:8px;
margin:0px 0px 8px 0px;
text-align:left;
display:block;
clear:both;
min-height:300px;
}

#map{
	float:right;
	text-align:center;
	padding:10px 80px 0px 0px;
	width:650px;
}


#mapblock{
	border:thin solid white;
	padding:2px;
	margin:0px;
	float:left;
	display:block;
	height:56px;
}


#mapblock h3{
	font-size:10px;
	width:inherit;
	text-align:center;
	font-weight:normal;
	clear:both;
	padding:0px;
	margin:0px;
}


#map #icon{
	width:24px;
	height:36px;
}

#map p{
	text-align:left;
	line-height:16px;
}


#undermap{
	height:200px;
	width:825px;
	text-align:left;
	padding:6px;
	border-top:thin solid #534741;
	}
	
#legend{
	text-align:left;
	float:left;
}

#legend img{
	float:left;
}



#colorswatch{
	height:16px;
	width:16px;
	float:left;
	margin-right:8px;
}


li.colors{
	padding:0px 30px 20px 0px;
	margin:0px;
}

li.icons{
	padding:0px 30px 20px 0px;
	margin:0px;
}


li.icons img{
	padding:0px 8px 0px 0px;
	margin:0px;
	position:relative;
	top:-6px;
}


ul.iconlist{
	padding-left:10px;
}



#mostrecent{
	height:200px;
	line-height:16px;
}


#mostrecent img{
	float:left;
	padding: 6px 8px 0px 0px;
}


#mostrecent a img{
	border:none;
}

#mostrecent span{
	display:none;
}




/*  JQUERY */

.zitem {
	width:24px;
	height:36px;	
	border:none;	
	margin:4px;
	
	/* required to hide the image after resized */
	
	/* for child absolute position */
	position:relative;
	
	/* display div in line */
	float:left;
}

.zitem .caption {
	width:100px;
	background:#2D221C;
	color:#fff;
		
	/* fix it at the bottom */
	position:relative;
	bottom:-1px; /* fix IE issue */
	left:0;

	/* hide it by default */
	display:none;

	/* opacity setting */
	filter:alpha(opacity=70);    /* ie  */
	-moz-opacity:0.7;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.7;    /* for really really old safari */  
	opacity: 0.7;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.zitem .caption a {
	text-decoration:none;
	color:#fff;
	font-size:10px;	
	
	/* add spacing and make the whole row clickable*/
	padding:2px;
	display:block;
}

#map img{
	border:0;
	width:24px;
	height:36px;
	/* allow javascript moves the img position*/
}


/* MODAL WINDOW CSS */

#mask {
  position:absolute;
  z-index:9000;
  background-color:#2D221C;
  display:none;
  top:0px;
  left:0px;
}

#boxes{
	float:left;
}
  
#boxes .window {
  position:absolute;
  background-color:white;
  display:none;
  z-index:9999;
  padding:8px;
  top:20px;
  left:50px;
  width:800px;
  text-align:left;
  color:#534741;
}


#boxes #windowheader{
	height:34px;
 	width:800px;
}

#boxes #windowheader #title{
	display:block;
	float:left;
	letter-spacing:1px;
	font-size:24px;
}


#boxes #categories{
	float:left;
	font-size:11px;
	padding:20px 0px 0px 0px;
	border-top:thin solid #534741;
	width:320px;
}


#boxes #categories #relationschart{
	background-image:url(/images/relationsfork.png);
	background-repeat:no-repeat;
	background-position:23px 2px;
	height:150px;
}


#boxes #categories #relationschart #combinedimage{
	height:72px;
	float:left;
	padding:18px 130px 0px 0px; 
}

#boxes #categories #relationschart #color{
	height:36px;
	float:left;
	padding:9px 20px 0px 0px; 
	width:130px;
}

#boxes #categories #relationschart #icon{
	height:36px;
	float:left;
	padding:0px 20px 0px 0px; 
	width:auto;
}

#boxes #categories #relationschart #icon img{
	float:left;
	padding:0px 3px 0px 0px;
	margin:0px;
	position:relative;
	top:-8px;
}


#boxes #content{
	line-height:16px;
	padding-bottom:20px;
	clear:both;
}


#boxes #content a,
#boxes #content a:link,
#boxes #content a:active,
#boxes #content a:visited{
	color:#534741;
}

#boxes #content a:hover{
	color:#558080;
}

#boxes span{
	display:none;
}


#boxes #windowheader a,
#boxes #windowheader a:link,
#boxes #windowheader a:active,
#boxes #windowheader a:visited{
	display:block;
	color:#534741;
	float:right;
	text-decoration:none;
	text-align:center;
	padding:2px;
	font-size:18px;
}

#boxes #windowheader a:hover{
	color:#534741;
	border:thin solid #534741;

}




#boxes img {
  float:right;
  width:auto;
  height:auto;
  padding-left:10px;
}


/* Customize your modal window here, you can add background image too */
#boxes #dialog {
  width:375px; 
  height:203px;
}

#contactline{
	width:600px;
}

#contactline input{
	width:475px;
	border-bottom:thin solid #534741;
	color:#534741;
	background-color:#F4EEE9;
	outline:none;
	border-left:none;
	border-right:none;
	border-top:none;
	margin:4px 0px 0px 0px;
	padding:0px;
}


#contactline #submit{
	border:thin solid #534741;
	color:#534741;
	background-color:#F4EEE9;
	outline:none;
}

#contactline textarea{
	width:475px;
	background-image:url(/images/contact_line.png);
	background-repeat:repeat;
	background-position:top left;
	border:none;
	color:#534741;
	background-color:#F4EEE9;
	font-size:11px;
	line-height:20px;
	padding:2px 0px 0px 0px;
	font-family:Helvetica Neue, Helvetica, Verdana, Ariel, sans-serif;
}

#contactline span{
	width:100px;
	color:#534741;
	display:block;
	float:left;
	text-align:right;
	padding:0px;
	margin:4px 0px 0px 0px;
}