FIX FOR SUB PIXEL RENDERING

dabblet.css

body {
    background: url('../assets/body_bg.jpeg') repeat;
    background: #333;
}

/* FIX FOR SUB PIXEL RENDERING */
html {
     -webkit-font-smoothing: antialiased;
     font-smoothing: antialiased;
}

/* FILTER SECTION */
.filter-wrapper {
    max-width: 960px;
    margin: 0 auto;
    padding: 0;
    font-family: "Georgia";
    font-size: 1em;
    background: #1c1c1c;
}

.filter-wrapper .column {
    padding: 0;
    margin: 3px;
    width: 200px;
    display: inline-block;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}

.filter-wrapper .column h2{
    color: #f38f00;
    font-family: "Archer"; /* NEED TO MAKE THIS WORK ON THE SERVER */
    padding-left: 6px;
}

.filter-wrapper .column .filter-list{
    border: #2a2a2a 1px solid;
    padding: 4px;
    background: #0f0e0e;
    font-size: 0.95em;
}

.filter-wrapper .column li {
	list-style: none;
}

.filter-wrapper .column .filter {
    color: #AAA;
    height: 35px;
    text-shadow: 1px 1px #333;
    border-top: 1px solid #5f5f5f;
    background-image: linear-gradient(bottom, rgb(34,34,34) 16%, rgb(43,43,43) 58%);
    background-image: -o-linear-gradient(bottom, rgb(34,34,34) 16%, rgb(43,43,43) 58%);
    background-image: -moz-linear-gradient(bottom, rgb(34,34,34) 16%, rgb(43,43,43) 58%);
    background-image: -webkit-linear-gradient(bottom, rgb(34,34,34) 16%, rgb(43,43,43) 58%);
    background-image: -ms-linear-gradient(bottom, rgb(34,34,34) 16%, rgb(43,43,43) 58%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.16, rgb(34,34,34)),
        color-stop(0.58, rgb(43,43,43))
    );
}

/* FILTER CHECKBOX */
.filter-wrapper .filter input[type=checkbox] {
    visibility: hidden;
}

.filter-wrapper .filter {
    position: relative;
}

.filter-wrapper .filter label {
    cursor: pointer;
    position: absolute;
    width: 13px;
    height: 12px;
    top: 12px;
    padding-left: 20px;
    background: url(http://i.imgur.com/GHb5J.png) no-repeat left;
    width: 75%;
}

.filter-wrapper .filter label span {
    position: absolute;
    top: -3px;
    width: 100%;
}

.filter-wrapper .filter label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 13px;
    height: 12px;
    top: 0px;
    left: 0px;
    background: url(http://i.imgur.com/7mPha.png) no-repeat left;
}

.filter-wrapper .filter label:hover::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.5;
}

.filter-wrapper .filter input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}
​

dabblet.html

<form method="GET">
    <div class="filter-wrapper"> 
         <div class="column"> 
            <h2>TYPE:</h2>
            <ul class="filter-list">  
                <li class="filter">
                    <fieldset>
                        <input type="checkbox" value="None" id="category[red]" name="category[red]" />
                        <label for="category[red]"><span>Red</span></label>
                    </fieldset>
                </li>   
                <li class="filter">
                    <fieldset>
                        <input type="checkbox" value="None" id="category[white]" name="category[white]" />
                        <label for="category[white]"><span>White</span></label>
                    </fieldset>
                </li> 
                <li class="filter">
                    <fieldset>
                        <input type="checkbox" value="None" id="category[rose]" name="category[rose]" />
                        <label for="category[rose]"><span>Rose</span></label>
                    </fieldset>
                </li> 
                <li class="filter">
                    <fieldset>
                        <input type="checkbox" value="None" id="category[sparkling]" name="category[sparkling]" />
                        <label for="category[sparkling]"><span>Sparkling</span></label>
                    </fieldset>
                </li> 
                <li class="filter">
                    <fieldset>
                        <input type="checkbox" value="None" id="category[housewares]" name="category[housewares]" />
                        <label for="category[housewares]"><span>Housewares</span></label>
                    </fieldset>
                </li>                
            </ul>
        </div>
         <div class="column"> 
            <h2>VARIETY:</h2>
            <ul class="filter-list">  
                <li class="filter">
                    <fieldset>
                        <input type="checkbox" value="None" id="variety[cabernet sauvignon]" name="variety[cabernet sauvignon]" />
                        <label for="variety[cabernet sauvignon]"><span>Cabernet Sauvignon</span></label>
                    </fieldset>
                </li>   
                <li class="filter">
                    <fieldset>
                        <input type="checkbox" value="None" id="variety[pinot noir]" name="variety[pinot noir]" />
                        <label for="variety[pinot noir]"><span>Pinot Noir</span></label>
                    </fieldset>
                </li> 
                <li class="filter">
                    <fieldset>
                        <input type="checkbox" value="None" id="category[chardonnay]" name="variety[chardonnay]" />
                        <label for="variety[chardonnay]"><span>Chardonnay</span></label>
                    </fieldset>
                </li> 
                <li class="filter">
                    <fieldset>
                        <input type="checkbox" value="None" id="variety[sauvignon blanc]" name="variety[sauvignon blanc]" />
                        <label for="variety[sauvignon blanc]"><span>Sauvignon Blanc</span></label>
                    </fieldset>
                </li> 
                <li class="filter">
                    <fieldset>
                        <input type="checkbox" value="None" id="variety[other]" name="variety[other]" />
                        <label for="variety[other]"><span>Other</span></label>
                    </fieldset>
                </li>                
            </ul>
        </div>
         <div class="column"> 
            <h2>REGION:</h2>
            <ul class="filter-list">  
                <li class="filter">
                    <fieldset>
                        <input type="checkbox" value="None" id="region[california]" name="region[california]" />
                        <label for="region[california]"><span>California</span></label>
                    </fieldset>
                </li>   
                <li class="filter">
                    <fieldset>
                        <input type="checkbox" value="None" id="region[france]" name="region[france]" />
                        <label for="region[france]"><span>France</span></label>
                    </fieldset>
                </li> 
                <li class="filter">
                    <fieldset>
                        <input type="checkbox" value="None" id="region[italy]" name="region[italy]" />
                        <label for="region[italy]"><span>Italy</span></label>
                    </fieldset>
                </li> 
                <li class="filter">
                    <fieldset>
                        <input type="checkbox" value="None" id="region[spain]" name="region[spain]" />
                        <label for="region[spain]"><span>Span</span></label>
                    </fieldset>
                </li> 
                <li class="filter">
                    <fieldset>
                        <input type="checkbox" value="None" id="region[other]" name="region[other]" />
                        <label for="region[other]"><span>Other</span></label>
                    </fieldset>
                </li>                
            </ul>
        </div>
     </div>
   </div>
</form>​

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}