/* MOBILE PHONE version of stylesheet version 5-r (rounded boxes) for THE OUSE WASHES website
 essentially providing a page that will auto fit any phone or small tablet. Font sizes increased considerably in line with recomendations but still small on some devices.*/

/* 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 */

body		{		background: white url('images/misc/.jpg'); /*xmas 2012 was  ThreeDShadow url('images/misc/christmas-background-tiles155-150x150.jpg')  */
}
.headerbox {	
  					width: auto; /*960 overall width of ROUNDED box  - same as page below*/
					text-align: center;
					margin-left : 10px; 		/* margins left & right set to auto centers page in browser window */
					margin-right: 10px;  	/* margins left & right set to auto centers page in browser window */
}
.header		{ 	/* this styles header (banner) table which holds logocell and top-slides */
					width: 99%; /* 595 941/*  */ */
					height:170px;
					margin-top: 10px; /* gives a space above page */
					margin-left : 5px; 		/* margins left & right set to auto centers page in browser window */
					margin-right: 5px;  	/* margins left & right set to auto centers page in browser window */
					margin-bottom: 10px;		/* gives a space below page */
					font-family: Ebrima, Verdana, Arial;  
					color : maroon;
					border-spacing:0; /* this is CSS equivalent to HTML cell-spacing */
					

}
.logocell-sp
				{	width:auto;/*150  220 */
					background-color: #fffdda;
					text-align:center; 
					vertical-align:middle;
					margin-left:auto;
					margin-right:auto;
					font-size:; 
					font-weight:bold;  
					border-spacing:0px; /* this is CSS equivalent to HTML cell-spacing */
}

.titlecell		{ /* for slideshows, eg railway */
					width: auto; /* 550 712 */
					height: 171px; 
					/*set  background-image on HTML page */  
					background-repeat: no-repeat;
					background-position: center; 
					vertical-align: top;
					border:none;
}
.top-slides	{ 
					width: auto; /* 712 must be same or less than header minus logocell */
					border:none;
					border-spacing:0px; /* this is CSS equivalent to HTML cell-spacing */
}
.side-slides	{ 
					width: 200px; /* 712 must be same or less than header minus logocell */
					height:150px;
					border:none;
					border-spacing:0px; /* this is CSS equivalent to HTML cell-spacing */
					background-color: #fffdda;

}


.page	{ 	/* this styles main table of page; font-family & colour should be inherited unless stated below.,*/
					width: auto;
					table-layout: fixed;
					background-color:#ccff99; 
					border: 1px green solid;
					border-spacing: 0; /* this is CSS equivalent to HTML cell-spacing */
					border-collapse: collapse;
					margin-top: 15px;
					margin-left : 10px; 		/* margins left & right set to auto centers page in browser window */
					margin-right: 10px;  	/* margins left & right set to auto centers page in browser window */
					margin-bottom: 0px;		/* gives a space below page */
					font-family: Verdana;
					font-size: 24px;
					color : maroon;
					line-height: 130%; 
					vertical-align: top; 
					text-align: justify; 
					padding-left: 16px; 
					padding-right: 16px;
				
}
.daterow	{ 
					width: 100%; 
					height : 15px; 
					background-color: white;/* was #fffdda */
					text-align: center; 
					font-size: 10pt; 
					color:maroon	; 
					font-weight: bold; 
}

.sidecol		
				{ 	width: 52px; /* 217 */
					background-color: #fffdda;
					margin-left : auto; 		/* margins left & right set to auto centers data in column */
					margin-right: auto;  	/* margins left & right set to auto centers data in column*/
					font-family: Calibri, Helvetica,  Arial, sans-serif; 
					font-size: 18pt; 
					text-align:center; 
}

.boxed 			/* gives top and bottom borders on rows for special pages - eg visitor comments ans stats */
				{	border-top:1px solid green; 
					border-bottom:1px solid green;
}

					
.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;
} 
.slideshow	{ 	/* previously included header */
					border: 1px green solid; 
					border-collapse: collapse;
}

.comment-box-sp {
				  	width:px; /*205 overall width of box  */
			  		margin: 0px 0px 0px 0px;
			  		font-family: Ebrima, Helvetica,  Arial, sans-serif; 
					font-size: 18pt;
}

.comment	{ 	/*text boxes used in side columns to indicate points to note. */
					border: 1px green solid; 
					background-color: #ffffcc; /* yellow-ish */
					padding: 0px; 
					width: 190px; /* 190 */
					height: 100px;
					text-align: center;
					margin-left:auto; /* left & right at auto centers in column */
					margin-right:auto;
					line-height:120%;
					font-size:18pt;
					
					
}


.navtexthead	{ 	/*heading1 for text used in side nav box. */
					font-family: Ebrima, Helvetica,  Arial, sans-serif; 
					font-size: 18pt;
					background-color:#ffcc99; 
					color:green; 
					font-weight:bold;
					width: 290px; /* 202 */
					text-align: center;
					line-height:2;
}
.navtext			{ 	/*text used in side nav box. */
					font-family: Ebrima, Helvetica,  Arial, sans-serif; 
					font-size: 18pt;
					background-color: #ffffcc; /* yellow-ish */
					width: 290px;  /* 200 when set to 202 as above, r/h border is missing */
					line-height:normal; /*no effet  */
					text-align: center;
}

