/* =====================================================================================================================
Stylesheet für www.erzaehlkunst-im-doppelpack.de
Stand Dezember 2014
datei: feen.css
datum 14.12.2014
autor: jan saddei
aufbau 1. Kalibrierung und allgemeine styles
       2. Styles für Layoutbereiche
       3. Sonstige Styles
======================================================================================================================= */

/* ===========================================
   1. Kalibrierung und allgemeine styles
   ========================================= */

/* Kalibrierung der wichtigsten Abstände */

* { padding: 0; margin: 0; }
h2, p, ul, ol { margin-bottom: 1em; }
ul ul { margin-bottom: 0; }
li { margin-left: 1em; }

/* Allgemeine Sektoren */

html { height: 101%; } /* erzwingt scrollbar im firefox */

body { 
   background-image: url("grafik/bg01.jpg");
   background-color: darkslategrey;
   font-family: Verdana;
   font-size: small;
}

h1 { font-size: 150%; }
h2 { font-size: 130%; }
h3 { font-size: 100%; }
img { 
   margin: 0px;
   border: 0px solid black;
}

address {
   text-align: center;
   font-size: 80%;
   font-style: normal;
   letter-spacing: 2px;
   line-height: 1.5em;
}

/* Hyperlinks allgemein */
a { text-decoration: none; outline: none}

a:link { color: #000000; }
a:visited { color: #000000; }
}

a:active {
   color: lavender;
   background-color: crimson;
}

/* Allgemeine Klassen und IDs */
.skiplink {
   position: absolute;
   top: -2000px;
   left: -3000px;
   width: 0px;
   height: 0px;
   overflow:   hidden;
   display: inline; 
} 

#logo {
   color: black;
   background-color: white;
   padding: 0;
   border: 1px solid black;
   margin-left: auto;
   margin-right: auto;
   
}

.bildlinks {
   display: inline;
   float: left;
   padding:0px;
   border: 0px solid black;
   margin-right: 10px;
   margin-bottom: 10px;
   position: relative;
   top: 80px;
   left: -50px;
   border-radius: 25px;
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -webkit-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -moz-box-shadow: 0px 0px 1px 2px  rgba(230,230,250,1);
}


.bildrechts {
   float: right;
   padding:0px;
   border: 0px solid black;
   margin-left: 10px;
   margin-bottom: 10px;
   position: relative;
   top: 80px;
   left: 50px;
   border-radius: 25px;
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -webkit-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -moz-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
}

.kastenrechts {
   float: right;
   padding:0px;
   border: 0px solid black;
   margin-left: 10px;
   margin-bottom: 10px;
   position: relative;
   top: 80px;
   left: 50px;
   }

   .kastenrechts img
   {
   border-radius: 25px;
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -webkit-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -moz-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   }
   
.clearing { 
   clear: both;
   padding-left: 4px;
}

/* ===================================
   2. Styles für die Layoutbereiche
   =================================== */
#text1 { color: #FFFF9A; width: 400px; margin: 40px; font-size: 120%;
   font-style: b;
   letter-spacing: 2px;
   line-height: 1.5em; } 

#wrapper {
   
   /* background-image: url("grafik/bg01.jpg"); */
   background-color: black;
   position: relative;
   top: 10px;
   left: 0px;
   color: black;
   height: 2100px;
   width: 1200px; /* Breite des Inhaltsbereichs */
   margin: 10px auto;
   padding: 0px;
   border: 0px solid crimson;
   border-radius: 25px;
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -webkit-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -moz-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1x);
} 



#kopfbereich {
   display: inline;
   position: absolute;
   left: 250px;
   top: 50px;
   width: 1000px;
   color: black;
   padding: 0px 0px 0px 0px;
   margin: 0px 0px 0px 0px;
   border: 0px solid black;
}


#navibereich { 
   position: absolute;
   width: 1000px;
   left: 0px;
   top: 10px;
   background-color: /* #D5ED74 */ red;
   
   text-align: center;
   color: #6887A4;
   border: px solid #6887A4;
   
 }


