/* @override http://kimili.com/cmn/css/base.css */

/*
Title:			Kimili screen styles
Author:			Michael Bester - michael@kimili.com
Last Updated:	09.15.2009
*/


/* Structure
------------------------------------- */

html {
	height: 100%;
	margin-bottom: 1px;
}

body {
	margin: 0;
	padding: 0 1em;
	background: #fbf9f7;
	min-height: 100%;
}

#content,
#secondary {
	width: 44em;
	margin: 0 auto;
	max-width: 100%;
}

#content {
	position: relative;
	padding-bottom: 3em;
}

#secondary {
	width: 50em;
	overflow: hidden;
	font-size: 0.875em;
}

#secondary .col {
	float: left;
	width: 24em;
	max-width: 50%;
}

#secondary #listening.col {
	padding-right: 1em;
}

#secondary #saying.col {
	padding-left: 1em;
}

/* Typography
------------------------------------- */

body {
	font-family: "sorts-mill-goudy-1","sorts-mill-goudy-2","Adobe Caslon Pro", Garamond, Georgia, Times, serif;
	color: #424242;
	line-height: 1.5em;
	text-rendering: optimizeLegibility;
}

p, ul, ol, dl, pre, blockquote, input, textarea {
	font-size: 1em;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}

ul, ol {
	margin-left: 0;
	margin-right: 0;
	padding: 0 0 0 2em;
	
}

ul {
	list-style-type: square;
}

ol {
	list-style-type: lower-roman;
}

ul ul,
ol ul {
	list-style-type: circle;
	margin: 0.75em 0
}

ul ol,
ol ol {
	list-style-type: decimal;
	margin: 0.75em 0
}

dd {
	position: relative;
	padding: 0;
	margin: 0;
}

h1 {
	font-size: 1.5em;
	line-height: 1em;
	margin-bottom: 1em;
	margin-top: 2em;
	font-weight: normal;
	/*font-variant: small-caps;*/
	/*text-shadow: #bbb 0.05em 0.05em 0.1em;*/
}

h2 {
	font-size: 1.333em;
	line-height: 1.125em;
	margin-top: 1.6875em;
	margin-bottom: 0.5625em;
	font-weight: normal;
}

h3, h4 {
	font-size: 1.1667em;
	line-height: 1.286em;
	margin-top: 1.929em;
	margin-bottom: 0.643em;
	/*font-variant: small-caps;*/
	text-transform: uppercase;
	font-weight: normal;
	letter-spacing: 0.1em;
}

h5, h6 {
	font-size: 1em;
	line-height: 1.5em;
	margin-top: 2.25em;
	margin-bottom: 0.75em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

h4, h6 {
	text-transform: none;
	letter-spacing: 0;
}

div.pageheader {
	border-bottom: 1px solid #ddd;
}

div.pageheader h1 {
	
}

div.pageheader p {
	font-style: italic;
	font-size: 1.2em;
	line-height: 1.286em;
	margin: 0.643em 0;
	color: #9a9998;
}

#archive dt {
	margin: 1em 0 0;
}

p.date,
span.rssSubdate {
	color: #9a9998;
	text-align: right;
	line-height: 1em;
	margin: -2.625em 0 0 -5.5em;
	width: 5em;
	font-style: italic;
}

h2 + p.date {
	margin-top: -2em;
}


dd span.rssSubdate {
	position: absolute;
	margin-top: 0;
	line-height: 1.5em;
}

dd span.rssSubdate.alt {
	position: relative;
	display: block;
	float: left;
	margin-left: 0;
	margin-right: 0.5em;
	width: 5.5em;
}

p.date.alt {
	text-align: left;
	line-height: 1.5em;
	margin: -1em 0;
	width: auto;
}

p.note,
p.archive {
	position: relative;
	background: #fff;
	padding: 0.75em 0.75em 0.571em;
	text-align: center;
	font-style: italic;
	color: #666;
	border-bottom: 0.071em solid #e6e6e6;
}

.older,
.newer {
	position: absolute;
	white-space: nowrap;
}

.older {
	left: 0.75em;
}

.newer {
	right: 0.75em;
}

