/* 
 * stylesCSS
 * cssDefintionen für Standard-Template blacknoise.com
 * 
* /

	
	
/* *******************************************************************************************
 * 
 * Aufbau des CSS:
 *  
 * 01 Structure - Aufbau Seitengerüst (Positionierer, Container, etc.)
 * 02 Textformate und Text-Elemente - Schriften und Größen, Überschriften, Links Fließtext, Listen, Tabellen
 * 03 Menus - Hauptmenu, Submenus, Footermenu ... (nicht: Links im Text und Seiten-Hilfsnavigation)
 * 04 Anpassung Seitenbereiche - Anpassungen der generellen Vorgaben an Seitenbereiche wie Infospalte
 * 05 Speziell gestaltete Objekte - Boxen, Hover-Effekte, Pop-Ups, auch: CSS-Anpassungen JQuery-Module
 * 06 Formulare - Standard und spezielle für einzelne Seiten/Abschnitte
 * 07 Indivduelle Anpassungen für Subtemplates
 * 08 Indivduelle einzelne(!) Objekte für einzelne(!) Seiten
 * 08 Testbereich
 * 
 * ******************************************************************************************* */




 
 
/* 01 Structure  
 * ****************************************************** */

 
body {
    background-image: url("side-bg.gif");
}

	

/* Header und Positionierung innerer Elemente */	

#header-outer {
    background-color: #f9f9f7;
}

#header {
	position: relative;
    height: 107px;
	padding-left: 0;
	padding-right: 0;
}


#logo {
    width: 390px;
    height: 100px;
    padding-top: 20px;
}

#headernavi {
    position: absolute;
    right: 0;
    top: 0;
	padding-top: 20px;
    width: 422px;
}

#topmenu {
	margin-bottom: 10px;
}

#haendler-button {
	float: left;
}

#flagmenu {
	margin-left: 195px;
}



/* Leiste für Hauptmenu */ 

#navi-outer {
	height: 54px;
    background-image: url("navi-bg.gif");
}

#navi {
	padding-left: 0;
	padding-right: 0;
}



/* Leiste Breadcrumb-Menu */

#breadcrumb-outer {
	background-color: #FFFFFF;
}

#breadcrumb {
	padding-left: 0;
	padding-right: 0;
}



/* Hauptbereich der Seite mit Content und Infospalte */

.NONOcontentarea-outer,		/* spez. für Lüfter-Templates */
#contentarea-outer {
	padding-top: 30px;
	padding-bottom: 30px;
    background-image: url("bg-content-top.gif");
    background-repeat: repeat-x;	
}

.NONOcontentarea, 			/* spez. für Lüfter-Templates */
#contentarea {
    position: relative;
    padding: 30px;
    background-color: white;
    border: 1px solid #D8D8D8;
} 



/* Footer-Top  mit innenliegenden Spalten */

#footer-top-outer {
	background-color: #F2F2F2;
	background-image: url("bg-footer-top.gif");
    background-repeat: repeat-x;
}

#footer-top {
	padding: 15px 0;
}

/* Boxen für Spalten im Footer  (Footer-Menus und Adressblock)*/	
.footer-top-spalte {
    display: inline-block;
	text-align: left;
	height: 150px;
	padding: 0 15px;
	vertical-align: top;
	border-left: 1px solid #CFCCCC;
}

.footer-top-spalte:first-child {
	border-left: none;
}


/* Footer-Bottom  mit innenliegenden Spalten */

#footer-bottom-outer {
	padding: 30px 0 40px 0;
	background-color: #DBDADA;
	border-top: 1px solid #E6E6E6;
}

#footer-bottom {
	padding: 0 30px;
}

/* Boxen für Spalten im Footer */	
.footer-bottom-spalte {
	display: inline-block;
	padding: 0 30px;
	vertical-align: top;
}
 
.footer-bottom-spalte:first-child {
	font-size: 11px;
} 


#footer-bottom-flag {
	position: relative;
	top: 3px;
}



 

/* Infospalte*/
	
#infospalte {
	margin-top: 20px;
}
	
 /* Submenu in Infospalte */ 
	
#submenu {
	margin-bottom: 20px;
}

	

	
	

/* 02 Textformate und Textelemente  
 * ****************************************************** */

 
 
/* Standardvorgaben Schrift komplett */
body {
    font-family: 'Karla', 'Lucida Sans Unicode', Arial, sans-serif;
    font-size: 14px;
	line-height: 20px;
	color: #222222;
}
	
p {
	margin-bottom: 20px;
}


/* Überschriften */	
  
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Questrial', Arial, sans-serif;
    font-size: 14px;
	line-height: 20px;
    font-weight: normal;
}

	
h1 {
    font-size: 32px;
	line-height: 40px;
	top: 6px;
    font-weight: normal;
    margin-bottom: 20px;
}

h2 {
    font-size: 18px;
	line-height: 20px;
    font-weight: normal;
    margin-bottom: 20px;
}

h3 {
	font-weight: bold;
	margin-bottom: 20px;
}

/* "Headline" für h1 */

h1 span.prehead {
	display: block;
	font-size: 14px;
	line-height: 20px;
}


	
/* Sonderformatierungen Typografie-Elemente */	
	
/* Links Fließtext */
	
a, 
a:visited, 
a:active { 
	color: #335980;
	text-decoration: none;
}
	
a:hover {
    text-decoration: underline;
    color: #6e6f71;
}

/* Links für download */
a.download {
	display: inline-block;
	padding-left: 20px;
	background-image: url(download.png);
	background-repeat: no-repeat;
	background-position: left 2px;
}

	

/* Linien 

hr {
	clear:both;
	height:1px;
	border:none;
	margin:0 0 19px 0;
	background-color:#ddd;
}
*/


	
/* Listen */
	
ul {
	margin-left: 15px;
	margin-bottom: 20px;
}


/* Hochstellen */
sup {
	vertical-align: super;
}


/* Zitate */

blockquote {
	position: relative;
	padding-left: 30px;
	font-style: italic;
}


blockquote:before {
	display: block;
	position: absolute;
	left: 0px;
	content: "\00BB";
	font-size: 3em;
	font-weight: bold;
	color: #777777;	
}

/* Anpassungen Blockquote für Footer-Bereich */

.box blockquote.box_footer {
	padding-left: 42px !important;
}

.box blockquote.box_footer:before {
	left: 10px;
	color: #DDDDDD;
}



/* Tabellen */

table {
    margin-bottom: 20px;
    width: 100%;
}

th {
    font-weight: bold;
}

thead th {
    background: #c3d9ff;
}

th, td, caption {
    padding: 4px 10px 4px 5px;
}

tbody tr:nth-child(even) td, tbody tr.even td {
    background: #e5ecf9;
}

tfoot {
    font-style: italic;
}

caption {
    background: #eee;
}








/* Positionierungs-Tabelle ohne Rahmen/Abstände/etc. */


table.blancotabelle {
	border-collapse: collapse;
	border-spacing: 0;
	border: none;
	background-color: transparent;
}

table.blancotabelle tr,
table.blancotabelle th,
table.blancotabelle td,

table.blancotabelle tbody tr,
table.blancotabelle tbody th,
table.blancotabelle tbody td {
	margin: 0;
	padding: 0;
	border: none;
	background-color: transparent;
}



/* Noch nicht definiert */



/* Helpers Textformate */

/* Schriftgröße wie h2 */
.abc_gross {
    font-size: 18px;
}

.abc_blau {
	color: #335980;
}

.abc_textmarker {
	display: inline-block;
	padding: 3px;
	background-color: #505050;
}

.abc_topheader-highlightmarker {
	display: inline-block;
	padding: 3px 6px;
	font-size: 18px; /* wie h2 */
	font-weight: bold;
	color: #ffffff;
	background-color: #335980;
}

.abc_nobr {
	display: inline-block;
	white-space: nowrap;
}

.abc_zentriert {
	.text-align: center;
}


