www-thermferm/css/style.css

/*
 */

/* Reset default browser 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, font, 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 {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}


body {
    background: #fff;
    color: #000;
    font-family: Verdana, Arial, sans-serif;
    width: 980px;
    font-size: 12px;
    margin: 0px;
}


#jqxWidget {
    width: 980px;
    height: 510px;
    float: left;
}

#header {
    width: 978px;
    height: 78px;
    float: left;
    border: 1px solid #4297d7;
    border-radius: 5px 5px 5px 5px;
    background: #5c9ccc url(../jqwidgets/styles/images/redmond/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x;
    color: #ffffff;
    font-weight: bold;
}

#title {
    width: 500px;
    height: 50px;
    float: left;
    margin-top: 23px;
    font-size: 1.8em;
    color: #FFD700;
    text-align: center;
    font-family: comic sans ms;
}

#room {
    width: 100px;
    height: 48px;
    float: left;
    border-radius: 5px 5px 5px 5px;
    background-color: #222;
    text-align: center;
    margin-top: 15px;
}

.rtemp {
    font-weight: bold;
    font-size: 1.2em;
    color: yellow;
    margin-top: 3px;
}

#content {
    width: 978px;
    height: 428px;
    float: left;
    border: 1px solid;
    border-color: #aaa;
    border-radius: 5px 5px 5px 5px;
}

#errors {
    height: 35px;
    width: 978px;
    float: left;
    text-align: center;
    font-size: 1.5em;
    margin-top: 10px;
    color: #ff0000;
}

#etable {
    height: 320px;
    width: 978px;
    float: left;
    overflow: auto;
}

#atable {
    height: 60px;
    width: 978px;
    float: left;
}

table.setup {
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
}

.trhead {
    font-weight: bold;
    background: #5c9ccc url(../jqwidgets/styles/images/redmond/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x;
}

tr.setup:nth-child(odd) {
    background: #FFFFFF;
}

tr.setup:nth-child(even) {
    background: #CCFFFF;
}

td.setup {
    padding: 1px 3px 1px 3px;
}

/*
 * Editor screens
 */
table.editor {
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    background-color: #eee;
}

tr.editor {
    height: 30px;
}

td.editname {
    width: 150px;
    padding: 1px 3px 1px 3px;
}

td.editfield {
    width: 300px;
    padding: 1px 3px 1px 3px;
}

td.editsub {
    width: 50px;
    padding: 1px 3px 1px 3px;
}

#jqxTabs {
    width: 980px;
    height: 440px;
    float: left;
}

#fermentor {
    height: 382px;
    width: 968px;
    background: #fff;
    margin: 5px;
    float: left;
}

/*
 *  +-------------panel_top--------------+
 *  |+----------------++----------------+|
 *  ||                ||    powerled    ||
 *  ||    selector    |+----------------+|
 *  ||                |+----------------+|
 *  ||                ||  mode_control  ||
 *  |+----------------++----------------+|
 *  +------------------------------------+
 *  +-----------panel_display------------+
 *  |+----------++----------++----------+|
 *  || display1 || display2 || display3 ||
 *  |+----------++----------++----------+|
 *  +------------------------------------+
 *  +-----------panel_control------------+
 *  |+----------++----------++----------+|
 *  ||   led1   ||   led2   ||   led3   ||
 *  |+----------++----------++----------+|
 *  |+----------++----------++----------+|
 *  || switch1  || switch2  || switch3  ||
 *  |+----------++----------++----------+|
 *  +------------------------------------+
 *  +----------pannel_buttons------------+
 *  |                                    |
 *  +------------------------------------+
 */

#fermentor_panel_top {
    width: 236px;
    height: 170px;
    float: right;
    background-color: #eee;
    border: 2px solid;
    border-color: #888;
    border-radius: 5px 5px 5px 5px;
    margin-bottom: 3px;
}

#fermentor_selector {
    width: 88px;
    height: 170px;
    float: left;
}

input.select {
    margin-left: 10px;
    margin-top: 13px;
}

#fermentor_thermometers {
    width: 720px; 
    height: 371px; 
    float: left;
    background-color: #eee;
    border: 2px solid;
    border-color: #888;
    border-radius: 5px 5px 5px 5px;
}

#fermentor_powerled {
    width: 38px;
    height: 30px;
    float: left;
    text-align: center;
    margin-top: 10px;
    margin-left: 90px;
}

#fermentor_mode_control {
    width: 148px;
    height: 110px;
    float: left;
    margin-top: 10px;
    background-color: #ddd;
}


