/* Remember, 10--12 words per line for best readability. */
body
{
	background-color: rgb(245,245,254);
	background: url(/images/patterns/pinstripe-blue.png) repeat;	
	
/*	background-color: rgb(255,255,255);	*/	/* white */
/*	background-color: rgb(122,129,152);	*/	/* marine grey */
/*	background-color: rgb(160,172,162);	*/	/* medium sand */
/*	background-color: rgb(149,157,136);	*/	/* seedhead */
/*	background-color: rgb(250,240,230);	*/
	
/*	width: 70em;*/

/*
	width: 98%;
	margin-left: auto;
	margin-right: auto;
*/

	margin-left: 1em;
	margin-right: 1em;

/*	font-family: "Verdana", sans-serif;
	font-size: 10pt;
*/
	color: rgb(0,0,0);
}

.small
{
	font-size: 80%;
}

.fine-print
{
	font-size: 8pt;
/*	padding-top: 100%;	*/
	padding-bottom: 0px;
	margin-top: 3em;
	margin-bottom: 0px;
/*	vertical-align: text-bottom;*/
	margin-left: auto;
	margin-right; auto;
}

H1, H2, H3, H4, H5
{
	font-family: "Verdana", sans-serif;
	font-weight: bold;
/*	color: rgb(70,80,90);	*/
	color: #833;
}	

/*
H1
{
	color: rgb(255,255,255);
	background: rgb(104,146,215);
	border-top-color: rgb(165,189,231);
	border-bottom-color: rgb(50,101,186);

	border-top-width: 2px;
	border-left-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 2px;

	margin: 2px;

	padding: 0.2em;
	padding-left: 1em;
	padding-right: 1em;
}
*/

img
{
	margin: 1ex;
}

img.photo
{
	margin: 1ex;
	padding: 3px;
	border-style: solid;
	border-color: rgb(160,160,160);	
	border-width: 1px;
}

/* This is more general and should supersede the DIV version. */
.blue-bevel
{
	background: rgb(104,146,215);
	border-top-color: rgb(165,189,231);
	border-left-color: rgb(165,189,231);
	border-right-color: rgb(50,101,186);
	border-bottom-color: rgb(50,101,186);
	color: white;

/*	border-style: outset;	*/

	border-top-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 1px;
	border-right-width: 1px;

	border-style: solid;
}


/* main content pane of the page*/
div.root
{
/*	background-color: rgb(255,255,255);	*/
	margin-left:auto; margin-right:auto; width:95%;
	padding: 0em;
}

div.banner
{
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 60%;
	padding: 1em;
}

.frame-black
{
	border-style: solid;
	border-width: 1px;
/*	margin: 4px;	*/	/* Use margins to space boxes out; specify
separately. */
	padding: 0px;
}

/* Cheap solid drop-shadow for now (transparent in future). */
.shadow
{
	border-style: solid;
	border-color: rgb(160,160,160);
	border-top-width: 0px;
	border-left-width: 0px;
	border-right-width: 1px;
	border-bottom-width: 2px;
	padding: 0px;
	/* Don't specify margin here. */
}

.framed-padding
{
	margin: 0px;
	padding: 0.5em;
}

.spaced
{
	/* Have spacing relative so it's smaller on smaller displays. */
	margin:0.5%;
/*	margin:4px;	*/
}

/* DEPRECATED: Framed box with white background for holding text items. */
div.container
{
	background: rgb(255,255,255);
	border-style: solid;
	border-width: 1px;
	border-color: rgb(128,128,128);

	margin: 4px;
	padding:0px;
}

/* Coloured heading with shading effect. */
/* DEPRECATED: background and shaded border seperated; should be an H<n> otherwise */
div.heading
{
	/* Nice pale-ish blue background, white text. */
	
	background: rgb(104,146,215);
	border-top-color: rgb(165,189,231);
	border-bottom-color: rgb(50,101,186);
	color: rgb(255,255,255);
	

	/* Red background, white text. */
	/*
	background: rgb(218,37,29);
	border-top-color: rgb(240,146,140);
	border-bottom-color: rgb(162,29,21);
	color: rgb(255,255,255);
	*/
	
	font-weight: bold;
	font-size: 1.0em;
	text-align: left;	/* or maybe "center" */

	border-style: solid;

	border-top-width: 2px;
	border-left-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 2px;

	margin: 0px;

	padding: 0.2em;
	padding-left: 1em;
	padding-right: 1em;
}

.bevel-padding
{
	margin: 0px;
	padding: 0.2em;
/*
	padding-left: 3px;
	padding-right: 3px;
*/

	padding-left: 0.5em;
	padding-right: 0.5em;

}

.bevel-heading
{
	font-weight: bold;
	font-size: 1.0em;
	text-align: left;
}

/* Leave a small amount of space around the contained object; just a wrapper. */
/* Not needed: you can use the margin setting of div.container. */
/*
div.gap
{
	margin: 2px;
	padding: 0px;
}
*/

div.navbar
{
	float: left;
/*	width: 14em;	*/
	padding: 1em;
}

div.content
{
	float: left;
/*	width: 50em;	*/
	width: 60%;
/*	padding: 0.5em;	*/
}

.padding-small
{
	padding: 0.5em;
}

.padding-standard
{
	padding: 0.75em;
}

/* Boxes appearing on the right of the main content pane for next gig and current news. */
.right-box
{
	float: left;	/* Was right. */
/*	clear: right;	*/
	min-width: 30ex;
	width: 15%;
}

.left-box
{
	float: left;
/* Would consider clear: right for this, but if the client display is big enough, what the hey! */
	min-width: 24ex;
	width: 15%;
}

/* Opera apparently doesn't support much of this: */
hr
{
	border-style: none;
	border-top-style: dotted;
	border-top-color: rgb(160,160,160);
	height: 1px;
}

td
{
	padding-left: 0.5em;
	padding-right: 0.5em
}

/* Background colour schemes: */

.bg-white
{
	background: white;
}

.bg-transparent
{
}