
body {
    padding-top: 2em;
    font-family: 'Lucida Sans', 'Trebuchet MS', Arial, sans-serif;
}
.container {
    background-color: #ddd;
    margin-top: 2em;
    margin: auto;  /* center the div */
    width: 750px;
    height: 500px;
    box-shadow: -.5em -.5em .5em #808080;
    border-radius: 2em;
}
.gameTitle {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 4em;
    text-align: center;
    text-shadow: 2px 2px #fff;
    margin-bottom: 20px;
}
#pressStart, #startText {
    padding: 40px 0 20px 0;
}
.mainSection {
    width: 100%;
    height: 320px;
}
.questionLabel, .congratsLabel, .answerResponseLabel {
    font-size: 2.2em;
    text-align: center;
    font-weight: bold;
}
.choicesSection {
    margin-top: .5em;
}
.choiceBorder {
    border-radius: .6em;
    border-width: .1em;
    border-color: #ccc;
    border-style: solid;
    width: 75%;
    margin: auto;
    margin-bottom: .1em;
}
.choice, .finalResultsLabel {
    border-radius: .2em;
    font-size: 2em;
    text-align: center;
}
.choiceBorder:hover {
    visibility: visible;
    background-color: #aaa;
    box-shadow: .1em .1em .1em #aaa;
}
.mouseDown {
    border-top-color: #777;
    border-left-color: #777;
    border-bottom-color: #eee;
    border-right-color: #eee;
}
.correctAnswerIsLabel {
    margin: .8em 0 .4em 0;
    font-size: 1em;
    text-align: center;
}
.correctAnswerLabel {
    border-radius: .2em;
    font-size: 2em;
    text-align: center;
}
.timeRemainingLabel {
    margin: 1em 0 .5em 0;
    font-size: 1em;
    text-align: center;
}
.timeProgress {
    background-color: #eee;
    width: 75%;
    margin: auto; /* to center it */
    border: .2em;
    border-radius: .2em;
    border-style: solid;
    border-top-color: #555;
    border-left-color: #555;
    border-bottom-color: #fff;
    border-right-color: #fff;
}
.timeProgressBar {
    background-color: #888;
    width: 99%;
    height: .3em;
    border: .2em;
    border-style: solid;
    border-top-color: #fff;
    border-left-color: #fff;
    border-bottom-color: #555;
    border-right-color: #555;
}
#finalResult {
    padding: 40px 0 40px 0;
}
.makeInvisible {
    visibility: hidden;
}
.makeVisible {
    visibility: visible;
}
#imgDiv, #answerGif {
    padding-top: 5px;
    width: 250px;
    margin: auto;
}

/* Theme background and colors (blue sky) */
body {
    background-color: #bbb;
}
.container {
    background-color: #D0E4F2;  /*<==Customize==>*/
    background-image: url("../images/PalisadeHead.jpg");   /*<==Customize==>*/
    background-repeat: no-repeat;
}
.gameTitle {
    color: #0D4FA6;  /*<==Customize==>*/
}
.choiceBorder {
    border-color: #D0E4F2;  /*<==Customize==>*/
}
.choiceBorder:hover {
    background-color: #D0E4F2;  /*<==Customize==>*/
    box-shadow: .1em .1em .1em #aaa;
}
.timeProgress {    
    background-color: #85A5CC;  /*<==Customize==>*/
}
.timeProgressBar {
    background-color: #1E82D9;  /*<==Customize==>*/
}