/* ==================================================================
General stylesheet for website layout
File: layout.css
Media: all

Date: 08.04.2013 (21.10.2011)
Author:	grintsch communications (mf)
Internet: www.grintsch.com

Content
CSS statements for Ideal Standard

1. General selectors
	1.1 Inline elements
	1.2 Block elements
	1.3 Classes
	1.4 Clearfix elements

2. Wrapper + boxes: Basics
	2.1 Wrapper + boxes: Basics - Column system
		2.1.1 Wrapper + boxes: Basics - Column system: Sizes
	2.2 Wrapper + boxes: Box types

3. Site wrapper

4. Logo

5. Breadcrumb

6. Content area
	6.1 Content area: Main headline
	6.2 Content area: Text area
	6.3 Content area: Action + Misc area

7. Header

8. Main Navigation (Header)
	8.1 Main Navigation (Header): Second level - Default drop downs
	8.2 Main Navigation (Header): Second level - Mega drop downs
		8.2.1 Main Navigation (Header): Second level - Mega drop downs - Inspiration
		8.2.2 Main Navigation (Header): Second level - Mega drop downs - Collections
		8.2.3 Main Navigation (Header): Second level - Mega drop downs - Products
	8.3 Main Navigation (Header): Chrome Hacks

9. Subnavigation (Header)

10. Lateral navigations

11. Country selector (Header)
	11.1 Country selector (Header): Level 1
	11.2 Country selector (Header): Nested elements

12. Login / Register / Notepad (Header)
	12.1 Login / Register / Notepad (Header): Basics
	12.2 Login / Register / Notepad (Header): Ideal Pro
		12.2.1 Login / Register / Notepad (Header): Ideal Pro - Flyout
	12.3 Login / Register / Notepad (Header): Notepad - Flyout with product list
		12.3.1 Login / Register / Notepad (Header: Notepad - Flyout with product list - Table
	12.4  Login / Register / Notepad (Header): Notepad - Modal window

13. Logo-Link

14. Search (Header)

15. Footer

16. Loader
==================================================================== */
/* ======================================================

	=1. General selectors

========================================================= */
* {
	padding: 0px;
	border: 0px;
	margin: 0px;
	outline: 0;
}

:focus { outline: 0; }

html { height: 101%; }

body {
	font-family: "museo-sans-n1", "museo-sans", Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: 100;
	font-size: 14px;
	color: #686868;
	text-align: center;
	line-height: 1.5em;
	
	height: 101%;
	border-top: 10px solid #E6E7E7;
}

/* ======================================================

	=1.1 Inline elements

========================================================= */
a {
	color: #000;
	text-decoration: underline;
}

a:hover,
a:focus,
a:active { color: #686868; }

img { vertical-align: top; }

/* ======================================================

	=1.2 Block elements

=========================================================*/

/* ======================================================

	=1.3 Classes

========================================================= */
.clearer {
	float: none !important;
	clear: both !important;

	font-size: 0;

	width: 0;
	height: 0;
	line-height: 0 !important;
}

span.clearer { display: block; }

.wech {
	display: inline;
	position: absolute;
	left: -10000px;
	top: -10000px;
	overflow: hidden;

	width: 0;
	height: 0;
}

.line {
	width: 100%;
	margin: 0 0 20px;
}

	.line hr {
		border-top: 1px solid #c0c1c2;
		margin: 0 20px;
	}
	
.elements_handles { display: block; } /* @toReview */

#content .right { float: right; } /* @toReview */
#content .left { float: left; } /* @toReview */

.float-right { float: right; }
.float-leftt { float: left; }

.arrow_top_before,
.arrow_top_after {
	bottom: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
} /* deprecaded */

.arrow_top_after {
	left: 50%;
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #fff;
	border-width: 10px;
	margin-left: -10px;
} /* deprecaded */

.arrow_top_before {
	left: 50%;
	border-color: rgba(0, 0, 0, 0);
	border-bottom-color: #c0c1c2;
	border-width: 11px;
	margin-left: -11px;
} /* deprecaded */

/* ======================================================

	=1.4 Clearfix elements

========================================================= */
.clearfix:after,
.box_form li:after,
#content:after,
.footer:after,
#socialShare:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
} /* @toReview */

