MDL-55413 theme_noname: action-menu conversion
[moodle.git] / theme / noname / scss / moodle / course.scss
1 /* course.less */
2 /* COURSE CONTENT */
3 .section_add_menus {
4     text-align: right;
5     clear: both;
6 }
7 .section-modchooser {
8     clear: both;
9 }
10 .section_add_menus .horizontal div,
11 .section_add_menus .horizontal form {
12     display: inline;
13 }
14 .section_add_menus optgroup {
15     font-weight: normal;
16     font-style: italic;
17 }
18 /*rtl:ignore*/
19 .section_add_menus .urlselect {
20     text-align: left;
21     margin-left: .4em;
22 }
23 /*rtl:ignore*/
24 .section_add_menus .urlselect select {
25     margin-left: .2em;
26 }
27 .section_add_menus .urlselect img.iconhelp {
28     padding: 0;
29     margin: 0;
30     vertical-align: text-bottom;
31 }
33 .sitetopic ul.section {
34     margin: 0;
35 }
36 .course-content ul.section {
37     margin: 1em;
38 }
39 .section {
40     .side {
41         &.left {
42             float: left;
43         }
44         &.right {
45             float: right;
46         }
47     }
48     .spinner {
49         height: 16px;
50         width: 16px;
51     }
52     .activity {
53         .spinner {
54             left: 100%;
55             position: absolute;
56             vertical-align: text-bottom;
57         }
59         .editing_move {
60             /* Move the move icon to the start of the line */
61             position: absolute;
62             left: 0;
63             top: 0;
64         }
66         .mod-indent-outer {
67             /**
68              * Add appropriate padding such that nothing overlaps the
69              * absolute positioned move icon.
70              */
71             padding-left: 32px;
72         }
74         /* The command block for each activity */
75         .actions {
76             position: absolute;
77             right: 0;
78             top: 0;
79         }
81         .contentwithoutlink,
82         .activityinstance {
84             min-width: 40%;
85             display: table-cell;
86             padding-right: 4px;
87             min-height: 2em;
89             .dimmed {
90                 img.activityicon {
91                   opacity: 0.5;
92                   filter: alpha(opacity=50);
93                 }
94             }
95         }
96     }
97     .label {
98       .contentwithoutlink,
99       .activityinstance {
100         padding-right: 32px;
101         display: block;
102         height: inherit;
103       }
105       .mod-indent-outer {
106         padding-left: 24px;
107         display: block;
108       }
109     }
111     .filler {
112         width: 16px;
113         height: 16px;
114         padding: 0.3em;
115         display: inline-block;
116     }
118     .activity.editor_displayed {
119         a.editing_title,
120         .moodle-actionmenu {
121             display: none;
122         }
123         div.activityinstance {
124             padding-right: initial;
126             input {
127                 margin-bottom: initial;
128                 padding-top: initial;
129                 padding-bottom: initial;
130                 vertical-align: text-bottom;
131             }
132         }
133     }
136 .activity img.activityicon {
137     margin-right: 6px;
138     vertical-align: text-bottom;
140 .section .activity .activityinstance,
141 .section .activity .activityinstance div {
142     display: inline-block;
144 .editing {
145     .section {
146         .activity {
147             .contentwithoutlink,
148             .activityinstance {
149                 padding-right: 200px;
150             }
151         }
152     }
155 .editing_show + .editing_assign,
156 .editing_hide + .editing_assign {
157     // if roles icon missing, add space
158     margin-left: 20px;
160 .section .activity .commands {
161     white-space: nowrap;
162     display: inline;
164 .section .activity.modtype_label.label {
165     font-weight: normal;
166     padding: .2em;
168 .section li.activity {
169     padding: .2em;
170     clear: both;
172 .section .activity .activityinstance .groupinglabel {
173     padding-left: 30px;
175 .section .activity .availabilityinfo,
176 .section .activity .contentafterlink {
177     margin-top: 0.5em;
178     margin-left: 30px;
180 .section .activity .contentafterlink p {
181     margin: .5em 0;
183 .editing .section .activity:hover,
184 .editing .section .activity.action-menu-shown {
185     background-color: $gray-lighter;
187 .course-content .current {
188     @extend .label-info;
190 .course-content .section-summary {
191     border: 1px solid $table-border-color;
192     margin-top: 5px;
193     list-style: none;
195 .course-content .section-summary .section-title  {
196     margin: 2px 5px 10px 5px;
198 .course-content .section-summary .summarytext {
199     margin: 2px 5px 2px 5px;
201 .course-content .section-summary .section-summary-activities .activity-count {
202     @extend .text-muted;
203     font-size: $font-size-sm;
204     margin: 3px;
205     white-space: nowrap;
206     display: inline-block;
208 .course-content .section-summary .summary {
209     margin-top: 5px;
211 .course-content .single-section {
212     margin-top: 1em;
214 .course-content .single-section .section-navigation {
215     display: block;
216     padding: 0.5em;
217     margin-bottom: -0.5em;
219 .course-content .single-section .section-navigation .title {
220     font-weight: bold;
221     font-size: 108%;
222     clear: both;
224 .course-content .single-section .section-navigation .mdl-left {
225     font-weight: normal;
226     float: left;
227     margin-right: 1em;
229 .course-content .single-section .section-navigation .mdl-left .larrow {
230     margin-right: 0.1em;
232 .course-content .single-section .section-navigation .mdl-right {
233     font-weight: normal;
234     float: right;
235     margin-left: 1em;
237 .course-content .single-section .section-navigation .mdl-right .rarrow {
238     margin-left: 0.1em;
240 .course-content .single-section .section-navigation .mdl-bottom {
241     margin-top: 0;
243 .course-content ul li.section.main {
244     border-bottom: 2px solid $table-border-color;
245     margin-top: 0;
247 .course-content ul li.section.hidden {
248     .sectionname > span,
249     .content > div,  /* All the divs but the activities which are in a UL. */
250     .activity .activityinstance {
251         opacity: .5;
252     }
253     .sectionname > span,
254     .activity .activityinstance {
255         margin-left: 10px;
256         margin-right: 10px;
257     }
259 .course-content ul.topics li.section .content,
260 .course-content ul.weeks li.section .content {
261     margin-right: 20px;
262     margin-left: 20px;
263     padding: 0;
266 .course-content {
267     margin-top: 0;
270 .course-content ul.topics li.section {
271     padding-bottom: 20px;
274 .course-content ul.topics li.section .summary {
275     margin-left: 25px;
278 .course-content .hidden {
279     display: none;
282 .course-content li {
283     &.section {
284         ul {
285             list-style: disc;
286             ul {
287                 list-style: circle;
288                 ul {
289                     list-style: square;
290                 }
291             }
292         }
293         li {
294             &.activity {
295                 ul {
296                     list-style: disc;
297                     ul {
298                         list-style: circle;
299                         ul {
300                             list-style: square;
301                         }
302                     }
303                 }
304             }
305         }
306     }
309 .path-course-view .completionprogress {
310     margin-left: 25px
313 .path-course-view .completionprogress {
314     display: block;
315     float: right;
316     height: 20px;
317     position: relative;
320 #page-site-index .subscribelink {
321     text-align: right;
323 #site-news-forum h2,
324 #frontpage-course-list h2,
325 #frontpage-category-names h2,
326 #frontpage-category-combo h2 {
327     margin-bottom: 9px;
329 .path-course-view a.reduce-sections {
330     padding-left: 0.2em;
332 .path-course-view .subscribelink {
333     text-align: right;
335 .path-course-view .unread {
336     margin-left: 30px;
338 .path-course-view .block.drag .header {
339     cursor: move;
341 .path-course-view .completionprogress {
342     text-align: right;
344 .path-course-view .single-section .completionprogress {
345     margin-right: 5px;
347 .path-course-view .section .summary {
348     line-height: normal;
351 .path-site li.activity > div,
352 .path-course-view li.activity > div {
353     position: relative;
354     padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
356 .path-course-view li.activity span.autocompletion img {
357     vertical-align: text-bottom;
359 .path-course-view li.activity form.togglecompletion img {
360     max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
362 .path-course-view li.activity form.togglecompletion .ajaxworking {
363     width: 16px;
364     height: 16px;
365     position: absolute;
366     right: 22px;
367     top: 3px;
368     background: url([[pix:i/ajaxloader]]) no-repeat;
371 li.section.hidden span.commands a.editing_hide,
372 li.section.hidden span.commands a.editing_show {
373     cursor: default;
375 ul.weeks h3.sectionname {
376     white-space: nowrap;
378 .editing ul.weeks h3.sectionname {
379     white-space: normal;
382 .single-section h3.sectionname {
383     text-align: center;
384     clear: both;
387 .section img.movetarget {
388     height: 16px;
389     width: 80px;
392 input.titleeditor {
393     width: 330px;
394     vertical-align: text-bottom;
397 span.editinstructions {
398     position: absolute;
399     top: 0;
400     margin-top: -22px;
401     margin-left: 30px;
402     line-height: 16px;
403     font-size: $font-size-sm;
404     padding: .1em .4em;
405     background-color: $state-info-bg;
406     color: $state-info-text;
407     text-decoration: none;
408     z-index: 9999;
409     @include box-shadow(2px 2px 5px 1px #ccc);
410     border: 1px solid $state-info-border;
413 /* Course drag and drop upload styles */
414 #dndupload-status {
415     position: fixed;
416     left:0;
417     width: 40%;
418     margin: 0 30%;
419     padding: 6px;
420     border: 1px solid $state-info-border;
421     text-align: center;
422     background: $state-info-bg;
423     color: $state-info-text;
424     z-index: 1; // Required in order to have this above relatively positioned course content@mixin
425     @include box-shadow(2px 2px 5px 1px #ccc);
426     @include border-radius(8px);
428 .dndupload-preview {
429     color: #909090;
430     border: 1px dashed #909090;
431     list-style: none;
432     margin-top: .2em;
433     padding: .3em;
435 .dndupload-preview img.icon {
436     vertical-align: text-bottom;
437     padding: 0;
439 .dndupload-progress-outer {
440     @extend progress;
442 .dndupload-progress-inner {
443     .progress { @extend .progress-bar; }
445 .dndupload-hidden {
446     display: none;
449 /* COURSES LISTINGS AND COURSE SUMMARY */
450 #page-course-pending .singlebutton,
451 #page-course-index .singlebutton,
452 #page-course-index-category .singlebutton,
453 #page-course-editsection .singlebutton {
454     text-align: center;
456 #page-admin-course-manage #movecourses td img {
457     margin: 0 .22em;
458     vertical-align: text-bottom;
460 #page-admin-course-manage #movecourses td img.icon {
461     padding: 0;
464 #coursesearch {
465     margin-top: 1em;
466     text-align: center;
469 #page-course-pending .pendingcourserequests {
470     margin-bottom: 1em;
472 #page-course-pending .pendingcourserequests .singlebutton {
473     display: inline;
475 #page-course-pending .pendingcourserequests .cell {
476     padding: 0 5px;
478 #page-course-pending .pendingcourserequests .cell.c6 {
479     white-space: nowrap;
482 .coursebox {
483     margin-bottom: 15px;
484     border: 1px dotted #ddd;
485     @include border-radius(4px);
486     padding: 5px;
489 .coursebox > .info > .coursename a {
490     display: block;
491     background-image:url([[pix:moodle|i/course]]);
492     background-repeat: no-repeat;
493     padding-left: 21px;
494     background-position: left 0.2em;
496 .coursebox > .info > .coursename,
497 .coursebox .content .teachers,
498 .coursebox .content .courseimage,
499 .coursebox .content .coursefile {
500     float: left;
501     clear: left;
503 .coursebox .content .teachers,
504 .coursebox .content .courseimage,
505 .coursebox .content .coursefile {
506     width: 40%;
508 .coursebox > .info > h3.coursename {
509     margin: 5px;
510     line-height: 1;
512 .coursebox > .info > .coursename {
513     margin: 5px;
514     padding: 0;
516 .coursebox .content .teachers li {
517     list-style-type:none;
518     padding:0;
519     margin:0;
521 .coursebox .enrolmenticons {
522     padding:3px 0;
523     float:right;
525 .coursebox .moreinfo {
526     padding:3px 0;
527     float:right;
529 .coursebox .enrolmenticons img,
530 .coursebox .moreinfo img {
531     margin:0 .2em;
533 .coursebox .content {
534     clear:both;
536 .coursebox .content .summary,
537 .coursebox .content .coursecat {
538     float:right;
539     width: 55%;
541 .coursebox .content .coursecat {
542     text-align:right;
543     clear:right;
545 .coursebox.remotecoursebox .remotecourseinfo {
546     float:left;
547     width: 40%;
549 .coursebox .content .courseimage img {
550     max-width:100px;
551     max-height:100px;
553 .coursebox .content .coursecat,
554 .coursebox .content .summary,
555 .coursebox .content .courseimage,
556 .coursebox .content .coursefile,
557 .coursebox .content .teachers,
558 .coursebox.remotecoursebox .remotecourseinfo {
559     margin:3px 5px;
560     padding:0;
563 .coursebox.remotehost > .info > .categoryname a {
564     background-image:url([[pix:moodle|i/mnethost]]);
566 .coursebox.collapsed {
567     margin-bottom:0;
569 .coursebox.collapsed > .content {
570     display:none;
572 .courses .coursebox.collapsed {
573     border: 1px solid $table-border-color;
574     padding: 5px;
577 .courses .coursebox.even {
578     background-color:  $table-bg-accent;
580 .courses .coursebox:hover,
581 .course_category_tree .courses > .paging.paging-morelink:hover {
582     background-color:  $table-bg-hover;
585 .course_category_tree .category .numberofcourse {
586     font-size: $font-size-sm;
589 .course_category_tree .controls {
590     visibility: hidden;
592 .course_category_tree .controls div {
593     display:inline;
594     cursor:pointer;
596 .jsenabled .course_category_tree .controls {
597     visibility: visible;
599 .course_category_tree .controls {
600     margin-bottom:5px;
601     text-align:right;
602     float:right;
604 .course_category_tree .controls div {
605     padding-right:2em;
606     font-size:75%;
609 .course_category_tree .category > .info > .categoryname{
610     background-image:url([[pix:moodle|t/collapsed_empty]]);
611     background-repeat: no-repeat;
612     padding:2px 18px;
613     margin:3px;
614     background-position:center left;
616 /* rtl:ignore */
617 .dir-rtl .course_category_tree .category > .info > .categoryname {
618     background-image:url([[pix:moodle|t/collapsed_empty_rtl]]);
620 .course_category_tree .category.with_children > .info > .categoryname {
621     background-image:url([[pix:moodle|t/expanded]]);
622     cursor: pointer;
624 .course_category_tree .category.with_children.collapsed >.info > .categoryname {
625     background-image:url([[pix:moodle|t/collapsed]]);
627 /* rtl:ignore */
628 .dir-rtl .course_category_tree .category.with_children.collapsed > .info > .categoryname {
629     background-image:url([[pix:moodle|t/collapsed_rtl]]);
631 .course_category_tree .category.collapsed>.content {
632     display:none;
635 .course_category_tree .category >.info {
636     @extend .card;
637     min-height:0;
638     padding:0;
639     margin:3px 0;
640     margin-bottom:3px;
641     clear: both;
643 .course_category_tree.frontpage-category-names .category >.info {
644     background:none;
645     border:none;
646     margin:0;
648 .course_category_tree .category > .content {
649     padding-left:16px;
652 .course_category_tree .subcategories > .paging,
653 .courses > .paging {
654     margin:0;
655     padding:5px;
656     text-align:center;
659 .courses > .paging.paging-morelink,
660 .course_category_tree .subcategories > .paging.paging-morelink {
661     text-align:left;
664 .course_category_tree .paging.paging-morelink a {
665     font-size: $font-size-sm;
668 #page-course-index-category .generalbox.info {
669     margin-bottom: 15px;
670     border: 1px dotted #ddd;
671     @include border-radius(4px);
672     padding: 5px;
675 #page-course-index-category .categorypicker {
676     text-align: center;
677     margin: 10px 0 20px;
680 /**
681  * Course management page
682  * Palette
683  *
684  * Background (reg)         #F5F5F5
685  * Background (light        #fafafa
686  * Background (highlight)   #ddffaa
687  * Borders                  #e1e1e8
688  */
689 #course-category-listings {
690     background-color: $body-bg;
691     margin-bottom:200px;
693     /** Two column layout */
694     &.columns-2 {
695         > #course-listing > div {
696             position:relative;
697             left:-1px;
698         }
699     }
700     /** Three column layout */
701     &.columns-3 > #course-listing > div {
702         height:100%;
703     }
705     > div > div {
706         min-height:300px;
707         > ul.ml > li:first-child > div {
708             border-top:0;
709         }
710     }
711     h3 {
712         margin:0;
713         padding:0.4rem 0.6rem 0.3rem;
714     }
715     h4 {
716         margin:1rem 0 0;
717         padding:0.6rem 1rem 0.5rem;
718     }
719     .moodle-actionmenu {
720         white-space:nowrap;
721     }
723     .moodle-actionmenu[data-enhance] {
724         .toggle-display {
725             img {
726                 width: auto;
727             }
728             &.textmenu {
729                 padding-right: 4px;
731                 .caret {
732                     margin-top: 12px;
733                 }
734             }
735         }
736     }
738     .listing-actions {
739         text-align:center;
740         padding:0.4rem 0.3rem 0.3rem;
741         line-height:2.2em;
742         > a,
743         > .moodle-actionmenu {
744             display:inline-block;
745         }
746         > .moodle-actionmenu .menu a {
747              padding-left:1rem;
748         }
749         .moodle-actionmenu:not([data-enhanced]) {
750             li {line-height:normal;}
751             > .menubar a {
752                 color:inherit;
753                 display:inline-block;
754                 > img {
755                     display:none;
756                 }
757                 .caret {
758                     display: none;
759                 }
760             }
761             > .menu .menu-action-text {
762                 display:inline-block;
763             }
764         }
765     }
766     ul.ml {
767         list-style: none;
768         margin:1rem 0;
769         ul.ml {
770             margin:0;
771         }
772     }
773     li {
774         line-height:2.2em;
775         > div {
776             &:hover {
777                 background-color: $table-bg-hover;
778             }
779         }
780         .tree-icon {
781             margin: 2px 6px 0 0;
782             width:12px;
783             vertical-align:inherit;
784         }
785         &[data-selected='1'] {
786             > div {
787                 background-color: $table-bg-accent;
788             }
789             > div:hover {
790                 background-color: $table-bg-hover;
791             }
792         }
794         // Tree item indenting to represent depth.
795         .tree-icon {margin-left:0;}
796         li .tree-icon {margin-left:1em;}
797         li li .tree-icon {margin-left:2em;}
798         li li li .tree-icon {margin-left:3em;}
799         li li li li .tree-icon {margin-left:4em;}
800         li li li li li .tree-icon {margin-left:4.5em;}
801         li li li li li li .tree-icon {margin-left:5em;}
802         li li li li li li li .tree-icon {margin-left:5.5em;}
803     }
805     .item-actions {
806         margin-right:1em;
807         display:inline-block;
808         display:initial;
809         > a img,
810         .menubar img {
811             margin: 0 4px;
812             height:12px;
813             padding: 0;
814             vertical-align: inherit;
815         }
816         &.show .menu {
817             li {
818                 line-height: 20px;
819             }
820             img {
821                 width: 12px;
822                 max-width:none;
823             }
824         }
825         .menu-action-text {
826             vertical-align: inherit;
827         }
828     }
830     .listitem {
831         > div {
832             > .float-left {
833                 float:left;
834             }
835             > .float-right {
836                 float:right;
837                 text-align:right;
838             }
839             .item-actions {
840                 .action-show {
841                     display:none;
842                 }
843                 .action-hide {
844                     display:inline;
845                 }
846             }
847             .without-actions {
848                 color: #333;
849             }
850             .idnumber {
851                 color:#a1a1a8;
852                 margin-right:2em;
853             }
854         }
855         // The category or course is hidden.
856         &[data-visible="0"] {
857             @extend .text-muted;
858             > div {
859                 > a {
860                     @extend .text-muted;
861                 }
862                 .item-actions {
863                     .action-show {
864                         display:inline;
865                     }
866                     .action-hide {
867                         display:none;
868                     }
869                 }
870             }
871         }
872         &.highlight {
873             background-color: $body-bg;
874             > div,
875             > div:hover,
876             &[data-selected='1'] > div {
877                 background-color: $table-bg-hover;
878             }
879         }
880     }
882     #course-listing {
883         .listitem {
884             .categoryname {
885                 display:inline-block;
886                 margin-left:1em;
887                 color:#a1a1a8;
888             }
889             .coursename {
890                 display:inline-block;
891             }
892             > div {
893                 padding-left:1rem;
894             }
895         }
896         > .firstpage .listitem:first-child > div .item-actions .action-moveup,
897         > .lastpage .listitem:last-child > div .item-actions .action-movedown {
898           display: none;
899         }
900         .bulk-action-checkbox {
901             margin:-2px 6px 0 0;
902         }
903     }
904     #category-listing {
905         .listitem.collapsed > ul.ml {
906             display: none;
907         }
908         .listitem {
909             > div {
910                 > .ba-checkbox {
911                     width:2.2em;
912                     text-align:center;
913                     margin:-1px 0.5em 0 0;
914                     padding-top:2px;
915                 }
916             }
917             &.highlight > div > .ba-checkbox {
918                 background-color: $table-bg-hover;
919             }
920             &[data-selected='1'] > div > .ba-checkbox {
921                 margin:0 0.5em 0 0;
922                 padding:0;
923                 background-color: inherit;
924             }
925             &:first-child > div .item-actions .action-moveup,
926             &:last-child > div .item-actions .action-movedown {
927               display: none;
928             }
929         }
930         .course-count {
931             color:#a1a1a8;
932             margin-right:2rem;
933             min-width:3.5em;
934             display:inline-block;
935         }
936         .bulk-action-checkbox {
937             margin-right: -3px;
938         }
939         .category-listing > ul > .listitem:first-child {
940             position:relative;
941         }
942         .category-bulk-actions {
943             margin: 0 0.5em 0.5em;
944             position:relative;
945         }
946     }
948     .detail-pair {
949         border-bottom:1px solid $table-border-color;
950         margin:0 1rem;
951         > * {
952             display:inline-block;
953             line-height:2.2rem;
954         }
955         .pair-key {
956             font-weight:bold;
957             vertical-align: top;
958             span {
959                 margin-right: 1rem;
960                 display:block;
961             }
962         }
963         .pair-value select {
964             max-width:100%;
965         }
966     }
968     .bulk-actions .detail-pair {
969         > * {
970             display:block;
971             width:100%;
972         }
973     }
975     .listing-pagination {
976         text-align:center;
977         .yui3-button {
978             background-color: $btn-info-bg;
979             border:0;
980             margin:0.4rem 0.2rem 0.45rem;
981             font-size:10.4px;
982             &.active-page {
983                 background-color: $btn-primary-color;
984             }
985         }
986     }
987     .listing-pagination-totals {
988         text-align:center;
989         &.dimmed {
990             @extend .text-muted;
991             margin:0.4rem 1rem 0.45rem;
992         }
993     }
994     .select-a-category .notifymessage,
995     .select-a-category .alert {
996         margin: 1em;
997     }
1000 #course-category-listings #course-listing .listitem .drag-handle {
1001     display: none;
1003 .jsenabled #course-category-listings #course-listing .listitem .drag-handle {
1004     display:inline-block;
1005     margin: 0 6px 0 0;
1006     cursor:pointer;
1009 /** Management header styling **/
1010 .coursecat-management-header {
1011     vertical-align:middle;
1012     h2 {
1013         display:inline-block;
1014         text-align:left;
1015     }
1016     > div {
1017         display:inline-block;
1018         float:right;
1019         line-height:40px;
1020         > div {
1021           margin-left:1em;
1022           margin: 10px 0;
1023           display:inline-block;
1024         }
1025     }
1026     select {
1027         max-width: 300px;
1028         cursor: pointer;
1029         padding: 0.4em 0.5em 0.45em 1em;
1030         vertical-align: baseline;
1031         white-space: nowrap;
1032     }
1033     .view-mode-selector {
1034         .moodle-actionmenu {
1035             white-space:nowrap;
1036             display:inline-block;
1037         }
1038         .moodle-actionmenu[data-enhanced].show .menu a {
1039             padding-left:1em;
1040         }
1041     }
1043 .course-being-dragged-proxy {
1044     border: 0;
1045     color: $link-color;
1046     vertical-align:middle;
1047     padding: 0 0 0 4em;
1049 .course-being-dragged {
1050     opacity: 0.5;
1053 /**
1054  * Display sizes:
1055  * Large displays                   1200        +
1056  * Default displays                  980     1199
1057  * Tablets                           768      979
1058  * Small tablets and large phones    481      767
1059  * Phones                              0      480
1060  */
1061 @media (min-width: 1200px) and (max-width: 1600px) {
1062     #course-category-listings.columns-3 {
1063         background-color: $body-bg;
1064         border:0;
1066         #category-listing,
1067         #course-listing {
1068             width:50%;
1069         }
1070         #category-listing > div,
1071         #course-listing > div,
1072         #course-detail > div {
1073             background-color: $body-bg;
1074         }
1075         #course-detail {
1076             width:100%;
1077             margin-top:1em;
1078         }
1079     }
1083 @media (max-width: 1199px) {
1084     #course-category-listings.columns-2,
1085     #course-category-listings.columns-3 {
1086         background-color: $body-bg;
1087         border:0;
1088         #category-listing,
1089         #course-listing,
1090         #course-detail {
1091             width:100%;
1092             margin:0 0 1em;
1093         }
1094         #category-listing > div,
1095         #course-listing > div,
1096         #course-detail > div {
1097             background-color: $body-bg;
1098         }
1099     }