/*
Top level divs (under body) are -header- and -wrapper-.
Within -wrapper- are horizontal panels (divs): top, firstmid, secondmid, bot and footer.
Within those horizontal panels is a choice of number of vertical columns from five down to two.
Just omit a column class for left-aligned single column
Use the centred text class (see bottom of this sheet) if you want anything centred, 
including images - enclose them between <p> tags.
Columns are classes so can be re-used in multiple panels. Customised column classes have a 2 at the end.
*/

* {
  margin: 0;
  padding: 0;
}


body	{
	width: 100%;
	background: #FFFFFF;
	color: #666666;
	font-family: "trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:0.9em;
}

img	{
	margin: 1em;
	padding: 1em;
}

h1	{
	font-size: 2.5em;
	font-weight: 100;
}

hr {
	clear: left;
	margin: 1% auto;
	border: 0;
 	width: 95%;
	color: #999999;
	background-color: #999999;
	height: 1px;  
}

#wrapper	{
	width: 80%;
	margin: 0 auto;
	padding: 2%;
	border: solid 1px #999999;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;

}

/*------------VERTICAL PANELS - divs ------------*/

#toppanel	{
	clear: left;
	width: 80%;
	margin:1% auto;
	padding: 1% 0;
	background-color: #FFFFFF;
	color: #999999;
}

#toppanel a	{
	color: #999999;
}

#toppanel h1	{
	text-align: center;
}

#firstmidpanel	{
	clear: left;
	width: 80%;
	margin:1% auto;
	padding: 1% 0;
	background-color: #FFFFFF;
	color: #666666;
}

#secondmidpanel	{
	clear: left;
	width: 80%;
	margin:1% auto;
	padding: 1% 0;
	background-color: #FFFFFF;
	color: #666666;
}

#botpanel	{
	clear: left;
	width: 80%;
	margin:1% auto;
	padding: 1% 0;
	background-color: #FFFFFF;
	color: #666666;
}

/*------------HORIZONTAL COLUMNS - classes --NOTE CUSTOMISED CLASSES HAVE A 2 AT THE END*/

/*------------5 COLUMNS------------ */

.column5a	{
	clear: left;
	width: 10%;
	float: left;
	border: solid 3px #000000;
}

.column5b	{
	width: 25%;
	float: left;
	border: solid 3px #000000;
}

.column5c	{
	width: 25%;
	float: left;
	border: solid 3px #000000;
}

.column5d	{
	width: 25%;
	float: left;
	border: solid 3px #000000;
}

.column5e	{
	width: 10%;
	float: left;
	border: solid 3px #000000;
}

/*------------5 COLUMNS CUSTOMISED------------*/

.column5a2	{
	clear: left;
	width: 10%;
	float: left;
	border: solid 3px #000000;
}

.column5b2	{
	width: 25%;
	float: left;
	border: solid 3px #000000;
}

.column5c2	{
	width: 35%;
	float: left;
	border: solid 3px #000000;
}

.column5d2	{
	width: 10%;
	float: left;
	border: solid 3px #000000;
}

.column5e2	{
	width: 10%;
	float: left;
	border: solid 3px #000000;
}

/*------------4 COLUMNS------------*/

.column4a	{
	clear: left;
	width: 25%;
	float: left;
	border: solid 3px #000000;
}

.column4b	{
	width: 25%;
	float: left;
	border: solid 3px #000000;
}

.column4c	{
	width: 25%;
	float: left;
	border: solid 3px #000000;
}

.column4d	{
	width: 25%;
	float: left;
	border: solid 3px #000000;
}

/*------------3 COLUMNS------------*/

.column3a	{
	clear: left;
	width: 30%;
	float: left;
	border: solid 3px #000000;
}
.column3b	{
	width: 30%;
	float: left;
	border: solid 3px #000000;
}

.column3c	{
	width: 30%;
	float: left;
	border: solid 3px #000000;
}
/*------------3 COLUMNS CUSTOMISED------------*/

.column3a2	{
	clear: left;
	width: 30%;
	float: left;
	border: solid 3px #000000;
}
.column3b2	{
	width: 40%;
	float: left;
	border: solid 3px #000000;
}

.column3c2	{
	width: 10%;
	float: left;
	border: solid 3px #000000;
}
/*------------2 COLUMNS------------*/

.column2a	{
	clear: left;
	width: 45%;
	float: left;
	border: solid 3px #000000;
}

.column2b	{
	width: 45%;
	float: left;
	border: solid 3px #000000;
}

/*------------2 COLUMNS CUSTOMISED------------*/

.column2a2	{
	clear: left;
	width: 35%;
	float: left;
	border: solid 3px #000000;
}

.column2b2	{
	width: 55%;
	float: left;
	border: solid 3px #000000;
}


/*----TOP AND BOTTOM----*/

/*----HEADER MENU----*/

#header	{
	width: 80%;
	padding: 0 0 1% 0;
	margin: 3% auto;
	background: #FFFFFF;
	color: #D7D7D7;/*light grey*/
}

#header	h1	{
	float: left;
	font-weight: 100;
	font-size: 1.5em;
}

#header ul	{
	float: right;
}

