/* 
    Document   : main
    Created on : 2013-nov-05, 22:45:38
    Author     : Philip
    Description:
        Purpose of the stylesheet follows.
*/

body { 
    display: block;
    border: 0;
    margin: 0;
    
    overflow:hidden;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    user-select: none;
    user-drag: none;
    
    cursor: default;
    
    background-image: url('background.png'), rgba(240,197,180,1);
    background-image: url('background.png'), -moz-linear-gradient(left, rgba(240,197,180,1) 0%, rgba(117,91,138,1) 100%);
    background-image: url('background.png'), -webkit-gradient(left top, right top, color-stop(0%, rgba(240,197,180,1)), color-stop(100%, rgba(117,91,138,1)));
    background-image: url('background.png'), -webkit-linear-gradient(left, rgba(240,197,180,1) 0%, rgba(117,91,138,1) 100%);
    background-image: url('background.png'), -o-linear-gradient(left, rgba(240,197,180,1) 0%, rgba(117,91,138,1) 100%);
    background-image: url('background.png'), -ms-linear-gradient(left, rgba(240,197,180,1) 0%, rgba(117,91,138,1) 100%);
    background-image: url('background.png'), linear-gradient(to right, rgba(240,197,180,1) 0%, rgba(117,91,138,1) 100%);
}

.planet {
    position: absolute;
    width: 400px;
    height: 400px;
    margin-left: -200px;
    margin-top: -200px;
    background-size: 100%;
}

#items {padding-left: 200px; padding-top: 200px; width: 200px; height: 200px;}
#dead {background-image: url('mars.png');}
#alive {background-image: url('earth.png');}

.thermal {background-image: url('thermal.png');}
.solar {background-image: url('solar.png');}
.magnesium {background-image: url('magnesium.png');}
.titanium {background-image: url('titanium.png');}

.teslacoil {background-image: url('teslacoil.png');}
.soil {background-image: url('soil.png');}
.cactus {background-image: url('cactus.png');}
.tree {background-image: url('tree.png');}

.hidden {
    position: absolute;
    left: -100px;
}

.fb-share-button {
    top: -1px !important;
}
#___plusone_0, #twitter-widget-0 {
    vertical-align: bottom !important;
}

#instructions
{
    background-image: url('arrow.png');
    height: 60px;
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 100%;
}

.item {
    position: absolute;
}

#scores
{
    padding: 6px;
    position: absolute;
    width: 100%;
    height: 22px;
    background-color: rgba(255, 255, 255, 0.2);
    text-align: center;
}

a {
    color: darkblue;
}

#info
{
    padding: 0; margin: 0;
    width: 100%;
    height: 30px;
    
    position: fixed;
    bottom: 0;
    width: 100%;
    
    background-color: rgba(255, 255, 255, 0.2);
    text-align: center;
}

.score{
    display: inline-block;
    width: 200px;
    text-align: center;
}

#buttons
{
    position: absolute;
    left: 0%;
    top: 50%;
    
    height: 400px;
    margin-top: -200px;
}

.button
{
    padding: 5px;
    margin: 5px;
    width: 200px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.4);
}

.button:hover
{
    background-color: rgba(255, 255, 255, 0.6);
}

.button.disabled{
    color: rgb(100, 100, 100);
    background-color: rgba(255, 255, 255, 0.1);
}

#level {
    width: 1024px;
    height: 600px;
    
    left: 50%;
    top: 50%;
    margin-left: -512px;
    margin-top: -300px;
    
    background-color: lightblue;
}

#test {
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
    background-color: red;
}