#navibereich ul { 
    width: 1200px;
    height: 110px;
    border: 0px solid black;
    position: absolute;
    top: 2px;
    left: 0px;
    
}

#navibereich li {
    font-family: Verdana;
    font-size: 12px;
    font-style: normal;
    color: #000000;
    list-style-type: none;
	display: inline;
    line-height: 5px;
    
    border-right: 0px /* #D5ED74 */ #990033 solid;
    border-left: 0px /* #D5ED74 */ #990033 solid;
    border-top: 0px /* #D5ED74 */ #990033 solid;
    text-align: right;
    background-color: /* #D5ED74 */ white ;
    position: relative;
    top: 0px;
    left: 0px;
 }


#navibereich a {
   color: darkslategrey;
   
   border: 2px solid darkslategrey;
}


#navi00 a { background-color: lavender; padding: 3px 6px 3px 6px; }
#navi01 a { background-color: lavender; padding: 3px 6px 3px 6px; }
#navi02 a { background-color: lavender; padding: 3px 6px 3px 6px; }
#navi03 a { background-color: lavender; padding: 3px 6px 3px 6px; }
#navi04 a { background-color: lavender; padding: 3px 6px 3px 6px; }
#navi05 a { background-color: lavender; padding: 3px 6px 3px 6px; }
#navi06 a { background-color: lavender; padding: 3px 6px 3px 6px; }
#navi07 a { background-color: lavender; padding: 3px 6px 3px 6px; }
#navi08 a { background-color: lavender; padding: 3px 6px 3px 6px; }
#navi09 a { background-color: lavender; padding: 3px 6px 3px 6px; }

#navibereich a:hover,
#navibereich a:focus
{
color: black;
   background-color: /* #D5ED74 */ lavender;
   border: 2px solid crimson;
   box-shadow: 0px 0px 10px 10px rgba(230,230,250,1);
   -webkit-box-shadow: 0px 0px 10px 10px rgba(230,230,250,1);
   -moz-box-shadow: 0px 0px 10px 10px rgba(230,230,250,1);
}

#startseite #navi00 a,
#aboutseite #navi01 a,
#programmseite #navi02 a,
#terminseite #navi03 a,
#applausseite #navi04 a,
#audioseite #navi05 a,
#kontaktseite #navi06 a,
#kontaktformularseite #navi06 a,
#impressumseite #navi07 a,
#preiseseite #navi08 a,
#linksseite #navi09 a
 {  
   color: lavender;
   background-color: /* #D5ED74 */ crimson;
   border: 0px solid lavender;
   font-style: italics;
   font-weight: bold;
   box-shadow: 0px 0px 5px 5px rgba(230,230,250,1);
   -webkit-box-shadow: 0px 0px 5px 5px rgba(230,230,250,1);
   -moz-box-shadow: 0px 0px 5px 5px rgba(230,230,250,1); 
   
}


#navibereich a:active {
   color: black;
   background-color: lavender;
}

#textbereich { 
    position: absolute;
    width: 650px;
    height: 2000px;
    background-color: lavender;
    border: 1px solid crimson;
    left: 275px; 
    top: 85px;
    padding:100px 0px 0px -50px;
    margin: 2px 2px 2px 0px
}

#startseite #textbereich    
 { 
    font-size: 130%;
    position: absolute;
    width: 850px;
    <!-- height: 1300px; -->
    background-color: lavender;
    border: 1px solid crimson;
    left: 150px; 
    top: 75px;
    padding:100px 0px 0px -50px;
    margin: 2px 2px 2px 0px;
    border-radius: 25px;
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -webkit-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -moz-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1x);
}

#aboutseite #textbereich    
 { 
    font-size: 130%;
    position: absolute;
    width: 850px;
    <!-- height: 1300px; -->
    background-color: lavender;
    border: 1px solid crimson;
    left: 150px; 
    top: 75px;
    padding:100px 0px 0px -50px;
    margin: 2px 2px 2px 0px;
    border-radius: 25px;
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -webkit-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -moz-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1x);
}

