/* http://meyerweb.com/eric/tools/css/reset/
----------------------------------------------------------------------------------------- */
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-type : none; }
:focus { outline : 0 } 
ins { text-decoration : none; }
del { text-decoration : line-through }

body  { 
  font: 12px/1.5 "Lucida Grande", Tahoma, serif;
  overflow: hidden;
  text-align: center;
}

#stage  { 
  position: relative;
  display: inline-block;
  padding: 40px 20px;
  max-width: 90%;
  text-align: left;
}

.no-text-shadow { text-shadow: none }
.no-drop-shadow {}
.hidden         { display: none }
.visible        { opacity: 1; display: static }
.centered       { text-align: center; margin: 0 auto }

h1    { font-size: 3.6em }
h2    { font-size: 3.2em }
h3    { font-size: 3em }
p, li { font-size: 1.4em }
p     { margin: 0.5em 0 }

ul    { display: inline-block; margin-left: 2em }

#stage > * { text-rendering: optimizeLegibility }
a          { cursor: pointer }

@media all and (min-width: 480px)   { #stage  { font-size: 80% } }
@media all and (min-width: 640px)   { #stage  { font-size: 100% } }
@media all and (min-width: 800px)   { #stage  { font-size: 130% } }
@media all and (min-width: 1024px)  { #stage  { font-size: 160% } }
@media all and (min-width: 1280px)  { #stage  { font-size: 180% } }