/* ---------- Farben ---------- 
creme hell  = #FEFCF1
creme       = #EEE7D0
grau        = #CCC
warmes grau = #575757
dkl. grau   = #333
dkl. rot    = #C3443E
*/


/* ---------- Basics ---------- */
* {margin: 0; padding:0;}
img, a {border: 0;}

body { 
font-size: 100.01%; 
font-family: Arial, Helvetica, Sans-Serif; 
text-align: center;
background-color: #FEFCF1;
}

/* ---------- Text Basics ---------- */
p { }

a {color: #C3443E;}
a:link {text-decoration: none; }
a:visited { }
a:hover {text-decoration: underline;}
a:active { }

h1 {font-size: 1.7em;}
h2{font-size: 1.5em;}
h3{font-size: 1.2em;}
h4{font-size: 1.2em;}
h5{font-size: 1.2em;}
h6{font-size: 1.1em;}


/* ---------- Grundgerüst ---------- */

#wrapper{
width: 850px;
margin: 10px auto;
text-align: left;
}

#header{}

#content-rahmen{ 
background-color: #fff; 
border: solid 1px #000; 
padding: 20px; 
float: left; }

* html #content-rahmen{
width: 850px;
w\idth: 810px; 
}

#content-wrapper{
width: 810px;
background-color: #FFF; 
background-image: url(../bilder/jk-htgr.gif); 
background-repeat: repeat-y;
float: left; 
}

#navigation{
width: 190px;
height: 480px;
background-color: #EEE7D0;
float: left;
font-size: 0.69em;
line-height: 1.5em;
padding-top: 15px;
}

#inhalt{
width: 610px;
background-color: #CCC;
position: relative;
left: 10px;
float: left;
font-size: .69em;
}

#footer{
float: left;
color: #575757;
width: 850px;
margin-top: 5px;}


/* ---------- Listen-Navigation ---------- */

#navigation a {
text-decoration: none;
color: #575757;
width: 160px;
display: block;

}

#navigation a:hover {
text-decoration: none;
color: #C3443E;
}

#navigation ul{
list-style-type: none;
}

#navigation ul li{
font-weight: bold;
}

#navigation ul li ul li{
font-weight: normal;
}

#navigation ul li ul li a{
padding-left: 12px;
width: 148px;
background-image: url(../bilder/listenpfeil-off.gif);
background-repeat: no-repeat; 
background-position: .2em .5em;
}

#navigation ul li ul li a:hover{
padding-left: 12px;
width: 148px;
background-image: url(../bilder/listenpfeil-on.gif);
background-repeat: no-repeat; 
background-position: .2em .5em;
}



/* ---------- Inhaltsbereiche ---------- */

#inhalt p, h1, h2, h3, h4, h5{
color: #222;
padding: .4em 0 .3em 0;
line-height: 1.3em;
}

#inhalt h1{
color: #FFF;
}

#inhalt h3{
color: #333;
padding: 0.6em 0 0 0;
margin-bottom: -0.2em
}

#inhalt h4{
color: #FFF;
padding: 0.6em 0 0 0;
margin-bottom: -0.2em
}

#inhalt h5{
color: #666;
padding: 0.6em 0 0 0;
margin-bottom: -0.2em
}

#inhalt1oben {
width: 610px;
height: 260px;
border-bottom: 5px solid #FFF;
background-color: #000;
background-image: url(../bilder/bild-dummy.jpg);
}

/* ---------- bildleiste mit htgr-bild ---------- */
#home #inhalt1oben{
background-image: url(../bilder/bild-start.jpg);
}

#site1 #inhalt1oben, #site8-2 #inhalt1oben{
height: 250px;
background-image: url(../bilder/bild-mitarbeiter.jpg);
}

#site2 #inhalt1oben{
background-image: url(../bilder/bild-loewe-galerie.jpg);
}

#site3 #inhalt1oben{
background-image: url(../bilder/bild-bangolufsen.jpg);
}

#site4 #inhalt1oben{
background-image: url(../bilder/bild-hersteller.jpg);
}

#site4-1 #inhalt1oben{
background-image: url(../bilder/bild-bangolufsen3.jpg);
}

#site4-2 #inhalt1oben{
background-image: url(../bilder/bild-loewe.jpg);
}

