/*
RedCrownStudio.com - MAIN CSS (main.css)
COPYRIGHT 2008 Red Crown Studio, LLC. All Rights Reserved.
Design & Code by Red Crown Studio - http://www.redcrownstudio.com
*/


/* COLOR PALLETTE
============================================================================
	
	Red - #e31f26
	Teal - #6acfcf
	
	Dark Gray - #282828
	Light Gray - #e6e6e0
			
	Body Copy - #666
	Links - #e31f26			
===========================================================================*/


/* GLOBAL RESET
---------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}

/* remember to define focus styles! */
:focus {outline: 0;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0;}


/* GENERAL SELCTORS
---------------------------------------------------------------------------*/

/* BODY */
body {margin: 0; padding: 0; width: 100%; font: 13px 'Myriad Pro', arial, helvetica, sans-serif; color: #666; background-color: #f1f1f1;}

	p {margin: 0 0 10px 0; line-height: 20px;}
	
	/* HEADINGS */
	h1 {width: 940px; font-size: 55px; font-weight: bold; color: #142626; text-shadow: #56a8a8 0 1px 0px; line-height: normal; text-align: center;}
		h2 {margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: 1px solid #ccc; font-size: 26px; font-weight: normal; text-transform: uppercase; color: #458787; text-align: center; text-shadow: #fff 0 1px 0px;}
			h3 {margin: 0 0 10px 0; font-size: 21px; font-weight: normal; line-height: 26px; color: #e31f26;}
			.leadIn {margin: 0 0 10px 0; font-weight: normal; line-height: 26px; text-transform: none; color: #666;}
				h4 {margin: 0 0 5px 0; font-size: 16px; font-weight: normal; color: #282828;}
					h5 {margin: 0 0 5px 0; font-size: 13px; font-weight: bold; color: #555;}
				
	/* LINKS */
	a:link {color: #e31f26; text-decoration: none;}
	a:visited {color: #e31f26; text-decoration: none;}
	a:hover {color: #000; text-decoration: underline;}
	a:active {color: #e31f26; text-decoration: none;}


/* LAYOUT
---------------------------------------------------------------------------*/
		
/* HEADER WRAP */
#headerWrap {width: 100%; background: #333 url(../images/header_bg.png) 0 0 repeat-x;}

	/* HEADER */
	#header {margin: 0 auto; padding: 20px 0; width: 940px;}
	
		#logo {float: left; width: 220px; height: 40px; background: url(../images/logo.png) 0 0 no-repeat;}
			#logo a {display: block; width: 220px; height: 40px; text-indent: -9999px;}
		
		/* MAIN NAV */
		#nav {float: right; margin: 10px 0 0 0;}
			#nav li {display: inline;}
				#nav a:link {float: left; margin: 0 0 0 20px; font-size: 18px; color: #fff; text-transform: uppercase; text-decoration: none; -webkit-transition: color 0.15s ease-in-out; -moz-transition: color 0.15s ease-in-out; -o-transition: color 0.15s ease-in-out;}
					#nav a:visited {float: left; margin: 0 0 0 20px; font-size: 18px; color: #fff; text-transform: uppercase; text-decoration: none; -webkit-transition: color 0.15s ease-in-out; -moz-transition: color 0.15s ease-in-out; -o-transition: color 0.15s ease-in-out;}
					#nav a:hover {float: left; margin: 0 0 0 20px; font-size: 18px; color: #e31f26; text-transform: uppercase; text-decoration: none; -webkit-transition: color 0.15s ease-in-out; -moz-transition: color 0.15s ease-in-out; -o-transition: color 0.15s ease-in-out;}
					#nav a:active {float: left; margin: 0 0 0 20px; font-size: 18px; color: #e31f26; text-transform: uppercase; text-decoration: none; -webkit-transition: color 0.15s ease-in-out; -moz-transition: color 0.15s ease-in-out; -o-transition: color 0.15s ease-in-out;}

/* INTRO */
#introWrap {width: 100%; height: 250px; background: #2f5c5c url(../images/introwrap_bg.png) 0 0 repeat-x;}	
	#intro {margin: 0 auto; padding: 50px 0; width: 940px; height: 250px; background: url(../images/intro_bg.png) 0 0 no-repeat;}

/* SERVICES WRAP */
#servicesWrap {width: 100%; background-color: #e6e6e0;}
	#services {position: relative; margin: 0 auto; padding: 40px 0; width: 940px; background: url(../images/section_shadow.png) 0 0 no-repeat;}
		#services #webDesign {margin: 10px 0 5px 0; padding: 5px 0 5px 40px; background: url(../images/webdesign_icon.png) 0 0 no-repeat;}
		#services #webDev {margin: 10px 0 5px 0; padding: 5px 0 5px 40px; background: url(../images/webdev_icon.png) 0 0 no-repeat;}
		#services #idDesign {margin: 10px 0 5px 0; padding: 5px 0 5px 40px; background: url(../images/iddesign_icon.png) 0 0 no-repeat;}
		#services #emailMkt {margin: 10px 0 5px 0; padding: 5px 0 5px 40px; background: url(../images/emailmkt_icon.png) 0 0 no-repeat;}
	
		/* SERVICE BLURB */
		.serviceBlurb {float: left; margin: 0 20px 0 0; width: 220px;}
		.serviceBlurbLast {float: left; width: 220px;}

#aboutWrap {width: 100%; background-color: #fff;}
	
	/* ABOUT WRAP */
	#about {margin: 0 auto; padding: 40px 0; width: 940px; background: url(../images/section_shadow_lt.png) 0 0 no-repeat;}
		
		/* LEFT COLUMN */
		#about .leftColumn {float: left; margin: 0 20px 0 0; width: 620px;}
		
		#about .leftColumn h3 + p {margin: 0 0 20px 0;}
		
		/* PROCESS BOXES */
		.processMap {margin: 20px 80px; width: 460px;}
			#design {float: left; margin: 0 20px 0 0; padding: 60px 20px; width: 100px; height: 20px; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; background-color: #000; text-align: center;}
			#develop {float: left; margin: 0 20px 0 0; padding: 60px 20px; width: 100px; height: 20px; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; background-color: #000; text-align: center;}
			#deploy {float: left; margin: 0; padding: 60px 20px; width: 100px; height: 20px; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; background-color: #000; text-align: center;}
			.processMap h4 {font-size: 20px; font-weight: normal; font-style: italic; color: #fff;}
																												
		/* RIGHT COLUMN */
		#rightColumn {float: left; width: 300px;}
			
			/* TEAM */
			#about .bio {padding: 0 0 20px 0; border-bottom: 1px solid #ccc;}
			#about .bio:last-child {padding: 20px 0 0 0; border-top: 1px solid #fff; border-bottom: none;}
				#about .bio .pic {float: left; margin: 0 10px 10px 0; width: 60px; height: 60px; background-color: #fff; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px;}
					#about .bio .pic img {border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px;}
					.title {float: left;}
					#about .bio h4 {margin: 0;}
						#about .bio h5 {margin: 0 0 4px 0; font-weight: normal; font-style: italic;}
							#about .bio p {clear: left; margin: 0;}
							#about .bio ul {float: left; list-style: none; margin: 0;}
								#about .bio li {float: left; display: inline; margin: 0 5px 0 0;}
									#about .bio li .twitter {display: block; width: 20px; height: 20px; text-indent: -9999px; background: url(../images/twitter.png) 0 0 no-repeat;}
									#about .bio li .linkedin {display: block; width: 20px; height: 20px; text-indent: -9999px; background: url(../images/linkedin.png) 0 0 no-repeat;}
			
			#rightColumn li {margin: 0 0 5px 0;}
		
			/* CHECK LIST */
			#rightColumn ul.check {list-style-type: none;}
				#rightColumn ul.check li {padding: 8px 10px 0 30px; font-size: 18px; line-height: 1.5em; color: #e31f26; background: url(../images/check_bullet.png) 0 10px no-repeat;}

	/* Portfolio WRAP */
	#portfolioWrap {width: 100%; background-color: #e6e6e0;}
		#portfolio {position: relative; margin: 0 auto; padding: 40px 0; width: 940px; background: url(../images/section_shadow_lt.png) 0 0 no-repeat;}
		
			/* SCROLL BUTTONS */
			.scrollButtons {position: absolute; top: 6px; right: 0; width: 40px; height: 20px;}
				a.upButton {float: left; display: block; width: 20px; height: 20px; background: url(../images/up_btn.gif) 0 0 no-repeat;}
					a.upButton:hover {background-position: 0 -20px;}
				a.downButton {float: left; display: block; width: 20px; height: 20px; background: url(../images/dn_btn.gif) 0 0 no-repeat;}
					a.downButton:hover {background-position: 0 -20px;}
				
			/* WORK */
			#portfolio li {float: left; width: 300px; margin: 0 20px 30px 0; text-align: center;}
			#portfolio li:nth-child(3n) {clear: right; margin: 0 0 30px 0;}
				#portfolio li h3 {margin: 0;}
			
				.hoverBox {position: relative; margin: 0 0 0 0; padding: 0 0 16px 0; width: 300px; height: 200px; background: url(../images/thumb_shadow.png) 0 100% no-repeat;}
				.hoverBox a {display: block; margin: 0; padding: 8px; width: 284px; height: 184px; background-color: #fff; -webkit-transition: background-color 0.2s ease-in-out; -moz-transition: background-color 0.2s ease-in-out; -o-transition: background-color 0.2s ease-in-out;}
					.hoverBox a:hover {background-color: #282828;}
				.hoverBox .zoom {display: none;}
				.hoverBox:hover .zoom {display: block; position: absolute; z-index: 1; top: 82px; left: 132px; /* opacity: 1; -webkit-transition: opacity 0.2s ease-in; -moz-transition: opacity 0.2s ease-in; -o-transition: opacity 0.2s ease-in; */}
																																		
/* CONTACT */
#contactWrap {width: 100%; height: 250px; background: #6acfcf url(../images/contactwrap_bg.png) 0 100% repeat-x;}

	#contact {overflow: auto; margin: 0 auto; padding: 40px 0; width: 940px; text-align: center !important; background: url(../images/section_shadow_lt.png) 0 0 no-repeat;}
		#contact h2 {margin: 0 auto; padding: 0; width: 540px; color: #3c6363; text-shadow: #b6e9e9 0 1px 0px; border: none;}
			#contact a {display: block; margin: 20px auto 0 auto; padding: 15px 0 0 0; width: 220px; height: 55px; background: url(../images/contact_button.png) 0 0 no-repeat; text-align: center; font-size: 18px; font-weight: bold; color: #fff; text-transform: uppercase;}
			#contact a:hover {background-position: 0 -70px; text-decoration: none;}

/* FOOTER */
#footerWrap {width: 100%; background-color: #282828;}

	#footer {margin: 0 auto; padding: 20px 0; width: 940px;}
		#footer p {float: left; color: #fff;}
		#footer ul {float: right;}
			#footer li {display: inline; margin: 0 10px;}
				#footer a {font-weight: bold; color: #fff; text-decoration: none;}
					#footer a:hover {color: #fff;}
					
							
/* GENERIC CLASSES
---------------------------------------------------------------------------*/

.hide {display: none;}

.clear {clear: both;}

.small {margin: 0 0 0 10px; font-size: 14px;}
.white {color: #fff;}
.light {margin: 0; padding: 0; border: none; font-weight: normal; text-transform: none; color: #fff;}
.callOut {font-weight: bold; text-decoration: underline;}
strong {color: #000;}

.borderBottom {margin: 0 0 20px 0; padding: 0 0 10px 0; border-bottom: 1px solid #ddd;}
.featureWrap {float: left; width: 620px; margin: 10px 0 0 0;}
.blurbWrap {float: left; width: 300px; margin: 5px 0 0 0;}

.gray {color: #282828;}