@font-face {
  font-family: 'PressStart';
  font-style: normal;
  font-weight: 400;
  src: local('Press Start 2P'), local('PressStart2P-Regular'), url(http://themes.googleusercontent.com/static/fonts/pressstart2p/v2/8Lg6LX8-ntOHUQnvQ0E7o3dD2UuwsmbX3BOp4SL_VwM.woff) format('woff');
}

@font-face {
  font-family: 'Audiowide';
  font-style: normal;
  font-weight: 400;
  src: local('Audiowide'), local('Audiowide-Regular'), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

.EnergyCosts{
    
    float:left;
  //  Background-color: lightgrey;
    margin-left: 1vw;
    width:  2vw;
    height: 100%;
    
    color: #fff;
    font-family: 'Press Start 2P';
  
   line-height: 5.5vh;
   font-size: 1.5vh;
   
   user-drag: none; -moz-user-select: none; -webkit-user-drag: none;
    
}

.EnergyImages{
    float:left;
    
    width:  3vw;
    height: 3vw;
    Background-color: yellow;


}

.EnergyNames{
    float:left;
   // Background-color: lightgrey;
    margin-left: 1vw;
    width:  10vw;
    height: 100%;
    
    color: #fff;
    font-family: 'Press Start 2P';
  
   line-height: 5.5vh;
   font-size:   1.5vh;
   
   user-drag: none; -moz-user-select: none; -webkit-user-drag: none;
    
}


#title{
    
    width: 40vw;
    height: 70%;   
   
    margin-top:2vh;
    margin-left:auto;
    margin-right:auto;
    
    
    color: #fff;
    font-family: 'Press Start 2P';
    
    
   -webkit-animation: neon4 1.5s ease-in-out infinite alternate;
   -moz-animation: neon4 1.5s ease-in-out infinite alternate;
    animation: neon4 1.5s ease-in-out infinite alternate;
  
  
    font-size: 8vh;
    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -user-select: none;
    
}



body {
    margin: 0;
    text-align: center;
}
 
 
#MainWindow{
    

    position:relative;
    background-color: darkgray;
    width:100%;
    height:100%;
    overflow: hidden;

    
}



#TopSection{
    
    position:absolute;
    width: 99%;
    height: 18%;
    margin:0.3vw;

    user-drag: none; -moz-user-select: none; -webkit-user-drag: none;
    
}

.TopSpalten{
    
    position: relative;
    
    height: 95%;
    
    margin:0.1vw;
    float:left;
    
}

#TopSectionLinks{
    

    width: 24%;
    z-index:3;
    
}

#DebuggWindow{width: 99%; height: 80%;}

#TopSectionMitte{
    
    width: 50.2%;
    z-index:3;
    
}

#TopSectionRechts{
    
   width: 24%;
    z-index:3;
    
}


.SettingsReihe{
    
    float: right;
    width:     95%;
    height:     28%;
    margin:     0.1vw;
    z-index:     3;
    
    
}



#titleSpacer{
    
    width: 100%;
    height: 15%;

    
}



#MiddleSectionWrapper{
    
    position:relative;
    width: 99%;
    height: 88%;
    margin:0.3vw;
    margin-bottom:0.2vw;
 
     
}


#MiddleSectionGame{
    
    position:absolute;
    width: 100%;
    height: 100%;
    margin-top:0%;
    z-index: 2;
 
     
}

#SellUpgradeItem
{
    position:absolute;
    width: 9.5vw;
    height: 4.8vw;
    z-index: 20;
    background-color: rgba(250,250,250,0.6);
    border-radius: 1vw;
    
}



#UpgradeItem    
{
    float:top;
    height: 1.8vw;
    width: 8.6vw;
    margin:0.4vw;
    border-radius: 1vw;
    background-color: rgba(0,50,250,0.8);
    
    color: rgba(255,255,255,0.8);
    font-family: 'Press Start 2P';
    font-size: 0.65vw;
    line-height: 1.6vw;
    
    user-drag: none; -moz-user-select: none; -webkit-user-drag: none;
}

#SellItem   
{
    float:top;
    height: 1.8vw;
    width: 8.6vw;
    margin:0.4vw;
    border-radius: 1vw;
    background-color: rgba(250,0,50,0.7);
    
    color: rgba(255,255,255,0.7);
    font-family: 'Press Start 2P';
    font-size: 0.65vw;
    line-height: 1.6vw;
    
    user-drag: none; -moz-user-select: none; -webkit-user-drag: none;
}

