/*
 Farben:
 hellbraun:   #A0867F
 noch heller: #CFC2BF
 weiss:        white
 dunkelbraun: #552519
 */
@charset "UTF-8";


body
{
  padding: 20px 0em 0em 1.5em;
  margin: 0em 0em 0em 0em;
  
  font-family: Verdana, Arial;
  font-size: 100%;
  background: white;
  border: none;
}

#header
{
  border: none;
  background-repeat: no-repeat;
  background-position: top left;
  width: 962px;
  height: 161px;
}
#header div {
  border: none;
  padding: 0em;
  margin: 0em;
  width: 962px;
  height: 161px;
  background: url('./_bilder/kopfbalken.png') repeat-x top;
}
/* FOR IE: doesn't support png, use gif instead */
* html #header div {  background-image: url('./_bilder/kopfbalken.gif');}

#header img
{
  border: none;
}

/* BEGIN hauptnavigation */
ul#hauptnavigation{
  list-style-type: none;
  padding: 0em;
  margin: 0em 0em 0em 13em;
  background: #A0867F;
  height: 1.9em;
  width: 47.1em;
  border-bottom: 12px solid #552519;
}
/* FOR IE: explicit moving som pix' to top */
* html ul#hauptnavigation{  margin-top: -33px; }

ul#hauptnavigation li{
  float: left;
  margin: 0em;
  padding: 0em;
  text-align: center;
  
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}
ul#hauptnavigation li.aktiv
{
  border-bottom: 1px solid #552519;
}
ul#hauptnavigation li a
{
  line-height: 1.5em;
  font-size: 100%;
  display: block;
  width: 11em;
  height: 1.5em;
  padding: 0.2em;
  margin: 0em;  
}

ul#hauptnavigation li a:link,
ul#hauptnavigation li a:visited
{
  background: #A0867F;
  color: white;
  text-decoration: none;
}


ul#hauptnavigation li.aktiv a:link,
ul#hauptnavigation li.aktiv a:visited,
ul#hauptnavigation li a:active,
ul#hauptnavigation li a:visited:hover,
ul#hauptnavigation li a:hover,
ul#hauptnavigation li a:focus
{
  background: #552519;
  color: white;
  text-decoration: none;
}


  

/* END hauptnavigation */

/* BEGIN box_links */
#box_links
{
  position: absolute;
  left: 1.5em;
  top: 182px; /* aufgrund des logos und dem padding von body */
  
  width: 13em;
  
  padding: 0em;
  margin: 1.9em 0em 0em 0em;  /* 1.9em nach oben, da die Hauptnavigation ein em-h�he hat */
  
  font-family: Arial, Verdana;
  border-right: 1px solid #552519;
  
}

#box_links a:link,
#box_links a:visited
{
  font-size: 80%;
  color: #552519;
  text-decoration: none;
  font-weight: normal;
  
}


#box_links a:link.aktiv,
#box_links a:visited.aktiv,
#box_links a:active,
#box_links a:visited:hover,
#box_links a:hover,
#box_links a:focus
{
  font-size: 80%;
  color: #552519;
  text-decoration: none;
  font-weight: bold;
}


/* BEGIN aktiver Punkt */
  a#aktiverPunkt
  {
    display: block;

    font-family: Arial, Verdana;
    
    background-color: #552519;
    
    height: 2em;
    line-height: 2em;

    padding: 0.2em 0em 0.2em 1em;
    margin: 0em;
        
  }
  /* Der IE macht rechts einen pixel zu wenig... */
  * html a#aktiverPunkt{  margin-right: -1px; }

  a:link#aktiverPunkt,
  a:visited#aktiverPunkt
  {
    color: white;
    letter-spacing: 1px;
  }

  #box_links a:active#aktiverPunkt,
  #box_links a:visited:hover#aktiverPunkt,
  #box_links a:hover#aktiverPunkt,
  #box_links a:focus#aktiverPunkt
  {
    color: white;
    font-weight: normal;
  }
