/* qc.HockeyExperts.ca - Home page -------------------------------------------------- */ body { background: #000 url(/img/UI/bkg/bkg.jpg) no-repeat 50% 0; } /* Newsletter -------------------------------------------------- */ #page #subscribe { background: url(/img/UI/home/subscribe_bkg.png) no-repeat; width: 950px; height: 60px; font-size: 11px; line-height: 1.2em; color: #fff; position: relative; z-index: -1; } #page #subscribe .info { position: relative; width: 400px; height: 100%; float: left; } #page #subscribe .info p { position: absolute; bottom: 0; left: 0; padding: 5px 10px; } #page #subscribe .info .titre { background: url(/img/UI/home/subscribe_title.png) no-repeat; width: 220px; height: 13px; position: absolute; top: 9px; left: 9px; overflow: hidden; } #page.fr #subscribe .info .titre { background-position: 0 0; } #page.en #subscribe .info .titre { background-position: 0 -13px; } #page #subscribe #newsletterForm { height: 60px; float: left; background: url(/img/UI/home/subscribe_zone.png) no-repeat; } #page #subscribe table { margin: 7px 0 0 5px; float: left; } #page #subscribe td { padding: 2px 5px 1px 0; } #page #subscribe input { width: 150px; height: 18px; padding: 0; } #page #subscribe li.subscribe { display: inline; height: 18px; } #page #subscribe li.subscribe.fr a { background: url(/img/UI/btn/subscribe-fr.png); } #page #subscribe li.subscribe.en a { background: url(/img/UI/btn/subscribe-en.png); } #page #subscribe li.subscribe a { float: left; height: 0; width: 76px; padding-top: 18px; overflow: hidden; background-repeat: no-repeat; } #page #subscribe li.subscribe a:hover { background-position: 0px -18px; } #page #subscribe li.subscribe a:active { background-position: 0px -36px; } #page #subscribe li.subscribe.fr #btnSubmit { } #page #subscribe li.subscribe.en #btnSubmit { } #newsletterForm input.err { border-color: #0df; background-color: #def; } #newsletterForm span#msgErr { display: block; padding-left: 10px; color: #f00 !important; } /* Middle - Billboard -------------------------------------------------- */ #middle #billboard { width: 950px; height: 315px; overflow: hidden; float: left; position: relative; background: none; } #billboard .dual img { width: 950px; height: 316px; } #billboard .dual div.links { position: absolute; top: 0; left: 0; width: 950px; height: 316px; } #billboard .dual div a { float: left; } #billboard .dual div a img { height: 316px; } #billboard .dual.L a.part1 img { width: 170px; } #billboard .dual.L a.part2 img { width: 780px; } #billboard .dual.C a.part1 img { width: 480px; } #billboard .dual.C a.part2 img { width: 470px; } #billboard .dual.R a.part1 img { width: 780px; } #billboard .dual.R a.part2 img { width: 170px; } #middle #billboard .controlers { position: absolute; bottom: 0; right: 0; height: 35px; z-index: 100; background: url(/img/UI/home/ctrl_billboard.png); } #middle #billboard .controlers #player { position: absolute; top: 0; left: 0; } #middle #billboard .controlers #selector { margin: 0; padding: 0; height: 35px; width: 252px; } #middle #billboard .controlers.w0 { display: none; } #middle #billboard .controlers.w1 #selector { display: none; width: 218px; } #middle #billboard .controlers.w2 #selector { width: 252px; } #middle #billboard .controlers.w3 #selector { width: 286px; } #middle #billboard .controlers.w4 #selector { width: 320px; } #middle #billboard .controlers.w5 #selector { width: 354px; } #middle #billboard .controlers.w6 #selector { width: 388px; } #middle #billboard .controlers.w7 #selector { width: 422px; } #middle #billboard .controlers.w8 #selector { width: 456px; } #middle #billboard .controlers.w9 #selector { width: 490px; } #middle #billboard .controlers.w10 #selector { width: 524px; } .controlers #player li, .controlers #selector li { display: inline; } .controlers #player li a, .controlers #selector li a { float: left; height: 0; padding-top: 35px; overflow: hidden; background-repeat: no-repeat; } .controlers #player li a, .controlers #selector li a { background: url(/img/UI/home/ctrl_billboard.png); } .controlers.pause #player li a, .controlers.pause #selector li a { background: url(/img/UI/home/ctrl_billboard.png); } /* --- State Normal --- */ .controlers #player li#bb-play a { width: 34px; background-position: -135px -35px; margin: 0 16px 0 135px; } .controlers.pause #player li#bb-play a { background-position: -135px -105px; } .controlers #selector li#bb-0 a { width: 34px; background-position: -184px -35px; margin: 0 0 0 184px; } .controlers #selector li#bb-1 a { width: 34px; background-position: -218px -35px; } .controlers #selector li#bb-2 a { width: 34px; background-position: -252px -35px; } .controlers #selector li#bb-3 a { width: 34px; background-position: -286px -35px; } .controlers #selector li#bb-4 a { width: 34px; background-position: -320px -35px; } .controlers #selector li#bb-5 a { width: 34px; background-position: -354px -35px; } .controlers #selector li#bb-6 a { width: 34px; background-position: -388px -35px; } .controlers #selector li#bb-7 a { width: 34px; background-position: -422px -35px; } .controlers #selector li#bb-8 a { width: 34px; background-position: -456px -35px; } .controlers #selector li#bb-9 a { width: 34px; background-position: -490px -35px; } /* --- State Over --- */ .controlers #player li#bb-play a:hover { background-position: -135px -70px; } .controlers.pause #player li#bb-play a:hover { background-position: -135px -140px; } .controlers #selector li#bb-0 a:hover { background-position: -184px -70px; } .controlers #selector li#bb-1 a:hover { background-position: -218px -70px; } .controlers #selector li#bb-2 a:hover { background-position: -252px -70px; } .controlers #selector li#bb-3 a:hover { background-position: -286px -70px; } .controlers #selector li#bb-4 a:hover { background-position: -320px -70px; } .controlers #selector li#bb-5 a:hover { background-position: -354px -70px; } .controlers #selector li#bb-6 a:hover { background-position: -388px -70px; } .controlers #selector li#bb-7 a:hover { background-position: -422px -70px; } .controlers #selector li#bb-8 a:hover { background-position: -456px -70px; } .controlers #selector li#bb-9 a:hover { background-position: -490px -70px; } /* --- State Pressed --- */ .controlers #selector li#bb-0 a:active { background-position: -184px -105px !important; } .controlers #selector li#bb-1 a:active { background-position: -218px -105px !important; } .controlers #selector li#bb-2 a:active { background-position: -252px -105px !important; } .controlers #selector li#bb-3 a:active { background-position: -286px -105px !important; } .controlers #selector li#bb-4 a:active { background-position: -320px -105px !important; } .controlers #selector li#bb-5 a:active { background-position: -354px -105px !important; } .controlers #selector li#bb-6 a:active { background-position: -388px -105px !important; } .controlers #selector li#bb-7 a:active { background-position: -422px -105px !important; } .controlers #selector li#bb-8 a:active { background-position: -456px -105px !important; } .controlers #selector li#bb-9 a:active { background-position: -490px -105px !important; } /* --- State Selected --- */ .controlers #selector li#bb-0 a.activeSlide { background-position: -184px -140px !important; } .controlers #selector li#bb-1 a.activeSlide { background-position: -218px -140px !important; } .controlers #selector li#bb-2 a.activeSlide { background-position: -252px -140px !important; } .controlers #selector li#bb-3 a.activeSlide { background-position: -286px -140px !important; } .controlers #selector li#bb-4 a.activeSlide { background-position: -320px -140px !important; } .controlers #selector li#bb-5 a.activeSlide { background-position: -354px -140px !important; } .controlers #selector li#bb-6 a.activeSlide { background-position: -388px -140px !important; } .controlers #selector li#bb-7 a.activeSlide { background-position: -422px -140px !important; } .controlers #selector li#bb-8 a.activeSlide { background-position: -456px -140px !important; } .controlers #selector li#bb-9 a.activeSlide { background-position: -490px -140px !important; } /* - Promotions .slider { width: 624px; height: 13px; margin: 155px 3px 0 3px; _top: 155px; position: relative; background: url(/img/UI/home/feature_products_scrollbar.png) repeat-x #ccc; z-index: 100; cursor: default !important; } .handle { position: absolute; cursor: default; height: 13px; width: 50px; background: url(/img/UI/home/feature_products_handle.png); background-position: 0 -13px; } -------------------------------------------------- */ .sliderGallery ul { padding: 0; margin: 0; position: absolute; list-style: none; overflow-y: hidden; overflow-x: visible; height: 155px; white-space: nowrap; } .sliderGallery ul li { display: inline; position: relative; } .slider { width: 574px; height: 13px; margin: 155px 28px 0 28px; _top: 155px; position: relative; background: url(/img/UI/home/feature_products_scrollbar.png) repeat-x #ccc; z-index: 100; cursor: pointer; } .handle { position: absolute; cursor: pointer !important; height: 13px; width: 50px; background: url(/img/UI/home/feature_products_handle.png); background-position: 0 -13px; margin: 0 -25px; } .handle:active, .handle:hover, { cursor: pointer !important; } #featureProducts.rebate .handle { background: url(/img/UI/home/discount_products_handle.png); } #featureProducts.clearance .handle { background: url(/img/UI/home/clearance_products_handle.png); } #middle #promotion { background: url(/img/UI/home/products_bkg.png) repeat-x #fff; width: 930px; padding: 35px 10px; float: left; position: relative; } #page #featureProducts { width: 630px; height: 196px; float: left; overflow: hidden; background-repeat: no-repeat; position: relative; } #page.fr #featureProducts { background: url(/img/UI/home/feature_products_bkg-fr.png); } #page.en #featureProducts { background: url(/img/UI/home/feature_products_bkg-en.png); } #page.fr #featureProducts.rebate { background: url(/img/UI/home/discount_products_bkg-fr.png); } #page.en #featureProducts.rebate { background: url(/img/UI/home/discount_products_bkg-en.png); } #page.fr #featureProducts.clearance { background: url(/img/UI/home/clearance_products_bkg-fr.png); } #page.en #featureProducts.clearance { background: url(/img/UI/home/clearance_products_bkg-en.png); } #promotion #featureProducts #mistl, #promotion #featureProducts #mistr { position: absolute; top: 27px; height: 155px; z-index: 10; background-repeat: no-repeat; } #promotion #featureProducts #mistl { left: 0; background: url(/img/UI/home/feature_products_mistl.png); width: 53px; } #promotion #featureProducts #mistr { right: 0; background: url(/img/UI/home/feature_products_mistr.png); width: 55px; } #promotion #featureProducts #products { width: 630px; height: 168px; margin: 27px 0 0 0; overflow: hidden; position: absolute; top: 0px; } .feature_product .description { float: left; height: 155px; width: 105px; overflow: hidden; text-align: center; line-height: 1em; position: relative; } .feature_product .description a { text-decoration: none; color: #3a3b3b; } .feature_product .description a:hover { color: #002d62; cursor: pointer; } .feature_product .description a:hover .price { color: #e93425; font-weight: bold; } .feature_product .description a img { border: none; } .feature_product .description a p { line-height: 1em; margin: 0; padding: 0; } .feature_product .description a p.brand { font-weight: bold; } .feature_product .description a p.model { font-weight: normal; font-size: 10px; } .feature_product .description a p.price { display: block; background: url(/img/UI/home/feature_products_price_bkg.png) repeat-y; color: #002d62; padding: 1px; width: 70px; margin: 0px 17px; position: absolute; bottom: 1px; } .feature_product .description a .tag { height: 155px; width: 104px; position: absolute; top: 0; left: 0; border-left: 1px solid #eee; } #middle #promotion #focusProducts { width: 260px; height: 196px; position: absolute; top: 0; right: 0; margin-top: 35px; margin-right: 10px; } /* #focusProducts #btnMag { width: 260px; height: 196px; position: relative; } #focusProducts #btnMag li { display: inline; } #focusProducts #btnMag li a { float: left; width: 260px; height: 0; padding-top: 196px; overflow: hidden; } #focusProducts #btnMag li a:hover { background-position: 0px -196px !important; } */ #focusProducts a { float: left; width: 260px; height: 0; padding-top: 196px; overflow: hidden; background-position: 0 0; background-repeat: no-repeat; } #focusProducts a:hover { background-position: 0px -196px !important; } /* Bottom - Logo Brands -------------------------------------------------- */ #bottom { background: #fff; } #bottom #brands { background: url(/img/UI/home/brands_bkg.png) no-repeat #fff; width: 100%; height: 74px; margin-bottom: 38px; position: relative; } #bottom #brands #prevBrands { position: absolute; left: 10px; width: 29px; height: 74px; } #bottom #brands #nextBrands { position: absolute; right: 10px; width: 29px; height: 74px; } #bottom #brands #prevBrands a, #bottom #brands #nextBrands a { float: left; width: 29px; height: 0; padding-top: 74px; overflow: hidden; background-repeat: no-repeat; } #bottom #brands #prevBrands a { background: url(/img/UI/home/brands_btn_L.png); } #bottom #brands #nextBrands a { background: url(/img/UI/home/brands_btn_R.png); } #bottom #brands #prevBrands a:hover, #bottom #brands #nextBrands a:hover { background-position: 0 -74px; } #bottom #brands #prevBrands a:active, #bottom #brands #nextBrands a:active { background-position: 0 -148px; } /* .jcarousel */ #stripe-brands.jcarousel-skin-brands { width: 840px; height: 74px; padding: 0px 55px; overflow: hidden; } #stripe-brands.jcarousel-skin-brands li { display: inline; margin: 0 50px; } /* This
element is wrapped by jCarousel around the list and has the classname "jcarousel-container". */ .jcarousel-container { position: relative; } .jcarousel-list { z-index: 1; overflow: hidden; position: relative; top: 0; left: 0; margin: 0; padding: 0; } .jcarousel-clip { z-index: 2; padding: 0; margin: 0; overflow: hidden; position: relative; } .jcarousel-list li, .jcarousel-item { float: left; list-style: none; width: 75px; height: 75px; /* Set the width/height explicitly. No width/height causes infinite loops. */ } /* Buttons added dynamically by jCarousel before the