/* something like:
 * .linear-gradient(top, white, 0%, #eeeeee, 70%, #cccccc, 90%)
 */
/* pallette */
/* darker */
/* lighter */
/* element colors */
/* typography */
form label,
form.stacked label {
  display: block;
  margin-bottom: 6px;
  cursor: pointer;
}
form label.radio,
form.stacked label.radio,
form label.checkbox,
form.stacked label.checkbox {
  padding-left: 18px;
}
form label.radio input[type=radio],
form.stacked label.radio input[type=radio],
form label.checkbox input[type=radio],
form.stacked label.checkbox input[type=radio],
form label.radio input[type=checkbox],
form.stacked label.radio input[type=checkbox],
form label.checkbox input[type=checkbox],
form.stacked label.checkbox input[type=checkbox] {
  float: left;
  margin-left: -18px;
  margin-top: 3px;
  margin-bottom: 3px;
}
form label.radio input[type=checkbox],
form.stacked label.radio input[type=checkbox],
form label.checkbox input[type=checkbox],
form.stacked label.checkbox input[type=checkbox] {
  margin-top: 2px;
  margin-bottom: 2px;
}
form input,
form.stacked input,
form textarea,
form.stacked textarea,
form select,
form.stacked select,
form div.selectbox,
form.stacked div.selectbox {
  margin-bottom: 9px;
}
input,
textarea,
select,
div.selectbox {
  font-size: 12px;
}
input[type=text],
textarea,
select,
div.selectbox {
  line-height: 15px;
  vertical-align: middle;
  border: 1px solid #bbbbbb;
  border-left: 3px solid #57a7eb;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
}
input[type=text],
textarea {
  box-shadow: inset 0 0 1px 1px #e4e3e0;
  -moz-box-shadow: inset 0 0 1px 1px #e4e3e0;
  -webkit-box-shadow: inset 0 0 1px 1px #e4e3e0;
}
.button {
  background-color: white;
  border: 1px solid #bbbbbb;
  border-left: 3px solid #57a7eb;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  /* webkit example */

  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0)));
  /* mozilla example - FF3.6+ */

  background-image: -moz-linear-gradient(center bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  /* IE */

  filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#00000000', endColorStr='#33000000')";
  /* IE8 uses -ms-filter for whatever reason...
   * My tests show that IE8 uses filter so ... whatever */

  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#00000000', endColorStr='#33000000')";
  /* IE 10 */

  /* w3c */

  background-image: linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
}
.button:active,
.button.active {
  background-color: #e4e3e0;
  filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#e4e3e0, endColorStr=#ffffff)";
  background: #e4e3e0 linear-gradient(top, #e4e3e0, #ffffff);
  background: #e4e3e0 -moz-linear-gradient(top, #e4e3e0, #ffffff);
  background: #e4e3e0 -webkit-linear-gradient(top, #e4e3e0, #ffffff);
}
.button:disabled,
.button.disabled,
div.selectbox.disabled,
select:disabled,
textarea:disabled,
textarea.disabled {
  color: #aaaaaa;
  border: 1px solid #bbbbbb;
  border-left: 3px solid #dddddd;
}
.button:disabled:active,
.button.disabled.active {
  /* webkit example */

  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0)));
  /* mozilla example - FF3.6+ */

  background-image: -moz-linear-gradient(center bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  /* IE */

  filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#00000000', endColorStr='#33000000')";
  /* IE8 uses -ms-filter for whatever reason...
   * My tests show that IE8 uses filter so ... whatever */

  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#00000000', endColorStr='#33000000')";
  /* IE 10 */

  /* w3c */

  background-image: linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
}
.button.green {
  border: 1px solid #bbbbbb;
  border-left: 3px solid #66ce19;
}
.button.highlight {
  border-color: #57a7eb;
}
.button.error {
  color: #cd0000;
  border-color: #cd0000;
}
div.selectbox {
  /* webkit example */

  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0)));
  /* mozilla example - FF3.6+ */

  background-image: -moz-linear-gradient(center bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  /* IE */

  filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#00000000', endColorStr='#33000000')";
  /* IE8 uses -ms-filter for whatever reason...
   * My tests show that IE8 uses filter so ... whatever */

  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#00000000', endColorStr='#33000000')";
  /* IE 10 */

  /* w3c */

  background-image: linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  padding: 1px 6px;
}
div.selectbox .arrow {
  border-color: #bbbbbb;
  font-size: 6px;
}
.menu,
.base-menu {
  border-color: #bbbbbb;
}
.menu li:hover,
.base-menu li:hover {
  background-color: #bbbbbb;
}
.togglegroup {
  display: inline-table;
}
.togglegroup [type=button] {
  border-width: 1px 0px 1px 1px;
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  margin: 0px;
}
.togglegroup [type=button].first {
  border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  -webkit-border-radius: 4px 0 0 4px;
}
.togglegroup [type=button].last {
  border-radius: 0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  -webkit-border-radius: 0 4px 4px 0;
  border-width: 1px;
}
.togglegroup .checked {
  color: #ffffff;
  background: #57a7eb;
}
.bargraph .graph-bar {
  background-color: #57a7eb;
  box-shadow: -3px 7px 5px 0px #aaaaaa;
  -moz-box-shadow: -3px 7px 5px 0px #aaaaaa;
  -webkit-box-shadow: -3px 7px 5px 0px #aaaaaa;
}
.ratio-graph .total-count-view {
  border: 1px solid #bbbbbb;
}
.ratio-graph .current-count-view {
  position: relative;
  background: #57a7eb;
  border: solid #57a7eb;
  border-width: 0px 1px 1px 0px;
}
.ratio-graph .current-count-cell {
  color: #57a7eb;
}
.ratio-graph .current-count {
  color: #57a7eb;
}
.ratio-graph .total-count-cell {
  color: #aaaaaa;
}
.ratio-graph .total-count {
  color: #aaaaaa;
}