/*------------------------------------------------------------------------------------

  Copyright Einstein Industries 2006. Used with Permission.                             

  May not be duplicated or reproduced.

  Please check for cross-browser compatibility prior to making changes

  MINIMUM BROWSER CHECK :: IE5.x/IE6/Firefox/Safari

  CSS Document - layout.css

/*-------------------------------------------------------------------------------------*/

/* undo some default styling of common (X)HTML browsers

/*------------------------------------------------------------------------------------*/



body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td,html,label,tr,td {margin:0;padding:0;}

table{border-collapse:collapse;border-spacing:0;}

fieldset,img,a img,:link img,:visited img {border:0;}

address,caption,cite,code,dfn,th,var {font-style:normal;font-weight:normal;}

ol,ul {list-style:none;}

caption,th {text-align:left;}

h1,h2,h3,h4,h5,h6 {font-size:100%;}

q:before,q:after {content:'';}



/* ------------------------ GLOBAL ELEMENTS ------------------------ */

body {
	background: #000000;
	font:12px/16px Arial, Helvetica, sans-serif; 
	color:#F0DEC4;
}
#wrapper {
	width: 813px;
	background: #1C1C1C;
	border: thin solid #999999;
	margin: 40px auto;
}



/* -------------- classes ---------------------------------------------- */

.oneword {margin-left:150px}

.twowords {margin-left:50px}

.topmargin {margin-top: 7px;}

.topmargin50 {margin-top: 50px;}

.imagecenter {margin-top: 20px 20px 0 0px;}

.noborder {border:none;}

.vertalign {vertical-align: top;}

.highlighted {
	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	margin-bottom: 7px;
	}

.video {margin-top: 30px; margin-bottom: 30px;}


/* ------------------------ masthead framework ------------------------ */
#header {
	position:relative;
	background:url("../images/masthead.jpg");
	height:89px;
	}
	/* index page link within #masthead */		
	#header a {
	position:absolute;
	display:block;
	height:139px;
	width:516px;
	margin:50 0 0 35px;
	left: 10px;
	top: 24px;
		}
	#header a span {
		display:none;
		}

/* ------------------------ MAIN NAVIGATION FRAMEWORK ------------------------ */

/* ------------------------ horizontal sprite nav ------------------------ */

#nav { 
	background:url("images/nav.jpg") no-repeat;
	width:817px; 
	height:49px; 
	margin:0px;
	padding:0; 
	}

#nav span { display: none; }

#nav li, #nav a { height:41px; display:block; } /* change height here also */

#nav li { float:left; list-style:none; _display:inline; position:relative; }

#nav-01 { width: 170px; margin-left: 0px;}
#nav-02 { width: 140px;}
#nav-03 { width: 162px;}
#nav-04 { width: 80px;}
#nav-05 { width: 78px;}
#nav-06 { width: 85px;}
#nav-07 { width: 96px;}


/*-------------- (-79px) X position of button / (-38px) height of image from above ------------- */

#nav-01 a:hover { background:url("images/nav.jpg")  -0px -49px no-repeat; }
#nav-02 a:hover { background:url("images/nav.jpg") -170px -49px no-repeat; }
#nav-03 a:hover { background:url("images/nav.jpg") -310px -49px no-repeat; }
#nav-04 a:hover { background:url("images/nav.jpg") -472px -49px no-repeat; }
#nav-05 a:hover { background:url("images/nav.jpg") -552px -49px no-repeat; }
#nav-06 a:hover { background:url("images/nav.jpg") -630px -49px no-repeat; }
#nav-07 a:hover { background:url("images/nav.jpg") -715px -49px no-repeat; }



/*-------------- OPTIONAL - Keeps the hover state on each page based on body #id ------------- */

body#work #nav-01 { background: url("images/nav.jpg") -0px -49px no-repeat; }
body#web #nav-01 { background: url("images/nav.jpg") -0px -49px no-repeat; }
body#print #nav-01 { background: url("images/nav.jpg") -0px -49px no-repeat; }
body#animation #nav-01 { background: url("images/nav.jpg") -0px -49px no-repeat; }

