/* The index.htm file loads three CSS files, in this order: ext-all.css ~ This is the CSS portion of the Ext JS “cross-browser JavaScript library for building rich internet applications,” which Author-it used to build its Web Help template solution. The quote is from the Ext JS website: http://www.extjs.com/ stylesheet.css ~ The Author-it software generates this file each time you publish your book to Web Help. It controls the appearance of topic content. webhelp.css ~ This and webhelp.js comprise the Author-it portion of the Web Help solution. Author-it’s webhelp.js scripts make calls to Ext JS’s ext-all.js library, while Author-it’s webhelp.css declarations apply UI touches not already covered by (or needing adjustment from) the declarations found in Ext JS’s ext-all.css. The original Author-it webhelp.css file also overrode some declarations typically found in stylesheet.css, for example, to make Heading 1 blend into the JavaScript-generated application framework by rendering it as white text on a blue background, seamlessly fitted to the bottom edge of the breadcrumb bar. (Our UI mod does not include that touch.) At STEI, for our web outputs other than those generated using these Web Help templates, we discard stylesheet.css and apply our own custom stylesheet. When we invent a new style in Author-it, we revise our stylesheet to contain the corresponding new style name. We find this easier than manipulating styles within Author-it to determine what appears in stylesheet.css. In the case of these Web Help templates, to keep our solution more portable for use by others, we have retained the link in index.htm to the stylesheet generated during publication. We apply our custom styles by other means easily removed, as explained next. Our UI mod to Author-it’s Web Help solution entails substantial changes to both the webhelp.css styles from Author-it and the ext-all.css styles from Ext JS. To centralize control over these changes, and apply our custom stylesheet to topic content, we have: ~ commented out portions of ext-all.css, copied those portions into this webhelp.css file, consolidated them with declarations in the original webhelp.css file, reordered them for clarity, and customized them to achieve our UI mod ~ appended the entire contents of our STEI custom stylesheet, which overrides everything in stylesheet.css because this file is linked later in the index.htm file than stylesheet.css We have organized the UI mod block to try to make clear the relationship between each declaration and the UI, moving roughly in order of appearance or observational order. Our appended custom stylesheet is just that, our custom stylesheet ~ it lacks explanatory comments because the declarations are obvious. You may easily remove, replace, or modify our topic styles without changing the UI. Removing or commenting out the material after the UI declarations block will enable the stylesheet.css declarations to apply. We have attempted to keep a clean, readable appearance despite the volume and detail of documentary comments, but that’s tough to do. We have favored extensive comments to help enable others to develop their own UI mods. It is important to note that since we have made non-trivial changes to both Author-it’s and Ext JS’s CSS -and- JavaScript, neither organization can reasonably be expected to support this mod. If you have questions about this file set, contact buck1965@gmail.com. Within the constraints of my job function, I will do my best to answer any questions. David Buck ~ buck1965@gmail.com ~ June 2010 */ /* ============ Beginning of UI Block (material from ext-all.css and the original webhelp.css, consolidated and customized ============ */ /* Our primary UI mod relies on rendering most interface elements transparent to reveal a page background image. The bulk of customizations relate to this approach. A few notes: Five UI pieces collectively display the various borders that visually partition the UI. To make it possible to set the color for all of these at once, rather than have to browse through the entire UI block to find the five pieces, we have removed -just- the border-color property from each of the five, then declared -just- the border-color property for all five of them in a single line near the end of this UI block. Right after the border colors, we have similiarly grouped link appearances. After the link appearances, at the end of this UI block, a relatively brief commented-out block contains the limited number of redeclarations required to build on the primary UI mod by overriding transparency in favor of pastel colored panels, achieving a wholly different UI mod, as described in accompanying comments. Removing the enclosing comment marks will enable this alternative “pastelica” UI. */ /* standard default stuff */ html, body, form { width: 100%; height: 100%; overflow: hidden; } p { margin: 5px; } /* We don’t know what this does so we have left it alone. */ #start-panel ul, #start-panel ol { padding-left: 20px; } /* We assign a page background image. You would comment this out if you use the pastelica block, although it would not show in the UI if you did not. */ /* body { background-image: url(images/background.gif); } */ /* We added three transparent divs absolutely positioned at top right, bottom right, and bottom left to place images that augment the design, yet stay out of the way as the user resizes the browser. The images use transparency so the div blocks are not apparent. The z-indices ensure the images display beneath all content. To use these divs, replace the image specifications and resize each div accordingly. You do not have to use these, and you would not use them with the “pastelica” UI. To disable these, set the display to none. For convenience this can be done by uncommenting a block in the pastelica section at the bottom of this UI block. */ div#floater_right_top { position:absolute; right: 0px; top: 0px; width: 150px; height: 150px; background-image:url(images/floater_right_top.png); z-index: -10001; display: none; } div#floater_right_bottom { position:absolute; right: 0px; bottom: 0px; width: 150px; height: 150px; background-image:url(images/floater_right_bottom.png); z-index: -10002; display: none; } div#floater_left_bottom { position:absolute; left: 0px; bottom: 0px; width: 150px; height: 150px; background-image:url(images/floater_left_bottom.png); z-index: -10003; display: none; } /* We are using our own loading indicator, loading.gif, in place of the original loading_blue.gif. */ .loading { text-align: center; vertical-align: middle; font: normal 11pt calibri, verdana, arial, helvetica, sans-serif; height: 200px; background-image: url(images/loading.gif); background-repeat: no-repeat; background-position: center; padding-top: 70px; } /* We removed style declarations contrary to our use of a page background image. Plus, this is where we set the header height to whatever height will accommodate what we choose to display in the header ~ typically the book title and the toolbar, which in the Author-it original file set would sit below the header, not on top of it as in this mod (see more notes below). */ div#header { padding: 10px; height: 90px; } /* Author-it provided an id tag focused solely on the book title text that appears in the header. We set the text appearance to our liking. */ #headerTitle { font-family: arial, verdana, helvetica, sans-serif; font-weight: bold; font-size: 24px; color: #424542; } /* We removed numerous toolbar aspects we do not need given our design. */ .x-toolbar { display:block; padding:2px; } /* We added this declaration to reposition the main toolbar on top of the header region. This is a central element of our design mod. In the original file set, the webhelp.js file would set the height of the header -region- (a box element not accessible to us) to be equal to the heights of its two contained items, the header div (height set above) and the toolbar (height determined by button size and browser case). We found this caused issues with other browsers when we used larger buttons, as not all browsers would render the toolbar the same ~ forcing us to use a toolbar height in webhelp.js large enough to accommodate the most outlying browser case. That wasted a small amount of vertical screen space. In addition, we disliked wasting all the space to the right of the book title in cases where we do not display the home, up, and down buttons ~ for that case, it would make sense for the other, right-justified toolbar buttons to appear to the right of the book title, not below it and to the right. By setting the toolbar on top of the header, we eliminated the requirement that webhelp.js sum the height of the header and the toolbar to size the containing box element that is the header region (and we edited webhelp.js accordingly). We just need to ensure that, given our choice of buttons displayed on the toolbar and our choice of button size (larger buttons in this file set), that we set the header height (div#header, above) tall enough to accommodate everything. To replicate the original Author-it layout, you would just set the header height sufficiently tall to have room for the toolbar to appear below the title of the book given your applied title formatting (#headerTitle, above) and keeping in mind that non-IE browsers will render the toolbar 2px taller than IE, and Firefox on the Mac, 5 px taller. Thus you would leave the up-positioning at 45px here. What happens? The box containing the header is set in webhelp.js to whatever height you set the header to above (div#header) so when the toolbar is rendered in, it will be invisible ~ except we bump it up 45 pixels from where it would have been rendered, pushing it into the territory of the header, and thus visible. Since 45px is the most outlying case for toolbar height, for most browsers there will be a bit of space left below the toolbar buttons, before the top edge of the TOC panel and the topic content; for Firefox on the Mac, a bit less space (3 px). For a book where we do not plan to display the home, up, and down buttons that in the original file set appear below the book title, we would bump the position here up by much more than 45 px, placing the remaining buttons (email page, email feedback, etc) alongside the title, right-justified. Yes, the buttons will overlay the title for very small browser windows, but only in rare desktop cases would this be a problem. In many design cases we opt to render the book title graphically, making it part of the page background image. In those cases, we set the book title (#headerTitle, above) to display: none, and position the toolbar wherever it makes the most sense design-wise. Finally, in the original file set you could set the header not to show, in which case webhelp.js would just set the header region height to the height of the toolbar and render the toolbar at the very top of the page. In this file set, we have changed the code in webhelp.js in a way that precludes that choice. If you want the toolbar to display at the top of the page, with no book title, just set the header height (div#header, above) to 45 px, set the book title (#headerTitle, above) to display: none, and set the position of the toolbar here to 45px. */ .x-toolbar { position: relative; bottom: 45px; } /* The same classes that apply to the main toolbar, which we positioned up from its usual location, also apply to the TOC toolbar, where said repositioning breaks the design. Here we added a relative positioning style to the TOC toolbar, specifying top 0px, ensuring that the TOC toolbar will not be affected by our repositioning of the main toolbar. We also made the TOC toolbar transparent with this declaration. */ .tree-node-toolbar-no-bg-image { background-color: transparent; background-image: none; position: relative; top: 0px; } /* We changed the toolbar button icon height and width setting to accommodate our 32 x 32 pixel icons. */ .x-btn-icon .x-btn-center .x-btn-text { background-position:center; background-repeat:no-repeat; height: 36px; width: 36px; cursor: pointer; white-space: nowrap; padding: 0; } /* These are the main toolbar buttons. We use our own images here. */ button.homeIcon { background-image: url(images/home.png); } button.upIcon { background-image: url(images/up.png); } button.downIcon { background-image: url(images/down.png); } button.EditIcon { background-image: url(images/edit.png); } button.EditLiveIcon { background-image: url(images/edit_live.png); } button.emailThisPageIcon { background-image: url(images/email.png); } button.sendFeedbackIcon { background-image: url(images/feedback.png); } button.printIcon { background-image: url(images/printer.png); } button.searchIcon { background-image: url(images/search.png); } /* These are the buttons on the TOC toolbar, for expanding and collapsing the TOC. We use our own images. */ button.expand { background-image: url(images/expand_all.png); } button.collapse { background-image: url(images/collapse_all.png); } /* We changed the border color and background color for the main toolbar’s search box, while it is inactive. */ .x-form-text, textarea.x-form-field { padding: 1px 3px; background: #ffffff; border: 1px solid #737573; } /* We changed the border color and background color for the main toolbar’s search box, while it is active. That is, when the user clicks into the search text box, its border and background change color. */ .x-form-focus, textarea.x-form-focus { border: 1px solid #737573; background: #FFFFFF; } /* We manipulated this declaration to set the padding and positioning of the Search “Match partial words” checkbox text to better align with the checkbox. The font declarations here have effect only because we force them with !important ~ apparently declarations elsewhere which we have not been able to identify have precedence over .checkbox-text, even though .checkbox-text is directly applied to the text “March partial words” in the webhelp.js code that creates said text. */ .checkbox-text { font-family: calibri, verdana, arial, helvetica, sans-serif !important; font-size: 11pt !important; padding-left: 4px; position: relative; bottom: 1px; } /* We adjusted the following block, which implements the mouse-over and mouse-click button backgrounds, as required for our larger buttons. The file stei-note.txt in \extjs\resources\images\default\toolbar explains the technical basis for these declarations, plus lists all file set changes related to the change in button size. */ .x-toolbar .x-btn-over .x-btn-menu-arrow-wrap .x-btn-center button { background-position: 0 -47px; } .x-toolbar .x-btn-over .x-btn-left { background: url(extjs/resources/images/default/toolbar/tb-btn-sprite.png) no-repeat 0 0; } .x-toolbar .x-btn-over .x-btn-right { background: url(extjs/resources/images/default/toolbar/tb-btn-sprite.png) no-repeat 0 -36px; } .x-toolbar .x-btn-over .x-btn-center { background: url(extjs/resources/images/default/toolbar/tb-btn-sprite.png) repeat-x 0 -72px; } .x-toolbar .x-btn-click .x-btn-left, .x-toolbar .x-btn-pressed .x-btn-left, .x-toolbar .x-btn-menu-active .x-btn-left { background: url(extjs/resources/images/default/toolbar/tb-btn-sprite.png) no-repeat 0 -108px; } .x-toolbar .x-btn-click .x-btn-right, .x-toolbar .x-btn-pressed .x-btn-right, .x-toolbar .x-btn-menu-active .x-btn-right { background: url(extjs/resources/images/default/toolbar/tb-btn-sprite.png) no-repeat 0 -144px; } .x-toolbar .x-btn-click .x-btn-center, .x-toolbar .x-btn-pressed .x-btn-center, .x-toolbar .x-btn-menu-active .x-btn-center { background: url(extjs/resources/images/default/toolbar/tb-btn-sprite.png) repeat-x 0 -180px; } /* We left this apparently toolbar-related style alone. It seems not to have any effect on our design. We do not know to what .ytb-text applies. */ .x-toolbar .ytb-text { padding: 0px; } /* We made the breadcrumbs bar transparent by eliminating the specification of a repeating background image. We made it borderless by reducing the border to 0 px. We also set the font size up a notch and specified our preferred family. Finally, we changed the font color. */ .x-panel-header { overflow: hidden; zoom: 1; color: #424542; font: normal 11pt calibri, verdana, arial, helvetica, sans-serif; padding: 5px 3px 4px 5px; border: 0px solid #FF0000; line-height: 15px; background: transparent; } /* This sets the appearance of text in the TOC title bar (“Contents”), Index title bar (“Index”), and Search Results title bar (“Search Results”). */ .x-panel-header-text { font-family: arial, verdana, helvetica, sans-serif; font-weight: bold; font-size: 16px; color: #94B208; } /* We made the lower border on the TOC toolbar (if it is displayed) disappear by setting the border-bottom to 0 px. */ .x-panel-noborder .x-panel-tbar-noborder .x-toolbar { border-width: 0; border-bottom: 0px solid #99bbe8; } /* We applied a top border to the TOC (sidebar) pane by removing the border-top: 0 setting in this declaration; made the background transparent for the topic content area ~ the TOC pane stays white without the additional change [next] to the .x-tab-panel-body declaration. */ .x-panel-body { border: 1px solid; overflow: hidden; background: transparent; position: relative; } /* We changed the background to transparent so that the TOC has no white background. */ .x-tab-panel-body { border: 1px solid #8db2e3; background: transparent; } /* We set the background-color of this element to transparent, which revealed a solid white contained element that had previously been concealed. Other declarations rendered that element transparent as well, but this one is still required to see through to the page background image. */ .x-tree .x-panel-body { background-color: transparent; padding: 5px; } /* We changed the following line to specify our preferred font sequence and size for the TOC. */ .x-tree-node {color: #424542; font: normal 12px verdana, arial, helvetica, sans-serif; white-space: nowrap; } /* We changed the background-color setting for the TOC selected entry and removed the bold setting. We also changed the color of the mouseover highlight. */ .x-tree-node .x-tree-selected { background-color: transparent; font-weight: bold;} .x-tree-node .x-tree-node-over { background-color: transparent; text-decoration: underline; } /* We changed the following line to set the width to 0 px, so that the TOC icons (which we don’t want to use) will not show. */ .x-tree-node-collapsed .x-tree-node-icon, .x-tree-node-expanded .x-tree-node-icon, .x-tree-node-leaf .x-tree-node-icon { border: 0 none; height: 18px; margin: 0; padding: 0; vertical-align: top; width: 0px; background-position: center; background-repeat: no-repeat; } /* With the immediately preceding declaration we suppressed the appearance of the book and topic icons declared in the next three lines. We have left the declarations, and included the image files in our mod, to avoid any error conditions. */ .x-tree-node-collapsed .x-tree-node-icon { background-image: url(images/book_blue.png); } .x-tree-node-expanded .x-tree-node-icon { background-image: url(images/book_open.png); } .x-tree-node-leaf .x-tree-node-icon { background-image: url(images/leaf.gif); } /* We manipulated this block to change from triangular TOC tree node images to the plus and minus images. It appeared the original block was a framework for building a Windows Explorer styled tree navigation, in which there are +/- icons with dotted lines, including the dotted-line constructions needed for mid-list and end-list items. However, in the original declarations, the framework had not been used to full capacity, with (for example) -elbow-minus and -elbow-end-minus being set to the same image (the second image in the arrows.gif icon conglomerate, a little black triangle). In the files that accompany the Author-it templates, most of the component images for an Explorer styled tree are present, but not used. We added the missing files, and edited this block to use a plus-and-minus system, including with dotted lines. We supplied the colored *.mouseover.gif versions of the + and - images. */ .x-tree-arrows .x-tree-elbow { background: transparent url(extjs/resources/images/default/tree/elbow.gif) no-repeat; } .x-tree-arrows .x-tree-elbow-plus { background: transparent url(extjs/resources/images/default/tree/elbow-plus.gif) no-repeat; } .x-tree-arrows .x-tree-elbow-minus { background: transparent url(extjs/resources/images/default/tree/elbow-minus.gif) no-repeat; } .x-tree-arrows .x-tree-elbow-end { background: transparent url(extjs/resources/images/default/tree/elbow-end.gif) no-repeat; } .x-tree-arrows .x-tree-elbow-end-plus { background: transparent url(extjs/resources/images/default/tree/elbow-end-plus.gif) no-repeat; } .x-tree-arrows .x-tree-elbow-end-minus { background: transparent url(extjs/resources/images/default/tree/elbow-end-minus.gif) no-repeat; } .x-tree-arrows .x-tree-elbow-line { background: transparent url(extjs/resources/images/default/tree/elbow-line.gif) no-repeat; } .x-tree-arrows .x-tree-ec-over .x-tree-elbow-plus { background: transparent url(extjs/resources/images/default/tree/elbow-plus-mouseover.gif) no-repeat; } .x-tree-arrows .x-tree-ec-over .x-tree-elbow-minus { background: transparent url(extjs/resources/images/default/tree/elbow-minus-mouseover.gif) no-repeat; } .x-tree-arrows .x-tree-ec-over .x-tree-elbow-end-plus { background: transparent url(extjs/resources/images/default/tree/elbow-end-plus-mouseover.gif) no-repeat; } .x-tree-arrows .x-tree-ec-over .x-tree-elbow-end-minus { background: transparent url(extjs/resources/images/default/tree/elbow-end-minus-mouseover.gif) no-repeat; } .x-tree-elbow-plus, .x-tree-elbow-minus, .x-tree-elbow-end-plus, .x-tree-elbow-end-minus { cursor: pointer; } /* If you prefer not to see the TOC dotted lines, comment out the block above and uncomment the following block. Notice the additional declaration at the end of this block (not found in the original file set). This provides a bit more vertical line space ~ easier on the eyes. That’s not possible when the dotted lines show, because it makes the dotted line connectors non-contiguous vertically. In this no-dots implementation, the elbow-plus-nl.gif and elbow-end-plus-nl.gif files contain the same image, as without dots they look the same. Ditto elbow-minus.nl.gif and and elbow-end-minus-nl.gif. We have declared the distinct file names anyway to support clarity of form. */ /* .x-tree-arrows .x-tree-elbow { background: transparent; } .x-tree-arrows .x-tree-elbow-plus { background: transparent url(extjs/resources/images/default/tree/elbow-plus-nl.gif) no-repeat; } .x-tree-arrows .x-tree-elbow-minus { background: transparent url(extjs/resources/images/default/tree/elbow-minus-nl.gif) no-repeat; } .x-tree-arrows .x-tree-elbow-end { background: transparent; } .x-tree-arrows .x-tree-elbow-end-plus { background: transparent url(extjs/resources/images/default/tree/elbow-end-plus-nl.gif) no-repeat; } .x-tree-arrows .x-tree-elbow-end-minus { background: transparent url(extjs/resources/images/default/tree/elbow-end-minus-nl.gif) no-repeat; } .x-tree-arrows .x-tree-elbow-line { background: transparent; } .x-tree-arrows .x-tree-ec-over .x-tree-elbow-plus { background: transparent url(extjs/resources/images/default/tree/elbow-plus-nl-mouseover.gif) no-repeat; } .x-tree-arrows .x-tree-ec-over .x-tree-elbow-minus { background: transparent url(extjs/resources/images/default/tree/elbow-minus-nl-mouseover.gif) no-repeat; } .x-tree-arrows .x-tree-ec-over .x-tree-elbow-end-plus { background: transparent url(extjs/resources/images/default/tree/elbow-end-plus-nl-mouseover.gif) no-repeat; } .x-tree-arrows .x-tree-ec-over .x-tree-elbow-end-minus { background: transparent url(extjs/resources/images/default/tree/elbow-end-minus-nl-mouseover.gif) no-repeat; } .x-tree-elbow-plus, .x-tree-elbow-minus, .x-tree-elbow-end-plus, .x-tree-elbow-end-minus { cursor pointer; } .x-tree-node-collapsed .x-tree-node-icon,.x-tree-node-expanded .x-tree-node-icon,.x-tree-node-leaf .x-tree-node-icon { height: 20px; } */ /* We made the Index panel background transparent and adjusted the p.indexatoz margins. */ #index { background-color: transparent; width: 90%; } #index p.indexatoz { background: #F7F3F7; margin: 3px; font-size: 9pt; color: #39C0FF; } .index1, .index2, .index3 { font-family: verdana, arial, helvetica, sans-serif; font-weight: bold; font-size: 9pt; color: #620090; padding-top: 3pt; padding-left: 5pt; } td.indexheading { font-size: 10pt; padding-bottom: 2px; padding-left: 4px; } td.indexlink { padding-left: 5px; } /* We made the Search Results panel background-colors transparent, which revealed previously non-apparent elements also needing to be declared transparent (included in next set of declarations). */ .searchResultsPanel { background-color: transparent !important; } /* We applied transparency and increased the font-size to make search results more like our TOC entries. With these padding settings, all the browsers display the proper indent, though apparently not all for the correct reasons. IE disregards this, yet has suitable indents in the search panel. Without this, other browsers lack a suitable indent. It works out the same on all tested browsers (Safari, Opera, Chrome, Firefox, IE on Windows; same except IE, on OS X). We’ll take it. */ .searchResults { font: 11px verdana, arial, helvetica, sans-serif; background-color: transparent !important; padding-left: 4px; padding-right: 4px; } /* We keep the text smaller for the xx results found in xx seconds text. */ #searchResultsPanel { font: normal 10px verdana, arial, helvetica, sans-serif; background-color: transparent !important; } /* We changed the search results hit highlight color. */ .searchword1 { background-color: #FFFFFF; } /* We changed the background here to be transparent. This controls one of the layers of the TOC, Index, and Search tab area. */ .x-tab-panel-header, .x-tab-panel-footer { background: transparent; border: 1px solid; overflow: hidden; zoom: 1; } /* Necessary for proper layout per original Author-it template design. Do not change. */ .x-tab-panel-footer { padding-top: 2px; } /* We changed the background here to be transparent. This controls one of the layers of the TOC, Index, and Search tab area. */ ul.x-tab-strip-bottom { padding-bottom: 1px; background: transparent; border-top: 1px solid; border-bottom: 0 none; } /* We changed the color. This is the color for tab labels. */ .x-tab-strip span.x-tab-strip-text { font: normal 11px verdana, arial, helvetica; color: #424542; white-space: nowrap; cursor: pointer; padding: 4px 0; } /* We changed the color. This is the hover color for tab labels. */ .x-tab-strip-over span.x-tab-strip-text { color: #000000; } /* We changed the color. This is the text color for the active tab label. */ .x-tab-strip-active span.x-tab-strip-text { cursor: default; color: #000000; font-weight: bold; } /* The original code references a file named toc_collapsed.png that appears at the left side of the page when the TOC / Index / Search Results panel has been collapsed. We have opted to have nothing (no image representing the collapsed “sidebar” panel). If you specify an image here, it needs to be narrow enough to fit in the thin collapsed-TOC column. */ .x-layout-collapsed-west { } /* We changed the border around the collapsed TOC bar, setting it to be transparent because we don’t want it. Then we repurposed it, setting it to be 3 px thick on the left and 30 px thick on the top, thereby manipulating the position of the un-collapse button displayed when the TOC (sidebar) panel is hidden to the left. */ .x-layout-collapsed { position: absolute; left: -10000px; top: -10000px; visibility: hidden; width: 20px; height: 20px; overflow: hidden; border-left: 3px solid transparent; border-top :30px solid transparent; z-index: 20; } /* Simply by commenting out the following declaration in ext-all.css, we removed the highlight effect and hand pointer triggered when the mouse moves over the collapsed TOC (sidebar) panel. This supports our removal of the slide-out-but-don’t-stay-out (auto-hide) feature. We originally removed that feature as user-confusing, plus, search results would appear with auto-hide on, which was in our view a real mess. Later, with transparency implemented, we had no choice but to disable auto-hide because a transparent sidebar overlaying topic content would create a visual scramble. For consistency of form in this file, and to document the declaration in ext-all.css to which we refer, we have included an empty declaration here. */ .x-layout-collapsed-over{} /* Simply by commenting out the following declaration in ext-all.css, we make transparent (or contribute to making transparent) the screen areas representing the collapsed TOC panel, the breadcrumbs bar, and the divider bar between the TOC and content area. For consistency of form in this file, and to document the declaration in ext-all.css to which we refer, we have included an empty declaration here. */ .x-border-layout-ct{ } /* We did not change these declarations, which we speculate relate to the main topic content panel. They don’t seem to affect our design. */ div#start-panel { padding: 10px; } .aboveheading { display: none; } .belowheading { display: none; } div#highlightColor { background-color: #DAE3FE; } /* We made the footer background transparent, set its height, increased the font size, and set our preferred font families. */ .footer { background-color: transparent; width: 100%; height: 60px; border-top-width: 1px; border-top-style: solid; font: normal 11px verdana, arial, helvetica, sans-serif; padding: 10px; } /* Set the color of the borders that partion the UI visually */ .x-panel-body, .x-tab-panel-header, .x-tab-panel-footer, ul.x-tab-strip-bottom, .footer { border-color: #DEDBDE; } /* Set link properties */ /* all links get pointer by default */ a { cursor: pointer; } /* links in general (topic area) */ a:link { color: #424542; text-decoration: underline; } a:hover { color: #000000; text-decoration: underline; } a:active { color: #424542; background: #ffffff; } a:visited { color: #424542; text-decoration: none; } /* remove the underline from links in the TOC */ .x-tree-node a:link { color: #424542; text-decoration: none; } /* breadcrumbs */ .x-panel-header a { color: #94B208; text-decoration: none; } /* breadcrumbs hover */ .breadcrumb:hover { color: #94B208; } /* linked letters in the jump-to-letter */ #index p.indexatoz a { color: #424542; text-decoration: none; padding: 4px; } /* block in the index */ /* letter heading targets of those */ td.indexheading a { color: #424542 !important; cursor: default; } /* We set the cursor not to be a pointer because these index letter */ /* jump-to-letter links */ /* links do not go anywhere. It’s mysterious to us why they have */ /* rendered as links in the first place. */ /* index links */ .indexlink a { font: 11px verdana, arial, helvetica, sans-serif; color: #424542; text-decoration: none; } /* index links hover */ .indexlink a:hover { color: #424542; background-color: transparent; text-decoration: underline; } /* search results */ #searchResults a { font: bold 11px verdana, arial, helvetica, sans-serif; color: #424542; text-decoration: underline; } /* search results hover */ #searchResults a:hover { color: #424542; } /* top-of-page link */ .topOfPage { font: normal 11px verdana, arial, helvetica, sans-serif; padding-left: 10px; padding-bottom: 5px; color: #94B208; } /* top-of-page link hover */ .topOfPage a:hover {color: #94B208 !important; } /* This marks the end of style declarations supporting the primary, transparency-based UI mod. To apply the set of redeclarations that implement our secondary UI mod, which we call Pastelica, uncomment each entry in the second column of the following block, and set the various colors to your preference. */ /* begin pastelica block ~ to apply, uncomment the following three-line block to make the embellishment divs invisible; then uncomment the “second column” in the following table of sorts, which describes the styles on the left and actually declares them on the right */ /* div#floater_right_top { display: none; } div#floater_right_bottom { display: none; } div#floater_left_bottom { display: none; } */ /* header area */ /* div#header { border: 0px solid #424542; background: #E7FF9F; } */ /* toolbar */ /* .x-toolbar { border: 0px solid #424542; background: transparent; } */ /* TOC toolbar */ /* .tree-node-toolbar-no-bg-image { border: 0px solid #424542; background: #DEECFD; } */ /* title bar for Contents | Index | Search Results */ /* .x-panel-header { border: solid #8DB2E3; border-width: 1px 1px 0px 1px; background: #DEECFD;} */ /* and breadcrumbs bar */ /* box underneath TOC | Index | Search Results */ /* .x-panel-body { border: solid #8DB2E3; border-width: 0px 1px 1px 1px; background: #DEECFD; } */ /* -and- topic area; color must be set to match */ /* Search Results because under IE8 a thin strip of */ /* this box shows under Search Results title bar */ /* sets the color of the topic panel; this class is */ /* .underneath {background: #FFFAFA; } */ /* applied in index.htm to the containing table */ /* TOC panel (visible layer) */ /* .x-tree .x-panel-body { border: 0px solid #424542; background: #DEECFD; } */ /* index panel */ /* #index { border: 0px solid #424542; background: #DEECFD; } */ /* search results panel lowermost */ /* .searchResultsPanel { border: 0px solid #424542; background: #DEECFD !important; } */ /* search results panel x results found in x secs */ /* #searchResultsPanel { border: 0px solid #424542; background: #DEECFD !important; } */ /* search results panel under results links layer */ /* #searchResults { border: 0px solid #424542; background: #DEECFD !important; } */ /* search results panel ~ results links layer */ /* .searchResults { border: 0px solid #424542; background: #DEECFD !important;} */ /* dividing strip between TOC and content panels */ /* .x-border-layout-ct { background: #E7FF9F !important; } */ /* this is actually a show-through to entire page */ /* canvas underneath everything else */ /* footer */ /* .footer { border: 0px solid #424542; background: #FFE4E1; } */ /* next box on top of lowermost box under TOC */ /* .x-tab-panel-footer { border: 0px solid #424542 !important; background: #DEECFD; } */ /* [a tiny strip of this shows above the tabs] */ /* strip on top of LAST box, all but covering it */ /* ul.x-tab-strip-bottom { border-top: 1px solid #8DB2E3; border-bottom: 0 none; background: #FFF1A1; } */ /* [sets edge from which tabs descend] */ /* end pastelica block */ /* ============ End of UI Block ============ */ /* Custom TomTom styles start here. This overrides any styles set in Author-it and is based on the web guidelines document available here http://intouch.tomtomgroup.com/About/TomTomBrand/WebGuidelines/Documents/VSGOM_Basic_Elements_v3.3.pdf */ /* Body styles */ .bodytext , .bodytextaddendum , .donottranslate-bodytext {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 6px; margin-bottom: 6px; margin-left: 0pt; margin-right: 0pt; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .bodytextcentered {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 6px; margin-bottom: 6px; margin-left: 0pt; margin-right: 0pt; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: center; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .bodytextright {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 6px; margin-bottom: 6px; margin-left: 0pt; margin-right: 0pt; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: right; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .imagecentred {display: block; font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 6px; margin-bottom: 6px; margin-left: 0cm; margin-right: 0cm; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: center; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .image {display: block; font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 6px; margin-bottom: 6px; margin-left: 0cm; margin-right: 0cm; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } /* List styles */ ol.listnumber, ol.listnumberaddendum {list-style-type: Decimal; list-style-position: outside; margin-top: 6px; margin-bottom: 6px; font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-size: 12px; color: #424542; line-height: 20px; } ol.listnumber2 {list-style-type: Decimal; list-style-position: outside; margin-top: 6px; margin-bottom: 6px; font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-size: 12px; color: #424542; line-height: 20px; } li.listnumber, li.listnumberaddendum {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 6px; margin-bottom: 6px; margin-left: 0pt; margin-right: 0pt; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } li.listnumber2 {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 6px; margin-bottom: 6px; margin-left: 0pt; margin-right: 0pt; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } ul.listbullet, ul.listbulletaddendum {list-style-type: Disc; list-style-image: none; list-style-position: outside; margin-top: 6px; margin-bottom: 6px; font-size: 12px; } li.listbullet, li.listbulletaddendum {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 6px; margin-bottom: 6px; margin-left: 0pt; margin-right: 0pt; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } ul.listbullet2 {list-style-type: Disc; list-style-image: none; list-style-position: outside; margin-top: 6px; margin-bottom: 6px; } li.listbullet2 {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 6px; margin-bottom: 6px; margin-left: 0pt; margin-right: 0pt; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .listcontinue {display: block; font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 6px; margin-bottom: 6px; margin-left: 0cm; margin-right: 0cm; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .listcontinue2 {display: block; font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 6px; margin-bottom: 6px; margin-left: 0cm; margin-right: 0cm; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } ol.step {list-style-type: Decimal; list-style-position: outside; margin-top: 6px; margin-bottom: 6px; } li.step {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 6px; margin-bottom: 6px; margin-left: 0%; margin-right: 0%; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .listimage {display: block; font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 6px; margin-bottom: 6px; margin-left: 0cm; margin-right: 0cm; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .listimagecentred {display: block; font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 6px; margin-bottom: 6px; margin-left: 0cm; margin-right: 0cm; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: center; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .listtip {display: block; font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: #FCDFFF; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 0px; margin-bottom: 0px; margin-left: 0pt; margin-right: 0pt; padding-top: 6px; padding-bottom: 6px; padding-left: 6px; padding-right: 6px; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .listimportant {display: block; font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: #FFFFC6; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 0px; margin-bottom: 0px; margin-left: 0pt; margin-right: 0pt; padding-top: 6px; padding-bottom: 6px; padding-left: 6px; padding-right: 6px; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .listnote {display: block; font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: #EEEEFF; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 0px; margin-bottom: 0px; margin-left: 0pt; margin-right: 0pt; padding-top: 6px; padding-bottom: 6px; padding-left: 6px; padding-right: 6px; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .listimportant2 {display: block; font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: #FFFFC6; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 0px; margin-bottom: 0px; margin-left: 0pt; margin-right: 0pt; padding-top: 6px; padding-bottom: 6px; padding-left: 6px; padding-right: 6px; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .listnote2 {display: block; font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: #BBBBFF; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 0px; margin-bottom: 0px; margin-left: 0pt; margin-right: 0pt; padding-top: 6px; padding-bottom: 6px; padding-left: 6px; padding-right: 6px; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .listtip2 {display: block; font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: #FCDFFF; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 0px; margin-bottom: 0px; margin-left: 0pt; margin-right: 0pt; padding-top: 6px; padding-bottom: 6px; padding-left: 6px; padding-right: 6px; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } /* Note, tip, important blocks styles */ .important {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: #FFFFC6; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; padding-top: 4px; padding-bottom: 4px; padding-left: 6px; padding-right: 6px; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .note {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: #EEEEFF; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; padding-top: 4px; padding-bottom: 4px; padding-left: 6px; padding-right: 6px; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .tip {display: block; font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: #FCDFFF; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; padding-top: 4px; padding-bottom: 4px; padding-left: 6px; padding-right: 6px; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } /* Character (inline) styles */ .bold {display: inline; font-family: inherit; font-weight: bold; color: inherit; background-color: inherit; vertical-align: baseline; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; } .userinterface {display: inline; font-weight: bold; color: inherit; background-color: inherit; vertical-align: baseline; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; } .superscript {display: inline; font-size: 8px; color: inherit; background-color: inherit; vertical-align: super; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; } .underline {display: inline; text-decoration:underline font-family: inherit; font-weight: inherit; color: inherit; background-color: inherit; vertical-align: baseline; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; } .codephrase {display: inline; font-family: "Courier New", verdana, arial, helvetica, sans-serif; font-size: 11px; color: #424542; background-color: inherit; vertical-align: baseline; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; } .filepath {display: inline; font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; color: #424542; background-color: inherit; vertical-align: baseline; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; } .italic {display: inline; font-style: italic; color: inherit; background-color: inherit; vertical-align: baseline; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; } .subscript {display: inline; font-size: 8px; color: inherit; background-color: inherit; vertical-align: sub; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; } .systemoutput {display: inline; font-family: "Courier New", verdana, arial, helvetica, sans-serif; font-size: 11px; color: #424542; background-color: inherit; vertical-align: baseline; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; } .userinput {display: inline; font-family: "Courier New", verdana, arial, helvetica, sans-serif; font-size: 11px; color: #424542; background-color: inherit; vertical-align: baseline; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; } /* Table styles */ td { padding-top: 6px; padding-bottom: 6px; } .tabletext , .tabletextaddendum {display: block; font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 0pt; margin-bottom: 0pt; margin-left: 0cm; margin-right: 0cm; padding-top: 6px; padding-bottom: 6px; padding-left: 6px; padding-right: 6px; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .tableheadingcentered {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 12px; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 0pt; margin-bottom: 0pt; margin-left: 0pt; margin-right: 0pt; padding-top: 6px; padding-bottom: 6px; padding-left: 6px; padding-right: 6px; float: none; clear: none; text-align: center; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .tableheading {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 12px; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 0pt; margin-bottom: 0pt; margin-left: 0pt; margin-right: 0pt; padding-top: 6px; padding-bottom: 6px; padding-left: 6px; padding-right: 6px; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .tabletextcentered {display: block; font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 0pt; margin-bottom: 0pt; margin-left: 0cm; margin-right: 0cm; padding-top: 6px; padding-bottom: 6px; padding-left: 6px; padding-right: 6px; float: none; clear: none; text-align: center; text-indent: 0cm; width: auto; height: auto; white-space: normal; } /* Heading styles */ .subheading, .subheadingaddendum {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 12px; color: #737573; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: normal; margin-top: 16px; margin-bottom: 3pt; margin-left: 0cm; margin-right: 0cm; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .heading1, .heading2, .heading3, .heading4, .heading5, .heading6 {font-family: arial, verdana, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 24px; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 30px; margin-top: 0px; margin-bottom: 0px; margin-left: 0cm; margin-right: 0cm; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } /* .heading2 {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 12pt; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: normal; margin-top: 12pt; margin-bottom: 3pt; margin-left: 0cm; margin-right: 0cm; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .heading3 {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 10pt; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: normal; margin-top: 6pt; margin-bottom: 3pt; margin-left: 0cm; margin-right: 0cm; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .heading4 {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 10pt; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: normal; margin-top: 6pt; margin-bottom: 3pt; margin-left: 0cm; margin-right: 0cm; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .heading5 {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 10pt; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: normal; margin-top: 6pt; margin-bottom: 3pt; margin-left: 0cm; margin-right: 0cm; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .heading6 {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: italic; font-variant: normal; font-weight: bold; font-size: 10pt; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: normal; margin-top: 6pt; margin-bottom: 3pt; margin-left: 0cm; margin-right: 0cm; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } */ /* Index styles */ .indexatoz {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 11px; color: #808080; background-color: #CFCFCF; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: normal; margin-top: 12pt; margin-bottom: 0pt; margin-left: 0pt; margin-right: 0pt; padding-top: 6pt; padding-bottom: 6pt; padding-left: 6pt; padding-right: 6pt; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .index1 {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 8pt; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: normal; margin-top: 0cm; margin-bottom: 0cm; margin-left: 0cm; margin-right: 0cm; padding-top: 3pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: left; text-indent: 0pt; width: auto; height: auto; white-space: normal; } .index2 {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 8pt; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: normal; margin-top: 0cm; margin-bottom: 0cm; margin-left: 0cm; margin-right: 0cm; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: left; text-indent: 0pt; width: auto; height: auto; white-space: normal; } .index3 {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 8pt; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: normal; margin-top: 0cm; margin-bottom: 0cm; margin-left: 0cm; margin-right: 0cm; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: left; text-indent: 0pt; width: auto; height: auto; white-space: normal; } .indexheading {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 14pt; color: #004080; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: normal; margin-top: 0pt; margin-bottom: 0pt; margin-left: 0pt; margin-right: 0pt; padding-top: 12pt; padding-bottom: 6pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .indexlink {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 8pt; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: normal; margin-top: 0cm; margin-bottom: 0cm; margin-left: 0cm; margin-right: 0cm; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: left; text-indent: 0pt; width: auto; height: auto; white-space: normal; } /* 'Other' styles */ .toc {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: normal; margin-top: 0.2cm; margin-bottom: 0.2cm; margin-left: 0cm; margin-right: 0cm; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: left; text-indent: 6pt; width: auto; height: auto; white-space: normal; } .relatedheading {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 12px; color: #737573; background-color: #ffffff; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 0px; margin-bottom: 0px; margin-left: 0pt; margin-right: 0pt; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .relateditem {font-family: "Verdana", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; color: #424542; background-color: #ffffff; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 0pt; margin-bottom: 0pt; margin-left: 0pt; margin-right: 0pt; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; white-space: normal; } .code {font-family: "Courier New", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 11px; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 6px; margin-bottom: 6px; margin-left: 6px; margin-right: 6px; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: left; text-indent: 0cm; width: auto; height: auto; } .code2 {font-family: "Courier New", verdana, arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 11px; color: #424542; background-color: inherit; word-spacing: normal; letter-spacing: normal; vertical-align: baseline; text-decoration: none; text-transform: none; line-height: 20px; margin-top: 6px; margin-bottom: 6px; margin-left: 6px; margin-right: 6px; padding-top: 0pt; padding-bottom: 0pt; padding-left: 0pt; padding-right: 0pt; float: none; clear: none; text-align: left; text-indent: 1cm; width: auto; height: auto; } /* new */