/**
CCS/HTML-Design by Manuel Just - www.manueljust.de
Do not just steal it, but be inspired! ;)
**/

/************************* BODY *************************/

body {
  background: #fff;
  margin: 0;
  padding: 0;
  font-size: 8pt;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  color: #000;
  line-height: 130%;
  text-align: center;
}

/*********************** GLOBAL *************************/

table     { margin: 0 0 5px 0; padding: 0;  font-size: 8pt; vertical-align: top; }
td        { margin: 0; padding: 0 3px 0 0;  vertical-align: top; }
td.bold   { font-weight: bold; }

p { margin: 0 0 10px 0; }

.sub { color: #777; font-size: 7pt; }
.red { color: #F00; }
.special { color: #F00; font-weight: bold; }

h1      { font-size: 10pt; font-family: Verdana, Tahoma, Arial, sans-serif; color: #000; margin: 0 0 10px 0; padding: 0 0 3px 0; border-bottom: 1px solid #fc0; width: 100%; }
h2      { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 8pt; font-weight: bold; color: #000; margin: 15px 0 10px 0; }
h3      { float: left; width: 500px; font-size: 8pt; color: #444; margin: 10px 0 7px 0; padding: 0 0 3px 0; border-bottom: 1px dotted #ccc; }

ol.num    {margin-top: 10px; margin-left: 30px; margin-bottom: 10px; list-style-type: decimal;}
ol.num li {margin: 0 0 5px -5px;}

ul    { margin: 10px 0 0 10px; padding: 0; list-style-type: square; }
ul li { margin: 0 0 6px 15px; padding: 0; }

ul.details    { margin: 10px 0 0 20px; padding: 0; list-style-image: url(../img/layout/h2bg.gif); }
ul.details li { margin: 0 0 15px 0; padding: 0 0 0 3px; line-height: 12pt; }

img    { border: none; margin: 0; }
img.au { border: 2px solid #369; margin: 0; }
img.in { border: 2px solid #900; margin: 0; }
img.ge { border: 2px solid #963; margin: 0; }
img.vo { border: 2px solid #699; margin: 0; }

.image { float: left; margin: 0 10px 10px 0; }
.imageborder { float: left; width: 130px;}
.imageborder img { float: left; margin-right: 10px; border: 1px solid #fc0;}
.imageright { float: right; margin: 0 10px 10px 0; }
.text { width: 330px; float: right; }

.legendnrau { background: #369; width: 15px; height: 15px; padding: 3px; margin:0; font-weight: bold; color: #fff; text-align: center; }
.legendnrin { background: #900; width: 15px; height: 15px; padding: 3px; margin:0; font-weight: bold; color: #fff; text-align: center; }
.legendnrge { background: #963; width: 15px; height: 15px; padding: 3px; margin:0; font-weight: bold; color: #fff; text-align: center; }
.legendnrvo { background: #699; width: 15px; height: 15px; padding: 3px; margin:0; font-weight: bold; color: #fff; text-align: center; }

.line   { width: 100%; border-top: 1px solid #ccc; margin: 0; padding: 0; }
.lt     { text-decoration: line-through; }
.red    { color: #f00; }
.detail { font-size: 7pt; }
.strong { font-weight: bold; }

a                 { font-family: Verdana, Tahoma, Arial, sans-serif; font-weight: normal; font-size: 8pt; }
a:link, a:visited {color: #960; text-decoration: underline;}
a:active, a:hover {color: #FCB913; text-decoration: none;}

/************* MAINLEVEL navigation = mlnav ******************/

#mlnavpos {
  position: relative; top: 39px; left: 68px;
  width: 740px; height: 32px;
  float: left;
  font-family: Verdana, Tahoma, Arial, sans-serif;
}
ul#mlnav { list-style: none; padding: 0; margin: 0; float: left; }
ul#mlnav li { padding: 0; margin: 0 0 0 1px; float: left; width: auto !important; width: 0%; white-space: nowrap; }
ul#mlnav li a { color: #AE8B00; font-size: 9pt; font-weight: bold; text-decoration: none; background: url(../img/layout/mlnav.gif) 0 0; height: 32px; line-height: 32px; display: block; padding: 0 15px 0 15px; }
ul#mlnav li a:hover, ul#mlnav li a.active { color: #fff; background-position: 0 -32px;}

/************ TOPLEVEL navigation = tlnav *****************/

#tlnavpos {
  margin-top: 18px;
  width: 260px;
  float: left;
}
ul#tlnav     { list-style: none; padding: 0; margin: 0; float: right; }
ul#tlnav li  { padding: 0; margin-left: 7px; white-space: nowrap; float: left; color: #ccc; }
ul#tlnav li a{ display: block; font-size: 7pt; text-decoration: none; }
ul#tlnav li a:hover, ul#tlnav li a.active { color: #B52677; text-decoration: underline; }

/*************** SUBLEVEL navigation = slnav ***********/
#slnavpos {
  width: 190px;
  float: left;
}
ul#slnav           { padding: 0; margin: 0; float: left; list-style: none; }
ul#slnav li        { margin: 0 0 5px 0; float: left; width: 160px; }
ul#slnav li.au     { border-left: 30px solid #369; }
ul#slnav li.in     { border-left: 30px solid #900; }
ul#slnav li.ge     { border-left: 30px solid #963; }
ul#slnav li.vo     { border-left: 30px solid #699; }
ul#slnav li a      { background: #fc6; width: 160px; height: 30px; line-height: 30px; display: block; text-decoration: none; color: #960; font-weight: bold; font-size: 8pt; }
ul#slnav li a span { position: relative; left: 10px; height: 30px; }
ul#slnav li a.active, ul#slnav li a:hover { background: #FCB913; color: #000; }

ul#slnav li ul      { padding: 0; margin: 5px 0 0 0; float: left; list-style: none;}
ul#slnav li ul li   { margin: 5 0 0 0; font-weight: normal;}
ul#slnav li ul li a { width: 160px; height: 30px; line-height: 30px; display: block; text-decoration: none; color: #960; font-weight: normal; font-size: 8pt; }
ul#slnav li ul li a span { position: relative; left: 10px; }
ul#slnav li ul li a:hover, ul#slnav li ul li a.active { color: #000; }

/********************** LAYOUT *************************/

#mainbg {
  background: #efefef url(../img/layout/rootbg.gif) repeat-x center top;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

#container {
  background: #fff url(../img/layout/containerbg.gif) repeat-y;
  width: 880px;
  text-align: left;
  margin: 0 auto;
}

#head {
  background: #fff url(../img/layout/headbg.gif) no-repeat;
  width: 880px; height: 150px;
  float: left;
  margin: 0; padding: 0;
}
#emotion {
  width: 350px; height: 110px;
  margin: 0 0 0 10px; padding: 0;
  float: left;
}
#logo {
  position: relative; top: 23px; left: 70px;
  margin: 0; padding: 0;
  float: left;
}

/*********************** CONTENT ***************************/

#content {
  width: 725px;
  float: left;
  margin: 0; padding: 0px;
  position: relative; left: 90px;
}

.left {
  width: 500px;
  float: left;
  margin: 0; padding: 0;
}
.right {
  position: relative; left: 30px;
  margin: 10px 0 10px 0;
  width: 190px;
  float: left;
}

#hrwater {
  background: url(../img/layout/hr-wasserzeichen.gif) no-repeat;
  margin: 50px 0 0 0;
  vertival-align: bottom;
  width: 190px; height: 170px;
  float: right;
}

.fifty {
  width: 230px;
  margin: 0 10px 0 0;
  float: left;
}

#varianten { margin: 0 0 15px 0; padding: 0; }
#varianten img { margin: 0 10px 0 0; padding: 0; }

/** TABELLEN **/

table.products      { width: 500px; float: left; margin: 0; padding: 0; }
table.products td   { margin: 0; padding: 0 0 10px 0; }

table.legende, table.legendeau, table.legendein, table.legendege, table.legendevo { width: 250px; float: left; margin: 0 0 0 10px; padding: 0; }
table.legendeau td.leg1 { width: 45px; margin: 0; padding: 0 0 10px 0; color: #369; font-weight: bold; }
table.legendein td.leg1 { width: 45px; margin: 0; padding: 0 0 10px 0; color: #900; font-weight: bold; }
table.legendege td.leg1 { width: 45px; margin: 0; padding: 0 0 10px 0; color: #963; font-weight: bold; }
table.legendevo td.leg1 { width: 45px; margin: 0; padding: 0 0 10px 0; color: #699; font-weight: bold; }

/************************** Sonderfälle *************************/

.productspecial {
  float: left;
  width: 330px; height: 145px;
  margin: 10px 0 0 0; padding: 0;
}

div.product_small {
  width: 165px; height: 185px;
  margin: 0 3px 0 0;
  padding: 2px 3px 10px 2px;
  border: 1px solid #ccc;
  float: left;
}
div.product_big {
  width: 690px;
  margin: 5px 0 0 0;
  padding: 2px 3px 2px 2px;
  border: 1px solid #ccc;
  float: left;
}

div.product_small h3, div.product_big h3           { background: #efefef; color: #000; font-family: times, serif, verdana; font-size: 10.5pt; font-weight: bold; line-height: 130%; height: 15pt; margin: 2px 0 2px 0; padding-left: 1px;}
div.product_small p.image, div.product_big p.image { text-align: center; }
div.product_small p.info, div.product_big p.info   { text-align: right; }

.product_high {
  margin: 25px 0 0 0;
  padding: 0;
}



/************************** FOOTER *************************/
#foot {
  clear: both;
  background: #fff url(../img/layout/containerbg.gif);
  width: 880px; height: 10px;
  text-align: right;
  color: #666;
  font-size: 7pt;
}
#foot a { font-size: 7pt; }
#footinside { position: relative; top: 11px; right: 25px;}

#footline {
  background: url(../img/layout/footlinebg.gif) repeat-x 0px 0px;
  width: 100%; height: 80px;
  clear: both;
  overflow: hidden;
}
#footlineemotion {
  background: #efefef url(../img/layout/footlineemotion.gif) no-repeat;
  width: 880px; height: 80px;
  text-align: right;
  margin: 0 auto;
}
#footlineemotion span {
  text-align: right;
  color: #666;
  font-size: 7pt;
  position: relative; top: 45px; right: 70px;
}
#footlineemotion span a { font-size: 7pt; }

/*********************** ARCHIV ************************/

.error {
  margin-left: 0px;
}

#login {
  margin: 0px 0px 0px 0px;
}

#editor {
  margin-left: 0px;
}

#contact {
  width: 455px;
  margin-left: 0px;
  margin-top: 0px;
}

#back {
  float: left;
  width: 100%;
  text-align:right;
  margin: 5px 0 15px 0;
}

/** ENDE **/