/*
Theme Name: STL
Author: Shawn Leslie
Author URI: http://shawntleslie.com

Cyan: #00FFFF
Dk Cyan for text: #3ce1e3
Magenta: #FF00FF
Yellow: #FFFF00
*/

@import "style/css/reset.css";
@import "style/css/layout.css";
@import "sprites.css";
@import "style/css/960.css";


/*
	RESET/STRUCTURE
*/
html, body { height: 100%; }
body 	{ font-family: Arial, Helvetica, sans-serif; font-size: 62.5%; color: #000;
   	  background: url(images/body-bg-sm.png) repeat-x 0 0; } 
h1 	{ font: bold 2.1em helvetica, arial, verdana, serif; color: #3ce1e3; text-transform: uppercase; text-shadow: #ddd 1px 1px 0; }
h2	 	{ color: #adadad; font: bold 2em/2.2em helvetica, arial, sans-serif; letter-spacing: -1px; text-shadow: #ddd 1px 1px 0; }
h3		{ font: italic 2.em/2em georgia, times, serif; color: #3ce1e3; }
h4 	{ font: 1.4em helvetica, arial, verdana, sans-serif; text-transform: uppercase; color: #111; }
hr 	{ background: url(images/hr-bg.png) repeat-x 0 0; height: 10px; border: none; margin: 15px 0; }
.wp-caption { font-style: italic; font-size: .7em; display: none; }
a		{ text-decoration: none; color: #999; }
a:hover { color: #ff00ff; }
p, li	{ font-size: 1.2em; line-height: 1.6em; margin: 0 0 5px 0; }
div	{ position: relative; }

.clear:after { content: ""; display: block; clear: both; }
.hidden { visibility: hidden; }

#page-wrap { width: 960px; margin: 0 auto -110px; min-width: 750px; min-height: 100%; }

#home-page { background: url(images/home-body-bg.png) repeat-x 0 0; } /* Only on index page */

/* .clear { clear: both; } */
.clear:after { content: ""; display: block; clear: both; }
.hidden { visibility: hidden; }


/*
	CONTACT DROP DOWN
*/

#contact {
	width: 100%;
	height: 250px;
	background-color: #000;
	display: none;
	position: absolute;
	top: 91px;
	z-index: 10;
	}
#contact-wrap {
	width: 960px;
	height: 150px;
	margin: 0 auto;
	}
	#contact-logo {
		background: url(images/contact-logo.png) no-repeat 0 25px;
		width: 145px;
		height:150px; 
		margin: 20px 0 0 180px;
		text-indent: -9999px;
		border-right: 2px solid #333;
		float: left;
		}
	#contact-info {
		float: left;
		margin: 45px 0 0 70px;
		color: #fff;
		height: 150px;
		width: 450px;
		}
		#contact-info h2 {
			font: bold 2.2em/1.7em helvetica, arial, sans-serif; 
			color: #999;
			}
		#contact-info h3 {
			font: italic 1.5em/1.3em "Caslon Pro Regular","Palatino Linotype", georgia, serif;
			color: #fff;
			}
			
		#contact-info ul {
			margin-top: 8px;
			}
			#contact-info ul li {
				display: inline;	
				padding: 0 8px 0;	
				border-right: 2px solid #333;
				}
				#contact-info ul li:first-child { padding-left: 0; }
				#contact-info ul li:last-child { padding-right: 0; border: none; }
				
				#contact-info a {
					font: 1.2em "helvetica neue", helvetica, arial, sans-serif;
					color: #999;
					}
					#contact-info a:hover { color: #0EBFE9; }
				
	div#hide-btn {
		background: url(images/hide-btn.png) 0 0 no-repeat;
		height: 23px;
		width: 42px;
		text-indent: -9999px;
		cursor: pointer;
		margin: 227px 25px 0 0;
		float: right;
		}
	
	
/*
	LOGO
*/

#logo a {
	background:transparent url(images/logo-sprite.png) no-repeat 0 -91px;
	height:91px;
	display: block;
	width:297px;
	text-indent: -9999px;
	outline: none;
	}
	#logo a:hover {
		background-position: 0 0;
		}
	