#programmseite #textbereich    
 { 
    font-size: 130%;
    position: absolute;
    width: 850px;
    <!-- height: 1300px; -->
    background-color: lavender;
    border: 1px solid crimson;
    left: 150px; 
    top: 75px;
    padding:100px 0px 0px -50px;
    margin: 2px 2px 2px 0px;
    border-radius: 25px;
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -webkit-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -moz-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1x);
}

#preiseseite #textbereich    
 { 
    font-size: 130%;
    position: absolute;
    width: 850px;
    <!-- height: 1300px; -->
    background-color: lavender;
    border: 1px solid crimson;
    left: 150px; 
    top: 75px;
    padding:100px 0px 0px -50px;
    margin: 2px 2px 2px 0px;
    border-radius: 25px;
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -webkit-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -moz-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1x);
}

#terminseite #textbereich    
 { 
    font-size: 130%;
    position: absolute;
    width: 850px;
    <!-- height: 1300px; -->
    background-color: lavender;
    border: 1px solid crimson;
    left: 25px; 
    top: 75px;
    padding:100px 0px 0px -50px;
    margin: 2px 2px 2px 0px;
    border-radius: 25px;
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -webkit-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -moz-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1x);
}

#applausseite #textbereich    
 { 
    font-size: 130%;
    position: absolute;
    width: 850px;
    <!-- height: 1300px; -->
    background-color: lavender;
    border: 1px solid crimson;
    left: 25px; 
    top: 75px;
    padding:100px 0px 0px -50px;
    margin: 2px 2px 2px 0px;
    border-radius: 25px;
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -webkit-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -moz-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1x);
}

#audioseite #textbereich    
 { 
    font-size: 130%;
    position: absolute;
    width: 850px;
    <!-- height: 1300px; -->
    background-color: lavender;
    border: 1px solid crimson;
    left: 150px; 
    top: 75px;
    padding:100px 0px 0px -50px;
    margin: 2px 2px 2px 0px;
    border-radius: 25px;
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -webkit-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -moz-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1x);
}

#kontaktseite #textbereich    
 { 
    font-size: 130%;
    position: absolute;
    width: 850px;
    <!-- height: 1300px; -->
    background-color: lavender;
    border: 1px solid crimson;
    left: 150px; 
    top: 75px;
    padding:100px 0px 0px -50px;
    margin: 2px 2px 2px 0px;
    border-radius: 25px;
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -webkit-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -moz-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1x);
}

#kontaktformularseite #textbereich    
 { 
    font-size: 130%;
    position: absolute;
    width: 850px;
    <!-- height: 1300px; -->
    background-color: lavender;
    border: 1px solid crimson;
    left: 25px; 
    top: 75px;
    padding:100px 0px 0px -50px;
    margin: 2px 2px 2px 0px;
    border-radius: 25px;
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -webkit-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -moz-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1x);
}

#linksseite #textbereich    
 { 
    font-size: 130%;
    position: absolute;
    width: 850px;
    <!-- height: 1300px; -->
    background-color: lavender;
    border: 1px solid crimson;
    left: 25px; 
    top: 75px;
    padding:100px 0px 0px -50px;
    margin: 2px 2px 2px 0px;
    border-radius: 25px;
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -webkit-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -moz-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1x);
}

#impressumseite #textbereich    
 { 
    font-size: 130%;
    position: absolute;
    width: 850px;
    <!-- height: 1300px; -->
    background-color: lavender;
    border: 1px solid crimson;
    left: 150px; 
    top: 75px;
    padding:100px 0px 0px -50px;
    margin: 2px 2px 2px 0px;
    border-radius: 25px;
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -webkit-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -moz-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1x);
}

    #textbereich p.text {
    font-size: 120%;
    margin: 20px;
    padding: 10px 40px 10px 40px;
    line-height: 1.5em;
    border: 0px solid black;
    } 

    #textbereich p.zitat {
    <!-- background-color: #cccccc; -->
    margin: 0px;
    padding: 10px 40px 10px 40px;
    line-height: 1.5em;
    border: 0px solid black;
    } 

    #textbereich p.zitat2 {
    margin: 0px;
    padding: 10px 40px 10px 40px;
    line-height: 1.0em;
    border: 0px solid black;
    position: relative;
    top: -10px;
    }

    #textbereich p.texth2 {
    margin: 10px;
    padding: 20px 0px 50px 35px;
    line-height: 1.0em;
    border: 0px solid black;
    font-size: 200%;
    font-style: italic;
    } 

	#kopfbereich p.texth2 {
    color: white;
	margin: -9px;
    padding: 0px 0px 0px 0px;
    line-height: 1.0em;
    border: 0px solid black;
    font-size: 200%;
    font-style: italic;
	font-weight: bold;
    } 

