Merge branch 'MDL-44538-master' of https://github.com/lucaboesch/moodle
[moodle.git] / theme / bootstrapbase / less / moodle / core.less
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 .empty-region-side-pre #block-region-side-pre, // Pre region is empty.
13 .empty-region-side-post #block-region-side-post, // Post region is empty.
14 .jsenabled.docked-region-side-post #block-region-side-post, // All post blocks are docked.
15 .jsenabled.docked-region-side-pre #block-region-side-pre { // All pre blocks are docked.
16     display: none;
17 }
19 // Size of default icons.
20 @icon-width: 16px;
21 @icon-height: 16px;
22 // Size of big icons.
23 @icon-big-width: 64px;
24 @icon-big-height: 64px;
26 /* Default Three Columns - All
27 ------------------------------*/
29 .content-only {
30     #region-main-box,
31     #region-main {
32         width: 100%;
33     }
34 }
35 .empty-region-side-pre {
36     &.used-region-side-post {
37         #region-main {
38             width: 100%;
39         }
40     }
41 }
42 .empty-region-side-post {
43     &.used-region-side-pre {
44         #region-main-box {
45             width: 100%;
46         }
47     }
48 }
49 .jsenabled {
50     &.docked-region-side-pre {
51         &.empty-region-side-pre {
52             &.used-region-side-post {
53                 #region-main {
54                     width: 100%;
55                 }
56             }
57         }
58     }
59     &.docked-region-side-post {
60         &.empty-region-side-post {
61             &.used-region-side-pre {
62                 #region-main-box {
63                     width: 100%;
64                 }
65             }
66         }
67     }
68 }
69 .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
70 .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
71     #region-main.span8 {
72         /** Increase the span size by 1 **/
73         .fluid-span(9);
74     }
75     #block-region-side-pre.span4 {
76         /** Decrease the span size by 1 **/
77         .fluid-span(3);
78     }
79 }
81 /** Page layout CSS ends **/
83 .mdl-left {
84     text-align: left;
85 }
86 .mdl-right {
87     text-align: right;
88 }
90 /*rtl:ignore*/
91 .text-ltr {
92     direction: ltr !important;  /* stylelint-disable-line declaration-no-important */
93 }
95 #add,
96 #remove,
97 .centerpara,
98 .mdl-align {
99     text-align: center;
101 a.dimmed,
102 a.dimmed:link,
103 a.dimmed:visited,
104 a.dimmed_text,
105 a.dimmed_text:link,
106 a.dimmed_text:visited,
107 .dimmed_text,
108 .dimmed_text a,
109 .dimmed_text a:link,
110 .dimmed_text a:visited,
111 .usersuspended,
112 .usersuspended a,
113 .usersuspended a:link,
114 .usersuspended a:visited,
115 .dimmed_category,
116 .dimmed_category a {
117     .muted
119 .unlist,
120 .unlist li,
121 .list-unstyled,
122 .list-unstyled li,
123 .inline-list,
124 .inline-list li,
125 .block .list,
126 .block .list li,
127 .section li.activity,
128 .section li.movehere,
129 .tabtree li {
130     list-style: none;
131     margin: 0;
132     padding: 0;
134 .inline,
135 .inline-list li {
136     display: inline;
138 .notifytiny {
139     font-size: @fontSizeMini;
141 .notifytiny li,
142 .notifytiny td {
143     font-size: 100%;
145 .red,
146 .notifyproblem {
147     color: @errorText;
149 .green,
150 .notifysuccess {
151     color: @successText;
153 .highlight {
154     background: @infoBackground;
156 .reportlink {
157     text-align: right;
159 a.autolink.glossary:hover {
160     cursor: help;
162 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
163 .collapsibleregioncaption {
164     white-space: nowrap;
166 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
167     cursor: pointer;
169 .collapsibleregioncaption img {
170     vertical-align: middle;
173 .jsenabled .hiddenifjs {
174     display: none;
176 .visibleifjs {
177     display: none;
179 .jsenabled .visibleifjs {
180     display: inline;
182 .jsenabled .collapsibleregion {
183     overflow: hidden;
185 .jsenabled .collapsed .collapsibleregioninner {
186     visibility: hidden;
188 .collapsible-actions {
189     display: none;
190     text-align: right;
192 .jsenabled .collapsible-actions {
193     display: block;
195 .collapsible-actions .collapseexpand {
196     padding-left: 20px;
197     background: url([[pix:t/collapsed]]) 2px center no-repeat;
199 /*rtl:raw:
200 .collapsible-actions .collapseexpand {
201     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
203 */
204 .collapsible-actions .collapse-all {
205     background-image: url([[pix:t/expanded]]);
207 .yui-overlay .yui-widget-bd {
208     background-color: #ffee69;
209     border: 1px solid #a6982b;
210     border-top-color: #d4c237;
211     color: #000;
212     left: 0;
213     padding: 2px 5px;
214     position: relative;
215     top: 0;
216     z-index: 1;
218 .clearer {
219     background: transparent;
220     border-width: 0;
221     clear: both;
222     display: block;
223     height: 1px;
224     margin: 0;
225     padding: 0;
227 .bold,
228 .warning,
229 .errorbox .title,
230 .pagingbar .title,
231 .pagingbar .thispage {
232     font-weight: bold;
234 img.userpicture {
235     margin-right: 5px;
237 img.resize {
238     height: 1em;
239     width: 1em;
241 .block img.resize,
242 .breadcrumb img.resize {
243     height: 0.9em;
244     width: 0.8em;
246 /* Icon styles */
247 img.icon {
248     height: @icon-height;
249     vertical-align: text-bottom;
250     width: @icon-width;
251     padding-right: 6px;
252     &.iconsize-big {
253         width: @icon-big-width;
254         height: @icon-big-height;
255     }
257 img.iconsmall {
258     height: 12px;
259     margin-right: 3px;
260     vertical-align: middle;
261     width: 12px;
263 img.iconhelp,
264 .helplink img {
265     height: 16px;
266     padding-left: 3px;
267     vertical-align: text-bottom;
268     width: 16px;
270 h1 img.iconhelp,
271 h1 img.icon,
272 h2 img.iconhelp,
273 h2 img.icon,
274 h3 img.iconhelp,
275 h3 img.icon,
276 h4 img.iconhelp,
277 h4 img.icon,
278 h5 img.iconhelp,
279 h5 img.icon,
280 h6 img.iconhelp,
281 h6 img.icon {
282     vertical-align: middle;
283     padding: 4px;
285 img.iconlarge {
286     height: 24px;
287     width: 24px;
288     vertical-align: middle;
290 img.iconsort {
291     vertical-align: text-bottom;
292     padding-left: .3em;
293     margin-bottom: .15em;
295 img.icontoggle {
296     height: 17px;
297     vertical-align: middle;
298     width: 50px;
300 img.iconkbhelp {
301     height: 17px;
302     width: 49px;
304 img.icon-pre {
305     padding-right: 3px;
306     padding-left: 0;
308 img.icon-post {
309     padding-left: 3px;
310     padding-right: 0;
312 .sitelink img {
313     width: 112px;
315 .boxaligncenter {
316     margin-left: auto;
317     margin-right: auto;
319 .boxalignright {
320     margin-left: auto;
321     margin-right: 0;
323 .boxalignleft {
324     margin-left: 0;
325     margin-right: auto;
327 .boxwidthnarrow {
328     width: 30%;
330 .boxwidthnormal {
331     width: 50%;
333 .boxwidthwide {
334     width: 80%;
336 .headermain {
337     font-weight: bold;
339 #maincontent {
340     display: block;
341     height: 1px;
342     overflow: hidden;
344 img.uihint {
345     cursor: help;
347 #addmembersform table {
348     margin-left: auto;
349     margin-right: auto;
351 table.flexible .emptyrow {
352     display: none;
354 img.emoticon {
355     vertical-align: middle;
356     width: 15px;
357     height: 15px;
359 form.popupform,
360 form.popupform div {
361     display: inline;
363 .arrow_button input {
364     overflow: hidden;
366 .action-icon img.smallicon {
367     vertical-align: text-bottom;
368     margin: 0 0.3em;
371 /** The 1-pixel padding is there to avoid phantom scroll bars on OS X (FF, Safari and Chrome)**/
372 .no-overflow {
373     overflow: auto;
374     padding-bottom: 1px;
376 .pagelayout-report .no-overflow {
377     overflow: visible;
379 .no-overflow > .generaltable {
380     margin-bottom: 0;
382 // Accessibility features
384 // Accessibility: text 'seen' by screen readers but not visual users.
385 .accesshide {
386     position: absolute;
387     left: -10000px;
388     font-weight: normal;
389     font-size: 1em;
391 span.hide,
392 div.hide {
393     display: none;
395 // Accessibility: Skip block link, for keyboard-only users.
396 a.skip-block,
397 a.skip {
398     position: absolute;
399     top: -1000em;
400     font-size: 0.85em;
401     text-decoration: none;
403 a.skip-block:focus,
404 a.skip-block:active,
405 a.skip:focus,
406 a.skip:active {
407     position: static;
408     display: block;
410 .skip-block-to {
411     display: block;
412     height: 1px;
413     overflow: hidden;
415 // Blogs
416 .addbloglink {
417     text-align: center;
419 .blog_entry .audience {
420     text-align: right;
421     padding-right: 4px;
423 .blog_entry .tags {
424     margin-top: 15px;
426 .blog_entry .tags .action-icon img.smallicon {
427     height: 16px;
428     width: 16px;
430 .blog_entry .content {
431     margin-left: 43px;
433 // Group
434 #doc-contents h1 {
435     margin: 1em 0 0 0;
437 #doc-contents ul {
438     margin: 0;
439     padding: 0;
440     width: 90%;
442 #doc-contents ul li {
443     list-style-type: none;
445 .groupmanagementtable td {
446     vertical-align: top;
448 .groupmanagementtable #existingcell,
449 .groupmanagementtable #potentialcell {
450     width: 42%;
452 .groupmanagementtable #buttonscell {
453     width: 16%;
455 .groupmanagementtable #buttonscell p.arrow_button input {
456     width: auto;
457     min-width: 80%;
458     margin: 0 auto;
460 .groupmanagementtable #removeselect_wrapper,
461 .groupmanagementtable #addselect_wrapper {
462     width: 100%;
464 .groupmanagementtable #removeselect_wrapper label,
465 .groupmanagementtable #addselect_wrapper label {
466     font-weight: normal;
468 #group-usersummary {
469     width: 14em;
471 .groupselector {
472     margin-top: 3px;
473     margin-bottom: 3px;
474     display: inline-block;
476 .groupselector label {
477     display: inline-block;
479 // Data format selector
480 .dataformatselector {
481     margin: 1em 0;
483 .dataformatselector label {
484     display: inline-block;
485     margin: 0 5px 10px 0;
486     line-height: 30px;
487     vertical-align: top;
490 // Login
491 .loginbox {
492     margin: 15px;
493     overflow: visible;
495 .loginbox.twocolumns {
496     margin: 15px;
498 .loginbox h2,
499 .loginbox .subcontent {
500     margin: 5px;
501     padding: 10px;
502     text-align: center;
504 .loginbox .loginpanel .desc {
505     margin: 0;
506     padding: 0;
507     margin-bottom: 5px;
508     margin-top: 15px;
510 .loginbox .loginsub {
511     margin-left: 0;
512     margin-right: 0;
514 .loginbox .guestsub,
515 .loginbox .forgotsub {
516     margin: 5px 12%;
518 .loginbox .loginform {
519     margin-top: 1em;
520     text-align: left;
522 .loginbox .loginform .form-label {
523     float: left;
524     text-align: right;
525     width: 49%;
526     white-space: nowrap;
528 .loginbox .loginform .form-input {
529     float: right;
530     width: 50%;
532 .loginbox .loginform .form-input input {
533     width: 6em;
535 .loginbox .signupform {
536     margin-top: 1em;
537     text-align: center;
539 .loginbox.twocolumns .loginpanel,
540 .loginbox.twocolumns .signuppanel {
541     width: 48%;
542     border: 0;
543     margin: 0;
544     padding: 0;
545     .box-sizing(border-box);
546     display: block;
547     float: left;
548     margin-left: 2.76243%;
549     min-height: 30px;
550     margin-bottom: -2000px;
551     padding-bottom: 2000px;
553 .loginbox .potentialidp {
554     margin-bottom: 0.3em;
556 .loginbox .potentialidp .smallicon {
557     vertical-align: text-bottom;
558     margin: 0 .3em;
561 // Notes
562 .notepost {
563     margin-bottom: 1em;
565 .notepost .userpicture {
566     float: left;
568 .notepost .content,
569 .notepost .footer {
570     clear: both;
572 .notesgroup {
573     margin-left: 20px;
576 // My Moodle
577 .path-my .coursebox .overview {
578     margin: 15px 30px 10px 30px;
580 .path-my .coursebox .info {
581     float: none;
582     margin: 0;
585 // Modules
586 .mod_introbox {
587     padding: 10px;
589 table.mod_index {
590     width: 100%;
593 // Comments
594 .comment-ctrl {
595     font-size: 12px;
596     display: none;
597     margin: 0;
598     padding: 0;
600 .comment-ctrl h5 {
601     margin: 0;
602     padding: 5px;
604 .comment-area {
605     max-width: 400px;
606     padding: 5px;
608 .comment-area textarea {
609     width: 100%;
610     overflow: auto;
611     &.fullwidth {
612         -webkit-box-sizing: border-box;
613         -moz-box-sizing: border-box;
614         box-sizing: border-box;
615     }
617 .comment-area .fd {
618     text-align: right;
620 .comment-meta span {
621     color: gray;
623 .comment-link img {
624     vertical-align: text-bottom;
626 .comment-list {
627     font-size: 11px;
628     overflow: auto;
629     list-style: none;
630     padding: 0;
631     margin: 0;
633 .comment-list li {
634     margin: 2px;
635     list-style: none;
636     margin-bottom: 5px;
637     clear: both;
638     padding: .3em;
639     position: relative;
641 .comment-list li.first {
642     display: none;
644 .comment-paging {
645     text-align: center;
647 .comment-paging .pageno {
648     padding: 2px;
650 .comment-paging .curpage {
651     border: 1px solid #ccc;
653 .comment-message .picture {
654     width: 20px;
655     float: left;
657 .comment-message .text {
658     margin: 0;
659     padding: 0;
661 .comment-message .text p {
662     padding: 0;
663     margin: 0 18px 0 0;
665 .comment-delete {
666     position: absolute;
667     top: 0;
668     right: 0;
669     margin: .3em;
671 .comment-report-selectall {
672     display: none;
674 .comment-link {
675     display: none;
677 .jsenabled .comment-link {
678     display: block;
680 .jsenabled .showcommentsnonjs {
681     display: none;
683 .jsenabled .comment-report-selectall {
684     display: inline;
686 /**
687 * Completion progress report
688 */
689 .completion-expired {
690     background: @errorBackground;
692 .completion-expected {
693     font-size: @fontSizeMini;
695 .completion-sortchoice,
696 .completion-identifyfield {
697     font-size: @fontSizeMini;
698     vertical-align: bottom;
700 .completion-progresscell {
701     text-align: right;
703 .completion-expired .completion-expected {
704     font-weight: bold;
706 /**
707 * Tags
708 */
709 img.user-image {
710     height: 100px;
711     width: 100px;
713 #tag-search-box {
714     text-align: center;
715     margin: 10px auto;
718 .path-tag .tag-index-items .tagarea {
719     border: 1px solid #e3e3e3;
720     border-radius: 4px;
721     padding: 10px;
722     margin-top: 10px;
725 .path-tag .tag-index-items .tagarea h3 {
726     display: block;
727     padding: 3px 0 10px 0;
728     margin: 0;
729     font-size: 1.1em;
730     font-weight: bold;
731     line-height: 20px;
732     color: #999;
733     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
734     text-transform: uppercase;
735     word-wrap: break-word;
736     border-bottom: solid 1px #e3e3e3;
737     margin-bottom: 10px;
740 .path-tag .tagarea .controls,
741 .path-tag .tagarea .taggeditems {
742     .clearfix();
744 .path-tag .tagarea .controls,
745 .path-tag .tag-backtoallitems {
746     text-align: center;
748 .path-tag .tagarea .controls .gotopage.nextpage {
749     float: right;
751 .path-tag .tagarea .controls .gotopage.prevpage {
752     float: left;
754 .path-tag .tagarea .controls .exclusivemode {
755     display: inline-block;
757 .path-tag .tagarea .controls.controls-bottom {
758     margin-top: 5px;
760 .path-tag .tagarea .controls .gotopage.nextpage::after {
761     /*rtl:remove*/
762     content: "»";
763     /*rtl:raw:
764     content: "«";
765     */
766     padding-right: 5px;
767     padding-left: 5px;
769 .path-tag .tagarea .controls .gotopage.prevpage::before {
770     /*rtl:remove*/
771     content: "«";
772     /*rtl:raw:
773     content: "»";
774     */
775     padding-right: 5px;
776     padding-left: 5px;
779 span.flagged-tag,
780 tr.flagged-tag,
781 span.flagged-tag a,
782 tr.flagged-tag a {
783     color: @errorText;
785 .tag-management-table td,
786 .tag-management-table th {
787     vertical-align: middle;
788     padding: 4px;
790 .tag-management-table .inplaceeditable.inplaceeditingon input {
791     width: 150px;
793 .path-admin-tag .addstandardtags {
794     float: right;
795     img {
796         margin: 0 5px;
797     }
799 .path-tag .tag-relatedtags {
800     padding-top: 10px;
802 .path-tag .tag-management-box {
803     text-align: right;
805 .path-tag .tag-index-toc {
806     padding: 10px;
807     text-align: center;
809 .path-tag .tag-index-toc li,
810 .path-tag .tag-management-box li {
811     margin-left: 5px;
812     margin-right: 5px;
814 .path-tag .tag-management-box li a.edittag {
815     background-image: url([[pix:moodle|i/settings]]);
817 .path-tag .tag-management-box li a.flagasinappropriate {
818     background-image: url([[pix:moodle|i/flagged]]);
820 .path-tag .tag-management-box li a.removefrommyinterests {
821     background-image: url([[pix:moodle|t/delete]]);
823 .path-tag .tag-management-box li a.addtomyinterests {
824     background-image: url([[pix:moodle|t/add]]);
826 .path-tag .tag-management-box li a {
827     background-repeat: no-repeat;
828     background-position: left;
829     padding-left: 17px;
831 .tag_feed.media-list .media .itemimage {
832     float: left;
834 .tag_feed.media-list .media .itemimage img {
835     height: 35px;
836     width: 35px;
838 .tag_feed.media-list .media .media-body {
839     padding-right: 10px;
840     padding-left: 10px;
842 .tag_feed .media .muted a {
843     .muted();
845 .tag_cloud {
846     text-align: center;
848 .tag_cloud .inline-list li {
849     padding: 0 0.2em;
851 .tag_cloud .tag_overflow {
852     margin-top: 1em;
853     font-style: italic;
855 .tag_cloud .s20 {
856     font-size: 2.7em;
858 .tag_cloud .s19 {
859     font-size: 2.6em;
861 .tag_cloud .s18 {
862     font-size: 2.5em;
864 .tag_cloud .s17 {
865     font-size: 2.4em;
867 .tag_cloud .s16 {
868     font-size: 2.3em;
870 .tag_cloud .s15 {
871     font-size: 2.2em;
873 .tag_cloud .s14 {
874     font-size: 2.1em;
876 .tag_cloud .s13 {
877     font-size: 2em;
879 .tag_cloud .s12 {
880     font-size: 1.9em;
882 .tag_cloud .s11 {
883     font-size: 1.8em;
885 .tag_cloud .s10 {
886     font-size: 1.7em;
888 .tag_cloud .s9 {
889     font-size: 1.6em;
891 .tag_cloud .s8 {
892     font-size: 1.5em;
894 .tag_cloud .s7 {
895     font-size: 1.4em;
897 .tag_cloud .s6 {
898     font-size: 1.3em;
900 .tag_cloud .s5 {
901     font-size: 1.2em;
903 .tag_cloud .s4 {
904     font-size: 1.1em;
906 .tag_cloud .s3 {
907     font-size: 1em;
909 .tag_cloud .s2 {
910     font-size: 0.9em;
912 .tag_cloud .s1 {
913     font-size: 0.8em;
915 .tag_cloud .s0 {
916     font-size: 0.7em;
918 .tag_list ul {
919     display: inline;
921 .tag_list.hideoverlimit .overlimit {
922     display: none;
924 .tag_list .tagmorelink {
925     display: none;
927 .tag_list.hideoverlimit .tagmorelink {
928     display: inline;
930 .tag_list.hideoverlimit .taglesslink {
931     display: none;
934 /**
935 * Web Service
936 */
937 #webservice-doc-generator td {
938     text-align: left;
939     border: 0 solid black;
942 /**
943 * Registration
944 */
945 #page-admin-registration-register .registration_textfield {
946     width: 300px;
948 /**
949 * Enrol
950 */
951 .userenrolment {
952     width: 100%;
953     border-collapse: collapse;
955 .userenrolment tr {
956     vertical-align: top;
958 .userenrolment td {
959     padding: 0;
960     height: 41px;
962 .userenrolment .subfield {
963     margin-right: 5px;
965 .userenrolment .col_userdetails .subfield {
966     margin-left: 40px;
968 .userenrolment .col_userdetails .subfield_picture {
969     float: left;
970     margin-left: 0;
972 .userenrolment .col_lastseen {
973     width: 150px;
975 .userenrolment .col_role {
976     width: 262px;
978 .userenrolment .col_role .roles,
979 .userenrolment .col_group .groups {
980     margin-right: 30px;
982 .userenrolment .col_role .role {
983     float: left;
984     padding: 0 3px 3px;
985     margin: 0 3px 3px;
986     white-space: nowrap;
988 .userenrolment .col_group .group {
989     float: left;
990     padding: 3px;
991     margin: 3px;
992     white-space: nowrap;
994 .userenrolment .col_role .role a,
995 .userenrolment .col_group .group a {
996     margin-left: 3px;
997     cursor: pointer;
999 .userenrolment .col_role .addrole,
1000 .userenrolment .col_group .addgroup {
1001     float: right;
1002     padding: 3px;
1003     margin: 3px;
1004     > a:hover {
1005         border-bottom: 1px solid #666;
1006     }
1008 .userenrolment .col_role .addrole img,
1009 .userenrolment .col_group .addgroup img {
1010     vertical-align: baseline;
1013 .userenrolment .hasAllRoles .col_role .addrole {
1014     display: none;
1017 .userenrolment .col_enrol .enrolment {
1018     float: left;
1019     padding: 0 3px 3px;
1020     margin: 0 3px 3px;
1022 .userenrolment .col_enrol .enrolment a {
1023     float: right;
1024     margin-left: 3px;
1026 #page-enrol-users {
1027     .enrol_user_buttons {
1028         float: right;
1029         .enrolusersbutton {
1030             display: inline;
1031             div,
1032             form {
1033                 display: inline;
1034                 margin-right: 0;
1035             }
1036         }
1037     }
1038     #filterform {
1039         .well;
1040         .well-small;
1041         display: inline-block;
1042         .fitem {
1043             display: inline-block;
1044             line-height: @baseLineHeight * 2;
1045             margin-right: .3em;
1046             white-space: nowrap;
1047             label {
1048                 display: inline;
1049                 line-height: @baseLineHeight;
1050                 padding-right: .3em;
1051             }
1052             :before,
1053             :after {
1054                 display: inline;
1055             }
1056         }
1057         div,
1058         fieldset {
1059             display: inline;
1060             float: none;
1061             clear: none;
1062             width: auto;
1063             margin: 0;
1064         }
1065         select,
1066         .ftext input {
1067             width: 7em;
1068         }
1069         input,
1070         select {
1071             margin-bottom: 0;
1072         }
1073     }
1074     .user-enroller-panel .uep-search-results .user .details {
1075         width: 237px;
1076     }
1077     .user-enroller-panel .uep-search-results .cohort .details {
1078         width: 237px;
1079     }
1082 #page-enrol-users .enrol-users-page-action input {
1083     margin-left: 0;
1086 .corelightbox {
1087     background-color: #ccc;
1088     position: absolute;
1089     top: 0;
1090     left: 0;
1091     width: 100%;
1092     height: 100%;
1093     text-align: center;
1095 .corelightbox img {
1096     position: fixed;
1097     top: 50%;
1098     left: 50%;
1101 .mod-indent-outer {
1102     display: table;
1104 .mod-indent {
1105     display: table-cell;
1107 .label .mod-indent {
1108     float: left;
1109     padding-top: 20px;
1112 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1113 @mod-indent-size: 30px;
1114 @mod-indent-levels: 16;
1115 .mod-indent-generate(@n, @i: 1) when (@i =< @n) {
1116     .mod-indent-@{i} {
1117         width: (@i * @mod-indent-size);
1118     }
1119     .mod-indent-generate(@n, (@i + 1));
1121 .mod-indent-generate(@n, @i: 1) when (@i = @n) {
1122     .mod-indent-huge {
1123         width: (@i * @mod-indent-size);
1124     }
1126 .mod-indent-generate(@mod-indent-levels);
1128 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1129 .resourcecontent .mediaplugin_mp3 object {
1130     height: 25px;
1131     width: 600px;
1133 .resourcecontent audio.mediaplugin_html5audio {
1134     width: 600px;
1136 /** Large resource images should avoid hidden overflow **/
1137 .resourceimage {
1138     max-width: 100%;
1140 /* Audio player size in 'inline' mode (can only change width, as above) */
1141 .mediaplugin_mp3 object {
1142     height: 15px;
1143     width: 300px;
1145 audio.mediaplugin_html5audio {
1146     width: 300px;
1148 /* TinyMCE moodle media preview frame should not have padding */
1149 .core_media_preview.pagelayout-embedded #content {
1150     padding: 0;
1152 .core_media_preview.pagelayout-embedded #maincontent {
1153     height: 0;
1155 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1156     padding: 0;
1157     margin: 0;
1158     min-width: 0;
1159     background: none;
1161 /** Fix YUI 2 Treeview for Right to left languages **/
1162 .dir-rtl .ygtvtn,
1163 .dir-rtl .ygtvtm,
1164 .dir-rtl .ygtvtmh,
1165 .dir-rtl .ygtvtmhh,
1166 .dir-rtl .ygtvtp,
1167 .dir-rtl .ygtvtph,
1168 .dir-rtl .ygtvtphh,
1169 .dir-rtl .ygtvln,
1170 .dir-rtl .ygtvlm,
1171 .dir-rtl .ygtvlmh,
1172 .dir-rtl .ygtvlmhh,
1173 .dir-rtl .ygtvlp,
1174 .dir-rtl .ygtvlph,
1175 .dir-rtl .ygtvlphh,
1176 .dir-rtl .ygtvdepthcell,
1177 .dir-rtl .ygtvok,
1178 .dir-rtl .ygtvok:hover,
1179 .dir-rtl .ygtvcancel,
1180 .dir-rtl .ygtvcancel:hover {
1181     width: 18px;
1182     height: 22px;
1183     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1184     background-repeat: no-repeat;
1185     cursor: pointer;
1187 .dir-rtl .ygtvtn {
1188     background-position: 0 -5600px;
1190 .dir-rtl .ygtvtm {
1191     background-position: 0 -4000px;
1193 .dir-rtl .ygtvtmh,
1194 .dir-rtl .ygtvtmhh {
1195     background-position: 0 -4800px;
1197 .dir-rtl .ygtvtp {
1198     background-position: 0 -6400px;
1200 .dir-rtl .ygtvtph,
1201 .dir-rtl .ygtvtphh {
1202     background-position: 0 -7200px;
1204 .dir-rtl .ygtvln {
1205     background-position: 0 -1600px;
1207 .dir-rtl .ygtvlm {
1208     background-position: 0 0;
1210 .dir-rtl .ygtvlmh,
1211 .dir-rtl .ygtvlmhh {
1212     background-position: 0 -800px;
1214 .dir-rtl .ygtvlp {
1215     background-position: 0 -2400px;
1217 .dir-rtl .ygtvlph,
1218 .dir-rtl .ygtvlphh {
1219     background-position: 0 -3200px;
1221 .dir-rtl .ygtvdepthcell {
1222     background-position: 0 -8000px;
1224 .dir-rtl .ygtvok {
1225     background-position: 0 -8800px;
1227 .dir-rtl .ygtvok:hover {
1228     background-position: 0 -8844px;
1230 .dir-rtl .ygtvcancel {
1231     background-position: 0 -8822px;
1233 .dir-rtl .ygtvcancel:hover {
1234     background-position: 0 -8866px;
1236 .dir-rtl.yui-skin-sam .yui-panel .hd {
1237     text-align: right;
1239 .dir-rtl .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
1240     text-align: right;
1242 /** Fix TinyMCE editor right to left **/
1243 .dir-rtl .clearlooks2.ie9 .mceAlert .mceMiddle span,
1244 .dir-rtl .clearlooks2 .mceConfirm .mceMiddle span {
1245     top: 44px;
1247 .dir-rtl .o2k7Skin table,
1248 .dir-rtl .o2k7Skin tbody,
1249 .dir-rtl .o2k7Skin a,
1250 .dir-rtl .o2k7Skin img,
1251 .dir-rtl .o2k7Skin tr,
1252 .dir-rtl .o2k7Skin div,
1253 .dir-rtl .o2k7Skin td,
1254 .dir-rtl .o2k7Skin iframe,
1255 .dir-rtl .o2k7Skin span,
1256 .dir-rtl .o2k7Skin *,
1257 .dir-rtl .o2k7Skin .mceText,
1258 .dir-rtl .o2k7Skin .mceListBox .mceText {
1259     text-align: right;
1261 .path-rating .ratingtable {
1262     width: 100%;
1263     margin-bottom: 1em;
1265 .path-rating .ratingtable th.rating {
1266     width: 100%;
1268 .path-rating .ratingtable td.rating,
1269 .path-rating .ratingtable td.time {
1270     white-space: nowrap;
1271     text-align: center;
1274 .initialbar {
1276     overflow: auto;
1278     .initialbarlabel {
1279         display: inline-block;
1280         width: 6em;
1281         float: left;
1282         overflow: hidden;
1283         text-overflow: ellipsis;
1284         white-space: nowrap;
1285     }
1287     .initialbarall {
1288         float: left;
1289         width: 4em;
1290         margin-bottom: 2px;
1291         overflow: hidden;
1292         text-overflow: ellipsis;
1293         white-space: nowrap;
1294     }
1296     .initialbargroups {
1297         float: left;
1298     }
1300     .initialbargroup {
1301         float: left;
1302         display: inline-block;
1303         white-space: nowrap;
1304         margin: 0;
1305         padding: 0;
1307         li {
1308             float: left;
1309             list-style: none;
1310         }
1311     }
1313     .letter {
1314         display: inline-block;
1315         height: 1.35em;
1316         min-width: 1.35em;
1317         text-align: center;
1319         color: @linkColor;
1320         background: @paginationBackground;
1321         border-width: 1px;
1322         border-color: @paginationBorder;
1323         border-style: solid;
1324     }
1325     .letter:hover,
1326     .letter.active {
1327         color: white;
1328         background-color: @linkColor;
1329     }
1333 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1334 .moodle-dialogue-base .moodle-dialogue-lightbox {
1335     background-color: #aaa;
1337 // Prevent adding backdrops to popups in popups.
1338 .pagelayout-popup {
1339     .moodle-dialogue-base {
1340         .moodle-dialogue-lightbox {
1341             background-color: transparent;
1342         }
1343     }
1345 .moodle-dialogue-base .hidden,
1346 .moodle-dialogue-base .moodle-dialogue-hidden {
1347     display: none;
1349 .no-scrolling {
1350     overflow: hidden;
1352 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1353     left: 0;
1354     top: 0;
1355     right: 0;
1356     bottom: -50px;
1357     position: fixed;
1359 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1360     overflow: auto;
1362 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1363     width: 28px;
1364     height: 16px;
1365     background-size: 100%;
1367 .moodle-dialogue-base .moodle-dialogue {
1368     padding: 0;
1369     margin: 0;
1370     background: none;
1371     border: none;
1372     z-index: 600;
1373     outline: #000 dotted 0;
1375 .moodle-dialogue-base .moodle-dialogue-wrap {
1376     margin-top: -3px;
1377     margin-left: -3px;
1378     background-color: #fff;
1379     border: 1px solid #ccc;
1380     .border-radius(10px);
1381     .box-shadow(5px 5px 20px 0 #666);
1383 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd,
1384 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1385     margin: 0;
1386     padding: 5px;
1387     font-size: 12px;
1388     font-weight: normal;
1389     letter-spacing: 1px;
1390     color: #333;
1391     text-align: center;
1392     text-shadow: 1px 1px 1px #fff;
1393     .border-radius(10px 10px 0 0);
1394     border-bottom: 1px solid #bbb;
1395     background: #ccc;
1396     #gradient > .vertical(#fff, #ccc);
1397     filter: none;
1399 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1400     padding: 0;
1401     display: inline;
1402     font-size: 100%;
1403     font-weight: bold;
1405 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1406     padding: 5px;
1408 .moodle-dialogue-base .closebutton {
1409     width: 25px;
1410     height: 15px;
1411     float: right;
1412     display: inline-block;
1413     cursor: pointer;
1414     padding: 0;
1415     background-image: url([[pix:theme|sprite]]);
1416     background-repeat: no-repeat;
1417     border-style: none;
1419 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1420     padding: 1em;
1421     line-height: 2em;
1422     color: #555;
1423     font-size: 12px;
1425 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-content {
1426     padding: 0;
1427     background: #fff;
1430 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd {
1431     padding: 10px;
1432     font-size: 16px;
1435 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1436     overflow: auto;
1437     position: absolute;
1438     top: 0;
1439     bottom: 50px;
1440     left: 0;
1441     right: 0;
1442     margin: 0;
1443     border: 0;
1445 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd,
1446 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-wrap {
1447     border-radius: 0;
1449 .moodle-dialogue-confirm .confirmation-dialogue {
1450     text-align: center;
1452 .moodle-dialogue-confirm .confirmation-dialogue input {
1453     text-align: center;
1455 .moodle-dialogue-exception .moodle-exception-message {
1456     text-align: center;
1458 .moodle-dialogue-exception .moodle-exception-param label {
1459     font-weight: bold;
1461 .moodle-dialogue-exception .param-stacktrace label {
1462     background-color: #eee;
1463     border: 1px solid #ccc;
1464     border-bottom-width: 0;
1466 .moodle-dialogue-exception .param-stacktrace pre {
1467     border: 1px solid #ccc;
1468     background-color: #fff;
1470 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1471     color: navy;
1472     font-size: @fontSizeSmall;
1474 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1475     color: @errorText;
1476     font-size: @fontSizeSmall;
1478 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1479     color: #333;
1480     font-size: 90%;
1481     border-bottom: 1px solid #eee;
1483 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1484     padding: 0;
1485     margin: 0.7em 1em;
1486     text-align: right;
1487     background-color: #fff;
1488     font-size: 12px;
1490 .moodle-dialogue-confirm .confirmation-message {
1491     margin: 0.5em 1em;
1493 .moodle-dialogue-confirm .confirmation-dialogue input {
1494     min-width: 80px;
1496 .moodle-dialogue-exception .moodle-exception-message {
1497     margin: 1em;
1499 .moodle-dialogue-exception .moodle-exception-param {
1500     margin-bottom: 0.5em;
1502 .moodle-dialogue-exception .moodle-exception-param label {
1503     width: 150px;
1505 .moodle-dialogue-exception .param-stacktrace label {
1506     display: block;
1507     margin: 0;
1508     padding: 4px 1em;
1510 .moodle-dialogue-exception .param-stacktrace pre {
1511     display: block;
1512     height: 200px;
1513     overflow: auto;
1515 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1516     display: inline-block;
1517     margin: 4px 0;
1519 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1520     display: inline-block;
1521     width: 50px;
1522     margin: 4px 1em;
1524 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1525     padding-left: 25px;
1526     margin-bottom: 4px;
1527     padding-bottom: 4px;
1529 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1530     .opacity(75);
1531     width: 100%;
1532     height: 100%;
1533     top: 0;
1534     left: 0;
1535     background-color: white;
1536     text-align: center;
1537     padding: 10% 0;
1539 /* Apply a default max-height on tooltip text */
1540 .moodle-dialogue .tooltiptext {
1541     max-height: 300px;
1544 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1545     z-index: 3001;
1547     .moodle-dialogue-bd {
1548         overflow: auto;
1549     }
1552 /**
1553  * Chooser Dialogues (moodle-core-chooserdialogue)
1554  *
1555  * This CSS belong to the chooser dialogue which should work both with, and
1556  * without javascript enabled
1557  */
1558 /* Hide the dialog and it's title */
1559 .chooserdialoguebody,
1560 .choosertitle {
1561     display: none;
1563 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1564     margin: 0;
1566 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1567     padding: 0;
1568     background: #f2f2f2;
1569     .border-bottom-radius(10px);
1571 /* Center the submit buttons within the area */
1572 .choosercontainer #chooseform .submitbuttons {
1573     padding: 0.7em 0;
1574     text-align: center;
1576 /* Fixed for safari browser on iPhone4S with ios7.*/
1577 @media (max-height: 639px) {
1578     .ios .choosercontainer #chooseform .submitbuttons {
1579         padding: 45px 0;
1580     }
1582 .choosercontainer #chooseform .submitbuttons input {
1583     min-width: 100px;
1584     margin: 0 0.5em;
1586 /* Various settings for the options area */
1587 .choosercontainer #chooseform .options {
1588     position: relative;
1589     border-bottom: 1px solid #bbb;
1591 /* Only set these options if we're showing the js container */
1592 .jschooser .choosercontainer #chooseform .alloptions {
1593     overflow-x: hidden;
1594     overflow-y: auto;
1595     max-width: 20.3em;
1596     .box-shadow(inset 0 0 30px 0 #ccc);
1597     .option {
1598         input[type=radio] {
1599             display: inline-block;
1600         }
1601         .modicon {
1602             display: inline-block;
1603         }
1604         .typename {
1605             display: inline-block;
1606             width: 65%;
1607         }
1608     }
1611 /* Settings for option rows and option subtypes */
1612 .choosercontainer #chooseform .moduletypetitle,
1613 .choosercontainer #chooseform .option,
1614 .choosercontainer #chooseform .nonoption {
1615     margin-bottom: 0;
1616     padding: 0 1.6em 0 1.6em;
1618 .choosercontainer #chooseform .moduletypetitle {
1619     text-transform: uppercase;
1620     padding-top: 1.2em;
1621     padding-bottom: 0.4em;
1623 .choosercontainer #chooseform .option .typename,
1624 .choosercontainer #chooseform .option span.modicon img.icon,
1625 .choosercontainer #chooseform .nonoption .typename,
1626 .choosercontainer #chooseform .nonoption span.modicon img.icon {
1627     padding: 0 0 0 0.5em;
1630 .chooserdialogue-course-modchooser .choosercontainer #chooseform .option span.modicon img.icon,
1631 .chooserdialogue-course-modchooser .choosercontainer #chooseform .nonoption span.modicon img.icon {
1632     height: 24px;
1633     width: 24px;
1635 .choosercontainer #chooseform .option input[type=radio],
1636 .choosercontainer #chooseform .option span.typename,
1637 .choosercontainer #chooseform .option span.modicon {
1638     vertical-align: middle;
1640 .choosercontainer #chooseform .option label {
1641     display: block;
1642     padding: 0.3em 0 0.1em 0;
1643     border-bottom: 1px solid #fff;
1645 .choosercontainer #chooseform .nonoption {
1646     padding-left: 2.7em;
1647     padding-top: 0.3em;
1648     padding-bottom: 0.1em;
1650 .choosercontainer #chooseform .subtype {
1651     margin-bottom: 0;
1652     padding: 0 1.6em 0 3.2em;
1654 .choosercontainer #chooseform .subtype .typename {
1655     margin: 0 0 0 0.2em;
1658 /* The instruction/help area */
1659 .jschooser .choosercontainer #chooseform .instruction,
1660 .jschooser .choosercontainer #chooseform .typesummary {
1661     display: none;
1662     position: absolute;
1663     top: 0;
1664     right: 0;
1665     bottom: 0;
1666     left: 20.3em;
1667     margin: 0;
1668     padding: 1.6em;
1669     background-color: #fff;
1670     overflow-x: hidden;
1671     overflow-y: auto;
1672     line-height: 2em;
1675 /* Selected option settings */
1676 .jschooser .choosercontainer #chooseform .instruction,
1677 .choosercontainer #chooseform .selected .typesummary {
1678     display: block;
1680 .choosercontainer #chooseform .selected {
1681     background-color: #fff;
1682     .box-shadow(0px 0 10px 0 #ccc);
1684 .section-modchooser-link img.smallicon {
1685     padding: 3px;
1687 /* Form element: listing */
1688 .formlistingradio {
1689     padding-bottom: 25px;
1690     padding-right: 10px;
1692 .formlistinginputradio {
1693     float: left;
1695 .formlistingmain {
1696     min-height: 225px;
1698 .formlisting {
1699     position: relative;
1700     margin: 15px 0;
1701     padding: 1px 19px 14px;
1702     background-color: white;
1703     border: 1px solid #ddd;
1704     .border-radius(4px);
1706 .formlistingmore {
1707     position: absolute;
1708     cursor: pointer;
1709     bottom: -1px;
1710     right: -1px;
1711     padding: 3px 7px;
1712     font-size: 12px;
1713     font-weight: bold;
1714     background-color: #f5f5f5;
1715     border: 1px solid #ddd;
1716     color: #9da0a4;
1717     .border-radius(4px 0 4px 0);
1719 .formlistingall {
1720     margin: 15px 0;
1721     padding: 0;
1722     .border-radius(4px);
1724 .formlistingrow {
1725     cursor: pointer;
1726     border-bottom: 1px solid;
1727     border-color: #e1e1e8;
1728     border-left: 1px solid #e1e1e8;
1729     border-right: 1px solid #e1e1e8;
1730     background-color: #f7f7f9;
1731     .border-radius(0 0 4px 4px);
1732     padding: 6px;
1733     top: 50%;
1734     left: 50%;
1735     min-height: 34px;
1736     float: left;
1737     width: 150px;
1739 body.jsenabled .formlistingradio {
1740     display: none;
1742 body.jsenabled .formlisting {
1743     display: block;
1746 /* Badges styles */
1747 table.collection {
1748     .table;
1749     .table-bordered;
1750     .table-striped;
1752 table.collection td.name {
1753     text-align: left;
1754     vertical-align: middle;
1756 table.collection td.awards {
1757     width: 15%;
1758     text-align: center;
1759     vertical-align: middle;
1761 table.collection td.criteria {
1762     width: 40%;
1763     text-align: left;
1764     vertical-align: top;
1766 table.collection td.status {
1767     width: 15%;
1768     text-align: center;
1769     vertical-align: middle;
1771 table.collection td.description {
1772     width: 25%;
1773     text-align: left;
1775 table.collection td.actions {
1776     width: 11em;
1777     text-align: center;
1778     vertical-align: middle;
1780 a.criteria-action {
1781     padding: 0 3px;
1782     float: right;
1784 div.criteria-description {
1785     padding: 10px 15px;
1786     margin: 5px 0;
1787     background: none repeat scroll 0 0 #f9f9f9;
1788     border: 1px solid #eee;
1790 ul.badges {
1791     margin: 0;
1792     list-style: none;
1794 .badges li {
1795     position: relative;
1796     display: inline-block;
1797     padding-top: 1em;
1798     text-align: center;
1799     vertical-align: top;
1800     width: 150px;
1802 .badges li .badge-name {
1803     display: block;
1804     padding: 5px;
1806 .badges li > img {
1807     position: absolute;
1809 .badges li .badge-image {
1810     width: 100px;
1811     height: 100px;
1812     left: 10px;
1813     top: 0;
1814     z-index: 1;
1816 .badges li .badge-actions {
1817     position: relative;
1819 .badges li .expireimage {
1820     width: 100px;
1821     height: 100px;
1822     left: 25px;
1823     top: 0;
1824     position: absolute;
1825     z-index: 10;
1826     opacity: 0.85;
1829 #badge-image {
1830     background-color: transparent;
1831     padding: 0;
1832     position: relative;
1833     min-width: 100px;
1834     width: 20%;
1835     display: inline-block;
1836     vertical-align: top;
1837     margin-top: 17px;
1839     .expireimage {
1840         width: 100px;
1841         height: 100px;
1842         left: 0;
1843         top: 0;
1844         .opacity(85);
1845         position: absolute;
1846         z-index: 10;
1847     }
1849     .singlebutton {
1850         padding-top: 5px;
1852         input {
1853             margin-left: 0;
1854         }
1855     }
1857 #badge-details {
1858     display: inline-block;
1859     width: 79%;
1862 #badge-overview dl,
1863 #badge-details dl {
1864     margin: 0;
1866     dt,
1867     dd {
1868         vertical-align: top;
1869         padding: 3px 0;
1870     }
1871     dt {
1872         clear: both;
1873         display: inline-block;
1874         width: 20%;
1875         min-width: 100px;
1876     }
1877     dd {
1878         display: inline-block;
1879         width: 79%;
1880         margin-left: 1%;
1881     }
1884 .badge-profile {
1885     vertical-align: top;
1887 .connected {
1888     color: @successText;
1890 .notconnected {
1891     color: @errorText;
1893 .connecting {
1894     color: @warningText;
1896 #page-badges-award .recipienttable tr td {
1897     vertical-align: top;
1899 #page-badges-award .recipienttable tr td.actions .actionbutton {
1900     margin: 0.3em 0;
1901     padding: 0.5em 0;
1902     width: 100%;
1904 #page-badges-award .recipienttable tr td.existing,
1905 #page-badges-award .recipienttable tr td.potential {
1906     width: 42%;
1909 #issued-badge-table .activatebadge {
1910     display: inline-block;
1912 .statusbox.active {
1913     background-color: @successBackground;
1915 .statusbox.inactive {
1916     background-color: @warningBackground;
1918 .statusbox {
1919     text-align: center;
1920     margin-bottom: 5px;
1921     padding: 5px;
1923 .statusbox .activatebadge {
1924     display: inline-block;
1926 .statusbox .activatebadge input[type=submit] {
1927     margin: 3px;
1929 .activatebadge {
1930     margin: 0;
1931     text-align: left;
1932     vertical-align: middle;
1934 img#persona_signin {
1935     cursor: pointer;
1937 .addcourse {
1938     float: right;
1940 .invisiblefieldset {
1941     display: inline;
1942     padding: 0;
1943     border-width: 0;
1945 .breadcrumb-nav {
1946     float: left;
1947     margin-bottom: 10px;
1949 .breadcrumb-button .singlebutton div {
1950     margin-right: 0;
1952 .breadcrumb-nav .breadcrumb {
1953     margin: 0;
1956 /** Header-bar styles **/
1957 .page-context-header {
1958     // We need to be explicit about the height of the header.
1959     @pageHeaderHeight: 140px;
1961     // Do not remove these rules.
1962     overflow: hidden;
1964     .page-header-image,
1965     .page-header-headings {
1966         display: block;
1967         position: relative;
1968     }
1969     .page-header-image {
1970         margin-bottom: 1em;
1971     }
1972     .page-header-headings {
1973         margin-top: 30px;
1974         margin-bottom: 10px;
1976         h1 {
1977             display: block;
1978         }
1979     }
1981     .page-header-headings,
1982     .header-button-group {
1983         position: relative;
1984         line-height: 24px;
1985         vertical-align: middle;
1986     }
1988     .header-button-group {
1989         display: block;
1991         a {
1992             position: relative;
1994             // Don't touch it unless you know exactly what you are doing.
1995             top: -0.4em;
1996         }
1997     }
2000 .page-context-header {
2001     .page-header-image {
2002         float: left;
2003         margin-right: 1em;
2004     }
2006     .header-button-group {
2007         float: left;
2008     }
2011 /** Action menu component styles **/
2012 .moodle-actionmenu,
2013 .moodle-actionmenu > ul,
2014 .moodle-actionmenu > ul > li {
2015     display: inline-block;
2018 .moodle-actionmenu ul {
2019     padding: 0;
2020     margin: 0;
2021     list-style-type: none;
2024 .section_action_menu .moodle-actionmenu ul.menubar {
2025     margin: 0;
2028 .section_action_menu .moodle-actionmenu ul.menu {
2029     margin: 0 10px 10px 0;
2032 .moodle-actionmenu .toggle-display,
2033 .moodle-actionmenu .menu-action-text {
2034     display: none; /** Hidden by default, display none so that we don't take up space. **/
2037 .jsenabled {
2038     .moodle-actionmenu[data-enhance] {
2039         display: block;
2040         .menu {
2041             display: none;
2042         }
2043         .toggle-display {
2044             display: inline; /** JS is enabled, we'll be using it so return display to normal **/
2045             .opacity(50);
2046         }
2047         .toggle-display.textmenu {
2048             display: block;
2049             margin-left: 4px;
2050             padding-left: 4px;
2051             padding-right: 4px;
2053             .iconsmall,
2054             .smallicon,
2055             .icon {
2056                 margin: 4px 4px 4px 0;
2057                 padding: 8px 4px 0 2px;
2058                 vertical-align: text-bottom;
2059             }
2061             .caret {
2062                 margin-top: 8px;
2063                 margin-left: 2px;
2064                 border-top-color: @navbarLinkColor;
2065                 &:hover,
2066                 &:active {
2067                     border-top-color: @navbarLinkColorActive;
2068                 }
2069             }
2070         }
2071     }
2072     .moodle-actionmenu[data-enhanced] {
2073         .toggle-display {
2074             .opacity(100);
2075         }
2076         .menu-action-text {
2077             display: inline;
2078         }
2079     }
2082 .moodle-actionmenu[data-enhanced].show {
2084     position: relative;
2086     .menu {
2088         display: block;
2089         position: absolute;
2090         text-align: left;
2091         background-color: @dropdownBackground;
2092         border: 1px solid @dropdownBorder;
2093         z-index: 1000;
2094         .border-radius(5px);
2095         .box-shadow(5px 5px 20px 0 #666);
2097         a {
2098             display: block;
2099             color: @dropdownLinkColor;
2100             padding: 6px 1em 6px 1em;
2101             &:hover {
2102                 color: @dropdownLinkColorHover;
2103                 background-color: @dropdownLinkBackgroundHover;
2104             }
2105         }
2106         a.hidden {
2107             display: none;
2108         }
2109         img {
2110             vertical-align: middle;
2111         }
2112         .iconsmall,
2113         .smallicon {
2114             margin: 4px 4px 4px -24px;
2115             padding: 4px;
2116         }
2117         > li {
2118             display: block;
2119             &:first-child a {
2120                 .border-top-radius(4px);
2121             }
2122             &:last-child a {
2123                 .border-bottom-radius(4px);
2124             }
2125         }
2127         /** bottom left of button **/
2128         &.align-tl-bl {
2129             top: 100%;
2130             left: 0;
2131             margin-top: 4px;
2132         }
2133         &.align-tr-bl {
2134             top: 100%;
2135             right: 100%;
2136         }
2137         &.align-bl-bl {
2138             bottom: 100%;
2139             left: 0;
2140         }
2141         &.align-br-bl {
2142             bottom: 100%;
2143             right: 100%;
2144         }
2145         /** bottom right of button **/
2146         &.align-tl-br {
2147             top: 100%;
2148             left: 100%;
2149         }
2150         &.align-tr-br {
2151             top: 100%;
2152             right: 0;
2153             margin-top: 4px;
2154         }
2156         &.align-bl-br {
2157             bottom: 100%;
2158             left: 100%;
2159         }
2161         &.align-br-br {
2162             bottom: 100%;
2163             right: 0;
2164         }
2165         /** top left of button **/
2166         &.align-tl-tl {
2167             top: 0;
2168             left: 0;
2169         }
2171         &.align-tr-tl {
2172             top: 0;
2173             right: 100%;
2174             margin-right: 4px;
2175         }
2177         &.align-bl-tl {
2178             bottom: 100%;
2179             left: 0;
2180             margin-bottom: 4px;
2181         }
2183         &.align-br-tl {
2184             bottom: 100%;
2185             right: 100%;
2186         }
2187         /** top right of button **/
2188         &.align-tl-tr {
2189             top: 0;
2190             left: 100%;
2191             margin-left: 4px;
2192         }
2194         &.align-tr-tr {
2195             top: 0;
2196             right: 0;
2197         }
2199         &.align-bl-tr {
2200             bottom: 100%;
2201             left: 100%;
2202         }
2204         &.align-br-tr {
2205             bottom: 100%;
2206             right: 0;
2207             margin-bottom: 4px;
2208         }
2210     }
2211     /** no wrap is set - prevent menu items from wrapping **/
2212     &.nowrap-items .menu > li {
2213         white-space: nowrap;
2214     }
2217 .block .moodle-actionmenu {
2218     text-align: right;
2221 ul.dragdrop-keyboard-drag li {
2222     list-style-type: none;
2225 .block-control-actions .moodle-core-dragdrop-draghandle img {
2226     width: 12px;
2227     height: 12px;
2230 a.disabled:hover,
2231 a.disabled {
2232     text-decoration: none;
2233     cursor: default;
2234     font-style: italic;
2235     color: #808080;
2237 body.lockscroll {
2238     height: 100%;
2239     overflow: hidden;
2242 .progressbar_container {
2243     max-width: 500px;
2244     margin: 0 auto;
2247 /* IE10 only fix for calendar titling */
2248 .ie10 .yui3-calendar-header-label {
2249     display: inline-block;
2252 dd:before,
2253 dd:after {
2254     display: block;
2255     content: " ";
2257 dd:after {
2258     clear: both;
2261 // Active tabs with links should have a different
2262 // cursor to indicate they are clickable.
2263 .nav-tabs > .active > a[href],
2264 .nav-tabs > .active > a[href]:hover,
2265 .nav-tabs > .active > a[href]:focus {
2266     cursor: pointer;
2269 .inplaceeditable {
2270     &.inplaceeditingon {
2271         position: relative;
2273         .editinstructions {
2274             margin-top: -30px;
2275             font-weight: normal;
2276             margin-right: 0;
2277             margin-left: 0;
2278             left: 0;
2279             right: auto;
2280             white-space: nowrap;
2281         }
2283         input {
2284             width: 330px;
2285             height: 16px;
2286             vertical-align: text-bottom;
2287             margin-bottom: 0;
2288         }
2290         select {
2291             margin-bottom: 0;
2292         }
2293     }
2295     .quickediticon img {
2296         opacity: 0.2;
2297     }
2299     .quickeditlink {
2300         color: inherit;
2301         text-decoration: inherit;
2302     }
2304     &:hover .quickeditlink .quickediticon img,
2305     .quickeditlink:focus .quickediticon img {
2306         opacity: 1;
2307     }
2309     &.inplaceeditable-toggle .quickediticon {
2310         display: none;
2311     }
2313     &.inplaceeditable-autocomplete {
2314         display: block;
2315     }
2318 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2319     margin-top: -20px;
2322 /** Chart area. */
2323 .chart-area {
2325     .chart-table-data {
2326         display: none;
2327     }
2329     .chart-table {
2330         .chart-output-htmltable caption {
2331             white-space: nowrap;
2332         }
2333         /** When accessible, we display the table only. */
2334         &.accesshide {
2335             .chart-table-expand {
2336                 display: none;
2337             }
2338             .chart-table-data {
2339                 display: block;
2340             }
2341         }
2342     }
2345 .hover-tooltip-container {
2346     position: relative;
2348     .hover-tooltip {
2349         opacity: 0;
2350         visibility: hidden;
2351         position: absolute;
2352         /*rtl:ignore*/
2353         left: 50%;
2354         top: ~"calc(-50% - 5px)";
2355         transform: translate(-50%, -50%);
2356         background-color: #fff;
2357         border: 1px solid rgba(0, 0, 0, .2);
2358         border-radius: .3rem;
2359         box-sizing: border-box;
2360         padding: 5px;
2361         white-space: nowrap;
2362         transition: opacity 0.15s, visibility 0.15s;
2363         z-index: 1000;
2365         &:before {
2366             content: '';
2367             display: inline-block;
2368             border-left: 8px solid transparent;
2369             border-right: 8px solid transparent;
2370             border-top: 8px solid rgba(0, 0, 0, .2);
2371             position: absolute;
2372             bottom: -8px;
2373             left: ~"calc(50% - 8px)";
2374         }
2376         &:after {
2377             content: '';
2378             display: inline-block;
2379             border-left: 7px solid transparent;
2380             border-right: 7px solid transparent;
2381             border-top: 7px solid #fff;
2382             position: absolute;
2383             bottom: -6px;
2384             left: ~"calc(50% - 7px)";
2385             z-index: 2;
2386         }
2387     }
2389     &:hover {
2390         .hover-tooltip {
2391             opacity: 1;
2392             visibility: visible;
2393             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2394         }
2395     }
2398 .clickable {
2399     cursor: pointer;
2402 .overlay-icon-container {
2403     position: absolute;
2404     top: 0;
2405     left: 0;
2406     width: 100%;
2407     height: 100%;
2408     background-color: rgba(255, 255, 255, 0.6);
2410     .loading-icon {
2411         position: absolute;
2412         top: 50%;
2413         left: 50%;
2414         transform: translate(-50%, -50%);
2416         .icon {
2417             height: 30px;
2418             width: 30px;
2419             font-size: 30px;
2420         }
2421     }
2424 [data-drag-type="move"] {
2425     cursor: move;