/* CSS Beauty */
/*  Website refrences 
	1.1 Containment in HTML: http://www.w3.org/TR/CSS1#containment-in-html
	1.2 Grouping: http://www.w3.org/TR/CSS1#grouping
	1.3 Inheritance: http://www.w3.org/TR/CSS1#inheritance
	1.4 Class as selector: http://www.w3.org/TR/CSS1#class-as-selector
	1.5 ID as selector: http://www.w3.org/TR/CSS1#id-as-selector
	1.6 Contextual selectors: http://www.w3.org/TR/CSS1#contextual-selectors
	1.7 Comments: http://www.w3.org/TR/CSS1#comments */
/* Book References 
	1.1 Mastering Integrated HTML and CSS by Virginia DeBolt, published by Sybex
	1.2 Web Standards Solutions by Dan Cederholm, published by Friendsof */
	

/* Margins 0, Padding 0, set this for each element if required */
* {
		margin:0;
		padding:0;
}
/* Link Colour Blue */
a {
	color: #0066FF;
	text-decoration:none;
}

/* Links change colour to green when rolled over with the mouse and are underlined */
a:hover { 
		color: #0099FF;
		text-decoration:underline;
}

/* Body text set to sans-serif font and is black */
body { font-family:Arial, Helvetica, sans-serif;
		background:#000000;
}

h1,h2,h3,h4,h5,p,ul,table,form {
		width:100%;
		font:1em Arial, Helvetica, sans-serif;
		margin: 0 0 2em 0;	
}

/*HTML text will not be shown, this is because the title is in the image */
h1 {
		display:none;
}

/* This is what everything is contained in */
#container {
		position :relative;
		width :700px;
		height:405px;
		background:url(../image/httpwww.sxc.huphoto302097.JPG) no-repeat 0 0;
		}

/* The sub head is alighed right and positioned over the header in the top corner of the page */	
#subhead {
	position: absolute;
	top: 10px;
	padding: 1em;
	color:#FFFFFF;
	width: 250px;
	text-align: right;
	right: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.98em;
	font-style: italic;
}

/* To place link/text below 395px- below the header, this is the div that contains all the text and the links */
#bodyimage {
	position:absolute;
	top : 349px;
	height: auto;
	width: 700px;
	left: 1px;
	overflow: hidden;
}


/* So whats this all about - This will allow the XHTML text to be replaced with an image */
#body h2 {
		text-indent:-1000px;
		background: url(../image/all-about.gif) no-repeat;
		height: 50px;
		}

/* So whats different - This will allow the XHTML text to be replaced with an image */
#body h3 {
		text-indent:-1000px;
		background: url(../image/difference.gif) no-repeat 20% 0;
		height: 70px;
		}

/* So what do I get - This will allow the XHTML text to be replaced with an image */
#body h4 {
		text-indent:-1000px;
		background: url(../image/iget.gif) no-repeat 20% 0;
		height: 50px;
		}

/* I'm sold lets get started - This will allow the XHTML text to be replaced with an image */
#body h5 {
		text-indent:-1000px;
		background: url(../image/sold.gif) no-repeat 20% 0;
		height: 50px;
		}

/* Interested in sponsoring - This will allow the XHTML text to be replaced with an image */
#body h6 {
		text-indent:-1000px;
		background: url(../image/sponsoring.gif) no-repeat 20% 0;
		height: 70px;
		}

/* Div containing all the text, collum two as you look on screen */
#body {
	margin-left: 250px;
	padding-top: 0.2em;
	padding-right: 20px;
	padding-left: 15px;
	background-image: url(../image/background1.jpg);
	position: relative;
	top: 56px;
	left: 0px;
	bottom: 5px;
	padding-bottom: 10px;
	}
		
/* This is the table where the collums seperate, margin-top had to be set to 56px to join the background images together with the body div */
#table {
	margin-left: 50px;
	padding-right: 30px;
	padding-left: 15px;
	background-image: url(../image/background.jpg);
	position: relative;
	height: auto;
	margin-top: 56px;
	padding-top: 5px;
	padding-bottom: 20px;
	width: 650px;
}
/* This is for IE 5/6 to stop the table overflowing the out of the 700px box width */
#jobstable {
	width:630px;
	}

/* Current job openings - This will allow the XHTML text to be replaced with an image */
#table h2 {
		text-indent:-1000px;
		background: url(../image/table.gif) no-repeat 20% 0;
		background-position:left;
		height: 50px;
	}
	
/* This alignes the headings left in the table */
#jobheadings {
		text-align:left;
		}
		
/* Reference - Mastering Integrated HTML and CSS by Virginia DeBolt */
/* This makes applies an italic font type to the company name within the table */ 
.jobdesc {
font-style:italic;
}

/* Margin top again had to be changed to work in IE 5/6 -35px works on all browsers */	
#about {
	margin-left: 50px;
	padding-right: 20px;
	padding-left: 15px;
	background-image: url(../image/background.jpg);
	position: relative;
	padding-bottom: 10px;
	z-index: auto;
	height: auto;
	width: auto;
	margin-top: -35px;
	}

/* About CSS Beauty - This will allow the XHTML text to be replaced with an image */
#about h2 {
		text-indent:-1000px;
		background: url(../image/about.gif) no-repeat 20% 0;
		background-position:left;
		height: 50px;
		}

/* Footer is centred */
#footer {
	width : auto;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 50px;
	padding-top: 1em;
	padding-right: 20px;
	padding-bottom: 0;
	padding-left: 10px;
	text-align: center;
	background-color: #000000;
	color: #FFFFFF;
	}
	
/* The links had to be 6px left so there is a clear space in the web browser */
/* The top is set at 57 to allow the links to appear in the black space */
#links {
	position: absolute;
	left: 5px;
	top: 57px;
	width: 200px;
	font-family: Arial, Helvetica, sans-serif;
	padding-top: 1em;
	padding-right: 10px;
	padding-bottom: 1em;
	padding-left: 15px;
}


/* Placed 250px down from the top of the bodyimage div  */
/* Absolute positioning my mean the text overlaps if it is increased in size */
#themes {
	position: absolute;
	left: 5px;
	top: 250px;
	width : 200px;
	font-family: Arial, Helvetica, sans-serif;
	color: #79b;
	padding-top: 1em;
	padding-right: 10px;
	padding-bottom: 1em;
	padding-left: 15px;
}

/* Themes tiles is italic an white */
#themes h2{
	color:#FFFFFF;
	font-style: italic;
}

/* Placed 456px down from the top of the bodyimage div */
/* Absolute positioning my mean the text overlaps if it is increased in size */
#forum {
	position:absolute;
	left:5px;
	top:456px;
	width:200px;
	font-family:Arial, Helvetica, sans-serif;
	color: #79b;
	padding-top:1em;
	padding-right:10px;
	padding-bottom:1em;
	padding-left:15px;
}
/* Forum links tiles is italic an white */
#forum h2 {
	color:#FFFFFF;
	font-style: italic;
	}

/* The serach needs it width set at 350 in order to keep it placed correctly in IE 5/6 */
#search {
	position:absolute;
	top:5px;
	text-align: right;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	left: 5px;
	width: 350px;
}

/* This turns the title of the search green */
#search legend {
	color:#00cc00;
	font-weight:bold;
	}