/*
grey #A8A9AD is PS's CMYK>RGB conversion of 40K, but it's a bit too light for text
blue #00AEDC is PS's CMYK>RGB conversion of PMS312 by importing the AI file, or #00A8D6 by converting inside PS
*/

/*NB FOR CLEARFIX
this is prob a better method: http://blogs.sitepoint.com/2005/02/26/simple-clearing-of-floats
i.e. set overflow:auto in the container div, i.e. mainbody
see also http://www.webdesignerwall.com/tutorials/css-clearing-floats-with-overflow/
 */

/*===================================================================*/
/* RESET */ 
/*===================================================================*/

/*shmd reset jan2011 based on http://meyerweb.com/eric/thoughts/2011/01/10/reset-2-0b2-paring-down/ */
html, body, div, span, h1, h2, h3, a, img, b, i, ol, ul, li, fieldset, form, label, table, tr, td, hr {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
ol, ul {
list-style: none;
}

/*===================================================================*/
/* SCROLLBAR ALIGNMENT FIX */ 
/*===================================================================*/

html { /*force the browser to allow space for the scrollbar on short pages so that the centre-alignment of the site doesn't change from page to page - this solution is the best (see http://www.phwinfo.com/forum/macromedia-dreamweaver/351587-vertical-scroll-bar-creating-centered-layout-issue.html)*/
height: 102%;
/*NB if a site is fixed-height then no need for this fix*/
}

/*===================================================================*/
/* TYPOGRAPHY*/ 
/*===================================================================*/

body {
background-color:#A8A9AD; /*grey*/
	background-color : #777; /*as per 200211 email*/
color : #000000;
/*font-family : Verdana,Arial,Helvetica,Geneva,sans-serif;*/
/*Arial/Helvetica are 'narrow' sans fonts, compared to 'wide' Verdana*/
font-family : Verdana, Geneva, sans-serif;
font-size:11px;
line-height: 140%; /*increases legibility*/
}

/*===================================================================*/
/* LAYOUT FOR HOLDING PAGE ONLY */ 
/*===================================================================*/

#cardholder {
width:470px;
height:344px;

/*centre the cardholder on the page*/
position:absolute;
top:50%;
left:50%;
margin-top:-172px;
margin-left:-235px;
}

/*===================================================================*/
/* FRAMEWORK*/ 
/*===================================================================*/

#frame { /*the 980w white-bg frame that sits on the grey page bg*/
width:980px;
margin: 20px auto; /*centre the frame, 20px from top*/
background-color:#FFFFFF;

display:none; /*and it is then faded in by jQ*/

	/*border: 1px solid #00AEDC;*/
}

#mainbody { /*940w and contains panels including: logonav, imagestrip and content*/
width:940px;
padding:20px; /*centre the mainbody within the frame*/ /*SHOULD I DO THIS USING MARGIN???*/
}

#logonav {
width:940px;
height:40px;
clear:both;
margin-bottom:20px;
position:relative; /*so I can abs posn other things inside it*/
}


/*inside logonav is logo + nav; 518+422=940 became 424+516=940 */

#logo {
width:424px;
height:40px;
position:absolute;
top:0px;
left:0px;
}

#nav {
width:516px;
height:40px;
position:absolute;
top:0px;
left:424px;
}

/*inside nav is navbuttons ABOVE navbg*/

#navbuttons {
width:516px;
height:40px;
z-index:1;
position:absolute;
top:0px;
left:0px;
			/*display:none;*/ /*TESTING ONLY*/
}

#navbuttons img, #navbuttons a img {
display:inline; /* <--- will this make them in a row and not a stack? OR does the float do all the work?*/
float:left;
}

#navbg {
width:516px;
height:40px;
z-index:0;
position:absolute;
top:0px;
left:0px;
}

/*inside navbuttons is homebutton + aboutbutton + recenteventsbutton + servicesbutton + contactbutton*/

#homebutton,
#aboutbutton,
#recenteventsbutton,
#servicesbutton,
#contactbutton {
float:left;
}




#imagestrip { /*originally intended to contain a widescreen image, but has since been demoted to holding a 1px high grey line OR the homepage slideshow*/
width:940px;
clear:both;
margin-bottom:20px;
}


#imagestrip310311 { /*holds homepage slideshow on 310311 layout*/
width:940px;
clear:both;
}






#content {
width:940px;
clear:both;
margin-bottom:20px;
}


