demo.css

/*  KEEP OUR CSS CLEAN
    Some guidelines to follow:
    1. Break code down into sections.
    2. Keep your rules alphabetically sorted.
    3. Only put one selector per line for a block of rules that apply to multiple selectors.
    4. Indent your rules, only one rule per line.
    5. Indent proprietary properties with two spaces. Keep these properties directly above the proposed property.
        
        example:
        
        element#id,
        element.class {
            rule1: value;
              -moz-rule2: value;
      -o-rule2: value;
      -webkit-rule2: value;
            rule2: value;
            top: value;
        }
*/

/*  =BOILERPLATE
  ------------------------------------------------------ */
  html, body, div, span, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
  small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, figcaption, figure,
  footer, header, hgroup, menu, nav, section, summary,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }

  article, aside, details, figcaption, figure,
  footer, header, hgroup, menu, nav, section {
    display: block;
  }

  blockquote, q { quotes: none; }
  blockquote:before, blockquote:after,
  q:before, q:after { content: ""; content: none; }
  ins { background-color: #ff9; color: #000; text-decoration: none; }
  mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
  del { text-decoration: line-through; }
  abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
  table { border-collapse: collapse; border-spacing: 0; }
  hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
  input, select { vertical-align: middle; }

  body { font:13px/1.231 sans-serif; *font-size:small; }
  select, input, textarea, button { font:99% sans-serif; }
  pre, code, kbd, samp { font-family: monospace, sans-serif; }

  html { overflow-y: scroll; }
  a:hover, a:active { outline: none; }
  ul, ol { margin-left: 2em; }
  ol { list-style-type: decimal; }
  nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
  small { font-size: 85%; }
  strong, th { font-weight: bold; }
  td { vertical-align: top; }
  sub, sup { font-size: 75%; line-height: 0; position: relative; }
  sup { top: -0.5em; }
  sub { bottom: -0.25em; }

  pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; }
  textarea { overflow: auto; } 
  .ie6 legend, .ie7 legend { margin-left: -7px; } 
  input[type="radio"] { vertical-align: text-bottom; }
  input[type="checkbox"] { vertical-align: bottom; }
  .ie7 input[type="checkbox"] { vertical-align: baseline; }
  .ie6 input { vertical-align: text-bottom; }
  label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
  button, input, select, textarea { margin: 0; }
  input:valid, textarea:valid   {  }
  input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
  .no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }


  ::-moz-selection{ background: rgba(0,0,0,0.15); }
  ::selection { background:rgba(0,0,0,0.15); color; }
  a:link { -webkit-tap-highlight-color: #FF5E99; }
  button {  width: auto; overflow: visible; }
  .ie7 img { -ms-interpolation-mode: bicubic; }

  body, select, input, textarea { color: #444; }
  h1, h2, h3, h4, h5, h6 { font-weight: bold; }
  a, a:active, a:visited { color: #607890; }
  a:hover { color: #036; }

/*  =HEADINGS
  ------------------------------------------------------ */
  h1, h2 {
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    text-align: center;
  }
  
  h1#sauce {
    color: #e35555;
    font-size: 14em;
    font-weight: normal;
    line-height: 1em;
    text-align: center;
    text-shadow: #d12727 1px 1px, #d12727 2px 2px, #d12727 3px 3px, #d12727 4px 4px, #d12727 5px 5px, #d12727 6px 6px, #d12727 7px 7px;
    top: 200px;
    z-index: 2;
  }
  
  h2#tagline {
    color: #78d64e;
    font-size: 3.5em;
    font-weight: normal;
    left: 50%;
    line-height: 1em;
    margin-left: -300px;
    right: auto;
    text-shadow: #5ab930 1px 1px, #5ab930 2px 2px, #5ab930 3px 3px;
    top: 400px;
    z-index: 2;
  }
/* =BODY
   ------------------------------------------------------ */
   body {
      background: #fff;
   }
   
/*  =TEST
  ------------------------------------------------------ */
  #test {
    background: #000;
    display: block;
    color: #fff;
    font: 1.5em "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
    line-height: 1em;
    left: 50%;
    margin: 0 0 0 -250px;
    padding: 20px;
    position: absolute;
    top: 50%;
    text-align: center;
    height: 20px;
    text-decoration: none;
    width: 500px;
    opacity:1; 
  }
 
  #branding {
     position: absolute;
     z-index: 0;
  }
  
 /* =COLORS
   ------------------------------------------------------ */
   #red,#blue {
      background: #f00;
      height: 100px;
      width: 100px;
   }
   
   #blue {
      background: #00f;
   }

/* =BOX
   ------------------------------------------------------ */
   .box,
   .altBox {
      background: rgba(255,0,0,.1);
      display: block;
      position: absolute;
   }
   
   .altBox {
      background: rgba(255,255,255,0.25);
   }