/*  Haupt-CSS fr www.thermacare.de --- Achtung immer abgleichn mit der Kopie auf dem Server mit den dynamischen I-Frame-Inhalten */

/* ------------ Allgemeine Vorgaben --------- */

/* Holy IE-Hack  -- Achtung nur bis IE 6 getestet*/
* html .ieboxhack {height:1%}

/* Standard-Absatz Schriftvorgabe fr Content-Seiten */
body, p, div.box iframe { color:#505050; margin:0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px;  }

/* Hintergrundfarbe fr die gesamte Seite
 * Mit der background-color kann die Farbe fr die Seite bestimmt werden.
 * ber das background-image wird derzeit die Hintergrundfarbe aus dem Inhaltsbereich ber die komplette Hhe des Browserfensters fortgesetzt.
 */
body { background-color:#FFFFF0; background-image:url(../images/layout/body_bg.gif); background-position:left; background-repeat:repeat-y; }

/* Bilder werden auf dieser Seite i.d.R. ohne Rahmen verwendet */
img { border:0; }

/* spezielle extras */
.center { text-align:center; }
.bold { font-weight:bold; }
.rightalign {text-align:right }

/* verwendet z.B. fr Quellenangaben */
.notice { font-size:10px; }


/* ------------ Seitenvorgaben (Page) --------- */
/* page ist ein div - das einzige Element unterhalb von body; es definiert die Seitenbreite und wird durch body ausgerichtet bzw. ber die eigene Margins */
#page { width:1003px; margin:0; text-align:left; background-color:#FFFFF0; }

/* ------------ Header & Footer --------- */
/* Kopf- und Fuzeile, beides divs. */
#footer, #header { width:100%; }

/* Header */
#header { height:187px; }

/* ForMe - Header */
#forme_header { width:1003px; height:96px; background-image:url(../images/forme_header/bg_header.gif); z-index:10; }
#header_content_logo { margin-left:139px; padding-top: 22px; }
#header_content_navi { margin-left:138px; padding-top: 22px; }
/*#header_content_top { margin-left:138px; padding-top: 5px; }
#header_content_bottom { margin-left:196px; padding-top: 2px; }*/

/* definition des Ersatzmens aus HTML fr die Suchmaschinen */
#header div.htmlnav {position:absolute; left:0px; top:96px;}
#header div.logo {position:absolute; left:0px; top:117px;}
#header div.logo a img {border:0; padding:0; margin:0;}
#header div.htmlnav div.nav { position:absolute; left:275px; top:0px; padding-left:0px; padding-top:58px; background-color:transparent; }
#header div.htmlnav div.nav a { color:#FFFFFF; font-size:13px; margin-right:20px; text-decoration:none; }

/* Footer */
#footer { font-size:10px; clear:both; height:2.5em; background-color:#e80000; background-image:url(../images/layout/footer_bg.jpg); background-repeat:repeat-y; color:#ffffff; }
* html #footer { height:1.3em; } /* ie hack */

/* richtet den Text im footer mittig aus */
#footer .spacer { padding:6px 30px 6px 30px; }
* html #footer .spacer {height:100%;}  /* ie hack */
#footer .left, #footer .right { height:100%; }

/* linker footer-Bereich */
#footer .left { float:right; width:30%; }

/* rechter footer-Bereich */
#footer .right { float:right; text-align:right; width:70% }
#footer a { text-decoration:none; color:white; }

/* ------------ Content-LeftFloat-Boxes --------- */
/* die drei Inhaltsspalten; auf der Startseite sind jeweils nur eine Teaserbox enthalten; Verhalten auf Content-Seiten wird in other.css geregelt */

div.box { float:left; width:233px; margin:3px 1px 3px 2px; }
div.box iframe { border-width:0px; }
div.wide { width:508px; }


/* ------------ Button-Links ------------  */

/* Breite eines Buttons festlegen */
/* Schmaler Button fr schmale Teaserboxen */
.small_teaser_button { width: 212px; margin-left: 10px;}

/* Breiter Button fr breite Teaserboxen */
.wide_teaser_button { width: 233px; margin-left: 263px; }

/* Button im Contentbereich */
.content_button, .back_button { width: 270px; margin-bottom:5px; }

/* Button im Quiz */
.quiz_button, .back_quiz_button { width: 80px; }

/* Button bei Spaltenlayout */
.column_button, .back_column_button { width: 204px; }

 
/* Hauptcontainer fr den Button. Immer zusammen mit der Breite des Buttons verwenden.*/  
.button { background-color: #E51C18; text-align:left; line-height:14px; }

/* Text(link)-Container fr einen Button */
.link_container { 
	float:left;
    padding:0px ;
	margin: 0px 0px 0px 5px;
	background-image:url(../images/layout/button_pfeil.gif);
	background-repeat:no-repeat;
	background-position:right 1px;
	overflow:hidden;	
}

/* IE Hack um die Buttons zu positionieren */
* html .iebuttonpos { margin: -1px 0px 1px 5px; }

/* Der Button-Link-Tag muss als Block definier werden um ihn ber die gesamte
Button-Breite ausdehnen zu knnen. */
.link_container a{ display:block; overflow:hidden; }

/* die folgenden Styles definiert die Breite des klickbaren Bereichs im LinkButton 
und positioniert damit auch die rechte Button-Pfeilgrafik */
.content_button .link_container, .back_button .link_container { width:255px;}
.small_teaser_button .link_container { width:200px; }
.wide_teaser_button .link_container { width:220px; }
.quiz_button .link_container, .back_quiz_button .link_container {width:68px; }
.column_button .link_container, .back_column_button .link_container {width:191px; }
/* Spezielle Pfeilgrafik fr Zurckbuttons */
.back_button .link_container, .back_quiz_button .link_container, .back_column_button .link_container  { background-image:url(../images/layout/button_pfeil_up.gif); }

/* Text(link) in einem Button.*/  
.link_container a:link, .link_container a:visited, .link_container a:hover, .link_container a:active, #inhalt .link_container a:link, #inhalt .link_container a:visited, #inhalt .link_container a:hover, #inhalt .link_container a:active{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	color:white;
	text-decoration:none;	
}

/* MouseOver-Style fr Button-Link */
#inhalt .link_container a:hover,  .link_container a:hover { color:#FFDC00; }

/* Aktive Darstellung fr den Button-Link*/
#inhalt .link_container a:active, .link_container a:active { color: #FFDC00; }

/* Oberer Rand des Buttons mit Ecke rechts-oben - Ecke links-oben wird im HTML der Seite gesetzte */
.button_top { background: url(../images/layout/button_corner_tr.gif) no-repeat top right; }

/* Unterer Rand des Buttons mit Eche rechts-unten - Ecke links-unten wird im HTML der Seite gesetzt */
.button_bottom { clear:both; background: url(../images/layout/button_corner_br.gif) no-repeat top right; margin-top:-1px; }

/* Formatierung der Ecken-Grfiken */
img.corner { width: 2px; height: 2px; display: block !important; }
  


/* ----------- Teaserboxen -------------*/

/* -- ie-hack -- */
* html #box1 {margin-left:6px; }

/* schmaler Teaser rechts auf Homepage */
* html #box3 .fixie137{ height:137px;}

/* breiter Teaser mittig auf Homepage */
* html #box2 .fixie145{ height:145px;}
/* -- ende ie-hack --*/


/* schmaler Teaser liks auf Homepage */
#box1 { margin-left:10px; }

/* breiter Teaser mittig auf Homepage */
#box2 .teaser_main { min-height:145px; } 

/* schmaler Teaser rechts auf Homepage */
#box3 .teaser_main, #iframebody .teaser_main { min-height:137px; }  

/* Abstand des Teasertextes zum Button: Dient der Feinjustierung der Teaserbuttons zueinander */
#box2 p.posbutton { margin-bottom:20px; }
#box3 p.posbutton { margin-bottom:6px; }
#box3 p {margin-top:0px;}
/* ie-hacks zur Justierung der Buttonposition */
* html #box3 .pie { margin-bottom:4px; margin-top:-2px; padding:0;}
* html #box3 .button { margin-top:0px; margin-bottom:-2px; padding:0;  }


/* Container fr Teaser - immer mit Breitenangabe verwenden*/
.teaser{ clear:both; margin: 0px; padding: 0px 0px 1px 0px ; text-align:left; }

/* schmaler Teaser */
.teaser_small {	width:233px; }  

/* breiter Teaser */
.teaser_wide_home  { width:508px;	}  
 
/* Container fr oberen Rand des Teasers*/  
.teaser_top{
	background-color:#E51C18;
	background-position:top;
	background-repeat:no-repeat; 
	height:auto;
	margin:0px;
	padding-top:5px;
	padding-bottom:5px;
}  

/* Hintergrundbild fr oberen Rand des schmalen Teasers */
.small_top { background-image:url(../images/layout/teaser_top_small.gif); } 

/* Hintergrundbild fr oberen Rand des breiten Teasers */ 
.wide_top { background-image:url(../images/layout/teaser_top_wide.gif); } 

/* berschrift eines Teasers */
.teaser_top h1{ margin: 0px 8px 0px 8px; padding:0;	font-size:12px;	color:#FDCE00; }

/* Container fr den Teaserinhalt*/
.teaser_main {
	margin:0;
 	background-position:top;
	border-left:1px solid #E51C18;
	border-right:1px solid #E51C18;
	background-repeat:repeat-x;
	background-color: #E2CFA8;
	background-image:url(../images/layout/teaser_main_bg.gif);
	overflow:hidden;
}  

/* Breite fr schmalen Teaser-Inhalt ( Packshots mssen geliche Breite haben !) */ 
.teaser_small .teaser_main { width:231px; }

/* Breite fr breiten Teaser-Inhalt */ 
.teaser_wide .teaser_main { 
	width:506px; 
	background-image:url(../images/layout/teaser_wide_bg.jpg);
	background-repeat:no-repeat;
}




/* Text in Teaserboxen */
.teaser_main  p{
	line-height:14px;
	/*color:#5F5F5F;*/
 	margin-left:10px;
	margin-right:10px;
	margin-top:5px;
	margin-bottom:8px;
 }
 
 /* Text in der breiten Teaserbox */ 
 .teaser_wide .teaser_main  p{
	line-height:16px;
	/*color:#5F5F5F;*/
	margin-left:263px;
	margin-right:10px;
	margin-top:0px;
	margin-bottom:0px;
	padding-top: 10px;
 }

/* Unterer Rand des Teasers immer in Verbindung mit .small_bottom oder .wide_bottom */  
.teaser_bottom {
  	background-color: #E1CDA5;
	background-position:bottom;
	background-repeat:no-repeat; 
	height:8px;
	margin:0px;
}

/* Unterer Rand fr schmale Teaser */
.small_bottom { background-image:url(../images/layout/teaser_bottom_small.gif); }

/* Unterer Rand fr breite Teaser */
.wide_bottom { 
	position:relative;
	top:-8px;
	background-color:transparent;
	background-image:url(../images/layout/teaser_bottom_wide.gif); 
} 


.btn_fachartikel {background-image:url(../images/btn_fachartikel.gif); width:208px; height:16px; margin-left:20px; color:#ffffff; padding: 2px 0px 0px 5px; margin-bottom:5px;}
.btn_fachartikel a {text-decoration:none;color:#ffffff;}
.btn_fachartikel a:hover {text-decoration:none;color:#fdce00;}

/* Länderhinweis unter dem Footer */
.residence {margin-left: 29px; margin-top: 4px;}
.residence a {color:#000;}