/* stylesheet version 4 for THE OUSE WASHES website */

/* reset browser styles */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, blockquote
					{ padding: 0; margin: 0; font-size: 100%; font-weight: normal;}
ol 					{ margin-left: 0;   list-style: decimal; }
ul 					{ margin-left: 0;   list-style:	square; }
img				{ border:0;}
/* end reset browser styles */

.page,
.normal,
.header		{ 	/* this styles header (banner) table and main table of page; font-family & colour should be inherited unless stated below.,*/
					width: 960px; 
					margin-left : auto; 		/* margins left & right set to auto centers page in browser window */
					margin-right: auto;  	/* margins left & right set to auto centers page in browser window */
					font-family: "Trebuchet MS";  
					color : maroon;
					background-color:#ffffcc; 
					border-spacing:0; /* this is CSS equivalent to HTML cell-spacing */
}
.page,
.header,
.titlecell,
.slideshow	{ 	/* previously included header */
					border: 2px maroon solid; 
					border-collapse: collapse;
} 
.header		{ 	height: 80px; 
					border-bottom: 0px;
					margin-top: 15px; 		/* gives a white space above page */
					
} 
.titlecell		{ 
					width: 100%; 
					height: 80px; 
					background-image: url('images/misc/headers/flooded-delph-ragged-edge.jpg' ); 
					background-repeat: no-repeat;
					background-position: center; 
					vertical-align: middle;
					border:none;
} 
.daterow	{ 
					width: 100%; 
					height : 25px; 
					background-color: white;/* was #fffdda */
					text-align: center; 
					font-size: 10pt; 
					color:green; 
					font-weight: bold; 
					border: 0px 2px 0px 2px green solid; 
					border-collapse :collapse;
}
.page		{
					table-layout: fixed; 
					padding-top: 0px;
}
.sidecol		{ 
					width: 22%; 
					font-size: 10pt; 
					border-bottom: 0px; 
					border-top: 0px; 
}
.narrative	{  	/* use for centre column */
					
					font-size: 11pt;
					border-bottom: 0px; 
					border-top: 0px; 
					vertical-align:top; 
					text-align:justify; 
					line-height: 166%; 
					margin:10px; 
					padding-left:20px; 
					padding-right:20px; } 					
.slideshow	{  /* use on stand-alone slideshoes in middle column instead of narrative. not for use within otherpages */
					background-color:#ccff99;  
					vertical-align:top; 
					padding-top:8px; 
					border-bottom:0;
} 
.comment	{ 	/*text boxes used in side columns to indicate points to note. */
					border: 1px maroon solid; 
					background-color: #fdebcf; /*sh */
					padding: 2px; 
					width: 200px; 
					text-align: center;
}
blockquote	{ 
					margin-top: 1em; 
					margin-right: 1em; 
					margin-bottom: 1em; 
					margin-left: 1em; 
					text-align: justify; 
					font-size:11pt; 
					font-family:Arial
}

h1			{ 		 /* for page title*/
					font-size: 16pt;	
					font-weight: bold; 
					color: maroon; 
					text-align : center; 
}
h2			{ 		/* for website title */
					font-size: 14pt; 
					font-weight: bold; 
					color:maroon; 
					text-align: center; 
					font-style: 
} 
h3			{ 		/* for section headings */
					font-size: 12pt; 
					font-weight: bold; 
					text-align: left
} 
h4			{ 		 /* for section sub-headings */
					font-size: 12pt; 
					font-weight: bold; 
					color: green; 
					text-align: left
}
h5			{ 		 /* for section sub-sub-headings */
					font-size: 11pt; 
					font-weight: bold; 
					color: green; 
					text-align: left; 
					text-indent:20px
}
h6			{ 		/* for project statement in head below site title*/
					font-size: 12pt;	
					font-weight: bold; 
					color: white; 
					text-align : center;
} 
.calligraphy  	{ /*  for Adventurers/BLC page title */
					font-family:"Lucida Calligraphy", "Apple Chancery", Verdana; 
					font-size:18pt;
}
a:link		{ 			/* do not amalgamate link/visted/hover - doesn't work */
					color: blue; 
					font-weight: normal; 
					font-style:normal; 
					text-decoration:none;
}
a:visited	{ 
					color: blue; 
					font-weight: normal; 
					font-style:normal; 
					text-decoration:none;
}
a:hover	{ 
					color: blue; 
					font-weight: normal; 
					font-style:normal; 
					text-decoration:underline;
}
ul			{
					list-style:disc;	
}
ul.nav,
.listhead,								/* styles a ul header as a title for nav bars */
ul.nav li:hover ul,		 			/* displays 2nd level when 1st hovered over. */
ul.nav ul.nav li:hover ul,			/* displays 3rd level when 2nd hovered over. */  
ul.nav ul.nav ul.nav li:hover ul	/* displays 4th level when 3rd hovered over. */  
	{
 					display: block;
 					list-style: none;
 					width: 200px;
 					height: auto;
}
ul.nav		{ 
					border: 1px maroon solid;  /* border is only on outer box */
					border-collapse: collapse; 
} 
.listhead	{
					text-align:  center; 
					background-color:#fbe2b8; /* light green of site centre column */
					border: 1px maroon solid; 
					border-bottom: none;
}
ul.nav li		{
					display: block; 
					background: #fdebcf;  /* top level of index - fff99d, eaf3da, e0edc5 is pale soft greygreen*/
					text-align: left; 
					text-indent: 4px; 
					width: auto; 
					border-top:1px maroon dotted ;/* 1px effectively boxes each line of top-level nav index; set to 0px to unbox*/
					height: 20px; /* do not set to auto, display is awful & jumpy */
}
.level-1	{		
					border-top:1px maroon dotted ;/* 1px effectively boxes each line of top-level nav index; set to 0px to unbox*/
}
ul.nav a:link { 
					display: block;
} 
ul.nav a:hover,
ul.nav li:hover 	{ 
					display: block;  /* display:block in li & hover makes link & background colour spread fully across cell rather than just the text; */
					background-color:white;	/* c7e19e*/

}
ul.nav a:hover	{ 
					text-decoration:underline; 
}
ul.nav ul.nav li,	
ul.nav ul.nav li ul,		
ul.nav ul.nav ul.nav li ul
		{
					background-color:#aed673;/* 2nd, 3rd & 4th levels;  same as ul.nav li:hover above */
} 

