/* ########################################################

	MAIN.CSS V52
	
	CSS Stylesheet für smartcooler.de
	- Dokumentation: http://de.selfhtml.org/css/index.htm
	- Validierung von CSS: 
	http://jigsaw.w3.org/css-validator/validator-text.html
	
######################################################## */


/* --------------------------------------------------------
Beginn allgemeine Formatierungen für alle Frames
-------------------------------------------------------- */

body {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #AAAAAA;
	background: #141414;
}


.right {
	text-align: right;
}

.small {
	font-size: 10px;
	font-weight: bold;
}

a {
	color: #AAAAAA;
}

img {
	border: none;
}

.textBox {
	border: 1px solid #dddcdc;
	padding: 20px;
	background: #363636;
}

strong {
	font-weight: normal;
}

div.h1, h1, div.h1 strong {
	color: #AAAAAA;
	font-size: 16px;
	margin: 10px 0 10px;
	font-weight: bold;
}

.center {
	text-align: center;
}

.center img {
	margin: auto;
}

/* --------------------------------------------------------
Ende allgemeine Formatierungen für alle Frames
-------------------------------------------------------- */

/* --------------------------------------------------------
Beginn spezielle Formatierungen für Startseite
- welcome.htm
-------------------------------------------------------- */

/* direkte Formatierung für den Body
	- Hintergrund-Bild wird nicht wiederholt
	- mittige Ausrichtung
*/

#startseite {
	height:100%;
}

#startseite body {
/* RB verändert - BG Bild herausgenommen */
	background: #141414; /* 21.12.2009 rauskommentiert  RB - url(../IMAGES/BGLF120.JPG) center no-repeat;*/
	text-align: center; /* horizontal centering for IE Win quirks */
	height: 100%;
}


/* MH ergänzt: 25.3.08 */
#startseite table {
	width: 399px;
	border: none;	
}
/* MH ergänzt: 25.3.08 */

#startseite td {
	text-decoration: none; /* kein Unterstrich */
	font-weight: bold;
	text-align: center;
	vertical-align: top;
	font-size: 12px;
}

/* MH ergänzt: 25.3.08 */

#startseite td img {
	margin:	0 auto 0 auto;
}

/* MH ergänzt: 25.3.08 */
#startseite .spacer {
	width: 68%;
}

#distance {
	width: 1px;
	height: 17%;
	margin-bottom: -55px; /* half of container's height */
	float: left;
}

/* direkte Formatierung für den Hauptcontainer (div)
	- mittige Ausrichtung
	- Text-Ausrichtung links (für IE)
*/
#logo {
	text-align: center;
	position:relative; /* puts container in front of distance */
	height: 110px;
	clear: left;
	margin:0 auto;
	width: 399px;
} /* MH ergänzt: 25.3.08 */

#flags {

	width: 399px;
	margin: 0 auto 0 auto;	
}

#flagg {

	border: 0px solid #AAAAAA;
	margin:0 auto;
}


#startseite .imgborder {

/*	Hinzugefügt 19.12.2009*/
	border: 1px solid #FFF;
	
}


/* --------------------------------------------------------
Ende spezielle Formatierungen für Startseite 
-------------------------------------------------------- */

/* --------------------------------------------------------
Beginn Frames links oben und unten
-------------------------------------------------------- */

/* direkte Formatierung des Bodys
	- Hintergrundfarbe
	- rechte Haarlinie als Begrenzung im Hintergrund
*/


#frameLeft {
	overflow-y: auto;
	overflow-x: hidden;

}

#frameLeft body {
	background: #141414  url(../IMAGES/frameBorder.png) right repeat-y;
	padding: 14px;
	
/* Rechten Rand bei linkem Frame erzeugen */
/* Vorher - margin: 0 8px 0 0; */

	margin: 0 8px 0 0;
	
}

/* generelle Formatierung der Aufzählungen für Navigationspunkte
	- kein Aufzählungszeichen
	- keine Einrückung
*/

#frameLeft ul {
	list-style-type: none;
	margin: 10px 0 10px 0;
	padding: 0;
	padding-top: 10px;
}


/* mit Rand oben */

#frameLeft ul.borderTop {
	border-top: 3px solid #3333d3;
}

/* Rechtsbündig */

#frameLeft ul.right {
	text-align: rigth;
	list-style-type: none;
	margin: 10px 0 10px 0;
	padding: 0;
	padding-top: 10px;
}

/* Klasse für Hauptüberschrift ganz oben */

#frameLeft .h1-l {

	font-size: 16px;
	padding: 0px;
	text-align: center;

}

#frameLeft .h1-r {

	font-size: 16px;
	padding: 0px;
	text-align: center;

}

#frameLeft .h1-m {
	background: #000000;
	text-align: center;
	border-bottom: 3px solid #0000ff;
}

#frameLeft h2 {
	font-size: 13px;
	color: #FFF;
	margin: 10px 0 10px 0;
	border-bottom: 3px solid #3333d3;
}

