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(images/content/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;
font-size: 12pt;
color: #8F0024;
}

#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(images/content/monkey.png);
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(images/content/table1top.gif);
}

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

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

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

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

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


/* need to: 
Remove unecessary (-) toggle icon? Then change arrow so it points up when the table is visible. oh yes. 
Sort out the alignment and sharpness of all the leetle balls on the right. 
Provide link to home page. 
*/