/* CSS Document */

/* I have gone through this stylesheet and put in comments for easier alterations
NOTE: Changes to CSS have different effects in Firefox 2/3 IE 6/7 etc etc so changes to CSS
should always be checked accross browsers */

html {
	margin: 0;
	padding: 0;
}
body {
	min-width: 640px;
	font: 100% arial;  /* GLOBAL FONT TYPE. DO NOT CHANGE THE FONT SIZE HERE, DO THAT FOR EACH INDIVIDUAL ELEMENT */
	color: #660066; /* GLOBAL FONT COLOUR */
	margin: 0;
	padding: 0;
	border: 0.2em #669933 solid; /* BORDER AROUND ENTIRE PAGE */
	margin-top: 1%;
}
p {
	font-size: 0.8em;
}
img {
	border: 0;
	margin: 0;
	padding: 0;
}
#header, #headerLeft, #headerCenter, #headerRight, #topLinksArea, #middle, #leftCol, #content, #rightCol, #footer {
	overflow: hidden;
	display: block;
}
#header { /* BEST NOT TO TOUCH THE HEADER AREA UNLESS YOU KNOW WHAT TO DO */
	width: 100%;
}
#headerLeft, #headerCenter, #headerRight {
	float: left;
	margin-top: 1%;
}
#headerLeft {
	width: 60%;
	margin-left: -80%;
	display: inline;
	height: 6.15em;
	background-color: #ffffff;
}
#headerCenter {
	width: 20%;
	margin-left: 60%;
	display: inline;
	height: 6.15em;
	background-color: #ffffff;
}
#headerRight {
	width: 20%;
	*width: 19.9%;
	height: 6.15em;
	background-color: #ffffff;
}
#header #headerLogoArea {
	width: 80%;
	margin-left: 6.5%;
	*margin-left: 4.5%;
}
#header #d2cLogo {
	width: 11em;
	height: 6.13em;
}
#topLinksArea {
	clear: both;
	width: 100%;
	height: 1.4em;
	background-color: #669933;
}
#topLinksArea #topLinksMenu ul {
	display: inline;
	text-align: center;
	font-size: 1em;
	color: #FFFFFF;  /* TOP LINKS COLOUR */
	margin-left: 2.3%;
	*margin-left: 4%;
	padding-top: 20%;
}
#topLinksArea #topLinksMenu ul li {
	display: inline;
	padding-left: 2px;
	padding-right: 2px;
	list-style-type: none;
}
#topLinksArea #topLinksMenu ul li a {
	text-decoration: none;
	color: #FFFFFF;
}
#topLinksArea #topLinksMenu ul li a:hover {
	color: #660066; /* TOP LINKS MOUSE-OVER COLOUR */
}
#middle {
	width: 97%;
	padding-top: 1%;
	background-color: #FFFFFF;
	background-image: url(images/greenGrass.gif);    /* CONTENT AERA BACKGROUND */
	*background-image: url(images/greenGrassIE.gif);
	background-repeat: no-repeat;
	background-position: center bottom;
}
#leftCol, #content, #rightCol {
	float: left;
	padding-bottom: 5%;
}
#leftCol {
	width: 20%;
	margin-left: -80%;
	display: inline;
	background: none;
}
#leftMenu {
	width: 80%;
	margin-left: 15%;
	background: none;
}
#leftMenu #leftMenuItems {
	height: 17.5em;
/* Alter for height of LHS green menu (ie. when buttons are added/ removed from this list) */
	background-image: url(images/greenMenuBG.gif);
	background-repeat: repeat-y;
	background-position: center;
}
#leftMenu #leftMenuItems ul {
	margin: 0;
	padding: 0;
	margin-bottom: 0.1em;
	text-align: center;
	font-size: 1em;
}
#leftMenu #leftMenuItems ul li {
	display: block;
	padding-top: 0.2em;
	list-style-type: none;
}
#leftMenu #leftMenuItems ul li img {
	width: 7.69em;
	height: 2.06em;
	opacity: 0.85;
	filter: alpha(opacity=85);
}
#leftMenu #leftMenuItems ul li a:hover img {
	opacity: 1.0;
	filter: alpha(opacity=100);  /* LESS TRANSPARENCY FOR MOUSE OVER */
}
#bottomLeftPane {
	visibility: hidden;
