html, body {border:0;margin:0;padding:0;background:#000011;
    -webkit-transition: scrollTop 1s, scrollLeft 1s;
    transition: scrollTop 1s, scrollLeft 1s;
    overflow:hidden;
    font-family: 'Cabin Condensed', sans-serif;
}
body {width: 200%;}
.background-icon {height:200px; width:200px; background: center center;
                    opacity:0.7; margin: 20px auto;}
.loved-track {opacity:0.9;}
.hated-track {opacity:0.3;}
.playing-bg-track {opacity:1;}

.background-float {width:240px; height:240px; float:left;}

#playing-float-wrapper {width:100%; position:fixed; top:20px;}
#playing-float {width: 400px; margin:20px auto; background: #000011; color:#EEEEFF;
                    opacity:0.95;}
#nowplaying-icon {width:400px;height:400px;}


.controls-row > div {display:inline-block; background:rgba(0,0,10,0.4); 
color:rgba(200,200,225,0.7); font-size:30px; width:132px;text-align:center;
border-right:1px solid rgba(0,0,0,0.5);line-height:40px;height:40px;}
.controls-row > div:last-child {border-right:0;width:134px;}
#playstate.pause .icon-play {display:none;}
#playstate.play .icon-pause {display:none;}

#scrubber-wrapper {width:400px;height:10px;padding-top: 350px;}
#scrubber {width:400px;height:10px;clear:both;
            border-top:1px solid rgba(0,0,30,0.3);}
#scrubber-inner {background:rgba(120,120,140, 0.9);height:10px;
    -webkit-transition: width 900ms;
    transition: width 900ms;
    width:0;
}

#playing-float-wrapper .song-title {font-size:140%;padding:5px 20px 0;}
#playing-float-wrapper .artist-name {font-size:120%;padding:0 20px 5px;}
.thumbs-up, .thumbs-down {width:140px;display:inline-block;
    font-size: 65px;line-height:70px;text-align:center; height:70px; padding:30px;
    color:rgba(255,255,255,0.5);}
.thumbs-up {background: rgba(0,50,0,0.7);}
.thumbs-down {background: rgba(50,0,0,0.7);}
.thumbs-up:hover, .thumbs-up.thumbed {background:rgba(0,50,0,0.9);color:rgba(255,255,255,0.9);}
.thumbs-down:hover {background:rgba(50,0,0,0.9);color:rgba(255,255,255,0.9);}


#pulldown {position:fixed; top:0; right:0;width:200px; z-index:1000; 
            text-align:center; margin-top:-160px;
    -webkit-transition: all 1s;
    transition: all 1s;
            color: rgb(220,220,245); opacity:.9; background:rgb(0,0,20);}
#pulldown:hover {margin-top:0;}
#pulldown >div {height:40px;}
#pulldown a {color:rgb(220,220,245);text-decoration:none; font-size:20px; line-height:40px;}

#similar-target.disabled {color:rgba(220,220,255,0.4);}

#pulldown .icon-double-angle-down {font-size:22px; line-height:40px;}

#pulldown-help { width: 200px; position:fixed; top: 40px;
    right:0; background: black; color:white;
    z-index: 995; font-size: 40px; text-align: center;
    margin-top:500px; -webkit-transition: margin-top 3s, opacity 1s; 
    transition: margin-top 3s, opacity 1s; opacity:0.9;
}

#pulldown-help p {margin-top:0;border-top:0;}

#pulldown-help.move {margin-top:0;}
#pulldown-help.fade {opacity:0;}

#about {opacity:0; position:fixed;margin-top:-1000px; width:100%;font-size:20px;
    top:20px;
    -webkit-transition: all 1s;
    transition: all 1s;
}
#about-top-bar {width:100%;text-align:right; font-size:30px; 
                color:rgba(255,255,255,0.4);}
#about > div {margin:0 auto; width:500px; padding:20px; opacity:0.95;
        background:rgb(0,0,40); color:rgb(220,220,240);}
#about.display {opacity:1; margin-top:20px;}
#about a {text-decoration:none; color: rgb(180,180,255);}
#ten-logo, #rdio-logo {width:250px;display:inline-block;height:130px;
                        background-repeat: no-repeat;
                        background-position: center bottom;}
#ten-logo {background-image: url(../img/ten.png);}
#rdio-logo {background-image: url(../img/rdio.png);}

#playlist-selection {width:100%;margin-top:-1000px;opacity:0;position:fixed;
                        top:0;left:0; color:rgb(200,200,240);}
#genre-list {overflow-y:scroll;height:500px;}
#playlist-selection.display {margin-top:20px;opacity:1;}
#playlist-selection > div {width:500px; margin:0 auto; 
        background: rgba(0,0,0,0.9);}
#playlist-selection input {padding:10px; width:478px; 
        font-size:20px; line-height:25px;
        border:1px solid rgba(30,30,55,0.8);
        background: rgba(0,0,30,0.8); 
        color:rgba(200,200,255,0.9);}

#selection-top-bar {width:460px;text-align:right; font-size:30px;
    padding:0 20px; color:rgba(255,255,255,0.4);}

.genre {font-size:24px; line-height:28px;text-align:center;padding:5px 0;
        cursor:pointer;}
.genre span {font-weight:900; color:rgb(220,220,255);}
.genre:nth-child(odd) {background: rgba(200,200,255,0.1);}
#no-genre {font-size:30px;font-style:italic;text-align:center;padding-top:30px;}

*:focus {outline:0;}

#social-splash {position:fixed; bottom:0; right:0; z-index:5000 width:200px;
                background:rgb(0,0,20); text-align:center;padding:5px;}
#throbber-body {margin: 0 auto;padding:200px 90px;
            color:rgba(200,200,240,0.5);font-size:100px;text-align:center;
            background:rgba(0,0,40,0.7);}