/* ========================== *\ Reset \* ========================== */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline;} /* remember to define focus styles! */ :focus {outline: 0;} body {line-height:1; color:#333; background:#fff; font:13px helvetica,arial,sans-serif;*font-size:small;*font:x-small;} ol, ul {list-style:none;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse:separate; border-spacing:0; font-size:inherit; font:100%;} caption, th, td {text-align: left; font-weight: normal;} blockquote:before, blockquote:after, q:before, q:after {content: "";} blockquote, q {quotes: "" "";} select, input, textarea {font:99% helvetica,arial,clean,sans-serif;} pre, code {font:115% monospace;*font-size:100%;} body * {line-height:1.22em;} /* If you want this size in pixels (px) Declare this percent (%) px % 10 77 11 85 12 92 13 100 14 107 15 114 16 122 17 129 18 136 19 144 20 152 21 159 22 167 23 174 24 182 25 189 26 197 */ /* ========================== *\ General \* ========================== */ a {text-decoration:none; color:#3e3efb;} a:visited {color:#3e3efb;} a:hover {text-decoration:underline;} table {} table th, table td {padding:5px;} table thead th {border-bottom:#ccc solid 1px;} table tbody th, table tbody td {} p.noitems {color:#999; text-align:center;} /* ========================== *\ Element Tree \* ========================== */ #container {border-top:5px solid #0100c3; width:987px; margin:0 auto; background:#eaeaea url(/css_images/header.gif) 0 0 repeat-x; padding-bottom:8px;} #header {border-top:#fff solid 1px;} #site_name {position:absolute; top:0; left:-9999em;} #site_logo {float:left;} #site_logo a {} #site_logo a img {margin:5px 0 0 23px;} #header_tools {padding-top:6px; background:transparent url(/css_images/header_tools.png) 100% 0 repeat-y; margin-bottom:4px;} #header_tools p.bookmark_now {font-size:85%; margin:0 10px 6px 0; text-align:right;} #header_tools ul.toolinks {height:25px;} #header_tools ul li {display:block; float:right; height:24px; border-left:1px solid #f4f4f4;} #header_tools ul li a {display:block; color:#000; text-transform:uppercase; text-decoration:none; font-size:77%; padding:7px 27px;} #header_tools ul li a:hover {text-decoration:underline;} #header_advert {text-align:right; margin-right:10px;} #header_advert a {} #header_advert a img {} #navigation {clear:both; margin-left:9px;} #navigation ul {} #navigation li {display:block; float:left; margin-left:2px;} #navigation li a {display:block; float:left; background:transparent url(/css_images/nav_right.gif) 100% 0 no-repeat; min-width:153px; padding-right:6px;} #navigation li a span {display:block; font-weight:bold; color:#fff; background:transparent url(/css_images/nav_left.gif) 0 0 no-repeat; padding:6px 0 6px 10px;} #navigation li a span strong {padding-left:12px; background:transparent url(/css_images/nav_arrow.gif) 0 50% no-repeat;} #navigation li a:hover {text-decoration:none; background-position:100% -50px;} #navigation li a:hover span {text-decoration:none; background-position:0 -50px;} #navigation li.disabled a {display:block; float:left; background:transparent url(/css_images/nav_disabled_right.png) 100% 0 no-repeat; min-width:153px; padding-right:6px;} #navigation li.disabled a span {display:block; cursor:default; position:relative; font-weight:bold; color:#bbb; background:transparent url(/css_images/nav_disabled_left.png) 0 0 no-repeat; padding:6px 0 6px 10px;} #navigation li.disabled a span strong {padding-left:12px; background:transparent url(/css_images/nav_disabled_arrow.png) 0 50% no-repeat;} #navigation li.disabled a span sup {display:none; position:absolute; top:-5px; right:0; font-size:85%; line-height:8px; color:#fff; padding:5px 8px; background-color:#01009a; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px;} #navigation li.disabled a:hover span sup {display:block;} #wrapper {background-color:#fff; margin:0 8px; clear:both; padding-top:13px; padding-bottom:13px;} #eventzone {float:left; width:667px;} #content {float:right; width:476px; padding:12px; border:#f3f3f3 solid 5px;} #content h1 {font-weight:bold; font-size:152%; padding:4px; margin:-17px -17px 20px -17px; background:transparent url(/css_images/content_header.gif) 0 0 no-repeat;} #content h1 span {display:block; padding:9px 11px 9px 46px; color:#333; background:transparent url(/css_images/page_heading_sprite.png) 10px -143px no-repeat;} #content h1.insurance span {background-position:10px -143px;} #content h1.car_insurance span {background-position:10px -93px; padding-left:55px;} #content h1.home_insurance span {background-position:10px -43px;} #content h1.profile span {background-position:10px 10px;} #content h1.home span {background-position:10px -143px;} #content div.error {background-color:#fee; border:#c00 solid 1px; padding:10px; margin:10px;} #content div.message {background-color:#efe; border:#0c0 solid 1px; padding:10px; margin:10px;} #content h2 {font-size:136%;} #content div.tip {margin:10px auto;} #content_advert {margin:20px auto;} #content div.news h2 {margin-bottom:10px; margin-top:10px; font-size:112%; text-transform:uppercase; background:transparent url(/css_images/heading_bg.gif) 0 3px repeat-x; padding-left:10px;} #content div.news h2 span {padding:0 9px; background:#fff; color:#c90;} #content div.split {margin:10px 0;} #nav_context_ignore {margin-top:53px; margin-right:480px; width:157px; background:#e5e7e9 url(/css_images/nav_context.gif) 0 0 repeat-y;} #nav_context2 {margin-top:5px; margin-right:480px; width:157px; background:#e5e7e9 url(/css_images/nav_context.gif) 0 0 repeat-y;} #nav_context ul {} #nav_context ul li {border-bottom:#fff 2px solid; border-top:1px solid #fff;} #nav_context ul a {display:block; margin-left:3px;} #nav_context ul a strong {display:block; border-left:#e5e7e9 solid 10px; margin:7px 0 0; line-height:10px; padding:0; height:10px;} #nav_context ul a strong span {display:block; float:left; background-color:#f3f3f3; text-transform:uppercase; color:#1616d0; font-weight:bold; padding:0 6px; line-height:10px;} #nav_context ul a em {display:block; font-size:85%; color:#333; margin-bottom:13px; padding-top:13px;} #nav_context ul a:hover { text-decoration:none;} #nav_context ul a:hover strong {background-color:#1616d0; border-left:0; padding-left:10px;} #nav_context ul a:hover strong span {} #nav_context ul a:hover em {} #skyscraper_advert {text-align:center; padding:20px 0;} #sidebar {margin-left:667px;} #sidebar div.welcome {background:transparent url(/css_images/welcome.jpg) 100% 30px no-repeat; margin:10px 6px 10px 18px; width:280px; min-height:180px;} #sidebar div.welcome h3 {margin-bottom:28px;} #sidebar div.welcome h3 span {color:#999; display:block; text-transform:uppercase; font-size:112%; margin-bottom:3px;} #sidebar div.welcome h3 strong {color:#0100AA; display:block; text-transform:uppercase; font-size:136%; font-weight:normal;} #sidebar div.welcome p {width:50%;} #sidebar div.welcome p strong {font-weight:bold;} #sidebar div.welcome p em {font-style:italic;} #sidebar div.welcome ul {margin-left:2em; list-style:disc;} #sidebar div.welcome ol {margin-left:2em; list-style:decimal;} #sidebar_help {margin:0 6px 8px 0; padding-top:10px;} #sidebar_help p.help {float:right; margin-left:10px; height:30px;} #sidebar_help p.help a {display:block; background:transparent url(/css_images/help.gif) 0 0 no-repeat; color:#333; padding:7px 33px 8px 10px; min-width:38px;} #sidebar_help p.glossary {text-align:right; margin:7px 0 16px 0;} #sidebar_help p.glossary a {color:#999;} #page_help {background:#ffc; clear:right; display:none; margin:0 10px; padding:10px; font-size:92%;} #page_help p {margin:10px 0;} #sidebar_extras {width:279px; border:5px #f3f3f3 solid; border-top:0; margin:-5px auto 0; background-color:#fff;} #sidebar_extras div.newsletter {padding:10px;} #sidebar_extras div.newsletter h3 {margin-bottom:10px; font-size:112%; text-transform:uppercase; background:transparent url(/css_images/heading_bg.gif) 0 3px repeat-x; padding-left:10px;} #sidebar_extras div.newsletter h3 span {padding:0 9px; background:#fff; color:#c90;} #sidebar_extras div.newsletter p {font-size:92%; color:#333;} #sidebar_extras div.form_item {margin:10px auto; width:250px;} #sidebar_extras div.form_buttons {text-align:right; margin:13px 7px 5px 0;} #sidebar_advert {text-align:center; margin-top:10px;} #wrapper:after {content:"."; display:block; height:0; visibility:hidden; width:0; clear:both;} #footer {border:#fff solid 1px; background-color:#fafafa; margin:4px 8px 0; min-height:50px; padding-top:20px; clear:both;} #footer_logo {float:left; margin-left:60px;} #footer_copyright {margin-left:157px; font-size:85%; color:#666;} #footer_navigation {margin-left:157px; margin-top:6px; font-size:85%; color:#666;} #footer_navigation ul {} #footer_navigation li {display:block; float:left; border-left:#666 solid 1px; padding:0 8px 2px 8px; height:10px;} #footer_navigation li a {color:#666;} #footer_navigation li.first {border-left:0; padding-left:0;} /* ========================== *\ Component styles \* ========================== */ /* Center column News container */ #content_news {} #content_news div.content_news_wrap {background:transparent url(/css_images/content_news_separator.gif) 56% 0 repeat-y;} #content_news div.content_news_headlines {float:left; width:53%;} #content_news div.news_item {clear:left; margin:0 0 15px; min-height:60px;} #content_news div.news_item h3 {margin-bottom:5px;} #content_news div.news_item h3 a {color:#333; font-weight:bold;} #content_news div.news_item p.image {float:left; width:70px; margin:0 10px 10px 0; background:#f3f3f3; border:#dfdfdf solid 1px; padding:3px; text-align:right;} #content_news div.news_item p.image a {} #content_news div.news_item p.image a img {border:#dfdfdf solid 1px;} #content_news div.news_item p.text {color:#8c8c8c; font-size:92%;} #content_news div.content_news_wrap:after {content:"."; height:0; visibility:hidden; clear:left;} #content_news div.content_news_rates {margin-left:60%;} #content_news div.content_news_rates h3 {font-size:129%; font-weight:bold;} #content_news div.content_news_rates ul {margin:10px 0;} #content_news div.content_news_rates ul li {color:#8c8c8c; margin:7px 0; font-size:85%;} #content_news div.content_news_rates ul a {display:block; color:#8c8c8c; padding-left:25px; padding-bottom:2px;} #content_news div.content_news_rates ul li.rss a {background:transparent url(/css_images/icon_rss.gif) 0 0 no-repeat;} /* Right-hand column containing asset profile */ #sidebar_portfolio {border-bottom:#f3f3f3 solid 3px;} #sidebar_portfolio h2 {background:transparent url(/css_images/sidebar_portfolio_header.gif) 100% 0 no-repeat; color:#fff; font-size:112%; font-weight:bold; padding:7px 15px 5px;} #sidebar_portfolio div.content {border-right:1px solid #DFDFDF; border-bottom:1px solid #DFDFDF; border-top:1px solid #fff; border-left:1px solid #fff;} #sidebar_portfolio p {color:#333;} #sidebar_portfolio div.content div.closed div.contents {display:none;} #sidebar_portfolio div.toggle div.contents {border-top:#ccc dashed 1px;} #sidebar_portfolio div.toggle {background:#f0f1f2; padding:10px; margin:10px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;} #sidebar_portfolio div.toggle h3 a {color:#333; font-size:136%; font-weight:bold; padding:3px 0 8px 0; display:block; background:transparent url(/css_images/toggle_open.gif) 100% 0 no-repeat;} #sidebar_portfolio div.content div.closed h3 a {background-image:url(/css_images/toggle_closed.gif); padding-bottom:0;} #sidebar_portfolio div.toggle p {margin:10px 0;} #sidebar_portfolio div.contents {} #sidebar_portfolio div.contents ul.tools {display:block; float:right; height:1em; margin:10px 0 10px 10px; font-size:85%;} #sidebar_portfolio div.contents ul.tools li {display:block; float:right; margin-left:10px;} #sidebar_portfolio div.contents p.count {font-size:85%;} #sidebar_portfolio div.contents div.content_item {clear:right;} #sidebar_portfolio div.content_item h4 {font-size:136%; margin-top:10px;} #sidebar_portfolio div.content_item h4 a {color:#333;} #asset_guest {padding:10px;} #asset_guest p { padding-left:50px; margin:10px 0;} #asset_guest p.signup {background:transparent url(/css_images/signup.png) 6px 0 no-repeat;} #sidebar_portfolio #asset_profile ul.tools {margin-top:0;} #asset_profile p.name {margin:10px 0; padding:0;} #container #asset_profile p.photo {padding:5px; float:right; background:#f8f8f8; margin-top:0;} #asset_profile div.status {background:#f8f8f8; margin:10px 10px 0 0; padding:1px; width:50%;} #asset_profile div.status p.text {margin:10px; padding:0;} #asset_profile p.expenses {color:#900; text-align:right;} #asset_profile p.expenses strong {float:left; text-align:left; margin-right:10px;} #asset_profile p.savings {color:#090; text-align:right;} #asset_profile p.savings strong {float:left; text-align:left; margin-right:10px;} #asset_list {} #asset_list div.item {margin:10px; background-color:#f8f8f8;} #asset_list div.item p {padding:10px; font-size:85%; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;} #asset_list div.item p strong {font-weight:bold;} #asset_quotes div.quotes {} #asset_quotes div.quotes div.info {clear:right;} #asset_quotes div.quotes div.info div.item {min-height:55px; clear:right;} #asset_quotes div.quotes div.info div.item div.price_tag {float:right; background:#fff; margin:0 0 10px 10px; padding:10px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;} #asset_quotes div.quotes div.info div.item p {margin:10px 100px 10px 0; padding:10px 0 0 0; font-size:85%;} #asset_quotes div.quotes div.info div.item p strong {font-weight:bold;} #asset_quotes div.quotes div.info div.item div.price_tag { text-align:center;} #asset_quotes div.quotes div.info div.item div.price_tag strong {font-size:129%; display:block; color:#090;} #asset_quotes div.quotes div.info div.item div.price_tag span {font-size:85%; display:block;} /* Left-hand process list, stepping indicator */ div.process_list li span {background:transparent url(/css_images/process_sprite.png) 0 0 no-repeat; display:block; padding:6px 5px 6px 30px;} div.process_list li.process-one span {background-position:3px 3px;} div.process_list li.process-two span {background-position:3px -47px;} div.process_list li.process-three span {background-position:3px -97px;} div.process_list li.process-four span {background-position:3px -147px;} div.process_list li.process-one-active span {background-position:-197px 2px;} div.process_list li.process-two-active span {background-position:-197px -48px;} div.process_list li.process-three-active span {background-position:-197px -98px;} div.process_list li.process-four-active span {background-position:-197px -148px;} div.process_list li.process-one-check span {background-position:-397px 2px;} div.process_list li.process-two-check span {background-position:-397px -48px;} div.process_list li.process-three-check span {background-position:-397px -98px;} div.process_list li.process-four-check span {background-position:-397px -148px;} /* Layout container, 2 columns, first is floated left. */ div.split {} div.first {width:48%; float:left;} div.second {width:48%; float:right;} div.split:after {display:block; content:"."; height:0; visibility:hidden; clear:both; width:0;} /* Homepage Blocks - e.g. Home vs. Car insurance */ div.block {} div.block h2 {display:block; float:left; background:transparent url(/css_images/grey_tab_left.gif) 0 0 no-repeat;} div.block h2 span {display:block; float:left; background:transparent url(/css_images/grey_tab_right.gif) 100% 0 no-repeat; padding:4px 10px; font-weight:bold;} #content div.block h2 {font-size:112%;} div.block_content {position:relative; border:#ddd solid 1px; padding:10px 10px 50px 10px; clear:left; font-size:92%; min-height:150px;} div.block_content img {float:left; margin:10px;} div.car_insurance div.block_content {} div.home_insurance div.block_content {} .block_content strong {font-weight:bold;} .block_content em {font-style:italic;} .block_content ul {margin-left:2em; list-style:disc;} .block_content ol {margin-left:2em; list-style:decimal;} div.block_content p.button {margin-top:10px; position:absolute; bottom:10px; right:10px;} div.block_content p.button img {float:none; margin:0;} /* In-page tips, with rounded corners */ div.tip {background:transparent url(/css_images/tip_bottom.gif) 0 100% no-repeat; padding-bottom:6px; width:474px;} div.tip h3 {background:transparent url(/css_images/tip_top.gif) 0 0 no-repeat; height:6px; width:100%;} div.tip h3 span {display:block; position:absolute; top:0; left:-9999em;} div.tip div.tip-text {border-left:#ddd solid 1px; border-right:#ddd solid 1px; background:transparent url(/css_images/icon_tip.gif) 12px 5px no-repeat; padding:5px 5px 5px 55px;} div.tip div.tip-text strong {font-weight:bold;} div.tip div.tip-text em {font-style:italic;} div.tip div.tip-text ul {margin-left:2em; list-style:disc;} div.tip div.tip-text ol {margin-left:2em; list-style:decimal;} /* Adverts */ div.advert a img {border:#afbbc0 solid 1px; padding:4px;} div.advert iframe {border:#afbbc0 solid 1px; padding:4px;} /* Form defintions */ #content div.form_item {margin:10px 0; clear:left;} #content div.form_item label {float:left; width:160px; text-align:right; padding-top:3px; color:#010055; margin:0 0 10px 0;} #content div.form_item p {margin-left:170px;} #content div.form_help {margin-left:170px;color:#999; font-size: 77%;} #content div.form_item p em {display:block; font-size:85%; color:#666;} #content div.form_item p em.error {} #content div.form_item ul {margin-left:170px;} #content div.form_item ul label {float:none; width:auto; text-align:left;} #content div.form_buttons {margin:10px 0; padding:0 0 0 170px;} #content div.fb_button {margin:10px 0; text-align:center;} #content form h3 {clear:both; margin:10px 0;} #sidebar div.form_item p em {display:block; font-size:85%; color:#666;} form select, form textarea, form input.text {max-width:300px;} body #container form div.form_item em.error_description {color:#c00; background:transparent url(/css_images/red-arrow.gif) 5px 0 no-repeat; padding-top:10px;} body #container form div.form_item input.error, body #container form div.form_item select.error, body #container form div.form_item textarea.error {border:1px solid #c00;} form .textfield {border:#dfdfdf 1px solid; background:#f8f8f8 url(/img/form-field-bg.png) repeat-x top left; color:#666; padding:3px;} form .submitbtn {cursor:pointer} form .textfield:hover {border:#33c 1px solid;} form .textfield:focus {border:#999 1px solid;} form .small {width:117px} form .medium {width:235px} html body input.submit {background:#eee url(/css_images/bg_submit.gif) 0 0 repeat-x; text-transform: uppercase; font-weight:bold; font-size:85%; border: 1px solid #666; padding: 4px 10px 3px; color:#fff; -moz-border-radius: 3px; border-radius: 3px; -webkit-border-radius: 3px;} html input.button {background:#eee url(/css_images/bg_button.gif) 0 0 repeat-x; text-transform: uppercase; font-weight:bold; font-size:85%; border: 1px solid #aaa; padding: 4px 10px 3px; color:#333; -moz-border-radius: 3px; border-radius: 3px; -webkit-border-radius: 3px;} #container table input.submit, #container table input.button {padding:2px 6px 1px;} #container input.apply_up {} #container input.apply_down {} #container input.next {} #container input.save {} #container input.delete {} #container input.get_quotes {} #container input.add {} #container input.submit {} #container input.edit {} #container input.remove {} div.form_buttons p.cancel {display:inline-block; padding-top:5px; margin-left:10px; font-size:92%;} p.or {background:transparent url(/css_images/or_line.gif) 0 50% repeat-x; text-align:center; margin:15px 0;} p.or span {padding:0 17px; background-color:#fff; font-size:152%; text-transform:uppercase;} /* Quote-related layout */ #quotes_form {} #quotes_form div.tools {clear:right; margin:10px 0;} #quotes_form div.tools ul {height:35px;} #quotes_form div.tools li {display:block; float:right;} #quotes_form div.tools li.save {padding:0 10px;} #quotes_form div.tools li.save a {color:#999;} #quotes_form div.tools li.delete {padding:0 10px;} #quotes_form div.tools li.delete a {color:#999;} #quotes_form div.tools li.apply {} #quotes_form p.back {} #quotes_form div.loading_container {margin:10px 0; background:#f3f3f3; text-align:center; padding:0 10px 10px 10px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;} #quotes_form div.loading_container p.loading {margin:10px 0; text-align:center; background:transparent url(/css_images/loading_f3f3f3.gif) 50% 20px no-repeat; padding:60px 0 0; font-size:136%;} #quotes_form div.quote_item {background:#f3f3f3; margin:5px 0; padding:8px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; clear:left; min-height:110px;} #quotes_form div.quote_logo {background:#fff; padding:8px; float:left; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;} #quotes_form div.quote_content {margin-left:10px; float:left; width:200px;} #quotes_form div.quote_content h3 {clear:none; font-weight:bold; margin:0; font-size:100%;} #quotes_form div.quote_content p {font-size:77%;} #quotes_form div.quote_checkbox {float:right; padding:8px; background:#fff; -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; border-radius-topright:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-right-radius:5px; border-radius-bottomright:5px;} #quotes_form div.quote_amount {background:#fff; padding:8px; text-align:center; margin-left:300px; margin-right:25px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border-radius-topright:0; -moz-border-radius-topright:0; -webkit-border-top-right-radius:0;} #quotes_form div.quote_amount p {} #quotes_form div.quote_amount p strong {font-size:129%; color:#090; display:block;} #quotes_form div.quote_amount p span {font-size:85%;} #quotes_form div.quote_amount p em.error {color:#900; border:0;} #quotes_form div.quote_amount p.purchase {margin:10px 0 0 0;} #content #propertyDetails {margin-top:10px;} #content #vehicleDetails {margin-top:10px;} /* CMS provided content */ .content p {margin:0 0 10px;} .content strong {font-weight:bold;} .content em {font-style:italic;} .content ul {margin-left:2em; list-style:disc; margin-bottom:10px;} .content ol {margin-left:2em; list-style:decimal; margin-bottom:10px;} #page_help div.content p {margin-top:0;} .tip-text div.content p {margin-bottom:0;}