/* @override http://www.studio-output.com/wp-content/themes/so-1-1/style.css */

/*
Theme Name: Studio Output Preview
Theme URI: http://studio-output.com
Description: Advanced theme with custom map of posts
Version: 1.1
Author: Ben Wise
Author URI: http://theantenna.net
Tags: custom
	
	Designed by Tom Muller @ Kleber, Rob @ Studio Output
	All code is strictly not licensed for public use unless confirmed in writing by Studio Output.

*/

/* TOP LEVEL */
html {margin:0; padding:0; }
body {margin:0; padding:0; background: #ededed; color:#333; font:12px Helvetica, Arial, sans-serif;   line-height: 15px; visibility:hidden; overflow-y:scroll;}

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }

/* HEADER */
#header-wrapper {background:white; position:relative; z-index:3; }
	#header {width:960px; margin:0 auto; padding:14px 0 0 0}
		#logo {margin:0;  padding:0 14px 14px 0; float:left; }
		/*.ie7 #logo {padding:0 40px 0 0;}*/
			#logo a { display: block; width:60px; height:50px; background: transparent url('images/logo.png') no-repeat top left;}
			#logo a:hover { background-position: left -50px  ;}
		#sidebar {float:left; width:886px; position:relative;}
			#sidebar ul {list-style:none; margin:0; padding:0}
			#sidebar li {float:left; margin:0 8px 0 0; }
			#sidebar .subnav li {padding-top:1px; line-height: 24px;}
			.webkit #sidebar li .cufon {margin-top: -6px; margin-bottom: 0;}
			
			#sidebar li a {font:17px Helvetica, Arial, sans-serif; font-weight:bold; text-decoration:none; }
			#sidebar sup {font-size:12px; vertical-align:6px; padding-left:1px}
			
			#sidebar li.page_item a {color:#333}
			#sidebar li.cat-item a,
			#sidebar .subnav li.page_item a {color:#ccc}
			#sidebar li a:hover,
			#sidebar .subnav li.page_item a:hover,
			#sidebar li.current_page_item a,
			#sidebar .subnav li.current_page_item a,
			#sidebar li.current-cat a {color:#39b7c9; /*border-bottom: 1px solid #39b7c9;*/}

			#sidebar li.current-cat {position:relative}
			#sidebar li a, #sidebar li sup {position:relative; z-index:2}
			#sidebar li.current-cat:hover #quicknav {display:block !important}
			#sidebar li.current-cat em {position:absolute; top:20px; width:100px; z-index:0; font-style:normal; font-weight: bold;}
			.webkit #sidebar li.current-cat em {top:18px;}
			#quicknav {position:absolute; top:0; left:-12px; background:white; padding:26px 6px 8px 12px !important;
						display:none; z-index:1; min-width:180px;
						-moz-border-radius: 3px; -webkit-border-radius: 3px }
				#quicknav .wrapper {/*max-height:415px;*/ overflow:hidden;}
				#sidebar li #quicknav a {font:12px Helvetica, Arial, sans-serif !important; display: block; line-height: 16px !important;
						font-weight:normal; white-space:nowrap; color:#333; border:0; padding-right: 7px;}
				#sidebar li #quicknav a:hover {color:#39b7c9;
					  background: url('images/list-hover.png') no-repeat top right;}
			
		#searchform { position: absolute; top:0; right:0; }
			#s {border:1px solid #ccc; padding:3px; color:#ccc; width:146px;  -moz-border-radius: 3px; -webkit-border-radius: 3px}
			.gecko #s {padding:4px 3px 3px 3px;}
			.webkit #s {width: 150px;}
			#searchsubmit {background:#ccc; color:white; border:1px solid #ccc; margin:0 0 0 5px; padding:3px 3px 2px 3px;
				font-weight:bold; cursor:pointer; display: inline-block; text-align: center;  width: 45px;
				-moz-border-radius: 3px; -webkit-border-radius: 3px}
			.webkit #searchsubmit { width:42px}
			.ie7 #searchsubmit { border-bottom-width: 2px; margin-bottom: 1px; vertical-align: bottom;}
			.ie8 #searchsubmit { border-bottom-width: 2px;  }
			#searchsubmit:hover {background:#39b7c9; border:1px solid #39b7c9}
				#searchsubmit .cufon {margin-top: -2px;}
			
	#sub-header {width:960px; margin:0 auto 12px auto; position:relative; z-index:3;}
		#news-toggle, #mosaic-toggle
			{ background:white; display:block; color:#333; float:right; padding:0 6px 4px 6px; margin:0 0 0 12px; font-size:14px;
				-moz-border-radius: 0 0 3px 3px;
				-webkit-border-top-left-radius:0; -webkit-border-top-right-radius:0;
				-webkit-border-bottom-right-radius:3px; -webkit-border-bottom-left-radius:3px }
				.webkit #news-toggle, .webkit #mosaic-toggle {padding:0 6px 6px 6px;}
		#news-toggle:hover, #mosaic-toggle:hover { color:#39b7c9 !important; }
		#news-toggle.closed, #mosaic-toggle.closed { color:#39b7c9; cursor:default !important;}
	
	#header a{outline:none !important;}	
	.subnav #loader{font-size:12px; padding-left:2px;}
	#quicknav #loader{ padding:0; }
	
