MDL-55407 theme_noname: Remove styling and JS from blocks
[moodle.git] / theme / noname / scss / moodle / core.scss
1 /* core.less */
3 /** Page layout CSS starts **/
4 .layout-option-noheader #page-header,
5 .layout-option-nonavbar #page-navbar,
6 .layout-option-nofooter #page-footer,
7 .layout-option-nocourseheader .course-content-header,
8 .layout-option-nocoursefooter .course-content-footer {
9     display:none;
10 }
12 /** Page layout CSS ends **/
14 .dir-ltr,
15 .mdl-left {
16     text-align: left;
17 }
18 .dir-rtl,
19 .mdl-right {
20     text-align: right;
21 }
22 #add,
23 #remove,
24 .centerpara,
25 .mdl-align {
26     text-align: center;
27 }
28 a.dimmed,
29 a.dimmed:link,
30 a.dimmed:visited,
31 a.dimmed_text,
32 a.dimmed_text:link,
33 a.dimmed_text:visited,
34 .dimmed_text,
35 .dimmed_text a,
36 .dimmed_text a:link,
37 .dimmed_text a:visited,
38 .usersuspended,
39 .usersuspended a,
40 .usersuspended a:link,
41 .usersuspended a:visited,
42 .dimmed_category,
43 .dimmed_category a {
44     @extend .text-muted
45 }
46 .activity.label .dimmed_text {
47     opacity: 0.5;
48 }
49 .unlist,
50 .unlist li,
51 .inline-list,
52 .inline-list li,
53 .block .list,
54 .block .list li,
55 .section li.activity,
56 .section li.movehere,
57 .tabtree li {
58     list-style: none;
59     margin: 0;
60     padding: 0;
61 }
62 .inline,
63 .inline-list li {
64     display: inline;
65 }
66 .notifytiny {
67     font-size: $font-size-xs;
68 }
69 .notifytiny li,
70 .notifytiny td {
71     font-size: 100%;
72 }
73 .red,
74 .notifyproblem {
75     @extend .text-warning;
76 }
77 .green,
78 .notifysuccess {
79     @extend .text-success;
80 }
81 .highlight {
82     @extend .text-info;
83 }
84 .reportlink {
85     text-align: right;
86 }
87 a.autolink.glossary:hover {
88     cursor: help;
89 }
90 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
91 .collapsibleregioncaption {
92     white-space: nowrap;
93 }
94 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
95     cursor: pointer;
96 }
97 .collapsibleregioncaption img {
98     vertical-align: middle;
99 }
101 .jsenabled .hiddenifjs {
102     display: none;
104 .visibleifjs {
105     display: none;
107 .jsenabled .visibleifjs {
108     display: inline;
110 .jsenabled .collapsibleregion {
111     overflow: hidden;
113 .jsenabled .collapsed .collapsibleregioninner {
114     visibility: hidden;
116 .collapsible-actions {
117     display: none;
118     text-align: right;
120 .jsenabled .collapsible-actions {
121     display: block;
123 .collapsible-actions .collapseexpand {
124     padding-left: 20px;
125     background: url([[pix:t/collapsed]]) 2px center no-repeat;
127 /* rtl:ignore */
128 .dir-rtl .collapsible-actions .collapseexpand {
129     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
131 .collapsible-actions .collapse-all {
132     background-image: url([[pix:t/expanded]]);
134 .yui-overlay .yui-widget-bd {
135     background-color: #FFEE69;
136     border: 1px solid #A6982B;
137     border-top-color: #D4C237;
138     color: #000000;
139     left: 0;
140     padding: 2px 5px;
141     position: relative;
142     top: 0;
143     z-index: 1;
145 .clearer {
146     background: transparent;
147     border-width: 0;
148     clear: both;
149     display: block;
150     height: 1px;
151     margin: 0;
152     padding: 0;
154 .bold,
155 .warning,
156 .errorbox .title,
157 .pagingbar .title,
158 .pagingbar .thispage {
159     font-weight: bold;
161 img.resize {
162     height: 1em;
163     width: 1em;
165 .block img.resize,
166 .breadcrumb img.resize {
167     height: 0.9em;
168     width: 0.8em;
170 /* Icon styles */
171 img.icon {
172     height: 16px;
173     vertical-align: text-bottom;
174     width: 16px;
175     padding-right: 6px;
177 img.iconsmall {
178     height: 12px;
179     margin-right: 3px;
180     vertical-align: middle;
181     //width: 12px;
182     box-sizing: content-box;
184 img.iconhelp, .helplink img {
185     height: 16px;
186     padding-left: 3px;
187     vertical-align: text-bottom;
188     width: 16px;
190 h1 img.iconhelp, h1 img.icon,
191 h2 img.iconhelp, h2 img.icon,
192 h3 img.iconhelp, h3 img.icon,
193 h4 img.iconhelp, h4 img.icon,
194 h5 img.iconhelp, h5 img.icon,
195 h6 img.iconhelp, h6 img.icon {
196   vertical-align: middle;
197   padding: 4px;
199 img.iconlarge {
200     height: 24px;
201     width: 24px;
202     vertical-align: middle;
204 img.iconsort {
205     vertical-align: text-bottom;
206     padding-left: .3em;
207     margin-bottom: .15em;
209 img.icontoggle {
210     height: 17px;
211     vertical-align: middle;
212     width: 50px;
214 img.iconkbhelp {
215     height: 17px;
216     width: 49px;
218 .boxaligncenter {
219     margin-left: auto;
220     margin-right: auto;
222 .boxalignright {
223     margin-left: auto;
224     margin-right: 0;
226 .boxalignleft {
227     margin-left: 0;
228     margin-right: auto;
230 .boxwidthnarrow {
231     width: 30%;
233 .boxwidthnormal {
234     width: 50%;
236 .boxwidthwide {
237     width: 80%;
239 .headermain {
240     font-weight: bold;
242 #maincontent {
243     display: block;
244     height: 1px;
245     overflow: hidden;
247 img.uihint {
248     cursor: help;
250 #addmembersform table {
251     margin-left: auto;
252     margin-right: auto;
254 table.flexible .emptyrow {
255     display: none;
257 img.emoticon {
258     vertical-align: middle;
259     width: 15px;
260     height: 15px;
262 form.popupform,
263 form.popupform div {
264     display: inline;
266 .arrow_button input {
267     overflow: hidden;
269 .action-icon img.smallicon {
270     vertical-align: text-bottom;
271     margin: 0 0.3em;
274 /** The 1-pixel padding is there to avoid phantom scroll bars on OS X (FF, Safari and Chrome)**/
275 .no-overflow {
276     overflow: auto;
277     padding-bottom: 1px;
279 .pagelayout-report .no-overflow {
280     overflow: visible;
282 .no-overflow > .generaltable {
283     margin-bottom: 0;
285 // Accessibility features
287 // Accessibility: text 'seen' by screen readers but not visual users.
288 .accesshide {
289     position: absolute;
290     left: -10000px;
291     font-weight: normal;
292     font-size: 1em;
294 span.hide,
295 div.hide {
296     display: none;
298 // Accessibility: Skip block link, for keyboard-only users.
299 a.skip-block,
300 a.skip {
301     position: absolute;
302     top: -1000em;
303     font-size: 0.85em;
304     text-decoration: none;
306 a.skip-block:focus,
307 a.skip-block:active,
308 a.skip:focus,
309 a.skip:active {
310     position: static;
311     display: block;
313 .skip-block-to {
314     display: block;
315     height: 1px;
316     overflow: hidden;
318 // Blogs
319 .addbloglink {
320     text-align: center;
322 .blog_entry .audience {
323     text-align: right;
324     padding-right: 4px;
326 .blog_entry .tags {
327     margin-top: 15px;
329 .blog_entry .tags .action-icon img.smallicon {
330     height: 16px;
331     width: 16px;
333 .blog_entry .content {
334     margin-left: 43px;
336 // Group
337 #page-group-index #groupeditform {
338     text-align: center;
340 #doc-contents h1 {
341     margin: 1em 0 0 0;
343 #doc-contents ul {
344     margin: 0;
345     padding: 0;
346     width: 90%;
348 #doc-contents ul li {
349     list-style-type: none;
351 .groupmanagementtable td {
352     vertical-align: top;
354 .groupmanagementtable #existingcell,
355 .groupmanagementtable #potentialcell {
356     width: 42%;
358 .groupmanagementtable #buttonscell {
359     width: 16%;
361 .groupmanagementtable #buttonscell p.arrow_button input {
362     width: auto;
363     min-width: 80%;
364     margin: 0 auto;
366 .groupmanagementtable #removeselect_wrapper,
367 .groupmanagementtable #addselect_wrapper {
368     width: 100%;
370 .groupmanagementtable #removeselect_wrapper label,
371 .groupmanagementtable #addselect_wrapper label {
372     font-weight: normal;
374 #group-usersummary {
375     width: 14em;
377 .groupselector {
378     margin-top: 3px;
379     margin-bottom: 3px;
380     display: inline-block;
382 .groupselector label {
383     display: inline-block;
385 // Data format selector
386 .dataformatselector {
387     margin: 1em 0;
389 .dataformatselector label {
390     display: inline-block;
391     margin: 0 5px 10px 0;
392     line-height: 30px;
393     vertical-align: top;
396 // Login
397 .loginbox {
398     margin: 15px;
399     overflow: visible;
401 .loginbox.twocolumns {
402     margin: 15px;
404 .loginbox h2,
405 .loginbox .subcontent {
406     margin: 5px;
407     padding: 10px;
408     text-align: center;
410 .loginbox .loginpanel .desc {
411     margin: 0;
412     padding: 0;
413     margin-bottom: 5px;
414     margin-top:15px;
416 .loginbox .signuppanel .subcontent {
417     text-align: left;
419 .loginbox .loginsub {
420     margin-left: 0;
421     margin-right: 0;
423 .loginbox .guestsub,
424 .loginbox .forgotsub,
425 .loginbox .potentialidps {
426     margin: 5px 12%;
428 .loginbox .potentialidps .potentialidplist {
429     margin-left: 40%;
431 .loginbox .potentialidps .potentialidplist div {
432     text-align: left;
434 .loginbox .loginform {
435     margin-top: 1em;
436     text-align: left;
438 .loginbox .loginform .form-label {
439     float: left;
440     text-align: right;
441     width: 49%;
442     white-space: nowrap;
444 .loginbox .loginform .form-input {
445     float: right;
446     width: 50%;
448 .loginbox .loginform .form-input input {
449     width: 6em;
451 .loginbox .signupform {
452     margin-top: 1em;
453     text-align: center;
455 .loginbox.twocolumns .loginpanel,
456 .loginbox.twocolumns .signuppanel {
457     width: 48%;
458     border: 0;
459     margin: 0;
460     padding: 0;
461     display: block;
462     float: left;
463     margin-left: 2.76243%;
464     min-height: 30px;
465     margin-bottom: -2000px;
466     padding-bottom: 2000px;
467 //  @include box-sizing(border-box);
470 .loginbox .potentialidp .smallicon {
471     vertical-align: text-bottom;
472     margin: 0 .3em;
475 // Notes
476 .notepost {
477     margin-bottom: 1em;
479 .notepost .userpicture {
480     float: left;
481     margin-right: 5px;
483 .notepost .content,
484 .notepost .footer {
485     clear: both;
487 .notesgroup {
488     margin-left: 20px;
491 // My Moodle
492 .path-my .coursebox .overview {
493     margin: 15px 30px 10px 30px;
495 .path-my .coursebox .info {
496     float: none;
497     margin: 0;
500 // Modules
501 .mod_introbox {
502     padding: 10px;
504 table.mod_index {
505     width: 100%;
508 // Comments
509 .comment-ctrl {
510     font-size: 12px;
511     display: none;
512     margin: 0;
513     padding: 0;
515 .comment-ctrl h5 {
516     margin: 0;
517     padding: 5px;
519 .comment-area {
520     max-width: 400px;
521     padding: 5px;
523 .comment-area textarea {
524     width: 100%;
525     overflow: auto;
526     &.fullwidth {
527         -webkit-box-sizing: border-box;
528         -moz-box-sizing: border-box;
529         box-sizing: border-box;
530     }
532 .comment-area .fd {
533     text-align: right;
535 .comment-meta span {
536     color: gray;
538 .comment-link img {
539     vertical-align: text-bottom;
541 .comment-list {
542     font-size: 11px;
543     overflow: auto;
544     list-style: none;
545     padding: 0;
546     margin: 0;
548 .comment-list li {
549     margin: 2px;
550     list-style: none;
551     margin-bottom: 5px;
552     clear: both;
553     padding: .3em;
554     position: relative;
556 .comment-list li.first {
557     display: none
559 .comment-paging{
560     text-align: center;
562 .comment-paging .pageno{
563     padding: 2px;
565 .comment-paging .curpage{
566     border: 1px solid #CCC;
568 .comment-message .picture {
569     width: 20px;
570     float: left;
572 .comment-message .text {
573     margin: 0;
574     padding: 0;
576 .comment-message .text p {
577     padding: 0;
578     margin: 0 18px 0 0;
580 .comment-delete {
581     position: absolute;
582     top: 0;
583     right: 0;
584     margin: .3em;
586 .comment-report-selectall{
587     display: none
589 .comment-link {
590     display: none
592 .jsenabled .comment-link {
593     display: block
595 .jsenabled .showcommentsnonjs{
596     display: none
598 .jsenabled .comment-report-selectall{
599     display: inline
601 /**
602 * Completion progress report
603 */
604 .completion-expired {
605     @extend .text-warning;
607 .completion-expected {
608     font-size: $font-size-xs;
610 .completion-sortchoice,
611 .completion-identifyfield {
612     font-size: $font-size-xs;
613     vertical-align: bottom;
615 .completion-progresscell {
616     text-align: right;
618 .completion-expired .completion-expected {
619     font-weight: bold;
621 /**
622 * Tags
623 */
624 img.user-image {
625     height: 100px;
626     width: 100px;
628 #tag-search-box {
629     text-align: center;
630     margin: 10px auto;
633 .path-tag .tag-index-items .tagarea {
634     border: 1px solid #E3E3E3;
635     border-radius: 4px;
636     padding: 10px;
637     margin-top: 10px;
640 .path-tag .tag-index-items .tagarea h3 {
641     display: block;
642     padding: 3px 0 10px 0;
643     margin: 0px;
644     font-size: 1.1em;
645     font-weight: bold;
646     line-height: 20px;
647     color: #999;
648     text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
649     text-transform: uppercase;
650     word-wrap: break-word;
651     border-bottom: solid 1px #E3E3E3;
652     margin-bottom: 10px;
655 .path-tag .tagarea .controls,
656 .path-tag .tagarea .taggeditems {
657     @include clearfix();
659 .path-tag .tagarea .controls,
660 .path-tag .tag-backtoallitems {
661     text-align: center;
663 .path-tag .tagarea .controls .gotopage.nextpage {
664     float: right;
666 .path-tag .tagarea .controls .gotopage.prevpage {
667     float: left;
669 .path-tag .tagarea .controls .exclusivemode {
670     display: inline-block;
672 .path-tag .tagarea .controls.controls-bottom {
673     margin-top: 5px;
675 .path-tag .tagarea .controls .gotopage.nextpage::after {
676     padding-right: 5px;
677     padding-left: 5px;
678     content: "»";
680 .path-tag .tagarea .controls .gotopage.prevpage::before {
681     padding-right: 5px;
682     padding-left: 5px;
683     content: "«";
686 span.flagged-tag,
687 tr.flagged-tag,
688 span.flagged-tag a,
689 tr.flagged-tag a {
690     @extend .text-warning;
692 .tag-management-table td,
693 .tag-management-table th {
694     vertical-align: middle;
695     padding: 4px;
697 .tag-management-table .inplaceeditable.inplaceeditingon input {
698     width: 150px;
700 .path-admin-tag .addstandardtags {
701     float: right;
702     img {
703         margin: 0 5px;
704     }
706 .path-tag .tag-relatedtags {
707     padding-top: 10px;
709 .path-tag .tag-management-box {
710     text-align: right;
712 .path-tag .tag-index-toc {
713     padding: 10px;
714     text-align: center;
716 .path-tag .tag-index-toc li,
717 .path-tag .tag-management-box li {
718     margin-left: 5px;
719     margin-right: 5px;
721 .path-tag .tag-management-box li a.edittag {
722     background-image: url([[pix:moodle|i/settings]]);
724 .path-tag .tag-management-box li a.flagasinappropriate {
725     background-image: url([[pix:moodle|i/flagged]]);
727 .path-tag .tag-management-box li a.removefrommyinterests {
728     background-image: url([[pix:moodle|t/delete]]);
730 .path-tag .tag-management-box li a.addtomyinterests {
731     background-image: url([[pix:moodle|t/add]]);
733 .path-tag .tag-management-box li a {
734     background-repeat: no-repeat;
735     background-position: left;
736     padding-left: 17px;
738 .tag_feed.media-list .media .itemimage {
739     float: left;
741 .tag_feed.media-list .media .itemimage img {
742     height: 35px;
743     width: 35px;
745 .tag_feed.media-list .media .media-body {
746     padding-right: 10px;
747     padding-left: 10px;
749 .tag_feed .media .muted a {
750     @extend .text-muted;
752 .tag_cloud {
753     text-align: center;
755 .tag_cloud .inline-list li {
756     padding: 0px 0.2em;
758 .tag_cloud .tag_overflow {
759     margin-top: 1em;
760     font-style: italic;
762 .tag_cloud .s20 {
763     font-size: 2.7em;
765 .tag_cloud .s19 {
766     font-size: 2.6em;
768 .tag_cloud .s18 {
769     font-size: 2.5em;
771 .tag_cloud .s17 {
772     font-size: 2.4em;
774 .tag_cloud .s16 {
775     font-size: 2.3em;
777 .tag_cloud .s15 {
778     font-size: 2.2em;
780 .tag_cloud .s14 {
781     font-size: 2.1em;
783 .tag_cloud .s13 {
784     font-size: 2em;
786 .tag_cloud .s12 {
787     font-size: 1.9em;
789 .tag_cloud .s11 {
790     font-size: 1.8em;
792 .tag_cloud .s10 {
793     font-size: 1.7em;
795 .tag_cloud .s9 {
796     font-size: 1.6em;
798 .tag_cloud .s8 {
799     font-size: 1.5em;
801 .tag_cloud .s7 {
802     font-size: 1.4em;
804 .tag_cloud .s6 {
805     font-size: 1.3em;
807 .tag_cloud .s5 {
808     font-size: 1.2em;
810 .tag_cloud .s4 {
811     font-size: 1.1em;
813 .tag_cloud .s3 {
814     font-size: 1em;
816 .tag_cloud .s2 {
817     font-size: 0.9em;
819 .tag_cloud .s1 {
820     font-size: 0.8em;
822 .tag_cloud .s0 {
823     font-size: 0.7em;
825 .tag_list ul {
826     display: inline;
828 .tag_list.hideoverlimit .overlimit {
829     display:none;
831 .tag_list .tagmorelink {
832     display:none;
834 .tag_list.hideoverlimit .tagmorelink {
835     display:inline;
837 .tag_list.hideoverlimit .taglesslink {
838     display:none;
841 /**
842 * Web Service
843 */
844 #webservice-doc-generator td {
845     text-align: left;
846     border: 0 solid black;
848 /**
849 * Smart Select Element
850 */
851 .smartselect {
852     position: absolute;
854 .smartselect .smartselect_mask {
855     background-color: #fff;
857 .smartselect ul  {
858     padding: 0;
859     margin: 0;
861 .smartselect ul li {
862     list-style: none;
864 .smartselect .smartselect_menu {
865     margin-right: 5px;
867 .safari .smartselect .smartselect_menu {
868     margin-left: 2px;
870 .smartselect .smartselect_menu,
871 .smartselect .smartselect_submenu {
872     border: 1px solid #000;
873     background-color: #FFF;
874     display: none;
876 .smartselect .smartselect_menu.visible,
877 .smartselect .smartselect_submenu.visible {
878     display: block;
880 .smartselect .smartselect_menu_content ul li {
881     position: relative;
882     padding: 2px 5px;
884 .smartselect .smartselect_menu_content ul li a {
885     color: #333;
886     text-decoration: none;
888 .smartselect .smartselect_menu_content ul li a.selectable {
889     color: inherit;
891 .smartselect .smartselect_submenuitem {
892     background-image: url([[pix:moodle|t/collapsed]]);
893     background-repeat: no-repeat;
894     background-position: 100%;
896 /** Spanning mode */
897 .smartselect.spanningmenu .smartselect_submenu {
898     position: absolute;
899     top: -1px;
900     left: 100%;
902 .smartselect.spanningmenu .smartselect_submenu a {
903     white-space: nowrap;
904     padding-right: 16px;
906 .smartselect.spanningmenu .smartselect_menu_content ul li a.selectable:hover {
907     text-decoration: underline;
909 /** Compact mode */
910 .smartselect.compactmenu .smartselect_submenu {
911     position: relative;
912     margin: 2px -3px;
913     margin-left: 10px;
914     display: none;
915     border-width: 0;
916     z-index: 1010;
918 .smartselect.compactmenu .smartselect_submenu.visible {
919     display: block;
921 .smartselect.compactmenu .smartselect_menu {
922     z-index: 1000;
923     overflow: hidden;
925 .smartselect.compactmenu .smartselect_submenu .smartselect_submenu {
926     z-index: 1020;
928 .smartselect.compactmenu .smartselect_submenuitem:hover > .smartselect_menuitem_label {
929     font-weight: bold;
931 /**
932 * Registration
933 */
934 #page-admin-registration-register .registration_textfield {
935     width: 300px;
937 /**
938 * Enrol
939 */
940 .userenrolment {
941     width: 100%;
942     border-collapse: collapse;
944 .userenrolment tr {
945     vertical-align:top;
947 .userenrolment td {
948     padding: 0;
949     height: 41px;
951 .userenrolment .subfield {
952     margin-right: 5px;
954 .userenrolment .col_userdetails .subfield {
955     margin-left: 40px;
957 .userenrolment .col_userdetails .subfield_picture {
958     float: left;
959     margin-left: 0;
961 .userenrolment .col_lastseen {
962     width: 150px;
964 .userenrolment .col_role {
965     width: 262px;
967 .userenrolment .col_role .roles,
968 .userenrolment .col_group .groups {
969     margin-right: 30px;
971 .userenrolment .col_role .role,
972 .userenrolment .col_group .group {
973     float: left;
974     padding: 3px;
975     margin: 3px;
976     white-space: nowrap;
978 .userenrolment .col_role .role a,
979 .userenrolment .col_group .group a {
980     margin-left: 3px;
981     cursor: pointer;
983 .userenrolment .col_role .addrole,
984 .userenrolment .col_group .addgroup {
985     float: right;
986     padding: 3px;
987     margin: 3px;
988     > a:hover {
989         border-bottom:1px solid #666;
990     }
992 .userenrolment .col_role .addrole img,
993 .userenrolment .col_group .addgroup img {
994     vertical-align: baseline;
997 .userenrolment .hasAllRoles .col_role .addrole {
998     display: none;
1001 .userenrolment .col_enrol .enrolment {
1002     float: left;
1003     padding: 3px;
1004     margin: 3px;
1006 .userenrolment .col_enrol .enrolment a {
1007     float: right;
1008     margin-left: 3px;
1010 #page-enrol-users {
1011     .enrol_user_buttons {
1012         float: right;
1013         .enrolusersbutton {
1014             display: inline;
1015             div,
1016             form {
1017                 display: inline;
1018                 margin-right: 0;
1019             }
1020         }
1021     }
1022     #filterform {
1023         @extend .card;
1024         display: inline-block;
1025         .fitem {
1026             display: inline-block;
1027             line-height: $line-height * 2;
1028             margin-right: .3em;
1029             white-space: nowrap;
1030             label {
1031                 display: inline;
1032                 line-height: $line-height;
1033                 padding-right: .3em;
1034             }
1035             :before,
1036             :after {
1037                 display: inline;
1038             }
1039         }
1040         div,
1041         fieldset {
1042             display: inline;
1043             float: none;
1044             clear: none;
1045             width: auto;
1046             margin: 0;
1047         }
1048         select,
1049         .ftext input {
1050             width: 7em;
1051         }
1052         input,
1053         select {
1054             margin-bottom: 0;
1055         }
1056     }
1057   .user-enroller-panel .uep-search-results .user .details {
1058     width: 237px;
1059   }
1060   .user-enroller-panel .uep-search-results .cohort .details {
1061     width: 237px;
1062   }
1064 #page-enrol-users .enrol-users-page-action input {
1065     margin-left: 0
1067 .corelightbox {
1068     background-color: #CCC;
1069     position: absolute;
1070     top: 0;
1071     left: 0;
1072     width: 100%;
1073     height: 100%;
1074     text-align: center;
1076 .corelightbox img {
1077     position: fixed;
1078     top: 50%;
1079     left: 50%;
1082 .mod-indent-outer {
1083     display: table;
1085 .mod-indent {
1086     display: table-cell;
1088 .label .mod-indent {
1089   float:left;
1090   padding-top:20px
1093 $mod-indent-size: 30px;
1094 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1095 @for $i from 1 through 16 {
1096    $width: ($i * $mod-indent-size);
1098    .mod-indent-#{$i} {
1099        width: $width;
1100    }
1102 .mod-indent-huge {
1103    width: (16 * $mod-indent-size);
1106 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1107 .resourcecontent .mediaplugin_mp3 object {
1108     height: 25px;
1109     width: 600px
1111 .resourcecontent audio.mediaplugin_html5audio {
1112     width: 600px
1114 /** Large resource images should avoid hidden overflow **/
1115 .resourceimage {
1116     max-width: 100%;
1118 /* Audio player size in 'inline' mode (can only change width, as above) */
1119 .mediaplugin_mp3 object {
1120     height: 15px;
1121     width: 300px
1123 audio.mediaplugin_html5audio {
1124     width: 300px
1126 /* TinyMCE moodle media preview frame should not have padding */
1127 .core_media_preview.pagelayout-embedded #content {
1128     padding: 0;
1130 .core_media_preview.pagelayout-embedded #maincontent {
1131     height: 0;
1133 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1134     padding: 0;
1135     margin: 0;
1136     min-width: 0;
1137     background: none;
1139 .path-rating .ratingtable {
1140     width: 100%;
1141     margin-bottom: 1em;
1143 .path-rating .ratingtable th.rating {
1144     width: 100%;
1146 .path-rating .ratingtable td.rating,
1147 .path-rating .ratingtable td.time {
1148     white-space: nowrap;
1149     text-align: center;
1151 .initialbar {
1152     a, strong {
1153         padding-left: 3px;
1154         padding-right: 3px;
1155     }
1157 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1158 .moodle-dialogue-base .moodle-dialogue-lightbox {
1159     background-color: #AAA;
1161 .moodle-dialogue-base .hidden,
1162 .moodle-dialogue-base .moodle-dialogue-hidden {
1163     display: none;
1165 .no-scrolling {
1166     overflow: hidden;
1168 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1169     left: 0px;
1170     top: 0px;
1171     right: 0px;
1172     bottom: -50px;
1173     position: fixed;
1175 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1176     overflow: auto;
1178 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1179     width: 28px;
1180     height: 16px;
1181     background-size: 100%;
1183 .moodle-dialogue-base .moodle-dialogue {
1184     padding: 0;
1185     margin: 0;
1186     background: none;
1187     border: none;
1188     z-index: 600;
1189     outline: #000 dotted 0;
1191 .moodle-dialogue-base .moodle-dialogue-wrap {
1192     margin-top: -3px;
1193     margin-left: -3px;
1194     background-color: #fff;
1195     border: 1px solid #ccc;
1196     @include border-radius(10px);
1197     @include box-shadow(5px 5px 20px 0 #666);
1199 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd,
1200 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1201     margin: 0;
1202     padding: 5px;
1203     font-size: 12px;
1204     font-weight: normal;
1205     letter-spacing: 1px;
1206     color: #333;
1207     text-align: center;
1208     text-shadow: 1px 1px 1px #fff;
1209     @include border-radius(10px 10px 0 0);
1210     border-bottom: 1px solid #bbb;
1211     background: #ccc;
1212     @include gradient-vertical(#fff, #ccc);
1213     filter: 0;
1215 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1216     margin: 0;
1217     padding: 0;
1218     display: inline;
1219     font-size: 100%;
1220     font-weight: bold;
1222 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1223     padding: 5px;
1225 .moodle-dialogue-base .closebutton {
1226     width: 25px;
1227     height: 15px;
1228     float: right;
1229     vertical-align: middle;
1230     display: inline-block;
1231     cursor: pointer;
1232     padding: 0;
1233     background-image: url([[pix:theme|sprite]]);
1234     background-repeat: no-repeat;
1235     border-style: none;
1237 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1238     padding: 1em;
1239     line-height: 2em;
1240     color: #555;
1241     font-size: 12px;
1243 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-content {
1244     padding: 0;
1245     background: #FFF;
1248 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd {
1249     padding: 10px;
1250     font-size: 16px;
1253 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1254     overflow: auto;
1255     position: absolute;
1256     top: 0px;
1257     bottom: 50px;
1258     left: 0px;
1259     right: 0px;
1260     margin: 0px;
1261     border: 0px;
1263 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd,
1264 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-wrap {
1265     border-radius: 0px;
1267 .moodle-dialogue-confirm .confirmation-dialogue {
1268     text-align: center;
1270 .moodle-dialogue-confirm .confirmation-dialogue input {
1271     text-align: center;
1273 .moodle-dialogue-exception .moodle-exception-message {
1274     text-align: center
1276 .moodle-dialogue-exception .moodle-exception-param label {
1277     font-weight: bold;
1279 .moodle-dialogue-exception .param-stacktrace label {
1280     background-color: #EEE;
1281     border: 1px solid #ccc;
1282     border-bottom-width: 0;
1284 .moodle-dialogue-exception .param-stacktrace pre {
1285     border: 1px solid #ccc;
1286     background-color: #fff;
1288 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1289     color: navy;
1290     font-size: $font-size-sm;
1292 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1293     @extend .text-warning;
1294     font-size: $font-size-sm;
1296 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1297     color: #333;
1298     font-size: 90%;
1299     border-bottom: 1px solid #eee;
1301 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1302     padding: 0;
1303     margin: 0.7em 1em;
1304     text-align: right;
1305     background-color: #FFF;
1306     font-size: 12px;
1308 .moodle-dialogue-confirm .confirmation-message {
1309     margin: 0.5em 1em;
1311 .moodle-dialogue-confirm .confirmation-dialogue input {
1312     min-width: 80px
1314 .moodle-dialogue-exception .moodle-exception-message {
1315     margin: 1em;
1317 .moodle-dialogue-exception .moodle-exception-param {
1318     margin-bottom: 0.5em;
1320 .moodle-dialogue-exception .moodle-exception-param label {
1321     width: 150px;
1323 .moodle-dialogue-exception .param-stacktrace label {
1324     display: block;
1325     margin: 0;
1326     padding: 4px 1em;
1328 .moodle-dialogue-exception .param-stacktrace pre {
1329     display: block;
1330     height: 200px;
1331     overflow: auto;
1333 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1334     display: inline-block;
1335     margin: 4px 0;
1337 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1338     display: inline-block;
1339     width: 50px;
1340     margin: 4px 1em;
1342 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1343     padding-left: 25px;
1344     margin-bottom: 4px;
1345     padding-bottom: 4px;
1347 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1348     opacity: 0.75;
1349     width: 100%;
1350     height: 100%;
1351     top: 0;
1352     left: 0;
1353     background-color: white;
1354     text-align: center;
1355     padding: 10% 0;
1357 /* Apply a default max-height on tooltip text */
1358 .moodle-dialogue .tooltiptext {
1359     max-height: 300px;
1362 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1363     z-index: 3001;
1365     .moodle-dialogue-bd {
1366         overflow: auto;
1367     }
1370 /**
1371  * Chooser Dialogues (moodle-core-chooserdialogue)
1372  *
1373  * This CSS belong to the chooser dialogue which should work both with, and
1374  * without javascript enabled
1375  */
1376 /* Hide the dialog and it's title */
1377 .chooserdialoguebody,
1378 .choosertitle {
1379     display: none;
1381 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1382     margin: 0;
1384 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1385     padding: 0;
1386     background: #F2F2F2;
1387     @include border-bottom-radius(10px);
1389 /* Center the submit buttons within the area */
1390 .choosercontainer #chooseform .submitbuttons {
1391     padding: 0.7em 0;
1392     text-align: center;
1394 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1395 @media (max-height: 639px) {
1396     .ios.safari .choosercontainer #chooseform .submitbuttons {
1397         padding: 45px 0;
1398     }
1400 .choosercontainer #chooseform .submitbuttons input {
1401     min-width: 100px;
1402     margin: 0 0.5em;
1404 /* Various settings for the options area */
1405 .choosercontainer #chooseform .options {
1406     position: relative;
1407     border-bottom: 1px solid #BBBBBB;
1409 /* Only set these options if we're showing the js container */
1410 .jschooser .choosercontainer #chooseform .alloptions {
1411     overflow-x: hidden;
1412     overflow-y: auto;
1413     max-width: 20.3em;
1414     @include box-shadow(inset 0 0 30px 0px #ccc);
1415     .option {
1416         input[type=radio] {
1417             display: inline-block;
1418         }
1419         .modicon {
1420             display: inline-block;
1421         }
1422         .typename {
1423             display: inline-block;
1424             width: 65%;
1425         }
1426     }
1428 /* Settings for option rows and option subtypes */
1429 .choosercontainer #chooseform .moduletypetitle,
1430 .choosercontainer #chooseform .option,
1431 .choosercontainer #chooseform .nonoption {
1432     margin-bottom: 0;
1433     padding: 0 1.6em 0 1.6em;
1435 .choosercontainer #chooseform .moduletypetitle {
1436     text-transform: uppercase;
1437     padding-top: 1.2em;
1438     padding-bottom: 0.4em;
1440 .choosercontainer #chooseform .option .typename,
1441 .choosercontainer #chooseform .option span.modicon img.icon,
1442 .choosercontainer #chooseform .nonoption .typename,
1443 .choosercontainer #chooseform .nonoption span.modicon img.icon {
1444     padding: 0 0 0 0.5em;
1447 .chooserdialogue-course-modchooser .choosercontainer #chooseform .option span.modicon img.icon,
1448 .chooserdialogue-course-modchooser .choosercontainer #chooseform .nonoption span.modicon img.icon {
1449     height: 24px;
1450     width: 24px;
1452 .choosercontainer #chooseform .option input[type=radio],
1453 .choosercontainer #chooseform .option span.typename,
1454 .choosercontainer #chooseform .option span.modicon {
1455     vertical-align: middle;
1457 .choosercontainer #chooseform .option label {
1458     display: block;
1459     padding: 0.3em 0 0.1em 0;
1460     border-bottom: 1px solid #FFFFFF;
1462 .choosercontainer #chooseform .nonoption {
1463     padding-left: 2.7em;
1464     padding-top: 0.3em;
1465     padding-bottom: 0.1em;
1467 .choosercontainer #chooseform .subtype {
1468     margin-bottom: 0;
1469     padding: 0 1.6em 0 3.2em;
1471 .choosercontainer #chooseform .subtype .typename {
1472     margin: 0 0 0 0.2em;
1474 /* The instruction/help area */
1475 .jschooser .choosercontainer #chooseform .instruction,
1476 .jschooser .choosercontainer #chooseform .typesummary {
1477    display: none;
1478     position: absolute;
1479     top: 0;
1480     right: 0;
1481     bottom: 0;
1482     left: 20.3em;
1483     margin: 0;
1484     padding: 1.6em;
1485     background-color: #fff;
1486     overflow-x: hidden;
1487     overflow-y: auto;
1488     line-height: 2em;
1490 /* Selected option settings */
1491 .jschooser .choosercontainer #chooseform .instruction,
1492 .choosercontainer #chooseform .selected .typesummary {
1493     display: block;
1495 .choosercontainer #chooseform .selected {
1496     background-color: #fff;
1497     @include box-shadow(0px 0 10px 0 #ccc);
1499 .section-modchooser-link img.smallicon {
1500     padding: 3px;
1502 /* Form element: listing */
1503 .formlistingradio {
1504     padding-bottom: 25px;
1505     padding-right: 10px;
1507 .formlistinginputradio {
1508     float: left;
1510 .formlistingmain {
1511     min-height: 225px;
1513 .formlisting {
1514     position: relative;
1515     margin: 15px 0;
1516     padding: 1px 19px 14px;
1517     background-color: white;
1518     border: 1px solid #DDD;
1519     @include border-radius(4px);
1521 .formlistingmore {
1522     position: absolute;
1523     cursor: pointer;
1524     bottom: -1px;
1525     right: -1px;
1526     padding: 3px 7px;
1527     font-size: 12px;
1528     font-weight: bold;
1529     background-color: whiteSmoke;
1530     border: 1px solid #ddd;
1531     color: #9DA0A4;
1532     @include border-radius(4px 0 4px 0);
1534 .formlistingall {
1535     margin: 15px 0;
1536     padding: 0;
1537     @include border-radius(4px);
1539 .formlistingrow {
1540     cursor: pointer;
1541     border-bottom: 1px solid;
1542     border-color: #E1E1E8;
1543     border-left: 1px solid #E1E1E8;
1544     border-right: 1px solid #E1E1E8;
1545     background-color: #F7F7F9;
1546     @include border-radius(0 0 4px 4px);
1547     padding: 6px;
1548     top: 50%;
1549     left: 50%;
1550     min-height: 34px;
1551     float: left;
1552     width: 150px;
1554 body.jsenabled .formlistingradio {
1555     display: none;
1557 body.jsenabled .formlisting {
1558     display: block;
1561 /* Badges styles */
1562 table.collection {
1563     @extend .table;
1564     @extend .table-bordered;
1565     @extend .table-striped;
1567 table.collection .name {
1568     text-align: left;
1569     vertical-align: middle;
1571 table.collection .awards {
1572     width: 10%;
1573     text-align: center;
1574     vertical-align: middle;
1576 table.collection .criteria {
1577     width: 40%;
1578     text-align: left;
1579     vertical-align: top;
1581 table.collection .badgeimage,
1582 table.collection .status {
1583     width: 15%;
1584     text-align: center;
1585     vertical-align: middle;
1587 table.collection .description {
1588     width: 25%;
1589     text-align: left;
1591 table.collection .actions {
1592     width: 11em;
1593     text-align: center;
1594     vertical-align: middle;
1597 a.criteria-action {
1598     padding: 0px 3px;
1599     float: right;
1601 div.criteria-description {
1602     padding: 10px 15px;
1603     margin: 5px 0px;
1604     background: none repeat scroll 0 0 #f9f9f9;
1605     border: 1px solid #EEE;
1607 ul.badges {
1608     margin: 0;
1609     list-style: none;
1611 .badges li {
1612     position: relative;
1613     display: inline-block;
1614     padding-top: 1em;
1615     text-align: center;
1616     vertical-align: top;
1617     width: 150px;
1619 .badges li .badge-name {
1620     display: block;
1621     padding: 5px;
1623 .badges li > img {
1624     position: absolute;
1626 .badges li .badge-image {
1627     width: 100px;
1628     height: 100px;
1629     left: 10px;
1630     top: 0px;
1631     z-index: 1;
1633 .badges li .badge-actions {
1634     position: relative;
1636 .badges li .expireimage {
1637     width: 100px;
1638     height: 100px;
1639     left: 25px;
1640     top: 0px;
1641     position: absolute;
1642     z-index: 10;
1643     opacity: 0.85;
1646 #badge-image {
1647     background-color: transparent;
1648     padding: 0;
1649     position: relative;
1650     min-width: 100px;
1651     width: 20%;
1652     display: inline-block;
1653     vertical-align: top;
1654     margin-top: 17px;
1656     .expireimage {
1657         width: 100px;
1658         height: 100px;
1659         left: 0px;
1660         top: 0px;
1661         opacity: 0.85;
1662         position: absolute;
1663         z-index:10;
1664     }
1666     .singlebutton {
1667         padding-top: 5px;
1669         input {
1670             margin-left: 0px;
1671         }
1672     }
1674 #badge-details {
1675     display: inline-block;
1676     width: 79%;
1679 #badge-overview dl,
1680 #badge-details dl {
1681     margin: 0;
1683     dt,
1684     dd {
1685         vertical-align: top;
1686         padding: 3px 0;
1687     }
1688     dt {
1689         clear: both;
1690         display: inline-block;
1691         width: 20%;
1692         min-width: 100px;
1693     }
1694     dd {
1695         display: inline-block;
1696         width: 79%;
1697         margin-left: 1%;
1698     }
1701 .badge-profile {
1702     vertical-align: top;
1704 .connected {
1705     @extend .text-success;
1707 .notconnected {
1708     @extend .text-danger;
1710 .connecting {
1711     @extend .text-warning;
1713 #page-badges-award .recipienttable tr td {
1714     vertical-align: top;
1716 #page-badges-award .recipienttable tr td.actions .actionbutton {
1717     margin: 0.3em 0;
1718     padding: 0.5em 0;
1719     width: 100%;
1721 #page-badges-award .recipienttable tr td.existing,
1722 #page-badges-award .recipienttable tr td.potential {
1723     width: 42%;
1726 #issued-badge-table .activatebadge {
1727     display: inline-block;
1729 .statusbox.active {
1730     background-color: $state-success-bg;
1732 .statusbox.inactive {
1733     background-color: $state-warning-bg;
1735 .statusbox {
1736     text-align: center;
1737     margin-bottom: 5px;
1738     padding: 5px;
1740 .statusbox .activatebadge {
1741     display: inline-block;
1743 .statusbox .activatebadge input[type=submit]{
1744     margin: 3px;
1746 .activatebadge {
1747     margin: 0px;
1748     text-align: left;
1749     vertical-align: middle;
1751 img#persona_signin {
1752     cursor: pointer;
1754 .addcourse {
1755     float: right;
1757 .invisiblefieldset {
1758     display: inline;
1759     margin: 0;
1760     padding: 0;
1761     border-width: 0;
1763 .breadcrumb-nav {
1764     float: left;
1765     margin-bottom: 10px;
1767 .breadcrumb-button .singlebutton div {
1768     margin-right: 0;
1770 .breadcrumb-nav .breadcrumb {
1771     margin: 0;
1774 /** Header-bar styles **/
1775 .page-context-header {
1776     // We need to be explicit about the height of the header.
1777     $pageHeaderHeight: 140px;
1779     // Do not remove these rules.
1780     overflow: hidden;
1782     .page-header-image,
1783     .page-header-headings {
1784         display: block;
1785         position: relative;
1786     }
1787     .page-header-image {
1788         float: left;
1789         margin-right: 1em;
1790         margin-bottom: 1em;
1791     }
1792     .page-header-headings {
1793         margin-top: 30px;
1794         margin-bottom: 10px;
1796         h1 {
1797             display: block;
1798         }
1799     }
1801     .page-header-headings,
1802     .header-button-group {
1803         position: relative;
1804         line-height: 24px;
1805         vertical-align: middle;
1806     }
1808     .header-button-group {
1809         display: block;
1810         float: left;
1811         a {
1812             position: relative;
1814             // Don't touch it unless you know exactly what you are doing.
1815             top: -0.4em;
1816         }
1817     }
1820 /** Action menu component styles **/
1821 .moodle-actionmenu,
1822 .moodle-actionmenu > ul,
1823 .moodle-actionmenu > ul > li {
1824     display: inline-block;
1827 .moodle-actionmenu ul {
1828     padding: 0;
1829     margin: 0;
1830     list-style-type: none;
1833 .section_action_menu .moodle-actionmenu ul.menubar {
1834     margin: 0;
1837 .section_action_menu .moodle-actionmenu ul.menu {
1838     margin: 0 10px 10px 0;
1841 .moodle-actionmenu .toggle-display,
1842 .moodle-actionmenu .menu-action-text {
1843     display: none; /** Hidden by default, display none so that we don't take up space. **/
1846 .jsenabled {
1847     .moodle-actionmenu[data-enhance] {
1848         display: block;
1849         .menu {
1850             display:none;
1851         }
1852         .toggle-display {
1853             display: inline; /** JS is enabled, we'll be using it so return display to normal **/
1854             opacity: 0.5;
1855         }
1856         .toggle-display.textmenu {
1857             display: block;
1858             margin-left: 4px;
1859             padding-left: 4px;
1860             padding-right: 4px;
1862             .iconsmall,
1863             .smallicon {
1864                 margin: 4px 4px 4px 0px;
1865                 padding: 8px 4px 0px 2px;
1866                 vertical-align: text-bottom;
1867             }
1869             .caret {
1870                 margin-top: 8px;
1871                 margin-left: 2px;
1872                 border-top-color: $dropdown-link-color;
1873                 &:hover,
1874                 &:active {
1875                     border-top-color: $dropdown-link-active-color;
1876                 }
1877             }
1878         }
1879     }
1880     .moodle-actionmenu[data-enhanced] {
1881         .toggle-display {
1882             opacity: 1;
1883         }
1884         .menu-action-text  {
1885             display:inline;
1886         }
1887     }
1890 .moodle-actionmenu[data-enhanced].show  {
1892     position: relative;
1894     .menu {
1896         display:block;
1897         position: absolute;
1898         text-align: left;
1899         @extend .bg-faded;
1900         border: 1px solid $dropdown-border-color;
1901         z-index:1000;
1902         @include border-radius(5px);
1903         @include box-shadow(5px 5px 20px 0 #666);
1905         a {
1906             display: block;
1907             color: $dropdown-link-color;
1908             padding:2px 1em 2px 28px;
1909             &:hover {
1910                 color: $dropdown-link-hover-color;
1911                 background-color: $dropdown-link-hover-bg;
1912             }
1913             &:first-child {
1914                 @include border-top-radius(4px);
1915             }
1916             &:last-child {
1917                 @include border-bottom-radius(4px);
1918             }
1919         }
1920         a.hidden {
1921             display:none;
1922         }
1923         img {
1924             vertical-align: middle;
1925         }
1926         .iconsmall,
1927         .smallicon {
1928             margin: 4px 4px 4px -24px;
1929             padding: 4px;
1930         }
1931         > li {
1932             display:block;
1933         }
1935         /** bottom left of button **/
1936         &.align-tl-bl {top: 100%;left:0;margin-top: 4px;}
1937         &.align-tr-bl {top: 100%;right: 100%;}
1938         &.align-bl-bl {bottom: 100%;left:0;}
1939         &.align-br-bl {bottom: 100%;right: 100%;}
1940         /** bottom right of button **/
1941         &.align-tl-br {top: 100%;left:100%;}
1942         &.align-tr-br {top: 100%;right: 0;margin-top: 4px;}
1943         &.align-bl-br {bottom: 100%;left:100%;}
1944         &.align-br-br {bottom: 100%;right: 0;}
1945         /** top left of button **/
1946         &.align-tl-tl {top: 0;left:0;}
1947         &.align-tr-tl {top: 0;right: 100%;margin-right: 4px;}
1948         &.align-bl-tl {bottom: 100%;left:0;margin-bottom: 4px;}
1949         &.align-br-tl {bottom: 100%;right: 100%;}
1950         /** top right of button **/
1951         &.align-tl-tr {top: 0;left:100%;margin-left: 4px;}
1952         &.align-tr-tr {top: 0;right: 0;}
1953         &.align-bl-tr {bottom: 100%;left:100%;}
1954         &.align-br-tr {bottom: 100%;right: 0;margin-bottom: 4px;}
1955     }
1956     /** no wrap is set - prevent menu items from wrapping **/
1957     &.nowrap-items .menu > li {
1958         white-space: nowrap;
1959     }
1962 .block .moodle-actionmenu {
1963     text-align: right;
1966 ul.dragdrop-keyboard-drag li {
1967     list-style-type: none;
1970 .block-control-actions .moodle-core-dragdrop-draghandle img {
1971     width: 12px;
1972     height: 12px;
1975 a.disabled:hover,
1976 a.disabled {
1977     text-decoration: none;
1978     cursor: default;
1979     font-style: italic;
1980     color: #808080;
1982 body.lockscroll {
1983   height: 100%;
1984   overflow: hidden;
1987 .progressbar_container {
1988     max-width: 500px;
1989     margin: 0 auto;
1992 /* IE10 only fix for calendar titling */
1993 .ie10 .yui3-calendar-header-label {
1994     display: inline-block;
1997 dd:before,
1998 dd:after {
1999   display: block;
2000   content: " ";
2002 dd:after {
2003   clear: both;
2006 // Active tabs with links should have a different
2007 // cursor to indicate they are clickable.
2008 .nav-tabs > .active > a[href],
2009 .nav-tabs > .active > a[href]:hover,
2010 .nav-tabs > .active > a[href]:focus {
2011     cursor: pointer;
2014 .inplaceeditable {
2016     &.inplaceeditingon {
2017         position: relative;
2019         .editinstructions {
2020             margin-top: -30px;
2021             font-weight: normal;
2022             margin-right: 0;
2023             margin-left: 0;
2024             left: 0;
2025             right: auto;
2026             white-space: nowrap;
2027         }
2029         input {
2030             width: 330px;
2031             height: 16px;
2032             vertical-align: text-bottom;
2033             margin-bottom: 0;
2034         }
2036         select {
2037             margin-bottom: 0;
2038         }
2039     }
2041     .quickediticon img {
2042         opacity: 0.2;
2043     }
2045     .quickeditlink {
2046         color: inherit;
2047         text-decoration: inherit;
2048     }
2050     &:hover .quickeditlink .quickediticon img,
2051     .quickeditlink:focus .quickediticon img {
2052         opacity: 1;
2053     }
2055     &.inplaceeditable-toggle .quickediticon {
2056         display: none;
2057     }
2060 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2061     margin-top: -20px;
2063 // Reset for ul.
2064 ul {
2065     padding-left: 1rem;