/**
 * Screen styles for contractorfinancials.com
 * @author 		Stephen Lewis <stephen [at] experienceinternet [dot] co [dot] uk>
 * @amended by 	John Polling <john [at] theusualsuspect [dot] com>
 */

body {
background : #FFF url(/img/body-bg.jpg) repeat-x 0 0;
color : #000;
font : normal 68.75%/1.636 Verdana, "Lucida Grande", Tahoma, sans-serif;
line-height : 1.636;		/* 11px / 18px */
padding-bottom : 1.636em;		/* 18px */
}


/* =paragraphs
 -------------------------------------------------------------*/
p {margin-bottom : 1.636em;		/* 18px */}

p.leader {font-weight : bold;}


/* =lists
 -------------------------------------------------------------*/
ul,
ol {margin-bottom : 1.636em;	/* 18px */}

ul {
list-style : disc outside;
margin-left : 18px;
}

ol {
list-style : decimal outside;
margin-left : 20px;
}

li {margin-bottom : 0.818em;	/* 9px */}

dl {
border-bottom : 1px solid #DDD;
margin-bottom : 1.636em;	/* 18px */
}

dl:after {
clear : both;
content : ".";
display : block;
height : 0;
visibility : hidden;
}

dt, dd {
float : left;
border-top : 1px solid #DDD;
margin-bottom : 0.818em;		/* 9px */
padding-top : 0.727em;			/* 8px */
}

dt {
clear : left;
font-weight : bold;
padding-right : 20px;
width : 148px;
}

dd {width : 275px;}


/* =anchors
 -------------------------------------------------------------*/
a {
color : #26A0D5;
font-weight : bold;
text-decoration : none;
}

