/* ==================================================================
Allgemeines Stylesheet fuer den Siteaufbau
Datei: grintsch_layout.css
Media: screen

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

Inhalt:
CSS-Anweisungen f�r www.grintsch.com
Die Anweisungen f�r den Contentbereich befinden sich in den jeweiligen Contentdateien

Aufbau:
1. Allgemeine Selektoren
	1.1 Inline-Elemente
	1.2 Block-Elemente
	1.3 Klassen
2. Layoutbereiche
	2.1 Site-Wrapper
	2.2 Breadcrumb
	2.3 Top area
		2.3.1 Search
		2.3.2 Language
		2.3.3 Service Menu
	2.4 Bereich MainMenu
		2.4.1 Logobereich
		2.4.2 Hauptnavigation
	2.5 Alternativmenu
==================================================================== */
/* ======================================================

	=1. Allgemeine Selektoren

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

html { height: 101%; }

body {
	font-family: Georgia, Roman, serif;
	font-size: 12px;
	color: #888888;
	text-align: center;

	height: 101%;
	background: url(img/bg/body.gif) #fcfcfc repeat-x;
}

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

a span { cursor: pointer; }

em {
	color: #ee8025;
	font-style: normal;
}

/* ======================================================
	=1.2 Block-Elemente
========================================================= */
/* ======================================================
	=1.3 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;
}

.italic { font-style: italic; }

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

	=2. Layoutbereiche

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

	=2.1 Site-Wrapper

========================================================= */
#wrapperPage {
	position: relative;

	text-align: left;

	width: 928px;
	margin: 0 auto;
	background: url(img/bg/wrapperPage.png) #fcfcfc repeat-x;
}

* html #wrapperPage { background-image: url(img/bg/wrapperPage.gif); }

#wrapperPage object { -moz-outline: 0; }

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

	=2.2 Breadcrumb

========================================================= */
#wrapperBreadcrumb {
	float: left;

	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px;
	color: #9d9d9d;

	background: url(img/shadow/vertical_dark_light.gif) no-repeat left top;
	width: 400px;
	height: 15px;
	margin-left: 2px;
	padding: 1px 6px 0;
}

* html #wrapperBreadcrumb { display: inline; }

	#wrapperBreadcrumb a { color: #9d9d9d; }

	#wrapperBreadcrumb a:hover,
	#wrapperBreadcrumb a:focus,
	#wrapperBreadcrumb a:active { color: #ee8025; }

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

	=2.3 Top area

========================================================= */
#wrapperTopArea {
	float: right;

	/*width: 441px;*/
	width: 316px;
	height: 16px;
}

* html #wrapperTopArea { width: 311px;/*436px;*/ }

/* ======================================================
		=2.3.1 Search
========================================================= */
#wrapperSearch {
	float: left;

	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px;
	color: #9d9d9d;

	background: url(img/shadow/vertical_dark_light.gif) no-repeat left top;
	width: 76px;
	height: 16px;
}

	#wrapperSearch span {
		font-size: 11px;
		font-weight: normal;
		color: #9d9d9d;

		width: 52px;
		margin: 1px 0 0 5px;
	}

	#wrapperSearch form {
		width: 115px;
		height: 25px;

		background-color: #e6e6e6;
	}

		#wrapperSearch input.text {
			position: absolute;
			top: 5px;
			left: 5px;

			font-size: 11px;
			color: #9d9d9d;

			width: 80px;
			padding: 0 1px;
			border: 1px solid #b6b6b6;
		}

		#wrapperSearch input.image {
			position: absolute;
			top: 4px;
			left: 95px;
		}

/* ======================================================
	=2.3.2 Language
========================================================= */
/*#wrapperLanguage {
	float: left;

	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px;
	color: #9d9d9d;

	background: url(img/shadow/vertical_dark_light.gif) no-repeat left top;
	width: 125px;
	height: 16px;
	padding-left: 2px;
}

	#wrapperLanguage span {
		font-size: 11px;
		font-weight: normal;
		color: #9d9d9d;

		width: 100px;
		margin: 1px 0 0 5px;
	}*/

