theme/bootstrapbase/less/moodle/course.less

   1 /* course.less */
   2 /* COURSE CONTENT */
   3 .section_add_menus {
   4     text-align: right;
   5 }
   6 .dir-rtl .section_add_menus {
   7     text-align: left;
   8 }
   9 .section_add_menus .horizontal div,
  10 .section_add_menus .horizontal form {
  11     display: inline;
  12 }
  13 .section_add_menus optgroup {
  14     font-weight: normal;
  15     font-style: italic;
  16 }
  17 .section_add_menus .urlselect {
  18     margin-left: .4em;
  19 }
  20 .dir-rtl .section_add_menus .urlselect {
  21     margin-right: .4em;
  22     margin-left: 0;
  23 }
  24 .section_add_menus .urlselect select {
  25     margin-left: .2em;
  26 }
  27 .dir-rtl .section_add_menus .urlselect select {
  28     margin-right: .2em;
  29     margin-left: 0;
  30 }
  31 .section_add_menus .urlselect img.iconhelp {
  32     padding: 0;
  33     margin: 0;
  34     vertical-align: text-bottom;
  35 }
  36
  37 .site-topic ul.section,
  38 .course-content ul.section {
  39     margin: 1em;
  40 }
  41 .section {
  42     .spinner {
  43         height: 16px;
  44         width: 16px;
  45     }
  46     .activity {
  47         .spinner {
  48             left: 100%;
  49             position: absolute;
  50             vertical-align: text-bottom;
  51         }
  52
  53         .editing_move {
  54             /* Move the move icon to the start of the line */
  55             position: absolute;
  56             left: 0;
  57             top: 0;
  58         }
  59
  60         .mod-indent-outer {
  61             /**
  62              * Add appropriate padding such that nothing overlaps the
  63              * absolute positioned move icon.
  64              */
  65             padding-left: 32px;
  66         }
  67
  68         /* The command block for each activity */
  69         .actions {
  70             position: absolute;
  71             right: 0;
  72             top: 0;
  73         }
  74
  75         .contentwithoutlink,
  76         .activityinstance {
  77
  78             min-width: 40%;
  79             display: table-cell;
  80             padding-right: 4px;
  81             min-height: 2em;
  82
  83             .dimmed {
  84                 img.activityicon {
  85                   opacity: 0.5;
  86                   filter: alpha(opacity=50);
  87                 }
  88             }
  89         }
  90     }
  91
  92     .filler {
  93         width: 16px;
  94         height: 16px;
  95         padding: 0.3em;
  96         display: inline-block;
  97     }
  98
  99     .activity.editor_displayed {
 100         a.editing_title,
 101         .moodle-actionmenu {
 102             display: none;
 103         }
 104         div.activityinstance {
 105             padding-right: initial;
 106
 107             input {
 108                 margin-bottom: initial;
 109                 padding-top: initial;
 110                 padding-bottom: initial;
 111                 vertical-align: text-bottom;
 112             }
 113         }
 114     }
 115 }
 116
 117 .dir-rtl .section {
 118     .activity {
 119         .spinner {
 120             left: auto;
 121             right: 100%;
 122         }
 123
 124         .mod-indent-outer {
 125             /**
 126              * Add appropriate padding such that nothing overlaps the
 127              * absolute positioned move icon.
 128              */
 129             padding-left: initial;
 130             padding-right: 32px;
 131         }
 132
 133         /* The command block for each activity */
 134         .actions {
 135             left: 0;
 136             right: auto;
 137         }
 138
 139         .contentwithoutlink,
 140         .activityinstance {
 141             padding-left: 4px;
 142             padding-right: initial;
 143         }
 144     }
 145 }
 146
 147 .dir-rtl.editing .section {
 148     .activity {
 149         .editing_move {
 150             /* Move the move icon to the start of the line */
 151             left: auto;
 152             right: 0;
 153         }
 154
 155         &.editor_displayed {
 156             div.activityinstance {
 157                 padding-left: initial;
 158             }
 159         }
 160     }
 161 }
 162
 163 .activity img.activityicon {
 164     margin-right: 6px;
 165     vertical-align: text-bottom;
 166 }
 167 .dir-rtl .section .activity img.activityicon {
 168     margin-left: 6px;
 169     margin-right: 0;
 170 }
 171 .section .activity .activityinstance,
 172 .section .activity .activityinstance div {
 173     display: inline-block;
 174 }
 175 .editing {
 176     .section {
 177         .activity {
 178             .contentwithoutlink,
 179             .activityinstance {
 180                 padding-right: 200px;
 181             }
 182         }
 183     }
 184 }
 185
 186 .dir-rtl.editing {
 187     .section {
 188         .activity {
 189             .contentwithoutlink,
 190             .activityinstance {
 191                 padding-left: 200px;
 192                 padding-right: 0;
 193             }
 194         }
 195     }
 196 }
 197
 198 .editing_show + .editing_assign,
 199 .editing_hide + .editing_assign {
 200     // if roles icon missing, add space
 201     margin-left: 20px;
 202 }
 203 .section .activity .commands {
 204     white-space: nowrap;
 205     display: inline;
 206 }
 207 .section .activity.modtype_label .commands {
 208     margin-left: 40%;
 209     padding-left: .2em;
 210 }
 211 .section .activity.modtype_label.label {
 212     font-weight: normal;
 213     padding: .2em;
 214 }
 215 .section li.activity {
 216     padding: .2em;
 217     clear: both;
 218 }
 219 .section .activity .activityinstance .groupinglabel {
 220     padding-left: 30px;
 221 }
 222 .dir-rtl .section .activity .activityinstance .groupinglabel {
 223     padding-right: 30px;
 224 }
 225 .section .activity .availabilityinfo,
 226 .section .activity .contentafterlink {
 227     margin-top: 0.5em;
 228     margin-left: 30px;
 229 }
 230 .dir-rtl .section .activity .availabilityinfo,
 231 .dir-rtl .section .activity .contentafterlink {
 232     margin-left: 0;
 233     margin-right: 30px;
 234 }
 235 .section .activity .contentafterlink p {
 236     margin: .5em 0;
 237 }
 238 .editing .section .activity:hover,
 239 .editing .section .activity.action-menu-shown {
 240     background-color: @grayLighter;
 241 }
 242 .course-content .current {
 243     background-color: @infoBackground;
 244 }
 245 .course-content .section-summary {
 246     border: 1px solid #DDD;
 247     margin-top: 5px;
 248     list-style: none;
 249 }
 250 .course-content .section-summary .section-title  {
 251     margin: 2px 5px 10px 5px;
 252 }
 253 .course-content .section-summary .summarytext {
 254     margin: 2px 5px 2px 5px;
 255 }
 256 .course-content .section-summary .section-summary-activities .activity-count {
 257     .muted;
 258     font-size: @fontSizeSmall;
 259     margin: 3px;
 260     white-space: nowrap;
 261     display: inline-block;
 262 }
 263 .course-content .section-summary .summary {
 264     margin-top: 5px;
 265 }
 266 .course-content .single-section {
 267     margin-top: 1em;
 268 }
 269 .course-content .single-section .section-navigation {
 270     display: block;
 271     padding: 0.5em;
 272     margin-bottom: -0.5em;
 273 }
 274 .course-content .single-section .section-navigation .title {
 275     font-weight: bold;
 276     font-size: 108%;
 277     clear: both;
 278 }
 279 .course-content .single-section .section-navigation .mdl-left {
 280     font-weight: normal;
 281     float: left;
 282     margin-right: 1em;
 283 }
 284 .dir-rtl .course-content .single-section .section-navigation .mdl-left {
 285     float: right;
 286 }
 287 .course-content .single-section .section-navigation .mdl-left .larrow {
 288     margin-right: 0.1em;
 289 }
 290 .course-content .single-section .section-navigation .mdl-right {
 291     font-weight: normal;
 292     float: right;
 293     margin-left: 1em;
 294 }
 295 .dir-rtl .course-content .single-section .section-navigation .mdl-right {
 296     float: left;
 297 }
 298 .course-content .single-section .section-navigation .mdl-right .rarrow {
 299     margin-left: 0.1em;
 300 }
 301 .course-content .single-section .section-navigation .mdl-bottom {
 302     margin-top: 0;
 303 }
 304 .course-content ul li.section.main {
 305     border-bottom: 2px solid #eee;
 306     margin-top: 0;
 307 }
 308 .course-content ul li.section.hidden {
 309     opacity: 0.5;
 310 }
 311 .course-content ul.topics li.section .content,
 312 .course-content ul.weeks li.section .content {
 313     margin-right: 20px;
 314     margin-left: 20px;
 315     padding: 0;
 316 }
 317
 318 .course-content {
 319     margin-top: 0;
 320 }
 321
 322 .course-content ul.topics li.section {
 323     padding-bottom: 20px;
 324 }
 325
 326 .course-content ul.topics li.section .summary {
 327     margin-left: 25px;
 328 }
 329
 330 .path-course-view .completionprogress {
 331     margin-left: 25px
 332 }
 333
 334 .path-course-view .completionprogress {
 335     display: block;
 336     float: right;
 337     height: 20px;
 338     position: relative;
 339     z-index: 1000;
 340 }
 341
 342 #page-site-index .subscribelink {
 343     text-align: right;
 344 }
 345 #site-news-forum h2,
 346 #frontpage-course-list h2,
 347 #frontpage-category-names h2,
 348 #frontpage-category-combo h2 {
 349     margin-bottom: 9px;
 350 }
 351 .path-course-view a.reduce-sections {
 352     padding-left: 0.2em;
 353 }
 354 .path-course-view .subscribelink {
 355     text-align: right;
 356 }
 357 .path-course-view .unread {
 358     margin-left: 30px;
 359 }
 360 .dir-rtl.path-course-view .unread {
 361     margin-right: 30px;
 362 }
 363 .path-course-view .block.drag .header {
 364     cursor: move;
 365 }
 366 .path-course-view .completionprogress {
 367     text-align: right;
 368 }
 369 .dir-rtl.path-course-view .completionprogress {
 370     text-align: left;
 371 }
 372 .path-course-view .single-section .completionprogress {
 373     margin-right: 5px;
 374 }
 375 .path-course-view .section .summary {
 376     line-height: normal;
 377 }
 378
 379 .path-site li.activity > div,
 380 .path-course-view li.activity > div {
 381     position: relative;
 382     padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
 383 }
 384 .dir-rtl.path-site li.activity > div,
 385 .dir-rtl.path-course-view li.activity > div {
 386     position: relative;
 387     padding: 0 0 0 16px;
 388 }
 389 .path-course-view li.activity span.autocompletion img {
 390     vertical-align: text-bottom;
 391 }
 392 .path-course-view li.activity form.togglecompletion img {
 393     max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
 394 }
 395 .path-course-view li.activity form.togglecompletion .ajaxworking {
 396     width: 16px;
 397     height: 16px;
 398     position: absolute;
 399     right: 22px;
 400     top: 3px;
 401     background: url([[pix:i/ajaxloader]]) no-repeat;
 402 }
 403 .dir-rtl.path-course-view .completionprogress {
 404     float: none;
 405 }
 406 .dir-rtl.path-course-view li.activity form.togglecompletion .ajaxworking {
 407     right: -22px;
 408 }
 409
 410 li.section.hidden span.commands a.editing_hide,
 411 li.section.hidden span.commands a.editing_show {
 412     cursor: default;
 413 }
 414 ul.weeks h3.sectionname {
 415     white-space: nowrap;
 416 }
 417 .editing ul.weeks h3.sectionname {
 418     white-space: normal;
 419 }
 420
 421 .single-section h3.sectionname {
 422     text-align: center;
 423     clear: both;
 424 }
 425
 426 .section img.movetarget {
 427     height: 16px;
 428     width: 80px;
 429 }
 430
 431 input.titleeditor {
 432     width: 330px;
 433     vertical-align: text-bottom;
 434 }
 435
 436 span.editinstructions {
 437     position: absolute;
 438     top: 0;
 439     margin-top: -22px;
 440     margin-left: 30px;
 441     line-height: 16px;
 442     font-size: @fontSizeSmall;
 443     padding: .1em .4em;
 444     background-color: @infoBackground;
 445     color: @infoText;
 446     text-decoration: none;
 447     z-index: 9999;
 448     .box-shadow(2px 2px 5px 1px #ccc);
 449     border: 1px solid @infoBorder;
 450 }
 451 .dir-rtl span.editinstructions {
 452 }
 453
 454 /* Course drag and drop upload styles */
 455 #dndupload-status {
 456     width: 40%;
 457     margin: 0 30%;
 458     padding: 6px;
 459     border: 1px solid @infoBorder;
 460     text-align: center;
 461     background: @infoBackground;
 462     color: @infoText;
 463     position: absolute;
 464     z-index: 9999;
 465     .box-shadow(2px 2px 5px 1px #ccc);
 466     .border-bottom-radius(8px);
 467     z-index: 0;
 468 }
 469 .dndupload-preview {
 470     color: #909090;
 471     border: 1px dashed #909090;
 472     list-style: none;
 473     margin-top: .2em;
 474     padding: .3em;
 475 }
 476 .dndupload-preview img.icon {
 477     vertical-align: text-bottom;
 478     padding: 0;
 479 }
 480 .dndupload-progress-outer {
 481     .progress;
 482 }
 483 .dndupload-progress-inner {
 484     .progress .bar;
 485 }
 486 .dndupload-hidden {
 487     display: none;
 488 }
 489
 490 /* COURSES LISTINGS AND COURSE SUMMARY */
 491 #page-course-pending .singlebutton,
 492 #page-course-index .singlebutton,
 493 #page-course-index-category .singlebutton,
 494 #page-course-editsection .singlebutton {
 495     text-align: center;
 496 }
 497 #page-admin-course-manage #movecourses td img {
 498     margin: 0 .22em;
 499     vertical-align: text-bottom;
 500 }
 501 #page-admin-course-manage #movecourses td img.icon {
 502     padding: 0;
 503 }
 504
 505 #coursesearch {
 506     margin-top: 1em;
 507     text-align: center;
 508 }
 509
 510 #page-course-pending .pendingcourserequests {
 511     margin-bottom: 1em;
 512 }
 513 #page-course-pending .pendingcourserequests .singlebutton {
 514     display: inline;
 515 }
 516 #page-course-pending .pendingcourserequests .cell {
 517     padding: 0 5px;
 518 }
 519 #page-course-pending .pendingcourserequests .cell.c6 {
 520     white-space: nowrap;
 521 }
 522
 523 .coursebox {
 524     margin-bottom: 15px;
 525     border: 1px dotted #ddd;
 526     .border-radius(4px);
 527     padding: 5px;
 528 }
 529
 530 .coursebox > .info > .coursename a {
 531     display:block;
 532     background-image:url([[pix:moodle|i/course]]);
 533     background-repeat: no-repeat;
 534     padding-left:21px;
 535     background-position: center left;
 536 }
 537 .coursebox.remotehost > .info > .categoryname a {
 538     background-image:url([[pix:moodle|i/mnethost]]);
 539 }
 540 .coursebox > .info > .coursename,
 541 .coursebox .content .teachers,
 542 .coursebox .content .courseimage,
 543 .coursebox .content .coursefile {
 544     float:left;
 545     width:40%;
 546     clear:left;
 547 }
 548 .coursebox > .info > h3.coursename {
 549     margin: 5px;
 550 }
 551 .coursebox > .info > .coursename {
 552     margin: 5px;
 553     padding: 0;
 554 }
 555 .coursebox .content .teachers li {
 556     list-style-type:none;
 557     padding:0;
 558     margin:0;
 559 }
 560 .coursebox .enrolmenticons {
 561     padding:3px 0;
 562     float:right;
 563 }
 564 .coursebox .moreinfo {
 565     padding:3px 0;
 566     float:right;
 567 }
 568 .coursebox .enrolmenticons img,
 569 .coursebox .moreinfo img {
 570     margin:0 .2em;
 571 }
 572 .coursebox .content {
 573     clear:both;
 574 }
 575 .coursebox .content .summary,
 576 .coursebox .content .coursecat {
 577     float:right;
 578     width: 55%;
 579 }
 580 .coursebox .content .coursecat {
 581     text-align:right;
 582     clear:right;
 583 }
 584 .coursebox.remotecoursebox .remotecourseinfo {
 585     float:left;
 586     width: 40%;
 587 }
 588 .coursebox .content .courseimage img {
 589     max-width:100px;
 590     max-height:100px;
 591 }
 592 .coursebox .content .coursecat,
 593 .coursebox .content .summary,
 594 .coursebox .content .courseimage,
 595 .coursebox .content .coursefile,
 596 .coursebox .content .teachers,
 597 .coursebox.remotecoursebox .remotecourseinfo {
 598     margin:3px 5px;
 599     padding:0;
 600 }
 601
 602 .dir-rtl .coursebox > .info > .categoryname a {
 603     padding-left:0;
 604     padding-right:21px;
 605     background-position: center right;
 606 }
 607 .dir-rtl .coursebox > .info > .categoryname,
 608 .dir-rtl .coursebox .teachers,
 609 .dir-rtl .coursebox .content .courseimage,
 610 .dir-rtl .coursebox .content .coursefile {
 611     float:right;
 612     clear:right;
 613 }
 614 .dir-rtl .coursebox .enrolmenticons,
 615 .dir-rtl .coursebox .moreinfo {
 616     float:left;
 617 }
 618 .dir-rtl .coursebox .summary,
 619 .dir-rtl .coursebox .coursecat {
 620     float:left;
 621 }
 622 .dir-rtl .coursebox .coursecat {
 623     text-align:left;
 624     clear:left;
 625 }
 626
 627 .coursebox.collapsed {
 628     margin-bottom:0;
 629 }
 630 .coursebox.collapsed > .content {
 631     display:none;
 632 }
 633 .courses .coursebox.collapsed {
 634     border:1px solid #eeeeee;
 635     padding:5px;
 636 }
 637
 638 .courses .coursebox.even {
 639     background-color:#f6f6f6;
 640 }
 641 .courses .coursebox:hover,
 642 .course_category_tree .courses > .paging.paging-morelink:hover {
 643     background-color:#eeeeee;
 644 }
 645
 646 .course_category_tree .category .numberofcourse {
 647     font-size: @fontSizeSmall;
 648 }
 649
 650 .course_category_tree .controls {
 651     visibility: hidden;
 652 }
 653 .course_category_tree .controls div {
 654     display:inline;
 655     cursor:pointer;
 656 }
 657 .jsenabled .course_category_tree .controls {
 658     visibility: visible;
 659 }
 660 .course_category_tree .controls {
 661     margin-bottom:5px;
 662     text-align:right;
 663     float:right;
 664 }
 665 .course_category_tree .controls div {
 666     padding-right:2em;
 667     font-size:75%;
 668 }
 669
 670 .course_category_tree .category > .info > .categoryname{
 671     background-image:url([[pix:moodle|t/collapsed_empty]]);
 672     background-repeat: no-repeat;
 673     padding:2px 18px;
 674     margin:3px;
 675     background-position:center left;
 676 }
 677 .dir-rtl .course_category_tree .category > .info > .categoryname {
 678     background-image:url([[pix:moodle|t/collapsed_empty_rtl]]);
 679     background-position:center right;
 680 }
 681 .course_category_tree .category.with_children > .info > .categoryname {
 682     background-image:url([[pix:moodle|t/expanded]]);
 683     cursor: pointer;
 684 }
 685 .course_category_tree .category.with_children.collapsed >.info > .categoryname {
 686     background-image:url([[pix:moodle|t/collapsed]]);
 687 }
 688 .dir-rtl .course_category_tree .category.with_children.collapsed > .info > .categoryname {
 689     background-image:url([[pix:moodle|t/collapsed_rtl]]);
 690 }
 691 .course_category_tree .category.collapsed>.content {
 692     display:none;
 693 }
 694
 695 .course_category_tree .category >.info {
 696     .well;
 697     min-height:0;
 698     padding:0;
 699     margin:3px 0;
 700     margin-bottom:3px;
 701     clear: both;
 702 }
 703 .course_category_tree.frontpage-category-names .category >.info {
 704     background:none;
 705     border:none;
 706     margin:0;
 707 }
 708 .course_category_tree .category > .content {
 709     padding-left:16px;
 710 }
 711
 712 .dir-rtl .course_category_tree .category > .content {
 713     padding-left:0;
 714     padding-right:16px;
 715 }
 716
 717 .course_category_tree .subcategories > .paging,
 718 .courses > .paging {
 719     margin:0;
 720     padding:5px;
 721     text-align:center;
 722 }
 723
 724 .courses > .paging.paging-morelink,
 725 .course_category_tree .subcategories > .paging.paging-morelink {
 726     text-align:left;
 727 }
 728
 729 .course_category_tree .paging.paging-morelink a {
 730     font-size: @fontSizeSmall;
 731 }
 732 .dir-rtl .courses > .paging.paging-morelink,
 733 .dir-rtl .course_category_tree .paging.paging-morelink {
 734     text-align:right;
 735 }
 736
 737 #page-course-index-category .generalbox.info {
 738     margin-bottom: 15px;
 739     border: 1px dotted #ddd;
 740     .border-radius(4px);
 741     padding: 5px;
 742 }
 743
 744 #page-course-index-category .categorypicker {
 745     text-align: center;
 746     margin: 10px 0 20px;
 747 }
 748
 749 .section {
 750     .summary,
 751     .activity {
 752         .iconsmall {
 753             width: 16px;
 754             height: 16px;
 755         }
 756     }
 757     .editing_title {
 758         .iconsmall {
 759             width: 12px;
 760             height: 12px;
 761             margin: 8px 8px 0px 0;
 762             padding: 4px 8px 0px 0;
 763             vertical-align: text-bottom;
 764         }
 765     }
 766     .moodle-actionmenu {
 767         .iconsmall {
 768             max-width: none !important; /** reset sets 100% !important which breaks on IE8 without this !important */
 769             width:16px;
 770             height:16px;
 771             padding: 4px;
 772             vertical-align: text-bottom;
 773         }
 774     }
 775     .moodle-actionmenu[data-enhanced] {
 776         .menu {
 777             img {
 778               width: 12px;
 779               height: 12px;
 780             }
 781         }
 782     }
 783 }
 784
 785 /**
 786  * Course management page
 787  * Palette
 788  *
 789  * Background (reg)         #F5F5F5
 790  * Background (light        #fafafa
 791  * Background (highlight)   #ddffaa
 792  * Borders                  #e1e1e8
 793  */
 794 #course-category-listings {
 795     background-color:#fff;
 796     margin-bottom:200px;
 797
 798     /** Two column layout */
 799     &.columns-2 {
 800         > #course-listing > div {
 801             position:relative;
 802             left:-1px;
 803         }
 804     }
 805     /** Three column layout */
 806     &.columns-3 > #course-listing > div {
 807         height:100%;
 808     }
 809
 810     > div > div {
 811         min-height:300px;
 812         border:1px solid #e1e1e8;
 813         > ul.ml > li:first-child > div {
 814             border-top:0;
 815         }
 816     }
 817     h3 {
 818         margin:0;
 819         padding:0.4rem 0.6rem 0.3rem;
 820         background-color:#F5F5F5;
 821         border-bottom:1px solid #e1e1e8;
 822     }
 823     h4 {
 824         margin:1rem 0 0;
 825         padding:0.6rem 1rem 0.5rem;
 826     }
 827     .moodle-actionmenu {
 828         white-space:nowrap;
 829     }
 830
 831     .moodle-actionmenu[data-enhance] {
 832         .toggle-display {
 833             img {
 834                 width: auto;
 835             }
 836             &.textmenu {
 837                 padding-right: 4px;
 838
 839                 .caret {
 840                     margin-top: 12px;
 841                 }
 842             }
 843         }
 844     }
 845
 846     .listing-actions {
 847         text-align:center;
 848         padding:0.4rem 0.3rem 0.3rem;
 849         line-height:2.2em;
 850         > .moodle-actionmenu {
 851             display:inline-block;
 852             .menu a {
 853                 padding-left:1rem;
 854             }
 855         }
 856         .iconsmall {
 857             vertical-align:text-bottom;
 858         }
 859         .moodle-actionmenu:not([data-enhanced]) {
 860             li {line-height:normal;}
 861             > .menubar a {
 862                 color:inherit;
 863                 display:inline-block;
 864                 > img {
 865                     display:none;
 866                 }
 867             }
 868             > .menu .menu-action-text {
 869                 display:inline-block;
 870             }
 871         }
 872     }
 873     ul.ml {
 874         list-style: none;
 875         margin:1rem 0;
 876         ul.ml {
 877             margin:0;
 878         }
 879     }
 880     li {
 881         line-height:2.2em;
 882         > div {
 883             &:hover {
 884                 background-color:#fafafa;
 885             }
 886         }
 887         .tree-icon {
 888             vertical-align:text-top;
 889             margin: 2px 6px 0 0;
 890         }
 891         &[data-selected='1'] {
 892             > div {
 893                 background-color:#FFFFD8;
 894                 border-top-color: #e1e1e8;
 895                 border-bottom-color:#F5F5F5;
 896             }
 897             li:first-of-type > div,
 898             &[data-expandable='0']+li > div {
 899                 border-top-color:#e1e1e8;
 900             }
 901             &:last-of-type > div {
 902                 border-bottom-color:#e1e1e8;
 903             }
 904         }
 905
 906         // Tree item indenting to represent depth.
 907         .tree-icon {margin-left:0;}
 908         li .tree-icon {margin-left:1em;}
 909         li li .tree-icon {margin-left:2em;}
 910         li li li .tree-icon {margin-left:3em;}
 911         li li li li .tree-icon {margin-left:4em;}
 912         li li li li li .tree-icon {margin-left:4.5em;}
 913         li li li li li li .tree-icon {margin-left:5em;}
 914         li li li li li li li .tree-icon {margin-left:5.5em;}
 915
 916         &+li > div,
 917         &:first-child > div {
 918             border-top-color:#F5F5F5;
 919         }
 920     }
 921
 922     .item-actions {
 923         margin-right:1em;
 924         display:inline-block;
 925         display:initial;
 926         img {
 927             margin: 0 4px;
 928         }
 929         .menu {
 930             a {
 931                 padding:4px 1em 4px 4px;
 932             }
 933             img {
 934                 width: 12px;
 935                 max-width:none;
 936             }
 937         }
 938     }
 939
 940     .listitem {
 941         > div {
 942             > .float-left {
 943                 float:left;
 944             }
 945             > .float-right {
 946                 float:right;
 947                 text-align:right;
 948             }
 949             .item-actions {
 950                 .action-show {
 951                     display:none;
 952                 }
 953                 .action-hide {
 954                     display:inline;
 955                 }
 956             }
 957             .without-actions {
 958                 color: #333;
 959             }
 960             .idnumber {
 961                 color:#a1a1a8;
 962                 margin-right:2em;
 963             }
 964         }
 965         // The category or course is hidden.
 966         &[data-visible="0"] {
 967             .muted;
 968             a.categoryname {
 969                 .muted;
 970             }
 971             > div {
 972                 > a {
 973                     .muted;
 974                 }
 975                 .item-actions {
 976                     .action-show {
 977                         display:inline;
 978                     }
 979                     .action-hide {
 980                         display:none;
 981                     }
 982                 }
 983             }
 984             > ul .item-actions.category-item-actions {
 985                 // If the category is hidden hide both show and hide icons for sub categories.
 986                 .action-hide,
 987                 .action-show {
 988                     display: none;
 989                 }
 990             }
 991         }
 992         &.highlight {
 993             background-color:transparent;
 994             > div,
 995             > div:hover,
 996             &[data-selected='1'] > div {
 997                 background-color:#ddffaa;
 998             }
 999         }
1000     }
1001
1002     #course-listing {
1003         .listitem {
1004             .categoryname {
1005                 display:inline-block;
1006                 margin-left:1em;
1007                 color:#a1a1a8;
1008             }
1009             .coursename {
1010                 display:inline-block;
1011             }
1012             .drag-handle {
1013                 display:inline-block;
1014                 margin: 0 6px 0 0;
1015             }
1016             > div {
1017                 padding-left:1rem;
1018             }
1019         }
1020         > .firstpage .listitem:first-child > div .item-actions .action-moveup,
1021         > .lastpage .listitem:last-child > div .item-actions .action-movedown {
1022           display: none;
1023         }
1024         .bulk-action-checkbox {
1025             vertical-align:middle;
1026             margin:-2px 6px 0 0;
1027         }
1028     }
1029     #category-listing {
1030         .listitem.collapsed > ul.ml {
1031             display: none;
1032         }
1033         .listitem {
1034             > div {
1035                 > .ba-checkbox {
1036                     vertical-align:middle;
1037                     width:2.2em;
1038                     text-align:center;
1039                     margin:-1px 0.5em 0 0;
1040                     padding-top:2px;
1041                 }
1042             }
1043             &.highlight > div > .ba-checkbox {
1044                 background-color:#ddffaa;
1045             }
1046             &[data-selected='1'] > div > .ba-checkbox {
1047                 margin:0 0.5em 0 0;
1048                 padding:0;
1049                 background-color: inherit;
1050             }
1051             &:first-child > div .item-actions .action-moveup,
1052             &:last-child > div .item-actions .action-movedown {
1053               display: none;
1054             }
1055         }
1056         .course-count {
1057             color:#a1a1a8;
1058             margin-right:2rem;
1059             min-width:3.5em;
1060             display:inline-block;
1061             .smallicon {
1062                 width:0.8rem;
1063                 height:0.8rem;
1064                 vertical-align:middle;
1065                 margin:0 0.3rem;
1066             }
1067         }
1068         .bulk-action-checkbox {
1069             vertical-align:middle;
1070             margin-right: -3px;
1071         }
1072         .category-listing > ul > .listitem:first-child {
1073             position:relative;
1074         }
1075         .category-bulk-actions {
1076             margin: 0 0.5em 0.5em;
1077             position:relative;
1078         }
1079     }
1080
1081     .detail-pair {
1082         border-bottom:1px solid #e1e1e8;
1083         margin:0 1rem;
1084         > * {
1085             display:inline-block;
1086             line-height:2.2rem;
1087         }
1088         .pair-key {
1089             font-weight:bold;
1090             vertical-align: top;
1091             span {
1092                 margin-right: 1rem;
1093                 display:block;
1094             }
1095         }
1096         .pair-value select {
1097             max-width:100%;
1098         }
1099     }
1100
1101     .bulk-actions .detail-pair {
1102         > * {
1103             display:block;
1104             width:100%;
1105         }
1106     }
1107
1108     .listing-pagination {
1109         text-align:center;
1110         .yui3-button {
1111             background-color:#FFF;
1112             border:0;
1113             margin:0.4rem 0.2rem 0.45rem;
1114             font-size:10.4px;
1115             &.active-page {
1116                 background-color:#E5EFFD;
1117             }
1118         }
1119     }
1120     .listing-pagination-totals {
1121         text-align:center;
1122         &.dimmed {
1123             .muted;
1124             margin:0.4rem 1rem 0.45rem;
1125         }
1126     }
1127     .select-a-category .notifymessage,
1128     .select-a-category .alert {
1129         margin: 1em;
1130     }
1131 }
1132
1133 .dir-rtl #course-category-listings {
1134     #category-listing,
1135     #course-listing {
1136         float: right;
1137         margin-left: 0;
1138     }
1139
1140     .listitem {
1141         > div {
1142             > .float-left {
1143                 float:right;
1144             }
1145             > .float-right {
1146                 float:left;
1147                 text-align:left;
1148             }
1149         }
1150     }
1151     li {
1152         .tree-icon {
1153             margin: 2px 0 0 6px;
1154         }
1155
1156         // Tree item indenting to represent depth.
1157         .tree-icon {margin-right:0;}
1158         li .tree-icon {margin-right:1em;}
1159         li li .tree-icon {margin-right:2em;}
1160         li li li .tree-icon {margin-right:3em;}
1161         li li li li .tree-icon {margin-right:4em;}
1162         li li li li li .tree-icon {margin-right:4.5em;}
1163         li li li li li li .tree-icon {margin-right:5em;}
1164         li li li li li li li .tree-icon {margin-right:5.5em;}
1165     }
1166     #category-listing {
1167         .listitem {
1168             > div {
1169                 margin-right:0.5em;
1170                 margin-left: 0;
1171                 > .ba-checkbox {
1172                   margin:-1px 0 0 0.5em;
1173                 }
1174             }
1175
1176             &[data-selected='1'] > div > .ba-checkbox {
1177                 margin:0 0 0 0.5em;
1178             }
1179         }
1180         .course-count {
1181             margin-left:2rem;
1182         }
1183         .bulk-action-checkbox {
1184             margin-left: -3px;
1185             margin-right: 0;
1186         }
1187     }
1188     #course-listing {
1189         padding-right: 24px;
1190         .listitem {
1191             .idnumber {
1192                 color:#a1a1a8;
1193                 padding-right:2em;
1194             }
1195             .categoryname {
1196                 display:inline-block;
1197                 margin-right:1em;
1198                 margin-left:0;
1199             }
1200             .drag-handle {
1201                 margin: 0 6px 0 6px;
1202             }
1203             > div {
1204                 padding-left:1rem;
1205             }
1206         }
1207         .bulk-action-checkbox {
1208             vertical-align:middle;
1209             margin:-2px 0 0 6px;
1210         }
1211     }
1212   .detail-pair {
1213         .pair-key {
1214             span {
1215                 margin-right:0;
1216                 margin-left: 0;
1217             }
1218         }
1219     }
1220 }
1221
1222 /** Management header styling **/
1223 .coursecat-management-header {
1224     vertical-align:middle;
1225     h2 {
1226         display:inline-block;
1227         text-align:left;
1228     }
1229     > div {
1230         display:inline-block;
1231         float:right;
1232         margin-left:1em;
1233         margin: 10px 0;
1234         line-height:40px;
1235     }
1236     select {
1237         max-width: 300px;
1238         cursor: pointer;
1239         padding: 0.4em 0.5em 0.45em 1em;
1240         vertical-align: baseline;
1241         white-space: nowrap;
1242     }
1243     .moodle-actionmenu {
1244         white-space:nowrap;
1245     }
1246     .moodle-actionmenu[data-enhanced].show .menu a {
1247         padding-left:1em;
1248     }
1249 }
1250 .dir-rtl .coursecat-management-header {
1251     h2 {
1252         text-align:right;
1253     }
1254     > div {
1255         float:left;
1256         margin-right:1em;
1257         margin-left: 0;
1258     }
1259 }
1260 .course-being-dragged-proxy {
1261     border: 0;
1262     color: @linkColor;
1263     vertical-align:middle;
1264     padding: 0 0 0 4em;
1265 }
1266 .course-being-dragged {
1267     .opacity(50);
1268 }
1269
1270 /**
1271  * Display sizes:
1272  * Large displays                   1200        +
1273  * Default displays                  980     1199
1274  * Tablets                           768      979
1275  * Small tablets and large phones    481      767
1276  * Phones                              0      480
1277  */
1278 @media (min-width: 1200px) and (max-width: 1600px) {
1279     #course-category-listings.columns-3 {
1280         background-color:transparent;
1281         border:0;
1282
1283         #category-listing,
1284         #course-listing {
1285             width:50%;
1286         }
1287         #category-listing > div,
1288         #course-listing > div,
1289         #course-detail > div {
1290             border:1px solid #e1e1e8;
1291             background-color:#FFF;
1292         }
1293         #course-detail {
1294             width:100%;
1295             margin-top:1em;
1296         }
1297     }
1298
1299 }
1300
1301 @media (max-width: 1199px) {
1302     #course-category-listings.columns-2,
1303     #course-category-listings.columns-3 {
1304         background-color:transparent;
1305         border:0;
1306         #category-listing,
1307         #course-listing,
1308         #course-detail {
1309             width:100%;
1310             margin:0 0 1em;
1311         }
1312         #category-listing > div,
1313         #course-listing > div,
1314         #course-detail > div {
1315             border:1px solid #e1e1e8;
1316             background-color:#FFF;
1317         }
1318     }
1319 }