/*
Theme Name: SuperPoint
Theme URI: http://www.lokeshdhakar.com
Description: Hello fellow!
Version: 1.0
Author: Lokesh Dhakar
Author URI: http://www.lokeshdhakar.com 
*/


/* YAHOO RESET ---------------------------------------------------------- */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
	margin:0;
	padding:0;
}table{border-collapse:collapse;border-spacing:0;}fieldset,img{
	border:019;
}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;}

/* YAHOO FONTS ---------------------------------------------------------- */

body {font:13px arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}pre, code {font:115% monospace;*font-size:100%;}body * {
	line-height:0px;
}
/* cheat sheet: [px,%] [10,77] [11,85] [12,92] [13,100] [14,107] [16,122] [18,136] [20,152] [24,182] [26,197] */


/* GLOBAL ---------------------------------------------------------- */

body{
	font-size: 82%;
	font-family: Arial, "Lucida Sans Unicode", "Lucida Sans", Helvetica, sans-serif;
	color: #E6E3DC;
	background-color: #E6E3DC;
	padding-bottom: 4em;
}

a { color: #333; font-weight: bold; text-decoration: none; }
a:hover {  color: #f84;}

p{ line-height: 1.5em; margin-bottom: 1.0em; }

h1,h2, h3, h4, h5, h6{ font-weight: bold; }
h1{ font-size: 200%; letter-spacing: -1px;}
h2{ font-size: 136%; line-height: 1.2em; font-family: "segoe ui", Arial, sans-serif;  }
h3{  font-size: 122%; font-family: "segoe ui", Arial, sans-serif;  text-transform: uppercase; }
h4{ }

em { font-style: italic; }
strong { font-weight: bold; }
del { text-decoration: line-through;}
small{ font-size: 77%; }
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;}

/* TABLES ---------------------------------------------------------- */

table{ border-collapse:collapse; margin-bottom: 1em; }
.entry-content table{ width: 31em;}
thead{ }
thead th{
 	border-bottom: 1px solid #ccc;
	font-weight: bold;
}
thead tr{ }
tr.border-top td{ border-top: 1px solid #eee;}
td, th{ vertical-align: top; padding: .25em .5em; }

table.data td, table.data th{ text-align: right;}


/* FORMS ---------------------------------------------------------- */

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

input[type="submit"]{ font-size: 107%; font-weight: bold; margin-top: 0.75em; padding: .4em; 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 ---------------------------------------------------------- */
body{ position: relative;}

#content{
	float: left;
	width: auto;
}
#main {	float: left; width: 49em; w\idth: 47em; margin-left: 1em; margin-right: 1em; padding-top: 2em;}

#sidebar{
	position:fixed;
	left: 850px;
	width: 343px;
	top: 0px;
	right: auto;
	color: 282828;
}
* html div#sidebar  { left: 51em; position:absolute; }

#footer{ position:fixed; left: 51em; bottom: 0; width: 26.4em; }
* html div#footer  { left: 51em; bottom: 0; position:absolute; }


/* SIDEBAR ----------------------------------------------- */
#sidebar{ }
#sidebar a{ }

#sidebar #logo{
	background-color: 282800;
}
#sidebar #logo a{ color: #f9f9f9; font-size: 152%; color: #f3f3f3; font-family: "segoe ui", Arial, sans-serif; }


#sidebar .module{ padding: 1em .8em; font-size: 85%; background-color: #eee;}
#sidebar .module h3{ font-size: 14px;}
 
.recent-posts{ }
.recent-posts td{ padding: .5em 0 .5em 0; border-bottom: 1px solid #999; }
.recent-posts .date{ width: 8em; }

#archiveform label{ padding-top: 0;}

/* NAV ----------------------------------------------- */

#nav{
	font-size: 92%;
	overflow: hidden;
	padding: .6em .4em 0 .4em;
	margin: 0 0 1em 0;
	background-color: #E7E6E1;
}
#nav li { min-height: 60px; float: left; display: inline; width: 5.5em; margin-bottom: 1em; overflow: hidden; border-right: 1px solid #ccc;   }
#nav li.last{ border-right: none;}
#nav a{display: block; padding: .2em 2px .2em 6px; font-size: 85%; }
#nav dt { font-weight: bold; text-transform: uppercase; }
#nav dd {}

