#awardWrapper { background: #F3F2EE; }
#headerAward { padding: 45px 0 0 0; background: transparent url('/img/event/2012/bg_cloud.png'); }
    #headerAward h1 { text-indent: -9999px; background: url('/img/event/2012/logo.png') no-repeat 50% 50%; height: 55px; }

#awardNav { margin: 20px auto 0 auto; background: url('/img/event/2012/bg_sprites.png') no-repeat; width: 420px; height: 30px; }
#awardNav li { float: left; }
#awardNav li a { display: block; text-indent: -9999px; width: 60px; height:30px; }
#awardNav li a:hover { display: block; background: url('/img/event/2012/bg_sprites.png') no-repeat; height:30px; }

#awardNav li a.anime { width: 60px;}
#awardNav li a.music { width: 60px; }
#awardNav li a.book { width: 55px; }
#awardNav li a.game { width: 60px; }
#awardNav li a.real { width: 65px; background-position: -240px -30px; }
#awardNav li a.crt { width: 60px; background-position: -300px -30px; }
#awardNav li a.community { width: 60px; background-position: -360px -30px; }

#awardNav li a.anime:hover { width: 60px; background-position: 0 -30px; }
#awardNav li a.music:hover { width: 60px; background-position: -60px -30px; }
#awardNav li a.book:hover { background-position: -120px -30px; }
#awardNav li a.game:hover { background-position: -175px -30px; }
#awardNav li a.real:hover { width: 60px; background-position: -235px -30px; }
#awardNav li a.crt:hover { width: 60px; background-position: -300px -30px; }
#awardNav li a.community:hover { width: 60px; background-position: -360px -30px; }

#personalStatsWrapper { margin: 50px 0 0 0; background: rgba(255,255,255,0.5); -moz-box-shadow: 0 0px 3px #CCC;-webkit-box-shadow: 0 0px 3px #CCC; box-shadow: 0px 0px 3px #AAA; }
#personalStatsWrapper .columns { margin: 0 auto 0 auto; padding: 20px 0; width: 960px; }
    #personalStatsWrapper .columnProfile { width: 140px; text-align: right; }
        #personalStatsWrapper .columnProfile a.avatar { display: block; width: 75px; height: 75px;margin: 0 0 5px 65px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow: inset 0 0px 3px #CCC;-webkit-box-shadow: inset 0 0px 3px #CCC; box-shadow: inset 0 0px 3px #CCC; }
    #personalStatsWrapper .columnProfile p { margin: 0 0 0 0; font-size: 18px; color: #666; }
    #personalStatsWrapper .columnWelcome { margin: 0 0 0 10px; width: 810px; }
    #personalStatsWrapper .columnWelcome p { margin: 0 0 10px 0; font-size: 14px; color: #666;  }    
    #personalStatsWrapper .columnWelcome .shareBtn { margin: 10px 0 0 0; }

    #personalStatsWrapper .columnMenu { margin: 0 20px 0 10px; width: 120px; }
        #personalStatsWrapper .columnMenu h2.title { width: 130px; height: 40px; margin: 0; text-indent: -9999px; background: url('/img/event/2012/bg_sprites.png') no-repeat;  background-position:0 -410px; }
        #personalStatsWrapper .columnMenu ul li a { background: #ede4cd; display: block; width: 120px; margin: 0 0 3px 0; padding: 10px 5px 10px 0; color: #c7b370; font-size: 15px; text-align: right;
        -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
        -webkit-transition:background-color linear 0.2s,color linear 0.2s;-moz-transition:background-color linear 0.2s,color linear 0.2s;transition:background-color linear 0.2s,color linear 0.2s        
        }
        #personalStatsWrapper .columnMenu ul li a.focus, #personalStatsWrapper .columnMenu ul li a:hover { background: #c7b370; color: #FFF; }
    
    #personalStatsWrapper .columnStats { padding: 0 0 0 0; width: 670px; }
    #personalStatsWrapper .columnStats div.stats { margin: 0 0 15px 0; }    
    #personalStatsWrapper .columnStats div.stats div.bar { width: 590px; }
    #personalStatsWrapper .shareBtn { text-align: right; }

