/* Portions of the CSS are from Blueprint: http://www.blueprintcss.org/ */

/* -------------------------------------------- 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 {
	background-color: #fafafa;
	font-size: 11px;
	line-height: 1.5;
	color: #444;
	font-family: Lucida Grande, Lucida Sans, Lucida Sans Unicode, sans-serif ;
}

/* 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 border on linked images. */
a img { border: none; }

/* -------------------------------------------- GRID -------------------------------------------- */

/* A container should group all your columns. */
.container {
	width: 947px;
	margin: 0 auto;
}

/* Sets up basic grid floating and margin. */
.column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5,
div.span-6, div.span-7, div.span-8, div.span-9, div.span-10,
div.span-11, div.span-12 {
	float: left;
	margin-right: 25px;
}

.last, div.last { margin-right: 0; }

.span-1  { width: 56px;}
.span-2  { width: 137px;}
.span-3  { width: 218px;}
.span-4  { width: 299px;}
.span-5  { width: 380px;}
.span-6  { width: 461px;}
.span-7  { width: 542px;}
.span-8  { width: 623px;}
.span-9  { width: 704px;}
.span-10 { width: 785px;}
.span-11 { width: 866px;}
.span-12, div.span-12 { width: 947px; margin: 0; }

.append-1  { padding-right: 81px;}
.append-2  { padding-right: 162px;}
.append-3  { padding-right: 243px;}
.append-4  { padding-right: 324px;}
.append-5  { padding-right: 405px;}
.append-6  { padding-right: 486px;}
.append-7  { padding-right: 567px;}
.append-8  { padding-right: 648px;}
.append-9  { padding-right: 729px;}
.append-10 { padding-right: 810px;}
.append-11 { padding-right: 891px;}

.prepend-1  { padding-left: 81px;}
.prepend-2  { padding-left: 162px;}
.prepend-3  { padding-left: 243px;}
.prepend-4  { padding-left: 324px;}
.prepend-5  { padding-left: 405px;}
.prepend-6  { padding-left: 486px;}
.prepend-7  { padding-left: 567px;}
.prepend-8  { padding-left: 648px;}
.prepend-9  { padding-left: 729px;}
.prepend-10 { padding-left: 810px;}
.prepend-11 { padding-left: 891px;}


/* Border on right hand side of a column. */
.border {
	padding-right: 11.5px;
	margin-right: 12.5px;
	border-right: 1px solid #eee;
}

/* Border with more whitespace, spans one column. */
.colborder {
	padding-right:46.5px;
	margin-right:43.5px;
	border-right: 1px solid #eee;
}

.pull-1 { margin-left: -81px;}
.pull-2 { margin-left: -162px;}
.pull-3 { margin-left: -243px;}
.pull-4 { margin-left: -324px;}
.pull-5 { margin-left: -405px;}
.pull-6 { margin-left: -486px;}
.pull-7 { margin-left: -567px;}
.pull-8 { margin-left: -648px;}
.pull-9 { margin-left: -729px;}
.pull-10 { margin-left: -810px;}
.pull-11 { margin-left: -891px;}
.pull-12 { margin-left: -972px;}

.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12 {float:left;position:relative;}

.push-1 { margin: 0 -81px 1.5em 81px;}
.push-2 { margin: 0 -162px 1.5em 162px;}
.push-3 { margin: 0 -243px 1.5em 243px;}
.push-4 { margin: 0 -324px 1.5em 324px;}
.push-5 { margin: 0 -405px 1.5em 405px;}
.push-6 { margin: 0 -486px 1.5em 486px;}
.push-7 { margin: 0 -567px 1.5em 567px;}
.push-8 { margin: 0 -648px 1.5em 648px;}
.push-9 { margin: 0 -729px 1.5em 729px;}
.push-10 { margin: 0 -810px 1.5em 810px;}
.push-11 { margin: 0 -891px 1.5em 891px;}
.push-12 { margin: 0 -972px 1.5em 972px;}

.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12 {float:right;position:relative;}

/* In case you need to add a gutter above/below an element */
.prepend-top {
	margin-top:1.5em;
}
.append-bottom {
	margin-bottom:1.5em;
}

/* Use a .box to create a padded box inside a column.  */
.box {
	padding: 1.5em;
	margin-bottom: 1.5em;
	background: #E5ECF9;
}

/* Use this to create a horizontal ruler across a column. */
hr {
	background: #ddd;
	color: #ddd;
	clear: both;
	float: none;
	width: 100%;
	height: .1em;
	margin: 0 0 1.45em;
	border: none;
}
hr.space {
	background: #fff;
	color: #fff;
}

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
	content: "\0020";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	overflow:hidden;
}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }

/* ----------------------------------------- TYPOGRAPHY ----------------------------------------- */

