body {
	font-family:Verdana, Tahoma, Helvetica, sans-serif;
	font-size:0.7em;
	line-height:1.3em;
	background:url(../art/body-bg.jpg) top left repeat-x;
	color:#4A4A4A;
	width:100%;
	margin:0;		/* always set margin and padding to 0 for body tags to remove space on all browsers */
	padding:0;
	
}


h1 {
	color:#BB237A;
	font-size:1.4em;
	font-weight: bold;
	margin-top:0;
	padding-top:0;
	line-height: 1.4em;
	display: inline;
}

h2 {
	color:#7C9CCB;
	font-size:1.3em;
	font-weight:normal;
	line-height: 1.3em;
	display: inline;
}

h3 {
	color:#7C9CCB;
	font-size:1.2em;
	font-weight:normal;
	line-height: 1.3em;
	display: inline;
}

h4 {
	color:#982065;
	font-size:1.1em;
	font-weight:normal;
	line-height: 1em;
	display: inline;
}

h5 {
	color:#D39936;
	font-size:1em;	
	font-weight:normal;
	line-height: .9em;
	display: inline;
}

h6 {
	color:#4f4f4f;
	font-size:1em;	
	font-style:italic;
	font-weight:normal;
	line-height: .9em;
	display: inline;
}

a {
	color:#b55400;
	outline:none;
}

a img {
	border: 0;
}

ul {
	list-style-image:url(../art/bullet.gif);
}

fieldset {
	width:700px;
	border: 1px solid #999999;
	background-color:#FFFDDD;
}

legend {
	font-size:0.9em;	/* the 'title' of each fieldset in the forms */
	color:#999999;
}


label {
	display:block;
}

label span {
	width:200px;			/* distance between start of label element and the input boxes in the form */
	display:block;
	float:left;
	font-weight:bold;
}

label span.required {
	text-decoration:underline;
	font-weight:normal;
	font-size:0.8em;
	display:inline;
	width:auto;
	float:right;
}

.clear {
	clear:both;
}

a:link, a:visited {
	color:#7B9AC7;
}

a:hover {
	color:#982065;
}

/***************************************************

			LAYOUT OF WEBSITE
					
***************************************************/

#logo {
	position:absolute;
	left: 50%;
	margin-left:-374px;
	display: none;
	height: 0px;
}

#contact-details {
	position:absolute;
	left: 50%;
	margin-left:95px;
	height: 0px;
	display: none;
}

#container {
	width:698px;
}

#content {
	width:698px;
}

#content-inside {
	width:668px;
}

#content-topimg {
	height: 0px;
	display: none;
	}
	
#content-footerimg {
	display: none;
	}

#header {
	width:672px;
	margin-bottom:17px;
	height: 0px;
	display:none;
}

/* these columns should both add up to 770px and not a pixel more. this includes padding and margins so take it out of the appropriate columns width, add some dummy content to get an idea of the layout */

td.left-content {
	background-color:#ffffff;
	width:174px;
	margin:0 0px 0 0;
	padding:20px 16px 10px 16px;
	display:block;
	height:100%;

}

td.left-lower {
	margin-right:14px;
	width:206px;
}

td.right-content {
	background: url(/art/content-bottomright.gif) bottom right no-repeat #ffffff;
	width:388px;
	padding:20px 12px 80px 12px;
	margin:0;
	
}

/* every site should have a copyright year and link to Bam. make sure you change the anchor colour for the Bam div */

p#client-copyright {
	color:#242424;
	width:auto;
	position:absolute;
	left: 50%;
	float:left;
	margin-left:-120px;
	display:block;
	font-size:0.9em;
	height: 0px;
	display: none;
}

p#client-copyright a {
	color:#7B9AC7;
	text-decoration:none;
}

#bam {
	float:left;
	margin:10px 0 10px 10px;
	padding:0;
	font-size:1.1em;
	color:#242424;
	display: none;
}

#bam a {
	color:#982065;
	text-decoration:none;
}

#page-content li {
	list-style-image: url(/art/listicon.gif);
	}

