/* normal */
       @font-face{
          font-family:'DejaVuSansMono';
          src:url(DejaVuSansMono.ttf) format('truetype');
          font-weight:none;
          font-style:none
       }
       @font-face{
          font-family:'SchulbuchBayern';
          src:url(schulbuchbayern.ttf) format('truetype');
          font-weight:none;
          font-style:none
       }     
       body {
         background-color:#232323;
         background: url(bg-dark.jpg);
         color:#ffffff;
         font-family:'Open Sans',Arial,Helvetica,sans-serif;
         font-size:16px;
         margin:0px;
         padding:0px;
       }
       h1, h2 {
         color:#bf0303;
         text-align:center;
       }
       /*
       .feuer {
        font-weight: bold;
        text-shadow:   0px   0px 10px white,
                       5px  -5px 10px #F8FF9D,
                     -10px -10px 20px #F5FE5C,
                      10px -15px 20px #FDDB33,
                     -10px -20px 20px #FFC126,
                      10px -25px 20px #FF7808,
                     -10px -30px 20px #F95801,
                      15px -35px 20px #FE7606,
                     -15px -40px 20px #FD5C01,
                      15px -45px 15px #E54600,
                     -20px -50px 15px #D23700,
                      20px -55px 15px #B82B00,
                     -20px -60px 15px #A11301,
                      20px -65px 15px #981D01,
                     -25px -70px 10px #851200,
                      25px -75px 10px #690D00,
                     -25px -80px 10px #3E0600
	        ;
       }
       */
       h1, h2, h3, p, div {
         padding:5px;
         margin:5px;
         width:640px;
         -moz-user-select: none;
         -khtml-user-select: none;
         -webkit-user-select: none;
         user-select: none;
       }
       img {
         -moz-user-select: none;
         -khtml-user-select: none;
         -webkit-user-select: none;
         user-select: none;
         user-drag:none;
         pointer-events: none;
       }
       #spielflaeche {
         padding:10px;
         position:relative;
         background-color:#f2f2f2;
         border-style:solid;
         border-width:1px;
         border-color:#bebebe;
         color:#000000;
         width:620px;
         min-width:620px;
         max-width:620px;
         height:480px;
         min-height:480px;
         max-height:480px;
         background-color:black;
         
         -webkit-box-shadow: inset 1px 2px 5px 5px rgba(255, 0, 0, 0.3);
         -moz-box-shadow:    inset 1px 2px 5px 5px rgba(255, 0, 0, 0.3);
         box-shadow:         inset 1px 2px 5px 5px rgba(255, 0, 0, 0.3);
         
         background: url(berge_und_wolken.png) repeat;
	     animation: animate-background linear 15s infinite;
       }
       @keyframes animate-background {
	     from { background-position: 300px 0px; } 
	     to   { background-position: 0px 0px; }
       }
       #i_eingabefeld {
         position:absolute;
         width:596px;
         top:10px;
         left:10px;
         font-family:'DejaVuSansMono','SchulbuchBayern','Open Sans',Arial,Helvetica,sans-serif;
         font-size:36px;
         border-style:solid;
         border-width:1px;
         border-color:#bebebe;
         background-color:rgba(255,255,255, 0.4);
         color:#ffffff;
         padding-left:10px;
         padding-bottom:5px;
         padding-top:5px;
         -moz-user-select: none;
         -khtml-user-select: none;
         -webkit-user-select: none;
         user-select: none;
         letter-spacing:6px;
       }
       #i_versteckt {
         position:absolute;
         top:10px;
         left:10px;
         font-family:'Open Sans',Arial,Helvetica,sans-serif;
         font-size:32px;
         background-color:transparent;
         color:transparent; /* #ffffff #232323 */
         -moz-user-select: none;
         -khtml-user-select: none;
         -webkit-user-select: none;
         user-select: none;
         border-style:solid;
         border-width:1px;
         border-color:transparent;
         max-width:1px;
         max-height:1px;
       }
       #i_versteckt:active,
       #i_versteckt:focus {
         border-style:solid;
         border-width:1px;
         border-color:transparent;
         -webkit-box-shadow: none;
         -moz-box-shadow:    none;
         box-shadow:         none;
       }
       #b_startknopf,
       #b_resetknopf,
       #b_lektionanzeigen,
       #b_eigene_lektion {
         background-color:darkred;
         color:#ffffff;
         border-style:solid;
         border-color:darkred;
         border-width:2px;
         padding:10px;
         font-family:'Open Sans',Arial,Helvetica,sans-serif;
         font-size:18px;
       }
       select {
         background-color:#666666;
         color:#ffffff;
         font-family:'Open Sans',Arial,Helvetica,sans-serif;
         font-size:16px;
         border-style:solid;
         border-width:1px;
         border-color:#bebebe;
         padding:5px;
       }
       select option {
         padding:5px;
       }