/* nicer html controls */

textarea,
select,
button,
input {
  padding : 0;
  margin : 0;
  font-size : 1em;
  font-family: Helvetica, sans-serif;
}

input[readonly][type=text] {
  border: 1px solid #e0e0e0;
  background-color: #f4f4f4;
}

input[type=range],
input[type=text],
input[type=number],
input[type=password],
textarea,
select {
  border : 1px solid #777;
  padding : 3px 5px;
}
option {
  padding : 3px 5px;
}
select {
  padding : 0;
}

textarea {
  resize : vertical;
  max-width : 100%;
}
.formcontrol textarea {
  width : 100%;
  min-height : 5em;
  box-sizing: border-box;
}

select:focus, select:focus,
input:focus, textarea:focus,
input:active, textarea:active {
  -moz-box-shadow: 0px 0px 3px #88f;
  -webkit-box-shadow: 0px 0px 3px #88f;
  box-shadow: 0px 0px 3px #88f;
  border : 1px solid #000;
  outline : none;
}

input[type=radio],
input[type=checkbox],
input[type=submit],
input[type=button],
input[type=reset],
button,
label {
  padding : 0;
  cursor : pointer;
}

input[type=submit],
input[type=button],
input[type=reset],
button {
  border : 1px solid #777;
  padding : 1px 3px;
  background : #eee;
}

input[type=radio],
input[type=checkbox] {
  vertical-align : middle;
  border : 0;
}
label input {
  vertical-align : baseline;
  margin : 0 4px 0 0;
  padding : 0;
  border : 0;
  /* background : #fff; */
}

fieldset {
  border : 0;
  padding : 0;
  margin : 0;
  position : relative;
}
form h2,
form h3 {
  font-size : 1.5em;
  font-weight : normal;
  margin-top : 0;
}



/* controls & containers */

.formcontrol {
  margin : 1.2em 0;
  display : block;
}
fieldset.formcontrol {
  border : 0;
  padding : 0;
}
/* workaround: fieldsets don't collapse margins */
fieldset > .formcontrol:first-child {
  margin-top : 0;
}
fieldset + fieldset {
  margin-top : 3.2em;
}
fieldset > .formcontrol:last-child {
  margin-bottom : 0;
}

/* control within a compact group */
.compact .formcontrol {
  display : inline-block;
  margin-right : 10px;
}
/* control is compact */
.formcontrol.compact label {
  display : inline-block;
  padding-right : 2px;
}
.formcontrol.compact li {
  display : inline-block;
  margin-right : 10px;
}
.formgroup .formcontrol {
  margin : 0 2em 0 0;
  display : inline-block;
  vertical-align : top;
}

/* elements of, or related to, controls */

/* labels */

label {
  display : block;
  cursor : pointer;
}
input[type=radio] + label,
input[type=checkbox] + label {
  display : inline;
}
.formcontrol label {
  padding-left : 2px;
}
fieldset.formcontrol > h4,
.formcontrol > label {
  display : block;
  font-weight : bold;
  color : #333;
  margin : .2em 0 .1em 0;
}
.formcheck label {
  display: inline-block;
  font-weight : normal;
}

.formcontrol label i {
  font-style : normal;
  font-weight : normal;
  color : #888;
  margin-left : .2em;
}
label i:before {
  content: '(';
}
label i:after {
  content: ')';
}

/* help & hints */

.formcontrol .hint {
  font-size : .92em;
  color : #777;
  margin : .4em 0;
  line-height : 1.2;
}
.formselect li > .hint {
  margin : 0 0 .4em 0;
  padding : 0 0 0 20px;
}

.formcontrol span.help,
.formcontrol a.help {
  background : #48d;
  border : 1px solid #ccc;
  border-color : #ddf #24d #24d #ddf;
  color : #fff;
  font-weight : bold;
  padding : 2px 5px;
  text-decoration : none;
  -moz-border-radius : 14px;
  -webkit-border-radius : 14px;
  border-radius : 14px;
}
.formcontrol span.help {
  cursor: help;
}

/* selection controls */

.article ul.formcontrol,
.article .formcontrol ul,
ul.formcontrol,
.formcontrol ul {
  list-style : none;
  display : block;
  margin : 0;
  padding : 0;
}
ul.formcontrol li,
.formcontrol ul li {
  display : block;
  padding : .2em 0;
}
/* always clear internals */
.formcontrol ul,
ul.formcontrol {
  _height:0;min-height:0;/* ie hasLayout fix & clear */
}
.formcontrol ul:after,
ul.formcontrol:after { display:block; clear:both; content:"."; visibility:hidden; font-size:1px; height:0; }


