/* Global Styles */

body { background: #b8e0f0 url(../images/wide/bg-body.png) no-repeat left top; 
	   font-family: Tahoma, Arial, Helvetica, sans-serif; }
	   
#container { position: relative; width: 970px; min-height: 530px; margin: 9px 25px 50px; padding-bottom: 40px;
			 background: transparent url(../images/site/bg-container.png) repeat left top; }

#branding { height: 117px; background: transparent url(../images/wide/bg-branding2.png) no-repeat left top; }
#branding a { position: absolute; right: 12px; top: 20px; width: 210px; height: 60px; text-indent: -9999px; }

#siteinfo { position: absolute; bottom: 0; width: 957px; height: 21px; padding: 0 12px 0 0;
			background: #4C503D url(../images/wide/bg-siteinfo.png) no-repeat left bottom; 
			color: #fff; text-align: right; line-height: 20px; font-size: 1.0em; }
#siteinfo a { color: #fff; }

/* Navigation */

#navmain { position: absolute; left: 10px; top: 100px; font-family: Arial; font-size: 1.2em; }
#navmain li { float: left; padding: 0 6px; border-right: 1px solid #93cc15; }
#navmain li.last { border-right: none; }
#navmain a { color: #fff; }
#navmain .active a { color: #93cc15; }

/* Content Blocks */

#content { position: relative; overflow: hidden; min-height: 500px; }
#content-main { width: 580px; margin: 0 0 0 164px ; color: #4a503d; min-height: 60em ; }
body#services #content-main { min-height: 96.5em ; }
#content-main.wide { margin-right: 0 ; width: 806px ; }
#content-supp { position: absolute; right:0; top: 20px; width: 219px; }

