/*
Theme Name: Karla Porter
Theme URI: http://karlaporter.com/
Description: Theme for Karla Porter, by Shanx
Author: Shashank Tripathi
Author URI: http://shanx.com/
Note: ------------The actual minified CSS comes from kpX.css in the cache folder--------
*/

/* RESET */
:focus { outline: 0; }
table { border-collapse: separate; border-spacing: 0; width: 95%}
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q {	quotes: "" "";}
blockquote { 
  padding: 3px 5px 3px 25px !important;
  background: transparent url(/blockquote.gif) top left no-repeat; 
  color: #666;
}
blockquote, .entry ul, .entry ol {   
  max-width: 40em; 
}
blockquote {   
  margin: 3px 15px 5px 5em !important;
}
.entry ul, .entry ol {   
  margin: 3px 15px 5px 4em !important;
}

/* Search */
#search { margin:0; clear: right; float: right; }
#search #q { background: #fff url(/search.gif) 9.5em center no-repeat !important; border: 0; border: 1px #ccc solid !important; width: 10em ; }
#search #q:focus { border:1px #666 solid !important; background: #fff !important }
#topbar a { text-indent: -10000% !important; font-size: 1px !important }
.sr dd { margin-left: 1.5em }
.sr span { color: #888 }
.hil { background-color: #A2422E; color: #fff; padding: 2px 5px }

/* Start */
body { margin: 0px; background: #F6F1ED; background: #EFE9E2 url(http://cache.karlaporter.com/2014/08/karla.bg_.jpg) top repeat-x fixed; padding: 0; text-align: center; height: 100% ; overflow: auto }

a, a:visited { color: #A2422E; text-decoration: none; }
a:hover { color: #1D393F; }
a, a:active, a:focus { outline:none !important; }
.entry a { background: #E5DFD9; margin: 1px 3px; }
.entry a:hover { background: transparent; }
.clr { clear: both; height: 1px; margin: 0; padding: 0 }

img { border: 0px }
table { border: 0px; border-top: 1px solid #ccc;}
td { border-bottom: 1px solid #ccc; padding: 3px }
.vamoos, hr { display: none }
#wrap { margin: 1em auto; width: 90%; max-width: 55em; }
#wrap { text-align: left; }

.top1, #top1 { float: left; width: 35%; height: 150px }
#top2 { float: right; display: block; width: 60%; text-align: right; }
.top3 { float: left; width: 60%; }

#top2 p { clear: right; margin-top: 10px }
#top2 a { text-indent: -10000% }

.col a.i { padding: 0.2em 0 0.2em 0.6em; display: block; float: left; }
.col a.i:hover img { border: 6px #009FC6 solid }
.col a.i img { border: 2px #ccc solid; padding: 6px; background: #fff; width: 75px; height: 75px }
.col a.i:hover img { border: 2px #009FC6 solid; }

#spot { border-top: 1px #ccc solid; display: block; width: 100%; margin: 0; padding: 0; }
#spot h2 { font-size: 24px; margin: 12px 0 0 0; padding: 0 }
#spot span.date { color: #515151; font-size: 12px; }
.section { width: 100%; margin: 0 ; padding: 0 0 3em 0; }
#spot h3 { display: block; text-decoration: underline; margin-top: 0.5em }
.entry ol li, .entry ul li { padding: 0.1em; }
.entry ul ul, .entry ol ol { list-style-type: lower-alpha;}


#header { width: 100%; padding: 0; margin: 0; }
#header span { visibility: hidden; height: 1px; }
#header h1 a { width: 226px; height: 122px; display: block; background: url(/karla_porter_logo.png) top left no-repeat; }
#header h1, #header h2, #header h3, #header form { margin: 0; padding: 0 }

#left { float: left; display: block; width: 23%; }
#right { float: left; display: block; width: 73%; padding-left: 7%; }

/*-- NAVIGATION --*/
.navigation { padding: 0.5em 0 }
.categories { display: block; margin: 0; padding: 1em 0 0 0.5em; width: 80% }
.categories li { background: transparent; margin:0; padding:0; list-style:none; display: block; padding: 3px; border-bottom: 1px #ccc solid }

#footer { background: url(/utils.png) top center no-repeat; background-position: -0 -129px; width: 100%; clear: both; border-top: 1px solid #ccc; margin: 6em 0; }
#topwho { clear: both; border-top: 0px solid #ccc; margin: 1em 0; float: right; overflow: auto ; display: block }
#topwho h4 { display: block; text-indent: -10000% }
#footer span { text-indent: -10000%; display: block; width: 317px; height: 22px; }
#footer span { margin-top: 10px }

/* TEXT REPLACEMENTS */
a.rss, a.fb, a.gmail, a.linkedin, a.who, a.jobs-top { 
 display: block; float: right; text-indent: -10000%; background: url(/social.gif?0.1) no-repeat; cursor: pointer; margin-top: 5px; width: 27px; height: 30px; 
}
a.rss { background-position: -78px 0px; }
a.rss:hover { background-position: -78px -29px; }
a.fb { background-position: -26px 0px; }
a.fb:hover { background-position: -26px -29px; }
a.gmail {  }
a.gmail:hover { background-position: 0px -29px; }
a.linkedin { background-position: -52px 0px; }
a.linkedin:hover { background-position: -52px -29px; }

a.who { background: url(/utils.png) no-repeat; margin: 7px 7px 0 0; text-align: left; width: 105px; background-position: -374px -35px; }
a.who:hover { background-position: -478px -35px; }
a.jobs-top { background: url(/utils.png) no-repeat; margin: 7px 7px 0 0; text-align: left; width: 45px; background-position: -446px -72px; }
a.jobs-top:hover { background-position: -498px -72px; }

.titlenav { float: right; display: block; width: 48px; }
.prv a, .nxt a { display: block; float: right; text-indent: -10000% !important; background: url(/utils.png) no-repeat; width: 23px; height: 19px; margin: 0; padding: 0;}
.prv a { background-position: -1px -25px }
.prv a:hover { background-position: -1px -43px }
.nxt a { background-position: -25px -25px }
.nxt a:hover { background-position: -25px -43px }

/* CONTENT STUFF */
#rec, #top1, #av { margin-top: 0; }
#rec h2, #top1 h2, #links h2 { 
  text-indent: -10000%; background: url(/utils.png) top left no-repeat; width: 107px; height: 25px; text-align: left }
#rec h2 { background-position: -238px -35px; } 
#top1 h2 { background-position: -238px 0px; } 
#twit, #av { display: block; clear: right; }
#twit h2 { text-indent: -10000%; background: url(/utils.png) top center no-repeat; width: 192px; height: 51px; background-position: 0px -61px; margin: 10px 0 0 0; padding: 0; float: right; display: block; }
#av h2 { text-indent: -10000%; background: url(/utils.png) top center no-repeat; width: 178px; height: 50px; background-position: -193px -61px; margin: 20px 0 0 0; padding: 0; float: left; display: block; clear: both}
.tags, .share { text-transform: lowercase !important ; clear: both }
.tags { display: block; margin-top: 0.5em }
.tags span { text-indent: -10000%; background: url(/utils.png) top center no-repeat; width: 24px; height: 24px; background-position: -48px -25px; margin: 0; padding: 0; display: block; float: left }

a.more { clear: left; margin: 0.2em 0 2em 0.5em; float: left; text-indent: -10000%; background: url(/utils.png) no-repeat; display: block; background-position: -2px -2px; width: 60px; height: 20px; }
a.more:hover { background-position: -62px -2px; }
a.follow { clear: left; margin: 0.5em 0 2em 0.5em; float: right; text-indent: -10000%; background: url(/utils.png) no-repeat; display: block; background-position: -141px -7px; width: 69px; height: 25px; }

#rec dl { padding: 0.5em 0 0 0.5em; width: 90% }
#rec dt { font-size: 12px; color: #999; padding-top: 0.5em; }
#rec dt span.iv { display: none; }
#rec dd { padding: 0.2em 0 0.5em 0; margin-left: 0; border-bottom: 1px solid #ccc; font-weight: bold; }

b { color: #333 }
input[type=submit],input[type=button] { background: #eee url(/bg_switcher.png) repeat-x left bottom !important; margin-right:1px; border:solid 1px #bbb; cursor:pointer; color:#424242; padding: 0.3em 0.5em !important }
input[type=submit]:hover,input[type=button]:hover { background-image: none !important; border: solid 1px #aaa !important; color:#333 !important }
input[type=text], textarea { border: 1px #ccc solid; padding: 0.3em; margin: 0.3em 0.5em 0.3em 0; }
input[type=text]:focus, textarea:focus { border: 1px #666 solid; background: #fff }

/* COMMENT FORM */
#wpcf label { clear: both; margin-top: 0.5em; display: block;	float: left; width: 35%; }
#wpcf input { float: left; margin-top: 0.5em; width: 50%; padding: 1px; margin: 2px 5px 2px 0; }
#wpcf textarea { width: 350px; height: 100px; padding: 1px;	margin: 0 5px 10px 0; }
#wpcf #contactsubmit { margin: 1em 0 2em 250px; padding: 0.25em 0.5em; }
.err, #err { color: #c00; font-weight: bold }

dl.comments, .penny { display: block; float: left; padding: 0.5em 0 1em 1em }
dl.comments dt { float: left; width: 20%; display: block; }
dl.comments dd { float: left; width: 73%; display: block; }
dl.comments dd p { margin: 0 0 1em 0; padding: 0}

cite { font-style: normal; font-size: 16px }
cite.author { font-weight: bold }
cite.date { color: #515151; font-size: 12px; }
cite.avatar img { border: 3px solid #fff; margin-top: 0.5em }
textarea.commentbox { width: 50em }
.subscribe-to-comment { padding: 0.1em 0 !important; margin: 0.1em 0 !important }
span.comment a { background: url(/comment.gif) center right no-repeat; padding-right: 15px;  }
#comments { margin-top: 1.5em }
li.linkcat { list-style: none; padding: 1em 0; font-size: 18px } 

.singlestuff { margin: 0.5em 0 1em 1em; padding: 0.5em 1em; border-left: 1px #ccc solid; font-size: 16px }
.singlestuff br { clear: both; margin: 0.3em 0 }

/* ALL LISTING */
.month_archive { padding: 0.5em 0 1em 0; display: block; }
.month_archive li { display: block; list-style: none; clear: both; margin: 0.5em 0 0.5em 3px; padding: 0.2em 0 }
.the_day { float: left; width: 5em }
.the_article {float: left; width: 84%}

/* Elsewhere */
#links { width: 100%; padding: 0; margin: 1em auto; border-bottom: 1px solid #ccc; clear: left }
#links h2 { background-position: -377px 0px; margin: 0 0 0.5em 0; padding: 0; text-align: left ; clear: left } 

#links ul { width: 100%; float: left; display: block }
#links ul li { list-style: none; padding: 0.5em 0; color: #555; width: 29% ; float: left; margin-right: 3%}

#links ul li a .a { display: block; font-weight: 600 }
#links ul li a .b { color: #555 }
#links ul li a:hover .b { color: #000 }

#links ul li a { display: block; padding: 0.3em 0 0.3em 19px; margin: 0em; background: url(/links.gif) top left no-repeat; height:  }
#links ul li a:hover { background-color: #D9D6CF }
#links ul li:hover a, #links ul li:focus a { }
.post img { border: 1px #ccc solid; background: #f1f1f1; padding: 8px; float: left; margin: 0 1em 1em 0 }

ul.children li { border-bottom: 0; padding-left: 15px ; background: url(/5.gif) left center no-repeat; }

iframe, #searchresults { display: block; margin: 1em 0; padding: 1em }
#banner { clear: both; display: block; margin: 1em 0 0 0 }
.ads, .ads script, .ads span, .ads div { background: #F6F1ED !important; font-size: 12px !important; font-family: Arial, sans-serif !important; margin: 2em 0 !important }
.section:after, #header:after, #spot:after, iframe#after, .month_archive:after, .eachcomment:after, #links:after, #banner:after { content:"."; display:block; height:0; clear:both; visibility:hidden }

/* Jquery Tweet */
.query { height: 25em; overflow: auto; margin: 60px 1em 1em; clear: both; width: 100% }
.query .tweet_list { list-style-type: none; margin: 0; padding: 0;}
.query .tweet_list li, #resources li { overflow: auto; padding: .5em; margin: 0.5em 3px 5px 2em ; background: #FEF9F5; border: 4px #fff solid; }
.query .tweet_list li a { }
.query .tweet_list .tweet_even {  }
.query .tweet_list .tweet_avatar { padding-right: .5em; float: left; }
.query .tweet_list .tweet_avatar img { vertical-align: middle; border: 2px #fff solid }
.section:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
	
body {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: scroll;
} 

/* Disqus */
#dsq-content #dsq-options-toggle{display:none!important;}#dsq-content #dsq-extra-links{float:right!important}#dsq-comments .dsq-comment{margin:30px 0!important}#dsq-comments .dsq-comment-body{padding-left:25%!important}#dsq-comments .dsq-comment-body p,#dsq-comments .dsq-comment-body br{padding:0 0 12px 0!important;}#dsq-comments .dsq-comment-header{padding:5px!important;background:transparent url(/bglinks.png)!important;border-top:1px #ccc solid!important}.dsq-header-meta,.dsq-comment-footer{font-size:12px!important;color:#666!important;}#dsq-content #dsq-comments .dsq-comment-meta{clear:both!important}#dsq-content #dsq-comments .dsq-comment-footer{margin:1em 0 0 25%!important;border-top:1px #ccc solid;padding-top:0.25em!important}#dsq-comments .dsq-header-avatar{border:0!important;}input.submit{background:#eee url(/bg_switcher.png) repeat-x left bottom!important;margin-right:1px;border:solid 1px #bbb!important;cursor:pointer!important;color:#424242!important;padding:0.3em 0.5em!important}input.submit:hover{background-image:none!important;border:solid 1px #aaa!important;color:#333!important}input.form-text,textarea{border:1px #ccc solid!important;padding:0.3em!important;margin:0.3em 0.5em 0.3em 0!important;}input.form-text:focus,textarea:focus{border:1px #666 solid!important;background:#fff!important;}input[type=submit],input[type=button]{background:#eee url(/bg_switcher.png) repeat-x left bottom!important;margin-right:1px;border:solid 1px #bbb!important;cursor:pointer!important;color:#424242!important;padding:0.3em 0.5em!important}input[type=submit]:hover,input[type=button]:hover{background-image:none!important;border:solid 1px #aaa!important;color:#333!important}input[type=text],textarea{border:1px #ccc solid!important;padding:0.3em!important;margin:0.3em 0.5em 0.3em 0!important;}input[type=text]:focus,textarea:focus{border:1px #666 solid!important;background:#fff!important}

body, input, select, div, blockquote { font-family: 'Dny', "Helvetica Neue", "HelveticaNeue", "Segoe UI", "SegoeUI",  Sans-serif; font-size: 18px; line-height: 1.25em ; color: #424242; } 

#links, #banner, #twit, .ads, .ads script, .ads span, .ads div  { 
  font-size: 16px; 
}
h1 { font-size: 30px }
h2 { font-size: 24px}
h3 { font-size: 20px}

#links { background: transparent url(/bglinks.png); }
#resources {  border: 0; width: 50em; margin: auto ; text-align: center; font-size: 12px; color: #999 }
#resources a { text-align: center; list-style-type: none ; font-size: 16px} 

.entry li { clear: both; margin: 1em auto; padding: 0.5em auto 	 }
.entry li img { margin: 1em auto ; clear: both; }

blockquote, blockquote p { font-family: Lekton !important; }
#livefyre .lf_comment_container .lf_comment { font-size: 16px !important }