@charset "UTF-8";
/*
	Copyright:  © 2009–2012 Faruk Ateş
	Website:    http://farukat.es/

	The following CSS is meant to be informative and educational.
	If you choose to take certain pieces of it for use on your
	own website(s), please include a copyright notice.

	CSS properties are listed in alphabetical order because CSS
	debugger tools list their properties alphabetically. This way,
	the CSS stays more recognizable and is more easily maintained.

	Feature Detection classes (.csstransitions etc.) are courtesy of
	www.Modernizr.com — Use HTML5 and CSS3 today!

	CSS File Version:	1.2.8

*/


/* Thinnify type in Safari */
body { -webkit-text-stroke:1px transparent; }
@media only screen and (max-device-width:480px) {body{-webkit-text-stroke:0 black;}}


/* Initial - simple style reset
========================================= */
html, body, h1, h2, h3, h4, h5, h6, section, header, aside, footer, nav, article, figure, fieldset, p, ul, ol, li, dl, dt, dd, form {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}
li {
	display: list-item;
	list-style: square;
}
ol, ol li {
	list-style: decimal;
}
html { background: #a4a4a4 }
body {
	background: #a4a4a4 url(bg-body.png) 0 0 repeat-x;
	color: #111;
	text-align: left;
}
body,
input,
textarea {
	font: normal 12px/21px Helvetica Neue, Helvetica, Lucida Grande, Gill Sans, Arial, sans-serif;
}
code {
	font-size: 110%;
	line-height: 21px;
}
form label {
	cursor: pointer;
	display: block;
}
sup {
	line-height: 10px;
}
a img,
fieldset {
	border: none;
}
abbr[title], dfn[title] {
	border-bottom: 1px dotted #333;
	cursor: help;
}
dt {
	font-weight: bold;
}
dd {
	margin-left: 1em;
}
hr {
	display: none;
}
article hr {
	background: #CCC;
	border: 0;
	display: block;
	height: 1px;
	margin: 2em auto;
	width: 40%;
}

/* Body
----------------------------------------- */
body {
	min-width: 878px;
	position: relative;
	padding-top: 64px;
}

/* Content
========================================= */
#content {
	margin: 0 auto;
	position: relative;
	width: 808px;
	-webkit-box-shadow: rgba(0,0,0, .42) 2px 2px 4px;
	-moz-box-shadow: rgba(0,0,0, .42) 2px 2px 4px;
	-o-box-shadow: rgba(0,0,0, .42) 2px 2px 4px;
	box-shadow: rgba(0,0,0, .42) 2px 2px 4px;
}

/* Links
----------------------------------------- */
a {
	color: #424242;
	font-weight: bold;
	-webkit-transition: color .15s ease, border-color .15s ease;
	-moz-transition: color .15s ease, border-color .15s ease;
	-o-transition: color .15s ease, border-color .15s ease;
	transition: color .15s ease, border-color .15s ease;
}
.rgba a {
	border-bottom: 1px solid rgba(102,102,102, 1);
	text-decoration: none;
}
a:hover,
a:focus {
	border-color: rgba(102,102,102, .26);
	color: #666;
}
a:active {
	border-color: rgba(102,102,102, 0);
	color: #999;
}
article a:visited {
	color: rgb(102,102,102);
}
article a:visited::after,
.rgba article a:visited::after {
	color: rgb(102,102,102);
	content: '✓';
	padding: 0 1px 0 3px;
}
article sup a:visited::after,
.rgba article sup a:visited::after {
	content: '';
}
.rgba article a:visited {
	color: rgba(102,102,102, .82);
	border-color: rgba(102,102,102, .26);
}
article a:visited:hover {
	color: rgb(155,155,155);
}
.rgba article a:visited:hover,
.rgba article a:visited:hover:after {
	color: rgba(102,102,102, .42);
	border-color: rgba(102,102,102, .12);
}
article a:visited:active {
	color: rgb(155,155,155);
}
.rgba article a:visited:active,
.rgba article a:visited:active:after {
	color: rgba(102,102,102, .26);
	border-color: rgba(102,102,102, 0);
}
article p.image a:visited:after,
article footer a:visited:after,
article.photo a:visited:after,
article .footnotes a:visited:after,
article.external h2 a:visited:after,
article .top-permalink a:visited:after {
	content: '' !important;
	padding: 0;
}
article p.image a {
	border: none;
}

/* Header
----------------------------------------- */
header {
	height: 64px;
	position: absolute;
	top: -64px;
	width: 808px;
}
header h1 a {
	background: url(bg-h1.png) 0 0 no-repeat;
	display: block;
	height: 64px;
	position: relative;
	text-indent: -999px;
	width: 164px;
}
header h1 a:hover,
header h1 a:focus {
	outline: none;
}

