/* **************************************************************************
Stylesheets für Homepage www.setdance-hamburg.de
Datum: 29.03.2015
Datei: screen.css
Media: screen
Autor: Wolfgang Tollmien
****************************************************************************/

/* *******************************************
    1. Kalibrierung und allgemeine Styles
    ******************************************/
    
* { padding:0; margin: 0; }     /*für alles: Kalibrierung*/

/*Liste vorangestellt: Viereck*/
li { list-style-type: square;   /* kleines Viereck vor Element */
     margin-left: 1em;          /* Abstand von links */
}

/*Abstand nach unten*/
h1, p, ul, ol { margin-bottom: 1em; }

/* allgemeine Selektoren*/
.clearing { clear: both; }

body   {
        width: 800px;
        background-color: #000080;      /* dunkelblau */
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: "+2";               /* Schriftgröße */
}

h1 {font-size: 150%; }
h2 {font-size: 130%; margin-bottom: 1em; }      /* Abstand nach unten */
h3 {font-size: 120%; }
h4 {font-size: 110%; margin-bottom: 1em; }    

address {
        text-align: center;                     /*zentrieren*/
        font-size: 80%;                         /*etwas kleiner*/
        font-style: normal;                     /*nicht kursiv*/
        letter-spacing: 2px;                    /*Abstand zwischen Buchstaben*/
        line-height: 1.5em;                     /*Zeilenabstand*/
}

/* Hyperlinks allgemein */

a { text-decoration: none; }                    /*Unterstreichung entfernen*/

a:link { color: #d90000; }                       /*Reihenfolge wichtig!!*/
a:visited { color: #cc6666; }
a:hover, a:focus { border-bottom: 1px solid #d90000; }
a:active { color: white; background-color: #d90000; }

/* Allgemeine Klassen und IDs */

/*HTML-Elemente der Klasse skiplink werden ausgeblendet*/
.skiplink {
           position: absolute;
           top: -20000px;
           left: -30000px;
           width: 0px;
           height: 0px;
           overflow: hidden;
           display: inline;
}

.clearing { clear: both; }

/* *******************************************
    2. Styles für Layoutbereiche
    ******************************************/
#wrapper {
          color: black;
          width: 800px;
          background-color: #bbbf01;               /* irisch grün */
          margin-top: 0px;
          margin-right: auto;                   /* Abstand rechts automatisch */
          margin-bottom: 0px;
          margin-left: auto;                    /* Abstand links automatisch */
                                                /* d.h. zentriert */
}

#kopf   {
         overflow: hidden;
         color: black;
         background-color: #BBBF01;             /* irisch-grün */
         background-image: url(../bilder/gruen.jpg);
         padding-top: 10px;
         padding-right: 0px;
         padding-bottom: 0px;
         padding-left: 0px;
}

/*
#kopf img { float:left; 
            padding-right: 100px;
}
*/

#kopf p {
         padding: 1px 0 1px 0;
         margin-bottom: 0;                    /* war 1 em*/
         letter-spacing: 2px;                 /* Abstand zwischen Buchstaben*/
         line-height: 1.6em;                  /* Zeilenabstand*/
}

#navi   {
         text-align: left;                    /* linksbündig */
         color: black;
         background-color: #bbbf01;           /*   irisch-grün */
         padding-top: 5px;
         padding-right: 0px;
         padding-bottom: 4px;
         padding-left: 0px;
         /*kürzer: padding: 5px 0px 4px 0px; */
}

#navi ul {margin-bottom: 0; }

#navi li {
         display: inline;                       /* li nebeneinander anzeigen*/
         list-style-type: none;                 /* ohne Aufzählungspunkte*/
         margin: 0;                             
}

#navi a {
         color: black; 
         background-color: #bbbf01;
         padding: 4px 8px 4px 8px;
         /*padding: 4px 11px 4px 11px;          insgesamt zu lang geworden! */
         /* border: 1px solid #8c8c8c; */
}

#navi a:hover,
    #navi a:focus,
    #start #navi-start a,
    #kontakt #navi-kontakt a {
        color: #000080;
        background-color: #bbbf5f;             
}

#navi a:active,
    #start #navi-start a:active,
    #kontakt #navi-kontakt a:active {
                color:black;
                background-color: #eee;
}

