/*
|----------------------------------------------------------------------------------------|
| 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";
@import "../../../css/default.uni-form.css";

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 28, 2010 */
@font-face {
	font-family: 'RomeralRegular';
	src: url('romeral.eot');
	src: local('Romeral'), local('Romeral'), url('romeral.woff') format('woff'), url('romeral.otf') format('opentype');
}

/* !Generals */

html{ background: #bcc2c6 url(bg.png); }
  body{}
    #content{ position: relative; font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Verdana, sans-serif; text-shadow: 1px 1px 0 rgba(255,255,255,.35); }

/* !Global Float Clearing */
#mainContent:after,
  #header:after,
  #about:after,
    #styles ul:after,
  #external:after,
  .build:after,
    .build h3: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{ text-decoration: none; color: #254a86; }
a:hover,
a:focus  { text-decoration: underline; }
a:active {}

/* !Headings */

h1{ float: left; }
  h1 img{ display: block; }

h2{}

h3{}

#secondary h3{}

h4{}

/* !Header */
  
#header{ margin-bottom: 0; }
  
  #twitter{ float: right; margin: 35px 0 0 0; width: 228px; height: 40px; }
    #twitter a{ display: block; height: 40px; background: url(twitter.png); text-indent: -9999px; }

/* !Footer */

#footer{ margin: 28px auto; padding: 14px 0 0 0; border-top: 1px solid #979ca1; text-align: center; font-size: 11px; }

/* !Main Content */

#mainContent{}
  
  #about{ clear: both; }
  
  #about .cta{ background: rgba(0,0,0,.115);
        /* CSS3 */
        border-radius:         12px;
        -webkit-border-radius: 12px;
        -moz-border-radius:    12px;
        -o-border-radius:      12px;
        -khtml-border-radius:  12px;
      }
    #about .cta strong{ display: block; text-align: center; margin: 0 0 1.5em 0; }
    #about .cta .action{ display: block; text-align: center; margin: 0 56px 7px 56px; padding: 13px 0; line-height: 1; background: #254a86 url(button.png) 0 50% repeat-x; border: 1px solid #163362; font-size: 16px; font-weight: bold;
                         /* CSS3 */
                         border-radius:         22px;
                         -webkit-border-radius: 22px;
                         -moz-border-radius:    22px;
                         -o-border-radius:      22px;
                         -khtml-border-radius:  22px;
                         box-shadow:         1px 1px 0 rgba(255,255,255,.25);
                         -webkit-box-shadow: 1px 1px 0 rgba(255,255,255,.25);
                         -moz-box-shadow:    1px 1px 0 rgba(255,255,255,.25);
                       }
    #about .action:link,
    #about .action:visited{ color: #f4f4f4;
                            /* CSS3 */
                            text-shadow: -1px -1px 0 rgba(0,0,0,.25);
                          }
    #about .action:focus,
    #about .action:hover{ border-color: #0c1f3e;
                          /* CSS3 */
                          box-shadow:         0 0 9px rgba(0,163,255,1);
                          -webkit-box-shadow: 0 0 9px rgba(0,163,255,1);
                          -moz-box-shadow:    0 0 9px rgba(0,163,255,1);
                        }
    #about .action:active{ position: relative; top: 1px; }
      #about .action em{ font-style: normal; font-size: .75em; color: #999; }
    #about .cta span{ display: block; font-size: 12px; font-family: Georgia, Times New Roman, Times, serif; font-style: italic; color: #777; text-align: center; }
  
  #examples{ background: #fff; margin: 28px -28px; padding: 28px 28px;
             /* CSS3 */
             border-radius:         12px;
             -webkit-border-radius: 12px;
             -moz-border-radius:    12px;
             -o-border-radius:      12px;
             -khtml-border-radius:  12px;
           }
    #examples h2{ float: left; margin: 10px 0 0 0; font-size: 12px; font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Verdana, sans-serif; }
    #examples .nav{ float: right; margin: 0; font-size: 12px; }
      #examples .nav li{ float: right; margin: 0 0 0 7px; }
        #examples .nav a{ display: block; padding: 9px 14px;
                          /* CSS3 */
                          border-top-left-radius:          6px;
                          border-top-right-radius:         6px;
                          -webkit-border-top-left-radius:  6px;
                          -webkit-border-top-right-radius: 6px;
                          -moz-border-radius-topleft:      6px;
                          -moz-border-radius-topright:     6px;
                        }
        #examples .nav .active{ background: #dbe7f1; }
    #examples .content{ background: #efefef; clear: both; padding: 28px;
                        /* CSS3 */
                        border-bottom-left-radius:          4px;
                        border-bottom-right-radius:         4px;
                        -webkit-border-bottom-left-radius:  4px;
                        -webkit-border-bottom-right-radius: 4px;
                        -moz-border-radius-bottomleft:      4px;
                        -moz-border-radius-bottomright:     4px;
                      }
      .disclaimer{ background: #dbe7f1; padding: 28px; margin: -28px -28px 28px -28px; font-size: 12px; text-align: center; border-bottom: 1px solid #c4d2db; }

#builder{}

#styles{ padding: 28px 28px 1px 28px; margin: 28px -28px; background: rgba(0,0,0,.115);
         /* CSS3 */
         border-radius:         12px;
         -webkit-border-radius: 12px;
         -moz-border-radius:    12px;
         -o-border-radius:      12px;
         -khtml-border-radius:  12px;
       }
  #styles h2,
  #builder h2{ float: left; margin: 0 14px 0 0; font-family: "RomeralRegular", sans-serif; font-size: 24px; line-height: 1; padding: 0 22px 0 0; background: url(new.png) 100% 0 no-repeat; font-size: 28px; }
  #styles p.intro,
  #builder p.intro{ margin: 0 0 28px 0; }
  #styles ul{ margin: 28px 0 0 0; }
    #styles li{ float: left; width: 232px; height: 116px; margin: 0 0 28px 28px; position: relative; font-size: 11px; }
    #styles li:first-child{ margin-left: 0; }
      #styles li img{ display: block; }
      #styles li span{ position: absolute; bottom: 14px; left: 0; right: 0; padding: 7px 14px; background: rgba(0,0,0,.75); color: #aaa; text-shadow: none; }
        #styles li a:link,
        #styles li a:visited{ color: #efefef; }
  #styles .footer{ margin: 0 0 28px 0; font-size: 12px; color: #666; text-align: right; margin-left: 362px; }

