/* Colour Codes ------------------------------------------- Dark Gray: #333333 Middle Gray: #4E4E4E Light Gray: #E6E6E6 Light Red: #B30000 Dark Red: #990000 */ /* ------------------------------------------- project: Simple Financial date: 2008/11/01 ------------------------------------------- */ /* Reset ------------------------------------------- */ * {margin: 0; padding: 0; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; } a, span, strong {font-size: 1em;} span {color: inherit;} a, a:visited {text-decoration: none;} a:hover {text-decoration: underline;} img {border: none;} html {height: 100.01%;} /* basic text elements */ h1 {margin: 20px 0 0 0; color: #7ebcf5; font-size: 1.7em; font-style: italic; font-weight: normal; font-family: "Lucida Sans", Lucida, "Trebuchet MS", Arial, Helvetica, sans-serif; line-height: 1.8em; } h2 {margin: 40px 0 10px 0; color: #7ebcf5; font-size: 1.25em; font-family: "Lucida Sans", Lucida, "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold;} h3 {margin: 0.5em 0 0.5em 0; color: #2668a2; font-size: 1.25em; font-weight: bold; font-family: "Lucida Sans", Lucida, "Trebuchet MS", Arial, Helvetica, sans-serif; font-style: italic;} h4 {margin: 2em 0 -0.5em 0; color: #06457d; font-size: 1.1em;} p {margin: 1em 0 1em 0;} #content a, #content a:visited {color: #7ebcf5; text-decoration: underline;} #content a:hover {color: #06457d; text-decoration: none;} #content h4 a, #content h4 a:visited {color: #7ebcf5; text-decoration: none;} #content h4 a:hover {color: #fff; text-decoration: underline;} ul, ol {margin: 1em 0 1em 0;} ul li {list-style: none; margin: 0 0 0 20px; padding-left: 10px; background: url(/_images/design/bullet.png) left 7px no-repeat; line-height: 160%;} ol li {margin: 0 0 0 40px; line-height: 160%;} blockquote { line-height: 160%; margin-left: 20px; } iframe { border : 0px; padding : 0px; margin : 0px; } /* basic form elements */ form.side {width: 308px; margin: 0 auto; padding-top: 4px; background: url(/_images/design/form-top.png) top no-repeat;} form.side p {text-align: center;} form.side fieldset {width: 308px; padding: 10px 0 10px 0; border: none; background: #fff url(/_images/design/form-bottom.png) bottom no-repeat;} legend {display: none;} form.side label {display: block; float: left; clear: left; width: 120px; margin: 5px 0 5px 0; padding: 2px 0 2px 10px; color: #333; font-weight: bold;} input {width: 150px; margin: 5px 0 5px 0; padding: 2px 2px 2px 5px; border: 1px solid #bdbdbd; border-top-color: #737373; border-left-color: #737373; background: #fff url(/_images/design/input-back.png) left top no-repeat;} form.side input.chk, form.side input.radio {width: auto; border: none;} textarea {width: 300px; height: 100px; margin: 5px 0 5px 0; padding: 2px 2px 2px 5px; border: 1px solid #bdbdbd; border-top-color: #737373; border-left-color: #737373; background: #fff url(/_images/design/input-back.png) left top no-repeat;} form.side textarea {width: 150px; height: 100px; } select {width: 160px; margin: 5px 0 5px 0; padding: 2px 0 2px 5px; border: 1px solid #bdbdbd; border-top-color: #737373; border-left-color: #737373; background: #fff url(/_images/design/input-back.png) left top no-repeat;} button {width: 158px; height: 38px; margin-top: 10px; border: none; background: url(/_images/design/button.png) no-repeat; color: #fff; font-family: "Lucida Sans", "Trebuchet MS", Arial, Helvetica, sans-serif; font-style: italic; font-weight: bold; line-height: 30px; text-align: center; cursor: pointer;} .ofHidden { overflow: hidden; } /* layout ------------------------------------------- */ body {background: transparent url(/_images/design/bottom.png) left bottom repeat-x; color: #333; } html {background: #064782 url('/_images/design/bg_top.png') left top repeat-x; } html#innerPage {background: #064782 url('/_images/design/bg_top_inner.png') left top repeat-x; } #header {position: relative; width: 960px; height: 137px; margin: 0 auto; background: url(/_images/design/header.jpg) no-repeat;} #header * {margin: 0; padding: 0;} #logo {position: absolute; left: 0; top: 17px; overflow: hidden; width: 186px; height: 65px; text-indent: -10001px;} #utils {position: absolute; right: 25px; color: #333; line-height: 25px;} #utils a, #utils a:visited {color: #333; font-size: 0.8em; font-weight: bold; font-family: "Lucida Sans", "Trebuchet MS", Arial, Helvetica, sans-serif; text-decoration: none;} #utils a:hover {color: #06457d; text-decoration: none;} #mainmenu {position: absolute; left: 0; top: 99px;} #mainmenu li {float: left; list-style: none;} #mainmenu a, #mainmenu a:visited {display: block; float: left; height: 37px; padding-bottom: 10px; color: #fff; font-size: 0.9em; font-family: "Lucida Sans", "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold; line-height: 37px; text-align: center;} #mainmenu a:hover, #mainmenu a.current, #mainmenu a.current:visited {background: url(/_images/design/triangle.gif) center bottom no-repeat; text-decoration: none;} #mainmenu .first a {text-align: left;} #mainmenu a#mm1 {width: 277px;} #mainmenu a#mm2 {width: 174px;} #mainmenu a#mm3 {width: 108px;} #mainmenu a#mm4 {width: 132px;} #mainmenu a#mm5 {width: 120px;} #mainmenu a#mm6 {width: 149px;} .stuff {position: relative; width: 960px; margin: 0 auto;} /* #banner {height: 170px; overflow: hidden; background: url(/_images/design/banner-back3.png) center bottom repeat-x;} #banner .stuff {height: 170px; } #banner.home {height: 290px; overflow: hidden; background: url(/_images/design/banner-back.png) center bottom repeat-x;} #banner.home .stuff {height: 290px; } */ #intro {width: 565px; color: #fff; } #intro h1 {color:white; font-style:normal; line-height:2.2em; margin:20px 0 -20px -4px; padding-top:5px; text-indent: 5px;} #intro h2 {margin: 0 0 0 0; font-size: 1.45em; text-align: right;} #intro h2 span {padding-left: 5px; color: #fff; font-size: 1.3em;} #intro p { display : none; visibility : hidden; margin-top: 0; color: #fff; font-size: 1.1em; margin-bottom: 0; line-height: 160%; } #intro #homeTabs ul.introList { color: #fff; margin: 4px 0 0 0; } #intro #homeTabs ul.introList li { margin-left: 5px; background: url(/_images/design/arrow-small.png) no-repeat 2px 5px; padding-bottom: 5px; } p#slogan {visibility : hidden; display : none; position: absolute; bottom: 0; margin: 10px 0 4px 0; color: #06457d; font-size: 1.2em; font-weight: bold; font-family: "Lucida Sans", "Trebuchet MS", Arial, Helvetica, sans-serif; font-style: italic; line-height: 55px;} .home p#slogan {line-height: 67px;} #slideshow {float: right; overflow: hidden; width: 389px; height: 269px; margin-top: 10px; background: url(/_images/design/slideshow.png) no-repeat;} #slideshow .slide {position: relative; width: 389px; height: 269px; margin: 0; padding: 0;} .slide img {position: absolute; left: 17px; top: 16px; z-index: 1;} .slide p {position: absolute; left: 17px; bottom: 18px; z-index: 2; width: 355px; height: 60px; margin: 0; border-top: 1px solid #fff; background: url(/_images/design/transparent.png); color: #06457d; font-size: 1.1em; font-weight: bold; font-style: italic; font-family: "Lucida Sans", "Trebuchet MS", Arial, Helvetica, sans-serif; line-height: 60px; text-align: center;} #content {margin-top: 230px; padding-top: 20px; background: #fff;} #main {float: left; width: 600px; padding-bottom: 50px;} #main .specialOffer { background: url(/_images/design/special-bg.png) no-repeat; width: 480px; padding: 18px 10px 0 115px; height: 67px; color: #FFFFFF; font-weight: bold; font-size: 1.1em; line-height: 160%; } #main .specialOffer2 { float: right; background: url(/_images/design/special-bg2.png) no-repeat; width: 150px; padding: 8px 10px 0 40px; margin-left: 10px; height: 150px; color: #FFFFFF; font-weight: bold; font-size: 1.0em; line-height: 160%; } #main .highlight { padding: 5px 5px; margin: 30px 0 30px 0; font-weight: bold; background: #FFFF99; text-align: center; } #main .highlight a { color: #990000; text-decoration: none; } #main .highlight a:hover { color: #990000; text-decoration: underline; } #main p {margin: 0.8em 0 0.8em 0; line-height: 160%; } #main ul li {margin: 0.8em 0 0.8em 20px; padding-left: 15px; background: url(/_images/design/bullet.gif) left 7px no-repeat;} #main ol li {margin: 0.8em 0 0.8em 40px; padding-left: 15px; } .sitemap ul { margin-left: 30px; } #main #companyLogos li { list-style: none; list-style-image: none; background: none; float: left; width: 130px; text-align: center; height: 40px; margin-top: 40px; } #main #logoWrapper { text-align: center; padding: 35px 0 0 0; } #content .videoWrap { border: 5px solid #ededed; padding: 8px; margin: 20px 0 20px 80px; width: 380px; height: 230px; } #content #avivaImg { float: right; border: 4px solid #ededed; padding: 3px; margin: 5px 10px; } #content #bcpDownload { float: right; width: 200px; border: 2px solid #ccc; background: #ededed; padding: 15px 5px; line-height: 160%; margin: 5px 10px; text-align: center; } #content #bcpDownload a { text-decoration: none; } #sidebar {position: relative; top: -100px; float: right; width: 350px;} #sidebar.pullUp { top: -270px;} #footer1 {overflow: hidden; width: 940px; height: 24px; margin: 0 auto; margin-top: 5px; padding: 5px 10px 5px 10px; border: 4px solid #fff; border-top: 1px solid #d5d5d5; background: #d5d5d5;} #footer1 * {color: #085aa4;} #footer1 a, #footer1 a:visited {text-decoration: none;} #footer1 a:hover {text-decoration: underline;} #footer1 p {margin: 0; font-weight: bold; font-size: 0.9em;} #copyright {float: left;} #footer-menu {float: right;} .staffPic { float: left; border: 3px solid #ccc; padding: 3px; margin: 35px 10px 20px 0; height: 150px; } .staffWrap { overflow: hidden; height: 200px; } #contactDetails { overflow: hidden; } .contactColumn { float: left; overflow: hidden; width: 300px; } .contactColumn h4 { margin: 10px 0 -0.5em; 0; } #mapWrap { border: 1px solid #999999; padding: 4px; margin-top:15px; } #mapWrap #map { height: 300px; } .pensionTable { margin: 10px 10px 0 10px; padding: 1px; float: right; } .pensionTable th { background: #7EBCF5; width: 100px; text-align: center; padding: 1px; color: #fff; } .pensionTable tr td { background: #f0f0f0; width: 100px; text-align: center; } .pensionTable tr.alt td { background: #e2e2e2; } .pensionTable2 { margin: 10px 10px 10px 10px; padding: 1px; } .pensionTable2 th { background: #7EBCF5; width: 200px; text-align: center; padding: 1px; color: #fff; } .pensionTable2 tr td { background: #f0f0f0; width: 200px; text-align: center; } .pensionTable2 tr.alt td { background: #e2e2e2; } .redundancyTable { margin: 20px 0 10px 0; padding: 1px; } .redundancyTable th { background: #7EBCF5; width: 200px; text-align: center; padding: 1px; color: #fff; height: 30px; } .redundancyTable tr td { background: #f0f0f0; width: 200px; text-align: center; height: 40px; } .redundancyTable tr.alt td { background: #e2e2e2; } #footer2 {overflow: hidden; width: 960px; height: 96px; margin: 0 auto;} #footer2 p {margin: 10px 0 10px 0; color: #fff; font-size: 0.8em; font-style: normal; font-family: "Lucida Sans", "Trebuchet MS", Arial, Helvetica, sans-serif; line-height: 1.3em;} #footer2 p span {line-height: 0.9em;} #footer2 a, #footer2 a:visited {color: #fff; text-decoration: none;} #footer2 a:hover {text-decoration: underline;} #footer2 div {width: 450px;} #footer-info {float: right;} #footer-info p {text-align: right;} #footer2 .vcard {position: relative; float: left; line-height: 1em;} /* various classes and styles ------------------------------------------- */ .clear {clear: both; height: 1px; overflow: hidden;} h2.first {margin-top: 0;} #realName { display : none; visibility: hidden; } /* some special layers and sections and their content ------------------------------------------- */ ul#section-boxes {overflow: hidden; width: 960px; margin: 0 auto;} ul#section-boxes li {float: left; list-style: none; width: 311px; margin: 0 8px 30px 0; padding: 0 0 10px 0; background: url(/_images/design/home-box-bottom.png) bottom no-repeat;} ul#section-boxes li h4 {margin: 0 0 7px 0; padding: 0; background: url(/_images/design/home-box-top.png) top no-repeat; color: #fff; font-family: "Lucida Sans", "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 0.9em; font-weight: bold; line-height: 24px; text-align: center;} ul#section-boxes li p {margin: 5px 20px 5px 20px; font-size: 0.9em; line-height: 1.6em;} ul#section-boxes li img {display: block; width: 270px; margin: 0 auto; padding: 4px; border: 1px solid #d5d5d5; background: #fff;} ul#home-boxes {overflow: hidden; width: 960px; margin: 0 auto;} ul#home-boxes li {float: left; list-style: none; width: 205px; text-align: center; margin: 0 5px 30px 5px; padding: 10px 10px 20px; background: #ededed; border: 1px solid #ccc; height: 40px; vertical-align: middle; font-weight: bold; } ul#home-boxes li a { text-decoration: none; } #main-img {position: relative; width: 352px; height: 230px; margin: 0; z-index: 99;} #main-img .frame { margin-left : 15px; margin-top : 2px; display : block; z-index: 3; position : absolute; width : 324px; height : 222px; background: transparent url('/_images/design/img_bg.png') center center no-repeat; } #main-img img {position: absolute; left: 27px; top: 14px; z-index: 1;} #main-img p {position: absolute; left: 27px; bottom: 17px; z-index: 2; width: 300px; height: 40px; margin: 0; border-top: 1px solid #fff; background: url(/_images/design/transparent.png); color: #06457d; font-size: 1em; font-weight: bold; font-style: italic; font-family: "Lucida Sans", "Trebuchet MS", Arial, Helvetica, sans-serif; line-height: 40px; text-align: center;} #arrow {position: relative; top: -50px; z-index: 0; width: 210px; height: 129px; margin: 0 auto; margin-bottom: -75px;background: transparent url(/_images/design/arrow.png) no-repeat scroll center 0;} .sidebox-wrapper1 {width: 312px; margin: 0 auto; margin-left : 23px; background: url(/_images/design/sidebox-middle.png) center top repeat-y; } .sidebox-wrapper2 {padding-top: 15px; background: url(/_images/design/sidebox-top.png) center top no-repeat;} .sidebox {padding-bottom: 20px; margin-bottom: 0; background: url(/_images/design/sidebox-bottom.png) center bottom no-repeat; } .sidebox hr {clear: both; margin: 10px; border: none; border-top: 2px solid #dfdfdf;} .sidebox h3 {text-align: center;} .sidebox p {margin: 0.5em 10px 0.5em 10px; color: #333; font-size: 0.85em; text-align: center;} #per1day, #per2day {width: 44px; margin-right: 2px;} #per1month, #per2month {width: 60px; margin-right: 2px;} #per1year, #per2year {width: 44px; margin-right: 0;} form.side .subLabel { font-weight: bold; color: #999999; } .applyRowWrap { overflow: hidden; } .applyLabel { padding: 10px 2px; float: left; width: 150px; font-weight: bold; } .applyDetail { padding: 10px 2px; float: left; width: 400px; } .sh-one, .sh-mortgage { display: none; } .sh-two, .sh-term { display: inherit; } #bannerWrap { width : 950px; margin: auto; } #homeTabs { margin: auto; width: 1000px; padding-top : 165px; } #homeTabs ul.menu li, #homeTabs ul.menu li a, #homeTabs ul.menu li a span { margin: 0px; padding: 0px; display: block; height : 76px; } #homeTabs ul.menu li { float: left; } #fragWrap { width: 950px; } #rotate { overflow: hidden; height: 175px; } #homeTabs ul.menu { list-style: none; margin: 0px; padding: 0px; position: absolute; top : 88px; } #homeTabs ul.menu li { float : left; background: transparent url(../_images/design/nav-bgline.png) 5px center no-repeat; } #homeTabs ul.menu li.first { background: transparent; } #homeTabs ul.menu li a { cursor: pointer; outline: none; position : relative; font-family:"Lucida Sans","Trebuchet MS",Arial,Helvetica,sans-serif; font-size:0.9em; font-weight:normal; color : white; text-decoration: none; text-align: center; margin-right : -10px; } #homeTabs ul.menu li a span.leftBg { } #homeTabs ul.menu li a span.rightBg {} #homeTabs ul.menu li a span.middle { font-size : 13px; padding-top : 16px; padding-left: 18px; padding-right: 18px; font-weight: bolder; height: auto; line-height: 1.6em; } #homeTabs ul.menu li.first { } #homeTabs ul.menu li.first a span.leftBg { background: transparent; } #homeTabs ul.menu li a:hover { color: #ccc; outline: none; cursor: pointer; } #homeTabs ul.menu li.on a, #homeTabs ul.menu li.ui-tabs-selected a { color: white; background: transparent url('/_images/design/nav-bgleft.png') left 2px no-repeat; } #homeTabs ul.menu li.on a span.rightBg, #homeTabs ul.menu li.ui-tabs-selected a span.rightBg { background: transparent url('/_images/design/nav-bgright.png') right 2px no-repeat; } #homeTabs ul.menu li.nav-lifeassurance a { z-index : 99; width : 178px; } #homeTabs ul.menu li.nav-incomeprotection a { z-index : 98; width : 110px; } #homeTabs ul.menu li.nav-pensionsandretirement a { z-index : 97; width : 118px; } #homeTabs ul.menu li.nav-investmentsandwealth a { z-index : 96; width : 161px; } #homeTabs ul.menu li.nav-financeandmortgages a { z-index : 95; width : 114px; } #homeTabs ul.menu li.nav-homeandcar a { z-index : 94; width : 123px; } #homeTabs ul.menu li.nav-healthinsurance a { z-index : 93; width : 108px; } #homeTabs ul.menu li.nav-personalfinance a { z-index : 92; width : 101px; } #fragWrap, #bannerWrap .banner { clear: both; color: white; padding-top: 8px; } #fragWrap .imgFrontWrap, #bannerWrap .banner .imgFrontWrap { float: left; margin-top: 0px; margin-left: -4px; margin-right: 15px; position: relative; z-index: 2; } #fragWrap .imgFrontWrap .frame, #bannerWrap .banner .imgFrontWrap .frame { display : block; position : absolute; width : 243px; height : 168px; background: transparent url('/_images/design/img_bg_sml.png') center center no-repeat; } #fragWrap .imgFrontWrap img, #bannerWrap .banner .imgFrontWrap img { margin-top: 4px; margin-left : 8px; } #fragWrap .blueStrip, #bannerWrap .banner .blueStrip { background:transparent url(/_images/design/bg-bluestrip.png) repeat-x scroll left top; font-size:18px; line-height:30px; padding-left:0; position:absolute; top:292px; width:930px; z-index:1; } #fragWrap .getQuote, #bannerWrap .banner .getQuote { color : white; float : right; height: 54px; width : 168px; line-height : 54px; text-indent : 30px; font-size : 16px; position: relative; top : -13px; left : 56px; background: transparent url('/_images/design/btn-rarrow-blank.png') center center no-repeat; outline: none; } #fragWrap .blueStrip span, #bannerWrap .banner .blueStrip span { margin-left : 248px; } #fragWrap h2, #bannerWrap .banner h2 { font-weight: bolder; font-size: 24px; color : white; margin-top : 6px; margin-bottom: 0px; padding: 0px; margin-left : 12px; } #fragWrap p, #bannerWrap .banner p { color : #ececec; display : block; margin-top : 5px; line-height: 1.4em; margin-left: 15px; } /* #fragWrap .fragContent, #bannerWrap .banner .fragContent { float: left; width: 700px; } */ #content .widthWrap { width: 960px; margin: auto; } #content .silverBanner { width : 959px; height : 58px; background : url('/_images/design/silver-banner.png') center center no-repeat; } #content .silverBanner h3 { color:#D10101; font-size:21px; font-style:normal; line-height:58px; text-indent:20px; } #content .silverBanner span.talkToday { text-align : right; float : right; font-size : 14px; color : #7EBAF3; font-style: italic; line-height:55px; padding-right:20px; } #content .silverBanner span.number { font-size : 22px; color : #06579E; } #content .silverBanner2 { background:transparent url(/_images/design/silver-banner2.png) no-repeat scroll left top; color:#9D0000; font-size:16px; font-style:italic; font-weight:bolder; height:71px; left:-10px; padding-left:10px; padding-right:155px; padding-top:26px; position:relative; text-align:center; top:112px; width:631px; } #content #frontTeamBox { padding-top:20px; float: right; display: block; } #content #frontTeamBox p { line-height: 1.6em; } #content a.btn_long, #content a.btn_long:hover, #content a.btn_long:active, #content a.btn_long:visited { margin-left:-245px; position:absolute; width:252px; } #content .blueBoxWrap { height:130px; padding-top:20px; clear : both; } #content ul.blueBoxes { list-style: none; margin: 0px; margin-left : 0px; position : absolute; padding: 0px; } #content ul.blueBoxes li { margin: 0 -7px 0px -10px; padding: 0px; background: transparent url(/_images/design/blue-textbox.png) center center no-repeat; width : 257px; height: 103px; float : left; } #content ul.blueBoxes li p {padding-left : 20px; padding-right : 20px; padding-top : 3px; color : white; font-size: 14px; text-align: center; font-weight: bolder; } #content .blueBoxWrap2 { margin-top : -50px; height: 200px; } #content .blueBoxWrap2 ul.blueBoxes { list-style: none; margin: 0 0 0 -15px; position : absolute; padding: 0px; } #content .blueBoxWrap2 ul.blueBoxes li { margin: 0 -5px 0px -5px; padding: 0px; background: transparent url(/_images/design/blue-textbox2.png) center center no-repeat; width : 226px; height: 103px; float : left; } #content .blueBoxWrap2 ul.blueBoxes li p {padding-left : 20px; padding-right : 20px; padding-top : 3px; color : white; font-size: 14px; text-align: center; font-weight: bolder; } #content .blueBoxWrap2 ul.blueBoxes li.specialOffer { margin-top: 5px; padding: 0px; background: transparent url(/_images/design/red-textbox.png) center center no-repeat; width : 214px; height: 103px; float : left; } #content .blueBoxWrap2 ul.blueBoxes li.specialOffer p {padding-left : 20px; padding-right : 20px; padding-top : 10px; color : white; font-size: 22px; text-align: center; font-weight: bolder; } #content p.intro { font-weight: bolder; font-style: italic; font-size : 16px; } #content .textBody { padding-left : 10px; padding-right : 10px; width : 682px; float : left; line-height: 1.7em; } #content .textBody ul li { margin-bottom : 20px; margin-top : 20px; } #innerPage #content { margin-top : 60px; }