#site4-3 #inhalt1oben{
background-image: url(../bilder/bild-bose.jpg);
}

#site4-4 #inhalt1oben{
background-image: url(../bilder/bild-tivoli.jpg);
}

#site4-5 #inhalt1oben{
background-image: url(../bilder/bild-boston.jpg);
}

#site5 #inhalt1oben{
background-image: url(../bilder/bild-service.jpg);
}


#site7 #inhalt1oben, #site8 #inhalt1oben, #site8-1 #inhalt1oben{
background-image: url(../bilder/bild-kontakt.jpg);
}


#elemente{
text-align: right;
width: 100px;
position: relative;
top: 92%; 
float: right;
padding-right: 15px;
}

.elemente{
text-align: right;
width: 100px;
position: relative;
top: 92%; 
float: right;
padding-right: 15px;
}

.elemente2{
position: absolute;
bottom: 8px;
right: 12px;
}


#inhalt1unten{
float:left;
width: 505px;
padding: 15px 90px 50px 15px}

#inhalt1unten a:hover{
color: red;}

* html #inhalt1unten{
width: 610px;
w\idth: 505px; 
}

#inhalt1oben .elemente{
color: #FFF;
}

/* ---------- Inhaltsbereiche Varianten ---------- */

#inhalt2oben1{
float: left;
width: 270px;
height: 260px;
border-bottom: 5px solid #FFF;
border-right: 6px solid #FFF;
background-color: #000;
background-image: url(../bilder/kartenausschnitt.jpg);
}

#inhalt2oben2{
float: left;
width: 334px;
height: 260px;
border-bottom: 5px solid #FFF;
background-color: #666;
color: #FFF;
}

#inhalt2oben2 p{
padding: 15px;
color: #FFF;
}

#inhalt2oben2 a{
color: #CCC;
text-decoration: underline;
}
#inhalt2oben2 a:hover{
color: #FFF;
text-decoration: underline;
}

#inhalt2spalte1{
float:left;
width: 250px;
padding: 15px 0 50px 15px;}

#inhalt2spalte2{
float:left;
width: 250px;
padding: 15px 0 50px 15px;}




.download {
background-image: url(../bilder/pikto-neueseite.gif);
background-repeat: no-repeat; 
list-style-type: none;
padding-left: 20px;
padding-bottom: .3em;
}

.externerlink {
background-image: url(../bilder/pikto-externerlink.gif);
background-repeat: no-repeat; 
list-style-type: none;
padding-left: 20px;
padding-bottom: .3em;
}



/*--------------- Formular ---------------*/
fieldset {
border: 1px solid #888;
width: 450px;
padding: 10px;
margin: 15px 0 10px 0;
color: #333;
}

legend{
color: #FFF;
font-size: 12px;
font-weight: bold;
padding: 0 5px;
}

/* ---------- Footer ---------- */

#footer td{
font-size: .69em;
}

#footer a {
color: #333}



/* ---------- Abstände, etc. ---------- */

.unten10{
padding-bottom:10px;
}

.oben{
padding-top:10px;
}

.oben15m{
margin-top:15px;
}

.links15 {
padding-left: 15px;
}

.links20 {
padding-left: 20px;
}

.links30 {
padding-left: 30px;
}

.linieoben {
border-top: 1px solid #FFF;}

.linieobengrau {
border-top: 1px solid #DDD;}

.linieoben2px {
border-top: 2px solid #FFF;}


.linieunten {
border-bottom: 1px solid #FFF;}

.linieuntengrau {
border-bottom: 1px solid #DDD;}

.hinweis {
width: 200px;
padding: 10px;
background-color: #F00;
color: #FFF;
}

/* ---------- Orientierung ---------- */


#home a#menue0,
#site1 a#menue1,
#site2 a#menue2,
#site3 a#menue3,
#site4 a#menue4,
#site4-1 a#menue4sub1,
#site4-2 a#menue4sub2,
#site4-3 a#menue4sub3,
#site4-4 a#menue4sub4,
#site4-5 a#menue4sub5,
#site5 a#menue5,
#site6 a#menue6,
#site7 a#menue7,
#site8 a#menue8,
#site8-1 a#menue8sub1,
#site8-2 a#menue8sub2,
#site8-3 a#menue8sub3
 {
color:#C3443E;

}