body {
    /*background: #1A1A1A;*/ /*debug*/
    font-family: Helvetica, Arial, sans-serif;
    /*font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;*/
    }
    div#titlediv {
    background: #232B45;
    color: white;
    border: black 1px solid;
    border-radius: 8px;
    padding: 20px 30px;
    }
    div.vspace50 {
    height: 50px;
    clear:both;
    }
    div.vspace40 {
    height: 30px;
    clear:both;
    }
    div.vspace30 {
    height: 30px;
    clear:both;
    }
    div.vspace20 {
    height: 20px;
    clear:both;
    }
    div.vspace10 {
    height: 20px;
    clear:both;
    }

    .category {
    font-size:40px;
    padding-bottom: 10px;
    text-align: center;
    vertical-align: top;
    font-weight: bold;
    margin: 0 0 10px 0;
    }
    
    .vspacediv {
    margin: 0 0 15px 0px;
    }
    .vspacediv2 {
    margin: 0 0 5px 0px;
    }

    .buttonbase {
    background-color:#F1F5F9; 
    border: #cccccc 4px solid;
    border-radius: 32px;

    margin: 0 0 10px 0;

    font-size:44px;
    text-align: center;
    /*padding: 17px;*/
    height: 60px;
    line-height: 60px;
    vertical-align: middle;

    /*display: table-cell;*/

    /*
    font-size:3em;
    height: 70px;
    vertical-align: middle;
    */
    }
    .no-touch .buttonbase:hover {
    border: #888888 4px solid;
    }

    .bbase {
    background-color:#FAFAFA; 
    border: #cccccc 4px solid;
    border-radius: 32px;

    margin: 0 0 0px 0;

    font-size:34px;
    text-align: center;
    /*padding: 17px;*/
    height: 40px;
    line-height: 40px;
    vertical-align: middle;

    /*display: table-cell;*/

    /*
    font-size:3em;
    height: 70px;
    vertical-align: middle;
    */
    }

    .mbase {
    background-color:#FAFAFA; 
    border: #cccccc 4px solid;
    border-radius: 32px;

    margin: 0 0 0px 0;

    font-size:20px;
    text-align: center;
    /*padding: 17px;*/
    height: 35px;
    line-height: 35px;
    vertical-align: middle;

    /*display: table-cell;*/

    /*
    font-size:3em;
    height: 70px;
    vertical-align: middle;
    */
    }
    .no-touch .bbase:hover {
    border: #888888 4px solid;
    }

    .bbaseq {
    background-image: -webkit-linear-gradient(top, #f5f5f5, #e1e1e1);
    background-image: -moz-linear-gradient(top, #f5f5f5, #e1e1e1);
    background-color: #e1e1e1;
    border: #ffffff 4px solid;
    /*border: #888888 1px solid;*/
    border-radius: 40px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

    margin: 0 0 0px 0;

    font-size:28px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    width: 40px;
    vertical-align: middle;
    opacity: 0.5;
    cursor: pointer;
    }
    .no-touch .bbaseq:hover {
    /*border: #888888 4px solid;*/
    font-size:34px;
    }
    .correctq {
    background-image: -webkit-linear-gradient(top, #62c462, #51a351);
    background-image: -moz-linear-gradient(top, #62c462, #51a351);
    background-color: #51a351;
    /*border-color: #62c462;*/
    color: white;
    }

    .op2 {
    background-color:#AAD2FA; 
    }

    .op {
    background-color:#D9D9E9; 
    }

    .eqc {
    background-color:#AAFABF; 
    }

    .currentq {
    /*
    border: #555555 4px solid;
    height: 36px;
    width: 36px;
    border-radius: 36px;
    */
    opacity: 1;
    }

    .wrong {
    background-color:#FFCBDB; 
    }

    .correctans {
    background-color:#B9FCAC; 
    }

    .tu {
    background-color:#F7B5F2; 
    }

    .pressed {
    background-color:#CCC; 
    }

    .selected {
    background: #F00;
    color: #FFF;
    font-size:3em;
    background-color:#F1F5F9; 
    }


    .red {
    color: red;
    }
    .green {
    color: green;
    }
    .blue {
    color: blue;
    }
    .purple {
    color: purple;
    }
    .color5 {
    color: #555555;
    }
    .brown {
    color: brown;
    }
    .black {
    color: black;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    }

    .outeranswer {
        height: 160px;
        width: 25%;
        float: left;
    }

    .okey {
        height: 70px;
        width: 20%;
        float: left;
    }

    .mkey {
        height: 50px;
        width: 20%;
        float: left;
    }

    .okey10 {
        height: 70px;
        width: 10%;
        float: left;
    }

    .inneranswer {
        width: 95%;
        display: table;
        margin-left: 0;
        margin-right: auto;
    }

    .qkey {
        height: 50px;
        width: 10%;
        float: left;
        color: #BBBBBB;
    }
    .qkey2 {
        height: 50px;
        width: 60px;
        float: left;
        color: #666666;
    }
    .innerq {
        width: 90%;
        display: table;
        margin-left: auto;
        margin-right: 0;
    }

    #out0 {
    font-size:20px;
    }
    #out {
    font-size:20px;
    }
    #out3 {
    font-size:20px;
    }
    #workarea3 {
    font-size:18px;
    }

    .nohover:hover {
        text-decoration: none; 
    }
    #shareUrl {
    width:320px;
    }

    /*from https://gist.github.com/cfstras/8824566*/
    .ytlight {
      width: 560px;
      height: 315px;
    }
    .ytlight_thumb,.ytlight_circle {
      cursor: hand;
      cursor: pointer;
    }
    div.ytlight {
      margin-top: 1em;
      margin-bottom: 1em;
      background-color: #000;
      position: relative;
      overflow: hidden;
    }
    .ytlight_thumb {
      /* center&cutoff */
      width: 100%;
      height: auto;
      position: absolute;
      top: -9999px;
      bottom: -9999px;
      left: -9999px;
      right: -9999px;
      margin: auto;
    }
    .ytlight_circle{
      opacity: .8;
      height: 77px;
      left: 50%;
      margin-left: -38px;
      margin-top: -38px;
      position: absolute;
      top: 50%;
      width: 77px;
      background: url("data:image/png;base64,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") no-repeat;
    }