/* ======================================================
	=2.3.3 Version
========================================================= */
#wrapperVersion {
	float: left;

	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px;
	color: #9d9d9d;

	background: url(img/shadow/vertical_dark_light.gif) no-repeat left top;
	width: 125px;
	height: 16px;
	padding-left: 2px;
}

	#wrapperVersion span {
		font-size: 11px;
		font-weight: normal;
		color: #9d9d9d;

		width: 100px;
		margin: 1px 0 0 5px;
	}
/* ======================================================
	=2.3.4 Service Menu
========================================================= */
#wrapperServiceMenu {
	float: left;

	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px;
	color: #9d9d9d;

	width: 110px;
	height: 16px;
	background: url(img/shadow/vertical_dark.gif) no-repeat left top;
	padding-left: 1px;
}

	#wrapperServiceMenu ul {
		float: left;
		clear: left;
		list-style-type: none;

		width: 108px;
	}

		#wrapperServiceMenu ul li {
			float: left;

			line-height: 11px;

			height: 16px;
			background: url(img/shadow/vertical_light.gif) no-repeat left top;
		}

		#wrapperServiceMenu ul li.sitemap { width: 46px; }
		#wrapperServiceMenu ul li.impressum { width: 62px; }

		* html #wrapperServiceMenu ul li.impressum { width: 61px; }

			#wrapperServiceMenu ul li a {
				display: block;

				color: #a5a5a5;

				height: 16px;
				background: url(img/shadow/vertical_dark.gif) no-repeat right top;
				padding: 0 0 0 5px;
			}

			#wrapperServiceMenu ul li a.active {
				color: #fff;
				background: url(img/bg/top_link_active.gif) repeat-x;
			}

			#wrapperServiceMenu ul li a:hover,
			#wrapperServiceMenu ul li a:focus,
			#wrapperServiceMenu ul li a:active,
			#wrapperServiceMenu ul li a.active:hover,
			#wrapperServiceMenu ul li a.active:focus,
			#wrapperServiceMenu ul li a.active:active {
				color: #fff;

				background: url(img/bg/top_link_over.gif) no-repeat;
			}

				#wrapperServiceMenu ul li a span {
					display: block;

					height: 16px;
					padding: 2px 4px 0 0;

					cursor: pointer;
				}

				* html #wrapperServiceMenu ul li a span { padding-top: 3px; }

				#wrapperServiceMenu ul li a:hover span,
				#wrapperServiceMenu ul li a:focus span,
				#wrapperServiceMenu ul li a:active span { background: url(img/bg/top_link_span_over.gif) no-repeat right top; }

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

	=2.4 Bereich MainMenu

========================================================= */
#wrapperMainMenuArea {
	float: right;

	margin-right: 30px;
}

* html #wrapperMainMenuArea { display: inline; }

/* ======================================================
	=2.4.1 Logobereich
========================================================= */
#wrapperLogo {
	width: 226px;
	height: 81px;
	margin: 9px 0 0 206px;
	margin: 5px 0 0 206px;
}

* html #wrapperLogo { margin-top: 4px; }

	#wrapperLogo a {
		display: block;

		width: 226px;
		height: 81px;
		background: url(img/logo/grintsch.gif) no-repeat;
	}

	#wrapperLogo a:hover {
		background: url(img/logo/grintsch_ani.gif) no-repeat;
	}

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

	=2.4.2 Hauptnavigation

