/* * 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; float:left;font-family:sans-serif; font-size:1em; line-height:1em; 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; } label.error { color:#e74c3c; } label.error:before { margin:0; padding:0; content:'*'; color:#e74c3c; } form span { margin:0; padding:0; display:block; overflow:hidden; } fieldset { margin:0 0 20px 0; padding:0; display:block; position:relative; top:0; left:0; } fieldset small { margin:0 0 0 30%; padding:3px 8px; font-family:sans-serif; font-size:11px; line-height: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; } a.btn, input, textarea, select, textarea { margin:0; padding:0 10px; display:inline-block; border-radius:0; width:70%; font-family:sans-serif; font-size:14px; line-height:30px; min-height:30px; color:#555; border:solid 1px #BBB; 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; } a.btn, input, textarea, select, textarea { border: 1px solid #e3e3e3; border-radius: 3px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); } textarea { padding:0 0 0 10px; resize:none; min-height:100px; overflow-y:auto; } input.error, input:focus.error { border-color:#e74c3c; color:#555; } /*********************************************** Styled Select fields ***********************************************/ .select { margin:0; padding:0; position:relative; display:inline-block; width:70%; right:0; top:0; line-height:30px; font-size:14px; color:#555; border:solid 1px #e3e3e3; overflow:hidden; border-radius: 3px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } .select:after { margin:0; padding:0; content:'\25be'; color:#35b179; text-align:center; right:0; top:0; background:#FFF; width:18px; height:35px; font-size:30px; position:absolute; pointer-events:none; } .select select { font-size:14px; height:30px; -webkit-padding-before:0; -webkit-padding-start:0px; width:100%; font-family:sans-serif; float:left; border:none; display:block; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; } .select option { padding:10px; border-bottom:1px solid #F2F2F2; line-height:30px; } .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: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-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:'\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-family:sans-serif; font-size:13px; line-height:22px; 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-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 .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-family:sans-serif; font-size:11px; line-height: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 ***********************************************/ a.btn, input[type="button"], input[type="submit"], input[type="reset"] { margin:0; padding:0 10px; display:inline-block; height:33px; border-radius: 4px; font-family:sans-serif; font-size:14px; font-weight:bold; color:#fff; border:1px solid #000; float:left; width:auto; background-color:#000; cursor:pointer; -webkit-appearance:none; } input.first { margin-left:30%; } a.btn, input[type="button"] { color:#FFF; border-color:#1aa065; background-color:#24a664; transition:all .2s linear 0s; -moz-transition:all .2s linear 0s; -webkit-transition:all .2s linear 0s; -o-transition:all .2s linear 0s; } input[type="submit"] { color:#FFF; border-color:#1aa065; background-color:#24a664; transition:all .2s linear 0s; -moz-transition:all .2s linear 0s; -webkit-transition:all .2s linear 0s; -o-transition:all .2s linear 0s; } input[type="reset"] { color:#999; border-color:#CCC; background-color:#FFF; transition:all .2s linear 0s; -moz-transition:all .2s linear 0s; -webkit-transition:all .2s linear 0s; -o-transition:all .2s linear 0s; } a.btn:hover, input:hover[type="button"] { border-color:#178d59; background-color:#139362; color:#fff; } input:hover[type="submit"] { border-color:#178d59; background-color:#139362; color:#FFF; } input:hover[type="reset"] { border-color:#000; background-color:#000; color:#FFF; } a.btn { margin:0 5px 0 0; text-decoration:none;} a.btn:active, input:active[type="button"], input:active[type="submit"], input:active[type="reset"] { margin-top:1px; } .btn.disabled,.btn[disabled],fieldset[disabled] .btn { pointer-events:none; cursor:not-allowed; filter:alpha(opacity=65); -webkit-box-shadow:none; box-shadow:none; opacity:.65; } /*********************************************** 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 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:#dfdfdf; outline:none; } textarea:focus { color:#000; border-color:#dfdfdf; outline:none; } select:focus { color:#000; border-color:#dfdfdf; outline:none; } /*********************************************** NYSMNYD ***********************************************/ .nysmnyd-labels fieldset label { display:block; position:absolute; left:1px; top:0; height:auto; width:auto; z-index:1; font-family:sans-serif; font-size:12px; line-height:40px; 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; } /* --------- From Bootstrap ---------- */ input[type="search"] { -webkit-padding-start:0; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: textfield; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } span.select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { background-color: #ffffff; border: 1px solid #dddddd; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -moz-transition: border linear 0.2s, box-shadow linear 0.2s; -o-transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s; } span.select:focus, textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus { border-color: rgba(82, 168, 236, 0.8); outline: 0; outline: thin dotted \9; /* IE6-9 */ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); } input[type=number] { -moz-appearance: textfield; } select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }