/* common.css */

/* To harmonise the look of the site */
* {
	font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

/* To make full use of the screen with the background image */
body.fullSizeWithBg
{
	margin: 0px;
	padding: 0px;
	background: #FAFAFA url("../Images/Backgrounds1250w/stageBg.jpg") no-repeat fixed center center;
}

/* For the opening page */
body.largeTheatreBg
{
	margin: 0px;
	padding: 0px;
	background: #FAFAFA url("../Images/Backgrounds900w/theatreBg.jpg") no-repeat fixed center center;
}

/* To overcome a quirk in some browsers that don't like auto margins ... */
div.container
{
	text-align: center;
}

/* To hold the top of the off-white background with its shadow */
div.bgTop
{
	width: 507px;
	height: 15px;
/* Set it in the middle - see above ... */
	margin-left: auto;
	margin-right: auto;
/* A gap at the top */
	margin-top: 10px;
/* The background */
	background-image: url('../Images/contentBackground/contentBgTop.png');
}

/* The middle of the background - total width being 480 + padding */
div.bgMiddle
{
	width: 480px;
/* Set it in the middle - see above ... */
	margin-left: auto;
	margin-right: auto;
	padding-left: 10px;
	padding-right: 17px;
/* The background */
	background-image: url('../Images/contentBackground/contentBgMiddle.png');
}

/* To hold the bottom of the off-white background with its shadow */
div.bgBottom
{
	width: 507px;
	height: 22px;
/* Set it in the middle - see above ... */
	margin-left: auto;
	margin-right: auto;
/* A gap at the bottom */
	margin-bottom: 10px;
/* The background */
	background-image: url('../Images/contentBackground/contentBgBottom.png');
}

/* To place the dates within the accordions on the left - after the arrow */
.dateLeft
{
	position: absolute;
	left: 30px;
}

/* For the nav menu */
div.posTopLeft
{
	position: absolute;
	top: 0px;
	left: 5px;
}

/* The floating top */
div.toTheTop
{
/* Make it stay regardless of scrolling */
	position: fixed;
/* Position it bottom right of screen */
	right: 0px;
	bottom: 0px;
/* The size of the image it will contain */
	width: 61px;
	height: 64px;
/* Keep it in view */	
	z-index: 1;
}

/* The validation sign */
div.w3org
{
/* Make it stay regardless of scrolling */
	position: fixed;
/* Position it bottom left of screen */
	left: 0px;
	bottom: 0px;
/* The size of the image it will contain */
	width: 88px;
	height: 31px;
/* Keep it in view */	
	z-index: 1;
}

img.firstLetter
{
	float: left;
	margin-right: 5px;
}

/* The next three replace <strong> and <font color= ... > */
.emphasis
{
	font-weight: bold;
}

.emphasisRed
{
	font-weight: bold;
	color: red;
}

.emphasisBlue
{
	font-weight: bold;
	color: blue;
}

/* To position images */
img.setRight
{
	float: right;
	margin-left: 10px;
}

img.setLeft
{
	float: left;
	margin-right: 10px;
}

/* To align paragraphs */
.header 
{
	text-align: center;
}

.narrative 
{	
	text-align: justify;
}

.lAlign
{	
	text-align: left;
}

.rAlign
{	
	text-align: right;
}

/* Place elements at the top ... */
.vTop
{
	vertical-align: text-top;
}

/* in the middle ... */
.vMiddle
{
	vertical-align: middle;
}

/* & at the bottom */
.vBottom 
{	
	vertical-align: text-bottom;
}

.bordered
{
	border-style: ridge;
	border-width: 3px;
	border-color: white;
}

a:link {color:#0000FF;}    /* unvisited link */
a:visited {color:#800080;} /* visited link */

.dialogBorder
{
	border-style: ridge;
	border-width: 5px;
	border-color: white;
	background-color: #FAFAFA;
}