basic-probability.css

body {
    background-color: #D6EFFA;
}

.header {
    /*background-color: #F1F7FF;*/
    background-color: #D6EFFA;
    background: -webkit-linear-gradient(rgba(214, 239, 250, 1), rgba(214, 239, 250, 1), rgba(214, 239, 250, 0));
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(214, 239, 250, 1), rgba(214, 239, 250, 1), rgba(214, 239, 250, 0));
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(214, 239, 250, 1), rgba(214, 239, 250, 1), rgba(214, 239, 250, 0));
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(214, 239, 250, 1), rgba(214, 239, 250, 1), rgba(214, 239, 250, 0));
    /* Standard syntax */
}

.col-left {

    background-color: #D6EFFA;
}

.action-buttons ul a li:hover {
    color: #1B92C4;
}

#next-chapter-color:hover {
    background-color: #46C8B2;
}


.action-buttons ul {

    border-top: 1px solid rgba(27, 146, 196, 0.2);
}

@media screen and (min-width: 750px) {
    #bp {
        display: block;
    }

    #cp,
    #ra,
    #pd,
    #fi,
    #bi {
        display: none;
    }
}

.progress-bar-color {
    background-color: #1B92C4;
}



/*VISUALIZATIONS*/

#coinWrapper,
#dieWrapper,
#cardWrapper {
    align-items: center;
    flex-wrap: wrap;
}

#coinButtons,
#dieButtons,
#cardButtons {
    display: inline-flex;
    flex-direction: column;
}







/*Chance Events*/

.blur-out {
    -webkit-filter: blur(8px);
    opacity: 0.1;
    -webkit-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}


#coin {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-image: url(./img/head.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: block;
}



.Observed rect {
    fill: #00d0a1;
}

.True rect {
    fill: #64bdff;
    cursor: row-resize;
}



/*Expectation*/

#die {
    width: 100px;
    height: 100px;
    background-image: url(./img/dice_6.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
}



#expected {
    fill: none;
    stroke: #00d0a1;
    stroke-width: 2px;
}

#actual {
    fill: none;
    stroke: #64bdff;
    stroke-width: 2px;
}

.axis path,
.axis line {
    fill: none;
    stroke: black;
    stroke-width: 2;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: "Helvetica Neue";
    font-size: 11px;
    fill: black;
}

#avgFocus {
    color: #00d0a1;
    font-size: bold;
}

#expFocus {
    color: #64bdff;
}

#focusLine {
    fill: none;
    stroke: black;
    stroke-width: 1px;
}

.expectedCircle {
    fill: #64bdff;
    stroke: white;
    stroke-width: 2px;
}

.averageCircle {
    fill: #00d0a1;
    stroke: white;
    stroke-width: 2px;
}



/*Variance*/

#card {
    width: 75px;
    height: 100px;
    margin: 0 12.5px;
    background-image: url(./img/card_1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}


input[type=checkbox] {
    display: none;
}

input[type=checkbox]+label {
    display: inline-block;
    padding: 0 0 0 0px;
    height: 4em;
    width: 17%;
    cursor: pointer;
    padding: 4% 0;
}

input[type=checkbox]:checked+label {
    opacity: 0.25;
}

.label {
    fill: white;
    font-size: 15px;
    alignment-baseline: middle;
}


#card_one+label {
    background: url("./img/card_1.png") no-repeat;
    background-size: 100%;
}

#card_two+label {
    background: url("./img/card_2.png") no-repeat;
    background-size: 100%;
}

#card_three+label {
    background: url("./img/card_3.png") no-repeat;
    background-size: 100%;
}

#card_four+label {
    background: url("./img/card_4.png") no-repeat;
    background-size: 100%;
}

#card_five+label {
    background: url("./img/card_5.png") no-repeat;
    background-size: 100%;
}

#card_six+label {
    background: url("./img/card_6.png") no-repeat;
    background-size: 100%;
}

#card_seven+label {
    background: url("./img/card_7.png") no-repeat;
    background-size: 100%;
}

#card_eight+label {
    background: url("./img/card_8.png") no-repeat;
    background-size: 100%;
}

#card_nine+label {
    background: url("./img/card_9.png") no-repeat;
    background-size: 100%;
}

#card_ten+label {
    background: url("./img/card_10.png") no-repeat;
    background-size: 100%;
}



/*responsive*/

@media screen and (max-width: 680px) {
    #dieWrapper,
    #cardWrapper,
    #coinWrapper {
        display: block;
        text-align: center;
        margin: 0 auto;
    }

    .button-1 {
        width: 6.5em;
        font-size: 10px;
        padding: 0.8em;
    }

    input[type=checkbox]+label {
        height: 3em;
        padding: 8% 5%;
    }


    #centered {
        font-size: 12px;
    }

    #left-mathjax {
        font-size: 12px;
    }


    #card {

        display: block;
        margin: 0 auto;
    }
}

@media screen and (min-width: 680px) {

    #dieWrapper,
    #cardWrapper,
    #coinWrapper {
        display: inline-flex;
    }

    .button-1 {
        width: 7em;
    }

    input[type=checkbox]+label {
        height: 4em;
        padding: 5% 1%;
    }


    #card {

        display: inline-block;
    }
}


@media screen and (min-width: 1024px) {
    input[type=checkbox]+label {
        height: 5em;
        padding: 5% 1%;
    }
}