/* * 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%; } label { margin:0; padding:0 16px 0 0; float:left; text-align:right; width:30%; height:40px; font:14px/40px Sans-Serif; 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; } form span { margin:10px 0; padding:0; display:block; overflow:hidden; float:left; } fieldset { margin: 0 0 8px 0; padding:0; display:block; position:relative; top:0; left:0; } fieldset small { margin:0 0 0 30%; padding:3px 8px; font:11px/20px Sans-Serif; 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; } input, textarea, select, textarea { margin:0; padding:0 10px; display:block; border:none; border-radius:0; width:70%; height: 29px; font: 13px/29px 'Open Sans', sans-serif; font-weight: 600; color: #555; border: solid 1px #acacac; 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: 160px; overflow-y:auto; } 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: 29px; background:#FFF; overflow:hidden; border: solid 1px #acacac; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } .select:after { margin:0; padding:0; content: ''; color: #064287; line-height:36px; text-align:center; right:0; top: 0px; width: 25px; height: 36px; position:absolute; pointer-events:none; background: #fff url(../img/arrow-form-select.png) center no-repeat;} .select select { padding: 3px 10px 0; -webkit-padding-before:0; -webkit-padding-start:6px; width:100%; height: 28px; font: 13px/28px 'Open Sans', sans-serif; font-weight: 600; float:left; color: #064287; 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:12px/40px Sans-Serif; } .select optgroup option:first-child { margin:10px 0 0 0; border-top:1px solid #F2F2F2; } /*********************************************** Styled Checkboxes ***********************************************/ .checkbox { padding:8px 0 0; width:70%; float:right; } .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%; height:auto; font:14px/20px Sans-Serif; 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:'\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; } input[type="checkbox"] + label + small { margin:0; padding:0 0 0 32px; background:none; border:none; color:#E74C3C; width:auto; float:none; } /*********************************************** 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; 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%; height:auto; font:14px/20px Sans-Serif; 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: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; } input[type="radio"] + label + small { margin:0; padding:0 0 0 32px; background:none; border:none; color:#E74C3C; width:auto; float:none; } /*********************************************** Validation ***********************************************/ input:not(:focus):invalid { -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; } input:focus:invalid, .error input, select:focus:invalid, input[type="checkbox"]:focus:invalid, input[type="checkbox"]:focus:invalid + label:before { color: #E74C3C; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; } input:focus:invalid::-webkit-input-placeholder { color:#E74C3C; opacity:1; } input:focus:invalid:-moz-placeholder { color:#E74C3C; opacity:1; } input:focus:invalid::-moz-placeholder { color:#E74C3C; opacity:1; } input:focus:invalid:-ms-input-placeholder { color:#E74C3C; opacity:1; } .error input + small { margin:0; padding:3px 8px; font:11px/20px Sans-Serif; 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 ***********************************************/ button, input[type="button"], input[type="submit"], input[type="reset"] { margin:6px 6px 6px 0; padding: 0 19px; display:inline-block; height:40px; width:auto; font:13px/40px 'Open Sans', sans-serif; border: none; font-weight:normal; color:#fff; border-radius: 3px; float:left; width:auto; background-color:#000; cursor:pointer; -webkit-appearance:none; } input.first { margin-left:30%; } button { color:#FFF; background-color:#064287; 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="button"] { color:#FFF; background-color:#064287; 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; background-color: #064287; 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; 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; } button:hover { background-color:#071A30; color:#FFF; } input:hover[type="button"] { background-color:#071A30; color:#FFF; } input:hover[type="submit"] { background-color:#071A30; color:#FFF; } input:hover[type="reset"] { background-color:#000; color:#FFF; } .icon{padding-left: 40px;box-sizing: border-box;-moz-box-sizing: border-box;} /*********************************************** 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, .hide-lables fieldset.error input + small { width:100%; } .hide-lables small { margin:0; width:100%; } .hide-lables .radio, .hide-lables .checkbox { width:100%; float:right; } input[type="checkbox"], input[type="checkbox"]:not(:focus):invalid, input[type="radio"], input[type="radio"]:not(:focus):invalid { width:20px; height:20px; } /*********************************************** Validation ***********************************************/ .hide-lables input:not(:focus):invalid + small { width:100%; } /*********************************************** Buttons ***********************************************/ .hide-lables input[type="button"], .hide-lables input[type="submit"], .hide-lables input[type="reset"] { margin: 6px 0; width:auto; } /*********************************************** Placeholder ***********************************************/ ::-webkit-input-placeholder { color:#989a9c; opacity:1; } :-moz-placeholder { color:#989a9c; opacity:1; } ::-moz-placeholder { color:#989a9c; opacity:1; } :-ms-input-placeholder { color:#989a9c; opacity:1; } :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; } /*********************************************** Required ***********************************************/ input[Required]{ background: #fff url(../img/ico-campo-obrigatorio.png) 98% center no-repeat; } small.legend{font-size: 11px; color: #989a9c} /*********************************************** NYSMNYD ***********************************************/ .nysmnyd-labels fieldset label { display:block; position:absolute; left:1px; top:0; height:auto; width:auto; z-index:1; font:12px/40px Sans-Serif; color:#999; transition:all .1s ease-out 0s; -moz-transition:all .1s ease-out 0s; -webkit-transition:all .1s ease-out 0s; -o-transition:all .1s ease-out 0s; } .nysmnyd-labels fieldset.show-all label { top:-27px; transition:all .1s ease-out 0s; -moz-transition:all .1s ease-out 0s; -webkit-transition:all .1s ease-out 0s; -o-transition:all .1s ease-out 0s; } .nysmnyd-labels input, .nysmnyd-labels .select, .nysmnyd-labels textarea { z-index:2; } .nysmnyd-labels input, .nysmnyd-labels textarea, .nysmnyd-labels select, .nysmnyd-labels .select, .nysmnyd-labels fieldset.error input + small, .nysmnyd-labels fieldset input:not(:focus):invalid + small, .nysmnyd-labels small { width:100%; } .nysmnyd-labels .radio, .nysmnyd-labels .checkbox { width:100%; float:right; }