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

* {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

BODY {
	font-size: 62.5%;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	margin: 0;
	padding: 0;
	height: 100%;
	background: url(images/background.jpg) no-repeat fixed;
	width: 6608px;
}

html, body, #wrap {
	height: 100%;
}

body > #wrap {
	height: auto; 
	min-height: 100%;
}

#wrap {
	width: 100%;
	height: auto;
	min-height: 100%;
}

#masthead {
	width: 995px;
	height: 250px;
	float: left;
	position: fixed;
}

	#masthead .logo {
		margin: 4.5% 0 0 0;
		padding: 0;
		background: url(images/site-logo.png) no-repeat;
		width: 417px;
		height: 79px;
		float: left;
		overflow: hidden;
		text-indent: -1000px;
	}
	
		#masthead .logo A {
			width: 100%;
			height: 79px;
			display: block;
			text-decoration: none;
		}
	
	#masthead .navigation {
		margin: 7% 0 0 117px;
		padding: 0;
		list-style: none;
		float: left;
	}
	
	#masthead .navigation LI {
		float: left;
		font-size: 14px;
		background: #f98435;
		font-weight: bold;
		color: #f98435;
		width: 99px;
		height: 29px;
		text-align: center;
		line-height: 2em;
		margin: 0 5px 0 0;
	}
		
		#masthead .navigation LI A {
			text-decoration: none;
			color: #ffffff;
			width: 100%;
			height: 29px;
			display: block;
		}
		
		#masthead .navigation LI:hover A {
			background: #fdcc2a;
		}
		
		#masthead .navigation LI.jumpto {
			width: 75px;
			background: none;
			text-align: left;
		}
		
#siteSections {
	width: 100%;
	height: auto;
	min-height: 100%;
	list-style: none;
	position: relative;
	margin: 0;
	padding: 0 0 80px 0;
	top: 170px;
}