/* ############ Helpers: prüfen ob hier oder in seperate CSS auslagern, zumindest die Positionierungen für Objekte, nicht Text-Helpers */ 


		/* Helpers: Textausrichtung */

		 


		/* Helpers: Positionierungen Objekte */

		 
		.breite_halb {
			width: 48%;
			overflow: hidden;
		}




			
			
/* 03 Menus  
 * ****************************************************** */


 
/* Hauptmenu oben */
 
#mainmenu ul {
    margin: 0px;
}

#mainmenu ul li {
    display: inline-block;
    padding: 14px 0px;	
    text-shadow: -1px -1px 0px #000;
}

#mainmenu ul li.menu-current,
#mainmenu ul li.menu-parent {
    position: relative;
    text-shadow: none;
    background-image: url("navi-bg-active.gif");
    background-repeat: repeat-x;
	background-position: 0 -1px;
	padding-bottom: 18px;
}

#mainmenu ul li a {
	display: inline-block;
}
	
#mainmenu ul li a,
#mainmenu ul li a:visited {
    font-family: 'Karla', 'Lucida Sans Unicode', Arial, sans-serif;
	color: #FFFFFF;
	text-shadow: 1px 1px #111111;
    font-size: 14px;
}

#mainmenu ul li.menu-current a,
#mainmenu ul li.menu-current a:visited,
#mainmenu ul li.menu-parent a,
#mainmenu ul li.menu-parent a:visited {
    color: #335980;
    text-shadow: 1px 1px 0px #fff;
}

/* Definition für die Startseite: menu-first */
#mainmenu ul li.menu-first.menu-current,
#mainmenu ul li.menu-first.menu-parent {
    position: static;
    text-shadow: none;
    background-image: none;
}
#mainmenu ul li.menu-first a {
	width: 17px;
	height: 15px;
	background-image: url('home.gif');
	background-repeat: no-repeat;
}

/* Definitionen für die Separatoren */
#mainmenu ul li a {
    padding: 0px 17px;
	border-left: 1px solid #777777;
}

#mainmenu ul li:first-child a,
#mainmenu ul li:first-child + li a,
#mainmenu ul li.menu-current a,
#mainmenu ul li.menu-current + li a,
#mainmenu ul li.menu-parent a,
#mainmenu ul li.menu-parent + li a {
	border-left: none;
}



/* Topmenu: Menu oben im Header über den Flags */

#topmenu ul {
	margin: 0;
}

#topmenu ul li {
    display: inline;
    list-style: none outside none;
    margin-right: 20px;
}
#topmenu ul li a {
    color: #717171;
    font-size: 11px;
    font-weight: lighter;
    text-transform: uppercase;
}



/* Flagmenu: Sprachenmenu im Header mit Flaggen 
   Achtung: Links werden durch Modul mod_mulitlingual erzeugt
   Ausgabe daher nicht als Liste sondern hintereinanderfolgende Links   
*/
#flagmenu {
	width: 176px;
	padding-left: 4px; /* 4 Pixel Korrektur wegen Leerzeichenausgabe des Moduls, eigenlicher Abstand links = 20px */
    margin: 0 0 0 185px;
}

#flagmenu a {
    display: inline-block;
	margin-left: 16px; /* 4 Pixel Korrektur wegen Leerzeichen, eigenlicher Abstand links = 20px */
	line-height: 24px;
    text-shadow: -1px -1px 0px #000;
}



/* Breadcrumb-Menu oben unter Hauptnavigation */

div#breadcrumb span {
	display: inline-block;
	padding: 0 6px 5px 12px;
	background-image: url('link-arrow.gif');
	background-repeat: no-repeat;
	background-position: 0 8px;
}

div#breadcrumb span:first-child {
	padding-left: 0;
	background-image: none;
}

div#breadcrumb span a {
    color: #3A3939;
    font-size: 10px;
}

div#breadcrumb span.menu-current a {
    color: #335980;
	text-decoration: none;
}



/* Submenu in Infospalte */

#submenu {
	box-shadow: 0 4px 7px -5px #656565;
}

#submenu ul {
	margin: 0;
	margin-bottom: 26px; /* Test: Ausgleich Höhe für Höhenraster bei ungerader Anzahl Links */
	padding: 0;
	list-style: none;
}

#submenu li {
	margin: 1px 0 0 0;
	padding: 0;
}
		
