/*This CSS document includes general styles. Applicable to the entire site.
 If you are creating a new class pleaseUseCamelNotation as the className - for consistency*/

body,td,th {
	font-family: Georgia, Times New Roman, Times, serif;
	font-size: medium;

}

body {
	/* background image for IE and opera. image is centred.*/
	background-color: #AFE4FF;
	background-image:url("../images/body-bg-small.png");
	background-repeat: repeat-y;
	background-position:middle top;
	background-attachment: scroll;
	/*filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#EFFAFF', EndColorStr='#AFE4FF'); too buggy*/

	/* gradient fill for Firecox and Webkit*/
	background-image:-moz-linear-gradient(left center, #AFE4FF , #EFFAFF 30%, #EFFAFF 70%, #AFE4FF);
	background-image:-webkit-gradient(linear, 0% 0%, 100% 0%, from(#AFE4FF), to(#AFE4FF), color-stop(.3,#EFFAFF),color-stop(.7,#EFFAFF));
}

.leftCurtain{width:204px; height:498px; position:fixed; top:0px; left:0px; background-image: url('../IMAGES/leftCurtain.png'); background-color:transparent; z-index:1;}
.rightCurtain{width:195px; height:500px; position:fixed; top:0px; right:0px; background-image: url('../IMAGES/rightCurtain.png'); background-color:transparent; z-index:1;}
.mainContent{width:70%; margin: 20px auto; position:static}

 /* general links, cribbed colour from w3schools*/
a{font-size: medium;}
a:link    {color:#900B09; background-color:transparent;text-decoration: underline;}
a:visited {color:#900B09; background-color:transparent;text-decoration: underline;}
a:hover   {color:#FF0000; background-color:transparent;text-decoration: none;}
a:active  {color:#FF0000; background-color:transparent;text-decoration: none;}



/*mail to links. IE 7+ and  firefox 3+.*/
a[rel="mail"] {color: green;}


/* tabs*/
.tabs {border:none; background-image:none; background-color:transparent;}
.tabs .ui-tabs-nav{border:none; background-color:transparent; background-image:none}
.tabs .ui-tabs-panel{ border: 1px solid #dddddd; background: #f2f5f7 url(images/ui-bg_highlight-hard_100_f2f5f7_1x100.png) 50% top repeat-x; color: #362b36; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;}
.tabs  ul.ui-tabs-nav li{display:block; height:3em;}
.tabs  ul.ui-tabs-nav li a.normalTab{vertical-align:middle; display:block; height:1.4em; padding-bottom:0.8em; padding-top:0.8em;}
.tabs  ul.ui-tabs-nav li a.homeTab img{border:none; vertical-align:middle;}
.tabs  ul.ui-tabs-nav li a.homeTab span{vertical-align:middle;}

/* dialog styles*/
.ui-dialog-content .dialogInner{width:auto; overflow:auto; padding:0 0px 0}
.dialogTabs{float:left; width:98%}
.dialogTabs .ui-tabs-panel {float:left; width:94%; }
.dialogTabs  img{float:right; margin-left:2em; margin-bottom: 2em}

ul.informalList{list-style-image: url('../IMAGES/icon-small.png');}


/*cast and crew- main bit*/
/*give large container fixed width, smaller continers fixed width and height, give padding all round- big bottom. hard code individual image size on images.
The text beneath may or may not align. possibly a seperate link?   duplicated code*/
div.largeImageContainer{width:100%; float:left}
div.largeImageContainer div.smallImageContainer{float:left; width:30%; height:auto;}	
div.largeImageContainer div.smallImageContainer img{padding-left:5px;padding-right:5px; border:none} 
/*the image does not look good when underlined*/
div.largeImageContainer div.smallImageContainer a:link    {text-decoration: none; border:none}
div.largeImageContainer div.smallImageContainer  a:visited   {text-decoration: none;border:none}
div.largeImageContainer div.smallImageContainer a:hover   {text-decoration: none;border:none; cursor:pointer}
div.largeImageContainer div.smallImageContainer  a:active  {text-decoration: none;border:none}

div.largeImageContainer div.smallCastContainer{width:264px; height:288px}
div.largeImageContainer div.smallCharityContainer{width:204px; height:150px}

/*Contact us */
form#contactUsForm table {width: 100%;}
form#contactUsForm fieldset {width:100%; border:none; }
ul.errorMessages{list-style-type: disc; color:red}
ul.errorMessages{color:red;}


.twoCol1{	float:left;	width:48%;	padding:0px; }
.twoCol2{	float:right;	width:48%;	padding:0px 0 0 0px;	}

.threeCol1{	float:left;	width:32%;	margin-right:2%;}
.threeCol2{	float:left;	width:32%;	margin-right:2%;}
.threeCol3{	float:left;	width:32%; 	margin:0; 	padding:0; }

.hidden{display:none}

.aTab{float:left; width:100%}

#indexTab{width:100%}
#blogTab{width:86%}
#showsTab{width:100%}

span.chosenCharity{font-style:italic}		/* should realy be a heading*/
.js .notYetStyledByJQuery {display: none;}	/* for users with js on. hide certain items (tabs/buttons) until jquery initialises them properly*/