header h1 a:hover::after,
header h1 a:focus::after {
	content: '← Click the logo to return home';
	display: block;
	font: 11px/42px Helvetica Neue, Helvetica, Lucida Grande, Gill Sans, Arial, sans-serif;
	height: 64px;
	margin-left: 170px;
	position: absolute;
	text-indent: 0;
	top: 16px;
	width: 250px;
}
/* Nav
----------------------------------------- */
nav ul {
	height: 64px;
	position: absolute;
	right: 0;
	top: 0;
	width: 236px;
}
.rgba nav ul {
	width: 237px;
}
nav ul li {
	display: block;
	float: left;
	list-style: none;
}
nav ul li a {
	background: none;
	border: none;
	color: #a4a4a4;
	display: block;
	float: left;
	font: 14px/62px Helvetica Neue, Helvetica, Lucida Grande, Gill Sans, Arial, sans-serif;
	height: 62px;
	margin: 1px 0 0;
	opacity: .6;
	padding: 0;
	text-align: center;
	text-decoration: none;
	text-shadow: rgba(0,0,0, .42) 1px 1px 2px;
	text-transform: lowercase;
	width: 78px;
	zoom:1;
	-webkit-transition: border-color .3s ease, color .3s ease, background-color .3s ease, opacity .3s ease;
	-moz-transition: border-color .3s ease, color .3s ease, background-color .3s ease, opacity .3s ease;
	-o-transition: border-color .3s ease, color .3s ease, background-color .3s ease, opacity .3s ease;
	transition: border-color .3s ease, color .3s ease, background-color .3s ease, opacity .3s ease;
}
.rgba nav ul li a {
	background: rgba(42,42,42, 0);
	border-bottom: none;
	border-left: 1px solid rgba(255,255,255, 0);
	border-right: 1px solid rgba(0,0,0, 0);
	width: 76px;
}
nav ul li:first-child a {
	width: 80px;
}
.rgba nav ul li:first-child a {
	width: 79px;
}
nav ul li a:hover,
nav ul li a:focus,
nav ul li a.current {
	background: #222;
	color: #a4a4a4;
	opacity: 1;
}
.rgba nav ul li a:hover,
.rgba nav ul li a:focus,
.rgba nav ul li a.current {
	background: rgba(42,42,42, 1);
	border-left: 1px solid rgba(255,255,255, .1);
	border-right: 1px solid rgba(0,0,0, .1);
}

/* Main
----------------------------------------- */
#main {
/*  background: #e0e0e0;*/
	background: #fff;
	bottom: 0;
	min-height: 135em;
	padding: 32px;
	position: relative;
	top: 0;
	z-index: 5;
	width: 508px;
}
/*.rgba #main {
    background: rgba(255, 255, 255, .66);
}
.cssgradients #main {
    background: -webkit-gradient(linear, 508 0, 0 400, from(rgba(255,255,255, .27)), to(rgba(255,255,255, 0))), rgba(255,255,255, .42) -webkit-gradient(linear, left top, right bottom, from(rgba(255,255,255, .82)), to(rgba(255,255,255, 0)));
}
*/
/* Dates
----------------------------------------- */
h3.date {
	color: #a4a4a4;
	display: block;
	font: 18px/24px Baskerville, Palatino, Georgia, serif;
	margin: 36px 0 18px;
}
#main h3.date:first-child {
	margin-top: 0;
}

/* Article
----------------------------------------- */
article,
#main section {
	margin-bottom: 48px;
	position: relative;
}
h2.area,
article h2,
#archive-box h2 {
	font: 26px/32px Baskerville, Palatino, Georgia, serif;
}
h2.area,
h3.date {
	clear: both;
}
article p,
#main section p {
  font-size: 1.1em;
  line-height: 1.5;
	margin: 9px 0 10px;
}
article blockquote {
	border-left: 2px solid #a4a4a4;
	margin-left: 15px;
	padding-left: 15px;
}
article footer a.permalink {
	border: none;
	color: #a4a4a4;
	font-size: 15px;
	margin-right: -6px;
	padding: 6px;
}
article ol.code,
article pre code {
	background: rgba(0,0,0, .05);
	border: 1px solid #a4a4a4;
	display: block;
	margin: 18px 0;
	padding: 0 0 0 42px;
	overflow: auto;
}
article ol.code li {
	font-family: Courier, Courier New, fixed;
	font-size: 12px;
	line-height: 18px;
	list-style-type: decimal;
	margin: 0;
	padding: 2px;
	white-space: pre;
}
article pre code {
	padding: 4px;
}

/* Article.post
----------------------------------------- */
article.post .top-permalink a {
	border: none;
	color: #999;
	display: block;
	font-size: 64px;
	font-weight: normal;
	line-height: 64px;
	margin-left: -66px;
	position: absolute;
	text-decoration: none;
	top: -4px;
}
article.post .top-permalink a:focus,
article.post .top-permalink a:hover {
	color: #b7b7b7;
}
article.post .top-permalink a:active {
	color: #e8e8e8;
}
article.post h3,
article.post h4 {
	margin: 9px 0;
}
article.post img {
	display: block;
	margin: 9px auto 18px;
	text-align: center;
}
/* .thumbs = FancyZoom thumbs + large versions */
/* .flickr = Flickr photos embedded, not as Photo Posts */
article.post .thumbs a,
article.post .flickr a {
	border: none;
}
article.post .thumbs img {
	border: 1px solid #ccc;
	display: inline;
	text-align: left;
	padding: 1px;
}
article.post .flickr img {
	border: 1px solid #a4a4a4;
	padding: 1px;
}
article.post .thumbs a:focus img,
article.post .thumbs a:hover img {
	border-color: #a4a4a4;
}
article.post .flickr a:focus img,
article.post .flickr a:hover img {
	border-color: #141414;
}