.printinfo {
	display: block;
	float:left;
	}


/***************************************************

			Navigation Style Start
		
***************************************************/

#nav {
	margin:0 0 16px 75px;
	padding:0;
	width:597px;
	height: 0px;
	display: none;
}

#nav img {
	padding:14px 0 0 20px;
}

#nav ul {
	padding:4px 4px 0 0;
	float:right;
	margin:0;
	list-style:none;		/* set list style as none to remove bullets */
	list-style-image:none;	/* in custom lists list image may carry across so remove it */
}

#nav ul li {
	list-style:none;
	padding:0 0 0px 0;
	margin:0;
	float:left;
	display:block;
}

#nav ul li a{
	display:block;
	margin:0 0 0px 0;
	padding:0 0 0px 0;
}

#nav ul li a span {
	padding:0;
	margin:-9999px 0 0 -9999px;		/* this is a trick for if someone has css turned off, inside the anchor tag, write <span>$page-name</span> if css is off the name will appear as text, if not the css kicks it out of view */
}

#nav ul li#home {					/* this is for a menu that will need to use sfhover.js for rollovers to work in IE. you can get the code here: http://htmldog.com/articles/suckerfish/hover/ and make a js file */
	width:56px;
	background:url(../art/nav.gif) 0px 0px no-repeat;

}

#nav ul li#home:hover, #nav ul li#home.sfhover {				/* add the sfhover class and the js will do the hax for you */
	background:url(../art/nav.gif) 0px -42px no-repeat;
}

#nav ul li#about-us {					/* this is for a menu that will need to use sfhover.js for rollovers to work in IE. you can get the code here: http://htmldog.com/articles/suckerfish/hover/ and make a js file */
	width:66px;
	background:url(../art/nav.gif) -56px 0px no-repeat;
}

#nav ul li#about-us:hover, #nav ul li#about-us.sfhover {				/* add the sfhover class and the js will do the hax for you */
	background:url(../art/nav.gif) -56px -42px no-repeat;
}

#nav ul li#our-services {					/* this is for a menu that will need to use sfhover.js for rollovers to work in IE. you can get the code here: http://htmldog.com/articles/suckerfish/hover/ and make a js file */
	width:82px;
	background:url(../art/nav.gif) -122px 0px no-repeat;
}

#nav ul li#our-services:hover, #nav ul li#our-services.sfhover {				/* add the sfhover class and the js will do the hax for you */
	background:url(../art/nav.gif) -122px -42px no-repeat;
}

#nav ul li#our-programs {					/* this is for a menu that will need to use sfhover.js for rollovers to work in IE. you can get the code here: http://htmldog.com/articles/suckerfish/hover/ and make a js file */
	width:88px;
	background:url(../art/nav.gif) -204px 0px no-repeat;
}

#nav ul li#our-programs:hover, #nav ul li#our-programs.sfhover {				/* add the sfhover class and the js will do the hax for you */
	background:url(../art/nav.gif) -204px -42px no-repeat;
}

#nav ul li#contact-us {					/* this is for a menu that will need to use sfhover.js for rollovers to work in IE. you can get the code here: http://htmldog.com/articles/suckerfish/hover/ and make a js file */
	width:83px;
	background:url(../art/nav.gif) -292px 0px no-repeat;
}

#nav ul li#contact-us:hover, #nav ul li#contact-us.sfhover {				/* add the sfhover class and the js will do the hax for you */
	background:url(../art/nav.gif) -292px -42px no-repeat;
}

#nav li ul {
	position: absolute;
	width: 200px;
	margin:0;
	padding:0;
	left: -999em;
	border:1px solid #BFBFBF;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}

#nav li ul li {
	width: 200px;
	margin:0;
	padding:0;
	line-height:32px;
	border-bottom:1px solid #ffffff;
}

#nav li ul li a {
	background-color:#F9F9F9;
	color:#535353;
	margin-bottom:0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
	display:block;
	width: 190px;
	padding-left:10px;
	display:block;
	text-decoration:none;
}

#nav li ul li a:hover {
	background-color:#EBEBEB;
}