/* stylesheet for new WELNEY WEBSITE pages */

/* reset browser styles */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, form, blockquote
					{ padding: 0px; margin: 0px; font-size: 100%; font-weight: normal;}
ol					{ margin-left: 0px;   list-style: decimal; }
ul 					{  } /* original values  list-style:square ;margin-left: 0px;  padding:0px; were deleted in order for Information page to work*/
img				{ border: 0;}
/* end reset browser styles */

body			{	background: white;/* xmas 2012 was #00b1ae url('../images/christmas-background-tiles147-150x150.gif') */
}			
.page,
.header,
.normal,
.retro		{ 	/* this styles header (banner) table and main table of page; font-family & colour should be inherited unless stated below.,*/
					width: 960px; 
					table-layout:fixed;
					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: Ebrima, Arial; 
					font-size: 11pt; 
					color: maroon; 
					padding: 0px;
					margin-top:15px; 
					margin-bottom:15px;
					border-spacing:0; /* this is CSS equivalent to HTML cell-spacing */
					background:#d4ecfb;  /* was ccffff  bright blue*/
}

.header		
				{ 	height: 140px; 
					border-bottom :0px; 	/* prevents double-width border effect with main page table */
} 
.logocell,
.sidecol		{	width:22%;
					background-color: white;
					font-size:10pt;   
					border-top:0px; 
					text-align:center; 
					margin-left:auto;
					margin-right:auto;
}

.logocell	{	vertical-align:middle;
					border-bottom:1px blue solid; 
					
}

.sidecol		{	 vertical-align:top;
					text-align:center;
}

.titlecell,
.narrative,
.report		{	width: 56%;
}
.titlecell		{
					background-color:white;
					background-image: url('../photos/banner/sunset-over-flooded-washes.jpg' );
					background-repeat: no-repeat;
					background-position: center; 
					vertical-align: middle;
					border-bottom:1px blue solid; 

}
.page,
.header,
.sidecol,
.narrative,
.lb,
.retro,
.retro-col,
.report
			{ 		border: 1px blue solid; 
					border-collapse	: collapse; 
} 

