/*
  === 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;
}


/*
  === ELEMENTS ===
*/

body {
  text-align: center;
  background: #3b0b00 url(gfx/bg.png) repeat 50% 0;
  color: #fff;
  font-family: "Trbuchet MS", verdana, sans-serif;
  font-size: 12px;
  line-height: 1.2;
}

a {
  text-decoration: none;
  color: #fff;
}

#margin {
  width: 100%;
  background: transparent url(gfx/bg_grad.png) repeat-x 50% 0;  
}

#wrapper {
  width: 940px;
  height: 790px;
  margin: 0 auto;
  text-align: left;
  position: relative;
}

#tracks {
  width: 385px;
  position: absolute;
  top: 43px;
  left: 0;
  list-style: none;
}
#tracks a {
  background: transparent url(gfx/tracks.png) no-repeat 0 0;
}

#t1 a { height: 65px; background-position: 0 0; }
#t2 a { height: 65px; background-position: 0 -65px; }
#t3 a { height: 65px; background-position: 0 -130px; }
#t4 a { height: 65px; background-position: 0 -195px; }
#t5 a { height: 65px; background-position: 0 -260px; }
#t6 a { height: 65px; background-position: 0 -325px; }
#t7 a { height: 90px; background-position: 0 -390px; }
#t8 a { height: 90px; background-position: 0 -480px; }
#t9 a { height: 90px; background-position: 0 -570px; }

#t1 a:hover, #t1 a:active { background-position: -385px 0; }
#t2 a:hover, #t2 a:active { background-position: -385px -65px; }
#t3 a:hover, #t3 a:active { background-position: -385px -130px; }
#t4 a:hover, #t4 a:active { background-position: -385px -195px; }
#t5 a:hover, #t5 a:active { background-position: -385px -260px; }
#t6 a:hover, #t6 a:active { background-position: -385px -325px; }
#t7 a:hover, #t7 a:active { background-position: -385px -390px; }
#t8 a:hover, #t8 a:active { background-position: -385px -480px; }
#t9 a:hover, #t9 a:active { background-position: -385px -570px; }


#credits {
  width: 340px;
  position: absolute;
  top: 43px;
  left: 600px;
  list-style: none;
}
#credits a {
  background: transparent url(gfx/credits.png) no-repeat 0 0;
  cursor: default;
}

#c1 a { height: 95px; background-position: 0 0; }
#c2 a { height: 120px; background-position: 0 -95px; }

#c1 a:hover, #c1 a:active { background-position: -340px 0; }
#c2 a:hover, #c2 a:active { background-position: -340px -95px; }


#enter a,
#tracks a,
#credits a {
  display: block;
  text-indent: -999px;
  text-decoration: none;
  overflow: hidden;
}


#additions {
  position: absolute;
  right: 0;
  top: 305px;
  text-align: right;
}
#additions p { margin-bottom: 1em; }
#additions p#links, #additions p#links a { color: #74554e; }
#additions p#links a:hover, #additions p#links a:active { color: #fff; }
#additions p#download a { color: #fff; }
#additions p#download a:hover, #additions p#download a:active { color: #74554e; }


.hide {
  position: absolute;
  top: -1000em;
  left: -1000em;
  height: 0;
  width: 0;
}



/*
  === ELEMENTS / HOME ===
*/

body.index {
  background-image: url(gfx/bgIndex.png);
  background-color: #071728;
}

.index #wrapper {
  width: 680px;
  height: 790px;
  margin: 0 auto;
}

.index #margin {
  background-image: url(gfx/bgIndex_grad.png);  
}

#enter {
  position: absolute;
  left: 0;
  top: 287px;
}
#enter a {
  display: block;
  background: transparent url(gfx/enter.png) no-repeat 0 0;
  width: 680px;
}
#enter #e1 a { height: 84px; background-position: 0px 0; }
#enter #e2 a { height: 118px; background-position: 0px -84px; }


#enter #e1 a:hover, #enter #e1 a:active { background-position: -680px 0; }
#enter #e2 a:hover, #enter #e2 a:active { background-position: -680px -84px; }



/*
	=== HELPERS ===
*/
/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clear { display: inline-block; }   
.clear:after, .container:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
* html .clear { height: 1%; }
.clear { display: block; }