body { 
  font-family: Arial;
  background: #7f919f url(images/bg.jpg) no-repeat;
  margin: 0px 0px 0px 0px;
  color: #ffffff; 
  font-size: 1.4em; 
  width: 1366px; height: 768px; 
  overflow: hidden;  
}


A
{	
	text-decoration: none;
	margin: 0; padding: 0
}

a.no_space {	
	margin: 0; padding: 0
}


img
{
  border: 0 none; margin: 0; padding: 0
}


/* Heading Definitions are contained below, through the kiosk they are used as follows:*/
/* h1 - Open for Optional Company Logo Text (in place of usual graphics)*/
/* h2 - Screen titles, (i.e., Sustainable Sites, Water Efficiency) */
/* h3 - Body Text, color, size, emphasis definitions. */
/* h4 - References and subtitles */
/* h5 - Photo captions (optional) */

h1
{                                                  /* Company Text Formatting*/
   color: #ffffff; 
   font-size: 1.55em; 
   font-family: Arial;
   margin: 0; padding: 0;
   font-weight: normal; 
}

h2 {                                                  /*Kiosk Title Formatting*/
  padding : 0; 
  font-size : 1.3em;
  position : relative; 
  color : #ffffff; 
  font-weight: normal;
  margin: 0 0 .4em 0;
  vertical-align : top; 
}

h3 { 																	/*Kiosk Text Formatting*/
	color: #4E4F4F; 
	font-size: 1px; 
	font-family: Arial;
	margin: 4px 0px 10px 0px;  
    text-align: left;
    position: relative;
    }

h4 {                                                  /*Kiosk References Formatting*/
  font-size: 100%; 
  font-family: Arial;
  color : #4e4f4f; 
  text-align: left;
  margin: 0 25px 10px 25px;
  text-align: justify;
  position: static;
  overflow: hidden;
}

h5 {                                                  /*Kiosk Photo Caption Formatting - centre aligned*/
	color: #ffffff; 
  font-size: 15px; 
  margin: 3px 0px 16px 0px;
  	float:center;
	text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 3; 

}
	
h6 {                                                  /*Kiosk Photo Caption Formatting - left aligned*/
  color: #ffffff; 
  font-size: 15px; 
  position: relative;
  margin: 3px 0px 6px 14px;
  text-align: left;
    position: relative;
  overflow: hidden;
  z-index: 3;
}

p
{
  text-align: left;
  margin: 0 0 12px 0;  
}
p.text_w_fact
{
  text-align: left;
  margin: 0 0 12px 0; 
  width: 546px; 
}

br {
paddding: 0; margin:0
}

sup{	
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 80%;
  font-family: inherit;
  vertical-align: text-top;}

sub{	
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 90%;
  font-family: inherit;
  vertical-align: -3px;}



/* This section defines the background images, locations and layout.  This includes sidebars, logos, and titles*/

img#logo{border:0px; position: absolute; top: 13px; left: 54px; z-index: 3; } 
img#title{border:0px; position:  absolute; top: 50px; left: 380px; z-index: 3; } 
img#header{border:0px; position: absolute; top: 14.0625%; left: 0%; z-index: -1; width: 100%;} 

/* This section defines the header with logo and title that appears on all pages */

div#header
{
	width: 860px; height: 40px;
	position: absolute; top: 36px; left: 335px; 
	z-index: 6; 
}  	
/* This section defines the content area, text and image placement attributes, depending on the justification and location within the body text. */
/* The names are self explanatory, however attention should be given to the look of the finished product in terms of margins.*/


div#content_area
{
	position: absolute; left: 870px; top:120px;
	width: 460px; 
	z-index: 5;
	visibility: visible;
}

div#content_area_horizontal
{
	position: absolute; left:335px; top:520px;
	width: 985px; 
	z-index: 5;
	visibility: visible;
}


div#content_area_vertical
{
	position: absolute; left: 766px; top: 116px;
	height: 540px; width: 577px; 
	z-index: 5;
	visibility: visible;
}

div#content_area_full
{
	position: absolute; left:335px; top: 116px;
	width: 985px; 
	z-index: 5;
	visibility: visible;
}

#content_area_full  #content_right{
	position: absolute; left: 763px; top: 48px;
	width: 220px;
	padding: 0; margin: 0;
	z-index: 16
}

div#content
{
	position: relative; left: 0; top: 0;
	width: 905px;
	padding: 0; margin: 0;
	z-index: 4
}
/* This style to be used for content with bullet list to right of image */
div#content_right{
	position: absolute; left: 468px; top: 0px;
	width: 437px;
	padding: 0; margin: 0;
	z-index: 16
}
div#content_right_animation{
	position: absolute; left: 748px; top: 48px;
	width: 236px;
	padding: 0; margin: 0;
	z-index: 16
}
div#content_left{
	position: absolute; left: 0px; top: 0px;
	width: 450px;
	padding: 0; margin: 0;
	z-index: 16
}
div#map_legend{
	position: absolute; left:898px; top: 260px;
	width: 350px;
	padding: 0; margin: 0; border: 0;
	z-index: 16
}
div#fast_fact{
	position: absolute; left: 914px; top: 555px;
	width: 297px;
	height: 357px;
	background: transparent url(images/bg_facts.png) no-repeat; 
	padding: 0; margin: 0;
	z-index: 20
}
.fast_fact_content	{
margin: 20px 30px 20px 20px;
width: 255px;
  font-size: .9em;
  color: #273747 
}