em strong {
	font-style: normal;
}

.meta {
	color: #9a9998;
	font-style: italic;
}

span.caps,
label {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: .9em;
}

h1 + p:first-line,
p.date + p:first-line,
ul#slideshowNav + p:first-line {
	font-variant: small-caps;
}

.pageheader h1 + p:first-line {
	font-variant: normal;
}

h1 + p:first-line span.caps,
p.date + p:first-line  {
	font-size: 1em;
}

label span {
	text-transform: none;
	font-style: italic;
	letter-spacing: 0;
}

blockquote {
	position: relative;
	padding: 0 3em;
	margin-left: 0;
	margin-right: 0;
	font-style: italic;
	z-index: 10;
}

blockquote:before,
blockquote:after {
	position: relative;
	color: #eee;
	display: block;
	font-size: 12em;
	font-style: italic;
	z-index: -1;
	width: 0;
	height: 0;
	font-family: "sorts-mill-goudy-1","sorts-mill-goudy-2", "Adobe Caslon Pro", Georgia, Times, serif;
}

blockquote:before {
	content: "“";
	padding-top: 0.4em;
	margin-bottom: -0.4em;
	margin-left: -0.5em;
}

span.amp {
	font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",serif;
	font-style: italic;
}

code,
ol.code  {
	font-family: "anonymous-pro-1","anonymous-pro-2", Inconsolata, Courier, mono, monospace;
}
	
code {
	background-color: #e6e5e4;
	font-weight: normal;
	font-style: normal;
}

pre code {
	line-height: 1em;
}

#content img {
	display: block;
	background: #fff;
	padding: 10px;
	margin:  1em auto;
	border: 1px solid #ddd;
	-ms-interpolation-mode: bicubic;
}

#content img.button {
	background: transparent;
	padding: 0;
	border: none;
}

/* CSS for styling code examples */

ol.code {
	border: 1px solid #eee;
	color: #c3230e;
	overflow: auto;
	margin: 0;
	padding: .5em;
	background-color: #fff;
	list-style-type: none;
}

ol.code li {
	color: #999;
	background-color: #1f1e1e;
	margin: 0;
	padding: 0 0.5em;
	line-height: 1.33;
}

ol.code li code {
	background-color: transparent;
	font-size: 0.85em;
}

ol.code li.source {
	background-color: #fff;
	padding: 5px;
	text-align: right;
	font-size: .9em;
	font-family: "Adobe Caslon Pro", Garamond, Georgia, Times, serif;
	font-style: italic;
	
}

ol.code li+li {
	border-top: 1px solid #222;
}

ol.code li.tab1 { padding-left: 2em;}
ol.code li.tab2 { padding-left: 4em;}
ol.code li.tab3 { padding-left: 6em;}
ol.code li.tab4 { padding-left: 8em;}
ol.code li.tab5 { padding-left: 10em;}
ol.code li.tab6 { padding-left: 12em;}

ol.code li code {
	/*color: #f2ff6b !important;*/
	color: #f8f8f8 !important;
}

ol.code li.cmnt code {
	color: #666 !important;
}

a {
	/*color: #bb1800;*/
	color: #c3230e;
	text-decoration: none;
	padding: 2px 2px 0;
	margin: -2px -2px 0;
	border: none;
}

a:hover {
	border-bottom: 1px dashed #c3230e;
}

a:focus {
	outline: 0;
}

a img {
	border: none;
}


/* Header & Navigation
------------------------------------- */
#header {
	position: relative;
	background: #1c1c1c url(img/bg_header.png) repeat-x left bottom;
	margin: 0 -1em;
	padding: 1.5em 1em;
	border-bottom: 1px solid #111;
}

#header .wrap {
	position: relative;
	width: 44em;
	margin: 0 auto;
	max-width: 100%;
}

div#skipnav {
	display: none;
}

div#branding,
div#branding a {
	width: 225px;
	height: 63px;
}

div#branding {
	margin: 0;
	margin-left: -42px;
}

