/* 

This Style Sheet has been adapted my me, Michael James, from a Tutoriail in .net magazine issue 180.

	1. defaults
	2. structure
	3. links and navigation
	4. fonts
	5. images
	6. forms stuff

*/



/* --------- 1. defaults  --------- */

* {/* zero margins and padding */
		margin: 0;
		padding: 0;
		}

body {/* set page background colour */
		/*padding-bottom: 30px;*/
		font: 62.5%/1em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
		background-image:url(images/motif-wallpaper-9-web2.gif);
		}


/*  --------- 2. structure  --------- */

#wrapper {/* nav and banner container */
		width: 796px;
		height: 100%;
		margin: 0 auto;
		
		}
		
#top_banner{
		width: 796px;
		height: 217px;
		margin: 0 auto;
		background-image:url(images/top_banner_new.png);
		border-style:solid;
		border-color:#666666;

}		

#social_networking{
		width: 280px;
		height: 50px;
		padding-top:167px;
		padding-left:290px;
		float:left;
}
		
#wrapper_content {/* site content container */
		
		width: 800px;
		margin: 0 auto;

}		
		
#masthead {/* add border to masthead */
		background: url(images/top_banner.png) repeat-x;
		border-bottom: 0px solid #000000;
		}


	
#navContainer {/* navigation container */
		width: 180px;
		padding-left:20px;
		padding-right:20px;
		float:right;
		height:217px;
		/*border-left-style:solid;*/
		/*border-left-color:#666666;*/
		}

#content {/* content container */
		padding: 20px;
		margin-top: 10px;
		margin-bottom: 10px;
		width: 540px;
		float: left;
		background-image:url(images/content_bg.png);
		border-style:solid;
		border-color:#666666;

				}
				
#content_right {/* content container */
		padding: 5px;
		padding-top:20px;
		margin-top: 10px;
		margin-bottom: 10px;
		width: 180px;
		float: right;
		background-image:url(images/content_bg.png);
		border-style:solid;
		border-color:#666666;

				}				
				
#footer {
		width: 786px;
		height: 25px;
		margin: 0 auto;
		margin-top:10px;
		margin-bottom:10px;
		}	
		
.clearfix:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
		}

/* Contact Form */

#formContent {
		float: left;
		width: 500px;
		margin-right: 20px;
		}

#formSidebar {
		float: left;
		width: 500px;
		margin-right: 20px;
		background: #eeeeee;
		padding: 10px;
		}
		
		
		
/* ---------- 3. links and navigation ---------- */

a {/* default link style */
		color: #663300;
		}
		
a:hover
{
color: #000000;
text-decoration:none;
}		
		
	/* -- skip navigation -- */
#navContainer a {
		font: 1.2em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
		display: block;
		color: #ffffff;
		width: 200px;
		height:20px;
		padding-top: 8px;
		padding-bottom:2px;
		text-decoration:none;		
		} 
		
#navContainer a:hover {
		color: #000000;
		text-decoration:none;
		background-color:#cccccc;
		background-image:url(images/content_bg.png);
		/*background: url(assets/skip-nav.gif) 50% 100% no-repeat;*/
		}
		
	
#navContainer ul {
		text-align: center;
		width:200px;
		background-image:url(images/nav_bg.png);
		}

#navContainer li {
	display:block;
	list-style-type:none;
	/*height:20px;*/
	border-bottom-style:solid;
	border-bottom-width:1px;
	border-bottom-color:#666666;
	border-left-style:solid;
	border-left-width:1px;
	border-left-color:#666666;
	width:200px;
	/*padding-top:10px;*/
		}


		
/* ---------- 4. fonts ---------- */

html {
		font-size: 100%;
		}

body {
		font-size: 62.5%;
		}

h1 {/* main heading */
		font: normal 1.8em/1.1em Arial, sans-serif;
		margin-bottom: 5px;
		color: #663300;
		}

h2 {/* cross-head */
		font: 1.2em/1.0em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
		margin-top: 1.3em;
		margin-bottom: 0.8em;
		color: #3A3098;
		}

p {
		font: 1.1em/1.4em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
		margin-bottom: 0.8em;
		color:#000000;
		}
	
#footer p{
		font: 1.1em/1.4em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
		margin-bottom: 0.8em;
		color:#ffffff;
		}
		
#footer h1{
		font: 1.1em/1.4em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
		color: #ffffff;
		margin-bottom: 0.8em;
		}
	

#sidebar h2 {
		background: #3A3098 url(assets/header-background-grey.gif) no-repeat;
		margin: 0;
		padding: 8px 10px 6px;
		color: #ffffff;
		text-transform: uppercase;
		font-size: 1.3em;
		}

#sidebar h2.blueHeader {
		background: #3A3098;
		border-bottom: 1px solid #ffffff;
		}

#sidebar h2.pinkHeader {
		background: #d72e84 url(assets/header-background-pink.gif) no-repeat;
		border-bottom: 1px solid #ffffff;
		}
		
		
#sidebar p, #sidebar li {
		line-height: 1.3em;
		font-family: Arial, sans-serif;
		color: #ffffff;
		}	
		
#sidebar a, #sidebar a:hover
{
		line-height: 1.3em;
		font-family: Arial, sans-serif;
		color: #ffffff;
		}	
		
.hidden {
		display: none;
		}

.tel, .fn {
		margin-bottom: 0;
		}

.org {
		font-weight: bold;
		}

p.saveCard {
		margin-top: 1em;
		}

	

/* ---------- 5. images ---------- */

a img {/* remove borders from linked images */
		border: 0;
		}
		
#logo img {
		margin-top: 30px;
		margin-left: 10px;
		}
		
/* ---------- 6. forms stuff ---------- */

#searchArea form {
		padding: 17px 0 0 20px;
		}

#searchArea p {
		color: #eeeeee;
		float: left;
		margin-right: 10px;
		}

#searchArea p.mainSearchLabel {
		float: none;
		display: block;
		}
		
#mainSearchField {
		width: 230px;
		border: 1px solid #666666;
		background-color: #111111;
		color: #eeeeee;
		font-size: 1.0em;
		padding: 1px;
		}
		
		
		
#mainSearchSubmit {
		width: 40px;
		border: 1px solid #666666;
		font-size: 1.0em;
		background-color: #333333;
		color: #eeeeee;
		margin-right: -10px;
		}
		
		
.row {
		clear: both;
		padding-top: 5px;
		}

form {
		margin-bottom: 1em;
		}
		
fieldset {
		margin-bottom: 10px;
		padding: 10px;
		border: 1px dotted #666666;
		}		

legend {
		padding: 0 10px;
		background: #ffffff;
		text-transform: uppercase;
		color: #666666;
		font-size: 1.0em;
		}

.formLabel {
		font-size: 1.2em;
		line-height: 1.6em;
		text-align: right;
		margin-right: 10px;
		width: 100px;
		float: left;
		}

.formControl {
		float: left;
		width: 326px;
		}
		
input, textarea {
		border: 1px solid #666666;
		padding: 2px;
		font: 1em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
		}	
		
input {
		font-size: 1.2em;
		width: 322px;
		}			

textarea {
		width: 454px;
		}
		
.submitButton {
		background: #eeeeee;
		font: bold 1.0em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
		padding: 4px 6px;
		width: auto;
		}		
		
#flashNav{
		padding-left:100px;
		padding-top:10px;
		width: 200px;
		height: 100px;
}