├── .jshint ├── .jshintrc ├── CNAME ├── LICENSE ├── README.md ├── bundle.js ├── css ├── base │ ├── _loader.svg │ ├── base.css │ ├── base.svg │ ├── base@2x.png │ ├── credit-cards.svg │ ├── credit-cards@2x.png │ ├── icon.eot │ ├── icon.woff │ ├── opensans-bold.eot │ ├── opensans-bold.woff │ ├── opensans-bolditalic.eot │ ├── opensans-bolditalic.woff │ ├── opensans-italic.eot │ ├── opensans-italic.woff │ ├── opensans-regular.eot │ └── opensans-regular.woff └── site.css ├── index.html ├── package.json ├── site.js ├── src ├── actions.js ├── components │ ├── help.js │ └── song.js ├── config.js ├── constants │ └── song_constants.js ├── dispatcher.js ├── index.js ├── make_store.js ├── mml.js └── stores │ └── song_store.js └── timbre.js /.jshint: -------------------------------------------------------------------------------- 1 | { 2 | "esnext":true 3 | } 4 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "esnext": true 3 | } 4 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | ditty.website 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | ISC License 2 | 3 | Copyright (c) 2015, Tom MacWright 4 | 5 | Permission to use, copy, modify, and/or distribute this software for any 6 | purpose with or without fee is hereby granted, provided that the above 7 | copyright notice and this permission notice appear in all copies. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES 10 | WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF 11 | MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR 12 | ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES 13 | WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN 14 | ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF 15 | OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ditty 2 | 3 | This is an online grid-based [music sequencer](http://en.wikipedia.org/wiki/Music_sequencer). 4 | 5 | It's also an example of a [React.js](http://facebook.github.io/react/) 6 | [facebook/flux](https://facebook.github.io/flux/) + 7 | [immutable.js](https://github.com/facebook/immutable-js) + 8 | [babelify](https://github.com/babel/babelify) project. 9 | Audio is by [timbre.js](http://mohayonao.github.io/timbre/). 10 | Keybindings are powered by the [react-keybinding](https://github.com/mapbox/react-keybinding) 11 | project. 12 | 13 | ## Architecutre 14 | 15 | Songs are immutable-js objects that are managed in [Songstore](src/stores/song_store.js). 16 | Modifications to songs move through actions. 17 | 18 | ## Development 19 | 20 | ```sh 21 | $ npm install 22 | $ npm start 23 | ``` 24 | -------------------------------------------------------------------------------- /css/base/_loader.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 18 | 20 | 21 | 23 | image/svg+xml 24 | 26 | 27 | 28 | 29 | 30 | 32 | 61 | 70 | 74 | 75 | 80 | 85 | 86 | -------------------------------------------------------------------------------- /css/base/base.css: -------------------------------------------------------------------------------- 1 | /* ------------------------------------------------------- 2 | This file is Copyright (C) 2015 Mapbox Inc. All rights reserved. 3 | You may not duplicate, copy, or reuse any portion without express written 4 | permission from Mapbox. 5 | ------------------------------------------------------- */ 6 | 7 | /* Reset ♥ Adapted from http://meyerweb.com/eric/tools/css/reset/ 8 | ------------------------------------------------------- */ 9 | html, body, div, span, applet, object, iframe, 10 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 11 | a, abbr, acronym, address, big, cite, code, 12 | del, dfn, em, img, ins, kbd, q, s, samp, 13 | small, strike, strong, sub, sup, tt, var, 14 | b, u, i, center, 15 | dl, dt, dd, ol, ul, li, 16 | fieldset, form, label, legend, 17 | table, caption, tbody, tfoot, thead, tr, th, td, 18 | article, aside, canvas, details, embed, 19 | figure, figcaption, footer, header, hgroup, 20 | menu, nav, output, ruby, section, summary, 21 | time, mark, audio, video { 22 | margin:0; 23 | padding:0; 24 | border:0; 25 | font-size:100%; 26 | font:inherit; 27 | vertical-align:baseline; 28 | } 29 | /* HTML5 display-role reset for older browsers */ 30 | article, aside, details, figcaption, figure, 31 | footer, header, hgroup, menu, nav, section { 32 | display:block; 33 | } 34 | body { line-height:1; } 35 | ol, ul { list-style:none; } 36 | blockquote, q { quotes:none; } 37 | blockquote:before, blockquote:after, 38 | q:before, q:after { content:''; content:none; } 39 | /* tables still need 'cellspacing="0"' in the markup */ 40 | table { border-collapse: collapse; border-spacing:0; } 41 | /* remember to define focus styles. Hee Haw */ 42 | :focus { outline:0; } 43 | 44 | 45 | *, *:after, *:before { 46 | -webkit-box-sizing:border-box; 47 | -moz-box-sizing:border-box; 48 | box-sizing:border-box; 49 | } 50 | 51 | /* @FontFace 52 | ------------------------------------------------------- */ 53 | @font-face { 54 | font-family:'Brandon'; 55 | src:url('brandon_blk.eot'); 56 | src:url('brandon_blk.eot#iefix') format('embedded-opentype'), 57 | url('brandon_blk.woff') format('woff'); 58 | } 59 | 60 | @font-face { 61 | font-family:'Open Sans'; 62 | src:url('opensans-regular.eot'); 63 | src:url('opensans-regular.eot#iefix') format('embedded-opentype'), 64 | url('opensans-regular.woff') format('woff'); 65 | } 66 | 67 | @font-face { 68 | font-family:'Open Sans Italic'; 69 | src:url('opensans-italic.eot'); 70 | src:url('opensans-italic.eot#iefix') format('embedded-opentype'), 71 | url('opensans-italic.woff') format('woff'); 72 | } 73 | 74 | @font-face { 75 | font-family:'Open Sans Bold'; 76 | src:url('opensans-bold.eot'); 77 | src:url('opensans-bold.eot#iefix') format('embedded-opentype'), 78 | url('opensans-bold.woff') format('woff'); 79 | } 80 | 81 | @font-face { 82 | font-family:'Open Sans Bold Italic'; 83 | src:url('opensans-bolditalic.eot'); 84 | src:url('opensans-bolditalic.eot#iefix') format('embedded-opentype'), 85 | url('opensans-bolditalic.woff') format('woff'); 86 | } 87 | 88 | /* Inline Elements: Defaults 89 | ------------------------------------------------------- */ 90 | body, 91 | input, 92 | textarea { 93 | color:#404040; 94 | color:rgba(0,0,0,0.75); 95 | font:15px/20px 'Open Sans', sans-serif; 96 | -webkit-font-smoothing:antialiased; 97 | } 98 | 99 | body { background:#fff; } 100 | .dark { color:#fff; } 101 | 102 | h1, 103 | h2, 104 | h3, 105 | h4, 106 | h5, 107 | h6 { 108 | font-family:'Open Sans Bold', sans-serif; 109 | font-weight:normal; 110 | margin:0; 111 | } 112 | 113 | em h1, h1 em, 114 | em h2, h2 em, 115 | em h3, h3 em, 116 | em h4, h4 em, 117 | em h5, h5 em, 118 | em h6, h6 em { 119 | font-family:'Open Sans Bold Italic', sans-serif; 120 | } 121 | 122 | h1 { 123 | font-size:30px; 124 | line-height:40px; 125 | } 126 | h2 { 127 | font-size:22px; 128 | line-height:30px; 129 | padding-top: 5px; 130 | padding-bottom:5px; 131 | } 132 | 133 | h3 { 134 | font-size:15px; 135 | line-height:20px; 136 | } 137 | 138 | h4, h5, h6 { 139 | font-size:12px; 140 | line-height:20px; 141 | } 142 | 143 | p { margin-bottom:20px; } 144 | 145 | p:last-child { margin-bottom:0; } 146 | 147 | small, 148 | .prose.small, 149 | .small { 150 | font-size:12px; 151 | line-height:20px; 152 | letter-spacing:0; 153 | } 154 | 155 | small { display:block; } 156 | 157 | .micro, 158 | .prose .micro, 159 | .prose.micro { 160 | font-size:10px; 161 | line-height:20px; 162 | letter-spacing:0; 163 | } 164 | 165 | .strong, 166 | strong { 167 | font-family:'Open Sans Bold', sans-serif; 168 | font-weight:normal; 169 | } 170 | strong em, 171 | em strong { font-family:'Open Sans Bold Italic', sans-serif; } 172 | 173 | address, 174 | em { 175 | font-family:'Open Sans Italic', sans-serif; 176 | } 177 | 178 | /* Fancy font style */ 179 | 180 | h1.fancy, 181 | h2.fancy, 182 | h3.fancy { 183 | font-family:'Brandon', sans-serif; 184 | } 185 | 186 | h1.fancy { 187 | font-size:60px; 188 | line-height:80px; 189 | letter-spacing:3px; 190 | text-transform: uppercase; 191 | } 192 | h2.fancy { 193 | padding-top: 0; 194 | padding-bottom: 0; 195 | font-size:40px; 196 | letter-spacing:2px; 197 | line-height:50px; 198 | text-transform: uppercase; 199 | } 200 | 201 | .prose-big h3.fancy, 202 | h3.fancy { 203 | font-size:28px; 204 | letter-spacing:2px; 205 | line-height:40px; 206 | text-transform: uppercase; 207 | } 208 | 209 | /* deprecated */ 210 | h1.futura, 211 | h2.futura, 212 | h3.futura { 213 | font-family:'Brandon', sans-serif; 214 | } 215 | 216 | h1.futura { 217 | font-size:60px; 218 | line-height:80px; 219 | letter-spacing:3px; 220 | text-transform: uppercase; 221 | } 222 | h2.futura { 223 | padding-top: 0; 224 | padding-bottom: 0; 225 | font-size:40px; 226 | letter-spacing:2px; 227 | line-height:50px; 228 | text-transform: uppercase; 229 | } 230 | 231 | .prose-big h3.futura, 232 | h3.futura { 233 | font-size:28px; 234 | letter-spacing:2px; 235 | line-height:40px; 236 | text-transform: uppercase; 237 | } 238 | 239 | /* Links */ 240 | a, 241 | a > code { 242 | color:#3887BE; 243 | text-decoration:none; 244 | } 245 | a:hover > code, 246 | a.active, 247 | a:hover { color:#63b6e5; } 248 | a:focus { 249 | box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05); 250 | } 251 | 252 | .dark a, 253 | a.dark, 254 | .dark a > code { color:rgba(255,255,255,.5); } 255 | a.dark.active, 256 | .dark a.active, 257 | a.dark:hover, 258 | .dark a:hover > code, 259 | .dark a:hover { color:white; } 260 | .dark a:focus { 261 | box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05); 262 | } 263 | 264 | a.quiet, 265 | a.quiet > code { 266 | color:rgba(0,0,0,0.5); 267 | } 268 | a.quiet.active, a.quiet:hover { color:rgba(0,0,0,0.75); } 269 | 270 | .dark a.quiet, 271 | a.quiet.dark { color:white; } 272 | 273 | .dark a.quiet:hover, 274 | a.quiet.dark.active, a.quiet.dark:hover { color:rgba(255,255,255,0.5); } 275 | 276 | /* Buttons */ 277 | button, 278 | .button, 279 | [type=button], 280 | [type=submit] { 281 | background-color:#3887be; 282 | text-align:center; 283 | color:#fff; 284 | display:inline-block; 285 | height:40px; 286 | margin:0px; 287 | padding:10px; 288 | position:relative; 289 | border:none; 290 | cursor:pointer; 291 | border-radius:3px; 292 | white-space:nowrap; 293 | text-overflow:ellipsis; 294 | /* Protects button metrics in .prose context */ 295 | font-family:'Open Sans Bold', sans-serif; 296 | line-height:20px; 297 | font-size:12px; 298 | -webkit-appearance:none; 299 | 300 | /* The button element needs to be forced this */ 301 | -webkit-font-smoothing:antialiased; 302 | } 303 | 304 | button.short, 305 | .button.short, 306 | [type=button].short, 307 | [type=submit].short { 308 | height: 30px; 309 | padding-top: 5px; 310 | padding-bottom: 5px; 311 | vertical-align: middle; 312 | } 313 | 314 | button.stroke, 315 | .button.stroke, 316 | [type=button].stroke, 317 | [type=submit].stroke { 318 | background-color: transparent; 319 | padding: 9px; 320 | border: 2px solid #3887BE; 321 | color: #3887BE; 322 | } 323 | 324 | button.stroke.short, 325 | .button.stroke.short, 326 | [type=button].stroke.short, 327 | [type=submit].stroke.short { 328 | padding-top: 4px; 329 | padding-bottom: 4px; 330 | } 331 | 332 | .button.stroke:hover { 333 | background-color: transparent; 334 | color: #3bb2d0; 335 | border-color: #3bb2d0; 336 | } 337 | 338 | .button.stroke.active { 339 | color: white; 340 | background-color: #3887BE; 341 | border-color: transparent; 342 | } 343 | 344 | button:hover, 345 | .button:hover, 346 | .button.active, 347 | [type=button]:hover, 348 | [type=submit]:hover { 349 | color:#fff; 350 | } 351 | 352 | .dark .button, 353 | .dark .button:hover, 354 | .dark .quiet.button, 355 | .dark .quiet.button:hover, 356 | .dark [type=button]:hover, 357 | .dark [type=submit]:hover { 358 | color: white; 359 | } 360 | 361 | .dark .button.stroke { 362 | border-color: white; 363 | color: white; 364 | } 365 | 366 | .dark .button.stroke:hover, 367 | .dark .button.stroke.active { 368 | background-color: transparent; 369 | border-color: rgba(255,255,255,.5); 370 | color: rgba(255,255,255,.75); 371 | } 372 | 373 | .dark .button.stroke.quiet { 374 | background-color: transparent; 375 | border-color: rgba(255,255,255,.25); 376 | color: rgba(255,255,255,.5); 377 | } 378 | 379 | .dark .button.quiet.stroke:hover, 380 | .dark .button.quiet.stroke.active { 381 | background-color: transparent; 382 | border-color: rgba(255,255,255,.75); 383 | color: rgba(255,255,255,.75); 384 | } 385 | 386 | button:focus, 387 | .button:focus, 388 | [type=submit]:focus, 389 | [type=button]:focus { 390 | box-shadow: inset 0 0 0 3px rgba(0,0,0,0.1); 391 | } 392 | 393 | button:hover, 394 | .button:hover, 395 | .button.active, 396 | [type=submit]:hover, 397 | [type=button]:hover { 398 | background-color:#3bb2d0; 399 | } 400 | 401 | .button.loud, 402 | .loud[type=submit], 403 | .loud[type=button] { 404 | background-color:#8889cc; 405 | } 406 | .button.loud.active, 407 | .button.loud:hover, 408 | .loud[type=submit]:hover, 409 | .loud[type=button]:hover { 410 | background-color:#bd93e5; 411 | } 412 | 413 | .button.quiet, 414 | .quiet[type=submit], 415 | .quiet[type=button] { 416 | background-color:rgba(0,0,0,0.25); 417 | color:#fff; 418 | } 419 | .button.quiet.active, 420 | .button.quiet:hover, 421 | .quiet[type=submit]:hover, 422 | .quiet[type=button]:hover { 423 | background-color:rgba(0,0,0,0.5); 424 | color:#fff; 425 | box-shadow: 426 | inset rgba(0,0,0,0) 0 0 0, 427 | inset rgba(0,0,0,0) 0 0 0; 428 | } 429 | 430 | .button.stroke.quiet { 431 | background: transparent; 432 | border: 2px solid rgba(0,0,0,0.25); 433 | color: rgba(0,0,0,0.5); 434 | } 435 | 436 | .button.stroke.quiet:hover { 437 | border-color: rgba(0,0,0,.5); 438 | color: rgba(0,0,0,.5); 439 | } 440 | 441 | .button.stroke.quiet.active:hover, 442 | .button.stroke.quiet.active { 443 | border-color: transparent; 444 | background: rgba(0,0,0,0.5); 445 | color: white; 446 | } 447 | 448 | .button.stroke.loud { 449 | background: transparent; 450 | border: 2px solid #8889cc; 451 | color: #8889cc; 452 | } 453 | 454 | .button.stroke.loud:hover { 455 | border-color: #bd93e5; 456 | color: #bd93e5; 457 | background-color:transparent; 458 | } 459 | 460 | .button.stroke.loud.active { 461 | border-color: transparent; 462 | color: white; 463 | background-color:#8889cc; 464 | } 465 | 466 | .dark .button.quiet, 467 | .dark .quiet[type=submit], 468 | .dark .quiet[type=button] { 469 | color:#fff; 470 | background-color:rgba(255,255,255,0.10); 471 | } 472 | 473 | .dark .button.quiet.active, 474 | .dark .button.quiet:hover, 475 | .dark .quiet[type=submit]:hover, 476 | .dark .quiet[type=button]:hover { 477 | background-color:rgba(255,255,255,0.25); 478 | } 479 | 480 | .button.disabled, 481 | .button:disabled, 482 | button.disabled, 483 | button:disabled, 484 | [type=submit]:disabled, 485 | [type=button]:disabled { 486 | background:rgba(0,0,0,.1); 487 | color:rgba(0,0,0,0.25); 488 | cursor: default; 489 | } 490 | 491 | .button.disabled:hover, 492 | .button:disabled:hover, 493 | button.disabled:hover, 494 | button:disabled:hover, 495 | [type=submit]:disabled:hover, 496 | [type=button]:disabled:hover { 497 | background:rgba(0,0,0,.1); 498 | } 499 | 500 | .button.disabled:focus, 501 | .button:disabled:focus, 502 | button.disabled:focus, 503 | button:disabled:focus, 504 | [type=submit]:disabled:focus, 505 | [type=button]:disabled:focus { 506 | box-shadow:none; 507 | } 508 | 509 | .dark .button.disabled, 510 | .dark .button:disabled, 511 | .dark button.disabled, 512 | .dark button:disabled, 513 | .dark [type=submit]:disabled, 514 | .dark [type=button]:disabled { 515 | background:rgba(255,255,255,.05); 516 | color: rgba(255,255,255,.5); 517 | } 518 | 519 | .dark .button.disabled:hover, 520 | .dark .button:disabled:hover, 521 | .dark button.disabled:hover, 522 | .dark button:disabled:hover, 523 | .dark [type=submit]:disabled:hover, 524 | .dark [type=button]:disabled:hover { 525 | background:rgba(255,255,255,.05); 526 | } 527 | 528 | /* Tab style for links that toggle between views */ 529 | .tabs { 530 | display:inline-block; 531 | } 532 | .tabs, 533 | .pill.tabs { 534 | -webkit-border-radius:3px; 535 | border-radius:3px; 536 | } 537 | .tabs > a { 538 | border-top:1px solid rgba(0,0,0,0.25); 539 | border-bottom:1px solid rgba(0,0,0,0.25); 540 | background:transparent; 541 | color:rgba(0,0,0,.5); 542 | font-family:'Open Sans Bold', sans-serif; 543 | font-size:12px; 544 | text-align:center; 545 | display:inline-block; 546 | height:40px; 547 | margin:0; 548 | padding:10px; 549 | white-space:nowrap; 550 | text-overflow:ellipsis; 551 | } 552 | .tabs > * { 553 | border:0 solid rgba(0,0,0,0.25); 554 | border-right-width:1px; 555 | } 556 | .tabs > *:first-child { 557 | border-left-width:1px; 558 | border-radius: 3px 0 0 3px; 559 | } 560 | .tabs > *:last-child { 561 | border-radius: 0 3px 3px 0; 562 | } 563 | .tabs > *:hover { 564 | background:rgba(0,0,0,0.05); 565 | color:rgba(0,0,0,.5); 566 | } 567 | .tabs > *.active { 568 | background:rgba(0,0,0,0.1); 569 | color:rgba(0,0,0,.5); 570 | } 571 | 572 | .dark.tabs, 573 | .dark.tabs > *, 574 | .dark .tabs, 575 | .dark .tabs > * { 576 | border-color:rgba(255,255,255,0.25); 577 | color:rgba(255,255,255,1); 578 | } 579 | .dark.tabs > *:hover, 580 | .dark .tabs > *:hover { 581 | background-color:rgba(225,255,255,0.1); 582 | color:rgba(255,255,255,1); 583 | } 584 | .dark.tabs > *.active, 585 | .dark .tabs > *.active { 586 | background-color:rgba(225,255,255,0.15); 587 | color:rgba(255,255,255,1); 588 | } 589 | 590 | /* Pill wrapper for joining buttons. */ 591 | /* Use to eliminate whitespace between buttons. */ 592 | .pill { 593 | display:inline-block; 594 | } 595 | .pill > * { 596 | border-radius:0 0 0 0; 597 | border:0 solid white; 598 | border-left-width:1px; 599 | } 600 | .pill > *:first-of-type { 601 | border-radius:3px 0 0 3px; 602 | border-left-width:0; 603 | } 604 | .pill > *:last-of-type { 605 | border-radius:0 3px 3px 0; 606 | } 607 | .pill > *:only-child { 608 | border-radius:3px; 609 | } 610 | 611 | .pill .button.stroke { 612 | border-right-width: 2px; 613 | border-left-width: 0; 614 | } 615 | 616 | .pill .button.stroke:first-of-type { 617 | border-left-width: 2px; 618 | } 619 | 620 | /* Vertical pill if pill contents is full width */ 621 | .pill > .col12 { 622 | text-align: left; 623 | border-bottom-width:1px; 624 | border-left-width:0; 625 | } 626 | .pill > .col12:first-of-type { 627 | border-radius:3px 3px 0 0; 628 | } 629 | .pill > .col12:last-of-type { 630 | border-radius:0 0 3px 3px; 631 | border-bottom-width:0; 632 | } 633 | .pill > .col12:only-child, 634 | .pill > .col12:only-of-type { 635 | border-radius: 3px; 636 | } 637 | 638 | .pill > .stroke.col12 { 639 | border-left-width:2px; 640 | border-right-width: 2px; 641 | border-bottom-width: 2px; 642 | border-top-width: 0px; 643 | } 644 | .pill > .stroke.col12:first-of-type { 645 | border-top-width: 2px; 646 | } 647 | .pill > .stroke.col12:only-of-type { 648 | border-width: 2px; 649 | } 650 | 651 | .dark.fill-dark .pill > * { border-color:#404040; } 652 | .fill-gray .pill > *, 653 | .fill-grey .pill > * { border-color:#eee; } 654 | .fill-white .pill > * { border-color:#fff; } 655 | .fill-light .pill > * { border-color:#f8f8f8; } 656 | /* deprecated, use fill-cyan */ 657 | .fill-blue-light .pill > * { border-color:#3bb2d0;} 658 | .fill-cyan .pill > * { border-color:#3bb2d0;} 659 | .fill-blue .pill > * { border-color:#3887be; } 660 | .fill-denim .pill > * { border-color:#3c4e5a; } 661 | .fill-navy .pill > * { border-color:#28353d; } 662 | .fill-navy-dark .pill > * { border-color:#222B30; } 663 | .fill-purple .pill > * { border-color:#8a8acb; } 664 | .fill-midnight .pill > * { border-color:#142736; } 665 | 666 | .dark.fill-darken1 .pill > *, 667 | .dark.fill-darken2 .pill > *, 668 | .dark.fill-darken3 .pill > * { 669 | border-color:#000; 670 | border-color:rgba(0,0,0,0.5); 671 | } 672 | .fill-lighten1 .pill > *, 673 | .fill-lighten2 .pill > *, 674 | .fill-lighten3 .pill > * { 675 | border-color:#fff; 676 | border-color:rgba(255,255,255,0.5); 677 | } 678 | 679 | .pill > .stroke { border-color: #3887be; } 680 | .pill > .quiet.stroke { border-color: rgba(0,0,0,.25); } 681 | .pill > .loud.stroke { border-color: #8889cc; } 682 | 683 | .dark .pill > .stroke { border-color: white; } 684 | .dark .pill > .quiet.stroke { border-color: rgba(255,255,255,.25); } 685 | 686 | .pill input[type=text] { 687 | border:1px solid rgba(0,0,0,0.1); 688 | border-radius:0; 689 | } 690 | 691 | .pill input[type=text]:focus { 692 | border:1px solid rgba(0,0,0,0.25); 693 | } 694 | 695 | /* Pill style for input followed by button */ 696 | .input-pill input[type='text'], 697 | .input-pill input[type=text]:focus { border-right-width: 0;} 698 | 699 | .input-pill input[type='text'] + input[type='submit'], 700 | .input-pill input[type='text'] + .button { 701 | border-left-width: 0; 702 | border-radius: 0 3px 3px 0; 703 | } 704 | 705 | /* make your pills toggles */ 706 | .toggle a { 707 | width:40px; 708 | padding:0; 709 | overflow:hidden; 710 | white-space:nowrap; 711 | } 712 | .toggle .big.button.icon:not(.active) { 713 | padding-left:0; 714 | } 715 | .toggle a.active { 716 | background:#3bb2d0; 717 | color:rgba(255,255,255,0.75); 718 | padding:10px; 719 | width:auto; 720 | color:#cdecf3; 721 | } 722 | 723 | /* Rounded toggle for filtering/modifying lists */ 724 | .rounded-toggle { 725 | margin-top: 5px; 726 | margin-bottom: 5px; 727 | padding: 2px; 728 | border-radius: 15px; 729 | vertical-align: middle; 730 | background: rgba(0,0,0,.1) 731 | } 732 | 733 | .dark .rounded-toggle { background: rgba(255,255,255,.1);} 734 | 735 | .rounded-toggle label, 736 | .rounded-toggle a { 737 | cursor:pointer; 738 | vertical-align: top; 739 | display: inline-block; 740 | border-radius: 16px; 741 | padding: 3px 10px; 742 | font-size: 12px; 743 | color: rgba(0,0,0,0.5); 744 | line-height: 20px; 745 | } 746 | 747 | .rounded-toggle label:empty, 748 | .rounded-toggle a:empty { 749 | padding-left: 5px; padding-right: 5px; 750 | } 751 | 752 | .rounded-toggle label:hover, 753 | .rounded-toggle a:hover { 754 | color: rgba(0,0,0,0.75); 755 | } 756 | 757 | .dark .rounded-toggle label, 758 | .dark .rounded-toggle a { color: white;} 759 | 760 | .dark .rounded-toggle label:hover, 761 | .dark .rounded-toggle a:hover { 762 | color: rgba(255,255,255,0.75); 763 | } 764 | 765 | .rounded-toggle input[type=radio] { display:none; } 766 | 767 | .rounded-toggle input[type=radio]:checked + label, 768 | .rounded-toggle a.active { background: white; color: rgba(0,0,0,.5); } 769 | 770 | .dark .rounded-toggle input[type=radio]:checked + label, 771 | .dark .rounded-toggle a.active { color: white; } 772 | 773 | .fill-dark .rounded-toggle input[type=radio]:checked + label, 774 | .fill-dark .rounded-toggle a.active { background-color:#404040; } 775 | .fill-gray .rounded-toggle input[type=radio]:checked + label, 776 | .fill-gray .rounded-toggle a.active, 777 | .fill-grey .rounded-toggle input[type=radio]:checked + label, 778 | .fill-grey .rounded-toggle a.active { background:#eee; } 779 | .fill-grey-dark .rounded-toggle input[type=radio]:checked + label, 780 | .fill-grey-dark .rounded-toggle a.active, 781 | .fill-gray-dark .rounded-toggle input[type=radio]:checked + label, 782 | .fill-gray-dark .rounded-toggle a.active { background:#404040; } 783 | .fill-white .rounded-toggle input[type=radio]:checked + label, 784 | .fill-white .rounded-toggle a.active { background:#fff; } 785 | .fill-light .rounded-toggle input[type=radio]:checked + label, 786 | .fill-light .rounded-toggle a.active { background:#f8f8f8; } 787 | /* deprecated, use fill-cyan */ 788 | .fill-blue-light .rounded-toggle input[type=radio]:checked + label, 789 | .fill-blue-light .rounded-toggle a.active { background:#3bb2d0; } 790 | .fill-blue-cyan .rounded-toggle input[type=radio]:checked + label, 791 | .fill-blue-cyan .rounded-toggle a.active { background:#3bb2d0; } 792 | .fill-blue .rounded-toggle input[type=radio]:checked + label, 793 | .fill-blue .rounded-toggle a.active { background:#3887be; } 794 | .fill-midnight .rounded-toggle input[type=radio]:checked + label, 795 | .fill-midnight .rounded-toggle a.active { background:#142736; } 796 | .fill-denim .rounded-toggle input[type=radio]:checked + label, 797 | .fill-denim .rounded-toggle a.active { background:#3c4e5a; } 798 | .fill-navy .rounded-toggle input[type=radio]:checked + label, 799 | .fill-navy .rounded-toggle a.active { background:#28353d; } 800 | .fill-navy-dark .rounded-toggle input[type=radio]:checked + label, 801 | .fill-navy-dark .rounded-toggle a.active { background:#222B30; } 802 | .fill-purple .rounded-toggle input[type=radio]:checked + label, 803 | .fill-purple .rounded-toggle a.active { background:#8a8acb; } 804 | .fill-green .rounded-toggle input[type=radio]:checked + label, 805 | .fill-green .rounded-toggle a.active { background:#56b881; } 806 | .fill-yellow .rounded-toggle input[type=radio]:checked + label, 807 | .fill-yellow .rounded-toggle a.active { background:#f1f075; } 808 | .fill-orange .rounded-toggle input[type=radio]:checked + label, 809 | .fill-orange .rounded-toggle a.active { background:#ee8a65; } 810 | 811 | .short.rounded-toggle { 812 | margin-top: 3px; 813 | margin-bottom: 3px; 814 | } 815 | 816 | .rounded-toggle.short input[type=radio] + label, 817 | .rounded-toggle.short a { 818 | font-size: 10px; 819 | padding:0 7px; 820 | } 821 | 822 | img { 823 | max-width:100%; 824 | vertical-align:top; 825 | } 826 | .center img, 827 | img.center { margin-left:auto; margin-right:auto; } 828 | 829 | /* images defined with background size - 830 | placed here so width will be overriden by grid widths*/ 831 | .thumbnail { height: 30px; width: 30px;} 832 | .small-graphic { height: 60px; width: 60px;} 833 | .big-graphic { height: 120px; width: 120px;} 834 | 835 | abbr { 836 | border-bottom:1px dotted #000; 837 | cursor:help; 838 | } 839 | 840 | hr { 841 | margin:0 0 20px; 842 | border:0; 843 | height:1px; 844 | background:#f8f8f8; 845 | background:rgba(0,0,0,.05); 846 | } 847 | 848 | .dark hr { 849 | background:rgba(255,255,255,.05); 850 | } 851 | 852 | /* Block Quotes */ 853 | blockquote, 854 | q { 855 | quotes:none; 856 | font-style:normal; 857 | padding-left:20px; 858 | margin:10px; 859 | } 860 | 861 | blockquote:before, 862 | blockquote:after, 863 | q:before, 864 | q:after { 865 | content:''; 866 | } 867 | 868 | /* Keyboard styles */ 869 | kbd { 870 | background: rgba(0,0,0,.025); 871 | color: rgba(0,0,0,.5); 872 | border: 1px solid rgba(0,0,0,.1); 873 | font-size:12px; 874 | line-height:20px; 875 | border-radius: 3px; 876 | padding:2px 3px; 877 | box-shadow: 0 1px 0 0 rgba(0,0,0,.1); 878 | font-weight: normal; 879 | } 880 | 881 | .dark kbd { 882 | background: rgba(255,255,255,.025); 883 | color: rgba(255,255,255,.5); 884 | border-color: rgba(255,255,255,.1); 885 | } 886 | 887 | /* Code Blocks & Pre */ 888 | .code, 889 | code, 890 | em code, 891 | code em, 892 | code strong, 893 | strong code, 894 | pre, 895 | em pre, 896 | pre em, 897 | pre strong, 898 | strong pre { 899 | font-family:Menlo, Bitstream Vera Sans Mono, Monaco, Consolas, monospace; 900 | white-space: pre-wrap; 901 | } 902 | 903 | strong code, 904 | code strong, 905 | code.strong, 906 | strong.code, 907 | .strong.code, 908 | .code .strong, 909 | code .strong, 910 | pre strong, 911 | strong pre, 912 | pre.strong, 913 | .strong pre, 914 | pre .strong { 915 | font-family:Menlo, Bitstream Vera Sans Mono, Monaco, Consolas, monospace; 916 | font-weight:bold; 917 | } 918 | 919 | code em, 920 | em code, 921 | pre em, 922 | em pre { 923 | font-family:Menlo, Bitstream Vera Sans Mono, Monaco, Consolas, monospace; 924 | font-style:italic; 925 | } 926 | 927 | code, 928 | pre { 929 | background:rgba(0,0,0,0.025); 930 | font-size:12px; 931 | line-height:20px; 932 | padding:3px; 933 | border-radius: 3px; 934 | } 935 | pre { 936 | display:block; 937 | padding:10px; 938 | word-break:break-all; 939 | word-wrap:break-word; 940 | white-space:pre; 941 | white-space:pre-wrap; 942 | -moz-tab-size:4; 943 | tab-size:4; 944 | } 945 | pre code { 946 | background:transparent; 947 | padding:0; 948 | } 949 | 950 | .pre-scrollable { 951 | max-height:300px; 952 | overflow-y:scroll; 953 | } 954 | 955 | /* sub/superscripts */ 956 | sup, 957 | sub { 958 | height:0; 959 | line-height:1; 960 | vertical-align:baseline; 961 | _vertical-align:bottom; 962 | position:relative; 963 | font-size:75%; 964 | } 965 | sup { 966 | bottom:1ex; 967 | } 968 | sub { 969 | top:.5ex; 970 | } 971 | 972 | /* Form basics 973 | -------------------------------------------------- */ 974 | 975 | form fieldset { 976 | margin: 0 0 20px; 977 | } 978 | form fieldset:last-child { 979 | margin-bottom: 0; 980 | } 981 | 982 | form fieldset label { 983 | font:12px/20px 'Open Sans Bold', sans-serif; 984 | display:block; 985 | margin:0 0 5px; 986 | } 987 | .dark label { 988 | color:#f0f0f0; 989 | color:rgba(255,255,255,0.75); 990 | } 991 | 992 | form fieldset label.inline { margin-bottom: 0;} 993 | 994 | input, 995 | select, 996 | button { 997 | vertical-align:top; 998 | } 999 | textarea, 1000 | input[type=password], 1001 | input[type=text], 1002 | input[type=date], 1003 | input[type=email], 1004 | input[type=number] { 1005 | display:inline-block; 1006 | height:40px; 1007 | margin:0; 1008 | color:rgba(0,0,0,.5); 1009 | padding:10px; 1010 | -webkit-appearance:none; 1011 | } 1012 | textarea.code, 1013 | input.code, 1014 | input[type=password].code, 1015 | input[type=text].code, 1016 | input[type=date].code, 1017 | input[type=email].code, 1018 | input[type=number].code { 1019 | font-family:Menlo, Bitstream Vera Sans Mono, Monaco, Consolas, monospace; 1020 | white-space: pre-wrap; 1021 | } 1022 | textarea, 1023 | input[type=password], 1024 | input[type=text], 1025 | input[type=date], 1026 | input[type=email], 1027 | input[type=number] { 1028 | background-color:#fff; 1029 | border:1px solid rgba(0,0,0,0.1); 1030 | -webkit-transition:border-color .05s; 1031 | -moz-transition:border-color .05s; 1032 | -ms-transition:border-color .05s; 1033 | transition:border-color .05s; 1034 | } 1035 | .dark textarea, 1036 | .dark input[type=password], 1037 | .dark input[type=text], 1038 | .dark input[type=date], 1039 | .dark input[type=email], 1040 | .dark input[type=number] { 1041 | background:#404040; 1042 | background:rgba(0,0,0,0.25); 1043 | border-color:#eee; 1044 | border-color:rgba(255,255,255,0.25); 1045 | color:#fff; 1046 | box-shadow:none; 1047 | } 1048 | textarea:focus, 1049 | input[type=password]:focus, 1050 | input[type=text]:focus, 1051 | input[type=date]:focus, 1052 | input[type=email]:focus, 1053 | input[type=number]:focus { 1054 | outline:thin dotted\8; /* ie8 below */ 1055 | border-color:rgba(0,0,0,0.25); 1056 | color:#404040; 1057 | } 1058 | .dark textarea:focus, 1059 | .dark input[type=password]:focus, 1060 | .dark input[type=text]:focus, 1061 | .dark input[type=date]:focus, 1062 | .dark input[type=email]:focus, 1063 | .dark input[type=number]:focus { 1064 | border-color:rgba(255,255,255,0.75); 1065 | color:#fff; 1066 | } 1067 | 1068 | textarea:disabled, 1069 | input[type=text]:disabled, 1070 | input[type=date]:disabled, 1071 | input[type=email]:disabled, 1072 | input[type=number]:disabled, 1073 | input[type=password]:disabled { 1074 | border-color:rgba(0,0,0,0.125); 1075 | color: rgba(0,0,0,0.5); 1076 | } 1077 | .dark textarea:disabled, 1078 | .dark input[type='text']:disabled { 1079 | border-color:rgba(255,255,255,0.25); 1080 | color: rgba(255,255,255,0.5); 1081 | } 1082 | 1083 | textarea.short, 1084 | input[type=password].short, 1085 | input[type=text].short, 1086 | input[type=date].short, 1087 | input[type=email].short, 1088 | input[type=number].short { 1089 | height: 30px; 1090 | padding:5px; 1091 | -webkit-appearance:none; 1092 | } 1093 | textarea.short { height: 60px;} 1094 | 1095 | textarea.stretch, 1096 | input.stretch[type=text], 1097 | input.stretch[type=email], 1098 | input.stretch[type=number], 1099 | input.stretch[type=password] { width:100%; } 1100 | 1101 | textarea.clean, 1102 | input[type=password].clean, 1103 | input[type=text].clean, 1104 | input[type=date].clean, 1105 | input[type=email].clean, 1106 | input[type=number].clean, 1107 | .dark textarea.clean, 1108 | .dark input[type=password].clean, 1109 | .dark input[type=text].clean, 1110 | .dark input[type=date].clean, 1111 | .dark input[type=email].clean, 1112 | .dark input[type=number].clean { 1113 | border-width: 0; 1114 | } 1115 | 1116 | textarea.clean:focus, 1117 | input[type=password].clean:focus, 1118 | input[type=text].clean:focus, 1119 | input[type=date].clean:focus, 1120 | input[type=email].clean:focus, 1121 | input[type=number].clean:focus { 1122 | background-color: rgba(0,0,0,.05); 1123 | } 1124 | 1125 | .dark textarea.clean:focus, 1126 | .dark input[type=password].clean:focus, 1127 | .dark input[type=text].clean:focus, 1128 | .dark input[type=date].clean:focus, 1129 | .dark input[type=email].clean:focus, 1130 | .dark input[type=number].clean:focus { 1131 | background-color: rgba(0,0,0,.35); 1132 | } 1133 | 1134 | /* Special Form Components */ 1135 | .with-icon { 1136 | position:relative; 1137 | } 1138 | .with-icon input[type=text], 1139 | .with-icon input[type=date], 1140 | .with-icon input[type=email], 1141 | .with-icon input[type=number] { 1142 | padding-left:35px; 1143 | } 1144 | .with-icon .icon { 1145 | position:absolute; 1146 | top:10px; 1147 | left:10px; 1148 | } 1149 | 1150 | .with-icon input[type=text], 1151 | .with-icon input[type=date], 1152 | .with-icon input[type=email], 1153 | .with-icon input[type=number] { padding-left: 30px; } 1154 | .with-icon .short ~ .icon { left:5px; top: 5px; } 1155 | 1156 | .with-icon-right { 1157 | position:relative; 1158 | } 1159 | .with-icon-right input[type=text], 1160 | .with-icon-right input[type=date], 1161 | .with-icon-right input[type=email], 1162 | .with-icon-right input[type=number] { 1163 | padding-right:35px; 1164 | } 1165 | .with-icon-right .icon { 1166 | position:absolute; 1167 | top:10px; 1168 | right:10px; 1169 | } 1170 | 1171 | .with-icon-right input[type=text], 1172 | .with-icon-right input[type=date], 1173 | .with-icon-right input[type=email], 1174 | .with-icon-right input[type=number] { 1175 | padding-right: 30px; 1176 | } 1177 | 1178 | .with-icon-right .short ~ .icon { right:5px; top: 5px;} 1179 | 1180 | textarea { 1181 | height:80px; 1182 | max-width:none; 1183 | overflow:auto; 1184 | resize:none; 1185 | } 1186 | textarea.resize { resize:both; } 1187 | 1188 | select { 1189 | margin-top: 1px; 1190 | margin-bottom: 1px; 1191 | } 1192 | 1193 | input[type=range], 1194 | input[type=range]::-webkit-slider-thumb { 1195 | -webkit-appearance:none; 1196 | margin:0; padding:0; border:0; 1197 | } 1198 | input[type=range] { 1199 | display:inline-block!important; 1200 | vertical-align:middle; 1201 | height:12px; 1202 | padding:0 2px; 1203 | border:2px solid transparent; 1204 | background:rgba(0,0,0,0.25); 1205 | min-width:100px; 1206 | overflow:hidden; 1207 | cursor:pointer; 1208 | } 1209 | input[type=range]::-ms-fill-upper { background:transparent; } 1210 | input[type=range]::-ms-fill-lower { background:rgba(255,255,255,0.25); } 1211 | 1212 | /* Browser thingies */ 1213 | input[type=range]::-moz-range-track { opacity:0; } 1214 | input[type=range]::-ms-track { opacity:0; } 1215 | input[type=range]::-ms-tooltip { display:none; } 1216 | 1217 | /* For whatever reason, these need to be defined 1218 | * on their own so dont group them */ 1219 | input[type=range]::-webkit-slider-thumb { 1220 | background:rgba(255,255,255,0.75); 1221 | height:12px; width:20px; 1222 | border-radius:3px; 1223 | cursor:ew-resize; 1224 | box-shadow:rgba(255,255,255,0.25) -1200px 0 0 1200px; 1225 | } 1226 | input[type=range]::-ms-thumb { 1227 | margin:0;padding:0;border:0; 1228 | background:rgba(255,255,255,0.75); 1229 | height:12px; width:20px; 1230 | border-radius:3px; 1231 | cursor:ew-resize; 1232 | box-shadow:rgba(255,255,255,0.25) -1200px 0 0 1200px; 1233 | } 1234 | input[type=range]::-moz-range-thumb { 1235 | margin:0;padding:0;border:0; 1236 | background:rgba(255,255,255,0.75); 1237 | height:12px; width:20px; 1238 | border-radius:3px; 1239 | cursor:ew-resize; 1240 | box-shadow:rgba(255,255,255,0.25) -1200px 0 0 1200px; 1241 | } 1242 | 1243 | input[type=range]:disabled::-moz-range-thumb { cursor: default;} 1244 | input[type=range]:disabled::-ms-thumb { cursor: default;} 1245 | input[type=range]:disabled::-webkit-slider-thumb { cursor: default;} 1246 | input[type=range]:disabled { cursor: default; } 1247 | 1248 | /* Checkboxes 1249 | ** DEPRECATED - use checkbox-pill instead 1250 | -------------------------------------------------- */ 1251 | 1252 | .checkbox input[type=checkbox] { display:none; } 1253 | .checkbox label { 1254 | cursor:pointer; 1255 | padding:10px; 1256 | } 1257 | .checkbox label:hover { 1258 | background: rgba(0,0,0,0.025); 1259 | } 1260 | .checkbox input[type=checkbox]:checked + label { 1261 | background: rgba(0,0,0,0.05); 1262 | } 1263 | .checkbox input[type=checkbox] + .icon:before { 1264 | background-color:#fff; 1265 | margin-right:5px; 1266 | box-shadow:0 0 0 1px rgba(0,0,0,0.25) inset; 1267 | } 1268 | .checkbox input[type=checkbox]:not(:checked) + .icon:before { 1269 | content: ''; 1270 | } 1271 | .dark.checkbox input[type=checkbox] + .icon:before, 1272 | .dark .checkbox input[type=checkbox] + .icon:before { 1273 | background-color:rgba(0,0,0,0.25); 1274 | } 1275 | 1276 | .pill.checkbox input[type=checkbox]:checked + label { 1277 | background-color:rgba(0,0,0,0.1); 1278 | } 1279 | 1280 | .dark .pill.checkbox input[type=checkbox]:checked + label, 1281 | .dark.pill.checkbox input[type=checkbox]:checked + label { 1282 | background-color:rgba(255,255,255,0.2); 1283 | } 1284 | 1285 | /* Checkbox pill - use in conjunction with pill + button 1286 | -------------------------------------------------- */ 1287 | 1288 | .checkbox-pill input[type=checkbox] { display: none;} 1289 | .checkbox-pill input[type=checkbox] + label:before { background-color: rgba(0,0,0,0.25); border-radius: 2px;} 1290 | .checkbox-pill input[type=checkbox]:not(:checked) + label:before { content: '';} 1291 | .checkbox-pill input[type=checkbox]:checked + label { background-color: #3bb2d0;} 1292 | .checkbox-pill input[type=checkbox]:checked + label.quiet { background-color: rgba(0,0,0,.5);} 1293 | .checkbox-pill input[type=checkbox]:checked + label.loud { background-color: #bd93e5;} 1294 | .dark.checkbox-pill input[type=checkbox]:checked + label.quiet, 1295 | .dark .checkbox-pill input[type=checkbox]:checked + label.quiet { background-color: rgba(255,255,255,0.25);} 1296 | 1297 | /* Radio pill - use in conjunction with pill + button 1298 | -------------------------------------------------- */ 1299 | 1300 | .radio-pill input[type=radio] { display: none;} 1301 | .radio-pill input[type=radio] + label:before { overflow: hidden;} 1302 | .radio-pill input[type=radio]:not(:checked) + label:before { width: 0;} 1303 | .radio-pill input[type=radio]:checked + label { background-color: #3bb2d0;} 1304 | .radio-pill input[type=radio]:checked + label.quiet { background-color: rgba(0,0,0,.5);} 1305 | .radio-pill input[type=radio]:checked + label.loud { background-color: #bd93e5;} 1306 | .dark.radio-pill input[type=radio]:checked + label.quiet, 1307 | .dark .radio-pill input[type=radio]:checked + label.quiet { background-color: rgba(255,255,255,0.25);} 1308 | 1309 | /* Tables 1310 | -------------------------------------------------- */ 1311 | table { 1312 | width:100%; 1313 | background-color:transparent; 1314 | border-collapse:collapse; 1315 | border-spacing:0; 1316 | } 1317 | table th, 1318 | table td { 1319 | padding:4px 0; 1320 | text-align:left; 1321 | vertical-align:top; 1322 | border-bottom:1px solid #ddd; 1323 | } 1324 | table th { 1325 | font-family:'Open Sans Bold', sans-serif; 1326 | } 1327 | table thead th { 1328 | vertical-align:bottom; 1329 | } 1330 | 1331 | table.fixed { 1332 | table-layout:fixed; 1333 | } 1334 | 1335 | .scroll-styled .highlight pre, 1336 | .scroll-styled { 1337 | overflow:auto; 1338 | } 1339 | .scroll-styled .highlight pre::webkit-scrollbar, 1340 | .scroll-styled::-webkit-scrollbar { 1341 | width:8px; 1342 | height:8px; 1343 | border-left:0; 1344 | background:rgba(0,0,0,0.1); 1345 | } 1346 | .scroll-styled .highlight pre::webkit-scrollbar:hover, 1347 | .scroll-styled::-webkit-scrollbar:hover { 1348 | background:rgba(0,0,0,0.15); 1349 | } 1350 | .scroll-styled .highlight pre::webkit-scrollbar-track, 1351 | .scroll-styled::-webkit-scrollbar-track { 1352 | background:none; 1353 | } 1354 | .scroll-styled .highlight pre::webkit-scrollbar-thumb, 1355 | .scroll-styled::-webkit-scrollbar-thumb { 1356 | background:rgba(0,0,0,0.1); 1357 | border-radius:0; 1358 | } 1359 | 1360 | .dark .scroll-styled::-webkit-scrollbar { 1361 | width:8px; 1362 | height:8px; 1363 | background:rgba(255,255,255,0.1); 1364 | border-radius:0; 1365 | } 1366 | .dark .scroll-styled::-webkit-scrollbar:hover { 1367 | background:rgba(255,255,255,0.15); 1368 | } 1369 | .dark .scroll-styled::-webkit-scrollbar-thumb { 1370 | background:rgba(255,255,255,0.1); 1371 | } 1372 | 1373 | /* Inline Elements: Formatted for read content 1374 | ------------------------------------------------------- */ 1375 | .prose { line-height:25px; } 1376 | .prose section { margin-bottom:20px; } 1377 | 1378 | .title, 1379 | .prose h1, 1380 | .prose h2, 1381 | .prose h3, 1382 | .prose h4, 1383 | .prose h5, 1384 | .prose h6, 1385 | .prose p, 1386 | .prose ul, 1387 | .prose ol, 1388 | .prose img, 1389 | .prose blockquote, 1390 | .prose pre, 1391 | .prose iframe, 1392 | .prose object, 1393 | .prose div.highlight { 1394 | display:block; 1395 | margin-bottom:20px; 1396 | word-wrap:break-word; 1397 | } 1398 | .prose h2 { 1399 | padding-top:0; 1400 | padding-bottom:0; 1401 | } 1402 | .prose h1, 1403 | .prose h2 { 1404 | padding-top:40px; 1405 | } 1406 | .prose h3, 1407 | .prose h4, 1408 | .prose h5, 1409 | .prose h6 { 1410 | padding-top:20px; 1411 | } 1412 | .prose h1:first-child, 1413 | .prose h2:first-child, 1414 | .prose h3:first-child, 1415 | .prose h4:first-child, 1416 | .prose h5:first-child, 1417 | .prose h6:first-child { 1418 | padding-top:0; 1419 | } 1420 | .prose blockquote { 1421 | padding:20px; 1422 | margin:0 0 20px 0; 1423 | background-color:#f8f8f8; 1424 | background-color:rgba(0,0,0,.05); 1425 | } 1426 | .prose blockquote p:last-child { 1427 | margin:0; 1428 | } 1429 | .prose p > video, 1430 | .prose p > iframe, 1431 | .prose p a > iframe, 1432 | .prose p > img, 1433 | .prose p a > img, 1434 | .prose li > video, 1435 | .prose li > iframe, 1436 | .prose li a > iframe, 1437 | .prose li > img, 1438 | .prose li a > img { 1439 | max-width:100%; 1440 | max-height:600px; 1441 | margin-right:auto; 1442 | margin-left:auto; 1443 | } 1444 | 1445 | table.prose, 1446 | .prose table { 1447 | border:1px solid #ddd; 1448 | } 1449 | table.prose th, 1450 | table.prose td, 1451 | .prose table th, 1452 | .prose table td { 1453 | padding:8px; 1454 | border:1px solid #ddd; 1455 | } 1456 | table.prose th, 1457 | .prose table th { 1458 | background-color:rgba(0,0,0,0.05); 1459 | } 1460 | 1461 | .prose ul { 1462 | list-style:disc; 1463 | margin-left:40px; 1464 | } 1465 | .prose ol { 1466 | list-style:decimal; 1467 | margin-left:40px; 1468 | } 1469 | .prose ul li, 1470 | .prose ol li { 1471 | margin-bottom:10px; 1472 | } 1473 | 1474 | /* Dark read content styling */ 1475 | .dark .prose h1, 1476 | .dark .prose h2, 1477 | .dark .prose h3 { 1478 | color:#fff; 1479 | } 1480 | 1481 | h1.small, 1482 | h2.small, 1483 | h3.small, 1484 | h4.small, 1485 | h5.small, 1486 | h6.small, 1487 | h1.micro, 1488 | h2.micro, 1489 | h3.micro, 1490 | h4.micro, 1491 | h5.micro, 1492 | h6.micro { 1493 | text-transform:uppercase; 1494 | } 1495 | 1496 | .prose h1:last-child, 1497 | .prose h2:last-child, 1498 | .prose h3:last-child, 1499 | .prose h4:last-child, 1500 | .prose h5:last-child, 1501 | .prose h6:last-child, 1502 | .prose p:last-child, 1503 | .prose ul:last-child, 1504 | .prose ol:last-child, 1505 | .prose ul li:last-child, 1506 | .prose ol li:last-child, 1507 | .prose img:last-child, 1508 | .prose blockquote:last-child, 1509 | .prose pre:last-child, 1510 | .prose iframe:last-child, 1511 | .prose object:last-child { 1512 | margin-bottom: 0; 1513 | } 1514 | 1515 | /* Larger default font sizes for read content. This 1516 | * class should be used in conjunction with .prose 1517 | ------------------------------------------------------- */ 1518 | .prose-big, 1519 | .prose-big h3, 1520 | .prose-big h4, 1521 | .prose-big h5, 1522 | .prose-big h6 { 1523 | font-size:18px; 1524 | line-height:30px; 1525 | } 1526 | .prose-big .small, 1527 | .prose-big small { 1528 | font-size:15px; 1529 | line-height:25px; 1530 | } 1531 | 1532 | /* Inline Elements: Anchor link styling 1533 | ------------------------------------------------------- */ 1534 | h1 a[href^='#'], 1535 | h2 a[href^='#'], 1536 | .doc h1[id], 1537 | .doc h2[id], 1538 | .doc h3[id], 1539 | .doc h4[id] { 1540 | cursor:pointer; 1541 | color:rgba(0, 0, 0, 0.75); 1542 | } 1543 | 1544 | .dark h1 a[href^='#'], 1545 | .dark h2 a[href^='#'], 1546 | h1 .dark > a[href^='#'], 1547 | h2 .dark > a[href^='#'] { 1548 | color: white; 1549 | } 1550 | 1551 | /* Icons 1552 | ------------------------------------------------------- */ 1553 | @font-face { 1554 | font-family:'icon'; 1555 | src:url('icon.eot?v=4'); 1556 | src:url('icon.eot?v=4#iefix') format('embedded-opentype'), 1557 | url('icon.woff?v=4') format('woff'); 1558 | font-weight:normal; 1559 | font-style:normal; 1560 | } 1561 | 1562 | .rcon:after, 1563 | .icon:before { 1564 | font-family: 'icon'; 1565 | content:''; 1566 | display:inline-block; 1567 | width:20px; 1568 | height:20px; 1569 | font-size: 20px; 1570 | color: inherit; 1571 | vertical-align:top; 1572 | -webkit-background-size:4320px 60px; 1573 | background-size:4320px 60px; 1574 | speak: none; 1575 | font-style: normal; 1576 | font-weight: normal; 1577 | font-variant: normal; 1578 | text-transform: none; 1579 | line-height: 1; 1580 | /* Better Font Rendering =========== */ 1581 | -webkit-font-smoothing: antialiased; 1582 | -moz-osx-font-smoothing: grayscale; 1583 | 1584 | } 1585 | 1586 | .rcon.big:after, 1587 | .icon.big:before { 1588 | font-size: 40px; 1589 | width:40px; 1590 | height:40px; 1591 | } 1592 | 1593 | .prose-big .icon, 1594 | .prose-big .rcon, 1595 | .prose .icon, 1596 | .prose .rcon { 1597 | line-height: 20px; 1598 | } 1599 | 1600 | .icon.big { line-height:40px; } 1601 | .icon:not(.big):before { margin-right:5px; } 1602 | .icon:empty:before { margin:0; } 1603 | .button.icon:empty { width:40px; padding:10px; } 1604 | .button.stroke.icon:empty { vertical-align: top; padding:8px; } 1605 | .button.short.icon:empty { width:30px; padding:5px; } 1606 | 1607 | .big.button.icon { 1608 | line-height: 40px; 1609 | padding-left: 10px; 1610 | padding-top: 0; 1611 | padding-bottom: 0; 1612 | } 1613 | 1614 | .big.icon:empty { 1615 | height: 40px; 1616 | width: 40px; 1617 | padding:0; 1618 | } 1619 | 1620 | /* Generated with icomoon.com 1621 | Note: :after rules and alternative names need to be added manually. 1622 | Alternate exists for: 1623 | .close -> .x 1624 | */ 1625 | 1626 | /* before */ 1627 | 1628 | .icon.text-align-top-center:before { 1629 | content: "\e666"; 1630 | } 1631 | 1632 | .icon.text-align-top-left:before { 1633 | content: "\e667"; 1634 | } 1635 | 1636 | .icon.text-align-top-right:before { 1637 | content: "\e668"; 1638 | } 1639 | 1640 | .icon.text-align-bottom-center:before { 1641 | content: "\e66c"; 1642 | } 1643 | 1644 | .icon.text-align-bottom-left:before { 1645 | content: "\e66d"; 1646 | } 1647 | 1648 | .icon.text-align-bottom-right:before { 1649 | content: "\e68f"; 1650 | } 1651 | 1652 | .icon.text-align-center-center:before { 1653 | content: "\e690"; 1654 | } 1655 | 1656 | .icon.account:before { 1657 | content: "\e600"; 1658 | } 1659 | 1660 | .icon.adjust-stroke:before { 1661 | content: "\e601"; 1662 | } 1663 | 1664 | .icon.alert:before { 1665 | content: "\e602"; 1666 | } 1667 | 1668 | .icon.android:before { 1669 | content: "\e603"; 1670 | } 1671 | 1672 | .icon.apple:before { 1673 | content: "\e604"; 1674 | } 1675 | 1676 | .icon.arrive:before { 1677 | content: "\e605"; 1678 | } 1679 | 1680 | .icon.arrowright:before { 1681 | content: "\e606"; 1682 | } 1683 | 1684 | .icon.bear-left:before { 1685 | content: "\e607"; 1686 | } 1687 | 1688 | .icon.bear-right:before { 1689 | content: "\e608"; 1690 | } 1691 | 1692 | .icon.bolt:before { 1693 | content: "\e609"; 1694 | } 1695 | 1696 | .icon.book:before { 1697 | content: "\e60a"; 1698 | } 1699 | 1700 | .icon.bookmark:before { 1701 | content: "\e60b"; 1702 | } 1703 | 1704 | .icon.brackets:before { 1705 | content: "\e60c"; 1706 | } 1707 | 1708 | .icon.building:before { 1709 | content: "\e60d"; 1710 | } 1711 | 1712 | .icon.cap-butt:before { 1713 | content: "\e60e"; 1714 | } 1715 | 1716 | .icon.cap-round:before { 1717 | content: "\e60f"; 1718 | } 1719 | 1720 | .icon.cap-square:before { 1721 | content: "\e610"; 1722 | } 1723 | 1724 | .icon.cart:before { 1725 | content: "\e611"; 1726 | } 1727 | 1728 | .icon.check:before { 1729 | content: "\e612"; 1730 | } 1731 | 1732 | .icon.clipboard:before { 1733 | content: "\e613"; 1734 | } 1735 | 1736 | .icon.x:before, 1737 | .icon.close:before { 1738 | content: "\e614"; 1739 | } 1740 | 1741 | .icon.cloud:before { 1742 | content: "\e615"; 1743 | } 1744 | 1745 | .icon.compass:before { 1746 | content: "\e616"; 1747 | } 1748 | 1749 | .icon.contact:before { 1750 | content: "\e617"; 1751 | } 1752 | 1753 | .icon.creditcard:before { 1754 | content: "\e618"; 1755 | } 1756 | 1757 | .icon.crosshair:before { 1758 | content: "\e619"; 1759 | } 1760 | 1761 | .icon.dashboard:before { 1762 | content: "\e61a"; 1763 | } 1764 | 1765 | .icon.data:before { 1766 | content: "\e61b"; 1767 | } 1768 | 1769 | .icon.depart:before { 1770 | content: "\e61c"; 1771 | } 1772 | 1773 | .icon.document:before { 1774 | content: "\e61d"; 1775 | } 1776 | 1777 | .icon.down:before { 1778 | content: "\e61e"; 1779 | } 1780 | 1781 | .icon.en:before { 1782 | content: "\e61f"; 1783 | } 1784 | 1785 | .icon.enter-roundabout:before { 1786 | content: "\e620"; 1787 | } 1788 | 1789 | .icon.eye:before { 1790 | content: "\e621"; 1791 | } 1792 | 1793 | .icon.facebook:before { 1794 | content: "\e622"; 1795 | } 1796 | 1797 | .icon.floppy:before { 1798 | content: "\e623"; 1799 | } 1800 | 1801 | .icon.folder:before { 1802 | content: "\e624"; 1803 | } 1804 | 1805 | .icon.font:before { 1806 | content: "\e625"; 1807 | } 1808 | 1809 | .icon.forward:before { 1810 | content: "\e626"; 1811 | } 1812 | 1813 | .icon.foursquare:before { 1814 | content: "\e627"; 1815 | } 1816 | 1817 | .icon.fullscreen:before { 1818 | content: "\e628"; 1819 | } 1820 | 1821 | .icon.github:before { 1822 | content: "\e629"; 1823 | } 1824 | 1825 | .icon.gl:before { 1826 | content: "\e62a"; 1827 | } 1828 | 1829 | .icon.globe:before { 1830 | content: "\e62b"; 1831 | } 1832 | 1833 | .icon.graph:before { 1834 | content: "\e62c"; 1835 | } 1836 | 1837 | .icon.hand:before { 1838 | content: "\e62d"; 1839 | } 1840 | 1841 | .icon.harddrive:before { 1842 | content: "\e62e"; 1843 | } 1844 | 1845 | .icon.heart:before { 1846 | content: "\e62f"; 1847 | } 1848 | 1849 | .icon.help:before { 1850 | content: "\e630"; 1851 | } 1852 | 1853 | .icon.home:before { 1854 | content: "\e631"; 1855 | } 1856 | 1857 | .icon.info:before { 1858 | content: "\e633"; 1859 | } 1860 | 1861 | .icon.inspect:before { 1862 | content: "\e634"; 1863 | } 1864 | 1865 | .icon.join-bevel:before { 1866 | content: "\e635"; 1867 | } 1868 | 1869 | .icon.join-miter:before { 1870 | content: "\e636"; 1871 | } 1872 | 1873 | .icon.join-round:before { 1874 | content: "\e637"; 1875 | } 1876 | 1877 | .icon.l-r-arrow:before { 1878 | content: "\e638"; 1879 | } 1880 | 1881 | .icon.land:before { 1882 | content: "\e639"; 1883 | } 1884 | 1885 | .icon.landuse:before { 1886 | content: "\e63a"; 1887 | } 1888 | 1889 | .icon.layers:before { 1890 | content: "\e63b"; 1891 | } 1892 | 1893 | .icon.leaflet:before { 1894 | content: "\e63c"; 1895 | } 1896 | 1897 | .icon.levels:before { 1898 | content: "\e63d"; 1899 | } 1900 | 1901 | .icon.lifebuoy:before { 1902 | content: "\e63e"; 1903 | } 1904 | 1905 | .icon.link:before { 1906 | content: "\e63f"; 1907 | } 1908 | 1909 | .icon.linkedin:before { 1910 | content: "\e640"; 1911 | } 1912 | 1913 | .icon.lock:before { 1914 | content: "\e641"; 1915 | } 1916 | 1917 | .icon.logout:before { 1918 | content: "\e642"; 1919 | } 1920 | 1921 | .icon.mail:before { 1922 | content: "\e643"; 1923 | } 1924 | 1925 | .icon.mapbox:before { 1926 | content: "\e644"; 1927 | } 1928 | 1929 | .icon.marker:before { 1930 | content: "\e645"; 1931 | } 1932 | 1933 | .icon.menu:before { 1934 | content: "\e646"; 1935 | } 1936 | 1937 | .icon.minus:before { 1938 | content: "\e647"; 1939 | } 1940 | 1941 | .icon.mobile:before { 1942 | content: "\e648"; 1943 | } 1944 | 1945 | .icon.mt:before { 1946 | content: "\e649"; 1947 | } 1948 | 1949 | .icon.next:before { 1950 | content: "\e64a"; 1951 | } 1952 | 1953 | .icon.noeye:before { 1954 | content: "\e64b"; 1955 | } 1956 | 1957 | .icon.opacity:before { 1958 | content: "\e64c"; 1959 | } 1960 | 1961 | .icon.package:before { 1962 | content: "\e64d"; 1963 | } 1964 | 1965 | .icon.paint:before { 1966 | content: "\e64e"; 1967 | } 1968 | 1969 | .icon.pencil:before { 1970 | content: "\e64f"; 1971 | } 1972 | 1973 | .icon.picture:before { 1974 | content: "\e650"; 1975 | } 1976 | 1977 | .icon.plus:before { 1978 | content: "\e651"; 1979 | } 1980 | 1981 | .icon.point-line:before { 1982 | content: "\e652"; 1983 | } 1984 | 1985 | .icon.polygon:before { 1986 | content: "\e653"; 1987 | } 1988 | 1989 | .icon.polyline:before { 1990 | content: "\e654"; 1991 | } 1992 | 1993 | .icon.prev:before { 1994 | content: "\e655"; 1995 | } 1996 | 1997 | .icon.printer:before { 1998 | content: "\e656"; 1999 | } 2000 | 2001 | .icon.raster:before { 2002 | content: "\e657"; 2003 | } 2004 | 2005 | .icon.redo:before { 2006 | content: "\e658"; 2007 | } 2008 | 2009 | .icon.refresh:before { 2010 | content: "\e659"; 2011 | } 2012 | 2013 | .icon.return:before { 2014 | content: "\e65a"; 2015 | } 2016 | 2017 | .icon.rss:before { 2018 | content: "\e65b"; 2019 | } 2020 | 2021 | .icon.satellite:before { 2022 | content: "\e65c"; 2023 | } 2024 | 2025 | .icon.search:before { 2026 | content: "\e65d"; 2027 | } 2028 | 2029 | .icon.share:before { 2030 | content: "\e65e"; 2031 | } 2032 | 2033 | .icon.sharp-left:before { 2034 | content: "\e65f"; 2035 | } 2036 | 2037 | .icon.sharp-right:before { 2038 | content: "\e660"; 2039 | } 2040 | 2041 | .icon.sprocket:before { 2042 | content: "\e661"; 2043 | } 2044 | 2045 | .icon.stackoverflow:before { 2046 | content: "\e662"; 2047 | } 2048 | 2049 | .icon.star:before { 2050 | content: "\e663"; 2051 | } 2052 | 2053 | .icon.street:before { 2054 | content: "\e664"; 2055 | } 2056 | 2057 | .icon.sun:before { 2058 | content: "\e665"; 2059 | } 2060 | 2061 | .icon.text-justify-center:before { 2062 | content: "\e669"; 2063 | } 2064 | 2065 | .icon.text-justify-left:before { 2066 | content: "\e66a"; 2067 | } 2068 | 2069 | .icon.text-justify-right:before { 2070 | content: "\e66b"; 2071 | } 2072 | 2073 | .icon.tilemill:before { 2074 | content: "\e66e"; 2075 | } 2076 | 2077 | .icon.time:before { 2078 | content: "\e66f"; 2079 | } 2080 | 2081 | .icon.tooltip:before { 2082 | content: "\e670"; 2083 | } 2084 | 2085 | .icon.transform-lowercase:before { 2086 | content: "\e671"; 2087 | } 2088 | 2089 | .icon.transform-uppercase:before { 2090 | content: "\e672"; 2091 | } 2092 | 2093 | .icon.trash:before { 2094 | content: "\e673"; 2095 | } 2096 | 2097 | .icon.turn-left:before { 2098 | content: "\e674"; 2099 | } 2100 | 2101 | .icon.turn-right:before { 2102 | content: "\e675"; 2103 | } 2104 | 2105 | .icon.twitter:before { 2106 | content: "\e676"; 2107 | } 2108 | 2109 | .icon.tx:before { 2110 | content: "\e677"; 2111 | } 2112 | 2113 | .icon.u-d-arrow:before { 2114 | content: "\e678"; 2115 | } 2116 | 2117 | .icon.u-turn:before { 2118 | content: "\e679"; 2119 | } 2120 | 2121 | .icon.undo:before { 2122 | content: "\e67a"; 2123 | } 2124 | 2125 | .icon.up:before { 2126 | content: "\e67b"; 2127 | } 2128 | 2129 | .icon.video:before { 2130 | content: "\e67c"; 2131 | } 2132 | 2133 | .icon.water:before { 2134 | content: "\e67d"; 2135 | } 2136 | 2137 | .icon.text-size:before { 2138 | content: "\e67e"; 2139 | } 2140 | 2141 | .icon.text-ignore-placement:before { 2142 | content: "\e68e"; 2143 | } 2144 | 2145 | .icon.line-miter-limit:before { 2146 | content: "\e68c"; 2147 | } 2148 | 2149 | .icon.line-round-limit:before { 2150 | content: "\e68d"; 2151 | } 2152 | 2153 | .icon.antialias:before { 2154 | content: "\e685"; 2155 | } 2156 | 2157 | .icon.max-text-angle:before { 2158 | content: "\e681"; 2159 | } 2160 | 2161 | .icon.text-line-height:before { 2162 | content: "\e67f"; 2163 | } 2164 | 2165 | .icon.cross-edge:before { 2166 | content: "\e687"; 2167 | } 2168 | 2169 | .icon.dasharray:before { 2170 | content: "\e682"; 2171 | } 2172 | 2173 | .icon.text-rotate:before { 2174 | content: "\e683"; 2175 | } 2176 | 2177 | .icon.rotate:before { 2178 | content: "\e684"; 2179 | } 2180 | 2181 | .icon.text-max-width:before { 2182 | content: "\e688"; 2183 | } 2184 | 2185 | .icon.gap-width:before { 2186 | content: "\e680"; 2187 | } 2188 | 2189 | .icon.text-halo-width:before { 2190 | content: "\e68b"; 2191 | } 2192 | 2193 | .icon.text-padding:before { 2194 | content: "\e686"; 2195 | } 2196 | 2197 | .icon.text-allow-overlap:before { 2198 | content: "\e689"; 2199 | } 2200 | 2201 | .icon.text-letter-spacing:before { 2202 | content: "\e68a"; 2203 | } 2204 | 2205 | .icon.duplicate:before { 2206 | content: "\e691"; 2207 | } 2208 | 2209 | .icon.text-align-center-right:before { 2210 | content: "\e692"; 2211 | } 2212 | 2213 | .icon.text-align-center-left:before { 2214 | content: "\e693"; 2215 | } 2216 | 2217 | .icon.point:before { 2218 | content: "\e694"; 2219 | } 2220 | .icon.osm:before { 2221 | content: "\e696"; 2222 | } 2223 | 2224 | .icon.history:before { 2225 | content: "\e695"; 2226 | } 2227 | 2228 | .icon.palette:before { 2229 | content: "\e697"; 2230 | } 2231 | 2232 | /* after */ 2233 | 2234 | .rcon.text-align-top-center:after { 2235 | content: "\e666"; 2236 | } 2237 | 2238 | .rcon.text-align-top-left:after { 2239 | content: "\e667"; 2240 | } 2241 | 2242 | .rcon.text-align-top-right:after { 2243 | content: "\e668"; 2244 | } 2245 | 2246 | .rcon.text-align-bottom-center:after { 2247 | content: "\e66c"; 2248 | } 2249 | 2250 | .rcon.text-align-bottom-left:after { 2251 | content: "\e66d"; 2252 | } 2253 | 2254 | .rcon.text-align-bottom-right:after { 2255 | content: "\e68f"; 2256 | } 2257 | 2258 | .rcon.text-align-center-center:after { 2259 | content: "\e690"; 2260 | } 2261 | 2262 | .rcon.account:after { 2263 | content: "\e600"; 2264 | } 2265 | 2266 | .rcon.adjust-stroke:after { 2267 | content: "\e601"; 2268 | } 2269 | 2270 | .rcon.alert:after { 2271 | content: "\e602"; 2272 | } 2273 | 2274 | .rcon.android:after { 2275 | content: "\e603"; 2276 | } 2277 | 2278 | .rcon.apple:after { 2279 | content: "\e604"; 2280 | } 2281 | 2282 | .rcon.arrive:after { 2283 | content: "\e605"; 2284 | } 2285 | 2286 | .rcon.arrowright:after { 2287 | content: "\e606"; 2288 | } 2289 | 2290 | .rcon.bear-left:after { 2291 | content: "\e607"; 2292 | } 2293 | 2294 | .rcon.bear-right:after { 2295 | content: "\e608"; 2296 | } 2297 | 2298 | .rcon.bolt:after { 2299 | content: "\e609"; 2300 | } 2301 | 2302 | .rcon.book:after { 2303 | content: "\e60a"; 2304 | } 2305 | 2306 | .rcon.bookmark:after { 2307 | content: "\e60b"; 2308 | } 2309 | 2310 | .rcon.brackets:after { 2311 | content: "\e60c"; 2312 | } 2313 | 2314 | .rcon.building:after { 2315 | content: "\e60d"; 2316 | } 2317 | 2318 | .rcon.cap-butt:after { 2319 | content: "\e60e"; 2320 | } 2321 | 2322 | .rcon.cap-round:after { 2323 | content: "\e60f"; 2324 | } 2325 | 2326 | .rcon.cap-square:after { 2327 | content: "\e610"; 2328 | } 2329 | 2330 | .rcon.cart:after { 2331 | content: "\e611"; 2332 | } 2333 | 2334 | .rcon.check:after { 2335 | content: "\e612"; 2336 | } 2337 | 2338 | .rcon.clipboard:after { 2339 | content: "\e613"; 2340 | } 2341 | 2342 | .rcon.x:after, 2343 | .rcon.close:after { 2344 | content: "\e614"; 2345 | } 2346 | 2347 | .rcon.cloud:after { 2348 | content: "\e615"; 2349 | } 2350 | 2351 | .rcon.compass:after { 2352 | content: "\e616"; 2353 | } 2354 | 2355 | .rcon.contact:after { 2356 | content: "\e617"; 2357 | } 2358 | 2359 | .rcon.creditcard:after { 2360 | content: "\e618"; 2361 | } 2362 | 2363 | .rcon.crosshair:after { 2364 | content: "\e619"; 2365 | } 2366 | 2367 | .rcon.dashboard:after { 2368 | content: "\e61a"; 2369 | } 2370 | 2371 | .rcon.data:after { 2372 | content: "\e61b"; 2373 | } 2374 | 2375 | .rcon.depart:after { 2376 | content: "\e61c"; 2377 | } 2378 | 2379 | .rcon.document:after { 2380 | content: "\e61d"; 2381 | } 2382 | 2383 | .rcon.down:after { 2384 | content: "\e61e"; 2385 | } 2386 | 2387 | .rcon.en:after { 2388 | content: "\e61f"; 2389 | } 2390 | 2391 | .rcon.enter-roundabout:after { 2392 | content: "\e620"; 2393 | } 2394 | 2395 | .rcon.eye:after { 2396 | content: "\e621"; 2397 | } 2398 | 2399 | .rcon.facebook:after { 2400 | content: "\e622"; 2401 | } 2402 | 2403 | .rcon.floppy:after { 2404 | content: "\e623"; 2405 | } 2406 | 2407 | .rcon.folder:after { 2408 | content: "\e624"; 2409 | } 2410 | 2411 | .rcon.font:after { 2412 | content: "\e625"; 2413 | } 2414 | 2415 | .rcon.forward:after { 2416 | content: "\e626"; 2417 | } 2418 | 2419 | .rcon.foursquare:after { 2420 | content: "\e627"; 2421 | } 2422 | 2423 | .rcon.fullscreen:after { 2424 | content: "\e628"; 2425 | } 2426 | 2427 | .rcon.github:after { 2428 | content: "\e629"; 2429 | } 2430 | 2431 | .rcon.gl:after { 2432 | content: "\e62a"; 2433 | } 2434 | 2435 | .rcon.globe:after { 2436 | content: "\e62b"; 2437 | } 2438 | 2439 | .rcon.graph:after { 2440 | content: "\e62c"; 2441 | } 2442 | 2443 | .rcon.hand:after { 2444 | content: "\e62d"; 2445 | } 2446 | 2447 | .rcon.harddrive:after { 2448 | content: "\e62e"; 2449 | } 2450 | 2451 | .rcon.heart:after { 2452 | content: "\e62f"; 2453 | } 2454 | 2455 | .rcon.help:after { 2456 | content: "\e630"; 2457 | } 2458 | 2459 | .rcon.home:after { 2460 | content: "\e631"; 2461 | } 2462 | 2463 | .rcon.info:after { 2464 | content: "\e633"; 2465 | } 2466 | 2467 | .rcon.inspect:after { 2468 | content: "\e634"; 2469 | } 2470 | 2471 | .rcon.join-bevel:after { 2472 | content: "\e635"; 2473 | } 2474 | 2475 | .rcon.join-miter:after { 2476 | content: "\e636"; 2477 | } 2478 | 2479 | .rcon.join-round:after { 2480 | content: "\e637"; 2481 | } 2482 | 2483 | .rcon.l-r-arrow:after { 2484 | content: "\e638"; 2485 | } 2486 | 2487 | .rcon.land:after { 2488 | content: "\e639"; 2489 | } 2490 | 2491 | .rcon.landuse:after { 2492 | content: "\e63a"; 2493 | } 2494 | 2495 | .rcon.layers:after { 2496 | content: "\e63b"; 2497 | } 2498 | 2499 | .rcon.leaflet:after { 2500 | content: "\e63c"; 2501 | } 2502 | 2503 | .rcon.levels:after { 2504 | content: "\e63d"; 2505 | } 2506 | 2507 | .rcon.lifebuoy:after { 2508 | content: "\e63e"; 2509 | } 2510 | 2511 | .rcon.link:after { 2512 | content: "\e63f"; 2513 | } 2514 | 2515 | .rcon.linkedin:after { 2516 | content: "\e640"; 2517 | } 2518 | 2519 | .rcon.lock:after { 2520 | content: "\e641"; 2521 | } 2522 | 2523 | .rcon.logout:after { 2524 | content: "\e642"; 2525 | } 2526 | 2527 | .rcon.mail:after { 2528 | content: "\e643"; 2529 | } 2530 | 2531 | .rcon.mapbox:after { 2532 | content: "\e644"; 2533 | } 2534 | 2535 | .rcon.marker:after { 2536 | content: "\e645"; 2537 | } 2538 | 2539 | .rcon.menu:after { 2540 | content: "\e646"; 2541 | } 2542 | 2543 | .rcon.minus:after { 2544 | content: "\e647"; 2545 | } 2546 | 2547 | .rcon.mobile:after { 2548 | content: "\e648"; 2549 | } 2550 | 2551 | .rcon.mt:after { 2552 | content: "\e649"; 2553 | } 2554 | 2555 | .rcon.next:after { 2556 | content: "\e64a"; 2557 | } 2558 | 2559 | .rcon.noeye:after { 2560 | content: "\e64b"; 2561 | } 2562 | 2563 | .rcon.opacity:after { 2564 | content: "\e64c"; 2565 | } 2566 | 2567 | .rcon.package:after { 2568 | content: "\e64d"; 2569 | } 2570 | 2571 | .rcon.paint:after { 2572 | content: "\e64e"; 2573 | } 2574 | 2575 | .rcon.pencil:after { 2576 | content: "\e64f"; 2577 | } 2578 | 2579 | .rcon.picture:after { 2580 | content: "\e650"; 2581 | } 2582 | 2583 | .rcon.plus:after { 2584 | content: "\e651"; 2585 | } 2586 | 2587 | .rcon.point-line:after { 2588 | content: "\e652"; 2589 | } 2590 | 2591 | .rcon.polygon:after { 2592 | content: "\e653"; 2593 | } 2594 | 2595 | .rcon.polyline:after { 2596 | content: "\e654"; 2597 | } 2598 | 2599 | .rcon.prev:after { 2600 | content: "\e655"; 2601 | } 2602 | 2603 | .rcon.printer:after { 2604 | content: "\e656"; 2605 | } 2606 | 2607 | .rcon.raster:after { 2608 | content: "\e657"; 2609 | } 2610 | 2611 | .rcon.redo:after { 2612 | content: "\e658"; 2613 | } 2614 | 2615 | .rcon.refresh:after { 2616 | content: "\e659"; 2617 | } 2618 | 2619 | .rcon.return:after { 2620 | content: "\e65a"; 2621 | } 2622 | 2623 | .rcon.rss:after { 2624 | content: "\e65b"; 2625 | } 2626 | 2627 | .rcon.satellite:after { 2628 | content: "\e65c"; 2629 | } 2630 | 2631 | .rcon.search:after { 2632 | content: "\e65d"; 2633 | } 2634 | 2635 | .rcon.share:after { 2636 | content: "\e65e"; 2637 | } 2638 | 2639 | .rcon.sharp-left:after { 2640 | content: "\e65f"; 2641 | } 2642 | 2643 | .rcon.sharp-right:after { 2644 | content: "\e660"; 2645 | } 2646 | 2647 | .rcon.sprocket:after { 2648 | content: "\e661"; 2649 | } 2650 | 2651 | .rcon.stackoverflow:after { 2652 | content: "\e662"; 2653 | } 2654 | 2655 | .rcon.star:after { 2656 | content: "\e663"; 2657 | } 2658 | 2659 | .rcon.street:after { 2660 | content: "\e664"; 2661 | } 2662 | 2663 | .rcon.sun:after { 2664 | content: "\e665"; 2665 | } 2666 | 2667 | .rcon.text-justify-center:after { 2668 | content: "\e669"; 2669 | } 2670 | 2671 | .rcon.text-justify-left:after { 2672 | content: "\e66a"; 2673 | } 2674 | 2675 | .rcon.text-justify-right:after { 2676 | content: "\e66b"; 2677 | } 2678 | 2679 | .rcon.tilemill:after { 2680 | content: "\e66e"; 2681 | } 2682 | 2683 | .rcon.time:after { 2684 | content: "\e66f"; 2685 | } 2686 | 2687 | .rcon.tooltip:after { 2688 | content: "\e670"; 2689 | } 2690 | 2691 | .rcon.transform-lowercase:after { 2692 | content: "\e671"; 2693 | } 2694 | 2695 | .rcon.transform-uppercase:after { 2696 | content: "\e672"; 2697 | } 2698 | 2699 | .rcon.trash:after { 2700 | content: "\e673"; 2701 | } 2702 | 2703 | .rcon.turn-left:after { 2704 | content: "\e674"; 2705 | } 2706 | 2707 | .rcon.turn-right:after { 2708 | content: "\e675"; 2709 | } 2710 | 2711 | .rcon.twitter:after { 2712 | content: "\e676"; 2713 | } 2714 | 2715 | .rcon.tx:after { 2716 | content: "\e677"; 2717 | } 2718 | 2719 | .rcon.u-d-arrow:after { 2720 | content: "\e678"; 2721 | } 2722 | 2723 | .rcon.u-turn:after { 2724 | content: "\e679"; 2725 | } 2726 | 2727 | .rcon.undo:after { 2728 | content: "\e67a"; 2729 | } 2730 | 2731 | .rcon.up:after { 2732 | content: "\e67b"; 2733 | } 2734 | 2735 | .rcon.video:after { 2736 | content: "\e67c"; 2737 | } 2738 | 2739 | .rcon.water:after { 2740 | content: "\e67d"; 2741 | } 2742 | 2743 | .rcon.text-size:after { 2744 | content: "\e67e"; 2745 | } 2746 | 2747 | .rcon.text-ignore-placement:after { 2748 | content: "\e68e"; 2749 | } 2750 | 2751 | .rcon.line-miter-limit:after { 2752 | content: "\e68c"; 2753 | } 2754 | 2755 | .rcon.line-round-limit:after { 2756 | content: "\e68d"; 2757 | } 2758 | 2759 | .rcon.antialias:after { 2760 | content: "\e685"; 2761 | } 2762 | 2763 | .rcon.max-text-angle:after { 2764 | content: "\e681"; 2765 | } 2766 | 2767 | .rcon.text-line-height:after { 2768 | content: "\e67f"; 2769 | } 2770 | 2771 | .rcon.cross-edge:after { 2772 | content: "\e687"; 2773 | } 2774 | 2775 | .rcon.dasharray:after { 2776 | content: "\e682"; 2777 | } 2778 | 2779 | .rcon.text-rotate:after { 2780 | content: "\e683"; 2781 | } 2782 | 2783 | .rcon.rotate:after { 2784 | content: "\e684"; 2785 | } 2786 | 2787 | .rcon.text-max-width:after { 2788 | content: "\e688"; 2789 | } 2790 | 2791 | .rcon.gap-width:after { 2792 | content: "\e680"; 2793 | } 2794 | 2795 | .rcon.text-halo-width:after { 2796 | content: "\e68b"; 2797 | } 2798 | 2799 | .rcon.text-padding:after { 2800 | content: "\e686"; 2801 | } 2802 | 2803 | .rcon.text-allow-overlap:after { 2804 | content: "\e689"; 2805 | } 2806 | 2807 | .rcon.text-letter-spacing:after { 2808 | content: "\e68a"; 2809 | } 2810 | 2811 | .rcon.duplicate:after { 2812 | content: "\e691"; 2813 | } 2814 | 2815 | .rcon.text-align-center-right:after { 2816 | content: "\e692"; 2817 | } 2818 | 2819 | .rcon.text-align-center-left:after { 2820 | content: "\e693"; 2821 | } 2822 | 2823 | .rcon.point:after { 2824 | content: "\e694"; 2825 | } 2826 | .rcon.osm:after { 2827 | content: "\e696"; 2828 | } 2829 | 2830 | .rcon.history:after { 2831 | content: "\e695"; 2832 | } 2833 | 2834 | .rcon.palette:after { 2835 | content: "\e697"; 2836 | } 2837 | 2838 | /* Multicolored icons */ 2839 | .icon.checkmark:before { 2840 | background:transparent url(base@2x.png) 0px 0px no-repeat; 2841 | -webkit-background-size:100px 350px; 2842 | background-size:100px 350px; 2843 | } 2844 | 2845 | /* Credit card icons */ 2846 | .credit-card { 2847 | background:url(credit-cards@2x.png) 0 0 no-repeat; 2848 | height:30px; 2849 | width:45px; 2850 | display:inline-block; 2851 | vertical-align:top; 2852 | -webkit-background-size:320px 70px; 2853 | background-size:320px 70px; 2854 | } 2855 | .credit-card.visa { background-position:0 0; } 2856 | .credit-card.mastercard { background-position:-55px 0; } 2857 | .credit-card.american-express { background-position:-110px 0; } 2858 | .credit-card.jcb { background-position:-165px 0; } 2859 | .credit-card.discover { background-position:-220px 0; } 2860 | .credit-card.diners-club { background-position:-275px 0; } 2861 | 2862 | .credit-card.disabled.visa { background-position:0 -40px; } 2863 | .credit-card.disabled.mastercard { background-position:-55px -40px; } 2864 | .credit-card.disabled.american-express { background-position:-110px -40px; } 2865 | .credit-card.disabled.jcb { background-position:-165px -40px; } 2866 | .credit-card.disabled.discover { background-position:-220px -40px; } 2867 | .credit-card.disabled.diners-club { background-position:-275px -40px; } 2868 | 2869 | /* Components 2870 | ------------------------------------------------------- */ 2871 | .box { 2872 | margin-bottom:20px; 2873 | border:1px solid rgba(0,0,0,0.10); 2874 | } 2875 | .box:last-child { margin-bottom: 0;} 2876 | .box figure, 2877 | .box .box-heading { 2878 | border-bottom:1px solid rgba(0,0,0,0.1); 2879 | } 2880 | .box figure:last-child { 2881 | border-bottom:none; 2882 | } 2883 | 2884 | /* Modals */ 2885 | .modal-content { 2886 | background:rgba(0,0,0,0.50); 2887 | position:fixed; 2888 | overflow: auto; 2889 | top:0; 2890 | left:0; 2891 | right:0; 2892 | opacity:0; 2893 | z-index:99999; 2894 | } 2895 | .modal-content.active { 2896 | bottom:0; 2897 | opacity:1; 2898 | } 2899 | .modal-popup { 2900 | opacity:0; 2901 | position:absolute; 2902 | overflow-y:auto; 2903 | height:100%; 2904 | left:0; 2905 | right:0; 2906 | } 2907 | .modal-content .modal-body { 2908 | border-radius: 3px; 2909 | overflow: hidden; 2910 | margin-top:40px; 2911 | margin-left:auto; 2912 | margin-right:auto; 2913 | float:none; 2914 | } 2915 | .modal-auth .sliding { 2916 | height:100%; 2917 | overflow-y:auto; 2918 | } 2919 | .modal-auth .sliding, 2920 | .modal-auth .sliding > * { width:100%; } 2921 | 2922 | /* Ensures layers modals stack correctly. */ 2923 | .modal-popup { z-index: 1; } 2924 | 2925 | /* Keeps sign in screen from scrolling based on sign up modal's height. */ 2926 | .modal-auth .sliding .active2 { overflow-y:hidden; } 2927 | 2928 | /* Hide older modals when younger modals are in dom. */ 2929 | .modal-popup:last-child { opacity:1; } 2930 | 2931 | /* Notifications */ 2932 | .note { 2933 | background:#f0f8fc; 2934 | padding:10px; 2935 | } 2936 | .note.error { background:#ee8a65; } 2937 | .note.warning { background:#f1f075; } 2938 | 2939 | .prose .note, 2940 | .note.prose { 2941 | margin-bottom:20px; 2942 | } 2943 | 2944 | .prose .note:last-child, 2945 | .note.prose:last-child { 2946 | margin-bottom:0; 2947 | } 2948 | 2949 | .note pre { background:#fff; } 2950 | 2951 | /* Columns 2952 | ------------------------------------------------------- */ 2953 | .limiter { 2954 | width:83.3333%; 2955 | max-width:1000px; 2956 | margin-left:auto; 2957 | margin-right:auto; 2958 | } 2959 | 2960 | .col0 { float:left; width:04.1666%; max-width:50px; } 2961 | .col1 { float:left; width:08.3333%; max-width:100px; } 2962 | .col2 { float:left; width:16.6666%; max-width:200px; } 2963 | .col3 { float:left; width:25.0000%; max-width:300px; } 2964 | .col4 { float:left; width:33.3333%; max-width:400px; } 2965 | .col5 { float:left; width:41.6666%; max-width:500px; } 2966 | .col6 { float:left; width:50.0000%; max-width:600px; } 2967 | .col7 { float:left; width:58.3333%; max-width:700px; } 2968 | .col8 { float:left; width:66.6666%; max-width:800px; } 2969 | .col9 { float:left; width:75.0000%; max-width:900px; } 2970 | .col10 { float:left; width:83.3333%; max-width:1000px; } 2971 | .col11 { float:left; width:91.6666%; max-width:1100px; } 2972 | .col12 { width:100%; display:block; } 2973 | 2974 | .fifths > * { 2975 | float: left; 2976 | width: 20%; 2977 | } 2978 | 2979 | .unlimiter .col0, 2980 | .unlimiter .col1, 2981 | .unlimiter .col2, 2982 | .unlimiter .col3, 2983 | .unlimiter .col4, 2984 | .unlimiter .col5, 2985 | .unlimiter .col6, 2986 | .unlimiter .col7, 2987 | .unlimiter .col8, 2988 | .unlimiter .col9, 2989 | .unlimiter .col10, 2990 | .unlimiter .col11 { 2991 | max-width: none; 2992 | } 2993 | 2994 | .margin0 { margin-left:04.1666%; } 2995 | .margin1 { margin-left:08.3333%; } 2996 | .margin2 { margin-left:16.6666%; } 2997 | .margin3 { margin-left:25.0000%; } 2998 | .margin4 { margin-left:33.3333%; } 2999 | .margin5 { margin-left:41.6666%; } 3000 | .margin6 { margin-left:50.0000%; } 3001 | .margin7 { margin-left:58.3333%; } 3002 | .margin8 { margin-left:66.6666%; } 3003 | .margin9 { margin-left:75.0000%; } 3004 | .margin10 { margin-left:83.3333%; } 3005 | .margin11 { margin-left:91.6666%; } 3006 | .margin12 { margin-left:100.0000%; } 3007 | 3008 | /* reverse margins on right-floated elements */ 3009 | .margin0r { margin-right:04.1666%; } 3010 | .margin1r { margin-right:08.3333%; } 3011 | .margin2r { margin-right:16.6666%; } 3012 | .margin3r { margin-right:25.0000%; } 3013 | .margin4r { margin-right:33.3333%; } 3014 | .margin5r { margin-right:41.6666%; } 3015 | .margin6r { margin-right:50.0000%; } 3016 | .margin7r { margin-right:58.3333%; } 3017 | .margin8r { margin-right:66.6666%; } 3018 | .margin9r { margin-right:75.0000%; } 3019 | .margin10r { margin-right:83.3333%; } 3020 | .margin11r { margin-right:91.6666%; } 3021 | .margin12r { margin-right:100.0000%; } 3022 | 3023 | .row0 { height: 0px;} 3024 | .row1 { height: 40px;} 3025 | .row2 { height: 80px;} 3026 | .row3 { height: 120px;} 3027 | .row4 { height: 160px;} 3028 | .row5 { height: 200px;} 3029 | .row6 { height: 240px;} 3030 | .row7 { height: 280px;} 3031 | .row8 { height: 320px;} 3032 | .row9 { height: 360px;} 3033 | .row10 { height: 400px;} 3034 | .row11 { height: 440px;} 3035 | .row12 { height: 480px;} 3036 | .row13 { height: 520px;} 3037 | .row14 { height: 560px;} 3038 | .row15 { height: 600px;} 3039 | .row16 { height: 640px;} 3040 | 3041 | /* Padding 3042 | ------------------------------------------------------- */ 3043 | .pad0 { padding:5px; } 3044 | .pad0y { padding-top:5px; padding-bottom:5px; } 3045 | .pad0x { padding-right:5px; padding-left:5px; } 3046 | 3047 | .pad1 { padding:10px; } 3048 | .pad2 { padding:20px; } 3049 | .pad4 { padding:40px; } 3050 | 3051 | .pad1x { padding-left: 10px; padding-right: 10px;} 3052 | .pad2x { padding-left: 20px; padding-right: 20px;} 3053 | .pad4x { padding-left: 40px; padding-right: 40px;} 3054 | 3055 | .pad1y { padding-top: 10px; padding-bottom: 10px;} 3056 | .pad2y { padding-top: 20px; padding-bottom: 20px;} 3057 | .pad4y { padding-top: 40px; padding-bottom: 40px;} 3058 | 3059 | .pad8 { padding: 80px; } 3060 | .pad8y { padding-top: 80px; padding-bottom: 80px;} 3061 | .pad8x { padding-left: 80px; padding-right: 80px;} 3062 | 3063 | /* Keylines 3064 | ------------------------------------------------------- */ 3065 | .keyline-all { border:1px solid rgba(0,0,0,0.10); } 3066 | .keyline-top { border-top:1px solid rgba(0,0,0,0.10); } 3067 | .keyline-right { border-right:1px solid rgba(0,0,0,0.10); } 3068 | .keyline-bottom { border-bottom:1px solid rgba(0,0,0,0.10); } 3069 | .keyline-left { border-left:1px solid rgba(0,0,0,0.10); } 3070 | 3071 | .dark .keyline-all { border:1px solid rgba(255,255,255,0.25); } 3072 | .dark .keyline-top { border-top:1px solid rgba(255,255,255,0.25); } 3073 | .dark .keyline-right { border-right:1px solid rgba(255,255,255,0.25); } 3074 | .dark .keyline-bottom { border-bottom:1px solid rgba(255,255,255,0.25); } 3075 | .dark .keyline-left { border-left:1px solid rgba(255,255,255,0.25); } 3076 | 3077 | /* Absolute containers 3078 | ------------------------------------------------------- */ 3079 | .pin-top, 3080 | .pin-right, 3081 | .pin-bottom, 3082 | .pin-left, 3083 | .pin-topleft, 3084 | .pin-topright, 3085 | .pin-bottomleft, 3086 | .pin-bottomright { 3087 | position:absolute; 3088 | } 3089 | .pin-bottom { right:0; bottom:0; left:0; } 3090 | .pin-top { top:0; right:0; left:0; } 3091 | .pin-left { top:0; bottom:0; left:0; } 3092 | .pin-right { top:0; right:0; bottom:0; } 3093 | .pin-bottomright { bottom:0; right:0; } 3094 | .pin-bottomleft { bottom:0; left:0; } 3095 | .pin-topright { top:0; right:0; } 3096 | .pin-topleft { top:0; left:0; } 3097 | 3098 | /* Fixed containers 3099 | ------------------------------------------------------- */ 3100 | .fixed-top, 3101 | .fixed-right, 3102 | .fixed-bottom, 3103 | .fixed-left, 3104 | .fixed-topleft, 3105 | .fixed-topright, 3106 | .fixed-bottomleft, 3107 | .fixed-bottomright { 3108 | position:fixed; 3109 | } 3110 | .fixed-bottom { right:0; bottom:0; left:0; } 3111 | .fixed-top { top:0; right:0; left:0; } 3112 | .fixed-left { top:0; bottom:0; left:0; } 3113 | .fixed-right { top:0; right:0; bottom:0; } 3114 | .fixed-bottomright { bottom:0; right:0; } 3115 | .fixed-bottomleft { bottom:0; left:0; } 3116 | .fixed-topright { top:0; right:0; } 3117 | .fixed-topleft { top:0; left:0; } 3118 | 3119 | 3120 | 3121 | /* Fills 3122 | -------------------------------------------------------- */ 3123 | .fill-dark { background-color:#404040; } 3124 | .fill-gray, 3125 | .fill-grey { background:#eee; } 3126 | .fill-grey-dark, 3127 | .fill-gray-dark { background:#404040; } 3128 | .fill-white { background:#fff; } 3129 | .fill-light { background:#f8f8f8; } 3130 | /* deprecated, use fill-cyan */ 3131 | .fill-blue-light { background:#3bb2d0; } 3132 | .fill-cyan { background:#3bb2d0; } 3133 | .fill-midnight { background:#142736; } 3134 | 3135 | .fill-blue { background:#3887be; } 3136 | .fill-denim { background:#3c4e5a; } 3137 | .fill-navy { background:#28353d; } 3138 | .fill-navy-dark { background:#222B30; } 3139 | .fill-purple { background:#8a8acb; } 3140 | .fill-green { background:#56b881; } 3141 | .fill-yellow { background:#f1f075; } 3142 | .fill-orange { background:#ee8a65; } 3143 | 3144 | .fill-darken0 { background:rgba(0,0,0,0.05); } 3145 | .fill-darken1 { background:rgba(0,0,0,0.25); } 3146 | .fill-darken2 { background:rgba(0,0,0,0.50); } 3147 | .fill-darken3 { background:rgba(0,0,0,0.75); } 3148 | 3149 | .fill-lighten0 { background:rgba(255,255,255,0.10); } 3150 | .fill-lighten1 { background:rgba(255,255,255,0.25); } 3151 | .fill-lighten2 { background:rgba(255,255,255,0.50); } 3152 | .fill-lighten3 { background:rgba(255,255,255,0.75); } 3153 | 3154 | .mb-logo { 3155 | background:#fff; 3156 | position:relative; 3157 | z-index:10; 3158 | } 3159 | 3160 | .mb-logo { 3161 | background:transparent url(base@2x.png) no-repeat 0 0; 3162 | display:inline-block; 3163 | vertical-align:top; 3164 | height:40px; 3165 | width:100px; 3166 | text-indent:-999em; 3167 | overflow:hidden; 3168 | -webkit-background-size:100px 350px; 3169 | background-size:100px 350px; 3170 | } 3171 | .dark .mb-logo, 3172 | .mb-logo.white { background-position:0px -60px; } 3173 | .mb-logo.quiet { background-position:0px -120px; } 3174 | .mb-logo.small { 3175 | width:65px; 3176 | height:20px; 3177 | background-position:0 -180px; 3178 | } 3179 | .mb-logo.small.white { background-position:0 -240px;} 3180 | .mb-logo.small.quiet { background-position:0 -300px;} 3181 | 3182 | /* Pygments Syntax Highlighting 3183 | ------------------------------------------------------- */ 3184 | pre .hll { background-color:#ffffcc } 3185 | 3186 | /* No Styling, Just Default: 3187 | 3188 | pre .nx, Normal Text 3189 | pre .ni Name.Entity 3190 | pre .nf Name.Entity 3191 | pre .no Name.Constant 3192 | */ 3193 | 3194 | /* Comments */ 3195 | pre .o, /* Operator */ 3196 | pre .c, 3197 | pre .c1, 3198 | pre .cp, 3199 | pre .cm { color:#999; font-style:italic; } 3200 | pre .err { color:#F00000; background-color:#F0A0A0 } /* Error */ 3201 | 3202 | pre .k { color:#404040; font-weight:bold; } /* Keyword */ 3203 | pre .css .k { font-weight:normal; } 3204 | 3205 | pre .cs { color:#404040; font-style:italic; } /* Comment.Special */ 3206 | pre .gd { color:#A00000; } /* Generic.Deleted */ 3207 | pre .ge { font-style:italic } /* Generic.Emph */ 3208 | pre .gs { font-weight:bold; } /* Generic.Strong */ 3209 | pre .gr { color:#FF0000; } /* Generic.Error */ 3210 | pre .gh { color:#000080; } /* Generic.Heading */ 3211 | pre .gi { color:#00A000; } /* Generic.Inserted */ 3212 | pre .go { color:#808080; } /* Generic.Output */ 3213 | pre .gp { color:#c65d09; } /* Generic.Prompt */ 3214 | pre .gu { color:#800080; } /* Generic.Subheading */ 3215 | pre .gt { color:#0040D0; } /* Generic.Traceback */ 3216 | pre .kc { color:#D24400; } /* Keyword.Constant */ 3217 | 3218 | /* Keyword.Declaration 3219 | * Keyword.Namespace 3220 | * Keyword.Reserved */ 3221 | pre .kd, 3222 | pre .kn, 3223 | pre .kr, 3224 | pre .nt { color:#0B5A91; } /* Name.Tag */ 3225 | 3226 | /* Literal.Number */ 3227 | pre .mh, 3228 | pre .mo, 3229 | pre .il, 3230 | pre .mi, 3231 | pre .kt, 3232 | pre .mf, 3233 | pre .nl, /* Name.Label */ 3234 | pre .na, /* Name.Attribute */ 3235 | pre .m { color:#0C9DC2; } /* Keyword.Type */ 3236 | pre .kp { color:#0080f0; } /* Keyword.Pseudo */ 3237 | 3238 | pre .nc { color:#DF6637; } /* Name.Class */ 3239 | pre .css .nc { color:#75A21C; } 3240 | 3241 | pre .nd { color:#505050; } /* Name.Decorator */ 3242 | pre .ne { color:#F00000; } /* Name.Exception */ 3243 | 3244 | pre .nn { color:#0e84b5; } /* Name.Namespace */ 3245 | 3246 | pre .nv { color:#003060; } /* Name.Variable */ 3247 | pre .ow { color:#404040; } /* Operator.Word */ 3248 | pre .w { color:#bbbbbb; } /* Text.Whitespace */ 3249 | pre .sc { color:#8080F0; } /* Literal.String.Char */ 3250 | pre .sd { color:#D04020; } /* Literal.String.Doc */ 3251 | 3252 | /* Name.Builtin / Name.Builtin.Pseudo */ 3253 | pre .bp, 3254 | pre .nb { color:#007020; } 3255 | 3256 | /* Literal.String */ 3257 | pre .s, 3258 | pre .sh, 3259 | pre .sb, 3260 | pre .s1, 3261 | pre .sr, 3262 | pre .se { color:#75A21C; } 3263 | 3264 | pre .si { background-color:#eee; } /* Literal.String.Interpol */ 3265 | pre .p { color:#444444; } /* Normal Text */ 3266 | pre .ss { color:#f0c080; } /* Literal.String.Symbol */ 3267 | pre .vc { color:#c0c0f0; } /* Name.Variable.Class */ 3268 | pre .vg { color:#f08040; } /* Name.Variable.Global */ 3269 | pre .vi { color:#a0a0f0; } /* Name.Variable.Instance */ 3270 | 3271 | /* CSS Animations/Transitions 3272 | -------------------------------------------------- */ 3273 | .animate { 3274 | -webkit-transition:all .125s; 3275 | -moz-transition:all .125s; 3276 | -ms-transition:all .125s; 3277 | transition:all .125s; 3278 | } 3279 | 3280 | .offcanvas-top { 3281 | -webkit-transform:translateY(-100%); 3282 | -moz-transform:translateY(-100%); 3283 | -ms-transform:translateY(-100%); 3284 | transform:translateY(-100%); 3285 | } 3286 | .offcanvas-right { 3287 | -webkit-transform:translateX(100%); 3288 | -moz-transform:translateX(100%); 3289 | -ms-transform:translateX(100%); 3290 | transform:translateX(100%); 3291 | } 3292 | .offcanvas-bottom { 3293 | -webkit-transform:translateY(100%); 3294 | -moz-transform:translateY(100%); 3295 | -ms-transform:translateY(100%); 3296 | transform:translateY(100%); 3297 | } 3298 | .offcanvas-left { 3299 | -webkit-transform:translateX(-100%); 3300 | -moz-transform:translateX(-100%); 3301 | -ms-transform:translateX(-100%); 3302 | transform:translateX(-100%); 3303 | } 3304 | 3305 | .offcanvas-top.active, 3306 | .offcanvas-bottom.active, 3307 | .offcanvas-top:target, 3308 | .offcanvas-bottom:target { 3309 | -webkit-transform:translateY(0); 3310 | -moz-transform:translateY(0); 3311 | -ms-transform:translateY(0); 3312 | transform:translateY(0); 3313 | } 3314 | 3315 | .offcanvas-left.active, 3316 | .offcanvas-right.active, 3317 | .offcanvas-left:target, 3318 | .offcanvas-right:target { 3319 | -webkit-transform:translateX(0); 3320 | -moz-transform:translateX(0); 3321 | -ms-transform:translateX(0); 3322 | transform:translateX(0); 3323 | } 3324 | 3325 | .button.animate { 3326 | -webkit-transition:all .1s, background-color 0s, border-color 0s; 3327 | -moz-transition:all .1s, background-color 0s, border-color 0s; 3328 | -ms-transition:all .1s, background-color 0s, border-color 0s; 3329 | transition:all .1s, background-color 0s, border-color 0s; 3330 | } 3331 | 3332 | /* Sliding panes */ 3333 | .sliding { position:relative; } 3334 | .sliding > * { position:absolute; } 3335 | .sliding.h > * { 3336 | -webkit-transform:translateX(-100%); 3337 | -moz-transform:translateX(-100%); 3338 | -ms-transform:translateX(-100%); 3339 | transform:translateX(-100%); 3340 | } 3341 | .sliding.v > * { 3342 | -webkit-transform:translateY(-100%); 3343 | -moz-transform:translateY(-100%); 3344 | -ms-transform:translateY(-100%); 3345 | transform:translateY(-100%); 3346 | } 3347 | .sliding.h.active1 > *:nth-child( 1), 3348 | .sliding.h.active2 > *:nth-child( 2), 3349 | .sliding.h.active3 > *:nth-child( 3), 3350 | .sliding.h.active4 > *:nth-child( 4), 3351 | .sliding.h.active5 > *:nth-child( 5), 3352 | .sliding.h.active6 > *:nth-child( 6), 3353 | .sliding.h.active7 > *:nth-child( 7), 3354 | .sliding.h.active8 > *:nth-child( 8), 3355 | .sliding.h.active9 > *:nth-child( 9) { 3356 | -webkit-transform:translateX(0%); 3357 | -moz-transform:translateX(0%); 3358 | -ms-transform:translateX(0%); 3359 | transform:translateX(0%); 3360 | } 3361 | .sliding.h.active1 > *:nth-child( n+2), 3362 | .sliding.h.active2 > *:nth-child( n+3), 3363 | .sliding.h.active3 > *:nth-child( n+4), 3364 | .sliding.h.active4 > *:nth-child( n+5), 3365 | .sliding.h.active5 > *:nth-child( n+6), 3366 | .sliding.h.active6 > *:nth-child( n+7), 3367 | .sliding.h.active7 > *:nth-child( n+8), 3368 | .sliding.h.active8 > *:nth-child( n+9), 3369 | .sliding.h.active9 > *:nth-child(n+10) { 3370 | -webkit-transform:translateX(100%); 3371 | -moz-transform:translateX(100%); 3372 | -ms-transform:translateX(100%); 3373 | transform:translateX(100%); 3374 | } 3375 | 3376 | .sliding.v.active1 > *:nth-child( 1), 3377 | .sliding.v.active2 > *:nth-child( 2), 3378 | .sliding.v.active3 > *:nth-child( 3), 3379 | .sliding.v.active4 > *:nth-child( 4), 3380 | .sliding.v.active5 > *:nth-child( 5), 3381 | .sliding.v.active6 > *:nth-child( 6), 3382 | .sliding.v.active7 > *:nth-child( 7), 3383 | .sliding.v.active8 > *:nth-child( 8), 3384 | .sliding.v.active9 > *:nth-child( 9), 3385 | .sliding.v.active10> *:nth-child( 10), 3386 | .sliding.v.active11> *:nth-child( 11), 3387 | .sliding.v.active12> *:nth-child( 12), 3388 | .sliding.v.active13> *:nth-child( 13), 3389 | .sliding.v.active14> *:nth-child( 14), 3390 | .sliding.v.active15> *:nth-child( 15), 3391 | .sliding.v.active16> *:nth-child( 16), 3392 | .sliding.v.active17> *:nth-child( 17), 3393 | .sliding.v.active18> *:nth-child( 18), 3394 | .sliding.v.active19> *:nth-child( 19), 3395 | .sliding.v.active20> *:nth-child( 20) { 3396 | -webkit-transform:translateY(0%); 3397 | -moz-transform:translateY(0%); 3398 | -ms-transform:translateY(0%); 3399 | transform:translateY(0%); 3400 | } 3401 | .sliding.v.active1 > *:nth-child( n+2), 3402 | .sliding.v.active2 > *:nth-child( n+3), 3403 | .sliding.v.active3 > *:nth-child( n+4), 3404 | .sliding.v.active4 > *:nth-child( n+5), 3405 | .sliding.v.active5 > *:nth-child( n+6), 3406 | .sliding.v.active6 > *:nth-child( n+7), 3407 | .sliding.v.active7 > *:nth-child( n+8), 3408 | .sliding.v.active8 > *:nth-child( n+9), 3409 | .sliding.v.active9 > *:nth-child(n+10), 3410 | .sliding.v.active10> *:nth-child(n+11), 3411 | .sliding.v.active11> *:nth-child(n+12), 3412 | .sliding.v.active12> *:nth-child(n+13), 3413 | .sliding.v.active13> *:nth-child(n+14), 3414 | .sliding.v.active14> *:nth-child(n+15), 3415 | .sliding.v.active15> *:nth-child(n+16), 3416 | .sliding.v.active16> *:nth-child(n+17), 3417 | .sliding.v.active17> *:nth-child(n+18), 3418 | .sliding.v.active18> *:nth-child(n+19), 3419 | .sliding.v.active19> *:nth-child(n+20), 3420 | .sliding.v.active20> *:nth-child(n+21) { 3421 | -webkit-transform:translateY(100%); 3422 | -moz-transform:translateY(100%); 3423 | -ms-transform:translateY(100%); 3424 | transform:translateY(100%); 3425 | } 3426 | 3427 | /* Markup free clearing 3428 | Details: http://www.positioniseverything.net/easyclearing.html 3429 | ------------------------------------------------------- */ 3430 | .clearfix { display:block; } 3431 | .clearfix:after { 3432 | content:''; 3433 | display:block; 3434 | height:0; 3435 | clear:both; 3436 | visibility:hidden; 3437 | } 3438 | 3439 | /* Additional Utility Classes 3440 | ------------------------------------------------------- */ 3441 | .fr { float:right; } 3442 | .fl { float:left; } 3443 | .unfloat { float:none; } 3444 | .dot { border-radius:50%; } 3445 | .quiet { color:#7f7f7f; color: rgba(0,0,0,.5); } 3446 | .dark .quiet { color: #7f7f7f; color: rgba(255,255,255,.5);} 3447 | .center { text-align:center; } 3448 | .contain { position:relative; } 3449 | .clip { overflow:hidden; } 3450 | .hidden.hidden { display:none; } 3451 | .text-left { text-align:left; } 3452 | .text-right { text-align:right; } 3453 | .space > * { margin-right:5px; } 3454 | .space-bottom0 { margin-bottom: 5px;} 3455 | .space-bottom1 { margin-bottom:10px; } 3456 | .space-bottom2, .space-bottom { margin-bottom:20px; } 3457 | .space-bottom4 { margin-bottom:40px; } 3458 | .space-bottom8 { margin-bottom: 80px;} 3459 | .space-top0 { margin-top: 5px; } 3460 | .space-top1 { margin-top: 10px; } 3461 | .space-top2 { margin-top: 20px; } 3462 | .space-top4 { margin-top: 40px;} 3463 | .space-top8 { margin-top: 80px;} 3464 | .hide-tablet, .hide-mobile { display:block; } 3465 | .show-tablet, .show-mobile { display:none; } 3466 | .show-mobile { display:none; } 3467 | .show-mobile.inline { display:none; } 3468 | img.inline, .inline { display:inline-block; } 3469 | .break-word { word-wrap:break-word; } 3470 | .align-middle { vertical-align: middle;} 3471 | .align-top { vertical-align: top;} 3472 | .block { display:block; } 3473 | .scroll-h { overflow-x:auto; } 3474 | .scroll-v { overflow-y:auto; } 3475 | .capitalize { text-transform:capitalize; } 3476 | .z1 { z-index:1; } 3477 | .z10 { z-index:10; } 3478 | .z100 { z-index:100; } 3479 | .round { border-radius:3px; } 3480 | .round-top { border-radius:3px 3px 0 0; } 3481 | .round-right { border-radius:0 3px 3px 0; } 3482 | .round-bottom { border-radius:0 0 3px 3px; } 3483 | .round-left { border-radius:3px 0 0 3px; } 3484 | .unround, 3485 | .pill.unround .unround { border-radius:0;} 3486 | 3487 | .caption { 3488 | display:block; 3489 | } 3490 | .prose .caption { 3491 | font-size: 12px; 3492 | margin: -20px 0 20px 3493 | } 3494 | 3495 | .truncate { 3496 | text-overflow:ellipsis; 3497 | white-space:nowrap; 3498 | overflow:hidden; 3499 | } 3500 | 3501 | /* Loading overlay 3502 | ------------------------------------------------------- */ 3503 | .loading:after, 3504 | .loading:before { 3505 | content:''; 3506 | display:block; 3507 | position:absolute; 3508 | z-index:10; 3509 | } 3510 | .loading:before { 3511 | background:transparent; 3512 | left:0; 3513 | top:0; 3514 | width:100%; 3515 | height:100%; 3516 | } 3517 | .loading:after { 3518 | background:rgba(0,0,0,.2) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICBpZD0ic3ZnMzEyMiIKICAgdmVyc2lvbj0iMS4xIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjQ4LjUgcjEwMDQwIgogICB3aWR0aD0iMjQiCiAgIGhlaWdodD0iMjQiCiAgIHNvZGlwb2RpOmRvY25hbWU9ImxvYWRzb3VyY2UyLnN2ZyI+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhMzEyOCI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGUgLz4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGRlZnMKICAgICBpZD0iZGVmczMxMjYiIC8+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiCiAgICAgZ3JpZHRvbGVyYW5jZT0iMTAiCiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxMTgyIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjcwOCIKICAgICBpZD0ibmFtZWR2aWV3MzEyNCIKICAgICBzaG93Z3JpZD0idHJ1ZSIKICAgICBpbmtzY2FwZTpzbmFwLWJib3g9InRydWUiCiAgICAgaW5rc2NhcGU6b2JqZWN0LW5vZGVzPSJ0cnVlIgogICAgIGlua3NjYXBlOnpvb209IjE2IgogICAgIGlua3NjYXBlOmN4PSI4Ljk3Nzk0NzciCiAgICAgaW5rc2NhcGU6Y3k9IjEwLjczMjQ3NiIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iNDgyIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIxMjciCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMCIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmczMTIyIgogICAgIHNob3dndWlkZXM9ImZhbHNlIgogICAgIGlua3NjYXBlOmd1aWRlLWJib3g9InRydWUiCiAgICAgaW5rc2NhcGU6b2JqZWN0LXBhdGhzPSJ0cnVlIgogICAgIGZpdC1tYXJnaW4tdG9wPSIwIgogICAgIGZpdC1tYXJnaW4tbGVmdD0iMCIKICAgICBmaXQtbWFyZ2luLXJpZ2h0PSIwIgogICAgIGZpdC1tYXJnaW4tYm90dG9tPSIwIj4KICAgIDxpbmtzY2FwZTpncmlkCiAgICAgICB0eXBlPSJ4eWdyaWQiCiAgICAgICBpZD0iZ3JpZDMxMzIiCiAgICAgICBlbXBzcGFjaW5nPSI1IgogICAgICAgdmlzaWJsZT0idHJ1ZSIKICAgICAgIGVuYWJsZWQ9InRydWUiCiAgICAgICBzbmFwdmlzaWJsZWdyaWRsaW5lc29ubHk9InRydWUiCiAgICAgICBvcmlnaW54PSItMTQ4cHgiCiAgICAgICBvcmlnaW55PSItMzU4cHgiIC8+CiAgICA8c29kaXBvZGk6Z3VpZGUKICAgICAgIG9yaWVudGF0aW9uPSItMC43MDcxMDY3OCwwLjcwNzEwNjc4IgogICAgICAgcG9zaXRpb249IjEyLDEyIgogICAgICAgaWQ9Imd1aWRlNDEwNSIgLz4KICA8L3NvZGlwb2RpOm5hbWVkdmlldz4KICA8cGF0aAogICAgIHN0eWxlPSJjb2xvcjojMDAwMDAwO2ZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MTI7bWFya2VyOm5vbmU7dmlzaWJpbGl0eTp2aXNpYmxlO2Rpc3BsYXk6aW5saW5lO292ZXJmbG93OnZpc2libGU7ZW5hYmxlLWJhY2tncm91bmQ6YWNjdW11bGF0ZSIKICAgICBkPSJNIDEyIDAgTCAxMiA1IEMgMTUuODY1OTkzIDUgMTkgOC4xMzQwMDY3IDE5IDEyIEwgMjQgMTIgQyAyNCA1LjM3MjU4MyAxOC42Mjc0MTcgMCAxMiAwIHogIgogICAgIGlkPSJwYXRoMzk1NiIgLz4KICA8cGF0aAogICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgICAgc3R5bGU9Im9wYWNpdHk6MC40O2NvbG9yOiMwMDAwMDA7ZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxMjttYXJrZXI6bm9uZTt2aXNpYmlsaXR5OnZpc2libGU7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlIgogICAgIGQ9Ik0gMTIsMCBDIDUuMzcyNTgzLDAgMCw1LjM3MjU4MyAwLDEyIGMgMCwzLjE4MjU5OCAxLjI0OTU2Myw2LjI0OTU2MyAzLjUsOC41IDIuMjUwNDM3LDIuMjUwNDM3IDUuMzE3NDAyLDMuNSA4LjUsMy41IDMuMTgyNTk4LDAgNi4yNDk1NjMsLTEuMjQ5NTYzIDguNSwtMy41IEMgMjIuNzUwNDM3LDE4LjI0OTU2MyAyNCwxNS4xODI1OTggMjQsMTIgbCAtNSwwIGMgMCwzLjg2NTk5MyAtMy4xMzQwMDcsNyAtNyw3IEMgOC4xMzQwMDY4LDE5IDUsMTUuODY1OTkzIDUsMTIgNSw4LjEzNDAwNjcgOC4xMzQwMDY4LDUgMTIsNSB6IgogICAgIGlkPSJwYXRoMzE3NCIKICAgICBzb2RpcG9kaTpub2RldHlwZXM9ImNjY2NjY2NjY2NjIiAvPgo8L3N2Zz4K) 50% 50% no-repeat; 3519 | left:50%; 3520 | top:50%; 3521 | margin:-20px 0 0 -20px; 3522 | width:40px; 3523 | height:40px; 3524 | border-radius:50%; 3525 | -webkit-animation: rotate 1s linear infinite; 3526 | -moz-animation: rotate 1s linear infinite; 3527 | -ms-animation: rotate 1s linear infinite; 3528 | animation: rotate 1s linear infinite; 3529 | } 3530 | 3531 | .spinner:after { 3532 | content:''; 3533 | position:absolute; 3534 | right:5px; 3535 | top:50%; 3536 | border-radius:50%; 3537 | background:rgba(0,0,0,.5) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICBpZD0ic3ZnMzEyMiIKICAgdmVyc2lvbj0iMS4xIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjQ4LjUgcjEwMDQwIgogICB3aWR0aD0iMjQiCiAgIGhlaWdodD0iMjQiCiAgIHNvZGlwb2RpOmRvY25hbWU9ImxvYWRzb3VyY2UyLnN2ZyI+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhMzEyOCI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGUgLz4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGRlZnMKICAgICBpZD0iZGVmczMxMjYiIC8+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiCiAgICAgZ3JpZHRvbGVyYW5jZT0iMTAiCiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxMTgyIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjcwOCIKICAgICBpZD0ibmFtZWR2aWV3MzEyNCIKICAgICBzaG93Z3JpZD0idHJ1ZSIKICAgICBpbmtzY2FwZTpzbmFwLWJib3g9InRydWUiCiAgICAgaW5rc2NhcGU6b2JqZWN0LW5vZGVzPSJ0cnVlIgogICAgIGlua3NjYXBlOnpvb209IjE2IgogICAgIGlua3NjYXBlOmN4PSI4Ljk3Nzk0NzciCiAgICAgaW5rc2NhcGU6Y3k9IjEwLjczMjQ3NiIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iNDgyIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIxMjciCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMCIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmczMTIyIgogICAgIHNob3dndWlkZXM9ImZhbHNlIgogICAgIGlua3NjYXBlOmd1aWRlLWJib3g9InRydWUiCiAgICAgaW5rc2NhcGU6b2JqZWN0LXBhdGhzPSJ0cnVlIgogICAgIGZpdC1tYXJnaW4tdG9wPSIwIgogICAgIGZpdC1tYXJnaW4tbGVmdD0iMCIKICAgICBmaXQtbWFyZ2luLXJpZ2h0PSIwIgogICAgIGZpdC1tYXJnaW4tYm90dG9tPSIwIj4KICAgIDxpbmtzY2FwZTpncmlkCiAgICAgICB0eXBlPSJ4eWdyaWQiCiAgICAgICBpZD0iZ3JpZDMxMzIiCiAgICAgICBlbXBzcGFjaW5nPSI1IgogICAgICAgdmlzaWJsZT0idHJ1ZSIKICAgICAgIGVuYWJsZWQ9InRydWUiCiAgICAgICBzbmFwdmlzaWJsZWdyaWRsaW5lc29ubHk9InRydWUiCiAgICAgICBvcmlnaW54PSItMTQ4cHgiCiAgICAgICBvcmlnaW55PSItMzU4cHgiIC8+CiAgICA8c29kaXBvZGk6Z3VpZGUKICAgICAgIG9yaWVudGF0aW9uPSItMC43MDcxMDY3OCwwLjcwNzEwNjc4IgogICAgICAgcG9zaXRpb249IjEyLDEyIgogICAgICAgaWQ9Imd1aWRlNDEwNSIgLz4KICA8L3NvZGlwb2RpOm5hbWVkdmlldz4KICA8cGF0aAogICAgIHN0eWxlPSJjb2xvcjojMDAwMDAwO2ZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MTI7bWFya2VyOm5vbmU7dmlzaWJpbGl0eTp2aXNpYmxlO2Rpc3BsYXk6aW5saW5lO292ZXJmbG93OnZpc2libGU7ZW5hYmxlLWJhY2tncm91bmQ6YWNjdW11bGF0ZSIKICAgICBkPSJNIDEyIDAgTCAxMiA1IEMgMTUuODY1OTkzIDUgMTkgOC4xMzQwMDY3IDE5IDEyIEwgMjQgMTIgQyAyNCA1LjM3MjU4MyAxOC42Mjc0MTcgMCAxMiAwIHogIgogICAgIGlkPSJwYXRoMzk1NiIgLz4KICA8cGF0aAogICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgICAgc3R5bGU9Im9wYWNpdHk6MC40O2NvbG9yOiMwMDAwMDA7ZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxMjttYXJrZXI6bm9uZTt2aXNpYmlsaXR5OnZpc2libGU7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlIgogICAgIGQ9Ik0gMTIsMCBDIDUuMzcyNTgzLDAgMCw1LjM3MjU4MyAwLDEyIGMgMCwzLjE4MjU5OCAxLjI0OTU2Myw2LjI0OTU2MyAzLjUsOC41IDIuMjUwNDM3LDIuMjUwNDM3IDUuMzE3NDAyLDMuNSA4LjUsMy41IDMuMTgyNTk4LDAgNi4yNDk1NjMsLTEuMjQ5NTYzIDguNSwtMy41IEMgMjIuNzUwNDM3LDE4LjI0OTU2MyAyNCwxNS4xODI1OTggMjQsMTIgbCAtNSwwIGMgMCwzLjg2NTk5MyAtMy4xMzQwMDcsNyAtNyw3IEMgOC4xMzQwMDY4LDE5IDUsMTUuODY1OTkzIDUsMTIgNSw4LjEzNDAwNjcgOC4xMzQwMDY4LDUgMTIsNSB6IgogICAgIGlkPSJwYXRoMzE3NCIKICAgICBzb2RpcG9kaTpub2RldHlwZXM9ImNjY2NjY2NjY2NjIiAvPgo8L3N2Zz4K) 50% 50% no-repeat; 3538 | background-size: 20px; 3539 | margin:-15px 0 0 -15px; 3540 | width:30px; 3541 | height:30px; 3542 | opacity:.5; 3543 | -webkit-animation: rotate 1s linear infinite; 3544 | -moz-animation: rotate 1s linear infinite; 3545 | -ms-animation: rotate 1s linear infinite; 3546 | animation: rotate 1s linear infinite; 3547 | } 3548 | 3549 | @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } 3550 | @-moz-keyframes rotate { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } 3551 | @-ms-keyframes rotate { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } 3552 | @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } 3553 | 3554 | /* Small Screen Layout 3555 | ------------------------------------------------------- */ 3556 | @media only screen and (max-width:900px) { 3557 | .limiter { 3558 | width: 100%; 3559 | padding-left:20px; 3560 | padding-right:20px; 3561 | } 3562 | } 3563 | 3564 | /* Tablet Layout 3565 | ------------------------------------------------------- */ 3566 | @media only screen and (max-width:770px) { 3567 | .hide-tablet { display:none; } 3568 | .show-tablet { display:block; } 3569 | } 3570 | 3571 | /* Mobile Layout 3572 | ------------------------------------------------------- */ 3573 | @media only screen and (max-width:640px) { 3574 | a:link { -webkit-tap-highlight-color:rgba(0,0,0,0); } 3575 | label .inline a { font-weight:normal; } 3576 | [type=submit] { width:100%; } 3577 | 3578 | .row1 { height:auto; min-height: 40px;} 3579 | .row2 { height:auto; min-height: 80px;} 3580 | .row3 { height:auto; min-height: 120px;} 3581 | .row4 { height:auto; min-height: 160px;} 3582 | .row5 { height:auto; min-height: 200px;} 3583 | .row6 { height:auto; min-height: 240px;} 3584 | .row7 { height:auto; min-height: 280px;} 3585 | .row8 { height:auto; min-height: 320px;} 3586 | .row9 { height:auto; min-height: 360px;} 3587 | .row10 { height:auto; min-height: 400px;} 3588 | .row11 { height:auto; min-height: 440px;} 3589 | .row12 { height:auto; min-height: 480px;} 3590 | .row13 { height:auto; min-height: 520px;} 3591 | .row14 { height:auto; min-height: 560px;} 3592 | .row15 { height:auto; min-height: 600px;} 3593 | .row16 { height:auto; min-height: 640px;} 3594 | 3595 | .col1, 3596 | .col2, 3597 | .col3, 3598 | .col4, 3599 | .col5, 3600 | .col6, 3601 | .col7, 3602 | .col8, 3603 | .col9, 3604 | .col10, 3605 | .col11, 3606 | .col12, 3607 | .fifths > * { width:100%; max-width:100%; } 3608 | .margin0, 3609 | .margin1, 3610 | .margin2, 3611 | .margin3, 3612 | .margin4, 3613 | .margin5, 3614 | .margin6, 3615 | .margin7, 3616 | .margin8, 3617 | .margin9, 3618 | .margin10, 3619 | .margin11, 3620 | .margin12 { margin-left:0; } 3621 | .pad8 { padding:40px; } 3622 | .pad8y { padding-top:40px; padding-bottom:40px;} 3623 | .pad8x { padding-left:40px; padding-right:40px;} 3624 | .pad4y { padding-top:20px; padding-bottom:20px; } 3625 | .pad4 { padding:20px; } 3626 | .pad4x { padding-left:20px; padding-right:20px; } 3627 | .pad2 { padding:10px; } 3628 | .pad2y { padding-top:10px; padding-bottom:10px; } 3629 | .pad2x { padding-right:10px; padding-left:10px; } 3630 | .title { margin-bottom:10px; } 3631 | .space-bottom2, .space-bottom { margin-bottom:10px; } 3632 | .space-bottom4 { margin-bottom:20px; } 3633 | .space-bottom8 { margin-bottom:40px;} 3634 | .space-top2 { margin-top:10px;} 3635 | .space-top4 { margin-top:20px;} 3636 | .space-top8 { margin-top:40px;} 3637 | .hide-mobile { display:none!important; } 3638 | .show-mobile { display:block!important; } 3639 | .show-mobile.inline { display:inline-block!important; } 3640 | 3641 | .pill:not(.mobile-cols) > *:not(.stroke) { 3642 | width:100%; 3643 | border-left-width:0; 3644 | border-bottom-width:1px; 3645 | } 3646 | .pill:not(.mobile-cols) > *:first-of-type { 3647 | border-radius:3px 3px 0 0; 3648 | } 3649 | .pill:not(.mobile-cols) > *:last-of-type:not(.stroke) { 3650 | border-bottom-width:0; 3651 | border-radius:0 0 3px 3px; 3652 | } 3653 | .tabs:not(.mobile-cols) > a { border-right-width:0; border-bottom-width:1px; } 3654 | .tabs:not(.mobile-cols) > a:last-of-type { border-bottom:none; } 3655 | 3656 | .mobile-cols > .col0 { float:left; width:04.1666%; } 3657 | .mobile-cols > .col1 { float:left; width:08.3333%; } 3658 | .mobile-cols > .col2 { float:left; width:16.6666%; } 3659 | .mobile-cols > .col3 { float:left; width:25.0000%; } 3660 | .mobile-cols > .col4 { float:left; width:33.3333%; } 3661 | .mobile-cols > .col5 { float:left; width:41.6666%; } 3662 | .mobile-cols > .col6 { float:left; width:50.0000%; } 3663 | .mobile-cols > .col7 { float:left; width:58.3333%; } 3664 | .mobile-cols > .col8 { float:left; width:66.6666%; } 3665 | .mobile-cols > .col9 { float:left; width:75.0000%; } 3666 | .mobile-cols > .col10 { float:left; width:83.3333%; } 3667 | .mobile-cols > .col11 { float:left; width:91.6666%; } 3668 | 3669 | .mobile-cols > .margin0 { margin-left:04.1666%; } 3670 | .mobile-cols > .margin1 { margin-left:08.3333%; } 3671 | .mobile-cols > .margin2 { margin-left:16.6666%; } 3672 | .mobile-cols > .margin3 { margin-left:25.0000%; } 3673 | .mobile-cols > .margin4 { margin-left:33.3333%; } 3674 | .mobile-cols > .margin5 { margin-left:41.6666%; } 3675 | .mobile-cols > .margin6 { margin-left:50.0000%; } 3676 | .mobile-cols > .margin7 { margin-left:58.3333%; } 3677 | .mobile-cols > .margin8 { margin-left:66.6666%; } 3678 | .mobile-cols > .margin9 { margin-left:75.0000%; } 3679 | .mobile-cols > .margin10 { margin-left:83.3333%; } 3680 | .mobile-cols > .margin11 { margin-left:91.6666%; } 3681 | .mobile-cols > .margin12 { margin-left:100.0000%; } 3682 | 3683 | /* Fanct gets too big, revert to defaults */ 3684 | h1.fancy { font-size:40px;line-height:60px;} 3685 | h2.fancy { 3686 | font-size:30px; 3687 | line-height:40px; 3688 | } 3689 | h3.fancy { 3690 | font-size:20px; 3691 | line-height:30px; 3692 | } 3693 | 3694 | /* Deprecated */ 3695 | h1.futura { font-size:40px;line-height:60px;} 3696 | h2.futura { 3697 | font-size:30px; 3698 | line-height:40px; 3699 | } 3700 | h3.futura { 3701 | font-size:20px; 3702 | line-height:30px; 3703 | } 3704 | 3705 | /* Anchor icon adds noise to the page on smaller displays */ 3706 | .doc h1[id]:before, 3707 | .doc h2[id]:before, 3708 | .doc h3[id]:before, 3709 | .doc h4[id]:before { visibility:hidden; } 3710 | 3711 | /* Lower the size back down to standard 3712 | * .prose units on mobile */ 3713 | .prose-big, 3714 | .prose-big h3, 3715 | .prose-big h4, 3716 | .prose-big h5, 3717 | .prose-big h6 { 3718 | font-size:15px; 3719 | line-height:25px; 3720 | } 3721 | .prose-big .small, 3722 | .prose-big small { 3723 | font-size:12px; 3724 | line-height:20px; 3725 | } 3726 | } 3727 | 3728 | /* Print 3729 | ------------------------------------------------------- */ 3730 | @media print { 3731 | 3732 | /* Inline rules */ 3733 | body, input, textarea, p { 3734 | color:#000; 3735 | font:12px/20px 'Open Sans', sans-serif; 3736 | } 3737 | .prose a:after { content:' [' attr(href) '] '; } 3738 | 3739 | /* Cut pad rules in half, matches mobile rules */ 3740 | .pad4 { padding:20px; } 3741 | .pad8 { padding:40px 20px; } 3742 | .pad4y { padding-top:20px; padding-bottom:20px; } 3743 | .pad4x { padding-left:20px; padding-right:20px; } 3744 | .pad2 { padding:10px; } 3745 | .pad2y { padding-top:10px; padding-bottom:10px; } 3746 | .pad2x { padding-right:10px; padding-left:10px; } 3747 | 3748 | /* Icon sprites dont show up be default so kill'em */ 3749 | .rcon:after, .icon:before { width:0; height:0; } 3750 | 3751 | /* TODO Depreciate */ 3752 | .noprint { display:none; } 3753 | } 3754 | -------------------------------------------------------------------------------- /css/base/base.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 22 | 24 | 31 | 41 | 44 | 48 | 52 | 53 | 63 | 66 | 70 | 74 | 75 | 85 | 88 | 92 | 96 | 97 | 107 | 110 | 114 | 118 | 119 | 129 | 132 | 136 | 140 | 141 | 151 | 154 | 158 | 162 | 163 | 173 | 176 | 180 | 184 | 185 | 195 | 198 | 202 | 206 | 207 | 208 | 239 | 252 | 263 | 267 | 271 | 275 | 279 | 283 | 287 | 291 | 295 | 296 | 298 | 299 | 301 | image/svg+xml 302 | 304 | 305 | 306 | 307 | 308 | 321 | 327 | 331 | 336 | 341 | 344 | 350 | 351 | 355 | 361 | 362 | 367 | 371 | 377 | 378 | 379 | 380 | -------------------------------------------------------------------------------- /css/base/base@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/ditty/9ceaa270e34c44016bdcf67d841ff8679bd1a585/css/base/base@2x.png -------------------------------------------------------------------------------- /css/base/credit-cards.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 21 | 23 | 33 | 37 | 38 | 48 | 52 | 53 | 63 | 67 | 68 | 78 | 82 | 83 | 93 | 97 | 98 | 108 | 112 | 113 | 123 | 127 | 128 | 138 | 142 | 143 | 153 | 157 | 158 | 168 | 172 | 173 | 183 | 187 | 188 | 198 | 202 | 203 | 213 | 217 | 218 | 228 | 232 | 233 | 243 | 247 | 248 | 258 | 262 | 263 | 273 | 277 | 278 | 288 | 292 | 293 | 303 | 307 | 308 | 318 | 322 | 323 | 333 | 337 | 338 | 348 | 352 | 353 | 354 | 371 | 378 | 379 | 381 | 382 | 384 | image/svg+xml 385 | 387 | 388 | 389 | 390 | 391 | 396 | 399 | 408 | 415 | 422 | 427 | 433 | 434 | 437 | 446 | 456 | 466 | 471 | 477 | 478 | 481 | 491 | 497 | 503 | 504 | 507 | 516 | 522 | 527 | 537 | 543 | 548 | 549 | 552 | 561 | 568 | 575 | 580 | 586 | 587 | 590 | 599 | 609 | 619 | 624 | 630 | 631 | 634 | 644 | 650 | 656 | 657 | 660 | 669 | 675 | 680 | 690 | 696 | 701 | 702 | 705 | 715 | 725 | 729 | 735 | 736 | 740 | 746 | 747 | 751 | 757 | 758 | 759 | 762 | 772 | 782 | 787 | 788 | 792 | 802 | 812 | 816 | 822 | 823 | 827 | 833 | 834 | 838 | 844 | 845 | 846 | 850 | 860 | 870 | 875 | 876 | 877 | 878 | -------------------------------------------------------------------------------- /css/base/credit-cards@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/ditty/9ceaa270e34c44016bdcf67d841ff8679bd1a585/css/base/credit-cards@2x.png -------------------------------------------------------------------------------- /css/base/icon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/ditty/9ceaa270e34c44016bdcf67d841ff8679bd1a585/css/base/icon.eot -------------------------------------------------------------------------------- /css/base/icon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/ditty/9ceaa270e34c44016bdcf67d841ff8679bd1a585/css/base/icon.woff -------------------------------------------------------------------------------- /css/base/opensans-bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/ditty/9ceaa270e34c44016bdcf67d841ff8679bd1a585/css/base/opensans-bold.eot -------------------------------------------------------------------------------- /css/base/opensans-bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/ditty/9ceaa270e34c44016bdcf67d841ff8679bd1a585/css/base/opensans-bold.woff -------------------------------------------------------------------------------- /css/base/opensans-bolditalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/ditty/9ceaa270e34c44016bdcf67d841ff8679bd1a585/css/base/opensans-bolditalic.eot -------------------------------------------------------------------------------- /css/base/opensans-bolditalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/ditty/9ceaa270e34c44016bdcf67d841ff8679bd1a585/css/base/opensans-bolditalic.woff -------------------------------------------------------------------------------- /css/base/opensans-italic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/ditty/9ceaa270e34c44016bdcf67d841ff8679bd1a585/css/base/opensans-italic.eot -------------------------------------------------------------------------------- /css/base/opensans-italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/ditty/9ceaa270e34c44016bdcf67d841ff8679bd1a585/css/base/opensans-italic.woff -------------------------------------------------------------------------------- /css/base/opensans-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/ditty/9ceaa270e34c44016bdcf67d841ff8679bd1a585/css/base/opensans-regular.eot -------------------------------------------------------------------------------- /css/base/opensans-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/ditty/9ceaa270e34c44016bdcf67d841ff8679bd1a585/css/base/opensans-regular.woff -------------------------------------------------------------------------------- /css/site.css: -------------------------------------------------------------------------------- 1 | /* 2 | * #bc4972 3 | * #d3648b 4 | * #d87598 5 | */ 6 | 7 | a { cursor: pointer; color: #fff; } 8 | a:hover { color: #eee; } 9 | .fix-width { 10 | width:484px; 11 | height:484px; 12 | margin:40px auto; 13 | box-sizing:border-box; 14 | } 15 | .same-width { 16 | width:484px; 17 | margin:40px auto; 18 | box-sizing:border-box; 19 | } 20 | body { 21 | background: #bc4972; 22 | color:#fff; 23 | } 24 | 25 | .fill-pink { 26 | background: #d2527f; 27 | } 28 | 29 | .keyline-all { 30 | border:2px solid #fff; 31 | } 32 | 33 | .flex-beat { 34 | width:30px; 35 | display:inline-block; 36 | } 37 | 38 | .flex-beat.resolution-32 { 39 | width:15px; 40 | } 41 | 42 | .love-note { 43 | border-bottom:1px solid rgba(0, 0, 0, 0.1); 44 | border-right:1px solid rgba(0, 0, 0, 0.1); 45 | height:30px; 46 | } 47 | 48 | .love-note.resolution-32 { 49 | height:15px; 50 | } 51 | 52 | .love-note:hover { 53 | background:rgba(0, 0, 0, 0.1); 54 | } 55 | 56 | .cursor-on { 57 | background:rgba(255, 255, 255, 0.3); 58 | } 59 | 60 | .note-on { 61 | background:#fff; 62 | } 63 | 64 | .beat-on { 65 | background:rgba(255, 255, 255, 0.1); 66 | } 67 | 68 | .love-note.note-on:hover { 69 | background:rgba(255, 255, 255, 0.8); 70 | } 71 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ditty", 3 | "version": "1.0.6", 4 | "description": "", 5 | "main": "src/index.js", 6 | "dependencies": { 7 | "6to5ify": "^4.1.0", 8 | "brfs": "^1.3.0", 9 | "browserify": "^8.1.3", 10 | "flux": "^2.0.1", 11 | "lodash": "^3.2.0", 12 | "object-assign": "^2.0.0", 13 | "react": "^0.12.2", 14 | "react-document-title": "^1.0.1", 15 | "react-router": "^0.11.6", 16 | "timbre": "^14.11.25", 17 | "xtend": "^4.0.0" 18 | }, 19 | "browserify": { 20 | "transform": [ 21 | "6to5ify", 22 | "brfs" 23 | ] 24 | }, 25 | "devDependencies": { 26 | "budo": "^1.0.0", 27 | "react-keybinding": "^1.1.0", 28 | "watchify": "^2.3.0" 29 | }, 30 | "scripts": { 31 | "start": "budo site.js -o bundle.js --live", 32 | "build": "browserify site.js > bundle.js" 33 | }, 34 | "author": "Tom MacWright", 35 | "license": "ISC" 36 | } 37 | -------------------------------------------------------------------------------- /site.js: -------------------------------------------------------------------------------- 1 | require('./src/index.js'); 2 | -------------------------------------------------------------------------------- /src/actions.js: -------------------------------------------------------------------------------- 1 | var SongConstants = require('./constants/song_constants.js'), 2 | Dispatcher = require('./dispatcher.js'); 3 | 4 | var actions = { 5 | redo() { 6 | Dispatcher.handleViewAction({ 7 | actionType: SongConstants.REDO 8 | }); 9 | }, 10 | undo() { 11 | Dispatcher.handleViewAction({ 12 | actionType: SongConstants.UNDO 13 | }); 14 | }, 15 | reset() { 16 | Dispatcher.handleViewAction({ 17 | actionType: SongConstants.RESET 18 | }); 19 | }, 20 | flipNote(note) { 21 | Dispatcher.handleViewAction({ 22 | actionType: SongConstants.NOTE_FLIP, 23 | note: note 24 | }); 25 | } 26 | }; 27 | 28 | module.exports = actions; 29 | -------------------------------------------------------------------------------- /src/components/help.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var Keybinding = require('react-keybinding'); 3 | 4 | var Help = React.createClass({ 5 | mixins: [Keybinding], 6 | render: function() { 7 | return
8 |
9 | {this.getAllKeybindings() 10 | .filter(binding => binding) 11 | .reduce((list, binding) => 12 | list.concat(Object.keys(binding).map(k => [k, binding[k]])), []) 13 | .map(binding => 14 |
15 |
16 | {binding[0]} 17 |
18 |
19 | {binding[1]} 20 |
21 |
22 | )} 23 |
24 |
; 25 | } 26 | }); 27 | 28 | module.exports = Help; 29 | -------------------------------------------------------------------------------- /src/components/song.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var DocumentTitle = require('react-document-title'); 3 | var _ = require('lodash'); 4 | var actions = require('../actions.js'); 5 | var Immutable = require('immutable'); 6 | var Router = require('react-router'); 7 | var Help = require('./help.js'); 8 | var Keybinding = require('react-keybinding'); 9 | var { Navigation, State } = Router; 10 | var SongStore = require('../stores/song_store.js'); 11 | 12 | var osc = T('pulse'); 13 | var env = T('perc', {a:50, r:250}); 14 | var synth = T('OscGen', {osc:osc, env:env, mul:0.15}).play(); 15 | 16 | const START_NOTE = 69; 17 | 18 | const CURSOR_LEFT = 'Move cursor left'; 19 | const CURSOR_RIGHT = 'Move cursor right'; 20 | const CURSOR_UP = 'Move cursor up'; 21 | const CURSOR_DOWN = 'Move cursor down'; 22 | const FLIP_NOTE = 'Flip note under cursor'; 23 | const SHOW_HELP = 'Show help'; 24 | 25 | var Song = React.createClass({ 26 | mixins: [SongStore.listenTo, State, Navigation, Keybinding], 27 | keybindings: { 28 | 'arrow-left': CURSOR_LEFT, 29 | 'arrow-right': CURSOR_RIGHT, 30 | 'arrow-up': CURSOR_UP, 31 | 'arrow-down': CURSOR_DOWN, 32 | 'enter': FLIP_NOTE, 33 | '?': SHOW_HELP 34 | }, 35 | inBounds(pos, dimension) { 36 | return Math.max(0, Math.min(pos, this.state.resolution[dimension])); 37 | }, 38 | moveCursor(dir) { 39 | this.setState({ 40 | cursor: [ 41 | this.state.cursor[0] + dir[0], 42 | this.state.cursor[1] + dir[1] 43 | ].map(this.inBounds) 44 | }, () => { 45 | var noteNum = START_NOTE + this.state.cursor[1]; 46 | var velocity = 20; 47 | synth.noteOn(noteNum, velocity); 48 | }); 49 | }, 50 | keybinding(e, action) { 51 | switch (action) { 52 | case CURSOR_LEFT: this.moveCursor([-1, 0]); break; 53 | case CURSOR_RIGHT: this.moveCursor([1, 0]); break; 54 | case CURSOR_UP: this.moveCursor([0, 1]); break; 55 | case CURSOR_DOWN: this.moveCursor([0, -1]); break; 56 | case FLIP_NOTE: this.flipNote(...this.state.cursor); break; 57 | case SHOW_HELP: this.toggleHelp(); break; 58 | } 59 | e.preventDefault(); 60 | }, 61 | toggleHelp() { 62 | this.setState({help:!this.state.help}); 63 | }, 64 | getInitialState() { 65 | return { 66 | song: SongStore.all(), 67 | beat: 0, 68 | help: true, 69 | cursor: [7, 7], 70 | resolution: [16, 16] 71 | }; 72 | }, 73 | componentDidMount() { 74 | this.interval = T('interval', {interval:100}, (count) => { 75 | var beat = count % this.state.resolution[0]; 76 | this.setState({ beat: beat }); 77 | this.state.song.get(beat, Immutable.Map()).forEach((note, index) => { 78 | if (note) { 79 | var noteNum = START_NOTE + index; 80 | var velocity = 64; 81 | synth.noteOn(noteNum, velocity); 82 | } 83 | }); 84 | }).start(); 85 | document.addEventListener('keydown', (e) => { 86 | if (e.which === 90 && e.metaKey && e.shiftKey) { 87 | actions.redo(); 88 | e.preventDefault(); 89 | } else if (e.which === 90 && e.metaKey) { 90 | actions.undo(); 91 | e.preventDefault(); 92 | } 93 | }); 94 | }, 95 | _onChange() { 96 | this.setState({ 97 | song: SongStore.all() 98 | }); 99 | }, 100 | flipNote(beat, note) { 101 | actions.flipNote([beat, note]); 102 | }, 103 | undo() { 104 | actions.undo(); 105 | }, 106 | previewNote: _.debounce((beat, note) => { 107 | synth.noteOn(note + START_NOTE, 80); 108 | }, 100), 109 | noteOn(beat, note) { 110 | return this.state.song.getIn([beat, note]); 111 | }, 112 | isCursor(beat, note) { 113 | return this.state.cursor[0] === beat && this.state.cursor[1] === note; 114 | }, 115 | resolutionY() { 116 | this.setState({ 117 | resolution: [this.state.resolution[0], this.state.resolution[1] === 16 ? 32 : 16] 118 | }); 119 | }, 120 | resolutionX() { 121 | this.setState({ 122 | resolution: [this.state.resolution[0] === 16 ? 32 : 16, this.state.resolution[1]] 123 | }); 124 | }, 125 | render: function() { 126 | return 127 |
128 |
129 | {_.range(0, this.state.resolution[0]).map((beat) => { 130 | return
135 | {_.range(0, this.state.resolution[1]).reverse().map((note) => { 136 | return
144 |
145 | })} 146 |
147 | })} 148 |
149 | {this.state.help ? : ''} 150 |
151 | 153 | 155 | 157 | 159 | 161 | 163 |
164 |
165 | 167 |
168 |
169 | ; 170 | } 171 | }); 172 | 173 | module.exports = Song; 174 | -------------------------------------------------------------------------------- /src/config.js: -------------------------------------------------------------------------------- 1 | module.exports = {}; 2 | -------------------------------------------------------------------------------- /src/constants/song_constants.js: -------------------------------------------------------------------------------- 1 | module.exports = require('react/lib/keyMirror')({ 2 | NOTE_FLIP: null, 3 | UNDO: null, 4 | RESET: null, 5 | REDO: null 6 | }); 7 | -------------------------------------------------------------------------------- /src/dispatcher.js: -------------------------------------------------------------------------------- 1 | var Dispatcher = require('flux').Dispatcher, 2 | xtend = require('xtend/mutable'); 3 | 4 | var AppDispatcher = xtend(new Dispatcher(), { 5 | handleViewAction(action) { 6 | this.dispatch({ 7 | source: 'VIEW_ACTION', 8 | action: action 9 | }); 10 | }, 11 | }); 12 | 13 | module.exports = AppDispatcher; 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | Object.assign = require('object-assign'); 2 | 3 | var React = require('react'); 4 | var Router = require('react-router'); 5 | var { Route, DefaultRoute, RouteHandler } = Router; 6 | var Song = require('./components/song.js'); 7 | 8 | var App = React.createClass({ 9 | render: function () { 10 | return ( 11 |
12 | 13 |
14 | ); 15 | } 16 | }); 17 | 18 | var routes = ( 19 | 20 | 21 | 22 | ); 23 | 24 | Router.run(routes, function (Handler) { 25 | React.render(, document.body); 26 | }); 27 | -------------------------------------------------------------------------------- /src/make_store.js: -------------------------------------------------------------------------------- 1 | var EventEmitter = require('events').EventEmitter, 2 | xtend = require('xtend'); 3 | 4 | module.exports = function(opts) { 5 | var CHANGE_EVENT = 'change'; 6 | var events = { 7 | emitChange(actionType, d) { 8 | this.emit(CHANGE_EVENT, actionType, d); 9 | }, 10 | addChangeListener(callback) { 11 | this.on(CHANGE_EVENT, callback); 12 | }, 13 | removeChangeListener(callback) { 14 | this.removeListener(CHANGE_EVENT, callback); 15 | }, 16 | listenTo: { 17 | componentWillMount() { 18 | store.addChangeListener(this._onChange); 19 | }, 20 | componentWillUnmount() { 21 | store.removeChangeListener(this._onChange); 22 | } 23 | } 24 | }; 25 | var store = xtend(EventEmitter.prototype, xtend(opts, events)); 26 | return store; 27 | }; 28 | -------------------------------------------------------------------------------- /src/mml.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/ditty/9ceaa270e34c44016bdcf67d841ff8679bd1a585/src/mml.js -------------------------------------------------------------------------------- /src/stores/song_store.js: -------------------------------------------------------------------------------- 1 | var Dispatcher = require('../dispatcher.js'), 2 | Immutable = require('immutable'), 3 | SongConstants = require('../constants/song_constants.js'), 4 | makeStore = require('../make_store.js'); 5 | 6 | var _songs = Immutable.List([Immutable.Map()]), 7 | _idx = 0; 8 | 9 | function newVersion(op) { 10 | var nextVersion = op(_songs.get(_idx)); 11 | _idx++; 12 | _songs = _songs 13 | .slice(0, _idx) 14 | .push(nextVersion); 15 | } 16 | 17 | var SongStore = makeStore({ 18 | all: () => _songs.get(_idx), 19 | hasUndo: () => _idx > 0, 20 | hasRedo: () => _idx < _songs.size - 1, 21 | dispatcherIndex: Dispatcher.register(payload => { 22 | var action = payload.action; 23 | switch (action.actionType) { 24 | case SongConstants.NOTE_FLIP: 25 | newVersion(song => song.updateIn(action.note, val => !val)); 26 | break; 27 | case SongConstants.UNDO: 28 | _idx = Math.max(_idx - 1, 0); 29 | break; 30 | case SongConstants.RESET: 31 | newVersion(song => song.updateIn(action.note, val => Immutable.Map())); 32 | break; 33 | case SongConstants.REDO: 34 | _idx = Math.min(_idx + 1, _songs.size - 1); 35 | break; 36 | default: 37 | return true; 38 | } 39 | SongStore.emitChange(action.actionType); 40 | return true; 41 | }) 42 | }); 43 | 44 | SongStore.setMaxListeners(1000); 45 | module.exports = SongStore; 46 | --------------------------------------------------------------------------------