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

@import url('reset.css');

/* FONT STYLES */
@import url('fonts.css');

/* SCREEN STYLES - STANDARD DESKTOP */

* {
outline: none;	
}

body {
background: #0a0a0a;
font-family: 'Lato', Helvetica, Arial, sans-serif;
margin: 5px 0 0;
padding: 0;
}

/* Typography */

h1, h2, h3, h4, h5 {
font-family: 'Bryant Medium', 'Lato', sans-serif;	
}

#main h1 {
color: #fff;
font-size: 17px;
text-transform: uppercase;
}

ul, ol, p, blockquote {
color: #aaa;
font-family: 'Lato', Helvetica, Arial, sans-serif;	
font-size: 15px;
font-weight: 300;
line-height: 21px;
}

p {
padding: 3px 0 15px;	
line-height: 24px;
}

/* Links */

a, a:link {
color: #3CF;
text-decoration: none;	
}

a:hover {
color: #6FF;
text-decoration: underline;	
}

/* Lists */

ul.horizontal {
list-style: none;
margin: 0;
padding: 0;	
}
	ul.horizontal li {
	float: left;
	margin: 0;
	padding: 0;	
	}

/**** General Classes ****/

.width960 {
margin: 0 auto;
padding: 0;
width: 960px;
}

/**** NAVIGATION ****/

nav#main {
float: right;
margin: 31px 30px 0 0;	
}

	nav#main li {
	margin: 0 0 0 30px;	
	}

	nav#main a {
	color: #0a0a0a;
	display: block;
	font-family: "Bryant Medium", Helvetica, Arial, sans-serif;
	font-size: 12px;
	padding: 2px 5px;
	text-transform: uppercase;
	}
		nav#main a:hover {
		background: #67A5B9;
		color: #fff;
		text-decoration: none;
		}


/**** HEADER ****/

header {
background: url(../images/bg_header_blue.jpg) repeat-x top #40C6F2;	
border-bottom: 1px solid #83DAF7;
}
	
	header h1#logo {
	float: left;
	padding: 25px 0 0 5px;	
	}
		header h1#logo a {
		background: url(../images/bg_mainLogo.png) no-repeat left center;
		color: #0a0a0a;
		display: block;
		font-size: 1.25em;
		height: 37px;
		line-height: 37px;
		padding: 0 0 0 55px;
		text-transform: lowercase;		
		}
			header h1#logo a:hover {
			text-decoration: none;	
			}

	header section.mainHeading, header section.contentHeading {
	clear: both;	
	}
		
		section.mainHeading h1 {
		font-family: 'Lato', Helvetica, Arial, sans-serif;
		font-size: 35px;	
		font-weight: 400;
		font-style: italic;
		line-height: 25px;
		padding: 55px 0 0 0;
		margin: 0 0 0 55px;
		}
			section.mainHeading h1 span {
			display: block;
			font-family: 'Lato', Helvetica, Arial, sans-serif;
			font-size: 86px;
			font-style: normal;
			font-weight: 900;
			line-height: 80px;
			margin: 0 0 0 -55px;
			text-transform: uppercase;
			}
			
		section.mainHeading p {
		color: #0a0a0a;
		font-size: 16px;
		font-weight: 700;
		padding: 0 0 30px;
		}
		
		section.contentHeading h1 {
		font-family: 'Lato', Helvetica, Arial, sans-serif;
		font-size: 45px;
		font-weight: 900;
		line-height: 45px;	
		margin: 0;
		padding: 55px 0 0 0;
		text-transform: uppercase;
		}
		
		section.contentHeading p {
		color: #0a0a0a;
		font-size: 14px;
		font-weight: 300;
		padding: 0 0 10px;	
		}
		
	

/**** MAIN ****/
		
section#main {
background: #151515;
padding: 5px 0 50px 0;	
}

section#main_interior {
background: #151515;
padding: 30px 0 50px 0;	
}

/* Call to Action */

#CTA {
background: #393939;	
border-bottom: 1px solid #484848;
border-top: 1px solid #4c4c4c;
padding: 8px 20px;
}

	#CTA p {
	color: #9c9c9c;
	font-size: 17px;
	line-height: 21px;
	font-weight: 400;
	margin: 0;
	padding: 0;
	}
		#CTA p span {
		display: block;
		font-family: 'Bryant Bold', sans-serif;
		font-size: 22px;
		text-transform: uppercase;
		}
	
	#CTA a.CTA_button {
		background: #3CF;
		color: #0a0a0a;
		display: block;
		float: right;
		font-family: 'Bryant Bold', sans-serif;
		font-size: 21px;
		height: 38px;
		line-height: 38px;
		padding: 0 20px;
		text-transform: uppercase;
		width: 150px;
	}
		a.CTA_button {
		text-decoration: none;	
		}


/* Recent Work */

#recent_work {
margin: 20px auto 0;
padding: 12px 0 0;
width: 960px;	
}
	
	#recent_work h1 {
	text-align: center;	
	}
	
	#recent_work p {
	text-align: center;	
	}
	
	#recent_work ul {
	padding: 10px 0 0;	
	}
	
	#recent_work ul li {
	background: #323232;
	border: 1px solid #555;
	display: block;
	height: 190px;
	margin: 0 10px 0 0;
	padding: 5px;
	width: 300px;
	}
		#recent_work ul li.last {
		margin: 0;
		}
		
	#recent_work ul li a {
	display: block;
	height: 190px;
	width: 300px;	
	text-indent: -9999px;
	}
		#recent_work a.smac {
		background: url(../images/work/smac_frontpage_thumb.jpg) no-repeat;	
		}
		#recent_work a.fab {
		background: url(../images/work/fab_frontpage_thumb.jpg) no-repeat;
		}
		#recent_work a.puryear {
		background: url(../images/work/puryear_frontpage_thumb.jpg) no-repeat;	
		}

