www/css/style.css

/*
 */

body {
    background: #ccc;
    font-family: Verdana, Arial, sans-serif;
    margin: 0px;
}


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


#water_totals {
    width: 960px;
    background: #353536;
    margin-top: 15px;
    border: 1px solid;
    border-color: #59b4d4;
    border-radius: 5px 5px 5px 5px;
}


#about_table {
    width: 960px;
    background: #353536;
    margin: 150px;
    border: 2px solid;
    border-color: #59b4d4;
    border-radius: 5px 5px 5px 5px;
}


#node_table {
    width: 600px;
    background: #353536;
    margin: 50px;
    border: 2px solid;
    border-color: #59b4d4;
    border-radius: 5px 5px 5px 5px;
}


#fermenter_table {
    width: 960px;
    height: 200px;
    background: #252526;
    margin: 5px;
    border: 2px solid;
    border-color: #59b4d4;
    border-radius: 5px 5px 5px 5px;
}


.ebccolor {
    float: left;
    margin-left: 10px;
    width: 75px;
    height: 23px;
    border:1px solid #59b4d4; 
    border-radius:6px;
    moz-border-radius:6px;
    webkit-border-radius:6px;
    background: #212121;
}


/*
 * +----------------------------------------------------_
 * |+-------------------++--------++-------------------+|
 * ||                   ||        ||                   ||
 * ||			|| chiller||                   ||
 * ||                   ||        ||                   ||
 * ||                   |+--------+|                   ||
 * ||     Air temp      |          |     Beer temp     ||
 * ||                   |          |                   ||
 * ||                   |          |                   ||
 * ||                   |          |                   ||
 * |+-------------------+          +-------------------+|
 * +----------------------------------------------------+
 */

#fermenter_thermometers {
    width: 960px;
    height: 390px;
    float: left;
    background-color: #252526;
    margin: 5px;
    border: 2px solid;
    border-color: #59b4d4;
    border-radius: 5px 5px 5px 5px;
}

/*
 * +----------panel_top------------+
 * |+-------------++--------------+|
 * ||             ||   powerled   ||
 * ||  selector   |+--------------+|
 * ||             |+--------------+|
 * ||             || mode control ||
 * |+-------------++--------------+|
 * +-------------------------------+
 * +---------panel_display---------+
 * |+--------++---------++--------+|
 * || disp 1 || disp 2  || disp 3 ||
 * |+--------++---------++--------+|
 * +-------------------------------+
 * +---------panel_control---------+
 * |+--------++---------++--------+|
 * ||  led 1 ||  led 2  ||  led 3 ||
 * |+--------++---------++--------+|
 * |+--------++---------++--------+|
 * ||  sw 1  ||   sw 2  ||  sw 3  ||
 * |+--------++---------++--------+|
 * +-------------------------------+
 * +--------panel_buttons----------+
 * |                               |
 * +-------------------------------+
 */
#fermenter_panel_top {
  width: 280px;
  height: 200px;
  float: right;
  margin: 5px;
  background-color: #252526;
  border: 2px solid;
  border-color: #59b4d4;
  border-radius: 5px 5px 5px 5px;
}

#fermenter_selector {
  width: 100px;
  height: 198px;
  margin-top: 3px;
  float: left;
}

#fermenter_alarmled {
width: 50px;
height: 30px;
float: left;
text-align: center;
margin-top: 10px;
margin-left: 20px;
}

#fermenter_powerled {
width: 50px;
height: 30px;
float: left;
text-align: center;
margin-top: 10px;
margin-left: 42px;
}

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

#fermenter_panel_display {
  width: 280px;
  height: 80px;
  float: right;
  margin: 5px;
  background-color: #252526;
  border: 2px solid;
  border-color: #59b4d4;
  border-radius: 5px 5px 5px 5px;
  margin-bottom: 3px;
}

#fermenter_display1 {
width: 93px;
height: 76px;
float: left;
text-align: center;
margin-top: 7px;
}

#fermenter_display2 {
width: 93px;
height: 76px;
float: left;
text-align: center;
margin-top: 7px;
}

#fermenter_display3 {
width: 93px;
height: 76px;
float: left;
text-align: center;
margin-top: 7px;
}

.dtemp {
  font-weight: bold;
  color: yellow;
}

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

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

#fermenter_panel_control {
  width: 280px;
  height: 140px;
  float: right;
  margin: 5px;
  background-color: #252526;
  border: 2px solid;
  border-color: #59b4d4;
  border-radius: 5px 5px 5px 5px;
  margin-bottom: 3px;
}

#fermenter_led1,
#fermenter_led2,
#fermenter_led3 {
  width: 93px;
  height: 30px;
  float: left;
  text-align: center;
  margin-top: 8px;
}

#fermenter_toggle1 {
  float: left;
  margin-left: 29px;
  margin-top: 20px;
}

#fermenter_toggle2,
#fermenter_toggle3 {
  float: left;
  margin-left: 57px;
  margin-top: 20px;
}


#fermenter_panel_buttons {
  width: 280px;
  height: 130px;
  float: right;
  margin: 5px;
  background-color: #252526;
  border: 2px solid;
  border-color: #59b4d4;
  border-radius: 5px 5px 5px 5px;
  margin-bottom: 3px;
}


.LEDred_on {
    margin: 5px auto;
    width: 18px;
    height: 18px;
    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: 18px;
    height: 18px;
    background-color: #820;
    border-radius: 50%;
    box-shadow: #400 0 0px 1px 1px;
}

.LEDyellow_on {
    margin: 5px auto;
    width: 18px;
    height: 18px;
    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: 18px;
    height: 18px;
    background-color: #A90;
    border-radius: 50%;
    box-shadow: #440 0 0px 1px 1px;
}

.LEDgreen_on {
    margin: 5px auto;
    width: 18px;
    height: 18px;
    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: 18px;
    height: 18px;
    background-color: #270;
    border-radius: 50%;
    box-shadow: #250 0 0px 1px 1px;
}

.LEDblue_on {
    margin: 5px auto;
    width: 18px;
    height: 18px;
    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: 18px;
    height: 18px;
    background-color: #137;
    border-radius: 50%;
    box-shadow: #024 0 0px 1px 1px;
}


/*
 * New recipe wizzard
 */
#hintBase, #hintStyle, #hintEq {
    float: left;
    margin-top: 30px;
    margin-right: 20px;
    padding: 5px;
    width: 600px;
    color: yellow;
}
#section {
    margin: 5px;
}
#baseButtonsWrapper {
    float: right;
    margin-top: 30px;
    margin-right: 10px;
    width: 160px;
}
#styleButtonsWrapper {
    float: right;
    margin-top: 30px;
    margin-right: 10px;
    width: 320px;
}
#eqButtonsWrapper {
    float: right;
    margin-top: 30px;
    margin-right: 10px;
    width: 320px;
}
#completedButtonsWrapper {
    float: right;
    margin-right: 10px;
    width: 320px;
    margin-top: 160px;
}
.nextButton {
    float: right;
    margin-left: 0px;
}
.backButton {
    float: left;
    margin-left: 10px;
}