www/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: #ccc;
    color: #000;
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
    margin: 0px;
}


#jqxWidget {
    width: 1280px;
    height: 660px;
    float: left;
}


#jqxMenu {
    border: 2px solid #4297d7;
}


#MainPanel {
    width: 1278px;
    height: 628px;
    border: 2px solid #4297d7;
    background: #252526;
    color: #eeeeee;
}


#header {
    width: 1278px;
    height: 38px;
    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: 1278px;
    height: 38px;
    float: left;
    margin-top: 2px;
    font-size: 1.8em;
    color: #FFD700;
    text-align: center;
    font-family: comic sans ms;
}


#node_table {
    width: 600px;
    background: #353536;
    margin: 50px;
    border: 2px solid;
    font-size: 12pt;
    border-color: #888;
    border-radius: 5px 5px 5px 5px;
}


#fermenter_table {
    width: 720px;
    background: #252526;
    margin: 5px;
    border: 2px solid;
    border-color: #888;
    border-radius: 5px 5px 5px 5px;
}


.temperature {
    display: inline-block;
    font-size: 12pt;
    width: 64px;
    height: 20px;
    white-space: nowrap;
    color: #00eeee;
}

.NUM {
    font-family: "Arial Black", Gadget, sans-serif;
    color: #00eeee;
    border-style: ridge;
    padding: 2px;
    margin: 2px;
    background-color: #212121;
}


/*
 * +----------------------------------------------------_
 * |+-------------------++--------++-------------------+|
 * ||                   ||        ||                   ||
 * ||			|| chiller||                   ||
 * ||                   ||        ||                   ||
 * ||                   |=--------+|                   ||
 * ||     Air temp      |+--------+|     Beer temp     ||
 * ||                   ||        ||                   ||
 * ||                   || Temps  ||                   ||
 * ||                   || digits ||                   ||
 * |+-------------------++--------++-------------------+|
 * +----------------------------------------------------+
 */
#fermenter_thermometers {
    width: 720px;
    height: 295px;
    background-color: #252526;
    margin: 5px;
    border: 2px solid;
    border-color: #888;
    border-radius: 5px 5px 5px 5px;
}

#fermenter_tempdigits {
    width: 145px;
    height: 120px;
    float: left;
    margin-top: 170;
    background-color: #252526;
    border: 2px solid;
    border-color: #888;
    border-radius: 5px 5px 5px 5px;
}


.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;
}