span.colorBox { border:1px solid gray; margin-right:2px; display: block; float: left; width:20px; height:20px; cursor: pointer; background-image:url('http://img.bombayelectric.in/colors.gif'); background-repeat:no-repeat; -moz-border-radius:15px; -webkit-border-radius:10px; border-radius:10px; }
span.colorBox:hover { border-color:#FF00CC; }
span.colorBox.white { background-color:#FFFFFF; }
span.colorBox.black { background-color:#000000; }
span.colorBox.beige { background-color:#DFDF9D; }
span.colorBox.ivory { background-color:#FFFFF0; }
span.colorBox.cream { background-color:#F9E29A; }
span.colorBox.baby-blue { background-color:#B2E8F8; }
span.colorBox.cobalt-blue { background-color:#44A9CA; }
span.colorBox.midnight-blue { background-color:#0B0525; }
span.colorBox.aubergine { background-color:#1A0D1F; }
span.colorBox.teal { background-color:#0F3135; }
span.colorBox.maroon { background-color:#552630; }
span.colorBox.blue { background-color:#3315CB; }
span.colorBox.royal-blue { background-color:#4876FF; }
span.colorBox.brown { background-color:#613F23; }
span.colorBox.dark-brown { background-color:#321C0A; }
span.colorBox.gold { background-color:#B45406; }
span.colorBox.green { background-color:#048719; }
span.colorBox.grey { background-color:#3E3B39; }
span.colorBox.indigo { background-color:#2E0854; }
span.colorBox.purple { background-color:#760B86; }
span.colorBox.mint { background-color:#DBFEF8; }
span.colorBox.multi-color { background-color:#F5F5DC; }
span.colorBox.navy-blue { background-color:#11144B; }
span.colorBox.orange { background-color:#FF8000; }
span.colorBox.peach { background-color:#FF9955; }
span.colorBox.pink { background-color:#FFC0CB; }
span.colorBox.light-pink { background-color:#FC6B84; }
span.colorBox.rani-pink { background-color:#BE014D; }
span.colorBox.red { background-color:#CD0000; }
span.colorBox.silver { background-color:#E6E8FA; }
span.colorBox.turquoise { background-color:#40E0D0; }
span.colorBox.yellow { background-color:#EEEE00; }
span.colorBox.light-green { background-color:#B9D55A; }
span.colorBox.black-and-white-stripes { background-color:#FFF; background-position:-60px 0; }
span.colorBox.blue-and-white-stripes { background-color:#1E2F3F; background-position:-80px 0; }
span.colorBox.cream-stripes { background-color:#E6E6D8; background-position:-120px 0; }
span.colorBox.bright-blue { background-color:#042D99; }
span.colorBox.lemon-yellow { background-color:#FBFD2D; }
span.colorBox.coral { background-color:#F66363; }
span.colorBox.dark-pink { background-color:#FF1493; }
span.colorBox.indigo-blue { background-color:#223553; }
span.colorBox.hot-pink { background-color:#FF69B4; }
span.colorBox.indigo-blue { background-color:#223553; }
span.colorBox.plum { background-color:#8D545B; }
span.colorBox.copper { background-color:#993333; }
span.colorBox.charcoal { background-color:#27262B; }
span.colorBox.olive { background-color:#8D8D5B; }
span.colorBox.pea-green { background-color:#575717; }
span.colorBox.heather-blue { background-color:#6C7AB2; background-position:-260px 0; }
span.colorBox.blue-pinstripe-weave { background-color:#5B6F7D; background-position:-100px 0; }
span.colorBox.light-blue-check { background-color:#7691BC; background-position:-280px 0; }
span.colorBox.grey-pinstripes { background-color:#5A555C; background-position:-240px 0; }
span.colorBox.magdalen-check { background-color:#496096; background-position:-300px 0; }
span.colorBox.dusk-blue { background-color:#8C909B; background-position:-140px 0; }
span.colorBox.oxford-blue-pinstripes { background-color:#4E5E91; background-position:-320px 0; }
span.colorBox.purple-pinstripes { background-color:#E0DDE3; background-position:-340px 0; }
span.colorBox.apple-red-pinstripe { background-color:#8D3C4; background-position:-20px 0; }
span.colorBox.tartan-blue-check { background-color:#24f484; background-position:-360px 0; }
span.colorBox.tartan-check { background-color:#C2B9BC; background-position:-380px 0; }
span.colorBox.forest-green { background-color:#656042; background-position:-220px 0; }
span.colorBox.fine-black-microstripes { background-color:#4C3F49; background-position:-160px 0; }
span.colorBox.fine-blue-microstripes { background-color:#55597A; background-position:-180px 0; }
span.colorBox.flamingo-pink-pinstripes { background-color:#A58082; background-position:-200px 0; }
span.colorBox.baby-pink { background-color:#9F8588; background-position:-40px 0; }
span.colorBox.fine-blue-pinstripe { background-color:#71A0E2; background-position:-400px 0; }
span.colorBox.srinagar-stripe { background-color:#8BB9F7; background-position:-420px 0; }
span.colorBox.powder-blue { background-color:#A8AAF9; background-position:-440px 0; }
span.colorBox.sky-blue { background-color:#B0CAE4; background-position:-460px 0; }
span.colorBox.madras-check { background-color:#7487BF; background-position:-480px 0; }
span.colorBox.broadcloth-blue { background-color:#8998F2; background-position:-500px 0; }
span.colorBox.ash-grey { background-color:#423F36; }
span.colorBox.slate { background-color:#1A1616; }
span.colorBox.carbon { background-color:#12141B; }
span.colorBox.bright-teal { background-color:#0A433A; }
span.colorBox.ash-pink { background-color:#CC9999; }
span.colorBox.dusk { background-color:#FDF1F1; }
span.colorBox.lotus { background-color:#FAADD3; }
span.colorBox.night { background-color:#000000; }
span.colorBox.buttercup { background-color:#DFB845; }
span.colorBox.lilac { background-color:#CF9CAD; }
span.colorBox.rose-pink { background-color:#EE8F81; }
span.colorBox.violet { background-color:#602380; }
span.colorBox.aubergine { background-color:#553549; }
span.colorBox.lemon-green { background-color:#999933; }
span.colorBox.maroon { background-color:#660000; }
span.colorBox.fuschia { background-color:#D71382; }
span.colorBox.bronze { background-color:#833B0C; }
span.colorBox.royal-purple { background-color:#3A2050; }
span.colorBox.graphite-grey { background-color:#777C8A; }
span.colorBox.tropical-green { background-color:#097656; }
span.colorBox.camel { background-color:#8E7A71; }