MDL-50919 tags: new UI for managing tags
[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 // Login
505 .loginbox {
506     margin: 15px;
507     overflow: visible;
509 .loginbox.twocolumns {
510     margin: 15px;
512 .loginbox h2,
513 .loginbox .subcontent {
514     margin: 5px;
515     padding: 10px;
516     text-align: center;
518 .loginbox .loginpanel .desc {
519     margin: 0;
520     padding: 0;
521     margin-bottom: 5px;
522     margin-top:15px;
524 .loginbox .signuppanel .subcontent {
525     text-align: left;
527 .dir-rtl .loginbox .signuppanel .subcontent {
528     text-align: right;
530 .loginbox .loginsub {
531     margin-left: 0;
532     margin-right: 0;
534 .loginbox .guestsub,
535 .loginbox .forgotsub,
536 .loginbox .potentialidps {
537     margin: 5px 12%;
539 .loginbox .potentialidps .potentialidplist {
540     margin-left: 40%;
542 .loginbox .potentialidps .potentialidplist div {
543     text-align: left;
545 .loginbox .loginform {
546     margin-top: 1em;
547     text-align: left;
549 .loginbox .loginform .form-label {
550     float: left;
551     text-align: right;
552     width: 49%;
553     white-space: nowrap;
555 .loginbox .loginform .form-input {
556     float: right;
557     width: 50%;
559 .loginbox .loginform .form-input input {
560     width: 6em;
562 .loginbox .signupform {
563     margin-top: 1em;
564     text-align: center;
566 .loginbox.twocolumns .loginpanel,
567 .loginbox.twocolumns .signuppanel {
568     width: 48%;
569     border: 0;
570     margin: 0;
571     padding: 0;
572     .box-sizing(border-box);
573     display: block;
574     float: left;
575     margin-left: 2.76243%;
576     min-height: 30px;
577     margin-bottom: -2000px;
578     padding-bottom: 2000px;
580 .dir-rtl {
581     .loginbox.twocolumns .loginpanel,
582     .loginbox.twocolumns .signuppanel {
583         float:right;
584     }
587 .loginbox .potentialidp .smallicon {
588     vertical-align: text-bottom;
589     margin: 0 .3em;
592 // Notes
593 .notepost {
594     margin-bottom: 1em;
596 .notepost .userpicture {
597     float: left;
598     margin-right: 5px;
600 .notepost .content,
601 .notepost .footer {
602     clear: both;
604 .notesgroup {
605     margin-left: 20px;
608 // My Moodle
609 .path-my .coursebox .overview {
610     margin: 15px 30px 10px 30px;
612 .path-my .coursebox .info {
613     float: none;
614     margin: 0;
617 // Modules
618 .mod_introbox {
619     padding: 10px;
621 table.mod_index {
622     width: 100%;
625 // Comments
626 .comment-ctrl {
627     font-size: 12px;
628     display: none;
629     margin: 0;
630     padding: 0;
632 .comment-ctrl h5 {
633     margin: 0;
634     padding: 5px;
636 .comment-area {
637     max-width: 400px;
638     padding: 5px;
640 .comment-area textarea {
641     width: 100%;
642     overflow: auto;
643     &.fullwidth {
644         -webkit-box-sizing: border-box;
645         -moz-box-sizing: border-box;
646         box-sizing: border-box;
647     }
649 .comment-area .fd {
650     text-align: right;
652 .comment-meta span {
653     color: gray;
655 .comment-link img {
656     vertical-align: text-bottom;
658 .comment-list {
659     font-size: 11px;
660     overflow: auto;
661     list-style: none;
662     padding: 0;
663     margin: 0;
665 .comment-list li {
666     margin: 2px;
667     list-style: none;
668     margin-bottom: 5px;
669     clear: both;
670     padding: .3em;
671     position: relative;
673 .comment-list li.first {
674     display: none
676 .comment-paging{
677     text-align: center;
679 .comment-paging .pageno{
680     padding: 2px;
682 .comment-paging .curpage{
683     border: 1px solid #CCC;
685 .comment-message .picture {
686     width: 20px;
687     float: left;
689 .dir-rtl .comment-message .picture {
690     float: right;
692 .comment-message .text {
693     margin: 0;
694     padding: 0;
696 .comment-message .text p {
697     padding: 0;
698     margin: 0 18px 0 0;
700 .comment-delete {
701     position: absolute;
702     top: 0;
703     right: 0;
704     margin: .3em;
706 .dir-rtl .comment-delete {
707     position: absolute;
708     left: 0;
709     right: auto;
710     margin: .3em;
712 .comment-report-selectall{
713     display: none
715 .comment-link {
716     display: none
718 .jsenabled .comment-link {
719     display: block
721 .jsenabled .showcommentsnonjs{
722     display: none
724 .jsenabled .comment-report-selectall{
725     display: inline
727 /**
728 * Completion progress report
729 */
730 .completion-expired {
731     background: @errorBackground;
733 .completion-expected {
734     font-size: @fontSizeMini;
736 .completion-sortchoice,
737 .completion-identifyfield {
738     font-size: @fontSizeMini;
739     vertical-align: bottom;
741 .completion-progresscell {
742     text-align: right;
744 .completion-expired .completion-expected {
745     font-weight: bold;
747 /**
748 * Tags
749 */
750 #page-tag-coursetags_edit .coursetag_edit_centered {
751     position: relative;
752     width: 600px;
753     margin: 20px auto;
755 #page-tag-coursetags_edit .coursetag_edit_row {
756     clear: both;
758 #page-tag-coursetags_edit .coursetag_edit_row .coursetag_edit_left {
759     float: left;
760     width: 50%;
761     text-align: right;
763 #page-tag-coursetags_edit .coursetag_edit_row .coursetag_edit_right {
764     margin-left: 50%;
766 #page-tag-coursetags_edit .coursetag_edit_input3 {
767     display: none;
769 #page-tag-coursetags_more .coursetag_more_large {
770     font-size: 120%;
772 #page-tag-coursetags_more .coursetag_more_small {
773     font-size: 80%;
775 #page-tag-coursetags_more .coursetag_more_link {
776     font-size: 80%;
778 #tag-description,
779 #tag-blogs {
780     width: 100%;
782 #tag-management-box {
783     margin-bottom: 10px;
784     line-height: 20px;
786 #tag-user-table {
787     padding: 3px;
788     clear: both;
789     width: 100%;
791 #tag-user-table {
792     .clearfix
794 img.user-image {
795     height: 100px;
796     width: 100px;
798 #small-tag-cloud-box {
799     width: 300px;
800     margin: 0 auto;
802 #big-tag-cloud-box {
803     width: 600px;
804     margin: 0 auto;
805     float: none;
807 ul#tag-cloud-list {
808     list-style: none;
809     padding: 5px;
810     margin: 0;
812 ul#tag-cloud-list li {
813     margin: 0;
814     display: inline;
815     list-style-type: none;
817 #tag-search-box {
818     text-align: center;
819     margin: 10px auto;
821 #tag-search-results-container {
822     padding: 0;
823     width: 100%;
825 #tag-search-results {
826     padding: 0;
827     margin: 15px 20% 0 20%;
828     float: left;
829     width: 60%;
830     display: block;
832 #tag-search-results li {
833     width: 30%;
834     float: left;
835     padding-left: 1%;
836     text-align: left;
837     line-height: 20px;
838     padding-right: 1%;
839     list-style: none;
841 span.flagged-tag,
842 tr.flagged-tag,
843 span.flagged-tag a,
844 tr.flagged-tag a {
845     color: @errorText;
847 .tag-management-table td,
848 .tag-management-table th {
849     vertical-align: middle;
850     padding: 4px;
852 .tag-management-table tr td.tageditingon .displaytagname,
853 .tag-management-table td .edittagname {
854     display: none;
856 .tag-management-table tr td.tageditingon .edittagname {
857     display: inherit;
858     position: relative;
860 .tag-management-table tr td.tageditingon .edittagname .editinstructions {
861     margin-right: -300px;
862     margin-left: 0;
864 .tag-management-table tr td .tagnameedit img {
865     opacity: 0.2;
867 .tag-management-table tr:hover td .tagnameedit img,
868 .tag-management-table tr td .tagnameedit:focus img {
869     opacity: 1;
871 .tag-management-table tr:hover td.tageditingon .tagnameedit img {
872     opacity: 0.2;
874 #relatedtags-autocomplete-container {
875     margin-left: auto;
876     margin-right: auto;
877     min-height: 4.6em;
878     width: 100%;
880 #relatedtags-autocomplete {
881     position: relative;
882     display: block;
883     width: 60%;
884     margin-left: auto;
885     margin-right: auto;
887 #relatedtags-autocomplete .yui-ac-content {
888     position: absolute;
889     width: 420px;
890     left: 20%;
891     border: 1px solid @dropdownBorder;
892     background: @dropdownBackground;
893     overflow: hidden;
894     z-index: 9050;
896 #relatedtags-autocomplete .ysearchquery {
897     position: absolute;
898     right: 10px;
899     color: #808080;
900     z-index: 10;
902 #relatedtags-autocomplete .yui-ac-shadow {
903     position: absolute;
904     margin: .3em;
905     width: 100%;
906     background: #a0a0a0;
907     z-index: 9049;
909 #relatedtags-autocomplete ul {
910     padding: 0;
911     width: 100%;
912     margin: 0;
913     list-style-type: none;
915 #relatedtags-autocomplete li {
916     padding: 0 5px;
917     cursor: default;
918     white-space: nowrap;
920 #relatedtags-autocomplete li.yui-ac-highlight{
921     background: @dropdownLinkBackgroundHover;
922     color: @dropdownLinkColorHover;
924 h2.tag-heading,
925 div#tag-description,
926 div#tag-blogs,
927 body.tag .managelink {
928     padding: 5px;
930 .tag_cloud .s20 {
931     font-size: 1.5em;
932     font-weight: bold;
934 .tag_cloud .s19 {
935     font-size: 1.5em;
937 .tag_cloud .s18 {
938     font-size: 1.4em;
939     font-weight: bold;
941 .tag_cloud .s17 {
942     font-size: 1.4em;
944 .tag_cloud .s16 {
945     font-size: 1.3em;
946     font-weight: bold;
948 .tag_cloud .s15 {
949     font-size: 1.3em;
951 .tag_cloud .s14 {
952     font-size: 1.2em;
953     font-weight: bold;
955 .tag_cloud .s13 {
956     font-size: 1.2em;
958 .tag_cloud .s12,
959 .tag_cloud .s11 {
960     font-size: 1.1em;
961     font-weight: bold;
963 .tag_cloud .s10,
964 .tag_cloud .s9 {
965     font-size: 1.1em;
967 .tag_cloud .s8,
968 .tag_cloud .s7 {
969     font-size: 1em;
970     font-weight: bold;
972 .tag_cloud .s6,
973 .tag_cloud .s5 {
974     font-size: 1em;
976 .tag_cloud .s4,
977 .tag_cloud .s3 {
978     font-size: 0.9em;
979     font-weight: bold;
981 .tag_cloud .s2,
982 .tag_cloud .s1 {
983     font-size: 0.9em;
985 .tag_cloud .s0 {
986     font-size: 0.8em;
988 /**
989 * Web Service
990 */
991 #webservice-doc-generator td {
992     text-align: left;
993     border: 0 solid black;
995 /**
996 * Smart Select Element
997 */
998 .smartselect {
999     position: absolute;
1001 .smartselect .smartselect_mask {
1002     background-color: #fff;
1004 .smartselect ul  {
1005     padding: 0;
1006     margin: 0;
1008 .smartselect ul li {
1009     list-style: none;
1011 .smartselect .smartselect_menu {
1012     margin-right: 5px;
1014 .safari .smartselect .smartselect_menu {
1015     margin-left: 2px;
1017 .smartselect .smartselect_menu,
1018 .smartselect .smartselect_submenu {
1019     border: 1px solid #000;
1020     background-color: #FFF;
1021     display: none;
1023 .smartselect .smartselect_menu.visible,
1024 .smartselect .smartselect_submenu.visible {
1025     display: block;
1027 .smartselect .smartselect_menu_content ul li {
1028     position: relative;
1029     padding: 2px 5px;
1031 .smartselect .smartselect_menu_content ul li a {
1032     color: #333;
1033     text-decoration: none;
1035 .smartselect .smartselect_menu_content ul li a.selectable {
1036     color: inherit;
1038 .smartselect .smartselect_submenuitem {
1039     background-image: url([[pix:moodle|t/collapsed]]);
1040     background-repeat: no-repeat;
1041     background-position: 100%;
1043 /** Spanning mode */
1044 .smartselect.spanningmenu .smartselect_submenu {
1045     position: absolute;
1046     top: -1px;
1047     left: 100%;
1049 .smartselect.spanningmenu .smartselect_submenu a {
1050     white-space: nowrap;
1051     padding-right: 16px;
1053 .smartselect.spanningmenu .smartselect_menu_content ul li a.selectable:hover {
1054     text-decoration: underline;
1056 /** Compact mode */
1057 .smartselect.compactmenu .smartselect_submenu {
1058     position: relative;
1059     margin: 2px -3px;
1060     margin-left: 10px;
1061     display: none;
1062     border-width: 0;
1063     z-index: 1010;
1065 .smartselect.compactmenu .smartselect_submenu.visible {
1066     display: block;
1068 .smartselect.compactmenu .smartselect_menu {
1069     z-index: 1000;
1070     overflow: hidden;
1072 .smartselect.compactmenu .smartselect_submenu .smartselect_submenu {
1073     z-index: 1020;
1075 .smartselect.compactmenu .smartselect_submenuitem:hover > .smartselect_menuitem_label {
1076     font-weight: bold;
1078 /**
1079 * Registration
1080 */
1081 #page-admin-registration-register .registration_textfield {
1082     width: 300px;
1084 /**
1085 * Enrol
1086 */
1087 .userenrolment {
1088     width: 100%;
1089     border-collapse: collapse;
1091 .userenrolment tr {
1092     vertical-align:top;
1094 .userenrolment td {
1095     padding: 0;
1096     height: 41px;
1098 .userenrolment .subfield {
1099     margin-right: 5px;
1101 .userenrolment .col_userdetails .subfield_picture {
1102     float: left;
1104 .userenrolment .col_lastseen {
1105     width: 150px;
1107 .userenrolment .col_role {
1108     width: 262px;
1110 .userenrolment .col_role .roles,
1111 .userenrolment .col_group .groups {
1112     margin-right: 30px;
1114 .userenrolment .col_role .role,
1115 .userenrolment .col_group .group {
1116     float: left;
1117     padding: 3px;
1118     margin: 3px;
1119     white-space: nowrap;
1121 .userenrolment .col_role .role a,
1122 .userenrolment .col_group .group a {
1123     margin-left: 3px;
1124     cursor: pointer;
1126 .userenrolment .col_role .addrole,
1127 .userenrolment .col_group .addgroup {
1128     float: right;
1129     padding: 3px;
1130     margin: 3px;
1131     > *:hover {
1132         border-bottom:1px solid #666;
1133     }
1135 .userenrolment .col_role .addrole img,
1136 .userenrolment .col_group .addgroup img {
1137     vertical-align: baseline;
1140 .dir-rtl .userenrolment .col_role .role {
1141     float: right;
1144 .userenrolment .hasAllRoles .col_role .addrole {
1145     display: none;
1148 .userenrolment .col_enrol .enrolment {
1149     float: left;
1150     padding: 3px;
1151     margin: 3px;
1153 .userenrolment .col_enrol .enrolment a {
1154     float: right;
1155     margin-left: 3px;
1157 #page-enrol-users {
1158     .enrol_user_buttons {
1159         float: right;
1160         .enrolusersbutton {
1161             display: inline;
1162             div,
1163             form {
1164                 display: inline;
1165                 margin-right: 0;
1166             }
1167         }
1168     }
1169     #filterform {
1170         .well;
1171         .well-small;
1172         display: inline-block;
1173         .fitem {
1174             display: inline-block;
1175             line-height: @baseLineHeight * 2;
1176             margin-right: .3em;
1177             white-space: nowrap;
1178             label {
1179                 display: inline;
1180                 line-height: @baseLineHeight;
1181                 padding-right: .3em;
1182             }
1183             :before,
1184             :after {
1185                 display: inline;
1186             }
1187         }
1188         div,
1189         fieldset {
1190             display: inline;
1191             float: none;
1192             clear: none;
1193             width: auto;
1194             margin: 0;
1195         }
1196         select,
1197         .ftext input {
1198             width: 7em;
1199         }
1200         input,
1201         select {
1202             margin-bottom: 0;
1203         }
1204     }
1205   .user-enroller-panel .uep-search-results .user .details {
1206     width: 237px;
1207   }
1208   .user-enroller-panel .uep-search-results .cohort .details {
1209     width: 237px;
1210   }
1212 .dir-rtl {
1213     &#page-enrol-users {
1214         .col_userdetails {
1215             .subfield_picture {
1216                 float: right;
1217             }
1218         }
1219         .enrol_user_buttons {
1220             float: left;
1221             .enrolusersbutton {
1222                 margin-left: 0;
1223                 margin-right: 1em;
1224                 div {
1225                     margin-left: 0;
1226                 }
1227             }
1228         }
1229         #filterform {
1230             .fitem {
1231                 margin-right: 0;
1232                 margin-left: .3em;
1233                 label {
1234                     padding-right: 0;
1235                     padding-left: .3em;
1236                 }
1237             }
1238         }
1239     }
1242 /**
1243 * Overide for RTL layout
1244 **/
1245 .dir-rtl .headermain {
1246     float: right;
1248 .dir-rtl .headermenu {
1249     float: left;
1251 .dir-rtl .loginbox .loginform .form-label {
1252     float: right;
1253     text-align: left;
1255 .dir-rtl .loginbox .loginform .form-input {
1256     text-align: right;
1257     margin-right: 1%;
1259 .dir-rtl .yui3-menu-hidden {
1260     left: 0;
1262 #page-admin-roles-define.dir-rtl #rolesform .felement {
1263     margin-right: 180px;
1265 #page-message-edit.dir-rtl table.generaltable th.c0 {
1266     text-align: right;
1268 .corelightbox {
1269     background-color: #CCC;
1270     position: absolute;
1271     top: 0;
1272     left: 0;
1273     width: 100%;
1274     height: 100%;
1275     text-align: center;
1277 .corelightbox img {
1278     position: fixed;
1279     top: 50%;
1280     left: 50%;
1283 .mod-indent-outer {
1284     display: table;
1286 .mod-indent {
1287     display: table-cell;
1289 .label .mod-indent {
1290   float:left;
1291   padding-top:20px
1294 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1295 @mod-indent-size: 30px;
1296 @mod-indent-levels: 16;
1297 .mod-indent-generate(@n, @i: 1) when (@i =< @n) {
1298     .mod-indent-@{i} {
1299         width: (@i * @mod-indent-size);
1300     }
1301     .mod-indent-generate(@n, (@i + 1));
1303 .mod-indent-generate(@n, @i: 1) when (@i = @n) {
1304     .mod-indent-huge {
1305         width: (@i * @mod-indent-size);
1306     }
1308 .mod-indent-generate(@mod-indent-levels);
1310 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1311 .resourcecontent .mediaplugin_mp3 object {
1312     height: 25px;
1313     width: 600px
1315 .resourcecontent audio.mediaplugin_html5audio {
1316     width: 600px
1318 /** Large resource images should avoid hidden overflow **/
1319 .resourceimage {
1320     max-width: 100%;
1322 /* Audio player size in 'inline' mode (can only change width, as above) */
1323 .mediaplugin_mp3 object {
1324     height: 15px;
1325     width: 300px
1327 audio.mediaplugin_html5audio {
1328     width: 300px
1330 /* TinyMCE moodle media preview frame should not have padding */
1331 .core_media_preview.pagelayout-embedded #content {
1332     padding: 0;
1334 .core_media_preview.pagelayout-embedded #maincontent {
1335     height: 0;
1337 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1338     padding: 0;
1339     margin: 0;
1340     min-width: 0;
1341     background: none;
1343 /** Fix YUI 2 Treeview for Right to left languages **/
1344 .dir-rtl .ygtvtn,
1345 .dir-rtl .ygtvtm,
1346 .dir-rtl .ygtvtmh,
1347 .dir-rtl .ygtvtmhh,
1348 .dir-rtl .ygtvtp,
1349 .dir-rtl .ygtvtph,
1350 .dir-rtl .ygtvtphh,
1351 .dir-rtl .ygtvln,
1352 .dir-rtl .ygtvlm,
1353 .dir-rtl .ygtvlmh,
1354 .dir-rtl .ygtvlmhh,
1355 .dir-rtl .ygtvlp,
1356 .dir-rtl .ygtvlph,
1357 .dir-rtl .ygtvlphh,
1358 .dir-rtl .ygtvdepthcell,
1359 .dir-rtl .ygtvok,
1360 .dir-rtl .ygtvok:hover,
1361 .dir-rtl .ygtvcancel,
1362 .dir-rtl .ygtvcancel:hover {
1363     width: 18px;
1364     height: 22px;
1365     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1366     background-repeat: no-repeat;
1367     cursor: pointer;
1369 .dir-rtl .ygtvtn {
1370     background-position: 0 -5600px;
1372 .dir-rtl .ygtvtm {
1373     background-position: 0 -4000px;
1375 .dir-rtl .ygtvtmh,
1376 .dir-rtl .ygtvtmhh {
1377     background-position: 0 -4800px;
1379 .dir-rtl .ygtvtp {
1380     background-position: 0 -6400px;
1382 .dir-rtl .ygtvtph,
1383 .dir-rtl .ygtvtphh {
1384     background-position: 0 -7200px;
1386 .dir-rtl .ygtvln {
1387     background-position: 0 -1600px;
1389 .dir-rtl .ygtvlm {
1390     background-position: 0 0;
1392 .dir-rtl .ygtvlmh,
1393 .dir-rtl .ygtvlmhh {
1394     background-position: 0 -800px;
1396 .dir-rtl .ygtvlp {
1397     background-position: 0 -2400px;
1399 .dir-rtl .ygtvlph,
1400 .dir-rtl .ygtvlphh {
1401     background-position: 0 -3200px
1403 .dir-rtl .ygtvdepthcell {
1404     background-position: 0 -8000px;
1406 .dir-rtl .ygtvok {
1407     background-position: 0 -8800px;
1409 .dir-rtl .ygtvok:hover {
1410     background-position: 0 -8844px;
1412 .dir-rtl .ygtvcancel {
1413     background-position: 0 -8822px;
1415 .dir-rtl .ygtvcancel:hover {
1416     background-position: 0 -8866px;
1418 .dir-rtl.yui-skin-sam .yui-panel .hd {
1419     text-align: right;
1421 .dir-rtl .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
1422     text-align: right;
1424 /** Fix TinyMCE editor right to left **/
1425 .dir-rtl .clearlooks2.ie9 .mceAlert .mceMiddle span,.dir-rtl .clearlooks2 .mceConfirm .mceMiddle span {
1426     top: 44px;
1428 .dir-rtl .o2k7Skin table,
1429 .dir-rtl .o2k7Skin tbody,
1430 .dir-rtl .o2k7Skin a,
1431 .dir-rtl .o2k7Skin img,
1432 .dir-rtl .o2k7Skin tr,
1433 .dir-rtl .o2k7Skin div,
1434 .dir-rtl .o2k7Skin td,
1435 .dir-rtl .o2k7Skin iframe,
1436 .dir-rtl .o2k7Skin span,
1437 .dir-rtl .o2k7Skin *,
1438 .dir-rtl .o2k7Skin .mceText,
1439 .dir-rtl .o2k7Skin .mceListBox .mceText {
1440     text-align: right;
1442 .path-rating .ratingtable {
1443     width: 100%;
1444     margin-bottom: 1em;
1446 .path-rating .ratingtable th.rating {
1447     width: 100%;
1449 .path-rating .ratingtable td.rating,
1450 .path-rating .ratingtable td.time {
1451     white-space: nowrap;
1452     text-align: center;
1454 .initialbar {
1455     a, strong {
1456         padding-left: 3px;
1457         padding-right: 3px;
1458     }
1460 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1461 .moodle-dialogue-base .moodle-dialogue-lightbox {
1462     background-color: #AAA;
1464 .moodle-dialogue-base .hidden,
1465 .moodle-dialogue-base .moodle-dialogue-hidden {
1466     display: none;
1468 .no-scrolling {
1469     overflow: hidden;
1471 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1472     left: 0px;
1473     top: 0px;
1474     right: 0px;
1475     bottom: -50px;
1476     position: fixed;
1478 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1479     overflow: auto;
1481 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1482     width: 28px;
1483     height: 16px;
1484     background-size: 100%;
1486 .moodle-dialogue-base .moodle-dialogue {
1487     padding: 0;
1488     margin: 0;
1489     background: none;
1490     border: none;
1491     z-index: 600;
1492     outline: #000 dotted 0;
1494 .moodle-dialogue-base .moodle-dialogue-wrap {
1495     margin-top: -3px;
1496     margin-left: -3px;
1497     background-color: #fff;
1498     border: 1px solid #ccc;
1499     .border-radius(10px);
1500     .box-shadow(5px 5px 20px 0 #666);
1502 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd,
1503 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1504     margin: 0;
1505     padding: 5px;
1506     font-size: 12px;
1507     font-weight: normal;
1508     letter-spacing: 1px;
1509     color: #333;
1510     text-align: center;
1511     text-shadow: 1px 1px 1px #fff;
1512     .border-radius(10px 10px 0 0);
1513     border-bottom: 1px solid #bbb;
1514     background: #ccc;
1515     #gradient > .vertical(#fff, #ccc);
1516     filter: 0;
1518 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1519     margin: 0;
1520     padding: 0;
1521     display: inline;
1522     font-size: 100%;
1523     font-weight: bold;
1525 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1526     padding: 5px;
1528 .moodle-dialogue-base .closebutton {
1529     width: 25px;
1530     height: 15px;
1531     float: right;
1532     vertical-align: middle;
1533     display: inline-block;
1534     cursor: pointer;
1535     padding: 0;
1536     background-image: url([[pix:theme|sprite]]);
1537     background-repeat: no-repeat;
1538     border-style: none;
1540 .dir-rtl .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1541     left: 0;
1542     right: auto;
1544 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1545     padding: 1em;
1546     line-height: 2em;
1547     color: #555;
1548     font-size: 12px;
1550 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-content {
1551     padding: 0;
1552     background: #FFF;
1555 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd {
1556     padding: 10px;
1557     font-size: 16px;
1560 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1561     overflow: auto;
1562     position: absolute;
1563     top: 0px;
1564     bottom: 50px;
1565     left: 0px;
1566     right: 0px;
1567     margin: 0px;
1568     border: 0px;
1570 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd,
1571 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-wrap {
1572     border-radius: 0px;
1574 .moodle-dialogue-confirm .confirmation-dialogue {
1575     text-align: center;
1577 .moodle-dialogue-confirm .confirmation-dialogue input {
1578     text-align: center;
1580 .moodle-dialogue-exception .moodle-exception-message {
1581     text-align: center
1583 .moodle-dialogue-exception .moodle-exception-param label {
1584     font-weight: bold;
1586 .moodle-dialogue-exception .param-stacktrace label {
1587     background-color: #EEE;
1588     border: 1px solid #ccc;
1589     border-bottom-width: 0;
1591 .moodle-dialogue-exception .param-stacktrace pre {
1592     border: 1px solid #ccc;
1593     background-color: #fff;
1595 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1596     color: navy;
1597     font-size: @fontSizeSmall;
1599 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1600     color: @errorText;
1601     font-size: @fontSizeSmall;
1603 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1604     color: #333;
1605     font-size: 90%;
1606     border-bottom: 1px solid #eee;
1608 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1609     padding: 0;
1610     margin: 0.7em 1em;
1611     text-align: right;
1612     background-color: #FFF;
1613     font-size: 12px;
1615 .moodle-dialogue-confirm .confirmation-message {
1616     margin: 0.5em 1em;
1618 .moodle-dialogue-confirm .confirmation-dialogue input {
1619     min-width: 80px
1621 .moodle-dialogue-exception .moodle-exception-message {
1622     margin: 1em;
1624 .moodle-dialogue-exception .moodle-exception-param {
1625     margin-bottom: 0.5em;
1627 .moodle-dialogue-exception .moodle-exception-param label {
1628     width: 150px;
1630 .moodle-dialogue-exception .param-stacktrace label {
1631     display: block;
1632     margin: 0;
1633     padding: 4px 1em;
1635 .moodle-dialogue-exception .param-stacktrace pre {
1636     display: block;
1637     height: 200px;
1638     overflow: auto;
1640 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1641     display: inline-block;
1642     margin: 4px 0;
1644 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1645     display: inline-block;
1646     width: 50px;
1647     margin: 4px 1em;
1649 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1650     padding-left: 25px;
1651     margin-bottom: 4px;
1652     padding-bottom: 4px;
1654 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1655     .opacity(75);
1656     width: 100%;
1657     height: 100%;
1658     top: 0;
1659     left: 0;
1660     background-color: white;
1661     text-align: center;
1662     padding: 10% 0;
1664 /* Apply a default max-height on tooltip text */
1665 .moodle-dialogue .tooltiptext {
1666     max-height: 300px;
1669 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1670     z-index: 3001;
1672     .moodle-dialogue-bd {
1673         overflow: auto;
1674     }
1677 /* Question Bank - Question Chooser "Close" button */
1678 #page-question-edit.dir-rtl a.container-close {
1679     right: auto;
1680     left: 6px;
1682 /**
1683  * Chooser Dialogues (moodle-core-chooserdialogue)
1684  *
1685  * This CSS belong to the chooser dialogue which should work both with, and
1686  * without javascript enabled
1687  */
1688 /* Hide the dialog and it's title */
1689 .chooserdialoguebody,
1690 .choosertitle {
1691     display: none;
1693 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1694     margin: 0;
1696 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1697     padding: 0;
1698     background: #F2F2F2;
1699     .border-bottom-radius(10px);
1701 /* Center the submit buttons within the area */
1702 .choosercontainer #chooseform .submitbuttons {
1703     padding: 0.7em 0;
1704     text-align: center;
1706 /* Fixed for safari browser on iPhone4S with ios7.*/
1707 @media (max-height: 639px) {
1708     .ios.safari .choosercontainer #chooseform .submitbuttons {
1709         padding: 45px 0;
1710     }
1712 .choosercontainer #chooseform .submitbuttons input {
1713     min-width: 100px;
1714     margin: 0 0.5em;
1716 /* Various settings for the options area */
1717 .choosercontainer #chooseform .options {
1718     position: relative;
1719     border-bottom: 1px solid #BBBBBB;
1721 /* Only set these options if we're showing the js container */
1722 .jschooser .choosercontainer #chooseform .alloptions {
1723     overflow-x: hidden;
1724     overflow-y: auto;
1725     max-width: 20.3em;
1726     .box-shadow(inset 0 0 30px 0px #ccc);
1728 .dir-rtl.jschooser .choosercontainer #chooseform .alloptions {
1729     max-width: 18.3em;
1731 /* Settings for option rows and option subtypes */
1732 .choosercontainer #chooseform .moduletypetitle,
1733 .choosercontainer #chooseform .option,
1734 .choosercontainer #chooseform .nonoption {
1735     margin-bottom: 0;
1736     padding: 0 1.6em 0 1.6em;
1738 .choosercontainer #chooseform .moduletypetitle {
1739     text-transform: uppercase;
1740     padding-top: 1.2em;
1741     padding-bottom: 0.4em;
1743 .choosercontainer #chooseform .option .typename,
1744 .choosercontainer #chooseform .option span.modicon img.icon,
1745 .choosercontainer #chooseform .nonoption .typename,
1746 .choosercontainer #chooseform .nonoption span.modicon img.icon {
1747     padding: 0 0 0 0.5em;
1749 .dir-rtl .choosercontainer #chooseform .option .typename,
1750 .dir-rtl .choosercontainer #chooseform .option span.modicon img.icon,
1751 .dir-rtl .choosercontainer #chooseform .nonoption .typename,
1752 .dir-rtl .choosercontainer #chooseform .nonoption span.modicon img.icon {
1753     padding: 0 0.5em 0 0;
1756 .chooserdialogue-course-modchooser .choosercontainer #chooseform .option span.modicon img.icon,
1757 .chooserdialogue-course-modchooser .choosercontainer #chooseform .nonoption span.modicon img.icon {
1758     height: 24px;
1759     width: 24px;
1761 .choosercontainer #chooseform .option input[type=radio],
1762 .choosercontainer #chooseform .option span.typename,
1763 .choosercontainer #chooseform .option span.modicon {
1764     vertical-align: middle;
1766 .choosercontainer #chooseform .option label {
1767     display: block;
1768     padding: 0.3em 0 0.1em 0;
1769     border-bottom: 1px solid #FFFFFF;
1771 .choosercontainer #chooseform .nonoption {
1772     padding-left: 2.7em;
1773     padding-top: 0.3em;
1774     padding-bottom: 0.1em;
1776 .dir-rtl .choosercontainer #chooseform .nonoption {
1777     padding-right: 2.7em;
1778     padding-left: 0;
1780 .choosercontainer #chooseform .subtype {
1781     margin-bottom: 0;
1782     padding: 0 1.6em 0 3.2em;
1784 .dir-rtl .choosercontainer #chooseform .subtype {
1785     padding: 0 3.2em 0 1.6em;
1787 .choosercontainer #chooseform .subtype .typename {
1788     margin: 0 0 0 0.2em;
1790 .dir-rtl .choosercontainer #chooseform .subtype .typename {
1791     margin: 0 0.2em 0 0;
1793 /* The instruction/help area */
1794 .jschooser .choosercontainer #chooseform .instruction,
1795 .jschooser .choosercontainer #chooseform .typesummary {
1796    display: none;
1797     position: absolute;
1798     top: 0;
1799     right: 0;
1800     bottom: 0;
1801     left: 20.3em;
1802     margin: 0;
1803     padding: 1.6em;
1804     background-color: #fff;
1805     overflow-x: hidden;
1806     overflow-y: auto;
1807     line-height: 2em;
1809 .dir-rtl.jschooser .choosercontainer #chooseform .instruction,
1810 .dir-rtl.jschooser .choosercontainer #chooseform .typesummary {
1811     left: 0;
1812     right: 18.5em;
1813     border-right: 1px solid grey;
1815 /* Selected option settings */
1816 .jschooser .choosercontainer #chooseform .instruction,
1817 .choosercontainer #chooseform .selected .typesummary {
1818     display: block;
1820 .choosercontainer #chooseform .selected {
1821     background-color: #fff;
1822     .box-shadow(0px 0 10px 0 #ccc);
1824 .section-modchooser-link img.smallicon {
1825     padding: 3px;
1827 /* Form element: listing */
1828 .formlistingradio {
1829     padding-bottom: 25px;
1830     padding-right: 10px;
1832 .formlistinginputradio {
1833     float: left;
1835 .formlistingmain {
1836     min-height: 225px;
1838 .formlisting {
1839     position: relative;
1840     margin: 15px 0;
1841     padding: 1px 19px 14px;
1842     background-color: white;
1843     border: 1px solid #DDD;
1844     .border-radius(4px);
1846 .formlistingmore {
1847     position: absolute;
1848     cursor: pointer;
1849     bottom: -1px;
1850     right: -1px;
1851     padding: 3px 7px;
1852     font-size: 12px;
1853     font-weight: bold;
1854     background-color: whiteSmoke;
1855     border: 1px solid #ddd;
1856     color: #9DA0A4;
1857     .border-radius(4px 0 4px 0);
1859 .formlistingall {
1860     margin: 15px 0;
1861     padding: 0;
1862     .border-radius(4px);
1864 .formlistingrow {
1865     cursor: pointer;
1866     border-bottom: 1px solid;
1867     border-color: #E1E1E8;
1868     border-left: 1px solid #E1E1E8;
1869     border-right: 1px solid #E1E1E8;
1870     background-color: #F7F7F9;
1871     .border-radius(0 0 4px 4px);
1872     padding: 6px;
1873     top: 50%;
1874     left: 50%;
1875     min-height: 34px;
1876     float: left;
1877     width: 150px;
1879 body.jsenabled .formlistingradio {
1880     display: none;
1882 body.jsenabled .formlisting {
1883     display: block;
1886 /* Badges styles */
1887 table.collection {
1888     .table;
1889     .table-bordered;
1890     .table-striped;
1892 table.collection .name {
1893     text-align: left;
1894     vertical-align: middle;
1896 table.collection .awards {
1897     width: 10%;
1898     text-align: center;
1899     vertical-align: middle;
1901 table.collection .criteria {
1902     width: 40%;
1903     text-align: left;
1904     vertical-align: top;
1906 table.collection .badgeimage,
1907 table.collection .status {
1908     width: 15%;
1909     text-align: center;
1910     vertical-align: middle;
1912 table.collection .description {
1913     width: 25%;
1914     text-align: left;
1916 table.collection .actions {
1917     width: 11em;
1918     text-align: center;
1919     vertical-align: middle;
1922 a.criteria-action {
1923     padding: 0px 3px;
1924     float: right;
1926 div.criteria-description {
1927     padding: 10px 15px;
1928     margin: 5px 0px;
1929     background: none repeat scroll 0 0 #f9f9f9;
1930     border: 1px solid #EEE;
1932 ul.badges {
1933     margin: 0;
1934     list-style: none;
1936 .badges li {
1937     position: relative;
1938     display: inline-block;
1939     padding-bottom: 2em;
1940     text-align: center;
1941     vertical-align: top;
1942     width: 150px;
1944 .badges li .badge-name {
1945     display: block;
1946     padding: 5px;
1948 .badges li > img {
1949     position: absolute;
1951 .badges li .badge-image {
1952     width: 100px;
1953     height: 100px;
1954     left: 10px;
1955     top: 0px;
1956     z-index: 1;
1958 .badges li .badge-actions {
1959     position: relative;
1961 .badges li .expireimage {
1962     width: 100px;
1963     height: 100px;
1964     left: 25px;
1965     top: 0px;
1966     position: absolute;
1967     z-index: 10;
1968     opacity: 0.85;
1971 #badge-image {
1972     background-color: transparent;
1973     padding: 0;
1974     position: relative;
1975     min-width: 100px;
1976     width: 20%;
1977     display: inline-block;
1978     vertical-align: top;
1979     margin-top: 17px;
1981     .expireimage {
1982         width: 100px;
1983         height: 100px;
1984         left: 0px;
1985         top: 0px;
1986         .opacity(85);
1987         position: absolute;
1988         z-index:10;
1989     }
1991     .singlebutton {
1992         padding-top: 5px;
1994         input {
1995             margin-left: 0px;
1996         }
1997     }
1999 .dir-rtl #badge-image {
2000     float: right;
2002     .expireimage {
2003         left: 41px;
2004     }
2006 #badge-details {
2007     display: inline-block;
2008     width: 79%;
2011 #badge-overview dl,
2012 #badge-details dl {
2013     margin: 0;
2015     dt,
2016     dd {
2017         vertical-align: top;
2018         padding: 3px 0;
2019     }
2020     dt {
2021         clear: both;
2022         display: inline-block;
2023         width: 20%;
2024         min-width: 100px;
2025     }
2026     dd {
2027         display: inline-block;
2028         width: 79%;
2029         margin-left: 1%;
2030     }
2033 .badge-profile {
2034     vertical-align: top;
2036 .connected {
2037     color: @successText;
2039 .notconnected {
2040     color: @errorText;
2042 .connecting {
2043     color: @warningText;
2045 #page-badges-award .recipienttable tr td {
2046     vertical-align: top;
2048 #page-badges-award .recipienttable tr td.actions .actionbutton {
2049     margin: 0.3em 0;
2050     padding: 0.5em 0;
2051     width: 100%;
2053 #page-badges-award .recipienttable tr td.existing,
2054 #page-badges-award .recipienttable tr td.potential {
2055     width: 42%;
2058 #issued-badge-table .activatebadge {
2059     display: inline-block;
2061 .statusbox.active {
2062     background-color: @successBackground;
2064 .statusbox.inactive {
2065     background-color: @warningBackground;
2067 .statusbox {
2068     text-align: center;
2069     margin-bottom: 5px;
2070     padding: 5px;
2072 .statusbox .activatebadge {
2073     display: inline-block;
2075 .statusbox .activatebadge input[type=submit]{
2076     margin: 3px;
2078 .activatebadge {
2079     margin: 0px;
2080     text-align: left;
2081     vertical-align: middle;
2083 .dir-rtl .activatebadge {
2084     text-align: right;
2086 img#persona_signin {
2087     cursor: pointer;
2089 .addcourse {
2090     float: right;
2092 .invisiblefieldset {
2093     display: inline;
2094     margin: 0;
2095     padding: 0;
2096     border-width: 0;
2098 .breadcrumb-nav {
2099     float: left;
2100     margin-bottom: 10px;
2102 .dir-rtl .breadcrumb-nav {
2103     float: right;
2105 .breadcrumb-button .singlebutton div {
2106     margin-right: 0;
2108 .breadcrumb-nav .breadcrumb {
2109     margin: 0;
2112 /** Header-bar styles **/
2113 .page-context-header {
2114     // We need to be explicit about the height of the header.
2115     @pageHeaderHeight: 140px;
2117     // Do not remove these rules.
2118     overflow: hidden;
2120     .page-header-image,
2121     .page-header-headings {
2122         display: block;
2123         position: relative;
2124     }
2125     .page-header-image {
2126         margin-bottom: 1em;
2127     }
2128     .page-header-headings {
2129         margin-top: 30px;
2130         margin-bottom: 10px;
2132         h1 {
2133             display: block;
2134         }
2135     }
2137     .page-header-headings,
2138     .header-button-group {
2139         position: relative;
2140         line-height: 24px;
2141         vertical-align: middle;
2142     }
2144     .header-button-group {
2145         display: block;
2147         a {
2148             position: relative;
2150             // Don't touch it unless you know exactly what you are doing.
2151             top: -0.4em;
2152         }
2153     }
2156 .dir-ltr .page-context-header {
2157     .page-header-image {
2158         float: left;
2159         margin-right: 1em;
2160     }
2162     .header-button-group{
2163         float: right;
2164     }
2167 .dir-rtl .page-context-header {
2168     .page-header-image {
2169         float: right;
2170         margin-left: 1em;
2171     }
2173     .header-button-group{
2174         float: left;
2175         right: -15px;
2176     }
2179 /** Action menu component styles **/
2180 .moodle-actionmenu,
2181 .moodle-actionmenu > ul,
2182 .moodle-actionmenu > ul > li {
2183     display: inline-block;
2186 .moodle-actionmenu ul {
2187     padding: 0;
2188     margin: 0;
2189     list-style-type: none;
2192 .moodle-actionmenu .toggle-display,
2193 .moodle-actionmenu .menu-action-text {
2194     display: none; /** Hidden by default, display none so that we don't take up space. **/
2197 .jsenabled {
2198     .moodle-actionmenu[data-enhance] {
2199         display: block;
2200         .menu {
2201             display:none;
2202         }
2203         .toggle-display {
2204             display: inline; /** JS is enabled, we'll be using it so return display to normal **/
2205             .opacity(50);
2206         }
2207         .toggle-display.textmenu {
2208             display: block;
2209             margin-left: 4px;
2210             padding-left: 4px;
2211             padding-right: 4px;
2213             .iconsmall,
2214             .smallicon {
2215                 margin: 4px 4px 4px 0px;
2216                 padding: 8px 4px 0px 2px;
2217                 vertical-align: text-bottom;
2218             }
2220             .caret {
2221                 margin-top: 8px;
2222                 margin-left: 2px;
2223                 border-top-color: @navbarLinkColor;
2224                 &:hover,
2225                 &:active {
2226                     border-top-color: @navbarLinkColorActive;
2227                 }
2228             }
2229         }
2230     }
2231     .moodle-actionmenu[data-enhanced] {
2232         .toggle-display {
2233             .opacity(100);
2234         }
2235         .menu-action-text  {
2236             display:inline;
2237         }
2238     }
2240     &.dir-rtl {
2241         .moodle-actionmenu[data-enhance] {
2242             .toggle-display.textmenu {
2243                 margin-left: initial;
2244                 margin-right: 4px;
2246                 .caret {
2247                     margin-left: initial;
2248                     margin-right: 2px;
2249                 }
2250             }
2251         }
2252     }
2255 .moodle-actionmenu[data-enhanced].show  {
2257     position: relative;
2259     .menu {
2261         display:block;
2262         position: absolute;
2263         text-align: left;
2264         background-color: @dropdownBackground;
2265         border: 1px solid @dropdownBorder;
2266         z-index:1000;
2267         .border-radius(5px);
2268         .box-shadow(5px 5px 20px 0 #666);
2270         a {
2271             display: block;
2272             color: @dropdownLinkColor;
2273             padding:2px 1em 2px 28px;
2274             &:hover {
2275                 color: @dropdownLinkColorHover;
2276                 background-color: @dropdownLinkBackgroundHover;
2277             }
2278             &:first-child {
2279                 .border-top-radius(4px);
2280             }
2281             &:last-child {
2282                 .border-bottom-radius(4px);
2283             }
2284         }
2285         a.hidden {
2286             display:none;
2287         }
2288         img {
2289             vertical-align: middle;
2290         }
2291         .iconsmall,
2292         .smallicon {
2293             margin: 4px 4px 4px -24px;
2294             padding: 4px;
2295         }
2296         > li {
2297             display:block;
2298         }
2300         /** bottom left of button **/
2301         &.align-tl-bl {top: 100%;left:0;margin-top: 4px;}
2302         &.align-tr-bl {top: 100%;right: 100%;}
2303         &.align-bl-bl {bottom: 100%;left:0;}
2304         &.align-br-bl {bottom: 100%;right: 100%;}
2305         /** bottom right of button **/
2306         &.align-tl-br {top: 100%;left:100%;}
2307         &.align-tr-br {top: 100%;right: 0;margin-top: 4px;}
2308         &.align-bl-br {bottom: 100%;left:100%;}
2309         &.align-br-br {bottom: 100%;right: 0;}
2310         /** top left of button **/
2311         &.align-tl-tl {top: 0;left:0;}
2312         &.align-tr-tl {top: 0;right: 100%;margin-right: 4px;}
2313         &.align-bl-tl {bottom: 100%;left:0;margin-bottom: 4px;}
2314         &.align-br-tl {bottom: 100%;right: 100%;}
2315         /** top right of button **/
2316         &.align-tl-tr {top: 0;left:100%;margin-left: 4px;}
2317         &.align-tr-tr {top: 0;right: 0;}
2318         &.align-bl-tr {bottom: 100%;left:100%;}
2319         &.align-br-tr {bottom: 100%;right: 0;margin-bottom: 4px;}
2320     }
2321     /** no wrap is set - prevent menu items from wrapping **/
2322     &.nowrap-items .menu > li {
2323         white-space: nowrap;
2324     }
2327 .block .moodle-actionmenu {
2328     text-align: right;
2331 .dir-rtl {
2332     .moodle-actionmenu[data-enhanced].show  {
2333         .menu {
2334             text-align: right;
2335             left: 0;
2336             right: auto;
2337             a {
2338                 padding: 2px 28px 2px 1em;
2339             }
2340             .iconsmall,
2341             .smallicon {
2342                 margin-right: -24px;
2343                 margin-left: 4px;
2344             }
2346             /** bottom left of button **/
2347             &.align-tl-bl {left: auto; right: 0;}
2348             &.align-tr-bl {right: auto; left: 100%;}
2349             &.align-bl-bl {left: auto; right: 0;}
2350             &.align-br-bl {right: auto; left: 100%;}
2351             /** bottom right of button **/
2352             &.align-tl-br {left: auto; right: 100%;}
2353             &.align-tr-br {right: auto; left: 0;}
2354             &.align-bl-br {left: auto; right: 100%;}
2355             &.align-br-br {right: auto; left: 0;}
2356             /** top left of button **/
2357             &.align-tl-tl {left: auto; right: 0;}
2358             &.align-tr-tl {right: auto; left: 100%;}
2359             &.align-bl-tl {left: auto; right: 0;}
2360             &.align-br-tl {right: auto; left: 100%;}
2361             /** top right of button **/
2362             &.align-tl-tr {left: auto; right: 100%;}
2363             &.align-tr-tr {right: auto; left: 0;}
2364             &.align-bl-tr {left: auto; right: 100%;}
2365             &.align-br-tr {right: auto; left: 0;}
2366         }
2367     }
2368     .block .moodle-actionmenu {
2369         text-align: right;
2370     }
2373 ul.dragdrop-keyboard-drag li {
2374     list-style-type: none;
2377 .block-control-actions .moodle-core-dragdrop-draghandle img {
2378     width: 12px;
2379     height: 12px;
2382 a.disabled:hover,
2383 a.disabled {
2384     text-decoration: none;
2385     cursor: default;
2386     font-style: italic;
2387     color: #808080;
2389 body.lockscroll {
2390   height: 100%;
2391   overflow: hidden;
2394 .dir-rtl {
2395     // Bootstrap sets right margin to 0. Fail.
2396     // They set left margin to 25px so we will copy that.
2397     ul {
2398         margin-left: 0;
2399         margin-right: 25px;
2400     }
2403 .progressbar_container {
2404     max-width: 500px;
2405     margin: 0 auto;
2408 /* IE10 only fix for calendar titling */
2409 .ie10 .yui3-calendar-header-label {
2410     display: inline-block;
2413 dd:before,
2414 dd:after {
2415   display: block;
2416   content: " ";
2418 dd:after {
2419   clear: both;