/* für IE7 */ 
* + html  .clearfix ,
* + html  .box_form li,
* + html  #content,
* + html  .footer,
* + html #socialShare{
	zoom: 1;
} /* deprecaded */

 /* für IE6 */ 
* html .clearfix,
* html .box_form li,
* html #content
* html .footer{
	height: 1%;
} /* deprecaded */

/* ======================================================

	=2. Wrapper + boxes: Basics

========================================================= */
.container { display: block; }

	.container--top { padding-top: 20px; }	
	.container--right { margin-right: 20px; }
	.container--bottom { padding-bottom: 20px; }
	.container--left { margin-left: 20px; }
	.container--all {
		padding: 20px 0;
		margin: 0 20px; 
	}
	.container--bottom-left { margin: 0 0 20px 20px; }
	.container--bottom-right { margin: 0 20px 20px 0; }
	
	.container--top-left { margin: 20px 0 0 20px; }
	
.wrap-bg { background-color: #E6E7E7; }

	.wrap-bg--left { border-left: 3px solid #fff; }
	.wrap-bg--top { border-top: 3px solid #fff; } 

/* Class for inline-block element */
.iblock-ini { letter-spacing: -0.31em; }

	.iblock {
		display: inline-block;
		letter-spacing: normal;
		/* Please IE < 8 */
		*display: inline;
		*zoom: 1;
	}

		.iblock--top { vertical-align: top; }
		.iblock--middle { vertical-align: middle; }
		.iblock--bottom { vertical-align: bottom; }

/* ======================================================

	=2.1 Wrapper + boxes: Basics - Column system

========================================================= */
.col { margin: 0 0 20px 20px; } /* deprecaded */
.col-ini { margin: 0; }

.col--right { text-align: right; }
.col--center { text-align: center; }
.col--left { text-align: left; }

/* ======================================================
	=2.1.1 Wrapper + boxes: Basics - Column system: Sizes
========================================================= */
/* deprecaded */
.colx2 { width: 140px; }
.colx3 { width: 220px; }
.colx4 { width: 300px; }
.colx5 { width: 380px; }
.colx6 { width: 460px; }
.colx7 { width: 540px; }
.colx8 { width: 620px; }
.colx9 { width: 700px; }
.colx10 { width: 780px; }
.colx11 { width: 860px; }
.colx12 { width: 940px; }
.colx13 { width: 1020px; }
.colx14 { width: 1100px; }
.colx15 { width: 1180px; }

/* ======================================================
	=2.1.2 Wrapper + boxes: Specials - Sizes for packery
========================================================= */
.rowx3 { height: 220px; }

.rowx6 { height: 460px; }

.row--fix300 { height: 300px; }
.row--fix600 { height: 600px; }

/* ======================================================
	=2.1.3 Wrapper + boxes: Specials - Flexible columns
========================================================= */
/* deprecaded */
.colx3--flex { width: 20%; }
.colx4--flex { width: 26.6%; }
.colx5--flex { width: 33.3%; }
.colx6--flex { width: 40%; }
.colx7--flex { width: 46.6%; }
.colx8--flex { width: 53.3%; }
.colx9--flex { width: 60%; }
.colx10--flex { width: 66.6%; }
.colx12--flex { width: 80%; }
.colx15--flex { width: 100%; }


.col--fix2 { width: 160px; }
.col--fix3 { width: 240px; }
.col--fix4 { width: 320px; }
.col--fix5 { width: 400px; }
.col--fix6 { width: 480px; }
.col--fix7 { width: 560px; }
.col--fix8 { width: 640px; }
.col--fix9 { width: 720px; }
.col--fix10 { width: 800px; }
.col--fix11 { width: 880px; }
.col--fix12 { width: 960px; }
.col--fix13 { width: 1040px; }
.col--fix14 { width: 1120px; }
.col--fix15 { width: 1200px; }


.col--flex20 { width: 20%; }
.col--flex25 { width: 25%; }
.col--flex33 { width: 33.3%; }
.col--flex50 { width: 50%; }
.col--flex66 { width: 66.6%; }
.col--flex75 { width: 75%; }
.col--flex100 { width: 100%; }

/* ======================================================

	=2.2 Wrapper + boxes: Box types

========================================================= */
#content .box_img { position: relative; } /* deprecaded */

#content .box_title {
	position: absolute;
	right: 20px;
	bottom: 20px;

	width: 280px;
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	padding: 20px;
} /* deprecaded */

/* ======================================================

	=2.3 Wrapper + boxes: Wrapper box

========================================================= */
.wrap-box {}

	.wrap-box .wrap-box__title {
		font: 14px/18px "museo-sans-n5", "museo-sans", Arial, Helvetica, sans-serif;
		font-weight: 500;
		color: #009de4;
		
		margin: 20px 0 5px 15px;
	}
	
		.wrap-box /*ul*/.lists--linklist li {
			float: none;
			
			background-image: none;
			padding: 0;
			border: none;
			margin: 0;
		}
	
			.wrap-box /*ul*/.lists--linklist li a {
				display: block;

				font: 12px/16px "museo-sans-n5", "museo-sans", Arial, Helvetica, sans-serif;
				font-weight: 500;
				color: #8b8b8a;
				vertical-align: bottom;

				background: url("img/sprite/no-repeat_x.png") no-repeat -2900px 10px;
				padding: 6px 0 6px 15px;
				border-bottom: 1px dotted #C0C1C2;
				margin: 0 0 0 15px;
			}
			
			.wrap-box /*ul*/.lists--linklist li a:hover { color: #009de4; }
			
.wrap-box /*ul*/.lists--linklist-block {}
			
	.wrap-box /*ul*/.lists--linklist-block li { display: block; }
		

.wrap-box /*ul*/.lists--linklist-inlineblock {
	display: table;

	letter-spacing: -0.31em;
}

	.wrap-box /*ul*/.lists--linklist-inlineblock li {
		display: inline-block;

		letter-spacing: normal;
		vertical-align: top;

		width: 50%;
	}

/* ======================================================

	=3. Site wrapper

========================================================= */
#wPage {
	width: 100%;
	min-height: 100px;
	padding: 0 0 40px;
}

	#wContent {
		text-align: left;

		min-width: 980px;
		max-width: 1220px;
		min-height: 700px;
		background-color: #fff;
		margin: 0 auto 40px;
	}

/* ======================================================

	=4. Header

========================================================= */
#wHeader {
	background: #fff;
	border-bottom: 1px solid #e6e7e7;
}

	#wHeader a {}

	#wHeader a:hover,
	#wHeader a:active,
	#wHeader a:focus { text-decoration: none; }

	#wHeader a.active {}
	
	#wHeader ul {
		list-style: none;
		
		margin-bottom: 0;
	}

	#wHeader #header {
		position: relative;
		
		text-align: left;
		
		max-width: 1220px;
		min-width: 980px;
		height: 100px;
		margin: 0 auto;	
	}
	
