/*************************************************

v7 - Grunge-tastic!
Jordan Boesch
www.boedesign.com

*/

/***************************************************
	GENERIC
	*/
	
/* Browser font sizes always default to 16px, so we want ours to start at 12px (16 x .75 = 12) */
html {
	font: 62.5%/180% "Verdana", "Arial", "Times New Roman", serif;
	background:#111 url(../images/bg-tile.png); 
	
}
body {
	font-size:120%;
	background:url(../images/bg.gif) no-repeat top center; 
	color:#fff;
}
a {
	color:#e5ffbe;
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
.more {
	display:block;
	padding:9px 10px 10px 42px;
	background:url(../images/bg-more.png) no-repeat top left;
	margin:0 0 27px 0;
	width:159px;
}
.left {
	float:left;
}
.right {
	float:right;
}
#wrapper {
	width:960px;
	margin:0 auto;
}
#header {
	position:relative;
}
#logo {
	position:absolute;
	left:17px;
	top:65px;
	text-indent:-9999px;
	background:url(../images/logo.png) no-repeat top left;
	width:165px;
	height:35px;
}

/***************************************************
	TOP NAV
	*/

#topnav {
	margin:60px 40px 0 0;
	padding:0;
	float:right;
}
#topnav li {
	list-style:none;
	float:left;
	margin-right:20px;
}
#topnav a {
	display:block;
	color:#fff;
	padding:10px 0;
	text-decoration: none;
}
#topnav a:hover {
	color:#ccc;
}
.cufon-active #topnav a {
	font-size:125%;
}

/***************************************************
	MID SECTION
	*/
#mid-section {
	height:200px;
}	
#inner-wrapper {
	width:900px;
	margin:0 auto;
}
#intro, 
#tweet-box {
	margin:50px 0 0 0;
}
#intro {
	float:left;
	width:580px;
	line-height:170%;
	font-size:170%;
}
.cufon-active #intro {
	font-size:170%;
}
.cufon-active #intro,
.cufon-active #tweet-box {
	margin-top:48px;
}
#tweet-box {
	float:right;
	width:280px;
	line-height:165%;
	font-size:94%;
}
#follow-me {
	background:url(../images/bg-tweet-box.png) no-repeat top left;
	width:192px;
	padding:8px 0 0 50px;
	height:29px;
	display:block;
	font-size:110%;
}
#left-col {
	float:left;
	width:573px;
}
#right-col {
	float:right;
	width:280px;
}
.main-heading {
	color:#5f6668;
	font-size:160%;
	padding:0 0 .9em 0;
	background:url(../images/bg-heading-underline.gif) repeat-x bottom left;
}
.main-heading span {
	color:#494f51;
}
.darker {
	background:url(../images/bg-heading-underline-dark.gif) repeat-x bottom left;
}

/***************************************************
	LAB GRID
	*/
#lab-grid {
	margin:0;
	padding:0;
}	
#lab-grid li {
	list-style:none;
	float:left;
	background:url(../images/bg-lab-grid.png);
	padding:8px 8px 4px 8px;
	position:relative;
	overflow:hidden;
	margin:0 18px 18px 0;
}
#lab-grid .no-margin {
	margin-right:0;
}
#lab-grid .small-caption {
	position:absolute;
	bottom:7px;
	left:0;
	display:block;
	width:158px;
	padding:0 8px;
	font-size:80%;
}
#lab-grid .small-caption span {
	background:#111;
	opacity:.9;
	display:block;
	padding:2px 5px 5px 5px;
	font-weight:bold;
}
#lab-grid .small-caption em {
	display:block;
	line-height:115%;
	color:#ccc;
	font-style:normal;
	font-weight:100;
	font-size:95%;
}
.js-caption-overlay {
	background:#121212;
	z-index:998;
	padding:12px;
	position:absolute;
	overflow:hidden;
}
.js-overlay-image {
	float:left;
}
.js-overlay-html {
	float:left;
	padding:0 0 0 15px;
	width:185px;
}
.js-overlay-html h4 {
	margin:0;
	padding:0 0 10px 0;
}
.js-overlay-html p {
	font-size:90%;
	line-height:140%;
	margin:0;
}

/***************************************************
	SIDEBAR
	*/
	
#right-col ul {
	margin:0 0 20px 0;
	padding:0;
}
#right-col li {
	list-style:none;
	padding:0 0 .2em 0;
}
#side-projects p {
	margin:.5em 0;
}
#bitchin-blogs span,
.post h3 span,
.post h3 em {
	font-size:85%;
	color:#5F6668;
}
.post h3 em {
	color:#494F51;
	font-size:75%;
	font-style:normal;
}
#search {
	background:url(../images/bg-search.png) no-repeat top left;
	border:none;
	color:#fff;
	width:224px;
	padding:10px 10px 10px 49px;
}

/***************************************************
	POSTS
	*/
	
.post {
	margin:0 0 20px 0;
}
.post-content {
	line-height:165%;
}
.linkbutton,
.demobutton {
	padding:7px 0 10px 58px;
	font-weight:bold;
	width:170px;
	display:block;
}
.linkbutton {
	background:url(../images/bg-download.png) no-repeat top left;
}
.demobutton {
	background:url(../images/bg-demo.png) no-repeat top left;
}
#respond {
	margin:1.5em 0 0 0;
}
#comment { /* comment textarea */
	width:550px;
}
#comments {
	margin:1em 0;
	padding:0;
}
#comments-header {
	margin:2em 0 0 0;
}	
#comments li {
	list-style:none;
	padding:20px 10px 20px 20px;
	border-bottom:1px solid #232323;
}
#comments .jordan {
	background:url(../images/bg-jordan.png) repeat-x top left;
}
.comment-left {
	width:195px;
}
.comment-left img {
	margin:0 10px 0 0;
}
.comment-left span {
	display:block;
	width:130px;
}
.comment-left,
.comment-pic,
.comment-author-meta {
	float:left;
}
.comment-date {
	color:#5f6668;
	font-size:85%;
}
.comment-content {
	width:345px;
	float:right;
}
#commentform input,
#contactform input {
	margin:0 5px 0 0;
}
#commentform input,
#commentform textarea,
#contactform input,
#contactform textarea,
table thead th {
	background:#111;
	border:1px solid #222;
	padding:4px;
	color:#fff;
	font-family:Verdana;
	font-size:100%;
}
table thead th {
	font-weight:bold;
}
table td {
	border:1px solid #222;
}
table thead th,
table thead td {
	padding:10px;
}
.req,
.error {
	color:#d84444;
}
span.error {
	display:block;
	background:url(../images/bg-arrow-up.png) no-repeat top left;
	margin:1em 0 0 0;
	padding:0 0 0 25px;
}
.flash {
	margin:0 0 1em 0;
	padding:8px;
	font-size:130%;
}
.success {
	color:#E5FFBE;
}

/***************************************************
	PAGES
	*/
	
.page-content {
	margin:0 0 1.8em 0;
}

/***************************************************
	FOOTER
	*/

#footer {
	text-align:center;
	font-size:85%;
	padding:5em 0 1em 0;
}