/* ---------------------------------------------------------------------------

	Subtle Technology CSS
	http://www.subtletech.com

--------------------------------------------------------------------------- */

@import url('reset.css');

/* ---------------------------------------------------------------------------
	
	> buckets

--------------------------------------------------------------------------- */

html { 
	background-color: #000000;
	background-image: url(../images/_back-stripes.png);
	background-attachment: fixed;
	
	font-size: 100%;
}

body {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	font-size: 1.0em;
	
	color: #222222;
}

#top_bar, #footer, .actual {
	width: 955px;
	margin: 0 auto;
}

/**/

#top_bar {
	height: 50px;
	padding-top: 10px;
	padding-right:4px;
	
	text-align: right;
	
	color: #ffffff;
}

#top_bar img {
	vertical-align: bottom;
	margin-right: 4px;
	margin-left: 16px;
}

/**/

#main_bar {
	background-color: #000000;
	height: 100px;
	border-top: 1px solid #333333;
}

/**/

#content {
	background-color: #ffffff;
	overflow: hidden;
}

#content .actual-content {
	width: 59.6875em;
	margin: 0 auto;
}

#content .actual-content #left {
	float: left;
	width: 34.125em;
	padding: 2.1875em 1.0em 1.0em 1.0em;
}

#content .actual-content #right {
	float: right;
	width: 18.375em;
	margin-left: 2.1875em;
	padding: 2.1875em 1.0em 1.0em 1.0em;
	/* background: url(../images/q-mark.png) no-repeat 50% -40px; */
	background-color: #fafafa;
	padding-bottom: 1000em;
	margin-bottom: -990em;
	
	border-left: 0.0625em solid #e6e6e6;
	border-right: 0.0625em solid #e6e6e6;
}

.clear {
	font-size: 0.001em;
	line-height: 0.001em;
	clear: both;
}
	
/* ---------------------------------------------------------------------------
	
	> links

--------------------------------------------------------------------------- */

a:link { 
	color: #2D5B77;
        text-decoration: none;
}
	
a:visited {
	color: #2D5B77;
        text-decoration: none;
}
	
a:hover {
	color: #122d39;
        text-decoration: underline;
}

/* ---------------------------------------------------------------------------
	
	> header

--------------------------------------------------------------------------- */

#top_bar a:hover {
	color: #000;
	text-decoration: underline;
}

#top_bar a:link, #top_bar a:visited {
	color: #fff;
	text-decoration: none;
}

#top_bar span {
	font-size: 10px;
	margin-left: 16px;
	padding-left: 16px;
}

span.phone {
	background: url(../images/phone.png) no-repeat 0 0;
}

span.email {
	background: url(../images/envelope.png) no-repeat 0 2px;
}



/* ---------------------------------------------------------------------------
	
	> nav

--------------------------------------------------------------------------- */

#logo {
	display: block;
	width: 438px;
	height: 35px;
	margin-top: 32px;
	background: url(../images/_logo.png) no-repeat 50% 50%;
	float: left;
	text-indent: -9999px;
}

#nav {
	margin: 0;
	margin-top: 41px;
	height: 20px;
	list-style: none;
	overflow: hidden;
	float: right;
}

#nav li {
	float: left;
	margin: 0 5px;
	height: 20px;
	text-indent: -9999px;
}

#nav li a {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

#nav_home, #nav_home a {
	width: 44px;
	background: url(../images/_nav/home.png) no-repeat 0 0;
}

#nav_projects, #nav_projects a {
	width: 83px;
	background: url(../images/_nav/projects.png) no-repeat 0 0;
}

#nav_approach, #nav_approach a {
	width: 84px;
	background: url(../images/_nav/approach.png) no-repeat 0 0;
}

#nav_who, #nav_who a {
	width: 47px;
	background: url(../images/_nav/who.png) no-repeat 0 0;
}

#nav_contact, #nav_contact a {
	width: 100px;
	background: url(../images/_nav/contact.png) no-repeat 0 0;
}

/* hover state */

#nav li a:hover {
	background-position: 0 -30px;
}

/* here states */

body.home #nav #nav_home, body.home #nav #nav_home a, body.home #nav #nav_home a:hover,
body.projects #nav #nav_projects, body.projects #nav #nav_projects a, body.projects #nav #nav_projects a:hover,
body.approach #nav #nav_approach, body.approach #nav #nav_approach a, body.approach #nav #nav_approach a:hover,
body.who #nav #nav_who, body.who #nav #nav_who a, body.who #nav #nav_who a:hover,
body.contact #nav #nav_contact, body.contact #nav #nav_contact a, body.contact #nav #nav_contact a:hover {
	background-position: 0 -60px;
}

/* ---------------------------------------------------------------------------
	
	> rss button

--------------------------------------------------------------------------- */

#rss {
	display: block;
	float: right;
	margin-top: 44px;
	margin-left: 16px;
	margin-right: 4px;
}

/* ---------------------------------------------------------------------------
	
	> headlines & text

--------------------------------------------------------------------------- */

h1 {
	font-size: 3.0em;
	color: #2D5B77;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
}

h2 {
	margin-bottom: 0.2em;
	font-size: 2.0833em;
	font-weight: normal;
	color: #2D5B77;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

p { 
	margin-bottom: 2.0em;
}

/* :: specific headlines */

h1.who-are-we, h1.what-have-we-done {
	height: 40px;
	text-indent: -9999px;
	margin-bottom: 16px;
}

h1.who-are-we {
	background: url(../images/_headlines/who-are-we.png) no-repeat 0 0;
}

h1.what-have-we-done {
	background: url(../images/_headlines/what-have-we-done.png) no-repeat 0 0;
}

/* ---------------------------------------------------------------------------
	
	> right zone

--------------------------------------------------------------------------- */

body.home #content .actual-content #right p {
	font-size: 0.875em;
	line-height: 1.4em;
}

