/* reset css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
input,
select, option,
textarea,
button, area { outline:none; }

html,body {
	width:100%; /*height:100%;*/
}
body {
	background: url(bckg.gif) 0 0 / 4px 4px repeat;
	padding: 0;
	height: 100%;
	overflow: hidden;
	font:11pt/1.1 "Helvetica Neue", Helvetica, sans-serif;
}
a,a:visited {
	color: dodgerblue;
	text-decoration: none;
}
a:hover {
	color: dodgerblue;
	text-decoration: none;
}
a[href^="http://"]:after,
a[href^="https://"]:after,
a[href^="ftp://"]:after {
	content: '\f08e';
	display: inline-block;
	padding-left: 3px;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	opacity: .5;
}
main {
	position: fixed;
	display: inline-block;
	float: right;
	margin: 0; padding: 0 20px 20px 220px;
	width: 100%; height: 100%;
	background: url(bckg.gif) 0 0 / 4px 4px repeat;
	/*font-family: Tahoma, Geneva, sans-serif;*/
	box-sizing: border-box;
	overflow: auto;
	vertical-align: top;
}
nav {
	list-style: none;
	color: #ccc;
	width: 100%; height: 240px;
}
nav li {
	display: block;
	line-height: 30px;
	margin: 0;
	padding: 0;
	text-align: left;
	cursor: pointer;
	font-size: 8pt;
	letter-spacing: 1px;
}
nav li i {
	width: 40px;
	text-align: center;
	font-size:14px!important;
	line-height: 30px!important;
	vertical-align: top;
}
nav > li:hover { background: #39595d; }


footer {
	padding: 20px;
	background: #f3f3f3;
	border-top: 1px solid #ccc;
	color: #555;
	text-align: center;
	font-size: 9pt;
	line-height: 15px;
	letter-spacing: 1px;
	border: 1px solid #ccc;
}
footer > div:first-child { font-style: italic; }
footer > div:last-child { font-size:8pt; color:#777; }
footer a { padding:0 10px; }
footer + div {
	text-align: center;
	line-height: 1.5;
	font-size: 8pt;
	letter-spacing: 1px;
	color: #999;
	margin-top: 10px;
}

header {
	display: inline-block;
	background: #111217;
	color: #555;
	width: 200px;
	height: 100vh;
	float: left;
	font-size: 10pt;
	box-sizing: border-box;
	vertical-align: top;
	position: fixed;
	z-index: 9;
}

section { text-align: center; }

pre {
	display: inline-block;
	font: 8pt/1.4 "Liberation Mono", Courier, monospace;
	tab-size: 4;
	letter-spacing: initial;
	text-align: left;
}

article {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 300px; height: 300px;
	margin: 20px;
	background-position: center center;
	background-size: 300px 300px;
	background-repeat: no-repeat;
	background-color: transparent;
	border: 1px solid #111;
	box-sizing: border-box;
	box-shadow: 0 0 12px #999;
}
article .title,
article .ambula,
article .full { opacity: 0; }
article:hover .title,
article:hover .ambula,
article:hover .full { opacity: 1; }

article .title {
	background: #eee;
	border-bottom: 1px solid #111;
}
.title .orgtitle {
	margin: 0 10px; padding: 10px 0 5px 0;
	color: #444;
	font-size: 11pt;
	font-weight: bold;
	text-transform: uppercase;
	border-bottom: 1px solid #ccc;
}
.title .subtitle {
	padding: 5px 0 10px 0;
	color: #777;
	font-size: 9pt;
	font-style: italic;
}
article .ambula:before { content:'Описание: '; color:#999; }
article .ambula {
	position: absolute;
	bottom: 20px;
	width: 100%; height: 64px;
	color: #ccc; background: rgba(17,18,23,0.9);
	padding: 5px;
	font-size: 8pt;
	text-overflow: ellipsis;
	text-align: left;
	white-space: pre;
	word-wrap: break-word;
	word-break: break-word;
	box-sizing: border-box;
	border-top: 1px solid #111;
	overflow: hidden;
}
article .full {
	position: absolute;
	display: block;
	bottom: 0;
	color: #ccc; background: #0b0b0e;
	width: 100%;
	cursor: pointer;
	font-size: 8pt;
	line-height: 20px;
	letter-spacing: 1px;
}
article .full:hover { background: #306d6b; }
[data-toggle="false"] > div { visibility: hidden; opacity: 0; }
[data-toggle="true"] > div { visibility: visible; opacity: 1; }
[data-toggle="true"] { visibility: visible!important; opacity: 1!important; }
article .full > div {
	position: fixed;
	top: 0; left: 200px;
	height: 100%; width: 100%;
	margin-left: -200px;
	padding-left: 200px;
	text-align: center;
	cursor: default;
	z-index: 9;
	box-sizing: border-box;
}
article .full > div > div {
	width: 90%; height: 90vh;
	margin: 5vh auto; padding: 20px;
	color: #333; background: white;
	text-align: left;
	text-shadow: none;
	border: 1px solid #111;
	box-sizing: border-box;
	box-shadow: 0 0 32px #333;
	z-index: 9;
	overflow: auto;
}

button {
	display: block;
	margin: 10px auto; padding: 0 10px;
	color: #ccc; background: #111217;
	letter-spacing: 1px;
	font: bold 9pt/30px "Helvetica Neue", Helvetica, sans-serif;
	border: none;
	cursor: pointer;
}
button:hover { background: #39595d; }

.switch { display:none; }
.switch ~ .switch-box { display:none; }
.switch:checked ~ .switch-box { display:inherit; }
.switch ~ .switch-label:before { content:'+ '; }
.switch:checked ~ .switch-label:before { content:'- '; }
.switch-label {}
.switch-box { text-align: center; }

.button {
	display: inline-block;
	background: #f9f9f9;
	margin: 10px; padding: 0 10px;
	line-height: 25px;
	font-weight: bold;
	border: 1px solid #ccc;
	border-radius: 3px;
	outline:none;
	cursor: pointer;
}
.button:hover {
	background: #fdfdfd;
	border-color: #bbb;
	box-shadow: 0 0 3px #eee;
}
.button:focus, .button:active {
	background: #f3f3f3;
	box-shadow: 0 0 3px #eee, inset 0 0 3px #ddd;
}

.full .full-poster {
	float: left;
	width: 300px; height: 300px;
	background-position: 0 0;
	background-size: 300px 300px;
	margin-right: 20px;
	border: 1px solid #111;
	box-sizing: border-box;
}
.full .full-about {}
.full-about > div { margin-bottom: 2px; cursor: text; z-index: 9; }
.full-edition:before,
.full-date:before,
.full-duration:before,
.full-genre:before,
.full-board:before,
.full-specs:before,
.full-posters:before,
.full-label:before,
.full-link:before {
	display: inline-block;
	background: #eee;
	width: 100px;
	margin-right: 5px; padding: 0 5px;
	line-height: 20px;
}

.full-title {
	padding-bottom: 5px;
	color: #555;
	text-align: right;
	font-size: 14pt;
	font-weight: bold;
	border-bottom: 1px solid #777;
}
.full-subtitle {
	position: relative;
	text-align: right;
	font-size: 10pt;
	color: #aaa;
}
.full-subtitle > div {
	position: absolute;
	right: 0;
}
.full-edition:before { content:'Издание'; }
.full-edition {}
.full-date:before { content:'Дата выхода'; }
.full-date {}
.full-duration:before { content:'Длительность'; }
.full-duration {}
.full-genre:before { content:'Жанры'; }
.full-genre {}
.full-genre kbd {
	display: inline-block;
	color: dodgerblue;
	text-decoration: underline;
	cursor: pointer;
}
.full-board:before { content:'АИБ'; }
.full-board {}
.full-specs:before { content:'Характеристики'; }
.full-specs {}
.full-posters:before { content:'Обложки'; }
.full-posters {}
.full-label:before { content:'Лейбл'; }
.full-label {}
.full-fabula {
	font-size: 10pt;
	letter-spacing: 0;
	margin-top: 25px;
}
.full-ambula {
	font-size: 8pt;
	letter-spacing: 0;
	margin: 15px 0;
}
.full-link:before { content:'Ссылка'; }
.full-link {}
.full-elite,
.full-yoba,
.full-done,
.full-cs,
.full-fail {
	display: inline-block;
	color: #333;
	margin-top: 5px; padding: 0 5px;
	font-size: 6pt;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 2px;
	line-height: 15px;
	border: 1px solid;
}

#logo {
	display: block;
	background: url(mx128.png) center center / 128px 128px no-repeat transparent;
	width: 128px;
	height: 128px;
	margin: 20px auto;
	cursor: pointer;
}
#content {
	min-height: 70%;
	padding: 20px;
	background: white;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
#quote,
#counter {
	display: table-cell;
	margin: 0; padding: 15px 5px;
	width: 200px;
	color: #679992; background: #0b0b0e;
	line-height: 1.2;
	letter-spacing: 1px;
	text-align: center;
	font-size: 8pt;
	vertical-align: middle;
}
#quote { height: 40px; }
#loader {
	display: block;
	background: url(loader.gif) center center / 40px 40px no-repeat transparent;
	width: 100%;
	height: 40px;
	text-align: center;
	padding: 40px 0;
	box-sizing: border-box;
}
#error {
	display: none;
	padding: 20px 0;
	background: #ccc;
	text-align: center;
	line-height: 30px;
	font-size: 10pt;
	font-weight: bold;
}
#moar { display: none; }

#options { position: relative; }
#options label {
	display: block;
	cursor: pointer;
}
#options > span {
	display: none;
	position: absolute;
	top: 0; right: 10px;
	float: right;
	/*color: #679992;*/
	color: #ccc;
	font-weight: bold;
}
#options input[type="checkbox"] { display: none; }
#options input[type="checkbox"] ~ ul {
	display: block;
	position: fixed;
	top: 238px; left: 200px;
	padding: 0;
	width: 432px; height: 240px;
	background: #0b0b0e;
	cursor: default;
	box-sizing: border-box;
	z-index: 9;
	visibility: hidden;
	opacity: 0;
}
#options input[type="checkbox"]:checked ~ ul { left:200px; visibility: visible!important; opacity: 1!important; }
#options ul li {
	display: block;
	list-style: none;
	vertical-align: top;
	text-transform: none;
	font-size: 8pt;
	text-align: left;
	line-height: 20px;
	padding: 1px;
	box-sizing: border-box;
	cursor: default;
}
#options ul li:hover { background: #39595d; }
#options ul li span {
	display: inline-block;
	width: 140px;
	text-align: right;
	padding: 0 20px;
	box-sizing: border-box;
	vertical-align: middle;
}
#options ul li input,
#options ul li select {
	display: inline-block;
	padding: 0 10px;
	width: 290px; height: 30px;
	color: #aaa; background: #15151b;
	line-height: 30px;
	border: none;
	box-sizing: border-box;
}
#options input {}

