@import url("reset.css");
/*----------------------------------------------------------------------------
Site Style Sheet

author:   David Foster
email:    david@apache.co.uk
details:  Contains tag definitions and controls styling of classes and IDs
          referenced frequently or across every page of a website.

ToC:      1 - Tag Definitions
          2 - Site-wide Layout
          3 - Forms
          4 - Buttons
          5 - Easy Clear
          6 - Accordion Panels
----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------
  ~1 - Tag Definitions
----------------------------------------------------------------------------*/

a { overflow: hidden }

	a img { border: 0 }

	a:link, a:visited, a:active { color: red }

	a:hover	{ text-decoration: underline }

address {
	display: block;
	font-style: normal;
}

body {
	background-color: #E6E6E6;
	color: #333;
	font: 75% Arial, Helvetica, sans-serif;
	text-align: center;
}

dl, ol, p, ul { margin-bottom: 1.333em }

dt, h1, h2, h3, h4, h5, h6, strong { font-weight: bold }

em { font-style: italic }

h1 {
	font-size: 1.6667em;
	margin-bottom: 0.5em;
}

h2 {
	font-size: 1.333em;
	margin-bottom: 0.625em;
}

h3 {
	font-size: 1.16667em;
	margin-bottom: 0.7143em;
}

h4 { font-size: 1.08333em }

li { margin-bottom: 0.333em }

ol { list-style: decimal outside }
	
ol, ul { padding-left: 2em }

ul { list-style: disc outside }


/*----------------------------------------------------------------------------
  ~2 - Site-wide Layout
----------------------------------------------------------------------------*/

#wrapper {
	background: #FFF url(../images/new/wrapper-bg.gif) repeat-y;
	line-height: 1.5;
	margin: 0 auto;
	padding: 0 9px 12px;
	text-align: left;
	width: 985px;
}

#header {
	background: #FFF url(../images/new/header-bg.gif) repeat-x;
	height: 141px;
}

#logo {
	background: url(../images/new/logo.gif);
	float: right;
	height: 141px;
	position: relative;
	text-indent: -1000em;
	width: 278px;
}

#progressBar {
	display: inline;
	float: left;
	list-style: none;
	margin: 87px 0 0 12px;
	padding: 0;
}

#progressBar, #progressBar li { height: 31px }

	#progressBar li {
		float: left;
		text-indent: -1000em;
	}
	
		#progressBar li.current { background-position: bottom }

#step1 { background: url(../images/new/progress-bar/1.gif); width: 168px }
#step2 { background: url(../images/new/progress-bar/2.gif); width: 160px }
#step2.home { background: url(../images/new/progress-bar/home/1.gif); width: 147px }
#step3 { background: url(../images/new/progress-bar/3.gif); width: 154px }
#step4 { background: url(../images/new/progress-bar/4.gif); width: 113px }

	#progressBar #step4 { margin: 0 }

#primaryContent {
	display: inline;
	float: left;
	margin: -2px 0 0 12px;
	width: 749px;
}
	#primaryContent.fullWidth {
		margin-right: 12px;
		width: auto;
	}

.fieldGroupHead {
	background: #F10 url(../images/new/field-group-heading-bg.gif) no-repeat;
	color: #FF0;
	margin: 12px 0 0;
	padding: 5px 9px 3px;
}
		#primaryContent.fullWidth .fieldGroupHead {
			background-image: url(../new/images/field-group-heading-full-width-bg.gif);
		}

.fieldGroupMain {
	background: #E6E6E6;
	border: 1px solid #000;
	border-top: 0;
	padding: 18px 15px 10px;
}

/*	#primaryContent.fieldGroup .fieldGroupMain {
		background: #FFF;
		padding: 18px 15px 0;
	}*/
	
	.fieldGroupFull {
	background: #FFF;
	padding: 18px 15px 0;
    }

.fieldGroupDesc { font-weight: bold }

	.fieldGroupMain td {
		vertical-align: top;
		width: 215px;
		padding-bottom: 8px;
	}

		.fieldGroupMain td td {
			padding-bottom: 0;
			width: auto;
		}

	.fieldGroupMain td.required {
		color: #F10;
		font-weight: bold;
		font-size: 1.333em;
		line-height: 0.5;
		padding: 8px 2px 0 0;
		width: 0.625em;
	}

		.fieldGroupMain td.required em { padding: 10px 0 0 }

	.fieldGroupMain td.label {
		font-weight: bold;
		width: 260px;
		margin: 0 0 0.5em;
	}

	.fieldGroupMain td.error { width: auto }

	.fieldGroupMain table.radioGroup, .fieldGroupMain table.radioGroup tr { display: block	}

	.fieldGroupMain table.radioGroup label { padding-right: 5px }
	.fieldGroupMain table.radioGroup td { padding-right: 5px }

	.fieldGroupMain .faqref { margin: 3px 0 0 5px }
	
	.fieldGroupMain .groupLabel {
		padding: 1.5em 0;
		width: 600px;
	}

	.buttonContainer {
		float: right;
		margin: 15px 0 3px;
	}

#secondaryContent {
	display: inline;
	float: right;
	margin-right: 12px;
	width: 200px;
}

.needAnyHelp {
	height: 92px;
	text-indent: -1000em;
	width: 200px;
}

.needAnyHelpbike {
	background: url(../images/needhelp/need-any-help-24.gif);
}

