body { background-image:url(images/site_bg.gif); background-repeat:repeat; font-size:12px; color:#666; font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif;
       margin:-10px 0 0; padding:10px 0 0; min-height: 100%; height: auto; overflow:inherit}

html, body { height: 100%; }

/* page_background is the white background that extends to the full height of the page.
 * Normally I would just give the wrapper element a min-height of 100%, but in this case
 * the extra padding at the bottom that keeps the sticky footer from covering the last of
 * the content creates a vertical scrollbar when the height is set at 100% (100% + padding).
 * Another method would be to include an 830px white strip in the background image, but resizing
 * the browser window horizontally can create a 1 pixel jitter that misaligns the background with
 * the real page.
 */

#page_background, #body_background{ width: 100%; height: 100%; position: fixed; top: 0; left: 0;}

#ie6 #page_background, #ie6 #body_background
{ 
	width: 100%; height: 100%;	position: absolute;
	top: expression(document.documentElement.scrollTop + document.documentElement.clientHeight - offsetHeight);
	left: expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);
}

.bodycopy {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #777;
	line-height: 22px;
}
#experience{margin-top: -15px; float: right;}
#experience b { color:#c60; letter-spacing:.1em;}
#experience a { text-decoration: none;  font-size:12px; letter-spacing:.08em; padding: .3em .4em; color: #888; font-weight:bold;}
#experience a:hover { text-decoration: none;  font-size:12px; letter-spacing:.08em; padding: .3em .4em; color: #c93; font-weight:bold;}
#ventureAccess{ width:740px; margin-left:40px; }
.main_wrap {position: relative; z-index: 20; width:835px; margin:5px auto;}
#ie6 .main_wrap{ overflow: hidden;}
.header { clear:both; width:830px; font-variant:small-caps; font-family:Arial; letter-spacing:1px; font-size:24px; overflow:hidden;	margin-top:25px;}
.header img{ float:left; width:46px; height:41px; border:0;}
.header span { color:#c93;}
.header p{ float:right; margin:0;}
.header p a{ color:#333;}
.header ul {list-style: none; padding: 0; z-index:100; }
.header li {padding: 9px 0px 0px 0px; display:inline; font-size:13px; letter-spacing:.08em; font-family: Arial;}
.header li b { color:#c60; letter-spacing:.1em;}
.header li a { text-decoration: none;  font-size:13px; letter-spacing:.08em; padding: .3em .4em; color: #888; font-weight:bold;}
.header li a:hover { text-decoration: none;  font-size:13px; letter-spacing:.08em; padding: .3em .4em; color: #c93; font-weight:bold;}

.featureTop { margin-top:13px; width:837px; height:200px; background-color:#c93;}
.portfoughlioTop { margin-top:15px; width:837px; height:100px; background-color:#c93;}

.about_text {float:left;  font-size:13px; font-weight:100; line-height:18px; margin:15px 0px 15px 0px; padding:0 50px 0 0; color: #888;}
.intro_text {float:left;  font-size:18px; font-weight:100; line-height:33px; margin:10px; padding:0 100px 0 0; color: #888;}
.projects_text {float:left;  font-size:14px; font-weight:100; line-height:22px; margin:5px; padding:0 2px 0 0; color: #888;}
.more { font-variant:small-caps; font-size:12px; color:#930;}
#page_background { z-index: 4;}
#page_background div { width: 880px; height: 100%; background-image:url(images/pagebg.png); background-repeat:repeat-y;	margin: 10px auto;}
img { vertical-align: middle;}
a img{ border:0;}
a, a:hover, a:active, a:visited{font-weight:bold; font-size:12px; text-decoration:none; color:#960; outline: none; font-family: Verdana;}

.oneColFixCtrHdr #container {
	width: 851px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	z-index:100;
}
.oneColFixCtrHdr #header {
	background: #DDDDDD; 
	padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.oneColFixCtrHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColFixCtrHdr #mainContent {
	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: #FFFFFF;
}

.oneColFixCtrHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

table#ad {background-image:url(images/footerbg.png); margin:auto; background-repeat:repeat-x; text-align: center; width:850px; border-style:none; height:152px; position:absolute; bottom:0px;}

#bottomImg{position:absolute; z-index:2; vertical-align:baseline; float:right; background-image:url(images/footerbg.png); bottom:-3px; right:0px;}


/* SITE MENU */
#siteMenu{ margin:-10px 100px 0px 10px; z-index:20; }
#siteMenu ul {list-style: none; padding: 0; font-variant:small-caps; z-index:100; }
#siteMenu li {padding: 9px 0px 0px 0px; display:inline; font-size:13px; letter-spacing:.08em; font-family: Arial;}
#siteMenu li b { color:#c60; letter-spacing:.1em;}
#siteMenu li a { text-decoration: none;  font-size:13px; letter-spacing:.08em; padding: .3em .4em; color: #888; font-weight:bold;}
#siteMenu li a:hover { text-decoration: none;  font-size:13px; letter-spacing:.08em; padding: .3em .4em; color: #c93; font-weight:bold;}
/* SITE MENU */

/* FOOTER AND FOOTER LINKS */
#footerContainer { width:100%; }
#footerContainer ul li { display: inline;}
#footerContainer ul li a { text-decoration: none; padding: .5em .8em; color: #fff; background-color: #444;}
#footerContainer ul li a:hover {color: #fff; background-color: #666;}
.footerLinks { padding:0px 10px 0px 0px; margin-left:4px; color:#eee; font-size:10px; text-decoration:none; font-weight:bold; } 
.bodyText{margin:auto;}
.sectionTitle{margin-left:7px; font-size:17px; font-family: Trebuchet MS; font-style:normal; line-height:20px; font-weight:bold;}
.SectionDescription{ font-size:11px; font-family:Verdana; margin-top:5px;}



/****************** footer ************************/
#footer_bg, #footer {width: 100%; height: 150px; position: fixed; bottom: 0; left: 0;}
#ie6 #footer_bg, #ie6 #footer
{ width: 100%; height: 100px; position: absolute;
	top: expression(document.documentElement.scrollTop + document.documentElement.clientHeight - offsetHeight);
	left: expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);
}

#footer_bg { background-image:url(images/footerbg.png); background-repeat:repeat-x; z-index: 8;}
#footer {z-index: 20; }
#footer_nav {height:150px; margin:0 auto; width:870px;}
#footer_nav a {	display: block;	float: left; height: 150px;}
#footer_nav a span{	display: none;}
#footer_nav-logo{ margin-left:11px; height:122px; width:851px; background-image:url(images/logo.png); background-repeat:no-repeat;}

#footer_nav-home { width: 76px;	background: transparent url(../images/footer_nav-home.png);}
#footer_nav-work{ width: 72px; background: transparent url(../images/footer_nav-work.png);}
#footer_nav-services{ width: 93px; background: transparent url(../images/footer_nav-services.png);}
#footer_nav-studio { width: 80px; background: transparent url(../images/footer_nav-studio.png);}
#footer_nav-blog{ width: 72px; background: transparent url(../images/footer_nav-blog.png);}
#footer_nav-contact { width: 116px;	background: transparent url(../images/footer_nav-contact.png);}
#footer_nav-home:hover, #footer_nav-work:hover, #footer_nav-services:hover, #footer_nav-studio:hover, #footer_nav-blog:hover, #footer_nav-contact:hover, #footer_nav a.selected
{background-position: 0 -100px;}

/* end footer */





/* work list and related work ------------- */

#work-list-wrapper{	float: left; height: 300px;	margin: 20px 0 50px 64px; position: relative; width: 750px;
}

	#work-list-slider{
		overflow: hidden;
		height: 300px;
		width: 720px; 
	}
	
	div#related-work{ 
		float: left; 
		margin-bottom: 50px;
		width: 800px; 
	}
	
		#related-work h3{
			border-bottom: 1px dotted #40423b;
			color: #93945e;
			font: bold 18px/22px "Arial","Helvetica",sans-serif;
			margin-bottom: 8px;
			padding-bottom: 3px;
		}

		#work-list-slider li{
			float: left;
			height: 300px;
			list-style-type: none;
			padding: 0;
			width: 720px;
		}

			#work-list-slider li div,
			#related-work li{
				background: url(images/bg-work_thumb_drop.png) no-repeat 0 0; 
				display: inline; 
				float: left; 
				height: 138px; 
				list-style: none;
				margin: 0 14px 14px 0;
				padding: 3px;
				position: relative;
				width: 220px; 
			}
				#related-work li{ margin: 0 18px 14px 0; }

				#work-list-slider li div a:link,
				#work-list-slider li div a:visited,
				#related-work li a:link,
				#related-work li a:visited{
					display: block;
					height: 132px;
					width: 220px;
				}
				
				#work-list-slider li div a:hover span.hover-state,
				#work-list-slider li div a:active span.hover-state,
				#related-work li a:hover span.hover-state,
				#related-work li a:active span.hover-state{
					background: transparent url(images/bg-work_list_hover.png) no-repeat 0 0;
					display: block;
					height: 133px;
					position: absolute;
					width: 220px;
				}
				
				#work-list-slider li div a:link span.case-study-mark,
				#work-list-slider li div a:visited span.case-study-mark{
					background: transparent url(../images/site/ico-case_study_logo.png) no-repeat 0 0;
					display: block;
					height: 26px;
					left: 0;
					position: absolute;
					top: 0;
					width: 26px;
					z-index: 1;
				}
			
				#work-list-slider li div .last,
				#related-work li.last{ margin: 0 0 14px; }
				
/* work prev and next buttons ------------- */

a#work-list-nav-prev:link,
a#work-list-nav-prev:visited,
a#work-list-nav-prev:active,
a#work-list-nav-next:link,
a#work-list-nav-next:visited,
a#work-list-nav-next:active{
	background: transparent url(images/btn-arrow-right.png) no-repeat 0 0;
	display: block;	font-size: 0; line-height: 0; height: 73px;	position: absolute;
	right: -26px; text-indent: -13000em; top: 120px; width: 73px; z-index: 5;
}
	a#work-list-nav-prev:link,
	a#work-list-nav-prev:visited,
	a#work-list-nav-prev:active{
		background-image: url(images/btn-arrow-left.png);
		left: -70px;
	}