#content-main #picturebox { float: right; padding-right: 15px ; margin-left: 15px;}
#nav-supp { position: absolute ; left: 0 ; top: 0  ; width: 160px; }

		/* Left Column */
			/* Loginbox */
	#nav-supp #loginform { position: relative; height: 185px; padding: 0 10px; margin-bottom: 13px; 
						   background: transparent url(../images/site/bg-nav-supp-login.gif) no-repeat left top; }
	#nav-supp #loginform h2 { display: none; }
	#nav-supp #loginform form { padding-top: 62px; }
	#nav-supp #loginform .text label { display: block; margin: 4px 0 1px; color: #fff; }
	#nav-supp #loginform .text input { background: #fff; border: none; height: 14px; width: 140px; }
	#nav-supp #loginform .button input { float: right; margin: 8px -3px 0 0; background: none; border: none; padding: 0; 
										 color: #fff; font-size: 1.2em; }
	#nav-supp #loginform #forgottenpassword { float: left; margin-top: 11px; color: #fff; }
	#nav-supp #loginform #joinnow { position: absolute; left: 0; bottom: 0; width: 160px; height: 26px; text-indent: -9999px; }
	
	#nav-supp #joinnow a { display: block; width: 160px; height: 26px; margin: 20px 0 4px;
						   background: transparent url(../images/site/bg-nav-supp-joinnow.gif) no-repeat left top; text-indent: -9999px; }
	#events #nav-supp #joinnow a,
	#directory #nav-supp #joinnow a { margin-top: 4px; }
	
	#nav-supp #eventslink a { display: block; width: 160px; height: 26px; margin: 4px 0 4px;
						   background: transparent url(../images/site/bg-nav-supp-upcomingevents.png) no-repeat left top; text-indent: -9999px; }

	
			/* Page Navigation */
	#nav-supp #pagenav { background: #4a503d; margin-top: 4px; padding: 10px; }
	#nav-supp #pagenav li { font-size: 1.2em; line-height: 1.3; }
	#nav-supp #pagenav li a { display: block; padding-bottom: 3px; margin-bottom: 10px; border-bottom: 1px solid #93cc15; 
							  color: #fff; font-weight: bold; }
	#nav-supp #pagenav li.active a,
	#nav-supp #pagenav li.active li.active a { color: #93cc15; }
	#nav-supp #pagenav li.active li a { color: #fff; }
	#nav-supp #pagenav li li { padding-top: 0; font-size: 0.85em; }
	#nav-supp #pagenav li li a { margin-bottom: 2px; font-weight: normal; border-bottom: none; }
	#nav-supp #pagenav ul ul { margin-bottom: 10px; }
	
			/* Event Search */
	#nav-supp #eventsSearchPanel { margin-bottom: 4px; background: #94ce18; }
	#nav-supp #eventsSearchPanel h2 { height: 49px; border-top: 7px solid #c7e2e9 ; text-indent: -9999px;
									  background: transparent url(../images/site/event-search.gif) no-repeat left top; }
	#nav-supp #eventsSearchPanel h4 { margin: 15px 8px 0; color: #fff; font-size: 1.2em; }
	#nav-supp #eventsSearchPanel .checkbox input { position: relative; top: 2px; margin: 5px 4px 0 8px; }
	#nav-supp #eventsSearchPanel .checkbox label { color: #fff; font-size: 1.1em; }
	#nav-supp #eventsSearchPanel .button { overflow: hidden; }
	#nav-supp #eventsSearchPanel .button input { float: right; margin: 18px 10px 10px 0; background: none; border: none; padding: 0; 
										 color: #fff; font-size: 1.3em; }
	
			/* Sponsors */
	#nav-supp #sponsoredby { margin-top: 13px; }
	#nav-supp #sponsoredby h2 { background: #61b8aa; color: #fff; margin-bottom: 4px; padding: 0 10px; line-height: 1.85; }
	
		/* Right Column */
			/* Your Watford */
	#content-supp h2 { color: #fff ; background: #61b8aa; line-height: 1.85; padding: 0 10px; }
	#content-supp #yourwatford { position: relative; height: 154px; margin-bottom: 4px; }
	#content-supp .imagerotator { position: absolute; left: 0; top: 28px; width: 219px; height: 128px; }
	#content-supp .imagerotator .caption { position: absolute; left: 0; bottom: 0; width: 199px; padding: 5px 10px;
										   background: transparent url(../images/site/bg-60black.png) repeat left top;
										   color: #fff; line-height: 1.3; }
	#content-supp #yourwatford a { position: absolute; width: 100%; height: 100%; text-indent: -9999px; }
		
		/* Membership Directory */
	#directorySearcher { position: relative; height: 143px; width: 199px ; padding: 10px; margin-bottom: 4px;
									   background: transparent url(../images/site/bg-directorySearcher.gif) no-repeat left top; }
	
	#directorySearcher h2 { display: none; }
	#directorySearcher form { padding-top: 42px; }
	#directorySearcher label { display: block; margin: 6px 0 4px; color: #fff; font-size: 1.1em ; }
	#directorySearcher .text input,
	#directorySearcher .select select { background: #fff; border: none; height: 16px; width: 197px; padding: 1px ; }
	#directorySearcher .text input { width: 195px ; }	
	#directorySearcher .button input { float: right; margin: 5px -1px 0 0; background: none; border: none; padding: 0; 
									   color: #fff ; font-size: 1.3em ; }
	#directorySearcher #viewAllMembers { position: absolute; left: 0; bottom: 0; height: 27px; width: 160px; margin: 0; padding: 0;
										 background: none; border: none; text-indent: -9999px; cursor: pointer; }


	#nav-supp #directorySearcher { width: 140px ; height: 178px; background: transparent url(../images/site/bg-nav-supp-directorysearcher.gif) no-repeat left top; }
	#nav-supp #directorySearcher .text input { width: 139px; }
	#nav-supp #directorySearcher .select select { width: 139px; }

		/* Ad Block */
	#content-supp #adverts { margin-top: 13px; }
	#content-supp #adverts h2 { margin-bottom: 4px; }
	#content-supp #adverts a { display: block; margin-bottom: 4px; }

/* Typography */

h1,h2,h3,h4,h5 { font-family: Arial, Helvetica, sans-serif ; }

#content-main h1,
#content-main h2 { background: #93cc15; color: #fff; font-size: 1.4em; line-height: 2.0; padding: 0 15px 0 ; }
#content-main h1 { margin: 20px 0 0 ; border-bottom: 15px solid #fff ; }
#content-main h2 { margin-top: 4px; }

#content-main h3,
#content-main h4,
#content-main h5 { background: #fff; padding: 0.5em 15px 0.5em; line-height: 1.3; }
#content-main h3 { font-size: 1.3em; }
#content-main h4 { font-size: 1.2em; }
#content-main h5 { font-size: 1.1em; }

