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

	Title: CSS
	Author: Blake Hilscher of Skywide Design
	Date: 2009

***********************************************************************************************

	1. Global Reset
	
	2. General Elements
	
	3. Layout
		3.1 Header
		3.2 Navigation
		3.3 Columns And Rows
		3.3.1 Contact Form
		3.4 Buttons
		3.5 Our Work
		
***********************************************************************************************/


/* 1. 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, images, ins, kbd,q, s, samp, small, strike, strong, sub, sup, tt, var, 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-weight: inherit; 
		font-style: inherit; 
		font-size: 100%;
		font-family: inherit; 
		vertical-align: baseline;
	}

	ol, ul {
		list-style: none;
	}
	
	table {
		border-collapse: separate; 
		border-spacing: 0;
	}

	caption, th, td {
		text-align: left; 
		font-weight: normal;
	}
	h1, h2, h3, h4, h5, h6 {
		font-weight:normal;
	}

/* 2. General Elements
-----------------------------------------------------------------------------------------------
===============================================================================================*/	
	html {
		background:#292d2f;
	}
	body {
		font-family: Arial, Verdana, sans-serif;
		font-size: 62.5%;
		text-align: center;
		color: #042533;
		background: #cbe1ec url(../images/bg-page.png) center top repeat-x;
	}

	hr { 
		display: none;
	}
	
	strong {
		font-weight: bold;
	}
		
	em {
		font-style: italic;
	}
	
	address {
		font-style: normal;
	}
	
	input, textarea, select {
		font: 1em Arial, Verdana, sans-serif;
	}

	a {
		color: #bc0303;
		text-decoration: none;
		outline: none;
	}
	a:hover {
		color: #bc0303;
		text-decoration: underline;
	}

	a:visited {}

	a:active {}
	


/* 3. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	
	
	#wrapper {
		width:100%;
		background:url(../images/bg-header.png) center top no-repeat;
	}
	#container {
		margin: 0 auto;
		width: 960px;
		text-align: left;
		font-size: 1.3em;
		background:url(../images/bg-header.png) center top no-repeat;
	}
	.clearer {
		clear:both;
	}

	
/* 3.1 HEADER
------------------------------------------------------------------------------------------------ */
#header {
	position:relative;
	height:160px;
	overflow:hidden;
}
	#header h1#logo {
		position:absolute;
		width:420px;
		height:90px;
		top:65px;
		left:0px;
		text-indent:-9999em;
		background:url(../images/title4.gif) left top no-repeat;
	}
	#header h1#logo a{
		display: block;
		width:420px;
		height:90px;
	}
	#slogan{
		float:right;
		margin-top:47px;
		margin-right:68px;
		width:181px;
		height:79px;		
		background:url(../images/talent.gif) left top no-repeat;
		z-index: 100;
	}
	#slogan h1{
		position:absolute;
		text-indent:-9999em;
	}


/* 3.2 NAVIGATION
------------------------------------------------------------------------------------------------ */
#navigation {
	width:960px;
	height:50px;
	background:#2677b6 url(../images/bg-navigation.png) center top repeat-x;
}
	#navigation li {
		float:left;
	}
	#navigation li.fist_element {	
		margin-left:19px;
		display:inline;
	}
	#navigation li.float_right {	
		float:right;
		display:inline;
	}
	#navigation a {
		height:32px;
		float:left;
		color:#ffffff;
		font-family:Arial, Verdana, sans-serif;
		font-size:16px;
		padding:18px 19px 0px 19px;
		text-decoration:none;
	}
	#navigation a:hover {
		background:url(../images/bg-navigation-selected.png) right top repeat-x;
	}
	#navigation a.selected {
		background:url(../images/bg-navigation-selected.png) right top repeat-x;
	}


/* 3.3 COLUMNS, ROWS, lAYOUT
------------------------------------------------------------------------------------------------ */		

.grid_1 { width:60px; }
.grid_2 { width:140px; }
.grid_3 { width:220px; }
.grid_4 { width:300px; }
.grid_5 { width:380px; }
.grid_6 { width:460px; }
.grid_7 { width:540px; }
.grid_8 { width:620px; }
.grid_9 { width:700px; }
.grid_10 { width:780px; }
.grid_11 { width:860px; }
.grid_12 { width:940px; }

.column {
	margin: 0px 10px 0px 10px;
	overflow: hidden;
	float: left;
}
	.column.thickmargins{
		margin: 0px 20px 0px 20px;
	}
