/* Credits

   Copyright (c) 2008 Greg Haydu

   Blueprint CSS Framework 0.7.1
   http://blueprintcss.googlecode.com
   Copyright (c) 2007-2008
   
   Son of Suckerfish Dropdowns
   By Patrick Griffiths and Dan Webb
   http://htmldog.com/articles/suckerfish/dropdowns/
   
   IE5.5+ PNG Alpha Fix
   (c) 2004-2008 Angus Turnbull http://www.twinhelix.com
   

TABLE OF CONTENTS
	-Fixes, hacks, etc
	-Reset
	-Layout
	-Nav
	-Typography
	-Images/Flash
	-Forms
	
*/


/*Fixes, hacks, etc
=============================================================*/

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/*Reset
=============================================================*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

body { 
  line-height: 1.5; 
}

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img { border: none; }



/*Layout
=============================================================*/

body {
	background: #000 url(../images/bg.jpg) no-repeat center 84px;
}

#logo {
	margin: 0 auto;
	display: block;
}

div#content {
	position: relative;
	background: url(../images/content_bg2.jpg) no-repeat 0 0;
	width: 850px;
	margin: 0 auto;
	padding: 0 0 0 0;
	text-align: left;
}

#leftCol {
	width: 380px;
	float: left;
	display: inline;
	margin: 15px 0 30px 30px;
}

#rightCol {
	width: 380px;
	height: 240px;
	float: right;
	display: inline;
	margin: 15px 30px 30px 0;
}

div#links {
	height: 37px;
	margin: 0 0 30px 30px;
	width: 790px;
	clear: both;
}

p#footer {
	font: 11px/14px Verdana, Arial, Helvetica, sans-serif;
	color: #9ba3ba;
	background: url(../images/footer_hr.jpg) no-repeat center 0;
	margin: 0 auto;
	padding: 15px 0 30px 0;
	text-align: center;
	clear: both;
}



/*Nav
=============================================================*/

#nav { 
	background: url(../images/nav.jpg) no-repeat 0 0;
	padding: 0 0 0 74px;
	margin: 0 0 0 0;
}

#nav a { 
	display: block;
	float: left;
	height: 37px;
	margin: 1px 0 0 0;
}

#nav a.about { 
	background: url(../images/nav.jpg) no-repeat -74px 0;
	height: 37px;
	width:145px;}
#nav a.about:hover { background-position: -74px -37px;}

#nav a.portfolio { 
	background: url(../images/nav.jpg) no-repeat -219px 0;
	height: 37px;
	width:153px;}
#nav a.portfolio:hover { background-position: -219px -37px;}

#nav a.artwork { 
	background: url(../images/nav.jpg) no-repeat -372px 0;
	height: 37px;
	width:139px;}
#nav a.artwork:hover { background-position: -372px -37px;}

#nav a.resume { 
	background: url(../images/nav.jpg) no-repeat -511px 0;
	height: 37px;
	width:127px;}
#nav a.resume:hover { background-position: -511px -37px;}

#nav a.contact { 
	background: url(../images/nav.jpg) no-repeat -638px 0;
	height: 37px;
	width:137px;}
#nav a.contact:hover { background-position: -638px -37px;}

div#links a {
	margin: 30px;
	width: 228px;
	height: 37px;
	display: block;
	float: left;
	margin: 0 53px 0 0;
}

div#links a.youtube {background: url(../images/btn_youtube.jpg) no-repeat 0 0;}
div#links a.youtube:hover {background: url(../images/btn_youtube.jpg) no-repeat 0 -37px;}

div#links a.imdb {background: url(../images/btn_imdb.jpg) no-repeat 0 0;}
div#links a.imdb:hover {background: url(../images/btn_imdb.jpg) no-repeat 0 -37px;}

div#links a.vimeo {background: url(../images/btn_vimeo.jpg) no-repeat 0 0;}
div#links a.vimeo:hover {background: url(../images/btn_vimeo.jpg) no-repeat 0 -37px;}



/*Typography
=============================================================*/

h1 {
	margin: 0 0 0 30px;
	font: normal 28px/52px Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
}

h2 {
	margin: 24px 0 16px 0;
	font: normal 18px/18px Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
}

h3 {
	margin: 16px 0 0 0;
	font: normal 15px/15px Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
}

#leftCol p {
	font: 12px/16px Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
	margin: 8px 0;
}

#leftCol ul {
	padding-left: 16px;
}

#leftCol ul li {
	font: 12px/16px Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
	margin: 8px 0;
}


/*Images/Flash
=============================================================*/

#rightCol img {
	border: 1px solid #777;
}

#flash_header {
	margin: 0 0 0 1px;
}


/*Video
=============================================================*/

ul.video {
	margin: 10px 0 30px 30px;
	height: 386px;
	overflow: scroll;
	list-style:none;
	width: 790px;
	border:1px solid #777;
	padding-bottom: 34px;
	/*single column
	height: 503px;
	width:191px;
	padding-bottom: 10px;
	*/
}

.video li {
	float:left;
	margin:34px 0 0 34px;
	width:150px;
	height:150px;
}
.video a {
	display:block;
	overflow:hidden;
	float:left;
	margin:0px;
	width:150px;
	height:150px;
	border:1px solid #777;
	opacity: .5;
	filter: alpha(opacity=50);
}

.video a:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}

/*Forms
=============================================================*/

label       { font-weight: bold; }
fieldset    { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend      { font-weight: bold; font-size:1.2em; }


/* Form fields (for text fields, use class .title or .text)*/

input.text, input.title,
textarea, select {
  margin:0.5em 0;
  border:1px solid #bbb;
}

input.text:focus, input.title:focus,
textarea:focus, select:focus {
  border:1px solid #666;
}

input.text, 
input.title   { width: 300px; padding:5px; }
input.title   { font-size:1.5em; }
textarea      { width: 390px; height: 250px; padding:5px; }


/* Success, notice and error boxes*/

.error,
.notice, 
.success    { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; }

.error      { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }
.notice     { background: #FFF6BF; color: #514721; border-color: #FFD324; }
.success    { background: #E6EFC2; color: #264409; border-color: #C6D880; }
.error a    { color: #8a1f11; }
.notice a   { color: #514721; }
.success a  { color: #264409; }