/* buttons */

.buttons {
  margin : 1.8em 0 1.2em 0;
/*  text-align : right; */
  display : block;
}
button {
  padding : .3em 1em;
  color : #333;
  background : #f3f3f3 url(img/forms/grad.png) 0 100% repeat-x;
  border : 1px solid #888;
  text-decoration: none;
  -webkit-border-radius : 5px;
  -moz-border-radius : 5px;
  border-radius : 5px;
  -webkit-transition: border-color .2s ease-in;
  -moz-transition: border-color .2s ease-in;
  outline : none;
  /* MSIE FIX */
  _width: 0;
  ~width: auto;
  ~overflow: visible;
  ~filter:chroma(color=#000000);
}
button.primary {
  border-color : #305d05;
  background-color : #305d05;
  background : #305d05 url(img/forms/grad-green.png) 0 100% repeat-x;
  color : #fff;
}
button:hover {
  background-color : #fff;
  border-color : #555;
  -webkit-transition: border-color 0s ease-in;
  -moz-transition: border-color 0s ease-in;
}
button.primary:hover {
  background : #305d05 url(img/forms/grad-green.png) 0 20% repeat-x;
}
.buttons button {
  margin-right : .5em;
}
button.disabled:hover,
button.disabled,
button[disabled]:hover,
button[disabled],
button:disabled:hover,
button:disabled {
  border-color : #bbb;
  background : #f3f3f3 url(img/forms/grad.png) 0 100% repeat-x;
  color : #999;
  cursor : default;
  cursor : not-allowed;
  text-shadow : 1px 1px 0 #fff;
}
button.disabled b,
button[disabled] b,
button:disabled b,
button.disabled i,
button[disabled] i,
button:disabled i {
  opacity: .5;
  -moz-opacity: .5;
  filter:alpha(opacity=50);
}


.buttongroup {
  letter-spacing : -4px;
  margin-left : .5em;
  white-space : nowrap;
}
.buttongroup button {
  letter-spacing : 0;
  margin-left : -1px;
  -moz-border-radius : 0px;
  -webkit-border-radius : 0px;
  border-radius : 0px;
}
.buttongroup button:first-child {
  letter-spacing : 0;
  margin-left : 0;
  -moz-border-radius-topleft : 5px;
  -moz-border-radius-bottomleft : 5px;
  -webkit-border-top-left-radius : 5px;
  -webkit-border-bottom-left-radius : 5px;
  border-top-left-radius : 5px;
  border-bottom-left-radius : 5px;
}
.buttongroup button:last-child {
  -moz-border-radius-topright : 5px;
  -moz-border-radius-bottomright : 5px;
  -webkit-border-top-right-radius : 5px;
  -webkit-border-bottom-right-radius : 5px;
  border-top-right-radius : 5px;
  border-bottom-right-radius : 5px;
}


.formgroup .buttons {
  margin : 0 2em 0 0;
  display : inline-block;
}



/* errors */

.formerror select,
.formerror input,
.formerror-malformed select,
.formerror-malformed input,
.formerror-missing select,
.formerror-missing input {
  background : #ffd;
  border-color : #977;
}
.formerror li > label,
.formerror-missing li > label {
  color : #833;
}

.formerror,
.formerror-missing {
  position : relative;
}

.formcontrol .processing,
.formcontrol .success {
  background : url(img/forms/ok.png) 0 0 no-repeat;
  display : inline-block;
  height : 16px;
  width : 16px;
  margin : 0 5px;
  overflow : hidden;
  text-indent : -999em;
  vertical-align : middle;
}
.formcontrol .processing {
  background : url(img/forms/spinner.gif) 0 0 no-repeat;
}
.formerror .errors li,
.formerror .errors {
  margin : 0;
  padding : 0;
  display : inline;
  list-style : none;
}
.formerror .error em {
  font-style : normal;
}
.formerror .error,
.formerror-malformed .error,
.formerror-missing .error {
  font-weight : normal;
  font-size : .92em;
  display : inline;
  background : url(img/forms/error.png) 0 0 no-repeat;
  display : inline-block;
  height : 16px;
  padding-left : 19px;
  margin : 0 5px;
}
fieldset.formcontrol > h4 {
  display : inline-block;
}



.formgroup .formerror .error,
.formgroup .formerror-malformed .error,
.formgroup .formerror-missing .error {
  display : block;
  margin : 3px 0;
}