p.fact_source
{
  font-style: italic;
  text-align: right;
  margin: 6px 0 12px 0;
  font-size: .9em;  
  font-weight: normal
}

div.img-main
{
	position: absolute; left: 335px; top:116px;
	z-index: 3;
	visibility: visible;
	z-index: 10
}

div#img-map
{
	position: absolute; left:335px; top: 260px;
	z-index: 3;
	visibility: visible;
	z-index: 10
}


div.img-left 
{
	float: left;
	margin:  0px 20px 5px 0px;
	position: relative;
	top:0%;
	left:0%;
	vertical-align: top;
}

div.img-right 
{
	float:right;
	margin:  0px 0px 5px 20px;
	position: relative;
	top:0%;
	left:0%;
	vertical-align: top;	
}

div.img-center 
{
	float:center;
	border: 1px solid #4E4F4F;
	margin:  0px;
	position: relative;
	top:0%;
	left:0%;
}

.image-border
{
		border: 1px solid #4E4F4F;
		padding: 0; margin: 0;
}

table.team  {
	width: 100%; 
	margin: 0;
	padding: 0;
	background-color: #ffcc00;
}

td.team_info
{
   color:#4E4F4F; 
	font-size: .8em; 
  font-family: Arial;
    text-align: left;
    margin: 0;
	padding: 7px;
	background-color: #ffffff;
}


table#legend  {
	width: 100%; 
	margin: 0;
	padding: 0;
	border:0;
}

img.legend_image {
	margin: 0 0 -6px 0;
	padding: 0;
}


/* This section defines the formatting for use in lists with bullets */

.list_image ul{
	postion: relative
	list-style-type: none;
	list-style-position: outside;
	margin: -.4em 0 .2em 0; 
	padding: 0}
	
.list_image li {
	list-style-type: none;
	list-style-position: outside;
	background-image: url('images/bullet.gif');
	background-repeat: no-repeat;
	background-position: .7em .5em;
	margin: 0;
	padding-left:1.6em; padding-right:0; padding-top:.2em; padding-bottom:0;
}


/* This section defines the icon configuration and style used in the kiosk*/
img.icon 
{
	float:right;
	border:1px ridge #0D4066;
	margin: 15px 15px 20px 20px;
   position: relative;
	top:0%;
   left:0%;
   z-index: 10;
}

/* Specifications for container for layers to show/hide. Shows full photos on right.
	 Most browsers need both width and height set. */
#map_container	{ position:relative; width:542px; height: 430px; z-index:100;}
.map	{background: url('images/map2.png') no-repeat; }

/* Include id's for all your layers here, with commas between. */
#lyr0, #lyr1, #lyr2, #lyr3, #lyr4 { position:absolute; visibility:hidden; 
	left:0px; top:0px; margin: 0px; padding: 0px; z-index:1 }				


/*************************************************/
/* Kiosk Navigation Button Layout and Formatting */
/*************************************************/
/* This defines the area for the sub nav buttons or lower right buttons*/
#sub_nav_conatiner{
	margin: 0; padding: 0;
	position: absolute; top: 694px; left: 370px;
	width: 980px; height: 67px;
	text-align: right;
	z-index: 20;
}

.sub_nav ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: inline;
	float: right;
	z-index: 20;
}

.sub_nav li{
	float:left;
	  display: block;
  text-align: center;
	height: 67px;
	width: 237px;
    background: transparent url(images/button_subnav_off.png) no-repeat;    }

.sub_nav li.active{
    background: transparent url(images/button_subnav_on.png) no-repeat;
}

.sub_nav ul li a{
  display: block;
  height: 67px;
  line-height: 67px;
  vertical-align: middle;
  	text-decoration: none;
	font-size: .75em; 
  font-family: Arial;
  font-weight: bold;
	color: #636e79; 
}

.sub_nav ul li a.active {
	color: #c41230;
}




/* This defines the area for the main nav buttons at the right of the screen*/
#menu {
  position: absolute; left: 20px; top: 116px;
  width: 274px;
  padding: 0; 
  margin: 0;
 }

#menu ul {
  list-style-type: none;
  margin: 0; padding: 0;
}

#menu li {
  height: 69px;
  padding: 0;
  margin: 0 0 3px 0;
  background: transparent url(images/button_off.png) no-repeat;
  display: block;
  text-align: center;
}

#menu li.active {
  background-image: url(images/button_on.png);
}
#menu li.feature1 {
  background-image: url(images/button_feature2.png);
}


#menu a {
  display: block;
  height: 67px;
  line-height: 67px;
  vertical-align: middle;
	color:#636e79; 
	font-size: .8em; 
  font-family: Arial;
  font-weight: bold;
}

#menu li.active a {
  color: #c41230;
}

#menu li.feature1 a {
  color: #c41230;
}


/***********************/
/* Assorted Formatting */
/***********************/
/* Horizontal Rule Layout */
hr.top {position: absolute; top: 15%; left: 0; z-index: -1}
hr.bottom{position: absolute; top: 85%; left: 1%; z-index: -1;}