/* WARNING! This content is automatically generated from multiple stylesheets. */

/* +------------------------------------------------------------------------+
   | netjukebox <https://www.netjukebox.nl>                                 |
   | Copyright (C) 2001-2022  Willem Bartels                                |
   |                                                                        |
   | This file is part of netjukebox.                                       |
   |                                                                        |
   | netjukebox is free software: you can redistribute it and/or modify     |
   | it under the terms of the GNU General Public License as published by   |
   | the Free Software Foundation, either version 3 of the License, or      |
   | (at your option) any later version.                                    |
   |                                                                        |
   | netjukebox is distributed in the hope that it will be useful,          |
   | but WITHOUT ANY WARRANTY; without even the implied warranty of         |
   | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the          |
   | GNU General Public License for more details.                           |
   |                                                                        |
   | You should have received a copy of the GNU General Public License      |
   | along with netjukebox.  If not, see <https://www.gnu.org/licenses/>.   |
   +------------------------------------------------------------------------+ */




/* +------------------------------------------------------------------------+
   | style.css                                                              |
   +------------------------------------------------------------------------+ */
html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	color: black;
	/* first fontname wil be append from lib/fonts/fontname/fonts.css by static.php */
	font-family: roboto, helvetica, sans-serif;
	font-size: 13px;
	font-weight: 400;
}


b {
	font-weight: 500;
}


a,
[onclick] {
	color: #2B5980;
	text-decoration: none;
}


a:hover,
[onclick]:hover,
#cursor a {
	color: #0099FF;
	text-decoration: underline;
	cursor: pointer;
}


#menu, #submenu, #navigator, #loginform, #footer, #playlist_container, #playlist_control, #playlist_text, #tab, #autosuggest {
	margin: 0;
	padding: 0;
	list-style: none;
}


#wrapper_container {
	min-height: 100%;
	position: relative;
	background: #FFFFFF;
	background-image: url(skin/Clean/img/background.png?pzsotg);
	background-repeat: repeat-x;
	overflow: auto;
}


#menu_container {
	background-image: url(skin/Clean/img/sprite_menu@2x.png?pzsotg);
	background-size: 206px 298px;
	height: 73px;
	background-repeat: repeat-x;
}


#menu_container a.netjukebox {
	background-image: url(skin/Clean/img/sprite_menu@2x.png?pzsotg);
	background-size: 206px 298px;
	background-position: 0 -250px;
	width: 206px; height: 48px;
	position: absolute;
	top: 0; right: 0;
}


#content_container {
	margin-top: 20px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 40px; /* Height of the footer 30px + 10px margin */
}


#footer_container {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 30px; /* Height of the footer */
}




/* +------------------------------------------------------------------------+
   | Menu                                                                   |
   +------------------------------------------------------------------------+ */
#menu {
	position: absolute;
	top: 24px;
	left: 23px;
	height: 24px;
	overflow: hidden;
	z-index: 10; /* above netjukebox logo */
}


#menu li {
	float: left;
	width: 88px;
	padding-right: 4px;
	line-height: 24px; /* Align text vertical */
	text-align: center;
	background-image: url(skin/Clean/img/sprite_menu@2x.png?pzsotg);
	background-size: 206px 298px;
}


#menu li.off	{background-position: 0 -100px;}
#menu li.off a	{color: white;}


#menu li.on		{background-position: 0 -150px;}
#menu li.on a	{color: #2B5980;}


#menu li a {
	display: block;
	height: 24px;
	text-decoration: none;
}




/* +------------------------------------------------------------------------+
   | Sub menu                                                               |
   +------------------------------------------------------------------------+ */
#submenu {
	position: absolute;
	left: 20px;
	top: 48px;
	white-space: nowrap;
}


#submenu li {
	display: inline;
	height: 24px;
	line-height: 24px; /* Align text vertical */
	border-left: 1px solid #CCCCCC;
}


#submenu li:first-child {
	border-left: none;
}


#submenu li.character a {
	/* make text including width selectable */
	width: 24px;
	padding-left: 0;
	padding-right: 0;
	text-align: center;
}


#submenu li a {
	/* make text including padding selectable */
	display: inline-block;
	padding-left: 8px;
	padding-right: 8px;
}




/* +------------------------------------------------------------------------+
   | Navigator                                                              |
   +------------------------------------------------------------------------+ */
#navigator {
	margin-bottom: 20px;
	height: 26px;
	overflow: hidden;
}


#navigator li {
	float: left;
	line-height: 26px;
	background-image: url(skin/Clean/img/sprite_navigator.png?pzsotg);
}


#navigator li.nav {
	background-repeat: repeat-x;
	font-weight: 500;
}


#navigator li.suggest {
	background-position: 0 -50px;
}