#content-main p,
#content-main ul,
#content-main ol { background: #fff; padding: 0 15px 15px ; font-size: 1.2em; line-height: 1.4; }

#content-main ul ul,
#content-main ul ol,
#content-main ol ol,
#content-main ol ul { font-size: 1; }

#content-main li { margin-left: 15px; list-style: disc; }

#content-main a { color: #83bC05; font-weight: bold; }

sup { font-size: 80%; position: relative; top: -0.2em; left: 0.1em; }

#content-main .subcontent { border: 15px solid #fff; padding: 15px; background: #c6e9f4; }
#content-main .subcontent * { background: transparent; padding-left: 0; padding-right: 0; }

#content-supp h2,
#nav-supp #sponsoredby h2  { font-size: 1.5em ; }

/* Table formatting */

table { width: 90% ; margin: 15px 5% ; border: 0 ; font-size: 1.2em ; line-height: 1.4 ; border-collapse: collapse ;  }
table td { padding: 2px 7px ; border-bottom: 4px solid #fff ; border-right: 1px solid #fff ; background-color: #c6e9f4 ; } 

/* Forms */

input, select, textarea { font-size: 1em; font-family: Arial; }
.button input { cursor: pointer; }

#content-main #frm { padding: 0 0 15px ; background-color: #fff ; }
#content-main form { margin: 0 15px 0 ; border-top: 2px dotted #dcea9d ; padding-top: 15px ; }
#content-main form h2 { height: 20px ; margin: 0 0 10px ; background-color: #abbec4 ; line-height: 20px ; }
#content-main form fieldset { background-color: #61b7aa ; padding-bottom: 5px ; } 
#content-main form label { float: left ; width: 13.5em ; padding-top: 4px ; color: #fff ; font-size: 1.1em ; font-weight: bold ; }
#content-main form div.checkbox label { float: none ; width: auto ; padding-top: 0 ;  }
#content-main form div.checkbox,
#content-main form div.text,
#content-main form div.multitext,
#content-main form div.datetime,
#content-main form div.select { margin: 0 15px 5px ; }
#content-main form div.text input { width: 20em ; border: 0 ; padding: 1px 3px ; color: #666 ; font: normal normal 1.1em/1.0 Tahoma,Arial,Helvetica,sans-serif ; }
#content-main form div.multitext textarea { width: 25em ; height: 7em ; border: 3px solid #fff ; padding: 0 ; color: #666 ; font: normal normal 1.1em/1.0 Tahoma,Arial,Helvetica,sans-serif ; }
#content-main form div.datetime select,
#content-main form div.select select { border: 1px solid #fff ; padding: 0 ; color: #666 ; font: normal normal 1.1em/1.0 Tahoma,Arial,Helvetica,sans-serif ; }
#content-main form div.button { margin: 5px 15px 10px ; text-align: right ; }
#content-main form span.tooltiphint { position: relative ; top: 1px ; margin: 0 0 0 5px ; border: 1px solid #fff ; padding: 0 4px 0 5px ; color: #fff ; background: #93cc15 ; font-weight: bold ; font-size: 1.3em ; line-height: 1.0 ; cursor: help ; }

/* Contact form (old-style) */

body#contact #enqform { background: #fff ; margin: 0 ; padding: 0 15px 15px ; }
body#contact #content-main h2 { background: #94b1b7; overflow: auto; margin: 0 ; padding: 3px 10px 2px ; line-height: 1.4;  }
body#contact #enqform form { margin: 0 ; border: 0 ; padding: 15px ; background: #D7F3FB ; }
body#contact #enqform .box { margin-bottom: 2em ; }
body#contact #content-main h3 { margin: 0.5em 0 ; border: 0 ; padding: 0 ; background: transparent ; }
body#contact #enqform label { margin-left: 10px ; width: 13em ; color: #4A503D ; font-weight: normal ; font-size: 1.2em ; }
body#contact #enqform label.required { font-weight: bold ; }
body#contact #enqform input.txt { width: 20em ; margin: 0 0 0.5em ; border: none ; border-bottom:  1px solid #61b7aa ; padding: 1px 3px ; color: #4a503d ; font: normal normal 1.2em/1.0 Tahoma,Arial,Helvetica,sans-serif ; }
body#contact #enqform textarea { width: 20.5em ; height: 10em ; margin-bottom: 30px ; border: 0 ; color: #4a503d ; font: normal normal 1.2em/1.3 Tahoma,Arial,Helvetica,sans-serif ; }
body#contact #enqform input.btn { float: left ; margin: -25px 281px 10px ; border: 1px solid #4A503D ; padding: 3px 5px ; color: #4A503D ; background-color: #D7F3FB ; font-size: 1.5em ;  }


/* Welcome Page */

#welcome #content-main h2#welcome-news { padding-top: 12px; background: transparent url(../images/wide/bg-welcome-news-h2.png) no-repeat left top; }
#welcome #content-main h2#welcome-events { padding-top: 14px; background: transparent url(../images/wide/bg-welcome-events-h2.png) no-repeat left top; }

#welcome .welcome-news h3,
#welcome .welcome-events h3 { background: none; padding: 0.5em 0 0 ; }

#welcome .welcome-news p,
#welcome .welcome-events p,
#welcome .welcome-news ul,
#welcome .welcome-events ul,
#welcome .welcome-news ol,
#welcome .welcome-events ol { background: none; padding: 0.5em 0 ; }

#welcome .welcome-news { background: #fff; }
#welcome .welcome-events { background: #9a6987; color: #fff; }

#welcome .welcome-events a { color: #93CC15 ; }

#welcome .newsitem,
#welcome .eventitem,
#welcome p.viewmore { margin: 0 15px; padding: 10px 0; }

#welcome .newsitem { border-bottom: 2px dotted #aa7997; }
#welcome .eventitem { border-bottom: 2px dotted #fff; }

/* Gallery Page */

#gallery #content-main h1 { border-bottom: none; }
#gallery #content-main #galleryfullsize { position: relative; background: #3a402f; }
#gallery #content-main #fullsizepic { margin: 8px 8px; border: 2px solid #fff; }
#gallery #content-main .caption { border-top: 4px solid #c6e9f4; color: #fff; }
#gallery #content-main .caption h2 { margin: 0 0 15px; background: #4a503d url(../images/site/h2-grey-info.png) no-repeat right top; }
#gallery #content-main .caption p { margin: 0 15px; padding: 0 0 15px; background: transparent; }

								  
#gallery #content-supp ul { background: transparent; padding: 0; }
#gallery #content-supp li { float: left; margin: 4px 4px 0 0; }
#gallery #content-supp li.last { margin-right: 0; }
#gallery #content-supp li a { position: relative; display: block; height: 105px; width: 105px; }
#gallery #content-supp li .caption { display: none; }
#gallery #content-supp li .thumbnailoverlay { position: absolute; top: 0; left: 0; height: 105px; width: 105px; 
											  background: transparent url(../images/site/gallery-thumb.gif) no-repeat left top; }

