/* CSS Document */
/*--------------------------------------------------------
Basic Design Style Sheet for Paul Hunter Foundation

version: 1.0
author: eric whitehead
email: enquiry@paulhunterfoundation.org
website: http://www.paulhunterfoundation.org
build: july 2007


-----------------------------------------------------------*/

/***** Acknowledgement given to: (CSS Mastery: Advanced Web Standards Solutions - Simon Collison's tutorial- http://www.colly.com/) for the originaation of this layout */

* {
padding: 0;
margin: 0;
}

/************* #body styles ***************/


html, body {
background: #fff;
background: url(../images/gif/purple_bg_lg.gif) no-repeat;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	 color:#000;
	line-height: 1.166;
	margin: 0;
	padding: 0;
	text-align:center; /*  for IE 5x and IE6 quirk mode fix for div auto centering */
	min-width:760px; /* to scroll when width of browser window to small fix */
}
h1 {
	font-size: 150%;
	color: #333;
}

h2 {
font-size: 120%;
	color: #333;
}


h3 {
background:transparent;
color:#800000;
}

h4 {
font-size:0.7em;
}

/*  'h'statements, unique boxes with 'cb' and 'cbb' classes*/

.centerBox h2, .centerBox h3, .centerBox h4 {
background: transparent;
margin-left: 15px;
font-size:0.9em;
color: #0066CC; /* blue */
text-transform:uppercase;
}

.centerBox h3, .centerBox h4 {
margin: 0;
font-size:0.8em;
color: #000;
}
.centerBox h4 {
margin:0;
color:#CC0000;
}
.centerBox h2 img {
margin-top:2px;
border:none;
}

.sectionHeader h2 {
padding:0 0 0 5px;
background: #000;
font-size:0.9em;
color:#FFFF66; /* yellow */
}



/** link styles **/
a{
	 color:#000;
	text-decoration: none;
	font-size:1em;
}

a:link{
	 color: #000;
	text-decoration: none;
	
}

a:visited{
	 color:#000;
	text-decoration: none;
}

a:hover{
	color: #6699FF;
	text-decoration: underline; 
} 
/*  used for footer to overwrite default links color **/
.white {
color:#fff;
}
/************** #layout design **************/

#wrapper, header, address {
background:#fff;
  width: 750px;
  margin:10px auto;
  padding:0;
  text-align:left;
  border: 3px solid #CC0000;
  }
#header {
background-image:url(../images/jpg/header_hunter.jpg);
background-repeat:no-repeat;
height:160px;
margin:0px auto;
padding:10px 0;
border-bottom: 8px solid #CC0000;

}
#header img {
margin:5px 5px 0 5px;
border:none;
z-index:4;
}
#address {
     font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1em;
	font-style: normal;
	font-weight: normal;
	margin: 0px 0px 0px 150px;
	color:#666;
	z-index:3;
}
#title {
margin: 20px 0px 0px 150px;
color:#fff;
padding:0;
font-size:0.9em;
width:450px;
z-index:2;
}

#hunter {
position: absolute;
margin:-125px 0px 0px 555px;
width:185px;
z-index:1;
}
#hunter img {
float:left;
margin:5px 2px;
border:2px solid #C5BDBD;
}
/* now the three main columns, named in order of importance and display when styles switched off */

#primaryContent {
float:left;
width:750px;
display:inline;
margin: 10px 0 20px 0;
}

/* note here that specifying threeColLayout in the body will activate the following div instead of the default primaryContent */

#threeColLayout #primaryContent {
float:left;
width:360px;
margin: 10px 0px 20px 195px;
}

/* note here that specifying twoColLayout in the body will activate the following div instead of the default primaryContent */

#twoColLayout #primaryContent {
float:left;
width:535px;
margin: 10px 0px 20px 20px;
}

#secondaryContent {
float:left;
width: 180px;
margin: 10px 0px 20px 15px;
}

#sideContent {
float:left;
width: 180px;
margin: 10px 0px 20px -750px;
}

#footer {
background:#000;
border-top: 4px solid #CC0000;
clear:both;
width:750px;
font-size: 0.8em;
	padding: 2px 0px 0px 0px;
	text-align: center;
	color:#fff;
}

