/* HOLLY HACK */
	/* The Holly Hack is a very established way of changing the default behaviour of CSS with regard to how a parent element responds to a floated child. Floated elements will not, by default, effect the height of the parent, so they can 'hang' out of the bottom of the parent. This will only be noticable if the parent has a border, bg-colour or some other styling. The Holly Hack causes the floated element to increase the height of the parent, where necessary, so that the child is visually contained by the parent. There is a W3C compliant version which, whilst unusual, is not a hack. Hacky versions are necessary for IE browsers, because they do not support the :after pseudo selector. These have been put in conditional comments to keep the code W3C compliant.  Nat Darke 2007. */ 
	
	/* THE HOLLY HACK IS DEFAULT ON THIS SITE
	
	In this site, the Holly Hack is applied to most block level elements by default. This changes their default behaviour. The reasoning behind this is that the change in behaviour that the Holly Hack tends to be much more appropriate for real world design requirements. So by doing this we can save a lot of time in the building of the site. 
	*/
	
	/* HOW TO SWITCH OFF THE HOLLY HACK
	
	Occassionally, the Holly Hack is inappropraite, or causes undesirable behaviour. In these situations it is easy to over-rule the Holly Hack on the specific element or elements by adding the declaration 'clear: none;' to the their :after pseudo selector. e.g.
	
	div.something p:after
	{	clear: none;
	}
	
	For Internet Explorer you would need to make these changes ie.css
	
	div.something p:after
	{	_height: auto;  #### for IE6 only ####
		display: block;	#### for IE7 ####
	}
	
	 */	
	 			
	/* start holly hack - W3C complient version */
		div:after, 
		p:after, 
		ul:after,
		li:after, 
		ol:after, 
		h1:after, 
		h2:after, 
		h3:after, 
		h4:after, 
		h5:after, 
		h6:after, 
		blockquote:after,
		form:after, 
		dl:after, 
		dt:after, 
		dd:after,
		address:after
		{	clear: both;
			display: block;
			content: ".";
			height: 0;
			visibility: hidden;
		}
	/* end holly hack - W3C complient version */

/* start CSS 'reset' */
	html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, label, legend
	{	font-size: 100%;
		font-family: inherit;
		font-weight: inherit;
		font-style: inherit;
		outline: 0;
		padding: 0;
		margin: 0;
		border: 0;
	}
	body 
	{	line-height: 1;
	}
	ol, ul 
	{	list-style: none;
	}
	table 
	{	border-collapse: separate;
		border-spacing: 0;
	}
	td
	{	vertical-align: top;
	}
	caption, th, td 
	{	font-weight: normal;
		text-align: left;
	}
	blockquote, q 
	{	quotes: "" "";
	}
/* end CSS 'reset' */		
	
/* start page set-up (these values are the same on all sites) */
	body 
	{	font-size: 75%; /* 75% makes 1em = 12px in all elements in the document. 75% is THE best value to use to get cross browser and platform consitency on font sizes as well as keeping the integrity of font re-sizing. Sites that suggest otherwise haven't done the research. */
	}
	div#all
	{	font-size: 1em;	/* CHANGE THIS VALUE TO SCALE THE ENTIRE SITE BECAUSE FONT SIZES ARE INHERITED BY ALL CHILDREN */
	}
	select
	{	font-size: 1em; /* select does not inherit font sizes in Safari */
	}
	img 
	{	display: block;	/* this is slightly debatable, but in 95% of cases, img is displayed as block, so whiy not make it default? */ 
	}
/* end page set-up */