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

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

Inhalt:
CSS-Anweisungen für Friendsmobile

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

2. Site-Wrapper

3. Logo

4. Contentbereich
	4.1 TextContent
		4.1.1 box_text
		4.1.2 box_header 
		4.1.3 text_full
		4.1.4 text_half
		4.1.5 text_one_third
		4.1.6 contacts
	4.2 InfoContent
		4.2.1 InfoContent für Startseite

5. Header
	5.1 Subnavigation
	5.2 download-area
	5.3 Breadcrumb

6. Menu Main

7. Footer
8. Seitenspezifische Klassen
9. Klassenspezifische Inline-Elemente
10. Klassenspezifische Block-Elemente
11. Klassenspezifische Listen
12. Spezielle Klassen
==================================================================== */
/* ======================================================

	=1. Allgemeine Selektoren

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

:focus { outline: 0; }

html { height: 101%; }

body {
	font-family: Arial, Helvetica, Tahoma, Myriad, sans-serif;
	font-size: 12px;
	color: #72737a;
	text-align: center;

	height: 101%;
	background-color: #cccccc;
}

/* ======================================================
	=1.1 Inline-Elemente
========================================================= */
a {
	color: #004ebd;
	line-height: 18px;
	text-decoration: none; 
}

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

em { font-style: normal; }

img { vertical-align: top; }

/* ======================================================
	=1.2 Block-Elemente
=========================================================*/ 
h1 {
	color: #e2001a;
	font-size: 24px;
	line-height: 26px;
}

h2, h2 a {
	color: #e2001a;
	font-size: 18px;
	line-height: 22px;
}

h3, h3 a {
	color: #e2001a;
	font-size: 16px;
}

h2 a:hover,
h2 a:focus,
h2 a:active,
h3 a:hover,
h3 a:focus,
h3 a:active { text-decoration: none; }

h2.blue a,
h3.blue a {
	color: #004ebd;
}

h4 {
	color: #e2001a;
	font-size: 14px;	
}

p {
	color: #72737a;
	font-size: 12px;
	line-height: 18px;
}

/* ======================================================
	=1.3 Klassen
========================================================= */
.clearer {
	clear: both;

	font-size: 0px;

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

.blue { color: #004ebd; }

.blue_XL {
	display: block;
	line-height: 34px;
	font-size: 22px;
	color: #004ebd;
}

.red { color: #e2001a; }

.border {
	padding-bottom: 5px;
	margin: 0 15px;
	border-bottom: 1px solid #72737a;
}

a.readmore {
	display: block;
	padding-left: 10px;
	background: url(img/reste/arrow_e2001a_8x12.gif) no-repeat 0 3px;
}

p.abstract { font-size: 14px; }

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

span.tagcloud_S a { 
	font-size: 14px;
	line-height: 18px;
	font-weight: bold;
	color: #999999;
}
span.tagcloud_M a { 
	font-size: 15px;
	line-height: 20px;
	font-weight: bold;
	color: #727272;
}
span.tagcloud_L a { 
	font-size: 16px; 
	line-height: 20px;
	font-weight: bold; 
	color: #4d4d4d;
}
span.tagcloud_XL a { 
	font-size: 18px; 
	line-height: 20px;
	font-weight: bold; 
	color: #4d4d4d;
}

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

	=2. Site-Wrapper

========================================================= */
#wPage {
	text-align: left;
	width: 990px;
	margin: 0 auto;
}

#wPageBg {
	position: relative;
	padding: 0 15px;	
	background: url(img/bg/wPageBg.gif) repeat-x bottom left;
}

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

	=3. Logo

========================================================= */
#wLogo {
	width: 975px;
	padding: 30px 0 10px 15px;
	margin-left: -15px;
}

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

	=4. Contentbereich

========================================================= */
#wContent {	background: url(img/bg/wContent.gif) repeat-y; }

#wPage.blueC #wContent { background: url(img/bg/wContent_blue.gif) repeat-y; }

#wContent #content { background: url(img/bg/content.gif) no-repeat; }
	