#navigator li.home				{background-position: 0 -150px; width: 10px;}
#navigator li.nav_nav			{background-position: 0 -100px; width: 20px;}
#navigator li.nav_suggest		{background-position: -20px -100px; width: 20px;}
#navigator li.suggest_suggest	{background-position: -40px -100px; width: 20px;}
#navigator li.suggest_nav		{background-position: -60px -100px; width: 20px;}
#navigator li.nav_close			{background-position: -40px -150px; width: 20px;}
#navigator li.suggest_close		{background-position: -60px -150px; width: 10px;}


#navigator li span,
#navigator li a {
	display: block;
	padding-left: 2px;
	padding-right: 2px;
}




/* +------------------------------------------------------------------------+
   | Tab                                                                    |
   +------------------------------------------------------------------------+ */
#tab {
	margin-left: 10px;
}


#tab li {
	float: left;
	display: block;
	width: 100px;
	height: 25px;
	line-height: 26px; /* hold the same verticle text alignment (height + 1px) */
	background: #B5D0DD;
	border: 1px solid #2B5980;
	border-bottom-width: 0;
	text-align: center;
	margin-right: 10px;
}


#tab li.on {
	position: relative;
	top: 1px;
	line-height: 24px; /* hold the same verticle text alignment (height - 1px) */
	background: #5181A6;
	color: white;
	font-weight: 500;
}


table.tab {
	clear: left;
	width: 100%;
	border: 1px solid #2B5980;
	background-color: #5181A6;
}




/* +------------------------------------------------------------------------+
   | Autosuggest                                                            |
   +------------------------------------------------------------------------+ */
#autosuggest {
	margin-top: 10px;
	border: 1px solid #2B5980;
}


#autosuggest li {
	height: 25px;
	line-height: 25px; /* Align text vertical */
	width: 400px;
}


#autosuggest li.odd {
	background-color: #EAF1F4;
}


#autosuggest li.even {
	background-color: #FFFFFF;
}


#autosuggest li a {
	/* make text including padding selectable */
	display: block;
	padding-left: 10px;
	padding-right: 10px;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


#autosuggest.bottom_space {
	margin-bottom: 10px;
}




/* +------------------------------------------------------------------------+
   | Playlist                                                               |
   +------------------------------------------------------------------------+ */
#playlist_container {
	border: 1px solid #2B5980;
}


#playlist_cover img {
	width: 100px;
	height: 100px;
	border-right: 1px solid #2B5980;
	float: left;
}


#playlist_text {
	height: 100px;
	overflow: hidden;
}


#playlist_text li{
	height: 25px;
	line-height: 25px; /* Align text vertical */
}


#playlist_text li.odd {
	background-color: #EAF1F4;
}


#playlist_text li.even {
	background-color: #FFFFFF;
}


#playlist_text li .description {
	font-weight: 500;
	display: inline-block;
	margin-left: 10px;
	width: 65px;
}


#playlist_control {
	background-image: url(skin/Clean/img/sprite_playlist.png?pzsotg);
	background-repeat: repeat-x;
	height: 25px;
	border-left: 1px solid #2B5980;
	border-bottom: 1px solid #2B5980;
	border-right: 1px solid #2B5980;
	overflow: hidden;
	margin-bottom: 20px;
}


#playlist_control li,
#playlist_control li div {
	background-image: url(skin/Clean/img/sprite_playlist.png?pzsotg);
	float: left;
	width: 50px;
	height: 25px;
	text-indent: -9999px;
}


#playlist_control li.previous			{background-position: 0 -200px;}
#playlist_control li.next				{background-position: -50px -200px;}
#playlist_control li.stop				{background-position: -100px -200px;}
#playlist_control li.display			{background-position: -150px -200px; width: 60px;}


#playlist_control li.shuffle.off		{background-position: 0 -250px;}
#playlist_control li.shuffle.on			{background-position: 0 -300px;}
#playlist_control li.repeat.off			{background-position: 0 -250px;}
#playlist_control li.repeat.on			{background-position: 0 -300px;}
#playlist_control li.gain.off			{background-position: 0 -250px;}
#playlist_control li.gain.on			{background-position: 0 -300px;}


#playlist_control li.play.off			{background-position: -50px -250px;}
#playlist_control li.play.on			{background-position: -50px -300px;}
#playlist_control li.pause.off			{background-position: -100px -250px;}
#playlist_control li.pause.on			{background-position: -100px -300px;}


#playlist_control li.progress			{background-position: 0 -50px; width: 210px;}
#playlist_control li.progress div.input	{background-position: 0 -25px; width: 200px; margin-left: 5px;}
#playlist_control li.progress div.on	{background-position: 0 -100px; width: 0; overflow: hidden;}
#playlist_control li.progress div.off	{background-position: 0 -150px; width: 0; overflow: hidden;}