#siteSections LI {
	float: left;
	width: 1620px;
	height: auto;
	min-height: 100%;
	padding: 0 0 0 32px;
}

	#siteSections LI H1 {
		width: 917px;
		height: auto;
		min-height: 100%;
		font-size: 43px;
		color: #42403f;
		margin: 0 0 20px 0;
		letter-spacing: -0.01em;
		float: left;
	}
	
	#siteSections LI H2 {
		width: 917px;
		height: auto;
		min-height: 100%;
		font-size: 24px;
		color: #42403f;
		line-height: 1.5em;
		letter-spacing: -0.03em;
		float: left;
	}
	
	#siteSections LI .button-red {
		width: 240px;
		height: 61px;
		background: url(images/button-arrow.png) no-repeat 95% 53% #ee2732;
		position: relative;
		float: left;
		margin: 20px 0 0 40.2%;
	}
		#siteSections LI .button-red A {
			width: 100%;
			height: 61px;
			display: block;
			color: #ffffff;
			line-height: 3.4em;
			font-size: 18px;
			font-weight: bold;
			text-decoration: none;
			text-indent: 10px;
		}
		
		#siteSections LI .button-red:hover A {
			background: url(images/button-arrow.png) no-repeat 95% 53% #ffc628;
		}
		
		#siteSections LI .serviceList {
			list-style: none;
			width: auto;
			margin: 0;
			padding: 0;
			float: left;
		}
		
			#siteSections LI .serviceList LI {
				width: 224px;
				height: auto;
				margin: 0 40px 0 0;
				float: left;
				padding: 0;
			}
			
				#siteSections LI .serviceList LI H2 {
					width: 100%;
					height: auto;
					min-height: 100%;
					font-size: 24px;
					color: #42403f;
					line-height: 1.5em;
					letter-spacing: -0.03em;
					float: left;
				}
				
				#siteSections LI .serviceList LI P {
					width: 100%;
					height: auto;
					min-height: 100%;
					font-size: 14px;
					color: #5b5b4c;
					line-height: 1.5em;
					letter-spacing: -0.03em;
					float: left;
					margin: 0 0 5px 0;
					font-weight: bold;
				}
				
	#siteSections LI#work UL {
		list-style: none;
		margin: 0;
		padding: 0;
		
	}
	
	#siteSections LI#work UL LI.workNav {
		width: 253px;
		height: auto;
		min-height: 100%;
		float: left;
		padding: 0;
	}
	
		#siteSections LI#work UL LI.workNav H1 {
			width: 100%;
			margin: 0 0 10px 0;
			padding: 0;
			float: left;
			text-decoration: none;
		}
		
		#siteSections LI#work UL LI.workNav H3 {
			color: #535353;
		}
		
		#siteSections LI#work UL LI.workNav H1 A {
			width: 100%;
			display: block;
			font-size: 18px;
			color: #42403f;
			letter-spacing: -0.01em;
			text-decoration: none;
		}
		
		#siteSections LI#work UL LI.workNav H1 A:hover {
			color: #fdcc2a;
		}
		
		#siteSections LI#work UL LI.workNav H3 {
			width: 100%;
			font-size: 14px;
			margin: 0 0 10px 0;
			letter-spacing: -0.01em;
			padding: 0;
			float: left;
			text-decoration: none;
		}
		
		#siteSections LI#work UL LI.workArea{
			width: 638px;
			height: 257px;
			float: left;
			padding: 0;
		}
		
			#siteSections LI#work UL LI.workArea UL.wrapper {
				width: 638px;
				height: 257px;
				float: left;
				margin: 0;
				padding: 0;
				list-style: none;
				background: #353535;
			}
			
			#siteSections LI#work UL LI.workArea UL.wrapper LI {
				float: left;
				margin: 0;
				padding: 0;
				width: 319px;
				height: 257px;
			}
			
			#siteSections LI#work UL LI.workArea UL.wrapper LI.info {
				background: #353535;
			}
			
			#siteSections LI#work UL LI.workArea UL.wrapper LI.info DIV.content {
				padding: 16px;
				font-weight: bold;
				color: #b9b9b9;
				font-size: 14px;
				line-height: 1.6em;
			}
			
				#siteSections LI#work UL LI.workArea UL.wrapper LI.info DIV.content SPAN.projectName {
					font-size: 18px;
					color: #fdcc2a;
				}
				
				#siteSections LI#work UL LI.workArea UL.wrapper LI.info DIV.content SPAN.line STRONG {
					color: #f0f0f0;
				}
				
				#siteSections LI#work UL LI.workArea UL.wrapper LI.info DIV.content P {
					margin: 20px 0 0 0;
					font-size: 11px;
					line-height: 1.7em;
				}
				
					#siteSections LI#work UL LI.workArea UL.wrapper LI.info DIV.content UL.launchNav {
						margin: 20px 0 0 0;
						width: 100%;
						padding: 0;
						list-style: none;
					}
					
					#siteSections LI#work UL LI.workArea UL.wrapper LI.info DIV.content UL.launchNav LI {
						width: 50%;
						padding: 0;
					}
					
					#siteSections LI#work UL LI.workArea UL.wrapper LI.info DIV.content UL.launchNav LI.launchSide {
						text-align: left;
					}
					
					#siteSections LI#work UL LI.workArea UL.wrapper LI.info DIV.content UL.launchNav LI.launchSide A {
						color: #f98435;
						text-decoration: none;
					}
					
					#siteSections LI#work UL LI.workArea UL.wrapper LI.info DIV.content UL.launchNav LI.launchSide A:hover {
						color: #fdcc2a;
					}
					
					#siteSections LI#work UL LI.workArea UL.wrapper LI.info DIV.content UL.launchNav LI.navSide {
						text-align: right;
					}
					
					#siteSections LI#work UL LI.workArea UL.wrapper LI.info DIV.content UL.launchNav LI.navSide A {
						color: #b9b9b9;
						text-decoration: none;
					}
					
					#siteSections LI#work UL LI.workArea UL.wrapper LI.info DIV.content UL.launchNav LI.navSide A:hover {
						color: #fdcc2a;
					}

	#siteSections LI#contact UL {
		list-style: none;
		margin: 10px 0 0;
		padding: 0;
		float: left;
		width: 1000px;
	}
	
	#siteSections LI#contact UL LI {
		margin: 0;
		padding: 0;
		float: left;
	}
	
		#siteSections LI#contact UL LI.emailicon {
			width: auto;
			margin: 0 20px 0 0;
		}
		
		#siteSections LI#contact UL LI.twittericon {
			width: auto;
			margin: 0 20px 0 0;
		}
		
			#siteSections LI#contact UL LI.emailicon IMG {
				padding: 20px 0 0 0;
			}
			
			#siteSections LI#contact UL LI.twittericon IMG {
				padding: 5px 0 0 0;
			}
		
		#siteSections LI#contact UL LI.callofaction {
			width: auto;
			margin: 0 50px 0 0;
		}
		
			#siteSections LI#contact UL LI.callofaction H2 {
				width: 100%;
				font-size: 24px;
				color: #42403f;
				line-height: 1.5em;
				letter-spacing: -0.03em;
				float: left;
			}
			
			#siteSections LI#contact UL LI.callofaction H2 A.email {
				color: #ee2732;
				text-decoration: none;
			}
			
			#siteSections LI#contact UL LI.callofaction H2 A.twitter {
				color: #f98435;
				text-decoration: none;
			}
			
			#siteSections LI#contact UL LI.callofaction H2 A:hover {
				color: #fdcc2a;
			}
	
	#siteSections LI#contact H3 {
		margin: 30px 0 0;
		padding: 0;
		float: left;
		font-size: 14px;
		clear: left;
	}
	
	#siteSections LI#contact UL.socialNetworks {
		margin: 10px 0 0;
		padding: 0;
		float: left;
		clear: left;
	}
	
	#siteSections LI#contact UL.socialNetworks LI {
		margin: 0 10px 0 0;
		padding: 0;
		float: left;
		width: 39px;
		height: 40px;
		text-indent: -1000px;
	}
	
	#siteSections LI#contact UL.socialNetworks LI A {
		width: 39px;
		height: 40px;
		display: block;
	}
	
	#siteSections LI#contact UL.socialNetworks LI.facebook A {
		background: url(images/icon-contact-social.png) no-repeat;
	}
	
	#siteSections LI#contact UL.socialNetworks LI.linkedin A {
		background: url(images/icon-contact-social.png) -48px 0 no-repeat;
	}
	
	#siteSections LI#contact UL.socialNetworks LI.myspace A {
		background: url(images/icon-contact-social.png) -96px 0 no-repeat;
	}
	
	#siteSections LI#contact UL.socialNetworks LI.delicious A {
		background: url(images/icon-contact-social.png) -144px 0 no-repeat;
	}
	
	#siteSections LI#contact UL.socialNetworks LI.digg A {
		background: url(images/icon-contact-social.png) -192px 0 no-repeat;
	}
	
	#siteSections LI#contact UL.socialNetworks LI.vimeo A {
		background: url(images/icon-contact-social.png) -240px 0 no-repeat;
	}
	
	#siteSections LI#contact UL.socialNetworks LI.youtube A {
		background: url(images/icon-contact-social.png) -288px 0 no-repeat;
	}
	
	#siteSections LI#contact UL.socialNetworks LI.flickr A {
		background: url(images/icon-contact-social.png) -336px 0 no-repeat;
	}
	
