/* Clear Conveyancing Style Sheet */

/* ©2004 Connectpoint Interactive */


/* --------- Layout --------- */

body {
	margin: 0;
	padding: 0;
	color: #111;
	text-align: center;
	background: #F5F3EC  url(../images/page_background02.gif) repeat-y 50% 0;
	font-family: "Trebuchet MS", verdana, lucida, arial, helvetica, sans-serif;
}

#header {
	float: left;
	margin: 25px 0 30px;
}

#container {
	position: absolute;
	left: 50%;
	margin: 0 0 0 -360px;
	padding: 0;
	width: 723px;
	text-align: left;
	background: url(../images/header_top_gradient.gif) repeat-x;
}

#signIn {
	display: none; /* PHASE 1 - set to 'none' until sign in function is ready (phase 2) */
	position: absolute;
	top: 10px;
	right: 22px;
	width: 214px;
	margin: 0;
	padding: 0;
	color: white;
	font-size: 12px;
}

#signInNav {
	float: right;
	font-size: 11px;
	width: 215px;
	margin-top: -5px;
	height: 30px;
}

#content {
	background:	#C4EDFF  url(../images/content_background01.jpg) repeat-x;
	margin: 0;
	padding: 20px 0 0;
	position: absolute;
	top: 126px;
	width: 723px;
}

#wideColumn {
	float: left;
	width: 683px;
	padding: 0;
	margin: 0; /* Can't add left margin due to IE bug. Added a spacer DIV instead. Fix found (SimpleBits), but not yet used.  */
}

#leftColumn {
	float: left;
	width: 436px;
	padding: 0;
	margin: 0; /* Can't add left margin due to IE bug. Added a spacer DIV instead. Fix found (SimpleBits), but not yet used. */
}

#rightColumn {
	float: left;
	width: 215px;
	margin: 0 0 0 32px;
	padding: 0;
}


/* --------- Primary Nav --------- */

#primaryNav {
	position: absolute;
	left: 16px;
	top: 104px;
	z-index: 10;
}

#primaryNav li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
}

#primaryNav li, #primaryNav a {
	height: 23px;
	display: block;
}

#home {left: 0px; width: 53px; background:  url(../images/navigation/primary/home.gif) no-repeat;}
#quote {left: 61px; width: 89px; background: transparent  url(../images/navigation/primary/quote.gif) no-repeat;}
#explained {left: 158px; width: 173px; background: transparent  url(../images/navigation/primary/explained.gif) no-repeat;}
#about {left: 339px; width: 73px; background: transparent  url(../images/navigation/primary/about.gif) no-repeat;}
#account {left: 469px; width: 97px; background: transparent  url(../images/navigation/primary/account.gif) no-repeat;}

#home a:hover {background:  url(../images/navigation/primary/home.gif) 0 -46px no-repeat;}
#quote a:hover {background: transparent  url(../images/navigation/primary/quote.gif) 0 -46px no-repeat;}
#explained a:hover {background: transparent  url(../images/navigation/primary/explained.gif) 0 -46px no-repeat;}
#about a:hover {background: transparent  url(../images/navigation/primary/about.gif) 0 -46px no-repeat;}
#account a:hover {background: transparent  url(../images/navigation/primary/account.gif) 0 -46px no-repeat;}

#home.on {background: transparent  url(../images/navigation/primary/home.gif) 0 -92px no-repeat;}
#quote.on {background: transparent  url(../images/navigation/primary/quote.gif) 0 -92px no-repeat;}
#explained.on {background: transparent  url(../images/navigation/primary/explained.gif) 0 -92px no-repeat;}
#about.on {background: transparent  url(../images/navigation/primary/about.gif) 0 -92px no-repeat;}
#account.on {background: transparent  url(../images/navigation/primary/account.gif) 0 -92px no-repeat;}

.navText {display: none;}


/* --------- Links --------- */

#leftColumn a:link, #rightColumn a:link, #wideColumn a:link  {
	color: #E04000;
	text-decoration: underline;
}

#leftColumn a:visited, #rightColumn a:visited, #wideColumn a:visited {
	color: #A84E2A;
}

#signIn a {
	color: white;
	font-size: 11px;
	font-weight: bold;
	line-height: 17px;
	text-decoration: none;
}

#signIn a:hover {
	text-decoration: underline;
}


/* --------- Page elements --------- */

h1 {
	margin: 0;
	padding: 0.5em 0;
	font-size: 1.5em;
}

