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