/**
 * Project style sheet.
 *
 * @package    vanilla
 * @subpackage css
 * @author     Loops <evrard at h2a dot lu>
 * @version    SVN: $Id: forms.css 43 2017-05-08 11:01:06Z julienGhome $
 */


/* ==========================================================================
   MESSAGES
   ========================================================================== */

/* Display */
.msg { color: currentColor; }
  .msg_title {}
  .msg_text {}

  /* States */
  .msg.\:error { color: #E90000; }
  .msg.\:success { color: #40BE60; }
  .msg.\:warning { color: #E99800; }


/* ==========================================================================
   ELEMENTS
   ========================================================================== */

/* Select, input, textarea
   ========================================================================== */
/* default */
select, textarea, input { border-width: 1px; border-style: solid; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
/* hover */
select:hover, textarea:hover, input:hover {}
/* focus, active */
select:focus, textarea:focus, input:focus,
select:active, textarea:active, input:active {}
/* error (by default #c22b2b) */
.\:error select, .\:error textarea, .\:error input { border-color: #c22b2b; color: #c22b2b; }
/* invalid/required - for now, only on mozilla */
select:-moz-ui-invalid, textarea:-moz-ui-invalid, input:-moz-ui-invalid { border-color: #c22b2b; color: #c22b2b; }

/** padding **/
/* try to harmonize with select */
textarea, input { padding: 2px 4px; }
select { padding: 1px 0; }
  option { padding: 0 4px; }
  optgroup { padding: 0 4px; }
    optgroup > option { padding: 0 0 0 1em; margin: 0 -4px; }


/** stupid webkit shit, put your own colors **/
/** / input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #xxxxxx inset; color: #xxxxxx !important; } /**/
/** / input:-webkit-autofill:hover { -webkit-box-shadow: 0 0 0 1000px #xxxxxx inset; color: #xxxxxx !important; } /**/
/** / input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px #xxxxxx inset; color: #xxxxxx !important; } /**/
/** / .\:error input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #xxxxxx inset; color: #xxxxxx !important; } /**/


/* Placeholder
   ========================================================================== */

/* each variation needs to be separated */

/* normal */
::placeholder {}
::-webkit-input-placeholder {}
:-moz-placeholder {}
::-moz-placeholder { opacity: 1; } /* FF 19+ had an opacity to the placeholder */
:-ms-input-placeholder {}
.\:placeholder {} /* @see jquery.placeholder.js */
/* hover */
:hover::placeholder {}
:hover::-webkit-input-placeholder {}
:hover:-moz-placeholder {}
:hover::-moz-placeholder {}
:hover:-ms-input-placeholder {}
.\:placeholder:hover {} /* @see jquery.placeholder.js */
/* focus, active */
:focus::placeholder, :active::placeholder {}
:focus::-webkit-input-placeholder, :active::-webkit-input-placeholder {}
:focus:-moz-placeholder, :active:-moz-placeholder {}
:focus::-moz-placeholder, :active::-moz-placeholder {}
:focus:-ms-input-placeholder, :active:-ms-input-placeholder {}
.\:placeholder:focus, .\:placeholder:active {} /* @see jquery.placeholder.js */
/* error (by default #c22b2b) */
.\:error ::placeholder { color: #c22b2b; }
.\:error ::-webkit-input-placeholder { color: #c22b2b; }
.\:error :-moz-placeholder { color: #c22b2b; }
.\:error ::-moz-placeholder { color: #c22b2b; }
.\:error :-ms-input-placeholder { color: #c22b2b; }
.\:error .\:placeholder { color: #c22b2b; } /* @see jquery.placeholder.js */
/* invalid/required - for now, only on mozilla */
:-moz-ui-invalid::placeholder, :-moz-ui-invalid::placeholder { color: #c22b2b; }
:-moz-ui-invalid:-moz-placeholder, :-moz-ui-invalid:-moz-placeholder { color: #c22b2b; }
:-moz-ui-invalid::-moz-placeholder, :-moz-ui-invalid::-moz-placeholder { color: #c22b2b; }


/* Labels
   ========================================================================== */

label {}
/* on error */
.\:error label { color: #c22b2b; }
/* for checkboxes */
input[type="checkbox"] + label, input[type="radio"] + label {}
/* hover */
input[type="checkbox"]:hover + label, input[type="radio"]:hover + label,
input[type="checkbox"] + label:hover, input[type="radio"] + label:hover {}
/* focus, active */
input[type="checkbox"]:focus + label, input[type="radio"]:focus + label, 
input[type="checkbox"]:active + label, input[type="radio"]:active + label,
input[type="checkbox"] + label:focus, input[type="radio"] + label:focus, 
input[type="checkbox"] + label:active, input[type="radio"] + label:active {}
/* error */
.\:error input[type="checkbox"] + label, .\:error input[type="radio"] + label { color: #c22b2b; }
/* invalid/required */
/* for now, only on mozilla */
input[type="checkbox"]:-moz-ui-invalid + label, input[type="radio"]:-moz-ui-invalid + label { color: #c22b2b; }


/* Radios / Checkboxes
   ========================================================================== */

/*** default display ***/
input[type="checkbox"], input[type="radio"] { padding: 0 !important; border: 0 !important; width: 16px !important; vertical-align: -2px; }

/* Checkboxes */
input[type="checkbox"]{ position:absolute; z-index:-1; visibility:hidden; }
input[type="checkbox"] + label{ position:relative; }

  /* Box */
  input[type="checkbox"] + label:before{ content:''; display:inline-block; width:18px; height:18px; box-shadow:0 0 0 1px #D9DADA; vertical-align: middle; margin-right:18px; margin-left: 1px; box-sizing:border-box; background:#F0F0F0; border-radius:3px; }
  input[type="checkbox"] + label:hover:before{ background:#fff; box-shadow:0 0 0 1px #BABCBD; }
  input[type="checkbox"]:checked + label:before{ box-shadow: inset 0 0 0 6px #fff, 0 0 0 1px #000; background:#000; }

  /* Error */
  .\:error input[type="checkbox"] + label:before{ box-shadow:0 0 0 1px #DD1C1C; background:#fff; }
  .\:error input[type="checkbox"]:checked + label:before{ box-shadow: inset 0 0 0 6px #fff, 0 0 0 1px #000; background:#000; }

/* Radio */
input[type="radio"]{ position:absolute; z-index:-1; visibility:hidden; }
input[type="radio"] + label{ position:relative; }

  /* Box */
  input[type="radio"] + label:before{ content:''; display:inline-block; width:18px; height:18px; box-shadow:0 0 0 1px #D9DADA; vertical-align:middle; margin:3px 14px 3px 1px; box-sizing:border-box; border-radius:100%; background:#f0f0f0; }
  input[type="radio"] + label:hover:before{ background:#fff; box-shadow:0 0 0 1px #BABCBD; }
  input[type="radio"]:checked + label:before{ box-shadow: inset 0 0 0 6px #fff, 0 0 0 1px #000; background:#000; }

  /* Error */
  .\:error input[type="radio"] + label:before{ box-shadow:0 0 0 1px #DD1C1C; background:#fff; }
  .\:error input[type="radio"]:checked + label:before{ box-shadow: inset 0 0 0 6px #fff, 0 0 0 1px #000; background:#000; }



/* ==========================================================================
   DISPLAY
   ========================================================================== */

/* Fieldset
   ========================================================================== */
.formfieldset {}
  .formfieldset_title {}
  
/* Row
   ========================================================================== */
.formrow {}
.formrow + .formrow {}
   /* label */
  .formrow > label {}
  /* help */
  .formhelp {}
  /* errors */
  .formerror { color: #c22b2b; }

/* Row
   ========================================================================== */
.formrow_submit {}
  .form_submit {}