#who-are-we {
	margin-bottom: 3.75em;
}

#showcase img {
	margin-right: 8px;
	margin-bottom: 8px;
}

/* ---------------------------------------------------------------------------
	
	> footer

--------------------------------------------------------------------------- */

#footer {
	color: #666666;
	padding: 16px 0;
	font-size: 0.75em;
}

#footer div {
	margin-left: 16px;
	margin-bottom: 8px;
}

#footer a:link, #footer a:visited {
	color: #525252;
	text-decoration: none;
}

#footer a:hover { 
	color: #f0f0f0;
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
	
	> posts

--------------------------------------------------------------------------- */

div.post {
	font-size: 0.75em;
	margin-bottom: 3.333em;
	padding-bottom: 1.083em;
	
	/* background: url(../images/post-bottom.png) repeat-x bottom left; */
}

div.post p {
	font-size: 1.083em;
	line-height: 1.583em;
}

.dotted-line {
	height: 2px;
	background: url(../images/_dotted.png) repeat-x 0 0;
	/* margin-left: -8px; */
	margin-bottom: 0.5em;
}

p.post_info {
	/* padding: 10px 0; */
	margin-bottom: 0.545em;
	font-size: 0.9em !important;
	color: #747474;
	/* border-top: 1px dotted #CCCCCC; */
}

p.post_info strong { 
	color: #000000;
}

/* ---------------------------------------------------------------------------
	
	=blog comments

--------------------------------------------------------------------------- */

div.comment {
	margin-bottom: 5px;
	padding: 40px 20px 1px 30px;
	background: #e6e6e6 url(../img/comment.gif) no-repeat 0 0;
}

div.comment p { margin-bottom: 0; }

/* ngen comments - shows heads */

div.comment_bruce {
	background-image: url(../img/comment_bruce.gif);
}

div.comment_carl {
	background-image: url(../img/comment_carl.gif);
}

div.comment_joey {
	background-image: url(../img/comment_joey.gif);
}

div.comment_kat {
	background-image: url(../img/comment_kat.gif);
}

div.comment_travis {
	background-image: url(../img/comment_travis.gif);
}

div.comment_varick {
	background-image: url(../img/comment_varick.gif);
}

div.comment_info {
	margin-bottom: 15px;
	padding-bottom: 5px;
	background: url(../img/div_dot.gif) repeat-x bottom left;
}

/* ngen comments - pushes comment info over */

div.comment_ngen div.comment_info { margin-left: 60px; }

p.comment_author {
	float: left;
	width: 60%;
	font-size: 120%;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #000;
}

p.comment_author a:link, 
p.comment_author a:visited {
	text-decoration: none;
}

p.comment_posted {
	float: right;
	width: 38%;
	text-align: right;
	color: #7d7d7d;
}

div.comment_text {
	clear: both;
}

div.comment_text p {
	margin-bottom: 20px;
}

#comment_form h4 {
	padding-top: 5px;
	border-top: 2px solid #000;
}

dl.two_column dd.comment { margin-bottom: 5px; }

/* if no comments */

div.comment_none {
	padding-bottom: 10px;
}

/* if comments expired */

#comment_expired { 
	margin-bottom: 25px;
}

#comment_expired h4 { 
	margin-bottom: 0; 
	padding-top: 5px;
	border-top: 2px solid #000;
}

/* comment preview */

#comment_preview {
	margin-bottom: 25px;
	border-bottom: 2px solid #000;
}

#comment_preview h4 span { 
	background-color: #e2e171;
}

/* textile formatting help */

#texile_help {
	display: none;
	padding: 0;
	margin: 0;
}

#texile_help div {
	padding: 20px 10px 5px 30px;
	background-color: #eee;
	border: 1px solid #c5c5c5;
}

#textile_help p, 
#textile_help ul, 
#textile_help li {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
	
	=blog archive

--------------------------------------------------------------------------- */

/* category listing */

#archive_categories {
	float: right;
	/*width: 35%;*/
}

#archive_categories dt {
	margin-bottom: 15px; 
	font-size: 130%; 
}

#archive_categories dd {
	margin-bottom: 10px;
	padding-top: 10px; 
	font-size: 110%; 
	font-weight: bold;
	background: url(../img/div_dot.gif) repeat-x 0 0;
}

/* regular archive listing */

#archive_list {
	/*float: left;
	width: 62%;*/
}

#archive_list dt {
	padding-top: 10px;
	background: url(../img/div_dot.gif) repeat-x 0 0;
}

#archive_list dt span.archive_date {
	float: left;
	width: 65px;
	color: #a4a4a4;
	font-size: 85%;
}

#archive_list dd.archive_categories {
	clear: both;
	margin-bottom: 10px;
	padding: 0 0 0 65px;
}

/* ---------------------------------------------------------------------------
	
	=search results

--------------------------------------------------------------------------- */

p.results {
	font-weight: normal;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	font-size: 120%;
}

p.results strong { 
	color: #000;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	font-size: 105%;
	font-style: normal;
}

#search_results { margin: 0; }

#search_results dl { margin-bottom: 15px; }

#search_results dt { margin-bottom: 2px; }

#search_results dd { margin-bottom: 2px; }

#search_results dd.search_info { color: #7b7b7b; }