theme/bootstrapbase/less/moodle/core.less

   1 /* core.less */
   2
   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 }
  11
  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 }
  18
  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 }
  29
  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 }
  35
  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 **/
  41
  42
  43 /* Default Three Columns - All
  44 ------------------------------*/
  45
  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 }
  97
  98 /** Page layout CSS ends **/
  99
 100 .dir-ltr,
 101 .mdl-left,
 102 .dir-rtl .mdl-right {
 103     text-align: left;
 104 }
 105 .dir-rtl,
 106 .mdl-right,
 107 .dir-rtl .mdl-left {
 108     text-align: right;
 109 }
 110 #add,
 111 #remove,
 112 .centerpara,
 113 .mdl-align {
 114     text-align: center;
 115 }
 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
 133 }
 134 .activity.label .dimmed_text {
 135     .opacity(50)
 136 }
 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;
 149 }
 150 .inline,
 151 .inline-list li {
 152     display: inline;
 153 }
 154 .notifytiny {
 155     font-size: @fontSizeMini;
 156 }
 157 .notifytiny li,
 158 .notifytiny td {
 159     font-size: 100%;
 160 }
 161 .red,
 162 .notifyproblem {
 163     color: @errorText;
 164 }
 165 .green,
 166 .notifysuccess {
 167     color: @successText;
 168 }
 169 .highlight {
 170     background: @infoBackground;
 171 }
 172 .reportlink {
 173     text-align: right;
 174 }
 175 a.autolink.glossary:hover {
 176     cursor: help;
 177 }
 178 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
 179 .collapsibleregioncaption {
 180     white-space: nowrap;
 181 }
 182 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
 183     cursor: pointer;
 184 }
 185 .collapsibleregioncaption img {
 186     vertical-align: middle;
 187 }
 188
 189 .jsenabled .hiddenifjs {
 190     display: none;
 191 }
 192 .visibleifjs {
 193     display: none;
 194 }
 195 .jsenabled .visibleifjs {
 196     display: inline;
 197 }
 198 .jsenabled .collapsibleregion {
 199     overflow: hidden;
 200 }
 201 .jsenabled .collapsed .collapsibleregioninner {
 202     visibility: hidden;
 203 }
 204 .collapsible-actions {
 205     display: none;
 206     text-align: right;
 207 }
 208 .dir-rtl .collapsible-actions {
 209     text-align: left;
 210 }
 211 .jsenabled .collapsible-actions {
 212     display: block;
 213 }
 214 .collapsible-actions .collapseexpand {
 215     padding-left: 20px;
 216     background: url([[pix:t/collapsed]]) 2px center no-repeat;
 217 }
 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;
 222 }
 223 .collapsible-actions .collapse-all,
 224 .dir-rtl .collapsible-actions .collapse-all {
 225     background-image: url([[pix:t/expanded]]);
 226 }
 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;
 237 }
 238 .clearer {
 239     background: transparent;
 240     border-width: 0;
 241     clear: both;
 242     display: block;
 243     height: 1px;
 244     margin: 0;
 245     padding: 0;
 246 }
 247 .bold,
 248 .warning,
 249 .errorbox .title,
 250 .pagingbar .title,
 251 .pagingbar .thispage {
 252     font-weight: bold;
 253 }
 254 img.resize {
 255     height: 1em;
 256     width: 1em;
 257 }
 258 .block img.resize,
 259 .breadcrumb img.resize {
 260     height: 0.9em;
 261     width: 0.8em;
 262 }
 263 /* Icon styles */
 264 img.icon {
 265     height: 16px;
 266     vertical-align: text-bottom;
 267     width: 16px;
 268     padding-right: 6px;
 269 }
 270 .dir-rtl img.icon {
 271     padding-left: 6px;
 272     padding-right: 0;
 273 }
 274 img.iconsmall {
 275     height: 12px;
 276     margin-right: 3px;
 277     vertical-align: middle;
 278     width: 12px;
 279 }
 280 img.iconhelp, .helplink img {
 281     height: 16px;
 282     padding-left: 3px;
 283     vertical-align: text-bottom;
 284     width: 16px;
 285 }
 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;
 294 }
 295 .dir-rtl img.iconhelp, .dir-rtl .helplink img {
 296     padding-right: 3px;
 297     padding-left: 0;
 298 }
 299 img.iconlarge {
 300     height: 24px;
 301     width: 24px;
 302     vertical-align: middle;
 303 }
 304 img.iconsort {
 305     vertical-align: text-bottom;
 306     padding-left: .3em;
 307     margin-bottom: .15em;
 308 }
 309 .dir-rtl img.iconsort {
 310     padding-right: .3em;
 311     padding-left: 0;
 312 }
 313 img.icontoggle {
 314     height: 17px;
 315     vertical-align: middle;
 316     width: 50px;
 317 }
 318 img.iconkbhelp {
 319     height: 17px;
 320     width: 49px;
 321 }
 322 img.icon-pre, .dir-rtl img.icon-post {
 323     padding-right: 3px;
 324     padding-left: 0;
 325 }
 326 img.icon-post, .dir-rtl img.icon-pre {
 327     padding-left: 3px;
 328     padding-right: 0;
 329 }
 330 .boxaligncenter {
 331     margin-left: auto;
 332     margin-right: auto;
 333 }
 334 .boxalignright {
 335     margin-left: auto;
 336     margin-right: 0;
 337 }
 338 .boxalignleft {
 339     margin-left: 0;
 340     margin-right: auto;
 341 }
 342 .boxwidthnarrow {
 343     width: 30%;
 344 }
 345 .boxwidthnormal {
 346     width: 50%;
 347 }
 348 .boxwidthwide {
 349     width: 80%;
 350 }
 351 .headermain {
 352     font-weight: bold;
 353 }
 354 #maincontent {
 355     display: block;
 356     height: 1px;
 357     overflow: hidden;
 358 }
 359 img.uihint {
 360     cursor: help;
 361 }
 362 #addmembersform table {
 363     margin-left: auto;
 364     margin-right: auto;
 365 }
 366 table.flexible .emptyrow {
 367     display: none;
 368 }
 369 img.emoticon {
 370     vertical-align: middle;
 371     width: 15px;
 372     height: 15px;
 373 }
 374 form.popupform,
 375 form.popupform div {
 376     display: inline;
 377 }
 378 .arrow_button input {
 379     overflow: hidden;
 380 }
 381 .action-icon img.smallicon {
 382     vertical-align: text-bottom;
 383     margin: 0 0.3em;
 384 }
 385
 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;
 390 }
 391 .pagelayout-report .no-overflow {
 392     overflow: visible;
 393 }
 394 .no-overflow > .generaltable {
 395     margin-bottom: 0;
 396 }
 397 // Accessibility features
 398
 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;
 405 }
 406 .dir-rtl .accesshide {
 407     top: -30000px;
 408     left: auto;
 409 }
 410 span.hide,
 411 div.hide {
 412     display: none;
 413 }
 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;
 421 }
 422 a.skip-block:focus,
 423 a.skip-block:active,
 424 a.skip:focus,
 425 a.skip:active {
 426     position: static;
 427     display: block;
 428 }
 429 .skip-block-to {
 430     display: block;
 431     height: 1px;
 432     overflow: hidden;
 433 }
 434 // Blogs
 435 .addbloglink {
 436     text-align: center;
 437 }
 438 .blog_entry .audience {
 439     text-align: right;
 440     padding-right: 4px;
 441 }
 442 .blog_entry .tags {
 443     margin-top: 15px;
 444 }
 445 .blog_entry .tags .action-icon img.smallicon {
 446     height: 16px;
 447     width: 16px;
 448 }
 449 .blog_entry .content {
 450     margin-left: 43px;
 451 }
 452 // Group
 453 #page-group-index #groupeditform {
 454     text-align: center;
 455 }
 456 #doc-contents h1 {
 457     margin: 1em 0 0 0;
 458 }
 459 #doc-contents ul {
 460     margin: 0;
 461     padding: 0;
 462     width: 90%;
 463 }
 464 #doc-contents ul li {
 465     list-style-type: none;
 466 }
 467 .groupmanagementtable td {
 468     vertical-align: top;
 469 }
 470 .groupmanagementtable #existingcell,
 471 .groupmanagementtable #potentialcell {
 472     width: 42%;
 473 }
 474 .groupmanagementtable #buttonscell {
 475     width: 16%;
 476 }
 477 .groupmanagementtable #buttonscell p.arrow_button input {
 478     width: auto;
 479     min-width: 80%;
 480     margin: 0 auto;
 481 }
 482 .groupmanagementtable #removeselect_wrapper,
 483 .groupmanagementtable #addselect_wrapper {
 484     width: 100%;
 485 }
 486 .groupmanagementtable #removeselect_wrapper label,
 487 .groupmanagementtable #addselect_wrapper label {
 488     font-weight: normal;
 489 }
 490 .dir-rtl .groupmanagementtable p {
 491     text-align: right;
 492 }
 493 #group-usersummary {
 494     width: 14em;
 495 }
 496 .groupselector {
 497     margin-top: 3px;
 498     margin-bottom: 3px;
 499     display: inline-block;
 500 }
 501 .groupselector label {
 502     display: inline-block;
 503 }
 504 // Data format selector
 505 .dataformatselector {
 506     margin: 1em 0;
 507 }
 508 .dataformatselector label {
 509     display: inline-block;
 510     margin: 0 5px 10px 0;
 511     line-height: 30px;
 512     vertical-align: top;
 513 }
 514
 515 // Login
 516 .loginbox {
 517     margin: 15px;
 518     overflow: visible;
 519 }
 520 .loginbox.twocolumns {
 521     margin: 15px;
 522 }
 523 .loginbox h2,
 524 .loginbox .subcontent {
 525     margin: 5px;
 526     padding: 10px;
 527     text-align: center;
 528 }
 529 .loginbox .loginpanel .desc {
 530     margin: 0;
 531     padding: 0;
 532     margin-bottom: 5px;
 533     margin-top:15px;
 534 }
 535 .loginbox .signuppanel .subcontent {
 536     text-align: left;
 537 }
 538 .dir-rtl .loginbox .signuppanel .subcontent {
 539     text-align: right;
 540 }
 541 .loginbox .loginsub {
 542     margin-left: 0;
 543     margin-right: 0;
 544 }
 545 .loginbox .guestsub,
 546 .loginbox .forgotsub,
 547 .loginbox .potentialidps {
 548     margin: 5px 12%;
 549 }
 550 .loginbox .potentialidps .potentialidplist {
 551     margin-left: 40%;
 552 }
 553 .loginbox .potentialidps .potentialidplist div {
 554     text-align: left;
 555 }
 556 .loginbox .loginform {
 557     margin-top: 1em;
 558     text-align: left;
 559 }
 560 .loginbox .loginform .form-label {
 561     float: left;
 562     text-align: right;
 563     width: 49%;
 564     white-space: nowrap;
 565 }
 566 .loginbox .loginform .form-input {
 567     float: right;
 568     width: 50%;
 569 }
 570 .loginbox .loginform .form-input input {
 571     width: 6em;
 572 }
 573 .loginbox .signupform {
 574     margin-top: 1em;
 575     text-align: center;
 576 }
 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;
 590 }
 591 .dir-rtl {
 592     .loginbox.twocolumns .loginpanel,
 593     .loginbox.twocolumns .signuppanel {
 594         float:right;
 595     }
 596 }
 597
 598 .loginbox .potentialidp .smallicon {
 599     vertical-align: text-bottom;
 600     margin: 0 .3em;
 601 }
 602
 603 // Notes
 604 .notepost {
 605     margin-bottom: 1em;
 606 }
 607 .notepost .userpicture {
 608     float: left;
 609     margin-right: 5px;
 610 }
 611 .notepost .content,
 612 .notepost .footer {
 613     clear: both;
 614 }
 615 .notesgroup {
 616     margin-left: 20px;
 617 }
 618
 619 // My Moodle
 620 .path-my .coursebox .overview {
 621     margin: 15px 30px 10px 30px;
 622 }
 623 .path-my .coursebox .info {
 624     float: none;
 625     margin: 0;
 626 }
 627
 628 // Modules
 629 .mod_introbox {
 630     padding: 10px;
 631 }
 632 table.mod_index {
 633     width: 100%;
 634 }
 635
 636 // Comments
 637 .comment-ctrl {
 638     font-size: 12px;
 639     display: none;
 640     margin: 0;
 641     padding: 0;
 642 }
 643 .comment-ctrl h5 {
 644     margin: 0;
 645     padding: 5px;
 646 }
 647 .comment-area {
 648     max-width: 400px;
 649     padding: 5px;
 650 }
 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     }
 659 }
 660 .comment-area .fd {
 661     text-align: right;
 662 }
 663 .comment-meta span {
 664     color: gray;
 665 }
 666 .comment-link img {
 667     vertical-align: text-bottom;
 668 }
 669 .comment-list {
 670     font-size: 11px;
 671     overflow: auto;
 672     list-style: none;
 673     padding: 0;
 674     margin: 0;
 675 }
 676 .comment-list li {
 677     margin: 2px;
 678     list-style: none;
 679     margin-bottom: 5px;
 680     clear: both;
 681     padding: .3em;
 682     position: relative;
 683 }
 684 .comment-list li.first {
 685     display: none
 686 }
 687 .comment-paging{
 688     text-align: center;
 689 }
 690 .comment-paging .pageno{
 691     padding: 2px;
 692 }
 693 .comment-paging .curpage{
 694     border: 1px solid #CCC;
 695 }
 696 .comment-message .picture {
 697     width: 20px;
 698     float: left;
 699 }
 700 .dir-rtl .comment-message .picture {
 701     float: right;
 702 }
 703 .comment-message .text {
 704     margin: 0;
 705     padding: 0;
 706 }
 707 .comment-message .text p {
 708     padding: 0;
 709     margin: 0 18px 0 0;
 710 }
 711 .comment-delete {
 712     position: absolute;
 713     top: 0;
 714     right: 0;
 715     margin: .3em;
 716 }
 717 .dir-rtl .comment-delete {
 718     position: absolute;
 719     left: 0;
 720     right: auto;
 721     margin: .3em;
 722 }
 723 .comment-report-selectall{
 724     display: none
 725 }
 726 .comment-link {
 727     display: none
 728 }
 729 .jsenabled .comment-link {
 730     display: block
 731 }
 732 .jsenabled .showcommentsnonjs{
 733     display: none
 734 }
 735 .jsenabled .comment-report-selectall{
 736     display: inline
 737 }
 738 /**
 739 * Completion progress report
 740 */
 741 .completion-expired {
 742     background: @errorBackground;
 743 }
 744 .completion-expected {
 745     font-size: @fontSizeMini;
 746 }
 747 .completion-sortchoice,
 748 .completion-identifyfield {
 749     font-size: @fontSizeMini;
 750     vertical-align: bottom;
 751 }
 752 .completion-progresscell {
 753     text-align: right;
 754 }
 755 .completion-expired .completion-expected {
 756     font-weight: bold;
 757 }
 758 /**
 759 * Tags
 760 */
 761 img.user-image {
 762     height: 100px;
 763     width: 100px;
 764 }
 765 #tag-search-box {
 766     text-align: center;
 767     margin: 10px auto;
 768 }
 769
 770 .path-tag .tag-index-items .tagarea {
 771     border: 1px solid #E3E3E3;
 772     border-radius: 4px;
 773     padding: 10px;
 774     margin-top: 10px;
 775 }
 776
 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;
 790 }
 791
 792 .path-tag .tagarea .controls,
 793 .path-tag .tagarea .taggeditems {
 794     .clearfix();
 795 }
 796 .path-tag .tagarea .controls,
 797 .path-tag .tag-backtoallitems {
 798     text-align: center;
 799 }
 800 .path-tag .tagarea .controls .gotopage.nextpage {
 801     float: right;
 802 }
 803 .path-tag .tagarea .controls .gotopage.prevpage {
 804     float: left;
 805 }
 806 .path-tag .tagarea .controls .exclusivemode {
 807     display: inline-block;
 808 }
 809 .dir-rtl.path-tag  .tagarea .controls .gotopage.nextpage {
 810     float: left;
 811 }
 812 .dir-rtl.path-tag  .tagarea .controls .gotopage.prevpage {
 813     float: right;
 814 }
 815 .path-tag .tagarea .controls.controls-bottom {
 816     margin-top: 5px;
 817 }
 818 .path-tag .tagarea .controls .gotopage.nextpage::after {
 819     padding-right: 5px;
 820     padding-left: 5px;
 821     content: "»";
 822 }
 823 .path-tag .tagarea .controls .gotopage.prevpage::before {
 824     padding-right: 5px;
 825     padding-left: 5px;
 826     content: "«";
 827 }
 828
 829 span.flagged-tag,
 830 tr.flagged-tag,
 831 span.flagged-tag a,
 832 tr.flagged-tag a {
 833     color: @errorText;
 834 }
 835 .tag-management-table td,
 836 .tag-management-table th {
 837     vertical-align: middle;
 838     padding: 4px;
 839 }
 840 .tag-management-table .inplaceeditable.inplaceeditingon input {
 841     width: 150px;
 842 }
 843 .path-admin-tag .addstandardtags {
 844     float: right;
 845     img {
 846         margin: 0 5px;
 847     }
 848 }
 849 .dir-rtl.path-admin-tag .addstandardtags {
 850     float: left;
 851 }
 852 .path-tag .tag-relatedtags {
 853     padding-top: 10px;
 854 }
 855 .path-tag .tag-management-box {
 856     text-align: right;
 857 }
 858 .path-tag .tag-index-toc {
 859     padding: 10px;
 860     text-align: center;
 861 }
 862 .path-tag .tag-index-toc li,
 863 .path-tag .tag-management-box li {
 864     margin-left: 5px;
 865     margin-right: 5px;
 866 }
 867 .path-tag .tag-management-box li a.edittag {
 868     background-image: url([[pix:moodle|i/settings]]);
 869 }
 870 .path-tag .tag-management-box li a.flagasinappropriate {
 871     background-image: url([[pix:moodle|i/flagged]]);
 872 }
 873 .path-tag .tag-management-box li a.removefrommyinterests {
 874     background-image: url([[pix:moodle|t/delete]]);
 875 }
 876 .path-tag .tag-management-box li a.addtomyinterests {
 877     background-image: url([[pix:moodle|t/add]]);
 878 }
 879 .path-tag .tag-management-box li a {
 880     background-repeat: no-repeat;
 881     background-position: left;
 882     padding-left: 17px;
 883 }
 884 .tag_feed.media-list .media .itemimage {
 885     float: left;
 886 }
 887 .dir-rtl .tag_feed.media-list .media .itemimage {
 888     float: right;
 889 }
 890 .tag_feed.media-list .media .itemimage img {
 891     height: 35px;
 892     width: 35px;
 893 }
 894 .tag_feed.media-list .media .media-body {
 895     padding-right: 10px;
 896     padding-left: 10px;
 897 }
 898 .tag_feed .media .muted a {
 899     .muted();
 900 }
 901 .tag_cloud {
 902     text-align: center;
 903 }
 904 .tag_cloud .inline-list li {
 905     padding: 0px 0.2em;
 906 }
 907 .tag_cloud .tag_overflow {
 908     margin-top: 1em;
 909     font-style: italic;
 910 }
 911 .tag_cloud .s20 {
 912     font-size: 2.7em;
 913 }
 914 .tag_cloud .s19 {
 915     font-size: 2.6em;
 916 }
 917 .tag_cloud .s18 {
 918     font-size: 2.5em;
 919 }
 920 .tag_cloud .s17 {
 921     font-size: 2.4em;
 922 }
 923 .tag_cloud .s16 {
 924     font-size: 2.3em;
 925 }
 926 .tag_cloud .s15 {
 927     font-size: 2.2em;
 928 }
 929 .tag_cloud .s14 {
 930     font-size: 2.1em;
 931 }
 932 .tag_cloud .s13 {
 933     font-size: 2em;
 934 }
 935 .tag_cloud .s12 {
 936     font-size: 1.9em;
 937 }
 938 .tag_cloud .s11 {
 939     font-size: 1.8em;
 940 }
 941 .tag_cloud .s10 {
 942     font-size: 1.7em;
 943 }
 944 .tag_cloud .s9 {
 945     font-size: 1.6em;
 946 }
 947 .tag_cloud .s8 {
 948     font-size: 1.5em;
 949 }
 950 .tag_cloud .s7 {
 951     font-size: 1.4em;
 952 }
 953 .tag_cloud .s6 {
 954     font-size: 1.3em;
 955 }
 956 .tag_cloud .s5 {
 957     font-size: 1.2em;
 958 }
 959 .tag_cloud .s4 {
 960     font-size: 1.1em;
 961 }
 962 .tag_cloud .s3 {
 963     font-size: 1em;
 964 }
 965 .tag_cloud .s2 {
 966     font-size: 0.9em;
 967 }
 968 .tag_cloud .s1 {
 969     font-size: 0.8em;
 970 }
 971 .tag_cloud .s0 {
 972     font-size: 0.7em;
 973 }
 974 .tag_list ul {
 975     display: inline;
 976 }
 977 .tag_list.hideoverlimit .overlimit {
 978     display:none;
 979 }
 980 .tag_list .tagmorelink {
 981     display:none;
 982 }
 983 .tag_list.hideoverlimit .tagmorelink {
 984     display:inline;
 985 }
 986 .tag_list.hideoverlimit .taglesslink {
 987     display:none;
 988 }
 989
 990 /**
 991 * Web Service
 992 */
 993 #webservice-doc-generator td {
 994     text-align: left;
 995     border: 0 solid black;
 996 }
 997 /**
 998 * Smart Select Element
 999 */
