@charset "UTF-8"; /* colors: Organge: #F90; rgb(255,153,0); Blue: #1EE3FC; rgb(30,227,252); Green: #9EDB37; rgb(158,219,55); Gray: #D4D4D4; rgb(212,212,212); */ /* ====== Base Styles ======== */ p { max-width: 850px; } h3 { margin-top: 0px; } h4 { color: #666666; line-height: 1em; font-weight: 700; text-transform: uppercase; letter-spacing: 1.75px; } h6 { font-weight: 700; } ul { margin: 0px 0px 12px 0px; padding-left: 10px; list-style: disc; } ol { margin: 0px 0px 12px 0px; padding-left: 10px; list-style: decimal; } li { margin: 0px 0px 5px 15px; } #wrapper { max-width: 1200px; margin: 0 auto;padding: 0 15px; } #main { overflow: hidden; margin-bottom: 20px; } #gatewayFocus, #articleStart { float: left; width: 100%; margin-right: -1px; } #inPageAds { } /* Featured sponsored content */ #featuredSC { border: 1px solid #ccc; padding: 5px 10px; margin: 10px 0; } #featuredSC .coName { font-size: .9em; color: #777; } #featuredSC h4 { margin: 5px 0 0; } #featuredSC h5 { overflow: hidden; vertical-align: top; margin-top: 15px; } #featuredSC h5 img { max-width: 75px; height: auto; float: left; margin: 0px 5px 5px 0; vertical-align: top; } /*Search Results*/ #cse { overflow: hidden; } div#subjectField { display: none; } /* ====== Ad Styles ======== */ #inPageAds { overflow: hidden; float: right; margin-left: 1px; position: relative; box-sizing: content-box; background-color: #fff; z-index: 50; } #inPageAds div.ad { padding-bottom: 1em; background-color: #fff;} div.ad { } div.ad img { width: auto; max-width: 100%; min-width:100px; height: auto; border: 1px solid #ccc; } div.ad.retro { text-align: center; } #inPageAds div.ad:before { content: "advertisement"; text-transform: uppercase; text-align: center; font-size: .5em; line-height: 1em; display: block; margin-bottom: 5px; letter-spacing: 1px; } #bannerAd { margin-top: 10px; margin-bottom: 10px; width: auto; height: auto; padding: 1px; background-color: #fff; text-align: center; box-sizing: content-box; } #bannerAd .adBackground { margin: -1px; width: 100%; min-width: 300px; max-width: 100%;box-sizing: content-box; border: 1px solid #ccc; display: inline-block; overflow: hidden; padding:0; } #bannerAd .adBackground a img { width: auto; max-width:100%; min-width: 300px; height: auto; max-height: 90px;box-sizing: content-box; } /* ====== Welcome Ad Interstitial ======== */ #welcomeAd .stage, #welcomeAd .stageCloser, #welcomeAd .stage > div { display: block; } #waStage.stage { background-color: transparent; border: 0px none; box-shadow: none; text-align: center; height: auto; bottom: 5%; } #waStage.stage:before { content: "close"; height: 25px; margin: -25px auto 0; width: 100%; max-width: 550px; display: block; text-align: right; line-height: 20px; font-size: 15px; font-weight: bold; color: #fff; cursor: pointer; } #waStage > div { margin: 0px auto; max-width: 100%; } #waCloser.stageCloser { background-color: rgba(0, 0, 0, 0.8); } #welcomeAd.closed { height:1px; overflow: hidden; margin-top:-1px; } #waStage.stage > div img {max-width:100%;max-height:100%;height:auto;width:auto;} /* ====== Header Styles ======== */ header { margin: 0 auto; max-width: 1200px; } #logo p.tagline { display: none; } /*#logo a:after { content: ""; font-size: 11px; line-height: 17px; margin: 5px 0px 0; text-align: center; display: block; color: #000; text-decoration: none; font-family: "acumin-pro-semi-condensed","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 400; border-top: 1px solid #999; background: 50% 0 url("../images/gci/logos/2019-tagline-500x50.png") no-repeat; background-size:contain; min-height:18px; } #logo a:hover { text-decoration: none; } #logo a:hover:after { content: "Homepage"; text-decoration: none; background: none; }*/ /*#productNav { overflow: hidden; } #productNav li.iconFB a:link { color: #3B5998; } #productNav li.iconFB a:visited { color: #3B5998; } #productNav li.iconTwit a:link { color: #4099FF; } #productNav li.iconTwit a:visited { color: #4099FF; } #productNav li.iconPin a:link { color: #C92228; } #productNav li.iconPin a:visited { color: #C92228; } #productNav li.iconYT a:link { color: #cd201f; } #productNav li.iconYT a:visited { color: #cd201f; }*/ #siteSearch .icon-search { font-size: 22px; line-height: 22px; } #siteSearch .icon-search:before { line-height: 22px; } #account button { display: none; margin: 0; } #account #regWrapper { display: none; text-align: center; margin: 5px auto; } #login { display: none; margin-bottom: 15px; margin-top: -25px; padding: 10px 15px 25px; /*border-top: 1px solid #eee;*/ border-bottom: 1px solid #eee; text-align: center; transition: opacity .5s; opacity: 0; box-shadow: 0 7px 3px -3px rgba(50, 50, 50, 0.75); } #login:before { content: "or"; display: block; text-align: center; margin-bottom: 5px; position: relative; top: -10px; width: 50%; margin: 0 auto; } header.account #login { opacity: 1; } #login h4 { margin-top: 0; display: none; } #login .form-group { display: none; } body.signedIn #login { display: none !important; } #account ul { padding-left: 0px; margin: 5px 5px 5px 0px; } #account ul li { display: inline-block; margin: 0 0px 0 0; padding: 0px 0px; } /*#account ul li:first-child { margin-left: -25px; padding-left: 25px; background: url("../images/icons/profile.png") no-repeat 0 5% }*/ #account li.hello strong { /*margin-right: .8em;*/ } #account .accountLink { margin-left: .8em; } #account ul li.signoutLink { display: block; margin-top: 5px; } #account.newMobile.signedOut p a.userSubscribe:after { content: " Now"; } #socialMedia { left: 0; bottom: 58px; position: absolute; width: 33%; } #socialMedia .social { font-size: 28px; } #socialMedia h4 { font-size: 12px; line-height: 12px; margin: 0 0 7px; } #socialMedia .social ul { padding: 0px; margin: 0; } #socialMedia .social li { display: inline-block; margin: 0 0 0 10px; } #socialMedia .social li a { margin: 0px; padding: 0px;color: #ffffff; display: block; line-height: 20px; } #socialMedia .social li a img { height: 36px; width: auto; } #headerMag {display: none;} /* ====== Breadcrumb Styles ======== */ #breadcrumb { display: none; color: #bbb; font-weight: normal; } /* Pages that should never show the breadcrumb */ body#clid289490121 #breadcrumb, /*about us */ body#home #breadcrumb, body#magazine #breadcrumb, body.issueTOC #breadcrumb, body.pastIssueList #breadcrumb, body#education-continuingeducation #breadcrumb, body#Networking-CalendarofEvents #breadcrumb, body[id^='treatments-'].listPage #breadcrumb, body.genericContent #breadcrumb {display: none;} /* ====== Navigation Styles ======== */ nav li.parent a.mmExpand { display: none; } nav { font-family: "acumin-pro-semi-condensed","Helvetica Neue","Helvetica",Arial,sans-serif; } /* Adding Event Logos - DPP-2849 */ #primaryNav li.beautyAccelerateNav > span a:first-child { height: 34px; min-width: 125px;text-indent: -9999px; position: relative;} #primaryNav li.beautyAccelerateNav > span a:first-child::after { content: ""; display: block; position: absolute; top: 3px; bottom: 3px; right: 5px; left: 5px; background: url("../images/shared/logos/ba-nav-logo-108x40.png") no-repeat 50% 50%; background-size: contain; opacity: 1;} #primaryNav li.beautyAccelerateNav > span a:first-child:hover::after { opacity: .75; } /* ====== Footer Styles ======== */ footer { background: #F5F5F5; overflow: hidden; clear: both; border-top: 1px solid #000; padding: 1em 1em 0.25em; text-align: center; } footer .row ul li { margin: 1px 7px 5px; padding: 0; font-size: 14px; line-height: 14px; display: inline-block; } footer .row ul li a { display: block; padding: 1px 5px; } footer .row ul li small a { display: inline; padding: 0; } footer .list-inline { margin: 0 0 26px; } /* ====== Utility Styles ======== */ p.spacer { line-height: 15px;} .clearleftfix:before, .clearleftfix:after { content: " "; clear:left; display: table; } div.image img { max-width: 100%; height: auto; display: block; } .contentWrapper div.image, #story div.image { overflow: hidden; } body.signedIn .signedOut { display: none; } body.signedIn .signedIn { display: block; } body.signedOut .signedIn { display: none; } ol.references { font-size: 14px; } ul.generalReferences { font-size: 14px; list-style-type: none; text-indent: -20px; } #subjectField { height: 1px; overflow: hidden; margin-bottom: -1px; } div.image.wide { max-width: 100%; margin: .3em auto; height: auto; } div.image.thirdRight { max-width: 30%; margin: 0 0 1em 1em; height: auto; float: right; } div.image.thirdLeft { max-width: 30%; margin: 0 1em 1em 0; height: auto; float: left; } div.image.thirdRight + p { border-top: 1px solid transparent; } div.image.thirdRight + p:before { content: ""; display: block; overflow: hidden; width: 110px; } div.image.thirdLeft + p { border-top: 1px solid transparent; } div.image.thirdLeft + p:before { content: ""; display: block; overflow: hidden; width: 110px; } .introText, h1.introText, h2.introText, h3.introText, h4.introText, h5.introText, h6.introText, p.introText { font-family: "acumin-pro-semi-condensed","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 400; font-size: 23px; line-height: 1.25em; margin-top: 0; margin-bottom: .5em; } /* Bootstrap Overrides */ .label.label-light { color: #999; background-color: #eee; border: 1px solid #ccc; margin-right: 15px; } /*h3 { font-weight: 500; }*/ #storyWrapper h5, #storyWrapper h6, #articleStart h5, #articleStart h6 { font-family: "bodoni-urw","acumin-pro-semi-condensed","Helvetica Neue","Helvetica",Arial,sans-serif; font-weight: 300;} /*.badge { background-color: #fff; border: 2px solid #ff9900; color: #ff9900; border-radius: 15px; } Update this span.badge.exclusive {color: #000;}*/ .input-group-btn:first-child > .btn, .input-group-btn:first-child > .btn-group { margin-right: -2px; } .form-control:focus { border-color: #78dcfa; } .btn { line-height: 1.38; } /*.btn-info { background-color: #03cbe4; } Update this */ /*.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info { background-color: #1ee3fe; } Update this */ h4.weak, h4 .weak { font-weight: 200; } @media (max-width: 475px) { .flex-v-xs { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; } } @media (min-width: 476px) and (max-width: 767px) { .flex-v-sm { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; } } @media (min-width: 768px) and (max-width: 999px) { .flex-v-md { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; } } @media (min-width: 1000px) { .flex-v-lg { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; } } /* Old Content Overrides */ #story font[size] { font-size: inherit; } #story font[face] { font-family: inherit; } /* Buttons */ /* Update this */ .siButton, .siButtonOrange, .siButtonBlue { background-color: #9AD636; border: 2px outset #9AD636; color: #000; font-family: "futura-pt",​Futura,​"Trebuchet"; padding: 6px 12px; line-height: 1.38; border-radius: 4px; cursor: pointer; font-size: 1em; font-weight: normal; margin-bottom: 20px; text-align: center; vertical-align: middle; white-space: nowrap; } .siButtonOrange { background-color: #F90; border-color: #F90; color: #fff; } .siButtonBlue { background-color: #03b4cb; border-color: #03b4cb; color: #fff; } /* Parallax and Billboard image styles */ .parallax { overflow: hidden; position: relative; z-index: 100; } .parallax:after { content: " "; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .parallax img { max-width: 100%; margin: -10% 0; position: relative; } #skyscraper { margin: 00px 0px 10px; overflow: hidden; background-color: #000; } #skyscraper .parallax { max-height: 400px;} #billboard .parallax:after, #skyscraper .parallax:after { box-shadow: inset 0 0 10px rgba(0,0,0,.8); } .parallax + p.caption {position:relative; z-index: 102; margin-bottom: 0px;} p.caption { padding: .5em 1em .75em; color: #666; font-family: "acumin-pro-semi-condensed","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 300;} #billboard { margin: 10px 0; overflow: hidden; } #billboard img { margin: -25% 0; } /* Pullquotes */ .pullquote { font-family: "bodoni-urw","acumin-pro-semi-condensed","Helvetica Neue","Helvetica",Arial,sans-serif; font-size: 24px; line-height: 1.4; margin:20px 10px; padding: 10px; border-top: 1px dashed #666; border-bottom: 1px dashed #666; text-align: center; overflow: hidden;max-width: 750px; } .pullquote span.source { display: block; text-align: right; color: #666666; } /* Insights Field */ #story div.insights { margin: 10px; overflow: hidden; border: 1px solid #EA6F00; background-color: #eee; padding: 10px; box-shadow: 0 0 5px rgba(234,111,0,.5); background: #eee linear-gradient(to bottom,#F5F5F5 0%,#FFF 18px,#EEE 100%); } #story div.insights h3 { font-family: "acumin-pro-semi-condensed","Helvetica Neue",Helvetica,Arial,sans-serif; border-bottom: 1px solid #EA6F00; margin-bottom: 5px; padding-bottom: 3px; } #story div.insights p { margin-bottom: 0; } /* YouTube Responsive Video Wrapper - moved to utility.css */ /*.ytVideoWrapper { overflow:hidden; display: block; margin: 15px 0; } .ytVideo {height: 0; overflow: hidden; padding-bottom: 56.25%; padding-top: 30px; position: relative;} .ytVideo iframe { height: 100%; left: 0; top: 0; width: 100%; position:absolute; }*/ /* Form and Validation styles */ #story div[id^="wufoo-"], #story div.wufooWrapper { max-width: 500px; overflow: hidden; } form.validate sup.req { margin-left: 2px; color: #900; font-weight: bold; font-size: 13px; position: static; line-height: 1px; vertical-align: super; } input.form-control.error, textarea.form-control.error, select.form-control.error { border-color: #900; } /*ISG*/ input.form-control.error:focus { box-shadow: 0 1px 1px rgba(153, 0, 0, 0.075) inset, 0 0 8px rgba(153, 0, 0, 0.3);} .form-group label.error { margin-top: 2px; font-weight: bold; color: #900; font-size: 10.5px; } /* Tabbed Panels (used in virtual events) */ .tabbed-panels .tab-pane.panel {border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0px none; } .tabbed-panels .tab-pane.panel .panel-heading {border-top-left-radius: 0; border-top-right-radius: 0; } .tabbed-panels .tab-pane.panel .panel-heading .text-muted { font-weight: normal; } .tabbed-panels .nav-tabs > li > a { border-color: #ddd; border-bottom-color: transparent; } .tabbed-panels-info .nav-tabs > li.active > a, .tabbed-panels-info .nav-tabs > li.active > a:hover, .tabbed-panels-info .nav-tabs > li.active > a:focus { background-color: #d9edf7; border-color: #bce8f1; border-bottom-color: transparent; outline: 0 none;} .tabbed-panels-info > .nav-tabs {border-color: #bce8f1;} /* ====== Debugger ======== */ #debugger { position: fixed; bottom: 7px; right: 0; left:0; padding: 3px 3%; text-align: center; background-color: rgba(30,227,252,.95); z-index: 1000; } #debugger { background-color: transparent !important; padding: 0; } body.detail #debugger { display: block !important; } #debugger h4 { color: rgba(0,0,0,.01); margin: 0 auto; display: inline-block; padding: 5px 10px;background-color: rgba(255,255,255,.7) !important; border-radius: 10px; box-shadow: 0 0 5px rgba(0,0,0,.4); } #debugger h4 span[class^='visible'] { display: block; color: #666; margin-top: -1em; } #debugger #sizeMarker, #debugger h4 span#clearCookieBtn { display: block; color: #666;} #debugger #debugMsg { display: none !important; } /* ====== Site Tour ======== */ #tour { display: none; position: relative; z-index:995; } #tourShadow { height:300%; width: 300%; position: fixed; left: -100%; top: -100%; z-index: 996; background-color: rgba(0,0,0,.8); } #tourBack { width: 15%; position: fixed; left: 0; top: 10%; bottom: 15%; z-index: 997; cursor: pointer; /*background-color: rgba(160,60,60,.3);*/ } #tourNext { width: 15%; position: fixed; right: 0; top: 10%; bottom: 15%; z-index: 998; cursor: pointer; /*background-color: rgba(160,60,60,.3);*/ } .tourNav {text-align: center; font-size: 50px; line-height: 50px; color: #78dcfa; font-weight:bold; position: absolute; display: block; width: 100%; top: 40%; } #tourSkip { position: fixed; right: 15%; left: 15%; top: 87%; bottom: 2%; z-index: 999; cursor: pointer; /*background-color: rgba(60,160,60,.3);*/ } #tourSkip h3 { width: 90%; margin: 10px 5%; text-align: center; color: #ddd; position: absolute; top: 10%; } #tourStage { border: 2px solid #78dcfa; position: fixed; right: 15%; left: 15%; top: 10%; bottom: 15%; z-index: 1000; background-color: #fff; border-radius: 10px; overflow: auto; overflow-x: hidden; box-shadow: 0 0 20px rgba(30,227,252,.7);} #tourWrapper { max-width: 890px; margin: 0 auto; padding: 20px; overflow: hidden; } .tourSlide { display: none; } .tourSlide.cur { display: block; } .tourSlide h1 { margin: 0 0 20px; text-align: center; } .tourSlide p { } .tourSlide ul { } .tourSlide .image {text-align: center; } .tourSlide .image img { margin: 0 auto; max-height: 475px; } #tourSlide3 .image img, #tourSlide4 .image img { padding: 5px; border: 2px solid #aaa; } .tourExitButtons { font-size: 22px; margin-top: 20px; text-align: center; } .tourExitButtons a, .tourExitButtons button { font-size: 22px; } .tourExitButtons span { margin: 0 35px; } #tourSlide1:before { content: ""; position: absolute; top: 10px; bottom: 10px; left: 0px; right: 0px; z-index: 1; background: url("../images/si/misc/magnolia-bg4.jpg") no-repeat bottom right #fff; background-size: contain;} #tourSlide1 > * { position: relative; z-index: 2; } #tourSlide1 p, #tourSlide1 > ul, #tourSlide1 h2 { text-shadow: 0 0 4px #fff; } #tourSlide1 .tourExitButtons { text-align: left; margin-bottom: 20px; margin-top: 35px; } body.signedIn #tourSlide1 li.signedIn { display: list-item; } #tourSlide1 .signedOut p { text-shadow: 0 0 5px #fff; } body.signedIn #tourSlide1 > div.signedIn h2 a { background-color: rgba(255,255,255,.5); box-shadow: 0px 0px 10px rgba(255,255,255,.9); } #tourSlide5:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; background: url("../images/si/misc/apple_blossoms-bg2.jpg") no-repeat bottom right #fff; background-size: contain;} #tourSlide5 > * { position: relative; z-index: 2; } .tourSlide .signedIn { display: none; } #tour .icon-angle-left, #tour .icon-angle-right { margin: 0 -.3em; } /* =============== Start - Added by ISG for SI Lead request form ============= */ .spacer { clear: both; line_height: 0; font: 0; margin: 0; padding: 0;} .addrs_blk{} .addrs_blk input{ margin: 0 0 10px;} .addrs_blk input:last-child{ margin: 0;} .cntry_cdblk{ margin: 0 10px 10px 0; width: 90px;} .area_cdbklk{ float: left; margin: 0 10px 10px 0; width: 66px;} .ph_noblk{ float: left; margin: 0 10px 10px 0; width: 105px;} .extn_cdblk{ float: left; margin: 0 10px 10px 0; width: 62px;} .txt_indcblk{ font-size: 11px; color: #8d8d8d;} /* ================ End - Added by ISG for SI Lead request form ================= */ /* ====== Content Grid (homepage and prod. gateway) ======== */ #contentGrid { overflow: hidden; margin-bottom: 20px; } /* Large Main Image in Grid */ #mainGridItem { overflow: hidden; position: relative; /*box-sizing: content-box; */padding: 0;} #mainGridItem a:hover:after { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; box-shadow: 0 0 7px rgba(30, 227, 252, 0.5) inset; } #mainGridItem .copy { position: absolute; width: 94%; padding: .2em 4%; margin: 0 -1%; background-color: rgba(250,250,250,.8); box-shadow: 0 0 .7em rgba(0, 0, 0, 0.3); color: #000; box-sizing: content-box; /*word-wrap:break-word; */} /* alternates: padding-top: 1em; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.3) .7em, rgba(250,250,250,.8) .75em);*/ #mainGridItem a:hover .copy { color: #78dcfa; } #mainGridItem .bottom { bottom: 0; padding-bottom: 1em; text-align: center; } #mainGridItem .top { top: 0; text-align: center; } #mainGridItem .left { top: 0; bottom: 0; left: 0; width: 35%; text-align: left; } #mainGridItem .right { top: 0; bottom: 0; right: 0; width: 35%; text-align: right; } #mainGridItem .topLeft { top: 0; left: 0; width: 42%; text-align: left; } #mainGridItem .topRight { top: 0; right: 0; width: 42%; text-align: right; } #mainGridItem .bottomLeft { bottom: 0; left: 0; width: 42%; padding-bottom: 1em; text-align: left; } #mainGridItem .bottomRight { bottom: 0; right: 0; width: 42%; padding-bottom: 1em; text-align: right; } #mainGridItem .reverse { background-color: rgba(5,5,5,.7); } #mainGridItem .reverse * { color: #fff; } #mainGridItem a:hover .reverse * { color: #78dcfa; } #mainGridItem .plain { background-color: transparent; box-shadow: none; text-shadow: 1px 1px 1px rgba(255,255,255,.95); /*word-wrap: normal;*/ } #mainGridItem .plain.reverse { text-shadow: 1px 1px 1px rgba(0,0,0,.95); } #mainGridItem .plain.right, #edcar .plain.left { width: 42%; } #mainGridItem .copy h2 { margin: .4em 0;} #mainGridItem .copy p { margin: .4em 0;} #mainGridItem img { width: auto; max-width:100%; height: auto; } /* Embedded YouTube video for mainGridItem */ #mainGridItem.video {} #mainGridItem.video > a { display: block; overflow: hidden; /*background-color: #000;*/ margin: 0; padding: 10px 10px 5px; text-align: center; } #mainGridItem.video > a h2 { margin: 0; font-size: 25px; background-color: transparent;} #mainGridItem.video > a p { margin: 10px 0 0; } #mainGridItem.video > a + .ytVideoWrapper { margin-top: 5px; } #mainGridItem.video h2 { margin-bottom: 0; margin-top: 0px; font-family: "Trebuchet MS","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 16px; line-height: 1.42857; text-align: center; background-color: rgba(255, 153, 0, 0.8); } #mainGridItem.video p { color: #000; } /* Grid Structure */ #contentGrid .row1, #contentGrid .row2 { float: left; padding: 3px; /*padding only needed if drop shadow is used on .gridItem*/ } #contentGrid .gridItem { margin:0; position: relative; } #contentGrid .gridItem a { display: block; overflow: hidden; } #contentGrid .gridItem h3 { margin: 0; color: #333; font-size: 18px; font-weight: normal; line-height: 1.25em; /*background-color: rgba(255,255,255,.85); */overflow: hidden; background: -moz-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,1) 40%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.8)), color-stop(40%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,0.8) 0%,rgba(255,255,255,1) 40%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,0.8) 0%,rgba(255,255,255,1) 40%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,0.8) 0%,rgba(255,255,255,1) 40%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,0.8) 0%,rgba(255,255,255,1) 40%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ } #contentGrid .gridItem .image { overflow: hidden; position: relative; } #contentGrid .gridItem:hover .image img { transition: transform 0.3s ease 0s; } #contentGrid .gridItem:hover .image img { transform: scale(1.05); } #contentGrid .gridItem.branded .image:before { content: "SPONSORED"; position: absolute; left: 0; right: 0; top: 0; text-align: center; z-index:3; color: #000; background-color: #f90; background-color: rgba(255, 153, 0, 0.8); } /* ====== Page Specific Styles ============================================================= */ /* ====== Homepage ======== */ #homeNews {margin-top: 30px; padding: 10px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; height: auto; overflow:hidden;} #homeNews h4 { margin: 5px 0 0;} #homeNews h3 { margin: 5px 0px 0px 0px; } #homeNews h5 {margin-top: 5px; font-size: .6em; color: #999; display: inline-block;} #homeContentGroup { margin-right: 1px; /*overflow: hidden;*/} #homeArticles { width: 49%; margin-right: 3%; padding-right: 2%; float: left; border-right: 1px solid #ddd; /*background-color: #eec;*/ } #homeProds {width: 48%; float: left; /*background-color: #cdc; */} #homeContentGroup .contentListItem { padding: 0 5px 5px; margin-bottom: 10px; } #homeContentGroup .headline { overflow: visible; } #homeContentGroup .contentListItem h3 { margin: 0 0 5px; } #homeContentGroup .contentListItem h5 { margin: 5px 0 5px; font-size: .8em; color: #999; } #homeContentGroup .contentListItem .image { max-width: 150px; max-height: 150px; width: 33%; float: left; margin: 0 10px 5px 0; overflow: hidden; } .homeContentMod {margin-top: 10px; padding: 10px 0; border-top: 1px solid #ddd; clear: left; /*overflow: hidden;*/} .homeContentMod .image { float: left; margin: 0 15px 5px 0; max-width: 40%; } .contentModText > *:nth-child(n+2), .homeContentMod ul { overflow: hidden; } div.image + .contentModText::before { content: ""; display: block; overflow: hidden; width: 110px; } div.image + .contentModText { border-top: 1px solid transparent; } .contentModText p a.siButton { margin-top: 15px; } #contentMod2, #homeContest {margin-top: 10px; padding: 10px 0; border-top: 1px solid #ddd;/* overflow: hidden;*/} #contentMod2 .image, #homeContest .image { float: left; margin: 0 15px 5px 0; max-width: 40%; } .homeContestBtn { background-color: #f90; border-color: #e68a00; padding: 6px 12px; color: #fff; line-height: 1.38; border-radius: 4px; cursor: pointer; font-size: 15px; font-weight: normal; margin-bottom: 0; text-align: center; vertical-align: middle; white-space: nowrap; } #homepageRoundup .itemWrapper h3 + * {margin-top: 10px;} #homepageRoundup .itemWrapper p, #homepageRoundup .itemWrapper ul { font-size: .8em;} /* ====== Gateways + Content Lists ======== */ #gatewayFocus { margin-bottom: 15px; margin-top: 10px; } #gatewayFocus img { margin: -20% 0; } #gatewayWrapper { clear: left; } #gatewayWrapper .recentList { padding-top: 1px; } #gatewayWrapper .popularList { margin-top: 10px; float: right; } #gatewayWrapper #gatewaySuppProf + .popularList { clear:right; } #moreResults { display: none; } #gatewaySuppProf { border: 1px solid #000; float: left; clear: left; width: 200px; margin:0 3% 10px 0; padding: 0 10px 0;} #gatewaySuppProf > h4:first-child { background-color: #000; color: #fff; margin:0 -10px 10px; padding: 5px 10px;} #gatewaySuppProf h4.psCatLabel { font-weight: normal; padding-top: 5px; border-top: 1px solid #eee; margin: 0 0 7px;} #gatewaySuppProf ul { font-size: .9em; list-style: none inside; line-height: 1.1em; margin: 5px 0; padding: 0; } #gatewaySuppProf li { margin: 0 0 1em 0; padding: 0; } #gatewaySuppProf p:last-child { font-size: .8em; background-color: rgba(0, 0, 0,.1); margin:5px -10px 0; padding: 5px 10px; } /* Most Popular */ .popularList, #relProducts { border: 1px solid #ddd; border-right-width: 0px; float: left; clear: left; width: 200px; margin: 0 0 10px 3%; padding: 0 5px 0 10px; } .popularList ol { font-size: .9em; list-style: none inside; line-height: 1.1em; margin: 5px 0; padding: 0; } .popularList ol li { margin: 0 0 1em 0; padding: 0; } .popularList ol li .badge { float: right; margin: 0 0 5px 10px; } .popularList.rank .badge { font-weight: normal; } .popularList.rank li:first-child, .popularList.rank li:first-child .badge { font-weight: bold; } .popularList.rank .badge:before { content: "#"; } body.newsContent #detailPopular ol li:nth-child(n+6), body.regularProduct #detailPopular ol li:nth-child(n+6) { display: none; } /* Recent and Content Lists */ .recentList .itemWrapper { margin: 20px 0; overflow: hidden; } .contentList .itemWrapper { margin: 20px 0 20px -1px; } .itemWrapper .image { width: 120px; text-align: center; max-width: 40%; max-height: 120px; min-width: 100px; overflow: hidden; float: left; margin: 0 10px 7px 0; position: relative; } .itemWrapper .image img { margin: 0 auto; } .itemWrapper.branded .image:before { content: "SPONSORED"; background-color: #FF9900; background-color: rgba(255,153,0,.8); left: 0px; right: 0px; position:absolute; top: 0px; text-align: center; } body#branded .itemWrapper.branded .image:before { content: "BRANDED"; } body#branded .itemWrapper.branded.featuredProduct .image:before { content: "FEATURED"; } .itemWrapper.roundup .image { padding-right: 10px; padding-bottom: 10px; } .itemWrapper.roundup .image:after { content: ""; display: block; width:90%; height: 90%; background-color: #ccc; position: absolute; bottom: 3px; right: 3px; z-index: -1; border: 4px solid #fff; box-shadow: 2px 2px 3px rgba(0,0,0,.3); } .itemWrapper.roundup .image img { border: 4px solid #fff; box-shadow: 2px 2px 3px rgba(0,0,0,.3); } .contentList .itemWrapper.roundup div.image {max-height:240px;} .contentListItem h3, .itemWrapper h3 { margin-bottom: 5px; border-top: 1px solid transparent;/* odd firefox bug */ } .itemWrapper.audio .image a, .itemWrapper.video .image a { position: relative; display: block; font-size: 13px; } .itemWrapper.audio .image a:before { content:"\e883"; font-family: alluredicon; color: #fff; font-size: 3.5em; line-height:3em; display: block; position: absolute; left: 0%; right: 0; top: 50%; margin: -1.5em 0 0; z-index: 11; opacity: .9; } .itemWrapper.video.audio .image a:before, .itemWrapper.video .image a:before { content:""; width: 0; height: 0; font-size: 1em; line-height:3em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 3em solid #fff; position: absolute; left: 50%; top: 50%; margin: -1.5em 0 0 -1.25em; z-index: 11; opacity: .9; } .itemWrapper.audio .image a:after, .itemWrapper.video .image a:after { content:""; width: 5em; height: 5em; position: absolute; margin: -2.5em 0 0 -2.5em; top: 50%; left: 50%; z-index: 10; background-color: #000; opacity: .4; border-radius: 4em; box-shadow: 0 0 2em #fff; } .itemWrapper.audio .image a:hover:before, .itemWrapper.audio .image a:hover:after .itemWrapper.video .image a:hover:before, .itemWrapper.video .image a:hover:after { opacity: 1; } .recentList .itemWrapper.audio .image a { font-size: 10px; } .recentList .itemWrapper.video .image a { font-size: 10px; } .contentListItem h3:before, .itemWrapper h3:before { content: ""; display: block; overflow: hidden; width: 110px; } /* fix to ensure column is wide enough, if not breaks whole group past image float */ .itemWrapper h5 { margin: 5px 0; font-size: .8em; color: #999; } .itemWrapper .mediaSponsor { margin: 5px 0 10px 0px; padding: 5px 30px 5px 5px; white-space: normal; text-overflow: inherit; display: inline-block; background: linear-gradient(to left,#fff 2px,rgba(255,255,170,1) 45px); color: #666; font-size: .85em; font-weight: normal; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;} .contentList:before, .contentList:after { content: " "; clear:left; display: table; } /*.contentList .itemWrapper:nth-of-type(2n+3) { clear: left; }*/ .contentList + h2 { clear: left; } .moreResults { background-color: #f90; border-color: #e68a00; color: #fff; line-height: 1.38; border-radius: 4px; cursor: pointer; display: inline-block; font-size: 16px; font-weight: normal; margin-bottom: 0; padding: 6px 12px; text-align: center; vertical-align: middle; white-space: nowrap; } #moreResults { margin-top: 20px; } #moreResults.recentList .itemWrapper:first-child { margin-top: 0; } #moreResults.contentList .itemWrapper:nth-child(-n+2) { margin-top: 0; } h3#searchForMore { clear: left; margin: 0 5px 20px; padding: 5px 10px; border: 1px solid #ddd; line-height: 1.4; box-shadow: 0 0 5px #78dcfa; } /* Product Gateway Styles */ body.products.gateway {} /* PAGINATION styles */ div#pagination { margin: 10px 0px; padding: 10px 0px; clear: left; } div#pagination span { padding: 5px 10px; border: 1px solid #fff; margin: 10px 4px; display: inline-block; color: #ccc; font-size: 16px; line-height: 16px; text-decoration: none; background-color: #fff; }/* this is the style for a disabled button, ie previous on page 1 */ div#pagination a span { border: 1px solid #25a4c4; display: block; margin: 0; color: #25a4c4; text-decoration: none; background-color: #fff; }/*this is for the majority of the page #'s */ div#pagination a { text-decoration: none; margin: 10px 4px; display: inline-block; } /*without this it adds an underline below the box which looks really odd*/ div#pagination a:hover span { color: #fff; /*text-decoration: underline;*/ background-color: #25a4c4; } div#pagination span.curr_page { border: 1px solid #000; color: #000; font-weight: bold; background-color: #fff; } /* ====== Multimedia List Page ======= */ body#multimedia #main > .contentList > h2 { margin: 5px 0; } #formatFilters { padding: 10px 0; margin-top: 10px; border-top: 1px solid #ddd;border-bottom: 1px solid #ddd; overflow: hidden; } #formatFilters h4 { margin: 0 0 5px; } #formatFilters ul { display: block; overflow: hidden; margin: 0; padding: 0; } #formatFilters ul li { list-style: none; margin: 0 10px 0 0; padding: 0px; display: inline-block; float:left; } #formatFilters ul li a { display:inline-block; padding: 3px 5px; color:#58a3b6; } #formatFilters ul li.current { font-weight:bold; } #formatFilters ul li.current a { color: #000; } /* ====== Magazine - Gateway ======== */ #magGateway #currentIssueToc, #magGateway #recentIssues { border-top: 1px solid #ddd; margin-top: 30px; } #magGateway h4 { margin-top: 25px; } #magIntro { max-width: 100%; } #magIntro .cvrImage { float: right; max-width: 25%; margin-top: -50px; margin-left: 15px; margin-right: 25px; } #magIntro .siButton { margin-bottom: 0px; } #magIntro #helpLinks { clear: left; } #magIntro #helpLinks p { } #magIntro #helpLinks a { margin: 0 5px 15px; } /*#magGateway #magIntro image { float: right; }*/ /*#magGateway #magIntro .currentIssueCover { width: 40% }*/ #magGateway > .image { margin-bottom: 35px; } #magGateway p.visible-xs { font-size: 30px; color: #666; text-transform: uppercase; } #currentIssueToc { max-width: 100%; clear: left; overflow: hidden; } #currentIssueToc div.image { max-width: 24%; margin-bottom: 20px; float: left; } #currentIssueToc div.coverBlurbs { max-width: 70%; margin-left: 25px; float: left; } .coverBlurbs h5 { margin-bottom: 25px; } #magGateway #recentIssues { max-width: 100%; margin-bottom: 45px; clear: left; overflow: hidden; } #magGateway #recentIssues .issue { margin-bottom: 25px; margin-right: 1.5%; width: 31%; min-width: 250px; } #magGateway #recentIssues .moreIssues { clear: left; } /* ====== Magazine - Past Issues ======== */ #pastIssues .issueYear h2:first-child:before { border-top: 1px solid #ddd; height: 15px; content: " "; display: block; overflow: hidden; } #pastIssues p.jumpMenu { margin-top: 15px; } div.issue { padding-left: 125px; float: left; overflow: hidden; position: relative; } div.issue img { margin-left: -125px; float: left; margin-right: 10px; width: 115px; height: auto; outline: 1px solid rgba(0, 0, 0, 0.2); outline-offset: -1px; } div.issue h2 { margin-top: 0px; font-size: 17px; } div.issue p { font-size: 12.5px; line-height: 14.5px; } div.issue.small3d img, div.issue.large3d img { outline: 0px none; } div.issue p.lookInside { width: 105px; height: 20px; line-height: 20px; font-size: 12.5px; text-align: center; position: absolute; top: 161px; left: 5px; background: #eee radial-gradient(ellipse at 50% 50% , #ffffff 57%, #e5e5e5 100%); /*border-radius: 0 0 30px 30px / 0 0 20px 20px;*/ border-radius: 20px; box-shadow:0 1px 5px rgba(0, 0, 0, 0.6); } div.small3d p.lookInside, div.large3d p.lookInside { top: 153px; } div.issueYear div.issue p:last-of-type a, div.issue p.lookInside a { padding: 0 10px; display: block; } div.issueYear { max-width: 100%; overflow: hidden; padding: 6px 0 15px; } div.issueYear div.issue { width: 30%; margin-right: 1.5%; margin-bottom: 45px; min-height: 187px; } div.issueYear div.issue.small3d, div.issueYear div.issue.large3d { min-height: 182px; } div.issueYear div.issue img { position: relative; z-index: 5; } /* ====== Magazine - TOC ======== */ #toc > h1:first-child { margin: 5px 0 20px; } #toc #issueExtras + h4 { margin-bottom: 0; } #issueExtras { max-width: 28%; margin: -61px 0 20px 25px; float: right; text-align: center;} #issueExtras div.image img { min-width: 100px; } #issueExtras div.image.smallFlat img {outline: 1px solid rgba(0, 0, 0, 0.2); outline-offset: -1px;} #issueExtras .issueNavigation { overflow: hidden; padding: 6px; } #issueExtras .issueNavigation.btn-group { margin: 10px auto; } #issueExtras .issueNavigation p.prevIssue { float: left; } #issueExtras .issueNavigation p.nextIssue { float: right; } #issueExtras p.lookInside { padding: 3px; margin: 10px 5px; border-radius: 20px; font-size: 13px; box-shadow:0 1px 5px rgba(0, 0, 0, 0.6); background:#eee radial-gradient(ellipse at 50% 80% , #ffffff 57%, #e5e5e5 100%) repeat scroll 0 0; } .articleSet { margin-bottom: 35px; } .articleSet h2:after { border-bottom: 1px solid #ddd; content: " "; display: block; overflow: hidden; } .articleSet h3 { margin-bottom: 1px; font-size: 20px; } .articleSet h3 .badge { background-color: #FF9900; color: #000000; margin-left: 15px; } .articleSet h5 { margin-top: 0; margin-bottom: 15px; font-size: 16px; } /* ====== E-newsletter - Gateway ======== */ body#clid260332801 #articleStart h1 { display: none; } /* ====== Calendar of Events ======== */ #cal { margin: 20px 0; } /* #cal styles used on calendar of events and continuing education class list */ #cal .eventListing { padding: 10px 0; border-top: 1px solid #ddd; } #cal .eventListing:first-child { border-top-width: 0px; } #cal .eventListing .label { display: inline-block; min-width: 85px; padding-left: 0; text-align: right; margin-left: -90px; } #cal .eventListing h6+h2 { margin-top: 0; } #cal .eventListing .eventInfo > h2:first-child { margin: 5px 0; } #cal .eventListing .eventContactInfo > br:first-child { display: none; } /* template logic can lead to this paragraph starting with a br, which we dont want */ #cal .eventListing.alluredEvent, #cal .eventListing.featuredEvent { background-color: #e6f8fa; padding: 10px; } #cal .eventListing .eventInfo h3 .badge { background-color: #9ad636; color: #000000; display: inline-block; } #cal .eventListing.featuredEvent h3.eventTitle a { margin-right: 15px; } /* ====== School Region List ======== */ /*p.jumpMenu { display: block; } p.jumpMenuMobile { display: none; }*/ /* ====== Continuing Education ======== */ #ceSidebar { } #ceSidebar h3 { display: none; } #regionSchools { margin-top: 25px; } #regionSchools p a { margin-right: 15px; } #ceEvents { margin-top: 25px; } #ceEvents > h2 { margin-top: 0; } #ceEvents #cal { margin-top: 0px; } #ceEvents #cal .eventListing:first-child { border-top-width: 1px; } /* ====== Add Event/Class Form ======== */ form#addEvent .formWrapper { max-width: 400px; padding: 5px 10px; } form#addEvent #eventStart, form#addEvent #eventEnd { margin: 0 -10px; padding:10px; border-radius: 8px 8px 0 0; } form#addEvent #eventEnd { margin-bottom: 15px; border-radius: 0 0 8px 8px; } form#addEvent .ongoing #eventStart, form#addEvent .ongoing #eventEnd { background-color: #ddd; opacity: .4; } form#addEvent textarea { width: 100% !important; } /* ====== Supplier Resources Gateway/List Pages ======== */ body.supplierGateway .itemWrapper .thumbnail { padding: 10px; margin: 0 auto; max-width: 300px; display: flex; align-items: center;} body.supplierGateway .itemWrapper .thumbnail:before { content: "";padding-bottom: 100%; display: block;} body.supplierGateway .itemWrapper .thumbnail:hover { box-shadow: 0 0 7px rgba(88, 163, 182, 0.5); } body.supplierGateway .itemWrapper .thumbnail .caption { display: none; } body.supplierGateway .itemWrapper.featured:before { content: "FEATURED"; background-color: #000; color:#fff; height: 24px; line-height: 24px; margin: -12px auto; display: block; position: relative; z-index: 20; text-align: center; font-size: 15px; font-weight: bold; border-radius: 3px 3px 0 0;} body.supplierGateway .itemWrapper.featured .thumbnail {border-color: #000;} body.supplierGateway .itemWrapper.featured .thumbnail:hover { box-shadow: 0 0 7px rgba(0, 0, 0, 0.5); } body.supplierGateway #activeSuppliers { margin: 40px 0; border: 2px solid #000; padding: 10px; } body.supplierGateway #activeSuppliers > h2 { margin: -10px -10px 15px; background-color: #000; padding: 5px 10px; font-size: 22px; color: #fff; } body.supplierGateway #activeSuppliers .itemWrapper .thumbnail:hover { box-shadow: 0 0 7px rgba(0, 0, 0, 0.5); border-color: #000; } body.supplierGateway #main > h1:first-of-type, body.supplierGateway #main > h2:first-of-type {font-weight: normal;} /* ====== Supplier Resources Detail Pages ======== */ body.supplierDetail #articleStart .supplierLogo { float: right; max-width: 25%; } body.supplierDetail #articleStart .supplierLogo .image { padding: 10px; margin: 0 auto; max-width: 300px; display: flex; align-items: center;} body.supplierDetail #articleStart .supplierLogo .image:before { content: "";padding-bottom: 100%; display: block;} body.supplierDetail #articleStart .supplierLogo img { max-height: 180px; } body.supplierDetail #shareButtons { float: none; margin: 20px 10px 20px 0; } body.supplierDetail #articleStart .anchorLinks { clear: left; margin: 25px 0 15px 0; } body.supplierDetail #articleStart h5 {font-family: "acumin-pro-semi-condensed","Helvetica Neue",Helvetica,Arial,sans-serif;} body.supplierDetail #story { overflow: hidden; } body.supplierDetail .suppRelated, body.supplierDetail .suppSpecialization { overflow: hidden; border-top: 1px solid #ddd; padding: 10px 0 0; } .suppRelated ul { padding-left: 0; overflow: hidden; } .suppRelated ul li { list-style-type: none; font-style: italic; margin: 0 0 1em 0; font-size: .8em; color: #999; line-height: 1.3em; } .suppRelated ul li a { font-style: normal; font-size: 1.2em; } body.supplierDetail .relatedEvent span.eventTitle ~ span { margin-right: 15px; } body.supplierDetail #slProducts { overflow: hidden; } body.supplierDetail #slProducts .itemWrapper { clear: none; } body.supplierDetail #slProducts .icons { color: #03b4cb; font-size: 20px; vertical-align: sub; cursor: default; } body.supplierDetail #slProducts .icons *[data-toggle="tooltip"]:before{ font-size: 15px; } body.supplierDetail #slProducts .itemWrapper .deck { font-size: 85%; } body.supplierDetail .supplierPromoImg { overflow: hidden; margin: 0 0 10px 15px; float: right; width: 300px; max-width: 25%; } body.supplierDetail .supplierPromoImg > div { margin-top: 5px; } body.supplierDetail #supplierVideoWrapper { overflow: hidden; max-width: 500px; } body.supplierDetail #supplierVideoWrapper > div { margin-top: 5px; } body.supplierDetail #supplierVideoWrapper.embeddedBioVideo { margin: 0 0 10px 15px; float: right; width: 300px; max-width: 50%; } /* ====== Supplier Landing Pages (Lead gen) ======== */ body.supplierLanding {} body.supplierLanding #account { display: none !important; } body.supplierLanding #articleStart { padding-top: 12px; border-top: 1px solid #ccc; } /* ====== Virtual Events ======== */ #vEventTop { margin: 10px 0 25px; } #vEventTop > div {align-items: end;} #vEventTop .btn {color: #d03632;} #vEventInfo .btn { background-color: #d03632; } #vEventInfo .btn:hover, #vEventInfo .btn:focus { background-color: #a00f2b; } #vEventSchedule { margin-top: 20px; } #vEventSchedule .nav-tabs > li {margin-left: 2%; } #vEventSchedule .sessionStatus { margin-right: 10px; font-size: 85%; } #vEventSchedule .sessionTime { font-size: .85em; color: #777; margin: -2px 0 10px; } #vEventSchedule .sessionSponsor { margin-left: 15px; font-weight: normal; } /* ====== Ancillary Pages ======== */ /* FAQ */ body#clid19547599 dd { margin-bottom: 10px; } body#clid19547599 dl { margin-bottom: 40px; } /* Swiftype Search Results */ .st-ui-result.dirResult span.st-ui-type-heading:after { content: "DIRECTORY"; display: inline-block; margin: 0 10px; padding: 3px 7px;background-color: #eee; color:#aaa; font-size: 75%; border-radius: 3px; font-weight:normal; letter-spacing: .5px; } /* Legal Terms */ body#clid18936194 #main { margin-bottom: 30px; } /* Privacy Policy */ body#clid18867064 #main { margin-bottom: 30px; } /* Associations */ body#clid22062929 #story { margin-bottom: 50px; } /* E-newsletter Landing Page */ body#clid289507761 #articleStart { display: none; } #enewsPreview.image { max-width: 200px; float: right; overflow: none; margin-top: 20px; } #enewsMobilePreview.image { max-width: 200px; float: right; overflow: none; margin-top: 50px; } #weeklyNews, #monthlyNews {max-width: 760px; } #eNews .image { margin-bottom: 35px; } #eNews p.visible-xs { font-size: 24px; color: #666; text-transform: uppercase; } /* Resubscribe Landing Page */ body#clid266225291 #articleStart { display: none; } #resub p.visible-xs { font-size: 24px; color: #666; text-transform: uppercase; } #resub .image { margin-bottom: 35px; } #resub div div.image { max-width: 200px; float: right; overflow: none; margin-top: 20px; } #resubMag, #resubEnews {max-width: 760px; } /* Student Landing Page */ body#clid313290761 #articleStart { display: none; } #studentBooksImage.image, #studentEnewsImage.image, #studentFBImage.image, #studentMagImage.image, #studentSocialImage.image { max-width: 200px; float: right; overflow: none; margin-top: 20px; margin-left: 15px; } #studentLanding .image { margin-bottom: 35px; } #studentLanding p.visible-xs { font-size: 24px; color: #666; text-transform: uppercase; } #studentBooks, #studentEnews, #studentFB, #studentMag, #studentSocial { max-width: 760px; overflow: hidden; } #studentBooks, #studentFB, #studentMag, #studentSocial { border-top: 1px solid #ddd; margin-top: 30px; } #studentAnchors a { margin-left: 10px; margin-right: 10px; display: inline-block; line-height: 24px; } /* About Us */ div#aboutUs h2 { margin-top: 45px; border-bottom: 1px solid #ddd; } #aboutUs #auAdvisoryBoard { overflow: hidden; } #aboutUs #auAdvisoryBoard .auAdvisor { margin-bottom: 20px; min-height: 100px; } #aboutUs #auAdvisoryBoard .auAdvisor .image { border: 1px solid #999999;float: left; margin: 0 10px 10px 0; } #aboutUs #auAdvisoryBoard .auAdvisor p { font-size: 12px; margin: 0; padding-right: 15px; } #aboutUs #auAdvisoryBoard .auAdvisor p strong { font-size: 16px; } div#aboutUs #auMemberships { overflow: hidden; } div#aboutUs #auMemberships .row > div { height: 175px; padding: 15px; position: relative; } div#aboutUs #auMemberships .row > div .image { position: absolute; top: 50%; left: 50%; /*margin-right: -50%;*/ transform: translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); } /* Contact Us */ body#clid19548919 p.contactExtras { color: #666; } body#clid19548919 h2 { border-bottom: 1px solid #ddd; margin-top: 45px; } body#clid19548919 #story > h2:first-child { margin-top: 22px; } body#clid19548919 .contactEntry.first +.contactEntry { padding-top: 10px; border-top: .5px solid #f0f0f0; } body#clid19548919 #inPageAds { overflow: visible; } #cuWrapper { border-color: #ccc; border-style: solid; border-width: 1px; margin: 10px; padding: 10px; } #cuReq { margin-top: 0px; } #cuReqForm { display: none; } #cuReq h5.thanks { display: none; background-color: #ff9900; border: 1px solid #ddd; font-weight: 700; padding: 0.5em; margin-top: 10px; } #cuWrapper.jsOn #cuReq h5.thanks { display: block; } #cuReq button#cuReqToggle { background-color: #f90; border: 2px outset #fa3; border-radius: 4px; color: #fff; cursor: pointer; display: none; font-size: 14px; font-weight: normal; margin: 0 auto; text-align: center; vertical-align: middle; width: 100%; padding: 5px; } #cuReqForm textarea { width: 100% !important; } /* Lauder Subscription Form */ body#clid462582113 {} body#clid462582113 #headerBottom nav *, body#clid462582113 #bannerAd, body#clid462582113 .ad, body#clid462582113 #siteSearch, body#clid462582113 #socialMedia, body#clid462582113 #menuToggle, body#clid462582113 #accountToggle, body#clid462582113 #account, body#clid462582113 footer ul {display: none !important;} body#clid462582113 #wufoo-ze4cpk41qzdiip {max-width:800px;} /* ====== Article Detail ======== */ /* articleStart */ #articleStart h1 { margin-top: 5px; } #articleStart h2 { margin-bottom: 0px; margin-top: 10px; font-size: 16px; text-align: center; background-color: rgba(255, 153, 0, 0.8); } /* Sponsored blurb */ #articleStart h5 span { padding-right: 5px; color: #666; } #articleStart h5 span + span { padding-left: 5px; border-left:1px solid; } div#contactAuthor { max-width: 91%; width: 322px; left: -400px;background-color: #fff; position: absolute; z-index: 125; box-shadow: 0 5px 10px 2px #000; } div#contactAuthor .wrapper { padding: .5em; border: 3px solid #ddd; overflow: hidden; position: relative; } div#contactAuthor h5.close { float:right; text-align: right; margin: -2px 0 5px; cursor: pointer; opacity: 1; text-shadow: none; font-size: 15px; font-weight: normal; color: #222; } div#contactAuthor p.caNote { margin: 10px 0; padding: 10px 3px; clear: right; border-top: 1px dotted #ddd; border-bottom: 1px dotted #ddd; color: #666; font-size: 85%; } div#contactAuthor h5.close ~ div { clear: right; } div#contactAuthor.on { left: auto; } #shareButtons { width: 240px; max-width: 45%; margin: 0 0 10px 10px; float: right; } /*#shareButtons > span, #shareButtons .print { width: 24px; height: 24px; margin: 0 5px 10px; display:inline-block; vertical-align: top; } #shareButtons .print img { vertical-align: top;} body.products #shareButtons { max-width: 50%; } #shareButtons .stLarge { background-size: 24px; width: 24px; height: 24px; background-repeat: no-repeat; } #shareButtons .stButton { margin: 0; width: 24px; } #shareButtons .stButton .stLarge:hover { background-position: 0 0; }*/ #articleStart #billboard { clear: right; } #articleStart p.caption { margin-top: 10px; /*margin-bottom: 30px; padding: 0.5em 1em 0.75em; color: #666; background-color: transparent; -shadow: none;*/ } #articleStart #poster { margin: 10px 0; text-align: center; clear: both; } #articleStart #poster div.image img { margin: 0 auto; } #articleStart #productImage { box-sizing: content-box; overflow: hidden; padding: 0; position: relative; text-align:center; } #articleStart #productImage img { margin: 0 auto; max-height: 510px; max-width: 100%; display: block; height: auto; } #mediaSponsorBanner { padding: 10px 0px; border-bottom: 1px solid #ccc; margin: 0 0 15px;} #poster + #mediaSponsorBanner, #billboard + #mediaSponsorBanner { margin-top: -5px;} #mediaSponsorBanner .mediaSponsor { margin: 0px 0px 7px; line-height: 22px; padding: 3px 0px; font-family: "acumin-pro-semi-condensed","Helvetica Neue",Helvetica,Arial,sans-serif; } /*#mediaSponsorBanner .mediaSponsor { display: inline-block; margin: 12px 0 7px; background: linear-gradient(to left,#fff 2px,rgba(255,255,170,1) 35px); }*/ #mediaSponsorBanner .mediaSponsor span.spnsrBy { display: inline-block; font-size: .8em; padding:1px 7px 0; text-transform:uppercase; font-weight: normal;} #mediaSponsorBanner .mediaSponsor strong { display: inline-block; padding: 1px 7px 0;} #mediaSponsorBanner .mediaSponsorLogo { max-width: 275px; margin: 10px 0; } /* Story */ #storyWrapper { clear: left; position: relative; padding-top: 7px; } #story { } #story ol, #story ul { overflow: hidden; padding-left: 15px; } #story .shortText { overflow: hidden; margin: 20px 0; max-width: 610px; } /* Unknown user Disclaimer */ #story > .shortText:first-child { margin-top: 0; } /* Unknown user Disclaimer */ #story .shortText p { margin: 5px; padding: 10px; border: 2px solid #f90; box-shadow: 0 0 5px #f90; } #story .shortText p span { display: block; margin: -5px -10px 5px; padding: 1px 10px 3px; color: #fff; font-weight: bold; background-color: #f90; } /*div.SpcVideoWrapper { float: right; margin-bottom: 0; margin-left: 2%; margin-top: 0; width: 50%; clear: none; padding-right: 0; overflow: hidden; }*/ /*#extrasWrapper { clear: left; }*/ /* Reg Level Logic */ body.signedIn #main.pd #story #gatedTop, body.signedIn #main.pd #story #gatedBottom { display: none !important; } body.signedIn #main.rg #story.rg .shortText { display: none; } #main.op #story.rg #gatedBottom ~ *:not(.mobAdWrapper), #main.op #story.pd #gatedBottom ~ *:not(.mobAdWrapper), #main.rg #story.pd #gatedBottom ~ *:not(.mobAdWrapper) { display: none; } /* hiding h2's & h3's that are right before the #gatedBottom */ #main.op #story.rg > p:nth-of-type(3) + h2, #main.op #story.rg > p:nth-of-type(3) + h3, #main.op #story.pd > p:nth-of-type(3) + h2, #main.op #story.pd > p:nth-of-type(3) + h3, #main.rg #story.pd > p:nth-of-type(3) + h2, #main.rg #story.pd > p:nth-of-type(3) + h3 { display: none; } /* as a backup in case click buries the #gatedBottom inside a sub level element */ #main.op #story.rg p:nth-of-type(n+4), #main.op #story.pd p:nth-of-type(n+4), #main.rg #story.pd p:nth-of-type(n+4) { display: none; } /* Related Products */ #relProducts { box-shadow: 0 0 12px #aaa; } /* inherits most styles from .popularList */ .relProduct + .relProduct { margin-top: 20px; } .relProduct { text-align: center; } .relProduct img { margin: 0 auto; max-height: 200px; transition: none; } .relProduct h5 { text-align: left; } .relProduct h5 .coName { font-size: .9em; color: #777; } #relProducts + #detailPopular, #articleExtras + #detailPopular, #articleExtras + #relProducts { margin-top: 10px; } /* Article Add-ons */ #articleExtras { float: left; clear: left; width: 200px; margin: 0 3% 10px 0; } #articleExtras .addOn { min-height: 35px; overflow: hidden; background-color: #F90; } #articleExtras .addOn + .addOn { margin-top: 3px; } #articleExtras .addOn h5 { padding: 5px 5px; margin: 0 0 5px; text-align: center; cursor: pointer; } #articleExtras .addOn h5.footnote { border-top: 0 none; width: auto; color: inherit; font-size:19px; line-height: 1.15; } /*override the footnote styles*/ #articleExtras .addOn h5 i { margin-left: 7px; font-size: .7em; display: inline-block; transform: rotate(-90deg); transition: transform .3s; -webkit-transform: rotate(-90deg); -webkit-transition: -webkit-transform .3s; } #articleExtras .addOn ul {margin-bottom: -500px;padding-top: 3px; padding-right: 10px; border: 1px solid #f90; overflow: hidden; transition: all .35s linear; background-color: #fff;} #articleExtras .addOn.expand ul { margin-bottom: 0px; } #articleExtras .addOn.expand h5 i { transform: rotate(0deg); -webkit-transform: rotate(0deg); } #articleExtras #authorbio { text-align: center; margin-bottom: 10px; overflow: hidden; } #articleExtras #authorbio.addOn { text-align: left; margin-bottom: 0px; } /* Undoing changes for >1 authorbio */ #articleExtras #authorbio h4 { font-size: 90%; letter-spacing: 1px; margin: 0 0 7px; text-transform: none; } #articleExtras #authorbio div.image { width: 40%; margin: 0 auto 10px; } #articleExtras #authorbio div.image img {margin: 0 auto; max-height: 130px; } #articleExtras #authorbio p { margin: 0; overflow:hidden; text-overflow: ellipsis; } /* Article Add-ons + Article Extras text fix */ #articleExtras + #extrasWrapper + #story > *:first-child, #articleExtras + #extrasWrapper + #story > #gatedTop + *:before, #articleExtras + #extrasWrapper + #story > #gatedTop + p.emptyStart + *:before { border-top: 1px solid transparent; } #articleExtras + #extrasWrapper + #story > *:first-child:before, #articleExtras + #extrasWrapper + #story > #gatedTop + *:before, #articleExtras + #extrasWrapper + #story > #gatedTop + p.emptyStart + *:before { content: ""; display: block; overflow: hidden; width: 110px; } /* Article Add-ons Stage */ .smallStage, .stage { display: none; width: 90%; height: 80%; border: 3px solid #000; position: fixed; top: 5%; left: 5%; z-index: 997; background-color: #fff; -moz-box-shadow: 0px 1em 5em 2em rgba(0,0,0,.9); -webkit-box-shadow: 0px 1em 5em 2em rgba(0,0,0,.9); box-shadow: 0px 1em 5em 2em rgba(0,0,0,.9); } .stageCloser { display: none; width: 300%; height: 300%; margin: 0; padding: 0; position: fixed; left: -100%; top: -100%; z-index:996; background-color: rgba(0,0,0,.5); } .smallStage { width: 50%; height:40%;top: 20%; left:25%; } #msCloseBtn, #cbrStageCloseBtn, #regPromptCloseBtn { position: absolute; color: #fff; font-weight: bold; right: 0; top: -2em; z-index: 998; cursor: pointer; } #msNav { margin: .25em 0 0; max-width: none; } #msNav span { color: #fff; font-weight: bold; cursor: pointer; text-transform: capitalize; width: 50%; line-height: 32px; max-height: 32px; overflow: hidden; } #msNav span#msNavPrev { float: left; } #msNav span#msNavNext { float: right; text-align: right; } .stage .slide { display: none; margin: 2%; background-color: #fff; overflow: hidden; } .stage .slide div.image img { max-width: 100%; max-height: 100%; width: auto; height: auto; margin: 0 auto; } .smallStage > div, .stage > div { display: none; width: 100%; height: 100%; position: relative; overflow: auto; overflow-x: hidden; overflow-y: auto; } #imageStage .slide { text-align: center; } #imageStage iframe { width: 100%; height: 80%; } #mediaStage p > img[align='left'], #mediaStage > p > strong > img[align='left'], #mediaStage > p > em > img[align='left'] { margin: 0 15px 10px 0; } /* ---- Galleries ---- */ .stage #galleryStage div.image:after { display: none; } #galleryStage { } #galleryStage .focus { overflow: hidden; height: auto; padding-bottom: 105px; position:absolute; left: 0; right: 0; top: 0; bottom: 0; margin: 0; } /*#msGalleries .focus { position: relative; overflow: visible; margin: 0; height: 100%; }*/ #galleryStage .galleryDesc { margin-bottom: .5em; } #galleryStage .image { text-align: center; display: none; } #galleryStage .thumbs img { max-height: 75px; } #galleryStage .focus h1, #galleryStage .focus .galleryDesc { display: none; } #galleryStage .focus .image { width: 100%; height:100%; overflow-y:auto; overflow: hidden; display:block; background-color: #000; } #galleryStage .focus .image .wrapper { width: 100%; height:100%; position: relative; /*padding: 1em; box-shadow:inset 0 0 0 10px #ccc; position: relative; z-index: 100;*/} #galleryStage .focus .image p { padding: .2em 2%; margin: 0; color: #fff; bottom: 0; position: absolute; width: 96%; background-color: #000; background: rgba(0,0,0,.7);text-shadow: 1px 1px 1px rgba(0,0,0,.95); } /*#msGalleries .focus .image .wrapper * { position: relative; z-index: -10; }*/ #galleryStage .focus .thumbs { height: 105px; position: absolute; /*height: 20%;*/ bottom: 0px; left: 0; width: 100%; background-color: #666; z-index: 1005; } #galleryStage .focus .thumbs .wrapper { padding: 15px; overflow-x: auto; overflow-y:hidden; white-space: nowrap; box-shadow: 0 0px 8px 12px #666 inset;} #galleryStage .focus .thumbs img { position: relative; z-index: -50; } #galleryStage .focus .thumbs a { display: inline-block; border: 1px solid #666; } #galleryStage .focus .thumbs a:last-child { margin-right: 15px; } #galleryStage .focus .thumbs a.current { position: relative; border: 1px solid #fc3; z-index: 1; } /*#galleryStage .focus .thumbs a.current:before { content: ""; width: 22px; height: 22px; position: absolute; top: -12px; left: 4px; color: #f00; background-color: #fc3; transform: rotate(45deg); -webkit-transform:rotate(45deg); }*/ #galleryStage .focus .thumbs a.current:before { content: ""; width: 32px; height: 15px; position: absolute; top: -15px; left: 0px; color: #f00; background: url("../images/shared/arrow-up-yellow.png") no-repeat 0 0; } #galleryStage .focus .thumbs a.current img { z-index: 2; } /* ---- Sidebars ---- */ #sidebarStage div.image { float: right; margin: 0 0 1em 1em; } /* ---- Tables ---- */ #tableStage .tableBody table { width: auto; max-width: 100%; color: #000; border-collapse: collapse; } #tableStage .tableBody table td { padding: 3px 5px; border: 1px solid #999; font-size: 12px; line-height: 14px; vertical-align: middle; text-align: left; background-color: #fff; } #tableStage .tableBody table tr:nth-child(even) td {background-color: #eee; } #tableStage .tableBody table th { padding: 3px 5px; border: 1px solid #999; font-weight: bold; font-size: 13px; line-height: 15px; vertical-align: bottom; text-align: left; background-color: #ccc; } #tableStage .tableBody table tbody tr th { vertical-align: middle; text-align: center; } #tableStage .tableBody table tfoot tr th { vertical-align: top; } #tableStage .tableBody table td.empty, #tableStage .tableBody table th.empty { border: 0px; } /* Author Bio Box */ div.author { overflow: hidden; margin-bottom: 10px; border-radius: 5px; background-color: #eee; padding: 10px 10px 3px; max-width: 870px; } div.author .image { max-width: 120px; float: left; margin: 0px 10px 7px 0; overflow: hidden; border-radius: 5px; } div.author p { margin: 0 0 7px; } div.author p:nth-of-type(1):before { content: ""; display: block; overflow: hidden; border-top: 2px solid #444; height: 6px; line-height: 1px; } /* attempt to fix old inline author images */ #story > p > img[align='left'], #story > p > strong > img[align='left'] { margin: 0 15px 10px 0; } /* Related Content */ #relContent { margin: 15px 0; } #relContent h4:before { content: " "; height: 15px;/*display: -webkit-flex; display: flex;*/ display: block; overflow: hidden; border-top: 1px solid #ddd; } #relContent ul { padding-left: 0; overflow: hidden; } #relContent ul li { list-style-type: none; font-style: italic; margin: 0 0 1em 0; font-size: .8em; color: #999; line-height: 1.3em; } #relContent ul li a { font-style: normal; font-size: 1.2em; } /* Sponsored Content */ #scWrapper { border: 1px solid #ccc; margin: 10px 0; padding: 5px 10px; } body.spProduct #inPageAds, body.brandedContent #inPageAds { overflow: visible; } #scWrapper > h5:first-child { text-align: center; } #scCoInfo { text-align: center; } #scCoInfo div.image img { margin: 0 auto; } #scCoInfo div.image + p { padding-top: 10px; } #scCoInfo p { font-size: 88%; } #scCoInfo p a#scURL:before { content: ""; } #scCoInfo p a#scEmail span { display: none; } #scCoInfo p a#scEmail::before { content: "Email Company"; } #scSuppReq { border-top: thin solid #ddd; margin: 0 3% 1em; padding-top: 1em; width: 94%; } #scWrapper.supplierForm > #scSuppReq { border-top: none 0px; padding-top: 0;} #scSuppReq button#scSuppReqToggle { display: none; background-color: #f90; border: 2px outset #fa3; color: #fff; line-height: 1.38; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: normal; margin: 0 auto; text-align: center; vertical-align: middle; width: 100%; padding: 5px; } #scSuppReq h5.thanks { background-color: #FF9900; border: 1px solid #ddd; display: none; font-weight: 700; padding: 0.5em; } #scComments { width: 100% !important; } /* this is to override manual resizing which can break a bunch of stuff */ .formAction, .formActions { text-align: center; } .formAction button, .formActions button { margin: 0 2% 10px; } #scSuppReq.submitted h5 { display: block; } #scSuppReq.submitted #scSuppReqToggle { display: none; } #scSuppReq.submitted #scSuppReqForm { display: none; } /* Disclaimer */ div#disclaimer { margin: 40px 0; } #disclaimer h4:before { border-top: 1px solid #ddd; content: " "; display: block; overflow: hidden; height: 15px; } div#disclaimer p { color: #666; } /* Marketing Messages */ #marketingMessages { overflow: hidden; margin: 5px 0; max-width: 800px; } #marketingMessages .marketingMessage { overflow: hidden; border: 3px solid #ccc; border-radius: 3px; margin: 0 0 10px; padding: 7px 10px 3px; } /* 10 Things by Deedee Crossett */ #story ol.tenThings li {margin-bottom: 15px; } #story ol.tenThings li br { display: none; } body.signedOut #story ol.tenThings li:nth-child(n+6), body.signedOut #story > .shortText:first-child + p + ol li:nth-child(n+6) { display:none; } body.signedOut #story ol.tenThings + div.author, body.signedOut #story > .shortText:first-child + p + ol + div.author { display:none; } body.signedOut #story ol.tenThings li:nth-child(5):after, body.signedOut #story > .shortText:first-child + p + ol li:nth-child(5):after { content: "Please log in to see the full list."; display: block; margin: 10px 0; } @media (max-width: 475px) { /* XS: Phone V */ /* Base */ #featuredSC h4 { font-size: 90%; } #featuredSC h5 { font-size: 16px; } /* Header */ /*div#bannerAd .adBackground a img { display: none; } */ div#bannerAd .adBackground { display: block; min-width: 0px; background-color: #fff; } div#bannerAd .adBackground a { min-height: 34px; display: block; color: #fff; } /*div#bannerAd .adBackground a[alt]:before { content: attr(alt); display: block; background-color: #9AD636; padding: 5px 10px; text-align: center; font-size: 1em; line-height: 1.5em; } #bannerAd .adBackground { border: 1px solid #9AD636; }*/ #siteSearch button, #siteSearch input { padding: 6px; } /* Tour */ .tourSlide h1 { font-size: 27px; margin-bottom: 10px; } .tourSlide p { font-size: 14px; } .tourSlide ul { font-size: 14px; margin-bottom: 0; } .tourSlide button, .tourExitButtons a { display: block; margin: 10px auto; } #tourSlide1 .tourExitButtons a { font-size: 16px; white-space: normal; } #tourSlide1:before { opacity: .5;} #tourSlide1 .signedIn h2 { font-size: 23px; } #tourStage { top: 5%; } /* Content Grid */ #contentGrid .row1, #contentGrid .row2 { width: 100%; } #contentGrid .gridItem { overflow: hidden; clear: left; margin-top: 20px; } #contentGrid .gridItem div.image { float: left; width: 47%; margin-right: 10px; border: 1px solid #ddd; } #mainGridItem .copy p { display: none; } /* Homepage */ .homeContentMod .image { float: none; margin-right: 0; max-width: 100%; } /*#homeContest .image { float: none; margin-right: 0; max-width: 100%; }*/ #homeNews h3{font-size:20px;} #homeNews h5 {display: block; padding-left: 0px;} #homeArticles, #homeProds { float: none; margin-right: 0; width: auto; border-right: 0px none; } #homeProds { border-top: 1px solid #ddd;} #homeContentGroup .contentListItem { overflow: hidden; } #homeContentGroup .contentListItem .image { min-width: 100px; } /*#homeArticles .contentListItem .image { display:block; width: 100%; float: none; }*/ #featuredSC h5 img { float:left; display: inline; margin: 0 5px 5px 0; } /* Lists */ .popularList ol li span.badge{ float: left; margin-left: 0; } /*replaces line 353 on si-rd.css*/ /*.popularList .badge:after { content: " views:"; }*/ .popularList span + a { clear: left; display: block; } /* Magazine Gateway */ #magGateway #recentIssues .issue { width: 100%; } #currentIssueToc div.coverBlurbs { clear: left; margin-left: 0px; max-width: 100%; } #helpLinks a { float: left; } #currentIssueToc div.image { max-width: none; } #magGateway > .image img { display: none; } body#magazine.magazineGateway .floatright { display: none; } .gciMagIntroimage { display: none; } /* Enewsletter Landning Page */ #eNews .image img { display: none; } .gciMagIntroimage { margin-top: 10px; } body#clid260332801 .floatright { width: 90px; } /* Resub Landning Page */ #resub .image { margin-bottom: 0px; } #resub .image img { display: none; } /* Student Landing Page */ #studentLanding .image img { display: none; } #studentAnchors a { display: block; } /* Magazine TOC */ #issueExtras { max-width: 50%; } /* Calendar of Events */ #cal .eventListing.expand .eventContent { max-height: 800px; transition-duration: 1s; } /* Continuing Education */ #ceSidebar { } /* Contact Us */ body#clid19548919 #inPageAds { width: 100%; margin-right: 0; padding-left: 0%; } #cuWrapper.jsOn #cuReq button#cuReqToggle { display: block; } #cuReq.expanded #cuReqForm { display: none; margin-top: 15px; /*padding: .5em; position: relative; margin-left: -200%; z-index: 40; background-color: #fff; border: 3px solid #ddd; -moz-box-shadow: 0 5px 10px 2px #000; -webkit-box-shadow: 0 5px 10px 2px #000; box-shadow: 0 5px 10px 2px #000;*/ } #cuWrapper.jsOn #cuReq h5.thanks {/*padding: .5em; position: relative; margin-left: -200%; z-index: 40; background-color: #fff; border: 3px solid #ddd;*/ } #cuWrapper.jsOn #cuReq.expanded #cuReqForm { display: block; } #cuReq button#cuReqToggle { color: #f90; font-size: 1px; } #cuReq button#cuReqToggle:before {content:"Send Us a Message"; color: #fff; font-size:14px; } #cuReq.expanded button#cuReqToggle:before {content:"Close Form";} /* Article Detail */ h5 .issueLink { display: block; font-size: 16px; } h5 .author { display: block; } #articleStart h5 span + span {border-left: 0px solid; padding-left: 0px; } /*div#shareButtons, body.products #shareButtons {max-width: 35%;}*/ body.products h5 .postDate { font-size: 16px; } .pullquote { font-size: 22px; margin: 20px 0;} .relProduct h5 { text-align: center; } /*#scSuppReq #scSuppReqForm { display: none; } #scSuppReq button#scSuppReqToggle { display: block; } #scSuppReq.expanded #scSuppReqForm { display: block; padding: .5em; position: relative; margin-left: -150%; z-index: 40; background-color: #fff; border: 3px solid #ddd; -moz-box-shadow: 0 5px 10px 2px #000; -webkit-box-shadow: 0 5px 10px 2px #000; box-shadow: 0 5px 10px 2px #000; } #scSuppReq.expanded.submitted #scSuppReqForm { display: none; }*/ } @media (max-width: 767px) { /* XS + SM: Phone V -> Phone H -> Small Tablet V */ /* Base */ #contentGrid, #main { overflow: visible; } /* try to get around using this, since it could break a lot of other parts */ #inPageAds { margin-right: 0; overflow: visible; display: block; float: none; width: 100%; clear: left; padding: 0; } #inPageAds .ad {display: none; } #featuredSC { margin-top: 25px; } body.supplierDetail #main, body.supplierGateway #main { display: flex; flex-direction: column; } body.supplierDetail #inPageAds, body.supplierGateway #inPageAds { order: 5; } #mobAd0 { margin-top: 20px; } .mobAdWrapper { clear: both; } .mobAdWrapper > div.azk-ad-container, .mobAdWrapper > div { height: auto !important; width:auto !important; text-align: center; } .mobAdWrapper > div.azk-ad-container:before, .mobAdWrapper div[id^='google_ads_iframe']:before { content: "Advertisement"; display: block; font-size: 10px; letter-spacing: 1px; line-height: 1em; color: #999; text-transform: uppercase; margin-bottom: 5px; } #story .mobAdWrapper > div.azk-ad-container:before, #story .mobAdWrapper div[id^='google_ads_iframe']:before { content: "Story Continues After This Advertisement"; } #story > p:last-of-type + div.insights + .mobAdWrapper div.azk-ad-container:before, #story > p:last-of-type + div.shortText + .mobAdWrapper div.azk-ad-container:before, #story > p:last-of-type + .mobAdWrapper div.azk-ad-container:before, #story .mobAdWrapper + .mobAdWrapper div.azk-ad-container:before, #story > p:last-of-type + div.insights + .mobAdWrapper div[id^='google_ads_iframe']:before, #story > p:last-of-type + div.shortText + .mobAdWrapper div[id^='google_ads_iframe']:before, #story > p:last-of-type + .mobAdWrapper div[id^='google_ads_iframe']:before, #story .mobAdWrapper + .mobAdWrapper div[id^='google_ads_iframe']:before { content: "Advertisement"; } .mobAdWrapper div.azk-ad-container, .mobAdWrapper div[id^='google_ads_iframe'] { position: relative; z-index: 100; background-color: #eee; margin: 10px -15px; padding: 10px 0px; border-top: 1px solid #ccc !important;border-bottom: 1px solid #ccc !important; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2) inset } div.mobAdWrapper > .dfp-ad-container > div.ad > div[style*='inline-block'] { width: auto !important; height: auto !important; display: block !important; } /*fix for AdSense ad inline styles */ #homeContentGroup .mobAdWrapper div.azk-ad-container, #homeContentGroup .mobAdWrapper div[id^='google_ads_iframe'] { margin-right: -16px; } /* Header */ header { padding-bottom: 10px;} #main > h4:first-child { margin-top: 0; } #bannerAd { margin: 0; overflow:hidden; max-height: 90px; } #bannerAd .adBackground { margin: -1px; overflow:visible; } #accountToggle { float: right; margin-right: -65px; position: relative; } #searchToggle { float: right; margin-right: -65px; position: relative; } #menuToggle, #accountToggle, #searchToggle { width: 65px; box-sizing: content-box; } #menuToggle a, #accountToggle a, #searchToggle a { display: block; padding:10px 15px 15px; font-size: 25px; line-height: 36px;text-align: center; border: 0px none; outline: 0; } #menuToggle a:active, #accountToggle a:active, #searchToggle a:active { border: 0px none; outline: 0 none; text-decoration: none; } #menuToggle a, #menuToggle a:after, #menuToggle a span, #menuToggle a span:before, #menuToggle a:hover, #menuToggle a:hover:after, #menuToggle a:hover span, #menuToggle a:hover span:before, #menuToggle a:active, #menuToggle a:active:after, #menuToggle a:active span, #menuToggle a:active span:before, #accountToggle a, #accountToggle a:after, #accountToggle a span, #accountToggle a span:before, #accountToggle a:hover, #accountToggle a:hover:after, #accountToggle a:hover span, #accountToggle a:hover span:before, #accountToggle a:active, #accountToggle a:active:after, #accountToggle a:active span, #accountToggle a:active span:before, #searchToggle a, #searchToggle a:after, #searchToggle a span, #searchToggle a span:before, #searchToggle a:hover, #searchToggle a:hover:after, #searchToggle a:hover span, #searchToggle a:hover span:before, #searchToggle a:active, #searchToggle a:active:after, #searchToggle a:active span, #searchToggle a:active span:before { text-decoration: none !important; } /* heavy-handed fix for ie underlining stuff */ #accountToggle a span, #menuToggle a span, #searchToggle a span { margin: 3px 0; } #accountToggle a span:before, #menuToggle a span:before, #searchToggle a span:before { line-height: 30px; } header #accountToggle a:after, header #menuToggle a:after, header #searchToggle a:after { content: ""; width: 100%; height:13px; display:block; position: absolute; left:0; bottom: 5px; font-size: 11px; line-height:13px; text-align: center; } header #menuToggle a:after { content: "Menu"; } header #accountToggle a:after { content: "Log In"; } header #searchToggle a:after { content: "Search"; } .loggedIn header #accountToggle a:after, .signedIn header #accountToggle a:after { content: "Account"; } header.account #accountToggle a:after, header.expand #menuToggle a:after { content: "Close"; } header.search #searchToggle a:after { content: "Cancel"; } #logo { box-sizing: content-box; } #logo a { display: inline-block; padding: 4px 20px 8px; max-width: 200px; width: 100%; } #logo a:after { display: none; } #logo a img { max-height: 54px; margin: 0 auto; } #siteSearch, #headerBottom { display: none; } /*header.expand #logo,*/ header.search #logo, header.account #logo, header.account #account span[class^="icon"], header.account #account i[class^="icon"] { display: none; } header.search #siteSearch, header.account #account button, header.account #account .userWelcome, header.account #account { display: block; } header.account #account #regWrapper { display: inline-block; } header.account #account a {margin: 5px; } header.account #account.signedIn a.accountItem { padding: 1px 5px; } header.account #account.signedOut { margin-top: 10px;padding: 7px 0; } header.account #account.signedOut a.accountItem { padding: 5px 10px; } header.account #account.signedOut span.accountItem { display: none; } #account.newMobile { margin: 8px -65px -7px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; width: auto; padding: 10px 0; } #account.newMobile p { display: none; } body.loggedIn #account.newMobile p.signedIn, body.signedIn #account.newMobile p.signedIn, body.loggedOut #account.newMobile p.signedOut, body.signedOut #account.newMobile p.signedOut { display: flex; } #account.newMobile p > a {flex-grow: 2; margin: 0 12px;} #account.newMobile p > span {flex-grow: 1; display: none; } #account.newMobile p > span.userWelcome {display: none;} #account.newMobile.signedIn {} #account.newMobile p.signedIn { } #account.newMobile p.signedIn a {} body.loggedIn header.account #headerTop, body.signedIn header.account #headerTop { height:auto; min-height: 80px; } #headerTop { overflow: hidden; height: 100px; padding: 7px 0px 7px 65px; position: relative; } /*header.account */#headerTop { height:auto; min-height: 80px; } #siteSearch { padding: 16px 7px 14px; } #socialMedia { display: none; } #homeBtn { display: none; } #account { overflow: hidden; padding: 5px 0px; text-align: center; } #account p { margin:0; } #account ul { margin: 5px auto; max-width: 300px; } #account ul li { display: inline; } #account li.hello strong:after { content: " "; display: block; height: 1px; } #account .accountLink, #account ul li.signoutLink { display: inline-block; max-width: 100%; margin: 0 auto; padding: 0 10px; } #account ul li.signoutLink { font-size: 1em; line-height: 1.42857; } #headerBottom ul { margin: 0; padding: 0; list-style: none; display: block; } #headerBottom nav ul a { box-shadow: inset 0 0 5px #fff; transition: all .3s; } #headerBottom nav ul a:active, #headerBottom nav ul a:hover { box-shadow: inset 0 0 5px #78dcfa; text-decoration: none; } #socialMediaBottom, #productNav { background-color: #fff; height: auto; margin: 0; } #productNav .extra { overflow: hidden; border-bottom: 1px solid #ddd; } #productNav .extra li { float: left; width: 50%; margin: 0; padding: 0; } #productNav .extra li a { display: block; padding: 5px 10px; border-bottom: 1px solid #ddd; } #productNav .extra li:nth-child(2n) a { border-left: 1px solid #ddd; } #socialMediaBottom .social {padding: 10px 10px 5px; margin-bottom: 0px; overflow: hidden; border-bottom: 2px solid #ddd;} #socialMediaBottom .social h4 { margin: 0 0 5px; text-align: center; } #socialMediaBottom .social ul { display: block; text-align: center; } #socialMediaBottom .social li { display: inline-block; width: 25%; margin: 0; padding: 5px 10px; text-align: center;} #socialMediaBottom .social li a { display: block; font-size: 20px; margin: 0; padding: 0; } #socialMediaBottom .social li a img { max-width: 100%; display: inline-block; } #menuToggle { position: absolute; top: 7px; left: 0; } #logo { text-align: center; } #headerTop { padding-right: 65px; } body[id^='treatments-facial-'].listPage #breadcrumb, #breadcrumb { display: block; } /* Navigation Styles - Mobile */ #primaryNav li { text-align: left; } #primaryNav li.parent > span > a { float: left; width: 100%; } #primaryNav li.parent > span { padding-right: 60px; display: block; overflow: hidden; clear: left; } #primaryNav li.parent > span > a.mmExpand { outline: 0px none; display: block; float:left; width: 60px; margin-right: -60px; text-align: center; border-left: 2px solid #ddd; } #primaryNav li.cur > span > a.mmExpand { /*background-color: #ddd;*/ } #primaryNav li.parent ul { background-color: #eee; } #primaryNav ul li {border-bottom: 1px solid #ddd; background-color: #fff; margin-bottom: 0; } #primaryNav ul.cur { display: block; } #primaryNav { border-top: 0px solid #ddd; border-bottom: 1px solid #ddd; } #primaryNav > li { padding: 0; margin: 0; border-bottom: 1px solid #ddd; font-weight: bold; } #primaryNav > li a { padding: 10px; display: block; font-size: 20px; line-height: 20px; } #primaryNav > li ul { display: none; padding-bottom: 5px; border-top: 1px solid #ddd; } #primaryNav > li ul ul { } #headerBottom #primaryNav a.more { display: none; } #headerBottom #primaryNav a.mmExpand { box-shadow: none; transition:none; } #primaryNav li.beautyAccelerateNav > span a:first-child { height: 40px; } #primaryNav li.beautyAccelerateNav > span a:first-child:after {top: 6px; bottom: 6px; right: 5px; left: 10px; background-position: 0px 50%;} #primaryNav > li.services > span > a:before {content: "Professional ";} /* Footer */ footer ul li:first-child { display: block; } /* Tour */ /* Homepage */ #homeContentGroup { clear: right; } #homeArticles, #homeProds { width: 100%; } /* Content Grid */ #contentGrid #mainGridItem { width: 100%; } /* Gateway */ #gatewayWrapper { display: table; width: 100%; } #gatewayWrapper #gatewayPopular { display: table-footer-group; clear: none; float: none; width: auto; } #gatewayWrapper #gatewayPopular h4 { border-top: 1px solid #ddd; margin-top: 0; padding-top: 11px; } #gatewayWrapper #gatewaySuppProf { display: block; clear: none; float: none; width: auto; margin: 10px 0 15px; } /* Lists */ .popularList, #relProducts { /*border-width: 1px 0 1px 1px;*/ float: right; clear: right; width: 40%; margin: 15px 0 10px 4%; /*padding: 0 0 0 10px;*/ } .itemWrapper h3 { display: table-cell; min-width: 50%; } .itemWrapper h5 { display: table-footer-group; } .itemWrapper h5 span { padding: 5px 0; display: block; } .itemWrapper.audio .image a { font-size: 10px; } .itemWrapper.video .image a { font-size: 10px; } body.regularProduct #storyWrapper #story { order: 1; } body.regularProduct #storyWrapper #detailPopular { order: 6; } body.regularProduct #storyWrapper #relContent { order: 4; } body.regularProduct #storyWrapper #mobAd1 { order: 2; } body.regularProduct #storyWrapper #mobAd2 { order: 5; } body.regularProduct #storyWrapper #mobAd3 { order: 7; } body.regularProduct #storyWrapper #mobAd4 { order: 3; } /*body.regularProduct #storyWrapper { display: table; } body.regularProduct #articleExtras + #story { display: table-header-group; } body.regularProduct #detailPopular { display: table-footer-group; float: none; clear: none; width: auto; } body.regularProduct #detailPopular h4 { margin-top: 0; padding-top: 11px; border-top: 1px solid #ddd; }*/ .itemWrapper.branded .image:before { font-size: 11px; } /* PAGINATION styles */ div#pagination { font-size: 1.1px; color: #fff;} div#pagination > a, div#pagination > span { display: none; } /* Hide all of them */ div#pagination > span.curr_page { position: relative; margin-left: 30px; margin-right: 30px; } /* turn on the important ones: prev, first, current, last, next */ div#pagination span.curr_page, /* current page */ div#pagination > *:first-child, /* Prev */ div#pagination > *:last-child, /* Next */ div#pagination > *:nth-last-child(2), /* last page before Next */ div#pagination > a:first-child + a, /* first page after Prev */ div#pagination > span { display:inline-block; } div#pagination > span.curr_page:nth-child(2), div#pagination > span.curr_page:nth-child(3) { margin-left: 0px; } /* curr page = 1 or 2 */ div#pagination > a + a + a + span.curr_page:before { content:". . ."; position: absolute; left: -31px; bottom:0; } /* curr page >= 3 */ div#pagination span.curr_page:after { content:". . ."; position: absolute; right: -31px; bottom:0; } /* turn on post ... for all */ /* curr page = last or 2nd to last */ div#pagination > span:nth-last-child(2).curr_page, div#pagination > span:nth-last-child(3).curr_page { margin-right: 4px; }/* remove right margin */ div#pagination > span:nth-last-child(2):after, div#pagination > span:nth-last-child(3):after { display: none; }/* turn off post ... */ /* Magazine Gateway */ #magIntro .cvrImage { display: none; } #magGateway #recentIssues .issue { width: 100%; } /* #magGateway #recentIssues .issue { width: 45px; }*/ /* Magazine Past Issues */ div.issueYear div.issue { width: 100%; } div.issue h2 { font-size: 19px; } div.issue p { font-size: 14px; line-height: 17px; } /*#pastIssues .jumpMenu { display: none; } #pastIssues #mobileYears { display: block; }*/ /* Magazine TOC */ #issueExtras { margin-left: 0px; margin-top: 0px; float: none; width: 100%; max-width: 300px; display: flex; flex-direction: column;} #issueExtras.image { } #issueExtras .issueNavigation p.prevIssue span { display: none; } #issueExtras .issueNavigation p.nextIssue span { display: none; } #issueExtras .issueNavigation p.prevIssue { font-size: 30px; line-height: .429; } #issueExtras .issueNavigation p.nextIssue { font-size: 30px; line-height: .429; } #issueExtras .issueNavigation.btn-group { display: block; width: 100%; order: 3; } #issueExtras .issueNavigation.btn-group .btn { width: 50%; } /* Calendar of Events */ #cal .eventContent { max-height: 0px; overflow: hidden; transition-property: max-height; transition-duration: .5s;transition-timing-function: ease-out; } #cal .eventListing .eventInfo span { display: block; margin-bottom: 5px; } #cal .eventListing p.mobileViewMore {cursor: pointer; margin-bottom:0; } #cal .eventListing p.mobileViewMore span:before { content:"More "; } #cal .eventListing.expand p.mobileViewMore span:before { content:"Less "; } #cal .eventListing .label { display: block; min-width: auto; text-align: left; margin-left: 0; padding:.8em 0 .2em; } /* Contact Us */ body#clid19548919 hr { max-width: 40%; } /* Article Detail */ #articleExtras { float: none; width: auto; margin: 0 0 15px 0; } #story ol, #story ul { overflow: visible; } #shareButtons { max-width: none; width:auto; float: none; } #shareButtons div[data-network='print'] { display: none !important; } #scCoInfo p a#scEmail span { display: none; } #scCoInfo p a#scEmail::before { content: "Email Company"; } #scURL p a span { display: inline; } #scSuppReq #scSuppReqForm { display: none; } #scSuppReq > div.wrapper { position: absolute; left: -9999px; } #scSuppReq button#scSuppReqToggle { display: block; } #scSuppReq.expanded #scSuppReqForm, #scSuppReq.expanded > div.wrapper { display: block; padding: .5em; position: static; left: 0; /*position: relative; margin-left: -150%; z-index: 40; background-color: #fff; border: 3px solid #ddd; -moz-box-shadow: 0 5px 10px 2px #000; -webkit-box-shadow: 0 5px 10px 2px #000; box-shadow: 0 5px 10px 2px #000;*/ } #scSuppReq.expanded.submitted #scSuppReqForm { display: none; } #storyWrapper { display: -webkit-flex; display: flex; -webkit-flex-direction:column; flex-direction: column; } body.genericContent #storyWrapper { display: block; } #storyWrapper #articleExtras {-webkit-order: 1; order: 1; } #storyWrapper #story {-webkit-order: 2; order: 2; } #storyWrapper #relContent { -webkit-order: 3; order: 3; } #storyWrapper #extrasWrapper {display: block; -webkit-order: 4; order: 4; clear: none; float: none; width: auto; } #detailPopular { clear: left; float: none; width: auto; margin: 0; border-width: 1px 0 0 0; padding: 10px 0 0; } #relProducts { width: auto; border-width: 1px 0 0; box-shadow: none; clear: left; float: none; margin: 10px 0; padding: 10px 0; } #story > p > img { max-width: 100%; height: auto !important; } /* to fix unstyled inline images that were put into content incorrectly by editors */ /* Article Add-ons */ #galleryStage .focus { padding-bottom: 0px; } #galleryStage .focus .thumbs { display: none; } .smallStage, .stage { width: 84%; height: 76%;top: 7%; left: 8%; } /* Utility Styles*/ div.image.thirdRight, div.image.thirdLeft { max-width: 100%; margin: .3em auto; float: none; } /* Supplier Professional Services */ .itemWrapper.supplierContent .image:before { font-size: 11px; } body.supplierDetail #storyWrapper { display: block; } /* turning off flex-box re-ordering for supplier detail pages */ body.supplierDetail #supplierVideoWrapper.embeddedBioVideo { display: block; margin: 0px auto; float: none; width: 450px; max-width: 100%; } body.supplierDetail .supplierPromoImg { max-width: 35%; } /* */ } @media (min-width: 476px) and (max-width: 767px) { /* SM: Phone H -> Small Tablet V */ /* Base */ /* Header */ #account, #siteSearch { margin: 0 auto; padding-left: 0; padding-right: 0; width: 80%; } #headerBottom { text-align: center; } header.account #account p:after { content: " to gain access to valuable content"; display: block; } header.account #account.newMethod p:after { content: ""; } #account .accountLink, #account ul li.signoutLink { padding: 0 20px; } /* Tour */ .tourExitButtons span { margin: 0 20px; } #tourSlide1 .tourExitButtons a { white-space: normal; } /* Content Grid */ #contentGrid #mainGridItem img { margin: -10% 0; } #contentGrid .gridItem { padding-bottom: 2em; width: 47.5%; float: left; border: 1px solid #ddd;} #contentGrid .gridItem img { width: 100%;} #contentGrid .gridItem:first-child { margin-right: 5%; } #contentGrid .gridItem:hover { box-shadow: 0 0 3px rgba(30, 227, 252, 0.5); } #contentGrid .gridItem h3 { position: absolute; bottom: 0; left: 0px; right: 0; padding: 5px 8px; } #contentGrid .row1, #contentGrid .row2 { width: 100%; margin-top: 20px; } /* Homepage */ #homeArticles { padding-right: 0; margin-right: 0px; border-right: 0px none; } #homeProds { margin-right: 0px; border-top: 1px solid #ddd; } /* Magazine Gateway */ #helpLinks a { float: left; } #magGateway #recentIssues .issue { width: 45%; float: left; } /* Enewsletter Landning Page */ #enewsPreview.image { max-width: 40%; float: right; clear: right; margin-bottom: 15px; margin-top: 1px; padding-right: 20px; } #enewsMobilePreview.image { max-width: 40%; float: right; clear: right; margin-bottom: 15px; margin-top: 1px; padding-right: 20px; } /* Resub Landning Page */ #resub div div.image { max-width: 40%; float: right; clear: right; margin-bottom: 15px; margin-top: 1px; padding-right: 20px; } /* Calendar of Events */ #cal .eventListing.expand .eventContent { max-height: 600px; transition-duration: 1s; } /* Continuing Education */ #unitedStates { float: left; margin-right: 5px; } #international { clear: left; float: left; } /* Contact Us */ #cuWrapper.jsOn #cuReq #cuReqForm { display: block; } /* Article Detail */ /*#articleExtras .addOn { width: 50%; }*/ body.regularProduct #articleExtras .addOn { width: 100%; } #articleExtras #authorbio h4 { display: inline-block; line-height: 23px; vertical-align: top; } #articleExtras #authorbio div.image { display: none; } #articleExtras #authorbio p { display: inline-block; line-height: 23px; vertical-align: top; } #articleStart h5 .issueLink { display: block; padding-left: 0; border-left: 0 none; } /*.pullquote { overflow: hidden; float: none; width: auto; }*/ body.signedOut #relProducts + #detailPopular ol li:nth-child(n+6) { display: none; } .popularList ol li { padding-left: 60px; } .popularList ol li .badge { float: left; margin: 0 10px 10px -60px; } .relProduct { float: left; width: 50%; margin: 0 0 10px; padding: 0 10px; } .relProduct + .relProduct { margin-top: 0;} .relProduct:nth-child(2n+2) { clear: left; } /* */ } @media (min-width: 476px) and (max-width: 767px) and (max-height: 400px){ /* SM: Phone H ONLY */ #contentGrid #mainGridItem img { margin: -20% 0; } .smallStage, .stage { height: 73%; top: 10%; } #msCloseBtn, #regPromptCloseBtn { top: -1.5em; } /* Tour */ .tourSlide p { float: left; width: 44%; margin: 0px 3% 10px; } .tourSlide div.image { float: left; width: 50%; } #tourSlide1 p, #tourSlide5 p { float: none; width: auto; margin: 0 0 10px; } #tourSlide1 .signedIn h2 { font-size: 23px; } } @media (min-width: 768px) and (max-width: 999px) { /* MD: Small Tablet H -> Large Tablet V */ /* Base */ #inPageAds { margin-right: -322px; padding-left: 20px; width: 302px; } #main { padding-right: 322px; } #logo a:after { display: none; } #socialMedia { bottom: 50px; } #socialMedia h4 { display: none; } #socialMedia .social li a img { height: 26px; } /*Temp selectors: #homeMag, #homeContest, #contentGrid, #storyWrapper, .contentWrapper { margin-right: -49.2537%; }*/ #homeMag, #homeContest, #contentGrid, #storyWrapper, .contentWrapper, #gatewayWrapper { margin-right: -322px; } #articleStart.hasMediaSponsor { margin-right: -322px; width: auto;} /* generic items with no in-page ads can take up the full width like content wrappers */ body.noIPAds.genericContent #articleStart { margin-right: -49.2537%; float: none; width: auto; } /* Header */ #account.newMobile.signedOut p a.userSubscribe:after { content: ""; } /* List Pages */ #gatewayPopular ol li:nth-child(n+6) {display: none; } #gatewayPopular.fullList ol li:nth-child(n+6) {display: list-item; } .contentList .itemWrapper { padding: 0 6% 0 3%; } .contentList .itemWrapper:nth-of-type(5), .contentList .itemWrapper:nth-of-type(2n+8) { padding: 0 3% 0 6%; clear: left; } /*.contentList .itemWrapper:nth-of-type(2n+3) { clear: none; } .contentList .itemWrapper:nth-of-type(5), .contentList .itemWrapper:nth-of-type(2n+9) {clear: left; }*/ /*#moreResults.contentList .itemWrapper:nth-of-type(5), #moreResults.contentList .itemWrapper:nth-of-type(2n+9) {clear: none; } #moreResults.contentList .itemWrapper:nth-of-type(2n+3) { clear: left; }*/ /* Content Grid */ #contentGrid #mainGridItem { width: 48%; float: left; } #contentGrid .gridItem div.image { float: left; width: 47%; margin-right: 10px; border: 1px solid #ddd; } #contentGrid .row1 { width: 48%; margin-left:4%; } #contentGrid .row1 .gridItem:first-child { margin-bottom: 20px; } #contentGrid .row2 { width: 100%; margin-top: 15px; } #contentGrid .row2 .gridItem { width: 48%; float: left;} #contentGrid .row2 .gridItem:first-child { margin-right: 4%; } #mainGridItem.video > a p { display: none; } /* Magazine Gateway */ #magGateway #recentIssues .issue { width: 48%; float: left; } /* Magazine Past Issues */ div.issueYear div.issue { width: 45%; margin-right: 5%; } div.issueYear div.issue:nth-child(2n+4) { clear: left; } /* Article Detail */ #articleStart h5 .issueLink { display: block; padding-left: 0; border-left: 0 none; } /*#scCoInfo p a#scEmail span { display: none; } #scCoInfo p a#scEmail::before { content: "Email Company"; }*/ } @media (min-width: 768px) and (max-width: 812px) { /* MD Very minor fix for small variety of screen widths */ /* when there is article add-ons and a most popular list, the text sometimes breaks at the start, on the left then jumps to the right */ #articleExtras + #extrasWrapper + #story { clear: left; } } @media (min-width: 768px) and (max-width: 999px) and (max-height: 768px) { /* MD Small Tablet Horizontal ONLY */ .tourSlide p { float: left; width: 54%; margin: 20px 3% 10px; } .tourSlide div.image { float: left; width: 40%; } #tourSlide1 p, #tourSlide5 p { float: none; width: auto; margin: 0 0 10px; } } @media (min-width: 768px) { /* MD+LG: Small Tablet H -> Large Tablet V -> Large Tablet H -> Desktop */ /* Base */ .mobAdWrapper { display: none; } /* Header */ header { padding: 10px 15px 10px; position: relative;} #bannerAd { overflow:hidden; max-height: 90px; max-width: 970px;margin:10px auto;padding:1px 15px; } /*#productNav { position: absolute; top: 0; left: 0; right: 0;color: #000; height: 30px; background-color: #000; padding-right: 240px;} #productNav { position: absolute; top: 0;color: #000; height: 30px; background-color: #000; padding-right: 240px; margin: 0 -15px; max-width: 1200px; text-align: center; width: 100%;}*/ /*header:before { content: ""; position: absolute; top: 0; left: 0; right: 0; background-color: #000; height: 30px; z-index: -100; } creating black bar on left and right of product nav */ #productNav h4 { float: left; font-weight: normal; font-size: 10px; line-height: 30px; color: #ddd; display: inline-block; margin: 0 4px 0 0;} #productNav .extra { float:left; text-align:left; font-size:15px; height: 30px; } #productNav .social { float:right; font-size:15px; height: 30px; margin-right: -240px; } #productNav ul { display: inline-block; margin: 0; padding: 0;} #productNav li { display: inline-block; margin: 0 } #productNav li a:link { color: #ffffff; padding: 5px 10px; display: block; line-height: 20px; } #productNav li a:hover { color: #ffffff; text-decoration: underline; } #productNav li a:visited { color: #ffffff; } #productNav .social li a { padding: 5px; margin-right: 5px; } #productNav li.web { display: none; } #menuToggle { display: none; } #accountToggle { display: none; } #searchToggle { display: none; } #login { display: none !important; } #headerTop { overflow: hidden; position: relative; padding: 5px 41.5% 10px; } #account {width: 27%; position: absolute; right: 0; bottom: 10px; } #account p { margin: 0; } #account ul { font-size: 15px; text-align: right; } body.supplierLanding #logo { max-width: 250px; } body.supplierLanding #headerTop { padding: 5px 70% 10px 10px; } body.supplierLanding #scWrapper { margin-top: 0px; } #siteSearch { width: 30%; position: absolute; left: 0; bottom: 10px; } #account p:after { content: " to gain access to valuable content"; } #account.newMethod {width: 15%; position: absolute; right: 0; top: 0; bottom: 11px; } #account.newMethod p:after { content: ""; display: none;} #account.newMethod p {display: none; flex-direction: column; height: 100%; text-align: center;} #account.newMethod p.signedOut { display: flex; } #account.newMethod p.signedIn {justify-content: space-between;} body.signedIn #account.newMethod p.signedOut, body.signedOut #account.newMethod p.signedIn { display: none; } body.signedIn #account.newMethod p.signedIn, body.signedOut #account.newMethod p.signedOut { display: flex; } #account.newMethod p a.userSubscribe {position: relative; padding: 5px 10px; } #account.newMethod p a.userSubscribe i {position: absolute; left: -22px; top: 25%; font-size: 110%; color: #2ec9f7;} #headerMag { display: block; width: 12%; position: absolute; right: 17%; top: 0px; bottom: 10px; } #headerMag a {display: flex; height: 100%; justify-content: flex-end;} #headerMag a img {height: 100%; width: auto; } /* Hopefully this doesn't break anything else, only needed to vertically align logo to bottom */ #headerTop { display: flex; min-height: 120px; } #logo { align-self: flex-end; } #headerBottom { clear: left; display: block !important; } #socialMediaBottom { display: none; } /* Navigation Styles - Desktop */ nav { overflow: hidden; background-color: #fff; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } nav a#homeBtn { float: left; position: relative; z-index:15; text-align: left; padding: 3px 0; height: 40px; width: 39px; display: inline-block; } nav a#homeBtn span { font-size: 28px; line-height: 34px; height: 34px; width: 39px; display: block; } nav a#homeBtn span:before { line-height: 34px; } nav a#navBtn, nav a#navBtn strong { display: none; } #primaryNav a.mmExpand { display: none; } nav ul, nav li { margin: 0px; list-style: none; } nav > ul { margin: 3px 5px 3px 5px; max-height: 34px; overflow: hidden; padding: 0; } nav > ul ul { } nav ul li span { height: 34px; list-style: none; float: left; margin: 0px 0px 0px 0px; padding: 0; } nav ul li span a { line-height: 34px; height: 34px; display: inline-block; padding: 0px 10px; outline: 0px none; } nav ul li span a:link { text-decoration: none; outline: 0px none; } /*ul.cur > li > span a:link { text-decoration: underline; }*/ nav > ul > li > span a { padding: 0 10px; } nav > ul > li > span {font-weight: bold; font-size: 24px;} nav ul ul > li > span { font-size: 21px;} nav ul ul ul > li > span { font-size: 18px;} nav ul ul li { list-style: none; margin: 0px 3px 0px 0px; } nav ul ul li.cur > span { font-weight: bold; } nav ul ul { overflow: hidden; max-height: 34px; padding-left: 0; } nav ul ul ul { max-height: 34px; border: 0px none; } nav li, nav ul ul { display: none; } nav.level0 > ul, nav.level0 > ul > li { display: block; } nav li.cur > span a { color: #000; } nav li.cur > ul:before { content: ">"; margin-left: -15px; float: left; font-size: 1.25em; line-height: 34px;} /*nav ul.cur > li { display: list-item; }*/ nav li.cur, nav li.cur > ul.cur > li { display: list-item; margin-right: 0; } nav li.cur > ul { display: block; padding-left: 15px; } nav a.more { width: 60px; height: 34px; position: absolute; top: 0px; right: 0; font-size: 13px; line-height: 34px; text-align: right; background-color: #fff; outline: 0px none; text-decoration: none; } nav a.more:before { content: "more "; } #primaryNav.expand a.more:before { content: "less "; } nav ul.last, #primaryNav, #primaryNav > li ul.last { padding-right: 70px; } #primaryNav.cur { padding-right: 0; } /* creating a space for the 'more' link */ nav ul.last > li:last-child > span, #primaryNav > li:last-child > span/*, #primaryNav li:last-child > span, #primaryNav > li li:last-child > span*/ { margin-right: -70px; position: relative; z-index: 12; background-color: #fff; } /* allowing the last li to cover up the more link if it fits */ #primaryNav.cur > li:last-child > span {margin-right: 0; } #primaryNav > li:last-child > span:after, nav ul.last > li:last-child > span:after { content: ""; background-color: rgba(200,255,255,.4); background-color: #fff; height: 30px; width: 900px; display: block; position: absolute; top: 0; left: 100%; z-index: 11; }/* covers up the more/less link */ #primaryNav.cur > li:last-child > span:after { display: none; } nav li.parent.cur > ul.last + a.more, #primaryNav.cur > li.webcast.cur > a.more { display: none; } /* hiding the more link when we are not deep enough. */ #primaryNav li.cur > ul { display: block; } #primaryNav li.cur > ul > li { display: none; } #primaryNav li.cur > ul > li.cur { display: list-item; } #primaryNav li.cur > ul.last > li { display: list-item; } ul#primaryNav > li { display: list-item; } ul#primaryNav.cur > li { display: none; } ul#primaryNav.cur > li.cur { display: list-item; } /* fixes for sliding transition */ nav ul { position: relative; transition: max-height .5s;} #primaryNav.expand, #primaryNav.expand ul { max-height: 204px;} /* this will allow for 6 lines of sub nav (most likely under Markets & Trends > Segments > */ #primaryNav { z-index: 10; } #primaryNav > li > ul { z-index: 9; } #primaryNav > li > ul > li > ul { z-index: 8; } /* Utility Styles */ /*#story .ytVideoWrapper { margin-left: 15px; float: right; width: 50%; max-width: 600px; display: inline-block; }*/ /* Homepage */ .homeContentMod .image { max-width: 200px; } /* Tour */ .tourSlide ul, .tourSlide p { font-size:20px; } /* Gateway Pages */ #gatewayPopular { width: 302px; float:right; margin: 0 0 10px 20px; padding: 0 0 0 10px; border-width: 1px 0px 1px 1px; clear: both; } #gatewaySuppProf { width: 302px; float:right; margin: 10px 0 10px 20px; clear: both; } /* List Pages */ .contentList .itemWrapper div.image { float: none; margin: 0 0 10px; max-width: none; width: 100%; } .contentList .itemWrapper div.image img { width: auto; height: auto; } .contentList .itemWrapper div.image { max-height: 225px; } body.listPage div#pagination { margin-right: -322px; } /* Calendar of Events */ #cal p.mobileViewMore { display: none; } #cal .eventListing .eventDate { margin-right: 20px; } #cal .eventContent p { padding-left: 90px; } /* Contact Us */ #cuWrapper.jsOn #cuReq #cuReqForm { display: block; } /* Article Detail */ /*#shareButtons > span, #shareButtons .print { margin: 0 3px 5px; }*/ /*#scCoInfo p a#scURL:before { content: attr(href); } #scCoInfo p a#scURL span { display: none; }*/ body.brandedContent #extrasWrapper { width: 302px; margin-left: 20px; clear: right; } body.brandedContent #extrasWrapper #detailPopular { margin-left: 0px; width: auto; } body.brandedContent #extrasWrapper + #story { overflow: hidden; } /* this will fix any floats inside the article from clearing way down with the most popular list */ #extrasWrapper { float: right; margin-left: 3%; } #extrasWrapper > div { margin-right: 0px; } #articleExtras { width: 206px; margin-bottom: 20px; } #articleExtras .addOn { width: 200px; } /*.pullquote + p:before, .pullquote + h2:before, .pullquote + h3:before, .pullquote + ol:before, .pullquote + ul:before { content: ""; width: 110px; display: block; overflow: hidden; } .pullquote + p, .pullquote + h2, .pullquote + h3, .pullquote + ol, .pullquote + ul { border-top: 1px solid transparent; }*/ /* Article Add-ons */ .smallStage { width: 50%; height: auto; max-height: 75%; top: 20%; left: 25%; } #galleryStage .focus { padding-bottom: 105px; } #galleryStage .focus .thumbs { display: block; } } @media (min-width: 1000px) { /* LG: Large Tablet H -> Desktop */ /* Base */ #inPageAds {width: 302px; margin-right: -322px; padding-left: 20px; } #main { padding-right: 322px; } /*Temp selectors: */#homeMag, #homeContest, #contentGrid, /*#gatewayRecent,*/ #storyWrapper, .contentWrapper { margin-right: -322px; } /* generic items with no in-page ads can take up the full width like content wrappers */ body.noIPAds.genericContent #articleStart { margin-right: -322px; float: none; width: auto; } /* Tour */ #tourBack span:after { content: " Back"; font-size: 27px; line-height: 50px; vertical-align: top; } #tourNext span:before { content: "Next "; font-size: 27px; line-height: 50px; vertical-align: top; } #tourWrapper { } .tourSlide ul { font-size: 20px; } .tourSlide p { float: left; width: 44%; margin: 85px 3% 10px; font-size:20px; } .tourSlide div.image { float: left; width: 50%; } #tourSlide1 p, #tourSlide5 p { float: none; width: auto; margin: 0 0 10px; } /* Header */ #account.newMobile.signedIn p a.userSubscribe:after { content: " Now"; } /* Content Grid */ #contentGrid #mainGridItem { width: 51.5%; float: left; } #contentGrid .row1, #contentGrid .row2 { width: 45%; margin-left:3.5%; } #contentGrid .gridItem { padding-bottom: 2em; width: 47.5%; float: left; border: 1px solid #ddd;} #contentGrid .gridItem:first-child { margin-right: 5%; } #contentGrid .gridItem:hover { box-shadow: 0 0 3px rgba(30, 227, 252, 0.5); } #contentGrid .gridItem h3 { position: absolute; bottom: 0; left: 0px; right: 0; padding: 5px 8px; } #contentGrid .row2 { margin-top: 20px; } /* Magazine Gateway */ #magIntro .cvrImage { max-width: 30%; } div.issueYear div.issue:nth-child(3n+5) { clear: left; } /* Product List */ body.productGateway #gatewayRecent, body.products.gateway #gatewayRecent { overflow: hidden; } /*body.productGateway #moreResults, body.productGateway #gatewayWrapper > h2 { padding-left: 200px; margin-left: 3%; }*/ /* Gateway Pages */ #gatewayWrapper { overflow: hidden; } #gatewayPopular { clear: left; width: 250px; } #gatewaySuppProf { clear: both; width: 250px; } /* List Pages */ .contentList .itemWrapper { width: 33.3333%; padding: 0 3%; } /*.contentList .itemWrapper:nth-of-type(2n+3) { clear: none; } .contentList .itemWrapper:nth-of-type(3n+4) { clear: none; } .contentList .itemWrapper:nth-of-type(3n+11), .contentList .itemWrapper:nth-of-type(7) { clear: left; }*/ .contentList .itemWrapper:nth-of-type(3n+7) { clear: left; } /*#moreResults.contentList .itemWrapper:nth-of-type(3n+11), #moreResults.contentList .itemWrapper:nth-of-type(7) { clear: none; } #moreResults.contentList .itemWrapper:nth-of-type(3n+4) { clear: left; } #moreResults.contentList .itemWrapper:nth-child(-n+3) { margin-top: 0; }*/ /* Article Detail */ #scCoInfo p { font-size: 100%; } /*body.brandedContent #extrasWrapper { width: 302px; margin-left: 20px; }*/ body.signedOut #relProducts + #detailPopular ol li:nth-child(n+6) { display: none; } /* Navigation Styles - Desktop */ #primaryNav.expand ul { max-height: 136px;} /* this will allow for 4 lines of sub nav (most likely under Markets & Trends > Segments > */ } @media (min-width: 1200px) { /* extra wide */ #primaryNav > li.services > span > a:before {content: "Professional ";} } @media print { /* - Print Reset - */ *, *:before, *:after { border: none #FFF 0px !important; position: static !important; opacity: 1 !important; border-radius: 0px !important; text-shadow: none !important; color: #000 !important; background: transparent !important; box-shadow: none !important; } #menuToggle, #accountToggle, #account, #siteSearch, #productNav, #homeBtn, #debugger, #trendData, #tour, #stcpDiv, #stwrapper, #stOverlay, #us_report_button, nav ul, ul#primaryNav, ul#primaryNav ul, nav ul li ul, #articleExtras, #shareButtons, #media #mediaList, #gatewaySuppProf, .popularList, .smallStage, .stage .slide div.image:after, p#msCloseBtn, p#msNav, #cuWrapper, #contactAuthor, #welcomeAd, body > span, .ytVideo, #scURL span, footer ul:nth-child(-n+2) { display: none !important; } /*dont break these if possible */ .itemWrapper, .slide, .contentListItem, .clearleftfix, div.issue, .assnListing, body#clid44605912 #story p { position: relative !important; break-before: auto !important; break-inside: avoid !important; page-break-before: auto !important; page-break-after: auto !important; page-break-inside: avoid !important; -webkit-region-break-inside: avoid !important; overflow: auto !important; } #inPageAds { display: none !important; width: 202px !important; margin-right: -222px !important; /*margin-left: 1px !important;*/ padding-left: 20px !important; float: right !important; clear: none !important;} #main { /*padding-right: 222px !important;*/ clear: both !important; } body.noIPAds.genericContent #articleStart { float: none !important; width: auto !important; } h4#breadcrumb { display: block !important; clear: left !important; margin: 5px 0 0 0 !important; padding: 10px 0 5px 0 !important; font-size: 70%; color: #999 !important; } #relProducts { float: right !important; clear: right !important; width: 33% !important; padding: 0 0 0 3% !important; margin: 0 !important; } #relProducts img { display: none !important; } /*Temp selectors: */#homeMag, #homeContest, #contentGrid, /*#gatewayRecent,*/ #storyWrapper, #mediaStage, .contentWrapper { /*margin-right: -222px !important; */} header, #headerTop { padding: 0 !important; height: auto !important; } #headerTop { float: left !important; width: 30% !important; padding-right: 5% !important; } #logo { padding: 0 !important; margin: 0 !important; } #logo img { } #headerBottom { clear: both !important; padding: 10px 0 !important; } #storyWrapper { } #mediaStage { } /* Ads */ #bannerAd { max-width: 65%; float: right !important; margin: 0 2% 10px !important; } #story div.mobAdWrapper { display: none !important; } div.ad img, div.bigAd img, div.smallAd img { width: 100% !important; margin: 0 !important; padding: 0 !important;} /* ARTICLE DETAIL PAGE --------------- */ #story, .smallAd, #media, #mediaStage, #mediaStage div.overthrow, #mediaStage div.slide { display: block !important; } #story { font-size: 80% !important; } #story img { float: none !important; } footer { padding: 10px 0 !important; border-top: 3px solid #000 !important; margin-top: 10px !important; } footer ul, #relContent { margin-bottom: 0 !important; } div.author, #relContent > h4 { padding-top: 10px !important; border-top: 1px solid #000 !important; } #relContent > h4:before { content: "Find More "; display: inline !important; } #relContent > h4:after { content: " online:"; } #articleStart { } #articleStart h5 { font-size: 14px; } a[href^="javascript:"]:after, a[href^="#"]:after, a[href]:after { content: "" !important; display: none; } /* Excerpt disclaimer */ div.shortText p {border-top: 1px solid #000 !important; border-bottom: 1px solid #000 !important; padding: 5px; overflow: hidden !important; margin-bottom: 15px; } div.shortText span { display: inline; line-height: 1.5em; margin: 0; text-indent: 0; } #story div.shortText:first-child { display: block; } /* Product detail page */ #articleStart #productImage img { max-height: 300px !important; max-width: 300px !important; height: auto !important; width: auto !important;} /* List Pages */ .recentList + h2, .contentList + h2, #searchForMore { display: none !important; } #moreResults { display: block !important; border-top: 0px none !important; } #moreResults:after { content: "Find more content online"; display: block; font-size: 14px; } /*.recentList { padding-top: 10px !important; border-top: 1px solid #000 !important; } #gatewayRecent {*/ .contentList .itemWrapper .recentList .itemWrapper {page-break-inside: avoid !important; -webkit-region-break-inside: avoid !important;} /* Gateway pages */ #gatewayFocus { overflow: hidden;} #gatewayFocus img { width: 100px !important; height: auto !important; float:left; margin: 0 10px 10px 0 !important;} #gatewayFocus div.copy { position: static !important; text-align: left !important; padding: 0 !important; margin: 0 !important; } #gatewayFocus .copy h2 { margin-top: 0 !important; } /* HOME + prod gateway*/ #contentGrid { display: block; overflow: hidden !important; width: 100% !important; float: left !important; border-bottom: 1px solid #000 !important; margin-bottom: 10px !important; } #mainGridItem img { width: 45% !important; height: auto !important; float:left; margin: 0 5% 10px 0 !important;} #mainGridItem div.copy { position: static !important; text-align: left !important; padding: 0 !important; margin: 0 !important; } #mainGridItem .copy h2 { margin-top: 0 !important; } #mainGridItem.video h2 { text-align: left !important; } #mainGridItem.video p { text-align: left !important; } #mainGridItem.video .ytVideoWrapper:before { content: "[View Video Online]"; } #contentGrid .row1 { } #contentGrid .gridItem { outline: 1px solid #ccc !important; padding-bottom: 0 !important; } #homeNews { display: block !important; clear: left !important; } #homeContentGroup {width: 100% !important; display: block !important; clear: left !important; overflow: hidden !important; } #homeContentGroup > div { padding-top: 10px !important; border-top: 1px solid #000 !important;width: 100% !important; float: none !important; } /* Media */ #mediaStage { width: auto !important; height: auto !important; display: block !important; clear: left !important; } #mediaStage:before { content: "Media"; display: block !important; padding: 5px 0; border-top: 1px solid #000 !important; margin-top: 15px !important; font-size: 15pt; font-weight: bold; overflow: hidden; } #mediaStage > div {display: block !important; position: relative !important; } #mediaStage div#tableStage:before, #mediaStage div#figureStage:before, #mediaStage div#imageStage:before, #mediaStage div#sidebarStage:before, #mediaStage div#footnoteStage:before, #mediaStage div#AuthorBioStage:before, #mediaStage div#formulaStage:before { display: block !important; width: 60% !important; padding: 5px 0 !important; border-top: 1px solid #000 !important; margin-top: 15px !important; font-size: 13pt !important; } html, body, #wrapper, #main, #mediaStage, #mediaStage * { float: none !important; border: 0px none !important; display: block !important; } #mediaStage .slide { display: block !important; position: relative !important; break-before: auto !important; break-inside: avoid !important; page-break-before: auto !important; page-break-after: auto !important; page-break-inside: avoid !important; -webkit-region-break-inside: avoid !important; margin: 0 !important; overflow: auto !important; } #mediaStage div#tableStage:before { content: "Tables"; } #mediaStage div#figureStage:before { content: "Figures"; } #mediaStage div#imageStage:before { content: "Images"; } #mediaStage div#sidebarStage:before { content: "Sidebars"; } #mediaStage div#footnoteStage:before { content: "Footnotes"; } #mediaStage div#AuthorBioStage:before { content: "Author Bios"; } #mediaStage div#formulaStage:before { content: "Formulas"; } #mediaStage div.image { width: 60% !important; } #mediaStage div.image img { max-height: 250px; } #mediaStage div#galleryStage, #mediaStage div#galleryStage * { display: none !important; } /* SPONSORED CONTENT --------------- */ body.spProduct div#scWrapper, body.brandedContent div#scWrapper { border: 1px solid #000 !important; padding: 2% !important; background-color: #fff !important; } body.spProduct div#scWrapper h5, body.brandedContent div#scWrapper h5 { font-weight: normal !important; font-size: 90% !important; text-align: center !important; } body.spProduct div#scWrapper div.image img, body.brandedContent div#scWrapper div.image img { max-width: 100% !important; margin: 0 !important; } body.spProduct #scURL, body.brandedContent #scURL { word-break: break-all !important; } #scCoInfo p a#scURL:before { content: attr(href) !important; word-break: break-all !important; font-style: italic; } body.spProduct div#scCoInfo:after, body.brandedContent div#scCoInfo:after { content: "View this article online to contact this supplier. And don't forget to tell them you saw them on SkinInc.com!"; border-top: 1px solid #999 !important; display: block !important; font-size: 11pt !important; line-height: 15pt !important; margin: 5px 0 !important; padding: 5px 0 0 !important; } body.spProduct div#scSuppReq, body.brandedContent div#scSuppReq { display: none !important; } div#disclaimer { margin: 15px 0 0 0 !important; } .contentMod { padding: 3px 10px !important; margin-top: 10px !important; border-top: 1px solid #000 !important; overflow: hidden !important; } #featuredSC { width: 100% !important; padding: 1px 10px !important; margin: 0 0 15px 0 !important; border-bottom: 1px solid #000 !important; } #featuredSC h5 img { float: none !important; display: block !important; max-height: 100px !important; max-width: 100px !important; margin: 15px auto 0 auto !important; text-align: center !important; width: auto !important; height: auto !important; } #featuredSC h4:after { display: none; } /* MAGAZINE LANDING PAGE --------------- */ /* PAST ISSUES ------------------- */ select#mobileYears, p.jumpMenu { display: none !important; } div#pastIssues { margin-top: 10px !important; } div.issueYear { overflow: hidden !important; } div.issueYear h2 { margin-top: 0px !important; } div.issueYear + div.issueYear { margin-top: 15px !important; border-top: 1px solid #000 !important; padding-top: 10px !important; } div.issueYear div.issue { float: left !important; width: 46.5% !important; } div.issueYear div.issue:nth-child(2n+2) { clear: left !important; margin-right: 5% !important; } div.issueYear div.issue div.cvimage { float: left !important; margin: 0 10px 5px 0 !important; } div.issueYear div.issue div.cvimage img { max-height: 90px !important; margin: 0 !important; } /* Tablet App ------------------- */ div#appDemoVideo { display: none !important; } div#appSponsors, div#appScreen { float: right !important; width: 25% !important; margin-bottom: 10px !important; margin-left: 15px !important; text-align: center !important; } #auMemberships .row {display: block; overflow: hidden; margin: 10px; padding: 0px; } #auMemberships .row div { display: inline-block; padding: 10px; width: auto !important; position: static !important; transform: none !important; } #aboutUs #auAdvisoryBoard .auAdvisor { margin-bottom: 5px !important; } #cal .eventListing { border-top: 1px solid #ddd; } #cal .eventListing .mobileViewMore:after { content: " Online";} }