/**************************************************/
/*	#990099;					/* magenta */
/*	#6B006B;					/* dark purple */
/*	#FFE6FF;					/* ultra pale */
/*	#FFBFFF;					/* very pale */
/*	#FF80FF;					/* quite pale */
/*	#008F00; 					/* green */
/**************************************************/
body {
	margin: 0;
	padding: 0;
	text-align: left;
	font-family: "Gill Sans MT", Arial, Helvetica, sans-serif; 
	font-size: 13px;
	line-height: 15px;
	border-color: #6B006B;				/* dark purple */
	color: #6B006B;						/* dark purple */
	background-color: #FFFFFF;			/* white */
}
html, body, #screen {
	min-height: 100%;
	width: 100%;
	height: 100%;
}
html>body, html>body #screen {height: auto;}
hr {
	color: #990099;						/* magenta */
	background-color: #990099;			/* magenta */
	height: 1px;
}
a:link, a:visited {
	color: #990099;						/* magenta */
	background-color: transparent;
}
a:hover, a:active {
	color: #008F00; 					/* green */
	background-color: transparent;
}
li {margin-left: 30px;}
#screen {
	position: absolute;
	top: 0;
	left: 0;
}
#window {
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	margin-bottom: 20px;
}
#wrapper {
	border-left: 1px solid #990099;		/* magenta */
	border-right: 1px solid #990099;	/* magenta */
}
#banner {
	width: 100%;
	height: 120px;
	padding: 0;
	margin: 0;
	background-image: url(../Graphics/title.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}