#about #nav .about a,
#blog #nav .blog a,
#archives #nav .archives a{} 

/* CONTENT CHUNKS ----------------------------------------------- */

.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;}

.entry-info,
.comment-info,
.timeline .year,
.archives .year{ float: left; width: 9em;  }

.entry-content,
.comment-content{ width: 47em; w\idth: 37em; margin-left: 10em;  }

/* POSTS TEMPLATE ----------------------------------------------- */

.entry{ padding-bottom: 3em; margin-bottom: 3.5em; border-bottom: 3px solid #555; }
.single .entry{ padding-bottom: 0; margin-bottom: 2em;  border: none;}

.entry-content p a, .entry-content li a { text-decoration: underline;}
.entry-content p a:hover, .entry-content li a:hover{ color: #f84; }

.entry-content ul, .entry-content ol, #comments ul, #comments ol{ margin: .5em 0 .5em 2em;;}
.entry-content li, #comments li{  list-style-type: square; padding-bottom: .75em;}

.entry-info .date,
.comment-info .date{ font-weight: bold; background-color: #ddd;  font-size: 85%; padding: 0.2em 0 0.2em 0.4em; }

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

.entry-content h2 + p { border-top: 1px solid #999; padding-top: 1em; }
.dropcap{ font-size: 300%;	padding: 0.1em 0.1em 0 0; font-weight:bold; line-height: .8em; float: left; }

.entry-content h2 { font-size: 144%; font-weight: normal; margin-bottom: .5em; color: #999; font-family: Arial, sans-serif;  }
.entry-content h3{ padding: .2em 0 .2em 0; font-size: 107%; }

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

.commentCount{ background: url(img/speech_bubble_point.gif) 10px 100% no-repeat; padding-bottom: 8px;}
.commentCount a{ float: left; display: block; font-weight: bold; color: #000; background-color: #ddd;  font-size: 85%; padding: .2em .4em; }

.entry-content .wide{ margin-left: -131px; position: relative; }

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

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


/* 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;}

/* WORDPRESS PAGES ----------------------------------------------- */

.post h2{ padding-bottom: 1.5em;}
.post h3{ padding: .2em 0 0 0; font-size: 107%;}
.post p a, .post li a { text-decoration: underline;}
.post p a:hover, .post li a:hover{ color: #f30; }


/* ABOUT ----------------------------------------------- */
#about p{ font-size: 92%;}
#about #selfportrait{ height: 256px; background: url(/images/about/me_with_speechbubble.jpg) no-repeat; margin-top: -.5em; margin-bottom: 2em;  position: relative; }
#about #selfportrait #speechBubbleContent{ position: absolute; top: 142px; left: 34px; width: 100px; overflow: hidden; text-align: center; font-size: 24px; font-weight: bold;}

/* 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%;}
.archives .content{ width: 47em; w\idth: 37em; margin-left: 10em; }
.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 ----------------------------------------------- */

#commentsHeader{  padding-left: 10em; border-top: 3px solid #555; padding-top: 2em; padding-bottom: .5em; }
#comments .commentCount{}

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

.comment .author{  margin-bottom: 0.5em; }
.comment .author .author-name { display: block; float: left; background-color: #ed6; padding: 0.2em 0.4em; font-size: 85%; font-weight: bold; }
.comment .author .author-link { display: block; float: left; padding: 0.2em 0.4em; font-size: 85%; margin-left: .4em;}
.comment .author .author-link a{ color: #999;} 
.comment.authorcomment .author div{ background-color: #6bf; font-size: 136%;}
.comment .author div a{ color: #;}
.comment .comment-body{}

#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; }
	
 
/* FOOTER ----------------------------------------------- */

#footer{ background-color: #eee;}
#footer p{ margin: 10px; font-size: 85%;}

/* CLEAR FIX  ---------------------------------------------------------- */

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block;}
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }