/*	Handcraft - Master Screen Style Sheet
============================================================================ */

/*	Reset
---------------------------------------------------------------------------- */

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend, input, select, textarea,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-weight: normal;
		font-style: normal;
		font-size: 100%;
		font-family: inherit;
		vertical-align: baseline;
		text-decoration: none;
	}
	:focus { outline: 0; }
	body { line-height: 1; color: black; background: white; }
	ol,ul { list-style: none; }
	table { border-collapse: separate; border-spacing: 0; }
	caption, th, td { text-align: left; font-weight: normal; }
	blockquote:before, blockquote:after, q:before, q:after { content: ""; }
	blockquote, q { quotes: "" "";}
	em, i { font-style: italic; }
	strong, b { font-weight: bold; }
	label { cursor:pointer; }
	hr { display: none; }
	img { display: block; }

/*	Global Classes
---------------------------------------------------------------------------- */

	.hidden { display: none; }
	.invisible { visibility: hidden; }
	.clear { clear: both; }
	.clear-right { clear: right; }
	.clear-left { clear: left; }
	.float-left { float: left; }
	.float-right { float: right; }
	.matte { border: 1px solid #DDD; padding: 4px; }
	.img-left { float: left; padding: 0 20px 20px 0; }
	.img-left-no-bottom { float: right; padding: 0 20px 0 0; }
	.img-left-sm { float: left; padding: 0 10px 10px 0; }
	.img-right { float: right; padding: 0 0 20px 20px; }
	.img-right-no-bottom { float: right; padding: 0 0 0 20px; }
	.img-right-sm { float: right; padding: 0 0 10px 10px; }
	.bold { font-weight: bold; }
	.italic { font-style: italic; }
	.lowercase { text-transform: lowercase; }
	.uppercase { text-transform: uppercase; }
	.capitalized { text-transform: capitalize; }
	.smallcaps { font-variant: small-caps; }
	.text-left { text-align: left; }
	.text-right { text-align: right; }
	.text-center { text-align: center; }
	.text-justify { text-align: justify; }
	.inline { display: inline; }
	.block { display: block; }

/*	Typography
---------------------------------------------------------------------------- */
	
	/* General */
	body { font-size: 75%;}
	html>body { font-size: 12px; }
	
	/* Font Families*/
	.sans-serif { font-family: Helvetica, Arial, "Lucida Grande", Verdana, sans-serif; }
	.serif { font-family: "Times New Roman", Times, Georgia, serif; }
	.monospace { font-family: Monaco, "Andale Mono", Courier, "Courier New", monospace; }
	
	/* Headlines */
	h1 { font-size: 3.333em;  line-height: 1.000em;  margin: 0 0 .5em 0; }
	h2 { font-size: 2.499em;  line-height: 0.666em;  margin: 0.666em 0;  }
	h3 { font-size: 1.666em;  line-height: 1.000em;  margin: 0 0 1em 0;  }
	h4 { font-size: 1.249em;  line-height: 1.333em;  margin: 1.333em 0;  }
	h5 { font-size: 1.249em;  line-height: 1.333em;  margin: 1.333em 0;  }
	h6 { font-size: 1.249em;  line-height: 1.333em;  margin: 1.333em 0;  }
	h1,h2,h3,h4,h5,h6 { color: #000; }
	
	/* Paragraphs and Body Copy */
	p,q { color: #555; font-size: 1em; line-height: 1.666em; margin: 1.666em 0 20px 0; overflow: hidden; clear: both; }

	embed { margin: 0 0 20px 0; }

	small, .small { font-size:0.8333em; line-height: 2em; }
	big { } /* Note: Any size above 1.666em currently creates 1px increase in line height. Bug? */
	.footnote { margin: .25em 0; font-size: .833em; line-height: 1.66em; }

	hr { display: block; color:#DDD; background:#DDD; height: 1px; border: none; margin: -1px 0 0 0; clear:both; overflow: hidden; }
	
	/* Links */
	a { color: #2E7E9F; text-decoration: underline; }
	a:hover { color: #3FAFDD; }
	
	/* Quotations and Cites */
	blockquote { margin: 0 1.666em; }
	blockquote cite { display: block; margin: 0.833em 0 0 0; }
	cite { font-style: italic; }
	
	/* Monospaced */
	code, pre, kbd, tt, samp, var { margin: 1.666em 0; font-size: 1em; line-height: 1.666em; color: #222; font-family: Monaco, "Andale Mono", Courier, "Courier New", monospace; }
	code { background: #eee; }
	pre { background: #eee; }
	
	/* Lists */
	ul,ol,li,dl,dd,dt { color: #555; font-size: 1em; line-height: 1.666em; margin: 1.666em 0; }
	ul ul, ul ol, ol ul, ol ol { margin: 0; }
	ul { list-style:disc; }
	ul.none { list-style:none; }
	ol { list-style: decimal; }
	ol li, ul li, dd { margin: 0 0 0 1.666em; }
	dd,dt { color: #555; font-size: 1em; line-height: 1.666em; margin:0; }

	/* Tables */
	table { color: #555; font-size: 1em; line-height: 1.666em; margin: 1.666em 0; width:100%; }
	table caption { }
	table thead {}
	table tbody {}
	table tfoot {}
	tr { }
	th { font-size: 1em; line-height: 1.666em; margin: 1.666em 0; padding: 0 1.666em 0 0; font-weight:bold; color:#333; }
	td { font-size: 1em; line-height: 1.666em; margin: 1.666em 0; padding: 0 1.666em 0 0; }
	
	/* Accronyms and Abbreviations */
	abbr, acronym { cursor: help; text-transform: lowercase; font-variant: small-caps; font-size: 1.166em; font-style: italic; line-height: 1em; letter-spacing: 0.083em; }
	
	/* Deletions and Insertions */
	del { color: #999; text-decoration: line-through; }
	ins { color: #222; }
	del, ins { cursor: help; }
	
	/* Subscript and Superscript */
	sub { position: relative; top: 0.5em; font-size: 0.8333em; }
	sup { position: relative; bottom: 0.5em; font-size: 0.8333em; }
	
	/* Definition */
	dfn { font-style: italic; cursor: help; }

/*	Navigation
---------------------------------------------------------------------------- */

	/* Horizontal */
	ul#nav-horiz { clear: both; list-style: none; overflow: hidden; background: #000; margin: 0; }
	ul#nav-horiz li { display: block; float: left; margin: 0 0.833em 0 0; }
	ul#nav-horiz li a { color: #FFF; display: block; float: left; height: 2.499em; line-height: 2.499em; padding: 0 0.833em; }
	ul#nav-horiz li a:hover, ul#nav-horiz li.selected a { color: #FFF; }
	/* ul#nav-horiz > li:last-child { margin: 0; } /* Note: Not Supported in -IE6 */
	
	/* Vertical */
	ul#nav-vert { clear: both; overflow: hidden; list-style: none; margin: 0; }
	ul#nav-vert li { display: block; float: left; margin: 0; clear: left; }
	ul#nav-vert li a { color: #000; float: left;  display: block; height: 20px; line-height: 20px; padding: 0; }
	ul#nav-vert li a:hover, ul#nav-vert li.selected a { background: #000; color: #FFF; }
	/* ul#nav-vert > li:last-child { margin: 0; } /* Note: Not Supported in -IE6 */

/*	Forms
---------------------------------------------------------------------------- */

	form { margin: 0 0 1.666em 0; }
	form legend { display: none; }	
	form dl { margin: 0; padding: 0; }
	form dl dt, form dl dd { float: left; padding: 0; margin: 0; overflow: hidden; margin: 0 0 0.833em 0; }
	form dl dt { clear: left; }
	form dl dt label { padding: 0 1.666em 0 0; display: block; width: 12em; float: left; font-size: 1em; line-height: 1.666em; }	
	form dl dt label span.req { color: #D23A3A; }	
	form dl dd input, form dl dd textarea, form dl dd select { background: #222; color: #FFF; width: 300px; }
	form dl dd input:focus, form dl dd textarea:focus { background: #999; color: #FFF;}
	form dl dd input { display: block; float: left; height: 1.666em; line-height: 1.666em;  }	
	form dl dd select { height: 1.666em; }
	form dl dd select:focus option.message { display: none; }	
	form dl dd textarea { line-height: 1.666em; height: 4.666em; }
	/* form dl > dd:last-child, form dl > dt:last-child { margin: 0; } /* Note: Not Supported in -IE6 */
	
	/* Validation Errors */
	form dl dd label.error { width: 280px; display: block; clear: both; background: #D23A3A; font-size: 0.8333em; line-height: 2em; padding: 0 10px 0 10px; color: #FFB9B9; }
	
	/* Buttons and Submit Inputs */
	form dl dd.submit { clear: both; overflow: hidden; padding: 0 0 0 13.666em; }
	button, input.submit { line-height: 2.499em; height: 2.499em; padding: 0 0.833em; width: auto; float: left; }
	
/*	Columns
---------------------------------------------------------------------------- */
	
	/* Column Container */
	div.column_container_top, div.column_container { clear: both; overflow: hidden; margin: 0; padding: 0; }
	
	/* Two Column */
	div.twocol_left_column, div.twocol_right_column { margin: 0 0 0 0; float: left; width: 270px; }
	div.twocol_left_column { margin: 0 40px 0 0; width: 310px; }
	
	/* Four Column */
	div.fourcol_one_column, div.fourcol_two_column, div.fourcol_three_column, div.fourcol_four_column { margin: -20px 20px 0 0; float: left; width: 150px; }
	div.fourcol_four_column { margin: -20px 0 0 0; }
	
/*	Gallery
---------------------------------------------------------------------------- */
	ul.gallery { float: left; margin: 20px -20px -20px 0; padding: 0 0 0 0; clear: both; overflow: hidden; }
	ul.gallery li { float: left; margin: 0 20px 20px 0; list-style: none; }
	ul.gallery li img { display: block; }
	
/*	Layout
---------------------------------------------------------------------------- */

	body { background: #FFF ; padding: 0 0 40px 0; }
	
	div#wrapper { overflow: hidden; clear: both; width:840px; margin: 0 auto 0 auto; padding: 0; background: #FFF; }
	div#header { overflow: hidden; clear: both; float: left; width: 840px; padding: 80px 0 0 0; border-bottom: 2px solid #000; }
	div#content { overflow: hidden; clear: both; width: 840px; float: left; }
	
	div.left { float: left; width: 160px; }
	div.right { float: left; width: 620px; }
	
	div#work { overflow: hidden; clear: both; width: 840px; padding: 0; }
	
	div.work-item, div.work-item-video   { position:relative; padding: 20px 0 60px 0; overflow: hidden; clear: both; width:840px; border-bottom: 1px solid #000; margin: 0; }
	div.work-item img { width: 680px; }
	div.work-item .info img { width:auto; }

	
	div.work-item-video div.right, div.work-item div.right { background: #000; width: 680px; height: 500px; position: relative; overflow: hidden; }
	div.right div.work { width: 680px; }
	
	div.work-item-video div.right { height: 380px; }
	div#fridaynightlive.work-item-video div.right { height:230px; }
	div.right div.info { z-index: 100; position: absolute; display: block; top: -500px; left: 0; width: 600px; background: rgba(0, 0, 0, 0.85); padding: 40px; }
	div.right div.info h4 { margin: 0 0 5px 0; }
	div.right div.info p { color: #FFF; font-size: 12px; display: block; margin: 0 auto; line-height: 20px; }
/*
Black Text on White Variation
div.right div.info { z-index: 100; position: absolute; display: block; top: -500px; left: 0; width: 600px; background: rgba(255, 255, 255, 0.9); padding: 40px; }
div.right div.info p { color: #000; font-size: 12px; display: block; margin: 0 auto; line-height: 20px; }

Red Variation
div.right div.info { z-index: 100; position: absolute; display: block; top: -500px; left: 0; width: 600px; background: rgba(125, 10, 10, 0.85); padding: 40px; }
*/

	div.left p { margin: 0 20px 0 0; }
	div.left ul { margin: 0; }
	div.left ul li { margin: 0; list-style: none; color: #999; }
	div.left ul.links { margin: 20px 0 0 0; }
	div.left ul.links li a { position: relative; height: 20px; float: left; clear: both; }
	li.on a { height: 20px; display: block; float: left; background: #d0473c; color: #FFF; text-decoration: none; padding: 0 4px;}
	li.on a:hover { background: #000; color: #FFF; }
	
	div.work-item div.left p,
	div.work-item div.left h3 { width:140px; }

	h1 { font-size: 18px; clear: both; overflow: hidden; font-weight: bold; padding: 2px 0 36px 0; margin: 0; line-height: 20px; letter-spacing: 4px} 
	h2 { font-family: Georgia, Times, "Times New Roman"; width: 680px; font-size: 16px; clear: both; overflow: hidden; padding: 0 0 18px 0; line-height: 20px; margin: 0; color: #777; }
	h3 { margin: 0; font-size: 12px; font-weight: bold; line-height: 20px; width: 640px; background: #FFF; color: #000; }
	h4 { margin: 0 0 20px 0; color: #FFF; }
	
	p  { font-size: 12px; color: #777; margin: 0 0 20px 0; line-height: 20px; }
	
	a  { color: #007fc1; }
	a:hover  { color: #000; }
	a.return-to-top { position:absolute; left:0px; bottom:50px; display:block; width:80px; height:20px; }
	
	dl { margin: 0; }
	dt img { height: 200px; width: 270px; }
	dd { margin: 0 0 20px 0; color: #999; font-size: 11px; padding: 2px 5px; line-height: 20px; text-align: center; font-style: italic; }

	div#ambient { display:block; padding: 30px 0px 20px 0px; background: #cbf688; color:#000; text-decoration: none; }
	div#ambient h2 { margin:0 auto; padding:0; width:840px; line-height:1.4; color:#000; }
	div#ambient p { margin:0 auto; padding:0; width:840px; color:#000; }
	div#ambient a { display:block; margin: 20px auto 10px; padding:0; width:840px; color:#000; }



/*	Contact
---------------------------------------------------------------------------- */
	div#contact { overflow: hidden; clear: both; margin: 20px 0; width: 840px; }
	
	#contact input,
	#contact textarea { border: 1px solid #333; padding: 2px 3px; }
	#contact input:focus,
	#contact textarea:focus { border: 1px solid #000; background:#f4f0dc;  }

	#contact fieldset { overflow:hidden; clear:both; margin: 0 0 20px 0; }
	#contact fieldset p { margin: 0.33em 0; }
	#contact fieldset p strong { margin: 0; font-size: 14px; font-weight: bold; color:#000; }
	#contact fieldset span.required { color:#ccc; }

	#contact fieldset.simple ul { position:relative; margin:0; border:0px; padding:0; width:678px; }
	#contact fieldset.simple li { float:left; clear:left; margin:0; padding:0; width:220px; list-style:none; }
	#contact fieldset.simple li label { display:block; clear:both; color:#333; }
	#contact fieldset.simple li input { padding: 2px 4px; width:220px; }

	#contact fieldset.simple li.textarea { position:absolute; right:0px; top:0px; clear:none; width:400px; height:160px; }
	#contact fieldset.simple li.textarea textarea { padding:4px; width:392px; }

	#contact fieldset.simple li#captcha-field { margin: 20px 0; }
	#contact fieldset.simple li#captcha-field label { color:#839fb4; }
	#contact fieldset.simple li#captcha-field .important { line-height:1.2; font-size:1.25em; color:#254a65; }
	#contact fieldset.simple li#captcha-field input { border: 1px solid #254a65; width:auto; background:#b4cad8; }

	#contact fieldset#file-upload {  margin: 20px 0px 10px 0px; border: 1px solid #aaa; padding:4px; width:392px; background:#eee; }
	#contact fieldset#file-upload label { display:block; margin: 0 0 0.5em 0; color:#777; font-size:0.875em; line-height:1.2; }
	#contact fieldset#file-upload label strong { color:#555; }

	#contact fieldset input#submit { display:block; clear:both; margin: 0px 0 0 0; background:#ddd; }

	#contact fieldset label.error,
	#contact fieldset.simple li#captcha-field label.error { background: #d0473c; color:#FFF; text-decoration: none; margin: 4px 0 6px 0; padding: 0 5px; width:220px; }

/*	Footer
---------------------------------------------------------------------------- */
	#footer { display:block; clear:both; border-top: 1px solid #000; }
	#footer p { margin: 10px 10px 10px 160px; font-size:0.875em; color:#333; }

/* Img
---------------------------------------------------------------------------- */
	#lbOverlay { position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: #FFF; cursor: pointer; }
	#lbCenter, #lbBottomContainer { position: absolute; z-index: 9999; overflow: hidden; background-color: none; }
	.lbLoading { background: url(/images/loading.gif) no-repeat center; }
	#lbImage { position: absolute; left: 0; top: 0; border: none; background-repeat: no-repeat; }
	#lbPrevLink, #lbNextLink { display: block; position: absolute; top: 0; width: 50%; outline: none; }
	#lbPrevLink { left: 0; }
	#lbPrevLink:hover { background: transparent url(prevlabel.gif) no-repeat 0 15%; }
	#lbNextLink { right: 0; }
	#lbNextLink:hover { background: transparent url(nextlabel.gif) no-repeat 100% 15%; }
	#lbBottom { display: none; font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; font-size: 10px; color: #666; line-height: 1.4em; text-align: left; border: 10px solid #fff; border-top-style: none; }
	#lbCloseLink { display: block; float: right; width: 66px; height: 22px; background: transparent url(closelabel.gif) no-repeat center; margin: 5px 0; outline: none; }
	#lbCaption, #lbNumber { margin-right: 71px; }
	#lbCaption { font-weight: bold; }

/* IE Bars
---------------------------------------------------------------------------- */
	div#ie-upgrade { display:block; margin: 40px auto 0px; padding:20px; width:800px; background: #d0473c; color:#000; text-decoration: none; }
	div#ie-upgrade h2 { margin:0; padding: 0 0 5px 0; font-size:1.66em; line-height:1; color:#fff; }
	div#ie-upgrade p { margin:0; padding:0; color:#000; }
	div#ie-upgrade a { color:#fff; }
	
	div#work div.right { display: none; }
	div#work div.right div.info { display: none; }
	a.media,a.more { display: inherit; }


/* No Javascript
---------------------------------------------------------------------------- */
	noscript { display:block; margin: 40px 40px 0px 40px; background: #d0473c; color:#FFF; text-decoration: none; padding:5px; }