a:visited {color : #8FADBF;}

a:hover {
border-bottom : 1px dotted #CCC;
color : #0875A3;
}

a:active {border-bottom-style : solid;}


/* =headings
 -------------------------------------------------------------*/
h1,
h2,
h3 {font-family : Georgia, "Times New Roman", Times, serif;}

h1 {
color : #21457F;
font-size : 1.818em;		/* 20px */
font-weight : normal;
line-height : 1.35;			/* 27px */
margin-bottom : 0.9em;	/* 18px */
}

h2 {
font-size : 1.455em;			/* 16px */
line-height : 1.125;			/* 18px */
margin-bottom : 0.545em;	/* 6px */
margin-top : 1.3125em;		/* 21px */
}

h3 {
font-size : 1.273em;			/* 14px */
line-height : 1.286;			/* 18px */
margin-bottom : 0.286em;	/* 4px */
margin-top : 1.643em;			/* 23px */
}

h4 {
font-size : 1.091em;			/* 12px */
line-height : 1.5;				/* 18px */
}


/* =img
 -------------------------------------------------------------*/
img {display : block;}

a img {border-bottom : none;}


/* =table
 -------------------------------------------------------------*/
table {
border-top : 1px solid #DDD;
clear : both;
margin-bottom : 1.545em;		/* 17px */
width : 100%;
}

th, td {
border-bottom : 1px solid #DDD;
padding : 0.727em 8px;		/* 8px 8px */
text-align : left;
}

th {
color : #FFF;
font-weight : bold;
background : #000;
}


/* =form
 -------------------------------------------------------------*/
form {
background : #EEE;
border : 1px solid #DDD;
margin-bottom : 1.636em;	/* 18px */
padding : 1.545em 12px;		/* 17px 12px */
}

form div.spamProtection { display : none;}

form div.field {padding-bottom : 1.636em;		/* 18px */}

form div.field:after {
clear : both;
content : ".";
display : block;
height : 0;
visibility : hidden;
}

label {
float : left;
font-weight : bold;
padding-right : 10px;
width : 148px;
}

input.text,
textarea {width : 210px;}

textarea {height : 6.545em;		/* 72px */}

label.checkbox,
label.radio {
float : right;
font-weight : normal;
padding-right : 50px;
width : 210px;
}

form p.hint {
color : #666;
float : right;
margin-bottom : 0;
width : 260px;
}

form p.error {
background : transparent url(/img/icon-error.gif) no-repeat 0 50%;
color : #C00;
display : none;
float : right;
font-weight : bold;
margin-bottom : 0;
padding : 0.363em 0 0.454em 22px;		/* 4px 0 5px 22px */
width : 238px;
}

form div.field.submit {
padding-bottom : 0;
text-align : right;
}

form div.field.submit input {
background : #50ADD6 url(/img/submit-button-bg.jpg) repeat-x 0 0;
border : 1px solid #999;
border-bottom-color : #000;
border-radius : 5px;
box-shadow : 0 1px 0 rgba(0, 0, 0, 0.4);
color : #FFF;
font-family : "Helvetica Neue", Arial, sans-serif;
font-weight : bold;
-moz-border-radius : 5px;
-moz-box-shadow : 0 1px 0 rgba(0, 0, 0, 0.4);
padding : 0.727em 10px;
text-shadow : 0 -1px 0 rgba(0, 0, 0, 0.25);
text-transform : uppercase;
-webkit-border-radius : 5px;
-webkit-box-shadow : 0 1px 0 rgba(0, 0, 0, 0.4);
}


/* =clearfix
 -------------------------------------------------------------*/
.clearfix:after {
clear : both;
content : ".";
display : block;
height : 0;
visibility : hidden;
}


/* =xoxo
 -------------------------------------------------------------*/
ul.xoxo {
list-style : none;
margin-left : 0;
}

.xoxo a {
background : transparent url(/img/xoxo.gif) no-repeat 0 0.545em;
display : block;
padding-left : 12px;
}

.xoxo a:hover {background-position : 1px 0.545em;}

.xoxo a:hover,
.xoxo a:active {border-bottom : none;}


/* =figure
 -------------------------------------------------------------*/

/**
 * Note:
 * For somewhat tedious legacy reasons, the markup for figures within
 * the news index is slightly different. Rather than repeating all of
 * these rules in the news-index block, we just add the relevant variants
 * here.
 */

.figure {margin-bottom : 1.636em;		/* 18px */}

.figure-a {margin : 1.636em auto;		/* 18px auto */}

.figure-b {
float : right;
margin-left : 15px;
}

.figure-c {
float : left;
margin-right : 15px;
}

div.figure p.content img,
p.figure img {
background : #FFF;
border : 1px solid #DDD;
padding : 1px;
}

div.figure p.content a:hover img,
p.figure a:hover img {border-color : #BBB;}

div.figure p.content a:hover,
p.figure a:hover {border-bottom : none;}

div.figure p.content,
div.figure p.caption {margin-bottom : 0;}

div.figure p.caption {
border : 1px solid #E4E4E4;
border-top : none;
color : #666;
font-size : 0.909em;		/* 10px */
line-height : 1.8;			/* 18px */
padding : 0.4em 5px;		/* 4px 5px 4px */
}

div.figure-a p.caption {
border-left : none;
border-right : none;
}


/* =alert
 -------------------------------------------------------------*/
div.alert {
background : #FEFFCC;
border : 1px solid #E5E5B8;
margin-bottom : 1.636em;		/* 18px */
padding : 1.454em 15px 0;		/* 16px 15px 0 */
}


/* =fallback
 -------------------------------------------------------------*/
p.fallback {
background : #FEFFCC;
border : 1px solid #E5E5B8;
padding : 0.363em 8px;		/* 4px 15px 0 */
}

body.enhanced p.fallback {display : none;}


/* =podcast
 -------------------------------------------------------------*/
div.podcast {
border-bottom : 1px solid #DDD;
border-top : 1px solid #DDD;
clear : both;
margin-bottom : 1.636em;		/* 18px */
padding-bottom : 1.545em;		/* 17px */
padding-top : 1.182em;			/* 13px (compensates for the 5px bottom margin on the h3) */
}

.podcast h3 {margin-top : 0;}

.podcast p.fallback {margin-bottom : 0;}

.podcast p.player {
left : -9999em;
margin-bottom : 0;
position : relative;
}

body.enhanced .podcast p.player {left : 0;}


/* =wrapper
 -------------------------------------------------------------*/
div#wrapper {
background : #FFF;
border-left : 1px solid #FFF;
border-right : 1px solid #FFF;
margin : 0 auto;
width : 898px;
}


/* =nav-a
 -------------------------------------------------------------*/
ul#nav-a {
float : right;
margin-bottom : 0;
position : relative;
z-index : 100;
}

