contrib/gilbert/media/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) right center no-repeat !important;
 386         }
 387         /* pressed and over state */
 388         /* 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. */
 389         /*.x-toolbar .x-btn-menu-active.x-btn-over .x-btn-ml,
 390         .x-toolbar .x-btn-menu-active.x-btn-over .x-btn-mc,
 391         .x-btn-pressed.x-btn-over .x-btn-ml,
 392         .x-btn-pressed.x-btn-over .x-btn-mc,
 393         .x-toolbar .x-btn-pressed.x-btn-over .x-btn-ml,
 394         .x-toolbar .x-btn-pressed.x-btn-over .x-btn-mc{
 395                 background-position: left -88px;
 396         }
 397         .x-toolbar .x-btn-menu-active.x-btn-over .x-btn-mr,
 398         .x-toolbar .x-btn-pressed.x-btn-over .x-btn-mr,
 399         .x-btn-pressed.x-btn-over .x-btn-mr{
 400                 background-position: right -88px;
 401         }*/
 402         /* click state */
 403         /*.x-btn-click .x-btn-ml, .x-btn-click .x-btn-mc,
 404         .x-toolbar .x-btn-click .x-btn-ml, .x-toolbar .x-btn-click .x-btn-mc{
 405                 background-position: left -44px;
 406         }
 407         .x-btn-click .x-btn-mr,
 408         .x-toolbar .x-btn-click .x-btn-mr{
 409                 background-position: right -44px;
 410         }
 411         .x-btn-click .x-btn-text, .x-btn-pressed .x-btn-text{
 412                 color: #FFF;
 413         }*/
 414
 415 /* @end */
 416
 417
 418 /* @group Tabs */
 419
 420 .x-tab-panel-header, .x-tab-panel-footer{
 421         padding: 0;
 422         background: transparent url(images/fills/80b.png)
 423 }
 424 .x-tab-scrolling-top{
 425                 background: transparent url(images/windowdark/c.png)
 426         }
 427
 428         /* default state */
 429
 430         .x-tab-strip .x-tab-right{
 431                 padding: 0 0 0 6px;
 432                 background-image: url(images/tab/l/Top.png) !important;
 433                 background-position:left top;
 434         }
 435         .x-tab-strip .x-tab-left{
 436                 padding: 0 6px 0 0 !important;
 437                 background-image: url(images/tab/r/Top.png) !important;
 438                 background-position:right top;
 439         }
 440         .x-tab-strip .x-tab-strip-inner{
 441                 background-image: url(images/tab/c/Top.png) !important;
 442                 background-position:center top;
 443         }
 444         .x-tab-strip-bottom .x-tab-right{ background-image: url(images/tab/l/Bottom.png) !important; }
 445         .x-tab-strip-bottom .x-tab-left{ background-image: url(images/tab/r/Bottom.png) !important; }
 446         .x-tab-strip-bottom .x-tab-strip-inner{ background-image: url(images/tab/c/Bottom.png) !important; }
 447
 448         /* hover state */
 449         .x-tab-strip-over .x-tab-right{ background-position: left -26px !important; }
 450         .x-tab-strip-over .x-tab-left{ background-position: right -26px !important;}
 451         .x-tab-strip-over  .x-tab-strip-inner{ background-position: left -26px !important; }
 452         .x-tab-right .x-tab-left .x-tab-strip-inner .x-tab-strip-text{
 453                 color: #CCC;
 454                 text-shadow: -1px -1px 0 rgba(0,0,0,.2);
 455         }
 456
 457         /* active state */
 458         .x-tab-strip-active .x-tab-right{ background-position: left -52px !important; }
 459         .x-tab-strip-active  .x-tab-left{ background-position: right -52px !important; }
 460         .x-tab-strip-active  .x-tab-strip-inner{ background-position: center -52px !important; }
 461         .x-tab-strip-active  .x-tab-right .x-tab-left .x-tab-strip-inner .x-tab-strip-text{
 462                 color: #222;
 463                 text-shadow:1px 1px 0 rgba(255,255,255,.25);
 464         }
 465
 466         /* spacer */
 467         .x-tab-strip-top{
 468                 border: 0 !important;
 469         }
 470         .x-tab-strip-spacer{
 471                 border: 0 !important;
 472                 background: transparent url(images/fills/30w.png) top left repeat;
 473                 height: 2px;
 474         }
 475
 476         /* scroller */
 477         .x-tab-scroller-left, .x-tab-scroller-right{
 478         }
 479         .x-tab-scroller-left{
 480                 background: transparent url(images/scroller/l.png) 0 0 no-repeat;
 481         }
 482         .x-tab-scroller-left-over, .x-tab-scroller-right-over{
 483                 background-position: left -22px !important;
 484         }
 485         .x-tab-scroller-left-disabled, .x-tab-scroller-right-disabled{
 486                 background-position: left 0 !important;
 487         }
 488         .x-tab-scroller-right{
 489                 background: transparent url(images/scroller/r.png) right 0 no-repeat;
 490         }
 491
 492         /* closable */
 493
 494         .x-tab-strip-closable .x-tab-strip-inner{
 495                 padding-right: 15px;
 496         }
 497         .x-tab-strip-close{
 498                 background: transparent url(images/tab/close.png) 0 0 no-repeat;
 499                 margin-right: 2px;
 500                 top: 5px !important;
 501                 right:4px !important;
 502         }
 503         .x-tab-strip-active .x-tab-strip-close{
 504                 background-position: 0 -11px;
 505         }
 506
 507 /* @end */
 508
 509 /* @group Forms and Form Fields */
 510
 511 .x-form .x-form-item{
 512         margin: 10px 0;
 513 }
 514 .x-form .x-form-item .x-form-item{
 515         margin: 0;
 516 }
 517
 518 .x-form-field{
 519         font-size: 11px !important;
 520 }
 521 .x-toolbar-cell .x-form-field{
 522         height: 22px !important;
 523 }
 524 .x-form-text, .x-form-textarea{
 525         background: #444 url(images/gradients/dark-inner-shadow.png) top left repeat-x;
 526         color: #FFF;
 527         text-shadow: 1px 1px 0 #000;
 528         border-top-color: #666;
 529         border-bottom-color: #222;
 530         border-left-color: transparent;
 531         border-right-color: transparent;
 532 }
 533 .x-form-empty-field{
 534         color: #999;
 535 }
 536 .x-form-invalid{
 537         border-top-color: #700;
 538         border-bottom-color: #200;
 539         border-left-color: transparent;
 540         border-right-color: transparent;
 541         background-color: #C00;
 542         color: #FAA;
 543 }
 544 .x-form-invalid-icon{
 545         background: transparent url(images/icons/exclamation.png) top left no-repeat;
 546 }
 547
 548 .x-form-textarea{
 549         background: #FFF !important;
 550         color: #000;
 551         text-shadow: none;
 552         border-color: #000 !important;
 553 }
 554 .x-form-field-wrap .x-form-trigger{
 555                 background-image:  url(images/trigger/blank.png);
 556                 border-bottom-color: #111;
 557 }
 558 .x-form-field-wrap .x-form-arrow-trigger{
 559                 background-image:  url(images/trigger/drop.png);
 560 }
 561 .x-form-field-wrap .x-form-date-trigger{
 562                 background-image:  url(images/trigger/date.png);
 563 }
 564 .x-form-field-wrap .x-form-search-trigger{
 565                 background-image:  url(images/trigger/search.png);
 566 }
 567 .x-form-field-wrap .x-form-clear-trigger{
 568                 background-image:  url(images/trigger/clear.png);
 569 }
 570 .x-html-editor-wrap{
 571         background: #FFF;
 572         border:1px solid #000;
 573         color: #000 !important;
 574 }
 575
 576 .x-fieldset{
 577         border:1px solid #888;
 578 }
 579
 580 /* @end */
 581
 582 /* icons */
 583 .ext-mb-question.ext-mb-icon{
 584                 background: transparent url(images/icons/balloon.png) left center no-repeat;
 585 }
 586 .x-window-dlg .ext-mb-error{
 587                 background: transparent url(images/icons/cross.png) left center no-repeat;
 588 }
 589 .x-window-dlg .ext-mb-warning{
 590                 background: transparent url(images/icons/exclamation32.png) left center no-repeat;
 591 }
 592 .x-window-dlg .ext-mb-info{
 593                 background: transparent url(images/icons/information.png) left center no-repeat;
 594 }
 595
 596
 597 /* @group Combo List */
 598
 599 .x-combo-list{
 600         border: 1px solid transparent;
 601         color: #444;
 602         background: #FFF;
 603         border-color: #777;
 604 }
 605 .x-combo-list-item{
 606         border-color: transparent;
 607 }
 608 .x-combo-list .x-combo-selected{
 609         background: #06C;
 610         color: #FFF;
 611         border:1px solid transparent !important;
 612 }
 613 .x-combo-list-inner{
 614         background: #FFF;
 615         border-bottom-color: #777 !important;
 616 }
 617
 618 /* @end */
 619
 620 /* @group Lists and Grids */
 621
 622 .x-grid3-header-offset, .x-grid3-header{
 623         padding: 0;
 624         margin-bottom: -1px;
 625 }
 626 .x-grid3-header-offset table{
 627         border-right: 2px groove #DDD;
 628 }
 629 .x-list-header, .x-grid3-header{
 630         background: #CCC url(images/gloss/light-gloss.png) left top repeat-x;
 631 }
 632 .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{
 633         background: transparent url(images/listview/header.png) left top repeat-x;
 634         color: #222;
 635         text-shadow:1px 1px 0 rgba(255,255,255,.35);
 636 }
 637 .x-pivotgrid .x-grid3-header-offset td{
 638         border-bottom: 1px solid #888;
 639 }
 640 /* a hover state */
 641 .x-grid3 .x-grid3-hd-over .x-grid3-hd-inner{
 642         background: transparent url(images/listview/header.png) left -44px repeat-x;
 643 }
 644 .sort-asc, .sort-desc{
 645         border-top: 0 !important;
 646         border-bottom: 0 !important;
 647         border-right: 0 !important;
 648 }
 649 .x-list-header-inner .sort-asc, .x-list-header-inner .sort-desc{
 650         height: 15px;
 651 }
 652 .x-grid3 .sort-asc, .x-grid3 .sort-desc{
 653         background: transparent url(images/listview/header.png) 0 -22px repeat-x !important;
 654 }
 655 .x-grid3-hd-inner{
 656         color: #222;
 657 }
 658 .x-grid3 table{
 659         font-size: 12px;
 660 }
 661 .x-grid3-hd-btn{
 662         border-left:2px groove #DDD;
 663         border-right:2px groove #DDD;
 664         background: transparent url(images/listview/headerdrop.png) 0 0px;
 665 }
 666 .x-grid3-hd-btn:hover{
 667         background: transparent url(images/listview/headerdrop.png) 0 -44px !important;
 668 }
 669
 670 .x-grid3-sort-icon{
 671         margin-top: -5px !important;
 672         height: 5px;
 673 }
 674 .sort-asc .x-grid3-sort-icon{
 675         background: transparent url(images/listview/sort-asc.png);
 676 }
 677
 678 .sort-desc .x-grid3-sort-icon{
 679         background: transparent url(images/listview/sort-desc.png);
 680 }
 681
 682 .x-list-header .sort-asc{
 683         background: transparent url(images/listview/listview-sort-asc.png) center top !important;
 684 }
 685 .x-list-header .sort-desc{
 686         background: transparent url(images/listview/listview-sort-desc.png) center top !important;
 687 }
 688
 689 .x-cols-icon{
 690         background-image: url(images/listview/cols.png);
 691 }
 692 .xg-hmenu-sort-desc .x-menu-item-icon{
 693         background-image: url(images/listview/az.png);
 694 }
 695 .xg-hmenu-sort-asc .x-menu-item-icon{
 696         background-image: url(images/listview/za.png);
 697 }
 698
 699 .x-grid3-row-over, .x-list-over{
 700         background: transparent url(images/fills/30w.png) top left repeat !important;
 701 }
 702
 703 .x-grid3-row-alt{
 704         background: transparent url(images/fills/30b.png) top left repeat;
 705         border: 1px solid #222 !important;
 706         border-width: 1px 0 !important;
 707 }
 708
 709 .x-grid3-scroller{
 710         margin-top: 1px;
 711 }
 712
 713 /* @group Row Editor */
 714
 715 .x-row-editor .x-row-editor-body{
 716         background: #838383 url(images/gloss/gloss.png) repeat center center;
 717 }
 718 .x-row-editor .x-row-editor-header, .x-row-editor .x-row-editor-footer{
 719                 height: 0;
 720                 border: 1px solid #FFF;
 721                 border-width: 1px 0;
 722                 background: transparent !important;
 723 }
 724 .x-row-editor .x-row-editor-header{
 725         border-top-color: rgba(0,0,0,.15);
 726         border-bottom-color: #71b3e1;
 727 }
 728 .x-row-editor .x-row-editor-footer{
 729         border-bottom-color: rgba(0,0,0,.15);
 730         border-top-color: #065790 !important;
 731 }
 732
 733 .x-row-editor .x-row-editor-bwrap .x-plain,
 734 .x-row-editor .x-row-editor-bwrap .x-plain .x-plain-bwrap,
 735 .x-row-editor .x-row-editor-bwrap .x-plain .x-plain-bwrap .x-plain-body{
 736         background-image: url(images/grid/row-editor-btns.png);
 737 }
 738
 739
 740 /* @end */
 741
 742 /* @group Manip States */
 743
 744 .x-grid3-resize-proxy {
 745         background: #777;
 746 }
 747
 748 .x-grid3-resize-marker {
 749         background: #777;
 750 }
 751
 752 .col-move-top{
 753         background-image:url(images/grid/col-move-top.png);
 754 }
 755
 756 .col-move-bottom{
 757         background-image:url(images/grid/col-move-bottom.png);
 758 }
 759
 760 /* @end */
 761
 762 /* @group Selection States */
 763 .x-grid3-row, .x-list-wrap dl{
 764         border: 1px solid transparent;
 765         border-width: 1px 0;
 766         }
 767         .x-grid3-row .x-grid3-row-table, .x-list-wrap dl dt{
 768                 border: 1px solid transparent;
 769                 border-width: 1px 0;
 770         }
 771 .x-grid3-row-selected, .x-list-selected{
 772         border-color: #000 !important;
 773         }
 774         .x-grid3-row-selected .x-grid3-row-table, .x-list-selected dt{
 775                 background: transparent url(images/gloss/gloss.png) center center repeat;
 776                 border-top-color: #71b3e1 !important;
 777                 border-bottom-color: #065790 !important;
 778                 }
 779                 .x-grid3-row-selected .x-grid3-cell, .x-list-selected dt{
 780                                 color: #FFF;
 781                                 text-shadow: -1px -1px 0 rgba(0,0,0,.35);
 782                 }
 783
 784 /* @end */
 785
 786 /* @group Groups */
 787
 788 .x-grid3 .x-grid3-td-numberer{
 789         font-weight: bold;
 790         color: #AAA;
 791 }
 792 .x-grid3 .x-grid-group-hd{
 793         border-top: 1px solid #CCC !important;
 794         border-bottom: 1px solid #444 !important;
 795         background: #666 url(images/gradients/30white-to-trans.png) left top repeat-x;
 796         font-family: Helvetica, Arial, sans-serif;
 797         padding: 0;
 798         color: #FFF;
 799         text-shadow:-1px -1px rgba(0,0,0,.25)
 800
 801 }
 802 .x-grid-group-collapsed .x-grid-group-hd{
 803         border-bottom: 1px solid #222 !important;
 804         background: #333 url(images/gradients/30white-to-trans.png) left top repeat-x;
 805 }
 806
 807 /* @end */
 808
 809 /* @group Pivot Grid */
 810         .x-pivotgrid .x-grid3-row-table{
 811                 border-bottom: 1px solid transparent;
 812         }
 813         .x-grid3-header-title{
 814                 background: #666 url(images/gloss/gloss.png) left 50% repeat;
 815                 color: #FFF;
 816                 text-shadow:-1px -1px 0 rgba(0,0,0,.75);
 817                 border-top: 1px solid #999;
 818                 border-bottom: 1px solid #111;
 819                 font-size: 14px;
 820                 font-family: Optima, sans-serif;
 821                 line-height: 10px;
 822         }
 823         .x-grid3-row-headers table{
 824                 border-collapse:separate !important;
 825                 border-spacing:0;
 826         }
 827         .x-grid3-row-headers td{
 828                 height: 19px !important;
 829                 background: #FFF url(images/gloss/gloss.png) left 50% repeat;
 830                 border-top: 1px solid #777;
 831                 border-bottom: 1px solid #444;
 832                 border-left: 1px solid #777;
 833                 border-right: 1px solid #444;
 834                 color: #FFF;
 835                 text-shadow: -1px -1px 0 rgba(0,0,0,.35)
 836         }
 837
 838 /* @end */
 839
 840
 841
 842 /* @end */
 843
 844 /* @group Menus */
 845
 846 .x-menu{
 847         background: transparent url(images/fills/80b.png) top left repeat;
 848         border:1px solid #444;
 849         }
 850         .x-menu-item-text{
 851                 color: #DDD;
 852                 text-shadow: -1px -1x 0 #000;
 853         }
 854         .x-menu-item-active, .x-menu-item-active .x-menu-item{
 855                 border-color: #3398e1;
 856                 border-top-color: #71b3e1;
 857                 border-bottom-color: #065790;
 858                 }
 859                 .x-menu-item-active{
 860                         background: transparent url(images/gloss/gloss.png) left center repeat-x;
 861                         }
 862                         .x-menu-item-active .x-menu-item-text{
 863                                 color: #FFF;
 864                         }
 865         .x-menu-sep{
 866                 border-color: #444;
 867         }
 868         .x-menu-item-arrow{
 869                 background-image: url(images/menu/arrow.png);
 870         }
 871         .x-menu-check-item .x-menu-item-icon{
 872                 background: transparent url(images/form/unchecked.png) left center no-repeat;
 873         }
 874         .x-menu-item-checked .x-menu-check-item .x-menu-item-icon{
 875                 background: transparent url(images/form/checked.png) left center no-repeat;
 876         }
 877         .x-menu-group-item .x-menu-item-icon{
 878                 background: transparent url(images/form/unradioed.png) left center no-repeat;
 879         }
 880         .x-menu-item-checked .x-menu-group-item .x-menu-item-icon{
 881                 background: transparent url(images/form/radioed.png) left center no-repeat;
 882         }
 883
 884 /* @end */
 885
 886 /* @group Progress Bar */
 887
 888 .x-progress-wrap{
 889         color: #CCC;
 890         background: transparent url(images/progress.png) 0 -18px repeat-x;
 891         border: 1px solid #000;
 892 }
 893 .x-progress-inner{
 894         border: 1px solid #888;
 895 }
 896 .x-progress-bar{
 897         color: #FFF;
 898         background: #000 url(images/gloss/gloss.png) center center repeat-x;
 899         padding: 1px;
 900         height: 15px !important;
 901         border-bottom: 1px solid #000 !important;
 902 }
 903
 904 /* @end */
 905
 906 /* @group Date Picker */
 907
 908 .x-date-picker{
 909         border: 1px solid #000;
 910         background: transparent url(images/windowdark/c.png) repeat right top;
 911 }
 912 .x-date-picker a{
 913         color: #06C;
 914 }
 915 .x-date-mp{
 916         background: #222;
 917 }
 918 .x-date-mp a{
 919         color: #6AF;
 920         text-shadow:-1px -1px 0 rgba(0,0,0,.35)
 921 }
 922 .x-date-picker table{
 923         font-size:11px;
 924 }
 925 .x-date-active{
 926         border-color: transparent !important;
 927 }
 928 .x-date-selected{
 929         border: 1px solid #000 !important;
 930 }
 931 .x-date-active a{
 932         color: #FFF;
 933 }
 934 .x-date-picker .x-date-today .x-date-date{
 935         background: transparent url(images/fills/30w.png) repeat;
 936         border-color: transparent;
 937 }
 938 .x-date-picker .x-date-selected .x-date-date{
 939         background: transparent url(images/windowlight/tc.png) repeat-x right center;
 940         border-color: #3398e1;
 941         border-top-color: #71b3e1;
 942         border-bottom-color: #065790;
 943 }
 944 .x-date-picker .x-date-selected.x-date-today .x-date-date{
 945         background-color: #FFF;
 946 }
 947 .x-date-prevday a, .x-date-nextday a{
 948         color: #888;
 949 }
 950 .x-date-bottom{
 951         padding: 3px;
 952         border-top-color: #000;
 953         background: transparent url(images/tb.png) left top repeat-x;
 954 }
 955 .x-date-picker th{
 956         background: transparent url(images/tb.png) left top repeat-x;
 957         border-bottom-color: #000;
 958 }
 959 .x-date-middle, .x-date-left, .x-date-right{
 960         background: #000 url(images/gradients/30white-to-trans.png) left top repeat-x;
 961         border-top: 1px solid #888;
 962 }
 963 .x-date-left a{
 964         background: transparent url(images/btn/left.png) left top no-repeat;
 965         height: 15px;
 966         left: 15px;
 967 }
 968 .x-date-right a{
 969         background: transparent url(images/btn/right.png) left top no-repeat;
 970         height: 15px;
 971         left: 15px;
 972 }
 973 .x-date-picker .x-date-mp-sel a{
 974         background: transparent url(images/windowlight/tc.png) repeat-x right center;
 975         border-color: #3398e1;
 976         border-top-color: #71b3e1;
 977         border-bottom-color: #065790;
 978 }
 979 .x-date-picker .x-date-mp-sep{
 980         border-color: #444;
 981 }
 982 .x-date-mp-btns td{
 983         border-color: #444;
 984 }
 985 .x-date-mp-btns{
 986         background: #000;
 987 }
 988 .x-date-mp-btns button{
 989         background: transparent url(images/windowlight/tc.png) repeat-x right center;
 990         border-color: #888;
 991         border-top-color: #CCC;
 992         border-bottom-color: #555;
 993         color: #FFF;
 994         text-shadow:-1px -1px 0 #000;
 995 }
 996 .x-date-mp-btns button:hover{
 997         border-color: #3398e1;
 998         border-top-color: #71b3e1;
 999         border-bottom-color: #065790;
1000 }
1001
1002 /* @end */
1003
1004 /* @group Resizable Handles */
1005
1006 .x-resizable-handle{
1007 }
1008 .x-resizable-handle-north{ background-image: url(images/resizable/n.png); }
1009 .x-resizable-handle-south{ background-image: url(images/resizable/s.png); }
1010
1011 .x-resizable-handle-east{ background-image: url(images/resizable/e.png); }
1012 .x-resizable-handle-west{ background-image: url(images/resizable/w.png); }
1013 .x-resizable-handle-northwest{ background-image: url(images/resizable/nw.png); }
1014 .x-resizable-handle-northeast{ background-image: url(images/resizable/ne.png); }
1015 .x-resizable-handle-southwest{ background-image: url(images/resizable/sw.png); }
1016 .x-resizable-handle-southeast{ background-image: url(images/resizable/se.png); }
1017
1018 .x-resizable-pinned{
1019         background: #888;
1020 }
1021
1022 .x-window-handle, .x-window.x-resizable-pinned{
1023         background: transparent !important;
1024 }
1025
1026 /* @end */
1027
1028
1029 /* @group Node Tree */
1030
1031 .x-tree .x-panel-body{
1032         background: #000;
1033 }
1034 .x-tree-node-expanded .x-tree-node-icon{
1035         background-image:url(images/tree/folder-open.png);
1036 }
1037
1038 .x-tree-node-leaf .x-tree-node-icon{
1039     background-image:url(images/tree/leaf.png);
1040 }
1041
1042 .x-tree-node-collapsed .x-tree-node-icon{
1043     background-image:url(images/tree/folder.png);
1044 }
1045
1046 .x-tree-node-loading .x-tree-node-icon{
1047     background-image:url(images/tree/loading.gif) !important;
1048 }
1049
1050 .x-tree-node .x-tree-node-inline-icon {
1051     background-image: none;
1052 }
1053
1054 .x-tree-node-loading a span{
1055      font-style: italic;
1056      color:#FFF;
1057 }
1058
1059 .x-tree-lines .x-tree-elbow{
1060     background-image:url(images/tree/elbow.gif);
1061 }
1062
1063 .x-tree-lines .x-tree-elbow-plus{
1064     background-image:url(images/tree/elbow-plus.gif);
1065 }
1066
1067 .x-tree-lines .x-tree-elbow-minus{
1068     background-image:url(images/tree/elbow-minus.gif);
1069 }
1070
1071 .x-tree-lines .x-tree-elbow-end{
1072     background-image:url(images/tree/elbow-end.gif);
1073 }
1074
1075 .x-tree-lines .x-tree-elbow-end-plus{
1076     background-image:url(images/tree/elbow-end-plus.gif);
1077 }
1078
1079 .x-tree-lines .x-tree-elbow-end-minus{
1080     background-image:url(images/tree/elbow-end-minus.gif);
1081 }
1082
1083 .x-tree-lines .x-tree-elbow-line{
1084     background-image:url(images/tree/elbow-line.gif);
1085 }
1086
1087 .x-tree-no-lines .x-tree-elbow-plus{
1088     background-image:url(images/tree/elbow-plus-nl.gif);
1089 }
1090 .x-tree-no-lines .x-tree-elbow-minus{
1091     background-image:url(images/tree/elbow-minus-nl.gif);
1092 }
1093
1094 .x-tree-no-lines .x-tree-elbow-end-plus{
1095     background-image:url(images/tree/elbow-end-plus-nl.gif);
1096 }
1097
1098 .x-tree-no-lines .x-tree-elbow-end-minus{
1099     background-image:url(images/tree/elbow-end-minus-nl.gif);
1100 }
1101
1102 .x-tree-arrows .x-tree-elbow-plus{
1103     background-image:url(images/tree/arrows.gif);
1104 }
1105
1106 .x-tree-arrows .x-tree-elbow-minus{
1107     background-image:url(images/tree/arrows.gif);
1108 }
1109
1110 .x-tree-arrows .x-tree-elbow-end-plus{
1111     background-image:url(images/tree/arrows.gif);
1112 }
1113
1114 .x-tree-arrows .x-tree-elbow-end-minus{
1115     background-image:url(images/tree/arrows.gif);
1116 }
1117
1118 .x-tree-node{
1119     color:#FFF;
1120     font: normal 11px arial, tahoma, helvetica, sans-serif;
1121 }
1122
1123 .x-tree-node a, .x-dd-drag-ghost a{
1124     color:#FFF;
1125 }
1126
1127 .x-tree-node a span, .x-dd-drag-ghost a span{
1128     color:#FFF;
1129 }
1130
1131 .x-tree-node .x-tree-node-disabled a span{
1132     color:gray !important;
1133 }
1134
1135 .x-tree-node div.x-tree-drag-insert-below{
1136      border-bottom-color: #3fb5ff;
1137 }
1138
1139 .x-tree-node div.x-tree-drag-insert-above{
1140      border-top-color:#3fb5ff;
1141 }
1142
1143 .x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-below a{
1144      border-bottom-color:#3fb5ff;
1145 }
1146
1147 .x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-above a{
1148      border-top-color:#3fb5ff;
1149 }
1150
1151 .x-tree-node .x-tree-drag-append a span{
1152      background-color:#444;
1153      border-color:#666;
1154 }
1155
1156 .x-tree-node .x-tree-node-over {
1157     background-color: #444;
1158 }
1159
1160 .x-tree-node .x-tree-selected {
1161     background-color: #456;
1162 }
1163
1164 .x-tree-drop-ok-append .x-dd-drop-icon{
1165   background-image: url(images/tree/drop-add.png);
1166 }
1167
1168 .x-tree-drop-ok-above .x-dd-drop-icon{
1169   background-image: url(images/tree/drop-over.gif);
1170 }
1171
1172 .x-tree-drop-ok-below .x-dd-drop-icon{
1173   background-image: url(images/tree/drop-under.gif);
1174 }
1175
1176 .x-tree-drop-ok-between .x-dd-drop-icon{
1177   background-image: url(images/tree/drop-between.gif);
1178 }
1179
1180 /* @end */
1181
1182 /* @group Toolbar Icons */
1183
1184 .x-toolbar .x-btn-mc em.x-btn-split {
1185     background-image:url(../images/default/btn/s-arrow-noline.gif);
1186 }
1187
1188 .x-toolbar .x-btn-over .x-btn-mc em.x-btn-split, .x-toolbar .x-btn-click .x-btn-mc em.x-btn-split,
1189 .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
1190 {
1191     background-image:url(../images/default/btn/s-arrow-o.gif);
1192 }
1193
1194 .x-toolbar .x-btn-mc em.x-btn-split-bottom {
1195     background-image:url(../images/default/btn/s-arrow-b-noline.gif);
1196 }
1197
1198 .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,
1199 .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
1200 {
1201     background-image:url(../images/default/btn/s-arrow-bo.gif);
1202 }
1203
1204 .x-toolbar .xtb-sep {
1205         width: 0;
1206         border-left: 1px solid #222;
1207         border-right: 1px solid #777;
1208 }
1209 .x-tbar-page-first{
1210     background-image: url(images/icons/first.png) !important;
1211 }
1212
1213 .x-tbar-loading{
1214     background-image: url(images/icons/refresh.png) !important;
1215 }
1216
1217 .x-tbar-page-last{
1218     background-image: url(images/icons/last.png) !important;
1219 }
1220 .x-tbar-page-next{
1221     background-image: url(images/icons/next.png) !important;
1222 }
1223
1224 .x-tbar-page-prev{
1225     background-image: url(images/icons/prev.png) !important;
1226 }
1227
1228 .x-item-disabled .x-tbar-loading{
1229     background-image: url(images/icons/d-refresh.png) !important;
1230 }
1231
1232 .x-item-disabled .x-tbar-page-first{
1233     background-image: url(images/icons/d-first.png) !important;
1234 }
1235
1236 .x-item-disabled .x-tbar-page-last{
1237     background-image: url(images/icons/d-last.png) !important;
1238 }
1239
1240 .x-item-disabled .x-tbar-page-next{
1241     background-image: url(images/icons/d-next.png) !important;
1242 }
1243
1244 .x-item-disabled .x-tbar-page-prev{
1245     background-image: url(images/icons/d-prev.png) !important;
1246 }
1247
1248 .x-paging-info {
1249     color:#444;
1250 }
1251
1252 .x-toolbar-more-icon {
1253     background-image: url(../images/default/toolbar/more.gif) !important;
1254 }
1255
1256 /* @end */
1257
1258 /* @group Tool Tips */
1259
1260 .x-tip{
1261         color: #FFE;
1262         text-shadow: -1px -1px 0 rgba(0,0,0,.35);
1263 }
1264 .x-tip .x-tip-tl{
1265         padding-left: 5px;
1266         background:transparent url(images/tt/tl.png) top left no-repeat;
1267 }
1268 .x-tip .x-tip-tr{
1269         padding-right: 5px;
1270         background:transparent url(images/tt/tr.png) top right no-repeat;
1271 }
1272 .x-tip .x-tip-tc{
1273         font-family: Optima, sans-serif;
1274         text-transform: uppercase;
1275         letter-spacing: .1em;
1276         font-size: 10px;
1277         padding-bottom: 3px;
1278         padding-top: 5px;
1279         background:transparent url(images/tt/tc.png) top left repeat-x;
1280 }
1281 .x-tip .x-tip-ml{
1282         padding-left: 5px;
1283         background:transparent url(images/tt/ml.png) top left repeat-y;
1284 }
1285 .x-tip .x-tip-mr{
1286         padding-right: 5px;
1287         background:transparent url(images/tt/mr.png) top right repeat-y;
1288 }
1289 .x-tip .x-tip-mc{
1290         background:transparent url(images/tt/c.png) top right repeat;
1291 }
1292 .x-tip .x-tip-bl{
1293         padding-left: 5px;
1294         background:transparent url(images/tt/bl.png) bottom left no-repeat;
1295 }
1296 .x-tip .x-tip-br{
1297         padding-right: 5px;
1298         background:transparent url(images/tt/br.png) bottom right no-repeat;
1299 }
1300 .x-tip .x-tip-bc{
1301         height: 5px;
1302         background:transparent url(images/tt/bc.png) bottom left repeat-x;
1303 }
1304
1305         /* @group Invalid Tips */
1306
1307 .x-form-invalid-tip{
1308                 color: #FCC;
1309         }
1310         .x-form-invalid-tip .x-tip-body{
1311                 background:transparent url(images/icons/exclamation.png) top left no-repeat;
1312         }
1313         .x-form-invalid-tip .x-tip-tl{
1314                 padding-left: 5px;
1315                 background:transparent url(images/tt/i-tl.png) top left no-repeat;
1316         }
1317         .x-form-invalid-tip .x-tip-tr{
1318                 padding-right: 5px;
1319                 background:transparent url(images/tt/i-tr.png) top right no-repeat;
1320         }
1321         .x-form-invalid-tip .x-tip-tc{
1322                 font-family: Optima, sans-serif;
1323                 text-transform: uppercase;
1324                 letter-spacing: .1em;
1325                 font-size: 10px;
1326                 padding-bottom: 3px;
1327                 padding-top: 5px;
1328                 background:transparent url(images/tt/i-tc.png) top left repeat-x;
1329         }
1330         .x-form-invalid-tip .x-tip-ml{
1331                 padding-left: 5px;
1332                 background:transparent url(images/tt/i-ml.png) top left repeat-y;
1333         }
1334         .x-form-invalid-tip .x-tip-mr{
1335                 padding-right: 5px;
1336                 background:transparent url(images/tt/i-mr.png) top right repeat-y;
1337         }
1338         .x-form-invalid-tip .x-tip-mc{
1339                 background:transparent url(images/tt/i-c.png) top right repeat;
1340         }
1341         .x-form-invalid-tip .x-tip-bl{
1342                 padding-left: 5px;
1343                 background:transparent url(images/tt/i-bl.png) bottom left no-repeat;
1344         }
1345         .x-form-invalid-tip .x-tip-br{
1346                 padding-right: 5px;
1347                 background:transparent url(images/tt/i-br.png) bottom right no-repeat;
1348         }
1349         .x-form-invalid-tip .x-tip-bc{
1350                 height: 5px;
1351                 background:transparent url(images/tt/i-bc.png) bottom left repeat-x;
1352         }
1353
1354         /* @end */
1355
1356 /* @end */
1357
1358 /* @group Slider */
1359
1360 .x-slider-horz .x-slider-thumb{
1361         background-image: url(images/slider/thumbh.png) !important;
1362 }
1363
1364 .x-slider-vert .x-slider-thumb{
1365         background-image: url(images/slider/thumbv.png) !important;
1366 }
1367 .x-slider-horz, .x-slider-horz .x-slider-end, .x-slider-horz .x-slider-inner{
1368         background-image: url(images/slider/h.png) !important;
1369 }
1370 .x-slider-vert, .x-slider-vert .x-slider-end, .x-slider-vert .x-slider-inner{
1371         background-image: url(images/slider/v.png) !important;
1372 }
1373
1374 /* @end */
1375
1376 /* @group Masked Panel */
1377
1378 .ext-el-mask{
1379         background: #999;
1380 }
1381 .ext-el-mask-msg{
1382         background: transparent url(images/gloss/gloss.png) center center repeat;
1383         border-bottom-color: #222;
1384         border-top-color: #999;
1385         border-left-color: #444;
1386         border-right-color: #444;
1387         border-radius:4px;
1388 }
1389 .ext-el-mask-msg div{
1390         background: #000;
1391         border: 1px solid #222;
1392         border-top-color: #222;
1393         border-bottom-color: #999;
1394         border-left-color: #444;
1395         border-right-color: #444;
1396         border-radius:3px;
1397 }
1398 .x-mask-loading div{
1399         background:#000 url(images/load.gif) 4px 4px no-repeat;
1400 }
1401
1402 /* @end */
1403
1404 /* @group Color Palette */
1405
1406 .x-color-palette{
1407         background: #666 url(images/gradients/30white-to-trans.png) 0 0 repeat-x;
1408         margin: -3px !important;
1409 }
1410 .x-color-palette a{
1411         color: #000;
1412         border-color: transparent;
1413 }
1414 .x-color-palette .x-color-palette-sel em, .x-color-palette a:hover em{
1415         border-top-color: #222;
1416         border-left-color: #444;
1417         border-right-color: #444;
1418         border-bottom-color: #666;
1419 }
1420 .x-color-palette .x-color-palette-sel, .x-color-palette a:hover{
1421         border-top-color: #666 !important;
1422         border-left-color: #444 !important;
1423         border-right-color: #444 !important;
1424         border-bottom-color: #222 !important;
1425         background: #000 url(images/gloss/gloss.png) center center repeat-x;
1426 }
1427  .x-color-palette a:hover{
1428         border-top-color: #71b3e1 !important;
1429         border-left-color: #3398e1 !important;
1430         border-right-color: #3398e1 !important;
1431         border-bottom-color: #065790 !important;
1432         background-color: #065790;
1433 }
1434
1435 /* @end */
1436
1437 /* @group Drag Proxy */
1438
1439 .x-dd-drag-proxy{
1440         border: 1px solid #000;
1441         background: #000;
1442         border-radius:3px;
1443 }
1444 .x-dd-drag-ghost{
1445         border-radius:2px;
1446         background: #000 url(images/gloss/gloss.png) center center repeat-x;
1447         border-top: 1px solid #AAA;
1448         border-bottom: 1px solid #222;
1449         border-left: 1px solid #444;
1450         border-right: 1px solid #444;
1451 }
1452 .x-dd-drop-ok .x-dd-drop-icon{
1453         background-image: url(images/icons/yes.png);
1454 }
1455 .x-dd-drop-nodrop .x-dd-drop-icon{
1456         background-image: url(images/icons/no.png);
1457 }
1458
1459 /* @end */
1460
1461 /* @group Accordion */
1462
1463 .x-accordion-hd{
1464         border-top: 1px solid #CCC !important;
1465         border-bottom: 1px solid #444 !important;
1466         background: #666 url(images/gradients/30white-to-trans.png) left top repeat-x;
1467         font-family: Helvetica, Arial, sans-serif;
1468         font-size: .9em;
1469 }
1470 .x-panel-collapsed .x-accordion-hd{
1471         border-bottom: 1px solid #222 !important;
1472         background: #333 url(images/gradients/30white-to-trans.png) left top repeat-x;
1473 }
1474 .x-accordion-hd .x-panel-header-text{
1475         text-shadow: -1px -1px 0 rgba(0,0,0,.35);
1476 }
1477
1478 /* @end */
1479
1480 /* @group Group Summary */
1481
1482 .x-grid3-summary-row{
1483         background: transparent url(images/fills/80b.png) left top repeat;
1484 }
1485
1486 /* @end */
1487