/* Directory Page */

#content-main.directorylisting h1 { background: #4a503d; }
#content-main.directorylisting #directoryList { background: #fff; padding: 0 10px 10px; }
#content-main.directorylisting .directoryItem { clear: left ; position: relative ; overflow: hidden; background: #d7f3fb; margin-top: 0; border-top: 4px solid #fff; }
#content-main.directorylisting .directoryinfo { float: left; width: 577px; margin-right: 4px; }
#content-main.directorylisting .directoryinfo p { padding: 0 10px 10px; background: transparent; color: #4a503d; }
#content-main.directorylisting .directoryinfo p.contactname { padding: 10px; font-size: 13px; font-weight: bold; }
#content-main.directorylisting h2 { background: #94b1b7; overflow: auto; padding: 0; line-height: 1.4; margin-top: 0; margin-bottom: 10px; }
#content-main.directorylisting h2 span.companyname { float: left; padding: 5px 10px 2px; width: 380px; }
#content-main.directorylisting h2 span.category { float: right; width: 185px; padding: 7px 10px 8px; text-align: right; font-size: 11px; background: #4a503d; font-weight: normal; }

#content-main.directorylisting .directoryPics { float: left; width: 205px; margin-top: -5px; }
#content-main.directorylisting .directoryPics img { display: block; width: 190px; margin: 5px 5px 5px 0; border: 5px solid #fff; } /* 5-2-09 removed: height: 60px ; */

