/* ==================================================================
 - Allgemeines Stylesheet fuer den Siteaufbau
Datei: jado_layout.css
Media: all

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

Inhalt:
CSS-Anweisungen f�r den Site 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 ein eigenes CSS ausgelagert -> jado_navigation.css)
	2.4 Loginbereich
	2.5 Hauptnavigation
		(Die Hauptnavigation ist in ein eigenes CSS ausgelagert -> jado_navigation.css)
	2.6 Breadcrumb
	2.7 Contentbereich
	2.8 Produktliniennavigation
		(Die Produktliniennavigation ist in ein eigenes CSS ausgelagert -> jado_navigation.css)
	2.9 Zusatznavigation
		(Die Zusatznavigation ist in ein eigenes CSS ausgelagert -> jado_navigation.css)
	2.10 Legals
	2.11 z-index
==================================================================== */
/* ======================================================

	=1. Allgemeine Selektoren

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

html { height: 100%; }

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

	-webkit-background-size: cover!important;
    -moz-background-size: cover!important;
    -o-background-size: cover!important;
    background-size: cover!important;
}

	body.bg_site_think { background: url(img/bg/body_think.jpg) no-repeat #3a4958 center center; }
	body.bg_site_feel { background: url(img/bg/body_feel.jpg) no-repeat #2d3a36 center center; }
	body.bg_site_dream { background: url(img/bg/body_dream.jpg) no-repeat #5e4833 center center; }

/* ======================================================
	=Inline-Elemente
========================================================= */
a { text-decoration: none; }

a:hover,
a:focus,
a:active { text-decoration: underline; }

/* ======================================================
	=Formular-Elemente
========================================================= */
/* ======================================================
	=Block-Elemente
========================================================= */
/* ======================================================
	=Klassen
========================================================= */
.clearer {
	clear: both;

	font-size: 0px;

	width: 0;
	height: 0px;
	line-height: 0px;
}

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

.versalien { text-transform: uppercase; }

.date { font-weight: bold; }

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

	=2. Layoutbereiche

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

	=2.1 Site-Wrapper

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

	margin-top: -290px;
	margin-left: -500px;
}

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

* html #wrapperPage {
	width: 1000px;
	height: 580px;
}

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

	=2.2 Logobereich

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

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

	#wrapperLogo a {
		display: block;

		width: 221px;
		height: 123px;
	}

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

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

	=2.3 Flashheader

========================================================= */
#wrapperFlashHeader {
	position: absolute;
	top: 29px;
	left: 5px;
	z-index: 25;

	width: 990px;
	height: 130px;
}

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

	=2.3 Countryselector

	ausgelagert in jado_navigation.css
========================================================= */

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

	=2.4 Login/Logout

==================================================== */
#wrapperLogin {
	position: absolute;
	top: 10px;
	left: 21px;
	z-index: 50;

	font-size: 10px;
	text-transform: uppercase;

	width: 800px;
	height: 14px;
}

	#wrapperLogin form {
		float: left;

		font-size: 10px;
		text-transform: uppercase;

		height: 14px;
		margin-right: 5px;
	}

	#wrapperLogin form.int {width: 410px;}
	#wrapperLogin form.de {width: 360px;}
	#wrapperLogin form.fr {width: 435px;}
	#wrapperLogin form.nl {width: 415px;}

	* html #wrapperLogin form.int {width: 430px;}
	* html #wrapperLogin form.de {width: 380px;}
	* html #wrapperLogin form.fr {width: 455px;}
	* html #wrapperLogin form.nl {width: 435px;}

	#wrapperLogin #formLogin { border: 1px solid #b7bfc5; }

	#wrapperLogin #formLogout { margin-left: 10px; }

		#wrapperLogin label {
			float: left;

			margin: 1px 5px 0 5px;
			cursor: pointer;
		}

		* html #wrapperLogin label { display: inline; }

		#wrapperLogin input.input_text {
			float: left;

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

			width: 100px;
			height: 12px;
			background-color: transparent;
			padding: 0;
			border: none;
			margin: 1px 0 0 0;
		}

		#wrapperLogin input.input_image {
			float: right;

			width: 44px;
			height: 12px;
			margin: 1px 0 0 0px;
		}

		#wrapperLogin #formLogout input.input_image { float: left; }

	#wrapperLogin a {
		display: block;
		float: left;

		color: #c4cbd0;
		text-transform: uppercase;

		width: auto;
		margin: 2px 15px 0 0;
	}

	#wrapperLogin p { float: left; }

/* =================================================
	=2.5 Hauptnavigation
	ausgelagert in jado_navigation.css
==================================================== */
/* =================================================
	=2.6 Breadcrumb
==================================================== */
#wrapperBreadcrumb {
	position: absolute;
	top: 183px;
	left: 22px;

	font-size: 10px;
	color: #8996a0;

	width: 748px;
	height: 15px;
	background-color: #cad0d4;
	padding: 2px 0 0 3px;
}

* html #wrapperBreadcrumb {
	left: 20px;

	width: 751px;
	height: 17px;
}

	#wrapperBreadcrumb a {
		color: #8996a0;
		text-decoration: none;

		padding: 0 3px;
	}

	#wrapperBreadcrumb a.active { color: #525658; font-weight: bold;}

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

	=2.6 Contentbereich

========================================================= */
#wrapperContent {
	position: absolute;
	top: 200px;
	left: 22px;

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

	width: 751px;
	height: 312px;
	background-color: #edeef0;

	z-index: 10;
}

* html #wrapperContent { left: 20px; }

/* =================================================
	=2.8 Produktnavigation
	ausgelagert in jado_navigation.css
==================================================== */
/* =================================================
	=2.9 Zusatznavigation
	ausgelagert in jado_navigation.css
==================================================== */

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

	=2.10 Legals

========================================================= */
#wrapperLegals {
    font-size: 9px;
    color: #c4cbd0;
    text-align: right;

    padding: 4px 16px;
}

    #wrapperLegals a {
        color: #c4cbd0;
        text-transform: uppercase;

		padding: 0 5px;
    }

    #wrapperLegals div.legals {
		float: left;

        text-align: left!important;
    }

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

	=2.11 z-index

========================================================= */
.zten {
	z-index: 10;
}
.zfive {
	z-index: 5;
}
.zone {
	z-index: 1;
}