/******************************************************
Site:           clearfirestudios.com
Created:        Nov 12 2009
Last Modified:  Feb 04 2010 
------------------------------------------------- 
Casey Reid, clearfirestudios.com
casey@clearfirestudios.com | Copyright 2009
==================================================== */

/* Global Reset Styles *******************************/
/* ================================================= */
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;}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
:focus {outline: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
strong{font-weight: bold;}


/* `Clear Floated Elements
-----------------------------------------------------*/
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
.clearfix:after {
	clear: both;
	content: '.';
	display: block;
	visibility: hidden;
	height: 0;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

/* Common Styles *************************************/
/* ================================================= */
body{
	background: #e7e7e8 url(/images/site/body-bg.png) repeat-x;
	color: #333;
	color: rgba(0,0,0,.8);
	font-family: "Helvetica Neue", Helvetia, Arial, sans-serif;
  	font-size: 13px;
  	line-height: 18px;
}
	body#internal{background: #e7e7e8 url(/images/site/body-bg-internal.png) repeat-x;}

h1, h2, h3, h4, h5, h6{
	font-weight: normal;
	line-height: 1;
}

h1{
	color: #3d3d3d;
	font-size: 30px;
	margin-bottom: 25px;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
}
h2{
	color: #3d3d3d;
	font-size: 30px;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
}
h3{
	color: #3d3d3d;
	font-size: 24px;
	margin-bottom: 18px;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
}
h4{
	color: #3d3d3d;
	font-size: 18px;
	margin-bottom: 18px;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
}
h5{
	color: #3d3d3d;
	font-size: 18px;
	margin-bottom: 5px;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
}

p{margin-bottom: 18px;}


a{
	color: #2669c4;
	text-decoration: none;
}
	a:hover{
		color: #000;
		text-decoration: underline;
	}


.content
{
	width:960px;
	margin:0 auto;
	position:relative;
}




/* Header Styles *************************************/
/* ================================================= */
#header{
	background: url(/images/site/header-bg.jpg) no-repeat bottom right;
	height: 161px;
}
	#header h1 {
		position: absolute;
		left: 0;
		top: 40px;
		width: 354px;
	}
	
		#header h1 a {
			background: transparent url(/images/site/logo.png) no-repeat;
			display: block;
			height: 70px;
			text-indent: -9999px;
			width: 354px;
		}
		
	#header ul#nav{
		background: url(/images/site/nav-bg.png) repeat-x;
		height: 39px;
		float: right;
		margin-top: 10px;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	}
		#header ul#nav li{
			float: left;
		}
			#header ul#nav li a{
				color: #c8c8c8;
				display: block;
				font-size: 15px;
				font-weight: bold;
				height: 30px;
				padding: 10px 17px 0;
				text-transform: uppercase;
				-webkit-transition: color .3s linear;
			}
				#header ul#nav li a:hover, #header ul#nav li a.active{
					color: #e6a145;
				}

/* Tagline Styles ************************************/
/* ================================================= */
#tagline{
	height: 143px;
	padding-top: 35px;
	text-align: center;
}
	#tagline h2, #tagline a{
		color: #444;
		line-height: 1.2;
		text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7)
	}

/* Main Content and Module Styles ********************/
/* ================================================= */
#main {margin-top: 25px;}
	#internal #main{margin-top: 35px;}


.mod{
	border-bottom: 1px solid #b2b1b1;
	border-bottom-color: rgba(0,0,0,.2);
	margin-bottom: 25px;
}
	.mod.last{border: none;}
	.mod h2{
		color: #3d3d3d;
		color: rgba(0,0,0,.7);
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 10px;
		text-shadow: none;
		text-transform: uppercase;
	}
		.mod h2 span{font-weight: normal;}
	.mod ul{
		list-style-type: disc;
		margin-left: 15px;
		margin-bottom: 18px;
	}
		.mod ul.arrow-list{
			list-style-type: none;
			margin-left: 0px;
		}
		.mod ul.arrow-list li{
			background: url(/images/site/icon-arrow.png) 0px 5px no-repeat;
			padding-left: 22px;
		}
	
	.mod a.site-external span{display: none;}
		.mod a.site-external:hover span{
			color: #000;
			color: rgba(0,0,0,.8);
			display: inline;
			font-size: 12px;
			text-transform: none;
		}
		.mod a.site-external:hover{text-decoration: none;}
	
	.full{
		float: left;
		position: relative;
		width: 610px;
	}
		.full.right{float: right;}
	
	.col-half{
		float: left;
		padding-right: 20px; 
		width: 295px;
	}
		.col-half.last{padding-right: 0px;}
	
	.secondary{
		float: right;
		width: 300px;
	}
		.secondary.left{float: left;}

		img.glow-border{
			border: 3px solid #fff;
			margin-bottom: 18px;
			/* Outer Glow */
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
			-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
			-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
		}
		img.align-right{
			float: right;
			margin: 0 0 20px 20px;
		}
		img.align-left{
			float: left;
			margin: 0 20px 20px 0;
		}
			.secondary img.align-left{margin-right: 10px;}


