html, body{
  font-family: arial;
  font-size: 12px;
  
  background-color: #f2f2f2;
  background-image: url(../gfx/background.gif);
  background-repeat: repeat-y;
  background-position: center;
  text-align: center;
}

a{
  color: #595959;
}
a:hover {text-decoration: none;}
#navi a:hover,
#metanavi a:hover{
  color: #000000;
}
a.download{
  background: url(../gfx/pdf.gif) no-repeat;
  padding-left: 20px;
  line-height: 160%;
}
a.extern,
a.external-link-new-window{
  background: url(../gfx/extern.gif) no-repeat;
  padding-left: 20px;
  line-height: 160%;
}
ul{
  padding-left: 10px;
  margin-left: 10px;
  margin-bottom: 1px;
}




/* Structure ----------------------------*/
#page{
  margin-left: auto;
  margin-right: auto;
  width: 800px;
  background-color: #ffffff;
  text-align: left;
}

#header,
#header_startseite{
  margin-top: 20px;
  *margin-top: 0px;
  width: 800px;
  height: 101px;
  background: url(../gfx/header.jpg) no-repeat;
}
#header_startseite{
  height: 171px;
  background: url(../gfx/header.startseite.jpg) no-repeat;
}
#header a,
#header_startseite a{
  display: block;
  height: 101px;
}
#header_startseite a{
  height: 171px;
}

#metanavi{
  float: left;
  width: 230px;
  _width: 250px;
  padding: 10px 0 0 20px;
  height: 40px;
}
#navi{
  float: left;
  padding-top: 10px;
  height: 40px;
}
#subnavi{
  margin-left: 269px;
}

#content{
}

#content .left{
  float: left;
  width: 225px;
  _width: 250px;
  margin: 0 25px 0 0;
/* böse böse böse, aber geht net anders, 
sonst flutscht die .right an den linken rand, falls leer*/
border-bottom: 1px solid #fff; 
}
#content .left .fcebox{
}

#content .right{
  width: 500px;
  float: right;
  margin-right: 20px;
}

.clearer{
  clear: both;
}

#content_3col{
}

#content_3col .left{
  float: left;
  padding-left: 25px;
}
#content_3col .left .fcebox{
  margin-left: -25px;
}
#content_3col .center{
  float: left;
  margin-left: 25px;
}
#content_3col .right{
  float: left;
  margin-left: 25px;
}

#footer{
  border-top: 1px solid #8c8c8c;
  margin-top: 60px;
  margin-left: 10px;
  margin-right: 10px;
  
  text-align: center;
  font-size: 11px;
  color: #8c8c8c;
  padding-bottom: 10px;
  padding-top: 10px;
}

#footer a{
  text-align: center;
  font-size: 11px;
  color: #8c8c8c;
}



/* Look & Feel ;-) --------------------------*/
#navi a,
#metanavi a{
  font-size: 11px;
  border-left: 1px solid #cccccc;
  padding-left: 5px;
  padding-top: 7px;
  margin-right: 30px;
  text-decoration: none;
  color: #cccccc;
}
#navi a.active,
#metanavi a.active{
  border-left: 1px solid #000000;
  color: #000000;
}

#navi a.orange{border-left: 1px solid #faa200; color: #faa200;}
#navi a.green{border-left: 1px solid #a0bd00; color: #a0bd00;}
#navi a.blue{border-left: 1px solid #00758a; color: #00758a;}

#subnavi a{
  padding-top: 0px;
  margin-right: 5px;
}

#content h1{
  font-size: 15px;
  margin: 0px;
  padding: 0px;
  font-weight: bold;
}

#content h4{
  background-position: 2px 4px;
  background-repeat: no-repeat;
  padding-left: 12px;
  font-weight: bold;
  margin: 0px;
  margin-top: 15px;
  font-size: 12px;
}

div.csc-textpic{
  margin-top: 10px;
}

body.black #content h1,
body.black #content h4,
body #content h1.black,
body #content h4.black{color: #000000;} 
body.black #content h4{background-image: url(../gfx/dot_black.gif);}
body #content h4.black{background-image: url(../gfx/dot_black.gif);}

body.orange #content h1,
body.orange #content h4,
body #content h1.orange,
body #content h4.orange{color: #faa200;}
body.orange #content h4{background-image: url(../gfx/dot_orange.gif);}
body #content h4.orange{background-image: url(../gfx/dot_orange.gif);}

