/*
global styles
*/
* {padding:0; margin:0; }
body { text-align:center; background: #E9E9E9 url(/assets/images/direct-debt-advice-background.gif) repeat-x; font-family:tahoma, arial, helvetica, sans-serif;}
p {color:#666; font-size:11px; line-height:135%;}
/*
end: global styles
*/

#container { width:796px; margin:0 auto; text-align:left;padding-top:5px; background: url(/assets/images/container-background.gif) no-repeat}
#innerContainer {padding:0 17px;}
#containerBottom {clear:both;width:796px; margin:0 auto; height:7px; background: url(/assets/images/container-footer.gif) no-repeat}

/*
header styles
*/
#header {position:relative; height:89px; width:761px;  background: url(/assets/images/header-background.gif); margin-bottom:1px;}
#header h1 {width:306px; height:65px; background: url(/assets/images/direct-debt-advice-logo.gif) no-repeat; 
	text-indent:-9999px; position: absolute; left:21px; top:19px;}
#header h2 {width:242px; height:24px; background: url(/assets/images/direct-debt-advice-strapline.gif) no-repeat; 
	text-indent:-9999px; position: absolute; left:72px; top:51px;}
/*
end: header styles
*/

/*
start: navigation
*/
#mainNav {padding-top:5px; float:left;  list-style:none; width:180px; height:180px; background:#315387 url(/assets/images/navigation-background.jpg) repeat-x left top; }
#mainNav li {margin-top:2px; height:26px; width:180px; background: url(/assets/images/navigation-divider.gif) no-repeat 10px bottom; }
#mainNav li.lastOne {background-image:none;}
#mainNav li a {color:#fff; text-decoration:none; padding-left:13px; font-size:13px; line-height:20px; display:block; font-weight:bold}
#mainNav li a:hover {text-decoration:underline;}
#mainNav li a.active {color:#FFCC00;}
#mainNav li a.active:hover {text-decoration:none;}
/*
end: navigation start
*/

#feature {position:relative; float:left;margin-left:1px; width:562px; height:171px; color: #fff; 
		background: url(/assets/images/feature-background.jpg) repeat-x;
		padding:14px 0 0 18px;
		}
#feature h2 {width:291px; height:29px; background: url(/assets/images/understand-your-debt.png) no-repeat; 
	text-indent:-9999px;  }
#feature p { font-size:12px; width:283px; line-height:130%;  padding-top:5px; color:#fff; }
#feature ol {font-size:13px; font-weight:bold; margin:10px 0 10px 20px;}
#feature p a {color:#FFCC00; text-transform: uppercase; font-weight:bold; text-decoration:none; font-size:13px; background: url(/assets/images/yellow-arrow.gif) no-repeat left center; padding-left:15px; }
#feature p a:hover { text-decoration:underline; }
#stopWatch { position: absolute; background: url(/assets/images/stopwatch-white-background.jpg) no-repeat; width:278px; height:270px; top:-77px; left:288px;}
#stopWatchHome 	{ position: absolute; background: url(/assets/images/stopwatch.jpg) no-repeat; width:278px; height:270px; top:-77px; left:288px;}
#stopWatch a, #stopWatchHome a {display:block; height:270px; width:273px; }
/*
start: main area
*/
#mainArea { clear:both; padding:0; }
/*
end: main area
*/

/*
start: left column
*/
#leftColumn {float:left; width:160px; margin-right:1px; background-color:#EDF1F8;padding:10px; font-size:11px; border-bottom:5px solid #A3BBDE;}
#leftColumn h2 {color:#333; font-size:13px; font-weight:bold; }
#leftColumn h3 a {color:#315387;font-size:11px; font-weight:bold; text-decoration:none;}
#leftColumn h3 a:hover {text-decoration:underline;}
#leftColumn h4 {color:#578AC1; font-size:11px;font-weight:bold; margin-top:10px; padding-top:10px; background:url(/assets/images/news-divider.gif) no-repeat left top}
#leftColumn p {color:#666; line-height:100%; margin:2px 0;}
#leftColumn a {color:#cc0000;}
#leftColumn a:hover {color:#315387;}
/*
end: left column
*/

