/*MAIN LAYOUT FOLLOWS*/
body	{
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 100.01%;
	background: #fff;
	color:#000000;
	margin:0;
	text-align: center;
	background:  url("images/gradientblue1600.gif") repeat-x left top;
}

#container	{
	width:80%;
	font-size:76%;
	margin-top:20px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	position:relative;
	background:#ffffcc url(images/twocol-bg.gif) repeat-y 28% 0px; /*cream*/
	}

#banner	{
	background: #0066cc url(images/banner.jpg) no-repeat 20px 25px;
	height:178px;
}

#sidebarleft	{
	width:28%;
	color:#000000;
	background:#cccc99; /*ochre*/
	margin-right:70%;
	margin-left:0;	
	margin-top:0;
	clear:left; /*keeps vertical positioning of sidebarleft the same as content*/
	padding-top:20px;
}

#sidebarleft td	{
	vertical-align: top;
	padding-right:0;
}

#sidebarleftinner	{
	margin:0 5% 0 15%;
}

#content	{
	float:right;
	display:inline;
	margin: 0 1em 0 1em ;
	width:68%;
	padding-top:20px;
}

#content img	{
	padding-top:25px;
	
}

#footer	{
	clear: both;
	font-size: 87%;
	margin-top:20px;
	padding:2px 0 2px 25px;
	border-top:1px solid #b3b386; /*darker ochre*/
	text-align:center;
}


/* Begin CSS Popout Menu */
/*Section below contains Styling that affects spacing and positioning of divs etc*/

#menuh-container	{
	width:100%;
	background:#000000;
}

#menuh
	{
	font-family: arial, helvetica, sans-serif;
	float:left;
	width:100%;
	background:#000000;
}

#menuh a
	{
	display:block;
	border-right: 1px solid #4d4d4d;/*was #3f3f3f*/
	white-space:nowrap;
	text-align:center;
	margin:0;
	padding: 0.2em .4em; /*Note: removing this padding doesn't stop menu going to 2 rows in IE6*/
}

#menuh ul
	{
	list-style:none;
	margin:0;
	padding:0;
	float:left;
	width:9em;	/* width of all menu boxes - except inline width of 6.5em for those without drop down menus */
	}
	
#menuh li
	{
	position:relative;
    min-height: 1px; 	/* Sophie Dennis contribution for IE7 */
    vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
	}

#menuh ul ul
	{
	position:absolute;
	z-index:500;
	top:auto;
	display:none;
	padding: 1em;
	margin:-1em 0 0 -1em;
	}

#menuh ul ul ul 
	{
	top:0;
	left:100%;
	}

div#menuh li:hover
	{
	cursor:pointer;
	z-index:100;
	}
/*End of Styling that affects spacing and positioning of divs etc*/

/*Text Styling of the menu and links follows*/

#menuh ul li a	{		/*need this CSS detail for IE to size menu font correctly*/
	font-size:100%;
	}
	
#menuh a, #menuh a:visited	/* menu at rest */
	{
	color: #ffffcc; /*yellowish cream*/
	background:#000000;
	text-decoration:none;
	}
	
#menuh a:hover	/* menu at mouse-over  */
	{
	color: white;
	background: #2b2b2b; /*dark grey-black*/
	}	
			
#menuh a.top_parent, #menuh a.top_parent:hover  /* attaches down-arrow to all top-parents */
	{
	background-image:  url("/images/navdown_white.gif");
	background-position: right center;
	background-repeat: no-repeat;
	}
	
#menuh a.parent, #menuh a.parent:hover 	/* attaches side-arrow to all parents */
	{
	background-image:  url("/images/nav_white.gif");
	background-position: right center;
	background-repeat: no-repeat;
	}

#menuh ul ul ul a:link, #menuh ul ul ul a:visited	/*for 2nd level drop down menu links*/
	{
	color:#ffffcc; /*yellowish cream*/
	background:#2b2b2b /*dark grey-black*/
	}

#menuh ul ul ul a:hover
	{
	color:#ffffff; /*white*/
	background: #3b3b3b; /*paler grey-black: hover on 2nd level drop down menu*/
	}

#menuh a.parent, #nonbold1 li a{	/*styling of parent links in menusub1 and all links in menusub2*/
	font-weight: normal;
}

#menuh a.parent, #nonbold2 li a{	/*styling of parent links in menusub1 and all links in menusub2*/
	font-weight: normal;
}


#menuh a.parent, #nonbold3 li a{	/*styling of parent links in menusub1 and all links in menusub2*/
	font-weight: normal;
}

#menuh a.top_parent, #menuh a.menumain	{
	font-weight: bold;
	
}

#menuh ul ul ul li a	{	
	background:#2b2b2b;
}
/*end Text Styling of the menu*/

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

/* End CSS Popout Menu */


/*TEXT STYLING FOLLOWS*/

h1	{
	font-size:150%;
	padding:0;
	margin:0;
	
}

h1.join {

	color:#ffffcc;
	background:#cccc99; /*ochre*/
	font-style: italic;
	
}