#albums label{
	display: block;
	cursor: pointer;
}
#albums input[type="checkbox"]{ display: none; }
#albums input[type="checkbox"] ~ ul {
	display: block;
	position: fixed;
	top: 0; left: 200px;
	height: 100%;
	background: #0b0b0e;
	padding: 0;
	width: 200px;
	z-index: 9;
	cursor: default;
	visibility: hidden;
	opacity: 0;
}
#albums input[type="checkbox"]:checked ~ ul,
#albums:hover > ul { left:200px; visibility: visible!important; opacity: 1!important; }
#albums ul li {
	display: block;
	list-style: none;
	vertical-align: top;
	text-transform: none;
	font-size: 8pt;
	text-align: left;
	line-height: 20px;
	width: 200px;
	padding: 5px 0;
	box-sizing: border-box;
}
#albums ul li:hover { background: #39595d; }
#albums ul li span {
	width: 30px;
	display: inline-block;
	text-align: center;
	color: white;
	background: #111217;
	font-weight: normal;
}
#albums ul li:hover span { opacity: 1; }



#search input {
	display: inline;
	border: none;
	outline: none;
	width: 160px;
	line-height: 30px;
	padding: 0;
	color: #ccc; background: transparent;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-size: 8pt;
	letter-spacing: 1px;
}
#search input:focus, #search input:focus ~ i { background: #39595d; }
#search input ~ i { float: left; }


