body {
	background-image:url(../images/bg.jpg);
	background-repeat:repeat-y;
	padding: 0px;
	margin: 0px;
	height:100%;
	background-color: #333333;
	text-align:center;}
	
p {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #ffffff; text-align: left; line-height:24px; margin:0px 30px 0px 30px;}
a {color: #006699; text-decoration: none;}
a:link {color: #006699; text-decoration: none;}
a:visited {color: #006699; text-decoration: none;}
a:hover {color: #006699; text-decoration: underline;}
span {margin-left:30px;}

h1 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15pt; color: #ffffff; text-align: left; margin:30px;}
h2 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #ffffff; text-align: left; margin:30px;}
	
#container {margin:0px auto; width:800px; height:auto; text-align:center;}
#containter_bg {float:left; width:800px; height:auto; background-image:url(../images/container_bg.jpg)}
#header {float:left; width:800px; height:200px; background-image:url(../images/header.jpg)}

#container_p {margin:10px auto; width:508px; height:auto; text-align:center; padding-left:150px; padding-top:10px;}
#containter_p_bg {float:left; width:508px; height:auto; background-image:url(../images/container_p_bg.jpg); background-repeat:repeat-y;}
#header_p {float:left; width:508px; height:178px; background-image:url(../images/header_p.jpg);}

#splash_menu {float:left; width:180px; height:auto;}
#splash_image {float:left; width:183px; height:auto;}
#splash_spcr {float:left; width:219px; height:500px;}

#gallery {float:left; width:508px; height:auto;}

#left_menu{float:left; width:139px; height:auto; display:block;  position:absolute; top:0px; left:0px;}

#year {float:left; width:70px; text-align:left;}
	#year p {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #ffffff; text-align: left; line-height:24px; margin:0px 0px 0px 30px;}
#noyear {float:left; width:70px; text-align:left;}
	#noyear p {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #000000; text-align: left; line-height:24px; margin:0px 0px 0px 30px;}
#information {float:left; width:425px; text-align:left;}
	#information p {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #ffffff; text-align: left; line-height:24px; margin:0px 0px 0px 30px;}
#divider {float:left; width:500px; height:8px; background-image:url(../images/divider.jpg); background-repeat:no-repeat;}

/* //////////////////////////////////////////// Interactive Menus/////////////////////////////////////////////////// */	
			
		/* Left Menu */	
		#portfolio_l{float:left; display:block; width:180px; height:23px; background-position:0 -24px;
			background:url(../images/portfolio_l.jpg) no-repeat 0 0;}
		#portfolio_h{float:left; display:block; width:180px; height:23px; background:url(../images/portfolio_h.jpg) no-repeat 0 0;}
			
			#portfolio_l:hover {background-position: 0 -23px;}
			#portfolio_l span {display: none;}  
			
		#biography_l{float:left; display:block; width:180px; height:23px; background-position:0 -24px;
			background:url(../images/biography_l.jpg) no-repeat 0 0;}
		#biography_h{float:left; display:block; width:180px; height:23px; background:url(../images/biography_h.jpg) no-repeat 0 0;}
			
			#biography_l:hover {background-position: 0 -23px;}
			#biography_l span {display: none;}  
			
		#contact_l{float:left; display:block; width:180px; height:23px; background-position:0 -24px;
			background:url(../images/contact_l.jpg) no-repeat 0 0;}
		#contact_h{float:left; display:block; width:180px; height:23px; background:url(../images/contact_h.jpg) no-repeat 0 0;}
			
			#contact_l:hover {background-position: 0 -23px;}
			#contact_l span {display: none;}  
			
		#resume_l{float:left; display:block; width:180px; height:23px; background-position:0 -24px;
			background:url(../images/resume_l.jpg) no-repeat 0 0;}
		#resume_h{float:left; display:block; width:180px; height:23px; background:url(../images/resume_h.jpg) no-repeat 0 0;}
			
			#resume_l:hover {background-position: 0 -23px;}
			#resume_l span {display: none;}  
			
		#small{float:left; display:block; width:150px; height:489px; margin-left:50px;
			background:url(../images/small.jpg) no-repeat 0 0;}
			
			#small span {display: none;} 
			
		#small_l{float:left; display:block; width:180px; height:23px;
			background:url(../images/small_l.jpg) no-repeat 0 0;}
			
			#small_l:hover {background-position: 0 -23px;}
			#small_l span {display: none;} 
			
		#large{float:right; display:block; width:150px; height:489px; margin-right:50px;
			background:url(../images/large.jpg) no-repeat 0 0;}
			
			#large span {display: none;}
		
		#large_l{float:left; display:block; width:180px; height:23px;
			background:url(../images/large_l.jpg) no-repeat 0 0;}
			
			#large_l:hover {background-position: 0 -23px;}
			#large_l span {display: none;}
					