h2	{
	font-size:115%;
	padding:15px 0 0 0;
}

h3	{
	font-size:100%;
	margin:0;
	padding:0;
}

a:link	{
	color:#0000ff; /*royal blue*/
}

a:visited	{
	color:#000066; /*darker more navy blue*/
}

a:hover	{
	color:#0033ff; /*lighter royal blue than #0000ff*/
}

a:active	{
	color:#0033cc; /*duller lighter blue than hover*/
}

.line	{
	border-bottom:1px solid #cccc99; /*ochre*/
	width:65%;
	padding-top:0;
	margin:0 0 7px 0;
}

.emph	{
	color:#0000ff;
}

.phototxt	{
	font-size: 95%;
}

#container a img{
	border:none;
}

table td, table th{
	padding:0 20px 0 0;
}

th	{
	font-weight: bold;
	margin-bottom: 1em;
	text-align: left;
	padding-right:70px;
	border-bottom:1px solid #cccc99;/*ochre*/
}

#horizlines	td{	/*Club Contacts pg*/
	border-bottom:1px solid #cccc99;/*ochre*/
	vertical-align:top;
}

#bannernote	{
	color:#ffffcc;
	font-size:95%;
	padding-top:90px;
	margin-left:63%;
}

#bannernote a:link, #bannernote a:visited, #bannernote a:hover, #bannernote a:active	{
	color:#ffffcc; /*cream*/
}


/*STYLING FOR CALENDAR TABLE BEGINS HERE*/

.calendar	{
	margin-bottom:15px;
	border-top:1px solid #cccc99;
	border-right:1px solid #cccc99;
	border-bottom:2px solid #cccc99;
	
}

.calendar td, .calendar th	{
	border-top:1px solid #cccc99;
	border-right:1px solid #cccc99;
	padding:5px;
	vertical-align:top;	
}

.calendar td ul	{
	vertical-align:top; /*aligns list at top of td cell*/
	padding-left:15px;/*if don't specify a padding-left then a large indent to left of bullet in FF and no visible bullet in IE6*/
	margin-top:0;
	margin-bottom:0;
	margin-left:0; /*if don't specify then in IE there is a large indent to left of bullet*/
	
}

/*STYLING FOR CALENDAR TABLE ENDS HERE*/

/*STYLING FOR FORM BEGINS HERE*/

#bannerform	{
	background:#0066cc url(images/crcbannerform.gif) no-repeat left top;
	color:#000;
	height:103px;
	width:100%;
}

caption	{
	font-family: Arial, Helvetica, sans-serif;
	font-size:105%;	
	font-weight:bold;
	background:#cccc99; /*ochre*/
	padding:20px 0 10px 0;
	margin:0;
}
	
.left	{
	text-align:right;
	width:50%;
	background: #ffffcc; /*cream*/
	color:#000;
	padding: 10px 10px 0 10px;
	
}

.right	{
	text-align: left;
	width:50%;
	padding-left:2%;
	background: #ffff99; /*lemon*/
	color:#000;
}

/* 
  Secure and Accessible PHP Contact Form v.2.0 Basic Styles by Mike Cherim 
  THESE ARE THE VARIOUS ELEMENTS, CLASSES, IDS, AND SELECTORS YOU MAY NEED FOR STYING THIS FORM
  Anchors or link elements have not been included, but everythig else is :-)
*/

#formcontainer	{	/*JN addition to Cherim form*/
	width:75%; 
	font-size:82%;
	margin-top:20px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	position:relative;
	background-color : #ffffcc; /*was fafafa - changed to yellowish cream - browner - Background to outer form*/
	}
	
/* for main form wrapping div */ /*includes background to Enquiry Form heading and left sidebar*/
div#gb_form_div { 
	background-color : #ffffcc; /*changed to yellowish cream - Background to outer form*/
  /* not styled on demo page */
}

/* id for the form itself */ /*content of this JN addition*/
form#gb_form { 
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	margin-top:20px;
	margin-left:160px;
	text-align:left;
	/*position:relative;JN deleted this and the spam section stopped overlapping*/
	background-color : #ffffcc; /*was fafafa cream Background to form itself*/
	
  /* not styled on demo page */
}

/* form and results heading size */
.main_formhead, .formhead {
	font-size:150%; /*was 1.2em;*/
	color : #000;
	margin-left:160px;
	height:20px;
	font-style: normal; 
}


/* outer fieldset - it's common to make this border : 0; */ 
fieldset#formwrap { 
  text-align:left; /*JN addition to see if labels and input can line up on left*/
}


/* section fieldsets - it's common to make this border : 0; */
fieldset { 
  background-color : #ffffcc; /*was fafafa - changed to yellowish cream - Background to form itself*/
  border:0;
}

/* form legends and dt "heading" */
legend, dt, p.phead { /*JN added p.phead here when changed legend to p class="phead" to correct indenting of legend headings*/
  font-weight : bold; 
  color : #666; /*dark grey*/
  margin-top:5px;
  margin-bottom:3px;

}