div#branding a {
	display: block;
	padding: 0;
	margin: 0;
	background: url(img/logo.png) no-repeat 0 0;
	font-variant: small-caps;
	font-weight: 100;
	font-size: 2.5em;
	font-family: MsEavesPetiteCaps, "Adobe Caslon Pro", Garamond, Georgia, Times, serif;
	color: #fff;
}

div#branding a:hover {
	background-position: 0 -100px;
	border: none;
}

div#branding a img {
	display: block;
	width: 0;
}

ul#nav_main {
	position: absolute;
	margin: 0;
	right: 0;
	bottom: 0;
	list-style-type: none;
	padding: .75em;
	width: auto;
	overflow: hidden;
	background: #131313;
}

ul#nav_main li {
	float: left;
	font-size: 1.05em;
	line-height: 1.25em;
}

ul#nav_main li a {
	display: block;
	padding: .75em;
}

ul#nav_main li a:hover {
	border: none;
}

#nav_main li#nm_journal a:hover,
#journal #nav_main li#nm_journal a,
#nav_main li#nm_folio a:hover,
#portfolio #nav_main li#nm_folio a,
#nav_main li#nm_projects a:hover,
#projects #nav_main li#nm_projects a,
#plugins #nav_main li#nm_projects a,
#nav_main li#nm_about a:hover,
#about #nav_main li#nm_about a,
#nav_main li#nm_contact a:hover,
#contact #nav_main li#nm_contact a	{
	background: #1c1c1c;
	color: #f8f8f8;
	border: none;	
}

/* Comments
------------------------------------- */
.comment {
	position: relative;
	float: left;
	width: 100%;
	border-top: 1px solid #ddd;
}

.comment .author {
	float: left;
	width: 100%;
	border-top: 1px solid #bbb;
	/*border-bottom: 2px solid #fff;*/
	background: url(img/bg_author_comment.png) repeat-x;
}

.comment img.gravatar {
	position: absolute;
	top: 0pt;
	left: -74px;
	padding: 5px !important;
}

.comment p.commentor {
	float: left;
	width: 15em;
	max-width: 30%;
	margin: 0;
	padding: 1.5em 0;
}

.comment p.commentor span.date {
	font-style: italic;
	color: #9a9998;
}

.comment div.body {
	float: left;
	width: 35em;
	max-width: 70%;
}

#comments h4,
#comments p.note {
	clear: both;
}

/* Comment and Contact Forms
------------------------------------- */
#comments form,
#contact form {
	margin: 0 0 1.5em;
	border-top: 1px solid #ddd;
}

form br {
	clear: left;
}

form fieldset{
	border: none;
	padding: 0;
}

form label {
	display: block;
	float: left;
	width: 16.667em;
	margin: 0.835em 0;
	padding: 0;
	max-width: 30%;
}

form input[type=text],
form input[type=checkbox],
form input[type=submit],
form select,
form textarea {
	margin: 0.75em 1em .75em 0;
	padding: 0;
	line-height: 1.5em;
	font-family: "sorts-mill-goudy-1","sorts-mill-goudy-2", "Adobe Caslon Pro", Garamond, Georgia, Times, serif;
	color: #424242;
}

form input[type=text],
form textarea {
	border: none;
	border-bottom: 1px dashed #848484;
	width: 15em;
}

form textarea {
	width: 35em;
	margin-right: 0;
	max-width: 70%;
}

form div.submitbar,
form fieldset.checkboxes {
	margin-left: 30%;
}

form fieldset.checkboxes label,
form fieldset.checkboxes input[type=checkbox] {
	float: left;
	line-height: 1em;
}

form fieldset.checkboxes input[type=checkbox] {
	margin-right: .5em;
}

label span {
	display: block;
}

input[type=hidden] {
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
}



/* Portfolio
------------------------------------- */
#screenshots {
	position: relative;
	overflow: hidden;
	margin: 1.5em 0;
	background: #1a1a1a;
}

.js #screenshots {
	width: 44em;
	height: 16.5em;
}

.js #screenshots div.wrapper {
	position: absolute;
}

#screenshots img {
	display: block;
	float: left;
	width: 20em;
	height: auto;
	padding: .75em 1em;
	margin: 0;
	border: none;
	background: transparent;
}

