@import url(https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700&subset=latin,latin-ext);

html, body {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font: normal 14px "Roboto Condensed",Verdana,Arial,Helvetica,sans-serif;
}

#page {
	position: relative;
	width: 98%;
	min-width: 950px;
	height: 100%;
	min-height: 450px;
	margin: 0 auto;
	padding: 0 5px;
}

/* a grafikon színei */
		#toplevel tr.highlight th, #toplevel tr.highlight td {
			background: #ccc;
		}

#toplevel tr.cat0  td, #toplevel tr.cat0  th { border-bottom-color: #000066; } #toplevel tr.highlight.cat0  td, #toplevel tr.highlight.cat0  th, #treemap span.cat0 , #categ th.cat0  { background-color: #000066; }
#toplevel tr.cat1  td, #toplevel tr.cat1  th { border-bottom-color: #213884; } #toplevel tr.highlight.cat1  td, #toplevel tr.highlight.cat1  th, #treemap span.cat1 , #categ th.cat1  { background-color: #213884; }
#toplevel tr.cat2  td, #toplevel tr.cat2  th { border-bottom-color: #436fa2; } #toplevel tr.highlight.cat2  td, #toplevel tr.highlight.cat2  th, #treemap span.cat2 , #categ th.cat2  { background-color: #436fa2; }
#toplevel tr.cat3  td, #toplevel tr.cat3  th { border-bottom-color: #64a7c0; } #toplevel tr.highlight.cat3  td, #toplevel tr.highlight.cat3  th, #treemap span.cat3 , #categ th.cat3  { background-color: #64a7c0; }
#toplevel tr.cat4  td, #toplevel tr.cat4  th { border-bottom-color: #85dede; } #toplevel tr.highlight.cat4  td, #toplevel tr.highlight.cat4  th, #treemap span.cat4 , #categ th.cat4  { background-color: #85dede; }
#toplevel tr.cat5  td, #toplevel tr.cat5  th { border-bottom-color: #ffffcc; } #toplevel tr.highlight.cat5  td, #toplevel tr.highlight.cat5  th, #treemap span.cat5 , #categ th.cat5  { background-color: #ffffcc; }
#toplevel tr.cat6  td, #toplevel tr.cat6  th { border-bottom-color: #fed976; } #toplevel tr.highlight.cat6  td, #toplevel tr.highlight.cat6  th, #treemap span.cat6 , #categ th.cat6  { background-color: #fed976; }
#toplevel tr.cat7  td, #toplevel tr.cat7  th { border-bottom-color: #feb24c; } #toplevel tr.highlight.cat7  td, #toplevel tr.highlight.cat7  th, #treemap span.cat7 , #categ th.cat7  { background-color: #feb24c; }
#toplevel tr.cat8  td, #toplevel tr.cat8  th { border-bottom-color: #fd8d3c; } #toplevel tr.highlight.cat8  td, #toplevel tr.highlight.cat8  th, #treemap span.cat8 , #categ th.cat8  { background-color: #fd8d3c; }
#toplevel tr.cat9  td, #toplevel tr.cat9  th { border-bottom-color: #fc4e2a; } #toplevel tr.highlight.cat9  td, #toplevel tr.highlight.cat9  th, #treemap span.cat9 , #categ th.cat9  { background-color: #fc4e2a; }
#toplevel tr.cat10 td, #toplevel tr.cat10 th { border-bottom-color: #e31a1c; } #toplevel tr.highlight.cat10 td, #toplevel tr.highlight.cat10 th, #treemap span.cat10, #categ th.cat10 { background-color: #e31a1c; }
#toplevel tr.cat11 td, #toplevel tr.cat11 th { border-bottom-color: #bd0026; } #toplevel tr.highlight.cat11 td, #toplevel tr.highlight.cat11 th, #treemap span.cat11, #categ th.cat11 { background-color: #bd0026; }
#toplevel tr.cat12 td, #toplevel tr.cat12 th { border-bottom-color: #990000; } #toplevel tr.highlight.cat12 td, #toplevel tr.highlight.cat12 th, #treemap span.cat12, #categ th.cat12 { background-color: #990000; }