#frameLeft h3 {
	font-size: 13px;
	color: #FFF;
}


/* Listen-/Navigationselement
	- hier auch jegliche Einrückung zurücksetzen
*/

#frameLeft li {
	padding: 0;
	margin: 0;
}


#frameLeft table {
	width: 100%;
	border-collapse: collapse;
}

#frameLeft th {
	font-weight: normal;
	text-align: left;
}

#frameLeft td {
	text-align: right;
	font-size: 13px;
/*	color: #FFF;	*/
	
}


/* Formatierung der Links in der Navigation */

#frameLeft a {
	text-decoration: none; /* kein Unterstrich */
	font-weight: bold;
	font-size: 13px;
}

/* Formatierung der Links beim Überfahren mit der Maus */

#frameLeft a:hover {
	text-decoration: none; /* kein Unterstrich */
	color: #FFF;
}


/* Vererbung der kleinen Schriftgröße auf den Link innerhalb von .small */

#frameLeft .small a {
	font-size: 10px;
	font-weight: bold;
}

/* --------------------------------------------------------
Ende Frames links oben und unten
-------------------------------------------------------- */

/* --------------------------------------------------------
Beginn Frame rechts Hauptmenü
-------------------------------------------------------- */


/* Direktformatierung Body:
	- Hintergrundfarbe
	- nicht-wiederholendes Hintergrund-Bild 
*/

#frameRight {
	background: #141414 url(../IMAGES/bgBody.gif) top left no-repeat;
	padding: 20px;
}

.centerText {
	margin: 40% 100px 0 100px;
}

/* unterer Text wird absolut positioniert, damit er immer unten erscheint. */

.bottomText {
	text-align: right;
	margin: auto 100px 5px auto;
	position: absolute;
	bottom: 8px;
	right: 0;
	font-weight: bold;
	font-size: 13px;
}

/* --------------------------------------------------------
Ende Frame rechts 
-------------------------------------------------------- */

/* --------------------------------------------------------
Beginn Indexseiten Produkte und Produktgruppen
-------------------------------------------------------- */

/* Direktformatierung Body */

#index {
	padding: 8px;
/* 	background: #DDDDDD; - 21.12.2009 Geändert zu schawrz RB */
	background: #141414;
	
}

/* Direktformatierung <h1> und <div class="h1"> */

#index h1, #index .h1 {
	display: inline;
	margin: 0;
	padding: 0;
	font-size: 12px;
	color: #FFFFFF;
	font-weight: bold;
	white-space: nowrap; /* kein Umbruch */
}

#index .h1 {
	display: block;
}

/* für <div class="h1"> wird eine Linie unten definiert
	- Abstand links
*/

#index .h1 {
	border-bottom: 2px solid red;
	text-align: right;
	margin-left: 50px;
}

#index .subtitle {
	font-size: 12px;
	font-weight: bold;
	color: #000000;
}

/* Formatierung der Hauptzellen der Tabelle 
	- Hintergrundfarbe
	- Ränder
	- Abstände
	- Schrift
*/

#index .tl {
/*	background: #999999;*/
	background: #cccccc;
	font-size: 16px;
/*	color: #FFFFFF;*/
	color: #000000;
	padding: 6px;
	border-bottom: 3px solid #0000ff;
}

#index .tr {
/*	background: #cccccc;*/
	background: #cccccc;
	text-align:right;
	font-size: 16px;
	color: #000000;
	padding: 4px;
	border-bottom: 3px solid #0000ff;
}

#index .cl {
	text-align: right;
	background: #999999;
	height: 100%;
	vertical-align: middle;
	width: 30%;
	padding: 7px;
	color: #000000;
	font-size: 13px;
}


#index .clpg {
	text-align: right;
	background: #999999;
	height: 100%;
	vertical-align: middle;
	width: 30%;
	padding: 7px;
	color: #000000;
	font-size: 12px;
}


#index .cr {
	text-align: center;
	background: #000000;
	height: 100%;
	color: #FFFFFF;
}

#index .bl {
/* 	background: #cccccc;*/
	background: #cccccc;

	vertical-align: bottom;
	border-top: 3px solid #0000ff;
	padding: 4px;
}

#index .br {
/* 	background: #999999;*/
	background: #cccccc;
	text-align: right;
	vertical-align: bottom;
	border-top: 3px solid #0000ff;
	font-size: 10px;
	white-space: nowrap;
	color: #000;
	padding: 4px;
}

/* Bilder innerhalb der Zelle .cl werden als Blockelemente formatiert
	- wegen Abstandsproblemen bei einigen Browsern
*/

#index .cl img {
	display: block;
}

#index .blueline {
	text-align: right;
}

#index .title {
	color: #FFFFFF;
	font-size: 13px;
	font-weight: bold;
}

/* Klasse für .mainImage
	- Rand
*/

#index .mainImage {
	border: 2px solid #FFFFFF;
}

