Color Options

HTML

<div>
    <ul class="colorset">
        <li class="dblue"></li>
        <li class="lblue"></li>
        <li class="dgreen"></li>
        <li class="lgreen"></li>
        <li class="lgray"></li>
        <li class="lred"></li>
    </ul>
</div>

<div>
    <ul class="colorset2">
        <li class="dblue"></li>
        <li class="lblue"></li>
        <li class="dgreen"></li>
        <li class="lgreen"></li>
        <li class="lgray"></li>
        <li class="lred"></li>
    </ul>
</div>
    
<div class="label">1</div>

<div class="label" style="float: right;">2</div>

<iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/JamesKyle/ArXNP/9/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

CSS

body {
    background: #f5f5f5;
    padding: 15px;
    font-family: Arial, sans-serif;
    width: 1000px;
}
.colorset {
    float: left;
    margin: 10px;
    background: #FFF;
    background: #dbdbdb;
    background: -moz-linear-gradient(top, #dbdbdb 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dbdbdb), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #dbdbdb 0%,#ffffff 100%);
    background: -o-linear-gradient(top, #dbdbdb 0%,#ffffff 100%);
    background: -ms-linear-gradient(top, #dbdbdb 0%,#ffffff 100%);
    background: linear-gradient(top, #dbdbdb 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#ffffff',GradientType=0 );
    -webkit-border-radius: 35px;
     -khtml-border-radius: 35px;
       -moz-border-radius: 35px;
        -ms-border-radius: 35px;
         -o-border-radius: 35px;
            border-radius: 35px;
    -webkit-box-shadow: inset rgba(0,0,0,0.2) 0px 1px 2px;
     -khtml-box-shadow: inset rgba(0,0,0,0.2) 0px 1px 2px;
       -moz-box-shadow: inset rgba(0,0,0,0.2) 0px 1px 2px;
        -ms-box-shadow: inset rgba(0,0,0,0.2) 0px 1px 2px;
         -o-box-shadow: inset rgba(0,0,0,0.2) 0px 1px 2px;
            box-shadow: inset rgba(0,0,0,0.2) 0px 1px 2px;
}

.colorset li {
    float: left;
    width: 50px; height: 50px;
    margin: 10px;
    overflow: hidden;
    -webkit-border-radius: 25px;
     -khtml-border-radius: 25px;
       -moz-border-radius: 25px;
        -ms-border-radius: 25px;
         -o-border-radius: 25px;
            border-radius: 25px;
    -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 2px, 
                        inset rgba(255,255,255,0.4) 0px 15px 30px,
                        inset rgba(255,255,255,0.1) 15px 5px 25px,
                        inset rgba(0,0,0,0.3) 0px -5px 20px,
                        inset rgba(0,0,0,0.2) -5px -15px 40px;
     -khtml-box-shadow: rgba(0,0,0,0.2) 0px 1px 2px, 
 ...