#submenu a {
	display: block;
	padding: 5px 30px;
    font-family: 'Karla', 'Lucida Sans Unicode', Arial, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #FFFFFF;
	text-shadow: 1px 1px #111111;
	text-decoration: none;
	background-color: #3F3F3F; /* Old browsers */
	background: -moz-linear-gradient(top,  #696969 0%, #3c3c3c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#696969), color-stop(100%,#3c3c3c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #696969 0%,#3c3c3c 100%); /* W3C */
	-pie-background: linear-gradient(to bottom,  #696969, #3c3c3c); /* PIE */
	}
	
#submenu a:hover {
	background-image: url(pfeil_submenu_dunkel.png); /* Old browsers */
	background-repeat: no-repeat; /* Old browsers */
	background-position: 10px 8px; /* Old browsers */
	background: url(pfeil_submenu_dunkel.png) no-repeat 10px 8px, -moz-linear-gradient(top,  #696969 0%, #3c3c3c 100%); /* FF3.6+ */
	background: url(pfeil_submenu_dunkel.png) no-repeat 10px 8px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#696969), color-stop(100%,#3c3c3c)); /* Chrome,Safari4+ */
	background: url(pfeil_submenu_dunkel.png) no-repeat 10px 8px, -webkit-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* Chrome10+,Safari5.1+ */
	background: url(pfeil_submenu_dunkel.png) no-repeat 10px 8px, -o-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* Opera 11.10+ */
	background: url(pfeil_submenu_dunkel.png) no-repeat 10px 8px, -ms-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* IE10+ */
	background: url(pfeil_submenu_dunkel.png) no-repeat 10px 8px, linear-gradient(to bottom,  #696969 0%,#3c3c3c 100%); /* W3C */
	-pie-background: url(http://www.blacknoise.com/templates/blacknoise/styles/pfeil_submenu_dunkel.png) no-repeat 10px 8px, linear-gradient(to bottom,  #696969, #3c3c3c); /* PIE */
}

#submenu li.menu-current a {
	color: #FFFFFF;
	text-shadow: 1px 1px #111111;
	text-decoration: none;
	padding-top: 4px;		/* Höhenkorrektur für Rahmen */
	border-top: 1px solid #CCCCCC;
	padding-bottom: 4px;	/* Höhenkorrektur für Rahmen */
	border-bottom: 1px solid #E9E9E9;
	background-image: url(pfeil_submenu_hell.png); /* Old browsers */
	background-repeat: no-repeat; /* Old browsers */
	background-position: 10px 8px; /* Old browsers */
	background: url(pfeil_submenu_hell.png) no-repeat 10px 8px, -moz-linear-gradient(top,  #696969 0%, #3c3c3c 100%); /* FF3.6+ */
	background: url(pfeil_submenu_hell.png) no-repeat 10px 8px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#696969), color-stop(100%,#3c3c3c)); /* Chrome,Safari4+ */
	background: url(pfeil_submenu_hell.png) no-repeat 10px 8px, -webkit-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* Chrome10+,Safari5.1+ */
	background: url(pfeil_submenu_hell.png) no-repeat 10px 8px, -o-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* Opera 11.10+ */
	background: url(pfeil_submenu_hell.png) no-repeat 10px 8px, -ms-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* IE10+ */
	background: url(pfeil_submenu_hell.png) no-repeat 10px 8px, linear-gradient(to bottom,  #696969 0%,#3c3c3c 100%); /* W3C */
	-pie-background: url(http://www.blacknoise.com/templates/blacknoise/styles/pfeil_submenu_hell.png) no-repeat 10px 8px, linear-gradient(to bottom,  #696969, #3c3c3c); /* PIE */
}



/* Footermenus 
   Ausgabe als SPAN-Menu und Vorschaltseite als Überschrift */


.footermenu a {
	color: #666666;
}	
 
/* Logo in Footermenu 1 (Produkte) */
div#footermenu01 > h2 + span > a {
	display: block;
	width: 100px;
	height: 32px;
	margin-top: 8px;
	background-image: url(nb_logo_blue.png);
	background-repeat: no-repeat;
	font-size: 0px;
	color: transparent;
}

/* Für einzelne Footeremenus maximale Breite vorgeben, sofern Begriffe zu lang */

.ie8 #footermenu01,   
body.ES #footermenu01 {
	width: 120px;
}

.ie8 #footermenu04,   
body.ES #footermenu04 {
	width: 100px;
}



/* Button-Menu --> für Wrapper Lüfterserien
   Erzeugt die Buttons zu den einzelnen Lüftermodellen 
   Eingesetzt auf den Übersichtseiten zu den Lüfterserien
   Das Button-Menu wird ausgegeben über das Droplet: MenuLuefterseiten  */
 
.menu-luefterbuttons ul {
	margin: 0;
    list-style: none outside none;
}

.menu-luefterbuttons ul li {
    display: block;
	float: left;
    margin-right: 5px;
	margin-bottom: 5px;
	border: 1px solid #666666;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.menu-luefterbuttons ul li a {
	display: block;
	position: relative;
	width: 220px;
	padding: 8px 5px 8px 45px;
	color: #eeeeee !important;
    text-shadow: -1px -1px 0px #222222;
	text-decoration: none;
	border: 1px solid #aaaadd;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	box-shadow: #ddddaa 1px 1px 1px 1px;
	background-color: #7da1c4; 
	background-image: url(lueftersymbol.png) no-repeat 11px 6px;
	background: url(lueftersymbol.png) no-repeat 11px 6px, -moz-linear-gradient(top, #7da1c4 0%, #4d5f71 87%, #485768 100%);
	background: url(lueftersymbol.png) no-repeat 11px 6px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7da1c4), color-stop(87%,#4d5f71), color-stop(100%,#485768));
	background: url(lueftersymbol.png) no-repeat 11px 6px, -webkit-linear-gradient(top, #7da1c4 0%,#4d5f71 87%,#485768 100%);
	background: url(lueftersymbol.png) no-repeat 11px 6px, -o-linear-gradient(top, #7da1c4 0%,#4d5f71 87%,#485768 100%);
	background: url(lueftersymbol.png) no-repeat 11px 6px, -ms-linear-gradient(top, #7da1c4 0%,#4d5f71 87%,#485768 100%);
	background: url(lueftersymbol.png) no-repeat 11px 6px, linear-gradient(to bottom, #7da1c4 0%,#4d5f71 87%,#485768 100%);
	-pie-background: url(http://www.blacknoise.com/templates/blacknoise/styles/lueftersymbol.png) no-repeat 11px 6px, linear-gradient(to bottom, #7da1c4 0%,#4d5f71 87%,#485768 100%); 
}


.menu-luefterbuttons ul li a:hover {
	background-color: #537aa1;
	background-image: url(lueftersymbol.png) no-repeat 11px 6px;
	background: url(lueftersymbol.png) no-repeat 11px 6px, -moz-linear-gradient(top, #537aa1 0%, #414e5b 87%, #3f4955 100%);
	background: url(lueftersymbol.png) no-repeat 11px 6px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#537aa1), color-stop(87%,#414e5b), color-stop(100%,#3f4955));
	background: url(lueftersymbol.png) no-repeat 11px 6px, -webkit-linear-gradient(top, #537aa1 0%,#414e5b 87%,#3f4955 100%);
	background: url(lueftersymbol.png) no-repeat 11px 6px, -o-linear-gradient(top, #537aa1 0%,#414e5b 87%,#3f4955 100%);
	background: url(lueftersymbol.png) no-repeat 11px 6px, -ms-linear-gradient(top, #537aa1 0%,#414e5b 87%,#3f4955 100%);
	background: url(lueftersymbol.png) no-repeat 11px 6px, linear-gradient(to bottom, #537aa1 0%,#414e5b 87%,#3f4955 100%);
	-pie-background: url(http://www.blacknoise.com/templates/blacknoise/styles/lueftersymbol.png) no-repeat 11px 6px, linear-gradient(to bottom, #537aa1 0%,#414e5b 87%,#3f4955 100%);
}


.ie8 .menu-luefterbuttons ul li a {
	background: #4F7090 url(lueftersymbol.png) no-repeat 11px 6px;
}

.ie8 .menu-luefterbuttons ul li a:hover {
	background: #45576A url(lueftersymbol.png) no-repeat 11px 6px;
}






/* 04 Anpassungen der Standardvorgaben für Seitenbereiche  
 * ****************************************************** */


 
/* Anpassungen Elemente infospalte */


/* Themenbild in der infospalte */
#infospalte .themenbild {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #D8D8D8;
	box-shadow: 0 4px 7px -5px #656565;
	margin-bottom: 12px;
	}

	
	
/* Anpassungen Elemente Footer */


/* Footer-Top: Boxen für Menus und Inhalte */

#footer-top {
	line-height: 15px;
	font-size: 12px;
	text-align: center;
}

#footer-top p {
	margin-bottom: 0;
}

#footer-top h2 {
	margin: 0 0 5px 0;
	font-size: 12px;
	font-weight: bold;
	color: #111111;
	text-shadow: 1px 1px 0 #FFFFFF;
}

 

/* Footer: Adressspalte */

#footer-top .footer-top-spalte.adresse,
#footer-top .footer-top-spalte.adresse a {
	    color: #335980;
}	

#footer_telefon {
	margin-top: 9px;
}
 

/* Footer-Bottom */

#footer-bottom {
	line-height: 15px;
	font-size: 12px;
	text-align: center;	
    color: #3A3939;
}





/* 05 Speziell gestaltete Objekte  
 * ****************************************************** */

/* Spezielle Absätze */

p.attention {
	display: inline-block;
	padding: 10px 15px 10px 42px;
	background: #D2D2D2 url('attention-arrow.png') no-repeat 10px center;
	border: 1px solid #c7c7c7;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;	
}
 
 
/* Spezielle Links */

.pdflink {
	padding-top: 15px;
	padding-left: 40px;
	background-image:url(pdf.png);
	background-repeat: no-repeat;

} 


 

/* Untermenu für Hauptseiten: Linkboxen im Submenu-Look zur Unterseite quasi als Submenu */

.menuboxen_ebene1 ul {
	margin: 0;
	margin-bottom: 10px; /* Test: Ausgleich Höhe für Höhenraster bei ungerader Anzahl Links */
	padding: 0;
	list-style: none;
}

.menuboxen_ebene1 li {
	margin: 8px 0 0 0;
	padding: 0;
}

.menuboxen_ebene1 a,
a.menuboxen_ebene1 {
	display: block;
	padding: 9px 10px 8px 32px;
    font-family: 'Karla', 'Lucida Sans Unicode', Arial, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #FFFFFF;
	text-shadow: 1px 1px #111111;
	text-decoration: none;
	background-color: #3F3F3F; /* Old browsers */
	background-image: url(pfeil_submenu_hell.png); /* Old browsers */
	background-repeat: no-repeat; /* Old browsers */
	background-position: 10px 13px; /* Old browsers */
	background: url(pfeil_submenu_hell.png) no-repeat 10px 13px, -moz-linear-gradient(top,  #696969 0%, #3c3c3c 100%); /* FF3.6+ */
	background: url(pfeil_submenu_hell.png) no-repeat 10px 13px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#696969), color-stop(100%,#3c3c3c)); /* Chrome,Safari4+ */
	background: url(pfeil_submenu_hell.png) no-repeat 10px 13px, -webkit-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* Chrome10+,Safari5.1+ */
	background: url(pfeil_submenu_hell.png) no-repeat 10px 13px, -o-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* Opera 11.10+ */
	background: url(pfeil_submenu_hell.png) no-repeat 10px 13px, -ms-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* IE10+ */
	background: url(pfeil_submenu_hell.png) no-repeat 10px 13px, linear-gradient(to bottom,  #696969 0%,#3c3c3c 100%); /* W3C */
	-pie-background: url(http://www.blacknoise.com/templates/blacknoise/styles/pfeil_submenu_hell.png) no-repeat 10px 13px, linear-gradient(to bottom,  #696969, #3c3c3c); /* PIE */
}
	
.menuboxen_ebene1 a:hover,
a.menuboxen_ebene1:hover {
	background-image: url(pfeil_submenu_dunkel.png); /* Old browsers */
	background-repeat: no-repeat; /* Old browsers */
	background-position: 10px 13px; /* Old browsers */
	background: url(pfeil_submenu_dunkel.png) no-repeat 10px 13px, -moz-linear-gradient(top,  #696969 0%, #3c3c3c 100%); /* FF3.6+ */
	background: url(pfeil_submenu_dunkel.png) no-repeat 10px 13px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#696969), color-stop(100%,#3c3c3c)); /* Chrome,Safari4+ */
	background: url(pfeil_submenu_dunkel.png) no-repeat 10px 13px, -webkit-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* Chrome10+,Safari5.1+ */
	background: url(pfeil_submenu_dunkel.png) no-repeat 10px 13px, -o-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* Opera 11.10+ */
	background: url(pfeil_submenu_dunkel.png) no-repeat 10px 13px, -ms-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* IE10+ */
	background: url(pfeil_submenu_dunkel.png) no-repeat 10px 13px, linear-gradient(to bottom,  #696969 0%,#3c3c3c 100%); /* W3C */
	-pie-background: url(http://www.blacknoise.com/templates/blacknoise/styles/pfeil_submenu_dunkel.png) no-repeat 10px 13px, linear-gradient(to bottom,  #696969, #3c3c3c); /* PIE */
}

.menuboxen_ebene1 li.menu-current a {
	text-decoration: none;
	padding-top: 4px;		/* Höhenkorrektur für Rahmen */
	border-top: 1px solid #CCCCCC;
	padding-bottom: 4px;	/* Höhenkorrektur für Rahmen */
	border-bottom: 1px solid #E9E9E9;
	background-image: url(pfeil_submenu_hell.png); /* Old browsers */
	background-repeat: no-repeat; /* Old browsers */
	background-position: 10px 7px; /* Old browsers */
	background: url(pfeil_submenu_dunkel.png) no-repeat 10px 13px, -moz-linear-gradient(top,  #696969 0%, #3c3c3c 100%); /* FF3.6+ */
	background: url(pfeil_submenu_dunkel.png) no-repeat 10px 13px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#696969), color-stop(100%,#3c3c3c)); /* Chrome,Safari4+ */
	background: url(pfeil_submenu_dunkel.png) no-repeat 10px 13px, -webkit-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* Chrome10+,Safari5.1+ */
	background: url(pfeil_submenu_dunkel.png) no-repeat 10px 13px, -o-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* Opera 11.10+ */
	background: url(pfeil_submenu_dunkel.png) no-repeat 10px 13px, -ms-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* IE10+ */
	background: url(pfeil_submenu_dunkel.png) no-repeat 10px 13px, linear-gradient(to bottom,  #696969 0%,#3c3c3c 100%); /* W3C */
	-pie-background: url(http://www.blacknoise.com/templates/blacknoise/styles/pfeil_submenu_dunkel.png) no-repeat 10px 13px, linear-gradient(to bottom,  #696969, #3c3c3c); /* PIE */
}



a.menuboxen_ebene1 span.liste {
	display: block;
	padding: 0 0 0 15px;
	background-image: url(bullet_dark_linkboxen.png);
	background-repeat: no-repeat;
	background-position: 0px 6px;
}

 

/* Linkbuttons */	

.linkbutton,
ul.linkbuttons a {
	display: block;
	padding: 13px 10px 13px 32px;
	margin-bottom: 12px;
	font-family: 'Questrial',Arial,sans-serif;
	font-size: 18px;		/* wie H2 */
	line-height: 20px;
	color: #222222;
	text-decoration: none;
	background-color: #E1EBF1;
	background-image: url("pfeil_linkbox.png");
	background-position: 10px 16px;
	background-repeat: no-repeat;
	border: 1px solid #D8D8D8;
	box-shadow: 0 4px 7px -5px #656565;	
	}

a.linkbutton {
	display: inline-block; /* Erforderlich für Float-Effekt im Fließtext */
	}	
	
a.linkbutton:hover,
ul.linkbuttons a:hover {
	text-decoration: none;
	background-color: #7BAFCE;
	}

.linkbutton.historyback,
ul.linkbuttons a.historyback {
	color: #335980;
}	
	
	
ul.linkbuttons {
	margin: 0;
	padding: 0;
	list-style: none;
	}



/* Boxen */

.box {
	position: relative;
	top: 5px;
	margin-bottom: 20px;
	padding: 9px;
	border: 1px solid #D8D8D8;
	box-shadow: 0 4px 7px -5px #656565;		
	}

.box h2 {
	color: #335980;
}
	
.box h2.box_header	{
	margin: -9px -9px 20px -9px;
	padding: 9px 9px 10px 9px;
	color: #FFFFFF;
	text-shadow: 1px 1px #111111;
	text-align: center;
	background: #3F3F3F; /* Old browsers */
	background: -moz-linear-gradient(top,  #696969 0%, #3c3c3c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#696969), color-stop(100%,#3c3c3c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #696969 0%,#3c3c3c 100%); /* W3C */
	-pie-background: linear-gradient(to bottom,  #696969 0%,#3c3c3c 100%); /* PIE */
}
	
	

.box p.box_footer,
.box blockquote.box_footer	{
	margin: 0 -10px -9px -10px;
	padding: 10px 9px 9px 9px;
	color: #FFFFFF;
	text-shadow: 1px 1px #111111;
	background: #3F3F3F; /* Old browsers */
	background: -moz-linear-gradient(top,  #696969 0%, #3c3c3c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#696969), color-stop(100%,#3c3c3c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #696969 0%,#3c3c3c 100%); /* W3C */
	-pie-background: linear-gradient(to bottom,  #696969 0%,#3c3c3c 100%); /* PIE */
}

	
.box img {
	margin-bottom: 20px;
	}

/* Einzelene Boxen komplett als Box-Header */
.box.box_header {
	color: #FFFFFF;
	text-shadow: 1px 1px #111111;
	background: #3F3F3F; /* Old browsers */
	background: -moz-linear-gradient(top,  #696969 0%, #3c3c3c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#696969), color-stop(100%,#3c3c3c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #696969 0%,#3c3c3c 100%); /* W3C */
	-pie-background: linear-gradient(to bottom,  #696969 0%,#3c3c3c 100%); /* PIE */
}




/* Boxen: Anpassung Design für Spezial-Info-Boxen (z.B. in der Seitenleiste) */

.box.spezial a {
	font-size: 0.9em;
	letter-spacing: 0.03em;
	font-weight: bold;
}

.box.spezial h2 {
	font-size: 21px;
	line-height: 26px;
}

/* Liste als Boxen zur Aufzählung von Items (u.a. Seite: Blacknoise Entwicklungslabor */

ul.list_itemboxen {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.list_itemboxen li {
	margin-bottom: 10px;
	padding: 18px;
	font-size: 18px; /* wie h2 */
	color: #335980;
	border: 1px solid #D8D8D8;
	box-shadow: 0 4px 7px -5px #656565;		
}


/* Boxen für Haupt-Distributoren */

.box.distributor {
	height: 245px;
	overflow: hidden;
	padding: 20px;
	background: url('distribution.png') no-repeat right top;
}




/* Award-Boxen 
   für die IT-Lüfterseiten (Tab: Awards)
   mit Definition innenliegender Elemente a und img */

.award-box {		
	display: inline-block;
	margin: 5px;
	padding: 15px;
	border: 1px solid #c0c0c0;
}

/* Korrektur Last-Child aus reset.css */
div:last-child.award-box {		
	display: inline-block;
	margin: 5px;
	padding: 15px;
	border: 1px solid #c0c0c0;
}

.award-box a {
	display: block;
	text-align: center;
}

.award-box img {
	display: block;
	/* Mögliche automatischen Höhenangaben im Quelltext vom CMS-System erstellt überschreiben */
	height: 70px !important;
	width: auto !important;
	margin: 0 auto;
}



/* Onlineshop-Boxen 
   für die IT-Lüfterseiten (Tab: Onlinehändler)
   mit Definition innenliegender Elemente a und img */

.onlineshop-box {		
	display: inline-block;
	margin: 5px;
	padding: 15px;
	border: 1px solid #c0c0c0;
}
   
/* Korrektur Last-Child aus reset.css */   
div:last-child.onlineshop-box {		
	display: inline-block;
	margin: 5px;
	padding: 15px;
	border: 1px solid #c0c0c0;
}
   
.onlineshop-box a {
	display: block;
	text-align: center;
}

.onlineshop-box img {
	display: block;
	/* Mögliche automatischen Höhenangaben im Quelltext vom CMS-System erstellt überschreiben */
	height: 70px !important;
	width: auto !important;
	margin: 0 auto;
}



/* Gallerie und Galerie-Boxen 
   für die IT-Lüfterseiten (Galleriebereich unten über den Tabs)
   mit Definition innen- und außenliegender Elemente wrapper, a und img */

#section-gallery {
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
	background-color: #3C3C3C;
	
	background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#1c1c1c));
	background: -webkit-linear-gradient(top, #454545 0%, #1c1c1c 100%);
	background: -o-linear-gradient(top, #454545 0%, #1c1c1c 100%);
	background: linear-gradient(180deg, #454545 0%, #1c1c1c 100%);
	
	border-top: 1px solid #111111;
	border-bottom: 1px solid #111111;

}

.gallerie-box {
	display: inline-block;
	padding: 16px 16px;
}

.gallerie-box-positioner {
	display: inline-block;
	box-sizing: content-box;
	position: relative;
	width: 200px;
	height: 125px;
	border: 2px solid rgba(153, 153, 153, 0.9);
	border-radius: 1px;
	overflow: hidden;
}

.gallerie-box img {
	position: absolute;
	top: -100px;
	right: -100px;
	bottom: -100px;
	left: -100px;
	margin: auto;
	-webkit-transition: 1s;
	     -o-transition: 1s;
	        transition: 1s;
}

.gallerie-box.zoom a:hover img {
	-webkit-transform: scale(1.1) rotate(-3deg);
		-ms-transform: scale(1.1) rotate(-3deg);
			transform: scale(1.1) rotate(-3deg);
	-webkit-transition: 1s;
	     -o-transition: 1s;
	        transition: 1s;
}  



.gallerie-box.boxlink a:after {
	display: inline-block;
	position: absolute;
	top: -100px;
	right: -100px;
	bottom: -100px;
	left: -100px;
	margin: auto;
	content: '';
	transform: scale(0.8);
	opacity: 0;
	transition: 1s;
}

.gallerie-box.boxlink a:hover:after {
	opacity: 1 !important;
	transform: scale(1);
	transition-delay: 0.3s;
	transition: 0.7s;
}





.gallerie-box.boxlink.popup a:after {
	background-image: url('symbol-gallerie-popup.png');
	background-repeat: no-repeat;
	width: 60px;
	height: 60px;
}




.gallerie-box.boxlink.youtube a:after {
	background-image: url('symbol-gallerie-youtube-link.png');
	background-repeat: no-repeat;
	opacity: 0.8;
	width: 60px;
	height: 42px;
}





/* Linkboxen */

/*	Linkboxen mit Hover-Effekten:

	aus: dermarketingmacherneu

	Kleines "Framework" für Linkboxen
 	Link als Box oder Button formatieren
	Bei Hover: Elemente erscheinen lassen oder verstecken

	Achtung:
	Der Link selbst ist als Block-Element (display:block) auszuzeichenen
	Als innere Elemente sind nur span- und img-Elemente erlaubt
	Blockelemente wie p oder div sind nicht erlaubt.
	
	Um Absätze im Link-Tag zu simulieren, werden die span-Elemete,
	die direkt unterhalb des Absatz-Tags liegen als Block-Element definiert:
	a > span - display:block
	
	Die Hover-Ein-Ausblend-Effekte werden NICHT mit der Eigenschaft display
	realisiert. Beim Einblenden muss bei dieser Eigenschaft die Art der
	Darstellung (inline, inline-block, block) individuell definiert werden.
	Die Realistation über die Eigenschaft Position ermöglicht dagegen
	ein universelle (und kürzere sowie einfachere) Formatierung der
	Einblendung.
	
	2 Methoden für verstecken bzw. sichtbar machen:

	tarnen/enttarnen --> Mit Platzhalter-Effekt
	=	der Platz des Elements wird im ausgeblendeten Zustand frei gehalten
		d.h. umfließender Text rückt nicht in die freie Lücke nach
	position: relative;
	verstecken mit: left: -10000px;
	erscheinen mit: left: 0;

	einblenden/ausblenden --> Ohne Platzhalter-Effekt
	=	das Element verschwinde vollkommen, der Platz wir im ausgeblendeten Zustand nich frei gehalten
		d.h. umfließender Text rückt in die freie Lücke nach
	verstecken mit: display: none;
	erscheinen mit: display: block; (oder inline-block)
	
	Beispielaufbau:
	
	<a class="linkbox designklasse" href="#">
		Text, der immer sichtbar ist
		<span class="tarnen><br/>Text, der bei Hover ausgeblendet wird</span>
		<span class="enttarnen><br/>Text, der bei Hover eingeblendet wird</span>
	</a>
*/


a.linkbox {
	display: block;
	position: relative;
	padding: 13px 10px 13px 32px;
	margin-bottom: 12px;
	font-family: 'Questrial',Arial,sans-serif;
	color: #222222;
	text-decoration: none;
	background-color: #E1EBF1;
	background-image: url("pfeil_linkbox.png");
	background-position: 10px 16px;
	background-repeat: no-repeat;
	border: 1px solid #D8D8D8;
	box-shadow: 0 4px 7px -5px #656565;	
	
	}

a.linkbox:hover {
	background-color: #7BAFCE;

	}
	
/* Erste Ebene span in Linkboxen sollen sich wie Abstätze verhalten*/	
.linkbox > span {
	display: block;
	margin-bottom: 10px;
	}

/* Erweiterung Framework um Absatzelement */
.linkbox span.linkbox_h {
	font-size: 18px;		/* wie H2 */
	}

/* Spezielles Design für die Linkbox "Kontakt" zur Weiterleitung auf das Kontaktformular */
	
.linkbox.kontakt {
	background-color: transparent;
}

.linkbox.kontakt span.linkbox_h {
	color: #335980;
}

.linkbox.kontakt span.linkbox_h_sub {
	margin-top: -10px;
}


.linkbox.kontakt span.linkbox_footer {
	margin: 0 -10px -13px -32px;
	padding: 10px 9px 9px 9px;
	color: #FFFFFF;
	text-shadow: 1px 1px #111111;
	background: #3F3F3F; /* Old browsers */
	background: -moz-linear-gradient(top,  #696969 0%, #3c3c3c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#696969), color-stop(100%,#3c3c3c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #696969 0%,#3c3c3c 100%); /* W3C */
	-pie-background: linear-gradient(to bottom,  #696969 0%,#3c3c3c 100%); /* PIE */
}


	

/* Objekt wird ausgeblendet formatiert --> es wird bei mouseover komplett eingeblendet
   Kein Platzhalter-Effekt: der Platz des Objektes/Abschnittes wird nicht frei gehalten */
a .einblenden {
	position: absolute;
	left: -10000px; 
	}


a:hover .einblenden {
	position: relative;
	left: 0;
	}


/* Objekt wird eingeblendet formatiert --> es wird bei mouseover komplett ausgeblendet
   Kein Platzhalter-Effekt: Platz des Objektes/Abschnittes wird nicht frei gehalten */
a .ausblenden {
	position: relative;
	left: 0;
	}

a:hover .ausblenden {
	position: absolute;
	left: -10000px;
	}


/* Objekt wird getarnt (wie ausgeblendet) formatiert --> es wird bei mouseover sichtbar
   Platzhalter-Effekt(!!!): Platz des Objektes/Abschnittes wird frei gehalten */
a .enttarnen,
.enttarnen {
	position: relative;
	left: -10000px;
	}

a:hover .enttarnen {
	position: relative;
	left: 0;
	}

	
/* Objekt wird sichtbar formatiert --> es wird bei mouseover getarnt (wie ausgeblendet)
   Platzhalter-Effekt(!!!): Platz des Objektes/Abschnittes wird frei gehalten */
a .tarnen {
	position: relative;
	left: 0;
	}

a:hover .tarnen {
	position: relative;
	left: -10000%;     /* Angabe in Prozent wegen IE7 */
	}


/* Tooltipps (mit jQuery-UI erzeugt */


.ui-tooltip {
	padding: 8px;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
/*	
	background-color: #ffffff !important;
	border: 2px solid #828282 !important;
	-moz-border-radius: 4px !important;
	-webkit-border-radius: 4px !important; 
	border-radius: 4px !important;
	-webkit-box-shadow: #666 0px 3px 4px  !important;
	-moz-box-shadow: #666 0px 3px 4px  !important;
	box-shadow: #666 0px 3px 4px  !important; 
*/
}

body .ui-tooltip {
	border-width: 2px;
}

.bn-tooltip {
	background-color: #ffffff !important;
	border: 2px solid #828282 !important;
	-moz-border-radius: 4px !important;
	-webkit-border-radius: 4px !important; 
	border-radius: 4px !important;
	-webkit-box-shadow: #666 0px 3px 4px  !important;
	-moz-box-shadow: #666 0px 3px 4px  !important;
	box-shadow: #666 0px 3px 4px  !important; 

}	




/* Frontend-Edit: Button gestalten */


div#header > a {
	display: block;
	position: fixed;
	top: 40%;
	left: -100px;
	z-index: 1000000;
	margin: 0;
	padding: 20px 40px 50px 40px;
	font-size: 1.5em;
	letter-spacing: 0.05em;
	color: #cccccc;
	text-decoration: none;
	background-color: #3c3c3c;
	background: -moz-linear-gradient(top, #454545 0%, #1c1c1c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#454545), color-stop(100%,#1c1c1c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #454545 0%,#1c1c1c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #454545 0%,#1c1c1c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #454545 0%,#1c1c1c 100%); /* IE10+ */
	background: linear-gradient(to bottom, #454545 0%,#1c1c1c 100%); /* W3C */
	border-left: 1px solid #1c1c1c;
	border-top: 1px solid #1c1c1c;
	border-right: 1px solid #1c1c1c;
	border-bottom: 1px solid #1c1c1c;
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	border-top-right-radius: 10px;
	-moz-box-shadow:    5px -6px 3px -3px #aaaaaa;
	-webkit-box-shadow: 5px -6px 3px -3px #aaaaaa;
	box-shadow:         5px -6px 3px -3px #aaaaaa;
	-moz-transform:    rotate(90deg);
	-o-transform:      rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform:         rotate(90deg);
	transition: all 1s ease-in-out;
}

div#header > a:hover {
	left: -60px;
	color: #eeeeee;
}

div#header > a img {
	display: none;
}





/* Sprite-Definitionen: Loudness-Grafiken */


/* Container für loudnessImage als Background-Grafik --> e.g. span-Element */
.loudnessImage {
    display: inline-block;
	width: 0px;
	height: 0px;
	background: url(loudness-sprite.png) no-repeat -1000px -1000px;
}

.loudness_0 {
	background-position: 0 0;
	width: 59px;
	height: 9px;
}

.loudness_1 {
	background-position: 0 -69px;
	width: 59px;
	height: 9px;
}

.loudness_2 {
	background-position: 0 -552px;
	width: 59px;
	height: 9px;
}

.loudness_3 {
	background-position: 0 -621px;
	width: 59px;
	height: 9px;
}

.loudness_4 {
	background-position: 0 -690px;
	width: 59px;
	height: 9px;
}

.loudness_5 {
	background-position: 0 -759px;
	width: 59px;
	height: 9px;
}

.loudness_6 {
	background-position: 0 -828px;
	width: 59px;
	height: 9px;
}

.loudness_7 {
	background-position: 0 -897px;
	width: 59px;
	height: 9px;
}

.loudness_8 {
	background-position: 0 -966px;
	width: 59px;
	height: 9px;
}

.loudness_9 {
	background-position: 0 -1035px;
	width: 59px;
	height: 9px;
}

.loudness_10 {
	background-position: 0 -138px;
	width: 59px;
	height: 9px;
}

.loudness_11 {
	background-position: 0 -207px;
	width: 59px;
	height: 9px;
}

.loudness_12 {
	background-position: 0 -276px;
	width: 59px;
	height: 9px;
}

.loudness_13 {
	background-position: 0 -345px;
	width: 59px;
	height: 9px;
}

.loudness_14 {
	background-position: 0 -414px;
	width: 59px;
	height: 9px;
}

.loudness_15 {
	background-position: 0 -483px;
	width: 59px;
	height: 9px;
}

.loudness_info {
	background-position: 0 -1104px;
	width: 9px;
	height: 5px;
} 
 





/* 06 Formulare  
 * ****************************************************** */


.frm-field_table {
	width: 100%;
}

form td {
	vertical-align:middle; 
}
 
.frm-required { color :#ff0000; }

input {
	width: 40%;
	font-family: 'Karla', 'Lucida Sans Unicode', Arial, sans-serif;
	font-size: 13.5px;
}

textarea {
	width: 40%;
	font-family: 'Karla', 'Lucida Sans Unicode', Arial, sans-serif;
	font-size: 13.5px;
}

table.captcha_table {
	margin-top: 20px;
}

table.captcha_table td.image_captcha {
	width: 250px;
	padding-right: 20px;
}

table.captcha_table td.image_captcha + td +td {
	width: 55px;
}

table.captcha_table td.captcha_expl {
	padding-left: 10px;
}



 
/*** Don't remove the class nixhier, this is required for ASP ***/
.frm-nixhier { display :none; }
.frm-submission { margin :0 auto; position :relative; width :auto; } 
 
 

 /* 07 Individuelle Anpassungen für Subtemplates 
 * ****************************************************** */

 
/* Template Blanco 
* ***************************** */

#template_blanco #contentarea {
	padding: 0;
	background-color: transparent;
	border: 0px;
} 



/* Template Blanco --> Wrapper für Lüfterserie: 
   Bereich mit der Übersicht zu einer Lüfterserie 
   mit Button-Menu unten */

#template_blanco .luefterserie {
    padding: 20px;
	background-color: white;
    border: 1px solid #D8D8D8;
	margin-bottom: 30px;
}   

#template_blanco .luefterserie h2 {
	color: #335980;
}

#template_blanco .luefterserie a {
	color: #335980;
}

#template_blanco .luefterserie div.luefterserie_bild {
	float: left;
	width: 35%;
	margin-left: 2%;
}

#template_blanco .luefterserie div.luefterserie_bild img {
	width: 100% !important;
	height: auto !important;
	margin-top: 20px;
}

#template_blanco .luefterserie div.luefterserie_text {
	float: left;
	width: 60%;
	margin-left: 3%;
}


#template_blanco .luefterserie div.menu-luefterbuttons {
	padding-top: 30px;
	background-image:url('series-shadow.png');
	background-repeat: no-repeat;
}





/* Template IT-Lüfter 
* ***************************** */


/* Template Lüfter --> Structure */

#template_luefter	#content-head.contentarea-outer {
	padding-top: 50px;
	padding-bottom: 40px;
	background-color: #ffffff;
	background-image: url(gradient.png);
	background-repeat: repeat-y;
}

#template_luefter	#content-head .contentarea {
	padding: 0;
	background-color: transparent;
	border: none;
}

#template_luefter #teaser {
}


#template_luefter #eigenschaften {
	margin-top: 20px;
}

#template_luefter #socialbuttons {
	height: 30px;
	margin-top: 15px;
	margin-bottom: -30px;
}

#template_luefter #socialbuttons .contentarea {
	padding: 0px;
	text-align: right;
}

#template_luefter #socialbuttons .sbutton {
	display: inline-block;
}

#template_luefter #socialbuttons #gplusbutton {
	margin-right: -20px;
}

#template_luefter #socialbuttons #fbbutton {
	margin-right: 20px;
}

#template_luefter #socialbuttons #twitterbutton {
	margin-right: -15px;
}

#template_luefter #tabarea {
	margin-top: 30px;
	margin-bottom: 20px;
}

#template_luefter #tabarea #tab-container {
	margin-left: -15px;  /* Korrektur aus Gris-Framework */
	margin-right: -15px; /* Korrektur aus Gris-Framework */
}

/* Alle Tabbereiche position: relative --> mögliche absolute Poisitonierung im Tabbereich */
#template_luefter #tabarea div.panel-container > div {
	position: relative;
}


/* Template Lüfter --> Industrie-lüfter: Ausrichtung des Produktbilds rechts */

/* Drei Möglichkeiten wie das CMS die Produktbilder einfügen kann */
#template_luefter #produktbilder > img,
#template_luefter #produktbilder > p > img,
#template_luefter #produktbilder > div > img {
	float: right;
	margin: 0;
}



/* Template Lüfter --> Animations-Bereich: Slider/Bildergallery */

/* Bildwechsler bxslider */

#animation .bx-wrapper {
	float: right;
	width: 480px;
	margin: 0;
	padding: 0;
	box-shadow: none;
}

#animation .bx-viewport {
	margin: 0;
	padding: 0;
	border: none;
	box-shadow: none;
}

#animation #bx-pager a {
	display: block;
	width: 110px;
	margin-left: 30px;	/* Abstand wird für breite Bildschirme in stylesGridWideDesktop.css korrigiert */
	margin-bottom: 10px;
	padding-right: 20px;
}

#animation #bx-pager a.active {
	background-image: url(arrow.gif);
	background-repeat: no-repeat;
	background-position: right 20px;
}


/* Für Fancybox: Korrekturen  */
 
#fancybox-close {
	right: -30px !important;
}

