/* Cascading Style Sheet for HTML export */

/* Royal Purple 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
 */
 
/* MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM */


/* GLOBAL SYTLE global styling, sets overall style of page */

body {
	font-family: verdana;           /* Verdana; arial; */
	margin: 0px;                   /* Window Matt boarder ~~~~~~~~~~~~~~~~~~*/
	padding: 0px;                 /* Window Matt boarder   same? ~~~~~~~~~~~~~~~~~~*/
	font-size: 10pt;
}

li {
	margin-bottom: 0em;       /* verticle space between LIST ITEMS that are bulleted */
}

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: none; /* set to "none" to hide underlines on links  underline */
}

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: #22143D;  /* STYLE */
}

a:visited {
	  /*  color: #22143D;  /* Table of Contents  index text color*/
}

/* Note: hover selector should be last in order to take precedence in :visited AND :hover situation */
a:hover {
	color: #22143D;  /* Table of Content  text hover color*/
}

/* 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: #22143D;  */
}


/*********************************************************************************/
/*** Styles of specific modules **************************************************/
/*********************************************************************************/

/* MODULE:  HEADER --------------------------------------------*/
#pageHeader {
	width: 100%;
        height: 123px;
	border-bottom: 0px solid #F0CE87;	/* boarder line under header area */
	background-image: url(../images/header_background.jpg);		/* STYLE */
	/*background-repeat: repeat-y;	*/			/* STYLE */
	/*background-color: #000000; */			/* red=FF0000    green=00FF00       blue=0000FF*/
                                                    	/* maroon=660066 olive=666600 light blue=6666FF*/
                                                    	/*  brown=654321 fucia=FF6666  dark teal=006666*/
                                                    	/*   pink=FEDCBA fucia=FF6666 pink=FF66FF*/
                                                        /* same color as on right side in backgound image */
}


#pageHeader td {
	padding-left: 25px;      /* left margin in front of header icon image ~~~~~~~~~~~~~~~~~~~~~ */
	padding-right: 0px;
}	

#pageHeader div {
	/*margin-bottom: 0em;	*/ 
}

/* logo image on left side of header */	
#pageHeader .left {
	width: 0px					/*  auto;  */
	margin-right: 0px;
	vertical-align: middle;
}

/* header information */
#pageHeader .right {
	margin-left: 0px;
	width: 95%;		/* width of header text area, area is right aligned ~~~~~~~~~~~~~~~~~~~~~~~ */
                                /* helps to left align text */
	/*  color: #22143D;  /* header main text COLOR bb9955 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
}

#pageHeader .right .utilities  {
	text-align: right;
	font-weight: bold;
	font-size: 10pt;			/* font size  top right header text  ~~~~~~~~~~~~~~~~~~~~~~~~~ */
	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: #22143D;  */
}

#pageHeader a:visited {
	/* color: #22143D;  */
}

#pageHeader a:hover {
    color: #42245D;  /* HOVER color over header hyperlinks at right ~~~~~~~~~~~~~~~~~~ */
}

#pageHeader a:active {
	/* color: #22143D;  */
}

/* 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 {
	color: #22143D; 
	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: Times New Roman;
	font-size: 10pt;			/* font size  main header text  ~~~~~~~~~~~~~~~~~ */
	font-weight: bold;
	vertical-align: middle;
}

#pageHeader .right .contactInformation{
	text-align: right;
	font-size: 10pt;
	vertical-align: bottom;
	/*margin-right: 0px;			*/	/* to right align with commands in utilities */
}


/* MODULE:  BODY (main content) MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM */
table#pageBody {
	width: 100%;             /* main area equal to left edge at menu and right edge at window  */
}

.bodyColumn {
	padding: 0px;
	vertical-align: top;
	text-align: left;
	width: 100%;	         /* less then 100% causes left hand menu to be too wide ~~~~~~~~ */
}


