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

Aufbau: 1. Kalibrierung
        2. Allgemeine Styles
            2.1. Hyperlinks
            
        3. Grundgerüst
            3.1. Kopf
            3.2. Mitte 
            3.3. Personen
            3.4. Unten
            
        4. Sonstige Styles
            4.1. Tabellen
        
Farbwerte:  rot: #e2001a
            blau: #28569f
            dunkel grau (font): #707173
            grau (linien): #c6c7c8
            hell grau (verlauf) #e2e3e3

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

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

* { padding: 0; margin: 0; }

h3, p { margin-bottom: 1.3em; }

li { margin-left: 2em; }

img { border:0; }

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

html { height: 101%; }

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

h2 { 
  font-size: 150%; 
  color: #e2001a;
  font-weight: normal;
  margin-top: -2px;
  padding-left: 3px;
  background: #fff url(../images/mitte/ueberschrift-linie.gif) no-repeat bottom left;
  height: 27px;
}

h3 { 
  font-size: 110%;
  color: #28569f;
  font-weight: bold;
}

h4 { 
  font-size: 100%;
  color: #28569f;
  font-weight: bold;
}

h5 { 
  font-size: 110%;
  color: #fff;
  font-weight: bold;
  margin-bottom: 10px;
}

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

.clearing { clear: both; }

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

sup {
  font-size: 80%;
}

.input-text,
.input-text2,
.input-select,
.input-select2 {
  background-color:#f5f5f5;
  color: #454545; 
  border:1px solid #9c9e9f;
  height: 16px;
  font-size: 110%;
  letter-spacing: 1px;
  padding: 2px 2px 2px 3px;
  width: 170px;
  margin: 0 5px 5px 0;
}

.input-select {
  height: 25px;
}

.input-select2 {
  height: 128px;
  font-size: 120%;
  width: 216px;
  margin: -3px;
  padding: 5px;
  display:inline; overflow:hidden;
}

.seldiv {
  height: 105px;
  width: 180px;
  border-style: solid;
  border-width: 5px;
  border-color: #ffffff #ffffff #ffffff #ffffff;
  letter-spacing: 2px;
   overflow:hidden;
}

.input-text2 {
  font-size: 90%;
  letter-spacing: 0;
  padding: 2px 1px 2px 1px;
}

.unchecked,
.checked {
  height:21px;
  width:21px;
  cursor:pointer;
  cursor:hand;
  padding: 3px;
}

.unchecked {
  background: url(../images/chk_off.gif) no-repeat top left;
}
.checked {
  background: url(../images/chk_on.gif) no-repeat top left;
}

