/* ==================================================================
Stylesheet fuer den Contentbereich der Startseite
Datei: grintsch_content.css
Media: screen

Datum: 25.03.2009 (26.09.2008)
Autor:	Agentur Grintsch
Internet: www.grintsch.com

Inhalt:
CSS-Anweisungen f�r den Contentbereich der Startseite von www.grintsch.com

Aufbau:
1. �berschreibungen
2. Contentbereich
3. Stage
	3.1 Flashversion
	3.2 HTML-Version
		3.2.1 Mottozeilen
	3.3 News
==================================================================== */
/* ======================================================

	=1. �berschreibungen

========================================================= */
#wrapperMainMenuArea { height: 120px; }

	#wrapperLogo,
	#wrapperMainMenu { position: relative; }

	#wrapperLogo a {
		position: absolute;
		top: 0;
		right:0;
		z-index: 2;
	}

		#wrapperLogo a span img,
		#wrapperLogo a span img {
			width: 226px;
			height: 81px;
		}

	#wrapperMainMenu ul {
		position: absolute;
		right: 0;
		z-index: 3;
	}

		#wrapperMainMenu ul li a.mainmenu_news span img,
		#wrapperMainMenu ul li a.mainmenu_news_active span img {
			width: 32px;
			height: 34px;
			padding-top: 14px;
		}

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

	=2. Contentbereich

========================================================= */
#wrapperContent {
	clear: both;
	width: 860px;

	padding: 0 0 20px 0;
	margin-left: 35px;
}

* html #wrapperContent { background-position: 0 114px; }

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

	=3. Stage

========================================================= */
#wrapperStage {
	width: 860px;
	min-height: 230px;
	background: url(img/bg/wrapperStage.gif) no-repeat left top;
}

* html #wrapperStage { height: 230px; }

#wrapperStage div.w_shadow_bottom {
	width: 860px;
	background: url(img/bg/w_stage_shadow_bottom.gif) no-repeat left bottom;
	padding: 10px 0;
}

#wrapperStage #stage {
	position: relative;
	overflow: hidden;

	width: 809px;
	min-height: 470px;
	background-color: #fcfcfc;
	margin: 14px 10px 14px 24px;
}

*+html #wrapperStage #stage { margin-top: 24px; }

#wrapperStage #stage ul { list-style-type: none; }

/* ======================================================
	=3.3 News
========================================================= */
#wrapperStage #stage #stageIndexNews {
	clear: both;

	width: 800px;
	background-color: #fcfcfc;
	padding: 20px 0 10px 14px;
	margin: 0 10px;
}

* html #wrapperStage #stage #stageIndexNews { width: 838px; }

	#wrapperStage #stage #stageIndexNews h2 {
		float: left;

		font-size: 12px;

		width: 150px;
		border-right: 1px solid #9c9c9c;
		margin-right: 20px;
	}

		#wrapperStage #stage #stageIndexNews h2 a { color: #888; }

		#wrapperStage #stage #stageIndexNews h2 a:hover,
		#wrapperStage #stage #stageIndexNews h2 a:focus,
		#wrapperStage #stage #stageIndexNews h2 a:active { text-decoration: underline; }

	#wrapperStage #stage #stageIndexNews ul {
		float: left;

		list-style-type: none;

		width: 629px;
	}

	#wrapperStage #stage #stageIndexNews li {
		line-height: 17px;

		margin-bottom: 5px;
	}

		#wrapperStage #stage #stageIndexNews li span.date { font-weight: bold; }

		#wrapperStage #stage #stageIndexNews li a {
			color: #005891;
			text-decoration: underline;
		}

		#wrapperStage #stage #stageIndexNews li a:hover,
		#wrapperStage #stage #stageIndexNews li a:focus,
		#wrapperStage #stage #stageIndexNews li a:active {
			color: #005891;
			text-decoration: none;
		}

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

	=3.1 News: �bersicht
	
========================================================= */
#wrapperStage #stage #stageIndexSwitch {
	position: absolute;
	top: 0;
	z-index: 100;

	text-align: center;

	width: 809px;
	height: 30px;
	padding-top: 20px;
}

