/* RESET CSS */

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, 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-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

/* remember to define focus styles! */ 
:focus { outline: 0; }

body { line-height: 1; color: black; background: white; }
ol, ul { list-style: none; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }


    /* Main */
    div#Album { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; z-index: 1; }
    div#Album ul { width: 100%; overflow: hidden; position: relative; z-index: 2; height: 100%; }
    div#Album ul li { width: 100%; position: absolute; top: 0; bottom: 0; display: none; }
    div#Album ul li.current_track { display: block; z-index: 40; }
    div#Album ul li.next_track { display: block; z-index: 30; }
    div#Album ul li img, div#Album ul li h2 { position: absolute; left: 0; top: 0; width: 100%; }
     div#Album ul li h2 { height: 342px; background-position: top center; background-color: transparent; background-repeat: no-repeat; text-indent: -9999em; }
     div#Album ul li a { display: none; }
     div#Album ul li a.why { position: absolute; display: block; right: 18px; top: 17px; width: 96px; height: 0; padding: 96px 0 0; opacity: 0.4; overflow: hidden; background: transparent url(../img/why-hover.png) no-repeat top left; -webkit-transition: opacity 0.2s ease-in; -moz-transition: opacity 0.2s ease-in; -o-transition: opacity 0.2s ease-in; }
    div#Album ul li a.why:hover { opacity: 1; } div#Album.paused ul li div.loading_indicator { display: none; }
    div#Album ul li div.loading_indicator { position: absolute; top: 18px; left: 50%; z-index: 100; }
     div#Album ul li div.loading_indicator span { display: block; position: relative; left: -225px; width: 450px; text-align: center; padding: 9px 0; background-color: #000; color: #fff; font-weight: bold; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-border-radius: 18px; }

    div#Album ul li#song_01 h2 { background-image: url(//john-bacon.com/misc/bestof/2009/img/text/01.png); }
    div#Album ul li#song_02 h2 { background-image: url(//john-bacon.com/misc/bestof/2009/img/text/02.png); }
    div#Album ul li#song_03 h2 { background-image: url(//john-bacon.com/misc/bestof/2009/img/text/03.png); }
    div#Album ul li#song_04 h2 { background-image: url(//john-bacon.com/misc/bestof/2009/img/text/04.png); }
    div#Album ul li#song_05 h2 { background-image: url(//john-bacon.com/misc/bestof/2009/img/text/05.png); }
    div#Album ul li#song_06 h2 { background-image: url(//john-bacon.com/misc/bestof/2009/img/text/06.png); }
    div#Album ul li#song_07 h2 { background-image: url(//john-bacon.com/misc/bestof/2009/img/text/07.png); }
    div#Album ul li#song_08 h2 { background-image: url(//john-bacon.com/misc/bestof/2009/img/text/08.png); }
    div#Album ul li#song_09 h2 { background-image: url(//john-bacon.com/misc/bestof/2009/img/text/09.png); }
    div#Album ul li#song_10 h2 { background-image: url(//john-bacon.com/misc/bestof/2009/img/text/10.png); }
    div#Album ul li#song_11 h2 { background-image: url(//john-bacon.com/misc/bestof/2009/img/text/11.png); }
    div#Album ul li#song_12 h2 { background-image: url(//john-bacon.com/misc/bestof/2009/img/text/12.png); }
    div#Album ul li#song_13 h2 { background-image: url(//john-bacon.com/misc/bestof/2009/img/text/13.png); }
    div#Album ul li#song_14 h2 { background-image: url(//john-bacon.com/misc/bestof/2009/img/text/14.png); }
    div#Album ul li#song_15 h2 { background-image: url(//john-bacon.com/misc/bestof/2009/img/text/15.png); }
    div#Album ul li#song_16 h2 { background-image: url(//john-bacon.com/misc/bestof/2009/img/text/16.png); }
    div#Album ul li#song_17 h2 { background-image: url(//john-bacon.com/misc/bestof/2009/img/text/17.png); }
    div#Album ul li#song_18 h2 { background-image: url(//john-bacon.com/misc/bestof/2009/img/text/18.png); }
    div#Album ul li#song_19 h2 { background-image: url(//john-bacon.com/misc/bestof/2009/img/text/19.png); }
    div#Album ul li#song_20 h2 { background-image: url(//john-bacon.com/misc/bestof/2009/img/text/20.png); }

    div#PrevTrack, div#NextTrack { position: absolute; z-index: 50; top: 198px; height: 186px; }
    div#PrevTrack { left: 0; }
    div#NextTrack { right: 0; }
    div#PrevTrack, div#PrevTrack a, div#NextTrack, div#NextTrack a { display: block; width: 78px; overflow: hidden; }
    div#PrevTrack a, div#NextTrack a { padding: 186px 0 0; height: 0; -webkit-transition: opacity 0.2s ease-in; opacity: 0.1; }
    div#PrevTrack a:hover, div#NextTrack a:hover { opacity: 0.4; }
    div#PrevTrack a { background: transparent url(../img/left.png) no-repeat left center; }
    div#NextTrack a { background: transparent url(../img/right.png) no-repeat right center; }

    div#PlayPause { position: absolute; left: 50%; top: 360px; height: 148px; z-index: 60; }
    div#PlayPause a { position: relative; display: block; left: -69px; width: 138px; height: 0; padding: 148px 0 0; overflow: hidden; background-position: top left; background-color: transparent; background-repeat: no-repeat; opacity: 0.4; -webkit-transition: opacity 0.2s ease-in; }
    div#PlayPause a:hover { opacity: 1; }

    div#Album.paused div#PlayPause a { background-image: url(//john-bacon.com/misc/bestof/2009/img/play-hover.png); }
    div#Album.playing div#PlayPause a { background-image: url(//john-bacon.com/misc/bestof/2009/img/pause-hover.png); }

    form#Volume { position: absolute; bottom: 0; height: 27px; text-align: right; z-index: 60; right: -148px; padding: 3px 0 0 36px; -webkit-border-top-left-radius: 18px; background-color: #000; background-repeat: no-repeat; background-position: 12px 50%; opacity: 1; -webkit-transition: right 0.2s ease-in; }
    form#Volume:hover { opacity: 1; right: 0; }
    form#Volume.volume_mute { background-image: url(//john-bacon.com/misc/bestof/2009/img/volume-0.png); }
    form#Volume.volume_1 { background-image: url(//john-bacon.com/misc/bestof/2009/img/volume-1.png); }
    form#Volume.volume_2 { background-image: url(//john-bacon.com/misc/bestof/2009/img/volume-2.png); }
    form#Volume.volume_3 { background-image: url(//john-bacon.com/misc/bestof/2009/img/volume-3.png); }
    form#Volume div { height: 27px; text-align: right; float: right; padding: 0 9px; background-color: #999; width: 130px; }
    form#Volume input[type=range] { margin: 8px auto 0; }

    div#DebugDiv { display: none; width: 450px; overflow: auto; text-align: left; height: 300px; background-color: #fff; color: #000; z-index: 70; left: 0; bottom: 0; position: absolute; }