#fancybox-right-ico {
	right: 15px !important;
}

/* Korrektur: Zurückstellen von Border-Box auf Content-Box */
#fancybox-wrap,
#fancybox-wrap * {
		box-sizing: content-box;
}

#fancybox-content{
	border-color: #909090;
}


/* Template Lüfter --> Tab-Struktur (mit Easy-Tabs) */


#tabarea ul.etabs {
	position: relative;
	top: 30px;
	margin-top: -25px;
	margin-left: 15px;
	padding-left: 0px;
}


#tabarea .tab {
	display: block;
	float: left;
	margin-left: 2px;
	height: 46px;
	background-color: #EAEEF2;
	background: url(tab-menu-bg.gif) repeat-x;
}


#tabarea .tab a {
	padding: 10px 20px 6px 20px;
	color: #868a8d;
}

#tabarea .tab:hover {
	border: 1px solid #aaaaaa;
	border-bottom: none;
}

.tab a:hover {
	text-decoration: none;
}


#tabarea .tab.active {
	position: relative;
	top: -4px;
	height: 75px;
	background: url(tab-menu-bg-active.gif) no-repeat center center;
	border: none;
}

#tabarea a.active {
	padding: 4px 20px 12px 20px;
	color: #ffffff;
	font-weight: normal;
}

