@import "http://fast.fonts.com/cssapi/0b971709-14a8-4514-92d9-10ca49ac0884.css";

/* Hide if Flash */
.flashInstalled .flash {
	visibility: hidden;
}

/* Tags */
html, body {
	background: #232323 url(/_img/layup/bg.jpg) no-repeat top right fixed;
	height: 100%;
	margin: 0;
	padding: 0;
	color: #666;
	text-align: center;
	
}
body {
	font: 62.5%/133%  Helvetica, Arial, sans-serif;
	overflow-y: scroll;
}

a {
	color: #fff;
	text-decoration: underline;
}
a:hover,
a:focus {
	text-decoration: none;
}
a img {
	border: none;
}
h3 {
	font: 3em/1 'HelveticaNeueW01-77BdCn 692722', Arial, Helvetica, sans-serif;
	margin: 0 0 10px;
	padding: 0;	
	text-transform: uppercase;
}
p {
	padding: 0 0 10px 0;
	margin: 0;
}
hr {
	background:none;
	border: none;
	border-bottom: 1px solid #ccc;
	height: 1px;
}
form, 
fieldset {
	border: none;
	margin: 0;
	padding: 0;
}
button {
	color: #a8a8a8;
	font: 2.1em/1 'HelveticaNeueW01-77BdCn 692722', Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: -1px;
	border: 0;
	margin: 0;
	padding: 0 15px 0 0;
	cursor: pointer;
	float: right;
	background:	url(/_img/layup/button_arrow.gif) no-repeat right 9px;
} 
button:hover,
button:focus {
	color: #fff;
}
legend {
	display: none;
}

/* Structure */

#contents{
	position:relative;
	margin: 0 auto;
	width: 906px;
	height:auto !important;
	height: 100%;
	min-height:100%;
	background: #000;
	text-align: left;
}
#topbar {
	height: 164px;
	background: url(/_img/layup/bg.jpg) no-repeat top right fixed;
}
#topbar span {
	float: right;
	color: #c4c4c4;
	margin: 38px 20px 0 0;
	font: 2.2em/1 'HelveticaNeueW01-57Cn', Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}
#topbar h1 {
	margin: 0;
	padding: 0;
}
#topbar h1 a{
	text-indent: -9000px;
	background: url(/_img/layup/logo.png) no-repeat;
	width: 256px;
	height: 114px;
	float: left;
	outline: 0;
}

#middle {
	padding:0 0 95px;
}
.maintext{
	font-size: 1.3em;
	line-height: 1.1;
}
.maintext ul,
#servicestext ul,
#abouttext ul {
	margin: 0 0 15px 10px;
	padding: 0;
}
.maintext li,
#servicestext li,
#abouttext li {
	margin: 0 0 3px 0;
	padding: 0 0 0 14px;
	list-style: none;
	background: url(/_img/layup/li.gif) no-repeat 0 3px;
}
#abouttext li,
#servicestext li,
#processtext .maintext li {
	background-image: url(/_img/layup/li_white.gif) !important; 
}
#processtext .maintext li {
	margin-bottom: 8px;
}

#middle h2 {
	margin: 0;
	padding-right: 18px;
	text-align: right;
	font: 7em/0.7 'HelveticaNeueW01-77BdCn 692722', Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: -1px;
	cursor: pointer;
	
		-webkit-transition: all .4s ease-in-out;
		-moz-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

#middle div span{
	width: 6px;
	height: 6px;
	position: absolute;
}

#n1, .otherpage	{ margin-top: -49px !important}
#n1>div			{ background: #ffff00; color: #727200;}
#n1 span		{ background: url(/_img/layup/n1.gif); }
#n1 h2 			{ color: #ffff00; border-bottom: 8px solid #ffff00; }
#n1 h2:hover 	{ color: #d3d307; border-bottom: 8px solid #d3d307; }
#n1 h3			{ color: #a8a800;}

#n2>div			{ background: #ff33cc;}
#n2 span		{ background: url(/_img/layup/n2.gif); }
#n2 h2 			{ color: #ff33cc; border-bottom: 8px solid #ff33cc; }
#n2 h2:hover 	{ color: #cc29a3; border-bottom: 8px solid #cc29a3; }

