Merge branch 'MDL-55007-master' of https://github.com/dthies/moodle
[moodle.git] / theme / bootstrapbase / less / moodle / core.less
1 /* core.less */
3 /** Page layout CSS starts **/
4 .layout-option-noheader #page-header,
5 .layout-option-nonavbar #page-navbar,
6 .layout-option-nofooter #page-footer,
7 .layout-option-nocourseheader .course-content-header,
8 .layout-option-nocoursefooter .course-content-footer {
9     display:none;
10 }
12 .empty-region-side-pre #block-region-side-pre, // Pre region is empty.
13 .empty-region-side-post #block-region-side-post, // Post region is empty.
14 .jsenabled.docked-region-side-post #block-region-side-post, // All post blocks are docked.
15 .jsenabled.docked-region-side-pre #block-region-side-pre { // All pre blocks are docked.
16     display:none;
17 }
19 /** 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 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
183     cursor: pointer;
185 .collapsibleregioncaption img {
186     vertical-align: middle;
189 .jsenabled .hiddenifjs {
190     display: none;
192 .visibleifjs {
193     display: none;
195 .jsenabled .visibleifjs {
196     display: inline;
198 .jsenabled .collapsibleregion {
199     overflow: hidden;
201 .jsenabled .collapsed .collapsibleregioninner {
202     visibility: hidden;
204 .collapsible-actions {
205     display: none;
206     text-align: right;
208 .dir-rtl .collapsible-actions {
209     text-align: left;
211 .jsenabled .collapsible-actions {
212     display: block;
214 .collapsible-actions .collapseexpand {
215     padding-left: 20px;
216     background: url([[pix:t/collapsed]]) 2px center no-repeat;
218 .dir-rtl .collapsible-actions .collapseexpand {
219     padding-right: 20px;
220     padding-left: 0;
221     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
223 .collapsible-actions .collapse-all,
224 .dir-rtl .collapsible-actions .collapse-all {
225     background-image: url([[pix:t/expanded]]);
227 .yui-overlay .yui-widget-bd {
228     background-color: #FFEE69;
229     border: 1px solid #A6982B;
230     border-top-color: #D4C237;
231     color: #000000;
232     left: 0;
233     padding: 2px 5px;
234     position: relative;
235     top: 0;
236     z-index: 1;
238 .clearer {
239     background: transparent;
240     border-width: 0;
241     clear: both;
242     display: block;
243     height: 1px;
244     margin: 0;
245     padding: 0;
247 .bold,
248 .warning,
249 .errorbox .title,
250 .pagingbar .title,
251 .pagingbar .thispage {
252     font-weight: bold;
254 img.resize {
255     height: 1em;
256     width: 1em;
258 .block img.resize,
259 .breadcrumb img.resize {
260     height: 0.9em;
261     width: 0.8em;
263 /* Icon styles */
264 img.icon {
265     height: 16px;
266     vertical-align: text-bottom;
267     width: 16px;
268     padding-right: 6px;
270 .dir-rtl img.icon {
271     padding-left: 6px;
272     padding-right: 0;
274 img.iconsmall {
275     height: 12px;
276     margin-right: 3px;
277     vertical-align: middle;
278     width: 12px;
280 img.iconhelp, .helplink img {
281     height: 16px;
282     padding-left: 3px;
283     vertical-align: text-bottom;
284     width: 16px;
286 h1 img.iconhelp, h1 img.icon,
287 h2 img.iconhelp, h2 img.icon,
288 h3 img.iconhelp, h3 img.icon,
289 h4 img.iconhelp, h4 img.icon,
290 h5 img.iconhelp, h5 img.icon,
291 h6 img.iconhelp, h6 img.icon {
292     vertical-align: middle;
293     padding: 4px;
295 .dir-rtl img.iconhelp, .dir-rtl .helplink img {
296     padding-right: 3px;
297     padding-left: 0;
299 img.iconlarge {
300     height: 24px;
301     width: 24px;
302     vertical-align: middle;
304 img.iconsort {
305     vertical-align: text-bottom;
306     padding-left: .3em;
307     margin-bottom: .15em;
309 .dir-rtl img.iconsort {
310     padding-right: .3em;
311     padding-left: 0;
313 img.icontoggle {
314     height: 17px;
315     vertical-align: middle;
316     width: 50px;
318 img.iconkbhelp {
319     height: 17px;
320     width: 49px;
322 img.icon-pre, .dir-rtl img.icon-post {
323     padding-right: 3px;
324     padding-left: 0;
326 img.icon-post, .dir-rtl img.icon-pre {
327     padding-left: 3px;
328     padding-right: 0;
330 .boxaligncenter {
331     margin-left: auto;
332     margin-right: auto;
334 .boxalignright {
335     margin-left: auto;
336     margin-right: 0;
338 .boxalignleft {
339     margin-left: 0;
340     margin-right: auto;
342 .boxwidthnarrow {
343     width: 30%;
345 .boxwidthnormal {
346     width: 50%;
348 .boxwidthwide {
349     width: 80%;
351 .headermain {
352     font-weight: bold;
354 #maincontent {
355     display: block;
356     height: 1px;
357     overflow: hidden;
359 img.uihint {
360     cursor: help;
362 #addmembersform table {
363     margin-left: auto;
364     margin-right: auto;
366 table.flexible .emptyrow {
367     display: none;
369 img.emoticon {
370     vertical-align: middle;
371     width: 15px;
372     height: 15px;
374 form.popupform,
375 form.popupform div {
376     display: inline;
378 .arrow_button input {
379     overflow: hidden;
381 .action-icon img.smallicon {
382     vertical-align: text-bottom;
383     margin: 0 0.3em;
386 /** The 1-pixel padding is there to avoid phantom scroll bars on OS X (FF, Safari and Chrome)**/
387 .no-overflow {
388     overflow: auto;
389     padding-bottom: 1px;
391 .pagelayout-report .no-overflow {
392     overflow: visible;
394 .no-overflow > .generaltable {
395     margin-bottom: 0;
397 // Accessibility features
399 // Accessibility: text 'seen' by screen readers but not visual users.
400 .accesshide {
401     position: absolute;
402     left: -10000px;
403     font-weight: normal;
404     font-size: 1em;
406 .dir-rtl .accesshide {
407     top: -30000px;
408     left: auto;
410 span.hide,
411 div.hide {
412     display: none;
414 // Accessibility: Skip block link, for keyboard-only users.
415 a.skip-block,
416 a.skip {
417     position: absolute;
418     top: -1000em;
419     font-size: 0.85em;
420     text-decoration: none;
422 a.skip-block:focus,
423 a.skip-block:active,
424 a.skip:focus,
425 a.skip:active {
426     position: static;
427     display: block;
429 .skip-block-to {
430     display: block;
431     height: 1px;
432     overflow: hidden;
434 // Blogs
435 .addbloglink {
436     text-align: center;
438 .blog_entry .audience {
439     text-align: right;
440     padding-right: 4px;
442 .blog_entry .tags {
443     margin-top: 15px;
445 .blog_entry .tags .action-icon img.smallicon {
446     height: 16px;
447     width: 16px;
449 .blog_entry .content {
450     margin-left: 43px;
452 // Group
453 #page-group-index #groupeditform {
454     text-align: center;
456 #doc-contents h1 {
457     margin: 1em 0 0 0;
459 #doc-contents ul {
460     margin: 0;
461     padding: 0;
462     width: 90%;
464 #doc-contents ul li {
465     list-style-type: none;
467 .groupmanagementtable td {
468     vertical-align: top;
470 .groupmanagementtable #existingcell,
471 .groupmanagementtable #potentialcell {
472     width: 42%;
474 .groupmanagementtable #buttonscell {
475     width: 16%;
477 .groupmanagementtable #buttonscell p.arrow_button input {
478     width: auto;
479     min-width: 80%;
480     margin: 0 auto;
482 .groupmanagementtable #removeselect_wrapper,
483 .groupmanagementtable #addselect_wrapper {
484     width: 100%;
486 .groupmanagementtable #removeselect_wrapper label,
487 .groupmanagementtable #addselect_wrapper label {
488     font-weight: normal;
490 .dir-rtl .groupmanagementtable p {
491     text-align: right;
493 #group-usersummary {
494     width: 14em;
496 .groupselector {
497     margin-top: 3px;
498     margin-bottom: 3px;
499     display: inline-block;
501 .groupselector label {
502     display: inline-block;
504 // Data format selector
505 .dataformatselector {
506     margin: 1em 0;
508 .dataformatselector label {
509     display: inline-block;
510     margin: 0 5px 10px 0;
511     line-height: 30px;
512     vertical-align: top;
515 // Login
516 .loginbox {
517     margin: 15px;
518     overflow: visible;
520 .loginbox.twocolumns {
521     margin: 15px;
523 .loginbox h2,
524 .loginbox .subcontent {
525     margin: 5px;
526     padding: 10px;
527     text-align: center;
529 .loginbox .loginpanel .desc {
530     margin: 0;
531     padding: 0;
532     margin-bottom: 5px;
533     margin-top:15px;
535 .loginbox .signuppanel .subcontent {
536     text-align: left;
538 .dir-rtl .loginbox .signuppanel .subcontent {
539     text-align: right;
541 .loginbox .loginsub {
542     margin-left: 0;
543     margin-right: 0;
545 .loginbox .guestsub,
546 .loginbox .forgotsub,
547 .loginbox .potentialidps {
548     margin: 5px 12%;
550 .loginbox .potentialidps .potentialidplist {
551     margin-left: 40%;
553 .loginbox .potentialidps .potentialidplist div {
554     text-align: left;
556 .loginbox .loginform {
557     margin-top: 1em;
558     text-align: left;
560 .loginbox .loginform .form-label {
561     float: left;
562     text-align: right;
563     width: 49%;
564     white-space: nowrap;
566 .loginbox .loginform .form-input {
567     float: right;
568     width: 50%;
570 .loginbox .loginform .form-input input {
571     width: 6em;
573 .loginbox .signupform {
574     margin-top: 1em;
575     text-align: center;
577 .loginbox.twocolumns .loginpanel,
578 .loginbox.twocolumns .signuppanel {
579     width: 48%;
580     border: 0;
581     margin: 0;
582     padding: 0;
583     .box-sizing(border-box);
584     display: block;
585     float: left;
586     margin-left: 2.76243%;
587     min-height: 30px;
588     margin-bottom: -2000px;
589     padding-bottom: 2000px;
591 .dir-rtl {
592     .loginbox.twocolumns .loginpanel,
593     .loginbox.twocolumns .signuppanel {
594         float:right;
595     }
598 .loginbox .potentialidp .smallicon {
599     vertical-align: text-bottom;
600     margin: 0 .3em;
603 // Notes
604 .notepost {
605     margin-bottom: 1em;
607 .notepost .userpicture {
608     float: left;
609     margin-right: 5px;
611 .notepost .content,
612 .notepost .footer {
613     clear: both;
615 .notesgroup {
616     margin-left: 20px;
619 // My Moodle
620 .path-my .coursebox .overview {
621     margin: 15px 30px 10px 30px;
623 .path-my .coursebox .info {
624     float: none;
625     margin: 0;
628 // Modules
629 .mod_introbox {
630     padding: 10px;
632 table.mod_index {
633     width: 100%;
636 // Comments
637 .comment-ctrl {
638     font-size: 12px;
639     display: none;
640     margin: 0;
641     padding: 0;
643 .comment-ctrl h5 {
644     margin: 0;
645     padding: 5px;
647 .comment-area {
648     max-width: 400px;
649     padding: 5px;
651 .comment-area textarea {
652     width: 100%;
653     overflow: auto;
654     &.fullwidth {
655         -webkit-box-sizing: border-box;
656         -moz-box-sizing: border-box;
657         box-sizing: border-box;
658     }
660 .comment-area .fd {
661     text-align: right;
663 .comment-meta span {
664     color: gray;
666 .comment-link img {
667     vertical-align: text-bottom;
669 .comment-list {
670     font-size: 11px;
671     overflow: auto;
672     list-style: none;
673     padding: 0;
674     margin: 0;
676 .comment-list li {
677     margin: 2px;
678     list-style: none;
679     margin-bottom: 5px;
680     clear: both;
681     padding: .3em;
682     position: relative;
684 .comment-list li.first {
685     display: none
687 .comment-paging{
688     text-align: center;
690 .comment-paging .pageno{
691     padding: 2px;
693 .comment-paging .curpage{
694     border: 1px solid #CCC;
696 .comment-message .picture {
697     width: 20px;
698     float: left;
700 .dir-rtl .comment-message .picture {
701     float: right;
703 .comment-message .text {
704     margin: 0;
705     padding: 0;
707 .comment-message .text p {
708     padding: 0;
709     margin: 0 18px 0 0;
711 .comment-delete {
712     position: absolute;
713     top: 0;
714     right: 0;
715     margin: .3em;
717 .dir-rtl .comment-delete {
718     position: absolute;
719     left: 0;
720     right: auto;
721     margin: .3em;
723 .comment-report-selectall{
724     display: none
726 .comment-link {
727     display: none
729 .jsenabled .comment-link {
730     display: block
732 .jsenabled .showcommentsnonjs{
733     display: none
735 .jsenabled .comment-report-selectall{
736     display: inline
738 /**
739 * Completion progress report
740 */
741 .completion-expired {
742     background: @errorBackground;
744 .completion-expected {
745     font-size: @fontSizeMini;
747 .completion-sortchoice,
748 .completion-identifyfield {
749     font-size: @fontSizeMini;
750     vertical-align: bottom;
752 .completion-progresscell {
753     text-align: right;
755 .completion-expired .completion-expected {
756     font-weight: bold;
758 /**
759 * Tags
760 */
761 img.user-image {
762     height: 100px;
763     width: 100px;
765 #tag-search-box {
766     text-align: center;
767     margin: 10px auto;
770 .path-tag .tag-index-items .tagarea {
771     border: 1px solid #E3E3E3;
772     border-radius: 4px;
773     padding: 10px;
774     margin-top: 10px;
777 .path-tag .tag-index-items .tagarea h3 {
778     display: block;
779     padding: 3px 0 10px 0;
780     margin: 0px;
781     font-size: 1.1em;
782     font-weight: bold;
783     line-height: 20px;
784     color: #999;
785     text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
786     text-transform: uppercase;
787     word-wrap: break-word;
788     border-bottom: solid 1px #E3E3E3;
789     margin-bottom: 10px;
792 .path-tag .tagarea .controls,
793 .path-tag .tagarea .taggeditems {
794     .clearfix();
796 .path-tag .tagarea .controls,
797 .path-tag .tag-backtoallitems {
798     text-align: center;
800 .path-tag .tagarea .controls .gotopage.nextpage {
801     float: right;
803 .path-tag .tagarea .controls .gotopage.prevpage {
804     float: left;
806 .path-tag .tagarea .controls .exclusivemode {
807     display: inline-block;
809 .dir-rtl.path-tag  .tagarea .controls .gotopage.nextpage {
810     float: left;
812 .dir-rtl.path-tag  .tagarea .controls .gotopage.prevpage {
813     float: right;
815 .path-tag .tagarea .controls.controls-bottom {
816     margin-top: 5px;
818 .path-tag .tagarea .controls .gotopage.nextpage::after {
819     padding-right: 5px;
820     padding-left: 5px;
821     content: "»";
823 .path-tag .tagarea .controls .gotopage.prevpage::before {
824     padding-right: 5px;
825     padding-left: 5px;
826     content: "«";
829 span.flagged-tag,
830 tr.flagged-tag,
831 span.flagged-tag a,
832 tr.flagged-tag a {
833     color: @errorText;
835 .tag-management-table td,
836 .tag-management-table th {
837     vertical-align: middle;
838     padding: 4px;
840 .tag-management-table .inplaceeditable.inplaceeditingon input {
841     width: 150px;
843 .path-admin-tag .addstandardtags {
844     float: right;
845     img {
846         margin: 0 5px;
847     }
849 .dir-rtl.path-admin-tag .addstandardtags {
850     float: left;
852 .path-tag .tag-relatedtags {
853     padding-top: 10px;
855 .path-tag .tag-management-box {
856     text-align: right;
858 .path-tag .tag-index-toc {
859     padding: 10px;
860     text-align: center;
862 .path-tag .tag-index-toc li,
863 .path-tag .tag-management-box li {
864     margin-left: 5px;
865     margin-right: 5px;
867 .path-tag .tag-management-box li a.edittag {
868     background-image: url([[pix:moodle|i/settings]]);
870 .path-tag .tag-management-box li a.flagasinappropriate {
871     background-image: url([[pix:moodle|i/flagged]]);
873 .path-tag .tag-management-box li a.removefrommyinterests {
874     background-image: url([[pix:moodle|t/delete]]);
876 .path-tag .tag-management-box li a.addtomyinterests {
877     background-image: url([[pix:moodle|t/add]]);
879 .path-tag .tag-management-box li a {
880     background-repeat: no-repeat;
881     background-position: left;
882     padding-left: 17px;
884 .tag_feed.media-list .media .itemimage {
885     float: left;
887 .dir-rtl .tag_feed.media-list .media .itemimage {
888     float: right;
890 .tag_feed.media-list .media .itemimage img {
891     height: 35px;
892     width: 35px;
894 .tag_feed.media-list .media .media-body {
895     padding-right: 10px;
896     padding-left: 10px;
898 .tag_feed .media .muted a {
899     .muted();
901 .tag_cloud {
902     text-align: center;
904 .tag_cloud .inline-list li {
905     padding: 0px 0.2em;
907 .tag_cloud .tag_overflow {
908     margin-top: 1em;
909     font-style: italic;
911 .tag_cloud .s20 {
912     font-size: 2.7em;
914 .tag_cloud .s19 {
915     font-size: 2.6em;
917 .tag_cloud .s18 {
918     font-size: 2.5em;
920 .tag_cloud .s17 {
921     font-size: 2.4em;
923 .tag_cloud .s16 {
924     font-size: 2.3em;
926 .tag_cloud .s15 {
927     font-size: 2.2em;
929 .tag_cloud .s14 {
930     font-size: 2.1em;
932 .tag_cloud .s13 {
933     font-size: 2em;
935 .tag_cloud .s12 {
936     font-size: 1.9em;
938 .tag_cloud .s11 {
939     font-size: 1.8em;
941 .tag_cloud .s10 {
942     font-size: 1.7em;
944 .tag_cloud .s9 {
945     font-size: 1.6em;
947 .tag_cloud .s8 {
948     font-size: 1.5em;
950 .tag_cloud .s7 {
951     font-size: 1.4em;
953 .tag_cloud .s6 {
954     font-size: 1.3em;
956 .tag_cloud .s5 {
957     font-size: 1.2em;
959 .tag_cloud .s4 {
960     font-size: 1.1em;
962 .tag_cloud .s3 {
963     font-size: 1em;
965 .tag_cloud .s2 {
966     font-size: 0.9em;
968 .tag_cloud .s1 {
969     font-size: 0.8em;
971 .tag_cloud .s0 {
972     font-size: 0.7em;
974 .tag_list ul {
975     display: inline;
977 .tag_list.hideoverlimit .overlimit {
978     display:none;
980 .tag_list .tagmorelink {
981     display:none;
983 .tag_list.hideoverlimit .tagmorelink {
984     display:inline;
986 .tag_list.hideoverlimit .taglesslink {
987     display:none;
990 /**
991 * Web Service
992 */
993 #webservice-doc-generator td {
994     text-align: left;
995     border: 0 solid black;
997 /**
998 * Smart Select Element
999 */
1000 .smartselect {
1001     position: absolute;
1003 .smartselect .smartselect_mask {
1004     background-color: #fff;
1006 .smartselect ul  {
1007     padding: 0;
1008     margin: 0;
1010 .smartselect ul li {
1011     list-style: none;
1013 .smartselect .smartselect_menu {
1014     margin-right: 5px;
1016 .safari .smartselect .smartselect_menu {
1017     margin-left: 2px;
1019 .smartselect .smartselect_menu,
1020 .smartselect .smartselect_submenu {
1021     border: 1px solid #000;
1022     background-color: #FFF;
1023     display: none;
1025 .smartselect .smartselect_menu.visible,
1026 .smartselect .smartselect_submenu.visible {
1027     display: block;
1029 .smartselect .smartselect_menu_content ul li {
1030     position: relative;
1031     padding: 2px 5px;
1033 .smartselect .smartselect_menu_content ul li a {
1034     color: #333;
1035     text-decoration: none;
1037 .smartselect .smartselect_menu_content ul li a.selectable {
1038     color: inherit;
1040 .smartselect .smartselect_submenuitem {
1041     background-image: url([[pix:moodle|t/collapsed]]);
1042     background-repeat: no-repeat;
1043     background-position: 100%;
1045 /** Spanning mode */
1046 .smartselect.spanningmenu .smartselect_submenu {
1047     position: absolute;
1048     top: -1px;
1049     left: 100%;
1051 .smartselect.spanningmenu .smartselect_submenu a {
1052     white-space: nowrap;
1053     padding-right: 16px;
1055 .smartselect.spanningmenu .smartselect_menu_content ul li a.selectable:hover {
1056     text-decoration: underline;
1058 /** Compact mode */
1059 .smartselect.compactmenu .smartselect_submenu {
1060     position: relative;
1061     margin: 2px -3px;
1062     margin-left: 10px;
1063     display: none;
1064     border-width: 0;
1065     z-index: 1010;
1067 .smartselect.compactmenu .smartselect_submenu.visible {
1068     display: block;
1070 .smartselect.compactmenu .smartselect_menu {
1071     z-index: 1000;
1072     overflow: hidden;
1074 .smartselect.compactmenu .smartselect_submenu .smartselect_submenu {
1075     z-index: 1020;
1077 .smartselect.compactmenu .smartselect_submenuitem:hover > .smartselect_menuitem_label {
1078     font-weight: bold;
1080 /**
1081 * Registration
1082 */
1083 #page-admin-registration-register .registration_textfield {
1084     width: 300px;
1086 /**
1087 * Enrol
1088 */
1089 .userenrolment {
1090     width: 100%;
1091     border-collapse: collapse;
1093 .userenrolment tr {
1094     vertical-align:top;
1096 .userenrolment td {
1097     padding: 0;
1098     height: 41px;
1100 .userenrolment .subfield {
1101     margin-right: 5px;
1103 .userenrolment .col_userdetails .subfield {
1104     margin-left: 40px;
1106 .userenrolment .col_userdetails .subfield_picture {
1107     float: left;
1108     margin-left: 0;
1110 .userenrolment .col_lastseen {
1111     width: 150px;
1113 .userenrolment .col_role {
1114     width: 262px;
1116 .userenrolment .col_role .roles,
1117 .userenrolment .col_group .groups {
1118     margin-right: 30px;
1120 .userenrolment .col_role .role,
1121 .userenrolment .col_group .group {
1122     float: left;
1123     padding: 3px;
1124     margin: 3px;
1125     white-space: nowrap;
1127 .userenrolment .col_role .role a,
1128 .userenrolment .col_group .group a {
1129     margin-left: 3px;
1130     cursor: pointer;
1132 .userenrolment .col_role .addrole,
1133 .userenrolment .col_group .addgroup {
1134     float: right;
1135     padding: 3px;
1136     margin: 3px;
1137     > a:hover {
1138         border-bottom:1px solid #666;
1139     }
1141 .userenrolment .col_role .addrole img,
1142 .userenrolment .col_group .addgroup img {
1143     vertical-align: baseline;
1146 .dir-rtl .userenrolment .col_role .role {
1147     float: right;
1150 .userenrolment .hasAllRoles .col_role .addrole {
1151     display: none;
1154 .userenrolment .col_enrol .enrolment {
1155     float: left;
1156     padding: 3px;
1157     margin: 3px;
1159 .userenrolment .col_enrol .enrolment a {
1160     float: right;
1161     margin-left: 3px;
1163 #page-enrol-users {
1164     .enrol_user_buttons {
1165         float: right;
1166         .enrolusersbutton {
1167             display: inline;
1168             div,
1169             form {
1170                 display: inline;
1171                 margin-right: 0;
1172             }
1173         }
1174     }
1175     #filterform {
1176         .well;
1177         .well-small;
1178         display: inline-block;
1179         .fitem {
1180             display: inline-block;
1181             line-height: @baseLineHeight * 2;
1182             margin-right: .3em;
1183             white-space: nowrap;
1184             label {
1185                 display: inline;
1186                 line-height: @baseLineHeight;
1187                 padding-right: .3em;
1188             }
1189             :before,
1190             :after {
1191                 display: inline;
1192             }
1193         }
1194         div,
1195         fieldset {
1196             display: inline;
1197             float: none;
1198             clear: none;
1199             width: auto;
1200             margin: 0;
1201         }
1202         select,
1203         .ftext input {
1204             width: 7em;
1205         }
1206         input,
1207         select {
1208             margin-bottom: 0;
1209         }
1210     }
1211     .user-enroller-panel .uep-search-results .user .details {
1212         width: 237px;
1213     }
1214     .user-enroller-panel .uep-search-results .cohort .details {
1215         width: 237px;
1216     }
1218 .dir-rtl {
1219     &#page-enrol-users {
1220         .col_userdetails {
1221             .subfield {
1222                 margin-right: 40px;
1223                 margin-left: 5px;
1224             }
1225             .subfield_picture {
1226                 float: right;
1227                 margin-right: 0;
1228             }
1229         }
1230         .enrol_user_buttons {
1231             float: left;
1232             .enrolusersbutton {
1233                 margin-left: 0;
1234                 margin-right: 1em;
1235                 div {
1236                     margin-left: 0;
1237                 }
1238             }
1239         }
1240         #filterform {
1241             .fitem {
1242                 margin-right: 0;
1243                 margin-left: .3em;
1244                 label {
1245                     padding-right: 0;
1246                     padding-left: .3em;
1247                 }
1248             }
1249         }
1250     }
1253 #page-enrol-users .enrol-users-page-action input {
1254     margin-left: 0
1257 /**
1258 * Overide for RTL layout
1259 **/
1260 .dir-rtl .headermain {
1261     float: right;
1263 .dir-rtl .headermenu {
1264     float: left;
1266 .dir-rtl .loginbox .loginform .form-label {
1267     float: right;
1268     text-align: left;
1270 .dir-rtl .loginbox .loginform .form-input {
1271     text-align: right;
1272     margin-right: 1%;
1274 .dir-rtl .yui3-menu-hidden {
1275     left: 0;
1277 #page-admin-roles-define.dir-rtl #rolesform .felement {
1278     margin-right: 180px;
1280 #page-message-edit.dir-rtl table.generaltable th.c0 {
1281     text-align: right;
1283 .corelightbox {
1284     background-color: #CCC;
1285     position: absolute;
1286     top: 0;
1287     left: 0;
1288     width: 100%;
1289     height: 100%;
1290     text-align: center;
1292 .corelightbox img {
1293     position: fixed;
1294     top: 50%;
1295     left: 50%;
1298 .mod-indent-outer {
1299     display: table;
1301 .mod-indent {
1302     display: table-cell;
1304 .label .mod-indent {
1305     float:left;
1306     padding-top:20px
1309 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1310 @mod-indent-size: 30px;
1311 @mod-indent-levels: 16;
1312 .mod-indent-generate(@n, @i: 1) when (@i =< @n) {
1313     .mod-indent-@{i} {
1314         width: (@i * @mod-indent-size);
1315     }
1316     .mod-indent-generate(@n, (@i + 1));
1318 .mod-indent-generate(@n, @i: 1) when (@i = @n) {
1319     .mod-indent-huge {
1320         width: (@i * @mod-indent-size);
1321     }
1323 .mod-indent-generate(@mod-indent-levels);
1325 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1326 .resourcecontent .mediaplugin_mp3 object {
1327     height: 25px;
1328     width: 600px
1330 .resourcecontent audio.mediaplugin_html5audio {
1331     width: 600px
1333 /** Large resource images should avoid hidden overflow **/
1334 .resourceimage {
1335     max-width: 100%;
1337 /* Audio player size in 'inline' mode (can only change width, as above) */
1338 .mediaplugin_mp3 object {
1339     height: 15px;
1340     width: 300px
1342 audio.mediaplugin_html5audio {
1343     width: 300px
1345 /* TinyMCE moodle media preview frame should not have padding */
1346 .core_media_preview.pagelayout-embedded #content {
1347     padding: 0;
1349 .core_media_preview.pagelayout-embedded #maincontent {
1350     height: 0;
1352 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1353     padding: 0;
1354     margin: 0;
1355     min-width: 0;
1356     background: none;
1358 /** Fix YUI 2 Treeview for Right to left languages **/
1359 .dir-rtl .ygtvtn,
1360 .dir-rtl .ygtvtm,
1361 .dir-rtl .ygtvtmh,
1362 .dir-rtl .ygtvtmhh,
1363 .dir-rtl .ygtvtp,
1364 .dir-rtl .ygtvtph,
1365 .dir-rtl .ygtvtphh,
1366 .dir-rtl .ygtvln,
1367 .dir-rtl .ygtvlm,
1368 .dir-rtl .ygtvlmh,
1369 .dir-rtl .ygtvlmhh,
1370 .dir-rtl .ygtvlp,
1371 .dir-rtl .ygtvlph,
1372 .dir-rtl .ygtvlphh,
1373 .dir-rtl .ygtvdepthcell,
1374 .dir-rtl .ygtvok,
1375 .dir-rtl .ygtvok:hover,
1376 .dir-rtl .ygtvcancel,
1377 .dir-rtl .ygtvcancel:hover {
1378     width: 18px;
1379     height: 22px;
1380     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1381     background-repeat: no-repeat;
1382     cursor: pointer;
1384 .dir-rtl .ygtvtn {
1385     background-position: 0 -5600px;
1387 .dir-rtl .ygtvtm {
1388     background-position: 0 -4000px;
1390 .dir-rtl .ygtvtmh,
1391 .dir-rtl .ygtvtmhh {
1392     background-position: 0 -4800px;
1394 .dir-rtl .ygtvtp {
1395     background-position: 0 -6400px;
1397 .dir-rtl .ygtvtph,
1398 .dir-rtl .ygtvtphh {
1399     background-position: 0 -7200px;
1401 .dir-rtl .ygtvln {
1402     background-position: 0 -1600px;
1404 .dir-rtl .ygtvlm {
1405     background-position: 0 0;
1407 .dir-rtl .ygtvlmh,
1408 .dir-rtl .ygtvlmhh {
1409     background-position: 0 -800px;
1411 .dir-rtl .ygtvlp {
1412     background-position: 0 -2400px;
1414 .dir-rtl .ygtvlph,
1415 .dir-rtl .ygtvlphh {
1416     background-position: 0 -3200px
1418 .dir-rtl .ygtvdepthcell {
1419     background-position: 0 -8000px;
1421 .dir-rtl .ygtvok {
1422     background-position: 0 -8800px;
1424 .dir-rtl .ygtvok:hover {
1425     background-position: 0 -8844px;
1427 .dir-rtl .ygtvcancel {
1428     background-position: 0 -8822px;
1430 .dir-rtl .ygtvcancel:hover {
1431     background-position: 0 -8866px;
1433 .dir-rtl.yui-skin-sam .yui-panel .hd {
1434     text-align: right;
1436 .dir-rtl .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
1437     text-align: right;
1439 /** Fix TinyMCE editor right to left **/
1440 .dir-rtl .clearlooks2.ie9 .mceAlert .mceMiddle span,.dir-rtl .clearlooks2 .mceConfirm .mceMiddle span {
1441     top: 44px;
1443 .dir-rtl .o2k7Skin table,
1444 .dir-rtl .o2k7Skin tbody,
1445 .dir-rtl .o2k7Skin a,
1446 .dir-rtl .o2k7Skin img,
1447 .dir-rtl .o2k7Skin tr,
1448 .dir-rtl .o2k7Skin div,
1449 .dir-rtl .o2k7Skin td,
1450 .dir-rtl .o2k7Skin iframe,
1451 .dir-rtl .o2k7Skin span,
1452 .dir-rtl .o2k7Skin *,
1453 .dir-rtl .o2k7Skin .mceText,
1454 .dir-rtl .o2k7Skin .mceListBox .mceText {
1455     text-align: right;
1457 .path-rating .ratingtable {
1458     width: 100%;
1459     margin-bottom: 1em;
1461 .path-rating .ratingtable th.rating {
1462     width: 100%;
1464 .path-rating .ratingtable td.rating,
1465 .path-rating .ratingtable td.time {
1466     white-space: nowrap;
1467     text-align: center;
1469 .initialbar {
1470     a, strong {
1471         padding-left: 3px;
1472         padding-right: 3px;
1473     }
1475 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1476 .moodle-dialogue-base .moodle-dialogue-lightbox {
1477     background-color: #AAA;
1479 .moodle-dialogue-base .hidden,
1480 .moodle-dialogue-base .moodle-dialogue-hidden {
1481     display: none;
1483 .no-scrolling {
1484     overflow: hidden;
1486 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1487     left: 0px;
1488     top: 0px;
1489     right: 0px;
1490     bottom: -50px;
1491     position: fixed;
1493 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1494     overflow: auto;
1496 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1497     width: 28px;
1498     height: 16px;
1499     background-size: 100%;
1501 .moodle-dialogue-base .moodle-dialogue {
1502     padding: 0;
1503     margin: 0;
1504     background: none;
1505     border: none;
1506     z-index: 600;
1507     outline: #000 dotted 0;
1509 .moodle-dialogue-base .moodle-dialogue-wrap {
1510     margin-top: -3px;
1511     margin-left: -3px;
1512     background-color: #fff;
1513     border: 1px solid #ccc;
1514     .border-radius(10px);
1515     .box-shadow(5px 5px 20px 0 #666);
1517 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd,
1518 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1519     margin: 0;
1520     padding: 5px;
1521     font-size: 12px;
1522     font-weight: normal;
1523     letter-spacing: 1px;
1524     color: #333;
1525     text-align: center;
1526     text-shadow: 1px 1px 1px #fff;
1527     .border-radius(10px 10px 0 0);
1528     border-bottom: 1px solid #bbb;
1529     background: #ccc;
1530     #gradient > .vertical(#fff, #ccc);
1531     filter: 0;
1533 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1534     margin: 0;
1535     padding: 0;
1536     display: inline;
1537     font-size: 100%;
1538     font-weight: bold;
1540 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1541     padding: 5px;
1543 .moodle-dialogue-base .closebutton {
1544     width: 25px;
1545     height: 15px;
1546     float: right;
1547     vertical-align: middle;
1548     display: inline-block;
1549     cursor: pointer;
1550     padding: 0;
1551     background-image: url([[pix:theme|sprite]]);
1552     background-repeat: no-repeat;
1553     border-style: none;
1555 .dir-rtl .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1556     left: 0;
1557     right: auto;
1559 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1560     padding: 1em;
1561     line-height: 2em;
1562     color: #555;
1563     font-size: 12px;
1565 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-content {
1566     padding: 0;
1567     background: #FFF;
1570 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd {
1571     padding: 10px;
1572     font-size: 16px;
1575 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1576     overflow: auto;
1577     position: absolute;
1578     top: 0px;
1579     bottom: 50px;
1580     left: 0px;
1581     right: 0px;
1582     margin: 0px;
1583     border: 0px;
1585 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd,
1586 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-wrap {
1587     border-radius: 0px;
1589 .moodle-dialogue-confirm .confirmation-dialogue {
1590     text-align: center;
1592 .moodle-dialogue-confirm .confirmation-dialogue input {
1593     text-align: center;
1595 .moodle-dialogue-exception .moodle-exception-message {
1596     text-align: center
1598 .moodle-dialogue-exception .moodle-exception-param label {
1599     font-weight: bold;
1601 .moodle-dialogue-exception .param-stacktrace label {
1602     background-color: #EEE;
1603     border: 1px solid #ccc;
1604     border-bottom-width: 0;
1606 .moodle-dialogue-exception .param-stacktrace pre {
1607     border: 1px solid #ccc;
1608     background-color: #fff;
1610 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1611     color: navy;
1612     font-size: @fontSizeSmall;
1614 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1615     color: @errorText;
1616     font-size: @fontSizeSmall;
1618 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1619     color: #333;
1620     font-size: 90%;
1621     border-bottom: 1px solid #eee;
1623 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1624     padding: 0;
1625     margin: 0.7em 1em;
1626     text-align: right;
1627     background-color: #FFF;
1628     font-size: 12px;
1630 .moodle-dialogue-confirm .confirmation-message {
1631     margin: 0.5em 1em;
1633 .moodle-dialogue-confirm .confirmation-dialogue input {
1634     min-width: 80px
1636 .moodle-dialogue-exception .moodle-exception-message {
1637     margin: 1em;
1639 .moodle-dialogue-exception .moodle-exception-param {
1640     margin-bottom: 0.5em;
1642 .moodle-dialogue-exception .moodle-exception-param label {
1643     width: 150px;
1645 .moodle-dialogue-exception .param-stacktrace label {
1646     display: block;
1647     margin: 0;
1648     padding: 4px 1em;
1650 .moodle-dialogue-exception .param-stacktrace pre {
1651     display: block;
1652     height: 200px;
1653     overflow: auto;
1655 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1656     display: inline-block;
1657     margin: 4px 0;
1659 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1660     display: inline-block;
1661     width: 50px;
1662     margin: 4px 1em;
1664 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1665     padding-left: 25px;
1666     margin-bottom: 4px;
1667     padding-bottom: 4px;
1669 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1670     .opacity(75);
1671     width: 100%;
1672     height: 100%;
1673     top: 0;
1674     left: 0;
1675     background-color: white;
1676     text-align: center;
1677     padding: 10% 0;
1679 /* Apply a default max-height on tooltip text */
1680 .moodle-dialogue .tooltiptext {
1681     max-height: 300px;
1684 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1685     z-index: 3001;
1687     .moodle-dialogue-bd {
1688         overflow: auto;
1689     }
1692 /* Question Bank - Question Chooser "Close" button */
1693 #page-question-edit.dir-rtl a.container-close {
1694     right: auto;
1695     left: 6px;
1697 /**
1698  * Chooser Dialogues (moodle-core-chooserdialogue)
1699  *
1700  * This CSS belong to the chooser dialogue which should work both with, and
1701  * without javascript enabled
1702  */
1703 /* Hide the dialog and it's title */
1704 .chooserdialoguebody,
1705 .choosertitle {
1706     display: none;
1708 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1709     margin: 0;
1711 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1712     padding: 0;
1713     background: #F2F2F2;
1714     .border-bottom-radius(10px);
1716 /* Center the submit buttons within the area */
1717 .choosercontainer #chooseform .submitbuttons {
1718     padding: 0.7em 0;
1719     text-align: center;
1721 /* Fixed for safari browser on iPhone4S with ios7.*/
1722 @media (max-height: 639px) {
1723     .ios.safari .choosercontainer #chooseform .submitbuttons {
1724         padding: 45px 0;
1725     }
1727 .choosercontainer #chooseform .submitbuttons input {
1728     min-width: 100px;
1729     margin: 0 0.5em;
1731 /* Various settings for the options area */
1732 .choosercontainer #chooseform .options {
1733     position: relative;
1734     border-bottom: 1px solid #BBBBBB;
1736 /* Only set these options if we're showing the js container */
1737 .jschooser .choosercontainer #chooseform .alloptions {
1738     overflow-x: hidden;
1739     overflow-y: auto;
1740     max-width: 20.3em;
1741     .box-shadow(inset 0 0 30px 0px #ccc);
1742     .option {
1743         input[type=radio] {
1744             display: inline-block;
1745         }
1746         .modicon {
1747             display: inline-block;
1748         }
1749         .typename {
1750             display: inline-block;
1751             width: 65%;
1752         }
1753     }
1755 .dir-rtl.jschooser .choosercontainer #chooseform .alloptions {
1756     max-width: 18.3em;
1758 /* Settings for option rows and option subtypes */
1759 .choosercontainer #chooseform .moduletypetitle,
1760 .choosercontainer #chooseform .option,
1761 .choosercontainer #chooseform .nonoption {
1762     margin-bottom: 0;
1763     padding: 0 1.6em 0 1.6em;
1765 .choosercontainer #chooseform .moduletypetitle {
1766     text-transform: uppercase;
1767     padding-top: 1.2em;
1768     padding-bottom: 0.4em;
1770 .choosercontainer #chooseform .option .typename,
1771 .choosercontainer #chooseform .option span.modicon img.icon,
1772 .choosercontainer #chooseform .nonoption .typename,
1773 .choosercontainer #chooseform .nonoption span.modicon img.icon {
1774     padding: 0 0 0 0.5em;
1776 .dir-rtl .choosercontainer #chooseform .option .typename,
1777 .dir-rtl .choosercontainer #chooseform .option span.modicon img.icon,
1778 .dir-rtl .choosercontainer #chooseform .nonoption .typename,
1779 .dir-rtl .choosercontainer #chooseform .nonoption span.modicon img.icon {
1780     padding: 0 0.5em 0 0;
1783 .chooserdialogue-course-modchooser .choosercontainer #chooseform .option span.modicon img.icon,
1784 .chooserdialogue-course-modchooser .choosercontainer #chooseform .nonoption span.modicon img.icon {
1785     height: 24px;
1786     width: 24px;
1788 .choosercontainer #chooseform .option input[type=radio],
1789 .choosercontainer #chooseform .option span.typename,
1790 .choosercontainer #chooseform .option span.modicon {
1791     vertical-align: middle;
1793 .choosercontainer #chooseform .option label {
1794     display: block;
1795     padding: 0.3em 0 0.1em 0;
1796     border-bottom: 1px solid #FFFFFF;
1798 .choosercontainer #chooseform .nonoption {
1799     padding-left: 2.7em;
1800     padding-top: 0.3em;
1801     padding-bottom: 0.1em;
1803 .dir-rtl .choosercontainer #chooseform .nonoption {
1804     padding-right: 2.7em;
1805     padding-left: 0;
1807 .choosercontainer #chooseform .subtype {
1808     margin-bottom: 0;
1809     padding: 0 1.6em 0 3.2em;
1811 .dir-rtl .choosercontainer #chooseform .subtype {
1812     padding: 0 3.2em 0 1.6em;
1814 .choosercontainer #chooseform .subtype .typename {
1815     margin: 0 0 0 0.2em;
1817 .dir-rtl .choosercontainer #chooseform .subtype .typename {
1818     margin: 0 0.2em 0 0;
1820 /* The instruction/help area */
1821 .jschooser .choosercontainer #chooseform .instruction,
1822 .jschooser .choosercontainer #chooseform .typesummary {
1823     display: none;
1824     position: absolute;
1825     top: 0;
1826     right: 0;
1827     bottom: 0;
1828     left: 20.3em;
1829     margin: 0;
1830     padding: 1.6em;
1831     background-color: #fff;
1832     overflow-x: hidden;
1833     overflow-y: auto;
1834     line-height: 2em;
1836 .dir-rtl.jschooser .choosercontainer #chooseform .instruction,
1837 .dir-rtl.jschooser .choosercontainer #chooseform .typesummary {
1838     left: 0;
1839     right: 18.5em;
1840     border-right: 1px solid grey;
1842 /* Selected option settings */
1843 .jschooser .choosercontainer #chooseform .instruction,
1844 .choosercontainer #chooseform .selected .typesummary {
1845     display: block;
1847 .choosercontainer #chooseform .selected {
1848     background-color: #fff;
1849     .box-shadow(0px 0 10px 0 #ccc);
1851 .section-modchooser-link img.smallicon {
1852     padding: 3px;
1854 /* Form element: listing */
1855 .formlistingradio {
1856     padding-bottom: 25px;
1857     padding-right: 10px;
1859 .formlistinginputradio {
1860     float: left;
1862 .formlistingmain {
1863     min-height: 225px;
1865 .formlisting {
1866     position: relative;
1867     margin: 15px 0;
1868     padding: 1px 19px 14px;
1869     background-color: white;
1870     border: 1px solid #DDD;
1871     .border-radius(4px);
1873 .formlistingmore {
1874     position: absolute;
1875     cursor: pointer;
1876     bottom: -1px;
1877     right: -1px;
1878     padding: 3px 7px;
1879     font-size: 12px;
1880     font-weight: bold;
1881     background-color: whiteSmoke;
1882     border: 1px solid #ddd;
1883     color: #9DA0A4;
1884     .border-radius(4px 0 4px 0);
1886 .formlistingall {
1887     margin: 15px 0;
1888     padding: 0;
1889     .border-radius(4px);
1891 .formlistingrow {
1892     cursor: pointer;
1893     border-bottom: 1px solid;
1894     border-color: #E1E1E8;
1895     border-left: 1px solid #E1E1E8;
1896     border-right: 1px solid #E1E1E8;
1897     background-color: #F7F7F9;
1898     .border-radius(0 0 4px 4px);
1899     padding: 6px;
1900     top: 50%;
1901     left: 50%;
1902     min-height: 34px;
1903     float: left;
1904     width: 150px;
1906 body.jsenabled .formlistingradio {
1907     display: none;
1909 body.jsenabled .formlisting {
1910     display: block;
1913 /* Badges styles */
1914 table.collection {
1915     .table;
1916     .table-bordered;
1917     .table-striped;
1919 table.collection .name {
1920     text-align: left;
1921     vertical-align: middle;
1923 table.collection .awards {
1924     width: 10%;
1925     text-align: center;
1926     vertical-align: middle;
1928 table.collection .criteria {
1929     width: 40%;
1930     text-align: left;
1931     vertical-align: top;
1933 table.collection .badgeimage,
1934 table.collection .status {
1935     width: 15%;
1936     text-align: center;
1937     vertical-align: middle;
1939 table.collection .description {
1940     width: 25%;
1941     text-align: left;
1943 .dir-rtl table.collection {
1944     .name,
1945     .criteria,
1946     .description  {
1947         text-align: right;
1948     }
1950 table.collection .actions {
1951     width: 11em;
1952     text-align: center;
1953     vertical-align: middle;
1956 a.criteria-action {
1957     padding: 0px 3px;
1958     float: right;
1960 div.criteria-description {
1961     padding: 10px 15px;
1962     margin: 5px 0px;
1963     background: none repeat scroll 0 0 #f9f9f9;
1964     border: 1px solid #EEE;
1966 ul.badges {
1967     margin: 0;
1968     list-style: none;
1970 .badges li {
1971     position: relative;
1972     display: inline-block;
1973     padding-top: 1em;
1974     text-align: center;
1975     vertical-align: top;
1976     width: 150px;
1978 .badges li .badge-name {
1979     display: block;
1980     padding: 5px;
1982 .badges li > img {
1983     position: absolute;
1985 .badges li .badge-image {
1986     width: 100px;
1987     height: 100px;
1988     left: 10px;
1989     top: 0px;
1990     z-index: 1;
1992 .badges li .badge-actions {
1993     position: relative;
1995 .badges li .expireimage {
1996     width: 100px;
1997     height: 100px;
1998     left: 25px;
1999     top: 0px;
2000     position: absolute;
2001     z-index: 10;
2002     opacity: 0.85;
2005 #badge-image {
2006     background-color: transparent;
2007     padding: 0;
2008     position: relative;
2009     min-width: 100px;
2010     width: 20%;
2011     display: inline-block;
2012     vertical-align: top;
2013     margin-top: 17px;
2015     .expireimage {
2016         width: 100px;
2017         height: 100px;
2018         left: 0px;
2019         top: 0px;
2020         .opacity(85);
2021         position: absolute;
2022         z-index:10;
2023     }
2025     .singlebutton {
2026         padding-top: 5px;
2028         input {
2029             margin-left: 0px;
2030         }
2031     }
2033 .dir-rtl #badge-image {
2034     float: right;
2036     .expireimage {
2037         left: 41px;
2038     }
2040 #badge-details {
2041     display: inline-block;
2042     width: 79%;
2045 #badge-overview dl,
2046 #badge-details dl {
2047     margin: 0;
2049     dt,
2050     dd {
2051         vertical-align: top;
2052         padding: 3px 0;
2053     }
2054     dt {
2055         clear: both;
2056         display: inline-block;
2057         width: 20%;
2058         min-width: 100px;
2059     }
2060     dd {
2061         display: inline-block;
2062         width: 79%;
2063         margin-left: 1%;
2064     }
2067 .badge-profile {
2068     vertical-align: top;
2070 .connected {
2071     color: @successText;
2073 .notconnected {
2074     color: @errorText;
2076 .connecting {
2077     color: @warningText;
2079 #page-badges-award .recipienttable tr td {
2080     vertical-align: top;
2082 #page-badges-award .recipienttable tr td.actions .actionbutton {
2083     margin: 0.3em 0;
2084     padding: 0.5em 0;
2085     width: 100%;
2087 #page-badges-award .recipienttable tr td.existing,
2088 #page-badges-award .recipienttable tr td.potential {
2089     width: 42%;
2092 #issued-badge-table .activatebadge {
2093     display: inline-block;
2095 .statusbox.active {
2096     background-color: @successBackground;
2098 .statusbox.inactive {
2099     background-color: @warningBackground;
2101 .statusbox {
2102     text-align: center;
2103     margin-bottom: 5px;
2104     padding: 5px;
2106 .statusbox .activatebadge {
2107     display: inline-block;
2109 .statusbox .activatebadge input[type=submit]{
2110     margin: 3px;
2112 .activatebadge {
2113     margin: 0px;
2114     text-align: left;
2115     vertical-align: middle;
2117 .dir-rtl .activatebadge {
2118     text-align: right;
2120 img#persona_signin {
2121     cursor: pointer;
2123 .addcourse {
2124     float: right;
2126 .invisiblefieldset {
2127     display: inline;
2128     margin: 0;
2129     padding: 0;
2130     border-width: 0;
2132 .breadcrumb-nav {
2133     float: left;
2134     margin-bottom: 10px;
2136 .dir-rtl .breadcrumb-nav {
2137     float: right;
2139 .breadcrumb-button .singlebutton div {
2140     margin-right: 0;
2142 .breadcrumb-nav .breadcrumb {
2143     margin: 0;
2146 /** Header-bar styles **/
2147 .page-context-header {
2148     // We need to be explicit about the height of the header.
2149     @pageHeaderHeight: 140px;
2151     // Do not remove these rules.
2152     overflow: hidden;
2154     .page-header-image,
2155     .page-header-headings {
2156         display: block;
2157         position: relative;
2158     }
2159     .page-header-image {
2160         margin-bottom: 1em;
2161     }
2162     .page-header-headings {
2163         margin-top: 30px;
2164         margin-bottom: 10px;
2166         h1 {
2167             display: block;
2168         }
2169     }
2171     .page-header-headings,
2172     .header-button-group {
2173         position: relative;
2174         line-height: 24px;
2175         vertical-align: middle;
2176     }
2178     .header-button-group {
2179         display: block;
2181         a {
2182             position: relative;
2184             // Don't touch it unless you know exactly what you are doing.
2185             top: -0.4em;
2186         }
2187     }
2190 .dir-ltr .page-context-header {
2191     .page-header-image {
2192         float: left;
2193         margin-right: 1em;
2194     }
2196     .header-button-group {
2197         float: left;
2198     }
2201 .dir-rtl .page-context-header {
2202     .page-header-image {
2203         float: right;
2204         margin-left: 1em;
2205     }
2207     .header-button-group {
2208         float: right;
2209     }
2212 /** Action menu component styles **/
2213 .moodle-actionmenu,
2214 .moodle-actionmenu > ul,
2215 .moodle-actionmenu > ul > li {
2216     display: inline-block;
2219 .moodle-actionmenu ul {
2220     padding: 0;
2221     margin: 0;
2222     list-style-type: none;
2225 .section_action_menu .moodle-actionmenu ul.menubar {
2226     margin: 0;
2229 .section_action_menu .moodle-actionmenu ul.menu {
2230     margin: 0 10px 10px 0;
2233 .moodle-actionmenu .toggle-display,
2234 .moodle-actionmenu .menu-action-text {
2235     display: none; /** Hidden by default, display none so that we don't take up space. **/
2238 .jsenabled {
2239     .moodle-actionmenu[data-enhance] {
2240         display: block;
2241         .menu {
2242             display:none;
2243         }
2244         .toggle-display {
2245             display: inline; /** JS is enabled, we'll be using it so return display to normal **/
2246             .opacity(50);
2247         }
2248         .toggle-display.textmenu {
2249             display: block;
2250             margin-left: 4px;
2251             padding-left: 4px;
2252             padding-right: 4px;
2254             .iconsmall,
2255             .smallicon {
2256                 margin: 4px 4px 4px 0px;
2257                 padding: 8px 4px 0px 2px;
2258                 vertical-align: text-bottom;
2259             }
2261             .caret {
2262                 margin-top: 8px;
2263                 margin-left: 2px;
2264                 border-top-color: @navbarLinkColor;
2265                 &:hover,
2266                 &:active {
2267                     border-top-color: @navbarLinkColorActive;
2268                 }
2269             }
2270         }
2271     }
2272     .moodle-actionmenu[data-enhanced] {
2273         .toggle-display {
2274             .opacity(100);
2275         }
2276         .menu-action-text  {
2277             display:inline;
2278         }
2279     }
2281     &.dir-rtl {
2282         .moodle-actionmenu[data-enhance] {
2283             .toggle-display.textmenu {
2284                 margin-left: initial;
2285                 margin-right: 4px;
2287                 .caret {
2288                     margin-left: initial;
2289                     margin-right: 2px;
2290                 }
2291             }
2292         }
2293     }
2296 .moodle-actionmenu[data-enhanced].show  {
2298     position: relative;
2300     .menu {
2302         display:block;
2303         position: absolute;
2304         text-align: left;
2305         background-color: @dropdownBackground;
2306         border: 1px solid @dropdownBorder;
2307         z-index:1000;
2308         .border-radius(5px);
2309         .box-shadow(5px 5px 20px 0 #666);
2311         a {
2312             display: block;
2313             color: @dropdownLinkColor;
2314             padding:2px 1em 2px 28px;
2315             &:hover {
2316                 color: @dropdownLinkColorHover;
2317                 background-color: @dropdownLinkBackgroundHover;
2318             }
2319             &:first-child {
2320                 .border-top-radius(4px);
2321             }
2322             &:last-child {
2323                 .border-bottom-radius(4px);
2324             }
2325         }
2326         a.hidden {
2327             display:none;
2328         }
2329         img {
2330             vertical-align: middle;
2331         }
2332         .iconsmall,
2333         .smallicon {
2334             margin: 4px 4px 4px -24px;
2335             padding: 4px;
2336         }
2337         > li {
2338             display:block;
2339         }
2341         /** bottom left of button **/
2342         &.align-tl-bl {top: 100%;left:0;margin-top: 4px;}
2343         &.align-tr-bl {top: 100%;right: 100%;}
2344         &.align-bl-bl {bottom: 100%;left:0;}
2345         &.align-br-bl {bottom: 100%;right: 100%;}
2346         /** bottom right of button **/
2347         &.align-tl-br {top: 100%;left:100%;}
2348         &.align-tr-br {top: 100%;right: 0;margin-top: 4px;}
2349         &.align-bl-br {bottom: 100%;left:100%;}
2350         &.align-br-br {bottom: 100%;right: 0;}
2351         /** top left of button **/
2352         &.align-tl-tl {top: 0;left:0;}
2353         &.align-tr-tl {top: 0;right: 100%;margin-right: 4px;}
2354         &.align-bl-tl {bottom: 100%;left:0;margin-bottom: 4px;}
2355         &.align-br-tl {bottom: 100%;right: 100%;}
2356         /** top right of button **/
2357         &.align-tl-tr {top: 0;left:100%;margin-left: 4px;}
2358         &.align-tr-tr {top: 0;right: 0;}
2359         &.align-bl-tr {bottom: 100%;left:100%;}
2360         &.align-br-tr {bottom: 100%;right: 0;margin-bottom: 4px;}
2361     }
2362     /** no wrap is set - prevent menu items from wrapping **/
2363     &.nowrap-items .menu > li {
2364         white-space: nowrap;
2365     }
2368 .block .moodle-actionmenu {
2369     text-align: right;
2372 .dir-rtl {
2373     .moodle-actionmenu[data-enhanced].show  {
2374         .menu {
2375             text-align: right;
2376             left: 0;
2377             right: auto;
2378             a {
2379                 padding: 2px 28px 2px 1em;
2380             }
2381             .iconsmall,
2382             .smallicon {
2383                 margin-right: -24px;
2384                 margin-left: 4px;
2385             }
2387             /** bottom left of button **/
2388             &.align-tl-bl {left: auto; right: 0;}
2389             &.align-tr-bl {right: auto; left: 100%;}
2390             &.align-bl-bl {left: auto; right: 0;}
2391             &.align-br-bl {right: auto; left: 100%;}
2392             /** bottom right of button **/
2393             &.align-tl-br {left: auto; right: 100%;}
2394             &.align-tr-br {right: auto; left: 0;}
2395             &.align-bl-br {left: auto; right: 100%;}
2396             &.align-br-br {right: auto; left: 0;}
2397             /** top left of button **/
2398             &.align-tl-tl {left: auto; right: 0;}
2399             &.align-tr-tl {right: auto; left: 100%;}
2400             &.align-bl-tl {left: auto; right: 0;}
2401             &.align-br-tl {right: auto; left: 100%;}
2402             /** top right of button **/
2403             &.align-tl-tr {left: auto; right: 100%;}
2404             &.align-tr-tr {right: auto; left: 0;}
2405             &.align-bl-tr {left: auto; right: 100%;}
2406             &.align-br-tr {right: auto; left: 0;}
2407         }
2408     }
2409     .block .moodle-actionmenu {
2410         text-align: right;
2411     }
2414 ul.dragdrop-keyboard-drag li {
2415     list-style-type: none;
2418 .block-control-actions .moodle-core-dragdrop-draghandle img {
2419     width: 12px;
2420     height: 12px;
2423 a.disabled:hover,
2424 a.disabled {
2425     text-decoration: none;
2426     cursor: default;
2427     font-style: italic;
2428     color: #808080;
2430 body.lockscroll {
2431     height: 100%;
2432     overflow: hidden;
2435 .dir-rtl {
2436     // Bootstrap sets right margin to 0. Fail.
2437     // They set left margin to 25px so we will copy that.
2438     ul {
2439         margin-left: 0;
2440         margin-right: 25px;
2441     }
2444 .progressbar_container {
2445     max-width: 500px;
2446     margin: 0 auto;
2449 /* IE10 only fix for calendar titling */
2450 .ie10 .yui3-calendar-header-label {
2451     display: inline-block;
2454 dd:before,
2455 dd:after {
2456     display: block;
2457     content: " ";
2459 dd:after {
2460     clear: both;
2463 // Active tabs with links should have a different
2464 // cursor to indicate they are clickable.
2465 .nav-tabs > .active > a[href],
2466 .nav-tabs > .active > a[href]:hover,
2467 .nav-tabs > .active > a[href]:focus {
2468     cursor: pointer;
2471 .inplaceeditable {
2473     &.inplaceeditingon {
2474         position: relative;
2476         .editinstructions {
2477             margin-top: -30px;
2478             font-weight: normal;
2479             margin-right: 0;
2480             margin-left: 0;
2481             left: 0;
2482             right: auto;
2483             white-space: nowrap;
2484         }
2486         input {
2487             width: 330px;
2488             height: 16px;
2489             vertical-align: text-bottom;
2490             margin-bottom: 0;
2491         }
2493         select {
2494             margin-bottom: 0;
2495         }
2496     }
2498     .quickediticon img {
2499         opacity: 0.2;
2500     }
2502     .quickeditlink {
2503         color: inherit;
2504         text-decoration: inherit;
2505     }
2507     &:hover .quickeditlink .quickediticon img,
2508     .quickeditlink:focus .quickediticon img {
2509         opacity: 1;
2510     }
2512     &.inplaceeditable-toggle .quickediticon {
2513         display: none;
2514     }
2517 .dir-rtl {
2518     .inplaceeditable {
2519         &.inplaceeditingon {
2520             .editinstructions {
2521                 right: 0;
2522                 left: auto;
2523             }
2524         }
2525     }
2527 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2528     margin-top: -20px;