:root{
	--color050: rgb(244, 247, 249);
	--color100: rgb(233, 240, 243);
	--color200: rgb(199, 217, 226);
	--color300: rgb(165, 194, 208);
	--color400: rgb(98, 148, 172);
	--color500: rgb(31, 102, 137);
	--color600: rgb(28, 92, 123);
	--color700: rgb(19, 61, 82);
	--color800: rgb(14, 46, 62);
	--color900: rgb(9, 31, 41);
}

@font-face{
	font-family: roboto;
	font-style: normal;
	font-weight: normal;
	src: url('../font/woff/roboto.woff') format('woff2')
}

@font-face{
	font-family: roboto;
	font-style: normal;
	font-weight: bold;
	src: url('../font/woff/roboto-bold.woff') format('woff2')
}

@font-face{
	font-family: mono;
	font-style: normal;
	src: url('../font/woff/roboto-mono.woff') format('woff2')
}

html{
	box-sizing: border-box;
}

*, *:before, *:after{
	box-sizing: inherit;
}

body{
	background-color: var(--color900);
	font-family: roboto;
	line-height: 1.2;
	margin: 10px 10px 20px 10px;
	color: var(--color050);
}

a{
	color: var(--color050);
}

::placeholder{
	color: var(--color400);
	text-align: center;
}

img, input[type=image]{
	vertical-align: middle;
}

input[type=image]{
	width: 960px;
	height: 540px;
	background-color: var(--color900);
}

input[type=image]:hover{
	cursor: crosshair;
}

input[type=image]:focus{
	outline: none;
}

button{
	font-family: roboto;
	font-size: 10px;
	margin: 0 2px;
}

button:hover{
	filter: sepia(0.5);
	cursor: pointer;
}

button i{
	margin-right: 4px;
}

input[type=radio]{
	position: relative;
	top: 1px;
	margin-left: 17px;
	margin-right: 5px;
}

input[type=radio]:first-of-type{
	margin-left: 0;
}

pre{
	font-family: mono;
	font-size: 11px;
	margin: 0;
	white-space: pre-wrap;
	letter-spacing: -1px;
}

.search-form{
	width: 125px;
	height: 18px;
	background-color: var(--color100);
	padding: 1px 15px 1px 2px;
	border: 1px solid var(--color400);
}

.search-form:focus{
	outline: none;
	background-color: var(--color050);
}

.search-icon{
	position: relative;
	font-size: 10px;
	left: 120px;
	color: var(--color600);
}

.search-icon:hover{
	cursor: pointer;
	opacity: 0.5;
}

.menu{
	font-size: 15px;
	color: var(--color100);
	text-decoration: none;
	margin-right: 13px;
}

.menu:hover{
	color: var(--color300);
}

.menu i{
	margin-right: 5px;
}

.main{
	width: 960px;
}

.header-bar{
	display: table;
	width: 960px;
	font-size: 18px;
	margin-bottom: 4px;
}

.big-header{
	font-size: 25px;
	text-align: center;
	padding: 5px 0;
	background-color: var(--color800);
	color: var(--color100);
}

.blue-bar{
	background-color: var(--color500);
	height: 25px;
	color: var(--color100);
	font-size: 16px;
}

.blue-bar .content{
	text-align: center;
	position: relative;
	top: 3px;
}

.blue-bar a{
	color: var(--color050);
	text-decoration: none;
	font-size: 16px;
}

.blue-bar a:hover{
	color: var(--color800);
}

.c-table{
	display: table;
	background-color: var(--color800);
	color: var(--color050);
	width: 100%;
}

.c-row{
	display: table-row;
}

.c-cell{
	display: table-cell;
	padding: 5px;
	vertical-align: middle;
}

.c-table .c-row .c-cell img{
	box-shadow: 2px 2px 2px var(--color900);
	width: 100px;
	height: 133px;
}

.c-thumb{
	background-color: var(--color800);
}

.c-thumb img{
	box-shadow: 2px 2px 2px var(--color900);
	width: 100px;
	height: 56px;
	margin: 3px 10px ; 
}

.c-thumb img:hover{
	filter: sepia(1) saturate(2);
}

.bdinfo{
	width: 960px;
	background-color: var(--color800);
	color: var(--color100);	
	margin-top: 20px;
}

.bdinfo img{
	box-shadow: 2px 2px 2px var(--color900);
}

.image-quality-active, .image-quality-inactive{
	white-space: nowrap;	
	width: 50px;
	height: 19px;
	position: relative;
	border: 0;
	top: 1px;
	font-size: 11px;
	font-weight: bold;
}

.image-quality-inactive{
	opacity: 0.35;
}

/* top 50 */

.top{
	display: table;
	width: 100%;
	border-spacing: 0 1px;
	background-color: var(--color900);
	color: var(--color050);
	font-size: 14px;
}

