/*
|----------------------------------------------------------------------------------------|
| 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, code { font-size: 12px; }
    pre { padding: 1em; }

    abbr, acronym { border-bottom: 1px dotted #ABABAB; font-style: normal; }

/* 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; min-width: 1000px; }

  #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; }
    .inner ul li { list-style: disc; margin: 0 0 0 2em; }

/* !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: -.2em; line-height: 1.4em; }
            .post h1 a { text-decoration: none; }
            .post a{ color: #343434; }
            .post p, .post li { line-height: 1.5em; }
            .post li { list-style-type: disc; margin: 0 0 0 2em !important; }
            .post blockquote { font-style: italic; }

          #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; }

        img.floatLeft { float: left; margin: 4px 1em 4px 0; }
        img.floatRight { float: right; margin: 4px 0 4px 1em; }
        p.floatRight { float: right; margin: 5px 0 0.5em 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; }

/* Toolbox */

#nav li.toolbox a:link, #nav li.toolbox a:visited { background-position: 0 -188px; }
#nav li.toolbox a:hover, #nav li.toolbox a:focus { background-position: -206px -189px; position: relative; z-index: 999; }
#nav li.active.toolbox a:link,#nav li.active.toolbox a:visited, #nav li.active.toolbox a:focus, #nav li.active.toolbox a:hover { background-position: -103px -188px; position: relative; z-index: 999; }


#mainContent .toolbox{background:white; width: 815px; float: left;margin: 40px;
                      -moz-box-shadow: 0px 0px 25px #555;
                      -webkit-box-shadow: 0px 0px 25px #555;
                       box-shadow: 0px 1px 5px #555;}
#mainContent .toolbox .description {background: #f8f8f8; padding: 38px;}
#mainContent .toolbox .description h2 {color: #ca0202; font-size: 21px;margin: 0;}
#mainContent .toolbox .description img {float: right; padding-left: 15px;}
#mainContent .toolbox .description p.small {font-size: 11px;}
#mainContent .toolbox .filter {background: #eaeaea; float: left; width: 739px; padding: 13px 38px;border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}

/*-----filter links*/
#mainContent .toolbox .filter a:link,
#mainContent .toolbox .filter a:visited {background: #f8f8f8; border: 1px solid #ccc; color: #4c89d5; margin-left: 8px; text-decoration: none; font-size: 11px; padding: 5px 17px;-moz-border-radius: 4px;border-radius: 4px;}
#mainContent .toolbox .filter a:hover,
#mainContent .toolbox .filter a:focus {background: #fff;}


/*------filter link selected*/
#mainContent .toolbox .filter a:link.selected ,
#mainContent .toolbox .filter a:visited.selected  {background: #343434; text-decoration: none; font-size: 11px; padding: 5px 17px; color: #ccc;border: none;-moz-border-radius: 4px;border-radius: 4px;}
#mainContent .toolbox .filter a:focus.selected,
#mainContent .toolbox .filter a:hover.selected {background: #555;}



#mainContent .toolbox .filter ul {float: right;margin: 0;}
#mainContent .toolbox .filter li {display: inline; font-size: 11px;}
#mainContent .toolbox .filter li.fading a { color: #c1cfe2; }

.tools {float: left; width: 739px; padding: 0 38px;}
.tools ul{float: right; width: 460px; margin: 17px 0 36px 0;}
.tools li {border-bottom: 1px solid #f2f2f2; margin: 0; padding: 2px 0 2px 20px;}
.tools a:link, .tools a:visited {color: #4c89d5; font-size: 12px; text-decoration: none;}
.tools a:focus, .tools a:hover {text-decoration: underline;}
.tools li.fading, .tools li.fading a:link, .tools li.fading a:visited { color:#c1cfe2; }
.tools li.rising {list-style-image: url(../images/layout/star.png); list-style-position: inside; padding-left: 3px;}

.hr {margin-left: -38px;margin-right: -38px;}


/* Toolbox + Isotope */
.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}


.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}