/*
Copyright 2008, 10 Volt Media
------------------------

swatches
------------------------
	A2DE3E	- green (on dark)
	78a42e	- green (on light)
	81b2e6	- blue (on dark)
	4b85c4	- blue (on light)
	5e310f	- brown
	1a1a1a	- dark gray
------------------------
*/

/* resets... */
* {
	margin: 0px;
	padding: 0px;
}

body {
	font-size: 100%;
	font-family: "Lucida Sans", Verdana, sans-serif;
	background: #0f0f0f;
}

a { color: #4b85c4; text-decoration: none; }
a:hover { color: #78a42e; }

img, a img { border: none; background: transparent; }

/* fonts and type elements
================================= */



/* structure
================================= */
#page-wrapper {
	width: 100%;
	background: #fff;
}

#page {
	margin: 0 auto;
	width: 950px;
	min-height: 500px;
	height: auto !important;
	height: 500px;
	background: url(img/layout_skyline_day.jpg) no-repeat center bottom;
}	

/* discard...? */
#page-indside {
	margin: 0 auto;
	width: 950px;
	height: 500px;
	background: url(img/layout_skyline_day_nobuildings.jpg) no-repeat center bottom;
}	


/* navigation
------------------------------ */
#nav {
	margin: 0 auto;
	width: 100%;
	height: 30px;
	background: #111;
	border-bottom: solid 2px #000;
}

	#nav ul {
		width: 940px;
		height: 31px;
		margin: 0 auto;
		list-style-type: none;
	}
	
	#nav li {
		float: left;
		width: 185px; /* IE will want this at 189 or less */
		height: 22px;	
		padding: 8px 0 0 0;
		overflow: hidden;		
		letter-spacing: 0.075em;
		text-transform: uppercase;
		text-align: center;
		font-size: 0.75em;
		color: #fff;		
		cursor: pointer;
	}
	#nav li:hover { background: #222; }
	#nav li:hover a { color: #A2DE3E; }
	
	#nav a, #nav li.faux-link { color: #fff; cursor: pointer; }
	#nav a:hover, #nav li.faux-link:hover { color: #A2DE3E; }
/*
#nav-wrapper-inside { width: 100%; }

	#nav-inside {
		padding: 8px 0;
		background: #111;
		text-transform: uppercase;
		text-align: center;
		font-size: 0.875em;
		color: #fff;
	}
	#nav-inside span {
		margin: 0 0 0 45px;
	}
	
	#nav-inside a, #nav-inside span.faux-link { color: #fff; cursor: pointer; }
	#nav-inside a:hover, #nav-inside span.faux-link:hover { color: #A2DE3E; }
*/	

#logo, #logo-inside {
	float: left;
	margin: 45px 0 0 0;
	height: 75px;
	width: 100px;
	background: #000 url(img/layout_logo_sm_white_b.png) no-repeat center;
}
#logo-inside { margin: 14px 0 0 0; }
#logo-inside:hover { background: #000 url(img/layout_logo_sm_bldg.png) no-repeat center; }

#logo-inside a {
	display: block;
	height: 75px;
	width: 100px;
}

#home-arrow {
	display: block;
	position: absolute;
	top: 130px;
	margin-left: 25px;
}

#content-wrapper {}

#content-alpha {
	float: left;
	width: 520px;
	margin: 40px 0 0 160px;
	line-height: 1.25em;
}
#content-alpha a { font-weight: bold; color: #4b85c4;}
#content-alpha a:hover { color: #78a42e; border-bottom: solid 1px #ccc; }

#content-alpha h1 {
	font-size: 0.875em;
	font-weight: normal;
	color: #333;
}
#content-alpha h1 a { font-weight: normal; }

	#content-alpha h1 span.name {
		text-transform: uppercase;
		font-weight: bold;
	}

#content-alpha-inside {
	margin: 0 0 0 139px;
	padding: 45px 0 0 0;	
}

	/* NEW #content-alpha-inside */ h3 {
		margin: 0 0 1em 0;
		text-transform: uppercase;
		font-size: 1em;
		font-weight: normal;
		color: #5e310f;
	}
	
	h4 {
		margin: 0 0 1em 0;
		font-weight: normal;
		font-size: 0.875em;
		color: #5e310f;
	}

	div.pagetitle {
		padding: 14px 0 0 100px;	
	}
	
	div.pagetitle h2 {
		height: 75px;
		padding-left: 38px;
		line-height: 75px;
		background: #000;
		border-left: dashed 1px #444;
		text-transform: uppercase;
		font-size: 1.25em;		
		font-weight: normal;
		color: #81b2e6;
	}
	div.pagetitle h2 a { color: #81b2e6; }
	div.pagetitle h2 a:hover { color: #78a42e; }	

	#content-alpha-inside p {
		margin: 0 138px 1.8em 0;
		font-size: 0.8em !important;
		line-height: 1.8em;
		color: #555;
	}
	
	#content-alpha-inside li {
		font-size: 0.8em !important;
		line-height: 1.8em;
		color: #555;	
	}
	
	#content-alpha-inside p a, #content-alpha-inside p span.faux-link {
		color: #4b85c4; font-weight: bold;
		cursor: pointer;
	}
	#content-alpha-inside p a:hover, #content-alpha-inside p span.faux-link:hover { color: #78a42e; border-bottom: solid 1px #ccc; }

	