/* Callouts Styles ************************************/
/* ================================================= */
#callouts{
	background: url(/images/site/callouts-bg.png) repeat-x;
	border-bottom: 1px solid #fff;
	border-top: 1px solid #fff;
	height: 222px;
	margin-bottom: 10px;
}
	#callouts .column{
		float: left;
		padding: 35px 30px 0 0;
		width: 300px;
	}
		#callouts .last{
			padding-right: 0px;
		}	
		
	p.callouts-btn a{
		background: url(/images/site/callouts-btn.png) 0 0 repeat-x;
		color: #fff;
		font-size: 15px;
		height: 35px;
		line-height: 35px;
		padding: 7px 30px 9px;
		text-align: center;
		text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8)
		/* Rounded Corners */
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		/* Outer Glow */
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
		-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
		-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
		
	}
		p.callouts-btn a:hover{
			background: url(/images/site/callouts-btn.png) 0px -35px repeat-x;
			color: #333;
			text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
			text-decoration: none;
		}
		
/* Work Styles ***************************************/
/* ================================================= */
div.work-item{
	float: left;
	margin: 0 30px 25px 0;
	width: 300px;
}
	div.work-item.last{margin-right: 0px;}
	div.work-item a{display: block;}
		div.work-item a img{
			border: 3px solid #fff;
			/* Outer Glow */
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
			-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
			-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
		}
			div.work-item a:hover img{border-color:#2669c4;}
		div.work-item a strong{
			color: #3d3d3d;
			display: block;
			font-size: 14px;
			margin: 18px 0;
			text-shadow: none;
			text-transform: uppercase;
		}
			div.work-item a strong em{font-weight: normal; font-style: normal;}
			div.work-item a:hover{text-decoration: none;}
		div.work-item a span, div.work a:hover span{
			color: #333;
		}


h1#project-title{float: left;}

p#project-trigger{
	color: #2669c4;
	cursor: pointer;
	float: right;
	margin-top: 15px;
}
	p#project-trigger:hover{color: #000;}
	div#project-list{display: none;}
		div#project-list ul{
			list-style-type: none;
			margin: 0px;
		}
			div#project-list ul li{
				float: left;
				margin: 0 20px 20px 0;
				position: relative;
				width: 176px;
			}
				div#project-list ul li.last{margin-right: 0px;}
				div#project-list ul li img{
					border: 3px solid #fff;
					/* Outer Glow */
					box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
					-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
					-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
				}
					div#project-list ul li a:hover img{border-color:#2669c4;}
				
				div#project-list ul li a span{
					background: #333;
					background: rgba(0,0,0,.6);
					color: #fff;
					display: none;
					position: absolute;
					bottom: 7px;
					left: 3px;
					text-align: center;
					width: 170px;
				}
					div#project-list ul li a:hover span{display: block;}
					div#project-list ul li a span strong{
						display: block;
						font-size: 14px;
						padding: 10px;
						text-transform: uppercase;
					}
					div#project-list ul li a:hover{text-decoration: none;}

div.screens{
	margin-bottom: 25px;
	height: 490px;
	width: 610px;
}
		
	div.screens img{
		border: 5px solid #fff;
		margin: 4px;
		/* Outer Glow */
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
		-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
		-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
	}
	
	ul.screens-nav{
		list-style-type: none;
		margin-bottom: 0px;
	}
		ul.screens-nav li#cycle-prev{
			position: absolute;
			left: -15px;
			top: 220px;
			z-index: 999;
		}
		ul.screens-nav li#cycle-next{
			position: absolute;
			right: -15px;
			top: 220px;
			z-index: 999;
		}