#wContentBg {
	padding-bottom: 30px;
	background: url(img/bg/wContentBg.gif) no-repeat bottom left;
}

#wPage.blueC #wContentBg { background: url(img/bg/wContentBg_blue.gif) no-repeat bottom left; }

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

	=4.1 Content Text

========================================================= */
#wContentText {
	float: left;	
	width: 718px;
}

	/* ==================================================
		=4.1.1 box_text
	===================================================== */
	div.box_text { margin-bottom: 10px; }

	/* ======================================================
		=4.1.2 box_header
	========================================================= */
	#wContentText div.box_header { margin-bottom: 10px; }

	#wContentText div.box_header div.text_full,
	#wContentText div.box_header div.text_half,
	#wContentText div.box_header div.text_one_third { padding: 100px 0 15px 15px; }

	/* ======================================================
		=4.1.3 text_full
	========================================================= */
	#wContentText div.text_full {
		float: left;
		
		xxxwidth: 542px;
		width: 695px;
		padding: 5px 0 15px 15px;
		background-repeat: no-repeat;
	}

	/* ======================================================
		=4.1.4 text_half
	========================================================= */
	#wContentText div.text_half {
		float: left;
		
		width: 342px;		
		padding: 5px 0 15px 15px;
		background-repeat: no-repeat;
	}

	/* ======================================================
		=4.1.5 text_one_third
	========================================================= */
	#wContentText div.text_one_third {
		float: left;
		
		width: 208px;		
		padding: 5px 0 15px 15px;
		background-repeat: no-repeat;
	}

	/* ======================================================
		=4.1.6 Contacts
	========================================================= */
	#wContentText div.contact {
		width: 334px;
		padding: 0;
		margin: 5px 0 15px 15px;
		border: 1px solid #72737a;
	}

	#wContentText div.contact table.contact_card {
		width: 334px;
	}

	#wContentText div.contact td.text { 
		width: 160px;
		padding-left: 10px;
	}
	
	#wContentText div.contact td.img { width: 128px; }

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

	=4.2 InfoContent

========================================================= */
#wContentInfo {
	float: left;
	width: 240px;
}

	/* ======================================================
		=4.2.1 text_one_third
	========================================================= */
	#wContentInfo div.text_full,
	#wContentInfo div.text_half,
	#wContentInfo div.text_one_third {
		float: left;
		
		width: 208px;		
		margin: 0 15px 0 20px;
		padding: 15px 0 25px;
		
		border-bottom: 1px solid #72737a;
		background-repeat: no-repeat;
	}
		
/* ======================================================

	=5. Header

========================================================= */
#wHead { background-color: #003996; }

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

	=5.1 Subnavigation

========================================================= */
#sub-navigation {
	position: absolute;
	top: 85px;
	left: 257px;
	
	width: 476px;
	height: 25px;
	
	background-color: #fff;
}

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

	=5.2 download-area

========================================================= */
#download-area {
	position: absolute;
	top: 30px;
	left: 737px;
	
	width: 238px;
	height: 80px;

	background: url(img/bg/download_area_bg.jpg) no-repeat;
	z-index: 100;
}

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

	=5.3 Breadcrumb

========================================================= */
#breadcrumb {
	position: absolute;
	top: 8px;
	left: 25px;

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

	height: 30px;
	z-index: 1;
}

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

	=6. Menu Main

========================================================= */
#wMenuMain {
	position: absolute;
	top: 30px;
	left: 255px;
	
	width: 480px;
	height: 55px;	
	z-index: 100;
}

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

	=7. Footer

========================================================= */
#wFooter {
	position: absolute;
	top: 8px;
	right: 25px;

	height: 30px;
	z-index: 1;
}
	
