body 
	{
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	text-align:left;
	margins-left:10%;
	margins-right:10%;
 	background-color: #000000; 
	}


.display body
	{
	background-color: #000000;
	position:relative;
	top:25%;
}




h1	
	{
	color:#FF0000;		/* #ffffff; */
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-large;
	}

h2 
	{
	color: #ffffff
	}

h3 
	{	
	font-family: Arial, Helvetica, sans-serif;	
	font-size: 1.15em;
	text-align: center;	
	/* background-color: #006666;  	
	color: #DCDCDC */
	}

h4 
	{
	color: #ffffff;		/* was #000000 */
	font-size: 1.10em;
	text-align: left;  /* moving-image.html 21.03.07 */ /* Happenings.html */	
	}

h5 
	{
	color: #ffffff;		
	font-size: 1em;
	text-align: left;   /* tshirts.html */	
	}
	
a:link 
	{
	color: #ffffff;
	background-color: #000000;
	text-decoration: none;
	}

a:visited 
	{
	color: #FF0000;
	text-decoration: none;
	}

a:active 
	{
	color: #00FF00;
	text-decoration: none;
	}

a:hover 
	{
	color: #FF0000;
	background-color: #000000;
	text-decoration: underline;
	/*font-style: italic;*/
	}	

table 		/* THIS is USED for headspace images */
	{		/* modified Nov.09 to use percentage for left value		*/
	width: 100%;
	position:relative;
	left:0%;
	}
	
td, th 		/* THIS is USED for headspace images */
	{			/* modified Nov.09 to use percentage for left value		*/
	/* color: #000000; */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	text-align:left;
	line-height: 2em;
	width: 160px;
	height: 55px;
	cellpadding: 5px; 
	cellspacing: 5px;	
	bordercolor: #000000;
	bgcolor: #000000;
	}

.headspacetext		/* Head Space text area */
	{					/* modified Nov.09 to use percentage for left value		*/
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1;
	font-style: none;
	text-align:center;
	position:absolute;
	left:25%;						/*	160px;	*/
	top:20px;	/* 80 */
	z-index: 2;
	width: 600px;
	}



.navigation   /* 1st. navigation menu positioned at bottom - testing September 2009 !  */
	{			/* re jigged Nov.09 for larger screens by using percentages  */
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.09em;
	text-align:center;
	letter-spacing:0.09em;	
	line-height:1.5em;
	position:absolute;
	left:0%;
	bottom:5%;
	/* bottom:10px; */
	top:95%;				/* 500px; */
	/* top:600px;  */
	z-index:2;
	width:90%; 				/* 700px;  */
	}

.navigation_happenings   /* navigation menu for happenings.html- testing September 2009 !  */
	{					/* re jigged Nov.09 for larger screens by using percentages  */
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.09em;
	text-align:center;
	letter-spacing:0.09em;	
	line-height:1.5em;
	position:absolute;
	left:0%;
	bottom:0%;
	/* bottom:10px; */
	top:100%;				/* 500px; */
	/* top:600px;  */
	z-index:2;
	width:100%; 				/*  90%; 700px;  */
	}




/******** a navigational aid, highlights the active page  *****/

#thispage {
	color:#FFFFFF;
	font-size:105%;
	background-color:#000000;
	padding: 2px 2px 2px 2px;
	}
	
#thispage li, li li, li li li{
	color:#FF0000;
	background-color:#99CCCC;
	}	
	


.navigationtable		/* 2nd navigation menu positioned at bottom  */
	{					/*  NOT BEING USED ?	*/	
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
	text-align:left;
	line-height:1.1em;
	position:absolute;
	left:40px;
	top:90%;	/* 90%, 500px */
	z-index:2;		/* 1 */
	width: 90%;
	}
	
.longernav			/* use when the page content is longer than usual ie; Happenings.html  */
	{				/*	NOT BEING USED ? */
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
	text-align:left;
	line-height:1.1em;
	position:relative;		/* relative */
	left:40px;
	top:90%;	/* 140px OK, 90%, 500px */
	z-index:2;		/* 2 */
	width: 90%;
	}	

.welcometext        /*   Welcome message modified Nov.09 using percentage values for left  */
	{
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	font-style: none;
	text-align: center;
	position: absolute;
	left:30%; 						/* 250px; */
	top: 60px;	/* 80 */
	z-index: 2;
	width: 400px;
	}
	
.attention
	{
	color:#FF0000;
	font-family: Arial, Helvetica, sans-serif;
	font-size:1.3em;
	font-style: none;
	text-align: center;
	}	
	
