﻿
/* CSS Document 
:link :visited :hover :active
*/

/*Global*/
html{width:100%;}
body {font-family:"Lucida Grande", Lucida, Arial, Helvetica, sans-serif; font-size:101%; background:#272727 url('../_img/BGgrade.png') repeat-x top left; color:#000;  margin:0; padding:0; text-align:center; }
a:link, a:visited{color: #f8db01; text-decoration: underline; font-family:Georgia, "Times New Roman", Times, serif;}
a:hover, a:active{color: #f8db01; text-decoration: none;}


h1{ width:50%; font-size:500%; font-family:Georgia, "Times New Roman", Times, serif; font-weight:100; padding: 0;}
h2{font-size:300%; font-family:Georgia, "Times New Roman", Times, serif; font-weight:100;}
h3{font-size:160%; font-family:Georgia, "Times New Roman", Times, serif; font-weight:100}
h4{font-size:140%; font-family:Georgia, "Times New Roman", Times, serif; font-weight:100}

#cast dl dt{font-size:125%; padding-left:15px;}
#cast dl dd{font-size:120%; padding-left:15px;}

p{font-size: 113%;}
img{ border:none}
.clear{clear:both; height:1px;}
.floatLeft{ float:left;}

/*global classes - positioning*/
.clear{ clear:both;margin: 0;padding: 0;}
.floatLeft{float:left;}
.floatRight{float:right;}
.nofloat{float:none;}
.noBullet{list-style-type:none; list-style-position: outside; margin-left: 0; padding-left: 0; padding-right: 5px; margin-bottom: 10px;}
.noBulletLinkList {list-style-type:none; list-style-position: outside; margin: 0; padding: 0;}
.noBulletLinkList li{margin: 0; padding: 0 5px 10px 0;}

/*global classes - positioning images*/
.imgFlt_Left{float:left; margin:0; padding:0 20px 20px 0;}
.imgFlt_Right{float:right; margin:0; padding:0 0 20px 20px;}

.picture { border: 1px solid #CCC; padding: 3px; text-align:center; margin:0 10px 5px 10px;background:#FFF;}
div.picture p{text-align:center;margin:0 ;padding:0;}

/*wrappers*/
#header{margin:0; padding:0; }
#header h1{float:left;margin-top: 4px; margin-bottom: 14px;}
#header span{margin: 12px 10px 0 0; padding:0;width:200px; text-align:right; float:right; color:#FFF; font-weight:bold; font-size:120%; }

#wrapper{height: 1%; margin:0 auto; padding:0; width: 890px; font-size:70%; text-align:left;}
#contentWrapper{padding:0;margin:0; background:#FFF}

/*navigation*/
#nav{ background:#333 url('../_img/navBG.gif'); width:100%; margin:0; padding:0;}
#nav ul{ list-style:none; width:80%; margin:0; padding:0;float:left;}
#nav ul li{ color:#ddd; border-right:1px solid #6e6e6e; float:left; display:inline; /*width:9.5%;*/ margin:0; padding:0;}
#nav ul li a{ color:#eee; margin:0; font-size:130%; text-decoration:none; font-weight:bold; padding:.6em 1em; display:block;}
#nav ul li a:hover{ color:#333; background:#f8db01; margin:0; font-size:130%; text-decoration:none; font-weight:bold; padding:.6em 1em; display:block;}
#nav p {margin:0; padding:10px; float:right;}

/*featured content*/
#feature{ background: url('../image/image/the-producers-180.png') no-repeat top right; padding:0; margin:0; border-bottom:1px solid #ccc;min-height:300px;}
#featureList{ background: url('../_img/featGrade.png') no-repeat top left; width:300px; float:left;	}
#featureList ul{ margin:0; padding:0; list-style:none;}
#featureList ul li{ height:100px; margin:0; padding:10px 0 0 20px; color:#FFF; }
#featureList ul li.last{ height:75px;}
#featureList li h2{ margin:0; padding:0;}
#featureList li h2 a{ font-size:85%; text-decoration:none;  color:#FFF; font-weight:300; margin:0; padding:0;}
#featureList li h2 a:hover{ color:#FFF;margin:0; padding:0; background:#7a0402}
#featureList li a{ color:#f8db01; margin:0; padding:0; font-size:120%;}

#bill{float:left; color:#fff; width:auto;padding:1px 2px; margin:10px 0 0 0; }
#bill h2{font-size:200%; margin-bottom:3px; } 
#bill h2 a{background: #191974;text-decoration:none; font-family:Lucida, Arial, Helvetica, sans-serif;color:#fff; width:auto;padding:1px 2px 0 2px; margin:0; }
#bill h2 a:hover{background: #1f1feb;text-decoration:none; font-family:Lucida, Arial, Helvetica, sans-serif;color:#fff; width:auto;padding:1px 2px 0 2px; margin:0; }
#bill h3{margin-top:3px; } 
#bill h3 a{background: #fff;text-decoration:none; font-family:Lucida, Arial, Helvetica, sans-serif;color:#222; width:auto;padding:3px 2px 0 2px; margin:0;}
#bill h3 a:hover{background: #fff;text-decoration:none; color:#222; width:auto;padding:3px 2px 0 2px; margin:0;}

#content{ padding:20px 20px;}
#content h2{font-size:200%;font-family:Georgia, "Times New Roman", Times, serif; font-weight:100;margin-top:0;}
#content .floatleft img{ padding-top: 0;}
#content .outline{padding:0 0 0 20px; float:left; width:60%;}
#venue a:link, #venue a:visited, #util a:link, #util a:visited, #footer a:link, #footer a:visited, #content a:link, #content a:visited{color: #f00; text-decoration: underline; font-family:Georgia, "Times New Roman", Times, serif;}
#venue a:hover, #venue a:active, #util a:hover, #util a:active, #footer a:hover, #footer a:active, #content a:hover, #content a:active{color: #333; text-decoration: none;}
#jumplist li {line-height:1.3em; list-style:none;}

.worthingtheatres a{color:#f00; margin:0; padding:0; font-size:120%;}
.worthingtheatres a:hover{color:#333; margin:0; padding:0; font-size:120%;}

.top{float:right;}
.top a{color:#f00; margin:0; padding:0; font-size:120%;}
.top a:hover{color:#333; margin:0; padding:0; font-size:120%;}
#noda{float:right; width:60%; text-align:right;}

#footer{ background:#efefef; margin-top:0;padding:3px 10px;}
#util { color:#CCC;}

#util p.base{ font-size:95%; padding:0 10px;color:#636363; text-align:left;}
#util a{ color:#636363; text-decoration:none;}
#util a:hover{ color:#fff; text-decoration:none;}
.owl{color:#fff!important}
.owl:hover{color:#0F0!important}


/*productions*/
#production{ margin:0; padding:0;height: 167px; background:url('../image/prod_bg.jpg') no-repeat top left; color:#FFF; border-bottom: 1px solid #000;}
#productionTitle{float:left;width: 318px; margin:0; padding:0;height: 167px; background: transparent url('../_img/proGrade.png') repeat-y top left;font-family: Arial, Helvetica, sans-serif; }
#productionTitle small{ padding:10px 10px 0 13px;  float:left;}
#productionTitle h2{margin: 0 0 0 13px; padding:0;}
#productionTitle p{margin: 0 0 0 13px;}
.aboutBG{ background:url('../image/about_bg.jpg') no-repeat top left!important;}
.youthBG{ background:url('../image/youth_bg.jpg') no-repeat top left!important;}
#venue{float:right;margin:120px 10px 0 0;padding:3px 0;text-align:right;}
#venue p{background:#d63902;margin:2px 0; padding:0;width:auto;}
#cast{ background:#d8d8d8; border-top:2px solid #000; margin:-18px 0 0; padding:0 15px;overflow: hidden;}
#cast div{ margin:10px 0 0 0; padding:0; width:32%; float:left;list-style:none }
#cast div h3{ padding-left:10px;}

/*contact form*/
form{width:40%;}
input{ margin:5px 0}
textarea { margin-left:170px;}
label { width: 170px; text-align:right; display:inline-block;}
.submit{margin: 5px 0 0 380px;}
legend{font-size:130%;}
#formwrapper{float:left; width:49%!important;}

/*form validation*/
div.show p{display:inline; color:red; padding-left: 5px;}
div.hidden p{display:none; color:red; padding-left: 5px;}
