@charset "utf-8";

/* normalize.css v3.0.2 | MIT License | git.io/normalize
----------------------------------------------- */

img,legend{border:0}legend,td,th{padding:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0}

/* reset
----------------------------------------------- */

h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 1em;
	line-height: 1em;
	list-style: none;
}
a,
a:hover,
a:active,
a:visited {
	margin: 0;
	padding: 0;
	text-decoration: none;
	overflow: hidden;
	outline: none;
}
img {
	vertical-align: top;
	-webkit-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
}
hr {
	display: none;
}

/* clear */

.clear:after {
  content: "."; 
  display: block;
  height: 0; 
  clear: both; 
  visibility: hidden;
}

/* html
----------------------------------------------- */

html {
	margin: 0;
	padding: 0;
	overflow-y: scroll;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* body
----------------------------------------------- */

body {
	margin: 0;
	padding: 0;
	color: black;
	font-family: Meiryo, "Hiragino Kaku Gothic Pro", "MS PGothic", sans-serif;
	background: black;
}
a {
	color: rgb(210,20,40);
}
a:hover {
	text-decoration: underline;
}

/* header
----------------------------------------------- */

#header {
	padding: 50px 0 45px;
	border-top: 10px solid black;
	background: white;
}
#header h1 {
	margin: auto;
	width: 960px;
}
#header .copy {
	margin: 32px auto 0;
	width: 960px;
}

/* footer
----------------------------------------------- */

#footer {
	text-align: center;
	overflow: hidden;
}
#footer p {
	padding: 35px 0;
	color: white;
	font-family: Arial, sans-serif;
	font-size: 0.65em;
	font-weight: bold;
}

/* pageup
----------------------------------------------- */

#pageup {
	position: fixed;
	right: 25px;
	bottom: 190px;
	bottom: 25px;
	width: 40px;
	height: 40px;
	background: url(../images/pageup.png) no-repeat;
	cursor: pointer;
}
#pageup:hover {
	background-position: 0 -40px;
}
#pageup:active {
	background-position: 0 -80px;
}

/* banner
----------------------------------------------- */

#banner {
	padding: 50px 0;
	background: white;
}
#banner ul {
	margin: auto;
	width: 700px;
}
#banner li {
	float: left;
	margin: 0 50px;
	width: 250px;
}
#banner li a {
	display: block;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
#banner li a:hover {
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}
#banner li span {
	display: block;
	margin: 1em 0 0;
	color: rgb(100,100,100);
	font-size: 0.75em;
	line-height: 1.5em;
}

/* share
----------------------------------------------- */

#share {
	position: absolute;
	top: 60px;
	left: 50%;
	margin: 0 0 0 230px;
}
#share ul {
	width: 250px;
}
#share li {
	float: right;
	margin: 0 0 0 15px;
}


/* actors
----------------------------------------------- */

#actors {
	position: relative;
	height: 140px;
	overflow: hidden;
}
#actors ul {
	position: absolute;
}
#actors li {
	float: left;
	width: 125px;
}
#actors li img {
	display: none;
}

/* intro
----------------------------------------------- */

#intro {
	padding: 40px 0 50px;
	background: rgb(0,40,130) url(../images/base.png) no-repeat center bottom;
}
#intro h2 {
	text-align: center;
}
#intro .feature {
	margin: 45px auto 0;
	padding: 0 0 25px;
	width: 840px;
}

/* result
----------------------------------------------- */

#result {
	position: relative;
	padding: 0 0 20px;
	background: rgb(235,235,235);
}
#result .inner {
	margin: auto;
	padding: 0 0 45px;
	width: 960px;
	background: white;
	-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 0 4px rgba(0,0,0,0.2);
	box-shadow: 0 0 4px rgba(0,0,0,0.2);
}
#result h2 {
	position: relative;
	top: -25px;
	left: 0;
}
#result h3 {
	margin: 45px 0 0;
	text-align: center;
}
#result .comment {
	font-size: 0.95em;
	line-height: 1.85em;
}

/* rank */

#result .rank {
	position: relative;
	padding: 0.85em 0 0.65em 50px;
	font-size: 1.25em;
	font-weight: bold;
	line-height: 1em;
}
#result .rank:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	margin: -22px 0 0;
	width: 40px;
	height: 40px;
	background: url(../images/rank.png) no-repeat;
}
#result .rank .vote {
	position: absolute;
	top: 50%;
	right: 0;
	margin: -0.25em 0 0;
	font-size: 1.5em;
}
#result .rank .num {
	font-size: 1.25em;
}

