plugins/debug_platform/static/css/debug_platform.css

   1 *, html, body {
   2   -webkit-font-smoothing: antialiased;
   3 }
   4
   5 html {
   6   height: 100%;
   7 }
   8
   9 /*
  10 body {
  11   font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
  12   background: #F6F6F6 url(../img/initializing.png) 50% 50% no-repeat;
  13   overflow: hidden;
  14   padding: 0;
  15   margin: 0;
  16   position: relative;
  17   font-size: 14px;
  18 }
  19
  20 @media
  21 (-webkit-min-device-pixel-ratio: 2),
  22 (min-resolution: 192dpi) {
  23   body {
  24     background: #F6F6F6 url(../img/initializing@2x.png) 50% 50% no-repeat;
  25     background-size: 186px 157px;
  26   }
  27 }
  28 */
  29
  30 body .CodeMirror * {
  31   -webkit-font-smoothing: subpixel-antialiased;
  32 }
  33
  34 #show-result #sidebar,
  35 #show-result #content {
  36   transition: opacity .4s;
  37   -moz-transition: opacity .4s;
  38   -webkit-transition: opacity .4s;
  39   -o-transition: opacity .4s;
  40   -ms-transition: opacity .4s;
  41   -webkit-transform: translateZ(0);
  42   /*-moz-transform: translateZ(0);*/
  43   opacity: 0;
  44 }
  45
  46
  47 /* content
  48  ================================================================ */
  49 #content {
  50   margin: 14px 15px 0 232px;
  51   position: relative;
  52   background: #F6F6F6;
  53   height: 96%;
  54 }
  55
  56 /* header
  57  ================================================================ */
  58 #header {
  59   height: 44px;
  60   background: #3D6AA2;
  61 }
  62
  63 #branding {
  64   float: left;
  65   width: 200px;
  66   padding: 0 7px 0 10px;
  67   font-size: 10px;
  68   color: #fff;
  69 }
  70
  71 #home {
  72   display: block;
  73   width: 200px;
  74   height: 44px;
  75   line-height: 44px;
  76   background: transparent url(../img/logo.png) no-repeat 0 50%;
  77   text-indent: 45px;
  78   text-transform: uppercase;
  79   color: #fff;
  80   text-decoration: none;
  81   font-size: 17px;
  82   text-indent: -900em;
  83 }
  84
  85 @media
  86 (-webkit-min-device-pixel-ratio: 2),
  87 (min-resolution: 192dpi) {
  88   #home {
  89     background: transparent url(../img/logo@2x.png) no-repeat 0 50%;
  90     background-size: 136px 23px;
  91   }
  92 }
  93
  94 /* sidebar
  95  ================================================================ */
  96 #sidebar {
  97   padding: 0;
  98   margin: 0;
  99 /*  font-size: 11px;*/
 100   width: 217px;
 101   position: absolute;
 102 /*  top: 45px;
 103   left: 0;*/
 104   background-color: #fff;
 105   color: #444;
 106   height: 100%;
 107 }
 108
 109   #sidebar h3 {
 110     clear: both;
 111     padding: 0;
 112     font-size: 12px;
 113     font-weight: bold;
 114   }
 115
 116   #sidebar input[type='text'],
 117   #sidebar input[type='password'],
 118   #sidebar textarea {
 119     width: 186px;
 120     padding: 7px 5px;
 121     color: #626262;
 122     font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
 123     font-size: 1em;
 124     background: #F6F6F6;
 125     border: solid 1px #C0C0C0;
 126     box-shadow: inset 0 1px 2px #e4e4e4;
 127     border-radius: 2px;
 128     outline: none;
 129   }
 130
 131   #sidebar input[type='text'].warning {
 132     border: solid 1px #e58b85;
 133     background: #f6e4e3;
 134   }
 135
 136   #sidebar textarea {
 137     height: 40px;
 138   }
 139
 140   #sidebar a {
 141     color: #4679BD;
 142   }
 143
 144   #sidebar p {
 145     margin: 0 0 7px;
 146     line-height: 160%;
 147   }
 148
 149   #sidebar select {
 150     width: 100%;
 151     margin: 3px 0;
 152   }
 153
 154   #sidebar pre,
 155   #sidebar code {
 156     padding: 0 2px;
 157     font-family: "Monaco", "Andale Mono", "Lucida Console", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
 158     font-size: .9em;
 159     background: #fffadb;
 160   }
 161
 162   #sidebar .element,
 163   #sidebar .text {
 164     margin: 0;
 165   }
 166
 167 /*
 168   #sidebar label {
 169     font-size: 11px;
 170   }
 171 */
 172   #sidebar .element strong {
 173     font-weight: bold;
 174   }
 175
 176   #sidebar .elementBody {
 177     padding-top: 0;
 178     border-top-style: none;
 179     padding-bottom: 0;
 180     border-bottom-style: none;
 181     overflow: hidden;
 182     opacity: 0;
 183     height: 0;
 184   }
 185
 186   #sidebar .ebCont {
 187     padding: 4px 8px 8px;
 188   }
 189
 190     #sidebar .ebCont h3 {
 191       font-size: 1em;
 192       padding: 4px 0 2px;
 193       color: #888;
 194       border-top: 1px solid #EEEFEE;
 195     }
 196
 197 #sidebar .selectPanel {
 198   position: relative;
 199   height: 54px;
 200 }
 201
 202   #sidebar .selectPanel .panelChoice,
 203   #sidebar .selectPanel .selectFake {
 204     width: 92px;
 205     position: absolute;
 206   }
 207
 208   #sidebar .selectPanel .selectFake {
 209     color: #999;
 210     font-size: 1em;
 211     line-height: 20px;
 212   }
 213
 214   .panelChoice.html {
 215     top: 0;
 216     left: 0;
 217   }
 218
 219   .panelChoice.css {
 220     top: 0;
 221     right: 0;
 222   }
 223
 224   .panelChoice.js {
 225     bottom: 0;
 226     left: 0;
 227   }
 228
 229   .panelChoice.result {
 230     bottom: 0;
 231     right: 0;
 232   }
 233
 234 #sidebar #id_title {
 235 }
 236
 237 #sidebar .toggler {
 238   color: #333;
 239   height: 36px;
 240   line-height: 36px;
 241   padding: 0 8px;
 242   font-size: 13px;
 243   font-weight: normal;
 244   position: relative;
 245 }
 246
 247   #sidebar .toggler em {
 248     color: #AEAEAE;
 249     font-style: normal;
 250     font-size: .8em;
 251     position: absolute;
 252     top: 10px;
 253     right: 10px;
 254     background: #f1f1f1;
 255     height: 16px;
 256     padding: 0 4px;
 257     line-height: 16px;
 258     border-radius: 2px;
 259   }
 260
 261
 262   #sidebar .toggler.active {
 263     color: #333;
 264     font-weight: bold;
 265   }
 266
 267   #sidebar .toggler.selected {
 268   }
 269
 270   #sidebar .toggler,
 271   #sidebar .element a {
 272     cursor: pointer;
 273     text-decoration: none;
 274   }
 275
 276   #sidebar .element {
 277     border-bottom: 1px solid #DFDFDF;
 278   }
 279
 280   #sidebar .element a:hover {
 281     text-decoration: underline;
 282   }
 283
 284
 285
 286 #shell_settings li {
 287   margin: 5px 0;
 288 }
 289
 290 #shell_settings li input {
 291   margin-right: 3px;
 292 }
 293
 294 #sidebar-bottom {
 295    margin: 10px 0 10px 3px;
 296
 297 }
 298
 299   #sidebar #share_links label,
 300   #share_links_dropdown label {
 301     display: block;
 302     padding: 0 0 2px;
 303     font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
 304     font-size: 11px;
 305   }
 306
 307   #sidebar #share_links p,
 308   #share_links_dropdown p {
 309     margin: 0 0 7px;
 310   }
 311
 312   #share_links_dropdown input {
 313     width: 190px;
 314     padding: 7px 5px;
 315     color: #626262;
 316     font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
 317     font-size: 1em;
 318     border: solid 1px #C0C0C0;
 319     background: #F6F6F6;
 320     box-shadow: inset 0 1px 2px #e4e4e4;
 321     border-radius: 2px;
 322   }
 323
 324 .libraryTagAttributes {
 325    padding: 5px 0 0;
 326 }
 327
 328 /* actions */
 329 #actions {
 330   height: 44px;
 331   font-size: 13px;
 332 }
 333
 334 #actions ul.actionCont {
 335   float: left;
 336 }
 337
 338   #actions ul.right {
 339     float: right;
 340   }
 341
 342   #actions li.actionItem {
 343     float: left;
 344     position: relative;
 345     margin-right: 1px;
 346   }
 347
 348   #actions li.actionItem .aiButton,
 349   #actions li.actionItem .aiButton span,
 350   #actions ul.dropdown li.actionItem a.aiButton {
 351     height: 44px;
 352   }
 353
 354   #actions li.actionItem a.aiButton {
 355     display: block;
 356     outline: none;
 357     text-decoration: none;
 358     color: #fff;
 359     background: #355E95;
 360     padding: 0 10px;
 361   }
 362
 363   #actions li.actionItem a.aiButton span {
 364     line-height: 44px;
 365     margin-right: 6px;
 366     font-size: .85em;
 367   }
 368
 369   #actions li.noIcon a.aiButton span {
 370     padding: 0 0 0 6px;
 371     margin-right: 0;
 372   }
 373
 374   #actions li.actionItem #mobile.aiButton span {
 375     margin-right: 0;
 376   }
 377
 378   #actions li.actionItem a.aiButton span.selected {
 379     color: #555;
 380     background: #fff;
 381   }
 382
 383
 384   #actions ul.dropdown .dropdownCont li {
 385     line-height: 26px;
 386   }
 387
 388   #actions ul.dropdown .dcWrapper a {
 389     color: #4679BD;
 390     text-decoration: none;
 391   }
 392
 393   #actions ul.dropdown .dcWrapper a:hover {
 394     text-decoration: underline;
 395   }
 396
 397     #actions ul.dropdown .dropdownCont li a {
 398       display: block;
 399       text-decoration: none;
 400       font-weight: bold;
 401     }
 402
 403       #actions ul.dropdown .dropdownCont li a span {
 404         margin: 0 6px;
 405       }
 406
 407     #actions ul.dropdown .dropdownCont li a:hover {
 408       background: #eee;
 409     }
 410
 411   #actions ul.collapsed li.actionItem {
 412   }
 413
 414   #actions ul.dropdown li.actionItem a.aiButton {
 415   }
 416
 417     #actions ul.dropdown li.actionItem a.aiButton span {
 418       padding: 0 0 0 6px;
 419       margin-right: 0;
 420     }
 421
 422   #actions #toggleSidebarUl {
 423     position: absolute;
 424     top: 0;
 425     left: 165px;
 426     margin-left: -40px;
 427   }
 428
 429   #actions #toggleSidebar {
 430     border-width: 0px;
 431     display: none;
 432     outline: none;
 433     text-decoration: none;
 434     text-shadow: 0;
 435     color: #ffffff;
 436     font-weight: bold;
 437     font-size: 12px;
 438     background: transparent;
 439   }
 440
 441   #actions #toggleSidebar span {
 442     text-indent: -999px;
 443     padding: 0 8px;
 444     width: 12px;
 445   }
 446
 447   #actions #showjscode {
 448     display: none;
 449   }
 450
 451   #actions #collaborate sup {
 452     background: rgba(0, 0, 0, 0.5);
 453     border-radius: 2px;
 454     vertical-align: middle;
 455     opacity: 0.4;
 456     font-size: .7em;
 457     padding: 2px 3px;
 458     text-transform: uppercase;
 459
 460   }
 461
 462 /* select link */
 463 #select_link {
 464   background: transparent url(../img/sprites.png) no-repeat 0 -254px;
 465   color: #fdfdfd;
 466   float: right;
 467   width: 229px;
 468   height: 27px;
 469   margin: 6px 10px 0;
 470   font-size: 13px;
 471   padding-left: 15px;
 472   line-height: 27px;
 473 }
 474
 475 /* universal dropdown container
 476  ================================================================ */
 477 div.dropdownCont {
 478   position: absolute;
 479   top: 44px;
 480   right: -30px;
 481   z-index: 200;
 482   opacity: 0;
 483   overflow: hidden;
 484   padding: 0 30px 30px;
 485 }
 486
 487   div.dropdownCont div.dcWrapper {
 488     background-color: #fff;
 489     width: 200px;
 490     padding: 10px;
 491     margin: 0;
 492     font-size: 13px;
 493     box-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
 494   }
 495
 496     #actions div.dropdownCont div.dcWrapper ul li a {
 497       font-weight: normal;
 498       color: #4679BD;
 499       padding: 0;
 500       line-height: 22px;
 501     }
 502
 503     #actions div.dropdownCont div.dcWrapper ul li a:hover {
 504       background: #fff;
 505     }
 506
 507 /* editor
 508  ================================================================ */
 509 #content fieldset.column {
 510   display: block;
 511   height: 100%;
 512   width: 50%;
 513 }
 514
 515 #content .window {
 516   width: 100%;
 517   border: 1px solid #C0C0C0;
 518   box-shadow: inset 0 1px 2px #e4e4e4;
 519 }
 520
 521   #content .top {
 522     height: 25%;
 523     position: absolute;
 524     top: -6px;
 525   }
 526
 527   #content .bottom {
 528     height: 75%;
 529     position: absolute;
 530     bottom: -6px;
 531   }
 532
 533   #content .right {
 534     position: absolute;
 535     right: -5px;
 536   }
 537
 538   #content .left {
 539     position: absolute;
 540     left: -5px;
 541   }
 542
 543   #handler_vertical {
 544     width: 8px;
 545     height: 100%;
 546     padding: 5px 0;
 547     cursor: col-resize;
 548     position: absolute;
 549     top: -5px;
 550     left: 0;
 551     background: url(../img/handle-v.png) 3px 50% no-repeat;
 552
 553   }
 554
 555   .handler_horizontal {
 556     width: 100%;
 557     height: 8px;
 558     padding: 0 1px;
 559     cursor: row-resize;
 560     position: absolute;
 561     top: 0;
 562     left: 0;
 563     background: url(../img/handle-h.png) 50% 3px no-repeat;
 564   }
 565
 566   #content textarea,
 567   #result iframe,
 568   body.editbox {
 569     min-width: 100px;
 570     width: 100%;
 571     height: 100%;
 572     line-height: 15px;
 573     font-family: "Monaco", "Andale Mono", "Lucida Console", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
 574     font-size: 12px;
 575   }
 576
 577   /* editors */
 578   #content textarea,
 579   #content iframe {
 580     background: #fff;
 581     box-shadow: inset 0 1px 3px #E4E4E4;
 582     border: 0 !important;
 583   }
 584
 585   /* resizing sets display to inline, this overrides */
 586   #content textarea {
 587     display: block;
 588   }
 589
 590   .heyoffline_overlay {
 591     z-index: 100;
 592   }
 593
 594   /* editor labels */
 595   .window_label {
 596     border: solid 1px #F1F1F1;
 597     background: #fff;
 598     display: inline-block;
 599     height: 22px;
 600     padding: 0 6px;
 601     line-height: 22px;
 602     position: absolute;
 603     top: 7px;
 604     right: 6px;
 605     text-align: center;
 606     font-size: 12px;
 607     color: #777;
 608     border-radius: 1px;
 609     z-index: 30;
 610   }
 611
 612   /* fullscreen */
 613   .fullscreen {
 614     background: transparent url(../img/sprites.png) no-repeat -301px -320px;
 615     display: block;
 616     width: 31px;
 617     height: 31px;
 618     text-indent: -9999px;
 619     z-index: 100;
 620     position: absolute;
 621     bottom: 6px;
 622     right: 14px;
 623     cursor: pointer;
 624   }
 625
 626   /* we want editors to fill up all the space available */
 627   .CodeMirror-wrapping {
 628     width: 100%;
 629     height: 100%;
 630   }
 631
 632   /* shim to cover iframes when dragging */
 633   .shim {
 634     display: none;
 635     width: 100%;
 636     height: 100%;
 637     z-index: 1;
 638     position: absolute;
 639     top: 0;
 640     left: 0;
 641   }
 642
 643 /* external resources
 644  ================================================================ */
 645 #sidebar #external-resources-form {
 646   height: 30px;
 647 }
 648
 649   /* place resource button next to input */
 650   #sidebar #external-resources-form #external_resource {
 651     padding-right: 0px;
 652     width: 160px;
 653     float: left;
 654     height: 14px;
 655   }
 656
 657     /* custom style inputs/buttons */
 658     #sidebar #external-resources-form .submit,
 659     #sidebar .submit {
 660       border: none;
 661       border: solid 1px #EDEDED;
 662       float: right;
 663       height: 28px;
 664       width: 28px;
 665       padding: 0;
 666       line-height: 31px;
 667       text-align: center;
 668       outline: none;
 669       color: #333;
 670     }
 671
 672     #sidebar #external-resources-form .submit:hover,
 673     #sidebar .submit:hover {
 674       text-decoration: none;
 675     }
 676
 677     #sidebar .commonButton {
 678       width: 70%;
 679       float: none;
 680       display: block;
 681       line-height: 28px;
 682       text-align: center;
 683       color: #555;
 684       font-size: 12px;
 685       margin-top: 5px;
 686     }
 687
 688
 689 /* share socially
 690  ================================================================ */
 691 #share-social {
 692
 693 }
 694
 695   #share-social li {
 696   }
 697
 698   #actions .actionCont .dropdownCont #share-social a {
 699     text-decoration: none;
 700     margin-left: 5px;
 701     display: inline;
 702   }
 703
 704   #actions .actionCont .dropdownCont #share-social a:hover {
 705     text-decoration: underline;
 706   }
 707
 708   #share-social span {
 709     color: #ccc;
 710   }
 711
 712 /* license text
 713  ================================================================ */
 714 #documentation-info {
 715   margin: 20px 8px 0;
 716   color: #9A9A9A;
 717 }
 718
 719   #documentation-info p {
 720     font-size: 1em;
 721   }
 722
 723   #documentation-info a {
 724     text-decoration: none;
 725   }
 726
 727   #documentation-info a:hover {
 728     text-decoration: underline;
 729   }
 730
 731
 732 /* style the external resources list
 733  ================================================================ */
 734 #sidebar #external_resources_list {
 735 }
 736
 737   #sidebar #external_resources_list li {
 738     padding: 5px 0 3px;
 739     position: relative;
 740   }
 741
 742   #sidebar #external_resources_list li .filename {
 743   }
 744
 745   #sidebar #external_resources_list li .remove {
 746     position: absolute;
 747     top: 7px;
 748     right: 0;
 749     display: block;
 750     text-indent: -9000em;
 751     width: 10px;
 752     height: 10px;
 753     background: url(../img/remove-resources.png) -10px 50% no-repeat;
 754   }
 755
 756   #sidebar #external_resources_list li a.remove:hover {
 757     background: url(../img/remove-resources.png) 0 50% no-repeat;
 758   }
 759
 760   #add_external_resource {
 761   }
 762
 763 /* info box
 764  ================================================================ */
 765 #info {
 766   background: #FEFFE5;
 767   padding: 7px;
 768   border: 1px solid #EBBA95;
 769   font-size: 11px;
 770   color: #C98657;
 771   margin: 7px 8px 10px;
 772   line-height: 130%;
 773   text-shadow: 0 1px 0 #FFF7F4;
 774   position: relative;
 775   display: none;
 776
 777   -moz-border-radius: 2px;
 778   -webkit-border-radius: 2px;
 779 }
 780
 781   #info #info-close {
 782     width: 10px;
 783     height: 10px;
 784     position: absolute;
 785     top: 4px;
 786     right: 4px;
 787     text-indent: -900em;
 788     display: block;
 789     background: url(../img/info-close.png);
 790     overflow: hidden;
 791   }
 792
 793   #info a {
 794     font-weight: bold;
 795     color: #C98657;
 796   }
 797
 798 /* modal window
 799  ================================================================ */
 800 #modal {
 801   display: none;
 802 }
 803
 804 .disqus_thread {
 805   width: 600px;
 806 }
 807
 808   .disqus_thread .modalBody {
 809     max-height: 500px;
 810     min-height: 250px;
 811     overflow: auto;
 812     margin-bottom: 0 !important;
 813   }
 814
 815 .modal_jslint {
 816   width: 500px;
 817 }
 818
 819 .modal_kbd {
 820   width: 500px;
 821 }
 822
 823 .modal_confirmation {
 824   width: 400px;
 825 }
 826
 827   .modal_jslint code,
 828   .modal_Coffee .error,
 829   .modal_jslint .evidence {
 830     padding: 0 2px;
 831     font-family: "Monaco", "Andale Mono", "Lucida Console", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
 832     font-size: .9em;
 833     background: #fffadb;
 834   }
 835
 836     .modal_Coffee .error {
 837         padding: 5px 10px;
 838     }
 839
 840   .modal_jslint #errors {
 841
 842   }
 843
 844     .modal_jslint #errors p {
 845       margin: 2px 0;
 846     }
 847
 848   .modal_jslint p.evidence {
 849     display: block;
 850     margin-bottom: 10px !important;
 851   }
 852
 853
 854 .modalWrap {
 855   padding: 10px;
 856   background: #fff;
 857   z-index: 300;
 858   font-size: 1em;
 859   transition-duration: 0.2s;
 860   transition-property: webkit-transform opacity;
 861   transform: scale(0.94);
 862
 863   -webkit-transition-duration: 0.2s;
 864   -webkit-transition-property: webkit-transform opacity;
 865   -webkit-transform: scale(0.94);
 866
 867   -moz-transition-duration: 0.2s;
 868   -moz-transition-property: moz-transform opacity;
 869   -moz-transform: scale(0.94);
 870
 871   -o-transition-duration: 0.2s;
 872   -o-transition-property: o-transform opacity;
 873   -o-transform: scale(0.94);
 874
 875   -ms-transition-duration: 0.2s;
 876   -ms-transition-property: ms-transform opacity;
 877   -ms-transform: scale(0.94);
 878
 879   -webkit-transform: translateZ(0);
 880   /*-moz-transform: translateZ(0);*/
 881
 882   opacity: 0;
 883   box-shadow: 0 5px 50px rgba(0, 0, 0, 0.3);
 884   border: solid 1px #ACB3B9;
 885 }
 886
 887 .modalWrap.show {
 888   opacity: 1;
 889   transform: scale(1.0);
 890   -webkit-transform: scale(1.0);
 891   -moz-transform: scale(1.0);
 892   -o-transform: scale(1.0);
 893   -ms-transform: scale(1.0);
 894 }
 895
 896   .modalWrap .modalHeading {
 897     position: relative;
 898     height: 50px;
 899   }
 900
 901     .modalWrap .modalHeading .close {
 902       background: url(../img/modal/close.png) 0 0 no-repeat;
 903       width: 15px;
 904       height: 15px;
 905       display: block;
 906       position: absolute;
 907       top: 8px;
 908       right: 0;
 909       text-indent: -9000em;
 910       cursor: pointer;
 911     }
 912
 913     .modalWrap .modalHeading h3 {
 914       font-size: 1.6em;
 915       padding: 6px 0;
 916       cursor: default;
 917     }
 918
 919   .modalWrap .modalBody {
 920     position: relative;
 921   }
 922
 923     .modalWrap .modalBody strong {
 924       font-weight: bold;
 925     }
 926
 927 legend {
 928   display: none;
 929 }
 930
 931 .keyActions {
 932   position: absolute;
 933   bottom: 40px;
 934   left: 8px;
 935   display: block;
 936   padding: 0 0 0 30px;
 937   text-decoration: none;
 938 }
 939
 940   .keyActions:before {
 941     content: '?';
 942     position: absolute;
 943     top: -1px;
 944     left: 0;
 945     display: block;
 946     border: solid 1px #ABABAB;
 947     padding: 0 8px;
 948     border-radius: 2px;
 949     font-family: 'Lucida Grande';
 950     font-size: 10px;
 951     color: #999;
 952   }
 953
 954 .keyActions:hover {
 955   text-decoration: underline;
 956 }
 957
 958 #kbd {
 959 }
 960
 961   #kbd li {
 962     padding: 10px 0;
 963     border-bottom: solid 1px #E6E6E6;
 964   }
 965
 966   #kbd li:last-child {
 967     padding: 10px 0 0;
 968     border-bottom: none;
 969   }
 970
 971   #kbd kbd {
 972     border: solid 1px #ABABAB;
 973     font-size: 10px;
 974     font-family: 'Lucida Grande';
 975     padding: 2px 3px;
 976     border-radius: 3px;
 977     color: #999;
 978   }
 979
 980   #kbd span {
 981     padding-left: 10px;
 982   }
 983
 984 .warningTooltip {
 985   position: absolute;
 986   bottom: 0;
 987   left: 0;
 988   background: rgba(255, 234, 147, 0.9);
 989   font-size: .85em;
 990   line-height: 1.5em;
 991   color: #6c5517;
 992   width: 100%;
 993   z-index: 100;
 994 }
 995
 996   .warningTooltip code,
 997   .warningTooltip strong {
 998     font-weight: bold;
 999   }
1000
1001   .warningTooltip li {
1002     border-top: solid 1px #eddf97;
1003     padding: 5px 8px;
1004   }
1005
1006 .gittip {
1007   margin: 10px;
1008   color: #949494;
1009 }
1010
1011 .gittip iframe {
1012   border: 0;
1013   margin: 0 0 0 5px;
1014   padding: 0;
1015   opacity: 0.6;
1016   vertical-align: middle;
1017 }