#kontaktformular   #textbereich img {
        margin: 4px;
		position: relative;
		top: -10px;
		left: 0px;
                border-radius: 25px;
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -webkit-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -moz-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1x);
     }

 #textbereich img {
        margin: 4px;
		position: relative;
		top: 22px;
		left: 20px;
                border-radius: 25px;
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -webkit-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1);
   -moz-box-shadow: 0px 0px 1px 2px rgba(230,230,250,1x);
     }

     #textbereich a {
        border-bottom: 1px dotted #cc0000; padding: 4px;
     }
      #textbereich a:hover,
      #textbereich a: focus {
          border-bottom: 1px solid #d90000;
       }



#fussbereich {
   clear: both;
   padding: 0px 0px 0px 0px;
   border: 0px solid #000000;
   margin: -50px 0px 0px 0px;
   position: absolute;
   top: 1700px;
   left: -100px;
   width: 1200px;
   height: 40px;
   font-family: Verdana;
   font-size: 12px;
   color: lavender;
   text-align: right;
}

#linksseite #fussbereich {
   clear: both;
   padding: 0px 0px 0px 0px;
   border: 0px solid #000000;
   margin: -50px 0px 0px 0px;
   position: absolute;
   top: 840px;
   left: 204px;
   width: 673px;
   height: 40px;
   font-family: Georgia;
   font-size: 12px;
   color: lavender;
   text-align: right;
}


/* #programmseite #fussbereich {
   clear: both;
   padding: 0px 0px 0px 0px;
   border: 0px solid #000000;
   margin: -50px 0px 0px 0px;
   position: absolute;
   top: 1110px;
   left: 204px;
   width: 673px;
   height: 40px;
   font-family: Georgia;
   font-size: 12px;
   color: white;
   text-align: right;
} */

#applausseite #fussbereich {
   clear: both;
   padding: 0px 0px 0px 0px;
   border: 0px solid #000000;
   margin: -50px 0px 0px 0px;
   position: absolute;
   top: 1510px;
   left: 204px;
   width: 673px;
   height: 40px;
   font-family: Georgia;
   font-size: 12px;
   color: lavender;
   text-align: right;
}

#kontaktformularseite #fussbereich {
   clear: both;
   padding: 0px 0px 0px 0px;
   border: 0px solid #000000;
   margin: -50px 0px 0px 0px;
   position: absolute;
   top: 1110px;
   left: 204px;
   width: 673px;
   height: 40px;
   font-family: Georgia;
   font-size: 12px;
   color: lavender;
   text-align: right;
}

#terminseite #fussbereich {
   clear: both;
   padding: 0px 0px 0px 0px;
   border: 0px solid #000000;
   margin: -50px 0px 0px 0px;
   position: absolute;
   top: 1110px;
   left: 204px;
   width: 673px;
   height: 40px;
   font-family: Georgia;
   font-size: 12px;
   color: lavender;
   text-align: right;
}

#bottomline {
   
   padding: 10px 10px 10px 10px;
   border: 0px solid #000000;
   height: 40px;
   
   font-family: Georgia;
   font-size: 12px;
   font-weight: bold;
   color: lavender;
   text-align: center;
}

/* ab hier ist alles neu - davor ist vom kth übernommen */


