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: #d5d5d5;
}
.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;
  -webkit-box-shadow: 0 0 2px #0088cc;
  -moz-box-shadow: 0 0 2px #0088cc;
  box-shadow: 0 0 2px #0088cc;
}
.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;
  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;
  -webkit-box-shadow: 0 0 2px #0088cc;
  -moz-box-shadow: 0 0 2px #0088cc;
  box-shadow: 0 0 2px #0088cc;
}
.moka_view button:active {
  background: #dedede;
  -webkit-box-shadow: inset 0 0 3px 0 #aaaaaa;
  -moz-box-shadow: inset 0 0 3px 0 #aaaaaa;
  box-shadow: inset 0 0 3px 0 #aaaaaa;
}
.moka_view input {
  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 {
  outline: 0;
  -webkit-box-shadow: 0 0 2px #0088cc;
  -moz-box-shadow: 0 0 2px #0088cc;
  box-shadow: 0 0 2px #0088cc;
}
.moka_view input:focus {
  -webkit-box-shadow: inset 0 0 3px 0 #0088cc;
  -moz-box-shadow: inset 0 0 3px 0 #0088cc;
  box-shadow: inset 0 0 3px 0 #0088cc;
}
.moka_view input[type="checkbox"] {
  position: absolute;
  left: -999999px;
}
.moka_view input[type="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;
  background: url('../images/moka/check.png') 50% 50% no-repeat;
  height: 16px;
  width: 16px;
}
.moka_view input[type="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 input[type="checkbox"]:checked + label {
  background-image: url('../images/moka/check-active.png');
}