#content-alpha-inside-b {
	margin: 0;
	padding: 45px 0 0 0;	
}

#content-beta-wrapper {
	width: 100%;
	background: #000 url(img/layout_underground.jpg) repeat-x left top;
}

	#content-beta {
		margin: 0 auto;
		padding: 50px 0 0 0;
		width: 950px;
	}
	
	#content-beta #work-link {
		font-size: 0.75em;
		font-weight: normal;
	}
	#content-beta-wrapper a { color: #A2DE3E; }
	#content-beta-wrapper a:hover { color: #ddffa5; }	
	
#content-blog {
	float: left;
	width: 700px;
	min-height: 700px;
}

	#content-blog-sidebar {
		float: right;
		width: 200px;
	}
	
#featured-work {
	float: left;
	width: 430px;
	margin: 0 88px 0 0;
	padding: 0 0 30px 0;
	color: #c9c9c9;
}

	#featured-work h2 {
		float: left;
		margin-right: 4px;		
		text-transform: uppercase;
		font-size: 1em;
		font-weight: normal;
		color: #81b2e6;
	}
	#featured-work h2 a, #featured-work h2 a:hover { color: #81b2e6; }
	
	#featured-work p.byline {
		margin-bottom: 10px;
		padding-top: 2px;
		text-transform: uppercase;
		font-size: 0.6875em;
	}
	#featured-work p.byline a, #featured-work p.byline a:hover { color: #c9c9c9; }
	
	#featured-work div.first {
		clear: both;
		padding-top: 15px;
		border-top: solid 1px #5e310f;
	}

		div.project {
			clear: both;
			margin: 0 0 10px 0;
			padding: 0 0 10px 0;			
			min-height: 115px;
			height: auto !important;
			height: 115px;
			/* border-bottom: dashed 1px #1a1a1a; */
		}
	
		.project img {
			float: left;
			width: 179px;
			height: 115px;
		}	

		.project p {
			margin-left: 195px;
			padding: 40px 0 0 0;
			font-size: 0.75em;
			font-style: italic;
			
		}
		
		.project p span {
			display: block;
			margin: 0 0 10px 0;
			text-transform: uppercase;
			font-style: normal;
		}

#blog {
	float: left;
	width: 430px;
	padding: 0 0 30px 0;
	color: #c9c9c9;
}
	
	/* top post
	------------------ */
	#blog {	}
	
	#blog h2 {
		float: left;
		margin-right: 4px;
		text-transform: uppercase;
		font-size: 1em;
		font-weight: normal;
		color: #81b2e6;
	}
	#blog h2 a, #blog h2 a:hover { color: #81b2e6; }
	
	#blog p.byline {
		margin: 0 0 10px 0;
		padding: 2px 0 0 0;
		text-transform: uppercase;
		font-size: 0.6875em;
	}
	#blog p.byline a, #blog p.byline a:hover { color: #c9c9c9; }
	
	#blog .post-alpha {
		margin-bottom: 40px;
		min-height: 176px;
		height: auto !important;
		height: 176px;	
	}
	
	#blog .post-alpha h3 {
		margin: 0 0 5px 0;
		padding: 15px 0 0 0;
		border-top: solid 1px #5e310f;
		text-transform: uppercase;
		font-size: 0.75em;
		font-weight: normal;
	}
	#blog .post-alpha h3 a { color: #A2DE3E; }
	#blog .post-alpha h3 a:hover { color: #ddffa5; }	
	
	#blog .post-alpha p {
		font-size: 0.75em;
		line-height: 1.5em;
		margin: 0 0 12px 0;
	}
	#blog .post-alpha a { color: #A2DE3E; }
	#blog .post-alpha a:hover { color: #ddffa5;}
	
	/* additional posts
	----------------------- */
	#blog p.recent {
		margin: 0 0 5px 0;
		text-transform: uppercase;
		font-size: .75em;
	}
	
	#blog .post-beta {
		padding: 5px 5px 5px 30px;
		background: transparent url(img/icon_outlet_off.png) no-repeat 4px center;
		/* border-bottom: dashed 1px #1a1a1a; */
		line-height: 1.5em;
	}
	#blog .first { border-top: dashed 1px #1a1a1a; }
	
	#blog .post-beta:hover {
		background: #121212 url(img/icon_outlet_on.png) no-repeat 4px center;
		cursor: pointer;
	}
	#blog .post-beta a { color: #A2DE3E; } /* b87849 */
	#blog .post-beta:hover a { color: #ddffa5; }
	#blog .post-beta:hover span.post-date { color: #fff; }	
	
	#blog .post-beta h3 {
		text-transform: uppercase;
		font-size: 0.75em;
		font-weight: normal;
	}	

	#blog .post-beta p {
		font-size: 0.75em;
		color: #999;
	}
	
	#blog .post-alpha .post-date, #blog .post-beta .post-date {
		text-transform: uppercase;
		font-size: 0.75em;
	}
	
	#blog .post-date em { text-transform: lowercase; }


