/* * Skeleton V2.0 * Copyright 2014, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 6/20/2014 */ /* Basic Styles -------------------------------------------------- */ /* NOTE html is set to 62.5% so that all the REM measurements throughout Skeleton are based on 10px sizing. So basically 1.5rem = 15px :) */ html { font-size: 62.5%; } body { background: #fff; font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ line-height: 1.6; font-weight: 400; font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #222; } /* Typography -------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-weight: 300; margin-top: 0; margin-bottom: 2rem; } h1 { font-size: 5.0rem; line-height: 1.2; letter-spacing: -.1rem;} h2 { font-size: 4.2rem; line-height: 1.25; letter-spacing: -.1rem; } h3 { font-size: 3.6rem; line-height: 1.3; letter-spacing: -.1rem; } h4 { font-size: 3.0rem; line-height: 1.35; letter-spacing: -.08rem; } h5 { font-size: 2.4rem; line-height: 1.5; letter-spacing: -.05rem; } h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } /* Links -------------------------------------------------- */ a { color: #1EAEDB; } a:hover, a:focus { color: #0FA0CE; } /* Buttons -------------------------------------------------- */ .button, button, input[type="submit"], input[type="reset"], input[type="button"] { background-color: #33C3F0; border-radius: 4px; color: #FFF; display: inline-block; text-align: center; font-size: 11px; font-weight: 600; text-decoration: none; cursor: pointer; height: 38px; line-height: 38px; padding: 0 30px; border-width: 0; letter-spacing: .1rem; text-transform: uppercase; } .button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { background-color: #1EAEDB; color: #FFF; } .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { background-color: #1EAEDB; color: #FFF; outline: 0; } .button.secondary, button.secondary, input[type="submit"].secondary, input[type="reset"].secondary, input[type="button"].secondary { background-color: #B6B6B6; } .button.secondary:hover, button.secondary:hover, input[type="submit"].secondary:hover, input[type="reset"].secondary:hover, input[type="button"].secondary:hover { background-color: #AAA; color: #FFF; } .button.secondary:focus, button.secondary:focus, input[type="submit"].secondary:focus, input[type="reset"].secondary:focus, input[type="button"].secondary:focus { background-color: #AAA; color: #FFF; outline: 0; } .button-full-width { width: 100%; padding: 0; } /* Forms -------------------------------------------------- */ input[type="email"], input[type="search"], input[type="text"], input[type="password"], textarea, select { border: 1px solid #B6B6B6; height: 36px; padding: 0 10px; border-radius: 4px; box-shadow: none; } input[type="email"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border: 1px solid #33C3F0; outline: 0; } label, legend { display: block; font-weight: 600; margin-bottom: .3rem; } input[disabled] { cursor: not-allowed; background-color: #EFEFEF; } fieldset { border-width: 0; padding: 0; } input[type="checkbox"] { display: inline; } label span, legend span { font-weight: normal; margin-left: .5rem; } /* Lists -------------------------------------------------- */ ul { list-style: circle inside; } ol { list-style: decimal inside; } ol, ul { padding-left: 0; } ul ul, ul ol, ol ol, ol ul { margin: 1.5rem 0 1.5rem 3rem; font-size: 90%; } li { margin-bottom: 1rem; } /* Code -------------------------------------------------- */ code { padding: .2rem .5rem; margin: 0 .2rem; font-size: 90%; background: #F1F1F1; border: 1px solid #E1E1E1; border-radius: 4px; white-space: nowrap; } pre { padding: 1rem 1.5rem; background: #F1F1F1; font-size: 90%; border: 1px solid #E1E1E1; border-radius: 4px; } /* Spacing -------------------------------------------------- */ input, textarea, select { margin-bottom: 1.5rem; } p, hr, pre, blockquote, form, dl, figure, table, p, ul, ol { margin-bottom: 2.5rem; }