Merge branch 'MDL-45086-master' of git://github.com/danpoltawski/moodle
[moodle.git] / theme / bootstrapbase / less / moodle / core.less
1 /* core.less */
3 /** Page layout CSS starts **/
4 .layout-option-noheader #page-header,
5 .layout-option-nonavbar #page-navbar,
6 .layout-option-nofooter #page-footer,
7 .layout-option-nocourseheader .course-content-header,
8 .layout-option-nocoursefooter .course-content-footer {
9     display:none;
10 }
12 .empty-region-side-pre #block-region-side-pre, // Pre region is empty.
13 .empty-region-side-post #block-region-side-post, // Post region is empty.
14 .jsenabled.docked-region-side-post #block-region-side-post, // All post blocks are docked.
15 .jsenabled.docked-region-side-pre #block-region-side-pre { // All pre blocks are docked.
16     display:none;
17 }
19 .content-only #region-main.span9, // Two column layout with no block or all blocks docked.
20 .empty-region-side-post #region-bs-main-and-pre.span9, // LTR with no post area.
21 .empty-region-side-pre #region-bs-main-and-post.span9, // RTL with no pre area.
22 .empty-region-side-post #region-bs-main-and-post.span9 #region-main.span8, // RTL with no post area.
23 .jsenabled.docked-region-side-post #region-bs-main-and-pre.span9, // LTR with all post blocks docked.
24 .jsenabled.docked-region-side-post #region-bs-main-and-post.span9 #region-main.span8,
25 .jsenabled.docked-region-side-pre #region-bs-main-and-post.span9 { // RTL with all pre blocks docked.
26     width: 100%;
27 }
29 .empty-region-side-pre #region-bs-main-and-pre.span9 #region-main, // LTR with no pre area.
30 .jsenabled.docked-region-side-pre #region-bs-main-and-pre.span9 #region-main { // LTR with all pre blocks docked.
31     float:none;
32     width:100%;
33 }
35 .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
36 .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
37     #region-main.span8 {
38         /** Increase the span size by 1 **/
39         .fluid-span(9);
40     }
41     #block-region-side-pre.span4 {
42         /** Decrease the span size by 1 **/
43         .fluid-span(3);
44     }
45 }
47 .empty-region-side-pre #region-bs-main-and-post.span9 #region-main.span8, // RTL with no pre area.
48 .jsenabled.docked-region-side-pre #region-bs-main-and-post.span9 #region-main.span8 { // RTL with all pre blocks docked.
49     float: right;
50 }
52 /** Page layout CSS ends **/
54 .dir-ltr,
55 .mdl-left,
56 .dir-rtl .mdl-right {
57     text-align: left;
58 }
59 .dir-rtl,
60 .mdl-right,
61 .dir-rtl .mdl-left {
62     text-align: right;
63 }
64 #add,
65 #remove,
66 .centerpara,
67 .mdl-align {
68     text-align: center;
69 }
70 a.dimmed,
71 a.dimmed:link,
72 a.dimmed:visited,
73 a.dimmed_text,
74 a.dimmed_text:link,
75 a.dimmed_text:visited,
76 .dimmed_text,
77 .dimmed_text a,
78 .dimmed_text a:link,
79 .dimmed_text a:visited,
80 .usersuspended,
81 .usersuspended a,
82 .usersuspended a:link,
83 .usersuspended a:visited,
84 .dimmed_category,
85 .dimmed_category a {
86     .muted
87 }
88 .activity.label .dimmed_text {
89     .opacity(50)
90 }
91 .unlist,
92 .unlist li,
93 .inline-list,
94 .inline-list li,
95 .block .list,
96 .block .list li,
97 .section li.activity,
98 .section li.movehere,
99 .tabtree li {
100     list-style: none;
101     margin: 0;
102     padding: 0;
104 .inline,
105 .inline-list li {
106     display: inline;
108 .notifytiny {
109     font-size: @fontSizeMini;
111 .notifytiny li,
112 .notifytiny td {
113     font-size: 100%;
115 .red,
116 .notifyproblem {
117     color: @errorText;
119 .green,
120 .notifysuccess {
121     color: @successText;
123 .highlight {
124     background: @infoBackground;
126 .reportlink {
127     text-align: right;
129 a.autolink.glossary:hover {
130     cursor: help;
132 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
133 .collapsibleregioncaption {
134     white-space: nowrap;
136 .collapsibleregioncaption img {
137     vertical-align: middle;
139 .jsenabled .hiddenifjs {
140     display: none;
142 .visibleifjs {
143     display: none;
145 .jsenabled .visibleifjs {
146     display: inline;
148 .jsenabled .collapsibleregion {
149     overflow: hidden;
151 .jsenabled .collapsed .collapsibleregioninner {
152     visibility: hidden;
154 .collapsible-actions {
155     display: none;
156     text-align: right;
158 .dir-rtl .collapsible-actions {
159     text-align: left;
161 .jsenabled .collapsible-actions {
162     display: block;
164 .collapsible-actions .collapseexpand {
165     padding-left: 20px;
166     background: url([[pix:t/collapsed]]) 2px center no-repeat;
168 .dir-rtl .collapsible-actions .collapseexpand {
169     padding-right: 20px;
170     padding-left: 0;
171     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
173 .collapsible-actions .collapse-all,
174 .dir-rtl .collapsible-actions .collapse-all {
175     background-image: url([[pix:t/expanded]]);
177 .yui-overlay .yui-widget-bd {
178     background-color: #FFEE69;
179     border: 1px solid #A6982B;
180     border-top-color: #D4C237;
181     color: #000000;
182     left: 0;
183     padding: 2px 5px;
184     position: relative;
185     top: 0;
186     z-index: 1;
188 .clearer {
189     background: transparent;
190     border-width: 0;
191     clear: both;
192     display: block;
193     height: 1px;
194     margin: 0;
195     padding: 0;
197 .bold,
198 .warning,
199 .errorbox .title,
200 .pagingbar .title,
201 .pagingbar .thispage {
202     font-weight: bold;
204 img.resize {
205     height: 1em;
206     width: 1em;
208 .block img.resize,
209 .breadcrumb img.resize {
210     height: 0.9em;
211     width: 0.8em;
213 /* Icon styles */
214 img.icon {
215     height: 16px;
216     vertical-align: text-bottom;
217     width: 16px;
218     padding-right: 6px;
220 .dir-rtl img.icon {
221     padding-left: 6px;
222     padding-right: 0;
224 img.iconsmall {
225     height: 12px;
226     margin-right: 3px;
227     vertical-align: middle;
228     width: 12px;
230 img.iconhelp, .helplink img {
231     height: 16px;
232     padding-left: 3px;
233     vertical-align: text-bottom;
234     width: 16px;
236 h1 img.iconhelp, h1 img.icon,
237 h2 img.iconhelp, h2 img.icon,
238 h3 img.iconhelp, h3 img.icon,
239 h4 img.iconhelp, h4 img.icon,
240 h5 img.iconhelp, h5 img.icon,
241 h6 img.iconhelp, h6 img.icon {
242   vertical-align: middle;
243   padding: 4px;
245 .dir-rtl img.iconhelp, .dir-rtl .helplink img {
246     padding-right: 3px;
247     padding-left: 0;
249 img.iconlarge {
250     height: 24px;
251     width: 24px;
252     vertical-align: middle;
254 img.iconsort {
255     vertical-align: text-bottom;
256     padding-left: .3em;
257     margin-bottom: .15em;
259 .dir-rtl img.iconsort {
260     padding-right: .3em;
261     padding-left: 0;
263 img.icontoggle {
264     height: 17px;
265     vertical-align: middle;
266     width: 50px;
268 img.iconkbhelp {
269     height: 17px;
270     width: 49px;
272 img.icon-pre, .dir-rtl img.icon-post {
273     padding-right: 3px;
274     padding-left: 0;
276 img.icon-post, .dir-rtl img.icon-pre {
277     padding-left: 3px;
278     padding-right: 0;
280 .boxaligncenter {
281     margin-left: auto;
282     margin-right: auto;
284 .boxalignright {
285     margin-left: auto;
286     margin-right: 0;
288 .boxalignleft {
289     margin-left: 0;
290     margin-right: auto;
292 .boxwidthnarrow {
293     width: 30%;
295 .boxwidthnormal {
296     width: 50%;
298 .boxwidthwide {
299     width: 80%;
301 .headermain {
302     font-weight: bold;
304 #maincontent {
305     display: block;
306     height: 1px;
307     overflow: hidden;
309 img.uihint {
310     cursor: help;
312 #addmembersform table {
313     margin-left: auto;
314     margin-right: auto;
316 table.flexible .emptyrow {
317     display: none;
319 img.emoticon {
320     vertical-align: middle;
321     width: 15px;
322     height: 15px;
324 form.popupform,
325 form.popupform div {
326     display: inline;
328 .arrow_button input {
329     overflow: hidden;
331 .action-icon img.smallicon {
332     vertical-align: text-bottom;
333     margin: 0 0.3em;
336 /** The 1-pixel padding is there to avoid phantom scroll bars on OS X (FF, Safari and Chrome)**/
337 .no-overflow {
338     overflow: auto;
339     padding-bottom: 1px;
341 .pagelayout-report .no-overflow {
342     overflow: visible;
344 .no-overflow > .generaltable {
345     margin-bottom: 0;
347 // Accessibility features
349 // Accessibility: text 'seen' by screen readers but not visual users.
350 .accesshide {
351     position: absolute;
352     left: -10000px;
353     font-weight: normal;
354     font-size: 1em;
356 .dir-rtl .accesshide {
357     top: -30000px;
358     left: auto;
360 span.hide,
361 div.hide {
362     display: none;
364 // Accessibility: Skip block link, for keyboard-only users.
365 a.skip-block,
366 a.skip {
367     position: absolute;
368     top: -1000em;
369     font-size: 0.85em;
370     text-decoration: none;
372 a.skip-block:focus,
373 a.skip-block:active,
374 a.skip:focus,
375 a.skip:active {
376     position: static;
377     display: block;
379 .skip-block-to {
380     display: block;
381     height: 1px;
382     overflow: hidden;
384 // Blogs
385 .addbloglink {
386     text-align: center;
388 .blog_entry .audience {
389     text-align: right;
390     padding-right: 4px;
392 .blog_entry .tags {
393     margin-top: 15px;
395 .blog_entry .tags .action-icon img.smallicon {
396     height: 16px;
397     width: 16px;
399 .blog_entry .content {
400     margin-left: 43px;
402 // Group
403 #page-group-index #groupeditform {
404     text-align: center;
406 #doc-contents h1 {
407     margin: 1em 0 0 0;
409 #doc-contents ul {
410     margin: 0;
411     padding: 0;
412     width: 90%;
414 #doc-contents ul li {
415     list-style-type: none;
417 .groupmanagementtable td {
418     vertical-align: top;
420 .groupmanagementtable #existingcell,
421 .groupmanagementtable #potentialcell {
422     width: 42%;
424 .groupmanagementtable #buttonscell {
425     width: 16%;
427 .groupmanagementtable #buttonscell p.arrow_button input {
428     width: auto;
429     min-width: 80%;
430     margin: 0 auto;
432 .groupmanagementtable #removeselect_wrapper,
433 .groupmanagementtable #addselect_wrapper {
434     width: 100%;
436 .groupmanagementtable #removeselect_wrapper label,
437 .groupmanagementtable #addselect_wrapper label {
438     font-weight: normal;
440 .dir-rtl .groupmanagementtable p {
441     text-align: right;
443 #group-usersummary {
444     width: 14em;
446 .groupselector {
447     margin-top: 3px;
448     margin-bottom: 3px;
449     display: inline-block;
451 .groupselector label {
452     display: inline-block;
454 // Login
455 .loginbox {
456     margin: 15px;
457     overflow: visible;
459 .loginbox.twocolumns {
460     margin: 15px;
462 .loginbox h2,
463 .loginbox .subcontent {
464     margin: 5px;
465     padding: 10px;
466     text-align: center;
468 .loginbox .loginpanel .desc {
469     margin: 0;
470     padding: 0;
471     margin-bottom: 5px;
472     margin-top:15px;
474 .loginbox .signuppanel .subcontent {
475     text-align: left;
477 .dir-rtl .loginbox .signuppanel .subcontent {
478     text-align: right;
480 .loginbox .loginsub {
481     margin-left: 0;
482     margin-right: 0;
484 .loginbox .guestsub,
485 .loginbox .forgotsub,
486 .loginbox .potentialidps {
487     margin: 5px 12%;
489 .loginbox .potentialidps .potentialidplist {
490     margin-left: 40%;
492 .loginbox .potentialidps .potentialidplist div {
493     text-align: left;
495 .loginbox .loginform {
496     margin-top: 1em;
497     text-align: left;
499 .loginbox .loginform .form-label {
500     float: left;
501     text-align: right;
502     width: 44%;
503     direction: rtl;
504     white-space: nowrap;
506 .dir-rtl .loginbox .loginform .form-label {
507     float: left;
508     text-align: right;
509     width: 44%;
510     direction: ltr;
511     white-space: nowrap;
513 .loginbox .loginform .form-input {
514     float: right;
515     width: 55%;
517 .loginbox .loginform .form-input input {
518     width: 6em;
520 .loginbox .signupform {
521     margin-top: 1em;
522     text-align: center;
524 .loginbox.twocolumns .loginpanel,
525 .loginbox.twocolumns .signuppanel {
526     width: 48%;
527     border: 0;
528     margin: 0;
529     padding: 0;
530     .box-sizing(border-box);
531     display: block;
532     float: left;
533     margin-left: 2.76243%;
534     min-height: 30px;
535     margin-bottom: -2000px;
536     padding-bottom: 2000px;
538 .dir-rtl {
539     .loginbox.twocolumns .loginpanel,
540     .loginbox.twocolumns .signuppanel {
541         float:right;
542     }
545 .loginbox .potentialidp .smallicon {
546     vertical-align: text-bottom;
547     margin: 0 .3em;
550 // Notes
551 .notepost {
552     margin-bottom: 1em;
554 .notepost .userpicture {
555     float: left;
556     margin-right: 5px;
558 .notepost .content,
559 .notepost .footer {
560     clear: both;
562 .notesgroup {
563     margin-left: 20px;
566 // My Moodle
567 .path-my .coursebox .overview {
568     margin: 15px 30px 10px 30px;
570 .path-my .coursebox .info {
571     float: none;
572     margin: 0;
575 // Modules
576 .mod_introbox {
577     padding: 10px;
579 table.mod_index {
580     width: 100%;
583 // Comments
584 .comment-ctrl {
585     font-size: 12px;
586     display: none;
587     margin: 0;
588     padding: 0;
590 .comment-ctrl h5 {
591     margin: 0;
592     padding: 5px;
594 .comment-area {
595     max-width: 400px;
596     padding: 5px;
598 .comment-area textarea {
599     width: 100%;
600     overflow: auto;
602 .comment-area .fd {
603     text-align: right;
605 .comment-meta span {
606     color: gray;
608 .comment-link img {
609     vertical-align: text-bottom;
611 .comment-list {
612     font-size: 11px;
613     overflow: auto;
614     list-style: none;
615     padding: 0;
616     margin: 0;
618 .comment-list li {
619     margin: 2px;
620     list-style: none;
621     margin-bottom: 5px;
622     clear: both;
623     padding: .3em;
624     position: relative;
626 .comment-list li.first {
627     display: none
629 .comment-paging{
630     text-align: center;
632 .comment-paging .pageno{
633     padding: 2px;
635 .comment-paging .curpage{
636     border: 1px solid #CCC;
638 .comment-message .picture {
639     width: 20px;
640     float: left;
642 .dir-rtl .comment-message .picture {
643     float: right;
645 .comment-message .text {
646     margin: 0;
647     padding: 0;
649 .comment-message .text p {
650     padding: 0;
651     margin: 0 18px 0 0;
653 .comment-delete {
654     position: absolute;
655     top: 0;
656     right: 0;
657     margin: .3em;
659 .dir-rtl .comment-delete {
660     position: absolute;
661     left: 0;
662     right: auto;
663     margin: .3em;
665 .comment-report-selectall{
666     display: none
668 .comment-link {
669     display: none
671 .jsenabled .comment-link {
672     display: block
674 .jsenabled .showcommentsnonjs{
675     display: none
677 .jsenabled .comment-report-selectall{
678     display: inline
680 /**
681 * Completion progress report
682 */
683 .completion-expired {
684     background: @errorBackground;
686 .completion-expected {
687     font-size: @fontSizeMini;
689 .completion-sortchoice,
690 .completion-identifyfield {
691     font-size: @fontSizeMini;
692     vertical-align: bottom;
694 .completion-progresscell {
695     text-align: right;
697 .completion-expired .completion-expected {
698     font-weight: bold;
700 /**
701 * Tags
702 */
703 #page-tag-coursetags_edit .coursetag_edit_centered {
704     position: relative;
705     width: 600px;
706     margin: 20px auto;
708 #page-tag-coursetags_edit .coursetag_edit_row {
709     clear: both;
711 #page-tag-coursetags_edit .coursetag_edit_row .coursetag_edit_left {
712     float: left;
713     width: 50%;
714     text-align: right;
716 #page-tag-coursetags_edit .coursetag_edit_row .coursetag_edit_right {
717     margin-left: 50%;
719 #page-tag-coursetags_edit .coursetag_edit_input3 {
720     display: none;
722 #page-tag-coursetags_more .coursetag_more_large {
723     font-size: 120%;
725 #page-tag-coursetags_more .coursetag_more_small {
726     font-size: 80%;
728 #page-tag-coursetags_more .coursetag_more_link {
729     font-size: 80%;
731 #tag-description,
732 #tag-blogs {
733     width: 100%;
735 #tag-management-box {
736     margin-bottom: 10px;
737     line-height: 20px;
739 #tag-user-table {
740     padding: 3px;
741     clear: both;
742     width: 100%;
744 #tag-user-table {
745     .clearfix
747 img.user-image {
748     height: 100px;
749     width: 100px;
751 #small-tag-cloud-box {
752     width: 300px;
753     margin: 0 auto;
755 #big-tag-cloud-box {
756     width: 600px;
757     margin: 0 auto;
758     float: none;
760 ul#tag-cloud-list {
761     list-style: none;
762     padding: 5px;
763     margin: 0;
765 ul#tag-cloud-list li {
766     margin: 0;
767     display: inline;
768     list-style-type: none;
770 #tag-search-box {
771     text-align: center;
772     margin: 10px auto;
774 #tag-search-results-container {
775     padding: 0;
776     width: 100%;
778 #tag-search-results {
779     padding: 0;
780     margin: 15px 20% 0 20%;
781     float: left;
782     width: 60%;
783     display: block;
785 #tag-search-results li {
786     width: 30%;
787     float: left;
788     padding-left: 1%;
789     text-align: left;
790     line-height: 20px;
791     padding-right: 1%;
792     list-style: none;
794 span.flagged-tag,
795 span.flagged-tag a {
796     color: @errorText;
798 table#tag-management-list {
799     text-align: left;
800     width: 100%;
802 table#tag-management-list td,
803 table#tag-management-list th {
804     vertical-align: middle;
805     text-align: left;
806     padding: 4px;
808 .tag-management-form {
809     text-align: center;
811 #relatedtags-autocomplete-container {
812     margin-left: auto;
813     margin-right: auto;
814     min-height: 4.6em;
815     width: 100%;
817 #relatedtags-autocomplete {
818     position: relative;
819     display: block;
820     width: 60%;
821     margin-left: auto;
822     margin-right: auto;
824 #relatedtags-autocomplete .yui-ac-content {
825     position: absolute;
826     width: 420px;
827     left: 20%;
828     border: 1px solid @dropdownBorder;
829     background: @dropdownBackground;
830     overflow: hidden;
831     z-index: 9050;
833 #relatedtags-autocomplete .ysearchquery {
834     position: absolute;
835     right: 10px;
836     color: #808080;
837     z-index: 10;
839 #relatedtags-autocomplete .yui-ac-shadow {
840     position: absolute;
841     margin: .3em;
842     width: 100%;
843     background: #a0a0a0;
844     z-index: 9049;
846 #relatedtags-autocomplete ul {
847     padding: 0;
848     width: 100%;
849     margin: 0;
850     list-style-type: none;
852 #relatedtags-autocomplete li {
853     padding: 0 5px;
854     cursor: default;
855     white-space: nowrap;
857 #relatedtags-autocomplete li.yui-ac-highlight{
858     background: @dropdownLinkBackgroundHover;
859     color: @dropdownLinkColorHover;
861 h2.tag-heading,
862 div#tag-description,
863 div#tag-blogs,
864 body.tag .managelink {
865     padding: 5px;
867 .tag_cloud .s20 {
868     font-size: 1.5em;
869     font-weight: bold;
871 .tag_cloud .s19 {
872     font-size: 1.5em;
874 .tag_cloud .s18 {
875     font-size: 1.4em;
876     font-weight: bold;
878 .tag_cloud .s17 {
879     font-size: 1.4em;
881 .tag_cloud .s16 {
882     font-size: 1.3em;
883     font-weight: bold;
885 .tag_cloud .s15 {
886     font-size: 1.3em;
888 .tag_cloud .s14 {
889     font-size: 1.2em;
890     font-weight: bold;
892 .tag_cloud .s13 {
893     font-size: 1.2em;
895 .tag_cloud .s12,
896 .tag_cloud .s11 {
897     font-size: 1.1em;
898     font-weight: bold;
900 .tag_cloud .s10,
901 .tag_cloud .s9 {
902     font-size: 1.1em;
904 .tag_cloud .s8,
905 .tag_cloud .s7 {
906     font-size: 1em;
907     font-weight: bold;
909 .tag_cloud .s6,
910 .tag_cloud .s5 {
911     font-size: 1em;
913 .tag_cloud .s4,
914 .tag_cloud .s3 {
915     font-size: 0.9em;
916     font-weight: bold;
918 .tag_cloud .s2,
919 .tag_cloud .s1 {
920     font-size: 0.9em;
922 .tag_cloud .s0 {
923     font-size: 0.8em;
925 /**
926 * Web Service
927 */
928 #webservice-doc-generator td {
929     text-align: left;
930     border: 0 solid black;
932 /**
933 * Smart Select Element
934 */
935 .smartselect {
936     position: absolute;
938 .smartselect .smartselect_mask {
939     background-color: #fff;
941 .smartselect ul  {
942     padding: 0;
943     margin: 0;
945 .smartselect ul li {
946     list-style: none;
948 .smartselect .smartselect_menu {
949     margin-right: 5px;
951 .safari .smartselect .smartselect_menu {
952     margin-left: 2px;
954 .smartselect .smartselect_menu,
955 .smartselect .smartselect_submenu {
956     border: 1px solid #000;
957     background-color: #FFF;
958     display: none;
960 .smartselect .smartselect_menu.visible,
961 .smartselect .smartselect_submenu.visible {
962     display: block;
964 .smartselect .smartselect_menu_content ul li {
965     position: relative;
966     padding: 2px 5px;
968 .smartselect .smartselect_menu_content ul li a {
969     color: #333;
970     text-decoration: none;
972 .smartselect .smartselect_menu_content ul li a.selectable {
973     color: inherit;
975 .smartselect .smartselect_submenuitem {
976     background-image: url([[pix:moodle|t/collapsed]]);
977     background-repeat: no-repeat;
978     background-position: 100%;
980 /** Spanning mode */
981 .smartselect.spanningmenu .smartselect_submenu {
982     position: absolute;
983     top: -1px;
984     left: 100%;
986 .smartselect.spanningmenu .smartselect_submenu a {
987     white-space: nowrap;
988     padding-right: 16px;
990 .smartselect.spanningmenu .smartselect_menu_content ul li a.selectable:hover {
991     text-decoration: underline;
993 /** Compact mode */
994 .smartselect.compactmenu .smartselect_submenu {
995     position: relative;
996     margin: 2px -3px;
997     margin-left: 10px;
998     display: none;
999     border-width: 0;
1000     z-index: 1010;
1002 .smartselect.compactmenu .smartselect_submenu.visible {
1003     display: block;
1005 .smartselect.compactmenu .smartselect_menu {
1006     z-index: 1000;
1007     overflow: hidden;
1009 .smartselect.compactmenu .smartselect_submenu .smartselect_submenu {
1010     z-index: 1020;
1012 .smartselect.compactmenu .smartselect_submenuitem:hover > .smartselect_menuitem_label {
1013     font-weight: bold;
1015 /**
1016 * Registration
1017 */
1018 #page-admin-registration-register .registration_textfield {
1019     width: 300px;
1021 /**
1022 * Enrol
1023 */
1024 .userenrolment {
1025     width: 100%;
1026     border-collapse: collapse;
1028 .userenrolment tr {
1029     vertical-align:top;
1031 .userenrolment td {
1032     padding: 0;
1033     height: 41px;
1035 .userenrolment .subfield {
1036     margin-right: 5px;
1038 .userenrolment .col_userdetails .subfield_picture {
1039     float: left;
1041 .userenrolment .col_lastseen {
1042     width: 150px;
1044 .userenrolment .col_role {
1045     width: 262px;
1047 .userenrolment .col_role .roles,
1048 .userenrolment .col_group .groups {
1049     margin-right: 30px;
1051 .userenrolment .col_role .role,
1052 .userenrolment .col_group .group {
1053     float: left;
1054     padding: 3px;
1055     margin: 3px;
1056     white-space: nowrap;
1058 .userenrolment .col_role .role a,
1059 .userenrolment .col_group .group a {
1060     margin-left: 3px;
1061     cursor: pointer;
1063 .userenrolment .col_role .addrole,
1064 .userenrolment .col_group .addgroup {
1065     float: right;
1066     padding: 3px;
1067     margin: 3px;
1068     > *:hover {
1069         border-bottom:1px solid #666;
1070     }
1072 .userenrolment .col_role .addrole img,
1073 .userenrolment .col_group .addgroup img {
1074     vertical-align: baseline;
1077 .dir-rtl .userenrolment .col_role .role {
1078     float: right;
1081 .userenrolment .hasAllRoles .col_role .addrole {
1082     display: none;
1085 .userenrolment .col_enrol .enrolment {
1086     float: left;
1087     padding: 3px;
1088     margin: 3px;
1090 .userenrolment .col_enrol .enrolment a {
1091     float: right;
1092     margin-left: 3px;
1094 #page-enrol-users {
1095     .enrol_user_buttons {
1096         float: right;
1097         .enrolusersbutton {
1098             display: inline;
1099             div,
1100             form {
1101                 display: inline;
1102                 margin-right: 0;
1103             }
1104         }
1105     }
1106     #filterform {
1107         .well;
1108         .well-small;
1109         display: inline-block;
1110         .fitem {
1111             display: inline-block;
1112             line-height: @baseLineHeight * 2;
1113             margin-right: .3em;
1114             white-space: nowrap;
1115             label {
1116                 display: inline;
1117                 line-height: @baseLineHeight;
1118                 padding-right: .3em;
1119             }
1120             :before,
1121             :after {
1122                 display: inline;
1123             }
1124         }
1125         div,
1126         fieldset {
1127             display: inline;
1128             float: none;
1129             clear: none;
1130             width: auto;
1131             margin: 0;
1132         }
1133         select,
1134         .ftext input {
1135             width: 7em;
1136         }
1137         input,
1138         select {
1139             margin-bottom: 0;
1140         }
1141     }
1142     .user-enroller-panel .uep-search-results .user .details {
1143        width: 237px;
1144     }
1146 .dir-rtl {
1147     &#page-enrol-users {
1148         .col_userdetails {
1149             .subfield_picture {
1150                 float: right;
1151             }
1152         }
1153         .enrol_user_buttons {
1154             float: left;
1155             .enrolusersbutton {
1156                 margin-left: 0;
1157                 margin-right: 1em;
1158                 div {
1159                     margin-left: 0;
1160                 }
1161             }
1162         }
1163         #filterform {
1164             .fitem {
1165                 margin-right: 0;
1166                 margin-left: .3em;
1167                 label {
1168                     padding-right: 0;
1169                     padding-left: .3em;
1170                 }
1171             }
1172         }
1173     }
1176 /**
1177 * Overide for RTL layout
1178 **/
1179 .dir-rtl .headermain {
1180     float: right;
1182 .dir-rtl .headermenu {
1183     float: left;
1185 .dir-rtl .loginbox .loginform .form-label {
1186     float: right;
1187     text-align: left;
1189 .dir-rtl .loginbox .loginform .form-input {
1190     text-align: right;
1192 .dir-rtl .yui3-menu-hidden {
1193     left: 0;
1195 #page-admin-roles-define.dir-rtl #rolesform .felement {
1196     margin-right: 180px;
1198 #page-message-edit.dir-rtl table.generaltable th.c0 {
1199     text-align: right;
1201 .corelightbox {
1202     background-color: #CCC;
1203     position: absolute;
1204     top: 0;
1205     left: 0;
1206     width: 100%;
1207     height: 100%;
1208     text-align: center;
1210 .corelightbox img {
1211     position: fixed;
1212     top: 50%;
1213     left: 50%;
1216 .mod-indent-outer {
1217     display: table;
1219 .mod-indent {
1220     display: table-cell;
1222 .label .mod-indent {
1223   float:left;
1224   padding-top:20px
1226 .mod-indent-1 {
1227     width: 30px;
1229 .mod-indent-2 {
1230     width: 60px;
1232 .mod-indent-3 {
1233     width: 90px;
1235 .mod-indent-4 {
1236     width: 120px;
1238 .mod-indent-5 {
1239     width: 150px;
1241 .mod-indent-6 {
1242     width: 180px;
1244 .mod-indent-7 {
1245     width: 210px;
1247 .mod-indent-8 {
1248     width: 240px;
1250 .mod-indent-9 {
1251     width: 270px;
1253 .mod-indent-10 {
1254     width: 300px;
1256 .mod-indent-11 {
1257     width: 330px;
1259 .mod-indent-12 {
1260     width: 360px;
1262 .mod-indent-13 {
1263     width: 390px;
1265 .mod-indent-14 {
1266     width: 420px;
1268 .mod-indent-15,
1269 .mod-indent-huge {
1270     width: 420px;
1273 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1274 .resourcecontent .mediaplugin_mp3 object {
1275     height: 25px;
1276     width: 600px
1278 .resourcecontent audio.mediaplugin_html5audio {
1279     width: 600px
1281 /** Large resource images should avoid hidden overflow **/
1282 .resourceimage {
1283     max-width: 100%;
1285 /* Audio player size in 'inline' mode (can only change width, as above) */
1286 .mediaplugin_mp3 object {
1287     height: 15px;
1288     width: 300px
1290 audio.mediaplugin_html5audio {
1291     width: 300px
1293 /* TinyMCE moodle media preview frame should not have padding */
1294 .core_media_preview.pagelayout-embedded #content {
1295     padding: 0;
1297 .core_media_preview.pagelayout-embedded #maincontent {
1298     height: 0;
1300 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1301     padding: 0;
1302     margin: 0;
1303     min-width: 0;
1304     background: none;
1306 /** Fix YUI 2 Treeview for Right to left languages **/
1307 .dir-rtl .ygtvtn,
1308 .dir-rtl .ygtvtm,
1309 .dir-rtl .ygtvtmh,
1310 .dir-rtl .ygtvtmhh,
1311 .dir-rtl .ygtvtp,
1312 .dir-rtl .ygtvtph,
1313 .dir-rtl .ygtvtphh,
1314 .dir-rtl .ygtvln,
1315 .dir-rtl .ygtvlm,
1316 .dir-rtl .ygtvlmh,
1317 .dir-rtl .ygtvlmhh,
1318 .dir-rtl .ygtvlp,
1319 .dir-rtl .ygtvlph,
1320 .dir-rtl .ygtvlphh,
1321 .dir-rtl .ygtvdepthcell,
1322 .dir-rtl .ygtvok,
1323 .dir-rtl .ygtvok:hover,
1324 .dir-rtl .ygtvcancel,
1325 .dir-rtl .ygtvcancel:hover {
1326     width: 18px;
1327     height: 22px;
1328     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1329     background-repeat: no-repeat;
1330     cursor: pointer;
1332 .dir-rtl .ygtvtn {
1333     background-position: 0 -5600px;
1335 .dir-rtl .ygtvtm {
1336     background-position: 0 -4000px;
1338 .dir-rtl .ygtvtmh,
1339 .dir-rtl .ygtvtmhh {
1340     background-position: 0 -4800px;
1342 .dir-rtl .ygtvtp {
1343     background-position: 0 -6400px;
1345 .dir-rtl .ygtvtph,
1346 .dir-rtl .ygtvtphh {
1347     background-position: 0 -7200px;
1349 .dir-rtl .ygtvln {
1350     background-position: 0 -1600px;
1352 .dir-rtl .ygtvlm {
1353     background-position: 0 0;
1355 .dir-rtl .ygtvlmh,
1356 .dir-rtl .ygtvlmhh {
1357     background-position: 0 -800px;
1359 .dir-rtl .ygtvlp {
1360     background-position: 0 -2400px;
1362 .dir-rtl .ygtvlph,
1363 .dir-rtl .ygtvlphh {
1364     background-position: 0 -3200px
1366 .dir-rtl .ygtvdepthcell {
1367     background-position: 0 -8000px;
1369 .dir-rtl .ygtvok {
1370     background-position: 0 -8800px;
1372 .dir-rtl .ygtvok:hover {
1373     background-position: 0 -8844px;
1375 .dir-rtl .ygtvcancel {
1376     background-position: 0 -8822px;
1378 .dir-rtl .ygtvcancel:hover {
1379     background-position: 0 -8866px;
1381 .dir-rtl.yui-skin-sam .yui-panel .hd {
1382     text-align: right;
1384 .dir-rtl .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
1385     text-align: right;
1387 /** Fix TinyMCE editor right to left **/
1388 .dir-rtl .clearlooks2.ie9 .mceAlert .mceMiddle span,.dir-rtl .clearlooks2 .mceConfirm .mceMiddle span {
1389     top: 44px;
1391 .dir-rtl .o2k7Skin table,
1392 .dir-rtl .o2k7Skin tbody,
1393 .dir-rtl .o2k7Skin a,
1394 .dir-rtl .o2k7Skin img,
1395 .dir-rtl .o2k7Skin tr,
1396 .dir-rtl .o2k7Skin div,
1397 .dir-rtl .o2k7Skin td,
1398 .dir-rtl .o2k7Skin iframe,
1399 .dir-rtl .o2k7Skin span,
1400 .dir-rtl .o2k7Skin *,
1401 .dir-rtl .o2k7Skin .mceText,
1402 .dir-rtl .o2k7Skin .mceListBox .mceText {
1403     text-align: right;
1405 .path-rating .ratingtable {
1406     width: 100%;
1407     margin-bottom: 1em;
1409 .path-rating .ratingtable th.rating {
1410     width: 100%;
1412 .path-rating .ratingtable td.rating,
1413 .path-rating .ratingtable td.time {
1414     white-space: nowrap;
1415     text-align: center;
1417 .initialbar {
1418     a, strong {
1419         padding-left: 3px;
1420         padding-right: 3px;
1421     }
1423 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1424 .moodle-dialogue-base .moodle-dialogue-lightbox {
1425     background-color: #AAA;
1427 .moodle-dialogue-base .hidden,
1428 .moodle-dialogue-base .moodle-dialogue-hidden {
1429     display: none;
1431 .no-scrolling {
1432     overflow: hidden;
1434 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1435     left: 0px;
1436     top: 0px;
1437     right: 0px;
1438     bottom: -50px;
1439     position: fixed;
1441 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1442     overflow: auto;
1444 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1445     width: 28px;
1446     height: 16px;
1447     background-size: 100%;
1449 .moodle-dialogue-base .moodle-dialogue {
1450     padding: 0;
1451     margin: 0;
1452     background: none;
1453     border: none;
1454     z-index: 600;
1455     outline: #000 dotted 0;
1457 .moodle-dialogue-base .moodle-dialogue-wrap {
1458     margin-top: -3px;
1459     margin-left: -3px;
1460     background-color: #fff;
1461     border: 1px solid #ccc;
1462     .border-radius(10px);
1463     .box-shadow(5px 5px 20px 0 #666);
1465 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd,
1466 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1467     margin: 0;
1468     padding: 5px;
1469     font-size: 12px;
1470     font-weight: normal;
1471     letter-spacing: 1px;
1472     color: #333;
1473     text-align: center;
1474     text-shadow: 1px 1px 1px #fff;
1475     .border-radius(10px 10px 0 0);
1476     border-bottom: 1px solid #bbb;
1477     background: #ccc;
1478     #gradient > .vertical(#fff, #ccc);
1479     filter: 0;
1481 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1482     margin: 0;
1483     padding: 0;
1484     display: inline;
1485     font-size: 100%;
1486     font-weight: bold;
1488 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1489     padding: 5px;
1491 .moodle-dialogue-base .closebutton {
1492     width: 25px;
1493     height: 15px;
1494     float: right;
1495     vertical-align: middle;
1496     display: inline-block;
1497     cursor: pointer;
1498     padding: 0;
1499     background-image: url([[pix:theme|sprite]]);
1500     background-repeat: no-repeat;
1501     border-style: none;
1503 .dir-rtl .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1504     left: 0;
1505     right: auto;
1507 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1508     padding: 1em;
1509     line-height: 2em;
1510     color: #555;
1511     font-size: 12px;
1513 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-content {
1514     padding: 0;
1515     background: #FFF;
1518 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd {
1519     padding: 10px;
1520     font-size: 16px;
1523 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1524     overflow: auto;
1525     position: absolute;
1526     top: 0px;
1527     bottom: 50px;
1528     left: 0px;
1529     right: 0px;
1530     margin: 0px;
1531     border: 0px;
1533 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd,
1534 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-wrap {
1535     border-radius: 0px;
1537 .moodle-dialogue-confirm .confirmation-dialogue {
1538     text-align: center;
1540 .moodle-dialogue-confirm .confirmation-dialogue input {
1541     text-align: center;
1543 .moodle-dialogue-exception .moodle-exception-message {
1544     text-align: center
1546 .moodle-dialogue-exception .moodle-exception-param label {
1547     font-weight: bold;
1549 .moodle-dialogue-exception .param-stacktrace label {
1550     background-color: #EEE;
1551     border: 1px solid #ccc;
1552     border-bottom-width: 0;
1554 .moodle-dialogue-exception .param-stacktrace pre {
1555     border: 1px solid #ccc;
1556     background-color: #fff;
1558 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1559     color: navy;
1560     font-size: @fontSizeSmall;
1562 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1563     color: @errorText;
1564     font-size: @fontSizeSmall;
1566 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1567     color: #333;
1568     font-size: 90%;
1569     border-bottom: 1px solid #eee;
1571 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1572     padding: 0;
1573     margin: 0.7em 1em;
1574     text-align: right;
1575     background-color: #FFF;
1576     font-size: 12px;
1578 .moodle-dialogue-confirm .confirmation-message {
1579     margin: 0.5em 1em;
1581 .moodle-dialogue-confirm .confirmation-dialogue input {
1582     min-width: 80px
1584 .moodle-dialogue-exception .moodle-exception-message {
1585     margin: 1em;
1587 .moodle-dialogue-exception .moodle-exception-param {
1588     margin-bottom: 0.5em;
1590 .moodle-dialogue-exception .moodle-exception-param label {
1591     width: 150px;
1593 .moodle-dialogue-exception .param-stacktrace label {
1594     display: block;
1595     margin: 0;
1596     padding: 4px 1em;
1598 .moodle-dialogue-exception .param-stacktrace pre {
1599     display: block;
1600     height: 200px;
1601     overflow: auto;
1603 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1604     display: inline-block;
1605     margin: 4px 0;
1607 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1608     display: inline-block;
1609     width: 50px;
1610     margin: 4px 1em;
1612 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1613     padding-left: 25px;
1614     margin-bottom: 4px;
1615     padding-bottom: 4px;
1617 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1618     .opacity(75);
1619     width: 100%;
1620     height: 100%;
1621     top: 0;
1622     left: 0;
1623     background-color: white;
1624     text-align: center;
1625     padding: 10% 0;
1627 /* Apply a default max-height on tooltip text */
1628 .moodle-dialogue .tooltiptext {
1629     max-height: 300px;
1632 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1633     z-index: 3001;
1635     .moodle-dialogue-bd {
1636         overflow: auto;
1637     }
1640 /* Question Bank - Question Chooser "Close" button */
1641 #page-question-edit.dir-rtl a.container-close {
1642     right: auto;
1643     left: 6px;
1645 /**
1646 * Chooser Dialogues (moodle-core-chooserdialogue)
1648 * This CSS belong to the chooser dialogue which should work both with, and
1649 * without javascript enabled
1650 */
1651 /* Hide the dialog and it's title */
1652 .chooserdialoguebody,
1653 .choosertitle {
1654     display: none;
1656 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1657     margin: 0;
1659 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1660     padding: 0;
1661     background: #F2F2F2;
1662     .border-bottom-radius(10px);
1664 /* Center the submit buttons within the area */
1665 .choosercontainer #chooseform .submitbuttons {
1666     padding: 0.7em 0;
1667     text-align: center;
1669 /* Fixed for safari browser on iPhone4S with ios7.*/
1670 @media (max-height: 639px) {
1671     .ios.safari .choosercontainer #chooseform .submitbuttons {
1672         padding: 45px 0;
1673     }
1675 .choosercontainer #chooseform .submitbuttons input {
1676     min-width: 100px;
1677     margin: 0 0.5em;
1679 /* Various settings for the options area */
1680 .choosercontainer #chooseform .options {
1681     position: relative;
1682     border-bottom: 1px solid #BBBBBB;
1684 /* Only set these options if we're showing the js container */
1685 .jschooser .choosercontainer #chooseform .alloptions {
1686     overflow-x: hidden;
1687     overflow-y: auto;
1688     max-width: 20.3em;
1689     .box-shadow(inset 0 0 30px 0px #ccc);
1691 .dir-rtl.jschooser .choosercontainer #chooseform .alloptions {
1692     max-width: 18.3em;
1694 /* Settings for option rows and option subtypes */
1695 .choosercontainer #chooseform .moduletypetitle,
1696 .choosercontainer #chooseform .option,
1697 .choosercontainer #chooseform .nonoption {
1698     margin-bottom: 0;
1699     padding: 0 1.6em 0 1.6em;
1701 .choosercontainer #chooseform .moduletypetitle {
1702     text-transform: uppercase;
1703     padding-top: 1.2em;
1704     padding-bottom: 0.4em;
1706 .choosercontainer #chooseform .option .typename,
1707 .choosercontainer #chooseform .option span.modicon img.icon,
1708 .choosercontainer #chooseform .nonoption .typename,
1709 .choosercontainer #chooseform .nonoption span.modicon img.icon {
1710     padding: 0 0 0 0.5em;
1712 .dir-rtl .choosercontainer #chooseform .option .typename,
1713 .dir-rtl .choosercontainer #chooseform .option span.modicon img.icon,
1714 .dir-rtl .choosercontainer #chooseform .nonoption .typename,
1715 .dir-rtl .choosercontainer #chooseform .nonoption span.modicon img.icon {
1716     padding: 0 0.5em 0 0;
1718 .choosercontainer #chooseform .option span.modicon img.icon,
1719 .choosercontainer #chooseform .nonoption span.modicon img.icon {
1720     height: 24px;
1721     width: 24px;
1723 .choosercontainer #chooseform .option input[type=radio],
1724 .choosercontainer #chooseform .option span.typename,
1725 .choosercontainer #chooseform .option span.modicon {
1726     vertical-align: middle;
1728 .choosercontainer #chooseform .option label {
1729     display: block;
1730     padding: 0.3em 0 0.1em 0;
1731     border-bottom: 1px solid #FFFFFF;
1733 .choosercontainer #chooseform .nonoption {
1734     padding-left: 2.7em;
1735     padding-top: 0.3em;
1736     padding-bottom: 0.1em;
1738 .dir-rtl .choosercontainer #chooseform .nonoption {
1739     padding-right: 2.7em;
1740     padding-left: 0;
1742 .choosercontainer #chooseform .subtype {
1743     margin-bottom: 0;
1744     padding: 0 1.6em 0 3.2em;
1746 .dir-rtl .choosercontainer #chooseform .subtype {
1747     padding: 0 3.2em 0 1.6em;
1749 .choosercontainer #chooseform .subtype .typename {
1750     margin: 0 0 0 0.2em;
1752 .dir-rtl .choosercontainer #chooseform .subtype .typename {
1753     margin: 0 0.2em 0 0;
1755 /* The instruction/help area */
1756 .jschooser .choosercontainer #chooseform .instruction,
1757 .jschooser .choosercontainer #chooseform .typesummary {
1758    display: none;
1759     position: absolute;
1760     top: 0;
1761     right: 0;
1762     bottom: 0;
1763     left: 20.3em;
1764     margin: 0;
1765     padding: 1.6em;
1766     background-color: @bodyBackground;
1767     overflow-x: hidden;
1768     overflow-y: auto;
1769     line-height: 2em;
1771 .dir-rtl.jschooser .choosercontainer #chooseform .instruction,
1772 .dir-rtl.jschooser .choosercontainer #chooseform .typesummary {
1773     left: 0;
1774     right: 18.5em;
1775     border-right: 1px solid grey;
1777 /* Selected option settings */
1778 .jschooser .choosercontainer #chooseform .instruction,
1779 .choosercontainer #chooseform .selected .typesummary {
1780     display: block;
1782 .choosercontainer #chooseform .selected {
1783     background-color: @bodyBackground;
1784     .box-shadow(0px 0 10px 0 #ccc);
1786 .section-modchooser-link img.smallicon {
1787     padding: 3px;
1789 /* Form element: listing */
1790 .formlistingradio {
1791     padding-bottom: 25px;
1792     padding-right: 10px;
1794 .formlistinginputradio {
1795     float: left;
1797 .formlistingmain {
1798     min-height: 225px;
1800 .formlisting {
1801     position: relative;
1802     margin: 15px 0;
1803     padding: 1px 19px 14px;
1804     background-color: white;
1805     border: 1px solid #DDD;
1806     .border-radius(4px);
1808 .formlistingmore {
1809     position: absolute;
1810     cursor: pointer;
1811     bottom: -1px;
1812     right: -1px;
1813     padding: 3px 7px;
1814     font-size: 12px;
1815     font-weight: bold;
1816     background-color: whiteSmoke;
1817     border: 1px solid #ddd;
1818     color: #9DA0A4;
1819     .border-radius(4px 0 4px 0);
1821 .formlistingall {
1822     margin: 15px 0;
1823     padding: 0;
1824     .border-radius(4px);
1826 .formlistingrow {
1827     cursor: pointer;
1828     border-bottom: 1px solid;
1829     border-color: #E1E1E8;
1830     border-left: 1px solid #E1E1E8;
1831     border-right: 1px solid #E1E1E8;
1832     background-color: #F7F7F9;
1833     .border-radius(0 0 4px 4px);
1834     padding: 6px;
1835     top: 50%;
1836     left: 50%;
1837     min-height: 34px;
1838     float: left;
1839     width: 150px;
1841 body.jsenabled .formlistingradio {
1842     display: none;
1844 body.jsenabled .formlisting {
1845     display: block;
1848 /* Badges styles */
1849 table.collection {
1850     .table;
1851     .table-bordered;
1852     .table-striped;
1854 table.collection .name {
1855     text-align: left;
1856     vertical-align: middle;
1858 table.collection .awards {
1859     width: 10%;
1860     text-align: center;
1861     vertical-align: middle;
1863 table.collection .criteria {
1864     width: 40%;
1865     text-align: left;
1866     vertical-align: top;
1868 table.collection .badgeimage,
1869 table.collection .status {
1870     width: 15%;
1871     text-align: center;
1872     vertical-align: middle;
1874 table.collection .description {
1875     width: 25%;
1876     text-align: left;
1878 table.collection .actions {
1879     width: 11em;
1880     text-align: center;
1881     vertical-align: middle;
1884 a.criteria-action {
1885     padding: 0px 3px;
1886     float: right;
1888 table.issuedbadgebox {
1889     width: 750px;
1890     background-color: @wellBackground;
1892 table.badgeissuedimage {
1893     width: 150px;
1894     text-align: center;
1896 table.badgeissuedinfo {
1897     width: 600px;
1899 table.badgeissuedinfo .bvalue {
1900     text-align: left;
1901     vertical-align: middle;
1903 table.badgeissuedinfo .bfield {
1904     width: 125px;
1905     text-align: left;
1906     font-style: italic;
1908 .dir-rtl {
1909     table.badgeissuedinfo .bvalue,
1910     table.badgeissuedinfo .bfield {
1911         text-align: right;
1912     }
1914 ul.badges {
1915     margin: 0;
1916     list-style: none;
1918 .badges li {
1919     position: relative;
1920     display: inline-block;
1921     padding-bottom: 2em;
1922     text-align: center;
1923     vertical-align: top;
1924     width: 150px;
1926 .badges li .badge-name {
1927     display: block;
1928     padding: 5px;
1930 .badges li > img {
1931     position: absolute;
1933 .badges li .badge-image {
1934     width: 90px;
1935     height: 90px;
1936     left: 10px;
1937     top: 0px;
1938     z-index: 1;
1940 .badges li .badge-actions {
1941     position: relative;
1943 div.badge {
1944     position: relative;
1945     display: block;
1947 div.badge .expireimage {
1948     width: 100px;
1949     height: 100px;
1950     left: 20px;
1951     top: 0px;
1953 .expireimage {
1954     .opacity(85);
1955     width: 90px; height: 90px;
1956     left: 30px;
1957     top: 0px;
1958     position: absolute;
1959     z-index:10;
1961 .badge-profile {
1962     vertical-align: top;
1964 .connected {
1965     color: @successText;
1967 .notconnected {
1968     color: @errorText;
1970 .connecting {
1971     color: @warningText;
1973 #page-badges-award .recipienttable tr td {
1974     vertical-align: top;
1976 #page-badges-award .recipienttable tr td.actions .actionbutton {
1977     margin: 0.3em 0;
1978     padding: 0.5em 0;
1979     width: 100%;
1981 #page-badges-award .recipienttable tr td.existing,
1982 #page-badges-award .recipienttable tr td.potential {
1983     width: 42%;
1986 .statustable {
1987     margin-bottom: 0px;
1989 .statusbox.active {
1990     background-color: @successBackground;
1992 .statusbox.inactive {
1993     background-color: @warningBackground;
1995 .activatebadge {
1996     margin: 0px;
1997     text-align: left;
1998     vertical-align: middle;
2000 .dir-rtl .activatebadge {
2001     text-align: right;
2003 img#persona_signin {
2004     cursor: pointer;
2006 .addcourse {
2007     float: right;
2009 .invisiblefieldset {
2010     display: inline;
2011     margin: 0;
2012     padding: 0;
2013     border-width: 0;
2015 .breadcrumb-nav {
2016     float: left;
2017     margin-bottom: 10px;
2019 .dir-rtl .breadcrumb-nav {
2020     float: right;
2022 .breadcrumb-button .singlebutton div {
2023     margin-right: 0;
2025 .breadcrumb-nav .breadcrumb {
2026     margin: 0;
2029 /** Action menu component styles **/
2030 .moodle-actionmenu,
2031 .moodle-actionmenu > ul,
2032 .moodle-actionmenu > ul > li {
2033     display: inline-block;
2036 .moodle-actionmenu ul {
2037     padding: 0;
2038     margin: 0;
2039     list-style-type: none;
2042 .moodle-actionmenu .toggle-display,
2043 .moodle-actionmenu .menu-action-text {
2044     display: none; /** Hidden by default, display none so that we don't take up space. **/
2047 .jsenabled {
2048     .moodle-actionmenu[data-enhance] {
2049         display: block;
2050         .menu {
2051             display:none;
2052         }
2053         .toggle-display {
2054             display: inline; /** JS is enabled, we'll be using it so return display to normal **/
2055             .opacity(50);
2056         }
2057         .toggle-display.textmenu {
2058             display: block;
2059             margin-left: 4px;
2060             padding-left: 4px;
2061             padding-right: 4px;
2063             .iconsmall {
2064                 margin: 4px 4px 4px 0px;
2065                 padding: 8px 4px 0px 2px;
2066                 vertical-align: text-bottom;
2067             }
2069             .caret {
2070                 margin-top: 8px;
2071                 margin-left: 2px;
2072                 border-top-color: @navbarLinkColor;
2073                 &:hover,
2074                 &:active {
2075                     border-top-color: @navbarLinkColorActive;
2076                 }
2077             }
2078         }
2079     }
2080     .moodle-actionmenu[data-enhanced] {
2081         .toggle-display {
2082             .opacity(100);
2083         }
2084         .menu-action-text  {
2085             display:inline;
2086         }
2087     }
2089     &.dir-rtl {
2090         .moodle-actionmenu[data-enhance] {
2091             .toggle-display.textmenu {
2092                 margin-left: initial;
2093                 margin-right: 4px;
2095                 .caret {
2096                     margin-left: initial;
2097                     margin-right: 2px;
2098                 }
2099             }
2100         }
2101     }
2104 .moodle-actionmenu[data-enhanced].show  {
2106     position: relative;
2108     .menu {
2110         display:block;
2111         position: absolute;
2112         text-align: left;
2113         background-color: @dropdownBackground;
2114         border: 1px solid @dropdownBorder;
2115         z-index:1000;
2116         .border-radius(5px);
2117         .box-shadow(5px 5px 20px 0 #666);
2119         a {
2120             display: block;
2121             color: @dropdownLinkColor;
2122             padding:2px 1em 2px 28px;
2123             &:hover {
2124                 color: @dropdownLinkColorHover;
2125                 background-color: @dropdownLinkBackgroundHover;
2126             }
2127             &:first-child {
2128                 .border-top-radius(4px);
2129             }
2130             &:last-child {
2131                 .border-bottom-radius(4px);
2132             }
2133         }
2134         a.hidden {
2135             display:none;
2136         }
2137         img {
2138             vertical-align: middle;
2139         }
2140         .iconsmall {
2141             margin: 4px 4px 4px -24px;
2142         }
2143         > li {
2144             display:block;
2145         }
2147         /** bottom left of button **/
2148         &.align-tl-bl {top: 100%;left:0;margin-top: 4px;}
2149         &.align-tr-bl {top: 100%;right: 100%;}
2150         &.align-bl-bl {bottom: 100%;left:0;}
2151         &.align-br-bl {bottom: 100%;right: 100%;}
2152         /** bottom right of button **/
2153         &.align-tl-br {top: 100%;left:100%;}
2154         &.align-tr-br {top: 100%;right: 0;margin-top: 4px;}
2155         &.align-bl-br {bottom: 100%;left:100%;}
2156         &.align-br-br {bottom: 100%;right: 0;}
2157         /** top left of button **/
2158         &.align-tl-tl {top: 0;left:0;}
2159         &.align-tr-tl {top: 0;right: 100%;margin-right: 4px;}
2160         &.align-bl-tl {bottom: 100%;left:0;margin-bottom: 4px;}
2161         &.align-br-tl {bottom: 100%;right: 100%;}
2162         /** top right of button **/
2163         &.align-tl-tr {top: 0;left:100%;margin-left: 4px;}
2164         &.align-tr-tr {top: 0;right: 0;}
2165         &.align-bl-tr {bottom: 100%;left:100%;}
2166         &.align-br-tr {bottom: 100%;right: 0;margin-bottom: 4px;}
2167     }
2170 .block .moodle-actionmenu {
2171     text-align: right;
2174 .dir-rtl {
2175     .moodle-actionmenu[data-enhanced].show  {
2176         .menu {
2177             text-align: right;
2178             left: 0;
2179             right: auto;
2180             .iconsmall {
2181                 margin-right:0;
2182                 margin-left:8px;
2183             }
2185             /** bottom left of button **/
2186             &.align-tl-bl {left: auto; right: 0;}
2187             &.align-tr-bl {right: auto; left: 100%;}
2188             &.align-bl-bl {left: auto; right: 0;}
2189             &.align-br-bl {right: auto; left: 100%;}
2190             /** bottom right of button **/
2191             &.align-tl-br {left: auto; right: 100%;}
2192             &.align-tr-br {right: auto; left: 0;}
2193             &.align-bl-br {left: auto; right: 100%;}
2194             &.align-br-br {right: auto; left: 0;}
2195             /** top left of button **/
2196             &.align-tl-tl {left: auto; right: 0;}
2197             &.align-tr-tl {right: auto; left: 100%;}
2198             &.align-bl-tl {left: auto; right: 0;}
2199             &.align-br-tl {right: auto; left: 100%;}
2200             /** top right of button **/
2201             &.align-tl-tr {left: auto; right: 100%;}
2202             &.align-tr-tr {right: auto; left: 0;}
2203             &.align-bl-tr {left: auto; right: 100%;}
2204             &.align-br-tr {right: auto; left: 0;}
2205         }
2206     }
2207     .block .moodle-actionmenu {
2208         text-align: right;
2209     }
2212 ul.dragdrop-keyboard-drag li {
2213     list-style-type: none;
2216 .block-control-actions .moodle-core-dragdrop-draghandle img {
2217     width: 12px;
2218     height: 12px;
2221 a.disabled:hover,
2222 a.disabled {
2223     text-decoration: none;
2224     cursor: default;
2225     font-style: italic;
2226     color: #808080;
2228 body.lockscroll {
2229   height: 100%;
2230   overflow: hidden;