#page { text-align: left; }
#page h3 {
	margin: 0 0 30px 0; padding: 5px 0;
	color: #333;
	font-size: 24pt;
	border-bottom: 2px solid #ccc;
}
#page h4 {
	font-size: 16pt;
	margin-top: 20px; padding: 10px;
}
#page p {
	margin: 5px 0;
	text-indent: 10px;
	line-height: 1.2;
}
#page ul {
	margin: 15px 20px;
	list-style: disc inside;
}
#page ul li {
	margin: 5px;
	line-height: 1.2;
}


.noselect {
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	cursor: default;
}

.smooth,
.smooth > li,
.smooth > div,
.smooth > label {
	transition: all .10s ease-in-out;
	-o-transition: all .10s ease-in-out;
	-moz-transition: all .10s ease-in-out;
	-webkit-transition: all .10s ease-in-out;
	backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.board:before,
.label:before {
	content: ' ';
	display: inline-block;
	width: 20px; height: 18px;
	background-position: 0 0;
	background-size: 16px 16px;
	background-repeat: no-repeat;
	background-color: transparent;
	vertical-align: middle;
}
.board-cc:before { background-image:url(board/cc.png); }
.board-ni:before { background-image:url(board/ni.png); }
.label-ra:before { background-image:url(label/ra.gif); }