body {
	text-align: center;
	min-width: 780px;
	padding: 0;
	margin: 0;
	font: 0.8em/1.2em Verdana, Helvetica, Arial, sans-serif;
	background-color: #FFFFFF;
	color: #000000;
}


/*** #wrapper contains the layout ***/
#wrapper {
	text-align: left;
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}


/*** #header contains the logos ***/
#header {
	height: 75px;
	padding-top: 15px;
}

#header .logo1 {
	float:left;
	width: 172px;
	margin-left: 15px;
}

#header .logo2 {
	float:right;
	width: 60px;
	margin-top: 10px;
	margin-right: 15px;
}


/*** this is the bar that contains the search field and contact link. Floating it left means that the background color won't disappear when we float the contents. ***/
#top {
	float: left;
	background-color: #1B5692;
	width: 100%;
	height: 20px;
}

#top .contact {
	width: 595px;
	float:left;
}

#top form.search {	
	width: 164px;
	border-left: 1px solid #FFFFFF;
	background-color: #C8632B;
	float: right;
	text-align: right;
	margin: 0;
	padding: 0px 0px 3px 0px;
}


/*** #member for member marketplace ***/
#member {
	height: 100%;
	padding-top: 0px;
	padding-bottom: 0px;
}

#member .logo {
	float:left;
	width: 120px;
}

#member .copy {
	float:right;
	width: 285px;
}

.rule {
	margin-top: 15px;
	margin-bottom: 15px;
}

/*** #member for become a member ***/

#becomeMember {
	vertical-align: middle;
	padding: 0px;
	height: 100%;
	clear: both;
	}

#becomeMember .field {
	padding: 2px 0 1px 0;
	float: left;
	width: 90px;
	text-align: right;
	font-size: 70%;
	}

#becomeMember .value {
	float: right;
	text-align: left;
	width: 320px;
	margin: 0px 0px 2px 0px;
}

#becomeMember .col1 {
	float: left;
	width: 220px;
	margin: 0px 0px 3px 0px;
	height: 100%;
}
#becomeMember .col2 {
	height: 100%;
	margin: 0px 0px 3px 0px;
	float: right;
	width: 180px; 
}


#becomeMember .field1 {
	float:left;
	width: 90px;
	text-align: right;
	font-size: 70%;
}

#becomeMember .value1 {
	float:right;
	width: 120px; 
}

#becomeMember .field2 {
	float:left;
	width: 50px;
	text-align: right;
	font-size: 70%;
}

#becomeMember .value2 {
	float:right;
	width: 120px; 
}

#becomeMember .submitform {
	float: right;
	width: 320px;
	text-align: right;
}

#becomeMember .linespace {
	padding: 0px;
}

#becomeMember input { 
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 0.8em;
	color: #000000; 
	border: solid 1px #666666;
	margin: 0px;
}

#becomeMember select { 
	font-size: 70%;
	color: #000000; 
	border: 1px solid #666666;
	margin: 0px;
}

#becomeMember .text { 
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 0.8em;
}

#becomeMember .formTextArea {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 0.8em;
	border: 1px solid #666666;
	width: 306px;
}

#becomeMember .checkbox { 
	font-size: 70%;
	color: #000000; 
	border: 0px solid;
	margin: 0px;
	padding: 8px 0px 0px 0px;
}



#memberLogin {
	padding-top: 0px;
	padding-bottom: 0px;
	height: 100%;
}

#memberLogin .field {
	float:left;
	width: 60px;
	text-align: right;
	font-size: 70%;
}

#memberLogin .value {
	float:right;
	text-align: left;
	width: 350px;
}

#memberLogin input, input.password{ 
	font-size: 80%;
	color: #000000; 
	border: solid 1px #666666;
	margin: 0px;
}

#memberLogin .submitform {
	float: left;
	width: 280px;
	text-align: right;
	margin: 0px;
	padding: 0px;
}

/*** #wrapper 2 wraps the main content and nav and allows us to get the three column layout while still being able to order the source code so the content is at the top. ***/
#wrapper2 {
	float:left;
	width: 615px;
}

#wrapper3 {
	float:left;
	width: 780px;
	background-image: url(images/back.gif);
	background-repeat: repeat-y;
}

/*** float #content right within the container #wrapper2 so it displays in the centre ***/
#content {
	float:right;
	width: 450px;
	background-color: #FFFFFF;
}

#content .inner {
	margin: 15px 15px 15px 15px;
}

/*** float #nav left within the container and it will display as the first col ***/
#nav {
	float: left;
	width: 164px;
	border-right: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	background-color: #CAD8E6;
	background-image: url(images/shadow_blue.gif);
	background-repeat: repeat-x;
}

/*** this is the right hand column ***/
#extras {
	float: right;
	width: 164px;
	border-left: 1px solid #FFFFFF;
}

