/* load default latin fonts */ /* IMPORTANT: when changings fonts here, also update associated s */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: normal; font-display: swap; src: local('Roboto Light'), local('Roboto-Light'), url(/fonts/roboto-light-latin.woff2) format('woff2'), url(/fonts/roboto-light-latin.woff) format('woff'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: bold; font-display: swap; src: local('Roboto Medium'), local('Roboto-Medium'), url(/fonts/roboto-medium-latin.woff2) format('woff2'), url(/fonts/roboto-medium-latin.woff) format('woff'); } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: normal; font-display: swap; src: local('Barlow Condensed Medium'), local('BarlowCondensed-Medium'), url(/fonts/barlow-condensed-medium-latin.woff2) format('woff2'), url(/fonts/barlow-condensed-medium-latin.woff) format('woff'); } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: bold; font-display: swap; src: local('Barlow Condensed Bold'), local('BarlowCondensed-Bold'), url(/fonts/barlow-condensed-bold-latin.woff2) format('woff2'), url(/fonts/barlow-condensed-bold-latin.woff) format('woff'); } /* load extened latin fonts as needed */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: normal; font-display: swap; src: local('Roboto Light'), local('Roboto-Light'), url(/fonts/roboto-light-latin-ext.woff2) format('woff2'), url(/fonts/roboto-light-latin-ext.woff) format('woff'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: bold; font-display: swap; src: local('Roboto Medium'), local('Roboto-Medium'), url(/fonts/roboto-medium-latin-ext.woff2) format('woff2'), url(/fonts/roboto-medium-latin-ext.woff) format('woff'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: normal; font-display: swap; src: local('Barlow Condensed Medium'), local('BarlowCondensed-Medium'), url(/fonts/barlow-condensed-medium-latin-ext.woff2) format('woff2'), url(/fonts/barlow-condensed-medium-latin-ext.woff) format('woff'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: bold; font-display: swap; src: local('Barlow Condensed Bold'), local('BarlowCondensed-Bold'), url(/fonts/barlow-condensed-bold-latin-ext.woff2) format('woff2'), url(/fonts/barlow-condensed-bold-latin-ext.woff) format('woff'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } html { height: 100vh; box-sizing: border-box !important; } *, *::before, *::after { box-sizing: inherit; scroll-margin-top: 70px; /* anchor links should scroll to a position where they're visible below static header */ } body { display: flex; flex-direction: column; height: 100vh; width: 100%; margin: 0 auto; padding: 0; min-height: 100%; z-index: 1; background-color: #fff; border: none; font-family: Roboto, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; line-height: 1.5em; background-color: #fff; } body.popup { margin: 0; padding: 10px; width: auto; } body.productList { } body.productList nav#breadcrumb, body.productList h1 { text-align: center; } body.productList div#more-options, body.productList div.section { margin: 3em auto 1em auto; text-align: center; border: 1px solid #ccc; border-radius: 1.5em; padding: 1.5em; clear: both; } body.productList.withSummaries div#more-options, body.productList.withSummaries div.section { max-width: 45em; } body.productList div.section a.categoryList::after { right: 0px; left: 0px; background-color: transparent; border: none; } body.productList div.section a.categoryList:hover::after { background-color: rgba(0, 119, 255, 0.15); } body.productList div#write-review { margin: 3em auto 1em auto; padding: 1.5em; text-align: center; max-width: 30em; background-color: #def; border-radius: 1.5em; } body.productList div#write-review p { text-align: left; } body.producttype { } body.producttype nav#breadcrumb, body.producttype h1 { text-align: center; } body.brandIndex { } body.brandIndex nav#breadcrumb { text-align: center; } body.brandPage { } body.brandPage nav#breadcrumb { text-align: center; } body.brandPage h1 { text-align: center; min-height: 2em; line-height: 2em; font-size: 3em; } body.brandPage .brandLogoMain { max-height: 30vh; max-width: 50%; } body.brandPage div.alert { text-align: left; margin: 1em auto; max-width: 39em; } body.product { } body.product nav#breadcrumb, body.product h1 { text-align: center; } body.product h2 { text-align: center; margin: 2em 0 1em 0; } body.withCover { } body.withCover nav#breadcrumb { height: 3em; min-height: 3em; max-height: 3em; margin-top: 0; margin-bottom: -4em; padding: 1em 0 0 0; border: none; background: none; z-index: 2; color: #fff; text-shadow: 0 0 3px #000; } body.withCover nav#breadcrumb a { color: #fff; } /* so TinyMCE editor instances use a white content area background */ body.mceContentBody { display: block; /* unlike main body, which flexes */ background-color: #fff; background-image: none; padding: 0 8px; margin: 0; min-height: 100%; /* to ensure editor area is selectable on iPhone */ width: auto; border-top: 1px solid transparent; /* to fix isue with background color inexplicably showing in 6-px strip above in desktop Safari */ font-family: Roboto, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.0625rem; font-weight: 300; color: #333; line-height: 1.75rem; } body.mceContentBody a { color: #00c !important; } body.mceContentBody a:visited { color: #009 !important; } body.mceContentBody td { font-family: inherit; font-size: inherit; } body.mceContentBody.default { color: #999; } body.mceContentBody img { display: block; margin: 5px auto; max-width: 100% !important; max-height: 595px !important; width: auto; height: auto; } body.album_editor img { margin: 10px; vertical-align: top; } body.avatar_chooser { padding: 0; margin: 0; } body.avatar_chooser img { margin: 6px 0 0 12px; padding: 0; } /* HTML5 semantic elements: styles for old browsers without default styling */ header, nav, main, article, section, aside, footer { display: block; position: relative; margin: 0; padding: 0; z-index: 1; } article img { /* Scale images to fit in article container, while allowing (present in many legacy articles) to specify a smaller size for layout purposes. */ max-width: 100%; height: auto; } article td img { /* allow images inside tables to scale naturally */ max-width: initial; } .container { width: 100%; max-width: 1000px; position: relative; margin: 0 auto; padding: 10px 1.5%; z-index: 1; background-color: #fff; } body.debug .container { background-color: transparent; } #adSiteSkin { display: block; background-color: #fff; overflow: hidden; position:absolute; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; top: 110px; left: 0; right: 0; text-align: center; z-index: 0; -webkit-backface-visibility: hidden; /* hack to prevent flickering of fixed elements in Safari */ } /* cover up any portions of the skin that might display behind our content */ #adSiteSkin::after { content: ""; display: block; padding: 0; position: absolute; top: 0; left: -100%; right: -100%; height: 100%; width: 1000px; margin: 0 auto; background-color: #fff; } body.debug #adSiteSkin::after { background-color: #000; } #adSiteSkin.fixed { position: fixed; top: 0; } #adSiteSkin > :first-child { position: absolute; top: 0; left: -100%; right: -100%; } /* footer advertisement shows a 320x50 unit in a fixed position on small screens */ #footerAd { position: fixed; bottom: 0px; width: 100%; pointer-events: none; /* allow clicks on underlying elements when no ad content */ background-color: transparent; height: 50px; margin: auto; padding: 0; z-index: 2; text-align: center; } #footerAd>div>* { background-color: #eee; pointer-events: auto; } #footerAd>div>div>iframe { border: 0; } header { background-color: #f3f3f3; z-index: 3; font-size: .8125rem; line-height: 1.125rem; } header .container { background-color: transparent; } #logo { display: block; width: 180px; flex: 0 0 180px; height: 41px; margin: 0; padding: 0; border: 0; overflow: hidden; pointer-events: auto; } #logo img { border: 0; width: 180px; height: 75px; margin: -15px 0 0 -7px; } /* ========================================================================================== styles for pure-css hamburger menu, based on https://medium.com/@heyoka/responsive-pure-css-off-canvas-hamburger-menu-aebc8d11d793 ========================================================================================== */ @media (max-width: 749px) { /* Screen reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* Button styling */ .menu-toggle { display: block; padding: .6em 5px .6em 15px; line-height: 1em; font-size: 1em; color: #333; text-align: right; } .menu-toggle:hover, .menu-toggle:focus { color: #c00; } #main-menu-toggle { position: absolute; top: 8px; right: 10px; z-index: 4; } /* Default styles + Mobile first Offscreen menu style */ .main-menu { box-sizing: border-box; position: absolute; display: none; left: -200px; top: 0; height: 100vh; width: 100vw; padding-top: 0; padding-bottom: 5em; overflow-y: scroll; overflow-x: visible; transition: left 0.3s ease, box-shadow 0.3s ease; z-index: 999; font-size: 1.2rem; } .main-menu ul { box-sizing: border-box; list-style: none; margin: 0; padding: 3em 0 0; min-height: 100%; width: 100%; background: #05055b; text-align: center; } .main-menu a, .main-menu button.link { display: block; width: 100%; padding: 1em 15px; line-height: 1em; font-size: 1em; color: #fff; text-decoration: none; border-top: 1px solid #383838; } .main-menu a:visited { color: #fff; } .main-menu li { margin: 0; padding: 0; } .main-menu li.first a, .main-menu li.first button.link { margin-top: 1.5em; border-top: none; } .main-menu li:first-child a:first-child, .main-menu li:first-child button.link:first-child { border-top: none; } .main-menu ul a:hover, .main-menu ul button.link:hover, .main-menu ul a:focus { background: #333; text-decoration: underline; } .main-menu .menu-close { position: absolute; right: 7px; top: 3px; font-size: 1.2em; font-weight: bold; padding: 12px; border: none; } /* On small devices, allow it to toggle... */ /* :target for non-JavaScript [aria-expanded] will be used if/when JavaScript is added to improve interaction, though it's completely optional. */ .main-menu:target, .main-menu[aria-expanded="true"] { display: flex; flex-direction: column; left: 0; outline: none; -moz-box-shadow: 3px 0 12px rgba(0,0,0,.25); -webkit-box-shadow: 3px 0 12px rgba(0,0,0,.25); box-shadow: 3px 0 12px rgba(0,0,0,.25); } .menu-toggle:focus, .menu-close:focus { outline: none; } .menu-bars { display: inline-block; box-sizing: content-box; border-bottom: 12px double #05055b; border-top: 4px solid #05055b; height: 4px; width: 24px; } .main-menu:target .menu-close, .main-menu[aria-expanded="true"] .menu-close { z-index: 1001; } .main-menu:target ul, .main-menu[aria-expanded="true"] ul { position: relative; z-index: 1000; } /* We could use `.main-menu:target:after`, but it wouldn't be clickable. */ .main-menu:target + .backdrop, .main-menu[aria-expanded="true"] + .backdrop{ position: absolute; display: block; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 998; background: #000; background: rgba(0,0,0,.85); background-color: #05055b; cursor: default; } @supports (position: fixed) { .main-menu, .main-menu .menu-close, .main-menu:target + .backdrop, .main-menu[aria-expanded="true"] + .backdrop{ position: fixed; } } /* styles for items within menu */ header { position: fixed; top: 0; left: 0; right: 0; height: 54px; border-bottom: 3px solid #05055b; } header+*, header+*.container { margin-top: 54px !important; /* space for fixed-position header */ } header #logoContainer { padding-top: 4px; } header .main-menu .container { display: block; background-color: transparent; } header .main-menu div.container:first-of-type { order: 1; } .main-menu #headerPromo { display: none; } .main-menu #userinfo { font-size: 1em; } .main-menu #mainNavContainer { order: 0; } .main-menu #mainNav { background-color: transparent; display: flex; flex-direction: column; } .main-menu #mainNav li.link { order: 1; display: block; width: 100%; } .main-menu #mainNav li.searchform { order: 0; } .main-menu div.dropdown { display: none; } .main-menu #userinfo { display: flex; flex-direction: column; text-align: center; } .main-menu #userinfo #communityLinks { order: 0; } .main-menu #userinfo #globalWriteReview { order: 1; } .main-menu #userinfo #globalWriteReview b { display: none; } .main-menu #userinfo #currentUser { margin-top: 3em; order: 2; } .main-menu #userinfo #currentUser > a, .main-menu #userinfo #currentUser > button { border-top: none; font-weight: bold; } .main-menu #userinfo #currentUserAvatar { display: none; } .main-menu #userinfo #currentUserTools { padding-top: 0; } .main-menu #userinfo #currentUserTools > li:first-child { display: none; } .main-menu #userinfo #currentUserName b { font-weight: normal; } .main-menu .searchform { padding-bottom: 1em; } .main-menu .searchform input[type=text] { font-size: 0.8em; height: 24px; vertical-align: top; width: 60%; margin: 0 -5px 0 0; padding: 0 .5em; border: 0; border-radius: 5px 0 0 5px; } .main-menu .searchform input[type=image] { vertical-align: top; border-radius: 0 5px 5px 0; } } /* Main menu on larger screens */ @media (min-width: 750px) { *, *::before, *::after { scroll-margin-top: 20px; /* anchor links should scroll to just below top of screen */ } .menu-toggle { display: none; } .menu-close { display: none; } #logoContainer { height: 75px; margin-bottom: -75px; pointer-events: none; z-index: 2; } #secondaryNavContainer { min-height: 75px; z-index: 3; } #mainNavContainer { position: relative; clear: both; padding: 0; z-index: 2; width: 100%; background-color: #05055b; overflow-x: hidden; overflow-y: hidden; height: 35px; } #mainNav { display: block; height: 35px; list-style: none; margin: 0 auto; padding: 0; background-color: #05055b; border: 0; color: #fff; white-space: nowrap; overflow-y: hidden; height: 55px; width: 100%; position: relative; } #mainNav li.link { display: inline-block; height: 100%; margin: 0; padding: 0; white-space: nowrap; color: #fff; border: 1px solid #05055b; border-bottom: none; } #mainNav li.link:hover { background-color: #f3f3f3; color: #05055b; } #mainNav li.link.rewards { background-color: #007f00; } #mainNav li.link.rewards:hover { background-color: #090; } #mainNav li.link.rewards:hover a { color: #fff; } #mainNav li.link.rewards div.dropdown { background-color: #090; color: #fff; font-weight: bold; font-size: 1.1em; text-align: center; } #mainNav li.link.rewards div.dropdown p { margin: 2em; } #mainNav li.link.rewards div.dropdown a.obviousButton { padding: .5em 1em; color: #fff; background-color: #05055b; border-color: #fff; } #mainNav a { display: inline-block; margin: 0 0 0 0; padding: 7px 10px; border: 0; color: #fff; text-decoration: none; font-size: 1em; } #mainNav a:visited { color: #fff; } #mainNav li.link > a { font-family: "Barlow Condensed", "HelveticaNeue-CondensedBold", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1em; padding: 7px 15px; font-size: 1.125rem; } #mainNav li.link:hover > a { color: #05055b; } #mainNav li.searchform { display: inline-block; margin: 0; padding: 0 12px; white-space: nowrap; font-size: 1em; background-color: #05055b; color: #fff; border: 1px solid #05055b; border-bottom: none; } #mainNav li.searchform input[type=text] { display: none; } #mainNav li.searchform input[type=image] { border-radius: 5px; } #mainNav div.dropdown { display: none; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; position: absolute; z-index: 1000; top: 100%; left: -9999px; right: 0 list-style: none; background-color: #f3f3f3; /* for browsers that don't do RGBa */ background-color: rgba(243,243,243,0.97); border: 1px solid #05055b; border-top: none; width: 100%; margin: 0 auto; padding: 10px 15px; font-size: 1em; } /* use transitions on non-touch (non-iOS) devices */ #mainNav.notouch div.dropdown { display: flex; left: -9999px; -webkit-transition: all 0s linear 0.3s; -moz-transition: all 0s linear 0.3s; -ms-transition: all 0s linear 0.3s; -o-transition: all 0s linear 0.3s; transition: all 0s linear 0.3s; right: 0 } #mainNav li.link:hover div.dropdown { display: flex; left: 0; right: 0; } #mainNav div.dropdown ul { margin: 0 15px; min-width: 10em; max-width: 20em; } #mainNav div.dropdown li { list-style: none; margin: .5em 0; padding: 0; } #mainNav div.dropdown li:first-child { margin-top: 2em; } #mainNav div.dropdown li.primary { font-weight: bold; margin-top: 1.2em; } #mainNav div.dropdown li.primary a { color: #05055b; } #mainNav div.dropdown li.more { font-style: italic; } #mainNav div.dropdown a { color: #666; margin: 0; padding: 0; font-size: 1em; } #mainNav div.dropdown a:hover { text-decoration: underline; } #mainNav div.dropdown ul.dropdownFooter { width: 100%; min-width: 100%; margin: 0; padding-top: 1em; text-align: right; clear: both; } #mainNav div.dropdown ul.dropdownFooter a { color: #666; } /* overrides for "moderate" dropdown menus */ #mainNav.moderateNav li.link { position: relative; } #mainNav.moderateNav div.dropdown { width: 250px; font-size: 1.1em; white-space: normal; } #mainNav.moderateNav div.dropdown ul { width: 100%; margin: 0; } #mainNav.moderateNav div.dropdown ul.dropdownFooter { text-align: left; } #mainNav.moderateNav div.dropdown ul:not(.dropdownFooter) li:not(.primary) { padding-left: 15px; font-size: .9em; } #headerPromo { display: none; /* don't display on small screens */ width: 234px; margin: 0 0.5em; margin-left: 35%; margin-right: -200px; text-align: center; } body.debug #headerPromo { background-color: red; } #searchform { text-align: right; margin: 4px 4px 0 0; } #searchform input { font-family: inherit; font-size: 1em; font-weight: inherit; color: #05055b; vertical-align: middle; height: 26px; } #searchform input[type=text] { padding: 0 .5em; border: 0; margin: 0 -5px 0 0; width: 160px; border-radius: 5px 0 0 5px; } #searchform input[type=image] { border-radius: 0 5px 5px 0; } #searchform input:focus { outline: none; } /* The next 3 rules style the placeholder text. For some reason this need to be declared separately for each browser. */ #searchform input::-webkit-input-placeholder { color:#999; font-style: italic; opacity: 1; } #searchform input::-ms-input-placeholder { color:#999; font-style: italic; opacity: 1; } #searchform input::-moz-placeholder { color:#999; font-style: italic; opacity: 1; } #userinfo { position: relative; float: right; color: #999; text-align: right; padding: 0; margin: 0 0 0 0.5em; line-height: 1.5em; white-space: nowrap; list-style: none; } #userinfo > li { display: inline-block; padding: 0 .75em; } #userinfo > li:nth-child(3) { display: inline; padding-left: 0; } #userinfo > li:nth-child(3)::before { content: "\A"; white-space: pre; } #userinfo > li:nth-child(4)::before, #userinfo > li:nth-child(5)::before { content: "|"; margin-left: -0.75em; margin-right: .75em; } #userinfo a, #userinfo button.link { color: #05055b; text-decoration: none; margin: 0; } #userinfo a:hover, #userinfo button.link:hover { text-decoration: underline; } #userinfo a:visited { color: #05055b; } #currentUser { position: relative; display: inline; padding-right: 0 !important; } #currentUserAvatar { display: inline-block; width: 26px; height: 26px; vertical-align: middle; position: relative; } #currentUserName { display: none; } #currentUser img { height: 26px; width: 26px; } #currentUser>a { font-weight: bold; padding-right: .75em; } #currentUser #currentUserTools { display: none; position: absolute; z-index: 1000; top: 26px; right: 0; background-color: #eee; border: 1px solid #ccc; list-style: none; margin: 0; padding: 0 0 .5em 0; text-align: left; font-size: 1em; line-height: 1.8em; min-width: 100%; } #currentUser #currentUserTools li { list-style: none; margin: 0; padding: 0; } #currentUser #currentUserTools li:first-child { background-color: #ccc; margin-bottom: .5em; padding: 0 inherit; white-space: nowrap; } #currentUser #currentUserTools a { display: block; margin: 0; padding: 2px 10px; } #currentUser.loggedIn #currentUserTools a:hover { background-color: #ccc; } #currentUser.loggedIn>a { display: inline-block; height: 26px; } #currentUser.loggedIn:hover>a { background-color: #ccc; } #currentUser.loggedIn:hover>a, #currentUser.loggedIn:hover>a:visited, #currentUser.loggedIn:hover>a:hover { text-decoration: none; } #currentUser.loggedIn:hover #currentUserTools { display: block; } #currentUser.loggedIn:hover #currentUserTools a { color: #05055b; } #globalWriteReview { display: inline-block; font-weight: bold; margin-left: 1em !important; white-space: nowrap; } #globalWriteReview b { display: inline-block; font-size: 2em; line-height: .95em; width: 26px; height: 26px; vertical-align: middle; position: relative; } #globalWriteReview span { overflow: hidden; } #globalWriteReview:hover { text-decoration: none !important; } #globalWriteReview:hover span { text-decoration: underline; } } #breadcrumb { color: #aaa; font-size: .8125rem; background-color: #fff; border-left: 15px solid #fff; border-right: 15px solid #fff; padding: 0; padding-top: 15px; padding-bottom: 0; line-height: 1.4em; } #breadcrumb a { color: #aaa; text-decoration: none; } #breadcrumb a:visited { color: #aaa; } #breadcrumb a:hover { text-decoration: underline; } main, main.container { position: relative; flex: 1 0 auto; padding-top: 15px; padding-bottom: 100px; background-color: #fff; font-size: 1.0625rem; font-weight: 300; color: #333; line-height: 1.75rem; } main input, main select, main textarea { font-family: inherit; font-size: inherit; } #breadcrumb+main { padding-top: 0; } header+main { padding-top: 25px; } /* 3-column layouts */ .column1of3, .column2of3, .column3of3 { position: relative; float: left; margin: 0; padding: 0 1.5%; } .column1of3 > p:first-child, .column2of3 > p:first-child, .column3of3 > p:first-child { margin-top: 0; padding-top: 0; } /* Column widths are calculated based on the full container width. Full explanation with 8-column layouts. */ .column1of3 { width: 34.33%; } .column2of3 { width: 68.67%; } .column3of3 { width: 103%; clear: both; margin-left: -1.545%; margin-right: -1.545%; } /* 8-column layouts */ .column1of8, .column2of8, .column3of8, .column4of8, .column5of8, .column6of8, .column7of8, .column8of8 { position: relative; float: left; margin: 0; padding: 0 1.5%; } .column1of8 > p:first-child, .column2of8 > p:first-child, .column3of8 > p:first-child, .column4of8 > p:first-child, .column5of8 > p:first-child, .column6of8 > p:first-child, .column7of8 > p:first-child, .column8of8 > p:first-child { margin-top: 0; padding-top: 0; } /* Column widths are calculated based on the full container width, including padding (100% + 1.5% padding each side = 103%) For example: column3of8 = calc(103% * 3 / 8) = 38.625% */ .column1of8 { width: 12.875%; } .column2of8 { width: 25.75%; } .column3of8 { width: 38.625%; } .column4of8 { width: 51.5%; } .column5of8 { width: 64.375%; } .column6of8 { width: 77.25%; } .column7of8 { width: 90.125%; } .column8of8 { width: 103%; clear: both; margin-left: -1.545%; margin-right: -1.545%; } /* 16-column (select split 8ths) layouts */ .column1of16, .column3of16, .column5of16, .column7of16, .column9of16, .column11of16, .column13of16, .column15of16 { position: relative; float: left; margin: 0; padding: 0 1.5%; } .column1of16 > p:first-child, .column3of16 > p:first-child, .column5of16 > p:first-child, .column7of16 > p:first-child, .column9of16 > p:first-child, .column11of16 > p:first-child, .column13of16 > p:first-child, .column15of16 > p:first-child { margin-top: 0; padding-top: 0; } .column1of16 { width: 6.4375%; } .column3of16 { width: 19.3125%; } .column5of16 { width: 32.1875%; } .column7of16 { width: 45.0625%; } .column9of16 { width: 57.9375%; } .column11of16 { width: 70.8125%; } .column13of16 { width: 83.6875%; } .column15of16 { width: 96.5625%; } /* for use in combination with 3-, 8-, and 16-column classes (above) */ .firstcolumn { clear: both; margin-left: -1.545%; } .firstcolumn.noclear { clear: none; } .lastcolumn { margin-right: -1.545%; float: right; } /* on small screens, column content reflows into one continuous column */ @media (max-width: 750px) { .column1of3, .column2of3, .column3of3 { width: 100%; margin-right: 0; margin-left: 0; margin-bottom: 2em; padding-left: 0; padding-right: 0; clear: both; float: none; } .column1of8, .column2of8, .column3of8, .column4of8, .column5of8, .column6of8, .column7of8, .column8of8 { width: 100%; margin-right: 0; margin-left: 0; margin-bottom: 2em; padding-left: 0; padding-right: 0; clear: both; float: none; } .column3of16, .column5of16, .column7of16, .column9of16, .column11of16, .column13of16, .column15of16 { width: 100%; margin-right: 0; margin-left: 0; margin-bottom: 2em; padding-left: 0; padding-right: 0; clear: both; float: none; } /* center the column's content when it's the only column (e.g. small screen) */ .centerContentWhenSingleColumn { text-align: center; } } /* footer styles */ footer { flex-shrink: 0; color: #ccc; background-color: #05055b; padding: 1em 0; z-index: 1; } #prefooter { background-color: #eee; color: #999; text-align: center; padding: 2em 0 3em 0; font-size: 1.2em; margin: -1em 0 1em 0; } #prefooter b { color: #666; font-size: 1.1em; } #prefooter input, #prefooter button { display: inline-block; margin: 0; height: 2em; font-size: 1em; background-color: #fff; border: 1px solid #999; vertical-align: middle; padding: 5px 10px; } #prefooter input { border-radius: 5px 0 0 5px; border-right: none; } #prefooter input:focus { outline: none; } #prefooter button { border-radius: 0 5px 5px 0; border-left: 1px solid #ccc; background-color: #fc0; color: #00c; } #prefooter button:active { background-color: #c90; color: #33f; } #prefooter>form>div { /* to hide recaptcha badge */ display: none; } footer .container { background-color: transparent; display: flex; flex-flow: row wrap; justify-content: center; padding: 0; } footer .container nav { margin: 1em; width: 100%; } footer a { color: #ccc; text-decoration: none; } footer a:hover { text-decoration: underline; } footer a:visited { color: #ccc; } footer a img { border: 0; } footer div.legal { width: 100%; font-size: .9em; color: #999; margin: 1em; text-align: center; } footer div.legal a { color: inherit; text-decoration: underline; } footer div.legal a, footer div.legal span { margin-right: 10px; } footer ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; list-style: none; margin: 0; padding: 0; font-weight: bold; } footer ul li { padding: 0 10px; } footer ul li:first-child { flex-basis: 100%; text-align: center; } /* generic/site-wide content styles */ h1, h2, h3, h4, h5, h6 { font-family: "Barlow Condensed", "HelveticaNeue-CondensedBold", "Helvetica Neue", Helvetica, Arial, sans-serif; } h1 { font-size: 2.75rem; margin: 0px 0px .5em 0px; padding: 10px 0px; line-height: 1.1em; } h1.withCover { background-color: #ccc; background-size: cover; background-position: center; text-align: center; color: #fff; text-shadow: 0 0 10px #000; width: calc(100% + 30px); margin: .25em 0 1em -15px; padding: 22vh 10% 25vh 10%; box-sizing: border-box; font-size: 3em; } h1.withCover + .coverCredit { text-align: right; margin-top: -3em; margin-bottom: -0.65em; color: #ccc; text-shadow: 0 0 10px #fff; font-variant: all-small-caps; } h2 { margin: .2em 0 .2em 0; padding: 0px; font-size: 2em; color: #000; line-height: 1.1em; } h2 a { text-decoration: none; color: #444; } h2 a:hover { text-decoration: underline; color: #444; } h2 a:visited { color: #444; } h2 button.link { color: #444; } h2 + p { margin-top: 0; } p + h2, ul + h2, ol + h2, table + h2 { margin-top: 1.5em; } h3 { margin: 1em 0 .5em 0; padding: 0px; font-size: 1.5em; font-weight: bold; color: #000; } h3 small { font-size: .7em; font-weight: normal; font-style: normal; } h4 { margin: .5em 0px; padding: 0px; font-size: 1.25em; font-weight: bold; color: #444; } strong, b { font-weight: bold; /* to make Firefox behave like Webkit */ } p { margin: .5em 0px .75em 0px; padding: 0px; } ul { margin: .5em 0px .75em 2em; padding: 0px; } ul li, ol li { margin: 0.4em 0; padding: 0; } ul li p, ol li p { margin: 0 0 0.4em 0; padding: 0; } ul.compact li, ul.compact li p, ol.compact li, ol.compact li p, li.compact, li.compact p { margin: 0; padding: 0; } li ul { margin: 0px 0px 0px 2em; padding: 0px; } a { color: #00c; } a:visited { color: #009; } blockquote { font-style: italic; font-size: 1em; padding: .5em 3%; margin: 0 3%; width: 88%; border: 0; background-color: #eee; -moz-border-radius: 20px; -webkit-border-radius: 20px; } blockquote ul { margin: 0 0 0 1.5em; padding: 0; } blockquote ul li { margin: 0; padding: 0; } blockquote ul ul { margin: .5em 0px .75em 2em; } blockquote.quotedProductDescription { margin: .5em 5em 1.5em; padding: .5em 1em 1.5em; background-color: #def; font-style: italic; width: auto; } blockquote.quotedProductDescription a.citation, blockquote.quotedProductDescription cite { font-style: normal; line-height: 3em; } blockquote.quotedProductDescription ul { margin-left: 1.5em; } p.attribution { text-align: right; margin-right: 6%; color: #666; margin-bottom: 1.5em; } p.attribution a { color: #666; } /* make sure this style isn't overridden within a jQuery UI tab */ .ui-tabs .ui-tabs-panel p.attribution a { color: #666; } small { font-size: .9em; } small.light { color: #999; } small.light a, small.light button.link { color: #66f; text-decoration: none; } small.light a:hover, small.light button.link:hover { text-decoration: underline; } .small { font-size: .9em; } .clearBoth { position: relative; clear: both; width: 1px; height: 1px; margin-bottom: -1px; } img { /* make any images that are scaled in the browser should look okay in IE7+ */ -ms-interpolation-mode: bicubic; } a img { border: 0; } /* sidebars */ .sidebar { width: 100%; margin-bottom: 1.4em; border: 1px solid #eee; background-color: #eee; border-radius: 10px; font-size: .9em; } .sidebarhead { padding: .7em; } .sidebarhead h2 { color: #333; margin: 0px; font-size: 1.3em; font-weight: normal; } .sidebarhead h2 a { color: inherit; } .sidebarbody { margin: 0px; padding: .5em 10px; line-height: 1.3em; } .sidebarbody ul { display: block; margin: 0; padding: 0; } .sidebarbody ul li { display: block; margin: 0px; padding: .3em 0px; padding-left: .8em; text-indent: -.8em; } .sidebarbody a { text-decoration: none; } .sidebarbody a:hover { text-decoration: underline; } .articleSidebar { float: right; width: 40%; background-color: #eee; margin: 2%; padding: 2%; font-size: .9em; border: 1px solid #eee; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .byline { font-size: .9em; color: #666; line-height: 1.5em; } .byline a { text-decoration: none; } .byline a:hover b { text-decoration: underline; } .byline > .reviewer > b { font-size: 1rem; color: #000; } .byline .reviewer small { color: #999; text-decoration: none; } h1 + p.byline { margin-top: -.5em; } img.bylineAvatar { float: left; width: 32px; height: 32px; border: 0; margin: 0 5px .5em 0; } .caption { color: #999; font-size: .85em; line-height: 1.3em; font-style: italic; } figure { margin: 2em auto; padding-bottom: 0.1px; } figure img { margin: 0 auto; } figure figcaption { text-align: center; color: #999; font-size: .85em; line-height: 1.3em; font-style: italic; margin: 1em auto; } figure figcaption i, figure figcaption em { font-style: normal; } div.authorBio { font-style: italic; border: 1px solid #eee; padding: .5em 1em; border-radius: 1em; margin: 1em 0; } td.formlabel { text-align: right; font-weight: bold; padding-right: 15px; } td.formlabel small { font-weight: normal; font-style: italic; line-height: 1.2em; color: #666; } /* at small sizes, reflow tables designed for form input */ @media (max-width: 749px) { table.formTable, table.formTable > tr, table.formTable > td, table.formTable > th, table.formTable > thead, table.formTable > thead > tr, table.formTable > thead > th, table.formTable > thead > tr > td, table.formTable > tbody, table.formTable > tbody > tr, table.formTable > tbody > th, table.formTable > tbody > tr > td { display: block; width: 100%; } table.formTable td.formlabel { text-align: left; } table.formTable input[type="text"], table.formTable textarea { width: 100%; } } /* styles for lists of users' posts */ table.postlist { border-collapse: collapse; border-bottom: 1px solid #eee; width: 100%; font-size: .9em; } table.postlist tr { vertical-align: middle; } table.postlist tr td { padding: 3px; border-top: 1px solid #eee; } table.postlist td.date { text-align: right; color: #999; font-size: .8em; white-space: nowrap; } div.morePostList { font-size: .9em; font-weight: bold; padding: 3px; } /* user profile photo */ div.profilePhoto img { display: block; width: 100%; max-width: 300px; margin: 0 auto; border-radius: 22%; } /* div for displaying links to pages in a sequence */ div#bottomPageBar { position: relative; clear: both; width: 100%; color: #666; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin: 1.5em 0; padding: .7em 0; text-align: center; font-size: 1.1em; } div#bottomPageBar a { text-decoration: none; margin: 0 7px; } div#bottomPageBar a:hover { text-decoration: underline; } div#bottomPageBar b { color: #000; margin: 0 7px; } div#bottomPageBar span.disabled { margin: 0 7px; } /* styles for elements surrounding the forum visual editor */ .editorTabs { position: relative; z-index: 100; text-align: right; font-size: .9em; border: 0; padding: 0; margin: 0; } .editorTab { padding: 3px 5px 2px 5px; background-color: #fff; border: 1px solid #ccc; border-bottom: none; text-decoration: none; margin: 0; } .editorTabSelected { padding: 3px 5px; background-color: #eee; border: 1px solid #ccc; border-bottom: none; text-decoration: none; margin: 0; } div#formattingLink { font-size: .9em; height: 28px; background-color: #eee; border: 1px solid #ccc; border-bottom: none; margin: 0; padding: 0 5px; line-height: 2.6em; text-align: right; } /* styles for article comments */ div.comments div.comment { border-bottom: 1px solid #eee; margin-bottom: .5em; padding-bottom: 0; clear: both; } div.comments div.comment div.byline { position: relative; margin: 1em 0; } div.comments div.comment div.byline small { display: block; color: #999; font-size: .8em; line-height: 1.4em; } div.comments div.comment div.byline img { width: 40px; height: 40px; margin: 0 5px .5em 0; float: left; border-radius: 5px; } div.comments div.comment div.date { color: #999; font-size: .8em; } div.comments div.comment div.message { clear: both; margin: 0; } div.comments div.comment div.helpful { font-size: .9em; height: 1.8em; float: left; text-align: left; width: 50%; height: 20px; } div.comments div.comment div.controls { padding: 0 0 1.2em 0; margin: 0; background-color: #fff; clear: right; border: 0; text-align: right; font-size: .9em; line-height: 1.3em; min-height: 2.1em; } div.comments div.comment div.message img { display: block; max-width: 100%; max-height: 595px; width: auto; height: auto; margin: 2em auto; border: 0; } div.comments div.comment div.message iframe { display: block; max-width: 100%; margin: 5px auto; } h3.commentsheader { margin: 0; font-size: 1.1em; font-weight: bold; color: #000; font-style: normal; } /* styles for "was this helpful?" links */ .helpful { color: #333; font-style: italic; } .helpful a { background-color: #eee; padding: 1px 5px; margin: 0 .3em; border: 1px solid #999; border-radius: 5px; -moz-border-radius: 5px; text-decoration: none; font-weight: normal; font-style: normal; color: #666 !important; } .helpful a:hover, .helpful a.selected { background-color: #999 !important; color: #fff !important; } .helpful-confirm { display: none; font-style: italic; } .helpful-summary { font-style: italic; clear: left; } .feedbackPrompt { text-align: left; height: 1em; margin-bottom: -1em; color: #ccc; text-decoration: underline; } /* styles for advertisements */ .adContainer { color: #bbb; font-size: .9em; text-align: center; margin: 5em 0; line-height: 1.3em; font-variant: small-caps; } .adContainer>div { margin: 0 auto; text-align: center; overflow: hidden; } .adContainer>div>div>iframe { /* show a light border around DFP-served ads */ border: 1px solid #ccc !important; } .adContainer>div>div:first-child::after { /* show a notice above ads (doesn't show if no ad is served */ content: "advertisement"; display: block; background-color: #fff; margin-bottom: 5px; } #headerLeaderboard { display: flex; flex: 1 0 auto; position: relative; margin: 0 auto; } /* retailer promo sidebar */ #retailerPromoSidebar { border: 1px solid #eee; border-radius: 10px; } #retailerPromoSidebar h2 { background-color: #eee; border-radius: 10px 10px 0 0; padding: 10px; margin-top: 0; font-size: 1.2em; line-height: 1.1em; color: #333; font-weight: normal; } .retailerPromoContent { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; padding: 1.2em 10px; font-size: .8em; line-height: 1.2em; } .retailerPromoContent a { font-weight: bold; font-size: 1.2em; text-decoration: none; } .retailerPromoContent a:hover { text-decoration: underline; } .retailerPromoLogo { display: block; width: 100px; margin-right: 1em; } .retailerPromoLogo img { width: 100px; flex-basis: 25%; } .retailerPromoDetails { display: block; flex-expand: 1; } .retailerPromoRestrictions { color: #ccc; font-size: .8em; } button.link { display: inline; background: none; border: none; padding: 0; font: inherit; color: #00c; text-align: inherit; text-decoration: underline; cursor: pointer; } button.link.hover { text-decoration: none; } button.link.hover:hover { text-decoration: underline; } button.link.hover:hover small { text-decoration: none; } input.postButton { font-family: inherit; font-size: 1em; color: #00c; background-color: #eee; border: 1px solid #ccc; padding: 3px; text-decoration: none; margin-left: 1em; cursor: pointer; } .obviousButton { font-size: 1em; font-weight: bold; text-decoration: none; color: #00c; background-color: #fc0; border: 1px solid #999; padding: 3px 1em; cursor: pointer; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-family: inherit; line-height: inherit; } .obviousButton.red { color: #fff; background-color: #c00; border: 1px solid #999; } .obviousButton.green { color: #fff; background-color: #007f00; border: 1px solid #999; } .obviousButton.blue { color: #fff; background-color: #00c; border: 1px solid #999; } .obviousButton.darkblue { color: #fff; background-color: #05055b; border: 1px solid #999; } .obviousButton.orange { color: #fff; background-color: #f90; border: 1px solid #999; } .obviousButton.purple { color: #fff; background-color: #90c; border: 1px solid #999; } .obviousButton.grey { color: #fff; background-color: #666; border: 1px solid #999; } .obviousButton:disabled { color: #99f; background-color: #fff5cc; text-decoration: none; } .obviousButton:hover { text-decoration: underline; } a.obviousButton { display: inline-block; } .lessObviousButton { font-size: 1em; font-weight: bold; text-decoration: none; color: #00c; background-color: #eee; border: 1px solid #ccc; padding: 3px 1em; cursor: pointer; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-family: inherit; line-height: inherit; } .lessObviousButton:hover { text-decoration: underline; } a.lessObviousButton { display: inline-block; } ul#validation_errors { color: red; background-color: #fff5cc; border: 1px solid #f00; margin: 0; padding: 1em; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } ul#validation_errors li { margin: 0 0 0 1em; padding: 0; } a.help { color: #66f; font-weight: bold; background-color: #def; text-decoration: none; padding: 0 .5em; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 1px solid #def; } a.help:hover { border: 1px solid #66f; } #alerts { padding: 0 15px; } div.alert { position: relative; background-color: #fff5cc; border: 1px solid #fc0; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; margin: 1em 0; padding: .5em 1.5em; } div.alert.admin { background-color: #fcc; border-color: #f00; } .highlightWarning { background-color: #f99; } .highlightGood { background-color: #9f9; } div.socialPrompt { clear: both; background-color: #eee; border: 1px solid #ccc; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; margin: 1em 0; padding: .5em 1.5em; } .disclaimer { font-size: .9em; color: #999; line-height: 1.3em; } .disclaimer a { text-decoration: underline; color: #999; } .adminControls { font-size: .9em; } .adminControls a { text-decoration: none; } .adminControls a:hover { text-decoration: underline; } .adminButton { font-size: .9rem; color: #00c; background-color: #ecc; border: 1px solid #999; padding: 3px; margin: 0 .5em; cursor: pointer; font-family: inherit; } .adminButton:hover { text-decoration: underline; } option.faint { color: #999; } iframe.lazyLoader { visibility: hidden; } /* Styles for floating social media buttons */ #floating_social_wrapper { position: absolute; top: 0px; left: -47px; width: 55px; } #floating_social { position:absolute; z-index: 2; width: 55px; padding: 20px 0 1em 0; text-align: center; margin: 0; -webkit-backface-visibility: hidden; /* hack to prevent flickering of fixed elements in Safari */ } #floating_social > b { font-weight: bold; color: #666; font-size: .9em; display: block; text-align: center; line-height: 1.2em; } #floating_social:hover > b { color: #000; } #floating_social ul { display: block; list-style: none; margin: 0; padding: 0; } #floating_social ul li { margin: 0; padding: 0; } #floating_social ul li span { display: block; width: 24px; height: 24px; margin: 0 auto 1em auto; text-indent: -9999px; background-size: 100% 100%; opacity: 0.5; cursor: pointer; } #floating_social ul li:hover span { opacity: 1; } #floating_social ul li.email span { background-image: url('/images/icons/email-24.png'); } #floating_social ul li.facebook span { background-image: url('/images/icons/facebook-24.png'); } #floating_social ul li.google span { background-image: url('/images/icons/google-24.png'); } #floating_social ul li.linkedin span { background-image: url('/images/icons/linkedin-24.png'); } #floating_social ul li.pinterest span { background-image: url('/images/icons/pinterest-24.png'); } #floating_social .social_button{ margin: 0 0 10px 0; } #floating_social.fixed { position: fixed; top:0px; } /* styles for floating vote total and contols */ .floating_vote { position: relative; float: left; width: 55px; margin-left: -62px; text-align: center; padding: 1em 0; color: #666; font-size: .9em; background-color: none; text-shadow: -1px -1px 2px white, -1px 1px 2px white, 1px 1px 2px white, 1px -1px 2px white; z-index: 1; -webkit-backface-visibility: hidden; /* hack to prevent flickering of fixed elements in Safari */ } .floating_vote.fixed { position: fixed; top:212px; } .floating_vote.offscreen { margin-left: -9999px; } .floating_vote.bottom { position: absolute; bottom:0; } /* styles for form input default text */ input.default, textarea.default { color: #999; } /* user badges */ .badges { cursor: default; } .badges a { text-decoration: none; } .badges a:hover { text-decoration: underline; } .badge { display: inline-block; background-color: #eef; border: 1px solid #ccf; color: #650; line-height: 1.5em; font-size: .7em; text-transform: uppercase; padding: 0 .5em; margin: 1.5px 0 1.5px 0; border-radius: 5px; } .badge.authority { background-color: #f3f9f3; border: 1px solid #ccc; } .badge.achievement { background-color: #e9f3ff; border: 1px solid #ccc; } .badge.industry { background-color: #f6eef9; border: 1px solid #ccc; } .badge.other { background-color: #eeeeff; border: 1px solid #ccc; } .badge.alert { background-color: #c33; border: none; color: #fff; font-weight: bold; font-size: .9em; border-radius: 1em; } .badge.new { background-color: #fc0; color: #c00; } a .badge:hover { text-decoration: underline; } /* reviewer reputation */ .reviewerRep { cursor: default; font-size: .9em; } .reviewerRep a { color: inherit; text-decoration: none; } .reviewerRep a:hover { text-decoration: underline; } div.ratingLink { display: block; width: 30px; height: 15px; font-weight: normal; margin: 0 auto; text-indent: -9999em; background-repeat: no-repeat; background-position: 50% 50%; cursor: pointer; } div.ratingLink.selected { font-weight: bold; } div.ratingLink.positive { background-image: url('/images/vote-up.gif'); } div.ratingLink.positive:hover { background-image: url('/images/vote-up-hover.gif'); } div.ratingLink.positive.selected { background-image: url('/images/vote-up-selected.gif'); } div.ratingLink.negative { background-image: url('/images/vote-down.gif'); } div.ratingLink.negative:hover { background-image: url('/images/vote-down-hover.gif'); } div.ratingLink.negative.selected { background-image: url('/images/vote-down-selected.gif'); } /* write-a-review promotion widget */ .reviewPromo { display: none; position: static; width: 100%; top: 75px; right: 5%; z-index: 999; /* allow clicks on underlying elements */ pointer-events: none; } .reviewPromoContent { position: relative; left: 0; top: 0; width: auto; margin: 0; padding: 1em; background-color: #fc0; border-radius: 10px; /* drop shadow */ -moz-box-shadow: 3px 3px 4px #999; -webkit-box-shadow: 3px 3px 4px #999; box-shadow: 3px 3px 4px #999; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')"; /* don't allow clicks on underlying elements */ pointer-events: auto; } .reviewPromoContent .reviewPromoArrow { position: absolute; width: 140px; height: 50px; top: -50px; right: 0%; background-image: url('/images/review-promo-triangle.png'); background-repeat: no-repeat; background-position: 0 0; /* allow clicks on underlying elements */ pointer-events: none; } .reviewPromoContent .doIt { display: block; clear: both; width: 50%; margin: 5px auto; padding: 5px 5%; background-color: #fff; border: 1px solid #ccc; border-radius: 5px; color: #00c; font-size: 1.1em; font-weight: bold; text-align: center; text-decoration: none; cursor: pointer; } .reviewPromoContent .doIt:hover { text-decoration: underline; border-color: #99a } .reviewPromoContent .remindMe { cursor: pointer; display: block; font-size: .9em; text-align: right; margin-right: 20%; } .reviewPromoContent .remindMe:hover { text-decoration: underline; } .reviewPromoInline { padding: 1em; background-color: #eee; border-radius: 10px; margin-top: 6em; font-size: .9em; color: #666; } .reviewPromoInline h2, .reviewPromoInline h3 { text-align: center; color: #666; } .reviewPromoInline img { display: block; margin: 1em auto; max-width: 100%; width: auto; height: auto; } /* styles for navigation between product kin */ .kinListContainer { width: 100%; overflow-x: auto; } ul.kinList { display: block; list-style: none; margin: 1px 0 1em 0; padding: 0; border-bottom: 1px solid #05055b; white-space: nowrap; } h1 + ul.kinList { margin-top: -.5em; } ul.kinList li { display: inline-block; list-style: none; margin: 0 .5em -1px .5em; vertical-align: bottom; } ul.kinList li a { display: block; text-decoration: none; padding: .2em .5em; background-color: #def; border: 1px solid #66c; border-bottom: 1px solid #05055b; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; } ul.kinList li.admin a { background-color: #ecc; } ul.kinList li a:hover { text-decoration: underline; } ul.kinList li a small { font-size: .8em; font-weight: normal; } ul.kinList li.selected a, ul.kinList li.selected a:hover { text-decoration: none; background-color: #fff; border: 1px solid #05055b; border-bottom: 1px solid #fff; font-weight: bold; color: #05055b; } ul.kinList li.empty { border-bottom: inherit; width: 0; } ul.kinList li.empty a { background-color: #fff; border: none; border-top: 1px solid #fff; } /* floating product page title and in-page navigation elements */ div.productTitleBlock { position: relative; padding-top: 10px; margin-bottom: 20px; background-color: #fff; -webkit-backface-visibility: hidden; /* hack to prevent flickering of fixed elements in Safari */ } .productTitleBlock .brandLogo { max-height: 1.2em; max-width: 20%; } .productTitleBlock { text-align: center; } /* affiliate disclosure/notice */ #affiliateNotice { font-size: .85em; color: #999; line-height: 1.4em; font-style: italic; margin: 0 auto; max-width: 50em; } /* floating product page summary sidebar */ #fixedSidebar { display: block; position: relative; padding: 15px 0; margin: 0; border: none; background-color: #fff; -webkit-backface-visibility: hidden; /* hack to prevent flickering of fixed elements in Safari */ font-size: .9em; } /* clearfix per https://css-tricks.com/snippets/css/clear-fix/ */ #fixedSidebar:after { content: ""; display: table; clear: both; } @media (max-width:749px) { #fixedSidebar.fixed { position: fixed; top: 53px; left: 0; width: 100%; margin: 0 auto; padding: 0; z-index: 100; } #fixedSidebar.fixed #productPriceSummary { margin: 0; padding: .2em 5px 0 5px; border: none; border-radius: 0; line-height: 1.8em; } #fixedSidebar.fixed p { display: none; } #fixedSidebar.fixed h3 { margin: 0; font-size: 1.4em; font-weight: normal; } #fixedSidebar.fixed .obviousButton { font-weight: normal; text-decoration: underline; color: #33f; background-color: transparent; border: none; padding: 0; } #fixedSidebar.fixed div { display: inline; } #fixedSidebar.fixed br { display: none; } #fixedSidebar.fixed small { display: none; } #fixedSidebar.fixed div.whereToBuy { background-color: transparent; padding: 0; margin: 0; } #fixedSidebar.fixed .wtbSponsoredNote { display: none; } #fixedSidebar.fixed div.whereToBuy h4 { display: inline; font-weight: normal; color: #33f; text-decoration: underline; font-family: inherit; font-size: 1.1em; cursor: pointer; margin-left: 1.2em; } #fixedSidebar.fixed b { font-weight: normal; } } @media (min-width:750px) { #fixedSidebar.fixed { position: fixed; top: 0; margin-top: 0; z-index: 100; } } #fixedSidebar #productPriceSummary { margin-top: 0; } /* styles for a "sort by" dropdown list */ nav.sortBy { position: absolute; top: 0; right: 0; display: block; padding: 0; border: none; margin: 0; text-align: right; min-height: 4em; } nav.sortBy ul { display: inline-block; position: absolute; z-index: 1000; top: calc(2em + 1px); right: 0; background-color: #fff; border: 1px solid #ddd; list-style: none; margin: 0; padding: 0; text-align: left; font-size: 1em; line-height: 1.8em; width: 12em; cursor: pointer; } nav.sortBy>ul>li { background-color: inherit; margin: 0; padding: 0; } nav.sortBy>ul>li:first-child span::after { content: "\2228"; /* see https://stackoverflow.com/questions/190396/adding-html-entities-using-css-content */ display: inline-block; float: right; font-weight: bold; color: #999; } nav.sortBy>ul>li>a, nav.sortBy>ul>li>button, nav.sortBy>ul>li>span { display: block; position: relative; width: 100%; text-align: left; margin: 0; padding: .3em .7em; } nav.sortBy>ul>li>a, nav.sortBy>ul>li>button.link { padding-left: 2em; text-decoration: none; color: #333; } nav.sortBy>ul>li.selected a::before, nav.sortBy>ul>li.selected button.link::before { content: "\2713"; /* see https://stackoverflow.com/questions/190396/adding-html-entities-using-css-content */ display: block; position: absolute; top: .5em; left: .7em; } nav.sortBy>ul>li:hover { background-color: #def; } nav.sortBy>ul:hover>li { display: block; } /* enable toggling menus on click using the checkbox method https://css-tricks.com/the-checkbox-hack/ */ input.menuToggle { display: none; } input.menuToggle ~ .toggled { display: none; } input.menuToggle:checked ~ .toggled { display: inline-block; } input.menuToggle ~ label { border: 1px solid #ccc; display: inline-block; padding: 3px 10px; cursor: pointer; white-space: nowrap; } input.menuToggle:checked ~ label { background-color: #eee; } input.menuToggle ~ label::after { content: " \2228"; color: #ccc; } /* catch clicks outside an open menu */ label.menuBackdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); z-index: -1; } /* styles for faceted navigation */ nav.facets { margin-bottom: 7em; width: 100%; max-width: 25em; } nav.facets h3 { padding-bottom: .25em; border-bottom: 1px solid #eee; } nav.facets h3:first-child { margin-top: 0; } nav.facets a { text-decoration: none; } nav.facets a:hover { text-decoration: underline; } nav.facets b { color: #444; } nav.facets small { color: #999; } nav.facets ul.facetGroup { list-style-type: none; margin: 0; padding; 0; } nav.facets ul.facetGroup li { line-height: 1.3em; padding-bottom: .5em; } @media (max-width: 749px) { /* display faceted navigation as a menu at smaller widths */ nav.facets { position: absolute; top: 0; left: 0; } nav.facets .toggled { background-color: #fff; position: absolute; top: calc(2em + 1px); left: 0; border: 1px solid #ddd; padding: .3em .7em; } } @media (min-width: 750px) { /* display faceted navigation normally at larger widths */ nav.facets input.menuToggle ~ .toggled { display: block; } nav.facets input.menuToggle ~ label { display: none; } nav.facets .menuBackdrop { display: none; } nav.sortBy { margin-right: 15px; } } nav#contents { margin: 2em auto; width: 40%; min-width: 250px; padding: .5em; text-align: center; background-color: #def; border-radius: 1em; } nav#contents ul { margin: 1em auto; list-style: none; } nav#contents ul li { margin: 1.4em 0; line-height: 1.4em; } nav#contents a { text-decoration: none; } nav#contents a:hover { text-decoration: underline; } div.productSummary { max-width: 45em; margin: 3em auto; padding: 1.5em; border: 1px solid #ccc; border-radius: 1.5em; text-align: center; } div.productSummary h3 { font-size: 2em; margin-top: 0.2em; margin-bottom: 0.3em; } div.productSummary div.productSummaryImage img { width: 100%; min-height: 20em; max-height: 50vh; object-fit: contain; margin: 1em auto; } div.productSummary div.productSummaryPrice { padding: 1em 3em; text-align: center; } div.productSummary div.productSummaryText { text-align: left; } div.productSummary div.productSummaryText .byline { font-style: italic; text-align: center; } div.productSummary div.productSummaryText .byline img.avatar { width: 40px; height: 40px; margin: 0 10px .5em 0; border: 0; border-radius: 9px; vertical-align: middle; } div.productSummary div.productSummaryText .byline img.rating { width: 65px; height: 12px; border: 0; margin-left: 10px; } div.productSummary a.obviousButton { display: block; margin: 0.5em auto; max-width: 20em; background-color: #393; color: #fff; border: none; font-size: .9em; text-align: center; line-height: 1em; padding: 0.75em; } div.productSummary a.obviousButton .wtbRetailerProductVariant { font-weight: lighter; font-size: .8em; } div.productSummary div.productSummaryTwoColumn { display: flex; flex-wrap: wrap; justify-content: center; text-align: left; } div.productSummary div.productSummaryTwoColumn>div { flex-basis: 50%; flex-grow: 1; min-width: 15em; } div.productSummary h4 { margin: 0 1em 0 .5em; padding-left: 1.2em; border-bottom: 1px solid #ccc; } ul.pros { list-style-type: '✔ '; color: #666; padding-right: 1em; } ul.pros li::marker { color: #393; } ul.cons { list-style-type: '▲ '; /* alternately, use '⚠ ' */ color: #666; padding-right: 1em; } ul.cons li::marker { color: #fc0; } nav.selectedFacets { text-align: center; } nav.selectedFacets a { text-decoration: none; } nav.selectedFacets a:hover { text-decoration: underline; } nav.selectedFacets ul { list-style: none; margin-left: 0; margin-top: -1em; font-size: .8em; } nav.selectedFacets ul li { display: inline-block; margin: 0 .4em; padding: .1em .8em .1em .4em; } nav.selectedFacets ul li.button { background-color: #def; color: #333; border-radius: 1em; } nav.selectedFacets ul li.button button { background: none; border: none; padding: 0; font: inherit; color: #00c; text-decoration: underline; cursor: pointer; } nav.selectedFacets ul li.button a, nav.selectedFacets ul li.button button { display: inline-block; font-weight: normal; font-size: 1.25em; text-decoration: none; line-height: 1em; vertical-align: text-bottom; background-color: #fff; color: #ccc; width: 1em; height: 1em; border-radius: .5em; margin-right: .2em; } nav.selectedFacets ul li.button a:hover, nav.selectedFacets ul li.button button:hover { background-color: #ccc; color: #fff; } nav.selectedFacets ul li.button a::before, nav.selectedFacets ul li.button button::before { content: "\00D7"; } /* styles for navigation between product kin within a product title */ ul.productTitleGenderPicker { display: inline-block; position: relative; top: 50%; transform: translateY(-25%); width: auto; list-style: none; padding: 0; margin: 0; z-index: 10; } ul.productTitleGenderPicker li { display: block; position: relative; list-style: none; padding: 0; margin: 0; } ul.productTitleGenderPicker li:hover { background-color: #eee; } ul.productTitleGenderPicker a, ul.productTitleGenderPicker span { display: block; padding: 2px 8px; margin: 0; color: #666; text-decoration: none; cursor: pointer; } ul.productTitleGenderPicker>li>a { color: #ccc; } ul.productTitleGenderPicker>li:hover>a { color: #666; } ul.productTitleGenderPicker ul { display: none; margin: 0; padding: 0; border: 1px solid #ccc; background-color: #fff; white-space: nowrap; } ul.productTitleGenderPicker:hover ul { display: block; position: absolute; right: 0; } ul.productTitleGenderPicker ul li { margin: 0; padding: 0; } ul.productTitleGenderPicker ul li.selected { background-color: #eee; } ul.productTitleGenderPicker ul li:hover { background-color: #def; } ul.productTitleGenderPicker ul li a { display: block; padding: 2px 5px; } /* navigation within product pages */ ul.productPageNav { display: block; list-style: none; margin: 10px 0 0 0; padding: 0; border-bottom: 1px solid #eee; clear: both; } ul.productPageNav li { display: inline-block; list-style: none; margin: 0; padding: 0 15px 10px 15px; } ul.productPageNav li a { color: #00c; font-size: 1.1em; text-decoration: none; } ul.productPageNav li a:hover { color: #000; } ul.productPageNav li.selected { margin-bottom: -1px; padding-bottom: 6px; border-bottom: 5px solid #00c; } ul.productPageNav li.selected a { color: #000; text-decoration: none; cursor: default; } /* present a list with a pipe-separated appearance: foo | bar | bap */ ul.pipeSeparated { margin: 0; padding: 0; } ul.pipeSeparated li { display: inline; border-left: 1px solid; padding: 0 .25em 0 .5em; margin: 0; } ul.pipeSeparated li:first-child { border-left: none; padding-left: 0; } ul.pipeSeparated li a.selected { font-weight: bold; color: inherit; text-decoration: none; } small.smallUsername { font-weight: normal; color: #999; } a small.smallUsername { color: #999; display: inline-block !important; text-decoration: none !important; } /* "About Trailspace" bar */ #aboutBarContainer { text-align: center; background-color: #fff; border-left: 15px solid #fff; border-right: 15px solid #fff; padding-top: .5em; padding-bottom: .5em; } #aboutBar { background-color: #def; border-radius: 5px; text-align: left; font-size: 1.2em; padding: .6em 1em .6em 2em; border: 1px solid #def; } #aboutBarControls { float: right; } #aboutBarButton { display: inline-block; background-color: #05055b; color: #fff; font-weight: normal; text-decoration: none; border: 1px solid #fff; border-radius: 5px; padding: 3px 1em; } #aboutBar:hover { border: 1px solid #999; } #aboutBar:hover #aboutBarButton { background-color: #05055b; } #aboutBarControls #aboutBarButton { margin: -3px 2em 0 2em; } #aboutBarClose { visibility: hidden; /* hide from non-JavaScript browsers */ cursor: pointer; font-size: .8em; font-weight: bold; color: #999; } #aboutBar ul { list-style: none; margin: 0; padding: 0; } #aboutBar ul li { list-style: none; margin: 0 0 1em 0; padding: 0; float: left; width: 20%; padding-right: 5%; text-align: center; font-size: .8em; } #aboutBar ul li:last-child { font-size: inherit; } /* Big Search Box */ form#bigSearch input { margin-top: .5em; } form#bigSearch input { font-family: inherit; font-weight: inherit; font-size: 1.4em; vertical-align: bottom; } form#bigSearch input[type=text] { border: 1px solid #999; padding: 5px; width: 80%; } form#bigSearch input[type=submit] { padding: 5px; max-width: 15%; font-weight: bold; text-decoration: none; color: #444; background-color: #fc0; border: 1px solid #999; cursor: pointer; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } form#bigSearch input[type=submit]:hover { text-decoration: underline; } form#bigSearch input[type=checkbox] { vertical-align: middle; margin: 0; } form#bigSearch label { font-size: .9em; color: #ccc; } /* a class for non-breaking text (replicating the old tag) */ .nobr { white-space: nowrap; } /* flagging/reporting UI */ .flagLink { display: none; padding-left: 10px; font-size: .9em; color: #66f; cursor: pointer; } .flagLink:hover { text-decoration: underline; } /* "featured reviews" sidebar */ .sidebarbody#featuredReviews { background-color: #fff; border: none; border-radius: 0 0 10px 10px; } #featuredReviews ul { display: block; list-style: none; } #featuredReviews ul li { text-indent: 0; padding: 2em 0 2em 0; min-height: 50px; clear: both; padding-left: 72px; border-bottom: 1px solid #eee; } #featuredReviews ul li:last-child { border-bottom: none; } #featuredReviews ul li .thumb35Container { display: block; width: 50px; height: 50px; float: left; margin: -1em 10px 1em -62px; overflow: hidden; border-radius: 10px; background-color: #fff; } #featuredReviews ul li .thumb35Container img { position: relative; height: 50px; border: 0; } /* brand page */ #brandDescription { text-align: left; margin: 0 auto 3em auto; max-width: 39em; } /* producttype / category page */ #category-intro, #category-list, #category-description { clear: both; text-align: left; margin: 0 auto 3em auto; max-width: 40em; } #category-description { margin-top: 3em; } #category-description h2 { text-align: center; } #category-intro .byline { text-align: center; margin-bottom: 2em; color: #999; font-size: .9em; line-height: 1.5em; } #category-intro .byline a { font-size: 1.1em; } /* navigation within a user account */ #accountNavigation { background-color: #def; border-radius: 0 10px 10px 0; } #accountNavigation ul { list-style: none; margin: 0; padding: 1em 0; border-bottom: 1px solid #ccc; } #accountNavigation ul:last-child { border-bottom: none; } #accountNavigation ul li { margin: 1px 0; padding: .5em 1em; text-decoration: none; } #accountNavigation ul li a { display: block; text-decoration: inherit; } #accountNavigation li.selected, #accountNavigation li.selected:hover { background-color: #05055b; color: #fff; font-weight: bold; } #accountNavigation li.selected a { color: inherit; } #accountNavigation li:hover { background-color: #fff; text-decoration: underline; } @media (max-width: 749px) { /* display faceted navigation as a menu at smaller widths */ #accountNavigation { position: relative; z-index: 1; width: 100%; max-width: 18em; background-color: #fff; } #accountNavigation .toggled { background-color: #fff; position: absolute; top: 25px; left: 0; width: 100%; border: 1px solid #ddd; padding: .3em .7em; } } @media (min-width: 750px) { /* display faceted navigation normally at larger widths */ #accountNavigation input.menuToggle ~ .toggled { display: block; } #accountNavigation input.menuToggle ~ label { display: none; } #accountNavigation .menuBackdrop { display: none; } } /* show a placeholder image as the background of a container element, while waiting for the contained image to load */ .withPlaceholderImage { background-color: #fff; background-image: url('/images/no-product-image-2-300x300.png'); background-repeat: no-repeat; background-position: center; } /* scale and center images to the size of their container */ img.scaledToContainer, div.plPThumb img { /* force horizontal and vertical centering */ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; /* scale to fit container */ display: block; height: auto; max-height: 100%; max-width: 100%; border: 0px; background-color: #fff; } noscript.lazyImage { display: inline; } a.showMore { position: absolute; bottom: 1em; font-weight: bold; background-image: url(/images/double_caret_down.png); background-repeat: no-repeat; background-position: 0 55%; padding-left: 17px; } /* custom styling for Fancybox as used to display product images */ .fancybox-for-product-images .fancybox-navigation .fancybox-button { height: 20%; min-height: 100px; width: 12%; min-width: 70px; top: 40%; } .fancybox-for-product-images.fancybox-show-thumbs .fancybox-inner { right: 0; bottom: 79px; } .fancybox-for-product-images .fancybox-thumbs { width: 100%; top: revert; background: revert; padding: revert; } .fancybox-for-product-images .fancybox-thumbs a { width: 75px; height: 75px; background-color: #fff; } .fancybox-for-product-images .fancybox-thumbs__list a:before { border: 2px solid #ffcc00; } .fancybox-for-product-images .fancybox-image { background-color: #fff; } /* Fancybox for newsletter popup */ .fancybox-newsletter { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); } .fancybox-newsletter.fancybox-is-open .fancybox-bg { opacity: .5; } .fancybox-newsletter .fancybox-slide { padding: 15px; } /* profiler */ #codeigniter_profiler { position: relative; padding-bottom: 250px !important; overflow-x: scroll; } /* styles for related content */ .relatedContentContainer { display: flex; flex-flow: row wrap; justify-content: space-between; box-sizing: border-box; } .relatedContentItem { display: block; position: relative; flex-basis: 48%; background-color: #fff; padding: 10px; border: 1px solid #ddd; margin: 10px 0; border-radius: 10px; text-align: center; box-sizing: border-box; } a.relatedContentItem, a.relatedContentItem:visited { color: inherit; text-decoration: none; } .relatedContentItem h3 { color: #05055b; } .relatedContentItem:hover h3 { text-decoration: underline; } .relatedContentItem:hover::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.05); content: ''; } .relatedContentItem img { width: 100%; height: 150px; object-fit: contain; background-color: #fff; border: none; box-sizing: border-box; } .relatedContentItem img.cover { object-fit: cover; height: 161px; width: calc(100% + 22px); margin: -11px -11px 0 -11px; padding: 0; border-radius: 10px 10px 0 0; } @media (max-width:419px) { .relatedContentItem { flex-basis: 100%; } } /* ========================================================================================== general breakpoints for responsive design ========================================================================================== */ /* hide some stuff at small sizes */ @media (min-width: 0px) { body.debug header, body.debug #adSiteSkin::after { background-color: red; } /* no leaderboards */ #headerLeaderboard { height: 0; margin-bottom: -20px; } } /* breakpoint for small tablets */ @media (min-width: 420px) { body.debug header, body.debug #adSiteSkin::after { background-color: purple; } /* header layout adjustments */ #currentUserName { display: initial; } #communityLinks { display: initial; } /* write-a-review promotion widget */ .reviewPromo { position: absolute; width: auto; top: 75px; right: 110px; } .reviewPromoContent { width: 321px; } .reviewPromoContent .reviewPromoArrow { width: 200px; } } /* breakpoint for iPad in portrait orientation */ @media (min-width: 750px) { body.debug header, body.debug #adSiteSkin::after { background-color: orange; } /* show leaderboards */ #headerLeaderboard { height: 135px; } /* footer advertisement is relatively positioned to show a 728x90 unit on larger screens */ #footerAd { position: relative; height: auto; background-color: #fff; } #footerAd>div>* { background-color: transparent; } /* header layout adjustments */ #logo { display: block; width: 240px; flex: 0 0 240px; height: 60px; } #logo img { width: 240px; height: 100px; margin: -21px 0 0 -9px; } header .container:first-child { padding: 10px; } #headerPromo { display: block; } #mainNavContainer { overflow-x: visible; overflow-y: visible; height: auto; } #mainNav { overflow-y: visible; height: 35px; } #mainNav li.searchform { float: right; } #mainNav div.dropdown { justify-content: space-evenly; } } /* ========================================================================================== breakpoints for making the navigation bar text larger while still fitting on one line ========================================================================================== */ /* normal, unskinned */ @media (min-width: 900px) { #mainNavContainer { overflow-y: visible; } #mainNav a { padding: 7px 8px; font-size: 1.2em; } #mainNav li.link > a { padding: 7px 15px; } #mainNav li.searchform input[type=text] { display: inline; font-size: 1.1em; } #mainNav li.searchform input[type=image] { border-radius: 0 5px 5px 0; } #tertiaryNav { display: block; } } /* made narrower when a single-sided skin is visible */ @media (min-width: 957px) and (max-width: 1157px) { body.skinLeft #mainNav a, body.skinRight #mainNav a { padding: 7px 6px; font-size: 1em; } body.skinLeft #searchform input[type=text], body.skinRight #searchform input[type=text] { font-size: 1em; } } /* ========================================================================================== breakpoints for responsive site skin -- showing one side when space permits ========================================================================================== */ /* show flexible site content, with skin's inner 200px "safe area" on one side */ @media (min-width: 957px) and (max-width: 1199px) { body.debug header, body.debug #adSiteSkin::after { background-color: yellow; } /* use body.skinLeft to show left side of skin only */ body.skinLeft .container, body.skinLeft header, body.skinLeft footer, body.skinLeft #headerLeaderboard, body.skinLeft #footerAd { width: auto; max-width: 1000px; margin-left: 200px; margin-right: 0; } body.skinLeft header > .container, body.skinLeft footer > .container { margin-left: auto; } body.skinLeft #adSiteSkin { top: 0; background-color: #ccc; } body.skinLeft #adSiteSkin > :first-child { left: -260px; right: auto; } body.skinLeft #adSiteSkin::after { left: 200px; right: auto; } /* use body.skinRight to show right side of skin only */ body.skinRight .container, body.skinRight header, body.skinRight footer, body.skinRight #headerLeaderboard, body.skinRight #footerAd { width: auto; max-width: 1000px; margin-left: 0; margin-right: 200px; } body.skinRight header > .container, body.skinRight footer > .container { margin-right: auto; } body.skinRight #adSiteSkin { top: 0; background-color: #ccc; } body.skinRight #adSiteSkin > :first-child { left: auto; right: -260px; } body.skinRight #adSiteSkin::after { left: auto; right: 200px; } } /* show fixed max-width content, with flexible skin on one side */ @media (min-width: 1200px) and (max-width: 1399px) { body.debug header, body.debug #adSiteSkin::after { background-color: green; } /* use body.skinLeft to show left side of skin only */ body.skinLeft .container, body.skinLeft header, body.skinLeft footer, body.skinLeft #headerLeaderboard, body.skinLeft #footerAd { width: 1000px; margin-left: auto; margin-right: 0; } body.skinLeft #adSiteSkin { top: 0; background-color: #ccc; } body.skinLeft #adSiteSkin > :first-child { left: auto; right: -460px; } body.skinLeft #adSiteSkin::after { right: 0; margin-right: 0; } /* use body.skinRight to show right side of skin only */ body.skinRight .container, body.skinRight header, body.skinRight footer, body.skinRight #headerLeaderboard, body.skinRight #footerAd { width: 1000px; margin-left: 0; margin-right: auto; } body.skinRight #adSiteSkin { top: 0; background-color: #ccc; } body.skinRight #adSiteSkin > :first-child { left: -460px; right: auto; } body.skinRight #adSiteSkin::after { left: 0; margin-left: 0; } } /* ========================================================================================== styles for printing ========================================================================================== */ @media print { body { margin: 0; padding: 0; width: 100%; } #container { margin: 0; padding: 0; border: 0; width: 100%; } #adSiteSkin { display: none; } }