body {
    font-family: sans-serif;
}
h1 {
    background: #300060;
    color: #FFFFFF;
    font-weight: bold;
    margin: -10px -10px 10px -10px;
    padding: 10px;
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.5);
}
ul.iconset {
    margin: 0 0 0 -35px;
}
ul.iconset > li {
    display: inline-block;
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.5);
    padding: 0;
    border-radius: 10px;
    width: 100px;
    height: 100px;
    margin: 5px;

    background: linear-gradient(to bottom, #F8F8F8 100%, #E0E0E0 100%);
    background: -moz-linear-gradient(center top, #F8F8F8, #E0E0E0);
    background: -webkit-gradient(linear, center top, center bottom, from(#F8F8F8), to(#E0E0E0));
    background: -ms-linear-gradient(top, #F8F8F8 100%, #E0E0E0 100%) border;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#F8F8F8,endColorstr=#E0E0E0,GradientType=0)";

    background-clip: border-box;
    background-origin: border-box;
}
ul.iconset > li > a {
    display: block;
    margin: 0;
    padding: 0;
}
ul.iconset > li > a > span {
    background-clip: border-box;
    background-origin: border-box;
}
ul.iconset > li > a > span:first-child {
    display: inline-block;
    border-radius: 10px 0 0 10px;
    border-right: none;
    background-repeat: no-repeat;
    background-position: center;
    height: 100px;
    width: 90px;
    margin-right: 0;
    
}
ul.iconset > li > a > span:last-child {
    display: inline-block;
    border-radius: 0 10px 10px 0;
    border-left: none;
    height: 100px;
    width: 10px;
    margin-left: 0;
}
ul.iconset > li.red > a > span:last-child {
    background: linear-gradient(to bottom, #FF1048 100%, #F00028 100%);
    background: -moz-linear-gradient(center top, #FF1048, #F00028);
    background: -webkit-gradient(linear, center top, center bottom, from(#FF1048), to(#F00028));
    background: -ms-linear-gradient(top, #FF1048 100%, #F00028 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#FF1048,endColorstr=#F00028,GradientType=0)";
}
ul.iconset > li.orange > a > span:last-child {
    background: linear-gradient(to bottom, #FFB820 100%, #F0A000 100%);
    background: -moz-linear-gradient(center top, #FFB820, #F0A000);
    background: -webkit-gradient(linear, center top, center bottom, from(#FFB820), to(#F0A000));
    background: -ms-linear-gradient(top, #FFB820 100%, #F0A000 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#FFB820,endColorstr=#F0A000,GradientType=0)";
}
ul.iconset > li.green > a > span:last-child {
    background: linear-gradient(to bottom, #00E048 100%, #00C828 100%);
    background: -moz-linear-gradient(center top, #00E048, #00C828);
    background: -webkit-gradient(linear, center top, center bottom, from(#00E048), to(#00C828));
    background: -ms-linear-gradient(top, #00E048 100%, #00C828 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#00E048,endColorstr=#00C828,GradientType=0)";
}
ul.iconset > li.blue > a > span:last-child {
    background: linear-gradient(to bottom, #4810FF 100%, #2800FF 100%);
    background: -moz-linear-gradient(center top, #4810FF, #2800FF);
    background: -webkit-gradient(linear, center top, center bottom, from(#4810FF), to(#2800FF));
    background: -ms-linear-gradient(top, #4810FF 100%, #2800FF 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#4810FF,endColorstr=#2800FF,GradientType=0)";
}
ul.iconset > li.gray > a > span:last-child {
    background: linear-gradient(to bottom, #C8C8C8 100%, #B0B0B0 100%);
    background: -moz-linear-gradient(center top, #C8C8C8, #B0B0B0);
    background: -webkit-gradient(linear, center top, center bottom, from(#C8C8C8), to(#B0B0B0));
    background: -ms-linear-gradient(top, #C8C8C8 100%, #B0B0B0 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#C8C8C8,endColorstr=#B0B0B0,GradientType=0)";
}
ul.iconset > li.black > a > span:last-child {
    background: linear-gradient(to bottom, #484848 100%, #000000 100%);
    background: -moz-linear-gradient(center top, #484848, #000000);
    background: -webkit-gradient(linear, center top, center bottom, from(#484848), to(#000000));
    background: -ms-linear-gradient(top, #484848 100%, #000000 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#484848,endColorstr=#000000,GradientType=0)";
}
ul.iconset > li.purple > a > span:last-child {
    background: linear-gradient(to bottom, #C420FF 100%, #B000F0 100%);
    background: -moz-linear-gradient(center top, #C420FF, #B000F0);
    background: -webkit-gradient(linear, center top, center bottom, from(#C420FF), to(#B000F0));
    background: -ms-linear-gradient(top, #C420FF 100%, #B000F0 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#C420FF,endColorstr=#B000F0,GradientType=0)";
}
ul.iconset > li.cyan > a > span:last-child {
    background: linear-gradient(to bottom, #20B8FF 100%, #00A0F0 100%);
    background: -moz-linear-gradient(center top, #20B8FF, #00A0F0);
    background: -webkit-gradient(linear, center top, center bottom, from(#20B8FF), to(#00A0F0));
    background: -ms-linear-gradient(top, #20B8FF 100%, #00A0F0 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#20B8FF,endColorstr=#00A0F0,GradientType=0)";
}