#footer {
	position: relative;
	margin-top: -80px; /* negative value of footer height */
	height: 80px;
	clear: both;
	background: url(images/footer-background.jpg) repeat-x 0px 29px;
	width: 6608px;
} 

	#footer #otherStuff {
		background: url(images/footer-otherstuff.png) no-repeat;
		width: 140px;
		height: 29px;
		margin: 0 0 0 32px;
		position: fixed;
	}
	
	#footer #footerContent UL {
		margin: 44px 0 0 35px;
		color: #ffffff;
		position: fixed;
	}
	
	#footer #footerContent UL LI {
		margin: 0 30px 0 0;
		float: left;
	}
		
		#footer #footerContent UL LI H5 {
			font-size: 12px;
			float: left;
			line-height: 2.1em;
		}
		
		#footer #footerContent UL LI P {
			color: #d2d2d2;
			font-size: 12px;
			font-weight: bold;
			margin: 13px 0 0 0;
			line-height: 1.8em;
			width: 78%;
		}
		
		#footer #footerContent UL LI DIV.button-grey {
			width: 103px;
			height: 25px;
			margin: 0 0 0 10px;
			float: left;
		}
		
			#footer #footerContent UL LI DIV.button-grey A {
				width: 100%;
				height: 31px;
				display: block;
				color: #707070;
				background: #3c3c3c;
				line-height: 2.1em;
				font-size: 12px;
				font-weight: bold;
				text-decoration: none;
				text-align: center;
			}
			
			#footer #footerContent UL LI DIV.button-grey A:hover {
				color: #9f9f9f;
				background: #454545;
			}
	

/* CLEAR FIX*/
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block; /* Hides from IE-mac \*/
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block; /* End hide from IE-mac */
}

.stripViewer .panelContainer .panel ul {
	text-align: left;
	margin: 0 15px 0 30px;
}
		

/* These 2 lines specify style applied while slider is loading */
.csw {
	width: 100%;
	height: 460px; 
	background: #fff;
	overflow: scroll
}

.csw .loading {
	margin: 200px 0 300px 0; 
	text-align: center
}

.stripViewer { /* This is the viewing window */
	position: relative;
	overflow: hidden; 
	margin: auto;
	width: 700px; /* Also specified in  .stripViewer .panelContainer .panel  below */
	height: 460px;
	clear: both;
	background: #fff;
}
		
.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
	position: relative;
	left: 0; top: 0;
	width: 100%;
	list-style-type: none;
	/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}
		
.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
	float: left;
	height: 100%;
	position: relative;
	width: 700px; /* Also specified in  .stripViewer  above */
}
		
.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
	padding: 10px;
}
		
.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
	display: none;
}
		
.stripNav ul { /* The auto-generated set of links */
	display: none;
}
		
.stripNav ul li {
	display: none;
}
		
.stripNav a { /* The nav links */
	display: none;
}
		
.stripNavL, .stripNavR { /* The left and right arrows */
	display: none;
}