.notesite {
    display: inline-block;
    position: relative;
    width: 1em;
    height: 1em;
    font-size: 70px;
    cursor: default
}

.notesite>.percent {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    font-size: 25px;
    text-align: center;
    z-index: 2
}

.notesite>.percent .dec {
    font-size: 15px
}

.notesite>#slice {
    position: absolute;
    width: 1em;
    height: 1em;
    clip: rect(0px, 1em, 1em, 0.5em);
}

.notesite>#slice.gt50 {
    clip: rect(auto, auto, auto, auto);
}

.notesite>#slice>.pie {
    position: absolute;
    border: .1em solid #444;
    width: .8em;
    height: .8em;
    clip: rect(0em, 0.5em, 1em, 0em);
    border-radius: .5em
}

.windows .notesite>#slice>.pie {
    border-color: #1a99aa;
}

.total .notesite>#slice>.pie {
    border-color: #3c948b;
}

.linux .notesite>#slice>.pie {
    border-color: #ecd06f;
}

.other .notesite>#slice>.pie {
    border-color: #df6c4f;
}

.mac .notesite>#slice>.pie {
    border-color: #ffffff;
}

.notesite>#slice>.pie.fill {
    -moz-transform: rotate(180deg)!important;
    -webkit-transform: rotate(180deg)!important;
    -o-transform: rotate(180deg)!important;
    transform: rotate(180deg)!important;
}

.notesite.fill>.percent {
    display: none
}

.notesite:after {
    content: '';
    display: block;
    position: absolute;
    top: .1em;
    left: .1em;
    width: .8em;
    height: .8em;
    background: #0C0E0F;
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    border-radius: .5em;
    z-index: 1
}

.notesite:before {
    content: '';
    display: block;
    position: absolute;
    width: 1em;
    height: 1em;
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    border-radius: .5em;
    opacity: .5;
    z-index: 0;
}

.windows .notesite:before {
    background: #1a99aa;
}

.total .notesite:before {
    background: #3c948b;
}

.linux .notesite:before {
    background: #ecd06f;
}

.other .notesite:before {
    background: #df6c4f;
}

.mac .notesite:before {
    background: #cfd1d0;
}

.row {
    width: 100%;
    text-align: center;
}

.block {
    width: 12em;
    display: inline-block;
}