/*
|----------------------------------------------------------------------------------------|
| SUPERAWESOME CSS FRAMEWORK - EMBEDDABLE STYLE SHEET                             | v1.0 |
|----------------------------------------------------------------------------------------|
| AUTHOR: Dragan Babic | http://sprawsm.com/                                             |
|----------------------------------------------------------------------------------------|
| DATE MODIFIED: Wed, 24 Jun 09                                                          |
|----------------------------------------------------------------------------------------|
| 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 "layout.css";
@import "scf-typography.css";
@import "scf-extras.css";

/* !Generals */
html{ background: url(../images/layout/main-bg.png); }
  body{ background: url(../images/layout/gradient-bg.png) 0 0 repeat-x; }
  /*html, body { height: 100%; min-height: 100%; }*/
  
    p, li { margin: 1em 0; line-height: 1.8em; }

    pre { font-size: 12px; }
  
/* 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; } }

/* Float Clearing */
body:after,
#content:after,
#blogContent:after,
.grid:after,
.item:after{ content: "."; display: block; height: 0; line-height: 0; font-size: 0; clear: both; min-height: 0; visibility: hidden; }

/* !Grid */
.grid{}
  .grid .col{ float: left; margin: 0 20px 0 0; width: 193px; }
  .grid .col.last{ margin-right: 0; }
  .grid .col-2 .col, .grid .cs-6 { width: 406px !important; }
  .grid .col-1 .col { width: 832px !important; }
  .grid .cs-3 { width: 193px !important; }

/* !Link Colors */

