/*........................  THIS IS STYLE.CSS .........................*/

.content        {
	width:850px;
        color:#000000;
	margin:0px auto 0px auto;
	padding: 20px; /* this is a 20px strip =either side of the content*/
	background: #eaf9ed; 
	}
table	{
	width:850px;
	border: 3; 
	}

/*table.tr	{valign: top;	
		} */
body			 		{ font: 20px Helvetica, Sans-Serif; /*width: 800px;*/} 
a					{ text-decoration: none; }
ul					{ list-style: none; } 
p	{
	margin: 15px 0; 
	font-size:20px;  
	/*word-break: break-all; */ /* leave that word-break out for ever */
	text-align: justify;
	text-justify: inter-word;
	}
div	{
	text-align: justify;
        text-justify: inter-word;
        }

ul.dropdown                             {border: 3;} /*{ position: relative; }*/
ul.dropdown li                          { font-weight: bold; float: left; background: #99CCFF;/* width: "100%";*//* padding: 0px 20x 20px;*/  }
					/* the 12px padding finally stretched the menu across the page - more experimentation needed */
/*ul.dropdown li                        { font-weight: bold; float: left; zoom: 1; background: #99CCFF; }*//* original data*/ 
/* the line above determines the style for the dropdown menu */
ul.dropdown a:hover		        { color: #000; }
ul.dropdown a:active                    { color: #66CCFF; }
ul.dropdown li a                        { display: table; padding: 4px 8px; border-right: 1px solid #333;
	 				  color: #222; }
					  /* changing "block" to "table" above to fill width *//*didn't work*/
ul.dropdown li:last-child a             { border-right: none; } /* Doesn't work in IE */
ul.dropdown li:hover                    { background: #6699FF; color: black; position: relative; }
ul.dropdown li.hover a                  { color: black; }


/* 
	LEVEL TWO
*/
ul.dropdown ul 				{ width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
/* the ul.dropdown ul width is the width of the menu element when you hover it */
ul.dropdown ul li 			{ font-weight: normal; background: #99ccFF; color: #fff; 
					  border-bottom: 1px solid #ccc; float: none; }
/* ul.dropdown ul li concerns the list elements that drop down from the main menu - so background ffffff turns the background white. the color element doesn't seem to have an affect */					  
									  
                        	        /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a			{ border-right: none; width: 100%;} /* display: inline-block; } */
					/*commenting out inline-block from above*/

/* 
	LEVEL THREE
*/
ul.dropdown ul ul 			{ left: 100%; top: 0; }
ul.dropdown li:hover > ul 		{ visibility: visible; }
ul.dropdown li.hover 			{ background: #0099FF; color: black; position: relative;  } 
/* ul.dropdown li.hover background is the bg colour when you hover over the menu iyem */
/* it seems there are a few more elements to discover, but let's get the menu width sorted, then the "top of page reappearing, then mobile friendly, then a new menu system based on php */