/*
	BLURB
*/
	
#blurb {
	top: -25px;
	width: 100%;
	background: url(images/blurb.png) repeat-x 0 0;
	}	
#blurb h1 {
	height: 250px;
	width: 960px;
	text-indent: -9999px;
	margin: 0 auto;
	}

/*
	MAIN CONTENT - HOME PAGE
*/

#main-wrap {
	margin-top: -90px;
/* 	margin-bottom: 45px; */
	}
	
	/* Home/Work Intro */
	#intro p { font-size: 2.5em; line-height: 1.6em; color: #adadad; }
	#intro span { font-weight: bold; letter-spacing: -1px; color: #ff00ff; }
	#intro a { color: #ccc; }
	#intro a:hover { color: #3ce1e3; }
	/* Recent Work */
	#recent-work h2, #featured-post h2 { color: #3ce1e3; }
	/* Featured Post */
	#featured-post h3 a { font: italic 2.4em georgia, serif; color: #adadad; }
	#featured-post h3 a:hover { color: #3ce1e3; }
	#blog-excerpt p { font-size: 1.6em; line-height: 1.6em;}	
	/* RECENT-WORK: Container jQuery hover effect direction */
	.recent-work li {
		float: left;
		background: #fff;
		padding: 0 10px 0 0;
		width: 160px;
		background: url(images/rec-work-bg.jpg) 0 0 no-repeat;
		}
		.recent-work li a {
			display: block;
			position: relative;
			overflow: hidden;
			height: 234px;
			width: 144px;
			padding: 8px 8px 8px 8px;
			}
		.recent-work li img {
			position: absolute;
			top: 0;
			left: 0;
			border: 0;
			}
		.recent-work li span {  
			font: 1.4em/1.2em helvetica, arial, sans-serif;
			color: #0EBFE9;
			}
		.recent-work li p { font-size: 1em; color: #111; }		
	
	/* FROM THE BLOG - RIGHT COLUMN */
	#blog-excerpt {
			height: 230px;
			overflow: hidden;
			}
	#featured-post h3 a:hover { color: #ff00ff; }
		
/*
	WORK/PORTFOLIO
*/

#intro.work { margin: 20px 0; }
ul#clients { margin-top: 25px; }

