examples/ux/css/ux-all.css

   1 /*!
   2  * Ext JS Library 3.0.3
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 .ux-layout-center-item {
   8     margin:0 auto;
   9     text-align:left;
  10 }
  11 .ux-layout-center .x-panel-body,
  12 body.ux-layout-center {
  13     text-align:center;
  14 }
  15 .x-column-tree .x-panel-header {
  16         padding: 3px 0px 0px 0px;
  17         border-bottom-width: 0px;
  18 }
  19
  20 .x-column-tree .x-panel-header .x-panel-header-text {
  21         margin-left: 3px
  22 }
  23
  24 .x-column-tree .x-tree-node {
  25     zoom:1;
  26 }
  27 .x-column-tree .x-tree-node-el {
  28     /*border-bottom:1px solid #eee; borders? */
  29     zoom:1;
  30 }
  31 .x-column-tree .x-tree-selected {
  32     background: #d9e8fb;
  33 }
  34 .x-column-tree  .x-tree-node a {
  35     line-height:18px;
  36     vertical-align:middle;
  37 }
  38 .x-column-tree  .x-tree-node a span{
  39
  40 }
  41 .x-column-tree  .x-tree-node .x-tree-selected a span{
  42         background:transparent;
  43         color:#000;
  44 }
  45 .x-tree-col {
  46     float:left;
  47     overflow:hidden;
  48     padding:0 1px;
  49     zoom:1;
  50 }
  51
  52 .x-tree-col-text, .x-tree-hd-text {
  53     color:#000;
  54     overflow:hidden;
  55     -o-text-overflow: ellipsis;
  56     text-overflow: ellipsis;
  57     padding:3px 3px 3px 5px;
  58     white-space: nowrap;
  59     font:normal 11px arial, tahoma, helvetica, sans-serif;
  60 }
  61
  62 .x-tree-headers {
  63         margin-top: 3px;
  64         background: #f9f9f9 url(../../../resources/images/default/grid/grid3-hrow.gif) repeat-x 0 bottom;
  65         cursor:default;
  66     zoom:1;
  67 }
  68
  69 .x-tree-hd {
  70     float:left;
  71     overflow:hidden;
  72     border-left:1px solid #eee;
  73     border-right:1px solid #d0d0d0;
  74 }
  75 /*
  76  * FileUploadField component styles
  77  */
  78 .x-form-file-wrap {
  79     position: relative;
  80     height: 22px;
  81 }
  82 .x-form-file-wrap .x-form-file {
  83         position: absolute;
  84         right: 0;
  85         -moz-opacity: 0;
  86         filter:alpha(opacity: 0);
  87         opacity: 0;
  88         z-index: 2;
  89     height: 22px;
  90 }
  91 .x-form-file-wrap .x-form-file-btn {
  92         position: absolute;
  93         right: 0;
  94         z-index: 1;
  95 }
  96 .x-form-file-wrap .x-form-file-text {
  97     position: absolute;
  98     left: 0;
  99     z-index: 3;
 100     color: #777;
 101 }/**\r
 102  * GridFilters Styles\r
 103  **/\r
 104 /*\r
 105 .x-grid3-hd-row .ux-filtered-column {\r
 106         border-left:  1px solid #C7E3B4;\r
 107         border-right: 1px solid #C7E3B4;\r
 108 }\r
 109 \r
 110 .x-grid3-hd-row .ux-filtered-column .x-grid3-hd-inner {\r
 111         background-image: url(../images/header_bg.gif);\r
 112 }\r
 113 \r
 114 .ux-filtered-column .x-grid3-hd-btn {\r
 115         background-image: url(../images/hd-btn.gif);\r
 116 }\r
 117 */\r
 118 .x-grid3-hd-row td.ux-filtered-column {   \r
 119     font-style: italic;  \r
 120     font-weight: bold;\r
 121 }               \r
 122 \r
 123 .ux-filtered-column.sort-asc .x-grid3-sort-icon {\r
 124         background-image: url(../images/sort_filtered_asc.gif) !important;\r
 125 }\r
 126 \r
 127 .ux-filtered-column.sort-desc .x-grid3-sort-icon {\r
 128         background-image: url(../images/sort_filtered_desc.gif) !important;\r
 129 }\r
 130 \r
 131 .ux-gridfilter-text-icon {\r
 132         background-image: url(../images/find.png) !important;\r
 133 }\r
 134 \r
 135 /* Temporary Patch for Bug ??? */\r
 136 .x-menu-list-item-indent .x-menu-item-icon {\r
 137         position: relative;\r
 138     top: 3px;\r
 139     left: 3px;\r
 140         margin-right: 10px;\r
 141 }\r
 142 li.x-menu-list-item-indent {\r
 143         padding-left:0px;\r
 144 }\r
 145 li.x-menu-list-item div {\r
 146         display: inline;\r
 147 }\r
 148 \r
 149 /**\r
 150  * RangeMenu Styles\r
 151  **/\r
 152 .ux-rangemenu-gt {\r
 153         background-image: url(../images/greater_than.png) !important;\r
 154 }\r
 155 \r
 156 .ux-rangemenu-lt {\r
 157         background-image: url(../images/less_than.png) !important;\r
 158 }\r
 159 \r
 160 .ux-rangemenu-eq {\r
 161         background-image: url(../images/equals.png) !important;\r
 162 }\r
 163 .x-grid3-summary-row {\r
 164     border-left:1px solid #fff;\r
 165     border-right:1px solid #fff;\r
 166     color:#333;\r
 167     background: #f1f2f4;\r
 168 }\r
 169 .x-grid3-summary-row .x-grid3-cell-inner {\r
 170     font-weight:bold;\r
 171     padding-bottom:4px;\r
 172 }\r
 173 .x-grid3-cell-first .x-grid3-cell-inner {\r
 174     padding-left:16px;\r
 175 }\r
 176 .x-grid-hide-summary .x-grid3-summary-row {\r
 177     display:none;\r
 178 }\r
 179 .x-grid3-summary-msg {\r
 180     padding:4px 16px;\r
 181     font-weight:bold;\r
 182 }.x-grouptabs-panel {\r
 183     background-color: #4E78B1;\r
 184     border: solid 15px #4E78B1;\r
 185 }\r
 186 .x-tab-panel-left .x-grouptabs-panel-header,\r
 187 .x-tab-panel-right .x-grouptabs-panel-header {\r
 188     float: left;\r
 189     border: 0;\r
 190     background: transparent;\r
 191 }\r
 192 .x-tab-panel-right .x-grouptabs-panel-header {\r
 193     float:right;\r
 194 }\r
 195 .x-tab-panel-left .x-grouptabs-bwrap {\r
 196     float: right;\r
 197     position: relative;\r
 198 }\r
 199 .x-tab-panel-right .x-grouptabs-bwrap {\r
 200     float: left;\r
 201     position: relative;\r
 202 }\r
 203 .x-tab-panel-left ul.x-grouptabs-strip,\r
 204 .x-tab-panel-right ul.x-grouptabs-strip {\r
 205     width: auto;\r
 206         display: block;\r
 207 }\r
 208 .x-tab-panel-left ul.x-grouptabs-strip li,\r
 209 .x-tab-panel-right ul.x-grouptabs-strip li {\r
 210     padding: 6px 0 2px 6px;\r
 211     float: none;\r
 212     margin: 0;\r
 213     position: relative;\r
 214     clear: both;\r
 215 }\r
 216 .x-tab-panel-left .x-tab-panel-header ul.x-grouptabs-strip a.x-grouptabs-text,\r
 217 .x-tab-panel-right .x-tab-panel-header ul.x-grouptabs-strip a.x-grouptabs-text{\r
 218         font-size: 13px;\r
 219         line-height: 18px;\r
 220         cursor: pointer;\r
 221 }\r
 222 \r
 223 .x-tab-panel-left .x-tab-panel-header ul.x-grouptabs-strip a.x-grouptabs-text{\r
 224     padding-left: 18px;\r
 225 }\r
 226 .x-tab-panel-right .x-tab-panel-header ul.x-grouptabs-strip a.x-grouptabs-text{\r
 227     padding-right: 18px;\r
 228 }\r
 229 \r
 230 .x-tab-panel-left .x-tab-panel-header ul.x-grouptabs-sub a.x-grouptabs-text,\r
 231 .x-tab-panel-right .x-tab-panel-header ul.x-grouptabs-sub a.x-grouptabs-text{\r
 232         font-size: 12px;\r
 233     padding: 0;  \r
 234 }\r
 235 \r
 236 .x-tab-panel-left .x-tab-panel-header ul.x-grouptabs-sub a.x-grouptabs-text{\r
 237         margin-left: 4px;\r
 238 }\r
 239 .x-tab-panel-right .x-tab-panel-header ul.x-grouptabs-sub a.x-grouptabs-text{\r
 240         margin-right: 4px;\r
 241 }\r
 242 \r
 243 .x-grouptabs-panel .x-grouptabs-strip a.x-grouptabs-text{\r
 244     overflow: hidden;\r
 245     white-space: nowrap;\r
 246         display: block;\r
 247     color: #DFE8F6;\r
 248     font-family: tahoma, arial, sans-serif;\r
 249     font-weight: bold;\r
 250     text-decoration: none;\r
 251 }\r
 252 .x-tab-panel-right .x-grouptabs-strip a.x-grouptabs-text {\r
 253     text-align: right;\r
 254 }\r
 255 \r
 256 .x-grouptabs-panel .x-grouptabs-strip-active a.x-grouptabs-text {\r
 257     color: #395B8E;\r
 258 }\r
 259 \r
 260 .x-grouptabs-panel ul.x-grouptabs-sub a.x-grouptabs-text {\r
 261         font-weight: normal;\r
 262 }\r
 263 .x-tab-joint {\r
 264     position: absolute;\r
 265     width: 3px;\r
 266     top: 1px;\r
 267     background: #fff;\r
 268     z-index: 9999;\r
 269 }\r
 270 \r
 271 .x-grouptabs-panel .x-grouptabs-panel-body {\r
 272     border: 1px solid #999;\r
 273 }\r
 274 \r
 275 .x-grouptabs-panel ul.x-grouptabs-strip li {\r
 276     border-top: 1px solid transparent;\r
 277     border-bottom: 1px solid transparent;\r
 278         border-left: 1px solid transparent;\r
 279 }\r
 280 \r
 281 .x-grouptabs-panel ul.x-grouptabs-strip li.x-grouptabs-strip-active {\r
 282     border: 0;\r
 283     background: #fff;\r
 284     border-top: 1px solid #999;\r
 285     border-bottom: 1px solid #999;\r
 286 }\r
 287 \r
 288 .x-tab-panel-left ul.x-grouptabs-strip li.x-grouptabs-strip-active {\r
 289     border-left: 1px solid #999;\r
 290 }\r
 291 .x-tab-panel-right ul.x-grouptabs-strip li.x-grouptabs-strip-active {\r
 292     border-right: 1px solid #999;\r
 293 }\r
 294 \r
 295 .x-grouptabs-panel li.x-grouptabs-strip-active ul.x-grouptabs-sub li.x-grouptabs-strip-active{\r
 296     background-color: #EDEEF0;\r
 297 }\r
 298 \r
 299 .x-grouptabs-panel li.x-grouptabs-strip-active ul.x-grouptabs-sub {\r
 300     background-color: transparent;\r
 301 }\r
 302 \r
 303 .x-grouptabs-panel li.x-grouptabs-strip-active ul.x-grouptabs-sub li {\r
 304     border-color: transparent;\r
 305 }\r
 306 \r
 307 /* Tab corners */\r
 308 .x-grouptabs-panel .x-grouptabs-corner {\r
 309     background-image: url('../images/x-grouptabs-corners.gif');\r
 310     display: none;\r
 311     width: 11px;\r
 312     height: 11px;\r
 313     position: absolute;\r
 314     font-size: 1px;\r
 315     line-height: 6px;\r
 316     overflow: hidden;\r
 317     zoom:1;\r
 318 }\r
 319 .x-grouptabs-panel .x-grouptabs-strip-active .x-grouptabs-corner {\r
 320     display: block;\r
 321 }\r
 322 .x-grouptabs-panel .x-grouptabs-main.x-grouptabs-strip-active ul.x-grouptabs-sub .x-grouptabs-corner {\r
 323         display: none;\r
 324 }\r
 325 \r
 326 .x-grouptabs-panel .x-grouptabs-corner-top-left {\r
 327     background-position: top left;\r
 328     left: 0; top: 0;\r
 329 }\r
 330 .x-grouptabs-panel .x-grouptabs-corner-bottom-left {\r
 331     background-position: bottom left;\r
 332     left: 0; bottom: 0;\r
 333 }\r
 334 .x-grouptabs-panel .x-grouptabs-corner-top-right {\r
 335     background-position: top right;\r
 336     right: 0; top: 0;\r
 337 }\r
 338 .x-grouptabs-panel .x-grouptabs-corner-bottom-right {\r
 339     background-position: bottom right;\r
 340     right: 0; bottom: 0;\r
 341 }\r
 342 .x-grouptabs-panel li.x-grouptabs-strip-active .x-grouptabs-corner-bottom-left{\r
 343     bottom: -4px; left: -4px;\r
 344 }\r
 345 .x-grouptabs-panel li.x-grouptabs-strip-active .x-grouptabs-corner-bottom-right{\r
 346     bottom: -4px; right: -4px;\r
 347 }\r
 348 .x-grouptabs-panel li.x-grouptabs-strip-active .x-grouptabs-corner-top-left{\r
 349     top: -4px; left: -4px;\r
 350 }\r
 351 .x-grouptabs-panel li.x-grouptabs-strip-active .x-grouptabs-corner-top-right{\r
 352     top: -4px; right: -4px;\r
 353 }\r
 354 \r
 355 .x-grouptabs-panel ul.x-grouptabs-sub li.x-tab-with-icon a.x-grouptabs-text {\r
 356     background-repeat: no-repeat;\r
 357     padding-left: 20px;\r
 358 }\r
 359 \r
 360 /* General tab styling */\r
 361 .x-grouptabs-panel .x-grouptabs-expand {\r
 362         background: transparent url('../images/elbow-plus-nl.gif') no-repeat;\r
 363         width: 16px;\r
 364         height: 16px;\r
 365         position: absolute;\r
 366         left: 7px;\r
 367         top: 6px;\r
 368 }\r
 369 \r
 370 .ext-ie6 .x-grouptabs-panel .x-grouptabs-expand,\r
 371 .ext-border-box .x-grouptabs-panel .x-grouptabs-expand {\r
 372         left: 0;\r
 373 }\r
 374 \r
 375 .x-grouptabs-expanded .x-grouptabs-expand {\r
 376         background-image: url('../images/elbow-minus-nl.gif');\r
 377 }\r
 378 \r
 379 /* GroupTabs sub group styling */\r
 380 .x-grouptabs-sub {\r
 381         display: none;\r
 382         margin-top: 4px;\r
 383 }\r
 384 \r
 385 .x-grouptabs-expanded .x-grouptabs-sub {\r
 386         display: block;\r
 387 }\r
 388 \r
 389 .x-grouptabs-panel ul.x-grouptabs-sub li {\r
 390         height: 18px;\r
 391         margin: 0 0 2px;\r
 392     padding: 0;\r
 393 }\r
 394 \r
 395 .x-grouptabs-panel ul.x-grouptabs-sub .x-grouptabs-main-item {\r
 396         display: none;\r
 397 }\r
 398 \r
 399 .x-tab-with-icon{\r
 400    border-style:none !important;\r
 401 }\r
 402 .ux-mselect{\r
 403     overflow:auto;\r
 404     background:white;\r
 405     position:relative; /* for calculating scroll offsets */\r
 406     zoom:1;\r
 407     overflow:auto;      \r
 408 }\r
 409 .ux-mselect-item{\r
 410     font:normal 12px tahoma, arial, helvetica, sans-serif;\r
 411     padding:2px;\r
 412     border:1px solid #fff;\r
 413     white-space: nowrap;\r
 414     cursor:pointer;\r
 415 }\r
 416 .ux-mselect-selected{\r
 417         border:1px dotted #a3bae9 !important;\r
 418     background:#DFE8F6;\r
 419     cursor:pointer;\r
 420 }\r
 421 \r
 422 .x-view-drag-insert-above { \r
 423     border-top:1px dotted #3366cc; \r
 424 } \r
 425 .x-view-drag-insert-below { \r
 426     border-bottom:1px dotted #3366cc; \r
 427 }
 428 .x-panel-resize {
 429         height:5px;
 430         background:transparent url(../images/panel-handle.gif) no-repeat center bottom;
 431         position:relative;
 432         left:0;
 433         top:2px;
 434         cursor:n-resize;
 435         cursor:row-resize;
 436         /* for IE */
 437         font-size:1px;
 438         line-height:1px;
 439         overflow:hidden;
 440 }.x-portal .x-panel-dd-spacer {\r
 441     margin-bottom:10px;\r
 442 }\r
 443 \r
 444 .x-portlet {\r
 445     margin-bottom:10px;\r
 446 }\r
 447 \r
 448 /* Clean up the look of the portlets */\r
 449 .x-portlet .x-panel-ml {\r
 450     padding-left:2px;\r
 451 }\r
 452 .x-portlet .x-panel-mr {\r
 453     padding-right:2px;\r
 454 }\r
 455 .x-portlet .x-panel-bl {\r
 456     padding-left:2px;\r
 457 }\r
 458 \r
 459 .x-portlet .x-panel-br {\r
 460     padding-right:2px;\r
 461 }\r
 462 .x-portlet .x-panel-body {\r
 463     background:white;\r
 464 }\r
 465 .x-portlet .x-panel-mc {\r
 466     padding-top:2px;\r
 467 }\r
 468 .x-portlet .x-panel-bc .x-panel-footer {\r
 469     padding-bottom:2px;\r
 470 }\r
 471 .x-portlet .x-panel-nofooter .x-panel-bc {\r
 472     height:2px;\r
 473 }.ext-ie .x-row-editor .x-form-text {\r
 474     margin:0 !important; \r
 475 }\r
 476 .x-row-editor-header {\r
 477     height:2px;\r
 478     overflow:hidden;\r
 479     background: transparent url(../images/row-editor-bg.gif) repeat-x 0 0;\r
 480 }\r
 481 .x-row-editor-footer {\r
 482     height:2px;\r
 483     overflow:hidden;\r
 484     background: transparent url(../images/row-editor-bg.gif) repeat-x 0 -2px;\r
 485 }\r
 486 .ext-ie .x-row-editor-footer {\r
 487     margin-top:-1px;\r
 488 }\r
 489 \r
 490 .x-row-editor-body {\r
 491     overflow:hidden;\r
 492     zoom:1;\r
 493     background: #ebf2fb;\r
 494     padding-top:2px;\r
 495 }\r
 496 .x-row-editor .x-btns {\r
 497     position:absolute;\r
 498     top:28px;\r
 499     left:20px;\r
 500     padding-left:5px;\r
 501     background: transparent url(../images/row-editor-btns.gif) no-repeat 0 0;\r
 502 }\r
 503 .x-row-editor .x-btns .x-plain-bwrap {\r
 504     padding-right:5px;\r
 505     background: transparent url(../images/row-editor-btns.gif) no-repeat right -31px;\r
 506 }\r
 507 .x-row-editor .x-btns .x-plain-body {\r
 508     background: transparent url(../images/row-editor-btns.gif) repeat-x 0 -62px;\r
 509     height:31px;\r
 510 }\r
 511 .x-row-editor .x-btns .x-table-layout-cell {\r
 512     padding:3px;\r
 513 }\r
 514 \r
 515 /* Fixes for IE6/7 trigger fields */\r
 516 .ext-ie6 .x-row-editor .x-form-field-wrap .x-form-trigger, .ext-ie7 .x-row-editor .x-form-field-wrap .x-form-trigger {\r
 517   top: 1px;\r
 518 }\r
 519 \r
 520 .ext-ie6 .x-row-editor .x-form-field-trigger-wrap, .ext-ie7 .x-row-editor .x-form-field-trigger-wrap {\r
 521   margin-top: -1px;\r
 522 }\r
 523 \r
 524 .errorTip .x-tip-body ul{\r
 525     list-style-type:disc;\r
 526     margin-left:15px;\r
 527 }\r
 528 .x-form-spinner-proxy{
 529         /*background-color:#ff00cc;*/
 530 }
 531 .x-form-field-wrap .x-form-spinner-trigger {
 532     background:transparent url('../images/spinner.gif') no-repeat 0 0;
 533 }
 534
 535 .x-form-field-wrap .x-form-spinner-overup{
 536     background-position:-17px 0;
 537 }
 538 .x-form-field-wrap .x-form-spinner-clickup{
 539     background-position:-34px 0;
 540 }
 541 .x-form-field-wrap .x-form-spinner-overdown{
 542     background-position:-51px 0;
 543 }
 544 .x-form-field-wrap .x-form-spinner-clickdown{
 545     background-position:-68px 0;
 546 }
 547
 548
 549 .x-trigger-wrap-focus .x-form-spinner-trigger{
 550     background-position:-85px 0;
 551 }
 552 .x-trigger-wrap-focus .x-form-spinner-overup{
 553     background-position:-102px 0;
 554 }
 555 .x-trigger-wrap-focus .x-form-spinner-clickup{
 556     background-position:-119px 0;
 557 }
 558 .x-trigger-wrap-focus .x-form-spinner-overdown{
 559     background-position:-136px 0;
 560 }
 561 .x-trigger-wrap-focus .x-form-spinner-clickdown{
 562     background-position:-153px 0;
 563 }
 564 .x-trigger-wrap-focus .x-form-trigger{
 565     border-bottom: 1px solid #7eadd9;
 566 }
 567
 568 .x-form-field-wrap .x-form-spinner-splitter {
 569         line-height:1px;
 570         font-size:1px;
 571     background:transparent url('../images/spinner-split.gif') no-repeat 0 0;
 572         position:absolute;
 573         cursor: n-resize;
 574 }
 575 .x-trigger-wrap-focus .x-form-spinner-splitter{
 576     background-position:-14px 0;
 577 }
 578 /* StatusBar - structure */\r
 579 .x-statusbar .x-status-text {\r
 580     cursor: default;\r
 581 /*\r
 582     height: 21px;\r
 583     line-height: 21px;\r
 584     padding: 0 4px;\r
 585 */\r
 586 }\r
 587 .x-statusbar .x-status-busy {\r
 588     padding-left: 25px !important;\r
 589     background: transparent no-repeat 3px 2px;\r
 590 }\r
 591 \r
 592 .x-toolbar div.xtb-text\r
 593 \r
 594 .x-statusbar .x-status-text-panel {\r
 595     border-top: 1px solid;\r
 596     border-right: 1px solid;\r
 597     border-bottom: 1px solid;\r
 598     border-left: 1px solid;\r
 599     padding: 2px 8px 2px 5px;\r
 600 }\r
 601 \r
 602 /* StatusBar word processor example styles */\r
 603 \r
 604 #word-status .x-status-text-panel .spacer {\r
 605     width: 60px;\r
 606     font-size:0;\r
 607     line-height:0;\r
 608 }\r
 609 #word-status .x-status-busy {\r
 610     padding-left: 25px !important;\r
 611     background: transparent no-repeat 3px 2px;\r
 612 }\r
 613 #word-status .x-status-saved {\r
 614     padding-left: 25px !important;\r
 615     background: transparent no-repeat 3px 2px;\r
 616 }\r
 617 \r
 618 /* StatusBar form validation example styles */\r
 619 \r
 620 .x-statusbar .x-status-error {\r
 621     cursor: pointer;\r
 622     padding-left: 25px !important;\r
 623     background: transparent no-repeat 3px 2px;\r
 624 }\r
 625 .x-statusbar .x-status-valid {\r
 626     padding-left: 25px !important;\r
 627     background: transparent no-repeat 3px 2px;\r
 628 }\r
 629 .x-status-error-list {\r
 630     font: 11px tahoma,arial,verdana,sans-serif;\r
 631     position: absolute;\r
 632     z-index: 9999;\r
 633     border-top: 1px solid;\r
 634     border-right: 1px solid;\r
 635     border-bottom: 1px solid;\r
 636     border-left: 1px solid;\r
 637     padding: 5px 10px;\r
 638 }\r
 639 .x-status-error-list li {\r
 640     cursor: pointer;\r
 641     list-style: disc;\r
 642     margin-left: 10px;\r
 643 }\r
 644 .x-status-error-list li a {\r
 645     text-decoration: none;\r
 646 }\r
 647 .x-status-error-list li a:hover {\r
 648     text-decoration: underline;\r
 649 }\r
 650 \r
 651 \r
 652 /* *********************************************************** */\r
 653 /* *********************************************************** */\r
 654 /* *********************************************************** */\r
 655 \r
 656 \r
 657 /* StatusBar - visual */\r
 658 \r
 659 .x-statusbar .x-status-busy {\r
 660     background-image: url(../images/loading.gif);\r
 661 }\r
 662 .x-statusbar .x-status-text-panel {\r
 663     border-color: #99bbe8 #fff #fff #99bbe8;\r
 664 }\r
 665 \r
 666 /* StatusBar word processor example styles */\r
 667 \r
 668 #word-status .x-status-text {\r
 669     color: #777;\r
 670 }\r
 671 #word-status .x-status-busy {\r
 672     background-image: url(../images/saving.gif);\r
 673 }\r
 674 #word-status .x-status-saved {\r
 675     background-image: url(../images/saved.png);\r
 676 }\r
 677 \r
 678 /* StatusBar form validation example styles */\r
 679 \r
 680 .x-statusbar .x-status-error {\r
 681     color: #C33;\r
 682     background-image: url(../images/exclamation.gif);\r
 683 }\r
 684 .x-statusbar .x-status-valid {\r
 685     background-image: url(../images/accept.png);\r
 686 }\r
 687 .x-status-error-list {\r
 688     border-color: #C33;\r
 689 }\r
 690 .x-status-error-list li a {\r
 691     color: #15428B;\r
 692 }