/* Meyer's Browser Default Reset (http://meyerweb.com/eric/tools/css/reset/) - v1.0 | 20080212 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } header,footer,section,aside,nav,article { display:block; }
body { background:#ddd; color:#777; cursor:default; font-family:Helvetica Neue,Helvetica,sans-serif; text-shadow:#eee 0px 1px 0px; }
/* Scroll Bars for Webkit */
::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment { display: block; height: 10px; } ::-webkit-scrollbar-button:vertical:increment { background-color: #fff; } ::-webkit-scrollbar-track-piece { background-color: #eee; -webkit-border-radius: 3px; } ::-webkit-scrollbar-thumb:vertical { height: 50px; background-color: #aaa; -webkit-border-radius: 3px; } ::-webkit-scrollbar-thumb:horizontal { width: 50px; background-color: #aaa; -webkit-border-radius: 3px; }
/* General Typography */
#top { display:none; }
a { color:#000; text-decoration:none; }
/* Helvetica Neue 'hn' */
@font-face { font-family:"hn"; src:local('☺'),url(fonts/HelveticaNeue.ttc); }
/* Layout */
header { margin:0 auto; overflow:hidden; padding:0 0 0 30px; width:670px; }
  header h1 { background:#b71600; box-shadow:0px 0px 8px rgba(0,0,0,0.3); color:#fefefe; float:left; font-size:100px; font-weight:100; height:100%; left:50%; letter-spacing:1px; margin:0 0 0 -213px; padding:0 10px; position:absolute; text-shadow:#5F110C 0px 2px 0px; width:425px; z-index:1; }
  header h2 { color:#444; float:right; font-size:14px; font-weight:300; line-height:200%; margin:35px 10px 0 5px; }
    header h2 a { margin:0/* 21px 0 0*/; }
      header h2 a:hover { background:#eee; border-bottom:1px solid #ccc; border-radius:3px; border-right:1px solid #ccc; margin:-3px -4px -3px -3px; padding:3px; position:relative; }
      header h2 a:active,a:focus { border:0; border-left:1px solid #ccc; border-top:1px solid #ccc; }
    header h2.right-justify { float:left; text-align:right; }
  header h3 { color:#444; float:left; font-size:14px; font-weight:300; line-height:200%; }
#main { background:#fefefe; border-radius:3px; box-shadow:0px 0px 8px rgba(0,0,0,0.3); clear:left; left:50%; margin:0 0 10px -335px; padding:20px 20px 0 20px; position:absolute; top:110px; width:650px; z-index:3; }
  article { padding:0 0 20px 0; }
    article h1 { background:#b71600; border-radius:3px; box-shadow:0px 0px 5px rgba(0,0,0,0.5); color:#fefefe; float:left; line-height:30px; margin:0 0 0 -40px; padding:0 10px; text-shadow:#5F110C 0px 1px 0px; z-index:3; }
    article h1+p { margin:40px 0 5px 0; }
    article p { font-weight:300; line-height:150%; margin:15px 0 5px 0;}
    article ul { font-weight:300; line-height:150%; }
    article span { font-weight:400; font-size:11px; font-style:italic; }
    article a:active, article a:focus { position:relative; top:1px; }
    article code { font-family:Monaco,monospace; font-size:13px; }
    article .triangle { border-color:transparent #b71600 transparent transparent; border-style:solid; border-width:20px; display:block; height:0px; margin: 5px 0 -48px -60px; width:0px; z-index:2; }
  footer { margin:0 0 -20px 0; }
    footer p { font-size:10px; margin:0 0 0 -10px; }
#demos { color:#333333; position:relative; width:88px; }
  #demos p { border-bottom:1px solid #333; }
  #demos ul { background-color:rgba(0,0,0,0.5); box-shadow:0 0 5px rgba(0,0,0,0.5); border-radius:3px; display:none; font-family:'Lucida Grande',sans-serif; padding:3px 0; position:absolute; left:105%; top:0; }
    #demos ul li { color:#eee; font-size:11px; padding:0 20px; text-shadow:#111 0 1px 0; }
      #demos ul li:hover { background-color:rgba(255,255,255,0.7); color:#333; text-shadow:#fff 0 1px 0; }
.demo-box { background-color:rgba(0,0,0,1); border-radius:10px; box-shadow:#000 0 0 5px; color:#fff; display:none; left:50%; line-height:150%; margin-left:-290px; padding:50px; position:absolute; text-shadow:#000 0 1px 0; top:200px; width:500px; z-index:10; }
  .demo-box img { float:left; margin-right:30px; width:150px;
                    -webkit-box-reflect:below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(rgba(0,0,0,0.5))); }
  .demo-box .title { display:block; font-size:20px; }
  .demo-box .source { display:block; font-size:14px; }
  .demo-box audio { box-shadow:rgba(255,255,255,0.5) 0 0 10px; display:inline; margin:10px 0; width:320px; }
  .demo-box video { box-shadow:rgba(255,255,255,0.5) 0 0 10px; display:block; margin:10px 0; width:500px; }
  .demo-box .close { color:#ccc; font-size:40px; position:absolute; right:-25px; top:-25px; }
  .demo-box .close:before { content:'\2297'; }
  .demo-box .close:active { top:-24px; }