h1#tyson_tate {
	height: 150px;
	width: 900px;
	
	margin: 95px auto 75px;
	
	text-indent: -9000px;
	background: transparent url('images/tyson_tate_h1.gif') no-repeat top center;
}

h1#tyson_tate_small {
	border-bottom: 1px dotted #d0d0d0;
	
	margin: 0 0 40px;
}
h1#tyson_tate_small a {
	display: block;
	height: 54px;
	width: 947;
	
	text-indent: -9000px;
	background: transparent url('images/tyson_tate_h1_small.gif') no-repeat top left;
}
h1#tyson_tate_small:hover a {
	background-position: 0 -53px;
}

h2#web_work,
h2#print_work,
h2#other_work,
h2#coming_soon {
	height: 22px;
	margin: 40px 0 15px;

	text-indent: -9000px;
	background-position: top left;
	background-repeat: no-repeat;
	
	border-bottom: 1px dotted #d0d0d0;
}

h2#web_work {
	background-image: url('images/h2_web_work.gif');
}

h2#print_work {
	background-image: url('images/h2_print_work.gif');
}

h2#other_work {
	background-image: url('images/h2_other_work.gif');
}

h2#coming_soon {
	background-image: url('images/h2_coming_soon.gif');
}

h2#detail_title {
	color: #e1af00;
	font-size: 60px;
	line-height: 1.2;
	margin-bottom: 30px;
}

h2, h3,h4,h5,h6 { font-family: Georgia, Times, 'Times New Roman', serif; }

h2 { font-size: 26px; line-height: 1.4; margin-bottom: 0.75em; }
h3 { font-size: 20px; line-height: 1.4; margin-bottom: 4px; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }

h2 img, h3 img, h4 img, h5 img, h6 img {
	margin: 0;
}

/* Text elements
-------------------------------------------------------------- */

p           { margin: 0 0 1.5em; }
p img.left  { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }

a:focus,
a:hover     { color: #000; }
a           { color: #009; text-decoration: underline; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
sup, sub    { line-height: 0; }

abbr,
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 1.5em; font-style: italic; }
del         { color:#666; }

pre 		{ margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }


/* Lists
-------------------------------------------------------------- */

li ul,
li ol       { margin:0 1.5em; }
ul, ol      { margin: 0 1.5em 1.5em 1.5em; }

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}

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

.small      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.hide       { display: none; }

.quiet      { color: #888; }
.loud       { color: #333; }
.highlight  { background:#ff0; }
.added      { background:#060; color: #fff; }
.removed    { background:#900; color: #fff; }

.first      { margin-left:0; padding-left:0; }
.last       { margin-right:0; padding-right:0; }
.top        { margin-top:0; padding-top:0; }
.bottom     { margin-bottom:0; padding-bottom:0; }

/* ------------------------------------------ GENERAL ------------------------------------------- */

#skip {
	position: absolute;
	top: -1000em;
}

/* ----------------------------------------- HOME PAGE ------------------------------------------ */

ul.work_items {
	margin: 0;
	list-style: none;
	padding: 0;
}

ul.work_items li {
	margin-bottom: 40px;
}

ul.work_items li.first {
	clear: left;
}

ul.work_items li img.thumbnail {
	border: 5px solid #ddd;
	margin-bottom: 5px;
}

ul.work_items li a:hover img.thumbnail {
	border-color: #bbb;
}

ul.work_items li h3 a {
	color: #444;
	text-decoration: none;
}

ul.work_items li h3 a:hover {
	color: #009;
	text-decoration: underline;
}

/* ---------------------------------------- DETAIL PAGES ---------------------------------------- */

ul.project_details {
	float: left;
	border-top: 1px dotted #d0d0d0;
	list-style: none;
	margin: 0 0 40px;
}

ul.project_details:after {
	content: "\0020";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	overflow: hidden;
}

ul.project_details li {
	position: relative;
	float: left;
	padding: 5px 5px;
	width: 463px;
	border-bottom: 1px dotted #d0d0d0;
	margin-bottom: -1px;
}

ul.project_details li span.label {
	float: left;
	width: 5em;
	padding-right: 13px;
	text-align: right;
	font-weight: bold;
}

ul.project_details li.borderfix.odd {
	display: none;
}

/* Project images */

ul.project_images {
	position: relative;
	list-style: none;
	margin: 0;
}

ul.project_images li {
	float: left;
}
ul.project_images li.odd {
	margin-right: 25px;
}

ul.project_images li img {
	border: 5px solid #eee;
	margin: 0 0 20px;
	width: 289px;
}

ul.project_images li p.caption {
	font-style: italic;
	margin: -25px 0 20px;
	padding: 5px 15px 10px;
	background-color: #eee;
}

/* ------------------------------------------- FOOTER ------------------------------------------- */

#footer {
	margin-top: 20px;
	padding: 10px 0 20px;
	border-top: 1px dotted #ddd;
}