/* Essential styles that themes can inherit. In other words, works but doesn't look great. */ /**** GENERIC PIECES ****/ .dijitReset { /* Use this style to null out padding, margin, border in your template elements so that page specific styles don't break them. - Use in all TABLE, TR and TD tags. */ margin:0; border:0; padding:0; line-height:normal; font: inherit; color: inherit; } .dijit_a11y .dijitReset { -moz-appearance: none; /* remove predefined high-contrast styling in Firefox */ } .dijitInline { /* To inline block elements. Similar to InlineBox below, but this has fewer side-effects in Moz. Also, apparently works on a DIV as well as a FIELDSET. */ display:inline-block; /* webkit and FF3 */ #zoom: 1; /* set hasLayout:true to mimic inline-block */ #display:inline; /* don't use .dj_ie since that increases the priority */ border:0; padding:0; vertical-align:middle; #vertical-align: auto; /* makes TextBox,Button line up w/native counterparts on IE6 */ } .dijitHidden { /* To hide unselected panes in StackContainer etc. */ display: none !important; } .dijitVisible { /* To show selected pane in StackContainer etc. */ display: block !important; /* override user's display:none setting via style setting or indirectly via class */ position: relative; /* to support setting width/height, see #2033 */ } .dijitInputContainer { /* for positioning of placeHolder */ #zoom: 1; overflow: hidden; float: none !important; /* needed by FF to squeeze the INPUT in */ position: relative; vertical-align: middle; #display: inline; } .dj_ie INPUT.dijitTextBox, .dj_ie .dijitTextBox INPUT { font-size: 100%; } .dijitTextBox .dijitSpinnerButtonContainer, .dijitTextBox .dijitArrowButtonContainer, .dijitTextBox .dijitValidationContainer { float: right; text-align: center; } .dijitTextBox INPUT.dijitInputField { /* override unreasonable user styling of buttons and icons */ padding-left: 0 !important; padding-right: 0 !important; } .dijitTextBox .dijitValidationContainer { display: none; } .dijitInlineTable { /* To inline tables with a given width set (otherwise, use dijitInline above) */ display:inline-table; display:inline-block; /* webkit and FF3 */ #zoom: 1; /* set hasLayout:true to mimic inline-block */ #display:inline; /* don't use .dj_ie since that increases the priority */ box-sizing: content-box; -moz-box-sizing: content-box; border:0; padding:0; } .dijitTeeny { font-size:1px; line-height:1px; } .dijitOffScreen { position: absolute; left: 50%; top: -10000px; } /* * Popup items have a wrapper div (dijitPopup) * with the real popup inside, and maybe an iframe too */ .dijitPopup { position: absolute; background-color: transparent; margin: 0; border: 0; padding: 0; } .dijitPositionOnly { /* Null out all position-related properties */ padding: 0 !important; border: 0 !important; background-color: transparent !important; background-image: none !important; height: auto !important; width: auto !important; } .dijitNonPositionOnly { /* Null position-related properties */ float: none !important; position: static !important; margin: 0 0 0 0 !important; vertical-align: middle !important; } .dijitBackgroundIframe { /* iframe used to prevent problems with PDF or other applets overlaying menus etc */ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; border: 0; padding: 0; margin: 0; } .dijitDisplayNone { /* hide something. Use this as a class rather than element.style so another class can override */ display:none !important; } .dijitContainer { /* for all layout containers */ overflow: hidden; /* need on IE so something can be reduced in size, and so scrollbars aren't temporarily displayed when resizing */ } /**** A11Y ****/ .dijit_a11y .dijitIcon, .dijit_a11y DIV.dijitArrowButtonInner, /* is this only for Spinner? if so, it should be deleted */ .dijit_a11y SPAN.dijitArrowButtonInner, .dijit_a11y IMG.dijitArrowButtonInner, .dijit_a11y .dijitCalendarIncrementControl, .dijit_a11y .dijitTreeExpando { /* hide icon nodes in high contrast mode; when necessary they will be replaced by character equivalents * exception for INPUT.dijitArrowButtonInner, because the icon and character are controlled by the same node */ display: none; } .dijitSpinner DIV.dijitArrowButtonInner { display: block; /* override previous rule */ } .dijit_a11y .dijitA11ySideArrow { display: inline !important; /* display text instead */ cursor: pointer; } /* * Since we can't use shading in a11y mode, and since the underline indicates today's date, * use a border to show the selected date. * Avoid screen jitter when switching selected date by compensating for the selected node's * border w/padding on other nodes. */ .dijit_a11y .dijitCalendarDateLabel { padding: 1px; } .dijit_a11y .dijitCalendarSelectedDate .dijitCalendarDateLabel { border-style: dotted !important; border-width: 1px; padding: 0; } .dijit_a11y .dijitCalendarDateTemplate { padding-bottom: 0.1em !important; /* otherwise bottom border doesn't appear on IE */ } .dijit_a11y .dijitButtonNode { border: black outset medium !important; /* In claro, hovering a toolbar button reduces padding and adds a border. * Not needed in a11y mode since Toolbar buttons always have a border. */ padding: 0 !important; } .dijit_a11y .dijitTextBoxReadOnly .dijitInputField, .dijit_a11y .dijitTextBoxReadOnly .dijitButtonNode { border-style: outset!important; border-width: medium!important; border-color: #999 !important; color:#999 !important; } /* button inner contents - labels, icons etc. */ .dijitButtonNode * { vertical-align: middle; } .dijitButtonNode .dijitArrowButtonInner { /* the arrow icon node */ background: no-repeat center; width: 12px; height: 12px; direction: ltr; /* needed by IE/RTL */ } /**** 3-element borders: ( dijitLeft + dijitStretch + dijitRight ) These were added for rounded corners on dijit.form.*Button but never actually used. ****/ .dijitLeft { /* Left part of a 3-element border */ background-position:left top; background-repeat:no-repeat; } .dijitStretch { /* Middle (stretchy) part of a 3-element border */ white-space:nowrap; /* MOW: move somewhere else */ background-repeat:repeat-x; } .dijitRight { /* Right part of a 3-element border */ #display:inline; /* IE7 sizes to outer size w/o this */ background-position:right top; background-repeat:no-repeat; } /* Buttons */ .dijitToggleButton, .dijitButton, .dijitDropDownButton, .dijitComboButton { /* outside of button */ margin: 0.2em; vertical-align: middle; } .dijitButtonContents { display: block; /* to make focus border rectangular */ } td.dijitButtonContents { display: table-cell; /* but don't affect Select, ComboButton */ } .dijitButtonNode IMG { /* make text and images line up cleanly */ vertical-align:middle; /*margin-bottom:.2em;*/ } .dijitToolbar .dijitComboButton { /* because Toolbar only draws a border around the hovered thing */ border-collapse: separate; } .dijitToolbar .dijitToggleButton, .dijitToolbar .dijitButton, .dijitToolbar .dijitDropDownButton, .dijitToolbar .dijitComboButton { margin: 0; } .dijitToolbar .dijitButtonContents { /* just because it used to be this way */ padding: 1px 2px; } .dj_webkit .dijitToolbar .dijitDropDownButton { padding-left: 0.3em; } .dj_gecko .dijitToolbar .dijitButtonNode::-moz-focus-inner { padding:0; } .dijitButtonNode { /* Node that is acting as a button -- may or may not be a BUTTON element */ border:1px solid gray; margin:0; line-height:normal; vertical-align: middle; #vertical-align: auto; text-align:center; white-space: nowrap; } .dj_webkit .dijitSpinner .dijitSpinnerButtonContainer { /* apparent WebKit bug where messing with the font coupled with line-height:normal X 2 (dijitReset & dijitButtonNode) can be different than just a single line-height:normal, visible in InlineEditBox/Spinner */ line-height:inherit; } .dijitTextBox .dijitButtonNode { border-width: 0; } .dijitButtonNode, .dijitButtonNode * { cursor: pointer; } .dj_ie .dijitButtonNode { /* ensure hasLayout */ zoom: 1; } .dj_ie .dijitButtonNode button { /* disgusting hack to get rid of spurious padding around button elements on IE. MSIE is truly the web's boat anchor. */ overflow: visible; } DIV.dijitArrowButton { float: right; } /****** TextBox related. Everything that has an *******/ .dijitTextBox { border: solid black 1px; #overflow: hidden; /* #6027, #6067 */ width: 15em; /* need to set default size on outer node since inner nodes say and . user can override */ vertical-align: middle; } .dijitTextBoxReadOnly, .dijitTextBoxDisabled { color: gray; } .dj_webkit .dijitTextBoxDisabled INPUT { color: #eee; /* because WebKit lightens disabled input/textarea no matter what color you specify */ } .dj_webkit TEXTAREA.dijitTextAreaDisabled { color: #333; /* because WebKit lightens disabled input/textarea no matter what color you specify */ } .dj_gecko .dijitTextBoxReadOnly INPUT.dijitInputField, /* disable arrow and validation presentation INPUTs but allow real INPUT for text selection */ .dj_gecko .dijitTextBoxDisabled INPUT { -moz-user-input: none; /* prevent focus of disabled textbox buttons */ } .dijitPlaceHolder { /* hint text that appears in a textbox until user starts typing */ color: #AAAAAA; font-style: italic; position: absolute; top: 0; left: 0; #filter: ""; /* make this showup in IE6 after the rendering of the widget */ } .dijitTimeTextBox { width: 8em; } /* rules for webkit to deal with fuzzy blue focus border */ .dijitTextBox INPUT:focus { outline: none; /* blue fuzzy line looks wrong on combobox or something w/validation icon showing */ } .dijitTextBoxFocused { outline: auto 5px -webkit-focus-ring-color; } .dijitTextBox INPUT { float: left; /* needed by IE to remove secret margin */ } .dijitInputInner { /* for when an is embedded inside an inline-block
with a size and border */ border:0 !important; vertical-align:middle !important; background-color:transparent !important; width:100% !important; /* IE dislikes horizontal tweaking combined with width:100% so punish everyone for consistency */ padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .dijit_a11y .dijitTextBox INPUT { margin: 0 !important; } .dijitTextBoxError INPUT.dijitValidationInner, .dijitTextBox INPUT.dijitArrowButtonInner { /* used to display arrow icon/validation icon, or in arrow character in high contrast mode. * The css below is a trick to hide the character in non-high-contrast mode */ text-indent: -1em !important; direction: ltr !important; text-align: left !important; height: auto !important; #text-indent: 0 !important; #letter-spacing: -5em !important; #text-align: right !important; } .dj_ie .dijitTextBox INPUT, .dj_ie INPUT.dijitTextBox { overflow-y: visible; /* INPUTs need help expanding when padding is added or line-height is adjusted */ line-height: normal; /* strict mode */ } .dj_ie7 .dijitTextBox INPUT.dijitValidationInner, .dj_ie7 .dijitTextBox INPUT.dijitArrowButtonInner { line-height: 86%; /* IE7 problem where the icon is vertically too low w/o this - real input stays at normal */ } .dj_ie6 .dijitTextBox INPUT, .dj_ie6 INPUT.dijitTextBox, .dj_iequirks .dijitTextBox INPUT.dijitValidationInner, .dj_iequirks .dijitTextBox INPUT.dijitArrowButtonInner, .dj_iequirks .dijitTextBox INPUT.dijitSpinnerButtonInner, .dj_iequirks .dijitTextBox INPUT.dijitInputInner, .dj_iequirks INPUT.dijitTextBox { line-height: 100%; /* IE7 problem where the icon is vertically way too low w/o this */ } .dijit_a11y INPUT.dijitValidationInner, .dijit_a11y INPUT.dijitArrowButtonInner { /* (in high contrast mode) revert rules from above so character displays */ text-indent: 0 !important; width: 1em !important; #text-align: left !important; } .dijitTextBoxError .dijitValidationContainer { display: inline; cursor: default; } /* ComboBox & Spinner */ .dijitSpinner .dijitSpinnerButtonContainer, .dijitComboBox .dijitArrowButtonContainer { /* dividing line between input area and up/down button(s) for ComboBox and Spinner */ border-width: 0 0 0 1px !important; /* !important needed due to wayward ".theme .dijitButtonNode" rules */ } .dijitToolbar .dijitComboBox .dijitArrowButtonContainer { /* overrides above rule plus mirror-image rule in dijit_rtl.css to have no divider when ComboBox in Toolbar */ border-width: 0 !important; } .dijitComboBoxMenu { /* Drop down menu is implemented as