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