/*** clearing the footer both means that it doesn't matter which col is longest the footer will always stay underneath. The footer is divided into 3 sections, floated to match the main page content so they line up with the columns. ***/

#footer {
	clear: both;
	border-top: 4px solid #C8632B;
	background-color: #1B5692;
	padding: 0px 10px 0px 10px;
	height: 18px;
}

#footer .copy {
	float:left;
	width: 210px;
}

#footer .terms {
	float:left;
	width: 340px;
	text-align: center;
}

#footer .policy {
	float: right;
	width: 210px;
	text-align: right;
}



#table {
	clear: both;
	padding: 5px 0px 0px 0px;
}

#table .col1{
	float:left;
	width: 80px;	
}

#table .col2{
	float:right;
	width: 330px;	
}


/*
* ----------------------------------------
* below are styles which address the presentation of elements within the main structure we have set up above.
* ----------------------------------------
*/

/*** some general styles for everything unless we have created a more specific rule, these will generally apply to content in the main content area of the page. Where these elements appear in a sidebar check in the section for that area for a more specific selector. ***/


a:link {
	color: #C8632B;
}

a:visited, a:active {
	color: #C8632B;
}

a:hover {
	color: #C8632B;
}

h1 {
	background-color: #1B5692;
	color:#FFFFFF;
	font-size: 100%;
	font-weight: bold;
	margin: 0px 0px 0px 0px;
	padding: 3px 3px 5px 10px;
	border-top: 1px solid #FFFFFF;
	background-image: url(images/shadow_white.gif);
	background-repeat: repeat-x;
	background-position: bottom;
	text-transform: uppercase;
}

h2 {
	font-size: 100%;
	font-weight: bold;
	color: #1B5692;
	margin: 0;
	padding: 0;
}


/*** the below gets rid of the space between a header and the paragraph following ... in browsers other than IE6 ... add a class of 'first' to the paragraph after a heading to get rid of the space in that browser as well. ***/
h2+p, h3+p, h4+p  {
	margin-top: 0;
}

p.first {
	margin-top: 0;
}

h3 {
	font-size: 100%;
	font-weight: bold;
	color: #FF9900;
	margin: 0;
}


h4 {
	font-size: 100%;
	font-weight: bold;
	color: #000000;
	margin: 0;
}


.heading {
	font-size: 100%;
	font-weight: bold;
	color: #1B5692;
	padding-bottom: 3px;
	background-image: url(images/logo_bullet.gif);
	background-repeat: no-repeat;
	background-position: 0px 5px;
	text-transform: uppercase;
	padding-left: 14px;
}


.headingSearch {
	font-size: 100%;
	font-weight: bold;
	color: #1B5692;
	padding-bottom: 3px;
	background-image: url(images/dotted.gif);
	background-repeat: repeat-x;
	background-position: 0px 14px;
}


.sub {
	font-size: 100%;
	font-weight: bold;
	color: #1B5692;
	padding-bottom: 3px;
	background-image: url(images/dotted.gif);
	background-repeat: repeat-x;
	background-position: 0px 14px;
}

.emphasis {
	font-size: 100%;
	font-weight: bold;
	color: #1B5692;
	text-decoration: none;
	
}

.emphasis a:hover {
	color: #C56529;
	text-decoration: underline;
}




/*C8632B*/
/***this is how to get the orange bullets with regular coloured text. Give the list ul element a class og hilite to get the orange bullets and then wrap a span around the text of each list item (without the span the text will be orange as well) ***/
/*ul {
	margin-left: 0;
	padding: 0px 0px 0px 25px;
}

ul.hilite li {
	margin-bottom: 0.5em;
}

ul.hilite li span {
	color: #5E5E5E;
}*/


#content ul {
	list-style: none;
	list-style-image: url("images/orange_bullet.gif");
 	margin: 0;
	padding: 0px 0px 0px 25px;
	font-size: 100%;		
}







.blockimg {
	display: block;
}



/*** the top bar and search form ***/



#top form.search label {
	color: #fff;
	padding: 3px 0px 0px 5px;
	float:left;
	font-size: 80%;
	font-weight: bold;
}

#top form.search .text {
	width: 84px;
	border: 1px solid #000000;
	font-size: 80%;
	margin: 2px 8px 2px 1px;
}

#top .contact {
	padding: 3px 0px 0px 15px;
	color: #FFFFFF;
	float:left;
	font-size: 80%;
}

#top .contact a:link, #top .contact a:visited {
	color: #FFFFFF;
	text-decoration: none;
}

#top .contact a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}



/*** left hand col ***/

#nav ul{
	list-style: none;
 	margin: 0;
	padding: 5px 10px 15px 0px;
	font-size: 80%;	
}

#nav ul ul {
 	margin: 0;
	padding: 0px 0px 0px 10px;
	font-size: 100%;	
}