.needAnyHelpcar {
	background: url(../images/needhelp/need-any-help-25.gif);
}

.needAnyHelpvan {
	background: url(../images/needhelp/need-any-help-33.gif);
}

.needAnyHelphome {
	background: url(../images/needhelp/need-any-help-home.gif);
}

.needAnyHelplandlord {
	background: url(../images/needhelp/need-any-help-landlord.gif);
}

#end {
	background: url(../images/new/footer-bg.gif) no-repeat top;
	height: 9px;
	margin: 0 auto;
	padding-bottom: 20px;
	width: 1003px;
}


/*----------------------------------------------------------------------------
  ~3 - Forms
----------------------------------------------------------------------------*/

.fieldContainer {
	list-style: none;
	margin: 0;
	padding: 0 0 7px 12px;
}

	.fieldContainer li { margin: 0 0 0.5em }

input.iText, select, textarea {
	background: #FFF url(../images/new/field-bg.gif) no-repeat top left;
	border: 1px solid #CCC;
	border-bottom-color: #DDD;
	border-top-color: #AAA;
	color: #555;
	font-family: Arial, Helvetica, sans-serif;
	padding: 2px;
}

input.iText { padding-left: 3px }

.fSize1  { width: 30px  }
.fSize2  { width: 60px  }
.fSize3  { width: 90px  }
.fSize4  { width: 120px }
.fSize5  { width: 150px }
.fSize6  { width: 180px }
.fSize7  { width: 210px }
.fSize8  { width: 240px }
.fSize9  { width: 270px }
.fSize10 { width: 300px }


/*----------------------------------------------------------------------------
  ~4 - Buttons
----------------------------------------------------------------------------*/

.button {
	display: block;
	height: 22px;
	text-indent: -1000em;
}

.bNext { background: url(../images/new/buttons/next.gif); width: 54px }
.bPrev { background: url(../images/new/buttons/prev.gif); width: 55px }

.buttonGroup { margin: 14px 0 2px }

	.buttonGroup .button {
		float: right;
		margin-left: 6px;
	}

		* html .buttonGroup { margin-bottom: 2px }


/*----------------------------------------------------------------------------
  ~5 - Easy Clear
----------------------------------------------------------------------------*/

.fieldContainer li, #wrapper, .accordionHeader, .colContainer { display: inline-block }

.fieldContainer li, #wrapper, .accordionHeader, .colContainer { display: block }

.fieldContainer li:after, #wrapper:after, .accordionHeader:after, .colContainer:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

* html .fieldContainer li, * html #wrapper, * html .accordionHeader,
* html .colContainer { height: 1% }


/*----------------------------------------------------------------------------
  ~6 - Accordian Panels
----------------------------------------------------------------------------*/

.accordionHeader {
	background-color: #D9D9D9;
	border: 1px solid #2F4F4F;
	color: #F0F0F0;
	cursor: pointer;
	font-weight: bold;
	margin: 5px 0 15px;
	padding: 5px;
}

	.accordionHeaderSelected { margin-bottom: 0 }

.accordionContents {
	border: 1px solid #2F4F4F;
	border-top: 0;
	margin-bottom: 15px;
}

	.accordionHeader h4 {
		color: #333;
		float: left;
		font-size: 1.333em;
		font-weight: bold;
		line-height: 1;
		margin: 0;
		padding: 4px 0 0 14px;
		width: 250px;
	}

	.accordionHeader img {
		float: left;
		/*height: 20px;
		width: 121px;*/
	}

.colContainer {
	padding-top: 4px;
	width: 99%;
}

	.colContainer div {
		float: left;
		width: 32%;
		margin-right: 1%;
	}

		.colContainer div p {
			margin: 0;
			padding: 0 0 6px 15px;
		}

		.colContainer div span { margin: 0.666em 0 }
		
				* html .colContainer div span { margin: 0.416667em 0 }

			.colContainer div span input {
				padding: 0;
				margin: 0 0.5em 0 0;
			}
			
/**************************************************************************
*	The extra details form tables on accidents and convictions
**************************************************************************/

table.detailsTable
{
    border-collapse: collapse;
    margin-bottom: 15px;
    white-space: nowrap;
}
table.detailsTable th
{
    background-color: #d5d8dd;
    color: black;
    font-weight: bold;
}
table.detailsTable th, table.detailsTable td
{
    white-space: nowrap;
    border: 1px #666666 solid;
    padding: 4px;
    text-align: center;
}
table.detailsTable td
{
    padding-left: 8px;
    padding-right: 8px;
    background-color: #F9F9F9;
}

table.detailsTable td.label
{
    text-align: left;
}


/*new */

#quoteFooter {
	background-color: #D5D8DD;
	border: 1px solid #000;
	float: left;
	margin: 12px 0 0;
	padding: 12px 10px 10px;
	width: 400px;
}

.quoteReference {
	font-weight: bold;
	margin-bottom: 0.5em;
}

	#quoteFooter ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	#quoteFooter li {
		border-right: 1px solid #0096B8;
		display: inline;
		margin: 0 4px 0 0;
		padding-right: 0.6667em;
	}

	#quoteFooter li.last {
		border: 0;
		padding-right: 0;
	}

	#quoteFooter a {
		font-weight: bold;
		color: #0096B8;
	}
	
	#primaryContent.fullWidth .fieldGroupMain {
	background-color: #FFF;
	width: 929px;
}

.fieldGroupMain .buttonContainer { float: left }