/********************
SERVICES STYLES
********************/

h2.service_title {
	width: auto;
	font-size:24px;
	clear:both;
	color:#960;
	font-weight:normal;
	font-family: Lucida Grande;
}

#services_wrap p {
	line-height: 15px;
	color:#686B6E;
}

#services_wrap p a { 
	padding:1px;
	padding-left:2px;
	padding-right:2px;
	border: dotted 1px #43484D;
	white-space:nowrap;
}

#services_wrap a:hover { 
	padding:1px;
	padding-left:2px;
	padding-right:2px;
	border: dotted 1px #486C8C;
	white-space:nowrap;
	
	text-decoration:none;
	color:#FFF;
	background-color:#486C8C;
}


#services_wrap h3 {
	margin-bottom:8px;
}

.services_list, .services_list_first, .services_list_last {
	float:left;
	margin-bottom: 0px;
	padding-top:0px;
	height: auto;
	
}

.services_list {
	width: 210px;
	
	padding-right:40px;
	margin-right: 30px;
	
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #c0c0c0;
}

.services_list_first {
	width: 210px;
	
	padding-right:40px;
	margin-right: 30px;
	
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #c0c0c0;
	
	clear:both;
}

.services_list_last {
	width: 210px;
}

p {
	margin-bottom:15px;
	color:#595F66;
	font-size:12px;
	line-height:20px;
	font-weight:normal;
}