#playlist_control li.shuffle,
#playlist_control li.repeat,
#playlist_control li.gain {
	text-indent: 15px;
	line-height: 25px; /* Align text vertical */
	font-size: 11px;
	color: #CAD2EC;
}


#playlist_control li.display {
	text-indent: 0;
	text-align: center;
	line-height: 25px; /* Align text vertical */
	font-size: 12px;
	font-weight: 500;
	color: #CAD2EC;
}


#playlist_control li[onclick],
#playlist_control li div[onclick] {
	color: white;
	text-decoration: none;
}




/* +------------------------------------------------------------------------+
   | Login form                                                             |
   +------------------------------------------------------------------------+ */
#loginform {
	margin: 170px auto 0; /* Align */
	width: 255px;
	padding: 15px;
	border: solid 2px #2B5980;
	background: #B6D0DC;
	border-radius: 8px;
}


#loginform .description {
	/* display: block; */
	float: left;
	line-height: 22px; /* Align text vertical */
	font-weight: 500;
	text-align: right;
	width: 80px;
}


#loginform .input {
	float: left;
	width: 140px;
	margin: 0 0 10px 10px;
}


#loginform button {
	width: 75px;
	height: 28px;
	margin: 0 0 10px 10px;
	cursor: pointer;
}


#loginform div.footer {
	font-size: 12px;
	border-top: solid 1px #2B5980;
	padding-top: 10px;
}




/* +------------------------------------------------------------------------+
   | Logout form                                                            |
   +------------------------------------------------------------------------+ */
#logoutform {
	margin: 170px auto 0; /* Align */
	width: 250px;
	padding: 15px;
	border: solid 2px #2B5980;
	background: #B6D0DC;
	border-radius: 8px;
}


#logoutform label {
	display: block;
	/* float: left; */
	width: 250px;
	margin: 0 0 10px 0;
}


#logoutform button {
	width: 75px;
	height: 28px;
	margin-top: 10px;
	cursor: pointer;
}




/* +------------------------------------------------------------------------+
   | Footer                                                                 |
   +------------------------------------------------------------------------+ */
#footer {
	text-align: center;
	white-space: nowrap;
}


#footer li {
	display: inline;
	line-height: 30px; /* Align text vertical */
	font-size: 11px;
	border-right: 1px solid #CCCCCC;

}


#footer li:first-child {
	padding-left: 3px;
	border-left: 1px solid #CCCCCC;
}


#footer li > span,
#footer li a {
	/* make text including padding selectable */
	display: inline-block;
	padding-left: 6px;
	padding-right: 6px;
}




/* +------------------------------------------------------------------------+
   | Bottom space                                                           |
   +------------------------------------------------------------------------+ */
.bottom_space {
	margin-bottom: 20px;
}




/* +------------------------------------------------------------------------+
   | Button                                                                 |
   +------------------------------------------------------------------------+ */
#menu,
a.button {
	font-size: 16px;
	font-weight: 300;
}


a.button {
	display: inline-block;
	vertical-align: middle;
	background-image: url(skin/Clean/img/sprite_menu@2x.png?pzsotg);
	background-size: 206px 298px;
	background-position: -100px -150px;
	width: 106px;
	height: 26px;
	line-height: 26px; /* Align text vertical */
	color: white;
	text-align: center;
	margin-right: 10px;
}


a.smallbutton {
	display: inline-block;
	vertical-align: middle;
	background-image: url(skin/Clean/img/sprite_menu@2x.png?pzsotg);
	background-size: 206px 298px;
	background-position: -100px -100px;
	width: 63px;
	height: 15px;
	line-height: 15px; /* Align text vertical */
	color: white;
	text-align: center;
	font-size: 12px;
	margin-right: 5px;
}


a.button:hover,
a.smallbutton:hover,
tr.footer a.smallbutton:hover /* to override tr.footer a:hover */ {
	color: white;
	text-decoration: none;
}





/* +------------------------------------------------------------------------+
   | Bar                                                                    |
   +------------------------------------------------------------------------+ */
.bar,
.bar div {
	background-image: url(skin/Clean/img/sprite_bar.png?pzsotg);
	height: 25px;
	display: block;
}


.bar {
	/* background */
	background-position: 0 0;
	width: 102px;
}


.bar > div {
	/* wrapper */
	width: 100px;
	padding-left: 1px;
}


.bar div div:last-child {
	/* second bar */
	background-position: 0 -50px;
	width: 0;
	overflow: hidden;
	float: left;
}


.bar div div:first-child {
	/* first bar */
	background-position: 0 -25px;
	width: 0;
	overflow: hidden;
	float: left;
}





/* +------------------------------------------------------------------------+
   | Tooltip                                                                |
   +------------------------------------------------------------------------+ */