#rollout-wrapper {
	width: 100%;
	padding-top: 35px;
	color: #fff;
}

	#rollout {
		width: 950px;
		margin: 0 auto;
		padding: 15px 0 0 0;
		color: #fff;
	}
	
	#rollout h2 {
		float: left;
		margin-right: 4px;
		text-transform: uppercase;
		font-size: 1em;
		font-weight: normal;
		color: #81b2e6;
	}
	#rollout p.byline {
		margin-bottom: 10px;
		padding-top: 1px;
		text-transform: uppercase;
		font-size: 0.6875em;
	}
	
	#rollout p {
		margin-right: 50px;
		margin-bottom: 15px;
		font-size: 0.75em;
		line-height: 1.5em;
	}	
	#rollout p a { color: #A2DE3E; }
	#rollout p a:hover { color: #ddffa5;}
	
	div.rollout-inner-content { border-top: solid 1px #5e310f; }
	
	#rollout-close {
		width: 950px;
		margin: 0 auto;
		padding-bottom: 10px;
		border-bottom: dashed 1px #1a1a1a;		
	}
	#rollout-close span {
		background: url(img/control_eject.png) no-repeat left center;
		padding-left: 20px;
		text-transform: uppercase;
		font-size: 0.75em;
		color: #A2DE3E;
		cursor: pointer;
	}
	#rollout-close span:hover { color: #ddffa5;}

#footer-wrapper {
	width: 100%;
	border-top: solid 1px #191919;
	background: #0f0f0f url(img/icon_outlet_on.png) no-repeat left 1000px; /* force preload */
}
	#footer {
		margin: 0 auto;
		padding: 20px 0 60px 0;
		width: 950px;
		text-transform: uppercase;
		font-size: 0.6875em;
		color: #fff;
	}

	#footer div { padding-top: 12px; }
	#footer a { text-transform: none; color: #fff;}
	#footer a:hover { color: #A2DE3E; }

#client-login-link {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 100;
}

#client-login {	
	color: #fff;
	font-size: 0.75em;
}
	#client-login a { color: #fff; border-bottom: dotted 1px #A2DE3E;  }
	#client-login a:hover { color: #A2DE3E; border-bottom: dotted 1px #fff; }
	
	#client-login span {
		margin-left: 90px;
		font-size: 0.75em;
	}
	
	#client-login h3 {
		color: #A2DE3E;
		font-size: 1.25em;
		margin: 0 0 25px 0;
	}
	
	#client-login label {
		float: left;
		margin: 8px 0 0 0;
	}
	
	#client-login dd {
		margin: 10px 0 15px 75px;
	}
	
.fade .forminput {
	opacity: 0.1;
	-moz-opacity: 0.1;
	filter: alpha(opacity=10);
}

.contactconfirmation {
	padding-left: 20px;
	background: url(img/accept.png) no-repeat left center;
	line-height: 1em;
	text-transform: uppercase;
	color: #81b2e6;
}

/* form elements
================================= */
/* basic ---------------------- */
.forminput {
	padding: 6px;
	width: 275px;
	border: solid 1px #c0c0c0;
	background: #fff url('img/bg_forminput_light.gif') repeat-x bottom left;
	font-size: 15px;
	font-weight: normal;
	color: #5b5b5b;	
}

textarea, .textbox {
	width: 400px;
	height: 125px;
	font-family: "Lucida Sans",Verdana,sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #5b5b5b;
}

textarea:focus, .textbox:focus, input:focus {
	border-color: #444;
	color: #000;
}

