/* h20 style sheet */

/*##### Required properties #####*/

/*Default properties*/


body {

text-align: center; /*##### Background image for entire site #####*/

background:url("images/interface/back.jpg")  repeat-x;
background-color: ffffff;

}

/*######################################## Generic properties ########################################*/

/*########## h20 container properties - Container is what I used as the outside box to hold content ##########*/

#Webpage {	/*##### Webpage -  total size of content area #####*/
	width:879px; 
	height:1000px; 
	margin-right:auto;
	margin-left:auto;
	position: relative; top:-10px;
	text-align:left;		
}


#border_left { /*##### border_left -  Image are to the left of the main content #####*/
	
	padding: 0;
	width: 19px;
	height: 620px;
	background:url("images/interface/border_left.jpg") no-repeat;	
	float:left;		
}

#border_right { /*##### border_right -  Image are to the right of the main content #####*/
	padding: 0;
	width: 19px;
	height: 620px;
	background:url("images/interface/border_right.jpg") no-repeat;
	float:left;		
}


#content_area {
	width:841px;
	height: 1000px;
	padding:0px;
	float:left;
	background:url("images/interface/content_area.jpg") repeat-x #ffffff;
}

/*########## Content Header - The logo area info ##########*/

#content_header { /*##### header area box #####*/
	width:841px;
	height: 89px;
	padding:0px;
	float:left;
	border-style: none;
	/*border-width: 1px; 
	border-color: #3f656e;*/
	background-color: none;
}

#logo {
	width:841px;  /*##### site logo #####*/
	height: 89px;	
	float:left;
	background:url("images/interface/logo.jpg");
}

/*########## Ensd of content Header - The logo area info ##########*/

/*########## Content midddle - middle content area ##########*/

#content_middle {
	width:841px;
	height: 500px;
	padding:0px;
	margin: 0px;
	float:left;
}

#content_middleleft { /*##### holds the navigation buttons #####*/
	width:153px;
	height:700px;
	padding:0px;
	float:left;
	background-color: #312d2b;
	background:url("images/interface/middle_left.jpg") no-repeat;
}

/*################# Navigation #################*/

.menu {
font-family:    Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight: bold;
float:left;
position: relative; top:20px;
color:#d3d3d3;
z-index:1000;


}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:150px;
}
/* hack for IE5.5 */
* html .menu ul {margin-left:-16px; ma\rgin-left:0;}
/* position relative so that you can position the sub levels */
.menu li {
position:relative;
}

/* get rid of the table */
table {position:absolute; top:0; left:0; z-index:100; font-size:1em;}

/* style the links */
.menu a, .menu a:visited {
display:block; 
font-size:10px;
font-weight: bold;
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#8d8d8d;
background: url("images/interface/menu_button.gif")  no-repeat ;
text-indent:5px;
border:1px solid #none;
border-width:0 0px 0px 0;
}


/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {width:150px; w\idth:149px;}
/* style the link hover */
.menu a:hover{
font-family:    Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight: bold;

color:#000000; 
background:url("images/interface/menu_button_o.gif")  no-repeat ;
}


#menu_spacer {
	width:40px;
	height: 25px;
	font-family:  Century gothic, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #ffffff;	
	margin: 0px 0px 0px 0px;
	float:left;	
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:0;
left:150px; 
}
/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
}

/*#################  END of Navigation #################*/
#blog {
	width:30px;
	height: 18px;
	padding:0px;
	float:left;
	position: relative; top:20px;left:10px;
	background:url("images/interface/blog.jpg") no-repeat ;
}

#kc {
	width:30px;
	height: 30px;
	padding:0px;
	float:left;
	position: relative; top:15px;left:10px;
	background:url("images/interface/kc.gif") no-repeat ;
}


#contact_box{
	width:143px;
	height:30px;
	float:left;
	position: relative; top:30px;left:5px;
	background:url("images/interface/contact_box.jpg")  no-repeat;
}

#info_contact_title {
	width:153px;
	
	font-family: Century gothic, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #4171b3;	
	margin: 0px 0px 0px 0px;
	position: relative; top:15px;left:10px;
	float:left;	
}

#info_contact_text {
	width:153px;
	
	font-family: Century gothic, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #959595;	
	margin: 0px 0px 0px 0px;
	position: relative; top:15px;left:10px;
	float:left;	
}


#content_middleright {
	width:685px;
	height:500px;
	font-family:    Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight: normal;
	float:left;
	padding:0px;
	background-color: #312d2b;
	background:url("images/interface/middle_right.jpg") no-repeat;
}



#content_gallery {
	width:685px;
	height:250px;
	font-family:    Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight: normal;
	float:left;
	padding:0px;
		
	background-color: #none;
	
}





