/************** Default Elements *******************/

* {
	margin: 0;
	padding: 0;
	border: 0;
}

/* hide from IE mac \*/ 
html {
	min-height: 100%;
	margin-bottom: 1px;
}
/* end hiding from IE5 mac */

body {
	font: 100.01% Arial, Helvetica, sans-serif;
	color: #FFCC00;
	background-color: #000000;
}

/************** Layout Elements *******************/

#wrapper {
	width: 770px;
	margin: 0 auto;
	font-size: 80%;
	background: url(../images/ContentBG.jpg) 180px 0 no-repeat;
	min-height: 650px; /*ensure the bg image is not cut off at the bottom*/
	position: absolute;
}

#leftCol {
	position: absolute;
	top: 20px;
	left: 0px;
	width: 158px;
	padding-top: 250px;
	background: url(../images/deetooLogo.jpg) no-repeat;
	height: 265px;
}

#contentHolder {
	padding-top: 160px;
	width: 550px;
	margin-left: 200px;
}

#content {
	width: 530px;
	margin: 0 auto;
	padding-top: 15px;
}


/************** Styling Content *******************/

h1, h2, h3, h4, h5, h6 {
	margin: 10px 0 5px 0;
	font-size: 170%;
}

h2 {
	font-size: 170%;
}

h3 {
	font-size: 130%
}

h4 {
	font-size: 120%
}

h5 {
	font-size: 110%;
}

h6 {
	font-size: 100%;
}

p {
	margin: 10px 0;
}

/************** Styling LeftCol *******************/

#leftCol ul {
	list-style-type: none;
	border: 3px solid #ffcc66;
 }

#leftCol li {
	margin: 1px;
}

#leftCol li a {
	display: block;
	color: #000000;
	text-decoration: none;
	background-color: #FFCC00;
	padding: 2px5px;
	font-weight: bold;
}

#leftCol li a:hover {
	color: #000000;
	background-color: #FFCC66;
}


/************** Generic Styling Classes *******************/

.right {
	float: right;
	margin: 5px 0 2px 10px;
}

.left {
	float: left;
	margin: 5px 10px 2px 0;
}

/************** Link Styles *******************/

a img {
	border: none;
}

a {
	color: #FFCC00;
	text-decoration: none;	
}

a:hover {
  color: #6300B5;
 }

#footer {
	background-color: #000000;
	width: auto;
	font-size: 60%;
	text-align: center;
	clear: left;
	margin-top: 20px;
	left: auto;
}
/* The contact div is outside the flow of the document and won't respect the footer;
it would, if it's content was great enough, poke through the bottom of the layout.
The clear left ensures the footer is always moved beyond the contact div and our design
remains intact. The content div is within the flow of the document and will therefore
push the footer div down as it's content dictates. */

#footer p {
	background-color: #000000;
	padding: 4px 4px 4px 10px;
	margin: 0;
	clear: left;
}


#footer p.designer {/* Styles the bottom P in the footer that gives the validation and designer info */
	background-color: #fff;/*sets the background colour*/
	padding: 4px 4px 4px 10px;/*sets the padding values*/
	margin: 0;/*zeroes off the margins*/
	color: #fff;/*sets the text colour to white*/
	border-top: 1px solid #000;/*gives a top border to separate it from the other content in the footer, this should be the last item in the footer */
}


#footer a {/* Styles the links within the footer */
	color: #FFCC00;/*sets the text to white*/
	text-decoration: underline; /*keeps the underline*/
}

#footer a:hover, #footer a:focus {
	text-decoration: none;/*removes the underline*/
}

#navcontainer a img {
    border: none; /*removes the default link border from around the navigation images*/
}

/* sets the inline links in the #content div if required*/
#content a:link, #content a:visited{
	color: #5C4985; /*sets the link and visited text color*/
	background-color: transparent;/* no background color required*/
}

#content a:hover, #content a:focus{
	background-color: #7F6CAF;/*sets the background color for hover and focus*/
	color: #fff;/* sets the text color for hover and focus*/
	text-decoration: none;/*removes the underline*/
}