/*//////////////////////////////////////////////// ////////////////// HOME FOOTER ///////////////// ////////////////////////////////////////////////*/ #homeFooter { width:998px; padding:0; background: transparent url(/global_assets/images/diy/diyFooter_bg.png) repeat-y;} #homeFooter #header { float: left; width: 255px; } #homeFooter #header p { color: #b70c15; font-size: 1.4em; padding: 16px 0 0 28px;} #homeFooter .menuList { float: left; width: 170px; border-left: 1px solid #ccc; margin: 20px 0 14px 0; padding: 0px 0 0 10px;} #homeFooter .menuList p { font-size: 1.4em; line-height: 1em; padding: 0 0 8px 0;} #homeFooter .menuList ul li a { display:inline-block;} #homeFooter .menuList ul li a { color: #999; display: block; font-size: 1.1em; line-height: 1em; padding: 0 0 4px 8px; background: transparent url(/global_assets/images/diy/list_bullet_1.gif) no-repeat left center;} #homeFooter .menuList ul li a:hover { color: #b70c15; background: transparent url(/global_assets/images/diy/list_bullet_1.gif) no-repeat left center;} #homeFooterBottom { width:998px; height:10px; background: transparent url(/global_assets/images/diy/diyFooterBottom_bg.png) no-repeat; } /*//////////////////////////////////////////////// ////////////////// HOME FEATURE ///////////////// ////////////////////////////////////////////////*/ #section-1, #section-2, #section-3, #section-4 { position: relative; } #section-1 .marketMainLeft { position: absolute; background: #fff; top: 10px; left: 9px; width: 239px; height: 230px;} #section-1 .mainImage_diy { position: absolute; top: 10px; left: 253px; width: 239px; height: 230px;} #section-1 .mainImage_construction { position: absolute; top: 10px; left: 497px; width: 239px; height: 230px;} #section-1 .mainImage_industrial { position: absolute; top: 10px; left: 741px; width: 239px; height: 230px;} #section-2 .diyMainRight { position: absolute; background: #fff; top: 10px; left: 497px; width: 483px; height: 230px;} #section-2 .diyMainLeft { position: absolute; background: #fff; top: 10px; left: 9px; width: 239px; height: 230px;} #section-2 .mainImage_diy { position: absolute; top: 10px; left: 253px; width: 239px; height: 230px;} #section-3 .constructionMainLeft { position: absolute; background: #fff; top: 10px; left: 9px; width: 483px; height: 230px;} #section-3 .mainImage_construction { position: absolute; top: 10px; left: 497px; width: 239px; height: 230px;} #section-3 .constructionMainRight { position: absolute; background: #fff; top: 10px; left: 741px; width: 239px; height: 230px;} #section-4 .industrialMainLeft { position: absolute; background: #fff; top: 10px; left: 9px; width: 727px; height: 230px;} #section-4 .mainImage_industrial { position: absolute; top: 10px; left: 741px; width: 239px; height: 230px;} #section-2 form { margin: 4px 0 0 12px;} #section-2 ul { margin: 4px 0 0 14px; } #section-2 li { float: left;} #section-2 li a { xdisplay:inline-block;} #section-2 li a { border-bottom: 1px dotted #ccc; background: transparent url(/global_assets/images/diy/list_bullet_1.gif) no-repeat left center; font-size: 1.1em; display: block; margin: 0; color: #999; } #section-2 li a:hover { color: #b70c15;} #section-2 li.hl_searchProducts a { padding: 6px 100px 10px 8px;} #section-2 li.hl_prodlisting a { padding: 6px 100px 10px 8px;} #section-2 li.hl_sds a { padding: 6px 35px 10px 8px;} #section-2 li.hl_faq a { padding: 6px 48px 10px 8px;} #section-2 li.hl_link a { color: #b70c15; border: none; padding: 6px 48px 8px 8px; } #section-2 li.hl_link a:hover { color: #000; } #section-3 form { margin: 4px 0 0 12px;} #section-3 ul { margin: 4px 0 0 14px; } #section-3 li { float: left; } #section-3 li a { xdisplay:inline-block;} #section-3 li a { border-bottom: 1px dotted #ccc; background: transparent url(/global_assets/images/diy/list_bullet_1.gif) no-repeat left center; font-size: 1.1em; display: block; margin: 0; color: #999; } #section-3 li a:hover { color: #b70c15;} #section-3 li.hl_searchProducts a { padding: 6px 100px 10px 8px;} #section-3 li.hl_prodlisting a { padding: 6px 100px 10px 8px;} #section-3 li.hl_sds a { padding: 6px 35px 10px 8px;} #section-3 li.hl_faq a { padding: 6px 48px 10px 8px;} #section-3 li.hl_link a { color: #b70c15; border: none; padding: 6px 48px 8px 8px; } #section-3 li.hl_link a:hover { color: #000; } #section-4 form { margin: 4px 0 0 12px;} #section-4 ul { margin: 4px 0 0 14px; } #section-4 li { float: left;} #section-4 li a { xdisplay:inline-block;} #section-4 li a { border-bottom: 1px dotted #ccc; background: transparent url(/global_assets/images/diy/list_bullet_1.gif) no-repeat left center; font-size: 1.1em; display: block; margin: 0; color: #999; } #section-4 li a:hover { color: #b70c15;} #section-4 li.hl_searchProducts a { padding: 6px 100px 8px 8px;} #section-4 li.hl_prodlisting a { padding: 6px 100px 8px 8px;} #section-4 li.hl_sds a { padding: 6px 35px 8px 8px;} #section-4 li.hl_faq a { padding: 6px 48px 8px 8px;} #section-4 li.hl_link a { color: #b70c15; border: none; padding: 6px 48px 8px 8px; } #section-4 li.hl_link a:hover { color: #000; } .h_wrapperRight { float: left;} .h_wrapperLeft { float: left; width: 242px; border-right: 1px dotted #ccc;} /* #container-1 p { font-size: 1.1em; line-height: 1.3em; padding: 4px 12px 6px 12px;} #container-1 h2 {color: #b70c15; font-size: 2em; line-height: 1.2em; padding: 12px 12px 0px 12px;} */ #section-2,#section-3,#section-4,#section-5 { display:none; } /* Tabs - important styles to ensure accessibility in print */ @media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */ .tabs-hide { display: none; } } @media print { .anchors { display: none; } } #container-1 { background: #393a41 url(/global_assets/images/home/hmContainerBg.gif) top left no-repeat; width: 990px; padding: 29px 0 0 0; margin: 0px 0 0px 4px; xpadding: 0; height:300px; xdisplay:inline; } .fragment1,.fragment2,.fragment3,.fragment4,.fragment5 { height: 240px; xbackground: red;} .fragment2,.fragment3,.fragment4,.fragment5 { display:none; } .anchors { list-style: none; margin: 0; padding: 0; height: 58px;} .anchors li { margin: 0; float: left;} /* attaching active state to background of li for pre-loading .anchors .tab1 { xbackground: #393a41; width: 253px;} .anchors .tab2 { xbackground: #393a41; width: 244px;} .anchors .tab3 { xbackground: #393a41; width: 244px;} .anchors .tab4 { xbackground: #393a41; width: 249px;} */ .anchors a {display: block; position: relative; top: 0px; left:0; z-index: 2; padding: 0px; color: #000; height: 58px;} /* Tab Rollovers Provisional */ .anchors .tab1 a:link, .anchors .tab1 a:visited { background: url(/global_assets/images/home/tab_market.gif) top left no-repeat; width: 253px; position:static;} .anchors .tab2 a:link, .anchors .tab2 a:visited { background: url(/global_assets/images/home/tab_diy.gif) top left no-repeat; width: 244px; position:static;} .anchors .tab3 a:link, .anchors .tab3 a:visited { background: url(/global_assets/images/home/tab_professional.gif) top left no-repeat; width: 244px; position:static;} .anchors .tab4 a:link, .anchors .tab4 a:visited { background: url(/global_assets/images/home/tab_industrial.gif) top left no-repeat; width: 249px; position:static;} .anchors .tab1 a:hover { background: url(/global_assets/images/home/tab_market.gif) 0px -58px no-repeat; width: 253px; position:static; } .anchors .tab2 a:hover { background: url(/global_assets/images/home/tab_diy.gif) 0px -58px no-repeat; width: 244px; position:static; } .anchors .tab3 a:hover { background: url(/global_assets/images/home/tab_professional.gif) 0px -58px no-repeat; width: 244px; position:static; } .anchors .tab4 a:hover { background: url(/global_assets/images/home/tab_industrial.gif) 0px -58px no-repeat; width: 249px; position:static; } /* Makes the text disappear */ .anchors span { display:block; height:0; width:0; overflow: hidden; font-size: 1px; color: #3B88AF; } .anchors .tabOn1 { background: url(/global_assets/images/home/tab_market.gif) 0px -58px no-repeat; width: 253px; } .anchors .tabOn2 { background: url(/global_assets/images/home/tab_diy.gif) 0px -58px no-repeat; width: 244px; } .anchors .tabOn3 { background: url(/global_assets/images/home/tab_professional.gif) 0px -58px no-repeat; width: 244px;} .anchors .tabOn4 { background: url(/global_assets/images/home/tab_industrial.gif) 0px -58px no-repeat; width: 249px; } /* featured image on main home page */ .featuredBrands { xbackground: red; position: relative; height: 36px; margin: 16px 0px 0px 2px; padding: 0; border-bottom: 1px dotted #ccc; } .brand_bostik { position: absolute; left: 0px; top: 0px; width: 107px; height: 28px; margin: 0px 10px 0px 0; } .brand_araldite { position: absolute; left: 107px; top: 0px; width: 107px; height: 28px; margin: 0px 10px 0px 0; } .brand_evostik { position: absolute; left: 214px; top: 0px; width: 107px; height: 28px; margin: 0px 10px 0px 0; } .brand_cementone { position: absolute; left: 321px; top: 0px; width: 107px; height: 28px; margin: 0px 10px 0px 8px; } /*** product select boxes ***/ #contentTop input.searchField { width: 120px; } #contentTop input { border: 1px solid #999; color: #000; padding:2px 4px; margin: 0; font-size: 1.2em; } input.btn { border:1px solid #999; background: #999; color: #fff; padding: 1px 4px 1px 4px; margin: 0; font-size: 1.1em;} input.btnHov { border:1px solid #cc0000; background: #cc0000; color: #fff; xheight: 20px; xpadding: 0; padding: 1px 4px 1px 4px; margin: 0; font-size: 1.1em;} select.sel { width: 190px; border: 1px solid #999; background: #fff; color: #000; padding: 0; xpadding: 0px 2px 0px 4px; margin: 0; font-size: 1.3em; } select.selpft1 { width: 160px; border: 1px solid #999; background: #fff; color: #000; padding: 0; xpadding: 0px 2px 0px 4px; margin: 0; font-size: 1.3em; } select.selpft2 { width: 210px; border: 1px solid #999; background: #fff; color: #000; padding: 0; xpadding: 0px 2px 0px 4px; margin: 0; font-size: 1.3em; } select.selpft3 { width: 250px; border: 1px solid #999; background: #fff; color: #000; padding: 0; xpadding: 0px 2px 0px 4px; margin-top: 10px; font-size: 1.3em; } #pft_brands { margin-left: 14px; } .rLink { color: #b70c15; } .rLink:hover { color: #000; } #sectionColourStrip_home { margin:0 4px; padding:0; height:7px; background-color:#B70B15; overflow:hidden; } #sectionColourStripthin_home { margin:0 4px; padding:0; height:1px; background-color:#ccc; overflow:hidden; } /* Cycle on the home page ----------------------------------------- #cycle_container .tab_content {display: none;} #cycle_container #cycle_pager_generated a:hover {text-decoration: none;} #cycle_container_wrapper { margin: 0px auto; position: relative; xz-index: 1; xbackground-color: white; width: 945px;} .home_cycle { position:relative; xbackground-color: white; xz-index: 1;} .home_cycle { width:945px; height:275px; overflow:hidden;} .home_cycle .pane { xz-index: 1; position:relative; width: 100%;} .home_cycle #drive_it { display:block } .home_cycle .banner { xz-index: 1; width:300px; height:275px; position: absolute; top:0px; left:0px; xbackground: url(/global_assets/images/home/homeBannerBlock_bg.png) top left repeat; } .home_cycle .banner .content { margin:28px 30px; font-size:16px;} .home_cycle .banner h6 { font-size:1.6em; line-height:1.2em; font-weight:bold; xcolor: #270A0E; padding: 0; margin: 0px 0 12px 0;} .home_cycle .banner h6 a { color: #b70c15; } .home_cycle .banner h6 a:hover { color: #fff; } .home_cycle .banner p { font-size: 1em; line-height: 1.4em; margin: 0; padding: 0; color: #ccc;} .home_cycle h2 { font-size:1.2em; xfont-weight:bold; xcolor:#270A0E; xmargin-bottom:10px; color: #999;} .home_cycle #cycle_control { width: 260px; position:absolute; top:0px; left:315px; xz-index:10; } .home_cycle #cycle_pager_generated a { width:260px; height: 83px; xbackground: transparent url(/global_assets/images/home/homeBannerBlock_bg.png) top left repeat; margin-bottom: 13px; display: block; color: #ccc; position: relative; outline: none;} .home_cycle #cycle_pager_generated a .tab_thumb { position: absolute; top: 0px; left: 0px;} .home_cycle #cycle_pager_generated a .thumb_frame { xposition: absolute; top: 0px; left: 0px; width: 95px; height: 83px; background-image: url('../images/home_carousel_thumb_mask.gif'); background-position: 0px 0px;} .home_cycle #cycle_pager_generated a .tab_title { position: absolute; top: 20px; left: 116px; font-size: 1.7em; width: 140px; line-height: 1.3em; xbackground: #ccc;} .home_cycle #cycle_pager_generated a.activeSlide { background-color: #b70c15; } .home_cycle #cycle_pager_generated a.activeSlide .thumb_frame { background-position: 0px -33px;} .home_cycle #cycle img { float: right; } */ /* Cycle on the home page -----------------------------------------*/ #cycle_container .tab_content {display: none;} #cycle_container #cycle_pager_generated a:hover {text-decoration: none;} #cycle_container_wrapper { margin: 0px auto; position: relative; xz-index: 50; xbackground-color: white; width: 945px;} .home_cycle { position:relative; xbackground-color: white; xz-index: 1;} .home_cycle { width:945px; height:275px; overflow:hidden;} .home_cycle .pane { xz-index: 1; position:relative; width: 100%;} /*.home_cycle .pane img.largeImg { position: absolute; top: 0px; left: 590px; width: 355px; height: 275px; } */ .home_cycle #drive_it { display:block } .home_cycle .banner { xz-index: 1; width:300px; height:275px; position: absolute; top:0px; left:0px; xbackground: url(/global_assets/images/home/homeBannerBlock_bg.png) top left repeat; } .home_cycle .banner .content { margin:22px 30px; font-size:16px;} .home_cycle .banner h6 { font-size:1.5em; line-height:1em; font-weight:bold; xcolor: #270A0E; padding: 0; margin: 0px 0 12px 0;} .home_cycle .banner h6 a { color: #b70c15; } .home_cycle .banner h6 a:hover { color: #fff; } .home_cycle .banner p { font-size: 0.9em; line-height: 1.2em; margin: 0; padding: 0; color: #ccc;} .home_cycle h2 { font-size:1.2em; xfont-weight:bold; xcolor:#270A0E; xmargin-bottom:10px; color: #999;} .home_cycle .banner .content p a { color: #fff;} .home_cycle .banner .content p a:hover { color: #b70c15;} .home_cycle #cycle_control { width: 260px; position:absolute; top:0px; left:315px; z-index:10; } .home_cycle #cycle_pager_generated a { width:260px; height: 83px; xbackground: transparent url(/global_assets/images/home/homeBannerBlock_bg.png) top left repeat; margin-bottom: 13px; display: block; color: #ccc; position: relative; outline: none;} .home_cycle #cycle_pager_generated a .tab_thumb { position: absolute; top: 0px; left: 0px;} .home_cycle #cycle_pager_generated a .thumb_frame { xposition: absolute; top: 0px; left: 0px; width: 95px; height: 83px; background-image: url('../images/home_carousel_thumb_mask.gif'); background-position: 0px 0px;} .home_cycle #cycle_pager_generated a .tab_title { position: absolute; top: 20px; left: 116px; font-size: 1.7em; width: 140px; line-height: 1.3em; xbackground: #ccc;} .home_cycle #cycle_pager_generated a.activeSlide { background-color: #b70c15; } .home_cycle #cycle_pager_generated a.activeSlide .thumb_frame { background-position: 0px -33px;} .home_cycle #cycle img { float: right; } .h_threehundredforty { xborder-right: 1px solid #ccc; width: 320px; xbackground: blue; float: left;} .h_threehundredsixty { xborder-right: 1px solid #ccc; width: 395px; xbackground: blue; float: left;} .h_threehundred { xborder-right: 1px solid #ccc; width: 275px; xbackground: blue; float: left;} .twohundred { width: 268px; xbackground: red; float: left;} .h_topborder { xborder-top: 1px solid #ccc; } .homeBlock { margin: 30px 20px 30px 34px;} .homeBlock2 { margin: 30px 20px 30px 20px;} .video_temp { margin: 30px 20px 30px 44px;} body#home h4 { font-size: 2.4em; margin: 0; padding: 0 0 14px 0;} #vidContainer_home { margin: 30px 20px 30px 33px; } .evostikleague { display: block; margin: 10px auto 0 auto; }