#ItemsInfo
{
    position:absolute;
    width: 6vw;
    height: 6vw;
    z-index: 20;
    background-color: rgba(250,0,50,0.7);
    border-radius: 1vw;
    
    padding-top:1em;
    margin-top:-1em;
    color: rgba(255,255,255,0.9);
    font-family: Impact;
    font-size: 1vw;
    line-height: 1.6vw;

    
    user-drag: none; -moz-user-select: none; -webkit-user-drag: none;
    
}

#SellItem:hover { background-color: rgba(250,0,50,1); width: 8.9vw;}
#UpgradeItem:hover { background-color: rgba(0,50,250,1);width: 8.9vw;}

#SellItem:active { background-color: rgba(250,0,50,0.4);}
#UpgradeItem:active { background-color: rgba(0,50,250,0.4);}




#MiddleSectionMenue{
    
    position:absolute;
    width: 100%;
    height: 100%;
    margin-top:0%;
 
     
}

.spalten{
    
    position: relative;
    height: 100%;
    background-color: rgba(100,100,100,0.5);   
    
}

#LinkeSpalte{
    
    float:left;
    width: 23%;
    z-index:3;
    
}

#RechteSpalte{
    
    float:right;
    width: 23%;
    z-index:3;
    
}

#LeftMenue{float:left;width:85%;height:98%;margin:0.3vw;margin-right:0;overflow:hidden;}

#LeftSwitcher{float:right;width:2vw;height:98%;margin:0.3vw;margin-left:0;background-color: rgba(100,100,100,0.5);}

#RightSwitcher{float:left;width:2vw;height:98%;margin:0.3vw;margin-right:0;background-color: rgba(100,100,100,0.5);}

#RightMenue{float:right;width:85%;height:98%;margin:0.3vw;margin-left:0;overflow:hidden;}


.TopMenueArea{
    
    width: 100%;
    height :23%;
    margin-top: 2%;
    margin-bottom: 2%;
    background: rgba(100,100,100,1);
    opacity:0.8;  
    
}


.Upgrades{

    border: 4px outset graytext !important;
    
    width: 98%;
    height :7%;
    margin-bottom: 1%;
    background: orange;
    opacity:0.8;
    
    color: #fff;
    font-family: 'Press Start 2P';  
    overflow: hidden;
    
}


#MittelSpalte{
    
    width: 40%;
    height :20%;
    margin-left:auto;
    margin-right:auto;
    z-index:3;
    
}



#MusicController{
    
    width:100%;
    height:100%;
    z-index:5;
    display: block;
    margin: 0 auto;
    user-drag: none; -moz-user-select: none; -webkit-user-drag: none;
   
    
}


#GameArea{
    
    width:100%;
    height:100%;
    background: black;
    display: block;
    margin: 0 auto;
    user-drag: none; -moz-user-select: none; -webkit-user-drag: none;
    
}




#BottomSection{
    
    position:absolute;
    width: 99%;
    height: 10.8%;
    margin:0.3vw;
    margin-top:0;
    background-color: black;
    z-index: 11;
  
}


#ProgressBar{
    
    float:left;
    width: 0%;
    height: 100%;
   
    
}

#LevelItemsWrapper{
    
    position: absolute;
    width: 100%;
    height: 100%;

    
}

#LevelItems{
    
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2vh;
    width: 20%;
    height: 6%;
    
    font-family: 'Press Start 2P';
    color: yellow;
    font-size: 7vh;
    text-align: center;
    
    
}


@-webkit-keyframes neon4 {
  from {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 80px #B6FF00;
  }
  to {
    text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 7px #fff, 0 0 10px #B6FF00, 0 0 17px #B6FF00, 0 0 42px #B6FF00, 0 0 25px #B6FF00, 0 0 35px #B6FF00;
  }
}


@-moz-keyframes neon4 {
  from {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 80px #B6FF00;
  }
  to {
    text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 7px #fff, 0 0 10px #B6FF00, 0 0 17px #B6FF00, 0 0 42px #B6FF00, 0 0 25px #B6FF00, 0 0 35px #B6FF00;
  }
}


@keyframes neon4 {
   from {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 80px #B6FF00;
  }
  to {
    text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 7px #fff, 0 0 10px #B6FF00, 0 0 17px #B6FF00, 0 0 42px #B6FF00, 0 0 25px #B6FF00, 0 0 35px #B6FF00;
  }
}