.layouttable	/* central table for data ie; contacts page	*/
	{			/* modified Nov.09 to use percentage for left value		*/
	margin:inherit;
	position:absolute;
    text-align: center;
	left:25%;						/*  150px;  */
	top:20px;
	z-index:1;
	cellpadding: 10px;
	cellspacing: 10px;
	width: 630px;
	}
	
.contacttext        /*   Contact page message  */
	{				/* modified Nov.09 to use percentage for left value		*/
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1;
	font-style: none;
	text-align: center;
	position:absolute;
	left:25%;						/*  150px;  */
	/* right:150px; */
	top:65%;		/* 370px	*/
	z-index:3;
	width: 600px;
	height: 150px;
	}


	
.happeningstext		/* Happenings text area BUT NOT  catalogue.02.lep	*/
	{				/* modified Nov.09 to use percentage for left value		*/
	position:absolute;	/* relative */
	left:10%;					/*	50px;	150px;	*/
	top:10px;	/* 80 */
	z-index: 2;  /* was 2 */
	width: 850px;		/* 600px;	*/
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1;
	font-style: normal;
	text-align:center;	
	}	

.catalogue_text			/* catalogues pages	*/
	{					/* modified Nov.09 to use percentage for left value		*/
	position:absolute;	/* relative */
	left:25%;					/*		 150px;	*/
	top:10px;	/* 80 */
	z-index: 2;  /* was 2 */
	width: 600px;		/* 600px;	*/
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1;
	font-style: normal;
	text-align:center;	
	}

.dizignstext	/* Dizigns text area */
	{				/* modified Nov.09 to use percentage for left value		*/
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1;
	font-style: none;
	text-align:center;
	position:absolute;
	left:25%;			/*	150px;	*/
	top: 20px;
	z-index: 2;
	width: 600px;
	}

.gallerytext	/* Gallery text area */
	{				/* modified Nov.09 to use percentage for left value		*/
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1;
	font-style: none;
	text-align:center;
	position:absolute;
	left:25%;			/*	150px;	*/
	top:20px;	
	z-index: 2;
	width: 600px;
	}
	
	
.originalfinearttext	/* Gallery text area THIS is BEING USED in originalfineart.4.html  */
	{					/* modified Nov.09 to use percentage for left value		*/
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1;
	font-style: none;
	text-align:center;
	position:absolute;
	left:20%;			/*	150px;   150 	*/
	top:30px;		/* 30	*/
	z-index: 2;
	width: 700px;
	}
	
.originalfinearttext_2	/* Gallery + Limited EditionPrints Foyer area v.2 */
	{					/* modified Nov.09 to use percentage for left value		*/
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1;
	font-style: none;
	text-align:center;
	position:absolute;
	left:20%;					/*	120px;  150 	*/
	top:180px;		/* 30	*/
	z-index: 2;
	width: 700px;
	}
	
.gallery_2			/*	Gallery Two	used for limited_edition_prints.*.new.html  etc */
	{					/* modified Nov.09 to use percentage for left value		*/
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1;
	font-style: none;
	text-align:center;
	position:absolute;
	left:25%;				/*	150px;	*/
	top:30px;	
	z-index: 2;
	width: 600px;
	}	

.musictext		/* Music Room text area and rhythm_method.html */				/* modified Nov.09 to use percentage for left value		*/
	{
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1;		/* here is a conundrum: This font size for this page is displays the font */					
						/* slightly smaller than all the other pages unless I use em !!! How zat ?  */
	font-style: none;
	text-align:center;
	position:absolute;
	left:25%;			/*	150px;	*/
	top:20px;	
	z-index: 1;
	width: 600px;
	}
	
.musicnav					/* Back navigation div on recordings.html 	*/
	{
	position:absolute;
	bottom:0px;			/* top:500px 600px*/
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight:normal;
	text-align:center;
	line-height:1em;
	left:120px;	
	z-index:2;		/* 1 */
	width: 50%;
	}	
	
.musicresourcetext		/* Music Resources text area */
	{					/* modified Nov.09 to use percentage for left value		*/
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;		/* here is a conundrum: This font size for this page is displays the font */					
						/* slightly smaller than all the other pages unless I use em !!! How zat ?  */
	font-style: none;
	text-align:center;
	position:absolute;
	left:25%;				/*	150px;		*/
	top:20px;	
	z-index: 2;
	width: 600px;
	}

.rhythmtext		/* same as above essentially - but specific to rhythm_method page */
				/* which has a smaller image in a different position */
				/* see also about.andy.html and about.dizzy.html */
	{			/* modified Nov.09 to use percentage for left value		*/
	cellpadding: 10px;
	cellspacing: 10px;
	width: 600px;
	position:absolute;
        text-align:center;
	left:25%;				/*		150px;	 50 */
	top:20px; /* 50px */
	z-index:1;	
	}	

