@media screen and (max-width: 30em) {
    /* phones */
    li.colourselect > label {
        display: inline !important;
    }
    .filter-color-box {
        margin:2px 4px;
        display:inline-block !important;
        width:48px !important;
        height:48px !important;
        border:1px solid #ccc;
        border-radius:2px;
    }
}
@media screen and (min-width: 30em) and (max-width: 90em) {
    /*tablets/crappy pcs*/
    li.colourselect > label {
        display: inline !important;
    }
    .filter-color-box {
        margin:2px 4px;
        display:inline-block !important;
        width:36px !important;
        height:36px !important;
        border:1px solid #ccc;
        border-radius:3px;
    }
}
@media screen and (min-width: 90em) {
    /*desktop*/
    li.colourselect > label {
        display: inline !important;
    }
    .filter-color-box {
        margin:2px 4px;
        display:inline-block !important;
        width:36px !important;
        height:36px !important;
        border:1px solid #ccc;
        border-radius:4px;
    }
}/* fancy colors */
.filter-color-box.transparent-red {
    background: #f85032; /* Old browsers */
    background: -moz-linear-gradient(45deg, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.filter-color-box.transparent-blue {
    background: #b8e1fc; /* Old browsers */
    background: -moz-linear-gradient(45deg, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.filter-color-box.sunburst {
    background: #ed7504; /* Old browsers */
    background: -moz-linear-gradient(45deg, #ed7504 0%, #ff6600 15%, #fc0004 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #ed7504 0%,#ff6600 15%,#fc0004 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #ed7504 0%,#ff6600 15%,#fc0004 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed7504', endColorstr='#fc0004',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
/* simple */
.filter-color-box.white  { background:#ffffff;}
.filter-color-box.black  { background:#000000;}
.filter-color-box.red    { background:#ff0000;}
.filter-color-box.green  { background:#00ff00;}
.filter-color-box.blue   { background:#0000ff;}
.filter-color-box.orange { background:#fc7b02;}
.filter-color-box.grey   { background:#cfcfcf;}