.row {
	margin: 20px auto;
	overflow: hidden;
}
.dialog{
	margin-top:20px;
	background:#ffffff url(../images/bg-column_topleft.png) top left no-repeat;
}
	.dialog p{
		margin-top:20px;
		margin-bottom:21px;
		line-height:21px;
	}
		p.first{
			margin-top:0px;
		}
		p.last{
			margin-bottom:0px;
		}
		div.first{
			margin-top:0px;
		}
		div.last{
			margin-bottom:0px;
		}		
	.dialog .header {
		height:37px;
		background:url(../images/bg-column_topright.png) top right no-repeat;
	}
	.dialog .short {
		height:20px;
	}
		.dialog .header h2 {
			float:left;
			margin-left:20px;
			padding:12px 14px 13px 14px;
			font-family:Arial, Verdana, sans-serif;
			color:#ffffff;
			font-size:16px;
			line-height:12px;
			font-weight:bold;
			text-transform:uppercase;
			background:url(../images/bg-column-header.png) top left repeat-x;	
		}
	.dialog h3{
		font-family:Arial, Verdana, sans-serif;
		font-size:16px;
		line-height:26px;
		font-weight:bold;
		margin-bottom:8px;
		color:#2475b4;
	}	
	.dialog h4{
		font-family:Arial, Verdana, sans-serif;
		font-size:14px;
		line-height:12px;
		font-weight:bold;
		margin-bottom:8px;
		color:#2475b4;
	}
	.dialog .content{
		padding: 20px;
	}
	.dialog .footer{
		height:20px;
		background:url(../images/bg-column_bottomleft.png) bottom left no-repeat;
	}
		.dialog .footerRight{
			height:20px;
			background:url(../images/bg-column_bottomright.png) bottom right no-repeat;
		}
.textcenter{
	text-align:center;
}
.textright{
	text-align:right;
}
.divcenter{
	margin:0 auto;
	float: none;		
}
.no_margins{
	margin:0;
}

	
	/* 3.3.1 CONTACT FORM
	-----------------------------------------*/
	
	#contact{
		margin-top:20px;
	}
	#contact input {
		float: left;
		margin: 0;
		padding: 5px;
		width: 195px;
		border-top: 1px solid #b7d6e5;
		border-left: 1px solid #b7d6e5;
		border-right: 1px solid #b7d6e5;
		border-bottom: 1px solid #b7d6e5;
		background: #eef2f4;
		outline: none;
	}
	#contact textarea {
		margin: 0;
		padding: 5px;
		width: 195px;
		height:65px;
		border-top: 1px solid #b7d6e5;
		border-left: 1px solid #b7d6e5;
		border-right: 1px solid #b7d6e5;
		border-bottom: 1px solid #b7d6e5;
		background: #eef2f4;
		outline: none;
		line-height: 1.5;
	}
	#contact button.submit {
		background:url(../images/button-submit.png) left top no-repeat;
		height:30px;
		width:82px;
		border:0;
		cursor:pointer;
		margin-left:150px;
		font-size: 0px;
		display:block;
		line-height: 0px;
	}
	#contact button.submit:hover {
		background-position:left bottom;
	}
		
		
/* 3.4 BUTTONS
------------------------------------------------------------------------------------------------ */
.buttons{
	height:30px;
}
	.buttons li{
		float:left;
		margin-right:10px;
	}
a.button{
	text-indent:-9999em;	
	display:block;
	height:30px;
}
	a.more_work {
		background:url(../images/button-viewmorework.png) left top no-repeat;
		width:151px;
	}
		a.more_work:hover {
			background:url(../images/button-viewmorework.png) left bottom no-repeat;
		}
	a.view_work {
		background:url(../images/button-viewwork.png) left top no-repeat;
		width:103px;
	}
		a.view_work:hover {
			background:url(../images/button-viewwork.png) left bottom no-repeat;
		}
	a.contact_us {
		background:url(../images/button-contactus.png) left top no-repeat;
		width:114px;
	}
		a.contact_us:hover {
			background:url(../images/button-contactus.png) left bottom no-repeat;
		}				
	a.submit {
		background:url(../images/button-submit.png) left top no-repeat;
		width:82px;
	}
		a.submit:hover {
			background:url(../images/button-submit.png) left bottom no-repeat;
		}
	a.view_services {
		background:url(../images/button-viewservices.png) left top no-repeat;
		width:128px;
	}
		a.view_services:hover {
			background:url(../images/button-viewservices.png) left bottom no-repeat;
		}
	a.about_us {
		background:url(../images/button-aboutus.png) left top no-repeat;
		width:98px;
	}
		a.about_us:hover {
			background:url(../images/button-aboutus.png) left bottom no-repeat;
		}		
	a.click_here {
		background:url(../images/button-clickhere.png) left top no-repeat;
		width:106px;
	}
		a.click_here:hover {
			background:url(../images/button-clickhere.png) left bottom no-repeat;
		}			
		

/* 3.5 ABOUT US
------------------------------------------------------------------------------------------------ */

.aboutRow{
	margin-top:10px;
}

.teamText{
	margin:10px auto;
	padding-right:20px;
	overflow:hidden;
}

.serviceImage{
	float: left;
	margin: 0px 20px 0px 0px;
	overflow: hidden;
	width:100px;
}

.serviceText{
	float: left;
	overflow: hidden;
	width:380px;
}

.serviceText h3{
	line-height:14px;
	margin-bottom:12px;
}

.serviceText .button{
	float:right;
}

.questionMark{
	float:left;
	width:70px;
	margin-left:20px;
}

.questionText{
	float:left;
	width:250px;
	margin-left:20px;
}

/* 3.6 OUR WORK
------------------------------------------------------------------------------------------------ */

