/*
|----------------------------------------------------------------------------------------|
| 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 "scf.typography.css";
@import "scf.layout.css";
@import "scf.extras.css";

/* !Colors              */
/* orange:      #e15d28 */
/* dark orange: #c85223 */
/* blue:        #184666 */
/* teal:        #e6e0cb */

/* !Generals */

html,body{ min-height: 100%; }

html{ background: #194a6b url(../images/layout/bg.png) 50% 0 no-repeat; height: 100%; font-family: "Lucida Grande", Verdana, Arial, sans-serif; }
  body{ background: url(../images/layout/pattern.png); }
      #content{ background: #fff; position: relative; }
        #mainContent{ padding: 42px 0 20px 0; }

.articleImage{}
  .articleImage img{ float: left; margin: 0 1em 0 0; }

.hr{ border-color: #efefef; }

/* !Global Float Clearing */
#mainContent:after,
#default .callToAction:after,
#secondary:after,
.intro:after,
.services:after,
.pagination:after,
.buttonHolder:after{ content: "."; display: block; height: 0; line-height: 0; font-size: 0; clear: both; min-height: 0; visibility: hidden; }

/* !Link Colors */

a:link,
a:visited{ color: #184666; }
a:hover  {}
a:focus  {}
a:active {}

/* !Headings */

.pageTitle{ font-size: 32px; line-height: 1; text-transform: uppercase; margin: 20px 0 28px 0; }

h2, h3{ font-size: 15px; line-height: 1; letter-spacing: 1px; }

h3{}

#secondary h3{}

h4{}

/* !Header */

#header{}
  
  #branding{ position: absolute; top: -85px; right: 0; }
    #branding a,
      #branding img{ display: block; }
  
  #nav{ margin: 0 0 41px 0; height: 44px; background: #e15d28 url(../images/layout/nav.png) 0 0 repeat-x; }
    #nav *{ margin: 0; }
    #nav ul{ margin: 0 auto; width: 964px; line-height: 1; font-size: 11px; text-transform: uppercase; font-weight: bold; }
      #nav li{ float: left; margin: 9px 8px 0 0; }
        #nav a{ float: left; padding: 7px 12px 8px 12px; text-decoration: none;
                /* CSS3 */
                border-radius:         4px; 
                -webkit-border-radius: 4px;
                -moz-border-radius:    4px;
                -o-border-radius:      4px;
                -khtml-border-radius:  4px;
              }
        #nav a:link,
        #nav a:visited{ color: #fff; }
        #nav a:focus,
        #nav a:hover{ background: #c85223; outline: none; text-decoration: none; }
        /* active state */
        #nav  a.active{ background: #c85223 url(../images/layout/nav-active.png) 0 0 repeat-x; }

/* !Footer */

#footer{ width: 964px; margin: 0 auto; padding: 0 0 3em 0; text-align: center; color: #fff; font-size: 11px; text-shadow: 1px 1px 0 rgba(0,0,0,.5); }

/* !Home */

#default .intro{}
  #default .intro h1{ margin: -10px 0 0 0; font-size: 32px; text-transform: uppercase; line-height: 1; }
    #default .intro h1 span{ float: left; }
  #default .intro p{ margin-bottom: 2em; padding-top: 18px; clear: both; }
  #default .intro ol{}
    #default .intro li{ margin-bottom: 2em; line-height: 1.75; }
    #default .intro li.first-child{ width: 284px; margin-left: 0; }
    #default .intro li.nth-child{ margin-left: 0; }
    /* add numerals */
    #default .intro li strong{ padding: 0 0 0 20px; background-position: 0 50%; background-repeat: no-repeat; }
    #default .intro .first-child strong{ background-image: url(../images/icons/bullet-1.png); }
    #default .intro .nth-child-2 strong{ background-image: url(../images/icons/bullet-2.png); }
    #default .intro .last-child strong { background-image: url(../images/icons/bullet-3.png); }
    
    .intro a:link,
    .intro a:visited{ color: #e15d28; text-decoration: none; }

.showcase{ font-size: 11px; position: relative; }
  .showcase h2{ text-transform: uppercase; line-height: 1; margin-top: 0; }
  .showcase ul{ margin: 0; /* height: 436px; */ }
    .showcase li{ /* height: 346px; */ }
      .showcase .item{  padding: 24px 280px 36px 24px; background: #e6e0cb;
                        /* CSS3 */
                        border-radius:         6px;
                        -webkit-border-radius: 6px;
                        -moz-border-radius:    6px;
                        -o-border-radius:      6px;
                        -khtml-border-radius:  6px;
                     }
      .showcase .illustration{ float: right; margin: -90px -308px 0 0; }
        .showcase .illustration img{ display: block; }
      .CTA{ margin: 1.5em 0; }
      .showcase .CTA{ margin-bottom: 0; }
      .CTA a{ padding: 4px 12px 8px 12px; background: #184666; text-transform: uppercase; font-weight: bold; text-decoration: none;
              /* CSS3 */
              border-radius:         5px;
              -webkit-border-radius: 5px;
              -moz-border-radius:    5px;
              -o-border-radius:      5px;
              -khtml-border-radius:  5px;
            }
      .CTA a:hover{ background: #276189; }
      .CTA a:link,
      .CTA a:visited{ color: #fff; }
      .CTA a:active{ position: relative; top: 1px; }

.callToAction{ margin: 1.5em 0 0 0; padding: 0 0 3em 0; }
  .callToAction p{ margin-top: 0; margin-bottom: 0; }
  .callToAction .CTA{ float: right; margin: .5em 0 0 0; font-size: 14px; }
    .callToAction .CTA a{ padding: 8px 24px 14px 24px; background: #e15d28; }
    .callToAction .CTA a:hover{ background: #f4652c; }
#secondary{ border-top: 1px solid #efefef; border-bottom: 20px solid #e15d28; background: url(../images/layout/dividers-3col.png) 50% 0 repeat-y; margin: 3em 0 0 0; clear: both; padding-bottom: 20px; }
    
    #default #secondary h3{ height: 81px; line-height: 81px; margin: 0 1px 0 -28px; padding: 0 0 0 28px; }
   
  #default .blog{}
     .article img {
		margin-right: 10px;
		margin-left: 10px;
		margin-bottom: 10px;
	}
    #default .blog h3{ background: url(../images/layout/home-blog-header.png) 100% 0 no-repeat; }
    #default .blog ul{ margin: 1.5em 28px 1.5em 0; }
      #default .blog li{ margin: 0 -28px 8px -28px; padding: 0 28px 8px 28px; border-bottom: 1px solid #efefef; }
        #default .blog li strong{ display: block; }
          #default .blog li .date{ font-size: 11px; }
          #default .blog li .comments{ background: #efefef; padding: 3px 8px; font-size: 10px; margin-left: 5px;
                                       /* CSS 3 */
                                       border-radius:         4px;
                                       -webkit-border-radius: 4px;
                                       -moz-border-radius:    4px;
                                       -o-border-radius:      4px;
                                       -khtml-border-radius:  4px;
                                     }
          #default .blog li .comments a{ color: #333; }
          #default .blog li .comments a:hover{ color: #184666; text-decoration: none; }                                     
          
          h2#comment{ font-size: 18px; color: #343434; margin: 2em 0 1.5em 0; }
                                     
          #default .blog li.more{ border: none; font-size: 11px; }
            #default .blog li.more strong a:link,
            #default .blog li.more strong a:visited{ color: #184666; }
  
  #default .testimonials{}
    #default #secondary .testimonials h3{ background: url(../images/layout/home-testimonials-header.png) 100% 0 no-repeat; margin-right: 0; margin-left: -27px; }
    #default .testimonials blockquote{ margin: 1.5em 28px 1.5em 0; line-height: 1.75; }
      #default .testimonials blockquote p:before{ content: "“"; }
      #default .testimonials blockquote p:after{ content: "”"; }
  
  #default .inPerson{}
    #default #secondary .inPerson h3{ background: url(../images/layout/home-inperson-header.png) 0 0 no-repeat; margin-left: -27px; margin-right: 0; width: 340px; }
    #default .inPerson .vevent{ background: #efefef; border: 1px solid #dfdfdf; padding: 14px; text-align: center;
                              /* CSS 3 */
                              border-radius:         8px;
                              -webkit-border-radius: 8px;
                              -moz-border-radius:    8px;
                              -o-border-radius:      8px;
                              -khtml-border-radius:  8px;
                            }
      #default .inPerson .dtstart{ display: block; font-size: 11px; font-weight: bold; margin-bottom: .2em; }
      #default .inPerson .summary,
      #default .inPerson .location{ font-size: 14px; font-weight: bold; margin: 0; }
      #default .inPerson em{ display: block; font-family: Georgia, serif; margin-top: .2em; }

/* !Services */

#services{}
  
  #services .intro{ margin: 0 0 1.5em 0; padding: 0 0 60px 0; background: url(../images/layout/services-intro.jpg) 0 100% no-repeat; }
    #services .intro h1{ float: left; width: 170px; margin: -6px 0 0 0; font-size: 36px; text-transform: uppercase; line-height: 1; }
    #services .intro p{ margin-top: 0; }
    
  .services{ height: 515px; position: relative; }
  
  .adForm,
  .tcForm{ display: none; }
      
      #services .applicationDevelopment .content{ border-right: 1px solid #efefef; } 
      
      #services .technologyConsulting,
      #services .applicationDevelopment{ margin-bottom: 3em; }
      
      #services .technologyConsulting img{ float: right; margin-top: -4.5em; margin-left: 28px; }
    
    #services .CTA{ margin: 2em 0; font-size: 12px; }

/* !Team */

#team{}

  #team .intro{}
    #team .intro p.about{ font-size: 15px; line-height: 1.7; margin-bottom: 0; }
    #team .intro p{ margin-bottom: 32px; }
      #team .intro img{ display: block; }
  
  #team #secondary{ clear: both; border: 1px solid #efefef; border-width: 1px 0; background: url(../images/layout/dividers-3col.png) 0 0 repeat-y; margin-top: 0; }
      #team #secondary h2{}
        #team #secondary h2 em{ display: block; color: #777; font-size: 11px; font-weight: normal; font-style: normal; }
      .danielEShipton p,
      .igorDobrosavljevic p{ margin-right: 28px; }

/* !Labs */

#labs{}
  
  #labs .intro{ padding: 0 654px 0 28px; background: url(../images/layout/labs-illustration.jpg) 100% 100% no-repeat; min-height: 296px; font-size: 15px; }
    #labs .intro h1{ margin: -14px 0 -10px 0; font-size: 38px; text-transform: uppercase; line-height: 1; letter-spacing: -1px; }
  
  #labs #secondary{ border: none; clear: none; margin: 0 0 3em 0; padding-bottom: 1px; }
    #labs .item{ padding: 1px 0 0 0; }
    #labs .item p{ width: 255px; }
      #labs .articleImage img{ float: none; margin: 0; }
      #labs .article .articleImage{ float: right; width: 284px; margin: 0 -312px 0 0; overflow: hidden; }
    #labs hr, #labs .hr{ margin: 0; }
      #labs .item h2 a{ color: #343434; }
  
  #labs h1{ font-size: 28px; margin: 0 0 20px 0; }

/* !Technology */

#technology{}
  
  #technology .intro{ position: relative; }
    #technology .intro h1{ margin-top: 0; font-size: 23px; text-transform: uppercase; line-height: 1; }
    #technology .intro p{ margin-top: 0; }
    #technology .intro .articleImage{ margin: 0; position: absolute; top: -83px; left: 600px; }
  
  #technology #secondary{ background: #e9f5f8; border: none; margin: 3em 0; padding: 1.5em 0; }
    #technology #secondary .articleImage{ text-align: center; }
    #technology #secondary ul{ margin-top: -6px; border-top: 1px solid #d5e5e9; }
      #technology #secondary ul li{ padding: 10px 0; border-bottom: 1px solid #d5e5e9; font-weight: bold; }
  
  #technology .CTA{ text-align: center; margin: 3.5em 0 4em 0; }
  
/* !Services */

.services{ height: auto; min-height: 515px; }

.adForm,
.tcForm{ width: 908px; margin: 0; position: relative; }
  .adForm form,
  .tcForm form{ width: 674px; margin: 0 auto; }
    
    .adForm p,
    .tcForm p{ font-size: 16px; }

/* !Work */

#work{}
  
  #work #mainContent{ padding-bottom: 0; }
    
    #work .intro{ position: relative; min-height: 436px; margin-bottom: 3em; }
      #work .intro h1{ margin: 0; font-size: 38px; text-transform: uppercase; line-height: 1; }
      #work .intro p{ font-size: 16px; margin: 14px 0 28px 0; }
        #work .intro .articleImage{ margin: 0; position: absolute; top: 0; left: 312px; }
    
    .badges{ float: right; width: 370px; padding: 28px 0 0 0; }
      .badges a{ float: left; width: 95px; height: 136px; margin: 0 28px 28px 0; font-size: 9px; text-align: center; }
      .badges a:link,
      .badges a:visited{ color: #343434; }
      .badges a:focus,
      .badges a:hover{ text-decoration: none; color: #184666; }
      .badges img{ display: block; margin-bottom: 8px; }
    
    #work #secondary{ margin: 0; padding: 0; border-bottom: none; }
      #work #secondary .hr{ margin: 0; }
    
    #tertiary:after{ content: "."; display: block; height: 0; line-height: 0; font-size: 0; clear: both; min-height: 0; visibility: hidden; }
    #work #tertiary{ padding: 1px 0 1.5em 0; background: url(../images/layout/1px-solid-efefef.png) 50% 0 repeat-y; }
      
      #work .blogPromo{}
        #work .blogPromo h3{ font-size: 16px; margin-bottom: 14px; }
        #work .blogPromo p { margin: 1em 0; }
      
      #work .labsPromo{ background: url(../images/layout/work-labs.png) 100% 14px no-repeat; float: right !important; margin: 0 !important; padding: 0 28px 14px 0; }
        #work .labsPromo p{ width: 362px; font-size: 16px; margin-left: 14px; }
        #work .labsPromo p.CTA{ font-size: 12px; }

/* !Blog */

#blog{}
  
  #blog #mainContent{ background: url(../images/layout/inner-nav.png) 0 0 repeat-y; padding-top: 0; }
    
    #innerNav{ width: 179px; margin-left: 0; padding: 0 27px 28px 27px; color: #353535; font-size: 11px; line-height: 1.909090; position: relative; }
      
      #blog #innerNav h2{ margin: 0; height: 112px; width: 188px; margin: 0; background: url(../images/layout/blog-heading.png) -28px 0 no-repeat; text-indent: -9999px; overflow: hidden; }
      
      #innerNav h3{ margin: 2em -27px 1em -27px; padding: 2.5em 27px 0 27px; border-top: 1px solid #ccc6b0; text-transform: uppercase; font-size: 11px; letter-spacing: 2px; color: #353535; }
      #innerNav p{ margin-top: .75em; }
      
      #innerNav .feed{ position: absolute; top: 55px; left: 122px; margin: 0; width: 22px; height: 22px; }
        #innerNav .feed a{ display: block; height: 22px; background: url(../images/icons/feed.png); text-indent: -9999px; }
      
      #innerNav label{ display: block; margin: 1em 0 .25em 0; }
      
      #innerNav input[type="text"]{ float: left; width: 116px; margin: 0 4px 0 0; padding: 5px 4px; border: 1px solid #ccc6b0; color: #777; line-height: 1; }
      #innerNav input[type="text"]:focus{ border-color: #a39e8d; color: #343434; }
      
      #innerNav input[type="submit"]{ float: left; margin: 1px 0 0 0; padding: 4px 12px; background: #184666; height: 23px; line-height: 1; color: #fff; text-transform: uppercase; border: none; font-size: 11px; font-weight: bold; cursor: pointer;
                        /* CSS3 */
                        border-radius:         5px;
                        -webkit-border-radius: 5px;
                        -moz-border-radius:    5px;
                        -o-border-radius:      5px;
                        -khtml-border-radius:  5px;
                      }
      
      .response{ margin: 1em 0; font-weight: bold; }
    
    #blog #primary{ padding: 28px 0 28px 28px; }
      
      #blog .article{ border-bottom: 1px solid #efefef; padding-bottom: 1em; margin-bottom: 2em; }
      
      #blog .article .header h2{ font-size: 24px; margin: 1em 0 0 0; }
        #blog .article .header{}
          #blog .article .header h1{ font-size: 24px; line-height: 1; letter-spacing: 1px; margin: 1em 0 0 0; }
          #blog #primary h2 a:link,
          #blog #primary h2 a:visited{ text-decoration: none; color: #343434; }
        #blog .article .header p{ margin-top: .75em; font-family: Georgia, serif; font-style: italic; color: #777; }
        
        .article h2{ color: #343434; margin: 3em 0 0 0; }
        .article h3{ font-size: 11px; margin: 4em 0 0 0; text-transform: uppercase; letter-spacing: 2px; color: #343434; }
        .article blockquote{ border-left: 14px solid #efefef; padding-left: 14px; margin-left: 30px; }
        .article ul li{ margin: 0 0 .5em 42px; padding: 0 0 0 16px; background: url(../images/icons/bullet.png) 0 .7em no-repeat; }
        .article ol li{ margin: 0 0 .5em 58px; list-style: decimal; }
        .article table{ margin: 1.5em 0 0 0; width: 100%; border-collapse: collapse; border-left: 1px solid #efefef; }
          .article table td,
          .article table th{ padding: 12px; border-bottom: 1px solid #efefef; vertical-align: top; }
          .article table th{ background: #efefef; text-align: left; text-transform: uppercase; font-size: 11px; letter-spacing: 2px; }
          .article table tr th:first-child{ text-align: right; }
        .caption{ font-family: Georgia, serif; font-style: italic; font-size: 12px; color: #777; text-align: right; }
        
          .commentsCount a{ padding: 6px 18px; background: #efefef; font-size: 11px; text-transform: uppercase;
                            /* CSS3 */
                            border-radius:         5px;
                            -webkit-border-radius: 5px;
                            -moz-border-radius:    5px;
                            -o-border-radius:      5px;
                            -khtml-border-radius:  5px;
                          }
        .pagination{ margin: 3em 0; font-weight: bold; }
          .pagination li{ margin: 0; }
          .pagination .newer{ float: left;  }
          .pagination .older{ float: right; }
        
        .comments{ margin-bottom: 4em; }
          .comments li{ background: #f1f1f1; margin: 1.5em 0; padding: 2px 22px;
                        /* CSS 3 */
                        border-radius:         8px;
                        -webkit-border-radius: 8px;
                        -moz-border-radius:    8px;
                        -o-border-radius:      8px;
                        -khtml-border-radius:  8px;   
                        
                     }
          .comments .footer{ font-family: Georgia, serif; font-style: italic; }
        
        #cpreview{ padding: 1px 28px; background: #ffffbf; }
        
        input#name, input#email, input#web, textarea#message{ padding: 4px; float: left; width: 357px; }
        textarea#message{ width: 435px; height: 12em; }
          #txpCommentInputForm label{ text-align: right; margin-top: .5em; margin-right: 28px; width: 100px; }
          #txpCommentInputForm .formHint{ clear: both; margin: 0; padding: 1em 0 1em 128px; }
            #txpCommentInputForm .formHint label{ width: auto; float: none; display: inline; margin: 0; }
          #blog .uniForm .inlineLabels .buttonHolder{ padding-left: 128px; }
                #blog .uniForm .inlineLabels .buttonHolder input.button{}
        p#txpCommentInputForm{ font-weight: bold; }
        
/* !Contact */

#contact{}

  #contact #mainContent{ padding-bottom: 42px; }

  #contact .intro{}
    #contact .intro h1{ font-size: 36px; text-align: right; margin-top: -4px; line-height: .75; }

#contact .keyValue{ margin: 3em 0; border-top: 1px solid #efefef; }
  #contact .keyValue dt,
  #contact .keyValue dd{ padding: 1em 0; }
  #contact .keyValue dt{ width: 234px; padding: 17px 0;  }
  #contact .keyValue dd{ padding-left: 262px; border-bottom: 1px solid #efefef; }
    #contact .keyValue dd.phone strong  { font-size: 16px; color: #e15d28; display: block; margin-top: -.15em; }
    #contact .keyValue dd.address{ font-weight: bold; font-size: 16px; }

  #contact .uniForm .inlineLabels label{ width: 234px; margin-top: .5em; margin-right: 28px; text-align: right; }
  #contact .uniForm .inlineLabels input.zemText,
  #contact .uniForm .inlineLabels textarea{ width: 499px; float: left; }
  #contact .uniForm .inlineLabels textarea{ height: 14em; }
  #contact .uniForm .inlineLabels .buttonHolder{ padding-left: 262px; }
  
  /* Errors */
  
  .error{}
  .messages{ margin: 0; }
    .zemError li,
    .messages li{ font-size: 11px; background: #f9dbdb; padding: 5px 10px; margin: 5px 0; }
    #contact .zemError li{ margin-left: 262px; width: 498px; }
    #services .messages li{ margin: 0 0 0 205px; border-bottom: 1px solid #dfc5c6; }
    
    .error input.zemText,
    .error textarea{ margin: 0; }

/* !Uni-Form */

.uniForm .textInput,
.uniForm input.zemText,
input#name, input#email, input#web,
.uniForm textarea{ background: #efefef; border: 1px solid #efefef; padding: 8px; }

.uniForm .textInput:focus,
.uniForm input.zemText:focus,
input#name:focus, input#email:focus, input#web:focus,
.uniForm textarea:focus{ border: 1px solid #888; background: #efefef; outline: none; }

.uniForm .inlineLabels .buttonHolder{ padding: 1em 0 0 204px; }
  .buttonHolder button,
  .buttonHolder input.button{ float: left; margin: 0 14px 0 0; padding: 10px 18px; background: #184666; line-height: 1; color: #fff; text-transform: uppercase; border: none; font-size: 12px; font-weight: bold; cursor: pointer;
                              /* CSS3 */
                              border-radius:         5px;
                              -webkit-border-radius: 5px;
                              -moz-border-radius:    5px;
                              -o-border-radius:      5px;
                              -khtml-border-radius:  5px;
                            }
  .buttonHolder input.disabled{ background: #efefef; color: #999; cursor: default; text-shadow: 1px 1px 0 #fff; }
  .buttonHolder button:active,
  .buttonHolder input.button:active{ position: relative; top: 1px; }
  .buttonHolder input.disabled:active{ position: static; }
  .uniForm .buttonHolder .secondaryAction{ float: right; }
.uniForm .buttonHolder:after{ content: "."; display: block; height: 0; line-height: 0; font-size: 0; clear: both; min-height: 0; visibility: hidden; }