/* 
* Amazium V3.1
* Copyright 2013, Mike Ballan
* www.amazium.co.uk
*/


/***** Forms with labels *****/

form                                                        { margin:0 0 16px; padding:0; display:inline-block; width:100%;}
label                                                       { margin:2px;  padding:0 16px 0 0; text-align:right; width:30%; height:40px;  font:12px; color:#0F5D44; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
label.checkbox, label.radio                                 { text-align:left; width:auto; }
form span                                                   { margin:10px 0; padding:0; display:block; overflow:hidden; float:left; }
fieldset                                                    { margin:0 0 16px 0; padding:0; display:block; }
fieldset small                                              { display:none; }
input, textarea, select, textarea                           { margin:4px 2px 0px 2px; padding:0 10px; display:block; border:none; border-radius:3px; width:98%; height:25px; font:14px/40px ; color:#0F5D44; border:solid 1px #0F5D44; overflow:hidden; 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:vertical; min-height:122px; }
input[type="search"]                                        { -webkit-padding-start:0;  }

/***** Styled Select fields *****/

.select                                                     { margin:0; padding:0; position:relative; display:inline-block; width:70%; right:0; top:0; height:40px; background:#FFF; overflow:hidden; border:solid 1px #BBB; 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:35px; text-align:center; right:1px; top:1px; background:#FFF; width:38px; height:38px; position:absolute; pointer-events:none; }
.select select                                              { padding:10px; padding-top:11px; -webkit-padding-before:0; -webkit-padding-start:6px; width:100%; height:40px; font:14px/40px ; float:left; color:#999; border:none; display:block; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; }
.select option                                              { padding:10px; }
.select optgroup                                            { padding:0 10px; color:#000; background-color:#f1f1f1; }
.select optgroup option                                     { background-color:#FFF; }

/***** Styled Checkboxes *****/

.checkbox                                                   { padding:8px 0 0; width:70%; float:right; }
.checkbox > span                                            { margin:0 0 10px; padding:0 20px 0 0; float:left; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.checkbox > span label                                      { padding:2px 0 0 32px; width:100%; font:14px/20px ; text-align:left; cursor:pointer; display:block; position:relative; left:0; top:0; }
input[type="checkbox"]                                      { display:none; }
input[type="checkbox"] + label:before                       { margin:0; content:'\2718'; 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:13px/22px sans; color:#CCC; transition:all .3s linear 0s; -moz-transition:all .3s linear 0s; -webkit-transition:all .3s linear 0s; -o-transition:all .3s linear 0s; }
input[type="checkbox"]:checked + label:before               { background-color:#000; content:'\2714'; border-color:#000; color:#FFF; transition:all .6s linear 0s; -moz-transition:all .6s linear 0s; -webkit-transition:all .6s linear 0s; -o-transition:all .6s linear 0s; }

/***** Styled Radio button *****/

.radio                                                      { padding:8px 0 0; width:70%; float:right; }
.radio > span                                               { margin:0 0 10px; padding:0 20px 0 0; float:left; 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%; font:14px/20px ; text-align:left; cursor:pointer; display:block; position:relative; left:0; top:0; }
input[type="radio"]                                         { display:none; }
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:13px/22px sans; color:#CCC; border-radius:50%; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; transition:all .3s linear 0s; -moz-transition:all .3s linear 0s; -webkit-transition:all .3s linear 0s; -o-transition:all .3s linear 0s; }
input[type="radio"]:checked + label:before                  { border:7px solid #000; transition:all .3s linear 0s; -moz-transition:all .3s linear 0s; -webkit-transition:all .3s linear 0s; -o-transition:all .3s linear 0s; }

/***** Errors *****/

label.error                                                 { color:#E74C3C; }
label.error ::-webkit-input-placeholder                     { color:#E74C3C; }
label.error :-moz-placeholder                               { color:#E74C3C; }
label.error ::-moz-placeholder                              { color:#E74C3C; }
label.error :-ms-input-placeholder                          { color:#E74C3C; }

label.error + input,
label.error + textarea                                      { margin:0; color:#E74C3C; border-color:#E74C3C; }
label.error + .select select                                { margin:0; border-color:#E74C3C; }
label.error + input + small,
label.error + span + small,
label.error + textarea + small                              { margin:0; padding:3px 8px; font:11px/20px ; color:#FFF; border-color:#E74C3C; background-color:#E74C3C; width:70%; float:right; display:inline-block; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }

/***** Buttons *****/

input[type="button"],
input[type="submit"],
input[type="reset"]                                         { margin:2px 4px 2px 2px; padding:0 10px; display:inline-block; height:40px; width:auto; font:14px/40px ; font-weight:normal; color:#fff; border:1px solid #000; float:right; width:auto; background-color:#000; cursor:pointer; -webkit-appearance:none; }
input.first                                                 { margin-left:30%; }

input[type="button"]                                        { color:#FFF; border-color:#000; background-color:#000; transition:all .3s linear 0s; -moz-transition:all .3s linear 0s; -webkit-transition:all .3s linear 0s; -o-transition:all .3s linear 0s; }
input[type="submit"]                                        { color:#FFF; border-color:#245c46; background-color:#245c46; transition:all .3s linear 0s; -moz-transition:all .3s linear 0s; -webkit-transition:all .3s linear 0s; -o-transition:all .3s linear 0s; }
input[type="reset"]                                         { color:#999; border-color:#CCC; background-color:#FFF; transition:all .3s linear 0s; -moz-transition:all .3s linear 0s; -webkit-transition:all .3s linear 0s; -o-transition:all .3s linear 0s; }

input:hover[type="button"]                                  { border-color:#CCC; background-color:#FFF; color:#333; }
input:hover[type="submit"]                                  { border-color:#0C3729; background-color:#0C3729; color:#FFF; }
input:hover[type="reset"]                                   { border-color:#000; background-color:#000; color:#FFF; }

/***** Forms without labels *****/

.hide-lables label                                          { display:none; }
.hide-lables .checkbox label,
.hide-lables .radio label                                   { display:block; }

.hide-lables input,
.hide-lables textarea, 
.hide-lables select,
.hide-lables .select                                        { width:100%; }

.hide-lables .radio, .hide-lables .checkbox                 { width:100%; float:right; }

/***** Errors *****/

.hide-lables label.error + input + small,
.hide-lables label.error + span + small,
.hide-lables label.error + textarea + small                 { width:100%; }

/***** Buttons *****/

.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:0 none; }
textarea:focus                                              { color:#000; border-color:#999; outline:0 none; }
select:focus                                                { color:#000; border-color:#999; outline:0 none; }