/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Stylesheet der Drillisch Telecom GmbH 
Autor: Oliver Raiss - IQ-optimize Software AG

Aufbau: 1. Kalibrierung
        2. Allgemeine Styles
            2.1. Hyperlinks
            
        3. Grundgerüst
            3.0 Sitemap
            3.1 Navi oben
            3.2 Navi links
            3.3 Struktur Startseite
            3.4 Struktur1
            3.5 Struktur2
            3.6 Struktur3
        4. Sonstige Styles
            4.1 Boxen
            4.2 Tabellen
            4.3 Handys
            4.4 Formulare
        
Farbwerte:  rot: #df252b
            gelb: #ffc100
            dunkel grau (font): #454545
            dunkel grau (hyperlinks) #9c9e9f
            mittel grau (linien) #d5d6d6
            hell grau (boxen/navi) #eeeeee
            hell grau (verlauf) #f5f5f5

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/*  1. Kalibrierung  
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

* { padding: 0; margin: 0; }

h3, ul, ol { margin-bottom: 0.6em; }

li { margin-left: 2em; }

img { border:0; }

/*  2. Allgemeine Styles  
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

html { height: 101%; }

body {
  background-color: #eeeeee;
  color: #454545;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: small;
}

h2 { 
  font-size: 160%; 
  color: #df252b;
  font-weight: normal;
  padding-top: 17px;
}
h3 { 
  font-size: 100%;
  font-weight: bold;
  padding: 2px 0;
}
h4 { 
  font-size: 110%;
  font-weight: bold;
  padding-bottom: 2px;
  border-bottom: 1px solid #d5d6d6; 
}
h5 {
  font-size: 100%; 
  color: #df252b;
}

.hr {
  background-color: #eeeeee;
  height: 1px;
  border: 0;
  margin: 7px 0;
  }

.klein {
  font-size: 80%;
}

    
    /*  2.1. Hyperlinks  
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    a { 
      text-decoration: none; 
      color: #9c9e9f;
      outline: none;
    }
     
    a:hover, 
    a:focus { border: 0; color: #df252b; } 
    a:active { 
      background-color: #df252b;
      color: white;   
    }
    
    a:active img {
      background-color: #efefef;
    }
    
    .pfeil a,
    .pfeil2 a,
    .pfeil3 a  { 
      background: url(../images/pfeil_rot.gif) no-repeat center right;
      padding-right: 8px;
      padding-bottom: 1px;
    }
    
    .pfeil {
      margin-bottom: 0.6em;
    }
    
    .pfeil2 a {
      color: #454545;
    }
    
    .pfeil3 a {
      color: #fff;
      background: url(../images/pfeil_weiss.gif) no-repeat center right;
      font-weight: bold;
    }
    
    .pfeil a:active,
    .pfeil2 a:active,
    .pfeil3 a:active { 
      background: #df252b url(../images/pfeil_weiss.gif) no-repeat center right;
      color: white;  
    }
    
    .pdf,
    .web,
    .mail,
    .plus,
    .minus,
    .save {
      height: 20px;
    }
    
    .pdf a,
    .web a,
    .mail a,
    .plus a,
    .minus a,
    .save a {
      background: url(../images/pdf.gif) no-repeat center left;
      padding: 2px 0 2px 20px;
    }
    
    .pdf a:active,
    .web a:active,
    .mail a:active,
    .plus a:active,
    .minus a:active,
    .save a:active { 
      background: #df252b url(../images/pdf.gif) no-repeat center left;
      color: white;  
    }
    
    .web a {
      background: url(../images/web.gif) no-repeat center left;
    }
    
    .web a:active {
      background: #df252b url(../images/web.gif) no-repeat center left;
    }
    
    .mail a {
      background: url(../images/mail.gif) no-repeat center left;
    }
    
    .mail a:active {
      background: #df252b url(../images/mail.gif) no-repeat center left;
    }
    
    .save a {
      background: url(../images/save.gif) no-repeat center left;
    }
    
    .save a:active {
      background: #df252b url(../images/save.gif) no-repeat center left;
    }
    
    .plus a {
      background: url(../images/plus.gif) no-repeat center left;
      color: #454545;
    }
    
    .plus a:active {
      background: #df252b url(../images/plus2.gif) no-repeat center left;
    }
    
    .minus a {
      background: url(../images/minus.gif) no-repeat center left;
      color: #454545;
    }
    
    .minus a:active {
      background: #df252b url(../images/minus2.gif) no-repeat center left;
    }
       

.bilder {
  border: 1px solid #d5d6d6;
  margin: 3px 0 0 5px;
}

.bilder2 {
  border: 1px solid #d5d6d6;
  margin: 4px 10px 0 0;
}

.bilder-rechts {
  border: 1px solid #d5d6d6;
  margin: 18px 0 0 0;
}

ul, ol {
  margin: 3px 0 10px 10px;
}
li {
  color: #df252b;
}
li span {
  color: #454545;
}

.check li {
  margin-left:15px;
  color: #000;
  list-style:url(../images/Check.gif);
}

blockquote {
  margin: 5px 0 0 10px;
}

.netzbetreiberlogo {
  float: right; 
  margin-top:17px;
}

.clearing {
  clear: both; 
}

.input-text{
  background-color:#f5f5f5;
  color: #454545; 
  border:1px solid #9c9e9f;
  height: 16px;
  font-size: 125%;
  letter-spacing: 1px;
  padding: 2px 2px 2px 3px;
  width: 120px;
}

select {
  background-color:#f5f5f5;
  color: #454545;
  font-size: 115%;
  margin: 3px 0;
}

    
    
/*  3. Grungerüst  
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#rahmen {
  position: relative;
  background: #eeeeee url(../images/bg.gif) repeat-y top left;
  width: 964px;
  margin: 0 auto;
  font-size: 90%;
}

    /*  3.0. Sitemap  
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    #sitemapbg {
      z-index: 80;
      position: absolute;
      left: 4px;
      background-color: #fff;
      height: 98%;
      width: 950px;
      filter:alpha(opacity=60); /* Internet Explorer */
      -moz-opacity: 0.60; /* Mozilla Browser */
      opacity: 0.60; /* Opera */   
    }
    
    #sitemap-leer1 {
      height: 1px;
      background-color: #818181;
      margin: 0 4px;   
    }
    
    #sitemap-leer2 {
      height: 13px;
      background-color: #efefef;
      border-top: 1px solid #939495;
      margin: 0 4px;   
    }
    
    #sitemap {
      z-index: 99;
      position: absolute;
      top: 2px;
      left: 4px;
      filter:alpha(opacity=90); /* Internet Explorer */
      -moz-opacity: 0.90; /* Mozilla Browser */
      opacity: 0.90; /* Opera */   
    }
    
    #sitemap-auf {
      background-color: #9c9e9f;
      width: 946px;
      height: 400px;
      padding: 5px 5px;  
    }
    
    #sitemap-auf .sitemap-box,
    #sitemap-auf .sitemap-box2 {
      float: left;
      border-right: 1px solid #b2b4b5;
      padding: 0 15px;
      height: 380px;
      width: 157px;
    }
    
    #sitemap-auf .sitemap-box2 {
      border-right: 0;
    }
    
    #sitemap-auf .sitemap-box a,
    #sitemap-auf .sitemap-box2 a {
      color: #fff;
    }
    
    #sitemap-auf .sitemap-box hr,
    #sitemap-auf .sitemap-box2 hr {
      background-color: #b2b4b5;
      height: 1px;
      border: 0;
    }
    
        #sitemap-auf .sitemap-box ul,
        #sitemap-auf .sitemap-box ol,
        #sitemap-auf .sitemap-box2 ul,
        #sitemap-auf .sitemap-box2 ol {
          list-style-type: none;
          padding: 2px 15px 0px 15px;
          font-weight: bold;
          margin: 0;
        }
        
        #sitemap-auf .sitemap-box ul li,
        #sitemap-auf .sitemap-box2 ul li {
          padding: 10px 0 0 0;
          margin: 0;
        }
        
        #sitemap-auf .sitemap-box ol li,
        #sitemap-auf .sitemap-box2 ol li {
          padding: 2px 0 0 10px;;
          margin: 0;
          font-weight: normal;
        }
      
    
    #sitemap-zu,
    #sitemap-zu2 {
      background: #efefef url(../images/head/sitemap_bg.gif) repeat-x top left;
      width: 956px;
      height: 12px;
    }
    
    #sitemap-zu2 {
      background: url(../images/head/sitemap_bg.gif) repeat-x top left;
    }
    
        #sitemap-zu span,
        #sitemap-zu2 span { 
          margin-left: 431px; 
          height: 12px;
        }
        