/* ======================================================

	=8. Seitenspezifische Klassen

========================================================= */
#wPage.page_green { background-color: #9fc02c; }
#wPage.page_blue { background-color: #2967c0; }
#wPage.page_blue_gradient { background: #2967c0 url(img/bg/wPage_blue_gradient.gif) repeat-x; }
#wPage.page_red { background-color: #de293e; }

	/* ==================================================
		= Logo
	===================================================== */
	#wPage.page_green #wLogo { background: #9fc02c url(img/bg/wLogo_green.gif) no-repeat; }
	#wPage.page_blue #wLogo { background: #2967c0 url(img/bg/wLogo_blue.gif) no-repeat; }
	#wPage.page_blue_gradient #wLogo { background: #2967c0 url(img/bg/wLogo_blue_gradient.gif) no-repeat; }
	#wPage.page_red #wLogo { background: #de293e url(img/bg/wLogo_red.gif) no-repeat; }

	/* ==================================================
		= BoxText
	===================================================== */
	/* Green */
	#wPage.page_green div.box_text a.img_teaser.left,
	#wPage.page_green div.box_text a.img_teaser.right { background-color: #9FC02C; }
	
	/* Red */
	#wPage.page_red div.box_text a.img_teaser.left,
	#wPage.page_red div.box_text a.img_teaser.right { background-color: #de293e; }
	
	/* Blue */
	#wPage.page_blue div.box_text a.img_teaser.left,
	#wPage.page_blue div.box_text a.img_teaser.right { background-color: #2967c0; }
	
	/* Blue Gradient */
	#wPage.page_blue_gradient div.box_text a.img_teaser {
		float: left;
		
		width: auto;
		padding-bottom: 0;
	}

		#wPage.page_blue_gradient div.box_text a.img_teaser.left { 
			padding-right: 0; 
			border-bottom: 10px solid #749cd6;
		}
		
		#wPage.page_blue_gradient div.box_text a.img_teaser.right {
			padding-left: 0; 
			border-bottom: 10px solid #749cd6;
		}
	
	#wPage.page_blue_gradient div.box_text a.img_teaser.left span {
		display: block;
		border: 1px solid #fff;
		border-right: none;
		background: url(img/bg/wPage_blue_gradient.gif) repeat-x left -120px;
	}
	
		#wPage.page_blue_gradient div.box_text a.img_teaser.left img {
			margin: 10px 2px 10px 10px;
			border-right: 1px solid #FFFFFF;
			text-align: left;
		}

	#wPage.page_blue_gradient div.box_text a.img_teaser.right span {
		display: block;
		border: 1px solid #fff;
		border-left: none;
		background: url(img/bg/wPage_blue_gradient.gif) repeat-x left -120px;
	}

		#wPage.page_blue_gradient div.box_text a.img_teaser.right span img {
			margin: 10px 10px 10px 3px;
			text-align: right;
		}
	
/* ======================================================

	=9. Klassenspezifische Inline-Elemente

========================================================= */
	/* ==================================================
		= BoxText
	===================================================== */
	div.box_text a.img_teaser {
		float: left;
		
		width: 357px;
		padding-bottom: 4px;
	}

		div.box_text a.img_teaser.left { padding-right: 2px; }
		div.box_text a.img_teaser.right { padding-left: 2px; }


	/* ==================================================
		= Box Header
	===================================================== */	
	#wContentText div.box_header img { float: right; }

	#wContentText div.box_header p img { float: left; }

	/* ==================================================
		= contacts
	===================================================== */	
	#wContentText div.contact a {
		width: 160px;
		margin-top: 4px;
		color: #72737A; 
	}

	/* ==================================================
		= download-area
	===================================================== */	
	#download-area a {
		display: block;
		font-size: 11px;
		line-height: 14px;
		color: #72737a;
		
		width: 130px;
		padding: 15px 0 0 15px;
	}
	
		#download-area a:hover,
		#download-area a:active,
		#download-area a:focus { text-decoration: underline; }

		#download-area div.partner a {
			display: inline;
			padding: 0; 
		}

	/* ==================================================
		= breadcrumb
	===================================================== */	
	#breadcrumb a {
		font-size: 11px;
		color: #fff;
	}

		#breadcrumb a:hover { text-decoration: underline; }

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

	=10. Klassenspezifische Block-Elemente

