/* 
   horiçon
   http://augmatic.org/horicon/
   © philipp brunner 2010 
*/

/* body
-------------------------------------------------------------------*/
html, body, form, textarea, input, button, select, legend, h1, h2, h3, h4, h5, h6, p, ol, ul, table, td, th { font-family: Arial, Helvetica, sans-serif; margin:0; padding:0; }
html { overflow-y:scroll; }
body { font-size:62.5%; background-color:#000000; }
body #horizon { background-repeat: repeat-x; background-position: 0 0; min-height: 720px; }
/* sections
-------------------------------------------------------------------*/
/* header */
#header { background-color: #000; padding: .8em 0 .6em; color: #FFF; width: 100%; }
#header h1 { float: left; width: auto; }
#header ul#snav { position: absolute; top: 0.8em; left: 170px; width: auto; margin: 0 0 0 3em; list-style-type: none; padding: 0; }
#header ul#snav li { float: left; }
#header p#copy { float: right; width: auto; margin: 0 .8em 0 0; }
/* horiçon viewport */
#horizon { position: relative; }
#horizon img.horicon { display: none; visibility: hidden; }
#text { position: absolute; top: -999em; left: 0; background: url(gfx/bg-text.png) 0 0 repeat; border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; width: 100%; }
#text .preview { display: none; visibility: hidden; }
body#home #text { position: static; }
#text .inner { padding: 1em .8em; }
.js #text {padding-top: 1.6em; }
p.closer { position: absolute; top: 0; left: .8em; text-indent: -999em; }
p.closer a { display: block; background: url(gfx/closer.gif) 0 0 no-repeat; width: 14px; height: 14px; }
p.closer a:hover, p.closer a:focus { background-color: #000; background-image: none; }
/* navigation
-------------------------------------------------------------------*/
#menu { background: url(gfx/bg-menu.png) 0 0 repeat; position: absolute; top: 0; left: 0; border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; width: 100%; display: none; visibility: hidden; }
body#home #menu { position: static; display: block; visibility: visible; border-bottom: none; }
body .js #menu { display: block; visibility: visible; padding-top: 12px; }
#menu ul { list-style-type: none; height:auto; padding: 8px .8em; }
#menu ul li { float: left; margin: 0 .4em .4em 0; }
#menu ul li a { display: block; width: 70px; height: 38px; text-indent: -999em; margin: 2px; background-repeat: repeat-x; background-position: 0 0; }
#menu ul li a:hover, #menu ul li a:focus, #menu ul li a:active { border: 2px solid #FFF; margin: 0; }
#horizon .on { top: 0; }
.snav { text-indent: -999em; display: block; background: url(gfx/icon-m.gif) 0 0 no-repeat; height: 12px; width: 12px; margin: 1px 5px 0 0; }
.snav:hover, .snav:focus { background-position: -36px 0; }
.up { }
.text { background-position: -12px 0; display: none; visibility: hidden; }
.menu { background-position: -24px 0; display: none; visibility: hidden; }
#header .js { display: block; visibility: visible; }
/* typography
-------------------------------------------------------------------*/
h1 { font-size: 1.2em; color: #FFF; font-weight: normal; margin: 0 0 0 .8em; }
h2 { font-size: 1.6em; font-weight: normal; margin: .5em 0 .8em 0; }
p { font-size: 1.2em; line-height: 1.5; margin: 0 0 .6em 0; }
#header p { line-height: normal; }
a { color: #FFF; text-decoration: none; }
a:hover, a:focus, a:active { color: #000; }
/* etc
-------------------------------------------------------------------*/
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clear{ clear: both; }