/* latin-ext */
@font-face {
  font-family: 'Limelight';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/limelight/v19/XLYkIZL7aopJVbZJHDuoNOlHjHUmTUFt.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Limelight';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/limelight/v19/XLYkIZL7aopJVbZJHDuoOulHjHUmTQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body { background:url(/posts/goodbye-twenty-twelve/images/subtle_dots.png) repeat; counter-reset:fig; }
header h1#articletitle { margin-left:-180px; color:#FEF200; text-align:right; font-size:4em; font-family:Limelight;}
cite.data-source { display:block; text-align:right; font-style:italic; }

.post figure { margin:2.5em 0 2em; }
.post figure small { display:block; text-align:right; }
.post figcaption::before { content:"图表" counter(fig) ": "; counter-increment:fig; }
.post figcaption::after { content:" ↓"; }
.post figure p:has(img) ~ figcaption::after { content:" ↑"; }
.post h3 { border-color:#FEF200; }

#monthly-revenue { width:100%; height:280px; }
#consume-pie { width:100%; height:440px; }
#consume-pie .highcharts-container { margin:0 auto; }
#db-movie { width:100%; height:440px; }

ul.movie2012, ul.music2012, ul.book2012{ margin:0; padding:0; }
ul.movie2012 li, ul.music2012 li, ul.book2012 li { margin:0; padding:0; list-style:none; }
ul.movie2012 li a , ul.music2012 li a, ul.book2012 li a { margin:0; padding:0; border-bottom:0; }
ul.movie2012 li img , ul.music2012 li img, ul.book2012 li img { display:inline; margin:0; }
ul.movie2012 li { float:left; margin:0 0 10px; min-width:165px; width:25%; height:240px; }
ul.movie2012 h5 { padding-left:7px; }
ul.movie2012 a.bluray { display:block; margin-left:5px; width:165px; height:175px; background-position:0 0, 18px 13px, 35px 35px, 1px 1px; background-size:120px 165px, 96px 145px, 96px 96px, 116px 162px; background-repeat:no-repeat; text-indent:-9999em; -webkit-transition:all .25s linear; transition:all .25s linear;}
ul.movie2012 a.bluray:hover { margin-left:0; background-position:0 0, 18px 13px, 65px 35px, 1px 1px; -webkit-filter:grayscale(.8); }
	a.tdkr { background-image:url(/posts/goodbye-twenty-twelve/images/bd-case.png), url(/posts/goodbye-twenty-twelve/images/tdkr.jpg), url(/posts/goodbye-twenty-twelve/images/bd-disc.png), url(/posts/goodbye-twenty-twelve/images/bd-back.png); }
	a.gwdt { background-image:url(/posts/goodbye-twenty-twelve/images/bd-case.png), url(/posts/goodbye-twenty-twelve/images/gwdt.jpg), url(/posts/goodbye-twenty-twelve/images/bd-disc.png), url(/posts/goodbye-twenty-twelve/images/bd-back.png); }
	a.prometheus { background-image:url(/posts/goodbye-twenty-twelve/images/bd-case.png), url(/posts/goodbye-twenty-twelve/images/prometheus.jpg), url(/posts/goodbye-twenty-twelve/images/bd-disc.png), url(/posts/goodbye-twenty-twelve/images/bd-back.png); }
	a.die-welle { background-image:url(/posts/goodbye-twenty-twelve/images/bd-case.png), url(/posts/goodbye-twenty-twelve/images/die-welle.jpg), url(/posts/goodbye-twenty-twelve/images/bd-disc.png), url(/posts/goodbye-twenty-twelve/images/bd-back.png); }
	a.biutiful { background-image:url(/posts/goodbye-twenty-twelve/images/bd-case.png), url(/posts/goodbye-twenty-twelve/images/biutiful.jpg), url(/posts/goodbye-twenty-twelve/images/bd-disc.png), url(/posts/goodbye-twenty-twelve/images/bd-back.png); }
	a.mad-men { background-image:url(/posts/goodbye-twenty-twelve/images/bd-case.png), url(/posts/goodbye-twenty-twelve/images/mad-men.jpg), url(/posts/goodbye-twenty-twelve/images/bd-disc.png), url(/posts/goodbye-twenty-twelve/images/bd-back.png); }
	a.game { background-image:url(/posts/goodbye-twenty-twelve/images/bd-case.png), url(/posts/goodbye-twenty-twelve/images/game.jpg), url(/posts/goodbye-twenty-twelve/images/bd-disc.png), url(/posts/goodbye-twenty-twelve/images/bd-back.png); }
	a.black { background-image:url(/posts/goodbye-twenty-twelve/images/bd-case.png), url(/posts/goodbye-twenty-twelve/images/black.jpg), url(/posts/goodbye-twenty-twelve/images/bd-disc.png), url(/posts/goodbye-twenty-twelve/images/bd-back.png); }

ul.music2012 li { position:relative; float:left; margin:15px 0 10px; min-width:130px; width:25%; height:220px; text-align:center; }
ul.music2012 a.cd { display:block; width:122px; height:120px; background-position:0 0, 9px 0; background-size:122px 120px, 120px 120px; background-repeat:no-repeat; box-shadow:1px 3px 5px rgba(0, 0, 0, .7); text-indent:-9999em; -webkit-backface-visibility:hidden; }
ul.music2012 a.cd:hover { -webkit-filter:grayscale(.8); }
	a.blueprint { background-image:url(/posts/goodbye-twenty-twelve/images/cd-case.png), url(/posts/goodbye-twenty-twelve/images/blueprint.jpg); }
	a.roots { background-image:url(/posts/goodbye-twenty-twelve/images/cd-case.png), url(/posts/goodbye-twenty-twelve/images/roots.jpg); }
	a.summer { background-image:url(/posts/goodbye-twenty-twelve/images/cd-case.png), url(/posts/goodbye-twenty-twelve/images/summer.jpg); }
	a.love { background-image:url(/posts/goodbye-twenty-twelve/images/cd-case.png), url(/posts/goodbye-twenty-twelve/images/love.jpg); }
ul.music2012 h5, ul.music2012 small.artist { display:block; width:122px; text-align:center; }
	
ul.book2012 { padding:30px 0 0; }
ul.book2012 li { float:left; min-width:120px; width:20%; height:280px; }
ul.book2012 li a { -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); }
ul.book2012 li a img { width:100px; height:150px; border-radius:6px; box-shadow:0 0 3px #BBB, 1px 4px 10px #CCC ; -webkit-transition:all .25s linear; transition:all .25s linear; }
ul.book2012 li a:hover img { -webkit-transform:translate3d(16px, 0, 0); transform:translate3d(16px, 0, 0); }

@media only screen and (max-width:960px) {
	header h1#articletitle { margin-left:0; text-align:left; } 
	.post h4 { text-align:center; }
}

@media only screen and (max-width:460px) {
	#consume-pie { height:600px; }
	#db-movie { height:400px; }
	ul.movie2012 li, ul.music2012 li, ul.book2012 li { width:50%; }
	ul.movie2012 li { min-width:135px; }
	ul.movie2012 a.bluray { width:130px; }
	ul.movie2012 a.bluray:hover { background-position:0 0, 18px 13px, 35px 35px, 1px 1px; }
}