ul.nav li ul,		 				/* 2nd level */
ul.nav ul.nav li ul	,			/* 3rd level*/
ul.nav ul.nav ul.nav li ul	/* 4th level */
		{ 
					display: none; /* hides (until hovered over as below) */
} 
ul.nav li:hover ul,		 			/* displays 2nd level when 1st hovered over. */
ul.nav ul.nav li:hover ul,			/* displays 3rd level when 2nd hovered over. */
ul.nav ul.nav ul.nav li:hover ul	 /* 4th level */
		{ 
					overflow:visible; 
					position: relative; 
					left: 200px; 
					top: -16px;
					border: 1px green solid;	 /*  puts border around outer box, but not lines; seems to be inherited from ul.nav for 2nd level, but not the 3rd */
}

.smltxt      		{ font-size: 10pt }
.center     		{ text-align: center;}
.left				{ text-align: left }	 
.right          	{ text-align: right}
.bold				{ font-weight: bold }
.whitebkg      	{ background-color: white }
.white			{ color: white }
.black			{ color: black }
.red            	{ color: red }
.green         	{ color: green }
.yellow        	{ color: yellow }


.visitorcounter{
					 background: #FFFF99; 
					 height: 22px; 
					 border: 1px blue solid; 
					 border-collapse: collapse; 
					 text-align: center; 
					 vertical-align: top;
}

/* SIDE TABLES (st)   h is a heading, c  is a cell, co an open webpage, hx and cx are for external sites. 
Position, width and colour are incorporated. */
.st,				/* Side Table */
.st-c,				/* Side Table Cell */
.st-h,				/* Side Table Heading */
.st-hx,			/* Side Table Heading for eXternal Links */
.st-cx,			/* Side Table Cell for eXternal links */
.st-co	{		/*  ? */
					background:#fdebcf; 
					border: 1px maroon solid; 
					border-collapse:collapse; 
					color:maroon; 
					height:20px; 
					width:200px;
}
.st			{
					height:auto;
}
.st-h		{
					background: #fbe2b8; 
					text-align:center
}
.st-c,
.st-cx,
.st-co	{
					text-align:left; 
					padding: 0 4px 0 4px
}
.st-hx		{		background:#fbe2b8; 
					text-align: center;
}
.st-cx		{		background:#fdebcf;
}
.st-co	{		background:#fef76e;
}
.st-c20	{		text-align:left; 
					text-indent: 5px
}

/* DATA TABLES (dt). are for data tables (dt) and data cells (dc) within tables.  Position, width and background colour are set separately */
.dt					{width:100%; background-color:white; font-size:10pt; text-align:left; table-layout:fixed }
.dt,
.dc				{ border: 1px maroon solid; border-collapse: collapse; height:25px; vertical-align:top }
.dc				{ padding: 2px 4px 2px 4px; } /* top, right, bottom, left */
.dt,
.st,
.notes			{ table-layout: fixed} /* instructs browsers to make all columns same width as first row */

.dc,
.notes			{ line-height: 140% }
.notes         	{ vertical-align:top; font-size: 10pt }	

.opacity50		{	opacity:0.50; /* firefox, opera, safari, chrome */
								-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; /* IE 8 */
								filter:alpha(opacity=50); /* IE 4, 5, 6 and 7 */
								zoom:1 /* so the element "hasLayout"  or, to trigger "hasLayout" set a width or height */
							 }
							 
.