/*.unselected{background-image:url(../rdo_off.png)}
.selected{background-image:url(../rdo_on.png)}*/


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

    /*  2.1. Hyperlinks  
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    a { 
      text-decoration: none; 
      color: #9e9e9e;
      outline: none;
    }
    
    a span {
      color: #e2001a;
    }
     
    a:hover, 
    a:focus { border: 0; color: #e2001a; } 
    
    .pfeil a  { 
      background: url(../images/pfeil_rot.gif) no-repeat center right;
      padding-right: 8px;
      padding-bottom: 2px;
    }
    
    .pfeil a:active { 
      background: #df252b url(../images/pfeil_weiss.gif) no-repeat center right;
      color: white;  
    }
    
    .pdf,
    .druck,
    .web,
    .mail,
    .save {
      height: 20px;
    }
    
    .pdf a,
    .druck a,
    .web a,
    .mail a,
    .save a {
      background: url(../images/pdf.gif) no-repeat center left;
      padding: 2px 0 2px 20px;
    }
    
    .pdf a:active,
    .druck a:active,
    .web a:active,
    .mail a:active,
    .save a:active { 
      background: #df252b url(../images/pdf.gif) no-repeat center left;
      color: white;  
    }
    
    .druck a {
      background: url(../images/print.gif) no-repeat center left;
    }
    
    .druck a:active {
      background: #df252b url(../images/print.gif) no-repeat center left;
    }
    
    .pdf a {
      background: url(../images/pdf.gif) no-repeat center left;
    }
    
    .pdf a:active {
      background: #df252b url(../images/pdf.gif) no-repeat center left;
    }
    
    .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;
    }   
    
    

/*  3. Grungerüst  
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ 

    /*  3.1. Kopf  
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    #kopf { border-bottom: 1px solid #c6c7c8; }
    
    #kopf-bg {
      margin: 0 auto;
      background: #fff url(../images/kopf/bg.gif) no-repeat top left;
      width: 959px;
      height: 69px;
    }
    
    #kopf h1 {
      float: left;
      border-left: 1px solid #c6c7c8;
      border-right: 1px solid #c6c7c8;
      padding: 14px 21px 0px 21px;
      width: 171px;
      height: 55px;
    }
    
    #navi { float: left; height: 55px;}
    
    #kopf p {
      float: left;
      border-left: 1px solid #fff;
      border-right: 1px solid #c6c7c8;
      padding: 27px 25px 0 24px; 
      height: 42px;
    }
    
    #navi a { 
      text-decoration: none; 
      color: #707173;
      outline: none;
    }
     
    #navi a:hover, 
    #navi a:focus { border: 0; color: #e2001a;}
    
#verlauf-oben,
#verlauf-oben-start {
  background: #fff url(../images/mitte/verlauf-oben.gif) repeat-x top left;
  height: 37px;
}

#verlauf-oben-start {
  height: 123px;
}

#verlauf-oben-start-content {
  margin: 0 auto;
  width: 959px;
}

    /*  3.2. Mitte  
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    #mitte {
      background: #fff url(../images/mitte/verlauf-unten.gif) repeat-x bottom left;
      border-bottom: 1px solid #fff;
      min-height: 640px;
    }

    #mitte-start {
      background: #fff url(../images/mitte/verlauf-unten.gif) repeat-x bottom left;
      border-bottom: 1px solid #fff;
      min-height: 503px;
    }

    #bestellen6 #mitte {
      background: #fff;
    }

    #content {
      margin: 0 auto;
      width: 959px;
      position: relative;
      min-height: 640px;
    }

    #content-start {
      /* background: #fff url(../images/startbild.jpg) no-repeat top left; */
      margin: 0 auto;
      width: 959px;
      position: relative;
      min-height: 730px;
    }

    #content-druck {
      margin-left: 20px;
      width: 700px;
      position: relative;
    }

    #box {
      width: 562px;
      background: #fff url(../images/box/bg.gif) no-repeat top left;
      border: 1px solid #c6c7c8;
      padding: 17px;
      margin-top: 33px;
      line-height: 1.5em;
    }

    .box2 {
      width: 274px;
      background: #fff url(../images/box/bg2.gif) no-repeat top left;
      border: 1px solid #c6c7c8;
      padding: 10px;
      margin-top: 33px;
      line-height: 1.5em;
      margin-right: 20px;
    }

    .boxfloat {
      float: left;
    }

    #tarifbutton {
      height: 65px;
      padding-top: 15px;
      width: 597px;
    }
    
    /*  3.3. Personen  
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    
    #person {
      position: absolute;
      bottom: 85px;
    }
    
    #person2 {
      position: absolute;
      top: 100px;
    }
	
	  #phonex-tarifuebersicht #person {
      background: url(../images/personen/tarif.gif) no-repeat bottom left;
      width: 254px;
      height: 558px;
      left: 670px; 
    }
    
	  #phonex-optionen #person {
      background: url(../images/personen/optionen.gif) no-repeat bottom left;
      width: 279px;
      height: 544px;
      left: 650px; 
    }
	
	  #phonex-servicepreise #person {
      background: url(../images/personen/servicepreise.gif) no-repeat bottom left;
      width: 290px;
      height: 573px;
      left: 650px; 
    }
	
    #phonex-servicewelt #person {
      background: url(../images/personen/servicewelt.gif) no-repeat bottom left;
      width: 283px;
      height: 569px;
      left: 650px; 
    }
		
	 #phonex-services #person {
      background: url(../images/personen/services.gif) no-repeat bottom left;
      width: 271px;
      height: 556px;
      left: 650px; 
    }
	
	  #phonex-presse #person,
    #phonex-presse-mitteilungen #person,
    #phonex-grafiken #person {
      background: url(../images/personen/presse.gif) no-repeat bottom left;
      width: 284px;
      height: 496px;
      left: 650px; 
    }
	
	  #phonex-haendlersuche #person {
      background: url(../images/personen/haendlersuche.gif) no-repeat bottom left;
      width: 276px;
      height: 476px;
      left: 650px; 
    }
    
    #bestellen1 #person2,
    #bestellen2 #person2,
    #bestellen3 #person2,
    #bestellen4 #person2,
    #bestellen5 #person2,
    #bestellen6 #person2,
    #identify #person2 {
      background: url(../images/personen/bestellen.gif) no-repeat bottom left;
      width: 312px;
      height: 299px;
      left: 650px; 
    }
   
    
    /*  3.4. Unten  
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    #unten {
      border-top: 1px solid #c6c7c8;
    }
    
    #conten-unten {
      position: relative;
      margin: 0 auto;
      width: 959px;
    }
    
    #copy {
      font-size: 70%;
      text-align: center;
      padding-top: 15px;
    }
    
    #naviunten {
      margin: 0 auto;
      font-size: 90%;
      position: absolute;
      left: 770px;
      top: 13px;
    }
    
    #facebook {
      margin: 0 auto;
      position: absolute;
      left: 30px;
      top: 13px;
    }
    
    #fussnoten {
      border-bottom: 1px solid #e2e3e3;
      padding-top: 30px;
      padding-bottom: 5px;
      margin-left: 260px;
      width: 600px;
    }
    
    #fussnoten a  { 
      background: url(../images/pfeil_rot.gif) no-repeat center right;
      padding-right: 8px;
      padding-bottom: 2px;
    }
    
    #fussnoten a:active { 
      background: #df252b url(../images/pfeil_weiss.gif) no-repeat center right;
      color: white;  
    }
    
    #fussnotendiv {
      font-size: 80%;
      line-height: 1.5em;
      padding-top: 15px;
      margin-left: 260px;
      width: 600px;
    }

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

.kasten-blau {
  position: absolute;
  top: 30px; 
  left: 0;
  background-color: #91a8cd;
  width: 195px;
  color: #fff;
  padding: 10px;
}

.kasten-blau2 {
  background-color: #91a8cd;
  width: 540px;
  color: #fff;
  padding: 10px;
}

.kasten-grau {
  position: absolute;
  top: 200px; 
  left: 0;
  border: 1px solid #e2e3e3;
  background-color: #f7f7f7;
  width: 193px;
  padding: 10px;
  filter:alpha(opacity=70); /* Internet Explorer */
  -moz-opacity: 0.70; /* Mozilla Browser */
  opacity: 0.70; /* Opera */
}

#handybundle1,
#handybundle2 {
  position: absolute;
  top: 25px; 
  left: 650px;
  width: 288px;
  height: 207px;
}

#handybundle2 {
  top: 253px; 
}

    /*  4.1. Tabellen 
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/    
    th {
      color: #28569f;
      font-weight: bold;
      text-align: left;
    }
    
    .suche {
      background-color: #d5d6d6;
      width: 100%;
      border-spacing: 1px;
      border-collapse: collapse; 
    }
    
        .suche th {
          background-color: #91a8cd;
          color: #ffffff;
          padding: 4px;
          border: 1px solid #d5d6d6;
        }
        
        .suche td {
          background-color: #fff;
          color: #000;
          padding: 4px;
          border: 1px solid #d5d6d6;
          font-size: 80%;
        }