table {
	border-collapse: collapse;
	border: 1px inset rgba(0,0,0, .12);
	width: 100%;
}
table caption {
	background: rgba(0,0,0, .12);
	font-size: 11px;
	font-style: oblique;
	line-height: 14px;
	padding: 8px;
	text-align: left;
}
table caption p {
	margin: 0;
}
table th {
	background: #666;
	color: #eee;
	text-shadow: rgba(0,0,0, .27) 1px 1px 1px;
}
table th,
table td {
	padding: 2px 3px;
	text-align: center;
}
table thead th {
	border-bottom: 2px solid #454545;
}
table tbody th {
	border-top: 1px solid #333;
	border-color: rgba(0,0,0, .3);
}
table tbody td {
	border-top: 1px solid #999;
	border-top-color: rgba(0,0,0, .1);
}
table tbody tr:first-child th,
table tbody tr:first-child td {
	border: none;
}
table tr td:nth-child(odd) {
	background: rgba(0,0,0, .1);
}

.opacity article.post .top-permalink a {
	color: #fff;
	opacity: .15;
	-webkit-transition: opacity .25s ease;
	-moz-transition: opacity .25s ease;
	-o-transition: opacity .25s ease;
	transition: opacity .25s ease;
}
.opacity article.post .top-permalink a:focus,
.opacity article.post .top-permalink a:hover {
	opacity: .42;
}
.opacity article.post .top-permalink a:active {
	opacity: .82;
}
.csscolumns article.post .columnize {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	overflow: visible;
}
.csscolumns article.post .columnize li {
	display: block;
	list-style: none;
}
.csscolumns article.post .columnize li:before {
	content: '• ';
	padding: 0 4px 0 0;
}
/* Footnotes only exist for journal posts */
ol.footnotes {
	border-top: 1px solid #a4a4a4;
	color: #666;
	font-size: 10px;
	margin-top: 16px;
	padding-top: 8px;
	width: 82%;
}
ol.footnotes li {
	list-style: decimal;
	margin-bottom: 16px;
}
ol.footnotes a {
	text-decoration: none;
}
.tweet-list li {
	margin: 1em 0;
}

/* Article.photo
----------------------------------------- */
article.photo figure a {
	border: none;
}
article.photo img {
	border: 4px solid #262626;
}
article.photo h2 {
	background: #262626;
	color: #eee;
	font: 18px/32px Helvetica Neue, Helvetica, Lucida Grande, Gill Sans, Arial, sans-serif;
	font-variant: small-caps;
	text-align: center;
	width: 6em;
}
article.photo h2 a:link,
article.photo h2 a:visited {
	border: none;
	color: #eee;
	font-weight: normal;
}
article.photo h2 a:focus,
article.photo h2 a:hover,
article.photo h2 a:visited:focus,
article.photo h2 a:visited:hover {
	color: #fff;
	text-decoration: underline;
}
.csstransforms article.photo h2 {
	height: 68px;
	left: -64px;
	margin: 0;
	position: absolute;
	top: 6em;
	-webkit-transform-origin: 0 0;
	-webkit-transform: rotate(-90deg);
	-moz-transform-origin: 0 0;
	-moz-transform: rotate(-90deg);
	-o-transform-origin: 0 0;
	-o-transform: rotate(-90deg);
	transform-origin: 0 0;
	transform: rotate(-90deg);
}
article.photo h3 {
	position: absolute;
	visibility: hidden;
}
.opacity article.photo h3 {
	color: #eee;
	font-size: 36px;
	font-weight: bold;
	line-height: 48px;
	left: 16px;
	opacity: 0;
	padding-bottom: 16px;
	right: 16px;
	text-shadow: rgba(0,0,0, .42) 1px 1px 1px, rgba(0,0,0, .82) 0 0 4px;
	top: 8px;
	visibility: visible;
	-webkit-transition: opacity .3s ease-in;
	-moz-transition: opacity .3s ease-in;
	-o-transition: opacity .3s ease-in;
	transition: opacity .3s ease-in;
}
.opacity article.photo h3:hover {
	opacity: .66;
}
.no-csstransforms article.photo h3 {
	top: 40px;
}

/* Article.external
----------------------------------------- */
article.external h2 {
	line-height: 24px;
}
article.external h2 a {
	font-size: 18px;
	font-weight: normal;
}
article.external h2,
article.external footer {
	display: inline;
}

article footer a.permalink:hover,
article footer a.permalink:focus {
	color: #666;
}
article footer a.permalink:active {
	color: #111;
}
/*
	NOTE: The following rule contains an article.tweet selector!

	The reason for this is because the styling is the exact same.
*/
.csstransforms article.tweet h2,
.csstransforms article.external h2:before {
	color: #cacaca;
	display: block;
	font: 14px/18px Helvetica Neue, Helvetica, Lucida Grande, Gill Sans, Arial, sans-serif;
	font-variant: small-caps;
	height: 64px;
	left: -54px;
	margin: 0;
	position: absolute;
	text-align: right;
	top: 7.3em;
	width: 6.66em;
	-webkit-transform-origin: 0 0;
	-webkit-transform: rotate(-90deg);
	-moz-transform-origin: 0 0;
	-moz-transform: rotate(-90deg);
	-o-transform-origin: 0 0;
	-o-transform: rotate(-90deg);
	transform-origin: 0 0;
	transform: rotate(-90deg);
}
.csstransforms article.external h2:before {
	content: 'Link';
}


