MDL-41506 theme_bootstrapbase: Implement highlight class
[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,
13 .empty-region-side-post #block-region-side-post {
14     display:none;
15 }
17 .empty-region-side-post #region-bs-main-and-pre.span9,
18 .empty-region-side-pre #region-bs-main-and-post.span9,
19 .empty-region-side-post #region-bs-main-and-post.span9 #region-main.span8 {
20     /** LTR with no post area.
21         RTL with no pre area.
22         RTL with no post area. **/
23     width: 100%;
24 }
26 .empty-region-side-pre #region-bs-main-and-pre.span9 #region-main {
27     /** LTR with no pre area. **/
28     float:none;
29     width:100%;
30 }
32 .empty-region-side-post.used-region-side-pre #region-main.span8 {
33     /** increase the span size by 1 **/
34     .fluid-span(9);
35 }
36 .empty-region-side-post.used-region-side-pre #block-region-side-pre.span4 {
37     /** decrease the span size by 1 **/
38     .fluid-span(3);
39 }
41 .empty-region-side-pre #region-bs-main-and-post.span9 #region-main.span8 {
42     /** RTL with no pre area. **/
43     float: right;
44 }
46 /** Page layout CSS ends **/
48 .dir-ltr,
49 .mdl-left,
50 .dir-rtl .mdl-right {
51     text-align: left;
52 }
53 .dir-rtl,
54 .mdl-right,
55 .dir-rtl .mdl-left {
56     text-align: right;
57 }
58 #add,
59 #remove,
60 .centerpara,
61 .mdl-align {
62     text-align: center;
63 }
64 a.dimmed,
65 a.dimmed:link,
66 a.dimmed:visited,
67 a.dimmed_text,
68 a.dimmed_text:link,
69 a.dimmed_text:visited,
70 .dimmed_text,
71 .dimmed_text a,
72 .dimmed_text a:link,
73 .dimmed_text a:visited,
74 .usersuspended,
75 .usersuspended a,
76 .usersuspended a:link,
77 .usersuspended a:visited,
78 .dimmed_category,
79 .dimmed_category a {
80     .muted
81 }
82 .activity.label .dimmed_text {
83     .opacity(50)
84 }
85 .unlist,
86 .unlist li,
87 .inline-list,
88 .inline-list li,
89 .block .list,
90 .block .list li,
91 .section li.activity,
92 .section li.movehere,
93 .tabtree li {
94     list-style: none;
95     margin: 0;
96     padding: 0;
97 }
98 .inline,
99 .inline-list li {
100     display: inline;
102 .notifytiny {
103     font-size: @fontSizeMini;
105 .notifytiny li,
106 .notifytiny td {
107     font-size: 100%;
109 .red,
110 .notifyproblem {
111     color: @errorText;
113 .green,
114 .notifysuccess {
115     color: @successText;
117 .highlight {
118     background: @infoBackground;
120 .reportlink {
121     text-align: right;
123 a.autolink.glossary:hover {
124     cursor: help;
126 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
127 .collapsibleregioncaption {
128     white-space: nowrap;
130 .collapsibleregioncaption img {
131     vertical-align: middle;
133 .jsenabled .hiddenifjs {
134     display: none;
136 .visibleifjs {
137     display: none;
139 .jsenabled .visibleifjs {
140     display: inline;
142 .jsenabled .collapsibleregion {
143     overflow: hidden;
145 .jsenabled .collapsed .collapsibleregioninner {
146     visibility: hidden;
148 .collapsible-actions {
149     display: none;
150     text-align: right;
152 .dir-rtl .collapsible-actions {
153     text-align: left;
155 .jsenabled .collapsible-actions {
156     display: block;
158 .collapsible-actions .collapseexpand {
159     padding-left: 20px;
160     background: url([[pix:t/collapsed]]) 2px center no-repeat;
162 .dir-rtl .collapsible-actions .collapseexpand {
163     padding-right: 20px;
164     padding-left: 0;
165     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
167 .collapsible-actions .collapse-all,
168 .dir-rtl .collapsible-actions .collapse-all {
169     background-image: url([[pix:t/expanded]]);
171 .yui-overlay .yui-widget-bd {
172     background-color: #FFEE69;
173     border: 1px solid #A6982B;
174     border-top-color: #D4C237;
175     color: #000000;
176     left: 0;
177     padding: 2px 5px;
178     position: relative;
179     top: 0;
180     z-index: 1;
182 .clearer {
183     background: transparent;
184     border-width: 0;
185     clear: both;
186     display: block;
187     height: 1px;
188     margin: 0;
189     padding: 0;
191 .bold,
192 .warning,
193 .errorbox .title,
194 .pagingbar .title,
195 .pagingbar .thispage {
196     font-weight: bold;
198 img.resize {
199     height: 1em;
200     width: 1em;
202 .block img.resize,
203 .breadcrumb img.resize {
204     height: 0.9em;
205     width: 0.8em;
207 /* Icon styles */
208 img.icon {
209     height: 16px;
210     vertical-align: text-bottom;
211     width: 16px;
212     padding-right: 6px;
214 .dir-rtl img.icon {
215     padding-left: 6px;
216     padding-right: 0;
218 img.iconsmall {
219     height: 12px;
220     margin-right: 3px;
221     vertical-align: middle;
222     width: 12px;
224 img.iconhelp, .helplink img {
225     height: 16px;
226     padding-left: 3px;
227     vertical-align: text-bottom;
228     width: 16px;
230 h1 img.iconhelp, h1 img.icon,
231 h2 img.iconhelp, h2 img.icon,
232 h3 img.iconhelp, h3 img.icon,
233 h4 img.iconhelp, h4 img.icon,
234 h5 img.iconhelp, h5 img.icon,
235 h6 img.iconhelp, h6 img.icon {
236   vertical-align: middle;
237   padding: 4px;
239 .dir-rtl img.iconhelp, .dir-rtl .helplink img {
240     padding-right: 3px;
241     padding-left: 0;
243 img.iconlarge {
244     height: 24px;
245     width: 24px;
246     vertical-align: middle;
248 img.iconsort {
249     vertical-align: text-bottom;
250     padding-left: .3em;
251     margin-bottom: .15em;
253 .dir-rtl img.iconsort {
254     padding-right: .3em;
255     padding-left: 0;
257 img.icontoggle {
258     height: 17px;
259     vertical-align: middle;
260     width: 50px;
262 img.iconkbhelp {
263     height: 17px;
264     width: 49px;
266 img.icon-pre, .dir-rtl img.icon-post {
267     padding-right: 3px;
268     padding-left: 0;
270 img.icon-post, .dir-rtl img.icon-pre {
271     padding-left: 3px;
272     padding-right: 0;
274 .boxaligncenter {
275     margin-left: auto;
276     margin-right: auto;
278 .boxalignright {
279     margin-left: auto;
280     margin-right: 0;
282 .boxalignleft {
283     margin-left: 0;
284     margin-right: auto;
286 .boxwidthnarrow {
287     width: 30%;
289 .boxwidthnormal {
290     width: 50%;
292 .boxwidthwide {
293     width: 80%;
295 .headermain {
296     font-weight: bold;
298 #maincontent {
299     display: block;
300     height: 1px;
301     overflow: hidden;
303 img.uihint {
304     cursor: help;
306 #addmembersform table {
307     margin-left: auto;
308     margin-right: auto;
310 .flexible th {
311     white-space: nowrap;
313 table.flexible .emptyrow {
314     display: none;
316 img.emoticon {
317     vertical-align: middle;
318     width: 15px;
319     height: 15px;
321 form.popupform,
322 form.popupform div {
323     display: inline;
325 .arrow_button input {
326     overflow: hidden;
328 .action-icon img.smallicon {
329     vertical-align: text-bottom;
330     margin: 0 0.3em;
333 /** The 1-pixel padding is there to avoid phantom scroll bars on OS X (FF, Safari and Chrome)**/
334 .no-overflow {
335     overflow: auto;
336     padding-bottom: 1px;
338 .pagelayout-report .no-overflow {
339     overflow: visible;
341 .no-overflow > .generaltable {
342     margin-bottom: 0;
344 // Accessibility features
346 // Accessibility: text 'seen' by screen readers but not visual users.
347 .accesshide {
348     position: absolute;
349     left: -10000px;
350     font-weight: normal;
351     font-size: 1em;
353 .dir-rtl .accesshide {
354     top: -30000px;
355     left: auto;
357 span.hide,
358 div.hide {
359     display: none;
361 // Accessibility: Skip block link, for keyboard-only users.
362 a.skip-block,
363 a.skip {
364     position: absolute;
365     top: -1000em;
366     font-size: 0.85em;
367     text-decoration: none;
369 a.skip-block:focus,
370 a.skip-block:active,
371 a.skip:focus,
372 a.skip:active {
373     position: static;
374     display: block;
376 .skip-block-to {
377     display: block;
378     height: 1px;
379     overflow: hidden;
381 // Blogs
382 .addbloglink {
383     text-align: center;
385 .blog_entry .audience {
386     text-align: right;
387     padding-right: 4px;
389 .blog_entry .tags {
390     margin-top: 15px;
392 .blog_entry .tags .action-icon img.smallicon {
393     height: 16px;
394     width: 16px;
396 .blog_entry .content {
397     margin-left: 43px;
399 // Group
400 #page-group-index #groupeditform {
401     text-align: center;
403 #doc-contents h1 {
404     margin: 1em 0 0 0;
406 #doc-contents ul {
407     margin: 0;
408     padding: 0;
409     width: 90%;
411 #doc-contents ul li {
412     list-style-type: none;
414 .groupmanagementtable td {
415     vertical-align: top;
417 .groupmanagementtable #existingcell,
418 .groupmanagementtable #potentialcell {
419     width: 42%;
421 .groupmanagementtable #buttonscell {
422     width: 16%;
424 .groupmanagementtable #buttonscell p.arrow_button input {
425     width: auto;
426     min-width: 80%;
427     margin: 0 auto;
429 .groupmanagementtable #removeselect_wrapper,
430 .groupmanagementtable #addselect_wrapper {
431     width: 100%;
433 .groupmanagementtable #removeselect_wrapper label,
434 .groupmanagementtable #addselect_wrapper label {
435     font-weight: normal;
437 .dir-rtl .groupmanagementtable p {
438     text-align: right;
440 #group-usersummary {
441     width: 14em;
443 .groupselector {
444     margin-top: 3px;
445     margin-bottom: 3px;
446     display: inline-block;
448 .groupselector label {
449     display: inline-block;
451 // Login
452 .loginbox {
453     margin: 15px;
454     overflow: visible;
456 .loginbox.twocolumns {
457     margin: 15px;
459 .loginbox h2,
460 .loginbox .subcontent {
461     margin: 5px;
462     padding: 10px;
463     text-align: center;
465 .loginbox .loginpanel .desc {
466     margin: 0;
467     padding: 0;
468     margin-bottom: 5px;
469     margin-top:15px;
471 .loginbox .signuppanel .subcontent {
472     text-align: left;
474 .dir-rtl .loginbox .signuppanel .subcontent {
475     text-align: right;
477 .loginbox .loginsub {
478     margin-left: 0;
479     margin-right: 0;
481 .loginbox .guestsub,
482 .loginbox .forgotsub,
483 .loginbox .potentialidps {
484     margin: 5px 12%;
486 .loginbox .potentialidps .potentialidplist {
487     margin-left: 40%;
489 .loginbox .potentialidps .potentialidplist div {
490     text-align: left;
492 .loginbox .loginform {
493     margin-top: 1em;
494     text-align: left;
496 .loginbox .loginform .form-label {
497     float: left;
498     text-align: right;
499     width: 44%;
500     direction: rtl;
501     white-space: nowrap;
503 .dir-rtl .loginbox .loginform .form-label {
504     float: left;
505     text-align: right;
506     width: 44%;
507     direction: ltr;
508     white-space: nowrap;
510 .loginbox .loginform .form-input {
511     float: right;
512     width: 55%;
514 .loginbox .loginform .form-input input {
515     width: 6em;
517 .loginbox .signupform {
518     margin-top: 1em;
519     text-align: center;
521 .loginbox.twocolumns .loginpanel,
522 .loginbox.twocolumns .signuppanel {
523     width: 48%;
524     border: 0;
525     margin: 0;
526     padding: 0;
527     .box-sizing(border-box);
528     display: block;
529     float: left;
530     margin-left: 2.76243%;
531     min-height: 30px;
532     margin-bottom: -2000px;
533     padding-bottom: 2000px;
535 .loginbox .potentialidp .smallicon {
536     vertical-align: text-bottom;
537     margin: 0 .3em;
540 // Notes
541 .notepost {
542     margin-bottom: 1em;
544 .notepost .userpicture {
545     float: left;
546     margin-right: 5px;
548 .notepost .content,
549 .notepost .footer {
550     clear: both;
552 .notesgroup {
553     margin-left: 20px;
556 // My Moodle
557 .path-my .coursebox .overview {
558     margin: 15px 30px 10px 30px;
560 .path-my .coursebox .info {
561     float: none;
562     margin: 0;
565 // Modules
566 .mod_introbox {
567     padding: 10px;
569 table.mod_index {
570     width: 100%;
573 // Comments
574 .comment-ctrl {
575     font-size: 12px;
576     display: none;
577     margin: 0;
578     padding: 0;
580 .comment-ctrl h5 {
581     margin: 0;
582     padding: 5px;
584 .comment-area {
585     max-width: 400px;
586     padding: 5px;
588 .comment-area textarea {
589     width: 100%;
590     overflow: auto;
592 .comment-area .fd {
593     text-align: right;
595 .comment-meta span {
596     color: gray;
598 .comment-link img {
599     vertical-align: text-bottom;
601 .comment-list {
602     font-size: 11px;
603     overflow: auto;
604     list-style: none;
605     padding: 0;
606     margin: 0;
608 .comment-list li {
609     margin: 2px;
610     list-style: none;
611     margin-bottom: 5px;
612     clear: both;
613     padding: .3em;
614     position: relative;
616 .comment-list li.first {
617     display: none
619 .comment-paging{
620     text-align: center;
622 .comment-paging .pageno{
623     padding: 2px;
625 .comment-paging .curpage{
626     border: 1px solid #CCC;
628 .comment-message .picture {
629     width: 20px;
630     float: left;
632 .dir-rtl .comment-message .picture {
633     float: right;
635 .comment-message .text {
636     margin: 0;
637     padding: 0;
639 .comment-message .text p {
640     padding: 0;
641     margin: 0 18px 0 0;
643 .comment-delete {
644     position: absolute;
645     top: 0;
646     right: 0;
647     margin: .3em;
649 .dir-rtl .comment-delete {
650     position: absolute;
651     left: 0;
652     right: auto;
653     margin: .3em;
655 .comment-delete-confirm {
656     background: #eee;
657     padding: 2px;
658     width: 5em;
659     text-align: center;
661 .comment-container {
662     float: left;
663     margin: 4px;
665 .comment-report-selectall{
666     display: none
668 .comment-link {
669     display: none
671 .jsenabled .comment-link {
672     display: block
674 .jsenabled .showcommentsnonjs{
675     display: none
677 .jsenabled .comment-report-selectall{
678     display: inline
680 /**
681 * Completion progress report
682 */
683 .completion-expired {
684     background: @errorBackground;
686 .completion-expected {
687     font-size: @fontSizeMini;
689 .completion-sortchoice,
690 .completion-identifyfield {
691     font-size: @fontSizeMini;
692     vertical-align: bottom;
694 .completion-progresscell {
695     text-align: right;
697 .completion-expired .completion-expected {
698     font-weight: bold;
700 /**
701 * Tags
702 */
703 #page-tag-coursetags_edit .coursetag_edit_centered {
704     position: relative;
705     width: 600px;
706     margin: 20px auto;
708 #page-tag-coursetags_edit .coursetag_edit_row {
709     clear: both;
711 #page-tag-coursetags_edit .coursetag_edit_row .coursetag_edit_left {
712     float: left;
713     width: 50%;
714     text-align: right;
716 #page-tag-coursetags_edit .coursetag_edit_row .coursetag_edit_right {
717     margin-left: 50%;
719 #page-tag-coursetags_edit .coursetag_edit_input3 {
720     display: none;
722 #page-tag-coursetags_more .coursetag_more_large {
723     font-size: 120%;
725 #page-tag-coursetags_more .coursetag_more_small {
726     font-size: 80%;
728 #page-tag-coursetags_more .coursetag_more_link {
729     font-size: 80%;
731 #tag-description,
732 #tag-blogs {
733     width: 100%;
735 #tag-management-box {
736     margin-bottom: 10px;
737     line-height: 20px;
739 #tag-user-table {
740     padding: 3px;
741     clear: both;
742     width: 100%;
744 #tag-user-table {
745     .clearfix
747 img.user-image {
748     height: 100px;
749     width: 100px;
751 #small-tag-cloud-box {
752     width: 300px;
753     margin: 0 auto;
755 #big-tag-cloud-box {
756     width: 600px;
757     margin: 0 auto;
758     float: none;
760 ul#tag-cloud-list {
761     list-style: none;
762     padding: 5px;
763     margin: 0;
765 ul#tag-cloud-list li {
766     margin: 0;
767     display: inline;
768     list-style-type: none;
770 #tag-search-box {
771     text-align: center;
772     margin: 10px auto;
774 #tag-search-results-container {
775     padding: 0;
776     width: 100%;
778 #tag-search-results {
779     padding: 0;
780     margin: 15px 20% 0 20%;
781     float: left;
782     width: 60%;
783     display: block;
785 #tag-search-results li {
786     width: 30%;
787     float: left;
788     padding-left: 1%;
789     text-align: left;
790     line-height: 20px;
791     padding-right: 1%;
792     list-style: none;
794 span.flagged-tag,
795 span.flagged-tag a {
796     color: @errorText;
798 table#tag-management-list {
799     text-align: left;
800     width: 100%;
802 table#tag-management-list td,
803 table#tag-management-list th {
804     vertical-align: middle;
805     text-align: left;
806     padding: 4px;
808 .tag-management-form {
809     text-align: center;
811 #relatedtags-autocomplete-container {
812     margin-left: auto;
813     margin-right: auto;
814     min-height: 4.6em;
815     width: 100%;
817 #relatedtags-autocomplete {
818     position: relative;
819     display: block;
820     width: 60%;
821     margin-left: auto;
822     margin-right: auto;
824 #relatedtags-autocomplete .yui-ac-content {
825     position: absolute;
826     width: 420px;
827     left: 20%;
828     border: 1px solid #404040;
829     background: #fff;
830     overflow: hidden;
831     z-index: 9050;
833 #relatedtags-autocomplete .ysearchquery {
834     position: absolute;
835     right: 10px;
836     color: #808080;
837     z-index: 10;
839 #relatedtags-autocomplete .yui-ac-shadow {
840     position: absolute;
841     margin: .3em;
842     width: 100%;
843     background: #a0a0a0;
844     z-index: 9049;
846 #relatedtags-autocomplete ul {
847     padding: 0;
848     width: 100%;
849     margin: 0;
850     list-style-type: none;
852 #relatedtags-autocomplete li {
853     padding: 0 5px;
854     cursor: default;
855     white-space: nowrap;
857 #relatedtags-autocomplete li.yui-ac-highlight{
858     background: #FFFFCC;
860 h2.tag-heading,
861 div#tag-description,
862 div#tag-blogs,
863 body.tag .managelink {
864     padding: 5px;
866 .tag_cloud .s20 {
867     font-size: 1.5em;
868     font-weight: bold;
870 .tag_cloud .s19 {
871     font-size: 1.5em;
873 .tag_cloud .s18 {
874     font-size: 1.4em;
875     font-weight: bold;
877 .tag_cloud .s17 {
878     font-size: 1.4em;
880 .tag_cloud .s16 {
881     font-size: 1.3em;
882     font-weight: bold;
884 .tag_cloud .s15 {
885     font-size: 1.3em;
887 .tag_cloud .s14 {
888     font-size: 1.2em;
889     font-weight: bold;
891 .tag_cloud .s13 {
892     font-size: 1.2em;
894 .tag_cloud .s12,
895 .tag_cloud .s11 {
896     font-size: 1.1em;
897     font-weight: bold;
899 .tag_cloud .s10,
900 .tag_cloud .s9 {
901     font-size: 1.1em;
903 .tag_cloud .s8,
904 .tag_cloud .s7 {
905     font-size: 1em;
906     font-weight: bold;
908 .tag_cloud .s6,
909 .tag_cloud .s5 {
910     font-size: 1em;
912 .tag_cloud .s4,
913 .tag_cloud .s3 {
914     font-size: 0.9em;
915     font-weight: bold;
917 .tag_cloud .s2,
918 .tag_cloud .s1 {
919     font-size: 0.9em;
921 .tag_cloud .s0 {
922     font-size: 0.8em;
924 /**
925 * Web Service
926 */
927 #webservice-doc-generator td {
928     text-align: left;
929     border: 0 solid black;
931 /**
932 * Smart Select Element
933 */
934 .smartselect {
935     position: absolute;
937 .smartselect .smartselect_mask {
938     background-color: #fff;
940 .smartselect ul  {
941     padding: 0;
942     margin: 0;
944 .smartselect ul li {
945     list-style: none;
947 .smartselect .smartselect_menu {
948     margin-right: 5px;
950 .safari .smartselect .smartselect_menu {
951     margin-left: 2px;
953 .smartselect .smartselect_menu,
954 .smartselect .smartselect_submenu {
955     border: 1px solid #000;
956     background-color: #FFF;
957     display: none;
959 .smartselect .smartselect_menu.visible,
960 .smartselect .smartselect_submenu.visible {
961     display: block;
963 .smartselect .smartselect_menu_content ul li {
964     position: relative;
965     padding: 2px 5px;
967 .smartselect .smartselect_menu_content ul li a {
968     color: #333;
969     text-decoration: none;
971 .smartselect .smartselect_menu_content ul li a.selectable {
972     color: inherit;
974 .smartselect .smartselect_submenuitem {
975     background-image: url([[pix:moodle|t/collapsed]]);
976     background-repeat: no-repeat;
977     background-position: 100%;
979 /** Spanning mode */
980 .smartselect.spanningmenu .smartselect_submenu {
981     position: absolute;
982     top: -1px;
983     left: 100%;
985 .smartselect.spanningmenu .smartselect_submenu a {
986     white-space: nowrap;
987     padding-right: 16px;
989 .smartselect.spanningmenu .smartselect_menu_content ul li a.selectable:hover {
990     text-decoration: underline;
992 /** Compact mode */
993 .smartselect.compactmenu .smartselect_submenu {
994     position: relative;
995     margin: 2px -3px;
996     margin-left: 10px;
997     display: none;
998     border-width: 0;
999     z-index: 1010;
1001 .smartselect.compactmenu .smartselect_submenu.visible {
1002     display: block;
1004 .smartselect.compactmenu .smartselect_menu {
1005     z-index: 1000;
1006     overflow: hidden;
1008 .smartselect.compactmenu .smartselect_submenu .smartselect_submenu {
1009     z-index: 1020;
1011 .smartselect.compactmenu .smartselect_submenuitem:hover > .smartselect_menuitem_label {
1012     font-weight: bold;
1014 /**
1015 * Registration
1016 */
1017 #page-admin-registration-register .registration_textfield {
1018     width: 300px;
1020 /**
1021 * Enrol
1022 */
1023 .userenrolment {
1024     width: 100%;
1025     border-collapse: collapse;
1027 .userenrolment tr {
1028     vertical-align:top;
1030 .userenrolment td {
1031     padding: 0;
1032     height: 41px;
1034 .userenrolment .subfield {
1035     margin-right: 5px;
1037 .userenrolment .col_userdetails .subfield_picture {
1038     float: left;
1040 .userenrolment .col_lastseen {
1041     width: 150px;
1043 .userenrolment .col_role {
1044     width: 262px;
1046 .userenrolment .col_role .roles,
1047 .userenrolment .col_group .groups {
1048     margin-right: 30px;
1050 .userenrolment .col_role .role,
1051 .userenrolment .col_group .group {
1052     float: left;
1053     padding: 3px;
1054     margin: 3px;
1055     white-space: nowrap;
1057 .userenrolment .col_role .role a,
1058 .userenrolment .col_group .group a {
1059     margin-left: 3px;
1060     cursor: pointer;
1062 .userenrolment .col_role .addrole,
1063 .userenrolment .col_group .addgroup {
1064     float: right;
1065     padding: 3px;
1066     margin: 3px;
1067     > *:hover {
1068         border-bottom:1px solid #666;
1069     }
1071 .userenrolment .col_role .addrole img,
1072 .userenrolment .col_group .addgroup img {
1073     vertical-align: baseline;
1076 .dir-rtl .userenrolment .col_role .role {
1077     float: right;
1080 .userenrolment .hasAllRoles .col_role .addrole {
1081     display: none;
1084 .userenrolment .col_enrol .enrolment {
1085     float: left;
1086     padding: 3px;
1087     margin: 3px;
1089 .userenrolment .col_enrol .enrolment a {
1090     float: right;
1091     margin-left: 3px;
1093 #page-enrol-users .enrol_user_buttons {
1094     float: right;
1096 #page-enrol-users.dir-rtl .enrol_user_buttons {
1097     float: left;
1099 #page-enrol-users .enrol_user_buttons .enrolusersbutton {
1100     margin-left: 1em;
1101     display: inline;
1103 #page-enrol-users .enrol_user_buttons .enrolusersbutton div,
1104 #page-enrol-users .enrol_user_buttons .enrolusersbutton form {
1105     display: inline;
1107 #page-enrol-users .enrol_user_buttons .enrolusersbutton input {
1108     padding-left: 6px;
1109     padding-right: 6px;
1111 #page-enrol-users.dir-rtl .col_userdetails .subfield_picture {
1112     float: right;
1114 #page-enrol-users .user-enroller-panel .uep-search-results .user .details {
1115     width: 237px;
1117 /**
1118 * Overide for RTL layout
1119 **/
1120 .dir-rtl .headermain {
1121     float: right;
1123 .dir-rtl .headermenu {
1124     float: left;
1126 .dir-rtl .loginbox .loginform .form-label {
1127     float: right;
1128     text-align: left;
1130 .dir-rtl .loginbox .loginform .form-input {
1131     text-align: right;
1133 .dir-rtl .yui3-menu-hidden {
1134     left: 0;
1136 #page-admin-roles-define.dir-rtl #rolesform .felement {
1137     margin-right: 180px;
1139 #page-message-edit.dir-rtl table.generaltable th.c0 {
1140     text-align: right;
1142 .corelightbox {
1143     background-color: #CCC;
1144     position: absolute;
1145     top: 0;
1146     left: 0;
1147     width: 100%;
1148     height: 100%;
1149     text-align: center;
1151 .corelightbox img {
1152     position: fixed;
1153     top: 50%;
1154     left: 50%;
1157 .mod-indent-outer {
1158     display: table;
1160 .mod-indent {
1161     display: table-cell;
1163 .label .mod-indent {
1164   float:left;
1165   padding-top:20px
1167 .mod-indent-1 {
1168     width: 30px;
1170 .mod-indent-2 {
1171     width: 60px;
1173 .mod-indent-3 {
1174     width: 90px;
1176 .mod-indent-4 {
1177     width: 120px;
1179 .mod-indent-5 {
1180     width: 150px;
1182 .mod-indent-6 {
1183     width: 180px;
1185 .mod-indent-7 {
1186     width: 210px;
1188 .mod-indent-8 {
1189     width: 240px;
1191 .mod-indent-9 {
1192     width: 270px;
1194 .mod-indent-10 {
1195     width: 300px;
1197 .mod-indent-11 {
1198     width: 330px;
1200 .mod-indent-12 {
1201     width: 360px;
1203 .mod-indent-13 {
1204     width: 390px;
1206 .mod-indent-14 {
1207     width: 420px;
1209 .mod-indent-15,
1210 .mod-indent-huge {
1211     width: 420px;
1214 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1215 .resourcecontent .mediaplugin_mp3 object {
1216     height: 25px;
1217     width: 600px
1219 .resourcecontent audio.mediaplugin_html5audio {
1220     width: 600px
1222 /** Large resource images should avoid hidden overflow **/
1223 .resourceimage {
1224     max-width: 100%;
1226 /* Audio player size in 'inline' mode (can only change width, as above) */
1227 .mediaplugin_mp3 object {
1228     height: 15px;
1229     width: 300px
1231 audio.mediaplugin_html5audio {
1232     width: 300px
1234 /* TinyMCE moodle media preview frame should not have padding */
1235 .core_media_preview.pagelayout-embedded #content {
1236     padding: 0;
1238 .core_media_preview.pagelayout-embedded #maincontent {
1239     height: 0;
1241 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1242     padding: 0;
1243     margin: 0;
1244     min-width: 0;
1245     background: none;
1247 /** Fix YUI 2 Treeview for Right to left languages **/
1248 .dir-rtl .ygtvtn,
1249 .dir-rtl .ygtvtm,
1250 .dir-rtl .ygtvtmh,
1251 .dir-rtl .ygtvtmhh,
1252 .dir-rtl .ygtvtp,
1253 .dir-rtl .ygtvtph,
1254 .dir-rtl .ygtvtphh,
1255 .dir-rtl .ygtvln,
1256 .dir-rtl .ygtvlm,
1257 .dir-rtl .ygtvlmh,
1258 .dir-rtl .ygtvlmhh,
1259 .dir-rtl .ygtvlp,
1260 .dir-rtl .ygtvlph,
1261 .dir-rtl .ygtvlphh,
1262 .dir-rtl .ygtvdepthcell,
1263 .dir-rtl .ygtvok,
1264 .dir-rtl .ygtvok:hover,
1265 .dir-rtl .ygtvcancel,
1266 .dir-rtl .ygtvcancel:hover {
1267     width: 18px;
1268     height: 22px;
1269     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1270     background-repeat: no-repeat;
1271     cursor: pointer;
1273 .dir-rtl .ygtvtn {
1274     background-position: 0 -5600px;
1276 .dir-rtl .ygtvtm {
1277     background-position: 0 -4000px;
1279 .dir-rtl .ygtvtmh,
1280 .dir-rtl .ygtvtmhh {
1281     background-position: 0 -4800px;
1283 .dir-rtl .ygtvtp {
1284     background-position: 0 -6400px;
1286 .dir-rtl .ygtvtph,
1287 .dir-rtl .ygtvtphh {
1288     background-position: 0 -7200px;
1290 .dir-rtl .ygtvln {
1291     background-position: 0 -1600px;
1293 .dir-rtl .ygtvlm {
1294     background-position: 0 0;
1296 .dir-rtl .ygtvlmh,
1297 .dir-rtl .ygtvlmhh {
1298     background-position: 0 -800px;
1300 .dir-rtl .ygtvlp {
1301     background-position: 0 -2400px;
1303 .dir-rtl .ygtvlph,
1304 .dir-rtl .ygtvlphh {
1305     background-position: 0 -3200px
1307 .dir-rtl .ygtvdepthcell {
1308     background-position: 0 -8000px;
1310 .dir-rtl .ygtvok {
1311     background-position: 0 -8800px;
1313 .dir-rtl .ygtvok:hover {
1314     background-position: 0 -8844px;
1316 .dir-rtl .ygtvcancel {
1317     background-position: 0 -8822px;
1319 .dir-rtl .ygtvcancel:hover {
1320     background-position: 0 -8866px;
1322 .dir-rtl.yui-skin-sam .yui-panel .hd {
1323     text-align: right;
1325 .dir-rtl .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
1326     text-align: right;
1328 /** Fix TinyMCE editor right to left **/
1329 .dir-rtl .clearlooks2.ie9 .mceAlert .mceMiddle span,.dir-rtl .clearlooks2 .mceConfirm .mceMiddle span {
1330     top: 44px;
1332 .dir-rtl .o2k7Skin table,
1333 .dir-rtl .o2k7Skin tbody,
1334 .dir-rtl .o2k7Skin a,
1335 .dir-rtl .o2k7Skin img,
1336 .dir-rtl .o2k7Skin tr,
1337 .dir-rtl .o2k7Skin div,
1338 .dir-rtl .o2k7Skin td,
1339 .dir-rtl .o2k7Skin iframe,
1340 .dir-rtl .o2k7Skin span,
1341 .dir-rtl .o2k7Skin *,
1342 .dir-rtl .o2k7Skin .mceText,
1343 .dir-rtl .o2k7Skin .mceListBox .mceText {
1344     text-align: right;
1346 .path-rating .ratingtable {
1347     width: 100%;
1348     margin-bottom: 1em;
1350 .path-rating .ratingtable th.rating {
1351     width: 100%;
1353 .path-rating .ratingtable td.rating,
1354 .path-rating .ratingtable td.time {
1355     white-space: nowrap;
1356     text-align: center;
1358 .initialbar {
1359     a, strong {
1360         padding-left: 3px;
1361         padding-right: 3px;
1362     }
1364 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1365 .moodle-dialogue-base .moodle-dialogue-lightbox {
1366     background-color: #AAA;
1368 .moodle-dialogue-base .hidden,
1369 .moodle-dialogue-base .moodle-dialogue-hidden {
1370     display: none;
1372 .no-scrolling {
1373     overflow: hidden;
1375 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1376     left: 0px;
1377     top: 0px;
1378     right: 0px;
1379     bottom: -50px;
1380     position: fixed;
1382 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1383     overflow: auto;
1385 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1386     width: 28px;
1387     height: 16px;
1388     background-size: 100%;
1390 .moodle-dialogue-base .moodle-dialogue {
1391     padding: 0;
1392     margin: 0;
1393     background: none;
1394     border: none;
1395     z-index: 600;
1396     outline: #000 dotted 0;
1398 .moodle-dialogue-base .moodle-dialogue-wrap {
1399     margin-top: -3px;
1400     margin-left: -3px;
1401     background-color: #fff;
1402     border: 1px solid #ccc;
1403     .border-radius(10px);
1404     .box-shadow(5px 5px 20px 0 #666);
1406 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd,
1407 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1408     margin: 0;
1409     padding: 5px;
1410     font-size: 12px;
1411     font-weight: normal;
1412     letter-spacing: 1px;
1413     color: #333;
1414     text-align: center;
1415     text-shadow: 1px 1px 1px #fff;
1416     .border-radius(10px 10px 0 0);
1417     border-bottom: 1px solid #bbb;
1418     background: #ccc;
1419     #gradient > .vertical(#fff, #ccc);
1420     filter: 0;
1422 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1423     margin: 0;
1424     padding: 0;
1425     display: inline;
1426     font-size: 100%;
1427     font-weight: bold;
1429 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1430     padding: 5px;
1432 .moodle-dialogue-base .closebutton {
1433     width: 25px;
1434     height: 15px;
1435     float: right;
1436     vertical-align: middle;
1437     display: inline-block;
1438     cursor: pointer;
1439     padding: 0;
1440     background-image: url([[pix:theme|sprite]]);
1441     background-repeat: no-repeat;
1442     border-style: none;
1444 .dir-rtl .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1445     left: 0;
1446     right: auto;
1448 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1449     padding: 1em;
1450     line-height: 2em;
1451     color: #555;
1452     font-size: 12px;
1454 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-content {
1455     padding: 0;
1456     background: #FFF;
1459 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd {
1460     padding: 10px;
1461     font-size: 16px;
1464 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1465     overflow: auto;
1466     position: absolute;
1467     top: 0px;
1468     bottom: 50px;
1469     left: 0px;
1470     right: 0px;
1471     margin: 0px;
1472     border: 0px;
1474 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd,
1475 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-wrap {
1476     border-radius: 0px;
1478 .moodle-dialogue-confirm .confirmation-dialogue {
1479     text-align: center;
1481 .moodle-dialogue-confirm .confirmation-dialogue input {
1482     text-align: center;
1484 .moodle-dialogue-exception .moodle-exception-message {
1485     text-align: center
1487 .moodle-dialogue-exception .moodle-exception-param label {
1488     font-weight: bold;
1490 .moodle-dialogue-exception .param-stacktrace label {
1491     background-color: #EEE;
1492     border: 1px solid #ccc;
1493     border-bottom-width: 0;
1495 .moodle-dialogue-exception .param-stacktrace pre {
1496     border: 1px solid #ccc;
1497     background-color: #fff;
1499 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1500     color: navy;
1501     font-size: @fontSizeSmall;
1503 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1504     color: @errorText;
1505     font-size: @fontSizeSmall;
1507 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1508     color: #333;
1509     font-size: 90%;
1510     border-bottom: 1px solid #eee;
1512 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1513     padding: 0;
1514     margin: 0.7em 1em;
1515     text-align: right;
1516     background-color: #FFF;
1517     font-size: 12px;
1519 .moodle-dialogue-confirm .confirmation-message {
1520     margin: 0.5em 1em;
1522 .moodle-dialogue-confirm .confirmation-dialogue input {
1523     min-width: 80px
1525 .moodle-dialogue-exception .moodle-exception-message {
1526     margin: 1em;
1528 .moodle-dialogue-exception .moodle-exception-param {
1529     margin-bottom: 0.5em;
1531 .moodle-dialogue-exception .moodle-exception-param label {
1532     width: 150px;
1534 .moodle-dialogue-exception .param-stacktrace label {
1535     display: block;
1536     margin: 0;
1537     padding: 4px 1em;
1539 .moodle-dialogue-exception .param-stacktrace pre {
1540     display: block;
1541     height: 200px;
1542     overflow: auto;
1544 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1545     display: inline-block;
1546     margin: 4px 0;
1548 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1549     display: inline-block;
1550     width: 50px;
1551     margin: 4px 1em;
1553 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1554     padding-left: 25px;
1555     margin-bottom: 4px;
1556     padding-bottom: 4px;
1558 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1559     .opacity(75);
1560     width: 100%;
1561     height: 100%;
1562     top: 0;
1563     left: 0;
1564     background-color: white;
1565     text-align: center;
1566     padding: 10% 0;
1568 /* Apply a default max-height on tooltip text */
1569 .moodle-dialogue .tooltiptext {
1570     max-height: 300px;
1573 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1574     z-index: 3001;
1576     .moodle-dialogue-bd {
1577         overflow: auto;
1578     }
1581 /* Question Bank - Question Chooser "Close" button */
1582 #page-question-edit.dir-rtl a.container-close {
1583     right: auto;
1584     left: 6px;
1586 /**
1587 * Chooser Dialogues (moodle-core-chooserdialogue)
1589 * This CSS belong to the chooser dialogue which should work both with, and
1590 * without javascript enabled
1591 */
1592 /* Hide the dialog and it's title */
1593 .chooserdialoguebody,
1594 .choosertitle {
1595     display: none;
1597 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1598     margin: 0;
1600 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1601     padding: 0;
1602     background: #F2F2F2;
1603     .border-bottom-radius(10px);
1605 /* Center the submit buttons within the area */
1606 .choosercontainer #chooseform .submitbuttons {
1607     padding: 0.7em 0;
1608     text-align: center;
1610 .choosercontainer #chooseform .submitbuttons input {
1611     min-width: 100px;
1612     margin: 0 0.5em;
1614 /* Various settings for the options area */
1615 .choosercontainer #chooseform .options {
1616     position: relative;
1617     border-bottom: 1px solid #BBBBBB;
1619 /* Only set these options if we're showing the js container */
1620 .jsenabled .choosercontainer #chooseform .alloptions {
1621     overflow-x: hidden;
1622     overflow-y: auto;
1623     max-width: 20.3em;
1624     .box-shadow(inset 0 0 30px 0px #ccc);
1626 .dir-rtl.jsenabled .choosercontainer #chooseform .alloptions {
1627     max-width: 18.3em;
1629 /* Settings for option rows and option subtypes */
1630 .choosercontainer #chooseform .moduletypetitle,
1631 .choosercontainer #chooseform .option,
1632 .choosercontainer #chooseform .nonoption {
1633     margin-bottom: 0;
1634     padding: 0 1.6em 0 1.6em;
1636 .choosercontainer #chooseform .moduletypetitle {
1637     text-transform: uppercase;
1638     padding-top: 1.2em;
1639     padding-bottom: 0.4em;
1641 .choosercontainer #chooseform .option .typename,
1642 .choosercontainer #chooseform .option span.modicon img.icon,
1643 .choosercontainer #chooseform .nonoption .typename,
1644 .choosercontainer #chooseform .nonoption span.modicon img.icon {
1645     padding: 0 0 0 0.5em;
1647 .dir-rtl .choosercontainer #chooseform .option .typename,
1648 .dir-rtl .choosercontainer #chooseform .option span.modicon img.icon,
1649 .dir-rtl .choosercontainer #chooseform .nonoption .typename,
1650 .dir-rtl .choosercontainer #chooseform .nonoption span.modicon img.icon {
1651     padding: 0 0.5em 0 0;
1653 .choosercontainer #chooseform .option span.modicon img.icon,
1654 .choosercontainer #chooseform .nonoption span.modicon img.icon {
1655     height: 24px;
1656     width: 24px;
1658 .choosercontainer #chooseform .option input[type=radio],
1659 .choosercontainer #chooseform .option span.typename,
1660 .choosercontainer #chooseform .option span.modicon {
1661     vertical-align: middle;
1663 .choosercontainer #chooseform .option label {
1664     display: block;
1665     padding: 0.3em 0 0.1em 0;
1666     border-bottom: 1px solid #FFFFFF;
1668 .choosercontainer #chooseform .nonoption {
1669     padding-left: 2.7em;
1670     padding-top: 0.3em;
1671     padding-bottom: 0.1em;
1673 .dir-rtl .choosercontainer #chooseform .nonoption {
1674     padding-right: 2.7em;
1675     padding-left: 0;
1677 .choosercontainer #chooseform .subtype {
1678     margin-bottom: 0;
1679     padding: 0 1.6em 0 3.2em;
1681 .dir-rtl .choosercontainer #chooseform .subtype {
1682     padding: 0 3.2em 0 1.6em;
1684 .choosercontainer #chooseform .subtype .typename {
1685     margin: 0 0 0 0.2em;
1687 .dir-rtl .choosercontainer #chooseform .subtype .typename {
1688     margin: 0 0.2em 0 0;
1690 /* The instruction/help area */
1691 .jsenabled .choosercontainer #chooseform .instruction,
1692 .jsenabled .choosercontainer #chooseform .typesummary {
1693    display: none;
1694     position: absolute;
1695     top: 0;
1696     right: 0;
1697     bottom: 0;
1698     left: 20.3em;
1699     margin: 0;
1700     padding: 1.6em;
1701     background-color: @bodyBackground;
1702     overflow-x: hidden;
1703     overflow-y: auto;
1704     line-height: 2em;
1706 .dir-rtl.jsenabled .choosercontainer #chooseform .instruction,
1707 .dir-rtl.jsenabled .choosercontainer #chooseform .typesummary {
1708     left: 0;
1709     right: 18.5em;
1710     border-right: 1px solid grey;
1712 /* Selected option settings */
1713 .jsenabled .choosercontainer #chooseform .instruction,
1714 .choosercontainer #chooseform .selected .typesummary {
1715     display: block;
1717 .choosercontainer #chooseform .selected {
1718     background-color: @bodyBackground;
1719     .box-shadow(0px 0 10px 0 #ccc);
1721 .section-modchooser-link img.smallicon {
1722     padding: 3px;
1724 /* Form element: listing */
1725 .formlistingradio {
1726     padding-bottom: 25px;
1727     padding-right: 10px;
1729 .formlistinginputradio {
1730     float: left;
1732 .formlistingmain {
1733     min-height: 225px;
1735 .formlisting {
1736     position: relative;
1737     margin: 15px 0;
1738     padding: 1px 19px 14px;
1739     background-color: white;
1740     border: 1px solid #DDD;
1741     .border-radius(4px);
1743 .formlistingmore {
1744     position: absolute;
1745     cursor: pointer;
1746     bottom: -1px;
1747     right: -1px;
1748     padding: 3px 7px;
1749     font-size: 12px;
1750     font-weight: bold;
1751     background-color: whiteSmoke;
1752     border: 1px solid #ddd;
1753     color: #9DA0A4;
1754     .border-radius(4px 0 4px 0);
1756 .formlistingall {
1757     margin: 15px 0;
1758     padding: 0;
1759     .border-radius(4px);
1761 .formlistingrow {
1762     cursor: pointer;
1763     border-bottom: 1px solid;
1764     border-color: #E1E1E8;
1765     border-left: 1px solid #E1E1E8;
1766     border-right: 1px solid #E1E1E8;
1767     background-color: #F7F7F9;
1768     .border-radius(0 0 4px 4px);
1769     padding: 6px;
1770     top: 50%;
1771     left: 50%;
1772     min-height: 34px;
1773     float: left;
1774     width: 150px;
1776 body.jsenabled .formlistingradio {
1777     display: none;
1779 body.jsenabled .formlisting {
1780     display: block;
1783 /* Badges styles */
1784 table.collection {
1785     .table;
1786     .table-bordered;
1787     .table-striped;
1789 table.collection .name {
1790     text-align: left;
1791     vertical-align: middle;
1793 table.collection .awards {
1794     width: 10%;
1795     text-align: center;
1796     vertical-align: middle;
1798 table.collection .criteria {
1799     width: 40%;
1800     text-align: left;
1801     vertical-align: top;
1803 table.collection .badgeimage,
1804 table.collection .status {
1805     width: 15%;
1806     text-align: center;
1807     vertical-align: middle;
1809 table.collection .description {
1810     width: 25%;
1811     text-align: left;
1813 table.collection .actions {
1814     width: 11em;
1815     text-align: center;
1816     vertical-align: middle;
1819 a.criteria-action {
1820     padding: 0px 3px;
1821     float: right;
1823 table.issuedbadgebox {
1824     width: 750px;
1825     background-color: #FFFFFF;
1827 table.badgeissuedimage {
1828     width: 150px;
1829     text-align: center;
1831 table.badgeissuedinfo {
1832     width: 600px;
1834 table.badgeissuedinfo .bvalue {
1835     text-align: left;
1836     vertical-align: middle;
1838 table.badgeissuedinfo .bfield {
1839     width: 125px;
1840     text-align: left;
1841     font-style: italic;
1843 .dir-rtl {
1844     table.badgeissuedinfo .bvalue,
1845     table.badgeissuedinfo .bfield {
1846         text-align: right;
1847     }
1849 ul.badges {
1850     margin: 0;
1851     list-style: none;
1853 .badges li {
1854     position: relative;
1855     display: inline-block;
1856     padding-bottom: 2em;
1857     text-align: center;
1858     vertical-align: top;
1859     width: 150px;
1861 .badges li .badge-name {
1862     display: block;
1863     padding: 5px;
1865 .badges li > img {
1866     position: absolute;
1868 .badges li .badge-image {
1869     width: 90px;
1870     height: 90px;
1871     left: 10px;
1872     top: 0px;
1873     z-index: 1;
1875 .badges li .badge-actions {
1876     position: relative;
1878 div.badge {
1879     position: relative;
1880     display: block;
1882 div.badge .expireimage {
1883     width: 100px;
1884     height: 100px;
1885     left: 20px;
1886     top: 0px;
1888 .expireimage {
1889     .opacity(85);
1890     width: 90px; height: 90px;
1891     left: 30px;
1892     top: 0px;
1893     position: absolute;
1894     z-index:10;
1896 .badge-profile {
1897     vertical-align: top;
1899 .connected {
1900     color: @successText;
1902 .notconnected {
1903     color: @errorText;
1905 .connecting {
1906     color: @warningText;
1908 #page-badges-award .recipienttable tr td {
1909     vertical-align: top;
1911 #page-badges-award .recipienttable tr td.actions .actionbutton {
1912     margin: 0.3em 0;
1913     padding: 0.5em 0;
1914     width: 100%;
1916 #page-badges-award .recipienttable tr td.existing,
1917 #page-badges-award .recipienttable tr td.potential {
1918     width: 42%;
1921 .statustable {
1922     margin-bottom: 0px;
1924 .statusbox.active {
1925     background-color: @successBackground;
1927 .statusbox.inactive {
1928     background-color: @warningBackground;
1930 .activatebadge {
1931     margin: 0px;
1932     text-align: left;
1933     vertical-align: middle;
1935 .dir-rtl .activatebadge {
1936     text-align: right;
1938 img#persona_signin {
1939     cursor: pointer;
1941 .addcourse {
1942     float: right;
1944 .invisiblefieldset {
1945     display: inline;
1946     margin: 0;
1947     padding: 0;
1948     border-width: 0;
1950 .breadcrumb-nav {
1951     float: left;
1952     margin-bottom: 10px;
1954 .dir-rtl .breadcrumb-nav {
1955     float: right;
1957 .breadcrumb-button .singlebutton div {
1958     margin-right: 0;
1960 .breadcrumb-nav .breadcrumb {
1961     margin: 0;
1964 /** Action menu component styles **/
1965 .moodle-actionmenu,
1966 .moodle-actionmenu > ul,
1967 .moodle-actionmenu > ul > li {
1968     display: inline-block;
1971 .moodle-actionmenu ul {
1972     padding: 0;
1973     margin: 0;
1974     list-style-type: none;
1977 .moodle-actionmenu .toggle-display,
1978 .moodle-actionmenu .menu-action-text {
1979     display: none; /** Hidden by default, display none so that we don't take up space. **/
1982 .jsenabled {
1983     .moodle-actionmenu[data-enhance] {
1984         display: block;
1985         .menu {
1986             display:none;
1987         }
1988         .toggle-display {
1989             display: inline; /** JS is enabled, we'll be using it so return display to normal **/
1990             .opacity(50);
1991         }
1992         .toggle-display.textmenu {
1993             display: block;
1994             margin-left: 4px;
1995             padding-left: 4px;
1996             padding-right: 4px;
1998             .iconsmall {
1999                 margin: 4px 4px 4px 0px;
2000                 padding: 8px 4px 0px 2px;
2001                 vertical-align: text-bottom;
2002             }
2004             .caret {
2005                 margin-top: 8px;
2006                 margin-left: 2px;
2007                 border-top-color: @navbarLinkColor;
2008                 &:hover,
2009                 &:active {
2010                     border-top-color: @navbarLinkColorActive;
2011                 }
2012             }
2013         }
2014     }
2015     .moodle-actionmenu[data-enhanced] {
2016         .toggle-display {
2017             .opacity(100);
2018         }
2019         .menu-action-text  {
2020             display:inline;
2021         }
2022     }
2024     &.dir-rtl {
2025         .moodle-actionmenu[data-enhance] {
2026             .toggle-display.textmenu {
2027                 margin-left: initial;
2028                 margin-right: 4px;
2030                 .caret {
2031                     margin-left: initial;
2032                     margin-right: 2px;
2033                 }
2034             }
2035         }
2036     }
2039 .moodle-actionmenu[data-enhanced].show  {
2041     position: relative;
2043     .menu {
2045         display:block;
2046         position: absolute;
2047         text-align: left;
2048         background-color: #fff;
2049         border: 1px solid #ccc;
2050         z-index:1000;
2051         .border-radius(5px);
2052         .box-shadow(5px 5px 20px 0 #666);
2054         a {
2055             display: block;
2056             color: @dropdownLinkColor;
2057             padding:2px 1em 2px 28px;
2058             &:hover {
2059                 color: @dropdownLinkColorHover;
2060                 background-color: @dropdownLinkBackgroundHover;
2061             }
2062             &:first-child {
2063                 .border-top-radius(4px);
2064             }
2065             &:last-child {
2066                 .border-bottom-radius(4px);
2067             }
2068         }
2069         a.hidden {
2070             display:none;
2071         }
2072         img {
2073             vertical-align: middle;
2074         }
2075         .iconsmall {
2076             margin: 4px 4px 4px -24px;
2077         }
2078         > li {
2079             display:block;
2080         }
2082         /** bottom left of button **/
2083         &.align-tl-bl {top: 100%;left:0;margin-top: 4px;}
2084         &.align-tr-bl {top: 100%;right: 100%;}
2085         &.align-bl-bl {bottom: 100%;left:0;}
2086         &.align-br-bl {bottom: 100%;right: 100%;}
2087         /** bottom right of button **/
2088         &.align-tl-br {top: 100%;left:100%;}
2089         &.align-tr-br {top: 100%;right: 0;margin-top: 4px;}
2090         &.align-bl-br {bottom: 100%;left:100%;}
2091         &.align-br-br {bottom: 100%;right: 0;}
2092         /** top left of button **/
2093         &.align-tl-tl {top: 0;left:0;}
2094         &.align-tr-tl {top: 0;right: 100%;margin-right: 4px;}
2095         &.align-bl-tl {bottom: 100%;left:0;margin-bottom: 4px;}
2096         &.align-br-tl {bottom: 100%;right: 100%;}
2097         /** top right of button **/
2098         &.align-tl-tr {top: 0;left:100%;margin-left: 4px;}
2099         &.align-tr-tr {top: 0;right: 0;}
2100         &.align-bl-tr {bottom: 100%;left:100%;}
2101         &.align-br-tr {bottom: 100%;right: 0;margin-bottom: 4px;}
2102     }
2105 .block .moodle-actionmenu {
2106     text-align: right;
2109 .dir-rtl {
2110     .moodle-actionmenu[data-enhanced].show  {
2111         .menu {
2112             text-align: right;
2113             left: 0;
2114             right: auto;
2115             .iconsmall {
2116                 margin-right:0;
2117                 margin-left:8px;
2118             }
2120             /** bottom left of button **/
2121             &.align-tl-bl {left: auto; right: 0;}
2122             &.align-tr-bl {right: auto; left: 100%;}
2123             &.align-bl-bl {left: auto; right: 0;}
2124             &.align-br-bl {right: auto; left: 100%;}
2125             /** bottom right of button **/
2126             &.align-tl-br {left: auto; right: 100%;}
2127             &.align-tr-br {right: auto; left: 0;}
2128             &.align-bl-br {left: auto; right: 100%;}
2129             &.align-br-br {right: auto; left: 0;}
2130             /** top left of button **/
2131             &.align-tl-tl {left: auto; right: 0;}
2132             &.align-tr-tl {right: auto; left: 100%;}
2133             &.align-bl-tl {left: auto; right: 0;}
2134             &.align-br-tl {right: auto; left: 100%;}
2135             /** top right of button **/
2136             &.align-tl-tr {left: auto; right: 100%;}
2137             &.align-tr-tr {right: auto; left: 0;}
2138             &.align-bl-tr {left: auto; right: 100%;}
2139             &.align-br-tr {right: auto; left: 0;}
2140         }
2141     }
2142     .block .moodle-actionmenu {
2143         text-align: right;
2144     }
2147 ul.dragdrop-keyboard-drag li {
2148     list-style-type: none;
2151 .block-control-actions .moodle-core-dragdrop-draghandle img {
2152     width: 12px;
2153     height: 12px;
2156 a.disabled:hover,
2157 a.disabled {
2158     text-decoration: none;
2159     cursor: default;
2160     font-style: italic;
2161     color: #808080;