body {
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
font-size: x-small;
}
#container {
width: 1200px;
height: 600px;
border: solid gray;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
background-color: white;
position: relative;
}
#content {
position: absolute;
top: 20px;
right: 0px;
width: 400px;
height: 570px;
padding-right: 5px;
overflow: auto;
}
#start-content a {
color: #003366;
text-decoration: none;
}
#logo {
background-position: 20px 20px;
background-repeat: no-repeat;
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 130px;
border-right: gray solid;
background-image: url(../pics/logo.gif);
}

/* TABELLEN-FORMATE */
table {
font-size: 0.85em;
color: #666666;
margin-left: 0px;
}
th {
text-align: left;
color: #990000; 
padding-right: 5px;
border-bottom: 1px solid silver;
}
td {
padding: 10px 0px 10px 10px;
border-bottom: 1px solid silver;
}
/* TEXT-FORMATE */
h1 {
color: #003366;
font-size: 2em;
}
h2 {
font-weight: normal;
color: #666666;
font-size: 1.5em;
}
h3 {
color: #003366;
font-size: 1em;
}
p, dd {
color: #666666;
line-height: 160%;
padding-right: 10px;
}
dt {
color: #003366;
margin-bottom: 2px;
font-size: 110%;
}
dd {
margin-bottom: 5px;
}
#content ul {
color: #666666;
list-style-type: disc;
list-style-position: outside;
line-height: 160%;
}
ul.bdih, p.bdih {
background-image: url(../pics/bdih.jpg);
background-repeat: no-repeat;
background-position: top right;
padding-right: 70px;
}
ul.bdih_esp, p.bdih_esp {
background-image: url(../pics/bdih_esp.jpg);
background-repeat: no-repeat;
background-position: top right;
padding-right: 70px;
}
.bdih-natrue-3st {
background-image: url(../pics/bdih-natrue-3st.jpg);
background-repeat: no-repeat;
background-position: top right;
padding-right: 70px;
}
.clear {
clear:both;
}
.abstandoben { 
margin-top: 100px; 
}
.ausrichtung-li {
float: left;
margin-right: 12px;
}