/* horizontal navbar */
div.navigation {
    font-family: Verdana, Arial, Helvetica, sans-serif; 
	background-color: #FFBFFF;			/* very pale */
	border-top: 1px solid #990099;		/* magenta */
	clear: both;
	height: 25px;
}
div.contactLink {
	padding: 5px 0 5px 35px;
	margin: 0 0 0 70px;
	font-size: 10px;
	float: left;
	width: 120px;
	position: relative;
}
p.noJS {font-size: 10px; float: left; width: 150px; margin-left: 0;}
div.contactLink img {position: absolute; top: -5px; left: 0px; border: none;}
div.contactLink a {text-decoration: none;}
div.contactLink a:link, div.contactLink a:visited {color: #6B006B;}	/* dark purple */
div.contactLink a:hover, div.contactLink a:active {color: #990099;}	/* magenta */

div.navigation ul {
	font-size: 10px;
	margin: 0px;
	padding: 0px;
}
div.navigation ul li {
	float: right;
	border-right: 1px solid #990099;	/* magenta */
	color: #6B006B;						/* dark purple */
	list-style-type: none;
	margin: 0;
	padding: 5px 10px;
}
div.navigation ul li.nobar {border-right: 0px none;}
div.navigation ul li a {text-decoration: none;}
div.navigation ul li a:link, div.navigation ul li a:visited {color: #6B006B;}	/* dark purple */
div.navigation ul li a:hover, div.navigation ul li a:active {color: #990099;}	/* magenta */

#main {
	padding: 0 20px 5px 20px;
	margin: 0;
	min-height: 500px;
}
div.colourbox {
	border: 1px solid #FFBFFF;			/* very pale */
	background-color: #FFE6FF;			/* ultra pale */
	padding: 10px;
	margin: 20px 0;
}
h1 {
	color: #6B006B;						/* dark purple */
	margin: 10px 0 20px 0;
	font-size: 24px;
}
h2 {
	color: #6B006B;						/* dark purple */
	font-size: 18px;
	margin: 20px 0 5px 20px;
}
p {margin: 5px 10px 5px 20px;}
p.intro {
	margin: 5px 10px 10px 0;
	color: #6B006B;						/* dark purple */
	font-size: 20px;
	font-weight: bold;
}
p#cyclelink {
	display: none;
	clear: both;
}
p.small {font-size: 9px;}
/* -----C L A S S E S----- */
.leftimg {
	float: left;
	border: 1px solid #6B006B;			/* dark purple */
	margin: 5px 15px 0 20px;
}
.rightimg {
	float: right;
	border: 1px solid #6B006B;			/* dark purple */
	margin: -15px 10px 0 20px;
}
div.leftimg, div.rightimg {padding: 2px 2px 0 2px;}
.centreimg {
	border: 1px solid #6B006B;			/* dark purple */
	margin-left: auto;
	margin-right: auto;
}
.clear {
	clear: both;
	line-height: 0.1em;
}
.leftjust {float: left;}
.rightjust {float: right;}
.hide {display: none;}
.centre {text-align: center;}
/* ----- F o o t e r ------- */
#footer {
    font-family: Verdana, Arial, Helvetica, sans-serif; 
	clear: both;
	height: 30px;
	font-size: 9px;
	color: #FFFFFF;						/* white */
	background-color: #990099;			/* magenta  */
}
#footer p {
	margin: 0;
	padding: 8px 10px 0 0;
	text-align: right;
}
/* ----- Location Map ----- */
div#map {
	border: 1px solid #6B006B;				/* dark purple */
	width: 600px;
	height: 500px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 10px;
}
h1.infotext {
	font-size: 15px;
	font-weight: bold;
	line-height: 1.2em;
	margin: 0 0 2px 0;
}
p.infotext {
	font-size: 12px;
	line-height: 1.2em;
	padding: 0;
}
p.infotext span.small {
	font-size: 10px;
}
div#map a:link, div#map a:visited, div#map a:hover, div#map a:active {
	background-color: transparent;
}
/* --------P R O J E C T S --------*/
div.sitesection {
	border-bottom: 1px solid #990099;	/* magenta */
	padding: 0 0 20px 0;
	margin: 10px 0 0 0;
}
div.sitepic {
	float: left;
	margin: 5px 10px 0 0;
	width: 210px;
}
div.sitepic.rjust {
	float: right;
	margin: 5px 0 0 25px;
}
div.sitepic a img {
	border: none;
}
div.sitesection div.colourbox {
	float: right;
	width: 510px;
	padding-left: 0;
	margin-bottom: 0;
}
div#Use div.colourbox {margin-top: 100px;}
div#Help div.colourbox {margin-top: 40px;}
div#Highbrook div.colourbox {margin-top: 10px;}
div#Ethical div.colourbox {
	width: 296px;
	margin-top: 50px;
}
div#Ethical div.sitepic {width: 425px;}

/* ------ Case Study fading divs ------ */
p#cycleOn, p#cycleOff {
	font-size: 12px;
	text-align: center;
	margin: 0 0 5px 0;
}
p#cycleOff {
	display: none;
}
div#pagedisplay {
	float: right;
	width: 635px;
	margin-top: 5px;
}
div#divCycle {
	position: relative;
	left: 0;
	top: 0;
}
div.panel {
	position: absolute;
	left: 20px;
	top: 0;
	width: 600px;
}
div.panel img {
	border: none;
	width: 600px;
}
div.panel div.paneltext {
	border: 1px solid #FFBFFF;			/* very pale */
	margin: 0 0 10px 0;
	padding: 2px 10px 10px;
}
div.paneltext h2 {
	font-size: 20px;
	margin-bottom: 20px;
}
/* P I C T U R E   L I S T */
#picturelist {
	float: left;
	width: 80px;
	margin: 0 10px;
}
#picturelist ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#picturelist li {
	display: block;
	float: left;
	font-weight: normal;
	text-align: center;
	font-size: 11px;
	width: 80px;
	min-height: 110px;
	margin: 0 0 15px 0;
}
#picturelist img {
	width: 80px;
	height: 100px;
	display: block;
	border: 1px solid #6B006B;			/* dark purple */
	margin: 0;
}
#picturelist p {
	color: #6B006B;						/* dark purple */
	text-align: left;
	font-size: 12px;
	font-weight: bold;
	margin: 0 0 10px 0;
}