h3 {
	margin-bottom:10px;
	color:#557cb0;
	font-size:14px;
	line-height:20px;
	font-weight:normal;
}


#services_wrap {
	width: 850px;
	height: 320px;
	text-align:left;

	margin-left: 20px;
	margin-right: auto;
	
	clear:both;
}

#about_wrap {
	width: 850px;
	height: 320px;
	text-align:left;

	margin-left: 20px;
	margin-right: auto;
	
	clear:both;
}
	.sort-list{
		background: #282b23 url(../images/site/bg-tile_dark_overlay.png) repeat 0 0;
		display: none;
		float: left;
		position: relative;
		width: 940px;
	}
	
		.column{
			float: left;
			position: relative;
			font: 14px "Arial", "Helvetica", Sans-Serif;
			list-style: none;
			padding: 20px 0 15px 15px;
			width: 165px;
		}
		
			.column li{ margin: 0 0 7px 0; }
		
				.column li a:link,
				.column li a:visited{ 
					color: #b9ba3c; 
					font: 11px/11px "Verdana", "Arial", "Helvetica", Sans-Serif; 
					padding: 5px; 
					text-decoration: none; 
				}
		
				.column li a:hover,
				.column li a:active{ background-color: #121212; }
			
					.column li a:link.act,
					.column li a:visited.act, 
					.column li a:hover.act,
					.column li a:active.act{  
						background-color: #121212;
					}


/* work gallery and case studies gallery------------- */



#work-detail{ margin: 0 0 -30px; }

#work-gallery 
{
	margin-top:-10px;
	margin-right: 10px;
	background-color: #fff; 
	float: left;
	width: 500px; 
}
	#light #work-gallery{ 
		border: 1px solid #ccc;
		float: left;
		margin: 0 0 20px 20px;
		padding: 10px;
		width: 500px; 
	}

	#project-image{
		border: 0px solid #ccc;
		height: 357px;
		list-style: none;
		margin-top:-30px;
		overflow: hidden;
		width: 500px;
	}
		#project-image img{ 
			display: block;
			height: 357px;
			margin-left:-30px;
			width: 500px;
		}
		
		
		#project-image li,
		#project-image li img{
			height: 357px;
			width: 500px;
		}
			#case-study-gallery li,
			#case-study-gallery li img{ height: 315px; width: 498px; }

	#project-pages{ 
		float: left; 
		margin: 10px 0 0;
		width: 550px;  
	}
	
		#project-pages ul{ float: left; }
		
		#project-pages li{ 
			float: left; 
			list-style: none; 
			margin: 0 10px 0 0; 
		}
		
			#project-pages li a:link,
			#project-pages li a:visited{
				background-color: #272b20;
				border: 1px solid #383a31;
				color: #fff;
				display: block;
				padding: 6px 12px 0px;
			}
				#light #project-pages li a:link,
				#light #project-pages li a:visited{ 
					background-color: #fff; 
					border: 1px solid #75871d;
					color: #75871d;
				}
				
				#project-pages li a:hover,
				#project-pages li a:active,
				#project-pages li a.act{   
					color: #b9ba3c; 
				}
					
					#light #project-pages li a:hover,
					#light #project-pages li a:active,
					#light #project-pages li a.act{   
						background-color: #f9f2da; 
						border: 1px solid #7f4207;
						color: #7f4207;
					}

	#launch-project{
		float: right;
		margin: -30px -15px 0 0;
		text-indent: -9999em;
		width: 135px;
		overflow: hidden;
	}
	
		#launch-project a:link,
		#launch-project a:visited,
		#launch-project a:link,
		#launch-project a:visited{
			background: url(images/btn-launch_project.png) no-repeat 0 0;
			display: block;
			height: 27px;
		}
		
		#launch-project a:hover{ background: url(images/btn-launch_project.png) no-repeat 0 -27px; }