/* //////////////////////////////////////////// Lightbox CSS /////////////////////////////////////////////////////// */

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;	}

#lightbox a img{ 
	border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;	}

#imageContainer{
	padding: 10px;	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;	}
	
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;	}
	
#imageContainer>#hoverNav{ 
	left: 0;}
	
#hoverNav a{ 
	outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../images/java/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;	}
	
#prevLink { 
	left: 0; 
	float: left;}

#nextLink { 
	right: 0; 
	float: right;}

#prevLink:hover, #prevLink:visited:hover { 
	background: url(../images/java/prevlabel.gif) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { 
	background: url(../images/java/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;	}

#imageData{	
	padding:0 10px; color: #666; }

#imageData #imageDetails{ 
	width: 70%; float: left; text-align: left; }
	
#imageData #caption{ 
	font-weight: bold;
	margin-left:0px;	}

#imageData #numberDisplay{ 
	display: block; clear: left; padding-bottom: 1.0em;	
	margin-left:0px;	}
			
#imageData #bottomNavClose{ 
	width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;	}
	

/* Min-Width */
.lbWidth { /* most browsers */
	position: absolute;
	top: 0px; left: 0px;
	width: 100%;
	min-width: 790px;	}

* html .lbContent { /* IE6 */
	margin-left: -790px;
	position:relative;	}

* html .lbMinWidth { /* IE6 */
	padding-left: 790px;	}
	
	
/* Clearfix */	
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;	}

.clearfix {
	display: inline-block;}

/* Hides from IE-mac \*/

* html .clearfix {
	height: 1%;}
	
.clearfix {
	display: block;}
	
/* End hide from IE-mac */ 




/* //////////////////////////////////////////// Gallery Hover Style /////////////////////////////////////////////////////// */


/* this is for the navigation button "thumb 1" */

#onexone{
	display:-moz-inline-box;   /* need both of these because IE and Firefox are being bitchy, this one is for Firefox */
	display:inline-block;  /* need both of these because IE and Firefox are being bitchy, this one is for IE/Opera */
	width:150px;
	height:100px;
	background:url(../images/thumbnails/1_x_1.jpg) no-repeat 0 0;
	margin:5px;}

#onexone:hover{
	background-position:0px -100px;}

#onexone span{
	display:none;}
	
/* this is for the navigation button "thumb 2" */

#onetwothree{
	display:-moz-inline-box;   /* need both of these because IE and Firefox are being bitchy, this one is for Firefox */
	display:inline-block;  /* need both of these because IE and Firefox are being bitchy, this one is for IE/Opera */
	width:150px;
	height:100px;
	background:url(../images/thumbnails/1_2_3.jpg) no-repeat 0 0;
	margin:5px;}

#onetwothree:hover{
	background-position: 0px -100px;}

#onetwothree span{
	display: none;}
	
/* this is for the navigation button "thumb 3" */

#fourcylinder{
	display: -moz-inline-box;   /* need both of these because IE and Firefox are being bitchy, this one is for Firefox */
	display: inline-block;  /* need both of these because IE and Firefox are being bitchy, this one is for IE/Opera */
	width: 150px;
	height: 100px;
	background: url(../images/thumbnails/4_cylinder.jpg) no-repeat 0 0;
	margin:5px;}

#fourcylinder:hover{
	background-position: 0px -100px;}

#fourcylinder span{
	display: none;}
	
/* this is for the navigation button "thumb 4" */

#betty{
	display: -moz-inline-box;   /* need both of these because IE and Firefox are being bitchy, this one is for Firefox */
	display: inline-block;  /* need both of these because IE and Firefox are being bitchy, this one is for IE/Opera */
	width: 150px;
	height: 100px;
	background: url(../images/thumbnails/betty.jpg) no-repeat 0 0;
	margin:5px;}

#betty:hover{
	background-position: 0px -100px;}

#betty span{
	display: none;}
	
/* this is for the navigation button "thumb 5" */

#flame{
	display: -moz-inline-box;   /* need both of these because IE and Firefox are being bitchy, this one is for Firefox */
	display: inline-block;  /* need both of these because IE and Firefox are being bitchy, this one is for IE/Opera */
	width: 150px;
	height: 100px;
	background: url(../images/thumbnails/flame.jpg) no-repeat 0 0;
	margin:5px;}

