@charset "UTF-8";
/* CSS Document */




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,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
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: "" "";
}


body { background-image:url(../images/bg.jpg); background-repeat:repeat; background-color:#000; color:#FFF; padding-left:40px; padding-top:0px; margin-top:0px; }

a {text-decoration:underline; color:#FFF; }
a:hover { color:#d7d7d7;}

.mainContainer {
	
	font-family:Georgia, Garamond, "Times New Roman", Times, serif;
	color:#FFF;
	
}

.header { background-image:url(../images/header.jpg); background-repeat:no-repeat;
	width:444px;
	height:156px;
	text-indent:-9999px;
}

.mainHeader{ 
	height:230px;
	margin-top:-28px;
	padding-bottom:64px;
	
}
.topBlockContainer {
	margin:0 10px 0 0;
	padding:0 0 0 0;
	float:left;
}
.topBlock {
	
	width:308px;
	float:left;
	background-color:#000;
	height:240px;
	padding:0px 12px 20px 12px;
}

.topBlock h1 {
	font-size:40px;
	line-height:24px;
	 margin-top:22px; margin-bottom:16px;
}

.topBlock p {
	font-size:13px;
	line-height:20px;
	color:#9d9d9d;
	letter-spacing:.02em;
	padding-bottom:.8em;
	
}

.titleWho { text-indent:-9999px; background-image:url(../images/titleWho.gif); background-repeat:no-repeat; display:block; height:34px; }
.titleWhat { text-indent:-9999px; background-image:url(../images/titleWhat.gif); background-repeat:no-repeat; display:block; height:34px; }
.titleHow  { text-indent:-9999px; background-image:url(../images/titleHow.gif); background-repeat:no-repeat; display:block; height:34px; }


.portfolioContainer {
	width:1040px;
	
}

.workPiece {
	margin-bottom:46px;
	clear:left;
}

.workPiece .numbering {
	width:47px;
	height:45px;
	background-color:#FFF;
	color:#000;
	float:left;
	text-align:center;
	padding-top:2px;
	font-size:27px;
	line-height:35px;

}

.workImage {
	margin:0 0 0 0;
	padding:0 0 0 0;
	float:left;
	clear:right;
}


.workPiece img { margin-top:4px; margin-bottom:6px; }

.workInfo {
	margin-left:64px;
	position:relative;
	top:-2px;
	padding-bottom:16px;
	
}


.workPiece .workTitle {
	position:relative;
	top:-2px;
	font-size:25px;
	letter-spacing:.05em;
}


.workBody a {
	color:#9d9d9d;
	text-decoration:underline;
}
.workBody a:Hover {
	color:#fff;
}

.workPiece .workBody {
	color:#9d9d9d; 
	margin-top:4px;
	font-size:13px;
	line-height:18px;
	letter-spacing:.02em;
}

.workPiece .workRole {
	color:#fff; 
	font-size:12px;
	font-style:italic;
	letter-spacing:.05em;
	display:block;
}
.workPiece .links {
	font-size:13px;	
	display:block;
}

/* div to make extra space after a work piece that is less than 1024 px wide*/
.workPieceClear {
	clear:both;
	height:55px;
}


/*--------------- project specific window heights (for jQuery slider) ---------------*/

.henryDavisYork { height:581px !important; }
.wesc { height:555px !important; }
.wescLgp { height:580px !important; }
.sommarhagen { height:662px !important; }
.premonition { height:728px !important; width:954px !important; }
.gucio { height:699px !important; }

/*--------------- end of project specific window heights  ---------------*/





/* jQuery slider */


.main_view {
	float: left;
	position: relative;
}
.window {
	height:100px;	width: 1024px;
	overflow: hidden; /*--Hides anything outside of the set width/height--*/
	position: relative;
}
.image_reel {
	position: absolute;
	top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
	position: absolute;
	top: 120px; right: 8px;
	width: auto; height:36px;
	z-index: 100; /*--Assures the paging stays on the top layer--*/
	text-align: right;
	padding-right:16px;
	padding-left:5px;
	/*border: 1px solid #888;*/
	border-right: none;
	line-height: 32px;
	/*background: #888;*/
	display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
	background: #000;
	font-size:12px;
	padding: 7px;
	border: 1px solid #000;
	padding-left:12px;
	padding-right:12px;
	padding-top:5px;
	text-decoration: none;
	color:#9d9d9d;;

}

.paging a.active {
	background: #000000;
	border: 1px solid #FFF;
	color:#fff;
}
.paging a:hover { color:#fff; }




/* end of jQuery slider */




/* drop shadows around images*/

.cb img {margin:0 0; padding:0 0 0 0;}
.cb {margin:0em 0;position:relative; left:-8px; top:-10px; }
	/* Top corners and border */
.bt {
	height:8px;
	margin:0 0 0 8px;
	background:url(../images/box.png) no-repeat 100% 0;
}
.bt div {
	position:relative;
	left:8px;
	width:8px;
	height:8px;
	background:url(../images/box.png) no-repeat 0 0;
	font-size:0;
	line-height:0;
}

	/* Bottom corners and border */
.bb {
	height:8px;
	margin:0 0 0 8px;
	background:url(../images/box.png) no-repeat 100% 100%;
}
.bb div {
	position:relative;
	left:-8px;
	width:8px;
	height:8px;
	background:url(../images/box.png) no-repeat 0 100%;
	font-size:0;
	line-height:0;
}

	/* Left border */
.i1 {
	padding:0 0 0 8px;
	background:url(../images/borders.png) repeat-y 0 0;
}
	/* Right border */
.i2 {
	padding:0 8px 0 0;
	background:url(../images/borders.png) repeat-y 100% 0;
}
	/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.i3 {
	display:block;
	margin:0;
	padding:0 0;
	/*background:#0C3;*/
}
	/* Make the content wrapper auto clearing so it will contain floats (see http://positioniseverything.net/easyclearing.html). */
.i3:after {
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;
}
.i3 {display:inline-block;}
.i3 {display:block;}
/* Default CSS ends here */