/* GRID */
#gridcontent {position:fixed; top:0; left:0; width:100%; height:100%; overflow:hidden; z-index:1; }
	#grid {position:relative; top:50%; left:50%;}
	/* Homepage = align grid to nav */
	.home #grid {top:150px; left:0; width:960px; margin:0 auto;}
		
		#grid .post {display:block; }
			#grid .post a {position:relative; text-decoration:none; display:block; outline:none;}
				#grid .post a .wrapper {position:absolute; top:0; left:0}
				.thumbnail .wrapper {width:100px; height:100px; overflow:hidden}
					.portrait.thumbnail .wrapper img {margin-top:-25px}
					.landscape.thumbnail .wrapper img {margin-left:-25px}
				#grid .post .tint,
				#grid .post .notint {display:none; }
				#grid .post .icon {position:absolute; z-index:1; top:5px; width:11px; height:11px; right:5px; background:url(images/icon-arrow-work.png) 0 0; }
				#grid .post #loader {position:absolute; z-index:1; /*top:5px; left:5px;*/ padding:3px 6px;
							background:#39b7c9; color:white; }
				#grid .post .info {position:absolute; width:190px; font-weight:normal; display:none; padding:5px; color:white; background:#39b7c9; line-height:14px; z-index:1000; }
					.category-blog.post .info,
					.nottingham.post .info {background:#333 !important; }
					#grid .post .info p {margin:0;}
			#grid .post a:hover .icon { background-position:-11px 0}
			#grid.ui-state-disabled .post a:hover {cursor: default;}
			#grid.ui-state-disabled .post a:hover .icon {background-position:0 0 !important; }
		#grid .welcome.post {background: #ccc; width:600px; height:400px; cursor:pointer; }
			#grid .welcome.post h2, #grid .welcome.post h3 {display: inline;}
			#grid .welcome.post .wrapper {padding:10px 12px;  color:white; width:540px;  }
			#grid .welcome.post .instructions {position: absolute; bottom:14px; left:12px;   }
			
#grid-navigation {display:none}
	#grid-navigation a {background:#39b7c9; color:white; padding:3px 3px 2px 3px;
							font-weight:bold; -moz-border-radius: 3px; -webkit-border-radius: 3px}
			

/*IPHONE */
.iphone #gridcontent {display:none;}
	.iphone .category-projects #gridcontent {display:block;}
/*.iphone .category-projects #header-wrapper {background:white; width:100%; }*/
.iphone #overlay {position:absolute; }
.iphone #gridcontent {position:static; overflow:visible; /*width:3000px; height:3000px;*/  }
	.iphone #grid { /*top:50%; left:50%; width:50%; */ top:0; left:0; margin:0;}
		.iphone #grid .post { float:left;}
