body { margin: 0px; padding: 0px; background: url(../imgs/body_bg.jpg) repeat-x #bbb; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; } #content-home {position:relative;margin-bottom:20px;} .h-intro {padding:0px 320px 25px 45px; font-size:13px;} #h-bottom-1, #h-bottom-2, #h-bottom-3 {float:left;} #h-bottom-1 h2, #h-bottom-2 h2, #h-bottom-3 h2 {font-family:Verdana, Arial, Helvetica, sans-serif;} #h-bottom-1 { width:290px; margin-right: 45px; padding-left: 45px; line-height:auto; } #h-bottom-1 h2 {font-size:14px; font-weight:bold;} #h-bottom-1-expertise {overflow:auto;margin-bottom:24px;} #h-bottom-1-shipping {overflow:auto;} #h-bottom-1-expertise img, #h-bottom-1-shipping img{ display:block; float:left; margin-right:20px; border:3px solid #b3b3b3; } #h-bottom-1-expertise p, #h-bottom-1-shipping p { line-height:13px; color:#555;margin:0;padding:0 } #h-bottom-1-expertise h2, #h-bottom-1-shipping h2 {margin:0;padding:0; } #h-bottom-1-expertise h2 {padding-top:8px;} #h-bottom-1-shipping h2 {padding-top:10px;} #h-bottom-2 {width:232px;} #h-bottom-2 h2{font-size:14px; font-weight:bold;padding:0;margin:0;} #h-bottom-2 img{border:3px solid #b3b3b3;margin-bottom:14px;} #h-bottom-3 {width:206px;position:absolute; left:684px; top:288px;} *html #h-bottom-3 {left:684px;} #placard-finder, #sign-finder, #label-finder { height: 31px; width: 206px; margin-bottom:10px; padding-top:36px; padding-left:10px; } #placard-finder input.textfield, #sign-finder input.textfield, #label-finder input.textfield { background-color:#eaeaea; color:#000; border:none; padding:3px; font-size:12px; width:151px; float:left; margin-right:3px; } #placard-finder .submit, #sign-finder .submit, #label-finder .submit { border:none; width:29px; height:20px; border:none; float:left; } #placard-finder { background: url(../imgs/h_placardfinder.gif) no-repeat;} #sign-finder {background: url(../imgs/h_signfinder.gif) no-repeat;margin-bottom:10px;} #label-finder {background: url(../imgs/h_labelfinder.gif) no-repeat;} *html #img-rotator {height:1%} #img-rotator {height:280px; width:900px;overflow:hidden; margin:0 auto;} #img-rotator-left{float:left; width:312px;height:280px;margin-right:22px;} #img-rotator-middle{float:left; width:230px;height:280px;} #img-rotator-right{float:left; width:312px;height:280px;margin-left:22px;} /*** Featured Products - Homepage ***/ h2.ftr-prod-hdr{margin-left:40px; padding:0;} #hm-bottom {clear:both; overflow:hidden;} *html #hm-bottom {height:1%} #hm-bottom ul { list-style-type:none; margin:0;padding:0;} #hm-bottom li{ margin:0;padding:0; display:inline;} #hm-bottom li a{display:block; width:232px; height:187px; background:url(../imgs/ftr-prod-bg.png) no-repeat top left; float:left; text-decoration:none;margin-right:7px;} #hm-bottom li a span{ visibility:hidden;} #hm-bottom li a:hover{text-decoration:none;} #hm-bottom li.last-item a {margin-right:0;} /********************** Styles Added for new homepage layout DECEMBER 2011**********************/ /** Theere are new div structure changes made to the new homepage: - div 'wrapper' has increased in width to 1030 from 950. - 'header', '.footer-container', 'hm-secondfeaturedproduct' are centered and with a width of 950px. - 'hm-mainfeaturedproduc' is using background image for the larger text; - 'hm-secondfeaturedproduct' is using background image for the larger text; - new divs are 'carousel1','carousel2' using the full extent of width, 1030px, rollovers done in css on "li". Doing rollovers on image will not work because of carousel js renaming images. - new div 'sidebar-home' 40px from right side holding 'box-expressorder','box-labelfinder','box-chatonline'. - footer has a new 'dd.socialmediaicons' with smaller social media icons. **/ #wrapper{width:1030px;} #header{width: 950px; margin:0 auto;} p{font-size:13px;} h1,h2,h3{ font-family:Verdana, Geneva, sans-serif;} h2{ font-size:16px; font-weight:bold;} h2 a{color:#000; text-decoration:none;} h2 a:hover{color:#F2000F; text-decoration:none;} /***.hdr-phone {left: 485px; position: absolute;top: 28px;} .hdr-fb{left: 650px; position: absolute; top: 38px;} .hdr-tw{left: 684px;position: absolute;top: 38px;} .hdr-blog{left: 718px; position: absolute; top: 38px;} .hdr-yt{left: 752px; position: absolute; top: 38px;}***/ #hm-col-left{ width:704px; float:left; margin-right:30px; margin-top:30px;} #mainfeaturedproduct-container{ margin-left:40px; position:relative; width:704px; height:230px;} /*** Main Feature Promo ***/ div.hm-mainfeaturedproduct{ margin-left:40px; position:relative; width:704px; height:230px; left:-40px !important;} div.hm-mainfeaturedproduct.feature-one{background-image:url(../imgs2/lm-featuredproduct1.jpg); background-repeat:no-repeat;/* background image with "UN Packaging"*/ /* background-image:url(../imgs2/lm-featuredproductB.jpg); background-repeat:no-repeat;*/ /*background image without "UN Packaging"*/} div.hm-mainfeaturedproduct.feature-two{background-image:url(../imgs2/lm-featuredproduct2.jpg); background-repeat:no-repeat;} div.hm-mainfeaturedproduct.feature-three{background-image:url(../imgs2/lm-featuredproduct3.jpg); background-repeat:no-repeat;} div.hm-mainfeaturedproduct.feature-four{background-image:url(../imgs2/lm-featuredproduct4.jpg); background-repeat:no-repeat;} div.hm-mainfeaturedproduct.feature-five{background-image:url(../imgs2/lm-featuredproduct5.jpg); background-repeat:no-repeat;} #mainfeaturedproduct-title{position:absolute; top:20px; left:25px; width:370px;} #mainfeaturedproduct-title .title1{color:#FFF; font-weight:bold; font-size:42px;font-family:Arial, Helvetica, sans-serif;} #mainfeaturedproduct-title .title2{color: #FFFFFF; font-size:13px; display: block; line-height: 18px; margin-top: 10px;} #mainfeaturedproduct-title img{ margin:20px 0 0 0;} /*** #hm1 contains next 3 areas: Regulatory Expertise, Custom Products, For over 40 years.. ***/ #hm1{width:704px; overflow:auto; margin-left:40px; min-height:342px;} #hm-regulatoryexpertise{margin:30px 20px 0 0; float:left; width:352px;} #hm-customproducts{margin:30px 0px 0 0; float:left; width:332px;} #hm-intro{ width:704px; margin-top:10px; float:left;} #hm1 img{float:left; margin-right:10px;} #hm-intro p{padding-top:20px; padding-left:180px;} /*** Second Featured Promo: Packaging Solutions ***/ #hm-secondfeaturedproduct{margin:20px 40px; width:950px; height:227px; position:relative; background-image:url(../imgs2/lm-secondfeaturedproduct.png); background-repeat:no-repeat; /*comment off this row for text version*/} #secondfeaturedproduct-title{display:none; /*comment off 'display' for text version*/ position: absolute; right: 170px; text-align: right; top: 60px;} #secondfeaturedproduct-title .title1{color:#2c2c2c; font-size:48px; font-weight: bold; font-family:Arial, Helvetica, sans-serif;} #secondfeaturedproduct-title .title2{color:#828282; font-size:24px; letter-spacing: 0px;} #secondfeaturedproduct-links{position:absolute; right: 23px; top: 80px; border-left:solid 1px #828282; padding-left:20px;} #secondfeaturedproduct-links a{color:#2c2c2c; text-decoration:none; margin-bottom:5px; display:block;} #secondfeaturedproduct-links a:hover{color:#F2000F;} /*** Carousel1:PopularProducts ***/ #carousel1{ margin-left:0px;} #carousel1 ul li a{display:block; width:217px; height:181px;} #carousel1 ul li.prod1{ background-image:url(../imgs2/prod1.png); background-repeat:no-repeat;} #carousel1 ul li.prod1:hover{ background-image:url(../imgs2/prod1-o.png); background-repeat:no-repeat;} #carousel1 ul li.prod2{ background-image:url(../imgs2/prod2.png); background-repeat:no-repeat;} #carousel1 ul li.prod2:hover{ background-image:url(../imgs2/prod2-o.png); background-repeat:no-repeat;} #carousel1 ul li.prod3{ background-image:url(../imgs2/prod3.png); background-repeat:no-repeat;} #carousel1 ul li.prod3:hover{ background-image:url(../imgs2/prod3-o.png); background-repeat:no-repeat;} #carousel1 ul li.prod4{ background-image:url(../imgs2/prod4.png); background-repeat:no-repeat;} #carousel1 ul li.prod4:hover{ background-image:url(../imgs2/prod4-o.png); background-repeat:no-repeat;} #carousel1 ul li.prod5{ background-image:url(../imgs2/prod5.png); background-repeat:no-repeat;} #carousel1 ul li.prod5:hover{ background-image:url(../imgs2/prod5-o.png); background-repeat:no-repeat;} #carousel1 ul li.prod6{ background-image:url(../imgs2/prod6.png); background-repeat:no-repeat;} #carousel1 ul li.prod6:hover{ background-image:url(../imgs2/prod6-o.png); background-repeat:no-repeat;} #carousel1 ul li.prod7{ background-image:url(../imgs2/prod7.png); background-repeat:no-repeat;} #carousel1 ul li.prod7:hover{ background-image:url(../imgs2/prod7-o.png); background-repeat:no-repeat;} /*** Carousel2:FeaturedProducts ***/ #carousel2{margin-left:0px;} #carousel2 ul li a{display:block; width:217px; height:181px;} #carousel2 ul li.featured1{ background-image:url(../imgs2/featured1.png); background-repeat:no-repeat;} #carousel2 ul li.featured1:hover{ background-image:url(../imgs2/featured1-o.png); background-repeat:no-repeat;} #carousel2 ul li.featured2{ background-image:url(../imgs2/featured2.png); background-repeat:no-repeat;} #carousel2 ul li.featured2:hover{ background-image:url(../imgs2/featured2-o.png); background-repeat:no-repeat;} #carousel2 ul li.featured3{ background-image:url(../imgs2/featured3.png); background-repeat:no-repeat;} #carousel2 ul li.featured3:hover{ background-image:url(../imgs2/featured3-o.png); background-repeat:no-repeat;} #carousel2 ul li.featured4{ background-image:url(../imgs2/featured4.png); background-repeat:no-repeat;} #carousel2 ul li.featured4:hover{ background-image:url(../imgs2/featured4-o.png); background-repeat:no-repeat;} #carousel2 ul li.featured5{ background-image:url(../imgs2/featured5.png); background-repeat:no-repeat;} #carousel2 ul li.featured5:hover{ background-image:url(../imgs2/featured5-o.png); background-repeat:no-repeat;} #carousel2 ul li.featured6{ background-image:url(../imgs2/featured6.png); background-repeat:no-repeat;} #carousel2 ul li.featured6:hover{ background-image:url(../imgs2/featured6-o.png); background-repeat:no-repeat;} #carousel2 ul li.featured7{ background-image:url(../imgs2/featured7.png); background-repeat:no-repeat;} #carousel2 ul li.featured7:hover{ background-image:url(../imgs2/featured7-o.png); background-repeat:no-repeat;} /*** Sidebar has 3 areas: Expresorder, labelfinder, Chatonline ***/ #sidebar-home{ width:216px; float:right; margin:30px 40px 260px 0;} .btnaddtocart{ background:none; border:none; background-image:url(../imgs2/btn-addtocart.png); background-repeat:no-repeat; width:94px; height:22px; cursor:pointer;} .btnaddtocart-o{background:none; border:none; background-image:url(../imgs2/btn-addtocart-o.png);background-repeat:no-repeat;width:94px; height:22px; cursor:pointer;} #sidebar-home #box-labelfinder{height: 139px; margin-bottom: 8px; margin-top:2px; padding-left: 21px; padding-top: 12px; width: 195px; background-image:url(../imgs2/box-labelfinder.png); background-repeat:no-repeat; position:relative; top:257px} #sidebar-home #box-labelfinder .finder{color:#333333; font-size:20px; font-family:Arial, Helvetica, sans-serif;} #sidebar-home #box-chatonline{margin-bottom:30px; padding-left: 21px; padding-top:113px;width:195px; height:44px; background-image:url(../imgs2/box-chatonline.png); background-repeat:no-repeat; position:relative; top:256px } #sidebar-home input.textfield{background-color:#eaeaea; color:#000; border:none; padding:3px; font-size:11px; margin-right:3px;} #sidebar-home input.textfield.qty{ width:30px; margin-bottom: 12px;color:gray;} #sidebar-home input.textfield.item{ width:130px;color:gray; margin-bottom: 12px; margin-left:4px;} a.exp-addmore{color:#fff; text-decoration:none;padding-left:20px; width:78px; display:block; float:left; margin-right:5px} a.exp-addmore img {margin-right:3px} a.exp-addmore:hover{color:#fff;} #sidebar-home #box-expressorder input.submit{border:none; margin-left: 85px; margin-top: 12px;} #box-expressorder { position:absolute; z-index:100} .b1 { background:url(../imgs2/box-exp1.png) top center no-repeat;width:195px; height:96px; padding-left: 21px; padding-top: 75px;} .b2 { background:url(../imgs2/box-exp2.png) repeat-y; width:195px;padding-left: 21px; overflow:hidden;} .b3 { background:url(../imgs2/box-exp3.png); width:216px; height:58px;} #sidebar-home #box-labelfinder input.submit{border:none;} #sidebar-home #box-labelfinder input.submit, #sidebar-home #box-labelfinder input.textfield{float:left;} #sidebar-home #box-labelfinder input.btngo{margin-top:0px; background:none; border:none; background-image:url(../imgs2/btn-go.png); background-repeat:no-repeat; width:33px; height:20px; cursor:pointer;} #sidebar-home #box-labelfinder input.btngo-o{margin-top:0px; background:none; border:none; background-image:url(../imgs2/btn-go-o.png); background-repeat:no-repeat; width:33px; height:20px; cursor:pointer;} #sidebar-home #box-labelfinder input.textfield.lf1{margin-top:2px; margin-bottom:20px;} #sidebar-home #box-labelfinder input.lf2{margin-top:2px;} #sidebar-home #box-labelfinder input.lf4{margin-top:2px;} #sidebar-home #box-labelfinder input.textfield.lf3{margin-top:2px;} /*** Footer ***/ .footer-container {margin:0 auto;} .footer-container dl {margin-right: 65px;} .footer-container dl dd.socialmediaicons{ margin-top:10px; margin-left:0px;} .footer-container dl dd.socialmediaicons a.socialm1, .footer-container dl dd.socialmediaicons a.socialm2{ margin-right:0px;} .footer-container dl dd.socialmediaicons a.socialm3,.footer-container dl dd.socialmediaicons a.socialm4, .footer-container dl dd.socialmediaicons a.socialm5{display: block; float: left; margin-right: 4px; margin-top: 5px;} #pager {position: absolute;right: 294px;text-align: right;top: 236px;z-index: 999;} #pager a { border: 0px solid #ccc; background:#3f3f3f; text-decoration: none; margin: 0 2px; padding: 2px 4px; color:#FFF; } #pager a:hover { background: #5f5f5f; } #pager a.activeSlide { background: #ed1c24; } #pager a:focus { outline: none; }