/* main legend at top of the form *//*'Use this form to contact us' which JN has now removed from form*/
legend#mainlegend { 
  font-size : 1.2em;
  color : #0066cc; /*blue*/
  margin-left:0px;
 
}

/* form label text */
label { 
  color : #0066cc; /*blue*/
  margin-left:0; /*JN addition of 8px changed to 0*/
}

/* all inputs, select, and textarea */
input.med, input.short, select.med, textarea.textbox { 
  font : 80% 'Trebuchet MS', sans-serif; 
  color : #666; 
  padding : 2px;
  margin-left:0; /*JN addition of 8px changed to 0*/
  border : 1px solid #cccc99;  /*ochre was #cc9000;*/
  background-color : #fffffa; /*was fffffa cream*/
}

/*JN addition to make space above Submit button*/

.button	{
	margin-top:10px;
}

/* to make focus stable in IE 6 */
* html input.button { 
  color : #000;  
  border : 1px solid #b3b386; /*darker ochre was cccc99 ochre and was 0066cc blue*/ 
  background-color : #cc9900;  /*ochre was #cccc99 */
}
* html input.button.hover { 
  color : #000;  
  border : 1px solid #000;
  background-color : #cccc99;  /*ochre was #cc9900;*/
}
* html input.button.focus { 
  color : #000;  
  border : 1px solid #000;
  background-color : #cccc99;  /*ochre was #cc9900;*/
}

/* hover and focus styling - the classes like .hover and .focus below are for the javascript for IE */
input.med:hover, input.med:focus, input.short:hover, input.short:hover, select.med:hover, select.med:focus, textarea.textbox:hover, textarea.textbox:focus, input.med.hover, input.med.focus, input.short.hover, input.short.focus, select.med.hover, select.med.focus, textarea.textbox.hover, textarea.textbox.focus { 
  color : #000;  
  border : 1px solid #000;
  background-color : #fff;
}

/* for the checkbox input */ /*this is checkbox for carbon copy*/
input.checkbox {
  /* not styled on demo page */
}

/* error heading weight and color - bold is for the error reason text */
span.error, dt.error, strong.error { 
  color : #cd0000; /*rusty red*/
  font-weight : bold; 
}

/* success heading color */
span.success { 
  color : #0066cc; /*blue*/
  font-weight : bold; 
  margin-left:20px;/*JN addition to Cherim code which in Confirmation page moved 'Message Sent' heading to right*/
}

/*JN addition to Cherim code to move text following 'Message Sent' heading so that it had left margin*/
p.successp	{
	margin-left:20px;
	
}/*end JN addition to Cherim code*/


/* privacy and "Why?" small element link sizes (relative to their parent element */
small.privacy, small.whythis { 
  font-size : 80%; 
}

/* set up relativity to position small Why? text */
small.whythis { 
  position : relative; 
  background: #ffffcc; /*JN addition to make space for answer to why question have a yellowish cream bkground*/
}

/* Why? link style */
small.whythis a { 
  text-decoration : underline; 
  font-size : 0.95em;
}

small.whythis a:hover, small.whythis a:focus, small.whythis a:active { 
  text-decoration : none;
} 

/* hide the Why? text span */
small.whythis a span { 
  border : 1px solid #ffffcc; /*to yellowish cream was fafafa cream*/
  background-color : #ffffcc; /*to yellowish cream was fafafa cream*/
  padding : 0 4px 0 4px; 
  color : #fafafa; /*to fafafa cream from yellowish cream*/
  text-decoration : none; 
}

/* bring back Why? text span (title attribute backs this up for browsers it doesn't function in */
small.whythis a:hover span, small.whythis a:focus span, small.whythis a:active span { 
  border : 1px solid #000; 
  background-color : #eecc11; /*yellowish*/
  color : #000;
  padding : 0 4px 0 4px; 
  text-decoration : none; 
}

/* the link back to me for form credit */
p.creditline { 
  float : right; 
  margin : -5px 0; /*JN changed top and bottom margin from minus 17 px due to Opera overlapping problem*/
  padding-bottom : 1px; 
  padding-top:5px;/*JN addition so text doesn't in Opera overlap 'Check this box if you want a carbon copy of this email'*/
  font-size : 80%;
   
}

/* used for abbreviation used relative to form. the .abbr class is for the span added for IE */
abbr, .abbr { 
  cursor : help; 
  border-bottom : 1px dotted #999;
}

/* set result color for blockquote dt "heading" */
dl#result_dl_blockq dt, dl.result_dl_blockq dt {
  color : #0066cc; /*blue*/
  margin-left:20px;/*JN addition so heading has a left margin*/
}

/*JN addition to give Time Stamp heading on Confirmation screen a left margin*/
dt small	{
	margin-left:20px;
}

/* position result blockquote flush with parent */
dl#result_dl_blockq blockquote, dl.result_dl_blockq blockquote {
  margin-left : 0;
}

/* style the input names in the result */
div#hf_form_div span.items {
  font-weight : bold;
  color : #cccc99;  /*ochre was #cc9900;*/
}


/* End CSS */