/*inside content is leftcolumn rightcolumn; Recent Events page has multiple groups of leftbox+rightbox, I should really roll this out across the whole site */

#leftcolumn, .leftbox {
float:left;
width:250px;
/*margin-bottom:20px;*/
}

#rightcolumn, .rightbox {
float:right;
width:650px;
/*margin-bottom:20px;*/
}



#NOWUNUSEDassociationlogos {
height:50px;
width:100%;
padding-top: 10px;
}

#NOWUNUSEDassociationlogos310311 {
height:50px;
width:100%;
/*padding-top: 10px;*/
}

#NOWUNUSEDassociationlogos260911 { /*smaller 45h logos so more can fit in*/
height:45px;
width:100%;
/*padding-top: 10px;*/
padding-bottom: 10px; /*bit more space between consultant logos and accreditation for slide*/
}

#NOWUNUSEDassociationlogos img, #NOWUNUSEDassociationlogos310311 img {
float:left;
margin-right:40px;
}

#NOWUNUSEDassociationlogos260911 img {
float:left;
margin-right:45px; /*40 WAS OK TIL 260911 BUT THEN EXTRA SPACE WAS NEEDED, BUT LOGOS WERE MADE 50h>40 TOO*/
}

#NOWUNUSEDassociationlogos img.last, #associationlogos310311 img.last, #associationlogos260911 img.last  {
margin-right:0px; /*LAST IMAGE HAS NO RIGHT MARGIN*/
}



/*#associationlogos230912,*/ 
#associationlogos080818 {
height:38px;
width:100%;
padding-bottom: 10px; /*bit more space between consultant logos and accreditation for slide*/
}

/*#associationlogos230912 img,*/ 
#associationlogos080818 img { /*nb the assocn logos strip contains heading plus logos with EQUAL gaps between, using margin-right*/
float:left;
margin-right:50px; /*was 31 for #associationlogos230912 */
}

/*#associationlogos230912 img.last,*/ 
#associationlogos080818 img.last {
margin-right:0px; /*LAST IMAGE HAS NO RIGHT MARGIN*/
}






 /*to fix prob caused by floated content no longer being contained by its parent, (parent doesnt always expand to contain it) ("You've got to clear the floats before the container div closes, to force the container to wrap the floats")*/
.clearfix {
clear:both;
}
.bigclearfix {
clear:both;
margin-bottom:60px;/*add space between events listed*/
						margin-bottom:100px;
}



#footerleftalign {
width:940px;
clear:both;
border-top: 1px solid #A8A9AD;
padding-top: 10px; /*space between grey top border and content*/
text-align:left;
}


/*===================================================================*/
/* TEXT AND HYPERLINK STYLING */
/*===================================================================*/

/*
grey #A8A9AD
blue #00AEDC
*/

/*a, a:link, a:visited {
color:#A8A9AD;
}
a:hover, a:focus, a:active {
color:#00AEDC;
}*/


/*pentagram-inspired links*/
#content a, #content a:link, #content a:visited {
color : #000000;
text-decoration:none;
/*border-bottom : 1px dotted #A8A9AD;*/border-bottom : 1px dotted #000;
}

#footer a, #footer a:link, #footer a:visited {
color : #A8A9AD;
text-decoration:none;
border-bottom : 1px dotted #A8A9AD;
}

#content a:hover, #content a:focus, #content a:active, 
#footer a:hover, #footer a:focus, #footer a:active {
color : #00AEDC;
text-decoration:none;
border-bottom : 1px solid #00AEDC;
}

#content a.imagelink, #content a.imagelink:link, #content a.imagelink:visited,
#content a.imagelink:hover, #content a.imagelink:focus, #content a.imagelink:active {
border:none;
}
/*end of pentagram-inspired links*/




.greytext {
color:#A8A9AD;
}


div.privacylink {
color:#A8A9AD;
background:#777;
padding-left:20px;
padding-top:10px;
}

.privacylink a {
border:none !important;
}






#caption { /*for crossSlide - UNDER-IMAGE VERSION FOR WIDESCREEN 1-COL HOMEPAGE*/
margin-top: -15px; /*to offset the margin-bottom of the imagestrip DIV ; might be worth changing the imagestrip CSS if there's ALWAYS a caption below it, eg calling the DIV captionedslideshow*/
color: #A8A9AD;
/*display: none;*/
margin-bottom: 20px;
height:15px; /*to reserve space on the page before the first caption is loaded into it*/
}


