* {
	margin: 0;
}

html, body {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	background: url('images/big_bg.png') top right no-repeat;
}

a:active, a:focus {
	outline: none;
}

a img {
	border: none;
}

#wrap {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto 0 auto; /* the bottom margin is the negative value of the footer's height */
	width: 930px;
	padding: 0 15px 0 15px;
}

/********************************************************************



			HEADER

			

********************************************************************/



	#header {
	height: 155px;
	margin: 0 0 40px 0;
	padding: 0 0 0 0;
}

#logo {
	float: left;
	margin: 40px 0 0 0;
}

#nav {
	font-family: "Quicksand Bold", "Helvetica Neue", Helvetica, sans-serif;
	font-size: 14px;
}

#nav a {
	color: #000;
	text-transform: uppercase;
	text-decoration: none;
	padding: 6px 8px;
}

#nav a:hover {
	color: #09F;
	background: #eee;
	text-shadow: 1px 1px rgba(255, 255, 255, 1.0);
}

#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	float: right;
}

#nav ul li {
	margin: 80px 10px 0 0;
	padding: 0;
	display: block;
	float: left;
}

#notify {
	margin: -30px 0 30px 0;
	text-align: center;
	font-size: 12px;
	color: #666;
}

#notify a {
	color: #069;
}

#notify a:hover {
	color: #09F;
}

/********************************************************************



			WORK GRID 

			

********************************************************************/



	#workgrid {
	width: 930px;
	margin: 0 0 15px 0;
}

#workgrid a {
	text-decoration: none;
}

#workgrid ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#workgrid ul li {
	float: left;
	margin: 0 15px 0 0;
	height: 312px;
}

 #workgrid ul li:nth-child(3n+2) {
 float: left;
 margin: 0 15px;
}

 #workgrid ul li:nth-child(3n+3) {
 float: left;
 margin: 0 0 0 15px;
}

#workgrid ul li a {
	margin: 0 0 30px 0;
	padding: 4px;
	display: block;
	width: 282px;
	height: 260px;
	background: url('images/grid_bg.png') top repeat-x #DDD;
	text-shadow: 1px 1px rgba(255, 255, 255, 0.4);
	-moz-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.3);
}

#workgrid ul li a:hover {
	background-position: 0 -300px;
	color: #CCC;
	text-shadow: 1px 1px rgba(255, 255, 255, 0.0);
}

#workgrid ul li a:hover img {
/*/		border: 1px solid #999;

			margin: -1px -1px 13px -1px; /*/

		}
#workgrid ul li img.thumb {
	display: block;
	margin: 0 0 14px 0;
}

#workgrid ul li a span.overlay {
	float: left;
	position: absolute;
	width: 282px;
	height: 205px;
	overflow: hidden;
}

#workgrid ul li a:hover span.overlay {
	background: url('images/overlay.png') no-repeat center center;
}

#workgrid ul li span.company {
	font-size: 14px;
	color: #333;
	display: block;
	clear: both;
	margin: 0 0 0 8px;
}

#workgrid ul li span.addy {
	font-size: 12px;
	color: #666;
	display: block;
	clear: both;
	margin: 0 0 0 8px;
}

#workgrid ul li a:hover span.company {
	color: #ccc;
	text-shadow: 1px 1px rgba(0, 0, 0, 0.6);
}

#workgrid ul li a:hover span.addy {
	color: #999;
	text-shadow: 1px 1px rgba(0, 0, 0, 0.6);
}

/********************************************************************



			PROJECT TEMPLATE

			

********************************************************************/



	#detail {
	width: 295px;
	height: 463px;
	padding: 15px;
	background: #EEE;
	margin: 0 15px 0 0;
}

#detail span.project {
	font-size: 18px;
	font-weight: lighter;
	display: block;
	color: #666;
	line-height: 14px;
	text-shadow: 1px 1px rgba(255, 255, 255, 1);
}

#detail span.addy {
	font-size: 11px;
	color: #999;
	text-shadow: 1px 1px rgba(255, 255, 255, 1);
}

#detail h2 {
	color: #333;
	font-size: 32px;
	margin: 10px 0 16px 0;
	text-shadow: 0px 1px rgba(255, 255, 255, 1.0);
}

#detail p {
	font-size: 12px;
	line-height: 22px;
	color: #333;
	text-shadow: 1px 1px rgba(255, 255, 255, 0.6);
}

#detail_wrap {
	width: 325px;
	height: 540px;
	float: left;
	margin: 0 15px 60px 15px;
	-moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}

#subnav {
	height: 32px;
	background: #EEE;
	width: 295px;
	padding: 0 15px 15px 15px;
	margin: 0 15px 30px 0;
	float: left;
}

#subnav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

#subnav ul li {
	margin: 0;
	padding: 0;
	display: inline;
}

#subnav ul li.prev a, #subnav ul li.next a {
	width: 26px;
	height: 35px;
	margin: 0 5px;
	display: inline-block;
}

#subnav ul li.allwork a {
	background: url('images/allwork.png') no-repeat top center;
	width: 46px;
	height: 32px;
	display: inline-block;
}

#subnav ul li.prev a {
	background: url('images/prev.png') no-repeat top center;
}

#subnav ul li.next a {
	background: url('images/next.png') no-repeat top center;
}

#subnav ul li.prev a:active, #subnav ul li.next a:active, #subnav ul li.allwork a:active {
	background-position: bottom;
}

#preview img.preview {
	border: 1px solid #DDD;
}

#preview {
	height: 538px;
	width: 558px;
	float: left;
	-moz-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.3);
}

