/*======================================================= CSS Document for Instant Waste Management =======================================================*/ @import url("global.css"); .hidden { display: none; visibility: hidden; } .show { display: block; visibility: visible; } /*============================================================= Main layout =============================================================*/ .wrapper { width: 100%; height: auto; display: block; margin: 0 auto; background: url('../images/core/bg-wrap.jpg') no-repeat 50% 0; } #container { width: 950px; height: auto; display: block; margin: 0 auto; background: transparent; clear: both; position: relative;} #container:after, .wrapper:after, #main-contents:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } /*============================================================= Header - top nav + logo =============================================================*/ ul#nav {list-style:none; width: 900px; height:45px; display: inline-block; clear: both; padding:0; float:right;} ul#nav li {float:left; height:45px; overflow:hidden; padding:0 0 0 0px;} ul#nav li a {display:block; height:45px; text-indent:-9999px;} ul#nav li a:hover {background-position:0 -45px!important;} ul#nav li#navhome a {background:url(../images/navigation/nav-home.png) no-repeat 0 0; width: 50px;} ul#nav li#navabout a {background:url(../images/navigation/nav-about.png) no-repeat 0 0; width: 72px;} ul#nav li#navservices a {background:url(../images/navigation/nav-services.png) no-repeat 0 0; width: 69px;} ul#nav li#navorder a {background:url(../images/navigation/nav-order.png) no-repeat 0 0; width: 85px;} ul#nav li#navproject a {background:url(../images/navigation/nav-project.png) no-repeat 0 0; width: 112px;} ul#nav li#navinnovation a {background:url(../images/navigation/nav-innovation.png) no-repeat 0 0; width: 80px;} ul#nav li#navresource a {background:url(../images/navigation/nav-resource.png) no-repeat 0 0; width: 127px;} ul#nav li#navrejuvination a {background:url(../images/navigation/nav-rejuvination.png) no-repeat 0 0; width: 123px;} ul#nav li#navsustainability a {background:url(../images/navigation/nav-sustainability.png) no-repeat 0 0; width: 101px;} ul#nav li#navcontact a {background:url(../images/navigation/nav-contact.png) no-repeat 0 0; width: 81px;} body#home-page ul#nav li#navhome a {background-position:0 -45px!important; width: 50px;} body#about-page ul#nav li#navabout a {background-position:0 -45px!important; width: 72px;} body#services-page ul#nav li#navservices a {background-position:0 -45px!important; width: 69px;} body#order-page ul#nav li#navorder a {background-position:0 -45px!important; width: 85px;} body#gallery-page ul#nav li#navproject a {background-position:0 -45px!important;width: 112px;} body#innovation-page ul#nav li#navinnovation a {background-position:0 -45px!important;width: 80px;} body#resource-page ul#nav li#navresource a {background-position:0 -45px!important; width: 127px;} body#rejuvenation-page ul#nav li#navrejuvination a {background-position:0 -45px!important; width: 123px;} body#sustainability-page ul#nav li#navsustainability a {background-position:0 -45px!important; width: 101px;} body#contact-page ul#nav li#navcontact a {background-position:0 -45px!important; width: 81px;} #header { width: 875px; height: 126px; margin: 0 25px 0 50px; float: left; display: inline; clear: both; } #logo { width: 225px; height: 111px; float: left; display: block; } ul#top-nav { width: 141px; float: right; display: block; height: 35px; margin-right: 30px; } ul#top-nav li { border-left: 1px solid #fff; float: left; display: inline; margin: 0; width: 70px; height: 35px; text-align: center; } ul#top-nav li.firstleft { border: 0!important; } ul#top-nav a { text-align: center!important; float: left; display: block; padding: 17px 0 5px 80px; width: 100px; height: 13px; text-decoration: none; color: #fff; } ul#top-nav a:hover { color: #f8a346; text-decoration: underline; } body#contact-page a#navcontact, body#sitemap-page a#navsitemap { color: #f8a346; text-decoration: underline; } /*============================================================= Banner Area - flash, banner + main nav =============================================================*/ #banner-area { position: relative; z-index: 10; float: left; width: 900px; height: 270px; padding: 0 25px; height: auto; display: block; } body#home-page #banner-area img { width: 900px; height: 335px!important; } #cycle-banner { width: 900px; height: 335px; float: left; overflow: hidden!important; } body#services-page #banner-area, body#contact-page #banner-area, body#sitemap-page #banner-area { background:url(../images/core/images/new-bg-services.jpg) no-repeat 50% 0; height: 270px!important; } body#about-page #banner-area { background: url('../images/core/bg-innovation.jpg') no-repeat 50% 0; height: 270px!important; } body#innovation-page #banner-area { background: url('../images/core/bg-innovation.jpg') no-repeat 50% 0; height: 270px!important; } body#order-page #banner-area { background: url('../images/core/bg-sustainability.jpg') no-repeat 50% 0; height: 270px!important; } body#resource-page #banner-area { background: url('../images/core/bg-resource.jpg') no-repeat 50% 0; height: 270px!important; } body#rejuvenation-page #banner-area { background: url('../images/core/bg-rejuvenation.jpg') no-repeat 50% 0; height: 270px!important; } body#sustainability-page #banner-area { background: url('../images/core/bg-sustainability.jpg') no-repeat 50% 0; height: 270px!important; } body#gallery-page #banner-area { background: url('../images/core/bg-gallery.jpg') no-repeat 50% 0; height: 270px!important; }/**/ /*navigation inside banner and flash*/ ul#nav { position: absolute; z-index: 90; top: 200px !important; left: 25px; display: block; clear: both; } body#home-page ul#nav { position: absolute; z-index: 90; top: 267px!important; width: 900px; height: 45px; display: block; clear: both; } ul#nav li { display: block; float: left; height: 45px; } body#home-page ul#nav li { display: inline; float: left; height: 45px;} ul#nav a { width: 170px; height: 45px; overflow: hidden; text-indent: -9999em; display: block; float: left; } body#home-page ul#nav a { height: 45px; overflow: hidden; text-indent: -9999em; display: block; float: left; } ul#nav a:hover { background-position: -170px 0!important; } body#home-page ul#nav a:hover { background-position: 0 -45px!important; } /*background images a#navhome { background: url('../images/core/nav-home.png') no-repeat 0 0; } a#navservices { background: url('../images/core/nav-services.png') no-repeat 0 0; } a#navinnovation { background: url('../images/core/nav-innovation.png') no-repeat 0 0; } a#navresource { background: url('../images/core/nav-resource.png') no-repeat 0 0; } a#navrejuvenation { background: url('../images/core/nav-rejuvenation.png') no-repeat 0 0; } a#navsustainability { background: url('../images/core/nav-sustainability.png') no-repeat 0 0; } body#home-page a#navhome { background: url('../images/core/nav-home1.png') no-repeat 0 0; } body#home-page a#navservices { background: url('../images/core/nav-services1.png') no-repeat 0 0; } body#home-page a#navinnovation { background: url('../images/core/nav-innovation1.png') no-repeat 0 0; } body#home-page a#navresource { background: url('../images/core/nav-resource1.png') no-repeat 0 0; } body#home-page a#navrejuvenation { background: url('../images/core/nav-rejuvenation1.png') no-repeat -0 0; } body#home-page a#navsustainability { background: url('../images/core/nav-sustainability1.png') no-repeat 0 0; }*/ /*on stage*/ body#home-page a#navhome { background-position: 0 -45px!important; } body#services-page a#navservices, body#innovation-page a#navinnovation, body#resource-page a#navresource, body#about-page a#navresource,body#rejuvenation-page a#navrejuvenation, body#sustainability-page a#navsustainability { background-position: -170px 0!important; } /*============================================================= Main body - left + right =============================================================*/ #main-contents { width: 890px; height: auto; float: left; display: block; padding: 15px 35px 0 25px; margin: 0; clear: both; background: url('../images/core/bg-shaded.jpg') no-repeat 25px 15px; } body#home-page #main-contents { width: 880px; height: auto; float: left; display: block; padding: 25px 45px 0 25px; margin: 0; clear: both; background: none!important; } body#gallery-page #main-contents { width: 900px; padding: 0; margin: 15px 25px 0 25px; background: url('../images/core/bg-shaded.jpg') repeat-x 0 0; } body#contact-page #main-contents, body#sitemap-page #main-contents { background: url('../images/core/bg-shaded2.jpg') no-repeat 25px 15px; } .text { float: left; width: 560px; display: block; padding: 20px 15px; } body#home-page .text { width: 635px!important; padding: 15px!important; } body#contact-page .text, body#sitemap-page .text { width: 620px!important; padding: 15px!important; } body#gallery-page .text { width: 870px!important; padding: 15px!important; } .shifted { padding: 0 30px 0 15px; } ul.listings { width: 320px; padding: 0; height: auto; clear: both; display: inline; float: right; } ul.listings li { float: right; display: inline; width: 145px; height: 110px; overflow: hidden!important; margin: 0 0 10px 10px; } ul.listings li .download { color: #fff; position: relative; height: 20px; margin-top: -20px; display: block; padding: 5px; background: url('../images/core/bg-list.jpg') no-repeat 50% 0; } ul.listings li .download a { /*background: url('../images/core/icon-pdf.gif') no-repeat -2px 0;*/ padding-left: 10px; font-size: 11px; color: #000!important; vertical-align: middle; } body#innovation-page ul.listings, body#rejuvenation-page ul.listings { width: 290px; margin-right: -30px; } body#innovation-page ul.listings li, body#rejuvenation-page ul.listings li { width: 290px; height: 175px; text-align: right; } body#resource-page ul.listings { width: 560px; float: left; clear: both; } body#resource-page ul.listings li { width: 175px; height: 150px; margin: 0 10px 0 0; } body#resource-page ul.listings li .download { color: #fff; position: relative; height: 15px; margin-top: -5px; display: block; padding: 5px; background: url('../images/core/bg-list2.jpg') no-repeat 50% 0; } /*headings + title*/ .img-title { text-indent: -9999em; line-height: 0; } h1.img-title { height: 30px; margin-bottom: 15px; } h2.img-title { height: 20px; margin-bottom: 10px; } body#services-page h2.img-title { height: 35px;} h1#bins {background:url('../images/headings/h1-bin.png') no-repeat 0 0; } h1#services { background: url('../images/headings/h1-services.gif') no-repeat 0 0; } h1#about { background: url('../images/headings/h1-about.png') no-repeat 0 0; } h1#innovation { background: url('../images/headings/h1-innovation.gif') no-repeat 0 0; } h1#resource { background: url('../images/headings/h1-resource.gif') no-repeat 0 0; } h1#rejuvenation { background: url('../images/headings/h1-rejuvenation.gif') no-repeat 0 0; } h1#sustainability { background: url('../images/headings/h1-sustain.gif') no-repeat 0 0; } h1#gallery { background: url('../images/headings/h1-gallery.gif') no-repeat 0 0; } h1#contact { background: url('../images/headings/h1-contact.gif') no-repeat 0 0; } h1#sitemap { background: url('../images/headings/h1-sitemap.gif') no-repeat 0 0; } h2#sub-services { background: url('../images/headings/title-services.gif') no-repeat 0 0; } h2#sub-innovation { background: url('../images/headings/title-innovation.gif') no-repeat 0 0; } h2#sub-resource { background: url('../images/headings/title-resource.gif') no-repeat 0 0; } h2#sub-rejuvenation { background: url('../images/headings/title-rejuvenation.gif') no-repeat 0 0; } h2#sub-sustain { background: url('../images/headings/title-sustain.gif') no-repeat 0 0; } .cellcolor {color:#333; background:#CCC; text-transform:uppercase; font-size:10px; } /*ctas*/ #calls-to-action { width: 275px; height: auto; display: inline; float: right; position: relative; z-index: 20; margin-top: 5px; } #sub-cta { position: absolute; top: 20px; z-index: 99; height: 200px; width: 275px;display: block; } body#services-page #sub-cta, body#resource-page #sub-cta, body#about-page #sub-cta, body#sustainability-page #sub-cta { background: url('../images/core/sub-cta1.png') no-repeat 50% 0; } body#innovation-page #sub-cta, body#rejuvenation-page #sub-cta { background: url('../images/core/sub-cta2.png') no-repeat 50% 0; height: 220px; top: 5px; left:27px; } ul#ctas-listing { position: absolute; z-index: 20; top: 160px; height: 268px; padding: 28px 0 14px 0; background: url('../images/core/bg-cta.gif') no-repeat 50% 0; display: block; } ul#ctas-listing li { width: 275px; height: 67px; display: block; float: left; clear: both; } ul#ctas-listing a { width: 275px; height: 67px; overflow: hidden!important; text-indent: -9999em; float: left; display: block; } ul#ctas-listing a:hover { background-position: -275px 0!important; } ul#ctas-listing a#cta1 { background: url('../images/core/inner-cta1.jpg') no-repeat 0 0; } ul#ctas-listing a#cta2 { background: url('../images/core/inner-cta2.jpg') no-repeat 0 0; } ul#ctas-listing a#cta3 { background: url('../images/core/inner-cta3.jpg') no-repeat 0 0; } ul#ctas-listing a#cta4 { background: url('../images/core/inner-cta4.jpg') no-repeat 0 0; } ul#ctas-listing-services {position: absolute; z-index: 20; top: 50px; height: 380px; padding: 28px 0 14px 0; background: url('../images/core/bg-cta.gif') no-repeat 50% 0; display:block; float:right;} ul#ctas-listing-services li { width: 275px; height: 56px; display: block; float: left; clear: both; } ul#ctas-listing-services a { width: 275px; height: 67px; overflow: hidden!important; text-indent: -9999em; float: left; display: block; } ul#ctas-listing-services a:hover { background-position: -275px 0!important; } ul#ctas-listing-services a#cta1 { background:url('../images/navigation/services-front.jpg') no-repeat 0 0; } ul#ctas-listing-services a#cta2 { background:url('../images/navigation/services-rear.jpg') no-repeat 0 0; } ul#ctas-listing-services a#cta3 { background:url('../images/navigation/services-lift.jpg') no-repeat 0 0; } ul#ctas-listing-services a#cta4 { background:url('../images/navigation/services-hook.jpg') no-repeat 0 0; } ul#ctas-listing-services a#cta5 { background:url('../images/navigation/services-industrial.jpg') no-repeat 0 0; } ul#ctas-listing-services a#cta6 { background:url('../images/navigation/services-grease-trap.jpg') no-repeat 0 0; } #btns {position: absolute; top:55px; left:470px;} #btns a {height: 34px; width: 150px; background-repeat: no-repeat; display: block; overflow: hidden; text-indent: -999em; float: left; margin-right: 10px;} #btns a:hover {background-position: 0 -34px;} #btn-nw {background-image: url('../images/core/btn-northwest.gif');} #btn-metro {background-image: url('../images/core/btn-metro.gif');} #btn-sw {background-image: url('../images/core/btn-southwest.gif');} body#order-page #map { position: absolute; top: 130px; left: 0; width: 275px; height: 350px; display: block; background:url('../images/bins/map.gif') no-repeat 0 0; } #map a { clear: both; width: 175px; margin: 0; float: left; padding: 0; display: block; text-indent: -9999em; overflow: hidden; } #map a#order-northwest { height: 70px; background: url('../images/bins/region-northwest.gif') no-repeat 175px 0; margin: 124px 0 0 30px; } #map a#order-metro { height: 44px; background: url('../images/bins/region-metro.gif') no-repeat 175px 0; margin: 65px 0 0 35px; } #map a#order-southwest { height: 43px; background: url('../images/bins/region-southwest.gif') no-repeat 175px 0; margin: 0 0 0 40px; } #map a:hover { background-position: 0 0!important; } body#order-page #p-title { position: absolute; z-index: 20; top: 60px; height: 60px; padding: 0; display: block; } body#order-page ul#ctas-order { position: absolute; z-index: 20; top: 450px; height: 268px; padding: 32px 0 14px 0; background:url('../images/core/order-bins-bg.jpg') no-repeat 50% 0; display: block; } body#order-page ul#ctas-order li { width: 275px; height: 67px; display: block; float: left; clear: both; } body#order-page ul#ctas-order a { width: 275px; height: 67px; overflow: hidden!important; text-indent: -9999em; float: left; display: block; } body#order-page ul#ctas-order a:hover { background-position: -275px 0!important; } body#order-page ul#ctas-order a#cta1 { background:url('../images/core/cta-northwest.jpg') no-repeat 0 0; } body#order-page ul#ctas-order a#cta2 { background:url('../images/core/cta-metro.jpg') no-repeat 0 0; } body#order-page ul#ctas-order a#cta3 { background:url('../images/core/cta-southwest.jpg') no-repeat 0 0; } /*book online*/ #book-online { width: 190px; height: 340px; background: url('../images/core/cta-bookonline.jpg') no-repeat 0 0; display: inline; float: right; } #book-online a { width: 190px; height: 40px; margin: 290px 0 0 0; display: block; text-indent: -9999em; line-height: 0; } /*homepage CTA*/ ul#cta { width: 664px; height: 200px; display: inline; float: left; margin: 0; } ul#cta li { font-size: 1.1em; background: url('../images/core/bg-cta.jpg')no-repeat 0 0; width: 136px; height: 160px; padding: 20px 15px; display: inline; float: left; margin: 0; } ul#cta li h2 { width: 136px; height: 55px; margin: 0; text-indent: -9999em; display: block; } h2#title-innovation { background: url('../images/core/title-cta1.gif') no-repeat 0 0; } h2#title-wecare { background: url('../images/core/title-cta2.gif') no-repeat 0 0; } h2#title-wastecare { background: url('../images/core/title-cta3.gif') no-repeat 0 0; } h2#title-tours { background: url('../images/core/title-cta4.gif') no-repeat 0 0; } ul#cta li p { font-size: 1em; line-height: 12px; color: #a0a0a0; margin: 0; height: 90px; overflow: hidden!important; } a.icon-link { background: url('../images/core/icon-link1.gif') no-repeat 0 1px; padding-left: 15px; height: 10px; line-height: 10px; overflow: hidden!important; vertical-align: middle; } a.icon-link:hover, a.icon-link.iconhover { background: url('../images/core/icon-link2.gif') no-repeat 0 1px; } /*gallery listing*/ ul#gallery-listing { float: left; display: block; clear: both; padding: 0 15px; width: 840px; height: auto; } ul#gallery-listing li { float: left; display: inline; width: 128px; height: 103px; margin: 0 6px 10px 6px; } ul#gallery-listing a { background-color: #fff; border: 4px solid #70a8e1; line-height: 0; float: left; display: block; overflow: hidden; width: 120px; height: 95px; text-decoration: none; } ul#gallery-listing a:hover { border-color: #f8a346; text-decoration: none; } /*============================================================= Footer =============================================================*/ #footer { width: 890px; height: 70px; background: #eaeaea url('../images/core/bg-footer.gif') no-repeat 50% 0; padding: 20px 20px 0 40px; margin: 0 auto; clear: both; } #footer p#credits { float: left; width: 320px; margin-top: 4px; color: #777d7a; display: inline; } #footer p#associates { width: 425px; display: inline; float: right; } #footer p#associates img { float: left; display: inline; margin: 0; line-height: 0; } #footer p#credits img { margin-top: -4px; display: inline; vertical-align: bottom; } #footer a { color: #70a8e1; text-decoration: none;} #footer a:hover { color: #f8a346; text-decoration: underline;} /*======================================================= End of CSS Document for Instant Waste Management =======================================================*/