#nav-a li {
float : left;
margin-bottom : 0;
}

#nav-a a {
background : none;
color : #B2B1B1;
font-weight : normal;
padding : 0.818em 12px;
}

#nav-a a:hover {color : #666;}

#nav-a li.active a {
color : #000;
font-weight : bold;
}


/* =brand
 -------------------------------------------------------------*/
p#brand {margin-bottom : 0;}

#brand a {
border-bottom : none;
display : block;
padding-bottom : 0.818em;		/* 9px */
padding-top : 1.636em;
}


/* =nav-b
 -------------------------------------------------------------*/
ul#nav-b {
background : #21457F;
border-bottom : 2px solid #479024;
border-top : 2px solid #479024;
font-size : 1.091em;		/* 12px */
line-height : 1.5;			/* 18px */
margin-bottom : 0;
}

#nav-b li {
float : left;
margin-bottom : 0;
margin-right : 12px;
}

#nav-b a {
background : none;
color : #FFF;
padding : 0.583em 12px;		/* 7px 12px */
text-transform : capitalize;
}

#nav-b a:hover {background : #1D3D70;}


/* =content
 -------------------------------------------------------------*/
div#content {margin-bottom : 1.636em;		/* 18px */}


/* =content-a
 -------------------------------------------------------------*/
div#content-a {
float : left;
margin-left : 212px;
margin-right : 30px;
padding-top : 1.636em;		/* 18px */
width : 446px;
}


/* =content-b
 -------------------------------------------------------------*/
div#content-b {
background : #FFF url(/img/content-b-bg.jpg) no-repeat 0 0;
float : left;
padding-left : 20px;
padding-right : 7px;
width : 182px;
}


/* =block
 -------------------------------------------------------------*/
div#content-b div.block h4 {
margin-bottom : 0.75em;		/* 9px */
margin-top : 1.5em;				/* 18px */
}

#content-b div.block ul {
list-style : none;
margin-left : 0;
}

#content-b div.block li {
border-bottom : 1px solid #DDD;
padding-bottom : 0.727em;		/* 8px */
}

#content-b .block li a {
border-bottom : none;
display : block;
}

#content-b .block li a em {
display : block;
font-style : normal;
}

#content-b ul.testimonials p.cite {
border : none;
font-weight : bold;
padding : 0;
}


/* =content-c
 -------------------------------------------------------------*/
div#content-c {
background : #21457F;
color : #FFF;
float : left;
margin-left : -897px;
padding : 1.636em 14px;		/* 18px / 14px */
width : 164px;
}

#content-c .xoxo ul {
border-bottom : 1px solid #FFF;
list-style : none;
margin-bottom : 0;
margin-left : 0;
padding : 0.545em 0 1.091em;		/* 6px 0 12px */
}

#content-c li {margin-bottom : 0;}

#content-c li a {
background : none;
border-bottom : 1px solid #FFF;
color : #FFF;
font-weight : normal;
padding : 0.544em 0 0.545em;		/* 6px 0 6px */
}

#content-c li a:hover {color : #DFEFFE;}

#content-c li li a {
border-bottom : none;		/* Being very nice to IE, not using > selector. */
color : #D8E414;
padding : 0;
}


/* =leader
 -------------------------------------------------------------*/
