/*
    Theme Name: James Padolsey Custom
    Theme URI: http://james.padolsey.com
    Description: Custom theme for james.padolsey.com
*/

body,img,ul,ol,dl,dt,dd,blockquote,p,h1,h2,h3,h4,h5,h6,form,fieldset {border: none;list-style: none; margin: 0;padding: 0;font-weight: normal; outline:none;}
body {
/* 
    background: #368512;
    background: -moz-linear-gradient(top left, #368512, #184B00);
    background: -ms-linear-gradient(top left, #368512, #184B00);
    background: -o-linear-gradient(top left, #368512, #184B00);
    background: -webkit-gradient(linear, 0 0, 100% 100%, from(#368512), to(#184B00));
    background: -webkit-linear-gradient(top left, #368512, #184B00);
    background: linear-gradient(top left, #368512, #184B00);
    background-attachment: fixed;*/
    background: #EEE;
    color: #000; font-size:  1em;
    font-family: "museo-sans", "Myriad Pro", "Helvetica Neue", Helvetica, sans-serif;/* font-family: Inconsolata, Menlo, "Bitstream Vera Sans Mono", Monaco, consolas, "Lucida Console", monospace; */letter-spacing: .02em;}
a {color: #000;text-decoration: none;}
html.js img {
  opacity: 0;
  -moz-transition: opacity .5s; 
  -webkit-transition: opacity .5s; 
  -o-transition: opacity .5s;
  transition: opacity .5s;
}

.center {text-align: center;}
.inline {display: inline;}
.gap {font-size: 0.8em;}
code{ padding:0 4px; background: #EEE; }
code, pre, #content .wp_syntax pre { font-family: Inconsolata, Menlo, "Bitstream Vera Sans Mono", Monaco, consolas, "Lucida Console", monospace !important; font-size: .8em !important; }

#top {    position: relative; z-index: 494;  overflow: hidden;padding-bottom: 1em;}
#header { color: #FFF; position: relative;  z-index: 60;  }
#header a { color: #FFF; }
#nav {
    font-size: .8em;
    max-width: 1000px;
}

#nav li {
    line-height: 5em;
}
#nav a { float: left; background-color: rgba(255,255,255,0.4); display: inline; padding: 0 1em; text-decoration: none;text-transform: uppercase;font-weight: 400; line-height: 4.666rem; color: #333; margin: 0 4px 0 0;letter-spacing: .1em;}
#nav a:hover, #nav a:focus, #nav a.active { background: rgba(247, 249, 251, 0.77); color: #111; }
#nav a.active { text-decoration: underline; }
#nav a.home {/* font-size: .1em; */}

#latest-snippet { -moz-box-shadow: 0 0 4px #AAA; -webkit-box-shadow: 0 0 4px #AAA; box-shadow: 0 0 4px #AAA; border: 1px dotted #999; padding: 20px; margin: 20px 0 0 20px; background: rgba(255,255,255,0.5); }
#content #latest-snippet h2 {background:none; font-size:1.4em; padding: 0 0 10px 0;}

#header, #main, #footer {
    max-width: 770px;
    margin: 0 auto;
}

#main {
    color: #000;
    background: #FFF;
    overflow: inherit;
    position:relative;
    z-index: 80;
}
#content, #sidebar { }

#content {  margin: 0; width: auto;padding: 45px;}

h1,h2,h3,h4,#logo{ /* font-family: "ff-mach-wide-web-pro", "Myriad Pro", "Helvetica Neue", Helvetica, sans-serif; */ }
h1 { font-weight: 700; }
h2,h3,h4 { font-weight: normal; }


#content h2, #content h3 {
    padding: 1em 0; 
    /* background: #922B2B; */
    color: #000;
}
#content h1 {font-size: 3em; padding: 0 0 1em 0;}
#content.single h1 { padding: 0; }
#content h2 {font-size: 1.6em; }
#content h3 {font-size: 1.4em; }

#content h1.inpage {background: none;}
#content h2 a {color: #000;border: none;text-decoration: none;}
#content h2.archive {background:none;font-size:2.2em;}
#content .main-img {float: right; margin: 10px 0 10px 10px; border: 5px solid #555;}
.content .main-img img {margin:0;}
small.author {
  font-weight: 700;
  display: block;
  font-size: .7em;
  margin: 1em 0 3em;
 }
small.author a {color: #000;}
#content a {text-decoration: underline;}
#content a:hover,
#content a:focus,
#content a:active {background-color: #FAF6C3;}
#content p, #content ul, #content .post-content ol {font-size: 1em;padding:.6em 0;line-height: 1.6em;}
#content ul ul {font-size:1em;}
#content ul p { font-size: 1em;}

/** FLICKR **/
#content ul.flickr {
    overflow: hidden;
    padding: 0;
    display: flex;
    margin: 0 -45px 3em;
}
#content ul.flickr li {
  float: left;
  list-style: none;
  padding: 0;
  flex: auto;
  height: 150px;
  position: relative;
  overflow: hidden;
  transition: flex .2s .1s;
}
.flickr img {
  opacity: .6;
  transition: opacity .2s .1s;
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  text-indent: -9999em;
  transform: translate(-50%, 0);
}
#content ul.flickr li:hover {
  flex: 2.5;
}
#content ul.flickr li:hover img {
  opacity: 1;
}

