Merge branch 'MDL-62336_master' of git://github.com/markn86/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 .inline-list,
122 .inline-list li,
123 .block .list,
124 .block .list li,
125 .section li.activity,
126 .section li.movehere,
127 .tabtree li {
128     list-style: none;
129     margin: 0;
130     padding: 0;
132 .inline,
133 .inline-list li {
134     display: inline;
136 .notifytiny {
137     font-size: @fontSizeMini;
139 .notifytiny li,
140 .notifytiny td {
141     font-size: 100%;
143 .red,
144 .notifyproblem {
145     color: @errorText;
147 .green,
148 .notifysuccess {
149     color: @successText;
151 .highlight {
152     background: @infoBackground;
154 .reportlink {
155     text-align: right;
157 a.autolink.glossary:hover {
158     cursor: help;
160 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
161 .collapsibleregioncaption {
162     white-space: nowrap;
164 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
165     cursor: pointer;
167 .collapsibleregioncaption img {
168     vertical-align: middle;
171 .jsenabled .hiddenifjs {
172     display: none;
174 .visibleifjs {
175     display: none;
177 .jsenabled .visibleifjs {
178     display: inline;
180 .jsenabled .collapsibleregion {
181     overflow: hidden;
183 .jsenabled .collapsed .collapsibleregioninner {
184     visibility: hidden;
186 .collapsible-actions {
187     display: none;
188     text-align: right;
190 .jsenabled .collapsible-actions {
191     display: block;
193 .collapsible-actions .collapseexpand {
194     padding-left: 20px;
195     background: url([[pix:t/collapsed]]) 2px center no-repeat;
197 /*rtl:raw:
198 .collapsible-actions .collapseexpand {
199     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
201 */
202 .collapsible-actions .collapse-all {
203     background-image: url([[pix:t/expanded]]);
205 .yui-overlay .yui-widget-bd {
206     background-color: #ffee69;
207     border: 1px solid #a6982b;
208     border-top-color: #d4c237;
209     color: #000;
210     left: 0;
211     padding: 2px 5px;
212     position: relative;
213     top: 0;
214     z-index: 1;
216 .clearer {
217     background: transparent;
218     border-width: 0;
219     clear: both;
220     display: block;
221     height: 1px;
222     margin: 0;
223     padding: 0;
225 .bold,
226 .warning,
227 .errorbox .title,
228 .pagingbar .title,
229 .pagingbar .thispage {
230     font-weight: bold;
232 img.userpicture {
233     margin-right: 5px;
235 img.resize {
236     height: 1em;
237     width: 1em;
239 .block img.resize,
240 .breadcrumb img.resize {
241     height: 0.9em;
242     width: 0.8em;
244 /* Icon styles */
245 img.icon {
246     height: @icon-height;
247     vertical-align: text-bottom;
248     width: @icon-width;
249     padding-right: 6px;
250     &.iconsize-big {
251         width: @icon-big-width;
252         height: @icon-big-height;
253     }
255 img.iconsmall {
256     height: 12px;
257     margin-right: 3px;
258     vertical-align: middle;
259     width: 12px;
261 img.iconhelp,
262 .helplink img {
263     height: 16px;
264     padding-left: 3px;
265     vertical-align: text-bottom;
266     width: 16px;
268 h1 img.iconhelp,
269 h1 img.icon,
270 h2 img.iconhelp,
271 h2 img.icon,
272 h3 img.iconhelp,
273 h3 img.icon,
274 h4 img.iconhelp,
275 h4 img.icon,
276 h5 img.iconhelp,
277 h5 img.icon,
278 h6 img.iconhelp,
279 h6 img.icon {
280     vertical-align: middle;
281     padding: 4px;
283 img.iconlarge {
284     height: 24px;
285     width: 24px;
286     vertical-align: middle;
288 img.iconsort {
289     vertical-align: text-bottom;
290     padding-left: .3em;
291     margin-bottom: .15em;
293 img.icontoggle {
294     height: 17px;
295     vertical-align: middle;
296     width: 50px;
298 img.iconkbhelp {
299     height: 17px;
300     width: 49px;
302 img.icon-pre {
303     padding-right: 3px;
304     padding-left: 0;
306 img.icon-post {
307     padding-left: 3px;
308     padding-right: 0;
310 .sitelink img {
311     width: 112px;
313 .boxaligncenter {
314     margin-left: auto;
315     margin-right: auto;
317 .boxalignright {
318     margin-left: auto;
319     margin-right: 0;
321 .boxalignleft {
322     margin-left: 0;
323     margin-right: auto;
325 .boxwidthnarrow {
326     width: 30%;
328 .boxwidthnormal {
329     width: 50%;
331 .boxwidthwide {
332     width: 80%;
334 .headermain {
335     font-weight: bold;
337 #maincontent {
338     display: block;
339     height: 1px;
340     overflow: hidden;
342 img.uihint {
343     cursor: help;
345 #addmembersform table {
346     margin-left: auto;
347     margin-right: auto;
349 table.flexible .emptyrow {
350     display: none;
352 img.emoticon {
353     vertical-align: middle;
354     width: 15px;
355     height: 15px;
357 form.popupform,
358 form.popupform div {
359     display: inline;
361 .arrow_button input {
362     overflow: hidden;
364 .action-icon img.smallicon {
365     vertical-align: text-bottom;
366     margin: 0 0.3em;
369 /** The 1-pixel padding is there to avoid phantom scroll bars on OS X (FF, Safari and Chrome)**/
370 .no-overflow {
371     overflow: auto;
372     padding-bottom: 1px;
374 .pagelayout-report .no-overflow {
375     overflow: visible;
377 .no-overflow > .generaltable {
378     margin-bottom: 0;
380 // Accessibility features
382 // Accessibility: text 'seen' by screen readers but not visual users.
383 .accesshide {
384     position: absolute;
385     left: -10000px;
386     font-weight: normal;
387     font-size: 1em;
389 span.hide,
390 div.hide {
391     display: none;
393 // Accessibility: Skip block link, for keyboard-only users.
394 a.skip-block,
395 a.skip {
396     position: absolute;
397     top: -1000em;
398     font-size: 0.85em;
399     text-decoration: none;
401 a.skip-block:focus,
402 a.skip-block:active,
403 a.skip:focus,
404 a.skip:active {
405     position: static;
406     display: block;
408 .skip-block-to {
409     display: block;
410     height: 1px;
411     overflow: hidden;
413 // Blogs
414 .addbloglink {
415     text-align: center;
417 .blog_entry .audience {
418     text-align: right;
419     padding-right: 4px;
421 .blog_entry .tags {
422     margin-top: 15px;
424 .blog_entry .tags .action-icon img.smallicon {
425     height: 16px;
426     width: 16px;
428 .blog_entry .content {
429     margin-left: 43px;
431 // Group
432 #doc-contents h1 {
433     margin: 1em 0 0 0;
435 #doc-contents ul {
436     margin: 0;
437     padding: 0;
438     width: 90%;
440 #doc-contents ul li {
441     list-style-type: none;
443 .groupmanagementtable td {
444     vertical-align: top;
446 .groupmanagementtable #existingcell,
447 .groupmanagementtable #potentialcell {
448     width: 42%;
450 .groupmanagementtable #buttonscell {
451     width: 16%;
453 .groupmanagementtable #buttonscell p.arrow_button input {
454     width: auto;
455     min-width: 80%;
456     margin: 0 auto;
458 .groupmanagementtable #removeselect_wrapper,
459 .groupmanagementtable #addselect_wrapper {
460     width: 100%;
462 .groupmanagementtable #removeselect_wrapper label,
463 .groupmanagementtable #addselect_wrapper label {
464     font-weight: normal;
466 #group-usersummary {
467     width: 14em;
469 .groupselector {
470     margin-top: 3px;
471     margin-bottom: 3px;
472     display: inline-block;
474 .groupselector label {
475     display: inline-block;
477 // Data format selector
478 .dataformatselector {
479     margin: 1em 0;
481 .dataformatselector label {
482     display: inline-block;
483     margin: 0 5px 10px 0;
484     line-height: 30px;
485     vertical-align: top;
488 // Login
489 .loginbox {
490     margin: 15px;
491     overflow: visible;
493 .loginbox.twocolumns {
494     margin: 15px;
496 .loginbox h2,
497 .loginbox .subcontent {
498     margin: 5px;
499     padding: 10px;
500     text-align: center;
502 .loginbox .loginpanel .desc {
503     margin: 0;
504     padding: 0;
505     margin-bottom: 5px;
506     margin-top: 15px;
508 .loginbox .loginsub {
509     margin-left: 0;
510     margin-right: 0;
512 .loginbox .guestsub,
513 .loginbox .forgotsub {
514     margin: 5px 12%;
516 .loginbox .loginform {
517     margin-top: 1em;
518     text-align: left;
520 .loginbox .loginform .form-label {
521     float: left;
522     text-align: right;
523     width: 49%;
524     white-space: nowrap;
526 .loginbox .loginform .form-input {
527     float: right;
528     width: 50%;
530 .loginbox .loginform .form-input input {
531     width: 6em;
533 .loginbox .signupform {
534     margin-top: 1em;
535     text-align: center;
537 .loginbox.twocolumns .loginpanel,
538 .loginbox.twocolumns .signuppanel {
539     width: 48%;
540     border: 0;
541     margin: 0;
542     padding: 0;
543     .box-sizing(border-box);
544     display: block;
545     float: left;
546     margin-left: 2.76243%;
547     min-height: 30px;
548     margin-bottom: -2000px;
549     padding-bottom: 2000px;
551 .loginbox .potentialidp {
552     margin-bottom: 0.3em;
554 .loginbox .potentialidp .smallicon {
555     vertical-align: text-bottom;
556     margin: 0 .3em;
559 // Notes
560 .notepost {
561     margin-bottom: 1em;
563 .notepost .userpicture {
564     float: left;
566 .notepost .content,
567 .notepost .footer {
568     clear: both;
570 .notesgroup {
571     margin-left: 20px;
574 // My Moodle
575 .path-my .coursebox .overview {
576     margin: 15px 30px 10px 30px;
578 .path-my .coursebox .info {
579     float: none;
580     margin: 0;
583 // Modules
584 .mod_introbox {
585     padding: 10px;
587 table.mod_index {
588     width: 100%;
591 // Comments
592 .comment-ctrl {
593     font-size: 12px;
594     display: none;
595     margin: 0;
596     padding: 0;
598 .comment-ctrl h5 {
599     margin: 0;
600     padding: 5px;
602 .comment-area {
603     max-width: 400px;
604     padding: 5px;
606 .comment-area textarea {
607     width: 100%;
608     overflow: auto;
609     &.fullwidth {
610         -webkit-box-sizing: border-box;
611         -moz-box-sizing: border-box;
612         box-sizing: border-box;
613     }
615 .comment-area .fd {
616     text-align: right;
618 .comment-meta span {
619     color: gray;
621 .comment-link img {
622     vertical-align: text-bottom;
624 .comment-list {
625     font-size: 11px;
626     overflow: auto;
627     list-style: none;
628     padding: 0;
629     margin: 0;
631 .comment-list li {
632     margin: 2px;
633     list-style: none;
634     margin-bottom: 5px;
635     clear: both;
636     padding: .3em;
637     position: relative;
639 .comment-list li.first {
640     display: none;
642 .comment-paging {
643     text-align: center;
645 .comment-paging .pageno {
646     padding: 2px;
648 .comment-paging .curpage {
649     border: 1px solid #ccc;
651 .comment-message .picture {
652     width: 20px;
653     float: left;
655 .comment-message .text {
656     margin: 0;
657     padding: 0;
659 .comment-message .text p {
660     padding: 0;
661     margin: 0 18px 0 0;
663 .comment-delete {
664     position: absolute;
665     top: 0;
666     right: 0;
667     margin: .3em;
669 .comment-report-selectall {
670     display: none;
672 .comment-link {
673     display: none;
675 .jsenabled .comment-link {
676     display: block;
678 .jsenabled .showcommentsnonjs {
679     display: none;
681 .jsenabled .comment-report-selectall {
682     display: inline;
684 /**
685 * Completion progress report
686 */
687 .completion-expired {
688     background: @errorBackground;
690 .completion-expected {
691     font-size: @fontSizeMini;
693 .completion-sortchoice,
694 .completion-identifyfield {
695     font-size: @fontSizeMini;
696     vertical-align: bottom;
698 .completion-progresscell {
699     text-align: right;
701 .completion-expired .completion-expected {
702     font-weight: bold;
704 /**
705 * Tags
706 */
707 img.user-image {
708     height: 100px;
709     width: 100px;
711 #tag-search-box {
712     text-align: center;
713     margin: 10px auto;
716 .path-tag .tag-index-items .tagarea {
717     border: 1px solid #e3e3e3;
718     border-radius: 4px;
719     padding: 10px;
720     margin-top: 10px;
723 .path-tag .tag-index-items .tagarea h3 {
724     display: block;
725     padding: 3px 0 10px 0;
726     margin: 0;
727     font-size: 1.1em;
728     font-weight: bold;
729     line-height: 20px;
730     color: #999;
731     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
732     text-transform: uppercase;
733     word-wrap: break-word;
734     border-bottom: solid 1px #e3e3e3;
735     margin-bottom: 10px;
738 .path-tag .tagarea .controls,
739 .path-tag .tagarea .taggeditems {
740     .clearfix();
742 .path-tag .tagarea .controls,
743 .path-tag .tag-backtoallitems {
744     text-align: center;
746 .path-tag .tagarea .controls .gotopage.nextpage {
747     float: right;
749 .path-tag .tagarea .controls .gotopage.prevpage {
750     float: left;
752 .path-tag .tagarea .controls .exclusivemode {
753     display: inline-block;
755 .path-tag .tagarea .controls.controls-bottom {
756     margin-top: 5px;
758 .path-tag .tagarea .controls .gotopage.nextpage::after {
759     /*rtl:remove*/
760     content: "»";
761     /*rtl:raw:
762     content: "«";
763     */
764     padding-right: 5px;
765     padding-left: 5px;
767 .path-tag .tagarea .controls .gotopage.prevpage::before {
768     /*rtl:remove*/
769     content: "«";
770     /*rtl:raw:
771     content: "»";
772     */
773     padding-right: 5px;
774     padding-left: 5px;
777 span.flagged-tag,
778 tr.flagged-tag,
779 span.flagged-tag a,
780 tr.flagged-tag a {
781     color: @errorText;
783 .tag-management-table td,
784 .tag-management-table th {
785     vertical-align: middle;
786     padding: 4px;
788 .tag-management-table .inplaceeditable.inplaceeditingon input {
789     width: 150px;
791 .path-admin-tag .addstandardtags {
792     float: right;
793     img {
794         margin: 0 5px;
795     }
797 .path-tag .tag-relatedtags {
798     padding-top: 10px;
800 .path-tag .tag-management-box {
801     text-align: right;
803 .path-tag .tag-index-toc {
804     padding: 10px;
805     text-align: center;
807 .path-tag .tag-index-toc li,
808 .path-tag .tag-management-box li {
809     margin-left: 5px;
810     margin-right: 5px;
812 .path-tag .tag-management-box li a.edittag {
813     background-image: url([[pix:moodle|i/settings]]);
815 .path-tag .tag-management-box li a.flagasinappropriate {
816     background-image: url([[pix:moodle|i/flagged]]);
818 .path-tag .tag-management-box li a.removefrommyinterests {
819     background-image: url([[pix:moodle|t/delete]]);
821 .path-tag .tag-management-box li a.addtomyinterests {
822     background-image: url([[pix:moodle|t/add]]);
824 .path-tag .tag-management-box li a {
825     background-repeat: no-repeat;
826     background-position: left;
827     padding-left: 17px;
829 .tag_feed.media-list .media .itemimage {
830     float: left;
832 .tag_feed.media-list .media .itemimage img {
833     height: 35px;
834     width: 35px;
836 .tag_feed.media-list .media .media-body {
837     padding-right: 10px;
838     padding-left: 10px;
840 .tag_feed .media .muted a {
841     .muted();
843 .tag_cloud {
844     text-align: center;
846 .tag_cloud .inline-list li {
847     padding: 0 0.2em;
849 .tag_cloud .tag_overflow {
850     margin-top: 1em;
851     font-style: italic;
853 .tag_cloud .s20 {
854     font-size: 2.7em;
856 .tag_cloud .s19 {
857     font-size: 2.6em;
859 .tag_cloud .s18 {
860     font-size: 2.5em;
862 .tag_cloud .s17 {
863     font-size: 2.4em;
865 .tag_cloud .s16 {
866     font-size: 2.3em;
868 .tag_cloud .s15 {
869     font-size: 2.2em;
871 .tag_cloud .s14 {
872     font-size: 2.1em;
874 .tag_cloud .s13 {
875     font-size: 2em;
877 .tag_cloud .s12 {
878     font-size: 1.9em;
880 .tag_cloud .s11 {
881     font-size: 1.8em;
883 .tag_cloud .s10 {
884     font-size: 1.7em;
886 .tag_cloud .s9 {
887     font-size: 1.6em;
889 .tag_cloud .s8 {
890     font-size: 1.5em;
892 .tag_cloud .s7 {
893     font-size: 1.4em;
895 .tag_cloud .s6 {
896     font-size: 1.3em;
898 .tag_cloud .s5 {
899     font-size: 1.2em;
901 .tag_cloud .s4 {
902     font-size: 1.1em;
904 .tag_cloud .s3 {
905     font-size: 1em;
907 .tag_cloud .s2 {
908     font-size: 0.9em;
910 .tag_cloud .s1 {
911     font-size: 0.8em;
913 .tag_cloud .s0 {
914     font-size: 0.7em;
916 .tag_list ul {
917     display: inline;
919 .tag_list.hideoverlimit .overlimit {
920     display: none;
922 .tag_list .tagmorelink {
923     display: none;
925 .tag_list.hideoverlimit .tagmorelink {
926     display: inline;
928 .tag_list.hideoverlimit .taglesslink {
929     display: none;
932 /**
933 * Web Service
934 */
935 #webservice-doc-generator td {
936     text-align: left;
937     border: 0 solid black;
940 /**
941 * Registration
942 */
943 #page-admin-registration-register .registration_textfield {
944     width: 300px;
946 /**
947 * Enrol
948 */
949 .userenrolment {
950     width: 100%;
951     border-collapse: collapse;
953 .userenrolment tr {
954     vertical-align: top;
956 .userenrolment td {
957     padding: 0;
958     height: 41px;
960 .userenrolment .subfield {
961     margin-right: 5px;
963 .userenrolment .col_userdetails .subfield {
964     margin-left: 40px;
966 .userenrolment .col_userdetails .subfield_picture {
967     float: left;
968     margin-left: 0;
970 .userenrolment .col_lastseen {
971     width: 150px;
973 .userenrolment .col_role {
974     width: 262px;
976 .userenrolment .col_role .roles,
977 .userenrolment .col_group .groups {
978     margin-right: 30px;
980 .userenrolment .col_role .role {
981     float: left;
982     padding: 0 3px 3px;
983     margin: 0 3px 3px;
984     white-space: nowrap;
986 .userenrolment .col_group .group {
987     float: left;
988     padding: 3px;
989     margin: 3px;
990     white-space: nowrap;
992 .userenrolment .col_role .role a,
993 .userenrolment .col_group .group a {
994     margin-left: 3px;
995     cursor: pointer;
997 .userenrolment .col_role .addrole,
998 .userenrolment .col_group .addgroup {
999     float: right;
1000     padding: 3px;
1001     margin: 3px;
1002     > a:hover {
1003         border-bottom: 1px solid #666;
1004     }
1006 .userenrolment .col_role .addrole img,
1007 .userenrolment .col_group .addgroup img {
1008     vertical-align: baseline;
1011 .userenrolment .hasAllRoles .col_role .addrole {
1012     display: none;
1015 .userenrolment .col_enrol .enrolment {
1016     float: left;
1017     padding: 0 3px 3px;
1018     margin: 0 3px 3px;
1020 .userenrolment .col_enrol .enrolment a {
1021     float: right;
1022     margin-left: 3px;
1024 #page-enrol-users {
1025     .enrol_user_buttons {
1026         float: right;
1027         .enrolusersbutton {
1028             display: inline;
1029             div,
1030             form {
1031                 display: inline;
1032                 margin-right: 0;
1033             }
1034         }
1035     }
1036     #filterform {
1037         .well;
1038         .well-small;
1039         display: inline-block;
1040         .fitem {
1041             display: inline-block;
1042             line-height: @baseLineHeight * 2;
1043             margin-right: .3em;
1044             white-space: nowrap;
1045             label {
1046                 display: inline;
1047                 line-height: @baseLineHeight;
1048                 padding-right: .3em;
1049             }
1050             :before,
1051             :after {
1052                 display: inline;
1053             }
1054         }
1055         div,
1056         fieldset {
1057             display: inline;
1058             float: none;
1059             clear: none;
1060             width: auto;
1061             margin: 0;
1062         }
1063         select,
1064         .ftext input {
1065             width: 7em;
1066         }
1067         input,
1068         select {
1069             margin-bottom: 0;
1070         }
1071     }
1072     .user-enroller-panel .uep-search-results .user .details {
1073         width: 237px;
1074     }
1075     .user-enroller-panel .uep-search-results .cohort .details {
1076         width: 237px;
1077     }
1080 #page-enrol-users .enrol-users-page-action input {
1081     margin-left: 0;
1084 .corelightbox {
1085     background-color: #ccc;
1086     position: absolute;
1087     top: 0;
1088     left: 0;
1089     width: 100%;
1090     height: 100%;
1091     text-align: center;
1093 .corelightbox img {
1094     position: fixed;
1095     top: 50%;
1096     left: 50%;
1099 .mod-indent-outer {
1100     display: table;
1102 .mod-indent {
1103     display: table-cell;
1105 .label .mod-indent {
1106     float: left;
1107     padding-top: 20px;
1110 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1111 @mod-indent-size: 30px;
1112 @mod-indent-levels: 16;
1113 .mod-indent-generate(@n, @i: 1) when (@i =< @n) {
1114     .mod-indent-@{i} {
1115         width: (@i * @mod-indent-size);
1116     }
1117     .mod-indent-generate(@n, (@i + 1));
1119 .mod-indent-generate(@n, @i: 1) when (@i = @n) {
1120     .mod-indent-huge {
1121         width: (@i * @mod-indent-size);
1122     }
1124 .mod-indent-generate(@mod-indent-levels);
1126 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1127 .resourcecontent .mediaplugin_mp3 object {
1128     height: 25px;
1129     width: 600px;
1131 .resourcecontent audio.mediaplugin_html5audio {
1132     width: 600px;
1134 /** Large resource images should avoid hidden overflow **/
1135 .resourceimage {
1136     max-width: 100%;
1138 /* Audio player size in 'inline' mode (can only change width, as above) */
1139 .mediaplugin_mp3 object {
1140     height: 15px;
1141     width: 300px;
1143 audio.mediaplugin_html5audio {
1144     width: 300px;
1146 /* TinyMCE moodle media preview frame should not have padding */
1147 .core_media_preview.pagelayout-embedded #content {
1148     padding: 0;
1150 .core_media_preview.pagelayout-embedded #maincontent {
1151     height: 0;
1153 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1154     padding: 0;
1155     margin: 0;
1156     min-width: 0;
1157     background: none;
1159 /** Fix YUI 2 Treeview for Right to left languages **/
1160 .dir-rtl .ygtvtn,
1161 .dir-rtl .ygtvtm,
1162 .dir-rtl .ygtvtmh,
1163 .dir-rtl .ygtvtmhh,
1164 .dir-rtl .ygtvtp,
1165 .dir-rtl .ygtvtph,
1166 .dir-rtl .ygtvtphh,
1167 .dir-rtl .ygtvln,
1168 .dir-rtl .ygtvlm,
1169 .dir-rtl .ygtvlmh,
1170 .dir-rtl .ygtvlmhh,
1171 .dir-rtl .ygtvlp,
1172 .dir-rtl .ygtvlph,
1173 .dir-rtl .ygtvlphh,
1174 .dir-rtl .ygtvdepthcell,
1175 .dir-rtl .ygtvok,
1176 .dir-rtl .ygtvok:hover,
1177 .dir-rtl .ygtvcancel,
1178 .dir-rtl .ygtvcancel:hover {
1179     width: 18px;
1180     height: 22px;
1181     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1182     background-repeat: no-repeat;
1183     cursor: pointer;
1185 .dir-rtl .ygtvtn {
1186     background-position: 0 -5600px;
1188 .dir-rtl .ygtvtm {
1189     background-position: 0 -4000px;
1191 .dir-rtl .ygtvtmh,
1192 .dir-rtl .ygtvtmhh {
1193     background-position: 0 -4800px;
1195 .dir-rtl .ygtvtp {
1196     background-position: 0 -6400px;
1198 .dir-rtl .ygtvtph,
1199 .dir-rtl .ygtvtphh {
1200     background-position: 0 -7200px;
1202 .dir-rtl .ygtvln {
1203     background-position: 0 -1600px;
1205 .dir-rtl .ygtvlm {
1206     background-position: 0 0;
1208 .dir-rtl .ygtvlmh,
1209 .dir-rtl .ygtvlmhh {
1210     background-position: 0 -800px;
1212 .dir-rtl .ygtvlp {
1213     background-position: 0 -2400px;
1215 .dir-rtl .ygtvlph,
1216 .dir-rtl .ygtvlphh {
1217     background-position: 0 -3200px;
1219 .dir-rtl .ygtvdepthcell {
1220     background-position: 0 -8000px;
1222 .dir-rtl .ygtvok {
1223     background-position: 0 -8800px;
1225 .dir-rtl .ygtvok:hover {
1226     background-position: 0 -8844px;
1228 .dir-rtl .ygtvcancel {
1229     background-position: 0 -8822px;
1231 .dir-rtl .ygtvcancel:hover {
1232     background-position: 0 -8866px;
1234 .dir-rtl.yui-skin-sam .yui-panel .hd {
1235     text-align: right;
1237 .dir-rtl .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
1238     text-align: right;
1240 /** Fix TinyMCE editor right to left **/
1241 .dir-rtl .clearlooks2.ie9 .mceAlert .mceMiddle span,
1242 .dir-rtl .clearlooks2 .mceConfirm .mceMiddle span {
1243     top: 44px;
1245 .dir-rtl .o2k7Skin table,
1246 .dir-rtl .o2k7Skin tbody,
1247 .dir-rtl .o2k7Skin a,
1248 .dir-rtl .o2k7Skin img,
1249 .dir-rtl .o2k7Skin tr,
1250 .dir-rtl .o2k7Skin div,
1251 .dir-rtl .o2k7Skin td,
1252 .dir-rtl .o2k7Skin iframe,
1253 .dir-rtl .o2k7Skin span,
1254 .dir-rtl .o2k7Skin *,
1255 .dir-rtl .o2k7Skin .mceText,
1256 .dir-rtl .o2k7Skin .mceListBox .mceText {
1257     text-align: right;
1259 .path-rating .ratingtable {
1260     width: 100%;
1261     margin-bottom: 1em;
1263 .path-rating .ratingtable th.rating {
1264     width: 100%;
1266 .path-rating .ratingtable td.rating,
1267 .path-rating .ratingtable td.time {
1268     white-space: nowrap;
1269     text-align: center;
1272 .initialbar {
1274     overflow: auto;
1276     .initialbarlabel {
1277         display: inline-block;
1278         width: 6em;
1279         float: left;
1280         overflow: hidden;
1281         text-overflow: ellipsis;
1282         white-space: nowrap;
1283     }
1285     .initialbarall {
1286         float: left;
1287         width: 4em;
1288         margin-bottom: 2px;
1289         overflow: hidden;
1290         text-overflow: ellipsis;
1291         white-space: nowrap;
1292     }
1294     .initialbargroups {
1295         float: left;
1296     }
1298     .initialbargroup {
1299         float: left;
1300         display: inline-block;
1301         white-space: nowrap;
1302         margin: 0;
1303         padding: 0;
1305         li {
1306             float: left;
1307             list-style: none;
1308         }
1309     }
1311     .letter {
1312         display: inline-block;
1313         height: 1.35em;
1314         min-width: 1.35em;
1315         text-align: center;
1317         color: @linkColor;
1318         background: @paginationBackground;
1319         border-width: 1px;
1320         border-color: @paginationBorder;
1321         border-style: solid;
1322     }
1323     .letter:hover,
1324     .letter.active {
1325         color: white;
1326         background-color: @linkColor;
1327     }
1331 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1332 .moodle-dialogue-base .moodle-dialogue-lightbox {
1333     background-color: #aaa;
1335 // Prevent adding backdrops to popups in popups.
1336 .pagelayout-popup {
1337     .moodle-dialogue-base {
1338         .moodle-dialogue-lightbox {
1339             background-color: transparent;
1340         }
1341     }
1343 .moodle-dialogue-base .hidden,
1344 .moodle-dialogue-base .moodle-dialogue-hidden {
1345     display: none;
1347 .no-scrolling {
1348     overflow: hidden;
1350 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1351     left: 0;
1352     top: 0;
1353     right: 0;
1354     bottom: -50px;
1355     position: fixed;
1357 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1358     overflow: auto;
1360 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1361     width: 28px;
1362     height: 16px;
1363     background-size: 100%;
1365 .moodle-dialogue-base .moodle-dialogue {
1366     padding: 0;
1367     margin: 0;
1368     background: none;
1369     border: none;
1370     z-index: 600;
1371     outline: #000 dotted 0;
1373 .moodle-dialogue-base .moodle-dialogue-wrap {
1374     margin-top: -3px;
1375     margin-left: -3px;
1376     background-color: #fff;
1377     border: 1px solid #ccc;
1378     .border-radius(10px);
1379     .box-shadow(5px 5px 20px 0 #666);
1381 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd,
1382 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1383     margin: 0;
1384     padding: 5px;
1385     font-size: 12px;
1386     font-weight: normal;
1387     letter-spacing: 1px;
1388     color: #333;
1389     text-align: center;
1390     text-shadow: 1px 1px 1px #fff;
1391     .border-radius(10px 10px 0 0);
1392     border-bottom: 1px solid #bbb;
1393     background: #ccc;
1394     #gradient > .vertical(#fff, #ccc);
1395     filter: none;
1397 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1398     padding: 0;
1399     display: inline;
1400     font-size: 100%;
1401     font-weight: bold;
1403 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1404     padding: 5px;
1406 .moodle-dialogue-base .closebutton {
1407     width: 25px;
1408     height: 15px;
1409     float: right;
1410     display: inline-block;
1411     cursor: pointer;
1412     padding: 0;
1413     background-image: url([[pix:theme|sprite]]);
1414     background-repeat: no-repeat;
1415     border-style: none;
1417 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1418     padding: 1em;
1419     line-height: 2em;
1420     color: #555;
1421     font-size: 12px;
1423 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-content {
1424     padding: 0;
1425     background: #fff;
1428 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd {
1429     padding: 10px;
1430     font-size: 16px;
1433 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1434     overflow: auto;
1435     position: absolute;
1436     top: 0;
1437     bottom: 50px;
1438     left: 0;
1439     right: 0;
1440     margin: 0;
1441     border: 0;
1443 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd,
1444 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-wrap {
1445     border-radius: 0;
1447 .moodle-dialogue-confirm .confirmation-dialogue {
1448     text-align: center;
1450 .moodle-dialogue-confirm .confirmation-dialogue input {
1451     text-align: center;
1453 .moodle-dialogue-exception .moodle-exception-message {
1454     text-align: center;
1456 .moodle-dialogue-exception .moodle-exception-param label {
1457     font-weight: bold;
1459 .moodle-dialogue-exception .param-stacktrace label {
1460     background-color: #eee;
1461     border: 1px solid #ccc;
1462     border-bottom-width: 0;
1464 .moodle-dialogue-exception .param-stacktrace pre {
1465     border: 1px solid #ccc;
1466     background-color: #fff;
1468 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1469     color: navy;
1470     font-size: @fontSizeSmall;
1472 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1473     color: @errorText;
1474     font-size: @fontSizeSmall;
1476 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1477     color: #333;
1478     font-size: 90%;
1479     border-bottom: 1px solid #eee;
1481 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1482     padding: 0;
1483     margin: 0.7em 1em;
1484     text-align: right;
1485     background-color: #fff;
1486     font-size: 12px;
1488 .moodle-dialogue-confirm .confirmation-message {
1489     margin: 0.5em 1em;
1491 .moodle-dialogue-confirm .confirmation-dialogue input {
1492     min-width: 80px;
1494 .moodle-dialogue-exception .moodle-exception-message {
1495     margin: 1em;
1497 .moodle-dialogue-exception .moodle-exception-param {
1498     margin-bottom: 0.5em;
1500 .moodle-dialogue-exception .moodle-exception-param label {
1501     width: 150px;
1503 .moodle-dialogue-exception .param-stacktrace label {
1504     display: block;
1505     margin: 0;
1506     padding: 4px 1em;
1508 .moodle-dialogue-exception .param-stacktrace pre {
1509     display: block;
1510     height: 200px;
1511     overflow: auto;
1513 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1514     display: inline-block;
1515     margin: 4px 0;
1517 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1518     display: inline-block;
1519     width: 50px;
1520     margin: 4px 1em;
1522 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1523     padding-left: 25px;
1524     margin-bottom: 4px;
1525     padding-bottom: 4px;
1527 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1528     .opacity(75);
1529     width: 100%;
1530     height: 100%;
1531     top: 0;
1532     left: 0;
1533     background-color: white;
1534     text-align: center;
1535     padding: 10% 0;
1537 /* Apply a default max-height on tooltip text */
1538 .moodle-dialogue .tooltiptext {
1539     max-height: 300px;
1542 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1543     z-index: 3001;
1545     .moodle-dialogue-bd {
1546         overflow: auto;
1547     }
1550 /**
1551  * Chooser Dialogues (moodle-core-chooserdialogue)
1552  *
1553  * This CSS belong to the chooser dialogue which should work both with, and
1554  * without javascript enabled
1555  */
1556 /* Hide the dialog and it's title */
1557 .chooserdialoguebody,
1558 .choosertitle {
1559     display: none;
1561 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1562     margin: 0;
1564 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1565     padding: 0;
1566     background: #f2f2f2;
1567     .border-bottom-radius(10px);
1569 /* Center the submit buttons within the area */
1570 .choosercontainer #chooseform .submitbuttons {
1571     padding: 0.7em 0;
1572     text-align: center;
1574 /* Fixed for safari browser on iPhone4S with ios7.*/
1575 @media (max-height: 639px) {
1576     .ios.safari .choosercontainer #chooseform .submitbuttons {
1577         padding: 45px 0;
1578     }
1580 .choosercontainer #chooseform .submitbuttons input {
1581     min-width: 100px;
1582     margin: 0 0.5em;
1584 /* Various settings for the options area */
1585 .choosercontainer #chooseform .options {
1586     position: relative;
1587     border-bottom: 1px solid #bbb;
1589 /* Only set these options if we're showing the js container */
1590 .jschooser .choosercontainer #chooseform .alloptions {
1591     overflow-x: hidden;
1592     overflow-y: auto;
1593     max-width: 20.3em;
1594     .box-shadow(inset 0 0 30px 0 #ccc);
1595     .option {
1596         input[type=radio] {
1597             display: inline-block;
1598         }
1599         .modicon {
1600             display: inline-block;
1601         }
1602         .typename {
1603             display: inline-block;
1604             width: 65%;
1605         }
1606     }
1609 /* Settings for option rows and option subtypes */
1610 .choosercontainer #chooseform .moduletypetitle,
1611 .choosercontainer #chooseform .option,
1612 .choosercontainer #chooseform .nonoption {
1613     margin-bottom: 0;
1614     padding: 0 1.6em 0 1.6em;
1616 .choosercontainer #chooseform .moduletypetitle {
1617     text-transform: uppercase;
1618     padding-top: 1.2em;
1619     padding-bottom: 0.4em;
1621 .choosercontainer #chooseform .option .typename,
1622 .choosercontainer #chooseform .option span.modicon img.icon,
1623 .choosercontainer #chooseform .nonoption .typename,
1624 .choosercontainer #chooseform .nonoption span.modicon img.icon {
1625     padding: 0 0 0 0.5em;
1628 .chooserdialogue-course-modchooser .choosercontainer #chooseform .option span.modicon img.icon,
1629 .chooserdialogue-course-modchooser .choosercontainer #chooseform .nonoption span.modicon img.icon {
1630     height: 24px;
1631     width: 24px;
1633 .choosercontainer #chooseform .option input[type=radio],
1634 .choosercontainer #chooseform .option span.typename,
1635 .choosercontainer #chooseform .option span.modicon {
1636     vertical-align: middle;
1638 .choosercontainer #chooseform .option label {
1639     display: block;
1640     padding: 0.3em 0 0.1em 0;
1641     border-bottom: 1px solid #fff;
1643 .choosercontainer #chooseform .nonoption {
1644     padding-left: 2.7em;
1645     padding-top: 0.3em;
1646     padding-bottom: 0.1em;
1648 .choosercontainer #chooseform .subtype {
1649     margin-bottom: 0;
1650     padding: 0 1.6em 0 3.2em;
1652 .choosercontainer #chooseform .subtype .typename {
1653     margin: 0 0 0 0.2em;
1656 /* The instruction/help area */
1657 .jschooser .choosercontainer #chooseform .instruction,
1658 .jschooser .choosercontainer #chooseform .typesummary {
1659     display: none;
1660     position: absolute;
1661     top: 0;
1662     right: 0;
1663     bottom: 0;
1664     left: 20.3em;
1665     margin: 0;
1666     padding: 1.6em;
1667     background-color: #fff;
1668     overflow-x: hidden;
1669     overflow-y: auto;
1670     line-height: 2em;
1673 /* Selected option settings */
1674 .jschooser .choosercontainer #chooseform .instruction,
1675 .choosercontainer #chooseform .selected .typesummary {
1676     display: block;
1678 .choosercontainer #chooseform .selected {
1679     background-color: #fff;
1680     .box-shadow(0px 0 10px 0 #ccc);
1682 .section-modchooser-link img.smallicon {
1683     padding: 3px;
1685 /* Form element: listing */
1686 .formlistingradio {
1687     padding-bottom: 25px;
1688     padding-right: 10px;
1690 .formlistinginputradio {
1691     float: left;
1693 .formlistingmain {
1694     min-height: 225px;
1696 .formlisting {
1697     position: relative;
1698     margin: 15px 0;
1699     padding: 1px 19px 14px;
1700     background-color: white;
1701     border: 1px solid #ddd;
1702     .border-radius(4px);
1704 .formlistingmore {
1705     position: absolute;
1706     cursor: pointer;
1707     bottom: -1px;
1708     right: -1px;
1709     padding: 3px 7px;
1710     font-size: 12px;
1711     font-weight: bold;
1712     background-color: #f5f5f5;
1713     border: 1px solid #ddd;
1714     color: #9da0a4;
1715     .border-radius(4px 0 4px 0);
1717 .formlistingall {
1718     margin: 15px 0;
1719     padding: 0;
1720     .border-radius(4px);
1722 .formlistingrow {
1723     cursor: pointer;
1724     border-bottom: 1px solid;
1725     border-color: #e1e1e8;
1726     border-left: 1px solid #e1e1e8;
1727     border-right: 1px solid #e1e1e8;
1728     background-color: #f7f7f9;
1729     .border-radius(0 0 4px 4px);
1730     padding: 6px;
1731     top: 50%;
1732     left: 50%;
1733     min-height: 34px;
1734     float: left;
1735     width: 150px;
1737 body.jsenabled .formlistingradio {
1738     display: none;
1740 body.jsenabled .formlisting {
1741     display: block;
1744 /* Badges styles */
1745 table.collection {
1746     .table;
1747     .table-bordered;
1748     .table-striped;
1750 table.collection td.name {
1751     text-align: left;
1752     vertical-align: middle;
1754 table.collection td.awards {
1755     width: 15%;
1756     text-align: center;
1757     vertical-align: middle;
1759 table.collection td.criteria {
1760     width: 40%;
1761     text-align: left;
1762     vertical-align: top;
1764 table.collection td.status {
1765     width: 15%;
1766     text-align: center;
1767     vertical-align: middle;
1769 table.collection td.description {
1770     width: 25%;
1771     text-align: left;
1773 table.collection td.actions {
1774     width: 11em;
1775     text-align: center;
1776     vertical-align: middle;
1778 a.criteria-action {
1779     padding: 0 3px;
1780     float: right;
1782 div.criteria-description {
1783     padding: 10px 15px;
1784     margin: 5px 0;
1785     background: none repeat scroll 0 0 #f9f9f9;
1786     border: 1px solid #eee;
1788 ul.badges {
1789     margin: 0;
1790     list-style: none;
1792 .badges li {
1793     position: relative;
1794     display: inline-block;
1795     padding-top: 1em;
1796     text-align: center;
1797     vertical-align: top;
1798     width: 150px;
1800 .badges li .badge-name {
1801     display: block;
1802     padding: 5px;
1804 .badges li > img {
1805     position: absolute;
1807 .badges li .badge-image {
1808     width: 100px;
1809     height: 100px;
1810     left: 10px;
1811     top: 0;
1812     z-index: 1;
1814 .badges li .badge-actions {
1815     position: relative;
1817 .badges li .expireimage {
1818     width: 100px;
1819     height: 100px;
1820     left: 25px;
1821     top: 0;
1822     position: absolute;
1823     z-index: 10;
1824     opacity: 0.85;
1827 #badge-image {
1828     background-color: transparent;
1829     padding: 0;
1830     position: relative;
1831     min-width: 100px;
1832     width: 20%;
1833     display: inline-block;
1834     vertical-align: top;
1835     margin-top: 17px;
1837     .expireimage {
1838         width: 100px;
1839         height: 100px;
1840         left: 0;
1841         top: 0;
1842         .opacity(85);
1843         position: absolute;
1844         z-index: 10;
1845     }
1847     .singlebutton {
1848         padding-top: 5px;
1850         input {
1851             margin-left: 0;
1852         }
1853     }
1855 #badge-details {
1856     display: inline-block;
1857     width: 79%;
1860 #badge-overview dl,
1861 #badge-details dl {
1862     margin: 0;
1864     dt,
1865     dd {
1866         vertical-align: top;
1867         padding: 3px 0;
1868     }
1869     dt {
1870         clear: both;
1871         display: inline-block;
1872         width: 20%;
1873         min-width: 100px;
1874     }
1875     dd {
1876         display: inline-block;
1877         width: 79%;
1878         margin-left: 1%;
1879     }
1882 .badge-profile {
1883     vertical-align: top;
1885 .connected {
1886     color: @successText;
1888 .notconnected {
1889     color: @errorText;
1891 .connecting {
1892     color: @warningText;
1894 #page-badges-award .recipienttable tr td {
1895     vertical-align: top;
1897 #page-badges-award .recipienttable tr td.actions .actionbutton {
1898     margin: 0.3em 0;
1899     padding: 0.5em 0;
1900     width: 100%;
1902 #page-badges-award .recipienttable tr td.existing,
1903 #page-badges-award .recipienttable tr td.potential {
1904     width: 42%;
1907 #issued-badge-table .activatebadge {
1908     display: inline-block;
1910 .statusbox.active {
1911     background-color: @successBackground;
1913 .statusbox.inactive {
1914     background-color: @warningBackground;
1916 .statusbox {
1917     text-align: center;
1918     margin-bottom: 5px;
1919     padding: 5px;
1921 .statusbox .activatebadge {
1922     display: inline-block;
1924 .statusbox .activatebadge input[type=submit] {
1925     margin: 3px;
1927 .activatebadge {
1928     margin: 0;
1929     text-align: left;
1930     vertical-align: middle;
1932 img#persona_signin {
1933     cursor: pointer;
1935 .addcourse {
1936     float: right;
1938 .invisiblefieldset {
1939     display: inline;
1940     padding: 0;
1941     border-width: 0;
1943 .breadcrumb-nav {
1944     float: left;
1945     margin-bottom: 10px;
1947 .breadcrumb-button .singlebutton div {
1948     margin-right: 0;
1950 .breadcrumb-nav .breadcrumb {
1951     margin: 0;
1954 /** Header-bar styles **/
1955 .page-context-header {
1956     // We need to be explicit about the height of the header.
1957     @pageHeaderHeight: 140px;
1959     // Do not remove these rules.
1960     overflow: hidden;
1962     .page-header-image,
1963     .page-header-headings {
1964         display: block;
1965         position: relative;
1966     }
1967     .page-header-image {
1968         margin-bottom: 1em;
1969     }
1970     .page-header-headings {
1971         margin-top: 30px;
1972         margin-bottom: 10px;
1974         h1 {
1975             display: block;
1976         }
1977     }
1979     .page-header-headings,
1980     .header-button-group {
1981         position: relative;
1982         line-height: 24px;
1983         vertical-align: middle;
1984     }
1986     .header-button-group {
1987         display: block;
1989         a {
1990             position: relative;
1992             // Don't touch it unless you know exactly what you are doing.
1993             top: -0.4em;
1994         }
1995     }
1998 .page-context-header {
1999     .page-header-image {
2000         float: left;
2001         margin-right: 1em;
2002     }
2004     .header-button-group {
2005         float: left;
2006     }
2009 /** Action menu component styles **/
2010 .moodle-actionmenu,
2011 .moodle-actionmenu > ul,
2012 .moodle-actionmenu > ul > li {
2013     display: inline-block;
2016 .moodle-actionmenu ul {
2017     padding: 0;
2018     margin: 0;
2019     list-style-type: none;
2022 .section_action_menu .moodle-actionmenu ul.menubar {
2023     margin: 0;
2026 .section_action_menu .moodle-actionmenu ul.menu {
2027     margin: 0 10px 10px 0;
2030 .moodle-actionmenu .toggle-display,
2031 .moodle-actionmenu .menu-action-text {
2032     display: none; /** Hidden by default, display none so that we don't take up space. **/
2035 .jsenabled {
2036     .moodle-actionmenu[data-enhance] {
2037         display: block;
2038         .menu {
2039             display: none;
2040         }
2041         .toggle-display {
2042             display: inline; /** JS is enabled, we'll be using it so return display to normal **/
2043             .opacity(50);
2044         }
2045         .toggle-display.textmenu {
2046             display: block;
2047             margin-left: 4px;
2048             padding-left: 4px;
2049             padding-right: 4px;
2051             .iconsmall,
2052             .smallicon,
2053             .icon {
2054                 margin: 4px 4px 4px 0;
2055                 padding: 8px 4px 0 2px;
2056                 vertical-align: text-bottom;
2057             }
2059             .caret {
2060                 margin-top: 8px;
2061                 margin-left: 2px;
2062                 border-top-color: @navbarLinkColor;
2063                 &:hover,
2064                 &:active {
2065                     border-top-color: @navbarLinkColorActive;
2066                 }
2067             }
2068         }
2069     }
2070     .moodle-actionmenu[data-enhanced] {
2071         .toggle-display {
2072             .opacity(100);
2073         }
2074         .menu-action-text {
2075             display: inline;
2076         }
2077     }
2080 .moodle-actionmenu[data-enhanced].show {
2082     position: relative;
2084     .menu {
2086         display: block;
2087         position: absolute;
2088         text-align: left;
2089         background-color: @dropdownBackground;
2090         border: 1px solid @dropdownBorder;
2091         z-index: 1000;
2092         .border-radius(5px);
2093         .box-shadow(5px 5px 20px 0 #666);
2095         a {
2096             display: block;
2097             color: @dropdownLinkColor;
2098             padding: 6px 1em 6px 1em;
2099             &:hover {
2100                 color: @dropdownLinkColorHover;
2101                 background-color: @dropdownLinkBackgroundHover;
2102             }
2103             &:first-child {
2104                 .border-top-radius(4px);
2105             }
2106             &:last-child {
2107                 .border-bottom-radius(4px);
2108             }
2109         }
2110         a.hidden {
2111             display: none;
2112         }
2113         img {
2114             vertical-align: middle;
2115         }
2116         .iconsmall,
2117         .smallicon {
2118             margin: 4px 4px 4px -24px;
2119             padding: 4px;
2120         }
2121         > li {
2122             display: block;
2123         }
2125         /** bottom left of button **/
2126         &.align-tl-bl {
2127             top: 100%;
2128             left: 0;
2129             margin-top: 4px;
2130         }
2131         &.align-tr-bl {
2132             top: 100%;
2133             right: 100%;
2134         }
2135         &.align-bl-bl {
2136             bottom: 100%;
2137             left: 0;
2138         }
2139         &.align-br-bl {
2140             bottom: 100%;
2141             right: 100%;
2142         }
2143         /** bottom right of button **/
2144         &.align-tl-br {
2145             top: 100%;
2146             left: 100%;
2147         }
2148         &.align-tr-br {
2149             top: 100%;
2150             right: 0;
2151             margin-top: 4px;
2152         }
2154         &.align-bl-br {
2155             bottom: 100%;
2156             left: 100%;
2157         }
2159         &.align-br-br {
2160             bottom: 100%;
2161             right: 0;
2162         }
2163         /** top left of button **/
2164         &.align-tl-tl {
2165             top: 0;
2166             left: 0;
2167         }
2169         &.align-tr-tl {
2170             top: 0;
2171             right: 100%;
2172             margin-right: 4px;
2173         }
2175         &.align-bl-tl {
2176             bottom: 100%;
2177             left: 0;
2178             margin-bottom: 4px;
2179         }
2181         &.align-br-tl {
2182             bottom: 100%;
2183             right: 100%;
2184         }
2185         /** top right of button **/
2186         &.align-tl-tr {
2187             top: 0;
2188             left: 100%;
2189             margin-left: 4px;
2190         }
2192         &.align-tr-tr {
2193             top: 0;
2194             right: 0;
2195         }
2197         &.align-bl-tr {
2198             bottom: 100%;
2199             left: 100%;
2200         }
2202         &.align-br-tr {
2203             bottom: 100%;
2204             right: 0;
2205             margin-bottom: 4px;
2206         }
2208     }
2209     /** no wrap is set - prevent menu items from wrapping **/
2210     &.nowrap-items .menu > li {
2211         white-space: nowrap;
2212     }
2215 .block .moodle-actionmenu {
2216     text-align: right;
2219 ul.dragdrop-keyboard-drag li {
2220     list-style-type: none;
2223 .block-control-actions .moodle-core-dragdrop-draghandle img {
2224     width: 12px;
2225     height: 12px;
2228 a.disabled:hover,
2229 a.disabled {
2230     text-decoration: none;
2231     cursor: default;
2232     font-style: italic;
2233     color: #808080;
2235 body.lockscroll {
2236     height: 100%;
2237     overflow: hidden;
2240 .progressbar_container {
2241     max-width: 500px;
2242     margin: 0 auto;
2245 /* IE10 only fix for calendar titling */
2246 .ie10 .yui3-calendar-header-label {
2247     display: inline-block;
2250 dd:before,
2251 dd:after {
2252     display: block;
2253     content: " ";
2255 dd:after {
2256     clear: both;
2259 // Active tabs with links should have a different
2260 // cursor to indicate they are clickable.
2261 .nav-tabs > .active > a[href],
2262 .nav-tabs > .active > a[href]:hover,
2263 .nav-tabs > .active > a[href]:focus {
2264     cursor: pointer;
2267 .inplaceeditable {
2268     &.inplaceeditingon {
2269         position: relative;
2271         .editinstructions {
2272             margin-top: -30px;
2273             font-weight: normal;
2274             margin-right: 0;
2275             margin-left: 0;
2276             left: 0;
2277             right: auto;
2278             white-space: nowrap;
2279         }
2281         input {
2282             width: 330px;
2283             height: 16px;
2284             vertical-align: text-bottom;
2285             margin-bottom: 0;
2286         }
2288         select {
2289             margin-bottom: 0;
2290         }
2291     }
2293     .quickediticon img {
2294         opacity: 0.2;
2295     }
2297     .quickeditlink {
2298         color: inherit;
2299         text-decoration: inherit;
2300     }
2302     &:hover .quickeditlink .quickediticon img,
2303     .quickeditlink:focus .quickediticon img {
2304         opacity: 1;
2305     }
2307     &.inplaceeditable-toggle .quickediticon {
2308         display: none;
2309     }
2311     &.inplaceeditable-autocomplete {
2312         display: block;
2313     }
2316 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2317     margin-top: -20px;
2320 /** Chart area. */
2321 .chart-area {
2323     .chart-table-data {
2324         display: none;
2325     }
2327     .chart-table {
2328         .chart-output-htmltable caption {
2329             white-space: nowrap;
2330         }
2331         /** When accessible, we display the table only. */
2332         &.accesshide {
2333             .chart-table-expand {
2334                 display: none;
2335             }
2336             .chart-table-data {
2337                 display: block;
2338             }
2339         }
2340     }
2343 .hover-tooltip-container {
2344     position: relative;
2346     .hover-tooltip {
2347         opacity: 0;
2348         visibility: hidden;
2349         position: absolute;
2350         /*rtl:ignore*/
2351         left: 50%;
2352         top: ~"calc(-50% - 5px)";
2353         transform: translate(-50%, -50%);
2354         background-color: #fff;
2355         border: 1px solid rgba(0, 0, 0, .2);
2356         border-radius: .3rem;
2357         box-sizing: border-box;
2358         padding: 5px;
2359         white-space: nowrap;
2360         transition: opacity 0.15s, visibility 0.15s;
2361         z-index: 1000;
2363         &:before {
2364             content: '';
2365             display: inline-block;
2366             border-left: 8px solid transparent;
2367             border-right: 8px solid transparent;
2368             border-top: 8px solid rgba(0, 0, 0, .2);
2369             position: absolute;
2370             bottom: -8px;
2371             left: ~"calc(50% - 8px)";
2372         }
2374         &:after {
2375             content: '';
2376             display: inline-block;
2377             border-left: 7px solid transparent;
2378             border-right: 7px solid transparent;
2379             border-top: 7px solid #fff;
2380             position: absolute;
2381             bottom: -6px;
2382             left: ~"calc(50% - 7px)";
2383             z-index: 2;
2384         }
2385     }
2387     &:hover {
2388         .hover-tooltip {
2389             opacity: 1;
2390             visibility: visible;
2391             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2392         }
2393     }
2396 .clickable {
2397     cursor: pointer;
2400 .overlay-icon-container {
2401     position: absolute;
2402     top: 0;
2403     left: 0;
2404     width: 100%;
2405     height: 100%;
2406     background-color: rgba(255, 255, 255, 0.6);
2408     .loading-icon {
2409         position: absolute;
2410         top: 50%;
2411         left: 50%;
2412         transform: translate(-50%, -50%);
2414         .icon {
2415             height: 30px;
2416             width: 30px;
2417             font-size: 30px;
2418         }
2419     }
2422 [data-drag-type="move"] {
2423     cursor: move;