#tabarea .tab-container .panel-container {
	clear: both;
	padding-top: 25px;
}

#tabarea div.panel-container {
	height: 865px !important;
	overflow: auto;
}




/* Template Lüfter --> Strukturaufbau Tabbereich */

/* Strukturaufbau im Tab Überblick */

.overview_left {
    float: left;
    padding-right: 20px;
    width: 45%;
}

.overview_center {
    float: left;
    width: 32%;
    height: 180px;
    min-height: 270px;
    padding: 0 20px;
    border-right: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0;
}

.overview_right {
    float: left;
    width: 23%;
    padding-left: 20px;
}

.overview_additional {
    clear: both;
	margin-top: 50px;
}

#template_luefter #tabarea .separator {
	visibility: visible;	/* Korrektur von gleichzeitiger Clear-Eigenschaft */
	width: 100%;			/* Korrektur von gleichzeitiger Clear-Eigenschaft */
    border-bottom: 1px solid #C0C0C0;
    padding: 20px 0 0 0;
    margin-bottom: 20px;
}


/* Template Lüfter --> Anpassung Textformate im Tab-Bereich */

#template_luefter #tabarea h2 {
	color: #335980;
}

#template_luefter #tabarea .overview_center h2,
#template_luefter #tabarea .overview_right h2 {
	margin-top: 10px;
}