#signIn h1 {
	font-size: 1.25em;	
	color: white;
	padding: 0 0 4px;
}

h2 {
	margin: 0 0 0.5em;
	padding: 0;
	font-size: 1.15em;
}

h3 {
	margin: 0 0 0.2em;
	padding: 0.2em 0 0;
	font-size: 0.95em;
}

h4 {
	margin: 0;
	padding: 0;
	font-size: 1.2em;
	line-height: 1em;
}

form h3 { margin: 0 0 0.75em; }

h1, h2, h3, h4 { color: #00597B; }

p {
	font-size: inherit;
}

/* commented backslash hack v2 - Mac IE will ignore the following styles \*/
	p {
		margin: 0 0 1.3em;
		font-size: 0.85em;
		line-height: 1.4;
	}
/* end hack */

#rightColumn p {
	margin-top: 0.5em;
	font-size: 0.75em;
	line-height: 1.2;
}

div.infoPanel p {
	font-size: 12px;
	line-height: 1.2;
}

img {
	border: 0px;
}
	
em {
	font-style: italic;
}
	
strong {
	font-weight: bold;
}

.infoPanel ul, .infoPanel ol {
	line-height: 1.5;
}

.infoPanel ul li, .infoPanel ol li {
	font-size: 12px;
}

#leftColumn ul, #wideColumn ul {
	margin: -10px 0 12px 6px;
	padding: 0;
	font-size: 12px;
}

#rightColumn ul {
	margin: 0 0 0 3px;
	padding: 0 0 6px;
	font-size: 13px;
}

#leftColumn ul li, #rightColumn ul li, #wideColumn ul li {
	margin: 5px 0;
	padding: 0 0 0 20px;
	color: #111;
	list-style-type: none;
	background: url(../images/bullet.gif) no-repeat;
	line-height: 1.4;
}

#leftColumn ol, #rightColumn ol, #wideColumn ol {
	margin: 0;
	padding: 0 2em 1em;
	font-size: 13px;
}

#leftColumn ol li, #rightColumn ol li, #wideColumn ol li {
	margin: 0px;
	padding: 0 0 4px 0;
	color: #111;
	list-style-type: decimal;
	line-height: 1.4;
}

div.boxContent p {
	margin: 3px 0;
	font-size: 0.8em;
}


/* --------- Sign in box --------- */

#signInForm {	
	margin: 3px 0 0 1px;
	color: white;
}

#signIn #signInUser {
	width: 205px;
}

#signIn #signInPass {
	width: 115px;
}

#signIn #reminder {
	color: white;
	font-size: 10px;
	line-height: 12px;
}

#signIn #reminder a {
	color: white;
	font-weight: bold;
}

/* --------- Form objects --------- */

form {
	margin: 0;
}

input:focus, textarea:focus {
	background: white;
}

label {
	font-size: 11px;
	line-height: 10px;
	display: block;
	margin: 0;
}

label.radio, label.check {
	cursor: pointer;
	border-bottom: 1px dotted #15153F;
	font-size: 13px;
	vertical-align: middle;
	padding: 0;
	margin: 0;
	height: 5px;
	display: inline;
}

.radioButton, .checkBox {
	margin: 0 -1px 0 5px;
	padding: 0;
	cursor: pointer;
}

.textField {
	font-family: "Trebuchet MS", verdana, lucida, arial, helvetica, sans-serif;
	padding: 1px 2px 0;
	font-size: 14px;
	margin: 2px 0 6px;
	color: black;
	background: white;
	border: 1px solid #666;
	border-color: #445359 #eee #eee #445359;
}

.button {
	border: 2px solid #00597B;
}

.buttonOver {
	border: 2px solid #E04000;
	cursor: pointer;
}

.formSection {
	border-top: 1px solid #97BDCB;
	padding: 12px 0;
}

/* --------- Footer --------- */

#footer {
	clear: both;
	padding: 8px 0 0;
	background: #00A2E0 url(../images/footer_bg2.gif) repeat-x;
	padding: 0;
	line-height: 2.3em;
}

#footerNav ul {
	display: inline;
	margin: 0;
	padding: 0;
}

#footerNav li {
	display: inline;
	padding: 0 0 0 20px;
	font-size: 13px;
	font-weight: bold;
	list-style: none;
	list-style-position: inside;
}

#footerNav li a {
	color: white;
	text-decoration: none;
}

#footerNav li a:hover {
	text-decoration: underline;
}