#preview a.launch {
}

#preview a.launch:hover div.launchoverlay {
	background: url('images/50.png');
	width: 559px;
	height: 538px;
	position: absolute;
	float: left;
	margin: 1px 1px 0 0;
}

#preview .slideshow, #preview .slideshow img {
	overflow: hidden;
	width: 558px;
	height: 538px;
}

#sshownext, #sshowprev {
	position: relative;
	width: 27px;
	height: 90px;
	float: left;
	z-index: 999 !important;
}

#sshowprev {
	top: -315px;
	left: 0px;
	background: url('images/sshow_prev.png') no-repeat top center;
}

#sshownext {
	top: -315px;
	left: 504px;
	background: url('images/sshow_next.png') no-repeat top center;
}

a#sshowprev:active, a#sshownext:active {
	background-position: bottom center;
}

a#moreinfo {
	color: #333;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
	padding: 6px 8px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	background:	-moz-linear-gradient(-90deg, #EEE, #DDD);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEE), to(#DDD));
	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 3px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 3px;
	text-shadow: 1px 1px rgba(255, 255, 255, 0.9);
	border: 1px solid #FFF;
}

a#moreinfo:active {
	background:	-moz-linear-gradient(-90deg, #DDD, #EEE);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DDD), to(#EEE));
	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
}

#morewrap {
	margin: 15px 0;
	text-align: center;
}

#more {
	display: none;
	width: 815px;
	background: #EEE;
	padding: 30px;
	clear: both;
	margin: 45px 25px;
	-moz-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.3);
}

#more h1 {
	color: #333;
	text-shadow: 1px 1px rgba(255, 255, 255, 0.3);
}

#more p {
	margin: 18px 0;
	line-height: 22px;
	color: #444;
	text-shadow: 1px 1px rgba(255, 255, 255, 0.6);
	font-size: 13px;
}

/********************************************************************



			INTERIOR

			

********************************************************************/



	#main {
	width: 930px;
	margin: 0 0 60px 0;
	padding: 15px 15px 45px 15px;
}

#main h1 {
	color: #333;
	text-shadow: 1px 1px rgba(255, 255, 255, 0.3);
}

#main p {
	margin: 18px 0;
	line-height: 22px;
	color: #666;
	text-shadow: 1px 1px rgba(255, 255, 255, 0.6);
}

#main .servleft {
	float: left;
	width: 560px;
}

#main .servright {
	float: left;
	margin: 65px 0 0 15px;
	width: 355px;
}

#main .compleft {
	float: left;
	width: 537px;
}

#main .compright {
	float: left;
	margin: 0 0 0 15px;
	width: 378px;
}

#main .servright ul {
	margin: 0;
	padding: 0;
	list-style: none;
	color: #069;
	font-weight: bold;
}

#main .servright ul li {
	margin: 7px 0 0 0;
}

/********************************************************************

			FOOTER			

********************************************************************/



	#footer, .push {; /* .push must be the same height as .footer */
	clear: both;
}

#footer {
	background: url('images/footer_bg.png') 15px 15px no-repeat #EEE;
	width: 960px;
	margin: -15px auto 0 auto;
}

#copy {
	text-align: center;
	clear: both;
	font-size: 10px;
	text-shadow: 1px 1px rgba(255, 255, 255, 0.3);
	color: #999;
}

#footer div.col {
	width: 290px;
	padding: 15px;
	float: left;
}

#footer span.title, #footer span.title a {
	font-family: "Quicksand Bold", "Helvetica Neue", sans-serif;
	text-transform: uppercase;
	color: #444;
	text-decoration: none;
}

#footer p {
	font-size: 13px;
	line-height: 22px;
	color: #555;
	margin: 15px 0 0 0;
}

#footer a {
	color: #036;
}

#footer a:hover {
	color: #09F;
}

a.footerlink {
	padding: 10px;
	margin: 15px 0;
	color: #036 !important;
	font-weight: bold;
	font-size: 13px;
	text-decoration: none;
	line-height: 40px;
}

a.footerlink:hover {
	color: #06F !important;
}

/********************************************************************



			MISC

			

********************************************************************/



	.bold {
	font-weight: bold;
}

ul.contactsub {
	margin: 0;
	padding: 0 0 8px 0;
	list-style: none;
	color: #666;
}

ul.contactsub li {
	margin: 8px 0 8px 45px;
	font-weight: bold;
}

ul.contactsub li a {
	color: #036;
	text-decoration: none;
	text-shadow: 1px 1px rgba(255, 255, 255, 0.6);
}

ul.contactsub li a:hover {
	color: #06F;
}

.clear {
	clear: both;
	display: block;
}

#intro {
	width: 438px;
	height: 292px;
	padding: 30px 30px 15px 462px;
	margin: 0 0 30px 0;
	background: url(images/main_bg.jpg) no-repeat;
	text-shadow: 1px 1px rgba(255, 255, 255, 0.4);
	-moz-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.3);
}

#intro h1 {
	text-shadow: 1px 1px rgba (255, 255, 255, 0.4);
	color: #333;
	margin: 10px 0 18px 0;
	font-size: 32px;
}

#intro p {
	line-height: 24px !important;
}


a.learn_more {
	position: relative;
	top: 10px;
	float: left;
	width: 146px;
	height: 35px;
	background: url(images/more.png) top center no-repeat;
}

a.learn_more:active {
	background-position: bottom center;
}

#intro a.learn_more {
	margin: 10px 0 0 300px;
}

div.serv {
	color: #333 !important;
}