.iphone .category-projects #grid-navigation {display:block; clear:both; margin:12px;}


/* PODS */
.pods {width:960px; margin:0 auto; position:relative; z-index:2}
/* Hide pods offscreen if mosaic mode on */
.mosaic-on .home-news.pods {position:fixed; left:-10000px;}
	.pod {margin-bottom:12px; background:white; padding:10px 12px; -moz-border-radius: 3px; -webkit-border-radius: 3px}
	.pods h2.title {margin:0 0 6px -1px; font-size: 14px; line-height: 16px; color:#CCC;}
	.pods h2.title_dark {margin:0 0 6px -1px; font-size: 14px; line-height: 16px; color:#333;}
	.pods h2.sub {margin:0 0 6px 0; font-size: 14px; }
	.blogging h2, .blogging h3, 
	.flickr h2, .flickr h3,
	.focus h2, .focus h3 {font-size: 14px; line-height: 16px !important}
	.pods .hr {margin:6px 0}
	.home .pod {padding: 10px 12px 8px 12px }
	.home-news .pods p {margin:0 }
	.pods ul {margin:0; padding:0}
		.pods ul li {list-style:none}
		.pods .blogging ul li a {color:#ccc; font-weight: normal; }
		.pods .blogging ul li a:hover {color:#333; }
	
		.arrow a { padding-right: 7px; display: block;}
		.arrow a:hover { background: url('images/list-hover.png') no-repeat top right;}
		.black.arrow a:hover { background: url('images/list-hover-black.png') no-repeat top right;}
			
	.pods_main_col {width:624px; float:left; margin-right:12px;}
		#featured-slideshow { }
			#featured-slideshow .entry {width:600px; }
			#featured-slideshow .entry img {display:block; margin-bottom:4px;}
			#featured-slideshow .button-left {position:absolute; top:408px; right:18px; z-index:1000;}
			#featured-slideshow .button-right {position:absolute; top:408px; right:-2px; z-index:1000;}
			#featured-slideshow .pauseLabel {z-index:1000; position:absolute; padding:0 4px 2px 0; display:none; background:white; color:#666; font-weight:bold}
	.pods_right_col {width:324px;  float:right;}
		
	.focus img,
	.blogging img
	/*.flickr img*/ {display:block; margin-bottom:4px;}
	
	.pod.flickr {width:282px;  float:left; }
		/*.pod.flickr img {width:282px;}*/
		#flickrbadge { margin-bottom:4px;}
		#flickrbadge .flickr_badge_image {float:left;}
		#flickrbadge img {display:block; width:94px; height:94px;}
		
	.pod.happening {width:282px; float:right }
		
	#tweets li {padding:5px 0 6px 28px; margin:0 0 8px 0; border-bottom:1px dotted #ccc; word-wrap:break-word;
		background: url(http://a2.twimg.com/profile_images/1176167900/so_logo2_mini.png) no-repeat top left; }
		#tweets li:last-child,
		#tweets li.last-child {border-bottom:1px dotted #333;}
	#tweets em {display:block; margin-top:2px}


/* SINGLE */
	.pods .button-close {position:absolute; top:5px; right:5px}
	.pods .images {float:left; background:white; padding:12px 12px 10px 12px; margin:0 0 12px 0; min-width:600px;
			-moz-border-radius: 3px; -webkit-border-radius: 3px }
		.pods .images em {font-style:normal; color:#333; display:block; margin-top:6px}
			.pods .images em a {color:#333; font-weight: bold }
			.pods .images em a:hover {color:#39b7c9 !important; }
		.pods .images img,
		.pods .images object {display:block; }
	.pods .infotext {float:left; width:300px; background:white; margin:0 0 0 12px; padding:12px 12px 10px 12px; -moz-border-radius: 3px; -webkit-border-radius: 3px; position:relative }
		.infotext .entry {margin-top:12px; margin-right: 25px;}
		.infotext h2 {margin: -2px 0 0 0; }
		.infotext h3 {margin: 0 0 6px 0; }
	
	


/* INLINE LOADED */
#overlay {width:960px; margin:12px auto; position:relative; z-index:2; }
#overlay-bg {position:fixed; background:#ededed; opacity:0.75; width:100%; height:100%; z-index:1; top:0; left:0;}
	.ie #overlay-bg {/*filter: alpha(opacity = 25);*/ background: none;} /* broken so leaving it out */

/* ARCHIVES, PAGES */
#main .category-blog {padding-bottom:4px;}
#main .category-blog p {width:450px;}
	#overlay .category-blog p {width:100%;}
#main .category-blog img,
#main .category-blog object {display: block; margin-bottom:12px;}
.meta img {display:inline !important; margin:0 2px 0 0 !important; vertical-align: -3px;}
.pods_right_col li {list-style:none; margin:0 0 2px 0;}
.pods_right_col li:last-child {list-style:none; margin:0;}
.pods_right_col li a {color:#333; font-weight: bold}
.pods_right_col li a:hover {color:#39b7c9}
.pods_right_col li a img {margin:0 4px 0 0; vertical-align: -4px;}

.archive .current-cat a,
.people .current_page_item a {color:#39b7c9; font-weight: bold;}

.page-pod {position: relative}
.page .pods_main_col {width:636px;} /* extra gutter due to 2 cols in post */
.page .pods_right_col {width:312px;}
.page .entry h2, .page .entry h3 {display:inline;  }
.page .entry p {margin:0 0 6px 0;}

.col {float:left; width:300px; margin:0 0 0 12px}
.col.first-child {margin:0}

#clients-grid .entry a {display:block; float:left; width: 141px; height:80px; overflow:hidden; position:relative; margin:0 12px 12px 0;}
#clients-grid .entry a img {position:absolute; top:0; left:0;}
#clients-grid .entry a:hover img {top:-80px;}


/* SEARCH */
#search-results .hr {margin:6px 0}

/*FORMS*/
.form form,.entry form {padding:0; }
label {display:block; width:75px; padding:6px 0;float:left;}
.gecko .form label {padding:4px 0 0 0;}
.page .form label {width:63px;}
.form input {display:block; width:214px; border:1px solid #ccc; padding:2px 4px; color:#333;
						-moz-border-radius: 3px; -webkit-border-radius: 3px}


form input[type=submit] {text-indent: 0px;width: auto;-moz-border-radius: 0px;-webkit-border-radius: 0px;-webkit-box-align:left;
        max-width: auto;outline: 0;
        overflow: visible;cursor:pointer;float:left;padding:0;margin-left: 0px; text-align: left;display:block; font-weight: bold; color:#39b7c9; background: transparent;border: none;}
        
@-moz-document url-prefix() {
    form input[type=submit] {
        margin-left: -4px;
    }
}       
.page .form a.submit { width:63px;}
.form span.error { display:block; float:left;  }
.form span { color:#39b7c9; }

.long_label label,label.long_label{width: 350px}

.form p {clear: both; height: 14px;}
.entry form p{height: 14px;}
.wpcf7-form-control-wrap{float:left;}
div.wpcf7 img.ajax-loader{float:left;}

.newsletter_wrapper{margin-bottom: 20px;}

.newsletter_wrapper span.wpcf7-not-valid-tip {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #FF0000;
    font-size: 10pt;
    left: 0;
    padding: 3px;
    position: absolute;
    top: 0;
    width: 217px;
    z-index: 100;
}
.page_form_wrapper span.wpcf7-not-valid-tip {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #FF0000;
    font-size: 10pt;
    left: 0;
    padding: 2px;
    position: absolute;
    top: 0;
    width: 220px;
    z-index: 100;
}

/* COMMENTS */
#respond,
	#respond textarea {width:600px}

/* FOOTER */
#footer {display:none}


/* GENERIC */
hr {display:none}
.hr {border-top:1px dotted #ccc}
	.solid.hr {border-top-style:solid}
	.dark.hr {border-color:#333}
a img {border:0}
img.centered {display: block; margin-left: auto; margin-right: auto;}
.left {float:left}
.right {float:right}


/* TYPO */
h1 {margin:0; font-size: 36px; line-height: 40px; letter-spacing: -1px;}
	h1 u {border-bottom: 2px solid #fff; }
h2,
h3 {margin:0; font-size:17px; line-height: 20px; }
h3 {font-weight: normal;}
/*Adjustments for cufon line heights*/
.webkit h2,
.webkit h3 {line-height: 19px; }
.webkit h2 .cufon,
.webkit h3 .cufon {margin-top: -4px; margin-bottom: -3px;  }

.welcome h2, .welcome h3 {margin:0; font-size: 38px; line-height: 40px; letter-spacing: -1px;}
	.welcome h2 u, .welcome h3 u {border-bottom: 2px solid #fff; }
	.welcome h2 .cufon, .welcome h3 .cufon { margin-bottom: -6px; }
	/*.webkit .welcome h2 .cufon { padding-bottom: -4px; }*/
	.instructions h3 {font-size:17px; line-height: 20px; margin:0; font-weight: normal; letter-spacing: 0;}


a {color:#39b7c9; text-decoration:none; /*font-weight:bold*/}
a:hover {color:#333;}
em {color:#ccc; font-style:normal; font-weight:normal;}
	em a { color:#ccc; font-weight:bold }
		#tweets em a { font-weight:normal }
	a:hover em  { color:#333 !important }
	em a:hover  { color:#39b7c9 !important }
input {font:12px Helvetica, Arial, sans-serif;}
.infotext h2 a,.post h2 a {color:#333}
.infotext h2 a:hover,.post h2 a:hover {color:#39b7c9}
u {text-decoration: none; border-bottom: 1px solid #333;}
p:last-child {margin-bottom:0;}

/* BUTTONS */
a.bullet {}
.button {width:17px; height:17px; display:block; float:left; }
.button span {display:none}
.button-left {background:url(images/button-left.png) 0 17px}
.button-right {background:url(images/button-right.png) 0 17px}
.button-left:hover, .button-right:hover {background-position: 0 0}
.button-close {background:url(images/button-close.png) 0 0}
.button-close:hover {background-position: 0 17px}

/* FIXES */
.clear {clear:both}
object {outline:none;}
.fix {height:2px; margin-bottom: -2px;}

.ie .category-projects #overlay {padding-top:12px;}
.ie7 body,
.ie #overlay {overflow:hidden;}
.ie p {margin:6px 0;}
.ie h2, .ie h3 {background:#fff;}
.ie .welcome h2, .ie .welcome h3 {background:none}
.ie8 .welcome h2 u {border:0 !important; }
	.ie8 h2 a .cufon {border-bottom:2px solid white;  }
	

.ie #flickr li a {display:block;}


/* contact form overrides */
span.wpcf7-list-item {
    margin-left: 0 !important;
}
div.wpcf7-mail-sent-ng
{
	border: none !important;
	color: #FF0000;
}
div.wpcf7-mail-sent-ok {
	border: none !important;
	color: #398f14;
}

div.wpcf7-mail-sent-ng {
	border: none !important;
	color: #ff0000;
}

div.wpcf7-spam-blocked {
	border: none !important;
	color: #ffa500;
}
div.wpcf7-validation-errors {
	border: none !important;
	color: #ff0000 !important;
}
div.wpcf7-response-output {
    margin: 0 !important;
    padding: 0.2em 0 !important;
}

/* COLOURS */
.aqua {color:#39b7c9}
.bg-grey {color:#ededed}

/* DEBUG */
/*.grid-vert				{color:red; position:absolute; z-index:1000}
.grid-cell				{width:50px; height:50px; background:red; opacity:.4; border:1px solid white; font-size:9px; position:absolute; z-index:1000}
*/