philo/contrib/gilbert/static/gilbert/murano/murano.css

   1 body{
   2         background:#666;
   3         color: #CCC;
   4         font-family: Helvetica, Arial, sans-serif;
   5         font-size: 12px;
   6 }
   7
   8 /* kill the borders */
   9 .x-panel-tl, .x-toolbar-layout-ct, .x-panel-tbar, .x-toolbar, .x-panel-header, .x-panel-body,
  10 .x-window-tl,
  11 .x-window-body,
  12 .x-window-mc,
  13 .x-progress-bar,
  14 .x-tab-scrolling-top,
  15 .x-tab-panel-body,
  16 .x-tab-scroller-left, .x-tab-scroller-right,
  17 .x-tab-strip-spacer,
  18 .x-tab-panel-footer,
  19 .x-tab-strip,
  20 .x-list-header-inner em,
  21 .x-grid3-cell,.x-grid3-header, .x-grid3-header-offset,
  22 .x-date-prevday,
  23 .x-date-nextday,
  24 .x-tab-panel-header{
  25         border: 0 !important;
  26 }
  27
  28 /* kill stuff */
  29 .x-shadow{
  30         display:none !important;
  31 }
  32 .x-tool, .x-date-mp .x-date-mp-ybtn .x-date-mp-prev, .x-date-mp .x-date-mp-ybtn .x-date-mp-next{
  33         background-image:url(images/tools.png);
  34 }
  35
  36
  37 /* @group Basic Window */
  38
  39 /* window header */
  40         .x-window-tr, .x-panel-tr{
  41                 padding-right: 16px;
  42                 background: transparent url(images/windowlight/tr.png) no-repeat right top;
  43         }
  44         .x-window-tc, .x-panel-tc{
  45                 background: transparent url(images/windowlight/tc.png) repeat-x right top;
  46                 overflow:visible;
  47         }
  48         .x-window-tl, .x-panel-tl{
  49                 padding-left: 16px;
  50                 background: transparent url(images/windowlight/tl.png) no-repeat left top;
  51                 font-family: Optima;
  52         }
  53         .x-window-header-text, .x-panel-header-text{
  54                 color: #FFF;
  55                 text-shadow: 1px 1px 0 #000;
  56                 font-size: 12px;
  57         }
  58         .x-window-header, .x-window-tc, .x-panel-tc{
  59         }
  60
  61         .x-panel-tc > .x-panel-header, .x-window-tc > .x-window-header{
  62                 margin: 0 -10px;
  63         }
  64         /* don't go off the edge when a window is maximized. */
  65         .x-window-maximized > .x-window-tl > .x-window-tr > .x-window-tc > .x-window-header{
  66                 margin: 0;
  67         }
  68         /* hide the rounded corners when the window is maximized. */
  69         .x-window-maximized > .x-window-tl, .x-window-maximized > .x-window-tl > .x-window-tr{
  70                 background: none;
  71         }
  72
  73         .x-window-mc, .x-panel-mc{
  74                 background: transparent url(images/windowlight/c.png) repeat right top;
  75                 padding: 0;
  76         }
  77         .x-window-ml, .x-panel-ml{
  78                 padding-left: 2px;
  79                 background: transparent url(images/windowlight/l.png) repeat-y left bottom;
  80         }
  81         .x-window-mr, .x-panel-mr{
  82                 padding-right: 2px;
  83                 background: transparent url(images/windowlight/r.png) repeat-y right bottom;
  84         }
  85         .x-window-mc{
  86                 border: 0;
  87                 padding: 0;
  88         }
  89         .x-window-header, .x-panel-header{
  90                 line-height: 16px;
  91         }
  92         .x-panel-header{
  93                 margin: 0 0;
  94         }
  95         /* Window Footer Stuff */
  96         .x-window-bl, .x-panel-bl{
  97                 padding-left: 16px;
  98                 min-height: 16px;
  99                 background: transparent url(images/windowdark/bl.png) no-repeat left bottom;
 100         }
 101         .x-window-br, .x-panel-br{
 102                 padding-right: 16px;
 103                 min-height: 16px;
 104                 background: transparent url(images/windowdark/br.png) no-repeat right bottom;
 105         }
 106         .x-window-bc, .x-panel-bc{
 107                 background: transparent url(images/windowdark/bc.png) repeat-x right bottom;
 108                 min-height: 16px;
 109         }
 110         .x-window-bc .x-window-footer, .x-panel-bc .x-panel-footer{
 111                 margin: 0 -16px;
 112         }
 113         /* If there is no footer, use the light version */
 114         .x-window-bl.x-window-no-footer, .x-panel-bl.x-panel-nofooter{
 115                 border-top: 0;
 116                 background-image: url(images/windowlight/bl.png);
 117         }
 118         .x-window-no-footer .x-window-br, .x-panel-nofooter .x-panel-br{
 119                 background-image: url(images/windowlight/br.png);
 120         }
 121         .x-window-no-footer .x-window-bc, .x-panel-nofooter .x-panel-bc{
 122                 background-image: url(images/windowlight/bc.png) ;
 123         }
 124
 125 /* @end */
 126
 127 /* @group Frame Panel inside a window */
 128
 129 .x-window .x-panel-tl,
 130 .x-window .x-panel-tr,
 131 .x-window .x-panel-ml,
 132 .x-window .x-panel-mr,
 133 .x-window .x-panel-bl,
 134 .x-window .x-panel-br{
 135         padding: 0;
 136         background: transparent;
 137 }
 138 .x-window .x-panel-bl, .x-window .x-panel-bc, .x-window .x-panel-br{
 139         background-position: top left;
 140 }
 141
 142 /* @end */
 143
 144
 145
 146 /* @group Basic Panel */
 147
 148 .x-panel-header{
 149                 background: transparent url(images/windowlight/tc.png) repeat-x left top;
 150                 font-family: Optima;
 151         }
 152         .x-panel-body{
 153                 background: transparent url(images/windowlight/c.png) top left repeat;
 154         }
 155         .x-panel-mc .x-panel-body{
 156                 background: none;
 157         }
 158
 159 /* @end */
 160
 161 /* @group Minimizers and Split-Panels */
 162
 163 .x-splitbar-proxy{
 164         background: transparent url(images/fills/30w.png) left top repeat;
 165 }
 166
 167 .x-layout-collapsed{
 168                 background: transparent url(images/windowlight/c.png) top left repeat;
 169                 border-color: #333;
 170         }
 171         .x-layout-collapsed-over{
 172                 background: transparent url(images/windowdark/c.png) top left repeat;
 173         }
 174
 175 .x-layout-mini-west, .x-layout-collapsed .x-layout-mini-east{
 176                 background: transparent url(images/mini/mini-left.png) top left no-repeat;
 177 }
 178 .x-layout-mini-east, .x-layout-collapsed .x-layout-mini-west{
 179                 background: transparent url(images/mini/mini-right.png) top left no-repeat;
 180 }
 181 .x-layout-mini-north, .x-layout-collapsed .x-layout-mini-south{
 182                 background: transparent url(images/mini/mini-bottom.png) top left no-repeat;
 183 }
 184 .x-layout-mini-south, .x-layout-collapsed .x-layout-mini-north{
 185                 background: transparent url(images/mini/mini-top.png) top left no-repeat;
 186 }
 187
 188 /* @end */
 189
 190
 191 /* @group Toolbars */
 192
 193 .x-toolbar{
 194         height: 24px;
 195         background: transparent url(images/tb.png) left top repeat-x;
 196 }
 197 .x-btn-text{
 198         color: #FFF;
 199 }
 200 .xtb-text{
 201         font-size: 11px;
 202 }
 203         /* text-edit */
 204         .x-edit-bold,
 205         .x-edit-italic,
 206         .x-edit-underline,
 207         .x-edit-increasefontsize,
 208         .x-edit-decreasefontsize,
 209         .x-edit-forecolor,
 210         .x-edit-backcolor,
 211         .x-edit-justifyleft,
 212         .x-edit-justifyright,
 213         .x-edit-justifycenter,
 214         .x-edit-createlink,
 215         .x-edit-insertorderedlist,
 216         .x-edit-insertunorderedlist,
 217         .x-edit-sourceedit{
 218                 background-image: url(images/tb-sprite.png) !important;
 219         }
 220
 221 /* @end */
 222
 223 /* @group Buttons */
 224
 225         .x-btn-ml, .x-btn-tl, .x-btn-bl, .x-btn-mr, .x-btn-tr, .x-btn-br{
 226                 width: 3px;
 227         }
 228                 .x-btn-tl, .x-btn-tr, .x-btn-bl, .x-btn-br{
 229                 height: 3px;
 230         }
 231         .x-btn-mc em{
 232                 margin: 0 2px;
 233         }
 234
 235         /* @group Normal */
 236                 .x-btn-tl,
 237                 .x-btn-tr,
 238                 .x-btn-bl,
 239                 .x-btn-br,
 240                 .x-btn-ml,
 241                 .x-btn-mr{
 242                         background: transparent url(images/btn/whole/Normal.png) top left no-repeat;
 243                 }
 244                 .x-btn-mc,
 245                 .x-btn-bc,
 246                 .x-btn-tc{
 247                         background: transparent url(images/btn/c/Normal.png) top left repeat-x;
 248                 }
 249         /* @end */
 250
 251         /* @group Over */
 252                 .x-btn-over .x-btn-tl,
 253                 .x-btn-over .x-btn-tr,
 254                 .x-btn-over .x-btn-bl,
 255                 .x-btn-over .x-btn-br,
 256                 .x-btn-over .x-btn-ml,
 257                 .x-btn-over .x-btn-mr{
 258                         background: transparent url(images/btn/whole/Over.png) top left no-repeat;
 259                 }
 260                 .x-btn-over .x-btn-mc,
 261                 .x-btn-over .x-btn-bc,
 262                 .x-btn-over .x-btn-tc{
 263                         background: transparent url(images/btn/c/Over.png) top left repeat-x;
 264                 }
 265         /* @end */
 266
 267         /* @group Click */
 268                 .x-btn-click .x-btn-tl,
 269                 .x-btn-click .x-btn-tr,
 270                 .x-btn-click .x-btn-bl,
 271                 .x-btn-click .x-btn-br,
 272                 .x-btn-click .x-btn-ml,
 273                 .x-btn-click .x-btn-mr{
 274                         background: transparent url(images/btn/whole/Pressed.png) top left no-repeat;
 275                 }
 276                 .x-btn-click .x-btn-mc,
 277                 .x-btn-click .x-btn-bc,
 278                 .x-btn-click .x-btn-tc{
 279                         background: transparent url(images/btn/c/Pressed.png) top left repeat-x;
 280                 }
 281         /* @end */
 282
 283         /* @group Active */
 284                 .x-btn-pressed .x-btn-tl, .x-btn-menu-active .x-btn-tl,
 285                 .x-btn-pressed .x-btn-tr, .x-btn-menu-active .x-btn-tr,
 286                 .x-btn-pressed .x-btn-bl, .x-btn-menu-active .x-btn-bl,
 287                 .x-btn-pressed .x-btn-br, .x-btn-menu-active .x-btn-br,
 288                 .x-btn-pressed .x-btn-ml, .x-btn-menu-active .x-btn-ml,
 289                 .x-btn-pressed .x-btn-mr, .x-btn-menu-active .x-btn-mr{
 290                         background: transparent url(images/btn/whole/Down.png) top left no-repeat;
 291                 }
 292                 .x-btn-pressed .x-btn-mc, .x-btn-menu-active .x-btn-mc,
 293                 .x-btn-pressed .x-btn-bc, .x-btn-menu-active .x-btn-bc,
 294                 .x-btn-pressed .x-btn-tc, .x-btn-menu-active .x-btn-tc{
 295                         background: transparent url(images/btn/c/Down.png) top left repeat-x;
 296                 }
 297         /* @end */
 298 .x-btn-mc{
 299         padding: 0 10px !important;
 300 }
 301
 302 .x-btn-tl{ background-position: left top !important; }
 303 .x-btn-tc{ background-position: center top !important; }
 304 .x-btn-tr{ background-position: right top !important; }
 305 .x-btn-ml{ background-position: left center !important; }
 306 .x-btn-mc{ background-position: center center !important; }
 307 .x-btn-mr{ background-position: right center !important; }
 308 .x-btn-bl{ background-position: left bottom !important; }
 309 .x-btn-bc{ background-position: center bottom !important; }
 310 .x-btn-br{ background-position: right bottom !important; }
 311
 312 .x-btn-arrow-bottom{
 313                 background: transparent url(images/btn/arrv.png) center bottom no-repeat !important;
 314 }
 315 .x-btn-split-bottom{
 316                 background: transparent url(images/btn/splitv.png) center bottom no-repeat !important;
 317                 padding-bottom:18px !important;
 318 }
 319 .x-btn-icon-small-right .x-btn-text{ padding-right: 20px !important; }
 320 .x-btn-icon-medium-right .x-btn-text{ padding-right: 28px !important; }
 321 .x-btn-icon-large-right .x-btn-text{ padding-right: 36px !important; }
 322
 323 /*.x-toolbar-cell table{
 324                 height:22px;
 325                 margin-top: 1px;
 326         }
 327         .x-btn-tr, .x-btn-tc, .x-btn-tl, .x-btn-br, .x-btn-bc, .x-btn-bl{
 328                 display: none;
 329         }
 330         .x-btn-ml, .x-btn-mc, .x-btn-mr{
 331                 height: 22px;
 332         }
 333         .x-btn-ml,
 334         .x-toolbar .x-btn-ml{
 335                 width: 6px;
 336                 background: transparent url(images/btn/l.png) left top no-repeat;
 337         }
 338         .x-btn-mc,
 339         .x-toolbar .x-btn-mc{
 340                 background: transparent url(images/btn/c.png) left top repeat;
 341         }
 342         .x-btn-mr,
 343         .x-toolbar .x-btn-mr{
 344                 width:6px;
 345                 background: transparent url(images/btn/r.png) right top no-repeat;
 346         }
 347         .x-btn-text{
 348                 text-shadow: -1px -1px 0 rgba(0,0,0,.6);
 349                 color: #EEE;
 350         }
 351         /* over state */
 352         .x-btn-over .x-btn-ml, .x-btn-over .x-btn-mc,
 353         .x-toolbar .x-btn-over .x-btn-ml, .x-toolbar .x-btn-over .x-btn-mc{
 354                 background-position: left -22px;
 355         }
 356         .x-btn-over .x-btn-mr,
 357         .x-toolbar .x-btn-over .x-btn-mr{
 358                 background-position: right -22px;
 359         }
 360         .x-btn-over .x-btn-text{
 361                 color: #FFF;
 362         }
 363         /* pressed state */
 364         .x-toolbar .x-btn-menu-active .x-btn-ml,
 365         .x-toolbar .x-btn-menu-active .x-btn-mc,
 366         .x-btn-pressed .x-btn-ml,
 367         .x-btn-pressed .x-btn-mc,
 368         .x-toolbar .x-btn-pressed .x-btn-ml,
 369         .x-toolbar .x-btn-pressed .x-btn-mc{
 370                 background-position: left -66px;
 371         }
 372         .x-toolbar .x-btn-menu-active .x-btn-mr,
 373         .x-toolbar .x-btn-pressed .x-btn-mr,
 374         .x-btn-pressed .x-btn-mr{
 375                 background-position: right -66px;
 376         }
 377
 378         .x-btn-split{
 379                 background: transparent url(images/btn/splith.png) right center no-repeat !important;
 380         }
 381         .x-btn-split button{
 382                 padding-right: 5px !important;
 383         }
 384         .x-btn-arrow{
 385                 background: transparent url(images/btn/menu.png) right center no-repeat !important;
 386                 padding-right:12px !important;
 387         }
 388         /* pressed and over state */
 389         /* Commented out because the selectors are so specific they're overriding the click state. What to do? I don't want to use !important... Figure out later. */
 390         /*.x-toolbar .x-btn-menu-active.x-btn-over .x-btn-ml,
 391         .x-toolbar .x-btn-menu-active.x-btn-over .x-btn-mc,
 392         .x-btn-pressed.x-btn-over .x-btn-ml,
 393         .x-btn-pressed.x-btn-over .x-btn-mc,
 394         .x-toolbar .x-btn-pressed.x-btn-over .x-btn-ml,
 395         .x-toolbar .x-btn-pressed.x-btn-over .x-btn-mc{
 396                 background-position: left -88px;
 397         }
 398         .x-toolbar .x-btn-menu-active.x-btn-over .x-btn-mr,
 399         .x-toolbar .x-btn-pressed.x-btn-over .x-btn-mr,
 400         .x-btn-pressed.x-btn-over .x-btn-mr{
 401                 background-position: right -88px;
 402         }*/
 403         /* click state */
 404         /*.x-btn-click .x-btn-ml, .x-btn-click .x-btn-mc,
 405         .x-toolbar .x-btn-click .x-btn-ml, .x-toolbar .x-btn-click .x-btn-mc{
 406                 background-position: left -44px;
 407         }
 408         .x-btn-click .x-btn-mr,
 409         .x-toolbar .x-btn-click .x-btn-mr{
 410                 background-position: right -44px;
 411         }
 412         .x-btn-click .x-btn-text, .x-btn-pressed .x-btn-text{
 413                 color: #FFF;
 414         }*/
 415
 416 /* @end */
 417
 418
 419 /* @group Tabs */
 420
 421 .x-tab-panel-header, .x-tab-panel-footer{
 422         padding: 0;
 423         background: transparent url(images/fills/80b.png)
 424 }
 425 .x-tab-scrolling-top{
 426                 background: transparent url(images/windowdark/c.png)
 427         }
 428
 429         /* default state */
 430
 431         .x-tab-strip .x-tab-right{
 432                 padding: 0 0 0 6px;
 433                 background-image: url(images/tab/l/Top.png) !important;
 434                 background-position:left top;
 435         }
 436         .x-tab-strip .x-tab-left{
 437                 padding: 0 6px 0 0 !important;
 438                 background-image: url(images/tab/r/Top.png) !important;
 439                 background-position:right top;
 440         }
 441         .x-tab-strip .x-tab-strip-inner{
 442                 background-image: url(images/tab/c/Top.png) !important;
 443                 background-position:center top;
 444         }
 445         .x-tab-strip-bottom .x-tab-right{ background-image: url(images/tab/l/Bottom.png) !important; }
 446         .x-tab-strip-bottom .x-tab-left{ background-image: url(images/tab/r/Bottom.png) !important; }
 447         .x-tab-strip-bottom .x-tab-strip-inner{ background-image: url(images/tab/c/Bottom.png) !important; }
 448
 449         /* hover state */
 450         .x-tab-strip-over .x-tab-right{ background-position: left -26px !important; }
 451         .x-tab-strip-over .x-tab-left{ background-position: right -26px !important;}
 452         .x-tab-strip-over  .x-tab-strip-inner{ background-position: left -26px !important; }
 453         .x-tab-right .x-tab-left .x-tab-strip-inner .x-tab-strip-text{
 454                 color: #CCC;
 455                 text-shadow: -1px -1px 0 rgba(0,0,0,.2);
 456         }
 457
 458         /* active state */
 459         .x-tab-strip-active .x-tab-right{ background-position: left -52px !important; }
 460         .x-tab-strip-active  .x-tab-left{ background-position: right -52px !important; }
 461         .x-tab-strip-active  .x-tab-strip-inner{ background-position: center -52px !important; }
 462         .x-tab-strip-active  .x-tab-right .x-tab-left .x-tab-strip-inner .x-tab-strip-text{
 463                 color: #222;
 464                 text-shadow:1px 1px 0 rgba(255,255,255,.25);
 465         }
 466
 467         /* spacer */
 468         .x-tab-strip-top{
 469                 border: 0 !important;
 470         }
 471         .x-tab-strip-spacer{
 472                 border: 0 !important;
 473                 background: transparent url(images/fills/30w.png) top left repeat;
 474                 height: 2px;
 475         }
 476
 477         /* scroller */
 478         .x-tab-scroller-left, .x-tab-scroller-right{
 479         }
 480         .x-tab-scroller-left{
 481                 background: transparent url(images/scroller/l.png) 0 0 no-repeat;
 482         }
 483         .x-tab-scroller-left-over, .x-tab-scroller-right-over{
 484                 background-position: left -22px !important;
 485         }
 486         .x-tab-scroller-left-disabled, .x-tab-scroller-right-disabled{
 487                 background-position: left 0 !important;
 488         }
 489         .x-tab-scroller-right{
 490                 background: transparent url(images/scroller/r.png) right 0 no-repeat;
 491         }
 492
 493         /* closable */
 494
 495         .x-tab-strip-closable .x-tab-strip-inner{
 496                 padding-right: 15px;
 497         }
 498         .x-tab-strip-close{
 499                 background: transparent url(images/tab/close.png) 0 0 no-repeat;
 500                 margin-right: 2px;
 501                 top: 5px !important;
 502                 right:4px !important;
 503         }
 504         .x-tab-strip-active .x-tab-strip-close{
 505                 background-position: 0 -11px;
 506         }
 507
 508 /* @end */
 509
 510 /* @group Forms and Form Fields */
 511
 512 .x-form .x-form-item{
 513         margin: 10px 0;
 514 }
 515 .x-form .x-form-item .x-form-item{
 516         margin: 0;
 517 }
 518
 519 .x-form-field{
 520         font-size: 11px !important;
 521 }
 522 .x-toolbar-cell .x-form-field{
 523         height: 22px !important;
 524 }
 525 .x-form-text, .x-form-textarea{
 526         background: #444 url(images/gradients/dark-inner-shadow.png) top left repeat-x;
 527         color: #FFF;
 528         text-shadow: 1px 1px 0 #000;
 529         border-top-color: #666;
 530         border-bottom-color: #222;
 531         border-left-color: transparent;
 532         border-right-color: transparent;
 533 }
 534 .x-form-empty-field{
 535         color: #999;
 536 }
 537 .x-form-invalid{
 538         border-top-color: #700;
 539         border-bottom-color: #200;
 540         border-left-color: transparent;
 541         border-right-color: transparent;
 542         background-color: #C00;
 543         color: #FAA;
 544 }
 545 .x-form-invalid-icon{
 546         background: transparent url(images/icons/exclamation.png) top left no-repeat;
 547 }
 548
 549 .x-form-textarea{
 550         background: #FFF !important;
 551         color: #000;
 552         text-shadow: none;
 553         border-color: #000 !important;
 554 }
 555 .x-form-field-wrap .x-form-trigger{
 556                 background-image:  url(images/trigger/blank.png);
 557                 border-bottom-color: #111;
 558 }
 559 .x-form-field-wrap .x-form-arrow-trigger{
 560                 background-image:  url(images/trigger/drop.png);
 561 }
 562 .x-form-field-wrap .x-form-date-trigger{
 563                 background-image:  url(images/trigger/date.png);
 564 }
 565 .x-form-field-wrap .x-form-search-trigger{
 566                 background-image:  url(images/trigger/search.png);
 567 }
 568 .x-form-field-wrap .x-form-clear-trigger{
 569                 background-image:  url(images/trigger/clear.png);
 570 }
 571 .x-html-editor-wrap{
 572         background: #FFF;
 573         border:1px solid #000;
 574         color: #000 !important;
 575 }
 576
 577 .x-fieldset{
 578         border:1px solid #888;
 579 }
 580
 581 /* @end */
 582
 583 /* icons */
 584 .ext-mb-question.ext-mb-icon{
 585                 background: transparent url(images/icons/balloon.png) left center no-repeat;
 586 }
 587 .x-window-dlg .ext-mb-error{
 588                 background: transparent url(images/icons/cross.png) left center no-repeat;
 589 }
 590 .x-window-dlg .ext-mb-warning{
 591                 background: transparent url(images/icons/exclamation32.png) left center no-repeat;
 592 }
 593 .x-window-dlg .ext-mb-info{
 594                 background: transparent url(images/icons/information.png) left center no-repeat;
 595 }
 596
 597
 598 /* @group Combo List */
 599
 600 .x-combo-list{
 601         border: 1px solid transparent;
 602         color: #444;
 603         background: #FFF;
 604         border-color: #777;
 605 }
 606 .x-combo-list-item{
 607         border-color: transparent;
 608 }
 609 .x-combo-list .x-combo-selected{
 610         background: #06C;
 611         color: #FFF;
 612         border:1px solid transparent !important;
 613 }
 614 .x-combo-list-inner{
 615         background: #FFF;
 616         border-bottom-color: #777 !important;
 617 }
 618
 619 /* @end */
 620
 621 /* @group Lists and Grids */
 622
 623 .x-grid3-header-offset, .x-grid3-header{
 624         padding: 0;
 625         margin-bottom: -1px;
 626 }
 627 .x-grid3-header-offset table{
 628         border-right: 2px groove #DDD;
 629 }
 630 .x-list-header, .x-grid3-header{
 631         background: #CCC url(images/gloss/light-gloss.png) left top repeat-x;
 632 }
 633 .x-pivotgrid .x-grid3-header-offset td, .x-list-header-inner div, .x-grid3-hd, .x-dd-drag-proxy .x-grid3-hd-inner, .sort-asc .x-grid3-hd-inner, .sort-desc .x-grid3-hd-inner{
 634         background: transparent url(images/listview/header.png) left top repeat-x;
 635         color: #222;
 636         text-shadow:1px 1px 0 rgba(255,255,255,.35);
 637 }
 638 .x-pivotgrid .x-grid3-header-offset td{
 639         border-bottom: 1px solid #888;
 640 }
 641 /* a hover state */
 642 .x-grid3 .x-grid3-hd-over .x-grid3-hd-inner{
 643         background: transparent url(images/listview/header.png) left -44px repeat-x;
 644 }
 645 .sort-asc, .sort-desc{
 646         border-top: 0 !important;
 647         border-bottom: 0 !important;
 648         border-right: 0 !important;
 649 }
 650 .x-list-header-inner .sort-asc, .x-list-header-inner .sort-desc{
 651         height: 15px;
 652 }
 653 .x-grid3 .sort-asc, .x-grid3 .sort-desc{
 654         background: transparent url(images/listview/header.png) 0 -22px repeat-x !important;
 655 }
 656 .x-grid3-hd-inner{
 657         color: #222;
 658 }
 659 .x-grid3 table{
 660         font-size: 12px;
 661 }
 662 .x-grid3-hd-btn{
 663         border-left:2px groove #DDD;
 664         border-right:2px groove #DDD;
 665         background: transparent url(images/listview/headerdrop.png) 0 0px;
 666 }
 667 .x-grid3-hd-btn:hover{
 668         background: transparent url(images/listview/headerdrop.png) 0 -44px !important;
 669 }
 670
 671 .x-grid3-sort-icon{
 672         margin-top: -5px !important;
 673         height: 5px;
 674 }
 675 .sort-asc .x-grid3-sort-icon{
 676         background: transparent url(images/listview/sort-asc.png);
 677 }
 678
 679 .sort-desc .x-grid3-sort-icon{
 680         background: transparent url(images/listview/sort-desc.png);
 681 }
 682
 683 .x-list-header .sort-asc{
 684         background: transparent url(images/listview/listview-sort-asc.png) center top !important;
 685 }
 686 .x-list-header .sort-desc{
 687         background: transparent url(images/listview/listview-sort-desc.png) center top !important;
 688 }
 689
 690 .x-cols-icon{
 691         background-image: url(images/listview/cols.png);
 692 }
 693 .xg-hmenu-sort-desc .x-menu-item-icon{
 694         background-image: url(images/listview/az.png);
 695 }
 696 .xg-hmenu-sort-asc .x-menu-item-icon{
 697         background-image: url(images/listview/za.png);
 698 }
 699
 700 .x-grid3-row-over, .x-list-over{
 701         background: transparent url(images/fills/30w.png) top left repeat !important;
 702 }
 703
 704 .x-grid3-row-alt{
 705         background: transparent url(images/fills/30b.png) top left repeat;
 706         border: 1px solid #222 !important;
 707         border-width: 1px 0 !important;
 708 }
 709
 710 .x-grid3-scroller{
 711         margin-top: 1px;
 712 }
 713
 714 /* @group Row Editor */
 715
 716 .x-row-editor .x-row-editor-body{
 717         background: #838383 url(images/gloss/gloss.png) repeat center center;
 718 }
 719 .x-row-editor .x-row-editor-header, .x-row-editor .x-row-editor-footer{
 720                 height: 0;
 721                 border: 1px solid #FFF;
 722                 border-width: 1px 0;
 723                 background: transparent !important;
 724 }
 725 .x-row-editor .x-row-editor-header{
 726         border-top-color: rgba(0,0,0,.15);
 727         border-bottom-color: #71b3e1;
 728 }
 729 .x-row-editor .x-row-editor-footer{
 730         border-bottom-color: rgba(0,0,0,.15);
 731         border-top-color: #065790 !important;
 732 }
 733
 734 .x-row-editor .x-row-editor-bwrap .x-plain,
 735 .x-row-editor .x-row-editor-bwrap .x-plain .x-plain-bwrap,
 736 .x-row-editor .x-row-editor-bwrap .x-plain .x-plain-bwrap .x-plain-body{
 737         background-image: url(images/grid/row-editor-btns.png);
 738 }
 739
 740
 741 /* @end */
 742
 743 /* @group Manip States */
 744
 745 .x-grid3-resize-proxy {
 746         background: #777;
 747 }
 748
 749 .x-grid3-resize-marker {
 750         background: #777;
 751 }
 752
 753 .col-move-top{
 754         background-image:url(images/grid/col-move-top.png);
 755 }
 756
 757 .col-move-bottom{
 758         background-image:url(images/grid/col-move-bottom.png);
 759 }
 760
 761 /* @end */
 762
 763 /* @group Selection States */
 764 .x-grid3-row, .x-list-wrap dl{
 765         border: 1px solid transparent;
 766         border-width: 1px 0;
 767         }
 768         .x-grid3-row .x-grid3-row-table, .x-list-wrap dl dt{
 769                 border: 1px solid transparent;
 770                 border-width: 1px 0;
 771         }
 772 .x-grid3-row-selected, .x-list-selected{
 773         border-color: #000 !important;
 774         }
 775         .x-grid3-row-selected .x-grid3-row-table, .x-list-selected dt{
 776                 background: transparent url(images/gloss/gloss.png) center center repeat;
 777                 border-top-color: #71b3e1 !important;
 778                 border-bottom-color: #065790 !important;
 779                 }
 780                 .x-grid3-row-selected .x-grid3-cell, .x-list-selected dt{
 781                                 color: #FFF;
 782                                 text-shadow: -1px -1px 0 rgba(0,0,0,.35);
 783                 }
 784
 785 /* @end */
 786
 787 /* @group Groups */
 788
 789 .x-grid3 .x-grid3-td-numberer{
 790         font-weight: bold;
 791         color: #AAA;
 792 }
 793 .x-grid3 .x-grid-group-hd{
 794         border-top: 1px solid #CCC !important;
 795         border-bottom: 1px solid #444 !important;
 796         background: #666 url(images/gradients/30white-to-trans.png) left top repeat-x;
 797         font-family: Helvetica, Arial, sans-serif;
 798         padding: 0;
 799         color: #FFF;
 800         text-shadow:-1px -1px rgba(0,0,0,.25)
 801
 802 }
 803 .x-grid-group-collapsed .x-grid-group-hd{
 804         border-bottom: 1px solid #222 !important;
 805         background: #333 url(images/gradients/30white-to-trans.png) left top repeat-x;
 806 }
 807
 808 /* @end */
 809
 810 /* @group Pivot Grid */
 811         .x-pivotgrid .x-grid3-row-table{
 812                 border-bottom: 1px solid transparent;
 813         }
 814         .x-grid3-header-title{
 815                 background: #666 url(images/gloss/gloss.png) left 50% repeat;
 816                 color: #FFF;
 817                 text-shadow:-1px -1px 0 rgba(0,0,0,.75);
 818                 border-top: 1px solid #999;
 819                 border-bottom: 1px solid #111;
 820                 font-size: 14px;
 821                 font-family: Optima, sans-serif;
 822                 line-height: 10px;
 823         }
 824         .x-grid3-row-headers table{
 825                 border-collapse:separate !important;
 826                 border-spacing:0;
 827         }
 828         .x-grid3-row-headers td{
 829                 height: 19px !important;
 830                 background: #FFF url(images/gloss/gloss.png) left 50% repeat;
 831                 border-top: 1px solid #777;
 832                 border-bottom: 1px solid #444;
 833                 border-left: 1px solid #777;
 834                 border-right: 1px solid #444;
 835                 color: #FFF;
 836                 text-shadow: -1px -1px 0 rgba(0,0,0,.35)
 837         }
 838
 839 /* @end */
 840
 841
 842
 843 /* @end */
 844
 845 /* @group Menus */
 846
 847 .x-menu{
 848         background: transparent url(images/fills/80b.png) top left repeat;
 849         border:1px solid #444;
 850         }
 851         .x-menu-item-text{
 852                 color: #DDD;
 853                 text-shadow: -1px -1x 0 #000;
 854         }
 855         .x-menu-item-active, .x-menu-item-active .x-menu-item{
 856                 border-color: #3398e1;
 857                 border-top-color: #71b3e1;
 858                 border-bottom-color: #065790;
 859                 }
 860                 .x-menu-item-active{
 861                         background: transparent url(images/gloss/gloss.png) left center repeat-x;
 862                         }
 863                         .x-menu-item-active .x-menu-item-text{
 864                                 color: #FFF;
 865                         }
 866         .x-menu-sep{
 867                 border-color: #444;
 868         }
 869         .x-menu-item-arrow{
 870                 background-image: url(images/menu/arrow.png);
 871         }
 872         .x-menu-check-item .x-menu-item-icon{
 873                 background: transparent url(images/form/unchecked.png) left center no-repeat;
 874         }
 875         .x-menu-item-checked .x-menu-check-item .x-menu-item-icon{
 876                 background: transparent url(images/form/checked.png) left center no-repeat;
 877         }
 878         .x-menu-group-item .x-menu-item-icon{
 879                 background: transparent url(images/form/unradioed.png) left center no-repeat;
 880         }
 881         .x-menu-item-checked .x-menu-group-item .x-menu-item-icon{
 882                 background: transparent url(images/form/radioed.png) left center no-repeat;
 883         }
 884
 885 /* @end */
 886
 887 /* @group Progress Bar */
 888
 889 .x-progress-wrap{
 890         color: #CCC;
 891         background: transparent url(images/progress.png) 0 -18px repeat-x;
 892         border: 1px solid #000;
 893 }
 894 .x-progress-inner{
 895         border: 1px solid #888;
 896 }
 897 .x-progress-bar{
 898         color: #FFF;
 899         background: #000 url(images/gloss/gloss.png) center center repeat-x;
 900         padding: 1px;
 901         height: 15px !important;
 902         border-bottom: 1px solid #000 !important;
 903 }
 904
 905 /* @end */
 906
 907 /* @group Date Picker */
 908
 909 .x-date-picker{
 910         border: 1px solid #000;
 911         background: transparent url(images/windowdark/c.png) repeat right top;
 912 }
 913 .x-date-picker a{
 914         color: #06C;
 915 }
 916 .x-date-mp{
 917         background: #222;
 918 }
 919 .x-date-mp a{
 920         color: #6AF;
 921         text-shadow:-1px -1px 0 rgba(0,0,0,.35)
 922 }
 923 .x-date-picker table{
 924         font-size:11px;
 925 }
 926 .x-date-active{
 927         border-color: transparent !important;
 928 }
 929 .x-date-selected{
 930         border: 1px solid #000 !important;
 931 }
 932 .x-date-active a{
 933         color: #FFF;
 934 }
 935 .x-date-picker .x-date-today .x-date-date{
 936         background: transparent url(images/fills/30w.png) repeat;
 937         border-color: transparent;
 938 }
 939 .x-date-picker .x-date-selected .x-date-date{
 940         background: transparent url(images/windowlight/tc.png) repeat-x right center;
 941         border-color: #3398e1;
 942         border-top-color: #71b3e1;
 943         border-bottom-color: #065790;
 944 }
 945 .x-date-picker .x-date-selected.x-date-today .x-date-date{
 946         background-color: #FFF;
 947 }
 948 .x-date-prevday a, .x-date-nextday a{
 949         color: #888;
 950 }
 951 .x-date-bottom{
 952         padding: 3px;
 953         border-top-color: #000;
 954         background: transparent url(images/tb.png) left top repeat-x;
 955 }
 956 .x-date-picker th{
 957         background: transparent url(images/tb.png) left top repeat-x;
 958         border-bottom-color: #000;
 959 }
 960 .x-date-middle, .x-date-left, .x-date-right{
 961         background: #000 url(images/gradients/30white-to-trans.png) left top repeat-x;
 962         border-top: 1px solid #888;
 963 }
 964 .x-date-left a{
 965         background: transparent url(images/btn/left.png) left top no-repeat;
 966         height: 15px;
 967         left: 15px;
 968 }
 969 .x-date-right a{
 970         background: transparent url(images/btn/right.png) left top no-repeat;
 971         height: 15px;
 972         left: 15px;
 973 }
 974 .x-date-picker .x-date-mp-sel a{
 975         background: transparent url(images/windowlight/tc.png) repeat-x right center;
 976         border-color: #3398e1;
 977         border-top-color: #71b3e1;
 978         border-bottom-color: #065790;
 979 }
 980 .x-date-picker .x-date-mp-sep{
 981         border-color: #444;
 982 }
 983 .x-date-mp-btns td{
 984         border-color: #444;
 985 }
 986 .x-date-mp-btns{
 987         background: #000;
 988 }
 989 .x-date-mp-btns button{
 990         background: transparent url(images/windowlight/tc.png) repeat-x right center;
 991         border-color: #888;
 992         border-top-color: #CCC;
 993         border-bottom-color: #555;
 994         color: #FFF;
 995         text-shadow:-1px -1px 0 #000;
 996 }
 997 .x-date-mp-btns button:hover{
 998         border-color: #3398e1;
 999         border-top-color: #71b3e1;
1000         border-bottom-color: #065790;
1001 }
1002
1003 /* @end */
1004
1005 /* @group Resizable Handles */
1006
1007 .x-resizable-handle{
1008 }
1009 .x-resizable-handle-north{ background-image: url(images/resizable/n.png); }
1010 .x-resizable-handle-south{ background-image: url(images/resizable/s.png); }
1011
1012 .x-resizable-handle-east{ background-image: url(images/resizable/e.png); }
1013 .x-resizable-handle-west{ background-image: url(images/resizable/w.png); }
1014 .x-resizable-handle-northwest{ background-image: url(images/resizable/nw.png); }
1015 .x-resizable-handle-northeast{ background-image: url(images/resizable/ne.png); }
1016 .x-resizable-handle-southwest{ background-image: url(images/resizable/sw.png); }
1017 .x-resizable-handle-southeast{ background-image: url(images/resizable/se.png); }
1018
1019 .x-resizable-pinned{
1020         background: #888;
1021 }
1022
1023 .x-window-handle, .x-window.x-resizable-pinned{
1024         background: transparent !important;
1025 }
1026
1027 /* @end */
1028
1029
1030 /* @group Node Tree */
1031
1032 .x-tree .x-panel-body{
1033         background: #000;
1034 }
1035 .x-tree-node-expanded .x-tree-node-icon{
1036         background-image:url(images/tree/folder-open.png);
1037 }
1038
1039 .x-tree-node-leaf .x-tree-node-icon{
1040     background-image:url(images/tree/leaf.png);
1041 }
1042
1043 .x-tree-node-collapsed .x-tree-node-icon{
1044     background-image:url(images/tree/folder.png);
1045 }
1046
1047 .x-tree-node-loading .x-tree-node-icon{
1048     background-image:url(images/tree/loading.gif) !important;
1049 }
1050
1051 .x-tree-node .x-tree-node-inline-icon {
1052     background-image: none;
1053 }
1054
1055 .x-tree-node-loading a span{
1056      font-style: italic;
1057      color:#FFF;
1058 }
1059
1060 .x-tree-lines .x-tree-elbow{
1061     background-image:url(images/tree/elbow.gif);
1062 }
1063
1064 .x-tree-lines .x-tree-elbow-plus{
1065     background-image:url(images/tree/elbow-plus.gif);
1066 }
1067
1068 .x-tree-lines .x-tree-elbow-minus{
1069     background-image:url(images/tree/elbow-minus.gif);
1070 }
1071
1072 .x-tree-lines .x-tree-elbow-end{
1073     background-image:url(images/tree/elbow-end.gif);
1074 }
1075
1076 .x-tree-lines .x-tree-elbow-end-plus{
1077     background-image:url(images/tree/elbow-end-plus.gif);
1078 }
1079
1080 .x-tree-lines .x-tree-elbow-end-minus{
1081     background-image:url(images/tree/elbow-end-minus.gif);
1082 }
1083
1084 .x-tree-lines .x-tree-elbow-line{
1085     background-image:url(images/tree/elbow-line.gif);
1086 }
1087
1088 .x-tree-no-lines .x-tree-elbow-plus{
1089     background-image:url(images/tree/elbow-plus-nl.gif);
1090 }
1091 .x-tree-no-lines .x-tree-elbow-minus{
1092     background-image:url(images/tree/elbow-minus-nl.gif);
1093 }
1094
1095 .x-tree-no-lines .x-tree-elbow-end-plus{
1096     background-image:url(images/tree/elbow-end-plus-nl.gif);
1097 }
1098
1099 .x-tree-no-lines .x-tree-elbow-end-minus{
1100     background-image:url(images/tree/elbow-end-minus-nl.gif);
1101 }
1102
1103 .x-tree-arrows .x-tree-elbow-plus{
1104     background-image:url(images/tree/arrows.gif);
1105 }
1106
1107 .x-tree-arrows .x-tree-elbow-minus{
1108     background-image:url(images/tree/arrows.gif);
1109 }
1110
1111 .x-tree-arrows .x-tree-elbow-end-plus{
1112     background-image:url(images/tree/arrows.gif);
1113 }
1114
1115 .x-tree-arrows .x-tree-elbow-end-minus{
1116     background-image:url(images/tree/arrows.gif);
1117 }
1118
1119 .x-tree-node{
1120     color:#FFF;
1121     font: normal 11px arial, tahoma, helvetica, sans-serif;
1122 }
1123
1124 .x-tree-node a, .x-dd-drag-ghost a{
1125     color:#FFF;
1126 }
1127
1128 .x-tree-node a span, .x-dd-drag-ghost a span{
1129     color:#FFF;
1130 }
1131
1132 .x-tree-node .x-tree-node-disabled a span{
1133     color:gray !important;
1134 }
1135
1136 .x-tree-node div.x-tree-drag-insert-below{
1137      border-bottom-color: #3fb5ff;
1138 }
1139
1140 .x-tree-node div.x-tree-drag-insert-above{
1141      border-top-color:#3fb5ff;
1142 }
1143
1144 .x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-below a{
1145      border-bottom-color:#3fb5ff;
1146 }
1147
1148 .x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-above a{
1149      border-top-color:#3fb5ff;
1150 }
1151
1152 .x-tree-node .x-tree-drag-append a span{
1153      background-color:#444;
1154      border-color:#666;
1155 }
1156
1157 .x-tree-node .x-tree-node-over {
1158     background-color: #444;
1159 }
1160
1161 .x-tree-node .x-tree-selected {
1162     background-color: #456;
1163 }
1164
1165 .x-tree-drop-ok-append .x-dd-drop-icon{
1166   background-image: url(images/tree/drop-add.png);
1167 }
1168
1169 .x-tree-drop-ok-above .x-dd-drop-icon{
1170   background-image: url(images/tree/drop-over.gif);
1171 }
1172
1173 .x-tree-drop-ok-below .x-dd-drop-icon{
1174   background-image: url(images/tree/drop-under.gif);
1175 }
1176
1177 .x-tree-drop-ok-between .x-dd-drop-icon{
1178   background-image: url(images/tree/drop-between.gif);
1179 }
1180
1181 /* @end */
1182
1183 /* @group Toolbar Icons */
1184
1185 .x-toolbar .x-btn-mc em.x-btn-split {
1186     background-image:url(../images/default/btn/s-arrow-noline.gif);
1187 }
1188
1189 .x-toolbar .x-btn-over .x-btn-mc em.x-btn-split, .x-toolbar .x-btn-click .x-btn-mc em.x-btn-split,
1190 .x-toolbar .x-btn-menu-active .x-btn-mc em.x-btn-split, .x-toolbar .x-btn-pressed .x-btn-mc em.x-btn-split
1191 {
1192     background-image:url(../images/default/btn/s-arrow-o.gif);
1193 }
1194
1195 .x-toolbar .x-btn-mc em.x-btn-split-bottom {
1196     background-image:url(../images/default/btn/s-arrow-b-noline.gif);
1197 }
1198
1199 .x-toolbar .x-btn-over .x-btn-mc em.x-btn-split-bottom, .x-toolbar .x-btn-click .x-btn-mc em.x-btn-split-bottom,
1200 .x-toolbar .x-btn-menu-active .x-btn-mc em.x-btn-split-bottom, .x-toolbar .x-btn-pressed .x-btn-mc em.x-btn-split-bottom
1201 {
1202     background-image:url(../images/default/btn/s-arrow-bo.gif);
1203 }
1204
1205 .x-toolbar .xtb-sep {
1206         width: 0;
1207         border-left: 1px solid #222;
1208         border-right: 1px solid #777;
1209 }
1210 .x-tbar-page-first{
1211     background-image: url(images/icons/first.png) !important;
1212 }
1213
1214 .x-tbar-loading{
1215     background-image: url(images/icons/refresh.png) !important;
1216 }
1217
1218 .x-tbar-page-last{
1219     background-image: url(images/icons/last.png) !important;
1220 }
1221 .x-tbar-page-next{
1222     background-image: url(images/icons/next.png) !important;
1223 }
1224
1225 .x-tbar-page-prev{
1226     background-image: url(images/icons/prev.png) !important;
1227 }
1228
1229 .x-item-disabled .x-tbar-loading{
1230     background-image: url(images/icons/d-refresh.png) !important;
1231 }
1232
1233 .x-item-disabled .x-tbar-page-first{
1234     background-image: url(images/icons/d-first.png) !important;
1235 }
1236
1237 .x-item-disabled .x-tbar-page-last{
1238     background-image: url(images/icons/d-last.png) !important;
1239 }
1240
1241 .x-item-disabled .x-tbar-page-next{
1242     background-image: url(images/icons/d-next.png) !important;
1243 }
1244
1245 .x-item-disabled .x-tbar-page-prev{
1246     background-image: url(images/icons/d-prev.png) !important;
1247 }
1248
1249 .x-paging-info {
1250     color:#444;
1251 }
1252
1253 .x-toolbar-more-icon {
1254     background-image: url(../images/default/toolbar/more.gif) !important;
1255 }
1256
1257 /* @end */
1258
1259 /* @group Tool Tips */
1260
1261 .x-tip{
1262         color: #FFE;
1263         text-shadow: -1px -1px 0 rgba(0,0,0,.35);
1264 }
1265 .x-tip .x-tip-tl{
1266         padding-left: 5px;
1267         background:transparent url(images/tt/tl.png) top left no-repeat;
1268 }
1269 .x-tip .x-tip-tr{
1270         padding-right: 5px;
1271         background:transparent url(images/tt/tr.png) top right no-repeat;
1272 }
1273 .x-tip .x-tip-tc{
1274         font-family: Optima, sans-serif;
1275         text-transform: uppercase;
1276         letter-spacing: .1em;
1277         font-size: 10px;
1278         padding-bottom: 3px;
1279         padding-top: 5px;
1280         background:transparent url(images/tt/tc.png) top left repeat-x;
1281 }
1282 .x-tip .x-tip-ml{
1283         padding-left: 5px;
1284         background:transparent url(images/tt/ml.png) top left repeat-y;
1285 }
1286 .x-tip .x-tip-mr{
1287         padding-right: 5px;
1288         background:transparent url(images/tt/mr.png) top right repeat-y;
1289 }
1290 .x-tip .x-tip-mc{
1291         background:transparent url(images/tt/c.png) top right repeat;
1292 }
1293 .x-tip .x-tip-bl{
1294         padding-left: 5px;
1295         background:transparent url(images/tt/bl.png) bottom left no-repeat;
1296 }
1297 .x-tip .x-tip-br{
1298         padding-right: 5px;
1299         background:transparent url(images/tt/br.png) bottom right no-repeat;
1300 }
1301 .x-tip .x-tip-bc{
1302         height: 5px;
1303         background:transparent url(images/tt/bc.png) bottom left repeat-x;
1304 }
1305
1306         /* @group Invalid Tips */
1307
1308 .x-form-invalid-tip{
1309                 color: #FCC;
1310         }
1311         .x-form-invalid-tip .x-tip-body{
1312                 background:transparent url(images/icons/exclamation.png) top left no-repeat;
1313         }
1314         .x-form-invalid-tip .x-tip-tl{
1315                 padding-left: 5px;
1316                 background:transparent url(images/tt/i-tl.png) top left no-repeat;
1317         }
1318         .x-form-invalid-tip .x-tip-tr{
1319                 padding-right: 5px;
1320                 background:transparent url(images/tt/i-tr.png) top right no-repeat;
1321         }
1322         .x-form-invalid-tip .x-tip-tc{
1323                 font-family: Optima, sans-serif;
1324                 text-transform: uppercase;
1325                 letter-spacing: .1em;
1326                 font-size: 10px;
1327                 padding-bottom: 3px;
1328                 padding-top: 5px;
1329                 background:transparent url(images/tt/i-tc.png) top left repeat-x;
1330         }
1331         .x-form-invalid-tip .x-tip-ml{
1332                 padding-left: 5px;
1333                 background:transparent url(images/tt/i-ml.png) top left repeat-y;
1334         }
1335         .x-form-invalid-tip .x-tip-mr{
1336                 padding-right: 5px;
1337                 background:transparent url(images/tt/i-mr.png) top right repeat-y;
1338         }
1339         .x-form-invalid-tip .x-tip-mc{
1340                 background:transparent url(images/tt/i-c.png) top right repeat;
1341         }
1342         .x-form-invalid-tip .x-tip-bl{
1343                 padding-left: 5px;
1344                 background:transparent url(images/tt/i-bl.png) bottom left no-repeat;
1345         }
1346         .x-form-invalid-tip .x-tip-br{
1347                 padding-right: 5px;
1348                 background:transparent url(images/tt/i-br.png) bottom right no-repeat;
1349         }
1350         .x-form-invalid-tip .x-tip-bc{
1351                 height: 5px;
1352                 background:transparent url(images/tt/i-bc.png) bottom left repeat-x;
1353         }
1354
1355         /* @end */
1356
1357 /* @end */
1358
1359 /* @group Slider */
1360
1361 .x-slider-horz .x-slider-thumb{
1362         background-image: url(images/slider/thumbh.png) !important;
1363 }
1364
1365 .x-slider-vert .x-slider-thumb{
1366         background-image: url(images/slider/thumbv.png) !important;
1367 }
1368 .x-slider-horz, .x-slider-horz .x-slider-end, .x-slider-horz .x-slider-inner{
1369         background-image: url(images/slider/h.png) !important;
1370 }
1371 .x-slider-vert, .x-slider-vert .x-slider-end, .x-slider-vert .x-slider-inner{
1372         background-image: url(images/slider/v.png) !important;
1373 }
1374
1375 /* @end */
1376
1377 /* @group Masked Panel */
1378
1379 .ext-el-mask{
1380         background: #999;
1381 }
1382 .ext-el-mask-msg{
1383         background: transparent url(images/gloss/gloss.png) center center repeat;
1384         border-bottom-color: #222;
1385         border-top-color: #999;
1386         border-left-color: #444;
1387         border-right-color: #444;
1388         border-radius:4px;
1389 }
1390 .ext-el-mask-msg div{
1391         background: #000;
1392         border: 1px solid #222;
1393         border-top-color: #222;
1394         border-bottom-color: #999;
1395         border-left-color: #444;
1396         border-right-color: #444;
1397         border-radius:3px;
1398 }
1399 .x-mask-loading div{
1400         background:#000 url(images/load.gif) 4px 4px no-repeat;
1401 }
1402
1403 /* @end */
1404
1405 /* @group Color Palette */
1406
1407 .x-color-palette{
1408         background: #666 url(images/gradients/30white-to-trans.png) 0 0 repeat-x;
1409         margin: -3px !important;
1410 }
1411 .x-color-palette a{
1412         color: #000;
1413         border-color: transparent;
1414 }
1415 .x-color-palette .x-color-palette-sel em, .x-color-palette a:hover em{
1416         border-top-color: #222;
1417         border-left-color: #444;
1418         border-right-color: #444;
1419         border-bottom-color: #666;
1420 }
1421 .x-color-palette .x-color-palette-sel, .x-color-palette a:hover{
1422         border-top-color: #666 !important;
1423         border-left-color: #444 !important;
1424         border-right-color: #444 !important;
1425         border-bottom-color: #222 !important;
1426         background: #000 url(images/gloss/gloss.png) center center repeat-x;
1427 }
1428  .x-color-palette a:hover{
1429         border-top-color: #71b3e1 !important;
1430         border-left-color: #3398e1 !important;
1431         border-right-color: #3398e1 !important;
1432         border-bottom-color: #065790 !important;
1433         background-color: #065790;
1434 }
1435
1436 /* @end */
1437
1438 /* @group Drag Proxy */
1439
1440 .x-dd-drag-proxy{
1441         border: 1px solid #000;
1442         background: #000;
1443         border-radius:3px;
1444 }
1445 .x-dd-drag-ghost{
1446         border-radius:2px;
1447         background: #000 url(images/gloss/gloss.png) center center repeat-x;
1448         border-top: 1px solid #AAA;
1449         border-bottom: 1px solid #222;
1450         border-left: 1px solid #444;
1451         border-right: 1px solid #444;
1452 }
1453 .x-dd-drop-ok .x-dd-drop-icon{
1454         background-image: url(images/icons/yes.png);
1455 }
1456 .x-dd-drop-nodrop .x-dd-drop-icon{
1457         background-image: url(images/icons/no.png);
1458 }
1459
1460 /* @end */
1461
1462 /* @group Accordion */
1463
1464 .x-accordion-hd{
1465         border-top: 1px solid #CCC !important;
1466         border-bottom: 1px solid #444 !important;
1467         background: #666 url(images/gradients/30white-to-trans.png) left top repeat-x;
1468         font-family: Helvetica, Arial, sans-serif;
1469         font-size: .9em;
1470 }
1471 .x-panel-collapsed .x-accordion-hd{
1472         border-bottom: 1px solid #222 !important;
1473         background: #333 url(images/gradients/30white-to-trans.png) left top repeat-x;
1474 }
1475 .x-accordion-hd .x-panel-header-text{
1476         text-shadow: -1px -1px 0 rgba(0,0,0,.35);
1477 }
1478
1479 /* @end */
1480
1481 /* @group Group Summary */
1482
1483 .x-grid3-summary-row{
1484         background: transparent url(images/fills/80b.png) left top repeat;
1485 }
1486
1487 /* @end */
1488