.projectBorder{
	margin:20px;
	border:1px solid #b3d5e8;
	padding:4px;
	background:white;
}
.projectBg {
	overflow:hidden;
	color:#2273b2;
	background:#e2eff5 url(../images/bg-work_projectBox.png) left top repeat-x;
	padding:15px;
}
	.projectBg .projectThumbnail{
		float:left;
		width:342px;
	}
	.projectBg .projectThumbnail img{
		background:white;
		padding:5px;
		border:1px solid #d3e6ef;
	}
	.projectBg .projectDescription{
		float:left;
		margin-left:20px;
		width:258px;
	}	
	.projectBg h3{
		font-family:Arial, Verdana, sans-serif;
		font-size:20px;
		line-height:27px;
		letter-spacing:0.75px;
		font-weight:bold;
		margin-top:4px;
		margin-bottom:8px;
		color:#2475b4;
	}	
	.projectBg h4{
		font-family:Arial, Verdana, sans-serif;
		font-size:16px;
		line-height:26px;
		letter-spacing:0.75px;
		font-weight:bold;
		margin-bottom:8px;
		color:#2475b4;
	}

ul.checkmarks {
	list-style-type: none;
	margin:0;
	margin-bottom:12px;
	padding: 0;
	}
	ul.checkmarks li {
		background-image:url(../images/checkmark.png);
		background-position:0 50%;
		background-repeat:no-repeat;
		padding:5px 0 6px 27px;
	}
img.thumbnail {
	background:white;
	padding:5px;
	border:1px solid #2475b4;
}


/* 3.7 CONTACT US
------------------------------------------------------------------------------------------------ */

.contactInfo{
	margin-bottom:10px;
	line-height:22px;
}
#contactLarge{
	margin-top:20px;
}
.labelPadding{
	padding-top:6px;
}
#contactLarge input {
	float: left;
	margin: 0;
	padding: 5px;
	width: 355px;
	border-top: 1px solid #b7d6e5;
	border-left: 1px solid #b7d6e5;
	border-right: 1px solid #b7d6e5;
	border-bottom: 1px solid #b7d6e5;
	background: #eef2f4;
	outline: none;
}
#contactLarge textarea {
	margin: 0;
	padding: 5px;
	width: 355px;
	height:200px;
	border-top: 1px solid #b7d6e5;
	border-left: 1px solid #b7d6e5;
	border-right: 1px solid #b7d6e5;
	border-bottom: 1px solid #b7d6e5;
	background: #eef2f4;
	outline: none;
	line-height: 1.5;
}
#contactLarge button.submit {
	background:url(../images/button-submit.png) left top no-repeat;
	height:30px;
	width:82px;
	border:0;
	cursor:pointer;
	margin-left:150px;
	font-size: 0px;
	display:block;
	line-height: 0px;
}
#contactLarge button.submit:hover {
	background-position:left bottom;
}

#requestQuote{
	margin-top:20px;
}
#requestQuote label{
	display:block;
	margin-bottom:14px;

}
#requestQuote input {
	float: left;
	margin: 0;
	padding: 5px;
	width: 260px;
	border-top: 1px solid #b7d6e5;
	border-left: 1px solid #b7d6e5;
	border-right: 1px solid #b7d6e5;
	border-bottom: 1px solid #b7d6e5;
	background: #eef2f4;
	outline: none;
}
#requestQuote textarea {
	margin: 0;
	padding: 5px;
	width: 480px;
	height:100px;
	border-top: 1px solid #b7d6e5;
	border-left: 1px solid #b7d6e5;
	border-right: 1px solid #b7d6e5;
	border-bottom: 1px solid #b7d6e5;
	background: #eef2f4;
	outline: none;
	line-height: 1.5;
}
#requestQuote button.submit {
	background:url(../images/button-submit.png) left top no-repeat;
	height:30px;
	width:82px;
	border:0;
	cursor:pointer;
	font-size: 0px;
	display:block;
	line-height: 0px;
}
#requestQuote button.submit:hover {
	background-position:left bottom;
}

/* 3.8 404 PAGE NOT FOUND
------------------------------------------------------------------------------------------------ */

.not_found_indent {
	padding-left:102px;
}
div.error{
	color:#a10606;
	font-size:14px;
	font-weight:bold;
	margin-top:30px;
	padding:15px 10px 15px 10px;
	text-align:center;
	border:2px solid #a10606;
	background:#ffa602 url(../images/bg-error.png) center top repeat-x;
}


/* 3. FOOTER
------------------------------------------------------------------------------------------------ */

#footer{
	margin-top:60px;
	text-align:center;
	clear:both;
	height:135px;
	padding-top:25px;
	font-size:11px;
	border-top:1px solid #8dbdd6;
	background:#abd2e5;

}
	#footer h4#logo {
		margin:20px auto;
		width:300px;
		height:44px;
		left:0px;
		text-indent:-9999em;
		background:url(../images/title.gif) left top no-repeat;
	}
	#footer h4#logo a{
		display: block;
		width:300px;
		height:44px;
	}