*
{
  margin: 0px;
}  
html, body
{
  font-family: Sans-serif;
  height: 100%;        
}      
body 
{
  background-color: #00A3EF;  
  background-attachment: fixed;
  background-image: -ms-linear-gradient(bottom, #A7EFEA 0%, #00A3EF 100%);
  background-image: -moz-linear-gradient(bottom, #A7EFEA 0%, #00A3EF 100%);
  background-image: -o-linear-gradient(bottom, #A7EFEA 0%, #00A3EF 100%);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #A7EFEA), color-stop(1, #00A3EF));
  background-image: -webkit-linear-gradient(bottom, #A7EFEA 0%, #00A3EF 100%);
  background-image: linear-gradient(to top, #A7EFEA 0%, #00A3EF 100%);       
}  
.wrapper
{
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -20px;
  background-image: url('bg2.svg');  
  background-size: 1000px;
  background-repeat: no-repeat;
  background-position: 0px 40px;
}    
.top, .footer
{
  width: 100%;           
  background: white;
  text-align: center;
  display: table;        
}
.top, .footer
{
  -webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.65);
  -moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.65);
  box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.65); 
}      
.top
{    
  border-bottom: 3px solid #404040;                  
} 
.footer
{
  border-top: 3px solid #404040;  
  height: 20px;
}      
.content
{  
  text-align: center;
  width: 100%;
  height: 100%;
  padding-top: 40px;        
}      
.tile
{
  text-align: right;
  color: white;
  display: inline-block;
  width: 300px;
  height: 160px;
  margin: 20px;
  background-color: rgba(64,64,64,0.6);       
  background-repeat: no-repeat;
  background-position: left top;          
  padding: 140px 15px 15px 15px;                
} 
.tile_content, .page_content
{         
  display: inline-block;
  color: white;
  font: bold 4em arial;
  border-top: 1px solid white;  
  text-align: center;
  width: 100%              
} 
.page
{
  display: inline-block;
  width: 690px;
  min-height: 200px;  
  margin: 20px;
  color: white;
  text-align: right;
  background-color: rgba(64,64,64,0.6);       
  background-repeat: no-repeat;
  background-position: left top;          
  padding: 140px 15px 15px 15px;            
} 
.page_content
{
  text-align: justify;
  font: inherit;
}       

#name, #menu, #power
{
  display: table-cell;
  vertical-align: middle;
  width: auto;
  text-align: center;
}
#power
{
  text-align: right;
  padding-right: 15px;
  width: 150px;
}      
#name
{
  color: #404040;    
  font: bold 2em Arial;    
  padding-left: 15px;
  width: 150px;  
  text-align: left;       
}  
#power_container
{
  text-align: right;
  display: table;
}    
#battery
{
  text-align: right;
  padding-left: 40px;
  background: url('supply.gif') no-repeat left top;
  display: table-cell;
  vertical-align: middle;
  height: 40px; 
  width: 50px;   
  font-weight: bold;        
}
#supply
{
  display:table-cell;
  padding-left: 60px;
  background: url('supply.gif') no-repeat right;
  background-position: 0px -160px;
}

.button
{        
  display: inline-block;
  text-decoration: none;
  color: black;
  padding: 0.5em 1em 0.5em 1em;
  font: bold 1.1em arial;        
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s; 
  transition-duration: 0.5s; 
}    
.button:hover
{
  background: #707070;
  color: white;          
}