@charset "utf-8";
/* CSS Document */

html, body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; }
.charts-box { width: 1024px; height: 768px; background-color: #000000; margin: 0 auto; }
.block { width: 321px; height: 321px; background-color: #3e4d63; float: left; margin-left: 15px; margin-top: 15px; }
.block-max { width: 994px; height: 401px; }
.block-pink { 
	background-color: #e27bf5; 
	background-image: url(/img/charts/bg_today.png); 
	background-position: left bottom;
	background-repeat: no-repeat;
}
.block-padding { padding: 15px; text-align: center; color: #FFFFFF; }
.block-title {
	background-color: #344155;
	padding: 25px;
	text-transform: uppercase;
	font-size: 21px;
}
.block-title .chart-title { display: none; }
.block-title .title-active { display: inline-block; }
.block-pink .block-title { background-color: #b96fd0; }
.block-logo-box { background-image: url(/img/charts/logo.png); background-position: center; background-repeat: no-repeat; }
body.kk .block-logo-box { background-image: url(/img/charts/logo_kk.png); }

.block-today-content,
.block-source-content {
	text-transform: uppercase;
}
span.count { font-weight: bold; }
.block-source-content span.count { color: #eb9bfa; }
.block-today-content ul,
.block-source-content ul { margin: 0; padding: 0; }
.block-today-content ul li,
.block-source-content ul li { margin: 0; padding: 0 25px; list-style: none; font-size: 20px; }
.block-today-content ul li { margin-top: 40px;  }
.block-source-content ul li { margin-top:21px;  }
.block-charts { position: relative; }
.chart { 
	margin: 15px;
	margin-bottom: 0;
	height: 297px;
	position: absolute;
	left: 0;
	right: 0;
	opacity: 0;
	z-index: 0;
}

.block-charts .active { opacity: 1; z-index: 1; }

.chart-title-buttons { float: right; overflow: hidden; }
.chart-title-buttons .chart-title-button { 
	padding: 12px; 
	background-color: #344c64;
	float: left;
	margin-left: 15px;
	border-radius: 50%;
	cursor: pointer;
}
.chart-title span { display: none; }
.chart-title span.active { display: inline-block; }
.chart-title-buttons .active {
	background-color: #cf70d4;
}

.box-legend {
	width: 40%; 
	height: 100%; 
	float: left; 
	background-color: #3e4d63;
}
.box-legend ul { 
	margin: 0;
	padding: 0;
	padding-left: 30px;
}
.box-legend ul li {
	margin-top: 15px;
	list-style: none;
	display: block;
}
.box-legend ul li:first-child { margin-top: 0; }
.box-legend ul li span { 
	background-color: #e27bf5; 
	width: 15px; 
	height: 15px; 
	border-radius: 50%; 
	display: inline;
	float: left;
	margin-right: 10px;
}
.box-legend ul li span.legend-text { margin-left: 20px; width: auto; height: auto; background: none;}
.box-legend ul li span.legend-1 { background-color: #e27bf5; }
.box-legend ul li span.legend-2 { background-color: #42a7e3; }
.box-legend ul li span.legend-3 { background-color: #00d355; }
.box-legend ul li span.legend-4 { background-color: #add14a; }
body.kk .block-today-content ul li { margin-top: 34px !important; }