#template_luefter #tabarea a.garantie {
	margin-left: 9px;
	color: #335980;
	text-decoration: none;
	border-bottom: 1px dotted #335980;
}

#template_luefter #tabarea a.garantie:before {
	content: url(link-arrow.gif);
	margin-left: -9px;
	margin-right: 2px;
}

#template_luefter #tabarea a.garantie:hover {
	text-decoration: underline;
	border-bottom: none;
}





/* Template Lüfter --> Anpassung Lüfter-Tabelle im Tab-Bereich Überblick */

.overview_bottom {
    position: relative;
}

.overview_bottom table {
    margin-bottom: 0;
    position: relative;
}

.overview_bottom table th {
    background-color: #f2f2f2;
}

.overview_bottom table td {
    border-bottom: 1px solid #f2f2f2;
}

.overview_bottom table tbody tr:nth-child(even) td {
    background: none !important; 
}



/* Ausrichtung der Grafikelemente in der Tabelle mit den Produktangaben
   Elemente und Klassen werden hinzugefügt durch:
   jQuery-Funktion loudnessImageInsertProduktseiten (in: jqTemplateFunctions) */

   
/* Breite für die Spalte fixieren zur Asurichtung der Loudness-Grafiken */
table.produktangaben th.th_lautstaerke {
	position: relative;
	width: 180px;
}



