/*  =========================================================
Stylesheet
Datei:  bildschirm.css
Datum:  26.08.2009
========================================================== */


/* ====================================
    Styles für die  Layoutbereiche
   ==================================== */

/* ====================================
   Header  - Layout
==================================== */


 #header img{
    height: 100px;
    width: 72px;
    float: left;
    margin: 0 10px 0 0;
    padding: 2px;
    border: 1px solid #ccc;
  }

 #header div.logo{
    float: left;
    position: relative;
    top: 0px;
    left: 95px;
    width: 480px;
    height: 61px;
    background: url(../images/stefan_lieser_logo.jpg) no-repeat top left;

   }

 #header p.chat{
   position: relative;
   float: right;
   width: 150px;
   height: 60px;
   }

 #header p.chat img{
    width: 125px;
    height: 50px;
    border: none;
   }


/* ====================================
    Styles für den  linken Bereich
==================================== */


/* Block für Texte - links   */

  #left_content div.textblock{
  border-bottom: 1px solid #ccc;
  padding-bottom: 7px;
 }
 /*#left_content div#terms{border-bottom: none;}*/
 /*  Überschrift mit span für Sonderzeichen  */

  #left_content div.textblock h5{
   color: #ff9a13;
   font-size: 117%;
   padding-bottom: 0px;
   margin: 0px 12px 9px 12px;
   letter-spacing: 0.02em;
   border-bottom: 1px dashed #7faf1b;
  }

  #left_content div.textblock span{
   font-size: 160%;
  }

/*  Allgemein p   */

 #left_content div.textblock p{
   font-size: 100%;
   color: gray;
   margin: 0px 12px 3px 12px;
   font-size: 90%;
   letter-spacing: 0.01em;
  }

 /* Listenformatierung  */

 #left_content div.textblock ul{
   list-style-type: square;
   font-size: 90%;
   margin: 0px 12px 5px 28px;
   }

  /* Listenformatierung Termine */

#left_content iframe.terms {
    list-style-type: none;
    margin: 8px 10px 5px 10px;
    padding: 3px 4px 3px 6px;
    letter-spacing: 0.01em;
    background: #f9f9f9;
    height: 1%;
    overflow: hidden;
   }


#left_content div.textblock ul.terms{
    list-style-type: none;
    margin: 8px 10px 5px 10px;
    padding: 3px 4px 3px 6px;
    letter-spacing: 0.01em;
    background: #f9f9f9;
    height: 1%;
    overflow: hidden;
   }

#left_content div.textblock ul.terms li{
    height: 16px;
  }

#left_content div.textblock ul.terms li strong{
    font-size: 100%;
    color: black;

   }

 #left_content div.textblock ul:hover.terms{
   background: #eee;
   }
#left_content div.textblock ul.terms li strong,
#left_content div.textblock ul.terms li em,
#left_content div.textblock ul.terms li span,
#left_content div.textblock ul.terms li a{ line-height: 16px;}

/* Linkformatierung  */

 #left_content div.textblock li a,
 #left_content div.textblock a{
   color: #acacac;
   letter-spacing: 0.02em;
   font-size: 100%;
 }


  #left_content div.textblock ul.terms li a{
    font-size: 104%;
    color: #CC7C0F;
  }

 #left_content div.textblock ul.terms li a span{
   padding-right: 5px;
   font-size: 120%;
   color: gray;
  }

 #left_content div.textblock ul.terms a:hover,
 #left_content div.textblock a:hover{
   color: #7faf1b;
  }

/* ====================================
    Styles für den  rechten Bereich
==================================== */

 /*  Abstände für Köln-Bild  */

  #right_content p.pic{
   margin-left: 18px;
   padding-top: 15px;
  }

  #right_content p.pic img{
   width: 738px; height: 178px;
   border: 1px solid #582f13;
  }

 /* Block für Texte   */

 #textbereich{            /* abstände in ordnung */
   margin: 20px 0 25px 18px;
   width: 740px; height: auto;
  }

 /* Einzelblöcke für Texte   */

 #textbereich div.textblock {
   position: relative;
   overflow: hidden;
   height: 1%;
  }

