/***************************************************/
/* CSS Reset                                       */
/***************************************************/

* { margin: 0; padding: 0; border: 0; outline: 0; }

/***************************************************/
/* oldal szerkezet                                 */
/***************************************************/

html, body {
	height: 100%;
}

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	overflow: hidden;
}

a:link, a:visited, a:active, a:hover {
	color: #444444;
}

h1 {
	padding: 5px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 18px;
	text-align: center;
}

/***************************************************/
/* grafikon elemek                                 */
/***************************************************/

#graph {
	position: relative;
	float: left;
	width: 10px;
	height: 10px;
	margin: 10px 0 0 5px;
}
	#svgMales,
	#svgFemales {
		position: absolute;
		width: 315px;
		height: 100%;
	}

	#svgFemales {
		right: 0;
	}

	#yAxis {
		position: absolute;
		left: 50%;
		top: 1.2%;
		height: 97.2%;
		width: 46px;
		margin-left: -23px;
	}

		#yAxisText {
			font-weight: bold;
			top: -14px;
		}

		#yAxis div {
			width: 100%;
			text-align: center;
			position: absolute;
			margin-top: -9px;
		}

	#xAxis {
		position: absolute;
		top: 100%;
		width: 100%;
		height: 40px;
		margin: 2px auto 0;
	}

		#xAxisL,
		#xAxisR {
			position: absolute;
			width: 42.7%;
			top: 0;
		}

			#xAxisL { left: 0; }
			#xAxisR { right: 0; }

			#xAxisL div {
				position: absolute;
				width: 60px;
				margin-left: -30px;
				text-align: center;
			}

			#xAxisR div {
				position: absolute;
				width: 60px;
				margin-right: -30px;
				text-align: center;
			}

				#xAxis #xAxisLText,
				#xAxis #xAxisL5 {
					margin-left: 0;
				}

				#xAxis #xAxisRText,
				#xAxis #xAxisR5 {
					margin-right: 0;
				}

				#xAxis #xAxisLText {
					top: 15px;
					left: 0;
					width: 200px;
					text-align: left;
				}

				#xAxis #xAxisRText {
					top: 15px;
					right: 0;
					width: 200px;
					text-align: right;
				}

				#xAxis #xAxisL5 {
					left: 0;
					text-align: left;
				}

				#xAxis #xAxisR5 {
					right: 0;
					text-align: right;
				}

				#xAxis #xAxisL4 { left:  20%; }
				#xAxis #xAxisR4 { right: 20%; }
				#xAxis #xAxisL3 { left:  40%; }
				#xAxis #xAxisR3 { right: 40%; }
				#xAxis #xAxisL2 { left:  60%; }
				#xAxis #xAxisR2 { right: 60%; }
				#xAxis #xAxisL1 { left:  80%; }
				#xAxis #xAxisR1 { right: 80%; }
				#xAxis #xAxisL0 { left:  99%; }
				#xAxis #xAxisR0 { right: 99%; }

/***************************************************/
/* csúszka elemek                                  */  
/* *************************************************/

#yearSlider {
	position: absolute;
	bottom: 5px;
	left: 5px;
	width: 676px;
}

	#yearSliderBtnLeft,
	#yearSliderBtnRight {
		display: block;
		float: left;
		width: 25px;
		height: 25px;
	}

		#yearSliderBtnLeft { background: url(../image/slider.png) no-repeat 0 0; }
		#yearSliderBtnLeft:hover { background-position: 0 -30px; }
		#yearSliderBtnRight { background: url(../image/slider.png) no-repeat -30px 0; }
		#yearSliderBtnRight:hover {	background-position: -30px -30px; }

	#yearSliderTrackLs {
		float: left;
		width: 2px;
		height: 25px;
		margin-left: 2px;
		background: url(../image/slider_trck.png) no-repeat 0 0;
	}

	#yearSliderTrack {
		float: left;
		width: 600px;
		height: 25px;
		overflow: hidden;
		background: url(../image/slider_trck.png) repeat-x 50% 0;
	}

	#yearSliderTrackRs {
		float: left;
		width: 2px;
		height: 25px;
		margin-right: 2px;
		background: url(../image/slider_trck.png) no-repeat 100% 0;
	}

	#yearSliderSlider {
		top: 2px;
		width: 11px;
		height: 20px;
		background: url(../image/slider_hand.gif) no-repeat 0 0;
		cursor: pointer;
	}

		#yearSliderSlider.hover,
		#yearSliderSlider:hover {
			background-position: -15px 0;
		}

	.yearSliderMarker {
		display: none;
		top: 9px;
		width: 2px;
		height: 8px;
		background-color: #004396;
	}