/* work details ------------- */	

#work-detail{
	float: left;
	margin-left: 20px;
	width: 280px;
}

	#work-detail h2{ 
		color: #960; 
		font: 26px/26px "Arial", "Trebuchet MS", Sans-Serif; 
		margin: 5px 0 10px 0; 
	}
	
	#work-detail h3{ 
		color: #cf3; 
		font: normal 15px/22px "Tahoma", "Tahoma", "Arial", Sans-Serif; 
		margin: 9px 0 7px 0; 
	}
	
	#work-detail p{ 
		color: #888; 
		font: 11px/20px "Verdana", "Tahoma", "Arial", Sans-Serif; 
		margin: 8px 0 16px 0; 
	}
	
	#work-detail li{
		background: transparent url(images/list_green_bullet.png) no-repeat 0 9px;
		color: #777;
		font: 12px/22px "Tahoma", "Arial", Sans-Serif;
		list-style: none;
		margin: 0 2px;
		padding-left: 17px;
	}
	
		#work-detail p span{
			color: #888; 
			font-size: 12px; 
		}


/* view more buttons ------------- */

#view-more{
	float: right;
	margin: 22px 20px 0 0;
	padding-right: 4px;
}
	ul#view-more.detail-nav{ margin-top: 10px; }

	#view-more li{
		float: right;
		list-style-type: none;
	}
	
		#view-more li a:link,
		#view-more li a:visited{
			background-color: transparent;
			background-position: 0 0;
			background-repeat: no-repeat;
			display: block;
			height: 29px;
			text-indent: -13000em;
		}

	
			#view-all-work a:link,
			#view-all-work a:visited{
				background-image: url(images/btn-view_all_work.png);
				margin-right: 6px;
				width: 79px;
			}
			
			#view-work-list a:link,
			#view-work-list a:visited{
				background-image: url(images/btn-detail_back_to_all.png);
				margin-right: 6px;
				width: 139px;
			}
			
			#view-prev a:link,
			#view-prev a:visited{
				background-image: url(images/btn-detail_prev.png);
				margin-right: 6px;
				width: 56px;
			}
			
			#view-next a:link,
			#view-next a:visited{
				background-image: url(images/btn-detail_next.png);
				width: 56px;
			}
			
				html>body #view-all-work a:link,
				html>body #view-all-work a:visited,
				html>body #view-work-list a:link,
				html>body #view-work-list a:visited,
				html>body #view-prev a:link,
				html>body #view-prev a:visited{ margin-right: 12px; }
	
					#view-more li#view-case-studies a:hover,
					#view-more li#view-case-studies a:active,
					#view-more li#view-all-work a:hover,
					#view-more li#view-all-work a:active,
					#view-more li#view-work-list a:hover,
					#view-more li#view-work-list a:active,
					#view-more li#view-prev a:hover,
					#view-more li#view-prev a:active,
					#view-more li#view-next a:hover,
					#view-more li#view-next a:active{ background-position: 0 -29px; }
		
						#view-case-studies a:link.act,
						#view-case-studies a:visited.act,
						#view-case-studies a:hover.act,
						#view-case-studies a:active.act{
							background: transparent url(../images/site/btn-work_case_studies.png) no-repeat 0 -29px;
						}
						
						#view-all-work a:link.act,
						#view-all-work a:visited.act,
						#view-all-work a:hover.act,
						#view-all-work a:active.act{
							background: transparent url(../images/site/btn-view_all_work.png) no-repeat 0 -29px;
						}







