body{ background-color:#000000;
border-collapse:collapse;}

#haikuBody{background-color:#FFF;}
#container{ background-color:#000000; width: 600px; margin:auto;}
#containerHaiku{ background-color:#FFFFFF; width: 800px; margin:auto;}
#haiku{background-color:#FFFFFF; width: 800px; margin:auto;}
#haikuXamulaWeb{
	position:absolute;
	width:800px;
	height:20px;
	margin:auto;
	margin-top:100px;
	font-size:.8em;
	font-weight:bolder;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;}

a:link {
	color:#000;
	text-decoration: none;
	border:none;
	border-collapse:collapse;}
	
a:visited {
	text-decoration: none;
	color:#666666;
	border:none;
}
a:hover {
	text-decoration: none;
	color:#ccc;
	border:none;
	border-collapse:collapse;

}
a:active {
	text-decoration: none;
	color: #000;
	border:none;
	border-collapse:collapse;
}
	
/*portfolio */

#portfolio img {border:none; margin: 3px;}


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

#outerImageContainer{ position: relative; background-color:#CCCCCC; width: 250px; height: 250px; margin: 0 auto; margin-top: -60px; }
#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{ 
opacity: 0.4; width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* 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/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover {  background: url(images/nextlabel.gif) right 15% no-repeat; }

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

#imageData{	padding:0 10px; color:#333333; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/*credits */

#creditWeb{
	position:absolute;
	margin-top:750px;
	width: 600px;
	height: 50px;
	z-index:100;
	font-size:.8em;
	font-weight:bolder;
	font-family:Arial, Helvetica, sans-serif;
	text-align: center;
	color: #999;
	}

#credit{
	position:absolute;
	margin-top:100px;
	width: 600px;
	height: 50px;
	z-index:100;
	font-size:.8em;
	font-weight:bolder;
	font-family:Arial, Helvetica, sans-serif;
	text-align: center;
	color: #999;
	}
	
#container #credit a {
	color: #666;}

#contactMovie {
	margin:auto;
	height:220px;
	width: 580px;
	padding-left: 20px;
	padding-top: 20px;
	border:solid;
	border-width: 1px;
	border-color:#666666;
	margin-bottom: 20px;}

#creditContact{ 
	position:inherit;
	float:top;
	margin-left:200px;
	margin-top: -110px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: .8em;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	color: #666666;}

#container #contactMovie #creditContact a {
	color: #999;
}
	
#blondModel{
	margin:auto;
	height:220px;
	width: 580px;
	padding-left: 20px;
	padding-top: 20px;
	border:solid;
	border-width: 1px;
	border-color:#666666;
	margin-bottom: 20px;}	

#creditBlond {
	position:inherit;
	float:top;
	margin-left:200px;
	margin-top: -110px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: .8em;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	color: #666666;}

#container #blondModel #creditBlond a {
	color: #999;}

#maya {
	margin:auto;
	height:220px;
	width: 580px;
	padding-left: 20px;
	padding-top: 20px;	border:solid;
	border-width: 1px;
	border-color:#666666;
	margin-bottom: 20px;}

#creditMaya{
	position:inherit;
	float:top;
	margin-left:250px;
	margin-top: -140px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: .8em;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	color: #666666;}
	
#container #maya #creditMaya a {
	color: #999;}	
	
#macro {
	margin:auto;
	height:220px;
	width: 580px;
	padding-left: 20px;
	padding-top: 20px;
	border:solid;
	border-width: 1px;
	border-color:#666666;
	margin-bottom: 20px; }	
	
#creditMacro{
	position:inherit;
	float:top;
	margin-left:250px;
	margin-top: -140px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: .8em;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	color: #666666;}
	
#container #macro #creditMacro a {
	color: #999;}	
	
#model{
	margin:auto;
	height:220px;
	width: 580px;
	padding-left: 20px;
	padding-top: 20px;
	border:solid;
	border-width: 1px;
	border-color:#666666;
	margin-bottom: 20px;}	
	
#creditModel{
	position:inherit;
	float:top;
	margin-left:200px;
	margin-top: -110px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: .8em;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	color: #666666;}	
		
#greenSnake{	
	margin:auto;
	height:220px;
	width: 580px;
	padding-left: 20px;
	padding-top: 20px;
	border:solid;
	border-width: 1px;
	border-color:#666666;
	margin-bottom: 20px;}

#creditGreen{
	position:inherit;
	float:top;
	margin-left:250px;
	margin-top: -110px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: .8em;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	color: #666666;}

#container #greenSnake #creditGreen a {
	color: #999;
}

#wildlife{	margin:auto;
	height:220px;
	width: 580px;
	padding-left: 20px;
	padding-top: 20px;
	border:solid;
	border-width: 1px;
	border-color:#666666;
	margin-bottom: 20px;}

#creditWildlife{position:inherit;
	float:top;
	margin-left:200px;
	margin-top: -110px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: .8em;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	color: #666666;}	
	
#container #wildlife #creditWildlife a {
	color: #999;
}	
	