#content-main ul#alphabet { float: left ; overflow: visible ; height: 20px ; margin-left: 105px ; }
#content-main ul#alphabet li { float: left ; margin: 0 5px 0 0 ; list-style: none ; }
#content-main ul#alphabet a { display: block ; width: 40px ; height: 30px ; color: #fff ; background: #83BC05 ; font-weight: bold ; line-height: 30px ; text-align: center ; }
#content-main ul#alphabet a.active { background: #9A6987 !important ; cursor: default ; }
#content-main ul#alphabet a:hover { background: #4A503D ; text-decoration: none ; }

/* News Page */

#news #content-main h1 { background: #4a503d; }
#news #content-main #newsList { background: #fff; padding: 0 8px 10px 9px ; }
#news #content-main .newsItem { margin-top: 0; border-top: 4px solid #fff; }
#news #content-main .newsItem p { padding: 0 10px 10px; background: transparent; color: #4a503d; }
#news #content-main .newsItem h2 { background: #a0c920; padding: 0 10px; margin-top: 0; margin-bottom: 10px; }
#news #content-main .newsItem h2 a { color: #fff; }
#news #content-main .newsItem h2 em { font-size: 90% ; font-weight: normal ; }
#news #content-main img { float: right; margin: 0 15px; }

/* Events Page: List */

#events #content-main { margin-top: 4px; }

#events #content-main h1 { margin: 0; border-bottom: 10px solid #fff ; padding: 17px 10px 2px ;
						   background: #4a503d url(../images/wide/bg-events-h1.png) no-repeat left top; }
#events #content-main h2 { border-bottom: 15px solid #fff ; }
#events #content-main.eventlist .eventsList { background: #fff; padding: 0 10px 10px; margin-bottom: 4px; }
#events #content-main.eventlist .event { overflow: auto; padding-top: 4px; border-top: 2px dotted #94ce18; }
#events #content-main.eventlist .event.first { border-top: none; }
#events #content-main.eventlist .event h2 { background: none; line-height: 1.4; color: #4a503d; }
#events #content-main.eventlist .event h2 a { color: #4a503d; }
#events #content-main .dateandbookinginfo { float: left; width: 80px; padding: 0 0 10px; background: transparent url(../images/site/bg-events-dateandbookinginfo.gif) no-repeat left top; line-height: 1.0; }
#events #content-main .dateandbookinginfo span,
#events #content-main .dateandbookinginfo a.button { display: block; text-align: center; }
#events #content-main .dateandbookinginfo span.dateday { color: #fff; font-weight: bold; padding: 3px 0; font-size: 12px; }
#events #content-main .dateandbookinginfo span.datedatemonth { padding: 5px 0 4px; font-size: 20px; }
#events #content-main .dateandbookinginfo span.dateyear { font-size: 16px; color: #6d725e ; }
#events #content-main .dateandbookinginfo a.moreinfo { height: 16px; margin-top: 12px; text-indent: -9999px;
													   background: transparent url(../images/site/bg-events-moreinfo.gif) no-repeat left top; }
#events #content-main .dateandbookinginfo a.booknow { height: 16px; margin-top: 3px; text-indent: -9999px;
													  background: transparent url(../images/site/bg-events-booknow.gif) no-repeat left top; }

#events #content-main.eventlist .eventsummary { margin-left: 80px; }
#events #content-main.eventlist .eventsummary p { padding-bottom: 10px; }
#events #content-main.eventlist .detaillink { float: right; }
#events #content-main.eventlist .detaillink a.book { color: #4dab98 ; }
#events #content-main.eventlist .eventtimeandlocation { font-style: italic; }

/* Events Page: Detail */

#events #content-main.eventdetail { background-color: #fff; }
#events #content-main.eventdetail h1 { border-bottom: 10px solid #fff; }
#events #content-main.eventdetail #eventdetails { margin-left: 95px; }
#events #content-main.eventdetail #eventdetails .subcontent { border-top: none; padding-bottom: 0; }
#events #content-main.eventdetail .dateandbookinginfo { margin: 0 15px ; }
#events #content-main.eventdetail .dateandbookinginfo a.booknow { margin-top: 12px; }
#events #content-main.eventdetail #mapandeventinfo { overflow: auto; clear: left; }
#events #content-main.eventdetail #mapandeventinfo small { display: none; }
#events #content-main.eventdetail #mapandeventinfo #googlemap { float: right; margin-left: 15px; width: 375px !important; height: 350px !important; }