#tooltip {
	padding: 5px;
	border: 1px solid #2B5980;
	border-radius: 8px;
	border-top-left-radius: 0;
	background: rgba(181, 208, 221, 0.95);
	font-size: 13px;
	position: absolute;
	left: -9999px;
	top: -9999px;
	z-index: 1000;
	display: none;
}


#tooltip hr {
	border: none;
	height: 1px;
	background-color: #2B5980;
	margin-top: 5px;
	margin-bottom: 4px;
}




/* +------------------------------------------------------------------------+
   | BBCode                                                                 |
   +------------------------------------------------------------------------+ */
ul.bbcode {
	margin-top: 2px;
	margin-bottom: 0;
}




/* +------------------------------------------------------------------------+
   | Form                                                                   |
   +------------------------------------------------------------------------+ */
form,
input,
select {
	margin: 0;
	font-size: 13px;
	vertical-align: middle;
}


input[type="text"],
input[type="password"],
select {
	padding: 2px 10px;
	border: solid 1px #2B5980;
}


input.year,
select.year {
	width: 55px; /* + 20px padding = 75px */
}


input.short,
select.short {
	width: 155px; /* + 20px padding = 175px */
}


input.edit {
	width: 330px; /* + 20px padding = 350px */
}


input.search[type="file"] {
    width: 400px; /* same with as autosuggest */
}


input.search {
	width: 380px; /* same with as autosuggest, + 20px padding = 400px */
}


input.readonly,
select.readonly {
	background: #B6D0DC;
}


input.error,
select.error {
	background: #FFD8D8;
}


input.space {
	margin-right: 5px;
}





/* +------------------------------------------------------------------------+
   | Table                                                                  |
   +------------------------------------------------------------------------+ */
table {
	border-spacing: 0; /* <table cellspacing="0"> */

}


th, td {
	padding: 0; /* <table cellpadding="0"> */
}


table.border {
	border: 1px solid #2B5980;
}


td.vertical_line {
	/* *** ONLY NEEDED IN VIEW3 *** */
	width: 1px;
	background-color: #2B5980;
}


td.nowrap,
tr.nowrap td {
	white-space: nowrap;
}




/* +------------------------------------------------------------------------+
   | Table header, section & footer                                         |
   +------------------------------------------------------------------------+ */
tr.header,
tr.section,
tr.footer {
	color: #B6D0DC;
}


tr.header a,
tr.section a,
tr.footer a {
	color: white;
}


tr.header a:hover,
tr.section a:hover,
tr.footer a:hover {
	color: #B5D0DD;
}


tr.header {
	height: 26px; /* 25px + 1px border */
	font-weight: 500;
	background-image: url(skin/Clean/img/small_header.png?pzsotg);
	background-repeat: repeat-x;
	background-position: top;
}


tr.header td {
	border-bottom: 1px solid #2B5980;
	white-space: nowrap;
}


tr.section {
	height: 27px; /* 25px + 2px border */
	font-weight: 500;
	background-image: url(skin/Clean/img/small_header.png?pzsotg);
	background-repeat: repeat-x;
	background-position: center;
}


tr.section td {
	border-top: 1px solid #2B5980;
	border-bottom: 1px solid #2B5980;
	white-space: nowrap;
}


tr.footer {
	height: 26px; /* 25px + 1px border */
	background-color: #2B5980;
}


tr.footer td {
	border-top: 1px solid #2B5980;
	white-space: nowrap;
}




/* +------------------------------------------------------------------------+
   | Table odd, even, select & mouseover                                    |
   +------------------------------------------------------------------------+ */
tr.odd {
	height: 25px;
	background-color: #EAF1F4;
}


tr.even {
	height: 25px;
	background-color: #FFFFFF;
}


tr.mouseover:hover,
tr[onclick]:hover,
#cursor a {
	background-color: #B6D0DC;
}


tr.odd.ok {
	background-color: #E9FFE9;
}


tr.ok,
tr.ok td[onclick] {
	color: Green;
}


tr.odd.error {
	background-color: #FFEAEA;
}


tr.error,
tr.error td[onclick] {
	color: Red;
}


tr.select {
	height: 25px;
	background-color: #9DFF9D;
}







/* +------------------------------------------------------------------------+
   | Table ok, warning, error & noscript                                    |
   +------------------------------------------------------------------------+ */
table.ok {
	margin: 170px auto 0; /* Align */
	border-spacing: 10px;
	border: 2px solid #529600;
	background-color: #EFFFD6;
	border-radius: 8px;
}


table.ok a {
	color: #529600;
	text-decoration: underline;
}


table.ok td {
	vertical-align: top;
}


table.ok hr {
	border: none;
	height: 1px;
	background-color: #529600;
	margin-top: 10px;
	margin-bottom: 9px;
}


table.warning {
	margin: 170px auto 0; /* Align */
	border-spacing: 10px;
	border: 2px solid #2B5980;
	background-color: #B6D0DC;
	border-radius: 8px;
}


