/**
 *    Filename:     page.css
 *    Description:  Global Page CSS
 *    Website:      Michael Brummer
 *    Author:       Alexander Vey <this.vey@gmail.com>
 *    Version:      1.0 (2009-07-18)
 *                  1.1 (2010-01-06)
 *--------------------------------------------------------------------*/


/**
 * Reset
 *--------------------------------------------------------------------*/
* { margin:0; padding:0; }
html,body { height:100%; }
body { background:#fff; }
body, textarea, input, select {
  font-family:"Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
  font-size:13px;
  line-height:1;
}


/**
 * Helper Classes
 *--------------------------------------------------------------------*/
.fleft { float:left; }
.fright { float:right; }
.rnd5Top { -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; }


/**
 * Links
 *--------------------------------------------------------------------*/
a, a:visited { color:#FFF; text-decoration:none; cursor:pointer; }
a:hover { color:#FFF; text-decoration:underline; }
a:active, a:focus { outline:none; -moz-outline-style:none; }


/**
 * Body
 *--------------------------------------------------------------------*/
body { background:#191919 url('../images/background.png') scroll 0 0 no-repeat; color:#CCC; font-size:0.75em; font-family:"Lucida Grande",Helvetica,Verdana,Arial,sans-serif; height:100%; min-height:470px; min-width:600px; }


/**
 * Page
 *--------------------------------------------------------------------*/
#page { min-height:100%; }


/**
 * Footer
 *--------------------------------------------------------------------*/
#footer { bottom:0; left:50%; margin:0 -300px; position:fixed !important; width:600px; z-index:10005; }
  #footer .buttons { margin:0 auto; text-align:center; width:100%; }
  #footer button { background:#000; border:0; color:#ECE9D8; cursor:pointer; font-size:24px; padding:5px 8px; }
  #footer button.hover { background:#AFADA2; color:#191919; }

/**
 * Background
 *--------------------------------------------------------------------*/
#background { height:100%; left:0; position:absolute; top:0; width:100%; overflow:hidden; }
  #background div { background:transparent url('../images/background-title.png') scroll 0 0 no-repeat; display:block; height:50px; position:absolute; width:500px; }
	#background div.title0 { background-position:0 0; }
	#background div.title1 { background-position:0 -50; }
	#background div.title2 { background-position:0 -100; }
	#background div.title3 { background-position:0 -150; }
	#background div.title4 { background-position:0 -200; }
	#background div.title5 { background-position:0 -250; }

 
/**
 * Play
 *--------------------------------------------------------------------*/
#play { height:300px; left:50%; margin-left:-200px; margin-top:-100px; position:absolute; top:50%; width:400px; }


/**
 * Play/Pause-Button
 *--------------------------------------------------------------------*/
#playbutton { background:transparent url('../images/playbutton.png') no-repeat scroll 0 0; cursor:pointer; height:200px; width:400px; }
	#playbutton.hover { background-position:0 -200px; }
	#playbutton.active { background-position:0 -400px; }
	#playbutton.active.hover { background-position:0 -600px; }


/**
 * Playerbar
 *--------------------------------------------------------------------*/
#playerbar { display:none; height:100px; width:400px; }
#play_time, #total_time { color:#ECE9D8; display:block; height:20px; line-height:20px; text-align:center; width:50px; }


/**
 * Playerprogress Bar
 *--------------------------------------------------------------------*/
#player_progress_bar { background:#FFF; float:left; height:20px; width:300px; }
#player_progress_load_bar { background:#ECE9D8; cursor:pointer; height:20px; width:300px: }
#player_progress_play_bar { background:#AFADA2; height:20px; width:300px: }


/**
 * Overlayer
 *--------------------------------------------------------------------*/
.overlay { background-image:url(../images/overlayer.png); display:none; font-size:14px; height:480px; line-height:20px; width:640px; }
  .overlay .close {  }
  .overlay .text { height:310px; margin:50px; }
  .overlay h2 { color:#ECE9D8; font-size:24px; margin-bottom:20px; }
  .overlay p { margin-bottom:20px; }