/* Article.tweet
----------------------------------------- */
.csstransforms article.tweet h2 {
	top: 7.1em;
}
.no-csstransforms article.tweet h2 {
	color: #a4a4a4;
	font: 14px/18px Helvetica Neue, Helvetica, Lucida Grande, Gill Sans, Arial, sans-serif;
}
article.tweet blockquote {
	border: none;
	font: 26px/32px Baskerville, Palatino, Georgia, serif;
	margin: 0;
	padding: 0;
	position: relative;
}
article.tweet blockquote:after,
article.tweet blockquote:before {
	color: #a4a4a4;
	content: '❝';
	display: block;
	font: 128px/64px Helvetica Neue;
	left: -18px;
	opacity: .26;
	position: absolute;
	z-index: 1;
}
article.tweet blockquote:after {
	bottom: -36px;
	content: '❞';
	left: auto;
	right: 0;
	text-align: right;
}
article.tweet blockquote p {
	position: relative;
	z-index: 5;
}
article.tweet footer {
	font-size: 12px;
}
article.tweet footer p {
	display: inline;
}
article.tweet footer p a {
	font-size: 15px;
}

/* Article footer
----------------------------------------- */
article footer {
	font-size: 11px;
	line-height: 23px;
	margin: 32px -8px 32px 0;
	opacity: .82;
	text-align: right;
}
article footer em {
	display: none;
}
article footer a.canonical,
article footer a[rel="external"] {
	background: #ededed;
	border: 1px solid #c7c7c7;
	color: #666;
	display: inline-block;
	height: 23px;
	padding: 0 8px;
	position: relative;
	text-decoration: none;
	z-index: 5;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-webkit-transition: color .25s ease, background-color .25s ease;
	-moz-transition: color .25s ease, background-color .25s ease;
	-o-transition: color .25s ease, background-color .25s ease;
	transition: color .25s ease, background-color .25s ease;
}
article footer a[rel="external"] {
	background: #787878;
	border-color: #666;
	color: #ededed;
	left: -20px;
	margin-right: -20px;
	padding: 0 8px 0 26px;
	text-shadow: #000 1px 1px 1px;
	z-index: 2;
}
article footer a.permalink {
	text-decoration: none;
}
.rgba article footer a[rel="external"] {
	text-shadow: rgba(0,0,0, .42) 1px 1px 1px;
}
article footer a.canonical:hover,
article footer a.canonical:focus {
	background: #ddd;
	color: #424242;
}
article footer a.canonical:active {
	background: #bbb;
	color: #111;
}
article footer a[rel="external"]:hover,
article footer a[rel="external"]:focus {
	background: #666;
}
article footer a[rel="external"]:active {
	background: #333;
}

/* Archive-link
----------------------------------------- */
#archive-link {
	text-align: center;
}
#archive-link a {
	border: none;
	display: block;
	margin: 64px auto 18px;
	padding: 8px;
	width: 50%;
}
#home #archive-link a:before {
	content: '← ';
}
#archive #archive-link a:before {
	content: '↑ ';
}



/* Secondary
========================================= */
#secondary {
	background: #cacaca;
	bottom: 0;
	color: #262626;
	padding: 213px 16px 16px 17px;
	position: absolute;
	right: 0;
	top: 0;
	width: 204px;
	z-index: 1;
}
.rgba #secondary {
	background: rgba(255,255,255, .42);
}
.cssgradients #secondary {
	background: rgba(255,255,255, .42) -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0, .26)), to(rgba(0,0,0, 0)));
}
#secondary figure {
  background: url(faruk-202x165-bw.jpg) top left no-repeat;
/* background: url(steve_hero.jpg) top left no-repeat;*/
	border: 1px solid #323232;
	height: 165px;
	left: 17px;
	position: absolute;
	top: 16px;
	width: 202px;
	z-index: 5;
}
#secondary figure h2 {
	position: absolute;
	left: -9999px;
}
#secondary figure img {
	visibility: hidden;
}
/*
	Modernizr makes it easy to enhance the image of myself with a CSS
	Transition, giving it color but only in those browsers that	can make
	an elegant transition from near-grayscale to (mostly) full color.
*/
.csstransitions #secondary figure img {
	opacity: .12;
	visibility: visible;
}
.csstransitions #secondary figure img {
	-webkit-transition: opacity .25s ease-out;
	-moz-transition: opacity .25s ease-out;
	-o-transition: opacity .25s ease-out;
	transition: opacity .25s ease-out;
}
.csstransitions #secondary figure img:hover {
	opacity: .82;
}

#secondary p {
	margin: 0 0 18px;
	padding-right: 18px;
}
#secondary p a {
	color: #262626;
	white-space: nowrap;
}
#secondary p a:hover,
#secondary p a:focus {
	color: #666;
}
#secondary p a:active {
	color: #999;
}
#secondary h3 {
	background: #d8d8d8;
	color: #666;
	font: 22px/36px Baskerville, Palatino, Georgia, serif;
	height: 36px;
	left: -17px;
	margin: 18px 0 8px;
	position: relative;
	text-indent: 17px;
	width: 237px;
}
.cssgradients #secondary h3 {
	background: transparent -webkit-gradient(linear, left top, right top, from(rgba(255,255,255, .26)), to(rgba(255,255,255, 0)));
}
#secondary h3 span {
	left: -9999px;
	position: absolute;
}