/*
start: middle column
*/
#middleColumn {float:left; width:379px;margin:10px 0 0 10px;}
#middleColumn .divider {background: url(/assets/images/divider.gif) repeat-x; width:380px; height:1px; margin:10px 0}
#middleColumn h2 {color:#333; font-size:13px; font-weight:bold; background: url(/assets/images/divider.gif) repeat-x left bottom; padding-bottom:11px; margin-bottom:5px; }
#middleColumn h3 {font-size:11px; color:#666; }
#middleColumn h3.red { font-weight:bold; font-size:33px; color:#D92828;}
#middleColumn h4.red { font-weight:bold; font-size:15px; color:#D92828;}
#middleColumn p {margin:10px 0;width:360px;margin:0 0 15px 0;}
#middleColumn ul {font-size:11px; color:#666; margin-left:20px}
#middleColumn li {margin:5px 0;}
#middleColumn a {color:#315387;}
#middleColumn a:hover {color:#CC0000;}
#middleColumn a.red {color:#CC0000;}
#middleColumn a.red:hover {color:#315387;}
/*
end: middle column
*/

/*
start: home page
*/
#homePanelTop {position: relative; float:left; width:367px; background-color:#FBF5EA; height:105px; padding:10px 198px 0 15px; border-bottom:5px solid #D0C5B3;}
#helpLine {position: absolute; background: url(/assets/images/direct-debt-advice-can-help.gif) no-repeat; height:161px; width:169px; top:-41px; right:0px;}
#homePanelTop p {color:#333; line-height:130%;}
#homePanelTop p strong {font-size:12px;}
#homePanelTop .divider {background: url(/assets/images/divider.gif) repeat-x; width:366px; height:1px; margin:10px 0}
#helpLineNumber {background: url(/assets/images/direct-debt-advice-helpline.gif) no-repeat; width:397px; height:33px;text-indent:-9999px;}

