/* ==================================================================
 - Stylesheet fuer den Aufbau der Startseite (index.html)
Datei: jado_lindex.css
Media: all

Datum: 07.01.2008
Autor:	Agentur Grintsch
Internet: www.grintsch.com

Inhalt:
CSS-Anweisungen für die Index-Seite der Website www.jado.com

Aufbau:
1. Allgemeine Selektoren
	1.1 Formular-Elemente
	1.2 Block-Elemente
	1.3 Klassen

2. Layoutbereiche
	2.1 Site-Wrapper
	2.2 Logobereich
	2.3 Countryselector
		(Der Countryselector ist in eine eigenes CSS ausgelagert -> jado_navigation.css)
==================================================================== */
/* ======================================================

	=1. Allgemeine Selektoren

========================================================= */
* {
	padding: 0px;
	border: 0px;
	margin: 0px;
}

html { height: 100%; }

body {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 10px;
	color: #ffffff;

	background-color: #8996A0;
}

/* ======================================================

	=2. Layoutbereiche

========================================================= */
/* ======================================================

	=2.1 Site-Wrapper

========================================================= */
#alignerPage {
	position: absolute;
	top: 50%;
	left: 50%;

	margin-top: -289px;
	margin-left: -495px;
}

#wrapperPage {
	width: 990px;
	height: 570px;
	background: url(img/bg/wrapperPage.jpg) no-repeat #8996A0;
	border: 1px solid #CFD2D6;
}

/* ======================================================

	=2.2 Logobereich

========================================================= */
#wrapperLogo {
	position: absolute;
	top: 104px;
	left: 104px;

	width: 221px;
	height: 123px;
	background: url(img/bg/wrapperLogo/logo_jado.gif) no-repeat;
}

	#wrapperLogo img {
		position: absolute;
		left: -10000px;
		top: -10000px;
		width: 0;
		height: 0;
		overflow: hidden;
		display: inline;
	}

/* ======================================================

	=2.3 Countryselector

========================================================= */
#wrapperCountrySelector {
	position: absolute;
	top: 330px;
	left: 200px;
}

	#wrapperCountrySelector p {
		position: absolute;
		top: 3px;
		left: 0;

		font-size: 12px;
		color: #525658;

		width: 210px;
	}

	#wrapperCountrySelector div.box_country_selector {
		position: absolute;
		top: 0;
		left: 220px;

		width: 571px;
		background: url(img/line/h_1px_2px_ffffff_95a0aa.gif) repeat-x 0 0;
	}

		#wrapperCountrySelector a:hover { visibility: visible; } /* for IE6 */

		#wrapperCountrySelector a.title_country_selector {
			display: block;

			text-decoration: none;

			width: 211px;
			height: 33px;
			background: url(img/bg/wrapperCountrySelector/index_wrapperCountrySelector_a.gif) no-repeat;
			padding: 4px 0 0 4px;

			cursor: pointer;
		}

		* html #wrapperCountrySelector a.title_country_selector {
			padding-bottom: 4px;
			padding-left: 6px;
		}

		#wrapperCountrySelector a.title_country_selector:hover,
		#wrapperCountrySelector a.title_country_selector:focus,
		#wrapperCountrySelector a.title_country_selector:active { background-image: url(img/bg/wrapperCountrySelector/index_wrapperCountrySelector_a_over.gif); }

			#wrapperCountrySelector a.title_country_selector span {
				display: block;

				color: #ffffff;
				text-transform: uppercase;

				margin-top: 8px;
			}

			*+html #wrapperCountrySelector a.title_country_selector span { margin-top: 12px; }

			* html #wrapperCountrySelector a.title_country_selector span { margin-top: 12px; }

			#wrapperCountrySelector a.title_country_selector #titleCountrySelector {
				font-size: 14px;
				font-weight: bold;

			}

		#wrapperCountrySelector #menuCountrySelector {
			position: absolute;
			top: -10000px;
			left: -10000px;

			width: 0;
			height: 0;
		}

		#wrapperCountrySelector:hover #menuCountrySelector,
		* html #wrapperCountrySelector a.title_country_selector:hover #menuCountrySelector {
			position: absolute;
			top: -79px;
			left: 0;

			width: 220px;
			height: 79px;
			background: url(img/bg/wrapperCountrySelector/menuCountrySelector.gif) no-repeat;
		}

			#menuCountrySelector ul {
				width: 210px;
				height: 73px;
				margin: 5px 0 0 5px;
			}

				#menuCountrySelector ul li {
						display: block;
						float: left;

						line-height: 12px;

						width: 210px;
						min-height: 10px;
						background: url(img/line/h_1px_2px_ffffff_95a0aa.gif) repeat-x bottom;
						padding: 1px 0 2px 0;
					}

					* html #menuCountrySelector ul li { height: 10px; }

					#menuCountrySelector ul li.last { background-image: none; }

						#menuCountrySelector ul li a {
							text-decoration: none;
							text-transform: uppercase;

							margin: 0;
						}

						* html #menuCountrySelector ul li a span {
							background-color: #8a97a0;

							cursor: pointer;
						}

						#menuCountrySelector ul li a.country {
							display: block;

							font-size: 10px;
							color: #ffffff;
						}

							#menuCountrySelector ul li a.country span {
								display: block;

								width: 210px;
								margin: 0;
							}

							* html #menuCountrySelector ul li a.country span { width: 214px; }

							#menuCountrySelector ul li a.country:hover span,
							#menuCountrySelector ul li a.country:focus span,
							#menuCountrySelector ul li a.country:active span { background-color: #c8cdd1; }

						#menuCountrySelector ul li a.language {
							display: inline;

							font-size: 9px;
							color: #C4CBD0;
						}

							#menuCountrySelector ul li a.language span {
								display: inline;

								min-width: 10px;
								padding: 0 2px;
							}

							* html #menuCountrySelector ul li a.language span { width: 10px; }

							#menuCountrySelector ul li a.language:hover span,
							#menuCountrySelector ul li a.language:focus span,
							#menuCountrySelector ul li a.language:active span { background-color: #afb3b5; }

/* ======================================================

	=2.4 Maintenance

========================================================= */
#wrapperMaintenance {
	position: absolute;
	top: 230px;
	left: 400px;

	font-size: 12px;

	width: 550px;
}

	#wrapperMaintenance p { margin-bottom: 20px; }