Merge branch 'MDL-55170_master' of https://github.com/nadavkav/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         .user-enroller-panel .uep-search-results .user {
1251             .count, .picture, .details {
1252                 float:right;
1253             }
1254             .options .enrol {
1255                 float:left;
1256             }
1257         }
1258     }
1261 #page-enrol-users .enrol-users-page-action input {
1262     margin-left: 0
1265 /**
1266 * Overide for RTL layout
1267 **/
1268 .dir-rtl .headermain {
1269     float: right;
1271 .dir-rtl .headermenu {
1272     float: left;
1274 .dir-rtl .loginbox .loginform .form-label {
1275     float: right;
1276     text-align: left;
1278 .dir-rtl .loginbox .loginform .form-input {
1279     text-align: right;
1280     margin-right: 1%;
1282 .dir-rtl .yui3-menu-hidden {
1283     left: 0;
1285 #page-admin-roles-define.dir-rtl #rolesform .felement {
1286     margin-right: 180px;
1288 #page-message-edit.dir-rtl table.generaltable th.c0 {
1289     text-align: right;
1291 .corelightbox {
1292     background-color: #CCC;
1293     position: absolute;
1294     top: 0;
1295     left: 0;
1296     width: 100%;
1297     height: 100%;
1298     text-align: center;
1300 .corelightbox img {
1301     position: fixed;
1302     top: 50%;
1303     left: 50%;
1306 .mod-indent-outer {
1307     display: table;
1309 .mod-indent {
1310     display: table-cell;
1312 .label .mod-indent {
1313     float:left;
1314     padding-top:20px
1317 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1318 @mod-indent-size: 30px;
1319 @mod-indent-levels: 16;
1320 .mod-indent-generate(@n, @i: 1) when (@i =< @n) {
1321     .mod-indent-@{i} {
1322         width: (@i * @mod-indent-size);
1323     }
1324     .mod-indent-generate(@n, (@i + 1));
1326 .mod-indent-generate(@n, @i: 1) when (@i = @n) {
1327     .mod-indent-huge {
1328         width: (@i * @mod-indent-size);
1329     }
1331 .mod-indent-generate(@mod-indent-levels);
1333 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1334 .resourcecontent .mediaplugin_mp3 object {
1335     height: 25px;
1336     width: 600px
1338 .resourcecontent audio.mediaplugin_html5audio {
1339     width: 600px
1341 /** Large resource images should avoid hidden overflow **/
1342 .resourceimage {
1343     max-width: 100%;
1345 /* Audio player size in 'inline' mode (can only change width, as above) */
1346 .mediaplugin_mp3 object {
1347     height: 15px;
1348     width: 300px
1350 audio.mediaplugin_html5audio {
1351     width: 300px
1353 /* TinyMCE moodle media preview frame should not have padding */
1354 .core_media_preview.pagelayout-embedded #content {
1355     padding: 0;
1357 .core_media_preview.pagelayout-embedded #maincontent {
1358     height: 0;
1360 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1361     padding: 0;
1362     margin: 0;
1363     min-width: 0;
1364     background: none;
1366 /** Fix YUI 2 Treeview for Right to left languages **/
1367 .dir-rtl .ygtvtn,
1368 .dir-rtl .ygtvtm,
1369 .dir-rtl .ygtvtmh,
1370 .dir-rtl .ygtvtmhh,
1371 .dir-rtl .ygtvtp,
1372 .dir-rtl .ygtvtph,
1373 .dir-rtl .ygtvtphh,
1374 .dir-rtl .ygtvln,
1375 .dir-rtl .ygtvlm,
1376 .dir-rtl .ygtvlmh,
1377 .dir-rtl .ygtvlmhh,
1378 .dir-rtl .ygtvlp,
1379 .dir-rtl .ygtvlph,
1380 .dir-rtl .ygtvlphh,
1381 .dir-rtl .ygtvdepthcell,
1382 .dir-rtl .ygtvok,
1383 .dir-rtl .ygtvok:hover,
1384 .dir-rtl .ygtvcancel,
1385 .dir-rtl .ygtvcancel:hover {
1386     width: 18px;
1387     height: 22px;
1388     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1389     background-repeat: no-repeat;
1390     cursor: pointer;
1392 .dir-rtl .ygtvtn {
1393     background-position: 0 -5600px;
1395 .dir-rtl .ygtvtm {
1396     background-position: 0 -4000px;
1398 .dir-rtl .ygtvtmh,
1399 .dir-rtl .ygtvtmhh {
1400     background-position: 0 -4800px;
1402 .dir-rtl .ygtvtp {
1403     background-position: 0 -6400px;
1405 .dir-rtl .ygtvtph,
1406 .dir-rtl .ygtvtphh {
1407     background-position: 0 -7200px;
1409 .dir-rtl .ygtvln {
1410     background-position: 0 -1600px;
1412 .dir-rtl .ygtvlm {
1413     background-position: 0 0;
1415 .dir-rtl .ygtvlmh,
1416 .dir-rtl .ygtvlmhh {
1417     background-position: 0 -800px;
1419 .dir-rtl .ygtvlp {
1420     background-position: 0 -2400px;
1422 .dir-rtl .ygtvlph,
1423 .dir-rtl .ygtvlphh {
1424     background-position: 0 -3200px
1426 .dir-rtl .ygtvdepthcell {
1427     background-position: 0 -8000px;
1429 .dir-rtl .ygtvok {
1430     background-position: 0 -8800px;
1432 .dir-rtl .ygtvok:hover {
1433     background-position: 0 -8844px;
1435 .dir-rtl .ygtvcancel {
1436     background-position: 0 -8822px;
1438 .dir-rtl .ygtvcancel:hover {
1439     background-position: 0 -8866px;
1441 .dir-rtl.yui-skin-sam .yui-panel .hd {
1442     text-align: right;
1444 .dir-rtl .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
1445     text-align: right;
1447 /** Fix TinyMCE editor right to left **/
1448 .dir-rtl .clearlooks2.ie9 .mceAlert .mceMiddle span,.dir-rtl .clearlooks2 .mceConfirm .mceMiddle span {
1449     top: 44px;
1451 .dir-rtl .o2k7Skin table,
1452 .dir-rtl .o2k7Skin tbody,
1453 .dir-rtl .o2k7Skin a,
1454 .dir-rtl .o2k7Skin img,
1455 .dir-rtl .o2k7Skin tr,
1456 .dir-rtl .o2k7Skin div,
1457 .dir-rtl .o2k7Skin td,
1458 .dir-rtl .o2k7Skin iframe,
1459 .dir-rtl .o2k7Skin span,
1460 .dir-rtl .o2k7Skin *,
1461 .dir-rtl .o2k7Skin .mceText,
1462 .dir-rtl .o2k7Skin .mceListBox .mceText {
1463     text-align: right;
1465 .path-rating .ratingtable {
1466     width: 100%;
1467     margin-bottom: 1em;
1469 .path-rating .ratingtable th.rating {
1470     width: 100%;
1472 .path-rating .ratingtable td.rating,
1473 .path-rating .ratingtable td.time {
1474     white-space: nowrap;
1475     text-align: center;
1477 .initialbar {
1478     a, strong {
1479         padding-left: 3px;
1480         padding-right: 3px;
1481     }
1483 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1484 .moodle-dialogue-base .moodle-dialogue-lightbox {
1485     background-color: #AAA;
1487 .moodle-dialogue-base .hidden,
1488 .moodle-dialogue-base .moodle-dialogue-hidden {
1489     display: none;
1491 .no-scrolling {
1492     overflow: hidden;
1494 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1495     left: 0px;
1496     top: 0px;
1497     right: 0px;
1498     bottom: -50px;
1499     position: fixed;
1501 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1502     overflow: auto;
1504 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1505     width: 28px;
1506     height: 16px;
1507     background-size: 100%;
1509 .moodle-dialogue-base .moodle-dialogue {
1510     padding: 0;
1511     margin: 0;
1512     background: none;
1513     border: none;
1514     z-index: 600;
1515     outline: #000 dotted 0;
1517 .moodle-dialogue-base .moodle-dialogue-wrap {
1518     margin-top: -3px;
1519     margin-left: -3px;
1520     background-color: #fff;
1521     border: 1px solid #ccc;
1522     .border-radius(10px);
1523     .box-shadow(5px 5px 20px 0 #666);
1525 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd,
1526 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1527     margin: 0;
1528     padding: 5px;
1529     font-size: 12px;
1530     font-weight: normal;
1531     letter-spacing: 1px;
1532     color: #333;
1533     text-align: center;
1534     text-shadow: 1px 1px 1px #fff;
1535     .border-radius(10px 10px 0 0);
1536     border-bottom: 1px solid #bbb;
1537     background: #ccc;
1538     #gradient > .vertical(#fff, #ccc);
1539     filter: 0;
1541 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1542     margin: 0;
1543     padding: 0;
1544     display: inline;
1545     font-size: 100%;
1546     font-weight: bold;
1548 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1549     padding: 5px;
1551 .moodle-dialogue-base .closebutton {
1552     width: 25px;
1553     height: 15px;
1554     float: right;
1555     vertical-align: middle;
1556     display: inline-block;
1557     cursor: pointer;
1558     padding: 0;
1559     background-image: url([[pix:theme|sprite]]);
1560     background-repeat: no-repeat;
1561     border-style: none;
1563 .dir-rtl .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1564     left: 0;
1565     right: auto;
1567 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1568     padding: 1em;
1569     line-height: 2em;
1570     color: #555;
1571     font-size: 12px;
1573 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-content {
1574     padding: 0;
1575     background: #FFF;
1578 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd {
1579     padding: 10px;
1580     font-size: 16px;
1583 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1584     overflow: auto;
1585     position: absolute;
1586     top: 0px;
1587     bottom: 50px;
1588     left: 0px;
1589     right: 0px;
1590     margin: 0px;
1591     border: 0px;
1593 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd,
1594 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-wrap {
1595     border-radius: 0px;
1597 .moodle-dialogue-confirm .confirmation-dialogue {
1598     text-align: center;
1600 .moodle-dialogue-confirm .confirmation-dialogue input {
1601     text-align: center;
1603 .moodle-dialogue-exception .moodle-exception-message {
1604     text-align: center
1606 .moodle-dialogue-exception .moodle-exception-param label {
1607     font-weight: bold;
1609 .moodle-dialogue-exception .param-stacktrace label {
1610     background-color: #EEE;
1611     border: 1px solid #ccc;
1612     border-bottom-width: 0;
1614 .moodle-dialogue-exception .param-stacktrace pre {
1615     border: 1px solid #ccc;
1616     background-color: #fff;
1618 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1619     color: navy;
1620     font-size: @fontSizeSmall;
1622 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1623     color: @errorText;
1624     font-size: @fontSizeSmall;
1626 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1627     color: #333;
1628     font-size: 90%;
1629     border-bottom: 1px solid #eee;
1631 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1632     padding: 0;
1633     margin: 0.7em 1em;
1634     text-align: right;
1635     background-color: #FFF;
1636     font-size: 12px;
1638 .moodle-dialogue-confirm .confirmation-message {
1639     margin: 0.5em 1em;
1641 .moodle-dialogue-confirm .confirmation-dialogue input {
1642     min-width: 80px
1644 .moodle-dialogue-exception .moodle-exception-message {
1645     margin: 1em;
1647 .moodle-dialogue-exception .moodle-exception-param {
1648     margin-bottom: 0.5em;
1650 .moodle-dialogue-exception .moodle-exception-param label {
1651     width: 150px;
1653 .moodle-dialogue-exception .param-stacktrace label {
1654     display: block;
1655     margin: 0;
1656     padding: 4px 1em;
1658 .moodle-dialogue-exception .param-stacktrace pre {
1659     display: block;
1660     height: 200px;
1661     overflow: auto;
1663 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1664     display: inline-block;
1665     margin: 4px 0;
1667 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1668     display: inline-block;
1669     width: 50px;
1670     margin: 4px 1em;
1672 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1673     padding-left: 25px;
1674     margin-bottom: 4px;
1675     padding-bottom: 4px;
1677 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1678     .opacity(75);
1679     width: 100%;
1680     height: 100%;
1681     top: 0;
1682     left: 0;
1683     background-color: white;
1684     text-align: center;
1685     padding: 10% 0;
1687 /* Apply a default max-height on tooltip text */
1688 .moodle-dialogue .tooltiptext {
1689     max-height: 300px;
1692 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1693     z-index: 3001;
1695     .moodle-dialogue-bd {
1696         overflow: auto;
1697     }
1700 /* Question Bank - Question Chooser "Close" button */
1701 #page-question-edit.dir-rtl a.container-close {
1702     right: auto;
1703     left: 6px;
1705 /**
1706  * Chooser Dialogues (moodle-core-chooserdialogue)
1707  *
1708  * This CSS belong to the chooser dialogue which should work both with, and
1709  * without javascript enabled
1710  */
1711 /* Hide the dialog and it's title */
1712 .chooserdialoguebody,
1713 .choosertitle {
1714     display: none;
1716 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1717     margin: 0;
1719 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1720     padding: 0;
1721     background: #F2F2F2;
1722     .border-bottom-radius(10px);
1724 /* Center the submit buttons within the area */
1725 .choosercontainer #chooseform .submitbuttons {
1726     padding: 0.7em 0;
1727     text-align: center;
1729 /* Fixed for safari browser on iPhone4S with ios7.*/
1730 @media (max-height: 639px) {
1731     .ios.safari .choosercontainer #chooseform .submitbuttons {
1732         padding: 45px 0;
1733     }
1735 .choosercontainer #chooseform .submitbuttons input {
1736     min-width: 100px;
1737     margin: 0 0.5em;
1739 /* Various settings for the options area */
1740 .choosercontainer #chooseform .options {
1741     position: relative;
1742     border-bottom: 1px solid #BBBBBB;
1744 /* Only set these options if we're showing the js container */
1745 .jschooser .choosercontainer #chooseform .alloptions {
1746     overflow-x: hidden;
1747     overflow-y: auto;
1748     max-width: 20.3em;
1749     .box-shadow(inset 0 0 30px 0px #ccc);
1750     .option {
1751         input[type=radio] {
1752             display: inline-block;
1753         }
1754         .modicon {
1755             display: inline-block;
1756         }
1757         .typename {
1758             display: inline-block;
1759             width: 65%;
1760         }
1761     }
1763 .dir-rtl.jschooser .choosercontainer #chooseform .alloptions {
1764     max-width: 18.3em;
1766 /* Settings for option rows and option subtypes */
1767 .choosercontainer #chooseform .moduletypetitle,
1768 .choosercontainer #chooseform .option,
1769 .choosercontainer #chooseform .nonoption {
1770     margin-bottom: 0;
1771     padding: 0 1.6em 0 1.6em;
1773 .choosercontainer #chooseform .moduletypetitle {
1774     text-transform: uppercase;
1775     padding-top: 1.2em;
1776     padding-bottom: 0.4em;
1778 .choosercontainer #chooseform .option .typename,
1779 .choosercontainer #chooseform .option span.modicon img.icon,
1780 .choosercontainer #chooseform .nonoption .typename,
1781 .choosercontainer #chooseform .nonoption span.modicon img.icon {
1782     padding: 0 0 0 0.5em;
1784 .dir-rtl .choosercontainer #chooseform .option .typename,
1785 .dir-rtl .choosercontainer #chooseform .option span.modicon img.icon,
1786 .dir-rtl .choosercontainer #chooseform .nonoption .typename,
1787 .dir-rtl .choosercontainer #chooseform .nonoption span.modicon img.icon {
1788     padding: 0 0.5em 0 0;
1791 .chooserdialogue-course-modchooser .choosercontainer #chooseform .option span.modicon img.icon,
1792 .chooserdialogue-course-modchooser .choosercontainer #chooseform .nonoption span.modicon img.icon {
1793     height: 24px;
1794     width: 24px;
1796 .choosercontainer #chooseform .option input[type=radio],
1797 .choosercontainer #chooseform .option span.typename,
1798 .choosercontainer #chooseform .option span.modicon {
1799     vertical-align: middle;
1801 .choosercontainer #chooseform .option label {
1802     display: block;
1803     padding: 0.3em 0 0.1em 0;
1804     border-bottom: 1px solid #FFFFFF;
1806 .choosercontainer #chooseform .nonoption {
1807     padding-left: 2.7em;
1808     padding-top: 0.3em;
1809     padding-bottom: 0.1em;
1811 .dir-rtl .choosercontainer #chooseform .nonoption {
1812     padding-right: 2.7em;
1813     padding-left: 0;
1815 .choosercontainer #chooseform .subtype {
1816     margin-bottom: 0;
1817     padding: 0 1.6em 0 3.2em;
1819 .dir-rtl .choosercontainer #chooseform .subtype {
1820     padding: 0 3.2em 0 1.6em;
1822 .choosercontainer #chooseform .subtype .typename {
1823     margin: 0 0 0 0.2em;
1825 .dir-rtl .choosercontainer #chooseform .subtype .typename {
1826     margin: 0 0.2em 0 0;
1828 /* The instruction/help area */
1829 .jschooser .choosercontainer #chooseform .instruction,
1830 .jschooser .choosercontainer #chooseform .typesummary {
1831     display: none;
1832     position: absolute;
1833     top: 0;
1834     right: 0;
1835     bottom: 0;
1836     left: 20.3em;
1837     margin: 0;
1838     padding: 1.6em;
1839     background-color: #fff;
1840     overflow-x: hidden;
1841     overflow-y: auto;
1842     line-height: 2em;
1844 .dir-rtl.jschooser .choosercontainer #chooseform .instruction,
1845 .dir-rtl.jschooser .choosercontainer #chooseform .typesummary {
1846     left: 0;
1847     right: 18.5em;
1848     border-right: 1px solid grey;
1850 /* Selected option settings */
1851 .jschooser .choosercontainer #chooseform .instruction,
1852 .choosercontainer #chooseform .selected .typesummary {
1853     display: block;
1855 .choosercontainer #chooseform .selected {
1856     background-color: #fff;
1857     .box-shadow(0px 0 10px 0 #ccc);
1859 .section-modchooser-link img.smallicon {
1860     padding: 3px;
1862 /* Form element: listing */
1863 .formlistingradio {
1864     padding-bottom: 25px;
1865     padding-right: 10px;
1867 .formlistinginputradio {
1868     float: left;
1870 .formlistingmain {
1871     min-height: 225px;
1873 .formlisting {
1874     position: relative;
1875     margin: 15px 0;
1876     padding: 1px 19px 14px;
1877     background-color: white;
1878     border: 1px solid #DDD;
1879     .border-radius(4px);
1881 .formlistingmore {
1882     position: absolute;
1883     cursor: pointer;
1884     bottom: -1px;
1885     right: -1px;
1886     padding: 3px 7px;
1887     font-size: 12px;
1888     font-weight: bold;
1889     background-color: whiteSmoke;
1890     border: 1px solid #ddd;
1891     color: #9DA0A4;
1892     .border-radius(4px 0 4px 0);
1894 .formlistingall {
1895     margin: 15px 0;
1896     padding: 0;
1897     .border-radius(4px);
1899 .formlistingrow {
1900     cursor: pointer;
1901     border-bottom: 1px solid;
1902     border-color: #E1E1E8;
1903     border-left: 1px solid #E1E1E8;
1904     border-right: 1px solid #E1E1E8;
1905     background-color: #F7F7F9;
1906     .border-radius(0 0 4px 4px);
1907     padding: 6px;
1908     top: 50%;
1909     left: 50%;
1910     min-height: 34px;
1911     float: left;
1912     width: 150px;
1914 body.jsenabled .formlistingradio {
1915     display: none;
1917 body.jsenabled .formlisting {
1918     display: block;
1921 /* Badges styles */
1922 table.collection {
1923     .table;
1924     .table-bordered;
1925     .table-striped;
1927 table.collection .name {
1928     text-align: left;
1929     vertical-align: middle;
1931 table.collection .awards {
1932     width: 10%;
1933     text-align: center;
1934     vertical-align: middle;
1936 table.collection .criteria {
1937     width: 40%;
1938     text-align: left;
1939     vertical-align: top;
1941 table.collection .badgeimage,
1942 table.collection .status {
1943     width: 15%;
1944     text-align: center;
1945     vertical-align: middle;
1947 table.collection .description {
1948     width: 25%;
1949     text-align: left;
1951 .dir-rtl table.collection {
1952     .name,
1953     .criteria,
1954     .description  {
1955         text-align: right;
1956     }
1958 table.collection .actions {
1959     width: 11em;
1960     text-align: center;
1961     vertical-align: middle;
1964 a.criteria-action {
1965     padding: 0px 3px;
1966     float: right;
1968 div.criteria-description {
1969     padding: 10px 15px;
1970     margin: 5px 0px;
1971     background: none repeat scroll 0 0 #f9f9f9;
1972     border: 1px solid #EEE;
1974 ul.badges {
1975     margin: 0;
1976     list-style: none;
1978 .badges li {
1979     position: relative;
1980     display: inline-block;
1981     padding-top: 1em;
1982     text-align: center;
1983     vertical-align: top;
1984     width: 150px;
1986 .badges li .badge-name {
1987     display: block;
1988     padding: 5px;
1990 .badges li > img {
1991     position: absolute;
1993 .badges li .badge-image {
1994     width: 100px;
1995     height: 100px;
1996     left: 10px;
1997     top: 0px;
1998     z-index: 1;
2000 .badges li .badge-actions {
2001     position: relative;
2003 .badges li .expireimage {
2004     width: 100px;
2005     height: 100px;
2006     left: 25px;
2007     top: 0px;
2008     position: absolute;
2009     z-index: 10;
2010     opacity: 0.85;
2013 #badge-image {
2014     background-color: transparent;
2015     padding: 0;
2016     position: relative;
2017     min-width: 100px;
2018     width: 20%;
2019     display: inline-block;
2020     vertical-align: top;
2021     margin-top: 17px;
2023     .expireimage {
2024         width: 100px;
2025         height: 100px;
2026         left: 0px;
2027         top: 0px;
2028         .opacity(85);
2029         position: absolute;
2030         z-index:10;
2031     }
2033     .singlebutton {
2034         padding-top: 5px;
2036         input {
2037             margin-left: 0px;
2038         }
2039     }
2041 .dir-rtl #badge-image {
2042     float: right;
2044     .expireimage {
2045         left: 41px;
2046     }
2048 #badge-details {
2049     display: inline-block;
2050     width: 79%;
2053 #badge-overview dl,
2054 #badge-details dl {
2055     margin: 0;
2057     dt,
2058     dd {
2059         vertical-align: top;
2060         padding: 3px 0;
2061     }
2062     dt {
2063         clear: both;
2064         display: inline-block;
2065         width: 20%;
2066         min-width: 100px;
2067     }
2068     dd {
2069         display: inline-block;
2070         width: 79%;
2071         margin-left: 1%;
2072     }
2075 .badge-profile {
2076     vertical-align: top;
2078 .connected {
2079     color: @successText;
2081 .notconnected {
2082     color: @errorText;
2084 .connecting {
2085     color: @warningText;
2087 #page-badges-award .recipienttable tr td {
2088     vertical-align: top;
2090 #page-badges-award .recipienttable tr td.actions .actionbutton {
2091     margin: 0.3em 0;
2092     padding: 0.5em 0;
2093     width: 100%;
2095 #page-badges-award .recipienttable tr td.existing,
2096 #page-badges-award .recipienttable tr td.potential {
2097     width: 42%;
2100 #issued-badge-table .activatebadge {
2101     display: inline-block;
2103 .statusbox.active {
2104     background-color: @successBackground;
2106 .statusbox.inactive {
2107     background-color: @warningBackground;
2109 .statusbox {
2110     text-align: center;
2111     margin-bottom: 5px;
2112     padding: 5px;
2114 .statusbox .activatebadge {
2115     display: inline-block;
2117 .statusbox .activatebadge input[type=submit]{
2118     margin: 3px;
2120 .activatebadge {
2121     margin: 0px;
2122     text-align: left;
2123     vertical-align: middle;
2125 .dir-rtl .activatebadge {
2126     text-align: right;
2128 img#persona_signin {
2129     cursor: pointer;
2131 .addcourse {
2132     float: right;
2134 .invisiblefieldset {
2135     display: inline;
2136     margin: 0;
2137     padding: 0;
2138     border-width: 0;
2140 .breadcrumb-nav {
2141     float: left;
2142     margin-bottom: 10px;
2144 .dir-rtl .breadcrumb-nav {
2145     float: right;
2147 .breadcrumb-button .singlebutton div {
2148     margin-right: 0;
2150 .breadcrumb-nav .breadcrumb {
2151     margin: 0;
2154 /** Header-bar styles **/
2155 .page-context-header {
2156     // We need to be explicit about the height of the header.
2157     @pageHeaderHeight: 140px;
2159     // Do not remove these rules.
2160     overflow: hidden;
2162     .page-header-image,
2163     .page-header-headings {
2164         display: block;
2165         position: relative;
2166     }
2167     .page-header-image {
2168         margin-bottom: 1em;
2169     }
2170     .page-header-headings {
2171         margin-top: 30px;
2172         margin-bottom: 10px;
2174         h1 {
2175             display: block;
2176         }
2177     }
2179     .page-header-headings,
2180     .header-button-group {
2181         position: relative;
2182         line-height: 24px;
2183         vertical-align: middle;
2184     }
2186     .header-button-group {
2187         display: block;
2189         a {
2190             position: relative;
2192             // Don't touch it unless you know exactly what you are doing.
2193             top: -0.4em;
2194         }
2195     }
2198 .dir-ltr .page-context-header {
2199     .page-header-image {
2200         float: left;
2201         margin-right: 1em;
2202     }
2204     .header-button-group {
2205         float: left;
2206     }
2209 .dir-rtl .page-context-header {
2210     .page-header-image {
2211         float: right;
2212         margin-left: 1em;
2213     }
2215     .header-button-group {
2216         float: right;
2217     }
2220 /** Action menu component styles **/
2221 .moodle-actionmenu,
2222 .moodle-actionmenu > ul,
2223 .moodle-actionmenu > ul > li {
2224     display: inline-block;
2227 .moodle-actionmenu ul {
2228     padding: 0;
2229     margin: 0;
2230     list-style-type: none;
2233 .section_action_menu .moodle-actionmenu ul.menubar {
2234     margin: 0;
2237 .section_action_menu .moodle-actionmenu ul.menu {
2238     margin: 0 10px 10px 0;
2241 .moodle-actionmenu .toggle-display,
2242 .moodle-actionmenu .menu-action-text {
2243     display: none; /** Hidden by default, display none so that we don't take up space. **/
2246 .jsenabled {
2247     .moodle-actionmenu[data-enhance] {
2248         display: block;
2249         .menu {
2250             display:none;
2251         }
2252         .toggle-display {
2253             display: inline; /** JS is enabled, we'll be using it so return display to normal **/
2254             .opacity(50);
2255         }
2256         .toggle-display.textmenu {
2257             display: block;
2258             margin-left: 4px;
2259             padding-left: 4px;
2260             padding-right: 4px;
2262             .iconsmall,
2263             .smallicon {
2264                 margin: 4px 4px 4px 0px;
2265                 padding: 8px 4px 0px 2px;
2266                 vertical-align: text-bottom;
2267             }
2269             .caret {
2270                 margin-top: 8px;
2271                 margin-left: 2px;
2272                 border-top-color: @navbarLinkColor;
2273                 &:hover,
2274                 &:active {
2275                     border-top-color: @navbarLinkColorActive;
2276                 }
2277             }
2278         }
2279     }
2280     .moodle-actionmenu[data-enhanced] {
2281         .toggle-display {
2282             .opacity(100);
2283         }
2284         .menu-action-text  {
2285             display:inline;
2286         }
2287     }
2289     &.dir-rtl {
2290         .moodle-actionmenu[data-enhance] {
2291             .toggle-display.textmenu {
2292                 margin-left: initial;
2293                 margin-right: 4px;
2295                 .caret {
2296                     margin-left: initial;
2297                     margin-right: 2px;
2298                 }
2299             }
2300         }
2301     }
2304 .moodle-actionmenu[data-enhanced].show  {
2306     position: relative;
2308     .menu {
2310         display:block;
2311         position: absolute;
2312         text-align: left;
2313         background-color: @dropdownBackground;
2314         border: 1px solid @dropdownBorder;
2315         z-index:1000;
2316         .border-radius(5px);
2317         .box-shadow(5px 5px 20px 0 #666);
2319         a {
2320             display: block;
2321             color: @dropdownLinkColor;
2322             padding:2px 1em 2px 28px;
2323             &:hover {
2324                 color: @dropdownLinkColorHover;
2325                 background-color: @dropdownLinkBackgroundHover;
2326             }
2327             &:first-child {
2328                 .border-top-radius(4px);
2329             }
2330             &:last-child {
2331                 .border-bottom-radius(4px);
2332             }
2333         }
2334         a.hidden {
2335             display:none;
2336         }
2337         img {
2338             vertical-align: middle;
2339         }
2340         .iconsmall,
2341         .smallicon {
2342             margin: 4px 4px 4px -24px;
2343             padding: 4px;
2344         }
2345         > li {
2346             display:block;
2347         }
2349         /** bottom left of button **/
2350         &.align-tl-bl {top: 100%;left:0;margin-top: 4px;}
2351         &.align-tr-bl {top: 100%;right: 100%;}
2352         &.align-bl-bl {bottom: 100%;left:0;}
2353         &.align-br-bl {bottom: 100%;right: 100%;}
2354         /** bottom right of button **/
2355         &.align-tl-br {top: 100%;left:100%;}
2356         &.align-tr-br {top: 100%;right: 0;margin-top: 4px;}
2357         &.align-bl-br {bottom: 100%;left:100%;}
2358         &.align-br-br {bottom: 100%;right: 0;}
2359         /** top left of button **/
2360         &.align-tl-tl {top: 0;left:0;}
2361         &.align-tr-tl {top: 0;right: 100%;margin-right: 4px;}
2362         &.align-bl-tl {bottom: 100%;left:0;margin-bottom: 4px;}
2363         &.align-br-tl {bottom: 100%;right: 100%;}
2364         /** top right of button **/
2365         &.align-tl-tr {top: 0;left:100%;margin-left: 4px;}
2366         &.align-tr-tr {top: 0;right: 0;}
2367         &.align-bl-tr {bottom: 100%;left:100%;}
2368         &.align-br-tr {bottom: 100%;right: 0;margin-bottom: 4px;}
2369     }
2370     /** no wrap is set - prevent menu items from wrapping **/
2371     &.nowrap-items .menu > li {
2372         white-space: nowrap;
2373     }
2376 .block .moodle-actionmenu {
2377     text-align: right;
2380 .dir-rtl {
2381     .moodle-actionmenu[data-enhanced].show  {
2382         .menu {
2383             text-align: right;
2384             left: 0;
2385             right: auto;
2386             a {
2387                 padding: 2px 28px 2px 1em;
2388             }
2389             .iconsmall,
2390             .smallicon {
2391                 margin-right: -24px;
2392                 margin-left: 4px;
2393             }
2395             /** bottom left of button **/
2396             &.align-tl-bl {left: auto; right: 0;}
2397             &.align-tr-bl {right: auto; left: 100%;}
2398             &.align-bl-bl {left: auto; right: 0;}
2399             &.align-br-bl {right: auto; left: 100%;}
2400             /** bottom right of button **/
2401             &.align-tl-br {left: auto; right: 100%;}
2402             &.align-tr-br {right: auto; left: 0;}
2403             &.align-bl-br {left: auto; right: 100%;}
2404             &.align-br-br {right: auto; left: 0;}
2405             /** top left of button **/
2406             &.align-tl-tl {left: auto; right: 0;}
2407             &.align-tr-tl {right: auto; left: 100%;}
2408             &.align-bl-tl {left: auto; right: 0;}
2409             &.align-br-tl {right: auto; left: 100%;}
2410             /** top right of button **/
2411             &.align-tl-tr {left: auto; right: 100%;}
2412             &.align-tr-tr {right: auto; left: 0;}
2413             &.align-bl-tr {left: auto; right: 100%;}
2414             &.align-br-tr {right: auto; left: 0;}
2415         }
2416     }
2417     .block .moodle-actionmenu {
2418         text-align: right;
2419     }
2422 ul.dragdrop-keyboard-drag li {
2423     list-style-type: none;
2426 .block-control-actions .moodle-core-dragdrop-draghandle img {
2427     width: 12px;
2428     height: 12px;
2431 a.disabled:hover,
2432 a.disabled {
2433     text-decoration: none;
2434     cursor: default;
2435     font-style: italic;
2436     color: #808080;
2438 body.lockscroll {
2439     height: 100%;
2440     overflow: hidden;
2443 .dir-rtl {
2444     // Bootstrap sets right margin to 0. Fail.
2445     // They set left margin to 25px so we will copy that.
2446     ul {
2447         margin-left: 0;
2448         margin-right: 25px;
2449     }
2452 .progressbar_container {
2453     max-width: 500px;
2454     margin: 0 auto;
2457 /* IE10 only fix for calendar titling */
2458 .ie10 .yui3-calendar-header-label {
2459     display: inline-block;
2462 dd:before,
2463 dd:after {
2464     display: block;
2465     content: " ";
2467 dd:after {
2468     clear: both;
2471 // Active tabs with links should have a different
2472 // cursor to indicate they are clickable.
2473 .nav-tabs > .active > a[href],
2474 .nav-tabs > .active > a[href]:hover,
2475 .nav-tabs > .active > a[href]:focus {
2476     cursor: pointer;
2479 .inplaceeditable {
2481     &.inplaceeditingon {
2482         position: relative;
2484         .editinstructions {
2485             margin-top: -30px;
2486             font-weight: normal;
2487             margin-right: 0;
2488             margin-left: 0;
2489             left: 0;
2490             right: auto;
2491             white-space: nowrap;
2492         }
2494         input {
2495             width: 330px;
2496             height: 16px;
2497             vertical-align: text-bottom;
2498             margin-bottom: 0;
2499         }
2501         select {
2502             margin-bottom: 0;
2503         }
2504     }
2506     .quickediticon img {
2507         opacity: 0.2;
2508     }
2510     .quickeditlink {
2511         color: inherit;
2512         text-decoration: inherit;
2513     }
2515     &:hover .quickeditlink .quickediticon img,
2516     .quickeditlink:focus .quickediticon img {
2517         opacity: 1;
2518     }
2520     &.inplaceeditable-toggle .quickediticon {
2521         display: none;
2522     }
2525 .dir-rtl {
2526     .inplaceeditable {
2527         &.inplaceeditingon {
2528             .editinstructions {
2529                 right: 0;
2530                 left: auto;
2531             }
2532         }
2533     }
2535 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2536     margin-top: -20px;