/* Contact Form Styles *******************************/
/* ================================================= */
p.notification{
	background: #bebdbd;
	border: 1px solid #b8602f;
	padding: 10px;
	/* Rounded Corners */
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	/* Inner Glow */
	box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.4);
   	-moz-box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.4);
   	-webkit-box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.4);
}
p.contact-header{
	background: #bebdbd;
	border: 1px solid #8c8c8c;
	padding: 10px;
	/* Rounded Corners */
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	/* Inner Glow */
	box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.4);
   	-moz-box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.4);
   	-webkit-box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.4);
}
	p.contact-header label{
		display: inline;
		margin-left: 15px;
	}
		p.contact-header input{margin-right: 5px;}

form#hello{
	display: none;
}

.contact-form fieldset{
	border-bottom: 1px solid #B2B1B1;
	border-bottom-color: rgba(0,0,0,.2);
	margin-bottom: 20px;
	padding-bottom: 10px;
}
	#contact fieldset.last{border-bottom: none;}

.contact-form legend{
	color: #3d3d3d;
	color: rgba(0,0,0,.5);
	font-size: 14px;
	font-weight: bold;
	padding-bottom: 10px;
	text-shadow: none;
	text-transform: uppercase;
}
	.contact-form label{
		display: block;
		font-weight: bold;
		margin-bottom: 3px;
	}
		.contact-form label em{color: #b8602f;}
		.contact-form label.error{color: #b8602f;}
		.contact-form input, .contact-form textarea{
			background-color: #e7e7e8; 
			background:rgba(255,255,255,.1);
			border-color: #3d3d3d;
			border:1px solid rgba(0,0,0,.5);
			padding:5px;
			width:400px;
			/* Rounded Corners */
			border-radius: 3px;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			/* Inner Glow */
			box-shadow:inset 0 0 3px rgba(0, 0, 0, 0.4);
   			-moz-box-shadow:inset 0 0 3px rgba(0, 0, 0, 0.4);
   			-webkit-box-shadow:inset 0 0 3px rgba(0, 0, 0, 0.4);
		}
			.contact-form input.error, .contact-form textarea.error{border-color: #b8602f}

		.contact-form select{
			background-color: #e7e7e8; 
			background:rgba(255,255,255,.1);
			border-color: #3d3d3d;
			border:1px solid rgba(0,0,0,.5);
			padding:5px;
			/* Rounded Corners */
			border-radius: 3px;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			/* Inner Glow */
			box-shadow:inset 0 0 3px rgba(0, 0, 0, 0.4);
   			-moz-box-shadow:inset 0 0 3px rgba(0, 0, 0, 0.4);
   			-webkit-box-shadow:inset 0 0 3px rgba(0, 0, 0, 0.4);
		}
			.contact-form select.error{border-color: #b8602f;}
		
		.contact-form button.submit-btn{
			background: url(/images/site/callouts-btn.png) 0 0 repeat-x;
			border: none;
			color: #fff;
			cursor: pointer;
			font-size: 15px;
			height: 35px;
			padding: 7px 30px 9px;
			text-align: center;
			text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8)
			/* Rounded Corners */
			border-radius: 5px;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			/* Outer Glow */
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
			-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
			-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
			
		}
			.contact-form button.submit-btn:hover{
				background: url(/images/site/callouts-btn.png) 0px -35px repeat-x;
				color: #333;
				text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7)
			}
			
	dl#contact-methods{
		margin-bottom: 18px;
		overflow: hidden;
	}
		dl#contact-methods dt{
			color: #3d3d3d;
			color: rgba(0,0,0,.5);
			float: left;
			text-align: right;
			width: 85px;
		}
			dl#contact-methods dt span{padding: 0 6px;}
		dl#contact-methods dd{
			float: left;
			width: 200px;
		}
		dl#contact-methods a{
			color: #333;
		}
			dl#contact-methods a:hover{color: #000;}

	a.link-vcard{
		background: url(/images/site/icon-card.png) no-repeat left;
		padding: 0 0 0 25px;
	}
	a.link-rfp{
		background: url(/images/site/icon-documents-text.png) no-repeat left;
		padding: 0 0 0 25px;
	}

/* Footer Styles *************************************/
/* ================================================= */
#footer{
	color: #5a5a5a;
	font-size: 12px;
	margin-bottom: 20px;
}
	p#copyright{
		float: left;
	}
		p#copyright span{padding: 0 5px;}
		p#copyright a{color: #5a5a5a;}
			p#copyright a:hover{
				color: #000;
				text-decoration: underline;
			}
			
	p#ee-power{float: right;}