#secondary form label {
	margin: 18px 0 8px;
}
.search,
.submit {
	background-color: #858585;
	border: none;
	color: #fff;
	font-size: 11px;
	height: 24px;
	line-height: 24px;
	margin: 0;
	padding: 0;
	position: relative;
	text-shadow: #000 1px 1px 1px;
	z-index: 10;
	-webkit-transition: background-color .25s ease, color .2s ease;
	-moz-transition: background-color .25s ease, color .2s ease;
	-o-transition: background-color .25s ease, color .2s ease;
	transition: background-color .25s ease, color .2s ease;
}
.search {
	background: #858585;
	border-right: 1px solid #a4a4a4;
	float: left;
	height: 20px;
	line-height: 18px;
	padding: 4px 8px 0 8px;
	width: 122px;

	-webkit-border-bottom-left-radius: 11px;
	-webkit-border-top-left-radius: 11px;
	-moz-border-radius-bottomleft: 11px;
	-moz-border-radius-topleft: 11px;
	border-bottom-left-radius: 11px;
	border-top-left-radius: 11px;
}
.submit {
	border-left: 1px solid #505050;
	background-color: #5e5e5e;
	font-weight: bold;
	width: 60px;
	z-index: 5;

	-webkit-border-bottom-right-radius: 11px;
	-webkit-border-top-right-radius: 11px;
	-moz-border-radius-bottomright: 11px;
	-moz-border-radius-topright: 11px;
	border-bottom-right-radius: 11px;
	border-top-right-radius: 11px;
}
.rgba .search {
	background-color: rgba(133,133,133, .82);
	border-right: 1px solid rgba(216,216,216, .26);
	color: rgba(255,255,255, .66);
	text-shadow: rgba(0,0,0, .42) 1px 1px 1px;
}
.rgba .submit {
	border-left: 1px solid rgba(38,38,38, .26);
	text-shadow: rgba(0,0,0, .82) 1px 1px 1px;
}
.cssgradients .search {
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0, .42)), to(rgba(0,0,0, 0)), color-stop(.08, rgba(0,0,0, .42)), color-stop(.12, rgba(0,0,0, .26)));
}
.search:hover {
	background-color: #777;
}
.search:focus {
	background-color: #666;
}
.rgba .search:focus {
	background-color: rgba(38,38,38, .666);
	color: rgba(255,255,255, .82);
}
.submit:hover  { background-color: #424242; }
.submit:focus  { background-color: #222;    }
.submit:active { background-color: #000;    }

.search:focus,
.submit:focus {
	outline: none;
}

#feed a {
	background: url(icons.png) -2px -873px no-repeat;
	border: none;
	display: block;
	font-weight: bold;
	height: 24px;
	line-height: 24px;
	margin: 15px 0 0;
	padding: 2px 0 2px 47px;
	text-decoration: none;
}

/* Lanyrd-related styles */
#secondary .lanyrd-target-splat {
   padding-bottom: 1.2em;
}
#archive #secondary div.lanyrd-target-splat h3,
#secondary div.lanyrd-target-splat h3 {
    background: none;
    color: #666;
    font: bold 1.2em/1.5 Helvetica Neue, Helvetica, Lucida Grande, Gill Sans, Arial, sans-serif;
    height: auto;
    left: auto;
    text-indent: 0;
    width: auto;
}
#secondary .lanyrd-listing .vevent {
    list-style: none;
}
#secondary .lanyrd-listing abbr,
#secondary .lanyrd-listing .vevent p a:link,
#secondary .lanyrd-listing .vevent p a:visited {
    border: none;
    color: #666;
}
#secondary .lanyrd-listing img {
    vertical-align: middle;
}
#secondary .lanyrd-listing p {
    margin: 0;
}
#secondary .lanyrd-listing .vevent p a:focus,
#secondary .lanyrd-listing .vevent p a:hover {
    color: #424242;
    text-decoration: underline;
}



/* Microformats bits
----------------------------------------- */
.vcard span.title {
	text-transform: lowercase;
}


/* Secondary.short
----------------------------------------- */
#secondary.short {
	padding-top: 0;
}
#secondary.short h3 {
	margin-top: 0;
}
#secondary.short form label {
	margin: 13px 0 8px;
}


/* Search results
----------------------------------------- */
#search-results {
}
#search-results ul {
	margin-top: 42px;
}
#search-results ul li {
	margin-bottom: 32px;
}
#search-results ul li em {
	font-size: 11px;
}
mark {
	background: #eeeea7;
	border: 1px solid #caca6f;
	padding: 2px;
}


