/* Cascading Style sheet for Guarlford History Group Web Site*/

/* version 7 updated 26 Aug 2015 */

#wrapper {width: 780px; margin: 0 auto;} /* center page */

/* MAIN NAVIGATION BAR FORMATTING */

ul#mainNav {
	border-left: 1px solid #999999;
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}

#mainNav li {
	float: left;
	/* width: 75px; */
}

#mainNav a {
	text-decoration: none;
	color: #000000;
	font-size: 1em;

	border: 2px solid #999999;
	border-left: none;
	display: block;
	padding: 5px 5px 5px 5px;
	background: #E7E7E7;
}

/* note padding goes top, right, bottom, left */

#mainNav a:hover {
	background: #FFFFFF;
	text-decoration: underline;

}


/* SUB NAVIGATION BAR FORMATTING */

ul#subNav {
	border-left: 1px solid #999999;
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}

#subNav li {
	float: left;
	/* width: 75px; */
}

#subNav a {
	text-decoration: none;
	color: #000000;
	font-size: 1em;

	border: 2px solid #999999;
	border-left: none;
	display: block;
	padding: 5px 5px 5px 5px;
	background: #E0E0E0;
}

#subNav a:hover {
	background: #FFFFFF;
	text-decoration: underline;
}


/* END OF NAVIGATION */


/* para body and table font colour was #006600 now #003000 and background-color was #EADFDF pink now #607660 green */

/* Preferred browser font Arial */

h1,h2,h3,h4,h5,h6,p {font-family: Arial,Helvetica,sans-serif;}

/* Set font Guarlford Green, Header relative sizes and top margin*/
/* h1 changed to yellow for page heading, h6 header is for photo gallery */

h1 {color: #FFFF00; font-size: 250%; margin-top: 20px; margin-bottom: 10px;}
h2 {color: #006600; font-size: 150%; margin-top: 20px;}
h3 {color: #006600; font-size: 120%; margin-top: 20px;}
h4 {color: #006600; font-size: 100%; margin-top: 20px;}
h5 {color: #006600; font-size: 80%; margin-top: 20px;}
h6 {color: #006600; font-size: 110%; margin-top: 10px; margin-left: 5px;}

/* Set paragraph font and margin */
/* Margins are all equal unless four values in order top right bottom left*/
/* margin 5px to suit table of church services */

p

{color: #003000; font-size: 100%; margin: 5px 5px;}


p.justify

{text-align: justify; color: #003000; font-size: 100%; margin: 5px 5px;}


p.center

{color: #003000; font-size: 100%; margin: 5px 5px; text-align: center;}


/* Set body font, page background and no margin so banner full width */

body

{font-family: "Arial","Helvetica","Times New Roman"; background-color: #607660; color: #003000;}

/* Set table border, font Guarlford Green and table background white */
/* Note margin not specified as that would inset the table */
/* use html <table class="body"> in plce of <table> for text entered below banner in region 3 */

table.body 

{clear: both; width: 770px; border-style: solid; border-width: 10px; border-color: #DFDFDF; color: #003000; 

background-image: url("bgpattern.jpg"); background-repeat: repeat; background-color: #FFFFFF;}
 
/* Extra padding to go around reminsiscences and other large text boxes (tables) */
/* use html <td class="padding"> in place of <td> */

td.padding

{padding: 10px 30px 10px 30px;}

td.news

/* set padding of table cells and internal border width, style and color for news and noticeboard pages */

{padding: 10px 10px; border-width: 2px 2px; border-style: solid; border-color: #E5E5E5;}


/* table definition for Photo Gallery frames */

table.photo

{background-color: #FFFFFF; width: 760px; border-style: solid; border-color: #006600; border-width: 2px 2px;}

/* set cell border style for Photo Gallery images */

td.img

{border-style: solid; border-width: 2px 2px; border-color: #DFDFDF;}

/* set padding of cells and border style, width and color for text */

td.text

{padding: 10px 10px; border-style: solid; border-width: 2px 2px; border-color: #DFDFDF;

vertical-align: top; text-align: left;}

/* set padding for site map table data */

td.menu      {text-align: center; width: 110px;  border: solid; border-width: 2px; padding: 5px 0px;}

/* class to center an image */

.centered
{
display: block;
margin: 0 auto;
}

/* class to pad an image */

.pad
{
padding: 5px;
}

/* break to clear floating elements */

br.clear_left {clear: left;}
br.clear_right {clear: right;}
br.clear_both {clear: both;}

/* class to set footer background color to grey */

.footer

{

background-color: #DFDFDF;
}