1000 .smartselect {
1001     position: absolute;
1002 }
1003 .smartselect .smartselect_mask {
1004     background-color: #fff;
1005 }
1006 .smartselect ul  {
1007     padding: 0;
1008     margin: 0;
1009 }
1010 .smartselect ul li {
1011     list-style: none;
1012 }
1013 .smartselect .smartselect_menu {
1014     margin-right: 5px;
1015 }
1016 .safari .smartselect .smartselect_menu {
1017     margin-left: 2px;
1018 }
1019 .smartselect .smartselect_menu,
1020 .smartselect .smartselect_submenu {
1021     border: 1px solid #000;
1022     background-color: #FFF;
1023     display: none;
1024 }
1025 .smartselect .smartselect_menu.visible,
1026 .smartselect .smartselect_submenu.visible {
1027     display: block;
1028 }
1029 .smartselect .smartselect_menu_content ul li {
1030     position: relative;
1031     padding: 2px 5px;
1032 }
1033 .smartselect .smartselect_menu_content ul li a {
1034     color: #333;
1035     text-decoration: none;
1036 }
1037 .smartselect .smartselect_menu_content ul li a.selectable {
1038     color: inherit;
1039 }
1040 .smartselect .smartselect_submenuitem {
1041     background-image: url([[pix:moodle|t/collapsed]]);
1042     background-repeat: no-repeat;
1043     background-position: 100%;
1044 }
1045 /** Spanning mode */
1046 .smartselect.spanningmenu .smartselect_submenu {
1047     position: absolute;
1048     top: -1px;
1049     left: 100%;
1050 }
1051 .smartselect.spanningmenu .smartselect_submenu a {
1052     white-space: nowrap;
1053     padding-right: 16px;
1054 }
1055 .smartselect.spanningmenu .smartselect_menu_content ul li a.selectable:hover {
1056     text-decoration: underline;
1057 }
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;
1066 }
1067 .smartselect.compactmenu .smartselect_submenu.visible {
1068     display: block;
1069 }
1070 .smartselect.compactmenu .smartselect_menu {
1071     z-index: 1000;
1072     overflow: hidden;
1073 }
1074 .smartselect.compactmenu .smartselect_submenu .smartselect_submenu {
1075     z-index: 1020;
1076 }
1077 .smartselect.compactmenu .smartselect_submenuitem:hover > .smartselect_menuitem_label {
1078     font-weight: bold;
1079 }
1080 /**
1081 * Registration
1082 */
1083 #page-admin-registration-register .registration_textfield {
1084     width: 300px;
1085 }
1086 /**
1087 * Enrol
1088 */
1089 .userenrolment {
1090     width: 100%;
1091     border-collapse: collapse;
1092 }
1093 .userenrolment tr {
1094     vertical-align:top;
1095 }
1096 .userenrolment td {
1097     padding: 0;
1098     height: 41px;
1099 }
1100 .userenrolment .subfield {
1101     margin-right: 5px;
1102 }
1103 .userenrolment .col_userdetails .subfield {
1104     margin-left: 40px;
1105 }
1106 .userenrolment .col_userdetails .subfield_picture {
1107     float: left;
1108     margin-left: 0;
1109 }
1110 .userenrolment .col_lastseen {
1111     width: 150px;
1112 }
1113 .userenrolment .col_role {
1114     width: 262px;
1115 }
1116 .userenrolment .col_role .roles,
1117 .userenrolment .col_group .groups {
1118     margin-right: 30px;
1119 }
1120 .userenrolment .col_role .role,
1121 .userenrolment .col_group .group {
1122     float: left;
1123     padding: 3px;
1124     margin: 3px;
1125     white-space: nowrap;
1126 }
1127 .userenrolment .col_role .role a,
1128 .userenrolment .col_group .group a {
1129     margin-left: 3px;
1130     cursor: pointer;
1131 }
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     }
1140 }
1141 .userenrolment .col_role .addrole img,
1142 .userenrolment .col_group .addgroup img {
1143     vertical-align: baseline;
1144 }
1145
1146 .dir-rtl .userenrolment .col_role .role {
1147     float: right;
1148 }
1149
1150 .userenrolment .hasAllRoles .col_role .addrole {
1151     display: none;
1152 }
1153
1154 .userenrolment .col_enrol .enrolment {
1155     float: left;
1156     padding: 3px;
1157     margin: 3px;
1158 }
1159 .userenrolment .col_enrol .enrolment a {
1160     float: right;
1161     margin-left: 3px;
1162 }
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   }
1217 }
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     }
1259 }
1260
1261 #page-enrol-users .enrol-users-page-action input {
1262     margin-left: 0
1263 }
1264
1265 /**
1266 * Overide for RTL layout
1267 **/
1268 .dir-rtl .headermain {
1269     float: right;
1270 }
1271 .dir-rtl .headermenu {
1272     float: left;
1273 }
1274 .dir-rtl .loginbox .loginform .form-label {
1275     float: right;
1276     text-align: left;
1277 }
1278 .dir-rtl .loginbox .loginform .form-input {
1279     text-align: right;
1280     margin-right: 1%;
1281 }
1282 .dir-rtl .yui3-menu-hidden {
1283     left: 0;
1284 }
1285 #page-admin-roles-define.dir-rtl #rolesform .felement {
1286     margin-right: 180px;
1287 }
1288 #page-message-edit.dir-rtl table.generaltable th.c0 {
1289     text-align: right;
1290 }
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;
1299 }
1300 .corelightbox img {
1301     position: fixed;
1302     top: 50%;
1303     left: 50%;
1304 }
1305
1306 .mod-indent-outer {
1307     display: table;
1308 }
1309 .mod-indent {
1310     display: table-cell;
1311 }
1312 .label .mod-indent {
1313   float:left;
1314   padding-top:20px
1315 }
1316
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));
1325 }
1326 .mod-indent-generate(@n, @i: 1) when (@i = @n) {
1327     .mod-indent-huge {
1328         width: (@i * @mod-indent-size);
1329     }
1330 }
1331 .mod-indent-generate(@mod-indent-levels);
1332
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
1337 }
1338 .resourcecontent audio.mediaplugin_html5audio {
1339     width: 600px
1340 }
1341 /** Large resource images should avoid hidden overflow **/
1342 .resourceimage {
1343     max-width: 100%;
1344 }
1345 /* Audio player size in 'inline' mode (can only change width, as above) */
1346 .mediaplugin_mp3 object {
1347     height: 15px;
1348     width: 300px
1349 }
1350 audio.mediaplugin_html5audio {
1351     width: 300px
1352 }
1353 /* TinyMCE moodle media preview frame should not have padding */
1354 .core_media_preview.pagelayout-embedded #content {
1355     padding: 0;
1356 }
1357 .core_media_preview.pagelayout-embedded #maincontent {
1358     height: 0;
1359 }
1360 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1361     padding: 0;
1362     margin: 0;
1363     min-width: 0;
1364     background: none;
1365 }
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;
1391 }
1392 .dir-rtl .ygtvtn {
1393     background-position: 0 -5600px;
1394 }
1395 .dir-rtl .ygtvtm {
1396     background-position: 0 -4000px;
1397 }
1398 .dir-rtl .ygtvtmh,
1399 .dir-rtl .ygtvtmhh {
1400     background-position: 0 -4800px;
1401 }
1402 .dir-rtl .ygtvtp {
1403     background-position: 0 -6400px;
1404 }
1405 .dir-rtl .ygtvtph,
1406 .dir-rtl .ygtvtphh {
1407     background-position: 0 -7200px;
1408 }
1409 .dir-rtl .ygtvln {
1410     background-position: 0 -1600px;
1411 }
1412 .dir-rtl .ygtvlm {
1413     background-position: 0 0;
1414 }
1415 .dir-rtl .ygtvlmh,
1416 .dir-rtl .ygtvlmhh {
1417     background-position: 0 -800px;
1418 }
1419 .dir-rtl .ygtvlp {
1420     background-position: 0 -2400px;
1421 }
1422 .dir-rtl .ygtvlph,
1423 .dir-rtl .ygtvlphh {
1424     background-position: 0 -3200px
1425 }
1426 .dir-rtl .ygtvdepthcell {
1427     background-position: 0 -8000px;
1428 }
1429 .dir-rtl .ygtvok {
1430     background-position: 0 -8800px;
1431 }
1432 .dir-rtl .ygtvok:hover {
1433     background-position: 0 -8844px;
1434 }
1435 .dir-rtl .ygtvcancel {
1436     background-position: 0 -8822px;
1437 }
1438 .dir-rtl .ygtvcancel:hover {
1439     background-position: 0 -8866px;
1440 }
1441 .dir-rtl.yui-skin-sam .yui-panel .hd {
1442     text-align: right;
1443 }
1444 .dir-rtl .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
1445     text-align: right;
1446 }
1447 /** Fix TinyMCE editor right to left **/
1448 .dir-rtl .clearlooks2.ie9 .mceAlert .mceMiddle span,.dir-rtl .clearlooks2 .mceConfirm .mceMiddle span {
1449     top: 44px;
1450 }
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;
1464 }
1465 .path-rating .ratingtable {
1466     width: 100%;
1467     margin-bottom: 1em;
1468 }
1469 .path-rating .ratingtable th.rating {
1470     width: 100%;
1471 }
1472 .path-rating .ratingtable td.rating,
1473 .path-rating .ratingtable td.time {
1474     white-space: nowrap;
1475     text-align: center;
1476 }
1477 .initialbar {
1478     a, strong {
1479         padding-left: 3px;
1480         padding-right: 3px;
1481     }
1482 }
1483 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1484 .moodle-dialogue-base .moodle-dialogue-lightbox {
1485     background-color: #AAA;
1486 }
1487 .moodle-dialogue-base .hidden,
1488 .moodle-dialogue-base .moodle-dialogue-hidden {
1489     display: none;
1490 }
1491 .no-scrolling {
1492     overflow: hidden;
1493 }
1494 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1495     left: 0px;
1496     top: 0px;
1497     right: 0px;
1498     bottom: -50px;
1499     position: fixed;
1500 }
1501 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1502     overflow: auto;
1503 }
1504 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1505     width: 28px;
1506     height: 16px;
1507     background-size: 100%;
1508 }
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;
1516 }
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);
1524 }
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;
1540 }
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;
1547 }
1548 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1549     padding: 5px;
1550 }
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;
1562 }
1563 .dir-rtl .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1564     left: 0;
1565     right: auto;
1566 }
1567 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1568     padding: 1em;
1569     line-height: 2em;
1570     color: #555;
1571     font-size: 12px;
1572 }
1573 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-content {
1574     padding: 0;
1575     background: #FFF;
1576 }
1577
1578 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd {
1579     padding: 10px;
1580     font-size: 16px;
1581 }
1582
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;
1592 }
1593 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-hd,
1594 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-wrap {
1595     border-radius: 0px;
1596 }
1597 .moodle-dialogue-confirm .confirmation-dialogue {
1598     text-align: center;
1599 }
1600 .moodle-dialogue-confirm .confirmation-dialogue input {
1601     text-align: center;
1602 }
1603 .moodle-dialogue-exception .moodle-exception-message {
1604     text-align: center
1605 }
1606 .moodle-dialogue-exception .moodle-exception-param label {
1607     font-weight: bold;
1608 }
1609 .moodle-dialogue-exception .param-stacktrace label {
1610     background-color: #EEE;
1611     border: 1px solid #ccc;
1612     border-bottom-width: 0;
1613 }
1614 .moodle-dialogue-exception .param-stacktrace pre {
1615     border: 1px solid #ccc;
1616     background-color: #fff;
1617 }
1618 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1619     color: navy;
1620     font-size: @fontSizeSmall;
1621 }
1622 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1623     color: @errorText;
1624     font-size: @fontSizeSmall;
1625 }
1626 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1627     color: #333;
1628     font-size: 90%;
1629     border-bottom: 1px solid #eee;
1630 }
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;
1637 }
1638 .moodle-dialogue-confirm .confirmation-message {
1639     margin: 0.5em 1em;
1640 }
1641 .moodle-dialogue-confirm .confirmation-dialogue input {
1642     min-width: 80px
1643 }
1644 .moodle-dialogue-exception .moodle-exception-message {
1645     margin: 1em;
1646 }
1647 .moodle-dialogue-exception .moodle-exception-param {
1648     margin-bottom: 0.5em;
1649 }
1650 .moodle-dialogue-exception .moodle-exception-param label {
1651     width: 150px;
1652 }
1653 .moodle-dialogue-exception .param-stacktrace label {
1654     display: block;
1655     margin: 0;
1656     padding: 4px 1em;
1657 }
1658 .moodle-dialogue-exception .param-stacktrace pre {
1659     display: block;
1660     height: 200px;
1661     overflow: auto;
1662 }
1663 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1664     display: inline-block;
1665     margin: 4px 0;
1666 }
1667 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1668     display: inline-block;
1669     width: 50px;
1670     margin: 4px 1em;
1671 }
1672 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1673     padding-left: 25px;
1674     margin-bottom: 4px;
1675     padding-bottom: 4px;
1676 }
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;
1686 }
1687 /* Apply a default max-height on tooltip text */
1688 .moodle-dialogue .tooltiptext {
1689     max-height: 300px;
1690 }
1691
1692 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1693     z-index: 3001;
1694
1695     .moodle-dialogue-bd {
1696         overflow: auto;
1697     }
1698 }
1699
1700 /* Question Bank - Question Chooser "Close" button */
1701 #page-question-edit.dir-rtl a.container-close {
1702     right: auto;
1703     left: 6px;
1704 }
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;
1715 }
1716 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1717     margin: 0;
1718 }
1719 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1720     padding: 0;
1721     background: #F2F2F2;
1722     .border-bottom-radius(10px);
1723 }
1724 /* Center the submit buttons within the area */
1725 .choosercontainer #chooseform .submitbuttons {
1726     padding: 0.7em 0;
1727     text-align: center;
1728 }
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     }
1734 }
1735 .choosercontainer #chooseform .submitbuttons input {
1736     min-width: 100px;
1737     margin: 0 0.5em;
1738 }
1739 /* Various settings for the options area */
1740 .choosercontainer #chooseform .options {
1741     position: relative;
1742     border-bottom: 1px solid #BBBBBB;
1743 }
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     }
1762 }
1763 .dir-rtl.jschooser .choosercontainer #chooseform .alloptions {
1764     max-width: 18.3em;
1765 }
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;
1772 }
1773 .choosercontainer #chooseform .moduletypetitle {
1774     text-transform: uppercase;
1775     padding-top: 1.2em;
1776     padding-bottom: 0.4em;
1777 }
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;
1783 }
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;
1789 }
1790
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;
1795 }
1796 .choosercontainer #chooseform .option input[type=radio],
1797 .choosercontainer #chooseform .option span.typename,
1798 .choosercontainer #chooseform .option span.modicon {
1799     vertical-align: middle;
1800 }
1801 .choosercontainer #chooseform .option label {
1802     display: block;
1803     padding: 0.3em 0 0.1em 0;
1804     border-bottom: 1px solid #FFFFFF;
1805 }
1806 .choosercontainer #chooseform .nonoption {
1807     padding-left: 2.7em;
1808     padding-top: 0.3em;
1809     padding-bottom: 0.1em;
1810 }
1811 .dir-rtl .choosercontainer #chooseform .nonoption {
1812     padding-right: 2.7em;
1813     padding-left: 0;
1814 }
1815 .choosercontainer #chooseform .subtype {
1816     margin-bottom: 0;
1817     padding: 0 1.6em 0 3.2em;
1818 }
1819 .dir-rtl .choosercontainer #chooseform .subtype {
1820     padding: 0 3.2em 0 1.6em;
1821 }
1822 .choosercontainer #chooseform .subtype .typename {
1823     margin: 0 0 0 0.2em;
1824 }
1825 .dir-rtl .choosercontainer #chooseform .subtype .typename {
1826     margin: 0 0.2em 0 0;
1827 }
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;
1843 }
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;
1849 }
1850 /* Selected option settings */
1851 .jschooser .choosercontainer #chooseform .instruction,
1852 .choosercontainer #chooseform .selected .typesummary {
1853     display: block;
1854 }
1855 .choosercontainer #chooseform .selected {
1856     background-color: #fff;
1857     .box-shadow(0px 0 10px 0 #ccc);
1858 }
1859 .section-modchooser-link img.smallicon {
1860     padding: 3px;
1861 }
1862 /* Form element: listing */
1863 .formlistingradio {
1864     padding-bottom: 25px;
1865     padding-right: 10px;
1866 }
1867 .formlistinginputradio {
1868     float: left;
1869 }
1870 .formlistingmain {
1871     min-height: 225px;
1872 }
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);
1880 }
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);
1893 }
1894 .formlistingall {
1895     margin: 15px 0;
1896     padding: 0;
1897     .border-radius(4px);
1898 }
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;
1913 }
1914 body.jsenabled .formlistingradio {
1915     display: none;
1916 }
1917 body.jsenabled .formlisting {
1918     display: block;
1919 }
1920
1921 /* Badges styles */
1922 table.collection {
1923     .table;
1924     .table-bordered;
1925     .table-striped;
1926 }
1927 table.collection .name {
1928     text-align: left;
1929     vertical-align: middle;
1930 }
1931 table.collection .awards {
1932     width: 10%;
1933     text-align: center;
1934     vertical-align: middle;
1935 }
1936 table.collection .criteria {
1937     width: 40%;
1938     text-align: left;
1939     vertical-align: top;
1940 }
1941 table.collection .badgeimage,
1942 table.collection .status {
1943     width: 15%;
1944     text-align: center;
1945     vertical-align: middle;
1946 }
1947 table.collection .description {
1948     width: 25%;
1949     text-align: left;
1950 }
1951 .dir-rtl table.collection {
1952     .name,
1953     .criteria,
1954     .description  {
1955         text-align: right;
1956     }
1957 }
1958 table.collection .actions {
1959     width: 11em;
1960     text-align: center;
1961     vertical-align: middle;
1962 }
1963
1964 a.criteria-action {
1965     padding: 0px 3px;
1966     float: right;
1967 }
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;
1973 }
1974 ul.badges {
1975     margin: 0;
1976     list-style: none;
1977 }
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;
1985 }
1986 .badges li .badge-name {
1987     display: block;
1988     padding: 5px;
1989 }
1990 .badges li > img {
1991     position: absolute;
1992 }
1993 .badges li .badge-image {
1994     width: 100px;
1995     height: 100px;
1996     left: 10px;
1997     top: 0px;
1998     z-index: 1;
1999 }
2000 .badges li .badge-actions {
2001     position: relative;
2002 }
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;
2011 }
2012
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;
2022
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     }
2032
2033     .singlebutton {
2034         padding-top: 5px;
2035
2036         input {
2037             margin-left: 0px;
2038         }
2039     }
2040 }
2041 .dir-rtl #badge-image {
2042     float: right;
2043
2044     .expireimage {
2045         left: 41px;
2046     }
2047 }
2048 #badge-details {
2049     display: inline-block;
2050     width: 79%;
2051 }
2052
2053 #badge-overview dl,
2054 #badge-details dl {
2055     margin: 0;
2056
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     }
2073 }
2074
2075 .badge-profile {
2076     vertical-align: top;
2077 }
2078 .connected {
2079     color: @successText;
2080 }
2081 .notconnected {
2082     color: @errorText;
2083 }
2084 .connecting {
2085     color: @warningText;
2086 }
2087 #page-badges-award .recipienttable tr td {
2088     vertical-align: top;
2089 }
2090 #page-badges-award .recipienttable tr td.actions .actionbutton {
2091     margin: 0.3em 0;
2092     padding: 0.5em 0;
2093     width: 100%;
2094 }
2095 #page-badges-award .recipienttable tr td.existing,
2096 #page-badges-award .recipienttable tr td.potential {
2097     width: 42%;
2098 }
2099
2100 #issued-badge-table .activatebadge {
2101     display: inline-block;
2102 }
2103 .statusbox.active {
2104     background-color: @successBackground;
2105 }
2106 .statusbox.inactive {
2107     background-color: @warningBackground;
2108 }
2109 .statusbox {
2110     text-align: center;
2111     margin-bottom: 5px;
2112     padding: 5px;
2113 }
2114 .statusbox .activatebadge {
2115     display: inline-block;
2116 }
2117 .statusbox .activatebadge input[type=submit]{
2118     margin: 3px;
2119 }
2120 .activatebadge {
2121     margin: 0px;
2122     text-align: left;
2123     vertical-align: middle;
2124 }
2125 .dir-rtl .activatebadge {
2126     text-align: right;
2127 }
2128 img#persona_signin {
2129     cursor: pointer;
2130 }
2131 .addcourse {
2132     float: right;
2133 }
2134 .invisiblefieldset {
2135     display: inline;
2136     margin: 0;
2137     padding: 0;
2138     border-width: 0;
2139 }
2140 .breadcrumb-nav {
2141     float: left;
2142     margin-bottom: 10px;
2143 }
2144 .dir-rtl .breadcrumb-nav {
2145     float: right;
2146 }
2147 .breadcrumb-button .singlebutton div {
2148     margin-right: 0;
2149 }
2150 .breadcrumb-nav .breadcrumb {
2151     margin: 0;
2152 }
2153
2154 /** Header-bar styles **/
2155 .page-context-header {
2156     // We need to be explicit about the height of the header.
2157     @pageHeaderHeight: 140px;
2158
2159     // Do not remove these rules.
2160     overflow: hidden;
2161
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;
2173
2174         h1 {
2175             display: block;
2176         }
2177     }
2178
2179     .page-header-headings,
2180     .header-button-group {
2181         position: relative;
2182         line-height: 24px;
2183         vertical-align: middle;
2184     }
2185
2186     .header-button-group {
2187         display: block;
2188
2189         a {
2190             position: relative;
2191
2192             // Don't touch it unless you know exactly what you are doing.
2193             top: -0.4em;
2194         }
2195     }
2196 }
2197
2198 .dir-ltr .page-context-header {
2199     .page-header-image {
2200         float: left;
2201         margin-right: 1em;
2202     }
2203
2204     .header-button-group {
2205         float: left;
2206     }
2207 }
2208
2209 .dir-rtl .page-context-header {
2210     .page-header-image {
2211         float: right;
2212         margin-left: 1em;
2213     }
2214
2215     .header-button-group {
2216         float: right;
2217     }
2218 }
2219
2220 /** Action menu component styles **/
2221 .moodle-actionmenu,
2222 .moodle-actionmenu > ul,
2223 .moodle-actionmenu > ul > li {
2224     display: inline-block;
2225 }
2226
2227 .moodle-actionmenu ul {
2228     padding: 0;
2229     margin: 0;
2230     list-style-type: none;
2231 }
2232
2233 .section_action_menu .moodle-actionmenu ul.menubar {
2234     margin: 0;
2235 }
2236
2237 .section_action_menu .moodle-actionmenu ul.menu {
2238     margin: 0 10px 10px 0;
2239 }
2240
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. **/
2244 }
2245
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;
2261
2262             .iconsmall,
2263             .smallicon {
2264                 margin: 4px 4px 4px 0px;
2265                 padding: 8px 4px 0px 2px;
2266                 vertical-align: text-bottom;
2267             }
2268
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     }
2288
2289     &.dir-rtl {
2290         .moodle-actionmenu[data-enhance] {
2291             .toggle-display.textmenu {
2292                 margin-left: initial;
2293                 margin-right: 4px;
2294
2295                 .caret {
2296                     margin-left: initial;
2297                     margin-right: 2px;
2298                 }
2299             }
2300         }
2301     }
2302 }
2303
2304 .moodle-actionmenu[data-enhanced].show  {
2305
2306     position: relative;
2307
2308     .menu {
2309
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);
2318
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         }
2348
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     }
2374 }
2375
2376 .block .moodle-actionmenu {
2377     text-align: right;
2378 }
2379
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             }
2394
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     }
2420 }
2421
2422 ul.dragdrop-keyboard-drag li {
2423     list-style-type: none;
2424 }
2425
2426 .block-control-actions .moodle-core-dragdrop-draghandle img {
2427     width: 12px;
2428     height: 12px;
2429 }
2430
2431 a.disabled:hover,
2432 a.disabled {
2433     text-decoration: none;
2434     cursor: default;
2435     font-style: italic;
2436     color: #808080;
2437 }
2438 body.lockscroll {
2439   height: 100%;
2440   overflow: hidden;
2441 }
2442
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     }
2450 }
2451
2452 .progressbar_container {
2453     max-width: 500px;
2454     margin: 0 auto;
2455 }
2456
2457 /* IE10 only fix for calendar titling */
2458 .ie10 .yui3-calendar-header-label {
2459     display: inline-block;
2460 }
2461
2462 dd:before,
2463 dd:after {
2464   display: block;
2465   content: " ";
2466 }
2467 dd:after {
2468   clear: both;
2469 }
2470
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;
2477 }
2478
2479 .inplaceeditable {
2480
2481     &.inplaceeditingon {
2482         position: relative;
2483
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         }
2493
2494         input {
2495             width: 330px;
2496             height: 16px;
2497             vertical-align: text-bottom;
2498             margin-bottom: 0;
2499         }
2500
2501         select {
2502             margin-bottom: 0;
2503         }
2504     }
2505
2506     .quickediticon img {
2507         opacity: 0.2;
2508     }
2509
2510     .quickeditlink {
2511         color: inherit;
2512         text-decoration: inherit;
2513     }
2514
2515     &:hover .quickeditlink .quickediticon img,
2516     .quickeditlink:focus .quickediticon img {
2517         opacity: 1;
2518     }
2519
2520     &.inplaceeditable-toggle .quickediticon {
2521         display: none;
2522     }
2523 }
2524
2525 .dir-rtl {
2526     .inplaceeditable {
2527         &.inplaceeditingon {
2528             .editinstructions {
2529                 right: 0;
2530                 left: auto;
2531             }
2532         }
2533     }
2534 }
2535 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2536     margin-top: -20px;
2537 }