/* END aktiver Punkt */


  /* BEGIN detailnavigation_stufe1 */
  ul#detailnavigation_stufe1
  {
  
    list-style-image: url("./_bilder/spglstrch.gif");
    list-style-position: outside;
    padding: 0em;
    margin: 1em 0em 0em 0em;

  }

  ul#detailnavigation_stufe1 li
  {
    margin: 0em 0em 0em 1em;
    padding: 0em;
    text-align: left;

  }
  ul#detailnavigation_stufe1 li a
  {
    width: 15em; /* da font-size kleiner */
    display: block;
  }
  /* END detailnavigation_stufe1 */
  
  
  
  /* BEGIN detailnavigation_stufe2 */
  ul.detailnavigation_stufe2
  {
    padding: 0em;
    margin: 0em -1em 0em 0em;
    width: 9em;
  }

  ul.detailnavigation_stufe2 li
  {
    margin: 0em 0em 0em 1em;
    padding: 0em;
    text-align: left;

  }
  ul.detailnavigation_stufe2 li a
  {
    max-width: 13.7em; /* This information is *not* for IE - 	intentional */
  }
  /* END detailnavigation_stufe2 */


  /* BEGIN rechtliches */
  ul#rechtliches
  {
    list-style-type: none;
    color: #552519;
    padding: 0em;
    margin: 1em 0em 2em 0em;
  }
  * html ul#rechtliches{ margin: 1em 0em 0em 0em; }

  ul#rechtliches li
  {
    list-style-type: none;
    margin: 0em;
    padding: 0em;
    text-align: left;
  }
  
  ul#rechtliches li a:link,
  ul#rechtliches li a:visited
  {
    text-decoration: underline;
    margin: 0em;
    padding: 0em;
  }
  /* END rechtliches */


  /* BEGIN kontakt */
  #kontakt
  {
    margin: 8em 0em 0em 0em;
    padding: 0em;
    font-size: 70%;
    font-family: Verdana, Arial;
    color: #A0867F;
  }

  #kontakt strong
  {
    color: #552519;
  }
  /* END kontakt */

/* END box_links */





/* BEGIN content */
#content {
  width: 50.1em;
  
  color: #552519;
  padding: 0.5em;
  margin: 0em 0em 0em 15em;
  line-height: 1.4em;
  
  font-size: 14px;
}
* html #content
{
  padding-top: 2em;
}

h1
{
  color: #552519;
  font-weight: bold;
  font-size: 180%;
}
h2
{
  color: #552519;
  font-weight: bold;
  font-size: 140%;
}
h3
{
  color: #A0867F;
  font-size: 120%;
}
h4
{
  color: #A0867F;
  font-size: 110%;
}
h5
{
  color: #A0867F;
  font-weight: bold;
}
h6
{
  color: #A0867F;
  font-weight: bold;
}
strong
{
  font-weight: bold;
  color: #552519;
}
em {
  font-style: italic;
  font-weight: normal;
}
#content ul {
  display: block;
  
  /* float der Bullets auf Liste beschränken */
  width: auto;
  height: auto;
  overflow: hidden; /* die Bullets floaten */
  
  list-style-image: url( './_bilder/ul-li.png' );
}
#content ul.blockliste {
  display: block;
  list-style-image: none;
  list-style-type: none;
}
#content ul.blockliste li {
  display: block;
  float: left;
  width: 11.2em;
  height: 11.2em;
  margin: 0.2em;
  padding: 0em;
  text-align: center;
  vertical-align: middle;
}
a * {
  cursor: pointer;
}
#content a img {
  border: 1px solid #552519;
}

#content a:link {
  color: #552519; /* IE kann inherit wieder nicht */
  text-decoration: underline;
}
#content a:visited {
  color: #552519;
  font-style: italic;
}

#content a:active,
#content a:visited:hover,
#content a:hover,
#content a:focus {
  color: #552519;
  text-decoration: none;
}

/* Links ohne Klasse sind extern */
#content a {
  padding-right: 12px;
  background: url('./_bilder/link_extern.png') right no-repeat;
}
#content a.intern,
#content .auflistung_kaffeemaschinen a,
#content .dateiliste a,
#content .bildliste a {
  padding-right: 0em;
  background: none;
}


