body
{

 font-family:   Georgia, Verdana, "Times New Roman", Sans-serif; 


  	background:    no-repeat center center fixed; 
	background-size: cover;

 	background-color: white;
 	color: black;

}



 
 


/* normal underlined links */


a:link {
  color: #0000cc ;
  text-decoration: underline ;
}


a:visited, a:active, a:focus {
  color: purple ;
  text-decoration: underline ;
}





/*

main navigation links
only underline when hover

*/


a.main-navigation:link {
  color: navy ;
  font-weight: bold ;
  font-family:Arial,Verdana,Sans-serif;
  text-decoration: none ;
}

a.main-navigation:visited, a.main-navigation:active, a.main-navigation:focus {
  color: navy ;
  font-weight: bold ;
  font-family:Arial,Verdana,Sans-serif;
  text-decoration: none ;
}

a.main-navigation:hover    {
  color: navy ;
  font-weight: bold ;
  font-family:Arial,Verdana,Sans-serif;
  text-decoration: underline ;
}







/*

problem: browser may not put border on linked images by default

*/


a:link img {
 border: 2px solid #0000cc
}

a:visited img, a:active img, a:focus img {
 border: 2px solid purple
}




 



/* 

these boxes are ids (one per page)

	<div id="name">	

*/


#wholepage {

 	background-color:#ffffcc;
 	color: black;

	max-width: 1300px;			/* for people who maximise the browser */ 
	margin: 50 auto; 				/* center it on page  */
	text-align: left; 	 

   	border: 2px solid black ;		
   	padding: 30px;

    	z-index: 20;

	}



#boxinpage {

 	background-color:white;
 	color: black;

	max-width: 1200px;			  
	margin: 50 auto;   	 		 
	text-align: left; 	 

   	border: 2px solid black ;		
   	padding: 30px;

    	z-index: 20;

	}
   	


#headerbox  {

 	background: rgba(238, 255, 255, 1.0);
 	color: black;

	max-width: 1300px;			  
	margin: 10 auto;   	 		 
	text-align: left; 	 

   	border: 2px solid black ;		
   	padding: 5px;

    	z-index: 20;

	}



#controlsbox  {

 	background: rgba(255, 255, 204, 1.0);
 	color: black;

	max-width: 1200px;			  
	margin: 10 auto;   	 		 
	text-align: left; 	 

   	border: 2px solid black ;		
   	padding: 20px;

    	z-index: 20;

	}


#footerbox  {

 	background: rgba(255, 255, 255, 1.0);
 	color: black;

	max-width: 1200px;			  
	margin: 10 auto;   	 		 
	text-align: left; 	 

   	border: 2px solid black ;		
   	padding: 20px;

    	z-index: 20;

	}


 
/* 

can be multiple ones of these per page 

	<div class="name">	

*/
 

div.mulbox {					 

 	background-color:white;
 	color: black;

   	border: 2px solid black ;		
   	padding: 30px;

	max-width: 1000px;			  
	margin: 20 auto;   	 		 

	text-align: left; 	 
    	z-index: 20;
	}


 
div.longwordbox {

 	background-color:white;
 	color: black;

    	width: 800;
    	word-wrap: break-word;

   	border: 1px solid black ;
   	padding: 15px;
}





/*
To do three.js background div:

base div (one per page):
 	<div id="wrapper">

full page three.js scene (one per page):
  	<div id="threecanvas">

div to float on top of it (one per page):
  	<div id="threepage">

multiple divs to go on top:  
 	<div class="threebox">
*/



/*
 we sit them on top of a wrapper
 and then we can do (position fixed, relative) relative to wrapper 
 http://stackoverflow.com/questions/16688545/scroll-div-over-another-div
*/


#wrapper  {				 
    position: absolute;
    height: 100%;
    width: 100%;
}



#threecanvas {					 

    	position: fixed;		/* will not scroll */ 
    	height: 100%;
    	width: 100%;

	z-index: -1 ;		/* in background - can put divs in front of it  */ 
 
/*
      min-height: 100%;
	margin: 0 auto; 			 
   	border: none ;		
   	padding: 0px;
    	top: 0 ;
    	left: 0 ;
*/
	}


   	 
#threepage {			  

 	background: rgba(255, 255, 255, 0);		/* transparent */ 

      position: relative;		/* will scroll */ 
      height: 100%;
    	width: 100%;

    	z-index: 10;
   
/*
   	border: none ;		
   	padding: 0;

    	left: 15% ;
	width: 800px;			  
     	position: absolute;
    	top: 0 ;
*/
	}
   	 

div.threebox {			 

 	background-color:white;
 	color: black;

   	border: 2px solid black ;		
   	padding: 30px;

      position: relative;

	max-width: 750px;			  
	margin: 100 auto;   	 		 

	text-align: left; 	 
    	z-index: 20;
	}

 




/*
 part of text on a line inside a box
 <span class=box>
*/


span.box 
{
 border: 1px solid black;
 padding: 5px;
}





/* 
=========== noprint ==========================================================

print will exclude segments marked with: 
 <DIV class=NOPRINT> 
*/

.noprint     {}

@media print {               
  .noprint {display: none}           
  }





/* 
=========== page break in print ==================================================

<h1 class="newpage">

*/


.newpage { page-break-before: always; }