a:hover {  font-family: Verdana; font-size: 18px; font-style: normal; line-height: 1.5em; color: black; text-decoration: none}
a {  font-family: Verdana; font-size: 18px; font-style: normal; color: #000000; text-decoration: none; line-height: 1.5em; border: 1px solid black;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   box-shadow: 4px 4px 4px rgba(47,79,79,0.5);
   -webkit-box-shadow: 4px 4px 4px rgba(47,79,79,0.5);
   -moz-box-shadow: 4px 4px 4px rgba(47,79,79,0.5); }
.text {  font-family: Verdana; font-size: 16px; font-style: normal; line-height: 2.0em; color: #000000;}

.zitat {  margin: 10px; font-family: Verdana; font-size: 110%; font-style: italic; line-height: 2.0em; color: #000000}

.zitat2 {  font-family: Verdana; font-size: 100%; font-style: normal; line-height: 2.0em; color: #000000}

.listelinks{ font-family: Verdana; font-size: 16px; font-style: normal; line-height: 1.5em; color: #000000; margin: 20px 10px 10px 50px;}

.listerechts{ font-family: Verdana; font-size: 16px; font-style: normal; line-height: 1.5em; color: #000000; margin: -60px 10px 10px 500px;}

.hilite1 { margin: 25px; width: 800px; border: 1px solid black; border-radius: 25px;
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   box-shadow: 4px 4px 4px rgba(47,79,79,0.5);
   -webkit-box-shadow: 4px 4px 4px rgba(47,79,79,0.5);
   -moz-box-shadow: 4px 4px 4px rgba(47,79,79,0.5); }

form#kontakt {
   width: 800px;
   color: black;
   line-height: 2;
   margin: 25px;
}


fieldset {
   padding: 20px;
   margin: 50px 20px 50px 20px;
}


legend {
   font-weight: bold;
   color: black;
   padding: 0 10px;
   border: none;
}

label {
   position: relative; /*etwas höher ... */
   bottom: 1px;
   cursor: pointer;
}

label.davor {
   float: left;
   clear: left;
   width: 115px;
   text-align: right;
   margin-right: 10px;
}

label.fehler {
   float: left;
   clear: left;
   width: 115px;
   text-align: right;
   margin-right: 10px;
   margin-top: 1px;
   padding: 0px;
   color: #ff0000;
   background: #fff url(warning.png) no-repeat 10px center;
   
}

p.fehler {
   width: 400px;
   text-align: center;
   margin-right: 1px;
   margin-top: 1px;
   padding-right: 1px;
   color: #ff0000;
   background: #fff url(warning.png) no-repeat 16px center;
   border: 1px solid #3fc600;
}


input#anrede_frau { 
   padding-left: 0;
   margin-left: 125px;
}

#abschicken {
   cursor: pointer;
   padding: 0;
   margin-left: 10px;
}

form p {
   margin: 0;
   margin-left: 10px;
}

#tobesent {
   width: 400px;
   height: 200px;
   text-align: left;
   margin: 10px;
   padding: 15px;
   color: #000000;
   background: #ffcc66 ;
  

 border: 2px solid #ccc;
}

.pflichtfeld {
   color: #990033; font-weight: bold;}

#digits {
   border: 1px solid black;
   padding: 2px;
   /*float: left;
   clear: left;*/
   margin-left: 10px;
   width: 126px;
   height: 26px;
   margin-bottom: 0;
   
}

#bestätigen {
   cursor: pointer;
   margin-left: 115px;
   padding: 0;
}

#abschicken {
   cursor: pointer;
   margin-left: 125px;
   padding: 0;
}

#abschicken2 {
   cursor: pointer;
   margin-left: 2px;
   padding: 0;
}


#subshdigts {
   cursor: pointer;
   margin-left: 10px;
   padding: 0;
}

#digits img {
    border: none; 
    margin: 0;
    padding:0;
}

.digitstext {
   text-align: left;
   margin-left: 5px;
   padding-left: 5px;
   color: #000000;
   background: #ffff9a ;
   border: 1px solid #3fc600;
}