#content #post-list { padding: 0; }
#content #post-list li { overflow: hidden; border-bottom: 1px solid rgba(0, 0, 0, 0.07); line-height: 1em; padding: .4em 0; }
#content #post-list li a { padding: 5px; float: left; text-decoration: none; }
#content #post-list li a:hover,
#content #post-list li a:focus { background: #333; color: #FFF; }
#content #post-list li .meta { padding: 5px; float: right; width: 25%; text-align: right; }

#content .post-content ol {padding: 0.6em 0 0.6em 30px;}
#content .post-content form ol {padding: 0; list-style:none; line-height: 1em; font-size: 1em;}
#content ul { padding: 0.6em 0 0.6em 20px; }
#content ul { list-style: disc;}
#content ul li {padding: 2px 0;}
#content .post-content ol { list-style: decimal;}
#content ul.imp li {border-top: 1px dashed #555; padding: 8px 0; }
#content ul.options li {padding: 4px 0;}
#content .post-content ul h3 {font-size: 1.5em; padding: 0.4em 0 0.2em 0;}

#content img.normal {padding: 5px;background: #EEE;border: 1px solid #999;}

#content p.vid { padding:15px 45px; background:#FFF; margin: 10px 0 10px -45px; width: 100%; }
#content p.vid { text-align:center; }
#content blockquote { font-style: italic; padding-left: 20px; margin: 0 50px 0 30px; border-left: 2px solid #0C69B0; }

#content .post-navigation {padding: 3px 0px 20px 10px; overflow:hidden;}
#content .post-navigation .older-posts {float:left;display:block;width:20%;}
#content .post-navigation .newer-posts {float:right;display:block;width:20%;text-align:right;}
#content .post-navigation .older-posts a,
#content .post-navigation .newer-posts a {background:#DDD;display:inline-block;padding:5px 7px;}