/*.channelStatsWrapper { background-color: #F2EFF2; }
#chl_music, #chl_game { background-color: #fbfaf5; }
#chl_community { background-color: #f8fbf8; }*/
.channelStatsWrapper .columns { margin: 0 auto; padding: 25px 0; width: 960px; }

    .channelStatsWrapper h2.channelTitle { float: left; display: block; width: 200px; height: 55px; margin: 5px 0; text-indent: -9999px; background: url('/img/event/2012/bg_sprites.png') no-repeat; }
    .channelStatsWrapper h2.channelTitle.anime { background-position: 0 -70px; }
    .channelStatsWrapper h2.channelTitle.music { background-position: 0 -130px; }
    .channelStatsWrapper h2.channelTitle.book { background-position: 0 -185px; }
    .channelStatsWrapper h2.channelTitle.game { background-position: 0 -240px; }
    .channelStatsWrapper h2.channelTitle.real { background-position: 0 -295px; width: 220px; }                
    .channelStatsWrapper h2.channelTitle.crt { float: none; margin: 20px auto 0 auto; background-position: 0 -350px; }    
    .channelStatsWrapper h2.channelTitle.community { float: none; margin: 20px auto 0 auto; background-position: -200px -70px; }    
    
.channelStatsWrapper .columnGrid { margin: 0; }
    .channelStatsWrapper .columnGrid h3 { font-size: 18px; color: #666; font-weight: normal; line-height: 35px; }
    .channelStatsWrapper .columnGrid h3.chl { float: left; font-size: 20px; line-height: 60px; }
    .channelStatsWrapper .columnGrid ul.grid {}
        .channelStatsWrapper .columnGrid ul.grid li { float: left; margin: 0 7px 5px 0; }    
        .channelStatsWrapper .columnGrid ul.grid li a { display: block; }        
        .channelStatsWrapper .columnGrid ul.grid li span.cover { display: block; width: 130px; height: 130px; background-color: #333; background-repeat: no-repeat; background-position: 25% 50%; overflow: hidden; position: relative; background-size: 130px;
            -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;
            -moz-box-shadow: inset 0 0px 3px #CCC;-webkit-box-shadow: inset 0 0px 3px #CCC; box-shadow: inset 0 0px 5px #AAA;
        }
        
        
        .channelStatsWrapper .columnGrid ul.grid li span.cover span.overlay { display: block; width: 130px; height: 130px; 
                        /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#F6F6F6');*/
                        background-color: transparent; 
                        background: -webkit-gradient(linear, left 65%, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.5)));
                        background: -moz-linear-gradient(top,  rgba(0,0,0,0) 65%,  rgba(0,0,0,0.5));
                        background: -o-linear-gradient(top,  rgba(0,0,0,0) 65%,  rgba(0,0,0,0.5)); 
                        -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;
                        -webkit-transition:background-color linear 0.2s; -moz-transition:background-color linear 0.2s; transition:background-color linear 0.2s;                                
                        }
                        
        .channelStatsWrapper .columnGrid ul.grid li span.cover:hover span.overlay { background-color: rgba(0,0,0,0.3); }                        
                        
        .channelStatsWrapper .columnGrid ul.grid li span.cover span.title { position: absolute; bottom: 0; padding: 0 5px 2px 5px; color: #FFF; }
        
        
        .columnGrid ul.grid li.avatar { float: left; width: 94px; height: 110px; line-height: 100%; }
        .columnGrid ul.grid li span.avatar { display: block; margin: 0 auto; width: 75px; height: 75px; background-color: #F3F2EE; background-repeat: no-repeat; background-position: 50% 50%; overflow: hidden; position: relative; 
            -moz-border-radius:75px; -webkit-border-radius:75px; border-radius:75px; 
            -moz-box-shadow: inset 0 0px 6px #AAA; -webkit-box-shadow: inset 0 0px 6px #AAA; box-shadow: inset 0 0px 6px #AAA; }
         .columnGrid ul.grid li.avatar span.title { display: block; margin: 2px 0 0 0; font-size: 12px; line-height: 15px; text-align: center; width: 90px; height: 15px; overflow: hidden;  }
         .columnGrid ul.grid li.avatar small.fade { display: block; width: 90px; text-align: center; overflow: hidden;  }         
                
        
        .channelStatsWrapper ul.listRank { margin: 20px 0 0 0; padding: 0; }
            .channelStatsWrapper ul.listRank li { float: left; width: 240px; }
            .channelStatsWrapper ul.listRank li dl dt { background: #c7b370; font-size: 13px; line-height: 30px; color: #FFF; padding: 0 10px; margin: 0 5px;
                -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;
            }
            .channelStatsWrapper ul.listRank li dl dd { width: 220px; height: 20px; padding: 3px 0 3px 10px; margin:0 5px; overflow: hidden; border-bottom: 1px solid #DFDFCF; border-top: 1px solid #EEE;
                -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
                -webkit-transition:background-color linear 0.2s,color linear 0.2s; -moz-transition:background-color linear 0.2s,color linear 0.2s; transition:background-color linear 0.2s,color linear 0.2s;        
            }
            /*.channelStatsWrapper ul.listRank li dl dd:hover { background: #F09199; color: #FFF; }            
                .channelStatsWrapper ul.listRank li dl dd:hover small.fade, .channelStatsWrapper ul.listRank li dl dd:hover a, .channelStatsWrapper ul.listRank li dl dd:hover small.grey { color: #FFF; }*/
        
div.stats {}
div.stats div.label { float: left; width: 70px; text-align: right; }
    div.stats div.label p.type { color: #666; font-size: 13px; margin: 0 0 5px 0; }
    div.stats div.label p.num { color: #D3725E; font-size: 30px; }
    div.stats div.label p.unit { font-size: 10px; color: #D3725E; text-align: right; }    

div.stats div.barWrapper { padding: 16px 0 0 0; height: 30px; margin: 0 0 0 80px; overflow: hidden; }
div.stats div.bar { background: #FFF; width: 100%; height: 30px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
div.stats div.bar div.section { float: left; background: #E38A00; height: 30px; overflow: hidden; }
div.stats div.bar div.section:first-child { -moz-border-radius:5px 0 0 5px; -webkit-border-radius:5px 0 0 5px; border-radius:5px 0 0 5px; }
div.stats div.bar div.section:last-child { -moz-border-radius:0 5px 5px 0; -webkit-border-radius:0 5px 5px 0; border-radius:0 5px 5px 0; }
div.stats div.bar div.desc { padding: 5px 0 0 10px; line-height: 110%; font-size: 10px; color: #FFF; }

.horizontalChart { margin: 0 0 0 80px; height: 250px; width: 580px; overflow: hidden; }
.horizontalChart li {  position: relative; float: left; width: 35px;  margin: 0 4px; height: 220px; border-bottom: 2px solid #EEE; background: #EFEFEF;
                -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; 
                -webkit-transition:background-color linear 0.2s,color linear 0.2s; -moz-transition:background-color linear 0.2s,color linear 0.2s; transition:background-color linear 0.2s,color linear 0.2s; }
.horizontalChart li a {  display: block; height: 100%;   }
.horizontalChart li .label {  font-size: 12px;  display: block; position: absolute; left: 0;width: 100%; color: #AAA;text-align: center; }
.horizontalChart li a .count { display: block; position: absolute; bottom: 0; left: 0; height: 0; width: 100%; background: #AAA; text-indent: -9999px; overflow: hidden; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
.horizontalChart li:hover { background: #ede4cd; }

#awardFooter { background: transparent url('/img/event/2012/bg_cloud.png'); -moz-box-shadow: 0 0px 3px #CCC;-webkit-box-shadow: 0 0px 3px #CCC; box-shadow: 0px 0px 3px #AAA; }
    #awardFooter .inner { width: 960px; margin: 0 auto; padding: 20px 0; font-size: 14px; line-height: 180%; color:#666; }

@media 
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2) {
    #headerAward h1 {background: url('/img/event/2012/logo_2x.png') no-repeat 50% 50%; background-size:500px 55px; }
    #headerAward { background: transparent url('/img/event/2012/bg_cloud_2x.png'); background-size:87px 87px; }
    #awardNav { background: url('/img/event/2012/bg_sprites_2x.png') no-repeat; background-size:500px; }
    #awardNav li a:hover { background: url('/img/event/2012/bg_sprites_2x.png') no-repeat; background-size:500px; }
    
    #awardFooter { background: transparent url('/img/event/2012/bg_cloud_2x.png'); background-size:87px 87px; }
    
    #personalStatsWrapper .columnMenu h2.title { background-image: url('/img/event/2012/bg_sprites_2x.png'); background-size:500px; }    
    .channelStatsWrapper h2.channelTitle { background: url('/img/event/2012/bg_sprites_2x.png') no-repeat; background-size:500px; }    
}