#header	ul li {
	display: inline;
	float: left;
	padding: 0 5px;
	border-right: solid 1px;
}

#header	ul li a {
	color: #999999;/*pale grey*/
	text-decoration: none;
}

#header a:hover {
	color:#FFFFFF;
	background:#336699;/*mid teal blue*/
	text-decoration:none;
}


/*----FOOTER----*/
#footer {
	clear: left;
	width:90%;
	margin: 0 auto;
	padding: 1% 0;
	text-align: center;
}

/*----MISC----*/

/*----CENTRETEXT----  This is to centre text and also images where you can't use display:block so instead enclose between centrext <p> tags */

.centretext	{
	text-align: center;
}

/*----FORMS----*/

.ddfmwrap {
	margin: 15px auto 15px auto;
	width: 450px;
}

.ddfmwrap p.fieldwrap {
	padding: 1px;
	margin: 1px;
	clear: left;
}

form.ddfm {
	text-align: left;
	padding: 10px;
	width: 430px; 
}

form.ddfm fieldset {
	padding: 0 10px 2px 10px;
	margin: 0 0 13px 0;
	display: block;
}

form.ddfm legend {
	padding: 0 6px 0 6px;
	margin: 0 0 0 10px;	 
}

form.ddfm label {
	display: block; 
	float: left; 
	width: 26%; 
	text-align: right;
	margin: 0 10px 0 0; 
	padding-bottom: 15px;
	clear: left;  
}

form.ddfm label.fmtextlblwide {
	display: block;  
	float: left; 
	text-align: left;
	margin: 0 10px 0 1px; 
	padding-bottom: 8px; 
	width: 100%;
}

form.ddfm select.fmselect {
	float: left; 
	display: block;
	width: 65%; 
	margin-bottom: 15px;  
	padding: 3px; 
}

form.ddfm .fmcheck {
	width: 65%; 
	float: left;
	display: block;  
	margin-bottom: 15px;
}

form.ddfm .fmchecklabel {
	display: inline; 
	float: none; 
	clear: none; 
	text-align: left; 
	margin: 0; 
	padding: 0;
}

form.ddfm .fmradio {
	width: 65%;
	float: left;
	display: block;
	margin-bottom: 15px;
}

form.ddfm .fmradiolabel {
	display: inline; 
	float: none; 
	clear: none; 
	text-align: left; 
	margin: 0; 
	padding: 0;
}

form.ddfm .fmcheck p {
	padding: 0;
	margin: 0 0 5px 0;
	line-height: 140%;
}

form.ddfm .fmradio p {
	padding: 0;
	margin: 0 0 5px 0;
	line-height: 140%;
}

form.ddfm textarea {
	float: left; 
	position: relative;
	width: 65%;
	margin-bottom: 15px;
	padding: 3px;
}

form.ddfm .fmfullblock {
	padding-left: 0px;
	float: left; 
	width: 100%;
	margin-bottom: 13px;
	display: block;
}

form.ddfm .fmhalfblock {
	width: 65%;
	padding-left: 29%;
	margin-bottom: 13px;
	float: left; 
	display: block;
}

form.ddfm input.fmverify {
	float: left; 
	width: 22%;
	margin-bottom: 15px; 
	padding: 3px;
	position: relative;
	display: block;
}

form.ddfm img {
	margin: 1px 0 0 10px; 
    float: left;
}

form.ddfm input.fmfile,
form.ddfm input.fmtext {
	float: left; 
	display: block;
	width: 65%;
	margin-bottom: 15px;  
	padding: 3px;
}

form.ddfm input.fmdate {
	float: left; 
	display: block;
	width: 35%;
	margin-bottom: 15px;  
	padding: 3px;
}

form.ddfm textarea.fmtextwide {
	display: block;
	float: left;
	width: 93%;
	margin-right: 2px;
	margin-bottom: 15px; 
	padding: 3px;
}

form.ddfm .credits {
	text-align: right;
	margin-top: 7px;
	width: 97%;
}

form.ddfm .submit {
	text-align: right;
	clear: both; 
	width: 97%;
}

.ddfmwrap .ddfmerrors {
	display: block; 
	float: left; 
	width: 27%; 
	text-align: right;
	margin: 0 10px 0 0; 
	padding-bottom: 15px;
}

.ddfmwrap .errorlist {
	float: left; 
	display: block;
	width: 65%;
	margin-bottom: 15px;  
	padding: 3px;
	text-align: left;
}

.ddfmwrap .recaptcha {
	width: 100%;
	text-align: right;
	clear: both; 
	height: 120px;
	margin-right: 7px;
	padding-bottom: 10px;
}

.ddfmwrap .recaptcha-inner {
	float: right;
	margin-right: 3px;
}

	
.submit	{
	padding: 2%;
}

#quotepanel {
	background-color: #FFFFFF;
	color: #999999;
	clear: left;
	width: 80%;
	margin:1% auto;
	padding: 0;
}





#detail ul {
				display: block;
				float: left;
				width: 15%;
				margin: 2%;
}

#detail li {
				list-style-type: none;
				font-size: .8em;
				padding: 2% 0;
}


.italic									 {
font-style: italic;
}

.bold									 {
font-weight: bold;
border-bottom: solid 1px;
}