#flame:hover{
	background-position: 0px -100px;}

#flame span{
	display: none;}
	
/* this is for the navigation button "thumb 6" */

#gardengate{
	display: -moz-inline-box;   /* need both of these because IE and Firefox are being bitchy, this one is for Firefox */
	display: inline-block;  /* need both of these because IE and Firefox are being bitchy, this one is for IE/Opera */
	width: 150px;
	height: 100px;
	background: url(../images/thumbnails/garden_gate.jpg) no-repeat 0 0;
	margin:5px;}

#gardengate:hover{
	background-position: 0px -100px;}

#gardengate span{
	display: none;}
	
/* this is for the navigation button "thumb 7" */

#generator{
	display: -moz-inline-box;   /* need both of these because IE and Firefox are being bitchy, this one is for Firefox */
	display: inline-block;  /* need both of these because IE and Firefox are being bitchy, this one is for IE/Opera */
	width: 150px;
	height: 100px;
	background: url(../images/thumbnails/generator.jpg) no-repeat 0 0;
	margin:5px;}

#generator:hover{
	background-position: 0px -100px;}

#generator span{
	display: none;}
	
/* this is for the navigation button "thumb 8" */

#triangle{
	display: -moz-inline-box;   /* need both of these because IE and Firefox are being bitchy, this one is for Firefox */
	display: inline-block;  /* need both of these because IE and Firefox are being bitchy, this one is for IE/Opera */
	width: 150px;
	height: 100px;
	background: url(../images/thumbnails/stainless_triangle.jpg) no-repeat 0 0;
	margin:5px;}

#triangle:hover{
	background-position: 0px -100px;}

#triangle span{
	display: none;}
	
/* this is for the navigation button "thumb 9" */

#diver{
	display: -moz-inline-box;   /* need both of these because IE and Firefox are being bitchy, this one is for Firefox */
	display: inline-block;  /* need both of these because IE and Firefox are being bitchy, this one is for IE/Opera */
	width: 150px;
	height: 100px;
	background: url(../images/thumbnails/diver.jpg) no-repeat 0 0;
	margin:5px;}

#diver:hover{
	background-position: 0px -100px;}

#diver span{
	display: none;}
	
/* this is for the navigation button "thumb 10" */

#xyz_day{
	display: -moz-inline-box;   /* need both of these because IE and Firefox are being bitchy, this one is for Firefox */
	display: inline-block;  /* need both of these because IE and Firefox are being bitchy, this one is for IE/Opera */
	width: 150px;
	height: 100px;
	background: url(../images/thumbnails/xyz_day.jpg) no-repeat 0 0;
	margin:5px;}

#xyz_day:hover{
	background-position: 0px -100px;}

#xyz_day span{
	display: none;}
	
/* this is for the navigation button "thumb 110" */

#winter_flowers{
	display: -moz-inline-box;   /* need both of these because IE and Firefox are being bitchy, this one is for Firefox */
	display: inline-block;  /* need both of these because IE and Firefox are being bitchy, this one is for IE/Opera */
	width: 150px;
	height: 100px;
	background: url(../images/thumbnails/winter_flowers.jpg) no-repeat 0 0;
	margin:5px;}

#winter_flowers:hover{
	background-position: 0px -100px;}

#winter_flowers span{
	display: none;}
	
/* this is for the navigation button "thumb 12" */

#winter_flowers_2{
	display: -moz-inline-box;   /* need both of these because IE and Firefox are being bitchy, this one is for Firefox */
	display: inline-block;  /* need both of these because IE and Firefox are being bitchy, this one is for IE/Opera */
	width: 150px;
	height: 100px;
	background: url(../images/thumbnails/winter_flowers_2.jpg) no-repeat 0 0;
	margin:5px;}

#winter_flowers_2:hover{
	background-position: 0px -100px;}

#winter_flowers_2 span{
	display: none;}
	
/* this is for the navigation button "thumb 13" */

#windwheels_9{
	display: -moz-inline-box;   /* need both of these because IE and Firefox are being bitchy, this one is for Firefox */
	display: inline-block;  /* need both of these because IE and Firefox are being bitchy, this one is for IE/Opera */
	width: 150px;
	height: 100px;
	background: url(../images/thumbnails/windwheels_9.jpg) no-repeat 0 0;
	margin:5px;}

#windwheels_9:hover{
	background-position: 0px -100px;}