table.warning a {
	color: #42559C;
	text-decoration: underline;
}


table.warning td {
	vertical-align: top;
}


table.warning hr {
	border: none;
	height: 1px;
	background-color: #2B5980;
	margin-top: 10px;
	margin-bottom: 9px;
}


table.error {
	margin: 170px auto 0; /* Align */
	border-spacing: 10px;
	border: 2px solid Red;
	background-color: #FFA4A4;
	border-radius: 8px;
}


table.error a {
	color: Red;
	text-decoration: underline;
}


table.error td {
	vertical-align: top;
}


table.error hr {
	border: none;
	height: 1px;
	background-color: Red;
	margin-top: 10px;
	margin-bottom: 9px;
}


table.noscript {
	margin-bottom: -9999px; /* Remove content below table noscript */
}




/* +------------------------------------------------------------------------+
   | Table various                                                          |
   +------------------------------------------------------------------------+ */
tr.list {
	height: 54px;
}




/* +------------------------------------------------------------------------+
   | Table space & align                                                    |
   +------------------------------------------------------------------------+ */
td.smallspace {
	width: 5px;
}


td.space {
	width: 10px;
}


td.textspace {
	width: 40px;
}


td.matrix {
	width: 65px;
	text-align: center;
}


tr.smallspace {
	/* vertical space */
	height: 5px;
}


tr.space {
	/* vertical space */
	height: 10px;
}


tr.textspace {
	/* vertical space */
	height: 21px;
}




/* +------------------------------------------------------------------------+
   | Image                                                                  |
   +------------------------------------------------------------------------+ */
img {
	border: 0;
	vertical-align: middle;
}


img.space {
	margin-right: 3px; /* very small space for padding icons */
}


img.tiny {
	width: 10px;
	height: 10px;
	padding: 2px;
	margin-left: 3px;
}


img.small {
	width: 21px;
	height: 21px;
	padding: 2px;
}


img.small_high {
	width: 21px;
	height: 21px;
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 14px;
	padding-bottom: 14px;
}


img.medium {
	width: 32px;
	height: 32px;
	margin-right: 10px;
}


img.qrcode {
	margin-top: 10px;
	margin-bottom: 10px;
}


img.tooltip {
	width: 100px;
	height: 100px;
}




/* +------------------------------------------------------------------------+
   | Thumbnail                                                              |
   +------------------------------------------------------------------------+ */
td.thumbnail_wrapper {
	border-right: 1px solid white;
	border-bottom: 1px solid white;
}


div.thumbnail_box {
	position: relative;
	float: left;
	width: var(--size);
	padding-bottom: var(--size);
}


div.thumbnail_content {
	position: absolute;
	border-top: 1px solid white;
	border-left: 1px solid white;
}


img.thumbnail {
	width: 100%;
	height: 100%;
}


div.thumbnail_overlay {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 54px;
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.60) 100%);
}


div.thumbnail_info {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 14px;
	font-weight: 300;
	color: white;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.60);
}


@media only screen and (max-width: 425px) {div.thumbnail_box {--size: calc(100% / 2);}}
@media only screen and (min-width: 426px) and (max-width: 626px) {div.thumbnail_box {--size: calc(100% / 3);}}
@media only screen and (min-width: 627px) and (max-width: 827px) {div.thumbnail_box {--size: calc(100% / 4);}}
@media only screen and (min-width: 828px) and (max-width: 1028px) {div.thumbnail_box {--size: calc(100% / 5);}}
@media only screen and (min-width: 1029px) and (max-width: 1229px) {div.thumbnail_box {--size: calc(100% / 6);}}
@media only screen and (min-width: 1230px) and (max-width: 1430px) {div.thumbnail_box {--size: calc(100% / 7);}}
@media only screen and (min-width: 1431px) and (max-width: 1631px) {div.thumbnail_box {--size: calc(100% / 8);}}
@media only screen and (min-width: 1632px) and (max-width: 1832px) {div.thumbnail_box {--size: calc(100% / 9);}}
@media only screen and (min-width: 1833px) and (max-width: 2033px) {div.thumbnail_box {--size: calc(100% / 10);}}
@media only screen and (min-width: 2034px) and (max-width: 2234px) {div.thumbnail_box {--size: calc(100% / 11);}}
@media only screen and (min-width: 2235px) and (max-width: 2435px) {div.thumbnail_box {--size: calc(100% / 12);}}
@media only screen and (min-width: 2436px) and (max-width: 2636px) {div.thumbnail_box {--size: calc(100% / 13);}}
@media only screen and (min-width: 2637px) and (max-width: 2837px) {div.thumbnail_box {--size: calc(100% / 14);}}
@media only screen and (min-width: 2838px) and (max-width: 3038px) {div.thumbnail_box {--size: calc(100% / 15);}}
@media only screen and (min-width: 3039px) and (max-width: 3239px) {div.thumbnail_box {--size: calc(100% / 16);}}
@media only screen and (min-width: 3240px) and (max-width: 3440px) {div.thumbnail_box {--size: calc(100% / 17);}}
@media only screen and (min-width: 3441px) and (max-width: 3641px) {div.thumbnail_box {--size: calc(100% / 18);}}
@media only screen and (min-width: 3642px) and (max-width: 3842px) {div.thumbnail_box {--size: calc(100% / 19);}}
@media only screen and (min-width: 3843px) and (max-width: 4043px) {div.thumbnail_box {--size: calc(100% / 20);}}
@media only screen and (min-width: 4044px) and (max-width: 4244px) {div.thumbnail_box {--size: calc(100% / 21);}}
@media only screen and (min-width: 4245px) and (max-width: 4445px) {div.thumbnail_box {--size: calc(100% / 22);}}
@media only screen and (min-width: 4446px) and (max-width: 4646px) {div.thumbnail_box {--size: calc(100% / 23);}}
@media only screen and (min-width: 4647px) and (max-width: 4847px) {div.thumbnail_box {--size: calc(100% / 24);}}
@media only screen and (min-width: 4848px) {div.thumbnail_box {--size: calc(100% / 25);}}