#navi-hier a {
         background-color: cadetblue;
         color: crimson;
         cursor: default;
}

/* Ende Kopfteil -----------------------------------------------------------------------*/

#text   {
         padding-top: 10px;
         padding-right: 0px;
         padding-bottom: 20px;
         padding-left: 0px;
         color: #000080;
         background-color: #6699ff;
         background-image: url(../bilder/gruen.jpg);
         width: 800px;
}

#text p {
        padding-top: 20px;
        padding-left: 10px;
        padding-right: 10px;
        letter-spacing: 1px;                    /*Abstand zwischen Buchstaben*/
        line-height: 1.5em;                     /*Zeilenabstand*/
}

#text img { margin-left: 30px; 
            border-style: outset;
            border-width: 5px;
            border-color: lightgray;   
}

#text h1 {text-align: center; }
#text h2 {text-align: center; }
#text h3 {text-align: center; }

#links {
        float: left;                  
        width: 380px;
        position: relative;
}

#ueber {
        float: right;
        text-align: center;
        margin-top: 100px;
        margin-right: 30px;
}


.bildlinks { 
            width: 130px;
            padding:0px;
            border: 1px solid #6699ff;
            margin-bottom: 5px;
            margin-left: 0px;
}

/*Betrifft Selektor a in #text*/
#text a { border-bottom: 1px dotted #cc0000; }
#text a:hover,
#text a:focus { border-bottom: 1px solid #d90000; }

#rechts      { 
               margin: 0.8em; 
               margin-left: 360px;
               text-align: center;
}

#rechts  img { 
                  margin-bottom: 10px; 
                  padding: 2px;
                  border: 1px solid #6699ff;                  
}

#ausstattung { 
               margin: 0.8em; 
               margin-left: 360px;
               text-align: center;
}


#fuss   {
         padding-top: 10px;                      /*unterhalb Rahmenlinie*/
         padding-right: 0px;
         padding-bottom: 20px;
         padding-left: 0px;
         background-color: #bbbf01;              /* irisch-grün */
}


/* *******************************************
    3. Sonstige Styles
    ******************************************/

/* Das Kontaktformular */

#kontaktinhalt {
                  background-color: #6699ff;
                  width: 100%;
}

form {
      background-color: #eee;
      width: 370px;                             /* Breite des Formulars */
      padding: 0px;
      border: 1px solid #6699ff;
      position: relative;
      top: 0px; 
      left: 250px;    
}

label {                              /* Beschriftung auf eigener Zeile */
       display: block;
       cursor: pointer;              /* Mauszeiger wird Hand */
}

input#absender, 
textarea {
          width: 300px;
          border: 1px solid #8c8c8c;
          margin-bottom: 1em;
}

textarea { height: 7em; }

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

/* Impressum */
#impressuminhalt {
                  background-color: #6699ff;
                  background-image: url(../bilder/klein/sand_h.jpg);    
                  width: 100%;
                  text-align: center;
}

.oben { border-bottom: 2px solid blue; }

/* 30jahre */
#text-30 {
                 text-align: center;
}

#text-30 img { 
            border-style: outset;
            border-width: 5px;
            border-color: lightgray;
}

/* dranbleiben */
#text-dran { text-align: center; }

#text-dran img { 
            border-style: outset;
            border-width: 5px;
            border-color: lightgray;
            margin-top: 10px;
            padding-right: auto;
            margin-bottom: 10px;
            padding-left: 200px:
}

/* Das Kontaktformular */

#kontaktinhalt {
                  background-color: #6699ff;
                  background-image: url(../bilder/klein/sand_h.jpg);    
                  width: 100%;
}

form {
      background-color: #eee;
      width: 370px;                             /* Breite des Formulars */
      padding: 20px;
      border: 1px solid #6699ff;
      position: relative;
      top: 0px; 
      left: 250px;    
}

label {                              /* Beschriftung auf eigener Zeile */
       display: block;
       cursor: pointer;              /* Mauszeiger wird Hand */
}

input#absender, 
textarea {
          width: 300px;
          border: 1px solid #8c8c8c;
          margin-bottom: 1em;
}

textarea { height: 7em; }

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


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