/*** Glyph ***/

/* new technic to set icons, using data attribute */
/* seems to not be a performance issue, because with classes, browser also have to explore the entire tree */
[data-glyph]:before , [data-glyph]:after { display: inline; font-family: icons; font-weight: normal; font-style: normal; speak: none; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* 
  it is easy to convert unicode to html entities 
  - CSS Unicode: \unicode 
  - HTML entity: &#xunicode
*/
/* magic technic, with HTML characters */
[data-glyph]:before { content: attr(data-glyph); }

/* named glyph */
[data-glyph="xxxx"]:before { content: "\e600"; }



/*** Radio/Checkboxes ***/

/* this sample assume three status (inactive, active, error) for checked and 
unchecked state, and than each checkbox is 13px x 13px */
/* do not hesitate to adapt it if necessary */

/* for not-modern browser, do not forgot to activate jquery.checked.js in view.yml file */
/* hide it behind the label, but keep it at correct place and visible (for focus) */
input[type="checkbox"], input[type="radio"] { position: absolute; z-index: -1; margin-top: 2px; margin-left: 2px; opacity: 0; }
html.ie_lt9 input[type="checkbox"], html.ie_lt9 input[type="radio"] { filter: alpha(opacity=0); }
input[type="checkbox"] + label, input[type="radio"] + label { position: relative; z-index: 1; display: inline-block; padding-left: 18px; min-height: 14px; padding-top: 1px; }
/* background display */
input[type="checkbox"] + label:before, input[type="radio"] + label:before,
input[type="checkbox"] + label:after, input[type="radio"] + label:after { display: inline-block; width: 13px; height: 13px; position: absolute; top: 1px; z-index: 1; background: url(images/checkbox.png) 0 0 no-repeat; }
/* by default, only before */
input[type="checkbox"] + label:before, input[type="radio"] + label:before { content: ""; left: 0; }
/* with this class, on after */
/* adjust label */
input.\:after[type="checkbox"] + label, input.\:after[type="radio"] + label { padding-left: 0; padding-right: 18px; }
/* hide before */
input.\:after[type="checkbox"] + label:before, input.\:after[type="radio"] + label:before { display: none; }
/* display after */
input.\:after[type="checkbox"] + label:after, input.\:after[type="radio"] + label:after { content: ""; right: 0; }

/* unchecked */
/* normal */
input[type="checkbox"] + label:before, input[type="radio"] + label:before,
input[type="checkbox"] + label:after, input[type="radio"] + label:after { background-position: 0 -13px; }
/* hover (note that the input cannot be hover) */
input[type="checkbox"] + label:hover:before, input[type="radio"] + label:hover:before, 
input[type="checkbox"] + label:hover:after, input[type="radio"] + label:hover:after,
/* focus, active */
input[type="checkbox"]:focus + label:before, input[type="radio"]:focus + label:before, 
input[type="checkbox"]:active + label:before, input[type="radio"]:active + label:before,
input[type="checkbox"] + label:focus:before, input[type="radio"] + label:focus:before, 
input[type="checkbox"] + label:active:before, input[type="radio"] + label:active:before, 
input[type="checkbox"]:focus + label:after, input[type="radio"]:focus + label:after, 
input[type="checkbox"]:active + label:after, input[type="radio"]:active + label:after,
input[type="checkbox"] + label:focus:after, input[type="radio"] + label:focus:after, 
input[type="checkbox"] + label:active:after, input[type="radio"] + label:active:after { background-position: -13px -13px; }
/* invalid/required */
/* for now, only on mozilla */
input[type="checkbox"]:-moz-ui-invalid + label:before, input[type="radio"]:-moz-ui-invalid + label:before,
input[type="checkbox"]:-moz-ui-invalid + label:after, input[type="radio"]:-moz-ui-invalid + label:after { background-position: -26px -13px; }
/* error */
.formrow_error input[type="checkbox"] + label:before, .formrow_error input[type="radio"] + label:before,
.formrow_error input[type="checkbox"] + label:after, .formrow_error input[type="radio"] + label:after { background-position: -26px -13px; }
/* checked */
/* normal */
input[type="checkbox"]:checked + label:before, input[type="radio"]:checked + label:before, 
input[type="checkbox"]:checked + label:after, input[type="radio"]:checked + label:after { background-position: 0 0; }
/* hover (not that the input cannot be hover) */
input[type="checkbox"]:checked + label:hover:before, input[type="radio"]:checked + label:hover:before,
input[type="checkbox"]:checked + label:hover:after, input[type="radio"]:checked + label:hover:after,
/* focus, active */
input[type="checkbox"]:checked:focus + label:before, input[type="radio"]:checked:focus + label:before, 
input[type="checkbox"]:checked:active + label:before, input[type="radio"]:checked:active + label:before,
input[type="checkbox"]:checked + label:focus:before, input[type="radio"]:checked + label:focus:before, 
input[type="checkbox"]:checked + label:active:before, input[type="radio"]:checked + label:active:before,
input[type="checkbox"]:checked:focus + label:after, input[type="radio"]:checked:focus + label:after, 
input[type="checkbox"]:checked:active + label:after, input[type="radio"]:checked:active + label:after,
input[type="checkbox"]:checked + label:focus:after, input[type="radio"]:checked + label:focus:after, 
input[type="checkbox"]:checked + label:active:after, input[type="radio"]:checked + label:active:after { background-position: -13px 0; }
/* invalid/required */
/* for now, only on mozilla */
input[type="checkbox"]:checked:-moz-ui-invalid + label:before, input[type="radio"]:checked:-moz-ui-invalid + label:before,
input[type="checkbox"]:checked:-moz-ui-invalid + label:after, input[type="radio"]:checked:-moz-ui-invalid + label:after { background-position: -26px 0; }
/* error */
.formrow_error input[type="checkbox"]:checked + label:before, .formrow_error input[type="radio"]:checked + label:before,
.formrow_error input[type="checkbox"]:checked + label:after, .formrow_error input[type="radio"]:checked + label:after { background-position: -26px 0; }
/* :checked, same rules (must be separate for IE8) */
/* normal */
input[type="checkbox"].\:checked + label:before, input[type="radio"].\:checked + label:before,
input[type="checkbox"].\:checked + label:after, input[type="radio"].\:checked + label:after { background-position: 0 0; }
/* hover (not that the input cannot be hover) */
input[type="checkbox"].\:checked + label:hover:before, input[type="radio"].\:checked + label:hover:before, 
input[type="checkbox"].\:checked + label:hover:after, input[type="radio"].\:checked + label:hover:after,
/* focus, active */
input[type="checkbox"].\:checked:focus + label:before, input[type="radio"].\:checked:focus + label:before, 
input[type="checkbox"].\:checked:active + label:before, input[type="radio"].\:checked:active + label:before,
input[type="checkbox"].\:checked + label:focus:before, input[type="radio"].\:checked + label:focus:before, 
input[type="checkbox"].\:checked + label:active:before, input[type="radio"].\:checked + label:active:before,
input[type="checkbox"].\:checked:focus + label:after, input[type="radio"].\:checked:focus + label:after, 
input[type="checkbox"].\:checked:active + label:after, input[type="radio"].\:checked:active + label:after,
input[type="checkbox"].\:checked + label:focus:after, input[type="radio"].\:checked + label:focus:after, 
input[type="checkbox"].\:checked + label:active:after, input[type="radio"].\:checked + label:active:after { background-position: -13px 0; }
/* invalid/required */
/* error */
.formrow_error input[type="checkbox"].\:checked + label:before, .formrow_error input[type="radio"].\:checked + label:before,
.formrow_error input[type="checkbox"].\:checked + label:after, .formrow_error input[type="radio"].\:checked + label:after { background-position: -26px 0; }


/* remove the space to test x2 icons on normal resolution */
@media /** / screen, /**/ (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  input[type="checkbox"] + label:before, input[type="radio"] + label:before,
  input[type="checkbox"] + label:after, input[type="radio"] + label:after { background-image: url(images/checkbox_x2.png); background-size: 39px 26px; }
}