#toplevel tr.highlight.cat0  td, #toplevel tr.highlight.cat0  th,
#toplevel tr.highlight.cat1  td, #toplevel tr.highlight.cat1  th,
#toplevel tr.highlight.cat2  td, #toplevel tr.highlight.cat2  th,
#toplevel tr.highlight.cat3  td, #toplevel tr.highlight.cat3  th,
#toplevel tr.highlight.cat11 td, #toplevel tr.highlight.cat11 th,
#toplevel tr.highlight.cat12 td, #toplevel tr.highlight.cat12 th,
#treemap span.cat0  b, #treemap span.cat1  b, #treemap span.cat2  b,
#treemap span.cat3  b, #treemap span.cat9  b, #treemap span.cat10 b,
#treemap span.cat11 b, #treemap span.cat12 b { color: #fff; }

/* cím és fejléc */
#header {
	position: relative;
	border-bottom: 2px solid #4266a1;
}

	#header #header-kshlogo {
		position: absolute;
		height: 60px;
		left: 0;
		top: 15px;
		border: 0;
	}

	h1, h2 {
		margin: 0;
		padding: 0;
		font: bold 24px Roboto,Verdana,Arial,Helvetica,sans-serif;
		text-align: center;
		color: #4266a1;
	}

	h2 {
		font-size: 16px;
		font-weight: normal;
	}

		h2 #actdate {
			display: inline-block;
			width: 150px;
			text-align: left;
		}

	#period-wrapper {
		margin: 5px auto;
		text-align: center;
	}

		#period {
			width: 320px;
			height: 24px;
			font: normal 16px "Roboto",Verdana,Arial,Helvetica,sans-serif;
			color: #fff;
			background: #81a5c5;
			border: none;
			outline: none;
		}

			#en #period {
				width: 400px;
			}

/* JS kikapcsolva */
#noscript {
	position: relative;
	width: 1000px;
	margin: 20px auto;
	padding: 10px;
	font: normal 18px/36px Roboto,Verdana,Arial,Helvetica,sans-serif;
	border: 10px solid #800;
	z-index: 9999;
}

	#noscript a {
		color: #4266a1;
		text-decoration: none;
		text-decoration: underline;
	}

/* a fő blokk */
#main {
	position: absolute;
	top: 100px;
	left: 5px;
	bottom: 20px;
	right: 5px;
	opacity: 0;
}

	#page.start #main {
		opacity: 1;
	}

/* a bal oldali táblázat */
#toplevel {
	width: 320px;
}

	#toplevel table {
		margin-top: -8px;
		width: 100%;
		border-collapse: separate;
		border-spacing: 0;
	}

		#toplevel th, #toplevel td {
			padding: 10px 0 2px;
			font: normal 16px/22px "Roboto Condensed",Verdana,Arial,Helvetica,sans-serif;
			text-align: left;
			vertical-align: bottom;
			border-bottom: 5px solid #000;
			border-top: 5px solid #fff;
			cursor: default;
		}

		#toplevel td {
			text-align: right;
		}

			#toplevel th span {
				display: block;
				float: left;
				margin-right: .5em;
				max-width: 190px;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			#toplevel tr.sum th, #toplevel tr.sum td {
				font-weight: bold;
			}

/* maga a grafikon */
#chart {
	position: absolute;
	top: 0;
	left: 330px;
	bottom: 0px;
	right: 150px;
}

	#treemap {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 45px;
		right: 0;
		border: 1px solid #888;

		opacity: 0;
		-webkit-transition: opacity 1s ease-in;
		   -moz-transition: opacity 1s ease-in;
			 -o-transition: opacity 1s ease-in;
				transition: opacity 1s ease-in;
	}

		#page.start #treemap {
			opacity: 1;
		}

		#treemap div {
			position: absolute;
			background: #eee;
		}
		
		#treemap span {
			position: absolute;
			outline: 1px solid #999;
			z-index: 1;
			cursor: url(../images/zoom_in.cur), url(../images/zoom_in.png), pointer;
			cursor: -webkit-zoom-in;
			cursor: -moz-zoom-in;
			cursor: zoom-in;

			-webkit-transition: background 0.5s linear;
			   -moz-transition: background 0.5s linear;
				 -o-transition: background 0.5s linear;
					transition: background 0.5s linear;
		}

			#treemap span b {
				display: inline-block;
				margin: 2px;
				font-size: 12px;
				font-weight: normal;
				color: #000;
				
				-webkit-transition: color 0.5s linear;
				   -moz-transition: color 0.5s linear;
					 -o-transition: color 0.5s linear;
						transition: color 0.5s linear;
			}

				#treemap span b.long, #treemap.nolabels span b {
					visibility: hidden;
				}

			#treemap span:hover {
				outline-color: #000;
				box-shadow: inset 0 0 5px rgba(0, 0, 0, .8),
							inset 0 0 3px rgba(0, 0, 0, .8),
							inset 0 0 1px rgba(0, 0, 0, .8);
				z-index: 2;
			}

			#treemap.zoom span {
				cursor: url(../images/zoom_out.cur), url(../images/zoom_out.png), pointer;
				cursor: -webkit-zoom-out;
				cursor: -moz-zoom-out;
				cursor: zoom-out;
			}

		#treemap #highlight {
			background: transparent;
			border: 2px solid #000;
			box-shadow: inset 0 0 5px rgba(0, 0, 0, .8),
						inset 0 0 3px rgba(0, 0, 0, .8),
						inset 0 0 1px rgba(0, 0, 0, .8);
			z-index: 1;
		}

		#treemap #highlight.span {
			border: 2px solid #666;
			box-shadow: inset 0 0 5px rgba(96, 96, 96, .8),
						inset 0 0 3px rgba(96, 96, 96, .8),
						inset 0 0 1px rgba(96, 96, 96, .8);
		}