/*  Abstände       */

 #textbereich p{
  margin: 9px 0px 15px 0px;
  font-size: 102%;
  color: #582F13;
  line-height: 1.5;
 }

 #textbereich .border{
   border-bottom: 1px dashed gray;
   padding-bottom: 10px !important;
  }
/*  =Überschriften   */

  #textbereich h4{
   margin-bottom: 15px;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   font-size: 125%;
   font-weight: lighter;
   background: #fafafa;
   color: #ff9a13;
   border-bottom: 1px dashed gray;
   padding: 9px 0 6px 11px;
  }

 #textbereich h4:hover{
   background: #eee;
 }

 #textbereich h5,
 #textbereich h6{
   font-size: 120%;
   margin: 9px 0 9px 0px;
   color: #ff9a13;
  }

 #textbereich h6{
  font-size: 110%;
  }

  /* =address-formatierung Impressum-Seite*/

   #textbereich address,
   #textbereich address a{
     font-size: 102%;
     color: #582F13;
     line-height: 1.5;
     letter-spacing: 0.02em;
   }

   #textbereich address.last{
    margin-bottom: 10px;
   }

   #textbereich address a{
     color: #CC7C0F;
   }
  #textbereich address a:hover{
     color: #7faf1b;
    }

   #textbereich address span{
    font-size: 105%;
    font-style: normal;
    font-weight: bold;
    padding-right: 5px;
   }

   #textbereich address span.mail,
   #textbereich address span.mobil{
    padding-right: 22px;
   }


  /*  =Haftungskasten   */

   #textbereich div.haftung{
     position: relative;
     left: 140px;
     top: 15px;
     margin-bottom: 25px;
     padding: 8px;
     width: 450px;
     overflow: hidden;
     border: 2px solid #582F13;
   }

   #textbereich div:hover.haftung{border-style: dashed}

   #textbereich div.haftung h3{
    color: #ff9a13;
    letter-spacing: 0.04em;
   }

   #textbereich div.haftung p{
     margin: 0;
    }

  /* =Listenformatierung   */

  #textbereich div.textblock ul{
   margin: 5px 0 5px 38px;
   list-style-type: square;
  }

  #textbereich ul li{
  padding: 0 0 5px 0;
   font-size: 102%;
   color: gray;
   }

  #textbereich ul li a{
    color: gray;
   }

 /*  =Linkformatierung   */

 #textbereich p a{
  color: gray;
  font-size: 100%;
 }

 #textbereich ul li a:hover,
 #textbereich p a:hover{
  color: #7faf1b;
  }

 /***********************************************
   =Bilderformatierung seiten berater und tainer
 *************************************************/

 /*  Bilder links und p`s rechts  */

  #textbereich p.bild_l{
   float:left;
   margin-right: 15px;
   height: 150px;
   width: 220px;
   padding: 2px;
   border: 1px solid #ccc;
  }

  #textbereich p.bild_l img{
   height: 150px;
   width: 220px;
  }

 /* =text_r */

  #textbereich p.text_r,
  #textbereich div.text_r{
     float: left;
     position: relative;
     width: 470px;
   }

  #trainer #textbereich div.text_r ul,
  #trainer #textbereich div.text_r p{
    margin-bottom: 8px;
    margin-top: 8px;
    padding: 0;
  }

  #textbereich p.text_r{
   top: 15px;
   }

  /*** =distance ****/

  #trainer #textbereich div p.distance{
    margin-bottom: 15px;
  }

 /*** =distance ****/



 /*  Bilder rechts und p`s links  */

  #textbereich p.bild_r{
   float: right;
   margin-right: 10px;
   margin-left: 15px;
   height: 150px;
   width: 220px;
   padding: 2px;
   border: 1px solid #ccc;
  }

  #textbereich p.bild_r img{
   height: 150px;
   width: 220px;
  }

 /* =text_l*/

  #textbereich div.text_l{
   float: left;
   position: relative;
   width: 470px;
  }
  #textbereich div.text_l p{
    margin-bottom: 8px;
    margin-top: 8px;
  }

 /*  Bilder rechts-hoch und p`s links  */

  #textbereich p.bild_rh{
   float: right;
   position: relative;
   top: 20px;
   right: 20px;
   margin-left: 15px;
   margin-right: 15px;
   height: 220px;
   width: 150px;
   padding: 2px;
   border: 1px solid #ccc;
  }


  #textbereich p.bild_rh img{
   height: 220px;
   width: 150px;
  }

  /* =text_l*/

 #textbereich p.text_l{
     float: left;
     position: relative;
     width: 470px;
   }

 /*  Bilder unten  */

  #textbereich p.bild_down{
    float: left;
    position: relative;
    left: 280px;
    height: 150px;
    width: 220px;
    padding: 2px;
    border: 1px solid #ccc;
  }

 #textbereich p.bild_down img{
    height: 150px;
    width: 220px;
   }

 /*  Hover-Effekte für Bilder  */

   #textbereich p:hover.bild_l,
   #textbereich p:hover.bild_r,
   #textbereich p:hover.bild_rh,
   #textbereich p:hover.bild_down,
   #autor #textbereich p:hover.dotnet{
     border-color: black
    }

 /*  CCD-Banner  */

  #textbereich div.text_banner{
   float: left;
   position: relative;
   width: 330px;
   height: 120px;
 }

 #textbereich p.banner{
   position: absolute;
   top: 100px;
   left: 220px;
   width: 400px;
   height: 65px;
   z-index: 6;
  }
  #textbereich p.banner img{
   width: 400px;
   height: 51px;
   border: none;
  }



 /***********************************************
   =Bild-Formatierung seite autor
 *************************************************/

  #autor #textbereich p.dotnet{
   position: absolute;
   top: 52px;
   right: 0px;
   width: 132px;
   height: 182px;
   padding: 2px;
   border: 1px solid #ccc;
   z-index: 4;
  }
 #autor #textbereich p.dotnet img{
   width: 130px;
   height: 180px;
   border: 1px solid #ccc;
 }
 #autor #textbereich p.breit{
   width: 380px;
   font-size: 110%;
  }