#caption310311 { /*for crossSlide - OVER-IMAGE VERSION FOR WIDESCREEN 1-COL HOMEPAGE*/
/*margin-top: -15px;*/ /*to offset the margin-bottom of the imagestrip DIV*/
color: #A8A9AD;
height:15px; /*to reserve space on the page before the first caption is loaded into it*/
margin-top: 15px;
margin-bottom: 5px;
}



#narrowcaption { /*for crossSlide - UNDER-IMAGE VERSION FOR 2-COL HOMEPAGE*/
margin-top: 5px;
color: #A8A9AD;
/*display: none;*/
margin-bottom: 20px;
height:15px; /*to reserve space on the page before the first caption is loaded into it*/
/*width:100%;text-align:right;*/ /*move it to RHS*/
}

.accreditation { /*for displaying under non-crossSlide images*/
color: #A8A9AD;
margin-top: 5px;
margin-bottom: 20px;
}




/*ul li {
list-style-type:square;
list-style-position: inside;
padding-top:15px;
list-style-image: url('../images/blue4x4.gif');
}*/


/*crossbrowser solution from http://www.w3schools.com/css/css_list.asp*/
ul {
list-style-type: none;
}
li {
background-image: url('../images/blue4x4.gif'); /*NB IF BULLET DOES NOT APPEAR ON ONLINE VERSION THEN THIS PATH MIGHT NEED TWEAKING - SOME BROWSERS ARE FUSSY ABOUT IT*/
background-repeat: no-repeat;
background-position: 0px 6px;
padding-left: 10px;
margin-top:20px;
}




b, strong {
font-weight:bold;
color:#00AEDC;
}


/*===================================================================*/
/* STRUCTURAL ELEMENTS*/
/*===================================================================*/


hr { /*styled as a divider line which can be easily inserted into the doc*/
/*margin: 20px 0px 20px 0px;*/ /*T R B L*/
/*padding:0px;*/
width:100%; /*i.e. full width of whatever DIV it's inside*/
height:1px;
background-color:#A8A9AD;
clear:both;
}

h1, .headingunderline {
/*border-bottom: 1px solid #A8A9AD;
padding-bottom:20px;*/
margin-bottom:20px;
	/*width:100%;*/
}


h2 {
font-size:1.7em;
color:#00AEDC;
}

h3 {
font-size:1.7em;
color:white;
background-color:#00AEDC;
text-align:center;
padding:10px;
}






/*===================================================================*/
/* CONTACT FORM STYLING */
/*===================================================================*/

.contactformbox {
width:250px;
margin-top:5px;
margin-bottom:10px;
font-family : Verdana, Geneva, sans-serif;
font-size:11px;
padding:2px; /*space around text typed into boxes*/

	/*new SHAPES styling 091010+*/
	/*color:white;*/
	border: 1px solid #A8A9AD;
	/*background-color:black;*/
}

#sendbutton {
margin-top:5px;
margin-left:1px;
}




/*wide/narrow left col and narrow/wide right col for 2col homepage demo 020311+030311*/
#wideleftcolumn {
float:left;
width:750px;
margin-bottom:15px; /*space between bottom of caption and top of footer line on homepage*/
}
#narrowrightcolumn {
float:right;
width:150px;
}
#narrowrightcolumn a.imagelink, #narrowrightcolumn a.imagelink:link, #narrowrightcolumn a.imagelink:visited,
#narrowrightcolumn a.imagelink:hover, #narrowrightcolumn a.imagelink:focus, #narrowrightcolumn a.imagelink:active {
border:none;
}

#narrowrightcolumn img.eventthumb { /*event thumbnails in rhs col of homepage*/
margin-top:27px;
}

#narrowrightcolumn img.partnerthumb { /*partner logos thumbnails in rhs col of homepage*/
margin-top:27px;
}


#narrowleftcolumn {
float:left;
width:150px;
}
#widerightcolumn {
float:right;
width:750px;
}
#narrowleftcolumn a.imagelink, #narrowleftcolumn a.imagelink:link, #narrowleftcolumn a.imagelink:visited,
#narrowleftcolumn a.imagelink:hover, #narrowleftcolumn a.imagelink:focus, #narrowleftcolumn a.imagelink:active {
border:none;
}