/* USE: Mazda website AUTHOR: Syzygy UK Limited DATE: 03/2008 */ /* S01. GLOBAL ELEMENT DECLARATIONS */ body { font: 0.75em Arial, Helvetica, Verdana, Geneva, sans-serif; color: #8F9498; margin: 0 auto; padding: 0; /* background: transparent url(../.files/placeholders/backgrounds/generic.jpg) no-repeat 0 0;*/ } * { margin:0; padding:0; } p { margin-bottom: 1.3em; color: #8f9498; font-size: 0.9em; } img, fieldset { border: 0;} a { color: #006cb8;} a:active, a:focus {outline: 0; } a:hover { color: #006cb8; } hr { display: block; height: 1px; background-color: #C2D6D6; color: #C2D6D6; border: 0; padding: 0; margin: 1em 0;} blockquote { margin: 0 3em 1.5em 3em; font-size: 1.1em;} .clear { display: block; clear: both; height: 0; font-size: 0; margin:0; padding:0; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size:0; } * html .clearfix { height: 0%;} /* S02. CORE LAYOUT ELEMENTS */ #mainContainer { width: 800px; margin: 0 0 3em 12px;} #mainContainer.wide { width: 930px; margin: 0 0 3em 12px;} /* with 660px wide hero */ #leftColumn { float:left; width: 256px; margin:0px 0px 0px 0px;} #leftSubNav { margin-top: 15px; line-height: 1.3em;} * html #leftSubNav p { text-indent: 2px } /* Section introduction section copy fix for IE6 */ #mainContainer #contentBox { float:left; clear:none; width: 504px; margin:0px;} #mainContainer.wide #contentBox { float:left; width: 674px; } #viBranding { height: 232px; position:absolute; top:115px; left:0px;} #viBranding a { background: url(../img/mazda_logo_vi.png) top left no-repeat; height:203px; width:199px; cursor:pointer; display:block; } //* html #viBranding img { behavior: url(../Javascript/iepngfix.htc); } /* Hero box */ #mainContainer .heroBox { width: 490px; border: 7px solid #fff; border-bottom: none; background-color: #fff;} #mainContainer .heroBox.noBorder { width: 490px; padding: 7px 7px 0 7px; border: none; background-color:transparent; min-height: 255px} #mainContainer.wide .heroBox { width: 660px; border: 7px solid #fff; border-bottom: none; background-color:#fff } #mainContainer.wide .heroBox.noBorder { width: 660px; padding: 7px 7px 0 7px; border: none; background-color:transparent; } .overlayFlash { margin: -60px 0 0 -7px; z-index: 10} *html .overlayFlash { margin: -73px 0 0 125px!important; position: relative; z-index: 10} /* Dealer templates */ #contentBoxDealers { float:left; width: 504px; } #contentBoxDealers .content { margin: 0 7px; padding: 15px 20px; background-color:#F3F8F8; } #contentBoxDealers .heroBox { background-color:#F3F8F8; text-align: center; } #contentBoxDealers .heroBox div { margin:0; padding:0} #contentBoxDealers .heroBox .arrows { background-color: #E0EBEB;} #contentBoxDealers .heroBox .map { border: 5px solid #C2D6D6; } /* S03. GENERIC CONTENT STYLE */ #content { padding:0px 7px 0 17px; margin:13px 0px 0px 0px; line-height: 1.3em; } #leftSubNav h1, #homeContent .intro h1 { padding: 0 0 12px 0; color:#006cb8; font-family: Arial, Helvetica, sans-serif; font-size: 1.8em; font-weight: lighter; letter-spacing: 2px; line-height: 1em; font-style:italic} h2 { padding: 0 0 0.6em 0; color:#006cb8; font-size: 1.3em; font-weight: bold; line-height: 1.3em; display:block; } h3 { margin:0; padding: 0 0 0.8em 0; color:#006cb8; font-size: 1.1em; font-weight: bold; } h4 { font-size: 0.9em; color:#006cb8; font-weight: bold; padding-bottom: 0.4em; } h4 a { font-size: 1.1em; text-decoration: none; } .landing h3, .bodyStyle h3 { padding: 0;} .disclaimer { color: #8f9498; padding: 0.5em 0; font-size: 10px !important; } #mainContainer .flashMessage { position: absolute; left: 780px; top: 340px; width: 250px; } #mainContainer.wide .flashMessage { position: absolute; left: 950px; top: 340px; width: 250px; } #zzNoFlash { position: absolute; left: 150px; top: 240px; color: #fff; font-size:1.2em} #zzNoFlash a { color: #fff} .imgBorder img { border: 1px solid #2481A0; } #content ul { margin: 0 0 1.5em 1.3em; list-style-type: square; } ul.indent, ul.indent ul { margin-left: 3em !important; } #content ol { margin: 0 0 1.5em 2em; } #content li { padding-bottom: 0.5em; font-size:0.9em; } #content li li { font-size: 1em; } #content ul li ul, #content ol li ul { margin-top: 15px; padding-left: 1em; list-style-type: disc; } #content table li, #content li p { font-size: 1em; } * html #content iframe { width: 480px !important; } .pullLeft { float: left; margin: 0 1em 1em 0; } .pullRight { float: right; margin: 0 0 1em 1em ;} /* S04. CONTENT LINKS WITH ICONS/ARROWS */ .next, a.next, .back, .back a { padding:0 0 0 6px; margin-top:0.3em; color: #006cb8; font-size: 0.9em; text-decoration: none; font-weight: bold; line-height: normal } p .next, p a.next, p .back, p .back a { font-size: 1em; } .next, a.next { background: transparent url(../img/btn_next.gif) no-repeat 0 0.45em;} .back, a.back { background: transparent url(../img/btn_back.gif) no-repeat 0 0.35em;} a.close { text-decoration: none; font-weight: bold; padding: 0 18px 5px 0; background: url(../img/icon_close.gif) no-repeat 100% 0; } .next a:hover, a:hover.next, .top a:hover, a:hover.top, .back a:hover, a:hover.back { color:#006cb8; } .listnav { list-style-type: none!important; margin:0 0 1.3em 0!important; padding:0!important; } .listnav li { margin:0; padding: 0 0 0.2em 6px!important; background: transparent url(../img/btn_next.gif) no-repeat 0 0.35em; } .listnav a { color: #006cb8; text-decoration: none; font-weight: bold; } ul.iconsIndex { list-style-type: none; margin:0 0 1.3em 0; padding:0; font-size: 0.9em;} ul.iconsIndex img { vertical-align: middle; margin-bottom: 2px} /* FAQ drop-down links, 3 different styles: */ div.js_collapsed { display: none; } div.js_expanded { display: block; } ul#list { list-style-type: none; margin:0 0 2em 0} ul#list li { margin:0; padding:0 0 0.5em 0} ul#list li a.next { font-size:1em;} ul#list li a { cursor:pointer; } ul#list li div { padding: 3px 0 0 20px; } /*Default: */ ul#list li a.toggle { padding: 0 0 0 20px; background: url(../img/btn_show_collapsed.gif) no-repeat 0 .2em; text-decoration: none; font-weight:bold; color: #006CB8; line-height:normal; } ul#list li a.open_vacancy { padding: 0 0 0 20px; background: url(../img/btn_show_expanded.gif) no-repeat 0 .2em; text-decoration: none; font-weight:bold; color: #006CB8; line-height:normal; } ul#list li a.js_collapsed { padding: 0 0 0 20px; background: url(../img/btn_show_collapsed.gif) no-repeat 0 .2em; } /* ZZ+ */ ul#list li a.zzplus {} /* Disclaimer */ ul#list li a.disclaimer { font-weight: normal; color: #8F9498; } /* S05. RE-USABLE COMPONENTS */ .pullBoxRight { float: right; margin:0; padding:0; width: 145px} .pullBoxRight #promoBox { margin-bottom: -1em } .pullBoxRight ul.keyFeatures { /*float: none;*/ } /* Promotions on the right side */ #promoBox { float: right; width: 125px; padding: 0; margin: 3em 0 2em 10px; } #promoBox ul { list-style-type:none; margin:0; padding:0; line-height: normal;} #promoBox li { margin:0; padding: 0; border-bottom: 1px solid #fff; background-color: #006cb8; color: #FFF; } #promoBox li a { font-weight: bold; text-decoration: none; color: #FFF; } #promoBox li a.ctalink { background: transparent url(../img/btn_next_contextual.gif) no-repeat 5px 0.85em; display:block; margin:0; padding: 4px 5px 4px 10px; } #promoBox li span { display:block; padding: 0 5px 5px 9px!important; font-size: 0.8em; font-weight: bold; } #promoBox li.promoImg { padding: 0!important; margin-top: 1px!important; } #promoBox li.promoImg img { margin: 0 0 -3px 0; padding:0 } #promoBox li.promoImg a.ctalink { padding: 2px 2px 2px 10px; background: transparent url(../img/btn_next_contextual.gif) no-repeat 5px 0.6em; } /* Default colour: light blue (if no colour class specified) */ /* Medium blue */ #promoBox li.promoImg.medBlue { background-color: #1E1D3D} #promoBox li.promoImg.medBlue a.ctalink { color: #fff} #promoBox li.promoImg.medBlue span { color: #a1e8ff} #promoBox li.promoImg.medBlue a.ctalink { background-image: url(../img/btn_next_contextual.gif) } /* Dark red */ #promoBox li.promoImg.darkRed { background-color: #741b09} #promoBox li.promoImg.darkRed a.ctalink { color: #fff} #promoBox li.promoImg.darkRed span { color: #af8981} #promoBox li.promoImg.darkRed a.ctalink { background-image: url(../img/btn_next_contextual.gif) } /* Purple */ #promoBox li.promoImg.purple { background-color: #70147A} #promoBox li.promoImg.purple a.ctalink { color: #fff} #promoBox li.promoImg.purple span { color: #b687bb} #promoBox li.promoImg.purple a.ctalink { background-image: url(../img/btn_next_contextual.gif) } /* Key Featurs: click to enlarge */ #content ul.keyFeatures { list-style-type:none; margin: 3em 0 1.3em 20px; padding: 0; float: right} #content ul.keyFeatures li { display:block; clear:left; position: relative;} #content ul.keyFeatures li img { display:block; } #content ul.keyFeatures li a.next { float:left; font-size:1em; line-height: 1.1em; padding:0 0 10px 6px; background: transparent url(../img/btn_next.gif) no-repeat 0 0.5em;} #popupContainer .feature { margin-bottom: 10px } #popupContainer .pullLeft { margin-left: 10px } #popupContainer .pullRight { margin-right: 10px } #popupContainer a.next { padding: 0 5px 0 0; background: transparent url(../img/btn_next.gif) no-repeat 100% 0.5em; } .pagination { clear: both; margin: 2em 0 15px 0; padding: 3px 0; line-height: normal; border-top: 1px solid #00a6ec; border-bottom: 1px solid #00a6ec; width: 100%} .pagination a { font-weight: bold; text-decoration: none} .pagination ul { list-style-type: none!important; margin:0!important; padding:0.5em 0 0 0!important; } .pagination li { float: left} .pagination li a { padding: 0 3px; text-decoration: underline} .pagination li.btn { float: right} .pagination li.btn a{ text-decoration: none; padding-left: 10px} .pagination .selected { color: #333; font-weight: bold} .pagination select { margin: 2px 3px} /* generic table */ table.generic { display: inline-table; border-collapse: collapse; margin-bottom:1.5em; width:100%; clear:both; color:#666; font-size: 0.9em; } table.generic th { border: 2px solid #fff; font-weight: bold; padding: 5px; background-color: #E0EAEB; } table.generic th span { font-size: 0.9em; } table.generic td { border: 2px solid #fff; padding: 4px 5px; vertical-align: top; background-color:#F5F9F9;} table.generic img { margin: 5px} /* Specs table */ table.specs tr { vertical-align:top} table.specs { display: inline-table; position: relative; border-collapse: collapse; border-spacing: 0; margin: 0 0 15px 0; width:100%; font-size: 0.9em; } table.specs th { border: 2px solid #fff; font-weight: bold; padding: 5px; background-color: #E0EAEB; color:#333; } table.specs td { border: 2px solid #fff; padding: 3px 5px; background-color: #F2F7F7; color:#333; } table.specs td.center { text-align: center} /* Auto width table */ table.auto tr { vertical-align:top} table.auto { display: inline-table; border-collapse: collapse; border-spacing: 0; margin: 0 0 15px 0; font-size: 0.9em; width: 340px;} table.auto th { border: 2px solid #fff; font-weight: bold; padding: 5px; background-color: #E0EAEB; color:#333; } table.auto td { border: 2px solid #fff; padding: 3px 5px; background-color: #F2F7F7; color:#333; } table.auto td.center { text-align: center} /* Page specific style */ .row { clear:both;} ol.indexPage { width:100%; margin:0!important; padding:0!important; list-style-type: none; line-height:normal;} .indexPage li { float:left; clear:none; width: 48%; margin: 0 5px 1.5em 0; padding:0;} .indexPage li img { float:left; margin: 0 7px 3px 0; } .indexPage li a { text-decoration: none} .indexPage li br { height: 0; font-size: 0; margin:0; padding:0; } .indexPage h3 { font-size: 1em; /*color: #666; font-weight: bold; padding: 0 0 0.2em 0*/} .indexPage ul.links { list-style-type: none!important; margin:0!important; padding:0!important; float: left; width: 150px; } .indexPage ul.links li { padding: 0 0 0 6px!important; margin:0; background: transparent url(../img/btn_next.gif) no-repeat 0 0.35em; width: 147px; } .indexPage ul.links li a { text-decoration: none; font-weight: bold; } ol.overviewPage { width:100%; margin:0 0 1em 0!important; padding:0!important; list-style-type: none;} .overviewPage li { float:left; width: 32%; margin:0 0 1em 0; padding:0 5px 0 0; } .overviewPage li img{ display:block; margin-bottom: 0.3em} .overviewPage li a { font-weight:bold; line-height: normal; text-decoration: none} ol.gallery { width:100%; margin:0 0 1em 0!important; padding:0!important; list-style-type: none;} .gallery li { float:left; width: 120px; margin:0 0 1em 0; padding:0; } .gallery li h3 { padding-bottom: 0.3em; font-size: 1em; font-weight:bold} .gallery li img { display:block; margin-bottom: 0.2em; width: 105px; } .gallery li a { font-size:0.9em; font-weight:bold; line-height: normal; text-decoration: none} .gallery ul { margin:0!important; padding:0!important; } .gallery li li { float:none; margin:0; padding:0!important; list-style-type: none; } .gallery li li a { background: transparent url(../img/btn_next.gif) no-repeat 0 0.35em; padding: 0 0 0 6px;} #content ol.imageOverview { list-style: none; margin: 0; } .imageOverview li { position: relative; margin-bottom: 4px; } .imageOverview a { text-decoration: none; display: block; position: relative; } .imageOverview a span { position: absolute; top: 1em; left: 0; font-size: 1em; cursor: pointer; } .imageOverview span { position: absolute; top: 2.5em; left: 0; } /* Movies */ .media { float: right; padding: 0; margin: 0 0 2.5em 20px; width: 180px;} .media dt { padding: 6px 5px; margin: 0 0 1px 0; background-color:#E0EAEB; color:#000; font-size: 0.9em;} .media dd { padding: 7px 5px 7px 35px; margin: 0 0 1px 0; background-color:#F2F7F7;} .media p { color:#0995DD; font-size: 1.1em; } .media a, .mediaUK a { text-decoration: none; font-weight:bold; font-size:0.9em;} .media dd.wmp, .mediaUK dd.wmp { background: #F2F7F7 url(../img/icon_mediaplayer.gif) no-repeat 5px 2px; } .media dd.flash, .mediaUK dd.flash { background: #F2F7F7 url(../img/icon_flash.gif) no-repeat 8px 4px; } .media dd.quickTime, .mediaUK dd.quickTime { background: #F2F7F7 url(../img/icon_quicktime.gif) no-repeat 8px 4px; } table.movies { border-collapse: collapse; border-spacing: 0; text-align:left; clear:both; width:480px} table.movies th { margin:0; padding: 7px 5px; background-color: #E0EAEB; vertical-align: top; font-weight: normal; border: 1px solid #fff; font-size:0.9em; color:#333} table.movies td { margin:0; padding: 5px; background-color: #F2F7F7; vertical-align: top; border: 1px solid #fff; } table.movies a { font-size:0.9em} table.movies h3 { padding-bottom:0.3em} table.movies strong { color: #006CB8} table.movies .intro img { padding: 0; margin:0 0 0 -5px} table.movies .intro td { background-color: #fff;} table.movies .intro td p{ margin-bottom:5px} table.movies td.gap { background-color: #fff; height: 30px;} .movieIntro { /*color:#0995DD; font-size: 1.1em;*/ } /* Movies - UK */ .mediaUK { padding: 0; margin: 0 0 2em 0; background-color:#F2F7F7; width:100% } .mediaUK dl { background-color:#F2F7F7; margin:0; padding: 0; } .mediaUK dt { padding: 5px 5px 5px 10px; margin: 0; background-color:#F2F7F7; color:#666; } .mediaUK dd { float: left; padding: 7px 20px 10px 35px; margin: 0;} .mediaUK p { padding: 7px 0 7px 10px; margin:0; color:#999; font-weight: bold; color:#0995DD; border-bottom: 3px solid #fff; } ul#movies_menu { margin:0; padding:0; list-style-type: none} #movies_menu a { text-decoration: none;display:block; padding: 7px 0 7px 10px; color:#999; font-weight: bold } #movies_menu a.mazda2 { background: #f2f7f7 url(../img/movies/movies_mazda2_off.jpg) no-repeat right;} #movies_menu a.mazda3 { background: #f2f7f7 url(../img/movies/movies_mazda3_off.jpg) no-repeat right;} #movies_menu a.mazda5 { background: #f2f7f7 url(../img/movies/movies_mazda5_off.jpg) no-repeat right;} #movies_menu a.mazda6 { background: #f2f7f7 url(../img/movies/movies_mazda6_off.jpg) no-repeat right;} #movies_menu a.mx5 { background: #f2f7f7 url(../img/movies/movies_mx5_off.jpg) no-repeat right;} #movies_menu a.rx8 { background: #f2f7f7 url(../img/movies/movies_rx8_off.jpg) no-repeat right;} #movies_menu a.cx7 { background: #f2f7f7 url(../img/movies/movies_cx7_off.jpg) no-repeat right;} #movies_menu a.bt50 { background: #f2f7f7 url(../img/movies/movies_bt50_off.jpg) no-repeat right;} #movies_menu a.brand { background: #f2f7f7 url(../img/movies/movies_brand_off.jpg) no-repeat right;} #movies_menu a:hover { color:#0099cc; } #movies_menu a.mazda2:hover, .mediaUK p.mazda2 { background: #f2f7f7 url(../img/movies/movies_mazda2_on.jpg) no-repeat right;} #movies_menu a.mazda3:hover, .mediaUK p.mazda3 { background: #f2f7f7 url(../img/movies/movies_mazda3_on.jpg) no-repeat right;} #movies_menu a.mazda5:hover, .mediaUK p.mazda5 { background: #f2f7f7 url(../img/movies/movies_mazda5_on.jpg) no-repeat right;} #movies_menu a.mazda6:hover, .mediaUK p.mazda6 { background: #f2f7f7 url(../img/movies/movies_mazda6_on.jpg) no-repeat right;} #movies_menu a.mx5:hover, .mediaUK p.mx5 { background: #f2f7f7 url(../img/movies/movies_mx5_on.jpg) no-repeat right;} #movies_menu a.rx8:hover, .mediaUK p.rx8 { background: #f2f7f7 url(../img/movies/movies_rx8_on.jpg) no-repeat right;} #movies_menu a.cx7:hover, .mediaUK p.cx7 { background: #f2f7f7 url(../img/movies/movies_cx7_on.jpg) no-repeat right;} #movies_menu a.bt50:hover, .mediaUK p.bt50 { background: #f2f7f7 url(../img/movies/movies_bt50_on.jpg) no-repeat right;} #movies_menu a.brand:hover, .mediaUK p.brand { background: #f2f7f7 url(../img/movies/movies_brand_on.jpg) no-repeat right;} /* list of all models - thumbs */ ol.modelList { width:100%; margin:0 0 1.3em 0!important; padding:0!important; list-style-type: none; font-size: 1em; } .modelList li { float:left; width: 118px; margin:0 2px 1em 0; padding:0; text-align: center; background: #E6EFEF url(../img/index_empty.jpg) repeat-x 0 0; } .modelList li img { display:block; margin: 0 auto 2px auto; text-align: center; } .modelList li a { font-weight:bold; color: #336566; text-decoration: none; } .row3.modelList li {width: 158px;} /* 3 models in one row */ .row5.modelList li {width: 94px;} /* 5 models in one row */ * html .modelList li {width: 117px;} /* 4 models on IE6 */ /* News, press, events, accessories, promotions */ ol.items { margin:0 0 1.3em 0!important; padding:0!important; list-style-type: none;} .items li { width: auto; /*clear: both;*/ margin:0 0 1em 0; padding:0 0 1.5em 0!important; border-bottom: 1px solid #E0EAEB; min-height:65px; } *html .items li { height:65px; } .items li h3 { padding-bottom:0.2em; margin:0} .items li h3 span { font-weight:normal; color:#999; font-size:0.85em; line-height: 1.8em;} .items li p { margin-bottom: 0.7em; font-size: 1em; } .items li p a.next { margin-top: 0.5em; display:inline-block; } .items .last { border: none} .items.imgRight img { float:right; margin: 0 0 5px 1em;} .items.imgLeft img { float:left; margin: 0 1em 5px 0;} #content .items ul { margin-bottom:0.5em; padding-bottom:0; list-style-type: square; } #content .items ul li { margin-bottom:0; padding-bottom:0!important; border:none!important; min-height:1em; } *html #content .items ul { position: relative; top: 0.5em; } *+html #content .items ul { position: relative; top: 0.5em; } *html #content .items ul li { position: relative; top: -0.5em; vertical-align: top; height:1em; } *+html #content .items ul li { position: relative; top: -0.5em; vertical-align: top; } .newsIntro { margin-bottom:1.5em; } #newsSearch { float: right; width: 160px; padding: 5px; margin: 0 0 2em 2em; background-color: #E5F5FA; border: 1px solid #B2CCCC} #newsSearch h3 { background-color: #B2CCCC; color:#386963; margin: -5px -5px 10px -5px; padding: 5px; font-weight: bold; font-size: 1em } #newsSearch label { color: #386963 } #newsSearch p { margin-bottom: 0; } #newsSearch .inputText { width: 97%; margin: 2px 0 8px 0; } #newsSearch .formSelect { width: 99%; margin: 2px 0 8px 0; padding: 1px 2px; } #newsSearch .btnGo { float: right; text-align: right; font-size: 0.9em; padding: 0 6px 0 0; margin: 0; border: none; background-color: transparent; color: #0995DD; font-weight: bold; background: transparent url(../img/btn_next.gif) no-repeat 100% 0.5em;} /* Homepage */ #modelrange { width: 753px; height:80px; margin: 5px 0 15px 0 } #homeContent .intro { float:left; width: 256px; } #homeContent #content { margin:0 0 0 7px; padding:0; float: left; width: 500px; } #homeContent .homePromos { margin: 0; color: #8f9498;} #homeContent .homePromos p { margin-bottom: 0.2em; font-size: 1em; } #homeContent .homePromos ol { margin:0; padding:0; list-style-type:none} #homeContent .homePromos ol li {width: 150px; float:left; } #homeContent .homePromos ol li.middle { margin: 0 20px} #homeContent .homePromos ol li img { margin-bottom: 3px} #homeContent .homePromos ol li h3 { font-size: 1em; font-weight: bold; padding-bottom: 3px; line-height: normal; } #homeContent .homePromos ol li a { font: 0.9em; } /* Homepage UK promotions */ ul#homepage_promos { margin: 0; margin:0; padding:0; list-style-type:none; } ul#homepage_promos li { width: 150px; float:left; } ul#homepage_promos li.second { margin: 0 20px} ul#homepage_promos li a img { vertical-align: bottom; cursor: pointer;} /* Collapsing specs pages */ #content.contentpanels #promoBox { margin-bottom: 0.5em; } #content.contentpanels h3 { font-size: 1.2em; clear: both; } #content.contentpanels h4 { margin: 0 0 0 10px; padding: 0 0 0.8em 0; color:#006cb8; font-size: 1em; font-weight: normal; } #content.contentpanels h3 a, #content.contentpanels h4 a { display: block; text-decoration: none; padding: 0.2em 0 0.2em 15px; background: transparent url(../img/btn_show_collapsed.gif) no-repeat 0 50%; } #content.contentpanels h3.expanded a, #content.contentpanels h4.expanded a { background: transparent url(../img/btn_show_expanded.gif) no-repeat 0 50%; } #content.contentpanels h3 a:hover, #content.contentpanels h4 a:hover { text-decoration: underline; } #content.contentpanels table.specs { position: static; } /* Sitemap */ .sitemap { margin:0; padding:0; width: 100%} .sitemap .left { float: left; width: 230px} .sitemap .right { float: right; width: 230px} #content .sitemap ul { margin: 0; padding: 0; list-style-type: none; } #content .sitemap ul ul { margin: 0 0 25px 0; padding: 0; list-style-type: none; } #content .sitemap ul ul ul { margin: 0 0 10px 35px; padding: 0; list-style-type: disc; } #content .sitemap ul ul ul ul { margin: 0 0 10px 15px; padding: 0; list-style-type: circle; } #content .sitemap a { text-decoration: none; display:block; } #content .sitemap li { margin:0; padding:0; } #content .sitemap li a { font-size: 1.2em; margin:0 0 5px 0; padding:5px 5px 5px 10px; color: #0995DD; background-color: #E0EAEB; font-weight:bold; } #content .sitemap li li a { font-size: 1.2em; margin:0 0 3px 0; padding:2px 5px 2px 10px; background-color: #F2F7F7; color: #0995DD; font-weight:normal; border: none} #content .sitemap li li li a { font-size: 0.9em; margin:0; padding:0; background-color: #fff; color: #0995DD; font-weight: normal; border: none} #content .sitemap li li li li a { font-size: 0.9em; margin:0; padding:0; background-color: #fff; color: #0995DD; font-weight: normal; border: none} /* Fix IE. Hide from IE Mac \*/ * html #content .sitemap li a { height: 1%; } /* End Sitemap */ /* Virtual drives */ .vd_movie { text-align: center; margin: 20px auto; } /* FORMS */ form select, form option, form input, form textarea { font: 1em Arial, Helvetica, Verdana, Geneva, sans-serif;} #genericForm { clear:both; margin-top: 10px } #genericForm .allErrors { color: #f00; margin-bottom:0; } #genericForm .allErrors li { padding:0 0 3px 0} #genericForm span.error { color: #F5F9F9; position: absolute; top: 8px; right:0; font-size:0; width: 12px; height: 12px; background: transparent url(../img/icon_error.gif) no-repeat } #genericForm fieldset { clear:both; margin: 10px 0; padding: 5px 0 0 0; background-color: #F5F9F9; border: 4px solid #E0EAEB; color:#333 } #genericForm fieldset h3 { padding: 5px 5px 10px 15px } #genericForm fieldset .item h3 { padding: 0 0 10px 0; } #genericForm fieldset p { padding: 5px 5px 0 15px} #genericForm fieldset .item p { padding: 0; font-size: 1em; } #genericForm .item { clear:both; font-size: 0.9em; border-bottom: 2px solid #fff; padding: 5px 20px 5px 13px; margin:0; width: 435px; position: relative; } #genericForm .item .pullLeft { float:left; width: 330px; margin:0} #genericForm .item .pullRight { float:right; text-align:right; margin:0} #genericForm .item .pullRight label { margin:0 3px 0 0 } #genericForm .item:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size:0; } #genericForm .formLabel { float:left; width: 240px; } #genericForm .item em, .mandatory { color: #0995dd } #genericForm .inputTxt { float:right; width: 160px; padding: 1px 0; border: 1px solid #b5b5b5 } #genericForm .inputTxtSm { float:right; width: 80px; padding: 1px 0; border: 1px solid #b5b5b5 } #genericForm .formSelect { float:right; width: 163px; padding: 1px 0; border: 1px solid #b5b5b5 } #genericForm .verifySelect { position: relative; width: 163px; top: 10px; left: 273px; margin-bottom: 10px; padding: 1px 0; border: 1px solid #b5b5b5 } #genericForm .textArea { float:right; width: 160px; padding: 1px 0; border: 1px solid #b5b5b5 } #genericForm .buttonVerify { margin: 0 0 0 1em; float:right; vertical-align: top} #genericForm .formLabelLg { float:left; width: 390px; padding-bottom: 0.3em;} #genericForm .inputCheckBox { float:right; } #genericForm .radio { margin-right:5px; vertical-align:middle} #genericForm .formRadio { float: left; width: 165px; } #genericForm .formRadio td { padding: 2px 0.5em 2px 0; vertical-align: top; } #genericForm .formRadio label { margin: 0; } #genericForm .labelRadio { float: left; width: 270px; } #genericForm label { margin-right:1em; } /* Submit buttons */ .btnForm { min-height: 25px; margin-bottom: 15px; } .btnForm .left { float: left; padding: 5px 0 0 0; margin: 0 0 0 1em; } .btnForm .right { float: right; padding: 5px 0 0 0; margin: 0 1em 0 0; } .btnForm .right input { text-align: right; overflow: visible; width: auto;} .btnForm .left input { text-align: left; overflow: visible; width: auto;} .btnForm input, .btnForm a { font-weight:bold; font-size: 0.9em; color: #006CB8; text-decoration: none; padding:0 0 0 6px; cursor:pointer; border: none; background: transparent url(../img/btn_next.gif) no-repeat 0 0.45em; /*text-transform: uppercase;*/ } .btnForm .left input, .btnForm .left a { background: transparent url(../img/btn_back.gif) no-repeat 0 0.45em; } *html .btnForm { height: 25px} #genericForm ul.list { list-style-type:none; margin:0; padding:0; } #genericForm ul.list li { float: left; width: 215px; padding: 0 0 3px 0; margin:0; font-size: 1em; } #genericForm ul.list li input { float: left; margin: 0 3px 5px 0; padding:0; } #genericForm ul.list li label { float: left; width: 185px; padding:0; margin:0; } /* Dealer forms */ #contentBoxDealers #genericForm fieldset { background-color: #fff; } #contentBoxDealers #genericForm .item { width: 400px; } #contentBoxDealers #genericForm .formLabel { float:left; width: 220px; } #contentBoxDealers #genericForm .formLabelLg { width: 320px; } #contentBoxDealers ol.dealers { list-style-type: none; margin: 0 0 1.3em 0; padding:0} #contentBoxDealers .dealers li { clear:both; margin: 0 0 1.3em 0; padding: 0} #contentBoxDealers .dealers h3 { background-color: #E0EAEB; margin:0 0 0.5em 0; padding: 5px 10px 5px 5px; color:#666; font-weight:bold; position: relative; } #contentBoxDealers .dealers h3 img { vertical-align: top} #contentBoxDealers .dealers h3 .icons { position: absolute; right: 5px; top:3px} #contentBoxDealers .dealers h3 .icons img { margin-left: 2px; } #contentBoxDealers .dealers .address { float: left; margin: 0} #contentBoxDealers .dealers .distance { float: right; text-align: right; padding: 0 10px;} /* Language gateway, 404 error pages */ ul.langSelect { list-style-type: none!important; margin:0!important; padding:0!important} ul.langSelect li { background-color: #F2F7F7; padding: 5px 10px; margin: 0 0 2px 0; font-size: 1em!important;} /**************** POPUPS *******/ .popup_logo { margin: 0; height: 50px; border-bottom: 1px solid #09c;} .popup_logo .left { float: left; padding: 15px 0 10px 15px;} .popup_logo .right { float:right; padding: 20px 15px 0 0; } .popup_logo h1 { color:#ccc; font-family: Arial, Helvetica, sans-serif; font-size: 1.8em; font-weight: bold; letter-spacing: 2px; line-height: 1em;} #popupContainer { clear: both; } #popupContainer object { display: block; margin: 0 auto 1em; } #popupContainer ul { margin: 0 0 1.5em 1.3em; list-style-type: square; } #popupContainer ol { margin: 0 0 1.5em 2em; } #popupContainer ul.iconsIndex { list-style-type:none; margin:0; } .popup_close { padding: 1em 0 0 1em; } /* Test drive, dealer list: */ #popupContainer ol.dealers { list-style-type: none; margin:0 0 1.3em 0; padding:0} #popupContainer .dealers li { clear:both; margin: 0 0 1.3em 0; padding: 0} #popupContainer .dealers h3 { background-color: #E0EAEB; margin:0 0 0.5em 0; padding: 5px 10px 5px 5px; color:#666; font-weight:bold; position: relative; } #popupContainer .dealers h3 .icons { position: absolute; right: 10px; top:3px} #popupContainer .dealers h3 .icons img { margin-left: 2px} #popupContainer .dealers .address { float: left; margin: 0 5px} #popupContainer .dealers .distance { float: right} /* Error page */ #error #mainContainer { margin-top:53px } /**************** Instructions for developers, (static HTML pages only) *******/ .forDevelopers { border: 1px solid #ccc; padding: 10px; margin-top: 1em;} .forDevelopers ul { margin-bottom:9px!important; margin-top:0!important; padding-bottom:0!important} .forDevelopers ul li { margin-bottom:0!important; margin-top:0!important; padding-bottom:0!important} /* CMS instructions */ .instructions { display:block; margin: 5px 0 1.5em 0; background: #ecf5ff; padding: 10px 10px 5px 10px; border:1px solid #d7f2ff} .instructions li { padding-bottom: 0.1em} .instructions p { padding-bottom: 0.5em; margin:0} .instructions code { color: #000; font-weight:bold; font-family:Sans-Serif} h2.instr { padding: 0 0 1em 0; color:#666; font-family: Arial, Helvetica, Verdana, Geneva, sans-serif; font-size: 2em; font-weight: lighter; letter-spacing: 2px; line-height: 1em;} .indent { margin: 0 0 2em 2.5em; } .maintitle { padding: 0 0 12px 0; margin:0; color:#B2CCCC; font-family: Arial, Helvetica, Verdana, Geneva, sans-serif; font-size: 2em; font-weight: lighter; letter-spacing: 2px; line-height: 1em;} p.cmsImg { margin: 0.5em 0 2em 0; } .cmsIcon { margin: 0 5px 0 0} /**************** UK templates *******/ /* UK promotion section */ .promoContainer { margin: -37px -17px 0 -17px; padding:0; position: relative; width: 684px; } .promoContainer a:active, .promoContainer a:focus { outline: 0; } .promoHome ul { margin:0 0 2em 0!important; padding:0!important; list-style: none; background-color: #000; width: 684px; } .promoHome li { float:left; list-style-type: none; margin:0!important; padding:0!important; } .promoHome li a { display:block; width: 226px; height: 152px; margin:0; padding:0; text-align: center; border-right: 3px solid #000; border-bottom: 3px solid #000;} .promoHome li img { display:block; margin:0; padding:0} .promoHome li span { display: none} .promoHome .third a { border-right:none!important} .promoModel ul { margin:0!important; padding:0!important; list-style: none; background-color: #fff; } .promoModel li { float:left; list-style-type: none; margin:0!important; padding:0!important; width: 226px; height: 230px; text-align: center; border-right: 3px solid #000; border-bottom: 3px solid #000;} .promoModel .third { border-right:none!important} .promoModel li img { display:block; margin:0; padding:0} .promoModel li table { margin:0; padding:0; background: #8e221b url(../img/bg_promotions.gif); width: 226px; height: 230px;} .promoModel li table td { margin:0; padding:0; text-align: center; color: #ffffff; } .promoModel li table td a { text-decoration: none; color: #ffffff; font-family: Arial, Sans-Serif; font-size: 1.2em; font-weight: bold; } .promoModel li table td a:hover { color:#fff} .promoModel li table td h3 { margin: 0; padding: 0 0 0.8em 0; font-family: Arial; font-size: 1.8em; font-weight: normal; line-height: 0.9em; color: #fff; } .promoModel li table td h3 span { font-size: 0.4em; padding-left: 45px; text-align: left; float: left;} .promoModel li table td p { color:#fff; font-size: 1.1em;} .promoModel li table td div { padding-bottom: 15px; line-height: 1.1em; } .promoModel li table td .link { font-size: 0.9em; background: url(../img/arrow_promo.gif) no-repeat 0 4px; padding-left: 10px; text-align: left} .promoModel li table td .apr { font-size: 1.2em !important; font-weight: bold; display: inline;} .promoModel li table td .disclaimer { font-size: 0.7em; font-weight: normal; color:#fff;} .promoModel li table.white { background: none; background-color: #fff; font-size: 0.95em} .promoModel li table.white td { color:#893f3e; text-align: left; padding: 10px; color: #893f3e;} .promoModel li table.white td p { margin-bottom: 0.5em; color: #893F3E;} .promoModel li table.white td h3 { padding-bottom:0.5em; color:#893f3e; font-weight: lighter; } .promoModel li table.white td .link { background: none; padding-left:0; color: #893f3e;} .promoModel li table.white .link a { text-decoration: none; color: #893f3e; } .promoModel li table.white p.link { margin:0; padding:0; color: #893f3e; } .promoModel li table.white div, .promoModel li table.white .disclaimer { color: #893f3e; } .promoContainer .left_column { float: left; width: 229px; margin:0; padding:0} .promoContainer .left_column ul { margin:0!important; padding:0; } .promoContainer .left_column li { margin:0 0 2px 0!important; list-style:none; } .promoContainer .left_column li.btn { padding:0!important; margin:0!important} .promoContainer .left_column li.btn img { border-right: 3px solid #000} .promoContainer .left_column li.nav { padding: 6px 20px; margin: 0; background: #7a2721 url(../img/arrow_promo.gif) no-repeat 10px 50%; } .promoContainer .left_column li.nav a { color: #fff; font-weight: bold; text-decoration: none; } .promoContainer .left_column li.furtherInfo { color: #fff; font-weight: bold; background: #9E9E9E; padding:8px 10px; border-top: 20px solid #fff} .promoContainer .promoTxt { float: left; width: 425px; margin:0; padding:30px 15px; text-align: left; color:#540100; background: #fff url(../img/promo_border_pattern.gif) repeat-y 100% 0;} .promoContainer .promoTxt h2 { color:#7A2721; font-weight: bold;} .promoContainer .promoTxt h2.promo .apr { font-size: 1.8em; font-weight: normal; line-height: 1.3em; font-family: Arial; } .promoContainer .promoTxt h3 { color:#7A2721; font-size: 1.1em; font-weight: bold} .promoContainer .promoTxt h4, .promoContainer .promoTxt p, .promoContainer .promoTxt table { color:#540100;} .promoContainer .promoTxt p.disclaimer, .promoContainer .promoTxt .disclaimer * { color:#8F9498;} .promoContainer .promoTxt ul li { margin-left: 1.5em;} a.promo_print { background: #7a2721 url(../img/arrow_promo.gif) no-repeat 10px 50%; padding: 6px 20px; color: #fff; font-weight: bold; text-decoration: none; width: 180px; margin: 0 0 15px 0;} a.promo_print:hover { color: #fff} /* CTA Navigation on Mazda5 Introducing page */ #M5IntroNav { background-color: #000; list-style: none; float: left; margin: -15px 0 10px -10px !important; padding: 1px 0 0 0 !important; height: 40px; width: 660px; } #M5IntroNav li { float: left; display: inline; padding-left: 40px; } #M5IntroNav li span { visibility: hidden; } #M5IntroNav li a { display: block; text-decoration: none; } a.linkBro { background-image: url(../img/upload/global/hero/showroom/mazda5/intro_flash/en-gb/brochure.gif); width: 114px; height: 30px; } a:hover.linkBro { background-image: url(../img/upload/global/hero/showroom/mazda5/intro_flash/en-gb/brochure_over.gif); } a.linkTestdrive { background-image: url(../img/upload/global/hero/showroom/mazda5/intro_flash/en-gb/testdrive.gif);width: 114px;height: 30px; } a:hover.linkTestdrive { background-image: url(../img/upload/global/hero/showroom/mazda5/intro_flash/en-gb/testdrive_over.gif); } a.linkBuy { background-image: url(../img/upload/global/hero/showroom/mazda5/intro_flash/en-gb/buy.gif);width: 114px;height: 30px; } a:hover.linkBuy { background-image: url(../img/upload/global/hero/showroom/mazda5/intro_flash/en-gb/buy_over.gif); } a.linkDealer { background-image: url(../img/upload/global/hero/showroom/mazda5/intro_flash/en-gb/dealer.gif);width: 114px;height: 30px; } a:hover.linkDealer { background-image: url(../img/upload/global/hero/showroom/mazda5/intro_flash/en-gb/dealer_over.gif); } /* UK email instruction index page */ #email_index { position: relative; width: 100%; margin: 10px auto !important; text-align: center; } #email_index li { width: 49%; float: left; display: block; line-height:1.5em; margin: 0.5em 0; } /* font-size styling */ .apr { font-size: 1.5em; font-weight: normal; line-height: 1.2em; } .small { font-size: 0.7em; font-weight: normal; } .noliststyle { margin: 0 !important; padding: 0; list-style: none !important; } /* new mazda video page */ #content h2 {color:#006CB8;font-size:1.6em;} #content p.introTxt {color:#006CB8;} .innerContent { float:left; width:480px; border-top:1px #ccc solid; margin:0; padding:10px 0 0;} .innerContent02 { float:left; width:480px; margin:0; padding:10px 0 0;} .innerContent h3, .innerContent02 h3 {padding:0;margin:0 0 6px;} .innerContent ul.videoFormat {margin:0! important;padding:0! important;} .innerContent ul.videoFormat li {background:#000 url(../img/bg_downloadBtn.gif) no-repeat;color:#e6e6e6;display:inline;float:left;height:35px;list-style:none;margin:0 8px 10px 0;padding:0 8px;position:relative;width:96px;} .innerContent ul.videoFormat li a {color:#a1a1a1;display:block;font-size:0.85em;font-weight:bold;margin-top:4px;text-decoration:none; text-transform:uppercase;} .innerContent ul.videoFormat li span {color:#656565;display:block;font-size:0.85em;position:absolute;top:15px;left:9px;} .innerContent img, .innerContent02 img {margin:0 0 12px;border:none;} .innerContent p.quote {background-color:#a1a1a1;color:#000;float:right;font-weight:bold;margin:0 0 0 8px;padding:10px 10px 10px 27px;position:relative;width:200px;} .innerContent p.quote span strong.top {font-family:verdana;font-size:24px;left:8px;position:absolute;top:8px;} .innerContent p.quote span strong.bottom{bottom:-2px;font-family:verdana;font-size:24px;position:absolute;right:8px;} .innerContent02 p.link {margin:2px 0 0;} /*---------- rav code -----------*/ #div4banners { width:100%; height:315px; display:block; position:relative; overflow:hidden; } #smallbanner { position:absolute; top:53px; left:270px; padding:7px; background:#ffffff; } #bigbanner { position:absolute; top:0px; left:0px; padding:0px; margin:0px; } .upper_h1 {text-transfor:uppercase;} .hide_div {display:none;} .button4submit { border: 1px solid #b5b5b5; float:right; clear:none; display:block; margin:5px 20px 5px 0px; } #flashHero { width:770px; height:90px; left:0px; top:344px; display:block; overflow:hidden; position:absolute; } .error {color:#ff0000; padding:20px 0px 0px 0px;} #PanelPresentationMode { margin:0px; padding:0px; text-align:left; } #PanelPresentationMode * { margin:0px; padding:0px; text-align:left; font-size:12px; } #PanelPresentationMode table tr td {padding:0px 0px 10px 0px;} .image_td {width:160px;} /* News */ #news {width:480px; overflow:hidden;} #news .item { margin: 0 2em 0 0; padding: 0;} #news .item h2 { padding-bottom:0; font-size:14px; font-weight:normal; background:#e5f5fa;} #news .publisher { padding-bottom: 8px; color:#adadad; margin:0} #news .teaser, #news .link { margin-bottom: 20px; padding-bottom:0; } #news .search { float: right; text-align:left; width: 130px; padding: 5px; margin: 0 0 2em 30px; background-color: #E0EBEB; font-size:0.9em;} #news .search h1 { color: #666; font-size: 1.2em; } #news .search label { font-weight: bold;} #news .search .formWidth { width: 120px} #news .search .go { text-align:right; border-top:1px solid #B1DAE8; border-bottom:1px solid #B1DAE8; padding-right:5px; margin: 15px 0 5px 0} #news .search .go input { border: none; color: #0099CC; background: none; text-align:right; font-weight:bold;} .anketaTable td {padding:5px 10px 5px 0px;} .anketaTable select {width:304px;} .anketaTable input {width:300px;} .anketaTable textarea {width:300px;} .anketaTable .userButton {width:100px;} /* Landing pages: Buying a mazda, About, gallery, wallpapers... */ #content .landing div img {margin:0px 10px 0px 0px; display:block;} #content .landing div { margin:0px 15px 15px 0px; padding:0px; line-height:normal; display:block; float:left; clear:none; } #content .landing div table tr td.text4download { padding:0px; margin:0px; vertical-align: top; } #content .landing div table tr td.text4download p { font-size:12px; font-weight:bold; color:#666666; padding:0px; margin:0px; } #content .landing a { font-weight:bold; text-decoration: none; } #impexlogo { padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; display:block; position:absolute; top:-40px; left:10px; _left:-270px; } #search_div {padding:0px 0px 20px 27px;} ,#search_div {padding:0px 0px 20px 13px;} .txt { background: url(../img/bs.gif) top left no-repeat; border:0px solid; width:353px; height:16px; overflow:hidden; display:block; float:left; margin:0px 3px 0px 0px; padding:0px 2px 0px 2px; } #f-submit { width:45px; height:16px; background: url(../img/sbs.gif) top left no-repeat; border:0px solid; float:left; } #search_area {float:right; padding:2px 26px 0px 0px; margin:0px; clear:none; display:block;} #search_area .text { background: url(../img/si.gif) top left no-repeat; border:0px solid; width:104px; height:16px; overflow:hidden; display:block; float:left; margin:0px 3px 0px 0px; } #search_area .submit { width:45px; height:16px; background: url(../img/sbs.gif) top left no-repeat; border:0px solid; display:block; float:left; } #hotlink {float:left; clear:none; padding:0px; margin:0px; display:block;} .error404 { background: url(../img/error404.jpg) top left no-repeat; } #viBranding1 { height: 232px; margin: 22px 0 0 -12px!important; position: relative; } #viBranding1 a { background: url(../img/mazda_logo_vi.png) top left no-repeat; height:203px; width:199px; cursor:pointer; display:block; } #mainContainer .heroBox1 { width:490px; border:7px solid #fff; border-bottom: none; background-color: #fff; margin:0px; position:absolute; left:270px; top:53px; display:block; } #content1 { line-height:1.3em; position:absolute; top:360px; left:285px; width:500px; } #content1 #support { margin:0px; padding:10px 0px 0px 0px; display:block; clear:both; } #content1 #support ul { margin:0px; } #support {position:relative} #impexlogo_error404 { padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; display:block; position:absolute; top:-30px; left:-275px; } .contet4overflow { width:100%; overflow:auto; overflow-x:hidden; } #trade_center {float:right; width:162px;} .main h1 {font-size:11px;} .main p {font-size:10px !important;} .localization {padding:0px 0px 0px 87px;} .localization a {border:0!important; background:none; margin:0px!important; padding:0px!important; font-weight:bold;} /*-------------------------------*/ .seo h1 {line-height:26px !important; font-size:12pt !important;} .cpl_text h1 { font-size: 18px; line-height:26px !important; }