#footerNotice {
	width: 500px;
	height: 50px;
	padding: 0 20px 15px;
	color: #045A7D;
	font-size: 0.7em;
	line-height: 1.3;
}

#footerNotice a, #footerNotice a:visited {
	color: white;
}

#footerPhone {
	padding: 8px 20px;
	color: #045A7D;
	background-color: #E0F4FB;
	border-top: 1px solid #045A7D;
	border-bottom: 4px solid #045A7D;
	line-height: 1.2;
	font-size: 14px;
}

/* --------- Case Nav Tabs --------- */

#caseNav {
	border-bottom: 3px solid #00597B;
	width: 683px;
	height: 21px;
	margin: 12px 0 0;
}

#caseNav ul {
	margin: 0;
	padding: 0 0 0 6px;
}

#caseNav ul li {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	margin: 0 6px 0 0;
}

#caseNav ul li, #caseNav ul li a {
	height: 21px;
	display: block;
}

#progress {width: 97px; background: url(../images/navigation/case/progress.gif) no-repeat;}
#quoteDetails {width: 96px; background: transparent url(../images/navigation/case/quoteDetails.gif) no-repeat;}
#payments {width: 72px; background: transparent url(../images/navigation/case/payments.gif) no-repeat;}

#progress a:hover {background: url(../images/navigation/case/progress.gif) 0 -46px no-repeat;}
#quoteDetails a:hover {background: transparent url(../images/navigation/case/quoteDetails.gif) 0 -46px no-repeat;}
#payments a:hover {background: transparent url(../images/navigation/case/payments.gif) 0 -46px no-repeat;}

#progress.on {background: transparent url(../images/navigation/case/progress.gif) 0 -92px no-repeat;}
#quoteDetails.on {background: transparent url(../images/navigation/case/quoteDetails.gif) 0 -92px no-repeat;}
#payments.on {background: transparent url(../images/navigation/case/payments.gif) 0 -92px no-repeat;}


/* --------- Feature Boxes --------- */

div.boxNarrowTop {
	width: 216px;
	background: url(../images/boxes/top_216px.gif) left top no-repeat;
	text-align: left;
	padding: 1px 0 1px;
	margin: 10px 0 0;
}

div.boxNarrowBottom {
	width: 216px;
	height: 10px;
	background: url(../images/boxes/bottom_216px.gif) left bottom no-repeat;
	font-size: 1px;
	line-height: 0px;
	margin: 0 0 10px;
}

div.boxMediumTop {
	width: 429px;
	background:  url(../images/boxes/top_429px.gif) left top no-repeat;
	text-align: left;
	padding: 10px 0 1px;
}

div.boxMediumBottom {
	width: 429px;
	height: 10px;
	background:  url(../images/boxes/bottom_429px.gif) left bottom no-repeat;
	font-size: 1px;
	line-height: 0px;
	margin: 0 0 15px;
}

div.boxWideTop {
	width: 683px;
	background:  url(../images/boxes/top_683px.gif) left top no-repeat;
	text-align: left;
	padding: 5px 0 1px;
	margin: 0;
}

div.boxWideBottom {
	width: 683px;
	height: 10px;
	background:  url(../images/boxes/bottom_683px.gif) left bottom no-repeat;
	font-size: 1px;
	line-height: 0;
}

div.boxContent {
	margin: 10px 15px 0;
}

div.boxContent ul li.on {
	color: #00597B;
	font-weight: bold;
}

div.spacer {
	clear: both;
	font-size: 1px;
	line-height: 0;
}

/* --------- Home page boxes --------- */

div.stepBox {
	text-align: center;
	float: left;
	width: 108px;
	font-size: 12px;
	line-height: 1.2;
	font-weight: bold;
	/*
	background: #eee;
	border: 1px solid #ddd;
	*/
}

div.arrowBox {
	width: 47px;
	text-align: center;
	float: left;
	padding: 36px 0 0;
}

.stepNumber {
	font-size: 1.3em;
	color: #00597B;
}


/* --------- Glossary --------- */

span.glossary_item_off {
	font-size: inherit;
}

span.glossary_item_over {
	font-size: inherit;
}