========================================================= */
	/* ==================================================
		= #wContentText
	===================================================== */	
	#wContentText h1 { margin: 0 0 30px; }

	#wContentText h1,
	#wContentText h2,
	#wContentText h3 { padding: 0 0 5px 15px; }

		#wContentText h2.border,
		#wContentText h3.border { 
			xxxpadding: 10px 0 5px 0; 
			padding: 10px 0;
			margin-bottom: 10px;
		}

	#wContentText p { margin-bottom: 10px; }

		#wContentText p.abstract { padding: 0 0 0 15px; }

	#wContentText p.text_legal {
		font-size: 10px;
		line-height: 14px;
		margin-top: 50px;
	}

	/* ==================================================
		= Box Header
	===================================================== */	
	#wContentText div.box_header h1 {
		position: absolute;
		top: 160px;
		width: 690px;
	}

	#wContentText div.box_header h2 {
		position: absolute;
		top: 135px;
	}

	#wContentText div.box_header div.text_half h1 {	padding-left: 0; }

	#wContentText div.box_header div.text_half p.abstract { padding-left: 0; }

	/* ==================================================
		= text full
	===================================================== */	
	#wContentText div.text_full h2,
	#wContentText div.text_full h3 {
		xxxcolor: #e2001a;
		padding-left: 0; 
	}

	#wContentText div.text_full h2 a,
	#wContentText div.text_full h3 a { 
		padding-left: 0;
		background: none;
	}

	/* ==================================================
		= text half
	===================================================== */	
	#wContentText div.text_half h2,
	#wContentText div.text_half h3 { 
		color: #e2001a;
		padding: 0 0 5px 0; 
	}

	#wContentText div.text_half h2 a,
	#wContentText div.text_half h3 a { 
		color: #e2001a;
		padding-left: 0;
		background: none;
	}

	#wContentText div.text_half h2.blue,
	#wContentText div.text_half h3.blue { color: #004ebd; }

	#wContentText div.text_half h4 { margin-top: 10px; }

	/* ==================================================
		= text one third
	===================================================== */	
	#wContentText div.text_one_third h2,
	#wContentText div.text_one_third h3 { padding-left: 0; }

	#wContentText div.text_one_third h2 a,
	#wContentText div.text_one_third h3 a { 
		padding-left: 0;
		background: none;
	}

	/* ==================================================
		= #wContentInfo
	===================================================== */	
	#wContentInfo div.text_one_third h2 { 
		color: #e2001a;
		margin-bottom: 5px; 
	}

	/* ==================================================
		= contacts
	===================================================== */	
	#wContentText div.contact h3 {
		font-size: 12px;
		color: #004ebd;
	}

	/* ==================================================
		= Shadow Top
	===================================================== */	
	#wContentText div.shadow_top h1 { 
		top: 20px;
		margin-bottom: 5px;
	}
	
	#wContentText div.shadow_top h2 { top: -55px; }

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

	=11. Klassenspezifische Listen

