|
| 1 | +/* |
| 2 | +* Skeleton V1.2 |
| 3 | +* Copyright 2011, Dave Gamache |
| 4 | +* www.getskeleton.com |
| 5 | +* Free to use under the MIT license. |
| 6 | +* http://www.opensource.org/licenses/mit-license.php |
| 7 | +* 6/20/2012 |
| 8 | +
|
| 9 | +* Edited by Daniel Saul |
| 10 | +* For use in the Habitat Webpage Template |
| 11 | + |
| 12 | +*/ |
| 13 | + |
| 14 | + |
| 15 | + |
| 16 | +/* Table of Content |
| 17 | +================================================== |
| 18 | + #Reset & Basics |
| 19 | + #Basic Styles |
| 20 | + #Site Styles |
| 21 | + #Typography |
| 22 | + #Links |
| 23 | + #Lists |
| 24 | + #Images |
| 25 | + #Buttons |
| 26 | + #Forms |
| 27 | + #Misc */ |
| 28 | + |
| 29 | + |
| 30 | +/* #Reset & Basics (Inspired by E. Meyers) |
| 31 | +================================================== */ |
| 32 | + html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { |
| 33 | + margin: 0; |
| 34 | + padding: 0; |
| 35 | + border: 0; |
| 36 | + font-size: 100%; |
| 37 | + font: inherit; |
| 38 | + vertical-align: baseline; } |
| 39 | + sup { |
| 40 | + font-size: smaller; |
| 41 | + vertical-align: +0.4em; } |
| 42 | + sub { |
| 43 | + font-size: smaller; |
| 44 | + vertical-align: -0.25em; } |
| 45 | + article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { |
| 46 | + display: block; } |
| 47 | + body { |
| 48 | + line-height: 1; } |
| 49 | + ol, ul { |
| 50 | + list-style: none; } |
| 51 | + blockquote, q { |
| 52 | + quotes: none; } |
| 53 | + blockquote:before, blockquote:after, |
| 54 | + q:before, q:after { |
| 55 | + content: ''; |
| 56 | + content: none; } |
| 57 | + table { |
| 58 | + border-collapse: collapse; |
| 59 | + border-spacing: 0; } |
| 60 | + |
| 61 | + |
| 62 | +/* #Basic Styles |
| 63 | +================================================== */ |
| 64 | + body { |
| 65 | + background: #fff; |
| 66 | + font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; |
| 67 | + color: #666; |
| 68 | + -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ |
| 69 | + -webkit-text-size-adjust: 100%; |
| 70 | + } |
| 71 | + |
| 72 | + |
| 73 | +/* #Typography |
| 74 | +================================================== */ |
| 75 | + h1, h2, h3, h4, h5, h6 { |
| 76 | + font-weight: normal; } |
| 77 | + h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } |
| 78 | + h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;} |
| 79 | + h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; } |
| 80 | + h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; } |
| 81 | + h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; } |
| 82 | + h5 { font-size: 17px; line-height: 24px; } |
| 83 | + h6 { font-size: 14px; line-height: 21px; } |
| 84 | + .subheader { color: #777; } |
| 85 | + |
| 86 | + p { margin: 0 0 20px 0; } |
| 87 | + p img { margin: 0; } |
| 88 | + p.lead { font-size: 21px; line-height: 27px; color: #777; } |
| 89 | + |
| 90 | + em { font-style: italic; } |
| 91 | + strong { font-weight: bold; color: #333; } |
| 92 | + b { font-weight: bold; } |
| 93 | + small { font-size: 80%; } |
| 94 | + |
| 95 | +/* Blockquotes */ |
| 96 | + blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; } |
| 97 | + blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; } |
| 98 | + blockquote cite { display: block; font-size: 12px; color: #555; } |
| 99 | + blockquote cite:before { content: "\2014 \0020"; } |
| 100 | + blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; } |
| 101 | + |
| 102 | + hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; } |
| 103 | + |
| 104 | + |
| 105 | +/* #Links |
| 106 | +================================================== */ |
| 107 | + a, a:visited { color: #333; text-decoration: underline; outline: 0; } |
| 108 | + a:hover, a:focus { color: #000; } |
| 109 | + p a, p a:visited { line-height: inherit; } |
| 110 | + |
| 111 | + |
| 112 | +/* #Lists |
| 113 | +================================================== */ |
| 114 | + ul, ol { margin-bottom: 20px; } |
| 115 | + ul { list-style: none outside; } |
| 116 | + ol { list-style: decimal; } |
| 117 | + ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } |
| 118 | + ul.square { list-style: square outside; } |
| 119 | + ul.circle { list-style: circle outside; } |
| 120 | + ul.disc { list-style: disc outside; } |
| 121 | + ul ul, ul ol, |
| 122 | + ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; } |
| 123 | + ul ul li, ul ol li, |
| 124 | + ol ol li, ol ul li { margin-bottom: 6px; } |
| 125 | + li { line-height: 18px; margin-bottom: 12px; } |
| 126 | + ul.large li { line-height: 21px; } |
| 127 | + li p { line-height: 21px; } |
| 128 | + |
| 129 | +/* #Images |
| 130 | +================================================== */ |
| 131 | + |
| 132 | + img.scale-with-grid { |
| 133 | + max-width: 100%; |
| 134 | + height: auto; } |
| 135 | + |
| 136 | + |
| 137 | +/* #Buttons |
| 138 | +================================================== */ |
| 139 | + |
| 140 | + .button, |
| 141 | + button, |
| 142 | + input[type="submit"], |
| 143 | + input[type="reset"], |
| 144 | + input[type="button"] { |
| 145 | + background: #eee; /* Old browsers */ |
| 146 | + background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */ |
| 147 | + background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */ |
| 148 | + background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */ |
| 149 | + background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */ |
| 150 | + background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */ |
| 151 | + background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */ |
| 152 | + border: 1px solid #aaa; |
| 153 | + border-top: 1px solid #ccc; |
| 154 | + border-left: 1px solid #ccc; |
| 155 | + -moz-border-radius: 3px; |
| 156 | + -webkit-border-radius: 3px; |
| 157 | + border-radius: 3px; |
| 158 | + color: #444; |
| 159 | + display: inline-block; |
| 160 | + font-size: 11px; |
| 161 | + font-weight: bold; |
| 162 | + text-decoration: none; |
| 163 | + text-shadow: 0 1px rgba(255, 255, 255, .75); |
| 164 | + cursor: pointer; |
| 165 | + margin-bottom: 20px; |
| 166 | + line-height: normal; |
| 167 | + padding: 8px 10px; |
| 168 | + font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } |
| 169 | + |
| 170 | + .button:hover, |
| 171 | + button:hover, |
| 172 | + input[type="submit"]:hover, |
| 173 | + input[type="reset"]:hover, |
| 174 | + input[type="button"]:hover { |
| 175 | + color: #222; |
| 176 | + background: #ddd; /* Old browsers */ |
| 177 | + background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */ |
| 178 | + background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */ |
| 179 | + background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */ |
| 180 | + background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */ |
| 181 | + background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */ |
| 182 | + background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */ |
| 183 | + border: 1px solid #888; |
| 184 | + border-top: 1px solid #aaa; |
| 185 | + border-left: 1px solid #aaa; } |
| 186 | + |
| 187 | + .button:active, |
| 188 | + button:active, |
| 189 | + input[type="submit"]:active, |
| 190 | + input[type="reset"]:active, |
| 191 | + input[type="button"]:active { |
| 192 | + border: 1px solid #666; |
| 193 | + background: #ccc; /* Old browsers */ |
| 194 | + background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */ |
| 195 | + background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */ |
| 196 | + background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */ |
| 197 | + background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */ |
| 198 | + background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */ |
| 199 | + background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ } |
| 200 | + |
| 201 | + .button.full-width, |
| 202 | + button.full-width, |
| 203 | + input[type="submit"].full-width, |
| 204 | + input[type="reset"].full-width, |
| 205 | + input[type="button"].full-width { |
| 206 | + width: 100%; |
| 207 | + padding-left: 0 !important; |
| 208 | + padding-right: 0 !important; |
| 209 | + text-align: center; } |
| 210 | + |
| 211 | + /* Fix for odd Mozilla border & padding issues */ |
| 212 | + button::-moz-focus-inner, |
| 213 | + input::-moz-focus-inner { |
| 214 | + border: 0; |
| 215 | + padding: 0; |
| 216 | + } |
| 217 | + |
| 218 | + .button.disabled, |
| 219 | + button.disabled, |
| 220 | + input[type="submit"].disabled, |
| 221 | + input[type="reset"].disabled, |
| 222 | + input[type="button"].disabled { |
| 223 | + border: 1px solid #aaa; |
| 224 | + color: #aaa; |
| 225 | + background: #fff; |
| 226 | + } |
| 227 | + |
| 228 | + |
| 229 | +/* #Forms |
| 230 | +================================================== */ |
| 231 | + |
| 232 | + form { |
| 233 | + margin-bottom: 20px; } |
| 234 | + fieldset { |
| 235 | + margin-bottom: 20px; } |
| 236 | + input[type="text"], |
| 237 | + input[type="password"], |
| 238 | + input[type="email"], |
| 239 | + textarea, |
| 240 | + select { |
| 241 | + border: 1px solid #ccc; |
| 242 | + padding: 6px 4px; |
| 243 | + outline: none; |
| 244 | + -moz-border-radius: 4px; |
| 245 | + -webkit-border-radius: 4px; |
| 246 | + border-radius: 4px; |
| 247 | + font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; |
| 248 | + color: #888; |
| 249 | + margin: 0; |
| 250 | + width: 210px; |
| 251 | + max-width: 100%; |
| 252 | + display: block; |
| 253 | + margin-bottom: 20px; |
| 254 | + background: #fff; } |
| 255 | + select { |
| 256 | + padding: 0; } |
| 257 | + input[type="text"]:focus, |
| 258 | + input[type="password"]:focus, |
| 259 | + input[type="email"]:focus, |
| 260 | + textarea:focus { |
| 261 | + border: 1px solid #aaa; |
| 262 | + color: #444; |
| 263 | + -moz-box-shadow: 0 0 3px rgba(0,0,0,.2); |
| 264 | + -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2); |
| 265 | + box-shadow: 0 0 3px rgba(0,0,0,.2); } |
| 266 | + textarea { |
| 267 | + min-height: 60px; } |
| 268 | + label, |
| 269 | + legend { |
| 270 | + display: block; |
| 271 | + font-weight: bold; |
| 272 | + font-size: 13px; } |
| 273 | + select { |
| 274 | + width: 220px; } |
| 275 | + input[type="checkbox"] { |
| 276 | + display: inline; } |
| 277 | + label span, |
| 278 | + legend span { |
| 279 | + font-weight: normal; |
| 280 | + font-size: 13px; |
| 281 | + color: #444; } |
| 282 | + |
| 283 | +/* #Misc |
| 284 | +================================================== */ |
| 285 | + .remove-bottom { margin-bottom: 0 !important; } |
| 286 | + .half-bottom { margin-bottom: 10px !important; } |
| 287 | + .add-bottom { margin-bottom: 20px !important; } |
| 288 | + .no-margin { margin: 0 !important; padding: 0; } |
| 289 | + |
| 290 | + |
0 commit comments