.list > li {
    position: relative;
    margin-top: -1px;
    list-style-type: none;
    cursor: pointer;
    padding: 0.6em 15px;
    font-weight: 600;
    color: #333;
    background: #fff;
    border: 1px solid #ccc;
}

.list > li:first-child {
    border-radius: 6px 6px 0 0;
}

.list > li:last-child {
    border-radius: 0 0 6px 6px;
}

.list > li:active {
    color: #fff;
    background: rgb(28, 118, 205);
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(23, 107, 198)), to(rgb(28, 118, 205)));
    background: -webkit-linear-gradient(rgb(23, 107, 198), rgb(28, 118, 205));
    background: linear-gradient(rgb(23, 107, 198), rgb(28, 118, 205));
}

.list.arrow-right > li:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    width: 8px;
    height: 8px;
    margin-top: -5px;
    border-style: solid;
    border-width: 3px 3px 0 0;
    -webkit-transform: rotate(45deg);
}

.list.icon-left img {
    position: absolute;
    left: 8px;
    top: 6px;
    width: 25px;
    height: 25px;
}

.list.icon-left > li {
    padding-left: 40px;
}

.list.icon-arrow-right > li:after {
    border-color: #333;
}

.list.icon-arrow-right > li:active:after {
    border-color: #fff;
}

.list.list-readonly > li {
    cursor: default;
    background: #eee;
}

.list.list-readonly > li:active {
    color: #333;
}
