blob: 323521e696cb3555a360943c4ca703d6e0b9c979 [file] [log] [blame]
/* Cascading Style Sheet for HTML export */
/* Light Blue style */
/* Compatibility notes:
*
* Names starting with "#" are ID selectors meaning they point to one specific single object/element
*
*/
/* This stylesheet expects the following HTML structure
body#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
<BODY MAIN CONTENT>
<TOPIC>
<TOP COMMAND>
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: 12pt;
}
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: #0066CC;
}
a:visited {
color: #993399;
}
/* Note: hover selector should be last in order to take precedence in :visited AND :hover situation */
a:hover {
color: #FF3300;
}
/* special link styles */
a.noHover:hover {
background-color:transparent; /* If you don't want images wrapped in <a> to have hover effect, make it <a class="noHover"> */
}
a:active {
color: #FF3300;
}
/*********************************************************************************/
/*** Styles of specific modules **************************************************/
/*********************************************************************************/
/* MODULE: HEADER --------------------------------------------*/
#pageHeader {
width: 100%;
border-bottom: 1px solid #C0C0C0;
background-image: url(../images/header_background.gif);
background-repeat: repeat-y;
background-color: #6487DC; /* 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: White;
}
#pageHeader .right .utilities {
text-align: right;
font-size: 12pt;
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: White;
}
#pageHeader a:visited {
color: White;
}
#pageHeader a:hover {
color: #BEDBF7;
}
#pageHeader a:active {
color: #FF3300;
}
/* 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;
}
#pageHeader .right .contactInformation{
text-align: right;
font-size: 8pt;
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 #C0C0C0;
height: 0.1em;
font-size: 2pt; /* I need a very narrow divider */
}
/* MODULE: FOOTER ------------------------------------------------------------*/
#pageFooter {
width: 100%;
background-color: #6487DC;;
border-top: 1px solid #C0C0C0;
font-size: 12pt;
color: White;
}
#pageFooter td {
padding-left: 6px;
padding-right: 6px;
}
#pageFooter div {
/* margin-bottom: .2em; */
}
/* link style in footer */
#pageFooter a:link {
color: White;
}
#pageFooter a:visited {
color: White;
}
#pageFooter a:hover {
color: #BEDBF7;
}
#pageFooter a:active {
color: #FF3300;
}
/* 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;
text-align: left;
width: 70%;
vertical-align: top;
color: #0066CC;
padding-top: 4px;
padding-bottom: 2px;
}
.breadcrumbs a:visited {
color: #0066CC; /* 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: #0066CC; /* 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
<partial map>
div.topicTextNotes
div Notes
<callouts>
<task planning>
<data container>
<review comments>
<related>
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: 12pt;
font-weight: bold;
}
.outlineNumber { /* other topics on page */
display: visible; /* set to none or visible to hide/show outlineNumbers */
font-size: 12pt;
font-weight: bold;
}
.topicLineFirst { /* first topic on page */
font-size: 12pt;
font-weight: bold;
}
.topicLine { /* other topics on page */
font-size: 12pt;
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 */
}
/* <div> around whole text notes */
.topicTextNotes {
font-size: 12pt;
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 */
}
/* <div> around whole text notes in callouts */
.callouts .topicTextNotes {
font-size: 12pt;
margin-left: 0px;
}
/* single link, so far used in callout section */
.topicHyperlink {
font-size: 12pt;
}
/* 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: 12pt;
font-weight: normal;
margin-left: 10px;
margin-right: 50px;
}
.subtopicitem {
margin-top: 3px;
margin-bottom: 2px;
}
.partialMap {
margin-top: 5px;
margin-bottom: 5px;
display: none; /* 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: #F4F4F4;
width: 360px;
margin-left: 30px;
margin-bottom: 8px;
border-top: 3px solid #6487DC;
border-bottom: 3px solid #6487DC;
}
/* single callout */
.callout {
margin-left: 8px;
margin-right: 8px;
margin-top: 0px;
margin-bottom: 3px;
}
/* topic text and icons */
.calloutHeader {
font-size: 12pt;
font-weight: bold;
color: Gray;
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.<special box name>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: #8CAAE7;
border: 1px solid #C0C0C0;
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: 12pt;
text-align: left;
font-weight: bold;
color: White;
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: #EEF3FF;
}
/* 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: 8pt;
color: gray;
text-indent: 6px;
}
.property .value {
width: auto;
font-size: 12pt;
color: #0066CC;
}
/* 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 {
width: 15 em;
font-size: 7pt;
color: gray; /* STYLE */
text-indent: 6px;
}
.dataContainerTableRowHeader {
width: 15 em;
font-size: 7pt;
color: gray; /* STYLE */
text-indent: 6px;
}
.dataContainerTableCell {
width: auto;
font-size: 12pt;
color: #0066CC; /* 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: gray; /* STYLE */
text-indent: 6px;
}
.dataContainerCustomPropertyNameInGroup{
width: 15 em;
font-size: 7pt;
color: gray; /* STYLE */
text-indent: 12px;
}
.dataContainerCustomPropertyValue{
width: auto;
font-size: 12pt;
color: #0066CC; /* 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: 12pt;
color: #0066CC;
}
.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: 12pt;
font-weight: bold;
padding-left: 4px; /* align with text notes */
}
.relatedItem {
font-size: 12pt;
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: 10pt;
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: #0066CC; /* don't show visited colors for prev/next navigation */
}
.topCommand a:hover {
text-decoration: none; /* set to "none" to hide underlines on links */
}
.topCommand a:active {
text-decoration: none; /* set to "none" to hide underlines on links */
}
/**********************************************************************************************/
/******** 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: 12pt;
color: #0066CC;
width: 200px;
}
/* set with of both divs to avoid right border if text wraps */
.legend .collapsiblebox {
width: 200px;
}
.legend .collapsiblebox .body {
width: 200px;
}
.legendGroup
{
clear: both;
font-weight: bold;
float: left;
margin-top: 5px;
margin-bottom: 4px;
margin-left: 0px;
}
.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: #0066CC;
font-size: 12pt;
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;
border-bottom: 1px solid #C0C0C0;
}
.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;
}
.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: 12pt;
text-align: center;
padding-top: 3px;
vertical-align: middle;
color: white;
background-color: #6487DC;
}