#header .mobile-menu-icon{display:none; z-index: 1000; position: absolute; right: 0px; width: 40px; padding-top: 10px; padding-right: 10px;} @media(max-width:1010px) { #container {border:none;padding:0;} #inner-container {padding: 0 2.5%;box-sizing:border-box; max-width:none;} div.main-content, div.interior-content {width: 63%;} #billboard {height:auto;} div.meteor-slides.navpaged, div.meteor-slides.navboth {margin:0;} #sidebar-right {width: 31%;} #sidebar-right img { float: left; margin: 0 0 4.5% 4.5%; border: 1px solid #BBB; width: 44%; height: auto; box-sizing: border-box; } #sidebar-right a { display: block; width: 50%; box-sizing: border-box; /* height: 80px; */ /* background-color: #800080; */ float: left; text-align: right; } #sidebar-right img { margin:0; margin-bottom: 9%; border: 1px solid #BBB; width: 91%; height: auto; box-sizing: border-box; /* display: inline-block; */ /* text-align: right; */ float: right; } /* TODO: */ div.interior-header-image img {width:100%;} } @media(max-width:960px) { h1 {font-size:20px;} /* TODO: */ } @media(max-width:930px) { /* //Breaks the current page indicator. Need to come up with another solution. */ #interior-header-nav ul.submenu li.first-page-item, #interior-header-nav ul.submenu li.page_item {padding-left: 16px;} #interior-header-nav ul.submenu li.page_item a {font-size:13px; line-height:22px;} /* #interior-header-nav ul#corrugated.submenu li.first-page-item.current_page_item, #container div#interior-header.clearfix #interior-header-nav ul#corrugated.submenu li.first-page-item:hover, #container div#content.clearfix div#sidebar.clearfix #interior-header-nav ul#corrugated.submenu li.first-page-item:hover, #interior-header-nav ul#corrugated.submenu li.current_page_item, #interior-header-nav ul#corrugated.submenu li.current_page_item:hover, */ #interior-header-nav ul.submenu li.page_item:hover, #interior-header-nav ul.submenu li.current_page_item {background-position:-15px top;} } @media(max-width:875px) { #sidebar-right {width: 35%;} #sidebar-right.landing {width:35%;} } /* Add these videogallery styles here even though they are not responsive rules, just because we need to apply them AFTER the default styles applied by the plugin */ .videogallery .main-navigation { background: none; padding-bottom: 0; } .videogallery.nav-outer .main-navigation {height:300px !important; overflow-y:scroll;} .videogallery.nav-outer .navMain {background:black;} .videogallery.nav-outer .navigationThumb-content img {border-radius:50%; width:50px; height:50px; float:left; border:2px solid white; margin: 6px 8px 6px 6px;} .videogallery.nav-outer .navigationThumb-content .the-title {color:#fff; white-space: normal;} .videogallery.nav-outer .videogallery--navigation-container .navigationThumb { color:#fff; border-bottom: 1px solid rgba(0, 0, 0, 0.15); border-right: 1px solid #000; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzViNWI1YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZjRmNGYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #5b5b5b 0%, #4f4f4f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5b5b5b), color-stop(100%, #4f4f4f)); background: -webkit-linear-gradient(top, #5b5b5b 0%, #4f4f4f 100%); background: -o-linear-gradient(top, #5b5b5b 0%, #4f4f4f 100%); background: -ms-linear-gradient(top, #5b5b5b 0%, #4f4f4f 100%); background: linear-gradient(to bottom, #5b5b5b 0%, #4f4f4f 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b5b5b', endColorstr='#4f4f4f',GradientType=0 ); opacity: 0.6; } .videogallery.nav-outer .videogallery--navigation-container .navigationThumb.active { opacity: 1; } .videogallery.nav-outer .videogallery--navigation-container .navigationThumb:hover { opacity: 1; } body{overflow:hidden;} /*Header*/ #header .main-navigation{width:100%; background:url("/assets/images/bg-menu.png") repeat-x top #a3a3a3; padding-bottom:0; height:40px;} #header .main-navigation ul li{background:url("/assets/images/bg-menu-line.png") no-repeat left bottom; padding:12px 0;} #header .main-navigation ul li:first-child{background:none!important;} #container{padding:0; position:relative; z-index:10; box-shadow:0 0 5px #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #header{width:auto; max-width:none; background:url("/assets/images/bg-header.jpg") no-repeat left top; border-radius:0 0 10px 10px; margin:0 25px 10px; padding:0; border-right:1px solid #d1cfc6; border-bottom:1px solid #d1cfc6; border-left:1px solid #d1cfc6; overflow:hidden;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} /*Main*/ #inner-container{max-width:none; padding:0 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .interior-header-image img{width:auto; max-width:100%; height:auto;} .header-inset{width:30%; float:right;} #interior-header.corporate .interior-header-image{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .header-inset img{width:auto; max-width:100%; height:auto; border:1px solid #ccc;} #sidebar-right img{max-width:100%; width:auto; height:auto;} #sidebar #interior-header-nav{width:100%;} #sidebar #sidebar-right.interior .sidebar-image-wrap{max-width:300px; width:100%;} #sidebar #sidebar-right.interior img{width:100%; max-width:285px; height:auto; margin:0 0 15px 15px;} #interior-header-nav {max-width: 285px; width: 30%;} #interior-header-nav.landing {width:29%;} #sidebar-right.interior{width:100%;} .interior-header-image img.full{display:block;} .interior-header-image img.medium{display:none;} .interior-header-image img{border-radius:10px 0 0 0;} .testimonial table tr td.quote{padding:0;} .interior-content{width:63; float:left; position:relative; } .interior-content table{width:100%; table-layout:fixed;} .interior-content table.quality tr td{ width:50%;} .interior-content table.quality tr td:first-child p:last-child{padding:0 0 0 35px;} .interior-content table.quality tr td:last-child p{padding:0 0 0 75px;} #sidebar{width:37%; padding-left:3%; float:right; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #sidebar-right{width:32%; max-width:300px;} #sidebar-right img{width:auto; max-width:100%; height:auto; float:left;} /* Override the above interior rules on coated subpages */ #sidebar #sidebar-right.interior .sidebar-image-wrap.coated-grid{max-width:none;} #sidebar #sidebar-right.interior .coated-grid img {width:auto;height:auto;max-width:100%;margin:0 0 15px 15px;} .testimonial{background:none!important; width:auto; font-family:'Verdana'; font-size:11px; margin:15px 0 0 0; padding:0 0 15px; position:relative;} .testimonial-bg{background:url("/assets/images/bg-testimonial.png") repeat-x top #116e95; border:2px solid #0a225a; border-radius:10px; padding:15px 20px 20px; position:relative;} .testimonial-arrow{background:url("/assets/images/bg-testimonial-arrow.png") no-repeat center; width:23px; height:19px; position:absolute; top:30px; right:-23px; z-index:10;} .testimonial{color:#fff; font-size:11px;} table#testimonial tbody tr td.author{color:#3d698d; font-size:10px; padding-left:15px; vertical-align:middle; height:auto; min-height:73px; min-width:130px;} #billboard img{border-radius:10px 10px 0 0;} #slider-large{display:block; position:relative;} #slider-medium{height:0!important; overflow:hidden; position:relative;} #slider-small{height:0!important; overflow:hidden; position:relative;} #billboard .meteor-buttons{position:absolute; bottom:8px; right:8px; left:auto; width:auto!important;} #container.not-coated #mobilemenu ul li.coated{display:none;} #container.coated #mobilemenu ul li.more ul li{display:none;} #container.coated #mobilemenu ul li.more ul li.coated{display:block;} /*Footer Menu*/ #mobilemenu{height:0; overflow:hidden; background:#848484; margin:0 auto; max-width:1010px; width:100%; border-top:1px solid #5d5b5b; position:relative; z-index:12; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #mobilemenu ul{margin:0;} #mobilemenu ul li{background:url("/assets/images/bg-footer-nav.png") repeat-x top #dadbd6; width:100%; list-style:none; text-align:left; border-bottom:1px solid #5d5b5b; position:relative;} #mobilemenu ul li:hover ul li a, #mobilemenu ul li.current_page_item ul li a, #mobilemenu ul li.current-page-ancestor ul li a{font-weight:normal;} #mobilemenu ul li a:hover, #mobilemenu ul li:hover a, #mobilemenu ul li ul li a:hover, #mobilemenu ul li ul li a:hover, #mobilemenu ul li.current_page_item a, #mobilemenu ul li.current-page-ancestor a, #mobilemenu ul li.current_page_item ul li a:hover, #mobilemenu ul li.current-page-ancestor ul li.current_page_item a, #mobilemenu ul li.current-page-ancestor ul li a:hover{font-weight:bold;} #mobilemenu ul li.current_page_item, #mobilemenu ul li.current-page-ancestor, #mobilemenu ul li:hover{background:url("/assets/images/bg-footer-nav-active.png") repeat-x top #bfc0bb;} #mobilemenu ul li a{text-decoration:none; color:#5d5b5b; font-weight:400; padding:5px 0 5px 20px; display:block; width:100%; position:relative; height:24px; line-height:24px;} #mobilemenu ul li a:hover{} #mobilemenu ul li ul{padding-left:0; overflow:hidden;} #mobilemenu ul li ul li a{padding-left:40px;} #mobilemenu ul li ul li{border-bottom:none; border-top:1px solid #5d5b5b;} #mobilemenu ul li ul li ul li a{padding-left:60px;} #mobilemenu ul li.menu-light-green a{color:#759a81;} #mobilemenu ul li.menu-brown a{color:#4c483d;} #mobilemenu ul li.menu-green a{color:#1e502d;} #mobilemenu ul li.menu-purple a{color:#5f687e;} #mobilemenu ul li.menu-blue a{color:#33515c;} .mobile-icon{width:60px; height:34px; padding:5px; background:url("/assets/images/mobile-menu-plus.png") no-repeat center #6d6b6b; position:absolute; cursor:pointer; right:0; top:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .mobile-icon.active-mobile{background:url("/assets/images/mobile-menu-minus.png") no-repeat center #6d6b6b;} #mobilemenu ul li ul, #mobilemenu ul li ul.showchild li ul{max-height:0; overflow:hidden; -webkit-transition: max-height 0.3s; -moz-transition: max-height 0.3s; transition: max-height 0.3s; } #mobilemenu ul li > ul.showchild, #mobilemenu ul li ul li > ul.showchild{max-height:1000px; -webkit-transition: max-height 0.8s; -moz-transition: max-height 0.8s; transition: max-height 0.8s; } #mobilemenu.coated ul li.noclick ul li{display:none;} #mobilemenu.coated ul li.noclick ul li.menu-coated{display:block; } #mobilemenu.not-coated ul li.noclick ul li.menu-coated{display:none;} /*Heritage*/ #timeline-mobile{background:url("/assets/images/bg-heritage.jpg") repeat-x top #eeeade; width:100%; text-align:center; display:none; padding:0 5px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #timeline-mobile img{width:auto; height:auto; max-width:100%; margin:0 auto;} /*Footer*/ #footer.coated, #footer{background:#e7e7e7; padding:10px 25px; position:relative; z-index:5; border-radius:0 0 10px 10px; box-shadow:0 0 5px #ccc; width:100%; max-width:1010px; height:auto; border-right:1px solid #cccdc8; border-bottom:1px solid #cccdc8; border-left:1px solid #cccdc8; overflow:hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #footer .footer-left{float:left; position:relative; top:auto; width:auto;} #footer .footer-middle{margin:0 0 0 -175px; left:50%;} #footer .footer-right{float:right; position:relative; top:auto; color:#6a6a6a; font-size:10px; width:auto;} #footer .footer-right p{padding:0; margin:0; text-align:right;} #footer .footer-right img{padding:5px 0 0 25px; margin:0; float:none;} #footer.coated .footer-left{top:auto; color:#6a6a6a; font-size:10px; padding:10px 0 0 0; width:18%;} #footer.coated .footer-fsc{position:relative; float:left; width:20%; top:auto; left:auto;} #footer.coated .footer-fsc span{font-family:'Lucida Grande', Tahoma, Verdana, sans-serif; font-size: 8px; color:#297650; font-weight:bold; position:relative; text-shadow:#F2F2F2 1px 1px 1px;} #footer.coated .footer-fsc span.fsc-cc{top: 51px; left: 70px; position:absolute; text-align:center;} #footer.coated .footer-fsc img{width:141px; height:auto; margin:0 0 5px;} #footer.coated .footer-middle{position:relative; margin:0; padding:10px 0 0 0; bottom:auto; left:auto; height:auto; top:auto!important; float:right; width:auto; width:32%;} #footer.coated .footer-middle p:first-child{margin:0 10px 40px 0;} #footer.coated .footer-middle p{text-align:left; color:#6a6a6a; font-size:10px; float:right;} #footer.coated .footer-middle a{color:#6a6a6a; font-size:10px;} #footer.coated .footer-right{top:auto; float:right; padding:10px 0 0 0; width:30%;} #footer.coated .footer-right p{margin-bottom:10px;} #footer.coated .footer-fsc-wrap{position:relative;} @media only screen and (min-width:1012px){ } @media only screen and (max-width:1012px){ #header{background-position:left top; width:100%; margin:0 auto 10px;} #header, #footer{border-radius:0!important;} #floater, #floater-facer,#floater-adhesive,#floater-liner {display:none !important;} #rolls_for_less .floatfixed {display:none !important;} #content.heritage #sidebar-right img{width:auto; max-width:150px; height:auto;} } @media(max-width:1010px) { #sidebar #sidebar-right.interior .coated-grid img {float:right;;margin:0 0 15px 0;} } @media only screen and (max-width:985px){ #content.heritage .interior-content, #content.heritage #sidebar-right{width:100%!important;} #content.heritage #sidebar{float:left; width:100%;} #content.heritage #interior-header-nav{display:none;} #content.heritage #sidebar-right img{width:auto; max-width:100%; height:auto; margin:0 auto; float:none; display:block;} } @media only screen and (max-width:960px){ .top-navigation, a#customer-portal-link, #header .main-navigation{display:none;} #header .mobile-menu-icon{display:block;cursor:pointer;} #header{border-radius:0 0 10px 10px; height:120px;} #footer .footer-middle{margin:0; left:0;} #map {transform:scale(0.66); transform-origin:top left; height:546px;} div.dot {cursor:default !important;} div.menu-main-nav-container ul.menu li.current-page-ancestor a, div.menu-main-nav-container ul.menu li.current-menu-item a, div.menu-main-nav-container ul.menu li:hover a, div.menu-main-nav-container ul.menu li a{font-size:12px;} #header div.main-navigation{margin:128px 0 0;} div.menu-main-nav-container ul.menu{margin:10px 0; text-align:center;} #mobilemenu{height:auto;} .interior-content img{width:auto; max-width:100%; height:auto;} } @media(max-width:930px) { #sidebar #sidebar-right.interior img {margin:0 auto;float:right;} } @media only screen and (max-width:900px){ #footer.coated .footer-fsc{width:100%;} #footer.coated .footer-fsc-wrap{margin:0 auto 20px; width:150px} #footer.coated .footer-left, #footer.coated .footer-middle, #footer.coated .footer-right{width:100%; text-align:center; padding:0; margin-bottom:10px;} #footer.coated .footer-right p{text-align:center; margin:0;} #footer.coated .footer-middle p{float:none; text-align:center; margin:0;} #footer.coated .footer-middle p:first-child{margin:0 0 5px;} #rolls_for_less table td {word-break:break-word;} #prod_guide_tbl td, #prod_guide_tbl th {font-size:100% !important;} } @media only screen and (max-width:767px){ div.main-content, div.interior-content{width:100%;} .interior-content{width:100%;} div.interior-header-image{width:100%; max-width:none;} div.interior-header-image.landing{width:100%; max-width:none;} .search{margin:10px auto;} #interior-header-nav{display:none;} #sidebar{width:100%; float:left; padding-left:0;} #sidebar-right.interior{margin:0 auto; float:none;} #sidebar-right{width:100%; text-align:center;} #sidebar-right img{margin:0 auto; float:none;} #sidebar #sidebar-right.interior .coated-grid img {margin:0 auto; float:none;} #sidebar-right a{width:24%; margin:0; float:none; text-align:center; display:inline-block;} #footer{padding-top:85px;} #footer .footer-right{width:100%; top:10px; bottom:auto; position:absolute;} #footer .footer-left, #footer .footer-middle{width:100%; float:left; text-align:center; position:relative; top:auto; bottom:auto; margin:0 auto; padding:10px 0 0; display:block;} #footer .footer-right p{text-align:center;} #footer.coated .footer-fsc{width:100%;} #footer.coated .footer-fsc-wrap{margin:0 auto 20px; width:150px} #footer.coated .footer-left, #footer.coated .footer-middle, #footer.coated .footer-right{width:100%; text-align:center; padding:0; margin-bottom:10px; position:relative;} #footer.coated .footer-right p{text-align:center; margin:0;} #footer.coated .footer-middle p{float:none; text-align:center; margin:0;} #footer.coated .footer-middle p:first-child{margin:0 0 5px;} .header-inset{width:100%; float:right; text-align:center;} #sidebar-right{width:100%; max-width:none;} #sidebar-right.landing {width:100%;} .interior-header-image img{border-radius:10px 10px 0 0; border:1px solid #ccc;} .testimonial tr td{width:100%; display:block; float:left;} table#testimonial tbody tr td.quote{padding:0 0 20px 0;} table#testimonial tbody tr td.author{padding:0; text-align:center;} .testimonial-arrow{top:auto; bottom:-21px; right:auto; left:30px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .videogallery.nav-outer {padding-bottom:303px;} .videogallery.nav-outer .main-navigation {position:absolute !important; top:303px !important; width:100% !important;} .videogallery.nav-outer .videogallery--navigation-container .navigationThumb { display:block !important; width:100% !important; } .coated-sustainability-lead {float: left; width: 100%;} #sustainabilitytable {display:none;} #container.coated-sustainability a.mobile-only {display:block;margin-top:1em;} #container.coated-contact-us .right-col {width:100% !important;} } @media only screen and (max-width:720px){ #map {transform:scale(0.33); transform-origin:top left; height:273px;} #maplegend {display:none;} div.dot {transform:scale(2);} #timelinebottom, #timeline{display:none;} #timeline-mobile{display:block;} table#box-styles tr td{display:block; width:100%; padding:0 0 10px!important;} } @media only screen and (max-width:600px){ #sidebar-right a{width:49%; margin:10px 0;} #header{background:url("/assets/images/header-mobile.jpg") no-repeat center;} #slider-large{height:0!important; overflow:hidden;} #slider-medium{height:auto!important; width:100%; overflow:hidden; position:relative;} .meteor-buttons{display:none;} .interior-content img{width:auto; max-width:100%; height:auto; display:block; float:none!important; padding:0!important; margin:5px auto!important;} .interior-content table.quality tr td{ width:100%; display:block;} .interior-content table.quality tr td p{padding:0 0 10px 0!important;} .interior-header-image img.full{display:none;} .interior-header-image img.medium{display:block;} /* For the video gallery, Need to override the !important img settings set just above */ .videogallery.nav-outer .navigationThumb-content img { float:left!important; margin: 6px 8px 6px 6px!important; } .grid .column { width: 100%; float: none; } } @media only screen and (max-width:480px){ #container div#header-bottom div.search form#searchform div input#s { width: 213px; } div.search {background-size: 100% 100%;width:270px;} } @media only screen and (max-width:320px){ #slider-medium{height:0!important; overflow:hidden;} #slider-small{height:auto!important; width:100%; overflow:hidden; position:relative;} }