theme/bootstrapbase/less/moodle/filemanager.less

   1  // File Picker and File Manager
   2 .filemanager,
   3 .filepicker,
   4 .file-picker {
   5     font-size: 11px;
   6 }
   7 .filemanager a,
   8 .file-picker a,
   9 .filemanager a:hover,
  10 .file-picker a:hover {
  11     color: #555555;
  12     text-decoration: none;
  13 }
  14 .filemanager input[type="text"],
  15 .file-picker input[type="text"] {
  16     width: 265px;
  17 }
  18  .file-picker .fp-setlicense {
  19     td {
  20         max-width: 265px;
  21     }
  22     select {
  23         max-width: 100%;
  24     }
  25  }
  26 .fp-content-center {
  27     height: 100%;
  28     width: 100%;
  29     display: table-cell;
  30     vertical-align: middle;
  31 }
  32 .fp-content-hidden {
  33     visibility: hidden;
  34 }
  35 // Dialogue (File Picker and File Manager)
  36 .yui3-panel-focused {
  37     outline: none;
  38 }
  39 #filesskin .yui3-panel-content {
  40     padding-bottom: 20px;
  41     background: #F2F2F2;
  42     .border-radius(8px);
  43     border: 1px solid #fff;
  44     display: inline-block;
  45     .ie7-inline-block();
  46     .box-shadow(5px 5px 20px 0 #666);
  47 }
  48 #filesskin .yui3-widget-hd {
  49     .border-radius(10px 10px 0 0);
  50     border-bottom: 1px solid #BBBBBB;
  51     padding: 5px;
  52     text-align: center;
  53     font-size: 12px;
  54     color: #333;
  55     letter-spacing: 1px;
  56     text-shadow: 1px 1px 1px #fff;
  57     filter: dropshadow(color=#FFFFFF, offx=1, offy=1);
  58     #gradient > .vertical (#fff, #ccc);
  59 }
  60 .fp-panel-button {
  61     background: #fff;
  62     padding: 3px 20px 2px 20px;
  63     text-align: center;
  64     margin: 10px;
  65     .border-radius(10px);
  66     display: inline-block;
  67     .ie7-inline-block();
  68     .box-shadow(2px 2px 3px .1px #999);
  69 }
  70
  71 .filepicker .moodle-dialogue-wrap .moodle-dialogue-bd {
  72     padding: 0px;
  73 }
  74 // File Picker layout
  75 #filesskin .file-picker.fp-generallayout {
  76     width: 859px;
  77     background: #FFFFFF;
  78     .border-radius(10px);
  79     border: 1px solid #CCCCCC;
  80     position: relative;
  81 }
  82 .file-picker .fp-repo-area {
  83     width: 180px;
  84     overflow: auto;
  85     display: inline-block;
  86     .ie7-inline-block();
  87     float: left;
  88     height: 525px;
  89     border-right: 1px solid #BBBBBB;
  90 }
  91 .dir-rtl .file-picker .fp-repo-area {
  92     border-left: 1px solid #BBBBBB;
  93     border-right: none;
  94     float: right;
  95 }
  96 .file-picker .fp-repo-items {
  97     float: left;
  98     width: 693px;
  99 }
 100 .dir-rtl .file-picker .fp-repo-items {
 101     float: right;
 102 }
 103 .file-picker .fp-navbar {
 104     background: #F2F2F2;
 105     min-height: 22px;
 106     border-bottom: 1px solid #BBBBBB;
 107     padding: 5px 8px;
 108 }
 109 .file-picker .fp-content {
 110     background: #FFFFFF;
 111     clear: both;
 112     overflow: auto;
 113     height: 468px;
 114 }
 115 .filepicker.moodle-dialogue-fullscreen .file-picker .fp-content {
 116     width: 100%;
 117     height: 100%;
 118 }
 119 .dir-rtl .file-picker .fp-repo-items {
 120     margin-right: 181px;
 121 }
 122 .file-picker .fp-content-loading {
 123     height: 100%;
 124     width: 100%;
 125     display: table;
 126     text-align: center;
 127 }
 128 .file-picker .fp-content .fp-object-container {
 129     width: 98%;
 130     height: 98%;
 131 }
 132 .dir-rtl .file-picker .fp-list {
 133     text-align: right;
 134 }
 135 .dir-rtl .file-picker .fp-toolbar {
 136     padding: 0;
 137 }
 138 .dir-rtl .file-picker .fp-list {
 139     text-align: right;
 140 }
 141 .dir-rtl .file-picker .fp-repo-name {
 142     display: inline;
 143 }
 144 .dir-rtl .file-picker .fp-pathbar {
 145     text-align: right;
 146     display: block;
 147     border-top: none;
 148 }
 149 .dir-rtl .file-picker div.bd {
 150     text-align: right;
 151 }
 152 .dir-rtl #filemenu .yuimenuitemlabel {
 153     text-align: right;
 154 }
 155 .dir-rtl .filepicker .yui-layout-unit-left {
 156     left: 500px;
 157 }
 158 .dir-rtl .filepicker .yui-layout-unit-center {
 159     left: 0;
 160 }
 161 // File Manager
 162 .dir-rtl .filemanager-toolbar a {
 163     padding: 0;
 164 }
 165 // Repositories on fp-repo-area (File Picker only)
 166 .file-picker .fp-list {
 167     list-style-type: none;
 168     padding: 0;
 169     float: left;
 170     width: 100%;
 171     margin: 0;
 172 }
 173 .dir-rtl .file-picker .fp-list {
 174     text-align: right;
 175     float: left;
 176 }
 177 .file-picker .fp-list .fp-repo a {
 178     display: block;
 179     padding: .5em .7em;
 180 }
 181 .file-picker .fp-list .fp-repo.active {
 182     background: #F2F2F2;
 183 }
 184 .file-picker .fp-list .fp-repo-icon {
 185     padding: 0 7px 0 5px;
 186 }
 187 // Tools, Path & View on fp-navbar (File Picker and File Manager)
 188 .fp-toolbar {
 189     display: table-row;
 190     line-height: 22px;
 191     float: left;
 192     max-width: 70%;
 193 }
 194 .dir-rtl .fp-toolbar {
 195     float: right;
 196 }
 197 .fp-toolbar.empty {
 198     display: none;
 199 }
 200 .fp-toolbar .disabled {
 201     display: none;
 202 }
 203 .fp-toolbar div {
 204     display: inline-block;
 205     .ie7-inline-block();
 206     padding: 0 2px;
 207     padding-right: 10px;
 208 }
 209 .dir-rtl .fp-toolbar div {
 210     width: 100px;
 211     padding-right: 0px;
 212 }
 213 .fp-toolbar img {
 214     vertical-align: -15%;
 215     margin-right: 5px;
 216 }
 217 .fp-toolbar .fp-tb-search {
 218     width: 228px;
 219     height: 14px;
 220 }
 221 .fp-toolbar .fp-tb-search input {
 222     background: #FFFFFF url('[[pix:a/search]]') no-repeat 3px 3px;
 223     padding: 2px 6px 1px 20px;
 224     width: 200px;
 225     height: 16px;
 226     border: 1px solid #BBBBBB;
 227 }
 228 .fp-viewbar {
 229     float: right;
 230     width: 69px;
 231     height: 22px;
 232     margin-right: 8px;
 233 }
 234 .dir-rtl .fp-toolbar img {
 235     vertical-align: -35%;
 236 }
 237 .dir-rtl .fp-viewbar {
 238     float: left;
 239     width: 100px;
 240 }
 241 .fp-vb-icons {
 242     background: url('[[pix:theme|fp/view_icon_active]]') no-repeat 0 0;
 243     width: 22px;
 244     height: 22px;
 245     display: inline-block;
 246     .ie7-inline-block();
 247 }
 248 .dir-rtl .fp-vb-icons {
 249     background: url('[[pix:theme|fp/view_icon_active]]') no-repeat 0 0;
 250     display: block;
 251     float: left;
 252     margin-right: 4px;
 253 }
 254 .fp-vb-icons.checked {
 255     background: url('[[pix:theme|fp/view_icon_selected]]');
 256 }
 257 .dir-rtl .fp-vb-icons.checked {
 258     background: url('[[pix:theme|fp/view_icon_selected]]');
 259     display: block;
 260     float: left;
 261     margin-right: 4px;
 262 }
 263 .fp-viewbar.disabled .fp-vb-icons {
 264     background: url('[[pix:theme|fp/view_icon_inactive]]');
 265 }
 266 .fp-vb-details {
 267     background: url('[[pix:theme|fp/view_list_active]]') no-repeat 0 0;
 268     width: 23px;
 269     height: 22px;
 270     display: inline-block;
 271     .ie7-inline-block();
 272     margin-left: -4px;
 273 }
 274 .dir-rtl .fp-vb-details {
 275     background: url('[[pix:theme|fp/view_list_active]]') no-repeat 0 0;
 276     display: block;
 277     float: left;
 278     margin-right: 4px;
 279 }
 280 .fp-vb-details.checked {
 281     background: url('[[pix:theme|fp/view_list_selected]]');
 282 }
 283 .dir-rtl .fp-vb-details.checked {
 284     background: url('[[pix:theme|fp/view_list_selected]]');
 285     display: block;
 286     float: left;
 287     margin-right: 4px;
 288 }
 289 .fp-viewbar.disabled .fp-vb-details {
 290     background: url('[[pix:theme|fp/view_list_inactive]]');
 291 }
 292 .fp-vb-tree {
 293     background: url('[[pix:theme|fp/view_tree_active]]') no-repeat 0 0;
 294     width: 23px;
 295     height: 22px;
 296     display: inline-block;
 297     .ie7-inline-block();
 298     margin-left: -4px;
 299 }
 300 .dir-rtl .fp-vb-tree {
 301     background: url('[[pix:theme|fp/view_tree_active]]') no-repeat 0 0;
 302     display: block;
 303     float: left;
 304     margin-right: 4px;
 305 }
 306 .fp-vb-tree.checked {
 307     background: url('[[pix:theme|fp/view_tree_selected]]');
 308 }
 309 .dir-rtl .fp-vb-tree.checked {
 310     background: url('[[pix:theme|fp/view_tree_selected]]');
 311     display: block;
 312     float: left;
 313     margin-right: 4px;
 314 }
 315 .fp-viewbar.disabled .fp-vb-tree {
 316     background: url('[[pix:theme|fp/view_tree_inactive]]');
 317 }
 318 .file-picker .fp-clear-left {
 319     clear: left;
 320 }
 321 // over ride hover rule from core.css
 322 .dir-rtl .filemanager-toolbar .fp-vb-icons a:hover {
 323     background: url('[[pix:theme|fp/view_icon_selected]]');
 324 }
 325 .dir-rtl .filemanager-toolbar .fp-vb-icons.checked a:hover {
 326     background: url('[[pix:theme|fp/view_icon_active]]') no-repeat 0 0;
 327 }
 328 .dir-rtl .fp-vb-details a:hover {
 329     background: none;
 330     border: 20px solid black;
 331 }
 332 .dir-rtl .fp-vb-details.checked a:hover {
 333     background: none;
 334     border: 40px solid black;
 335 }
 336 .dir-rtl .fp-vb-tree a:hover {
 337     background: none;
 338     border: 30px solid black;
 339 }
 340 .dir-rtl .fp-vb-tree.checked a:hover {
 341     background: none;
 342     border: 50px solid black;
 343 }
 344 .file-picker .fp-pathbar {
 345     display: table-row;
 346 }
 347 .fp-pathbar.empty {
 348     display: none;
 349 }
 350 .fp-pathbar .fp-path-folder {
 351     background: url('[[pix:theme|fp/path_folder]]') no-repeat 0 0;
 352     width: 27px;
 353     height: 12px;
 354     margin-left: 4px;
 355 }
 356 .dir-rtl .fp-pathbar .fp-path-folder {
 357     background: url('[[pix:theme|fp/path_folder_rtl]]') no-repeat right top;
 358     width: auto;
 359     height: 12px;
 360     margin-left: 4px;
 361 }
 362 .dir-rtl .fp-pathbar span {
 363     display: inline-block;
 364     .ie7-inline-block();
 365     float: right;
 366     margin-left: 32px;
 367 }
 368 .fp-pathbar .fp-path-folder-name {
 369     margin-left: 32px;
 370     line-height: 20px;
 371 }
 372 .dir-rtl .fp-pathbar .fp-path-folder-name {
 373     margin-right: 32px;
 374     line-height: 20px;
 375 }
 376 // Icon view (File Picker and File Manager)
 377 .fp-iconview .fp-file {
 378     float: left;
 379     text-align: center;
 380     position: relative;
 381     margin: 10px 10px 35px;
 382 }
 383 .fp-iconview .fp-thumbnail {
 384     min-width: 110px;
 385     min-height: 110px;
 386     line-height: 110px;
 387     text-align: center;
 388     border: 1px solid #FFFFFF;
 389     display: block;
 390 }
 391 .fp-iconview .fp-thumbnail img {
 392     border: 1px solid #ddd;
 393     padding: 3px;
 394     vertical-align: middle;
 395     .box-shadow(1px 1px 2px 0 #ccc);
 396 }
 397 .fp-iconview .fp-thumbnail:hover {
 398     background: #fff;
 399     border: 1px solid #ddd;
 400     .box-shadow(inset 0 0 10px 0px #ccc);
 401 }
 402 .fp-iconview .fp-filename-field {
 403     height: 33px;
 404     word-wrap: break-word;
 405     overflow: hidden;
 406     position: absolute;
 407 }
 408 .fp-iconview .fp-filename-field:hover {
 409     overflow: visible;
 410     z-index: 1000;
 411 }
 412 .fp-iconview .fp-filename-field .fp-filename {
 413     background: #FFFFFF;
 414     padding-top: 5px;
 415     padding-bottom: 12px;
 416     min-width: 112px;
 417 }
 418 .dir-rtl .fp-iconview .fp-file {
 419     float: right;
 420 }
 421 // Table view (File Picker only)
 422 .file-picker .yui3-datatable table {
 423     border: 0 solid #BBBBBB;
 424     width: 100%;
 425 }
 426 #filesskin .file-picker .yui3-datatable-header {
 427     background: #FFFFFF;
 428     border-bottom: 1px solid #CCCCCC;
 429     border-left: 0 solid #FFFFFF;
 430     color: #555555;
 431 }
 432 #filesskin .file-picker .yui3-datatable-odd .yui3-datatable-cell {
 433     background-color: #F6F6F6;
 434     border-left: 0 solid #F6F6F6;
 435 }
 436 #filesskin .file-picker .yui3-datatable-even .yui3-datatable-cell {
 437     background-color: #FFFFFF;
 438     border-left: 0 solid #FFFFFF;
 439 }
 440 .dir-rtl .file-picker .yui3-datatable-header {
 441     text-align: right;
 442 }
 443 // Tree view (File Manager only)
 444
 445 // first or middle sibling, no children
 446 .file-picker .ygtvtn,
 447 .filemanager .ygtvtn {
 448     background: url('[[pix:moodle|y/tn]]') 0 0 no-repeat;
 449     width: 17px;
 450     height: 22px;
 451 }
 452 .dir-rtl .filemanager .ygtvtn,
 453 .dir-rtl .file-picker .ygtvtn {
 454     background: url('[[pix:moodle|y/tn_rtl]]') 0 0 no-repeat;
 455     width: 17px;
 456     height: 22px;
 457 }
 458 // first or middle sibling, collapsable
 459 .file-picker .ygtvtm,
 460 .filemanager .ygtvtm {
 461     background: url('[[pix:moodle|y/tm]]') 0 10px no-repeat;
 462     width: 13px;
 463     height: 12px;
 464     cursor: pointer;
 465 }
 466 // first or middle sibling, collapsable, hover
 467 .file-picker .ygtvtmh,
 468 .filemanager .ygtvtmh {
 469     background: url('[[pix:moodle|y/tm]]') 0 10px no-repeat;
 470     width: 13px;
 471     height: 12px;
 472     cursor: pointer;
 473 }
 474 // first or middle sibling, expandable
 475 .file-picker .ygtvtp,
 476 .filemanager .ygtvtp {
 477     background: url('[[pix:moodle|y/tp]]') 0 10px no-repeat;
 478     width: 13px;
 479     height: 12px;
 480     cursor: pointer;
 481 }
 482 .dir-rtl .file-picker .ygtvtp,
 483 .dir-rtl .filemanager .ygtvtp {
 484     background: url('[[pix:moodle|y/tp_rtl]]') 0 10px no-repeat;
 485 }
 486 // first or middle sibling, expandable, hover
 487 .file-picker .ygtvtph,
 488 .filemanager .ygtvtph {
 489     background: url('[[pix:moodle|y/tp]]') 0 10px no-repeat;
 490     width: 13px;
 491     height: 22px;
 492     cursor: pointer;
 493 }
 494 .dir-rtl .file-picker .ygtvtph,
 495 .dir-rtl .filemanager .ygtvtph {
 496     background: url('[[pix:moodle|y/tp_rtl]]') 0 10px no-repeat;
 497 }
 498 // last sibling, no children
 499 .file-picker .ygtvln,
 500 .filemanager .ygtvln {
 501     background: url('[[pix:moodle|y/ln]]') 0 0 no-repeat;
 502     width: 17px;
 503     height: 22px;
 504 }
 505 .dir-rtl .file-picker .ygtvln,
 506 .dir-rtl .filemanager .ygtvln {
 507     background: url('[[pix:moodle|y/ln_rtl]]') 0 0 no-repeat;
 508 }
 509 // Last sibling, collapsable
 510 .file-picker .ygtvlm,
 511 .filemanager .ygtvlm {
 512     background: url('[[pix:moodle|y/lm]]') 0 10px no-repeat;
 513     width: 13px;
 514     height: 12px;
 515     cursor: pointer;
 516 }
 517 // Last sibling, collapsable, hover
 518 .file-picker .ygtvlmh,
 519 .filemanager .ygtvlmh {
 520     background: url('[[pix:moodle|y/lm]]') 0 10px no-repeat;
 521     width: 13px;
 522     height: 12px;
 523     cursor: pointer;
 524 }
 525 // Last sibling, expandable
 526 .file-picker .ygtvlp,
 527 .filemanager .ygtvlp {
 528     background: url('[[pix:moodle|y/lp]]') 0 10px no-repeat;
 529     width: 13px;
 530     height: 12px;
 531     cursor: pointer;
 532 }
 533 .dir-rtl .file-picker .ygtvlp,
 534 .dir-rtl .filemanager .ygtvlp {
 535     background: url('[[pix:moodle|y/lp_rtl]]') 0 10px no-repeat;
 536 }
 537 // Last sibling, expandable, hover
 538 .file-picker .ygtvlph,
 539 .filemanager .ygtvlph {
 540     background: url('[[pix:moodle|y/lp]]') 0 10px no-repeat;
 541     width: 13px;
 542     height: 12px;
 543     cursor: pointer;
 544 }
 545 .dir-rtl .file-picker .ygtvlph,
 546 .dir-rtl .filemanager .ygtvlph {
 547     background: url('[[pix:moodle|y/lp_rtl]]') 0 10px no-repeat;
 548 }
 549 // Loading icon
 550 .file-picker .ygtvloading,
 551 .filemanager .ygtvloading {
 552     background: transparent url('[[pix:moodle|y/loading]]') 0 0 no-repeat;
 553     width: 16px;
 554     height: 22px;
 555 }
 556 // the style for the empty cells that are used for rendering the depth of the node
 557 .file-picker .ygtvdepthcell,
 558 .filemanager .ygtvdepthcell {
 559     background: url('[[pix:moodle|y/vline]]') 0 0 no-repeat;
 560     width: 17px;
 561     height: 32px;
 562 }
 563 .file-picker .ygtvblankdepthcell,
 564 .filemanager .ygtvblankdepthcell {
 565     width: 17px;
 566     height: 22px;
 567 }
 568 a.ygtvspacer:hover {
 569     color: transparent;
 570     text-decoration: none;
 571 }
 572 .ygtvlabel,
 573 .ygtvlabel:link,
 574 .ygtvlabel:visited,
 575 .ygtvlabel:hover {
 576     background-color: transparent;
 577     cursor: pointer;
 578     margin-left: 2px;
 579     text-decoration: none;
 580 }
 581 .file-picker .ygtvfocus,
 582 .filemanager .ygtvfocus {
 583     background-color: #EEEEEE;
 584 }
 585 .fp-filename-icon {
 586     margin-top: 10px;
 587     display: block;
 588     position: relative;
 589 }
 590 .fp-icon {
 591     float: left;
 592     margin-top: -7px;
 593     width: 24px;
 594     height: 24px;
 595     margin-right: 10px;
 596     text-align: center;
 597     line-height: 24px;
 598 }
 599 .dir-rtl .fp-icon {
 600     float: right;
 601     margin-left: 10px;
 602     margin-right: 0;
 603 }
 604 .fp-icon img {
 605     max-height: 24px;
 606     max-width: 24px;
 607     vertical-align: middle;
 608 }
 609 .fp-filename {
 610     padding-right: 10px;
 611 }
 612 .dir-rtl .fp-filename {
 613     padding-left: 10px;
 614     padding-right: 0;
 615 }
 616 // Repositories Login on fp-content (File Picker only)
 617
 618 .file-picker .fp-login-form {
 619     height: 100%;
 620     width: 100%;
 621     display: table;
 622 }
 623 .file-picker .fp-login-form table {
 624     margin: 0 auto;
 625 }
 626 .file-picker .fp-login-form p {
 627     text-align: center;
 628     margin-top: 3em;
 629 }
 630 .file-picker .fp-login-form .fp-login-input label {
 631     text-align: right;
 632     display: block;
 633 }
 634 .file-picker .fp-login-form .fp-login-input .input {
 635     text-align: left;
 636 }
 637 .file-picker .fp-login-form input[type="checkbox"]{
 638     width: 15px;
 639     height: 15px;
 640 }
 641 // Upload on fp-content (File Picker only)
 642 .file-picker .fp-upload-form {
 643     height: 100%;
 644     width: 100%;
 645     display: table;
 646 }
 647 .file-picker .fp-upload-form table {
 648     margin: 0 auto;
 649 }
 650 // File exists dialogue on Upload (File Picker only)
 651 .file-picker.fp-dlg {
 652     text-align: center;
 653 }
 654 .file-picker.fp-dlg .fp-dlg-text {
 655     padding: 30px 20px 10px;
 656     font-size: 12px;
 657 }
 658 .file-picker.fp-dlg .fp-dlg-buttons {
 659     margin: 0 20px;
 660 }
 661 // Error dialogue on Upload (File Picker only)
 662 .file-picker.fp-msg {
 663     text-align: center;
 664 }
 665 .file-picker.fp-msg .fp-msg-text {
 666     padding: 40px 20px 10px 20px;
 667     min-width: 200px;
 668     max-width: 500px;
 669     max-height: 300px;
 670     overflow: auto;
 671     font-size: 12px;
 672 }
 673 .file-picker.fp-msg.fp-msg-error .fp-msg-text {
 674     padding: 40px 20px 10px 20px;
 675     font-size: 12px;
 676 }
 677 // Error on fp-content (File Picker only)
 678 .file-picker .fp-content-error {
 679     height: 100%;
 680     width: 100%;
 681     display: table;
 682     text-align: center;
 683 }
 684 .file-picker .fp-content-error .fp-error {
 685     height: 100%;
 686     width: 100%;
 687     display: table-cell;
 688     vertical-align: middle;
 689     padding: 40px 20px 10px 20px;
 690     font-size: 12px;
 691 }
 692 // Lazy loading on fp-content (File Picker only)
 693 .file-picker .fp-nextpage {
 694     clear: both;
 695 }
 696 .file-picker .fp-nextpage .fp-nextpage-loading {
 697     display: none;
 698 }
 699 .file-picker .fp-nextpage.loading .fp-nextpage-link {
 700     display: none;
 701 }
 702 .file-picker .fp-nextpage.loading .fp-nextpage-loading {
 703     display: block;
 704     text-align: center;
 705     height: 100px;
 706     padding-top: 50px;
 707 }
 708 // Select Dialogue (File Picker and File Manager)
 709 .fp-select form {
 710     padding: 20px 20px 0;
 711 }
 712 .fp-select .fp-select-loading {
 713     text-align: center;
 714     margin-top: 20px;
 715 }
 716 .fp-select .fp-hr {
 717     clear: both;
 718     height: 1px;
 719     background-color: #FFFFFF;
 720     border-bottom: 1px solid #BBBBBB;
 721     width: auto;
 722     margin: 10px 0;
 723 }
 724 .fp-select table {
 725     padding: 0 0 10px;
 726 }
 727 .fp-select table .mdl-right {
 728     min-width: 84px;
 729 }
 730 .fp-select .fp-reflist .mdl-right {
 731     vertical-align: top;
 732 }
 733 .fp-select .fp-select-buttons {
 734     float: right;
 735 }
 736 .fp-select .fp-info {
 737     display: block;
 738     clear: both;
 739     padding: 1px 20px 0;
 740 }
 741 .fp-select .fp-thumbnail {
 742     float: left;
 743     min-width: 110px;
 744     min-height: 110px;
 745     line-height: 110px;
 746     text-align: center;
 747     margin: 10px 20px 0 0;
 748     background: #fff;
 749     border: 1px solid #ddd;
 750     .box-shadow(inset 0 0 10px 0 #ccc);
 751 }
 752 .fp-select .fp-thumbnail img {
 753     border: 1px solid #DDDDDD;
 754     padding: 3px;
 755     vertical-align: middle;
 756     margin: 10px;
 757 }
 758 .fp-select .fp-fileinfo {
 759     display: inline-block;
 760     .ie7-inline-block();
 761     margin-top: 10px;
 762 }
 763 .file-picker.fp-select .fp-fileinfo {
 764     max-width: 240px;
 765 }
 766 .fp-select .fp-fileinfo div {
 767     padding-bottom: 5px;
 768 }
 769 .file-picker.fp-select .uneditable {
 770     display: none;
 771 }
 772 .file-picker.fp-select .fp-select-loading {
 773     display: none;
 774 }
 775 .file-picker.fp-select.loading .fp-select-loading {
 776     display: block;
 777 }
 778 .file-picker.fp-select.loading form {
 779     display: none;
 780 }
 781 .fp-select .fp-dimensions.fp-unknown {
 782     display: none;
 783 }
 784 // File Manager
 785 .filemanager-loading{
 786     display: none;
 787 }
 788 .jsenabled .filemanager-loading{
 789     display: block;
 790     margin-top: 100px;
 791 }
 792 .filemanager.fm-loading .filemanager-toolbar,
 793 .filemanager.fm-loading .fp-pathbar,
 794 .filemanager.fm-loading .filemanager-container,
 795 .filemanager.fm-loaded .filemanager-loading,
 796 .filemanager.fm-maxfiles .fp-btn-add,
 797 .filemanager.fm-maxfiles .dndupload-message,
 798 .filemanager.fm-noitems .fp-btn-download,
 799 .filemanager .fm-empty-container,
 800 .filemanager.fm-noitems .filemanager-container .fp-content {
 801     display: none;
 802 }
 803 .filemanager .filemanager-updating {
 804     display: none;
 805     text-align: center;
 806 }
 807 .filemanager.fm-updating .filemanager-updating {
 808     display: block;
 809     margin-top: 37px;
 810 }
 811 .filemanager.fm-updating .fm-content-wrapper,
 812 .filemanager.fm-nomkdir .fp-btn-mkdir,
 813 .fitem.disabled .filemanager .filemanager-toolbar,
 814 .fitem.disabled .filemanager .fp-pathbar,
 815 .fitem.disabled .filemanager .fp-restrictions,
 816 .fitem.disabled .filemanager .fm-content-wrapper {
 817     display: none;
 818 }
 819 // File Manager layout
 820 .fp-restrictions{
 821     text-align: right;
 822 }
 823 .filemanager .fp-navbar {
 824     background: #F2F2F2;
 825     border: 1px solid #BBBBBB;
 826     border-bottom: none;
 827 }
 828 .filemanager-toolbar{
 829     padding: 5px 8px;
 830     min-height: 22px;
 831     overflow: hidden;
 832 }
 833 .fp-pathbar {
 834     border-top: 1px solid #BBBBBB;
 835     padding: 5px 8px 1px;
 836     min-height: 20px;
 837 }
 838 .filemanager .fp-pathbar.empty {
 839     display: none;
 840 }
 841 .filepicker-filelist,
 842 .filemanager-container {
 843     background: #FFFFFF;
 844     clear: both;
 845     overflow: auto;
 846     border: 1px solid #BBBBBB;
 847     min-height: 140px;
 848     position: relative;
 849 }
 850 .filemanager .fp-content{
 851     overflow: auto;
 852     max-height: 472px;
 853     min-height: 157px;
 854 }
 855 .filemanager-container,
 856 .filepicker-filelist {
 857     overflow: hidden;
 858 }
 859 .fitem.disabled .filepicker-filelist,
 860 .fitem.disabled .filemanager-container {
 861     background-color: #EBEBE4;
 862 }
 863 .fitem.disabled .fp-btn-choose {
 864     .muted
 865 }
 866 .fitem.disabled .filepicker-filelist .filepicker-filename {
 867     display: none;
 868 }
 869 // Icon view (File Manager only)
 870 .fp-iconview .fp-reficons1 {
 871     position: absolute;
 872     height: 100%;
 873     width: 100%;
 874     top: 0;
 875     left: 0;
 876     z-index: 1000;
 877 }
 878 .fp-iconview .fp-reficons2 {
 879     position: absolute;
 880     height: 100%;
 881     width: 100%;
 882     top: 0;
 883     left: 0;
 884     z-index: 1001;
 885 }
 886 .fp-iconview .fp-file.fp-hasreferences .fp-reficons1 {
 887     background: url('[[pix:theme|fp/link]]') no-repeat;
 888     background-position: bottom right;
 889 }
 890 .fp-iconview .fp-file.fp-isreference .fp-reficons2 {
 891     background: url('[[pix:theme|fp/alias]]') no-repeat;
 892     background-position: bottom left;
 893 }
 894 .filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail img {
 895     display: none;
 896 }
 897 .filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail {
 898     background: url([[pix:s/dead]]) no-repeat;
 899     background-position: center center;
 900 }
 901 // Table view (File Manager only)
 902 .filemanager .yui3-datatable table {
 903     border: 0 solid #BBBBBB;
 904     width: 100%;
 905 }
 906 .filemanager .yui3-datatable-header {
 907     background: #FFFFFF!important;
 908     border-bottom: 1px solid #CCCCCC!important;
 909     border-left: 0 solid #FFFFFF!important;
 910     color: #555555!important;
 911 }
 912 .filemanager .yui3-datatable-odd .yui3-datatable-cell {
 913     background-color: #F6F6F6!important;
 914     border-left: 0 solid #F6F6F6;
 915 }
 916 .filemanager .yui3-datatable-even .yui3-datatable-cell {
 917     background-color: #FFFFFF!important;
 918     border-left: 0 solid #FFFFFF;
 919 }
 920 .filemanager .fp-filename-icon.fp-hasreferences .fp-reficons1{
 921     background: url('[[pix:theme|fp/link_sm]]') no-repeat 0 0;
 922     height: 100%;
 923     width: 100%;
 924     position: absolute;
 925     top: 8px;
 926     left: 17px;
 927     z-index: 1000;
 928 }
 929 .filemanager .fp-filename-icon.fp-isreference .fp-reficons2 {
 930     background: url('[[pix:theme|fp/alias_sm]]') no-repeat 0 0;
 931     height: 100%;
 932     width: 100%;
 933     position: absolute;
 934     top: 9px;
 935     left: -6px;
 936     z-index: 1001;
 937 }
 938 // Folder Context Menu (File Manager only)
 939 .filemanager .fp-contextmenu {
 940     display: none;
 941 }
 942 .filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu {
 943     display: block;
 944     position: absolute;
 945     right: 7px;
 946     bottom: 5px;
 947 }
 948 .filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu,
 949 .filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu {
 950     display: inline;
 951     position: absolute;
 952     left: 14px;
 953     margin-right: -20px;
 954     top: 6px;
 955 }
 956 .dir-rtl .filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu {
 957     left: 7px;
 958     right: inherit;
 959 }
 960 .dir-rtl .filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu,
 961 .dir-rtl .filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu {
 962     left: inherit;
 963     right: 16px;
 964     margin-right: 0;
 965 }
 966
 967 // Drag and drop support (filemanager and filepicker form elements)
 968 .filepicker-filelist .filepicker-container,
 969 .filemanager.fm-noitems .fm-empty-container {
 970     display: block;
 971     position: absolute;
 972     top: 10px;
 973     bottom: 10px;
 974     left: 10px;
 975     right: 10px;
 976     border: 2px dashed #BBBBBB;
 977     padding-top: 85px;
 978     text-align: center;
 979 }
 980 .filepicker-filelist .dndupload-target,
 981 .filemanager-container .dndupload-target {
 982     background: #FFFFFF;
 983     position: absolute;
 984     top: 10px;
 985     bottom: 10px;
 986     left: 10px;
 987     right: 10px;
 988     border: 2px dashed #fb7979;
 989     padding-top: 85px;
 990     text-align: center;
 991     .box-shadow(0px 0 0 10px #fff);
 992 }
 993 .filepicker-filelist.dndupload-over .dndupload-target,
 994 .filemanager-container.dndupload-over .dndupload-target {
 995     background: #FFFFFF;
 996     position: absolute;
 997     top: 10px;
 998     bottom: 10px;
 999     left: 10px;
1000     right: 10px;
1001     border: 2px dashed #6c8cd3;
1002     padding-top: 85px;
1003     text-align: center;
1004 }
1005 .dndupload-message {
1006     display: none;
1007 }
1008 .dndsupported .dndupload-message {
1009     display: inline;
1010 }
1011 .dnduploadnotsupported-message {
1012     display: none;
1013 }
1014 .dndnotsupported .dnduploadnotsupported-message {
1015     display: inline;
1016 }
1017 .dndupload-target {
1018     display: none;
1019 }
1020 .dndsupported .dndupload-ready .dndupload-target {
1021     display: block;
1022 }
1023 .dndupload-uploadinprogress {
1024     display: none;
1025     text-align: center;
1026 }
1027 .dndupload-uploading .dndupload-uploadinprogress {
1028     display: block;
1029 }
1030 .dndupload-arrow {
1031     background: url([[pix:theme|fp/dnd_arrow]]) center no-repeat;
1032     width: 100%;
1033     height: 80px;
1034     position: absolute;
1035     margin-left: -28px;
1036     top: 5px;
1037 }
1038 .fitem.disabled .filepicker-container,
1039 .fitem.disabled .fm-empty-container {
1040     display: none;
1041 }
1042 .dndupload-progressbars {
1043     padding: 10px;
1044     display: none;
1045 }
1046 .dndupload-inprogress .dndupload-progressbars {
1047     display: block;
1048 }
1049 .dndupload-inprogress .fp-content {
1050     display: none;
1051 }
1052 .filemanager.fm-noitems .dndupload-inprogress .fm-empty-container {
1053     display: none;
1054 }
1055 .filepicker-filelist.dndupload-inprogress .filepicker-container {
1056     display: none;
1057 }
1058 .filepicker-filelist.dndupload-inprogress a {
1059     display: none;
1060 }
1061 // Select Dialogue (File Manager only)
1062 .filemanager.fp-select .fp-select-loading {
1063     display: none;
1064 }
1065 .filemanager.fp-select.loading .fp-select-loading {
1066     display: block;
1067 }
1068 .filemanager.fp-select.loading form {
1069     display: none;
1070 }
1071 .filemanager.fp-select.fp-folder .fp-license,
1072 .filemanager.fp-select.fp-folder .fp-author,
1073 .filemanager.fp-select.fp-file .fp-file-unzip,
1074 .filemanager.fp-select.fp-folder .fp-file-unzip,
1075 .filemanager.fp-select.fp-file .fp-file-zip,
1076 .filemanager.fp-select.fp-zip .fp-file-zip {
1077     display: none;
1078 }
1079 .filemanager.fp-select .fp-file-setmain {
1080     display: none;
1081 }
1082 .filemanager.fp-select.fp-cansetmain .fp-file-setmain {
1083     display: inline-block;
1084     .ie7-inline-block();
1085 }
1086 .filemanager .fp-mainfile .fp-filename {
1087     font-weight: bold;
1088 }
1089 .filemanager.fp-select.fp-folder .fp-file-download {
1090     display: none;
1091 }
1092 // to be implemented
1093 .fm-operation {
1094     font-weight: bold;
1095 }
1096 .filemanager.fp-select .fp-original.fp-unknown,
1097 .filemanager.fp-select .fp-original .fp-originloading {
1098     display: none;
1099 }
1100 .filemanager.fp-select .fp-original.fp-loading .fp-originloading {
1101     display: inline;
1102 }
1103 .filemanager.fp-select .fp-reflist.fp-unknown,
1104 .filemanager.fp-select .fp-reflist .fp-reflistloading {
1105     display: none;
1106 }
1107 .filemanager.fp-select .fp-refcount {
1108     max-width: 265px;
1109 }
1110 .filemanager.fp-select .fp-reflist.fp-loading .fp-reflistloading {
1111     display: inline;
1112 }
1113 .filemanager.fp-select .fp-reflist .fp-value {
1114     background: #F9F9F9;
1115     border: 1px solid #BBBBBB;
1116     padding: 8px 7px;
1117     margin: 0;
1118     max-width: 265px;
1119     max-height: 75px;
1120     overflow: auto;
1121 }
1122 .filemanager.fp-select .fp-reflist .fp-value li {
1123     padding-bottom: 7px;
1124 }
1125 // Create folder dialogue (File Manager only)
1126 .filemanager.fp-mkdir-dlg {
1127     text-align: center;
1128 }
1129 .filemanager.fp-mkdir-dlg .fp-mkdir-dlg-text {
1130     text-align: left;
1131     margin: 20px;
1132 }
1133 .dir-rtl .filemanager .fp-mkdir-dlg p {
1134     text-align: right;
1135 }
1136 // Confirm dialogue for delete (File Manager only)
1137 .filemanager.fp-dlg {
1138     text-align: center;
1139 }
1140 .filemanager.fp-dlg .fp-dlg-text {
1141     padding: 0 10px;
1142     min-width: 200px;
1143     max-width: 340px;
1144     max-height: 300px;
1145     overflow: auto;
1146     line-height: 22px;
1147     margin: 40px 20px 20px;
1148     font-size: 12px;
1149 }
1150 // file picker search dialog
1151 .file-picker div.bd {
1152     text-align: left;
1153 }
1154 // RTL Overrides
1155 .dir-rtl .file-picker div.bd,
1156 .dir-rtl .file-picker .fp-pathbar,
1157 .dir-rtl .file-picker .fp-list,
1158 .dir-rtl #filemenu .yuimenuitemlabel,
1159 .dir-rtl .filemanager-container .yui3-skin-sam .yui3-datatable-header {
1160     text-align: right;
1161 }
1162 .dir-rtl .filepicker .yui-layout-unit-left {
1163     left: 500px;
1164 }
1165 .dir-rtl .filepicker .yui-layout-unit-center {
1166     left: 0;
1167 }