/* commented backslash hack v2 - Mac IE will ignore the following styles \*/

	span.glossary_item_off {
		padding: 0 2px 1px;
		background: #D5F4FE;
		font-style: normal;
		border-top: 1px solid #E1F4FB;
		border-right: 1px solid #E1F4FB;
		border-left: 1px solid #E1F4FB;
		border-bottom: 1px dashed #00597B;
		text-decoration: none;
		margin: 0 -2px;
	}
	
	.infoPanel span {
		background: #F0FAFD;
	}
	
	span.glossary_item_over {
		padding: 0 2px 1px;
		background: white;
		border: 1px dashed #E04000;
		font-style: normal;
		text-decoration: none;
		cursor: help;
		color: black;
		margin: 0 -2px;
	}

/* end hack */


/* --------- Progress indicator --------- */

#progressContainer {
	height: 30px;
	width: 100%;
	text-align: center;
}

#progressBox {
	width: 400px;
	height: 30px;
	background:  url(../images/progress_left_bg.gif) no-repeat;
	margin: auto;
}

#progressContent {
	height: 30px;
	font-size: 12px; 
	font-weight: bold;
	color: #95AEB8;
	height: 30px;
	padding: 7px 6px 0;
	background:  url(../images/progress_right_bg.gif) no-repeat top right;
}

.currentStep {
	color: #00597B;
}


/* --------- Quote table --------- */

#quoteBox {
	margin: 5px 0 25px;
	padding: 5px 0;
}

#quoteTable {
	margin: 10px 0;
}

#quoteTable th, #quoteTable td {
	border-top: 1px solid #6FA4BD;
	padding: 6px 1px;
}

#quoteTable th {
	text-align: left;
	font-size: 0.8em;
	font-weight: normal;
}

#quoteTable thead th {
	text-align: right;
	font-weight: bold;
	border-top: none;
	border-bottom: 2px solid #00597B;
}

#quoteTable tbody td {
	text-align: right;
	font-size: 0.9em;
	width: 7em;
}

#quoteTable tfoot td, #quoteTable tfoot th {
	border-top: 2px solid #00597B;
	font-size: 0.9em;
	font-weight: bold;
	text-transform: uppercase;
	text-align: right;
}

#quoteTable tfoot th {
	text-align: left;
}

#quoteTable span.currency {
	float: left;
	width: 2em;
	text-align: right;
}	

/* --------- Current Case and Case Progress tables --------- */

#currentCases {
	width: 683px;
	margin: 5px 0 25px;
	padding: 5px 0;
}

 #caseProgress {
 	width: 683px;
	margin: 0;
	padding: 5px 6px;
}

#currentCases th, #currentCases td, #caseProgress th, #caseProgress td {
	padding: 4px 4px 4px 1px;
	border-bottom: 1px dotted #00597B;
}

#currentCases th, #caseProgress th {
	text-align: left;
	font-size: 0.7em;
	font-weight: normal;
	color: #00597B;
}

#currentCases td, #caseProgress td {
	font-size: 0.8em;
}

#currentCases td div.status, #caseProgress td div.status {
	font-weight: bold;
	width: 155px;
	float: left;
	font-weight: bold;
	font-size: 1.05em;
}


/* --------- Panels --------- */

div.helpPanel {
	color: #111;
	font-size: 12px;
	padding: 0;
	margin: 5px 0px 0;
}

div.infoPanel {
	background: #E0F4FB  url(../images/info_icon.gif) top left no-repeat;
	border: 1px dashed #00A2E0;
	padding: 9px 9px 9px 36px;
	font-size: 12px;
	line-height: 15px;
	margin: 10px 0;
	color: #222;
}


/* --------- Back Link --------- */

#backLink {
	font-size: 12px;
	margin: 0 0 0 8px;
}

#backLink a:link {
	color: #E04000;
}

#backLink a:visited {
	color: #E04000;
}

/* --------- Conveyancing process tables --------- */

.processTable {
	width: 415px; 
	font-size: 1.2em;
	margin: 0 auto;
}

.processTable th, .processTable td {
	width: 50%;
	font-size: 0.9em;
	padding: 0 5px;
	text-align: center;
	font-weight: bold;
}

td.seller {
	padding: 0 0 25px;
	background:  url(../images/arrow_down_sell.gif) bottom center no-repeat;
	border: 1px solid #C18181;
}

td.buyer {
	padding: 0 0 25px;
	background:  url(../images/arrow_down_buy.gif) bottom center no-repeat;
	border: 1px solid #8181BE;
}

td.remortgager {
	padding: 0 0 25px;
	background:  url(../images/arrow_down_remortgage.gif) bottom center no-repeat;
	border: 1px solid #7CBE83;
}

td.seller p, td.buyer p, td.remortgager p {
	font-size: 1em;
	margin: 5px;
}