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

/* !Generals */

html{}
  body{}
    #content{ position: relative; }

/* !Global Float Clearing */
#mainContent:after,
#intro:after,
.gallery:after,
#cta:after,
.header:after,
#people:after,
#promo:after{ content: "."; display: block; height: 0; line-height: 0; font-size: 0; clear: both; min-height: 0; visibility: hidden; }

/* !Link Colors */

a:hover  { -webkit-transition: all 0.2s ease-in-out; }
a:link,
a:visited{ color: #de0881; text-decoration: none; }
a:focus,
a:hover  { text-decoration: underline; outline: none; color: #000; }
a:active { outline: none; }

/* !Headings */

h1{ margin: 42px 0 0 0; font-size: 20px; }

h2{}

h3{}

#secondary h3{}

h4{}

/* !Header */

#announcement{ background: #de0881; text-align: center; padding: 18px 0; font-size: 12px; color: #fff; }
  #announcement a.action{ color: #fff; background: #ce0677; padding: 8px 18px; border: 1px solid #ae0b67;
                          /* CSS3 */
                          border-radius:         16px;
                          -webkit-border-radius: 16px;
                          -moz-border-radius:    16px;
                          -o-border-radius:      16px;
                          -khtml-border-radius:  16px;
                          -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2);
                          text-shadow: -1px -1px 0 rgba(0,0,0,.25);
                        }
  #announcement a.action:focus,
  #announcement a.action:hover{ text-decoration: none; background: #c60673; }
  #announcement a.action:active{ position: relative; top: 1px; }
  #announcement a:link,
  #announcement a:visited{ color: #fff; font-weight: bold; }
  #announcement strong{ font-weight: normal; padding: 8px 0; }

    #branding a{ display: block; width: 526px; margin: 56px auto 28px auto; }
      #branding img{ display: block; }
      

#intro{ background: #f5f5f5; margin: 28px 0 42px 0; padding: 28px 0; font-size: 16px; color: #555;
        /* CSS3 */
        border-radius:         8px;
        -webkit-border-radius: 8px;
        -moz-border-radius:    8px;
        -o-border-radius:      8px;
        -khtml-border-radius:  8px;
        text-shadow: 1px 1px 0 rgba(255,255,255,1);
      }

/* !Footer */

#footer{}

/* !Main Content */

.gallery{ margin: 28px 0 0 28px; }
  .gallery .project{ float: left; margin: 0 28px 28px 0; width: 206px; min-height: 235px; max-height: 235px; font-size: 11px; }
      .gallery .project .thumb img{ display: block; }
    .gallery .project p{ margin: 1.25em 0 0 0; }
      .gallery .project p em{ font-style: normal; display: block; margin: .5em 0 0 0; text-align: center; font-size: 13px; font-weight: bold; }
  .gallery .project.span-2{ width: 440px; height: 139px; min-height: 0; background: url(../images/thumbs/uniform.png); }
    .gallery .project.span-2 p{ margin: 0; padding: 28px 28px 24px 234px; }

