/*Set elements so that when setting width and height it specifies their total values including borders*/
		html {box-sizing: border-box} /*sets the top level of the html document to border box-sizing to achieve above*/
		*{box-sizing:inherit} /* sets all elements except pseudo elements to inherit this setting from parent*/

/* css reset parameters, this will change some default formatting settings*/
	p{padding:0; margin-top:0} /*sets top margins and all padding for all paragraphs to zero */
	p.nobottom, div, sub, sup, h2 {padding:0; margin:0} /* sets all padding and margins to zero for specified class of paragraph and other specified elements */
	ul, ol{padding-top:0; margin-top:0}
	ul.nobottom, ol.nobottom, li {padding-top:0; padding-bottom:0; margin-top:0; margin-bottom:0} /*sets top and bottom padding and margins to zero*/
/* The above helps formatting of headings used with paragraphs and the formatting of ul used for links in menu*/
	
/*DEFINE HEADER - Creates the header section where the main site menu will go and the page drop down page menu for mobile devices*/
	#header{position:fixed;
			z-index:5;
			top:0;
			left:0;
			width:100%;
			height:4.5em;
			background-color:#000f5a;
			border-bottom:3px ridge #FFFFFF; 
			border-top:3px ridge #FFFFFF}

			
/*FORMAT DIVS FOR HEADER LOGOS*/
	#logobox { position:fixed; top:0.3em; left:0.5em; width:3em; text-align:center}
	#logobox2 { position:fixed; top:0.3em; right:0.5em; width:3em; text-align:center}

	
/*FORMAT DIV FOR AUTHOR BOX*/
	#authorbox {position:fixed; 
				top:0.5em; 
				right:4em; 
				width:8em; 
				height:3.5em; 
				padding-top:0.1em;
				line-height:1.1em;
				text-align:center; 
				background:#ffffff; 
				outline:3px ridge  #ffffff;
				overflow:hidden }
				
	
	
/*FORMAT HEADER NAVIGATION*/

/*format div*/
	#nav-menu{position:fixed; top:1em; left:0;  padding-left:3.1em; padding-right:12.2em; width:100%; min-width:21.75em; text-align:center}
	/* sets the div containing the main site menu, padding settings position links and min-width ensures they wrap no smaller than a 2 x 3 grid */
/*format uls*/	
 	#nav-menu ul{list-style:none; display:inline-block; margin:0.2em 0em 0em 0em; padding:0em} 
/*format lis*/	
	#nav-menu li{float:left;  margin:0 0.3em; background:#ffffff; height:1.75em; width:5.5em; outline: 1px solid #00ffff} 
	
/*Define actual link characteristics*/
	#nav-menu a{ 
			background:#ffffff;
			height:1.75em; 
			line-height:1.6em; 
			float:left;
			width:5.5em;
			display:block;
			text-align:center;
			color:#000000;
			text-decoration:none;
			border:1px solid #000000					
			}		
	#nav-menu  a:hover{background:#ffff00;}

/* DEFINE DIV FOR SWF FILES*/
	div.flash{position:relative; z-index:0}
	
/*DEFINE LEFT MARGIN*/
	#left-sidebar{position:fixed; z-index:2; top:0; left:0; width:7em; height:100%; background:#669999}
	
/*DEFINE CONTENT NAVIGATION*/
/*Set position of menu */
	#side-menu{position:fixed; z-index:13; top:6em; left:0em}
	
/*set position of arrows which indicate submenus*/
	#side-menu ul li ul li a img{border:none; margin:0; padding:0; position:absolute; right:0em; top:0.5em}
	
/*Set ul parameters (nested uls will inherit unless overridden)*/
/* Creates a vertical column of links */
	#side-menu ul li{ position:relative} 
	
/* position of mobile menu-icon initially invisible*/
	#side-menu ul{ position:absolute;  top:-5.5em; left:0.5em; list-style:none; padding:0; margin:0; visibility:hidden}

/*puts box around chapter menu (and submenus)*/
 	#side-menu ul li ul{ position:absolute;top:4.85em; left: -0.1em; z-index:14; border:1px solid #000000; visibility:visible; }

/*Inserts lines between menu items (nested uls will inherit)*/
	#side-menu ul li ul li+li {border-top:1px solid #000000}
	
/* Set position of submenus */
	#side-menu ul li ul li ul{ position:absolute; z-index:15;  top:0.9em; left:3.2em; visibility:hidden}

	#side-menu ul li ul li ul li ul { position:absolute; z-index:16; top:0.9em; left:4em; visibility:hidden}
	
/*Set links as a menu and define link characteristics*/
#side-menu ul li a { background:url(images/menu-logo.gif); background-repeat:no-repeat; display:block; width: 42px; height: 88px;}

