---
layout: default
title: Home
---

<h1>Live example</h1>

<style>
    
    #live-example * {
        
        box-sizing: border-box;
        
    }
    #live-example {
        
        min-height: 1000px;
        
    }
    #live-example,
    #live-example td {
        
        font-size: 10pt;
        font-family: Arial;
    
    }
    .choices {
        
        counter-reset: choice;
        max-width: 800px;
        line-height: 1.5;
        
    }
    .choice {
        
        display: block;
        
    }
    .choice .choice-content {
        
        width: 100%;
        max-width: 800px;
        max-height: 250px;
        display: block;
        padding: 10px;
        border-left: solid 5px transparent;
        margin-left: 0;
        margin-top: 0;
        transition: margin-left 0.2s 0.2s, 
                    max-height 0.2s,
                    padding 0.2s;

    }
    @media screen and (max-width: 800px) {
        
        .choice .choice-content {
        
            max-width: 100vw;
            
        }
    
    }
    .choice:hover .choice-content {
        
        border-left: solid 5px silver;
        
    }
    .chosen .choice-content {
        
        margin-left: -200vw;
        max-height: 0;
        padding: 0;
        transition: margin-left 0.2s , 
                    max-height 0.2s 0.2s,
                    padding 0.2s 0.2s;
    }
    .choice input:focus + .choice-content {
        
        border-left-color: silver;
        
    }
    .choice input:checked + .choice-content {
        
        margin-left: 0;
        max-height: 250px;
        padding: 10px;
        
    }
    .choice input {
        
        position: absolute;
        left: -100px;
        
    }
    .choice-content .title::before {
        
        counter-increment: choice;
        content: counter(choice);
        display: inline-block;
        border-radius: 99px;
        width: 1.5em;
        height: 1.5em;
        text-align: center;
        line-height: 1.5em;
        margin-right: 5px;
        background-color: black;
        color: white;
        opacity: 0.5;
        
    }
    .choice-content .title {
        
        display: block;
        font-size: 1.5em;
        margin-bottom: 5px;
        
    }
    .choice-content .specifics {
        
        display: block;
        font-style: italic;
        
    }
    .choice-content .scores .none,
    .choice-content .scores .false {
        
        display: none;
        
    }
    .choice-content .score {
        
        width: 2em;
        height: 2em;
        text-align: center;
        line-height: 2em;
        display: inline-block;
        margin-left: 5px;
        
    }
    .choice-content .score.up {

        color: #070;
        background-color: #DFD;
        
    }
    .choice-content .score.up::before {
        
        content: "+";
        
    }
    .choice-content .score.down {
        
        color: #700;
        background-color: #FDD;
        
    }
    .choice-content .score.down::before {
        
        content: "-";
        
    }
    .choice-content .scores .score-text {
        
        display: none;
        
    }
    .choice-content .cancel {
        
        display: none;
        
    }
    .choice-content .choose {
        
        display: block;
        
    }
    .chosen .choice-content .cancel {
        
        display: block;
        
    }
    .chosen .choice-content .choose {
        
        display: none;
        
    }
    
    .score-by-person .choice .choice-content,
    .score-by-person .choice input:checked + .choice-content {
        
        padding: 5px;
        
    }
    .score-by-person .parts {
        
        display: inline-block;
        min-width: 150px;
        
    }
    .score-by-person .choice-content .choose {
        
        display: inline-block;
        
    }
    .score-by-person .chosen .choice-content .choose {
        
        display: none;
        
    }
    .score-by-person .chosen .choice-content .cancel {
        
        display: inline-block;
        
    }
    .score-by-person .choice-content .score {
        
        background-color: #EEF;
        border-radius: 50%;
        font-size: 0.9em;

    }
    .score-by-person .choice-content .parts > * {
        
        margin-right: 5px;
        
    }

    .scoring table {
        
        border-spacing: 5px;

    }
    .scoring table td {
        
        vertical-align: middle;
        text-align: center;
        border: none;
        
    }
    .scoring .one-of {
        
        padding: 0 10px;
        white-space: nowrap;
        
    }
    .scoring .one-of-option {
        
        flex: 1;
        
    }
    .scoring .one-of-option input {
        
        position: absolute;
        left: -100px;
        
    }
    .scoring .one-of-option .content {

        display: inline-block;
        transform: scale(0.5);
        fill: #EEE;
        padding: 0 5px;
        
    }
    .scoring .one-of-option:hover .content {
        
        transform: scale(1);
        fill: #777;
        
    }
    .scoring .one-of-option input:focus+.content svg {
        
        transform: scale(1);
        fill #777;
        transform: scale( 1.1 );
    }
    .scoring .one-of-option .content svg {
        
        width: 30px;
        height: 30px;
        
    }    
    .scoring .one-of-option input:checked+.content {

        transform: scale( 1 );

    }

    .scoring .one-of-option--:not(:hover) input:checked:not(:focus)+.content {
        
        transform: scale(0.5);
        
    }
    .scoring .one-of-option-up input:checked+.content {
        
        stroke: green;
        fill: green;
        
    }
    .scoring .one-of-option-down input:checked+.content {
        
        stroke: red;
        fill: red;
        
    }
    .scoring .score-diff .down,
    .scoring .score-diff .up {
        
        width: 2em;
        height: 2em;
        line-height: 2em;
        text-align: center;
        display: inline-block;
        
    }
    .scoring .score-diff .down {
        
        color: #700;
        background-color: #FDD;
        
    }
    .scoring .score-diff .down::before {
        
        content: "-";
        
    }
    .scoring .score-diff .up {
        
        color: #070;
        background-color: #DFD;
        
    }
    .scoring .score-diff .up::before {
        
        content: "+";
        
    }
    
</style>
<article id="live-example">
    loading...
</article>

<script src="./live-example.js"></script>
<script src="./main.js"></script>