/* +------------------------------------------------------------------------+
   | Flag                                                                   |
   +------------------------------------------------------------------------+ */
.flag {
	background-image: url(skin/Clean/img/sprite_flag@2x.png?pzsotg);
	background-position: 0 0;
	background-size: 256px 272px;
	background-repeat: no-repeat;
	width: 16px;
	height: 16px;
	margin-right: 5px;
	display: inline-block;
	vertical-align: middle;
}


.flag.Z1 {background-position: -16px 0}
.flag.AD {background-position: 0 -16px}
.flag.AE {background-position: -16px -16px}
.flag.AF {background-position: -32px -16px}
.flag.AG {background-position: -48px -16px}
.flag.AI {background-position: -64px -16px}
.flag.AL {background-position: -80px -16px}
.flag.AM {background-position: -96px -16px}
.flag.AN {background-position: -112px -16px}
.flag.AO {background-position: -128px -16px}
.flag.AQ {background-position: -144px -16px}
.flag.AR {background-position: -160px -16px}
.flag.AS {background-position: -176px -16px}
.flag.AT {background-position: -192px -16px}
.flag.AU {background-position: -208px -16px}
.flag.AW {background-position: -224px -16px}
.flag.AX {background-position: -240px -16px}
.flag.AZ {background-position: 0 -32px}
.flag.BA {background-position: -16px -32px}
.flag.BB {background-position: -32px -32px}
.flag.BD {background-position: -48px -32px}
.flag.BE {background-position: -64px -32px}
.flag.BF {background-position: -80px -32px}
.flag.BG {background-position: -96px -32px}
.flag.BH {background-position: -112px -32px}
.flag.BI {background-position: -128px -32px}
.flag.BJ {background-position: -144px -32px}
.flag.BL {background-position: -160px -32px}
.flag.BM {background-position: -176px -32px}
.flag.BN {background-position: -192px -32px}
.flag.BO {background-position: -208px -32px}
.flag.BR {background-position: -224px -32px}
.flag.BS {background-position: -240px -32px}
.flag.BT {background-position: 0 -48px}
.flag.BW {background-position: -16px -48px}
.flag.BY {background-position: -32px -48px}
.flag.BZ {background-position: -48px -48px}
.flag.CA {background-position: -64px -48px}
.flag.CC {background-position: -80px -48px}
.flag.CD {background-position: -96px -48px}
.flag.CF {background-position: -112px -48px}
.flag.CG {background-position: -128px -48px}
.flag.CH {background-position: -144px -48px}
.flag.CI {background-position: -160px -48px}
.flag.CK {background-position: -176px -48px}
.flag.CL {background-position: -192px -48px}
.flag.CM {background-position: -208px -48px}
.flag.CN {background-position: -224px -48px}
.flag.CO {background-position: -240px -48px}
.flag.CR {background-position: 0 -64px}
.flag.CU {background-position: -16px -64px}
.flag.CV {background-position: -32px -64px}
.flag.CW {background-position: -48px -64px}
.flag.CX {background-position: -64px -64px}
.flag.CY {background-position: -80px -64px}
.flag.CZ {background-position: -96px -64px}
.flag.DE {background-position: -112px -64px}
.flag.DJ {background-position: -128px -64px}
.flag.DK {background-position: -144px -64px}
.flag.DM {background-position: -160px -64px}
.flag.DO {background-position: -176px -64px}
.flag.DZ {background-position: -192px -64px}
.flag.EC {background-position: -208px -64px}
.flag.EE {background-position: -224px -64px}
.flag.EG {background-position: -240px -64px}
.flag.EH {background-position: 0 -80px}
.flag.ER {background-position: -16px -80px}
.flag.ES {background-position: -32px -80px}
.flag.ET {background-position: -48px -80px}
.flag.EU {background-position: -64px -80px}
.flag.FI {background-position: -80px -80px}
.flag.FJ {background-position: -96px -80px}
.flag.FK {background-position: -112px -80px}
.flag.FM {background-position: -128px -80px}
.flag.FO {background-position: -144px -80px}
.flag.FR {background-position: -160px -80px}
.flag.GA {background-position: -176px -80px}
.flag.GB {background-position: -192px -80px}
.flag.GD {background-position: -208px -80px}
.flag.GE {background-position: -224px -80px}
.flag.GG {background-position: -240px -80px}
.flag.GH {background-position: 0 -96px}
.flag.GI {background-position: -16px -96px}
.flag.GL {background-position: -32px -96px}
.flag.GM {background-position: -48px -96px}
.flag.GN {background-position: -64px -96px}
.flag.GQ {background-position: -80px -96px}
.flag.GR {background-position: -96px -96px}
.flag.GS {background-position: -112px -96px}
.flag.GT {background-position: -128px -96px}
.flag.GU {background-position: -144px -96px}
.flag.GW {background-position: -160px -96px}
.flag.GY {background-position: -176px -96px}
.flag.HK {background-position: -192px -96px}
.flag.HN {background-position: -208px -96px}
.flag.HR {background-position: -224px -96px}
.flag.HT {background-position: -240px -96px}
.flag.HU {background-position: 0 -112px}
.flag.IC {background-position: -16px -112px}
.flag.ID {background-position: -32px -112px}
.flag.IE {background-position: -48px -112px}
.flag.IL {background-position: -64px -112px}
.flag.IM {background-position: -80px -112px}
.flag.IN {background-position: -96px -112px}
.flag.IQ {background-position: -112px -112px}
.flag.IR {background-position: -128px -112px}
.flag.IS {background-position: -144px -112px}
.flag.IT {background-position: -160px -112px}
.flag.JE {background-position: -176px -112px}
.flag.JM {background-position: -192px -112px}
.flag.JO {background-position: -208px -112px}
.flag.JP {background-position: -224px -112px}
.flag.KE {background-position: -240px -112px}
.flag.KG {background-position: 0 -128px}
.flag.KH {background-position: -16px -128px}
.flag.KI {background-position: -32px -128px}
.flag.KM {background-position: -48px -128px}
.flag.KN {background-position: -64px -128px}
.flag.KP {background-position: -80px -128px}
.flag.KR {background-position: -96px -128px}
.flag.KW {background-position: -112px -128px}
.flag.KY {background-position: -128px -128px}
.flag.KZ {background-position: -144px -128px}
.flag.LA {background-position: -160px -128px}
.flag.LB {background-position: -176px -128px}
.flag.LC {background-position: -192px -128px}
.flag.LI {background-position: -208px -128px}
.flag.LK {background-position: -224px -128px}
.flag.LR {background-position: -240px -128px}
.flag.LS {background-position: 0 -144px}
.flag.LT {background-position: -16px -144px}
.flag.LU {background-position: -32px -144px}
.flag.LV {background-position: -48px -144px}
.flag.LY {background-position: -64px -144px}
.flag.MA {background-position: -80px -144px}
.flag.MC {background-position: -96px -144px}
.flag.MD {background-position: -112px -144px}
.flag.ME {background-position: -128px -144px}
.flag.MF {background-position: -144px -144px}
.flag.MG {background-position: -160px -144px}
.flag.MH {background-position: -176px -144px}
.flag.MK {background-position: -192px -144px}
.flag.ML {background-position: -208px -144px}
.flag.MM {background-position: -224px -144px}
.flag.MN {background-position: -240px -144px}
.flag.MO {background-position: 0 -160px}
.flag.MP {background-position: -16px -160px}
.flag.MQ {background-position: -32px -160px}
.flag.MR {background-position: -48px -160px}
.flag.MS {background-position: -64px -160px}
.flag.MT {background-position: -80px -160px}
.flag.MU {background-position: -96px -160px}
.flag.MV {background-position: -112px -160px}
.flag.MW {background-position: -128px -160px}
.flag.MX {background-position: -144px -160px}
.flag.MY {background-position: -160px -160px}
.flag.MZ {background-position: -176px -160px}
.flag.NA {background-position: -192px -160px}
.flag.NC {background-position: -208px -160px}
.flag.NE {background-position: -224px -160px}
.flag.NF {background-position: -240px -160px}
.flag.NG {background-position: 0 -176px}
.flag.NI {background-position: -16px -176px}
.flag.NL {background-position: -32px -176px}
.flag.NO {background-position: -48px -176px}
.flag.NP {background-position: -64px -176px}
.flag.NR {background-position: -80px -176px}
.flag.NU {background-position: -96px -176px}
.flag.NZ {background-position: -112px -176px}
.flag.OM {background-position: -128px -176px}
.flag.PA {background-position: -144px -176px}
.flag.PE {background-position: -160px -176px}
.flag.PF {background-position: -176px -176px}
.flag.PG {background-position: -192px -176px}
.flag.PH {background-position: -208px -176px}
.flag.PK {background-position: -224px -176px}
.flag.PL {background-position: -240px -176px}
.flag.PN {background-position: 0 -192px}
.flag.PR {background-position: -16px -192px}
.flag.PS {background-position: -32px -192px}
.flag.PT {background-position: -48px -192px}
.flag.PW {background-position: -64px -192px}
.flag.PY {background-position: -80px -192px}
.flag.QA {background-position: -96px -192px}
.flag.RO {background-position: -112px -192px}
.flag.RS {background-position: -128px -192px}
.flag.RU {background-position: -144px -192px}
.flag.RW {background-position: -160px -192px}
.flag.SA {background-position: -176px -192px}
.flag.SB {background-position: -192px -192px}
.flag.SC {background-position: -208px -192px}
.flag.SD {background-position: -224px -192px}
.flag.SE {background-position: -240px -192px}
.flag.SG {background-position: 0 -208px}
.flag.SH {background-position: -16px -208px}
.flag.SI {background-position: -32px -208px}
.flag.SK {background-position: -48px -208px}
.flag.SL {background-position: -64px -208px}
.flag.SM {background-position: -80px -208px}
.flag.SN {background-position: -96px -208px}
.flag.SO {background-position: -112px -208px}
.flag.SR {background-position: -128px -208px}
.flag.SS {background-position: -144px -208px}
.flag.ST {background-position: -160px -208px}
.flag.SV {background-position: -176px -208px}
.flag.SY {background-position: -192px -208px}
.flag.SZ {background-position: -208px -208px}
.flag.TC {background-position: -224px -208px}
.flag.TD {background-position: -240px -208px}
.flag.TF {background-position: 0 -224px}
.flag.TG {background-position: -16px -224px}
.flag.TH {background-position: -32px -224px}
.flag.TJ {background-position: -48px -224px}
.flag.TK {background-position: -64px -224px}
.flag.TL {background-position: -80px -224px}
.flag.TM {background-position: -96px -224px}
.flag.TN {background-position: -112px -224px}
.flag.TO {background-position: -128px -224px}
.flag.TR {background-position: -144px -224px}
.flag.TT {background-position: -160px -224px}
.flag.TV {background-position: -176px -224px}
.flag.TW {background-position: -192px -224px}
.flag.TZ {background-position: -208px -224px}
.flag.UA {background-position: -224px -224px}
.flag.UG {background-position: -240px -224px}
.flag.US {background-position: 0 -240px}
.flag.UY {background-position: -16px -240px}
.flag.UZ {background-position: -32px -240px}
.flag.VA {background-position: -48px -240px}
.flag.VC {background-position: -64px -240px}
.flag.VE {background-position: -80px -240px}
.flag.VG {background-position: -96px -240px}
.flag.VI {background-position: -112px -240px}
.flag.VN {background-position: -128px -240px}
.flag.VU {background-position: -144px -240px}
.flag.WF {background-position: -160px -240px}
.flag.WS {background-position: -176px -240px}
.flag.YE {background-position: -192px -240px}
.flag.YT {background-position: -208px -240px}
.flag.ZA {background-position: -224px -240px}
.flag.ZM {background-position: -240px -240px}
.flag.ZW {background-position: 0 -256px}




/* +------------------------------------------------------------------------+
   | fonts.css                                                              |
   +------------------------------------------------------------------------+ */
/* @import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500'; */
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url(lib/fonts/roboto/v27/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url(lib/fonts/roboto/v27/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url(lib/fonts/roboto/v27/KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url(lib/fonts/roboto/v27/KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url(lib/fonts/roboto/v27/KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url(lib/fonts/roboto/v27/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url(lib/fonts/roboto/v27/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(lib/fonts/roboto/v27/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(lib/fonts/roboto/v27/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(lib/fonts/roboto/v27/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(lib/fonts/roboto/v27/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(lib/fonts/roboto/v27/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(lib/fonts/roboto/v27/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(lib/fonts/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(lib/fonts/roboto/v27/KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(lib/fonts/roboto/v27/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(lib/fonts/roboto/v27/KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(lib/fonts/roboto/v27/KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(lib/fonts/roboto/v27/KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(lib/fonts/roboto/v27/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(lib/fonts/roboto/v27/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}