/* ======================================================

	=5. Logo (Header)

========================================================= */
#wHeader a.logo {
	position: absolute;
	top: 15px;
	left: 20px;
	
	width: 192px;
	height: 69px;
	background: url(img/sprite/no-repeat.png) no-repeat -50px -550px;
}

	#wHeader a.logo img { display: none; }

/* ======================================================

	=6. Main Navigation (Header)

========================================================= */
#mainNavigation.level-01 {
	position: absolute;
	top: 48px;
	right: 20px;
	z-index: 1000;

	font-family: "museo-sans-n5", "museo-sans", Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
	text-transform: uppercase;
	list-style-type: none;
	letter-spacing: -0.31em;
}

	#mainNavigation /*li*/.level-01__item {
		position: relative;
		display: inline-block;
		
		letter-spacing: normal;
	
		background-color: #fff;
		margin: 0 0 0 5px;
	}

	#mainNavigation /*li*/.level-01__item:hover { padding-bottom: 1px; }

			#mainNavigation /*a*/.level-01__href {
				display: block;

				color: #000;
				text-decoration: none;
				
				padding: 6px 8px 4px;
				margin: 1px;
			}
			
			#mainNavigation /*a*/.level-01__href--child  {
				background: url(img/sprite/no-repeat_S.png) no-repeat right 13px;
				padding: 6px 15px 4px 8px;
			}
				
				#mainNavigation /*span*/.level-01__href__item {
					display: block;
					
					padding: 0 0 5px;
					border-bottom: 3px solid;
				}

				#mainNavigation > li.section_0 /*span*/.level-01__href__item { border-color: #ee007d; }
				
				#mainNavigation > li.section_1 /*span*/.level-01__href__item { border-color: #fa5400; }
				
				#mainNavigation > li.section_2 /*span*/.level-01__href__item { border-color: #00ac1f; }
				
				#mainNavigation > li.section_3 /*span*/.level-01__href__item { border-color: #0D7ABF; }
				
				#mainNavigation > li.section_4 /*span*/.level-01__href__item { border-color: #ffba00; }
				
				#mainNavigation > li.section_5 /*span*/.level-01__href__item { border-color: #a2042f; }

			#mainNavigation /*a*/.level-01__href:hover,
			#mainNavigation /*a*/.level-01__href:focus,
			#mainNavigation /*a*/.level-01__href:active {
				text-decoration: none;
				
				padding-bottom: 5px;
				margin-bottom: 0;
			}

			#mainNavigation li.section_0:hover /*a*/.level-01__href,
			#mainNavigation li.section_0.active /*a*/.level-01__href { color: #f60089; }

			#mainNavigation li.section_1:hover /*a*/.level-01__href,
			#mainNavigation li.section_1.active /*a*/.level-01__href { color: #fa5400; }
			
			#mainNavigation li.section_2:hover /*a*/.level-01__href,
			#mainNavigation li.section_2.active /*a*/.level-01__href { color: #00ac1f; }

			#mainNavigation li.section_3:hover /*a*/.level-01__href,
			#mainNavigation li.section_3.active /*a*/.level-01__href { color: #0D7ABF; }

			#mainNavigation li.section_4:hover /*a*/.level-01__href,
			#mainNavigation li.section_4.active /*a*/.level-01__href { color: #f6b300; }

			#mainNavigation li.section_5:hover /*a*/.level-01__href,
			#mainNavigation li.section_5.active /*a*/.level-01__href { color: #a2042f; }