/*============ =vortrag + autor links =======*/
 #vortrag #textbereich ul{
  list-style-type: none;
 }

 #vortrag #textbereich li{
  color: #582f13;
 }

  #vortrag #textbereich li strong{
   font-size: 110%;
  }

  #vortrag #textbereich li span{
   font-size: 120%;
   color: #7faf1b;
   padding-right: 5px;
  }

 #vortrag #textbereich a,
 #autor #textbereich p a{
   color: #CC7C0F;
 }



 #vortrag #textbereich a:hover,
 #autor #textbereich p a:hover{
   color: #7faf1b;
 }

 /*  =Kontaktformatierung   */

 #textbereich p.contact{
  margin-bottom: 20px;
  height: 29px;
 }

 #textbereich p.contact a,
 #autor #textbereich p.contact a{
   font-size: 90%;
   line-height: 23px;
   color: #7faf1b;
  }

 #textbereich p.contact a:hover,
 #autor #textbereich p.contact a:hover{
   color: #99cc00;
  }

 #textbereich p.contact span.mail{
   float: left;
   display: block;
   height: 18px;
   width: 18px;
   padding: 0px 2px 0 0;
   background: url(../images/email.gif) no-repeat;
  }


/*  Footer   */

  #footer p{
   position: relative;
   font-size: 80%;
   text-align: center;
  }

/* =======================================
   E N D E   bildschirm.css
   ======================================= */