/* MAIN-NAVIGATION oben */
#main-nav {
display: inline;
position: absolute;
top: 0px;
left: 200px;
border-right: solid gray;
width: 400px;
height: 130px;
font-size: 1.1em;
}
#main-nav ul {
position: absolute;
top: 20px;
width: 320px;
}
#main-nav li {
display: inline;
padding-right: 5px;
padding-left: 5px;
list-style: none;
color: gray;
}
#main-nav a {
color: #003366;
text-decoration: none;
padding-right: 4px;
padding-left: 4px;
padding-bottom: 1px;
}
#main-nav a:hover {
background-color: #cc3300;
color: white;
}
#main-nav .curr {
color: white;
background-color: #003366;
}
#content a {
color: #cc3300;
text-decoration: none;
}
/* NAVIGATION PRODUKTGRUPPEN */
#prod-nav {
display: inline;
position: absolute;
text-align: right;
top: 483px;
left: -3px;
width: 600px;
height: 114px;
border: solid gray;
font-size: 1.3em;
}
#prod-nav ul {
position: absolute;
width: 550px;
left: 0px;
top: 5px;
}
#prod-nav li {
display: inline;
list-style: none;
color: gray;
}
#prod-nav a {
text-decoration: none;
padding-right: 12px;
padding-left: 12px;
padding-bottom: 1px;
}
/* WEITERBL€TTERN- und ABB-Button */
#blaettern {
position: absolute;
left: 630px;
top: 520px;
}
#blaettern a {
padding-left: 10px;
padding-top: 10px;
font-size: xx-small;
display: block;
text-decoration: none;
}
a.weiter:link, a.weiter:visited { 
color: #003366;
width: 100px;
height: 50px;
background-image: url('../pics/weiter-green.gif'); 
background-repeat: no-repeat;
}
a.weiter:hover, a.weiter:active { 
color: black; 
background-image: url('../pics/weiter-bluete.jpg'); 
background-repeat: no-repeat; 
}
a.abb:link, a.abb:visited {
text-decoration: none;
color: #99cc00;
}
a.abb:hover, a.abb:active {
color: #cc33cc;
background-image: none;
}
/* BILDER */
#pic-left { /* wei§es Feld */
position: absolute;
top: 130px;
left: -3px;
width: 200px;
height: 350px;
border: solid gray;
background-color: white;
}
#pic-top { /* Produktabbildung */
position: absolute;
top: 130px;
left: 200px;
width: 397px;
height: 350px;
border: solid gray;
border-bottom: solid gray;
}
#pic-bottom { /* FarbflŠche */
position: absolute;
top: 410px;
left: 200px;
width: 397px;
height: 70px;
border: solid gray;
}
#pic-right { /* Modell */
position: absolute;
top: 180px;
left: 600px;
border-style: solid;
border-width: 3px;
border: solid gray;
width: 160px;
height: 170px;
}
/* PRODUKTLINKS Einzelfarben */
a.deko:link, a.deko:visited {
color: #cc33cc;
}
a.deko:hover, .deko-curr {
color: white;
background-color: #cc33cc;
}
a.facebody:link, a.facebody:visited {
color: #9966ff;
}
a.facebody:hover, .facebody-curr {
color: white;
background-color: #9966ff;
}
a.gesicht:link, a.gesicht:visited {
color: #339999;
}
a.gesicht:hover, .gesicht-curr {
color: white;
background-color: #339999;
}
a.haarfarbe:link, a.haarfarbe:visited {
color: #cc6633;
}
a.haarfarbe:hover, .haarfarbe-curr {
color: white;
background-color: #cc6633;
}
a.haarpflege:link, a.haarpflege:visited {
color: #003399;
}
a.haarpflege:hover, .haarpflege-curr {
color: white;
background-color: #336699;
}
a.haarstyling:link, a.haarstyling:visited {
color: #669999;
}
a.haarstyling:hover, .haarstyling-curr {
color: white;
background-color: #669999;
}
a.homme:link, a.homme:visited {
color: #333333;
}
a.homme:hover, .homme-curr {
color: white;
background-color: #333333;
}
a.koerper:link, a.koerper:visited {
color: #339933;
}
a.koerper:hover, .koerper-curr {
color: white;
background-color: #339933;
}
a.kristall:link, a.kristall:visited {
color: #6699cc;
}
a.kristall:hover, .kristall-curr {
color: white;
background-color: #6699cc;
}
a.naturalbasics:link, a.naturalbasics:visited {
color: #99cc00;
}
a.naturalbasics:hover, .naturalbasics-curr {
color: white;
background-color: #99cc00;
}
a.sonne:link, a.sonne:visited {
color: #ff9900;
}
a.sonne:hover, .sonne-curr {
color: white;
background-color: #ff9900;
}
a.zahn:link, a.zahn:visited {
color: #006666;
}
a.zahn:hover, .zahn-curr {
color: white;
background-color: #006666;
}
/* LEXIKON-Links */
li.lex {
display: inline;
}
a.lex:link, a.lex:visited {
text-decoration: none;
font-size: 1.5em;
padding-right: 5px;
padding-left: 5px;
color: #990000;
}
a.lex:hover {
color: white;
background-color: #990000;
}
/* BILDER und CONTENT STARTSEITE */
#start-content {
position: absolute;
top: 70px;
right: 0px;
width: 270px;
height: 530px;
overflow: auto;
padding-right: 5px;
}
#pic-1 {
background-repeat: no-repeat;
background-image: url(text-teaser.jpg);
position: absolute;
top: 130px;
left: -3px;
width: 200px;
height: 350px;
border: 3px solid gray;
}
#pic-2 { /* Tiegel Animation */
position: absolute;
top: 130px;
left: 200px;
width: 156px;
height: 150px;
border: 3px solid gray;
}
#pic-3 { /* Gesicht Animation */
position: absolute;
top: 130px;
left: 358px;
width: 239px;
height: 150px;
border: 3px solid gray;
}
#pic-4 { /* Produktreihe Animation */
background-repeat: no-repeat;
background-image: url(produkte-li.jpg);
position: absolute;
top: 283px;
left: 200px;
width: 296px;
height: 197px;
border: 3px solid gray;
}
#pic-5 {
background-repeat: no-repeat;
background-image: url(pics/blue-sky.jpg);
position: absolute;
top: 283px;
left: 498px;
width: 99px;
height: 197px;
border: 3px solid gray;
}
#single-pic { /*steht in der rechten col*/
background-image: url(3-modells.jpg);
position: absolute;
top: 130px;
left: 600px;
border: 3px solid gray;
width: 300px;
height: 250px;
}