#yearToolTip {
	display: none;
	position: absolute;
	padding: 2px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #324eaa;
	background-color: #eaeef7;
	border: 1px solid #ccc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	cursor: default;
	z-index: 99;
}

/***************************************************/
/* oldalsáv                                        */
/***************************************************/

#sidebar {
	position: relative;
	float: right;
	width: 300px;
	margin: 10px 5px 0 0;
}

	* html #sidebar { margin-top: 0; }

/***************************************************/
/* kiválasztott és lezárt év                       */
/***************************************************/

.yearBar {
	position: relative;
	clear: left;
	text-align: right;
	font-size: 18px;
	font-weight: bold;
}
	
	* html .yearBar { margin-top: 10px; }
	
	#lockYear,
	#unlockYear {
		float: left;
		width: 16px;
		height: 16px;
		margin-right: 3px;
	}

		#lockYear {	background: url(../image/lock.png) no-repeat 0 0; }
		#lockYear:hover { background-position: 0 -25px; }
		#unlockYear { background: url(../image/lock.png) no-repeat -20px 0; }
		#unlockYear:hover {	background-position: -20px -25px; }

	#selectedYear,
	#lockedYear {
		float: left;
		margin-top: -10px;
		font-size: 28px;
		font-weight: bold;
	}

	#lockedYearWindow {
		display: none;
		margin-bottom: 1em;
		color: #666;
	}

/***************************************************/
/* információs ablak                               */
/***************************************************/

.sideBox {
	position: relative;
	padding: 5px 10px;
	border: 1px solid #E87B00;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
}

#territoryWindow {
	margin-top: 20px;
}

	#territoryWindow div {
		text-align: center;
		margin-top: 5px;
	}

		#territoryWindow div a {
			margin: 0 10px;
			text-decoration: none;
			font-weight: bold;
		}

		#territoryWindow div a:hover {
			color: #aa3232;
		}

#infoWindow {
	visibility: hidden;
	margin-top: 20px;
}

	.sideBox h2 {
		position: absolute;
		top: -10px;
		padding: 0 2px;
		font-size: 14px;
		background: #fff;
		left: 10px;
	}

	#infoBtnClose {
		position:absolute;
		top: -8px;
		right: 10px;
		padding: 0 2px;
		background: #fff;
	}

	#infoBtnClose a {
		padding-right: 16px;
		font-weight: bold;
		background: url(../image/close.png) no-repeat 100% 2px;
		text-decoration: none;
	}

		#infoBtnClose a:hover {
			background-position: 100% -13px;
			color: #aa3232;
		}

	#infoAgesYears {
		margin: 10px 0;
	}

	#infoWindow table {
		width: 100%;
	}

		#infoWindow table th {
			text-align: left;
			width: 55%;
		}

		#infoWindow table td {
			text-align: right;
		}

		.gap td, .gap th {
			padding-top: 10px;
		}

		#infoMalesBar, #infoFemalesBar {
			display: block;
			width: 50%;
			height: 100%;
			background-color: #333366;
		}

		#infoFemalesBar {
			background-color: #660066;
		}

/***************************************************/
/* animáció csúszka és gomb                        */
/***************************************************/

#animationWindow {
	position: absolute;
	bottom: 5px;
	right: 5px;
	width: 278px;
}

	#animSpeed {
		position: relative;
		float: left;
		margin: 0px 10px 0px 75px;
	}
	
		* html #animSpeed {
			margin-left: 40px;
		}
	

		#animSpeedTrack {
			width: 55px;
			height: 15px;
			margin-top: 6px;
			background: url(../image/anim_bg.png) no-repeat 0 0;
		}

		#animSpeedSlider {
			position: absolute;
			width: 11px;
			height: 20px;
			background: url(../image/slider_hand.gif) no-repeat 0 0;
			cursor: pointer;
		}

			#animSpeedSlider.hover,
			#animSpeedSlider:hover {
				background-position: -15px 0;
			}

	#animBtnPlay,
	#animBtnStop {
		display: block;
		float: left;
		width: 50px;
		height: 25px;
	}

		#animBtnPlay {
			background: url(../image/anim.png) no-repeat 0 0;
		}

			#animBtnPlay:hover {
				background-position: 0 -30px;
			}

		#animBtnStop {
			display: none;
			background: url(../image/anim.png) no-repeat -60px 0;
		}

			#animBtnStop:hover {
				background-position: -60px -30px;
			}