@charset "utf-8";



body {
    background:linear-gradient(90deg,  #a0f0ff 1% , yellow );
    font-size: 11pt;
    font-family: Arial ;
    color: #333;
    margin-left: 50px;
    margin-right: 50px;
    }     
    

    /* Body für Navigationsframe */
#navibody {
    font-size: 4pt;
    font-family: Arial ;
    color: #0000FF;
    background-color: #C0D0D0;
    background:linear-gradient(90deg,  #F1bCD0 1% , #a0f0ff 50%);
    margin-left: 9px;
    margin-right: 5px;
    }

 /* für Header keine Border, etc. */
.header {
    border:none;
    background-color: #CCBBDD;
    background:linear-gradient(15deg, rgba(160, 240, 255, 1) ,  rgba(200,200,200, 0.5) );
}

.headline {
    font-size: 20px;
    font-family: Arial;
    color: #904060;
}
    
.content {
    font-size: 14px;
    font-style: normal;
    font-family: monospace;
    color: #505050;
}

 
.topfix {
        z-index: 10;
        top:0px;
        left: 0px;
        position: fixed;
        width: 100%;
        margin-left: 40px;
}

 
 table,td {border: 2px solid white;
    background-color: #B8EDF0;
        color: #000000;
        border-spacing: 0px;
        padding: 1px;
        table-layout: fixed;
        
      
        
       
 }   
    
    

input { 
    font-size: 11pt;
    font-family: Arial ; 
    color: #60a060; 
    padding-left: 5px;
    border-radius: 4px;
    margin-top: 2px;
    margin-bottom: 2px;
    } 
.userinput:focus {
    background-color: #cDfEbF;
    }
       
    
.kleininput {
    font-size: 12pt;
    font-family: Arial ;
    color: #60a060;
    padding-left: 5px;
    background-color: #FFFF00;
    }    

 td { font-size: 12pt;
    font-family: Arial;
    color: #707070;
    margin-left: 10px;
    padding-left: 10px;
    padding-right: 10px; 
    }

.tdauswahl { font-size: 15px;
    font-family: Arial ;
    color: #101010;
   
    margin-left: 20px;
    padding-left: 20px;
    padding-right: 20px;
    }    


     
 .eingabefeld, input[type=text] {
    font-size: 16px;
    font-family: Arial ;
    color: #000080;
    background-color: #EDEEFF;
    padding-left: 4px;
    margin-top: 2px;
    margin-bottom: 2px;
    }
.eingabefeld:focus , input[type=text]:focus{   
    background-color: #cDfEbF; 
    }
    
/* Schaltflächen bei aktivierung */     
input[type=button]:focus{
    color: #fff;
    background-color: #555;
    }    
    
    
select {
    font-size: 16px;
    font-family: Arial ;
    color: #000080;
    background-color: #EDEEFF;
    padding-left: 4px;
    margin-top: 2px;
    margin-bottom: 2px;
    }
select:focus {
    background-color: #cDfEbF;
    }    
  
.kleinliste {
    font-size: 15px;
    font-family: Arial ;
    color: #000000;
    padding-left: 5px;
    }       
    
  
  




  
    
/*Schaltflächen für Navibutton */    
.navinorm {
        width: 175px;
        height: 30px;
        margin-top: 15px;
        /*bground-color: #BCCBFF;     */ 
        /* background:linear-gradient(15deg,yellow , orange 40% , orange 60% ,purple 99%); */
        /*background:linear-gradient(15deg, rgba(255,0,0, 0.9) , orange 40% , orange 60% ,rgba(255,0,0, 0.9)); */
        background:linear-gradient(15deg, orange , rgba(255,0,0, 0.75) , rgba(255,0,0, 0.6) 50% ,orange);
        border: 30px;
        font-weight: bolder;
        border: outset;
        color: #fff ;
        font-size: 10pt;
        font-family: Arial;
        box-shadow:  8px 8px 8px #666;
        border-radius: 9px;
        
     }
     
/*Schaltflächen für Navibutton2 */
.naviextra {
        width: 175px;
        background-color: #BCCBFF;
        background:linear-gradient(75deg,  rgba(255,0,0, 0.75) , orange , orange 50% ,rgba(255,0,0, 0.6));
        color: #0000ff ;
        font-size: 11pt;
        font-family: Arial;
        font-weight: bolder;
        border-color: #800000;
        box-shadow:  8px 8px 8px #666;
        border-radius: 9px;
        margin-top: 10px;
        height: 40px;
    }  

/*hover für beide Arten von Navibuttons */ 
.navinorm:hover , .naviextra:hover, .navinorm:focus , .naviextra:focus  {
    /*background-color: #2C8ECE;*/
   /* background:linear-gradient(45deg, #444 , #ff0000 20% ,yellow 90%); */
    background:linear-gradient(45deg, rgba(0, 100, 100, 0.9) , rgba(255,0,0,0.5) 20% ,rgba(255, 255, 0,0.5) 90%);
    color: black;
    border: transparent;   
    box-shadow:  8px  8px 9px rgba(48, 216, 6 ,0.5);
}    



 .flash {
        animation: flashpuls 0.3s infinite;
        animation-iteration-count: infinite;
        text-shadow: 3px 3px 5px purple;    
    }   
  @keyframes flashpuls{
          0% {transform: scale(1 , 1)  rotate(0deg) ; text-shadow:3px 3px 5px purple; color:#aaaeff}
          50% {transform: scale(1.2 , 0.9) rotate(8deg); text-shadow:3px 3px 15px blue; color:#fbdeaf}
          100% {transform: scale(1 , 1) rotate(1deg); text-shadow:3px 3px 70px yellow;color:#aaaeff}
    }
    
.slowflash {
        animation: slowflash 20s infinite;
        animation-iteration-count: infinite;
        text-shadow: 3px 3px 5px purple;
    }    
@keyframes slowflash{
          0%  { text-shadow:3px 3px 5px purple; color:#cafeff}
          10% { text-shadow:3px 3px 15px blue; color:#CAFFDE}
          20% { text-shadow:3px 3px 5px blue; color:#fbdeaf}
          30% { text-shadow:3px 3px 15px blue; color:#fbdeaf}
          40% { text-shadow:3px 3px 5px purple; color:#D9FFCA}
          50% { text-shadow:3px 3px 15px blue; color:#FFFFCA}
          60% { text-shadow:3px 3px 5px blue; color:#FFDACA}
          70% { text-shadow:3px 3px 15px blue; color:#FFCAE6}
          80% { text-shadow:3px 3px 5px purple; color:#CACDFF}
          90% { text-shadow:3px 3px 15px blue; color:#fbdeaf}
          100% { text-shadow:3px 3px 5px purple;color:#cafeff}
          
    }    
    
    
/*          schnellblinkende Schrift       */
.blitzer {
        animation: blitzerani 0.3s infinite;
        animation-iteration-count: infinite;
        text-shadow: 3px 3px 5px white;
}    
 @keyframes blitzerani{
          0% {  text-shadow:3px 3px 5px purple; }
          50% { text-shadow:3px 3px 15px blue; }
          100% { text-shadow:3px 3px 40px yellow;}
    }
    
    
    
   
/* BESONDERHEITEN SO WEIT WIE HINTEN POSITIONIEREN */

/*schaltet hintergrund auf Transparent - da standard TAG's dies vielleicht nicht sind, ist das sinnvoll */
.transparent {
    background-color: transparent;
    border: transparent;    
}

 /* markante rote Schrift */
    .markorange {
        font-size: 12pt;
        font-family: Arial;
        color: #000000;
        text-shadow: 3px 3px 4px #fddc90,
                     3px 3px 14px #ff0000,
                     -3px -3px 4px #ffdc90; 
}     


#loginbutton {
    font-size: 20pt;
    background-color: #ccc;
    color: #7abbef;
    font-weight: bolder;
    border-radius: 9px; 
     
}