/*
* Amazium (http://www.amazium.co.uk)
* Copyright 2010 - 2013, Mike Ballan
* Licensed under MIT (https://github.com/OwlyStuff/Amazium/blob/master/LICENSE)
*/


/***********************************************
Forms with labels
***********************************************/
form                                                        { margin:0 0 16px; padding:0; display:inline-block; width:100%; }
fieldset                                                    { margin:0 0 20px 0; padding:0; display:block; position:relative; top:0; left:0; }

label                                                       { margin:0; padding:11px 16px 0 0; width:100%; min-height:40px; font-family:sans-serif; font-size:14px; line-height:16px; color:#666; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
label.checkbox,
label.radio                                                 { text-align:left; width:auto; }

input, textarea, select, textarea                           { margin:0; padding:0 10px; display:block; border-radius:0; width:100%; height:40px; font-family:sans-serif; font-size:14px; line-height:40px; color:#555; border:solid 1px #DDD; overflow:hidden; position:relative; top:0; left:0; outline:0 none; box-sizing:border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-appearance:none; }
textarea                                                    { padding:0 0 0 10px; resize:none; min-height:100px; overflow-y:auto; }
input[type="search"]                                        { -webkit-padding-start:0;  }


/***********************************************
Styled Select fields
***********************************************/
.select                                                     { margin:0; padding:0; position:relative; display:inline-block; width:100%; right:0; top:0; height:40px; background:#FFF; overflow:hidden; border:solid 1px #DDD; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.select:after                                               { margin:0; padding:0; content:'\25be'; color:#999; line-height:38px; text-align:center; right:0; top:0; background:#FFF; width:38px; height:38px; border-left:1px solid #F1F1F1; position:absolute; pointer-events:none; }
.select select                                              { padding:10px; padding-top:11px; background-color:#FFF; -webkit-padding-before:0; -webkit-padding-start:6px; width:100%; height:40px; font-family:sans-serif; font-size:14px; line-height:40px; float:left; color:#999; border:none; display:block; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; }
.select option                                              { padding:10px; border-bottom:1px solid #F2F2F2;  }
.select optgroup                                            { padding:0 10px; color:#000; background-color:#FFF; }
.select optgroup[label]                                     { padding-top:10px; background-color:#FFF; font-style:normal; }
.select optgroup option                                     { border-bottom:1px solid #F2F2F2; font-family:sans-serif; font-size:12px; line-height:40px; }
.select optgroup option:first-child                         { margin:10px 0 0 0; border-top:1px solid #F2F2F2; }


/***********************************************
Styled Checkboxes
***********************************************/
.checkbox                                                   { padding:8px 0 0; width:100%; overflow:hidden; }
.checkbox > span                                            { margin:0 0 10px; padding:0 20px 0 0; float:left; position:relative; top:0; left:0; width:auto; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.checkbox > span label                                      { padding:2px 0 0 32px; width:100%; min-height:20px; font-family:sans-serif; font-size:14px; line-height:20px; text-align:left; cursor:pointer; float:none; display:block; position:relative; left:0; top:0; }
input[type="checkbox"],
input[type="checkbox"]:not(:focus):invalid                  { width:22px; height:22px; position:absolute; top:0; left:0; }
input[type="checkbox"] + label:before                       { margin:0; content:''; position:absolute; left:0; top:0; background-color:#FFF; border:1px solid #CCC; cursor:pointer; display:inline-block; height:20px; width:20px; text-align:center; font-family:sans-serif; font-size:13px; line-height:22px; color:#CCC; transition:all .1s linear 0s; -moz-transition:all .1s linear 0s; -webkit-transition:all .1s linear 0s; -o-transition:all .1s linear 0s; }
input[type="checkbox"]:checked + label:before               { background-color:#000; content:'\2714'; border-color:#000; color:#FFF; transition:all .1s linear 0s; -moz-transition:all .1s linear 0s; -webkit-transition:all .1s linear 0s; -o-transition:all .1s linear 0s; }
input[type="checkbox"] + label + .error-label               { padding:0 0 0 32px; background:none; border:none; color:#F15740; width:auto; float:none; }


/***********************************************
Styled Radio button
***********************************************/
.radio                                                      { padding:8px 0 0; width:100%; overflow:hidden; }
.radio > span                                               { margin:0 0 10px; padding:0 20px 0 0; float:left; position:relative; top:0; left:0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.radio > span label                                         { margin:0; padding:2px 0 0 32px; width:100%; min-height:20px; font-family:sans-serif; font-size:14px; line-height:20px; text-align:left; cursor:pointer; display:block; position:relative; left:0; top:0; }
input[type="radio"],
input[type="radio"]:not(:focus):invalid                     { width:22px; height:22px; border:none; position:absolute; top:0; left:0; }
input[type="radio"] + label:before                          { margin:0; content:''; position:absolute; left:0; top:0; background-color:#FFF; border:1px solid #CCC; cursor:pointer; display:inline-block; height:20px; width:20px; text-align:center; font-family:sans-serif; font-size:13px; line-height:22px; color:#CCC; border-radius:50%; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; transition:all .1s linear 0s; -moz-transition:all .1s linear 0s; -webkit-transition:all .1s linear 0s; -o-transition:all .1s linear 0s; }
input[type="radio"]:checked + label:before                  { border:7px solid #000; transition:all .1s linear 0s; -moz-transition:all .1s linear 0s; -webkit-transition:all .1s linear 0s; -o-transition:all .1s linear 0s; }
input[type="radio"] + label + .error-label                  { padding:0 0 0 32px; background:none; border:none; color:#F15740; width:auto; float:none; }


/***********************************************
Validation
***********************************************/
form .error > label                                         { color:#F15740; }
form .error input,
form .error textarea,
form .error .select,
form .error textarea                                        { border-color:#F15740; }
form .error .error-label                                    { display:inline-block; }
form .error-label                                           { margin:0; padding:5px 8px 3px 8px; font-family:sans-serif; font-size:11px; line-height:20px; color:#FFF; border-color:#F15740; background-color:#F15740; width:100%; display:none; position:relative; top:-1px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }

input:not(:focus):invalid                                   { -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; }

input:focus:invalid,
form .error input,
select:focus:invalid,
input[type="checkbox"]:focus:invalid,
input[type="checkbox"]:focus:invalid + label:before         { color:#F15740; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; }

input:focus:invalid::-webkit-input-placeholder              { color:#F15740; opacity:1; }
input:focus:invalid:-moz-placeholder                        { color:#F15740; opacity:1; }
input:focus:invalid::-moz-placeholder                       { color:#F15740; opacity:1; }
input:focus:invalid:-ms-input-placeholder                   { color:#F15740; opacity:1; }

/***********************************************
Buttons
***********************************************/
button,
input[type="button"],
input[type="submit"],
input[type="reset"]                                         { margin:0; width:auto; height:auto; border:none; display:inline-block; font:14px/20px 'sans-serif'; }

.btn.btn--action-loading                                    { padding-right:46px; background-color:#25A35A; position:relative; cursor:default; color:#FFF; }
.btn.btn--action-loading:hover                              { background-color:#25A35A; }
.btn.btn--action-loading:after                              { margin:-10px 0 0 0; content:''; width:20px; height:20px; background:transparent url('../../img/loading.png') no-repeat 0 0; position:absolute; top:50%; right:16px; -webkit-animation:spinner 1.0s infinite linear reverse; animation:spinner 1.0s infinite linear reverse; }

.btn.btn--action-successful                                 { padding-right:36px; background-color:#25A35A; position:relative; cursor:default; color:#FFF; }
.btn.btn--action-successful:hover                           { border-color:#25A35A; background-color:#25A35A; }
.btn.btn--action-successful:after                           { content:'\2714'; width:20px; height:20px; font-size:14px; line-height:30px; position:absolute; top:6px; right:6px; }

.btn.btn--action-failure                                    { padding-right:36px; background-color:#F15740; position:relative; cursor:default; color:#FFF; }
.btn.btn--action-failure:after                              { content:'\00D7'; width:20px; height:20px; font-size:20px; line-height:30px; position:absolute; top:6px; right:6px; }
.btn.btn--action-failure:hover                              { background-color:#F15740; border-color:#F15740; }

@keyframes spinner {
    0%                                                      { transform:rotate(0deg); -webkit-transform:rotate(0deg); }
    100%                                                    { transform:rotate(-360deg); -webkit-transform:rotate(-360deg); }
}

@-webkit-keyframes spinner {
    0%                                                      { transform:rotate(0deg); -webkit-transform:rotate(0deg); }
    100%                                                    { transform:rotate(-360deg); -webkit-transform:rotate(-360deg); }
}

/***********************************************
Forms with inline labels
***********************************************/
.inline-lables label                                        { float:left; width:30%; text-align:right; }
.inline-lables input,
.inline-lables input textarea,
.inline-lables input select,
.inline-lables input textarea                               { width:70%; }

.inline-lables button:first-of-type                         { margin-left:30%; }

.inline-lables .checkbox                                    { margin-left:30%; width:70%; }
.inline-lables .checkbox input[type="checkbox"]             { width:auto; }

.inline-lables .radio                                       { margin-left:30%; width:70%; }
.inline-lables .radio input[type="radio"]                   { width:auto; }

/***********************************************
Forms without labels
***********************************************/
.hide-lables label                                          { display:none; }
.hide-lables .checkbox label,
.hide-lables .radio label                                   { display:block; }

.hide-lables input[type="checkbox"],
.hide-lables input[type="checkbox"]:not(:focus):invalid,
.hide-lables input[type="radio"],
.hide-lables input[type="radio"]:not(:focus):invalid        { width:20px; height:20px; }

.hide-lables input[type="button"],
.hide-lables input[type="submit"],
.hide-lables input[type="reset"]                            { margin:6px 6px 6px 0; width:auto; }


/***********************************************
Placeholder
***********************************************/
::-webkit-input-placeholder                                 { color:#333; opacity:.5; }
:-moz-placeholder                                           { color:#333; opacity:.5; }
::-moz-placeholder                                          { color:#333; opacity:.5; }
:-ms-input-placeholder                                      { color:#333; opacity:.5; }

:focus::-webkit-input-placeholder                           { color:#333; opacity:1; }
:focus:-moz-placeholder                                     { color:#333; opacity:1; }
:focus::-moz-placeholder                                    { color:#333; opacity:1; }
:focus:-ms-input-placeholder                                { color:#333; opacity:1; }

input:focus                                                 { color:#000; border-color:#999; outline:none; }
textarea:focus                                              { color:#000; border-color:#999; outline:none; }
select:focus                                                { color:#000; border-color:#999; outline:none; }