body{
    padding:1em !important;
}
#instructions{
    font-size: 2em;
}
#main{
    max-width:98%;
    left:inherit;
}
#question{
    text-align:center;
}
#incorrectChoiceBox{
    font-size:3em;
    text-align:center;
    color:red;
}
#answerBox{
    font-size:3em;
    text-align:center;
    color:green;
}
#popupDialog{
    text-align:center;
}
#progress {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #f6f6f6;
    font-weight: 700;
    text-align: center;
    padding: 0 1em;
    border-left: 20px solid #f3f3f3;
    border-bottom: 20px solid #f3f3f3;
    border-top: 20px solid #f3f3f3;
    border-style: groove;
}
.space{
    padding:1em;
}
.underline{
    text-decoration:underline;
}
#question {
    font-size: 5em;
}
.ui-btn {
    font-size: 3em;
}
/* for the larger text blocks */
.border {
    border:1px solid black;
    margin: 0.5em;
    padding: 0.5em;
    text-align:left;
}
/* for the numbered questions */
.box{
    border:2px solid black;
    padding: 2px;
    margin: 2px;
}
.header{
    font-weight:bolder;
}
.center{
    text-align:center;
}
/* for mobile devices in portrait */
@media only screen and (orientation:portrait) {
    #progress{
        font-size:3em;
    }
}

/* landscape */
@media only screen and (orientation:landscape) {
    #progress{
        font-size:1em;
    }
    #possibleAnswers{
        text-align:justify;
        font-size:1.5em;
    }
}
@media (min-width : 1000px) {
    .ui-btn {
        font-size: 1em;
    }
    #possibleAnswers {
        font-size: 2em;
    }
    #question {
        font-size: 2em;
    }
}