li.project {
	background-color: #f7f7f7;
	height: 200px;
	border-top: 3px solid #666;
	border-bottom: 3px solid #666;
	margin-bottom: 30px;
	overflow: hidden;
	}
	p.portfolio-image {
		width: 600px;
		height: 100%;
		border-right: 3px solid #666;
		text-indent: -9999px;
		float: left;
		}
		p.portfolio-image a { 
			height: 200px;
			display: block; 
			}
	/* Recent Work Images 160w X 250h */
	#stl { background: #f7f7f7 url(images/stl-scrn.png) no-repeat 0 0; }	
	#sdi { background: #f7f7f7 url(images/sdi-scrn.jpg) no-repeat 0 0; }
	#tees { background: #f7f7f7 url(images/tees-scrn.png) no-repeat 0 0; }
	#dyn-form { background: #f7f7f7 url(images/dyn-form-scrn.png) no-repeat 0 0; }
	#gtb { background: #f7f7f7 url(images/gtb-scrn.png) no-repeat 0 0; }
	#ace { background: #f7f7f7 url(images/ace-scrn.jpg) no-repeat 0 0; }
			
	p.project-url, p.portfolio-desc, p.services-provided { width: 330px;	margin-right: 15px; float: right; }
	p.project-url a { color: #ff00ff; font-weight: bold; font-size: 1.6em; line-height: 1.6em; letter-spacing: -1px; }
	p.services-provided { font-size: 1em; }	
	p.services-provided span { font-size:  1.2em; color: #3ce1e3; text-transform: uppercase; }
				

/*
	BLOG PAGE
*/

.post h1 { 	
	font-family: georgia, times, serif; 
	text-transform: none;
	font-weight: normal;
	font-size: 4.3em;
	}
	.post p.post-date { margin-bottom: 25px; }
	
ul.other-posts li { background-color: #eee; }
ul.other-posts li a { font-family: georgia, times, serif; display: block; }

#blog-footer h4 { left: -10px; color: #adadad; }
.featured img { padding: 0 8px 8px 0; }
.featured h1, .secondary h1 {
	margin-bottom: 5px;
	text-transform: uppercase;
	letter-spacing: -1px;
	}
	.featured h1 a:hover, .secondary h1 a:hover { text-shadow: #ddd 2px 2px 0; }
	.post-date { color: #bbb; margin: 0; }
	.featured p, .secondary p { font-size: 1.3em; line-height: 1.8em; }
	.featured img, .secondary img { padding: 10px 0; }
	.featured li { padding: 0 25px; font-size: 1.4em; color: #999; }
	.post img { padding: 20px 0; }
	.post p { font-size: 1.5em; line-height: 1.8em; }
	.post li { padding: 0 25px; font-size: 1.5em; color: #999; }
.blog-foot {
	top: -25px;
	}
	.blog-foot li { border-top: 1px solid #adadad; }
	.blog-foot li a {
		display: block;
		line-height: 20px;
		color: #111;
		}
		.blog-foot li a:hover { color: #3ce1e3; }
		
/*
	BLOG COMMENTS
*/

/* Comment Entry */
#comment-wrapper {
	}
.comment-block {
	height: 35px;
	padding: 2px 0;
	}
.comment-message {
	padding: 2px 0;
	height: 160px;
	}
	.comment-block label, .comment-message label {
		color: #ff00ff;
		font-size: 1.5em;
		float: left;
		width: 160px;
		}
		.comment-block span.asterisk { 
			position: absolute; 
			top: -3px; 
			}
			
	#author, #email, #url, #comment, .comment-message textarea {
		background-color: #cecece;
		width: 240px;
		padding: 5px;
		font-size: 1.5em;
		color: #3ce1e3;
		border: none;
		outline-color: #cecece;
		outline-style: none;
		float: left;
		}
			
/* Comments Display */
#postcounter-wrap { background: #eee url(images/comment-bg.png) no-repeat bottom center; }
#postcounter-wrap li { margin: 0 auto; padding: 10px 10px 20px; list-style: none; }
#postcounter-wrap p, #postcounter-wrap a { font-size: 1em; line-height: 1.4em; }
#avatar {float: left;}


/*
	ABOUT PAGE - MyStory
*/

/* Sidebar2.php - Retrofitting the LifeStream plugin content */
#parent-ul h2 { margin: 10px 0 0 16px; color: #ff00ff; }
#parent-ul { padding-bottom: 15px; color: #999; }
#parent-ul li { padding: 0 0 0 16px; }
#parent-ul a { color: #eee; }
#parent-ul a:hover { color: #0EBFE9; }
#parent-ul h2.lifestream_date { font-size: 1.3em; color: #0EBFE9; font-weight: normal; }
table.lifestream { margin: -15px 0 0 16px; }
p.lifestream_credits, .lifestream_meta { display: none; }

/* Q&A */
#my-story {
	width: 730px;
	float: left;
	}
	#my-story h1 {
		line-height: 1em;		
		}
	#my-story .block {
		padding: 20px 0;
		clear: both;
		}
		#my-story p.q {
			width: 200px;
			font:bold 2em "helvetica neue", helvetica, arial, sans-serif;
			color: #ff00ff;
			float: left;
			}
		#my-story div.a {
			width: 500px;
			font-size: 1.2em;
			float: right;
			} 
			

/* SIDEBARS */

/* Only on MyStory/About page */
#sidebar2 {
	background: url(images/sidebar2-title-bg.png) no-repeat 0 0; 
	width: 226px;
	position: absolute;
	left: 734px;
	}
	#sidebar2 h2 { text-shadow: none; }
	#searchform {
		position: absolute;
		top: 12px;
		left: 25px;
		width: 175px;				
		}							
		#searchform #s {
			background: transparent url(images/search-bg.png) no-repeat 0 0;
			border: none;
			height: 25px;
			width: 175px;
			font-size: 1.4em;
			font-weight: bold;
			letter-spacing: -1px;
			color: #FF00FF;
			padding: 4px 0 0 5px;
			}
		#searchsubmit {
			float: right;
			}

	#sidebar-inner {
		background: url(images/sidebar-content-bg.png) repeat-y 0 10px;
		margin: 85px 0 0 16px;
		}
		#sidebar-inner ul {
			width: 175px;
			overflow: hidden;
			}
			#sidebar-inner ul li {
				width: 165px;
				}
				#sidebar-inner p#qod-text { font: italic 1.2em "Caslon Pro Regular","Palatino Linotype", georgia, serif; }
			#sidebar-btm {
				background: url(images/sidebar-btm-bg.png) no-repeat bottom left;
				width: 195px;
				height: 8px;
			 	margin-left: 16px;
				}
		
