/* Cascading style sheet for vertical menu of the-malvern-hills.uk website */
/* Version 1 dated 18th September 2018*/

/* centralise text on page with wrapper */

#wrapper {width: 770px; margin: 0 auto;}

/* MAIN NAVIGATION MENU FORMATTING */

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


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

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

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


/* SUB NAVIGATION MENU FORMATTING */

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


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

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

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


/* END OF NAVIGATION MENUS */



/* Preferred browser font Arial */

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

/* Set header font relative sizes and margin*/

h1 {color: #000000; font-size: 200%; margin-top: 10px; margin-bottom: 0px;}
h2 {color: #000066; font-size: 150%; margin: 20px 20px;}
h3 {color: #000066; font-size: 120%; margin: 20px 20px;}
h4 {color: #000066; font-size: 100%; margin: 20px 20px;}
h5 {color: #000066; font-size:  90%; margin: 20px 20px;}
h6 {color: #000066; font-size:  80%; margin: 20px 20px;}

/* Set paragraph font and margin */
/* Margins are all equal unless four values in order top right bottom left*/


p

{color: #000099;
font-size: 1em;
margin: 20px;
}


p.justify

{text-align: justify;
color: #000099;
font-size: 1em;
margin: 20px;
}

p.center

{text-align: center;}

p.tall

{text-align: justify;
color: #000099;
font-size: 1em;
margin: 20px;

line-height: 1.5em;
}


/* body - font family, page background (pale blue), font color (navy) and top margin 10 px below which banner fits */

body

{
font-family: Arial,Helvetica,sans-serif;
background-color: #99CCFF;
color: #000099;
margin-top: 10px;
text-align: left;
}


/* Set table width, alignment, border (outside edge of table only) width, style and color, font blue, cell background white */

table 

{
width: 770px;
border-width: 1px 1px;
border-style: solid;
border-color: #DFDFDF;
color: #000099;
background-color: #FFFFFF;
}

/* use table.body with wide grey border to enclose area below banner */

table.body

{
clear: both;
width: 770px;
border-width: 10px 10px;
border-style: solid;
border-color: #DFDFDF;
color: #000099;
background-color: #FFFFFF;
}

/* table to accommodate fixed columns set in first row */

table.fixed

{
table-layout: fixed;
width: 770px;
border-width: 1px 1px;
border-style: solid;
border-color: #DFDFDF;
color: #000099;
background-color: #FFFFFF;
}



/* set padding of table cells and internal border width, style and color */

td

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

/* set cell size for two columns of equal width */

td.equal

{
width=50%;
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: #000099;
border-width: 2px 2px;
}

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

td.img

{
padding: 2px 2px;
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;
}

#nav td
{
background-color: #c0c0c0;
}

#nav td a
{
background-color: #c0c0c0;
}

#nav td a:hover
{
background-color: #ffffff;
}


/* breaks to clear floating elements */

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


/* class to center an image */

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

/* class to pad an image */

.pad
{
padding: 5px;
}


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

.footer

{
background-color: #99CCFF;
}