/* ======================================================

	=6.1 Main Navigation (Header): Second level - Default drop downs

========================================================= */
#mainNavigation div.box-drop {
	position: absolute;
	top: 35px;
	left: -20px;
	visibility: hidden;
	z-index: 1000;

	box-shadow: 0 0 5px rgba(0,0,0,0.2 );
	text-transform: none;
	
	width: 220px;
	background-color: #fff;
	padding: 20px 20px 20px 0;
}

#mainNavigation div.box-drop.box-drop--last {
	left: auto;
	right: 0;
}

#mainNavigation li:hover div.box-drop {
	visibility: visible;
	display: inherit;
}

	#mainNavigation .wrap-col h4 { margin-bottom: 10px; }
	
	#mainNavigation .list--linklist /*a*/.list__href { font: 500 12px/16px "museo-sans-n5","museo-sans",Arial,Helvetica,sans-serif; }

/* ======================================================

	=6.2 Main Navigation (Header): Second level - Mega drop downs

========================================================= */
/* ======================================================
	=6.2.1 Main Navigation (Header): Second level - Mega drop downs - Inspiration
========================================================= */
#mainNavigation li.section_0 div.box-drop {
	left: -130px;
	
	width: 380px;
}
		
#mainNavigation li.section_0 /*a*/.list__href { background-position: -4100px 10px; }

#mainNavigation li.section_0 .wrap-col h4,
#mainNavigation li.section_0 /*a*/.list__href:hover { color: #ee007d; }

/* ======================================================
	=6.2.2 Main Navigation (Header): Second level - Mega drop downs - Collections
========================================================= */
#mainNavigation li.section_1 div.box-drop {
	left: -130px;
	
	width: 380px;
}

