/* YOU CAN FIND THE HOMEPAGE STYLING WITHIN THE HOMEPAGE STYLESHEET - /assets/css/homepage.css*/ body { background:#fff; color:#000000; cursor:default; font-size:62.5%; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0; text-align:center;} .wrapper { background:#fff; font-size:1.2em; margin:0 auto; text-align:left; width:980px;} /* --------------------------------------------------------------------------------------------------------------------------------- 1) RESETS & UNIVERSAL CLASSES /* --------------------------------------------------------------------------------------------------------------------------------- */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin:0; padding:0;} fieldset, img, abbr, acronym { border:0 none;} table { border-collapse:separate; border-spacing:0;} :focus { outline:0;} address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal;} caption, th { text-align:left;} h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal;} blockquote:before, blockquote:after, q:before, q:after { content:"";} span.hidden, .special_message { display:none;} legend.hidden { display:none;} label.hidden { display:inline; left:-9000px; position:absolute;} .nomargin { margin:0 !important;} .marg_top { margin: 15px 0 0 0; } .marg_bottom_right { margin: 0 10px 10px 0;} .tick { display: block; width: 15px; height: 35px; float:left; vertical-align:middle; background: url("/assets/images/core/icons.gif") no-repeat left -160px; } .hidden { display: none; } .show { /*display: block;*/ } .vert_mid { vertical-align:middle; } h3.handcursor { cursor: pointer; font-size: 1.6em !important; font-weight:normal; } h3.handcursor img { float: left; position:relative; margin: 2px 5px 0 0 ; } .smallprint{ font-size: 0.8em; color:#555; } /* CONTENT DIVIDERS */ .divider { display: block; border: 1px solid #AFD2ED; border-width:0 0 1px; line-height: 1px; margin-bottom: 15px; } /* POSITIONING */ .pabsolute { position:absolute; } .prelative { position:relative; } .clear { clear:both; height:0; line-height:0; visibility:hidden;} .fleft { float:left;} .fright { float:right;} .fcenter { margin: 0 auto; } /* Please note, parent element needs text-align:center; */ .block { display: block; } /* DATE STYLES */ .date { } /* CONDITIONALS */ *[style], pre { font-size:inherit !important; font-family:Arial, Helvetica, sans-serif !important;}/* override inline styles */ /* Latest Clearfix methods */ .clearfix:after, .subheading:after, dl:after { visibility: hidden; display: block; font-size:0; content:"."; clear: both; height:0; color: #fff; } * html .clearfix { height: 1%; } /* IE6 */ *:first-child+html .clearfix { display: inline-block; } /* IE7 */ #ie6 dl, #ie6 .subheading, #ie6 .prodlist dd, #ie6 .selectpop dd, #ie7 .clearfix, #ie7 dl, #ie7 .subheading{ display:inline-block;} .hidden { display: none; } .visible { display: block; } /* --------------------------------------------------------------------------------------------------------------------------------- 2) TYPOGRAPHY /* --------------------------------------------------------------------------------------------------------------------------------- */ a { color:#3E88C8; font-weight:normal; text-decoration:none; cursor:pointer;} a:hover { cursor:pointer; text-decoration:underline;} a:active { text-decoration:underline;} h1, h2, h3, h4, h5, h6, p { margin:0 0 12px 0;} p { line-height:1.4em; } h1 { font-size:1.95em; letter-spacing:-0.01em;color:#3876C4; font-weight:bold;} h2 { font-size:1.7em; color:#3E88C8; } h2 span { font-style:italic; display:block; } h3 { font-size:1.2em; color:#3E88C8; margin-bottom: 3px;font-weight:bold; } h4, h5, h6 { font-size:1.1em; font-weight:bold; margin-bottom:7px;} ol, ul { margin-left:20px;} #content ol { margin-left: 30px; margin-bottom: 20px; } li { margin-bottom:3px; width:auto;} input, select, textarea, optgroup { font:1em Arial, Helvetica, sans-serif; border: 1px solid #ccc;} input:focus, select:focus, textarea:focus { border-color: #3E87C8; } strong { font-weight:bold;} em { font-style:italic;} .uline { text-decoration: underline; } acronym { font-weight:bold;} .caps { text-transform:uppercase; } .bold { font-weight: bold; } .left { text-align:left; } .center { text-align:center; } .right { text-align:right; } .bluetext { font-weight:bold; color: #3573C1; } /* --------------------------------------------------------------------------------------------------------------------------------- 3) BUTTONS /* --------------------------------------------------------------------------------------------------------------------------------- */ /* DEFAULT BUTTONS */ a.button { display:block; color:#fff; text-align:center; padding:0 22px 0 5px; width:90px; height: 22px; line-height:22px; font-size:1.1em; font-weight:bold; background: #418ac9 url("/assets/images/core/buttons.gif") no-repeat left 0; } /* Default button based on more info width */ a.button span { width: 20px; height:100%; background: url("/assets/images/core/buttons.gif") no-repeat right 0; position:absolute; right:-3px; top:0; } a:hover.button { background: #317ab8 url("/assets/images/core/buttons.gif") no-repeat left -22px; text-decoration:none; } a:hover.button span { background: url("/assets/images/core/buttons.gif") no-repeat right -22px; height:22px; } a.button.selected { background: #317ab8 url("/assets/images/core/buttons.gif") no-repeat left -22px; text-decoration:none; cursor:default; } a.button.selected span { background: url("/assets/images/core/buttons.gif") no-repeat right -22px; height:22px; } a.purple_small { background-position: left -54px; background-color:#b38fc2; } a.purple_small span { background-position: right -54px; } a:hover.purple_small { background-position: left -76px; background-color:#a782b7; } a:hover.purple_small span { background-position: right -76px; } a.yellow_large { background-position: left -108px; background-color:#d99e24; text-align:center; margin:10px 0 0; width:100px; height: 29px; line-height:29px; font-size:1.2em; } a.yellow_large span { background-position: right -108px; width: 25px; height:29px !important; } a:hover.yellow_large { background-position: left -137px; background-color:#c08d23; } a:hover.yellow_large span { background-position: right -137px; } a.purple_large { background-position: left -244px; background-color:#b38fc2; text-align:center; margin:10px 0 0; width:100px; height: 29px; line-height:29px; font-size:1.2em; } a.purple_large span { background-position: right -244px; width: 25px; height:29px !important; } a:hover.purple_large { background-position: left -273px; background-color:#a782b7; } a:hover.purple_large span { background-position: right -273px; } a.blue_large { background-position: left -176px; background-color:#418ac9; text-align:center; margin:10px 0 0; width:100px; height: 29px; line-height:29px; font-size:1.2em; } a.blue_large span { background-position: right -176px; width: 25px; height:29px !important; } a:hover.blue_large { background-position: left -205px; } a:hover.blue_large span { background-position: right -205px; } a.blue_to_orange { background-position: left -312px; background-color:#093190; text-align:center; margin:10px 0 0; width:100px; height: 35px; line-height:35px; font-size:1.4em; } a.blue_to_orange span { background-position: right -312px; width: 25px; height:35px !important; } a:hover.blue_to_orange { background-position: left -347px; background-color:#cb8e06; } a:hover.blue_to_orange span { background-position: right -347px; } a.left_arrow { background-position: right -392px; background-color:#093190; padding:0 5px 0 15px; } a.left_arrow span { background-position: left -392px; position:absolute; left:0; top:0; } a:hover.left_arrow { background-position: right -414px; background-color:#cb8e06; } a:hover.left_arrow span { background-position: left -414px; } /* RELEVANT BUTTONS */ a.readmore { right:13px; } /* Small Readmore button */ a.readmore_content { width: 90px; } a.number { width: 20px; margin-right: 10px; right:13px; padding-right: 5px; text-align:center; } /* Small Readmore button */ a.number span { width: 5px; } a.readmore_large { width: 90px; } /* Large Readmore button */ a.emailus { width: 70px; right:13px; } a.findapet { position: absolute; right:9px; } a.moreinfo { right:3px; width:63px; font-size: 0.95em; } a.businessfinder { position: absolute; right:9px; bottom: 15px; text-align:center; width:90px; font-size: 0.95em; } /* Business Finder Button */ a.close { width: 50px; } a.arrow { padding-left: 10px; background: url("/assets/images/core/icons.gif") no-repeat -5px 0px; } a.mgm { width: 280px; margin-bottom: 15px; } a.get_address { position: absolute; top:-1px; left:100px; } a.get_address_double { position: absolute; top:-1px; left:170px; } a.nominate_now { width: 120px; line-height: 29px; } a.submit_payment { width: 135px; } a.submit { width: 80px !important; } a.setup_annual_pol { width: 215px; } a.sign_me_up { width: 215px; } a.validate_voucher { width: 120px; } /* --------------------------------------------------------------------------------------------------------------------------------- 4) PAGE STRUCTURE /* --------------------------------------------------------------------------------------------------------------------------------- */ /* Header */ #header { background:#fff url("/assets/images/core/xgradients.gif") repeat-x 0 0; color:#24A08C;} #header #innerheader { padding-left: 101px; height:77px; padding-top:25px; position:relative; text-align:center;} /* General header Logo */ #header a.logo { position:absolute; top:0; display:block; cursor:pointer; color:#3876C4; font-size: 1.0em; font-weight:bold; padding: 28px 0 0;} /* Dog header Logo */ #header a#doglogo{ width: 101px; height:74px; left:0; } #header a#doglogo span{ background: url("/assets/images/core/logos.gif") no-repeat top left; width:100%; height:100%; position:absolute; top:0; left:0; z-index:99; } /* Dog header Logo */ #header a#companylogo{ width: 164px; height: 39px; overflow:hidden; right:43px; top: 25px; } #header a#companylogo span{ background: url("/assets/images/core/logos.gif") no-repeat top right; width:100%; height:100%; position:absolute; top:0; left:0; z-index:99; } #header .message{ position: absolute; top:30px; left:105px; width:260px; text-align:left; line-height:1.3em; font-size: 0.9em;} /* Header Navigation */ #nav { background:#fff; background: url("/assets/images/core/xgradients.gif") repeat-x 0 0; height:31px; text-align:left; border: 1px solid #C0D8ED; border-width: 1px 0; z-index: 3000; } #nav dl { margin:0 auto; display:inline-block; padding-left: 2px; } #nav dd { display:inline; padding:0;} #nav a { background: url("/assets/images/core/xgradients.gif") repeat-x 0 -102px; color: #3573c0; padding:0 42px 0 42px; height:31px; line-height:31px; font-size:1.1em; margin:0 -1px 0 -2px; border:1px solid #DBE9F5; border-width:0 2px 0 0; /*display:-moz-inline-stack;*/ display:inline-block; white-space:nowrap; position:relative; cursor:pointer;} .ff2 #nav a{ /*display: -moz-inline-stack;*/ padding:10px 25px 8px 26px; } #nav a:hover { background-color:#4088C9; background-position:0 -134px; color:#fff; text-decoration:none; border-bottom: none;} #nav a:focus, #nav a:active, #nav a.selected, #nav a.selected:hover { color:#fff; background-color:#4088C9; background-position:0 -134px;} #nav #page1 a{ padding-left: 46px; } #nav #page6 a{ border-right: none; padding-right: 47px; } /* Page Layout */ /*EXTRA CSS -> look in css/columns for page layout widths*/ #content { background:#fff; display:block; position:relative; padding: 20px 0 10px;} #inner { display:block; overflow:hidden;} #left, #right { background:#fff; position:relative; width:165px; } #left { float:left; left:0px; z-index:98; width:190px; } #left .inner { padding:0;} #right { float:right; right:0px; z-index:99;} #right .inner { padding:0;} #centre { display:block; height:1%; position:relative; z-index:97; } #centre:after{ content:" "; clear:both; visibility:hidden; } #centre .inner { overflow:hidden; padding: 0 15px;} #ie6 #centre .inner{ padding:0; } /* Footer */ #footer { background:#fff; color:#3E88C8; clear:both; border-top: 3px solid #E2ECF7; display:block; padding:10px 10px; position:relative; overflow:hidden;} #footer .smallprint{ font-size: 0.9em; color:#B4B4B4; line-height:1.3em; } #footer .footer_nav{ list-style-type: none; margin:0 0 10px; padding:0; } #footer .footer_nav li{ float:left; position:relative; margin-right:5px; } #footer .footer_nav a{ font-size: 0.9em; } #footer .footer_nav a.selected{ text-decoration: underline; } #footer .footer_ver_logo{ float:right; position:relative; margin-top: -20px; } #footer #copyright { } #footer #copyright span { font-size:1.6em; } /* --------------------------------------------------------------------------------------------------------------------------------- 5) STYLING FOR FORMS /* --------------------------------------------------------------------------------------------------------------------------------- */ form { padding-bottom: 10px; position:relative; } form h3 { color:#3E88C8; font-weight:bold; padding-bottom: 3px; border-bottom: 1px solid #AFD2ED; } .str_line { position:relative; padding: 5px 0 5px; overflow:hidden; border-bottom: 1px dotted #e5e5e5; } * html .str_line { height: 1%; } .noborder { border:0; } .str_left, .str_right { float:left; position:relative; width: 38%; } .str_left { padding: 2px 0 0 0; width:30%; margin-right: 10px; } .str_left label { font-size: 1.0em; display:block; padding-left: 15px; } .str_right { width: 60%; position: relative; } .str_right input { width: 80%; padding: 2px; } /*.str_right input.error_red{ color:#cc0000; border: 1px solid #cc0000; padding: 3px; } .str_right div.error_red{ padding: 3px; background: #fff0f0; position: absolute; top:0; left:270px; width: 110px; }*/ .str_line textarea { width: 87%; padding: 2px; height:100px; } .str_right select { padding:2px;} .str_right select.error_red { padding:2px; } .str_right .btn { width: auto; } .str_right .input_small { width: 20%; } .str_right .input_radio { width: 15px; margin-right: 5px; border: 0; } .str_right .input_checkbox { width: 15px; margin-right: 5px; border: 0 !important; } .str_right .marg_left { margin-left: 20px; } .str_right .dayfield { width: 60px; } .str_right .monthfield { width: 60px; } .str_right .yearfield { width: 60px; } .str_right .postcode_field { width: 80px; position: absolute; top:0; left:0; text-transform:uppercase; z-index:5; } .str_right .addressbox { width: 82%; } /* Used for Horizontal radio options */ ul.radio_options { list-style-type: none !important; margin:0; } ul.radio_options li { float:left; position:relative; padding:0; margin-right: 15px;} /* Used for Vertical checkbox options */ ul.checkbox_options { list-style-type: none !important; margin:0; padding:0; } ul.checkbox_options li { } .req{ width:10px; height: 11px; position:relative; vertical-align:top; color:#8dc22f; font-weight:bold; font-size: 1.6em; display:inline-block; margin: 0 0 0 0; } .req span{ background: url("/assets/images/core/icons.gif") no-repeat -487px -1px; display:block; position:absolute; top:0; left:0; width: 100%; height:100%;} .str_line .req { width: 16px; position: absolute; top:2px; left:0;} form .req { height: 20px; } form h3 .req span { background-position: -487px 1px; } /* --------------------------------------------------------------------------------------------------------------------------------- 6) BOX MODEL WITH NAVIGATION /* --------------------------------------------------------------------------------------------------------------------------------- */ /* Box Model */ .box{ border: 1px solid #dbe9f5; position:relative; background:#FCFDFE url("/assets/images/core/box_bg.gif") repeat-x left bottom; padding: 6px; margin: 0 0 15px; } .box .inner{ padding: 6px; border: 2px solid #d1e1f1; border-width: 2px 0 0; } /* Box Title styling */ .box h2{ font-size: 1.1em; font-weight:bold; padding: 0; margin:0 0 5px; } /* Default list styling */ .box ul{ list-style-type:none; margin:0; padding:0; } .box li{ width:100%; margin:0; padding:0; border: 2px solid #ecf3fa; border-width: 0 0 3px; } .box li a{ display: block; padding: 10px 0 4px; } .box li a:hover{ color:#295B9B; text-decoration:none;} .box li a.selected{ color:#0200bf; text-decoration:underline; } /* Navigation styles */ .box .sub0{ } .box .sub0 li.first{ } .box .sub0 li.last{ } .box .sub0 li a{ background: url("/assets/images/core/icons.gif") no-repeat -5px 10px; padding-left: 10px; } /*.box .sub0 li .sub1{ display: none; } Hides the subnavigation from visibility */ /*.box .sub0 li.activate .sub1{ display:block;} Displays the subnavigation when li has activate class on it */ /* Sub level 1 */ .box .sub1 li{ border: none; } .box .sub1 li.first{ } .box .sub1 li.last{ } .box .sub1 li a{ background: url("/assets/images/core/icons.gif") no-repeat 5px 2px; padding: 3px 0 2px 20px; border: none; } .box .sub1 .last a{ padding-bottom: 4px; } /* Always place .last class on li */ /* Sub level 2 */ .box .sub2 li{ border: none; } .box .sub2 li.first{ } .box .sub2 li.last{ } .box .sub2 li a{ background: url("/assets/images/core/icons.gif") no-repeat 18px 2px; padding: 3px 0 2px 35px; border: none; } .box .sub2 li.last a{ padding-bottom: 4px; } /* Always place .last class on li */ /* Sidebox for the sub pages should have an id of #subnavigation*/ .box#sub_navigation{ padding-bottom: 55px; } /* RIGHT GLOBAL box model */ #right .box{ padding: 6px 0; } #right .box .inner{ padding: 6px; } #right .box h2{ font-size: 1.35em; padding: 0 6px 0; } /* CENTRE GLOBAL box model */ #centre .box{ padding-bottom: 20px; background-position: right bottom; } #centre .box .inner{ border: none; padding: 0 0 10px; } #centre .box h3{ font-size: 1.37em; margin:0; padding:0; } #centre .box h3 a{ font-weight: bold; } #centre .box h3 a:hover{ color:#295B9B; text-decoration:none; } #centre .box .image{ float:left; position:relative; margin: 0 10px 0 0; } #centre .box .image img{ display: block; } #centre .box .image:after{ content:" "; clear:both; visibility:hidden; } #centre .box .readmore{ right:25px; } #centre .box.small_inner{ } #centre .box.small_inner .image{ } #centre .box.small_inner .inner{ width: 61%; float: left; position:relative; overflow:visible; } #centre .box.small_inner .readmore{ top: 35px; } /* Remove the border from the #centre elements */ #centre .box li{ border: none; } #centre h1, #centre h2{ margin-bottom: 5px; } /* Date of Birth Box */ .box#dateofbirth{ position:relative; z-index:300; display:none; background: url("/assets/images/core/box_bg.gif") repeat-x bottom left; padding-bottom: 0; } .box#dateofbirth h4{ font-weight:bold; } .box#dateofbirth p{ margin:0; } .box#dateofbirth ul{ margin-left: 20px; list-style-type:disc } .box#dateofbirth li{ border: none; margin:0; padding:0; } /*.box#existcust{ position:relative; z-index:300; display:none; background: url("/assets/images/core/box_bg.gif") repeat-x bottom left; padding-bottom: 0; } .box#existcust h4{ font-weight:bold; } .box#existcust p{ margin:0; } .box#existcust ul{ margin-left: 20px; list-style-type:disc } .box#existcust li{ border: none; margin:0; padding:0; }*/ /* --------------------------------------------------------------------------------------------------------------------------------- 7) GENERAL COLUMN STYLES /* --------------------------------------------------------------------------------------------------------------------------------- */ /* Right column image and overlay style */ .column .image{ margin: 0 0 15px; position:relative; width:165px; height: 165px; } .column .image img{ display:block; } .column .image span{ background: url("/assets/images/core/image_overlay.png") no-repeat top left; position:absolute; left:0; display:block; width:100%; height:100%; } .column .image span.overlay_top{ top:0; } .column .image span.overlay_bottom{ background-position: bottom left; height: 15px; bottom:-1px; } .ie6 .column .image span{ background-image: url("/assets/images/core/image_overlay.gif"); } /* SPECIFIC HEIGHTS FOR DIFFERENT IMAGES */ .column .image#large{ height: 215px; } .column .image#ppm_frontcover{ height: 220px; } .column img{ margin: 0 auto; } /* Can be overwritten by putting #left/#right/#centre directly after .column but column is for all 3. e.g .column#left */ .column .phone{ display: block; color:#295B9B; font-size: 1.5em; font-weight:bold; margin: 6px 0; } #centre .phone{ color:#3E88C8; font-size: 1.3em; font-weight:bold; } /* Centre content area styles */ #centre ul{ margin-bottom: 20px; } #centre ul li{ margin-top: 7px; } #centre a{ text-decoration: underline; } #centre a:hover{ text-decoration:none; } #centre h1 a, #centre h2 a, #centre h3 a, #centre h4 a, #centre a.button{ text-decoration: none; } .contact_phone{ } .contact_phone .title{ font-size:1.0em; color:#000; font-weight:normal; margin: 0 0 5px; } .contact_phone .topmarg{ margin-top: 6px; } .contact_phone p{ color: #3E88C8; font-size:1.2em; margin:-7px 0; padding:0; font-weight:bold; } .contact_phone h2{ margin:-5px 0 0; padding:0; font-size: 1.8em; font-weight:bold; } #centre p { margin: 12px 0; line-height:1.4em; } #centre p, #centre li{ font-size: 1.05em; } /* CHOICES - Styles used on the choices page */ #choices #centre .box{ padding-bottom: 0; } #choices #centre .box h3{ margin-top: 25px; float:left; position:relative; } #choices #centre .box a.button{ margin-top: 23px; } /* Vet Cat Dropdown Styles for Vetawards 2010 page */ #vetcat #lay1, #vetcat #lay2, #vetcat #lay3, #vetcat #lay4{ display:none; margin-left:20px; } #vetcat h3{ margin-bottom: 5px; } #vetcat a { font-weight:bold; background: url(../images/core/icons.gif) no-repeat -4px 0; padding-left:12px; margin-left:10px; margin-bottom: 5px; } #vetcat a:hover { text-decoration:underline; color:#DBA925; } ul.normallist { list-style-type: disc; margin-left: 20px; } /* --------------------------------------------------------------------------------------------------------------------------------- 8) TABLES /* --------------------------------------------------------------------------------------------------------------------------------- */ table { width: 100%; border: 1px solid #8f9cbf; color: #3e88c8; font-size: 1.05em; margin-bottom: 15px !important; padding:0; margin:0; } table th { background: #7FB2DF url("/assets/images/core/table_backgrounds.gif") repeat-x top left; height:26px; line-height:16px; padding: 5px 5px; color:#fff; font-weight:bold; } table td { background: url("/assets/images/core/table_backgrounds.gif") repeat-x bottom left; vertical-align:top; padding: 7px 5px; border-bottom:1px solid #8f9cbf; } table td.left180 { width: 180px; } table td a { font-weight: bold; } table td a:hover { color:#E4A522; } table td a.selected { color:#E4A522; } table td.bottom { border-bottom: none; } table td.styled { background: #fff; } table td.dash { font-size: 1.7em !important; font-weight:bold; color:#B8CEE9; } /* SPECIFIC TABLES */ table.yellow th { background: #FAB320; color:#000; height: auto; line-height:15px; padding: 5px; } table.yellow .title { width: 25%; } /* --------------------------------------------------------------------------------------------------------------------------------- 8) ICONS /* --------------------------------------------------------------------------------------------------------------------------------- */ a.pdf { background: url("/assets/images/core/icons.gif") no-repeat left -265px; padding-left: 22px; line-height: 20px; } a.email { background: url("/assets/images/core/icons.gif") no-repeat left -286px; padding-left: 22px; line-height: 20px; } a.printer { background: url("/assets/images/core/icons.gif") no-repeat left -305px; padding-left: 22px; line-height: 20px; } /* --------------------------------------------------------------------------------------------------------------------------------- 9) NEED QUOTE PAGE /* --------------------------------------------------------------------------------------------------------------------------------- */ .orcall a.retrieve_quote{ float: left; position:relative; padding-left: 5px; padding-top: 5px; text-decoration:underline; } .orcall a.retrieve_quote .text{ padding:0; } .orcall a:hover.retrieve_quote{ text-decoration: none; } .orcall .text{ padding-top: 9px !important; display: block; float: left; position:relative; } /* NEED QUOTE PAGE - ADDED BY JON RAWLINS ON 17/06/2009 */ #needquote .needquoteimg{ float:right; position:relative; margin: 0 0 0 10px; } #needquote #content h1{ font-size: 2.7em; margin-bottom: 10px;} #needquote #content h2{ font-size: 1.5em; margin-bottom: 3px; } #needquote #content #callno{ font-size: 15px; color:#3775c2; } #needquote #content #smallprint{ font-size: 10px; color:#010101;} /* Quote box */ #needquote #quoteselector{ background: #64a3dc url("/assets/images/needquote/selectyourpet.gif") no-repeat; width: 500px; height:68px; position:relative; margin: 0 0 10px; } #needquote #quoteselector #selectpet_style{ padding: 10px 0 0 30px;} #needquote #quoteselector #selectpet_style label{ display:block; color:#fff; font-size: 1.2em; font-weight:bold; margin: 0 0 5px;} #needquote #quoteselector #selectpet_style select{ width:250px; padding: 2px; font-weight:bold;} /* Button */ #needquote #quoteselector #selectpet_style #getquote a{ position:absolute; cursor:pointer; top:6px; right: 15px; width:140px; height:41px; font-size: 14px; font-weight:bold; color:#fff; } #needquote #quoteselector #selectpet_style #getquote a.retrieve_quote{ top: 50px; width: 140px; height: auto; font-size:1.0em; font-weight:bold; padding:0; text-align:center; } #needquote #quoteselector #selectpet_style #getquote a span{ width:100%; height:100%; display:block; position:absolute; background: url("/assets/images/needquote/selectyourpet.gif") no-repeat -15px -92px; } #needquote #quoteselector #selectpet_style #getquote a:hover span{ background-position: -15px -160px; } #needquote #quoteselector .end_bg{ position:absolute; top:0; right:0; width: 10px; height:68px; background: url("/assets/images/needquote/selectyourpet.gif") no-repeat top right; padding:0; float:none;} /* Info box styling */ #needquote .box{ width:470px; height:158px; font-size: 0.9em; margin: 5px 0 10px; background: url("/assets/images/needquote/selectyourpet-box-bg.gif") repeat-x bottom left; float:left; position:relative; border: 2px solid #d5e2ee; } #needquote .box .inner{ padding: 5px;} #needquote .box h2{ font-size: 1.8em !important; font-weight:normal; } #needquote .box li, #needquote #infobox2 ol li{ border: none; } #needquote .box ul, #needquote .box ol{ font-size:1.1em; } #needquote #infobox1 { } * html #needquote #infobox1 { height: 180px; margin-top: 7px; } /* IE6 Conditional */ #needquote #infobox1 ul { margin: 0; padding:0; list-style-type:none; } #needquote #infobox1 li { background: url("/assets/images/needquote/selectyourpet.gif") no-repeat left -244px; width: 95%; padding-left: 20px; margin-bottom: 10px; color:#000000; } #needquote #infobox2 { float: right; position:relative; } #needquote #infobox2 ol { margin: 0 0 0 18px; list-style-type:decimal; } #needquote #infobox2 ol li { margin-bottom: 8px; color:#000000; width:auto;} #needquote #infobox2 ol li span { font-size: 0.8em !important; color:#3E88C8;} /* --------------------------------------------------------------------------------------------------------------------------------- 9) CUSTOMER STORIES PAGE /* --------------------------------------------------------------------------------------------------------------------------------- */ #cust_stories #centre .box{ width: 99%; position:relative; } .ie6 #cust_stories #centre .box{ width: 96%; } #cust_stories #centre .row_1, #cust_stories #centre .row_2{ padding-bottom:0 !important; } #cust_stories #centre .box .inner_box{ padding: 10px; margin:0 !important; padding-bottom:0 !important; } #cust_stories #centre .row_1, #cust_stories #content .row_2{ margin:0; background: #e9f2f9; } #cust_stories #centre .row_2{ background: none; } #cust_stories #centre .marg_top{ margin-top: 30px; } #cust_stories #centre .box .fleft{ float:left; position:relative; margin: 0 10px 0 0; } #cust_stories #centre .box .fleft.text{ width: 620px; } #cust_stories #centre .box h2{ margin: 0 0 10px; font-weight:bold;color: #fab320; font-size: 1.7em; } #cust_stories #centre .box h3{ width: 100%; margin-bottom: 8px; } #cust_stories #centre .box h3 span{ font-size: 13px !important; position:absolute; top:2px; right:4px; } #cust_stories #centre .box p{ margin:0 0 10px; } #cust_stories #centre .box ul{ list-style:none; } #cust_stories #centre .box li{ padding:0; border: 0; margin: 5px 0; } #cust_stories #centre .box li a{ padding:0; margin:0; color: #000; font-weight:bold; } #cust_stories #centre .box a.read_more{ font-weight: bold; } #cust_stories .legaltext { color:#B4B4B4; margin-bottom:0; margin-top:20px; font-size:0.9em; padding:0; } #cust_stories .story_of_the_month{ position: absolute; top:-17px; left:0; width: 100%; text-align:center; } #cust_stories .story_of_the_month img{ display: block; margin: 0 auto; } /* --------------------------------------------------------------------------------------------------------------------------------- 9) SPECIAL OFFERS DISPLAYED PAGE /* --------------------------------------------------------------------------------------------------------------------------------- */ #special_offers #centre .box{ width: 99%; position:relative; padding-bottom:0; } #special_offers #centre .box .inner_box{padding: 10px 10px 0;} #special_offers #centre .row_1, #special_offers #content .row_2{ margin:0; background: #e9f2f9; } #special_offers #centre .row_2{ background: none; } #special_offers #centre .box .fleft{ float:left; position:relative; margin: 0 10px 20px 0; width: 90px; text-align:center; } #special_offers #centre .box .fleft.text{ width:78%; text-align:left; } #special_offers #centre .box h2{ margin: 0 0 10px; font-weight:bold;color: #fab320; font-size: 1.7em; } #special_offers #centre .box h3{ width: 100%; margin: 0 0 7px; } #special_offers #centre .box h3 span{ font-size: 13px !important; position:absolute; top:12px; right:4px; } #special_offers #centre .box p{ margin:0 0 10px; } #special_offers #centre .box ul{ list-style:none; } #special_offers #centre .box li{ padding:0; border: 0; margin: 5px 0; } #special_offers #centre .box li a{ padding:0; margin:0; color: #000; font-weight:bold; } #special_offers #centre .box a.read_more{ font-weight: bold; } #special_offers_terms #centre h1{ margin-bottom: 10px; } /* --------------------------------------------------------------------------------------------------------------------------------- 9) SITEMAP /* --------------------------------------------------------------------------------------------------------------------------------- */ #sitemap .sitemap { width: 210px; margin-right: 15px; border: none; background: none; padding-bottom:0; } #sitemap .sitemap h2 { font-size: 1.7em; font-weight:normal; } #sitemap .sitemap li a { padding: 2px 0 3px 10px; background: url("/assets/images/core/icons.gif") no-repeat -5px 3px; } #sitemap .sitemap h2 a:hover { text-decoration: underline; } #sitemap .sitemap li { border: none; padding: 0 !important; } /* --------------------------------------------------------------------------------------------------------------------------------- 9) SPECIAL-OFFERS-DISPLAYED /* --------------------------------------------------------------------------------------------------------------------------------- */ #rewards #centre .box{ background: none; border: none; margin-bottom: 0;} #rewards #centre .box .fleft{ float:left; position:relative; margin: 0 10px 20px 0; width: 10%; } #rewards #centre .box .fright{ float:right; position:relative; width: 83%; } #rewards #centre .box h3{ margin-bottom: 5px; } /* --------------------------------------------------------------------------------------------------------------------------------- 10) FACTSHEETS /* --------------------------------------------------------------------------------------------------------------------------------- */ #factsheet { } #factsheet .box .image { margin-bottom: 20px; } #factsheet .box .image img { width: 64px; height: 64px; } /* ------------------------------------------------------------------------------------------------------------------------------------------------ 11) PRETTY PHOTO STYLING /* ------------------------------------------------------------------------------------------------------------------------------------------------ */ div.light_rounded .pp_top .pp_left { background: url(../images/prettyPhoto/light_rounded/sprite.png) -88px -53px no-repeat; } /* Top left corner */ div.light_rounded .pp_top .pp_middle { background: #fff; } /* Top pattern/color */ div.light_rounded .pp_top .pp_right { background: url(../images/prettyPhoto/light_rounded/sprite.png) -110px -53px no-repeat; } /* Top right corner */ div.light_rounded .pp_content { background-color: #fff; } /* Content background */ div.light_rounded .pp_content a.pp_next:hover { background: url(../images/prettyPhoto/light_rounded/btnNext.png) center right no-repeat; cursor: pointer; } /* Next button */ div.light_rounded .pp_content a.pp_previous:hover { background: url(../images/prettyPhoto/light_rounded/btnPrevious.png) center left no-repeat; cursor: pointer; } /* Previous button */ div.light_rounded .pp_content a.pp_expand { background: url(../images/prettyPhoto/light_rounded/sprite.png) -31px -26px no-repeat; cursor: pointer; } /* Expand button */ div.light_rounded .pp_content a.pp_expand:hover { background: url(../images/prettyPhoto/light_rounded/sprite.png) -31px -47px no-repeat; cursor: pointer; } /* Expand button hover */ div.light_rounded .pp_content a.pp_contract { background: url(../images/prettyPhoto/light_rounded/sprite.png) 0 -26px no-repeat; cursor: pointer; } /* Contract button */ div.light_rounded .pp_content a.pp_contract:hover { background: url(../images/prettyPhoto/light_rounded/sprite.png) 0 -47px no-repeat; cursor: pointer; } /* Contract button hover */ div.light_rounded .pp_content a.pp_close { width: 75px; height: 22px; background: url(../images/prettyPhoto/light_rounded/sprite.png) -1px -1px no-repeat; cursor: pointer; } /* Close button */ div.light_rounded .pp_content .pp_details .pp_nav a.pp_arrow_previous { background: url(../images/prettyPhoto/light_rounded/sprite.png) 0 -71px no-repeat; } /* The previous arrow in the bottom nav */ div.light_rounded .pp_content .pp_details .pp_nav a.pp_arrow_previous.disabled { background-position: 0 -87px; cursor: default; } div.light_rounded .pp_content .pp_details .pp_nav a.pp_arrow_next { background: url(../images/prettyPhoto/light_rounded/sprite.png) -22px -71px no-repeat; } /* The next arrow in the bottom nav */ div.light_rounded .pp_content .pp_details .pp_nav a.pp_arrow_next.disabled { background-position: -22px -87px; cursor: default; } div.light_rounded .pp_bottom .pp_left { background: url(../images/prettyPhoto/light_rounded/sprite.png) -88px -80px no-repeat; } /* Bottom left corner */ div.light_rounded .pp_bottom .pp_middle { background: #fff; } /* Bottom pattern/color */ div.light_rounded .pp_bottom .pp_right { background: url(../images/prettyPhoto/light_rounded/sprite.png) -110px -80px no-repeat; } /* Bottom right corner */ div.light_rounded .pp_loaderIcon { background: url(../images/prettyPhoto/light_rounded/loader.gif) center center no-repeat; } /* Loader icon */ /* ------------------------------------------------------------------------ DO NOT CHANGE ------------------------------------------------------------------------- */ div.pp_pic_holder a:focus { outline:none; } div.pp_overlay { background: #000; position: absolute; top: 0; left: 0; z-index: 9500; width: 100%; } div.pp_pic_holder { position: absolute; z-index: 10000; width: 100px; } div.pp_pic_holder .pp_top { position: relative; height: 20px; } * html div.pp_pic_holder .pp_top { padding: 0 20px; } div.pp_pic_holder .pp_top .pp_left { position: absolute; left: 0; width: 20px; height: 20px; } div.pp_pic_holder .pp_top .pp_middle { position: absolute; left: 20px; right: 20px; height: 20px; } * html div.pp_pic_holder .pp_top .pp_middle { position: static; left: 0; } div.pp_pic_holder .pp_top .pp_right { position: absolute; top: 0; left: auto; right: 0; width: 20px; height: 20px; } div.pp_pic_holder .pp_content { position: relative; text-align: left; width: 100%; height: 40px; } div.pp_pic_holder .pp_content .pp_details { display: none; margin: 10px 15px 2px 20px; } div.pp_pic_holder .pp_content .pp_details p.pp_description { display: none; float: left; margin: 0; } div.pp_pic_holder .pp_content .pp_details .pp_nav { float: left; margin: 3px 0 0 0; } div.pp_pic_holder .pp_content .pp_details .pp_nav p { float: left; margin: 2px 4px; } div.pp_pic_holder .pp_content .pp_details .pp_nav a.pp_arrow_previous, div.pp_pic_holder .pp_content .pp_details .pp_nav a.pp_arrow_next { float: left; display: block; width: 14px; height: 15px; overflow: hidden; text-indent: -10000px; margin-top: 3px; } div.pp_pic_holder .pp_content div.pp_hoverContainer { position: absolute; z-index: 2000; top: 0; left: 0; width: 100%; } div.pp_pic_holder .pp_content a.pp_next { display: block; float: right; text-indent: -10000px; width: 49%; height: 100%; background: url(../images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat; } div.pp_pic_holder .pp_content a.pp_previous { display: block; float: left; text-indent: -10000px; width: 49%; height: 100%; background: url(../images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat; } div.pp_pic_holder .pp_content a.pp_expand, div.pp_pic_holder .pp_content a.pp_contract { position: absolute; z-index: 20000; top: 10px; right: 30px; cursor: pointer; display: none; text-indent: -10000px; width: 20px; height: 20px; } div.pp_pic_holder .pp_content a.pp_close { float: right; display: block; text-indent: -10000px; } div.pp_pic_holder .pp_bottom { position: relative; height: 20px; } * html div.pp_pic_holder .pp_bottom { padding: 0 20px; } div.pp_pic_holder .pp_bottom .pp_left { position: absolute; left: 0; width: 20px; height: 20px; } div.pp_pic_holder .pp_bottom .pp_middle { position: absolute; left: 20px; right: 20px; height: 20px; } * html div.pp_pic_holder .pp_bottom .pp_middle { position: static; left: 0; } div.pp_pic_holder .pp_bottom .pp_right { position: absolute; top: 0; left: auto; right: 0; width: 20px; height: 20px; } div.pp_pic_holder .pp_loaderIcon { display: none; position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -12px; width: 24px; height: 24px; } div.pp_pic_holder #pp_full_res { display: block; margin: 0 auto; width: 100%; text-align: center; } div.pp_pic_holder #pp_full_res object, div.pp_pic_holder #pp_full_res embed { visibility: hidden; } div.ppt { display: none; position: absolute; top: 0; left: 0; z-index: 9999; color: #fff; font-size: 17px; } /* ------------------------------------------------------------------------ Miscellaneous ------------------------------------------------------------------------- */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* ------------------------------------------------------------------------------------------------------------------------------------------------ END PRETTY PHOTO CSS --------------------------------------------------------------------------------------------------------------------------------------------------- */