button {cursor: pointer; border: 0; background: none; font-weight: bold; padding: 5px; margin: 0}
button.small {padding: 2px 5px; font-size: .95em}
button a, button a:hover {text-decoration: none}
button.standard:hover, button.negative:hover, button.submit:hover {background-position: bottom left}
button.standard, button.standard a {color: #0c7ca0}
button.standard:hover, button.standard:hover a {color: #041e26}
button.standard {border: 1px solid #d6d6d6; background: transparent url(button_white.gif) top left repeat-x}
button.standard:hover {border: 1px solid #9ac5db}
button.negative, button.negative a {color: #fff}
button.negative {border-top: 1px solid #ed6e6e; border-bottom: 1px solid #a93030; border-left: 1px solid #ce5050; border-right: 1px solid #be3636; background: transparent url(button_red.gif) top left repeat-x}
button.negative:hover {border-top: 1px solid #940000; border-bottom: 1px solid #6c0000; border-left: 1px solid #9b1e1e; border-right: 1px solid #830000}
button.submit, button.submit a {color: #fff}
button.submit {border-top: 1px solid #64c3e2; border-bottom: 1px solid #26819e; border-left: 1px solid #45a1c0; border-right: 1px solid #2a91b2; background: transparent url(button_blue.gif) top left repeat-x}
button.submit:hover {border-top: 1px solid #599eb5; border-bottom: 1px solid #2d99bd; border-left: 1px solid #46a4c4; border-right: 1px solid #2886a5}
label {display: block}
textarea {font-size: 1.21em; font-family: arial; display: block; border: solid 1px #CCC; padding: 2px}
input.text, input.password {font-family: arial; width: 250px; font-size: 1.2em; padding: 4px 2px; border: solid 1px #CCC}
input.disabled {background-color: transparent; border: none; color: #000}
input.tiny {width: 40px !important}
input.small {width: 100px !important}
input.wide {width: 310px !important}
input.checkbox {}
input.radio {width: auto; height: auto; margin: 0}
label {font-weight: bold}
select.select {font-size: 1em; font-family: arial; padding: 0 4px}
select optgroup {font-style: normal; color: #666}
select optgroup option {margin-left: 15px; color: #000}