#mainNavigation li.section_1 /*a*/.list__href { background-position: -5300px 10px; }

#mainNavigation li.section_1 .wrap-col h4,
#mainNavigation li.section_1 /*a*/.list__href:hover { color: #fa5400; }

/* ======================================================
	=6.2.3 Main Navigation (Header): Second level - Mega drop downs - Products
========================================================= */
#mainNavigation li.section_2 div.box-drop {
	left: -130px;
	
	width: 380px;
}

#mainNavigation li.section_2 /*a*/.list__href { background-position: -6500px 10px; }

#mainNavigation li.section_2 .wrap-col h4,
#mainNavigation li.section_2 /*a*/.list__href:hover { color: #00ac1f; }

/* ======================================================
	=6.2.4 Main Navigation (Header): Second level - Simple drop downs
========================================================= */
#mainNavigation li.section_4 div.box-drop { left: -60px; }
#mainNavigation li.section_5 div.box-drop { left: -85px; }

#mainNavigation li.section_3 /*a*/.list__href { background-position: -2898px 10px; }
#mainNavigation li.section_4 /*a*/.list__href { background-position: -7700px 10px; }
#mainNavigation li.section_5 /*a*/.list__href { background-position: -8900px 10px; }
#mainNavigation li.section_6 /*a*/.list__href { background-position: -15100px 10px; }

#mainNavigation li.section_3 /*a*/.list__href:hover { color: #3d6d71; }
#mainNavigation li.section_4 /*a*/.list__href:hover { color: #ffba00; }
#mainNavigation li.section_5 /*a*/.list__href:hover { color: #a2042f; }
#mainNavigation li.section_6 /*a*/.list__href:hover { color: #000; }

/* ======================================================

	=6.3 Main Navigation (Header): Chrome Hacks

========================================================= */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	#mainNavigation li.section_0 div.box-drop ul li { background-position: -4100px 8px; }
	#mainNavigation li.section_1 div.box-drop ul li { background-position: -5300px 8px; }
	#mainNavigation li.section_2 div.box-drop ul li { background-position: -6500px 8px; }	
	#mainNavigation li.section_4 div.box-drop ul li { background-position: -7700px 8px; }
	#mainNavigation li.section_5 div.box-drop ul li { background-position: -8900px 8px; }
} /* @toReview */		
	
/* ======================================================

	=7. Top navigation area

========================================================= */
#wNavTop {
	position: absolute;
	top: -10px;
	right: 20px;

	width: 500px;
	background: #E6E7E7;
	padding: 6px 20px;
	border-radius: 0 0 10px 10px;
}

.top-nav__item {
	padding-left: 10px;
	border-left: 1px solid #c0c1c2;
	margin-left: 10px;
	margin-top: 2px;
}

.top-nav__item:first-child {
	padding-left: 0;
	border-left: none;
	margin-left: 0;
}

	.top-nav__title {
		font: 12px/18px "museo-sans-n5", "museo-sans", Arial, Helvetica, sans-serif;
		font-weight: 500;
		color: #8b8b8a;
		text-decoration: none;
		
		cursor: pointer;
	}
	
	.top-nav__title.switch_language { font-size: 14px; }
	
	.top-nav__title.active { color: #ffba00; }
	
/* ======================================================

	=7.1 Top navigation area: Ideal Pro

========================================================= */
#toISPro .top-nav__title { color: #4f6894; }

#flyoutProfessionals.show { display: block !important; }

.js_whithout_js #toISPro:hover #flyoutProfessionals { display: block; }

/* ======================================================
	=7.1.1 Top navigation area: Ideal Pro - Flyout
========================================================= */
#flyoutProfessionals {
	display: none;
	position: absolute;
	top: 25px;
	right: -3px;
	z-index: 1000;
	
	text-align: left;
	
	width: 925px;
	padding: 0;	
	height: 330px;
}
	
	#flyoutProfessionals .inner {
		position: absolute;
		
		width: 900px;
		background: #fff;
		padding: 0 20px 20px 0;
		border: 1px solid #c0c1c2;
		margin: 13px 0 0;
		box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
	}

