/* Cascading Style Sheet for HTML export *//* Dark Red style *//* All properties that are style specific are marked as "STYLE" *//* Compatibility notes: * * Names starting with "#" are ID selectors meaning they point to one specific single object/element *//* This stylesheet expects the following HTML structurebody#page table#pageHeader tr td.left (rowspan 3) td.right div.utilities span.command (0+) a img span.label tr td.right div.mapName tr td.right div.contactInformation col left is optional sidebar navigation col.main col.right tr#breadcrumbsAndPageNavigation td.left (0-1: include if sideNav) div.box (0+) ... (see div.box contents below) Optional Breadcrumb and pageNavigation td.breadcrumbs td.pageNavigation td.right table#pageFooter tr td.left (rowspan = 2, could be used for image) td.center (rowspan = 2) div.footerText td.right div.hyperlink tr td.right div.lastUpdated */ /* GLOBAL SYTLE global styling, sets overall style of page */body { font-family: Verdana; margin: 0px; /* increase to have page float on background */ padding: 0px; font-size: 8pt;}li { margin-bottom: .3em; /* make list items more compact than default */}img { border: 0; /* by default, images should not have a border */}.emptyImage { /* used for special effects */ float:left; margin: 0px; /* distance to outline */} /* all headers in boxes */.header { clear: both; /* floating element below */}/* link styles */ a { text-decoration: underline; /* set to "none" to hide underlines on links */}a img { text-decoration: none; /* set to "none" to hide underlines on links */}/* remove link underline from some special elements: Header and Overview Map */#mapPageHeader a, { text-decoration: none; /* set to "none" to hide underlines on links */}a:link { color: #336666; /* STYLE */}a:visited { color: #336666; /* STYLE */}/* Note: hover selector should be last in order to take precedence in :visited AND :hover situation */a:hover { color: #669999; /* STYLE */}/* special link styles */a.noHover:hover { background-color:transparent; /* If you don't want images wrapped in to have hover effect, make it */}a:active { color: #669999; /* STYLE */}/*********************************************************************************//*** Styles of specific modules **************************************************//*********************************************************************************//* MODULE: HEADER --------------------------------------------*/#pageHeader { width: 100%; border-bottom: 2px solid #999999; /* STYLE */ /*background-image: url(../images/header_background.gif); */ /* STYLE */ /*background-repeat: repeat-y;*/ /* STYLE */ background-color: #99CCCC; /* STYLE */ /* same color as on right side in backgound image */}#pageHeader td { padding-left: 6px; padding-right: 6px;} #pageHeader div { /*margin-bottom: .2em; */ }/* logo image on left side of header */ #pageHeader .left { width: auto; margin-right: 8px; vertical-align: middle;}/* header information */#pageHeader .right { margin-left: 8px; width: 100%; /* helps to left align text */ color: #669999; /* STYLE */ font-weight: bold;}#pageHeader .right .utilities { text-align: right; font-size: 8pt; vertical-align: top;}.utilities_toc { display: show; /* show table of content link */}/* link style in header *//* note: Order is important. If ambiguous, last has precedence. */ #pageHeader a:link { color: #669999; /* STYLE */}#pageHeader a:visited { color: #669999; /* STYLE */}#pageHeader a:hover { color: White; /* STYLE */}#pageHeader a:active { color: #669999; /* STYLE */}/* note: Order is important. If ambiguous, last has precedence. */ #pageHeader .right .utilities a:link { text-decoration: none; /* set to "none" to hide underlines on links */}#pageHeader .right .utilities a:visited { text-decoration: none; /* set to "none" to hide underlines on links */}#pageHeader .right .utilities a:hover { text-decoration: none; /* set to "none" to hide underlines on links */}#pageHeader .right .utilities a:active { text-decoration: none; /* set to "none" to hide underlines on links */}#pageHeader .right .mapName { text-align: left; font-family: Arial; font-size: 15pt; vertical-align: middle; color: White;}#pageHeader .right .contactInformation{ text-align: right; font-size: 7pt; vertical-align: bottom; /*margin-right: 4px; */ /* to right align with commands in utilities */}/* MODULE: BODY (main content) ------------------------------------------ */table#pageBody { width: 100%;}.bodyColumn { padding: 0px; vertical-align: top; text-align: left; width: 100%;}/* width of second body column: liquid width for content */#pageBody col.main { width:auto;}#pageBody col.right { width: auto; }/* some padding values for the core table in used page body */table#pageBody tr td { padding-left: 0px; padding-right: 0px;}table#pageBody td.main { padding-left: 10px; /* indent main topic content */ padding-right: 20px; /* and leave some space on the right */}table#pageBody td.breadcrumbs { vertical-align: top; padding-left: 10px; /* indent main topic content */}table#pageBody td.pageNavigation { padding-right: 20px; /* and leave some space on the right */}.topicDivider { border-top: 1px solid #999999; /* STYLE */ height: 0.1em; font-size: 2pt; /* I need a very narrow divider */}/* MODULE: FOOTER ------------------------------------------------------------*/#pageFooter { width: 100%; background-color: White; /* STYLE */ border-top: 2px dotted #336666; /* STYLE */ font-size: 8pt; color: #336666; /* STYLE */ }#pageFooter td { padding-left: 6px; padding-right: 6px;}#pageFooter div {}/* link style in footer */#pageFooter a:link { color: #336666; /* STYLE */}#pageFooter a:visited { color: #336666; /* STYLE */}#pageFooter a:hover { color: #669999; /* STYLE */}#pageFooter a:active { color: #669999; /* STYLE */}/* reserved for image */#pageFooter .left { width: 0px; margin-right: 0px;}#pageFooter .center { width: 65%; /* helps to left align text */ text-align: left; vertical-align: top;}#pageFooter .center .footerText {}/* Last update and hyperlink */#pageFooter .right { width: 35%; text-align: right;}#pageFooter .right .hyperlink { vertical-align: top;}#pageFooter .right .lastUpdated { vertical-align: bottom;}/* MODULE BREADCRUMBS AND PREV / NEXT NAVIGATION --------------------------------------------------*/.breadcrumbs { font-size: 7pt; /* STYLE */ text-align: left; width: 70%; vertical-align: top; color: #336666; /* STYLE */ padding-top: 4px; padding-bottom: 2px;}.breadcrumbs a:visited { color: #336666; /* STYLE */ /* don't show visited colors for breadcrumbs */} .breadcrumbs .breadcrumb { white-space: nowrap; /* set to "nowrap" to stop breadcrumbs from breaking in the middle */} /* move the previous / next links to the right side */.pageNavigation { text-align: right; font-size: 7pt; width: 30%; vertical-align: middle;}.pageNavigation a:visited { color: #336666; /* STYLE */ /* don't show visited colors for prev/next navigation */}/*----------------------------------------------------------------------------------*/ /* MODULE: TOPIC ------------------------------------------------------------------ *//*----------------------------------------------------------------------------------*/ /* tr.topic (0+) td.main (colspan = 2) tr.topicHeader td.topicImageColumn img.topicImage td.topicLineColumn span.outlineNumber span.topicLine span.topicIcons img.topicIcon div.body div.topicTextNotes div Notes td.right */.topic .main .body { clear: both;}.topicHeader { vertical-align: middle; clear:both; }.topicImageColumn {}.topicImage { margin-right: 6px; /* distance to outline */}.topicTopicLineColumn {}.outlineNumberFirst { /* first topic on page */ display: visible; /* set to none or visible to hide/show outlineNumbers */ font-size: 11pt; font-weight: bold;}.outlineNumber { /* other topics on page */ display: visible; /* set to none or visible to hide/show outlineNumbers */ font-size: 10pt; font-weight: bold;} .topicLineFirst { /* first topic on page */ font-size: 11pt; font-weight: bold;} .topicLine { /* other topics on page */ font-size: 10pt; font-weight: bold;} /* group of icons */.topicIcons { margin-left: 4px; /* distance to topic text */ vertical-align: middle; /* center icons around text (important for single line callouts) */}/* single icons */.topicIcon { margin-right: 3px; /* distance between icons */}/*
around whole text notes */.topicTextNotes { font-size: 9pt; margin-left: 0.3em; margin-top: 0.5em;}.topicTextNotes div { margin-bottom: 0.8em; /* distance between paragraphs */ }.topicTextNotes table { margin-bottom: 0.7em; /* some space below tables and before next paragraph starts */ }.topicTextNotes table div { margin-left: 0.3em; /* some left and right cell padding */ margin-right: 0.3em;}.topicTextNotes .lastTableNotesDiv { margin-bottom: 0em; /* no bottom margin for last paragraph in Notes */ }/*
around whole text notes in callouts */.callouts .topicTextNotes { font-size: 8pt; margin-left: 0px; }/* single link, so far used in callout section */.topicHyperlink { font-size: 8pt; }/* the icon behind the link */.topicHyperlinkIcon { vertical-align: bottom;}/* commands: active buttons / hot spots or links */.command { white-space: nowrap;}.command img { display: inline; /* set to none or inline to hide or show command icons */ vertical-align: bottom; margin-left: 2px;}.command .label { display: inline; /* set to none or inline to hide or show command text labels */ vertical-align: middle;}/* MODULE: BOX - MAP GRAPHICS SNIPPET ---------------------------------------------------*//* div.partialMapArea table.partialMapTable div.SubTopicItems div.subtopicitem img a div.partialMap img*/.partialMapArea { vertical-align: top; margin-bottom: 10px; /* some distance below this block */}table#partialMapTable tr td { padding: 0px; }.subTopicItems { clear: both; font-size: 8pt; font-weight: normal; margin-left: 10px; margin-right: 50px;}.subtopicitem { margin-top: 3px; margin-bottom: 2px;}.partialMap { margin-top: 5px; margin-bottom: 5px; display: visible; /* this value will be set during the export depending on user setting in property inspector */} /* MODULE: CALLOUT -SECTION---------------------------------------------------------------------*//* div.callouts div.callout div.calloutHeader span topicIcons img.topicIcon tr.calloutBody div.calloutImage img.topicImage div.topicTextNotes div Notes span a.topicGyperlink a.topicHyperlinkIcon*//* all callouts */.callouts { background-color: #FAFAFA; /* STYLE */ width: 360px; margin-left: 30px; margin-bottom: 8px; border: 1px solid #7F9DB9; /* STYLE */ border-top: 1px solid #7F9DB9; /* STYLE */}/* single callout */.callout { margin-left: 8px; margin-right: 8px; margin-top: 0px; margin-bottom: 3px;}/* topic text and icons */.calloutHeader { font-size: 8pt; font-weight: bold; color: #2F4F4F; /* STYLE */ padding-left: 4px; /* align with text notes */}.calloutBody { vertical-align: top; text-align: left;}.calloutImage { padding-left: 4px; /* align with text notes */}/* -----------------------------------------------------*//* COLLAPSIBLE BOXES/*-------------------------------------------------------*//* div.Area (need "Area" string for collapse button script) div.collapsiblebox (1+) div.header span.title img.expandOrCollapseButton div.body (varies)*//* the body class is important for the collapse script. It follows the initial .collapsiblebox statement */.body { clear: both;}.clearFloat { clear: both; /* needed to hold down bottom border sometimes */}.collapsiblebox { clear: both; width: 360px; padding-bottom: 0px; background-color: #CBCBCB; /* STYLE */ border: 1px solid #7F9DB9; /* STYLE */ margin-bottom: 8px; margin-left: 30px;}.legend .collapsiblebox { margin-left: 0px; /* overide for the legend box */}.collapsiblebox .title { padding: 3px; padding-left: 6px; font-size: 8pt; text-align: left; font-weight: bold; color: Black; /* STYLE */ float: left;}.collapsiblebox .expandOrCollapseButton { float: right; text-align: right; margin-top: 2px; margin-left: 8px; margin-right: 4px; vertical-align: middle; display: inline; /* set to none to hide button(s); set to inline to show */}.collapsiblebox .body { clear: both; padding-bottom: 1px; padding-left: 0px; padding-right: 0px; background-color: #FAFAFA; /* STYLE */ border-top: 1px solid #999999; /* STYLE */}/* generic style for lists in boxes e.g. task information or about box */.property { clear: both; height: 1em; /* since I'm using spans, I need some more line spacing */}.property .label { width: 15 em; font-size: 7pt; color: #336666; /* STYLE */ text-indent: 6px;}.property .value { width: auto; font-size: 8pt; color: #669999; /* STYLE */}/* MODULES: BOX - TASK INFORMATION ---------------------------------------------------------- */.taskInformationArea .body { display: none; /* collapse when first shown */}/* MODULES: BOX - TEXT MARKERS INFORMATION ---------------------------------------------------------- */.textMarkersArea .body { display: none;}/* MODULES: BOX - DATA CONTAINER ---------------------------------------------------------- */.dataContainerArea .body { display: none; /* collapse when first shown */}.dataContainerTable { table-layout: fixed; width: 100%; clear: both; height: 1em; /* since I'm using spans, I need some more line spacing */}.dataContainerTableColumnHeader { font-size: 7pt; color: #336666; /* STYLE */ text-indent: 6px;}.dataContainerTableRowHeader { font-size: 7pt; color: #336666; /* STYLE */ text-indent: 6px;}.dataContainerTableCell { width: auto; font-size: 8pt; color: #669999; /* STYLE */}.dataContainerCustomProperties { width: 100%; clear: both; height: 1em; /* since I'm using spans, I need some more line spacing */}.dataContainerCustomPropertyGroup { width: 15 em; font-size: 7pt; color: white; background-color: gray; text-indent: 6px;}.dataContainerCustomPropertyName{ width: 15 em; font-size: 7pt; color: #336666; /* STYLE */ text-indent: 6px;}.dataContainerCustomPropertyNameInGroup{ width: 15 em; font-size: 7pt; color: #336666; /* STYLE */ text-indent: 12px;}.dataContainerCustomPropertyValue{ width: auto; font-size: 8pt; color: #669999; /* STYLE */}.dataContainerImage { margin-right: 1px; /* distance to outline */}/* MODULES: BOX - REVIEW COMMMENT ---------------------------------------------------------- */.comment { clear: both;}.commentsArea .body { display: none; /* collapse when first shown */ font-size: 8pt; color: #669999; /* STYLE */}.comment .userName { font-weight: bold; float: left; margin-bottom: 0px; padding-left: 6px;}.comment .date { font-weight: bold; float: right; margin-bottom: 0px; padding-right: 6px;}.comment .text { clear: both; padding-bottom: 4px; /* makes bottom 'border' bigger on opera */ padding-right: 6px; padding-left: 6px;}/* MODULE: RELATED SECTION ----------------------------------------------------------------------*//* div.relatedSection div.oneRelatedSection a topicHyperlink div.relatedSectionBody div.relatedItem span relatedItemBullet a topicHyperlink a topicHyperlink (optional callout link) img topicHyperlinkIcon */.relatedSection {}.oneRelatedSection { margin-top: 16px; margin-bottom: 8px; }.relatedSectionHeader { font-size: 8pt; font-weight: bold; padding-left: 4px; /* align with text notes */}.relatedItem { font-size: 8pt; margin-top: 1px; margin-bottom: 2px;}.relatedItemBullet { padding-left: 4px; /* align with text notes */}/* the icon behind the link */.relatedItem .topicHyperlinkIcon { vertical-align: middle;}/* MODULE: TOP COMMAND ----------------------------------------------------------*/.topCommand { vertical-align: bottom; font-size: 7pt; margin-top: 10mm; margin-bottom: 2mm;}.topCommand a:link { text-decoration: none; /* set to "none" to hide underlines on links */}.topCommand a:visited { text-decoration: none; /* set to "none" to hide underlines on links */ color: #336666; /* STYLE */ /* don't show visited colors for prev/next navigation */}.topCommand a:hover { text-decoration: none; /* set to "none" to hide underlines on links */ color: #336666; /* STYLE */ /* don't show visited colors for prev/next navigation */}.topCommand a:active { text-decoration: none; /* set to "none" to hide underlines on links */ color: #336666; /* STYLE */ /* don't show visited colors for prev/next navigation */} /**********************************************************************************************//******** OTHER WINDOW LAYOUTS ****************************************************************//**********************************************************************************************//* WINDOW: LEGEND ------------------------------------------------------------- *//* .div legend .div collapsiblebox .div body .div legendGroup .div legendItem .div item .div label*/.legend { margin-left: 6px; margin-top: 6px; font-size: 8pt; color: #669999; /* STYLE */ width: 200px;}/* set with of both divs to avoid right border if text wraps */.legend .collapsiblebox { width: 200px;}.legend .collapsiblebox .body { width: 200px; border: 1px solid #999999;} .legendGroup{ clear: both; font-weight: bold; float: left; margin-top: 5px; margin-bottom: 4px; margin-left: 5px;}.legendItem{ clear: both; margin-left: 5px;}.legendItem .item { float: left; margin-right: 6px;}.legendItem .label { float: left; margin-right: 2px;}/* WINDOW: CONTENT ------------------------------------------------------------- *//* div.Page table.pageBody col.TOCContents div.body div.contentItem1[1-9] div.outlineNumber div.topicLine a topicHyperlink col.TOCAbout div.collapsiblebox div.header div.body div.mapPreview img div.property div.label div.value*/.TOCContents { text-align: left; vertical-align: top; width: 90%;}.TOCContents .body { margin: 15px; margin-right: 5px; color: #336666; /* STYLE */ font-size: 8pt; font-weight: normal;}.TOCAbout { text-align: right; vertical-align: top; width: 10%;}.TOCAbout .collapsiblebox { margin: 15px; margin-right: 5px; }.TOCAbout .property { margin-top: 5px; }.TOCAbout .property .label { float: left; text-align: left; width: 7.5em; }.TOCAbout .property .value { float: left; text-align: left; margin-left: 1.0em; }.mapPreview { padding-top: 10px; padding-bottom: 16px; text-align: center; #7F9DB9: 1px solid #CC0000;}.contentItem1 { margin-top: 5px; clear: both;} .contentItem2 { margin-top: 3px; margin-left: 2em; clear: both;}.contentItem3 { margin-left: 4em; clear: both;}.contentItem4 { margin-left: 6em; clear: both;}.contentItem5 { margin-left: 8em; clear: both;}.contentItem6 { margin-left: 10em; clear: both;}.contentItem7 { margin-left: 12em; clear: both;}.contentItem8 { margin-left: 14em; clear: both;}.contentItem9 { margin-left: 16em; clear: both;}.contentItemX { margin-left: 18em; clear: both;}/* WINDOW: OVERVIEW MAP ------------------------------------------------------------- *//* body overviewMapBody .div overviewDiv img mapOverview img mapDetailed*/.overviewMapBody { background-color: Gray; /* STYLE */}.overviewDiv { cursor: hand; text-align: center; margin-top: 10px; /* remove once we can center horizontally */}img#mapOverview, img#mapDetailed { margin: 0px;}body#mapPageFooter { font-family: Verdana; font-size: 8pt; text-align: center; padding-top: 3px; vertical-align: middle; color: white; /* STYLE */ background-color: #336666; /* STYLE */ border-top: 2px solid #999999;}