#result .rank.rank1:after {
	background-position: 0 0;
}
#result .rank.rank2:after {
	background-position: -40px 0;
}
#result .rank.rank3:after {
	background-position: -80px 0;
}
#result .rank.rank4:after {
	background-position: -120px 0;
}
#result .rank.rank5:after {
	background-position: -160px 0;
}
#result .rank.rank6:after {
	background-position: -200px 0;
}
#result .rank.rank7:after {
	background-position: -240px 0;
}
#result .rank.rank8:after {
	background-position: -280px 0;
}
#result .rank.rank9:after {
	background-position: -320px 0;
}
#result .rank.rank10:after {
	background-position: -360px 0;
}
#result .rank.rank11:after {
	background-position: -400px 0;
}
#result .rank.rank12:after {
	background-position: -440px 0;
}
#result .rank.rank13:after {
	background-position: -480px 0;
}
#result .rank.rank14:after {
	background-position: -520px 0;
}
#result .rank.rank15:after {
	background-position: -560px 0;
}
#result .rank.rank16:after {
	background-position: -600px 0;
}
#result .rank.rank17:after {
	background-position: -640px 0;
}
#result .rank.rank18:after {
	background-position: -680px 0;
}
#result .rank.rank19:after {
	background-position: -720px 0;
}
#result .rank.rank20:after {
	background-position: -760px 0;
}
#result .rank.rank21:after {
	background-position: -800px 0;
}
#result .rank.rank22:after {
	background-position: -840px 0;
}
#result .rank.rank23:after {
	background-position: -880px 0;
}
#result .rank.rank24:after {
	background-position: -920px 0;
}
#result .rank.rank25:after {
	background-position: -960px 0;
}
#result .rank.rank26:after {
	background-position: -1000px 0;
}
#result .rank.rank27:after {
	background-position: -1040px 0;
}
#result .rank.rank28:after {
	background-position: -1080px 0;
}
#result .rank.rank29:after {
	background-position: -1120px 0;
}
#result .rank.rank30:after {
	background-position: -1160px 0;
}

/* frame */

#result .frame {
	margin: 40px auto 0;
	width: 870px;
	background: red;
}
#result .frame .top {
	padding: 52px 0 0;
}
#result .frame .bottom {
	padding: 0 0 45px;
}

#result .frame.gold {
	margin: 15px auto 0;
	background: url(../images/frame_gold_middle.png) repeat-y;
}
#result .frame.gold .top {
	background: url(../images/frame_gold_top.png) no-repeat center top;
}
#result .frame.gold .bottom {
	background: url(../images/frame_gold_bottom.png) no-repeat center bottom;
}

#result .frame.silver {
	background: url(../images/frame_silver_middle.png) repeat-y;
}
#result .frame.silver .top {
	background: url(../images/frame_silver_top.png) no-repeat center top;
}
#result .frame.silver .bottom {
	background: url(../images/frame_silver_bottom.png) no-repeat center bottom;
}

#result .frame.bronze {
	background: url(../images/frame_bronze_middle.png) repeat-y;
}
#result .frame.bronze .top {
	background: url(../images/frame_bronze_top.png) no-repeat center top;
}
#result .frame.bronze .bottom {
	background: url(../images/frame_bronze_bottom.png) no-repeat center bottom;
}

/* gold */

#result .gold .vote {
	color: rgb(200,150,50);
}
#result .gold .content {
	margin: auto;
	width: 770px;
}
#result .gold .content .left {
	float: left;
	width: 200px;
}
#result .gold .content .right {
	float: right;
	width: 540px;
}
#result .program {
	margin: 30px auto 0;
	width: 770px;
}
#result .program a {
	color: rgb(0,40,130);
}
#result .program .copy {
	color: rgb(0,40,130);
	font-size: 1em;
	font-weight: bold;
}
#result .program table {
	margin: 15px 0 0;
	width: 100%;
	border-bottom: 1px solid rgb(220,220,220);
}
#result .program th,
#result .program td {
	padding: 0.5em 0;
	font-size: 0.95em;
	border-top: 1px solid rgb(220,220,220);
}
#result .program .title {
	width: 25%;
}
#result .program .time {
	width: 60%;
}
#result .program .link {
	width: 15%;
}
#result .gold .comment {
	margin: 1em 0 0;
}

/* silver */

#result .silver .vote {
	color: rgb(150,150,150);
}
#result .silver p {
	margin: 0 50px;
}
#result .silver .rank3 {
	margin: 1.5em 50px 0;
}
#result .silver .comment {
	margin: 0.95em 50px 0;
}

/* bronze */

#result .bronze .vote {
	color: rgb(180,100,0);
}
#result .bronze .rank4 {
	margin: 0 50px;
}
#result .bronze .dobble {
	margin: 40px 50px 0;
	padding: 1.5em 0 40px;
	border-top: 1px solid rgb(220,220,220);
	border-bottom: 1px solid rgb(220,220,220);
}
#result .bronze .dobble .left {
	float: left;
	width: 365px;
}
#result .bronze .dobble .right {
	float: right;
	width: 365px;
}
#result .bronze .dobble li {
	margin: 1.25em 0 0;
	font-size: 0.95em;
}
#result .bronze .triple {
	margin: 0 0 0 40px;
	padding: 1.5em 0 10px;
}
#result .bronze .triple ul {
	float: left;
	margin: 0 0 0 10px;
	width: 250px;
}
#result .bronze .triple li {
	margin: 1.25em 0 0;
	font-size: 0.95em;
}

/* pickup */

#result .pickup {
	margin: 45px auto 0;
	width: 853px;
}
#result .pickup .left {
	float: left;
	width: 410px;
}
#result .pickup .right {
	float: right;
	width: 410px;
}
#result .pickup dl {
	border: 3px solid rgb(0,40,130);
}
#result .pickup dt {
	padding: 25px 25px 0;
	font-size: 0.95em;
	font-weight: bold;
	border-top: 1px solid rgb(220,220,220);
}
#result .pickup dd {
	padding: 15px 25px 20px;
	min-height: 7.5em;
	font-size: 0.8em;
	text-align: justify;
	line-height: 1.5em;
}
#result .pickup dt:first-child {
	border-top: 0;
}

/* landing
----------------------------------------------- */

#landing {
	padding: 50px 0;
	background: rgb(0,40,130) url(../images/base.png) no-repeat center bottom;
}
#landing .feature {
	margin: auto;
	width: 840px;
}