ul#slideshowNav {
	list-style: none;
	font-size: 1.333em;
	line-height: 1.125em;
	margin-top: 1.125em;
	margin-bottom: 1.125em;
	padding: 0;
	width: 100%;
	overflow: hidden;
}

ul#slideshowNav li {
	float: left;
	padding: 0 .5em .0833em;
	color: #c3230e;
	cursor: pointer;
}

ul#slideshowNav li.navigate {
	font-style: italic;
	color: #9a9998;
	padding-left: 0;
}

ul#slideshowNav li.active {
	color: #424242;
	cursor: default;
}

ul#slideshowNav li:hover {
	border-bottom: .0833em dashed #c3230e;
	padding-bottom: 0;
}

ul#slideshowNav li.active:hover,
ul#slideshowNav li.navigate:hover {
	border: none;
}

#projectList {
	
}

#portfolio_list ul,
ul#portfolio_list {
	list-style-type: none;
	padding: 0;
	width: 100%;
	overflow: hidden;
	
}

#portfolio_list ul li {
	float: left;
	margin: 0 .5em 0 0;
}

#portfolio_list img,
ul#portfolio_list img {
	width: 3.5em;
	height: 3.5em;
	padding: .5em;
	background: #1a1a1a;
	border: none;
}

#portfolio_list a {
	line-height: 1;
}

#portfolio_list a:hover {
	border: none;
}

#portfolio_list a:hover img,
ul#portfolio_list a:hover img {
	background: #ddd;
}

ul#portfolio_list li {
	border-bottom: 1px solid #ddd;
	width: 100%;
	overflow: hidden;
}

ul#portfolio_list img {
	float: left;
	margin: .75em;
	margin-left: 0;
}

/* Footer
------------------------------------- */
#footer {
	background: #1a1a1a url(img/bg_footer.jpg) no-repeat top center;
	border-top: 1px solid #1a1a1a;
	color: #fbf9f7;
	margin: 0 -1em;
	padding: 0 1em;
}

#footer p {
	text-align: right;
}

#footer hr {
	padding: 0;
	margin: 0 -1em;
	border: none;
	border-top: 1px solid #494949;
}

#footer p#copyright {
	margin-bottom: 0;
	padding: .5em 0;
	text-align: center;
	border-top: 1px solid #2a2a2a;
	color: #888;
	font-variant: small-caps;
	font-size: 0.9em;
	letter-spacing: 0.1em;
	clear: both;
	font-size: 0.875em;
}


/* Flickr
------------------------------------- */
#seeing {
	
}

#seeing ul {
	list-style-type: none;
	padding: 0;
	width: 100%;
	overflow: hidden;
}

#seeing ul li {
	float: left;
	margin: 0 0.5625em;
}

#seeing ul li img,
#listening ol li img {
	width: 4.5em;
	height: 4.5em;
	padding: .75em;
	background: #1a1a1a;
}

#seeing ul li a,
#listening ol li a {
	display: block;
	line-height: 1em;
}

#seeing ul li a:hover,
#listening ol li a:hover {
	border: none;
}

#seeing ul li a:hover img,
#listening ol li a:hover img {
	background: #333;
}

/* Tweets & Last.fm
------------------------------------- */

#listening ol,
#saying ul {
	list-style-type: none;
	width: 100%;
	overflow: hidden;
	padding: 0;
}

#saying ul li {
	width: 100%;
	padding-bottom: .75em;
	margin-bottom: .75em;
	border-bottom: 1px solid #2a2a2a;
	overflow: hidden;
}

#saying ul li a.tweet_time {
	font-style: italic;
}

#listening ol li {
	position: relative;
	float: left;
	margin: 0 .25em 0 0;
}

#listening ol li img {
	width: 6em;
	height: 6em;
	padding: .75em;
	background: #1a1a1a;
}

img.tracker {
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 0 !important;
	height: 0 !important;
	background: transparent !important;
}

#listening ol li img.tracker {
	position: absolute;
}


/* Ads
------------------------------------- */
div.ad-728 {
	clear: both;
	margin: 1em auto;
	width: 728px;
}