/* Contact
----------------------------------------- */
#contact-form li {
	display: block;
	margin: 8px 0;
	padding: 0;
}
#contact-form input,
#contact-form textarea {
	background: #ddd;
	border: 1px solid #a4a4a4;
	color: #666;
	margin: 0;
	padding: 2px;

	-webkit-box-shadow: rgba(0,0,0, .12) 2px 2px 4px;
	-moz-box-shadow: rgba(0,0,0, .12) 2px 2px 4px;
	-o-box-shadow: rgba(0,0,0, .12) 2px 2px 4px;
	box-shadow: rgba(0,0,0, .12) 2px 2px 4px;
	-webkit-transition: background-color .42s ease, color .42s ease;
	-moz-transition: background-color .42s ease, color .42s ease;
	-o-transition: background-color .42s ease, color .42s ease;
	transition: background-color .42s ease, color .42s ease;
}
.cssgradients #contact-form input,
.cssgradients #contact-form textarea {
	background: #ddd -webkit-gradient(linear, 0 0, 0 20, from(rgba(99,99,99, .42)), to(rgba(221,221,221, .12)), color-stop(.1, rgba(99,99,99, .26)));
}
/*
	The correct order for the A, INPUT and TEXTAREA elements is:

	:link
	:visited
	:focus
	:hover
	:active

	However, I'm purposefully swapping :hover and :focus for the input and
	textarea fields, because I don't want the hover style change to occur on
	whatever field the user is already focused on. It's more elegant this way.
*/
#contact-form input:hover,
#contact-form textarea:hover {
	background-color: #eee;
	color: #424242;
}
#contact-form input:focus,
#contact-form textarea:focus {
	background-color: #fff;
	color: #333;
}
#contact-form .errors li {
	color: #300;
	font-weight: bold;
	margin: 0;
	padding: 2px 0;
}
.rgba #contact-form .errors li {
	background: rgba(240,240, 150, .26);
	margin: 2px 0;
	padding-left: 4px;
}
.cssgradients #contact-form .errors li {
	background: rgba(240,240, 150, .26) -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0, 0)), to(rgba(0,0,0, .06)));
}
#contact-form .errors li label:before {
	color: #cf0707;
	content: '⚠';
	padding: 0 4px 0 0;
}
#contact-form input {
	height: 18px;
	width: 182px;
}
#contact-form .fields label {
	color: #666;
	clear: left;
	float: left;
	line-height: 24px;
	width: 100px;

	-webkit-transition: color .25s ease;
	-moz-transition: color .25s ease;
	-o-transition: color .25s ease;
	transition: color .25s ease;
}
#contact-form .fields label:hover {
	color: #111;
}
#contact-form #id_subject {
	width: 400px;
}
#contact-form textarea {
	height: 9em;
	max-height: 18em;
	max-width: 400px;
	min-height: 9em;
	min-width: 300px;
	width: 400px;
}
#contact-form .send {
	background: #858585;
	border: 1px solid #ccc;
	color: #eee;
	cursor: pointer;
	font-size: 14px;
	height: 24px;
	margin: 12px 100px;
	text-align: center;
	text-shadow: #333 1px 1px 1px;
	width: 100px;

	-webkit-box-shadow: rgba(0,0,0, .42) 2px 2px 3px;
	-moz-box-shadow: rgba(0,0,0, .42) 2px 2px 3px;
	-o-box-shadow: rgba(0,0,0, .42) 2px 2px 3px;
	box-shadow: rgba(0,0,0, .42) 2px 2px 3px;
}
.rgba #contact-form .send {
	text-shadow: rgba(0,0,0, .42) 1px 1px 1px;
}
.cssgradients #contact-form .send {
	background: #eee -webkit-gradient(linear, left top, left bottom, from(rgba(164,164,164, .666)), to(rgba(42,42,42, .42)), color-stop(.2, rgba(164,164,164, .82)));
	border: none;

	-webkit-transition: background-color .3s ease;
	-moz-transition: background-color .3s ease;
	-o-transition: background-color .3s ease;
	transition: background-color .3s ease;
}
.cssgradients #contact-form .send:focus,
.cssgradients #contact-form .send:hover {
	background-color: #666;
	color: #eee;
}


/* About
----------------------------------------- */
#about article {
	font-size: 13px;
	line-height: 18px;
}
#about article.photo figure {
	font-size: 11px;
	text-align: right;
}
#about article.photo figure a {
	opacity: .82;
}
#about article h3 {
	margin: 24px 0 8px;
}
.cssgradients #about #secondary h3,
.cssgradients #archive #secondary h3 {
	background: transparent -webkit-gradient(linear, left top, right top, from(rgba(255,255,255, .42)), to(rgba(255,255,255, 0)));
}


/* Archive
----------------------------------------- */
#archive .year ol li {
	display: block;
	list-style: none;
}
#archive .year li a,
#archive .year li del {
	font-size: 14px;
	font-weight: normal;
	line-height: 24px;
	text-decoration: none;
}
#archive .year li a {
	border: none;
	color: #666;
	display: block;
	font-weight: bold;
	text-shadow: rgba(255,255,255, .42) 1px 1px 1px;
	width: 70%;
}
#archive .year li del {
	color: #a4a4a4;
}
#archive .year li a b {
	color: rgba(100,100,100, .42);
	padding: 2px 8px;
	text-align: right;
	text-shadow: none;
	width: 14px;
	-webkit-transition: color .2s ease;
	-moz-transition: color .2s ease;
	-o-transition: color .2s ease;
	transition: color .2s ease;
}
#archive .year li a:hover b,
#archive .year li a:focus b {
	color: rgba(0,0,0, .82);
}
#archive .year li a:hover,
#archive .year li a:focus {
	color: #333;
}
#archive .year li .year {
	position: relative;
}
#archive .year ol {
	display: block;
	font-variant: small-caps;
	margin: 16px 0;
	width: 500px;
}
.csscolumns #archive .year ol {
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
}
.no-csscolumns #archive .year ol {
	float: left;
	padding-bottom: 18px;
	width: 500px;
}
.no-csscolumns #archive .year ol li {
	float: left;
	width: 160px;
}
#archive #secondary h4 a {
	border: none;
	color: #222;
	display: block;
	font: 64px/82px Impact, Helvetica Neue, Helvetica, Arial Black, Arial, sans-serif;
	margin: 8px 0;
	opacity: .26;
	text-decoration: none;
	-webkit-transition: opacity .25s ease;
	-moz-transition: opacity .25s ease;
	-o-transition: opacity .25s ease;
	transition: opacity .25s ease;
}
#archive #secondary h4 a.current {
	opacity: .42;
}
#archive #secondary h4 a:after {
	content: attr(title);
	display: inline;
	float: right;
	font: 12px/16px Helvetica Neue, Helvetica, Lucida Grande, Gill Sans, Arial, sans-serif;
	margin: 24px 16px 0 0;
	opacity: .666;
	text-align: center;
	width: 42px;
}
#archive #secondary h4 a:hover,
#archive #secondary h4 a:focus,
#archive #secondary h4 a.current:hover,
#archive #secondary h4 a.current:focus {
	opacity: .82;
}
#archive-populate {
	clear: both;
	padding: 16px 0;
}


