body, div, table, td, th, tr, img,form, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dd, dt {
	margin: 0px;
	padding: 0px;
    }

/* =body Body text is black on amethyst background, 12px high 
	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
--------------------------------------------------------------------- */
body {
	background-color: #cdc0b8;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
	font-size: 13px;
	line-height: 17px;
	color:#000000;
    }

/* =hr Horizonal dividers in main content section are dark red 
-------------------------------------------------------------------- */
hr {
	margin: 1px 0px;
	line-height: 2px;
	color: #5f2f39;
    }
    
/* =ul Standard list styling. Change the gaps between the bullets and the text here 
------------------------------------------------------------------------------------- */    
ul {
	margin-right: 33px;
	margin-left: 25px;
	padding: 5px 0px 10px 0px;
    }
    
    
.extraline {
list-style: none
}
       
/* =p Default styling for paragraphs
-------------------------------------------------------- */    
p {
	margin: 10px 0px 10px 0px;
    }
    
/*--- this makes a 2px wide dark red border around all images ---*/
.imgborder {
  border:2px #5f2f39 solid;
}

/* h3= Third level headings in dark red with lots of space around
------------------------------------------------------------------- */    
h3 {
	color: #5f2f39;
	font-family: "Comic Sans MS";
	font-size: 20px;
	line-height:24px;
	font-weight: bold;
	margin-top: 25px;
	margin-bottom: 6px;
    }
    
/* h2= Second level headings in dark red with lots of space around
------------------------------------------------------------------- */    
h2 {
	color: #5f2f39;
	font-family: "Comic Sans MS";
	font-size: 24px;
	line-height:28px;
	font-weight: bold;
	margin-top: 30px;
	margin-bottom: 20px;
	text-align: center;
    }

/* h1= Standard h1 header in dark red with not quite so much space 
-------------------------------------------------------------------  */
h1{
	color: #5f2f39;
    font-family: "Comic Sans MS";
	font-size: 28px;
	line-height:32px;
	font-weight: bold;
	margin-top: 25px;
	margin-bottom: 25px;
	text-align: center;
    }

/* Remove underlining for all links */
a,
a:link,
a:visited,
a:active
{
	text-decoration: none;
/*	color: #fc7079; */
}

/* Add underlining to all links on hover */
a:hover
{
	text-decoration: underline;
}

  


/* Start of layout: Global Page Structure
---------------------------------------------------- */
#PageWrapper {
	width: 1000px;
    }
    
#ContentWrapper {
    float: left;
    width: 100%;
    }
    
#ContentColumn {
    margin: 0px 200px 0px 200px; /*set to: 0px RightColumn width 0px NavBar width */
    min-height: 1100px;
    }
    
#ContentColumn .Liner {
    padding: 20px;  /* this is the spacing just around the content column */
    }
 
#NavBar {
    float: left;
    width: 199px;   /* set as actual column width minus 1 */
    margin-left: -1000px; /* set to the same width as #PageWrapper but with minus sign */
    }
    
#NavBar  .Liner {
    padding: 40px 30px 15px 15px;  /* aligns the headers etc in the panel */
    }   
 
#RightColumn {
    float: left;
    width: 199px; /* set as actual column width minus 1 */
    margin-left: -200px;  /* set as (-RightColumn width) */
    }
 
#RightColumn .Liner {
    padding: 25px 30px 25px 20px;  /* aligns the headers etc in the panel */
    }    
 
#Footer {
    clear: both;
    width: 100%;
    height: 180px;
    margin: 0px 0px 25px 0px;  /* currently bottom of footer is not displayed */
    padding: 8px 0;  /* this is from the old WTS design, not sure if needed */
    }
 

 
/* Global Page Structure 
--------------------------------------------------------------------------------------------------------*/

#PageWrapper {
    margin: auto;
    }
           
    
/* =Top The Elements above the header image.  Change phone numbers, logo and social media buttons here.
The phone number is an image, font is Angelina.  Colour is #5f2f39 
------------------------------------------------------------------------------------------------------- */
#PageWrapper #Top {
    background-position: center top;
    width: auto;
    height: 47px;
    margin-top:20px;
    }
