.dotnav.center {
    text-align: center;
}

.dotnav li {
    display: inline;
    cursor: pointer;
}

.dotnav li:first-child,
.dotnav li:last-child {
    margin-left: .5em;
    margin-right: .5em;
}


.dotnav li .on,
.dotnav li .temp {
    display: none;
}

.dotnav li .off {
    display: inline;
    color: #909090;
}


.dotnav li.active .on {
    display: inline;
    color: #3F59A1;
}

.dotnav li.active .temp,
.dotnav li.active .off {
    display: none;
}

.dotnav li.active:hover .off,
.dotnav li.active:hover .temp {
    display: none;
}

.dotnav li:hover .temp {
    display: inline;
    color: #909090;
}

.dotnav li:hover .on,
.dotnav li:hover .off {
    display: none;
}