amber/css/moka.css

@import "reset.css";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,latin-ext);
.no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
body {
  background: #f1f1f1;
}
.moka_view {
  display: inline-block;
}
.moka_view .mk_default {
  font-size: 12px;
  font-family: "Open Sans";
  color: #555;
  text-shadow: 0 1px 0 white;
}
.moka_view span {
  font-size: 12px;
  font-family: "Open Sans";
  color: #555;
  text-shadow: 0 1px 0 white;
  color: #333;
  padding: 4px;
}
.moka_view .mk_control,
.moka_view .mk_control:active,
.moka_view .mk_control:focus {
  font-size: 12px;
  font-family: "Open Sans";
  color: #555;
  text-shadow: 0 1px 0 white;
  margin: 4px;
  padding: 3px 10px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border-top: solid 1px #999999;
  border-left: solid 1px #999999;
  border-right: solid 1px #999999;
  border-bottom: solid 1px #999999;
  -webkit-box-shadow: 0 0 3px 0 #cccccc;
  -moz-box-shadow: 0 0 3px 0 #cccccc;
  box-shadow: 0 0 3px 0 #cccccc;
  background: white;
}
.moka_view .mk_control:focus,
.moka_view .mk_control:active:focus,
.moka_view .mk_control:focus:focus {
  outline: 0;
}
.moka_view button {
  font-size: 12px;
  font-family: "Open Sans";
  color: #555;
  text-shadow: 0 1px 0 white;
  margin: 4px;
  padding: 3px 10px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border-top: solid 1px #999999;
  border-left: solid 1px #999999;
  border-right: solid 1px #999999;
  border-bottom: solid 1px #999999;
  -webkit-box-shadow: 0 0 3px 0 #cccccc;
  -moz-box-shadow: 0 0 3px 0 #cccccc;
  box-shadow: 0 0 3px 0 #cccccc;
  background: white;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fafafa;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #dedede), color-stop(1, #ffffff));
  background: -ms-linear-gradient(bottom, #dedede, #ffffff);
  background: -moz-linear-gradient(center bottom, #dedede 0%, #ffffff 100%);
  background: -o-linear-gradient(#ffffff, #dedede);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dedede', GradientType=0);
}
.moka_view button:focus {
  outline: 0;
}
.moka_view button:focus {
  border-color: #08c;
}
.moka_view button:active {
  background: #ccc;
  -webkit-box-shadow: inset 0 0 3px 0 #888888;
  -moz-box-shadow: inset 0 0 3px 0 #888888;
  box-shadow: inset 0 0 3px 0 #888888;
  border-color: #999;
}
.moka_view input,
.moka_view textarea {
  font-size: 12px;
  font-family: "Open Sans";
  color: #555;
  text-shadow: 0 1px 0 white;
  margin: 4px;
  padding: 3px 10px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border-top: solid 1px #999999;
  border-left: solid 1px #999999;
  border-right: solid 1px #999999;
  border-bottom: solid 1px #999999;
  -webkit-box-shadow: 0 0 3px 0 #cccccc;
  -moz-box-shadow: 0 0 3px 0 #cccccc;
  box-shadow: 0 0 3px 0 #cccccc;
  background: white;
  text-shadow: 0 0 0;
}
.moka_view input:focus,
.moka_view textarea:focus {
  outline: 0;
}
.moka_view input:focus,
.moka_view textarea:focus {
  -webkit-box-shadow: inset 0 0 3px 0 #999999;
  -moz-box-shadow: inset 0 0 3px 0 #999999;
  box-shadow: inset 0 0 3px 0 #999999;
  border-color: #08c;
}
.moka_view textarea {
  width: 200px;
  height: 100px;
}
.moka_view input[type="checkbox"] {
  position: absolute;
  left: -999999px;
}
.moka_view .mk_checkbox + label {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 0 6px;
  margin: 4px;
  background: url('../images/moka/check.png') 50% 50% no-repeat;
  height: 16px;
  width: 16px;
}
.moka_view .mk_checkbox:focus + label {
  background-image: url('../images/moka/check-focus.png');
  -webkit-box-shadow: 0 0 2px #0088cc;
  -moz-box-shadow: 0 0 2px #0088cc;
  box-shadow: 0 0 2px #0088cc;
}
.moka_view .mk_checkbox:checked + label {
  background-image: url('../images/moka/check-active.png');
}
.moka_view .mk_switch + label {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  margin: 4px;
  vertical-align: middle;
  display: inline-block;
  height: 20px;
  width: 59px;
  border: 1px solid #999;
  background: url('../images/moka/switch.png') 100% 50% no-repeat;
  -webkit-transition: background 0.3s ease-out;
  -moz-transition: background 0.3s ease-out;
  -o-transition: background 0.3s ease-out;
  transition: background 0.3s ease-out;
}
.moka_view .mk_switch:focus + label {
  border-color: #08c;
}
.moka_view .mk_switch:checked + label {
  background-position: 0% 50%;
}