#PageWrapper #Top #TopLeft {
    background-image: url(../image-files/logo4.jpg);
    background-repeat: no-repeat;
    background-position: top left;
	height: 47px;
    }
#PageWrapper #Top #TopRightSM {
    float: right;
    height:35px;
    }
      
#PageWrapper #Top #Call {
    float: right;
    width: 150px;
    height:32px;
    }

/* =Header Two Elements for the Header.  #Header is just the round-cornered image.  Header base is horizontal nav bar
--------------------------------------------------------------------------------------------------------------------------- */
#PageWrapper #Header {
	background-image: url(../image-files/header1.png);
	background-repeat: no-repeat;
	background-position: center top;
	height: 298px;
	margin-top: 25px;
    }
#PageWrapper #HeaderBase {
	background-image: url(../image-files/header_base.png);
	background-repeat: no-repeat;
	background-position: center top;
	height: 41px;
    }

/* styling for the horizontal navbar in the HeaderBase.  
First we style the look of the links, then their place in the HeaderBase
Technically, these can also be used for the horizontal links in the footer
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
----------------------------------------------------------------------------- */

.HorizontalNav {
    font-family: "Comic Sans MS";
    }
 
.HorizontalNav ul {
    list-style-type: none;
    padding: 0;
    }
 
.HorizontalNav ul li {
    color: #fff;
    display: inline;
    background-color: Transparent;
    text-align: center;
    }
 
.HorizontalNav a:link {
    color: #fff;
    text-decoration: none;
    text-align: center;
    }
    
.HorizontalNav a:visited {
    color: #fff;
    text-decoration: none;
    }
    
.HorizontalNav a:hover {
    color: #fc7079;
    text-decoration: none;
    }                

#PageWrapper #HeaderBase .HorizontalNav {
	font-size: 110%;
    text-align: center;
    padding: 3px; /* controls the size and position of the link text */
    }

#PageWrapper #HeaderBase .HorizontalNav ul li {
    font-color: #fff;
    padding: 0 20px;  /* controls the space between the links */
    }    
    
/* Postioning for the page. First the wrapper for the page, which inclides all three columns
Then styling for the page background with a repeatable center bit
#NavBar on the left, #Content in the middle and #RightCol on the right 
The NavBar and RightCol are each 200px wide
----------------------------------------------------------------- */

#ContentWrapper #MainPage {
	width: 1000px;
	float: left;
	margin: 0px auto;
    }
#ContentWrapper #MainPage .MainPageMiddle {
	float: left;
	width: 1000px;
	background: url(../image-files/page_middle1.jpg);
	background-repeat: repeat-y;
	background-position: left top;
    }
#ContentWrapper #MainPage .MainPageTop {
	float: left;
	width: 1000px;
	background: url(../image-files/page_top1.jpg);
	background-repeat: no-repeat;
	background-position: left top;
    }
#ContentWrapper #MainPage .MainPageBottom {
	float: left;
	width: 1000px;
	background: url(../image-files/page_bottom1.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
    }


/*  This will now be the styling for the NavBar 
------------------------------------------------------- */

#NavBar {
	/* width:200px;
	float:left;
	padding:30px 0 50px 10px;  /*  this positions the navbar links within the red panel */
}

.NavBarLinks {
	width:200px;
	float:left;
	padding: 0px 0px 0px 5px;
}
.NavBarHeaders {
	float:left;
	height:26px;
	font-size: 22px;
	margin:10px 0 0 0;
	padding:10px 0 0 15px;
	font-family:"Comic Sans MS";
	color:#fff;
}

.NavBarHeaders a {
    text-decoration: none;
    color: #ffffff;
    }
    
.NavBarHeaders a:hover {
	color: #fc7079; text-decoration:none
    }

.NavBarLinks ul {
	float:left;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	font-family:"Comic Sans MS";
	font-size:18px;
	line-height: 20px;
	color: #cdc0b8;	
    }
    
.NavBarLinks ul li {
	float:left;
	list-style:none;
	width:160px;
	height:18px;
	padding:5px 0px 5px 0px;
	margin-left:22px;
    }

.NavBarLinks ul li a {
	float:left;
	text-decoration:none;
	color:#fff;
    }
