1
2.mblCheckBox {
3  position: relative;
4  margin: -0.5em 3px 0.3em 4px;
5  width: 1em;
6  height: 1em;
7  border-style: outset;
8  border-width: 1px;
9  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e2e2e2));
10  background-image: linear-gradient(to bottom, #ffffff 0%, #e2e2e2 100%);
11  font: inherit;
12  cursor: pointer;
13  -webkit-appearance: none;
14  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
15  -webkit-transform: translateY(0.45em);
16  transform: translateY(0.45em);
17  border: 1px solid #c0c0c0;
18  border-bottom-color: #9b9b9b;
19  border-radius: 0;
20}
21.mblCheckBoxSelected {
22  background-image: -webkit-gradient(linear, left top, left bottom, from(#bbbbbb), to(#999999));
23  background-image: linear-gradient(to bottom, #bbbbbb 0%, #999999 100%);
24}
25.mblCheckBoxChecked,
26.mblCheckBox:checked {
27  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e2e2e2));
28  background-image: linear-gradient(to bottom, #ffffff 0%, #e2e2e2 100%);
29}
30.mblCheckBoxChecked::after,
31.mblCheckBox:checked::after {
32  position: absolute;
33  content: "";
34  width: 0.3em;
35  height: 0.6em;
36  top: 0;
37  left: 0.3em;
38  border-width: 0.15em;
39  border-style: none solid solid none;
40  -webkit-transform: rotate(45deg);
41  transform: rotate(45deg);
42  -webkit-transform-origin: 50% 50%;
43  transform-origin: 50% 50%;
44  border-color: #000000;
45}
46.mblCheckBoxChecked.mblCheckBoxSelected,
47.mblCheckBox:checked.mblCheckBoxSelected {
48  background-image: -webkit-gradient(linear, left top, left bottom, from(#bbbbbb), to(#999999));
49  background-image: linear-gradient(to bottom, #bbbbbb 0%, #999999 100%);
50}
51.mblCheckBoxChecked.mblCheckBoxSelected::after,
52.mblCheckBox:checked.mblCheckBoxSelected::after {
53  border-color: #ffffff;
54}
55