/*resume */	
	
.Accordion {
	float:left;
	width:600px;
	border-left: solid 2px #666666;
	border-right: solid 2px #666666;
	border-bottom: solid 2px #666666;
	overflow:hidden;
	background-color:#CCC; 
	font-family: Geneva, Arial, Helvetica, sans-serif;

}
.AccordionPanel {

	margin: 0px;
	padding: 0px;
	
}
.AccordionPanelTab {
	background-color:#CCCCCC;
	border-top: solid 2px #999999;
	border-bottom: solid 2px #999999;
	margin: 0px;
	padding: 2px;
	cursor: pointer;
	font-size: .8em;
	font-weight: bold;
	color:#000;
	padding: 5px;
	padding-left: 20px; 

}
.AccordionPanelContent {
	overflow: auto;
	margin: 0px;
	padding: 0px;
	height: 200px;
	padding:20px;	
	background-color:#D6D6D6;
}
.AccordionPanelOpen .AccordionPanelTab {
	background-color:#999999;
	color:#333333;
}
.AccordionPanelClosed .AccordionPanelTab {
background-color:#CCCCCC;
}
/*Accordion behaviors  classes*/
.AccordionPanelTabHover {
	color:#333333;
}
.AccordionPanelOpen .AccordionPanelTabHover {
	color:#CCCCCC;
}
.AccordionFocused .AccordionPanelTab {
	background-color:#999999;
}
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
	background-color:#666666;
}

resume.ul{
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: .8em;
	color:#000000;}

#Accordion1 li {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: .8em;
	font-style: normal;
	color: #000000;
	list-style-image: none;
	list-style-type: none;
	padding-top:5px;
	padding-left: 40px;}
		
/*links*/
#webContainer {
	
width:600px;
margin-left:7px;}

.thumbnail
{
text-align:center;
border-collapse:collapse;
float: left;
width: 158px;
border: 1px solid #666;
color:#CCC;
margin: 0 20px 20px 0;
padding: 10px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: .8em;

}
.clearboth { clear: both; }

#container #webContainer .thumbnail a img {
	border:none;}
	
/*stush*/	

#stush {
	position:absolute;
	width:500px;
	margin-left:50px;
	margin-top:100px;
	}
#xamulaWeb {
	position:absolute;
	width:600px;
	height:20px;
	margin:auto;
	margin-top:650px;
	font-size:.8em;
	font-weight:bolder;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;}

/*contact*/

#wildflower{
	position:absolute;
	width:354px;
	margin-left:123px;
	margin-top:100px;
	
	}

#contact1{
	
	width: 600px; 
	background-color:#000;
	height: 500px;
	z-index:100;
	color:#FF9900;
	font-size:1em; 
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	}
	
#contactCopy {
	margin-left:190px;
	width: 400px;
	color:#666;
	font-size:large; 
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;}		

#form {
	margin-left:50px;
	width: 200px;
	z-index:1000;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: bold;
	color: #333333;
	outline:none;}
	
#mail{
	margin: auto;
	margin-left: 120px;}	
	
#message {
	color: #CCCCCC;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	width:600px;
	height:200px;
	margin: auto;
	margin-top:200px;	
	text-align: center;}
	
#container #holder strong {
	text-align: left;
}

#personal {
	border-collapse: collapse;
	outline: none;
	border-color:#000;
	border-style:none;
	}	



/*home*/


#xamula {
	width:600px;
	margin:auto;
	height:600px;
	background-color:#000;
	margin-top:200px;
	font-weight: bold;
}

#xamula img {
	
	border:none;}
	
	
/*flag*/	

#horizontalLogo {
	width: 600px;
	height: 100px;
	background-color:000;
	z-index:1000;
	}
	
	
#horizontalLogo img {
	border:none;
	}	
	
	
/*menu*/	

#menu {
	width: 600px;
	height:75px;
	margin: auto;
	margin-bottom: 20px;
	font-weight: bold;}
	
#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 150px;
	height: 100px;
	float:left;
	font-weight: bold;}		
	
#menu a {
	display: block;
	border:none;
	text-align:center;
	padding: 6px;
	text-transform: uppercase;
	background-color:#333;
	text-decoration: none;
	font-weight: bold;}

#current {
	color:#ccc;
	}
	
#menu a:hover {
	display:block;
	color:#666666;
	background-color:#333333;}

#menu li {
	position: relative;
	z-index:0;}
	
#menu ul ul ul {
	position: absolute;
	top: 0;
	left: 100%;
	z-index:0;}
		
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul{	

	display: none;
	z-index:0;}
	
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul{

	display: block;
	z-index:0;}	

[if IE]>
<style type="text/css" media="screen">

body {
	behavior: url(csshover.htc);
	font-size: 100%;}
#menu ul li {
	float: right; width: 100%;}
#menu ul li a {
	height: 1%;} 
#menu a, #menu h2 {
	font: bold 0.7em/1.4em Geneva, Arial, Helvetica, sans-serif;}