/***** text div's *********/
.date {
font-size:0.7em;
color:#000;
margin:0 0 0 20px;
}

/*******  box div's ***********/
.box {
margin:10px 0 0 0;
padding:5px 0px 5px 0px;
}

/** WITHOUT JAVASCRIPT SUPPORT **/
/* Styling of the side boxes if there is no JavaScript support - square corner boxes */
.cbside {
margin:0px 5px 0px 0px;
padding:5px 0px 5px 0px;
line-height:130%;
}
/* paragraph styles for the side boxes */
.cbside p {
margin: 0;
padding: 5px;
font-size: 0.8em;
}

/* anchor for main box without javascript support */ 
.cbb {
margin: 0 auto;
background:#fff;
padding: 5px 0 5px 0;
line-height: 170%;
}

.cbb p {
font-size: 0.9em;
}
.cbbImg{
float:left;
margin:5px 5px 3px 10px;
border:none;
}
.cbbImgOne {
float: right;
padding: 0px 10px 3px 5px;
border:none;
}
.cbbImgTwo {
float: left;
padding: 0px 20px 3px 5px;
border:none;
}


/* main box without javascript / rounded corners*/
.mbb {
margin: 0;
padding: 5px 15px;
line-height:150%;
color:#000;
font-size: 0.9em;
}

/** BOXES WITH JAVACRIPT SUPPORT **/
/** transparent custom rounded box corner div's ***/
/**** adapted from Roger Johannson's developments / http://www.456bereastreet.com/archive/200506/customising_custom_corners_and_borders  ****/


.cb {
margin: 0.5em 0;
line-height:150%;
color:#000;
font-size: 0.9em;
}

/* Rules for the top corners and border */
.bt {
background:url(../images/png/box_edge_thin.png) no-repeat 100% 0 !important;
background:url(../images//gif/box_edge_thin.gif) no-repeat 100% 0;
margin:-8px 0 0 25px;
height:15px;
}

.bt div {
height:15px; /* depth of image */
width:25px;
position:relative;
left: -25px;
background:url(../images/png/box_edge_thin.png) no-repeat 0 0 !important;
background:url(../images//gif/box_edge_thin.gif) no-repeat 0 0;
}

/* Wrapper for layout of the content. Use it to set the background colour and insert some padding between the borders and the content. */
.i3 {
background-color: #fff;
border: 1px solid #fff;
border-width:1px 0;
padding:0 15px;
}

/************** feature styles - overwrite cbb & mbb classes only - main box - used only with images !! ***************/

.feature{
	padding: 5px 0 5px 0;
}

.feature img, .leftImg{
	float: right;
	padding: 3px 10px 3px 3px;
	border:none;
}
.leftImg {
float:left;
margin:0;
padding: 3px;
width:160px;
}

.leftthumb {
float:left;
margin:0;
padding: 3px;
width:60px;
}

.feature p {
margin:0;
padding:2px 0;
font-size: 1em;
line-height:1.5em;
font-size:1em;
}
.featureHeader{
     margin:0;
	padding: 0px;
	color:#6A6A6A;
	text-transform:uppercase;
	font-size:0.8em;
	}
	
.more {
color: #808080;
font-size:0.9em;
}
/***** image div's for side column **/
/* For these larger images, I don't want them to float, for that causes the h3 above to be pushed to the right. I also declare a top margin to space the header and image apart, and also increase the border width slightly.  We also set it to display:block so that if body id is twoColLayout, the image will force the header and other bits to wrap around it */
img {
float:none;
margin:2px 0px 2px 5px;
border:2px solid #C5BDBD;
}
.mainImage {
display: block;
float: none;
margin-top: 2px;
border: 3px solid #C5BDBD;
}

/*********** form div's for default page only *************/

/*  Classes for forms */
 #name, #email, #address {
 width: 150px;
 font-size: 0.9em;
 }
 #message {
  width: 300px;
 font-size: 0.9em;
 }
 .label, .warning {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-weight: bold;
 font-size:0.9em;
 }
.warning {
 color: #F00;
 }

/*** classes for newsletter **/
.sent, .txt {
font-size:0.9em;
text-align:center;
}
.txt {
font-size:0.7em