#external{ position: relative; }
  #external p{ font-size: 10px; text-transform: uppercase; margin: -21px 0 0 0; color: #666; }
    #external ul{ font-size: 12px; }
      /* #external li{ margin: 0 0 14px 0; padding: 0 0 14px 0; border-bottom: 1px solid rgba(0,0,0,.15); } */
      #external li{ float: left; width: 232px; height: 87px; margin: 0 0 28px 28px; }
      #external li:nth-child(3n+1){ margin-left: 0; }
        #external ul strong,
        #external ul small{ display: block; position: relative; }
        #external ul strong em{ font-style: normal; font-size: 9px; text-transform: uppercase; position: absolute; top: 0; right: 0; padding: 2px 4px; cursor: default; color: #dfdfdf; text-shadow: none;
                                /* CSS3 */
                                border-radius:         4px;
                                -webkit-border-radius: 4px;
                                -moz-border-radius:    4px;
                                -o-border-radius:      4px;
                                -khtml-border-radius:  4px;
                              }
        .php       { background: #777bb4; }
        .coldFusion{ background: #285979; }
        .python    { background: #3773a5; }
        .ruby      { background: #ae0000; }
        .java      { background: #f40000; }
    #external .cta{ position: absolute; top: 0; right: 0; width: 284px; margin: 0; text-align: right; }
      #external .cta strong{ display: block; font-size: 12px; text-transform: none; }
      
      /* Some Uni–Form Overrides */
      
      .uniForm .ctrlHolder{ border: none; }
      #examples .uniForm .ctrlHolder.focused{ background: #e0dfe1; }
      .uniForm .buttonHolder{ padding: 14px 0 0 0; background: transparent; }
      
      #example-1 .uniForm .ctrlHolder label{ text-align: right; width: 11%; }
      #example-1 .uniForm .ctrlHolder .textInput,
      #example-1 .uniForm .ctrlHolder textarea{ width: 86%; }
      #example-1 .uniForm .buttonHolder{ margin: 0 2% 0 15%; }
      
      #example-2 .uniForm .buttonHolder{ margin: 0 46% 0 0; }
      
      #example-3 .uniForm .buttonHolder{ margin: 0 0 0 34%; text-align: left; }
      
      /* Ads */
      #example-1 .banner{ margin: 28px 0 14px 100px; }
      #example-2 .banner{ margin: 28px 0 14px 14px;  }
      #example-3 .banner{ margin: 28px 0 14px 0;     }
      .b-728x90{ width: 728px; height: 90px; margin: 28px auto; }

/* Builder */

.build{ margin: 28px -28px; padding: 1px 28px 28px 28px; background: url(builder-bg.png) 0 0 repeat-y;
        /* CSS3 */
        border-radius:         12px;
        -webkit-border-radius: 12px;
        -moz-border-radius:    12px;
        -o-border-radius:      12px;
        -khtml-border-radius:  12px;
      }
  .build h3{ margin: 35px 0 28px 0; padding: 14px; background: #f4f4f4; font-size: 18px; line-height: 1;
             /* CSS3 */
             border-radius:         4px;
             -webkit-border-radius: 4px;
             -moz-border-radius:    4px;
             -o-border-radius:      4px;
             -khtml-border-radius:  4px;
           }
    .build h3 span{ float: right; margin-top: .25em; font-size: 12px; font-weight: normal; }
  
  .build .nav{ padding: 35px 0 0 0; }
    .layout{ font-size: 12px; }
      .layout a{ padding: 4px 8px; }
      .layout a.active{ background: #1c3772; color: #fff;
                        /* CSS3 */
                        border-radius:         4px;
                        -webkit-border-radius: 4px;
                        -moz-border-radius:    4px;
                        -o-border-radius:      4px;
                        -khtml-border-radius:  4px;
                        text-shadow: -1px -1px 0 rgba(0,0,0,.25);
                      }
    .nav ul{}
      .nav li{}
      .nav li.break{ margin-top: 28px; }
        .build .nav li a{ display: block; padding: 4px 0; }
        .build .nav li a:hover{ margin: 0 -7px 0 0; padding-right: 8px; background: url(builder-hover.png) 100% 50% no-repeat; }
  
    .build .uniForm .ctrlHolder{ border-bottom: 1px solid #dfdfdf; }
    .noFields{ border: 1px solid #dfdfdf; padding: 14px; text-align: center; color: #777; font-size: 12px;
               /* CSS3 */
               border-radius:         12px;
               -webkit-border-radius: 12px;
               -moz-border-radius:    12px;
               -o-border-radius:      12px;
               -khtml-border-radius:  12px;
    }
      .build .uniForm .textInput:focus,
      .build .uniForm textarea:focus{ background: #fff; border-color: #555; }
      
      .build #codeFormHolder .uniForm textarea{ width: 99%; height: 400px; }