*{ box-sizing:border-box; } a, a:visited, a:hover, a:active{ text-decoration:none; } ul{ list-style:none; margin:0; padding:0; } *{ -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } /* Grid System 12 columns */ .col,.cols { margin-left: 4%; } .col:first-child,.cols:first-child { margin-left: 0; } .one.col, .one.cols { width: 4.66666666667%; } .two.cols { width: 13.3333333333%; } .three.cols { width: 22%; } .four.cols { width: 30.6666666667%; } .five.cols { width: 39.3333333333%; } .six.cols { width: 48%; } .seven.cols { width: 56.6666666667%; } .eight.cols { width: 65.3333333333%; } .nine.cols { width: 74.0%; } .ten.cols { width: 82.6666666667%; } .eleven.cols { width: 91.3333333333%; } .twelve.cols { width: 100%; margin-left: 0; } .one-third.col { width: 30.6666666667%; } .two-third.col { width: 65.3333333333%; } .one-half.col { width: 48%; } .offset.col, .offset.cols { margin: 0; } /* Forms –––––––––––––––––––––––––––––––––––––––––––––––––– */ input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select { min-width:80px; height: 30px; padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ background-color: #fff; border: 1px solid #D1D1D1; border-radius: 4px; box-shadow: none; box-sizing: border-box; } /* Removes awkward default styles on some inputs for iOS */ input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; } textarea { min-height: 65px; padding-top: 6px; padding-bottom: 6px; } input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border: 1px solid #008791; outline: 0; } input.error{ border: 1px solid red; } select.error{ border: 1px solid red; } span.error{ border: 1px solid red; } textarea.error{ border: 1px solid red; } label, legend { display: block; margin-bottom: .5rem; font-weight: 600; } fieldset { padding: 0; border-width: 0; } input[type="checkbox"], input[type="radio"] { display: inline; } label > .label-body { display: inline-block; margin-left: .5rem; font-weight: normal; } /* Buttons –––––––––––––––––––––––––––––––––––––––––––––––––– */ .button, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; height: 38px; padding: 0 30px; color: #555; text-align: center; font-size: 11px; font-weight: 600; line-height: 38px; letter-spacing: .1rem; text-transform: uppercase; text-decoration: none; white-space: nowrap; background-color: #e3ede7; border-radius: 4px; border: 1px solid #bbb; cursor: pointer; box-sizing: border-box; &:first-child{ margin-right: 10px; } } .button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { color: #333; border-color: #888; outline: 0; } .button.primary, button.primary, input[type="submit"].primary, input[type="reset"].primary, input[type="button"].primary { color: #FFF; background-color: #998675; border-color: #998675; } .button.cancel, button.cancel, input[type="submit"].cancel, input[type="reset"].cancel, input[type="button"].cancel { color: #FFF; background-color: red; border-color: red; } .button.primary:hover, button.primary:hover, input[type="submit"].primary:hover, input[type="reset"].primary:hover, input[type="button"].primary:hover, .button.primary:focus, button.primary:focus, input[type="submit"].primary:focus, input[type="reset"].primary:focus, input[type="button"].primary:focus { color: #FFF; background-color: #008791; border-color: #008791; }