/* ---------------------------------------------------------------------------
	
	Studio Orange Master Styles
	http://www.studiorangedesign.com
	
	author: Subtle Technology
	http://www.subtletech.com
	
--------------------------------------------------------------------------- */
@import url("_reset.css");
@import url("_base.css");


/* =GLOBAL
-------------------------------------------------------------- */
body { 
	background: #000 url(../img/background-body.png) repeat-x 0 0;
	color: #999;
	font-family: "Helvetica Neue", Helvetica, Arial, sans;
	font-weight: 100;
	letter-spacing: 0.1em;
	min-height: 100%;
}

#container {
	margin: 0 auto;
	padding: 0 50px;
	width: 875px;
}

#header,
#content,
#footer {
	padding-left: 65px;
}

#footer {
	padding-bottom: 50px;
}

#sidebar {
	float: left;
	width: 204px;
}

	#sidebar h1 { float: none; }

/*
	=CLEARING
--------------------------------------------------------------------------- */
#header:after,
#nav:after,
#content:after,
ul:after,
#comment_form p:after,
.wslide-menu:after,
#recent-posts:after,
#recent-posts ul:after {
    content: "."; 
    display: block; 
    height: 0;
    clear: both; 
    visibility: hidden;
}

/* IE clearfix */
#header,
#nav,
#content,
ul,
#comment_form p,
.wslide-menu,
#recent-posts,
#recent-posts ul { 
	*height: 1%;
	*min-height: 1%;
}

/* =Typography
--------------------------------------------------------------------------- */
h1 { margin: 0; }

/* =Misc
--------------------------------------------------------------------------- */
ul.columns-2 { list-style: none; }
ul.columns-2 li {
	float: left;
	margin-right: 4%;
	width: 45%;
}

.column { float: left; }

.last { border: none !important; }

.rss {
	background: url(../img/rss-icon.png) no-repeat 0 0;
	display: inline-block;
	line-height: 18px;
	padding-left: 24px;
}

.location { font-size: 0.8em; }

.hiddenFields { display: none; }

/* =Header
-------------------------------------------------------------- */
#header {
	border-bottom: 1px solid #333;
	padding-top: 100px;
	/*padding-right: 30px;*/
	padding-bottom: 32px;
	position: relative;
}

#logo {
	background: url(../img/logo-screen.png) no-repeat 0 0;
	float: left;
	margin-right: 20px;
	
	height: 38px;
	width: 198px;
}

#logo a {
	display: block;
	width: 100%;
	height: 100%;
}

#logo img {
	position: absolute;
	top: 0;
	left: -9999px;
}

/* =Utility Navigation
--------------------------------------------------------------------------- */
#util-nav {
	list-style: none;
	
	position: absolute;
		top: 0;
		right: 100px;
}

#util-nav li {
	border-left: 1px solid #000;
	float: left;
	font-size: 0.834em;
	line-height: 1.0em;
	text-transform: uppercase;
}
#util-nav #util-client { border-right: 1px solid #000; }

#util-nav li a {
	background: url(../img/util-nav.png) no-repeat 0 0;
	color: #9b9b9c;
	display: block;
	height: 25px;
	padding: 16px 14px 0 34px;
	*width: 1%; /* IE6 fix */
	*white-space: nowrap; /* IE fix */
}

#util-nav #util-blog a { padding-left: 38px; background-position: 0 0; }
#util-nav #util-blog.here a,
#util-nav #util-blog a:hover { background-position: -150px 0; }
#util-nav #util-mailing a { padding-left: 40px; background-position: 0 -41px; }
#util-nav #util-mailing.here a,
#util-nav #util-mailing a:hover { background-position: -150px -41px; }
#util-nav #util-client a { background-position: 0 -82px; }
#util-nav #util-client.here a,
#util-nav #util-client a:hover { background-position: -150px -82px; }

/* =Navigation
--------------------------------------------------------------------------- */
#nav {
	letter-spacing: 0.2em;
	list-style: none;
	padding-top: 14px;
	text-transform: uppercase;
}

#nav li {
	*display: inline; /* IE6 margin doubling fix */
	float: left; 
	margin-left: 35px;
}

#nav li a {
	color: #999;
	display: block;
}

#nav li.here a,
#nav li a:hover { color: #f90; }

/* =Sidebar
--------------------------------------------------------------------------- */
#sidebar h1 { margin-bottom: 18px; }

#sidebar h4 { margin: 0; padding: 0; }

#sidebar ul { clear: both; font-size: 1.168em; }
#sidebar ul li { margin-bottom: 16px; }
#sidebar ul a { display: block; }
#sidebar ul .location { 
	display: block;
	line-height: 1.2em;
}

/* =Content
--------------------------------------------------------------------------- */
#content {
	padding-top: 35px;
	padding-bottom: 35px;
}

body.secondary h1,
body.secondary h2,
body.secondary h3,
body.secondary h4 {
	color: #f90;
	font-size: 1.0em;
}
	
body.secondary h1 {
	float: left;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

body.secondary ul { list-style: none; }

#content-main {
	font-size: 1.167em;
	line-height: 1.58em;
	margin-left: 252px;
	padding-right: 115px;
}

/* =Footer
--------------------------------------------------------------------------- */
#footer {
	border-top: 1px solid #333;
	color: #777;
	font-size: 0.92em;
	padding-top: 35px;
}

/* =Mailing list overlay
-------------------------------------------------------------- */
#overlay-mailing-list {
	background-color: #000;
	display: none;
	padding: 30px;
	width: 400px;
	position: absolute;
		top: 220px;
		left: 50%;
	margin-left: -230px;
	z-index: 300;
	/*
	-webkit-box-shadow: 0 0 5px #999;
	-moz-box-shadow: 0 0 5px #999;
	*/
}

#overlay-mailing-list h3 {
	color: #f90;
	font-size: 1.0em;
	margin-bottom: 16px;
	padding: 0;
	text-transform: uppercase;
}

#newsletter-form p {
	float: left;
	width: 49%;
}

#newsletter-form p.message { 
	background-color: #4c0b0b;
	margin: 0 0 12px;
	padding: 8px 12px;
	float: none;
	width: auto;
}

#newsletter-form p input { width: 85%; margin-bottom: 0; }

#newsletter-form label { font-size: 14px; }

#newsletter-form .button-group { clear: both; }
#newsletter-form .button-group button { margin-right: 8px; }

/* Windowshade */
#windowshade {
	background-color: rgba(51,51,51,0.75);
	*background: url(../img/windowshade.png) repeat 0 0;
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
		top: 0;
		left: 0;
	z-index: 200;
}


/* Page specific
--------------------------------------------------------------------------- */

/* =Home
--------------------------------------------------------------------------- */
body#home #content { padding-top: 48px; padding-bottom: 120px; }

body#home h1,
body#home h2 { padding: 0; text-indent: -9999px; }

body#home h1 {
	background: url(../img/text-design-is.png) no-repeat 0 0;
	height: 58px;
	margin-bottom: 24px;
}

body#home h2 { width: 100%; }

h2#thinking { 
	background: url(../img/text-thinking-made.png) no-repeat 0 0;
	height: 58px;
}

h2#communication { 
	background: url(../img/text-effective-comm.png) no-repeat 0 0;
	height: 48px;
}

h2#strategic { 
	background: url(../img/text-strategic-problem.png) no-repeat 0 0;
	height: 58px;
}

h2#investment { 
	background: url(../img/text-long-term-investment.png) no-repeat 0 0;
	height: 58px;
}

h2#catalyst { 
	background: url(../img/text-catalyst-for-change.png) no-repeat 0 0;
	height: 59px;
}

/* recent posts */
#recent-posts {
	border-top: 1px solid #333;
	padding: 8px 0 8px 65px;
}

#recent-posts h3 {
	color: #ff9900;
	float: left;
	font-size: 12px;
	margin-right: 30px;
	text-transform: uppercase;
}

#recent-posts ul { float: left; list-style: none; margin: 0; width: 660px; }

#recent-posts ul li {
	border-left: 1px solid #333;
	float: left;
	width: 218px;
}
#recent-posts ul li a { display: block; min-height: 50px; _height: 50px; padding: 0 17px; }

/* =Work
--------------------------------------------------------------------------- */
body#work h2 { margin-bottom: 12px; padding: 0; }

#work-list li.here a { color: #f90; }

/* =Contact
--------------------------------------------------------------------------- */
body#work #content-main { padding-right: 50px; }

#contact-methods li { margin-bottom: 26px; padding-left: 50px; }
#contact-methods em {
	color: #f90;
	float: left;
	font-style: normal;
	letter-spacing: 0.1em;
	margin-left: -50px;
	text-transform: uppercase;
}

/* =Blog
--------------------------------------------------------------------------- */
body#blog #content-main {
	float: left;
	margin-left: 48px;
	width: 443px;
}

body#blog h2 { 
	font-size: 18px;
	font-weight: 100;
	letter-spacing: 0.15em;
	margin-bottom: 8px;
	padding: 0;
}

body#blog h4 { text-transform: uppercase; }

