/* ===================================
Stylesheet der Webseite www.claudiavey.de 
 
Stand: 
Datei: styles.css 
Datum: 18. November 2009
Autor: Claudia Vey

Aufbau: 1. Kalibrierung
        2. Allgemeine Styles
        3. Styles fır Layoutbereiche
        4. Sonstige Styles 
=================================== */

/* ==================================
   1. Kalibrierung
   =============================== */
 /* Kalibrierung: Abstaende auf Null und restaurieren */ 

/* ======================= */ 

* { 
  padding: 0; 
  margin: 0; 
} 

h2, p, ol { 
  margin-bottom: 10px; 
} 

ol ul { 
  margin-bottom: 0; 
} 

  
/* ==================================
   2. Allgemeine Styles 
   =============================== */   
   
html {
  height: 101%;
}



body,div,p,h1,h2,h3,h4,ul{
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

body, div, ul {
  font-size: 10pt;
  /*text-align: center; */
  color: #7A0202; /* rot */
}

li{
  text-align: left; 
  list-style-type: disc;
  list-style-position:inside;
}


body { 
  background-color: #dce0d3; }/* grau */ 


h1 {font-size: 140%;} 
h2 {font-size: 120%;}
h3 {font-size: 95%; color: #7A0202; } /* rot */
h4 {font-size: 85%;}


.small {font-size: 12px;}
.mini {	font-size: 11px;}
.minimini {font-size: 10px;}

b { color: #7A0202;}

/* ================
   Hyperlinks  
   ================  */  

a {
  font-size: 11pt;
  text-decoration: none; 
  font-weight : bold;
  color:#7a0202; 
}
a:link {
  color:#7a0202
} /* nicht besuchte Links */

a:visited {	
  color:#666666
} /* besuchte Links */

a:hover, 
a:focus {
  color: #dce0d3;	
  background-color : #374611;
}

a:active {
  color:#DEC3A9
}

/* =====================
   Klassen und IDs    
   =====================*/

.skiplink {
      position: absolute; 
      top: -5000px; 
      left: -5000px; 
      width: 0px;
      height: 0px; 
      overflow: hidden; 
      display: inline; 
}    

.header {
      float: left;
      position: relative; 
      color: #D4A717; /* orange */
      background-color: #ffffff;
      text-align: left; 
      width: 400px;
      left: 0px; 
      top: 0px; 
      padding: 5px 5px 10px 5px; /* oben - rechts - unten - links */ 
      display: inline;
} 
    
.navright {
      float: right;
      text-align: right;
      position: relative; 
      margin: 5px 21px 0px 0px; /* oben - rechts - unten - links */ 
      list-style-type: none; /* keine Aufzählungszeichen */
      display: inline;
} 

#scjp {
      float: right;
      text-align: right;
      position: relative; 
      margin: 0px 21px 0px 0px; /* oben - rechts - unten - links */ 
      display: inline;
}


.textzeile  {
      float: left; 
      width: 520px;
      height: 213px;
      color: #7A0202; /* rot */
      padding: 5px 5px;
      border: none;
      margin-bottom: 15px; 
      display: inline;
}
   
.textzeile a {
      display: block;
      font-weight: bold;
}

.textzeile h3 {
      clear: both;
      display: block;
      font-weight: bold;
}

.textzeilelang  {
      float: left; 
      width: 520px;
      height: 650px;
      color: #7A0202; /* rot */
      padding: 5px 5px;
      border: none;
      margin-bottom: 15px; 
      display: inline;
}  

.textzeilelmittel {
      float: left; 
      width: 520px;
      height: 450px;
      color: #7A0202; /* rot */
      padding: 5px 5px;
      border: none;
      margin-bottom: 15px; 
      display: inline;
}  



.thematext {
      position: relative;
      float: left; 
      text-align: left;
      width: 220px;
      height: 213px;
      display: inline;
      padding: 5px 5px 10px 5px; /* oben - rechts - unten - links */ 
}


.themabild img{
      float: right; 
      width: 284px;  
      /*height: 213px;*/
      margin: 0px; 
      padding: 0px;
      border: none;
      display: inline;
}

.themapassfoto img{
      float: left; 
      width: 163px;  
      height: 213px;
      left: 0px;
      top: 0px;
      margin: 0px; 
      padding: 0px;
      border: 5px solid #d9d9d9; 
      display: block;
}

  .textbereich {
      clear: left; 
      position: relative;
      /*float: left; */
      background-color: #FFFFFF; 
      width: 750px;
      top: 25px; 
      padding: 10px 0px 0px 0px; /* oben - rechts - unten - links */ 
      background-position: right;
      background-image: url(bg_schatten3.gif);
      background-repeat: repeat-y;
    }  
    
    
  .schatten { 
      clear: both; 
      height: 25px;
      width: 739px;
      background-color: #dce0d3; /* grau */ 
      background-position: center bottom; 
      background-image:url(bg_schatten6.gif);
      background-repeat: repeat-x; 
    }  /*nur noch horizontal wiederholen */    

    .schatten .schattenrechtsunten {   
      position: absolute;    
      background-color: #dce0d3; 
      width: 11px;
      height: 25px;
      right: 0px;
      bottom: 0px;
      text-align: right;
      background-image: url(bg_schatten7.gif);
      background-repeat: no-repeat;   
    }
  
	
/* ==================================
   3. Styles fır Layoutbereiche 
   =============================== */   

    #wrapper { 
      min-width: 1105px;
      max-width: 3000px;
      float: left; 
      background-color: #dce0d3; /* grau */ 
      margin: 0px auto;
      display: inline;
    }
    
    
    #logo {
      float: left; 
      margin-left: 10px; 
      top: 0px;
      margin-bottom: 10px;
      padding: 0px 0px 10px 10px; /* oben - rechts - unten - links */ 
      border: 5px solid #d9d9d9; 
      width: 190px;
      height: 190px;
      display: inline;
    }
    
   #firmname h1{ 
      position: absolute; 
      float: right; 
      right: 10px;
      /*top: 38px;*/
      width: 490px;
      text-align: right;
      color: #D4A717; /* orange */
      padding: 5px 11px 0px 0px; /* oben - rechts - unten - links */ 
      display: inline;
    }
           
   #firmname h1 span {
      color: #7A0202;  /* rot */
    }     

    #navibereich {
      clear: both; 
      position: relative;
      background-color: #D2E27F; 
      color: #7A0202;  /* rot */
      height: 30px;
      left: 0px;
      bottom: 0px; 
      width: 750px;
      padding: 5px 0px 0px 0px; /* oben - rechts - unten - links */
      background-position: right;
      background-image: url(bg_schatten3.gif);
      background-repeat: repeat-y;
    }

     #navibereich h4 { 
      position: absolute; 
      text-align: left;
      background-color: #D2E27F; 
      bottom: 8px; 
      left: 5px; 
      margin-bottom: 0; 
    } /* horizontales Menü für die Seiten */
    
      #navibereich p {
      position: absolute; 
      text-align: center;
      background-color: #D2E27F; 
      bottom: 8px; 
      right: 25px; 
      top: 8px; 
    } /* rechtes Pfeil-Menü */
   
    #textspalte  {
      clear: left; 
      position: relative; 
      width: 530px;
      margin-right: 190px;
      padding: 0;
    }
    
    #thematexteinzeln {
      position: relative;
      float: left; 
      text-align: left; 
      width: 220px;
      display: inline;
    }
    
    
    #thematextright  {
      float: right; 
      text-align: left; 
      width: 284px;  
      top: 223px;
      padding: 5px 5px 10px 5px; /* oben - rechts - unten - links */ 
      display: inline;
    }
    

    #thematextright h1 {
      color: #D4A717; /* orange */
      padding: 5px 5px 10px 0px; /* oben - rechts - unten - links */ 
    }

    
    #textspalte .thematextcenter h2{
      clear: both; 
      padding: 5px 5px 10px 5px; /* oben - rechts - unten - links */ 
      bottom: 25px;
      left: 200px; 
      display: inline;
    }
    
    #textmenu {
      /*clear: left; */
      float: right; 
      text-align: right;
      display: inline;
      /*position: absolute; sonst wird textmenu im IE nicht angezeigt*/ 
      top: 25px; 
      color: #7A0202;  /* rot */
      /*right: 5px; */
      width: 200px; 
      display: inline;     
      /*padding: 0px 0px; 
      margin-bottom: 0; */
    }
  
    #fussbereich{
      float: left; 
      /*float: both; */
      position: relative;
      background-color: #D4A809; 
      width: 750px;
      height: 25px;
      padding: 0px 0px 0px 0px; /* oben - rechts - unten - links */
      background-position: right;
      background-image: url(bg_schatten3.gif);
      background-repeat: repeat-y;
    }    
    
    #fussbereich p { 
      float: left; 
      text-align: left;
      width: 490px;
      left: 5px;     
      display: inline;
    } /* menü für die Seiten */
    
    #fussbereich #datum {
      position: absolute;
      float: right; 
      text-align: center;
      width: 200px;
      right: 25px; 
      bottom: 3px;
      display: inline;
    } /* Datum und Pfeil-Menü */
    


/* ==================================
   4. Sonstige Styles 
   =============================== */   

/* ======================
   Das Kontaktformular 
  ======================  */
   
   form {
      text-align: left;
      position: relative;
      float: right; 
      width: 280px; 
      height: 350px; 
      padding: 5px 5px 25px 0px; /* oben - rechts - unten - links */
      display: inline;
    }
       
    label {
      display: block; 
      cursor: pointer; 
    }
    
    input#name, input#email, textarea {
      width: 280px;
      margin-bottom: 1em;
    }
    
    textarea {  
      width: 280px;
      height: 7em; 
    }
    
    #errormessage 
    {  
      width: 280px;
       margin-bottom: 1em; 
    }
    
    input#name, input#email:focus, 
    textarea:focus {
      background-color: #d9d9d9; 
      color: black; 
    }
    
/* ==================================
   ENDE DES STYPESHEETS
   =============================== */