#fermentor_panel_display {
    width: 236px;
    height: 50px;
    float: right;
    background-color: #eee;
    border: 2px solid;
    border-color: #888;
    border-radius: 5px 5px 5px 5px;
    margin-bottom: 3px;
}

#fermentor_display1 {
    width: 79px;
    height: 46px;
    float: left;
    text-align: center;
    margin-top: 7px;
}

#fermentor_display2 {
    width: 78px;
    height: 46px;
    float: left;
    text-align: center;
    margin-top: 7px;
}

#fermentor_display3 {
    width: 79px;
    height: 46px;
    float: left;
    text-align: center;
    margin-top: 7px;
}

#fermentor_panel_control {
    width: 236px;
    height: 100px;
    float: right;
    background-color: #eee;
    border: 2px solid;
    border-color: #888;
    border-radius: 5px 5px 5px 5px;
    margin-bottom: 3px;
}

#fermentor_led1 {
    width: 79px;
    height: 30px;
    float: left;
    text-align: center;
    margin-top: 8px;
}

#fermentor_led2 {
    width: 78px;
    height: 30px;
    float: left;
    text-align: center;
    margin-top: 8px;
}

#fermentor_led3 {
    width: 79px;
    height: 30px;
    float: left;
    text-align: center;
    margin-top: 8px;
}

.dtemp {
    font-weight: bold;
    font-size: 1.2em;
    color: blue;
}

.ltemp {
    font-weight: bold;
    font-size: 1.2em;
    color: green;
}

.htemp {
    font-weight: bold;
    font-size: 1.2em;
    color: red;
}

#fermentor_toggle1 {
    width: 79px;
    height: 70px;
    float: left;
    text-align: center;
    margin-top: 10px;
}

#fermentor_toggle2 {
    width: 78px;
    height: 70px;
    float: left;
    text-align: center;
    margin-top: 10px;
}

#fermentor_toggle3 {
    width: 79px;
    height: 70px;
    float: left;
    text-align: center;
    margin-top: 10px;
}

#fermentor_panel_buttons {
    width: 236px;
    height: 30px;
    float: right;
    background-color: #eee;
    border: 2px solid;
    border-color: #888;
    border-radius: 5px 5px 5px 5px;
}

#menu {
    width: 600px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid #5c9ccc;
    border-radius: 5px 5px 5px 5px;
    margin-top: 50px;
}

#menu_header {
    width: 600px;
    height: 30px;
    background-color: #5c9ccc;
    text-align: center;
    padding-top: 10px;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
}

#menu_left {
    width: 300px;
    height: 260px;
    float: left;
}

#menu_right {
    width: 300px;
    height: 260px;
    float: right;
}

.LEDred_on {
    margin: 5px auto;
    width: 12px;
    height: 12px;
    background-color: #F40;
    border-radius: 50%;
    box-shadow: #000 0 0px 4px 1px, inset #C33 0 -1px 5px, #f44 0 2px 12px;
}

.LEDred_off {
    margin: 5px auto;
    width: 12px;
    height: 12px;
    background-color: #820;
    border-radius: 50%;
    box-shadow: #400 0 0px 1px 1px;
}

.LEDyellow_on {
    margin: 5px auto;
    width: 12px;
    height: 12px;
    background-color: #FF0;
    border-radius: 50%;
    box-shadow: #000 0 0px 4px 1px, inset #860 0 -1px 5px, #DD0 0 2px 12px;
}

.LEDyellow_off {
    margin: 5px auto;
    width: 12px;
    height: 12px;
    background-color: #A90;
    border-radius: 50%;
    box-shadow: #440 0 0px 1px 1px;
}

.LEDgreen_on {
    margin: 5px auto;
    width: 12px;
    height: 12px;
    background-color: #5E0;
    border-radius: 50%;
    box-shadow: #000 0 0px 4px 1px, inset #270 0 -1px 5px, #5D0 0 2px 12px;
}

.LEDgreen_off {
    margin: 5px auto;
    width: 12px;
    height: 12px;
    background-color: #270;
    border-radius: 50%;
    box-shadow: #250 0 0px 1px 1px;
}

.LEDblue_on {
    margin: 5px auto;
    width: 12px;
    height: 12px;
    background-color: #4AF;
    border-radius: 50%;
    box-shadow: #000 0 0px 4px 1px, inset #247 0 -1px 5px, #48F 0 2px 12px;
}

.LEDblue_off {
    margin: 5px auto;
    width: 12px;
    height: 12px;
    background-color: #137;
    border-radius: 50%;
    box-shadow: #024 0 0px 1px 1px;
}