theme/bootstrapbase/less/moodle/core.less

   1 /* core.less */
   2
   3 /** Page layout CSS starts **/
   4 .layout-option-noheader #page-header,
   5 .layout-option-nonavbar #page-navbar,
   6 .layout-option-nofooter #page-footer,
   7 .layout-option-nocourseheader .course-content-header,
   8 .layout-option-nocoursefooter .course-content-footer {
   9     display: none;
  10 }
  11
  12 .empty-region-side-pre #block-region-side-pre, // Pre region is empty.
  13 .empty-region-side-post #block-region-side-post, // Post region is empty.
  14 .jsenabled.docked-region-side-post #block-region-side-post, // All post blocks are docked.
  15 .jsenabled.docked-region-side-pre #block-region-side-pre { // All pre blocks are docked.
  16     display: none;
  17 }
  18
  19 // Size of default icons.
  20 @icon-width: 16px;
  21 @icon-height: 16px;
  22 // Size of big icons.
  23 @icon-big-width: 64px;
  24 @icon-big-height: 64px;
  25
  26 /* Default Three Columns - All
  27 ------------------------------*/
  28
  29 .content-only {
  30     #region-main-box,
  31     #region-main {
  32         width: 100%;
  33     }
  34 }
  35 .empty-region-side-pre {
  36     &.used-region-side-post {
  37         #region-main {
  38             width: 100%;
  39         }
  40     }
  41 }
  42 .empty-region-side-post {
  43     &.used-region-side-pre {
  44         #region-main-box {
  45             width: 100%;
  46         }
  47     }
  48 }
  49 .jsenabled {
  50     &.docked-region-side-pre {
  51         &.empty-region-side-pre {
  52             &.used-region-side-post {
  53                 #region-main {
  54                     width: 100%;
  55                 }
  56             }
  57         }
  58     }
  59     &.docked-region-side-post {
  60         &.empty-region-side-post {
  61             &.used-region-side-pre {
  62                 #region-main-box {
  63                     width: 100%;
  64                 }
  65             }
  66         }
  67     }
  68 }
  69 .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
  70 .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
  71     #region-main.span8 {
  72         /** Increase the span size by 1 **/
  73         .fluid-span(9);
  74     }
  75     #block-region-side-pre.span4 {
  76         /** Decrease the span size by 1 **/
  77         .fluid-span(3);
  78     }
  79 }
  80
  81 /** Page layout CSS ends **/
  82
  83 .mdl-left {
  84     text-align: left;
  85 }
  86 .mdl-right {
  87     text-align: right;
  88 }
  89
  90 /*rtl:ignore*/
  91 .text-ltr {
  92     direction: ltr !important;  /* stylelint-disable-line declaration-no-important */
  93 }
  94
  95 #add,
  96 #remove,
  97 .centerpara,
  98 .mdl-align {
  99     text-align: center;
 100 }
 101 a.dimmed,
 102 a.dimmed:link,
 103 a.dimmed:visited,
 104 a.dimmed_text,
 105 a.dimmed_text:link,
 106 a.dimmed_text:visited,
 107 .dimmed_text,
 108 .dimmed_text a,
 109 .dimmed_text a:link,
 110 .dimmed_text a:visited,
 111 .usersuspended,
 112 .usersuspended a,
 113 .usersuspended a:link,
 114 .usersuspended a:visited,
 115 .dimmed_category,
 116 .dimmed_category a {
 117     .muted
 118 }
 119 .unlist,
 120 .unlist li,
 121 .list-unstyled,
 122 .list-unstyled li,
 123 .inline-list,
 124 .inline-list li,
 125 .block .list,
 126 .block .list li,
 127 .section li.activity,
 128 .section li.movehere,
 129 .tabtree li {
 130     list-style: none;
 131     margin: 0;
 132     padding: 0;
 133 }
 134 .inline,
 135 .inline-list li {
 136     display: inline;
 137 }
 138 .notifytiny {
 139     font-size: @fontSizeMini;
 140 }
 141 .notifytiny li,
 142 .notifytiny td {
 143     font-size: 100%;
 144 }
 145 .red,
 146 .notifyproblem {
 147     color: @errorText;
 148 }
 149 .green,
 150 .notifysuccess {
 151     color: @successText;
 152 }
 153 .highlight {
 154     background: @infoBackground;
 155 }
 156 .reportlink {
 157     text-align: right;
 158 }
 159 a.autolink.glossary:hover {
 160     cursor: help;
 161 }
 162 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
 163 .collapsibleregioncaption {
 164     white-space: nowrap;
 165 }
 166 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
 167     cursor: pointer;
 168 }
 169 .collapsibleregioncaption img {
 170     vertical-align: middle;
 171 }
 172
 173 .jsenabled .hiddenifjs {
 174     display: none;
 175 }
 176 .visibleifjs {
 177     display: none;
 178 }
 179 .jsenabled .visibleifjs {
 180     display: inline;
 181 }
 182 .jsenabled .collapsibleregion {
 183     overflow: hidden;
 184 }
 185 .jsenabled .collapsed .collapsibleregioninner {
 186     visibility: hidden;
 187 }
 188 .collapsible-actions {
 189     display: none;
 190     text-align: right;
 191 }
 192 .jsenabled .collapsible-actions {
 193     display: block;
 194 }
 195 .collapsible-actions .collapseexpand {
 196     padding-left: 20px;
 197     background: url([[pix:t/collapsed]]) 2px center no-repeat;
 198 }
 199 /*rtl:raw:
 200 .collapsible-actions .collapseexpand {
 201     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
 202 }
 203 */
 204 .collapsible-actions .collapse-all {
 205     background-image: url([[pix:t/expanded]]);
 206 }
 207 .yui-overlay .yui-widget-bd {
 208     background-color: #ffee69;
 209     border: 1px solid #a6982b;
 210     border-top-color: #d4c237;
 211     color: #000;
 212     left: 0;
 213     padding: 2px 5px;
 214     position: relative;
 215     top: 0;
 216     z-index: 1;
 217 }
 218 .clearer {
 219     background: transparent;
 220     border-width: 0;
 221     clear: both;
 222     display: block;
 223     height: 1px;
 224     margin: 0;
 225     padding: 0;
 226 }
 227 .bold,
 228 .warning,
 229 .errorbox .title,
 230 .pagingbar .title,
 231 .pagingbar .thispage {
 232     font-weight: bold;
 233 }
 234 img.userpicture {
 235     margin-right: 5px;
 236 }
 237 img.resize {
 238     height: 1em;
 239     width: 1em;
 240 }
 241 .block img.resize,
 242 .breadcrumb img.resize {
 243     height: 0.9em;
 244     width: 0.8em;
 245 }
 246 /* Icon styles */
 247 img.icon {
 248     height: @icon-height;
 249     vertical-align: text-bottom;
 250     width: @icon-width;
 251     padding-right: 6px;
 252     &.iconsize-big {
 253         width: @icon-big-width;
 254         height: @icon-big-height;
 255     }
 256 }
 257 img.iconsmall {
 258     height: 12px;
 259     margin-right: 3px;
 260     vertical-align: middle;
 261     width: 12px;
 262 }
 263 img.iconhelp,
 264 .helplink img {
 265     height: 16px;
 266     padding-left: 3px;
 267     vertical-align: text-bottom;
 268     width: 16px;
 269 }
 270 h1 img.iconhelp,
 271 h1 img.icon,
 272 h2 img.iconhelp,
 273 h2 img.icon,
 274 h3 img.iconhelp,
 275 h3 img.icon,
 276 h4 img.iconhelp,
 277 h4 img.icon,
 278 h5 img.iconhelp,
 279 h5 img.icon,
 280 h6 img.iconhelp,
 281 h6 img.icon {
 282     vertical-align: middle;
 283     padding: 4px;
 284 }
 285 img.iconlarge {
 286     height: 24px;
 287     width: 24px;
 288     vertical-align: middle;
 289 }
 290 img.iconsort {
 291     vertical-align: text-bottom;
 292     padding-left: .3em;
 293     margin-bottom: .15em;
 294 }
 295 img.icontoggle {
 296     height: 17px;
 297     vertical-align: middle;
 298     width: 50px;
 299 }
 300 img.iconkbhelp {
 301     height: 17px;
 302     width: 49px;
 303 }
 304 img.icon-pre {
 305     padding-right: 3px;
 306     padding-left: 0;
 307 }
 308 img.icon-post {
 309     padding-left: 3px;
 310     padding-right: 0;
 311 }
 312 .sitelink img {
 313     width: 112px;
 314 }
 315 .boxaligncenter {
 316     margin-left: auto;
 317     margin-right: auto;
 318 }
 319 .boxalignright {
 320     margin-left: auto;
 321     margin-right: 0;
 322 }
 323 .boxalignleft {
 324     margin-left: 0;
 325     margin-right: auto;
 326 }
 327 .boxwidthnarrow {
 328     width: 30%;
 329 }
 330 .boxwidthnormal {
 331     width: 50%;
 332 }
 333 .boxwidthwide {
 334     width: 80%;
 335 }
 336 .headermain {
 337     font-weight: bold;
 338 }
 339 #maincontent {
 340     display: block;
 341     height: 1px;
 342     overflow: hidden;
 343 }
 344 img.uihint {
 345     cursor: help;
 346 }
 347 #addmembersform table {
 348     margin-left: auto;
 349     margin-right: auto;
 350 }
 351 table.flexible .emptyrow {
 352     display: none;
 353 }
 354 img.emoticon {
 355     vertical-align: middle;
 356     width: 15px;
 357     height: 15px;
 358 }
 359 form.popupform,
 360 form.popupform div {
 361     display: inline;
 362 }
 363 .arrow_button input {
 364     overflow: hidden;
 365 }
 366 .action-icon img.smallicon {
 367     vertical-align: text-bottom;
 368     margin: 0 0.3em;
 369 }
 370
 371 /** The 1-pixel padding is there to avoid phantom scroll bars on OS X (FF, Safari and Chrome)**/
 372 .no-overflow {
 373     overflow: auto;
 374     padding-bottom: 1px;
 375 }
 376 .pagelayout-report .no-overflow {
 377     overflow: visible;
 378 }
 379 // Minimum height required for a menu in a table inside a scrollable div.
 380 .no-overflow > .generaltable {
 381     margin-bottom: 0;
 382     min-height: 10em;
 383 }
 384 // Accessibility features
 385
 386 // Accessibility: text 'seen' by screen readers but not visual users.
 387 .accesshide {
 388     position: absolute;
 389     left: -10000px;
 390     font-weight: normal;
 391     font-size: 1em;
 392 }
 393 span.hide,
 394 div.hide {
 395     display: none;
 396 }
 397 // Accessibility: Skip block link, for keyboard-only users.
 398 a.skip-block,
 399 a.skip {
 400     position: absolute;
 401     top: -1000em;
 402     font-size: 0.85em;
 403     text-decoration: none;
 404 }
 405 a.skip-block:focus,
 406 a.skip-block:active,
 407 a.skip:focus,
 408 a.skip:active {
 409     position: static;
 410     display: block;
 411 }
 412 .skip-block-to {
 413     display: block;
 414     height: 1px;
 415     overflow: hidden;
 416 }
 417 // Blogs
 418 .addbloglink {
 419     text-align: center;
 420 }
 421 .blog_entry .audience {
 422     text-align: right;
 423     padding-right: 4px;
 424 }
 425 .blog_entry .tags {
 426     margin-top: 15px;
 427 }
 428 .blog_entry .tags .action-icon img.smallicon {
 429     height: 16px;
 430     width: 16px;
 431 }
 432 .blog_entry .content {
 433     margin-left: 43px;
 434 }
 435 // Group
 436 #doc-contents h1 {
 437     margin: 1em 0 0 0;
 438 }
 439 #doc-contents ul {
 440     margin: 0;
 441     padding: 0;
 442     width: 90%;
 443 }
 444 #doc-contents ul li {
 445     list-style-type: none;
 446 }
 447 .groupmanagementtable td {
 448     vertical-align: top;
 449 }
 450 .groupmanagementtable #existingcell,
 451 .groupmanagementtable #potentialcell {
 452     width: 42%;
 453 }
 454 .groupmanagementtable #buttonscell {
 455     width: 16%;
 456 }
 457 .groupmanagementtable #buttonscell p.arrow_button input {
 458     width: auto;
 459     min-width: 80%;
 460     margin: 0 auto;
 461 }
 462 .groupmanagementtable #removeselect_wrapper,
 463 .groupmanagementtable #addselect_wrapper {
 464     width: 100%;
 465 }
 466 .groupmanagementtable #removeselect_wrapper label,
 467 .groupmanagementtable #addselect_wrapper label {
 468     font-weight: normal;
 469 }
 470 #group-usersummary {
 471     width: 14em;
 472 }
 473 .groupselector {
 474     margin-top: 3px;
 475     margin-bottom: 3px;
 476     display: inline-block;
 477 }
 478 .groupselector label {
 479     display: inline-block;
 480 }
 481 // Data format selector
 482 .dataformatselector {
 483     margin: 1em 0;
 484 }
 485 .dataformatselector label {
 486     display: inline-block;
 487     margin: 0 5px 10px 0;
 488     line-height: 30px;
 489     vertical-align: top;
 490 }
 491
 492 // Login
 493 .loginbox {
 494     margin: 15px;
 495     overflow: visible;
 496 }
 497 .loginbox.twocolumns {
 498     margin: 15px;
 499 }
 500 .loginbox h2,
 501 .loginbox .subcontent {
 502     margin: 5px;
 503     padding: 10px;
 504     text-align: center;
 505 }
 506 .loginbox .loginpanel .desc {
 507     margin: 0;
 508     padding: 0;
 509     margin-bottom: 5px;
 510     margin-top: 15px;
 511 }
 512 .loginbox .loginsub {
 513     margin-left: 0;
 514     margin-right: 0;
 515 }
 516 .loginbox .guestsub,
 517 .loginbox .forgotsub {
 518     margin: 5px 12%;
 519 }
 520 .loginbox .loginform {
 521     margin-top: 1em;
 522     text-align: left;
 523 }
 524 .loginbox .loginform .form-label {
 525     float: left;
 526     text-align: right;
 527     width: 49%;
 528     white-space: nowrap;
 529 }
 530 .loginbox .loginform .form-input {
 531     float: right;
 532     width: 50%;
 533 }
 534 .loginbox .loginform .form-input input {
 535     width: 6em;
 536 }
 537 .loginbox .signupform {
 538     margin-top: 1em;
 539     text-align: center;
 540 }
 541 .loginbox.twocolumns .loginpanel,
 542 .loginbox.twocolumns .signuppanel {
 543     width: 48%;
 544     border: 0;
 545     margin: 0;
 546     padding: 0;
 547     .box-sizing(border-box);
 548     display: block;
 549     float: left;
 550     margin-left: 2.76243%;
 551     min-height: 30px;
 552     margin-bottom: -2000px;
 553     padding-bottom: 2000px;
 554 }
 555 .loginbox .potentialidp {
 556     margin-bottom: 0.3em;
 557 }
 558 .loginbox .potentialidp .smallicon {
 559     vertical-align: text-bottom;
 560     margin: 0 .3em;
 561 }
 562
 563 // Notes
 564 .notepost {
 565     margin-bottom: 1em;
 566 }
 567 .notepost .userpicture {
 568     float: left;
 569 }
 570 .notepost .content,
 571 .notepost .footer {
 572     clear: both;
 573 }
 574 .notesgroup {
 575     margin-left: 20px;
 576 }
 577
 578 // My Moodle
 579 .path-my .coursebox .overview {
 580     margin: 15px 30px 10px 30px;
 581 }
 582 .path-my .coursebox .info {
 583     float: none;
 584     margin: 0;
 585 }
 586
 587 // Modules
 588 .mod_introbox {
 589     padding: 10px;
 590 }
 591 table.mod_index {
 592     width: 100%;
 593 }
 594
 595 // Comments
 596 .comment-ctrl {
 597     font-size: 12px;
 598     display: none;
 599     margin: 0;
 600     padding: 0;
 601 }
 602 .comment-ctrl h5 {
 603     margin: 0;
 604     padding: 5px;
 605 }
 606 .comment-area {
 607     max-width: 400px;
 608     padding: 5px;
 609 }
 610 .comment-area textarea {
 611     width: 100%;
 612     overflow: auto;
 613     &.fullwidth {
 614         -webkit-box-sizing: border-box;
 615         -moz-box-sizing: border-box;
 616         box-sizing: border-box;
 617     }
 618 }
 619 .comment-area .fd {
 620     text-align: right;
 621 }
 622 .comment-meta span {
 623     color: gray;
 624 }
 625 .comment-link img {
 626     vertical-align: text-bottom;
 627 }
 628 .comment-list {
 629     font-size: 11px;
 630     overflow: auto;
 631     list-style: none;
 632     padding: 0;
 633     margin: 0;
 634 }
 635 .comment-list li {
 636     margin: 2px;
 637     list-style: none;
 638     margin-bottom: 5px;
 639     clear: both;
 640     padding: .3em;
 641     position: relative;
 642 }
 643 .comment-list li.first {
 644     display: none;
 645 }
 646 .comment-paging {
 647     text-align: center;
 648 }
 649 .comment-paging .pageno {
 650     padding: 2px;
 651 }
 652 .comment-paging .curpage {
 653     border: 1px solid #ccc;
 654 }
 655 .comment-message .picture {
 656     width: 20px;
 657     float: left;
 658 }
 659 .comment-message .text {
 660     margin: 0;
 661     padding: 0;
 662 }
 663 .comment-message .text p {
 664     padding: 0;
 665     margin: 0 18px 0 0;
 666 }
 667 .comment-delete {
 668     position: absolute;
 669     top: 0;
 670     right: 0;
 671     margin: .3em;
 672 }
 673 .comment-report-selectall {
 674     display: none;
 675 }
 676 .comment-link {
 677     display: none;
 678 }
 679 .jsenabled .comment-link {
 680     display: block;
 681 }
 682 .jsenabled .showcommentsnonjs {
 683     display: none;
 684 }
 685 .jsenabled .comment-report-selectall {
 686     display: inline;
 687 }
 688 /**
 689 * Completion progress report
 690 */
 691 .completion-expired {
 692     background: @errorBackground;
 693 }
 694 .completion-expected {
 695     font-size: @fontSizeMini;
 696 }
 697 .completion-sortchoice,
 698 .completion-identifyfield {
 699     font-size: @fontSizeMini;
 700     vertical-align: bottom;
 701 }
 702 .completion-progresscell {
 703     text-align: right;
 704 }
 705 .completion-expired .completion-expected {
 706     font-weight: bold;
 707 }
 708 /**
 709 * Tags
 710 */
 711 img.user-image {
 712     height: 100px;
 713     width: 100px;
 714 }
 715 #tag-search-box {
 716     text-align: center;
 717     margin: 10px auto;
 718 }
 719
 720 .path-tag .tag-index-items .tagarea {
 721     border: 1px solid #e3e3e3;
 722     border-radius: 4px;
 723     padding: 10px;
 724     margin-top: 10px;
 725 }
 726
 727 .path-tag .tag-index-items .tagarea h3 {
 728     display: block;
 729     padding: 3px 0 10px 0;
 730     margin: 0;
 731     font-size: 1.1em;
 732     font-weight: bold;
 733     line-height: 20px;
 734     color: #999;
 735     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 736     text-transform: uppercase;
 737     word-wrap: break-word;
 738     border-bottom: solid 1px #e3e3e3;
 739     margin-bottom: 10px;
 740 }
 741
 742 .path-tag .tagarea .controls,
 743 .path-tag .tagarea .taggeditems {
 744     .clearfix();
 745 }
 746 .path-tag .tagarea .controls,
 747 .path-tag .tag-backtoallitems {
 748     text-align: center;
 749 }
 750 .path-tag .tagarea .controls .gotopage.nextpage {
 751     float: right;
 752 }
 753 .path-tag .tagarea .controls .gotopage.prevpage {
 754     float: left;
 755 }
 756 .path-tag .tagarea .controls .exclusivemode {
 757     display: inline-block;
 758 }
 759 .path-tag .tagarea .controls.controls-bottom {
 760     margin-top: 5px;
 761 }
 762 .path-tag .tagarea .controls .gotopage.nextpage::after {
 763     /*rtl:remove*/
 764     content: "»";
 765     /*rtl:raw:
 766     content: "«";
 767     */
 768     padding-right: 5px;
 769     padding-left: 5px;
 770 }
 771 .path-tag .tagarea .controls .gotopage.prevpage::before {
 772     /*rtl:remove*/
 773     content: "«";
 774     /*rtl:raw:
 775     content: "»";
 776     */
 777     padding-right: 5px;
 778     padding-left: 5px;
 779 }
 780
 781 span.flagged-tag,
 782 tr.flagged-tag,
 783 span.flagged-tag a,
 784 tr.flagged-tag a {
 785     color: @errorText;
 786 }
 787 .tag-management-table td,
 788 .tag-management-table th {
 789     vertical-align: middle;
 790     padding: 4px;
 791 }
 792 .tag-management-table .inplaceeditable.inplaceeditingon input {
 793     width: 150px;
 794 }
 795 .path-admin-tag .addstandardtags {
 796     float: right;
 797     img {
 798         margin: 0 5px;
 799     }
 800 }
 801 .path-tag .tag-relatedtags {
 802     padding-top: 10px;
 803 }
 804 .path-tag .tag-management-box {
 805     text-align: right;
 806 }
 807 .path-tag .tag-index-toc {
 808     padding: 10px;
 809     text-align: center;
 810 }
 811 .path-tag .tag-index-toc li,
 812 .path-tag .tag-management-box li {
 813     margin-left: 5px;
 814     margin-right: 5px;
 815 }
 816 .path-tag .tag-management-box li a.edittag {
 817     background-image: url([[pix:moodle|i/settings]]);
 818 }
 819 .path-tag .tag-management-box li a.flagasinappropriate {
 820     background-image: url([[pix:moodle|i/flagged]]);
 821 }
 822 .path-tag .tag-management-box li a.removefrommyinterests {
 823     background-image: url([[pix:moodle|t/delete]]);
 824 }
 825 .path-tag .tag-management-box li a.addtomyinterests {
 826     background-image: url([[pix:moodle|t/add]]);
 827 }
 828 .path-tag .tag-management-box li a {
 829     background-repeat: no-repeat;
 830     background-position: left;
 831     padding-left: 17px;
 832 }
 833 .tag_feed.media-list .media .itemimage {
 834     float: left;
 835 }
 836 .tag_feed.media-list .media .itemimage img {
 837     height: 35px;
 838     width: 35px;
 839 }
 840 .tag_feed.media-list .media .media-body {
 841     padding-right: 10px;
 842     padding-left: 10px;
 843 }
 844 .tag_feed .media .muted a {
 845     .muted();
 846 }
 847 .tag_cloud {
 848     text-align: center;
 849 }
 850 .tag_cloud .inline-list li {
 851     padding: 0 0.2em;
 852 }
 853 .tag_cloud .tag_overflow {
 854     margin-top: 1em;
 855     font-style: italic;
 856 }
 857 .tag_cloud .s20 {
 858     font-size: 2.7em;
 859 }
 860 .tag_cloud .s19 {
 861     font-size: 2.6em;
 862 }
 863 .tag_cloud .s18 {
 864     font-size: 2.5em;
 865 }
 866 .tag_cloud .s17 {
 867     font-size: 2.4em;
 868 }
 869 .tag_cloud .s16 {
 870     font-size: 2.3em;
 871 }
 872 .tag_cloud .s15 {
 873     font-size: 2.2em;
 874 }
 875 .tag_cloud .s14 {
 876     font-size: 2.1em;
 877 }
 878 .tag_cloud .s13 {
 879     font-size: 2em;
 880 }
 881 .tag_cloud .s12 {
 882     font-size: 1.9em;
 883 }
 884 .tag_cloud .s11 {
 885     font-size: 1.8em;
 886 }
 887 .tag_cloud .s10 {
 888     font-size: 1.7em;
 889 }
 890 .tag_cloud .s9 {
 891     font-size: 1.6em;
 892 }
 893 .tag_cloud .s8 {
 894     font-size: 1.5em;
 895 }
 896 .tag_cloud .s7 {
 897     font-size: 1.4em;
 898 }
 899 .tag_cloud .s6 {
 900     font-size: 1.3em;
 901 }
 902 .tag_cloud .s5 {
 903     font-size: 1.2em;
 904 }
 905 .tag_cloud .s4 {
 906     font-size: 1.1em;
 907 }
 908 .tag_cloud .s3 {
 909     font-size: 1em;
 910 }
 911 .tag_cloud .s2 {
 912     font-size: 0.9em;
 913 }
 914 .tag_cloud .s1 {
 915     font-size: 0.8em;
 916 }
 917 .tag_cloud .s0 {
 918     font-size: 0.7em;
 919 }
 920 .tag_list ul {
 921     display: inline;
 922 }
 923 .tag_list.hideoverlimit .overlimit {
 924     display: none;
 925 }
 926 .tag_list .tagmorelink {
 927     display: none;
 928 }
 929 .tag_list.hideoverlimit .tagmorelink {
 930     display: inline;
 931 }
 932 .tag_list.hideoverlimit .taglesslink {
 933     display: none;
 934 }
 935
 936 /**
 937 * Web Service
 938 */
 939 #webservice-doc-generator td {
 940     text-align: left;
 941     border: 0 solid black;
 942 }
 943
 944 /**
 945 * Registration
 946 */
 947 #page-admin-registration-register .registration_textfield {
 948     width: 300px;
 949 }
 950 /**
 951 * Enrol
 952 */
 953 .userenrolment {
 954     width: 100%;
 955     border-collapse: collapse;
 956 }
 957 .userenrolment tr {
 958     vertical-align: top;
 959 }
 960 .userenrolment td {
 961     padding: 0;
 962     height: 41px;
 963 }
 964 .userenrolment .subfield {
 965     margin-right: 5px;
 966 }
 967 .userenrolment .col_userdetails .subfield {
 968     margin-left: 40px;
 969 }
 970 .userenrolment .col_userdetails .subfield_picture {
 971     float: left;
 972     margin-left: 0;
 973 }
 974 .userenrolment .col_lastseen {
 975     width: 150px;
 976 }
 977 .userenrolment .col_role {
 978     width: 262px;
 979 }
 980 .userenrolment .col_role .roles,
 981 .userenrolment .col_group .groups {
 982     margin-right: 30px;
 983 }
 984 .userenrolment .col_role .role {
 985     float: left;
 986     padding: 0 3px 3px;
 987     margin: 0 3px 3px;
 988     white-space: nowrap;
 989 }
 990 .userenrolment .col_group .group {
 991     float: left;
 992     padding: 3px;
 993     margin: 3px;
 994     white-space: nowrap;
 995 }
 996 .userenrolment .col_role .role a,
 997 .userenrolment .col_group .group a {
 998     margin-left: 3px;
 999     cursor: pointer;
1000 }
1001 .userenrolment .col_role .addrole,
1002 .userenrolment .col_group .addgroup {
1003     float: right;
1004     padding: 3px;
1005     margin: 3px;
1006     > a:hover {
1007         border-bottom: 1px solid #666;
1008     }
1009 }
1010 .userenrolment .col_role .addrole img,
1011 .userenrolment .col_group .addgroup img {
1012     vertical-align: baseline;
1013 }
1014
1015 .userenrolment .hasAllRoles .col_role .addrole {
1016     display: none;
1017 }
1018
1019 .userenrolment .col_enrol .enrolment {
1020     float: left;
1021     padding: 0 3px 3px;
1022     margin: 0 3px 3px;
1023 }
1024 .userenrolment .col_enrol .enrolment a {
1025     float: right;
1026     margin-left: 3px;
1027 }
1028 #page-enrol-users {
1029     .enrol_user_buttons {
1030         float: right;
1031         .enrolusersbutton {
1032             display: inline;
1033             div,
1034             form {
1035                 display: inline;
1036                 margin-right: 0;
1037             }
1038         }
1039     }
1040     #filterform {
1041         .well;
1042         .well-small;
1043         display: inline-block;
1044         .fitem {
1045             display: inline-block;
1046             line-height: @baseLineHeight * 2;
1047             margin-right: .3em;
1048             white-space: nowrap;
1049             label {
1050                 display: inline;
1051                 line-height: @baseLineHeight;
1052                 padding-right: .3em;
1053             }
1054             :before,
1055             :after {
1056                 display: inline;
1057             }
1058         }
1059         div,
1060         fieldset {
1061             display: inline;
1062             float: none;
1063             clear: none;
1064             width: auto;
1065             margin: 0;
1066         }
1067         select,
1068         .ftext input {
1069             width: 7em;
1070         }
1071         input,
1072         select {
1073             margin-bottom: 0;
1074         }
1075     }
1076     .user-enroller-panel .uep-search-results .user .details {
1077         width: 237px;
1078     }
1079     .user-enroller-panel .uep-search-results .cohort .details {
1080         width: 237px;
1081     }
1082 }
1083
1084 #page-enrol-users .enrol-users-page-action input {
1085     margin-left: 0;
1086 }
1087
1088 .corelightbox {
1089     background-color: #ccc;
1090     position: absolute;
1091     top: 0;
1092     left: 0;
1093     width: 100%;
1094     height: 100%;
1095     text-align: center;
1096 }
1097 .corelightbox img {
1098     position: fixed;
1099     top: 50%;
1100     left: 50%;
1101 }
1102
1103 .mod-indent-outer {
1104     display: table;
1105 }
1106 .mod-indent {
1107     display: table-cell;
1108 }
1109 .label .mod-indent {
1110     float: left;
1111     padding-top: 20px;
1112 }
1113
1114 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1115 @mod-indent-size: 30px;
1116 @mod-indent-levels: 16;
1117 .mod-indent-generate(@n, @i: 1) when (@i =< @n) {
1118     .mod-indent-@{i} {
1119         width: (@i * @mod-indent-size);
1120     }
1121     .mod-indent-generate(@n, (@i + 1));
1122 }
1123 .mod-indent-generate(@n, @i: 1) when (@i = @n) {
1124     .mod-indent-huge {
1125         width: (@i * @mod-indent-size);
1126     }
1127 }
1128 .mod-indent-generate(@mod-indent-levels);
1129
1130 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1131 .resourcecontent .mediaplugin_mp3 object {
1132     height: 25px;
1133     width: 600px;
1134 }
1135 .resourcecontent audio.mediaplugin_html5audio {
1136     width: 600px;
1137 }
1138 /** Large resource images should avoid hidden overflow **/
1139 .resourceimage {
1140     max-width: 100%;
1141 }
1142 /* Audio player size in 'inline' mode (can only change width, as above) */
1143 .mediaplugin_mp3 object {
1144     height: 15px;
1145     width: 300px;
1146 }
1147 audio.mediaplugin_html5audio {
1148     width: 300px;
1149 }
1150 /* TinyMCE moodle media preview frame should not have padding */
1151 .core_media_preview.pagelayout-embedded #content {
1152     padding: 0;
1153 }
1154 .core_media_preview.pagelayout-embedded #maincontent {
1155     height: 0;
1156 }
1157 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1158     padding: 0;
1159     margin: 0;
1160     min-width: 0;
1161     background: none;
1162 }
1163 /** Fix YUI 2 Treeview for Right to left languages **/
1164 .dir-rtl .ygtvtn,
1165 .dir-rtl .ygtvtm,
1166 .dir-rtl .ygtvtmh,
1167 .dir-rtl .ygtvtmhh,
1168 .dir-rtl .ygtvtp,
1169 .dir-rtl .ygtvtph,
1170 .dir-rtl .ygtvtphh,
1171 .dir-rtl .ygtvln,
1172 .dir-rtl .ygtvlm,
1173 .dir-rtl .ygtvlmh,
1174 .dir-rtl .ygtvlmhh,
1175 .dir-rtl .ygtvlp,
1176 .dir-rtl .ygtvlph,
1177 .dir-rtl .ygtvlphh,
1178 .dir-rtl .ygtvdepthcell,
1179 .dir-rtl .ygtvok,
1180 .dir-rtl .ygtvok:hover,
1181 .dir-rtl .ygtvcancel,
1182 .dir-rtl .ygtvcancel:hover {
1183     width: 18px;
1184     height: 22px;
1185     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1186     background-repeat: no-repeat;
1187     cursor: pointer;
1188 }
1189 .dir-rtl .ygtvtn {
1190     background-position: 0 -5600px;
1191 }
1192 .dir-rtl .ygtvtm {
1193     background-position: 0 -4000px;
1194 }
1195 .dir-rtl .ygtvtmh,
1196 .dir-rtl .ygtvtmhh {
1197     background-position: 0 -4800px;
1198 }
1199 .dir-rtl .ygtvtp {
1200     background-position: 0 -6400px;
1201 }
1202 .dir-rtl .ygtvtph,
1203 .dir-rtl .ygtvtphh {
1204     background-position: 0 -7200px;
1205 }
1206 .dir-rtl .ygtvln {
1207     background-position: 0 -1600px;
1208 }
1209 .dir-rtl .ygtvlm {
1210     background-position: 0 0;
1211 }
1212 .dir-rtl .ygtvlmh,
1213 .dir-rtl .ygtvlmhh {
1214     background-position: 0 -800px;
1215 }
1216 .dir-rtl .ygtvlp {
1217     background-position: 0 -2400px;
1218 }
1219 .dir-rtl .ygtvlph,
1220 .dir-rtl .ygtvlphh {
1221     background-position: 0 -3200px;
1222 }
1223 .dir-rtl .ygtvdepthcell {
1224     background-position: 0 -8000px;
1225 }
1226 .dir-rtl .ygtvok {
1227     background-position: 0 -8800px;
1228 }
1229 .dir-rtl .ygtvok:hover {
1230     background-position: 0 -8844px;
1231 }
1232 .dir-rtl .ygtvcancel {
1233     background-position: 0 -8822px;
1234 }
1235 .dir-rtl .ygtvcancel:hover {
1236     background-position: 0 -8866px;
1237 }
1238 .dir-rtl.yui-skin-sam .yui-panel .hd {
1239     text-align: right;
1240 }
1241 .dir-rtl .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
1242     text-align: right;
1243 }
1244 /** Fix TinyMCE editor right to left **/
1245 .dir-rtl .clearlooks2.ie9 .mceAlert .mceMiddle span,
1246 .dir-rtl .clearlooks2 .mceConfirm .mceMiddle span {
1247     top: 44px;
1248 }
1249 .dir-rtl .o2k7Skin table,
1250 .dir-rtl .o2k7Skin tbody,
1251 .dir-rtl .o2k7Skin a,
1252 .dir-rtl .o2k7Skin img,
1253 .dir-rtl .o2k7Skin tr,
1254 .dir-rtl .o2k7Skin div,
1255 .dir-rtl .o2k7Skin td,
1256 .dir-rtl .o2k7Skin iframe,
1257 .dir-rtl .o2k7Skin span,
1258 .dir-rtl .o2k7Skin *,
1259 .dir-rtl .o2k7Skin .mceText,
1260 .dir-rtl .o2k7Skin .mceListBox .mceText {
1261     text-align: right;
1262 }
1263 .path-rating .ratingtable {
1264     width: 100%;
1265     margin-bottom: 1em;
1266 }
1267 .path-rating .ratingtable th.rating {
1268     width: 100%;
1269 }
1270 .path-rating .ratingtable td.rating,
1271 .path-rating .ratingtable td.time {
1272     white-space: nowrap;
1273     text-align: center;
1274 }
1275
1276 .initialbar {
1277
1278     overflow: auto;
1279
1280     .initialbarlabel {
1281         display: inline-block;
1282         width: 6em;
1283         float: left;
1284         overflow: hidden;
1285         text-overflow: ellipsis;
1286         white-space: nowrap;
1287     }
1288
1289     .initialbarall {
1290         float: left;
1291         width: 4em;
1292         margin-bottom: 2px;
1293         overflow: hidden;
1294         text-overflow: ellipsis;
1295         white-space: nowrap;
1296     }
1297
1298     .initialbargroups {
1299         float: left;
1300     }
1301
1302     .initialbargroup {
1303         float: left;
1304         display: inline-block;
1305         white-space: nowrap;
1306         margin: 0;
1307         padding: 0;
1308
1309         li {
1310             float: left;
1311             list-style: none;
1312         }
1313     }
1314
1315     .letter {
1316         display: inline-block;
1317         height: 1.35em;
1318         min-width: 1.35em;
1319         text-align: center;
1320
1321         color: @linkColor;
1322         background: @paginationBackground;
1323         border-width: 1px;
1324         border-color: @paginationBorder;
1325         border-style: solid;
1326     }
1327     .letter:hover,
1328     .letter.active {
1329         color: white;
1330         background-color: @linkColor;
1331     }
1332
1333 }
1334
1335 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1336 .moodle-dialogue-base .moodle-dialogue-lightbox {
1337     background-color: #aaa;
1338 }
1339 // Prevent adding backdrops to popups in popups.
1340 .pagelayout-popup {
1341     .moodle-dialogue-base {
1342         .moodle-dialogue-lightbox {
1343             background-color: transparent;
1344         }
1345     }
1346 }
1347 .moodle-dialogue-base .hidden,
1348 .moodle-dialogue-base .moodle-dialogue-hidden {
1349     display: none;
1350 }
1351 .no-scrolling {
1352     overflow: hidden;
1353 }
1354 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1355     left: 0;
1356     top: 0;
1357     right: 0;
1358     bottom: -50px;
1359     position: fixed;
1360 }
1361 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1362     overflow: auto;
1363 }
1364 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1365     width: 28px;
1366     height: 16px;
1367     background-size: 100%;
1368 }
1369 .moodle-dialogue-base .moodle-dialogue {
1370     padding: 0;
1371     margin: 0;
1372     background: none;
1373     border: none;
1374     z-index: 600;
1375     outline: #000 dotted 0;
1376 }
1377 .moodle-dialogue-base .moodle-dialogue-wrap {
1378     margin-top: -3px;
1379     margin-left: -3px;
1380     background-color: #fff;
1381     border: 1px solid #ccc;
1382     .border-radius(10px);
1383     .box-shadow(5px 5px 20px 0 #666);
1384 }
1385 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd,
1386 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1387     margin: 0;
1388     padding: 5px;
1389     font-size: 12px;
1390     font-weight: normal;
1391     letter-spacing: 1px;
1392     color: #333;
1393     text-align: center;
1394     text-shadow: 1px 1px 1px #fff;
1395     .border-radius(10px 10px 0 0);
1396     border-bottom: 1px solid #bbb;
1397     background: #ccc;
1398     #gradient > .vertical(#fff, #ccc);
1399     filter: none;
1400 }
1401 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1402     padding: 0;
1403     display: inline;
1404     font-size: 100%;
1405     font-weight: bold;
1406 }
1407 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1408     padding: 5px;
1409 }
1410 .moodle-dialogue-base .closebutton {
1411     width: 25px;
1412     height: 15px;
1413     float: right;
1414     display: inline-block;
1415     cursor: pointer;
1416     padding: 0;
1417     background-image: url([[pix:theme|sprite]]);
1418     background-repeat: no-repeat;
1419     border-style: none;
1420 }
1421 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1422     padding: 1em;
1423     line-height: 2em;
1424     color: #555;
1425     font-size: 12px;
1426 }
1427 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-content {
1428     padding: 0;
1429     background: #fff;
1430 }
1431
1432 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd {
1433     padding: 10px;
1434     font-size: 16px;
1435 }
1436
1437 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1438     overflow: auto;
1439     position: absolute;
1440     top: 0;
1441     bottom: 50px;
1442     left: 0;
1443     right: 0;
1444     margin: 0;
1445     border: 0;
1446 }
1447 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd,
1448 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-wrap {
1449     border-radius: 0;
1450 }
1451 .moodle-dialogue-confirm .confirmation-dialogue {
1452     text-align: center;
1453 }
1454 .moodle-dialogue-confirm .confirmation-dialogue input {
1455     text-align: center;
1456 }
1457 .moodle-dialogue-exception .moodle-exception-message {
1458     text-align: center;
1459 }
1460 .moodle-dialogue-exception .moodle-exception-param label {
1461     font-weight: bold;
1462 }
1463 .moodle-dialogue-exception .param-stacktrace label {
1464     background-color: #eee;
1465     border: 1px solid #ccc;
1466     border-bottom-width: 0;
1467 }
1468 .moodle-dialogue-exception .param-stacktrace pre {
1469     border: 1px solid #ccc;
1470     background-color: #fff;
1471 }
1472 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1473     color: navy;
1474     font-size: @fontSizeSmall;
1475 }
1476 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1477     color: @errorText;
1478     font-size: @fontSizeSmall;
1479 }
1480 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1481     color: #333;
1482     font-size: 90%;
1483     border-bottom: 1px solid #eee;
1484 }
1485 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1486     padding: 0;
1487     margin: 0.7em 1em;
1488     text-align: right;
1489     background-color: #fff;
1490     font-size: 12px;
1491 }
1492 .moodle-dialogue-confirm .confirmation-message {
1493     margin: 0.5em 1em;
1494 }
1495 .moodle-dialogue-confirm .confirmation-dialogue input {
1496     min-width: 80px;
1497 }
1498 .moodle-dialogue-exception .moodle-exception-message {
1499     margin: 1em;
1500 }
1501 .moodle-dialogue-exception .moodle-exception-param {
1502     margin-bottom: 0.5em;
1503 }
1504 .moodle-dialogue-exception .moodle-exception-param label {
1505     width: 150px;
1506 }
1507 .moodle-dialogue-exception .param-stacktrace label {
1508     display: block;
1509     margin: 0;
1510     padding: 4px 1em;
1511 }
1512 .moodle-dialogue-exception .param-stacktrace pre {
1513     display: block;
1514     height: 200px;
1515     overflow: auto;
1516 }
1517 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1518     display: inline-block;
1519     margin: 4px 0;
1520 }
1521 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1522     display: inline-block;
1523     width: 50px;
1524     margin: 4px 1em;
1525 }
1526 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1527     padding-left: 25px;
1528     margin-bottom: 4px;
1529     padding-bottom: 4px;
1530 }
1531 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1532     .opacity(75);
1533     width: 100%;
1534     height: 100%;
1535     top: 0;
1536     left: 0;
1537     background-color: white;
1538     text-align: center;
1539     padding: 10% 0;
1540 }
1541 /* Apply a default max-height on tooltip text */
1542 .moodle-dialogue .tooltiptext {
1543     max-height: 300px;
1544 }
1545
1546 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1547     z-index: 3001;
1548
1549     .moodle-dialogue-bd {
1550         overflow: auto;
1551     }
1552 }
1553
1554 /**
1555  * Chooser Dialogues (moodle-core-chooserdialogue)
1556  *
1557  * This CSS belong to the chooser dialogue which should work both with, and
1558  * without javascript enabled
1559  */
1560 /* Hide the dialog and it's title */
1561 .chooserdialoguebody,
1562 .choosertitle {
1563     display: none;
1564 }
1565 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1566     margin: 0;
1567 }
1568 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1569     padding: 0;
1570     background: #f2f2f2;
1571     .border-bottom-radius(10px);
1572 }
1573 /* Center the submit buttons within the area */
1574 .choosercontainer #chooseform .submitbuttons {
1575     padding: 0.7em 0;
1576     text-align: center;
1577 }
1578 /* Fixed for safari browser on iPhone4S with ios7.*/
1579 @media (max-height: 639px) {
1580     .ios .choosercontainer #chooseform .submitbuttons {
1581         padding: 45px 0;
1582     }
1583 }
1584 .choosercontainer #chooseform .submitbuttons input {
1585     min-width: 100px;
1586     margin: 0 0.5em;
1587 }
1588 /* Various settings for the options area */
1589 .choosercontainer #chooseform .options {
1590     position: relative;
1591     border-bottom: 1px solid #bbb;
1592 }
1593 /* Only set these options if we're showing the js container */
1594 .jschooser .choosercontainer #chooseform .alloptions {
1595     overflow-x: hidden;
1596     overflow-y: auto;
1597     max-width: 20.3em;
1598     .box-shadow(inset 0 0 30px 0 #ccc);
1599     .option {
1600         input[type=radio] {
1601             display: inline-block;
1602         }
1603         .modicon {
1604             display: inline-block;
1605         }
1606         .typename {
1607             display: inline-block;
1608             width: 65%;
1609         }
1610     }
1611 }
1612
1613 /* Settings for option rows and option subtypes */
1614 .choosercontainer #chooseform .moduletypetitle,
1615 .choosercontainer #chooseform .option,
1616 .choosercontainer #chooseform .nonoption {
1617     margin-bottom: 0;
1618     padding: 0 1.6em 0 1.6em;
1619 }
1620 .choosercontainer #chooseform .moduletypetitle {
1621     text-transform: uppercase;
1622     padding-top: 1.2em;
1623     padding-bottom: 0.4em;
1624 }
1625 .choosercontainer #chooseform .option .typename,
1626 .choosercontainer #chooseform .option span.modicon img.icon,
1627 .choosercontainer #chooseform .nonoption .typename,
1628 .choosercontainer #chooseform .nonoption span.modicon img.icon {
1629     padding: 0 0 0 0.5em;
1630 }
1631
1632 .chooserdialogue-course-modchooser .choosercontainer #chooseform .option span.modicon img.icon,
1633 .chooserdialogue-course-modchooser .choosercontainer #chooseform .nonoption span.modicon img.icon {
1634     height: 24px;
1635     width: 24px;
1636 }
1637 .choosercontainer #chooseform .option input[type=radio],
1638 .choosercontainer #chooseform .option span.typename,
1639 .choosercontainer #chooseform .option span.modicon {
1640     vertical-align: middle;
1641 }
1642 .choosercontainer #chooseform .option label {
1643     display: block;
1644     padding: 0.3em 0 0.1em 0;
1645     border-bottom: 1px solid #fff;
1646 }
1647 .choosercontainer #chooseform .nonoption {
1648     padding-left: 2.7em;
1649     padding-top: 0.3em;
1650     padding-bottom: 0.1em;
1651 }
1652 .choosercontainer #chooseform .subtype {
1653     margin-bottom: 0;
1654     padding: 0 1.6em 0 3.2em;
1655 }
1656 .choosercontainer #chooseform .subtype .typename {
1657     margin: 0 0 0 0.2em;
1658 }
1659
1660 /* The instruction/help area */
1661 .jschooser .choosercontainer #chooseform .instruction,
1662 .jschooser .choosercontainer #chooseform .typesummary {
1663     display: none;
1664     position: absolute;
1665     top: 0;
1666     right: 0;
1667     bottom: 0;
1668     left: 20.3em;
1669     margin: 0;
1670     padding: 1.6em;
1671     background-color: #fff;
1672     overflow-x: hidden;
1673     overflow-y: auto;
1674     line-height: 2em;
1675 }
1676
1677 /* Selected option settings */
1678 .jschooser .choosercontainer #chooseform .instruction,
1679 .choosercontainer #chooseform .selected .typesummary {
1680     display: block;
1681 }
1682 .choosercontainer #chooseform .selected {
1683     background-color: #fff;
1684     .box-shadow(0px 0 10px 0 #ccc);
1685 }
1686 .section-modchooser-link img.smallicon {
1687     padding: 3px;
1688 }
1689 /* Form element: listing */
1690 .formlistingradio {
1691     padding-bottom: 25px;
1692     padding-right: 10px;
1693 }
1694 .formlistinginputradio {
1695     float: left;
1696 }
1697 .formlistingmain {
1698     min-height: 225px;
1699 }
1700 .formlisting {
1701     position: relative;
1702     margin: 15px 0;
1703     padding: 1px 19px 14px;
1704     background-color: white;
1705     border: 1px solid #ddd;
1706     .border-radius(4px);
1707 }
1708 .formlistingmore {
1709     position: absolute;
1710     cursor: pointer;
1711     bottom: -1px;
1712     right: -1px;
1713     padding: 3px 7px;
1714     font-size: 12px;
1715     font-weight: bold;
1716     background-color: #f5f5f5;
1717     border: 1px solid #ddd;
1718     color: #9da0a4;
1719     .border-radius(4px 0 4px 0);
1720 }
1721 .formlistingall {
1722     margin: 15px 0;
1723     padding: 0;
1724     .border-radius(4px);
1725 }
1726 .formlistingrow {
1727     cursor: pointer;
1728     border-bottom: 1px solid;
1729     border-color: #e1e1e8;
1730     border-left: 1px solid #e1e1e8;
1731     border-right: 1px solid #e1e1e8;
1732     background-color: #f7f7f9;
1733     .border-radius(0 0 4px 4px);
1734     padding: 6px;
1735     top: 50%;
1736     left: 50%;
1737     min-height: 34px;
1738     float: left;
1739     width: 150px;
1740 }
1741 body.jsenabled .formlistingradio {
1742     display: none;
1743 }
1744 body.jsenabled .formlisting {
1745     display: block;
1746 }
1747
1748 /* Badges styles */
1749 table.collection {
1750     .table;
1751     .table-bordered;
1752     .table-striped;
1753 }
1754 table.collection td.name {
1755     text-align: left;
1756     vertical-align: middle;
1757 }
1758 table.collection td.awards {
1759     width: 15%;
1760     text-align: center;
1761     vertical-align: middle;
1762 }
1763 table.collection td.criteria {
1764     width: 40%;
1765     text-align: left;
1766     vertical-align: top;
1767 }
1768 table.collection td.status {
1769     width: 15%;
1770     text-align: center;
1771     vertical-align: middle;
1772 }
1773 table.collection td.description {
1774     width: 25%;
1775     text-align: left;
1776 }
1777 table.collection td.actions {
1778     width: 11em;
1779     text-align: center;
1780     vertical-align: middle;
1781 }
1782 a.criteria-action {
1783     padding: 0 3px;
1784     float: right;
1785 }
1786 div.criteria-description {
1787     padding: 10px 15px;
1788     margin: 5px 0;
1789     background: none repeat scroll 0 0 #f9f9f9;
1790     border: 1px solid #eee;
1791 }
1792 ul.badges {
1793     margin: 0;
1794     list-style: none;
1795 }
1796 .badges li {
1797     position: relative;
1798     display: inline-block;
1799     padding-top: 1em;
1800     text-align: center;
1801     vertical-align: top;
1802     width: 150px;
1803 }
1804 .badges li .badge-name {
1805     display: block;
1806     padding: 5px;
1807 }
1808 .badges li > img {
1809     position: absolute;
1810 }
1811 .badges li .badge-image {
1812     width: 100px;
1813     height: 100px;
1814     left: 10px;
1815     top: 0;
1816     z-index: 1;
1817 }
1818 .badges li .badge-actions {
1819     position: relative;
1820 }
1821 .badges li .expireimage {
1822     width: 100px;
1823     height: 100px;
1824     left: 25px;
1825     top: 0;
1826     position: absolute;
1827     z-index: 10;
1828     opacity: 0.85;
1829 }
1830
1831 #badge-image {
1832     background-color: transparent;
1833     padding: 0;
1834     position: relative;
1835     min-width: 100px;
1836     width: 20%;
1837     display: inline-block;
1838     vertical-align: top;
1839     margin-top: 17px;
1840
1841     .expireimage {
1842         width: 100px;
1843         height: 100px;
1844         left: 0;
1845         top: 0;
1846         .opacity(85);
1847         position: absolute;
1848         z-index: 10;
1849     }
1850
1851     .singlebutton {
1852         padding-top: 5px;
1853
1854         input {
1855             margin-left: 0;
1856         }
1857     }
1858 }
1859 #badge-details {
1860     display: inline-block;
1861     width: 79%;
1862 }
1863
1864 #badge-overview dl,
1865 #badge-details dl {
1866     margin: 0;
1867
1868     dt,
1869     dd {
1870         vertical-align: top;
1871         padding: 3px 0;
1872     }
1873     dt {
1874         clear: both;
1875         display: inline-block;
1876         width: 20%;
1877         min-width: 100px;
1878     }
1879     dd {
1880         display: inline-block;
1881         width: 79%;
1882         margin-left: 1%;
1883     }
1884 }
1885
1886 .badge-profile {
1887     vertical-align: top;
1888 }
1889 .connected {
1890     color: @successText;
1891 }
1892 .notconnected {
1893     color: @errorText;
1894 }
1895 .connecting {
1896     color: @warningText;
1897 }
1898 #page-badges-award .recipienttable tr td {
1899     vertical-align: top;
1900 }
1901 #page-badges-award .recipienttable tr td.actions .actionbutton {
1902     margin: 0.3em 0;
1903     padding: 0.5em 0;
1904     width: 100%;
1905 }
1906 #page-badges-award .recipienttable tr td.existing,
1907 #page-badges-award .recipienttable tr td.potential {
1908     width: 42%;
1909 }
1910
1911 #issued-badge-table .activatebadge {
1912     display: inline-block;
1913 }
1914 .statusbox.active {
1915     background-color: @successBackground;
1916 }
1917 .statusbox.inactive {
1918     background-color: @warningBackground;
1919 }
1920 .statusbox {
1921     text-align: center;
1922     margin-bottom: 5px;
1923     padding: 5px;
1924 }
1925 .statusbox .activatebadge {
1926     display: inline-block;
1927 }
1928 .statusbox .activatebadge input[type=submit] {
1929     margin: 3px;
1930 }
1931 .activatebadge {
1932     margin: 0;
1933     text-align: left;
1934     vertical-align: middle;
1935 }
1936 img#persona_signin {
1937     cursor: pointer;
1938 }
1939 .addcourse {
1940     float: right;
1941 }
1942 .invisiblefieldset {
1943     display: inline;
1944     padding: 0;
1945     border-width: 0;
1946 }
1947 .breadcrumb-nav {
1948     float: left;
1949     margin-bottom: 10px;
1950 }
1951 .breadcrumb-button .singlebutton div {
1952     margin-right: 0;
1953 }
1954 .breadcrumb-nav .breadcrumb {
1955     margin: 0;
1956 }
1957
1958 /** Header-bar styles **/
1959 .page-context-header {
1960     // We need to be explicit about the height of the header.
1961     @pageHeaderHeight: 140px;
1962
1963     // Do not remove these rules.
1964     overflow: hidden;
1965
1966     .page-header-image,
1967     .page-header-headings {
1968         display: block;
1969         position: relative;
1970     }
1971     .page-header-image {
1972         margin-bottom: 1em;
1973     }
1974     .page-header-headings {
1975         margin-top: 30px;
1976         margin-bottom: 10px;
1977
1978         h1 {
1979             display: block;
1980         }
1981     }
1982
1983     .page-header-headings,
1984     .header-button-group {
1985         position: relative;
1986         line-height: 24px;
1987         vertical-align: middle;
1988     }
1989
1990     .header-button-group {
1991         display: block;
1992
1993         a {
1994             position: relative;
1995
1996             // Don't touch it unless you know exactly what you are doing.
1997             top: -0.4em;
1998         }
1999     }
2000 }
2001
2002 .page-context-header {
2003     .page-header-image {
2004         float: left;
2005         margin-right: 1em;
2006     }
2007
2008     .header-button-group {
2009         float: left;
2010     }
2011 }
2012
2013 /** Action menu component styles **/
2014 .moodle-actionmenu,
2015 .moodle-actionmenu > ul,
2016 .moodle-actionmenu > ul > li {
2017     display: inline-block;
2018 }
2019
2020 .moodle-actionmenu ul {
2021     padding: 0;
2022     margin: 0;
2023     list-style-type: none;
2024 }
2025
2026 .section_action_menu .moodle-actionmenu ul.menubar {
2027     margin: 0;
2028 }
2029
2030 .section_action_menu .moodle-actionmenu ul.menu {
2031     margin: 0 10px 10px 0;
2032 }
2033
2034 .moodle-actionmenu .toggle-display,
2035 .moodle-actionmenu .menu-action-text {
2036     display: none; /** Hidden by default, display none so that we don't take up space. **/
2037 }
2038
2039 .jsenabled {
2040     .moodle-actionmenu[data-enhance] {
2041         display: block;
2042         .menu {
2043             display: none;
2044         }
2045         .toggle-display {
2046             display: inline; /** JS is enabled, we'll be using it so return display to normal **/
2047             .opacity(50);
2048         }
2049         .toggle-display.textmenu {
2050             display: block;
2051             margin-left: 4px;
2052             padding-left: 4px;
2053             padding-right: 4px;
2054
2055             .iconsmall,
2056             .smallicon,
2057             .icon {
2058                 margin: 4px 4px 4px 0;
2059                 padding: 8px 4px 0 2px;
2060                 vertical-align: text-bottom;
2061             }
2062
2063             .caret {
2064                 margin-top: 8px;
2065                 margin-left: 2px;
2066                 border-top-color: @navbarLinkColor;
2067                 &:hover,
2068                 &:active {
2069                     border-top-color: @navbarLinkColorActive;
2070                 }
2071             }
2072         }
2073     }
2074     .moodle-actionmenu[data-enhanced] {
2075         .toggle-display {
2076             .opacity(100);
2077         }
2078         .menu-action-text {
2079             display: inline;
2080         }
2081     }
2082 }
2083
2084 .moodle-actionmenu[data-enhanced].show {
2085
2086     position: relative;
2087
2088     .menu {
2089
2090         display: block;
2091         position: absolute;
2092         text-align: left;
2093         background-color: @dropdownBackground;
2094         border: 1px solid @dropdownBorder;
2095         z-index: 1000;
2096         .border-radius(5px);
2097         .box-shadow(5px 5px 20px 0 #666);
2098
2099         a {
2100             display: block;
2101             color: @dropdownLinkColor;
2102             padding: 6px 1em 6px 1em;
2103             &:hover {
2104                 color: @dropdownLinkColorHover;
2105                 background-color: @dropdownLinkBackgroundHover;
2106             }
2107         }
2108         a.hidden {
2109             display: none;
2110         }
2111         img {
2112             vertical-align: middle;
2113         }
2114         .iconsmall,
2115         .smallicon {
2116             margin: 4px 4px 4px -24px;
2117             padding: 4px;
2118         }
2119         > li {
2120             display: block;
2121             &:first-child a {
2122                 .border-top-radius(4px);
2123             }
2124             &:last-child a {
2125                 .border-bottom-radius(4px);
2126             }
2127         }
2128
2129         /** bottom left of button **/
2130         &.align-tl-bl {
2131             top: 100%;
2132             left: 0;
2133             margin-top: 4px;
2134         }
2135         &.align-tr-bl {
2136             top: 100%;
2137             right: 100%;
2138         }
2139         &.align-bl-bl {
2140             bottom: 100%;
2141             left: 0;
2142         }
2143         &.align-br-bl {
2144             bottom: 100%;
2145             right: 100%;
2146         }
2147         /** bottom right of button **/
2148         &.align-tl-br {
2149             top: 100%;
2150             left: 100%;
2151         }
2152         &.align-tr-br {
2153             top: 100%;
2154             right: 0;
2155             margin-top: 4px;
2156         }
2157
2158         &.align-bl-br {
2159             bottom: 100%;
2160             left: 100%;
2161         }
2162
2163         &.align-br-br {
2164             bottom: 100%;
2165             right: 0;
2166         }
2167         /** top left of button **/
2168         &.align-tl-tl {
2169             top: 0;
2170             left: 0;
2171         }
2172
2173         &.align-tr-tl {
2174             top: 0;
2175             right: 100%;
2176             margin-right: 4px;
2177         }
2178
2179         &.align-bl-tl {
2180             bottom: 100%;
2181             left: 0;
2182             margin-bottom: 4px;
2183         }
2184
2185         &.align-br-tl {
2186             bottom: 100%;
2187             right: 100%;
2188         }
2189         /** top right of button **/
2190         &.align-tl-tr {
2191             top: 0;
2192             left: 100%;
2193             margin-left: 4px;
2194         }
2195
2196         &.align-tr-tr {
2197             top: 0;
2198             right: 0;
2199         }
2200
2201         &.align-bl-tr {
2202             bottom: 100%;
2203             left: 100%;
2204         }
2205
2206         &.align-br-tr {
2207             bottom: 100%;
2208             right: 0;
2209             margin-bottom: 4px;
2210         }
2211
2212     }
2213     /** no wrap is set - prevent menu items from wrapping **/
2214     &.nowrap-items .menu > li {
2215         white-space: nowrap;
2216     }
2217 }
2218
2219 .block .moodle-actionmenu {
2220     text-align: right;
2221 }
2222
2223 ul.dragdrop-keyboard-drag li {
2224     list-style-type: none;
2225 }
2226
2227 .block-control-actions .moodle-core-dragdrop-draghandle img {
2228     width: 12px;
2229     height: 12px;
2230 }
2231
2232 a.disabled:hover,
2233 a.disabled {
2234     text-decoration: none;
2235     cursor: default;
2236     font-style: italic;
2237     color: #808080;
2238 }
2239 body.lockscroll {
2240     height: 100%;
2241     overflow: hidden;
2242 }
2243
2244 .progressbar_container {
2245     max-width: 500px;
2246     margin: 0 auto;
2247 }
2248
2249 /* IE10 only fix for calendar titling */
2250 .ie10 .yui3-calendar-header-label {
2251     display: inline-block;
2252 }
2253
2254 dd:before,
2255 dd:after {
2256     display: block;
2257     content: " ";
2258 }
2259 dd:after {
2260     clear: both;
2261 }
2262
2263 // Active tabs with links should have a different
2264 // cursor to indicate they are clickable.
2265 .nav-tabs > .active > a[href],
2266 .nav-tabs > .active > a[href]:hover,
2267 .nav-tabs > .active > a[href]:focus {
2268     cursor: pointer;
2269 }
2270
2271 .inplaceeditable {
2272     &.inplaceeditingon {
2273         position: relative;
2274
2275         .editinstructions {
2276             margin-top: -30px;
2277             font-weight: normal;
2278             margin-right: 0;
2279             margin-left: 0;
2280             left: 0;
2281             right: auto;
2282             white-space: nowrap;
2283         }
2284
2285         input {
2286             width: 330px;
2287             height: 16px;
2288             vertical-align: text-bottom;
2289             margin-bottom: 0;
2290         }
2291
2292         select {
2293             margin-bottom: 0;
2294         }
2295     }
2296
2297     .quickediticon img {
2298         opacity: 0.2;
2299     }
2300
2301     .quickeditlink {
2302         color: inherit;
2303         text-decoration: inherit;
2304     }
2305
2306     &:hover .quickeditlink .quickediticon img,
2307     .quickeditlink:focus .quickediticon img {
2308         opacity: 1;
2309     }
2310
2311     &.inplaceeditable-toggle .quickediticon {
2312         display: none;
2313     }
2314
2315     &.inplaceeditable-autocomplete {
2316         display: block;
2317     }
2318 }
2319
2320 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2321     margin-top: -20px;
2322 }
2323
2324 /** Chart area. */
2325 .chart-area {
2326
2327     .chart-table-data {
2328         display: none;
2329     }
2330
2331     .chart-table {
2332         .chart-output-htmltable caption {
2333             white-space: nowrap;
2334         }
2335         /** When accessible, we display the table only. */
2336         &.accesshide {
2337             .chart-table-expand {
2338                 display: none;
2339             }
2340             .chart-table-data {
2341                 display: block;
2342             }
2343         }
2344     }
2345 }
2346
2347 .hover-tooltip-container {
2348     position: relative;
2349
2350     .hover-tooltip {
2351         opacity: 0;
2352         visibility: hidden;
2353         position: absolute;
2354         /*rtl:ignore*/
2355         left: 50%;
2356         top: ~"calc(-50% - 5px)";
2357         transform: translate(-50%, -50%);
2358         background-color: #fff;
2359         border: 1px solid rgba(0, 0, 0, .2);
2360         border-radius: .3rem;
2361         box-sizing: border-box;
2362         padding: 5px;
2363         white-space: nowrap;
2364         transition: opacity 0.15s, visibility 0.15s;
2365         z-index: 1000;
2366
2367         &:before {
2368             content: '';
2369             display: inline-block;
2370             border-left: 8px solid transparent;
2371             border-right: 8px solid transparent;
2372             border-top: 8px solid rgba(0, 0, 0, .2);
2373             position: absolute;
2374             bottom: -8px;
2375             left: ~"calc(50% - 8px)";
2376         }
2377
2378         &:after {
2379             content: '';
2380             display: inline-block;
2381             border-left: 7px solid transparent;
2382             border-right: 7px solid transparent;
2383             border-top: 7px solid #fff;
2384             position: absolute;
2385             bottom: -6px;
2386             left: ~"calc(50% - 7px)";
2387             z-index: 2;
2388         }
2389     }
2390
2391     &:hover {
2392         .hover-tooltip {
2393             opacity: 1;
2394             visibility: visible;
2395             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2396         }
2397     }
2398 }
2399
2400 .clickable {
2401     cursor: pointer;
2402 }
2403
2404 .overlay-icon-container {
2405     position: absolute;
2406     top: 0;
2407     left: 0;
2408     width: 100%;
2409     height: 100%;
2410     background-color: rgba(255, 255, 255, 0.6);
2411
2412     .loading-icon {
2413         position: absolute;
2414         top: 50%;
2415         left: 50%;
2416         transform: translate(-50%, -50%);
2417
2418         .icon {
2419             height: 30px;
2420             width: 30px;
2421             font-size: 30px;
2422         }
2423     }
2424 }
2425
2426 [data-drag-type="move"] {
2427     cursor: move;
2428     touch-action: none;
2429 }
2430
2431 .bg-pulse-grey {
2432     animation: bg-pulse-grey 2s infinite linear;
2433 }
2434
2435 @keyframes bg-pulse-grey {
2436     0% {
2437         background-color: @grayLighter;
2438     }
2439     50% {
2440         background-color: darken(@grayLighter, 5%);
2441     }
2442     100% {
2443         background-color: @grayLighter;
2444     }
2445 }