Merge branch 'MDL-42711-master' of git://github.com/nebgor/moodle
[moodle.git] / theme / bootstrapbase / less / moodle / core.less
1 /* core.less */
3 /** Page layout CSS starts **/
4 .layout-option-noheader #page-header,
5 .layout-option-nonavbar #page-navbar,
6 .layout-option-nofooter #page-footer,
7 .layout-option-nocourseheader .course-content-header,
8 .layout-option-nocoursefooter .course-content-footer {
9     display:none;
10 }
12 .empty-region-side-pre #block-region-side-pre,
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 .empty-region-side-post.used-region-side-pre #region-main.span8 {
27     /** increase the span size by 1 **/
28     .fluid-span(9);
29 }
30 .empty-region-side-post.used-region-side-pre #block-region-side-pre.span4 {
31     /** decrease the span size by 1 **/
32     .fluid-span(3);
33 }
35 .empty-region-side-post #region-bs-main-and-post.span9 #region-main.span8 {
36     /** RTL with no post area. **/
37     width:100%;
38 }
40 /** Page layout CSS ends **/
42 .dir-ltr,
43 .mdl-left,
44 .dir-rtl .mdl-right {
45     text-align: left;
46 }
47 .dir-rtl,
48 .mdl-right,
49 .dir-rtl .mdl-left {
50     text-align: right;
51 }
52 #add,
53 #remove,
54 .centerpara,
55 .mdl-align {
56     text-align: center;
57 }
58 a.dimmed,
59 a.dimmed:link,
60 a.dimmed:visited,
61 a.dimmed_text,
62 a.dimmed_text:link,
63 a.dimmed_text:visited,
64 .dimmed_text,
65 .dimmed_text a,
66 .dimmed_text a:link,
67 .dimmed_text a:visited,
68 .usersuspended,
69 .usersuspended a,
70 .usersuspended a:link,
71 .usersuspended a:visited,
72 .dimmed_category,
73 .dimmed_category a {
74     .muted
75 }
76 .activity.label .dimmed_text {
77     .opacity(50)
78 }
79 .unlist,
80 .unlist li,
81 .inline-list,
82 .inline-list li,
83 .block .list,
84 .block .list li,
85 .section li.activity,
86 .section li.movehere,
87 .tabtree li {
88     list-style: none;
89     margin: 0;
90     padding: 0;
91 }
92 .inline,
93 .inline-list li {
94     display: inline;
95 }
96 .notifytiny {
97     font-size: @fontSizeMini;
98 }
99 .notifytiny li,
100 .notifytiny td {
101     font-size: 100%;
103 .red,
104 .notifyproblem {
105     color: @errorText;
107 .green,
108 .notifysuccess {
109     color: @successText;
111 .reportlink {
112     text-align: right;
114 a.autolink.glossary:hover {
115     cursor: help;
117 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
118 .collapsibleregioncaption {
119     white-space: nowrap;
121 .collapsibleregioncaption img {
122     vertical-align: middle;
124 .jsenabled .hiddenifjs {
125     display: none;
127 .visibleifjs {
128     display: none;
130 .jsenabled .visibleifjs {
131     display: inline;
133 .jsenabled .collapsibleregion {
134     overflow: hidden;
136 .jsenabled .collapsed .collapsibleregioninner {
137     visibility: hidden;
139 .collapsible-actions {
140     display: none;
141     text-align: right;
143 .dir-rtl .collapsible-actions {
144     text-align: left;
146 .jsenabled .collapsible-actions {
147     display: block;
149 .collapsible-actions .collapseexpand {
150     padding-left: 20px;
151     background: url([[pix:t/collapsed]]) 2px center no-repeat;
153 .dir-rtl .collapsible-actions .collapseexpand {
154     padding-right: 20px;
155     padding-left: 0;
156     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
158 .collapsible-actions .collapse-all,
159 .dir-rtl .collapsible-actions .collapse-all {
160     background-image: url([[pix:t/expanded]]);
162 .yui-overlay .yui-widget-bd {
163     background-color: #FFEE69;
164     border: 1px solid #A6982B;
165     border-top-color: #D4C237;
166     color: #000000;
167     left: 0;
168     padding: 2px 5px;
169     position: relative;
170     top: 0;
171     z-index: 1;
173 .clearer {
174     background: transparent;
175     border-width: 0;
176     clear: both;
177     display: block;
178     height: 1px;
179     margin: 0;
180     padding: 0;
182 .bold,
183 .warning,
184 .errorbox .title,
185 .pagingbar .title,
186 .pagingbar .thispage {
187     font-weight: bold;
189 img.resize {
190     height: 1em;
191     width: 1em;
193 .block img.resize,
194 .breadcrumb img.resize {
195     height: 0.9em;
196     width: 0.8em;
198 /* Icon styles */
199 img.icon {
200     height: 16px;
201     vertical-align: text-bottom;
202     width: 16px;
203     padding-right: 6px;
205 .dir-rtl img.icon {
206     padding-left: 6px;
207     padding-right: 0;
209 img.iconsmall {
210     height: 12px;
211     margin-right: 3px;
212     vertical-align: middle;
213     width: 12px;
215 img.iconhelp, .helplink img {
216     height: 16px;
217     padding-left: 3px;
218     vertical-align: text-bottom;
219     width: 16px;
221 h1 img.iconhelp, h1 img.icon,
222 h2 img.iconhelp, h2 img.icon,
223 h3 img.iconhelp, h3 img.icon,
224 h4 img.iconhelp, h4 img.icon,
225 h5 img.iconhelp, h5 img.icon,
226 h6 img.iconhelp, h6 img.icon {
227   vertical-align: middle;
228   padding: 4px;
230 .dir-rtl img.iconhelp, .dir-rtl .helplink img {
231     padding-right: 3px;
232     padding-left: 0;
234 img.iconlarge {
235     height: 24px;
236     width: 24px;
237     vertical-align: middle;
239 img.iconsort {
240     vertical-align: text-bottom;
241     padding-left: .3em;
242     margin-bottom: .15em;
244 .dir-rtl img.iconsort {
245     padding-right: .3em;
246     padding-left: 0;
248 img.icontoggle {
249     height: 17px;
250     vertical-align: middle;
251     width: 50px;
253 img.iconkbhelp {
254     height: 17px;
255     width: 49px;
257 img.icon-pre, .dir-rtl img.icon-post {
258     padding-right: 3px;
259     padding-left: 0;
261 img.icon-post, .dir-rtl img.icon-pre {
262     padding-left: 3px;
263     padding-right: 0;
265 .boxaligncenter {
266     margin-left: auto;
267     margin-right: auto;
269 .boxalignright {
270     margin-left: auto;
271     margin-right: 0;
273 .boxalignleft {
274     margin-left: 0;
275     margin-right: auto;
277 .boxwidthnarrow {
278     width: 30%;
280 .boxwidthnormal {
281     width: 50%;
283 .boxwidthwide {
284     width: 80%;
286 .headermain {
287     font-weight: bold;
289 #maincontent {
290     display: block;
291     height: 1px;
292     overflow: hidden;
294 img.uihint {
295     cursor: help;
297 #addmembersform table {
298     margin-left: auto;
299     margin-right: auto;
301 .flexible th {
302     white-space: nowrap;
304 table.flexible .emptyrow {
305     display: none;
307 img.emoticon {
308     vertical-align: middle;
309     width: 15px;
310     height: 15px;
312 form.popupform,
313 form.popupform div {
314     display: inline;
316 .arrow_button input {
317     overflow: hidden;
319 .action-icon img.smallicon {
320     vertical-align: text-bottom;
321     margin: 0 0.3em;
324 /** The 1-pixel padding is there to avoid phantom scroll bars on OS X (FF, Safari and Chrome)**/
325 .no-overflow {
326     overflow: auto;
327     padding-bottom: 1px;
329 .pagelayout-report .no-overflow {
330     overflow: visible;
332 .no-overflow > .generaltable {
333     margin-bottom: 0;
335 // Accessibility features
337 // Accessibility: text 'seen' by screen readers but not visual users.
338 .accesshide {
339     position: absolute;
340     left: -10000px;
341     font-weight: normal;
342     font-size: 1em;
344 .dir-rtl .accesshide {
345     top: -30000px;
346     left: auto;
348 span.hide,
349 div.hide {
350     display: none;
352 // Accessibility: Skip block link, for keyboard-only users.
353 a.skip-block,
354 a.skip {
355     position: absolute;
356     top: -1000em;
357     font-size: 0.85em;
358     text-decoration: none;
360 a.skip-block:focus,
361 a.skip-block:active,
362 a.skip:focus,
363 a.skip:active {
364     position: static;
365     display: block;
367 .skip-block-to {
368     display: block;
369     height: 1px;
370     overflow: hidden;
372 // Blogs
373 .addbloglink {
374     text-align: center;
376 .blog_entry .audience {
377     text-align: right;
378     padding-right: 4px;
380 .blog_entry .tags {
381     margin-top: 15px;
383 .blog_entry .tags .action-icon img.smallicon {
384     height: 16px;
385     width: 16px;
387 .blog_entry .content {
388     margin-left: 43px;
390 // Group
391 #page-group-index #groupeditform {
392     text-align: center;
394 #doc-contents h1 {
395     margin: 1em 0 0 0;
397 #doc-contents ul {
398     margin: 0;
399     padding: 0;
400     width: 90%;
402 #doc-contents ul li {
403     list-style-type: none;
405 .groupmanagementtable td {
406     vertical-align: top;
408 .groupmanagementtable #existingcell,
409 .groupmanagementtable #potentialcell {
410     width: 42%;
412 .groupmanagementtable #buttonscell {
413     width: 16%;
415 .groupmanagementtable #buttonscell p.arrow_button input {
416     width: auto;
417     min-width: 80%;
418     margin: 0 auto;
420 .groupmanagementtable #removeselect_wrapper,
421 .groupmanagementtable #addselect_wrapper {
422     width: 100%;
424 .groupmanagementtable #removeselect_wrapper label,
425 .groupmanagementtable #addselect_wrapper label {
426     font-weight: normal;
428 .dir-rtl .groupmanagementtable p {
429     text-align: right;
431 #group-usersummary {
432     width: 14em;
434 .groupselector {
435     margin-top: 3px;
436     margin-bottom: 3px;
437     display: inline-block;
439 .groupselector label {
440     display: inline-block;
442 // Login
443 .loginbox {
444     margin: 15px;
445     overflow: visible;
447 .loginbox.twocolumns {
448     margin: 15px;
450 .loginbox h2,
451 .loginbox .subcontent {
452     margin: 5px;
453     padding: 10px;
454     text-align: center;
456 .loginbox .loginpanel .desc {
457     margin: 0;
458     padding: 0;
459     margin-bottom: 5px;
460     margin-top:15px;
462 .loginbox .signuppanel .subcontent {
463     text-align: left;
465 .dir-rtl .loginbox .signuppanel .subcontent {
466     text-align: right;
468 .loginbox .loginsub {
469     margin-left: 0;
470     margin-right: 0;
472 .loginbox .guestsub,
473 .loginbox .forgotsub,
474 .loginbox .potentialidps {
475     margin: 5px 12%;
477 .loginbox .potentialidps .potentialidplist {
478     margin-left: 40%;
480 .loginbox .potentialidps .potentialidplist div {
481     text-align: left;
483 .loginbox .loginform {
484     margin-top: 1em;
485     text-align: left;
487 .loginbox .loginform .form-label {
488     float: left;
489     text-align: right;
490     width: 44%;
491     direction: rtl;
492     white-space: nowrap;
494 .dir-rtl .loginbox .loginform .form-label {
495     float: left;
496     text-align: right;
497     width: 44%;
498     direction: ltr;
499     white-space: nowrap;
501 .loginbox .loginform .form-input {
502     float: right;
503     width: 55%;
505 .loginbox .loginform .form-input input {
506     width: 6em;
508 .loginbox .signupform {
509     margin-top: 1em;
510     text-align: center;
512 .loginbox.twocolumns .loginpanel,
513 .loginbox.twocolumns .signuppanel {
514     width: 48%;
515     border: 0;
516     margin: 0;
517     padding: 0;
518     .box-sizing(border-box);
519     display: block;
520     float: left;
521     margin-left: 2.76243%;
522     min-height: 30px;
523     margin-bottom: -2000px;
524     padding-bottom: 2000px;
526 .loginbox .potentialidp .smallicon {
527     vertical-align: text-bottom;
528     margin: 0 .3em;
531 // Notes
532 .notepost {
533     margin-bottom: 1em;
535 .notepost .userpicture {
536     float: left;
537     margin-right: 5px;
539 .notepost .content,
540 .notepost .footer {
541     clear: both;
543 .notesgroup {
544     margin-left: 20px;
547 // My Moodle
548 .path-my .coursebox .overview {
549     margin: 15px 30px 10px 30px;
551 .path-my .coursebox .info {
552     float: none;
553     margin: 0;
556 // Modules
557 .mod_introbox {
558     padding: 10px;
560 table.mod_index {
561     width: 100%;
564 // Comments
565 .comment-ctrl {
566     font-size: 12px;
567     display: none;
568     margin: 0;
569     padding: 0;
571 .comment-ctrl h5 {
572     margin: 0;
573     padding: 5px;
575 .comment-area {
576     max-width: 400px;
577     padding: 5px;
579 .comment-area textarea {
580     width: 100%;
581     overflow: auto;
583 .comment-area .fd {
584     text-align: right;
586 .comment-meta span {
587     color: gray;
589 .comment-link img {
590     vertical-align: text-bottom;
592 .comment-list {
593     font-size: 11px;
594     overflow: auto;
595     list-style: none;
596     padding: 0;
597     margin: 0;
599 .comment-list li {
600     margin: 2px;
601     list-style: none;
602     margin-bottom: 5px;
603     clear: both;
604     padding: .3em;
605     position: relative;
607 .comment-list li.first {
608     display: none
610 .comment-paging{
611     text-align: center;
613 .comment-paging .pageno{
614     padding: 2px;
616 .comment-paging .curpage{
617     border: 1px solid #CCC;
619 .comment-message .picture {
620     width: 20px;
621     float: left;
623 .dir-rtl .comment-message .picture {
624     float: right;
626 .comment-message .text {
627     margin: 0;
628     padding: 0;
630 .comment-message .text p {
631     padding: 0;
632     margin: 0 18px 0 0;
634 .comment-delete {
635     position: absolute;
636     top: 0;
637     right: 0;
638     margin: .3em;
640 .dir-rtl .comment-delete {
641     position: absolute;
642     left: 0;
643     right: auto;
644     margin: .3em;
646 .comment-delete-confirm {
647     background: #eee;
648     padding: 2px;
649     width: 5em;
650     text-align: center;
652 .comment-container {
653     float: left;
654     margin: 4px;
656 .comment-report-selectall{
657     display: none
659 .comment-link {
660     display: none
662 .jsenabled .comment-link {
663     display: block
665 .jsenabled .showcommentsnonjs{
666     display: none
668 .jsenabled .comment-report-selectall{
669     display: inline
671 /**
672 * Completion progress report
673 */
674 .completion-expired {
675     background: @errorBackground;
677 .completion-expected {
678     font-size: @fontSizeMini;
680 .completion-sortchoice,
681 .completion-identifyfield {
682     font-size: @fontSizeMini;
683     vertical-align: bottom;
685 .completion-progresscell {
686     text-align: right;
688 .completion-expired .completion-expected {
689     font-weight: bold;
691 /**
692 * Tags
693 */
694 #page-tag-coursetags_edit .coursetag_edit_centered {
695     position: relative;
696     width: 600px;
697     margin: 20px auto;
699 #page-tag-coursetags_edit .coursetag_edit_row {
700     clear: both;
702 #page-tag-coursetags_edit .coursetag_edit_row .coursetag_edit_left {
703     float: left;
704     width: 50%;
705     text-align: right;
707 #page-tag-coursetags_edit .coursetag_edit_row .coursetag_edit_right {
708     margin-left: 50%;
710 #page-tag-coursetags_edit .coursetag_edit_input3 {
711     display: none;
713 #page-tag-coursetags_more .coursetag_more_large {
714     font-size: 120%;
716 #page-tag-coursetags_more .coursetag_more_small {
717     font-size: 80%;
719 #page-tag-coursetags_more .coursetag_more_link {
720     font-size: 80%;
722 #tag-description,
723 #tag-blogs {
724     width: 100%;
726 #tag-management-box {
727     margin-bottom: 10px;
728     line-height: 20px;
730 #tag-user-table {
731     padding: 3px;
732     clear: both;
733     width: 100%;
735 #tag-user-table {
736     .clearfix
738 img.user-image {
739     height: 100px;
740     width: 100px;
742 #small-tag-cloud-box {
743     width: 300px;
744     margin: 0 auto;
746 #big-tag-cloud-box {
747     width: 600px;
748     margin: 0 auto;
749     float: none;
751 ul#tag-cloud-list {
752     list-style: none;
753     padding: 5px;
754     margin: 0;
756 ul#tag-cloud-list li {
757     margin: 0;
758     display: inline;
759     list-style-type: none;
761 #tag-search-box {
762     text-align: center;
763     margin: 10px auto;
765 #tag-search-results-container {
766     padding: 0;
767     width: 100%;
769 #tag-search-results {
770     padding: 0;
771     margin: 15px 20% 0 20%;
772     float: left;
773     width: 60%;
774     display: block;
776 #tag-search-results li {
777     width: 30%;
778     float: left;
779     padding-left: 1%;
780     text-align: left;
781     line-height: 20px;
782     padding-right: 1%;
783     list-style: none;
785 span.flagged-tag,
786 span.flagged-tag a {
787     color: @errorText;
789 table#tag-management-list {
790     text-align: left;
791     width: 100%;
793 table#tag-management-list td,
794 table#tag-management-list th {
795     vertical-align: middle;
796     text-align: left;
797     padding: 4px;
799 .tag-management-form {
800     text-align: center;
802 #relatedtags-autocomplete-container {
803     margin-left: auto;
804     margin-right: auto;
805     min-height: 4.6em;
806     width: 100%;
808 #relatedtags-autocomplete {
809     position: relative;
810     display: block;
811     width: 60%;
812     margin-left: auto;
813     margin-right: auto;
815 #relatedtags-autocomplete .yui-ac-content {
816     position: absolute;
817     width: 420px;
818     left: 20%;
819     border: 1px solid #404040;
820     background: #fff;
821     overflow: hidden;
822     z-index: 9050;
824 #relatedtags-autocomplete .ysearchquery {
825     position: absolute;
826     right: 10px;
827     color: #808080;
828     z-index: 10;
830 #relatedtags-autocomplete .yui-ac-shadow {
831     position: absolute;
832     margin: .3em;
833     width: 100%;
834     background: #a0a0a0;
835     z-index: 9049;
837 #relatedtags-autocomplete ul {
838     padding: 0;
839     width: 100%;
840     margin: 0;
841     list-style-type: none;
843 #relatedtags-autocomplete li {
844     padding: 0 5px;
845     cursor: default;
846     white-space: nowrap;
848 #relatedtags-autocomplete li.yui-ac-highlight{
849     background: #FFFFCC;
851 h2.tag-heading,
852 div#tag-description,
853 div#tag-blogs,
854 body.tag .managelink {
855     padding: 5px;
857 .tag_cloud .s20 {
858     font-size: 1.5em;
859     font-weight: bold;
861 .tag_cloud .s19 {
862     font-size: 1.5em;
864 .tag_cloud .s18 {
865     font-size: 1.4em;
866     font-weight: bold;
868 .tag_cloud .s17 {
869     font-size: 1.4em;
871 .tag_cloud .s16 {
872     font-size: 1.3em;
873     font-weight: bold;
875 .tag_cloud .s15 {
876     font-size: 1.3em;
878 .tag_cloud .s14 {
879     font-size: 1.2em;
880     font-weight: bold;
882 .tag_cloud .s13 {
883     font-size: 1.2em;
885 .tag_cloud .s12,
886 .tag_cloud .s11 {
887     font-size: 1.1em;
888     font-weight: bold;
890 .tag_cloud .s10,
891 .tag_cloud .s9 {
892     font-size: 1.1em;
894 .tag_cloud .s8,
895 .tag_cloud .s7 {
896     font-size: 1em;
897     font-weight: bold;
899 .tag_cloud .s6,
900 .tag_cloud .s5 {
901     font-size: 1em;
903 .tag_cloud .s4,
904 .tag_cloud .s3 {
905     font-size: 0.9em;
906     font-weight: bold;
908 .tag_cloud .s2,
909 .tag_cloud .s1 {
910     font-size: 0.9em;
912 .tag_cloud .s0 {
913     font-size: 0.8em;
915 /**
916 * Web Service
917 */
918 #webservice-doc-generator td {
919     text-align: left;
920     border: 0 solid black;
922 /**
923 * Smart Select Element
924 */
925 .smartselect {
926     position: absolute;
928 .smartselect .smartselect_mask {
929     background-color: #fff;
931 .smartselect ul  {
932     padding: 0;
933     margin: 0;
935 .smartselect ul li {
936     list-style: none;
938 .smartselect .smartselect_menu {
939     margin-right: 5px;
941 .safari .smartselect .smartselect_menu {
942     margin-left: 2px;
944 .smartselect .smartselect_menu,
945 .smartselect .smartselect_submenu {
946     border: 1px solid #000;
947     background-color: #FFF;
948     display: none;
950 .smartselect .smartselect_menu.visible,
951 .smartselect .smartselect_submenu.visible {
952     display: block;
954 .smartselect .smartselect_menu_content ul li {
955     position: relative;
956     padding: 2px 5px;
958 .smartselect .smartselect_menu_content ul li a {
959     color: #333;
960     text-decoration: none;
962 .smartselect .smartselect_menu_content ul li a.selectable {
963     color: inherit;
965 .smartselect .smartselect_submenuitem {
966     background-image: url([[pix:moodle|t/collapsed]]);
967     background-repeat: no-repeat;
968     background-position: 100%;
970 /** Spanning mode */
971 .smartselect.spanningmenu .smartselect_submenu {
972     position: absolute;
973     top: -1px;
974     left: 100%;
976 .smartselect.spanningmenu .smartselect_submenu a {
977     white-space: nowrap;
978     padding-right: 16px;
980 .smartselect.spanningmenu .smartselect_menu_content ul li a.selectable:hover {
981     text-decoration: underline;
983 /** Compact mode */
984 .smartselect.compactmenu .smartselect_submenu {
985     position: relative;
986     margin: 2px -3px;
987     margin-left: 10px;
988     display: none;
989     border-width: 0;
990     z-index: 1010;
992 .smartselect.compactmenu .smartselect_submenu.visible {
993     display: block;
995 .smartselect.compactmenu .smartselect_menu {
996     z-index: 1000;
997     overflow: hidden;
999 .smartselect.compactmenu .smartselect_submenu .smartselect_submenu {
1000     z-index: 1020;
1002 .smartselect.compactmenu .smartselect_submenuitem:hover > .smartselect_menuitem_label {
1003     font-weight: bold;
1005 /**
1006 * Registration
1007 */
1008 #page-admin-registration-register .registration_textfield {
1009     width: 300px;
1011 /**
1012 * Enrol
1013 */
1014 .userenrolment {
1015     width: 100%;
1016     border-collapse: collapse;
1018 .userenrolment td {
1019     padding: 0;
1020     height: 41px;
1022 .userenrolment .subfield {
1023     margin-right: 5px;
1025 .userenrolment .col_userdetails .subfield_picture {
1026     float: left;
1028 .userenrolment .col_lastseen {
1029     width: 150px;
1031 .userenrolment .col_role {
1032     width: 262px;
1034 .userenrolment .col_role .roles {
1035     margin-right: 30px;
1037 .userenrolment .col_role .role {
1038     float: left;
1039     padding: 3px;
1040     margin: 3px;
1042 .dir-rtl .userenrolment .col_role .role {
1043     float: right;
1045 .userenrolment .col_role .role a {
1046     margin-left: 3px;
1047     cursor: pointer;
1049 .userenrolment .col_role .addrole {
1050     float: right;
1051     width: 18px;
1052     height: 18px;
1053     margin: 3px;
1054     text-align: center;
1055     background-color: @successBackground;
1056     border: 1px solid @successBorder;
1058 .userenrolment .col_role .addrole img {
1059     vertical-align: baseline;
1061 .userenrolment .hasAllRoles .col_role .addrole {
1062     display: none;
1064 .userenrolment .col_group .groups {
1065     margin-right: 30px;
1067 .userenrolment .col_group .group {
1068     float: left;
1069     padding: 3px;
1070     margin: 3px;
1071     white-space: nowrap;
1073 .userenrolment .col_group .group a {
1074     margin-left: 3px;
1075     cursor: pointer;
1077 .userenrolment .col_group .addgroup {
1078     float: right;
1079     width: 18px;
1080     margin: 3px;
1081     height: 18px;
1082     text-align: center;
1084 .userenrolment .col_group .addgroup a img {
1085     vertical-align: bottom;
1087 .userenrolment .col_enrol .enrolment {
1088     float: left;
1089     padding: 3px;
1090     margin: 3px;
1092 .userenrolment .col_enrol .enrolment a {
1093     float: right;
1094     margin-left: 3px;
1096 #page-enrol-users .enrol_user_buttons {
1097     float: right;
1099 #page-enrol-users.dir-rtl .enrol_user_buttons {
1100     float: left;
1102 #page-enrol-users .enrol_user_buttons .enrolusersbutton {
1103     margin-left: 1em;
1104     display: inline;
1106 #page-enrol-users .enrol_user_buttons .enrolusersbutton div,
1107 #page-enrol-users .enrol_user_buttons .enrolusersbutton form {
1108     display: inline;
1110 #page-enrol-users .enrol_user_buttons .enrolusersbutton input {
1111     padding-left: 6px;
1112     padding-right: 6px;
1114 #page-enrol-users.dir-rtl .col_userdetails .subfield_picture {
1115     float: right;
1117 #page-enrol-users .user-enroller-panel .uep-search-results .user .details {
1118     width: 237px;
1120 /**
1121 * Overide for RTL layout
1122 **/
1123 .dir-rtl .headermain {
1124     float: right;
1126 .dir-rtl .headermenu {
1127     float: left;
1129 .dir-rtl .loginbox .loginform .form-label {
1130     float: right;
1131     text-align: left;
1133 .dir-rtl .loginbox .loginform .form-input {
1134     text-align: right;
1136 .dir-rtl .yui3-menu-hidden {
1137     left: 0;
1139 #page-admin-roles-define.dir-rtl #rolesform .felement {
1140     margin-right: 180px;
1142 #page-message-edit.dir-rtl table.generaltable th.c0 {
1143     text-align: right;
1145 .corelightbox {
1146     background-color: #CCC;
1147     position: absolute;
1148     top: 0;
1149     left: 0;
1150     width: 100%;
1151     height: 100%;
1152     text-align: center;
1154 .corelightbox img {
1155     position: fixed;
1156     top: 50%;
1157     left: 50%;
1160 .mod-indent-outer {
1161     display: table;
1163 .mod-indent {
1164     display: table-cell;
1166 .mod-indent-1 {
1167     width: 30px;
1169 .mod-indent-2 {
1170     width: 60px;
1172 .mod-indent-3 {
1173     width: 90px;
1175 .mod-indent-4 {
1176     width: 120px;
1178 .mod-indent-5 {
1179     width: 150px;
1181 .mod-indent-6 {
1182     width: 180px;
1184 .mod-indent-7 {
1185     width: 210px;
1187 .mod-indent-8 {
1188     width: 240px;
1190 .mod-indent-9 {
1191     width: 270px;
1193 .mod-indent-10 {
1194     width: 300px;
1196 .mod-indent-11 {
1197     width: 330px;
1199 .mod-indent-12 {
1200     width: 360px;
1202 .mod-indent-13 {
1203     width: 390px;
1205 .mod-indent-14 {
1206     width: 420px;
1208 .mod-indent-15,
1209 .mod-indent-huge {
1210     width: 420px;
1213 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1214 .resourcecontent .mediaplugin_mp3 object {
1215     height: 25px;
1216     width: 600px
1218 .resourcecontent audio.mediaplugin_html5audio {
1219     width: 600px
1221 /** Large resource images should avoid hidden overflow **/
1222 .resourceimage {
1223     max-width: 100%;
1225 /* Audio player size in 'inline' mode (can only change width, as above) */
1226 .mediaplugin_mp3 object {
1227     height: 15px;
1228     width: 300px
1230 audio.mediaplugin_html5audio {
1231     width: 300px
1233 /* TinyMCE moodle media preview frame should not have padding */
1234 .core_media_preview.pagelayout-embedded #content {
1235     padding: 0;
1237 .core_media_preview.pagelayout-embedded #maincontent {
1238     height: 0;
1240 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1241     padding: 0;
1242     margin: 0;
1243     min-width: 0;
1244     background: none;
1246 /** Fix YUI 2 Treeview for Right to left languages **/
1247 .dir-rtl .ygtvtn,
1248 .dir-rtl .ygtvtm,
1249 .dir-rtl .ygtvtmh,
1250 .dir-rtl .ygtvtmhh,
1251 .dir-rtl .ygtvtp,
1252 .dir-rtl .ygtvtph,
1253 .dir-rtl .ygtvtphh,
1254 .dir-rtl .ygtvln,
1255 .dir-rtl .ygtvlm,
1256 .dir-rtl .ygtvlmh,
1257 .dir-rtl .ygtvlmhh,
1258 .dir-rtl .ygtvlp,
1259 .dir-rtl .ygtvlph,
1260 .dir-rtl .ygtvlphh,
1261 .dir-rtl .ygtvdepthcell,
1262 .dir-rtl .ygtvok,
1263 .dir-rtl .ygtvok:hover,
1264 .dir-rtl .ygtvcancel,
1265 .dir-rtl .ygtvcancel:hover {
1266     width: 18px;
1267     height: 22px;
1268     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1269     background-repeat: no-repeat;
1270     cursor: pointer;
1272 .dir-rtl .ygtvtn {
1273     background-position: 0 -5600px;
1275 .dir-rtl .ygtvtm {
1276     background-position: 0 -4000px;
1278 .dir-rtl .ygtvtmh,
1279 .dir-rtl .ygtvtmhh {
1280     background-position: 0 -4800px;
1282 .dir-rtl .ygtvtp {
1283     background-position: 0 -6400px;
1285 .dir-rtl .ygtvtph,
1286 .dir-rtl .ygtvtphh {
1287     background-position: 0 -7200px;
1289 .dir-rtl .ygtvln {
1290     background-position: 0 -1600px;
1292 .dir-rtl .ygtvlm {
1293     background-position: 0 0;
1295 .dir-rtl .ygtvlmh,
1296 .dir-rtl .ygtvlmhh {
1297     background-position: 0 -800px;
1299 .dir-rtl .ygtvlp {
1300     background-position: 0 -2400px;
1302 .dir-rtl .ygtvlph,
1303 .dir-rtl .ygtvlphh {
1304     background-position: 0 -3200px
1306 .dir-rtl .ygtvdepthcell {
1307     background-position: 0 -8000px;
1309 .dir-rtl .ygtvok {
1310     background-position: 0 -8800px;
1312 .dir-rtl .ygtvok:hover {
1313     background-position: 0 -8844px;
1315 .dir-rtl .ygtvcancel {
1316     background-position: 0 -8822px;
1318 .dir-rtl .ygtvcancel:hover {
1319     background-position: 0 -8866px;
1321 .dir-rtl.yui-skin-sam .yui-panel .hd {
1322     text-align: right;
1324 .dir-rtl .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
1325     text-align: right;
1327 /** Fix TinyMCE editor right to left **/
1328 .dir-rtl .clearlooks2.ie9 .mceAlert .mceMiddle span,.dir-rtl .clearlooks2 .mceConfirm .mceMiddle span {
1329     top: 44px;
1331 .dir-rtl .o2k7Skin table,
1332 .dir-rtl .o2k7Skin tbody,
1333 .dir-rtl .o2k7Skin a,
1334 .dir-rtl .o2k7Skin img,
1335 .dir-rtl .o2k7Skin tr,
1336 .dir-rtl .o2k7Skin div,
1337 .dir-rtl .o2k7Skin td,
1338 .dir-rtl .o2k7Skin iframe,
1339 .dir-rtl .o2k7Skin span,
1340 .dir-rtl .o2k7Skin *,
1341 .dir-rtl .o2k7Skin .mceText,
1342 .dir-rtl .o2k7Skin .mceListBox .mceText {
1343     text-align: right;
1345 .path-rating .ratingtable {
1346     width: 100%;
1347     margin-bottom: 1em;
1349 .path-rating .ratingtable th.rating {
1350     width: 100%;
1352 .path-rating .ratingtable td.rating,
1353 .path-rating .ratingtable td.time {
1354     white-space: nowrap;
1355     text-align: center;
1357 .initialbar {
1358     a, strong {
1359         padding-left: 3px;
1360         padding-right: 3px;
1361     }
1363 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1364 .moodle-dialogue-base .moodle-dialogue-lightbox {
1365     background-color: #AAA;
1367 .moodle-dialogue-base .hidden,
1368 .moodle-dialogue-base .moodle-dialogue-hidden {
1369     display: none;
1371 .no-scrolling {
1372     overflow: hidden;
1374 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1375     left: 0px;
1376     top: 0px;
1377     right: 0px;
1378     bottom: -50px;
1379     position: fixed;
1381 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1382     overflow: auto;
1384 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1385     width: 28px;
1386     height: 16px;
1387     background-size: 100%;
1389 .moodle-dialogue-base .moodle-dialogue {
1390     padding: 0;
1391     margin: 0;
1392     background: none;
1393     border: none;
1394     z-index: 600;
1395     outline: #000 dotted 0;
1397 .moodle-dialogue-base .moodle-dialogue-wrap {
1398     margin-top: -3px;
1399     margin-left: -3px;
1400     background-color: #fff;
1401     border: 1px solid #ccc;
1402     .border-radius(10px);
1403     .box-shadow(5px 5px 20px 0 #666);
1405 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd,
1406 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1407     margin: 0;
1408     padding: 5px;
1409     font-size: 12px;
1410     font-weight: normal;
1411     letter-spacing: 1px;
1412     color: #333;
1413     text-align: center;
1414     text-shadow: 1px 1px 1px #fff;
1415     .border-radius(10px 10px 0 0);
1416     border-bottom: 1px solid #bbb;
1417     background: #ccc;
1418     #gradient > .vertical(#fff, #ccc);
1419     filter: 0;
1421 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1422     margin: 0;
1423     padding: 0;
1424     display: inline;
1425     font-size: 100%;
1426     font-weight: bold;
1428 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1429     padding: 5px;
1431 .moodle-dialogue-base .closebutton {
1432     width: 25px;
1433     height: 15px;
1434     float: right;
1435     vertical-align: middle;
1436     display: inline-block;
1437     cursor: pointer;
1438     padding: 0;
1439     background-image: url([[pix:theme|sprite]]);
1440     background-repeat: no-repeat;
1441     border-style: none;
1443 .dir-rtl .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1444     left: 0;
1445     right: auto;
1447 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1448     padding: 1em;
1449     line-height: 2em;
1450     color: #555;
1451     font-size: 12px;
1453 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-content {
1454     padding: 0;
1455     background: #FFF;
1458 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd {
1459     padding: 10px;
1460     font-size: 16px;
1463 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1464     overflow: auto;
1465     position: absolute;
1466     top: 0px;
1467     bottom: 50px;
1468     left: 0px;
1469     right: 0px;
1470     margin: 0px;
1471     border: 0px;
1473 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd,
1474 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-wrap {
1475     border-radius: 0px;
1477 .moodle-dialogue-confirm .confirmation-dialogue {
1478     text-align: center;
1480 .moodle-dialogue-confirm .confirmation-dialogue input {
1481     text-align: center;
1483 .moodle-dialogue-exception .moodle-exception-message {
1484     text-align: center
1486 .moodle-dialogue-exception .moodle-exception-param label {
1487     font-weight: bold;
1489 .moodle-dialogue-exception .param-stacktrace label {
1490     background-color: #EEE;
1491     border: 1px solid #ccc;
1492     border-bottom-width: 0;
1494 .moodle-dialogue-exception .param-stacktrace pre {
1495     border: 1px solid #ccc;
1496     background-color: #fff;
1498 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1499     color: navy;
1500     font-size: @fontSizeSmall;
1502 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1503     color: @errorText;
1504     font-size: @fontSizeSmall;
1506 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1507     color: #333;
1508     font-size: 90%;
1509     border-bottom: 1px solid #eee;
1511 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1512     padding: 0;
1513     margin: 0.7em 1em;
1514     text-align: right;
1515     background-color: #FFF;
1516     font-size: 12px;
1518 .moodle-dialogue-confirm .confirmation-message {
1519     margin: 0.5em 1em;
1521 .moodle-dialogue-confirm .confirmation-dialogue input {
1522     min-width: 80px
1524 .moodle-dialogue-exception .moodle-exception-message {
1525     margin: 1em;
1527 .moodle-dialogue-exception .moodle-exception-param {
1528     margin-bottom: 0.5em;
1530 .moodle-dialogue-exception .moodle-exception-param label {
1531     width: 150px;
1533 .moodle-dialogue-exception .param-stacktrace label {
1534     display: block;
1535     margin: 0;
1536     padding: 4px 1em;
1538 .moodle-dialogue-exception .param-stacktrace pre {
1539     display: block;
1540     height: 200px;
1541     overflow: auto;
1543 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1544     display: inline-block;
1545     margin: 4px 0;
1547 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1548     display: inline-block;
1549     width: 50px;
1550     margin: 4px 1em;
1552 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1553     padding-left: 25px;
1554     margin-bottom: 4px;
1555     padding-bottom: 4px;
1557 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1558     .opacity(75);
1559     width: 100%;
1560     height: 100%;
1561     top: 0;
1562     left: 0;
1563     background-color: white;
1564     text-align: center;
1565     padding: 10% 0;
1567 /* Apply a default max-height on tooltip text */
1568 .moodle-dialogue .tooltiptext {
1569     max-height: 300px;
1572 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1573     z-index: 3001;
1575     .moodle-dialogue-bd {
1576         overflow: auto;
1577     }
1580 /* Question Bank - Question Chooser "Close" button */
1581 #page-question-edit.dir-rtl a.container-close {
1582     right: auto;
1583     left: 6px;
1585 /**
1586 * Chooser Dialogues (moodle-core-chooserdialogue)
1588 * This CSS belong to the chooser dialogue which should work both with, and
1589 * without javascript enabled
1590 */
1591 /* Hide the dialog and it's title */
1592 .chooserdialoguebody,
1593 .choosertitle {
1594     display: none;
1596 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1597     margin: 0;
1599 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1600     padding: 0;
1601     background: #F2F2F2;
1602     .border-bottom-radius(10px);
1604 /* Center the submit buttons within the area */
1605 .choosercontainer #chooseform .submitbuttons {
1606     margin: 0.7em 0;
1607     text-align: center;
1609 .choosercontainer #chooseform .submitbuttons input {
1610     min-width: 100px;
1611     margin: 0 0.5em;
1613 /* Various settings for the options area */
1614 .choosercontainer #chooseform .options {
1615     position: relative;
1616     border-bottom: 1px solid #BBBBBB;
1618 /* Only set these options if we're showing the js container */
1619 .jsenabled .choosercontainer #chooseform .alloptions {
1620     overflow-x: hidden;
1621     overflow-y: auto;
1622     max-width: 20.3em;
1623     .box-shadow(inset 0 0 30px 0px #ccc);
1625 .dir-rtl.jsenabled .choosercontainer #chooseform .alloptions {
1626     max-width: 18.3em;
1628 /* Settings for option rows and option subtypes */
1629 .choosercontainer #chooseform .moduletypetitle,
1630 .choosercontainer #chooseform .option,
1631 .choosercontainer #chooseform .nonoption {
1632     margin-bottom: 0;
1633     padding: 0 1.6em 0 1.6em;
1635 .choosercontainer #chooseform .moduletypetitle {
1636     text-transform: uppercase;
1637     padding-top: 1.2em;
1638     padding-bottom: 0.4em;
1640 .choosercontainer #chooseform .option .typename,
1641 .choosercontainer #chooseform .option span.modicon img.icon,
1642 .choosercontainer #chooseform .nonoption .typename,
1643 .choosercontainer #chooseform .nonoption span.modicon img.icon {
1644     padding: 0 0 0 0.5em;
1646 .dir-rtl .choosercontainer #chooseform .option .typename,
1647 .dir-rtl .choosercontainer #chooseform .option span.modicon img.icon,
1648 .dir-rtl .choosercontainer #chooseform .nonoption .typename,
1649 .dir-rtl .choosercontainer #chooseform .nonoption span.modicon img.icon {
1650     padding: 0 0.5em 0 0;
1652 .choosercontainer #chooseform .option span.modicon img.icon,
1653 .choosercontainer #chooseform .nonoption span.modicon img.icon {
1654     height: 24px;
1655     width: 24px;
1657 .choosercontainer #chooseform .option input[type=radio],
1658 .choosercontainer #chooseform .option span.typename,
1659 .choosercontainer #chooseform .option span.modicon {
1660     vertical-align: middle;
1662 .choosercontainer #chooseform .option label {
1663     display: block;
1664     padding: 0.3em 0 0.1em 0;
1665     border-bottom: 1px solid #FFFFFF;
1667 .choosercontainer #chooseform .nonoption {
1668     padding-left: 2.7em;
1669     padding-top: 0.3em;
1670     padding-bottom: 0.1em;
1672 .dir-rtl .choosercontainer #chooseform .nonoption {
1673     padding-right: 2.7em;
1674     padding-left: 0;
1676 .choosercontainer #chooseform .subtype {
1677     margin-bottom: 0;
1678     padding: 0 1.6em 0 3.2em;
1680 .dir-rtl .choosercontainer #chooseform .subtype {
1681     padding: 0 3.2em 0 1.6em;
1683 .choosercontainer #chooseform .subtype .typename {
1684     margin: 0 0 0 0.2em;
1686 .dir-rtl .choosercontainer #chooseform .subtype .typename {
1687     margin: 0 0.2em 0 0;
1689 /* The instruction/help area */
1690 .jsenabled .choosercontainer #chooseform .instruction,
1691 .jsenabled .choosercontainer #chooseform .typesummary {
1692    display: none;
1693     position: absolute;
1694     top: 0;
1695     right: 0;
1696     bottom: 0;
1697     left: 20.3em;
1698     margin: 0;
1699     padding: 1.6em;
1700     background-color: @bodyBackground;
1701     overflow-x: hidden;
1702     overflow-y: auto;
1703     line-height: 2em;
1705 .dir-rtl.jsenabled .choosercontainer #chooseform .instruction,
1706 .dir-rtl.jsenabled .choosercontainer #chooseform .typesummary {
1707     left: 0;
1708     right: 18.5em;
1709     border-right: 1px solid grey;
1711 /* Selected option settings */
1712 .jsenabled .choosercontainer #chooseform .instruction,
1713 .choosercontainer #chooseform .selected .typesummary {
1714     display: block;
1716 .choosercontainer #chooseform .selected {
1717     background-color: @bodyBackground;
1718     .box-shadow(0px 0 10px 0 #ccc);
1720 .section-modchooser-link img.smallicon {
1721     padding: 3px;
1723 /* Form element: listing */
1724 .formlistingradio {
1725     padding-bottom: 25px;
1726     padding-right: 10px;
1728 .formlistinginputradio {
1729     float: left;
1731 .formlistingmain {
1732     min-height: 225px;
1734 .formlisting {
1735     position: relative;
1736     margin: 15px 0;
1737     padding: 1px 19px 14px;
1738     background-color: white;
1739     border: 1px solid #DDD;
1740     .border-radius(4px);
1742 .formlistingmore {
1743     position: absolute;
1744     cursor: pointer;
1745     bottom: -1px;
1746     right: -1px;
1747     padding: 3px 7px;
1748     font-size: 12px;
1749     font-weight: bold;
1750     background-color: whiteSmoke;
1751     border: 1px solid #ddd;
1752     color: #9DA0A4;
1753     .border-radius(4px 0 4px 0);
1755 .formlistingall {
1756     margin: 15px 0;
1757     padding: 0;
1758     .border-radius(4px);
1760 .formlistingrow {
1761     cursor: pointer;
1762     border-bottom: 1px solid;
1763     border-color: #E1E1E8;
1764     border-left: 1px solid #E1E1E8;
1765     border-right: 1px solid #E1E1E8;
1766     background-color: #F7F7F9;
1767     .border-radius(0 0 4px 4px);
1768     padding: 6px;
1769     top: 50%;
1770     left: 50%;
1771     min-height: 34px;
1772     float: left;
1773     width: 150px;
1775 body.jsenabled .formlistingradio {
1776     display: none;
1778 body.jsenabled .formlisting {
1779     display: block;
1782 /* Badges styles */
1783 table.collection {
1784     .table;
1785     .table-bordered;
1786     .table-striped;
1788 table.collection .name {
1789     text-align: left;
1790     vertical-align: middle;
1792 table.collection .awards {
1793     width: 10%;
1794     text-align: center;
1795     vertical-align: middle;
1797 table.collection .criteria {
1798     width: 40%;
1799     text-align: left;
1800     vertical-align: top;
1802 table.collection .badgeimage,
1803 table.collection .status {
1804     width: 15%;
1805     text-align: center;
1806     vertical-align: middle;
1808 table.collection .description {
1809     width: 25%;
1810     text-align: left;
1812 table.collection .actions {
1813     width: 11em;
1814     text-align: center;
1815     vertical-align: middle;
1818 a.criteria-action {
1819     padding: 0px 3px;
1820     float: right;
1822 table.issuedbadgebox {
1823     width: 750px;
1824     background-color: #FFFFFF;
1826 table.badgeissuedimage {
1827     width: 150px;
1828     text-align: center;
1830 table.badgeissuedinfo {
1831     width: 600px;
1833 table.badgeissuedinfo .bvalue {
1834     text-align: left;
1835     vertical-align: middle;
1837 table.badgeissuedinfo .bfield {
1838     width: 125px;
1839     text-align: left;
1840     font-style: italic;
1842 .dir-rtl {
1843     table.badgeissuedinfo .bvalue,
1844     table.badgeissuedinfo .bfield {
1845         text-align: right;
1846     }
1848 ul.badges {
1849     margin: 0;
1850     list-style: none;
1852 .badges li {
1853     position: relative;
1854     display: inline-block;
1855     padding-bottom: 2em;
1856     text-align: center;
1857     vertical-align: top;
1858     width: 150px;
1860 .badges li .badge-name {
1861     display: block;
1862     padding: 5px;
1864 .badges li > img {
1865     position: absolute;
1867 .badges li .badge-image {
1868     width: 90px;
1869     height: 90px;
1870     left: 10px;
1871     top: 0px;
1872     z-index: 1;
1874 .badges li .badge-actions {
1875     position: relative;
1877 div.badge {
1878     position: relative;
1879     display: block;
1881 div.badge .expireimage {
1882     width: 100px;
1883     height: 100px;
1884     left: 20px;
1885     top: 0px;
1887 .expireimage {
1888     .opacity(85);
1889     width: 90px; height: 90px;
1890     left: 30px;
1891     top: 0px;
1892     position: absolute;
1893     z-index:10;
1895 .badge-profile {
1896     vertical-align: top;
1898 .connected {
1899     color: @successText;
1901 .notconnected {
1902     color: @errorText;
1904 .connecting {
1905     color: @warningText;
1907 #page-badges-award .recipienttable tr td {
1908     vertical-align: top;
1910 #page-badges-award .recipienttable tr td.actions .actionbutton {
1911     margin: 0.3em 0;
1912     padding: 0.5em 0;
1913     width: 100%;
1915 #page-badges-award .recipienttable tr td.existing,
1916 #page-badges-award .recipienttable tr td.potential {
1917     width: 42%;
1920 .statustable {
1921     margin-bottom: 0px;
1923 .statusbox.active {
1924     background-color: @successBackground;
1926 .statusbox.inactive {
1927     background-color: @warningBackground;
1929 .activatebadge {
1930     margin: 0px;
1931     text-align: left;
1932     vertical-align: middle;
1934 .dir-rtl .activatebadge {
1935     text-align: right;
1937 img#persona_signin {
1938     cursor: pointer;
1940 .addcourse {
1941     float: right;
1943 .invisiblefieldset {
1944     display: inline;
1945     margin: 0;
1946     padding: 0;
1947     border-width: 0;
1949 .breadcrumb-nav {
1950     float: left;
1951     margin-bottom: 10px;
1953 .dir-rtl .breadcrumb-nav {
1954     float: right;
1956 .breadcrumb-button .singlebutton div {
1957     margin-right: 0;
1959 .breadcrumb-nav .breadcrumb {
1960     margin: 0;
1963 /** Action menu component styles **/
1964 .moodle-actionmenu,
1965 .moodle-actionmenu > ul,
1966 .moodle-actionmenu > ul > li {
1967     display: inline-block;
1970 .moodle-actionmenu ul {
1971     padding: 0;
1972     margin: 0;
1973     list-style-type: none;
1976 .moodle-actionmenu .toggle-display,
1977 .moodle-actionmenu .menu-action-text {
1978     display: none; /** Hidden by default, display none so that we don't take up space. **/
1981 .jsenabled {
1982     .moodle-actionmenu[data-enhance] {
1983         display: block;
1984         .menu {
1985             display:none;
1986         }
1987         .toggle-display {
1988             display: inline; /** JS is enabled, we'll be using it so return display to normal **/
1989             .opacity(50);
1990         }
1991         .toggle-display.textmenu {
1992             display: block;
1993             margin-left: 4px;
1994             padding-left: 4px;
1995             padding-right: 4px;
1997             .iconsmall {
1998                 margin: 4px 4px 4px 0px;
1999                 padding: 8px 4px 0px 2px;
2000                 vertical-align: text-bottom;
2001             }
2003             .caret {
2004                 margin-top: 8px;
2005                 margin-left: 2px;
2006                 border-top-color: @navbarLinkColor;
2007                 &:hover,
2008                 &:active {
2009                     border-top-color: @navbarLinkColorActive;
2010                 }
2011             }
2012         }
2013     }
2014     .moodle-actionmenu[data-enhanced] {
2015         .toggle-display {
2016             .opacity(100);
2017         }
2018         .menu-action-text  {
2019             display:inline;
2020         }
2021     }
2023     &.dir-rtl {
2024         .moodle-actionmenu[data-enhance] {
2025             .toggle-display.textmenu {
2026                 margin-left: initial;
2027                 margin-right: 4px;
2029                 .caret {
2030                     margin-left: initial;
2031                     margin-right: 2px;
2032                 }
2033             }
2034         }
2035     }
2038 .moodle-actionmenu[data-enhanced].show  {
2040     position: relative;
2042     .menu {
2044         display:block;
2045         position: absolute;
2046         text-align: left;
2047         background-color: #fff;
2048         border: 1px solid #ccc;
2049         z-index:1000;
2050         .border-radius(5px);
2051         .box-shadow(5px 5px 20px 0 #666);
2053         a {
2054             display: block;
2055             color: @dropdownLinkColor;
2056             padding:2px 1em 2px 28px;
2057             &:hover,
2058             &:focus {
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;