#kopfbereich {
  z-index: 1;
  position: relative;
  background: #eeeeee url(../images/head/bg.gif) no-repeat top left;
  width: 956px;
  height: 86px;
  margin: 0 4px;
}
    #kopfbereich p {
      position: absolute;
      top: 3px;
      right: 8px;
      margin-bottom: 0;
    }
    
    /*  3.1. Navi oben  
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    #oben-navi {
      position: absolute;
      top: 43px;
      left: 194px;
      width: 421px;
      height: 43px;
    }
     
    #oben-navi span {
      display:none;
    }
    
    #navi-startseite #oben-navi a,
    #navi-vorlagen #oben-navi a,
    #navi-tarife #oben-navi a,
    #navi-infowelt #oben-navi a,
    #navi-service #oben-navi a {
      display: block;
      background: url(../images/navi/start.gif) no-repeat top left;
      height: 43px; 
    }
    
    #navi-tarife #oben-navi a { background: url(../images/navi/tarife.gif) no-repeat top left; }
    #navi-infowelt #oben-navi a { background: url(../images/navi/infowelt.gif) no-repeat top left; }
    #navi-service #oben-navi a { background: url(../images/navi/service.gif) no-repeat top left; }
    
        /*  3.1.1. Startseite  
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        #navi-startseite #navi1 a:link, #navi-startseite #navi1 a:visited, #navi-startseite #navi1 a:active, #navi-vorlagen #navi1 a:link, #navi-vorlagen #navi1 a:visited, #navi-vorlagen #navi1 a:active{ background-position:0px 0px; width: 170px; float: left;}
        #navi-startseite #navi1 a:hover, #navi-startseite #navi1 a:focus, #navi-vorlagen #navi1 a:hover, #navi-vorlagen #navi1 a:focus { background-position: 0px -43px; width: 170px; float: left;}
        
        #navi-startseite #navi2 a:link, #navi-startseite #navi2 a:visited, #navi-startseite #navi2 a:active, #navi-vorlagen #navi2 a:link, #navi-vorlagen #navi2 a:visited, #navi-vorlagen #navi2 a:active{ background-position:-171px 0px; width: 98px; float: left;}
        #navi-startseite #navi2 a:hover, #navi-startseite #navi2 a:focus, #navi-vorlagen #navi2 a:hover, #navi-vorlagen #navi2 a:focus { background-position: -171px -43px; width: 98px; float: left;}
        
        #navi-startseite #navi3 a:link, #navi-startseite #navi3 a:visited, #navi-startseite #navi3 a:active, #navi-vorlagen #navi3 a:link, #navi-vorlagen #navi3 a:visited, #navi-vorlagen #navi3 a:active{ background-position:-270px 0px; width: 153px; float: left;}
        #navi-startseite #navi3 a:hover, #navi-startseite #navi3 a:focus, #navi-vorlagen #navi3 a:hover, #navi-vorlagen #navi3 a:focus { background-position: -270px -43px; width: 153px; float: left;}

        /*  3.1.1. Tarife  
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        #navi-tarife #navi1 a:link, #navi-tarife #navi1 a:visited, #navi-tarife #navi1 a:active{ background-position:0px 0px; width: 172px; float: left;}
        #navi-tarife #navi1 a:hover, #navi-tarife #navi1 a:focus { background-position: 0px 0px; width: 172px; float: left;}
        
        #navi-tarife #navi2 a:link, #navi-tarife #navi2 a:visited, #navi-tarife #navi2 a:active{ background-position:-173px 0px; width: 96px; float: left;}
        #navi-tarife #navi2 a:hover, #navi-tarife #navi2 a:focus { background-position: -173px -43px; width: 96px; float: left;}
        
        #navi-tarife #navi3 a:link, #navi-tarife #navi3 a:visited, #navi-tarife #navi3 a:active{ background-position:-270px 0px; width: 153px; float: left;}
        #navi-tarife #navi3 a:hover, #navi-tarife #navi3 a:focus { background-position: -270px -43px; width: 153px; float: left;}

        /*  3.1.1. Infowelt  
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        #navi-infowelt #navi1 a:link, #navi-infowelt #navi1 a:visited, #navi-infowelt #navi1 a:active{ background-position:0px 0px; width: 167px; float: left;}
        #navi-infowelt #navi1 a:hover, #navi-infowelt #navi1 a:focus { background-position: 0px -43px; width: 167px; float: left;}
        
        #navi-infowelt #navi2 a:link, #navi-infowelt #navi2 a:visited, #navi-infowelt #navi2 a:active{ background-position:-168px 0px; width: 104px; float: left;}
        #navi-infowelt #navi2 a:hover, #navi-infowelt #navi2 a:focus { background-position: -168px 0px; width: 104px; float: left;}
        
        #navi-infowelt #navi3 a:link, #navi-infowelt #navi3 a:visited, #navi-infowelt #navi3 a:active{ background-position:-273px 0px; width: 150px; float: left;}
        #navi-infowelt #navi3 a:hover, #navi-infowelt #navi3 a:focus { background-position: -273px -43px; width: 150px; float: left;}
        
        /*  3.1.1. Kundenservice  
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        #navi-service #navi1 a:link, #navi-service #navi1 a:visited, #navi-service #navi1 a:active{ background-position:0px 0px; width: 170px; float: left;}
        #navi-service #navi1 a:hover, #navi-service #navi1 a:focus { background-position: 0px -43px; width: 170px; float: left;}
        
        #navi-service #navi2 a:link, #navi-service #navi2 a:visited, #navi-service #navi2 a:active{ background-position:-171px 0px; width: 95px; float: left;}
        #navi-service #navi2 a:hover, #navi-service #navi2 a:focus { background-position: -171px -43px; width: 95px; float: left;}
        
        #navi-service #navi3 a:link, #navi-service #navi3 a:visited, #navi-service #navi3 a:active{ background-position:-267px 0px; width: 156px; float: left;}
        #navi-service #navi3 a:hover, #navi-service #navi3 a:focus { background-position: -267px 0px; width: 156px; float: left;}

 
#strich {
  border-top: 2px solid #df252b;
  margin: 7px 12px 1px 12px;
  padding: 0;
}

#linkerbereich {
  float: left;
  margin-left: 12px;
  width: 187px; 
}    

#mitte {
  float: right;
  width: 763px;
}


    /*  3.2. Navi links 
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    
    #navibereich {
      width: 190px;
      margin-bottom: 11px; 
      padding: 0px;
    }
    
    #navibereich ul,
    #navibereich ol {
      margin: 0px;
    }
        #navibereich ul li,
        #navibereich ol li {
          position: relative;
          font-size: 90%;
          list-style-type: none;
          background-color: #eeeeee;
          border-top: 1px solid #ffffff;
          border-right: 1px solid #ffffff;
          border-bottom: 1px solid #d5d6d6;
          width: 177px;
          height: 1.7em;
          padding: 5px 0 0 11px;
          margin: 0px;
        }
        
        #navibereich .leer {
          border-top: 0;
          color: #eeeeee;
        }
        #navibereich ol li {
          background: #fff url(../images/navi/ebene2_bg.gif) repeat-y top left;
          width: 172px;
          padding: 5px 0 0 16px;
        }
        
        #navibereich a {
          color: #454545;
          display: block; 
          border: 0px; 
        }
        #navibereich a:hover, 
        #navibereich a:focus { color: #df252b; border: 0px;} 
        #navibereich a:active { color: #df252b; border: 0px; background-color: transparent;} 
        
        #navibereich li p {
          position: absolute; 
          top: 9px; 
          right: 10px;
          margin: 0px;
          width: 3px;
          height: 6px;
          background: url(../images/pfeil_grau.gif) no-repeat top left;
        }
        #navibereich ol span li {
          background: #fff url(../images/leer.gif);
          width: 173px;
          font-weight: bold;
        }
        
        #navibereich ol span li p {
          background: url(../images/pfeil_rot.gif) no-repeat top left;
          padding-right: 1px;
        }
        
    
    /*  3.3. Startseite 
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    
    #startseite #contentbereich { 
      min-height: 500px;
      padding: 0 12px 11px 12px;
      line-height: 1.7em;
    }
    
    #startseite #rechterbereich {
      display: none;
    }
    
    /*  3.4. Struktur1 
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    
    #struktur1 #contentbereich { 
      float: left;
      width: 534px;
      min-height: 500px;
      padding: 0 16px 11px 16px;
      line-height: 1.7em;
      border-left: 1px solid #d5d6d6;
      border-right: 1px solid #d5d6d6;
    }
    
    #struktur1 #rechterbereich {
      float: right; 
      width: 187px;
      padding-left: 1px;
      margin-right: 7px;
    }
    
    /*  3.5. Struktur2 
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    #struktur2 #contentbereich { 
      float: left;
      min-height: 500px;
      padding: 0 16px 11px 16px;
      line-height: 1.7em;
      border-left: 1px solid #d5d6d6;
    }       
              
    #struktur2 #rechterbereich {
      display: none;
    }
    
    /*  3.6. Struktur3 
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    
    #struktur3 #contentbereich { 
      float: left;
      width: 529px;
      min-height: 500px;
      padding: 0 16px 11px 16px;
      line-height: 1.7em;
      border-left: 1px solid #d5d6d6;
    }
    
    #struktur3 #rechterbereich {
      float: right; 
      width: 187px;
      padding-left: 1px;
      margin-right: 12px;
    }



#unten {
  clear: both;
  background: #eeeeee url(../images/unten.gif) no-repeat top left;
  width: 964px;
  margin: 0 auto;
  padding-bottom: 30px;
}
    #unten p {
      text-align: center;
      font-size: 80%;
	  letter-spacing: 0.5px;
      padding-top: 25px;
    }

#fussnotendiv {
  background-color: #eeeeee;
  width: 930px;
  margin: 0 auto;
  padding-bottom: 30px;
  font-size: 80%;
  color: #9c9e9f;
  line-height: 1.5em;
}  


/*  4. Sonstige Styles  
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    /*  4.1. Boxen 
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    .box-g,
    .box-w {
      background-color: #eeeeee;
      width: 170px;
      padding: 6px;
      font-size: 90%;
      border-bottom: 1px solid #d5d6d6;
      margin-bottom: 30px;
      line-height: 1.5em;
    }
    .box-w {
      background-color: #fff;
      border: 0;
    }
    
    .box-v1 {
      background: #fff url(../images/box-verlauf.gif) no-repeat bottom left;
      margin-bottom: 0px;
      width: 528px;
    }

    .box-v1-single {
      background: #fff url(../images/box-verlauf.gif) no-repeat bottom left;
      margin-bottom: 0px;
      width: 252px;
    }

    .box-v1-breit {
      background: #fff url(../images/box-verlauf-breit.gif) no-repeat bottom left;
      margin-bottom: 0px;
      width: 735px;
    }
	
	.box-v1-breit-einzeln {
      background: #fff url(../images/box-verlauf-breit-einzeln.gif) no-repeat bottom left;
      margin-bottom: 0px;
      width: 735px;
    }
    
    .box-v1-start {
      background: #fff url(../images/box-verlauf-start-1.jpg) no-repeat bottom left;
      margin-bottom: 0px;
      width: 939px;
    }
    
    .box-v2,
    .box-v3,
    .box-v2-breit,
    .box-v3-breit,
    .box-v2-start,
    .box-v3-start,
    .box-v4-start {
      width: 240px;
      padding: 6px;
      font-size: 90%;
      line-height: 1.3em;
      min-height: 150px;
    }
    
    .box-v2-breit,
    .box-v3-breit {
      width: 336px;
      min-height: 0px;
    }
    
    .box-v2-start,
    .box-v3-start,
    .box-v4-start {
      width: 285px;
      height: 190px;
      line-height: 1.7em;
    }
    
    .box-v3-start {
      margin-left: 25px;
    }
    
    .box-v2,
    .box-v2-breit,
    .box-v2-start,
    .box-v3-start {
      float: left; 
    }
    
    .box-v3,
    .box-v3-breit,
    .box-v4-start {
      float: right;
    }
        .box-g hr,
        .box-w hr,
        .box-v2 hr,
        .box-v3 hr,
        .box-v2-breit hr,
        .box-v3-breit hr,
        .box-v2-start hr,
        .box-v3-start hr,
        .box-v4-start hr {
          background-color: #fff;
          height: 1px;
          border: 0;
          margin-bottom: 4px; 
          margin-top: 0px;
        }
        
    .box-tarifuebersicht {
      float: left; 
      border-bottom: 1px solid #454545; 
      width: 155px; 
      padding: 5px; 
      margin: 5px;
    }

    /*  4.2. Tabellen 
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/    
    .tarife,
    .suche {
      background-color: #fff;
      width: 100%;
      border-spacing: 1px;
      border-collapse: collapse; 
    }
    
    .suche {
      background-color: #d5d6d6;
    }
    
        .tarife th {
          background-color: #df252b;
          color: #fff;
          padding: 4px;
          border-right: 4px solid #fff;
        }
        
        .suche th {
          background-color: #eeeeee;
          color: #454545;
          padding: 4px;
          border: 1px solid #d5d6d6;
        }
        
        .tarife td,
        .suche td {
          background-color: #fff;
          color: #000;
          padding: 4px;
          border-bottom: 1px solid #454545;
          border-right: 4px solid #fff;
        }
        
        .suche td {
         font-size: 80%;
         border: 1px solid #d5d6d6;
        }
        
        .suchetarife td {
          font-size: 110%;
          background-color: #fff;
          color: #000;
          padding: 3px;
          border: 0;
          border-bottom: 1px solid #454545;
          border-right: 3px solid #fff;
        }
        
        .suche .verlauf {
         background: #fff url(../images/suche-verlauf.gif) repeat-x bottom left; 
        }
        
        .suche .hrlinie {
         border-bottom: 1px solid #d5d6d6;
         padding-bottom: 10px;
        }
        
        .tarife .grau,
        .suchetarife .grau {
          background-color: #f5f5f5;
        }
        .tarife .gelb,
        .suchetarife .gelb {
          background-color: #ffc100;
          font-weight: bold;
        }

    /*  4.3. Handys 
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ 

    .handybox1,
    .handybox2 {
      float: left;
      width: 165px;
      height: 115px;
      margin: 0 8px 8px 0;
      padding: 4px;
      background-color: #f5f5f5;
      border: 1px solid #d5d6d6;
    }
    
    .handybox2 {
      margin-right: 0;
    }
    
    .handybox1 img,
    .handybox2 img,
    .handydetail {
      border: 1px solid #d5d6d6;
      margin-right: 5px;
      padding: 4px;
      background-color: #fff;  
    }
    
    .handydetail {
      margin-right: 15px; 
    }
    
    
    /*  4.4. Formulare 
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    .form-td, .form-td2, .form-td3, .form-td4 {
    	float: left;
    }
    
    .form-td {
    	padding: 0 20px 5px 0;
    }
    
    .form-td2 {
    	padding: 0 0 5px 0;
    }
    
    .form-td3 {
    	padding: 0 10px 0 0;
    }
    
    .form-td4 {
    	padding: 0;
    }
    
    .form-name {
      padding: 7px 0 0 7px; 
    }
    
    .form-eingabe {
      padding: 0 0 0 7px; 
    }
    
    .radio {
      margin-top: 2px;
      vertical-align: middle;
    }
    
    
    .form-clear {
    	clear: both;
    }
    
    .form-td select, .form-td4 select {
    	height: 22px; 
    	font-size: 1.1em;
    }
    
    fieldset,
    fieldset .fieldsetklein {
    	padding: 0px 20px 10px 15px;
    	border: 1px solid #eeeeee;
    	width: 695px;
    }
    
    fieldset .fieldsetklein {
    	width: 450px;
    }
    
    label {
    	font-weight: normal;
    	color: #454545;
    }
    
    legend {
    	font-weight: bold;
      color: #df252b;
    }

    #errortxt {
        font-weight: bold;
        /*color: #003D86;*/

        color: #FFF;
        background-color: #DF252B;
    }

    #errorbox {
        font-weight: bold;
        color: #DF252B;
        background-color: #FFEBE3;
        padding: 3px;
        border: solid 1px;
    }

    #successbox {
        /*font-weight: bold;*/
        color: #454545;
        background-color: #EEE;
        padding: 3px;
        border: solid 1px #D5D6D6;
    }