/* ============================================================================
Stylesheet für die Beispielsite von "Gyrokinesis Dortmund-Hombruch" 
Stand: Ende Kapitel 03_04_01 "Ordnung halten"
Datei: bildschirm.css
Datum: 17.03.2012
Autorin: Ramona Cacic-Reinecke
Aufbau:   1. Kalibrierung und Restauration
          2. Allgemeine Styles
          3. Styles für Layoutbereiche
          4. Sonstige Styles 
=============================================================================*/

/* ============================================================================
1. Kalibrierung und Restauration
=============================================================================*/

* { padding: 0; margin: 0; }
html { overflow-y: scroll; }

/*Abstände nach unten und links, em => wächst mit schriftgröße mit!*/
h2, h3, p, ul, ol { margin-bottom: 1em; margin-left: 0; }
p { margin-right: 1em; }
ul, ol { margin-right: 3em; 
         margin-bottom: 0; }
li {margin-left: 1em; }

/* ggf. weitere Abstäne restaurieren*/

/* ============================================================================
2. Allgemeine Styles
=============================================================================*/

body {
      background-color: black;
      color: white;
      font-family: Verdana, Arial, Helvetica, sans-serif; 
      font-size: small;
      }

h1 { font-size: 180%; }      /* 180% von font-size in body */
h2 { font-size: 130%; }
h3 { font-size: 130%; } 

address {
      text-align: center;
      font-size: 80%;
      font-style: normal;    /* Nicht kursiv */
      letter-spacing: 1px;
      line-height: 1.5;
}

/* Hyperlinks gestalten */
a { color: #91130B;
    text-decoration: none; }

a:link { color: #a84a44; }
a:visited { color: #91130b; }
a:hover, a:focus {
    text-decoration: underline;
} 
a:active {
    background-color: #000000; color: white;
}

/* Allgemeine Klassen und ID's */
img#logo {
      color: black;
      padding: 5px;
}

.bildrechts {
      float: right;
      margin-left: 15px;
}
 
.bildlinks {
      float: left;
      margin-right: 15px;
} 

.clearing {
      clear: both; 
}
 

/* ============================================================================
3. Styles für Layoutbereiche
=============================================================================*/

div#wrapper {
      background-color: #DCDCD9;
      color: black;
      width: 756px;
      margin-top: 10px; 
      margin-right: auto;
      margin-bottom: 10px;       
      margin-left: auto;
}

div#header {
      width: 756px;
      height: 250px;
      position: relative;
      background-position: 90% 0px;
      background-color: #FDF0CE;
      background-image: url(GYROKINESIS_header_756x250_72dpi.jpg);
      background-repeat: no-repeat;
      color: black;
      padding: 0px; 
}

p#slogan {
      position: absolute;
      top: 85%;
      right: 20px; 
}

  p#slogan span {
      color: #91130B;  
}  

div#navi {
      background-color: #BFA28F; 
      padding: 5px 20px; 
}

div#navi ul{
      margin-left: 0;
}

div#navi li {
       display: inline;
       list-style-type: none; 
       margin: 0 10px 0 0;
}

div#navi li.sie-sind-hier a {
        color: #804555;
}

div#navi a {
        color: #dcdcd9;
} 

div#content1 {
      background-image: url(background_content.gif);
      background-repeat: no-repeat;
      padding: 20px; 
}

div#content2 {
      padding: 20px;
}

  div#content2 a {
      border-bottom: 1px dotted #91130B;
      text-decoration: none;
}
  div#content2 a:hover,
  div#content2 a:focus {
      border-bottom: 1px solid #91130B;
      text-decoration: none; 
}

div#footer {
      border-top: 1px solid #393939;
      padding-top: 10px;
      padding-bottom: 10px;
}

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

form{
background-color: #ffffff; 
width: 370px; 
padding: 20px;
border: 1px solid #91130B; 
}

label {
display: block;
cursor: pointer;
}

input#besuchername,
input#besuchermail,
textarea {
width: 300px;
border: 1px solid #91130B;
margin-bottom: 1em;
}

input:focus,
textarea:focus {
background-color: #e5e5e5; }

 div.galerie {
                 overflow: hidden; 
                 /* overflow: visible; oder overflow: scroll; möglich! */
                 /* wenn: height: 200px; wird der Inhalt durch overflow hidden abgeschnitten! */
                 width: 700px;
                 padding: 20px;
                 padding-top: 25px;
                 margin: 10px 3px 3px 10px; 
                 }
   div.galerie img {
                    float: left;   /* Hier wird gefloatet!*/
                    margin-right: 15px;
                    border: 1px solid #353535; 
                   } 
   div.galerie hr {
                   width: 0;
                   height: 0;
                   font-size: 0;
                   line-height: 0;                   
                  }                              
</style>



/* ============================================================================
Ende des Stylesheets
=============================================================================*/