/* Web 2.0
-----------------------------------------
  Modernizr allows me to make the Web 2.0 "tabs" look much more amazing
  in the more modern browsers. Some of it is done simply by adding
  properties that don't do anything in browsers that don't understand
  them, but certain rules conflict (like the background colors), yet
  thanks to Modernizr this is not a problem at all.
*/
#web20 abbr {
	border: none;
}
#web20 li {
	display: block;
	list-style: none;
}
#web20 li a {
	background: transparent url(icons.png) 100% 0 no-repeat;
	border: none;
	color: #848484;
	display: block;
	font-size: 11px;
	font-weight: normal;
	height: 63px;
	left: -19px;
	line-height: 18px;
	margin: 3px 0;
	padding-left: 19px;
	position: relative;
	text-decoration: none;
	text-shadow: rgba(0,0,0, 0) 1px 1px 2px;
	width: 220px;

	-webkit-box-shadow: rgba(0,0,0, 0) 2px 2px 2px;
	-moz-box-shadow: rgba(0,0,0, 0) 2px 2px 2px;
	-o-box-shadow: rgba(0,0,0, 0) 2px 2px 2px;
	box-shadow: rgba(0,0,0, 0) 2px 2px 2px;

	-webkit-border-top-right-radius: 31px;
	-webkit-border-bottom-right-radius: 31px;
	-moz-border-radius-topright: 31px;
	-moz-border-radius-bottomright: 31px;
	border-top-right-radius: 31px;
	border-bottom-right-radius: 31px;

	-webkit-transition: background-color .25s ease, color .5s ease, width .2s ease-out, -webkit-box-shadow .25s ease, text-shadow .2s ease, opacity .2s ease;
	-moz-transition: background-color .25s ease, color .5s ease, width .2s ease-out, -webkit-box-shadow .25s ease, text-shadow .2s ease, opacity .2s ease;
	-o-transition: background-color .25s ease, color .5s ease, width .2s ease-out, -webkit-box-shadow .25s ease, text-shadow .2s ease, opacity .2s ease;
	transition: background-color .25s ease, color .5s ease, width .2s ease-out, -webkit-box-shadow .25s ease, text-shadow .2s ease, opacity .2s ease;
}
.opacity #web20 li a {
	color: #000;
	opacity: .42;
}
#web20 li a h4 {
	font-size: 12px;
	padding-top: 14px;
}
#web20 li a:hover,
#web20 li a:focus {
	color: #fff;
	opacity: 1;
}
.rgba #web20 li a:hover,
.rgba #web20 li a:focus {
	text-shadow: rgba(0,0,0, .82) 1px 1px 1px;
	width: 251px;

	-webkit-box-shadow: rgba(0,0,0, .42) 2px 2px 2px;
	-moz-box-shadow: rgba(0,0,0, .42) 2px 2px 2px;
	-o-box-shadow: rgba(0,0,0, .42) 2px 2px 2px;
	box-shadow: rgba(0,0,0, .42) 2px 2px 2px;

	-webkit-transition: background-color .25s ease, color .25s ease, width .2s ease-out, -webkit-box-shadow .25s ease, text-shadow .2s ease, opacity .2s ease;
	-moz-transition: background-color .25s ease, color .25s ease, width .2s ease-out, -webkit-box-shadow .25s ease, text-shadow .2s ease, opacity .2s ease;
	-o-transition: background-color .25s ease, color .25s ease, width .2s ease-out, -webkit-box-shadow .25s ease, text-shadow .2s ease, opacity .2s ease;
	transition: background-color .25s ease, color .25s ease, width .2s ease-out, -webkit-box-shadow .25s ease, text-shadow .2s ease, opacity .2s ease;
}

#web20 #flickr     a { background-position: 100%      0; }
#web20 #twitter    a { background-position: 100%  -66px; }
#web20 #vimeo      a { background-position: 100% -132px; }
#web20 #linkedin   a { background-position: 100% -198px; }
#web20 #facebook   a { background-position: 100% -264px; }
#web20 #tumblr     a { background-position: 100% -330px; }
#web20 #brightkite a { background-position: 100% -396px; }
#web20 #newsvine   a { background-position: 100% -462px; }
#web20 #dopplr     a { background-position: 100% -528px; }
#web20 #lastfm     a { background-position: 100% -594px; }