#cta{ margin: 0 0 56px 0; padding: 14px 28px; font-size: 16px; }
#project #cta,
#rfq #cta{ margin: 0 0 42px 0; padding: 0; border: none; }
#project #cta{ margin: 28px 0 84px 0; }
  #project #cta .first,
  #rfq #cta .first{ margin-top: 20px; font-size: 12px; }
    #project #cta .first a:link,
    #project #cta .first a:visited,
    #rfq #cta .first a:link,
    #rfq #cta .first a:visited{ color: #999; }
  #cta .action{ float: right; margin-top: 14px; text-align: right; }
    .action a,
    .action button,
    .cta a{ padding: 10px 54px; background: #de0881; border: 2px solid #de0881; font-weight: bold; color: #fff;
            /* CSS3 */
            border-radius:         22px;
            -webkit-border-radius: 22px;
            -moz-border-radius:    22px;
            -o-border-radius:      22px;
            -khtml-border-radius:  22px;
            text-shadow: 1px 1px 0 rgba(0,0,0,.15);
          }
    .action a:link,
    .action a:visited,
    .cta a:link,
    .cta a:visited{ color: #fff; }
    .action a:focus,
    .action a:hover,
    .action button:focus,
    .action button:hover,
    .cta a:focus,
    .cta a:hover{ text-decoration: none; background: #ce0677; }
    .action a:active,
    .action button:active,
    .cta a:active{ position: relative; top: 1px; }

.project .header{ margin-top: 42px; }
  .project .header h1{ float: left; margin: 0; }
  .project .header p{ float: right; margin: 4px 0 0 0; font-size: 11px; }
    .project .header p a,
    .project .header p em{ background: #343434; padding: 4px 14px;
                           /* CSS3 */
                           border-radius:         12px;
                           -webkit-border-radius: 12px;
                           -moz-border-radius:    12px;
                           -o-border-radius:      12px;
                           -khtml-border-radius:  12px;
                         }
    .project .header p em{ background: #f5f5f5; font-style: normal; color: #999; }
    .project .header p a:link,
    .project .header p a:visited{ color: #efefef; text-shadow: 1px 1px 0 #000; }
    .project .header p a:focus,
    .project .header p a:hover  { text-decoration: none; background: #000; color: #fff; }
    .project .header p a:active { position: relative; top: 1px; }
  .project .header ul{ height: 0; position: relative; }
    .project .header li{ position: absolute; top: 4em; width: 50px; height: 50px; }
    .project .header li.previous{ left: -156px;  }
    .project .header li.next    { right: -156px; }
      .project .header li a         { display: block; height: 50px; text-indent: -9999px; overflow: hidden; }
      .project .header li.previous a{ background: url(../images/icons/previous.png);                        }
      .project .header li.next a    { background: url(../images/icons/next.png);                            }
    
  .showcase{ margin: 35px 0; padding: 15px 0 0 0; width: 596px; height: 531px; background: url(../images/layout/chrome.png) 0 0 no-repeat; }
    #slider{ position: relative; }
      #slider img{ display: block; position: absolute; top: 0; left: 0; }
      
      .nivo-controlNav{ position: absolute; left: 47%; top: -40px; }
        .nivo-controlNav a{ display: block; width: 10px; height: 10px; background: url(../images/icons/bullets.png) 0 0 no-repeat; text-indent: -9999px; margin-right: 3px; float: left; }
        .nivo-controlNav a.active{ background-position: -10px 0; }
    
    .footnote{ font-size: 11px; color: #777; }
    #project .footnote{ margin: -1.5em 0 28px 0; }

#rfq{}
  #rfq h1{ font-size: 32px; letter-spacing: -2px; text-align: center; margin: 42px 0; line-height: 1; }
  #rfq p{ line-height: 3; margin: 0; }
    #rfq input[type="text"]{ border: none; border-bottom: 1px dotted #ccc; width: 10.8em; line-height: 1; }
    #rfq select{ line-height: 1; font-size: .95em; }
    #rfq textarea{ width: 586px; height: 12em; padding: 4px; border: 1px solid #ccc; line-height: 1.5; }
    #rfq input:focus,
    #rfq textarea:focus{ outline: none; background: transparent; border-color: #343434; }
    
    #rfq #additionalInfo{ width: 596px; overflow: hidden; }
      #rfq #additionalInfo p{ line-height: 1.5; }
    
    #rfq .footnote{ text-align: right; margin-bottom: 14px; }
    
    .hp0t{ display: none; }

  .error{ padding: 21px 28px; background: #ffe2f0;
          /* CSS3 */
          border-radius:         16px;
          -webkit-border-radius: 16px;
          -moz-border-radius:    16px;
          -o-border-radius:      16px;
          -khtml-border-radius:  16px;
        }

#success,
.message,
#help{ margin: 0 -28px 28px -28px; padding: 21px 28px; background: #f3f3f3;
          /* CSS3 */
          border-radius:         16px;
          -webkit-border-radius: 16px;
          -moz-border-radius:    16px;
          -o-border-radius:      16px;
          -khtml-border-radius:  16px;
        }
  #rfq #success h1,
  .message h1,
  #help h2{ font-size: 24px; margin: .25em 0 0 0; line-height: 1.5; text-align: left; }
  #help h2{ font-size: 16px; }
  #rfq #success p,
  .message p,
  #help p{ margin: .25em 0 1em 0; line-height: 1.5; }

#about{}
  #about #mainContent{ padding-bottom: 42px; }
    #about #header{ margin-bottom: 42px; }
    #about h1{ margin: -7px 0 1em 0; font-size: 20px; line-height: 1.6; font-weight: normal; color: #de0881; letter-spacing: normal; }
    #about p.intro{ margin: 1em 0; }
    #people{}
      #people p{ margin: .75em 0 0 0; }
      #people strong{ color: #d3006d; font-weight: normal; }
    .publications{}
      .publications p{ padding: 1px 158px 7px 0; background: url(../images/icons/twitter-icon.png) 100% 0 no-repeat; }
    .promo{ font-size: 12px; color: #777; line-height: 1.9; }
    #about .cta p{ font-size: 18px; }
    #about .cta a{ display: block; text-align: center; line-height: 1; }
    
#error-404{ background: url(../images/layout/404.png) 50% 100px no-repeat; }
  #error-404 #mainContent{ height: 580px; }
    #error-404 .message{ position: absolute; top: 210px; left: 520px; width: 424px; margin: 0; padding: 0; background: transparent; }
      #error-404 .message p.footnote{ margin-top: 64px; }