body.quizPage, body.mainPage {
background-color: #000;
font-size: 1em;
font-family: 'Roboto', Tahoma, sans-serif;
}

body.quizPage #mainContainer {
width: 98%;
max-width: 1000px;
min-height: 620px;
margin: 1em auto;
overflow: hidden;
}

body.mainPage #mainContainer {
width: 98%;
max-width: 850px;
min-height: 470px;
font-size: 1em;
font-family: 'Roboto', Tahoma, sans-serif;
margin: 1em auto;
padding: .5em;
background-color: #f9f9f9;
border: 10px solid #5C6498;
border-radius: 20px;
box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	display: table;
overflow: hidden;
}

button, input {
outline: 0;
cursor: pointer;
}


#resultsContainer {
width: 60%;
max-width: 650px;
height: 470px;
font-size: 1em;
font-family: 'Roboto', Tahoma, sans-serif;
text-align: center;
margin: 1em auto;
padding: .5em;
background-color: #f9f9f9;
border: 10px solid #5C6498;
border-radius: 20px;
box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	display: table;
overflow: hidden;
}

#resultsContainer input, #resultsContainer button {
font-size: 1.6em;
width: 46%;
margin: .5em 1%;
padding: .5em;
border-radius: 15px;
color: #f0f0f0;
background-color: #22255A;
border: none;
cursor: pointer;
}

#resultsContainer input:hover, #resultsContainer button:hover {
background-color: #5C6498;
}

h1 {
font-size: 2.5em;
margin-bottom: .2em;
}

h2 {
font-size: 1.3em;
}

h3 {
font-size: 1.2em;
margin: .2em 0;
}

.mainPage h1, .mainPage h3 {
text-align: center;
}

#resultsContainer p {
font-size: 1.3em;
}

header {
width: 69%;
margin: 0 1% 1em 0;
padding-bottom: .6em;
border-bottom: 2px solid #22255A;
float: left;
}

#resultsContainer header {
width: 100%;
float: left;
padding-bottom: .6em;
border-bottom: 2px solid #22255A;
text-align: center;
}

.rScore {
font-size: 6em;
}

.mainContent {
width: 67%;
padding: .2em 2% .2em 1%;
font-size: 1.1em;
}
.mainContent p {
line-height: 1.4em;
}


#sidebar {
width: 30%;
float: right;
margin-bottom: 1em;
}

#sidebar h2 {
border-bottom: 1px solid #22255A;
margin-bottom: .2em;
}

#sidebar ul, #sidebar li {
list-style: none;
padding-left: 0;
}

footer {
width: 100%;
float: left;
clear: both;
text-align: center;
margin-top: 1em;
}

footer button {
width: 30%;
margin: 0 1%;
padding: 1em 0;
border-radius: 15px;
outline: 0;
color: #f0f0f0;
background-color: #10184E;
border: none;
cursor: pointer;
}

footer button span {
font-size: 1.5em;
font-weight: bold;
}

footer button:hover {
background-color: #5C6498;
}

.contactPage input, .contactPage textarea {
padding: .6em;
margin-top: .3em;
border: 1px solid #ccc;
border-radius: 5px;
max-width: 98%;
outline: 0;
}

.contactPage textarea {
width: 98%;
}

#leftColumn, #rightColumn {
width: 18%;
float: left;
min-height:100px;
}

#questionContainer {
width: 60%;
float: left;
height: 470px;
margin: 0 1% .2em;
background-color: #f9f9f9;
text-align: center;
font-size: 2.5em;
border: 10px solid #5C6498;
border-radius: 20px;
box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	display: table;
overflow: hidden;
}
#questionWrapper {
display: inline-block;
padding: .2em;
vertical-align: middle;
display: table-cell;
}

#questionWrapper img {
max-width: 95%;
margin-top: .5em;
max-height: 250px;
}

#questionWrapper button {
font-size: 1.2em;
padding: .2em 1em;
margin-top: .5em;
border-radius: 10px;
color: #F3F3F3;
background-color: #610F63;
cursor: pointer;
display: inline-block;
border: none;
outline: 0;
}
#questionWrapper button:hover {
background-color: #771379;
}

#answerContainer {
width: 100%;
float: left;
clear: both;
}

#timer, #questionCount, #qCountCont {
color: #EAEAEA;
width: 100%;
background-color: #530D54;
border-radius: 15px;
text-align: center;
padding: 1.5em 0 1em;
margin-bottom: 1em;
}

#questionCount span#qNo, #timer span, #qCountCont span {
font-size: 6em;
letter-spacing: -8px;
text-align: center;
text-indent: -8px;
}

#timer span, #qCountCont span {
display: block;
}

#questionCount span#qNo {
display: inline-block;
margin-right: .1em;
}

#qCountCont span {
letter-spacing: -8px;
text-align: center;
text-indent: -8px;
}

#answerContainer button {
width: 49%;
float: left;
border-radius: 20px;
margin: .3em .5%;
font-size: 1.5em;
border: none;
box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	background-color: #5C6498;
    border: none;
    color: #fff;
    padding: .8em 0;
    text-align: center;
    text-decoration: none;
    display: inline-block;
	cursor: pointer;
}

button:focus {outline:0;}

.errorList {
border: 3px solid red;
padding: .5em .5em .5em 1.5em;
}

div.message {
border: 3px solid #19EC3D;
padding: .6em;
}

ul.footerMenu {
color: #f7f7f7;
width: 100%;
display: block;
text-align: center;
padding: 0;
margin-bottom: .5em;
}

ul.footerMenu li {
display: inline-block;
padding: 0 1em;
}

ul.footerMenu li a {
color: #E2E2E2;
text-decoration: none;
}

ul.footerMenu li a:hover {
text-decoration: underline;
}