#n3>div			{ background: #00ffff;}
#n3 span		{ background: url(/_img/layup/n3.gif); }
#n3 h2 			{ color: #00ffff; border-bottom: 8px solid #00ffff; }
#n3 h2:hover 	{ color: #00cccc; border-bottom: 8px solid #00cccc; }

#n4>div			{ background: #ff9900;}
#n4 span		{ background: url(/_img/layup/n4.gif); }
#n4 h2 			{ color: #ff9900; border-bottom: 8px solid #ff9900; }
#n4 h2:hover 	{ color: #cc7a00; border-bottom: 8px solid #cc7a00; }

#n5>div			{ background: #33ff00;}
#n5 span		{ background: url(/_img/layup/n5.gif); }
#n5 h2 			{ color: #33ff00; border-bottom: 8px solid #33ff00; }
#n5 h2:hover 	{ color: #29cc00; border-bottom: 8px solid #29cc00; }

.openLink {
	margin: 0 0 30px -6px;
}

.openLink>div {
	padding: 24px;
	height: 360px;
	overflow: hidden;
}
.json .openLink>div {
	display: none;
}
.openLink .on {
	display: block !important;
}


/* Portfolio ------------------------------------------------------------------------------------------- */

#n1 .maintext{
	width: 370px;
	float: left;
}
#imageholder {
	float: right;
	margin: -35px 0 0;
}

#imageholder ul {
	margin: 0 0 5px;
	padding: 10px;
	display: block;
	position: relative;
	overflow: hidden;
	background: #d5d500;
	width: 450px;
	height: 281px;
}
#imageholder b {
	font-size: 1px;
	text-indent: -9000px;
	display: block;
	width: 32px;
	height: 32px;
	margin: 249px 0 0 418px;
	background:url(/_img/layup/zoom.gif) no-repeat;
	position: absolute;
}
#imageholder li,
.json #imageholder .block{
	margin: 0;
	padding: 0;
	list-style: none;
	position:absolute;
	z-index: 1;
	height: 281px;
	overflow: visible;
}
.json #imageholder li{
	height: 0;
	overflow: hidden;
}


#imageholder .weblink,
#imageholder strong  {
	color: #848408;
	font-size: 1.6em;
	text-decoration: none;
	line-height: 0.9;
	letter-spacing: -1px;
	background:	url(/_img/layup/n1_arrow.gif) no-repeat right 5px;
	padding: 0 15px 0 0;
	height: 16px;
}
#imageholder .weblink:hover {
	color:#000;
}
#imageholder strong {
	background: none;
}

.paging {
	margin: 0;
	padding: 0;
	clear: both;
}
.paging li{
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}
.paging a{
	width: 42px;
	height: 42px;
	display: block;
	background: #939300 url(/_img/layup/n1_back.gif) no-repeat;
	font-size: 1px;
	text-indent: -9000px;
	outline: 0;
	
		-webkit-transition: background .2s ease-in-out;
		-moz-transition: background .2s ease-in-out;
    transition: background .2s ease-in-out;
}
.paging a:hover,
.paging a:focus {
	background-color: #000;
}
.paging #next {
	float: right;
}
.paging #next a {
	background-image: url(/_img/layup/n1_next.gif);
}
#jump {
	margin: 27px 0 0 394px ;
	padding: 0;
	
}
#jump li{
	margin: 0 5px 0 0;
	padding: 0;
	list-style: none;
	float: left;
}

#jump a{
	font-size: 1px;
	text-indent: -9000px;
	outline: 0;
	background: #e8e300;
	width: 10px;
	height: 10px;
	display: block;
	
		-webkit-transition: background .2s ease-in-out;
		-moz-transition: background .2s ease-in-out;
    transition: background .2s ease-in-out;
}
#jump a:hover,
#jump a:focus,
#jump .on a {
	background-color: #939300;
}

/* ------------------------------------------------------------------------------------------------- */

/* Process ----------------------------------------------------------------------------------------- */