blockquote	{ 
					margin-top: 1em; 
					margin-right: 2em; 
					margin-bottom: 1em; 
					margin-left: 25px; 
					text-align: justify; 
					font-size:16pt; 
					font-family:Calibri;
					line-height: 135%;
}

h1			{ 		 /* for ousewashes.info title*/
					font-size: 20pt;	
					font-weight: bold; 
					color: maroon;
					text-align : center; 
}
h2			{ 		/* for Ouse Washes Website title in logocell*/
					font-size: 20pt; 
					font-weight: bold; 
					color:green; 
					text-align: center; 
					font-family: Georgia, "Times New Roman", Times, serif;  
} 
h3			{ 		/* for section headings */
					font-size: 20pt; 
					font-weight: bold; 
					color: green; 
					text-align: center
} 
h4			{ 		 /* for section sub-headings */
					font-size: 14pt; 
					font-weight: bold; 
					color: green; 
					text-align: left
}
h5			{ 		 /* for section sub-sub-headings */
					font-size: 12pt; 
					font-weight: bold; 
					color: green; 
					text-align: left; 
					text-indent:20px
}
h6			{ 		/* for project statement in head below site title*/
					font-size: 10pt;	
					font-weight: bold; 
					color: maroon; 
					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.norm li	{		list-style:disc;   /* this and codes below sets ul values back to default, having been lost on move from welney.css to welney-new css */
					margin-left:40px;
}
ul.norm li li {		list-style:circle;
					margin-left:40px;
}

ul.nav,
ul.nav2,
.listhead,
ul.heading,								/* 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. */ 
ul.nav ul.nav ul.nav ul.nav li:hover ul	/* displays 5th level when 4th hovered over. */ 
	{
 					font-family: Ebrima, Helvetica,  Arial, sans-serif; 
					font-size: 18pt;
					line-height:1; /* effects heading not nav links */
 					display: block;
 					list-style: none;
 					width: auto;/* 200 */
 					height: auto;
}
ul.nav		{ 
					border: 0px green solid;  /* border is only on outer box */
					border-collapse: collapse; 
}
ul.heading, 
.listhead	{
					text-align:  center; 
					background-color:#ccff99; /* light green of site centre column */
					border: 1px green solid; 
					border-bottom: none;
}
ul.nav li		{
					display: block; 
					background: #ccffcc  ;  /* top level of index - ccffcc, fff99d, eaf3da, e0edc5 is pale soft greygreen*/
					text-align: left; 
					text-indent: 4px; 
					line-height:1;
					width: auto; 
					height: 35px; /* do not set to auto, display is awful & jumpy */
}
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:#ccffcc url(images/misc/hover.gif) repeat-x;

	
}
ul.nav a:link { 
					display: block;
					
} 
ul.nav a:hover	{ 
					display: block;" /* display:block in li & hover makes link & background colour spread fully across cell rather than just the text; */
					background:#ccffcc url(images/misc/hover.gif) repeat-x;	/*aed673;  c7e19e*/
					

}
ul.nav a:hover	{ 
					text-decoration:none; 
}
ul.nav ul.nav li,	
ul.nav ul.nav li ul,		
ul.nav ul.nav ul.nav li ul,
ul.nav ul.nav ul.nav ul.nav li ul
		{			background-color:#ccffcc;/* 2nd, 3rd, 4th & 5th 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 */
ul.nav ul.nav ul.nav ul.nav li ul	/* 5th level */
		{ 			display: none; 	/* hides (until hovered over as below) */
} 
ul.nav li:hover ul		 						/* displays 2nd level when 1st hovered over. */
		{ 			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 */
}
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 */
ul.nav ul.nav ul.nav ul.nav li:hover ul		/* 5th 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 */
}

.visitorcounter{
					/*  
					 height: 22px; 
					 border-collapse: collapse; 
					 text-align: center;  */ 
					 background: #FFFF99;
					 border: 1px green solid;
					 vertical-align: top;
					 display:inline;
}

ul.comment2
{					background: #fffdda  ;  /* top level of index - ccffcc, fff99d, eaf3da, e0edc5 is pale soft greygreen*/
					text-align: left; 
					text-indent: 4px; 
					width: auto; 
					height: 20px; /* do not set to auto, display is awful & jumpy */
}

.smltxt      		{ font-size: 13pt }
.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 }
.underline	{ text-decoration: underline }
.ack				{ color: maroon; 
					font-style:italic;
					font-size: 13pt;
					vertical-align:top }




/* DATA TABLES (dt). are for tables (dt) and data cells (dc) within tables.  Position, width and background colour are set separately */
.dt	,
.st		{			width:100%; 
					background-color:white;
					font-family: Ebrima, Helvetica, Arial, sans-serif; 
					font-size: 16pt;
					text-align:left; 
					table-layout:fixed;
					border: 2px green solid;
					border-collapse: collapse; 
}
.st				{	width:200px;
					background-color:#fffdda;

}
.dc,
.dc-h		{		padding: 2px 4px 2px 4px; /* top, right, bottom, left */
					border: 2px green dotted;
					border-collapse: collapse; 
					height:20px; 
					line-height: 120%;
					vertical-align:top;
}
.dc-h		{		background: #fbe2b8;
}

.notes			{ line-height: 120%; 
			       	vertical-align:top; 
			       	table-layout: fixed; /* instructs browsers to make all columns same width as first row */
}