/* ------------ Allgemeine Formatierungen -------------- */
body {padding:0px;
      margin:20px 30px;
      font-family:arial,helvetica,sans-serif;
      color:#333;
      font-size:12px;
      background:#ffffF8;
      }
      
a:link, a:visited, a:active, a:hover {color:#00416e;text-decoration:none;font-size:12px;}
a:hover {text-decoration:underline;}

h1, h2, h3 ,h4 {color:#C71F16;}
h1 {margin-top:0px;font-size:14px;}
h3 {margin-top:0px;margin-bottom:0px;font-size:12px;}

p {margin:0px 0px 15px 10px;}

#Text {padding:10px 10px 10px 20px;}

#Text h1 {margin-left:-10px;}

/* ------------ Google Anzeigen ------------------------*/

#Anzeigen {
	   float:right;
	   margin-right:-150px;
           font-size:10px;
           }


#googlePhoto {
	margin:30px 45px;
}

/* ------------ Div der alles zusammenhält -------------- */
#HinterGrund {/*background:black;*/
              width:595px;              
              position:relative;
	      margin:0px auto;
              border-right:1px dashed blue;              
              }

/* ------------ Der Kopf -------------- */
#Kopf   {width:564px;}

#Kopf #Logo {font-size:36px;
	  font-weight:bold;
          border-bottom:2px solid #C71F16;
          margin-top:0px;
          margin-bottom:8px;
          font-family:georgia;
          text-align:right;
          color:#C71F16;}

#Kopf #Logo a {color:#C71F16;text-decoration:none;font-size:36px;}          

#Menu {text-align:right;
       margin-bottom:8px;
       /*word-spacing:8px;*/
       font-size:13px;}

#Menu a {margin:0px 8px;}

/* ------------ Trennstrich, trennt oberen vom unteren Teil -------------- */
#TrennStrich {width:564px;
              border:none;
              border-bottom:2px solid #eee;
              height:10px;
              margin:10px 0px 20px;
              }

/* Text über dem Trennstrich */
#GeneratedWords {
                 position:relative;
                 top:18px;
                 font-size:10px;
                 width:564px;
                 color:#BBBBB4;
                 text-align:center;     
                 /*margin:4px 0px -15px;
                 border:1px solid red;*/}

/* ------------ der graue Kasten -------------- */
#KastenOben {border: 1px solid #666;              
              background: #eee;
              width:564px;
              position:relative;
              z-index:1;
              }


/* ------------ Der Panel mit den Buttons -------------- */
#ButtonPanel {
        position:absolute;
        bottom:30px;
        left:30px;
        float:left;
        width:90px;
        height:40px;
        border:none;
        padding-right:0px;
        text-align:right;
        }

#ButtonPanel input {width:90px;
	            border:1px outset #333;
	            background: #CCC;
                    margin:0px;
                    }

#ButtonPanel input.active {color:#C71F16;border-style:outset;}
#ButtonPanel input:active {border-style:inset;}

#ButtonPanel input:hover {background:#ddd;}


/* ------------ Ein- und Ausgabefelder -------------- */

#TextEingabeFeld {width:250px;
                  color:#000;
                  padding:2px;
                  border:2px inset #9D9D9D;
                  position:relative;             
                  left:210px;
                  z-index:1;
                  margin-bottom:10px;}

#VariationEingabeFeld {width:250px;
                  color:#000;
                  padding:3px;
                  font-size:16px;
                  font-weight:bold;
                  border:none;
                  background:#eee;
                  position:relative;
                  left:210px;
                  z-index:2;
                  margin-bottom:10px;}

/* ------------ Buttons rechts -------------- */

#ChangeKnopf {
              float:right;
              margin-right:10px;}

#SpeicherKnopf {float:right;
                margin-right:10px;}

#SprachAuswahl {float:right;
                margin-right:10px;
                z-index:10;}

#LoeschKnopf {float:right;
              margin-right:40px;
	     }

#PrintKnopf {float:right;
            margin-right:40px;
            margin-top:15px;
            clear:right;
	   }


.Button {margin-left:5px;
	 height:22px;
         width:80px;
	 left:472px;
	 border:1px outset #333;
	 background: #CCC;	 
	  }

.Button:hover {background:#ddd;}
.Button:active {border-style:inset;}


#Anweisungen{
              width:190px;              
              position:absolute;                          
              padding:4px;
              font-size:12px;
              }

#GespeicherteWoerter {
              width:260px;
              height:140px;
              position:relative;
              top:0px;
              left:210px;
              color:#C71F16;
              padding:4px;
              font-size:12px;
              border:2px inset #9D9D9D;
              overflow:auto;
              background:#FFF;}




/* radio button mit den funtionen, werden durch die buttons mit den selben namen gewählt */ 
#Funktion {display:none;}

form {margin-bottom:-10px;}

/* tabelle die die gespeicherten woerter enthaelt */
#WortListe {width:240px;
            font-size:12px;           
            }
#WortListe a:link, #WortListe a:visited {font-size:10px;}
#WortListe #DasWort {color:#444;font-weight:bold;font-style:italic;}
#WortListe .DieVariation {text-indent:10px;}

/* ------------- Regler ------------------------------ */
#Regler {position:relative;
		  width:220px;
		  height: 40px;
		  left:210px;
		  border:0px solid red;
		  }

.container
		{ position:absolute;
                  z-index:10;
		  width:220px;
		  height: 22px;
		  background:#eee;
		  z-index:5;		  
		  }

  #SliderSkala {width:200px;
		  height: 10px;
		  background:none;
		  border-bottom:1px solid #666;
		  position:absolute;
		  top:2px;
		  left:10px;
		  z-index:3;}

#Slider,	.drag
		{ position:absolute;	
		  cursor:move;
		  width:45px;
		  height: 16px;
		  background:#888;
		  border:2px solid #000;
		  color:#FFF;
		  text-align:center;
		  vertical-align:middle;
		  font:bold 12px arial,helvetica,sans-serif;
		  padding:2px;
		  z-index:6;}
#Slider:hover   { background:#999;}