#process {
	margin: 0;
	padding: 0;
	color: #fff;
}
#process li{
	margin: 0;
	padding: 0 25px 0 0;
	list-style: none;
	width: 271px;
	float: left;
	cursor: pointer;
}
#process li div {
	height: 320px;
	padding: 17px 14px;
	
		-webkit-transition: background .2s ease-in-out;
		-moz-transition: background .2s ease-in-out;
    transition: background .2s ease-in-out;
}
#process b,
#processtext b {
	font: 2.4em/1 'HelveticaNeueW01-77BdCn 692722', Arial, Helvetica, sans-serif;
	margin: 0 0 10px;
	color: #ff33cc;
	display: block;
	text-transform: uppercase;
}
#process li a {
	font-size: 1px;
	text-indent: -9000px;
	display: block;
	width: 66px;
	height: 64px;
	background:url(/_img/layup/n2_link.png) no-repeat;
	float: right;
	margin-top: -64px;
}
#process .p3 { padding-right: 0; }

#process .p1 div { background: #661452 url(/_img/layup/n2_p1.png) no-repeat bottom left; }
#process .p2 div { background: #7f1966 url(/_img/layup/n2_p2.png) no-repeat bottom left; }
#process .p3 div { background: #991f7a url(/_img/layup/n2_p3.png) no-repeat bottom left; }

#process .p1 div:hover { background-color: #71165b; }
#process .p2 div:hover { background-color: #881b6d; }
#process .p3 div:hover { background-color: #a32182; }

#processtext {
	position: absolute;
	width: 0;
	height: 354px;
	overflow: hidden;
	color: #fff;
	z-index: 1;
}
#processtext div {
	padding: 17px 14px;
}
#processtext .maintext{
	width: 600px;
	padding: 0 !important;
		-webkit-text-size-adjust: none;
}

#processtext .close {
	font-size: 1px;
	text-indent: -9000px;
	display: block;
	width: 48px;
	height: 50px;
	background:url(/_img/layup/n2_close.png) no-repeat;
	float: right;
}

.p1on { background: #71165b url(/_img/layup/n2_p1.png) no-repeat bottom left !important;}
.p2on { background: #881b6d url(/_img/layup/n2_p2.png) no-repeat bottom left !important;}
.p3on { background: #a32182 url(/_img/layup/n2_p3.png) no-repeat bottom left !important;}


/* ------------------------------------------------------------------------------------------------- */

/* Services / About --------------------------------------------------------------------------------- */

#services,
#about {
	margin: 0;
	padding: 0;
	float: left;
}
#services li,
#about li{
	margin: 0 0 8px; 
	padding: 0;
	list-style: none;
	float: left;
	clear: both;
	width: 355px;
}
#services li a,
#about li a {
	padding: 0 15px 0 0;
	color: #009394;
	background-position: right 0;
	font: 2.5em/1 'HelveticaNeueW01-77BdCn 692722', Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: -1px;
	text-decoration: none;
	outline: none;
	
		-webkit-transition: all .2s ease-in-out;
		-moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}
#services li a:hover,
#services .on a {
	color: #114444;
	background:url(/_img/layup/n3_arrow.gif) no-repeat right 13px;
}
#servicesholder,
#aboutholder {
	background: #009494 !important;
	margin: 0;
	padding: 28px;
	width: 418px;
	height: 303px;
	float: right;
}
#servicestext,
#abouttext {
	background: #009494;
	color: #fff;
	font-size: 1.4em;
	line-height: 1.1;
}
#servicestext h3,
#abouttext h3 {
	font-size: 2.1em;
}


#about li a {
	color: #1bae0e;
}
#aboutholder,
#abouttext {
	background: #1bae0e !important;
}

#about li a:hover,
#about .on a {
	color: #15660d;
	background:url(/_img/layup/n5_arrow.gif) no-repeat right 13px;
}

#about li{
	width: 223px;
}
#aboutholder {
	width: 550px;	
}
#abouttext .image {
	float: right;
	width: 150px;
	height: 260px;
	margin: 0 0 0 20px;
	
}
#abouttext .image img{
	border: solid 1px #26fa12
}