/* Services */

#services {
clear: both;
float: left;
padding: 40px 0 0;	
width: 960px;
}
	
	#services ul {
	padding: 10px 0 0;
	}

	#services li {
	display: block;
	height: 80px;
	padding: 0 0 10px 60px;
	width: 180px;	
	}
		#services li.design {
		background: url(../images/icon_easel.png) no-repeat;	
		}
		#services li.develop {
		background: url(../images/icon_code.png) no-repeat;	
		}
		#services li.cms {
		background: url(../images/icon_cms.png) no-repeat;	
		}
		#services li.other {
		background: url(../images/icon_other.png) no-repeat;	
		}

	#services li h1 {
	color: #666;
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	font-size: 14px;	
	padding: 0 0 8px;
	text-transform: capitalize;
	}
	#services li p {
	color: #999;
	font-size: 12px;	
	}
		#services li p span, #services li p a {
		font-size: 13px;
		text-transform: uppercase;	
		}
		
		#services li p a {
		display: block;
		font-size: 13px;
		text-transform: uppercase;
		}

/* Clients */

#clients {
float: right;
padding: 40px 0 0;
width: 960px;	
}

	#clients p {
	font-size: 14px;
	line-height: 21px;	
	padding: 10px 0 2px;
	}
	
	#clients ul {
	display: block;
	padding: 3px 0;
	margin: 0 0 12px;
	}
		#clients ul li {
		background: url(../images/bullet_arrow_blue.png) no-repeat left center;
		padding: 0 24px 0 18px;
		margin: 0 0 12px;
		}
		
/* Aside */

#main_interior aside {
float: left;
width: 280px;	
}

#main_interior aside h1 {
color: #fff;
font-size: 19px;
padding: 0 0 20px 0;
text-transform: uppercase;
}

#main_interior nav {
}
	#main_interior nav li {
	background: url(../images/bullet_arrow_blue.png) no-repeat 5px 7px;
	padding: 0 0 8px 24px;
	}
	
	#main_interior nav a {
	font-family: 16px;	
	}
	

/* Article */

#main_interior article {
float: right;
width: 660px	
}

/* Work */

div.project {
clear: both;
padding: 25px 0;
width: 960px;	
}
	div.project aside {
	float: left;
	padding: 25px 0 0;
	width: 200px;	
	}
		div.project aside h2 {
		color: #666;
		font-size: 12px;
		text-transform: uppercase;
		}
	
	div.project img {
	background: #323232;
	border: 1px solid #666;
	float: right;
	padding: 10px;
	width: 640px;	
	}

/**** FOOTER ****/

footer {
background: #0a0a0a;
border-top: 1px solid #242424;
clear: both;	
padding: 20px 0 125px;
}
	footer p {
	color: #666;
	font-size: 12px;	
	}
		footer p span {
		color: #888;
		display: inline-block;
		padding: 0 12px 0 0;	
		}

	footer a, footer a:link {
	color: #888;	
	}
		footer a:hover {
		color: #aaa;	
		}

	footer nav {
	float: right;	
	}
		footer nav#social_links a {
		display: block;
		height: 27px;
		margin: 0 0 0 10px;
		opacity: 0.5;
		text-indent: -9999px;
		width: 27px;
		}
			footer nav#social_links a:hover {
			opacity: 1;	
			}
			
			footer nav li#facebook a {
			background: url(../images/icon_facebook.png) no-repeat;	
			}
			footer nav li#twitter a {
			background: url(../images/icon_twitter.png) no-repeat;	
			}
			footer nav li#linkedin a {
			background: url(../images/icon_linkedin.png) no-repeat;
			}
			footer nav li#google_plus a {
			background: url(../images/icon_google.png) no-repeat;
			}
	
	footer #like_button {
	float: right;	
	margin: 40px -170px 0;
	text-align: right;
	}

/**** CONTACT FORM ****/

form.contactForm {
background: #323232;
border: 1px solid #444;
float: right;
height: 495px;	
padding: 25px;
width: 615px;
}

form.contactForm label {
color: #999;
display: block;
font-family: "Bryant Medium", Helvetica, Arial, sans-serif;
font-size: 12px;
padding: 0 0 5px 5px;
text-transform: uppercase;
}

	form.contactForm span.required {
		color: #FF1188;
		font-size: 16px;
		line-height: 10px;
	}

form.contactForm textarea {
border: 1px solid #D6D6D6;	
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 20px;
height: 200px;
margin: 0 0 20px 0;
padding: 5px;
width: 605px;
}

form.contactForm input.textbox {
border: 1px solid #D6D6D6;
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
height: 20px;
line-height: 20px;
margin: 0 0 18px 0;
padding: 4px;
width: 432px;	
}

form.contactForm div.fields {
float: left;
width: 440px;	
}

form.contactForm p {
float: right;
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 21px;
margin: 7px 0 0 0;
width: 140px;	
}

form.contactForm input.submit {
display: block;
float: right;
background: url(../images/button_contact_submit.png) top no-repeat;
border: 0;
height: 45px;
margin: 5px 0 0 0;
text-indent: -9999px;
width: 140px;	
cursor: pointer;
}

	form.contactForm input.submit:hover {
	background-position: bottom;	
	}