#content_information {
	width:646px;
	height:0px;
	padding:0px;
	float:center;	
	background-color: #none;
	border-style: none;	
}

#hor_spacer1 {
	width:646px;
	height: 10px;
	margin: 0px 0px 0px 0px;
	float:left;	
}

#hor_spacer2 {
	width:646px;
	height: 40px;
	margin: 0px 0px 0px 0px;
	float:left;	
}



#menuimg{
	width:685px;
	height:118px;
	font-family:    Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight: normal;
	color:#c2c1c1;
	float:left;
	position: relative; top:0px;left:2px;
	background:url("images/interface/home_img.jpg") no-repeat;
}

#info_spacer1 {
	width:30px;
	height: 203px;
	font-family:  Century gothic, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #ffffff;	
	margin: 0px 0px 0px 0px;
	float:left;	
}

#info_images {
	width:202px;
	height: 203px;
	font-family: Century gothic, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #959595;
	margin: 0px 0px 0px 0px;
	float:left;		
}

#image_area {
	width:202px;
	height: 118px;
	font-family: Century gothic, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #595959;
	margin: 0px 0px 0px 0px;
	float:left;
	text-align:right;		
}

#image{
	width:202px;
	height:98px;
	font-family:    Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size:9px;
	font-weight: normal;
	color:#595959;
	float:left;
	text-align:right;
	margin: 0px 0px 0px 0px;	
}

#link_area {
	width:170px;
	height: 98px;
	font-family: Century gothic, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #595959;
	margin: 0px 0px 0px 0px;
	float:left;
	text-align:right;
	text-decoration: none;
	border-style: none;		
}

.linkimg{
	width:170px;
	height:98px;
	font-family:    Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size:9px;
	font-weight: normal;
	color:#595959;
	float:left;
	text-align:right;
	margin: 0px 0px 0px 0px;
	text-decoration: none;	
	border-style: none;
}

.rescueimg{
	width:150px;
	height:142px;
	font-family:    Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size:9px;
	font-weight: normal;
	color:#595959;
	float:left;
	text-align:right;
	margin: 0px 0px 0px 0px;
	text-decoration: none;	
	border-style: none;
}



#info_spacer2 {
	width:30px;
	height: 203px;
	font-family:  Century gothic, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #ffffff;	
	margin:0px 0px 0px 0px;
	float:left;	
}



#menu_title {
	width:384px;
	height: 59px;
	padding:0px;
	float:left;
	background:url("images/interface/welcome.jpg");
}

#about_title {
	width:384px;
	height: 59px;
	padding:0px;
	float:left;
	background:url("images/interface/about.jpg");
}

#bcu_title {
	width:384px;
	height: 59px;
	padding:0px;
	float:left;
	background:url("images/interface/bcu_title.jpg");
}

#skills_title {
	width:384px;
	height: 59px;
	padding:0px;
	float:left;
	background:url("images/interface/skills_title.jpg");
}

#links_title {
	width:384px;
	height: 59px;
	padding:0px;
	float:left;
	background:url("images/interface/links_title.jpg");
}

#shop_title {
	width:384px;
	height: 59px;
	padding:0px;
	float:left;
	background:url("images/interface/shop_title.jpg");
}

#gallery_title {
	width:384px;
	height: 59px;
	padding:0px;
	float:left;
	background:url("images/interface/gallery_title.jpg");
}

#contact_title {
	width:384px;
	height: 59px;
	padding:0px;
	float:left;
	background:url("images/interface/contact_title.jpg");
}

#testimonials_title {
	width:384px;
	height: 59px;
	padding:0px;
	float:left;
	background:url("images/interface/testimonials_title.jpg");
}

#line_left{
	width:11px;
	height:203px;
	float:left;
	position: relative; top:0px;left:0px;
	background:url("images/interface/line_left_long.gif") no-repeat;
}

#line_left_long{
	width:11px;
	height:600px;
	float:left;
	position: relative; top:0px;left:0px;
	background:url("images/interface/line_left_long.gif") no-repeat;
}


#info_box1 {
	width:170px;
	height: 203px;
	font-family:  Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #595959;	
	margin: 0px 0px 0px 0px;
	float:left;
	border-style: none;	
}

#info_line {
	font-family:  Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	text-align:center;
	color: #4171b3;	
	margin: 0px 0px 0px 0px;
		
}


#info_title {
	
	
	font-family:  Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #4171b3;	
	margin: 0px 0px 0px 0px;
	position: relative; top:0px;left:0px;
	float:left;	
}

#line_middle{
	width:21px;
	height:203px;
	float:left;
	position: relative; top:0px;left:0px;
	background:url("images/interface/line_middle.gif") no-repeat;
}

#line_middle_long{
	width:21px;
	height:600px;
	float:left;
	position: relative; top:0px;left:0px;
	background:url("images/interface/line_middle_long.gif") no-repeat;
}

