/* 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 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: 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: #CC0000;		/* STYLE */
}

a:visited {
	color: #CC0000;		/* STYLE */
}

/* Note: hover selector should be last in order to take precedence in :visited AND :hover situation */
a:hover {
	color: #FF3300;		/* STYLE */
}

/* 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;		/* STYLE */
}


/*********************************************************************************/
/*** Styles of specific modules **************************************************/
/*********************************************************************************/

/* MODULE:  HEADER --------------------------------------------*/
#pageHeader {
	width: 100%;
	border-bottom: 3px solid #FFCC66;	/* STYLE */
	background-image: url(../images/header_background.gif);		/* STYLE */
	background-repeat: repeat-y;				/* STYLE */
	background-color: #CC0000; 					/* 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: White;					/* STYLE */
}

#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: White;							/* STYLE */
}

#pageHeader a:visited {
	color: White;							/* STYLE */
}

#pageHeader a:hover {
   color: White;						/* STYLE */
}

#pageHeader a:active {
	color: White;						/* 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;
}

#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 #FFCC66;				/* STYLE */
	height: 0.1em;
	font-size: 2pt;				/* I need a very narrow divider */
}


/* MODULE: FOOTER  ------------------------------------------------------------*/
#pageFooter {
	width: 100%;
	background-color: #FFCC66;					/* STYLE */
	border-top: 2px solid #CC0000;	         	/* STYLE */
	border-bottom: 2px solid #CC0000;	         	/* STYLE */
	font-size: 8pt;
	color: Black;									/* STYLE */
	margin-left: 2px;
}


#pageFooter td {
	padding-left: 6px;
	padding-right: 6px;
}

#pageFooter div {
/*	margin-bottom: .2em;	*/
}

/* link style in footer */

#pageFooter a:link {
	color: Black;								/* STYLE */
}

#pageFooter a:visited {
	color: Black;								/* STYLE */
}

#pageFooter a:hover {
   color: #CC0000;							/* STYLE */
}

#pageFooter a:active {
	color: #CC0000;							/* 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: #CC0000;						/* STYLE */
	padding-top: 4px;
	padding-bottom: 2px;
}

.breadcrumbs a:visited {
	color: #CC0000;						/* 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: #CC0000;					/* 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
				<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:  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 */
}


/* <div> 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 */		
}


/* <div> 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: 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: #FAFAFA;			/* STYLE */
	width: 360px;	
	margin-left: 30px;
	margin-bottom: 8px;
	border: 1px solid #CC0000;		/* STYLE */
	border-top: 5px solid #CC0000;		/* 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.<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: #D3D3D3;				/* STYLE */
	border: 1px solid #CC0000;				/* 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 */
}

/* 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: gray;								/* STYLE */
	text-indent: 6px;
}

.property .value {
	width: auto;
	font-size: 8pt;
	color: #2F4F4F;				/* STYLE */
}


/* MODULES:  BOX - TASK INFORMATION ---------------------------------------------------------- */
.taskInformationArea .body {
		display: none;				/* collapse when first shown */
}


/* MODULES:  BOX - DATA CONTAINER ---------------------------------------------------------- */

.dataContainerArea .body {
		display: none;				/* collapse when first shown */
}

.textMarkersArea .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: 8pt;
	color: #2F4F4F;				/* 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: 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: #2F4F4F;			/* 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: #CC0000;					/* STYLE */	/* 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: 8pt;
	color: Gray;				/* 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: #CC0000;				/* 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;
	border-bottom: 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: #CC0000; 			/* STYLE */
	border-top: 2px solid #FFCC66;
}



