/*
Theme Name: Griddy
Theme URI: http://lokeshdhakar.com/
Description: Designed from scratch for my site: lokeshdhakar.com. Please don't copy without permission. Use bits and pieces, but do something unique and new.
Version: 1.0
Author: Lokesh Dhakar
Author URI: http://www.lokeshdhakar.com
Tags: multiple columns, custom header, grid


Colors
	orange: #e38b4c
	dull green: #88ab7f
*/

@import url("reset.css");
@import url("960.css");


/* BASE ---------------------------------------------------------- */
html{}
body{ background: #fff url(img/bg_vertgrid.png) center; }
body, input{ font-family:  "Helvetica Neue",Helvetica,Arial,sans-serif; color: #555; font-size: 16px; }

a:link, a:visited{ color: #338fb3; font-weight: bold; text-decoration: none; }
a:hover{ color: #103c58; }

h1, h2, h3, h4, h5{ font-weight: bold;}
h2, h3{ }
h1{ font-size: 32px; line-height: 1.2em; } 
h2{ font-size: 18px; line-height: 1.2em; margin-bottom: .4em;}
h3{ font-size: 16px; }
h4{ font-size: 14px; }
h5{ }

p{ line-height: 1.5em; margin-bottom: 1em;}
p a{padding: .25em 0;}

em { font-style: italic; }
strong{ font-weight: bold;}
small{ font-size: 90%; }
del { text-decoration: line-through;}
pre{ display: block; margin: 1em 0; padding: 0 .5em; overflow: auto;  background-color: #eee;}
code{ font-family: monospace; }
pre code{ line-height: 1.3em;}
abbr, acronym{ border-bottom: 1px dotted #333;}

object + p { padding-top: .5em;}

/* FORMS ---------------------------------------------------------- */
input[type="text"],textarea,select{	background-color: #fff; border: 1px solid #bbb; border-top: 2px solid #bbb; padding: .1em .2em;  }

input[type="submit"]{  font-weight: bold; padding: .25em; font-weight: bold; border:1px solid #abadb3; background: #fff; }
input[type="submit"]:hover{ background-color: #bbb; cursor: pointer;}
input:focus, textarea:focus, select:focus { background-color: #ffc; border-color: #fc6; }

label { display: block; padding-top: .5em;  line-height: 1.5em; color: #666; }


/* LAYOUT ---------------------------------------------------------- */
.post{ padding-bottom: 2em; margin-bottom: 2em; border-bottom: 3px solid #555;}
.post.single{ padding-bottom: 2em;}


/* HEADER ---------------------------------------------------------- */
#hd{ height: 80px; background: url(img/bg_gray_trans.png); border-bottom: 1px solid #ddd;}

/* Dropped gutters in header, thus the custom sizes */
#hd .grid_2{ width: 160px; margin: 0;}
#hd .grid_8.prefix_2{ w\idth: 800px; width: 640px; padding-left: 160px; margin: 0;}

#hd .logo{ display: block; width: 160px; height: 80px; background: url(img/logo.png); text-indent: -9999px; overflow: hidden;}

#hd .nav a{ display: block; width: 160px; height: 80px; float: left; background: url(img/nav.png); text-indent: -9999px; overflow: hidden;}
#hd .nav a:hover{ background-color: #e2e2e2;}
#hd .nav .about a{ background-position: 0;}
#hd .nav .work a{ background-position: -160px;}
#hd .nav .blog a{ background-position: -320px;}
#hd .nav .contact a{ background-position: -480px;}


/* BODY ---------------------------------------------------------- */
#bd{ margin-top: 6em;}
.pageTitle{ he\ight: 40px; height: 35px; margin-bottom: 5px; background: url(img/headers.gif) no-repeat; text-indent: -9999px; overflow: hidden;}


/* SIDEBAR ---------------------------------------------------------- */
.sidebar ul{ margin: .5em 0 .5em 2em;}
.sidebar ul li{ margin-bottom: .75em;}
.sidebar ul ul{ }
.sidebar ul ul li{ list-style-type: square; }


/* FOOTER ---------------------------------------------------------- */
#ft{ margin-top: 6em;}




/* ABOUT */
.page.about{}

/* WORK */
.page.work .pageTitle{ background-position: 0 -35px;}
.page.work .workItem{ padding: 3em 0; border-bottom: 1px solid #eee;}

/* BLOG */
.blog .pageTitle{ background-position: 0 -70px;}

/* CONTACT */
.contact .pageTitle{ background-position: 0 -105px;}











/* SUPERPOINT DEPRECATED ---------------------------------------------------------- */

.sectionName, .sectionHeading{ float: left;}
.subSectionName, .subSectionHeading{ float: left; border-bottom: 3px solid #555; }

.sectionName{ width: 10em; w\idth: 8.6em; height: 2.4em; he\ight: 1.6em; margin-left: 1em; padding: .6em 0 .2em .4em;  background-color: #000;}
.sectionHeading{ width: 37em; w\idth: 35.6em; height: 2.4em; he\ight: 1.6em; margin-left: 1em; padding: .6em 0 .2em .4em; }
.subSectionName{ width: 9em; w\idth: 8.6em; height: 2.0em; he\ight: 1.2em; padding: .6em 0 .2em .4em; margin-bottom: 2em;}
.subSectionHeading{ width: 37em; w\idth: 35.6em; height: 2.0em; he\ight: 1.2em; margin-left: 1em; padding: .6em 0 .2em .4em; margin-bottom: 2em;}

.sectionName, .sectionName a{ color: #fff; }

.sectionHeading h3{ padding-top: .2em;}
.sectionHeading h3 strong{ color: #f84;}

.subSectionName h2{ font-size: 108%;}
.subSectionHeading h2{ font-size: 108%;}

.sectionHeading .prevPostLink{ float: left;}
.sectionHeading .nextPostLink{ float: right;}
.sectionHeading .prevPostLink a, .sectionHeading .nextPostLink a{ display: block; font-size: 92%; line-height: 2em;}
.sectionHeading .prevPostLink a{ padding-left: 10px; background: url(img/left_arrow.png) 0 6px no-repeat;} 
.sectionHeading .nextPostLink a{ padding-right: 10px; background: url(img/right_arrow.png) 100% 6px no-repeat;}


/* POSTS TEMPLATE ----------------------------------------------- */
.post .entry{ padding-bottom: 1em;}
.post h1 a{ color: #555;}
.post h1 a:hover{ color: #222;}
.post h1 .date{ color: #999; font-size: 22px; font-weight: normal;}

.post .files{ margin: -.4em 0 1.75em 0;}
.post .files .specs{ color: #999; font-size: 92%;}
.post .files .file.pdf{ background: url(img/pdf_icon.png) no-repeat; padding-left: 40px; height: 34px;}
.post .files .file.illustrator{ background: url(img/illustrator_icon.png) no-repeat; padding-left: 40px; height: 34px;}
.post .files .file.map{ background: url(img/map_icon.png) no-repeat; padding-left: 40px; height: 34px;}

.post .diagram{ float: left; margin: 0 1em .5em 0; border: 1px solid #999;}
.post .diagram-alt{ float: right; margin: 0 0 .5em 1em; border: 1px solid #999;}

.alignnone{ margin: .5em 0;}
.size-full{ border: 1px solid #ddd;}



/*
.categories{ width: auto; margin-bottom: 0.5em;}
.categories a{ display: block; float: left; color: #000; background-color: #fb6; padding: .2em .4em .2em .4em; margin-right: 0.4em; font-size: 85%;}
*/


.entry ul, .entry ol{ margin: .5em 0 .5em 2em;;}
.entry li{  list-style-type: square; padding-bottom: .75em; line-height: 1.5em;}

.post .continueReading{ margin-bottom: 1em;}
.post .continueReading a{ font-size: 122%;}






/* POSTS SPECIFIC ----------------------------------------------- */

.coffee { text-align: center; font-size: 92%; font-family:  Arial, Helvetica, sans-serif; }
.coffee .diagram{ margin: 0 1.5em 1.5em 0; border: none;}
.coffee h3{ text-transform:none;}
.coffee h3 small{ color: #999;}

.pitch { border-bottom: 1px solid #999; padding: 1em 0; margin-bottom: 1em;} 
.pitch.first{ border-top: 1px solid #999;}
.pitch .diagram{ border: none;}
.pitch h3{ padding-bottom: .2em;}
.pitch ul li{ margin-left: 1.1em;}


/* ARCHIVES ----------------------------------------------- */

#archives .stats{ margin-left: 10em; margin-bottom: 1em;}
#archives .stats p{ font-size: 146%; line-height: 1.3em; }
.archives #nav .archives a{ color: #fff; background-color: #000;}
.archives .module{ margin-bottom: 1em;}
.archives .year{  font-weight: bold; background-color: #ddd;}
.archives .year div{ padding: 0.2em 0 0.2em 0.4em; font-size: 146%;}

.archive-list{ margin-top: -.3em; margin-bottom: 1em ; border-top: 1px solid #eee; }
.archive-list td{ padding: .4em 0;  border-bottom: 1px solid #e3e3e3; }
.archive-list .date{ width: 6em; font-size: 92%;}
.archive-list td.title{ width: 19em; overflow: hidden; }
.archive-list td.title a{ color: #000;  font-size: 92%;}
.archive-list td.title a:hover{ color: #f30;}
.archive-list td.comment-count{width: 12em; font-size: 92%;}
.archive-list td.comment-count .commentBar{ background-color: #ed6; height: 1.2em;}


/* COMMENTS ----------------------------------------------- */

#comments{ border-top: 3px solid #555; padding-top: 2em; padding-bottom: .5em; }
.commentCount{ background: url(img/speech_bubble_point.gif) 10px 100% no-repeat; padding-bottom: 8px; margin-bottom: 12px;}
.commentCount span{ float: left; display: block; font-weight: bold; background-color: #eee; border: 1px solid #ddd; color: #555;  padding: .2em .4em; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

.comment{ margin-bottom: 2em;}
.comment .authorpic{float: left; width: 80px;}
.comment .entry{ margin-left: 100px; }
.comment .date{ color: #999; font-weight: normal; font-size: 14px;}
.comment .actions{ font-size: 14px; margin-top: -1em;}
.comment .actions a{ color: #88ab7f; font-weight: bold;}
.comment .actions a:hover;{ color: #386b2f; }


.comment .entry p:last-child{ margin-bottom: 0; padding-bottom: 0;}
.comments_wrap .left img {
	border: #D7D7D7 1px solid;	
	padding: 1px !important;
}

.comments_wrap .right {
	margin-left: 55px;
}

.comments_wrap .right h4 {
	font-size: 11px !important;
	text-transform: none;
	padding: 0;
	font-weight: normal;
}

.comments_wrap .right h4 b {
	font-size: 12px !important;
}

.comments_wrap .right h4 a {
	text-decoration: none;
}

.comments_wrap .right h4 a:hover {
	text-decoration: underline;
}

.comment-author{ float: left; width: 160px;}
.comment-author .avatar{ float: left; margin-right: 10px;}
.comment-author cite{ font-style: normal; }
.comment-author .says{ display: none; }




.comment{ padding: 1em 0 .5em 0; }
.comment-content{ }


#comment-form{ margin-left: 10em; margin-top: 4em; }
#comment-form #author,
#comment-form #email,
#comment-form #url{	width: 12em; }
#comment-form #comment{	width: 34.5em; margin-top: 1em; }



/* POSTS SPECIFIC ----------------------------------------------- */

.coffee { text-align: center; }
.coffee .diagram{ margin: 0 1.5em 1.5em 0; border: none;}
.coffee h3{ font-size: 14px; text-transform:none;}
.coffee h3 small{ color: #999;}

.pitch { border-bottom: 1px solid #999; padding: 1em 0; margin-bottom: 1em;} 
.pitch.first{ border-top: 1px solid #999;}
.pitch .diagram{ border: none;}
.pitch h3{ padding-bottom: .2em;}
.pitch ul li{ margin-left: 1.1em;}