[Summary view] [Print] [Text view]

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