#nav li {
 	margin: 0px 0px 0px 0px;
	padding: 7px 0px 0px 15px;
	font-weight: bold;
}

#nav li li {
 	margin: 0px 0px 0px 0px;
	padding: 7px 0px 0px 15px;
	font-weight: bold;
}

#nav li ul {
 	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

#nav li.cur {
	background-image: url(img/nav_bullet.gif);
	background-repeat: no-repeat;
	background-position: 0px 11px;
}

#nav li.sub {
	background-image: url(img/nav_subbullet.gif);
	background-repeat: no-repeat;
	background-position: 6px 11px;
}

#nav li.sub2 {
	background-image: url(img/nav_subbullet.gif);
	background-repeat: no-repeat;
	background-position: 6px 11px;
	margin-left: 10px;
}



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

#nav li a:hover {
	color: #C8632B; 
	text-decoration: underline
}





/*** the right hand column ***/
#extras {
	background-color: #FFC979;
	margin-bottom: 0em;
}

#extras .news {
	background-color: #FFC979;
	background-image: url(images/shadow_orange.gif);
	background-repeat: repeat-x;
	background-position: 0px 22px;
}

#extras .news ul {
	list-style: none;
	margin: 0px 0px 0px 0px;
	padding: 7px 10px 5px 10px;	
}

#extras .news h3 {
	background-color: #C8632B;
	color:#FFFFFF;
	font-size: 100%;
	margin: 0px 0px 0px 0px;
	padding: 3px 3px 3px 10px;
	border-top: 1px solid #FFFFFF;
	background-image: url(images/square.gif);
	background-repeat: no-repeat;
	background-position: top right
}

#extras .events {
	background-color: #FFC979;
	border-bottom: 1px solid #FFFFFF;
}

#extras .keyline {
	border-top: 1px solid #FFFFFF;
}

#extras .events ul {
	list-style: none;
	margin: 0px 0px 0px 0px;
	padding: 5px 10px 5px 10px;	
}

#extras .events h3 {
	background-color: #C8632B;
	color:#FFFFFF;
	font-size: 100%;
	margin: 0px 0px 0px 0px;
	padding: 3px 3px 3px 10px;
	border-top: 1px solid #FFFFFF;
	background-image: url(images/square.gif);
	background-repeat: no-repeat;
	background-position: top right;
}

#extras .members {
	background-color: #FFC979;
	background-image: url(images/shadow_orange.gif);
	background-repeat: repeat-x;
	background-position: 0px 22px;
	border-bottom: 1px solid #FFFFFF;
}


#extras .members h3 {
	background-color: #C8632B;
	color:#FFFFFF;
	font-size: 100%;
	margin: 0px 0px 0px 0px;
	padding: 3px 3px 3px 10px;
	border-top: 1px solid #FFFFFF;
	background-image: url(images/square.gif);
	background-repeat: no-repeat;
	background-position: top right;
}

#extras h3{
	font-size: 130%;
	font-weight: normal;
	margin: 0;
	padding: 0.2em 0 0.2em 10px;
	color: #5E5E5E;
	background-image: url(img/square.gif);
	background-repeat: no-repeat;
	background-position: top right;
}

#extras h4{
	font-size: 140%;
	font-weight: normal;
	margin: 0;
	padding: 0.2em 0 0.2em 10px;
	color: #5E5E5E;
}

#extras ul {
	margin: 1em 1em 1em 1em;
	padding: 0em;
	list-style:none;
}

#extras li {
	margin-bottom: 1em;
	font-size: 80%;
}

#extras a:link, #extras a:visited {
	color: #000000;
	font-weight: plain;
}

#extras li a:link, #extras li a:visited {
	color: #000000;
	text-decoration: none;
}

#extras li a:hover {
	color: #000000; 
	text-decoration: underline
}


/*** styles for content ***/
	#content .feature img {
	display:block;
}


/*** footer links ***/

#footer {
	font-size: 70%;
	color: #FFFFFF;
}

#footer a:link, #footer a:visited {
	color: #FFFFFF;
	text-decoration: none;
}

#footer a:hover {
	color: #FFFFFF; 
	text-decoration: underline;
}


select {
	font-size: 100%; 
	color: #000000;
}


#top form.search input { 
	font-size: 70%;
	color: #000000; 
	border: 1px solid #000000;
	margin: 0px;
	float: left;
	margin: 1px 0px 0px 0px;
	padding: 0px;
}

#regOffice {
	font-size: 70%;
	text-align: center;
	color: #FFFFFF;
	clear: both;
	border-top: 1px solid #C8632B;	
	background-color: #1B5692;
	padding: 0px 10px 0px 10px;
	height: 18px;
}
#clear, .clear  { clear: both; }
form { clear: both; }