body { background-color: #000000 }
div, td { /* td rule for IE9 */
    font-family: 'Quantico', Verdana, sans-serif;
}
.panel {
    color: #dddddd;
    background-color: rgba(10, 66, 16, 0.7);
    border: 3px #106012 solid;
    margin-bottom: 10px;
    padding: 10px 10px 0 10px;
    max-width: 600px;
}
.skew_rounded {
    border-radius: 15px 15px 3px 15px;
}

.shadow {
    box-shadow: 5px 5px 7px #0a4210;
}
.hud {
    background: url('../hud_bg_green.png') 0 0 repeat;
    color: #ffffff;
}
.hidden {
    display: none;
}
div.centered {
    width: 100%;
    text-align: center;
}
h1, h2 {
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 0.3em;
}
h1 {
    font-size: 150%;
}
h2 {
    font-size: 100%;
}
p, .panel_item {
    margin-bottom: 1em;
}
li {
    margin-bottom: 0.5em;
}
li:last-of-type {
    margin-bottom: 0;
}
#main_container {
    padding: 10px;
}
#main_panel {
    height: 300px;
}
#button_area, #led_area {
    margin-top: 20px;
    max-width: 624px;
}
.button_container, .led_container {
    display: inline-block;
    position: relative;
    margin: 0 20px;
    width: 73px;
}
.button_container {
    height: 73px;
}
.led_container {
    height: 38px;
}
.button_container img, .led_container img {
    position: absolute;
}
.button_container img {
    cursor: pointer;
    left: 0;
}
.led_container img {
    left: 20px;
}
.button_container img, .led_container img {
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
.button_container img.transparent, .led_container img.transparent {
    opacity:0;
}

/********************
 MEDIA QUERIES
********************/

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
    body { background: #000000 url('../bg_480_480.png') repeat-y }
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {

}

/* Smartphones (landscape only) ----------- */
@media only screen
and (min-width : 321px) and (max-width : 480px) {
    html {
        -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
    }
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {

}

/* Wider than smartphone (landscape) ----------- */
@media only screen
and (min-width : 481px) {
    body { background: #000000 url('../bg_1024_1024.png') repeat-y }
}

/* Wider than pad (landscape) ----------- */
@media only screen
and (min-width : 1025px) {
    body { background: #000000 url('../bg_large.png') repeat-y }
}