.recordingstext 	/* same as above essentially - but specific to recordings page */
					/* which has a smaller image in a different position */
	{				/* modified Nov.09 to use percentage for left value		*/
	cellpadding: 10px;
	cellspacing: 10px;
	width: 600px;
	position:absolute;
	text-align:center;
	left:25%;				/*	180px;	 50 */
	top:20px; /* 50px */
	z-index:auto;
	/* height: 674px;	*/
	}	



	
.tshirttext		/* T Shirts text area */
	{				/* modified Nov.09 to use percentage for left value		*/
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;		/* here is a conundrum: This font size for this page is displays the font */					
						/* slightly smaller than all the other pages unless I use em !!! How zat ?  */
	font-style: none;
	text-align:center;
	position:absolute;
	left:25%;					/*	150px;	*/
	top:20px;	
	z-index: 2;
	width: 600px;
	}	
	
.stationery			/* Stationary page  */	
	{				/* modified Nov.09 to use percentage for left value		*/
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;		/* here is a conundrum: This font size for this page is displays the font */					
						/* slightly smaller than all the other pages unless I use em !!! How zat ?  */
	font-style: none;
	text-align:center;
	position:absolute;
	left:25%;				/*	150px;	*/
	top:20px;	
	z-index: 2;
	width: 600px;
	}
	
.ustext		/* Us page text area */
	{			/* modified Nov.09 to use percentage for left value		*/
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1;
	font-style: none;
	text-align:center;
	position:absolute;
	left:25%;				/*	150px;	*/
	top:10%;				/*	20px;	*/	
	z-index: 2;
	width: 600px;
	}	

	
.hohochitext
	{
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1;
	font-style: none;
	text-align:center;
	position:absolute;
	left:150px;
	top:20px;
	z-index:1;
	cellpadding: 10px;
	cellspacing: 10px;
	width: 650px;
	}		

.NewsDataColor				/* Happenings News Flash */
	{			
	color: #CCFF00!important;
	font-family: "Times New Roman", Times, serif;
	letter-spacing: 0.75em;
	text-align: center;
	font-weight: bold;
	}

.NewsDataColor a:link 				/* Hex Puzzles */
	{			
	color: #CCFF00!important;
	font-family: "Times New Roman", Times, serif;
	letter-spacing: 0.75em;
	text-align: center;
	font-weight: bold;
	}
	
.NewsDataColor a:hover 				/* Hex Puzzles*/
	{
	background-color:#CC3399;
	}	


/*	
img .stationery			/* Stationary page thumbnails - this is not working - */
						/*	maybe because of the space after img !			*/
/*	{
	padding:10px 10px 10px 10px;
	}
*/
	
.y						/* Stationary page thumbnail images of Hohochi Notebooks	*/
	{					/* This should be handled as an image NOT a SPAN CLASS like this  */
	padding:30px 30px 30px 30px;	/*	see above	*/
	}

img.logo
	{
	position:fixed;
	align:right;
	right:10px;
	top:10px;
	z-iindex:0;
	height:300px;
	float:right;
	border:none;
	}

img.x       /* large logo image on Index page and all top level pages  */
	{		/*	revised September 09 - logo height 300px	*/
	position:fixed;		/* absolute;	fixed  */
	align:right;
	right:10px;	/* 40px */
	top:30px;	/* 40px; */
	z-index:2;
	height: 300px;				/*	400px;	*/
	float: right;
	border:none;
	}	

img.z       /* smaller logo image used on all subsequent pages  */
	{
	position:fixed;		/* absolute;	fixed  */
	align:right;
	right:40px;
	top:30px;	/* 40px; */
	z-index:2;
	height: 200px;
	float: right;
	border:none;
	}	


img.spermy		/* spermies image for the left hand side of some pages, index.html, gallery, dizigns, 								 					contacts */
	{
	position:fixed;		/* absolute;	fixed  */
	align:left;
	left:0px;
	top:50px;	/* 40px; */
	z-index:3;
	height: 80%;	/* 400 */
	float: left;
	}
	
	
img.spermy900		/* 900 px spermies image for the left hand side of Happenings.html */
	{
	position:fixed;		/* absolute;	fixed  */
	align:left;
	left:0px;
	top:50px;	/* 40px; */
	z-index:3;
	height:700px;	
	width:100px;	
	float:left;
	}	
	