#events #content-main.eventdetail #onlinebooking a { display: block; width: 172px; height: 36px; text-indent: -9999px;
						background: transparent url(../images/site/events-booknow-big.gif) no-repeat left top; }
#events #content-main.eventdetail #fullbooking { font-weight: bold; }

/* Events Page: Booking */

body#events p.error { border: none ; }

ol#steps { position: absolute ; left: 360px ; top: 25px ; width: 30em ;  background: transparent ; }
ol#steps li { float: left ; height: 16px ; padding: 1px 7px 3px 16px ; list-style: none; margin-left: 0; color: #fff ; background: #43533c ; }
#content-main.step1 ol#steps li.step1,
#content-main.step2 ol#steps li.step2,
#content-main.step3 ol#steps li.step3,
#content-main.step4 ol#steps li.step4 { background: #63735c url(../images/site/stage-arrow.gif) no-repeat 4px center ; }

body#events table { margin: 0 ; width: 806px ; background-color: #fff ; border: 15px solid #fff ; border-top: none ; border-collapse: separate ; }
body#events table th,
body#events table td { padding: 2px 5px ; border: none ; border-bottom: 1px solid #ABBEC4 ; background-color: #fff ; }
body#events table th { font-weight: bold ; }
body#events table th.name { width: 15em ; }
body#events table .member { text-align: center ; }
body#events table .price { text-align: right ; width: 5.5em ; }
body#events table tr.total td { text-align: right ; border-bottom: none ; }
body#events table tr.total td.price { font-weight: bold ; }
body#events table span.memberyes { color: #33aa15 ; font-weight: bold ; }
body#events table span.memberno { color: #aa3315 ;  font-weight: bold ; }

/* Events pages: forms */

body#events #content-main form h2 { border-bottom: none ; }
body#events #content-main form label { width: 20em ; } 
body#events #content-main form p { background-color: #61B7AA ; color: #fff ; }
body#events #content-main form div.error,
body#events #content-main form p.error { border: none ; color: #fff ; font-weight: inherit ; background: transparent ; padding: 0 ; }
body#events #content-main form p.error { margin: 1em 0 0.5em -5px ; padding: 1px 5px 3px ; background: #b00 ; }
body#events #content-main form div.error label { color: #c00 ; }
body#events #content-main div.button input { float: right ; margin: 18px 0 10px ; border: 1px solid #fff ; padding: 3px 5px ; background: transparent ; color: #FFFFFF ; font-size: 1.5em ;  }
body#events .step2 div.select label { width: 344px !important; }

/* Make payment form */

body#make_payment #content-main p.error { border: none ; }
body#make_payment #content-main form div.error,
body#make_payment #content-main form p.error { border: none ; color: #fff ; font-weight: inherit ; background: transparent ; padding: 0 ; }
body#make_payment #content-main form p.error { margin: 1em 0 0.5em -5px ; padding: 1px 5px 3px ; background: #b00 ; }
body#make_payment #content-main form div.error label { color: #c00 ; }
body#make_payment #content-main div.button input { float: left ; margin: 18px 240px 10px ; border: 1px solid #fff ; padding: 3px 5px ; background: transparent ; color: #FFFFFF ; font-size: 1.5em ;  }

/* Links Page */

#links h3 { margin-top: 5px; }
#links h3 a { font-size: 15px; color: #4A503D; }
#links #linkList { background: #fff; padding: 15px;   }
#links .item { border-top: 2px dotted #94CE18; padding-top: #fff; background: #fff; overflow: auto; clear: right; }
#links .item img { float: right; margin: 0 0 20px 10px; }
#links #picturebox { padding-bottom: 15px; }

/* Misc */

.error {
	border: 2px solid #a00 ;
	color: #a00 ;
	background-color: #fee ;
	padding: 5px 5px 0 ;
	font-weight: bold ;
}

.info {
	border: 2px solid #060 ;
	color: #060 ;
	background-color: #efe ;
	padding: 5px 5px 0 ;
	font-weight: bold ;
}