/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Stylesheet fiotel Webseite 
Autor: Oliver Raiss - IQ-optimize Software AG

Aufbau: 1. Kalibrierung

        2. Allgemeine Styles
            2.1. Hyperlinks
            
        3. Grundgerüst
            3.1 Navi oben
            3.2 Strukturen
            
        4. Sonstige Styles
            4.2 Tabellen
        
Farbwerte:  gelb: #fbba00
            blau: #00aed8
            dunkel grau (logo): #04111a
            mittel grau (font) #687076
            hell grau (unten) #e6e6e6
            hell grau (linien) #f2f3f3

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

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

* { padding: 0; margin: 0; }

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

p { margin-top: 0.6em; }

ol li { margin-left: 3em; }

ul li { margin-left: 2em; }

img { border:0; }

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

html { height: 101%; }

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

.clearing {
  clear: both; 
}

hr,
.hr2,
.hr3 {
  border: 0;
  background-color: #fff;
  margin: 20px 0;
  border-bottom: 2px dotted #f2f3f3;
}

.hr2 {
  background-color: #e6e6e6;
}

.hr3 {
	visibility: hidden;
}

h1 {
  font-size: 135%;
  color: #fbba00;
}

h1 sup {
  font-size: 60%;
  color: #fbba00;
}

h2,
h2.seo {
  font-size: 120%;
  color: #fbba00;
}

h2.seo {
  margin: 5px 0 0 1px;
}

h3,
h3.seo {
  font-size: 110%;
  color: #04111a;
}

h3.seo {
  color: #687076;
  font-weight: normal;
  margin: 5px 0 0 0;
  font-size: 110%;
}

h4 {
  font-size: 100%;
  color: #687076;
}

h5,
h5 a {
  font-size: 80%;
  letter-spacing: 1px;
  font-weight: normal;
  color: #aaa;
  display: inline;
}

.klein {
  font-size: 75%;
}

/*  2.1. Hyperlinks  
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    a {
      text-decoration: none;
      color: #687076;
      outline: none;
    }
    
    .link a,
    .pfeil a { 
      text-decoration: none;
      border-bottom: 1px dotted #00aed8;  
      color: #687076;
      outline: none;  
    }
    
    .link a:hover,
    .pfeil a:hover, 
    .link a:focus,
    .pfeil a:focus { border-bottom: 1px dotted #687076; color: #00aed8;  } 
    .link a:active,
    .pfeil a:active { 
      background-color: #00aed8;
      border-bottom: 1px dotted #fff;
      color: white;   
    }
    
    .pfeil a  { 
      background: url(../images2/pfeil_blau.gif) no-repeat center left;
      padding-left: 12px;
      padding-bottom: 1px;
    }
    
    .pfeil {
      margin-bottom: 0.6em;
    }
    
    .pfeil a:active { 
      background: #00aed8 url(../images2/pfeil_weiss.gif) no-repeat center left;
      color: white;  
    }
    
    a.seo {
    	/* border-bottom: 1px dotted #00aed8;  */
    }

    
.liste {
  background: url(../images2/pfeil.gif) no-repeat center left;
  padding: 0 0 2px 20px; 
  font-size: 110%;
  font-weight: bold;
  vertical-align: top
}

ul {
  margin: 3px 0 10px 0px;
}
li {
  color: #00aed8;
  margin-top:7px;
}
li span {
  color: #687076;
}

.input-text,
.input-textarea{
  border: 1px solid #fbba00;
	background-color: #f2f3f3;
	height: 20px;
  font-size: 130%;
  letter-spacing: 1px;
  padding: 0 0 3px 5px;
  width: 150px;
}

.input-textarea{
	height: 130px;
  width: 350px;
}
.eingerueckt {
  margin: 10px 0 0 10px;
  
}