/* width of second body column: liquid width for content */
#pageBody col.main {
	/*  background-image: url(../images/Parchment1.jpg);	 */	/* STYLE */
	/*background-repeat: repeat-y;	*/			/* STYLE */
	/* background-color: #FEFEFF; 		/* STYLE */	/* parchment background for text section */
	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: 0px;			/* indent main topic content */
	padding-right: 0px;       /* and leave some space on the right */
}

table#pageBody td.breadcrumbs {
	vertical-align: top;
	padding-left: 0px;			/* indent main topic content */
}

table#pageBody td.pageNavigation {
	padding-right: 0px; /* and leave some space on the right */
}

.topicDivider {
	border-top: 0px dashed Silver;				/* STYLE */
	height: 0.0em;
	font-size: 0pt;				/* I need a very narrow divider */
}


/* MODULE: FOOTER  ------------------------------------------------------------*/
#pageFooter {
	width: 100%;
        color: #FFFFFF;  
	background-color: #000000;  /* Footer background COLOR  #F8E760;  #F2E760; ~~~~~~~ */
	border-top: 0px solid #22143D;			/* STYLE */
	font-size: 8pt;
									/* STYLE */
}

#pageFooter td {
	padding-left: 0px;
	padding-right: 0px;
	font-size: 8pt;
}

#pageFooter div {
/*	margin-bottom: 88em;	*/
	font-size: 8pt;
}

/* link style in footer */

#pageFooter a:link {
	color: #FFFFFF;   /* STYLE */
	font-size: 8pt;
}

#pageFooter a:visited {
	color: #FFFFFF;  /* STYLE */
	font-size: 8pt;
}

#pageFooter a:hover {
	background-color: #013868;  
        color: #FFFFFF;  /* STYLE */
	font-size: 8pt;
}

#pageFooter a:active {
	/*  color: #FFFFFF;  /* STYLE */
	font-size: 8pt;
}

/* reserved for image */
#pageFooter .left {
	width: 333px;
	margin-right: 8px;
	font-size: 8pt;
}

#pageFooter .center {
	width: 65%;					/* helps to left align text */
	text-align: left;
	vertical-align: top;
	font-size: 8pt;
}

#pageFooter .center .footerText {
}

/* Last update and hyperlink */
#pageFooter .right {
	width: 25%;
	text-align: right;
	font-size: 8pt;
}

#pageFooter .right .hyperlink {
	vertical-align: top;
	font-size: 8pt;
}

#pageFooter .right .lastUpdated {
	vertical-align: bottom;
	font-size: 8pt;
}

/* MODULE BREADCRUMBS AND PREV / NEXT NAVIGATION --------------------------------------------------*/
.breadcrumbs {
	font-size: 10pt;						/* STYLE */
	text-align: left;
	width: 75%;
	vertical-align: top;
	color: #FFFFFF;  /* STYLE */
	padding-top: 0px;
	padding-bottom: 0px;
}

.breadcrumbs a:visited {
	color: #FFFFFF;  /* 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: 10pt;
	width: 88%;
	vertical-align: middle;
}