#content ol.dateiliste {
  list-style-image: url( './_bilder/download.png' );
}

/**** Bilder
 * Normales Verhalten ist eine Bilderspalte links neben dem Text
 */
#content .bildliste {
  list-style-type: none;
  
  display: block;
  float: left;
  margin: 0em 0.5em 0.5em 0em; /* hängt ja links oben */
  padding: 0em;
}

#content .bildliste img {
  border: 1px solid #552519;
}

/**** Galerie
 * Bilder werden unter dem Text als Galerie aufgelistet.
 */
 
/* erbt auch von #content ul */
#content #galerie {
  /* die Galerie muss den Container offen halten */
  display: block;
  overflow: hidden; 
  width: auto;
  height: auto;
}
#content #galerie .bildliste {
  float: none;
  
  margin: 1em 0em;
  width: auto;
  height: auto;
  overflow: hidden;
}
#content #galerie .bildliste li {
  display: block;
  float: left;
  margin: 0.2em;
  padding: 0em;
  
  /* die Boxen brauchen alle die gleiche Größe für
   * einen vernünftigen Fluss */
  width: 320px;
  height: 320px;
  overflow: hidden;
}

#content #galerie .bildliste img {
  display: block;
  margin: auto;
}


/* END content */



/* BEGIN Tables */
table
{
  border: none;
}

thead th
{
  border-bottom: 1px solid #A0867F;
}

thead,
thead td
{
  font-weight: bold;
}
/* END Tables */




/* BEGIN Kaffeemaschine */
#content #interesse {
  display: block;
  clear: both; /* soll unter den Bildern stehen */
  width: 30em;  
  padding: 0.5em;
  margin: 1em 0em;
  
  text-align: center;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
  
  color: white;
  background: url('_bilder/buttonverlauf.png') top repeat-x #552519;
  
  /* CSS 3 */
  border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  -khtml-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
  -o-border-radius: 0.5em;
}
#content #interesse:hover,
#content #interesse:focus {
  text-decoration: underline;
}


/* BEGIN Interessefomular */
#interesseformular form
{
  clear: both;
  display: block;
  padding: 2em 0em 0em 0em;
  margin: 0em;
}
#interesseformular form fieldset legend
{
  color: #552519;
}

#interesseformular form .inputarea
{
  margin: 0.5em 0em 0.5em 0em;
  padding: 0em 0.5em 0em 0.5em;
}

#interesseformular form .checkliste
{
  clear: both;
  padding: 0em 0em 0em 15em;
  margin: 0em;
  border: none;
}

#interesseformular form .checkliste input
{
  border: none;
}

#interesseformular form input,
#interesseformular form textarea
{
  border: 1px solid #552519;
  margin: 0.1em;
}
#interesseformular form textarea
{
  width: 20em;
}

#interesseformular input.button
{
  color: white;
  background-color: #552519;
  padding: 0.2em;
  margin: 0.5em;
  border: 1px solid black;
  letter-spacing: 1px;
}


#interesseformular img
{
  float: left;
  border: none;
  margin: 0em;
  padding: 0.5em;
}
#interesseformular a,
#interesseformular a:link#kaffeemaschine_vorschau,
#interesseformular a:visited#kaffeemaschine_vorschau
{
  clear: both;
  display: block;
  margin: 1em;
  min-height: 8em;
  
  background-color: #CFC2BF;
  border: 1px solid #552519;
  padding: 0.5em;
  
  text-decoration: none;
  font-style: normal;
  background-image: none;
}
* html #interesseformular a:link#kaffeemaschine_vorschau,
* html #interesseformular a:visited#kaffeemaschine_vorschau
{ height: 8em; }

#interesseformular form fieldset .inputarea #interesseformular_telefon  #interesseformular_telefon_land
{
  width: 2em;
}
/* END Interessefomular */





