/* reset */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,figure,img,ins,q,small,strong,sub,sup,tt,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}:focus{outline:0;}table{border-collapse:separate;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}.clearfix:after,.container:after{content:"\0020";display:block;clear:both;height:0;visibility: hidden;}.clearfix,.container{display:inline-block;}* html .clearfix,* html .container{height:1%;}.clearfix,.container{display:block;}

/* Basic styles */

body { color: #333; font: 62.5%/1em "Helvetica Neue", sans-serif; margin: 2em 0; }

a, b, i, em, figure, strong, code, samp, kbd { line-height: 1em; }

a, input[type="submit"], input.submit { color: #369; cursor: pointer; }
a:hover { color: #930; border-color: #930; }
a:active { color: #000; border-color: #000; }

blockquote { padding: 2em 3em; background: #F9FBFD; margin-bottom: 2em; }
blockquote .quote:before { content: "\201C"; font-size: 2em; line-height: 0.7em; vertical-align: bottom; margin-left: -13px; padding-right: 3px; color: #999; }
blockquote .quote:after { content: "\201D"; font-size: 2em; line-height: 0.7em; vertical-align: bottom; padding-left: 3px; color: #999; }
#post blockquote p:last-child { margin-bottom: 0; }
blockquote cite { font-style: italic; }

br { display: block; }

strong, b { font-weight: bold; }
em, i, var, address, mark { font-style: italic; }
ins { text-decoration: underline; }

code, samp, kbd { font-family: monospace; font-size: 1.4em; }
pre { background: #FFF; border-left: 5px solid #444; padding: 10px 15px; overflow: auto; font-size: 12px; line-height: 20px; margin-bottom: 20px; }
pre code { font-size: 1em; vertical-align: middle; }

mark { background: none; color: #666; font-size: .9em; line-height: 1em; }

li ol, li ul { margin-bottom: 0; }
li ol li, li ul li { font-size: 1em; }
ol, ul, dl { margin: 0 0 2em 0; padding-left: 2em; font-size: 1em; }
dl { padding-left: 0; }
ul { list-style: disc; }
ul ul { list-style: circle; }
dl dt { font-weight: bold; }
dl dd { padding-left: 1em; }

h1, h2, h3, h4, h5, h6 { line-height: 1.0em; font-weight: bold; }
h1 { font-size: 4em; margin: 0.25em 0; }
h2 { font-size: 2.4em; line-height: 2em; }
h3 { font-size: 2em; line-height: 2.4em; }
h4 { font-size: 1.6em; line-height: 1.5; }
h5 { font-size: 1.2em; line-height: 1.6667em; margin: 0; }
h6  {font-size: 1em; line-height: 2em; text-transform: uppercase; }

hr { margin: 1em 0 0.9em 0; background: #DDD; height: 0.1em; border: 0; }

figure, p, li, dt, dd, td, address { font-size: 1.4em; line-height: 1.428em; }
li p, p code, li code { font-size: 1em; }
p, address, figure { margin-bottom: 1.428em; }

abbr, acronym, dfn, q { border-bottom: 1px dotted #BBB; cursor: help; }

label { font-size: 12px; font-weight: bold; line-height: 20px; display: block; }

sub { font-size: 0.6em; line-height: 1em; }
sup { font-size: 0.7em; vertical-align: super; line-height: 1em; }

table { background: #F9F9F9; display: table; width: 100%; margin-bottom: 1.9em; border: 1px solid #333; border-collapse: collapse; }
table thead { background: #333; display: table-header-group; color: #FFF; font-weight: bold; }
table tbody { display: table-row-group;}
table tfoot { display: table-footer-group; background: #CCC; color: #222; }
table thead tr { border: 1px solid #333; }
table th { font-weight: bold; }
table tr { display: table-row; border: 1px solid #BBB; }
table tfoot tr { border: 1px solid #999; }
table td, table th { display: table-cell; }
table tr.alt { background: #F0F0F0; }
table tr td, table tr th { padding: 10px 15px 9px 15px; font-size: 1.2em; line-height: 1.6667em; }

input[type="text"], input.text, textarea { font-size: 1em; padding: 6px; border: 1px solid #BBB; margin: 0 10px 10px 0; color: #333; background: #FFF;  font-family: "Helvetica Neue", "Lucida Sans Unicode", "Lucida Grande", sans-serif; display: block; }

input[type="text"], input.text { width: 260px; }

input[type="submit"], input.submit { background: #369; color: #FFF; font-weight: bold; height: 30px; margin: 0 0 10px 0; border: 0; padding: 0; text-align: center; }
input[type="submit"]:hover, input.submit:hover { background: #930; }
input[type="submit"]:active, input.submit:active { background: #000; }
input.checkbox label { margin: 0; padding: 0; }

.container { margin: 0 auto; }

.clear { clear: both; height: 0; line-height: 0; }

.clearfix:after, header:after, nav:after, article:after, section:after, footer:after, .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

/* Grid */

.col-1 { width: 60px; }
.col-2 { width: 140px; }
.col-3 { width: 220px; }
.col-4 { width: 300px; }
.col-5 { width: 380px; }
.col-6 { width: 460px; }
.col-7 { width: 540px; }
.col-8 { width: 620px; }
.col-9 { width: 700px; }
.col-10 { width: 780px; }
.col-11 { width: 860px; }
.col-12, .container { width: 940px; }
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { float: left; margin-right: 20px; }
.last { margin-right: 0; }

/* Extras */

.box { background: rgba(0,0,0,0.1); -webkit-box-sizing: border-box; padding: 1em; margin-bottom: 2em; }

span.amp { font: italic 110%/0.9em Baskerville,"Goudy Old Style","Palatino","Book Antiqua",serif; }

article, aside, canvas, figure, footer, header, hgroup, menu, nav, section { display: block; }

figure canvas { margin-bottom: 0.5em; }
figcaption { color: #666; font-style: italic; }

/* Default Global Styles */

body { margin: 0; font: 62.5%/1.5 sans-serif; background: #FFF; color: #333; }

a { color: #ca2f15; }

.btn, input.btn, .btn-dl { padding: 0 24px; color: #EEE; line-height: 48px; text-decoration: none; font-family: inherit; display: inline-block; background: #222; font-weight: bold; }
.btn:hover, .btn-dl:hover, input.btn:hover { background: #666; color: #FFF; }
.btn-dl { background: #ca2f15; color: #FFF; }
input.btn { height: 48px; font-size: 14px; }

.btn2 { color: #666; font-weight: bold; border: 1px solid; display: inline-block; padding: 4px 9px; text-decoration: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; background: -moz-linear-gradient(top, #FFF, #EEE); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #EEE),color-stop(1, #FFF)); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-color: #CCC; font-family: sans-serif; }
.btn2:hover { background: -moz-linear-gradient(top, #EEE, #DDD); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #DDD),color-stop(1, #EEE)); color: #444; border-color: #888; }
.btn2:active, .btn2.active { background: -moz-linear-gradient(top, #444, #999); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #999),color-stop(1, #444)); color: #FFF; border-color: #444; }

del, .strike { text-decoration: line-through; }

.notice { background: #FFC; border: solid #DD9; border-width: 2px 0; padding: 22px 24px; }

/* Default Bar Styles */

.bar { color: #222; line-height: 20px; height: 20px; border: solid #DDD; font-size: 12px; padding: 10px 10px 9px; }
.bar h1 { font-size: 12px; margin: 0 20px 0 0; float: left; line-height: inherit; }
.bar h1 a { color: #222; text-transform: uppercase; }
.bar a { color: #222; text-decoration: none; line-height: inherit; }
.bar h1 a:hover, .bar .links a:hover { color: #000; text-decoration: underline; }
.bar nav ul { margin: 0; list-style: none; }
.bar nav li { font-size: inherit; float: left; line-height: inherit; }
.bar .links { list-style: none; margin: 0; padding: 0; float: left; }
.bar .links li  { margin-right: 15px; }
.bar .copyright { float: right; font-size: 12px; line-height: inherit; color: #999; margin: 0; }
.bar select { margin: 0; display: none; }

.arrows { float: right; line-height: 20px; padding: 0; margin: 0; list-style: none; }
.arrows li { margin: 0 0 0 5px; float: left; }
.arrows a, .arrow-next, .arrow-prev { display: inline-block; width: 20px; height: 20px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; background: #222 url(i/arrows.png) no-repeat 0 -80px; line-height: 20px; text-indent: -40px; overflow: hidden; }
.arrows .arrow-next, .arrow-next { background-position: 0 -100px; }
.arrows a:hover { background-color: #000; }
.arrows a span { display: none; position: absolute; right: 65px; font-weight: normal; color: #666; text-align: right; }
.arrows a:hover span { display: inline; }
.arrows a.disabled, .arrow-next.disabled, .arrow-prev.disabled { opacity: 0.2; cursor: default; background-color: #222; }

/*.arrows .arrow-prev::after { content: ""; position: absolute; border: 6px solid white; border-color: transparent #FFF transparent transparent; display: block; margin-top: -16px; -webkit-transform: scaleY(0.75); }*/

#top-bar { border-width: 0 0 1px; }
#bottom-bar { border-width: 1px 0 0; }

.bar.solid { background: rgba(0,0,0,0.75); color: #FFF; line-height: 30px; height: 30px; border: solid #DDD; }
.bar.solid a { color: #DDD; }
.bar.solid h1 a:hover, .bar.solid .links a:hover { text-decoration: underline; color: #FFF; }
.bar.solid .arrow span { color: #BBB; }
.bar.solid .arrow:hover { background: #FFF; color: #222; }

#topBar.solid, #bottomBar.solid { border: 0; }

/* Default Post Styles */

article { padding: 48px 0; font-family: 'PT Serif', Georgia, serif; overflow-x: hidden; }
article h1 { font-family: inherit; margin: 0 0 24px; line-height: 48px; }
article p, article ul, article ol, article figure { font-size: 16px; line-height: 1.5em; margin-bottom: 1.5em; }
article ol li, article ul li { font-size: 1em; line-height: 1.5em; }
article li { margin-bottom: 0; }
.container { max-width: 700px; min-width: 540px; width: 75%; }
#post p, #post hgroup h2, #post hgroup p, #archive { margin: 0 0 1.5em; }
article .post-content > p:first-child, article p.first { font-size: 20px; }
#post h1, #archive article h1 { font-size: 36px; font-weight: bold; margin: 0; }
#post hgroup h2, #post group p, #post .post-footer p { font-size: 16px; color: #666; line-height: 24px; margin-bottom: 24px; font-weight: normal; font-style: italic; }
.post-footer-twitter, .g-plusone { display: inline; }
#post img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

.code { margin-bottom: 20px; word-wrap: break-word; counter-reset: item; overflow-x: auto; border-left: 5px solid #222; padding-left: 35px; background: #F9F9F9; }
.code div { white-space: pre; color: #444; font-size: 12px; border-left: 1px solid #EEE; background: #FFF; padding-left: 9px; position: relative; }
.code pre { display: inline; }
.code div:nth-child(2n+1) { background: #FCFCFC; }
.code div:first-child:before, .code div:nth-child(10n):before { color: #666; font-weight: bold; }
.code div:before { content: counter(item); counter-increment: item; text-align: right; width: 30px; display: inline-block; padding-right: 9px; color: #BBB; margin-right: 10px; font-size: 10px; line-height: 20px; -webkit-user-select: none; -moz-user-select: none; user-select: none; position: absolute; left: -40px; height: 100%; }

.show-comments { margin-bottom: 0; text-align: center; line-height: 71px; }
.show-comments a { font-weight: bold; text-decoration: none; display: inline-block; padding: 10px 20px; }
.show-comments a:hover { text-decoration: underline; }

#comments { border-top: 1px dashed #DDD; padding: 19px 0 20px 0; }
#commentlist { padding-left: 0; }
#commentlist>li, #comments .children>li { border-top: 1px dashed #DDD; padding-top: 19px; }
#commentlist, #comments .children { border-bottom: 1px solid #DDD; margin-bottom: 19px; clear: both; }
#commentlist>li:first-child { border-top: 1px solid #DDD; }
#comments .children { background-color: rgba(0,0,0,0.025); padding-left: 0; }
#comments .avatar { float: left; margin: 0 10px 10px 0; }

.comment-details { width: 28%; margin: 0 3% 20px 2%; float: left; }
.comment-details .url { text-decoration: none; }
.comment-details .author { font-weight: bold; }
.comment-reply-link, .comment-edit-link { font-size: 12px; }
.comment-reply-link { font-weight: bold; }
.comment-content { width: 65%; float: left; word-break: break-word; }
.comment-content ul, .comment-content ol { margin-bottom: 20px; }
.comment-content ul { list-style: disc; }
.comment-content ol { list-style: georgian; }

#commentlist .comment-author-admin { background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.05) 0, transparent 20px); }

#respond { margin-bottom: 40px; }
.comment-form-left, .comment-form-right { float: left; }
.comment-form-left { width: 30%; margin: 0 3% 20px 0; }
.comment-form-left input { width: 93%; }
.comment-form-right { width: 65%; }
.comment-form-right textarea { width: 100%; max-width: 100%; height: 116px; }
#submit { margin-right: 20px; margin-bottom: 0; }

.comment-subscription-form { margin: 0 0 0 33%; }
.comment-subscription-form label { display: inline-block; }

.optional { font-weight: normal; }
::-webkit-input-placeholder, :-moz-placeholder { font-weight: bold; }


/* Archive */

#notebook article h1 { margin-bottom: 24px; }
.post-list { margin: 0 0 23px; list-style: none; padding: 0; border-top: 1px solid #DDD; }
.post-list li { font-size: 18px; line-height: 47px; border-bottom: 1px dotted #DDD; margin: 0; }
.post-list li a { text-decoration: none; color: #222; }
.post-list li a:hover { color: #000; text-decoration: underline; }
.post-list li time, .post-list li span { color: #666; font-size: 14px; font-style: italic; display: block; float: right; text-align: right; }

/* About */

#about .container { max-width: 840px; width: 90%; margin-left: 5%; }
.col-left, .col-right { width: 47.62%; margin-right: 4.76%; float: left; }
.col-right { margin-right: 0; }
.col-left .profile-pic { display: none; }
#about .av-big { display: block; width: 100%; height: auto; }
.skills { padding: 0; margin: 0 0 23px; list-style: none; border-top: 1px solid #DDD; }
.skills li { margin-bottom: 0; line-height: 47px; border-bottom: 1px dotted #DDD; }
.skills .stars { float: right; letter-spacing: 5px; }
.skills .stars .gray { opacity: 0.2; }

/* Projects */
#projects .container { max-width: 780px; }
#projects article h1 {  padding-bottom: 23px; border-bottom: 1px solid #DDD; }
#projects article h2 a { text-decoration: none; color: #222; font-weight: normal; }
.project-img { width: 100%; height: auto; margin-bottom: 24px; padding: 6px; background: rgba(0,0,0,0.05); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* Work */

#work article h1 { border-bottom: 2px solid #DDD; margin-bottom: 22px; font-size: 24px; }
#work .container { width: 940px; max-width: none; }
#work .work-bar { clear: both; height: 48px; }
#work .work-bar h1 { float: left; font-size: 24px; line-height: 48px; margin: 0; }
#work .work-bar .arrows { float: right; list-style: none; margin: 14px 0 0; }
#work .arrows li { display: inline; }
#work article p img { display: block; }
#work .work-item { border-bottom: 1px solid #DDD; margin-bottom: 23px; padding-bottom: 24px; }

.right { float: right; }

/* Philosophy */

#philosophy hgroup { border-bottom: 1px solid #DDD; margin-bottom: 23px; }
#philosophy hgroup h1 { float: left; margin-right: 20px; }
#philosophy hgroup p { color: #666; font-style: italic; line-height: 48px; }
#philosophy .container { max-width: 940px; min-width: 760px; position: relative; }
#philosophy aside { width: 300px; float: right; }
#philosophy .content { width: auto; margin-right: 320px; float: none; }
#philosophy .post-content ul { border-top: 1px solid #DDD; margin-bottom: 23px; list-style: none; padding: 0; }
#philosophy .post-content ul li { border-bottom: 1px dotted #DDD; padding: 12px 0 11px; }

/* Notes */

#notes article { padding-bottom: 40px; }
#notes header { border-bottom: 1px dotted #DDD; margin-bottom: 11px; }
#notes .note { border-bottom: 1px dotted #DDD; padding: 22px 0 36px; margin-top: 24px; }
#notes .note h1 { font-size: 24px; line-height: 24px; margin: 0; }
#notes .note h1 a { color: #222; text-decoration: none; }
#notes .note h1 + p { font-size: 14px; line-height: 24px; color: #666; margin-bottom: 12px; }
#notes .note .author { margin-bottom: 0; }
#notes .note cite { color: #666; font-style: italic; }
#notes .note cite:before { content: "\2013  "; }
#notes .note blockquote { padding: 3em; border: 2px dashed #EEE; background: none; }
#notes .note blockquote p { margin-bottom: 0; }
#notes .note blockquote p + p { margin-top: 24px; }
#notes .note-content img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
#notes .notes-footer { padding-top: 20px; }

/* CSS3 animootions? */

.bar .arrows:hover:before { content: "\0020 "; display: block; width: 300px; height: 20px; background: none; z-index: 3; position: absolute; right: 55px; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.bar .arrows a { z-index: 1; }
.bar .arrows a span { display: inline; right: 55px; opacity: 0; z-index: 2; }
.bar .arrows a, .bar .arrows a span { -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; }
.bar .arrows a:hover span { opacity: 1; right: 65px; }

/* WP Stats get off my lawn */
html body img#wpstats{ width: 0px; height: 0px; overflow: hidden; margin: 0; position: absolute; }

/* Dev style testing. Feel free to add this class to the <html> tag if you want to feel cool and hip. */

.dev #about .bar { border-color: #444; padding: 16px 20px 0; }
.dev #about .bar .links .current a { display: inline-block; background: #fec; color: #930; margin: -16px -5px -5px; padding: 16px 5px 5px; font-weight: bold; text-shadow: 0 1px 0 rgba(255,255,255,0.5); }
.dev #about #bottom-bar .links .current a { margin: -5px -5px -16px; padding: 5px 5px 16px; }
.dev #about #top-bar { border-width: 4px 0 0; }
.dev #about #bottom-bar { padding: 0 20px 16px; border-width: 0 0 4px; }
.dev #about article .post-content > p:first-child, .dev #about article p.first { background: #f9f9f9; position: relative; margin: 0 0 24px 0; padding: 15px 15px 15px 0; }
.dev #about article .post-content > p:first-child, .dev #about article p.first::before { content: ""; display: block; position: absolute; background: inherit; right: 100%; top: 0; bottom: 0; width: 1000px; }

/*.wf-loading article { font-family: serif; }
.wf-active article { font-family: 'PT Serif', Georgia, serif; }*/

/* Mobile theme'n */

@media screen and (max-width: 599px) {
	body { margin: 0; }
	article { font-family: serif; }
	.container { padding: 0 15px; min-width: 0; width: auto !important; }
	#about .container { margin: 0 auto; }
	.bar .arrows { padding-left: 0; }
	.bar .arrows:hover:before { display: none; }
	.bar .arrows a span, .bar .arrows a:hover span { display: none; }
	.bar .links-admin { display: none; }
	#post h1 { font-size: 32px; }
	#post img, #post .post-img, #notes img, #notes .note-content iframe { width: 100%; height: auto; margin-bottom: 20px; float: none; }
	#post .container .col-6 { float: none; width: 100%; }
	.col-left, .col-right { width: 100%; float: none; margin: 0; }
	#comments .comment-details { float: none; width: auto; margin: 0 10px 10px; }
	#comments .comment-content { float: none; width: auto; padding: 0 10px; }
	#comments .avatar { width: 20px; height: 20px; margin: 0 10px 0 0; }
	#comments br { display: none; }
	#comments time::before { content: " - "; }
	#respond .avatar { display: none; }
	#submit { margin-right: 0; }
	#respond .comment-form-left, #respond .comment-form-right { float: none; width: 100%; }
	#respond .text, #respond textarea { width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
	#submit { width: 100%; }
	.comment-subscription-form { margin: 0; }
	.post-list li { position: relative; line-height: 24px; padding: 12px 0 11px 0; }
	.post-list li a { display: block; margin-right: 100px; font-size: 16px; line-height: inherit;  }
	.post-list li time { position: absolute; top: 12px; right: 0; font-size: 12px; }
	#about .av { width: 100%; height: auto; margin: 0 0 24px; box-shadow: none; border-radius: 0; }
	#about .col-left .profile-pic { display: block; }
	#about .col-right .profile-pic { display: none; }
}
/*@media screen and (max-width: 320px) {*/
@media screen and (max-width: 500px) {
	.bar select { display: inline-block; width: 100px; }
	.bar .links { display: none; }
}