/* Breite für die Spalte fixieren zur Asurichtung der Loudness-Grafiken */
table.produktangaben th.th_leistung {
	position: relative;
	width: 180px;
}


/* Lautstärke-Grafik im Tabellenbody ausrichten*/
table.produktangaben tbody span.loudnessImage  {
    display: block;
    float: right;
    margin: 5px 35px 0 0;
}



/* Lautstärkeanzeiger Kopf(Dreieck) --> Ausrichtung (muss von oben erfolgen top: ...) */
table.produktangaben thead div.loudness_info  {
    position: absolute;
    right: 83px;
    top: 28px;
}
/* Lautsärkeanzeiger Linie -->
   Höhe wird durch das jQuery ermittelt und hinzugefügt
   Ausrichtung (muss von oben erfolgen top: ...) */
table.produktangaben thead div.loudnessBar  {
    position: absolute;
    right: 87px;
    top: 28px;
    width: 1px;
    background-color: #f60;
}





/* Korrekturen Spaltenbreite für Tabelle Produktangaben Industrial-Lüfter --> th_lautstaerke ist hier Splate Schalldruck */
table.produktangaben.industrial th.th_lautstaerke {
	position: relative;
	width: 180px;
}

/* Korrekturen Spaltenbreite für Tabelle Produktangaben Industrial-Lüfter --> th_lautstaerke ist hier Splate Schalldruck */
table.produktangaben.industrial th.th_leistung {
	position: relative;
	width: 170px;
}