.NavBarLinks ul li a:hover {
	color: #fc7079; text-decoration:none;
}

.NavBarLinks h3 {
	font-family:"Comic Sans MS";
	font-size:28px;
	color:#fff;
	text-align:center;
}

.NavBarLinks p {
	font-family:"Comic Sans MS";
	font-size:14px;
	color: #ffffff;
	text-align:left;
	line-height:16px;
	padding:0px 15px 0 15px;
}

.NavBarLinks hr {
	margin: 1px 25px 1px 0px;
	line-height: 2px;
    width: 75%;
	position: center;
	color: #cdc0b8; 	/* horizontal dividers in the navbar are amethyst */
    }



/* Now comes the styling for the RH column, which is 200px wide 
------------------------------------------------------------------- */
#RightColumn {
	padding:0px 0 0 0px;
    }

.RightColHeader {
	float: left;
	height: 32px;
	width: 200px;
	margin: 15px 0px 15px 0px;    /*---- this creates top and bottom space around the header and moves the header image left. ----*/
	padding: 0px 0px 0px 0px;  /*---- this aligns the text on the button ----*/
	font-family: "Comic Sans MS";
	font-size: 20px;
	color:#ffffff;
    }

.RightColLinks {
	width:200px;
    }

.RightColLinks h3 {
	font-family:"Comic Sans MS";
	font-size:14px;
	line-height: 16px;
	color: #fc7079;
	text-align:center;
	margin: 10px 40px 10px 10px; /*without this the header spills right over the edge of the panel */
    }
    
.RightColLinks  h3 a {
	color: #fc7079;
	text-decoration: underline;
	}

.RightColLinks p {
	font-family: "Comic Sans MS";
	font-size:14px;
	text-align:center;
	line-height:16px;
	color: #fff;
	margin: 10px 35px 10px -5px;
	padding: 10px 0px 10px 0px;
    }
	
.RightColLinks img {
	float:center;
	width: 150px; 
	border: 2px solid #fff;
    }	
	
.RightColLinks hr {
	width: 75%;
	position: center;
	margin: 1px 25px 1px 0px;
	color: #cdc0b8; 	/* horizontal dividers in the navbar are amethyst */
    }
    
    
/* ------------------------- page footer - this consists of a horizontal nav and a paragraph of text for the copyright ----------------*/
#Footer {
	width:990px;
	background-image: url(../image-files/footer.jpg);
	float:left;
	font-family: "Comic Sans MS";
	font-size: 100%;
	text-align: center;
    padding: 8px; /* controls the size and position of the link text */
    }

#Footer p {
    font-size: 100%;
    color: #cdc0b8;
    margin: 5px 0px 5px 0px;
    }  


#Footer ul {
    list-style-type: none;
    margin-top:35px;
    font-weight: bold;
    }
 
#Footer ul li {
    color: #fff;
    display: inline;
    background-color: Transparent;
    text-align: center;
    padding: 0px 20px 0px 0px;  /* controls the space between the links */
    }
 
#Footer a:link {
    color: #fff;
    text-decoration: none;
    text-align: center;
    }
    
#Footer a:visited {
    color: #fff;
    text-decoration: none;
    }
    
#Footer a:hover {
    color: #fc7079;
    text-decoration: none;
    }                




	

     
.ReturnToNavBox {
 background-color: #cdc0b8;
 width: 95%;
 border: none;
 margin: 0 auto 12px auto;
 padding: 4px;
 text-align: center;
 color: #1400c2;
 }
 
 .ReturnToNavBox a:link {
 color: #1400c2;
 text-decoration: none;
 }
 
 .ReturnToNavBox a:hover {
 color: #1400c2;
 text-decoration: underline;
 }


/*---------- styling for 'Know more links ------------------------*/
.btKnowMore {
	float:right;
	background-color: #5f2f39;
	font-size:14px;
	font-weight:bold;
	color:#fc7079;
	margin-bottom:25px;
}
.btKnowMore:hover {
	text-decoration:none;
}

.btKnowMore2 {
	float:left;
	font-size:14px;
	font-weight:bold;
	color:#000;
}
.btKnowMore:hover {
	text-decoration:none;
}