.top a{
	color: var(--color050);
	text-decoration: none;
	position: relative;
	top: 2px;
}

.top .row:nth-child(odd){
	display: table-row;
	background-color: var(--color700);
}

.top .row:nth-child(even){
	display: table-row;
	background-color: var(--color800);
}

.top .right, .top .left{
	display: table-cell;
	width: 50%;
	padding: 5px;
	vertical-align: middle;
}

.top .left{
	border-right: 1px solid var(--color900);
}

.top .left:hover, .top .right:hover, .top .right:hover > a, .top .left:hover > a{
	cursor: pointer;
	background-color: var(--color050);
	color: var(--color900);
}

.top .sum{
	float: right;
	position: relative;
	top: 2px;	
}

.top img{
	height: 24px;
	margin-right: 7px;
	box-shadow: 2px 2px 2px var(--color900);
}


/* index */

.front{
	width: 100%;
	display: table;
	color: var(--color100);
	border-spacing: 0 1px;
}

.front .row:nth-child(odd), .list .row:nth-child(odd){
	display: table-row;
	background-color: var(--color700);
}

.front .row:nth-child(even), .list .row:nth-child(even){
	display: table-row;
	background-color: var(--color800);
}

.front .row:hover, .list .row:hover, .front .row:hover a{
	cursor: pointer;
	background-color: var(--color300);
	color: var(--color900);
}

.front .row .cell-1{
	display: table-cell;
	vertical-align: middle;
	width: 50px;
	padding: 5px;
}

.front .row .cell-2{
	display: table-cell;
	width: 650px;
	vertical-align: middle;
	padding: 15px 5px 15px 5px;
	font-size: 24px;
}

.front .row .cell-2 div, .list .row .cell-1 div{
	font-size: 14px;
}

.front .row .cell-2 a{
	text-decoration: none;
}

.front .row .cell-3{
	display: table-cell;
	width: 260px;
	vertical-align: middle;
	text-align: right;
	padding: 5px;
}

.front .row .cell-3 img{
	width: 45px;
	height: 60px;
	box-shadow: 2px 2px 2px var(--color900);
	margin-left: 5px;
}

.front .row .cell-1 img{
	width: 45px;
	height: 60px;
	box-shadow: 2px 2px 2px var(--color900);
}

.front .row .cell-3 img:first-of-type{
	margin-left: 0px;
}


/* choose discs */

.list{
	display: table;
	width: 100%;
	color: var(--color100);
	border-spacing: 0 1px;
}

.list .row_selected{
	display: table-row;
	cursor: auto;
	background-color: #BDEDBD;
}

.list .row .cell-1{
	display: table-cell;
	font-size: 24px;	
	width: 860px;
	vertical-align: middle;
	padding: 5px;
}

.list .row .cell-2{
	display: table-cell;
	width: 100px;
	text-align: right;
	padding: 5px;
}

.list .row .cell-2 img{
	width: 45px;
	height: 60px;
	box-shadow: 2px 2px 2px var(--color900);
}


/* browse all */

.all{
	display: table;
	width: 100%;
	border-spacing: 0 1px;
	background-color: var(--color900);
}

.all .row:nth-child(odd){
	display: table-row;
	background-color: var(--color700);
}

.all .row:nth-child(even){
	display: table-row;
	background-color: var(--color800);
}

.all .row .cell, .all .row .no-cell{
	display: table-cell;
	padding: 2px 10px;
	width: calc(100% / 3);
}

.all .row .cell:not(:last-child){
	border-right: 1px solid var(--color900);
}

.all .row .cell a{
	font-size: 14px;
	text-decoration: none;
}

.all .row .cell:hover, .all .row .cell:hover a{
	background-color: var(--color050);
	color: var(--color900);
	cursor: pointer;
}

.blue-bar .alpha-container{
	width: 18px;
	height: 18px;
	border-radius: 9px;
	display: inline-block;
	text-align: center;
	margin: 0 4px;
	position: relative;
	background-color: var(--color050);
	background: var(--color700);
	box-shadow: 2px 2px 2px var(--color900);
}

.blue-bar .alpha-container:hover, .blue-bar .alpha-container:hover a{
	background: var(--color100);
	color: var(--color900);
	cursor: pointer;
}

.blue-bar .alpha-link{
	text-decoration: none;
	color: var(--color050);
	font-size: 11px;
	position: relative;
	bottom: 2px;
}

/* faq */
.faq{
	background-color: var(--color700);
	padding: 10px;
}

.faq-question{
	font-size: 20px;
	font-weight: bold;
	color: var(--color100);
}

.faq-answer{
	padding-left: 15px;
}

.faq a{
	font-weight: bold;
	color: var(--color300);
}

.faq a:hover{
	color: var(--color500);
}