/*===================================================================*/
/* NOTES */
/*===================================================================*/
/*
AUGUST 2012

FF0000 heading red
A1A1A1 nav grey, or 161,161,161 
D4D4D4 link hover, or 212,212,212
969696 divider line


T R B L

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/

NB set position:relative; in order to abs-posn other things inside it

NB you can have transparent form fields.... background-color:transparent;

USEFUL CSS POSITIONING TUTORIALS
http://www.barelyfitz.com/screencast/html-training/css/positioning/
http://www.w3schools.com/cssref/playit.asp?filename=playcss_position&preval=fixed
*/

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

/*shmd reset jan2011 based on http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited - NB P and h4 were missing*/
html, body, div, span, h1, h2, h3, h4, a, img, b, i, ol, ul, li, fieldset, form, label, table, tr, td, hr, p {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
/*outline: 0;*/ /*nb this causes focus outlines to disappear from hyperlinks and form elements*/
}
ol, ul {
list-style: none;
}
/*define visible focus styles, if lost due to outline:0 above*/
/*:focus {
outline:1px solid gray;
}*/


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


html, body {
text-align:center; /*this aligns the SITE (even in dodgy browsers), then I need to text-align:left/justify the CONTENT */
color : white;
background-color : black;
line-height:160%;

/* SANS stack from http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks   */
font-family : Arial, “Helvetica Neue”, Helvetica, sans-serif;
}


/*force browser to insert scrollbar even on short pages so the centre-alignment doesn't shift from page to page*/
/*NB if a site is fixed-height then no need for this fix*/
html {
/*this version allows space for the scrollbar without always drawing it, which looks better, but it is only allowed in CSS3*/
/*overflow-y: scroll;*/
/* this solution is compliant but always draws the scrollbar which doesn't look as good, plus it failed in FF3 */
/*height: 100%;margin-bottom: 1px;*/
/*this is best overall http://www.phwinfo.com/forum/macromedia-dreamweaver/351587-vertical-scroll-bar-creating-centered-layout-issue.html*/
height: 102%;
}



#ui {
width:630px;
margin: 10px auto 20px auto; /*centre the site, allow space above+below it*/
line-height:160%; /*increases legibility*/
text-align:center;
}

#nav {
width:630px;
text-align:center;
padding-bottom:10px;
border-bottom:1px solid #969696;
margin-bottom:20px;

	/*copied from old site*/
	line-height:30px;
	font-size:1em;
	color: #A1A1A1;
}

#heading {
width:630px;
color:red;
text-align:center;
margin-bottom:68px;margin-bottom:20px;

	/*copied from old site*/
	font-family : 'Arial-BoldMT','Arial',sans-serif;
	font-size:48px;	font-size:38px;
	line-height:55px;
	font-weight:bold;
}


#content {
text-align:center;
margin-bottom:80px;
}


p {
text-align:left;
width:445px;
margin:0px auto;
	/*copied from old site*/
	font-size:15px;
	line-height:20px;
}


#footer {
width:445px;
text-align:center;
margin:0px auto;

	/*copied from old site*/
	font-size:11px;
	line-height:14px;
}

.fix { /*fix the problem caused by floated content no longer being contained by its parent*/
clear:both; /*TRY NOT TO USE THIS - TRY ADDING overflow:auto TO THE FLOATED DIV'S CONTAINER DIV INSTEAD*/
}

/*===================================================================*/
/* TEXT*/
/*===================================================================*/

.rightalign {
text-align:right;
}

.smalltext {
font-size: 10px;
line-height:150%;
}


b,strong {
font-weight:bold;
}

i {
font-style:italic;
}


.boldcentred {
font-weight:bold;
text-align:center;
}

.redtext {
color:red;
}

.lhs {
text-align:right;
vertical-align:middle;
}

.rhs {
text-align:left;
}

/*===================================================================*/
/* HYPERLINKS*/
/*===================================================================*/

#nav a, #nav a:link, #nav a:visited {
color : #A1A1A1;
text-decoration:none;
}

#nav a:hover, #nav a:focus, #nav a:active {
color:white;
text-decoration:none;
}

#content a, #content a:link, #content a:visited {
color : white;
}

#content a:hover, #content a:focus, #content a:active {
color: #D4D4D4;
}

#footer a, #footer a:link, #footer a:visited {
color : white;
}

#footer a:hover, #footer a:focus, #footer a:active {
color : #D4D4D4;
}



/*UNUSED*/
#content a.imagelink, #content a.imagelink:link, #content a.imagelink:visited,
#content a.imagelink:hover, #content a.imagelink:focus, #content a.imagelink:active {
outline: 0;
border:none;
}


/*===================================================================*/
/* MAILING LIST FORM */
/*===================================================================*/


#mce-EMAIL {
width:445px;
padding:10px;
font-size:15px;
}

#mc-embedded-subscribe {
padding:10px;
font-size:15px;
}

#mc-embedded-subscribe {
Xcolor:black;
Xbackground-color:white;
border-radius:3px;
}

#mc-embedded-subscribe:hover {
cursor: pointer;
color:white;
background-color:red;
}