/* 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; font: inherit; line-height:normal; color: inherit; } .dj_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 */ } table.dijitInline { /* To inline tables with a given width set */ display:inline-table; box-sizing: content-box; -moz-box-sizing: content-box; } .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 */ } .dj_ie6 .dijitComboBox .dijitInputContainer, .dijitInputContainer { /* for positioning of placeHolder */ #zoom: 1; overflow: hidden; float: none !important; /* needed to squeeze the INPUT in */ position: relative; } .dj_ie7 .dijitInputContainer { float: left !important; /* needed by IE to squeeze the INPUT in */ clear: left; display: inline-block !important; /* to fix wrong text alignment in rtl text box */ } .dj_ie .dijitSelect input, .dj_ie input.dijitTextBox, .dj_ie .dijitTextBox input { font-size: 100%; } .dijitSelect .dijitButtonText { float: left; vertical-align: top; } TABLE.dijitSelect { padding: 0 !important; /* messes up border alignment */ } .dijitTextBox .dijitSpinnerButtonContainer, .dijitTextBox .dijitArrowButtonContainer, .dijitValidationTextBox .dijitValidationContainer { float: right; text-align: center; } .dijitSelect input.dijitInputField, .dijitTextBox input.dijitInputField { /* override unreasonable user styling of buttons and icons */ padding-left: 0 !important; padding-right: 0 !important; } .dijitValidationTextBox .dijitValidationContainer { display: none; } .dijitTeeny { font-size:1px; line-height:1px; } .dijitOffScreen { /* these class attributes should supercede any inline positioning style */ position: absolute !important; left: 50% !important; top: -10000px !important; } /* * 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 ****/ .dj_a11y .dijitIcon, .dj_a11y div.dijitArrowButtonInner, /* is this only for Spinner? if so, it should be deleted */ .dj_a11y span.dijitArrowButtonInner, .dj_a11y img.dijitArrowButtonInner, .dj_a11y .dijitCalendarIncrementControl, .dj_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 */ } .dj_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. */ .dj_a11y .dijitCalendarDateLabel { padding: 1px; border: 0px !important; } .dj_a11y .dijitCalendarSelectedDate .dijitCalendarDateLabel { border-style: solid !important; border-width: 1px !important; padding: 0; } .dj_a11y .dijitCalendarDateTemplate { padding-bottom: 0.1em !important; /* otherwise bottom border doesn't appear on IE */ border: 0px !important; } .dj_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; } .dj_a11y .dijitArrowButton { padding: 0 !important; } .dj_a11y .dijitButtonContents { margin: 0.15em; /* Margin needed to make focus outline visible */ } .dj_a11y .dijitTextBoxReadOnly .dijitInputField, .dj_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; } .dijitSelect .dijitArrowButtonInner, .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 */ .dj_gecko .dj_a11y .dijitButtonDisabled .dijitButtonNode { opacity: 0.5; } .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; } .dijitSelect { border:1px solid gray; } .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; } .dijitSelect, .dijitSelect *, .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_safari .dijitTextBoxDisabled input { color: #B0B0B0; /* because Safari lightens disabled input/textarea no matter what color you specify */ } .dj_safari textarea.dijitTextAreaDisabled { color: #333; /* because Safari 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: 5px -webkit-focus-ring-color; } .dijitSelect input, .dijitTextBox input { float: left; /* needed by IE to remove secret margin */ } .dj_ie6 input.dijitTextBox, .dj_ie6 .dijitTextBox input { float: none; } .dijitInputInner { /* for when an is embedded inside an inline-block
with a size and border */ border:0 !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; } .dj_a11y .dijitTextBox input { margin: 0 !important; } .dijitValidationTextBoxError input.dijitValidationInner, .dijitSelect input, .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: -2em !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 .dijitSelect input, .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 */ } .dijitSelect .dijitSelectLabel span { line-height: 100%; } .dj_ie .dijitSelect .dijitSelectLabel { line-height: normal; } .dj_ie6 .dijitSelect .dijitSelectLabel, .dj_ie7 .dijitSelect .dijitSelectLabel, .dj_ie8 .dijitSelect .dijitSelectLabel, .dj_iequirks .dijitSelect .dijitSelectLabel, .dijitSelect td, .dj_ie6 .dijitSelect input, .dj_iequirks .dijitSelect input, .dj_ie6 .dijitSelect .dijitValidationContainer, .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 */ } .dj_a11y input.dijitValidationInner, .dj_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; color: black !important; } .dijitValidationTextBoxError .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 */ } .dj_a11y .dijitSelect .dijitArrowButtonContainer, .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