@import url("https://fonts.googleapis.com/css?family=Merriweather|Raleway");
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, textarea, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block; }

body {
    background-color: #F5E9BE;
    line-height: 1; 
}

ol, ul {
    list-style: none; }

blockquote, q {
    quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none; }

table {
    border-collapse: collapse;
    border-spacing: 0; }



/*******************************************
GENERAL CSS STYLING
********************************************/
* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

div#noScriptBox {
    display: block;
    width: 100%;
    max-width: 600px;
    height: auto;
    background-color: #2e2e2e;
    text-align: center;
    padding: 20px;
    margin: 20px auto;
}

div#noScriptBox p.noscript {
    font-family: 'Merriweather', serif;
    font-size: 1.4rem;
    line-height: 1.5;
    color: red;
}

div#noScriptBox a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    line-height: 1.5;
    text-decoration: none;
    color: red;
}

div#noScriptBox a:hover {
    color: #F19F4D;
}


.disable {
    background-color: #999999; }

.correct {
    background-color: green; }

.wrong {
    background-color: red; }

.wrongText {
    color: red; }

body {
    background-color: #F2F2F2; }

/*******************************************
TYPOGRAPHY CSS STYLING
********************************************/
h1, h2, h3, th {
    font-family: 'Merriweather', serif; }

p, td {
    font-family: 'Raleway', sans-serif; }

/* SMARTPHONE STYLING */
@media only screen and (max-width: 480px) {
    div#container {
        display: block;
        width: 100%;
        max-width: 100%;
        height: 100%;
        background-color: #F5E9BE;
        padding: 0;
        margin: 0; 
    }



    /*******************************************
    HEADING CSS STYLING
    ********************************************/
    header#heading {
        display: block;
        width: 100%;
        max-width: 100%;
        height: 60px;
        background-color: #2E2E2E;
        text-align: center;
        line-height: 30px;
        padding: 0;
        margin: 0;
    }
    header#heading h1 {
        font-size: 1.0rem;
        color: #fff; 
    }
    header#heading h1 span#toxic {
        font-size: 1.2rem;
        color: #F19F4D; 
    }
    header#heading h2#subheading {
        display: block;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.8rem;
        line-height: 1.0;
        color: lightgreen;
        font-style: italic; 
    }

    nav.nav-bar {
        display: none;
    }    

    /*******************************************
    Game CSS STYLING
    ********************************************/
    form#categories-form {
        display: block;
        width: 100%;
        max-width: 100%;
        height: 150px;
        background-color: lightblue;
        padding: 20px;
        margin: 0;
    }
    form#categories-form label {
        display: block;
        width: 100%;
        max-width: 100%;
        height: 40px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.2rem;
        line-height: 40px;
    }
    form#categories-form select {
        float: left;
        width: 100%;
        max-width: 240px;
        height: 50px;
        border: none;
        outline: none;
        background-color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.0rem;
        color: #2E2E2E;
        text-transform: uppercase;
    }    
    input[type=submit] {
        float: left;
        display: inline-block;
        outline: none;
        border: none;
        width: 100%;
        max-width: 100px;
        height: 30px;
        cursor: pointer;
        background-color: #2E2E2E;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.0rem;
        color: #fff;
        text-transform: uppercase;
        padding: 5px;
        margin: 10px 0 0 15px;
    }   
    input[type=submit]:hover {
        background-color: #336699;
    }    

    #textContainer {
        position: relative;
        display: none;
        width: 100%;
        max-width: 500px;
        height: 50px;
        background-color: #336699;
        padding: 0 20px;
        margin: 0 auto;
    }

    #textContainer h1 {
        position: absolute;
        top: 0;
        left: 20px;
        font-family: 'Merriweather', serif;
        font-size: 1.0rem;
        line-height: 50px;
        color: #fff;
        text-transform: capitalize;
    }

    p#countdownClock {
        position: absolute;
        top: 0;
        right: 20px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.0rem;
        line-height: 50px;
        color: #fff;
    }

    [id^="mainGame"] {
        display: none;
        width: 100%;
        max-width: 100%;
        height: auto;
        border: none;
        border: 1px solid #2e2e2e;
        background-color: #D9D9D9;
        padding: 0;
        margin: 0;
    }
    [id^="mainGame"] div.screen {
        display: block;
        width: 100%;
        max-width: 100%;
        height: 140px;
        background-color: #fff;
        padding: 5px 10px;
        margin: 0px;
    }   
    [id^="mainGame"] div.screen h2 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.0rem;
        line-height: 1.5;
        color: #336699;
    }   
    [id^="mainGame"] .buttonStyle {
        display: block;
        width: 100%;
        height: 50px;
        outline: none;
        border: none;
        cursor: pointer;
        border-top: 3px solid #2e2e2e;
        background-color: #336699;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.0rem;
        color: #fff;
        text-align: left;
        padding-left: 10px;
        margin: 0;
    }  
    [id^="mainGame"] [id^="scoring"] {
        position: relative;
        display: block;
        width: 100%;
        height: 30px;
        border-top: 1px solid #2e2e2e;
        background-color: #F19F4D;
    } 
    [id^="mainGame"] [id^="scoring"] [id^="score"] {
        position: absolute;
        top: 7px;
        left: 10px;
        font-size: 0.8rem;
        color: #fff;
    }   
    [id^="mainGame"] [id^="scoring"] [id^="percent"] {
        position: absolute;
        top: 7px;
        right: 10px;
        font-size: 0.8rem;
        color: #fff;
    }
    [id^="mainGame"] [id^="record"] {
        position: relative;
        display: block;
        width: 100%;
        height: 50px;
        border-top: 1px solid #2e2e2e;
        background-color: #fff;
        padding: 0;
    }    
    [id^="mainGame"] [id^="record"] [id^="clock"] {
        position: absolute;
        top: 18px;
        left: 10px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.0rem;
        color: green;
    }

    [id^="mainGame"] [id^="record"] .nextBtn {
        position: absolute;
        top: 12px;
        right: 10px;
        border: none;
        outline: none;
        display: block;
        width: 100%;
        max-width: 150px;
        height: 25px;
        cursor: pointer;
        background-color: #336699;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.0rem;
        color: #fff;
        text-transform: capitalize;
    }  
    #myFooter {
        clear: both;
        display: block;
        width: 100%;
        height: 40px;
        background-color: #000;
        text-align: center;
        margin: 0;
    }
    #myFooter p {
        font-size: 1.0rem;
        line-height: 40px;
        color: #fff; 
    }    
    #myFooter p span {
        display: none;
        color: #000;
    }
}
/* TABLET STYLING */
@media only screen and (min-width: 481px) and (max-width: 977px) {
    body {
        background-color: #F5E9BE;
    }
    div#container {
        display: block;
        width: 100%;
        height: 100%;
        background-color: #F5E9BE;
        padding: 0;
        margin: 0; 
    }  
    /*******************************************
    HEADING CSS STYLING
    ********************************************/
    header#heading {
        display: block;
        width: 100%;
        max-width: 600px;
        height: 100%;
        min-height: 125px;
        background-color: #2E2E2E;
        text-align: center;
        padding: 1.250rem;
        margin: 0 auto;
    }
    header#heading h1 {
        font-size: 2.4rem;
        color: #fff; 
    }
    header#heading h1 span#toxic {
        font-size: 3.2rem;
        color: #F19F4D; 
    }
    header#heading h2#subheading {
        display: block;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.2rem;
        line-height: 1.5;
        color: lightgreen;
        font-style: italic; 
    }

    nav.nav-bar {
        display: none;
    }

    form#categories-form {
        display: block;
        width: 100%;
        max-width: 500px;
        height: 150px;
        background-color: #fff;
        padding: 20px;
        margin: 20px auto;
    }
    form#categories-form label {
        display: block;
        width: 100%;
        max-width: 500px;
        height: 40px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.2rem;
        line-height: 40px;
    }
    form#categories-form select {
        float: left;
        width: 100%;
        max-width: 300px;
        height: 50px;
        border: none;
        outline: none;
        background-color: #2e2e2e;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.2rem;
        color: lightgreen;
        text-transform: uppercase;
    }    
    input[type=submit] {
        float: left;
        display: inline-block;
        outline: none;
        border: none;
        width: 100%;
        max-width: 100px;
        height: 40px;
        cursor: pointer;
        background-color: #2E2E2E;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.0rem;
        color: #fff;
        text-transform: uppercase;
        padding: 10px;
        margin: 5px 0 0 15px;
    }   
    input[type=submit]:hover {
        background-color: #336699;
    }

    #textContainer {
        position: relative;
        display: none;
        width: 100%;
        max-width: 600px;
        height: 50px;
        background-color: #336699;
        padding: 0 20px;
        margin: 0 auto;
    }

    #textContainer h1 {
        position: absolute;
        top: 0;
        left: 20px;
        font-family: 'Merriweather', serif;
        font-size: 1.0rem;
        line-height: 50px;
        color: #fff;
        text-transform: capitalize;
    }

    p#countdownClock {
        position: absolute;
        top: 0;
        right: 20px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.0rem;
        line-height: 50px;
        color: #fff;
    }

    [id^="mainGame"] {
        display: none;
        width: 100%;
        max-width: 600px;
        height: auto;
        border: none;
        background-color: #D9D9D9;
        padding: 0;
        margin: 0 auto;
    }

    [id^="mainGame"] div.screen {
        display: block;
        width: 100%;
        height: 125px;
        background-color: #fff;
        padding: 20px 20px;
        margin: 0px;
    }

    [id^="mainGame"] div.screen h2 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.0rem;
        line-height: 1.5;
        color: #336699;
    }

    [id^="mainGame"] .buttonStyle {
        display: block;
        width: 100%;
        height: 50px;
        outline: none;
        border: none;
        cursor: pointer;
        border-top: 3px solid #2e2e2e;
        background-color: #336699;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.0rem;
        color: #fff;
        text-align: left;
        padding-left: 20px;
        margin: 0;
    }

    [id^="mainGame"] .buttonStyle:hover  {
        background-color: #000;
    }

    [id^="mainGame"] [id^="scoring"] {
        position: relative;
        display: block;
        width: 100%;
        height: 40px;
        border-top: 3px solid #2e2e2e;
        background-color: #F19F4D;
    }

    [id^="mainGame"] [id^="scoring"] [id^="score"] {
        position: absolute;
        top: 10px;
        left: 20px;
        color: #fff;
    }

    [id^="mainGame"] [id^="scoring"] [id^="percent"] {
        position: absolute;
        top: 10px;
        right: 20px;
        color: #fff;
    }

    [id^="mainGame"] [id^="record"] {
        position: relative;
        display: block;
        width: 100%;
        height: 40px;
        border-top: 3px solid #2e2e2e;
        background-color: #fff;
        padding: 10px;
    }

    [id^="mainGame"] [id^="record"] [id^="clock"] {
        position: absolute;
        top: 10px;
        left: 20px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.0rem;
        color: green;
    }

    [id^="mainGame"] [id^="record"] .nextBtn {
        position: absolute;
        top: 5px;
        right: 20px;
        border: none;
        outline: none;
        display: block;
        width: 100%;
        max-width: 150px;
        height: 25px;
        cursor: pointer;
        background-color: #336699;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.0rem;
        color: #fff;
        text-transform: capitalize;
    }

    [id^="mainGame"] [id^="record"] .nextBtn:hover {
        background-color: green;
        color: #fff;
    }    

    #myFooter {
        clear: both;
        display: block;
        width: 100%;
        max-width: 600px;
        height: 50px;
        background-color: #000;
        text-align: center;
        margin: 0 auto 20px;
    }
    #myFooter p {
        font-size: 1.2rem;
        line-height: 50px;
        color: #fff; 
    }     
    #myFooter p span {
        float: right;
        font-size: 0.8rem;
        padding-right: 20px;
    }
}
@media only screen and (min-width: 978px) {
    article#about {
        display: block;
        width: 100%;
        max-width: 600px;
        height: auto;
        background-color: #fff;
        padding: 20px;
    }
    
    article#about header h2 {
        font-family: 'Merriweather', serif;
        font-size: 1.8rem;
        line-height: 2.0;
        color: #2e2e2e;
    }
    
    article#about p {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.2rem;
        line-height: 1.5;
        color: #2e2e2e;
    }
    
    
    div#shadow {
        position: fixed;
        top: 0;
        left: 0;
        display: none;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 10000;
    }
    div#shadow div.textBox {
        position: relative;
        top: 50%;
        left: 50%;
        display: block;
        width: 100%;
        max-width: 300px;
        height: 300px;
        text-align: center;
        background-color: #fff;
        margin-top: -150px;
        margin-left: -150px;
    }

    div#shadow div.textBox h2 {
        font-size: 1.4rem;
        color: green;
        line-height: 250px;
    }


    div#container {
        display: block;
        width: 100%;
        max-width: 978px;
        height: 100%;
        background-color: #F5E9BE;
        padding: 0;
        margin: 20px auto 0; 
    }


    /*******************************************
    HEADING CSS STYLING
    ********************************************/
    header#heading {
        position: relative;
        display: block;
        width: 100%;
        max-width: 75.000rem;
        height: 100%;
        min-height: 9.375rem;
        background-color: #2E2E2E;
        text-align: center;
        padding: 1.250rem;
        margin: 0;
    }
    header#heading h1 {
        font-size: 3.2rem;
        color: #fff; 
    }
    header#heading h1 span#toxic {
        font-size: 4.4rem;
        color: #F19F4D; 
    }

    header#heading h2#subheading {
        display: block;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.4rem;
        line-height: 1.5;
        color: lightgreen;
        font-style: italic; 
    }
    
    form#donateBTN {
        position: absolute;
        bottom: 30px;
        right: 10px;
    }
    
    form#donateBTN input {
        border: none;
        outline: none;
    }
    
    form#donateBTN label {
        clear: both;
        display: block;
        width: 100%;
        max-width: 150px;
        height: 40px;
        color: #fff;
    }
    nav.nav-bar {
        position: relative;
        overflow: hidden; 
    }

    ul.topnav {
        list-style-type: none;
        overflow: hidden;
        background-color: #4484CE;
        padding-left:  30px;         
    }

    ul.topnav li {
        float: left; 
    }

    ul li.icon {
        display: none;
    }

    ul.topnav li a.top-link {
        display: none;
    }
    ul.topnav li a {
        display: inline-block;
        color: #D9D9D9;
        text-align: center;
        text-decoration: none;
        font-size: 17px;
        transition: 0.3s;
        padding: 14px 16px; 
    }

    ul.topnav li a:hover {
        background-color: #2e6bb1; 
    }


    form#add-categories-form {
        display: block;
        width: 100%;
        max-width: 500px;
        height: 200px;
        background-color: #fff;
        padding: 20px;
        margin: 20px auto;
    }
    .section input[type="radio"] {
        display: none;
    }
    .radioContainer {
        margin-bottom: 15px;
    }
    .radioContainer label {
        position: relative;
        left: 50px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.2rem;
        font-weight: bold;
        color: maroon; 
    }

    .radioContainer span::before,
    .radioContainer span::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .radioContainer span.radio:hover {
        cursor: pointer;
    }
    .radioContainer span.radio::before {
        left: -52px;
        width: 45px;
        height: 25px;
        background-color: #2E2E2E;
        border-radius: 50px;
    }
    .radioContainer span.radio::after {
        left: -49px;
        width: 17px;
        height: 17px;
        border-radius: 10px;
        background-color: red;
        transition: left .25s, background-color .25s;
    }
    input[type="radio"]:checked + label span.radio::after {
        left: -27px;
        background-color: lightgreen;
    }

    form#add-categories-form select {
        float: left;
        width: 100%;
        max-width: 300px;
        height: 50px;
        border: none;
        outline: none;
        background-color: #2e2e2e;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.2rem;
        color: lightgreen;
        text-transform: uppercase;
    }
    form#add-categories-form input[type=button] {
        float: left;
        display: block;
        outline: none;
        border: none;
        width: 100%;
        max-width: 100px;
        height: 40px;
        cursor: pointer;
        background-color: #2E2E2E;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.0rem;
        color: #fff;
        text-transform: uppercase;
        padding: 10px;
        margin: 5px 0 0 15px;
    }

    .rotated-text {

    }

    .rotated-text__inner {

    }

    .rotated-text__inner:before {

    }



    #textContainer {
        -webkit-border-radius: 20px 20px 0 0; 
        -moz-border-radius: 20px 20px 0 0; 
        border-radius: 20px 20px 0 0; 
        position: relative;
        display: none;
        width: 100%;
        max-width: 500px;
        height: 50px;
        background-color: #336699;
        padding: 0 20px;
        margin: 10px auto 0;
    }

    #textContainer h1 {
        position: absolute;
        top: 0;
        left: 20px;
        font-family: 'Merriweather', serif;
        font-size: 1.2rem;
        line-height: 50px;
        color: #fff;
        text-transform: capitalize;
    }

    p#countdownClock {
        position: absolute;
        top: 0;
        right: 20px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.2rem;
        line-height: 50px;
        color: #fff;
    }


    form#categories-form {
        -webkit-border-radius: 20px 20px 0 0; 
        -moz-border-radius: 20px 20px 0 0; 
        border-radius: 20px 20px 0 0;   
        display: block;
        width: 100%;
        max-width: 464px;
        height: 150px;
        border: 4px solid #fff;
        background-color: #2E2E2E;
        padding: 20px;
        margin: 20px auto;
    }
    form#categories-form label {
        display: block;
        width: 100%;
        max-width: 500px;
        height: 40px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.2rem;
        line-height: 40px;
        color: #F19F4D;
    }
    form#categories-form select {
        float: left;
        width: 100%;
        max-width: 300px;
        height: 50px;
        border: none;
        outline: none;
        background-color:  #4484CE;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.2rem;
        color: #fff;
        text-transform: uppercase;
    }
    form#categories-form input[type=submit] {
        float: left;
        display: inline-block;
        outline: none;
        border: none;
        width: 100%;
        max-width: 100px;
        height: 40px;
        cursor: pointer;
        background-color:  #4484CE;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.0rem;
        color: #fff;
        text-transform: uppercase;
        padding: 10px;
        margin: 5px 0 0 15px;
    }

    input[type=submit]:hover {
        background-color: #336699;
    }

    [id^="mainGame"] {

        display: none;
        width: 100%;
        max-width: 500px;
        height: auto;
        border: none;

        padding: 0;
        margin: 0 auto 20px;
    }

    [id^="mainGame"] div.screen {     
        display: block;
        width: 100%;
        max-width: 500px;
        height: 175px;
        background-color: #2E2E2E;
        padding: 20px 20px;
        margin: 0px;
    }

    [id^="mainGame"] div.screen h2 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.2rem;
        line-height: 1.5;
        color: #F19F4D;
    }

    [id^="mainGame"] .buttonStyle {
        display: block;
        width: 100%;
        height: 50px;
        outline: none;
        border: none;
        cursor: pointer;
        border-top: 3px solid #2e2e2e;
        background-color: #336699;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.0rem;
        color: #fff;
        text-align: left;
        padding-left: 10px;
        margin: 0;
    }

    [id^="mainGame"] .buttonStyle:hover  {
        background-color: #4484CE;
    }

    [id^="mainGame"] [id^="scoring"] {
        position: relative;
        display: block;
        width: 100%;
        height: 40px;
        border-top: 3px solid #2e2e2e;
        background-color: #2E2E2E;
    }

    [id^="mainGame"] [id^="scoring"] [id^="score"] {
        position: absolute;
        top: 10px;
        left: 10px;
        color: #fff;
    }

    [id^="mainGame"] [id^="scoring"] [id^="percent"] {
        position: absolute;
        top: 10px;
        right: 10px;
        color: #fff;
    }

    [id^="mainGame"] [id^="record"] {
        position: relative;
        display: block;
        width: 100%;
        height: 40px;
        border-top: 3px solid #2e2e2e;
        background-color: #fff;
        padding: 10px;
    }

    [id^="mainGame"] [id^="record"] [id^="clock"] {
        position: absolute;
        top: 10px;
        left: 10px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.0rem;
        color: green;
    }

    [id^="mainGame"] [id^="record"] .nextBtn {
        position: absolute;
        top: 5px;
        right: 10px;
        border: none;
        outline: none;
        display: block;
        width: 100%;
        max-width: 150px;
        height: 25px;
        cursor: pointer;
        background-color: #336699;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.0rem;
        color: #fff;
        text-transform: capitalize;
    }

    [id^="mainGame"] [id^="record"] .nextBtn:hover {
        background-color: green;
        color: #fff;
    }

    form#addTrivia {
        position: relative;
        display: none;
        width: 100%;
        max-width: 620px;
        height: auto;
        background-color: #4484CE;
        padding: 20px;
        margin: 10px auto;
    }

    form#addTrivia fieldset {
        border: 2px solid #fff;
        padding: 20px;
    }

    form#addTrivia legend#legend {
        font-family: 'Merriweather', serif;
        font-size: 1.4rem;
        color: #fff;
        text-transform: capitalize;
        padding: 0 5px;
    }

    form#addTrivia fieldset label#questionLabel {
        display: block;
        width: 100%;
        max-width: 522px;
        height: 40px;
        background-color: #2E2E2E;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.2rem;
        line-height: 40px;
        color: #fff;
        text-align: left;
        padding: 0 10px;       
    }

    form#addTrivia fieldset textarea {
        resize: none;
        border: none;
        outline: none;
        clear: both;
        display: block;
        width: 100%;
        max-width: 520px;
        height: 200px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.2rem;
        padding: 10px;
        margin-bottom: 20px;
    }
    form#addTrivia fieldset label {
        float: left;
        display: block;
        width: 100%;
        max-width: 160px;
        height: 30px;
        background-color: #2E2E2E;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.2rem;
        line-height: 30px;
        color: #fff;
        text-align: left;
        padding: 0 10px;
    }
    form#addTrivia fieldset input {
        clear: right;
        display: block;
        width: 100%;
        max-width: 360px;
        height: 30px;
        border: none;
        outline: none;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.0rem;
        color: #2e2e2e;
        padding: 0 5px;
        margin-bottom: 10px;
    }

    form#addTrivia #prevBtn, form#addTrivia #saveBtn, form#addTrivia #nextBtn {
        float: right;
        outline: none;
        border: none;
        display: block;
        width: 100%;
        max-width: 120px;
        height: 40px;
        cursor: pointer;
        background-color: #2e2e2e;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.2rem;
        color: #fff;
        text-transform: capitalize;
        margin-right: 15px;
    }

    form#addTrivia #prevBtn {
        float: left;
    }

    form#addTrivia #saveBtn {
        float: left;
    }

    form#addTrivia #prevBtn:hover, form#addTrivia #saveBtn:hover, form#addTrivia #nextBtn:hover {
        color: #fff;
        background-color: #006300;
    }



    div#info {
        float: left;
        display: block;
        width: 100%;
        max-width: 489px;
        height: 500px;
        background-color: lightgray;
        padding: 20px;
    }
    div#info p {
        font-size: 1.2rem;
        line-height: 1.5;
        font-weight: bold; }

    #myFooter {
        clear: both;
        display: block;
        width: 978px;
        height: 50px;
        background-color: #000;
        padding: 0 20px;
        margin: 0 auto;
    }
    #myFooter p {
        font-size: 1.2rem;
        line-height: 50px;
        color: #fff; 
    }
    #myFooter p span {
        float: right;
        font-size: 0.8rem;
    }
}

/*# sourceMappingURL=stylesheet.css.map */