========================================================= */
	/* ==================================================
		= #wContentText
	===================================================== */	
	#wContentText ol {
		color: #004ebd;
		line-height: 18px;
		font-weight: bold;
		padding-left: 18px;
		margin-bottom: 10px;
	}

		#wContentText ol li span {
			color: #72737a;
			font-weight: normal;
		}

		#wContentText ol li a {
			font-weight: normal;
			padding-left: 0;
			background: none;
		}

	#wContentText ul { 
		line-height: 18px;
		list-style-type: none;
		margin-bottom: 10px;
	}

	#wContentText ul li {
		background: url(img/reste/square_004ebd_4x4.gif) no-repeat 0 7px;
		padding-left: 10px;
	}

		#wContentText ul li a {
			font-weight: normal;
			padding-left: 0;
			background: none;
		}

	#wContentText ul.level_two { margin-bottom: 0;	}

	#wContentText ul.level_two li {	background: url(img/reste/square_e2001a_4x4.gif) no-repeat 0 7px; }

	#wContentText ul.level_three  { margin-bottom: 5px; }

	#wContentText ul.level_three li { 
		width: 500px;
		background: url(img/reste/square_72737a_4x4.gif) no-repeat 0 7px; 
	}

	/* ==================================================
		= Navigation
	===================================================== */	
	ul.navigation { list-style-type: none; }
	
	ul.navigation li {
		float: left;
		
		width: 156px;
		height: 53px;
		margin: 0 2px;
		background: url(img/bg/wMenuMain_bg.gif) repeat-x;
	}
	
	ul.navigation li a {
		display: block;
		
		font-size: 18px;
		font-weight: bold;
		text-transform:uppercase;
		
		width: 154px;
		height: 51px;
		margin: 1px;	
	}
	
	ul.navigation li a span {
		display: block;
		text-align: center;
		padding: 15px;
	}
	
		ul.navigation li a:hover,
		ul.navigation li a:focus,
		ul.navigation li a:active,
		ul.navigation li a.active {
			color: #fff;
			background-color: #6695d7;
			text-decoration: none;
		}

	/* ==================================================
		= #sub-navigation
	===================================================== */	
	#sub-navigation ul { list-style-type: none; }
	
	#sub-navigation ul li {
		float: left;
		
		height: 25px;
	}
	
	#sub-navigation ul li a {
		display: block;
		
		font-size: 12px;
		font-weight: bold;
		text-transform:uppercase;
		
		height: 23px;
		padding: 0 20px;
		margin: 1px;	
	}
	
	#sub-navigation ul li a span {
		display: block;
		text-align: center;
		padding: 2px;
	}
	
		#sub-navigation ul li a:hover,
		#sub-navigation ul li a:focus,
		#sub-navigation ul li a:active,
		#sub-navigation ul li a.active {
			color: #fff;
			background-color: #6695d7;
			text-decoration: none;
		}

	/* ==================================================
		= footer
	===================================================== */	
	ul.footer { list-style-type: none; }
	
	ul.footer li {
		float: left;
		color: #fff;
		
		margin-left: 5px;
	}
	
	ul.footer li a {
		font-size: 10px;
		color: #fff;
		text-transform: uppercase;
	}
	
		ul.footer li a:hover { text-decoration: underline; }

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

	=12. Spezielle Klassen

========================================================= */
	/* ==================================================
		= #wContentText
	===================================================== */	
	#wContentText div.shadow_top { background: url(img/bg/content.gif) no-repeat; }
	
	#wContentText div.service {
		min-height: 300px;
		background: url(img/bg/full_service.jpg) no-repeat; 
	}
	
	#wContentText div.unternehmen {
		min-height: 660px;
		background: url(img/bg/full_unternehmen.jpg) no-repeat; 
	}

	/* ==================================================
		= #wContentInfo
	===================================================== */	
	#wContentInfo span.blue_XL { margin: 10px 0; }
	
	#wContentInfo div.border { border-bottom: 1px solid #72737a; }
	
	#wContentInfo div.newsletter p.formlabel {
		margin-top: 12px;
	}

	#wContentInfo div.newsletter {
		float: left;
		
		width: 208px;
		margin: 20px 15px 0 20px;
		padding: 70px 0 25px;
		background: url(img/bg/newsletter_bg.gif) no-repeat;
	}

		#wContentInfo div.newsletter input.text { 
			width: 180px;
			padding: 0 2px 1px 2px;
			border: 1px solid #bdbdbd;
		}

		#wContentInfo div.newsletter input.submit { 
			width: 19px;
			height: 20px;
			padding-bottom: 2px;
			margin-left: -4px;
			background: url(img/reste/input_19x19.gif) no-repeat bottom;
			
			cursor: pointer;
		}	

		#wContentInfo div.newsletter p.red { 
			color: #e2001a;
			margin: 5px 0;
		}
		
	/* ==================================================
		= downlaod-area
	===================================================== */	
	#download-area div.partner { padding: 12px 0 0 10px; }