Merge branch 'MDL-42340-master' of git://github.com/andrewnicols/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;
229 .dir-rtl img.iconhelp, .dir-rtl .helplink img {
230     padding-right: 3px;
231     padding-left: 0;
233 img.iconlarge {
234     height: 24px;
235     width: 24px;
236     vertical-align: middle;
238 img.iconsort {
239     vertical-align: text-bottom;
240     padding-left: .3em;
241     margin-bottom: .15em;
243 .dir-rtl img.iconsort {
244     padding-right: .3em;
245     padding-left: 0;
247 img.icontoggle {
248     height: 17px;
249     vertical-align: middle;
250     width: 50px;
252 img.iconkbhelp {
253     height: 17px;
254     width: 49px;
256 img.icon-pre, .dir-rtl img.icon-post {
257     padding-right: 3px;
258     padding-left: 0;
260 img.icon-post, .dir-rtl img.icon-pre {
261     padding-left: 3px;
262     padding-right: 0;
264 .boxaligncenter {
265     margin-left: auto;
266     margin-right: auto;
268 .boxalignright {
269     margin-left: auto;
270     margin-right: 0;
272 .boxalignleft {
273     margin-left: 0;
274     margin-right: auto;
276 .boxwidthnarrow {
277     width: 30%;
279 .boxwidthnormal {
280     width: 50%;
282 .boxwidthwide {
283     width: 80%;
285 .headermain {
286     font-weight: bold;
288 #maincontent {
289     display: block;
290     height: 1px;
291     overflow: hidden;
293 img.uihint {
294     cursor: help;
296 #addmembersform table {
297     margin-left: auto;
298     margin-right: auto;
300 .flexible th {
301     white-space: nowrap;
303 table.flexible .emptyrow {
304     display: none;
306 img.emoticon {
307     vertical-align: middle;
308     width: 15px;
309     height: 15px;
311 form.popupform,
312 form.popupform div {
313     display: inline;
315 .arrow_button input {
316     overflow: hidden;
318 .action-icon img.smallicon {
319     vertical-align: text-bottom;
320     margin: 0 0.3em;
323 /** The 1-pixel padding is there to avoid phantom scroll bars on OS X (FF, Safari and Chrome)**/
324 .no-overflow {
325     overflow: auto;
326     padding-bottom: 1px;
328 .pagelayout-report .no-overflow {
329     overflow: visible;
331 .no-overflow > .generaltable {
332     margin-bottom: 0;
334 // Accessibility features
336 // Accessibility: text 'seen' by screen readers but not visual users.
337 .accesshide {
338     position: absolute;
339     left: -10000px;
340     font-weight: normal;
341     font-size: 1em;
343 .dir-rtl .accesshide {
344     top: -30000px;
345     left: auto;
347 span.hide,
348 div.hide {
349     display: none;
351 // Accessibility: Skip block link, for keyboard-only users.
352 a.skip-block,
353 a.skip {
354     position: absolute;
355     top: -1000em;
356     font-size: 0.85em;
357     text-decoration: none;
359 a.skip-block:focus,
360 a.skip-block:active,
361 a.skip:focus,
362 a.skip:active {
363     position: static;
364     display: block;
366 .skip-block-to {
367     display: block;
368     height: 1px;
369     overflow: hidden;
371 // Blogs
372 .addbloglink {
373     text-align: center;
375 .blog_entry .audience {
376     text-align: right;
377     padding-right: 4px;
379 .blog_entry .tags {
380     margin-top: 15px;
382 .blog_entry .tags .action-icon img.smallicon {
383     height: 16px;
384     width: 16px;
386 .blog_entry .content {
387     margin-left: 43px;
389 // Group
390 #page-group-index #groupeditform {
391     text-align: center;
393 #doc-contents h1 {
394     margin: 1em 0 0 0;
396 #doc-contents ul {
397     margin: 0;
398     padding: 0;
399     width: 90%;
401 #doc-contents ul li {
402     list-style-type: none;
404 .groupmanagementtable td {
405     vertical-align: top;
407 .groupmanagementtable #existingcell,
408 .groupmanagementtable #potentialcell {
409     width: 42%;
411 .groupmanagementtable #buttonscell {
412     width: 16%;
414 .groupmanagementtable #buttonscell p.arrow_button input {
415     width: auto;
416     min-width: 80%;
417     margin: 0 auto;
419 .groupmanagementtable #removeselect_wrapper,
420 .groupmanagementtable #addselect_wrapper {
421     width: 100%;
423 .groupmanagementtable #removeselect_wrapper label,
424 .groupmanagementtable #addselect_wrapper label {
425     font-weight: normal;
427 .dir-rtl .groupmanagementtable p {
428     text-align: right;
430 #group-usersummary {
431     width: 14em;
433 .groupselector {
434     margin-top: 3px;
435     margin-bottom: 3px;
438 // Login
439 .loginbox {
440     margin: 15px;
441     overflow: visible;
443 .loginbox.twocolumns {
444     margin: 15px;
446 .loginbox h2,
447 .loginbox .subcontent {
448     margin: 5px;
449     padding: 10px;
450     text-align: center;
452 .loginbox .loginpanel .desc {
453     margin: 0;
454     padding: 0;
455     margin-bottom: 5px;
456     margin-top:15px;
458 .loginbox .signuppanel .subcontent {
459     text-align: left;
461 .dir-rtl .loginbox .signuppanel .subcontent {
462     text-align: right;
464 .loginbox .loginsub {
465     margin-left: 0;
466     margin-right: 0;
468 .loginbox .guestsub,
469 .loginbox .forgotsub,
470 .loginbox .potentialidps {
471     margin: 5px 12%;
473 .loginbox .potentialidps .potentialidplist {
474     margin-left: 40%;
476 .loginbox .potentialidps .potentialidplist div {
477     text-align: left;
479 .loginbox .loginform {
480     margin-top: 1em;
481     text-align: left;
483 .loginbox .loginform .form-label {
484     float: left;
485     text-align: right;
486     width: 44%;
487     direction: rtl;
488     white-space: nowrap;
490 .dir-rtl .loginbox .loginform .form-label {
491     float: left;
492     text-align: right;
493     width: 44%;
494     direction: ltr;
495     white-space: nowrap;
497 .loginbox .loginform .form-input {
498     float: right;
499     width: 55%;
501 .loginbox .loginform .form-input input {
502     width: 6em;
504 .loginbox .signupform {
505     margin-top: 1em;
506     text-align: center;
508 .loginbox.twocolumns .loginpanel,
509 .loginbox.twocolumns .signuppanel {
510     width: 48%;
511     border: 0;
512     margin: 0;
513     padding: 0;
514     .box-sizing(border-box);
515     display: block;
516     float: left;
517     margin-left: 2.76243%;
518     min-height: 30px;
519     margin-bottom: -2000px;
520     padding-bottom: 2000px;
522 .loginbox .potentialidp .smallicon {
523     vertical-align: text-bottom;
524     margin: 0 .3em;
527 // Notes
528 .notepost {
529     margin-bottom: 1em;
531 .notepost .userpicture {
532     float: left;
533     margin-right: 5px;
535 .notepost .content,
536 .notepost .footer {
537     clear: both;
539 .notesgroup {
540     margin-left: 20px;
543 // My Moodle
544 .path-my .coursebox .overview {
545     margin: 15px 30px 10px 30px;
547 .path-my .coursebox .info {
548     float: none;
549     margin: 0;
552 // Modules
553 .mod_introbox {
554     padding: 10px;
556 table.mod_index {
557     width: 100%;
560 // Comments
561 .comment-ctrl {
562     font-size: 12px;
563     display: none;
564     margin: 0;
565     padding: 0;
567 .comment-ctrl h5 {
568     margin: 0;
569     padding: 5px;
571 .comment-area {
572     max-width: 400px;
573     padding: 5px;
575 .comment-area textarea {
576     width: 100%;
577     overflow: auto;
579 .comment-area .fd {
580     text-align: right;
582 .comment-meta span {
583     color: gray;
585 .comment-link img {
586     vertical-align: text-bottom;
588 .comment-list {
589     font-size: 11px;
590     overflow: auto;
591     list-style: none;
592     padding: 0;
593     margin: 0;
595 .comment-list li {
596     margin: 2px;
597     list-style: none;
598     margin-bottom: 5px;
599     clear: both;
600     padding: .3em;
601     position: relative;
603 .comment-list li.first {
604     display: none
606 .comment-paging{
607     text-align: center;
609 .comment-paging .pageno{
610     padding: 2px;
612 .comment-paging .curpage{
613     border: 1px solid #CCC;
615 .comment-message .picture {
616     width: 20px;
617     float: left;
619 .dir-rtl .comment-message .picture {
620     float: right;
622 .comment-message .text {
623     margin: 0;
624     padding: 0;
626 .comment-message .text p {
627     padding: 0;
628     margin: 0 18px 0 0;
630 .comment-delete {
631     position: absolute;
632     top: 0;
633     right: 0;
634     margin: .3em;
636 .dir-rtl .comment-delete {
637     position: absolute;
638     left: 0;
639     right: auto;
640     margin: .3em;
642 .comment-delete-confirm {
643     background: #eee;
644     padding: 2px;
645     width: 5em;
646     text-align: center;
648 .comment-container {
649     float: left;
650     margin: 4px;
652 .comment-report-selectall{
653     display: none
655 .comment-link {
656     display: none
658 .jsenabled .comment-link {
659     display: block
661 .jsenabled .showcommentsnonjs{
662     display: none
664 .jsenabled .comment-report-selectall{
665     display: inline
667 /**
668 * Completion progress report
669 */
670 .completion-expired {
671     background: @errorBackground;
673 .completion-expected {
674     font-size: @fontSizeMini;
676 .completion-sortchoice,
677 .completion-identifyfield {
678     font-size: @fontSizeMini;
679     vertical-align: bottom;
681 .completion-progresscell {
682     text-align: right;
684 .completion-expired .completion-expected {
685     font-weight: bold;
687 /**
688 * Tags
689 */
690 #page-tag-coursetags_edit .coursetag_edit_centered {
691     position: relative;
692     width: 600px;
693     margin: 20px auto;
695 #page-tag-coursetags_edit .coursetag_edit_row {
696     clear: both;
698 #page-tag-coursetags_edit .coursetag_edit_row .coursetag_edit_left {
699     float: left;
700     width: 50%;
701     text-align: right;
703 #page-tag-coursetags_edit .coursetag_edit_row .coursetag_edit_right {
704     margin-left: 50%;
706 #page-tag-coursetags_edit .coursetag_edit_input3 {
707     display: none;
709 #page-tag-coursetags_more .coursetag_more_large {
710     font-size: 120%;
712 #page-tag-coursetags_more .coursetag_more_small {
713     font-size: 80%;
715 #page-tag-coursetags_more .coursetag_more_link {
716     font-size: 80%;
718 #tag-description,
719 #tag-blogs {
720     width: 100%;
722 #tag-management-box {
723     margin-bottom: 10px;
724     line-height: 20px;
726 #tag-user-table {
727     padding: 3px;
728     clear: both;
729     width: 100%;
731 #tag-user-table {
732     .clearfix
734 img.user-image {
735     height: 100px;
736     width: 100px;
738 #small-tag-cloud-box {
739     width: 300px;
740     margin: 0 auto;
742 #big-tag-cloud-box {
743     width: 600px;
744     margin: 0 auto;
745     float: none;
747 ul#tag-cloud-list {
748     list-style: none;
749     padding: 5px;
750     margin: 0;
752 ul#tag-cloud-list li {
753     margin: 0;
754     display: inline;
755     list-style-type: none;
757 #tag-search-box {
758     text-align: center;
759     margin: 10px auto;
761 #tag-search-results-container {
762     padding: 0;
763     width: 100%;
765 #tag-search-results {
766     padding: 0;
767     margin: 15px 20% 0 20%;
768     float: left;
769     width: 60%;
770     display: block;
772 #tag-search-results li {
773     width: 30%;
774     float: left;
775     padding-left: 1%;
776     text-align: left;
777     line-height: 20px;
778     padding-right: 1%;
779     list-style: none;
781 span.flagged-tag,
782 span.flagged-tag a {
783     color: @errorText;
785 table#tag-management-list {
786     text-align: left;
787     width: 100%;
789 table#tag-management-list td,
790 table#tag-management-list th {
791     vertical-align: middle;
792     text-align: left;
793     padding: 4px;
795 .tag-management-form {
796     text-align: center;
798 #relatedtags-autocomplete-container {
799     margin-left: auto;
800     margin-right: auto;
801     min-height: 4.6em;
802     width: 100%;
804 #relatedtags-autocomplete {
805     position: relative;
806     display: block;
807     width: 60%;
808     margin-left: auto;
809     margin-right: auto;
811 #relatedtags-autocomplete .yui-ac-content {
812     position: absolute;
813     width: 420px;
814     left: 20%;
815     border: 1px solid #404040;
816     background: #fff;
817     overflow: hidden;
818     z-index: 9050;
820 #relatedtags-autocomplete .ysearchquery {
821     position: absolute;
822     right: 10px;
823     color: #808080;
824     z-index: 10;
826 #relatedtags-autocomplete .yui-ac-shadow {
827     position: absolute;
828     margin: .3em;
829     width: 100%;
830     background: #a0a0a0;
831     z-index: 9049;
833 #relatedtags-autocomplete ul {
834     padding: 0;
835     width: 100%;
836     margin: 0;
837     list-style-type: none;
839 #relatedtags-autocomplete li {
840     padding: 0 5px;
841     cursor: default;
842     white-space: nowrap;
844 #relatedtags-autocomplete li.yui-ac-highlight{
845     background: #FFFFCC;
847 h2.tag-heading,
848 div#tag-description,
849 div#tag-blogs,
850 body.tag .managelink {
851     padding: 5px;
853 .tag_cloud .s20 {
854     font-size: 1.5em;
855     font-weight: bold;
857 .tag_cloud .s19 {
858     font-size: 1.5em;
860 .tag_cloud .s18 {
861     font-size: 1.4em;
862     font-weight: bold;
864 .tag_cloud .s17 {
865     font-size: 1.4em;
867 .tag_cloud .s16 {
868     font-size: 1.3em;
869     font-weight: bold;
871 .tag_cloud .s15 {
872     font-size: 1.3em;
874 .tag_cloud .s14 {
875     font-size: 1.2em;
876     font-weight: bold;
878 .tag_cloud .s13 {
879     font-size: 1.2em;
881 .tag_cloud .s12,
882 .tag_cloud .s11 {
883     font-size: 1.1em;
884     font-weight: bold;
886 .tag_cloud .s10,
887 .tag_cloud .s9 {
888     font-size: 1.1em;
890 .tag_cloud .s8,
891 .tag_cloud .s7 {
892     font-size: 1em;
893     font-weight: bold;
895 .tag_cloud .s6,
896 .tag_cloud .s5 {
897     font-size: 1em;
899 .tag_cloud .s4,
900 .tag_cloud .s3 {
901     font-size: 0.9em;
902     font-weight: bold;
904 .tag_cloud .s2,
905 .tag_cloud .s1 {
906     font-size: 0.9em;
908 .tag_cloud .s0 {
909     font-size: 0.8em;
911 /**
912 * Web Service
913 */
914 #webservice-doc-generator td {
915     text-align: left;
916     border: 0 solid black;
918 /**
919 * Smart Select Element
920 */
921 .smartselect {
922     position: absolute;
924 .smartselect .smartselect_mask {
925     background-color: #fff;
927 .smartselect ul  {
928     padding: 0;
929     margin: 0;
931 .smartselect ul li {
932     list-style: none;
934 .smartselect .smartselect_menu {
935     margin-right: 5px;
937 .safari .smartselect .smartselect_menu {
938     margin-left: 2px;
940 .smartselect .smartselect_menu,
941 .smartselect .smartselect_submenu {
942     border: 1px solid #000;
943     background-color: #FFF;
944     display: none;
946 .smartselect .smartselect_menu.visible,
947 .smartselect .smartselect_submenu.visible {
948     display: block;
950 .smartselect .smartselect_menu_content ul li {
951     position: relative;
952     padding: 2px 5px;
954 .smartselect .smartselect_menu_content ul li a {
955     color: #333;
956     text-decoration: none;
958 .smartselect .smartselect_menu_content ul li a.selectable {
959     color: inherit;
961 .smartselect .smartselect_submenuitem {
962     background-image: url([[pix:moodle|t/collapsed]]);
963     background-repeat: no-repeat;
964     background-position: 100%;
966 /** Spanning mode */
967 .smartselect.spanningmenu .smartselect_submenu {
968     position: absolute;
969     top: -1px;
970     left: 100%;
972 .smartselect.spanningmenu .smartselect_submenu a {
973     white-space: nowrap;
974     padding-right: 16px;
976 .smartselect.spanningmenu .smartselect_menu_content ul li a.selectable:hover {
977     text-decoration: underline;
979 /** Compact mode */
980 .smartselect.compactmenu .smartselect_submenu {
981     position: relative;
982     margin: 2px -3px;
983     margin-left: 10px;
984     display: none;
985     border-width: 0;
986     z-index: 1010;
988 .smartselect.compactmenu .smartselect_submenu.visible {
989     display: block;
991 .smartselect.compactmenu .smartselect_menu {
992     z-index: 1000;
993     overflow: hidden;
995 .smartselect.compactmenu .smartselect_submenu .smartselect_submenu {
996     z-index: 1020;
998 .smartselect.compactmenu .smartselect_submenuitem:hover > .smartselect_menuitem_label {
999     font-weight: bold;
1001 /**
1002 * Registration
1003 */
1004 #page-admin-registration-register .registration_textfield {
1005     width: 300px;
1007 /**
1008 * Enrol
1009 */
1010 .userenrolment {
1011     width: 100%;
1012     border-collapse: collapse;
1014 .userenrolment td {
1015     padding: 0;
1016     height: 41px;
1018 .userenrolment .subfield {
1019     margin-right: 5px;
1021 .userenrolment .col_userdetails .subfield_picture {
1022     float: left;
1024 .userenrolment .col_lastseen {
1025     width: 150px;
1027 .userenrolment .col_role {
1028     width: 262px;
1030 .userenrolment .col_role .roles {
1031     margin-right: 30px;
1033 .userenrolment .col_role .role {
1034     float: left;
1035     padding: 3px;
1036     margin: 3px;
1038 .dir-rtl .userenrolment .col_role .role {
1039     float: right;
1041 .userenrolment .col_role .role a {
1042     margin-left: 3px;
1043     cursor: pointer;
1045 .userenrolment .col_role .addrole {
1046     float: right;
1047     width: 18px;
1048     height: 18px;
1049     margin: 3px;
1050     text-align: center;
1051     background-color: @successBackground;
1052     border: 1px solid @successBorder;
1054 .userenrolment .col_role .addrole img {
1055     vertical-align: baseline;
1057 .userenrolment .hasAllRoles .col_role .addrole {
1058     display: none;
1060 .userenrolment .col_group .groups {
1061     margin-right: 30px;
1063 .userenrolment .col_group .group {
1064     float: left;
1065     padding: 3px;
1066     margin: 3px;
1067     white-space: nowrap;
1069 .userenrolment .col_group .group a {
1070     margin-left: 3px;
1071     cursor: pointer;
1073 .userenrolment .col_group .addgroup {
1074     float: right;
1075     width: 18px;
1076     margin: 3px;
1077     height: 18px;
1078     text-align: center;
1080 .userenrolment .col_group .addgroup a img {
1081     vertical-align: bottom;
1083 .userenrolment .col_enrol .enrolment {
1084     float: left;
1085     padding: 3px;
1086     margin: 3px;
1088 .userenrolment .col_enrol .enrolment a {
1089     float: right;
1090     margin-left: 3px;
1092 #page-enrol-users .enrol_user_buttons {
1093     float: right;
1095 #page-enrol-users.dir-rtl .enrol_user_buttons {
1096     float: left;
1098 #page-enrol-users .enrol_user_buttons .enrolusersbutton {
1099     margin-left: 1em;
1100     display: inline;
1102 #page-enrol-users .enrol_user_buttons .enrolusersbutton div,
1103 #page-enrol-users .enrol_user_buttons .enrolusersbutton form {
1104     display: inline;
1106 #page-enrol-users .enrol_user_buttons .enrolusersbutton input {
1107     padding-left: 6px;
1108     padding-right: 6px;
1110 #page-enrol-users.dir-rtl .col_userdetails .subfield_picture {
1111     float: right;
1113 #page-enrol-users .user-enroller-panel .uep-search-results .user .details {
1114     width: 237px;
1116 /**
1117 * Overide for RTL layout
1118 **/
1119 .dir-rtl .headermain {
1120     float: right;
1122 .dir-rtl .headermenu {
1123     float: left;
1125 .dir-rtl .loginbox .loginform .form-label {
1126     float: right;
1127     text-align: left;
1129 .dir-rtl .loginbox .loginform .form-input {
1130     text-align: right;
1132 .dir-rtl .yui3-menu-hidden {
1133     left: 0;
1135 #page-admin-roles-define.dir-rtl #rolesform .felement {
1136     margin-right: 180px;
1138 #page-message-edit.dir-rtl table.generaltable th.c0 {
1139     text-align: right;
1141 .corelightbox {
1142     background-color: #CCC;
1143     position: absolute;
1144     top: 0;
1145     left: 0;
1146     width: 100%;
1147     height: 100%;
1148     text-align: center;
1150 .corelightbox img {
1151     position: fixed;
1152     top: 50%;
1153     left: 50%;
1155 .mod-indent-1 {
1156     margin-left: 30px;
1158 .mod-indent-2 {
1159     margin-left: 60px;
1161 .mod-indent-3 {
1162     margin-left: 90px;
1164 .mod-indent-4 {
1165     margin-left: 120px;
1167 .mod-indent-5 {
1168     margin-left: 150px;
1170 .mod-indent-6 {
1171     margin-left: 180px;
1173 .mod-indent-7 {
1174     margin-left: 210px;
1176 .mod-indent-8 {
1177     margin-left: 240px;
1179 .mod-indent-9 {
1180     margin-left: 270px;
1182 .mod-indent-10 {
1183     margin-left: 300px;
1185 .mod-indent-11 {
1186     margin-left: 330px;
1188 .mod-indent-12 {
1189     margin-left: 360px;
1191 .mod-indent-13 {
1192     margin-left: 390px;
1194 .mod-indent-14 {
1195     margin-left: 420px;
1197 .mod-indent-15,
1198 .mod-indent-huge {
1199     margin-left: 420px;
1201 .dir-rtl .mod-indent-1 {
1202     margin-right: 30px;
1203     margin-left: 0;
1205 .dir-rtl .mod-indent-2 {
1206     margin-right: 60px;
1207     margin-left: 0;
1209 .dir-rtl .mod-indent-3 {
1210     margin-right: 90px;
1211     margin-left: 0;
1213 .dir-rtl .mod-indent-4 {
1214     margin-right: 120px;
1215     margin-left: 0;
1217 .dir-rtl .mod-indent-5 {
1218     margin-right: 150px;
1219     margin-left: 0;
1221 .dir-rtl .mod-indent-6 {
1222     margin-right: 180px;
1223     margin-left: 0;
1225 .dir-rtl .mod-indent-7 {
1226     margin-right: 210px;
1227     margin-left: 0;
1229 .dir-rtl .mod-indent-8 {
1230     margin-right: 240px;
1231     margin-left: 0;
1233 .dir-rtl .mod-indent-9 {
1234     margin-right: 270px;
1235     margin-left: 0;
1237 .dir-rtl .mod-indent-10 {
1238     margin-right: 300px;
1239     margin-left: 0;
1241 .dir-rtl .mod-indent-11 {
1242     margin-right: 330px;
1243     margin-left: 0;
1245 .dir-rtl .mod-indent-12 {
1246     margin-right: 360px;
1247     margin-left: 0;
1249 .dir-rtl .mod-indent-13 {
1250     margin-right: 390px;
1251     margin-left: 0;
1253 .dir-rtl .mod-indent-14 {
1254     margin-right: 420px;
1255     margin-left: 0;
1257 .dir-rtl .mod-indent-15,
1258 .dir-rtl .mod-indent-huge {
1259     margin-right: 420px;
1260     margin-left: 0;
1262 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1263 .resourcecontent .mediaplugin_mp3 object {
1264     height: 25px;
1265     width: 600px
1267 .resourcecontent audio.mediaplugin_html5audio {
1268     width: 600px
1270 /** Large resource images should avoid hidden overflow **/
1271 .resourceimage {
1272     max-width: 100%;
1274 /* Audio player size in 'inline' mode (can only change width, as above) */
1275 .mediaplugin_mp3 object {
1276     height: 15px;
1277     width: 300px
1279 audio.mediaplugin_html5audio {
1280     width: 300px
1282 /* TinyMCE moodle media preview frame should not have padding */
1283 .core_media_preview.pagelayout-embedded #content {
1284     padding: 0;
1286 .core_media_preview.pagelayout-embedded #maincontent {
1287     height: 0;
1289 .core_media_preview.pagelayout-embedded .mediaplugin {
1290     margin: 0;
1292 /** Fix YUI 2 Treeview for Right to left languages **/
1293 .dir-rtl .ygtvtn,
1294 .dir-rtl .ygtvtm,
1295 .dir-rtl .ygtvtmh,
1296 .dir-rtl .ygtvtmhh,
1297 .dir-rtl .ygtvtp,
1298 .dir-rtl .ygtvtph,
1299 .dir-rtl .ygtvtphh,
1300 .dir-rtl .ygtvln,
1301 .dir-rtl .ygtvlm,
1302 .dir-rtl .ygtvlmh,
1303 .dir-rtl .ygtvlmhh,
1304 .dir-rtl .ygtvlp,
1305 .dir-rtl .ygtvlph,
1306 .dir-rtl .ygtvlphh,
1307 .dir-rtl .ygtvdepthcell,
1308 .dir-rtl .ygtvok,
1309 .dir-rtl .ygtvok:hover,
1310 .dir-rtl .ygtvcancel,
1311 .dir-rtl .ygtvcancel:hover {
1312     width: 18px;
1313     height: 22px;
1314     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1315     background-repeat: no-repeat;
1316     cursor: pointer;
1318 .dir-rtl .ygtvtn {
1319     background-position: 0 -5600px;
1321 .dir-rtl .ygtvtm {
1322     background-position: 0 -4000px;
1324 .dir-rtl .ygtvtmh,
1325 .dir-rtl .ygtvtmhh {
1326     background-position: 0 -4800px;
1328 .dir-rtl .ygtvtp {
1329     background-position: 0 -6400px;
1331 .dir-rtl .ygtvtph,
1332 .dir-rtl .ygtvtphh {
1333     background-position: 0 -7200px;
1335 .dir-rtl .ygtvln {
1336     background-position: 0 -1600px;
1338 .dir-rtl .ygtvlm {
1339     background-position: 0 0;
1341 .dir-rtl .ygtvlmh,
1342 .dir-rtl .ygtvlmhh {
1343     background-position: 0 -800px;
1345 .dir-rtl .ygtvlp {
1346     background-position: 0 -2400px;
1348 .dir-rtl .ygtvlph,
1349 .dir-rtl .ygtvlphh {
1350     background-position: 0 -3200px
1352 .dir-rtl .ygtvdepthcell {
1353     background-position: 0 -8000px;
1355 .dir-rtl .ygtvok {
1356     background-position: 0 -8800px;
1358 .dir-rtl .ygtvok:hover {
1359     background-position: 0 -8844px;
1361 .dir-rtl .ygtvcancel {
1362     background-position: 0 -8822px;
1364 .dir-rtl .ygtvcancel:hover {
1365     background-position: 0 -8866px;
1367 .dir-rtl.yui-skin-sam .yui-panel .hd {
1368     text-align: right;
1370 .dir-rtl .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
1371     text-align: right;
1373 /** Fix TinyMCE editor right to left **/
1374 .dir-rtl .clearlooks2.ie9 .mceAlert .mceMiddle span,.dir-rtl .clearlooks2 .mceConfirm .mceMiddle span {
1375     top: 44px;
1377 .dir-rtl .o2k7Skin table,
1378 .dir-rtl .o2k7Skin tbody,
1379 .dir-rtl .o2k7Skin a,
1380 .dir-rtl .o2k7Skin img,
1381 .dir-rtl .o2k7Skin tr,
1382 .dir-rtl .o2k7Skin div,
1383 .dir-rtl .o2k7Skin td,
1384 .dir-rtl .o2k7Skin iframe,
1385 .dir-rtl .o2k7Skin span,
1386 .dir-rtl .o2k7Skin *,
1387 .dir-rtl .o2k7Skin .mceText,
1388 .dir-rtl .o2k7Skin .mceListBox .mceText {
1389     text-align: right;
1391 .path-rating .ratingtable {
1392     width: 100%;
1393     margin-bottom: 1em;
1395 .path-rating .ratingtable th.rating {
1396     width: 100%;
1398 .path-rating .ratingtable td.rating,
1399 .path-rating .ratingtable td.time {
1400     white-space: nowrap;
1401     text-align: center;
1403 .initialbar a {
1404     padding-right: 2px;
1406 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1407 .moodle-dialogue-base .moodle-dialogue-lightbox {
1408     background-color: #AAA;
1410 .moodle-dialogue-base .hidden,
1411 .moodle-dialogue-base .moodle-dialogue-hidden {
1412     display: none;
1414 .no-scrolling {
1415     overflow: hidden;
1417 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1418     left: 0px;
1419     top: 0px;
1420     right: 0px;
1421     bottom: -50px;
1422     position: fixed;
1424 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1425     overflow: auto;
1427 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1428     width: 28px;
1429     height: 16px;
1430     background-size: 100%;
1432 .moodle-dialogue-base .moodle-dialogue {
1433     padding: 0;
1434     margin: 0;
1435     background: none;
1436     border: none;
1437     z-index: 600;
1438     outline: #000 dotted 0;
1440 .moodle-dialogue-base .moodle-dialogue-wrap {
1441     margin-top: -3px;
1442     margin-left: -3px;
1443     background-color: #fff;
1444     border: 1px solid #ccc;
1445     .border-radius(10px);
1446     .box-shadow(5px 5px 20px 0 #666);
1448 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1449     margin: 0;
1450     padding: 5px;
1451     font-size: 12px;
1452     font-weight: normal;
1453     letter-spacing: 1px;
1454     color: #333;
1455     text-align: center;
1456     text-shadow: 1px 1px 1px #fff;
1457     .border-radius(10px 10px 0 0);
1458     border-bottom: 1px solid #bbb;
1459     background: #ccc;
1460     #gradient > .vertical(#fff, #ccc);
1461     filter: dropshadow(color=#FFFFFF, offx=1, offy=1);
1463 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1464     margin: 0;
1465     padding: 0;
1466     display: inline;
1467     font-size: 100%;
1468     font-weight: bold;
1470 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1471     padding: 5px;
1473 .moodle-dialogue-base .closebutton {
1474     width: 25px;
1475     height: 15px;
1476     float: right;
1477     vertical-align: middle;
1478     display: inline-block;
1479     cursor: pointer;
1480     padding: 0;
1481     background-image: url([[pix:theme|sprite]]);
1482     background-repeat: no-repeat;
1483     border-style: none;
1485 .dir-rtl .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1486     left: 0;
1487     right: auto;
1489 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1490     overflow: auto;
1491     padding: 1em;
1492     line-height: 2em;
1493     color: #555;
1494     font-size: 12px;
1496 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-content {
1497     padding: 0;
1498     background: #FFF;
1501 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd {
1502     padding: 10px;
1503     font-size: 16px;
1506 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1507     overflow: auto;
1508     position: absolute;
1509     top: 0px;
1510     bottom: 50px;
1511     left: 0px;
1512     right: 0px;
1513     margin: 0px;
1514     border: 0px;
1516 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd,
1517 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-wrap {
1518     border-radius: 0px;
1520 .moodle-dialogue-confirm .confirmation-dialogue {
1521     text-align: center;
1523 .moodle-dialogue-confirm .confirmation-dialogue input {
1524     text-align: center;
1526 .moodle-dialogue-exception .moodle-exception-message {
1527     text-align: center
1529 .moodle-dialogue-exception .moodle-exception-param label {
1530     font-weight: bold;
1532 .moodle-dialogue-exception .param-stacktrace label {
1533     background-color: #EEE;
1534     border: 1px solid #ccc;
1535     border-bottom-width: 0;
1537 .moodle-dialogue-exception .param-stacktrace pre {
1538     border: 1px solid #ccc;
1539     background-color: #fff;
1541 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1542     color: navy;
1543     font-size: @fontSizeSmall;
1545 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1546     color: @errorText;
1547     font-size: @fontSizeSmall;
1549 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1550     color: #333;
1551     font-size: 90%;
1552     border-bottom: 1px solid #eee;
1554 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1555     padding: 0;
1556     margin: 0.7em 1em;
1557     text-align: right;
1558     background-color: #FFF;
1559     font-size: 12px;
1561 .moodle-dialogue-confirm .confirmation-message {
1562     margin: 0.5em 1em;
1564 .moodle-dialogue-confirm .confirmation-dialogue input {
1565     min-width: 80px
1567 .moodle-dialogue-exception .moodle-exception-message {
1568     margin: 1em;
1570 .moodle-dialogue-exception .moodle-exception-param {
1571     margin-bottom: 0.5em;
1573 .moodle-dialogue-exception .moodle-exception-param label {
1574     width: 150px;
1576 .moodle-dialogue-exception .param-stacktrace label {
1577     display: block;
1578     margin: 0;
1579     padding: 4px 1em;
1581 .moodle-dialogue-exception .param-stacktrace pre {
1582     display: block;
1583     height: 200px;
1584     overflow: auto;
1586 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1587     display: inline-block;
1588     margin: 4px 0;
1590 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1591     display: inline-block;
1592     width: 50px;
1593     margin: 4px 1em;
1595 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1596     padding-left: 25px;
1597     margin-bottom: 4px;
1598     padding-bottom: 4px;
1600 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1601     .opacity(75);
1602     width: 100%;
1603     height: 100%;
1604     top: 0;
1605     left: 0;
1606     background-color: white;
1607     text-align: center;
1608     padding: 10% 0;
1610 /* Apply a default max-height on tooltip text */
1611 .moodle-dialogue .tooltiptext {
1612     max-height: 300px;
1615 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1616     z-index: 3001;
1619 /* Question Bank - Question Chooser "Close" button */
1620 #page-question-edit.dir-rtl a.container-close {
1621     right: auto;
1622     left: 6px;
1624 /**
1625 * Chooser Dialogues (moodle-core-chooserdialogue)
1627 * This CSS belong to the chooser dialogue which should work both with, and
1628 * without javascript enabled
1629 */
1630 /* Hide the dialog and it's title */
1631 .chooserdialoguebody,
1632 .choosertitle {
1633     display: none;
1635 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1636     margin: 0;
1638 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1639     padding: 0;
1640     background: #F2F2F2;
1641     .border-bottom-radius(10px);
1643 /* Center the submit buttons within the area */
1644 .choosercontainer #chooseform .submitbuttons {
1645     margin: 0.7em 0;
1646     text-align: center;
1648 .choosercontainer #chooseform .submitbuttons input {
1649     min-width: 100px;
1650     margin: 0 0.5em;
1652 /* Various settings for the options area */
1653 .choosercontainer #chooseform .options {
1654     position: relative;
1655     border-bottom: 1px solid #BBBBBB;
1657 /* Only set these options if we're showing the js container */
1658 .jsenabled .choosercontainer #chooseform .alloptions {
1659     overflow-x: hidden;
1660     overflow-y: auto;
1661     max-width: 20.3em;
1662     .box-shadow(inset 0 0 30px 0px #ccc);
1664 .dir-rtl.jsenabled .choosercontainer #chooseform .alloptions {
1665     max-width: 18.3em;
1667 /* Settings for option rows and option subtypes */
1668 .choosercontainer #chooseform .moduletypetitle,
1669 .choosercontainer #chooseform .option,
1670 .choosercontainer #chooseform .nonoption {
1671     margin-bottom: 0;
1672     padding: 0 1.6em 0 1.6em;
1674 .choosercontainer #chooseform .moduletypetitle {
1675     text-transform: uppercase;
1676     padding-top: 1.2em;
1677     padding-bottom: 0.4em;
1679 .choosercontainer #chooseform .option .typename,
1680 .choosercontainer #chooseform .option span.modicon img.icon,
1681 .choosercontainer #chooseform .nonoption .typename,
1682 .choosercontainer #chooseform .nonoption span.modicon img.icon {
1683     padding: 0 0 0 0.5em;
1685 .dir-rtl .choosercontainer #chooseform .option .typename,
1686 .dir-rtl .choosercontainer #chooseform .option span.modicon img.icon,
1687 .dir-rtl .choosercontainer #chooseform .nonoption .typename,
1688 .dir-rtl .choosercontainer #chooseform .nonoption span.modicon img.icon {
1689     padding: 0 0.5em 0 0;
1691 .choosercontainer #chooseform .option span.modicon img.icon,
1692 .choosercontainer #chooseform .nonoption span.modicon img.icon {
1693     height: 24px;
1694     width: 24px;
1696 .choosercontainer #chooseform .option input[type=radio],
1697 .choosercontainer #chooseform .option span.typename,
1698 .choosercontainer #chooseform .option span.modicon {
1699     vertical-align: middle;
1701 .choosercontainer #chooseform .option label {
1702     display: block;
1703     padding: 0.3em 0 0.1em 0;
1704     border-bottom: 1px solid #FFFFFF;
1706 .choosercontainer #chooseform .nonoption {
1707     padding-left: 2.7em;
1708     padding-top: 0.3em;
1709     padding-bottom: 0.1em;
1711 .dir-rtl .choosercontainer #chooseform .nonoption {
1712     padding-right: 2.7em;
1713     padding-left: 0;
1715 .choosercontainer #chooseform .subtype {
1716     margin-bottom: 0;
1717     padding: 0 1.6em 0 3.2em;
1719 .dir-rtl .choosercontainer #chooseform .subtype {
1720     padding: 0 3.2em 0 1.6em;
1722 .choosercontainer #chooseform .subtype .typename {
1723     margin: 0 0 0 0.2em;
1725 .dir-rtl .choosercontainer #chooseform .subtype .typename {
1726     margin: 0 0.2em 0 0;
1728 /* The instruction/help area */
1729 .jsenabled .choosercontainer #chooseform .instruction,
1730 .jsenabled .choosercontainer #chooseform .typesummary {
1731    display: none;
1732     position: absolute;
1733     top: 0;
1734     right: 0;
1735     bottom: 0;
1736     left: 20.3em;
1737     margin: 0;
1738     padding: 1.6em;
1739     background-color: @bodyBackground;
1740     overflow-x: hidden;
1741     overflow-y: auto;
1742     line-height: 2em;
1744 .dir-rtl.jsenabled .choosercontainer #chooseform .instruction,
1745 .dir-rtl.jsenabled .choosercontainer #chooseform .typesummary {
1746     left: 0;
1747     right: 18.5em;
1748     border-right: 1px solid grey;
1750 /* Selected option settings */
1751 .jsenabled .choosercontainer #chooseform .instruction,
1752 .choosercontainer #chooseform .selected .typesummary {
1753     display: block;
1755 .choosercontainer #chooseform .selected {
1756     background-color: @bodyBackground;
1757     .box-shadow(0px 0 10px 0 #ccc);
1759 .section-modchooser-link img.smallicon {
1760     padding: 3px;
1762 /* Form element: listing */
1763 .formlistingradio {
1764     padding-bottom: 25px;
1765     padding-right: 10px;
1767 .formlistinginputradio {
1768     float: left;
1770 .formlistingmain {
1771     min-height: 225px;
1773 .formlisting {
1774     position: relative;
1775     margin: 15px 0;
1776     padding: 1px 19px 14px;
1777     background-color: white;
1778     border: 1px solid #DDD;
1779     .border-radius(4px);
1781 .formlistingmore {
1782     position: absolute;
1783     cursor: pointer;
1784     bottom: -1px;
1785     right: -1px;
1786     padding: 3px 7px;
1787     font-size: 12px;
1788     font-weight: bold;
1789     background-color: whiteSmoke;
1790     border: 1px solid #ddd;
1791     color: #9DA0A4;
1792     .border-radius(4px 0 4px 0);
1794 .formlistingall {
1795     margin: 15px 0;
1796     padding: 0;
1797     .border-radius(4px);
1799 .formlistingrow {
1800     cursor: pointer;
1801     border-bottom: 1px solid;
1802     border-color: #E1E1E8;
1803     border-left: 1px solid #E1E1E8;
1804     border-right: 1px solid #E1E1E8;
1805     background-color: #F7F7F9;
1806     .border-radius(0 0 4px 4px);
1807     padding: 6px;
1808     top: 50%;
1809     left: 50%;
1810     min-height: 34px;
1811     float: left;
1812     width: 150px;
1814 body.jsenabled .formlistingradio {
1815     display: none;
1817 body.jsenabled .formlisting {
1818     display: block;
1821 /* Badges styles */
1822 table.collection {
1823     .table;
1824     .table-bordered;
1825     .table-striped;
1827 table.collection .name {
1828     text-align: left;
1829     vertical-align: middle;
1831 table.collection .awards {
1832     width: 10%;
1833     text-align: center;
1834     vertical-align: middle;
1836 table.collection .criteria {
1837     width: 40%;
1838     text-align: left;
1839     vertical-align: top;
1841 table.collection .badgeimage,
1842 table.collection .status {
1843     width: 15%;
1844     text-align: center;
1845     vertical-align: middle;
1847 table.collection .description {
1848     width: 25%;
1849     text-align: left;
1851 table.collection .actions {
1852     width: 11em;
1853     text-align: center;
1854     vertical-align: middle;
1857 a.criteria-action {
1858     padding: 0px 3px;
1859     float: right;
1861 table.issuedbadgebox {
1862     width: 750px;
1863     background-color: #FFFFFF;
1865 table.badgeissuedimage {
1866     width: 150px;
1867     text-align: center;
1869 table.badgeissuedinfo {
1870     width: 600px;
1872 table.badgeissuedinfo .bvalue {
1873     text-align: left;
1874     vertical-align: middle;
1876 table.badgeissuedinfo .bfield {
1877     width: 125px;
1878     text-align: left;
1879     font-style: italic;
1881 .dir-rtl {
1882     table.badgeissuedinfo .bvalue,
1883     table.badgeissuedinfo .bfield {
1884         text-align: right;
1885     }
1887 ul.badges {
1888     margin: 0;
1889     list-style: none;
1891 .badges li {
1892     position: relative;
1893     display: inline-block;
1894     padding-bottom: 2em;
1895     text-align: center;
1896     vertical-align: top;
1897     width: 150px;
1899 .badges li .badge-name {
1900     display: block;
1901     padding: 5px;
1903 .badges li > img {
1904     position: absolute;
1906 .badges li .badge-image {
1907     width: 90px;
1908     height: 90px;
1909     left: 10px;
1910     top: 0px;
1911     z-index: 1;
1913 .badges li .badge-actions {
1914     position: relative;
1916 div.badge {
1917     position: relative;
1918     display: block;
1920 div.badge .expireimage {
1921     width: 100px;
1922     height: 100px;
1923     left: 20px;
1924     top: 0px;
1926 .expireimage {
1927     .opacity(85);
1928     width: 90px; height: 90px;
1929     left: 30px;
1930     top: 0px;
1931     position: absolute;
1932     z-index:10;
1934 .badge-profile {
1935     vertical-align: top;
1937 .connected {
1938     color: @successText;
1940 .notconnected {
1941     color: @errorText;
1943 .connecting {
1944     color: @warningText;
1946 #page-badges-award .recipienttable tr td {
1947     vertical-align: top;
1949 #page-badges-award .recipienttable tr td.actions .actionbutton {
1950     margin: 0.3em 0;
1951     padding: 0.5em 0;
1952     width: 100%;
1954 #page-badges-award .recipienttable tr td.existing,
1955 #page-badges-award .recipienttable tr td.potential {
1956     width: 42%;
1959 .statustable {
1960     margin-bottom: 0px;
1962 .statusbox.active {
1963     background-color: @successBackground;
1965 .statusbox.inactive {
1966     background-color: @warningBackground;
1968 .activatebadge {
1969     margin: 0px;
1970     text-align: left;
1971     vertical-align: middle;
1973 .dir-rtl .activatebadge {
1974     text-align: right;
1976 img#persona_signin {
1977     cursor: pointer;
1979 .addcourse {
1980     float: right;
1982 .invisiblefieldset {
1983     display: inline;
1984     margin: 0;
1985     padding: 0;
1986     border-width: 0;
1988 .breadcrumb-nav {
1989     float: left;
1990     margin-bottom: 10px;
1992 .dir-rtl .breadcrumb-nav {
1993     float: right;
1995 .breadcrumb-button .singlebutton div {
1996     margin-right: 0;
1998 .breadcrumb-nav .breadcrumb {
1999     margin: 0;
2002 /** Action menu component styles **/
2003 .moodle-actionmenu,
2004 .moodle-actionmenu > ul,
2005 .moodle-actionmenu > ul > li {
2006     display: inline-block;
2009 .moodle-actionmenu ul {
2010     padding: 0;
2011     margin: 0;
2012     list-style-type: none;
2015 .moodle-actionmenu .toggle-display,
2016 .moodle-actionmenu .menu-action-text {
2017     display: none; /** Hidden by default, display none so that we don't take up space. **/
2020 .jsenabled {
2021     .moodle-actionmenu[data-enhance] {
2022         display: block;
2023         .menu {
2024             display:none;
2025         }
2026         .toggle-display {
2027             display: inline; /** JS is enabled, we'll be using it so return display to normal **/
2028             .opacity(50);
2029         }
2030     }
2031     .moodle-actionmenu[data-enhanced] {
2032         .toggle-display {
2033             .opacity(100);
2034         }
2035         .menu-action-text  {
2036             display:inline;
2037         }
2038     }
2041 .moodle-actionmenu[data-enhanced].show  {
2043     position: relative;
2045     .menu {
2047         display:block;
2048         position: absolute;
2049         text-align: left;
2050         background-color: #fff;
2051         border: 1px solid #ccc;
2052         z-index:1000;
2053         .border-radius(5px);
2054         .box-shadow(5px 5px 20px 0 #666);
2056         a {
2057             white-space:nowrap;
2058             display: block;
2059             color: @dropdownLinkColor;
2060             padding:2px 1em 2px 0.5em;
2061             &:hover,
2062             &:focus {
2063                 color: @dropdownLinkColorHover;
2064                 background-color: @dropdownLinkBackgroundHover;
2065             }
2066             &:first-child {
2067                 .border-top-radius(4px);
2068             }
2069             &:last-child {
2070                 .border-bottom-radius(4px);
2071             }
2072         }
2073         a.hidden {
2074             display:none;
2075         }
2076         img {
2077             vertical-align: middle;
2078         }
2079         .iconsmall {
2080             margin-right:8px;
2081         }
2082         > li {
2083             display:block;
2084         }
2086         /** bottom left of button **/
2087         &.align-tl-bl {top: 100%;left:0;margin-top: 4px;}
2088         &.align-tr-bl {top: 100%;right: 100%;}
2089         &.align-bl-bl {bottom: 100%;left:0;}
2090         &.align-br-bl {bottom: 100%;right: 100%;}
2091         /** bottom right of button **/
2092         &.align-tl-br {top: 100%;left:100%;}
2093         &.align-tr-br {top: 100%;right: 0;margin-top: 4px;}
2094         &.align-bl-br {bottom: 100%;left:100%;}
2095         &.align-br-br {bottom: 100%;right: 0;}
2096         /** top left of button **/
2097         &.align-tl-tl {top: 0;left:0;}
2098         &.align-tr-tl {top: 0;right: 100%;margin-right: 4px;}
2099         &.align-bl-tl {bottom: 100%;left:0;margin-bottom: 4px;}
2100         &.align-br-tl {bottom: 100%;right: 100%;}
2101         /** top right of button **/
2102         &.align-tl-tr {top: 0;left:100%;margin-left: 4px;}
2103         &.align-tr-tr {top: 0;right: 0;}
2104         &.align-bl-tr {bottom: 100%;left:100%;}
2105         &.align-br-tr {bottom: 100%;right: 0;margin-bottom: 4px;}
2106     }
2109 .action-menu-shown .moodle-actionmenu[data-enhanced] .toggle-display {
2110     background-color: #FFF;
2113 .block .moodle-actionmenu {
2114     text-align: right;
2117 .dir-rtl {
2118     .moodle-actionmenu[data-enhanced].show  {
2119         .menu {
2120             text-align: right;
2121             left: 0;
2122             right: auto;
2123             .iconsmall {
2124                 margin-right:0;
2125                 margin-left:8px;
2126             }
2128             /** bottom left of button **/
2129             &.align-tl-bl {left: auto; right: 0;}
2130             &.align-tr-bl {right: auto; left: 100%;}
2131             &.align-bl-bl {left: auto; right: 0;}
2132             &.align-br-bl {right: auto; left: 100%;}
2133             /** bottom right of button **/
2134             &.align-tl-br {left: auto; right: 100%;}
2135             &.align-tr-br {right: auto; left: 0;}
2136             &.align-bl-br {left: auto; right: 100%;}
2137             &.align-br-br {right: auto; left: 0;}
2138             /** top left of button **/
2139             &.align-tl-tl {left: auto; right: 0;}
2140             &.align-tr-tl {right: auto; left: 100%;}
2141             &.align-bl-tl {left: auto; right: 0;}
2142             &.align-br-tl {right: auto; left: 100%;}
2143             /** top right of button **/
2144             &.align-tl-tr {left: auto; right: 100%;}
2145             &.align-tr-tr {right: auto; left: 0;}
2146             &.align-bl-tr {left: auto; right: 100%;}
2147             &.align-br-tr {right: auto; left: 0;}
2148         }
2149     }
2150     .block .moodle-actionmenu {
2151         text-align: right;
2152     }
2155 ul.dragdrop-keyboard-drag li {
2156     list-style-type: none;
2159 .block-control-actions .moodle-core-dragdrop-draghandle img {
2160     width: 12px;
2161     height: 12px;
2164 a.disabled:hover,
2165 a.disabled {
2166     text-decoration: none;
2167     cursor: default;
2168     font-style: italic;
2169     color: #808080;