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