/* BEGIN berater */
#berater form
{
  padding: 0em;
  margin: 0em 0em 3em 0em;
}
#berater form .inputarea
{
  margin: 0.5em 0em 0.5em 0em;
  padding: 0em 0.5em 0em 0.5em;
}
#berater form label
{
  float: left;
  display: block;
  width: 12em;
  margin: 0em;
  padding: 0em;
  font-style: italic;
}
#berater form select
{
  width: 15em;
  margin: 0em;
  padding: 0em;
}
#berater form input.button
{
  margin: 0em 0em 0em 1em;
  padding: 0.2em;
  width: 16em;
  color: white;
  font-family: Arial, Verdana;
  background-color: #552519;
  border: none;
}



#content ul.auflistung_kaffeemaschinen
{
  list-style-type: none;
  list-style-image: none;
  margin: 0em 0em 1em -0.5em;
  padding: 0em;
}

#content .auflistung_kaffeemaschinen li
{
  list-style-type: none;
  float: left;
  text-align: center;
  padding: 0em;
  border-right: 1px solid white;
  
}
#content .auflistung_kaffeemaschinen a
{
  display: block;
  
  width: 11em;
  height: 16.2em;
  
  margin: 0.45em;
  padding: 0.2em;
  
  border: 1px solid #552519;
  background-color: #CFC2BF;
  background-image: none;
}


#content .auflistung_kaffeemaschinen .bildliste
{
  display: block;
  width: 11em;
  text-align: center;
}

#content .auflistung_kaffeemaschinen a:link img,
#content .auflistung_kaffeemaschinen a:visited img
{
  border: 1px solid white;
  
  width: 10em;
}

#content .auflistung_kaffeemaschinen a:hover img,
#content .auflistung_kaffeemaschinen a:active img,
#content .auflistung_kaffeemaschinen a:visited:hover img
{
  border: none;
  
  width: 10em;
}

#content .auflistung_kaffeemaschinen span.titel
{
  display: block;
  height: 3em;
  text-align: left;
}
/* END berater */














/*** BEGIN Stile fuer CMF-Formulare ***/

  fieldset {
    border: 1px solid #A0867F;
    margin: 1em;
    pading: 0em;
  }

  .fehler
  {
  color: darkred;
  font-weight:bold;  
  border: 1px solid red;
  background-color: #f1edec;
  }

  .inputzeile,
  .inputzeile1,
  .inputzeile_fehler,
  .inputzeile1_fehler
  {
  display: block;
  clear: both;
  margin-bottom: 10px;
  padding: 2px;
  }
  .inputzeile_fehler,
  .inputzeile1_fehler
  {
  background-color: darkred;
  color: white;
  }
  .inputzeile
  {
  background-color: transparent;
  }
  .inputzeile1
  {
  background-color: #f1edec;
  }

  .inputbezeichner,
  .inputbezeichner_pflicht,
  .inputbezeichner_pflichta
   {
  clear: both;
  display: block;
  float: left;
  width: 15em;
  padding-left: 1em;
  }
  .inputbezeichner_pflicht,
  .inputbezeichner_pflichta
  {
  font-weight: bold;
  }
  .inputbezeichner_pflichta
  {
  font-style: italic;
  }

  .inputfehler
  {
  display: block;
  color: white;
  font-weight: normal;
  }

  .inputhilfe
  {
  display: block;
  clear: both;
  font-size: 80%;
  color: grey;
  }

  .inputarea
  {
  margin-left: 16em;
  }

  input.input
  {
  width: 20em;
  }
  textarea.input
  {
  width: 20em;
  height: 7em;
  }

  input.input,
  textarea.input,
  input.input_dateititel,
  input.input_dateipos,
  input.input_dateiupload,
  input.input_pw_alt,
  input.input_pw_neu1,
  input.input_pw_neu2,
  input.input_telland,
  input.input_telnummer,
  input.input_telort
  {
  border: 1px solid grey;
  }
  input.input:hover,
  textarea.input:hover,
  input.input_dateititel:hover,
  input.input_dateipos:hover,
  input.input_dateiupload:hover,
  input.input_pw_alt:hover,
  input.input_pw_neu1:hover,
  input.input_pw_neu2:hover,
  input.input_telland:hover,
  input.input_telnummer:hover,
  input.input_telort:hover
  {
  border-color: #CFC2BF;
  }
/*** END Stile fuer CMF-Formulare ***/