/* Links innerhalb der Zelle mit der Klasse cr */

#index .cr a {
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
}

/* Links beim Überfahren innerhalb der Zelle mit der Klasse cr */

#index .cr a:hover {
	color: red;
}

#index .blue {
	color: #0000ff;
	font-weight: bold;
	font-size: 12px;
}

#index .big {
	font-size: 12px;
}

#index .right {
	text-align: right;
}

#index .small {
	font-size: 10px;
	font-weight: bold;
}

#index a {
	color: #FFFFFF;
}

/* alle Bilder in index haben keinen Rand */

#index img {
	border: none;
}

#index .datasheet {
	color: #FFF;
	font-weight: bold;
	text-decoration: underline;
}

/* Tabelle innerhalb der Zelle cr
	- kein Rand
	- mittige Ausrichtung
*/

#index .cr table {
/*	width: 50%;	*/
	border: none;
	margin: auto;
}

/* Formatierung der Zellen innerhalb von .cr */

#index .cr td {
	font-size: 10px;
	font-weight: bold;
	color: #FFF;
}

#index .cr th {
	font-size: 12px;
	font-weight: bold;
	color: #FFF;
}

#index .cr .left {
	text-valign: top;
	text-align: left;
}

#index .cr th {
	text-align: center;
}

#index .cr .right {
	text-align: right;

}

/* Klasse für Bild
	- mit Rand
*/

#index .indeximg {

/*	width: 100%; */
/*	heigth: 100%; */
	border: 1px solid #FFF;
	
}

/* --------------------------------------------------------
Ende Indexseiten Produkte und Produktgruppen
-------------------------------------------------------- */

/* --------------------------------------------------------
Beginn Datenblatt 
-------------------------------------------------------- */

/* Direktformatierung Body:
	- mittige Ausrichtung (IE)
*/

#datasheet {
	background: #FFF;
	text-align: center;
}

/* Haupttabelle
	- mittige Ausrichtung (für Browser außer IE)
*/

#datasheet table {
	width: 90%;
	margin: 10px auto 0 auto;
}

/* generelles Aussehen von th und td im Datasheet
	- Textausrichtung links
*/

#datasheet td, #datasheet th {
	padding: 3px;
	color: #000;
	text-align: left;
	font-size: 13px;
}

#datasheet th {
	font-weight: normal;
}

#datasheet td {
	font-weight: bold;
}

/* Tabellenzelle mit Bild
	- Ausrichtung unten/mittig (IE)
*/

#datasheet .topImage {
	height: 100px;
	vertical-align: bottom;
	text-align: center;
}

/* Formatierung für Bild in .topImage
	- mittige Ausrichtung für Browser außer IE
*/

#datasheet .topImage img {
	margin: auto;
}

/* Formatierung für Zellen in einer .blueHead-Reihe */

#datasheet .blueHead td {
	background: #0000ff;
	font-weight: bold;
	color: #FFF;
	font-size: 16px;
}


#datasheet .blueHead th {
	background: #0000ff;
	font-weight: bold;
	color: #FFF;
	font-size: 13px;
	text-align: center;
	white-space: nowrap;
}

#datasheet .name {
	background: #000;
	color: #FFF;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	height: 50px;
}

#datasheet .greyHead td {
	background: #cccccc;
	color: #000;
	font-size: 13px;
	font-weight: normal;
}

#datasheet .greyHead th {
	background: #cccccc;
	color: #000;
	font-size: 16px;
	text-align: center;
	font-weight: bold;
}

/* Formatierung für die Zellen, die Links enthalten */

#datasheet .greyHead .linkToPDF, #datasheet .linkToHome  {
	font-size: 16px;
	text-align: right;
	font-weight: bold;
}

/* Formatierung der Links innerhalb der oben formatierten Zellen */

#datasheet .greyHead .linkToPDF a, #datasheet .linkToHome a {
	color: #0000ff;
	text-decoration: none;
}

#datasheet .description {
	text-align: justify;
	font-weight: normal;
	font-size: 16px;
}

#datasheet .greyHead .small {
	font-size: 10px;
	font-weight: normal;
	vertical-align: bottom;
}

#datasheet td.small {
	font-size: 10px;
	font-weight: normal;
}

#datasheet .center {
	text-align: center;
}

#datasheet th.right, #datasheet .right {
	text-align: right;
}

#datasheet th.left, #datasheet .left {
	text-align: left;
}

#datasheet td img {
	margin: auto;
}

#datasheet .propertyRight td {
	text-align: center;
}

#datasheet .col-width-left {
	width: 30%;
	padding: 0;
}

#datasheet .col-width-right {
	width: 70%;
}

#datasheet .picture {
	width: 320px;
	border: 1px solid #FFF;
}

#datasheet .drawing {
	width: 320;
	border: 1px solid #FFF;
}

#datasheet .NaCol {
	background: #AAA
}

/* --------------------------------------------------------
Ende Datenblatt 
-------------------------------------------------------- */