#windwheels_9 span{
	display: none;}
	
/* this is for the navigation button "thumb 14" */

#atk_day{
	display: -moz-inline-box;   /* need both of these because IE and Firefox are being bitchy, this one is for Firefox */
	display: inline-block;  /* need both of these because IE and Firefox are being bitchy, this one is for IE/Opera */
	width: 150px;
	height: 100px;
	background: url(../images/thumbnails/atk_day.jpg) no-repeat 0 0;
	margin:5px;}

#atk_day:hover{
	background-position: 0px -100px;}

#atk_day span{
	display: none;}
	
/* this is for the navigation button "thumb 15" */

#atk_night{
	display: -moz-inline-box;   /* need both of these because IE and Firefox are being bitchy, this one is for Firefox */
	display: inline-block;  /* need both of these because IE and Firefox are being bitchy, this one is for IE/Opera */
	width: 150px;
	height: 100px;
	background: url(../images/thumbnails/atk_night.jpg) no-repeat 0 0;
	margin:5px;}

#atk_night:hover{
	background-position: 0px -100px;}

#atk_night span{
	display: none;}
	
/* this is for the navigation button "thumb 16" */

#three_t{
	display: -moz-inline-box;   /* need both of these because IE and Firefox are being bitchy, this one is for Firefox */
	display: inline-block;  /* need both of these because IE and Firefox are being bitchy, this one is for IE/Opera */
	width: 150px;
	height: 100px;
	background: url(../images/thumbnails/3_t.jpg) no-repeat 0 0;
	margin:5px;}

#three_t:hover{
	background-position: 0px -100px;}

#three_t span{
	display: none;}
	
/* this is for the navigation button "thumb 17" */

#t_6{
	display: -moz-inline-box;   /* need both of these because IE and Firefox are being bitchy, this one is for Firefox */
	display: inline-block;  /* need both of these because IE and Firefox are being bitchy, this one is for IE/Opera */
	width: 150px;
	height: 100px;
	background: url(../images/thumbnails/t_6.jpg) no-repeat 0 0;
	margin:5px;}

#t_6:hover{
	background-position: 0px -100px;}

#t_6 span{
	display: none;}
	
/* this is for the navigation button "thumb 18" */

#plane_and_sphere{
	display: -moz-inline-box;   /* need both of these because IE and Firefox are being bitchy, this one is for Firefox */
	display: inline-block;  /* need both of these because IE and Firefox are being bitchy, this one is for IE/Opera */
	width: 150px;
	height: 100px;
	background: url(../images/thumbnails/plane_and_sphere.jpg) no-repeat 0 0;
	margin:5px;}

#plane_and_sphere:hover{
	background-position: 0px -100px;}

#plane_and_sphere span{
	display: none;}
	
/* this is for the navigation button "thumb 19" */

#sixteen_triangles{
	display: -moz-inline-box;   /* need both of these because IE and Firefox are being bitchy, this one is for Firefox */
	display: inline-block;  /* need both of these because IE and Firefox are being bitchy, this one is for IE/Opera */
	width: 150px;
	height: 100px;
	background: url(../images/thumbnails/16_triangles.jpg) no-repeat 0 0;
	margin:5px;}

#sixteen_triangles:hover{
	background-position: 0px -100px;}

#sixteen_triangles span{
	display: none;}
	
/* //////////////////////////////////////////// Menu Pop Out CSS  /////////////////////////////////////////////////////// */


/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/dd_valid.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

/* common styling */

	.menu {font-family: arial, sans-serif; position:relative; font-size:12px; z-index:100; color: #666666}
	
	.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color: #666666; width:150px; 
	height:20px; text-align:left; color:#666666; line-height:20px; font-size:11px; overflow:hidden;}
	
	.menu ul {padding:0; margin:0; list-style: none;}
	
	.menu ul li {float:left; position:relative;}
	
	.menu ul li ul {display: none;}

/* specific to non IE browsers */

	.menu ul li:hover a {color: #666666;}
	
	.menu ul li:hover ul {display:block; position:absolute; top: 4px; left:115px; width:150px;}
	
	.menu ul li:hover ul li a.hide {color:#666666;}
	
	.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#666666;}
	
	.menu ul li:hover ul li ul {display: none;}
	
	.menu ul li:hover ul li a {display:block; color: #666666;}
	
	.menu ul li:hover ul li a:hover {color: #ffffff;}
	
	.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
	
	.menu ul li:hover ul li:hover ul.left {left:-105px;}