#homeMidColumn {float:left;width:250px; margin:10px; }
.homePageFeatureBox {background-color:#F5F5E9; width:250px; padding:10px; margin-bottom:10px;  border-bottom:5px solid #C7C9BC; }
.homePageFeatureBox .divider {background: url(/assets/images/divider.gif) repeat-x; width:251px; height:1px; margin:5px 0 10px 0}
.homePageFeatureBox h2 {color:#333; font-size:13px;}
.homePageFeatureBox h2.red {color:#CC0000; margin-bottom:10px;}
.homePageFeatureBox img {float:left; margin-right:10px; margin-top:5px;}
.homePageFeatureBox p { float:left; width:150px; margin-bottom:6px;}
.homePageFeatureBox p em {color:#000;}
.homePageFeatureBox select {width:60px; font-size:11px; color:#666; margin-bottom:10px;border:1px solid #ccc;}
.homePageFeatureBox input {font-size:11px; color:#666; border:1px solid #ccc; padding-left:5px;}
.homePageFeatureBox .callBackName {width:105px; margin:0 0 10px 15px; height:14px;}
.homePageFeatureBox .callBackNumber {float:left; width:185px; height:14px;}
.homePageFeatureBox .callBackEmail {float:left; width:185px; height:14px; margin-top:10px;}
.homePageFeatureBox .submitButton {float:left; width:47px; padding:0; margin:0 0 0 4px;}

#homeRightColumn {float:left; width:289px; margin-left:20px;padding-top:10px; }
.arrow {background: url(/assets/images/service-arrow.gif) no-repeat; height:50px;width:269px; margin-bottom:10px;padding:10px;}
.arrow h1 a {color:#315387; font-size:14px; text-decoration:none;}
.arrow h1 a:hover {text-decoration:underline;}
.arrow a {color:#CC0000;}
.arrow a:hover {color:#3F5B97;}
/*
end: home page
*/

/*
start: calculator capture form
*/
.calcPageFeatureBox {background-color:#F5F5E9; width:202px; padding:10px;  border-bottom:5px solid #C7C9BC; }
.calcPageFeatureBox .textbox {width:200px; font-size:11px; color:#666; border:1px solid #ccc; margin-top:5px;}
.calcPageFeatureBox select {font-size:11px; color:#666; border:1px solid #ccc;}
.calcPageFeatureBox .submitButton {margin-top:10px;}
/*
start: debt glossary
*/
#glossary #navItems {margin:10px 0 15px 0; font-size:11px}
#glossary #navItems a {font-size:12px; color:#666; font-weight:bold; margin:0 2px;}
/*
end: debt glossary
*/

/*
start: right column
*/
#rightColumn {float:left; width:180px; margin:10px 0 20px 10px;}
#rightColumn .featureBox {background-color:#F5F5E9; width:160px; padding:10px; border-bottom:5px solid #C7C9BC; }
.featureBox p {margin-right:10px;}
.featureBox p em {color:#000;}
.featureBox p.red {color:#CC0000; font-size:13px; text-align:center; margin:0; font-weight:bold;}
.featureBox p.red strong {font-size:19px; text-align:center}

#rightColumn .featureBox .divider {background: url(/assets/images/divider.gif) repeat-x; width:159px; height:1px; margin:5px 0}
.featureBox dl {font-size:9px; color:#666; font-weight:bold;}
.featureBox dt {float:left; width:90px; margin:2px 0;}
.featureBox dd {float:right; width:70px; margin:2px 0;}
.featureBox img {float:left; margin-right:10px;}

#rightColumn a {color:#3F5B97; margin:10px 5px; line-height:20px; font-size:11px;}
#rightColumn a:hover {color:#CC0000;}

#rightColumn .divider {background: url(/assets/images/divider.gif) repeat-x; width:180px; height:1px; margin:10px 0}
/*
end: right column
*/

/*
start: footer
*/
#footer {font-size:10px; background-color:#fff; height:32px; margin:5px 0; color:#666; }
#footer a { text-decoration:none; line-height:32px; color:#666;}
#footer a:hover {text-decoration:underline}
/*
end: footer
*/

/*
start: forms
*/
fieldset {border: none; padding:0 10px;}
fieldset legend {display:none}
fieldset select {width:60px; font-size:11px; color:#666;border:1px solid #ccc;}
fieldset input, fieldset textarea {font-size:11px; color:#666; width:185px; border:1px solid #ccc;padding-left:5px;}
fieldset textarea {height:115px; margin-bottom:0;}
fieldset .submitButton {height:13px; width:47px; padding:0 0 10px 0; margin:0;}
/*
end: forms
*/

/*
start: calculator
*/
#calculatorBorder {border:1px solid #cfcfcf; width:370px; padding:5px;margin-bottom:10px;}
#calculator {width:350px;  background-color:#FDFBF6; padding:10px; }
#calculator .divider {clear:both; background: url(/assets/images/divider.gif) repeat-x; width:348px; height:1px; margin:5px 0 10px 0}
#calculator label {clear:both;width:160px; float:left; font-weight:bold; margin:0 10px 10px 0; }
#calculator label em { font-style:normal; font-family:Arial; font-size:18px; margin-right:5px;}
#calculator input, #calculator select  { float:right; font-size:11px; color:#666666; margin-right:20px; width:160px; border:1px solid #ccc;}
#calculator .collectionLabel {float:left; width:155px;margin:0 20px 10px 0; color:#666666; font-size:11px;}
#calculator .collection {float:right; width:170px;color:#666666; font-size:11px;margin-bottom:10px;}
#calculator .collection  input, #calculator .collection select {float:left; margin:5px 0;}
#calculator .collection select {width:162px;}
#calculator .submitButton {height:13px; width:77px; padding:0; margin:0; float:left;}
.errorReport {font-size:11px;}
.errorReport ul {margin:0 0 10px 10px;}
/*
end: calculator
*/

/*
start: debt calc results
*/
#calcResults {float:left; width:570px;margin:10px 0 0 10px;}
#calcResults .divider {clear:both; background: url(/assets/images/divider.gif) repeat-x; width:570px; height:1px; margin:10px 0}
#calcResults h2 {color:#333; font-size:13px; font-weight:bold; background: url(/assets/images/divider.gif) repeat-x left bottom; padding-bottom:11px; margin-bottom:5px; }
#calcResults .chart {float:left; background:url(/assets/images/vertical-divider.gif) no-repeat right top; 
	width:379px; margin:0 10px 10px 10px;}
#calcResults .chart p { width:360px;}
#calcResults .textResults {float:left;  width:170px; margin-bottom:10px; }
#calcResults .textResults h3 {color:#666; font-size:14px; font-weight:bold; margin-bottom:10px;}
#calcResults .printLink {color:#385087; text-decoration:none; font-size:10px; font-weight:bold; background: url(/assets/images/small-printer.gif) no-repeat left center; padding:5px 0 5px 30px; height:30px; line-height:30px;}
#calcResults .printLink:hover, #calcResults .printLinkTop:hover {text-decoration:underline;}
#calcResults .printLinkTop {float:right;color:#385087; text-decoration:none; font-size:10px; font-weight:bold; 
	background: url(/assets/images/small-printer.gif) no-repeat left center; 
	padding:0 0 5px 30px; height:20px; line-height:20px; }
#calcResults .redLink {color:#D92828; font-size:12px; font-weight:bold;}
/*
end: debt calc results
*/

.clearer { clear:both; }