/*-- ----------------------------------------------------------------------------------------------- --*/
/*-- style-sheet-Datei für den Internetauftritt von www.kosmetikartikel-online.de	   --*/
/*--        Copyright 2009 by Belle-Vital-Kosmetik - Matthias Schneider, Deckenpfronn	   --*/
/*-- ----------------------------------------------------------------------------------------------- --*/


body { color:black; background-color:#FFFFEE; font-family:Helvetica,Arial,sans-serif; margin:0; padding: 0; }

/*  ---------- Allgemein gültige Deklarationen ------- */
h1 { font-size: 1.5em; margin: 0; padding:0; vertical-align:top; }
h2 { font-size: 1em; margin: 0; padding:0; vertical-align:top; }

.button { border-left:1px solid #cccccc; background-image:url('../images/button.gif'); font-family:helvetica, arial, sans-serif; font-size:0.8em; font-weight:bold; color:#000000; padding:0.2em 0em 0.2em 0em;}
.bild_r { float:right; margin-left:10px; }
.bild_l { float:left; margin-right:10px; }

/*  ---------- Kopfzeile ------- */
div#kopfzeile { margin:0; padding:0; background-image:url('../images/kopf.jpg'); }
div#kopfzeile .schatten { position:absolute; left:220px; top:5px; font-family:helvetica, arial, sans-serif; font-size:12pt; font-weight:bold; color:#404040; border-bottom:2px solid #000000; }
div#kopfzeile .untertitel { position:absolute; left:220px; top:38px; font-family:helvetica, arial, sans-serif; font-size:11pt; color:#A0A0A0; }

/*  ---------- Fusszeile ------- */
p#fusszeile { clear:both; font-size:0.7em; margin:0; padding:0.1em; border-top:1px solid silver; }

/*  ---------- Titelemente und horizontale Navigation ------- */
div#h_menue { font-family: helvetica, arial, sans-serif; font-size:0.7em; color:black; margin:0; }
div#h_menue .menueleiste_oben { height: 28px; background:url('../images/m_leiste.gif'); margin:0; padding:0; }
div#h_menue .menuetext { margin: 2.5px; }
div#h_menue .rahmen_submenue { border:1px solid #c0c0c0; background-color:#f0f0f0; }
div#h_menue .menueleiste_submenue { text-align:center; padding:2pt 4pt 2pt 4pt; background:url('../images/m_leiste_sub.gif'); border-top:1px solid #000000; border-bottom:1px solid #000000; }
div#h_menue .menuepunkt_submenue { font-weight: lighter; text-align: left; padding:2pt 4pt 2pt 4pt; }
div#h_menue a { margin:2px; font-weight: bold; }
div#h_menue a:link { text-decoration:none; }
div#h_menue a:hover { color:black; background:#F0F0F0; margin:2px; }
div#h_menue a:active { text-decoration:underline; font-weight:bold; color:#000000; }
div#h_menue a:visited { text-decoration:none; color:#000000; }

/*  ---------- Vertikale Navigation ------- */
div#navigation { font-family:helvetica, arial, sans-serif; color:#000000; text-decoration:none; font-size:0.7em; float:left; width:13em; height:100%; margin:0 0; padding:0; }
div#navigation .menuerubrik { padding:0; margin:0; font-weight:bold; text-align:center; line-height:15pt; background:url('../images/m_leiste.gif'); border-top:1px solid #000000; border-bottom:1px solid #000000; }
div#navigation .stufe1 { margin:0; padding:0; background-color:#F0F0F0; }
div#navigation .stufe2 { margin:0 0 0 0.8em; background-color:#F0F0F0; }
div#navigation .stufe3 { margin:0 0 0 1.6em; background-color:#F0F0F0; }
div#navigation a { display: block; margin:2px; padding: 2px; font-weight: bold; }
div#navigation a:link { text-decoration:none; color: black; }
div#navigation a:hover { color: black; background:#ffe281; }
div#navigation a:active { font-weight:bold; color:#000000; background:#ffe281; padding-left:5px; }
div#navigation a:visited { text-decoration:none; color:#700070; }
div#navigation img { border:0; }

/*  ---------- Infoboxen ------- */
div#info { font-family:helvetica, arial, sans-serif; font-size:0.9em; width:13em; float:right; }
div#info .kasten { border:1px dashed silver; background-color:#f0f0f0; padding:1px; margin: 0.5em 0.5em 0 0; }
div#info .ueberschrift { font-weight:bold; margin: 0.3em 0.5em 0.5em 0.5em; border-bottom:1px solid #000000; }
div#info p { font-size:0.8em; margin:0.5em; text-align:justify; }
div#info h1 { visibility:hidden; }
div#info h2 { visibility:hidden; }
div#info ul { list-style-type:square; font-size:0.8em; margin:0 0.9em 0 -1.5em; }
div#info hr { height:2px; color:#808080; }
div#info form { margin:0.5em 0 0.5em 0; }

/*  ---------- Inhalte ------- */
div#inhalt { font-size:1em; font-family:helvetica, arial, sans-serif; color:#000000; margin:1em 12.5em 0 10em; }
div#inhalt h1 { background:url('../images/h1_hintergrund.gif'); background-repeat:no-repeat; font-size:1.0em; margin:0; padding: 0.5em 0.2em 0.2em 0.5em; font-weight:bold; font-variant:small-caps; border-bottom:3px solid #FFD03F; }
div#inhalt h2 { margin:0; font-weight:400; font-size:0.9em; background-color:#f0f0f0; padding:0.6em; text-align:justify; border:1px solid #c0c0c0; }
div#inhalt .ueberschrift { font-size:1.0em; margin:10px 0 0.2em 0; padding: 0; font-weight:bold; font-variant:small-caps; border-bottom: 1px solid #c0c0c0; }
div#inhalt .verweis { font-size:1.0em; margin:10px 0 0.2em 0; padding: 0; font-weight:bold; font-variant:small-caps; }
div#inhalt .leistungstext { padding-left: 15px; }
div#inhalt .leistungspreis { text-align:right; margin-top:7px; }
div#inhalt .kasten { font-size:0.9em; border:1px solid #c0c0c0; margin:0 0 1.5em 0; padding:0.5em; text-align:justify; background-color:#ffffff; }
div#inhalt .fett { font-weight:bold; }
div#inhalt p { font-size:1em; margin: 1em 0; }
div#inhalt p.block { text-align:justify; }
div#inhalt .textklein { font-size:0.7em; }
div#inhalt .preis { background-color:#FFFEA7; padding:0.4em; border-top:1px solid #B7B7B5; border-left:1px solid #B7B7B5; border-right:2px solid #FFFFFF; border-bottom:2px solid #FFFFFF; }
div#inhalt .brand { font-family:Monotype Corsiva; font-size:13pt; font-weight:600; word-spacing:2pt; }
div#inhalt a { text-decoration:underline; font-weight:bold; }


div#inhalt table { margin-top:10px; margin-bottom:10px; }
div#inhalt .tabueber { height:25px; font-size: 0.8em; font-weight:bold; color:black; background: url('../images/grau_mitte.gif'); padding:5px 9px 0 9px; }
div#inhalt th { background-color:#777777; font-weight:bold; color:#FFFFFF; text-align:justify; padding:5px; }
div#inhalt .tabfett { background: url('../images/ueber_back.jpg'); font-size:0.8em; font-weight:bold; vertical-align:top; padding:0.2em 0.8em 0.2em 0.8em; height:25px; }
div#inhalt .liste1 { font-size:0.8em; margin:0; padding:0.2em 0.8em 0.2em 0.8em; background-color:#f0f0f0; }
div#inhalt .liste2 { font-size:0.8em; margin:0; padding:0.2em 0.8em 0.2em 0.8em; background-color:#ffffff; }

div#inhalt .grau_links { background:url('../images/grau_links.gif'); width:45pX; height:30px; padding:0; }
div#inhalt .grau_rechts { background:url('../images/grau_rechts.gif'); width:5pX; height:30px; padding:0; }

/*  ------ SANSHUI ------- */
div#inhalt .feuer{ background-color:#DB4D57; padding:1px; color:white; font-weight:bold; }
div#inhalt .metall{ background-color:#E9C68A; padding:1px; font-weight:bold; }
div#inhalt .erde{ background-color:#E4B096; padding:1px; font-weight:bold; }
div#inhalt .holz{ background-color:#79A6AB; padding:1px; color:white; font-weight:bold; }
div#inhalt .wasser{ background-color:#82ACD0; padding:1px; color:white; font-weight:bold; }


/*  ---------- Hauttypen ------- */
div#inhalt .normal { font-weight:bold; background-color:#FCC666; padding: 0.2em; color:#000000; border-left:15px solid #ff8000; border-bottom:0; }
div#inhalt .fettig { font-weight:bold; background-color:#99CEEE; padding: 0.2em; color:#000000; border-left:15px solid #66aad9; border-bottom:0; }
div#inhalt .trocken { font-weight:bold; background-color:#ECB7D5; padding: 0.2em; color:#000000; border-left:15px solid #b25981; border-bottom:0; }
div#inhalt .mischhaut { font-weight:bold; background-color:#fff280; padding: 0.2em; color:#000000; border-left:15px solid #ffcc00; border-bottom:0; }
div#inhalt .empfindlich { font-weight:bold; background-color:#A3D687; padding: 0.2em; color:#000000; border-left:15px solid #53a653; border-bottom:0; }
div#inhalt .reif { font-weight:bold; background-color:#ff9980; padding: 0.2em; color:#000000; border-left:15px solid #ff3300; border-bottom:0; }

/*  ---------- Formulare ------- */
.eingabefeld { background-color:#ffffff; font-family:helvetica, arial, sans-serif; font-size:1em; padding:2px; height:15px; color:#8000ff; }
.button { border-left:1px solid #cccccc; ; font-family:helvetica, arial, sans-serif; font-size:8pt; font-weight:bold; color:#000000; }