﻿.button {
    background: #000000;
    background: -moz-linear-gradient(left, #000000 0%, #C00000 100%);
    background: -webkit-linear-gradient(left, #000000 0%, #C00000 100%);
    background: linear-gradient(to right, #000000 0%, #C00000 100%);
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    margin-top: 4em;
    border-radius: 10px 10px;
    box-shadow: 0 2px #666;
}

    .button:hover {
        background: #500000;
        background: -moz-linear-gradient(left, #500000 0%, #C00000 90%);
        background: -webkit-linear-gradient(left, #500000 0%, #C00000 90%);
        background: linear-gradient(to right, #500000 0%, #C00000 90%);
        box-shadow: 0 3px #666;
    }

    .button:active {
        background-color: #3e8e41;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
    }

    ol {list-style-position: inside;}

    ul li label {display: block; margin: 0 auto; text-align: left;}

/* ********* DESKTOP ***************************************************************************************/
/* ********* DESKTOP ***************************************************************************************/
/* ********* DESKTOP ***************************************************************************************/
@media only screen and (min-width: 55em) {

    /* ************** Learning Styles Quiz ********************** */

    .timing-quote {
        padding-left: 5%;
        text-indent: -5%;
    }

    p.timing-main:first-line {
        font-weight: bold;
    }
    section:nth-of-type(1).quiz {
        flex: 86%;
    }

    .floatquiz {
        float: left;
        width: 50%;
        height: 5em;
    }

        .floatquiz ul li > * {
            display: inline-block;
            padding-bottom: 0;
            margin-bottom: 0;
        }

        .floatquiz ul li label {
            margin-right: 2em;
        }

        .floatquiz ul li input {
            margin-right: .25em;
        }

    .multicolumnquiz {
        display: block;
        width: 95%;
        text-align: left;
        margin: 0 auto;
    }

    section:nth-of-type(3).quiz {
        flex: 86%;
    }

    #piechart {float:right; width: 60%;}
}