/* Tested and passed for browser compatibility on the following browsers: Internet explorer: 5.0.1+ Firefox: 1.07+ Opera: 8.51+ Safari: 2.0+ Netscape browser: 8.0.2+ Mozilla: 1.7.0+ */ * {padding: 0; margin: 0;} img[class$="quoteimage"] { margin-bottom:15px;} /* for IE 7*/ html:lang(en) .quoteimage {margin-bottom:0} /*For most modern browsers relies on having the html ‘lang=en’ attribute in the html file*/ .quoteimage:empty {margin-bottom:0} /* For Safari */ body {/*page centered in winIE here and font size declared*/ text-align: center; font-size: medium; font-family: verdana, arial, sans-serif; min-height:101%; background:#E9E9E9;/*main background colour*/ } * html body{/*different values for ie*/ font-size: small; /*for IE5/Win */ f\ont-size: medium; /*for other IE versions*/ } html {height:100%;} li {font-size:80%;}/* Main list font sizing */ img {border:0;} .clear {clear:both; height: 0px; font-size: 1px;}/*Used for clearing elements when there's nothing else to clear for them, used on the contact form - a useful class to have if you're having trouble clearing*/ /*Default link styling here*/ a:link {color:#4459bd; text-decoration:underline;} a:visited {color:#4459bd; text-decoration:underline;} a:hover {color:#000; text-decoration:none;} a:active {color:#000; text-decoration:underline;} /*Margin heights - determines the space between each element. e.g. two h1 elements, one underneath the other, would have a spacing of 0.7em apart*/ h1 {margin: 0 0 0.7em 0;} h2 {margin:0;} h3 {margin: 1em 0;} h4 {margin: 0 0 0.5em 0;} p {margin: 0 0 1em 0;} h5 {margin:-0.6em 0 0.7em 0;} /*Default font properties, such as size and color*/ h1 {font-size:130%; font-weight:normal; color:#000;} h1 a {text-decoration:none !important; color:#000 !important;} h2 {font-size:120%; font-weight:normal; color:#000;} h3 {font-size:120%; font-weight:normal; color:#4459bd;} h4 {font-size:140%; color:#4459bd;} p {font-size:80%; line-height:1.6em; color:#000;} /*The object that holds everything*/ #container { margin: 0 auto; text-align:left; width:800px;/*for ie5 - compact box model hack*/ w\idth:760px; border: 1px solid #000; /*the black border around at sides of the page*/ padding:0 18px; border-top:none; border-bottom:none; background:#fff; } /*## Top of the page logos, including main logo ##*/ #logos { float:left; width:760px; padding-top:10px; margin-bottom:10px; background:url(../images/loancompanies.gif) no-repeat 100% 50%;/*The logos to the top right, 100% is right and 50% is vertical align*/ } #logos h1 { padding: 30px 0 0 60px; background:url(../images/advancestart.gif) no-repeat top left; /*The main page logo*/ } /*## Get quote - info bar ##*/ .getquote {/*Contains the get quote button and title text. Used differently on contact page*/ clear:left; float:left; border:1px solid #4459bd; width:760px; w\idth:718px; background:#F3F3F3; padding:0px 20px; margin-bottom:10px; } .getquote_inside {/*to create the verticle align effect*/ float:left; margin:1em 0; } .getquote h2 {/*second heading styling*/ float:left; margin:0; padding-top: 10px; width:428px; } .title {/*second heading styling*/ float:left; margin:0; padding-top: 10px; width:428px; font-size:120%; } .pagetitle {/*second heading styling*/ float:left; margin:0; padding-top: 20px; width:428px; font-size:120%; } .contacttitle {/*second heading styling*/ float:left; margin:0; padding:20px 0px 20px 0px; font-size:120%; } .getquote1 {/*Contains the get quote button and title text. Used differently on contact page*/ clear:left; float:left; border:1px solid #4459bd; width:760px; w\idth:718px; background:#F3F3F3; padding:0px 20px; margin-bottom:10px; } .getquote1 h2 {/*second heading styling*/ float:left; margin:0; padding-top: 20px; width:428px; } .getquote_inside_bottom {/*to create the verticle align effect*/ float:left; margin:1em 0; } .getquote h4 {/*second heading styling*/ float:left; margin:0; padding-top: 20px; width:428px; font-size:120%; font-weight:normal; color:#000; } .bottomtitle {/*second heading styling*/ float:left; margin:0; padding-top: 20px; width:428px; font-size:120%; font-weight:normal; color:#000; } .highlight {/*To highlight the numbers*/ color:#03C; } .quoteimage {/*"get your quote" image*/ float:right; display:block;/*expands image to full size*/ width: 290px; border:none; height: 66px; background: url(../images/getyourquotex.gif) no-repeat 0 50%; } .quotenow {/*"get your quote" image*/ float:right; display:block;/*expands image to full size*/ width: 290px; border:none; height: 66px; margin-bottom:10px; } .quoteimage span { display:none; /*Hides 'span' content*/ } a[class$="quoteimage"] { margin-bottom:15px;} /* for IE 7*/ html:lang(en) .quoteimage {margin-bottom:0} /*For most modern browsers relies on having the html ‘lang=en’ attribute in the html file*/ .quoteimage:empty {margin-bottom:0} /* For Safari */ /*## Main page content ##*/ #content {/*Holds the woman picture and all the main content*/ clear:both; float:left; width:760px; w\idth:718px; padding:0 20px; margin-bottom:10px; border:1px solid #4459bd; background:#fff url(../images/happyladyx.jpg) no-repeat bottom right; } #contentart {/*Holds the woman picture and all the main content*/ clear:both; float:left; width:760px; w\idth:718px; padding:0 20px; margin-bottom:10px; border:1px solid #4459bd; background:#fff url(../images/happyladyxx.jpg) no-repeat bottom right; } #maincontent {width:480px; w\idth: 440px;}/*holds main body text*/ #maincontentart {width:760px; w\idth: 718px;}/*holds article body text*/ #maincontent ol li {list-style:none; padding: 20px 0 20px 45px; margin:0em 0;} /*ordered list (one with numbers)*/ li.one {background: url(../images/onex.gif) no-repeat 0px 50%;}/* images for the numbers one, two and three*/ li.two {background: url(../images/twox.gif) no-repeat 0px 50%;} li.three {background: url(../images/threex.gif) no-repeat 0px 50%;} #maincontent ul li {list-style:none;padding-left:20px;margin:20px 0; line-height:20px; background: url(../images/smallarrow.gif) no-repeat 0 5px;} /*Creates the smaller arrow effect in the main content for the unordered lists*/ #maincontentart ol {padding:0px 0px 0px 25px;} #maincontentart ol li {padding:0px 0px 0px 5px;} #maincontentart ul {padding-left:20px;} #maincontentart ul li {list-style:none;padding:0px 0px 0px 20px;margin:20px 0; line-height:20px; background: url(../images/smallarrow.gif) no-repeat 0 5px;} /*Creates the smaller arrow effect in the main content for the unordered lists*/ #maincontent h3 { /*Add a bit of space around h3 */ margin:2em 0; } .headline { /*Add a bit of space around h3 */ margin:1.6em 0;font-size:120%; font-weight:normal; color:#4459bd; } .topheadline { /*Add a bit of space around h3 */ margin:0.8em 0;font-size:120%; font-weight:normal; color:#4459bd; } /*## Details ## */ #details {/*main page details area.*/ clear:left; float:left; width:760px; padding:10px 0; } .message {font-size:140%; color:#4459bd;font-weight:bold;} #details ul li {list-style:none;padding-left:45px;margin:20px 0; line-height:5px;} /*Creates the smaller arrow effect in the main content for the unordered lists*/ /*## Navigation ##*/ #navigation {/*navigation, every main page link*/ clear:left; float:left; width:760px; w\idth:718px; border:1px solid #4459bd; padding:15px 20px; margin-bottom:10px; } #navigation ul {list-style:none;}/*removes normal list styling for the nav page*/ #navigation li {/*the list item settings - very simple. Remove quotes to revert to bullet version*/ display:inline; font-size:75%; line-height:1.3em; /*Here is the code for the bullet version of the navigation. float:left; width:233px; w\idth:auto; /*For orderly list version, change 'w\idth:auto' to 'w\idth:220px;'*//* margin-right:7px; background:url(../images/bullet.gif) no-repeat 0 5px; *//*Bullet image substitued, as displaying inline removes the list style.*/ } #navigation li a:hover {/*adds underlines on the navigation*/ text-decoration:none; } #navigation li a {/*get rid of underlines on the navigation mouse over*/ text-decoration:underline; } /*## Warning ## */ #warning {/*warning area*/ float:left; width:760px; padding:10px 0; } #warning p {/*warning area*/ line-height:1.3em; } /*## Footer ## */ #footer {/*bottom of the page. Intentionally not floated to allow the background to be drawn behind it. If you try float:left; , you'll see what that actually means*/ clear:left; border-top:1px solid #4459bd; } #footer p {/*bottom footer text*/ margin:0; font-size:70%; text-align:center; padding: 20px 0; } /*## Pages ## */ /*## Contact Page ## */ #contact .getquote h2 {/*at the top of the contact page, it allows the text to expand into the box fully, as there is no green button*/ width:auto; padding:37px 0 38px 0; } form {width:360px; margin-left:30px;}/*contact form width*/ fieldset {border:1px solid #1ec722; padding:15px 5px; background:#fff;}/*green border and white background*/ .row {clear: both; padding-top: 5px;} /* For winIE Hides from IE5-mac \*/ * html .row {height:1%;} /* End hide from IE5-mac */ form p {float:left; display:block; font-size:70%; text-align:right; width:142px; margin:0;}/*text size for form*/ .forminput {float:right; display:block; width:172px; margin:0; border:1px solid #999; padding:0;}/*input areas. i.e. where visitor types details*/ select {float:right; display:block; width: 172px; w\idth:174px; border:1px solid #999; background:#fff;}/*Drop down boxes in form*/ .privacy {float:right; font-size:65%; margin: 0 auto; text-align:right; margin-right:15%; display:inline;}/*inline display corrects ie5 double margin bug. your privacy is important to us bit*/ span.required {float:right; width:10px; font-size: 70%; color:#F00;}/*Required and not required parts*/ span.notrequired{float:right; width:10px; height:1px;} input.quoteimage {margin:10px 0;} /*submit image, adds a little more space at the bottom*/ input.quoteimage:hover {cursor:pointer; cursor:hand;}/*changes cursor to hand, when hovering over. Only on modern browsers*/ /* CLEARFIX (http://www.positioniseverything.net/easyclearing.html) These are used for special clearing options to make sure floats clear correctly in Internet explorer, an example use would be
or