lib/dijit/themes/dijit.css

   1 /*
   2         Essential styles that themes can inherit.
   3         In other words, works but doesn't look great.
   4 */
   5
   6
   7
   8 /****
   9                 GENERIC PIECES
  10  ****/
  11
  12 .dijitReset {
  13         /* Use this style to null out padding, margin, border in your template elements
  14                 so that page specific styles don't break them.
  15                 - Use in all TABLE, TR and TD tags.
  16         */
  17         margin:0;
  18         border:0;
  19         padding:0;
  20         line-height:normal;
  21         font: inherit;
  22         color: inherit;
  23 }
  24 .dijit_a11y .dijitReset {
  25         -moz-appearance: none; /* remove predefined high-contrast styling in Firefox */
  26 }
  27
  28 .dijitInline {
  29         /*  To inline block elements.
  30                 Similar to InlineBox below, but this has fewer side-effects in Moz.
  31                 Also, apparently works on a DIV as well as a FIELDSET.
  32         */
  33         display:inline-block;                   /* webkit and FF3 */
  34         #zoom: 1; /* set hasLayout:true to mimic inline-block */
  35         #display:inline; /* don't use .dj_ie since that increases the priority */
  36         border:0;
  37         padding:0;
  38         vertical-align:middle;
  39         #vertical-align: auto;  /* makes TextBox,Button line up w/native counterparts on IE6 */
  40 }
  41
  42 .dijitHidden {
  43         /* To hide unselected panes in StackContainer etc. */
  44         display: none !important;
  45 }
  46
  47 .dijitVisible {
  48         /* To show selected pane in StackContainer etc. */
  49         display: block !important;      /* override user's display:none setting via style setting or indirectly via class */
  50         position: relative;                     /* to support setting width/height, see #2033 */
  51 }
  52
  53 .dijitInputContainer {
  54         /* for positioning of placeHolder */
  55         #zoom: 1;
  56         overflow: hidden;
  57         float: none !important; /* needed by FF to squeeze the INPUT in */
  58         position: relative;
  59         vertical-align: middle;
  60         #display: inline;
  61 }
  62
  63 .dj_ie INPUT.dijitTextBox,
  64 .dj_ie .dijitTextBox INPUT {
  65         font-size: 100%;
  66 }
  67 .dijitTextBox .dijitSpinnerButtonContainer,
  68 .dijitTextBox .dijitArrowButtonContainer,
  69 .dijitTextBox .dijitValidationContainer {
  70         float: right;
  71         text-align: center;
  72 }
  73 .dijitTextBox INPUT.dijitInputField {
  74         /* override unreasonable user styling of buttons and icons */
  75         padding-left: 0 !important;
  76         padding-right: 0 !important;
  77 }
  78 .dijitTextBox .dijitValidationContainer {
  79         display: none;
  80 }
  81 .dijitInlineTable {
  82         /* To inline tables with a given width set (otherwise, use dijitInline above) */
  83         display:inline-table;
  84         display:inline-block;           /* webkit and FF3 */
  85         #zoom: 1; /* set hasLayout:true to mimic inline-block */
  86         #display:inline; /* don't use .dj_ie since that increases the priority */
  87         box-sizing: content-box; -moz-box-sizing: content-box;
  88         border:0;
  89         padding:0;
  90 }
  91
  92 .dijitTeeny {
  93         font-size:1px;
  94         line-height:1px;
  95 }
  96
  97 .dijitOffScreen {
  98         position: absolute;
  99         left: 50%;
 100         top: -10000px;
 101 }
 102
 103 /*
 104  * Popup items have a wrapper div (dijitPopup)
 105  * with the real popup inside, and maybe an iframe too
 106  */
 107 .dijitPopup {
 108         position: absolute;
 109         background-color: transparent;
 110         margin: 0;
 111         border: 0;
 112         padding: 0;
 113 }
 114
 115 .dijitPositionOnly {
 116         /* Null out all position-related properties */
 117         padding: 0 !important;
 118         border: 0 !important;
 119         background-color: transparent !important;
 120         background-image: none !important;
 121         height: auto !important;
 122         width: auto !important;
 123 }
 124
 125 .dijitNonPositionOnly {
 126         /* Null position-related properties */
 127         float: none !important;
 128         position: static !important;
 129         margin: 0 0 0 0 !important;
 130         vertical-align: middle !important;
 131 }
 132
 133 .dijitBackgroundIframe {
 134         /* iframe used to prevent problems with PDF or other applets overlaying menus etc */
 135         position: absolute;
 136         left: 0;
 137         top: 0;
 138         width: 100%;
 139         height: 100%;
 140         z-index: -1;
 141         border: 0;
 142         padding: 0;
 143         margin: 0;
 144 }
 145
 146 .dijitDisplayNone {
 147         /* hide something.  Use this as a class rather than element.style so another class can override */
 148         display:none !important;
 149 }
 150
 151 .dijitContainer {
 152         /* for all layout containers */
 153         overflow: hidden;       /* need on IE so something can be reduced in size, and so scrollbars aren't temporarily displayed when resizing */
 154 }
 155
 156 /****
 157                 A11Y
 158  ****/
 159 .dijit_a11y .dijitIcon,
 160 .dijit_a11y DIV.dijitArrowButtonInner, /* is this only for Spinner?  if so, it should be deleted */
 161 .dijit_a11y SPAN.dijitArrowButtonInner,
 162 .dijit_a11y IMG.dijitArrowButtonInner,
 163 .dijit_a11y .dijitCalendarIncrementControl,
 164 .dijit_a11y .dijitTreeExpando {
 165         /* hide icon nodes in high contrast mode; when necessary they will be replaced by character equivalents
 166          * exception for INPUT.dijitArrowButtonInner, because the icon and character are controlled by the same node */
 167         display: none;
 168 }
 169 .dijitSpinner DIV.dijitArrowButtonInner {
 170         display: block; /* override previous rule */
 171 }
 172
 173 .dijit_a11y .dijitA11ySideArrow {
 174         display: inline !important; /* display text instead */
 175         cursor: pointer;
 176 }
 177
 178 /*
 179  * Since we can't use shading in a11y mode, and since the underline indicates today's date,
 180  * use a border to show the selected date.
 181  * Avoid screen jitter when switching selected date by compensating for the selected node's
 182  * border w/padding on other nodes.
 183  */
 184 .dijit_a11y .dijitCalendarDateLabel {
 185         padding: 1px;
 186 }
 187 .dijit_a11y .dijitCalendarSelectedDate .dijitCalendarDateLabel {
 188         border-style: dotted !important;
 189         border-width: 1px;
 190         padding: 0;
 191 }
 192 .dijit_a11y .dijitCalendarDateTemplate {
 193         padding-bottom: 0.1em !important;       /* otherwise bottom border doesn't appear on IE */
 194 }
 195 .dijit_a11y .dijitButtonNode {
 196         border: black outset medium !important;
 197
 198         /* In claro, hovering a toolbar button reduces padding and adds a border.
 199          * Not needed in a11y mode since Toolbar buttons always have a border.
 200          */
 201         padding: 0 !important;
 202 }
 203
 204 .dijit_a11y .dijitTextBoxReadOnly .dijitInputField,
 205 .dijit_a11y .dijitTextBoxReadOnly .dijitButtonNode {
 206         border-style: outset!important;
 207         border-width: medium!important;
 208         border-color: #999 !important;
 209         color:#999 !important;
 210 }
 211
 212 /* button inner contents - labels, icons etc. */
 213 .dijitButtonNode * {
 214         vertical-align: middle;
 215 }
 216 .dijitButtonNode .dijitArrowButtonInner {
 217         /* the arrow icon node */
 218         background: no-repeat center;
 219         width: 12px;
 220         height: 12px;
 221         direction: ltr; /* needed by IE/RTL */
 222 }
 223
 224 /****
 225         3-element borders:  ( dijitLeft + dijitStretch + dijitRight )
 226         These were added for rounded corners on dijit.form.*Button but never actually used.
 227  ****/
 228
 229 .dijitLeft {
 230         /* Left part of a 3-element border */
 231         background-position:left top;
 232         background-repeat:no-repeat;
 233 }
 234
 235 .dijitStretch {
 236         /* Middle (stretchy) part of a 3-element border */
 237         white-space:nowrap;                     /* MOW: move somewhere else */
 238         background-repeat:repeat-x;
 239 }
 240
 241 .dijitRight {
 242         /* Right part of a 3-element border */
 243         #display:inline;                                /* IE7 sizes to outer size w/o this */
 244         background-position:right top;
 245         background-repeat:no-repeat;
 246 }
 247
 248 /* Buttons */
 249
 250 .dijitToggleButton,
 251 .dijitButton,
 252 .dijitDropDownButton,
 253 .dijitComboButton {
 254         /* outside of button */
 255         margin: 0.2em;
 256         vertical-align: middle;
 257 }
 258
 259 .dijitButtonContents {
 260         display: block;         /* to make focus border rectangular */
 261 }
 262 td.dijitButtonContents {
 263         display: table-cell;    /* but don't affect Select, ComboButton */
 264 }
 265
 266 .dijitButtonNode IMG {
 267         /* make text and images line up cleanly */
 268         vertical-align:middle;
 269         /*margin-bottom:.2em;*/
 270 }
 271
 272 .dijitToolbar .dijitComboButton {
 273         /* because Toolbar only draws a border around the hovered thing */
 274         border-collapse: separate;
 275 }
 276
 277 .dijitToolbar .dijitToggleButton,
 278 .dijitToolbar .dijitButton,
 279 .dijitToolbar .dijitDropDownButton,
 280 .dijitToolbar .dijitComboButton {
 281         margin: 0;
 282 }
 283
 284 .dijitToolbar .dijitButtonContents {
 285         /* just because it used to be this way */
 286         padding: 1px 2px;
 287 }
 288
 289
 290 .dj_webkit .dijitToolbar .dijitDropDownButton {
 291         padding-left: 0.3em;
 292 }
 293 .dj_gecko .dijitToolbar .dijitButtonNode::-moz-focus-inner {
 294         padding:0;
 295 }
 296
 297 .dijitButtonNode {
 298         /* Node that is acting as a button -- may or may not be a BUTTON element */
 299         border:1px solid gray;
 300         margin:0;
 301         line-height:normal;
 302         vertical-align: middle;
 303         #vertical-align: auto;
 304         text-align:center;
 305         white-space: nowrap;
 306 }
 307 .dj_webkit .dijitSpinner .dijitSpinnerButtonContainer {
 308         /* apparent WebKit bug where messing with the font coupled with line-height:normal X 2 (dijitReset & dijitButtonNode)
 309         can be different than just a single line-height:normal, visible in InlineEditBox/Spinner */
 310         line-height:inherit;
 311 }
 312 .dijitTextBox .dijitButtonNode {
 313         border-width: 0;
 314 }
 315
 316 .dijitButtonNode,
 317 .dijitButtonNode * {
 318         cursor: pointer;
 319 }
 320
 321 .dj_ie .dijitButtonNode {
 322         /* ensure hasLayout */
 323         zoom: 1;
 324 }
 325
 326 .dj_ie .dijitButtonNode button {
 327         /*
 328                 disgusting hack to get rid of spurious padding around button elements
 329                 on IE. MSIE is truly the web's boat anchor.
 330         */
 331         overflow: visible;
 332 }
 333
 334 DIV.dijitArrowButton {
 335         float: right;
 336 }
 337
 338 /******
 339         TextBox related.
 340         Everything that has an <input>
 341 *******/
 342
 343 .dijitTextBox {
 344         border: solid black 1px;
 345         #overflow: hidden; /* #6027, #6067 */
 346         width: 15em;    /* need to set default size on outer node since inner nodes say <input style="width:100%"> and <td width=100%>.  user can override */
 347         vertical-align: middle;
 348 }
 349
 350 .dijitTextBoxReadOnly,
 351 .dijitTextBoxDisabled {
 352         color: gray;
 353 }
 354 .dj_webkit .dijitTextBoxDisabled INPUT {
 355         color: #eee; /* because WebKit lightens disabled input/textarea no matter what color you specify */
 356 }
 357 .dj_webkit TEXTAREA.dijitTextAreaDisabled {
 358         color: #333; /* because WebKit lightens disabled input/textarea no matter what color you specify */
 359 }
 360 .dj_gecko .dijitTextBoxReadOnly INPUT.dijitInputField, /* disable arrow and validation presentation INPUTs but allow real INPUT for text selection */
 361 .dj_gecko .dijitTextBoxDisabled INPUT {
 362         -moz-user-input: none; /* prevent focus of disabled textbox buttons */
 363 }
 364
 365 .dijitPlaceHolder {
 366         /* hint text that appears in a textbox until user starts typing */
 367         color: #AAAAAA;
 368         font-style: italic;
 369         position: absolute;
 370         top: 0;
 371         left: 0;
 372         #filter: ""; /* make this showup in IE6 after the rendering of the widget */
 373 }
 374
 375 .dijitTimeTextBox {
 376         width: 8em;
 377 }
 378
 379 /* rules for webkit to deal with fuzzy blue focus border */
 380 .dijitTextBox INPUT:focus {
 381         outline: none;  /* blue fuzzy line looks wrong on combobox or something w/validation icon showing */
 382 }
 383 .dijitTextBoxFocused {
 384         outline: auto 5px -webkit-focus-ring-color;
 385 }
 386
 387 .dijitTextBox INPUT {
 388         float: left; /* needed by IE to remove secret margin */
 389 }
 390 .dijitInputInner {
 391         /* for when an <input> is embedded inside an inline-block <div> with a size and border */
 392         border:0 !important;
 393         vertical-align:middle !important;
 394         background-color:transparent !important;
 395         width:100% !important;
 396         /* IE dislikes horizontal tweaking combined with width:100% so punish everyone for consistency */
 397         padding-left: 0 !important;
 398         padding-right: 0 !important;
 399         margin-left: 0 !important;
 400         margin-right: 0 !important;
 401 }
 402 .dijit_a11y .dijitTextBox INPUT {
 403         margin: 0 !important;
 404 }
 405 .dijitTextBoxError INPUT.dijitValidationInner,
 406 .dijitTextBox INPUT.dijitArrowButtonInner {
 407         /* <input> used to display arrow icon/validation icon, or in arrow character in high contrast mode.
 408          * The css below is a trick to hide the character in non-high-contrast mode
 409          */
 410         text-indent: -1em !important;
 411         direction: ltr !important;
 412         text-align: left !important;
 413         height: auto !important;
 414         #text-indent: 0 !important;
 415         #letter-spacing: -5em !important;
 416         #text-align: right !important;
 417 }
 418 .dj_ie .dijitTextBox INPUT,
 419 .dj_ie INPUT.dijitTextBox {
 420         overflow-y: visible; /* INPUTs need help expanding when padding is added or line-height is adjusted */
 421         line-height: normal; /* strict mode */
 422 }
 423 .dj_ie7 .dijitTextBox INPUT.dijitValidationInner,
 424 .dj_ie7 .dijitTextBox INPUT.dijitArrowButtonInner {
 425         line-height: 86%; /* IE7 problem where the icon is vertically too low w/o this - real input stays at normal */
 426 }
 427 .dj_ie6 .dijitTextBox INPUT,
 428 .dj_ie6 INPUT.dijitTextBox,
 429 .dj_iequirks .dijitTextBox INPUT.dijitValidationInner,
 430 .dj_iequirks .dijitTextBox INPUT.dijitArrowButtonInner,
 431 .dj_iequirks .dijitTextBox INPUT.dijitSpinnerButtonInner,
 432 .dj_iequirks .dijitTextBox INPUT.dijitInputInner,
 433 .dj_iequirks INPUT.dijitTextBox {
 434         line-height: 100%; /* IE7 problem where the icon is vertically way too low w/o this */
 435 }
 436 .dijit_a11y INPUT.dijitValidationInner,
 437 .dijit_a11y INPUT.dijitArrowButtonInner {
 438         /* (in high contrast mode) revert rules from above so character displays */
 439         text-indent: 0 !important;
 440         width: 1em !important;
 441         #text-align: left !important;
 442 }
 443 .dijitTextBoxError .dijitValidationContainer {
 444         display: inline;
 445         cursor: default;
 446 }
 447
 448 /* ComboBox & Spinner */
 449
 450 .dijitSpinner .dijitSpinnerButtonContainer,
 451 .dijitComboBox .dijitArrowButtonContainer {
 452         /* dividing line between input area and up/down button(s) for ComboBox and Spinner */
 453         border-width: 0 0 0 1px !important; /* !important needed due to wayward ".theme .dijitButtonNode" rules */
 454 }
 455 .dijitToolbar .dijitComboBox .dijitArrowButtonContainer {
 456         /* overrides above rule plus mirror-image rule in dijit_rtl.css to have no divider when ComboBox in Toolbar */
 457         border-width: 0 !important;
 458 }
 459
 460 .dijitComboBoxMenu {
 461         /* Drop down menu is implemented as <ul> <li/> <li/> ... but we don't want circles before each item */
 462         list-style-type: none;
 463 }
 464 .dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode {
 465         /* dividing line between input area and up/down button(s) for ComboBox and Spinner */
 466         border-width: 0;
 467 }
 468 .dj_ie .dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode {
 469         clear: both; /* IE workaround */
 470 }
 471
 472 .dj_ie .dijitToolbar .dijitComboBox {
 473         /* make combobox buttons align properly with other buttons in a toolbar */
 474         vertical-align: middle;
 475 }
 476
 477 /* Spinner */
 478
 479 .dijitTextBox .dijitSpinnerButtonContainer {
 480         width: 1em;
 481         position: relative !important;
 482         overflow: hidden;
 483 }
 484 .dijitSpinner .dijitSpinnerButtonInner {
 485         width:1em;
 486         visibility:hidden !important; /* just a sizing element */
 487         overflow-x:hidden;
 488 }
 489 .dijitComboBox .dijitButtonNode,
 490 .dijitSpinnerButtonContainer .dijitButtonNode {
 491         border-width: 0;
 492 }
 493 .dijit_a11y .dijitSpinnerButtonContainer .dijitButtonNode {
 494         border: 0 none !important;
 495 }
 496 .dijit_a11y .dijitTextBox .dijitSpinnerButtonContainer,
 497 .dijit_a11y .dijitSpinner .dijitArrowButtonInner,
 498 .dijit_a11y .dijitSpinnerButtonContainer INPUT {
 499         width: 1em !important;
 500 }
 501 .dijit_a11y .dijitSpinner .dijitArrowButtonInner {
 502         margin: 0 auto !important; /* should auto-center */
 503 }
 504 .dj_ie .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
 505         padding-left: 0.3em !important;
 506         padding-right: 0.3em !important;
 507         margin-left: 0.3em !important;
 508         margin-right: 0.3em !important;
 509         width: 1.4em !important;
 510 }
 511 .dj_ie7 .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
 512         padding-left: 0 !important; /* manually center INPUT: character is .5em and total width = 1em */
 513         padding-right: 0 !important;
 514         width: 1em !important;
 515 }
 516 .dj_ie6 .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
 517         margin-left: 0.1em !important;
 518         margin-right: 0.1em !important;
 519         width: 1em !important;
 520 }
 521 .dj_iequirks .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
 522         margin-left: 0 !important;
 523         margin-right: 0 !important;
 524         width: 2em !important;
 525 }
 526 .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
 527         /* note: .dijitInputLayoutContainer makes this rule override .dijitArrowButton settings
 528          * for dijit.form.Button
 529          */
 530         padding: 0;
 531         position: absolute !important;
 532         right: 0;
 533         float: none;
 534         height: 50%;
 535         width: 100%;
 536         bottom: auto;
 537         left: 0;
 538         right: auto;
 539 }
 540 .dj_iequirks .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
 541         width: auto;
 542 }
 543 .dijit_a11y .dijitSpinnerButtonContainer .dijitArrowButton {
 544         overflow: visible !important;
 545 }
 546 .dijitSpinner .dijitSpinnerButtonContainer .dijitDownArrowButton {
 547         top: 50%;
 548         border-top-width: 1px !important;
 549 }
 550 .dijitSpinner .dijitSpinnerButtonContainer .dijitUpArrowButton {
 551         #bottom: 50%;   /* otherwise (on some machines) top arrow icon too close to splitter border (IE6/7) */
 552         top: 0;
 553 }
 554 .dijitSpinner .dijitArrowButtonInner {
 555         margin: auto;
 556         overflow-x: hidden;
 557         height: 100% !important;
 558 }
 559 .dj_iequirks .dijitSpinner .dijitArrowButtonInner {
 560         height: auto !important;
 561 }
 562 .dijitSpinner .dijitArrowButtonInner .dijitInputField {
 563         -moz-transform: scale(0.5);
 564         -moz-transform-origin: center top;
 565         -webkit-transform: scale(0.5);
 566         -webkit-transform-origin: center top;
 567         -o-transform: scale(0.5);
 568         -o-transform-origin: center top;
 569         transform: scale(0.5);
 570         transform-origin: left top;
 571         padding-top: 0;
 572         padding-bottom: 0;
 573         padding-left: 0 !important;
 574         padding-right: 0 !important;
 575         width: 100%;
 576 }
 577 .dj_ie .dijitSpinner .dijitArrowButtonInner .dijitInputField {
 578         zoom: 50%; /* emulate transform: scale(0.5) */
 579 }
 580 .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButtonInner {
 581         overflow: hidden;
 582 }
 583
 584 .dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
 585         width: 100%;
 586 }
 587 .dj_iequirks .dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
 588         width: 1em; /* matches .dijit_a11y .dijitTextBox .dijitSpinnerButtonContainer rule - 100% is the whole screen width in quirks */
 589 }
 590 .dijitSpinner .dijitArrowButtonInner .dijitInputField {
 591         visibility: hidden;
 592 }
 593 .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
 594         vertical-align:top;
 595         visibility: visible;
 596 }
 597 .dijit_a11y .dijitSpinnerButtonContainer {
 598         width: 1em;
 599 }
 600 .dijit_a11y .dijitSpinnerButtonContainer .dijitButtonNode {
 601         border-width: 1px 0 0 0;
 602         border-style: solid !important;
 603 }
 604
 605 /****
 606                 dijit.form.CheckBox
 607          &
 608                 dijit.form.RadioButton
 609  ****/
 610
 611 .dijitCheckBox,
 612 .dijitRadio,
 613 .dijitCheckBoxInput {
 614         padding: 0;
 615         border: 0;
 616         width: 16px;
 617         height: 16px;
 618         background-position:center center;
 619         background-repeat:no-repeat;
 620         overflow: hidden;
 621 }
 622
 623 .dijitCheckBox INPUT,
 624 .dijitRadio INPUT {
 625         margin: 0;
 626         padding: 0;
 627         display: block;
 628 }
 629
 630 .dijitCheckBoxInput {
 631         /* place the actual input on top, but all-but-invisible */
 632         opacity: 0.01;
 633 }
 634
 635 .dj_ie .dijitCheckBoxInput {
 636         filter: alpha(opacity=0);
 637 }
 638
 639 .dijit_a11y .dijitCheckBox,
 640 .dijit_a11y .dijitRadio {
 641         /* in a11y mode we display the native checkbox (not the icon), so don't restrict the size */
 642         width: auto !important;
 643         height: auto !important;
 644 }
 645 .dijit_a11y .dijitCheckBoxInput {
 646         opacity: 1;
 647         filter: none;
 648         width: auto;
 649         height: auto;
 650 }
 651
 652
 653 /****
 654                 dijit.ProgressBar
 655  ****/
 656
 657 .dijitProgressBarEmpty {
 658         /* outer container and background of the bar that's not finished yet*/
 659         position:relative;overflow:hidden;
 660         border:1px solid black;         /* a11y: border necessary for high-contrast mode */
 661         z-index:0;                      /* establish a stacking context for this progress bar */
 662 }
 663
 664 .dijitProgressBarFull {
 665         /* outer container for background of bar that is finished */
 666         position:absolute;
 667         overflow:hidden;
 668         z-index:-1;
 669         top:0;
 670         width:100%;
 671 }
 672 .dj_ie6 .dijitProgressBarFull {
 673         height:1.6em;
 674 }
 675
 676 .dijitProgressBarTile {
 677         /* inner container for finished portion */
 678         position:absolute;
 679         overflow:hidden;
 680         top:0;
 681         left:0;
 682         bottom:0;
 683         right:0;
 684         margin:0;
 685         padding:0;
 686         width:auto;
 687         height:auto;
 688         background-color:#aaa;
 689         background-attachment: fixed;
 690 }
 691
 692 .dijit_a11y .dijitProgressBarTile {
 693         /* a11y:  The border provides visibility in high-contrast mode */
 694         border-width:2px;
 695         border-style:solid;
 696         background-color:transparent !important;
 697 }
 698
 699 .dj_ie6 .dijitProgressBarTile {
 700         /* width:auto works in IE6 with position:static but not position:absolute */
 701         position:static;
 702         /* height:auto or 100% does not work in IE6 */
 703         height:1.6em;
 704 }
 705
 706 .dijitProgressBarIndeterminate .dijitProgressBarTile {
 707         /* animated gif for 'indeterminate' mode */
 708 }
 709
 710 .dijitProgressBarIndeterminateHighContrastImage {
 711         display:none;
 712 }
 713
 714 .dijit_a11y .dijitProgressBarIndeterminate .dijitProgressBarIndeterminateHighContrastImage {
 715         display:block;
 716         position:absolute;
 717         top:0;
 718         bottom:0;
 719         margin:0;
 720         padding:0;
 721         width:100%;
 722         height:auto;
 723 }
 724
 725 .dijitProgressBarLabel {
 726         display:block;
 727         position:static;
 728         width:100%;
 729         text-align:center;
 730         background-color:transparent !important;
 731 }
 732
 733 /****
 734                 dijit.Tooltip
 735  ****/
 736
 737 .dijitTooltip {
 738         position: absolute;
 739         z-index: 2000;
 740         display: block;
 741         /* make visible but off screen */
 742         left: 0;
 743         top: -10000px;
 744         overflow: visible;
 745 }
 746
 747 .dijitTooltipContainer {
 748         border: solid black 2px;
 749         background: #b8b5b5;
 750         color: black;
 751         font-size: small;
 752 }
 753
 754 .dijitTooltipFocusNode {
 755         padding: 2px 2px 2px 2px;
 756 }
 757
 758 .dijitTooltipConnector {
 759         position: absolute;
 760 }
 761 .dijit_a11y .dijitTooltipConnector {
 762         display: none;  /* won't show b/c it's background-image; hide to avoid border gap */
 763 }
 764
 765 .dijitTooltipData {
 766         display:none;
 767 }
 768
 769 /* Layout widgets. This is essential CSS to make layout work (it isn't "styling" CSS)
 770    make sure that the position:absolute in dijitAlign* overrides other classes */
 771
 772 .dijitLayoutContainer {
 773         position: relative;
 774         display: block;
 775         overflow: hidden;
 776 }
 777
 778 body .dijitAlignTop,
 779 body .dijitAlignBottom,
 780 body .dijitAlignLeft,
 781 body .dijitAlignRight {
 782         position: absolute;
 783         overflow: hidden;
 784 }
 785
 786 body .dijitAlignClient { position: absolute; }
 787
 788 /*
 789  * BorderContaienr
 790  *
 791  * .dijitBorderContainer is a stylized layout where panes have border and margin.
 792  * .dijitBorderContainerNoGutter is a raw layout.
 793  */
 794 .dijitBorderContainer, .dijitBorderContainerNoGutter {
 795         position:relative;
 796         overflow: hidden;
 797 }
 798
 799 .dijitBorderContainerPane,
 800 .dijitBorderContainerNoGutterPane {
 801         position: absolute !important;  /* !important to override position:relative in dijitTabContainer etc. */
 802         z-index: 2;             /* above the splitters so that off-by-one browser errors don't cover up border of pane */
 803 }
 804
 805 .dijitBorderContainer > .dijitTextArea {
 806         /* On Safari, for SimpleTextArea inside a BorderContainer,
 807                 don't want to display the grip to resize */
 808         resize: none;
 809 }
 810
 811 .dijitGutter {
 812         /* gutter is just a place holder for empty space between panes in BorderContainer */
 813         position: absolute;
 814         font-size: 1px;         /* needed by IE6 even though div is empty, otherwise goes to 15px */
 815 }
 816
 817 /* SplitContainer
 818
 819         'V' == container that splits vertically (up/down)
 820         'H' = horizontal (left/right)
 821 */
 822
 823 .dijitSplitter {
 824         position: absolute;
 825         overflow: hidden;
 826         z-index: 10;            /* above the panes so that splitter focus is visible on FF, see #7583*/
 827         background-color: #fff;
 828         border-color: gray;
 829         border-style: solid;
 830         border-width: 0;
 831 }
 832 .dj_ie .dijitSplitter {
 833         z-index: 1;     /* behind the panes so that pane borders aren't obscured see test_Gui.html/[14392] */
 834 }
 835
 836 .dijitSplitterActive {
 837         z-index: 11 !important;
 838 }
 839
 840 .dijitSplitterCover {
 841         position:absolute;
 842         z-index:-1;
 843         top:0;
 844         left:0;
 845         width:100%;
 846         height:100%;
 847 }
 848
 849 .dijitSplitterCoverActive {
 850         z-index:3 !important;
 851 }
 852
 853 /* #6945: stop mouse events */
 854 .dj_ie .dijitSplitterCover {
 855         background: white;
 856         filter: alpha(opacity=0);
 857 }
 858
 859 .dijitSplitterH {
 860         height: 7px;
 861         border-top:1px;
 862         border-bottom:1px;
 863         cursor: ns-resize;
 864 }
 865 .dijitSplitterV {
 866         width: 7px;
 867         border-left:1px;
 868         border-right:1px;
 869         cursor: ew-resize;
 870 }
 871 .dijitSplitContainer {
 872         position: relative;
 873         overflow: hidden;
 874         display: block;
 875 }
 876 .dj_ff3 .dijit_a11y div.dijitSplitter:focus {
 877         outline-style:dotted;
 878         outline-width: 2px;
 879 }
 880
 881 .dijitSplitPane {
 882         position: absolute;
 883 }
 884
 885 .dijitSplitContainerSizerH,
 886 .dijitSplitContainerSizerV {
 887         position:absolute;
 888         font-size: 1px;
 889         cursor: move;
 890         cursor: w-resize;
 891         background-color: ThreeDFace;
 892         border: 1px solid;
 893         border-color: ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight;
 894         margin: 0;
 895 }
 896
 897 .dijitSplitContainerSizerH .thumb, .dijitSplitterV .dijitSplitterThumb {
 898         overflow:hidden;
 899         position:absolute;
 900         top:49%;
 901 }
 902
 903 .dijitSplitContainerSizerV .thumb, .dijitSplitterH .dijitSplitterThumb {
 904         position:absolute;
 905         left:49%;
 906 }
 907
 908 .dijitSplitterShadow,
 909 .dijitSplitContainerVirtualSizerH,
 910 .dijitSplitContainerVirtualSizerV {
 911         font-size: 1px;
 912         background-color: ThreeDShadow;
 913         -moz-opacity: 0.5;
 914         opacity: 0.5;
 915         filter: Alpha(Opacity=50);
 916         margin: 0;
 917 }
 918
 919 .dj_ie .dijitSplitterV, .dijitSplitContainerVirtualSizerH {
 920         cursor: w-resize;
 921 }
 922 .dj_ie .dijitSplitterH, .dijitSplitContainerSizerV, .dijitSplitContainerVirtualSizerV {
 923         cursor: n-resize;
 924 }
 925
 926 .dijit_a11y .dijitSplitterH {
 927         border-top:1px solid #d3d3d3 !important;
 928         border-bottom:1px solid #d3d3d3 !important;
 929 }
 930 .dijit_a11y .dijitSplitterV {
 931         border-left:1px solid #d3d3d3 !important;
 932         border-right:1px solid #d3d3d3 !important;
 933 }
 934
 935 /* ContentPane */
 936
 937 .dijitContentPane {
 938         display: block;
 939         overflow: auto; /* if we don't have this (or overflow:hidden), then Widget.resizeTo() doesn't make sense for ContentPane */
 940 }
 941
 942 .dijitContentPaneSingleChild {
 943         /*
 944          * if the ContentPane holds a single layout widget child which is being sized to match the content pane,
 945          * then the ContentPane should never get a scrollbar (but it does due to browser bugs, see #9449
 946          */
 947         overflow: hidden;
 948 }
 949
 950 /* TitlePane */
 951
 952 .dijitTitlePane {
 953         display: block;
 954         overflow: hidden;
 955 }
 956 .dijitTitlePaneTitle {
 957         cursor: pointer;
 958 }
 959 .dijitFixedOpen, .dijitFixedClosed {
 960         /* TitlePane that cannot be toggled */
 961         cursor: default;
 962 }
 963 .dijitTitlePaneTitle * {
 964         vertical-align: middle;
 965 }
 966 .dijitTitlePane .dijitArrowNodeInner {
 967         /* normally, hide arrow text in favor of icon */
 968         display: none;
 969 }
 970 .dijit_a11y .dijitTitlePane .dijitArrowNodeInner {
 971         /* ... except in a11y mode, then show text arrow */
 972         display:inline !important;
 973         font-family: monospace;         /* because - and + are different widths */
 974 }
 975 .dijit_a11y .dijitTitlePane .dijitArrowNode {
 976         /* ... and hide icon */
 977         display:none;
 978 }
 979
 980 .dj_ie6 .dijitTitlePaneContentOuter,
 981 .dj_ie6 .dijitTitlePane .dijitTitlePaneTitle {
 982         /* force hasLayout to ensure borders etc, show up */
 983         zoom: 1;
 984 }
 985
 986 /* Color Palette
 987  * Sizes designed so that table cell positions match icons in underlying image,
 988  * which appear at 20x20 intervals.
 989  */
 990
 991 .dijitColorPalette {
 992         border: 1px solid #999;
 993         background: #fff;
 994         position: relative;
 995 }
 996
 997 .dijitColorPalette .dijitPaletteTable {
 998         /* Table that holds the palette cells, and overlays image file with color swatches.
 999          * padding/margin to align table with image.
1000          */
1001         padding: 2px 3px 3px 3px;
1002         position: relative;
1003         overflow: hidden;
1004         outline: 0;
1005         border-collapse: separate;
1006 }
1007 .dj_ie6 .dijitColorPalette .dijitPaletteTable,
1008 .dj_ie7 .dijitColorPalette .dijitPaletteTable,
1009 .dj_iequirks .dijitColorPalette .dijitPaletteTable {
1010         /* using padding above so that focus border isn't cutoff on moz/webkit,
1011          * but using margin on IE because padding doesn't seem to work
1012          */
1013         padding: 0;
1014         margin: 2px 3px 3px 3px;
1015 }
1016
1017 .dijitColorPalette .dijitPaletteCell {
1018         /* <td> in the <table> */
1019         font-size: 1px;
1020         vertical-align: middle;
1021         text-align: center;
1022         background: none;
1023 }
1024 .dijitColorPalette .dijitPaletteImg {
1025         /* Called dijitPaletteImg for back-compat, this actually wraps the color swatch with a border and padding */
1026         padding: 1px;           /* white area between gray border and color swatch */
1027         border: 1px solid #999;
1028         margin: 2px 1px;
1029         cursor: default;
1030         font-size: 1px;         /* prevent <span> from getting bigger just to hold a character */
1031 }
1032 .dj_gecko .dijitColorPalette .dijitPaletteImg {
1033         padding-bottom: 0;      /* workaround rendering glitch on FF, it adds an extra pixel at the bottom */
1034 }
1035 .dijitColorPalette .dijitColorPaletteSwatch {
1036         /* the actual part where the color is */
1037         width: 14px;
1038         height: 12px;
1039 }
1040 .dijitPaletteTable td {
1041                 padding: 0;
1042 }
1043 .dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg {
1044         /* hovered color swatch */
1045         border: 1px solid #000;
1046 }
1047
1048 .dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg,
1049 .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg {
1050         border: 2px solid #000;
1051         margin: 1px 0;  /* reduce margin to compensate for increased border */
1052 }
1053
1054
1055 .dijit_a11y .dijitColorPalette .dijitPaletteTable,
1056 .dijit_a11y .dijitColorPalette .dijitPaletteTable * {
1057         /* table cells are to catch events, but the swatches are in the PaletteImg behind the table */
1058         background-color: transparent !important;
1059 }
1060
1061 /* AccordionContainer */
1062
1063 .dijitAccordionContainer {
1064         border:1px solid #b7b7b7;
1065         border-top:0 !important;
1066 }
1067 .dijitAccordionTitle {
1068         cursor: pointer;
1069 }
1070 .dijitAccordionTitleSelected {
1071         cursor: default;
1072 }
1073
1074 /* images off, high-contrast mode styles */
1075 .dijitAccordionTitle .arrowTextUp,
1076 .dijitAccordionTitle .arrowTextDown {
1077         display: none;
1078         font-size: 0.65em;
1079         font-weight: normal !important;
1080 }
1081
1082 .dijit_a11y .dijitAccordionTitle .arrowTextUp,
1083 .dijit_a11y .dijitAccordionTitleSelected .arrowTextDown {
1084         display: inline;
1085 }
1086
1087 .dijit_a11y .dijitAccordionTitleSelected .arrowTextUp {
1088         display: none;
1089 }
1090
1091 .dijitAccordionChildWrapper {
1092         /* this is the node whose height is adjusted */
1093         overflow: hidden;
1094 }
1095
1096 /* Calendar */
1097
1098 .dijitCalendarContainer {
1099         width: auto;    /* in case user has specified a width for the TABLE nodes, see #10553 */
1100 }
1101 .dijitCalendarContainer th, .dijitCalendarContainer td {
1102         padding: 0;
1103         vertical-align: middle;
1104 }
1105
1106 .dijitCalendarNextYear {
1107         margin:0 0 0 0.55em;
1108 }
1109
1110 .dijitCalendarPreviousYear {
1111         margin:0 0.55em 0 0;
1112 }
1113
1114 .dijitCalendarIncrementControl {
1115         vertical-align: middle;
1116 }
1117
1118 .dijitCalendarIncrementControl,
1119 .dijitCalendarDateTemplate,
1120 .dijitCalendarMonthLabel,
1121 .dijitCalendarPreviousYear,
1122 .dijitCalendarNextYear {
1123         cursor: pointer;
1124 }
1125
1126 .dijitCalendarDisabledDate {
1127         color: gray;
1128         text-decoration: line-through;
1129         cursor: default;
1130 }
1131
1132 .dijitSpacer {
1133         /* don't display it, but make it affect the width */
1134         position: relative;
1135         height: 1px;
1136         overflow: hidden;
1137         visibility: hidden;
1138 }
1139
1140 /* Styling for month drop down list */
1141
1142 .dijitCalendarMonthMenu .dijitCalendarMonthLabel {
1143         text-align:center;
1144 }
1145
1146 /* Menu */
1147
1148 .dijitMenu {
1149         border:1px solid black;
1150         background-color:white;
1151 }
1152 .dijitMenuTable {
1153         border-collapse:collapse;
1154         border-width:0;
1155         background-color:white;
1156 }
1157
1158 /* workaround for webkit bug #8427, remove this when it is fixed upstream */
1159 .dj_webkit .dijitMenuTable td[colspan="2"]{
1160         border-right:hidden;
1161 }
1162
1163 .dijitMenuItem {
1164         text-align: left;
1165         white-space: nowrap;
1166         padding:.1em .2em;
1167         cursor:pointer;
1168 }
1169
1170 .dijitMenuPassive .dijitMenuItemHover,
1171 .dijitMenuItemSelected {
1172         /*
1173          * dijitMenuItemHover refers to actual mouse over
1174          * dijitMenuItemSelected is used after a menu has been "activated" by
1175          * clicking it, tabbing into it, or being opened from a parent menu,
1176          * and denotes that the menu item has focus or that focus is on a child
1177          * menu
1178          */
1179         background-color:black;
1180         color:white;
1181 }
1182
1183 .dijitMenuItemIcon, .dijitMenuExpand {
1184         background-repeat: no-repeat;
1185 }
1186
1187 .dijitMenuItemDisabled * {
1188         /* for a disabled menu item, just set it to mostly transparent */
1189         opacity:0.5;
1190         cursor:default;
1191 }
1192 .dj_ie .dijit_a11y .dijitMenuItemDisabled,
1193 .dj_ie .dijit_a11y .dijitMenuItemDisabled td,
1194 .dj_ie .dijitMenuItemDisabled *,
1195 .dj_ie .dijitMenuItemDisabled td {
1196         color:gray !important;
1197         filter: alpha(opacity=35);
1198 }
1199
1200 .dijitMenuItemLabel {
1201         position: relative;
1202         vertical-align: middle;
1203 }
1204
1205 .dijit_a11y .dijitMenuItemSelected {
1206         border: 1px dotted black !important;
1207 }
1208 .dj_ff3 .dijit_a11y .dijitMenuItem td {
1209         padding: none !important;
1210         background:none !important;
1211 }
1212 .dijit_a11y .dijitMenuItemSelected .dijitMenuItemLabel {
1213         border-width: 1px;
1214         border-style: solid;
1215 }
1216 .dj_ie8 .dijit_a11y .dijitMenuItemLabel {
1217         position:static;
1218 }
1219
1220 .dijitMenuExpandA11y {
1221         display: none;
1222 }
1223 .dijit_a11y .dijitMenuExpandA11y {
1224         display: inline;
1225 }
1226
1227 .dijitMenuSeparator td {
1228         border: 0;
1229         padding: 0;
1230 }
1231
1232 /* separator can be two pixels -- set border of either one to 0 to have only one */
1233 .dijitMenuSeparatorTop {
1234         height: 50%;
1235         margin: 0;
1236         margin-top:3px;
1237         font-size: 1px;
1238 }
1239
1240 .dijitMenuSeparatorBottom {
1241         height: 50%;
1242         margin: 0;
1243         margin-bottom:3px;
1244         font-size: 1px;
1245 }
1246
1247 /* the checked menu item */
1248 .dijitCheckedMenuItemIconChar {
1249         vertical-align: middle;
1250         visibility:hidden;
1251 }
1252 .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIconChar {
1253         visibility: visible;
1254 }
1255 .dijit_a11y .dijitCheckedMenuItemIconChar {
1256         display:inline !important;
1257 }
1258 .dijit_a11y .dijitCheckedMenuItemIcon {
1259         display: none;
1260 }
1261 .dj_ie .dijit_a11y .dijitMenuBar .dijitMenuItem {
1262         /* so bottom border of MenuBar appears on IE7 in high-contrast mode */
1263         margin: 0;
1264 }
1265
1266 /* StackContainer */
1267
1268 .dijitStackController .dijitToggleButtonChecked * {
1269         cursor: default;        /* because pressing it has no effect */
1270 }
1271
1272 /* TabContainer */
1273
1274 .dijitTabContainerNoLayout {
1275         width: 100%;    /* otherwise ScrollingTabController goes to 50K pixels wide */
1276 }
1277
1278 .dijitTabContainerBottom-tabs,
1279 .dijitTabContainerTop-tabs,
1280 .dijitTabContainerLeft-tabs,
1281 .dijitTabContainerRight-tabs {
1282         overflow: visible !important;  /* so tabs can cover up border adjacent to container */
1283 }
1284
1285 .dijitTabContainerBottom-container,
1286 .dijitTabContainerTop-container,
1287 .dijitTabContainerLeft-container,
1288 .dijitTabContainerRight-container {
1289         z-index:0;
1290         overflow: hidden;
1291         border: 1px solid black;
1292 }
1293 .nowrapTabStrip {
1294         width: 50000px;
1295         display: block;
1296         position: relative;
1297 }
1298 .dijitTabListWrapper {
1299         overflow: hidden;
1300 }
1301
1302 .dijit_a11y .tabStripButton img {
1303         /* hide the icons (or rather the empty space where they normally appear) because text will appear instead */
1304         display: none;
1305 }
1306
1307 .dijitTabContainerTop-tabs {
1308         border-bottom: 1px solid black;
1309 }
1310 .dijitTabContainerTop-container {
1311         border-top: 0;
1312 }
1313
1314 .dijitTabContainerLeft-tabs {
1315         border-right: 1px solid black;
1316         float: left;
1317 }
1318 .dijitTabContainerLeft-container {
1319         border-left: 0;
1320 }
1321
1322 .dijitTabContainerBottom-tabs {
1323         border-top: 1px solid black;
1324 }
1325 .dijitTabContainerBottom-container {
1326         border-bottom: 0;
1327 }
1328
1329 .dijitTabContainerRight-tabs {
1330         border-left: 1px solid black;
1331         float: left;
1332 }
1333 .dijitTabContainerRight-container {
1334         border-right: 0;
1335 }
1336
1337 DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled {
1338         cursor: auto;
1339 }
1340
1341 .dijitTab {
1342         position:relative;
1343         cursor:pointer;
1344         white-space:nowrap;
1345         z-index:3;
1346 }
1347 .dijitTab * {
1348         /* make tab icons and close icon line up w/text */
1349         vertical-align: middle;
1350 }
1351 .dijitTabChecked {
1352         cursor: default;        /* because clicking will have no effect */
1353 }
1354
1355 .dijitTabContainerTop-tabs .dijitTab {
1356         top: 1px;       /* to overlap border on .dijitTabContainerTop-tabs */
1357 }
1358 .dijitTabContainerBottom-tabs .dijitTab {
1359         top: -1px;      /* to overlap border on .dijitTabContainerBottom-tabs */
1360 }
1361 .dijitTabContainerLeft-tabs .dijitTab {
1362         left: 1px;      /* to overlap border on .dijitTabContainerLeft-tabs */
1363 }
1364 .dijitTabContainerRight-tabs .dijitTab {
1365         left: -1px;     /* to overlap border on .dijitTabContainerRight-tabs */
1366 }
1367
1368
1369 .dijitTabContainerTop-tabs .dijitTab,
1370 .dijitTabContainerBottom-tabs .dijitTab {
1371         /* Inline-block */
1372         display:inline-block;                   /* webkit and FF3 */
1373         #zoom: 1; /* set hasLayout:true to mimic inline-block */
1374         #display:inline; /* don't use .dj_ie since that increases the priority */
1375 }
1376
1377 .dijitTabInnerDiv {
1378         position:relative;
1379 }
1380
1381
1382 .tabStripButton {
1383         z-index: 12;
1384 }
1385
1386 .dijitTabButtonDisabled .tabStripButton {
1387         display: none;
1388 }
1389
1390
1391 .dijitTabCloseButton {
1392         margin-left: 1em;
1393 }
1394
1395 .dijitTabCloseText {
1396         display:none;
1397 }
1398
1399 .dijitTab .tabLabel {
1400         /* make sure tabs w/close button and w/out close button are same height, even w/small (<15px) font.
1401          * assumes <=15px height for close button icon.
1402          */
1403         min-height: 15px;
1404         display: inline-block;
1405 }
1406 .dijitNoIcon {
1407         /* applied to <img>/<span> node when there is no icon specified */
1408         display: none;
1409 }
1410 .dj_ie6 .dijitTab .dijitNoIcon {
1411         /* because min-height (on .tabLabel, above) doesn't work on IE6 */
1412         display: inline;
1413         height: 15px;
1414         width: 1px;
1415 }
1416
1417 /* images off, high-contrast mode styles */
1418
1419 .dijit_a11y .dijitTabCloseButton {
1420         background-image: none !important;
1421         width: auto !important;
1422         height: auto !important;
1423 }
1424
1425 .dijit_a11y .dijitTabCloseText {
1426         display: inline;
1427 }
1428
1429 .dijitTabPane,
1430 .dijitStackContainer-child,
1431 .dijitAccordionContainer-child {
1432         /* children of TabContainer, StackContainer, and AccordionContainer shouldn't have borders
1433          * b/c a border is already there from the TabContainer/StackContainer/AccordionContainer itself.
1434          */
1435     border: none !important;
1436 }
1437
1438 /* InlineEditBox */
1439 .dijitInlineEditBoxDisplayMode {
1440         border: 1px solid transparent;  /* so keyline (border) on hover can appear without screen jump */
1441         cursor: text;
1442 }
1443
1444 .dijit_a11y .dijitInlineEditBoxDisplayMode,
1445 .dj_ie6 .dijitInlineEditBoxDisplayMode {
1446         /* except that IE6 doesn't support transparent borders, nor does high contrast mode */
1447         border: none;
1448 }
1449
1450 .dijitInlineEditBoxDisplayModeHover,
1451 .dijit_a11y .dijitInlineEditBoxDisplayModeHover,
1452 .dj_ie6 .dijitInlineEditBoxDisplayModeHover {
1453         /* An InlineEditBox in view mode (click this to edit the text) */
1454         background-color: #e2ebf2;
1455         border: solid 1px black;
1456 }
1457
1458 .dijitInlineEditBoxDisplayModeDisabled {
1459         cursor: default;
1460 }
1461
1462 /* Tree */
1463 .dijitTree {
1464         overflow: auto; /* for scrollbars when Tree has a height setting, and to prevent wrapping around float elements, see #11491 */
1465 }
1466
1467 .dijitTreeIndent {
1468         /* amount to indent each tree node (relative to parent node) */
1469         width: 19px;
1470 }
1471
1472 .dijitTreeRow, .dijitTreeContent {
1473         white-space: nowrap;
1474 }
1475
1476 .dijitTreeRow img {
1477         /* make the expando and folder icons line up with the label */
1478         vertical-align: middle;
1479 }
1480
1481 .dijitTreeContent {
1482     cursor: default;
1483 }
1484
1485 .dijitExpandoText {
1486         display: none;
1487 }
1488
1489 .dijit_a11y .dijitExpandoText {
1490         display: inline;
1491         padding-left: 10px;
1492         padding-right: 10px;
1493         font-family: monospace;
1494         border-style: solid;
1495         border-width: thin;
1496         cursor: pointer;
1497 }
1498
1499 .dijitTreeLabel {
1500         margin: 0 4px;
1501 }
1502
1503 /* Dialog */
1504
1505 .dijitDialog {
1506         position: absolute;
1507         z-index: 999;
1508         overflow: hidden;       /* override overflow: auto; from ContentPane to make dragging smoother */
1509 }
1510
1511 .dijitDialogTitleBar {
1512         cursor: move;
1513 }
1514 .dijitDialogFixed .dijitDialogTitleBar {
1515         cursor:default;
1516 }
1517 .dijitDialogCloseIcon {
1518         cursor: pointer;
1519 }
1520 .dijitDialogUnderlayWrapper {
1521         position: absolute;
1522         left: 0;
1523         top: 0;
1524         z-index: 998;
1525         display: none;
1526         background: transparent !important;
1527 }
1528
1529 .dijitDialogUnderlay {
1530         background: #eee;
1531         opacity: 0.5;
1532 }
1533
1534 .dj_ie .dijitDialogUnderlay {
1535         filter: alpha(opacity=50);
1536 }
1537
1538 /* images off, high-contrast mode styles */
1539 .dijit_a11y .dijitSpinnerButtonContainer,
1540 .dijit_a11y .dijitDialog {
1541         opacity: 1 !important;
1542         background-color: white !important;
1543 }
1544
1545 .dijitDialog .closeText {
1546         display:none;
1547         /* for the onhover border in high contrast on IE: */
1548         position:absolute;
1549 }
1550
1551 .dijit_a11y .dijitDialog .closeText {
1552         display:inline;
1553 }
1554
1555 /* Slider */
1556
1557 .dijitSliderMoveable {
1558         z-index:99;
1559         position:absolute !important;
1560         display:block;
1561         vertical-align:middle;
1562 }
1563
1564 .dijitSliderMoveableH {
1565         right:0;
1566 }
1567 .dijitSliderMoveableV {
1568         right:50%;
1569 }
1570
1571 .dijit_a11y DIV.dijitSliderImageHandle,
1572 .dijitSliderImageHandle {
1573         margin:0;
1574         padding:0;
1575         position:relative !important;
1576         border:8px solid gray;
1577         width:0;
1578         height:0;
1579         cursor: pointer;
1580 }
1581 .dj_iequirks .dijit_a11y .dijitSliderImageHandle {
1582         font-size: 0;
1583 }
1584 .dj_ie7 .dijitSliderImageHandle {
1585         overflow: hidden; /* IE7 workaround to make slider handle VISIBLE in non-a11y mode */
1586 }
1587 .dj_ie7 .dijit_a11y .dijitSliderImageHandle {
1588         overflow: visible; /* IE7 workaround to make slider handle VISIBLE in a11y mode */
1589 }
1590 .dijit_a11y .dijitSliderFocused .dijitSliderImageHandle {
1591         border:4px solid #000;
1592         height:8px;
1593         width:8px;
1594 }
1595
1596 .dijitSliderImageHandleV {
1597         top:-8px;
1598         right: -50%;
1599 }
1600
1601 .dijitSliderImageHandleH {
1602         left:50%;
1603         top:-5px;
1604         vertical-align:top;
1605 }
1606
1607 .dijitSliderBar {
1608         border-style:solid;
1609         border-color:black;
1610         cursor: pointer;
1611 }
1612
1613 .dijitSliderBarContainerV {
1614         position:relative;
1615         height:100%;
1616         z-index:1;
1617 }
1618
1619 .dijitSliderBarContainerH {
1620         position:relative;
1621         z-index:1;
1622 }
1623
1624 .dijitSliderBarH {
1625         height:4px;
1626         border-width:1px 0;
1627 }
1628
1629 .dijitSliderBarV {
1630         width:4px;
1631         border-width:0 1px;
1632 }
1633
1634 .dijitSliderProgressBar {
1635         background-color:red;
1636         z-index:1;
1637 }
1638
1639 .dijitSliderProgressBarV {
1640         position:static !important;
1641         height:0;
1642         vertical-align:top;
1643         text-align:left;
1644 }
1645
1646 .dijitSliderProgressBarH {
1647         position:absolute !important;
1648         width:0;
1649         vertical-align:middle;
1650         overflow:visible;
1651 }
1652
1653 .dijitSliderRemainingBar {
1654         overflow:hidden;
1655         background-color:transparent;
1656         z-index:1;
1657 }
1658
1659 .dijitSliderRemainingBarV {
1660         height:100%;
1661         text-align:left;
1662 }
1663
1664 .dijitSliderRemainingBarH {
1665         width:100% !important;
1666 }
1667
1668 /* the slider bumper is the space consumed by the slider handle when it hangs over an edge */
1669 .dijitSliderBumper {
1670         overflow:hidden;
1671         z-index:1;
1672 }
1673
1674 .dijitSliderBumperV {
1675         width:4px;
1676         height:8px;
1677         border-width:0 1px;
1678 }
1679
1680 .dijitSliderBumperH {
1681         width:8px;
1682         height:4px;
1683         border-width:1px 0;
1684 }
1685
1686 .dijitSliderBottomBumper,
1687 .dijitSliderLeftBumper {
1688         background-color:red;
1689 }
1690
1691 .dijitSliderTopBumper,
1692 .dijitSliderRightBumper {
1693         background-color:transparent;
1694 }
1695
1696 .dijitSliderDecoration {
1697         text-align:center;
1698 }
1699
1700 .dijitSliderDecorationC,
1701 .dijitSliderDecorationV {
1702         position: relative; /* needed for IE+quirks+RTL+vertical (rendering bug) but add everywhere for custom styling consistency but this messes up IE horizontal sliders */
1703 }
1704
1705 .dijitSliderDecorationH {
1706         width: 100%;
1707 }
1708
1709 .dijitSliderDecorationV {
1710         height: 100%;
1711 }
1712
1713 .dijitSliderButton {
1714         font-family:monospace;
1715         margin:0;
1716         padding:0;
1717         display:block;
1718 }
1719
1720 .dijit_a11y .dijitSliderButtonInner {
1721         visibility:visible !important;
1722 }
1723
1724 .dijitSliderButtonContainer {
1725         text-align:center;
1726         height:0;       /* ??? */
1727 }
1728 .dijitSliderButtonContainer * {
1729         cursor: pointer;
1730 }
1731
1732 .dijitSlider .dijitButtonNode {
1733         padding:0;
1734         display:block;
1735 }
1736
1737 .dijitRuleContainer {
1738         position:relative;
1739         overflow:visible;
1740 }
1741
1742 .dijitRuleContainerV {
1743         height:100%;
1744         line-height:0;
1745         float:left;
1746         text-align:left;
1747 }
1748
1749 .dj_opera .dijitRuleContainerV {
1750         line-height:2%;
1751 }
1752
1753 .dj_ie .dijitRuleContainerV {
1754         line-height:normal;
1755 }
1756
1757 .dj_gecko .dijitRuleContainerV {
1758         margin:0 0 1px 0; /* mozilla bug workaround for float:left,height:100% block elements */
1759 }
1760
1761 .dijitRuleMark {
1762         position:absolute;
1763         border:1px solid black;
1764         line-height:0;
1765         height:100%;
1766 }
1767
1768 .dijitRuleMarkH {
1769         width:0;
1770         border-top-width:0 !important;
1771         border-bottom-width:0 !important;
1772         border-left-width:0 !important;
1773 }
1774
1775 .dijitRuleLabelContainer {
1776         position:absolute;
1777 }
1778
1779 .dijitRuleLabelContainerH {
1780         text-align:center;
1781         display:inline-block;
1782 }
1783
1784 .dijitRuleLabelH {
1785         position:relative;
1786         left:-50%;
1787 }
1788
1789 .dijitRuleLabelV {
1790         /* so that long labels don't overflow to multiple rows, or overwrite slider itself */
1791         text-overflow: ellipsis;
1792         white-space: nowrap;
1793         overflow: hidden;
1794 }
1795
1796 .dijitRuleMarkV {
1797         height:0;
1798         border-right-width:0 !important;
1799         border-bottom-width:0 !important;
1800         border-left-width:0 !important;
1801         width:100%;
1802         left:0;
1803 }
1804
1805 .dj_ie .dijitRuleLabelContainerV {
1806         margin-top:-.55em;
1807 }
1808
1809 .dijit_a11y .dijitSliderReadOnly,
1810 .dijit_a11y .dijitSliderDisabled {
1811         opacity:0.6;
1812 }
1813 .dj_ie .dijit_a11y .dijitSliderReadOnly .dijitSliderBar,
1814 .dj_ie .dijit_a11y .dijitSliderDisabled .dijitSliderBar {
1815         filter: alpha(opacity=40);
1816 }
1817
1818 /* + and - Slider buttons: override theme settings to display icons */
1819 .dijit_a11y .dijitSlider .dijitSliderButtonContainer DIV {
1820         font-family: monospace; /* otherwise hyphen is larger and more vertically centered */
1821         font-size: 1em;
1822         line-height: 1em;
1823         height: auto;
1824         width: auto;
1825         margin: 0 4px;
1826 }
1827
1828 /* Icon-only buttons (often in toolbars) still display the text in high-contrast mode */
1829 .dijit_a11y .dijitButtonContents .dijitButtonText,
1830 .dijit_a11y .dijitTab .tabLabel {
1831         display: inline !important;
1832 }
1833
1834 /* TextArea, SimpleTextArea */
1835 .dijitTextArea {
1836         width:100%;
1837         overflow-y: auto;       /* w/out this IE's SimpleTextArea goes to overflow: scroll */
1838 }
1839 .dijitTextArea[cols] {
1840         width:auto; /* SimpleTextArea cols */
1841 }
1842 .dj_ie .dijitTextAreaCols {
1843         width:auto;
1844 }
1845
1846 .dijitExpandingTextArea {
1847         /* for auto exanding textarea (called Textarea currently, rename for 2.0) don't want to display the grip to resize */
1848         resize: none;
1849 }
1850
1851
1852 /* Toolbar
1853  * Note that other toolbar rules (for objects in toolbars) are scattered throughout this file.
1854  */
1855
1856 .dijitToolbarSeparator {
1857         height: 18px;
1858         width: 5px;
1859         padding: 0 1px;
1860         margin: 0;
1861 }
1862
1863 /* Editor */
1864 .dijitIEFixedToolbar {
1865         position:absolute;
1866         /* top:0; */
1867         top: expression(eval((document.documentElement||document.body).scrollTop));
1868 }
1869
1870 .dijitEditor {
1871         display: block; /* prevents glitch on FF with InlineEditBox, see #8404 */
1872 }
1873
1874 .dijitEditorDisabled,
1875 .dijitEditorReadOnly {
1876         color: gray;
1877 }
1878
1879 /* TimePicker */
1880
1881 .dijitTimePickerItemInner {
1882         text-align:center;
1883         border:0;
1884         padding:2px 8px 2px 8px;
1885 }
1886
1887 .dijitTimePickerTick,
1888 .dijitTimePickerMarker {
1889         border-bottom:1px solid gray;
1890 }
1891
1892 .dijitTimePicker .dijitDownArrowButton {
1893         border-top: none !important;
1894 }
1895
1896 .dijitTimePickerTick {
1897         color:#CCC;
1898 }
1899
1900 .dijitTimePickerMarker {
1901         color:black;
1902         background-color:#CCC;
1903 }
1904
1905 .dijitTimePickerItemSelected {
1906         font-weight:bold;
1907         color:#333;
1908         background-color:#b7cdee;
1909 }
1910
1911 .dijitTimePickerItemHover {
1912         background-color:gray;
1913         color:white;
1914         cursor:pointer;
1915 }
1916 .dijit_a11y .dijitTimePickerItemSelected .dijitTimePickerItemInner {
1917         border: solid 4px black;
1918 }
1919 .dijit_a11y .dijitTimePickerItemHover .dijitTimePickerItemInner {
1920         border: dashed 4px black;
1921 }
1922
1923
1924 .dijitToggleButtonIconChar {
1925         /* character (instead of icon) to show that ToggleButton is checked */
1926         display:none !important;
1927 }
1928 .dijit_a11y .dijitToggleButton .dijitToggleButtonIconChar {
1929         display:inline !important;
1930         visibility:hidden;
1931 }
1932 .dj_ie6 .dijitToggleButtonIconChar, .dj_ie6 .tabStripButton .dijitButtonText {
1933         font-family: "Arial Unicode MS";        /* otherwise the a11y character (checkmark, arrow, etc.) appears as a box */
1934 }
1935 .dijit_a11y .dijitToggleButtonChecked .dijitToggleButtonIconChar {
1936         display: inline !important; /* In high contrast mode, display the check symbol */
1937         visibility:visible !important;
1938 }
1939
1940 .dijitArrowButtonChar {
1941         display:none !important;
1942 }
1943 .dijit_a11y .dijitArrowButtonChar {
1944         display:inline !important;
1945 }
1946
1947 .dijit_a11y .dijitDropDownButton .dijitArrowButtonInner,
1948 .dijit_a11y .dijitComboButton .dijitArrowButtonInner {
1949         display:none !important;
1950 }
1951
1952 /* Select */
1953 .dijitSelect {
1954         margin: 0.2em;
1955         border-collapse: collapse;
1956 }
1957 .dj_ie .dijitSelect,
1958 .dj_ie7 .dijitSelect,
1959 .dj_iequirks .dijitSelect {
1960         vertical-align: middle; /* Set this back for what we hack in dijit inline */
1961 }
1962 .dj_ie8 .dijitSelect .dijitButtonText {
1963         vertical-align: top;
1964 }
1965 .dijitToolbar .dijitSelect {
1966         margin: 0;
1967 }
1968 .dj_webkit .dijitToolbar .dijitSelect {
1969         padding-left: 0.3em;
1970 }
1971 .dijit_a11y .dijitSelectDisabled .dijitButtonNode {
1972         border-style: outset!important;
1973         border-width: medium!important;
1974         border-color: #999 !important;
1975         color:#999 !important;
1976 }
1977 .dijitSelect .dijitButtonContents {
1978         padding: 0;
1979         background: transparent none;
1980         white-space: nowrap;
1981         text-align: left;
1982 }
1983 .dijitSelectFixedWidth .dijitButtonContents {
1984         width: 100%;
1985 }
1986
1987 .dijitSelectMenu .dijitMenuItemIcon {
1988         /* avoid blank area in left side of menu (since we have no icons) */
1989         display:none;
1990 }
1991 .dj_ie6 .dijitSelectMenu .dijitMenuItemLabel,
1992 .dj_ie7 .dijitSelectMenu .dijitMenuItemLabel {
1993         /* Set back to static due to bug in ie6/ie7 - See Bug #9651 */
1994         position: static;
1995 }
1996
1997 /* Fix the baseline of our label (for multi-size font elements) */
1998 .dijitSelectLabel *
1999 {
2000         vertical-align: baseline;
2001 }
2002
2003 /* Styling for the currently-selected option (rich text can mess this up) */
2004 .dijitSelectSelectedOption * {
2005         font-weight: bold;
2006 }
2007
2008 /* Fix the styling of the dropdown menu to be more combobox-like */
2009 .dijitSelectMenu {
2010         border-width: 1px;
2011 }
2012
2013 /* Style the different areas of the button to look like a "real" dropdown */
2014 /* Remove margins on the sub-table */
2015 .dijitSelectMenu .dijitMenuTable {
2016         margin: 0;
2017         background-color: transparent;
2018 }
2019
2020 /* Used in cases, such as FullScreen plugin, when we need to force stuff to static positioning. */
2021 .dijitForceStatic {
2022         position: static !important;
2023 }
2024
2025 /**** Disabled cursor *****/
2026 .dijitReadOnly *,
2027 .dijitDisabled *,
2028 .dijitReadOnly,
2029 .dijitDisabled {
2030         /* a region the user would be able to click on, but it's disabled */
2031         cursor: default;
2032 }