/* START WITH THE BODY TAG */
body {
	background-color: 		#03000e;
	font-family: 				arial, Courier New, Courier, monospace;
	font-size: 					14px;
	margin:						0px 0px 0px 0px;
	height:						100%;
	color:						#FFFFFF;
	text-align:					left; /* YOU CAN CHANGE THIS, BUT I LIKE 'justify' BECAUSE IT'S NICE & NEAT */
}

.smll {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: xx-small}
.main {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; line-height: 20px}
.smll {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: xx-small}
.inde {  font-family: "Times New Roman", Times, serif; font-size: 24px;}
.titles {  font-family: Arial, Helvetica, sans-serif; font-size: 24px}

/*
WE'RE CREATING A CONTAINING DIV THAT WILL HOLD ALL OF OUR CONTENT, COLUMNS, etc.. THIS WAY WE CAN SET THE
EXACT MAXIMUM WIDTH FOR EVERYTHING. IF IT STARTS WITH A HASH (#) IT'S AN 'ID', AND IDs ARE UNIQUE
IN CSS; i.e. THEY CAN ONLY BE USED ONCE IN A PAGE. SO WE COULDN'T HAVE TWO #CONTAINERs.

I TEND TO DEFINE ALL OF MY IDs FIRST, AND GET TO MY CLASSES NEXT, THEN FINALLY MY ELEMENTS:

IDs: #container, #rightcolumn, etc.
CLASSES: .formfield, .rightimg, etc.
ELEMENTS: a, img, h1, etc.

*/

#container {
	float:						left;
	width:						900px;
	/* SINCE WE KNOW THE RIGHT COLUMN'S CONTENT WILL BE LONGER THAN THE LEFT, WE'LL COLOUR THE BACKGROUND
	TO BE THE SAME AS THE LEFTCOLUMN SO THAT IT ALL LOOKS EVEN */
	
	background-color:			#2A253D;
	/* IF WE WANT TO POSITION ANYTHING INSIDE #container AS absolute, THIS WILL COME IN HANDY */
	
	position:					relative;
}

#leftcolumn {
	float:						left;
	font-size: 					12px;
	background-image:			url('images/cs-original_05.jpg');
	width:						156px;
	background-color:			#2A253D;
	text-align:					left;
	
	
}

#leftcolumnhome {
	float:						left;
	font-size: 					12px;
	
	background-image:			url('images/con_01.jpg');
	width:						156px;
	background-color:			#2A253D;
	text-align:					center;
}

#rightcolumn {
	float:						right;
	width:						744px;
	background-color:			#201C2D;
	
	/* SET THE SPIRAL AS A BACKGROUND IMAGE, BUT SET THE REPEAT AND POSITION PROPERTIES SO WE
	DON'T HAVE TO PUT IT INTO IT'S OWN COLUMN */
	
	background-image:			url('images/spiral.jpg');
	background-position:		top right;
	background-repeat:		repeat-y;
}

/* PREPARE FOR CLEVERNESS! WE'RE GOING TO USE SUBCLASSES:
THESE SUBCLASSES MEAN THAT ANY DIV WITH A widecolumn OR slimcolumn CLASS *INSIDE* #rightcolumn HAS THESE
PROPERTIES, BUT WE CAN USE THESE CLASSES ELSEWHERE OUTSIDE OF #rightcolumn WITHOUT
HAVING TO USE THESE SAME PROPERTIES - WE CAN REDEFINE THEM ELSEWHERE.
*/

#rightcolumn .widecolumn {
	float:						left; /* THIS ENSURES THE COLUMNS SIT NEXT TO EACH OTHER */
	width:						300px;
	margin:						20px 10px 0px 20px; /* THIS GOES CLOCKWISE, SO margin-top: 0px, margin-right: 10px, etc. */
	display:						inline; /* THIS JUST FIXES A FLOAT BUG IN IE5 WITH FLOAT AND MARGINS */
}

#rightcolumn .slimcolumn {
	float:						left;
	width:						300px;
	margin:						20px 0px 0px 10px;
	display:						inline;
}

#rightcolumn .homecolumn {
	float:						left;
	width:						650px;
	display:						inline;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
}

#rightcolumn .newscolumn {
	float:						left;
	width:						625px;
	display:						inline;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 20px;
}

/* NOW WE NEED TO GET A BIT PICKY WITH THE CROP-CIRCLE-WHITE-HORSE-INN THING */

#cropcircle {
	position:					absolute;
	top:							480px;
	left:							0px;
	width:						556px; /* THIS IS THE SUM OF #leftcolumn + #rightcolumn .widecolumn + margins */
	height:						223px; /* HEIGHT OF THE TALLEST IMAGE THAT WILL BE INSIDE IT */
}

#cropcircle .circle {
	float:						left;
	width:						156px; /* THE WIDTH OF THE COLUMN IT 'APPEARS' TO BE SITTING IN */
	margin-top:					115px; /* THE DIFFERENCE BETWEEN THE HEIGHT OF THE CIRCLE AND THE INN IMAGE */
	background-color:			#2A253D;
	text-align:					center; /* THIS WILL SIT THE IMAGE NICELY IN THE CENTRE */
}

#cropcircle .inn {
	float:						left;
	width:						400px;
	background-color:			#201C2D;
	text-align:					center;
}

.clear {
	clear:						both;
}

img {
	border:						0px;
}

a:link {
	color:						#FFFFFF;
}