body#artportfolio #nav-02 { background: url("images/nav.jpg") -170px -49px no-repeat; }
body#art #nav-02 { background: url("images/nav.jpg") -170px -49px no-repeat; }
body#photography #nav-02 { background: url("images/nav.jpg") -170px -49px no-repeat; }

body#flash #nav-03 { background: url("images/nav.jpg") -310px -49px no-repeat; }
body#news #nav-04 { background: url("images/nav.jpg") -472px -49px no-repeat; }
body#blog #nav-05 { background: url("images/nav.jpg") -552px -49px no-repeat; }
body#resume #nav-06 { background: url("images/nav.jpg") -630px -49px no-repeat;  }
body#contact #nav-07 { background: url("images/nav.jpg") -715px -49px no-repeat; }


/* ------------------------ horizontal sprite nav ------------------------ */

/* Son of Suckerfish */
#nav li ul {
	position:absolute;
	left:-9999px;
	padding-right:1px; /* Fixes one px spacing for border-right in FF */
	background-color:#2a2b26;	/* Background color of drop down nav - add more styles (i.e. background image) if you want */
	}

#nav li ul li { 
	height:20px; /* Height of each drop down nav item */
	border:1px solid #1c1c1c;
	border-top:none;
	}	

#nav li ul li a {
	width:100%;
	height:20px;	/* Height of each drop down nav item, should match above */
	line-height:20px;	 /* Height of each drop down nav item again, should match above */
	}

#nav li ul li a span {
	display:block;
	padding-left:5px;
	}

/* Drop down link styles */
#nav a:link, #nav a:visited, #nav a:hover, #nav a:active {
	font-size:1.0em;
	color:#dfd3d3;
	text-decoration:none;
	}

#nav li:hover ul, #nav li.sfHover ul { left:auto; }

/* Hover styles for drop down items */

#nav-01 ul a:hover, #nav-02 ul a:hover {
	background-image:none;
	background-color:#5a584c;
	color:#FFFFFF;
	}

/* width of drop down menu - choose width that allows items to display on one line */
#nav-01 ul {margin-left:25px; width:220px;}
#nav-01 li { width:220px;}	
#nav-02 ul, #nav-02 li { width:220px; }



#header {
	background-image: url(images/bannerhome.jpg);
	background-repeat: no-repeat;
	height: 213px;
	width: 813px;
	border-bottom: thin solid #666666;
}

#content {margin:40px 30px 5px 30px; min-height:300px;}

#content h1, #content h2.index-h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #CCCCCC;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
}

#content h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFF;
	margin-left: 15px;
	margin-top: 12px;
	margin-bottom: 3px;
}

#content h3 {
	font: normal 18px Geneva, Arial, Helvetica, sans-serif;
	color: #FF9933;
	text-align: center;
	margin:10px 0 5px 0px;
}

#content h3 a{
	font: normal 18px Geneva, Arial, Helvetica, sans-serif;
	color: #FF9933;
	text-align: center;
	margin:10px 0 5px 0px;
}

#content h4 {
	font: 9px Verdana, Arial, Helvetica, sans-serif;
	color: #FF9966;
	text-align: center;
}

#content p a.current {
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	color: #FF6600;
	text-decoration: none;
}

#content p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	color: #CCCCCC;
	font-size: 12px;
}

#content a:link {
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	color: #CCCCCC;
	text-decoration: none;
	}

#content a:visited {
	font: 12px Verdana, Arial, Helvetica, sans-seriff;
	color: #999999;
	text-decoration: none;
	}

#content a:hover {
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	color: #FF9900;
	text-decoration: none;
	}

#content a:active {
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	color: #FF0000;
	text-decoration: none;
	}

#table {
	margin-top:40px;
	}

#table td img{
	width: 100px;
	margin: 10px;
	padding: 0px;
	}

#printtable {margin-top: 40px;}

#printtable td img {
	width: 75px;
	margin: 10px;
	padding: 0px;
	}

#fototable {margin-top: 40px;}

