/* ------------------------------------------- Global Styles -------------------------------------------
body
container
*/


/* --------------------------------- Body */

	body 
	{
      	background-image: url('Images/body.gif'); 				/* needed to get background to extend to very end in Firefox */
     	padding: 0px 0px 0px 0px;  									/* get rid of any preset padding / margins */
		margin: 0px auto 0px auto;  									/* center everything - helps IE6 issue */
		font-size: 1em; 													/* default font size - all others are scaled relative to this*/
	}

/* --------------------------------- Container */

	.container 
	{
		text-align: left;
		width: 988px;
     	padding: 0px 0px 0px 15px;										/* Offset everything 15px to right to contain the menu bar*/
		margin: 0px auto 0px auto;		
	}

	/* --- The link colours here are to pick up some odds and ends such as for CoolTree 
	
	Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
	Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!
	
	*/


	.container a:link		{text-decoration: underline; color: #FFFF99;}
	.container a:visited	{text-decoration: underline; color: #FFFF99;}
	.container a:hover	{text-decoration: underline; color: black; background: white;}
	.container a:active	{text-decoration: underline; color: #FFFF99;}


/* ------------------------------------------- Titles ------------------------------------------- */ 
/* All Titles clear the floats and so are used between data blocks (use Headings within data blocks) 
pageTitle		Mainly the top of the page
partTitle		Between major sections
sectionTitle	Sections
------------------------------------------- */



/* --------------------------------- Page Title 
Used primarily at the top of a page
Contains the Logo (left) and overlaid by the Search Box (right) 
*/

	.pageTitle
 	{
		clear: both;

		background-color: #44677b; 							/* Matches Logo */
      background-image: url('Images/kiwicelts.gif');	/* Logo */
		background-position: top left;
		background-repeat: no-repeat;

		height: 56px;												/* Set to exactly fit the logo*/
		width: 100%;													/* Leave space for padding */
		margin: 0px 0px 15px 0px;
		padding: 0px 0px 0px 0px;
		
		font-size: 250%;
		font-weight: bold; 
		font-family: "Comic Sans MS", "Arial", sans-serif;
		color: #bbbbbb;
		text-align: right; 
	}

	.pageTitle sup				{font-size: 50% ; vertical-align: 15px; }

	.pageTitle a:link 		{text-decoration: none; color: #7FFF99;}
	.pageTitle a:visited 	{text-decoration: none; color: #7FFF99;}
	.pageTitle a:hover 		{text-decoration: none; color: black; background: white;}
	.pageTitle a:active 		{text-decoration: none; color: #7FFF99;}


		
	.headerMessage
	{
		background-color: #44677b; 							/* Matches Logo */
		font-weight: normal; 
		font-family: "Arial", sans-serif;
		text-align: center;
		font-size: 25%;
		color: #ffffff;
	}
		

/* --------------------------------- Part Title
Used for titles between groups of sections */

	.partTitle
	{
		clear: both;
	
		background-color: #7a6c5f;

		height: 30px;
		width: 80%;
		margin: 5px 0px 5px 0px;
		padding: 0px 0px 0px 0px;

		font-size: 140%; 
		font-weight: bold;
		font-family: "Comic Sans MS", "Arial", sans-serif;
		color: #ffffff;
		text-align: center;
		vertical-align: middle;
	}

	.partTitle a:link 		{text-decoration: underline; color: #FFFF99;}
	.partTitle a:visited 	{text-decoration: underline; color: #FFFF99;}
	.partTitle a:hover 		{text-decoration: underline; color: black; background: white;}
	.partTitle a:active 		{text-decoration: underline; color: #FFFF99;}
	

/* --------------------------------- Section Title
Used for titles above each section */

	.sectionTitle
	{
		clear: both;
	
		background-color: #44677b;

		height: 23px;
		width: 65%;
		margin: 5px 0px 5px 0px;
		padding: 0px 0px 0px 0px;

		font-size: 100%; 
		font-weight: bold;
		font-family: "Comic Sans MS", "Arial", sans-serif;
		color: #ffffff;
		text-align: center;
		vertical-align: middle;
	}

	.sectionTitle a:link 		{text-decoration: underline; color: #FFFF99;}
	.sectionTitle a:visited 	{text-decoration: underline; color: #FFFF99;}
	.sectionTitle a:hover 		{text-decoration: underline; color: black; background: white;}
	.sectionTitle a:active 		{text-decoration: underline; color: #FFFF99;}

	
/* --------------------------------- Notes Title 
Used for the title to the notes and references boxes --------------------------------- */

	.noteTitle
	{
		clear: both;
	
		background-color: #7a6c5f; 

		height: 23px;
		width: 50%;
		margin: 5px 0px 5px 0px;
		padding: 0px 0px 0px 0px;

		font-size: 100%; 
		font-weight: bold;
		font-family: "Comic Sans MS", "Arial", sans-serif;
		color: #ffffff;
		text-align: center;
		vertical-align: middle;
	}


	.noteTitle a:link 		{text-decoration: underline; color: #FFFF99;}
	.noteTitle a:visited 	{text-decoration: underline; color: #FFFF99;}
	.noteTitle a:hover 		{text-decoration: underline; color: black; background: white;}
	.noteTitle a:active 		{text-decoration: underline; color: #FFFF99;}

	
/* --------------------------------- ToDo Title 
Used for the title to a To Do list*/

	.todoTitle
	{
		clear: both;
	
		background-color: #7a6c5f; 

		height: 23px;
		width: 50%;
		margin: 5px 0px 5px 0px;
		padding: 0px 0px 0px 0px;

		font-size: 100%; 
		font-weight: bold;
		font-family: "Comic Sans MS", "Arial", sans-serif;
		color: #ffffff;
		text-align: center;
		vertical-align: middle;
	}


	.todoTitle a:link 		{text-decoration: underline; color: #FFFF99;}
	.todoTitle a:visited 	{text-decoration: underline; color: #FFFF99;}
	.todoTitle a:hover 		{text-decoration: underline; color: black; background: white;}
	.todoTitle a:active 		{text-decoration: underline; color: #FFFF99;}
	
	
/* ------------------------------------------- Text Content Blocks ------------------------------------------- */ 
/* These blocks are where the text goes.
 
storyBox 		This is the full width and is where the main text goes
notesBox			as for the storyBox
todoBox			as for the storyBox

infoBox			Quotes etc - centered in the block that it resides
infoBoxLeft		Quotes etc - floats to Left as a sidebar in any block
infoBoxRight	Quotes etc - floats to Right as a sidebar in any block
specBox			as for info box, but it is highlighted to show that it is speculation rather than 'fact'

infoTableBox	container for:
infoTable		as for info box, but it contains a table. Width is set in each instance.
infoTableLeft	as for info box, but it contains a table. Width is set in each instance. Floats to Left.
infoTableRight	as for info box, but it contains a table. Width is set in each instance. Floats to Right.

treeBox			container for:
descTree			Ancestor tree, Clears floats and it is the full width of window
ancsTree			Descendant tree, Clears floats and it is the full width of window

imageBox			Images - centered in the block that it resides
imageBoxLeft	Images - floats to Left as a sidebar in any block
imageBoxRight	Images - floats to Right as a sidebar in any block

alignBox			clears floats to get subequent boes in line
------------------------------------------- */

/* --------------------------------- Story Block */

	.storyBox
	{

		clear: both;                /* Clear */
		
		background-color: #4c3f36;
		background-image: url('Images/body.gif');
		width: 100%;
		margin: 4px 0px 5px 0px;
		padding: 0px 0px 0px 0px; 

		font-size: 90%; 
		font-weight: normal;
		font-family: "Arial", sans-serif;
		color: #ffffff;
		text-align: left; 
		vertical-align: top; 
	}

	.storyBox h1
	{
		font-size: 130%; 
		font-family: "Arial", sans-serif;
		font-weight: bold;
		text-align: left; 
	}

	.storyBox ul			{list-style-type: disc;	}
	.storyBox ol			{list-style-type: decimal;	}
	.storyBox ul ol 		{list-style-type: disc;	}  /* unordered list in an ordered list */
	.storyBox li			{margin: 5px 0px 0px 0px; }
		
	.storyBox a:link 		{text-decoration: underline; color: #FFFF99;}
	.storyBox a:visited 	{text-decoration: underline; color: #FFFF99;}
	.storyBox a:hover		{text-decoration: underline; color: black; background: white;}
	.storyBox a:active 	{text-decoration: underline; color: #FFFF99;}

	
/* --------------------------------- Notes & References */

	.noteBox
	{
		clear: both;                /* Clear */
		
		overflow: hidden; /* possible fix for IE6 screen width issue */
		
		background-color: #4c3f36;
		background-image: url('Images/body.gif');

		width: 100%;
		margin: 4px 0px 5px 0px;
		padding: 0px 0px 0px 0px; 

		font-size: 90%; 
		font-weight: normal;
		font-family: "Arial", sans-serif;
		color: #ffffff;
		text-align: left; 
		vertical-align: top; 
	}

	.noteBox	ul				{list-style-type: disc;}
	.noteBox	ol				{list-style-type: decimal;}
	.noteBox	ul ol  		{list-style-type: disc;}		/* unordered list in an ordered list */
	.noteBox li				{margin: 5px 0px 0px 0px;}

	.noteBox	a:link		{text-decoration: underline; color: #FFFF99;}
	.noteBox	a:visited	{text-decoration: underline; color: #FFFF99;}
	.noteBox	a:hover		{text-decoration: underline; color: black; background: white; }
	.noteBox	a:active		{text-decoration: underline; color: #FFFF99;}
	

/* --------------------------------- To Do */
	.todoBox
	{
		clear: both;                /* Clear */
		
		background-color: #4c3f36;
		background-image: url('Images/body.gif');

		width: 100%;
		margin: 4px 0px 5px 0px;
		padding: 0px 0px 0px 0px; 

		font-size: 90%; 
		font-weight: normal;
		font-family: "Arial", sans-serif;
		color: #ffffff;
		text-align: left; 
		vertical-align: top; 
	}

	.todoBox	ul				{list-style-image: url('Images/question2.gif');}
	.todoBox	li				{margin: 15px 0px 0px 0px;}
	.todoBox	a:link 		{text-decoration: underline; color: #FFFF99;}
	.todoBox a:visited 	{text-decoration: underline; color: #FFFF99;}
	.todoBox a:hover 		{text-decoration: underline; color: black; background: white;}
	.todoBox a:active 	{text-decoration: underline;	color: #FFFF99;}

	
/* --------------------------------- Information Box */ 

	.infoBox
	{
		clear: both;                /* Clear */

		background-color: wheat;
      background-image:url('Images/info.gif');
      background-repeat:no-repeat;
      background-position: top right;

		border: 2px solid black; 
		width: 75%;
		padding: 10px 35px 10px 10px; 
		margin: 10px auto 10px auto; 
		min-height: 50px; 			/* Make sure it is higher than the graphic */
		
		font-size: 90%;
		font-weight: normal;
		font-family: "Arial", sans-serif;
		color: #000000;
	}

	.infoBox h1				{font-size: 130%;	font-family: "Arial", sans-serif; font-weight: bold; text-align: left;}
	.infoBox a:link 		{text-decoration: underline; color: darkblue;}
	.infoBox a:visited	{text-decoration: underline; color: darkblue;}
	.infoBox a:hover		{text-decoration: underline; color: black; background: white; }
	.infoBox a:active		{text-decoration: underline; color: darkblue;}

/* --------------------------------- Speculation Box */
	.specBox
	{
		clear: both;                /* Clear */

		background-color: teal;
      background-image:url('Images/question1.gif');
      background-repeat:no-repeat;
      background-position: top right;

		border: 2px solid tomato; 
		width: 75%;
		padding: 10px 30px 10px 10px; 
		margin: 10px auto 10px auto; 
		min-height: 50px; 			/* Make sure it is higher than the graphic */
		
		font-size: 90%;
		font-weight: normal;
		font-family: "Arial", sans-serif;
		color: white;
	}

	.specBox h1				{font-size: 130%;	font-family: "Arial", sans-serif; font-weight: bold; text-align: left; }
	.specBox	a:link 		{text-decoration: underline; color: skyblue;}
	.specBox a:visited	{text-decoration: underline; color: skyblue;}
	.specBox a:hover		{background: white; text-decoration: underline; color: black;}
	.specBox a:active		{text-decoration: underline; color: skyblue;}

	
/* --------------------------------- Information Table 
Lives inside infoTableBox or infoTableLeft or infoTableRight
Set width in the Div, the table width is 100% 
Div centers text to allow for captions*/

	.infoTableBox
	{
		clear: both;

		margin: 10px auto 10px auto;

		font-size: 90%; 
		font-weight: bold;
		font-family: "Arial", sans-serif;
		color: #ffffff;
		text-align: center; 		
	}
	
	.infoTableLeft
	{
		clear: both;
		float: left;
		
		margin: 10px 0px 10px 0px;

		width: 100%;
		font-size: 90%; 
		font-weight: bold;
		font-family: "Arial", sans-serif;
		color: #ffffff;
		text-align: center; 		
	}
	
	.infoTableRight
	{
		float: right;
		
		margin: 10px 0px 10px 0px;

		width: 100%;
		font-size: 90%; 
		font-weight: bold;
		font-family: "Arial", sans-serif;
		color: #ffffff;
		text-align: center; 		
	}
	
	.infoTable
	{
		background-color: wheat; 
/* this can over-write the data so omit for now
      background-image:url('Images/letter-i.gif');
      background-repeat:no-repeat;
      background-position:bottom right;   */

		width: 100%;
		table-layout: fixed;
		border-collapse: collapse;

		border-top: dimgray solid 3px ;
		border-right: gray solid 3px ;
		border-bottom: gray solid 3px ;
		border-left: dimgray solid 3px ;

		text-align: left;		 
		font-size: 90%; 
		font-weight: normal;
		margin: 3px auto 3px auto;
	}

	.infoTable	tr				{vertical-align: top; color: #000000;}
	.infoTable	a:link		{text-decoration: underline; color: darkblue;}
	.infoTable	a:visited	{text-decoration: underline; color: darkblue;}
	.infoTable	a:hover		{background: white; text-decoration: underline; color: black;}
	.infoTable	a:active		{text-decoration: underline; color: darkblue;}

	
/* --------------------------------- Sidebar - Left Aligned */
	.sidebarLeft	
	{
		clear: both;
		float: left;
		
		background-color: wheat;
      background-image:url('Images/letter-i.gif');
      background-repeat:no-repeat;
      background-position:top left;

		border: 2px solid black; 
		width: 30%;
		padding: 3px 3px 3px 15px; 
		margin: 0px 3px 3px 3px;
		min-height: 50px; 			/* Make sure it is higher than the graphic */

		font-size: 85%; 
		font-family: "Arial", sans-serif;
		color: #000000;
		text-align: left; 
		vertical-align: top;
	}

	.sidebarLeft	h1				{font-size: 130%; font-family: "Arial", sans-serif; font-weight: bold; text-align: left;}
	.sidebarLeft	a:link		{text-decoration: underline; color: darkblue;}
	.sidebarLeft	a:visited	{text-decoration: underline; color: darkblue;}
	.sidebarLeft	a:hover		{background: white; text-decoration: underline; color: black;}
	.sidebarLeft	a:active		{text-decoration: underline; color: darkblue;}

	
/* --------------------------------- Sidebar - Right Aligned */
	.sidebarRight	
	{
		float: right; 

		background-color: wheat;
      background-image:url('Images/letter-i.gif');
      background-repeat:no-repeat;
      background-position:top right;

		border: 2px solid black; 
		width: 30%;
		padding: 3px 15px 3px 3px; 
		margin: 0px 3px 3px 3px;
		min-height: 50px; 			/* Make sure it is higher than the graphic */
		
		font-size: 85%; 
		font-weight: normal;
		font-family: "Arial", sans-serif;
		color: #000000;
		text-align: left; 
		vertical-align: top;
	}

	.sidebarRight	h1				{font-size: 130%;	font-family: "Arial", sans-serif; font-weight: bold; text-align: left;}
	.sidebarRight	a:link		{text-decoration: underline; color: darkblue;}
	.sidebarRight	a:visited	{text-decoration: underline; color: darkblue;}
	.sidebarRight	a:hover		{background: white; text-decoration: underline; color: black;}
	.sidebarRight	a:active		{text-decoration: underline; color: darkblue;}


/* --------------------------------- Tree Box */
	.treeBox
	{
		clear: both;
		text-align: center;
		margin: 10px auto 10px auto;
		width: 95%;
	}
	
	.treeBox .descTree
	{
		background-color: #f0f0ff; 
      background-image:url('Images/tree.gif');
      background-repeat:no-repeat;
      background-position:top right;

		width: 100%;
		margin: 10px auto 10px auto;
		padding: 3px 3px 3px 3px; 

		table-layout: fixed;
		border-collapse: collapse; 
		
		border-top: 	#0000ff solid 3px ;
		border-right:	#6495ED solid 3px ;
		border-bottom:	#6495ED solid 3px ;
		border-left:	#0000ff solid 3px ;
	}

	.treeBox .ancsTree
	{
		background-color: #f0f0ff; 
      background-image:url('Images/tree.gif');
      background-repeat:no-repeat;
      background-position:bottom right;

		width: 100%;
		margin: 10px auto 10px auto;
		padding: 3px 3px 3px 3px; 

		table-layout: fixed;
		border-collapse: collapse;

		border-top: 	#0000ff solid 3px ;
		border-right:	#6495ED solid 3px ;
		border-bottom:	#6495ED solid 3px ;
		border-left:	#0000ff solid 3px ;

	}

	.treeBox tr				{vertical-align: top; color: black;}
	.treeBox td				{text-align: center; font-size: 75%;}

	.treeBox a:link		{text-decoration: underline; color: blue;}
	.treeBox a:visited	{text-decoration: underline; color: blue;}
	.treeBox a:hover		{text-decoration: underline; color: white; background: blue;}
	.treeBox a:active		{text-decoration: underline; color: blue;}

	
/* --------------------------------- Image Boxes */

	.imageBox
	{
		margin: 	0px 0px 0px 0px;
		padding: 5px 5px 10px 5px; 

		font-size: 90%; 
		font-weight: bold;
		font-family: "Arial", sans-serif;
		color: #ffffff;
		text-align: center; 		
	}
	

	.imageBoxLeft
	{
		clear: both;                /* Clear */
		float: left;

		margin: 	0px 0px 0px 0px;
		padding: 5px 5px 10px 5px; 

		font-size: 90%; 
		font-weight: bold;
		font-family: "Arial", sans-serif;
		color: #ffffff;
		text-align: center; 		
	}


	.imageBoxRight
	{
		float: right;

		margin: 	0px 0px 0px 0px;
		padding: 5px 5px 10px 5px; 

		font-size: 90%; 
		font-weight: bold;
		font-family: "Arial", sans-serif;
		color: #ffffff;
		text-align: center; 		
	}
	
	img
	{
		border: 0;
	}

/* --------------------------------- Footer --------------------------------- */
	.footer
	{
		clear: both;
		
		width: 100%;
		margin: 	10px 0px 0px 0px;
		padding: 0;

		font-size: 11px; 
		font-weight: bold;
		font-family: "Verdana", sans-serif;
		color: #cccccc;
		text-align: center;
	}

	.footer table
	{
		width: 100%;
		background-color: #44677b;
		margin: 0;
		padding: 0;
	}
	
	.footer td
	{
		vertical-align: middle;
		text-align: center;
		margin: 0;
		padding: 0;
	}	
	
	
/* --------------------------------- alignBox 
This is an empty box used to align boxes after floats
Usage:
		<div class="alignBox">&#160;</div>
		<p>

		or
		<div class="alignBox"><hr></div>
		<p>
		
*/

	.alignBox
	{
		clear: both;
	}
	
	
/* --------------------------------- Slideoutmenu (ssm) --------------------------------- */

	#basessm A:link		{text-decoration: underline; color: white;}
	#basessm A:visited	{text-decoration: underline; color: white;}
	#basessm A:hover		{background: white; text-decoration: underline; color: black;}	
	#basessm A:active		{text-decoration: underline; color: white;}
	
	/* for the Search*/
	#basessm input 		{font-size: 150%;}
	#basessm select		{font-size: 150%;	}
	
/* --------------------------------- Map Styles used on the Google Maps Pages --------------------------------- */

	.mapOdd
	{
		background-color: #606060;
		color: white;
		text-align: left;
		font-family: arial; 
		font-size: 90%;
	}
	
	.mapEven
	{
		background-color: #4383a8;
		color: white;
		text-align: left;
		font-family: arial; 
		font-size: 90%;
	}
	
   
   .mapButton
   {
      color: #ffffff;
      background: #8098b0;
      border: 2.5px outset lightblue;
		font-size: 65%;
		font-family: arial;
		margin: 0;
		padding: 0;
   }	
	
   .mapStylePopup
   {
	   color: black;
      background: #ffffff;
		width: 330px;
		font-family: arial;
		font-size: 80%;
   }	   

	.mapInputBox
	{
		font-size: 65%;
	}
	
	.mapStyleHead
	{
		font-size: 130%;
	} 
	
	.mapStyleFoot
	{
		font-size: 90%; 
	}	

	.mapStyleTB
	{
		font-weight: bold;
		text-align: center;
		background-color: #00ff00;
	}
	
	.mapStyleCol1
	{
		width: 25%;
		vertical-align: top;
		background-color: #dddddd;
	}

	.mapStyleCol1I
	{
		width: 30%;
	}

	.mapStyleCol2
	{
		width: 70%;
		vertical-align: top;
		color: black;
	}

	.mapStylePopup A:link		{text-decoration: underline; color: blue;}
	.mapStylePopup A:visited	{text-decoration: underline; color: blue;}
	.mapStylePopup A:hover		{text-decoration: underline; color: black;}	
	.mapStylePopup A:active		{text-decoration: underline; color: blue;}

/* Links to maps */
	A.mapLink:link			{text-decoration: underline; color: blue;	background:#dddddd}
	A.mapLink:visited		{text-decoration: underline; color: blue; background:#dddddd}
	A.mapLink:hover		{text-decoration: underline; color: black; background:#dddddd}	
	A.mapLink:active		{text-decoration: underline; color: blue; background:#dddddd}


/* --------------------------------- Ideas to try --------------------------------- */

.storyBox blockquote 
	{
		background-image: url("../javascripts_styles/Images/faderight.jpg"); background-repeat: repeat; background-color: #113322;
      margin:1em 20px;
      padding:5px 0;
      border:2px solid #356;
      border-width:2px 0;
		width: 800px;
		
  }
  
.storyBox blockquote p 
	{
		margin:.5em 0;
	}