/*format chapter links*/
	#side-menu ul li ul li a{ 	 
				padding:0.2em;
				background:#ffffff;
				height:1.5em;
				width:6em;
				display:block;
				border:0;
				color:#000000;
				text-decoration:none;
				text-align:left;
				overflow:hidden
			 } 


/* format page links*/
	#side-menu ul li ul li ul li a{	background-color:#aaffff; width:12em;}

/* format sub-page links*/
	#side-menu ul li ul li ul li ul li a{background:#ffffff;}
	
/* highlights links on hover from chapters downward */
	#side-menu li ul li a:hover{background:#ffff00; color:#000000} 
	
/*Set visibility of sub-menus when hovering over menu elements*/	
	#side-menu ul li:hover ul{visibility:visible}  /* reveals sibling uls (chapters)*/
	#side-menu ul li:hover ul li ul{visibility:hidden} /* prevents further sibling levels inheriting visibility*/	
	#side-menu ul li ul li:hover ul{visibility:visible} /* reveals sibling uls (pages)*/
	#side-menu ul li ul li:hover ul li ul{visibility:hidden} /* prevents inheritance */	
	#side-menu ul li ul li ul li:hover ul{visibility:visible} /* reveals last sibling level uls (sub-pages)*/
	
/*FORMAT PAGE*/
	body{ color:#000000; background-color:#eeffff; margin-top: 5em; margin-left:7.6em; margin-right:2em}
	h1{font-size:1.3em; font-weight:bold}
	h2 {font-size:1.1em; font-weight:bold; display:inline}
	/* duplicate class so commented out at present.full-width{width:100%} */ /*sets a class for elements which need to occupy 100% of parent element*/

/*IMAGE FORMAT*/
	img{border: 1px solid #000000; margin:0.5em} /*default*/
	img.brd-mrg-null{border:0; margin:0} /*images with no margin and no border*/
	img.limit-width{border: 1px solid #000000; margin:0.5em; min-width:20em}/* sets a class for min width for images which scale with page width*/
	
/*SET STANDARD DIV TYPES*/
	.container{width:100%; min-width:20em; float:left} /*unused*/
	.full-width{width:100%; min-width:20em; float:left} 
	.half-width{width:48%; min-width:20em; padding:1%; float:left} 
	.third-width{width:31%; min-width:20em; padding:1%; float:left} 
	.sixty-wide{width:58%; min-width:20em;  padding:1%; float:left} 
	.forty-wide{width:38%; min-width:20em;  padding:1%; float:left} 
	.thirty-wide{width:28%; padding:1%; float:left} /*unused*/

/*FORMAT TABLE CELLS IN HEADER*/
	.td_header1{background:#001f7a;  border:0; text-align:center}
	.td_header2{background:#ffffff; border:3px ridge #ffffff;text-align:center}
	
/*FORMAT TABLE TYPE 1*/
		table.grid{border-collapse:collapse; border:1px solid black}
	table.grid th{border:1px solid black; background-color:#ffff66; text-align:left;padding-left:0.5em; padding-right:0.5em}
	table.grid td{border:1px solid black; background-color:white; text-align:left; padding-left:0.5em; padding-right:0.5em}

/*FORMAT BULLETED LISTS*/
ol.rom-low {list-style-type: lower-roman}	

/*RESPONSIVE FORMATTING*/

/*INCREASE HEADER DEPTH AND VERTICALLY RE-ALIGN ELEMENTS WHEN NAV MENU WRAPS */
@media screen and (max-width: 53.2em){
		#header{height:5em}
		#nav-menu{top:0.3em}
		#logobox, #logobox2 {top:0.6em}
		#authorbox {top:0.75em }
	}

/*REMOVE ELEMENTS AND RECENTRE NAV MENU WHEN 1ST WIDTH LIMT IS REACHED SWITCH MENU TO MOBILE STYLE */
@media screen and (max-width: 35em){
	body{margin-left:1em;}
	#left-sidebar{z-index:-1;  background-color:#eeffff;}
	#authorbox{ left:-10em; visibility:hidden; overflow:hidden; width:0%; min-width:0em; outline:0px}
	#logobox { left:-10em; visibility:hidden; overflow:hidden; width:0%; min-width:0em; outline:0px}
	#nav-menu{padding-right:3.1em}
	#side-menu ul { visibility:visible}
	#side-menu ul li ul{ top:4.5em; left:-0.5em; visibility:hidden}
	}
/*REMOVE RH LOGO AND RECENTRE NAV MENU WHEN 2CND WIDTH LIMT IS REACHED */
@media screen and (max-width: 26em){
	#nav-menu{padding-right:0.1em}
	#logobox2 { left:-10em; visibility:hidden; overflow:hidden; width:0%; min-width:0em; outline:0px}
	}