body {
font-family:"Lucida Sans Unicode", Arial, Verdana, sans-serif;
font-size:12px;
color:#FFF;
background-color:#CCC;
margin:0;
padding:0;

}

#wrapper {
position:relative; /* so absolute divs within this wrapper are placed relative to same not to whole viewport */
margin: 0 auto 5px auto;
padding:0;
width:1184px;
height:auto;
background-color:#000;



}

/* GENERAL TAGS START ----- */

h1, h2 {
margin: 7px 0;
font-weight:bold; 
}

h1 {
font-size:110%;
border-bottom: 1px dotted #999;

}

h2 {

font-size:100%;
color:#CCC;
border-bottom: 1px dotted #444;

}


p {
margin: 7px 0;
}

ul {
margin:3px 0 3px 5px;
padding-left:0px;
list-style-position:inside;
}




/* feel free to switch this off if you think it's comme Mr. Jarratt :-) Also need to remove one line at end of each content section too. */

p:first-letter {
color:#000;
padding:1px;
font-weight:bold;
margin-right:1px; 
}

a {
color:#0000FF;
text-decoration:none;}
a:hover {
color:#FF0000;}

img {
border:none }


/* GENERAL TAGS END ------------------ */

/* ------------------- TITLE START --------------- */
#masthead {
position:relative;
margin:0;
width:100%;
height:166px; 
}

	#merrymonk {
	float:left;
	margin: 0 0 0 7px;
	}

	#strapline {
	float:right;
	margin:0;
	}
	
	#blueborder {
	position:absolute;
	top:130px;
	left:0;
	
	
 	
	}
	
/* ---------------- TITLE END -------------------- */

hr { /* the red stripe. Add a class if more than one is needed. */
background-color:#8F0024;
height:7px;
width:75.4%;
margin: 15px 0px 5px 0px;
text-align:left;
padding:0;

} 

* html hr {margin: 7px 0px -1px 0px; /* hack corrects margin for IE6 */}
*+html hr {margin: 7px 0px -1px 0px; /* ditto IE7 */}


/* SEARCH BAR START ------------------- */

#searchbar {
position:relative;
background-color:#84C581;
margin:0;
padding:1px 0;
height:23px;
width:75.4%;
}

form.searchform {
margin: 0 0 0 570px;
}

	#searchbar input {
	margin: 2px 3px 0 5px;
	font-size:90%;
	}

	#searchbar input.text {
	height:14px;
	vertical-align:top;
	color:#111;
	border-top: 1px solid #666;
	border-left: 1px solid #666;
	border-right: 1px solid #BBB;
	border-bottom: 1px solid #BBB;
	
	
	 }

	#searchbar p.pform {
	margin:0;
	padding:0; }

/* SEARCH BAR END ------------------- */

/* TOP CONTENT START ------------------- */

#contenttop {
margin:0;
padding:0;
position:relative;
left:10px;
top:20px;
width:884px;
height:282px;
background-image:url(content_top_background.gif);
background-repeat:no-repeat;
background-position:0px 0px;
}

#techniqueimg {
float: right;
margin:40px 25px 0px 35px;
padding:0;
}

#contenttoptext {
position:absolute;
top:20px;
left:190px;
width:220px;
height:240px;
overflow:auto; /* Domunki's favourite! */
padding-right:15px;
}

#contenttoptext p:first-letter {
background-color:#BFE1BD; }

#contenttoptext ul {
list-style-type:square }


/* TOP CONTENT END ------------------- */

/*BOTTOM CONTENT START ------------------- */

#content-bottom-title {
position:relative;
top:50px;
background-color:#9BDBE8;
margin:0;
padding:3px 100px 1px 100px;
height:18px;
width:695px;

}

#content-bottom-text {
position:relative;
left:91px;
top:48px;
padding: 10px 10px 10px 106px;
width:684px;
border:2px solid #9BDBE8;
background-color:#070707; 
background-image:url(poker.jpg);
background-position: 0 300px;
background-repeat:no-repeat;
}

#content-bottom-text h1, #content-bottom-text h2, #content-bottom-text ul,  #content-bottom-text p { /* sets column width. Add any other block level elements you use here. */
width:275px;
}

#content-bottom-text p:first-letter {
background-color:#9BDBE8; }

#content-bottom-text ul {
list-style-type:circle; }

.left {

float:left;
}

.right {
float:right;
}

#rightfrankie {

margin: 8px 0 0 400px; }

* html #rightfrankie {margin: 17px 0 0 400px; /* hack corrects margin for IE6 */}
*+html  #rightfrankie {margin: 17px 0 0 400px; /* ditto IE7 */}

.clearleft {
clear:left; }

.clearer {
clear:both; 
height:0;
}



/*BOTTOM CONTENT END ------------------- */

#hack { /* hack to fill in the gap at the bottom of the wrapper. I'm not proud.  */
height:60px;
background-color:#000;
}

/*#ballnine {} not used*/

/* melting FOOTER START ----------------------- */

#footer {
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 5px;
height: 50px;
text-align:center;
color:#777;
background-color: #CCC;
font-size: 11px;
background-image:url(monkey.gif);
background-repeat:repeat-x;

}


/* FOOTER END   ----------------------- */

/* Right now comes the hard bit... TABLES START ------------------- */

#alltables {
font-family: Arial, Helvetica, sans-serif;
float:right;
margin:-17px 0 0 -5px;
width:250px;

 }

.table-top {
color:#222;
margin:10px 10px 0px 10px;
padding-top:11px;
background-color:#000;
text-align:center;
font-weight:bold;
height:22px;
text-transform:uppercase;

}

.table-contents, .table-contents-one {
margin: 0px 10px 10px 10px;
padding:5px;
width:213px;
border-bottom:2px groove #999;}

.table-contents {
background-color:#9BDBE8; }

.table-contents-one {
background-color:#84C581;
}

table.datatable {
font-size:11px;
background-color:#FFF;
color: #222;
width:100%;
border-top: 1px solid #CCC;
border-left: 1px solid #CCC;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
/* border-collapse:collapse */
}



.datatable td, .datatable tr, .datatable th {
border-top: 1px solid #CCC;
border-left: 1px solid #CCC;
border-right: 1px solid #222;
border-bottom: 1px solid #222;
text-align:center;
padding: 1px 4px;
}



.datatable tr:hover {
background-color:#F2F2F2; }

.woggle {
float:left;
padding: 3px 0 0 5px;
margin-right:-3px;
}

span.title {
margin-left:-30px;
border-bottom: 1px dotted #666; } /* centres table titles cause toggle images take up 30 px */

/* INDIVIDUAL TABLE TOPS ------------------------------ */

#tableonetop {
background-image:url(table1top.gif);
}

#tabletwotop {
background-image:url(table2top.gif);
}

#tablethreetop {
background-image:url(table3top.gif);
}

#tablefourtop {
background-image:url(table4top.gif);
}

#tablefivetop {
background-image:url(table5top.gif);
}

#tablesixtop {
background-image:url(table6top.gif);
}


/* need to: 

Sort out the alignment and sharpness of  the leetle balls on the right. 
Provide link to home page. 
*/