/* ======================================================

	=7.1 Notepad (Top navigation area)

========================================================= */
#wNavTop .drop-area { position: relative; }

#wNavTop .box-drop {
	position: relative;
	z-index: 1010;
}

#wNavTop .box-drop--down {
	top: -4px;
	left: 0;
}

#wNavTop .box-drop--arrow {}

	#wNavTop .box-drop__inner {
		position: absolute;
		
		background-color: #fff;
		box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
		border: 1px solid #c0c1c2;
		margin: 13px 0 0;
	}
	
#wNavTop .box-drop__arrow {
	position: absolute;
	bottom: 100%;
	left: 50%;
	
	content: " ";
	height: 0;
	width: 0;
	border: solid transparent;

	pointer-events: none;
}

	#wNavTop .box-drop__arrow--top-inner {
		border-color: rgba(255, 255, 255, 0);
		border-bottom-color: #fff;
		border-width: 10px;
		margin-left: -10px;
	}

	#wNavTop .box-drop__arrow--top-outer {
		border-color: rgba(0, 0, 0, 0);
		border-bottom-color: #c0c1c2;
		border-width: 11px;
		margin-left: -11px;
	}

/* ======================================================
	=7.1.2.2 Notepad (Top navigation area): Notepad - Flyout with product list
========================================================= */
#wNavTop .notepad-products { left: -131px; }

	.notepad-products__inner {
		width: 300px;
		padding-bottom: 15px;
	}
	
	.notepad-products__inner .wrap-button {
		padding: 15px 15px 0;
		border-top: 1px dotted #C0C1C2;
		margin: 0;
	}
		
/* ======================================================
	=7.1.2.1.1 Notepad (Top navigation area): Notepad - Flyout with product list - Table
========================================================= */
.notepad-products__inner /*table*/.notepad-products__table {
	font: 500 12px/18px "museo-sans-n5", "museo-sans", Arial, Helvetica, sans-serif;
	
	width: 100%;
}

/*table*/.notepad-products__table a {
	display: block;
	
	color: #009de4;
	text-decoration: none;
}

	.notepad-products__caption {
		font: 300 1.333em/1.333em "museo-sans-n3","museo-sans",Arial,Helvetica,sans-serif;
		color: #009de4;
		
		background: #fff;
		padding: 15px 15px 10px;
	}
	
		.notepad-products__caption a { background: url("/fileadmin/templates/main/res/css/img/sprite/no-repeat_x.png") no-repeat scroll -2640px 7px; }
		
			.notepad-products__caption--text {
				font-size: 0.857em;
				color: #686868;
			}
		
	.notepad-products__td {
		vertical-align: top;
		
		border-style: dotted;
	}

	.notepad-products__td--img { padding: 15px 10px 15px 15px; }
	
	.notepad-products__td--text { padding: 15px 15px 15px 0; }
	
		/*p*/.notepad-products__text { margin: 0; }
	
			/*p*/.notepad-products__text--title { color: #009de4; }
		
			/*p*/.notepad-products__text--small {}
				/*p*/.notepad-products__text--small a { color: #8b8b8a; }

/* ======================================================
	=7.1.2.2 Notepad (Top navigation area): Notepad - Modal window
========================================================= */
#wNavTop .notepad-notification { left: -181px; }

	#wNavTop .notepad-notification__inner { width: 400px; }

/* ======================================================

	=7.3 Search (Header: Top navigation area)

========================================================= */
#wHeader div.search {
	position: absolute;
	top: 3px;
	right: 20px;
	
	height: 22px;
}

#wHeader div.search form#formSearch {
	position: relative;
	top: 0;
	width: 212px;
}

	#wHeader div.search .form__input--text {
		position: absolute;
		top: 0;
		left: 0;
		
		font-size: 12px;
		line-height: 26px;
		color: #c0c1c2;
		
		padding: 0 30px 0 10px;
		width: 212px;
		height: 28px;
	}

	#wHeader div.search .form__input--img {
		position: absolute;
		top: 6px;
		right: 6px;
				
		height: 17px;
		width: 17px;	
		background: transparent url("img/sprite/no-repeat.png") no-repeat  -300px -450px;
	}		

