﻿body {
}

.checkboxes{
}

input[type=checkbox]:not(old),
input[type=radio ]:not(old) {
    height: 0;
    width: 0.3em;
    margin: 0;
    padding: 0;
    font-size: 3em;
    opacity: 3;
}

    input[type=checkbox]:not(old) + label,
    input[type=radio ]:not(old) + label {
        display: inline-block;
        margin-left: -1em;
        line-height: 1.5em;
    }

        input[type=checkbox]:not(old) + label > span,
        input[type=radio ]:not(old) + label > span {
            display: inline-block;
            width: 1.5em;
            height: 1.5em;
            margin: 0.25em 0.5em 0.25em 0.25em;
            border: 0.0625em solid rgb(192,192,192);
            border-radius: 0.25em;
            background: rgb(224,224,224);
            background-image: -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
            background-image: -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
            background-image: -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
            background-image: -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
            background-image: linear-gradient(rgb(240,240,240),rgb(224,224,224));
            vertical-align: bottom;
        }

    input[type=checkbox]:not(old):checked + label > span,
    input[type=radio ]:not(old):checked + label > span {
        background-image: -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
        background-image: -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
        background-image: -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
        background-image: -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
        background-image: linear-gradient(rgb(224,224,224),rgb(240,240,240));
    }

        input[type=checkbox]:not(old):checked + label > span:before {
            content: '✓';
            display: block;
            width: 1em;
            color: rgb(153,204,102);
            font-size: 1.5em;
            line-height: 1em;
            text-align: center;
            text-shadow: 0 0 0.0714em rgb(115,153,77);
            font-weight: bold;
        }

        input[type=radio]:not(old):checked + label > span > span {
            display: block;
            width: 1.2em;
            height: 1.2em;
            margin: 0.105em;
            border: 0.0625em solid rgb(115,153,77);
            border-radius: 0.125em;
            background: rgb(153,204,102);
            background-image: -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
            background-image: -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
            background-image: -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
            background-image: -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
            background-image: linear-gradient(rgb(179,217,140),rgb(153,204,102));
        }
