├── .meteor ├── .finished-upgraders ├── .gitignore ├── .id ├── packages ├── platforms ├── release └── versions ├── client ├── client.js ├── comment_submit.js ├── main.html ├── stylesheets │ ├── basscss.css │ ├── style.css │ └── tachyons.css ├── templates │ ├── accounts.html │ ├── comment_item.html │ ├── comment_submit.html │ ├── firstPage.html │ ├── landingPage.html │ ├── signout.html │ ├── wellness.html │ ├── wellnessItem.html │ ├── wellnessItem.js │ ├── wellnessList.html │ ├── wellnessList.js │ ├── wellnessSubmit.html │ ├── wellnessSubmit.js │ ├── yak_item.html │ ├── yak_page.html │ ├── yak_submit.html │ └── yaks_list.html ├── yak_item.js ├── yak_page.js └── yak_submit.js ├── main.js ├── public └── welby.svg └── server └── server.js /.meteor/.finished-upgraders: -------------------------------------------------------------------------------- 1 | # This file contains information which helps Meteor properly upgrade your 2 | # app when you run 'meteor update'. You should check it into version control 3 | # with your project. 4 | 5 | notices-for-0.9.0 6 | notices-for-0.9.1 7 | 0.9.4-platform-file 8 | notices-for-facebook-graph-api-2 9 | -------------------------------------------------------------------------------- /.meteor/.gitignore: -------------------------------------------------------------------------------- 1 | local 2 | -------------------------------------------------------------------------------- /.meteor/.id: -------------------------------------------------------------------------------- 1 | # This file contains a token that is unique to your project. 2 | # Check it into your repository along with the rest of this directory. 3 | # It can be used for purposes such as: 4 | # - ensuring you don't accidentally deploy one app on top of another 5 | # - providing package authors with aggregated statistics 6 | 7 | 1cl6p1f1a1163cfy0po1 8 | -------------------------------------------------------------------------------- /.meteor/packages: -------------------------------------------------------------------------------- 1 | # Meteor packages used by this project, one per line. 2 | # Check this file (and the other files in this directory) into your repository. 3 | # 4 | # 'meteor add' and 'meteor remove' will edit this file for you, 5 | # but you can also edit it by hand. 6 | 7 | meteor-platform 8 | autopublish 9 | insecure 10 | twbs:bootstrap 11 | iron:router 12 | natestrauser:font-awesome 13 | accounts-facebook 14 | accounts-ui 15 | accounts-password 16 | -------------------------------------------------------------------------------- /.meteor/platforms: -------------------------------------------------------------------------------- 1 | server 2 | browser 3 | -------------------------------------------------------------------------------- /.meteor/release: -------------------------------------------------------------------------------- 1 | METEOR@1.1.0.3 2 | -------------------------------------------------------------------------------- /.meteor/versions: -------------------------------------------------------------------------------- 1 | accounts-base@1.2.0 2 | accounts-facebook@1.0.4 3 | accounts-oauth@1.1.5 4 | accounts-password@1.1.1 5 | accounts-ui@1.1.5 6 | accounts-ui-unstyled@1.1.7 7 | autopublish@1.0.3 8 | autoupdate@1.2.1 9 | base64@1.0.3 10 | binary-heap@1.0.3 11 | blaze@2.1.2 12 | blaze-tools@1.0.3 13 | boilerplate-generator@1.0.3 14 | callback-hook@1.0.3 15 | check@1.0.5 16 | ddp@1.1.0 17 | deps@1.0.7 18 | ejson@1.0.6 19 | email@1.0.6 20 | facebook@1.2.1 21 | fastclick@1.0.3 22 | geojson-utils@1.0.3 23 | html-tools@1.0.4 24 | htmljs@1.0.4 25 | http@1.1.0 26 | id-map@1.0.3 27 | insecure@1.0.3 28 | iron:controller@1.0.8 29 | iron:core@1.0.8 30 | iron:dynamic-template@1.0.8 31 | iron:layout@1.0.8 32 | iron:location@1.0.9 33 | iron:middleware-stack@1.0.9 34 | iron:router@1.0.9 35 | iron:url@1.0.9 36 | jquery@1.11.3_2 37 | json@1.0.3 38 | launch-screen@1.0.2 39 | less@1.0.14 40 | livedata@1.0.13 41 | localstorage@1.0.3 42 | logging@1.0.7 43 | meteor@1.1.6 44 | meteor-platform@1.2.2 45 | minifiers@1.1.5 46 | minimongo@1.0.8 47 | mobile-status-bar@1.0.3 48 | mongo@1.1.0 49 | natestrauser:font-awesome@4.3.0 50 | npm-bcrypt@0.7.8_2 51 | oauth@1.1.4 52 | oauth2@1.1.3 53 | observe-sequence@1.0.6 54 | ordered-dict@1.0.3 55 | random@1.0.3 56 | reactive-dict@1.1.0 57 | reactive-var@1.0.5 58 | reload@1.1.3 59 | retry@1.0.3 60 | routepolicy@1.0.5 61 | service-configuration@1.0.4 62 | session@1.1.0 63 | sha@1.0.3 64 | spacebars@1.0.6 65 | spacebars-compiler@1.0.6 66 | srp@1.0.3 67 | templating@1.1.1 68 | tracker@1.0.7 69 | twbs:bootstrap@3.3.5 70 | ui@1.0.6 71 | underscore@1.0.3 72 | url@1.0.4 73 | webapp@1.2.0 74 | webapp-hashing@1.0.3 75 | -------------------------------------------------------------------------------- /client/client.js: -------------------------------------------------------------------------------- 1 | Template.yaksList.helpers({ 2 | yaks: function() { 3 | return Yaks.find({}, {sort : {score: -1}}); 4 | } 5 | }) -------------------------------------------------------------------------------- /client/comment_submit.js: -------------------------------------------------------------------------------- 1 | Template.commentSubmit.events({ 2 | 'submit form': function(e, template) { 3 | e.preventDefault(); 4 | 5 | var $body = $(e.target).find('[name=body]'); 6 | var comment = { 7 | body: $body.val(), 8 | postId: template.data._id, 9 | submitted: new Date() 10 | }; 11 | 12 | var commentBody = e.target.body.value; 13 | // Check if the comment is not empty 14 | if (commentBody == "") { 15 | alert("You can't insert empty comment. Try to comment something nice instead! :)") 16 | } else { 17 | Meteor.call('commentInsert', comment); 18 | } 19 | 20 | // clear field 21 | e.target.body.value = ""; 22 | } 23 | }); -------------------------------------------------------------------------------- /client/main.html: -------------------------------------------------------------------------------- 1 | 2 | Welby 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | logo 14 | 15 | 16 | 24 |
25 | 26 | -------------------------------------------------------------------------------- /client/stylesheets/basscss.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Basscss v6.1.6 4 | Low-level CSS toolkit 5 | http://basscss.com 6 | 7 | */ 8 | 9 | 10 | 11 | body { margin: 0 } 12 | img { max-width: 100% } 13 | svg { max-height: 100% } 14 | 15 | input, 16 | select, 17 | textarea, 18 | fieldset { 19 | font-family: inherit; 20 | font-size: 1rem; 21 | box-sizing: border-box; 22 | margin-top: 0; 23 | margin-bottom: 0; 24 | } 25 | 26 | input[type=text], 27 | input[type=datetime], 28 | input[type=datetime-local], 29 | input[type=email], 30 | input[type=month], 31 | input[type=number], 32 | input[type=password], 33 | input[type=search], 34 | input[type=tel], 35 | input[type=time], 36 | input[type=url], 37 | input[type=week] { 38 | height: 2.25rem; 39 | padding: .5rem .5rem; 40 | vertical-align: middle; 41 | -webkit-appearance: none; 42 | } 43 | 44 | select { 45 | line-height: 1.75; 46 | padding: .5rem .5rem; 47 | } 48 | 49 | select:not([multiple]) { 50 | height: 2.25rem; 51 | vertical-align: middle; 52 | } 53 | 54 | textarea { 55 | line-height: 1.75; 56 | padding: .5rem .5rem; 57 | } 58 | 59 | .fieldset-reset { 60 | padding: 0; 61 | margin-left: 0; 62 | margin-right: 0; 63 | border: 0; 64 | } 65 | .fieldset-reset legend { 66 | padding: 0; 67 | } 68 | 69 | :root { 70 | 71 | } 72 | 73 | button, 74 | .button { 75 | font-family: inherit; 76 | font-size: inherit; 77 | font-weight: bold; 78 | text-decoration: none; 79 | cursor: pointer; 80 | display: inline-block; 81 | line-height: 1.125rem; 82 | padding: .5rem 1rem; 83 | margin: 0; 84 | height: auto; 85 | border: 1px solid transparent; 86 | vertical-align: middle; 87 | -webkit-appearance: none; 88 | } 89 | 90 | button, 91 | button::after, 92 | button::before, 93 | .button, 94 | .button::after, 95 | .button::before { 96 | box-sizing: border-box; 97 | box-sizing: border-box; 98 | } 99 | 100 | ::-moz-focus-inner { 101 | border: 0; 102 | padding: 0; 103 | } 104 | 105 | .button:hover { text-decoration: none } 106 | 107 | table { 108 | border-collapse: separate; 109 | border-spacing: 0; 110 | max-width: 100%; 111 | width: 100%; 112 | } 113 | 114 | th { 115 | text-align: left; 116 | font-weight: bold; 117 | } 118 | 119 | th, 120 | td { 121 | padding: .25rem 1rem; 122 | line-height: inherit; 123 | } 124 | 125 | th { vertical-align: bottom } 126 | td { vertical-align: top } 127 | 128 | body { 129 | font-family: 'Helvetica Neue', Helvetica, sans-serif; 130 | line-height: 1.5; 131 | font-size: 100%; 132 | } 133 | 134 | h1, h2, h3, h4, h5, h6 { 135 | font-family: 'Helvetica Neue', Helvetica, sans-serif; 136 | font-weight: bold; 137 | line-height: 1.25; 138 | margin-top: 1em; 139 | margin-bottom: .5em; 140 | } 141 | 142 | p { 143 | font-size: 1rem; 144 | margin-top: 0; 145 | margin-bottom: 1rem; 146 | } 147 | 148 | dl, ol, ul { 149 | font-size: 1rem; 150 | margin-top: 0; 151 | margin-bottom: 1rem; 152 | } 153 | 154 | pre, code, samp { 155 | font-family: 'Source Code Pro', Consolas, monospace; 156 | font-size: inherit; 157 | } 158 | 159 | pre { 160 | margin-top: 0; 161 | margin-bottom: 1rem; 162 | overflow-x: scroll; 163 | } 164 | 165 | hr { 166 | margin-top: 2rem; 167 | margin-bottom: 2rem; 168 | } 169 | 170 | blockquote { 171 | margin: 2rem 0; 172 | padding: 0 1rem; 173 | } 174 | 175 | blockquote, 176 | blockquote p { 177 | font-size: 1.25rem; 178 | font-style: italic; 179 | } 180 | 181 | h1, .h1 { font-size: 2rem } 182 | h2, .h2 { font-size: 1.5rem } 183 | h3, .h3 { font-size: 1.25rem } 184 | h4, .h4 { font-size: 1rem } 185 | h5, .h5 { font-size: .875rem } 186 | h6, .h6 { font-size: .75rem } 187 | 188 | .list-reset { 189 | list-style: none; 190 | padding-left: 0; 191 | } 192 | 193 | .inline { display: inline } 194 | .block { display: block } 195 | .inline-block { display: inline-block } 196 | .table { display: table } 197 | .table-cell { display: table-cell } 198 | 199 | .overflow-hidden { overflow: hidden } 200 | .overflow-scroll { overflow: scroll } 201 | .overflow-auto { overflow: auto } 202 | 203 | .clearfix:before, 204 | .clearfix:after { 205 | content: " "; 206 | display: table 207 | } 208 | .clearfix:after { clear: both } 209 | 210 | .left { float: left } 211 | .right { float: right } 212 | 213 | .fit { max-width: 100% } 214 | 215 | .half-width { width: 50% } 216 | .full-width { width: 100% } 217 | 218 | .bold { font-weight: bold } 219 | .regular { font-weight: normal } 220 | .italic { font-style: italic } 221 | .caps { text-transform: uppercase; letter-spacing: .2em; } 222 | 223 | .left-align { text-align: left } 224 | .center { text-align: center } 225 | .right-align { text-align: right } 226 | .justify { text-align: justify } 227 | 228 | .nowrap { white-space: nowrap } 229 | .break-word { word-wrap: break-word } 230 | 231 | .truncate { 232 | max-width: 100%; 233 | overflow: hidden; 234 | text-overflow: ellipsis; 235 | white-space: nowrap; 236 | } 237 | 238 | .m0 { margin: 0 } 239 | .mt0 { margin-top: 0 } 240 | .mr0 { margin-right: 0 } 241 | .mb0 { margin-bottom: 0 } 242 | .ml0 { margin-left: 0 } 243 | 244 | .m1 { margin: .5rem } 245 | .mt1 { margin-top: .5rem } 246 | .mr1 { margin-right: .5rem } 247 | .mb1 { margin-bottom: .5rem } 248 | .ml1 { margin-left: .5rem } 249 | 250 | .m2 { margin: 1rem } 251 | .mt2 { margin-top: 1rem } 252 | .mr2 { margin-right: 1rem } 253 | .mb2 { margin-bottom: 1rem } 254 | .ml2 { margin-left: 1rem } 255 | 256 | .m3 { margin: 2rem } 257 | .mt3 { margin-top: 2rem } 258 | .mr3 { margin-right: 2rem } 259 | .mb3 { margin-bottom: 2rem } 260 | .ml3 { margin-left: 2rem } 261 | 262 | .m4 { margin: 4rem } 263 | .mt4 { margin-top: 4rem } 264 | .mr4 { margin-right: 4rem } 265 | .mb4 { margin-bottom: 4rem } 266 | .ml4 { margin-left: 4rem } 267 | 268 | .mxn1 { margin-left: -.5rem; margin-right: -.5rem; } 269 | .mxn2 { margin-left: -1rem; margin-right: -1rem; } 270 | .mxn3 { margin-left: -2rem; margin-right: -2rem; } 271 | .mxn4 { margin-left: -4rem; margin-right: -4rem; } 272 | 273 | .mx-auto { margin-left: auto; margin-right: auto; } 274 | .p1 { padding: .5rem } 275 | .py1 { padding-top: .5rem; padding-bottom: .5rem } 276 | .px1 { padding-left: .5rem; padding-right: .5rem } 277 | 278 | .p2 { padding: 1rem } 279 | .py2 { padding-top: 1rem; padding-bottom: 1rem } 280 | .px2 { padding-left: 1rem; padding-right: 1rem } 281 | 282 | .p3 { padding: 2rem } 283 | .py3 { padding-top: 2rem; padding-bottom: 2rem } 284 | .px3 { padding-left: 2rem; padding-right: 2rem } 285 | 286 | .p4 { padding: 4rem } 287 | .py4 { padding-top: 4rem; padding-bottom: 4rem } 288 | .px4 { padding-left: 4rem; padding-right: 4rem } 289 | 290 | .sm-show, .md-show, .lg-show { 291 | display: none !important 292 | } 293 | 294 | @media (min-width: 40em) { 295 | .sm-show { display: block !important } 296 | } 297 | 298 | @media (min-width: 52em) { 299 | .md-show { display: block !important } 300 | } 301 | 302 | @media (min-width: 64em) { 303 | .lg-show { display: block !important } 304 | } 305 | 306 | 307 | @media (min-width: 40em) { 308 | .sm-hide { display: none !important } 309 | } 310 | 311 | @media (min-width: 52em) { 312 | .md-hide { display: none !important } 313 | } 314 | 315 | @media (min-width: 64em) { 316 | .lg-hide { display: none !important } 317 | } 318 | 319 | .display-none { display: none !important } 320 | 321 | .hide { 322 | position: absolute !important; 323 | height: 1px; 324 | width: 1px; 325 | overflow: hidden; 326 | clip: rect(1px, 1px, 1px, 1px); 327 | } 328 | 329 | .relative { position: relative } 330 | .absolute { position: absolute } 331 | .fixed { position: fixed } 332 | 333 | .top-0 { top: 0 } 334 | .right-0 { right: 0 } 335 | .bottom-0 { bottom: 0 } 336 | .left-0 { left: 0 } 337 | 338 | .z1 { z-index: 1 } 339 | .z2 { z-index: 2 } 340 | .z3 { z-index: 3 } 341 | .z4 { z-index: 4 } 342 | 343 | .button-small { 344 | padding: .25rem .5rem; 345 | } 346 | 347 | .button-big { 348 | padding: 1rem 1.25rem; 349 | } 350 | 351 | .button-narrow { 352 | padding-left: .5rem; 353 | padding-right: .5rem; 354 | } 355 | 356 | .container { 357 | max-width: 64em; 358 | margin-left: auto; 359 | margin-right: auto; 360 | } 361 | .col { 362 | float: left; 363 | box-sizing: border-box; 364 | } 365 | 366 | .col-right { 367 | float: right; 368 | box-sizing: border-box; 369 | } 370 | 371 | .col-1 { 372 | width: 8.33333%; 373 | } 374 | 375 | .col-2 { 376 | width: 16.66667%; 377 | } 378 | 379 | .col-3 { 380 | width: 25%; 381 | } 382 | 383 | .col-4 { 384 | width: 33.33333%; 385 | } 386 | 387 | .col-5 { 388 | width: 41.66667%; 389 | } 390 | 391 | .col-6 { 392 | width: 50%; 393 | } 394 | 395 | .col-7 { 396 | width: 58.33333%; 397 | } 398 | 399 | .col-8 { 400 | width: 66.66667%; 401 | } 402 | 403 | .col-9 { 404 | width: 75%; 405 | } 406 | 407 | .col-10 { 408 | width: 83.33333%; 409 | } 410 | 411 | .col-11 { 412 | width: 91.66667%; 413 | } 414 | 415 | .col-12 { 416 | width: 100%; 417 | } 418 | @media (min-width: 40em) { 419 | 420 | .sm-col { 421 | float: left; 422 | box-sizing: border-box; 423 | } 424 | 425 | .sm-col-right { 426 | float: right; 427 | box-sizing: border-box; 428 | } 429 | 430 | .sm-col-1 { 431 | width: 8.33333%; 432 | } 433 | 434 | .sm-col-2 { 435 | width: 16.66667%; 436 | } 437 | 438 | .sm-col-3 { 439 | width: 25%; 440 | } 441 | 442 | .sm-col-4 { 443 | width: 33.33333%; 444 | } 445 | 446 | .sm-col-5 { 447 | width: 41.66667%; 448 | } 449 | 450 | .sm-col-6 { 451 | width: 50%; 452 | } 453 | 454 | .sm-col-7 { 455 | width: 58.33333%; 456 | } 457 | 458 | .sm-col-8 { 459 | width: 66.66667%; 460 | } 461 | 462 | .sm-col-9 { 463 | width: 75%; 464 | } 465 | 466 | .sm-col-10 { 467 | width: 83.33333%; 468 | } 469 | 470 | .sm-col-11 { 471 | width: 91.66667%; 472 | } 473 | 474 | .sm-col-12 { 475 | width: 100%; 476 | } 477 | 478 | } 479 | @media (min-width: 52em) { 480 | 481 | .md-col { 482 | float: left; 483 | box-sizing: border-box; 484 | } 485 | 486 | .md-col-right { 487 | float: right; 488 | box-sizing: border-box; 489 | } 490 | 491 | .md-col-1 { 492 | width: 8.33333%; 493 | } 494 | 495 | .md-col-2 { 496 | width: 16.66667%; 497 | } 498 | 499 | .md-col-3 { 500 | width: 25%; 501 | } 502 | 503 | .md-col-4 { 504 | width: 33.33333%; 505 | } 506 | 507 | .md-col-5 { 508 | width: 41.66667%; 509 | } 510 | 511 | .md-col-6 { 512 | width: 50%; 513 | } 514 | 515 | .md-col-7 { 516 | width: 58.33333%; 517 | } 518 | 519 | .md-col-8 { 520 | width: 66.66667%; 521 | } 522 | 523 | .md-col-9 { 524 | width: 75%; 525 | } 526 | 527 | .md-col-10 { 528 | width: 83.33333%; 529 | } 530 | 531 | .md-col-11 { 532 | width: 91.66667%; 533 | } 534 | 535 | .md-col-12 { 536 | width: 100%; 537 | } 538 | 539 | } 540 | @media (min-width: 64em) { 541 | 542 | .lg-col { 543 | float: left; 544 | box-sizing: border-box; 545 | } 546 | 547 | .lg-col-right { 548 | float: right; 549 | box-sizing: border-box; 550 | } 551 | 552 | .lg-col-1 { 553 | width: 8.33333%; 554 | } 555 | 556 | .lg-col-2 { 557 | width: 16.66667%; 558 | } 559 | 560 | .lg-col-3 { 561 | width: 25%; 562 | } 563 | 564 | .lg-col-4 { 565 | width: 33.33333%; 566 | } 567 | 568 | .lg-col-5 { 569 | width: 41.66667%; 570 | } 571 | 572 | .lg-col-6 { 573 | width: 50%; 574 | } 575 | 576 | .lg-col-7 { 577 | width: 58.33333%; 578 | } 579 | 580 | .lg-col-8 { 581 | width: 66.66667%; 582 | } 583 | 584 | .lg-col-9 { 585 | width: 75%; 586 | } 587 | 588 | .lg-col-10 { 589 | width: 83.33333%; 590 | } 591 | 592 | .lg-col-11 { 593 | width: 91.66667%; 594 | } 595 | 596 | .lg-col-12 { 597 | width: 100%; 598 | } 599 | 600 | } 601 | 602 | .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } 603 | 604 | .flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } 605 | .flex-wrap { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } 606 | 607 | .flex-center { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } 608 | .flex-baseline { -webkit-box-align: baseline; -webkit-align-items: baseline; -ms-flex-align: baseline; align-items: baseline } 609 | .flex-stretch { -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch } 610 | .flex-start { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start } 611 | .flex-end { -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end } 612 | 613 | .flex-justify { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } 614 | 615 | .flex-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1 } 616 | .flex-last { -webkit-box-ordinal-group: 1025; -webkit-order: 1024; -ms-flex-order: 1024; order: 1024 } 617 | 618 | .flex-auto { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto } 619 | .flex-grow { -webkit-box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto } 620 | .flex-none { -webkit-box-flex: 0; -webkit-flex: none; -ms-flex: none; flex: none } 621 | 622 | .flex > div { box-sizing: border-box } 623 | @media (min-width: 40em) { 624 | .sm-flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } 625 | .sm-flex > div { box-sizing: border-box } 626 | } 627 | @media (min-width: 52em) { 628 | .md-flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } 629 | .md-flex > div { box-sizing: border-box } 630 | } 631 | @media (min-width: 64em) { 632 | .lg-flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } 633 | .lg-flex > div { box-sizing: border-box } 634 | } 635 | 636 | body { 637 | color: #111; 638 | background-color: white; 639 | } 640 | 641 | a { 642 | color: #0074d9; 643 | text-decoration: none; 644 | } 645 | 646 | a:hover { 647 | text-decoration: underline; 648 | } 649 | 650 | pre, code { 651 | background-color: transparent; 652 | border-radius: 3px; 653 | } 654 | 655 | hr { 656 | border: 0; 657 | border-bottom-style: solid; 658 | border-bottom-width: 1px; 659 | border-bottom-color: rgba(0,0,0,.125); 660 | } 661 | 662 | .button { 663 | color: white; 664 | background-color: #0074d9; 665 | border-radius: 3px; 666 | } 667 | 668 | .button:hover { 669 | box-shadow: inset 0 0 0 20rem rgba(0,0,0,.0625); 670 | } 671 | 672 | .button:focus { 673 | outline: none; 674 | border-color: rgba(0,0,0,.125); 675 | box-shadow: 0 0 0 3px rgba(0,0,0,.25); 676 | } 677 | 678 | .button:active, 679 | .button.is-active { 680 | box-shadow: inset 0 0 0 20rem rgba(0,0,0,.125), 681 | inset 0 3px 4px 0 rgba(0,0,0,.25), 682 | 0 0 1px rgba(0,0,0,.125); 683 | } 684 | 685 | .button:disabled, 686 | .button.is-disabled { 687 | opacity: .5; 688 | } 689 | 690 | .field-light { 691 | background-color: white; 692 | -webkit-transition: box-shadow .2s ease; 693 | transition: box-shadow .2s ease; 694 | border-style: solid; 695 | border-width: 1px; 696 | border-color: rgba(0,0,0,.125); 697 | border-radius: 3px; 698 | } 699 | 700 | .field-light:focus, 701 | .field-light.is-focused { 702 | outline: none; 703 | border-color: #0074d9; 704 | box-shadow: 0 0 0 2px rgba(0, 116, 217, 0.5); 705 | } 706 | 707 | .field-light:disabled, 708 | .field-light.is-disabled { 709 | background-color: rgba(0,0,0,.125); 710 | opacity: .5; 711 | } 712 | 713 | .field-light:read-only:not(select), 714 | .field-light.is-read-only { 715 | background-color: rgba(0,0,0,.125); 716 | } 717 | 718 | 719 | .field-light.is-success { 720 | border-color: #2ecc40; 721 | } 722 | 723 | .field-light.is-success:focus, 724 | .field-light.is-success.is-focused { 725 | box-shadow: 0 0 0 2px rgba(46, 204, 64, 0.5); 726 | } 727 | 728 | .field-light.is-warning { 729 | border-color: #ffdc00; 730 | } 731 | 732 | .field-light.is-warning:focus, 733 | .field-light.is-warning.is-focused { 734 | box-shadow: 0 0 0 2px rgba(255, 220, 0, 0.5); 735 | } 736 | 737 | .field-light:invalid, 738 | .field-light.is-error { 739 | border-color: #ff4136; 740 | } 741 | 742 | .field-light.is-error:focus, 743 | .field-light.is-error.is-focused { 744 | box-shadow: 0 0 0 2px rgba(255, 65, 54, 0.5); 745 | } 746 | 747 | .field-dark { 748 | color: white; 749 | background-color: rgba(0,0,0,.25); 750 | border: 1px solid rgba(0,0,0,.0625); 751 | border-radius: 3px; 752 | } 753 | 754 | .field-dark::-webkit-input-placeholder { 755 | color: rgba(255,255,255,.75); 756 | } 757 | 758 | .field-dark::-moz-placeholder { 759 | color: rgba(255,255,255,.75); 760 | } 761 | 762 | .field-dark:-ms-input-placeholder { 763 | color: rgba(255,255,255,.75); 764 | } 765 | 766 | .field-dark::placeholder { 767 | color: rgba(255,255,255,.75); 768 | } 769 | 770 | .field-dark:focus { 771 | outline: 0; 772 | border: 1px solid rgba(255,255,255,.5); 773 | box-shadow: 0 0 0 2px rgba(255,255,255,.25); 774 | } 775 | 776 | .field-dark:read-only:not(select) { 777 | background-color: rgba(255,255,255,.25); 778 | } 779 | 780 | .field-dark.is-success { 781 | border-color: #2ecc40; 782 | } 783 | 784 | .field-dark.is-success:focus { 785 | box-shadow: 0 0 0 2px rgba(46, 204, 64, 0.5); 786 | } 787 | 788 | .field-dark.is-warning { 789 | border-color: #ffdc00; 790 | } 791 | 792 | .field-dark.is-warning:focus { 793 | box-shadow: 0 0 0 2px rgba(255, 220, 0, 0.5); 794 | } 795 | 796 | .field-dark:invalid, 797 | .field-dark.is-error { 798 | border-color: #ff4136; 799 | } 800 | 801 | .field-dark.is-error:focus { 802 | box-shadow: 0 0 0 2px rgba(255, 65, 54, 0.5); 803 | } 804 | 805 | input[type=range] { 806 | vertical-align: middle; 807 | background-color: transparent; 808 | } 809 | 810 | .range-light { 811 | color: inherit; 812 | -webkit-appearance: none; 813 | padding-top: .5rem; 814 | padding-bottom: .5rem; 815 | } 816 | 817 | .range-light::-webkit-slider-thumb { 818 | -webkit-appearance: none; 819 | position: relative; 820 | width: .5rem; 821 | height: 1.25rem; 822 | border-radius: 3px; 823 | background-color: currentcolor; 824 | cursor: pointer; 825 | margin-top: -0.5rem; 826 | } 827 | .range-light::-webkit-slider-thumb:before { 828 | content: ''; 829 | display: block; 830 | position: absolute; 831 | top: -0.5rem; 832 | left: -0.875rem; 833 | width: 2.25rem; 834 | height: 2.25rem; 835 | opacity: 0; 836 | } 837 | 838 | .range-light::-moz-range-thumb { 839 | width: .5rem; 840 | height: 1.25rem; 841 | border-radius: 3px; 842 | border-color: transparent; 843 | border-width: 0; 844 | background-color: currentcolor; 845 | cursor: pointer; 846 | } 847 | 848 | .range-light::-webkit-slider-runnable-track { 849 | height: 0.25rem; 850 | cursor: pointer; 851 | border-radius: 3px; 852 | background-color: rgba(0,0,0,.25); 853 | } 854 | 855 | .range-light::-moz-range-track { 856 | height: 0.25rem; 857 | cursor: pointer; 858 | border-radius: 3px; 859 | background-color: rgba(0,0,0,.25); 860 | } 861 | 862 | .range-light:focus { 863 | outline: none; 864 | } 865 | 866 | .range-light:focus::-webkit-slider-thumb { 867 | outline: none; 868 | border: 0; 869 | box-shadow: 0 0 1px 2px currentcolor; 870 | } 871 | 872 | .range-light:focus::-moz-range-thumb { 873 | outline: none; 874 | border: 0; 875 | box-shadow: 0 0 0 3px rgba(0,0,0,.25); 876 | } 877 | 878 | .progress { 879 | display: block; 880 | width: 100%; 881 | height: 0.5625rem; 882 | margin: .5rem 0; 883 | background-color: rgba(0,0,0,.125); 884 | border: 0; 885 | border-radius: 10000px; 886 | overflow: hidden; 887 | -webkit-appearance: none; 888 | } 889 | 890 | .progress::-webkit-progress-bar { 891 | -webkit-appearance: none; 892 | background-color: rgba(0,0,0,.125) 893 | } 894 | 895 | .progress::-webkit-progress-value { 896 | -webkit-appearance: none; 897 | background-color: currentColor; 898 | } 899 | 900 | .progress::-moz-progress-bar { 901 | background-color: currentColor; 902 | } 903 | 904 | .table-light th, 905 | .table-light td { 906 | border-bottom-width: 1px; 907 | border-bottom-style: solid; 908 | border-bottom-color: rgba(0,0,0,.125); 909 | } 910 | 911 | .table-light tr:last-child td { 912 | border-bottom: 0; 913 | } 914 | 915 | .button-outline { 916 | position: relative; 917 | z-index: 2; 918 | color: inherit; 919 | background-color: transparent; 920 | border-radius: 3px; 921 | border: 1px solid currentcolor; 922 | } 923 | 924 | .button-outline::before { 925 | content: ''; 926 | display: block; 927 | position: absolute; 928 | z-index: -1; 929 | top: -1px; 930 | right: -1px; 931 | bottom: -1px; 932 | left: -1px; 933 | border: 1px solid transparent; 934 | background-color: currentcolor; 935 | border-radius: 3px; 936 | opacity: 0; 937 | } 938 | 939 | .button-outline:hover { 940 | box-shadow: none; 941 | } 942 | 943 | .button-outline:hover::before, 944 | .button-outline:focus::before { 945 | opacity: .125; 946 | } 947 | 948 | .button-outline:focus { 949 | outline: none; 950 | border: 1px solid currentcolor; 951 | box-shadow: 0 0 0 2px; 952 | } 953 | 954 | .button-outline:active, 955 | .button-outline.is-active { 956 | box-shadow: inset 0 1px 5px 0, 0 0 1px; 957 | } 958 | 959 | .button-outline:disabled, 960 | .button-outline.is-disabled { 961 | opacity: .5; 962 | } 963 | 964 | .button-transparent { 965 | position: relative; 966 | z-index: 2; 967 | color: inherit; 968 | background-color: transparent; 969 | border-radius: 0; 970 | border: 1px solid transparent; 971 | } 972 | 973 | .button-transparent::before { 974 | content: ''; 975 | display: block; 976 | position: absolute; 977 | z-index: -1; 978 | top: -1px; 979 | right: -1px; 980 | bottom: -1px; 981 | left: -1px; 982 | border: 1px solid transparent; 983 | background-color: currentcolor; 984 | opacity: 0; 985 | } 986 | 987 | .button-transparent:hover { 988 | box-shadow: none; 989 | } 990 | 991 | .button-transparent:hover::before, 992 | .button-transparent:focus::before { 993 | opacity: .09375; 994 | } 995 | 996 | .button-transparent:focus { 997 | outline: none; 998 | border-color: transparent; 999 | box-shadow: 0 0 0 2px; 1000 | } 1001 | 1002 | .button-transparent:active, 1003 | .button-transparent.is-active { 1004 | box-shadow: none; 1005 | } 1006 | 1007 | .button-transparent:active::before, 1008 | .button-transparent.is-active::before { 1009 | opacity: .0625; 1010 | } 1011 | 1012 | .button-transparent:disabled, 1013 | .button-transparent.is-disabled { 1014 | opacity: .5; 1015 | } 1016 | 1017 | .bg-cover { background-size: cover } 1018 | .bg-contain { background-size: contain } 1019 | 1020 | .bg-center { background-position: center } 1021 | .bg-top { background-position: top } 1022 | .bg-right { background-position: right } 1023 | .bg-bottom { background-position: bottom } 1024 | .bg-left { background-position: left } 1025 | 1026 | .border { 1027 | border-style: solid; 1028 | border-width: 1px; 1029 | border-color: rgba(0,0,0,.125); 1030 | } 1031 | 1032 | .border-top { 1033 | border-top-style: solid; 1034 | border-top-width: 1px; 1035 | border-top-color: rgba(0,0,0,.125); 1036 | } 1037 | 1038 | .border-right { 1039 | border-right-style: solid; 1040 | border-right-width: 1px; 1041 | border-right-color: rgba(0,0,0,.125); 1042 | } 1043 | 1044 | .border-bottom { 1045 | border-bottom-style: solid; 1046 | border-bottom-width: 1px; 1047 | border-bottom-color: rgba(0,0,0,.125); 1048 | } 1049 | 1050 | .border-left { 1051 | border-left-style: solid; 1052 | border-left-width: 1px; 1053 | border-left-color: rgba(0,0,0,.125); 1054 | } 1055 | 1056 | .rounded { border-radius: 3px } 1057 | .circle { border-radius: 50% } 1058 | 1059 | .rounded-top { border-radius: 3px 3px 0 0 } 1060 | .rounded-right { border-radius: 0 3px 3px 0 } 1061 | .rounded-bottom { border-radius: 0 0 3px 3px } 1062 | .rounded-left { border-radius: 3px 0 0 3px } 1063 | 1064 | .not-rounded { border-radius: 0 } 1065 | 1066 | .black, .dark-gray { color: #111 } 1067 | .gray, .mid-gray { color: #aaa } 1068 | .silver, .light-gray { color: #ddd } 1069 | .white { color: #fff } 1070 | 1071 | .aqua { color: #7fdbff } 1072 | .blue { color: #0074d9 } 1073 | .navy { color: #001f3f } 1074 | .teal { color: #39cccc } 1075 | .green { color: #2ecc40 } 1076 | .olive { color: #3d9970 } 1077 | .lime { color: #01ff70 } 1078 | 1079 | .yellow { color: #ffdc00 } 1080 | .orange { color: #ff851b } 1081 | .red { color: #ff4136 } 1082 | .fuchsia { color: #f012be } 1083 | .purple { color: #b10dc9 } 1084 | .maroon { color: #85144b } 1085 | .bg-black, .bg-dark-gray { background-color: #111 } 1086 | .bg-gray, .bg-mid-gray { background-color: #aaa } 1087 | .bg-silver, .bg-light-gray { background-color: #ddd } 1088 | .bg-white { background-color: #fff } 1089 | 1090 | .bg-aqua { background-color: #7fdbff } 1091 | .bg-blue { background-color: #0074d9 } 1092 | .bg-navy { background-color: #001f3f } 1093 | .bg-teal { background-color: #39cccc } 1094 | .bg-green { background-color: #2ecc40 } 1095 | .bg-olive { background-color: #3d9970 } 1096 | .bg-lime { background-color: #01ff70 } 1097 | 1098 | .bg-yellow { background-color: #ffdc00 } 1099 | .bg-orange { background-color: #ff851b } 1100 | .bg-red { background-color: #ff4136 } 1101 | .bg-fuchsia { background-color: #f012be } 1102 | .bg-purple { background-color: #b10dc9 } 1103 | .bg-maroon { background-color: #85144b } 1104 | 1105 | .bg-darken-1 { background-color: rgba(0,0,0,.0625) } 1106 | .bg-darken-2 { background-color: rgba(0,0,0,.125) } 1107 | .bg-darken-3 { background-color: rgba(0,0,0,.25) } 1108 | .bg-darken-4 { background-color: rgba(0,0,0,.5) } 1109 | .border-black { border-color: #111 } 1110 | .border-gray { border-color: #aaa } 1111 | .border-silver { border-color: #ddd } 1112 | .border-white { border-color: #fff } 1113 | 1114 | .border-aqua { border-color: #7fdbff } 1115 | .border-blue { border-color: #0074d9 } 1116 | .border-navy { border-color: #001f3f } 1117 | .border-teal { border-color: #39cccc } 1118 | .border-green { border-color: #2ecc40 } 1119 | .border-olive { border-color: #3d9970 } 1120 | .border-lime { border-color: #01ff70 } 1121 | 1122 | .border-yellow { border-color: #ffdc00 } 1123 | .border-orange { border-color: #ff851b } 1124 | .border-red { border-color: #ff4136 } 1125 | .border-fuchsia { border-color: #f012be } 1126 | .border-purple { border-color: #b10dc9 } 1127 | .border-maroon { border-color: #85144b } 1128 | 1129 | .border-darken-1 { border-color: rgba(0,0,0,.0625) } 1130 | .border-darken-2 { border-color: rgba(0,0,0,.125) } 1131 | .border-darken-3 { border-color: rgba(0,0,0,.25) } 1132 | .border-darken-4 { border-color: rgba(0,0,0,.5) } 1133 | .muted { opacity: .5 } 1134 | .color-inherit { color: inherit } 1135 | 1136 | -------------------------------------------------------------------------------- /client/stylesheets/style.css: -------------------------------------------------------------------------------- 1 | /*======================== 2 | --------Colors--------*/ 3 | 4 | .welbypurple { 5 | color: #13146B; 6 | } 7 | 8 | .bg-welbypurple { 9 | background-color: #13146B; 10 | } 11 | 12 | .b--welbypurple { 13 | border-color: #13146B; 14 | } 15 | 16 | .light-Gray { 17 | background-color: #FAFAFA; 18 | } 19 | 20 | 21 | .bg-light-Purple { 22 | background-color: #ACAECA; 23 | } 24 | 25 | .light-Teal { 26 | color: #50C7CB; 27 | } 28 | 29 | 30 | /*======================== 31 | --------Generals--------*/ 32 | 33 | .mb-down { 34 | margin-bottom: -0.4rem; 35 | } 36 | 37 | 38 | a { 39 | text-decoration: none; 40 | } 41 | 42 | a:hover { 43 | text-decoration: none; 44 | } 45 | 46 | li { 47 | text-decoration: none; 48 | } 49 | 50 | .lato { 51 | font-family: 'Lato'; 52 | } 53 | 54 | .meri { 55 | font-family: 'Merriweather'; 56 | } 57 | 58 | .l-space { 59 | letter-spacing: .09em; 60 | } 61 | 62 | 63 | 64 | 65 | 66 | /*======================== 67 | --------SIGNUP--------*/ 68 | 69 | .lrg { 70 | font-size: 2.3rem; 71 | font-family: 'Lato'; 72 | font-weight: 300; 73 | color: #FE8F5D; 74 | letter-spacing: .2rem; 75 | } 76 | 77 | .med { 78 | font-size: 1.5rem; 79 | font-family: 'Lato'; 80 | font-weight: 300; 81 | color: #FFC6AE; 82 | } 83 | .sml { 84 | font-family: 'Lato'; 85 | font-weight: 300; 86 | } 87 | 88 | .name { 89 | font-family: 'Lato'; 90 | font-weight: 300; 91 | color: #188683; 92 | letter-spacing: .1rem; 93 | } 94 | 95 | .blu { 96 | color: #3CADB1; 97 | } 98 | 99 | .blu1 { 100 | background-color: #E7FFF4; 101 | } 102 | 103 | .input { 104 | display: flex; 105 | align-items: center; 106 | } 107 | 108 | #email { 109 | height: 50px; 110 | width: 60%; 111 | background: #FFF; 112 | font-family: 'Lato'; 113 | font-weight: normal; 114 | color: #3CADB1; 115 | letter-spacing: 1px; 116 | text-indent: 5%; 117 | border: solid 1px; 118 | border-color: #3CADB1; 119 | border-radius: 3px 0 0 3px; 120 | } 121 | 122 | 123 | #submit { 124 | height: 50px; 125 | width: 40%; 126 | background: #3CADB1; 127 | font-family: 'Lato'; 128 | font-weight: normal; 129 | color: #FFF; 130 | letter-spacing: 1px; 131 | border-radius: 0 3px 3px 0; 132 | cursor: pointer; 133 | transition: all .2s ease-in-out; 134 | } 135 | 136 | .grow:hover { transform: scale(1.1); } 137 | 138 | #submit:hover { 139 | background: #373C83; 140 | transform: scale(1.06) 141 | } 142 | # { transition: all .2s ease-in-out; } 143 | .grow:hover { transform: scale(1.2); } 144 | 145 | input:focus { 146 | outline: 2px solid #3CADB1; 147 | box-shadow: 0 0 1px #373C83; 148 | } 149 | 150 | 151 | 152 | 153 | /*======================== 154 | --------FADE-INS--------*/ 155 | 156 | .tagline { 157 | -webkit-animation: fadein 4s; /* Safari and Chrome */ 158 | -moz-animation: fadein 4s; /* Firefox */ 159 | -ms-animation: fadein 4s; /* Internet Explorer */ 160 | -o-animation: fadein 4s; /* Opera */ 161 | animation: fadein 4s; 162 | } 163 | 164 | .backupline { 165 | -webkit-animation: fadein 4.2s; /* Safari and Chrome */ 166 | -moz-animation: fadein 4.2s; /* Firefox */ 167 | -ms-animation: fadein 4.2s; /* Internet Explorer */ 168 | -o-animation: fadein 4.2s; /* Opera */ 169 | animation: fadein 4.2s; 170 | } 171 | 172 | .principles { 173 | -webkit-animation: fadein 5s; /* Safari and Chrome */ 174 | -moz-animation: fadein 5s; /* Firefox */ 175 | -ms-animation: fadein 5s; /* Internet Explorer */ 176 | -o-animation: fadein 5s; /* Opera */ 177 | animation: fadein 5s; 178 | } 179 | 180 | @keyframes fadein { 181 | from { opacity: 0; } 182 | to { opacity: 1; } 183 | } 184 | 185 | /* Firefox */ 186 | @-moz-keyframes fadein { 187 | from { opacity: 0; } 188 | to { opacity: 1; } 189 | } 190 | 191 | /* Safari and Chrome */ 192 | @-webkit-keyframes fadein { 193 | from { opacity: 0; } 194 | to { opacity: 1; } 195 | } 196 | 197 | /* Internet Explorer */ 198 | @-ms-keyframes fadein { 199 | from { opacity: 0; } 200 | to { opacity: 1; } 201 | } 202 | 203 | 204 | /*======================== 205 | --------FADE-IN COLORS--------*/ 206 | 207 | .purple-fade:hover { 208 | transition: all .2s ease-in-out; 209 | color: #373C83 ; 210 | 211 | } 212 | 213 | .light-purple-fade:hover { 214 | transition: all .2s ease-in-out; 215 | color: #FAFAFA ; 216 | 217 | } 218 | 219 | .light-purple-fade:hover { 220 | transition: all .2s ease-in-out; 221 | color: #FAFAFA ; 222 | 223 | } 224 | 225 | 226 | 227 | @media screen and (min-width: 42em) { 228 | 229 | .fixed-nav-bar-m { 230 | position: fixed; 231 | top: 0; 232 | left: 0; 233 | z-index: 9999; 234 | width: 100%; 235 | opacity: .95; 236 | background-color: #fff; 237 | }} 238 | 239 | 240 | 241 | 242 | .blur { 243 | -webkit-filter: blur(10px); 244 | -moz-filter: blur(10px); 245 | -ms-filter: blur(10px); 246 | -o-filter: blur(10px); 247 | filter: blur(10px); 248 | } 249 | 250 | 251 | /*I'm trying to add animation. Lemme know if ya'll think it's tacky. */ 252 | 253 | #swap { 254 | vertical-align: top; 255 | width: 0; 256 | height: 1em; 257 | /* needed. px, em or any other */ 258 | } 259 | 260 | #swap > span { 261 | position: absolute; 262 | } 263 | 264 | body { margin: 0 } 265 | img { max-width: 100% } 266 | svg { max-height: 100% } 267 | 268 | 269 | -------------------------------------------------------------------------------- /client/stylesheets/tachyons.css: -------------------------------------------------------------------------------- 1 | /* Tachyons */ 2 | 3 | /*! normalize.css v2.1.2 | MIT License | git.io/normalize */ 4 | 5 | /* ========================================================================== 6 | HTML5 display definitions 7 | ========================================================================== */ 8 | 9 | /** 10 | * Correct `block` display not defined in IE 8/9. 11 | */ 12 | 13 | article, 14 | aside, 15 | details, 16 | figcaption, 17 | figure, 18 | footer, 19 | header, 20 | hgroup, 21 | main, 22 | nav, 23 | section, 24 | summary { 25 | display: block; 26 | } 27 | 28 | /** 29 | * Correct `inline-block` display not defined in IE 8/9. 30 | */ 31 | 32 | audio, 33 | canvas, 34 | video { 35 | display: inline-block; 36 | } 37 | 38 | /** 39 | * Prevent modern browsers from displaying `audio` without controls. 40 | * Remove excess height in iOS 5 devices. 41 | */ 42 | 43 | audio:not([controls]) { 44 | display: none; 45 | height: 0; 46 | } 47 | 48 | /** 49 | * Address `[hidden]` styling not present in IE 8/9. 50 | * Hide the `template` element in IE, Safari, and Firefox < 22. 51 | */ 52 | 53 | [hidden], 54 | template { 55 | display: none; 56 | } 57 | 58 | /* ========================================================================== 59 | Base 60 | ========================================================================== */ 61 | 62 | /** 63 | * 1. Set default font family to sans-serif. 64 | * 2. Prevent iOS text size adjust after orientation change, without disabling 65 | * user zoom. 66 | */ 67 | 68 | html { 69 | font-family: sans-serif; 70 | /* 1 */ 71 | -ms-text-size-adjust: 100%; 72 | /* 2 */ 73 | -webkit-text-size-adjust: 100%; 74 | /* 2 */ 75 | } 76 | 77 | /** 78 | * Remove default margin. 79 | */ 80 | 81 | body { 82 | margin: 0; 83 | } 84 | 85 | /* ========================================================================== 86 | Links 87 | ========================================================================== */ 88 | 89 | /** 90 | * Remove the gray background color from active links in IE 10. 91 | */ 92 | 93 | a { 94 | background: transparent; 95 | } 96 | 97 | /** 98 | * Address `outline` inconsistency between Chrome and other browsers. 99 | */ 100 | 101 | a:focus { 102 | outline: thin dotted; 103 | } 104 | 105 | /** 106 | * Improve readability when focused and also mouse hovered in all browsers. 107 | */ 108 | 109 | a:active, 110 | a:hover { 111 | outline: 0; 112 | } 113 | 114 | /* ========================================================================== 115 | Typography 116 | ========================================================================== */ 117 | 118 | /** 119 | * Address variable `h1` font-size and margin within `section` and `article` 120 | * contexts in Firefox 4+, Safari 5, and Chrome. 121 | */ 122 | 123 | h1 { 124 | margin: 0.67em 0; 125 | } 126 | 127 | /** 128 | * Address styling not present in IE 8/9, Safari 5, and Chrome. 129 | */ 130 | 131 | abbr[title] { 132 | border-bottom: 1px dotted; 133 | } 134 | 135 | /** 136 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 137 | */ 138 | 139 | b, 140 | strong { 141 | font-weight: bold; 142 | } 143 | 144 | /** 145 | * Address styling not present in Safari 5 and Chrome. 146 | */ 147 | 148 | dfn { 149 | font-style: italic; 150 | } 151 | 152 | /** 153 | * Address differences between Firefox and other browsers. 154 | */ 155 | 156 | hr { 157 | box-sizing: content-box; 158 | height: 0; 159 | } 160 | 161 | /** 162 | * Address styling not present in IE 8/9. 163 | */ 164 | 165 | mark { 166 | background: #ff0; 167 | color: #000; 168 | } 169 | 170 | /** 171 | * Correct font family set oddly in Safari 5 and Chrome. 172 | */ 173 | 174 | code, 175 | kbd, 176 | pre, 177 | samp { 178 | font-family: monospace, serif; 179 | font-size: 1em; 180 | } 181 | 182 | /** 183 | * Improve readability of pre-formatted text in all browsers. 184 | */ 185 | 186 | pre { 187 | white-space: pre-wrap; 188 | } 189 | 190 | /** 191 | * Set consistent quote types. 192 | */ 193 | 194 | q { 195 | quotes: "\201C" "\201D" "\2018" "\2019"; 196 | } 197 | 198 | /** 199 | * Address inconsistent and variable font size in all browsers. 200 | */ 201 | 202 | small { 203 | font-size: 80%; 204 | } 205 | 206 | /** 207 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 208 | */ 209 | 210 | sub, 211 | sup { 212 | font-size: 75%; 213 | line-height: 0; 214 | position: relative; 215 | vertical-align: baseline; 216 | } 217 | 218 | sup { 219 | top: -0.5em; 220 | } 221 | 222 | sub { 223 | bottom: -0.25em; 224 | } 225 | 226 | /* ========================================================================== 227 | Embedded content 228 | ========================================================================== */ 229 | 230 | /** 231 | * Remove border when inside `a` element in IE 8/9. 232 | */ 233 | 234 | img { 235 | border: 0; 236 | } 237 | 238 | /** 239 | * Correct overflow displayed oddly in IE 9. 240 | */ 241 | 242 | svg:not(:root) { 243 | overflow: hidden; 244 | } 245 | 246 | /* ========================================================================== 247 | Figures 248 | ========================================================================== */ 249 | 250 | /** 251 | * Address margin not present in IE 8/9 and Safari 5. 252 | */ 253 | 254 | figure { 255 | margin: 0; 256 | } 257 | 258 | /* ========================================================================== 259 | Forms 260 | ========================================================================== */ 261 | 262 | /** 263 | * Define consistent border, margin, and padding. 264 | */ 265 | 266 | fieldset { 267 | border: 1px solid #c0c0c0; 268 | margin: 0 2px; 269 | padding: 0.35em 0.625em 0.75em; 270 | } 271 | 272 | /** 273 | * 1. Correct `color` not being inherited in IE 8/9. 274 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 275 | */ 276 | 277 | legend { 278 | border: 0; 279 | /* 1 */ 280 | padding: 0; 281 | /* 2 */ 282 | } 283 | 284 | /** 285 | * 1. Correct font family not being inherited in all browsers. 286 | * 2. Correct font size not being inherited in all browsers. 287 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 288 | */ 289 | 290 | button, 291 | input, 292 | select, 293 | textarea { 294 | font-family: inherit; 295 | /* 1 */ 296 | font-size: 100%; 297 | /* 2 */ 298 | margin: 0; 299 | /* 3 */ 300 | } 301 | 302 | /** 303 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 304 | * the UA stylesheet. 305 | */ 306 | 307 | button, 308 | input { 309 | line-height: normal; 310 | } 311 | 312 | /** 313 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 314 | * All other form control elements do not inherit `text-transform` values. 315 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. 316 | * Correct `select` style inheritance in Firefox 4+ and Opera. 317 | */ 318 | 319 | button, 320 | select { 321 | text-transform: none; 322 | } 323 | 324 | /** 325 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 326 | * and `video` controls. 327 | * 2. Correct inability to style clickable `input` types in iOS. 328 | * 3. Improve usability and consistency of cursor style between image-type 329 | * `input` and others. 330 | */ 331 | 332 | button, 333 | html input[type="button"], 334 | input[type="reset"], 335 | input[type="submit"] { 336 | -webkit-appearance: button; 337 | /* 2 */ 338 | cursor: pointer; 339 | /* 3 */ 340 | } 341 | 342 | /** 343 | * Re-set default cursor for disabled elements. 344 | */ 345 | 346 | button[disabled], 347 | html input[disabled] { 348 | cursor: default; 349 | } 350 | 351 | /** 352 | * 1. Address box sizing set to `content-box` in IE 8/9. 353 | * 2. Remove excess padding in IE 8/9. 354 | */ 355 | 356 | input[type="checkbox"], 357 | input[type="radio"] { 358 | box-sizing: border-box; 359 | /* 1 */ 360 | padding: 0; 361 | /* 2 */ 362 | } 363 | 364 | /** 365 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 366 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 367 | * (include `-moz` to future-proof). 368 | */ 369 | 370 | input[type="search"] { 371 | -webkit-appearance: textfield; 372 | /* 1 */ 373 | /* 2 */ 374 | box-sizing: content-box; 375 | } 376 | 377 | /** 378 | * Remove inner padding and search cancel button in Safari 5 and Chrome 379 | * on OS X. 380 | */ 381 | 382 | input[type="search"]::-webkit-search-cancel-button, 383 | input[type="search"]::-webkit-search-decoration { 384 | -webkit-appearance: none; 385 | } 386 | 387 | /** 388 | * Remove inner padding and border in Firefox 4+. 389 | */ 390 | 391 | button::-moz-focus-inner, 392 | input::-moz-focus-inner { 393 | border: 0; 394 | padding: 0; 395 | } 396 | 397 | /** 398 | * 1. Remove default vertical scrollbar in IE 8/9. 399 | * 2. Improve readability and alignment in all browsers. 400 | */ 401 | 402 | textarea { 403 | overflow: auto; 404 | /* 1 */ 405 | vertical-align: top; 406 | /* 2 */ 407 | } 408 | 409 | /* ========================================================================== 410 | Tables 411 | ========================================================================== */ 412 | 413 | /** 414 | * Remove most spacing between table cells. 415 | */ 416 | 417 | table { 418 | border-collapse: collapse; 419 | border-spacing: 0; 420 | } 421 | 422 | /* 423 | Custom Media Queries 424 | These custom media queries can be referenced like so: 425 | 426 | @media (--breakpoint-medium) { 427 | .bg-red { background-color: red; } 428 | } 429 | 430 | */ 431 | 432 | /* 433 | 434 | COLOR VARIABLES 435 | 436 | Variables to set colors for 437 | color, background-color, and border-color 438 | 439 | */ 440 | 441 | /* variables */ 442 | 443 | 444 | 445 | /* 446 | 447 | BASE 448 | 449 | */ 450 | 451 | html, 452 | body { 453 | height: 100%; 454 | } 455 | 456 | /* 457 | 458 | BOX SIZING 459 | 460 | A saner box-model. 461 | Only applied to unqualified elements where this model makes sense. 462 | 463 | Apply .border-box where needed. 464 | 465 | */ 466 | 467 | nav, 468 | main, 469 | section, 470 | article, 471 | aside, 472 | header, 473 | footer, 474 | div, 475 | details, 476 | summary, 477 | form, 478 | fieldset, 479 | textarea, 480 | input[type="text"], 481 | input[type="tel"], 482 | input[type="url"], 483 | input[type="email"], 484 | input[type="search"], 485 | input[type="number"], 486 | input[type="password"], 487 | nav:before, 488 | main:before, 489 | section:before, 490 | article:before, 491 | aside:before, 492 | header:before, 493 | footer:before, 494 | div:before, 495 | details:before, 496 | summary:before, 497 | form:before, 498 | fieldset:before, 499 | textarea:before, 500 | input[type="text"]:before, 501 | input[type="tel"]:before, 502 | input[type="url"]:before, 503 | input[type="email"]:before, 504 | input[type="search"]:before, 505 | input[type="number"]:before, 506 | input[type="password"]:before, 507 | nav:after, 508 | main:after, 509 | section:after, 510 | article:after, 511 | aside:after, 512 | header:after, 513 | footer:after, 514 | div:after, 515 | details:after, 516 | summary:after, 517 | form:after, 518 | fieldset:after, 519 | textarea:after, 520 | input[type="text"]:after, 521 | input[type="tel"]:after, 522 | input[type="url"]:after, 523 | input[type="email"]:after, 524 | input[type="search"]:after, 525 | input[type="number"]:after, 526 | input[type="password"]:after, 527 | .border-box, 528 | .border-box:before, 529 | .border-box:after { 530 | box-sizing: border-box; 531 | } 532 | 533 | /* 534 | 535 | BACKGROUND SIZE 536 | 537 | Base: 538 | bg = background-size 539 | 540 | Modifiers: 541 | cv = cover 542 | cn = contain 543 | 544 | Media Query Extensions: 545 | -ns = not-small 546 | -m = medium 547 | -l = large 548 | 549 | */ 550 | 551 | .bg-cv { 552 | background-size: cover; 553 | } 554 | 555 | .bg-cn { 556 | background-size: contain; 557 | } 558 | 559 | @media screen and (min-width: 42em) { 560 | .bg-cv-ns { 561 | background-size: cover; 562 | } 563 | 564 | .bg-cn-ns { 565 | background-size: contain; 566 | } 567 | } 568 | 569 | @media screen and (min-width: 42em) and (max-width: 64em) { 570 | .bg-cv-m { 571 | background-size: cover; 572 | } 573 | 574 | .bg-cn-m { 575 | background-size: contain; 576 | } 577 | } 578 | 579 | @media screen and (min-width: 64em) { 580 | .bg-cv-l { 581 | background-size: cover; 582 | } 583 | 584 | .bg-cn-l { 585 | background-size: contain; 586 | } 587 | } 588 | 589 | /* 590 | 591 | BORDER BASE 592 | 593 | Use border-base in combination with setting text color 594 | or by using extensions from border-color module. 595 | 596 | Examples: 597 | To set a border of blue on all sides: 598 |
599 | 600 | To set a border on top of orange 601 |
602 | 603 | Base: 604 | b = border 605 | 606 | Modifiers: 607 | n = none, no border-style or border-width 608 | a = all 609 | t = top 610 | r = right 611 | b = bottom 612 | l = left 613 | 614 | Media Query Extensions: 615 | -ns = not-small 616 | -m = medium 617 | -l = large 618 | 619 | */ 620 | 621 | /* The extra `.bn` is required to boost the specificity, which is needed 622 | * sometimes if you are setting the border to 0. */ 623 | 624 | .bn { 625 | border-style: solid; 626 | border-width: 0; 627 | } 628 | 629 | .ba { 630 | border-style: solid; 631 | border-width: 1px; 632 | } 633 | 634 | .bt { 635 | border-top-style: solid; 636 | border-top-width: 1px; 637 | } 638 | 639 | .br { 640 | border-right-style: solid; 641 | border-right-width: 1px; 642 | } 643 | 644 | .bb { 645 | border-bottom-style: solid; 646 | border-bottom-width: 1px; 647 | } 648 | 649 | .bl { 650 | border-left-style: solid; 651 | border-left-width: 1px; 652 | } 653 | 654 | .bda { 655 | border-style: dotted; 656 | border-width: 1px; 657 | } 658 | 659 | .bdt { 660 | border-top-style: dotted; 661 | border-top-width: 1px; 662 | } 663 | 664 | .bdr { 665 | border-right-style: dotted; 666 | border-right-width: 1px; 667 | } 668 | 669 | .bdb { 670 | border-bottom-style: dotted; 671 | border-bottom-width: 1px; 672 | } 673 | 674 | .bdl { 675 | border-left-style: dotted; 676 | border-left-width: 1px; 677 | } 678 | 679 | @media screen and (min-width: 42em) { 680 | .bn-ns { 681 | border-style: solid; 682 | border-width: 0; 683 | } 684 | 685 | .ba-ns { 686 | border-style: solid; 687 | border-width: 1px; 688 | } 689 | 690 | .bt-ns { 691 | border-top-style: solid; 692 | border-top-width: 1px; 693 | } 694 | 695 | .br-ns { 696 | border-right-style: solid; 697 | border-right-width: 1px; 698 | } 699 | 700 | .bb-ns { 701 | border-bottom-style: solid; 702 | border-bottom-width: 1px; 703 | } 704 | 705 | .bl-ns { 706 | border-left-style: solid; 707 | border-left-width: 1px; 708 | } 709 | 710 | .bda-ns { 711 | border-style: dotted; 712 | border-width: 1px; 713 | } 714 | 715 | .bdt-ns { 716 | border-top-style: dotted; 717 | border-top-width: 1px; 718 | } 719 | 720 | .bdr-ns { 721 | border-right-style: dotted; 722 | border-right-width: 1px; 723 | } 724 | 725 | .bdb-ns { 726 | border-bottom-style: dotted; 727 | border-bottom-width: 1px; 728 | } 729 | 730 | .bdl-ns { 731 | border-left-style: dotted; 732 | border-left-width: 1px; 733 | } 734 | } 735 | 736 | @media screen and (min-width: 42em) and (max-width: 64em) { 737 | .bn-m { 738 | border-style: solid; 739 | border-width: 0; 740 | } 741 | 742 | .ba-m { 743 | border-style: solid; 744 | border-width: 1px; 745 | } 746 | 747 | .bt-m { 748 | border-top-style: solid; 749 | border-top-width: 1px; 750 | } 751 | 752 | .br-m { 753 | border-right-style: solid; 754 | border-right-width: 1px; 755 | } 756 | 757 | .bb-m { 758 | border-bottom-style: solid; 759 | border-bottom-width: 1px; 760 | } 761 | 762 | .bl-m { 763 | border-left-style: solid; 764 | border-left-width: 1px; 765 | } 766 | 767 | .bda-m { 768 | border-style: dotted; 769 | border-width: 1px; 770 | } 771 | 772 | .bdt-m { 773 | border-top-style: dotted; 774 | border-top-width: 1px; 775 | } 776 | 777 | .bdr-m { 778 | border-right-style: dotted; 779 | border-right-width: 1px; 780 | } 781 | 782 | .bdb-m { 783 | border-bottom-style: dotted; 784 | border-bottom-width: 1px; 785 | } 786 | 787 | .bdl-m { 788 | border-left-style: dotted; 789 | border-left-width: 1px; 790 | } 791 | } 792 | 793 | @media screen and (min-width: 64em) { 794 | .bn-l { 795 | border-style: solid; 796 | border-width: 0; 797 | } 798 | 799 | .ba-l { 800 | border-style: solid; 801 | border-width: 1px; 802 | } 803 | 804 | .bt-l { 805 | border-top-style: solid; 806 | border-top-width: 1px; 807 | } 808 | 809 | .br-l { 810 | border-right-style: solid; 811 | border-right-width: 1px; 812 | } 813 | 814 | .bb-l { 815 | border-bottom-style: solid; 816 | border-bottom-width: 1px; 817 | } 818 | 819 | .bl-l { 820 | border-left-style: solid; 821 | border-left-width: 1px; 822 | } 823 | 824 | .bda-l { 825 | border-style: dotted; 826 | border-width: 1px; 827 | } 828 | 829 | .bdt-l { 830 | border-top-style: dotted; 831 | border-top-width: 1px; 832 | } 833 | 834 | .bdr-l { 835 | border-right-style: dotted; 836 | border-right-width: 1px; 837 | } 838 | 839 | .bdb-l { 840 | border-bottom-style: dotted; 841 | border-bottom-width: 1px; 842 | } 843 | 844 | .bdl-l { 845 | border-left-style: dotted; 846 | border-left-width: 1px; 847 | } 848 | } 849 | 850 | /* 851 | 852 | BORDER COLORS 853 | 854 | Use in cobmination with the _borders.css module 855 | Or for more flexibility the _border-styles.css and _border-widths.css modules 856 | 857 | Base: 858 | b-- = border 859 | 860 | Modifiers: 861 | Add a border color. There is a one to one mapping of color values 862 | in the _colors.css module. 863 | 864 | */ 865 | 866 | .b--black { 867 | border-color: #000; 868 | } 869 | 870 | .b--near-black { 871 | border-color: #111; 872 | } 873 | 874 | .b--dark-gray { 875 | border-color: #333; 876 | } 877 | 878 | .b--mid-gray { 879 | border-color: #555; 880 | } 881 | 882 | .b--gray { 883 | border-color: #777; 884 | } 885 | 886 | .b--silver { 887 | border-color: #999; 888 | } 889 | 890 | .b--light-silver { 891 | border-color: #aaa; 892 | } 893 | 894 | .b--light-gray { 895 | border-color: #eee; 896 | } 897 | 898 | .b--near-white { 899 | border-color: #f4f4f4; 900 | } 901 | 902 | .b--white { 903 | border-color: #fff; 904 | } 905 | 906 | .b--white-10 { 907 | border-color: hsla(0, 0, 100%, .1); 908 | } 909 | 910 | .b--white-20 { 911 | border-color: hsla(0, 0, 100%, .2); 912 | } 913 | 914 | .b--white-25 { 915 | border-color: hsla(0, 0, 100%, .25); 916 | } 917 | 918 | .b--white-30 { 919 | border-color: hsla(0, 0, 100%, .3); 920 | } 921 | 922 | .b--white-40 { 923 | border-color: hsla(0, 0, 100%, .4); 924 | } 925 | 926 | .b--white-50 { 927 | border-color: hsla(0, 0, 100%, .5); 928 | } 929 | 930 | .b--white-60 { 931 | border-color: hsla(0, 0, 100%, .6); 932 | } 933 | 934 | .b--white-70 { 935 | border-color: hsla(0, 0, 100%, .7); 936 | } 937 | 938 | .b--white-75 { 939 | border-color: hsla(0, 0, 100%, .75); 940 | } 941 | 942 | .b--white-80 { 943 | border-color: hsla(0, 0, 100%, .8); 944 | } 945 | 946 | .b--white-90 { 947 | border-color: hsla(0, 0, 100%, .9); 948 | } 949 | 950 | .b--black-10 { 951 | border-color: hsla(0, 0, 0, .1); 952 | } 953 | 954 | .b--black-20 { 955 | border-color: hsla(0, 0, 0, .2); 956 | } 957 | 958 | .b--black-25 { 959 | border-color: hsla(0, 0, 0, .25); 960 | } 961 | 962 | .b--black-30 { 963 | border-color: hsla(0, 0, 0, .3); 964 | } 965 | 966 | .b--black-40 { 967 | border-color: hsla(0, 0, 0, .4); 968 | } 969 | 970 | .b--black-50 { 971 | border-color: hsla(0, 0, 0, .5); 972 | } 973 | 974 | .b--black-60 { 975 | border-color: hsla(0, 0, 0, .6); 976 | } 977 | 978 | .b--black-70 { 979 | border-color: hsla(0, 0, 0, .7); 980 | } 981 | 982 | .b--black-75 { 983 | border-color: hsla(0, 0, 0, .75); 984 | } 985 | 986 | .b--black-80 { 987 | border-color: hsla(0, 0, 0, .8); 988 | } 989 | 990 | .b--black-90 { 991 | border-color: hsla(0, 0, 0, .9); 992 | } 993 | 994 | .b--blue { 995 | border-color: #0074D9; 996 | } 997 | 998 | .b--light-blue { 999 | border-color: #64a8ff; 1000 | } 1001 | 1002 | .b--lightest-blue { 1003 | border-color: #a2dfff; 1004 | } 1005 | 1006 | .b--dark-blue { 1007 | border-color: #0045a1; 1008 | } 1009 | 1010 | .b--darkest-blue { 1011 | border-color: #002f86; 1012 | } 1013 | 1014 | .b--yellow { 1015 | border-color: #fff93c; 1016 | } 1017 | 1018 | .b--light-yellow { 1019 | border-color: #fffa60; 1020 | } 1021 | 1022 | .b--lightest-yellow { 1023 | border-color: #fffca6; 1024 | } 1025 | 1026 | .b--dark-yellow { 1027 | border-color: #e2c100; 1028 | } 1029 | 1030 | .b--darkest-yellow { 1031 | border-color: #c4a600; 1032 | } 1033 | 1034 | .b--orange { 1035 | border-color: #FF851B; 1036 | } 1037 | 1038 | .b--light-orange { 1039 | border-color: #ffa942; 1040 | } 1041 | 1042 | .b--lightest-orange { 1043 | border-color: #ffc55d; 1044 | } 1045 | 1046 | .b--dark-orange { 1047 | border-color: #d05e00; 1048 | } 1049 | 1050 | .b--darkest-orange { 1051 | border-color: #b14400; 1052 | } 1053 | 1054 | .b--red { 1055 | border-color: #d82c2c; 1056 | } 1057 | 1058 | .b--light-red { 1059 | border-color: #f94f44; 1060 | } 1061 | 1062 | .b--lightest-red { 1063 | border-color: #ff6c5c; 1064 | } 1065 | 1066 | .b--dark-red { 1067 | border-color: #bd001a; 1068 | } 1069 | 1070 | .b--darkest-red { 1071 | border-color: #9d0003; 1072 | } 1073 | 1074 | .b--teal { 1075 | border-color: #27bfa8; 1076 | } 1077 | 1078 | .b--light-teal { 1079 | border-color: #4eddc5; 1080 | } 1081 | 1082 | .b--lightest-teal { 1083 | border-color: #6ffae0; 1084 | } 1085 | 1086 | .b--dark-teal { 1087 | border-color: #25a28f; 1088 | } 1089 | 1090 | .b--darkest-teal { 1091 | border-color: #008876; 1092 | } 1093 | 1094 | .b--green { 1095 | border-color: #3D9970; 1096 | } 1097 | 1098 | .b--light-green { 1099 | border-color: #5ab48a; 1100 | } 1101 | 1102 | .b--lightest-green { 1103 | border-color: #75d0a4; 1104 | } 1105 | 1106 | .b--dark-green { 1107 | border-color: #1e7f58; 1108 | } 1109 | 1110 | .b--darkest-green { 1111 | border-color: #006540; 1112 | } 1113 | 1114 | .b--pink { 1115 | border-color: #F012BE; 1116 | } 1117 | 1118 | .b--light-pink { 1119 | border-color: #ff57e8; 1120 | } 1121 | 1122 | .b--lightest-pink { 1123 | border-color: #ff81ff; 1124 | } 1125 | 1126 | .b--dark-pink { 1127 | border-color: #d100a3; 1128 | } 1129 | 1130 | .b--darkest-pink { 1131 | border-color: #b20088; 1132 | } 1133 | 1134 | .b--purple { 1135 | border-color: #980bc6; 1136 | } 1137 | 1138 | .b--light-purple { 1139 | border-color: #b536e2; 1140 | } 1141 | 1142 | .b--lightest-purple { 1143 | border-color: #d355ff; 1144 | } 1145 | 1146 | .b--dark-purple { 1147 | border-color: #7b00a9; 1148 | } 1149 | 1150 | .b--darkest-purple { 1151 | border-color: #5f008e; 1152 | } 1153 | 1154 | /* 1155 | 1156 | BORDER RADIUS 1157 | 1158 | Base: 1159 | br = border-radius 1160 | 1161 | Modifiers: 1162 | n = none 1163 | 1 = 1st step in scale 1164 | 2 = 2nd step in scale 1165 | 3 = 3rd step in scale 1166 | 4 = 4th step in scale 1167 | 5 = 5th step in scale 1168 | circ = circle 1169 | -100 = 100% 1170 | 1171 | Media Query Extensions: 1172 | -ns = not-small 1173 | -m = medium 1174 | -l = large 1175 | 1176 | */ 1177 | 1178 | .brn { 1179 | border-radius: 0; 1180 | } 1181 | 1182 | .br1 { 1183 | border-radius: .125rem; 1184 | } 1185 | 1186 | .br2 { 1187 | border-radius: .25rem; 1188 | } 1189 | 1190 | .br3 { 1191 | border-radius: .5rem; 1192 | } 1193 | 1194 | .br4 { 1195 | border-radius: 1rem; 1196 | } 1197 | 1198 | .br5 { 1199 | border-radius: 2rem; 1200 | } 1201 | 1202 | .br-circ { 1203 | border-radius: 9999px; 1204 | } 1205 | 1206 | .br-100 { 1207 | border-radius: 100%; 1208 | } 1209 | 1210 | @media screen and (min-width: 42em) { 1211 | .brn-ns { 1212 | border-radius: 0; 1213 | } 1214 | 1215 | .br1-ns { 1216 | border-radius: .125rem; 1217 | } 1218 | 1219 | .br2-ns { 1220 | border-radius: .25rem; 1221 | } 1222 | 1223 | .br3-ns { 1224 | border-radius: .5rem; 1225 | } 1226 | 1227 | .br4-ns { 1228 | border-radius: 1rem; 1229 | } 1230 | 1231 | .br5-ns { 1232 | border-radius: 2rem; 1233 | } 1234 | 1235 | .br-circ-ns { 1236 | border-radius: 9999px; 1237 | } 1238 | 1239 | .br-100-ns { 1240 | border-radius: 100%; 1241 | } 1242 | } 1243 | 1244 | @media screen and (min-width: 42em) and (max-width: 64em) { 1245 | .brn-m { 1246 | border-radius: 0; 1247 | } 1248 | 1249 | .br1-m { 1250 | border-radius: .125rem; 1251 | } 1252 | 1253 | .br2-m { 1254 | border-radius: .25rem; 1255 | } 1256 | 1257 | .br3-m { 1258 | border-radius: .5rem; 1259 | } 1260 | 1261 | .br4-m { 1262 | border-radius: 1rem; 1263 | } 1264 | 1265 | .br5-m { 1266 | border-radius: 2rem; 1267 | } 1268 | 1269 | .br-circ-m { 1270 | border-radius: 9999px; 1271 | } 1272 | 1273 | .br-100-m { 1274 | border-radius: 100%; 1275 | } 1276 | } 1277 | 1278 | @media screen and (min-width: 64em) { 1279 | .brn-l { 1280 | border-radius: 0; 1281 | } 1282 | 1283 | .br1-l { 1284 | border-radius: .125rem; 1285 | } 1286 | 1287 | .br2-l { 1288 | border-radius: .25rem; 1289 | } 1290 | 1291 | .br3-l { 1292 | border-radius: .5rem; 1293 | } 1294 | 1295 | .br4-l { 1296 | border-radius: 1rem; 1297 | } 1298 | 1299 | .br5-l { 1300 | border-radius: 2rem; 1301 | } 1302 | 1303 | .br-circ-l { 1304 | border-radius: 9999px; 1305 | } 1306 | 1307 | .br-100-l { 1308 | border-radius: 100%; 1309 | } 1310 | } 1311 | 1312 | /* 1313 | 1314 | BORDER STYLES 1315 | 1316 | Base: 1317 | bs = border-style 1318 | 1319 | Modifiers: 1320 | none = none 1321 | dotted = dotted 1322 | solid = solid 1323 | 1324 | Media Query Extensions: 1325 | -ns = not-small 1326 | -m = medium 1327 | -l = large 1328 | 1329 | */ 1330 | 1331 | .bs-none { 1332 | border-style: none; 1333 | } 1334 | 1335 | .bs-dotted { 1336 | border-style: dotted; 1337 | } 1338 | 1339 | .bs-solid { 1340 | border-style: solid; 1341 | } 1342 | 1343 | @media screen and (min-width: 42em) { 1344 | .bs-none-ns { 1345 | border-style: none; 1346 | } 1347 | 1348 | .bs-dotted-ns { 1349 | border-style: dotted; 1350 | } 1351 | 1352 | .bs-solid-ns { 1353 | border-style: solid; 1354 | } 1355 | } 1356 | 1357 | @media screen and (min-width: 42em) and (max-width: 64em) { 1358 | .bs-none-m { 1359 | border-style: none; 1360 | } 1361 | 1362 | .bs-dotted-m { 1363 | border-style: dotted; 1364 | } 1365 | 1366 | .bs-solid-m { 1367 | border-style: solid; 1368 | } 1369 | } 1370 | 1371 | @media screen and (min-width: 64em) { 1372 | .bs-none-l { 1373 | border-style: none; 1374 | } 1375 | 1376 | .bs-dotted-l { 1377 | border-style: dotted; 1378 | } 1379 | 1380 | .bs-solid-l { 1381 | border-style: solid; 1382 | } 1383 | } 1384 | 1385 | /* 1386 | 1387 | BORDER WIDTHS 1388 | 1389 | Base: 1390 | bw = border-width 1391 | 1392 | Modifiers: 1393 | 0 = 0 width border 1394 | 1 = 1st step in border-width scale 1395 | 2 = 2nd step in border-width scale 1396 | 3 = 3rd step in border-width scale 1397 | 4 = 4th step in border-width scale 1398 | 5 = 5th step in border-width scale 1399 | 1400 | Media Query Extensions: 1401 | -ns = not-small 1402 | -m = medium 1403 | -l = large 1404 | 1405 | */ 1406 | 1407 | .bw0 { 1408 | border-width: 0; 1409 | } 1410 | 1411 | .bw1 { 1412 | border-width: .125rem; 1413 | } 1414 | 1415 | .bw2 { 1416 | border-width: .25rem; 1417 | } 1418 | 1419 | .bw3 { 1420 | border-width: .5rem; 1421 | } 1422 | 1423 | .bw4 { 1424 | border-width: .75rem; 1425 | } 1426 | 1427 | .bw5 { 1428 | border-width: 1rem; 1429 | } 1430 | 1431 | @media screen and (min-width: 42em) { 1432 | .bw0-ns { 1433 | border-width: 0; 1434 | } 1435 | 1436 | .bw1-ns { 1437 | border-width: .125rem; 1438 | } 1439 | 1440 | .bw2-ns { 1441 | border-width: .25rem; 1442 | } 1443 | 1444 | .bw3-ns { 1445 | border-width: .5rem; 1446 | } 1447 | 1448 | .bw4-ns { 1449 | border-width: .75rem; 1450 | } 1451 | 1452 | .bw5-ns { 1453 | border-width: 1rem; 1454 | } 1455 | } 1456 | 1457 | @media screen and (min-width: 42em) and (max-width: 64em) { 1458 | .bw0-m { 1459 | border-width: 0; 1460 | } 1461 | 1462 | .bw1-m { 1463 | border-width: .125rem; 1464 | } 1465 | 1466 | .bw2-m { 1467 | border-width: .25rem; 1468 | } 1469 | 1470 | .bw3-m { 1471 | border-width: .5rem; 1472 | } 1473 | 1474 | .bw4-m { 1475 | border-width: .75rem; 1476 | } 1477 | 1478 | .bw5-m { 1479 | border-width: 1rem; 1480 | } 1481 | } 1482 | 1483 | @media screen and (min-width: 64em) { 1484 | .bw0-l { 1485 | border-width: 0; 1486 | } 1487 | 1488 | .bw1-l { 1489 | border-width: .125rem; 1490 | } 1491 | 1492 | .bw2-l { 1493 | border-width: .25rem; 1494 | } 1495 | 1496 | .bw3-l { 1497 | border-width: .5rem; 1498 | } 1499 | 1500 | .bw4-l { 1501 | border-width: .75rem; 1502 | } 1503 | 1504 | .bw5-l { 1505 | border-width: 1rem; 1506 | } 1507 | } 1508 | 1509 | /* 1510 | * 1511 | * btns.css 1512 | * Simple css utilities for building responsive buttons 1513 | * Author: mrmrs 1514 | * License: MIT 1515 | * 1516 | * */ 1517 | 1518 | /* 1519 | 1520 | Base .btn class 1521 | 1522 | Code: 1523 | Default button 1524 | 1525 | */ 1526 | 1527 | .btn, 1528 | .btn:link, 1529 | .btn:visited { 1530 | border-radius: .3em; 1531 | border-style: solid; 1532 | border-width: 1px; 1533 | color: #111; 1534 | display: inline-block; 1535 | letter-spacing: .15em; 1536 | text-decoration: none; 1537 | text-transform: uppercase; 1538 | transition: color .4s, background-color .4s, border .4s; 1539 | } 1540 | 1541 | .btn:hover { 1542 | color: #7FDBFF; 1543 | border: 1px solid #7FDBFF; 1544 | transition: background-color .3s, color .3s, border .3s; 1545 | } 1546 | 1547 | .btn:active { 1548 | color: #0074D9; 1549 | border: 1px solid #0074D9; 1550 | transition: background-color .3s, color .3s, border .3s; 1551 | } 1552 | 1553 | /* 1554 | 1555 | Sizes 1556 | 1557 | Small = .btn--s 1558 | Medium = .btn--m 1559 | Large = .btn--l 1560 | 1561 | Code: 1562 | 1563 | 1564 | 1565 | 1566 | */ 1567 | 1568 | .btn--s { 1569 | font-size: 12px; 1570 | } 1571 | 1572 | .btn--m { 1573 | font-size: 14px; 1574 | } 1575 | 1576 | .btn--l { 1577 | font-size: 20px; 1578 | border-radius: .25em!important; 1579 | } 1580 | 1581 | /* 1582 | 1583 | Layout utility for responsive buttons 1584 | 1585 | Code: 1586 | 1587 | 1588 | */ 1589 | 1590 | .btn--full, 1591 | .btn--full:link { 1592 | border-radius: .25em; 1593 | display: block; 1594 | margin-left: auto; 1595 | margin-right: auto; 1596 | text-align: center; 1597 | width: 100%; 1598 | } 1599 | 1600 | /* 1601 | 1602 | Skins 1603 | 1604 | * Black & White 1605 | * Grays 1606 | * Colors 1607 | 1608 | Code: 1609 | 1610 | 1611 | 1612 | 1613 | 1614 | 1615 | 1616 | */ 1617 | 1618 | /* BLACK & WHITE */ 1619 | 1620 | .btn--black, 1621 | .btn--black:link, 1622 | .btn--black:visited { 1623 | color: #fff; 1624 | background-color: #000; 1625 | } 1626 | 1627 | .btn--black:hover { 1628 | color: #fff; 1629 | background-color: #777; 1630 | border-color: #777; 1631 | } 1632 | 1633 | .btn--black:active { 1634 | color: #fff; 1635 | background-color: #999; 1636 | border-color: #999; 1637 | } 1638 | 1639 | .btn--black:hover { 1640 | background-color: #444; 1641 | } 1642 | 1643 | .btn--black { 1644 | background-color: #000; 1645 | } 1646 | 1647 | .btn--gray:link, 1648 | .btn--gray:visited, 1649 | { 1650 | background-color: #f0f0f0; 1651 | border-color: #f0f0f0; 1652 | color: #555; 1653 | } 1654 | 1655 | .btn--gray:hover { 1656 | background-color: #ddd; 1657 | border-color: #ddd; 1658 | color: #444; 1659 | } 1660 | 1661 | .btn--gray:active { 1662 | background-color: #ccc; 1663 | border-color: #ccc; 1664 | color: #444; 1665 | } 1666 | 1667 | .btn--gray-border:link, 1668 | .btn--gray-border:visited, 1669 | { 1670 | background-color: #fff; 1671 | border-color: #555; 1672 | border-width: 2px; 1673 | color: #555; 1674 | } 1675 | 1676 | .btn--gray-border:hover { 1677 | background-color: #fff; 1678 | border-color: #ddd; 1679 | color: #777; 1680 | } 1681 | 1682 | .btn--gray-border:active { 1683 | background-color: #ccc; 1684 | border-color: #ccc; 1685 | color: #444; 1686 | } 1687 | 1688 | .btn--gray-dark:link, 1689 | .btn--gray-dark:visited { 1690 | background-color: #555; 1691 | color: #eee; 1692 | } 1693 | 1694 | .btn--gray-dark:hover { 1695 | background-color: #333; 1696 | border-color: #333; 1697 | color: #eee; 1698 | } 1699 | 1700 | .btn--gray-dark:active { 1701 | background-color: #777; 1702 | border-color: #777; 1703 | color: #eee; 1704 | } 1705 | 1706 | /* BLUES */ 1707 | 1708 | .btn--blue:link, 1709 | .btn--blue:visited { 1710 | color: #fff; 1711 | background-color: #0074D9; 1712 | } 1713 | 1714 | .btn--blue:hover { 1715 | color: #fff!important; 1716 | background-color: #0063aa; 1717 | border-color: #0063aa; 1718 | } 1719 | 1720 | .btn--blue:active { 1721 | color: #fff; 1722 | background-color: #001F3F; 1723 | border-color: #001F3F; 1724 | } 1725 | 1726 | .btn--animated { 1727 | background: #f9f9f9; 1728 | color: #444; 1729 | border: 4px solid #f1f1f1; 1730 | padding: .5rem; 1731 | transition: padding .4s ease-out; 1732 | transition-delay: .1s; 1733 | } 1734 | 1735 | .btn--animated:hover { 1736 | background: #f9f9f9; 1737 | border: 4px solid #f1f1f1; 1738 | padding: .75rem; 1739 | transition: padding .2s ease-in; 1740 | } 1741 | 1742 | /* Keep it mobile-first and responsive */ 1743 | 1744 | @media screen and (min-width: 32em) { 1745 | .btn--full { 1746 | max-width: 16em!important; 1747 | } 1748 | } 1749 | 1750 | /* 1751 | 1752 | CODE 1753 | 1754 | */ 1755 | 1756 | .pre { 1757 | overflow-x: auto; 1758 | overflow-y: hidden; 1759 | overflow: scroll; 1760 | } 1761 | 1762 | .code { 1763 | white-space: pre; 1764 | font-size: 14px; 1765 | } 1766 | 1767 | /* 1768 | 1769 | CLEARS 1770 | 1771 | */ 1772 | 1773 | .cn { 1774 | clear: none; 1775 | } 1776 | 1777 | .cl { 1778 | clear: left; 1779 | } 1780 | 1781 | .cr { 1782 | clear: right; 1783 | } 1784 | 1785 | .cb { 1786 | clear: both; 1787 | } 1788 | 1789 | /* Nicolas Gallaghers Clearfix solution 1790 | Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */ 1791 | 1792 | .cf:before, 1793 | .cf:after { 1794 | content: " "; 1795 | display: table; 1796 | } 1797 | 1798 | .cf:after { 1799 | clear: both; 1800 | } 1801 | 1802 | .cf { 1803 | *zoom: 1; 1804 | } 1805 | 1806 | /* 1807 | 1808 | DIMENSION UTILITIES 1809 | 1810 | */ 1811 | 1812 | .wrap { 1813 | display: block; 1814 | width: auto !important; 1815 | } 1816 | 1817 | .fill { 1818 | display: block; 1819 | overflow: hidden; 1820 | width: auto !important; 1821 | } 1822 | 1823 | /* 1824 | 1825 | DISPLAY 1826 | 1827 | Base: 1828 | d = display 1829 | 1830 | Modifiers: 1831 | n = none 1832 | b = block 1833 | ib = inline-block 1834 | it = inline-table 1835 | t = table 1836 | tc = table-cell 1837 | tr = table-row 1838 | tcol = table-column 1839 | tcolg = table-column-group 1840 | 1841 | Media Query Extensions: 1842 | -ns = not-small 1843 | -m = medium 1844 | -l = large 1845 | 1846 | */ 1847 | 1848 | .dn { 1849 | display: none; 1850 | } 1851 | 1852 | .di { 1853 | display: inline; 1854 | } 1855 | 1856 | .db { 1857 | display: block; 1858 | } 1859 | 1860 | .dib { 1861 | display: inline-block; 1862 | } 1863 | 1864 | .dit { 1865 | display: inline-table; 1866 | } 1867 | 1868 | .dt { 1869 | display: table; 1870 | table-layout: fixed; 1871 | width: 100%; 1872 | } 1873 | 1874 | .dtr { 1875 | display: table-row; 1876 | } 1877 | 1878 | .dtc { 1879 | display: table-cell; 1880 | } 1881 | 1882 | .dtcol { 1883 | display: table-column; 1884 | } 1885 | 1886 | .dtcolg { 1887 | display: table-column-group; 1888 | } 1889 | 1890 | @media screen and (min-width: 42em) { 1891 | .dn-ns { 1892 | display: none; 1893 | } 1894 | 1895 | .di-ns { 1896 | display: inline; 1897 | } 1898 | 1899 | .db-ns { 1900 | display: block; 1901 | } 1902 | 1903 | .dib-ns { 1904 | display: inline-block; 1905 | } 1906 | 1907 | .dit-ns { 1908 | display: inline-table; 1909 | } 1910 | 1911 | .dt-ns { 1912 | display: table; 1913 | table-layout: fixed; 1914 | width: 100%; 1915 | } 1916 | 1917 | .dtr-ns { 1918 | display: table-row; 1919 | } 1920 | 1921 | .dtc-ns { 1922 | display: table-cell; 1923 | } 1924 | 1925 | .dtcol-ns { 1926 | display: table-column; 1927 | } 1928 | 1929 | .dtcolg-ns { 1930 | display: table-column-group; 1931 | } 1932 | } 1933 | 1934 | @media screen and (min-width: 42em) and (max-width: 64em) { 1935 | .dn-m { 1936 | display: none; 1937 | } 1938 | 1939 | .di-m { 1940 | display: inline; 1941 | } 1942 | 1943 | .db-m { 1944 | display: block; 1945 | } 1946 | 1947 | .dib-m { 1948 | display: inline-block; 1949 | } 1950 | 1951 | .dit-m { 1952 | display: inline-table; 1953 | } 1954 | 1955 | .dt-m { 1956 | display: table; 1957 | table-layout: fixed; 1958 | width: 100%; 1959 | } 1960 | 1961 | .dtr-m { 1962 | display: table-row; 1963 | } 1964 | 1965 | .dtc-m { 1966 | display: table-cell; 1967 | } 1968 | 1969 | .dtcol-m { 1970 | display: table-column; 1971 | } 1972 | 1973 | .dtcolg-m { 1974 | display: table-column-group; 1975 | } 1976 | } 1977 | 1978 | @media screen and (min-width: 64em) { 1979 | .dn-l { 1980 | display: none; 1981 | } 1982 | 1983 | .di-l { 1984 | display: inline; 1985 | } 1986 | 1987 | .db-l { 1988 | display: block; 1989 | } 1990 | 1991 | .dib-l { 1992 | display: inline-block; 1993 | } 1994 | 1995 | .dit-l { 1996 | display: inline-table; 1997 | } 1998 | 1999 | .dt-l { 2000 | display: table; 2001 | table-layout: fixed; 2002 | width: 100%; 2003 | } 2004 | 2005 | .dtr-l { 2006 | display: table-row; 2007 | } 2008 | 2009 | .dtc-l { 2010 | display: table-cell; 2011 | } 2012 | 2013 | .dtcol-l { 2014 | display: table-column; 2015 | } 2016 | 2017 | .dtcolg-l { 2018 | display: table-column-group; 2019 | } 2020 | } 2021 | 2022 | /* 2023 | 2024 | FLOATS 2025 | 2026 | 1. Floated elements are automatically rendered as block level elements. 2027 | Setting floats to display inline will fix the double margin bug in 2028 | ie6. You know... just in case. 2029 | 2030 | 2. Don't forget to clearfix your floats with .cf 2031 | 2032 | Base: 2033 | f = float 2034 | 2035 | Modifiers: 2036 | l = left 2037 | r = right 2038 | n = none 2039 | 2040 | Media Query Extensions: 2041 | -ns = not-small 2042 | -m = medium 2043 | -l = large 2044 | 2045 | */ 2046 | 2047 | .fl { 2048 | float: left; 2049 | display: inline; 2050 | } 2051 | 2052 | .fr { 2053 | float: right; 2054 | display: inline; 2055 | } 2056 | 2057 | .fn { 2058 | float: none; 2059 | } 2060 | 2061 | @media screen and (min-width: 42em) { 2062 | .fl-ns { 2063 | float: left; 2064 | display: inline; 2065 | } 2066 | 2067 | .fr-ns { 2068 | float: right; 2069 | display: inline; 2070 | } 2071 | 2072 | .fn-ns { 2073 | float: none; 2074 | } 2075 | } 2076 | 2077 | @media screen and (min-width: 42em) and (max-width: 64em) { 2078 | .fl-m { 2079 | float: left; 2080 | display: inline; 2081 | } 2082 | 2083 | .fr-m { 2084 | float: right; 2085 | display: inline; 2086 | } 2087 | 2088 | .fn-m { 2089 | float: none; 2090 | } 2091 | } 2092 | 2093 | @media screen and (min-width: 64em) { 2094 | .fl-l { 2095 | float: left; 2096 | display: inline; 2097 | } 2098 | 2099 | .fr-l { 2100 | float: right; 2101 | display: inline; 2102 | } 2103 | 2104 | .fn-l { 2105 | float: none; 2106 | } 2107 | } 2108 | 2109 | /* 2110 | 2111 | Font Family Groups 2112 | 2113 | */ 2114 | 2115 | .sans-serif { 2116 | font-family: 'avenir next', avenir, 2117 | helvetica, 'helvetica neue', 2118 | arial, 2119 | sans-serif; 2120 | } 2121 | 2122 | .serif { 2123 | font-family: TimesNewRoman, "Times New Roman", times, 2124 | georgia, 2125 | serif; 2126 | } 2127 | 2128 | /* From http://cssfontstack.com */ 2129 | 2130 | code, 2131 | .code { 2132 | font-family: Consolas, 2133 | monaco, 2134 | monospace; 2135 | } 2136 | 2137 | .serif-bodini { 2138 | font-family: "Bodini MT", 2139 | Didot, 2140 | "Didot LT STD", 2141 | "Hoefler Text", 2142 | Garamond, 2143 | "Times New Roman", 2144 | serif; 2145 | } 2146 | 2147 | .serif-calisto { 2148 | font-family: "Calisto MT", 2149 | "Bookman Old Style", Bookman, 2150 | "Goudy Old Style", 2151 | Garamond, 2152 | "Hoefler Text", 2153 | "Bitstream Charter", 2154 | Georgia, 2155 | serif; 2156 | } 2157 | 2158 | .serif-garamond { 2159 | font-family: Garamond, 2160 | Baskerville, "Baskerville Old Face", 2161 | "Hoefler Text", 2162 | "Times New Roman", 2163 | serif; 2164 | } 2165 | 2166 | .serif-times { 2167 | font-family: TimesNewRoman, "Times New Roman", Times, 2168 | Baskerville, 2169 | Georgia, 2170 | serif; 2171 | } 2172 | 2173 | /* 2174 | 2175 | Font Style 2176 | 2177 | */ 2178 | 2179 | .fsn { 2180 | font-style: normal; 2181 | } 2182 | 2183 | .i { 2184 | font-style: italic; 2185 | } 2186 | 2187 | @media screen and (min-width: 42em) { 2188 | .fsn-ns { 2189 | font-style: normal; 2190 | } 2191 | 2192 | .i-ns { 2193 | font-style: italic; 2194 | } 2195 | } 2196 | 2197 | @media screen and (min-width: 42em) and (max-width: 64em) { 2198 | .fsn-m { 2199 | font-style: normal; 2200 | } 2201 | 2202 | .i-m { 2203 | font-style: italic; 2204 | } 2205 | } 2206 | 2207 | @media screen and (min-width: 64em) { 2208 | .fsn-l { 2209 | font-style: normal; 2210 | } 2211 | 2212 | .i-l { 2213 | font-style: italic; 2214 | } 2215 | } 2216 | 2217 | /* 2218 | 2219 | FONT WEIGHT 2220 | 2221 | */ 2222 | 2223 | .normal { 2224 | font-weight: normal; 2225 | } 2226 | 2227 | .b { 2228 | font-weight: bold; 2229 | } 2230 | 2231 | .thin { 2232 | font-weight: 100; 2233 | } 2234 | 2235 | .book { 2236 | font-weight: 400; 2237 | } 2238 | 2239 | .bold { 2240 | font-weight: 700; 2241 | } 2242 | 2243 | .heavy { 2244 | font-weight: 900; 2245 | } 2246 | 2247 | @media screen and (min-width: 42em) { 2248 | .normal-ns { 2249 | font-weight: normal; 2250 | } 2251 | 2252 | .b-ns { 2253 | font-weight: bold; 2254 | } 2255 | 2256 | .thin-ns { 2257 | font-weight: 100; 2258 | } 2259 | 2260 | .book-ns { 2261 | font-weight: 400; 2262 | } 2263 | 2264 | .bold-ns { 2265 | font-weight: 700; 2266 | } 2267 | 2268 | .heavy-ns { 2269 | font-weight: 900; 2270 | } 2271 | } 2272 | 2273 | @media screen and (min-width: 42em) and (max-width: 64em) { 2274 | .normal-m { 2275 | font-weight: normal; 2276 | } 2277 | 2278 | .b-m { 2279 | font-weight: bold; 2280 | } 2281 | 2282 | .thin-m { 2283 | font-weight: 100; 2284 | } 2285 | 2286 | .book-m { 2287 | font-weight: 400; 2288 | } 2289 | 2290 | .bold-m { 2291 | font-weight: 700; 2292 | } 2293 | 2294 | .heavy-m { 2295 | font-weight: 900; 2296 | } 2297 | } 2298 | 2299 | @media screen and (min-width: 64em) { 2300 | .normal-l { 2301 | font-weight: normal; 2302 | } 2303 | 2304 | .b-l { 2305 | font-weight: bold; 2306 | } 2307 | 2308 | .thin-l { 2309 | font-weight: 100; 2310 | } 2311 | 2312 | .book-l { 2313 | font-weight: 400; 2314 | } 2315 | 2316 | .bold-l { 2317 | font-weight: 700; 2318 | } 2319 | 2320 | .heavy-l { 2321 | font-weight: 900; 2322 | } 2323 | } 2324 | 2325 | /* Forms */ 2326 | 2327 | .input-text { 2328 | outline: 0; 2329 | border: 1px solid #999; 2330 | } 2331 | 2332 | .input-invisible { 2333 | outline: 0; 2334 | border: 0; 2335 | } 2336 | 2337 | /* Media Queries */ 2338 | 2339 | /* 2340 | Use this scaffolding to create or extend your own modules with tachyons 2341 | style architecture. 2342 | */ 2343 | 2344 | @media screen and (min-width: 42em) { 2345 | 2346 | } 2347 | 2348 | @media screen and (min-width: 42em) and (max-width: 64em) { 2349 | 2350 | } 2351 | 2352 | @media screen and (min-width: 64em) { 2353 | 2354 | } 2355 | 2356 | /* 2357 | 2358 | Heights 2359 | 2360 | */ 2361 | 2362 | /* Height Scale */ 2363 | 2364 | .h1 { 2365 | height: 1rem; 2366 | } 2367 | 2368 | .h2 { 2369 | height: 2rem; 2370 | } 2371 | 2372 | .h3 { 2373 | height: 4rem; 2374 | } 2375 | 2376 | .h4 { 2377 | height: 8rem; 2378 | } 2379 | 2380 | .h5 { 2381 | height: 16rem; 2382 | } 2383 | 2384 | .h-10 { 2385 | height: 10%; 2386 | } 2387 | 2388 | .h-20 { 2389 | height: 20%; 2390 | } 2391 | 2392 | .h-25 { 2393 | height: 25%; 2394 | } 2395 | 2396 | .h-40 { 2397 | height: 40%; 2398 | } 2399 | 2400 | .h-50 { 2401 | height: 50%; 2402 | } 2403 | 2404 | .h-60 { 2405 | height: 60%; 2406 | } 2407 | 2408 | .h-75 { 2409 | height: 75%; 2410 | } 2411 | 2412 | .h-80 { 2413 | height: 80%; 2414 | } 2415 | 2416 | .h-100 { 2417 | height: 100%; 2418 | } 2419 | 2420 | /* String Properties */ 2421 | 2422 | .h-bb { 2423 | height: border-box; 2424 | } 2425 | 2426 | .h-cb { 2427 | height: content-box; 2428 | } 2429 | 2430 | .h-mx { 2431 | height: -webkit-max-content; 2432 | height: -moz-max-content; 2433 | height: max-content; 2434 | } 2435 | 2436 | .h-mn { 2437 | height: -webkit-min-content; 2438 | height: -moz-min-content; 2439 | height: min-content; 2440 | } 2441 | 2442 | .h-av { 2443 | height: available; 2444 | } 2445 | 2446 | .h-fc { 2447 | height: -webkit-fit-content; 2448 | height: -moz-fit-content; 2449 | height: fit-content; 2450 | } 2451 | 2452 | .h-at { 2453 | height: auto; 2454 | } 2455 | 2456 | .h-i { 2457 | height: inherit; 2458 | } 2459 | 2460 | @media screen and (min-width: 42em) { 2461 | .h-1-ns { 2462 | height: 1rem; 2463 | } 2464 | 2465 | .h-2-ns { 2466 | height: 2rem; 2467 | } 2468 | 2469 | .h-3-ns { 2470 | height: 4rem; 2471 | } 2472 | 2473 | .h-4-ns { 2474 | height: 8rem; 2475 | } 2476 | 2477 | .h-5-ns { 2478 | height: 16rem; 2479 | } 2480 | 2481 | .h-10-ns { 2482 | height: 10%; 2483 | } 2484 | 2485 | .h-20-ns { 2486 | height: 20%; 2487 | } 2488 | 2489 | .h-25-ns { 2490 | height: 25%; 2491 | } 2492 | 2493 | .h-40-ns { 2494 | height: 40%; 2495 | } 2496 | 2497 | .h-50-ns { 2498 | height: 50%; 2499 | } 2500 | 2501 | .h-60-ns { 2502 | height: 60%; 2503 | } 2504 | 2505 | .h-75-ns { 2506 | height: 75%; 2507 | } 2508 | 2509 | .h-80-ns { 2510 | height: 80%; 2511 | } 2512 | 2513 | .h-100-ns { 2514 | height: 100%; 2515 | } 2516 | 2517 | .h-bb-ns { 2518 | height: border-box; 2519 | } 2520 | 2521 | .h-cb-ns { 2522 | height: content-box; 2523 | } 2524 | 2525 | .h-mx-ns { 2526 | height: -webkit-max-content; 2527 | height: -moz-max-content; 2528 | height: max-content; 2529 | } 2530 | 2531 | .h-mn-ns { 2532 | height: -webkit-min-content; 2533 | height: -moz-min-content; 2534 | height: min-content; 2535 | } 2536 | 2537 | .h-av-ns { 2538 | height: available; 2539 | } 2540 | 2541 | .h-fc-ns { 2542 | height: -webkit-fit-content; 2543 | height: -moz-fit-content; 2544 | height: fit-content; 2545 | } 2546 | 2547 | .h-at-ns { 2548 | height: auto; 2549 | } 2550 | 2551 | .h-i-ns { 2552 | height: inherit; 2553 | } 2554 | } 2555 | 2556 | @media screen and (min-width: 42em) and (max-width: 64em) { 2557 | .h1-m { 2558 | height: 1rem; 2559 | } 2560 | 2561 | .h2-m { 2562 | height: 2rem; 2563 | } 2564 | 2565 | .h3-m { 2566 | height: 4rem; 2567 | } 2568 | 2569 | .h4-m { 2570 | height: 8rem; 2571 | } 2572 | 2573 | .h5-m { 2574 | height: 16rem; 2575 | } 2576 | 2577 | .h-10-m { 2578 | height: 10%; 2579 | } 2580 | 2581 | .h-20-m { 2582 | height: 20%; 2583 | } 2584 | 2585 | .h-25-m { 2586 | height: 25%; 2587 | } 2588 | 2589 | .h-40-m { 2590 | height: 40%; 2591 | } 2592 | 2593 | .h-50-m { 2594 | height: 50%; 2595 | } 2596 | 2597 | .h-60-m { 2598 | height: 60%; 2599 | } 2600 | 2601 | .h-75-m { 2602 | height: 75%; 2603 | } 2604 | 2605 | .h-80-m { 2606 | height: 80%; 2607 | } 2608 | 2609 | .h-100-m { 2610 | height: 100%; 2611 | } 2612 | 2613 | .h-bb-m { 2614 | height: border-box; 2615 | } 2616 | 2617 | .h-cb-m { 2618 | height: content-box; 2619 | } 2620 | 2621 | .h-mx-m { 2622 | height: -webkit-max-content; 2623 | height: -moz-max-content; 2624 | height: max-content; 2625 | } 2626 | 2627 | .h-mn-m { 2628 | height: -webkit-min-content; 2629 | height: -moz-min-content; 2630 | height: min-content; 2631 | } 2632 | 2633 | .h-av-m { 2634 | height: available; 2635 | } 2636 | 2637 | .h-fc-m { 2638 | height: -webkit-fit-content; 2639 | height: -moz-fit-content; 2640 | height: fit-content; 2641 | } 2642 | 2643 | .h-at-m { 2644 | height: auto; 2645 | } 2646 | 2647 | .h-i-m { 2648 | height: inherit; 2649 | } 2650 | } 2651 | 2652 | @media screen and (min-width: 64em) { 2653 | .h1-l { 2654 | height: 1rem; 2655 | } 2656 | 2657 | .h2-l { 2658 | height: 2rem; 2659 | } 2660 | 2661 | .h3-l { 2662 | height: 4rem; 2663 | } 2664 | 2665 | .h4-l { 2666 | height: 8rem; 2667 | } 2668 | 2669 | .h5-l { 2670 | height: 16rem; 2671 | } 2672 | 2673 | .h-10-l { 2674 | height: 10%; 2675 | } 2676 | 2677 | .h-20-l { 2678 | height: 20%; 2679 | } 2680 | 2681 | .h-25-l { 2682 | height: 25%; 2683 | } 2684 | 2685 | .h-40-l { 2686 | height: 40%; 2687 | } 2688 | 2689 | .h-50-l { 2690 | height: 50%; 2691 | } 2692 | 2693 | .h-60-l { 2694 | height: 60%; 2695 | } 2696 | 2697 | .h-75-l { 2698 | height: 75%; 2699 | } 2700 | 2701 | .h-80-l { 2702 | height: 80%; 2703 | } 2704 | 2705 | .h-100-l { 2706 | height: 100%; 2707 | } 2708 | 2709 | .h-bb-l { 2710 | height: border-box; 2711 | } 2712 | 2713 | .h-cb-l { 2714 | height: content-box; 2715 | } 2716 | 2717 | .h-mx-l { 2718 | height: -webkit-max-content; 2719 | height: -moz-max-content; 2720 | height: max-content; 2721 | } 2722 | 2723 | .h-mn-l { 2724 | height: -webkit-min-content; 2725 | height: -moz-min-content; 2726 | height: min-content; 2727 | } 2728 | 2729 | .h-av-l { 2730 | height: available; 2731 | } 2732 | 2733 | .h-fc-l { 2734 | height: -webkit-fit-content; 2735 | height: -moz-fit-content; 2736 | height: fit-content; 2737 | } 2738 | 2739 | .h-at-l { 2740 | height: auto; 2741 | } 2742 | 2743 | .h-i-l { 2744 | height: inherit; 2745 | } 2746 | } 2747 | 2748 | /* 2749 | 2750 | IMAGES 2751 | 2752 | */ 2753 | 2754 | /* Responsive images! */ 2755 | 2756 | img { 2757 | max-width: 100%; 2758 | } 2759 | 2760 | /* 2761 | 2762 | LETTER SPACING 2763 | 2764 | */ 2765 | 2766 | .tracked { 2767 | letter-spacing: .16em; 2768 | } 2769 | 2770 | .tracked-tight { 2771 | letter-spacing: -.1em; 2772 | } 2773 | 2774 | .mega-tracked { 2775 | letter-spacing: .3em; 2776 | } 2777 | 2778 | @media screen and (min-width: 42em) { 2779 | .tracked-ns { 2780 | letter-spacing: .16em; 2781 | } 2782 | 2783 | .tracked-tight-ns { 2784 | letter-spacing: -.1em; 2785 | } 2786 | 2787 | .mega-tracked-ns { 2788 | letter-spacing: .3em; 2789 | } 2790 | } 2791 | 2792 | @media screen and (min-width: 42em) and (max-width: 64em) { 2793 | .tracked-m { 2794 | letter-spacing: .16em; 2795 | } 2796 | 2797 | .tracked-tight-m { 2798 | letter-spacing: -.1em; 2799 | } 2800 | 2801 | .mega-tracked-m { 2802 | letter-spacing: .3em; 2803 | } 2804 | } 2805 | 2806 | @media screen and (min-width: 64em) { 2807 | .tracked-l { 2808 | letter-spacing: .16em; 2809 | } 2810 | 2811 | .tracked-tight-l { 2812 | letter-spacing: -.1em; 2813 | } 2814 | 2815 | .mega-tracked-l { 2816 | letter-spacing: .3em; 2817 | } 2818 | } 2819 | 2820 | /* 2821 | 2822 | LINE HEIGHT 2823 | 2824 | */ 2825 | 2826 | .lh-solid { 2827 | line-height: 1; 2828 | } 2829 | 2830 | .lh-title { 2831 | line-height: 1.3; 2832 | } 2833 | 2834 | .lh-copy { 2835 | line-height: 1.6; 2836 | } 2837 | 2838 | @media screen and (min-width: 42em) { 2839 | .lh-solid-ns { 2840 | line-height: 1; 2841 | } 2842 | 2843 | .lh-title-ns { 2844 | line-height: 1.3; 2845 | } 2846 | 2847 | .lh-copy-ns { 2848 | line-height: 1.6; 2849 | } 2850 | } 2851 | 2852 | @media screen and (min-width: 42em) and (max-width: 64em) { 2853 | .lh-solid-m { 2854 | line-height: 1; 2855 | } 2856 | 2857 | .lh-title-m { 2858 | line-height: 1.3; 2859 | } 2860 | 2861 | .lh-copy-m { 2862 | line-height: 1.6; 2863 | } 2864 | } 2865 | 2866 | @media screen and (min-width: 64em) { 2867 | .lh-solid-l { 2868 | line-height: 1; 2869 | } 2870 | 2871 | .lh-title-l { 2872 | line-height: 1.3; 2873 | } 2874 | 2875 | .lh-copy-l { 2876 | line-height: 1.6; 2877 | } 2878 | } 2879 | 2880 | /* 2881 | 2882 | LINKS 2883 | 2884 | */ 2885 | 2886 | .link { 2887 | text-decoration: none; 2888 | transition: color .15s ease-in; 2889 | } 2890 | 2891 | .link:link, 2892 | .link:visited { 2893 | color: #2D243B; 2894 | transition: color .15s ease-in; 2895 | } 2896 | 2897 | .link:hover { 2898 | color: #999999; 2899 | transition: color .15s ease-in; 2900 | } 2901 | 2902 | .link:active { 2903 | color: #C4E3E0; 2904 | transition: color .15s ease-in; 2905 | } 2906 | 2907 | .link:focus { 2908 | color: #2D243B; 2909 | transition: color .15s ease-in; 2910 | } 2911 | 2912 | .underline { 2913 | text-decoration: underline; 2914 | } 2915 | 2916 | .underline-hover:hover { 2917 | text-decoration: underline; 2918 | } 2919 | 2920 | /* 2921 | 2922 | LISTS 2923 | 2924 | */ 2925 | 2926 | .list { 2927 | list-style-type: none; 2928 | } 2929 | 2930 | @media screen and (min-width: 42em) { 2931 | .list-ns { 2932 | list-style-type: none; 2933 | } 2934 | } 2935 | 2936 | @media screen and (min-width: 42em) and (max-width: 64em) { 2937 | .list-m { 2938 | list-style: none; 2939 | } 2940 | } 2941 | 2942 | @media screen and (min-width: 64em) { 2943 | .list-l { 2944 | list-style-type: none; 2945 | } 2946 | } 2947 | 2948 | /* 2949 | 2950 | MAX WIDTHS 2951 | 2952 | */ 2953 | 2954 | .mw-100 { 2955 | max-width: 100%; 2956 | } 2957 | 2958 | .mw-75 { 2959 | max-width: 75%; 2960 | } 2961 | 2962 | .mw-50 { 2963 | max-width: 50%; 2964 | } 2965 | 2966 | .mw-25 { 2967 | max-width: 25%; 2968 | } 2969 | 2970 | .mw1 { 2971 | max-width: 1rem; 2972 | } 2973 | 2974 | .mw2 { 2975 | max-width: 2rem; 2976 | } 2977 | 2978 | .mw3 { 2979 | max-width: 4rem; 2980 | } 2981 | 2982 | .mw4 { 2983 | max-width: 8rem; 2984 | } 2985 | 2986 | .mw5 { 2987 | max-width: 16rem; 2988 | } 2989 | 2990 | .mw6 { 2991 | max-width: 32rem; 2992 | } 2993 | 2994 | .mw7 { 2995 | max-width: 48rem; 2996 | } 2997 | 2998 | .mw8 { 2999 | max-width: 64rem; 3000 | } 3001 | 3002 | .mw9 { 3003 | max-width: 96rem; 3004 | } 3005 | 3006 | .mw10 { 3007 | max-width: 128rem; 3008 | } 3009 | 3010 | .mw-none { 3011 | max-width: none; 3012 | } 3013 | 3014 | .mw-max { 3015 | max-width: -webkit-max-content; 3016 | max-width: -moz-max-content; 3017 | max-width: max-content; 3018 | } 3019 | 3020 | .mw-min { 3021 | max-width: -webkit-min-content; 3022 | max-width: -moz-min-content; 3023 | max-width: min-content; 3024 | } 3025 | 3026 | .mw-fit { 3027 | max-width: -webkit-fit-content; 3028 | max-width: -moz-fit-content; 3029 | max-width: fit-content; 3030 | } 3031 | 3032 | .mw-fill { 3033 | max-width: -webkit-fill-available; 3034 | max-width: -moz-available; 3035 | max-width: fill-available; 3036 | } 3037 | 3038 | @media screen and (min-width: 42em) { 3039 | .mw-100-ns { 3040 | max-width: 100%; 3041 | } 3042 | 3043 | .mw-75-ns { 3044 | max-width: 75%; 3045 | } 3046 | 3047 | .mw-50-ns { 3048 | max-width: 50%; 3049 | } 3050 | 3051 | .mw-25-ns { 3052 | max-width: 25%; 3053 | } 3054 | 3055 | .mw1-ns { 3056 | max-width: 1rem; 3057 | } 3058 | 3059 | .mw2-ns { 3060 | max-width: 2rem; 3061 | } 3062 | 3063 | .mw3-ns { 3064 | max-width: 4rem; 3065 | } 3066 | 3067 | .mw4-ns { 3068 | max-width: 8rem; 3069 | } 3070 | 3071 | .mw5-ns { 3072 | max-width: 16rem; 3073 | } 3074 | 3075 | .mw6-ns { 3076 | max-width: 32rem; 3077 | } 3078 | 3079 | .mw7-ns { 3080 | max-width: 48rem; 3081 | } 3082 | 3083 | .mw8-ns { 3084 | max-width: 64rem; 3085 | } 3086 | 3087 | .mw9-ns { 3088 | max-width: 96rem; 3089 | } 3090 | 3091 | .mw10-ns { 3092 | max-width: 128rem; 3093 | } 3094 | 3095 | .mw-none-ns { 3096 | max-width: none; 3097 | } 3098 | 3099 | .mw-max-ns { 3100 | max-width: -webkit-max-content; 3101 | max-width: -moz-max-content; 3102 | max-width: max-content; 3103 | } 3104 | 3105 | .mw-min-ns { 3106 | max-width: -webkit-min-content; 3107 | max-width: -moz-min-content; 3108 | max-width: min-content; 3109 | } 3110 | 3111 | .mw-fit-ns { 3112 | max-width: -webkit-fit-content; 3113 | max-width: -moz-fit-content; 3114 | max-width: fit-content; 3115 | } 3116 | 3117 | .mw-fill-ns { 3118 | max-width: -webkit-fill-available; 3119 | max-width: -moz-available; 3120 | max-width: fill-available; 3121 | } 3122 | } 3123 | 3124 | @media screen and (min-width: 42em) and (max-width: 64em) { 3125 | .mw-100-m { 3126 | max-width: 100%; 3127 | } 3128 | 3129 | .mw-75-m { 3130 | max-width: 75%; 3131 | } 3132 | 3133 | .mw-50-m { 3134 | max-width: 50%; 3135 | } 3136 | 3137 | .mw-25-m { 3138 | max-width: 25%; 3139 | } 3140 | 3141 | .mw1-m { 3142 | max-width: 1rem; 3143 | } 3144 | 3145 | .mw2-m { 3146 | max-width: 2rem; 3147 | } 3148 | 3149 | .mw3-m { 3150 | max-width: 4rem; 3151 | } 3152 | 3153 | .mw4-m { 3154 | max-width: 8rem; 3155 | } 3156 | 3157 | .mw5-m { 3158 | max-width: 16rem; 3159 | } 3160 | 3161 | .mw6-m { 3162 | max-width: 32rem; 3163 | } 3164 | 3165 | .mw7-m { 3166 | max-width: 48rem; 3167 | } 3168 | 3169 | .mw8-m { 3170 | max-width: 64rem; 3171 | } 3172 | 3173 | .mw9-m { 3174 | max-width: 96rem; 3175 | } 3176 | 3177 | .mw10-m { 3178 | max-width: 128rem; 3179 | } 3180 | 3181 | .mw-none-m { 3182 | max-width: none; 3183 | } 3184 | 3185 | .mw-max-m { 3186 | max-width: -webkit-max-content; 3187 | max-width: -moz-max-content; 3188 | max-width: max-content; 3189 | } 3190 | 3191 | .mw-min-m { 3192 | max-width: -webkit-min-content; 3193 | max-width: -moz-min-content; 3194 | max-width: min-content; 3195 | } 3196 | 3197 | .mw-fit-m { 3198 | max-width: -webkit-fit-content; 3199 | max-width: -moz-fit-content; 3200 | max-width: fit-content; 3201 | } 3202 | 3203 | .mw-fill-m { 3204 | max-width: -webkit-fill-available; 3205 | max-width: -moz-available; 3206 | max-width: fill-available; 3207 | } 3208 | } 3209 | 3210 | @media screen and (min-width: 64em) { 3211 | .mw-100-l { 3212 | max-width: 100%; 3213 | } 3214 | 3215 | .mw-75-l { 3216 | max-width: 75%; 3217 | } 3218 | 3219 | .mw-50-l { 3220 | max-width: 50%; 3221 | } 3222 | 3223 | .mw-25-l { 3224 | max-width: 25%; 3225 | } 3226 | 3227 | .mw1-l { 3228 | max-width: 1rem; 3229 | } 3230 | 3231 | .mw2-l { 3232 | max-width: 2rem; 3233 | } 3234 | 3235 | .mw3-l { 3236 | max-width: 4rem; 3237 | } 3238 | 3239 | .mw4-l { 3240 | max-width: 8rem; 3241 | } 3242 | 3243 | .mw5-l { 3244 | max-width: 16rem; 3245 | } 3246 | 3247 | .mw6-l { 3248 | max-width: 32rem; 3249 | } 3250 | 3251 | .mw7-l { 3252 | max-width: 48rem; 3253 | } 3254 | 3255 | .mw8-l { 3256 | max-width: 64rem; 3257 | } 3258 | 3259 | .mw9-l { 3260 | max-width: 96rem; 3261 | } 3262 | 3263 | .mw10-l { 3264 | max-width: 128rem; 3265 | } 3266 | 3267 | .mw-none-l { 3268 | max-width: none; 3269 | } 3270 | 3271 | .mw-max-l { 3272 | max-width: -webkit-max-content; 3273 | max-width: -moz-max-content; 3274 | max-width: max-content; 3275 | } 3276 | 3277 | .mw-min-l { 3278 | max-width: -webkit-min-content; 3279 | max-width: -moz-min-content; 3280 | max-width: min-content; 3281 | } 3282 | 3283 | .mw-fit-l { 3284 | max-width: -webkit-fit-content; 3285 | max-width: -moz-fit-content; 3286 | max-width: fit-content; 3287 | } 3288 | 3289 | .mw-fill-l { 3290 | max-width: -webkit-fill-available; 3291 | max-width: -moz-available; 3292 | max-width: fill-available; 3293 | } 3294 | } 3295 | 3296 | /* 3297 | 3298 | WIDTHS 3299 | 3300 | Base: 3301 | w = width 3302 | 3303 | Modifiers 3304 | 1 = 1st step in width scale 3305 | 2 = 2nd step in width scale 3306 | 3 = 3rd step in width scale 3307 | 4 = 4th step in width scale 3308 | 5 = 5th step in width scale 3309 | 3310 | -10 = literal value 10% 3311 | -20 = literal value 20% 3312 | -25 = literal value 25% 3313 | -33 = literal value 33% 3314 | -34 = literal value 34% 3315 | -40 = literal value 40% 3316 | -50 = literal value 50% 3317 | -60 = literal value 60% 3318 | -75 = literal value 75% 3319 | -80 = literal value 80% 3320 | -100 = literal value 100% 3321 | 3322 | 3323 | Media Query Extensions: 3324 | -ns = not-small 3325 | -m = medium 3326 | -l = large 3327 | 3328 | */ 3329 | 3330 | /* Width Scale */ 3331 | 3332 | .w1 { 3333 | width: 1rem; 3334 | } 3335 | 3336 | .w2 { 3337 | width: 2rem; 3338 | } 3339 | 3340 | .w3 { 3341 | width: 4rem; 3342 | } 3343 | 3344 | .w4 { 3345 | width: 8rem; 3346 | } 3347 | 3348 | .w5 { 3349 | width: 16rem; 3350 | } 3351 | 3352 | .w-10 { 3353 | width: 10%; 3354 | } 3355 | 3356 | .w-20 { 3357 | width: 20%; 3358 | } 3359 | 3360 | .w-25 { 3361 | width: 25%; 3362 | } 3363 | 3364 | .w-33 { 3365 | width: 33%; 3366 | } 3367 | 3368 | .w-34 { 3369 | width: 34%; 3370 | } 3371 | 3372 | .w-40 { 3373 | width: 40%; 3374 | } 3375 | 3376 | .w-50 { 3377 | width: 50%; 3378 | } 3379 | 3380 | .w-60 { 3381 | width: 60%; 3382 | } 3383 | 3384 | .w-75 { 3385 | width: 75%; 3386 | } 3387 | 3388 | .w-80 { 3389 | width: 80%; 3390 | } 3391 | 3392 | .w-100 { 3393 | width: 100%; 3394 | } 3395 | 3396 | .w-at { 3397 | width: auto; 3398 | } 3399 | 3400 | @media screen and (min-width: 42em) { 3401 | .w1-ns { 3402 | width: 1rem; 3403 | } 3404 | 3405 | .w2-ns { 3406 | width: 2rem; 3407 | } 3408 | 3409 | .w3-ns { 3410 | width: 4rem; 3411 | } 3412 | 3413 | .w4-ns { 3414 | width: 8rem; 3415 | } 3416 | 3417 | .w5-ns { 3418 | width: 16rem; 3419 | } 3420 | 3421 | .w-10-ns { 3422 | width: 10%; 3423 | } 3424 | 3425 | .w-20-ns { 3426 | width: 20%; 3427 | } 3428 | 3429 | .w-25-ns { 3430 | width: 25%; 3431 | } 3432 | 3433 | .w-33-ns { 3434 | width: 33%; 3435 | } 3436 | 3437 | .w-34-ns { 3438 | width: 34%; 3439 | } 3440 | 3441 | .w-40-ns { 3442 | width: 40%; 3443 | } 3444 | 3445 | .w-50-ns { 3446 | width: 50%; 3447 | } 3448 | 3449 | .w-60-ns { 3450 | width: 60%; 3451 | } 3452 | 3453 | .w-75-ns { 3454 | width: 75%; 3455 | } 3456 | 3457 | .w-80-ns { 3458 | width: 80%; 3459 | } 3460 | 3461 | .w-100-ns { 3462 | width: 100%; 3463 | } 3464 | 3465 | .w-at-ns { 3466 | width: auto; 3467 | } 3468 | } 3469 | 3470 | @media screen and (min-width: 42em) and (max-width: 64em) { 3471 | .w1-m { 3472 | width: 1rem; 3473 | } 3474 | 3475 | .w2-m { 3476 | width: 2rem; 3477 | } 3478 | 3479 | .w3-m { 3480 | width: 4rem; 3481 | } 3482 | 3483 | .w4-m { 3484 | width: 8rem; 3485 | } 3486 | 3487 | .w5-m { 3488 | width: 16rem; 3489 | } 3490 | 3491 | .w-10-m { 3492 | width: 10%; 3493 | } 3494 | 3495 | .w-20-m { 3496 | width: 20%; 3497 | } 3498 | 3499 | .w-25-m { 3500 | width: 25%; 3501 | } 3502 | 3503 | .w-33-m { 3504 | width: 33%; 3505 | } 3506 | 3507 | .w-34-m { 3508 | width: 34%; 3509 | } 3510 | 3511 | .w-40-m { 3512 | width: 40%; 3513 | } 3514 | 3515 | .w-50-m { 3516 | width: 50%; 3517 | } 3518 | 3519 | .w-60-m { 3520 | width: 60%; 3521 | } 3522 | 3523 | .w-75-m { 3524 | width: 75%; 3525 | } 3526 | 3527 | .w-80-m { 3528 | width: 80%; 3529 | } 3530 | 3531 | .w-100-m { 3532 | width: 100%; 3533 | } 3534 | 3535 | .w-at-m { 3536 | width: auto; 3537 | } 3538 | } 3539 | 3540 | @media screen and (min-width: 64em) { 3541 | .w1-l { 3542 | width: 1rem; 3543 | } 3544 | 3545 | .w2-l { 3546 | width: 2rem; 3547 | } 3548 | 3549 | .w3-l { 3550 | width: 4rem; 3551 | } 3552 | 3553 | .w4-l { 3554 | width: 8rem; 3555 | } 3556 | 3557 | .w5-l { 3558 | width: 16rem; 3559 | } 3560 | 3561 | .w-10-l { 3562 | width: 10%; 3563 | } 3564 | 3565 | .w-20-l { 3566 | width: 20%; 3567 | } 3568 | 3569 | .w-25-l { 3570 | width: 25%; 3571 | } 3572 | 3573 | .w-33-l { 3574 | width: 33%; 3575 | } 3576 | 3577 | .w-34-l { 3578 | width: 34%; 3579 | } 3580 | 3581 | .w-40-l { 3582 | width: 40%; 3583 | } 3584 | 3585 | .w-50-l { 3586 | width: 50%; 3587 | } 3588 | 3589 | .w-60-l { 3590 | width: 60%; 3591 | } 3592 | 3593 | .w-75-l { 3594 | width: 75%; 3595 | } 3596 | 3597 | .w-80-l { 3598 | width: 80%; 3599 | } 3600 | 3601 | .w-100-l { 3602 | width: 100%; 3603 | } 3604 | 3605 | .w-at-l { 3606 | width: auto; 3607 | } 3608 | } 3609 | 3610 | /* 3611 | 3612 | OVERFLOWS 3613 | 3614 | */ 3615 | 3616 | .of-vis { 3617 | overflow: visible; 3618 | } 3619 | 3620 | .of-hid { 3621 | overflow: hidden; 3622 | } 3623 | 3624 | .of-scr { 3625 | overflow: scroll; 3626 | } 3627 | 3628 | .of-aut { 3629 | overflow: auto; 3630 | } 3631 | 3632 | .ofx-vis { 3633 | overflow-x: visible; 3634 | } 3635 | 3636 | .ofx-hid { 3637 | overflow-x: hidden; 3638 | } 3639 | 3640 | .ofx-scr { 3641 | overflow-x: scroll; 3642 | } 3643 | 3644 | .ofx-aut { 3645 | overflow-x: auto; 3646 | } 3647 | 3648 | .ofy-vis { 3649 | overflow-y: visible; 3650 | } 3651 | 3652 | .ofy-hid { 3653 | overflow-y: hidden; 3654 | } 3655 | 3656 | .ofy-scr { 3657 | overflow-y: scroll; 3658 | } 3659 | 3660 | .ofy-aut { 3661 | overflow-y: auto; 3662 | } 3663 | 3664 | @media screen and (min-width: 42em) { 3665 | .of-vis-ns { 3666 | overflow: visible; 3667 | } 3668 | 3669 | .of-hid-ns { 3670 | overflow: hidden; 3671 | } 3672 | 3673 | .of-scr-ns { 3674 | overflow: scroll; 3675 | } 3676 | 3677 | .of-aut-ns { 3678 | overflow: auto; 3679 | } 3680 | 3681 | .ofx-vis-ns { 3682 | overflow-x: visible; 3683 | } 3684 | 3685 | .ofx-hid-ns { 3686 | overflow-x: hidden; 3687 | } 3688 | 3689 | .ofx-scr-ns { 3690 | overflow-x: scroll; 3691 | } 3692 | 3693 | .ofx-aut-ns { 3694 | overflow-x: auto; 3695 | } 3696 | 3697 | .ofy-vis-ns { 3698 | overflow-y: visible; 3699 | } 3700 | 3701 | .ofy-hid-ns { 3702 | overflow-y: hidden; 3703 | } 3704 | 3705 | .ofy-scr-ns { 3706 | overflow-y: scroll; 3707 | } 3708 | 3709 | .ofy-aut-ns { 3710 | overflow-y: auto; 3711 | } 3712 | } 3713 | 3714 | @media screen and (min-width: 42em) and (max-width: 64em) { 3715 | .of-vis-m { 3716 | overflow: visible; 3717 | } 3718 | 3719 | .of-hid-m { 3720 | overflow: hidden; 3721 | } 3722 | 3723 | .of-scr-m { 3724 | overflow: scroll; 3725 | } 3726 | 3727 | .of-aut-m { 3728 | overflow: auto; 3729 | } 3730 | 3731 | .ofx-vis-m { 3732 | overflow-x: visible; 3733 | } 3734 | 3735 | .ofx-hid-m { 3736 | overflow-x: hidden; 3737 | } 3738 | 3739 | .ofx-scr-m { 3740 | overflow-x: scroll; 3741 | } 3742 | 3743 | .ofx-aut-m { 3744 | overflow-x: auto; 3745 | } 3746 | 3747 | .ofy-vis-m { 3748 | overflow-y: visible; 3749 | } 3750 | 3751 | .ofy-hid-m { 3752 | overflow-y: hidden; 3753 | } 3754 | 3755 | .ofy-scr-m { 3756 | overflow-y: scroll; 3757 | } 3758 | 3759 | .ofy-aut-m { 3760 | overflow-y: auto; 3761 | } 3762 | } 3763 | 3764 | @media screen and (min-width: 64em) { 3765 | .of-vis-l { 3766 | overflow: visible; 3767 | } 3768 | 3769 | .of-hid-l { 3770 | overflow: hidden; 3771 | } 3772 | 3773 | .of-scr-l { 3774 | overflow: scroll; 3775 | } 3776 | 3777 | .of-aut-l { 3778 | overflow: auto; 3779 | } 3780 | 3781 | .ofx-vis-l { 3782 | overflow-x: visible; 3783 | } 3784 | 3785 | .ofx-hid-l { 3786 | overflow-x: hidden; 3787 | } 3788 | 3789 | .ofx-scr-l { 3790 | overflow-x: scroll; 3791 | } 3792 | 3793 | .ofx-aut-l { 3794 | overflow-x: auto; 3795 | } 3796 | 3797 | .ofy-vis-l { 3798 | overflow-y: visible; 3799 | } 3800 | 3801 | .ofy-hid-l { 3802 | overflow-y: hidden; 3803 | } 3804 | 3805 | .ofy-scr-l { 3806 | overflow-y: scroll; 3807 | } 3808 | 3809 | .ofy-aut-l { 3810 | overflow-y: auto; 3811 | } 3812 | } 3813 | 3814 | /* 3815 | 3816 | POSITIONING 3817 | 3818 | */ 3819 | 3820 | .pos-stat { 3821 | position: static; 3822 | } 3823 | 3824 | .pos-rel { 3825 | position: relative; 3826 | } 3827 | 3828 | .pos-abs { 3829 | position: absolute; 3830 | } 3831 | 3832 | .pos-fix { 3833 | position: fixed; 3834 | } 3835 | 3836 | /* Values */ 3837 | 3838 | .top-0 { 3839 | top: 0; 3840 | } 3841 | 3842 | .left-0 { 3843 | left: 0; 3844 | } 3845 | 3846 | .right-0 { 3847 | right: 0; 3848 | } 3849 | 3850 | .bottom-0 { 3851 | bottom: 0; 3852 | } 3853 | 3854 | .top-1 { 3855 | top: 1rem; 3856 | } 3857 | 3858 | .left-1 { 3859 | left: 1rem; 3860 | } 3861 | 3862 | .right-1 { 3863 | right: 1rem; 3864 | } 3865 | 3866 | .bottom-1 { 3867 | bottom: 1rem; 3868 | } 3869 | 3870 | .top-2 { 3871 | top: 2rem; 3872 | } 3873 | 3874 | .left-2 { 3875 | left: 2rem; 3876 | } 3877 | 3878 | .right-2 { 3879 | right: 2rem; 3880 | } 3881 | 3882 | .bottom-2 { 3883 | bottom: 2rem; 3884 | } 3885 | 3886 | .top-4 { 3887 | top: 4rem; 3888 | } 3889 | 3890 | .left-4 { 3891 | left: 4rem; 3892 | } 3893 | 3894 | .right-4 { 3895 | right: 4rem; 3896 | } 3897 | 3898 | .bottom-4 { 3899 | bottom: 4rem; 3900 | } 3901 | 3902 | /* Top Percentage based scale */ 3903 | 3904 | .top-auto { 3905 | top: auto; 3906 | } 3907 | 3908 | .top-i { 3909 | top: inherit; 3910 | } 3911 | 3912 | .center { 3913 | margin-right: auto; 3914 | margin-left: auto; 3915 | } 3916 | 3917 | @media screen and (min-width: 42em) { 3918 | .pos-stat-ns { 3919 | position: static; 3920 | } 3921 | 3922 | .pos-rel-ns { 3923 | position: relative; 3924 | } 3925 | 3926 | .pos-abs-ns { 3927 | position: absolute; 3928 | } 3929 | 3930 | .pos-fix-ns { 3931 | position: fixed; 3932 | } 3933 | 3934 | .top-0-ns { 3935 | top: 0; 3936 | } 3937 | 3938 | .left-0-ns { 3939 | left: 0; 3940 | } 3941 | 3942 | .right-0-ns { 3943 | right: 0; 3944 | } 3945 | 3946 | .bottom-0-ns { 3947 | bottom: 0; 3948 | } 3949 | 3950 | .top-1-ns { 3951 | top: 1rem; 3952 | } 3953 | 3954 | .left-1-ns { 3955 | left: 1rem; 3956 | } 3957 | 3958 | .right-1-ns { 3959 | right: 1rem; 3960 | } 3961 | 3962 | .bottom-1-ns { 3963 | bottom: 1rem; 3964 | } 3965 | 3966 | .top-2-ns { 3967 | top: 2rem; 3968 | } 3969 | 3970 | .left-2-ns { 3971 | left: 2rem; 3972 | } 3973 | 3974 | .right-2-ns { 3975 | right: 2rem; 3976 | } 3977 | 3978 | .bottom-2-ns { 3979 | bottom: 2rem; 3980 | } 3981 | 3982 | .top-4-ns { 3983 | top: 4rem; 3984 | } 3985 | 3986 | .left-4-ns { 3987 | left: 4rem; 3988 | } 3989 | 3990 | .right-4-ns { 3991 | right: 4rem; 3992 | } 3993 | 3994 | .bottom-4-ns { 3995 | bottom: 4rem; 3996 | } 3997 | 3998 | .top-auto-ns { 3999 | top: auto; 4000 | } 4001 | 4002 | .top-i-ns { 4003 | top: inherit; 4004 | } 4005 | 4006 | .center-ns { 4007 | margin-right: auto; 4008 | margin-left: auto; 4009 | } 4010 | } 4011 | 4012 | @media screen and (min-width: 42em) and (max-width: 64em) { 4013 | .pos-stat-m { 4014 | position: static; 4015 | } 4016 | 4017 | .pos-rel-m { 4018 | position: relative; 4019 | } 4020 | 4021 | .pos-abs-m { 4022 | position: absolute; 4023 | } 4024 | 4025 | .pos-fix-m { 4026 | position: fixed; 4027 | } 4028 | 4029 | .top-0-m { 4030 | top: 0; 4031 | } 4032 | 4033 | .left-0-m { 4034 | left: 0; 4035 | } 4036 | 4037 | .right-0-m { 4038 | right: 0; 4039 | } 4040 | 4041 | .bottom-0-m { 4042 | bottom: 0; 4043 | } 4044 | 4045 | .top-1-m { 4046 | top: 1rem; 4047 | } 4048 | 4049 | .left-1-m { 4050 | left: 1rem; 4051 | } 4052 | 4053 | .right-1-m { 4054 | right: 1rem; 4055 | } 4056 | 4057 | .bottom-1-m { 4058 | bottom: 1rem; 4059 | } 4060 | 4061 | .top-2-m { 4062 | top: 2rem; 4063 | } 4064 | 4065 | .left-2-m { 4066 | left: 2rem; 4067 | } 4068 | 4069 | .right-2-m { 4070 | right: 2rem; 4071 | } 4072 | 4073 | .bottom-2-m { 4074 | bottom: 2rem; 4075 | } 4076 | 4077 | .top-4-m { 4078 | top: 4rem; 4079 | } 4080 | 4081 | .left-4-m { 4082 | left: 4rem; 4083 | } 4084 | 4085 | .right-4-m { 4086 | right: 4rem; 4087 | } 4088 | 4089 | .bottom-4-m { 4090 | bottom: 4rem; 4091 | } 4092 | 4093 | .top-auto-m { 4094 | top: auto; 4095 | } 4096 | 4097 | .top-i-m { 4098 | top: inherit; 4099 | } 4100 | 4101 | .center-m { 4102 | margin-right: auto; 4103 | margin-left: auto; 4104 | } 4105 | } 4106 | 4107 | @media screen and (min-width: 64em) { 4108 | .pos-stat-l { 4109 | position: static; 4110 | } 4111 | 4112 | .pos-rel-l { 4113 | position: relative; 4114 | } 4115 | 4116 | .pos-abs-l { 4117 | position: absolute; 4118 | } 4119 | 4120 | .pos-fix-l { 4121 | position: fixed; 4122 | } 4123 | 4124 | .top-0-l { 4125 | top: 0; 4126 | } 4127 | 4128 | .left-0-l { 4129 | left: 0; 4130 | } 4131 | 4132 | .right-0-l { 4133 | right: 0; 4134 | } 4135 | 4136 | .bottom-0-l { 4137 | bottom: 0; 4138 | } 4139 | 4140 | .top-1-l { 4141 | top: 1rem; 4142 | } 4143 | 4144 | .left-1-l { 4145 | left: 1rem; 4146 | } 4147 | 4148 | .right-1-l { 4149 | right: 1rem; 4150 | } 4151 | 4152 | .bottom-1-l { 4153 | bottom: 1rem; 4154 | } 4155 | 4156 | .top-2-l { 4157 | top: 2rem; 4158 | } 4159 | 4160 | .left-2-l { 4161 | left: 2rem; 4162 | } 4163 | 4164 | .right-2-l { 4165 | right: 2rem; 4166 | } 4167 | 4168 | .bottom-2-l { 4169 | bottom: 2rem; 4170 | } 4171 | 4172 | .top-4-l { 4173 | top: 4rem; 4174 | } 4175 | 4176 | .left-4-l { 4177 | left: 4rem; 4178 | } 4179 | 4180 | .right-4-l { 4181 | right: 4rem; 4182 | } 4183 | 4184 | .bottom-4-l { 4185 | bottom: 4rem; 4186 | } 4187 | 4188 | .top-auto-l { 4189 | top: auto; 4190 | } 4191 | 4192 | .top-i-l { 4193 | top: inherit; 4194 | } 4195 | 4196 | .center-l { 4197 | margin-right: auto; 4198 | margin-left: auto; 4199 | } 4200 | } 4201 | 4202 | /* 4203 | 4204 | SKINS 4205 | 4206 | */ 4207 | 4208 | /* Text colors */ 4209 | 4210 | .black-90 { 4211 | color: rgba(0, 0, 0, .9); 4212 | } 4213 | 4214 | .black-80 { 4215 | color: rgba(0, 0, 0, .8); 4216 | } 4217 | 4218 | .black-70 { 4219 | color: rgba(0, 0, 0, .7); 4220 | } 4221 | 4222 | .black-60 { 4223 | color: rgba(0, 0, 0, .6); 4224 | } 4225 | 4226 | .black-50 { 4227 | color: rgba(0, 0, 0, .5); 4228 | } 4229 | 4230 | .black-40 { 4231 | color: rgba(0, 0, 0, .4); 4232 | } 4233 | 4234 | .black-30 { 4235 | color: rgba(0, 0, 0, .3); 4236 | } 4237 | 4238 | .black-20 { 4239 | color: rgba(0, 0, 0, .2); 4240 | } 4241 | 4242 | .black-10 { 4243 | color: rgba(0, 0, 0, .1); 4244 | } 4245 | 4246 | .white-90 { 4247 | color: rgba(255, 255, 255, .9); 4248 | } 4249 | 4250 | .white-80 { 4251 | color: rgba(255, 255, 255, .8); 4252 | } 4253 | 4254 | .white-70 { 4255 | color: rgba(255, 255, 255, .7); 4256 | } 4257 | 4258 | .white-60 { 4259 | color: rgba(255, 255, 255, .6); 4260 | } 4261 | 4262 | .white-50 { 4263 | color: rgba(255, 255, 255, .5); 4264 | } 4265 | 4266 | .white-40 { 4267 | color: rgba(255, 255, 255, .4); 4268 | } 4269 | 4270 | .white-30 { 4271 | color: rgba(255, 255, 255, .3); 4272 | } 4273 | 4274 | .white-20 { 4275 | color: rgba(255, 255, 255, .2); 4276 | } 4277 | 4278 | .white-10 { 4279 | color: rgba(255, 255, 255, .1); 4280 | } 4281 | 4282 | .black { 4283 | color: #111; 4284 | } 4285 | 4286 | .dark-gray { 4287 | color: #333; 4288 | } 4289 | 4290 | .mid-gray { 4291 | color: #555; 4292 | } 4293 | 4294 | .gray { 4295 | color: #777; 4296 | } 4297 | 4298 | .silver { 4299 | color: #999; 4300 | } 4301 | 4302 | .light-silver { 4303 | color: #aaa; 4304 | } 4305 | 4306 | .light-gray { 4307 | color: #eee; 4308 | } 4309 | 4310 | .near-white { 4311 | color: #f4f4f4; 4312 | } 4313 | 4314 | .white { 4315 | color: #fff; 4316 | } 4317 | 4318 | .blue { 4319 | color: #0074D9; 4320 | } 4321 | 4322 | .light-blue { 4323 | color: #64a8ff; 4324 | } 4325 | 4326 | .lightest-blue { 4327 | color: #a2dfff; 4328 | } 4329 | 4330 | .dark-blue { 4331 | color: #0045a1; 4332 | } 4333 | 4334 | .darkest-blue { 4335 | color: #002f86; 4336 | } 4337 | 4338 | .yellow { 4339 | color: #fff93c; 4340 | } 4341 | 4342 | .light-yellow { 4343 | color: #fffa60; 4344 | } 4345 | 4346 | .lightest-yellow { 4347 | color: #fffca6; 4348 | } 4349 | 4350 | .dark-yellow { 4351 | color: #e2c100; 4352 | } 4353 | 4354 | .darkest-yellow { 4355 | color: #c4a600; 4356 | } 4357 | 4358 | .orange { 4359 | color: #FF851B; 4360 | } 4361 | 4362 | .light-orange { 4363 | color: #ffa942; 4364 | } 4365 | 4366 | .lightest-orange { 4367 | color: #ffc55d; 4368 | } 4369 | 4370 | .dark-orange { 4371 | color: #d05e00; 4372 | } 4373 | 4374 | .darkest-orange { 4375 | color: #b14400; 4376 | } 4377 | 4378 | .red { 4379 | color: #d82c2c; 4380 | } 4381 | 4382 | .light-red { 4383 | color: #f94f44; 4384 | } 4385 | 4386 | .lightest-red { 4387 | color: #ff6c5c; 4388 | } 4389 | 4390 | .dark-red { 4391 | color: #bd001a; 4392 | } 4393 | 4394 | .darkest-red { 4395 | color: #9d0003; 4396 | } 4397 | 4398 | .teal { 4399 | color: #27bfa8; 4400 | } 4401 | 4402 | .light-teal { 4403 | color: #4eddc5; 4404 | } 4405 | 4406 | .lightest-teal { 4407 | color: #6ffae0; 4408 | } 4409 | 4410 | .dark-teal { 4411 | color: #25a28f; 4412 | } 4413 | 4414 | .darkest-teal { 4415 | color: #008876; 4416 | } 4417 | 4418 | .green { 4419 | color: #3D9970; 4420 | } 4421 | 4422 | .light-green { 4423 | color: #5ab48a; 4424 | } 4425 | 4426 | .lightest-green { 4427 | color: #75d0a4; 4428 | } 4429 | 4430 | .dark-green { 4431 | color: #1e7f58; 4432 | } 4433 | 4434 | .darkest-green { 4435 | color: #006540; 4436 | } 4437 | 4438 | .pink { 4439 | color: #F012BE; 4440 | } 4441 | 4442 | .light-pink { 4443 | color: #ff57e8; 4444 | } 4445 | 4446 | .lightest-pink { 4447 | color: #ff81ff; 4448 | } 4449 | 4450 | .dark-pink { 4451 | color: #d100a3; 4452 | } 4453 | 4454 | .darkest-pink { 4455 | color: #b20088; 4456 | } 4457 | 4458 | .purple { 4459 | color: #980bc6; 4460 | } 4461 | 4462 | .light-purple { 4463 | color: #b536e2; 4464 | } 4465 | 4466 | .lightest-purple { 4467 | color: #d355ff; 4468 | } 4469 | 4470 | .dark-purple { 4471 | color: #7b00a9; 4472 | } 4473 | 4474 | .darkest-purple { 4475 | color: #5f008e; 4476 | } 4477 | 4478 | /* Background colors */ 4479 | 4480 | .bg-black { 4481 | background-color: #111; 4482 | } 4483 | 4484 | .bg-dark-gray { 4485 | background-color: #333; 4486 | } 4487 | 4488 | .bg-mid-gray { 4489 | background-color: #555; 4490 | } 4491 | 4492 | .bg-gray { 4493 | background-color: #777; 4494 | } 4495 | 4496 | .bg-silver { 4497 | background-color: #999; 4498 | } 4499 | 4500 | .bg-light-silver { 4501 | background-color: #aaa; 4502 | } 4503 | 4504 | .bg-light-gray { 4505 | background-color: #eee; 4506 | } 4507 | 4508 | .bg-near-white { 4509 | background-color: #f4f4f4; 4510 | } 4511 | 4512 | .bg-white { 4513 | background-color: #fff; 4514 | } 4515 | 4516 | .bg-blue { 4517 | background-color: #0074D9; 4518 | } 4519 | 4520 | .bg-light-blue { 4521 | background-color: #64a8ff; 4522 | } 4523 | 4524 | .bg-lightest-blue { 4525 | background-color: #a2dfff; 4526 | } 4527 | 4528 | .bg-dark-blue { 4529 | background-color: #0045a1; 4530 | } 4531 | 4532 | .bg-darkest-blue { 4533 | background-color: #002f86; 4534 | } 4535 | 4536 | .bg-yellow { 4537 | background-color: #fff93c; 4538 | } 4539 | 4540 | .bg-light-yellow { 4541 | background-color: #fffa60; 4542 | } 4543 | 4544 | .bg-lightest-yellow { 4545 | background-color: #fffca6; 4546 | } 4547 | 4548 | .bg-dark-yellow { 4549 | background-color: #e2c100; 4550 | } 4551 | 4552 | .bg-darkest-yellow { 4553 | background-color: #c4a600; 4554 | } 4555 | 4556 | .bg-orange { 4557 | background-color: #FF851B; 4558 | } 4559 | 4560 | .bg-light-orange { 4561 | background-color: #ffa942; 4562 | } 4563 | 4564 | .bg-lightest-orange { 4565 | background-color: #ffc55d; 4566 | } 4567 | 4568 | .bg-dark-orange { 4569 | background-color: #d05e00; 4570 | } 4571 | 4572 | .bg-darkest-orange { 4573 | background-color: #b14400; 4574 | } 4575 | 4576 | .bg-red { 4577 | background-color: #d82c2c; 4578 | } 4579 | 4580 | .bg-light-red { 4581 | background-color: #f94f44; 4582 | } 4583 | 4584 | .bg-lightest-red { 4585 | background-color: #ff6c5c; 4586 | } 4587 | 4588 | .bg-dark-red { 4589 | background-color: #bd001a; 4590 | } 4591 | 4592 | .bg-darkest-red { 4593 | background-color: #9d0003; 4594 | } 4595 | 4596 | .bg-teal { 4597 | background-color: #27bfa8; 4598 | } 4599 | 4600 | .bg-light-teal { 4601 | background-color: #4eddc5; 4602 | } 4603 | 4604 | .bg-lightest-teal { 4605 | background-color: #6ffae0; 4606 | } 4607 | 4608 | .bg-dark-teal { 4609 | background-color: #25a28f; 4610 | } 4611 | 4612 | .bg-darkest-teal { 4613 | background-color: #008876; 4614 | } 4615 | 4616 | .bg-green { 4617 | background-color: #3D9970; 4618 | } 4619 | 4620 | .bg-light-green { 4621 | background-color: #5ab48a; 4622 | } 4623 | 4624 | .bg-lightest-green { 4625 | background-color: #75d0a4; 4626 | } 4627 | 4628 | .bg-dark-green { 4629 | background-color: #1e7f58; 4630 | } 4631 | 4632 | .bg-darkest-green { 4633 | background-color: #006540; 4634 | } 4635 | 4636 | .bg-pink { 4637 | background-color: #F012BE; 4638 | } 4639 | 4640 | .bg-light-pink { 4641 | background-color: #ff57e8; 4642 | } 4643 | 4644 | .bg-lightest-pink { 4645 | background-color: #ff81ff; 4646 | } 4647 | 4648 | .bg-dark-pink { 4649 | background-color: #d100a3; 4650 | } 4651 | 4652 | .bg-darkest-pink { 4653 | background-color: #b20088; 4654 | } 4655 | 4656 | .bg-purple { 4657 | background-color: #980bc6; 4658 | } 4659 | 4660 | .bg-light-purple { 4661 | background-color: #b536e2; 4662 | } 4663 | 4664 | .bg-lightest-purple { 4665 | background-color: #d355ff; 4666 | } 4667 | 4668 | .bg-dark-purple { 4669 | background-color: #7b00a9; 4670 | } 4671 | 4672 | .bg-darkest-purple { 4673 | background-color: #5f008e; 4674 | } 4675 | 4676 | /* Skins for specific pseudoclasses */ 4677 | 4678 | .focus-black:focus { 4679 | color: #000; 4680 | } 4681 | 4682 | .focus-near-black:focus { 4683 | color: #111; 4684 | } 4685 | 4686 | .focus-dark-gray:focus { 4687 | color: #333; 4688 | } 4689 | 4690 | .focus-mid-gray:focus { 4691 | color: #555; 4692 | } 4693 | 4694 | .focus-gray:focus { 4695 | color: #777; 4696 | } 4697 | 4698 | .focus-silver:focus { 4699 | color: #999; 4700 | } 4701 | 4702 | .focus-light-silver:focus { 4703 | color: #aaa; 4704 | } 4705 | 4706 | .focus-moon-gray:focus { 4707 | color: #ccc; 4708 | } 4709 | 4710 | .focus-light-gray:focus { 4711 | color: #eee; 4712 | } 4713 | 4714 | .focus-near-white:focus { 4715 | color: #f4f4f4; 4716 | } 4717 | 4718 | .focus-white:focus { 4719 | color: #fff; 4720 | } 4721 | 4722 | .focus-blue:focus { 4723 | color: #0074D9; 4724 | } 4725 | 4726 | .focus-light-blue:focus { 4727 | color: #64a8ff; 4728 | } 4729 | 4730 | .focus-lightest-blue:focus { 4731 | color: #a2dfff; 4732 | } 4733 | 4734 | .focus-dark-blue:focus { 4735 | color: #0045a1; 4736 | } 4737 | 4738 | .focus-darkest-blue:focus { 4739 | color: #002f86; 4740 | } 4741 | 4742 | .focus-yellow:focus { 4743 | color: #fff93c; 4744 | } 4745 | 4746 | .focus-light-yellow:focus { 4747 | color: #fffa60; 4748 | } 4749 | 4750 | .focus-lightest-yellow:focus { 4751 | color: #fffca6; 4752 | } 4753 | 4754 | .focus-dark-yellow:focus { 4755 | color: #e2c100; 4756 | } 4757 | 4758 | .focus-darkest-yellow:focus { 4759 | color: #c4a600; 4760 | } 4761 | 4762 | .focus-orange:focus { 4763 | color: #FF851B; 4764 | } 4765 | 4766 | .focus-light-orange:focus { 4767 | color: #ffa942; 4768 | } 4769 | 4770 | .focus-lightest-orange:focus { 4771 | color: #ffc55d; 4772 | } 4773 | 4774 | .focus-dark-orange:focus { 4775 | color: #d05e00; 4776 | } 4777 | 4778 | .focus-darkest-orange:focus { 4779 | color: #b14400; 4780 | } 4781 | 4782 | .focus-red:focus { 4783 | color: #d82c2c; 4784 | } 4785 | 4786 | .focus-light-red:focus { 4787 | color: #f94f44; 4788 | } 4789 | 4790 | .focus-lightest-red:focus { 4791 | color: #ff6c5c; 4792 | } 4793 | 4794 | .focus-dark-red:focus { 4795 | color: #bd001a; 4796 | } 4797 | 4798 | .focus-darkest-red:focus { 4799 | color: #9d0003; 4800 | } 4801 | 4802 | .focus-teal:focus { 4803 | color: #27bfa8; 4804 | } 4805 | 4806 | .focus-light-teal:focus { 4807 | color: #4eddc5; 4808 | } 4809 | 4810 | .focus-lightest-teal:focus { 4811 | color: #6ffae0; 4812 | } 4813 | 4814 | .focus-dark-teal:focus { 4815 | color: #25a28f; 4816 | } 4817 | 4818 | .focus-darkest-teal:focus { 4819 | color: #008876; 4820 | } 4821 | 4822 | .focus-green:focus { 4823 | color: #3D9970; 4824 | } 4825 | 4826 | .focus-light-green:focus { 4827 | color: #5ab48a; 4828 | } 4829 | 4830 | .focus-lightest-green:focus { 4831 | color: #75d0a4; 4832 | } 4833 | 4834 | .focus-dark-green:focus { 4835 | color: #1e7f58; 4836 | } 4837 | 4838 | .focus-darkest-green:focus { 4839 | color: #006540; 4840 | } 4841 | 4842 | .focus-pink:focus { 4843 | color: #F012BE; 4844 | } 4845 | 4846 | .focus-light-pink:focus { 4847 | color: #ff57e8; 4848 | } 4849 | 4850 | .focus-lightest-pink:focus { 4851 | color: #ff81ff; 4852 | } 4853 | 4854 | .focus-dark-pink:focus { 4855 | color: #d100a3; 4856 | } 4857 | 4858 | .focus-darkest-pink:focus { 4859 | color: #b20088; 4860 | } 4861 | 4862 | .focus-purple:focus { 4863 | color: #980bc6; 4864 | } 4865 | 4866 | .focus-light-purple:focus { 4867 | color: #b536e2; 4868 | } 4869 | 4870 | .focus-lightest-purple:focus { 4871 | color: #d355ff; 4872 | } 4873 | 4874 | .focus-dark-purple:focus { 4875 | color: #7b00a9; 4876 | } 4877 | 4878 | .focus-darkest-purple:focus { 4879 | color: #5f008e; 4880 | } 4881 | 4882 | .bg-focus-black:focus { 4883 | background-color: #000; 4884 | } 4885 | 4886 | .bg-focus-near-black:focus { 4887 | background-color: #111; 4888 | } 4889 | 4890 | .bg-focus-dark-gray:focus { 4891 | background-color: #333; 4892 | } 4893 | 4894 | .bg-focus-mid-gray:focus { 4895 | background-color: #555; 4896 | } 4897 | 4898 | .bg-focus-gray:focus { 4899 | background-color: #777; 4900 | } 4901 | 4902 | .bg-focus-silver:focus { 4903 | background-color: #999; 4904 | } 4905 | 4906 | .bg-focus-light-silver:focus { 4907 | background-color: #aaa; 4908 | } 4909 | 4910 | .bg-focus-moon-gray:focus { 4911 | background-color: #ccc; 4912 | } 4913 | 4914 | .bg-focus-light-gray:focus { 4915 | background-color: #eee; 4916 | } 4917 | 4918 | .bg-focus-near-white:focus { 4919 | background-color: #f4f4f4; 4920 | } 4921 | 4922 | .bg-focus-white:focus { 4923 | background-color: #fff; 4924 | } 4925 | 4926 | .bg-focus-blue:focus { 4927 | background-color: #0074D9; 4928 | } 4929 | 4930 | .bg-focus-light-blue:focus { 4931 | background-color: #64a8ff; 4932 | } 4933 | 4934 | .bg-focus-lightest-blue:focus { 4935 | background-color: #a2dfff; 4936 | } 4937 | 4938 | .bg-focus-dark-blue:focus { 4939 | background-color: #0045a1; 4940 | } 4941 | 4942 | .bg-focus-darkest-blue:focus { 4943 | background-color: #002f86; 4944 | } 4945 | 4946 | .bg-focus-yellow:focus { 4947 | background-color: #fff93c; 4948 | } 4949 | 4950 | .bg-focus-light-yellow:focus { 4951 | background-color: #fffa60; 4952 | } 4953 | 4954 | .bg-focus-lightest-yellow:focus { 4955 | background-color: #fffca6; 4956 | } 4957 | 4958 | .bg-focus-dark-yellow:focus { 4959 | background-color: #e2c100; 4960 | } 4961 | 4962 | .bg-focus-darkest-yellow:focus { 4963 | background-color: #c4a600; 4964 | } 4965 | 4966 | .bg-focus-orange:focus { 4967 | background-color: #FF851B; 4968 | } 4969 | 4970 | .bg-focus-light-orange:focus { 4971 | background-color: #ffa942; 4972 | } 4973 | 4974 | .bg-focus-lightest-orange:focus { 4975 | background-color: #ffc55d; 4976 | } 4977 | 4978 | .bg-focus-dark-orange:focus { 4979 | background-color: #d05e00; 4980 | } 4981 | 4982 | .bg-focus-darkest-orange:focus { 4983 | background-color: #b14400; 4984 | } 4985 | 4986 | .bg-focus-red:focus { 4987 | background-color: #d82c2c; 4988 | } 4989 | 4990 | .bg-focus-light-red:focus { 4991 | background-color: #f94f44; 4992 | } 4993 | 4994 | .bg-focus-lightest-red:focus { 4995 | background-color: #ff6c5c; 4996 | } 4997 | 4998 | .bg-focus-dark-red:focus { 4999 | background-color: #bd001a; 5000 | } 5001 | 5002 | .bg-focus-darkest-red:focus { 5003 | background-color: #9d0003; 5004 | } 5005 | 5006 | .bg-focus-teal:focus { 5007 | background-color: #27bfa8; 5008 | } 5009 | 5010 | .bg-focus-light-teal:focus { 5011 | background-color: #4eddc5; 5012 | } 5013 | 5014 | .bg-focus-lightest-teal:focus { 5015 | background-color: #6ffae0; 5016 | } 5017 | 5018 | .bg-focus-dark-teal:focus { 5019 | background-color: #25a28f; 5020 | } 5021 | 5022 | .bg-focus-darkest-teal:focus { 5023 | background-color: #008876; 5024 | } 5025 | 5026 | .bg-focus-green:focus { 5027 | background-color: #3D9970; 5028 | } 5029 | 5030 | .bg-focus-light-green:focus { 5031 | background-color: #5ab48a; 5032 | } 5033 | 5034 | .bg-focus-lightest-green:focus { 5035 | background-color: #75d0a4; 5036 | } 5037 | 5038 | .bg-focus-dark-green:focus { 5039 | background-color: #1e7f58; 5040 | } 5041 | 5042 | .bg-focus-darkest-green:focus { 5043 | background-color: #006540; 5044 | } 5045 | 5046 | .bg-focus-pink:focus { 5047 | background-color: #F012BE; 5048 | } 5049 | 5050 | .bg-focus-light-pink:focus { 5051 | background-color: #ff57e8; 5052 | } 5053 | 5054 | .bg-focus-lightest-pink:focus { 5055 | background-color: #ff81ff; 5056 | } 5057 | 5058 | .bg-focus-dark-pink:focus { 5059 | background-color: #d100a3; 5060 | } 5061 | 5062 | .bg-focus-darkest-pink:focus { 5063 | background-color: #b20088; 5064 | } 5065 | 5066 | .bg-focus-purple:focus { 5067 | background-color: #980bc6; 5068 | } 5069 | 5070 | .bg-focus-light-purple:focus { 5071 | background-color: #b536e2; 5072 | } 5073 | 5074 | .bg-focus-lightest-purple:focus { 5075 | background-color: #d355ff; 5076 | } 5077 | 5078 | .bg-focus-dark-purple:focus { 5079 | background-color: #7b00a9; 5080 | } 5081 | 5082 | .bg-focus-darkest-purple:focus { 5083 | background-color: #5f008e; 5084 | } 5085 | 5086 | .hover-black:hover { 5087 | color: #000; 5088 | } 5089 | 5090 | .hover-near-black:hover { 5091 | color: #111; 5092 | } 5093 | 5094 | .hover-dark-gray:hover { 5095 | color: #333; 5096 | } 5097 | 5098 | .hover-mid-gray:hover { 5099 | color: #555; 5100 | } 5101 | 5102 | .hover-gray:hover { 5103 | color: #777; 5104 | } 5105 | 5106 | .hover-silver:hover { 5107 | color: #999; 5108 | } 5109 | 5110 | .hover-light-silver:hover { 5111 | color: #aaa; 5112 | } 5113 | 5114 | .hover-moon-gray:hover { 5115 | color: #ccc; 5116 | } 5117 | 5118 | .hover-light-gray:hover { 5119 | color: #eee; 5120 | } 5121 | 5122 | .hover-near-white:hover { 5123 | color: #f4f4f4; 5124 | } 5125 | 5126 | .hover-white:hover { 5127 | color: #fff; 5128 | } 5129 | 5130 | .hover-blue:hover { 5131 | color: #0074D9; 5132 | } 5133 | 5134 | .hover-light-blue:hover { 5135 | color: #64a8ff; 5136 | } 5137 | 5138 | .hover-lightest-blue:hover { 5139 | color: #a2dfff; 5140 | } 5141 | 5142 | .hover-dark-blue:hover { 5143 | color: #0045a1; 5144 | } 5145 | 5146 | .hover-darkest-blue:hover { 5147 | color: #002f86; 5148 | } 5149 | 5150 | .hover-yellow:hover { 5151 | color: #fff93c; 5152 | } 5153 | 5154 | .hover-light-yellow:hover { 5155 | color: #fffa60; 5156 | } 5157 | 5158 | .hover-lightest-yellow:hover { 5159 | color: #fffca6; 5160 | } 5161 | 5162 | .hover-dark-yellow:hover { 5163 | color: #e2c100; 5164 | } 5165 | 5166 | .hover-darkest-yellow:hover { 5167 | color: #c4a600; 5168 | } 5169 | 5170 | .hover-orange:hover { 5171 | color: #FF851B; 5172 | } 5173 | 5174 | .hover-light-orange:hover { 5175 | color: #ffa942; 5176 | } 5177 | 5178 | .hover-lightest-orange:hover { 5179 | color: #ffc55d; 5180 | } 5181 | 5182 | .hover-dark-orange:hover { 5183 | color: #d05e00; 5184 | } 5185 | 5186 | .hover-darkest-orange:hover { 5187 | color: #b14400; 5188 | } 5189 | 5190 | .hover-red:hover { 5191 | color: #d82c2c; 5192 | } 5193 | 5194 | .hover-light-red:hover { 5195 | color: #f94f44; 5196 | } 5197 | 5198 | .hover-lightest-red:hover { 5199 | color: #ff6c5c; 5200 | } 5201 | 5202 | .hover-dark-red:hover { 5203 | color: #bd001a; 5204 | } 5205 | 5206 | .hover-darkest-red:hover { 5207 | color: #9d0003; 5208 | } 5209 | 5210 | .hover-teal:hover { 5211 | color: #27bfa8; 5212 | } 5213 | 5214 | .hover-light-teal:hover { 5215 | color: #4eddc5; 5216 | } 5217 | 5218 | .hover-lightest-teal:hover { 5219 | color: #6ffae0; 5220 | } 5221 | 5222 | .hover-dark-teal:hover { 5223 | color: #25a28f; 5224 | } 5225 | 5226 | .hover-darkest-teal:hover { 5227 | color: #008876; 5228 | } 5229 | 5230 | .hover-green:hover { 5231 | color: #3D9970; 5232 | } 5233 | 5234 | .hover-light-green:hover { 5235 | color: #5ab48a; 5236 | } 5237 | 5238 | .hover-lightest-green:hover { 5239 | color: #75d0a4; 5240 | } 5241 | 5242 | .hover-dark-green:hover { 5243 | color: #1e7f58; 5244 | } 5245 | 5246 | .hover-darkest-green:hover { 5247 | color: #006540; 5248 | } 5249 | 5250 | .hover-pink:hover { 5251 | color: #F012BE; 5252 | } 5253 | 5254 | .hover-light-pink:hover { 5255 | color: #ff57e8; 5256 | } 5257 | 5258 | .hover-lightest-pink:hover { 5259 | color: #ff81ff; 5260 | } 5261 | 5262 | .hover-dark-pink:hover { 5263 | color: #d100a3; 5264 | } 5265 | 5266 | .hover-darkest-pink:hover { 5267 | color: #b20088; 5268 | } 5269 | 5270 | .hover-purple:hover { 5271 | color: #980bc6; 5272 | } 5273 | 5274 | .hover-light-purple:hover { 5275 | color: #b536e2; 5276 | } 5277 | 5278 | .hover-lightest-purple:hover { 5279 | color: #d355ff; 5280 | } 5281 | 5282 | .hover-dark-purple:hover { 5283 | color: #7b00a9; 5284 | } 5285 | 5286 | .hover-darkest-purple:hover { 5287 | color: #5f008e; 5288 | } 5289 | 5290 | .bg-hover-black:hover { 5291 | background-color: #000; 5292 | } 5293 | 5294 | .bg-hover-near-black:hover { 5295 | background-color: #111; 5296 | } 5297 | 5298 | .bg-hover-dark-gray:hover { 5299 | background-color: #333; 5300 | } 5301 | 5302 | .bg-hover-mid-gray:hover { 5303 | background-color: #555; 5304 | } 5305 | 5306 | .bg-hover-gray:hover { 5307 | background-color: #777; 5308 | } 5309 | 5310 | .bg-hover-silver:hover { 5311 | background-color: #999; 5312 | } 5313 | 5314 | .bg-hover-light-silver:hover { 5315 | background-color: #aaa; 5316 | } 5317 | 5318 | .bg-hover-moon-gray:hover { 5319 | background-color: #ccc; 5320 | } 5321 | 5322 | .bg-hover-light-gray:hover { 5323 | background-color: #eee; 5324 | } 5325 | 5326 | .bg-hover-near-white:hover { 5327 | background-color: #f4f4f4; 5328 | } 5329 | 5330 | .bg-hover-white:hover { 5331 | background-color: #fff; 5332 | } 5333 | 5334 | .bg-hover-blue:hover { 5335 | background-color: #0074D9; 5336 | } 5337 | 5338 | .bg-hover-light-blue:hover { 5339 | background-color: #64a8ff; 5340 | } 5341 | 5342 | .bg-hover-lightest-blue:hover { 5343 | background-color: #a2dfff; 5344 | } 5345 | 5346 | .bg-hover-dark-blue:hover { 5347 | background-color: #0045a1; 5348 | } 5349 | 5350 | .bg-hover-darkest-blue:hover { 5351 | background-color: #002f86; 5352 | } 5353 | 5354 | .bg-hover-yellow:hover { 5355 | background-color: #fff93c; 5356 | } 5357 | 5358 | .bg-hover-light-yellow:hover { 5359 | background-color: #fffa60; 5360 | } 5361 | 5362 | .bg-hover-lightest-yellow:hover { 5363 | background-color: #fffca6; 5364 | } 5365 | 5366 | .bg-hover-dark-yellow:hover { 5367 | background-color: #e2c100; 5368 | } 5369 | 5370 | .bg-hover-darkest-yellow:hover { 5371 | background-color: #c4a600; 5372 | } 5373 | 5374 | .bg-hover-orange:hover { 5375 | background-color: #FF851B; 5376 | } 5377 | 5378 | .bg-hover-light-orange:hover { 5379 | background-color: #ffa942; 5380 | } 5381 | 5382 | .bg-hover-lightest-orange:hover { 5383 | background-color: #ffc55d; 5384 | } 5385 | 5386 | .bg-hover-dark-orange:hover { 5387 | background-color: #d05e00; 5388 | } 5389 | 5390 | .bg-hover-darkest-orange:hover { 5391 | background-color: #b14400; 5392 | } 5393 | 5394 | .bg-hover-red:hover { 5395 | background-color: #d82c2c; 5396 | } 5397 | 5398 | .bg-hover-light-red:hover { 5399 | background-color: #f94f44; 5400 | } 5401 | 5402 | .bg-hover-lightest-red:hover { 5403 | background-color: #ff6c5c; 5404 | } 5405 | 5406 | .bg-hover-dark-red:hover { 5407 | background-color: #bd001a; 5408 | } 5409 | 5410 | .bg-hover-darkest-red:hover { 5411 | background-color: #9d0003; 5412 | } 5413 | 5414 | .bg-hover-teal:hover { 5415 | background-color: #27bfa8; 5416 | } 5417 | 5418 | .bg-hover-light-teal:hover { 5419 | background-color: #4eddc5; 5420 | } 5421 | 5422 | .bg-hover-lightest-teal:hover { 5423 | background-color: #6ffae0; 5424 | } 5425 | 5426 | .bg-hover-dark-teal:hover { 5427 | background-color: #25a28f; 5428 | } 5429 | 5430 | .bg-hover-darkest-teal:hover { 5431 | background-color: #008876; 5432 | } 5433 | 5434 | .bg-hover-green:hover { 5435 | background-color: #3D9970; 5436 | } 5437 | 5438 | .bg-hover-light-green:hover { 5439 | background-color: #5ab48a; 5440 | } 5441 | 5442 | .bg-hover-lightest-green:hover { 5443 | background-color: #75d0a4; 5444 | } 5445 | 5446 | .bg-hover-dark-green:hover { 5447 | background-color: #1e7f58; 5448 | } 5449 | 5450 | .bg-hover-darkest-green:hover { 5451 | background-color: #006540; 5452 | } 5453 | 5454 | .bg-hover-pink:hover { 5455 | background-color: #F012BE; 5456 | } 5457 | 5458 | .bg-hover-light-pink:hover { 5459 | background-color: #ff57e8; 5460 | } 5461 | 5462 | .bg-hover-lightest-pink:hover { 5463 | background-color: #ff81ff; 5464 | } 5465 | 5466 | .bg-hover-dark-pink:hover { 5467 | background-color: #d100a3; 5468 | } 5469 | 5470 | .bg-hover-darkest-pink:hover { 5471 | background-color: #b20088; 5472 | } 5473 | 5474 | .bg-hover-purple:hover { 5475 | background-color: #980bc6; 5476 | } 5477 | 5478 | .bg-hover-light-purple:hover { 5479 | background-color: #b536e2; 5480 | } 5481 | 5482 | .bg-hover-lightest-purple:hover { 5483 | background-color: #d355ff; 5484 | } 5485 | 5486 | .bg-hover-dark-purple:hover { 5487 | background-color: #7b00a9; 5488 | } 5489 | 5490 | .bg-hover-darkest-purple:hover { 5491 | background-color: #5f008e; 5492 | } 5493 | 5494 | .dim { 5495 | opacity: 1; 5496 | transition: opacity .15s ease-in; 5497 | } 5498 | 5499 | .dim:hover { 5500 | opacity: .6; 5501 | transition: opacity .15s ease-in; 5502 | } 5503 | 5504 | .dim:active, 5505 | .dim:focus { 5506 | opacity: .8; 5507 | transition: opacity .15s ease-out; 5508 | } 5509 | 5510 | /* SVG Fills */ 5511 | 5512 | .fill-black { 5513 | fill: #000; 5514 | } 5515 | 5516 | .fill-near-black { 5517 | fill: #111; 5518 | } 5519 | 5520 | .fill-dark-gray { 5521 | fill: #333; 5522 | } 5523 | 5524 | .fill-mid-gray { 5525 | fill: #555; 5526 | } 5527 | 5528 | .fill-gray { 5529 | fill: #777; 5530 | } 5531 | 5532 | .fill-silver { 5533 | fill: #999; 5534 | } 5535 | 5536 | .fill-light-silver { 5537 | fill: #aaa; 5538 | } 5539 | 5540 | .fill-moon-gray { 5541 | fill: #ccc; 5542 | } 5543 | 5544 | .fill-light-gray { 5545 | fill: #eee; 5546 | } 5547 | 5548 | .fill-near-white { 5549 | fill: #f4f4f4; 5550 | } 5551 | 5552 | .fill-white { 5553 | fill: #fff; 5554 | } 5555 | 5556 | .fill-blue { 5557 | fill: #0074D9; 5558 | } 5559 | 5560 | .fill-light-blue { 5561 | fill: #64a8ff; 5562 | } 5563 | 5564 | .fill-lightest-blue { 5565 | fill: #a2dfff; 5566 | } 5567 | 5568 | .fill-dark-blue { 5569 | fill: #0045a1; 5570 | } 5571 | 5572 | .fill-darkest-blue { 5573 | fill: #002f86; 5574 | } 5575 | 5576 | .fill-yellow { 5577 | fill: #fff93c; 5578 | } 5579 | 5580 | .fill-light-yellow { 5581 | fill: #fffa60; 5582 | } 5583 | 5584 | .fill-lightest-yellow { 5585 | fill: #fffca6; 5586 | } 5587 | 5588 | .fill-dark-yellow { 5589 | fill: #e2c100; 5590 | } 5591 | 5592 | .fill-darkest-yellow { 5593 | fill: #c4a600; 5594 | } 5595 | 5596 | .fill-orange { 5597 | fill: #FF851B; 5598 | } 5599 | 5600 | .fill-light-orange { 5601 | fill: #ffa942; 5602 | } 5603 | 5604 | .fill-lightest-orange { 5605 | fill: #ffc55d; 5606 | } 5607 | 5608 | .fill-dark-orange { 5609 | fill: #d05e00; 5610 | } 5611 | 5612 | .fill-darkest-orange { 5613 | fill: #b14400; 5614 | } 5615 | 5616 | .fill-red { 5617 | fill: #d82c2c; 5618 | } 5619 | 5620 | .fill-light-red { 5621 | fill: #f94f44; 5622 | } 5623 | 5624 | .fill-lightest-red { 5625 | fill: #ff6c5c; 5626 | } 5627 | 5628 | .fill-dark-red { 5629 | fill: #bd001a; 5630 | } 5631 | 5632 | .fill-darkest-red { 5633 | fill: #9d0003; 5634 | } 5635 | 5636 | .fill-teal { 5637 | fill: #27bfa8; 5638 | } 5639 | 5640 | .fill-light-teal { 5641 | fill: #4eddc5; 5642 | } 5643 | 5644 | .fill-lightest-teal { 5645 | fill: #6ffae0; 5646 | } 5647 | 5648 | .fill-dark-teal { 5649 | fill: #25a28f; 5650 | } 5651 | 5652 | .fill-darkest-teal { 5653 | fill: #008876; 5654 | } 5655 | 5656 | .fill-green { 5657 | fill: #3D9970; 5658 | } 5659 | 5660 | .fill-light-green { 5661 | fill: #5ab48a; 5662 | } 5663 | 5664 | .fill-lightest-green { 5665 | fill: #75d0a4; 5666 | } 5667 | 5668 | .fill-dark-green { 5669 | fill: #1e7f58; 5670 | } 5671 | 5672 | .fill-darkest-green { 5673 | fill: #006540; 5674 | } 5675 | 5676 | .fill-pink { 5677 | fill: #F012BE; 5678 | } 5679 | 5680 | .fill-light-pink { 5681 | fill: #ff57e8; 5682 | } 5683 | 5684 | .fill-lightest-pink { 5685 | fill: #ff81ff; 5686 | } 5687 | 5688 | .fill-dark-pink { 5689 | fill: #d100a3; 5690 | } 5691 | 5692 | .fill-darkest-pink { 5693 | fill: #b20088; 5694 | } 5695 | 5696 | .fill-purple { 5697 | fill: #980bc6; 5698 | } 5699 | 5700 | .fill-light-purple { 5701 | fill: #b536e2; 5702 | } 5703 | 5704 | .fill-lightest-purple { 5705 | fill: #d355ff; 5706 | } 5707 | 5708 | .fill-dark-purple { 5709 | fill: #7b00a9; 5710 | } 5711 | 5712 | .fill-darkest-purple { 5713 | fill: #5f008e; 5714 | } 5715 | 5716 | /* SVG Strokes */ 5717 | 5718 | .sw-4 { 5719 | stroke-width: 4; 5720 | } 5721 | 5722 | .stroke-black { 5723 | stroke: #000; 5724 | } 5725 | 5726 | .stroke-near-black { 5727 | stroke: #111; 5728 | } 5729 | 5730 | .stroke-dark-gray { 5731 | stroke: #333; 5732 | } 5733 | 5734 | .stroke-mid-gray { 5735 | stroke: #555; 5736 | } 5737 | 5738 | .stroke-gray { 5739 | stroke: #777; 5740 | } 5741 | 5742 | .stroke-silver { 5743 | stroke: #999; 5744 | } 5745 | 5746 | .stroke-light-silver { 5747 | stroke: #aaa; 5748 | } 5749 | 5750 | .stroke-moon-gray { 5751 | stroke: #ccc; 5752 | } 5753 | 5754 | .stroke-light-gray { 5755 | stroke: #eee; 5756 | } 5757 | 5758 | .stroke-near-white { 5759 | stroke: #f4f4f4; 5760 | } 5761 | 5762 | .stroke-white { 5763 | stroke: #fff; 5764 | } 5765 | 5766 | .stroke-blue { 5767 | stroke: #0074D9; 5768 | } 5769 | 5770 | .stroke-light-blue { 5771 | stroke: #64a8ff; 5772 | } 5773 | 5774 | .stroke-lightest-blue { 5775 | stroke: #a2dfff; 5776 | } 5777 | 5778 | .stroke-dark-blue { 5779 | stroke: #0045a1; 5780 | } 5781 | 5782 | .stroke-darkest-blue { 5783 | stroke: #002f86; 5784 | } 5785 | 5786 | .stroke-yellow { 5787 | stroke: #fff93c; 5788 | } 5789 | 5790 | .stroke-light-yellow { 5791 | stroke: #fffa60; 5792 | } 5793 | 5794 | .stroke-lightest-yellow { 5795 | stroke: #fffca6; 5796 | } 5797 | 5798 | .stroke-dark-yellow { 5799 | stroke: #e2c100; 5800 | } 5801 | 5802 | .stroke-darkest-yellow { 5803 | stroke: #c4a600; 5804 | } 5805 | 5806 | .stroke-orange { 5807 | stroke: #FF851B; 5808 | } 5809 | 5810 | .stroke-light-orange { 5811 | stroke: #ffa942; 5812 | } 5813 | 5814 | .stroke-lightest-orange { 5815 | stroke: #ffc55d; 5816 | } 5817 | 5818 | .stroke-dark-orange { 5819 | stroke: #d05e00; 5820 | } 5821 | 5822 | .stroke-darkest-orange { 5823 | stroke: #b14400; 5824 | } 5825 | 5826 | .stroke-red { 5827 | stroke: #d82c2c; 5828 | } 5829 | 5830 | .stroke-light-red { 5831 | stroke: #f94f44; 5832 | } 5833 | 5834 | .stroke-lightest-red { 5835 | stroke: #ff6c5c; 5836 | } 5837 | 5838 | .stroke-dark-red { 5839 | stroke: #bd001a; 5840 | } 5841 | 5842 | .stroke-darkest-red { 5843 | stroke: #9d0003; 5844 | } 5845 | 5846 | .stroke-teal { 5847 | stroke: #27bfa8; 5848 | } 5849 | 5850 | .stroke-light-teal { 5851 | stroke: #4eddc5; 5852 | } 5853 | 5854 | .stroke-lightest-teal { 5855 | stroke: #6ffae0; 5856 | } 5857 | 5858 | .stroke-dark-teal { 5859 | stroke: #25a28f; 5860 | } 5861 | 5862 | .stroke-darkest-teal { 5863 | stroke: #008876; 5864 | } 5865 | 5866 | .stroke-green { 5867 | stroke: #3D9970; 5868 | } 5869 | 5870 | .stroke-light-green { 5871 | stroke: #5ab48a; 5872 | } 5873 | 5874 | .stroke-lightest-green { 5875 | stroke: #75d0a4; 5876 | } 5877 | 5878 | .stroke-dark-green { 5879 | stroke: #1e7f58; 5880 | } 5881 | 5882 | .stroke-darkest-green { 5883 | stroke: #006540; 5884 | } 5885 | 5886 | .stroke-pink { 5887 | stroke: #F012BE; 5888 | } 5889 | 5890 | .stroke-light-pink { 5891 | stroke: #ff57e8; 5892 | } 5893 | 5894 | .stroke-lightest-pink { 5895 | stroke: #ff81ff; 5896 | } 5897 | 5898 | .stroke-dark-pink { 5899 | stroke: #d100a3; 5900 | } 5901 | 5902 | .stroke-darkest-pink { 5903 | stroke: #b20088; 5904 | } 5905 | 5906 | .stroke-purple { 5907 | stroke: #980bc6; 5908 | } 5909 | 5910 | .stroke-light-purple { 5911 | stroke: #b536e2; 5912 | } 5913 | 5914 | .stroke-lightest-purple { 5915 | stroke: #d355ff; 5916 | } 5917 | 5918 | .stroke-dark-purple { 5919 | stroke: #7b00a9; 5920 | } 5921 | 5922 | .stroke-darkest-purple { 5923 | stroke: #5f008e; 5924 | } 5925 | 5926 | /* 5927 | SPACING 5928 | 5929 | An eight step powers of two scale ranging from 0 to 16rem. 5930 | 5931 | Legend: 5932 | 5933 | p = padding 5934 | m = margin 5935 | 5936 | a = all 5937 | h = horizontal 5938 | v = vertical 5939 | t = top 5940 | r = right 5941 | b = bottom 5942 | l = left 5943 | 5944 | n = none 5945 | xs = extra small 5946 | s = small 5947 | m = medium 5948 | l = large 5949 | x = extra 5950 | xl = extra large 5951 | xxl = extra extra large 5952 | 5953 | */ 5954 | 5955 | .pan { 5956 | padding: 0; 5957 | } 5958 | 5959 | .paxs { 5960 | padding: .25rem; 5961 | } 5962 | 5963 | .pas { 5964 | padding: .5rem; 5965 | } 5966 | 5967 | .pam { 5968 | padding: 1rem; 5969 | } 5970 | 5971 | .pal { 5972 | padding: 2rem; 5973 | } 5974 | 5975 | .pax { 5976 | padding: 4rem; 5977 | } 5978 | 5979 | .paxl { 5980 | padding: 8rem; 5981 | } 5982 | 5983 | .paxxl { 5984 | padding: 16rem; 5985 | } 5986 | 5987 | .pln { 5988 | padding-left: 0; 5989 | } 5990 | 5991 | .plxs { 5992 | padding-left: .25rem; 5993 | } 5994 | 5995 | .pls { 5996 | padding-left: .5rem; 5997 | } 5998 | 5999 | .plm { 6000 | padding-left: 1rem; 6001 | } 6002 | 6003 | .pll { 6004 | padding-left: 2rem; 6005 | } 6006 | 6007 | .plx { 6008 | padding-left: 4rem; 6009 | } 6010 | 6011 | .plxl { 6012 | padding-left: 8rem; 6013 | } 6014 | 6015 | .plxxl { 6016 | padding-left: 16rem; 6017 | } 6018 | 6019 | .prn { 6020 | padding-right: 0; 6021 | } 6022 | 6023 | .prxs { 6024 | padding-right: .25rem; 6025 | } 6026 | 6027 | .prs { 6028 | padding-right: .5rem; 6029 | } 6030 | 6031 | .prm { 6032 | padding-right: 1rem; 6033 | } 6034 | 6035 | .prl { 6036 | padding-right: 2rem; 6037 | } 6038 | 6039 | .prx { 6040 | padding-right: 4rem; 6041 | } 6042 | 6043 | .prxl { 6044 | padding-right: 8rem; 6045 | } 6046 | 6047 | .prxxl { 6048 | padding-right: 16rem; 6049 | } 6050 | 6051 | .pbn { 6052 | padding-bottom: 0; 6053 | } 6054 | 6055 | .pbxs { 6056 | padding-bottom: .25rem; 6057 | } 6058 | 6059 | .pbs { 6060 | padding-bottom: .5rem; 6061 | } 6062 | 6063 | .pbm { 6064 | padding-bottom: 1rem; 6065 | } 6066 | 6067 | .pbl { 6068 | padding-bottom: 2rem; 6069 | } 6070 | 6071 | .pbx { 6072 | padding-bottom: 4rem; 6073 | } 6074 | 6075 | .pbxl { 6076 | padding-bottom: 8rem; 6077 | } 6078 | 6079 | .pbxxl { 6080 | padding-bottom: 16rem; 6081 | } 6082 | 6083 | .ptn { 6084 | padding-top: 0; 6085 | } 6086 | 6087 | .ptxs { 6088 | padding-top: .25rem; 6089 | } 6090 | 6091 | .pts { 6092 | padding-top: .5rem; 6093 | } 6094 | 6095 | .ptm { 6096 | padding-top: 1rem; 6097 | } 6098 | 6099 | .ptl { 6100 | padding-top: 2rem; 6101 | } 6102 | 6103 | .ptx { 6104 | padding-top: 4rem; 6105 | } 6106 | 6107 | .ptxl { 6108 | padding-top: 8rem; 6109 | } 6110 | 6111 | .ptxxl { 6112 | padding-top: 16rem; 6113 | } 6114 | 6115 | .pvn { 6116 | padding-top: 0; 6117 | padding-bottom: 0; 6118 | } 6119 | 6120 | .pvxs { 6121 | padding-top: .25rem; 6122 | padding-bottom: .25rem; 6123 | } 6124 | 6125 | .pvs { 6126 | padding-top: .5rem; 6127 | padding-bottom: .5rem; 6128 | } 6129 | 6130 | .pvm { 6131 | padding-top: 1rem; 6132 | padding-bottom: 1rem; 6133 | } 6134 | 6135 | .pvl { 6136 | padding-top: 2rem; 6137 | padding-bottom: 2rem; 6138 | } 6139 | 6140 | .pvx { 6141 | padding-top: 4rem; 6142 | padding-bottom: 4rem; 6143 | } 6144 | 6145 | .pvxl { 6146 | padding-top: 8rem; 6147 | padding-bottom: 8rem; 6148 | } 6149 | 6150 | .pvxxl { 6151 | padding-top: 16rem; 6152 | padding-bottom: 16rem; 6153 | } 6154 | 6155 | .phn { 6156 | padding-left: 0; 6157 | padding-right: 0; 6158 | } 6159 | 6160 | .phxs { 6161 | padding-left: .25rem; 6162 | padding-right: .25rem; 6163 | } 6164 | 6165 | .phs { 6166 | padding-left: .5rem; 6167 | padding-right: .5rem; 6168 | } 6169 | 6170 | .phm { 6171 | padding-left: 1rem; 6172 | padding-right: 1rem; 6173 | } 6174 | 6175 | .phl { 6176 | padding-left: 2rem; 6177 | padding-right: 2rem; 6178 | } 6179 | 6180 | .phx { 6181 | padding-left: 4rem; 6182 | padding-right: 4rem; 6183 | } 6184 | 6185 | .phxl { 6186 | padding-left: 8rem; 6187 | padding-right: 8rem; 6188 | } 6189 | 6190 | .phxxl { 6191 | padding-left: 16rem; 6192 | padding-right: 16rem; 6193 | } 6194 | 6195 | .man { 6196 | margin: 0; 6197 | } 6198 | 6199 | .maxs { 6200 | margin: .25rem; 6201 | } 6202 | 6203 | .mas { 6204 | margin: .5rem; 6205 | } 6206 | 6207 | .mam { 6208 | margin: 1rem; 6209 | } 6210 | 6211 | .mal { 6212 | margin: 2rem; 6213 | } 6214 | 6215 | .max { 6216 | margin: 4rem; 6217 | } 6218 | 6219 | .maxl { 6220 | margin: 8rem; 6221 | } 6222 | 6223 | .maxxl { 6224 | margin: 16rem; 6225 | } 6226 | 6227 | .mln { 6228 | margin-left: 0; 6229 | } 6230 | 6231 | .mlxs { 6232 | margin-left: .25rem; 6233 | } 6234 | 6235 | .mls { 6236 | margin-left: .5rem; 6237 | } 6238 | 6239 | .mlm { 6240 | margin-left: 1rem; 6241 | } 6242 | 6243 | .mll { 6244 | margin-left: 2rem; 6245 | } 6246 | 6247 | .mlx { 6248 | margin-left: 4rem; 6249 | } 6250 | 6251 | .mlxl { 6252 | margin-left: 8rem; 6253 | } 6254 | 6255 | .mlxxl { 6256 | margin-left: 16rem; 6257 | } 6258 | 6259 | .mrn { 6260 | margin-right: 0; 6261 | } 6262 | 6263 | .mrxs { 6264 | margin-right: .25rem; 6265 | } 6266 | 6267 | .mrs { 6268 | margin-right: .5rem; 6269 | } 6270 | 6271 | .mrm { 6272 | margin-right: 1rem; 6273 | } 6274 | 6275 | .mrl { 6276 | margin-right: 2rem; 6277 | } 6278 | 6279 | .mrx { 6280 | margin-right: 4rem; 6281 | } 6282 | 6283 | .mrxl { 6284 | margin-right: 8rem; 6285 | } 6286 | 6287 | .mrxxl { 6288 | margin-right: 16rem; 6289 | } 6290 | 6291 | .mbn { 6292 | margin-bottom: 0; 6293 | } 6294 | 6295 | .mbxs { 6296 | margin-bottom: .25rem; 6297 | } 6298 | 6299 | .mbs { 6300 | margin-bottom: .5rem; 6301 | } 6302 | 6303 | .mbm { 6304 | margin-bottom: 1rem; 6305 | } 6306 | 6307 | .mbl { 6308 | margin-bottom: 2rem; 6309 | } 6310 | 6311 | .mbx { 6312 | margin-bottom: 4rem; 6313 | } 6314 | 6315 | .mbxl { 6316 | margin-bottom: 8rem; 6317 | } 6318 | 6319 | .mbxxl { 6320 | margin-bottom: 16rem; 6321 | } 6322 | 6323 | .mtn { 6324 | margin-top: 0; 6325 | } 6326 | 6327 | .mtxs { 6328 | margin-top: .25rem; 6329 | } 6330 | 6331 | .mts { 6332 | margin-top: .5rem; 6333 | } 6334 | 6335 | .mtm { 6336 | margin-top: 1rem; 6337 | } 6338 | 6339 | .mtl { 6340 | margin-top: 2rem; 6341 | } 6342 | 6343 | .mtx { 6344 | margin-top: 4rem; 6345 | } 6346 | 6347 | .mtxl { 6348 | margin-top: 8rem; 6349 | } 6350 | 6351 | .mtxxl { 6352 | margin-top: 16rem; 6353 | } 6354 | 6355 | .mvn { 6356 | margin-top: 0; 6357 | margin-bottom: 0rem; 6358 | } 6359 | 6360 | .mvxs { 6361 | margin-top: .25rem; 6362 | margin-bottom: .25rem; 6363 | } 6364 | 6365 | .mvs { 6366 | margin-top: .5rem; 6367 | margin-bottom: .5rem; 6368 | } 6369 | 6370 | .mvm { 6371 | margin-top: 1rem; 6372 | margin-bottom: 1rem; 6373 | } 6374 | 6375 | .mvl { 6376 | margin-top: 2rem; 6377 | margin-bottom: 2rem; 6378 | } 6379 | 6380 | .mvx { 6381 | margin-top: 4rem; 6382 | margin-bottom: 4rem; 6383 | } 6384 | 6385 | .mvxl { 6386 | margin-top: 8rem; 6387 | margin-bottom: 8rem; 6388 | } 6389 | 6390 | .mvxxl { 6391 | margin-top: 16rem; 6392 | margin-bottom: 16rem; 6393 | } 6394 | 6395 | .mhn { 6396 | margin-left: 0; 6397 | margin-right: 0; 6398 | } 6399 | 6400 | .mhs { 6401 | margin-left: .5rem; 6402 | margin-right: .5rem; 6403 | } 6404 | 6405 | .mhm { 6406 | margin-left: 1rem; 6407 | margin-right: 1rem; 6408 | } 6409 | 6410 | .mhl { 6411 | margin-left: 2rem; 6412 | margin-right: 2rem; 6413 | } 6414 | 6415 | .mhx { 6416 | margin-left: 4rem; 6417 | margin-right: 4rem; 6418 | } 6419 | 6420 | .mhxl { 6421 | margin-left: 8rem; 6422 | margin-right: 8rem; 6423 | } 6424 | 6425 | .mhxxl { 6426 | margin-left: 16rem; 6427 | margin-right: 16rem; 6428 | } 6429 | 6430 | @media screen and (min-width: 42em) { 6431 | .pan-ns { 6432 | padding: 0; 6433 | } 6434 | 6435 | .paxs-ns { 6436 | padding: .25rem; 6437 | } 6438 | 6439 | .pas-ns { 6440 | padding: .5rem; 6441 | } 6442 | 6443 | .pam-ns { 6444 | padding: 1rem; 6445 | } 6446 | 6447 | .pal-ns { 6448 | padding: 2rem; 6449 | } 6450 | 6451 | .pax-ns { 6452 | padding: 4rem; 6453 | } 6454 | 6455 | .paxl-ns { 6456 | padding: 8rem; 6457 | } 6458 | 6459 | .paxxl-ns { 6460 | padding: 16rem; 6461 | } 6462 | 6463 | .pln-ns { 6464 | padding-left: 0; 6465 | } 6466 | 6467 | .plxs-ns { 6468 | padding-left: .25rem; 6469 | } 6470 | 6471 | .pls-ns { 6472 | padding-left: .5rem; 6473 | } 6474 | 6475 | .plm-ns { 6476 | padding-left: 1rem; 6477 | } 6478 | 6479 | .pll-ns { 6480 | padding-left: 2rem; 6481 | } 6482 | 6483 | .plx-ns { 6484 | padding-left: 4rem; 6485 | } 6486 | 6487 | .plxl-ns { 6488 | padding-left: 8rem; 6489 | } 6490 | 6491 | .plxxl-ns { 6492 | padding-left: 16rem; 6493 | } 6494 | 6495 | .prn-ns { 6496 | padding-right: 0; 6497 | } 6498 | 6499 | .prxs-ns { 6500 | padding-right: .25rem; 6501 | } 6502 | 6503 | .prs-ns { 6504 | padding-right: .5rem; 6505 | } 6506 | 6507 | .prm-ns { 6508 | padding-right: 1rem; 6509 | } 6510 | 6511 | .prl-ns { 6512 | padding-right: 2rem; 6513 | } 6514 | 6515 | .prx-ns { 6516 | padding-right: 4rem; 6517 | } 6518 | 6519 | .prxl-ns { 6520 | padding-right: 8rem; 6521 | } 6522 | 6523 | .prxxl-ns { 6524 | padding-right: 16rem; 6525 | } 6526 | 6527 | .pbn-ns { 6528 | padding-bottom: 0; 6529 | } 6530 | 6531 | .pbxs-ns { 6532 | padding-bottom: .25rem; 6533 | } 6534 | 6535 | .pbs-ns { 6536 | padding-bottom: .5rem; 6537 | } 6538 | 6539 | .pbm-ns { 6540 | padding-bottom: 1rem; 6541 | } 6542 | 6543 | .pbl-ns { 6544 | padding-bottom: 2rem; 6545 | } 6546 | 6547 | .pbx-ns { 6548 | padding-bottom: 4rem; 6549 | } 6550 | 6551 | .pbxl-ns { 6552 | padding-bottom: 8rem; 6553 | } 6554 | 6555 | .pbxxl-ns { 6556 | padding-bottom: 16rem; 6557 | } 6558 | 6559 | .ptn-ns { 6560 | padding-top: 0; 6561 | } 6562 | 6563 | .ptxs-ns { 6564 | padding-top: .25rem; 6565 | } 6566 | 6567 | .pts-ns { 6568 | padding-top: .5rem; 6569 | } 6570 | 6571 | .ptm-ns { 6572 | padding-top: 1rem; 6573 | } 6574 | 6575 | .ptl-ns { 6576 | padding-top: 2rem; 6577 | } 6578 | 6579 | .ptx-ns { 6580 | padding-top: 4rem; 6581 | } 6582 | 6583 | .ptxl-ns { 6584 | padding-top: 8rem; 6585 | } 6586 | 6587 | .ptxxl-ns { 6588 | padding-top: 16rem; 6589 | } 6590 | 6591 | .pvn-ns { 6592 | padding-top: 0; 6593 | padding-bottom: 0; 6594 | } 6595 | 6596 | .pvxs-ns { 6597 | padding-top: .25rem; 6598 | padding-bottom: .25rem; 6599 | } 6600 | 6601 | .pvs-ns { 6602 | padding-top: .5rem; 6603 | padding-bottom: .5rem; 6604 | } 6605 | 6606 | .pvm-ns { 6607 | padding-top: 1rem; 6608 | padding-bottom: 1rem; 6609 | } 6610 | 6611 | .pvl-ns { 6612 | padding-top: 2rem; 6613 | padding-bottom: 2rem; 6614 | } 6615 | 6616 | .pvx-ns { 6617 | padding-top: 4rem; 6618 | padding-bottom: 4rem; 6619 | } 6620 | 6621 | .pvxl-ns { 6622 | padding-top: 8rem; 6623 | padding-bottom: 8rem; 6624 | } 6625 | 6626 | .pvxxl-ns { 6627 | padding-top: 16rem; 6628 | padding-bottom: 16rem; 6629 | } 6630 | 6631 | .phn-ns { 6632 | padding-left: 0; 6633 | padding-right: 0; 6634 | } 6635 | 6636 | .pvxs-ns { 6637 | padding-left: .25rem; 6638 | padding-right: .25rem; 6639 | } 6640 | 6641 | .phs-ns { 6642 | padding-left: .5rem; 6643 | padding-right: .5rem; 6644 | } 6645 | 6646 | .phm-ns { 6647 | padding-left: 1rem; 6648 | padding-right: 1rem; 6649 | } 6650 | 6651 | .phl-ns { 6652 | padding-left: 2rem; 6653 | padding-right: 2rem; 6654 | } 6655 | 6656 | .phx-ns { 6657 | padding-left: 4rem; 6658 | padding-right: 4rem; 6659 | } 6660 | 6661 | .phxl-ns { 6662 | padding-left: 8rem; 6663 | padding-right: 8rem; 6664 | } 6665 | 6666 | .phxxl-ns { 6667 | padding-left: 16rem; 6668 | padding-right: 16rem; 6669 | } 6670 | 6671 | .man-ns { 6672 | margin: 0; 6673 | } 6674 | 6675 | .maxs-ns { 6676 | margin: .25rem; 6677 | } 6678 | 6679 | .mas-ns { 6680 | margin: .5rem; 6681 | } 6682 | 6683 | .mam-ns { 6684 | margin: 1rem; 6685 | } 6686 | 6687 | .mal-ns { 6688 | margin: 2rem; 6689 | } 6690 | 6691 | .max-ns { 6692 | margin: 4rem; 6693 | } 6694 | 6695 | .maxl-ns { 6696 | margin: 8rem; 6697 | } 6698 | 6699 | .maxxl-ns { 6700 | margin: 16rem; 6701 | } 6702 | 6703 | .mln-ns { 6704 | margin-left: 0; 6705 | } 6706 | 6707 | .mlxs-ns { 6708 | margin-left: .25rem; 6709 | } 6710 | 6711 | .mls-ns { 6712 | margin-left: .5rem; 6713 | } 6714 | 6715 | .mlm-ns { 6716 | margin-left: 1rem; 6717 | } 6718 | 6719 | .mll-ns { 6720 | margin-left: 2rem; 6721 | } 6722 | 6723 | .mlx-ns { 6724 | margin-left: 4rem; 6725 | } 6726 | 6727 | .mlxl-ns { 6728 | margin-left: 8rem; 6729 | } 6730 | 6731 | .mlxxl-ns { 6732 | margin-left: 16rem; 6733 | } 6734 | 6735 | .mrn-ns { 6736 | margin-right: 0; 6737 | } 6738 | 6739 | .mrxs-ns { 6740 | margin-right: .25rem; 6741 | } 6742 | 6743 | .mrs-ns { 6744 | margin-right: .5rem; 6745 | } 6746 | 6747 | .mrm-ns { 6748 | margin-right: 1rem; 6749 | } 6750 | 6751 | .mrl-ns { 6752 | margin-right: 2rem; 6753 | } 6754 | 6755 | .mrx-ns { 6756 | margin-right: 4rem; 6757 | } 6758 | 6759 | .mrxl-ns { 6760 | margin-right: 8rem; 6761 | } 6762 | 6763 | .mrxxl-ns { 6764 | margin-right: 16rem; 6765 | } 6766 | 6767 | .mbn-ns { 6768 | margin-bottom: 0; 6769 | } 6770 | 6771 | .mbxs-ns { 6772 | margin-bottom: .25rem; 6773 | } 6774 | 6775 | .mbs-ns { 6776 | margin-bottom: .5rem; 6777 | } 6778 | 6779 | .mbm-ns { 6780 | margin-bottom: 1rem; 6781 | } 6782 | 6783 | .mbl-ns { 6784 | margin-bottom: 2rem; 6785 | } 6786 | 6787 | .mbx-ns { 6788 | margin-bottom: 4rem; 6789 | } 6790 | 6791 | .mbxl-ns { 6792 | margin-bottom: 8rem; 6793 | } 6794 | 6795 | .mbxxl-ns { 6796 | margin-bottom: 16rem; 6797 | } 6798 | 6799 | .mtn-ns { 6800 | margin-top: 0; 6801 | } 6802 | 6803 | .mtxs-ns { 6804 | margin-top: .25rem; 6805 | } 6806 | 6807 | .mts-ns { 6808 | margin-top: .5rem; 6809 | } 6810 | 6811 | .mtm-ns { 6812 | margin-top: 1rem; 6813 | } 6814 | 6815 | .mtl-ns { 6816 | margin-top: 2rem; 6817 | } 6818 | 6819 | .mtx-ns { 6820 | margin-top: 4rem; 6821 | } 6822 | 6823 | .mtxl-ns { 6824 | margin-top: 8rem; 6825 | } 6826 | 6827 | .mtxxl-ns { 6828 | margin-top: 16rem; 6829 | } 6830 | 6831 | .mvn-ns { 6832 | margin-top: 0; 6833 | margin-bottom: 0rem; 6834 | } 6835 | 6836 | .mvxs-ns { 6837 | margin-top: .25rem; 6838 | margin-bottom: .25rem; 6839 | } 6840 | 6841 | .mvs-ns { 6842 | margin-top: .5rem; 6843 | margin-bottom: .5rem; 6844 | } 6845 | 6846 | .mvm-ns { 6847 | margin-top: 1rem; 6848 | margin-bottom: 1rem; 6849 | } 6850 | 6851 | .mvl-ns { 6852 | margin-top: 2rem; 6853 | margin-bottom: 2rem; 6854 | } 6855 | 6856 | .mvx-ns { 6857 | margin-top: 4rem; 6858 | margin-bottom: 4rem; 6859 | } 6860 | 6861 | .mvxl-ns { 6862 | margin-top: 8rem; 6863 | margin-bottom: 8rem; 6864 | } 6865 | 6866 | .mvxxl-ns { 6867 | margin-top: 16rem; 6868 | margin-bottom: 16rem; 6869 | } 6870 | 6871 | .mhn-ns { 6872 | margin-left: 0; 6873 | margin-right: 0; 6874 | } 6875 | 6876 | .mhs-ns { 6877 | margin-left: .5rem; 6878 | margin-right: .5rem; 6879 | } 6880 | 6881 | .mhm-ns { 6882 | margin-left: 1rem; 6883 | margin-right: 1rem; 6884 | } 6885 | 6886 | .mhl-ns { 6887 | margin-left: 2rem; 6888 | margin-right: 2rem; 6889 | } 6890 | 6891 | .mhx-ns { 6892 | margin-left: 4rem; 6893 | margin-right: 4rem; 6894 | } 6895 | 6896 | .mhxl-ns { 6897 | margin-left: 8rem; 6898 | margin-right: 8rem; 6899 | } 6900 | 6901 | .mhxxl-ns { 6902 | margin-left: 16rem; 6903 | margin-right: 16rem; 6904 | } 6905 | } 6906 | 6907 | @media screen and (min-width: 42em) and (max-width: 64em) { 6908 | .pan-m { 6909 | padding: 0; 6910 | } 6911 | 6912 | .paxs-m { 6913 | padding: .25rem; 6914 | } 6915 | 6916 | .pas-m { 6917 | padding: .5rem; 6918 | } 6919 | 6920 | .pam-m { 6921 | padding: 1rem; 6922 | } 6923 | 6924 | .pal-m { 6925 | padding: 2rem; 6926 | } 6927 | 6928 | .pax-m { 6929 | padding: 4rem; 6930 | } 6931 | 6932 | .paxl-m { 6933 | padding: 8rem; 6934 | } 6935 | 6936 | .paxxl-m { 6937 | padding: 16rem; 6938 | } 6939 | 6940 | .pln-m { 6941 | padding-left: 0; 6942 | } 6943 | 6944 | .plxs-m { 6945 | padding-left: .25rem; 6946 | } 6947 | 6948 | .pls-m { 6949 | padding-left: .5rem; 6950 | } 6951 | 6952 | .plm-m { 6953 | padding-left: 1rem; 6954 | } 6955 | 6956 | .pll-m { 6957 | padding-left: 2rem; 6958 | } 6959 | 6960 | .plx-m { 6961 | padding-left: 4rem; 6962 | } 6963 | 6964 | .plxl-m { 6965 | padding-left: 8rem; 6966 | } 6967 | 6968 | .plxxl-m { 6969 | padding-left: 16rem; 6970 | } 6971 | 6972 | .prn-m { 6973 | padding-right: 0; 6974 | } 6975 | 6976 | .prxs-m { 6977 | padding-right: .25rem; 6978 | } 6979 | 6980 | .prs-m { 6981 | padding-right: .5rem; 6982 | } 6983 | 6984 | .prm-m { 6985 | padding-right: 1rem; 6986 | } 6987 | 6988 | .prl-m { 6989 | padding-right: 2rem; 6990 | } 6991 | 6992 | .prx-m { 6993 | padding-right: 4rem; 6994 | } 6995 | 6996 | .prxl-m { 6997 | padding-right: 8rem; 6998 | } 6999 | 7000 | .prxxl-m { 7001 | padding-right: 16rem; 7002 | } 7003 | 7004 | .pbn-m { 7005 | padding-bottom: 0; 7006 | } 7007 | 7008 | .pbxs-m { 7009 | padding-bottom: .25rem; 7010 | } 7011 | 7012 | .pbs-m { 7013 | padding-bottom: .5rem; 7014 | } 7015 | 7016 | .pbm-m { 7017 | padding-bottom: 1rem; 7018 | } 7019 | 7020 | .pbl-m { 7021 | padding-bottom: 2rem; 7022 | } 7023 | 7024 | .pbx-m { 7025 | padding-bottom: 4rem; 7026 | } 7027 | 7028 | .pbxl-m { 7029 | padding-bottom: 8rem; 7030 | } 7031 | 7032 | .pbxxl-m { 7033 | padding-bottom: 16rem; 7034 | } 7035 | 7036 | .ptn-m { 7037 | padding-top: 0; 7038 | } 7039 | 7040 | .ptxs-m { 7041 | padding-top: .25rem; 7042 | } 7043 | 7044 | .pts-m { 7045 | padding-top: .5rem; 7046 | } 7047 | 7048 | .ptm-m { 7049 | padding-top: 1rem; 7050 | } 7051 | 7052 | .ptl-m { 7053 | padding-top: 2rem; 7054 | } 7055 | 7056 | .ptx-m { 7057 | padding-top: 4rem; 7058 | } 7059 | 7060 | .ptxl-m { 7061 | padding-top: 8rem; 7062 | } 7063 | 7064 | .ptxxl-m { 7065 | padding-top: 16rem; 7066 | } 7067 | 7068 | .pvn-m { 7069 | padding-top: 0; 7070 | padding-bottom: 0; 7071 | } 7072 | 7073 | .pvxs-m { 7074 | padding-top: .25rem; 7075 | padding-bottom: .25rem; 7076 | } 7077 | 7078 | .pvs-m { 7079 | padding-top: .5rem; 7080 | padding-bottom: .5rem; 7081 | } 7082 | 7083 | .pvm-m { 7084 | padding-top: 1rem; 7085 | padding-bottom: 1rem; 7086 | } 7087 | 7088 | .pvl-m { 7089 | padding-top: 2rem; 7090 | padding-bottom: 2rem; 7091 | } 7092 | 7093 | .pvx-m { 7094 | padding-top: 4rem; 7095 | padding-bottom: 4rem; 7096 | } 7097 | 7098 | .pvxl-m { 7099 | padding-top: 8rem; 7100 | padding-bottom: 8rem; 7101 | } 7102 | 7103 | .pvxxl-m { 7104 | padding-top: 16rem; 7105 | padding-bottom: 16rem; 7106 | } 7107 | 7108 | .phn-m { 7109 | padding-left: 0; 7110 | padding-right: 0; 7111 | } 7112 | 7113 | .pvxs-m { 7114 | padding-left: .25rem; 7115 | padding-right: .25rem; 7116 | } 7117 | 7118 | .phs-m { 7119 | padding-left: .5rem; 7120 | padding-right: .5rem; 7121 | } 7122 | 7123 | .phm-m { 7124 | padding-left: 1rem; 7125 | padding-right: 1rem; 7126 | } 7127 | 7128 | .phl-m { 7129 | padding-left: 2rem; 7130 | padding-right: 2rem; 7131 | } 7132 | 7133 | .phx-m { 7134 | padding-left: 4rem; 7135 | padding-right: 4rem; 7136 | } 7137 | 7138 | .phxl-m { 7139 | padding-left: 8rem; 7140 | padding-right: 8rem; 7141 | } 7142 | 7143 | .phxxl-m { 7144 | padding-left: 16rem; 7145 | padding-right: 16rem; 7146 | } 7147 | 7148 | .man-m { 7149 | margin: 0; 7150 | } 7151 | 7152 | .maxs-m { 7153 | margin: .25rem; 7154 | } 7155 | 7156 | .mas-m { 7157 | margin: .5rem; 7158 | } 7159 | 7160 | .mam-m { 7161 | margin: 1rem; 7162 | } 7163 | 7164 | .mal-m { 7165 | margin: 2rem; 7166 | } 7167 | 7168 | .max-m { 7169 | margin: 4rem; 7170 | } 7171 | 7172 | .maxl-m { 7173 | margin: 8rem; 7174 | } 7175 | 7176 | .maxxl-m { 7177 | margin: 16rem; 7178 | } 7179 | 7180 | .mln-m { 7181 | margin-left: 0; 7182 | } 7183 | 7184 | .mlxs-m { 7185 | margin-left: .25rem; 7186 | } 7187 | 7188 | .mls-m { 7189 | margin-left: .5rem; 7190 | } 7191 | 7192 | .mlm-m { 7193 | margin-left: 1rem; 7194 | } 7195 | 7196 | .mll-m { 7197 | margin-left: 2rem; 7198 | } 7199 | 7200 | .mlx-m { 7201 | margin-left: 4rem; 7202 | } 7203 | 7204 | .mlxl-m { 7205 | margin-left: 8rem; 7206 | } 7207 | 7208 | .mlxxl-m { 7209 | margin-left: 16rem; 7210 | } 7211 | 7212 | .mrn-m { 7213 | margin-right: 0; 7214 | } 7215 | 7216 | .mrxs-m { 7217 | margin-right: .25rem; 7218 | } 7219 | 7220 | .mrs-m { 7221 | margin-right: .5rem; 7222 | } 7223 | 7224 | .mrm-m { 7225 | margin-right: 1rem; 7226 | } 7227 | 7228 | .mrl-m { 7229 | margin-right: 2rem; 7230 | } 7231 | 7232 | .mrx-m { 7233 | margin-right: 4rem; 7234 | } 7235 | 7236 | .mrxl-m { 7237 | margin-right: 8rem; 7238 | } 7239 | 7240 | .mrxxl-m { 7241 | margin-right: 16rem; 7242 | } 7243 | 7244 | .mbn-m { 7245 | margin-bottom: 0; 7246 | } 7247 | 7248 | .mbxs-m { 7249 | margin-bottom: .25rem; 7250 | } 7251 | 7252 | .mbs-m { 7253 | margin-bottom: .5rem; 7254 | } 7255 | 7256 | .mbm-m { 7257 | margin-bottom: 1rem; 7258 | } 7259 | 7260 | .mbl-m { 7261 | margin-bottom: 2rem; 7262 | } 7263 | 7264 | .mbx-m { 7265 | margin-bottom: 4rem; 7266 | } 7267 | 7268 | .mbxl-m { 7269 | margin-bottom: 8rem; 7270 | } 7271 | 7272 | .mbxxl-m { 7273 | margin-bottom: 16rem; 7274 | } 7275 | 7276 | .mtn-m { 7277 | margin-top: 0; 7278 | } 7279 | 7280 | .mtxs-m { 7281 | margin-top: .25rem; 7282 | } 7283 | 7284 | .mts-m { 7285 | margin-top: .5rem; 7286 | } 7287 | 7288 | .mtm-m { 7289 | margin-top: 1rem; 7290 | } 7291 | 7292 | .mtl-m { 7293 | margin-top: 2rem; 7294 | } 7295 | 7296 | .mtx-m { 7297 | margin-top: 4rem; 7298 | } 7299 | 7300 | .mtxl-m { 7301 | margin-top: 8rem; 7302 | } 7303 | 7304 | .mtxxl-m { 7305 | margin-top: 16rem; 7306 | } 7307 | 7308 | .mvn-m { 7309 | margin-top: 0; 7310 | margin-bottom: 0rem; 7311 | } 7312 | 7313 | .mvxs-m { 7314 | margin-top: .25rem; 7315 | margin-bottom: .25rem; 7316 | } 7317 | 7318 | .mvs-m { 7319 | margin-top: .5rem; 7320 | margin-bottom: .5rem; 7321 | } 7322 | 7323 | .mvm-m { 7324 | margin-top: 1rem; 7325 | margin-bottom: 1rem; 7326 | } 7327 | 7328 | .mvl-m { 7329 | margin-top: 2rem; 7330 | margin-bottom: 2rem; 7331 | } 7332 | 7333 | .mvx-m { 7334 | margin-top: 4rem; 7335 | margin-bottom: 4rem; 7336 | } 7337 | 7338 | .mvxl-m { 7339 | margin-top: 8rem; 7340 | margin-bottom: 8rem; 7341 | } 7342 | 7343 | .mvxxl-m { 7344 | margin-top: 16rem; 7345 | margin-bottom: 16rem; 7346 | } 7347 | 7348 | .mhn-m { 7349 | margin-left: 0; 7350 | margin-right: 0; 7351 | } 7352 | 7353 | .mhxs-m { 7354 | margin-left: .25rem; 7355 | margin-right: .25rem; 7356 | } 7357 | 7358 | .mhs-m { 7359 | margin-left: .5rem; 7360 | margin-right: .5rem; 7361 | } 7362 | 7363 | .mhm-m { 7364 | margin-left: 1rem; 7365 | margin-right: 1rem; 7366 | } 7367 | 7368 | .mhl-m { 7369 | margin-left: 2rem; 7370 | margin-right: 2rem; 7371 | } 7372 | 7373 | .mhx-m { 7374 | margin-left: 4rem; 7375 | margin-right: 4rem; 7376 | } 7377 | 7378 | .mhxl-m { 7379 | margin-left: 8rem; 7380 | margin-right: 8rem; 7381 | } 7382 | 7383 | .mhxxl-m { 7384 | margin-left: 16rem; 7385 | margin-right: 16rem; 7386 | } 7387 | } 7388 | 7389 | @media screen and (min-width: 64em) { 7390 | .pan-l { 7391 | padding: 0; 7392 | } 7393 | 7394 | .paxs-l { 7395 | padding: .25rem; 7396 | } 7397 | 7398 | .pas-l { 7399 | padding: .5rem; 7400 | } 7401 | 7402 | .pam-l { 7403 | padding: 1rem; 7404 | } 7405 | 7406 | .pal-l { 7407 | padding: 2rem; 7408 | } 7409 | 7410 | .pax-l { 7411 | padding: 4rem; 7412 | } 7413 | 7414 | .paxl-l { 7415 | padding: 8rem; 7416 | } 7417 | 7418 | .paxxl-l { 7419 | padding: 16rem; 7420 | } 7421 | 7422 | .pln-l { 7423 | padding-left: 0; 7424 | } 7425 | 7426 | .plxs-l { 7427 | padding-left: .25rem; 7428 | } 7429 | 7430 | .pls-l { 7431 | padding-left: .5rem; 7432 | } 7433 | 7434 | .plm-l { 7435 | padding-left: 1rem; 7436 | } 7437 | 7438 | .pll-l { 7439 | padding-left: 2rem; 7440 | } 7441 | 7442 | .plx-l { 7443 | padding-left: 4rem; 7444 | } 7445 | 7446 | .plxl-l { 7447 | padding-left: 8rem; 7448 | } 7449 | 7450 | .plxxl-l { 7451 | padding-left: 16rem; 7452 | } 7453 | 7454 | .prn-l { 7455 | padding-right: 0; 7456 | } 7457 | 7458 | .prxs-l { 7459 | padding-right: .25rem; 7460 | } 7461 | 7462 | .prs-l { 7463 | padding-right: .5rem; 7464 | } 7465 | 7466 | .prm-l { 7467 | padding-right: 1rem; 7468 | } 7469 | 7470 | .prl-l { 7471 | padding-right: 2rem; 7472 | } 7473 | 7474 | .prx-l { 7475 | padding-right: 4rem; 7476 | } 7477 | 7478 | .prxl-l { 7479 | padding-right: 8rem; 7480 | } 7481 | 7482 | .prxxl-l { 7483 | padding-right: 16rem; 7484 | } 7485 | 7486 | .pbn-l { 7487 | padding-bottom: 0; 7488 | } 7489 | 7490 | .pbxs-l { 7491 | padding-bottom: .25rem; 7492 | } 7493 | 7494 | .pbs-l { 7495 | padding-bottom: .5rem; 7496 | } 7497 | 7498 | .pbm-l { 7499 | padding-bottom: 1rem; 7500 | } 7501 | 7502 | .pbl-l { 7503 | padding-bottom: 2rem; 7504 | } 7505 | 7506 | .pbx-l { 7507 | padding-bottom: 4rem; 7508 | } 7509 | 7510 | .pbxl-l { 7511 | padding-bottom: 8rem; 7512 | } 7513 | 7514 | .pbxxl-l { 7515 | padding-bottom: 16rem; 7516 | } 7517 | 7518 | .ptn-l { 7519 | padding-top: 0; 7520 | } 7521 | 7522 | .ptxs-l { 7523 | padding-top: .25rem; 7524 | } 7525 | 7526 | .pts-l { 7527 | padding-top: .5rem; 7528 | } 7529 | 7530 | .ptm-l { 7531 | padding-top: 1rem; 7532 | } 7533 | 7534 | .ptl-l { 7535 | padding-top: 2rem; 7536 | } 7537 | 7538 | .ptx-l { 7539 | padding-top: 4rem; 7540 | } 7541 | 7542 | .ptxl-l { 7543 | padding-top: 8rem; 7544 | } 7545 | 7546 | .ptxxl-l { 7547 | padding-top: 16rem; 7548 | } 7549 | 7550 | .pvn-l { 7551 | padding-top: 0; 7552 | padding-bottom: 0; 7553 | } 7554 | 7555 | .pvxs-l { 7556 | padding-top: .25rem; 7557 | padding-bottom: .25rem; 7558 | } 7559 | 7560 | .pvs-l { 7561 | padding-top: .5rem; 7562 | padding-bottom: .5rem; 7563 | } 7564 | 7565 | .pvm-l { 7566 | padding-top: 1rem; 7567 | padding-bottom: 1rem; 7568 | } 7569 | 7570 | .pvl-l { 7571 | padding-top: 2rem; 7572 | padding-bottom: 2rem; 7573 | } 7574 | 7575 | .pvx-l { 7576 | padding-top: 4rem; 7577 | padding-bottom: 4rem; 7578 | } 7579 | 7580 | .pvxl-l { 7581 | padding-top: 8rem; 7582 | padding-bottom: 8rem; 7583 | } 7584 | 7585 | .pvxxl-l { 7586 | padding-top: 16rem; 7587 | padding-bottom: 16rem; 7588 | } 7589 | 7590 | .phn-l { 7591 | padding-left: 0; 7592 | padding-right: 0; 7593 | } 7594 | 7595 | .pvxs-l { 7596 | padding-left: .25rem; 7597 | padding-right: .25rem; 7598 | } 7599 | 7600 | .phs-l { 7601 | padding-left: .5rem; 7602 | padding-right: .5rem; 7603 | } 7604 | 7605 | .phm-l { 7606 | padding-left: 1rem; 7607 | padding-right: 1rem; 7608 | } 7609 | 7610 | .phl-l { 7611 | padding-left: 2rem; 7612 | padding-right: 2rem; 7613 | } 7614 | 7615 | .phx-l { 7616 | padding-left: 4rem; 7617 | padding-right: 4rem; 7618 | } 7619 | 7620 | .phxl-l { 7621 | padding-left: 8rem; 7622 | padding-right: 8rem; 7623 | } 7624 | 7625 | .phxxl-l { 7626 | padding-left: 16rem; 7627 | padding-right: 16rem; 7628 | } 7629 | 7630 | .man-l { 7631 | margin: 0; 7632 | } 7633 | 7634 | .maxs-l { 7635 | margin: .25rem; 7636 | } 7637 | 7638 | .mas-l { 7639 | margin: .5rem; 7640 | } 7641 | 7642 | .mam-l { 7643 | margin: 1rem; 7644 | } 7645 | 7646 | .mal-l { 7647 | margin: 2rem; 7648 | } 7649 | 7650 | .max-l { 7651 | margin: 4rem; 7652 | } 7653 | 7654 | .maxl-l { 7655 | margin: 8rem; 7656 | } 7657 | 7658 | .maxxl-l { 7659 | margin: 16rem; 7660 | } 7661 | 7662 | .mln-l { 7663 | margin-left: 0; 7664 | } 7665 | 7666 | .mlxs-l { 7667 | margin-left: .25rem; 7668 | } 7669 | 7670 | .mls-l { 7671 | margin-left: .5rem; 7672 | } 7673 | 7674 | .mlm-l { 7675 | margin-left: 1rem; 7676 | } 7677 | 7678 | .mll-l { 7679 | margin-left: 2rem; 7680 | } 7681 | 7682 | .mlx-l { 7683 | margin-left: 4rem; 7684 | } 7685 | 7686 | .mlxl-l { 7687 | margin-left: 8rem; 7688 | } 7689 | 7690 | .mlxxl-l { 7691 | margin-left: 16rem; 7692 | } 7693 | 7694 | .mrn-l { 7695 | margin-right: 0; 7696 | } 7697 | 7698 | .mrxs-l { 7699 | margin-right: .25rem; 7700 | } 7701 | 7702 | .mrs-l { 7703 | margin-right: .5rem; 7704 | } 7705 | 7706 | .mrm-l { 7707 | margin-right: 1rem; 7708 | } 7709 | 7710 | .mrl-l { 7711 | margin-right: 2rem; 7712 | } 7713 | 7714 | .mrx-l { 7715 | margin-right: 4rem; 7716 | } 7717 | 7718 | .mrxl-l { 7719 | margin-right: 8rem; 7720 | } 7721 | 7722 | .mrxxl-l { 7723 | margin-right: 16rem; 7724 | } 7725 | 7726 | .mbn-l { 7727 | margin-bottom: 0; 7728 | } 7729 | 7730 | .mbxs-l { 7731 | margin-bottom: .25rem; 7732 | } 7733 | 7734 | .mbs-l { 7735 | margin-bottom: .5rem; 7736 | } 7737 | 7738 | .mbm-l { 7739 | margin-bottom: 1rem; 7740 | } 7741 | 7742 | .mbl-l { 7743 | margin-bottom: 2rem; 7744 | } 7745 | 7746 | .mbx-l { 7747 | margin-bottom: 4rem; 7748 | } 7749 | 7750 | .mbxl-l { 7751 | margin-bottom: 8rem; 7752 | } 7753 | 7754 | .mbxxl-l { 7755 | margin-bottom: 16rem; 7756 | } 7757 | 7758 | .mtn-l { 7759 | margin-top: 0; 7760 | } 7761 | 7762 | .mtxs-l { 7763 | margin-top: .25rem; 7764 | } 7765 | 7766 | .mts-l { 7767 | margin-top: .5rem; 7768 | } 7769 | 7770 | .mtm-l { 7771 | margin-top: 1rem; 7772 | } 7773 | 7774 | .mtl-l { 7775 | margin-top: 2rem; 7776 | } 7777 | 7778 | .mtx-l { 7779 | margin-top: 4rem; 7780 | } 7781 | 7782 | .mtxl-l { 7783 | margin-top: 8rem; 7784 | } 7785 | 7786 | .mtxxl-l { 7787 | margin-top: 16rem; 7788 | } 7789 | 7790 | .mvn-l { 7791 | margin-top: 0; 7792 | margin-bottom: 0rem; 7793 | } 7794 | 7795 | .mvxs-l { 7796 | margin-top: .25rem; 7797 | margin-bottom: .25rem; 7798 | } 7799 | 7800 | .mvs-l { 7801 | margin-top: .5rem; 7802 | margin-bottom: .5rem; 7803 | } 7804 | 7805 | .mvm-l { 7806 | margin-top: 1rem; 7807 | margin-bottom: 1rem; 7808 | } 7809 | 7810 | .mvl-l { 7811 | margin-top: 2rem; 7812 | margin-bottom: 2rem; 7813 | } 7814 | 7815 | .mvx-l { 7816 | margin-top: 4rem; 7817 | margin-bottom: 4rem; 7818 | } 7819 | 7820 | .mvxl-l { 7821 | margin-top: 8rem; 7822 | margin-bottom: 8rem; 7823 | } 7824 | 7825 | .mvxxl-l { 7826 | margin-top: 16rem; 7827 | margin-bottom: 16rem; 7828 | } 7829 | 7830 | .mhn-l { 7831 | margin-left: 0; 7832 | margin-right: 0; 7833 | } 7834 | 7835 | .mhxs-l { 7836 | margin-left: .25rem; 7837 | margin-right: .25rem; 7838 | } 7839 | 7840 | .mhs-l { 7841 | margin-left: .5rem; 7842 | margin-right: .5rem; 7843 | } 7844 | 7845 | .mhm-l { 7846 | margin-left: 1rem; 7847 | margin-right: 1rem; 7848 | } 7849 | 7850 | .mhl-l { 7851 | margin-left: 2rem; 7852 | margin-right: 2rem; 7853 | } 7854 | 7855 | .mhx-l { 7856 | margin-left: 4rem; 7857 | margin-right: 4rem; 7858 | } 7859 | 7860 | .mhxl-l { 7861 | margin-left: 8rem; 7862 | margin-right: 8rem; 7863 | } 7864 | 7865 | .mhxxl-l { 7866 | margin-left: 16rem; 7867 | margin-right: 16rem; 7868 | } 7869 | } 7870 | 7871 | /* 7872 | 7873 | TEXT DECORATION 7874 | 7875 | */ 7876 | 7877 | .under { 7878 | text-decoration: underline; 7879 | } 7880 | 7881 | .none { 7882 | text-decoration: none; 7883 | } 7884 | 7885 | @media screen and (min-width: 42em) { 7886 | .under-ns { 7887 | text-decoration: underline; 7888 | } 7889 | 7890 | .none-ns { 7891 | text-decoration: none; 7892 | } 7893 | } 7894 | 7895 | @media screen and (min-width: 42em) and (max-width: 64em) { 7896 | .under-m { 7897 | text-decoration: underline; 7898 | } 7899 | 7900 | .none-m { 7901 | text-decoration: none; 7902 | } 7903 | } 7904 | 7905 | @media screen and (min-width: 64em) { 7906 | .under-l { 7907 | text-decoration: underline; 7908 | } 7909 | 7910 | .none-l { 7911 | text-decoration: none; 7912 | } 7913 | } 7914 | 7915 | /* 7916 | 7917 | Text Align 7918 | 7919 | */ 7920 | 7921 | .tl { 7922 | text-align: left; 7923 | } 7924 | 7925 | .tr { 7926 | text-align: right; 7927 | } 7928 | 7929 | .tc { 7930 | text-align: center; 7931 | } 7932 | 7933 | @media screen and (min-width: 42em) { 7934 | .tl-ns { 7935 | text-align: left; 7936 | } 7937 | 7938 | .tr-ns { 7939 | text-align: right; 7940 | } 7941 | 7942 | .tc-ns { 7943 | text-align: center; 7944 | } 7945 | } 7946 | 7947 | @media screen and (min-width: 42em) and (max-width: 64em) { 7948 | .tl-m { 7949 | text-align: left; 7950 | } 7951 | 7952 | .tr-m { 7953 | text-align: right; 7954 | } 7955 | 7956 | .tc-m { 7957 | text-align: center; 7958 | } 7959 | } 7960 | 7961 | @media screen and (min-width: 64em) { 7962 | .tl-l { 7963 | text-align: left; 7964 | } 7965 | 7966 | .tr-l { 7967 | text-align: right; 7968 | } 7969 | 7970 | .tc-l { 7971 | text-align: center; 7972 | } 7973 | } 7974 | 7975 | /* 7976 | 7977 | TEXT TRANSFORM 7978 | 7979 | */ 7980 | 7981 | .ttc { 7982 | text-transform: capitalize; 7983 | } 7984 | 7985 | .ttl { 7986 | text-transform: lowercase; 7987 | } 7988 | 7989 | .ttn { 7990 | text-transform: none; 7991 | } 7992 | 7993 | .ttu, 7994 | .caps { 7995 | text-transform: uppercase; 7996 | letter-spacing: .2em; 7997 | } 7998 | 7999 | @media screen and (min-width: 42em) { 8000 | .ttc-ns { 8001 | text-transform: capitalize; 8002 | } 8003 | 8004 | .ttl-ns { 8005 | text-transform: lowercase; 8006 | } 8007 | 8008 | .ttn-ns { 8009 | text-transform: none; 8010 | } 8011 | 8012 | .ttu-ns, 8013 | .caps-ns { 8014 | text-transform: uppercase; 8015 | letter-spacing: .2em; 8016 | } 8017 | } 8018 | 8019 | @media screen and (min-width: 42em) and (max-width: 64em) { 8020 | .ttc-m { 8021 | text-transform: capitalize; 8022 | } 8023 | 8024 | .ttl-m { 8025 | text-transform: lowercase; 8026 | } 8027 | 8028 | .ttn-m { 8029 | text-transform: none; 8030 | } 8031 | 8032 | .ttu-m, 8033 | .caps-m { 8034 | text-transform: uppercase; 8035 | letter-spacing: .2em; 8036 | } 8037 | } 8038 | 8039 | @media screen and (min-width: 64em) { 8040 | .ttc-l { 8041 | text-transform: capitalize; 8042 | } 8043 | 8044 | .ttl-l { 8045 | text-transform: lowercase; 8046 | } 8047 | 8048 | .ttn-l { 8049 | text-transform: none; 8050 | } 8051 | 8052 | .ttu-l, 8053 | .caps-l { 8054 | text-transform: uppercase; 8055 | letter-spacing: .2em; 8056 | } 8057 | } 8058 | 8059 | /* ========================================================================== 8060 | TYPE SCALE 8061 | ========================================================================== */ 8062 | 8063 | .mega { 8064 | font-size: 4rem; 8065 | } 8066 | 8067 | .f1 { 8068 | font-size: 3rem; 8069 | } 8070 | 8071 | .f2 { 8072 | font-size: 2rem; 8073 | } 8074 | 8075 | .f3 { 8076 | font-size: 1.5rem; 8077 | } 8078 | 8079 | .f4 { 8080 | font-size: 1rem; 8081 | } 8082 | 8083 | .f5, 8084 | .small { 8085 | font-size: .85rem; 8086 | } 8087 | 8088 | @media screen and (min-width: 42em) { 8089 | .mega-ns { 8090 | font-size: 4rem; 8091 | } 8092 | 8093 | .f1-ns { 8094 | font-size: 3rem; 8095 | } 8096 | 8097 | .f2-ns { 8098 | font-size: 2rem; 8099 | } 8100 | 8101 | .f3-ns { 8102 | font-size: 1.5em; 8103 | } 8104 | 8105 | .f4-ns { 8106 | font-size: 1rem; 8107 | } 8108 | 8109 | .f5-ns { 8110 | font-size: .85rem; 8111 | } 8112 | } 8113 | 8114 | @media screen and (min-width: 42em) and (max-width: 64em) { 8115 | .mega-m { 8116 | font-size: 4rem; 8117 | } 8118 | 8119 | .f1-m { 8120 | font-size: 3rem; 8121 | } 8122 | 8123 | .f2-m { 8124 | font-size: 2rem; 8125 | } 8126 | 8127 | .f3-m { 8128 | font-size: 1.5rem; 8129 | } 8130 | 8131 | .f4-m { 8132 | font-size: 1rem; 8133 | } 8134 | 8135 | .f5-m { 8136 | font-size: .85rem; 8137 | } 8138 | } 8139 | 8140 | @media screen and (min-width: 64em) { 8141 | .mega-l { 8142 | font-size: 4rem; 8143 | } 8144 | 8145 | .f1-l { 8146 | font-size: 3rem; 8147 | } 8148 | 8149 | .f2-l { 8150 | font-size: 2rem; 8151 | } 8152 | 8153 | .f3-l { 8154 | font-size: 1.5rem; 8155 | } 8156 | 8157 | .f4-l { 8158 | font-size: 1rem; 8159 | } 8160 | 8161 | .f5-l { 8162 | font-size: .85rem; 8163 | } 8164 | } 8165 | 8166 | /* 8167 | 8168 | UTILITIES 8169 | 8170 | */ 8171 | 8172 | .aspect-ratio { 8173 | height: 0; 8174 | padding-top: 56.25%; 8175 | position: relative; 8176 | } 8177 | 8178 | .aspect-ratio--object { 8179 | bottom: 0; 8180 | height: 100%; 8181 | left: 0; 8182 | position: absolute; 8183 | right: 0; 8184 | top: 0; 8185 | width: 100%; 8186 | z-index: 100; 8187 | } 8188 | 8189 | .overflow-container { 8190 | overflow-y: scroll; 8191 | } 8192 | 8193 | /* 8194 | 8195 | VISIBILITY 8196 | 8197 | */ 8198 | 8199 | /* 8200 | Text that is hidden but accessible 8201 | Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility 8202 | */ 8203 | 8204 | .clip { 8205 | position: fixed !important; 8206 | _position: absolute !important; 8207 | clip: rect(1px 1px 1px 1px); 8208 | /* IE6, IE7 */ 8209 | clip: rect(1px, 1px, 1px, 1px); 8210 | } 8211 | 8212 | @media screen and (min-width: 42em) { 8213 | .clip-ns { 8214 | position: fixed !important; 8215 | _position: absolute !important; 8216 | clip: rect(1px 1px 1px 1px); 8217 | /* IE6, IE7 */ 8218 | clip: rect(1px, 1px, 1px, 1px); 8219 | } 8220 | } 8221 | 8222 | @media screen and (min-width: 42em) and (max-width: 64em) { 8223 | .clip-m { 8224 | position: fixed !important; 8225 | _position: absolute !important; 8226 | clip: rect(1px 1px 1px 1px); 8227 | /* IE6, IE7 */ 8228 | clip: rect(1px, 1px, 1px, 1px); 8229 | } 8230 | } 8231 | 8232 | @media screen and (min-width: 64em) { 8233 | .clip-l { 8234 | position: fixed !important; 8235 | _position: absolute !important; 8236 | clip: rect(1px 1px 1px 1px); 8237 | /* IE6, IE7 */ 8238 | clip: rect(1px, 1px, 1px, 1px); 8239 | } 8240 | } 8241 | 8242 | /* 8243 | 8244 | WHITE SPACE 8245 | 8246 | */ 8247 | 8248 | .ws-norm { 8249 | white-space: normal; 8250 | } 8251 | 8252 | .ws-nowrap { 8253 | white-space: nowrap; 8254 | } 8255 | 8256 | .ws-pre { 8257 | white-space: pre; 8258 | } 8259 | 8260 | @media screen and (min-width: 42em) { 8261 | .ws-norm-ns { 8262 | white-space: normal; 8263 | } 8264 | 8265 | .ws-nowrap-ns { 8266 | white-space: nowrap; 8267 | } 8268 | 8269 | .ws-pre-ns { 8270 | white-space: pre; 8271 | } 8272 | } 8273 | 8274 | @media screen and (min-width: 42em) and (max-width: 64em) { 8275 | .ws-norm-m { 8276 | white-space: normal; 8277 | } 8278 | 8279 | .ws-nowrap-m { 8280 | white-space: nowrap; 8281 | } 8282 | 8283 | .ws-pre-m { 8284 | white-space: pre; 8285 | } 8286 | } 8287 | 8288 | @media screen and (min-width: 64em) { 8289 | .ws-norm-l { 8290 | white-space: normal; 8291 | } 8292 | 8293 | .ws-nowrap-l { 8294 | white-space: nowrap; 8295 | } 8296 | 8297 | .ws-pre-l { 8298 | white-space: pre; 8299 | } 8300 | } 8301 | 8302 | /* 8303 | 8304 | STYLES 8305 | 8306 | Add custom styles here. 8307 | 8308 | */ 8309 | 8310 | /* 8311 | VERTICAL ALIGN 8312 | */ 8313 | 8314 | .v-base { 8315 | vertical-align: baseline; 8316 | } 8317 | 8318 | .v-sub { 8319 | vertical-align: sub; 8320 | } 8321 | 8322 | .v-sup { 8323 | vertical-align: super; 8324 | } 8325 | 8326 | .v-txt-top { 8327 | vertical-align: text-top; 8328 | } 8329 | 8330 | .v-txt-btm { 8331 | vertical-align: text-bottom; 8332 | } 8333 | 8334 | .v-mid { 8335 | vertical-align: middle; 8336 | } 8337 | 8338 | .v-top { 8339 | vertical-align: top; 8340 | } 8341 | 8342 | .v-btm { 8343 | vertical-align: bottom; 8344 | } 8345 | 8346 | @media screen and (min-width: 42em) { 8347 | .v-base-ns { 8348 | vertical-align: baseline; 8349 | } 8350 | 8351 | .v-sub-ns { 8352 | vertical-align: sub; 8353 | } 8354 | 8355 | .v-sup-ns { 8356 | vertical-align: super; 8357 | } 8358 | 8359 | .v-txt-top-ns { 8360 | vertical-align: text-top; 8361 | } 8362 | 8363 | .v-txt-btm-ns { 8364 | vertical-align: text-bottom; 8365 | } 8366 | 8367 | .v-mid-ns { 8368 | vertical-align: middle; 8369 | } 8370 | 8371 | .v-top-ns { 8372 | vertical-align: top; 8373 | } 8374 | 8375 | .v-btm-ns { 8376 | vertical-align: bottom; 8377 | } 8378 | } 8379 | 8380 | @media screen and (min-width: 42em) and (max-width: 64em) { 8381 | .v-base-m { 8382 | vertical-align: baseline; 8383 | } 8384 | 8385 | .v-sub-m { 8386 | vertical-align: sub; 8387 | } 8388 | 8389 | .v-sup-m { 8390 | vertical-align: super; 8391 | } 8392 | 8393 | .v-txt-top-m { 8394 | vertical-align: text-top; 8395 | } 8396 | 8397 | .v-txt-btm-m { 8398 | vertical-align: text-bottom; 8399 | } 8400 | 8401 | .v-mid-m { 8402 | vertical-align: middle; 8403 | } 8404 | 8405 | .v-top-m { 8406 | vertical-align: top; 8407 | } 8408 | 8409 | .v-btm-m { 8410 | vertical-align: bottom; 8411 | } 8412 | } 8413 | 8414 | @media screen and (min-width: 64em) { 8415 | .v-base-l { 8416 | vertical-align: baseline; 8417 | } 8418 | 8419 | .v-sub-l { 8420 | vertical-align: sub; 8421 | } 8422 | 8423 | .v-sup-l { 8424 | vertical-align: super; 8425 | } 8426 | 8427 | .v-txt-top-l { 8428 | vertical-align: text-top; 8429 | } 8430 | 8431 | .v-txt-btm-l { 8432 | vertical-align: text-bottom; 8433 | } 8434 | 8435 | .v-mid-l { 8436 | vertical-align: middle; 8437 | } 8438 | 8439 | .v-top-l { 8440 | vertical-align: top; 8441 | } 8442 | 8443 | .v-btm-l { 8444 | vertical-align: bottom; 8445 | } 8446 | } -------------------------------------------------------------------------------- /client/templates/accounts.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /client/templates/comment_item.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /client/templates/comment_submit.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /client/templates/firstPage.html: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /client/templates/landingPage.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /client/templates/signout.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /client/templates/wellness.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /client/templates/wellnessItem.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /client/templates/wellnessItem.js: -------------------------------------------------------------------------------- 1 | Template.wellnessItem.events({ 2 | 'click':function() { 3 | Session.set('selected_yak', this._id); 4 | }, 5 | 6 | 'click a.yes':function() { 7 | if(Meteor.user()) { 8 | var postId = Yaks.findOne({_id:this._id}) 9 | if ($.inArray(Meteor.userId(), postId.voted) !== -1) { 10 | console.log('User already voted'); 11 | } else { 12 | var yakId = Session.get('selected_yak'); 13 | console.log('Voting'); 14 | Yaks.update(yakId, {$inc: {'score': 1 }}); 15 | Yaks.update(yakId, {$addToSet: {voted : Meteor.userId()}}); 16 | } 17 | } 18 | }, 19 | 20 | 'click a.no':function() { 21 | if (Meteor.user()) { 22 | var postId = Yaks.findOne({_id:this._id}) 23 | if ($.inArray(Meteor.userId(), postId.voted) !== -1) { 24 | console.log('User already voted'); 25 | } else { 26 | var yakId = Session.get('selected_yak'); 27 | console.log('Voting'); 28 | Yaks.update(yakId, {$inc: {'score': -1 }}); 29 | Yaks.update(yakId, {$addToSet: {voted : Meteor.userId()}}); 30 | if (postId.score <= -3) { 31 | console.log('delete'); 32 | Yaks.remove({_id:this._id}) 33 | } 34 | } 35 | } 36 | } 37 | }); 38 | 39 | Template.wellnessItem.helpers({ 40 | commentsCount: function() { 41 | return Comments.find({postId:this._id}).count(); 42 | } 43 | }); 44 | -------------------------------------------------------------------------------- /client/templates/wellnessList.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /client/templates/wellnessList.js: -------------------------------------------------------------------------------- 1 | Template.wellnessList.helpers({ 2 | yaks: function() { 3 | return Yaks.find({}, {sort : {score: -1}}); 4 | } 5 | }) -------------------------------------------------------------------------------- /client/templates/wellnessSubmit.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /client/templates/wellnessSubmit.js: -------------------------------------------------------------------------------- 1 | Template.wellnessSubmit.events({ 2 | 'submit .yaksSubmitForm': function(event,err) { 3 | 4 | event.preventDefault(); 5 | var yak = event.target.yak.value; // get yak value 6 | 7 | // check if the value is empty 8 | if (yak == "") { 9 | alert("You can't insert empty yak. Try to write something funny instead! :)"); 10 | } else { 11 | Meteor.call('yakInsert', yak); 12 | /*post._id = Yaks.insert(post);*/ 13 | Router.go('wellnessList'); 14 | } 15 | 16 | } 17 | }); -------------------------------------------------------------------------------- /client/templates/yak_item.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /client/templates/yak_page.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /client/templates/yak_submit.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /client/templates/yaks_list.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /client/yak_item.js: -------------------------------------------------------------------------------- 1 | Template.yakItem.events({ 2 | 'click':function() { 3 | Session.set('selected_yak', this._id); 4 | }, 5 | 6 | 'click a.yes':function() { 7 | if(Meteor.user()) { 8 | var postId = Yaks.findOne({_id:this._id}) 9 | if ($.inArray(Meteor.userId(), postId.voted) !== -1) { 10 | console.log('User already voted'); 11 | } else { 12 | var yakId = Session.get('selected_yak'); 13 | console.log('Voting'); 14 | Yaks.update(yakId, {$inc: {'score': 1 }}); 15 | Yaks.update(yakId, {$addToSet: {voted : Meteor.userId()}}); 16 | } 17 | } 18 | }, 19 | 20 | 'click a.no':function() { 21 | if (Meteor.user()) { 22 | var postId = Yaks.findOne({_id:this._id}) 23 | if ($.inArray(Meteor.userId(), postId.voted) !== -1) { 24 | console.log('User already voted'); 25 | } else { 26 | var yakId = Session.get('selected_yak'); 27 | console.log('Voting'); 28 | Yaks.update(yakId, {$inc: {'score': -1 }}); 29 | Yaks.update(yakId, {$addToSet: {voted : Meteor.userId()}}); 30 | if (postId.score <= -3) { 31 | console.log('delete'); 32 | Yaks.remove({_id:this._id}) 33 | } 34 | } 35 | } 36 | } 37 | }); 38 | 39 | Template.yakItem.helpers({ 40 | commentsCount: function() { 41 | return Comments.find({postId:this._id}).count(); 42 | } 43 | }); 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /client/yak_page.js: -------------------------------------------------------------------------------- 1 | Template.yakPage.helpers({ 2 | comments: function() { 3 | return Comments.find({postId:this._id}); 4 | } 5 | }); -------------------------------------------------------------------------------- /client/yak_submit.js: -------------------------------------------------------------------------------- 1 | // Template.yaksSubmit.events({ 2 | // 'submit .yaksSubmitForm': function(event,err) { 3 | 4 | // event.preventDefault(); 5 | // var postTitle = event.target.postTitle.value; // get yakTitle value 6 | // var yak = event.target.yak.value; // get yak value 7 | 8 | // // check if the value is empty 9 | // if (yak == "") { 10 | // alert("Post details"); 11 | // } else { 12 | // Meteor.call('yakInsert', yak); 13 | // Meteor.call('postTitleInsert', postTitle) 14 | // /*post._id = Yaks.insert(post);*/ 15 | // Router.go('yaksList'); 16 | // } 17 | 18 | // } 19 | // }); 20 | 21 | 22 | Template.yaksSubmit.events({ 23 | 'submit form': function(e) { 24 | e.preventDefault(); 25 | 26 | var post = { 27 | postTitle: $(e.target).find('[name=postTitle]').val(), 28 | yak: $(e.target).find('[name=yak]').val() 29 | }; 30 | 31 | post._id = Yaks.insert(post); 32 | Router.go('yaksList', post); 33 | } 34 | }); -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | Yaks = new Meteor.Collection('yaks'); 2 | 3 | Comments = new Mongo.Collection("comments"); 4 | 5 | Router.route('/', {name: 'accounts'}) 6 | 7 | Router.route('/wellness', {name: 'wellness'}) 8 | 9 | Router.route('/wellnesssubmit', {name: 'wellnessSubmit'}) 10 | 11 | Router.route('/wellnesslist', {name: 'wellnessList'}) 12 | 13 | Router.route('/yakslist', {name: 'yaksList'}) 14 | 15 | Router.route('/submit', {name: 'yaksSubmit'}); 16 | 17 | Router.route('/login', {name: 'firstpage'}); 18 | 19 | 20 | // Josh: tried routing to a new list from /wellness 21 | // Router.route('/wellness', {name: 'yaksList'}) 22 | // Router.route('/wellness', {name: 'yaks'}) 23 | 24 | Router.route('/yaks/:_id', { 25 | name: 'yakPage', 26 | data: function() { 27 | return Yaks.findOne(this.params._id); 28 | } 29 | }); -------------------------------------------------------------------------------- /public/welby.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group Copy 30 + Group Copy 31 + Oval 173 + Oval 174 + Line + Rectangle 694 + Oval 173 + Oval 173 Copy + Path 472 + Group + Shape Copy 23 Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy + Group Copy 9 Copy Copy 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /server/server.js: -------------------------------------------------------------------------------- 1 | Meteor.methods({ 2 | yakInsert: function(yak) { 3 | var postId = Yaks.insert({ 4 | yak : yak, 5 | score : 0, 6 | submitted : new Date(), 7 | }); 8 | }, 9 | 10 | commentInsert: function(comment) { 11 | Comments.insert(comment); 12 | } 13 | 14 | 15 | }); --------------------------------------------------------------------------------