/* ======================================================

	=8. Breadcrumb

========================================================= */
#wBreadcrumb {
	font-family: "museo-sans-n5", "museo-sans", Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 12px;
	color: #686868;
	text-transform: uppercase;
	
	height: 23px;
	padding: 8px 0 9px;
	margin: 0 20px;
}

	#wBreadcrumb a {
		color: #8b8b8a;
		text-decoration: none;
	}

	#wBreadcrumb a:hover,
	#wBreadcrumb a:active,
	#wBreadcrumb a:focus { color: #c0c1c2; }

	#wBreadcrumb span { padding: 0 5px; }

	#wBreadcrumb a.first span { padding-left: 0; }

#wBreadcrumb hr {
	border-bottom: 3px solid #009de4;
	margin-top: 8px;
}

/* ======================================================

	=9. Content area

========================================================= */
#content {
	width: 100%;
	min-height: 100px;
}

/* ======================================================

	=9.1 Content area: Main headline

========================================================= */
#mainHeadline {}

	#wContent.two_cols #mainHeadline {
		float: left;
		
		width: 240px;
	}

/* ======================================================

	=9.2 Content area: Text area

========================================================= */
#wContentText { width: 100%; }

	#contentText { margin-left: 240px; }

	#wContent.full #contentText { margin-left: 0; }

/* ======================================================

	=9.3 Content area: Action + Misc area

========================================================= */
#contentActions {
	float: left;

	width: 240px;
}

#contentMisc {
	clear: both;
	padding-bottom: 20px;
}

/* ======================================================

	=11. Footer

	@reviewed

========================================================= */
#wPageFooter {
	position: relative;
	background: #fff;
	
	border-top: 1px solid #c0c1c2;
	
	width: 100%;
}

	#wPageFooter div.footer {
		position: relative;

		font-family: "museo-sans-n5", "museo-sans", Arial, Helvetica, sans-serif;
		font-size: 12px;
		line-height: 16px;
		font-style: normal;
		font-weight: 500;
		color: #8b8b8a;
		text-align: left;

		min-width: 980px;
		max-width: 1220px;
		padding: 12px 0;
		margin: 0 auto;
	}

		#wPageFooter div.footer hr {
			border-top: 1px solid #d6d6d6;
			margin: 0 20px 9px;
		}
		
		#wPageFooter a { text-decoration: none; }

/* ======================================================

	=11.1 Footer: Navigation object

	@reviewed

========================================================= */
#wPageFooter /*ul*/.navi {
	list-style-type: none;
	
	margin: 0;
}

#wPageFooter /*ul*/.navi--sub {}

	#wPageFooter /*ul*/.navi--sub li {}

/* ======================================================

	=11.2 Footer: Navigation

	@reviewed

========================================================= */
#wNaviFooter {
	position: absolute;
	top: 12px;
	right: 240px;

	text-align: right;
	line-height: 12px !important;
			
	width: 315px;
}
		
	#wNaviFooter li { 
		padding: 0 8px;
		border-right: 1px solid #c0c1c2; 
		margin: 2px 0;	
	}	
				
	#wNaviFooter li:nth-child(3n+3) { border-right: none; }	

		#wNaviFooter a { color: #8b8b8a; }

		#wNaviFooter a:hover,
		#wNaviFooter a:active,
		#wNaviFooter a:focus { color: #c0c1c2; }

		#wNaviFooter a.active { color: #009de4; }
				
/* ======================================================

	=11.3 Footer: Legals + Copyright

	@reviewed

========================================================= */
#wPageFooter div.legals {
	float: left;

	font-size: 12px;

	padding-right: 560px;
	margin: 0 0 0 20px;
}

	#wPageFooter div.legals p.copyright {
		color: #c0c1c2;

		margin-bottom: 0;
	}

	#wPageFooter div.legals p.cookies { margin-bottom: 0; }

		#wPageFooter div.legals p.cookies a { color: #686868; }

		#wPageFooter div.legals p.cookies a:hover,
		#wPageFooter div.legals p.cookies a:active,
		#wPageFooter div.legals p.cookies a:focus { text-decoration: underline; }
				
		
