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