#line_middle_longlink{
	width:9px;
	height:600px;
	float:left;
	position: relative; top:0px;left:0px;
	background:url("images/interface/line_middle_longlink.gif") no-repeat;
}

#info_box2 {
	width:170px;
	height: 203px;
	font-family:  Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #595959;	
	margin: 0px 0px 0px 0px;
	float:left;	
}

#line_right{
	width:11px;
	height:203px;
	float:left;
	position: relative; top:0px;left:0px;
	background:url("images/interface/line_right.gif") no-repeat;
}

#line_right_long{
	width:11px;
	height:600px;
	float:left;
	position: relative; top:0px;left:0px;
	background:url("images/interface/line_right_long.gif") no-repeat;
}

#h2o_icon{
	width:18px;
	height:11px;
	
	float:left;
	position: relative; top:0px;left:0px;
	background:url("images/interface/h2o_icon.gif") no-repeat;
}

/*########## End of content midddle - middle content area ##########*/

/*########## End of h20 container properties - Container is what I used as the outside box to hold content ##########*/



a.link:link 		{ width:153px; height:10px; font-family: Century gothic, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; color: #959595;margin: 0px 0px 0px 0px; position: relative;  float:left; text-decoration: none;border-style: none;}
a.link:visited 		{ width:153px; height:10px; font-family: Century gothic, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; color: #959595;margin: 0px 0px 0px 0px; position: relative;  float:left; text-decoration: none;border-style: none;}
a.link:hover 		{ width:153px; height:10px; font-family: Century gothic, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; color: #959595;margin: 0px 0px 0px 0px; position: relative;  float:left; text-decoration: none;border-style: none;}
a.link:active 		{ width:153px; height:10px; font-family: Century gothic, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; color: #959595;margin: 0px 0px 0px 0px; position: relative;  float:left; text-decoration: none;border-style: none;}


a.linkpage:link 		{ width:170px; font-family: Century gothic, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; color: #959595;margin: 0px 0px 0px 0px; position: relative;  float:left; text-decoration: none;border-style: none;}
a.linkpage:visited 		{ width:170px; font-family: Century gothic, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; color: #959595;margin: 0px 0px 0px 0px; position: relative;  float:left; text-decoration: none;border-style: none;}
a.linkpage:hover 		{ width:170px; font-family: Century gothic, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; color: #959595;margin: 0px 0px 0px 0px; position: relative;  float:left; text-decoration: none;border-style: none;}
a.linkpage:active 		{ width:170px; font-family: Century gothic, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; color: #959595;margin: 0px 0px 0px 0px; position: relative;  float:left; text-decoration: none;border-style: none;}











/*#################################  Popup #################################*/

A.screen {
	Z-INDEX: 1; COLOR: #f6970e; TEXT-DECORATION: none; POSITION: relative; 
}
A.screen:visited {
	Z-INDEX: 1; COLOR: #f6970e; TEXT-DECORATION: none; POSITION: relative; 
}
A.screen B {
	BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; LEFT: 0px; VISIBILITY: hidden; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 0px; POSITION: absolute; TOP: -122px; HEIGHT: 0px; BORDER-RIGHT-WIDTH: 0px 
}
A.screen:hover {
	BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; Z-INDEX: 1000; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px; TEXT-DECORATION: none 
}
A.screen:hover B {
	BORDER-RIGHT: #345 1px solid; BORDER-TOP: #345 1px solid; Z-INDEX: 500; VISIBILITY: visible; BORDER-LEFT: #345 1px solid; WIDTH: 100px; CURSOR: pointer; BORDER-BOTTOM: #345 1px solid; HEIGHT: 122px 
}
A.screen:hover B IMG {
	BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px 
}

/*#################################  END of Popup #################################*/


/*#################### Gallery properties ####################*/



/* The containing box for the gallery. */
#container {
	position:relative; 
	width:685px;
	height:250px;
	margin:0px 0px 0px 0px;
	border:none;
	font-family:  Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	background:url("images/interface/gallery_back.gif") no-repeat;
	
	
}



/* Removing the list bullets and indentation - add size - and position */
#container ul {
	width:240px;
	height:20px;
	padding:0px 0px 0px 0px; 
	margin:5px;
	list-style-type:none;
	float:right;
	
	
}

/* Float the container information */
#container li {
	float:left;
	background:none;
	
}


/* Remove the images and text from sight */
#container a.gallery span {
	position:absolute; 
	width:1px;
	height:1px;
	top:10px;
	left:14px;
	overflow:hidden;
	background:none;
	
}


/*#################### End of Gallery properties ####################*/



#rescue_image {
	width:150px;
	height: 142px;
	padding:0px;
	float:left;
	background:url("images/photos/rescue_rangers.jpg") no-repeat;
}