/* Setting the background image for the site - for now have commented
out the image, because many of the Event posters jpgs etc are on white backgrounds
and having this marble effect just causes unecessary contrasts, the white background
is better.  Just to ensure this works have linked this CSS to the following pages on the site
as the image is commented out the white background remains 
[ceecmain, index, header, about, GalleryIndex, BogWeek06-Events] */

/* body {
background-image: url(images/marblefaint.jpg);} */


/* What follows is the code for the boxes used on the various pages
the Home page, Event Details & Shop pages */


/* \*/
* html #tlc, * html #trc {height: 1%;}
/* */

#tlc, #trc { zoom: 1 }

body
	{
	margin: 0;
	padding: 0;
	background-color: white;
	font-size: 100.01%;
	text-align: center; 
	}

/* <-- these BOX dimensions are for the shop page, wider to hold the front & back CD covers */
#box_shop
	{
	position: relative;
	margin-left: auto;
	margin-right: auto;	
	margin-top: 1em;
	padding: 0;
	text-align: left;
	width:80%;				/* <-- use this to tie width to viewport size */
	width: 35em;				/* <-- use this for a set width */
	background-color: #eeeeee;
	}

/* <-- these BOX dimensions are for the boxes on the Homepage, for different screen width resolutions, 800, 1024, 1280 & 1440 pixel widths, 
		didn't need these in end as boxes fitted to table cells  */
#box_888
	{
	position: relative;
	margin-left: auto;
	margin-right: auto;	
	margin-top: 1em;
	padding: 0;
	text-align: left;
	width:80%;				/* <-- use this to tie width to viewport size */
	width: 16em;				/* <-- use this for a set width */
	background-color: #eeeeee;
	}
	
#box_1024
	{
	position: relative;
	margin-left: auto;
	margin-right: auto;	
	margin-top: 1em;
	padding: 0;
	text-align: left;
	width:80%;				/* <-- use this to tie width to viewport size */
	width: 20em;				/* <-- use this for a set width */
	background-color: #eeeeee;
	}

#box_1280
	{
	position: relative;
	margin-left: auto;
	margin-right: auto;	
	margin-top: 1em;
	padding: 0;
	text-align: left;
	width:80%;				/* <-- use this to tie width to viewport size */
	width: 25em;				/* <-- use this for a set width */
	background-color: #eeeeee;
	}

#box_1440
	{
	position: relative;
	margin-left: auto;
	margin-right: auto;	
	margin-top: 1em;
	padding: 0;
	text-align: left;
	width:80%;				/* <-- use this to tie width to viewport size */
	width: 28em;				/* <-- use this for a set width */
	background-color: #eeeeee;
	}

 	
#content
	{
	padding: 1em;
	}

#content h1
	{
	color:#000000;
	font-weight: normal;
	font-size: 1.2em;
	font-family: Monotype Corsiva, helvetica, geneva, arial, sans-serif;
	}
		
#content p
	{
	color:#3b3b3b;
	font-size: 1em;
	line-height: 1.3em;
	font-family: arial, helvetica, sans-serif;
	}
		
/* ---=== border code follows ===--- */
/*
	tlc = top left corner
	trc = top right corner
	blc = bottom left corner
	brc = bottom right corner
	lb = left border
	rb = right border
	tb = top border
	bb = bottom border 
*/

#tlc, #trc, #blc, #brc
	{
	background-color: transparent;
	background-repeat: no-repeat;
	}

#tlc
	{
	background-image:url(images/tlc.gif);
	background-position: 0% 0%;
	}

#trc
	{
	background-image:url(images/trc.gif);
	background-position: 100% 0%;
	}
	
#blc
	{
	background-image:url(images/blc.gif);
	background-position: 0% 100%;
	}

#brc
	{
	background-image:url(images/brc.gif);
	background-position: 100% 100%;
	}

#tb, #bb
	{
	background-color: transparent;
	background-repeat: repeat-x;
	}
			
#tb
	{
	background-image:url(images/tb.gif);
	background-position: 0% 0%;
	}

#bb
	{
	background-image:url(images/bb.gif);
	background-position: 50% 100%;
	}
	
#rb
	{
	background-image:url(images/r.gif);
	background-position: 100% 0%;
	background-repeat: repeat-y;
	}

#lb
	{
	background-color: #eeeeee;
	background-image:url(images/l.gif);
	background-position: 0% 100%;
	background-repeat: repeat-y;
	}

/* End of the code for the boxes used on the various pages
the Home page, Event Details & Shop pages */