#blog-search {
	border-bottom: 1px solid #333;
	margin-bottom: 20px;
	padding-bottom: 20px;
}

	#blog-search label {
		font-size: 14px;
	}
	
	input,
	textarea {
		background: #ccc url(../img/input-field-background.png) no-repeat 0 0;
		border-style: none;
		display: block;
		font-family: Verdana, Arial, sans;
		font-size: 14px;
		margin-top: 4px;
		margin-bottom: 12px;
		padding: 4px;
		width: 190px;
		*overflow: auto;
	}
	
	button {
		background: #2a2927 url(../img/button-background.png) repeat-x 0 0;
		border: none;
		color: #9b9b9c;
		cursor: pointer;
		font-family: "Helvetica Neue", Helvetica, Arial, sans;
		font-size: 10px;
		letter-spacing: 0.15em;
		padding: 4px 8px;
		*padding: 0;
		text-transform: uppercase;
	}
	
	button:hover {
		background: #543214 url(../img/button-background-over.png) repeat-x 0 0;
		color: #fff;
	}

body#blog ul.blog-list li { margin-bottom: 0; }
ul.blog-list li a {
	border-bottom: 1px solid #333;
	display: block;
	padding: 10px 0;
}

.blog-item {
	border-bottom: 1px solid #333;
	margin-bottom: 32px;
}
	
	.blog-meta,
	.blog-footer {
		color: #666;
		font-size: 12px;
		line-height: 1.0em;
	}
	
	.blog-meta { margin-bottom: 12px; }
	
	.blog-photo,
	.blog-item img { *display: block; *float: left; margin-bottom: 20px; }
	
/* =Blog : Archive
--------------------------------------------------------------------------- */
.archive-blog-item { 
	border-bottom: 1px solid #333;
	line-height: 1.0em;
	margin-bottom: 14px;
}
	.archive-blog-item.first { border-top: 1px solid #333; margin-top: 20px; padding-top: 14px; }

.archive-blog-item h3 { margin-bottom: 10px; padding: 0; }
.archive-blog-item .archive-date {
	float: left;
	font-family: Helvetica, Arial, sans;
	font-size: 13px;
	width: 80px;
}

.archive-blog-item .archive-content { margin-left: 90px; padding-bottom: 14px; }
.archive-blog-item .archive-content .archive-meta {
	color: #999;
	font-size: 12px;
	margin: 0;
}

/* =Blog : Detail
--------------------------------------------------------------------------- */
body#blog.detail .blog-footer {
	border-bottom: 1px solid #333;
	padding-bottom: 20px;
}

#comments { margin-bottom: 30px; }

.comment { background-color: #333; margin-bottom: 20px; }
.comment.owner { background-color: #555; }

.comment .comment-date,
.comment .comment-author {
	border-bottom: 1px solid #000;
	color: #ff9900;
	font-size: 12px;
	line-height: 1.0em;
	margin: 0;
	padding: 12px 18px 12px 20px;
}

.comment .comment-date {
	border-right: 1px solid #000;
	float: left;
	margin-right: 16px;
}

.comment .comment-author {
	border-bottom: 1px solid #000;
}

.comment .comment-text {
	clear: both;
	font-size: 13px;
	line-height: 1.5em;
	padding: 14px 20px 1px;
}

/* Add comment form */
#comment_form { font-size: 12px; }
body#blog #comment_form h2 { margin-bottom: 20px; }

#comment_form label {
	float: left;
	line-height: 25px;
	text-align: right;
	width: 110px;
}

#comment_form input,
#comment_form textarea {
	float: right;
	margin: 0;
	width: 270px;
}
#comment_form textarea { height: 6em; }

#comment_form button { margin-left: 125px; }

#comment_form p.checkbox { width: 280px; float: right; }
#comment_form p.checkbox label { display: inline; float: none; text-align: left; }
#comment_form p.checkbox input { display: inline; float: none; margin-right: 6px; width: auto; }

/* =Blog : Search Results
--------------------------------------------------------------------------- */
body#blog.search-results h2 { margin-bottom: 20px; }
body#blog.search-results h2 .search-keywords { color: #b86817; font-style: italic; }

/* =Slideviewer
--------------------------------------------------------------------------- */
.wslide-menu { height: 20px; margin-top: 8px; margin-bottom: 20px; }
.wslide-menu a {
	border: 1px solid #666;
	display: block;
	float: left;
	width: 13px;
	height: 13px;
	margin-right: 4px;
	text-indent: -9999px;
}

.wslide-menu a:hover,
.wslide-menu a.wactive { background-color: #f90; border-color: #f90; }

/* =Error
--------------------------------------------------------------------------- */
body#error h1 {
	float: none;
	margin-bottom: 1.0em;
}

body#error #content-main ul {
	list-style: square;
	margin-left: 18px;
}