Merge branch 'MDL-40848_master' of git://github.com/totara/openbadges
[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     width:100%;
19 }
21 .empty-region-side-pre #region-main {
22     float:none;
23     width:100%;
24 }
26 .fluid-span (@columns) {
27     width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
28     *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
29 }
31 .empty-region-side-post.used-region-side-pre #region-main.span8 {
32     /** increase the span size by 1 **/
33     .fluid-span(9);
34 }
35 .empty-region-side-post.used-region-side-pre #block-region-side-pre.span4 {
36     /** decrease the span size by 1 **/
37     .fluid-span(3);
38 }
40 .empty-region-side-post #region-bs-main-and-post.span9 #region-main.span8 {
41     /** RTL with no post area. **/
42     width:100%;
43 }
45 /** Page layout CSS ends **/
47 .dir-ltr,
48 .mdl-left,
49 .dir-rtl .mdl-right {
50     text-align: left;
51 }
52 .dir-rtl,
53 .mdl-right,
54 .dir-rtl .mdl-left {
55     text-align: right;
56 }
57 #add,
58 #remove,
59 .centerpara,
60 .mdl-align {
61     text-align: center;
62 }
63 a.dimmed,
64 a.dimmed:link,
65 a.dimmed:visited,
66 a.dimmed_text,
67 a.dimmed_text:link,
68 a.dimmed_text:visited,
69 .dimmed_text,
70 .dimmed_text a,
71 .dimmed_text a:link,
72 .dimmed_text a:visited,
73 .usersuspended,
74 .usersuspended a,
75 .usersuspended a:link,
76 .usersuspended a:visited,
77 .dimmed_category,
78 .dimmed_category a {
79     .muted
80 }
81 .activity.label .dimmed_text {
82     .opacity(50)
83 }
84 .unlist,
85 .unlist li,
86 .inline-list,
87 .inline-list li,
88 .block .list,
89 .block .list li,
90 .section li.activity,
91 .section li.movehere,
92 .tabtree li {
93     list-style: none;
94     margin: 0;
95     padding: 0;
96 }
97 .inline,
98 .inline-list li {
99     display: inline;
101 .notifytiny {
102     font-size: @fontSizeMini;
104 .notifytiny li,
105 .notifytiny td {
106     font-size: 100%;
108 .red,
109 .notifyproblem {
110     color: @errorText;
112 .green,
113 .notifysuccess {
114     color: @successText;
116 .reportlink {
117     text-align: right;
119 a.autolink.glossary:hover {
120     cursor: help;
122 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
123 .collapsibleregioncaption {
124     white-space: nowrap;
126 .collapsibleregioncaption img {
127     vertical-align: middle;
129 .jsenabled .hiddenifjs {
130     display: none;
132 .visibleifjs {
133     display: none;
135 .jsenabled .visibleifjs {
136     display: inline;
138 .jsenabled .collapsibleregion {
139     overflow: hidden;
141 .jsenabled .collapsed .collapsibleregioninner {
142     visibility: hidden;
144 .collapsible-actions {
145     display: none;
146     text-align: right;
148 .dir-rtl .collapsible-actions {
149     text-align: left;
151 .jsenabled .collapsible-actions {
152     display: block;
154 .collapsible-actions .collapseexpand {
155     padding-left: 20px;
156     background: url([[pix:t/collapsed]]) 2px center no-repeat;
158 .dir-rtl .collapsible-actions .collapseexpand {
159     padding-right: 20px;
160     padding-left: 0;
161     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
163 .collapsible-actions .collapse-all,
164 .dir-rtl .collapsible-actions .collapse-all {
165     background-image: url([[pix:t/expanded]]);
167 .yui-overlay .yui-widget-bd {
168     background-color: #FFEE69;
169     border: 1px solid #A6982B;
170     border-top-color: #D4C237;
171     color: #000000;
172     left: 0;
173     padding: 2px 5px;
174     position: relative;
175     top: 0;
176     z-index: 1;
178 .clearer {
179     background: transparent;
180     border-width: 0;
181     clear: both;
182     display: block;
183     height: 1px;
184     margin: 0;
185     padding: 0;
187 .bold,
188 .warning,
189 .errorbox .title,
190 .pagingbar .title,
191 .pagingbar .thispage,
192 .headingblock {
193     font-weight: bold;
195 img.resize {
196     height: 1em;
197     width: 1em;
199 .block img.resize,
200 .breadcrumb img.resize {
201     height: 0.9em;
202     width: 0.8em;
204 /* Icon styles */
205 img.icon {
206     height: 16px;
207     vertical-align: text-bottom;
208     width: 16px;
209     padding-right: 6px;
211 .dir-rtl img.icon {
212     padding-left: 6px;
213     padding-right: 0;
215 img.iconsmall {
216     height: 12px;
217     margin-right: 3px;
218     vertical-align: middle;
219     width: 12px;
221 img.iconhelp, .helplink img {
222     height: 16px;
223     padding-left: 3px;
224     vertical-align: text-bottom;
225     width: 16px;
227 h1 img.iconhelp, h1 img.icon,
228 h2 img.iconhelp, h2 img.icon,
229 h3 img.iconhelp, h3 img.icon,
230 h4 img.iconhelp, h4 img.icon,
231 h5 img.iconhelp, h5 img.icon,
232 h6 img.iconhelp, h6 img.icon {
233   vertical-align: middle;
235 .dir-rtl img.iconhelp, .dir-rtl .helplink img {
236     padding-right: 3px;
237     padding-left: 0;
239 img.iconlarge {
240     height: 24px;
241     width: 24px;
242     vertical-align: middle;
244 img.iconsort {
245     vertical-align: text-bottom;
246     padding-left: .3em;
247     margin-bottom: .15em;
249 .dir-rtl img.iconsort {
250     padding-right: .3em;
251     padding-left: 0;
253 img.icontoggle {
254     height: 17px;
255     vertical-align: middle;
256     width: 50px;
258 img.iconkbhelp {
259     height: 17px;
260     width: 49px;
262 img.icon-pre, .dir-rtl img.icon-post {
263     padding-right: 3px;
264     padding-left: 0;
266 img.icon-post, .dir-rtl img.icon-pre {
267     padding-left: 3px;
268     padding-right: 0;
270 .boxaligncenter {
271     margin-left: auto;
272     margin-right: auto;
274 .boxalignright {
275     margin-left: auto;
276     margin-right: 0;
278 .boxalignleft {
279     margin-left: 0;
280     margin-right: auto;
282 .boxwidthnarrow {
283     width: 30%;
285 .boxwidthnormal {
286     width: 50%;
288 .boxwidthwide {
289     width: 80%;
291 .headermain {
292     font-weight: bold;
294 #maincontent {
295     display: block;
296     height: 1px;
297     overflow: hidden;
299 img.uihint {
300     cursor: help;
302 #addmembersform table {
303     margin-left: auto;
304     margin-right: auto;
306 .flexible th {
307     white-space: nowrap;
309 table.flexible .emptyrow {
310     display: none;
312 img.emoticon {
313     vertical-align: middle;
314     width: 15px;
315     height: 15px;
317 form.popupform,
318 form.popupform div {
319     display: inline;
321 .arrow_button input {
322     overflow: hidden;
324 .action-icon img.smallicon {
325     vertical-align: text-bottom;
326     margin: 0 0.3em;
329 /** The 1-pixel padding is there to avoid phantom scroll bars on OS X (FF, Safari and Chrome)**/
330 .no-overflow {
331     overflow: auto;
332     padding-bottom: 1px;
334 .pagelayout-report .no-overflow {
335     overflow: visible;
337 .no-overflow > .generaltable {
338     margin-bottom: 0;
340 // Accessibility features
342 // Accessibility: text 'seen' by screen readers but not visual users.
343 .accesshide {
344     position: absolute;
345     left: -10000px;
346     font-weight: normal;
347     font-size: 1em;
349 .dir-rtl .accesshide {
350     top: -30000px;
351     left: auto;
353 span.hide,
354 div.hide {
355     display: none;
357 // Accessibility: Skip block link, for keyboard-only users.
358 a.skip-block,
359 a.skip {
360     position: absolute;
361     top: -1000em;
362     font-size: 0.85em;
363     text-decoration: none;
365 a.skip-block:focus,
366 a.skip-block:active,
367 a.skip:focus,
368 a.skip:active {
369     position: static;
370     display: block;
372 .skip-block-to {
373     display: block;
374     height: 1px;
375     overflow: hidden;
377 // Blogs
378 .addbloglink {
379     text-align: center;
381 .blog_entry .audience {
382     text-align: right;
383     padding-right: 4px;
385 .blog_entry .tags {
386     margin-top: 15px;
388 .blog_entry .tags .action-icon img.smallicon {
389     height: 16px;
390     width: 16px;
392 .blog_entry .content {
393     margin-left: 43px;
395 // Group
396 #page-group-index #groupeditform {
397     text-align: center;
399 #doc-contents h1 {
400     margin: 1em 0 0 0;
402 #doc-contents ul {
403     margin: 0;
404     padding: 0;
405     width: 90%;
407 #doc-contents ul li {
408     list-style-type: none;
410 .groupmanagementtable td {
411     vertical-align: top;
413 .groupmanagementtable #existingcell,
414 .groupmanagementtable #potentialcell {
415     width: 42%;
417 .groupmanagementtable #buttonscell {
418     width: 16%;
420 .groupmanagementtable #buttonscell p.arrow_button input {
421     width: auto;
422     min-width: 80%;
423     margin: 0 auto;
425 .groupmanagementtable #removeselect_wrapper,
426 .groupmanagementtable #addselect_wrapper {
427     width: 100%;
429 .groupmanagementtable #removeselect_wrapper label,
430 .groupmanagementtable #addselect_wrapper label {
431     font-weight: normal;
433 .dir-rtl .groupmanagementtable p {
434     text-align: right;
436 #group-usersummary {
437     width: 14em;
439 .groupselector {
440     margin-top: 3px;
441     margin-bottom: 3px;
444 // Login
445 .loginbox {
446     margin: 15px;
447     overflow: visible;
449 .loginbox.twocolumns {
450     margin: 15px;
452 .loginbox h2,
453 .loginbox .subcontent {
454     margin: 5px;
455     padding: 10px;
456     text-align: center;
458 .loginbox .loginpanel .desc {
459     margin: 0;
460     padding: 0;
461     margin-bottom: 5px;
462     margin-top:15px;
464 .loginbox .signuppanel .subcontent {
465     text-align: left;
467 .dir-rtl .loginbox .signuppanel .subcontent {
468     text-align: right;
470 .loginbox .loginsub {
471     margin-left: 0;
472     margin-right: 0;
474 .loginbox .guestsub,
475 .loginbox .forgotsub,
476 .loginbox .potentialidps {
477     margin: 5px 12%;
479 .loginbox .potentialidps .potentialidplist {
480     margin-left: 40%;
482 .loginbox .potentialidps .potentialidplist div {
483     text-align: left;
485 .loginbox .loginform {
486     margin-top: 1em;
487     text-align: left;
489 .loginbox .loginform .form-label {
490     float: left;
491     text-align: right;
492     width: 44%;
493     direction: rtl;
494     white-space: nowrap;
496 .dir-rtl .loginbox .loginform .form-label {
497     float: left;
498     text-align: right;
499     width: 44%;
500     direction: ltr;
501     white-space: nowrap;
503 .loginbox .loginform .form-input {
504     float: right;
505     width: 55%;
507 .loginbox .loginform .form-input input {
508     width: 6em;
510 .loginbox .signupform {
511     margin-top: 1em;
512     text-align: center;
514 .loginbox.twocolumns .loginpanel,
515 .loginbox.twocolumns .signuppanel {
516     width: 48%;
517     border: 0;
518     margin: 0;
519     padding: 0;
520     .box-sizing(border-box);
521     display: block;
522     float: left;
523     margin-left: 2.76243%;
524     min-height: 30px;
525     margin-bottom: -2000px;
526     padding-bottom: 2000px;
528 .loginbox .potentialidp .smallicon {
529     vertical-align: text-bottom;
530     margin: 0 .3em;
533 // Notes
534 .notepost {
535     margin-bottom: 1em;
537 .notepost .userpicture {
538     float: left;
539     margin-right: 5px;
541 .notepost .content,
542 .notepost .footer {
543     clear: both;
545 .notesgroup {
546     margin-left: 20px;
549 // My Moodle
550 .path-my .coursebox .overview {
551     margin: 15px 30px 10px 30px;
553 .path-my .coursebox .info {
554     float: none;
555     margin: 0;
558 // Modules
559 .mod_introbox {
560     padding: 10px;
562 table.mod_index {
563     width: 100%;
566 // Comments
567 .comment-ctrl {
568     font-size: 12px;
569     display: none;
570     margin: 0;
571     padding: 0;
573 .comment-ctrl h5 {
574     margin: 0;
575     padding: 5px;
577 .comment-area {
578     max-width: 400px;
579     padding: 5px;
581 .comment-area textarea {
582     width: 100%;
583     overflow: auto;
585 .comment-area .fd {
586     text-align: right;
588 .comment-meta span {
589     color: gray;
591 .comment-link img {
592     vertical-align: text-bottom;
594 .comment-list {
595     font-size: 11px;
596     overflow: auto;
597     list-style: none;
598     padding: 0;
599     margin: 0;
601 .comment-list li {
602     margin: 2px;
603     list-style: none;
604     margin-bottom: 5px;
605     clear: both;
606     padding: .3em;
607     position: relative;
609 .comment-list li.first {
610     display: none
612 .comment-paging{
613     text-align: center;
615 .comment-paging .pageno{
616     padding: 2px;
618 .comment-paging .curpage{
619     border: 1px solid #CCC;
621 .comment-message .picture {
622     width: 20px;
623     float: left;
625 .dir-rtl .comment-message .picture {
626     float: right;
628 .comment-message .text {
629     margin: 0;
630     padding: 0;
632 .comment-message .text p {
633     padding: 0;
634     margin: 0 18px 0 0;
636 .comment-delete {
637     position: absolute;
638     top: 0;
639     right: 0;
640     margin: .3em;
642 .dir-rtl .comment-delete {
643     position: absolute;
644     left: 0;
645     right: auto;
646     margin: .3em;
648 .comment-delete-confirm {
649     background: #eee;
650     padding: 2px;
651     width: 5em;
652     text-align: center;
654 .comment-container {
655     float: left;
656     margin: 4px;
658 .comment-report-selectall{
659     display: none
661 .comment-link {
662     display: none
664 .jsenabled .comment-link {
665     display: block
667 .jsenabled .showcommentsnonjs{
668     display: none
670 .jsenabled .comment-report-selectall{
671     display: inline
673 /**
674 * Completion progress report
675 */
676 .completion-expired {
677     background: @errorBackground;
679 .completion-expected {
680     font-size: @fontSizeMini;
682 .completion-sortchoice,
683 .completion-identifyfield {
684     font-size: @fontSizeMini;
685     vertical-align: bottom;
687 .completion-progresscell {
688     text-align: right;
690 .completion-expired .completion-expected {
691     font-weight: bold;
693 /**
694 * Tags
695 */
696 #page-tag-coursetags_edit .coursetag_edit_centered {
697     position: relative;
698     width: 600px;
699     margin: 20px auto;
701 #page-tag-coursetags_edit .coursetag_edit_row {
702     clear: both;
704 #page-tag-coursetags_edit .coursetag_edit_row .coursetag_edit_left {
705     float: left;
706     width: 50%;
707     text-align: right;
709 #page-tag-coursetags_edit .coursetag_edit_row .coursetag_edit_right {
710     margin-left: 50%;
712 #page-tag-coursetags_edit .coursetag_edit_input3 {
713     display: none;
715 #page-tag-coursetags_more .coursetag_more_large {
716     font-size: 120%;
718 #page-tag-coursetags_more .coursetag_more_small {
719     font-size: 80%;
721 #page-tag-coursetags_more .coursetag_more_link {
722     font-size: 80%;
724 #tag-description,
725 #tag-blogs {
726     width: 100%;
728 #tag-management-box {
729     margin-bottom: 10px;
730     line-height: 20px;
732 #tag-user-table {
733     padding: 3px;
734     clear: both;
735     width: 100%;
737 #tag-user-table {
738     .clearfix
740 img.user-image {
741     height: 100px;
742     width: 100px;
744 #small-tag-cloud-box {
745     width: 300px;
746     margin: 0 auto;
748 #big-tag-cloud-box {
749     width: 600px;
750     margin: 0 auto;
751     float: none;
753 ul#tag-cloud-list {
754     list-style: none;
755     padding: 5px;
756     margin: 0;
758 ul#tag-cloud-list li {
759     margin: 0;
760     display: inline;
761     list-style-type: none;
763 #tag-search-box {
764     text-align: center;
765     margin: 10px auto;
767 #tag-search-results-container {
768     padding: 0;
769     width: 100%;
771 #tag-search-results {
772     padding: 0;
773     margin: 15px 20% 0 20%;
774     float: left;
775     width: 60%;
776     display: block;
778 #tag-search-results li {
779     width: 30%;
780     float: left;
781     padding-left: 1%;
782     text-align: left;
783     line-height: 20px;
784     padding-right: 1%;
785     list-style: none;
787 span.flagged-tag,
788 span.flagged-tag a {
789     color: @errorText;
791 table#tag-management-list {
792     text-align: left;
793     width: 100%;
795 table#tag-management-list td,
796 table#tag-management-list th {
797     vertical-align: middle;
798     text-align: left;
799     padding: 4px;
801 .tag-management-form {
802     text-align: center;
804 #relatedtags-autocomplete-container {
805     margin-left: auto;
806     margin-right: auto;
807     min-height: 4.6em;
808     width: 100%;
810 #relatedtags-autocomplete {
811     position: relative;
812     display: block;
813     width: 60%;
814     margin-left: auto;
815     margin-right: auto;
817 #relatedtags-autocomplete .yui-ac-content {
818     position: absolute;
819     width: 420px;
820     left: 20%;
821     border: 1px solid #404040;
822     background: #fff;
823     overflow: hidden;
824     z-index: 9050;
826 #relatedtags-autocomplete .ysearchquery {
827     position: absolute;
828     right: 10px;
829     color: #808080;
830     z-index: 10;
832 #relatedtags-autocomplete .yui-ac-shadow {
833     position: absolute;
834     margin: .3em;
835     width: 100%;
836     background: #a0a0a0;
837     z-index: 9049;
839 #relatedtags-autocomplete ul {
840     padding: 0;
841     width: 100%;
842     margin: 0;
843     list-style-type: none;
845 #relatedtags-autocomplete li {
846     padding: 0 5px;
847     cursor: default;
848     white-space: nowrap;
850 #relatedtags-autocomplete li.yui-ac-highlight{
851     background: #FFFFCC;
853 h2.tag-heading,
854 div#tag-description,
855 div#tag-blogs,
856 body.tag .managelink {
857     padding: 5px;
859 .tag_cloud .s20 {
860     font-size: 1.5em;
861     font-weight: bold;
863 .tag_cloud .s19 {
864     font-size: 1.5em;
866 .tag_cloud .s18 {
867     font-size: 1.4em;
868     font-weight: bold;
870 .tag_cloud .s17 {
871     font-size: 1.4em;
873 .tag_cloud .s16 {
874     font-size: 1.3em;
875     font-weight: bold;
877 .tag_cloud .s15 {
878     font-size: 1.3em;
880 .tag_cloud .s14 {
881     font-size: 1.2em;
882     font-weight: bold;
884 .tag_cloud .s13 {
885     font-size: 1.2em;
887 .tag_cloud .s12,
888 .tag_cloud .s11 {
889     font-size: 1.1em;
890     font-weight: bold;
892 .tag_cloud .s10,
893 .tag_cloud .s9 {
894     font-size: 1.1em;
896 .tag_cloud .s8,
897 .tag_cloud .s7 {
898     font-size: 1em;
899     font-weight: bold;
901 .tag_cloud .s6,
902 .tag_cloud .s5 {
903     font-size: 1em;
905 .tag_cloud .s4,
906 .tag_cloud .s3 {
907     font-size: 0.9em;
908     font-weight: bold;
910 .tag_cloud .s2,
911 .tag_cloud .s1 {
912     font-size: 0.9em;
914 .tag_cloud .s0 {
915     font-size: 0.8em;
917 /**
918 * Web Service
919 */
920 #webservice-doc-generator td {
921     text-align: left;
922     border: 0 solid black;
924 /**
925 * Smart Select Element
926 */
927 .smartselect {
928     position: absolute;
930 .smartselect .smartselect_mask {
931     background-color: #fff;
933 .smartselect ul  {
934     padding: 0;
935     margin: 0;
937 .smartselect ul li {
938     list-style: none;
940 .smartselect .smartselect_menu {
941     margin-right: 5px;
943 .safari .smartselect .smartselect_menu {
944     margin-left: 2px;
946 .smartselect .smartselect_menu,
947 .smartselect .smartselect_submenu {
948     border: 1px solid #000;
949     background-color: #FFF;
950     display: none;
952 .smartselect .smartselect_menu.visible,
953 .smartselect .smartselect_submenu.visible {
954     display: block;
956 .smartselect .smartselect_menu_content ul li {
957     position: relative;
958     padding: 2px 5px;
960 .smartselect .smartselect_menu_content ul li a {
961     color: #333;
962     text-decoration: none;
964 .smartselect .smartselect_menu_content ul li a.selectable {
965     color: inherit;
967 .smartselect .smartselect_submenuitem {
968     background-image: url([[pix:moodle|t/collapsed]]);
969     background-repeat: no-repeat;
970     background-position: 100%;
972 /** Spanning mode */
973 .smartselect.spanningmenu .smartselect_submenu {
974     position: absolute;
975     top: -1px;
976     left: 100%;
978 .smartselect.spanningmenu .smartselect_submenu a {
979     white-space: nowrap;
980     padding-right: 16px;
982 .smartselect.spanningmenu .smartselect_menu_content ul li a.selectable:hover {
983     text-decoration: underline;
985 /** Compact mode */
986 .smartselect.compactmenu .smartselect_submenu {
987     position: relative;
988     margin: 2px -3px;
989     margin-left: 10px;
990     display: none;
991     border-width: 0;
992     z-index: 1010;
994 .smartselect.compactmenu .smartselect_submenu.visible {
995     display: block;
997 .smartselect.compactmenu .smartselect_menu {
998     z-index: 1000;
999     overflow: hidden;
1001 .smartselect.compactmenu .smartselect_submenu .smartselect_submenu {
1002     z-index: 1020;
1004 .smartselect.compactmenu .smartselect_submenuitem:hover > .smartselect_menuitem_label {
1005     font-weight: bold;
1007 /**
1008 * Registration
1009 */
1010 #page-admin-registration-register .registration_textfield {
1011     width: 300px;
1013 /**
1014 * Enrol
1015 */
1016 .userenrolment {
1017     width: 100%;
1018     border-collapse: collapse;
1020 .userenrolment td {
1021     padding: 0;
1022     height: 41px;
1024 .userenrolment .subfield {
1025     margin-right: 5px;
1027 .userenrolment .col_userdetails .subfield_picture {
1028     float: left;
1030 .userenrolment .col_lastseen {
1031     width: 150px;
1033 .userenrolment .col_role {
1034     width: 262px;
1036 .userenrolment .col_role .roles {
1037     margin-right: 30px;
1039 .userenrolment .col_role .role {
1040     float: left;
1041     padding: 3px;
1042     margin: 3px;
1044 .dir-rtl .userenrolment .col_role .role {
1045     float: right;
1047 .userenrolment .col_role .role a {
1048     margin-left: 3px;
1049     cursor: pointer;
1051 .userenrolment .col_role .addrole {
1052     float: right;
1053     width: 18px;
1054     height: 18px;
1055     margin: 3px;
1056     text-align: center;
1057     background-color: @successBackground;
1058     border: 1px solid @successBorder;
1060 .userenrolment .col_role .addrole img {
1061     vertical-align: baseline;
1063 .userenrolment .hasAllRoles .col_role .addrole {
1064     display: none;
1066 .userenrolment .col_group .groups {
1067     margin-right: 30px;
1069 .userenrolment .col_group .group {
1070     float: left;
1071     padding: 3px;
1072     margin: 3px;
1073     white-space: nowrap;
1075 .userenrolment .col_group .group a {
1076     margin-left: 3px;
1077     cursor: pointer;
1079 .userenrolment .col_group .addgroup {
1080     float: right;
1081     width: 18px;
1082     margin: 3px;
1083     height: 18px;
1084     text-align: center;
1086 .userenrolment .col_group .addgroup a img {
1087     vertical-align: bottom;
1089 .userenrolment .col_enrol .enrolment {
1090     float: left;
1091     padding: 3px;
1092     margin: 3px;
1094 .userenrolment .col_enrol .enrolment a {
1095     float: right;
1096     margin-left: 3px;
1098 #page-enrol-users .enrol_user_buttons {
1099     float: right;
1101 #page-enrol-users.dir-rtl .enrol_user_buttons {
1102     float: left;
1104 #page-enrol-users .enrol_user_buttons .enrolusersbutton {
1105     margin-left: 1em;
1106     display: inline;
1108 #page-enrol-users .enrol_user_buttons .enrolusersbutton div,
1109 #page-enrol-users .enrol_user_buttons .enrolusersbutton form {
1110     display: inline;
1112 #page-enrol-users .enrol_user_buttons .enrolusersbutton input {
1113     padding-left: 6px;
1114     padding-right: 6px;
1116 #page-enrol-users.dir-rtl .col_userdetails .subfield_picture {
1117     float: right;
1119 #page-enrol-users .user-enroller-panel .uep-search-results .user .details {
1120     width: 237px;
1122 /**
1123 * Overide for RTL layout
1124 **/
1125 .dir-rtl .headermain {
1126     float: right;
1128 .dir-rtl .headermenu {
1129     float: left;
1131 .dir-rtl .loginbox .loginform .form-label {
1132     float: right;
1133     text-align: left;
1135 .dir-rtl .loginbox .loginform .form-input {
1136     text-align: right;
1138 .dir-rtl .yui3-menu-hidden {
1139     left: 0;
1141 #page-admin-roles-define.dir-rtl #rolesform .felement {
1142     margin-right: 180px;
1144 #page-message-edit.dir-rtl table.generaltable th.c0 {
1145     text-align: right;
1147 .corelightbox {
1148     background-color: #CCC;
1149     position: absolute;
1150     top: 0;
1151     left: 0;
1152     width: 100%;
1153     height: 100%;
1154     text-align: center;
1156 .corelightbox img {
1157     position: fixed;
1158     top: 50%;
1159     left: 50%;
1161 .mod-indent-1 {
1162     margin-left: 30px;
1164 .mod-indent-2 {
1165     margin-left: 60px;
1167 .mod-indent-3 {
1168     margin-left: 90px;
1170 .mod-indent-4 {
1171     margin-left: 120px;
1173 .mod-indent-5 {
1174     margin-left: 150px;
1176 .mod-indent-6 {
1177     margin-left: 180px;
1179 .mod-indent-7 {
1180     margin-left: 210px;
1182 .mod-indent-8 {
1183     margin-left: 240px;
1185 .mod-indent-9 {
1186     margin-left: 270px;
1188 .mod-indent-10 {
1189     margin-left: 300px;
1191 .mod-indent-11 {
1192     margin-left: 330px;
1194 .mod-indent-12 {
1195     margin-left: 360px;
1197 .mod-indent-13 {
1198     margin-left: 390px;
1200 .mod-indent-14 {
1201     margin-left: 420px;
1203 .mod-indent-15,
1204 .mod-indent-huge {
1205     margin-left: 420px;
1207 .dir-rtl .mod-indent-1 {
1208     margin-right: 30px;
1209     margin-left: 0;
1211 .dir-rtl .mod-indent-2 {
1212     margin-right: 60px;
1213     margin-left: 0;
1215 .dir-rtl .mod-indent-3 {
1216     margin-right: 90px;
1217     margin-left: 0;
1219 .dir-rtl .mod-indent-4 {
1220     margin-right: 120px;
1221     margin-left: 0;
1223 .dir-rtl .mod-indent-5 {
1224     margin-right: 150px;
1225     margin-left: 0;
1227 .dir-rtl .mod-indent-6 {
1228     margin-right: 180px;
1229     margin-left: 0;
1231 .dir-rtl .mod-indent-7 {
1232     margin-right: 210px;
1233     margin-left: 0;
1235 .dir-rtl .mod-indent-8 {
1236     margin-right: 240px;
1237     margin-left: 0;
1239 .dir-rtl .mod-indent-9 {
1240     margin-right: 270px;
1241     margin-left: 0;
1243 .dir-rtl .mod-indent-10 {
1244     margin-right: 300px;
1245     margin-left: 0;
1247 .dir-rtl .mod-indent-11 {
1248     margin-right: 330px;
1249     margin-left: 0;
1251 .dir-rtl .mod-indent-12 {
1252     margin-right: 360px;
1253     margin-left: 0;
1255 .dir-rtl .mod-indent-13 {
1256     margin-right: 390px;
1257     margin-left: 0;
1259 .dir-rtl .mod-indent-14 {
1260     margin-right: 420px;
1261     margin-left: 0;
1263 .dir-rtl .mod-indent-15,
1264 .dir-rtl .mod-indent-huge {
1265     margin-right: 420px;
1266     margin-left: 0;
1268 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1269 .resourcecontent .mediaplugin_mp3 object {
1270     height: 25px;
1271     width: 600px
1273 .resourcecontent audio.mediaplugin_html5audio {
1274     width: 600px
1276 /** Large resource images should avoid hidden overflow **/
1277 .resourceimage {
1278     max-width: 100%;
1280 /* Audio player size in 'inline' mode (can only change width, as above) */
1281 .mediaplugin_mp3 object {
1282     height: 15px;
1283     width: 300px
1285 audio.mediaplugin_html5audio {
1286     width: 300px
1288 /* TinyMCE moodle media preview frame should not have padding */
1289 .core_media_preview.pagelayout-embedded #content {
1290     padding: 0;
1292 .core_media_preview.pagelayout-embedded #maincontent {
1293     height: 0;
1295 .core_media_preview.pagelayout-embedded .mediaplugin {
1296     margin: 0;
1298 /** Fix YUI 2 Treeview for Right to left languages **/
1299 .dir-rtl .ygtvtn,
1300 .dir-rtl .ygtvtm,
1301 .dir-rtl .ygtvtmh,
1302 .dir-rtl .ygtvtmhh,
1303 .dir-rtl .ygtvtp,
1304 .dir-rtl .ygtvtph,
1305 .dir-rtl .ygtvtphh,
1306 .dir-rtl .ygtvln,
1307 .dir-rtl .ygtvlm,
1308 .dir-rtl .ygtvlmh,
1309 .dir-rtl .ygtvlmhh,
1310 .dir-rtl .ygtvlp,
1311 .dir-rtl .ygtvlph,
1312 .dir-rtl .ygtvlphh,
1313 .dir-rtl .ygtvdepthcell,
1314 .dir-rtl .ygtvok,
1315 .dir-rtl .ygtvok:hover,
1316 .dir-rtl .ygtvcancel,
1317 .dir-rtl .ygtvcancel:hover {
1318     width: 18px;
1319     height: 22px;
1320     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1321     background-repeat: no-repeat;
1322     cursor: pointer;
1324 .dir-rtl .ygtvtn {
1325     background-position: 0 -5600px;
1327 .dir-rtl .ygtvtm {
1328     background-position: 0 -4000px;
1330 .dir-rtl .ygtvtmh,
1331 .dir-rtl .ygtvtmhh {
1332     background-position: 0 -4800px;
1334 .dir-rtl .ygtvtp {
1335     background-position: 0 -6400px;
1337 .dir-rtl .ygtvtph,
1338 .dir-rtl .ygtvtphh {
1339     background-position: 0 -7200px;
1341 .dir-rtl .ygtvln {
1342     background-position: 0 -1600px;
1344 .dir-rtl .ygtvlm {
1345     background-position: 0 0;
1347 .dir-rtl .ygtvlmh,
1348 .dir-rtl .ygtvlmhh {
1349     background-position: 0 -800px;
1351 .dir-rtl .ygtvlp {
1352     background-position: 0 -2400px;
1354 .dir-rtl .ygtvlph,
1355 .dir-rtl .ygtvlphh {
1356     background-position: 0 -3200px
1358 .dir-rtl .ygtvdepthcell {
1359     background-position: 0 -8000px;
1361 .dir-rtl .ygtvok {
1362     background-position: 0 -8800px;
1364 .dir-rtl .ygtvok:hover {
1365     background-position: 0 -8844px;
1367 .dir-rtl .ygtvcancel {
1368     background-position: 0 -8822px;
1370 .dir-rtl .ygtvcancel:hover {
1371     background-position: 0 -8866px;
1373 .dir-rtl.yui-skin-sam .yui-panel .hd {
1374     text-align: right;
1376 .dir-rtl .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
1377     text-align: right;
1379 /** Fix TinyMCE editor right to left **/
1380 .dir-rtl .clearlooks2.ie9 .mceAlert .mceMiddle span,.dir-rtl .clearlooks2 .mceConfirm .mceMiddle span {
1381     top: 44px;
1383 .dir-rtl .o2k7Skin table,
1384 .dir-rtl .o2k7Skin tbody,
1385 .dir-rtl .o2k7Skin a,
1386 .dir-rtl .o2k7Skin img,
1387 .dir-rtl .o2k7Skin tr,
1388 .dir-rtl .o2k7Skin div,
1389 .dir-rtl .o2k7Skin td,
1390 .dir-rtl .o2k7Skin iframe,
1391 .dir-rtl .o2k7Skin span,
1392 .dir-rtl .o2k7Skin *,
1393 .dir-rtl .o2k7Skin .mceText,
1394 .dir-rtl .o2k7Skin .mceListBox .mceText {
1395     text-align: right;
1397 .path-rating .ratingtable {
1398     width: 100%;
1399     margin-bottom: 1em;
1401 .path-rating .ratingtable th.rating {
1402     width: 100%;
1404 .path-rating .ratingtable td.rating,
1405 .path-rating .ratingtable td.time {
1406     white-space: nowrap;
1407     text-align: center;
1409 .initialbar a {
1410     padding-right: 2px;
1412 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1413 .moodle-dialogue-base .moodle-dialogue-lightbox {
1414     background-color: #AAA;
1416 .moodle-dialogue-base .hidden,
1417 .moodle-dialogue-base .moodle-dialogue-hidden {
1418     display: none;
1420 .no-scrolling {
1421     overflow: hidden;
1423 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1424     left: 0px;
1425     top: 0px;
1426     right: 0px;
1427     bottom: -50px;
1428     position: fixed;
1430 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1431     width: 28px;
1432     height: 16px;
1433     background-size: 100%;
1435 .moodle-dialogue-base .moodle-dialogue {
1436     padding: 0;
1437     margin: 0;
1438     background: none;
1439     border: none;
1440     z-index: 600;
1441     outline: #000 dotted 0;
1443 .moodle-dialogue-base .moodle-dialogue-wrap {
1444     margin-top: -3px;
1445     margin-left: -3px;
1446     background-color: #fff;
1447     border: 1px solid #ccc;
1448     .border-radius(10px);
1449     .box-shadow(5px 5px 20px 0 #666);
1451 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1452     margin: 0;
1453     padding: 5px;
1454     font-size: 12px;
1455     font-weight: normal;
1456     letter-spacing: 1px;
1457     color: #333;
1458     text-align: center;
1459     text-shadow: 1px 1px 1px #fff;
1460     .border-radius(10px 10px 0 0);
1461     border-bottom: 1px solid #bbb;
1462     background: #ccc;
1463     #gradient > .vertical(#fff, #ccc);
1464     filter: dropshadow(color=#FFFFFF, offx=1, offy=1);
1466 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1467     margin: 0;
1468     padding: 0;
1469     display: inline;
1470     font-size: 100%;
1471     font-weight: bold;
1473 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1474     padding: 5px;
1476 .moodle-dialogue-base .closebutton {
1477     width: 25px;
1478     height: 15px;
1479     float: right;
1480     vertical-align: middle;
1481     display: inline-block;
1482     cursor: pointer;
1483     padding: 0;
1484     background-image: url([[pix:theme|sprite]]);
1485     background-repeat: no-repeat;
1486     border-style: none;
1488 .dir-rtl .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1489     left: 0;
1490     right: auto;
1492 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1493     overflow: auto;
1494     padding: 1em;
1495     line-height: 2em;
1496     color: #555;
1497     font-size: 12px;
1499 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-content {
1500     padding: 0;
1501     background: #FFF;
1504 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd {
1505     padding: 10px;
1506     font-size: 16px;
1509 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1510     overflow: auto;
1511     position: absolute;
1512     top: 0px;
1513     bottom: 50px;
1514     left: 0px;
1515     right: 0px;
1516     margin: 0px;
1517     border: 0px;
1519 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd,
1520 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-wrap {
1521     border-radius: 0px;
1523 .moodle-dialogue-confirm .confirmation-dialogue {
1524     text-align: center;
1526 .moodle-dialogue-confirm .confirmation-dialogue input {
1527     text-align: center;
1529 .moodle-dialogue-exception .moodle-exception-message {
1530     text-align: center
1532 .moodle-dialogue-exception .moodle-exception-param label {
1533     font-weight: bold;
1535 .moodle-dialogue-exception .param-stacktrace label {
1536     background-color: #EEE;
1537     border: 1px solid #ccc;
1538     border-bottom-width: 0;
1540 .moodle-dialogue-exception .param-stacktrace pre {
1541     border: 1px solid #ccc;
1542     background-color: #fff;
1544 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1545     color: navy;
1546     font-size: @fontSizeSmall;
1548 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1549     color: @errorText;
1550     font-size: @fontSizeSmall;
1552 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1553     color: #333;
1554     font-size: 90%;
1555     border-bottom: 1px solid #eee;
1557 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1558     padding: 0;
1559     margin: 0.7em 1em;
1560     text-align: right;
1561     background-color: #FFF;
1562     font-size: 12px;
1564 .moodle-dialogue-confirm .confirmation-message {
1565     margin: 0.5em 1em;
1567 .moodle-dialogue-confirm .confirmation-dialogue input {
1568     min-width: 80px
1570 .moodle-dialogue-exception .moodle-exception-message {
1571     margin: 1em;
1573 .moodle-dialogue-exception .moodle-exception-param {
1574     margin-bottom: 0.5em;
1576 .moodle-dialogue-exception .moodle-exception-param label {
1577     width: 150px;
1579 .moodle-dialogue-exception .param-stacktrace label {
1580     display: block;
1581     margin: 0;
1582     padding: 4px 1em;
1584 .moodle-dialogue-exception .param-stacktrace pre {
1585     display: block;
1586     height: 200px;
1587     overflow: auto;
1589 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1590     display: inline-block;
1591     margin: 4px 0;
1593 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1594     display: inline-block;
1595     width: 50px;
1596     margin: 4px 1em;
1598 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1599     padding-left: 25px;
1600     margin-bottom: 4px;
1601     padding-bottom: 4px;
1603 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1604     .opacity(75);
1605     width: 100%;
1606     height: 100%;
1607     top: 0;
1608     left: 0;
1609     background-color: white;
1610     text-align: center;
1611     padding: 10% 0;
1613 /* Apply a default max-height on tooltip text */
1614 .moodle-dialogue .tooltiptext {
1615     max-height: 300px;
1618 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1619     z-index: 3001;
1622 /* Question Bank - Question Chooser "Close" button */
1623 #page-question-edit.dir-rtl a.container-close {
1624     right: auto;
1625     left: 6px;
1627 /**
1628 * Chooser Dialogues (moodle-core-chooserdialogue)
1630 * This CSS belong to the chooser dialogue which should work both with, and
1631 * without javascript enabled
1632 */
1633 /* Hide the dialog and it's title */
1634 .chooserdialoguebody,
1635 .choosertitle {
1636     display: none;
1638 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1639     margin: 0;
1641 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1642     padding: 0;
1643     background: #F2F2F2;
1644     .border-bottom-radius(10px);
1646 /* Center the submit buttons within the area */
1647 .choosercontainer #chooseform .submitbuttons {
1648     margin: 0.7em 0;
1649     text-align: center;
1651 .choosercontainer #chooseform .submitbuttons input {
1652     min-width: 100px;
1653     margin: 0 0.5em;
1655 /* Various settings for the options area */
1656 .choosercontainer #chooseform .options {
1657     position: relative;
1658     border-bottom: 1px solid #BBBBBB;
1660 /* Only set these options if we're showing the js container */
1661 .jsenabled .choosercontainer #chooseform .alloptions {
1662     overflow-x: hidden;
1663     overflow-y: auto;
1664     max-width: 20.3em;
1665     .box-shadow(inset 0 0 30px 0px #ccc);
1667 .dir-rtl.jsenabled .choosercontainer #chooseform .alloptions {
1668     max-width: 18.3em;
1670 /* Settings for option rows and option subtypes */
1671 .choosercontainer #chooseform .moduletypetitle,
1672 .choosercontainer #chooseform .option,
1673 .choosercontainer #chooseform .nonoption {
1674     margin-bottom: 0;
1675     padding: 0 1.6em 0 1.6em;
1677 .choosercontainer #chooseform .moduletypetitle {
1678     text-transform: uppercase;
1679     padding-top: 1.2em;
1680     padding-bottom: 0.4em;
1682 .choosercontainer #chooseform .option .typename,
1683 .choosercontainer #chooseform .option span.modicon img.icon,
1684 .choosercontainer #chooseform .nonoption .typename,
1685 .choosercontainer #chooseform .nonoption span.modicon img.icon {
1686     padding: 0 0 0 0.5em;
1688 .dir-rtl .choosercontainer #chooseform .option .typename,
1689 .dir-rtl .choosercontainer #chooseform .option span.modicon img.icon,
1690 .dir-rtl .choosercontainer #chooseform .nonoption .typename,
1691 .dir-rtl .choosercontainer #chooseform .nonoption span.modicon img.icon {
1692     padding: 0 0.5em 0 0;
1694 .choosercontainer #chooseform .option span.modicon img.icon,
1695 .choosercontainer #chooseform .nonoption span.modicon img.icon {
1696     height: 24px;
1697     width: 24px;
1699 .choosercontainer #chooseform .option input[type=radio],
1700 .choosercontainer #chooseform .option span.typename,
1701 .choosercontainer #chooseform .option span.modicon {
1702     vertical-align: middle;
1704 .choosercontainer #chooseform .option label {
1705     display: block;
1706     padding: 0.3em 0 0.1em 0;
1707     border-bottom: 1px solid #FFFFFF;
1709 .choosercontainer #chooseform .nonoption {
1710     padding-left: 2.7em;
1711     padding-top: 0.3em;
1712     padding-bottom: 0.1em;
1714 .dir-rtl .choosercontainer #chooseform .nonoption {
1715     padding-right: 2.7em;
1716     padding-left: 0;
1718 .choosercontainer #chooseform .subtype {
1719     margin-bottom: 0;
1720     padding: 0 1.6em 0 3.2em;
1722 .dir-rtl .choosercontainer #chooseform .subtype {
1723     padding: 0 3.2em 0 1.6em;
1725 .choosercontainer #chooseform .subtype .typename {
1726     margin: 0 0 0 0.2em;
1728 .dir-rtl .choosercontainer #chooseform .subtype .typename {
1729     margin: 0 0.2em 0 0;
1731 /* The instruction/help area */
1732 .jsenabled .choosercontainer #chooseform .instruction,
1733 .jsenabled .choosercontainer #chooseform .typesummary {
1734    display: none;
1735     position: absolute;
1736     top: 0;
1737     right: 0;
1738     bottom: 0;
1739     left: 20.3em;
1740     margin: 0;
1741     padding: 1.6em;
1742     background-color: @bodyBackground;
1743     overflow-x: hidden;
1744     overflow-y: auto;
1745     line-height: 2em;
1747 .dir-rtl.jsenabled .choosercontainer #chooseform .instruction,
1748 .dir-rtl.jsenabled .choosercontainer #chooseform .typesummary {
1749     left: 0;
1750     right: 18.5em;
1751     border-right: 1px solid grey;
1753 /* Selected option settings */
1754 .jsenabled .choosercontainer #chooseform .instruction,
1755 .choosercontainer #chooseform .selected .typesummary {
1756     display: block;
1758 .choosercontainer #chooseform .selected {
1759     background-color: @bodyBackground;
1760     .box-shadow(0px 0 10px 0 #ccc);
1762 .section-modchooser-link img.smallicon {
1763     padding: 3px;
1765 /* Form element: listing */
1766 .formlistingradio {
1767     padding-bottom: 25px;
1768     padding-right: 10px;
1770 .formlistinginputradio {
1771     float: left;
1773 .formlistingmain {
1774     min-height: 225px;
1776 .formlisting {
1777     position: relative;
1778     margin: 15px 0;
1779     padding: 1px 19px 14px;
1780     background-color: white;
1781     border: 1px solid #DDD;
1782     .border-radius(4px);
1784 .formlistingmore {
1785     position: absolute;
1786     cursor: pointer;
1787     bottom: -1px;
1788     right: -1px;
1789     padding: 3px 7px;
1790     font-size: 12px;
1791     font-weight: bold;
1792     background-color: whiteSmoke;
1793     border: 1px solid #ddd;
1794     color: #9DA0A4;
1795     .border-radius(4px 0 4px 0);
1797 .formlistingall {
1798     margin: 15px 0;
1799     padding: 0;
1800     .border-radius(4px);
1802 .formlistingrow {
1803     cursor: pointer;
1804     border-bottom: 1px solid;
1805     border-color: #E1E1E8;
1806     border-left: 1px solid #E1E1E8;
1807     border-right: 1px solid #E1E1E8;
1808     background-color: #F7F7F9;
1809     .border-radius(0 0 4px 4px);
1810     padding: 6px;
1811     top: 50%;
1812     left: 50%;
1813     min-height: 34px;
1814     float: left;
1815     width: 150px;
1817 body.jsenabled .formlistingradio {
1818     display: none;
1820 body.jsenabled .formlisting {
1821     display: block;
1824 /* Badges styles */
1825 table.collection {
1826     .table;
1827     .table-bordered;
1828     .table-striped;
1830 table.collection .name {
1831     text-align: left;
1832     vertical-align: middle;
1834 table.collection .awards {
1835     width: 10%;
1836     text-align: center;
1837     vertical-align: middle;
1839 table.collection .criteria {
1840     width: 40%;
1841     text-align: left;
1842     vertical-align: top;
1844 table.collection .badgeimage,
1845 table.collection .status {
1846     width: 15%;
1847     text-align: center;
1848     vertical-align: middle;
1850 table.collection .description {
1851     width: 25%;
1852     text-align: left;
1854 table.collection .actions {
1855     width: 11em;
1856     text-align: center;
1857     vertical-align: middle;
1860 a.criteria-action {
1861     padding: 0px 3px;
1862     float: right;
1864 table.issuedbadgebox {
1865     width: 750px;
1866     background-color: #FFFFFF;
1868 table.badgeissuedimage {
1869     width: 150px;
1870     text-align: center;
1872 table.badgeissuedinfo {
1873     width: 600px;
1875 table.badgeissuedinfo .bvalue {
1876     text-align: left;
1877     vertical-align: middle;
1879 table.badgeissuedinfo .bfield {
1880     width: 125px;
1881     text-align: left;
1882     font-style: italic;
1884 .dir-rtl {
1885     table.badgeissuedinfo .bvalue,
1886     table.badgeissuedinfo .bfield {
1887         text-align: right;
1888     }
1890 ul.badges {
1891     margin: 0;
1892     list-style: none;
1894 .badges li {
1895     position: relative;
1896     display: inline-block;
1897     padding-bottom: 2em;
1898     text-align: center;
1899     vertical-align: top;
1900     width: 150px;
1902 .badges li .badge-name {
1903     display: block;
1904     padding: 5px;
1906 .badges li > img {
1907     position: absolute;
1909 .badges li .badge-image {
1910     width: 90px;
1911     height: 90px;
1912     left: 10px;
1913     top: 0px;
1914     z-index: 1;
1916 .badges li .badge-actions {
1917     position: relative;
1919 div.badge {
1920     position: relative;
1921     display: block;
1923 div.badge .expireimage {
1924     width: 100px;
1925     height: 100px;
1926     left: 20px;
1927     top: 0px;
1929 .expireimage {
1930     .opacity(85);
1931     width: 90px; height: 90px;
1932     left: 30px;
1933     top: 0px;
1934     position: absolute;
1935     z-index:10;
1937 .badge-profile {
1938     vertical-align: top;
1940 .connected {
1941     color: @successText;
1943 .notconnected {
1944     color: @errorText;
1946 .connecting {
1947     color: @warningText;
1949 #page-badges-award .recipienttable tr td {
1950     vertical-align: top;
1952 #page-badges-award .recipienttable tr td.actions .actionbutton {
1953     margin: 0.3em 0;
1954     padding: 0.5em 0;
1955     width: 100%;
1957 #page-badges-award .recipienttable tr td.existing,
1958 #page-badges-award .recipienttable tr td.potential {
1959     width: 42%;
1962 .statustable {
1963     margin-bottom: 0px;
1965 .statusbox.active {
1966     background-color: @successBackground;
1968 .statusbox.inactive {
1969     background-color: @warningBackground;
1971 .activatebadge {
1972     margin: 0px;
1973     text-align: left;
1974     vertical-align: middle;
1976 .dir-rtl .activatebadge {
1977     text-align: right;
1979 img#persona_signin {
1980     cursor: pointer;
1982 .addcourse {
1983     float: right;
1985 .invisiblefieldset {
1986     display: inline;
1987     margin: 0;
1988     padding: 0;
1989     border-width: 0;
1991 .breadcrumb-nav {
1992     float: left;
1993     margin-bottom: 10px;
1995 .dir-rtl .breadcrumb-nav {
1996     float: right;
1998 .breadcrumb-button .singlebutton div {
1999     margin-right: 0;
2001 .breadcrumb-nav .breadcrumb {
2002     margin: 0;
2005 /** Action menu component styles **/
2006 .moodle-actionmenu,
2007 .moodle-actionmenu > ul,
2008 .moodle-actionmenu > ul > li {
2009     display: inline-block;
2012 .moodle-actionmenu ul {
2013     padding: 0;
2014     margin: 0;
2015     list-style-type: none;
2018 .moodle-actionmenu .toggle-display,
2019 .moodle-actionmenu .menu-action-text {
2020     display: none; /** Hidden by default, display none so that we don't take up space. **/
2023 .jsenabled {
2024     .moodle-actionmenu[data-enhance] {
2025         display: block;
2026         .menu {
2027             display:none;
2028         }
2029         .toggle-display {
2030             display: inline; /** JS is enabled, we'll be using it so return display to normal **/
2031             .opacity(50);
2032         }
2033     }
2034     .moodle-actionmenu[data-enhanced] {
2035         .toggle-display {
2036             .opacity(100);
2037         }
2038         .menu-action-text  {
2039             display:inline;
2040         }
2041     }
2044 .moodle-actionmenu[data-enhanced].show  {
2046     position: relative;
2048     .menu {
2050         display:block;
2051         position: absolute;
2052         text-align: left;
2053         background-color: #fff;
2054         border: 1px solid #ccc;
2055         z-index:1000;
2056         .border-radius(5px);
2057         .box-shadow(5px 5px 20px 0 #666);
2059         a {
2060             display: block;
2061             color: @dropdownLinkColor;
2062             padding:2px 1em 2px 0.5em;
2063             &:hover,
2064             &:focus {
2065                 color: @dropdownLinkColorHover;
2066                 background-color: @dropdownLinkBackgroundHover;
2067             }
2068             &:first-child {
2069                 .border-top-radius(4px);
2070             }
2071             &:last-child {
2072                 .border-bottom-radius(4px);
2073             }
2074         }
2075         a.hidden {
2076             display:none;
2077         }
2078         img {
2079             vertical-align: middle;
2080         }
2081         .iconsmall {
2082             margin-right:8px;
2083         }
2084         > li {
2085             display:block;
2086         }
2088         /** bottom left of button **/
2089         &.align-tl-bl {top: 100%;left:0;margin-top: 4px;}
2090         &.align-tr-bl {top: 100%;right: 100%;}
2091         &.align-bl-bl {bottom: 100%;left:0;}
2092         &.align-br-bl {bottom: 100%;right: 100%;}
2093         /** bottom right of button **/
2094         &.align-tl-br {top: 100%;left:100%;}
2095         &.align-tr-br {top: 100%;right: 0;margin-top: 4px;}
2096         &.align-bl-br {bottom: 100%;left:100%;}
2097         &.align-br-br {bottom: 100%;right: 0;}
2098         /** top left of button **/
2099         &.align-tl-tl {top: 0;left:0;}
2100         &.align-tr-tl {top: 0;right: 100%;margin-right: 4px;}
2101         &.align-bl-tl {bottom: 100%;left:0;margin-bottom: 4px;}
2102         &.align-br-tl {bottom: 100%;right: 100%;}
2103         /** top right of button **/
2104         &.align-tl-tr {top: 0;left:100%;margin-left: 4px;}
2105         &.align-tr-tr {top: 0;right: 0;}
2106         &.align-bl-tr {bottom: 100%;left:100%;}
2107         &.align-br-tr {bottom: 100%;right: 0;margin-bottom: 4px;}
2108     }
2111 .action-menu-shown .moodle-actionmenu[data-enhanced] .toggle-display {
2112     background-color: #FFF;
2115 .block .moodle-actionmenu {
2116     text-align: right;
2119 .dir-rtl {
2120     .moodle-actionmenu[data-enhanced].show  {
2121         .menu {
2122             text-align: right;
2123             left: 0;
2124             right: auto;
2125             .iconsmall {
2126                 margin-right:0;
2127                 margin-left:8px;
2128             }
2130             /** bottom left of button **/
2131             &.align-tl-bl {left: auto; right: 0;}
2132             &.align-tr-bl {right: auto; left: 100%;}
2133             &.align-bl-bl {left: auto; right: 0;}
2134             &.align-br-bl {right: auto; left: 100%;}
2135             /** bottom right of button **/
2136             &.align-tl-br {left: auto; right: 100%;}
2137             &.align-tr-br {right: auto; left: 0;}
2138             &.align-bl-br {left: auto; right: 100%;}
2139             &.align-br-br {right: auto; left: 0;}
2140             /** top left of button **/
2141             &.align-tl-tl {left: auto; right: 0;}
2142             &.align-tr-tl {right: auto; left: 100%;}
2143             &.align-bl-tl {left: auto; right: 0;}
2144             &.align-br-tl {right: auto; left: 100%;}
2145             /** top right of button **/
2146             &.align-tl-tr {left: auto; right: 100%;}
2147             &.align-tr-tr {right: auto; left: 0;}
2148             &.align-bl-tr {left: auto; right: 100%;}
2149             &.align-br-tr {right: auto; left: 0;}
2150         }
2151     }
2152     .block .moodle-actionmenu {
2153         text-align: right;
2154     }
2157 ul.dragdrop-keyboard-drag li {
2158     list-style-type: none;
2161 .block-control-actions .moodle-core-dragdrop-draghandle img {
2162     width: 12px;
2163     height: 12px;
2166 a.disabled:hover,
2167 a.disabled {
2168     text-decoration: none;
2169     cursor: default;
2170     font-style: italic;
2171     color: #808080;