#fototable td img {
	width: 50px;
	margin: 10px;
	padding: 0px;
	}
	
#webtable {margin-left: 100px; margin-top: 50px;}

#webtable p {text-align: left; margin-left: 15px;}

#webtable td img {margin-bottom: 20px; border-style: none;}

#animationtable {margin-left: 220px; margin-top: 50px;}

#animationtable p {text-align: left; margin-left: 15px;}

#animationtable td img{margin-bottom: 20px; border-style: none;}

#resumetable {width: 500px; margin-left: 160px; margin-top: 50px;}

#resumetable p {text-align: left; margin-left: 15px;}

#resumetable .leftcol {vertical-align: top; text-align: right;}

#resumetable .vertalign .marginbottom {margin-bottom: 10px;}

#resumetable .vertalign h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	}

td.top {vertical-align: top;}


#copyright {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: italic;
	color: #996600;
	text-align: center;
	width: 800px;
	margin:30px 0 0 5px;
	border: thin solid #333333;
}

#copyright a:link, #copyright a:hover, #copyright a:active, #copyright a:visited {
	color: #996600;
}

/* --------------------- footer links ----------------------------------------------------------------- */

#footerlinks {margin:5px 30px 5px 30px;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif; 
	color:#666666;
	}

	#footerlinks li { /* if your li's float, you can adjust border height w/ line-height */
	padding:0 5px 0 7px; /* adjusts the spacing between each li display and border-left */
	display: inline;
	}

#footerlinks li.first { border: none; }

#footerlinks a:link, #footerlinks a:visited { color:#333333;  font-size:.9em; text-decoration: underline;}

#footerlinks a:hover, #footerlinks a:active { color:#999999; text-decoration: none;}

#footer {
	background-image: url(images/footerhome.jpg);
	height: 81px;
	width: 813px;
	margin-top: 10px;
	border-top: thin solid #666666;
	}

/* ------------------------ header framework ------------------------ */

#active-x {height:253px;}
#header-flash { width:764px; height:598px;  margin:10px 0 0 0; padding-right:30px; background:url("../images/header-index.jpg"); }
#noflash {margin-top:10px; width:400px; height:231px;}

/* ------------------------ form elements ------------------------ */

form {
width:185px;
margin:10px 0 15px 0; /* set margin left and right below */
border:none;
}

form label	{ font-size:.95em; } 

form br { line-height:0; height:0; } /* defaults vertical spacing between fields */

input, textarea, select { 
background-color:#dba65c !important; /* to prevent highlighting by Google Toolbar */
border:0;
color:#672f06;
width:180px; /* 5 pixles smaller than form width !important */
height:18px;
line-height:18px;
vertical-align: middle;
margin-bottom:4px; /* sets vertical spacing between fields */
padding-top:1px; /* vertically position text in input/textarea field */
padding-left:4px; /* horizontally position text in input/textarea field */
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
font-size:1.0em;
}

select { width:185px; padding:0; } /* same width as form - !important */

textarea { height:90px; overflow:auto; }

#contact_business { display: none; } /* do not remove */ 


/* ------------------------ main contact form ------------------------ */

#contact-main { margin:20px auto 10px 100px; }

#contact-main label { 
width:220px; 
position:relative; 
display:block; 
text-align:right; 
margin-bottom:10px;
font-size:1.0em;
}

#contact-main label input, #contact-main label textarea, #contact-main label select { 
width:170px;
position:absolute; 
left:110%; 
top:-2px;
}

#contact-main label.required {margin-left:162px; }

#contact-main label select { width:175px; } /* fixes display issue - 5px larger than input field */

#contact-main label textarea { height:100px; overflow:auto; }

/* ------------------------ submit button form elements ------------------------ */

input.submit-contact-main { margin:95px 0 0 243px; } /* defines placement of contact-main submit button */

input.submit-image, input.submit-contact-main { /* REMOVE IF NOT USED */
background:url("images/btn-submit.jpg") no-repeat;
width:50px;
height:23px;
border:none;
cursor:pointer;
}