.formbutton {
	padding: 2px 10px;
	border: solid 3px #555;
	background: #000;
	text-transform: uppercase;
	font-size: 0.75em;
	color: #A2DE3E;	
	cursor: pointer;
}
.formbutton:hover {
	border-color: #A2DE3E;
	color: #A2DE3E;
}

form p { margin-bottom: 15px; }

/* rollout forms --------------------------------------- */

#rollout input, #rollout textarea, #contactform-form input, #contactform-form textarea {
	display: block;
	margin: 0 0 12px 0;
	width: 275px;	
}

#rollout input.spam, #contactform-form input.spam {
	width: 60px;
	text-align: center;
}

#rollout input.formbutton, #contactform-form input.formbutton {
	width: auto;
}

#contactform-form label {
	float: left;
	margin: 2px 15px 0 0;
	line-height: 1.5em;
	font-size: 12px;
}

#contactform-form small {
	display: block;
	margin: 0 0 10px 0;
	font-size: 11px;
}

#contactform-form input.formbutton {
	margin-top: 20px;
}


/* temp */
#client-login .formbutton, #client-login .forminput { font-size: 1em; }
#client-login .forminput { width: 175px; }


/* thumbnails
------------------------- */
#gallery { }

div.folio {
	margin: 0 10px 10px 0;	
}

.folio-thumb {
	width: 179px;
	height: 115px;
	/* background: transparent url(img/ajax-loader.gif) no-repeat left top; */
}

em.icon-brick {
	display: block;
	padding-left: 22px;
	background: url(img/icon_brick.png) no-repeat left center;
}

.list-alpha {
	list-style-type: none;
	font-size: 0.75em;
	line-height: 2em;
}

.list-beta li {
	list-style-type: circle;
	line-height: 2.25em;
}

.checks li {
	list-style-type: none;
	padding-left: 22px;
	background: url(img/tick.png) no-repeat left center;
}

/* new folio
--------------------------- */
.folio-item {
	clear: both;
	margin: 50px 0 0 0;
}

.folio-item img {
	float: left;
	height: 175px;
	width: 435px;
	margin: 0 40px 0 0;
	border: solid 1px gray;
}

.folio-item p { font-size: 0.875em; }


/* rounded boxes
================================= */
/* light off-white boxes */
.box { background-color: #f1f1f1; }
.box b.rtop, .box b.rbottom { display:block; background: #fff; }
.box b.rtop b, .box b.rbottom b {
	display: block;
	height: 1px;
	overflow: hidden;
	background: #f1f1f1;
}
.box b.r1 { margin: 0 5px; }
.box b.r2 { margin: 0 3px; }
.box b.r3 { margin: 0 2px; }
.box b.rtop b.r4, b.rbottom b.r4 { margin: 0 1px; height: 2px; }

.box-content {
	padding: 20px 35px;
}

.box-content h3 {
	margin: 0 0 20px 0;
}

/* box classes */
.box-alpha {
	width: 100%;
	margin: 0 0 30px 0;
}

.headshot {
	float: left;
	margin: 6px 18px 15px 0;
	padding: 4px;
	background: #f1f1f1;
	border: solid 1px #ccc;
	height: 50px;
}


/* misc
================================= */
.clear {
	clear: both;
	height: 0;
	overflow: hidden;
}

.hidden { display: none; }

/* floats */
.left { float: left; }
.right { float: right; }

.center { text-align: center; }

hr {
	height: 0;
	overflow: hidden;
	margin: 30px 0 0 0;
	padding: 0;
	line-height: 0;	
	border: none;
	border-top: solid 1px #d3d3d3;
	background: transparent;
}
hr.beta {
	height: 0;
	overflow: hidden;
	margin: 0 0 30px 0;
	padding: 0;
	line-height: 0;
	border: none;
	border-top: solid 1px #fff;
	background: transparent;
}
hr.dark {
	height: 0;
	overflow: hidden;
	margin: 5px 0 15px 0;
	padding: 0;
	line-height: 0;
	border: none;
	border-top: solid 1px #222;
	background: transparent;
}

.required { color: red; }

#contactform .required {
	border-left: solid 2px red;
	color: #5b5b5b;
}

.message-error {
	margin: 0 0 1.5em 0;
	padding: 10px;
	background: #ffffd7;
}

#outlet {
	float: left;
	margin: 0 15px 0 0;
}

.ajax-loader-dark { background: url(img/ajax-loader-dark.gif) no-repeat center center; }

#fossil1 {
	display: none;
	position: absolute;
	left: 30px;
	top: 615px;
}