/*
|----------------------------------------------------------------------------------------|
| SUPERAWESOME CSS FRAMEWORK - EMBEDDABLE STYLE SHEET                                    |
|----------------------------------------------------------------------------------------|
| v1.0 by Dragan Babic | http://sprawsm.com/                                             |
|----------------------------------------------------------------------------------------|
| ABOUT:                                                                                 |
|----------------------------------------------------------------------------------------|
| Use this style sheet for all your site's styles and to override existing ones set by   |
| the framework if you wish to upgrade to a newer version at some point. This is the     |
| style sheet you should embed in your HTML page.                                        |
|----------------------------------------------------------------------------------------|
*/

@import "sprawsm_framework/sprawsm-extras.css";
@import "sprawsm_framework/sprawsm-typography.css";

html{ font-family:  Georgia, TImes New Roman, serif; background: #fff; color: #444; }

/* Font Smoothing for OS X */
body { -webkit-text-stroke: 1px transparent; }
@media only screen and (max-device-width: 480px) { body { -webkit-text-stroke: 0 black; } }

  #content{ font-size: 15px; }

blockquote{ margin: 0 0 0 -12px; padding: 0 0 0 12px; border-left: 1px solid #dfdfdf; color: #888; }

blockquote.pullQuote,
blockquote.pullquote,
blockquote.left,
blockquote.right{ float: right; margin: 4px -240px 0 0; width: 216px; padding: 0; border: none; border-top: 1px solid rgba(0,0,0,0.1); font: normal italic 1.5em/1.25 "Times New Roman", "Times", Georgia, serif; }

blockquote.left { float: left; margin: .25em 34px 0 0; text-align: right; }
blockquote.right{ margin: .25em 0 0 34px; }

.post.quote blockquote{ width: 500px; font: normal normal 1em/1.5 Verdana, Tahoma, Geneva, sans-serif; padding: 0; margin: 3em 0 1.5em 0; text-transform: uppercase; letter-spacing: 2px; border: none; color: #000; }
  .post.quote blockquote p{ margin: 0; }
.cited{ width: 500px; margin: 1.5em 0; padding: 21px 0 0 0; background: url(../images/horizontal_divider.png) 0 0 no-repeat; font-size: 12px; font-style: italic; }
  .cited p{ margin: 0 !important; }

/* !Global float clear */
#content:after, #header:after, #mainContent:after, h2:after, .posts:after, .post:after, .postBody:after, .image:after, .footerNav:after, #pagination:after, #comments li:after, .cta:after{ content: "."; display: block; height: 0; line-height: 0; font-size: 0; clear: both; min-height: 0; visibility: hidden; }

.notice, .message{ padding: 14px 0 14px 96px; background:#fffcac; position: relative; }
  .sub{ position: absolute; top: 13px; right: 12px; color: #999; font-size: 10px; display: block; }

.intro{ width: 500px; font-family: Verdana, Tahoma, Geneva, sans-serif; font-size: 11px; color: #777; margin: 3em 0 3em -22px; padding: 0 0 0 22px; background: url(../images/icon-info.png) 9px 0 no-repeat; }

.cta{ font-size: 11px; text-transform: uppercase; letter-spacing: .35em; margin: 28px 0 0 0; padding: 28px 0 0 0; border-top: 1px solid #efefef; width: 500px; }
  .cta a{ float: right; padding: 4px 0 4px 35px !important; background: transparent url(../images/tweetthis-icon.png) 0 50% no-repeat !important; }
  
  .like{ float: left; height: 24px; }
  
  .twitter{ position: absolute; top: 100px; left: -60px; }

.tags_select{ display: inline-block; margin-top: 14px; margin-left: 124px; max-height: 140px; overflow: auto; font: normal normal 11px/1.5 Verdana, Tahoma, Geneva, sans-serif; }
  .tags_select a{ margin-right: 8px; }

.more{ text-align: right; }

p{ margin: 1em 0; }

pre{ padding: 14px; font-size: .85em; overflow: auto; background: rgba(0,0,0,.05); }
code{ font-size: .85em; }

/* !Uni-Form overrides */
.uniForm{ padding: 28px; border-left: 68px solid rgba(0,0,0,.075); background: rgba(0,0,0,.05); width: 500px; }
.uniForm .inlineLabels .ctrlHolder label{ margin-top: .75em; width: 100px; font-size: 10px; text-transform: uppercase; color: #999; }
.uniForm .inlineLabels .ctrlHolder label:after{ content: ":"; }
.uniForm .inlineLabels .ctrlHolder .textInput, .uniForm .inlineLabels .ctrlHolder textarea{ width: 368px; padding: 3px; border: 1px solid #ccc; }
.uniForm .buttonHolder{ padding: 0 0 0 124px; }
  .uniForm .formHint{ color: #777; font-size: 11px; margin-left: 124px; }

.inline_edit{ padding-top: 28px !important; padding-right: 28px !important; }
  .inline_edit textarea{ font-size: 11px !important; }

/* !Link Colors */

a:link{ text-decoration: none; color: #000; padding: 4px; margin: 0 -4px; }
a:visited{ color: #000; text-decoration: none; }
a:hover{ background: #f5ff4c; }
a:active{}

/* !Admin Nav */
#adminNav{ position: absolute; top: 24px; left: 96px; z-index: 999; line-height: 1; margin: 0; }
  #adminNav li{ display: inline; margin: 0 6px 0 0; }
    #adminNav a{}

  .sendMeStuff{ width:500px; position: absolute; top: 28px; left: 96px; font-size: 12px; font-style: italic; color: #888; text-align: right; line-height: 1; }

/* !Headings */

h1{ float: left; width: 68px; height: 68px; background: rgba(0,0,0,.05); border-bottom: 1px solid rgba(0,0,0,.05); margin: 0 0 -1px 0; font-weight: normal; }
  h1 a{ display: block; margin: 24px auto 0 auto !important; padding: 0 !important; background: transparent !important; width: 42px; color: #000 !important; }
  h1 img{ display: block; width: 42px !important; height: 15px !important; margin: 0 auto; }
  h1 span{ position: absolute; top: -9999px; visibility: hidden; }

h2{ font-size: 14px; margin: 4em 0 0 0; }
.post.text h2{ font-size: 24px; letter-spacing: -1px; margin: 48px 0 0 0; }
  .post.link h2{ position: relative; font-weight: normal; }
    .post.link h2 span{}
    .post.link h2 a{}
  h2.date{ margin: 0; font-weight: normal; letter-spacing: 2px; font-size: 10px; text-transform: uppercase; background: rgb(245,255,76); color: #000; }
    h2.date *{ float: left; width: 60px; background: rgba(0,0,0,.125); padding: 4px; text-align: center; }
    h2.date a{}
  h2.pageTitle{ margin: 0; padding: 28px 0 28px 28px; background: rgba(0,0,0,.05); border-left: 68px solid rgba(0,0,0,.075); color: #000; line-height: 1; font-size: 24px; font-weight: normal; }
  h2.maintenance{ position: absolute; top: 0; left: 0; margin: 0; padding: 24px; line-height: 0; background: #efefef; }
h3{ font-size: 12px; font-weight: normal; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 0; color: #000; }
#secondary h3{}
h4{}

/* !Header */

#header{ border-bottom: 1px solid rgba(0,0,0,.1); }

/* !Footer */

#footer{ margin: 3em 0 3em 96px; width: 500px; font-family: Verdana, Tahoma, Geneva, sans-serif; font-size: 11px; line-height: 1.7; }
  #footer form{ margin-bottom: 1.5em; }
    .backToTop{ float: right; }
    .licence{}
      .licence .left{ margin-top: .2em; }
      .licence a[rel="licence"]{ border: none !important; }

/* !Main Content */

#content{ position: relative; }
  #mainContent{}
    
    #primary{}
      #primary .postInfo{ margin-right: 0; }

        .post{ padding: 0 0 42px 28px; border-left: 68px solid rgba(0,0,0,.05); border-bottom: 1px solid rgba(0,0,0,.1); position: relative; }
        .post.single{ padding-top: 1px; }
        
        .post:last-child{ border-bottom: 1px solid #rgba(0,0,0,0.1); }
          
          .postHeader{ width: 500px; border-top: 4px solid rgba(0,0,0,.05); }
          
          .postBody{ width: 500px; }
          
          .photo .postBody, 
          .video .postBody,
          .post.quote .postBody{ border-top: 4px solid rgba(0,0,0,.05); }
          
          /* Anulate the borders */
          h2.date + .post{ border-top: 1px solid rgba(0,0,0,.1); }
          
          .post.photo .postBody,
          .post.video .postBody,
          .post.audio .postBody{ padding-top: 42px; }
            
            .permanentLink{ margin: 0 !important; padding: 0 !important; background: transparent !important; position: absolute; top: 56px; left: -42px; width: 14px; height: 14px; }
              #mainContent .post .permanentLink a{ margin: 0 !important; padding: 0 !important; color: #999 !important; background: transparent !important; }
            
            /* Spotify Link */
            .spotify{ margin: 0; padding: 56px 0 0 80px; background: url(../images/spotify.gif) 0 52px no-repeat; color: #aaa; font-style: italic; }
              .spotify.song .song{ font-size: 24px; display: block; font-weight: normal; font-variant: normal; font-style: normal; }
              .spotify.song .artist{ color: #777 !important; font-style: normal; font-variant: small-caps; letter-spacing: 2px; margin-left: 4px; }
              
              .spotify .footnote{ margin-top: 1.5em; font-style: normal; }
            
            /* !Lists */
            .postBody ul{}
              .postBody ul li{ margin: 0 0 18px 28px; padding: 0 0 0 14px; background: url(../images/bullet.png) 0 .55em no-repeat; }
              .postBody ol li{ list-style: decimal; margin: 0 0 18px 28px; padding: 0 0 0 14px; }
            
            /* !Images & notes */
            .image, .video, .note{ font-size: 11px; font-family: Verdana, Tahoma, Geneva, sans-serif; color: #777; }
              
              .image a{ margin: 0 !important; padding: 0 !important; }
              .image a:hover{ background: transparent; text-decoration: underline; }
              
              .image img,
              .video object{ display: block; }
              
/*
              .photo .image p,
              .video p,
              .audio p{ clear: both; margin: 0; padding: 28px; background: #000; color: #fff; }
              
              .photo .image p + p,
              .video p + p,
              .audio p + p{ margin-top: -14px; padding-top: 0; }
              
                .photo .image p a,
                .video p a,
                .audio p a{ color: #f5ff4c !important; }
*/
              
            .offsetRight, .note{ float: right; margin: 4px -240px 0 0; width: 216px; }
              .offsetRight a:link{ margin: 0; padding: 0; }
              .offsetRight a:hover{ background: transparent; text-decoration: underline; }
                .offsetRight img{ display: block; }
              .offsetRight p{ margin:1.5em 0 0 0; font-family: Verdana, Tahoma, Geneva, sans-serif; }
            
            .screenShot{ display: block; margin-left: -20px; }
            
            p.footnote{ font-family: Verdana, Tahoma, Geneva, sans-serif; font-size: 11px; color: #777; margin-top: 3em; padding: 12px 0 0 0; background: url(../images/horizontal_divider.png) 0 0 no-repeat; }
            
            .visitLink{ width: 100%; overflow: hidden; }
              .visitLink a{ float: left; width: 125px; height: 35px; line-height: 35px; text-align: center; background: #f4f4f4 url(../images/visit_link.png); }
              .visitLink a:hover{ border: none; background-color: #efefef; }
            
          .postFooter{ position: absolute; top: 60px; left: 556px; width: 128px; font-size: 10px; color: #777; font-family: Verdana, Tahoma, Geneva, sans-serif; }
            .postFooter .date,
            .postFooter .controls{ display: block; margin-bottom: .5em; }
            .addThis,
            .tweetThis{ margin: 0 0 0 4px; position: relative; top: 8px; border: none !important; }
        
        .archiveMonth ul li{ margin: 0 12px 0 0; display: inline; color: #777; }
      
#pagination{ margin: 0 0 0 96px; width: 500px; font-size: 11px; font-family: Verdana, Tahoma, Geneva, sans-serif; }
  #pagination a{ margin: 0 !important; padding: 14px 28px; line-height: 1; }
  #pagination a:hover{ border: none; background: rgba(0,0,0,.05); }
  #pagination .newer{ float: left; margin-left: -28px !important; }
  #pagination .older{ float: right; margin-right: -28px !important; }

#pagination.prevNextPost{ background: rgba(0,0,0,.05); padding: 0 28px 0 96px; margin: 42px 0 0 0; }
  #pagination.prevNextPost .older{}

  .sponsor{ width: 136px; padding: 28px 28px 14px 28px; background: rgba(0,0,0,.05); position: fixed; bottom: 28px; right: 28px; z-index: 999; font-family: Verdana, Tahoma, Geneva, sans-serif; }
    .sponsor p{ margin: 0 0 12px 0; }
      .sponsor a{}
    .sponsor .banner{ width: 136px; }
      .banner a{ padding: 0 !important; margin: 0 !important; background: transparent !important; }
      .banner img{ display: block; }
    .adDesc{ font-size: 9px; }
    .adInfo{ font-size: 9px; padding: 12px 0 0 0; border-top: 1px solid rgba(0,0,0,.1); }