.pageNavigation a:visited {
	color: #FFFFFF;  /* 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
                                        style="line-height: 133%"
					   div Notes
				<callouts>
				<task planning>
				<review comments>
				<related>
			td.right	
*/

.topic .main .body {
	clear: both;
}

.topicHeader {
	vertical-align: middle;	
	clear:both;      
}

.topicImageColumn {
}

.topicImage {
	margin-right: 0px;			/* distance to outline */
}

.topicTopicLineColumn {
}

.outlineNumberFirst {			/* first topic on page */
	display: visible;         	/* set to none or visible to hide/show outlineNumbers   */
	font-size: 10pt;
	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:  14pt;
	font-weight: bold;
        color: #22143D;
}	
	
.topicLine {						/* other topics on page */
	font-size:  10pt;
	font-weight: bold;
}	

/* group of icons */
.topicIcons {
	margin-left: 0px;				/* distance to topic text */
	vertical-align: middle;	   /* center icons around text (important for single line callouts) */
}

/* single icons */
.topicIcon {
	margin-right: 55px;			/* distance between icons */
}


/* <div> around whole text notes */
.topicTextNotes {	
	margin-left: 1em;							
	margin-top: 0.0em;
}

.topicTextNotes div {
	margin-bottom: 0em;	/* distance between Paragraphs <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/	
}

.topicTextNotes table {
	margin-bottom: 0.0em;						/* some space below tables and before next paragraph starts */	
}

.topicTextNotes table div {
	margin-left: .8em;		/* some left padding/margin within each cell/box */
	margin-right: 0.0em;
}

.topicTextNotes .lastTableNotesDiv {
	margin-bottom: 0em;		/* no bottom margin for last paragraph in Notes */		
}


/* <div> around whole text notes in callouts */
.callouts .topicTextNotes {
	font-size: 10pt;	
	margin-left: 0px;							
}

/* single link, so far used in callout section */
.topicHyperlink {
	font-size: 10pt;	
}

/* 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: 0px;
}

.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: 0px;    /* some distance below this block */
}

table#partialMapTable tr td {
	padding: 0px; 
}

.subTopicItems {
	clear: both;
	font-size: 10pt;				
	font-weight: normal;
	margin-left:  0px;
	margin-right:  0px;
}

.subtopicitem {
	margin-top: 0px;
	margin-bottom: 0px;
}

.partialMap {
	margin-top: 0px;
	margin-bottom: 0px;
   	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: #000000;
	width: 0px;	
	margin-left: 0px;
	margin-bottom: 0px;
	border-top: 0px solid #00FFFF;
	border-bottom: 0px solid #0000FF;
}

/* single callout */
.callout {
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}

/* topic text and icons */
.calloutHeader {
	font-size: 10pt;
	font-weight: bold;
	color: #000000;
	padding-left: 0px;
}

.calloutBody {
	vertical-align: top;
	text-align: left;
}

.calloutImage {
	padding-left: 0px;
}


/* -----------------------------------------------------*/
/* 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: #FFFFFF;		/* STYLE */
	border: 4px solid #994400;		/* STYLE */   /* don't remove border for NS!! */
	margin-bottom: 0px;
	margin-left: 0px;
}

.legend .collapsiblebox {
	margin-left: 0px;						/* overide for the legend box */
}

.collapsiblebox .title {
	padding: 0px;
	padding-left: 0px;
	font-size: 10pt;
	text-align: left;
	font-weight: bold;
	color: #000000;  /* STYLE */
	float: left;
}

.collapsiblebox .expandOrCollapseButton {
	float: right;
	text-align: right;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	vertical-align: middle;
	display: inline; /* set to none to hide button(s); set to inline to show */
}

.collapsiblebox .body {
	clear: both;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	/*  background-color: #FF33FF;						/* STYLE */
}

/* generic style for lists in boxes e.g. task information or about box */
.property {
	clear: both;
	height: 0em;				/* since I'm using spans, I need some more line spacing */
}

.property .label {
	float: left;
	width: 0em;
	font-size: 10pt;
	/*  color: 000000;	*/
	text-indent: 0px; 	/* header text headng left margn?  */
}

.property .value {
	float: left;
	width: auto;
	font-size: 10pt;
	/*  color: #000000;				/* STYLE */
}


/* MODULES:  BOX - TASK INFORMATION ---------------------------------------------------------- */
.taskInformationArea .body {
		display: none;				/* collapse when first shown */
}

/* MODULES:  BOX - REVIEW COMMMENT ---------------------------------------------------------- */
.comment {
	clear: both;
}

.commentsArea .body {
	display: none;				/* collapse when first shown */
	font-size: 10pt;
	color: #000000;			/* STYLE */
}

.comment .userName {
	font-weight: bold;
	float: left;
	margin-bottom: 0px;
	padding-left: 0px;
}

