/**
* @file starfield.css
* @author Ng Guoyou
*/

/**
* @section Element styles
*/

/**
* Set background colour and animate background-color transitions for colorise in js.
*/
body {
    background-color: #111;
    margin: 0;
    transition: background-color 0.66s;
    -ms-transition: background-color 0.66s;
    -moz-transition: background-color 0.66s; /* Firefox 4 */
    -webkit-transition: background-color 0.66s; /* Safari and Chrome */
    -o-transition: background-color 0.66s; /* Opera */
}

/**
* Set fallback text for browsers that do not support <canvas>.
*/
canvas {
    text-align: center;
    color: #DDD;
    font-family: "Georgia", "Arial", "Helvetica", serif;
    font-size: 36px;
}

input {
    height: 40px;
    margin: 5px 0;
    padding: 0 0 0 5px;
    background-color: #222;
    color: #FFF;
    border: 0px;
    border-radius: 5px;
}

input:focus {
    border-color: #3EC6D8;
}

audio {
    width: 250px;
}

a {
    width: 100%;
    height: 100%;
    color: white;
    text-align: center;
}

a:visited {
    color: white;
}

/**
* Set cursor to a hand to indicate an interactable canvas. Toggled in JS.
*/
.grabbable {
    cursor: hand;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.grabbing {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}



/**
* @section Starfield settings styles
*/

/**
 * Sets the toolbox position
 */
#starcontrol {
    position: fixed;
    left: 5px;
    top: 5px;
    padding: 40px 20px 40px 20px;
}

#starcontrol:hover {
    opacity: 1;
    transition: all 0.2s;
}

#starcontrol-glow {
    padding: 5px;
    border-radius: 5px;
    width: 45px;
}

#starcontrol-audify {
    padding: 0 5px;
}

/**
 * Extra margin to group related settings
 */
.spacer {
    margin: 15px 0 0 0;
}

/**
 * Button setting style.
 */
.button {
    width: 20px;
    height: 20px;
    padding: 10px;
    margin: 5px;
    background-color: #222 !important; /* inactive assumed if not active */
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 80% !important;
    border-radius: 3px;
    cursor: pointer;
    color: white;
    text-align: center;
}

/**
 * Lightens background.
 */
.button:hover {
    background-color: #333 !important;
}

/**
 * Lightens background and makes it glow.
 */
.button:active {
    background-color: #444;
    box-shadow: 0 0 10px #3EC6D8;
}

.touch-control {
    width: 34px;
    height: 34px;
    font-size: 32px;
}

/**
 * Style for active toggled buttons.
 */
.control-active {
    background-color: #444 !important;
    box-shadow: 0 0 10px #3EC6D8;
}

#control-info {
    width: 20px;
}

/**
 * Utility
 */
.hide {
    display: none;
}

.float {
    float: left;
}

 #debug {
    display: none;
    color: white;
 }

 .fade {
    opacity: 0;
    transition: all 2.5s;
}