editpane

by needlethread

HTML

<div class="ui-grid-a tt_editpane_row" data-fieldname="name">
    <div class="ui-block-a">
        <fieldset data-type="horizontal" data-mini="true">
            <label for="star">Star</label>
            <input type="checkbox" name="star" id="star" />
            <label for="public">Public</label>
            <input type="checkbox" name="public" id="public" />
        </fieldset>
    </div>
    <!-- block-a -->
</div>
<div id="tt_editpane_ul" data-id="1816" data-datatype="user">
    <div class="ui-grid-a tt_editpane_row" data-fieldname="bittermodel">
        <div class="ui-block-a "><span>My check</span>

        </div>
        <div class="ui-block-b "><span>
            <label for="tt_editfield_bittermodel">labeltext</label>
            <input type="checkbox" data-id="1816" checked="checked" id="tt_editfield_bittermodel"  name="bittermodel"  class="tt_watch_chk" data-watcho="1" ></span>

        </div>
    </div>
    <div class="ui-grid-a tt_editpane_row" data-fieldname="usevol">
        <div class="ui-block-a tt_editpane_left"> <span>Auto-convert recipes to my volume</span>

        </div>
        <div class="ui-block-b tt_editpane_right"> <span>
                <label for="tt_editfield_usevol">Auto-convert recipes to my volume</label>
                <input type="checkbox" data-id="1816"  id="tt_editfield_usevol"  name="usevol"  class="tt_watch_chk" data-watcho="0" >
                    </span>

        </div>
    </div>
    <div class="ui-grid-a tt_editpane_row" data-fieldname="defeff">
        <div class="ui-block-a tt_editpane_left"><span>Default mash efficiency (%)</span>

        </div>
        <div class="ui-block-b tt_editpane_right"><span><label for="tt_editpane_defeff">Default mash efficiency (%)</label><input type="text" data-id="1816" id="tt_editfield_defeff" name="defeff" class="tt_editfield_defeff tt_watch" value="0" data-watcho="0" ></span>

        </div>
    </div>
    <div class="ui-grid-a tt_editpane_row" data-fieldname="useeff">
       ...

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0;
    font-size: 100%;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
button, input, select, textarea {
    font-size: 100%;
    overflow: visible;
    margin: 0;
    vertical-align: baseline;
    width: auto;
}
textarea {
    overflow: auto;
    vertical-align: text-top;
}
div#malts h4 a {
    background-color: sienna;
    color: white;
    text-shadow: none;
}
div#malt_area {
    background-color: tan;
}
div#hops h4 a {
    background-color: darkgreen;
    color: white;
    text-shadow: none;
}
div#boil_area {
    background-color: lightgreen;
}
.ui-controlgroup-horizontal div.ui-controlgroup-controls > button.bc_prefix {
    text-align: right;
    width: 4em;
}
.ui-controlgroup-horizontal div.ui-controlgroup-controls > button.bc_prefix_wide {
    text-align: right;
    width: 6em;
}
.ui-controlgroup-horizontal div.ui-controlgroup-controls > div.bc_field_wide {
    width: 30em;
}
div.ui-controlgroup-controls {
    width: 100%;
}
div.ui-controlgroup.bc_inline {
    display: inline-block;
}
button.bc_suffix {
    text-align: left;
    min-width:...