/*Remove this line completely to re-show this box */
	width: 97%;
	*width: 100%;
	height: 9.75em;
	*height: 10.05em;
	margin-top: 15%;
	*margin-top: 10%;
	border: 0.2em #996699 solid;
	background-image: url(images/transPixel.png);
	background-repeat: repeat;
	*background: none; /* IE DOES NOT SUPPORT TRANSPARENCY SO THERE CAN BE NO TRANS TEXT BACKGOURND FOR IE ONLY :O( */
}
#content {
	width: 60%;
	margin-left: 20%;
	display: inline;
	margin-bottom: 1em;
	padding-top: 4%;
	background-image: url(images/transPixel.png);
	background-repeat: repeat;
	*background: none; /* IE DOES NOT SUPPORT TRANSPARENCY SO THERE CAN BE NO TRANS TEXT BACKGOURND FOR IE ONLY :O( */
	padding-bottom: 0;
}
#emailPageContent { /* THE EMAIL PAGE HAS SLIGHTLY DIFF CONTENT PROPERTIES AS THE FORM SITS BELOW THE TRANS WHITE TEXT AREA */
	width: 60%;
	margin-left: 20%;
	display: block;
	*display: inline;
	margin-bottom: 1em;
	padding-top: 2.4%;
	padding-bottom: 0;
	float: left;
}
#emailPageContent .detail {
	background-image: url(images/transPixel.png);
	background-repeat: repeat;
	*background: none;
}
#emailPageContent #formContainer {
	width: 80%;
	margin-left: 10%;
}
#content h1, #content p, #content ul, #content #portfolioImageWindow, #emailPageContent h1, #emailPageContent p, #emailPageContent #portfolioImageWindow {
	padding-left: 10%;
	padding-right: 10%;
	margin-top: 0;
	margin-bottom: 0.5em;
}
#content h1, #emailPageContent h1 {
	font-size: 1.1em;
}
#content ul, #emailPageContent ul {
	margin-top: 0em;
}
#content ul li, #emailPageContent ul li {
	font-size: 0.8em;
}
#content .noBulletsList {
  list-style: none;
  *padding-left: 5%;
}
#content .contentLeft {
	float: left;
	width: 40%;
	margin-left: 7.5%;
	*margin-left: 3.5%;
}
#content .contentRight {
	float: left;
	width: 40%;
	padding-right: 7.5%;
	margin-left: 5%;
}
#content .contentRight strong {
	font-size: 0.8em;
}
#content #portfolioMenu {
	padding-left: 5%;
}
#content #portfolioMenu ul {
	list-style-type: none;
}
/*Set font style for classed li*/
#content #portfolioMenu .portfolioMenuList {
	color: #660066;
	float: left;
	text-decoration: underline
}
/*Have to specify ul->li for IE*/
#content #portfolioMenu ul li {
	float: left;
	display: inline;
	padding-right: 1em;
}
#content #portfolioLeft {
	float: left;
	width: 20em;
	*width: 10em;
	padding-left: 10%;
	*padding-left: 25%;
}
#content #portfolioLeft #portfolioImageWindow {
	width: 20em;
	*width: 10em;
	padding: 0;
}
#content #portfolioLeft #portfolioImageWindow img {
	width: 408px;
}
#content #portfolioLeft #portfolioTitle h1 {
	padding: 0px;
	width: 408px;
}
#content #portfolioLeft #portfolioDescription {
	margin-top: 0.8em;
	padding-bottom: 2%;
	*padding-top: 3%;
	width: 408px;
	font-size: 0.8em;
}
#content #portfolioRight {
	position: relative;
	right: 10%;
	width: 1.38em;
	float: right;
}
#content #portfolioRight #portfolioThumbsArea {
  /* IF YOU CHANGE ANY OF THE THUMBS PROPERTIES, CHECK THEY STILL PRESENT WELL IN 800x600, BEST TO LEAVE ALONE */
	position: relative;
	width: 4.38em;
	background-color: #ffffff;
	margin-top: 80%;
	left: 5%;
}
#content #portfolioRight #portfolioThumbsArea img {
	padding-bottom: 0.2em;
}
#rightCol {
	width: 20%;
	background: none;
}
#topRightPane {
	visibility: hidden;
/*Remove this line completely to re-show this box */
	width: 75%;
	height: 12em;
	margin-left: 5%;
	border: 0.2em #996699 solid;
	background-image: url(images/transPixel.png);
	background-repeat: repeat;
	*background: none;
}
#bottomRightPane {
	visibility: hidden;
/*Remove this line completely to re-show this box */
	margin-top: 10%;
	width: 75%;
	height: 15em;
	margin-left: 5%;
	border: 0.2em #996699 solid;
	background-image: url(images/transPixel.png);
	background-repeat: repeat;
	*background: none;
}
#footer {
  position: relative;
  top: 10px;
  *top: 0px;
  width: 100%;
	padding-left: 20%;
	background-image: url(images/transPixel.png);
	*background-image: none;	
	background-repeat: repeat;
}
#footer .footerText{
  font-weight: bold;
}
.emailLink {
	text-decoration: none;
	color: #669933;
}
.hidden {
	visibility: hidden;
}