========================================================= */
#wrapperMainMenu {
	width: 413px;
	height: 34px;
	margin-right: 30px;
}

	#wrapperMainMenu ul {
		float: right;
		clear: left;
		list-style-type: none;

		background: url(img/bg/mainmenu_trenner.gif) no-repeat right 15px;
	}

		#wrapperMainMenu ul li {
			float: left;

			line-height: 13px;

			background: url(img/bg/mainmenu_trenner.gif) no-repeat 0 15px;
			padding: 0 10px;
		}

			 #wrapperMainMenu ul li a {
				display: block;

				font-size: 12px;
				font-weight: bold;
				color: #b6b6b6;

				padding-top: 14px;
			}

			#wrapperMainMenu ul li a:hover,
			#wrapperMainMenu ul li a:focus,
			#wrapperMainMenu ul li a:active,
			#wrapperMainMenu ul li a.active { color: #ee8025; }

			#wrapperMainMenu ul li a.mainmenu_news,
			#wrapperMainMenu ul li a.mainmenu_news_active {
				width: 32px;
				height: 34px;
				background: url(img/bg/mainmenu_news.gif) #fcfcfc no-repeat 0 0;
				padding-top: 0;
			}

			#wrapperMainMenu ul li a.mainmenu_news:hover,
			#wrapperMainMenu ul li a.mainmenu_news:focus,
			#wrapperMainMenu ul li a.mainmenu_news:active,
			#wrapperMainMenu ul li a.mainmenu_news_active { background-image: url(img/bg/mainmenu_news_over.gif); }

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

	=2.6 Alternativmenu

========================================================= */
#wrapperAlternativeMenu {
	position: relative;
	float: left;

	width: 400px;
	height: 120px;
	margin-left: 45px;
}

* html #wrapperAlternativeMenu { display: inline; }

* html #wrapperAlternativeMenu {
	margin-top: 2px;
}

/* ======================================================
	=2.6.1 Flash
========================================================= */
#wrapperAlternativeMenu #altMenuFlash object {
	margin-top: 18px;

	-moz-outline: 0;
}

* html #wrapperAlternativeMenu #altMenuFlash object { margin-top: 19px; }

/* ======================================================
	=2.6.2 NoFlash
========================================================= */
#wrapperAlternativeMenu #altMenuNoFlash {
	background: url(img/bg/wrapperAlternativeMenu.png) no-repeat 14px bottom;
	width: 400px;
	height: 120px;
}

* html #wrapperAlternativeMenu #altMenuNoFlash { background-image: url(img/bg/wrapperAlternativeMenu.gif); }

	#wrapperAlternativeMenu ul { list-style-type: none; }

		#wrapperAlternativeMenu ul li { position: absolute; }

		#wrapperAlternativeMenu ul li.kommunikation {
			top: 10px;
			left: -10px;
		}

		#wrapperAlternativeMenu ul li.inspiration {
			top: 40px;
			left: 100px;
		}

		#wrapperAlternativeMenu ul li.veraenderung {
			top: 90px;
			left: 60px;
		}

		#wrapperAlternativeMenu ul li.konzept {
			top: 80px;
			left: 0;
		}

		#wrapperAlternativeMenu ul li.erfahrung {
			top: 70px;
			left: 160px;
		}

		#wrapperAlternativeMenu ul li.erfolg {
			top: 40px;
			left: 5px;
		}

		#wrapperAlternativeMenu ul li.vertrauen {
			top: 48px;
			left: 260px;
		}

		#wrapperAlternativeMenu ul li.zusammenarbeit {
			top: 18px;
			left: 200px;
		}

		#wrapperAlternativeMenu ul li.bewegen {
			top: 90px;
			left: 300px;
		}

			 #wrapperAlternativeMenu ul li a {
				font-size: 12px;
				color: #b6b6b6;
			}

			#wrapperAlternativeMenu ul li a:hover,
			#wrapperAlternativeMenu ul li a:focus,
			#wrapperAlternativeMenu ul li a:active,
			#wrapperAlternativeMenu ul li a.active { color: #ee8025; }

			#wrapperAlternativeMenu ul li a.active { font-weight: bold; }