/* ------------------------------------------------------------------------------------------------- */

/* clients ----------------------------------------------------------------------------------------- */

#clients {
	margin: 0;
	padding: 0;
}

#clients li {
	margin: 0 32px 18px 0;
	padding: 0;
	list-style: none;
	border: solid 10px #c37300;
	width: 126px;
	height: 82px;
	float: left;
}
#clients li:nth-child(5n+5)  {
	margin-right: 0;
}
/* ------------------------------------------------------------------------------------------------- */

#footer{
	width: 906px;
	height: 55px;
	position: absolute;
	width: 100%;
	bottom: 0; 
}
#footer ul{
	margin: 0;
	padding: 5px 26px 0;
	list-style: none;
	text-align: right;
}
#footer li{ 
	float: left;
	color: #5e5e5e;
	font: 2.2em/1 'HelveticaNeueW01-57Cn', Arial, Helvetica, sans-serif;
	padding: 0 10px 0 7px;
}
#footer a{
	color: #5e5e5e;
	text-decoration: none;
}
#footer a:hover,
#footer a:focus {
	color: #bababa;
}
#footer .last {
	float: right;
}

#gutter {
	position: absolute;
	bottom: -300px; 
}
#gutter dl {
	float: left;
	margin: 0 0 20px 35px;
	padding: 0;
	
}
#gutter dt,
#gutter dd {
	margin: 0 45px 0 0;
	padding: 0;
	list-style: none;
}
#gutter dt {
	font: 1.3em/1 'HelveticaNeueW01-57Cn', Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	margin-bottom: 5px;
}
#gutter a {
	color: #666;
	text-decoration: none;
}
#gutter a:hover {
	color:#999;
	text-decoration: underline;
}


/* Forms */
#contactForm {
	width: 674px;
	height: 417px;
}
#contactform #map {
	float: left;
}
#contactForm #cmsForm {
	float: right;
}
#contactForm h2 { 
	width: 218px;
	margin-right: 32px;
	font: 2.2em/1 'HelveticaNeueW01-57Cn', Arial, Helvetica, sans-serif;
	color: #a8a8a8;
}
#contactForm .address {
	font-size: 1.4em;
	line-height: 1.3;
	margin-bottom: 10px;
	color: #cecece;
}
#contactForm .reginfo {
	font-size: 0.9em;
	line-height: 1.3;
	margin-top: 5px;
	color: #b3b3b3;
}
.formarea{
	vertical-align: top;
	width: 218px;
	margin-right: 32px;
	border: none;
}
.formarea p {
	margin: 0 0 10px 0 ;
	padding: 0;
}
.formarea p label {
	display: block;
	color: #a8a8a8;
	font: 2.1em/1 'HelveticaNeueW01-77BdCn 692722', Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: -1px;
	margin-bottom: 2px;
}
.formarea select{
	padding: 0;
	width: 174px;
}
.textform {
	background: #4d4d4d !important;
}
.textformfocus {
	background: #000 !important;
}
.textform, 
.textformfocus {
	color: #cecece;
	padding: 5px 6px;
	width: 205px;
	border: 1px solid #a8a8a8;
	font: 1.2em Arial, Helvetica, sans-serif;
	vertical-align: top;
}
.inline {
	float: left;
	width: 120px;
}

/* Ajax & Error Checking */

.formerror .textform, 
.formerror .textformfocus {
	border: 1px solid #d11010;
	background: #513434 !important;
}

.formerror label:after {
	color: #d11010;
	content: " *";
}
.formerror label {
	color: #000;
}
.error {
	color: #fff;
	font-weight: bold;
	width: 218px;
}
#waiting {
	position: absolute;
	width: 250px;
	margin: 50px 0 0 410px;
	text-align: center;
}

/* Extras */

.clear{
	clear: both;
	display: block;
}
.hidden {
	position: absolute; 
	left: -9999px; 
}
.hand {
	cursor: pointer;
}
.textleft {
	text-align: left !important;
}
.textcenter {
	text-align: center !important;
}
.textright {
	text-align: right !important;
}
.right {
	float: right;
}
.left {
	float: left;
}