/* CSS Document 19/12/2007, author: Matthew Willems, admin@matthewwillems.com

Frame work for assembling style sheets for web sites. */

/* Universal HTML formatting - set the theme for the site */
	body	{font-size:14px; font-family:Verdana, Arial, Helvetica, sans-serif; background-color:#EEEEEE; color:#333333; 
			margin-left: 0em; margin-top: 0em; margin-right: 0em;}
	table	{margin:0; padding:0; border:0;}
	p		{ font-size:1.1em;}
	p.s		{ font-size:0.9em;}
	pre		{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:1.1em;}
	p.justify{ text-align:justify;}
		
	h1			{ font-size:2.5em; font-weight:bold; margin-bottom:-1em; margin-top:-0.5em;} 
	h2			{ font-size:2.1em; font-weight:bold;}					 
	h3			{ font-size:1.7em; font-weight:bold; margin-bottom:-0.5em;}					 
	h4			{ font-size:1.4em; font-weight:bold; margin-bottom:-0.5em;}
	h5			{ font-size:1.2em; font-weight:bold;}
	h6			{ font-size:1.4em; font-weight:bold; margin-bottom:0.5em; margin-top:-0.5em;}
		
	ul			{}
	li			{ list-style-type:none; font-size:1.1em;}
	
/* Universal settings */
	a			{color: #333333; text-decoration:none;}
	a:hover		{ background-color: #666666; color:#FFFFFF;}
	
/* Formatting containers and objects - do not place font sizes in here - use styling classes below */
	/* Main table ID's */
	#doc		{ width:100%;}
	#rici		{ width:12.8em; padding:0; border:0;}
	#sparer		{ width:100%;}
	#topnav		{ text-align:right;}
	#logo		{ padding:0;}
	#head		{ padding:0; width:65em;}
	#sidenav	{ vertical-align:top; padding:0;}
	#page		{ padding-bottom:0; padding-left:4em; padding-right:0; padding-top:0; border:0; vertical-align:top;}
	#footerbar	{ width:78em; border:0; color:#999999; padding:0;}
	
		
	/* Nested table ID'd */
		/* sidenav */
				#navbox	{ width:100%;}
				#navboxc { text-align:left; padding-left:1em;}
		/* main */
				#info	{ width:61em; border:0;}
				#date	{ width:50%; font-size:1.1em; text-align:right;}
				#youare	{ width:50%; font-size:1.1em; padding:0.4em; padding-bottom:0;}
				#contactbox { width:100%; border:0; padding:0;}
				#displaybox	{ width:100%; padding:0; border:0; margin:0;}	
				#thumbbox	{}
														
/* Text styling */
	.bla11		{ font-size:1.1em;}
	.bla24		{ font-size:2.4em;}
	.bla14b		{ font-size:1.4em; font-weight:bold;}
	.bla16b		{ font-size:1.6em; font-weight:bold;}
	.ca			{ text-align:center;}
	.ra			{ text-align:right;}
	.vam		{ vertical-align:middle;}
	
									
/* Classes for containers and objects */
	.greyrow	{ background-color: #999999; border-bottom:solid; border-bottom-width:0.4em; border-bottom-color:#666666; 
				border-top:solid; border-top-width:0.4em; border-top-color:#666666;}
	.greycol	{ background-color: #CCCCCC; border-right:solid; border-right-width:0.4em; border-right-color: #666666; 
				border-bottom:solid; border-bottom-width:0.4em; border-bottom-color: #666666; text-align:center;}
	.hide 		{ display:none;}
	.utilbutton { cursor:pointer; vertical-align:middle;}
	.boxhome	{ width:56em; border:0; margin-bottom:0; margin-left:4em; margin-right:0; margin-top:0;}
	.boxhomeone	{ width:4em; vertical-align:top; text-align:center;}
	.boxhometwo	{ vertical-align:top;}
		
/* Coloured link settings */
	.cred a			{ color: #333333; text-decoration:none;}
	.cred a:hover	{ background-color: #990000; color: #FFFFFF;}
	.cgreen a		{ color: #333333; text-decoration:none;}
	.cgreen a:hover	{ background-color: #006600; color: #FFFFFF;}
	.cblue a			{ color: #333333; text-decoration:none;}
	.cblue a:hover	{ background-color: #000066; color: #FFFFFF;}
	.cyellow a		{ color: #333333; text-decoration:none;}
	.cyellow a:hover	{ background-color: #CC6600; color: #FFFFFF;}

	.red a			{ color: #FFFFFF; text-decoration:none;}
	.red a:hover	{ background-color: #FF9999; color: #990000;}
	.green a		{ color: #FFFFFF; text-decoration:none;}
	.green a:hover	{ background-color: #99FF99; color: #006600;}
	.blue a			{ color: #FFFFFF; text-decoration:none;}
	.blue a:hover	{ background-color: #9999FF; color: #000066;}
	.yellow a		{ color: #FFFFFF; text-decoration:none;}
	.yellow a:hover	{ background-color: #FFFF66; color: #CC6600;}
	.usefull a		{ color:#FF0000; text-decoration:none;}
	.usefull a:hover { color:#FFFFFF; text-decoration:none; background-color:#990000;}
	.footerbar a	{ color:#999999; text-decoration:none;}
	.footerbar a:hover{ color:#FFFFFF; background-color:#666666;}
		
	.redbg			{ background-color: #990000;}
	.lightredbg		{ background-color: #FF9999;}
	.greenbg		{ background-color: #006600;}
	.lightgreenbg	{ background-color: #99FF99;}
	.bluebg			{ background-color: #000066;}
	.lightbluebg	{ background-color: #9999FF;}
	.yellowbg		{ background-color: #CC6600;}
	.lightyellowbg	{ background-color: #FFFF66;}
	.white			{ color:#FFFFFF;}
	
	.underline a	{ color:#333333; text-decoration:underline;}
	.underline a:hover{ color:#FFFFFF; background-color:#666666;}
					
/* Image settings */
	img.g128x48 { border:0; width:12.8em; height:4.8em;}
	img.g13x13	{border:0; width:1.3em; height:1.3em;}
	img.g64		{ border:0; width:4em; height:6.4em;}
	img.g80		{ border:0; width:8em; height:8em;}
	img.gh40	{ border:0; width:1.9em; height:1.9em;}
	img.g40		{ border:0; width:4em; height:4em;}
	
	img.g80bred{ border-color: #990000; width:4.7em; height:4.7em;}
	img.g80bblue{ border-color: #000066; width:4.7em; height:4.7em;}
	img.g80bgreen{ border-color: #006600; width:4.7em; height:4.7em;}
	img.g80byellow { border-color: #CC6600; width:4.7em; height:4.7em;}
	
	img.g88	{ border:0; width:8.8em; height:3.1em;}
	
/*  Art category main images  */
	img.g16		{border:0; width:1.6em; height:1.6em;} 
	img.g388x540{ border-color: #990000; width:38.8em; height:54em;}
	img.g540x516{ border-color: #990000; width:54em; height:51.6em;}
	img.g540x540{ border-color: #990000; width:54em; height:54em;}
	img.g255x540{ border-color: #990000; width:25.5em; height:54em;}
	img.g247x540{ border-color: #990000; width:24.7em; height:54em;}
	img.g210x540{ border-color: #990000; width:21em; height:54em;}
	img.g540x129{ border-color: #990000; width:54em; height:12.9em;}
	img.g540x90	{ border-color: #990000; width:54em; height:9em;}
	img.g411x540{ border-color: #990000; width:41.1em; height:54em;}
	img.g540x371{ border-color: #990000; width:54em; height:37.1em;}
	img.g540x388{ border-color: #990000; width:54em; height:38.8em;}
	img.g442x540{ border-color: #990000; width:44.2em; height:54em;}
	img.g540x419{ border-color: #990000; width:54em; height:41.9em;}
	img.g220x240{ border-color: #990000; width:22em; height:24em;}
	img.g179x240{ border-color: #990000; width:17.9em; height:24em;}
	img.g407x540{ border-color: #990000; width:40.7em; height:54em;}
	img.g406x540{ border-color: #990000; width:40.6em; height:54em;}
	img.g460x540{ border-color: #990000; width:46em; height:54em;}
	img.g418x540{ border-color: #990000; width:41.8em; height:54em;}
	img.g188x540{ border-color: #990000; width:18.8em; height:54em;}
	img.g410x540{ border-color: #990000; width:41em; height:54em;}
	img.g540x344{ border-color: #990000; width:54em; height:34.4em;}
	img.g381x540{ border-color: #990000; width:38.1em; height:54em;}
	img.g428x540{ border-color: #990000; width:42.8em; height:54em;}
	img.g507x540{ border-color: #990000; width:50.7em; height:54em;}
	img.g376x540{ border-color: #990000; width:37.6em; height:54em;}
	img.g265x540{ border-color: #990000; width:26.5em; height:54em;}
	img.g502x540{ border-color: #990000; width:50.2em; height:54em;}
	img.g540x397{ border-color: #990000; width:54em; height:39.7em;}
	img.g360x540{ border-color: #990000; width:36em; height:54em;}
	
	
/* Craft category main images */
	
	img.gr540x90{ border-color: #006600; width:54em; height:9em;}
	img.gr80x80{ border-color: #006600; width:8em; height:8em;}
		
/* Screen reader skip setting*/

/* The following .skp selector defines the style for text on the page which does not actually appear on your screen but which is picked up by text-to-speech readers.  This is achieved by setting the font size to zero and making the font colour the same as the background colour.  When tested using the W3C CSS validator, a warning is issued to telling you that the type is set to the same colour as the background colour of other selectors.  This simply alerts you to the fact that the colours are identical but it does not affect validation. */
.skp		{ font-size:0em; font-family:Arial, Helvetica, sans-serif; color:#333333; text-decoration: none;}