table { width: 100%; margin: 15px 0; }
table th { border: 1px solid #999; background: #EEE repeat-x scroll 0 bottom; background-size: 100% 100%; }
table th.heading, table td.heading { font-weight: 700; }
table td, table th { padding: 6px; }
table td { border-color: #999; border-style: solid; border-width: 1px; }
table th.null { background: none; border-top: none; border-right: 2px solid #999; }
table td.lside { border-left: 2px solid #999; }
table.centz td,table.centz th { text-align: center; }
table td.nowrap, table th.nowrap { white-space: nowrap; }
table.bigcells td { font-size: 1.3em;}
table.bigcells td.heading { font-size: 1em; }
table td.win { background: #D9F3AE; font-weight: 700; }

.commentlist { }
.commentlist li {margin: 20px 0; clear: left; border: 1px solid #CCC; background: #FFF; }

#content .commentlist li blockquote { padding: 10px; margin: 0; width: auto; }

.commentlist li span.data {display: block; overflow: hidden; padding: 15px; background: #EFEFEF;}
.commentlist li.author {}
.commentlist li.author span.data { background: #333; color: white; }

#content .commentlist li img.avatar {float: left;opacity: 0.9;border: 1px solid #CCC;margin: 1px 0 0 1px; height: 40px; width: 40px; }
.commentlist cite {display: block;padding: 0 0 0 50px;font-size: 1.2em;}
.commentlist cite a { color: inherit; }
.commentlist .commentmetadata {display: block;padding: 4px 0 4px 50px;font-size: .8em;}
.commentlist .commentmetadata a { color: inherit; }

.commentlist .content {padding: 10px 20px;}

#content p.postmetadata {
        width: 100%; text-align: center; 
        padding: 20px 45px; margin: 30px 0 30px -45px;
    
        background: rgba(255,255,255,0.6);
}

#content .commentlist .wp_syntax { width: auto; margin: 10px 0; padding: 10px; }
#content .commentlist .content p { }
#content #searchform {padding: 10px 20px;}
#content .search-result {padding:10px; margin: 0 20px; border-top: 1px solid #999;}
#content .search-result h3 {font-size:1.6em; padding-bottom: .5em;}
#content .search-result small {}

#content .nocomments { font-size: .9em; font-weight: 700; font-style: italic; text-align: center; }

#commentform li small {line-height:1.6em;}
#commentform li.first {border: none; padding-top: 20px;}
#commentform label, #contact-form label {display: block;padding: 3px 0; }
#commentform input.text, #contact-form input.text {width: 200px; background:#FFF !important; border: 1px solid #999; border-top: 1px solid #333; padding: 4px;} 
#contact-form, #commentform {margin: 10px 0; clear: left; }
#contact-form ol, #commentform ol {padding-bottom: 0px;}

#contact-form li.last, #commentform li.last {padding-bottom: 15px;}
#contact-form li.first ul li, #commentform li.first ul li {font-weight: 700;color: red;margin: 0 20px;padding: 3px 0;}
#contact-form li, #commentform li {padding: 10px 20px;}
#contact-form textarea, #commentform textarea {width: 602px;padding: 5px; background:#FFF !important; border: 1px solid #999; border-top: 1px solid #333; padding: 4px; display:block; margin-bottom: 0; font-family:"Consolas","Lucida Console",Courier,mono; }
#commentform ol {padding: 0 0 10px 0;}
#allowed-tags h4 { font-size: 1.2em; text-transform: uppercase; padding: 0; font-weight:700; }
#allowed-tags p {font-size:1em;padding:10px 0;}

.handle { height: 12px; background: #555 url(images/resize.gif) no-repeat center center; float: left; clear: left; margin-bottom: 5px;}

#cfo-message {color: #000; display: none;position: absolute;top: 0;left: 0;border: 3px solid #CCC;background: white;padding: 10px;font-size: 1.2em;-moz-border-radius: 8px;-Webkit-border-radius: 8px;-khtml-border-radius: 8px;}
#cfo-message span {border-bottom:2px solid green;}

/*Ajax comment preview*/
li#comment-preview {padding:0;}
#ajax-comment-preview {padding: 20px;}
#acp-preview {margin-left: 20px;}

#rss #rss-email {width:100px;}
#rss p { padding: 10px 0; text-align: center; border-top: 1px solid #999;}

#search-results { display:none; }

#footer {color:#000; clear:both;text-align: center;padding: 30px 0; position:relative;font-size: .8em;}
#footer p {line-height: 1.3em;}
#footer a {color:#000;background-color: rgba(255, 255, 255, 0.51);padding: .3em .5em;}
#footer a:hover, #footer a:focus { background-color: rgba(0,0,0,.3); }
 
#kiframe { position:absolute; left:0; width:100%; z-index: 998; }
#koutofhere { position:fixed; top:20px; left:20px; background:black; color:yellow; font-weight:700; z-index: 999; line-height: 30px; padding: 0 20px; cursor:pointer; font-size:16px;display:none; }

/** CODE HIGHLIGHTING **/

#content .wp_syntax {
    border: none;   width: 100%;
}

#content .wp_syntax {margin: 10px 0 10px -45px;background: rgba(255,255,255,0.6); padding: 45px;}

#content .wp_syntax .code {margin: 0;border: none; color: #000; background: none;}
#content .wp_syntax table {background:none; border:none; margin:0; width:auto;}
#content .wp_syntax td.code {padding: 5px;}
#content .wp_syntax .line_numbers { padding-right: 5px !important; }
#content .wp_syntax .line_numbers pre {
    padding: 7px 8px 7px 20px !important;background: transparent !important; border:none; border-right: 1px solid #AAA !important;
}
#content .wp_syntax pre,pre {margin: 0; font-size:14px;} /* !important used to override inline style induced by WPSYNTAX plugin */

.kw2, .kw1 { color: #3F7A29; }
.br0, .sy0 { color: #6F2725; }
.st0 { color: #2D5086; }
.co1, .co0, .co2, .coMULTI { color: #A1367B; }
.nu0, .nu1 { color: #111; }

/* Homepage */
#content.homepage { padding-top: 0; }
#content.homepage h2.major { margin: 2.7em 0 1em; padding: .2em 0 .25em; }
#content.homepage p em {
  font-size: 1.6em;
  font-weight: 700;
  font-style: normal;
  text-transform: capitalize;
  padding: .2em;
}
#content.homepage p a { text-decoration: none; font-weight: 700;color: #957671;}
#content.homepage p { line-height: 2em; }
#content.homepage span.mo { background: rgba(255,2555,255,0.4); padding: .12em; }

p#home-see-all { text-align: center; padding-top: 2em;}
#home-see-all a { text-decoration: none; color: rgb(12, 105, 176); padding: .3em .9em; background-color: rgba(255,255,255,0.4);}

#front-page-clock { opacity: .7; }
#front-page-clock:hover { opacity: 1; }

#main:before {
    content: "";
    position: absolute;
    top: -60vw;
    right: -10vw;
    border-left: 110vw solid rgba(129, 240, 241, 0.24);
    border-bottom: 20vw solid transparent;
    border-top: 90vw solid rgba(0, 0, 0, 0);
    pointer-events: none;
    transform: scale(.9999);
    z-index: 1;
}
/*.x-full-height...*/
#main:after {
    content: "";
    position: absolute;
    top: -100vh;
    right: 0;
    border-left: 100vw solid rgba(255, 225, 198, 0.38);
    border-bottom: 150vh solid rgba(0, 0, 0, 0);
    border-top: 100vh solid transparent;
    pointer-events: none;
    z-index: 1;
}

#main {
    position: relative;
}

#main #content {
    z-index: 2;
    position: relative;
}

/** MOBILE **/
/*@media screen and (max-device-width : 736px) {
  #main, #header, #footer { width: 100%; }
  #top:before, #top:after { display: none; }
  #top { padding: 0; background: red; }
  #nav {
      position: static; transform: none;
      width: 100%; margin-bottom: 3em; 
      text-align: center; background: #333; }
}*/