/* Main style sheet. If others are used, this one should be loaded first. */

/* Special styles and classes ==================================================*/
/* These two allow em to mirror px, so 1.0em = 10px */
html { font-size:62.5%; margin:auto; }
input, select, th, td { font-size:1em; }

/*Provides proper column heights on all browsers; use on containing div */
.clear:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; }
.clear { min-height: 1px; }
* html .clear { height: 1px; }


/* =========================== Standard styles ============================================================*/
body {
	background-color:black;
	font-family:"Arial Narrow", Arial, Helvetica, Sans-serif;
	color:white;
	text-decoration: none;
}

/* Unless it's supposed to get padding, it won't have any; set by ID or class unless element is listed below */
* { margin:0px; padding:0px; }
p { margin: 0px 0px .3em 0px;} /* Paragraphs need a bottom though */

/* No default sizes or weights for these. Set as needed. */
h1, h2, h3, h4, h5, h6 { font-size:1.0em; font-weight:400; }

/* Defaults images to block elements and prevents inadvertent anchor borders */
img { display:block; border:0; outline:0; }
a img { border: none; }


/* Base styling for <a> tags */
a:link { color:#176fcc; text-decoration: none; }
a:visited { color:#176fcc; text-decoration: none; }
a:hover { text-decoration: underline; }
a:active {
	color:#933;
	text-decoration: underline;
}


/* =========================== Structure and Style per section ==============================================*/

/* enclose provides an edge-to-edge background */
#enclose { background:black; width:100%; }
/* container determines the width of your page. Margins auto centers it in the browser window. */
#container { width:960px; margin:auto; background:transparent url('../images/HeaderGraphic.jpg') no-repeat; }

/* header is the top block; it contains head and mainNav */
#header { background:transparent; margin-bottom:40px;}
	#head { font-size:14px; color:white; text-align:right; padding-top:130px; padding-right:36px; margin-bottom:28px;}
	#head em { font-size:20px; font-style:normal; text-transform:uppercase; padding-left:3px; }
	#mainNav { margin-left:220px; } /* Pushes it to the right to fit background image */
	#mainNav ul {  }
	#mainNav li { list-style:none; display:inline; }
	#mainNav li a { height:57px; float:left; text-indent:-9999px; border:0; outline:none }
	#mainNav a, #mainNav a:hover { text-decoration:none }
	/* Buttons are different widths, have unique bg images */
	#mainNav li a.first { margin-right:180px; } /* Special one to push others right until more are added */
	#mainNav a.navWork { width:112px; background:url('../images/nav_work.png') no-repeat 0 0; }
	#mainNav a.navBio { width:113px; background:transparent url('../images/nav_bio.png') no-repeat 0 0; }
	#mainNav a.navContact { width:141px; background:transparent url('../images/nav_contact.png') no-repeat 0 0; }
	#mainNav a.navOther { width:176px; background:transparent url('../images/nav_other.png') no-repeat 0 0; }
	#mainNav a.navFreelance { width:166px; background:transparent url('../images/nav_freelance.png') no-repeat 0 0; }

	#mainNav a.navWork:hover, #mainNav a.navBio:hover, #mainNav a.navContact:hover, 
		#mainNav a.navOther:hover, #mainNav a.navFreelance:hover { background-position:0 -57px; }
	
	#mainNav a.selected { background-position:0 -57px; cursor:default; }

/* content is the middle block, under header and above footer. It may not require further styling. */
#content {   }

/* These position the individual item blocks */
.workBlock { margin-bottom:0px; }
.workBlock ul { margin-bottom:10px; }
.workBlock li { list-style:none; display:inline; float:left; margin-right:18px; margin-bottom:40px; }
.workBlock li div.caption { width:302px; height:48px; background:url('../images/WrapperBottom.jpg') no-repeat 0 0 }
.workBlock li h1 { font-size:14px; font-weight:700; color:white; text-transform:uppercase; padding:4px 1px 2px 10px; } /* Style for preview image titles */
.workBlock li p { color:#999999; font-size:12px; padding:1px 1px 2px 10px } /* Style for preview image text */
.workBlock li a { text-decoration:none; cursor:pointer; border:0; outline:none; }

/* BIO content styling */
#bio {
	font-size:18px;
	text-decoration: none;
}
#bio img {display:inline; margin-right:20px; float:left; padding-left:78px;}
#bio p {float:left; width:510px; padding-top:30px;  background:transparent;}
/* OTHER STUFF content styling */
#otherStuff { font-size:14px; font-family:Arial, Helvetica, Sans-serif }
/* Styling starts same as workBlock, but without the black panel in Caption. Change as desired */
.stuffBlock { margin-bottom:20px; }
.stuffBlock ul { margin-bottom:10px; }
.stuffBlock li { list-style:none; display:inline; float:left; margin-right:18px; margin-bottom:40px; }
.stuffBlock li h1 { font-size:14px; font-weight:700; color:white; text-transform:uppercase; padding:4px 1px 2px 10px; } /* Style for preview image titles */
.stuffBlock li p { color:#999999; font-size:12px; padding:1px 1px 2px 10px } /* Style for preview image text */
.stuffBlock li a { text-decoration:none; cursor:pointer; border:0; outline:none; }
.stuffBlock li div.caption { background: yellow}

/* BIO2 content styling */
#bio2 {
	font-size:30px;
	text-decoration: none;
}
#bio2 p {padding-LEFT:330px;  width:500px;  background:transparent;}


#footer { font-size:14px; padding-bottom:20px; background:black; color:#CCCCCC; text-align:center}


/* Additional styles */
#features { font-size:11px; line-height:16px; }
#features h1 { font-size:13px; line-height:1.2em; margin-bottom:4px;  font-weight:700;}

#featureHead { margin-bottom:20px; padding: 6px 12px 5px 12px; border-bottom: 1px solid #bfcad3; background:#eef1f6; }
#featureHead h1 { font-size:16px; color:#091c30; font-weight:700; }

/* =============== Put LIGHTBOX style changes and additions here, rather than editing lightbox.css, using same ID and class names */
#lightbox img { display:inline; }
#outerImageContainer { background:#000000}