67f4102dfafeca1359f467733cf78a98918bcbaa
[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 /** Start Legacy styles. Deprecated since Moodle 2.9. See MDL-48160 for further information. **/
20 .content-only #region-main.span9, // Two column layout with no block or all blocks docked.
21 .empty-region-side-post #region-bs-main-and-pre.span9, // LTR with no post area.
22 .empty-region-side-pre #region-bs-main-and-post.span9, // RTL with no pre area.
23 .empty-region-side-post #region-bs-main-and-post.span9 #region-main.span8, // RTL with no post area.
24 .jsenabled.docked-region-side-post #region-bs-main-and-pre.span9, // LTR with all post blocks docked.
25 .jsenabled.docked-region-side-post #region-bs-main-and-post.span9 #region-main.span8,
26 .jsenabled.docked-region-side-pre #region-bs-main-and-post.span9 { // RTL with all pre blocks docked.
27     width: 100%;
28 }
30 .empty-region-side-pre #region-bs-main-and-pre.span9 #region-main, // LTR with no pre area.
31 .jsenabled.docked-region-side-pre #region-bs-main-and-pre.span9 #region-main { // LTR with all pre blocks docked.
32     float: none;
33     width: 100%;
34 }
36 .empty-region-side-pre #region-bs-main-and-post.span9 #region-main.span8, // RTL with no pre area.
37 .jsenabled.docked-region-side-pre #region-bs-main-and-post.span9 #region-main.span8 { // RTL with all pre blocks docked.
38     float: right;
39 }
40 /** End Legacy styles **/
43 /* Default Three Columns - All
44 ------------------------------*/
46 .content-only {
47     #region-main-box,
48     #region-main {
49         width: 100%;
50     }
51 }
52 .empty-region-side-pre {
53     &.used-region-side-post {
54         #region-main {
55             width: 100%;
56         }
57     }
58 }
59 .empty-region-side-post {
60     &.used-region-side-pre {
61         #region-main-box {
62             width: 100%;
63         }
64     }
65 }
66 .jsenabled {
67     &.docked-region-side-pre {
68         &.empty-region-side-pre {
69             &.used-region-side-post {
70                 #region-main {
71                     width: 100%;
72                 }
73             }
74         }
75     }
76     &.docked-region-side-post {
77         &.empty-region-side-post {
78             &.used-region-side-pre {
79                 #region-main-box {
80                     width: 100%;
81                 }
82             }
83         }
84     }
85 }
86 .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
87 .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
88     #region-main.span8 {
89     /** Increase the span size by 1 **/
90         .fluid-span(9);
91     }
92     #block-region-side-pre.span4 {
93     /** Decrease the span size by 1 **/
94         .fluid-span(3);
95     }
96 }
98 /** Page layout CSS ends **/
100 .dir-ltr,
101 .mdl-left,
102 .dir-rtl .mdl-right {
103     text-align: left;
105 .dir-rtl,
106 .mdl-right,
107 .dir-rtl .mdl-left {
108     text-align: right;
110 #add,
111 #remove,
112 .centerpara,
113 .mdl-align {
114     text-align: center;
116 a.dimmed,
117 a.dimmed:link,
118 a.dimmed:visited,
119 a.dimmed_text,
120 a.dimmed_text:link,
121 a.dimmed_text:visited,
122 .dimmed_text,
123 .dimmed_text a,
124 .dimmed_text a:link,
125 .dimmed_text a:visited,
126 .usersuspended,
127 .usersuspended a,
128 .usersuspended a:link,
129 .usersuspended a:visited,
130 .dimmed_category,
131 .dimmed_category a {
132     .muted
134 .activity.label .dimmed_text {
135     .opacity(50)
137 .unlist,
138 .unlist li,
139 .inline-list,
140 .inline-list li,
141 .block .list,
142 .block .list li,
143 .section li.activity,
144 .section li.movehere,
145 .tabtree li {
146     list-style: none;
147     margin: 0;
148     padding: 0;
150 .inline,
151 .inline-list li {
152     display: inline;
154 .notifytiny {
155     font-size: @fontSizeMini;
157 .notifytiny li,
158 .notifytiny td {
159     font-size: 100%;
161 .red,
162 .notifyproblem {
163     color: @errorText;
165 .green,
166 .notifysuccess {
167     color: @successText;
169 .highlight {
170     background: @infoBackground;
172 .reportlink {
173     text-align: right;
175 a.autolink.glossary:hover {
176     cursor: help;
178 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
179 .collapsibleregioncaption {
180     white-space: nowrap;
182 .collapsibleregioncaption img {
183     vertical-align: middle;
185 .jsenabled .hiddenifjs {
186     display: none;
188 .visibleifjs {
189     display: none;
191 .jsenabled .visibleifjs {
192     display: inline;
194 .jsenabled .collapsibleregion {
195     overflow: hidden;
197 .jsenabled .collapsed .collapsibleregioninner {
198     visibility: hidden;
200 .collapsible-actions {
201     display: none;
202     text-align: right;
204 .dir-rtl .collapsible-actions {
205     text-align: left;
207 .jsenabled .collapsible-actions {
208     display: block;
210 .collapsible-actions .collapseexpand {
211     padding-left: 20px;
212     background: url([[pix:t/collapsed]]) 2px center no-repeat;
214 .dir-rtl .collapsible-actions .collapseexpand {
215     padding-right: 20px;
216     padding-left: 0;
217     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
219 .collapsible-actions .collapse-all,
220 .dir-rtl .collapsible-actions .collapse-all {
221     background-image: url([[pix:t/expanded]]);
223 .yui-overlay .yui-widget-bd {
224     background-color: #FFEE69;
225     border: 1px solid #A6982B;
226     border-top-color: #D4C237;
227     color: #000000;
228     left: 0;
229     padding: 2px 5px;
230     position: relative;
231     top: 0;
232     z-index: 1;
234 .clearer {
235     background: transparent;
236     border-width: 0;
237     clear: both;
238     display: block;
239     height: 1px;
240     margin: 0;
241     padding: 0;
243 .bold,
244 .warning,
245 .errorbox .title,
246 .pagingbar .title,
247 .pagingbar .thispage {
248     font-weight: bold;
250 img.resize {
251     height: 1em;
252     width: 1em;
254 .block img.resize,
255 .breadcrumb img.resize {
256     height: 0.9em;
257     width: 0.8em;
259 /* Icon styles */
260 img.icon {
261     height: 16px;
262     vertical-align: text-bottom;
263     width: 16px;
264     padding-right: 6px;
266 .dir-rtl img.icon {
267     padding-left: 6px;
268     padding-right: 0;
270 img.iconsmall {
271     height: 12px;
272     margin-right: 3px;
273     vertical-align: middle;
274     width: 12px;
276 img.iconhelp, .helplink img {
277     height: 16px;
278     padding-left: 3px;
279     vertical-align: text-bottom;
280     width: 16px;
282 h1 img.iconhelp, h1 img.icon,
283 h2 img.iconhelp, h2 img.icon,
284 h3 img.iconhelp, h3 img.icon,
285 h4 img.iconhelp, h4 img.icon,
286 h5 img.iconhelp, h5 img.icon,
287 h6 img.iconhelp, h6 img.icon {
288   vertical-align: middle;
289   padding: 4px;
291 .dir-rtl img.iconhelp, .dir-rtl .helplink img {
292     padding-right: 3px;
293     padding-left: 0;
295 img.iconlarge {
296     height: 24px;
297     width: 24px;
298     vertical-align: middle;
300 img.iconsort {
301     vertical-align: text-bottom;
302     padding-left: .3em;
303     margin-bottom: .15em;
305 .dir-rtl img.iconsort {
306     padding-right: .3em;
307     padding-left: 0;
309 img.icontoggle {
310     height: 17px;
311     vertical-align: middle;
312     width: 50px;
314 img.iconkbhelp {
315     height: 17px;
316     width: 49px;
318 img.icon-pre, .dir-rtl img.icon-post {
319     padding-right: 3px;
320     padding-left: 0;
322 img.icon-post, .dir-rtl img.icon-pre {
323     padding-left: 3px;
324     padding-right: 0;
326 .boxaligncenter {
327     margin-left: auto;
328     margin-right: auto;
330 .boxalignright {
331     margin-left: auto;
332     margin-right: 0;
334 .boxalignleft {
335     margin-left: 0;
336     margin-right: auto;
338 .boxwidthnarrow {
339     width: 30%;
341 .boxwidthnormal {
342     width: 50%;
344 .boxwidthwide {
345     width: 80%;
347 .headermain {
348     font-weight: bold;
350 #maincontent {
351     display: block;
352     height: 1px;
353     overflow: hidden;
355 img.uihint {
356     cursor: help;
358 #addmembersform table {
359     margin-left: auto;
360     margin-right: auto;
362 table.flexible .emptyrow {
363     display: none;
365 img.emoticon {
366     vertical-align: middle;
367     width: 15px;
368     height: 15px;
370 form.popupform,
371 form.popupform div {
372     display: inline;
374 .arrow_button input {
375     overflow: hidden;
377 .action-icon img.smallicon {
378     vertical-align: text-bottom;
379     margin: 0 0.3em;
382 /** The 1-pixel padding is there to avoid phantom scroll bars on OS X (FF, Safari and Chrome)**/
383 .no-overflow {
384     overflow: auto;
385     padding-bottom: 1px;
387 .pagelayout-report .no-overflow {
388     overflow: visible;
390 .no-overflow > .generaltable {
391     margin-bottom: 0;
393 // Accessibility features
395 // Accessibility: text 'seen' by screen readers but not visual users.
396 .accesshide {
397     position: absolute;
398     left: -10000px;
399     font-weight: normal;
400     font-size: 1em;
402 .dir-rtl .accesshide {
403     top: -30000px;
404     left: auto;
406 span.hide,
407 div.hide {
408     display: none;
410 // Accessibility: Skip block link, for keyboard-only users.
411 a.skip-block,
412 a.skip {
413     position: absolute;
414     top: -1000em;
415     font-size: 0.85em;
416     text-decoration: none;
418 a.skip-block:focus,
419 a.skip-block:active,
420 a.skip:focus,
421 a.skip:active {
422     position: static;
423     display: block;
425 .skip-block-to {
426     display: block;
427     height: 1px;
428     overflow: hidden;
430 // Blogs
431 .addbloglink {
432     text-align: center;
434 .blog_entry .audience {
435     text-align: right;
436     padding-right: 4px;
438 .blog_entry .tags {
439     margin-top: 15px;
441 .blog_entry .tags .action-icon img.smallicon {
442     height: 16px;
443     width: 16px;
445 .blog_entry .content {
446     margin-left: 43px;
448 // Group
449 #page-group-index #groupeditform {
450     text-align: center;
452 #doc-contents h1 {
453     margin: 1em 0 0 0;
455 #doc-contents ul {
456     margin: 0;
457     padding: 0;
458     width: 90%;
460 #doc-contents ul li {
461     list-style-type: none;
463 .groupmanagementtable td {
464     vertical-align: top;
466 .groupmanagementtable #existingcell,
467 .groupmanagementtable #potentialcell {
468     width: 42%;
470 .groupmanagementtable #buttonscell {
471     width: 16%;
473 .groupmanagementtable #buttonscell p.arrow_button input {
474     width: auto;
475     min-width: 80%;
476     margin: 0 auto;
478 .groupmanagementtable #removeselect_wrapper,
479 .groupmanagementtable #addselect_wrapper {
480     width: 100%;
482 .groupmanagementtable #removeselect_wrapper label,
483 .groupmanagementtable #addselect_wrapper label {
484     font-weight: normal;
486 .dir-rtl .groupmanagementtable p {
487     text-align: right;
489 #group-usersummary {
490     width: 14em;
492 .groupselector {
493     margin-top: 3px;
494     margin-bottom: 3px;
495     display: inline-block;
497 .groupselector label {
498     display: inline-block;
500 // Login
501 .loginbox {
502     margin: 15px;
503     overflow: visible;
505 .loginbox.twocolumns {
506     margin: 15px;
508 .loginbox h2,
509 .loginbox .subcontent {
510     margin: 5px;
511     padding: 10px;
512     text-align: center;
514 .loginbox .loginpanel .desc {
515     margin: 0;
516     padding: 0;
517     margin-bottom: 5px;
518     margin-top:15px;
520 .loginbox .signuppanel .subcontent {
521     text-align: left;
523 .dir-rtl .loginbox .signuppanel .subcontent {
524     text-align: right;
526 .loginbox .loginsub {
527     margin-left: 0;
528     margin-right: 0;
530 .loginbox .guestsub,
531 .loginbox .forgotsub,
532 .loginbox .potentialidps {
533     margin: 5px 12%;
535 .loginbox .potentialidps .potentialidplist {
536     margin-left: 40%;
538 .loginbox .potentialidps .potentialidplist div {
539     text-align: left;
541 .loginbox .loginform {
542     margin-top: 1em;
543     text-align: left;
545 .loginbox .loginform .form-label {
546     float: left;
547     text-align: right;
548     width: 49%;
549     white-space: nowrap;
551 .loginbox .loginform .form-input {
552     float: right;
553     width: 50%;
555 .loginbox .loginform .form-input input {
556     width: 6em;
558 .loginbox .signupform {
559     margin-top: 1em;
560     text-align: center;
562 .loginbox.twocolumns .loginpanel,
563 .loginbox.twocolumns .signuppanel {
564     width: 48%;
565     border: 0;
566     margin: 0;
567     padding: 0;
568     .box-sizing(border-box);
569     display: block;
570     float: left;
571     margin-left: 2.76243%;
572     min-height: 30px;
573     margin-bottom: -2000px;
574     padding-bottom: 2000px;
576 .dir-rtl {
577     .loginbox.twocolumns .loginpanel,
578     .loginbox.twocolumns .signuppanel {
579         float:right;
580     }
583 .loginbox .potentialidp .smallicon {
584     vertical-align: text-bottom;
585     margin: 0 .3em;
588 // Notes
589 .notepost {
590     margin-bottom: 1em;
592 .notepost .userpicture {
593     float: left;
594     margin-right: 5px;
596 .notepost .content,
597 .notepost .footer {
598     clear: both;
600 .notesgroup {
601     margin-left: 20px;
604 // My Moodle
605 .path-my .coursebox .overview {
606     margin: 15px 30px 10px 30px;
608 .path-my .coursebox .info {
609     float: none;
610     margin: 0;
613 // Modules
614 .mod_introbox {
615     padding: 10px;
617 table.mod_index {
618     width: 100%;
621 // Comments
622 .comment-ctrl {
623     font-size: 12px;
624     display: none;
625     margin: 0;
626     padding: 0;
628 .comment-ctrl h5 {
629     margin: 0;
630     padding: 5px;
632 .comment-area {
633     max-width: 400px;
634     padding: 5px;
636 .comment-area textarea {
637     width: 100%;
638     overflow: auto;
639     &.fullwidth {
640         -webkit-box-sizing: border-box;
641         -moz-box-sizing: border-box;
642         box-sizing: border-box;
643     }
645 .comment-area .fd {
646     text-align: right;
648 .comment-meta span {
649     color: gray;
651 .comment-link img {
652     vertical-align: text-bottom;
654 .comment-list {
655     font-size: 11px;
656     overflow: auto;
657     list-style: none;
658     padding: 0;
659     margin: 0;
661 .comment-list li {
662     margin: 2px;
663     list-style: none;
664     margin-bottom: 5px;
665     clear: both;
666     padding: .3em;
667     position: relative;
669 .comment-list li.first {
670     display: none
672 .comment-paging{
673     text-align: center;
675 .comment-paging .pageno{
676     padding: 2px;
678 .comment-paging .curpage{
679     border: 1px solid #CCC;
681 .comment-message .picture {
682     width: 20px;
683     float: left;
685 .dir-rtl .comment-message .picture {
686     float: right;
688 .comment-message .text {
689     margin: 0;
690     padding: 0;
692 .comment-message .text p {
693     padding: 0;
694     margin: 0 18px 0 0;
696 .comment-delete {
697     position: absolute;
698     top: 0;
699     right: 0;
700     margin: .3em;
702 .dir-rtl .comment-delete {
703     position: absolute;
704     left: 0;
705     right: auto;
706     margin: .3em;
708 .comment-report-selectall{
709     display: none
711 .comment-link {
712     display: none
714 .jsenabled .comment-link {
715     display: block
717 .jsenabled .showcommentsnonjs{
718     display: none
720 .jsenabled .comment-report-selectall{
721     display: inline
723 /**
724 * Completion progress report
725 */
726 .completion-expired {
727     background: @errorBackground;
729 .completion-expected {
730     font-size: @fontSizeMini;
732 .completion-sortchoice,
733 .completion-identifyfield {
734     font-size: @fontSizeMini;
735     vertical-align: bottom;
737 .completion-progresscell {
738     text-align: right;
740 .completion-expired .completion-expected {
741     font-weight: bold;
743 /**
744 * Tags
745 */
746 #page-tag-coursetags_edit .coursetag_edit_centered {
747     position: relative;
748     width: 600px;
749     margin: 20px auto;
751 #page-tag-coursetags_edit .coursetag_edit_row {
752     clear: both;
754 #page-tag-coursetags_edit .coursetag_edit_row .coursetag_edit_left {
755     float: left;
756     width: 50%;
757     text-align: right;
759 #page-tag-coursetags_edit .coursetag_edit_row .coursetag_edit_right {
760     margin-left: 50%;
762 #page-tag-coursetags_edit .coursetag_edit_input3 {
763     display: none;
765 #page-tag-coursetags_more .coursetag_more_large {
766     font-size: 120%;
768 #page-tag-coursetags_more .coursetag_more_small {
769     font-size: 80%;
771 #page-tag-coursetags_more .coursetag_more_link {
772     font-size: 80%;
774 #tag-description,
775 #tag-blogs {
776     width: 100%;
778 #tag-management-box {
779     margin-bottom: 10px;
780     line-height: 20px;
782 #tag-user-table {
783     padding: 3px;
784     clear: both;
785     width: 100%;
787 #tag-user-table {
788     .clearfix
790 img.user-image {
791     height: 100px;
792     width: 100px;
794 #small-tag-cloud-box {
795     width: 300px;
796     margin: 0 auto;
798 #big-tag-cloud-box {
799     width: 600px;
800     margin: 0 auto;
801     float: none;
803 ul#tag-cloud-list {
804     list-style: none;
805     padding: 5px;
806     margin: 0;
808 ul#tag-cloud-list li {
809     margin: 0;
810     display: inline;
811     list-style-type: none;
813 #tag-search-box {
814     text-align: center;
815     margin: 10px auto;
817 #tag-search-results-container {
818     padding: 0;
819     width: 100%;
821 #tag-search-results {
822     padding: 0;
823     margin: 15px 20% 0 20%;
824     float: left;
825     width: 60%;
826     display: block;
828 #tag-search-results li {
829     width: 30%;
830     float: left;
831     padding-left: 1%;
832     text-align: left;
833     line-height: 20px;
834     padding-right: 1%;
835     list-style: none;
837 span.flagged-tag,
838 span.flagged-tag a {
839     color: @errorText;
841 table#tag-management-list {
842     text-align: left;
843     width: 100%;
845 table#tag-management-list td,
846 table#tag-management-list th {
847     vertical-align: middle;
848     text-align: left;
849     padding: 4px;
851 .tag-management-form {
852     text-align: center;
854 #relatedtags-autocomplete-container {
855     margin-left: auto;
856     margin-right: auto;
857     min-height: 4.6em;
858     width: 100%;
860 #relatedtags-autocomplete {
861     position: relative;
862     display: block;
863     width: 60%;
864     margin-left: auto;
865     margin-right: auto;
867 #relatedtags-autocomplete .yui-ac-content {
868     position: absolute;
869     width: 420px;
870     left: 20%;
871     border: 1px solid @dropdownBorder;
872     background: @dropdownBackground;
873     overflow: hidden;
874     z-index: 9050;
876 #relatedtags-autocomplete .ysearchquery {
877     position: absolute;
878     right: 10px;
879     color: #808080;
880     z-index: 10;
882 #relatedtags-autocomplete .yui-ac-shadow {
883     position: absolute;
884     margin: .3em;
885     width: 100%;
886     background: #a0a0a0;
887     z-index: 9049;
889 #relatedtags-autocomplete ul {
890     padding: 0;
891     width: 100%;
892     margin: 0;
893     list-style-type: none;
895 #relatedtags-autocomplete li {
896     padding: 0 5px;
897     cursor: default;
898     white-space: nowrap;
900 #relatedtags-autocomplete li.yui-ac-highlight{
901     background: @dropdownLinkBackgroundHover;
902     color: @dropdownLinkColorHover;
904 h2.tag-heading,
905 div#tag-description,
906 div#tag-blogs,
907 body.tag .managelink {
908     padding: 5px;
910 .tag_cloud .s20 {
911     font-size: 1.5em;
912     font-weight: bold;
914 .tag_cloud .s19 {
915     font-size: 1.5em;
917 .tag_cloud .s18 {
918     font-size: 1.4em;
919     font-weight: bold;
921 .tag_cloud .s17 {
922     font-size: 1.4em;
924 .tag_cloud .s16 {
925     font-size: 1.3em;
926     font-weight: bold;
928 .tag_cloud .s15 {
929     font-size: 1.3em;
931 .tag_cloud .s14 {
932     font-size: 1.2em;
933     font-weight: bold;
935 .tag_cloud .s13 {
936     font-size: 1.2em;
938 .tag_cloud .s12,
939 .tag_cloud .s11 {
940     font-size: 1.1em;
941     font-weight: bold;
943 .tag_cloud .s10,
944 .tag_cloud .s9 {
945     font-size: 1.1em;
947 .tag_cloud .s8,
948 .tag_cloud .s7 {
949     font-size: 1em;
950     font-weight: bold;
952 .tag_cloud .s6,
953 .tag_cloud .s5 {
954     font-size: 1em;
956 .tag_cloud .s4,
957 .tag_cloud .s3 {
958     font-size: 0.9em;
959     font-weight: bold;
961 .tag_cloud .s2,
962 .tag_cloud .s1 {
963     font-size: 0.9em;
965 .tag_cloud .s0 {
966     font-size: 0.8em;
968 /**
969 * Web Service
970 */
971 #webservice-doc-generator td {
972     text-align: left;
973     border: 0 solid black;
975 /**
976 * Smart Select Element
977 */
978 .smartselect {
979     position: absolute;
981 .smartselect .smartselect_mask {
982     background-color: #fff;
984 .smartselect ul  {
985     padding: 0;
986     margin: 0;
988 .smartselect ul li {
989     list-style: none;
991 .smartselect .smartselect_menu {
992     margin-right: 5px;
994 .safari .smartselect .smartselect_menu {
995     margin-left: 2px;
997 .smartselect .smartselect_menu,
998 .smartselect .smartselect_submenu {
999     border: 1px solid #000;
1000     background-color: #FFF;
1001     display: none;
1003 .smartselect .smartselect_menu.visible,
1004 .smartselect .smartselect_submenu.visible {
1005     display: block;
1007 .smartselect .smartselect_menu_content ul li {
1008     position: relative;
1009     padding: 2px 5px;
1011 .smartselect .smartselect_menu_content ul li a {
1012     color: #333;
1013     text-decoration: none;
1015 .smartselect .smartselect_menu_content ul li a.selectable {
1016     color: inherit;
1018 .smartselect .smartselect_submenuitem {
1019     background-image: url([[pix:moodle|t/collapsed]]);
1020     background-repeat: no-repeat;
1021     background-position: 100%;
1023 /** Spanning mode */
1024 .smartselect.spanningmenu .smartselect_submenu {
1025     position: absolute;
1026     top: -1px;
1027     left: 100%;
1029 .smartselect.spanningmenu .smartselect_submenu a {
1030     white-space: nowrap;
1031     padding-right: 16px;
1033 .smartselect.spanningmenu .smartselect_menu_content ul li a.selectable:hover {
1034     text-decoration: underline;
1036 /** Compact mode */
1037 .smartselect.compactmenu .smartselect_submenu {
1038     position: relative;
1039     margin: 2px -3px;
1040     margin-left: 10px;
1041     display: none;
1042     border-width: 0;
1043     z-index: 1010;
1045 .smartselect.compactmenu .smartselect_submenu.visible {
1046     display: block;
1048 .smartselect.compactmenu .smartselect_menu {
1049     z-index: 1000;
1050     overflow: hidden;
1052 .smartselect.compactmenu .smartselect_submenu .smartselect_submenu {
1053     z-index: 1020;
1055 .smartselect.compactmenu .smartselect_submenuitem:hover > .smartselect_menuitem_label {
1056     font-weight: bold;
1058 /**
1059 * Registration
1060 */
1061 #page-admin-registration-register .registration_textfield {
1062     width: 300px;
1064 /**
1065 * Enrol
1066 */
1067 .userenrolment {
1068     width: 100%;
1069     border-collapse: collapse;
1071 .userenrolment tr {
1072     vertical-align:top;
1074 .userenrolment td {
1075     padding: 0;
1076     height: 41px;
1078 .userenrolment .subfield {
1079     margin-right: 5px;
1081 .userenrolment .col_userdetails .subfield_picture {
1082     float: left;
1084 .userenrolment .col_lastseen {
1085     width: 150px;
1087 .userenrolment .col_role {
1088     width: 262px;
1090 .userenrolment .col_role .roles,
1091 .userenrolment .col_group .groups {
1092     margin-right: 30px;
1094 .userenrolment .col_role .role,
1095 .userenrolment .col_group .group {
1096     float: left;
1097     padding: 3px;
1098     margin: 3px;
1099     white-space: nowrap;
1101 .userenrolment .col_role .role a,
1102 .userenrolment .col_group .group a {
1103     margin-left: 3px;
1104     cursor: pointer;
1106 .userenrolment .col_role .addrole,
1107 .userenrolment .col_group .addgroup {
1108     float: right;
1109     padding: 3px;
1110     margin: 3px;
1111     > *:hover {
1112         border-bottom:1px solid #666;
1113     }
1115 .userenrolment .col_role .addrole img,
1116 .userenrolment .col_group .addgroup img {
1117     vertical-align: baseline;
1120 .dir-rtl .userenrolment .col_role .role {
1121     float: right;
1124 .userenrolment .hasAllRoles .col_role .addrole {
1125     display: none;
1128 .userenrolment .col_enrol .enrolment {
1129     float: left;
1130     padding: 3px;
1131     margin: 3px;
1133 .userenrolment .col_enrol .enrolment a {
1134     float: right;
1135     margin-left: 3px;
1137 #page-enrol-users {
1138     .enrol_user_buttons {
1139         float: right;
1140         .enrolusersbutton {
1141             display: inline;
1142             div,
1143             form {
1144                 display: inline;
1145                 margin-right: 0;
1146             }
1147         }
1148     }
1149     #filterform {
1150         .well;
1151         .well-small;
1152         display: inline-block;
1153         .fitem {
1154             display: inline-block;
1155             line-height: @baseLineHeight * 2;
1156             margin-right: .3em;
1157             white-space: nowrap;
1158             label {
1159                 display: inline;
1160                 line-height: @baseLineHeight;
1161                 padding-right: .3em;
1162             }
1163             :before,
1164             :after {
1165                 display: inline;
1166             }
1167         }
1168         div,
1169         fieldset {
1170             display: inline;
1171             float: none;
1172             clear: none;
1173             width: auto;
1174             margin: 0;
1175         }
1176         select,
1177         .ftext input {
1178             width: 7em;
1179         }
1180         input,
1181         select {
1182             margin-bottom: 0;
1183         }
1184     }
1185   .user-enroller-panel .uep-search-results .user .details {
1186     width: 237px;
1187   }
1188   .user-enroller-panel .uep-search-results .cohort .details {
1189     width: 237px;
1190   }
1192 .dir-rtl {
1193     &#page-enrol-users {
1194         .col_userdetails {
1195             .subfield_picture {
1196                 float: right;
1197             }
1198         }
1199         .enrol_user_buttons {
1200             float: left;
1201             .enrolusersbutton {
1202                 margin-left: 0;
1203                 margin-right: 1em;
1204                 div {
1205                     margin-left: 0;
1206                 }
1207             }
1208         }
1209         #filterform {
1210             .fitem {
1211                 margin-right: 0;
1212                 margin-left: .3em;
1213                 label {
1214                     padding-right: 0;
1215                     padding-left: .3em;
1216                 }
1217             }
1218         }
1219     }
1222 /**
1223 * Overide for RTL layout
1224 **/
1225 .dir-rtl .headermain {
1226     float: right;
1228 .dir-rtl .headermenu {
1229     float: left;
1231 .dir-rtl .loginbox .loginform .form-label {
1232     float: right;
1233     text-align: left;
1235 .dir-rtl .loginbox .loginform .form-input {
1236     text-align: right;
1237     margin-right: 1%;
1239 .dir-rtl .yui3-menu-hidden {
1240     left: 0;
1242 #page-admin-roles-define.dir-rtl #rolesform .felement {
1243     margin-right: 180px;
1245 #page-message-edit.dir-rtl table.generaltable th.c0 {
1246     text-align: right;
1248 .corelightbox {
1249     background-color: #CCC;
1250     position: absolute;
1251     top: 0;
1252     left: 0;
1253     width: 100%;
1254     height: 100%;
1255     text-align: center;
1257 .corelightbox img {
1258     position: fixed;
1259     top: 50%;
1260     left: 50%;
1263 .mod-indent-outer {
1264     display: table;
1266 .mod-indent {
1267     display: table-cell;
1269 .label .mod-indent {
1270   float:left;
1271   padding-top:20px
1274 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1275 @mod-indent-size: 30px;
1276 @mod-indent-levels: 16;
1277 .mod-indent-generate(@n, @i: 1) when (@i =< @n) {
1278     .mod-indent-@{i} {
1279         width: (@i * @mod-indent-size);
1280     }
1281     .mod-indent-generate(@n, (@i + 1));
1283 .mod-indent-generate(@n, @i: 1) when (@i = @n) {
1284     .mod-indent-huge {
1285         width: (@i * @mod-indent-size);
1286     }
1288 .mod-indent-generate(@mod-indent-levels);
1290 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1291 .resourcecontent .mediaplugin_mp3 object {
1292     height: 25px;
1293     width: 600px
1295 .resourcecontent audio.mediaplugin_html5audio {
1296     width: 600px
1298 /** Large resource images should avoid hidden overflow **/
1299 .resourceimage {
1300     max-width: 100%;
1302 /* Audio player size in 'inline' mode (can only change width, as above) */
1303 .mediaplugin_mp3 object {
1304     height: 15px;
1305     width: 300px
1307 audio.mediaplugin_html5audio {
1308     width: 300px
1310 /* TinyMCE moodle media preview frame should not have padding */
1311 .core_media_preview.pagelayout-embedded #content {
1312     padding: 0;
1314 .core_media_preview.pagelayout-embedded #maincontent {
1315     height: 0;
1317 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1318     padding: 0;
1319     margin: 0;
1320     min-width: 0;
1321     background: none;
1323 /** Fix YUI 2 Treeview for Right to left languages **/
1324 .dir-rtl .ygtvtn,
1325 .dir-rtl .ygtvtm,
1326 .dir-rtl .ygtvtmh,
1327 .dir-rtl .ygtvtmhh,
1328 .dir-rtl .ygtvtp,
1329 .dir-rtl .ygtvtph,
1330 .dir-rtl .ygtvtphh,
1331 .dir-rtl .ygtvln,
1332 .dir-rtl .ygtvlm,
1333 .dir-rtl .ygtvlmh,
1334 .dir-rtl .ygtvlmhh,
1335 .dir-rtl .ygtvlp,
1336 .dir-rtl .ygtvlph,
1337 .dir-rtl .ygtvlphh,
1338 .dir-rtl .ygtvdepthcell,
1339 .dir-rtl .ygtvok,
1340 .dir-rtl .ygtvok:hover,
1341 .dir-rtl .ygtvcancel,
1342 .dir-rtl .ygtvcancel:hover {
1343     width: 18px;
1344     height: 22px;
1345     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1346     background-repeat: no-repeat;
1347     cursor: pointer;
1349 .dir-rtl .ygtvtn {
1350     background-position: 0 -5600px;
1352 .dir-rtl .ygtvtm {
1353     background-position: 0 -4000px;
1355 .dir-rtl .ygtvtmh,
1356 .dir-rtl .ygtvtmhh {
1357     background-position: 0 -4800px;
1359 .dir-rtl .ygtvtp {
1360     background-position: 0 -6400px;
1362 .dir-rtl .ygtvtph,
1363 .dir-rtl .ygtvtphh {
1364     background-position: 0 -7200px;
1366 .dir-rtl .ygtvln {
1367     background-position: 0 -1600px;
1369 .dir-rtl .ygtvlm {
1370     background-position: 0 0;
1372 .dir-rtl .ygtvlmh,
1373 .dir-rtl .ygtvlmhh {
1374     background-position: 0 -800px;
1376 .dir-rtl .ygtvlp {
1377     background-position: 0 -2400px;
1379 .dir-rtl .ygtvlph,
1380 .dir-rtl .ygtvlphh {
1381     background-position: 0 -3200px
1383 .dir-rtl .ygtvdepthcell {
1384     background-position: 0 -8000px;
1386 .dir-rtl .ygtvok {
1387     background-position: 0 -8800px;
1389 .dir-rtl .ygtvok:hover {
1390     background-position: 0 -8844px;
1392 .dir-rtl .ygtvcancel {
1393     background-position: 0 -8822px;
1395 .dir-rtl .ygtvcancel:hover {
1396     background-position: 0 -8866px;
1398 .dir-rtl.yui-skin-sam .yui-panel .hd {
1399     text-align: right;
1401 .dir-rtl .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
1402     text-align: right;
1404 /** Fix TinyMCE editor right to left **/
1405 .dir-rtl .clearlooks2.ie9 .mceAlert .mceMiddle span,.dir-rtl .clearlooks2 .mceConfirm .mceMiddle span {
1406     top: 44px;
1408 .dir-rtl .o2k7Skin table,
1409 .dir-rtl .o2k7Skin tbody,
1410 .dir-rtl .o2k7Skin a,
1411 .dir-rtl .o2k7Skin img,
1412 .dir-rtl .o2k7Skin tr,
1413 .dir-rtl .o2k7Skin div,
1414 .dir-rtl .o2k7Skin td,
1415 .dir-rtl .o2k7Skin iframe,
1416 .dir-rtl .o2k7Skin span,
1417 .dir-rtl .o2k7Skin *,
1418 .dir-rtl .o2k7Skin .mceText,
1419 .dir-rtl .o2k7Skin .mceListBox .mceText {
1420     text-align: right;
1422 .path-rating .ratingtable {
1423     width: 100%;
1424     margin-bottom: 1em;
1426 .path-rating .ratingtable th.rating {
1427     width: 100%;
1429 .path-rating .ratingtable td.rating,
1430 .path-rating .ratingtable td.time {
1431     white-space: nowrap;
1432     text-align: center;
1434 .initialbar {
1435     a, strong {
1436         padding-left: 3px;
1437         padding-right: 3px;
1438     }
1440 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1441 .moodle-dialogue-base .moodle-dialogue-lightbox {
1442     background-color: #AAA;
1444 .moodle-dialogue-base .hidden,
1445 .moodle-dialogue-base .moodle-dialogue-hidden {
1446     display: none;
1448 .no-scrolling {
1449     overflow: hidden;
1451 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1452     left: 0px;
1453     top: 0px;
1454     right: 0px;
1455     bottom: -50px;
1456     position: fixed;
1458 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1459     overflow: auto;
1461 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1462     width: 28px;
1463     height: 16px;
1464     background-size: 100%;
1466 .moodle-dialogue-base .moodle-dialogue {
1467     padding: 0;
1468     margin: 0;
1469     background: none;
1470     border: none;
1471     z-index: 600;
1472     outline: #000 dotted 0;
1474 .moodle-dialogue-base .moodle-dialogue-wrap {
1475     margin-top: -3px;
1476     margin-left: -3px;
1477     background-color: #fff;
1478     border: 1px solid #ccc;
1479     .border-radius(10px);
1480     .box-shadow(5px 5px 20px 0 #666);
1482 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd,
1483 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1484     margin: 0;
1485     padding: 5px;
1486     font-size: 12px;
1487     font-weight: normal;
1488     letter-spacing: 1px;
1489     color: #333;
1490     text-align: center;
1491     text-shadow: 1px 1px 1px #fff;
1492     .border-radius(10px 10px 0 0);
1493     border-bottom: 1px solid #bbb;
1494     background: #ccc;
1495     #gradient > .vertical(#fff, #ccc);
1496     filter: 0;
1498 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1499     margin: 0;
1500     padding: 0;
1501     display: inline;
1502     font-size: 100%;
1503     font-weight: bold;
1505 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1506     padding: 5px;
1508 .moodle-dialogue-base .closebutton {
1509     width: 25px;
1510     height: 15px;
1511     float: right;
1512     vertical-align: middle;
1513     display: inline-block;
1514     cursor: pointer;
1515     padding: 0;
1516     background-image: url([[pix:theme|sprite]]);
1517     background-repeat: no-repeat;
1518     border-style: none;
1520 .dir-rtl .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1521     left: 0;
1522     right: auto;
1524 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1525     padding: 1em;
1526     line-height: 2em;
1527     color: #555;
1528     font-size: 12px;
1530 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-content {
1531     padding: 0;
1532     background: #FFF;
1535 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd {
1536     padding: 10px;
1537     font-size: 16px;
1540 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1541     overflow: auto;
1542     position: absolute;
1543     top: 0px;
1544     bottom: 50px;
1545     left: 0px;
1546     right: 0px;
1547     margin: 0px;
1548     border: 0px;
1550 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd,
1551 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-wrap {
1552     border-radius: 0px;
1554 .moodle-dialogue-confirm .confirmation-dialogue {
1555     text-align: center;
1557 .moodle-dialogue-confirm .confirmation-dialogue input {
1558     text-align: center;
1560 .moodle-dialogue-exception .moodle-exception-message {
1561     text-align: center
1563 .moodle-dialogue-exception .moodle-exception-param label {
1564     font-weight: bold;
1566 .moodle-dialogue-exception .param-stacktrace label {
1567     background-color: #EEE;
1568     border: 1px solid #ccc;
1569     border-bottom-width: 0;
1571 .moodle-dialogue-exception .param-stacktrace pre {
1572     border: 1px solid #ccc;
1573     background-color: #fff;
1575 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1576     color: navy;
1577     font-size: @fontSizeSmall;
1579 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1580     color: @errorText;
1581     font-size: @fontSizeSmall;
1583 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1584     color: #333;
1585     font-size: 90%;
1586     border-bottom: 1px solid #eee;
1588 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1589     padding: 0;
1590     margin: 0.7em 1em;
1591     text-align: right;
1592     background-color: #FFF;
1593     font-size: 12px;
1595 .moodle-dialogue-confirm .confirmation-message {
1596     margin: 0.5em 1em;
1598 .moodle-dialogue-confirm .confirmation-dialogue input {
1599     min-width: 80px
1601 .moodle-dialogue-exception .moodle-exception-message {
1602     margin: 1em;
1604 .moodle-dialogue-exception .moodle-exception-param {
1605     margin-bottom: 0.5em;
1607 .moodle-dialogue-exception .moodle-exception-param label {
1608     width: 150px;
1610 .moodle-dialogue-exception .param-stacktrace label {
1611     display: block;
1612     margin: 0;
1613     padding: 4px 1em;
1615 .moodle-dialogue-exception .param-stacktrace pre {
1616     display: block;
1617     height: 200px;
1618     overflow: auto;
1620 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1621     display: inline-block;
1622     margin: 4px 0;
1624 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1625     display: inline-block;
1626     width: 50px;
1627     margin: 4px 1em;
1629 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1630     padding-left: 25px;
1631     margin-bottom: 4px;
1632     padding-bottom: 4px;
1634 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1635     .opacity(75);
1636     width: 100%;
1637     height: 100%;
1638     top: 0;
1639     left: 0;
1640     background-color: white;
1641     text-align: center;
1642     padding: 10% 0;
1644 /* Apply a default max-height on tooltip text */
1645 .moodle-dialogue .tooltiptext {
1646     max-height: 300px;
1649 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1650     z-index: 3001;
1652     .moodle-dialogue-bd {
1653         overflow: auto;
1654     }
1657 /* Question Bank - Question Chooser "Close" button */
1658 #page-question-edit.dir-rtl a.container-close {
1659     right: auto;
1660     left: 6px;
1662 /**
1663  * Chooser Dialogues (moodle-core-chooserdialogue)
1664  *
1665  * This CSS belong to the chooser dialogue which should work both with, and
1666  * without javascript enabled
1667  */
1668 /* Hide the dialog and it's title */
1669 .chooserdialoguebody,
1670 .choosertitle {
1671     display: none;
1673 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1674     margin: 0;
1676 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1677     padding: 0;
1678     background: #F2F2F2;
1679     .border-bottom-radius(10px);
1681 /* Center the submit buttons within the area */
1682 .choosercontainer #chooseform .submitbuttons {
1683     padding: 0.7em 0;
1684     text-align: center;
1686 /* Fixed for safari browser on iPhone4S with ios7.*/
1687 @media (max-height: 639px) {
1688     .ios.safari .choosercontainer #chooseform .submitbuttons {
1689         padding: 45px 0;
1690     }
1692 .choosercontainer #chooseform .submitbuttons input {
1693     min-width: 100px;
1694     margin: 0 0.5em;
1696 /* Various settings for the options area */
1697 .choosercontainer #chooseform .options {
1698     position: relative;
1699     border-bottom: 1px solid #BBBBBB;
1701 /* Only set these options if we're showing the js container */
1702 .jschooser .choosercontainer #chooseform .alloptions {
1703     overflow-x: hidden;
1704     overflow-y: auto;
1705     max-width: 20.3em;
1706     .box-shadow(inset 0 0 30px 0px #ccc);
1708 .dir-rtl.jschooser .choosercontainer #chooseform .alloptions {
1709     max-width: 18.3em;
1711 /* Settings for option rows and option subtypes */
1712 .choosercontainer #chooseform .moduletypetitle,
1713 .choosercontainer #chooseform .option,
1714 .choosercontainer #chooseform .nonoption {
1715     margin-bottom: 0;
1716     padding: 0 1.6em 0 1.6em;
1718 .choosercontainer #chooseform .moduletypetitle {
1719     text-transform: uppercase;
1720     padding-top: 1.2em;
1721     padding-bottom: 0.4em;
1723 .choosercontainer #chooseform .option .typename,
1724 .choosercontainer #chooseform .option span.modicon img.icon,
1725 .choosercontainer #chooseform .nonoption .typename,
1726 .choosercontainer #chooseform .nonoption span.modicon img.icon {
1727     padding: 0 0 0 0.5em;
1729 .dir-rtl .choosercontainer #chooseform .option .typename,
1730 .dir-rtl .choosercontainer #chooseform .option span.modicon img.icon,
1731 .dir-rtl .choosercontainer #chooseform .nonoption .typename,
1732 .dir-rtl .choosercontainer #chooseform .nonoption span.modicon img.icon {
1733     padding: 0 0.5em 0 0;
1736 .chooserdialogue-course-modchooser .choosercontainer #chooseform .option span.modicon img.icon,
1737 .chooserdialogue-course-modchooser .choosercontainer #chooseform .nonoption span.modicon img.icon {
1738     height: 24px;
1739     width: 24px;
1741 .choosercontainer #chooseform .option input[type=radio],
1742 .choosercontainer #chooseform .option span.typename,
1743 .choosercontainer #chooseform .option span.modicon {
1744     vertical-align: middle;
1746 .choosercontainer #chooseform .option label {
1747     display: block;
1748     padding: 0.3em 0 0.1em 0;
1749     border-bottom: 1px solid #FFFFFF;
1751 .choosercontainer #chooseform .nonoption {
1752     padding-left: 2.7em;
1753     padding-top: 0.3em;
1754     padding-bottom: 0.1em;
1756 .dir-rtl .choosercontainer #chooseform .nonoption {
1757     padding-right: 2.7em;
1758     padding-left: 0;
1760 .choosercontainer #chooseform .subtype {
1761     margin-bottom: 0;
1762     padding: 0 1.6em 0 3.2em;
1764 .dir-rtl .choosercontainer #chooseform .subtype {
1765     padding: 0 3.2em 0 1.6em;
1767 .choosercontainer #chooseform .subtype .typename {
1768     margin: 0 0 0 0.2em;
1770 .dir-rtl .choosercontainer #chooseform .subtype .typename {
1771     margin: 0 0.2em 0 0;
1773 /* The instruction/help area */
1774 .jschooser .choosercontainer #chooseform .instruction,
1775 .jschooser .choosercontainer #chooseform .typesummary {
1776    display: none;
1777     position: absolute;
1778     top: 0;
1779     right: 0;
1780     bottom: 0;
1781     left: 20.3em;
1782     margin: 0;
1783     padding: 1.6em;
1784     background-color: #fff;
1785     overflow-x: hidden;
1786     overflow-y: auto;
1787     line-height: 2em;
1789 .dir-rtl.jschooser .choosercontainer #chooseform .instruction,
1790 .dir-rtl.jschooser .choosercontainer #chooseform .typesummary {
1791     left: 0;
1792     right: 18.5em;
1793     border-right: 1px solid grey;
1795 /* Selected option settings */
1796 .jschooser .choosercontainer #chooseform .instruction,
1797 .choosercontainer #chooseform .selected .typesummary {
1798     display: block;
1800 .choosercontainer #chooseform .selected {
1801     background-color: #fff;
1802     .box-shadow(0px 0 10px 0 #ccc);
1804 .section-modchooser-link img.smallicon {
1805     padding: 3px;
1807 /* Form element: listing */
1808 .formlistingradio {
1809     padding-bottom: 25px;
1810     padding-right: 10px;
1812 .formlistinginputradio {
1813     float: left;
1815 .formlistingmain {
1816     min-height: 225px;
1818 .formlisting {
1819     position: relative;
1820     margin: 15px 0;
1821     padding: 1px 19px 14px;
1822     background-color: white;
1823     border: 1px solid #DDD;
1824     .border-radius(4px);
1826 .formlistingmore {
1827     position: absolute;
1828     cursor: pointer;
1829     bottom: -1px;
1830     right: -1px;
1831     padding: 3px 7px;
1832     font-size: 12px;
1833     font-weight: bold;
1834     background-color: whiteSmoke;
1835     border: 1px solid #ddd;
1836     color: #9DA0A4;
1837     .border-radius(4px 0 4px 0);
1839 .formlistingall {
1840     margin: 15px 0;
1841     padding: 0;
1842     .border-radius(4px);
1844 .formlistingrow {
1845     cursor: pointer;
1846     border-bottom: 1px solid;
1847     border-color: #E1E1E8;
1848     border-left: 1px solid #E1E1E8;
1849     border-right: 1px solid #E1E1E8;
1850     background-color: #F7F7F9;
1851     .border-radius(0 0 4px 4px);
1852     padding: 6px;
1853     top: 50%;
1854     left: 50%;
1855     min-height: 34px;
1856     float: left;
1857     width: 150px;
1859 body.jsenabled .formlistingradio {
1860     display: none;
1862 body.jsenabled .formlisting {
1863     display: block;
1866 /* Badges styles */
1867 table.collection {
1868     .table;
1869     .table-bordered;
1870     .table-striped;
1872 table.collection .name {
1873     text-align: left;
1874     vertical-align: middle;
1876 table.collection .awards {
1877     width: 10%;
1878     text-align: center;
1879     vertical-align: middle;
1881 table.collection .criteria {
1882     width: 40%;
1883     text-align: left;
1884     vertical-align: top;
1886 table.collection .badgeimage,
1887 table.collection .status {
1888     width: 15%;
1889     text-align: center;
1890     vertical-align: middle;
1892 table.collection .description {
1893     width: 25%;
1894     text-align: left;
1896 table.collection .actions {
1897     width: 11em;
1898     text-align: center;
1899     vertical-align: middle;
1902 a.criteria-action {
1903     padding: 0px 3px;
1904     float: right;
1906 div.criteria-description {
1907     padding: 10px 15px;
1908     margin: 5px 0px;
1909     background: none repeat scroll 0 0 #f9f9f9;
1910     border: 1px solid #EEE;
1912 ul.badges {
1913     margin: 0;
1914     list-style: none;
1916 .badges li {
1917     position: relative;
1918     display: inline-block;
1919     padding-bottom: 2em;
1920     text-align: center;
1921     vertical-align: top;
1922     width: 150px;
1924 .badges li .badge-name {
1925     display: block;
1926     padding: 5px;
1928 .badges li > img {
1929     position: absolute;
1931 .badges li .badge-image {
1932     width: 100px;
1933     height: 100px;
1934     left: 10px;
1935     top: 0px;
1936     z-index: 1;
1938 .badges li .badge-actions {
1939     position: relative;
1941 .badges li .expireimage {
1942     width: 100px;
1943     height: 100px;
1944     left: 25px;
1945     top: 0px;
1946     position: absolute;
1947     z-index: 10;
1948     opacity: 0.85;
1951 #badge-image {
1952     background-color: transparent;
1953     padding: 0;
1954     position: relative;
1955     min-width: 100px;
1956     width: 20%;
1957     display: inline-block;
1958     vertical-align: top;
1959     margin-top: 17px;
1961     .expireimage {
1962         width: 100px;
1963         height: 100px;
1964         left: 0px;
1965         top: 0px;
1966         .opacity(85);
1967         position: absolute;
1968         z-index:10;
1969     }
1971     .singlebutton {
1972         padding-top: 5px;
1974         input {
1975             margin-left: 0px;
1976         }
1977     }
1979 .dir-rtl #badge-image {
1980     float: right;
1982     .expireimage {
1983         left: 41px;
1984     }
1986 #badge-details {
1987     display: inline-block;
1988     width: 79%;
1991 #badge-overview dl,
1992 #badge-details dl {
1993     margin: 0;
1995     dt,
1996     dd {
1997         vertical-align: top;
1998         padding: 3px 0;
1999     }
2000     dt {
2001         clear: both;
2002         display: inline-block;
2003         width: 20%;
2004         min-width: 100px;
2005     }
2006     dd {
2007         display: inline-block;
2008         width: 79%;
2009         margin-left: 1%;
2010     }
2013 .badge-profile {
2014     vertical-align: top;
2016 .connected {
2017     color: @successText;
2019 .notconnected {
2020     color: @errorText;
2022 .connecting {
2023     color: @warningText;
2025 #page-badges-award .recipienttable tr td {
2026     vertical-align: top;
2028 #page-badges-award .recipienttable tr td.actions .actionbutton {
2029     margin: 0.3em 0;
2030     padding: 0.5em 0;
2031     width: 100%;
2033 #page-badges-award .recipienttable tr td.existing,
2034 #page-badges-award .recipienttable tr td.potential {
2035     width: 42%;
2038 #issued-badge-table .activatebadge {
2039     display: inline-block;
2041 .statusbox.active {
2042     background-color: @successBackground;
2044 .statusbox.inactive {
2045     background-color: @warningBackground;
2047 .statusbox {
2048     text-align: center;
2049     margin-bottom: 5px;
2050     padding: 5px;
2052 .statusbox .activatebadge {
2053     display: inline-block;
2055 .statusbox .activatebadge input[type=submit]{
2056     margin: 3px;
2058 .activatebadge {
2059     margin: 0px;
2060     text-align: left;
2061     vertical-align: middle;
2063 .dir-rtl .activatebadge {
2064     text-align: right;
2066 img#persona_signin {
2067     cursor: pointer;
2069 .addcourse {
2070     float: right;
2072 .invisiblefieldset {
2073     display: inline;
2074     margin: 0;
2075     padding: 0;
2076     border-width: 0;
2078 .breadcrumb-nav {
2079     float: left;
2080     margin-bottom: 10px;
2082 .dir-rtl .breadcrumb-nav {
2083     float: right;
2085 .breadcrumb-button .singlebutton div {
2086     margin-right: 0;
2088 .breadcrumb-nav .breadcrumb {
2089     margin: 0;
2092 /** Header-bar styles **/
2093 .header-mc-heady-head {
2094     // We need to be explicit about the height of the header.
2095     @pageHeaderHeight: 140px;
2096     // margin: 0;
2097     // Change height of the user header to allow for an image.
2098     &.header-bar-user {
2099         // Set up for vertical alignment.
2100         height: @pageHeaderHeight;
2101         // line-height: @pageHeaderHeight;
2102     }
2105 .page-header-headings {
2106     position: relative;
2107     top: -90px;
2108     left: 110px;
2111 .dir-rtl .page-header-headings {
2112     position: relative;
2113     top: -90px;
2114     right: 110px;
2117 .btn-group {
2118     &.header-button-group{
2119         position: relative;
2120         top: -121px;
2121         right: 105px;
2122         float: right;
2123     }
2126 /** Action menu component styles **/
2127 .moodle-actionmenu,
2128 .moodle-actionmenu > ul,
2129 .moodle-actionmenu > ul > li {
2130     display: inline-block;
2133 .moodle-actionmenu ul {
2134     padding: 0;
2135     margin: 0;
2136     list-style-type: none;
2139 .moodle-actionmenu .toggle-display,
2140 .moodle-actionmenu .menu-action-text {
2141     display: none; /** Hidden by default, display none so that we don't take up space. **/
2144 .jsenabled {
2145     .moodle-actionmenu[data-enhance] {
2146         display: block;
2147         .menu {
2148             display:none;
2149         }
2150         .toggle-display {
2151             display: inline; /** JS is enabled, we'll be using it so return display to normal **/
2152             .opacity(50);
2153         }
2154         .toggle-display.textmenu {
2155             display: block;
2156             margin-left: 4px;
2157             padding-left: 4px;
2158             padding-right: 4px;
2160             .iconsmall,
2161             .smallicon {
2162                 margin: 4px 4px 4px 0px;
2163                 padding: 8px 4px 0px 2px;
2164                 vertical-align: text-bottom;
2165             }
2167             .caret {
2168                 margin-top: 8px;
2169                 margin-left: 2px;
2170                 border-top-color: @navbarLinkColor;
2171                 &:hover,
2172                 &:active {
2173                     border-top-color: @navbarLinkColorActive;
2174                 }
2175             }
2176         }
2177     }
2178     .moodle-actionmenu[data-enhanced] {
2179         .toggle-display {
2180             .opacity(100);
2181         }
2182         .menu-action-text  {
2183             display:inline;
2184         }
2185     }
2187     &.dir-rtl {
2188         .moodle-actionmenu[data-enhance] {
2189             .toggle-display.textmenu {
2190                 margin-left: initial;
2191                 margin-right: 4px;
2193                 .caret {
2194                     margin-left: initial;
2195                     margin-right: 2px;
2196                 }
2197             }
2198         }
2199     }
2202 .moodle-actionmenu[data-enhanced].show  {
2204     position: relative;
2206     .menu {
2208         display:block;
2209         position: absolute;
2210         text-align: left;
2211         background-color: @dropdownBackground;
2212         border: 1px solid @dropdownBorder;
2213         z-index:1000;
2214         .border-radius(5px);
2215         .box-shadow(5px 5px 20px 0 #666);
2217         a {
2218             display: block;
2219             color: @dropdownLinkColor;
2220             padding:2px 1em 2px 28px;
2221             &:hover {
2222                 color: @dropdownLinkColorHover;
2223                 background-color: @dropdownLinkBackgroundHover;
2224             }
2225             &:first-child {
2226                 .border-top-radius(4px);
2227             }
2228             &:last-child {
2229                 .border-bottom-radius(4px);
2230             }
2231         }
2232         a.hidden {
2233             display:none;
2234         }
2235         img {
2236             vertical-align: middle;
2237         }
2238         .iconsmall,
2239         .smallicon {
2240             margin: 4px 4px 4px -24px;
2241             padding: 4px;
2242         }
2243         > li {
2244             display:block;
2245         }
2247         /** bottom left of button **/
2248         &.align-tl-bl {top: 100%;left:0;margin-top: 4px;}
2249         &.align-tr-bl {top: 100%;right: 100%;}
2250         &.align-bl-bl {bottom: 100%;left:0;}
2251         &.align-br-bl {bottom: 100%;right: 100%;}
2252         /** bottom right of button **/
2253         &.align-tl-br {top: 100%;left:100%;}
2254         &.align-tr-br {top: 100%;right: 0;margin-top: 4px;}
2255         &.align-bl-br {bottom: 100%;left:100%;}
2256         &.align-br-br {bottom: 100%;right: 0;}
2257         /** top left of button **/
2258         &.align-tl-tl {top: 0;left:0;}
2259         &.align-tr-tl {top: 0;right: 100%;margin-right: 4px;}
2260         &.align-bl-tl {bottom: 100%;left:0;margin-bottom: 4px;}
2261         &.align-br-tl {bottom: 100%;right: 100%;}
2262         /** top right of button **/
2263         &.align-tl-tr {top: 0;left:100%;margin-left: 4px;}
2264         &.align-tr-tr {top: 0;right: 0;}
2265         &.align-bl-tr {bottom: 100%;left:100%;}
2266         &.align-br-tr {bottom: 100%;right: 0;margin-bottom: 4px;}
2267     }
2268     /** no wrap is set - prevent menu items from wrapping **/
2269     &.nowrap-items .menu > li {
2270         white-space: nowrap;
2271     }
2274 .block .moodle-actionmenu {
2275     text-align: right;
2278 .dir-rtl {
2279     .moodle-actionmenu[data-enhanced].show  {
2280         .menu {
2281             text-align: right;
2282             left: 0;
2283             right: auto;
2284             a {
2285                 padding: 2px 28px 2px 1em;
2286             }
2287             .iconsmall,
2288             .smallicon {
2289                 margin-right: -24px;
2290                 margin-left: 4px;
2291             }
2293             /** bottom left of button **/
2294             &.align-tl-bl {left: auto; right: 0;}
2295             &.align-tr-bl {right: auto; left: 100%;}
2296             &.align-bl-bl {left: auto; right: 0;}
2297             &.align-br-bl {right: auto; left: 100%;}
2298             /** bottom right of button **/
2299             &.align-tl-br {left: auto; right: 100%;}
2300             &.align-tr-br {right: auto; left: 0;}
2301             &.align-bl-br {left: auto; right: 100%;}
2302             &.align-br-br {right: auto; left: 0;}
2303             /** top left of button **/
2304             &.align-tl-tl {left: auto; right: 0;}
2305             &.align-tr-tl {right: auto; left: 100%;}
2306             &.align-bl-tl {left: auto; right: 0;}
2307             &.align-br-tl {right: auto; left: 100%;}
2308             /** top right of button **/
2309             &.align-tl-tr {left: auto; right: 100%;}
2310             &.align-tr-tr {right: auto; left: 0;}
2311             &.align-bl-tr {left: auto; right: 100%;}
2312             &.align-br-tr {right: auto; left: 0;}
2313         }
2314     }
2315     .block .moodle-actionmenu {
2316         text-align: right;
2317     }
2320 ul.dragdrop-keyboard-drag li {
2321     list-style-type: none;
2324 .block-control-actions .moodle-core-dragdrop-draghandle img {
2325     width: 12px;
2326     height: 12px;
2329 a.disabled:hover,
2330 a.disabled {
2331     text-decoration: none;
2332     cursor: default;
2333     font-style: italic;
2334     color: #808080;
2336 body.lockscroll {
2337   height: 100%;
2338   overflow: hidden;
2341 .dir-rtl {
2342     // Bootstrap sets right margin to 0. Fail.
2343     // They set left margin to 25px so we will copy that.
2344     ul {
2345         margin-left: 0;
2346         margin-right: 25px;
2347     }
2350 .progressbar_container {
2351     max-width: 500px;
2352     margin: 0 auto;
2355 /* IE10 only fix for calendar titling */
2356 .ie10 .yui3-calendar-header-label {
2357     display: inline-block;
2360 dd:before,
2361 dd:after {
2362   display: block;
2363   content: " ";
2365 dd:after {
2366   clear: both;