div#leader {
background : #CAE1F6 url(/img/leader-bg.jpg) no-repeat 100% 0;
border-bottom : 2px solid #BBB;
font : normal 1.455em/1.125 Georgia, "Times New Roman", Times, serif;
line-height : 1.125;		/* 16px / 18px */
padding : 0.563em 449px 0.563em 12px;		/* 9px 449px 9px 12px */
}

#leader h1 {
color : #069;
font-size : 2em;		/* 32px */
margin-bottom : 0.281em;		/* 9px */
}

#leader a {
color : #069;
font-weight : normal;
text-decoration : underline;
}

#leader a:hover {
border-bottom : none;
text-decoration : none;
}

#leader .xoxo {
color : #069;
list-style : disc outside;
margin-left : 1.125em;				/* 18px */
}

#leader .xoxo a {
background : none;
display : inline;
padding-left : 0;
}


/* =site-overview
 -------------------------------------------------------------*/
div#site-overview {
border : 1px solid #E5E5E5;
border-radius : 5px;
color : #393939;
margin-bottom : 0.818em;
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
}

#site-overview h3 {
background : #FDFDFD url(/img/site-overview-heading-bg.gif) no-repeat 0 50%;
border-bottom : 1px solid #E5E5E5;
border-top-left-radius : 4px;
border-top-right-radius : 4px;
font : bold 1.091em/1.5 Verdana, "Lucida Grande", Tahoma, sans-serif;
line-height : 1.5;				/* 12px / 18px */
margin-bottom : 0.667em;	/* 8px */
margin-top : 0;
-moz-border-radius-topleft : 4px;
-moz-border-radius-topright : 4px;
padding : 0.416em 10px 0.417em 50px;		/* 5px 10px 5px 50px */
-webkit-border-top-left-radius : 4px;
-webkit-border-top-right-radius : 4px;
}

#site-overview ul {
list-style : none;
margin-bottom : 0;
margin-left : 0;
}

#site-overview .xoxo {
padding-left : 5px;
}

#site-overview .xoxo > li {
float : left;
margin-bottom : 1.636em;	/* 18px */
margin-right : 10px;
padding : 0 6px;
width : 200px;
}

#site-overview .xoxo a {
border-bottom : none;
color : #393939;
}

#site-overview .xoxo a:hover {color : #26A0D5;}

#site-overview .xoxo ul a {
color : #8A8989;
font-weight : normal;
}

#site-overview li li {margin-bottom : 0;}


/* =supp
 -------------------------------------------------------------*/
div#supp {
color : #666;
font-size : 0.909em;	/* 10px */
line-height : 1.8;		/* 18px */
}

#supp p {
clear : both;
margin-bottom : 1.8em;	/* 18px */
}

#supp a {
color : #48C8F7;
font-weight : normal;
}

#supp a.anon {color : #666;}

#supp p#copyright {
float : left;
width : 45%;
}

#supp p#site-credit {
clear : none;
float : right;
text-align : right;
width : 45%;
}


/* =news_index : Legacy structure and classes to retain compatibility with ContractorMoney
 -------------------------------------------------------------*/
ul.news_index {
list-style : none;
margin-left : 0;
}

.news_index li {
border-bottom : 1px solid #DDD;
}