a:link,
a:visited{ color: #fff; text-decoration: underline; }
a:hover{ text-decoration: none; }
a:focus,
a:active{ color: #ffffbf; }

/* !Headings */

h2{}
h3{}
#secondary h3{}
#secondary h3 a{ display: block; }
h4{}

/* !Header */

#nav{ float: left; width: 102px; margin: 0 35px 0 0; }
  
  #branding{}
    #branding a,
    #branding img{ display: block; }
  
  #nav ul{ margin: 28px 0 0 0; }
    #nav li{ margin: 0; width: 103px; height: 47px; }
      #nav li a{ display: block; height: 47px; text-indent: -9999px; background-image: url(../images/layout/nav.png); }
      #nav li.nav-services a{ background-position: 0 0;      }
      #nav li.nav-team a    { background-position: 0 -47px;  }
      #nav li.nav-contact a { background-position: 0 -94px;  }
      #nav li.nav-blog a    { background-position: 0 -141px; }
      /* Active States */
      #nav li.active.nav-services a,
      #nav li.active.nav-services a:hover { background-position: -103px 0; position: relative; z-index: 999; }
      #nav li.active.nav-team a,
      #nav li.active.nav-team a:hover { background-position: -103px -47px; position: relative; z-index: 999; }
      #nav li.active.nav-contact a,
      #nav li.active.nav-contact a:hover { background-position: -103px -94px; position: relative; z-index: 999; }
      #nav li.active.nav-blog a,
      #nav li.active.nav-blog a:hover { background-position: -103px -141px; position: relative; z-index: 999; }

      /* Hover States */
      #nav li.nav-services a:hover { background-position: -206px 0; position: relative; z-index: 999; }
      #nav li.nav-team a:hover { background-position: -206px -47px; position: relative; z-index: 999; }
      #nav li.nav-contact a:hover { background-position: -206px -94px; position: relative; z-index: 999; }
      #nav li.nav-blog a:hover { background-position: -206px -141px; position: relative; z-index: 999; }

/* !Main Content */

#content{ position: relative; color: #fff; font-size: 14px; font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, sans-serif; min-height: 800px; }

  #mainContent{ float: left; width: 853px; padding: 98px 0 48px 0; }

.placeMaker { height: 200px; }

/* !Home */

  #home #mainContent{ background: url(../images/layout/illustration-home.png) 100% 0 no-repeat; }

    #ground { margin-top: 40px; }

  #home .archive ul {}
  #home .archive li { list-style-type: none; margin: 0 !important; padding: 5px 0 5px 110px; position: relative; border-top: 1px solid #bc4444; }
  #home .archive li.lazt { border-bottom: 1px solid #bc4444; }
  #home .archive .postDate { left: 0; position: absolute; color: #cb6666; }
  #home .archive a { text-decoration: none; }
    
    .intro{}
      .intro h1{ margin: 0 0 28px 0; background: url(../images/layout/tagline-home.png) 0 0 no-repeat; width: 400px; height: 160px; text-indent: -9999px; }
      .intro p{ width: 400px; margin: 24px 0; }
      .intro p.learnMore{}
        .intro p.learnMore a{ display: block; width: 173px; height: 70px; background: url(../images/buttons/learn-more.png); text-indent: -9990px; }
        .intro p.learnMore a:hover,
        .intro p.learnMore a:focus { background-position: 0 -70px;  }
        .intro p.learnMore a:active{ background-position: 0 -140px; }
    
        .rate{ background: url(../images/layout/rate.png) 0 8px no-repeat; height: 138px; text-indent: -9999px; }

/* !Services */
  
/*
  #services #content{ background: url(../images/layout/illustration-services.jpg) 0 0 no-repeat; }
  
    #services #mainContent h1{ background: url(../images/layout/tagline-services.png) 0 0 no-repeat; height: 124px; text-indent: -9999px; }
    #services #mainContent h2{ background: url(../images/layout/title-some-bits-were-good-at-and-care-about.png) 0 0 no-repeat; height: 25px; text-indent: -9999px; }
    #services #mainContent p,
    #services #mainContent ul{ width: 600px; }
*/
    
/* !Inner */
  
  .inner #content{ background: url(../images/layout/illustration-services.jpg) 0 0 no-repeat; }
  
    .inner #mainContent p,
    .inner #mainContent ul{ width: 600px; }
    
/* !Work/Team/Contact */

#work #mainContent h1{ background: url(../images/layout/title-work.png) 0 0 no-repeat; height: 73px; margin-bottom: 42px; text-indent: -9999px; }

.item{ width: 600px; margin: 1.5em 0; }
  .inner #mainContent .item p,
  .inner #mainContent .item ul{ width: auto; }
  
  .item .thumb{ float: left; margin: 0 21px 21px 0; }
    .item .thumb img{ display: block; }
  .item h2{ font-size: 20px; margin: .5em 0; }
  .item .itemInfo{ margin-left: 231px; margin-top: 0; }
    .item .itemInfo .action{ display: block; margin: 1.5em 0; padding: 1.25em 0 0 0; border-top: 1px solid rgba(0,0,0,.15); text-align: right; font-size: 12px; }

#team #mainContent h1{ background: url(../images/layout/title-team.png) 0 0 no-repeat; height: 23px; margin-bottom: 42px; text-indent: -9999px; }

#team .item .itemInfo{ margin-left: 161px; }
.item .related{ margin-left: 171px; padding: 1em 0 0 0; border-top: 1px solid rgba(0,0,0,.15); font-size: 12px; color: rgba(255,255,255,.5); }

#contact #mainContent h1{ background: url(../images/layout/title-contact.png) 0 0 no-repeat; height: 23px; margin-bottom: 42px; text-indent: -9999px; }

#contact .uniForm{ width: 600px; margin: 3em 0; }

  #contact .uniForm .inlineLabels label{ width: 20%; margin-top: 6px; }
  #contact .uniForm .inlineLabels .textInput,
  #contact .uniForm .inlineLabels textarea{ width: 75%; padding: 4px; border: 1px solid rgba(0,0,0,.75); }
  #contact .uniForm .inlineLabels .textInput:focus,
  #contact .uniForm .inlineLabels textarea:focus{ outline: none; border-color: #000; }
  
  #contact .uniForm .buttonHolder{ margin: .5em 0; padding-left: 23%; }
    #contact .uniForm .buttonHolder button{ padding: 14px; background: #000; border: none; color: #fff; font-weight: bold; }
    #contact .uniForm .buttonHolder button:focus{ background: #212121; }
    #contact .uniForm .buttonHolder button:active{ background: #212121; color: #ffffbf; }

/* !Blog */

  #blog{ min-height: 800px; background: #d6d6d6 url(/images/layout/blog-bg.jpg) repeat-y; }
    #blog #content{ width: 1000px; color: #343434; }
      
      #blog #nav{ margin: 0; }
      
      #blog #mainContent{ background: url(/images/layout/blog-bg.png); padding: 0; margin-left: -10px; }
        
        #blogContent{ float: right; width: 533px; margin: 40px 0; padding: 20px 40px; background-color: #f5f5f5; min-height: 500px; }
        
          .post{}
            .post .postInfo{ color: #777; font-size: 12px; line-height: 1; }
            .post h1{ font-size: 20px; font-weight: bold; margin-top: -.3em; line-height: 1.1; }
            .post a{ color: #343434; }
            .post li { list-style-type: disc; margin: 1em 0 0 2em !important; }

          #blog .archive h1 { margin-top: 1em; }
          #blog .archive ul {}
          #blog .archive li { list-style-type: none; margin: 0 !important; padding: 5px 0 5px 110px; position: relative; border-top: 1px solid #d5d5d5; }
          #blog .archive .postDate { left: 0; position: absolute; color: #666; }
        
        #blog #secondary{ float: left; width: 200px; padding: 1px 20px; font-size: 12px; }
        
          #blog .title-recent-entries{ background: url(../images/layout/title-recent-entries.png) 0 0 no-repeat; height: 17px; text-indent: -9999px; margin-top: 42px; }
          #blog .title-archives{ background: url(../images/layout/title-archives.png) 0 0 no-repeat; height: 17px; text-indent: -9999px; margin-top: 42px; }
          
          .recentPosts{}
            .recentPosts li{ margin: 0; padding: 12px 0; }
            .recentPosts li.active{ background: #ababab url(/images/layout/ababab-arrow.png) no-repeat 100% 50%; padding: 12px 30px 12px 20px; width: 200px; position: relative; margin-left: -20px; }
              .recentPosts h4,
              .recentPosts p{ margin: 0; }
                .recentPosts a:link,
                .recentPosts a:visited{ color: #343434; text-decoration: none; }
                .recentPosts a:hover{ color: #000; }

            #disqus_thread { margin-top: 4em; }

  #rss { width: 34px; height: 39px; position: absolute; left: 945px; top: 40px; background: orange url(../images/layout/rss.png) no-repeat; text-indent: -9999px; }
  #rss a { width: 34px; height: 39px; display: block; }