* html #wrapperStage #stage #stageIndexSwitch { display: none; }

		#wrapperStage #stage p.read_more a {
			display: block;
			
			font-family: Verdana, Arial, sans-serif;
			font-size: 10px;
			
			height: 12px;
			padding: 2px 10px 2px 6px;
		}

			#wrapperStage #stage #stageIndexImage div.box_text p.read_more a {
				color: #fff;
				
				width: 80px;
				background: url(img/other/arrow_fff_right.gif) #ee8025 no-repeat right 6px;
				border-right: 5px solid #ee8025;
			}

			* html #wrapperStage #stage #stageIndexImage div.box_text p.read_more a { width: 90px; }
		
	#wrapperStage #stage #stageIndexImage p.switcher {
		clear: both;
		
		text-align: center;
		
		padding-top: 35px;
		z-index: 50;
	}
	
		#wrapperStage #stage #stageIndexImage p.switcher a { margin-right: 5px; }

	#wrapperStage #stage #stageIndexImage #wScroller { position: relative; }

/* ======================================================
	=3.1.1 Schaltfl�chen am rechten / linken Stage-Rand
========================================================= 
#wrapperStage #stage #wrapperNewsList div.box_scroll {
	position: absolute;
	top: 31px;
	z-index: 150;
	
	width: 25px;
	height: 70px;
}

#wrapperStage #stage #wrapperNewsList #scrollHorLeftTop { left: -10px; }
#wrapperStage #stage #wrapperNewsList #scrollHorRightTop { right: 0; }

	#wrapperStage #stage #wrapperNewsList #scrollHorLeftTop a { background: url(img/other/arrow_fff_left_11x28.gif) no-repeat 16px 60px; }
	#wrapperStage #stage #wrapperNewsList #scrollHorRightTop a { background: url(img/other/arrow_fff_right_11x28.gif) no-repeat 5px 30px; }*/

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

	=3.2 News: Bilder und Newstexte
	
========================================================= */
#wrapperStage #stage #stageIndexImage {
	position: relative;
	
	width: 809px;
	height: 405px;
	background-color: #FFFFFF;
}

/* ======================================================
	=3.2.1 Schaltfl�chen am rechten / linken Stage-Rand
========================================================= */
#wrapperStage #stage #stageIndexImage div.box_scroll {
	position: absolute;
	top: 0;
	z-index: 50;
	
	width: 50px;
	height: 405px;
}

#wrapperStage #stage #stageIndexImage #scrollHorLeft { left: 0; }
#wrapperStage #stage #stageIndexImage #scrollHorRight { left: 759px; }

	#wrapperStage #stage #stageIndexImage div.box_scroll a {
		display: block;
		height: 405px;
		width: 50px;
	}
	
	#wrapperStage #stage #wrapperNewsList div.box_scroll a {
		display: block;
		height: 122px;
		width: 25px;
	}
	
	*+html #wrapperStage #stage #stageIndexImage div.box_scroll a { background: url(img/other/blank.gif) repeat; }
	
	#wrapperStage #stage #stageIndexImage #scrollHorLeft a:hover { background: url(img/other/arrow_scroller_left.gif) no-repeat center; }
	#wrapperStage #stage #stageIndexImage #scrollHorRight a:hover { background: url(img/other/arrow_scroller_right.gif) no-repeat center; }
	
/* ======================================================
	=3.2.2 News
========================================================= */
* html #wrapperStage #stage #stageIndexImage ul {
	height: 405px;
	margin-top: 10px;
}

#wrapperStage #stage #stageIndexImage ul li {
	position: relative;
	float: left;
	
	height: 405px;
	width: 809px;
}

	#wrapperStage #stage #stageIndexImage img,
	#wrapperStage #stage #stageIndexImage object {
		position: absolute;
		top: 0;
		left: 0;
	}
	
	#wrapperStage #stage #stageIndexImage div.box_text {
		position: relative;
		padding: 32px 50px;
	}
	
	#wrapperStage #stage #stageIndexImage div.top {	padding-top: 50px; }
	#wrapperStage #stage #stageIndexImage div.bottom {	padding-top: 300px; }
	
	#wrapperStage #stage #stageIndexImage div.left { float: left; }
	#wrapperStage #stage #stageIndexImage div.right { float: right; }
	
	
		#wrapperStage #stage #stageIndexImage div.box_text h3 { 
			font-size: 16px; 
			color: #fff;
		}
	
		#wrapperStage #stage #stageIndexImage div.box_text p { 
			font-size: 14px;
			color: #fff;
			margin-top: 5px;
		}
		
			#wrapperStage #stage #stageIndexImage div.box_text span.black { color: #000; }
			#wrapperStage #stage #stageIndexImage div.box_text span.grey { color: #888; }
			
		#wrapperStage #stage #stageIndexImage div.box_text p.read_more { margin-top: 15px; }