/* ~~~~~~~~~~~~ Reset Style Sheet ~~~~~~~~~~~~ */ body { background: #efefef url(/assets/images/gradient-background.jpg) repeat-x scroll; overflow: scroll; } h1, h2, h3, h4, a, p, ul, li { font-family: Calibri, Verdana, Arial; padding: 0px; margin: 0px; } li { list-style-type: none; } img { border: none; } #magnet-expert #container { width: 947px; margin: 0 auto; } /* ~~~~~~~~~~~~~~~~~~ Header Styles ~~~~~~~~~~~~~~~~~~ */ #magnet-expert #header { overflow: hidden; } #magnet-expert #header .logo { float: left; } #magnet-expert #header .logo h1 { font-size: 54px; letter-spacing: -1px; } #magnet-expert #header .logo h1 span { color: #aa1c1c; } #magnet-expert #header .logo #tag-line { color: #535353; font-size: 22px; font-style: italic; letter-spacing: -1px; line-height: 22px; padding-left: 110px; } #magnet-expert #header .logo #tag-line span { padding-left: 100px; } #magnet-expert #header .contact-nav { float: right; width: 300px; overflow: hidden; padding: 35px 0 25px 0; color: #999999; font-size: 17px; line-height: 20px; } #magnet-expert #header .contact-nav a { color: #999999; text-decoration: none; } #header .contact-nav a:hover { text-decoration: underline;color: #000;} .lightbox {display: none} /* ~~~ Navigation Styles ~~~ */ #magnet-expert #header #nav { clear: both; } #magnet-expert #header #nav li { float: left; } #magnet-expert #header #nav a { display: block; height: 64px; overflow: hidden; } #magnet-expert #header #nav a span { position: relative; z-index: 10; margin-bottom: -64px; display: block; height: 64px; } #magnet-expert #header #nav .home a, #magnet-expert #header #nav .home a span { background: url(/assets/images/nav-bg.jpg) no-repeat; width: 146px; } #magnet-expert #header #nav .online-shop a, #magnet-expert #header #nav .online-shop a span { background: url(/assets/images/nav-bg.jpg) no-repeat -146px 0; width: 167px; } #magnet-expert #header #nav .about-us a, #magnet-expert #header #nav .about-us a span { background: url(/assets/images/nav-bg.jpg) no-repeat -313px 0; width: 147px; } #magnet-expert #header #nav .press-center a, #magnet-expert #header #nav .press-center a span { background: url(/assets/images/nav-bg.jpg) no-repeat -460px 0; width: 176px; } #magnet-expert #header #nav .education a, #magnet-expert #header #nav .education a span { background: url(/assets/images/nav-bg.jpg) no-repeat -636px 0; width: 155px; } #magnet-expert #header #nav .contact a, #magnet-expert #header #nav .contact a span { background: url(/assets/images/nav-bg.jpg) no-repeat -791px 0; width: 156px; } /* ~~ Rollovers ~~ */ #magnet-expert #header #nav .home a:hover, #magnet-expert #header #nav .home a span:hover { background: url(/assets/images/nav-bg.jpg) no-repeat 0 -64px; } #magnet-expert #header #nav .online-shop a:hover, #magnet-expert #header #nav .online-shop a span:hover { background: url(/assets/images/nav-bg.jpg) no-repeat -146px -64px; } #magnet-expert #header #nav .about-us a:hover, #magnet-expert #header #nav .about-us a span:hover { background: url(/assets/images/nav-bg.jpg) no-repeat -313px -64px; } #magnet-expert #header #nav .press-center a:hover, #magnet-expert #header #nav .press-center a span:hover { background: url(/assets/images/nav-bg.jpg) no-repeat -460px -64px; } #magnet-expert #header #nav .education a:hover, #magnet-expert #header #nav .education a span:hover { background: url(/assets/images/nav-bg.jpg) no-repeat -636px -64px; } #magnet-expert #header #nav .contact a:hover, #magnet-expert #header #nav .contact a span:hover { background: url(/assets/images/nav-bg.jpg) no-repeat -791px -64px; } #magnet-expert #header .logo h1 { width: 491px; height: 72px; overflow: hidden; } #magnet-expert #header .logo h1 a, #magnet-expert #header .logo h1 a span { background: url(/assets/images/magnetexpert_logo.png) no-repeat; width: 491px; height: 72px; overflow: hidden; } #magnet-expert #header .logo h1 a span { position: relative; z-index: 1; display: block; } /* ~~~~~~~~~~~~~~~~~~ Breadcrumbs ~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #magnet-expert .bread-crumbs, #magnet-expert .bread-crumbs a { font-size: 11px; font-family: arial; color: #888888; padding: 5px 0 5px 5px; text-decoration: none; } #magnet-expert .bread-crumbs a:hover { text-decoration: underline; color: #000; } /* ~~~~~~~~~~~~~~~~~~ Homepage Styles ~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~ Front Page Banner ~~~~ */ #magnet-expert #content.home .slideshow { width: 939px; height: 235px; overflow: hidden; clear: both; position: relative; } #magnet-expert #content.home .slideshow #magnet-facts { background: url(/assets/images/slider-magnet-facts.jpg) no-repeat; width: 939px; height: 235px; overflow: hidden; } #magnet-expert #content.home .slideshow #magnetic-fields { background: url(/assets/images/slider-magnetic-fields.jpg) no-repeat; width: 939px; height: 235px; overflow: hidden; } #magnet-expert #content.home #slideshow-shadow { width: 937px; height: 120px; background: url(/assets/images/slider-shadow.jpg) no-repeat; margin-top: -60px; } #magnet-expert #content.home .slideshow .link { width: 935px; height: 235px; display: block; } /* ~~~ Right Column ~~~ */ #magnet-expert #content #r-col { width: 284px; float: right; margin-right: 10px; margin-top: 10px; } #magnet-expert #content #r-col .r-box { background: #d8d8d8; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; padding: 10px; position: relative; } #magnet-expert #content .txt-small { font-family: Arial; font-size : 12px; color: #575757; padding-bottom: 25px; } #magnet-expert #content .txt-small a { font-size: 12px; text-decoration: underline; color: #AA1C1C; } #magnet-expert #content #r-col #r-box-shadow { background: url(/assets/images/rightm-menu-shadow.jpg) no-repeat; width: 300px; height: 44px; margin: -15px 0 0 -10px;} /* ~~~ News Feed ~~~ */ #magnet-expert #content.home #r-col #latest-news p, #magnet-expert #content.home #r-col #latest-news p { font-size: 12px; } #magnet-expert #content.home #r-col #latest-news h3 { font-size: 20px; padding-bottom: 10px; } #magnet-expert #content.home #r-col #latest-news { text-decoration: none; } #magnet-expert #content.home #r-col #latest-news:hover { text-decoration: underline; } #magnet-expert #content.home #r-col #latest-news .title { font-weight: bold; font-size: 13px; color: #353535 } #magnet-expert #content.home #r-col #latest-news .desc { color: #000 } #magnet-expert #content.home #r-col #latest-news .date { color: #919191; } #magnet-expert #content.home #r-col #latest-news { padding-bottom: 20px; background: url(/assets/images/divider.jpg) no-repeat bottom; } /* ~~~ Press Releases ~~~ */ #magnet-expert #content.home #press-release { margin-top: 20px; } #magnet-expert #content.home #press-release a { text-decoration: none; } #magnet-expert #content.home #press-release a:hover { text-decoration: underline; } #magnet-expert #content.home #press-release .title a { font-size: 13px; color: #353535; font-weight: bold; } #magnet-expert #content.home #press-release .info a { font-size: 12px; color: #000 } #magnet-expert #content.home #press-release .link a { font-size: 13px; font-weight: bold; color: #000; margin-top: 10px; } #magnet-expert #content.home #press-release { padding-bottom: 20px; background: url(/assets/images/divider.jpg) no-repeat bottom; } /* ~~~ Twitter Feed ~~~ */ #magnet-expert #content.home #twitter { width: 262px; height: 150px; overflow: hidden; background: url(/assets/images/twitter-bg.jpg) no-repeat; margin: 20px 0;} #magnet-expert #content.home #twitter .link { color: #51b0d6; } #magnet-expert #content.home #twitter .twtr-hd, #magnet-expert #content.home #twitter .twtr-ft, #magnet-expert #content.home #twitter .twtr-timestamp, #magnet-expert #content.home #twitter .twtr-reply, #magnet-expert #content.home #twitter .twtr-rt, #magnet-expert #content.home #twitter .twtr-fav { display: none; } #magnet-expert #content.home #twitter .twtr-tweet-text { padding-top: 5px } #magnet-expert #content.home #twitter .twit-link, #magnet-expert #content.home #twitter .twit-link a { font-size: 12px; color: #3f93b5; padding-top: 30px; } #magnet-expert #content.home #twitter twtr-tweets { height: 70px; overflow: hidden; } /* ~~~ Left Column ~~~ */ #magnet-expert #content.home #customer-quotes { font-size: 15px; color: #959494; position: relative; height: 115px; overflow: hidden; padding-top: 20px; margin-top: -20px; } #magnet-expert #content.home #customer-quotes .quote { position:absolute; display:none;} #magnet-expert #content.home #customer-quotes span { font-size: 34px; font-style: italic; line-height: 32px; letter-spacing: -1px; } #magnet-expert #content #l-col { width: 635px; overflow: hidden; float: left; } #magnet-expert #content.home .welcome { font-size: 28px; } #magnet-expert #content.home .welcome span { color: #aa1c1c; } /* ~~~ Category Links ~~~ */ #magnet-expert #content.home #cat-links div { float: left; overflow: hidden; margin-right: 9px; padding-top: 135px; padding-bottom: 20px; } #magnet-expert #content.home #cat-links div.last { margin-right: 0px; } #magnet-expert #content.home #cat-links .link-services { background: url(/assets/images/services-bg.jpg) no-repeat; width: 204px; overflow: hidden; } #magnet-expert #content.home #cat-links .link-services:hover { background-position: -204px 0; } #magnet-expert #content.home #cat-links .link-online-shop { background: url(/assets/images/online-shop-bg.jpg) no-repeat; width: 204px; overflow: hidden; } #magnet-expert #content.home #cat-links .link-online-shop:hover { background-position: -204px 0; } #magnet-expert #content.home #cat-links .link-education { background: url(/assets/images/education-bg.jpg) no-repeat; width: 208px; } #magnet-expert #content.home #cat-links .link-education:hover { background-position: -208px 0; } #magnet-expert #content.home #cat-links a { font-size: 12px; color: #000; text-decoration: none;} #magnet-expert #content.home #cat-links a:hover { text-decoration: underline; } #magnet-expert #content.home #cat-links li { height: 16px; } #magnet-expert #content.home #cat-links h3 a { color: #aa1c1c; font-size: 20px;} /* ~~~~~~~~~~~~~~~~~~ About Us ~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #magnet-expert #content.about-us h2 { font-size: 55px; letter-spacing: -1px; } #magnet-expert #content.about-us #link-box { background: url(/assets/images/slider-aboutus.jpg) no-repeat; width: 940px; height: 236px; position: relative; margin: 0 auto; } #magnet-expert #content.about-us #link-box-shadow { width: 937px; height: 120px; background: url(/assets/images/slider-shadow.jpg) no-repeat; margin-top: -60px; } #magnet-expert #content.about-us #link-box .links { width: 600px; height: 80px; position: absolute; background: #000; opacity:0.8; filter:alpha(opacity=80); /* For IE8 and earlier */ top: 175px; left: 180px;} #magnet-expert #content.about-us #link-box .links h4, #magnet-expert #content.about-us #link-box .links a { color: #fff; font-size: 24px; } #magnet-expert #content.about-us .about-services, #magnet-expert #content.about-us .about-manufacturing, #magnet-expert #content.about-us .about-history { float: left; border-right: 1px solid #3f3f3f; height: 80px; width: 190px; padding-right: 4px; margin-left: 5px; position: relative; } #magnet-expert #content.about-us #link-box .about-history { border: none; } #magnet-expert #content.about-us #link-box .link { width: 200px; height: 80px; display: block; position: absolute; margin-left: -5px; } #magnet-expert #content.about-us #link-box .link:hover { background: #fff; opacity:0.1; filter:alpha(opacity=10); /* For IE8 and earlier */ } #magnet-expert #content .txt-quote { font-size: 37px; letter-spacing: -1px; color: #aa1c1c; font-style: italic; line-height: 37px; padding-bottom: 10px;} #magnet-expert #content.about-us .txt-small { padding-bottom: 10px; } /* ~~~~~~~~~~~ Customer Logos ~~~~~~~~~~~ */ #magnet-expert #content.about-us .customer-logos { overflow: hidden; } #magnet-expert #content.about-us .customer-logos li { float: left; overflow: hidden } #magnet-expert #content.about-us .customer-logos li span { position: relative; z-index: 10; display: block; overflow: hidden;} /* ~~~ ITV ~~~ */ #magnet-expert #content.about-us .itv, #magnet-expert #content.about-us .itv span { width: 142px; height: 76px; background: url(/assets/images/customer-logos.jpg) no-repeat; } #magnet-expert #content.about-us .itv:hover, #magnet-expert #content.about-us .itv span:hover { background-position: -263px 0; } /* ~~~ Rolls Royce ~~~ */ #magnet-expert #content.about-us .rolls-royce, #magnet-expert #content.about-us .rolls-royce span { width: 40px; height: 76px; background: url(/assets/images/customer-logos.jpg) no-repeat -142px 0; } #magnet-expert #content.about-us .rolls-royce:hover, #magnet-expert #content.about-us .rolls-royce span:hover { background-position: -405px 0; } /* ~~~ Metropolitan Police ~~~ */ #magnet-expert #content.about-us .met-police, #magnet-expert #content.about-us .met-police span { width: 60px; height: 76px; background: url(/assets/images/customer-logos.jpg) no-repeat -204px 0; } #magnet-expert #content.about-us .met-police:hover, #magnet-expert #content.about-us .met-police span:hover { background-position: -467px 0; } /* ~~~ Barcleys ~~~ */ #magnet-expert #content.about-us .barcleys, #magnet-expert #content.about-us .barcleys span { width: 140px; height: 58px; background: url(/assets/images/customer-logos.jpg) no-repeat 0 -76px; } #magnet-expert #content.about-us .barcleys:hover, #magnet-expert #content.about-us .barcleys span:hover { background-position: -263px -76px; } /* ~~~ Disney ~~~ */ #magnet-expert #content.about-us .disney, #magnet-expert #content.about-us .disney span { width: 117px; height: 58px; background: url(/assets/images/customer-logos.jpg) no-repeat -145px -76px; } #magnet-expert #content.about-us .disney:hover, #magnet-expert #content.about-us .disney span:hover { background-position: -408px -76px; } /* ~~~ SKY ~~~ */ #magnet-expert #content.about-us .sky, #magnet-expert #content.about-us .sky span { width: 66px; height: 48px; background: url(/assets/images/customer-logos.jpg) no-repeat 0 -134px; } #magnet-expert #content.about-us .sky:hover, #magnet-expert #content.about-us .sky span:hover { background-position: -263px -134px; } /* ~~~ Lagonda ~~~ */ #magnet-expert #content.about-us .lagonda, #magnet-expert #content.about-us .lagonda span { width: 147px; height: 48px; background: url(/assets/images/customer-logos.jpg) no-repeat -66px -134px; } #magnet-expert #content.about-us .lagonda:hover, #magnet-expert #content.about-us .lagonda span:hover { background-position: -329px -134px; } /* ~~~ NHS ~~~ */ #magnet-expert #content.about-us .nhs, #magnet-expert #content.about-us .nhs span { width: 55px; height: 30px; background: url(/assets/images/customer-logos.jpg) no-repeat -50px -182px; } #magnet-expert #content.about-us .nhs:hover, #magnet-expert #content.about-us .nhs span:hover { background-position: -313px -182px; } /* ~~~ Vodafone ~~~ */ #magnet-expert #content.about-us .vodafone, #magnet-expert #content.about-us .vodafone span { width: 88px; height: 62px; background: url(/assets/images/customer-logos.jpg) no-repeat -106px -192px; } #magnet-expert #content.about-us .vodafone:hover, #magnet-expert #content.about-us .vodafone span:hover { background-position: -369px -192px; } /* ~~~ WB ~~~ */ #magnet-expert #content.about-us .wb, #magnet-expert #content.about-us .wb span { width: 55px; height: 68px; background: url(/assets/images/customer-logos.jpg) no-repeat -205px -169px; } #magnet-expert #content.about-us .wb:hover, #magnet-expert #content.about-us .wb span:hover { background-position: -468px -169px; } /* ~~~ BBC ~~~ */ #magnet-expert #content.about-us .bbc, #magnet-expert #content.about-us .bbc span { width: 82px; height: 25px; background: url(/assets/images/customer-logos.jpg) no-repeat -10px -219px; } #magnet-expert #content.about-us .bbc:hover, #magnet-expert #content.about-us .bbc span:hover { background-position: -273px -219px; } /* ~~~ Virgin Media ~~~ */ #magnet-expert #content.about-us .virgin-media, #magnet-expert #content.about-us .virgin-media span { width: 86px; height: 62px; background: url(/assets/images/customer-logos.jpg) no-repeat -10px -255px; } #magnet-expert #content.about-us .virgin-media:hover, #magnet-expert #content.about-us .virgin-media span:hover { background-position: -273px -255px; } /* ~~~ Royal Bank of Scotland ~~~ */ #magnet-expert #content.about-us .rbs, #magnet-expert #content.about-us .rbs span { width: 96px; height: 44px; background: url(/assets/images/customer-logos.jpg) no-repeat -157px -271px; } #magnet-expert #content.about-us .rbs:hover, #magnet-expert #content.about-us .rbs span:hover { background-position: -420px -271px; } /* ~~~~~~~~~~~~~~~~~~ Press Center ~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #magnet-expert #l-col-menu { width: 230px; float: left; } #magnet-expert #l-col-menu .l-box { width: 210px; background: #d8d8d8; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; padding: 10px; position: relative; font-size: 14px; } #magnet-expert #l-col-menu .l-box-shadow { width: 255px; height: 35px; background: url(/assets/images/left-nav-bg.jpg) no-repeat; margin: -15px 0 0 -10px; } #magnet-expert #l-col-menu .divider { width: 200px; height: 2px; overflow: hidden; background: url(/assets/images/divider.jpg) no-repeat; margin: 0 auto;} #magnet-expert #l-col-menu .l-box h3 { font-size: 21px; margin-bottom: 5px; } #magnet-expert #r-col-content { width: 670px; float: right; } #magnet-expert #r-col-content h2 { font-size: 55px; letter-spacing: -1px; line-height: 35px;} #magnet-expert #l-col-menu .article { padding: 20px 0; } #magnet-expert #l-col-menu .article:hover { background: #cecdcd; } #magnet-expert #l-col-menu .article .article-title a { color: #a01a1a; font-weight: bold; text-decoration: none; } #magnet-expert #l-col-menu .article .article-desc a { text-decoration: none; color: #000; } #magnet-expert #l-col-menu .article a:hover { text-decoration: underline; } #magnet-expert #content.press .more-information { font-size: 12px; padding: 10px 0 50px 0; color: #717171; } #magnet-expert #content.press .more-information a { font-size: 12px; color: #717171; } #magnet-expert #content.press #r-col-content.article h2 { font-size: 40px; font-weight: normal; letter-spacing: -1px; margin-bottom: 20px;} #magnet-expert #content.press #r-col-content.article p { padding-bottom: 20px; } #magnet-expert #content.press .article-l-col { width: 350px; float: left; } #magnet-expert #content.press .article-r-col { width: 270px; float: right; height: 100px; } /* ~~~~~~~~~~~~~~~~~~ Online Shop ~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #magnet-expert #content.shop .shop-links a { font-size: 12px; color: #000; text-decoration: none; } #magnet-expert #content.shop .shop-links a:hover { text-decoration: underline; } /* ~~~~ Shop Home Page Categories ~~~~ */ #magnet-expert #content.shop #online-shop-cats li { float: left; padding: 0 7px 10px 0; } #magnet-expert #content.shop #online-shop-cats a, #magnet-expert #content.shop #online-shop-cats a span { display: block; position: relative; overflow: hidden; width: 159px; height: 159px; background: url(/assets/images/online-shop-categories2.jpg) no-repeat; } /* ~~~ Static ~~~ */ #magnet-expert #content.shop #online-shop-cats .adhesive-magnets a, #magnet-expert #content.shop #online-shop-cats .adhesive-magnets a span { background-position: 0 0; } #magnet-expert #content.shop #online-shop-cats .circular-disc-magnets a, #magnet-expert #content.shop #online-shop-cats .circular-disc-magnets a span { background-position: -159px 0; } #magnet-expert #content.shop #online-shop-cats .counter-sunk-magnets a, #magnet-expert #content.shop #online-shop-cats .counter-sunk-magnets a span { background-position: -318px 0; } #magnet-expert #content.shop #online-shop-cats .rectangular-magnets a, #magnet-expert #content.shop #online-shop-cats .rectangular-magnets a span { background-position: -477px 0; } #magnet-expert #content.shop #online-shop-cats .high-power-magnets a, #magnet-expert #content.shop #online-shop-cats .high-power-magnets a span { background-position: 0 -160px; } #magnet-expert #content.shop #online-shop-cats .pot-magnets a, #magnet-expert #content.shop #online-shop-cats .pot-magnets a span { background-position: -159px -160px; } #magnet-expert #content.shop #online-shop-cats .hook-magnets a, #magnet-expert #content.shop #online-shop-cats .hook-magnets a span { background-position: -318px -160px; } #magnet-expert #content.shop #online-shop-cats .recovery-magnets a, #magnet-expert #content.shop #online-shop-cats .recovery-magnets a span { background-position: -477px -160px; } #magnet-expert #content.shop #online-shop-cats .magnetic-tapes a, #magnet-expert #content.shop #online-shop-cats .magnetic-tapes a span { background-position: 0 -480px; } #magnet-expert #content.shop #online-shop-cats .fridge-magnets a, #magnet-expert #content.shop #online-shop-cats .fridge-magnets a span { background-position: -159px -480px; } #magnet-expert #content.shop #online-shop-cats .education-magnets a, #magnet-expert #content.shop #online-shop-cats .education-magnets a span { background-position: -318px -480px; } #magnet-expert #content.shop #online-shop-cats .limescale-magnets a, #magnet-expert #content.shop #online-shop-cats .limescale-magnets a span { background-position: -477px -480px; } #magnet-expert #content.shop #online-shop-cats .therapy-magnets a, #magnet-expert #content.shop #online-shop-cats .therapy-magnets a span { background-position: 0 -320px; } #magnet-expert #content.shop #online-shop-cats .ferrite-magnets a, #magnet-expert #content.shop #online-shop-cats .ferrite-magnets a span { background-position: -159px -320px; } #magnet-expert #content.shop #online-shop-cats .mitre-magnets a, #magnet-expert #content.shop #online-shop-cats .mitre-magnets a span { background-position: -318px -320px; } #magnet-expert #content.shop #online-shop-cats .arc-magnets a, #magnet-expert #content.shop #online-shop-cats .arc-magnets a span { background-position: -477px -320px; } /* ~~~ Rollover ~~~ */ #magnet-expert #content.shop #online-shop-cats .adhesive-magnets a:hover, #magnet-expert #content.shop #online-shop-cats .adhesive-magnets a span:hover { background-position: 0 -637px; } #magnet-expert #content.shop #online-shop-cats .circular-disc-magnets a:hover, #magnet-expert #content.shop #online-shop-cats .circular-disc-magnets a span:hover { background-position: -159px -637px; } #magnet-expert #content.shop #online-shop-cats .counter-sunk-magnets a:hover, #magnet-expert #content.shop #online-shop-cats .counter-sunk-magnets a span:hover { background-position: -318px -637px; } #magnet-expert #content.shop #online-shop-cats .rectangular-magnets a:hover, #magnet-expert #content.shop #online-shop-cats .rectangular-magnets a span:hover { background-position: -477px -637px; } #magnet-expert #content.shop #online-shop-cats .high-power-magnets a:hover, #magnet-expert #content.shop #online-shop-cats .high-power-magnets a span:hover { background-position: 0 -797px; } #magnet-expert #content.shop #online-shop-cats .pot-magnets a:hover, #magnet-expert #content.shop #online-shop-cats .pot-magnets a span:hover { background-position: -159px -797px; } #magnet-expert #content.shop #online-shop-cats .hook-magnets a:hover, #magnet-expert #content.shop #online-shop-cats .hook-magnets a span:hover { background-position: -318px -797px; } #magnet-expert #content.shop #online-shop-cats .recovery-magnets a:hover, #magnet-expert #content.shop #online-shop-cats .recovery-magnets a span:hover { background-position: -477px -797px; } #magnet-expert #content.shop #online-shop-cats .magnetic-tapes a:hover, #magnet-expert #content.shop #online-shop-cats .magnetic-tapes a span:hover { background-position: 0 -1117px; } #magnet-expert #content.shop #online-shop-cats .fridge-magnets a:hover, #magnet-expert #content.shop #online-shop-cats .fridge-magnets a span:hover { background-position: -159px -1117px; } #magnet-expert #content.shop #online-shop-cats .education-magnets a:hover, #magnet-expert #content.shop #online-shop-cats .education-magnets a span:hover { background-position: -318px -1117px; } #magnet-expert #content.shop #online-shop-cats .limescale-magnets a:hover, #magnet-expert #content.shop #online-shop-cats .limescale-magnets a span:hover { background-position: -477px -1117px; } #magnet-expert #content.shop #online-shop-cats .therapy-magnets a:hover, #magnet-expert #content.shop #online-shop-cats .therapy-magnets a span:hover { background-position: 0 -957px; } #magnet-expert #content.shop #online-shop-cats .ferrite-magnets a:hover, #magnet-expert #content.shop #online-shop-cats .ferrite-magnets a span:hover { background-position: -159px -957px; } #magnet-expert #content.shop #online-shop-cats .mitre-magnets a:hover, #magnet-expert #content.shop #online-shop-cats .mitre-magnets a span:hover { background-position: -318px -957px; } #magnet-expert #content.shop #online-shop-cats .arc-magnets a:hover, #magnet-expert #content.shop #online-shop-cats .arc-magnets a span:hover { background-position: -477px -957px; } /* ~~~~~~~~~~~~~~~~~~ Neodymium Magnets ~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #magnet-expert #content.shop #r-col-content h2 { margin-bottom: 20px; } #magnet-expert #content.shop #r-col-content p { padding-bottom: 10px; font-size: 14px } #magnet-expert #content.shop #r-col-content .title { clear: both; font-size: 18px; } #magnet-expert #content.shop #neodymium-image-links { margin: 30px 0 ; overflow: hidden; } #magnet-expert #content.shop .product-features li { list-style-type: disc; list-style-position: inside; margin: 15px 0; } #magnet-expert #content.shop #neodymium-image-links li { float: left; } #magnet-expert #content.shop #neodymium-image-links a, #magnet-expert #content.shop #neodymium-image-links a span { display: block; position: relative; overflow: hidden; } /* ~~~~ Static Links ~~~~ */ /* Small Block Magnets */ #magnet-expert #content.shop #neodymium-image-links .small-block-magnets a, #magnet-expert #content.shop #neodymium-image-links .small-block-magnets a span { width: 105px; height: 122px; background: url(/assets/images/neodymium-magnets.jpg) no-repeat; } /* Medium Block Magnets */ #magnet-expert #content.shop #neodymium-image-links .medium-block-magnets a, #magnet-expert #content.shop #neodymium-image-links .medium-block-magnets a span { width: 130px; height: 122px; background: url(/assets/images/neodymium-magnets.jpg) no-repeat -105px 0; } /* Large Block Magnets */ #magnet-expert #content.shop #neodymium-image-links .large-block-magnets a, #magnet-expert #content.shop #neodymium-image-links .large-block-magnets a span { width: 105px; height: 122px; background: url(/assets/images/neodymium-magnets.jpg) no-repeat -235px 0; } /* Small Disc Magnets */ #magnet-expert #content.shop #neodymium-image-links .small-disc-magnets a, #magnet-expert #content.shop #neodymium-image-links .small-disc-magnets a span { width: 90px; height: 122px; background: url(/assets/images/neodymium-magnets.jpg) no-repeat -350px 0; } /* Medium Disc Magnets */ #magnet-expert #content.shop #neodymium-image-links .medium-disc-magnets a, #magnet-expert #content.shop #neodymium-image-links .medium-disc-magnets a span { width: 110px; height: 122px; background: url(/assets/images/neodymium-magnets.jpg) no-repeat -450px 0; } /* Large Disc Magnets */ #magnet-expert #content.shop #neodymium-image-links .large-disc-magnets a, #magnet-expert #content.shop #neodymium-image-links .large-disc-magnets a span { width: 90px; height: 122px; background: url(/assets/images/neodymium-magnets.jpg) no-repeat -575px 0; } /* Rod Magnets */ #magnet-expert #content.shop #neodymium-image-links .rod-magnets a, #magnet-expert #content.shop #neodymium-image-links .rod-magnets a span { width: 105px; height: 122px; background: url(/assets/images/neodymium-magnets.jpg) no-repeat 0 -122px; } /* Counter-Sunk Magnets */ #magnet-expert #content.shop #neodymium-image-links .counter-sunk-magnets a, #magnet-expert #content.shop #neodymium-image-links .counter-sunk-magnets a span { width: 130px; height: 122px; background: url(/assets/images/neodymium-magnets.jpg) no-repeat -105px -122px; } /* Ring Magnets */ #magnet-expert #content.shop #neodymium-image-links .ring-magnets a, #magnet-expert #content.shop #neodymium-image-links .ring-magnets a span{ width: 105px; height: 122px; background: url(/assets/images/neodymium-magnets.jpg) no-repeat -235px -122px; } /* Pot Magnets */ #magnet-expert #content.shop #neodymium-image-links .pot-magnets a, #magnet-expert #content.shop #neodymium-image-links .pot-magnets a span { width: 90px; height: 122px; background: url(/assets/images/neodymium-magnets.jpg) no-repeat -350px -122px; } /* Hook & EyeBolt Magnets */ #magnet-expert #content.shop #neodymium-image-links .hook-eyebolt-magnets a, #magnet-expert #content.shop #neodymium-image-links .hook-eyebolt-magnets a span { width: 110px; height: 122px; background: url(/assets/images/neodymium-magnets.jpg) no-repeat -450px -122px; } /* Mitre & Arc Magnets */ #magnet-expert #content.shop #neodymium-image-links .mitre-arc-magnets a, #magnet-expert #content.shop #neodymium-image-links .mitre-arc-magnets a span { width: 90px; height: 122px; background: url(/assets/images/neodymium-magnets.jpg) no-repeat -575px -122px; } /* ~~~~ Rollover Links ~~~~ */ #magnet-expert #content.shop #neodymium-image-links .small-block-magnets a:hover, #magnet-expert #content.shop #neodymium-image-links .small-block-magnets a span:hover { background-position: 0 -254px; } /* Medium Block Magnets */ #magnet-expert #content.shop #neodymium-image-links .medium-block-magnets a:hover, #magnet-expert #content.shop #neodymium-image-links .medium-block-magnets a span:hover { background-position: -105px -254px; } /* Large Block Magnets */ #magnet-expert #content.shop #neodymium-image-links .large-block-magnets a:hover, #magnet-expert #content.shop #neodymium-image-links .large-block-magnets a span:hover { background-position: -235px -254px; } /* Small Disc Magnets */ #magnet-expert #content.shop #neodymium-image-links .small-disc-magnets a:hover, #magnet-expert #content.shop #neodymium-image-links .small-disc-magnets a span:hover { background-position: -350px -254px; } /* Medium Disc Magnets */ #magnet-expert #content.shop #neodymium-image-links .medium-disc-magnets a:hover, #magnet-expert #content.shop #neodymium-image-links .medium-disc-magnets a span:hover { background-position: -450px -254px; } /* Large Disc Magnets */ #magnet-expert #content.shop #neodymium-image-links .large-disc-magnets a:hover, #magnet-expert #content.shop #neodymium-image-links .large-disc-magnets a span:hover { background-position: -575px -254px; } /* Rod Magnets */ #magnet-expert #content.shop #neodymium-image-links .rod-magnets a:hover, #magnet-expert #content.shop #neodymium-image-links .rod-magnets a span:hover { background-position: 0 -376px; } /* Counter-Sunk Magnets */ #magnet-expert #content.shop #neodymium-image-links .counter-sunk-magnets a:hover, #magnet-expert #content.shop #neodymium-image-links .counter-sunk-magnets a span:hover { background-position: -105px -376px; } /* Ring Magnets */ #magnet-expert #content.shop #neodymium-image-links .ring-magnets a:hover, #magnet-expert #content.shop #neodymium-image-links .ring-magnets a span:hover { background-position: -235px -376px; } /* Pot Magnets */ #magnet-expert #content.shop #neodymium-image-links .pot-magnets a:hover, #magnet-expert #content.shop #neodymium-image-links .pot-magnets a span:hover { background-position: -350px -376px; } /* Hook & EyeBolt Magnets */ #magnet-expert #content.shop #neodymium-image-links .hook-eyebolt-magnets a:hover, #magnet-expert #content.shop #neodymium-image-links .hook-eyebolt-magnets a span:hover { background-position: -450px -376px; } /* Mitre & Arc Magnets */ #magnet-expert #content.shop #neodymium-image-links .mitre-arc-magnets a:hover, #magnet-expert #content.shop #neodymium-image-links .mitre-arc-magnets a span:hover { background-position: -575px -376px; } /* ~~~~~~~~~~~~~~~~~~~ Ferrite Magnets ~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #magnet-expert #content.shop #ferrite-image-links { margin: 30px 0 ; overflow: hidden; } #magnet-expert #content.shop #ferrite-image-links a, #magnet-expert #content.shop #ferrite-image-links a span { display: block; position: relative; overflow: hidden; } #magnet-expert #content.shop #ferrite-image-links li { float: left; } /* ~~~~~~~~ Static Links ~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* Small Block Magnets */ #magnet-expert #content.shop #ferrite-image-links .disc-magnets a, #magnet-expert #content.shop #ferrite-image-links .disc-magnets a span { width: 105px; height: 122px; background: url(/assets/images/ferrite-magnets.jpg) no-repeat ; } /* Small Block Magnets */ #magnet-expert #content.shop #ferrite-image-links .ring-magnets a, #magnet-expert #content.shop #ferrite-image-links .ring-magnets a span { width: 120px; height: 122px; background: url(/assets/images/ferrite-magnets.jpg) no-repeat -105px 0; } /* Small Block Magnets */ #magnet-expert #content.shop #ferrite-image-links .block-magnets a, #magnet-expert #content.shop #ferrite-image-links .block-magnets a span { width: 105px; height: 122px; background: url(/assets/images/ferrite-magnets.jpg) no-repeat -235px 0; } /* Small Block Magnets */ #magnet-expert #content.shop #ferrite-image-links .channel-magnets a, #magnet-expert #content.shop #ferrite-image-links .channel-magnets a span { width: 120px; height: 122px; background: url(/assets/images/ferrite-magnets.jpg) no-repeat -335px 0; } /* Small Block Magnets */ #magnet-expert #content.shop #ferrite-image-links .pot-magnets a, #magnet-expert #content.shop #ferrite-image-links .pot-magnets a span { width: 100px; height: 122px; background: url(/assets/images/ferrite-magnets.jpg) no-repeat -458px 0; } /* Small Block Magnets */ #magnet-expert #content.shop #ferrite-image-links .hook-magnets a, #magnet-expert #content.shop #ferrite-image-links .hook-magnets a span { width: 120px; height: 122px; background: url(/assets/images/ferrite-magnets.jpg) no-repeat -555px 0; } /* ~~~~~~~~ Rollovers ~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* Small Block Magnets */ #magnet-expert #content.shop #ferrite-image-links .disc-magnets a:hover, #magnet-expert #content.shop #ferrite-image-links .disc-magnets a span:hover { background-position: 0 -123px; } /* Small Block Magnets */ #magnet-expert #content.shop #ferrite-image-links .ring-magnets a:hover, #magnet-expert #content.shop #ferrite-image-links .ring-magnets a span:hover { background-position: -105px -123px; } /* Small Block Magnets */ #magnet-expert #content.shop #ferrite-image-links .block-magnets a:hover, #magnet-expert #content.shop #ferrite-image-links .block-magnets a span:hover { background-position: -235px -123px; } /* Small Block Magnets */ #magnet-expert #content.shop #ferrite-image-links .channel-magnets a:hover, #magnet-expert #content.shop #ferrite-image-links .channel-magnets a span:hover { background-position: -335px -123px; } /* Small Block Magnets */ #magnet-expert #content.shop #ferrite-image-links .pot-magnets a:hover, #magnet-expert #content.shop #ferrite-image-links .pot-magnets a span:hover { background-position: -458px -123px; } /* Small Block Magnets */ #magnet-expert #content.shop #ferrite-image-links .hook-magnets a:hover, #magnet-expert #content.shop #ferrite-image-links .hook-magnets a span:hover { background-position: -555px -123px; } /* ~~~~~~~~~~~~~~~~~~ Education Center ~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #magnet-expert #content.education #r-col-content { width: 697px; } #magnet-expert #content.education h3 { line-height: 18px; } #magnet-expert #content.education .l-box a { color: #000; text-decoration: none; } #magnet-expert #content.education li { padding: 5px 0; } #magnet-expert #content.education a:hover { text-decoration: underline; } #magnet-expert #content.education .divider { margin: 10px 0; } /* ~~~ Article Links ~~~ */ #magnet-expert #content.education #magnet-facts { background: url(/assets/images/edu-FunMagnetFacts.jpg) no-repeat; margin-top: 30px; } #magnet-expert #content.education #magnet-fields { background: url(/assets/images/edu-Magnet-Fields.jpg) no-repeat; } #magnet-expert #content.education .content-link { width: 692px; height: 223px; position: relative; } #magnet-expert #content.education .content-link .link { width: 692px; height: 223px; position: absolute; } #magnet-expert #content.education .content-link-shadow { background: url(/assets/images/edu-shadow.jpg); width: 686PX; height: 106px; margin-top: -60px; } /* ~~~ Fun Magnet Facts ~~~ */ #magnet-expert #content.education #r-col-content p { font-size: 14px; padding-top: 15px; } #magnet-expert #content.education #r-col-content a { color: #aa1c1c; } #magnet-expert #content.education #r-col-content a:hover { font-weight: bold; } /* ~~~ Magnets & Magnetic Fields ~~~ */ #magnet-expert #content.education #r-col-content .mag-field { margin-left: -10px; margin-top: 20px; } /* ~~~~~~~~~~~~~~~~~~ Press Center ~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #magnet-expert #content.press h2 { margin-bottom: 20px; } #magnet-expert #content.press #r-col-content.home p { font-size: 14px; padding: 10px; } /* ~~~~~~~~~~~~~~~~~~ Contact Us ~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #magnet-expert #content.contact h2 { font-size: 55px; letter-spacing: -1px; line-height: 35px; margin: 10px 0 30px 0 } /* ~~~~~~~~~~~~~~~~~~ Footer Styles ~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #magnet-expert #footer { clear: both; width: 943px; height: 100px; overflow: hidden; background: url(/assets/images/footer-bg.jpg) no-repeat; padding-top: 40px; } #magnet-expert #footer p { font-weight: bold; color: #878787; font-size: 11px; } #magnet-expert #footer #shop_links { font-size: 14px; padding-top: 10px; color: #000; } #magnet-expert #footer #shop_links a { font-size: 14px; font-weight: normal; text-decoration: none; color: #AA1C1C; } #magnet-expert #footer #shop_links a:hover { text-decoration: underline; } #magnet-expert #footer #shop_links span { font-weight: normal; color: #b3b3b3 ;}