#flickr     a:hover, #flickr     a:focus { background-color: #f42892; }
#twitter    a:hover, #twitter    a:focus { background-color: #28adff; }
#vimeo      a:hover, #vimeo      a:focus { background-color: #1a90c6; }
#linkedin   a:hover, #linkedin   a:focus { background-color: #006699; }
#facebook   a:hover, #facebook   a:focus { background-color: #36528c; }
#tumblr     a:hover, #tumblr     a:focus { background-color: #3c5875; }
#brightkite a:hover, #brightkite a:focus { background-color: #213442; }
#newsvine   a:hover, #newsvine   a:focus { background-color: #006127; }
#dopplr     a:hover, #dopplr     a:focus { background-color: #89c256; }
#lastfm     a:hover, #lastfm     a:focus { background-color: #da3830; }

.rgba #flickr     a { background-color: rgba(244,  40, 146, 0); }
.rgba #twitter    a { background-color: rgba( 40, 175, 255, 0); }
.rgba #vimeo      a { background-color: rgba( 26, 144, 198, 0); }
.rgba #linkedin   a { background-color: rgba(  0, 102, 153, 0); }
.rgba #facebook   a { background-color: rgba( 54,  82, 140, 0); }
.rgba #tumblr     a { background-color: rgba( 60,  88, 117, 0); }
.rgba #brightkite a { background-color: rgba( 33,  52,  66, 0); }
.rgba #newsvine   a { background-color: rgba(  0,  97,  39, 0); }
.rgba #dopplr     a { background-color: rgba(137, 194,  86, 0); }
.rgba #lastfm     a { background-color: rgba(218,  56,  48, 0); }

.rgba #flickr     a:hover, .rgba #flickr     a:focus { background-color: rgba(244,  40, 146, .82); }
.rgba #twitter    a:hover, .rgba #twitter    a:focus { background-color: rgba( 40, 175, 255, .82); }
.rgba #vimeo      a:hover, .rgba #vimeo      a:focus { background-color: rgba( 26, 144, 198, .82); }
.rgba #linkedin   a:hover, .rgba #linkedin   a:focus { background-color: rgba(  0, 102, 153, .82); }
.rgba #facebook   a:hover, .rgba #facebook   a:focus { background-color: rgba( 54,  82, 140, .82); }
.rgba #tumblr     a:hover, .rgba #tumblr     a:focus { background-color: rgba( 60,  88, 117, .82); }
.rgba #brightkite a:hover, .rgba #brightkite a:focus { background-color: rgba( 33,  52,  66, .82); }
.rgba #newsvine   a:hover, .rgba #newsvine   a:focus { background-color: rgba(  0,  97,  39, .82); }
.rgba #dopplr     a:hover, .rgba #dopplr     a:focus { background-color: rgba(137, 194,  86, .82); }
.rgba #lastfm     a:hover, .rgba #lastfm     a:focus { background-color: rgba(218,  56,  48, .82); }



/* Page-footer
----------------------------------------- */
#page-footer {
	background: #000;
	height: 48px;
	padding: 32px 0;
}
.cssgradients #page-footer {
	background: #000 -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255, .12)), to(rgba(255,255,255, 0)));
}
#page-footer footer {
	height: 48px;
	margin: 0 auto;
	padding: 0 16px 0 32px;
	position: relative;
	width: 760px;
}
#page-footer p {
	color: #3f3f3f;
	font: 18px/18px Baskerville, Palatino, Georgia, serif;
	margin: 0 auto;
}
.rgba #page-footer p {
	color: rgba(255,255,255, .26);
}
#page-footer p:nth-child(even) {
	bottom: 0;
	position: absolute;
}
#page-footer p.copyright {
	bottom: 0;
	color: #a4a4a4;
	font: 11px/18px Helvetica Neue, Helvetica, Lucida Grande, Gill Sans, Arial, sans-serif;
	position: absolute;
	right: 16px;
	text-shadow: rgba(0,0,0, .82) 1px 1px 1px;
}
#page-footer p.copyright a:link,
#page-footer p.copyright a:visited {
	color: #a4a4a4;
}


#content article p a {
	color: #6493c9;
	border-color: #6493c9;
}
#content article p a:visited {
	color: #7b96b0;
	border-color: #7b96b0;
}
#content .top-permalink a:link,
#content .top-permalink a:visited {
	color: #222;
}
#content article p a:focus,
#content article p a:hover {
	color: #666;
	border-color: #666;
}


/* Current ads: influAds
----------------------------------------- */
#influads_block .influads_link_img {
	display: block;
	padding-top: 28px;
	text-align: center;
}
#influads_block {
	min-height: 140px;
	position: relative;
}
#influads_block a {
	border: none !important;
	font: 12px/14px Helvetica Neue, Helvetica, Lucida Grande, Gill Sans, Arial, sans-serif;
	text-decoration: none !important;
}
#influads_block .influads_powered_link {
	color: #424242 !important;
}
#influads_block,
#influads_block .influads_text,
#influads_block .influads_text_a,
#influads_block .influads_powered_div {
	text-align: left !important;
}
#influads_block .influads_powered_div {
	padding: 0;
	position: absolute;
	top: 0;
}

/* Not Found!
----------------------------------------- */
body#notfound #main {
	border: 1px solid red;
}