html {
    min-height:100%;
}

body {
    background-image:url('../images/clouds.jpg');
    background-size:cover;
    background-repeat:no-repeat;
    background-position:0px;
    min-height:100%;
}

#header {
    margin-top:30px;
    margin-bottom:20px;
    text-align:center;
}

#header, #header h1, #header a {
    color:white;
}

#menu {
    margin-top:50px;
}

#menu .button {
    font-size:16px;
    padding:12px 10px;
}

#menu #play {
    font-size:24px;
    padding:16px 10px;
}

.main {
    border: 1px solid #ccc;
    padding-left:20px;
    padding-right:20px;
    padding-top:20px;
    padding-bottom:0px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background:rgba(255,255,255, 0.7);
}

.main, #output {
    margin-top:40px;
}

.message {
    border: 1px solid #ccc;
    padding:10px 20px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background:rgba(255,255,255, 0.7);
}

.message .dismiss {
    float:right;
}

.message.success {
    border: 1px solid #3e7030;
    background:rgba(125,225,100, 0.7);
}

#output {
    width:930px;
    max-width:100%;
    height:400px;
    font-family:monospace;
    font-size:14px;
}

#options-table input {
    display:inline-block;
    margin-left:10px;
}

#options-table tr {
    height:50px;
}

/* #Media Queries
================================================== */

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}