img.handsofho		/* Hands of Ho image for all other pages 	*/
	{
	position:fixed;		/* absolute;	fixed  */
	align:left;
	left:40px;
	top:50px;	/* 40px; */
	z-index:3;
	height: 85%;
	float: left;
	}
	
img.gallery_thumbnail		/*  generic thumbnail gallery / ie; galleries 1,2,3	*/
	{
	padding:20px;
	border:none;
	height:100px;
	}
	
img.gallery_4_thumbnail		/* Gallery Four thumbnails	*/
	{
	padding:10px;
	border:none;
	height:100px;
	}
	
img.gallery200				/* Gallery thumbnail 200 pixels high	*/
	{
	position:auto;
	padding:10px;
	border:none;
	height:200px;
	z-index:0;
	}		

.bannerimage	/* small logo image at top (left)/RIGHT on every page except index.html	*/
	{
	position:absolute;
	right:50px; 
	top:50px;
	z-index:3;
	}
.celticss1			/* div for first CD on recordings.html	*/
	{
	position:relative;
	top:-10px;
	left:30px;
	width:600px;
	float:left;
	z-index:2;
	border:none;
	padding:5px;
	text-align:left;
	}
	
.celticss2			/* div for second CD on recordings.html	*/
	{		
	position:relative;
	top:-10px;
	left:30px;	
	width:600px;
	float:left;
	z-index:2;
	border:none;
	padding:5px;
	text-align:left;
	
	}
	

/* 
	lightbox CSS		
	Lightbox v2.02
	//	by Lokesh Dhakar - http://www.huddletogether.com
	//	3/31/06
	//
	//	For more information on this script, visit:
	//	http://huddletogether.com/projects/lightbox2/
	//
	//	Licensed under the Creative Commons Attribution 2.5 License - 						
	
	http://creativecommons.org/licenses/by/2.5/
*/

#lightbox
	{
	position: absolute;
	left: 0px;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0px;
	}

#lightbox a img
	{ 
	border: none; 
	}

#outerImageContainer
	{
	position: relative;
	background-color: #000000;	/* #fff; */
	width: 125%; /*1024px; 2000px;  800px; /* 250px; */
	height: 100%; /* 400px; 250px; 800px; /* 250px; */
	margin: 0 auto; 
	}

#imageContainer
	{
	padding:  10px; /* 10px; */
	}

#loading
	{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%; 
	text-align: center;
	line-height: 0px;
	}

#hoverNav
	{
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	z-index: 10;
	}

#imageContainer>#hoverNav
	{ 
	left: 0;
	}
	
#hoverNav a
	{ 
	outline: none;
	}

#prevLink, #nextLink
	{
	width: 49%;
	height: 100%;
	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
	
#prevLink 
	{ 
	left: 0px; 
	float: left;
	}
	
#nextLink 
	{ 
	right: 0px; 
	float: right;
	}
	
#prevLink:hover, #prevLink:visited:hover 
	{ 
	background: url(../images/prevlabel.gif) left 15% no-repeat; 
	}
	
#nextLink:hover, #nextLink:visited:hover 
	{ 
	background: url(../images/nextlabel.gif) right 15% no-repeat; 
	}

#imageDataContainer
	{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #000000;	/* #fff; =	white */
	margin: 0 auto;
	line-height: 1.4em;
	}

#imageData
	{	
	padding: 10px; 
	color: #ffffff; /* #666; = grey */ 
	}
	
#imageData #imageDetails
	{ 
	width: 70%; 
	float: left; 
	text-align: left; 
	}
		
#imageData #caption
	{ 
	font-weight: bold;	
	}
	
#imageData #numberDisplay
	{ 
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
	}
				
#imageData #bottomNavClose
	{ 
	width: 66px; 
	float: right;  
	padding-bottom: 0.7em;	
	}
		
#overlay
	{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 90;
	width: 125%;/* 100%; or 1000px; OR 125%; appears to have fixed IE BUT leaves images off centre */
	height: 100%; /* 800px; 500px; */
	background-color: #000000;
	filter:alpha(opacity=60); /* alpha(opacity=60) */ 
	-moz-opacity: 0.6;	/* 0.6; */ /* doesn't appear to do anything */
	opacity: 0.6; 		/* 0.6; */  /* doesn't appear to do anything */
	}
	
.clearfix:after 
	{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}

.clearfix 
	{
	display: inline-block;
	}

/* Hides from IE-mac \*/
* html .clearfix 
	{
	height: 1%;
	}
	
.clearfix 
	{
	display: block;
	}
	
	/* End hide from IE-mac */ 			/* End of Lightbox CSS */