/* ======================================================

	=11.4 Footer: Country selector

	@reviewed

========================================================= */
#wCountrySelector {
	position: absolute;
	top: 12px;
	right: 20px;
	z-index: 600;
	
	width: 212px;
	height: 32px;
	background-color: #fff;
	border: 1px solid #d6d6d6;
	border-radius: 5px;
}

#wCountrySelector:hover { border-radius: 0 0 5px 5px}
	
	#wCountrySelector ul{ list-style: none; }

	#wCountrySelector a {
		font-size: 12px;
		color: #8b8b8a;
		text-decoration: none;
	}

/* ======================================================
	=11.4.1 Country selector (Footer): Level 1
========================================================= */
#wPageFooter ul li.level_one {
	display: table;
	
	height: 32px;
	margin-left: 0;
}

	#wPageFooter ul li.level_one a {
		display: table-cell;
		
		vertical-align: middle;

		width: 212px;
		height: 32px;
		background: url("img/sprite/no-repeat_x.png") no-repeat scroll -9909px 14px;
	}
	
		#wPageFooter ul li.level_one a span {
			display: block;
			
			border-right: 1px solid #C0C1C2;
			margin: 0 32px 0 18px;
		}

/* ======================================================
	=11.4.2 Country selector (Footer): Nested elements
========================================================= */
#wCountrySelector ul ul {
	display: none;
	position: absolute;
	bottom: 32px;
	left: -1px;
	z-index: 1001;
	overflow: hidden;
	
	list-style-type: none;

	width: 212px;
	border: 1px #d6d6d6;
	border-style: solid solid none;
	border-radius: 5px 5px 0 0;
	margin: 0;
}

#wCountrySelector:hover ul,
#wCountrySelector ul li a:hover ul { display: block; }

	#wCountrySelector ul ul li.level_two { margin: 0; }

	#wCountrySelector ul ul li.level_two a {
		background: #fff;
		border-bottom: 1px solid #d6d6d6;
	}

		#wCountrySelector ul ul li.level_two a span { border: none; }
	
	#wCountrySelector ul ul li.level_two a:hover {
		color: #fff;

		background-color: #666;
	}
		
	#wCountrySelector ul ul li.level_two:first-child a:hover { border-radius: 5px 5px 0 0;}

	#wCountrySelector ul ul li.level_two a:active {
		color: #8b8b8a;

		background-color: #c0c1c2;
	}
	
/* ======================================================

	=11.5 Socialbuttons (Footer)

	@reviewed

========================================================= */
#socialShare {
	position: absolute;
	top: -30px;
	right: 20px;
}
	
	#socialShare /*ul*/.navi--sub { width: 116px; }
	
		#socialShare li {
			padding: 0;
			margin: 0;
		}

			#socialShare li a {
				display: block;

				width: 29px;
				background: url(img/sprite/no-repeat.png) no-repeat;		
				height: 29px;
			}

			#socialShare li.facebook a {
				background-position: 8px -493px;
				background-color: #092e6e;
			}

			#socialShare li.twitter a {
				background-position: -44px -495px;
				background-color: #007bd9;
			}

			#socialShare li.pinterest a {
				background-position: -96px -497px;
				background-color: #ea0e11;
			}

			#socialShare li.google a {
				background-position: -144px -495px; 
				background-color: #f84d33;
			}

			#socialShare li.instagram a {
				background-position: -396px -445px;
				background-color: #4090db;
			}
			
			#socialShare li.youtube a {
				background-position: -345px -444px;
				background-color: #e62117;
			}
			
			#socialShare li.email a {
				background-position: -193px -492px;
				background-color: #f14e00;
			}

			#socialShare li a:hover { background-color: #9c9c9c; }	
	
/* ======================================================

	=12. Loader

========================================================= */
#js_spinner img {
	position: fixed;
	top: 50%;
	left: 50%;
	
	background: #eee;
	background: rgba(255,255,255,0.8);
	padding: 60px;
	border: 1px solid #c0c1c2;
	margin-left: -114px;
}