.narrative,
.report		{ 	text-align :left;
					line-height: 166%; 
					margin:10px; 
					padding-left:20px; 
					padding-right:20px; 
					vertical-align:top; 
}
.narrative,
.sidecol	{		border-top:none;
					border-bottom:none
 }
 .sidecol {		vertical-align: top;
  					text-align:center;
	
}
 .top		{		border-top:1px blue solid
 }
 .bottom	{	border-bottom:1px blue solid
}
.retro	{		background-color:#dfffff;
					table-layout:fixed;
					text-align:justify;
					line-height: 130%; 
					color:blue
					

}
.retro-col
			{		width:960px;
					margin:0px; 
					padding-left:10px; 
					padding-right:10px; 
					vertical-align:middle; 
}
.lb					{ background: #d4ecfb; height:25px; font-size: 10pt; text-align: center; }
blockquote	{ margin-top: 1em; margin-right: 1.2em; margin-bottom: 1em; margin-left: 1.2em; text-align: justify; line-height:166%; font-family:Arial; text-align:justify }  
								/* you can nest blockquotes, ie put a blockquote within another one, to increase overall or occaisional  indext*/
		
h1					{ font-family: "Comic Sans MS";	font-size: 18pt;	font-weight: normal; color: blue; text-align: center; } /* for Website name*/
h2					{ font-family: "Verdana";	 font-size: 14pt;	font-weight: bold; color: white; text-align: center;  } /* for page title*/
h3					{ font-family: "Verdana";	font-size: 12pt;	font-weight: bold; color: maroon; text-align: center; } /* for page sub title*/
h4					{ font-size: 11pt;	font-weight: bold; color: maroon; text-align: left; } /* for page sub-sub title*/
h5					{ font-family: "Comic Sans MS"; font-size : 10pt;	 color: white; text-align: center; } /* for  page creation date/page update*/
h6					{ font-size: 10pt;	font-weight:normal; color: maroon; text-align: center; } /*  */

.pagedate		{ font-family: "Tahoma";	font-size: 10pt;	font-weight: normal; color: maroon; text-align: center; } /* for  page creation date/page update*/

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


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. */  
	{
 					display: block;
 					list-style: none;
 					height: auto;
 					margin-left:auto;
 					margin-right:auto;
}
ul.nav,
.listhead,
ul.heading,	
ul.nav li,							/* 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. */  
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 */
ul.nav ul.nav ul.nav ul.nav li:hover ul	 /* 4th level */
	{
 					width: 185px;
 					
}

ul.nav2,
ul.nav2 li
	{				height:auto;
					overflow:visible;
					width:auto;
					font-family:Tahoma;
					
}
ul.nav		{ 
					border: 1px blue solid;  /* border is only on outer box */
					border-collapse: collapse; 
}
ul.heading, 
.listhead	{
					text-align:  center; 
					background-color:#ccffff; 
					border: 1px blue solid; 
					border-bottom: none;
}
ul.nav li,
ul.nav2 li		{
					display: block; 
					background: #ccffff ; 
					text-align: left; 
					text-indent: 4px; 
					height: 20px; /* do not set to auto, display is awful & jumpy */
}
.level-1	{		
					border-top:0px blue 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:#ccffff url(../images/icons/hover-light-blue.jpg) repeat-x;
}
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,
ul.nav ul.nav ul.nav ul.nav li ul,
ul.nav ul.nav ul.nav ul.nav ul.nav li ul
		{
					background-color:#ccffff;/* 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 */
ul.nav ul.nav ul.nav ul.nav li ul	/* 5th level */
		{ 
					height: auto;
					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 */
ul.nav ul.nav ul.nav ul.nav li:hover ul	 /* 4th level */
		{ 			
					overflow:visible; 
					height:auto;
					position: relative;
					left: 165px; 
					top: -16px;
					border: 1px blue 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. */
		{
					width:auto;	
}

.smltxt			{ font-size: 10pt }
.center			{ text-align: center;}
.left				{ text-align:left }	
.right				{ text-align: right}
.bold				{ font-weight:bold }
.white			{ background: white; }
.red				{ color:red }
.lightcyan		{ background:#ccffff;}
.grey				{ background:#d7d7d7;}
.blue				{ color:blue;}
.aqua			{ background:aqua}
.obit				{ color: black; border-color:black; border-collapse:collapse } /* add after other class tags in obituary pages. Unfortunately, the border color does not always over-rule normal style*/
.closetxt 		{ line-height: 50%}
.rptdate			{ color:red; font-weight:bold; line-height: 250%}
.active			{ background: aqua; }

.gazette			{ background: #fff5e8; height: 140px; border: 2px blue solid; border-collapse: collapse; text-align: center; font-family:"Old English Text MT"; color:maroon; font-size: 14pt }
.luftwaffe-cross { font-family: "Wingdings 2";} /* <span class="luftwaffe-cross">Ë</span> */

/* On this website:
 'side-table' is a table with headings and cells ready-formatted in CSS on this sheet, used in the left or right colums used, generally, to show related pages
 'data table' is a table used in the main (centre) column with cells needing some formatting on the HTML page (eg position, width, colour)
 'link buttons' are horizontal navigation links at the top of each page, ready-formatted in CSS on the 'pagetop' style sheet 
 some formatting is common */


/* SIDE TABLES. st is 1 col table, st2 is 2 cols, c  is a cell, h is a heading, hx and cx are for external sites. Position, width and colour are incorporated. */
.st,
.st2,
.st-c,
.st-h,
.st-hx,
.st-cx				
{
					 border: 1px blue dotted;
					 border-collapse:collapse; 
					 background:lightcyan;
					 font-family:Arial, Helvetica, sans-serif;
					 font-size:10pt; 
					 height:25%; 
					 line-height:133%;
					 width:90% 
 }


.st-h				
{
					background: #8DCFF4; 
					text-align:center
}
.st-c,
.st-cx				
{
					text-align:left;
					padding: 0 5px 0 5px
}
.st-hx				
{ 
					background:#fbe2b8; 
					text-align:center 
}
.st-cx				
{ 
					background:#fdebcf 
}
.st-c20			
{ 
					text-align:left; 
					text-indent: 5px
}
.comment,
.today			
{ 					/* pre-formatted text boxes within a table (st) to indicate points to note. 
					Standard backbround colour can be changed on the HTML page in td tag using class */
					padding: 2px; 
					font-size: 10pt; 
					border: 1px maroon solid; 
					font-family:Arial; 
					background-color:#FFFFCC; 
					width:90%; 
					text-align :center; 
					margin-left:auto;
					margin-right:auto;
 } 	
.today				{ width:28%;
}

/* DATA TABLES.  the following codes are for data tables (dt) and data cells (dc) within tables.  Position, width and background colour are set separately */
.dt,
.dc				{ border: 1px maroon solid; border-collapse: collapse; height:20px;font-size:10pt; line-height: 110%; }
.dc				{ padding: 0 4px 2px 4px} /* top, right, bottom, left */
.dt,
.st					{ table-layout:fixed} /* instructs browsers to make all columns same width as first row */
.dc				{ border: 1px maroon dotted
	
}
/* additional cell rules for some pages e.g. pubs */
.dc-12			{ width: 12%;  background: white; }
.dc-7				{ width: 7%;  background: white; }

/* News Tables (nt) and content (nc) used in News Headlines page */
.nt					{background-color:white; border: 1px maroon solid; border-collapse: collapse; height:auto;font-size:10pt; width:90%; 
	
}
.nc				{border:1px maroon dotted; border-collapse: collapse; height:20px;font-size:10pt; text-align:left;  padding: 5px 5px 5px 5px; vertical-align:top /* top, right, bottom, left */

	
}

/* indent in left aligned cells */
.i3					{ text-indent: 3px} 
.i5					{ text-indent: 5px} 
.i6					{ text-indent: 6px} 
.i10				{ text-indent: 10px}
.i15				{ text-indent: 15px}
}

.p5				{ padding-right : 5px; }
.p10				{ padding-right : 10px;}
.p15				{ padding: 5px 5px 5px 15px }/* top, right, bottom, left */
.p20				{ padding-right : 20px; }/* padding for text in right aligned cells */

/*  CSS width values for data table cols. Otherwise set in the HTML code */
.w5				{ width:5%}
.w7				{ width:7%}
.w8				{ width:8%}
.w9				{ width:9%}
.w10				{ width:10%}
.w12				{ width:12%}
.w15				{ width:15%}
.w18				{ width:15%}
.w20				{ width:20%}
.w25				{ width:25%}
.w30				{ width:30%}
.w35				{ width:35%}
.w40				{ width:40%}
.w45				{ width:45%}

.w50				{ width:50%}
.w55				{ width:55%}

.w60				{ width:60%}
.w65				{ width:65%}
.w70				{ width:70%}
.w75				{ width:75%}
.w80				{ width:80%}
.w85				{ width:85%}
.w90				{ width:90%}
.w95				{ width:95%}
.w100			{ width:100%}
.h20				{ height:20px}
.h22				{ height:22px}