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