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