.comment .date {
	font-weight: bold;
	float: right;
	margin-bottom: 0px;
	padding-right: 0px;
}

.comment .text {
	clear: both;
	padding-bottom: 0px;			/* makes bottom 'border' bigger on opera */
	padding-right: 0px;
	padding-left: 0px;
}


/* 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: 0px;
	margin-bottom: 0px;	
}

.relatedSectionHeader {
	font-size: 10pt;
	font-weight: bold;
	padding-left: 0px;			/* align with text notes */
}

.relatedItem {
	font-size: 10pt;
	margin-top: 0px;
	margin-bottom: 0px;
}

.relatedItemBullet {
	padding-left: 0px;			/* 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: 0mm;
	margin-bottom: 0mm;
}

.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: #000000;					/* 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: #22143D; 
}
.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: 0px;
	margin-top: 0px;
	font-size: 8pt;
	color: #000000;				/* 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:  0px;
	margin-bottom:  0px;
	margin-left: 0px;
}

.legendItem
{
	clear: both;
	margin-left: 0px;
}

.legendItem .item {
	float: left;
	margin-right: 0px;
}

.legendItem .label {
	float: left;
	margin-right: 0px;
}


/* 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;
        background-color: #000000;   	/* Table of Contents index text background */
}

.TOCContents .body {
	margin: 0px;		
	margin-right: 0px;	
	color: #000000;				/* STYLE */
	font-size: 8pt;
	font-weight: bold;
}

.TOCAbout {
	text-align: right;		
	vertical-align: top;
	background-image: url(../images/Parchment1.jpg);
}

.TOCAbout .collapsiblebox {
	width: 200px;
	margin: 0px;			/*  margin between table of contents and aboutBox ~~~~~~~ */
	margin-right: 0px;	
	background-image: url(../images/Parchment1.jpg);
}
.TOCAbout .body {
	background-image: url(../images/Parchment1.jpg);
}

.TOCAbout .property {
	margin-top: 15px;		/* vertical distance between lines */		
}

.TOCAbout .property .label {
	text-align: left;
	width: 5em;	     /* length of aboutBox labeles at left, or margin before data in aboutBox */
	margin-left: .4em;   /* left margin for data labels */			
}

.TOCAbout .property .value {
	text-align: left;
	margin-left: .4em;   /* left margin for data in AboutBox */			
}
.mapPreview {
	padding-top: 0px;
	padding-bottom: 0px;
	text-align: center;
	border-bottom: 0px solid #FFCC66;    /* boarder between aboutBox image and text below */
}

.contentItem1 {
	margin-top: 0px;
	clear: both;
}
	
.contentItem2 {
	margin-top: 0px;
	margin-left:7em;
	clear: both;
}

.contentItem3 {
	margin-left: 14em;
	clear: both;
}

.contentItem4 {
	margin-left: 22em;
	clear: both;
}

.contentItem5 {
	margin-left: 33em;
	clear: both;
}

.contentItem6 {
	margin-left: 44em;
	clear: both;
}

.contentItem7 {
	margin-left: 55em;
	clear: both;
}

.contentItem8 {
	margin-left: 66em;
	clear: both;
}

.contentItem9 {
	margin-left: 77em;
	clear: both;
}

.contentItemX {
	margin-left: 88em;
	clear: both;
}


/* WINDOW: OVERVIEW MAP ------------------------------------------------------------- */
/*
		body overviewMapBody 
			.div overviewDiv
			   img mapOverview
				img mapDetailed
*/

.overviewMapBody {
	background-color: #000000;				/* STYLE */
}

.overviewDiv {
	cursor: hand;
	text-align: center;
	margin-top: 0px;				/* remove once we can center horizontally */
}

img#mapOverview, img#mapDetailed {
	margin: 0px;
}

body#mapPageFooter {
	font-family: arial;
	font-size: 8pt;
	text-align: center;
	padding-top: 0px;
	vertical-align: middle;
	color: white;
	background-color: #000000;
}

