/* 1.RESET (zero out all values for cross-browser consistency) ============================================================= */ @import url(reset.css); /* 2.LAYOUT (structure blocks) ============================================================= */ @import url(layout.css); /* 3.TYPOGRAPHY ============================================================= */ body { line-height: 1.3; font-family: Arial, sans-serif; font-size: 62.5%;/* sets 1.0em to 10px */ } h2 { font-size: 2em; font-weight: bold; } h3 { font-size: 1.6em; font-weight: bold; } h4 { font-size: 1.4em; font-weight: bold; } #content p, #content uL { font-size: 1.4em; margin: 1em 0; } a.more, #content form label { font-size: 1.4em; } #content ul p, #content ul li a.more { font-size: 1em; }/* resetting inherent em */ html { height:100%; margin-bottom:1px; } /* 4.COLORS ============================================================= */ #content p, #content ul, #footer, #footer a { color: #4b4b4d; }/* Grey */ h2, h4 { color: #ec7404; }/* Orange */ h3, #solutions h2.solution-section { color: #77AA22; }/* Green */ #solution-dedicated h3, #solution-dedicated a.more { color: #ecb804; } #solution-raw h3, #solution-raw a.more { color: #f58104; } #solution-environment h3, #solution-environment a.more, ul#newslist li a { color: #275020; } #solution-design h3, #solution-design a.more { color: #7fab17; } #solution-printing h3, #solution-printing a.more { color: #04b6e2; } /* Utilities */ .clear { clear: both; } .left { float: left; } .right { float: right; } .center { margin-left: auto; margin-right: auto; text-align: center; } strong { font-weight: bold; } #content ul { list-style-type: disc; margin-left: 50px; } #home #content ul { list-style-type: none; margin-left: 0; } /* FORM ============================================================= */ input[type="text"] { width: 150px; } /* LINKS ============================================================= */ #content p a { color: #4b4b4d; } #content p a:hover { color: #777; } a.more { color: #77AA22; display: block; margin-top: 10px; text-decoration: none; font-weight: bold; font-family: Verdana, Arial, sans-serif;} a.more:hover { text-decoration: underline; } #footer a { text-decoration: none; } #footer a:hover { text-decoration: underline; } /* Main Navigation EN ============================================================= */ #topbar { overflow: hidden; } ul#main-nav li { text-indent: -9999px; } ul#main-nav li a { float: left; display: block; height: 36px; background: url(../images/nav/EN-main-nav-buttons.jpg) no-repeat; } ul#main-nav li#nav-home a { width: 72px; } ul#main-nav li#nav-needs a { width: 179px; background-position: -72px 0; } ul#main-nav li#nav-solutions a { width: 190px; background-position: -251px 0; } ul#main-nav li#nav-contact a { width: 116px; background-position: -440px 0; } ul#main-nav li#nav-news a { width: 70px; background-position: -556px 0; } ul#main-nav li#nav-locations a { width: 112px; background-position: -626px 0; } ul#main-nav li#nav-home a:hover { background-position: 0 -36px; } ul#main-nav li#nav-needs a:hover { background-position: -72px -36px; } ul#main-nav li#nav-solutions a:hover { background-position: -251px -36px; } ul#main-nav li#nav-contact a:hover { background-position: -440px -36px; } ul#main-nav li#nav-news a:hover { background-position: -556px -36px; } ul#main-nav li#nav-locations a:hover { background-position: -626px -36px; } #home ul#main-nav li#nav-home a, #home ul#main-nav li#nav-home a:hover { background-position: 0 -72px; } #needs ul#main-nav li#nav-needs a, #needs ul#main-nav li#nav-needs a:hover { background-position: -72px -72px; } #solutions ul#main-nav li#nav-solutions a, #solutions ul#main-nav li#nav-solutions a:hover { background-position: -251px -72px; } #contact ul#main-nav li#nav-contact a, #contact ul#main-nav li#nav-contact a:hover { background-position: -440px -72px; } #news ul#main-nav li#nav-news a, #news ul#main-nav li#nav-news a:hover { background-position: -556px -72px; } #locations ul#main-nav li#nav-locations a, #locations ul#main-nav li#nav-locations a:hover { background-position: -626px -72px; } /* Main Navigation FR ============================================================= */ #topbar { overflow: hidden; } ul#main-nav-fr li { text-indent: -9999px; } ul#main-nav-fr li a { float: left; display: block; height: 36px; background: url(../images/nav/FR-main-nav-buttons.jpg) no-repeat; } ul#main-nav-fr li#nav-home a { width: 75px; } ul#main-nav-fr li#nav-needs a { width: 180px; background-position: -75px 0; } ul#main-nav-fr li#nav-solutions a { width: 165px; background-position: -255px 0; } ul#main-nav-fr li#nav-contact a { width: 126px; background-position: -420px 0; } ul#main-nav-fr li#nav-news a { width: 131px; background-position: -546px 0; } ul#main-nav-fr li#nav-locations a { width: 114px; background-position: -677px 0; } ul#main-nav-fr li#nav-home a:hover { background-position: 0 -36px; } ul#main-nav-fr li#nav-needs a:hover { background-position: -75px -36px; } ul#main-nav-fr li#nav-solutions a:hover { background-position: -255px -36px; } ul#main-nav-fr li#nav-contact a:hover { background-position: -420px -36px; } ul#main-nav-fr li#nav-news a:hover { background-position: -546px -36px; } ul#main-nav-fr li#nav-locations a:hover { background-position: -677px -36px; } #home ul#main-nav-fr li#nav-home a, #home ul#main-nav-fr li#nav-home a:hover { background-position: 0 -72px; } #needs ul#main-nav-fr li#nav-needs a, #needs ul#main-nav-fr li#nav-needs a:hover { background-position: -75px -72px; } #solutions ul#main-nav-fr li#nav-solutions a, #solutions ul#main-nav-fr li#nav-solutions a:hover { background-position: -255px -72px; } #contact ul#main-nav-fr li#nav-contact a, #contact ul#main-nav-fr li#nav-contact a:hover { background-position: -420px -72px; } #news ul#main-nav-fr li#nav-news a, #news ul#main-nav-fr li#nav-news a:hover { background-position: -546px -72px; } #locations ul#main-nav-fr li#nav-locations a, #locations ul#main-nav-fr li#nav-locations a:hover { background-position: -677px -72px; } /* Main Navigation IT ============================================================= */ #topbar { overflow: hidden; } ul#main-nav-it li { text-indent: -9999px; } ul#main-nav-it li a { float: left; display: block; height: 36px; background: url(../images/nav/IT-main-nav-buttons.jpg) no-repeat; } ul#main-nav-it li#nav-home a { width: 76px; } ul#main-nav-it li#nav-needs a { width: 236px; background-position: -76px 0; } ul#main-nav-it li#nav-solutions a { width: 175px; background-position: -312px 0; } ul#main-nav-it li#nav-contact a { width: 76px; background-position: -487px 0; } ul#main-nav-it li#nav-news a { width: 129px; background-position: -563px 0; } ul#main-nav-it li#nav-locations a { width: 87px; background-position: -692px 0; } ul#main-nav-it li#nav-home a:hover { background-position: 0 -36px; } ul#main-nav-it li#nav-needs a:hover { background-position: -76px -36px; } ul#main-nav-it li#nav-solutions a:hover { background-position: -312px -36px; } ul#main-nav-it li#nav-contact a:hover { background-position: -487px -36px; } ul#main-nav-it li#nav-news a:hover { background-position: -563px -36px; } ul#main-nav-it li#nav-locations a:hover { background-position: -692px -36px; } #home ul#main-nav-it li#nav-home a, #home ul#main-nav-it li#nav-home a:hover { background-position: 0 -72px; } #needs ul#main-nav-it li#nav-needs a, #needs ul#main-nav-it li#nav-needs a:hover { background-position: -76px -72px; } #solutions ul#main-nav-it li#nav-solutions a, #solutions ul#main-nav-it li#nav-solutions a:hover { background-position: -312px -72px; } #contact ul#main-nav-it li#nav-contact a, #contact ul#main-nav-it li#nav-contact a:hover { background-position: -487px -72px; } #news ul#main-nav-it li#nav-news a, #news ul#main-nav-it li#nav-news a:hover { background-position: -563px -72px; } #locations ul#main-nav-it li#nav-locations a, #locations ul#main-nav-it li#nav-locations a:hover { background-position: -692px -72px; } /* Main Navigation SP ============================================================= */ #topbar { overflow: hidden; } ul#main-nav-sp li { text-indent: -9999px; } ul#main-nav-sp li a { float: left; display: block; height: 36px; background: url(../images/nav/SP-main-nav-buttons.jpg) no-repeat; } ul#main-nav-sp li#nav-home a { width: 63px; } ul#main-nav-sp li#nav-needs a { width: 198px; background-position: -63px 0; } ul#main-nav-sp li#nav-solutions a { width: 174px; background-position: -261px 0; } ul#main-nav-sp li#nav-contact a { width: 109px; background-position: -435px 0; } ul#main-nav-sp li#nav-news a { width: 103px; background-position: -544px 0; } ul#main-nav-sp li#nav-locations a { width: 208px; background-position: -647px 0; } ul#main-nav-sp li#nav-home a:hover { background-position: 0 -36px; } ul#main-nav-sp li#nav-needs a:hover { background-position: -63px -36px; } ul#main-nav-sp li#nav-solutions a:hover { background-position: -261px -36px; } ul#main-nav-sp li#nav-contact a:hover { background-position: -435px -36px; } ul#main-nav-sp li#nav-news a:hover { background-position: -544px -36px; } ul#main-nav-sp li#nav-locations a:hover { background-position: -647px -36px; } #home ul#main-nav-sp li#nav-home a, #home ul#main-nav-sp li#nav-home a:hover { background-position: 0 -72px; } #needs ul#main-nav-sp li#nav-needs a, #needs ul#main-nav-sp li#nav-needs a:hover { background-position: -63px -72px; } #solutions ul#main-nav-sp li#nav-solutions a, #solutions ul#main-nav-sp li#nav-solutions a:hover { background-position: -261px -72px; } #contact ul#main-nav-sp li#nav-contact a, #contact ul#main-nav-sp li#nav-contact a:hover { background-position: -435px -72px; } #news ul#main-nav-sp li#nav-news a, #news ul#main-nav-sp li#nav-news a:hover { background-position: -544px -72px; } #locations ul#main-nav-sp li#nav-locations a, #locations ul#main-nav-sp li#nav-locations a:hover { background-position: -647px -72px; } /* Main Navigation TU ============================================================= */ #topbar { overflow: hidden; } ul#main-nav-tu li { text-indent: -9999px; } ul#main-nav-tu li a { float: left; display: block; height: 36px; background: url(../images/nav/TU-main-nav-buttons.jpg) no-repeat; } ul#main-nav-tu li#nav-home a { width: 129px; } ul#main-nav-tu li#nav-needs a { width: 241px; background-position: -129px 0; } ul#main-nav-tu li#nav-solutions a { width: 128px; background-position: -370px 0; } ul#main-nav-tu li#nav-contact a { width: 83px; background-position: -498px 0; } ul#main-nav-tu li#nav-news a { width: 84px; background-position: -581px 0; } ul#main-nav-tu li#nav-locations a { width: 117px; background-position: -665px 0; } ul#main-nav-tu li#nav-home a:hover { background-position: 0 -36px; } ul#main-nav-tu li#nav-needs a:hover { background-position: -129px -36px; } ul#main-nav-tu li#nav-solutions a:hover { background-position: -370px -36px; } ul#main-nav-tu li#nav-contact a:hover { background-position: -498px -36px; } ul#main-nav-tu li#nav-news a:hover { background-position: -581px -36px; } ul#main-nav-tu li#nav-locations a:hover { background-position: -665px -36px; } #home ul#main-nav-tu li#nav-home a, #home ul#main-nav-tu li#nav-home a:hover { background-position: 0 -72px; } #needs ul#main-nav-tu li#nav-needs a, #needs ul#main-nav-tu li#nav-needs a:hover { background-position: -129px -72px; } #solutions ul#main-nav-tu li#nav-solutions a, #solutions ul#main-nav-tu li#nav-solutions a:hover { background-position: -370px -72px; } #contact ul#main-nav-tu li#nav-contact a, #contact ul#main-nav-tu li#nav-contact a:hover { background-position: -498px -72px; } #news ul#main-nav-tu li#nav-news a, #news ul#main-nav-tu li#nav-news a:hover { background-position: -581px -72px; } #locations ul#main-nav-tu li#nav-locations a, #locations ul#main-nav-tu li#nav-locations a:hover { background-position: -665px -72px; } /* Languages Switch ============================================================= */ form#languages { position: absolute; top: 6px; right: 20px; } /* HOME ============================================================= */ #content #intro { position: relative; } #content #intro h2 { display: block; width: 455px; } #content #intro a#intro-contact { position: absolute; top: 0px; right: 0px; background: url(../images/buttons/EN-intro-contact.jpg) no-repeat; display: block; width: 172px; height: 70px; text-indent: -9999px; } h2#news-title { font-size: 1.5em; font-weight: bold; color: #fff; background: url(../images/news/news-title.jpg) no-repeat; width: 199px; height: 31p x; line-height: 2em; text-indent: 60px; margin: 40px 0 20px; } ul#home-news li { float: left; width: 200px; margin-right: 13px; } ul#home-news li a { font-size: 1.3em; color: #ec7404; font-weight: bold; text-decoration: none; } ul#home-news li a:hover { text-decoration: underline; } /* NEEDS PAGE ============================================================= */ #needs h2 { border-bottom: 1px solid #ec7404; padding-bottom: 5px; margin-bottom: 15px; } #need-list { background: url(../images/needs/needs-list-bg-top.jpg) no-repeat top; padding-top: 15px; margin-bottom: 20px; } #need-list-bg { overflow: hidden; background: url(../images/needs/needs-list-bg-bottom.jpg) no-repeat bottom; padding-bottom: 15px; } #needs-list-1, #needs-list-2 { float: left; } #needs-list-1 { float: left; width: 200px; } ul#needs-list-2 li, ul#needs-list-1 li { font-size: 0.9em; margin-bottom: 5px; } /* NEEDS PAGE - SERVICES BLOCKS ============================================================= */ .service-block { overflow: hidden; background: url(../images/bg/service-block.jpg) no-repeat left bottom; padding-bottom: 40px; margin-bottom: 20px; } .service-block img { float: left; } #content .service-block p { margin: 0; font-family: Verdana, Arial, sans-serif; } .service-block div.service-content { width: 400px; margin-left: 20px; float: left; } .service-block .service-detail { clear: both; padding: 30px 0; } /* CONTACT PAGE - COUNTRY BLOCKS ============================================================= */ .country-block { overflow: hidden; float: left; width:200px; margin:10px 10px 0 0; padding:0 0 0 0; } .country-block img { float: left; } #content .country-block p { margin: 0; font-family: Verdana, Arial, sans-serif; } .country-block div.country-content { width: 120px; margin-left: 5px; float: left; } .country-block .country-detail { clear: both; padding: 30px 0; } .contact-block { padding-bottom: 10px; margin-bottom: 5px; } .contact-block img { float: left; } #content .contact-block p { margin: 0; font-family: Verdana, Arial, sans-serif; font-size: 12px; padding:5px 0 15px 0; } .contact-block div.contact-content { width: 400px; margin-left: 20px; float: left; } .contact-block .contact-detail { clear: both; padding: 20px 0 0 0; } .thanks { display:block; height:15px; padding:0 0 0 20px; font-weight:bold; color:#7ba421; background: transparent url(../images/icons/checkmark.gif) left center no-repeat; } /* SOLUTIONS PAGE ============================================================= */ #solutions h2.solution-section { border-bottom: 1px solid #77AA22; padding-bottom: 5px; margin-bottom: 15px; } #solutions h2 { margin-bottom: 20px; } #solutions h3 { margin-top: 20px; } #solutions a.more { margin: 0; } ul#solutions-list { list-style-type: none; margin: 0; overflow: hidden; margin-bottom: 40px; } ul#solutions-list li { float: left; margin-left: 11px; } ul#solutions-list li a { display: block; font-weight: bold; text-decoration: none; color: #ec7404; width: 149px; height: 90px; padding-bottom: 40px; } ul#solutions-list li a:hover { text-decoration: underline; } ul#solutions-list li#tray a { background: url(../images/solutions/solutions-list-trays.jpg) no-repeat bottom center; } ul#solutions-list li#boxes a { background: url(../images/solutions/solutions-list-boxes.jpg) no-repeat bottom center; } ul#solutions-list li#b-packaging a { background: url(../images/solutions/solutions-list-bulkpack.jpg) no-repeat bottom center; } ul#solutions-list li#c-packaging a { background: url(../images/solutions/solutions-list-consumerpack.jpg) no-repeat bottom center; } /* NEWS PAGES ============================================================= */ ul#news-1 { overflow: hidden; margin: 0; list-style-type: none; } ul#news-1 li { float: left; margin-left: 19px; } ul#news-1 li#news-1a { margin-left: 0; } ul#newslist { list-style-type: none; margin: 0; } ul#newslist li a { text-decoration: none; background: url(../images/news/news-bullet.jpg) no-repeat top left; padding-left: 20px; margin-bottom: 10px; display: block; } ul#newslist li a:hover { text-decoration: underline; } /* CRUMBS ============================================================= */ #crumbs { float: left; width:645px; height:2.3em; border-bottom:1px solid #dedede; margin: 20px 0 0 25px; } #crumbs ul, #crumbs li { list-style-type:none; padding:0; margin:0; } #crumbs li { float:left; line-height:2.3em; color:#777; padding-left:.75em; } #crumbs li a { background: url(../images/bg/crumbs.gif) no-repeat right center; display:block; padding:0 15px 0 0; } #crumbs li a:link, #crumbs li a:visited { color:#395203; text-decoration:none; } a:link, a:visited, #crumbs li a:hover, #crumbs li a:focus { color:#ec7404; } /* MAP PAGE ============================================================= */ #map{ width:638px; height: 417px; background: transparent url(../images/bg/map.jpg) no-repeat; } #videoBox{ width: 212px; height: 30px; position:relative; top: 60px; left: 28px; background: transparent; } #videoBox ul{ margin:0; padding:0; } #videoBox li{ margin:0; padding:0; display:inline; } #videoBox li a{ font-family:Arial, Helvetica, sans-serif; display: inline; font-size:12px; font-weight:bold; text-decoration:none; padding: 0 0 0 10px; color: #FFF; } #videoBox li a:hover{ text-decoration:underline; color: #015164; } /* FOOTER ============================================================= */ img#implantation { position: absolute; top: 60px; right: 70px; } #footer p, #footer ul { position: absolute; bottom: 22px; float: left; } #footer p { left: 50px; } #footer ul { left: 250px; } #footer ul li { display: inline; } #footer em { padding: 0 7px;}