body.blue #content h1,
body.blue #content h4,
body #content h1.blue,
body #content h4.blue{color: #00758a;}
body.blue #content h4{background-image: url(../gfx/dot_blue.gif);}
body #content h4.blue{background-image: url(../gfx/dot_blue.gif);}

body.green #content h1,
body.green #content h4,
body #content h1.green,
body #content h4.green{color: #a0bd00;}
body.green #content h4{background-image: url(../gfx/dot_green.gif);}
body #content h4.green{background-image: url(../gfx/dot_green.gif);}


body.black .fcebox ul,
body.orange .fcebox ul,
body.blue .fcebox ul,
body.green .fcebox ul{
  list-style: none;
  margin-left: 0px;
  padding-left: 0px;
}


/* FCE Content Box -------------------------*/
/* Structure ----------------*/
.fcebox{
  width: 250px;
  margin-bottom: 20px;
}
.fcebox #fceheader{
  padding: 12px;
  font-size: 14px;
}
.fcebox #fceimage{
}
.fcebox #fcecontent{
  padding: 12px;
  font-size: 11px;
}
.fceCol2 .fcebox #fcecontent{
  padding: 12px;
  font-size: 12px;
}

#content_3col .fcebox #fceheader{
  font-weight: bold;
  font-size: 11px;
}


/* Colors -----------------*/
.fcebox .green #fceheader{
  background-color: #a0bd00;
  color: #f6f7e5;
}
.fcebox .green #fcecontent a {color: #a0bd00;}
.fcebox .green #fcecontent{
  background-color: #e7efc0;
  color: #59595b;
}

.fcebox .orange #fceheader{
  background-color: #faa200;
  color: #fff6e6;
}
.fcebox .orange #fcecontent a{color: #faa200;}
.fcebox .orange #fcecontent{
  background-color: #fee8bf;
  color: #59595b;
}

.fcebox .blue #fceheader{
  background-color: #00758a;
  color: #e6f1f4;
}
.fcebox .blue #fcecontent a {color: #00758a;}
.fcebox .blue #fcecontent{
  background-color: #bfdce2;
  color: #59595b;
}

#content_3col .fcebox .green #fceheader{color: #fff6e7;}
#content_3col .fcebox .green #fcecontent{
  background-image: url(../gfx/verlauf.green.jpg);
  background-repeat: repeat-x;
  background-color: #f5f8e7;
  color: #a0bd00;
}

#content_3col .fcebox .orange #fceheader{color: #fff6e7;}
#content_3col .fcebox .orange #fcecontent{
  background-image: url(../gfx/verlauf.orange.jpg);
  background-repeat: repeat-x;
  background-color: #fdf5e2;
  color: #faa200;
}

#content_3col .fcebox .blue #fceheader{color: #fff6e7;}
#content_3col .fcebox .blue #fcecontent{
  background-image: url(../gfx/verlauf.blue.jpg);
  background-repeat: repeat-x;
  background-color: #e4eff3;
  color: #00758a;
}

#content_3col .fcebox a{
  font-weight: bold;
  background: none;
}


/* FCE BOX Zweispaltig ---------*/
#content .fceCol2{
  float: left;
  width: 500px;
  margin-top: 10px;
  margin-bottom: 10px;
}
#content .fceCol2 .left{
  float: left;
  width: 240px;
  margin: 0px;
  padding: 0px;
  margin-right: 20px;
}
#content .fceCol2 .right{
  float: left;
  width: 240px;
  margin: 0px;
  padding: 0px;
}
#content .fceCol2 .right .fcebox,
#content .fceCol2 .left .fcebox{
  margin: 0px;
  width: 240px;
}



/* Mailformplus ----------------*/
.addonsForm{
  margin-bottom: 20px;
}
.addonsForm .bodytext{
}
.addonsForm input{
}
.addonsForm label{
}

.contactForm{
}
.contactForm input{
  display: block;
  width: 200px;
  margin-bottom: 10px;
}
.contactForm label{
}
.contactForm textarea{
  display: block;
  width: 200px;
  height: 80px;
}
.contactForm .button{
  width: 100px;
  border: 1px solid #595959;
  font-size: 12px;
}

.addonsForm .markup,
.contactForm .markup{
   color: #ff0000;
}



/* TYPO3 Styles ----------------*/

.csc-frame-rulerAfter {
  border-top: 1px solid #ccc;
  padding: 0px;
  margin-top: 16px;
  margin-bottom: 16px;
}
.csc-frame-rulerBefore {
  border-top: 1px solid #ccc;
  padding: 0px;
  margin-top: 16px;
}

.csc-frame-frame2 {padding-left: 20px;}