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