.news_index h3 a,
.news_index h3 a:visited {color : #000;}

.news_index p.date {
border-bottom : 1px solid #EEE;
border-top : 1px solid #EEE;
color : #666;
font-size : 0.909em;		/* 10px */
line-height : 1.8;			/* 18px */
margin-bottom : 0.7em;
margin-top : 0.8em;
padding-bottom : 0.5em;
padding-top : 0.5em;
text-transform : uppercase;
}

.news_index p.figure {margin-bottom : 0;}

.news_index p.action a {
background : transparent url(/img/xoxo.gif) no-repeat 0 0.545em;
border-bottom : none;
display : block;
padding-left : 12px;
}

.news_index p.action a:hover {background-position : 1px 0.545em;}


/* =testimonials
 -------------------------------------------------------------*/

/**
 * Note:
 * We use the attribute selector to hide all of these styles from less-capable
 * browsers. That way, we don't end up with an closing quote, no opening quote,
 * and weird indenting.
 */

ul.testimonials {
list-style : none;
margin-left : 0;
}

ul[class="testimonials"] li {margin-bottom : 1.636em;}

ul[class="testimonials"] blockquote {
background : transparent url(/img/blockquote-close.gif) no-repeat 100% 100%;
padding-right : 25px;
}

ul[class="testimonials"] blockquote p:first-child {
background : transparent url(/img/blockquote-open.gif) no-repeat 0 0;
text-indent : 25px;
}

ul[class="testimonials"] p.cite {
border-bottom : 1px solid #DDD;
border-top : 1px solid #EEE;
margin-bottom : 0;
margin-top : -0.818em;			/* 9px */
padding-bottom : 0.727em;		/* 8px */
padding-top : 0.727em;			/* 8px */
}


/* =print
 -------------------------------------------------------------*/
p.print {
background : transparent url(/img/icon-print.gif) no-repeat 0 50%;
border-bottom : 1px solid #DDD;
border-top : 1px solid #DDD;
color : #26A0D5;
cursor : pointer;
padding : 0.727em 0 0.727em 30px;		/* 8px 0 8px 30px */
}

p.print:hover {color : #0875A3;}


/* =home
 -------------------------------------------------------------*/
body#home div#content-b {
background : #FFF;
padding-left : 0;
padding-right : 0;
padding-top : 2.455em;		/* 27px */
width : 209px;
}

body#home div#content-b div.block {
background : #F7F7F7;
border : 1px solid #E5E5E5;
border-radius : 5px;
box-shadow : 0 1px 0 rgba(0, 0, 0, 0.4);
margin-bottom : 1.636em;		/* 18px */
-moz-border-radius : 5px;
-moz-box-shadow : 0 1px 0 rgba(0, 0, 0, 0.4);
-webkit-border-radius : 5px;
-webkit-box-shadow : 0 1px 0 rgba(0, 0, 0, 0.4);
}

body#home #content-b .block h4 {
background : #A2AABA url(/img/block-heading-bg.jpg) no-repeat 100% 50%;
border-bottom : 1px solid #6C7B94;
border-top-left-radius : 4px;
border-top-right-radius : 4px;
color : #FFF;
font-weight : normal;
margin : 0;
-moz-border-radius-topleft : 4px;
-moz-border-radius-topright : 4px;
padding : 0.333em 10px;		/* 4px 10px */
-webkit-border-top-left-radius : 4px;
-webkit-border-top-right-radius : 4px;
}

body#home #content-b .block ul {
padding-left : 5px;
padding-right : 5px;
}

body#home #content-b .block li {
border-bottom-color : #E5E5E5;
padding : 0.727em 0 0.818em 5px;		/* 8px 0 9px 5px */
}

body#home #content-b .block li.plain {
border-bottom : none;
margin-bottom : 0;
}

body#home #content-b .block li:after {
clear : both;
content : ".";
display : block;
height : 0;
visibility : hidden;
}

body#home #content-b .block li a {font-weight : normal;}

body#home #content-b .block li a em {
display : block;
font-style : normal;
}

body#home #content-b .block li a img {
float : right;
margin-left : 10px;
margin-top : -1.636em;
}


/* =mortgage-calculator
 -------------------------------------------------------------*/
div.calculator form {display : none;}

.calculator dl {
background : #FEFFCC;
border-left : 1px solid #E5E5B8;
border-right : 1px solid #E5E5B8;
display : none;
}

.calculator dt {
padding-left : 10px;
width : 138px;
}

.calculator dt,
.calculator dd {border-color : #E5E5B8;}

body.enhanced div.calculator form {display : block;}