/* Korrekturen für Tabelle Produktangaben Industrail-Lüfter: Lautstärke-Grafik im Tabellenbody ausrichten*/
table.produktangaben.industrial tbody span.loudnessImage  {
    display: block;
    float: right;
    margin: 5px 25px 0 0;
}

/* Korrekturen Position Lautstärke-Anzeiger (Kopf) für Seiten mit Industrielüftern */
table.produktangaben.industrial thead div.loudness_info  {
	right: 71px;
	top: 48px
}

/* Korrekturen Position Lautstärke-Anzeiger (Linie) für Seiten mit Industrielüftern */
table.produktangaben.industrial thead div.loudnessBar  {
	right: 75px;
	top: 48px;
}






/* StoreLocator (iframe) --> Abstand */



#template_luefter iframe#storelocator {
	margin-top: 20px;
}

/* Korrektur der Bildausrichtung für Seiten mit Industrielüftern */
.overview_bottom table.industrial td.bar img {
	margin-right: 15px;
}

.overview_bottom div.legal {
    font-size: 0.8em;
    /* float: right; correction */
    position: relative;
    top: 7px;
}




/* Cookie-Informations-Box */

#dialog-cookies {
	position:fixed;
	bottom:0px;
	width:100%;
	padding: 20px 60px;
	font-size: 12px; 
	text-align:left;
	color:#fff; 
	background-color:rgba(82, 82, 82, 0.9); 
	border-bottom:1px solid #333; 
	z-index:999;
	box-shadow: 0px 0px 4px 4px #4a4a4a;
}

.cookies-text-area {
	float: left;
	padding: 5px 10px;
}

.cookies-button-area {
	float:right; 
	padding: 5px 10px;
}


#dialog-cookies a {
	color: #cccccc;
	font-weight: bold;
}



#dialog-cookies .cookie-button {
	position: relative;
	display: inline-block;
	margin-left: 10px;
	padding: 5px 30px 6px 10px;
	font-size: 12px;
	line-height: 16px;
	font-weight: bold; 
	text-decoration: none;
	color:#555555; 
	background:#ddd;
	outline: none;
	border:1px solid #333;
	border-radius: 5px; 
	cursor:pointer;
	/* For FF: make link-button and input-button same height */
	height: 29px;
	overflow: hidden;
	vertical-align: middle;
}

#dialog-cookies .cookie-button:hover {
	background: #cccccc;
}

/* symbols for buttons */
#dialog-cookies .cookie-button#cookie-ok:after {
	display: block;
	position: absolute;
	right: 8px;
	top: 4px;
	content: '';
	height: 18px;
	width: 19px;
	background-image: url(cookie-infobox-haken.png);
}


/* symbols for buttons */
#dialog-cookies .cookie-button#cookie-datalink:after {
	display: block;
	position: absolute;
	right: 10px;
	top: 8px;
	content: '';
	height: 12px;
	width: 15px;
	background-image: url(cookie-infobox-pfeil.png);
}




/* 08 Indivduelle Objekte für einzelne(!) Seiten 
 * ****************************************************** */

 
 
/* Seite Technologie (allse Sprachen) --> Bereich mit Menuboxen */

#pg_technologie > h2 {
	padding: 9px 9px 10px 9px;
	color: #FFFFFF;
	text-shadow: 1px 1px #111111;
	text-align: center;
	background: #3F3F3F; /* Old browsers */
	background: -moz-linear-gradient(top,  #696969 0%, #3c3c3c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#696969), color-stop(100%,#3c3c3c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #696969 0%,#3c3c3c 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #696969 0%,#3c3c3c 100%); /* W3C */
	-pie-background: linear-gradient(to bottom,  #696969 0%,#3c3c3c 100%); /* PIE */
}
	



#pg_technologie a.menuboxen_ebene1{
	position: relative;
}

#pg_technologie #img_exklusive_patent_license {
	position: absolute;
	right: 1px;
	top: 1px;
	width: 65px;
	height: 62px;
	background-image: url(exclusive_patent_license.png);
	background-repeat: no-repeat;
}

#pg_technologie #img_patented {
	position: absolute;
	right: 1px;
	top: 1px;
	width: 65px;
	height: 62px;
	background-image: url(patented.png);
	background-repeat: no-repeat;
}



#pg_technologie .box {
	padding: 20px;
	background-image: url(new_diszipline.png);
	background-repeat: no-repeat;
	background-position: right top;
}

#pg_technologie .box h2 {
	color: #335980 !important;
}
 
 
 
/* Seite Fertigung und Zulieferung */
 #korrektur_ul_neben_float {
	margin-left: 58%;
}



/* Seite Industrial Services --> Boxen it Spalte rechts */
.box .industrial_services.spalte_links {
	float: left;
	width: 65%;
	margin-right: 5%;
}

.box .industrial_services.spalte_rechts {
	float: left;
	width: 30%;
}

/* Seite Information --> Rahmen um Wallpaper-Bilder */
.wallpaper {
	float: left;
	width: 140px;
	padding: 10px;
	margin-right: 20px;
	background-color: #e6e6e6;
	border: 1px solid #c0c0c0;
}

.wallpaper img {
	width: 100%;
}


/* Startseite: Slideshow (AllInOne Banner Rotator) */

.slideshow {
	overflow: hidden;
}

 .slideshowContainer {
    left: 50%;
    margin-left: -487px;
    position: relative;
    background: url(shadow.jpg);
    background-repeat: no-repeat;
    padding-bottom: 41px;
    background-position: 5px 350px;
    /*box-shadow: 0px 32px 20px -27px #888;*/
}

.slideshow.text {
    position: absolute;
    font-family: 'Karla', 'Lucida Sans Unicode', Arial, sans-serif;
    font-size: 23px;
	/* Hinzugefügt für Präsentation: */
	line-height: 30px;
    box-shadow: none;
}

.slideshow.text.huge {
    font-size: 50px;
}

.slideshow.text.headline {
    font-size: 35px;
	/* Hinzugefügt für Präsentation: */
	line-height: 40px;
}

.slideshow.text.subheadline {
    font-size: 30px;
	/* Hinzugefügt für Präsentation: */
	line-height:32px;
}

.slideshow.text .special {
    color: #e00019;
}



/* Special: Slider für neue 140-Millimeter-Lüfter */

/* white box bottom left moving up from bottom */
.slideshow.whitebox {
	width: 380px;
	height: 200px;
	padding: 15px 30px 25px 30px;
	text-align: right;
	background-color: #ffffff;
}
.slideshow.whitebox span{
	/* sub-text */
	font-size: 0.7em;
	color: #777777;
}



.slideshow .nb-logo {
	position: absolute;
	width: 150px;
	height: 52px;
	background-color: #ffffff;
}

.slideshow .blind-zero-box {
	/* not content - just empty placeholder for longer timing duration on the slide */
	position: absolute;
	width: 0px;
	height: 0px;
}




/* Seite Login */

div#loginmaske {
	padding: 20px;
	background-color: #f5f5f5;
	border: solid 1px #e3e3e3;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

	

/* 09 Testbereich  
 * ****************************************************** */

 
/* 	Testbereich Textcode-Include --> nur emporär
	Kann im Betrieb gelöscht werden */

   .testcodeinclude {
	   margin: 0;
	   padding: 50px;
	   background-color: yellow;
   }