/*  3. Grundgeruest  
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#kopfbereich {
  background: url(../images2/start-bg.jpg) repeat-x top left;
}

#kopfbereich2 {
  background: url(../images2/kopf_bg.jpg) repeat-x top left;
}

  #kopf-links {
    background: url(../images2/start-links.jpg) no-repeat top right;
    width: 50%;
    height: 517px;
    
  }
  
  #kopf-rechts {
    background: url(../images2/start-rechts.jpg) no-repeat top left;
    width: 50%;
    height: 517px;
  }

    /*  3.1. Navi oben  
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    #oben-navi-bg {
      background: url(../images2/navi/bg.gif) repeat-x top left;
      margin-top: 4px;
    }
    
    #oben-navi {
      width: 970px;
      height: 41px;
      margin: 0 auto;
    }
     
    #oben-navi span {
      display:none;
    }
    
    #oben-navi a {
      display: block;
      background: url(../images2/navi/navi.gif) no-repeat top left;
      height: 41px; 
    }
    
        #navi1 a:link, #navi1 a:visited, #navi1 a:active{ background-position:0px 0px; width: 74px; float: left;}
        #navi1 a:hover, #navi1 a:focus, #navi1_aktiv a { background-position: 0px -41px; width: 74px; float: left;}
        
        #navi2 a:link, #navi2 a:visited, #navi2 a:active{ background-position:-74px 0px; width: 123px; float: left;}
        #navi2 a:hover, #navi2 a:focus, #navi2_aktiv a { background-position: -74px -41px; width: 123px; float: left;}
        
        #navi3 a:link, #navi3 a:visited, #navi3 a:active{ background-position:-197px 0px; width: 109px; float: left;}
        #navi3 a:hover, #navi3 a:focus, #navi3_aktiv a { background-position: -197px -41px; width: 109px; float: left;}
        
        #navi4 a:link, #navi4 a:visited, #navi4 a:active{ background-position:-306px 0px; width: 154px; float: left;}
        #navi4 a:hover, #navi4 a:focus, #navi4_aktiv a { background-position: -306px -41px; width: 154px; float: left;}
        
        #navi5 a:link, #navi5 a:visited, #navi5 a:active{ background-position:-460px 0px; width: 203px; float: left;}
        #navi5 a:hover, #navi5 a:focus, #navi5_aktiv a { background-position: -460px -41px; width: 203px; float: left;}
        
        #navi6 a:link, #navi6 a:visited, #navi6 a:active{ background-position:-663px 0px; width: 176px; float: left;}
        #navi6 a:hover, #navi6 a:focus, #navi6_aktiv a { background-position: -663px -41px; width: 176px; float: left;}
        
        #navi7 a:link, #navi7 a:visited, #navi7 a:active{ background-position:-839px 0px; width: 131px; float: left;}
        #navi7 a:hover, #navi7 a:focus, #navi7_aktiv a { background-position: -839px -41px; width: 131px; float: left;}

#contentbereich {
  width: 940px;
  margin: 30px auto;
  padding: 0 15px 30px 15px;
  border-left: 5px dotted #f2f3f3;
  border-right: 5px dotted #f2f3f3;
  line-height: 1.6em;
  min-height: 350px;
}

    /*  3.2. Strukturen  
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    #startseite #content-links,
    #struktur1 #content-links,
    #struktur1_wide #content-links,
    #bestellen #content-links {
      float: left;
      width: 612px;
      border-right: 5px dotted #f2f3f3;
      padding: 10px 15px 0 0;
    }
    
    #struktur1 #content-links {
      width: 680px;
    }
    
    #bestellen #content-links {
      width: 900px;
      border-right: 0;
    }
    
    #startseite #content-rechts,
    #struktur1 #content-rechts,
    #struktur1_wide #content-rechts {
      float: left;
      padding: 10px 0 0 15px;
      width: 290px;
    }
    
    #struktur1 #content-rechts {
      width: 222px;
    }
    
    #bestellen #content-rechts {
      display: none;
    }

#unten {
  background-color: #e6e6e6;
  height: 300px;
}

  #unten .naviunten {
    font-size: 80%;
    letter-spacing: 1px;
  } 
  
  #unten .naviunten a {
    border: 0;
  }


#unten-content {
  width: 970px;
  margin: 0 auto;
  padding: 5px 0;
}

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

.handybox1,
.handybox2 {
  float: left;
  width: 420px;
  height: 190px;
  margin: 0 15px 15px 0;
  padding: 6px;
  background-color: #f2f3f3;
  border: 1px solid #687076;
}

.handybox2 {
  margin-right: 0;
}

.handybox1 .img,
.handybox2 .img,
.handydetail {
  border: 1px solid #687076;
  margin-right: 8px;
  margin-bottom: 70px;
  padding: 4px;
  background-color: #fff;  
}

.handydetail {
  margin-right: 15px; 
}

    /*  4.1. Tabellen 
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/    
    .tarife,
    .punkte {
      width: 100%;
      border-spacing: 2px;
      border-collapse: collapse; 
    }
    
    .punkte {
    	margin: 0 0 10px 0;
      border: 1px solid #e2ebf1;
      font-size: 0.8em;
    }
    
        .tarife th,
        .punkte th {
          background-color: #ffc100;
          color: #fff;
          padding: 4px;
          border: 1px solid #fff;
          text-align: left;
        }
        
        .tarife th,
        .punkte th {
        	padding: 0 5px;
          border: 1px solid #e2ebf1;
        }
        
        .tarife td,
        .punkte td {
          background-color: #fff;
          color: #687076;
          padding: 4px;
          border-bottom: 1px solid #e2ebf1;
        }
        
        .tarife td,
        .punkte td {
          padding: 0 5px;
        }
        
        .tarife td.white,
        .punkte td.white{
		    	height:5px;
		    	background: #fff;
		    	padding: 0;
		    	border-bottom: 0px solid #e2ebf1;
		    }
        
     
    /*  4.2. Warenkorb 
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    
    #float6_table_clear{
    	width: 100%;
    	font-size: 120%;
    	margin: 0px 0 0 0; 		/*auch in IE CSS ändern*/
    }
    
    #float6_table{
    	width: 100%;
    	font-size: 100%;
    	margin: 0px 0 0 0; 		/*auch in IE CSS ändern*/
    }
    
    #float6_table th.hg{
    	background: #fbba00 url(/images/landingpage/th_blau.gif) repeat-y;
    }
    
    #float6_table th,
    #float6_table th.one,
    #float6_table th.month{
    	background: #fbba00;
    	padding: 3px;
    	color: #fff;
    	font-weight:bold;
    }
    
    #float6_table th.one,
    #float6_table th.month{
    	background: #fbba00;
    	color: #fff;
    }
    
    #float6_table th.month,
    #float6_table th.monthprice{
    	background: #fbba00;
    	height: 10px;
    }
    
    #float6_table th.monthprice{
    	text-align:right;
    }
    
    #float6_table th span{
    	font-weight:normal;
    	font-size: 100%;
    	display:block;
    }
    
    #float6_table th em{
    	font-weight:normal;
    }
    
    #float6_table th.einmalig,
    #float6_table th.monatlich{
    	width:90px;
    	vertical-align:bottom;
    	text-align:right;
    }
    
    #float6_table th.aendern{
    	width:250px;
    }
    
    #float6_table td,
    #float6_table .ohne td{
    	padding: 3px 3px 3px 3px;
    	background: #fff;
    	border-bottom: 1px solid #e2ebf1;
    	font-size: 100%;
    	color: #687076;
    }
    
    #float6_table_clear td{
    	padding: 0px 0 0 0;
    	background: #fff;
    	border-bottom: 0px solid #e2ebf1;
    	font-size: 100%;
    	color: #687076;
    }
    
    #float6_table.ohne td{
    	border-bottom: 0px solid #e2ebf1;
    }
    
    #float6_table td.white{
    	height:5px;
    	background: #fff;
    	padding: 0;
    }
    
    #float6_table td.grey{
    	background: #e6e6e6;
    	color: #333333;
    	
    }
    
    #float6_table td.border{
    	text-align:right;
    	padding: 3px 5px 0;
    }
    
    #float6_table td.bordergrey{
    	text-align:right;
    	padding: 3px 5px 0;
      background: #e6e6e6;
    	color: #333333;
    }
    
    
    
    #float6_table td ul{
    	font-weight:bold;
    }
    
    #float6_table td span{
    	font-size: 100%;
    	color:#888;
    	display:block;
    	padding: 1px 0;
    }
    
    #float6_table td span em{
    
    }
    
    #float6_table ol{
    	font-size: 100%;
    	color:#fff;
    	font-weight:normal;
    	padding: 15px 0 0 0;
    }
    
    .dropdown,
    .auswahl{
    	font-size: 0.86em;
    	color:#687076;
    }
    
    .auswahl{
    	font-size: 100%;
    }
    
    .knopf{
    	font-size: 100%;
    	color:#687076;
    }
    
    /*links*/
    
    #navi_headline dl,
    #float1 dl,
    #float2 dl,
    #subnavi dl,
    #infos dl,
    .warenkorb dl,
    .warenkorb_leer dl,
    #float7 .content dl,
    #float8 dl,
    #float10 dl {
    	padding: 7px 0 0 0;
    }
    
    .content dl,
    .content_detail dl,
    .content_detail_bt dl {
    	padding: 10px 0 0 0;
    }
    
    .content_detail dl {
    	float:left;
    }
    
    #float6_table td dl {
    	padding: 2px 0 0 0;
    }
    
    #float6_table th dl {
    	vertical-align:bottom;
    }
    
    
    #navi_headline dl em,
    #float1 dl em,
    #float2 dl em,
    .content dl em,
    .content_detail dl em,
    .content_detail_bt dl em,
    #subnavi dl em,
    #infos dl em,
    .warenkorb dl em,
    .warenkorb_leer dl em,
    #float7 .content dl em,
    #float8 dl em,
    #float10 dl em {
    	font-weight:bold;
    	font-size: 100%;
    }
    
    
    #navi_headline dl em a,
    #float1 dl em a,
    #float2 dl em a,
    .content dl em a,
    .content_detail dl em a,
    .content_detail_bt dl em a,
    #subnavi dl em a,
    #infos dl em a,
    .warenkorb dl em a,
    .warenkorb_leer dl em a,
    #float6_table td dl em a,
    #float6_table th dl em a,
    #float7 .content dl em a,
    #float8 dl em a,
    #float10 dl em a {
    	color: #69abe5;
    	text-decoration: none;
    }
    
    #float6_table td dl em a,
    #float6_table th dl em a{
    	font-size: 100%;
    }
    
    
    #float6_table th dl em,
    #float6_table th dl em a{
    	color: #fff;
    	padding: 0;
    	vertical-align:bottom;
    }
    
    #navi_headline dl em a:hover,
    #float1 dl em a:hover,
    #float2 dl em a:hover,
    .content dl em a:hover,
    .content_detail dl em a:hover,
    .content_detail_bt dl em a:hover,
    #subnavi dl em a:hover,
    #infos dl em a:hover,
    .warenkorb dl em a:hover,
    .warenkorb_leer dl em a:hover,
    #float6_table td dl em a:hover,
    #float6_table th dl em a:hover,
    #float7 .content dl em a:hover,
    #float8 dl em a:hover,
    #float10 dl em a:hover  {
    	text-decoration: underline;
    }
    
    #navi_box em a:hover,
    #navi_box2 em a:hover {
    	text-decoration: none;
    }
    
    #navi_headline dl i,
    #float1 dl i,
    #float2 dl i,
    .content dl i,
    .content_detail dl i,
    .content_detail_bt dl i,
    #subnavi dl i,
    #infos dl i,
    .warenkorb dl i,
    .warenkorb_leer dl i,
    #float6_table td dl i,
    #float6_table th dl i,
    #float7 .content dl i,
    #float8 dl i,
    #float10 dl i {
    	padding: 0 0 0 5px;
    }
    
    #float8 dl span,
    .content dl span,
    .content_detail dl span,
    .content_detail_bt dl span{
    	padding: 0 0 0 20px;
    }
    
    #float6 .headline {
    	padding: 0px 0 5px 1px;
    	margin: 0 0 0 3px;
    	border-bottom: 1px solid #fbba00;
    	font-size: 100%;
    	font-weight:bold;
    }
    
    #float3 .headline {
    	margin: 0px 0 0px 2px;
    }
    
    #float10 .headline {
    	margin: 10px 0 0px 0px;				/*Bei Änderung der 10px an '#float10 .details ol' margin-top wert denken*/
    	border-bottom: 0px;
    }
    
    #float7 .headline,
    #float2 .headline {
    	padding: 25px 0 7px 0px;
    	border-bottom: 0px;
    }
    
    #float3 .headline span,
    #float4 .headline span,
    #float5 .headline span,
    #float6 .headline span,
    #float7 .headline span{
    	color: #fbba00;
      font-size: 120%;
    }
    
    #AuswahlCall {
    	margin: 0;
    	padding: 0;
    	background-color: #555555;
    }
    
.tdw {
	background:#ffffff;
    padding-left: 5px;
}

.tdgelb1 {
	background:#FFC100;
    padding-left: 5px;
}