/*
	FOOTER
*/

#footer { width: 100%; background: #eee; height: 110px; margin-top: 45px; }
	#footer-inner p.foot-title { font-weight: bold; font-size: 1.5em; line-height:1.5em; color: #ff00ff; }
	#footer-inner p.foot-title a { color: #ff00ff; }
	#footer-inner p.foot-title a:hover { color: #3ce1e3; }
	#footer-inner p a { color: #999; }
	#footer-inner p a:hover { color: #3ce1e3; }
	#footer-inner p { font-size: 1.2em; line-height: 1.4em; }
	#footer-inner p.foot-title + p { margin-top: -5px; }
	
.clear-footer {
	height: 110px;
	clear: both;
	}

/*
	NEW PROJECT QUESTIONNAIRE
*/

#new-project { width: 600px; float: left;}

	#new-project h2 {
		font-size: 2.5em;
		}
	/* NP Intro */
	#new-project p {
		font-size: 2em;
		color: #333;
		}
	/* Container for Question and Dropdown */
	.input-block {
		width: 600px;
		height: 45px;
		}
		/* Question */
		#new-project .input-block p {
			width: 330px;
			color: #ff00ff;
			font-size: 1.5em;
			float: left;
			}
			span.asterisk { color: #0EBFE9; font-size: 2em; position: absolute; top: 5px; }
		
		/* Dropdown or input */
		.input { 
			background-color: #cecece; 
			width: 250px;
			float: left;
			}
			.input input, .input select, .input textarea {
				background-color: #cecece;
				width: 240px;
				padding: 5px;
				font-size: 1.5em;
				color: #0EBFE9;
				border: none;
				outline-style: none;
				outline-color: -moz-use-text-color;
				outline-width: medium;
				outline-color: #cecece;
				outline-style: none;
				float: right;
				}
				.input textarea { 
					font: 1.2em/1.2em "lucida sans unicode", "lucida grande", helvetica, arial, sans-serif; 
					overflow: auto; 
					}
					
#send {
	background: url(images/send-btn2.png) no-repeat 0 0;
	height: 30px;
	width: 75px;
	margin: 15px 0 0 0;
	border: none;
	text-indent: -9999px;	
	cursor: pointer;
	float: right;
	}

#colophon { margin-top: 20px; }
#colophon li {
	background-color: #cecece;
	margin: 3px 0;
	font: 1.4em/2em helvetica;
	color: #0EBFE9;
	padding: 0 12px;
	}
	#colophon a { color: #0EBFE9; }
	#colophon a:hover { color: #ff00ff; }
	
/*
	404
*/

#not-found h2 {
	background: url(images/404.png) no-repeat 0 0;
	height: 260px;
	width: 503px;
	text-indent: -9999px;
	}
	#not-found + ol {
		margin: 20px;
		}
		#error-404 li {
			font: italic 2.2em/2em georgia, serif;
			list-style-type:decimal;
			list-style-position: inside;
			}