/* az alsó eszközsáv */
#toolbar {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	text-align: center;
}

	#toolbar span {
		display: inline-block;
		width: 32px;
		height: 32px;
		margin: 0 10px;
		cursor: pointer;
	}

		#toolbar span svg {
			width: 32px;
			height: 32px;
			display: inline-block;
			fill: #436fa2;
		}

		#toolbar span#grafInfo  { 
			position: absolute;
			right: 0;
		}

		#toolbar span:hover svg {
			fill: #213884;
		}

		#toolbar span.disabled svg {
			fill: #b0bec5;
		}


/* a jobb oldali sáv */
#sidebar {
	position: absolute;
	top: 0;
	right: 0;
	width: 140px;
}

/* jelmagyarázat */
#categ table {
	border-collapse: separate;
	border-spacing: 0px 3px;
}

	#categ th {
		width: 40px;
		height: 20px;
		border: 1px solid #000;
	}

	#categ td {
		padding: 0 2px;
		font-size: 16px;
		text-align: right;
		white-space: nowrap;
	}

/* kapcsolók */
#settings {
	margin: 10px 0;
	padding: 0;
	border-width: 1px 0;
	border-style: solid;
	border-color: #4266a1;
}

	#settings p {
		margin: 5px 0;
		padding: 0;
	}

/* további információk */
#moreinfo {
	margin: 0;
}

	#moreinfo h3 {
		margin: 0;
		font-size: 14px;
		font-weight: bold;
		color: #4266a1;
	}

	#moreinfo ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

		#moreinfo li {
			margin-bottom: .2em;
		}

			#moreinfo li a {
				color: #5786b2;
				text-decoration: none;
			}

				#moreinfo li a:hover {
					text-decoration: underline;
				}

/* súgó */
#infoPanel {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 999;
}

	#infoPanel.show {
		display: block;
	}

	#infoPanel-cover {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: #fff;
		opacity: .8;
		filter: alpha(opacity=80);
	}

	#infoPanel-content {
		position: absolute;
		top: 10px;
		bottom: 10px;
		left: 50%;
		width: 660px;
		margin-left: -330px;
		padding: 10px;
		background: #fff;
		border: 2px solid #4266a1;
		overflow-x:hidden;
		overflow-y: auto;
	}

		#infoPanel-close {
			position: absolute;
			top: 5px;
			right: 5px;
			font-size: 24px;
			color: #999;
			cursor: pointer;
		}

			#infoPanel-close:hover {
				color: #000;
			}

		#infoPanel-content h3 {
			margin: 5px 0 10px;
			padding: 0;
		}

		#infoPanel-content p {
			text-align: justify;
		}

		#infoPanel-content ul {
			padding-left: 1.5em;
			text-align: justify;
		}

/* sárga cetli */
#tooltip {
	position: absolute;
	top: -9999px;
	left: -9999px;
	max-width: 260px;
	padding: 4px;
	background: #ffc;
	border: 1px solid #000;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, .7);
	z-index: 999;

	opacity: 0;
	-webkit-transition: opacity .2s ease-in;
	   -moz-transition: opacity .2s ease-in;
		 -o-transition: opacity .2s ease-in;
			transition: opacity .2s ease-in;
}

	#tooltip table {
		border-collapse: collapse;
	}

		#tooltip th {
			font-weight: normal;
			text-align: left;
			vertical-align: bottom;
		}

		#tooltip td {
			font-weight: normal;
			text-align: right;
			vertical-align: bottom;
			padding-left: 1em;
		}

			#tooltip th#tt-desc { 
				font-weight: bold;
			}