/********************************************/ /********** CUSTOM EDITIONS STYLES **********/ /********************************************/ /***** BASE DEFINITIONS - START *****/ /***** BASE DEFINITIONS - END *****/ /****** DEFAULT TEMPLATE STYLES - START ******/ /* FONT SIZE, STYLE */ /* ARTICLES TOC */ /* FONT STYLE, FAMILY */ /* LINE HEIGHT */ /* MARGIN */ /* COLOR */ /* AD STYLES */ /* AD PLACEMENT */ /****** DEFAULT TEMPLATE STYLES - END ******/ /****** GENERIC EDITIONS (CUSTOM DIRECTORY) STYLES - START ******/ /* COLOR */ /* HIGHLIGHTING - Note: colors include opacity */ /* time to transition from highlight to normal; delay before transition begins */ /* FONT */ /* TAGS */ /* ARTICLES */ /* SIDE MENU */ /* BOXES */ /****** GENERIC EDITIONS (CUSTOM DIRECTORY) STYLES - END ******/ /* @font-size_h1Heading: 1.3em; @font-size_h2Heading: 1.125em; @font-size_h3Heading: 1.0em; */ /********************************************/ /********** CUSTOM EDITIONS STYLES **********/ /********************************************/ /***** BASE DEFINITIONS - START *****/ /***** BASE DEFINITIONS - END *****/ /****** ARTICLE-GALLERY TEMPLATE STYLES - START ******/ /****** ARTICLE-GALLERY TEMPLATE STYLES - END ******/ /****** DEFAULT TEMPLATE STYLES - START ******/ /* FONT SIZE, STYLE */ /* ARTICLES TOC */ /* FONT STYLE, FAMILY */ /* LINE HEIGHT */ /* MARGIN */ /* COLOR */ /* AD STYLES */ /* AD PLACEMENT */ /****** DEFAULT TEMPLATE STYLES - END ******/ /****** GENERIC EDITIONS (CUSTOM DIRECTORY) STYLES - START ******/ /* HIGHLIGHTING - Note: colors include opacity */ /* time to transition from highlight to normal; delay before transition begins */ /* TAGS */ /* ARTICLE TOC */ /* BOXES */ /****** GENERIC EDITIONS (CUSTOM DIRECTORY) STYLES - END ******/ .article-swipeview-wrapper { font-size: 1rem; } .gtxcelDefaultTemplate { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 36em; margin-left: auto; margin-right: auto; font-family: 'Helvetica Neue', 'Tahoma', 'Segoe UI', 'Calibri', Helvetica, sans-serif; font-size: 1em; line-height: 1.5em; /* override the top margin for the first element in the article */ /* Olive styles */ /* Newgen styles */ /* Interactive caption stuff */ /* disabling interactive styles so I can set base styles properly .picture, .graphic, .Picture { // for caption positioning position: relative; } figcaption { margin: 0; padding: 0; display: none; background: rgba(0, 0, 0, 0.75); color: #FFFFFF; position: absolute; bottom: 0; width: 100%; box-sizing: border-box; padding: @lineheight_Master / 2; text-align: left; } */ /* Interactive sidebar stuff */ } .gtxcelDefaultTemplate .articleTitle { color: #333333; font: normal 2.25em "Avenir-Black", "HelveticaNeue-Bold", Helvetica, Arial, sans-serif; font-size: 2.25em; line-height: 1.2em; margin: 0 auto; } .gtxcelDefaultTemplate > :first-child { margin-top: 10%; } .gtxcelDefaultTemplate div.block { margin: 1.5em 0; } .gtxcelDefaultTemplate div.block p { margin: 0; } .gtxcelDefaultTemplate ul, .gtxcelDefaultTemplate ol { margin: 1.5em 0; } .gtxcelDefaultTemplate blockquote { font-style: italic; margin: 1.5em; } .gtxcelDefaultTemplate a { color: #006adb; font-weight: bold; text-decoration: none; } .gtxcelDefaultTemplate em * { font-style: italic; } .gtxcelDefaultTemplate .attribution { color: #666666; } .gtxcelDefaultTemplate figure, .gtxcelDefaultTemplate .Picture { display: block; overflow: auto; max-width: 100%; margin: 1.5em auto; } .gtxcelDefaultTemplate img { display: block; width: auto; max-width: 100%; max-height: 100%; margin: 0 auto; } .gtxcelDefaultTemplate .imgwrap img { /* for DE-307: leaving commented out for now; if further testing shows this is OK, remove */ /* width: 100%; */ } .gtxcelDefaultTemplate video { display: block; max-width: 100%; margin: 1.5em auto; } .gtxcelDefaultTemplate iframe { display: block; max-width: 100%; margin: 1.5em auto; } .gtxcelDefaultTemplate div iframe { margin: auto; /* iframe already surrounded by div */ } .gtxcelDefaultTemplate aside.sidebar { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 1em; background: #eeeeee; } .gtxcelDefaultTemplate aside.sidebar > :first-child { margin-top: 0; } .gtxcelDefaultTemplate aside.sidebar > :last-child { margin-bottom: 0; } .gtxcelDefaultTemplate > :last-child { margin-bottom: 10%; } @media screen and (min-width: 701px) { .gtxcelDefaultTemplate figure, .gtxcelDefaultTemplate video, .gtxcelDefaultTemplate iframe, .gtxcelDefaultTemplate aside, .gtxcelDefaultTemplate .Picture { margin: 1.5em auto; } .gtxcelDefaultTemplate aside.pullQuote { margin: 3em; } .gtxcelDefaultTemplate aside.sidebar { padding: 1.5em; } } .gtxcelDefaultTemplate .RoofHeader p, .gtxcelDefaultTemplate .DropHead p, .gtxcelDefaultTemplate .Byline p, .gtxcelDefaultTemplate .Picture p, .gtxcelDefaultTemplate .Image p, .gtxcelDefaultTemplate .Caption p { margin: 0; } .gtxcelDefaultTemplate .Component, .gtxcelDefaultTemplate .FixedComponent, .gtxcelDefaultTemplate .WideComponent { max-width: 100%; } .gtxcelDefaultTemplate .submitted { font-weight: bold; } .gtxcelDefaultTemplate .article_bold { font-weight: bold; } .gtxcelDefaultTemplate .article_italic { font-style: italic; } .gtxcelDefaultTemplate .smallImage div.Caption, .gtxcelDefaultTemplate .smallImage figcaption { background: rgba(0, 0, 0, 0.85); } .gtxcelDefaultTemplate .captionButtonWrapper { position: absolute; bottom: 0; right: 0; padding: 0; left: 0; height: 50px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .gtxcelDefaultTemplate .captionButton { float: right; background: #006adb; color: #ffffff; width: 24px; height: 24px; border-radius: 12px; margin-right: 12px; margin-top: 14px; text-align: center; vertical-align: middle; font-family: Georgia; font-weight: normal; font-size: 1rem; line-height: 1.5rem; } .gtxcelDefaultTemplate .resizeButtonWrapper .captionButton { font-family: Georgia; font-weight: normal; font-size: 1.25rem; line-height: 1.5rem; } .gtxcelDefaultTemplate aside.sidebar { overflow-x: hidden; overflow-y: auto; /* TODO: clean up the caption wrapper stuff and move to a simpler base style */ /* until then this override is needed to counteract the caption styles in the layouts */ } .gtxcelDefaultTemplate aside.sidebar .captionButtonWrapper { height: 48px !important; padding-right: 24px !important; } .gtxcelDefaultTemplate aside.sidebar .captionButton { margin: 0 !important; padding: 0 !important; } .gtxcelDefaultTemplate .sidebar div.readMore { position: absolute; margin: 0; margin-left: 2.25rem; margin-right: 2.25rem; padding-right: 1.5rem; left: 0; right: 0; bottom: 0; background: #dfbf94; box-sizing: border-box; height: 3rem; padding-top: 0.75rem; padding-bottom: 0.75rem; line-height: 1.5rem; z-index: 99; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .gtxcelDefaultTemplate .sidebar div.readMore p { text-align: right; color: #006adb; font: normal 1em "Avenir-Book", Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: bold; } .gtxcelDefaultTemplate .twoColumnAsideMixin { padding-left: 1.5rem; padding-right: 1.5rem; -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2; -webkit-column-gap: 2.25rem; /* Chrome, Safari, Opera */ -moz-column-gap: 2.25rem; /* Firefox */ column-gap: 2.25rem; /* NOTE: property is only available on Firefox */ -moz-column-fill: balance; /* Firefox */ -webkit-column-fill: balance; column-fill: balance; margin: 2.25rem; margin-top: 0; margin-bottom: 1.5rem; width: auto; } .gtxcelDefaultTemplate .twoColumnAsideMixin .graphic, .gtxcelDefaultTemplate .twoColumnAsideMixin .picture { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); /* Needed because click targets in CSS3 columns are wonky */ } @media screen and (max-width: 400px) { .gtxcelDefaultTemplate .sidebar div.readMore { margin-left: 0.75rem; margin-right: 0.75rem; } .gtxcelDefaultTemplate .columns aside.sidebar h1, .gtxcelDefaultTemplate .columns aside.sidebar h2, .gtxcelDefaultTemplate .columns aside.sidebar h3, .gtxcelDefaultTemplate .columns aside.sidebar h4, .gtxcelDefaultTemplate .columns aside.sidebar h5, .gtxcelDefaultTemplate .columns aside.sidebar h6 { padding-top: 0; padding-bottom: 1.5rem; } .gtxcelDefaultTemplate .columns aside.sidebar :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { /* display:none !important; */ } } /* Helpers */ .CenterHorizontallyMixin { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* // 2009 spec display: -webkit-box; display: -moz-box; display: -ms-box; display: -o-box; display: box; // // tweener -ms- spec // display: -webkit-flexbox; // display: -moz-flexbox; display: -ms-flexbox; // display: -o-flexbox; // display: flexbox; // 2013 spec display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;*/ -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -ms-box-orient: horizontal; -o-box-orient: horizontal; box-orient: horizontal; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; -webkit-lines: single; -webkit-box-lines: single; -moz-box-lines: single; -ms-box-lines: single; -o-box-lines: single; box-lines: single; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; -o-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center; -o-box-align: center; box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; } .CenterVerticallyMixin { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* // 2009 spec display: -webkit-box; display: -moz-box; display: -ms-box; display: -o-box; display: box; // // tweener -ms- spec // display: -webkit-flexbox; // display: -moz-flexbox; display: -ms-flexbox; // display: -o-flexbox; // display: flexbox; // 2013 spec display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;*/ -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-box-orient: vertical; -o-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; -webkit-lines: single; -webkit-box-lines: single; -moz-box-lines: single; -ms-box-lines: single; -o-box-lines: single; box-lines: single; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; -o-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center; -o-box-align: center; box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; } /* Base resets */ body { margin: 0; padding: 0; -webkit-overflow-scrolling: touch; overflow: hidden; background-color: #ffffff; color: #333333; } p, div { word-wrap: break-word; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; } #header { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* // 2009 spec display: -webkit-box; display: -moz-box; display: -ms-box; display: -o-box; display: box; // // tweener -ms- spec // display: -webkit-flexbox; // display: -moz-flexbox; display: -ms-flexbox; // display: -o-flexbox; // display: flexbox; // 2013 spec display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;*/ height: 48px; position: relative; top: 0; left: 0; right: 0; background: #ffffff; width: 100%; border-bottom: 1px solid #eeeeee; } /* if we still have a title tag, make sure it is hidden */ title { display: none; } /* test installed fonts */ #fonttest { display: none; } /* utility styles */ .overflow-x-hidden { overflow-x: hidden !important; } .lock-position { height: 100%; width: 100%; overflow: hidden; position: fixed; } .invisible { visibility: hidden !important; } .nodisplay { display: none !important; } .hidden { display: none !important; visibility: hidden !important; } .nooutline { outline: none; box-shadow: none; } /* fix button focus lines for firefox */ button::-moz-focus-inner { padding: 0 8px; } /* control the base focus color */ /* this will only operate if @turn-on-wcag-focus variable is set to true */ *:focus:hover { outline: none; box-shadow: none; } /****** General page styles ******/ /* Hide pages that are marked inactive; show active. NOTE1: this is required to keep off-screen pages from being accessed by keyboard or screen-readers NOTE2: we can't simply mark swipeview-masterpage hidden by default due to a problem with iOS13 and mobile safari */ #swipeview-slider div[id^=swipeview-masterpage-] { position: relative; overflow: hidden; visibility: visible; display: block; width: 100%; height: 100%; } #swipeview-slider div[id^=swipeview-masterpage-].swipeview-active, #swipeview-slider div[id^=swipeview-masterpage-].swipeview-no-active, #swipeview-slider div[id^=swipeview-masterpage-].swipeview-flipping { visibility: visible; display: block; } #swipeview-slider div[id^=swipeview-masterpage-].swipeview-inactive { visibility: hidden; } #swipeview-slider span { display: inline; } .swipeview-active > img { pointer-events: none; } .swipeview-loading > img { display: none; } #pageLoader { z-index: 10000 !important; } #articlesHeadline { text-indent: 0; } /* Hide text, but available to screen readers; similar to bootstrap sr-only class */ .screen-reader { height: 1px; width: 1px; opacity: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; position: absolute; bottom: 0; white-space: nowrap; } .screen-reader-undo-hidden, .screen-reader-focusable:active, .screen-reader-focusable:focus { height: auto; width: auto; opacity: inherit; border: inherit; clip: auto; overflow: inherit; position: inherit; white-space: normal; } .full-page-advertisement .articleBody.screen-reader { height: auto; width: auto; opacity: inherit; border: inherit; clip: auto; overflow: inherit; position: inherit; white-space: normal; } .scrollContainer.full-page-advertisement { overflow: auto; } /* * Mobile Web Reader general styles */ /* * Mobile webreader feedback form */ select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] { font-size: 1.0rem; } /* * Webreader lookinside form * Webreader feedback form */ #mobileWebreaderFeedback, #mobileWebreaderLookinside { display: none; background-color: rgba(0, 0, 0, 0.8); padding-top: 20px; overflow-y: auto; } #mobileWebreaderFeedback form, #mobileWebreaderLookinside form { position: relative; max-width: 300px; max-height: 90%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px; margin: 0 auto; background-color: #fff; font-family: 'Helvetica Neue', 'Tahoma', 'Segoe UI', 'Calibri', Helvetica, sans-serif; } #mobileWebreaderFeedback label, #mobileWebreaderLookinside label { font-size: 0.9em; display: block; margin-top: 15px; width: 100%; } #mobileWebreaderFeedback input, #mobileWebreaderLookinside input { display: block; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 3px; margin-top: 6px; } /* * Webreader lookinside form */ #mobileWebreaderLookinside #closeMobileWebreaderLookinside { position: absolute; top: 10px; right: 10px; padding: 10px 12px; cursor: pointer; border: none; border-radius: 5px; background-color: #EAEAEA; } #mobileWebreaderLookinside h1 { font-family: "Avenir-Black", "HelveticaNeue-Bold", Helvetica, Arial, sans-serif; font-weight: normal; font-size: 2.25em; color: #34715b; padding-top: 0; } #mobileWebreaderLookinside p { text-indent: 0; margin-top: 15px; } #mobileWebreaderLookinside #mobileWebreaderLookinsideSubmit { -webkit-appearance: button; -moz-appearance: button; appearance: button; margin-top: 20px; padding: 10px; font-size: 0.875em; } #mobileWebreaderLookinside #mobileWebreaderLookinsideError { background-color: #f8d7da; border-color: #f5c6cb; position: relative; padding: .75rem 1.25rem; margin-bottom: 1rem; border: 1px solid; border-radius: .25rem; } #mobileWebreaderLookinside #mobileWebreaderLookinsideError p { color: #721c24; margin: 0; } /* * Webreader feedback form */ #mobileWebreaderFeedback #closeMobileWebreaderFeedback { position: absolute; top: 10px; right: 10px; padding: 10px 12px; cursor: pointer; border: none; border-radius: 5px; background-color: #EAEAEA; } #mobileWebreaderFeedback h1 { padding-top: 0; } #mobileWebreaderFeedback img { display: block; margin-top: 15px; } #mobileWebreaderFeedback .invalid { border-color: #AC1D1D; } #mobileWebreaderFeedback .feedbackError { font-size: 0.9em; color: #AC1D1D; display: none; } #mobileWebreaderFeedback textarea { display: block; width: 100%; height: 60px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 0; margin-top: 6px; } #mobileWebreaderFeedback select { margin-top: 6px; } #mobileWebreaderFeedback #mobileWebreaderFeedbackSubmit { margin-top: 20px; padding: 10px; font-size: 0.9em; } #mobileWebreaderFeedbackThankYou, #mobileWebreaderFeedbackError { display: none; } #mobileWebreaderFeedbackThankYou p, #mobileWebreaderFeedbackError p { color: #AC1D1D; padding: 10px 0; } .signUpLink { margin-right: 35px; font-weight: normal; margin-top: 10px; padding-top: 10px; display: block; } #mobileWebreaderNavbar { position: absolute; right: 0; top: 0; display: inline-block; color: #333; height: 48px; line-height: 0; } #mobileWebreaderNavbar i { cursor: pointer; padding: 12px 10px; } #mobileWebreaderNavbar #mobileWebreaderSearchbox { width: 320px; } .pdfDownload { display: block; font-size: 1.25rem; font-weight: normal; text-align: center; margin: 2px 8px 6px 8px; padding: 8px; box-sizing: border-box; width: auto; background-color: #888; border-radius: 5px; color: #eee; } #toc-issue-name { display: block; width: auto; font-weight: bold; text-align: left; margin: 3px 0 9px 5%; } .horizontalSwipeArrow { display: none; position: absolute; bottom: 0; right: 0; width: 20px; height: 40px; -webkit-mask-box-image: url(/images/navigator/horizontalArrow.png); background: #000; box-sizing: border-box; margin: 2px; z-index: 100; } #pageBack .horizontalSwipeArrow { bottom: 50%; left: 0; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } #pageForward .horizontalSwipeArrow { bottom: 50%; right: 0; } /* * Navigator menu styles */ #mobileWebreaderMenu { position: fixed; top: 0; bottom: 0; margin-top: 49px; background-color: #fff; border: 1px solid #ccc; right: -100%; width: 320px; } #mobileWebreaderMenu { overflow-y: auto; } #mobileWebreaderMenu.active { z-index: 3000; } #mobileWebreaderMenu .pdfDownload { margin: 0; } #mobileWebreaderSearch { height: auto; } .box { background-color: #ffffff; color: #000000; border-top: 1px solid #d5d5d5; border-left: 1px solid #c5c5c5; border-right: 1px solid #c5c5c5; border-bottom: 1px solid #b5b5b5; box-shadow: 0 6px 6px -5px #aaaaaa; padding: 4px; margin-bottom: 3%; } /* * Mercury Turnstyle overrides */ .layout_verticalScroll .articleContent { padding: 0; box-sizing: border-box; max-width: 100%; } .contentContainer { padding: 0 20px; } /* * Utility class styles */ /* * Radio buttons that look like regular buttons, but still act as * radio buttons in that only one can be selected at a time. * Similar to bootstrap data-toggle="buttons" */ .group-buttons { font-family: 'Helvetica Neue', 'Tahoma', 'Segoe UI', 'Calibri', Helvetica, sans-serif; } .group-buttons .group-button { color: #006adb; display: inline-block; border: 1px solid #006adb; margin-left: -1px; /* overlap left/right border for adjacent buttons */ padding: 5px 8px; border-radius: 0; font-size: 1.0rem; cursor: pointer; /* hide the radio button circle, but allow it to be tab-focused */ /* label fills the space and centered in space */ } .group-buttons .group-button input[type=radio] { position: absolute; opacity: 0; pointer-events: none; } .group-buttons .group-button label { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; cursor: pointer; } .group-buttons .group-button:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .group-buttons .group-button:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .group-buttons .group-button.selected { background-color: #e6e6e6; color: #333333; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } .group-buttons .group-button:hover, .group-buttons .group-button:focus, .group-buttons .group-button.focus { background-color: #D4D4D4; } .horizontal-icons img { display: inline; } /* highlighting for replica view search */ div.search-term-highlight-block { position: absolute; display: block; background-color: rgba(102, 255, 0, 0.3); border: none; } /* highlighting for article view search */ mark.search-term-mark { display: inline-block; background-color: rgba(102, 255, 0, 0.3); border: none; } mark.search-term-mark::before, mark.search-term-mark::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } mark.search-term-mark::before { content: " [search term] "; } /********** REPLICA VIEW STYLES - START **********/ #replicaPageView { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; overflow: hidden; background-color: #dfdfdf; /* hide circles in replica view - don't really work correctly... */ /* mobile webreader replica view */ /* #replica_swipeview END */ /* only set overflow:hidden in desktop view */ } #replicaPageView .replica-swipeview-wrapper { background-color: #dfdfdf; width: 100%; height: auto; padding-top: 0; max-height: none; box-sizing: border-box; -webkit-overflow-scrolling: touch; z-index: 500; } #replicaPageView .floatingCirclesG { position: absolute !important; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 30%; } #replicaPageView .floatingCirclesG { display: none; } #replicaPageView #replica_swipeview { /* #swipeview-slider END */ } #replicaPageView #replica_swipeview #swipeview-slider { /* pages-scroller overflow: hidden, except when zoomed; height and width set programatically */ } #replicaPageView #replica_swipeview #swipeview-slider .pages-scroller { overflow: hidden; height: auto; width: auto; } #replicaPageView #replica_swipeview #swipeview-slider .pages-scroller.allowScroll { overflow: auto; } #replicaPageView #replica_swipeview #swipeview-slider .pages, #replicaPageView #replica_swipeview #swipeview-slider .pages .page1, #replicaPageView #replica_swipeview #swipeview-slider .pages .page2 { display: inline-block; text-align: center; font-size: 0; /* handle inline-block side-effects */ width: 100%; height: 100%; } #replicaPageView #replica_swipeview #swipeview-slider div[id^=swipeview-masterpage-] { overflow: auto; } #replicaPageView #replica_swipeview #swipeview-slider .pages { overflow: hidden; } #replicaPageView #replica_swipeview #swipeview-slider .pages .page1, #replicaPageView #replica_swipeview #swipeview-slider .pages .page2 { position: relative; overflow: auto; } #replicaPageView #replica_swipeview #swipeview-slider img.page-image-fg, #replicaPageView #replica_swipeview #swipeview-slider img.page-image-bg { display: inline-block; width: auto; height: auto; max-width: none; max-height: none; overflow: hidden; position: absolute; top: 0; } #replicaPageView #replica_swipeview #swipeview-slider img.page-image-fg { z-index: 90; } #replicaPageView #replica_swipeview #swipeview-slider img.page-image-bg { z-index: 80; } #replicaPageView #replica_swipeview #swipeview-slider .pages .page1 img.page-image-fg, #replicaPageView #replica_swipeview #swipeview-slider .pages .page1 img.page-image-bg { right: 0; } #replicaPageView #replica_swipeview #swipeview-slider .pages .page2 img.page-image-fg, #replicaPageView #replica_swipeview #swipeview-slider .pages .page2 img.page-image-bg { left: 0; } #replicaPageView #replica_swipeview.orientation-landscape #swipeview-slider img.page-image-fg { position: relative; width: 100%; max-width: none; max-height: none; } #replicaPageView #replica_swipeview.orientation-portrait #swipeview-slider img.page-image-fg { position: relative; width: auto; max-width: 100%; max-height: 100%; } #replicaPageView.desktop-view #replica_swipeview #swipeview-slider .pages .page1, #replicaPageView.desktop-view #replica_swipeview #swipeview-slider .pages .page2 { overflow: hidden; } #replicaPageView.mobile #replica_swipeview #swipeview-slider img.page-image-bg { display: none; } #replicaPageView.showLinks #footer #showLinksButton { background-color: #e6e6e6; } /* #replicaPageView END */ /* handle twoPageCover == false (first-single; last-single) */ #replicaPageView[data-displayed-pages='2'] #replica_swipeview #swipeview-slider .pages .page1, #replicaPageView[data-displayed-pages='2'] #replica_swipeview #swipeview-slider .pages .page2 { width: 50%; } #replicaPageView[data-displayed-pages='2'] #replica_swipeview #swipeview-slider .pages .page1 { text-align: right; } #replicaPageView[data-displayed-pages='2'] #replica_swipeview #swipeview-slider .pages .page2 { text-align: left; } #replicaPageView[data-displayed-pages='2'] #replica_swipeview #swipeview-slider > div[data-page-position='first-single'] .pages .page2, #replicaPageView[data-displayed-pages='2'] #replica_swipeview #swipeview-slider > div[data-page-position='last-single'] .pages .page1 { text-align: center; width: 100%; } #replicaPageView[data-displayed-pages='2'] #replica_swipeview #swipeview-slider > div[data-page-position='first-single'] .pages .page1, #replicaPageView[data-displayed-pages='2'] #replica_swipeview #swipeview-slider > div[data-page-position='last-single'] .pages .page2 { display: none; } /* #replicaPageView[data-displayed-pages='2'] - END */ /* styles for overlay container block on a page (all links/popups contained in a block) */ /* overlay container can be in either replicaPageView or zoomHolder (it is moved) */ /* height and width defined on overlay-container creation in js */ #zoomHolder { position: absolute; height: 100%; width: 100%; overflow: auto; z-index: 3000; display: none; background: #dfdfdf; } #zoomHolder.active { display: block; } #zoomHolder img.lowRes, #zoomHolder img.highRes { position: absolute; display: block; width: 100%; max-width: 100%; max-height: none; z-index: 300; } #zoomHolder img.lowRes { z-index: 100; } #zoomHolder img.highRes { z-index: 200; } #zoomHolder .popupWrapper, #replicaPageView #replica_swipeview #swipeview-slider .pages .popupWrapper { position: absolute; z-index: 500; } #zoomHolder .popupWrapper .popup, #replicaPageView #replica_swipeview #swipeview-slider .pages .popupWrapper .popup { width: 100%; height: 100%; } #zoomHolder .popupWrapper img.popup-close-button, #replicaPageView #replica_swipeview #swipeview-slider .pages .popupWrapper img.popup-close-button { position: absolute; top: 0; right: 0; display: block; max-width: none; max-height: none; } #replicaPageView #replica_swipeview #swipeview-slider .pages .popupWrapper .popup.linked { cursor: pointer; } #replicaPageView .overlay-container, #zoomHolder .overlay-container { position: absolute; z-index: 300; top: 0; } #replicaPageView .page1 .overlay-container { right: 0; } #zoomHolder .overlay-container, #replicaPageView .page2 .overlay-container { left: 0; } #replicaPageView #replica_swipeview.orientation-portrait .page1 .overlay-container, #replicaPageView #replica_swipeview.orientation-landscape .page1 .overlay-container { right: unset; left: 50%; transform: translateX(-50%); } /* height and width defined on link creation in js */ #replicaPageView .page-link-block, #zoomHolder .page-link-block { position: absolute; display: block; cursor: pointer; } #zoomHolder .page-link-block a.page-link, #replicaPageView .page-link-block a.page-link { display: block; height: 100%; width: 100%; } /* link highlight; used for "flashing" links on page load */ #replicaPageView .page-link-block a.page-link.link-highlight, #zoomHolder .page-link-block a.page-link.link-highlight { background-color: rgba(255, 255, 0, 0.3); border: 1px solid rgba(204, 255, 0, 0.3); } /* transition class to control how long we transition from highlight to normal */ #zoomHolder .page-link-block a.page-link.link-temp, #replicaPageView .page-link-block a.page-link.link-temp { transition: background-color 2s, opacity 2s, border 2s; -moz-transition: background-color 2s, opacity 2s, border 2s; -webkit-transition: background-color 2s, opacity 2s, border 2s; transition-delay: 5s; -moz-transition-delay: 5s; } /* final state of "visible" links on page */ #replicaPageView .page-link-block a.page-link.link-normal, #zoomHolder .page-link-block a.page-link.link-normal { background-color: transparent; border: none; } #footer { display: flex; position: fixed; left: 0; bottom: 0; height: 48px; z-index: 5000; width: 100%; flex-direction: row; border-top: 1px solid #ccc; } #privacy-policy-alert { position: absolute; bottom: 49px; z-index: 5000; width: 100%; display: none; box-sizing: border-box; font-family: 'Helvetica Neue', 'Tahoma', 'Segoe UI', 'Calibri', Helvetica, sans-serif; font-size: 12px; line-height: 1.4; background-color: #CCE5FF; color: #004085; border: 1px solid #B8DAFF; text-align: center; padding: 16px; overflow-y: auto; } #privacy-policy-alert a { font-weight: normal; text-decoration: underline; color: #004085; } #privacy-policy-alert #privacy-policy-title { font-weight: bold; } #privacy-policy-alert #close-privacy-policy-alert { position: absolute; right: 4px; top: 2px; display: block; padding: 0; font-size: 1.5em; color: #004085; line-height: 0.5em; cursor: pointer; border: none; border-radius: 20px; background-color: rgba(0, 0, 0, 0); font-size: 16px; width: 30px; height: 30px; /* close X icon */ } #privacy-policy-alert #close-privacy-policy-alert i.fa { font-size: 24px; } /* Display options for tablet portrait and smaller screen size */ @media screen and (max-width: 768px) { #privacy-policy-alert { padding: 12px 40px; } #privacy-policy-alert #close-privacy-policy-alert { right: 0; top: 0; width: 40px; height: 40px; } #privacy-policy-alert #close-privacy-policy-alert i.fa { font-size: 28px; } } /* Display options for mobile landscape and smaller screen size */ @media screen and (max-width: 580px) { #privacy-policy-alert { padding: 12px 40px; } #privacy-policy-alert #close-privacy-policy-alert i.fa { font-size: 24px; } } /* default for mobile */ #replicaPageView #leaderboardAdBlock, #replicaPageView .leaderboard-ad, #replicaPageView .toc-ad { display: none; } /* support for data tables in article */ table.data-table { display: block; width: auto; overflow-x: auto; table-layout: fixed; border-collapse: collapse; margin-bottom: 20px; } table.data-table th, table.data-table td { border: 1px solid #bebebe; padding: 3px; } table.data-table tbody tr:nth-child(odd) { background-color: #efefef; } table.data-table caption { text-align: left; font-size: .8em; color: #222222; line-height: 1.2em; margin-bottom: 5px; } /* Display options for larger screen size */ @media screen and (min-width: 1025px) { #replicaPageView { /* by default, turned off; see comments at bottom of file to turn on in custom */ /* for desktop view, set max-width and max-height */ } #replicaPageView #wrapper { width: 100%; height: 100vh; } #replicaPageView #footer { background-color: #FFFFFF; /* NOT CURRENTLY USED */ } #replicaPageView #footer #page-display-buttons { display: block; margin-left: auto; white-space: nowrap; } #replicaPageView #footer #showLinksButton { display: inline-block; position: relative; padding: 2px 6px; margin-right: 10px; background-color: #FFFFFF; color: #4679cc; border: none; font-size: 20px; text-align: center; border-radius: 4px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-clip: padding-box; cursor: pointer; } #replicaPageView #footer #showLinksButton i:after { font-family: 'Helvetica Neue', 'Tahoma', 'Segoe UI', 'Calibri', Helvetica, sans-serif; font-size: 1.0rem; content: "Show Links"; } #replicaPageView #footer #zoomPageControl { display: inline-block; text-align: center; vertical-align: top; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-clip: padding-box; cursor: pointer; margin-right: 10px; border: 1px solid #006adb; border-color: #ccccff; padding: 2px 4px; border-radius: 2px; /* explicitly set height/width/margin/padding for IE support */ } #replicaPageView #footer #zoomPageControl .decreaseZoom, #replicaPageView #footer #zoomPageControl .increaseZoom { display: inline-block; background-color: #FFFFFF; color: #006adb; font-family: 'Helvetica Neue', 'Tahoma', 'Segoe UI', 'Calibri', Helvetica, sans-serif; font-size: 1.125rem; border: 1px solid #006adb; border-radius: 1px; height: 15px; width: 15px; line-height: 15px; margin: 0 3px; text-align: center; vertical-align: middle; padding: 0; cursor: pointer; box-sizing: content-box; overflow: hidden; } #replicaPageView #footer #zoomPageControl .decreaseZoom span, #replicaPageView #footer #zoomPageControl .increaseZoom span { vertical-align: super; } #replicaPageView #footer #zoomPageControl #zoomPageControlSlder { display: inline-block; vertical-align: middle; width: 120px; height: 21px; margin: 2px; padding: 0; } #replicaPageView .showLinks #footer #showLinksButton { background-color: #e6e6e6; } #replicaPageView a.page-link { cursor: pointer; } #replicaPageView .showLinks .page-link-block a.page-link.link-normal, #replicaPageView .page-link-block a.page-link.link-normal:hover { background-color: rgba(255, 255, 0, 0.3); border: 1px solid rgba(204, 255, 0, 0.3); } #replicaPageView #pageButton { display: inline-block; font-size: 0; /* handle inline-block side-effects */ } #replicaPageView #pageButton .group-button { padding: 0; height: 30px; width: 65px; } #replicaPageView #leaderboardAdBlock { position: relative; top: 0; width: 100%; height: 90px; /* default height of leaderboard ad */ padding: 1px 0 3px 0; background-color: transparent; } #replicaPageView #leaderboardAdBlock.ad-populated { display: block; } #replicaPageView .leaderboard-ad { position: relative; display: block; margin: 0 auto; padding: 0; /* default width/height of ad */ width: 728px; height: 90px; } #replicaPageView .toc-ad { position: relative; display: block; bottom: 0; /* default width/height of ad: 300x250 */ width: 100%; /* have iframe fit width of toc; ad will be centered in iframe */ height: 250px; } #replicaPageView .page-link-block .page-link-underline { display: none; border-bottom: 1px solid #0000ff; /* default, 1px solid when turned on; color overridden by issue editor setting */ } #replicaPageView #replica_swipeview #swipeview-slider .pages .page1 img.page-image-fg, #replicaPageView #replica_swipeview #swipeview-slider .pages .page1 img.page-image-bg, #replicaPageView #replica_swipeview #swipeview-slider .pages .page2 img.page-image-fg, #replicaPageView #replica_swipeview #swipeview-slider .pages .page2 img.page-image-bg { max-width: 100%; max-height: 100%; } } /********** REPLICA VIEW STYLES - END **********/ /********** WEBREADER AD DEFINITIONS - START **********/ /* Default: everything hidden */ .phone-ad-block, .tablet-ad-block, .desktop-ad-block { display: none; position: relative; justify-content: center; align-items: center; text-align: center; } .phone-ad-block .phone-ad, .tablet-ad-block .phone-ad, .desktop-ad-block .phone-ad, .phone-ad-block .tablet-ad, .tablet-ad-block .tablet-ad, .desktop-ad-block .tablet-ad, .phone-ad-block .desktop-ad, .tablet-ad-block .desktop-ad, .desktop-ad-block .desktop-ad { display: none; position: relative; } .phone-ad-block.hidden-ad, .tablet-ad-block.hidden-ad, .desktop-ad-block.hidden-ad { /* ad can be hidden again with close button */ display: none; } #leaderboard-ad-block, #banner-ad-block { background-color: transparent; } #leaderboard-ad-block.floating-ad, #banner-ad-block.floating-ad { position: fixed; padding: 0; } #leaderboard-ad-block { width: auto; } #banner-ad-block { z-index: 6000; width: 100%; left: 0; } #banner-ad-block.floating-ad { bottom: 49px; } #banner-ad-block .ad-banner { padding-top: 0; padding-bottom: 0; } .zoom-levels-visible #banner-ad-block.floating-ad { bottom: 97px; } #leaderboard-ad-block .ad-leaderboard { padding-top: 0; padding-bottom: 3px; } #toc-ad-block { width: 100%; background-color: #f6f6f6; } #toc-ad-block .ad-toc { padding-top: 4px; padding-bottom: 0; } #toc-ad-block.floating-ad { position: absolute; bottom: 0; z-index: 50; padding: 0; } .interleaved-ad-block { width: auto; } .interleaved-ad-block .ad-interleaved { margin-bottom: 3%; } .interleaved-ad-block .ad-interleaved a { display: block; } #leaderboard-ad-block.floating-ad { top: 48px; } #leaderboard-ad-block.floating-ad .ad-leaderboard { padding-bottom: 0; } .floating-ad .ad-components { -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); border: 1px #9e9e9e; } .ad-components, .dfp-ad-block { position: relative; max-width: 100%; } .close-lightbox-contents-button, .close-ad-block-button { position: absolute; top: -5px; right: -5px; z-index: 100; cursor: pointer; background-image: url('/images/close_button.png'); background-color: transparent; background-size: 25px; width: 25px; height: 25px; } .no-content .close-ad-block-button { display: none; } /* webreader ad phone and tablet size */ @media screen and (max-width: 1024px) { .social-networks-visible #banner-ad-block.floating-ad { bottom: 102px; } .privacy-policy-visible #banner-ad-block.floating-ad { bottom: 97px; } /* hide close button when toc opened on mobile device */ .tocVisible #leaderboard-ad-block .close-ad-block-button { display: none; } } /* webreader ad phone size */ /* show phone-ad-block; tablet/desktop still hidden */ @media screen and (max-width: 767px) { .phone-ad-block { display: flex; } .phone-ad-block .phone-ad { display: block; } } /* webreader ad tablet size */ /* show phone-ad-block, table-ad-block; desktop still hidden */ @media screen and (min-width: 768px) and (max-width: 1024px) { .phone-ad-block { display: flex; } .phone-ad-block .phone-ad { display: block; } .tablet-ad-block { display: flex; } .tablet-ad-block .phone-ad { display: none; } .tablet-ad-block .tablet-ad { display: block; } } /* webreader ad desktop size */ /* show phone-ad-block, table-ad-block, desktop-ad-block */ @media screen and (min-width: 1025px) { .phone-ad-block { display: flex; } .phone-ad-block .phone-ad { display: block; } .tablet-ad-block { display: flex; } .tablet-ad-block .phone-ad { display: none; } .tablet-ad-block .tablet-ad { display: block; } .desktop-ad-block { display: flex; } .desktop-ad-block .phone-ad, .desktop-ad-block .tablet-ad { display: none; } .desktop-ad-block .desktop-ad { display: block; } } /********** WEBREADER AD DEFINITIONS - END **********/ /********** ARTICLE VIEW STYLES - START **********/ /* MOVE STYLES HERE */ /********** ARTICLE VIEW STYLES - END **********/ figure { -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; } iframe { border: 0; max-width: 100%; } .advertisement, advertisement { display: block; overflow: visible; max-width: 100%; height: auto; } .adIframe { margin: 0; padding: 0; overflow: visible; } /* Cover classes */ .cover { color: #000000; margin: 0; font: normal 1em "Avenir-Book", Helvetica Neue, Helvetica, Arial, sans-serif; line-height: 1.5rem; text-align: left; -webkit-hyphens: manual; } .coverPicture { position: relative; } .coverFigure { display: block; margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto; width: 100%; height: auto; } img.coverImageLg, img.coverImageMed, img.coverImageSm { display: none; } @media screen and (max-width: 360px) { img.coverImageSm { display: block; height: auto; max-height: none; width: 100%; } } @media screen and (min-width: 361px) and (max-width: 468px) { img.coverImageMed { display: block; height: auto; max-height: none; width: 100%; } } @media screen and (min-width: 469px) { img.coverImageLg { display: block; height: auto; max-height: none; width: 100%; } } /* prevent subscript and superscript from affecting line heights */ sub { vertical-align: sub; line-height: 0; } sup { vertical-align: super; line-height: 0; } /* Toolbar stuff */ #pageButtons { position: absolute; left: 8px; top: 7px; } #pageButtons a { font-weight: normal; } #backButton { display: block; padding: 0 9px; width: 24px; height: 30px; background: #ffffff; z-index: 1000; } #backToSearchButton { position: absolute; top: 0; left: 0; padding: 0 8px; width: auto; background: #ffffff; z-index: 1000; -webkit-font-smoothing: antialiased; } #backToSearchButton .desktop-button-text { line-height: 22px; } .tapped { background: #aaaaaa; } #backButton.tapped { background: #aaaaaa; } #backArrow i { font-size: 2.125rem; padding-right: 6px; line-height: 28px; } path.home-path { fill: #006adb; } /* hide when unfocused, remove to show when focused */ .unfocusedHidden { /* must have a width/height for screen-readers/safari */ width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; z-index: -100 !important; } @media screen and (max-width: 1024px) { /* hide on mobile */ .social-networks.unfocusedHidden, #mobileWebreaderNavbar .social-networks { display: none !important; } } .elementExpanding { overflow-x: hidden; text-align: left; white-space: nowrap; } /* ***** DESKTOP BUTTONS - START ***** */ #skipToContentButton, #homeButton, #pageForward, #pageBack, .navTOC, .pagesButton, .articlesButton, .shareBtn, .shareButton, .downloadButton, .printButton, #articleZoomButton, #backButton, #backToSearchButton { cursor: pointer; } #homeButton { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } #homeButton.svg-icon svg { position: static; padding: 0; width: 20px; height: 20px; display: inline-block; vertical-align: middle; } #homeButton .desktop-button-text { vertical-align: middle; } #homeButton.tapped { background: #aaaaaa; } /* button styles for buttons with gtxcel-font-icons*/ .web .button-font-icon, .app .button-font-icon { display: inline-block; color: #006adb; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: #ffffff; cursor: pointer; margin-left: 8px; padding: 0 8px; line-height: 30px; height: 30px; vertical-align: middle; text-align: center; overflow: hidden; } .web button.button-font-icon, .app button.button-font-icon { height: 32px; } .web button.navTOC, .app button.navTOC, .web div.navTOC, .app div.navTOC, .web a.pagesButton, .app a.pagesButton, .web button.pagesButton, .app button.pagesButton, .web a.articlesButton, .app a.articlesButton, .web button.articlesButton, .app button.articlesButton, .web button.shareBtn, .app button.shareBtn, .web button.shareButton, .app button.shareButton, .web button#articleZoomButton, .app button#articleZoomButton, .web button.feedbackLink, .app button.feedbackLink, .web button#skipToContentButton, .app button#skipToContentButton, .web div#backButton, .app div#backButton, .web a#backToSearchButton, .app a#backToSearchButton, .web a#homeButton, .app a#homeButton { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: #006adb; } .web button.navTOC.inactive, .app button.navTOC.inactive, .web div.navTOC.inactive, .app div.navTOC.inactive, .web a.pagesButton.inactive, .app a.pagesButton.inactive, .web button.pagesButton.inactive, .app button.pagesButton.inactive, .web a.articlesButton.inactive, .app a.articlesButton.inactive, .web button.articlesButton.inactive, .app button.articlesButton.inactive, .web button.shareBtn.inactive, .app button.shareBtn.inactive, .web button.shareButton.inactive, .app button.shareButton.inactive, .web button#articleZoomButton.inactive, .app button#articleZoomButton.inactive, .web button.feedbackLink.inactive, .app button.feedbackLink.inactive, .web button#skipToContentButton.inactive, .app button#skipToContentButton.inactive, .web div#backButton.inactive, .app div#backButton.inactive, .web a#backToSearchButton.inactive, .app a#backToSearchButton.inactive, .web a#homeButton.inactive, .app a#homeButton.inactive { color: #cccccc; border-color: #cccccc; cursor: default; } .web button.navTOC.inactive :before, .app button.navTOC.inactive :before, .web div.navTOC.inactive :before, .app div.navTOC.inactive :before, .web a.pagesButton.inactive :before, .app a.pagesButton.inactive :before, .web button.pagesButton.inactive :before, .app button.pagesButton.inactive :before, .web a.articlesButton.inactive :before, .app a.articlesButton.inactive :before, .web button.articlesButton.inactive :before, .app button.articlesButton.inactive :before, .web button.shareBtn.inactive :before, .app button.shareBtn.inactive :before, .web button.shareButton.inactive :before, .app button.shareButton.inactive :before, .web button#articleZoomButton.inactive :before, .app button#articleZoomButton.inactive :before, .web button.feedbackLink.inactive :before, .app button.feedbackLink.inactive :before, .web button#skipToContentButton.inactive :before, .app button#skipToContentButton.inactive :before, .web div#backButton.inactive :before, .app div#backButton.inactive :before, .web a#backToSearchButton.inactive :before, .app a#backToSearchButton.inactive :before, .web a#homeButton.inactive :before, .app a#homeButton.inactive :before { color: #cccccc; border-color: #cccccc; cursor: default; } .web button.navTOC.inactive .desktop-button-text, .app button.navTOC.inactive .desktop-button-text, .web div.navTOC.inactive .desktop-button-text, .app div.navTOC.inactive .desktop-button-text, .web a.pagesButton.inactive .desktop-button-text, .app a.pagesButton.inactive .desktop-button-text, .web button.pagesButton.inactive .desktop-button-text, .app button.pagesButton.inactive .desktop-button-text, .web a.articlesButton.inactive .desktop-button-text, .app a.articlesButton.inactive .desktop-button-text, .web button.articlesButton.inactive .desktop-button-text, .app button.articlesButton.inactive .desktop-button-text, .web button.shareBtn.inactive .desktop-button-text, .app button.shareBtn.inactive .desktop-button-text, .web button.shareButton.inactive .desktop-button-text, .app button.shareButton.inactive .desktop-button-text, .web button#articleZoomButton.inactive .desktop-button-text, .app button#articleZoomButton.inactive .desktop-button-text, .web button.feedbackLink.inactive .desktop-button-text, .app button.feedbackLink.inactive .desktop-button-text, .web button#skipToContentButton.inactive .desktop-button-text, .app button#skipToContentButton.inactive .desktop-button-text, .web div#backButton.inactive .desktop-button-text, .app div#backButton.inactive .desktop-button-text, .web a#backToSearchButton.inactive .desktop-button-text, .app a#backToSearchButton.inactive .desktop-button-text, .web a#homeButton.inactive .desktop-button-text, .app a#homeButton.inactive .desktop-button-text { color: #cccccc; border-color: #cccccc; cursor: default; } .web button.shareBtn, .app button.shareBtn { right: 60px; } .web a.pagesButton, .app a.pagesButton { right: 110px; } .web button.navTOC, .app button.navTOC { right: 10px; } .web { /* only visible on web, min-width > 1024 */ } .web button#skipToContentButton, .web a#homeButton, .web button.feedbackLink, .web button#articleZoomButton, .web a.pagesButton, .web a.articlesButton, .web button.shareBtn, .web button.shareButton, .web button.downloadButton, .web button.printButton, .web button.navTOC, .web a#backToSearchButton { border: 1px solid #006adb; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .web .shareButton { display: none; } .web #printDownloadWrapper { display: flex; flex-direction: row; justify-content: center; } .web #printDownloadWrapper .downloadButton, .web #printDownloadWrapper .printButton { display: flex; margin: 0 3% 3% 3%; align-items: center; justify-content: center; text-align: center; } .web #printDownloadWrapper .downloadButton i, .web #printDownloadWrapper .printButton i { display: inline-block; font-size: 1.25rem; font-family: fontAwesome; font-style: normal; padding: 0 5px; } .web #printDownloadWrapper.button-count-0 { display: none; } .web #printDownloadWrapper.button-count-1 .printButton, .web #printDownloadWrapper.button-count-1 .downloadButton { width: 100%; } .web #printDownloadWrapper.button-count-2 .printButton { width: 50%; border-radius: 5px 0 0 5px; margin-right: 0; } .web #printDownloadWrapper.button-count-2 .downloadButton { width: 50%; border-radius: 0 5px 5px 0; margin-left: 0; border-left: 0; } body[data-replica=false] #mobileWebreaderFooterNavbar .pagesButton, body[data-replica=false] #mobileWebreaderNavbar .pagesButton { display: none; } /* ***** DESKTOP BUTTONS - END ***** */ #headerLogo { display: block; margin-left: auto; margin-right: auto; text-align: center; } #headerLogo a { display: block; } #headerLogo #headerLogoImage { display: block; width: 160px; height: 24px; margin-top: 12px; margin-left: auto; margin-right: auto; background: url(../../include/icons/iphone/logo.png); background-size: contain; background-repeat: no-repeat; background-position: center; } @media screen and (max-width: 400px) { #backButton { padding-left: 0.75rem; } } @font-face { font-family: 'share-icons'; src: url('/fonts/custom_editions/share-icons.ttf?iyl8df') format('truetype'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: 'share-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 0; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #headerLogo.hideTOChideShare > .shareBtn, #headerLogo.showTOChideShare > .shareBtn { display: none; } #headerLogo.hideTOCshowShare > .shareBtn { right: 10px; } #headerLogo.showTOCshowShare > .shareBtn { right: 97px; } #headerLogo.hideTOChideShare > .navTOC, #headerLogo.hideTOCshowShare > .navTOC { display: none; } #headerLogo.showTOChideShare > .navTOC { right: 10px; } #headerLogo.showTOCshowShare > .navTOC { right: 10px; } /* Previous/next stuff */ #pageBackButton, #pageForwardButton { position: absolute; top: 48px; bottom: 48px; width: 2.25rem; z-index: 2010; } #pageBackButton.disabled, #pageForwardButton.disabled { display: none; } #pageBack, #pageForward { position: absolute; bottom: 0; top: 0; width: 2.25rem; } #pageBack p, #pageForward p, #pageBack img, #pageForward img { position: absolute; bottom: 0; display: none; width: 15px; } #pageBackButton, #pageBack { left: 0; } #pageForwardButton, #pageForward { right: 0; } #pageBottom, #pageTop { display: none; } /* FULL PAGE ADS */ .ad .articleContent > div { width: 100%; height: 100%; } /* size specification is overkill, but just in case... */ .fullPageAd { width: 100%; height: 100%; max-width: 100%; max-height: 100%; border: 0; } @media screen and (max-width: 400px) { #pageBack, #pageForward { width: 0.75rem; } } /* Loader stuff */ #pageLoader { z-index: 10; position: absolute; background: #ffffff; top: 48px; bottom: 0; } #pageLoader p { color: #333333; font: normal 1em "Avenir-Book", Helvetica Neue, Helvetica, Arial, sans-serif; border: 1px solid #006adb; padding: 5px; text-indent: 0; } #pageLoader .articleTitle { color: #333333; font: normal 2.25em "Avenir-Black", "HelveticaNeue-Bold", Helvetica, Arial, sans-serif; border: 0; padding-left: 2.25rem; padding-right: 2.25rem; } #loadingArticleTitle { text-align: center; } .isLoading { text-align: center; width: 100%; height: 100%; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */ /* // 2009 spec display: -webkit-box; display: -moz-box; display: -ms-box; display: -o-box; display: box; // // tweener -ms- spec // display: -webkit-flexbox; // display: -moz-flexbox; display: -ms-flexbox; // display: -o-flexbox; // display: flexbox; // 2013 spec display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;*/ -ms-box-orient: vertical; -o-box-orient: vertical; box-orient: vertical; -moz-flex-direction: column; -o-flex-direction: column; -webkit-lines: single; -webkit-box-lines: single; -moz-box-lines: single; -ms-box-lines: single; -o-box-lines: single; box-lines: single; -moz-flex-wrap: nowrap; -o-flex-wrap: nowrap; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; -ms-box-align: center; -o-box-align: center; box-align: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -moz-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -moz-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background-color: transparent; } @media screen and (max-width: 400px) { #pageLoader .articleTitle { font-size: 1.5em; text-align: center; } } #articlePageView { margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; text-shadow: none; overflow: hidden; position: absolute; } /* Wrapper stuff */ #wrapper { width: 100%; height: 100%; margin-left: auto; margin-right: auto; } .articleContainer.layout_verticalScroll { position: absolute; width: 100%; top: 48px; bottom: 48px; left: 0; padding: 0; margin: 0; overflow: hidden; } .articleContent, article { height: 100%; } .scrollContainer { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; margin: 0; padding: 0; } /* === Article TOC List (QuickNav Jr.) === */ #content-area-wrapper { width: 100%; position: absolute; top: 49px; bottom: 49px; display: flex; flex-direction: column; justify-content: center; align-items: center; } #content-area-wrapper #leaderboard-ad-block, #content-area-wrapper #banner-ad-block { background: transparent; } #content-area-wrapper #wrapper { position: relative; flex: 1; margin: 0; height: 100%; } #content-area-wrapper #wrapper .articleContainer.layout_verticalScroll { top: 0; bottom: 0; } #scrollWrapper { position: relative; flex: 1; overflow-x: hidden; overflow-y: scroll; padding: 0; padding-top: 4px; margin: 0; font-family: 'Helvetica Neue', 'Tahoma', 'Segoe UI', 'Calibri', Helvetica, sans-serif; font-size: 0.775rem; color: #333333; } .downloadButton .desktop-button-text { display: inline-block; /* always display button text for download */ } /* CSS loader from cssload.net */ .floatingCirclesG { position: absolute; top: 50%; left: 50%; width: 128px; height: 128px; -webkit-transform: scale(0.8) translate(-50%, -50%); transform: scale(0.8) translate(-50%, -50%); margin: 0 auto; } .f_circleG { position: absolute; background-color: #FFFFFF; height: 23px; width: 23px; -webkit-border-radius: 12px; -webkit-animation-name: f_fadeG; -webkit-animation-duration: 1.28s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; border-radius: 12px; animation-name: f_fadeG; animation-duration: 1.28s; animation-iteration-count: infinite; animation-direction: normal; } .f_circleG.frotateG_01 { left: 0; top: 52px; -webkit-animation-delay: 0.48s; animation-delay: 0.48s; } .f_circleG.frotateG_02 { left: 15px; top: 15px; -webkit-animation-delay: 0.64s; animation-delay: 0.64s; } .f_circleG.frotateG_03 { left: 52px; top: 0; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .f_circleG.frotateG_04 { right: 15px; top: 15px; -webkit-animation-delay: 0.96s; animation-delay: 0.96s; } .f_circleG.frotateG_05 { right: 0; top: 52px; -webkit-animation-delay: 1.12s; animation-delay: 1.12s; } .f_circleG.frotateG_06 { right: 15px; bottom: 15px; -webkit-animation-delay: 1.28s; animation-delay: 1.28s; } .f_circleG.frotateG_07 { left: 52px; bottom: 0; -webkit-animation-delay: 1.44s; animation-delay: 1.44s; } .f_circleG.frotateG_08 { left: 15px; bottom: 15px; -webkit-animation-delay: 1.6s; animation-delay: 1.6s; } @-webkit-keyframes f_fadeG { 0% { background-color: #666666; } 100% { background-color: #ffffff; } } @keyframes f_fadeG { 0% { background-color: #666666; } 100% { background-color: #ffffff; } } .iframeWrapper { width: 100%; height: 100%; } .adWrapper { width: 100%; height: 100%; overflow: hidden; } .adClickHandler { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .app #articlePageView .swipeCue { display: none; } .web .shareBtn, .web #backButton { display: none; } .web #pageButtons .button-font-icon { margin-left: 2px; } .web #mobileWebreaderNavbar { right: 10px; top: 7px; margin: 0; padding: 0; } .web #mobileWebreaderNavbar i { padding: 12px 10px; } .web #mobileWebreaderNavbar .button-font-icon { margin-left: 0; } .web .social-networks { position: fixed; top: 51px; right: 10px; display: block; border: 1px solid #006adb; padding: 8px 12px; background-color: #EEEEEE; z-index: 20000; line-height: 0; } .web .social-networks:before { content: ""; position: absolute; top: -14px; border-width: 0 8px 15px; border-style: solid; border-color: #006adb transparent; } .web .social-networks:after { content: ""; position: absolute; top: -12px; border-width: 0 7px 13px; border-style: solid; border-color: #EEEEEE transparent; } .web .social-networks ul.social-buttons { list-style: none; padding: 0; margin: 0; line-height: 0; } .web .social-networks ul.social-buttons li { display: inline-block; padding: 0; margin: 0; text-align: center; } .web .social-networks ul.social-buttons li .social-button { display: inline-block; } .web .social-networks ul.social-buttons img { width: 32px; } .web #articlePageView .social-networks:before { left: 65px; } .web #articlePageView .social-networks:after { left: 66px; } .web #replicaPageView .social-networks:before { left: 40px; } .web #replicaPageView .social-networks:after { left: 41px; } .web .swipeCue { position: absolute; display: block; top: 50%; background: rgba(0, 0, 0, 0.3); overflow: hidden; padding: 2px; padding-top: 4px; padding-bottom: 0; width: 32px; height: 3.0rem; font-size: 3.0rem; line-height: 3.125rem; color: #fff; cursor: pointer; } .web .swipeCue.swipeLeft { left: 0; float: left; border-width: 0; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 0; -webkit-border-top-left-radius: 0; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 0; -moz-border-radius-topleft: 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 0; border-top-left-radius: 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .web .swipeCue.swipeLeft .fa-chevron-left { position: absolute; left: -2px; top: 4px; } .web .swipeCue.swipeRight { right: 0; float: right; border-width: 0; -webkit-border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topright: 0; -moz-border-radius-bottomright: 0; -moz-border-radius-bottomleft: 5px; -moz-border-radius-topleft: 5px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 5px; border-top-left-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .web .swipeCue.swipeRight .fa-chevron-right { position: absolute; right: -2px; top: 4px; } .web .swipeCue.disabled { display: none; } .web .articleContent .swipeCue { display: none; } .web .articleContent a:hover, .web .articleContent a:focus { font-weight: bold; text-decoration: underline; } .web .custom_edition #wrapper { height: 100%; } /* for both web and mobile */ #zoom-levels { display: none; /* default on start */ justify-content: center; position: fixed; opacity: 0; top: auto; bottom: 49px; right: 0; border: none; padding: 0; background-color: transparent; width: 100%; text-align: center; } #zoom-levels.active { display: block; z-index: 10000; /* go above the toc */ opacity: 0; /* initial value; reset through javascript */ } #zoom-levels .group-buttons { display: flex; flex-direction: row; justify-content: center; list-style: none; padding: 0; margin: 0 auto; line-height: 0; width: 100%; max-width: 775px; background-color: #FFF; } #zoom-levels .group-buttons .zoom-button { flex: 1; align-items: center; justify-content: center; text-align: center; padding: 3px 0 0 0; margin: 0; cursor: pointer; border-color: #d8d8d8; border-width: 1px 1px 0 0; border-style: solid; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } #zoom-levels .group-buttons .zoom-button:first-child { border-left: 1px solid #d8d8d8; } #zoom-levels .group-buttons .zoom-button .icon-text-zoom { line-height: 1; } #zoom-levels .group-buttons .zoom-button .icon-text-zoom:before { display: block; } #zoom-levels .group-buttons .zoom-button[data-zoom-level="0"] .icon-text-zoom:before { font-size: 1.0rem; } #zoom-levels .group-buttons .zoom-button[data-zoom-level="1"] .icon-text-zoom:before { font-size: 1.25rem; } #zoom-levels .group-buttons .zoom-button[data-zoom-level="2"] .icon-text-zoom:before { font-size: 1.625rem; } #zoom-levels .group-buttons .zoom-button[data-zoom-level="3"] .icon-text-zoom:before { font-size: 2.125rem; } #zoom-levels .group-buttons .zoom-button[data-zoom-level="4"] .icon-text-zoom:before { font-size: 2.75rem; } #zoom-levels .group-buttons img { width: 32px; } .desktop-button-text { display: none; /* for most buttons, display in desktop view */ padding-left: 4px; font-family: 'Helvetica Neue', 'Tahoma', 'Segoe UI', 'Calibri', Helvetica, sans-serif; font-size: 1.0rem; overflow: hidden; } /* Replica Page links; by default, turned off for both mobile and desktop (desktop defined below) */ #zoomHolder .page-link-block .page-link-underline, #replicaPageView .page-link-block .page-link-underline { display: none; opacity: 1; border-bottom-width: 1px; border-bottom-color: #006adb; border-bottom-style: solid; } .web .navTOC .desktop-button-text .opened { display: none; } .web .navTOC .desktop-button-text .closed { display: inline-block; } .web .tocVisible .navTOC .desktop-button-text .opened { display: inline-block; } .web .tocVisible .navTOC .desktop-button-text .closed { display: none; } @media screen and (min-width: 1025px) { .web #mobileWebreaderNavbar .navTOC { display: none; } .web .navTOC.desktop { position: absolute; transform: rotate(270deg); transform-origin: right bottom; width: 126px; height: 33px; right: 0; top: 15px; padding-top: 6px; margin: 0; z-index: 3020; border: 1px solid #ccc; border-bottom: none; border-radius: 10px 10px 0 0; cursor: pointer; background-color: #f1f1f1; } .web .navTOC.desktop .desktop-button-text { padding: 3px; font-size: 0.875rem; } .web .navTOC.desktop .icon-contents { transform: rotate(90deg); transform-origin: center; vertical-align: initial; padding: 0; margin: 0; color: #006adb; background-color: #f1f1f1; height: 20px; line-height: 20px; } .web .navTOC.desktop .icon-contents:before { font-size: 0.875rem; } .web .tocVisible #replicaTOC, .web .tocVisible #articleTOC { right: 0; } .web .tocVisible .navTOC.desktop { right: 341px; } .web .tocVisible#replicaPageView #leaderboardAdBlock, .web .tocVisible .articleContainer .articleContent, .web .tocVisible #leaderboard-ad-block { padding-right: 342px; } .web .tocVisible #banner-ad-block .ad-components { margin-right: 342px; } .web .tocVisible #pageForwardButton { right: 342px; } .web .tocVisible #zoom-levels { right: 171px; } .web .shareButton { display: inline-block; } .web #wrapper.article-swipeview-wrapper { margin: 0; } .web #mobileWebreaderFooterNavbar { margin-right: 342px; /* leave space for support box */ justify-content: flex-end; padding-right: 3px; padding-left: 3px; width: auto; } .web #mobileWebreaderFooterNavbar .shareButton, .web #mobileWebreaderFooterNavbar .social-networks, .web #mobileWebreaderFooterNavbar .articlesButton, .web #mobileWebreaderFooterNavbar .pagesButton { display: none; } .web #mobileWebreaderFooterNavbar .footerNavButton { flex-direction: row; } .web #mobileWebreaderFooterNavbar .footerNavButton .icon-text-zoom { display: flex; flex-direction: row; border: 1px solid #006adb; border-radius: 5px; } .web #mobileWebreaderFooterNavbar .footerNavButton .desktop-button-text { display: flex; flex-direction: column; justify-content: center; } .web #mobileWebreaderFooterNavbar #articleZoomButton { margin-right: 3px; } .web .desktop-button-text { display: inline-block; } .web .social-networks.active { display: block; } .web .button-font-icon { font-size: 0.25rem; } .web .button-font-icon:before { height: 28px; } .web #replicaPageView .page-link-block .page-link-underline { display: none; opacity: 1; } } /* Figure/Image classes; selected in article editor */ figure.max-100-pct, img.max-100-pct { max-width: 100%; } figure.max-70-pct, img.max-70-pct { max-width: 70%; } figure.max-50-pct, img.max-50-pct { max-width: 50%; } figure.max-30-pct, img.max-30-pct { max-width: 30%; } figure.align-center.max-100-pct, img.align-center.max-100-pct, figure.align-center.max-70-pct, img.align-center.max-70-pct, figure.align-center.max-50-pct, img.align-center.max-50-pct, figure.align-center.max-30-pct, img.align-center.max-30-pct { float: none; text-align: center; margin-left: auto; margin-right: auto; } figure.align-center.max-100-pct > img, img.align-center.max-100-pct > img, figure.align-center.max-70-pct > img, img.align-center.max-70-pct > img, figure.align-center.max-50-pct > img, img.align-center.max-50-pct > img, figure.align-center.max-30-pct > img, img.align-center.max-30-pct > img, figure.align-center.max-100-pct > .imgwrap, img.align-center.max-100-pct > .imgwrap, figure.align-center.max-70-pct > .imgwrap, img.align-center.max-70-pct > .imgwrap, figure.align-center.max-50-pct > .imgwrap, img.align-center.max-50-pct > .imgwrap, figure.align-center.max-30-pct > .imgwrap, img.align-center.max-30-pct > .imgwrap { display: inline-block; } figure.align-left.max-100-pct, img.align-left.max-100-pct, figure.align-left.max-70-pct, img.align-left.max-70-pct, figure.align-left.max-50-pct, img.align-left.max-50-pct, figure.align-left.max-30-pct, img.align-left.max-30-pct { float: left; margin: 0.5em 1em 0.5em 0; } figure.align-right.max-100-pct, img.align-right.max-100-pct, figure.align-right.max-70-pct, img.align-right.max-70-pct, figure.align-right.max-50-pct, img.align-right.max-50-pct, figure.align-right.max-30-pct, img.align-right.max-30-pct { float: right; margin: 0.5em 0 0.5em 1em; } @media screen and (max-width: 480px) { figure.max-30-pct, img.max-30-pct { max-width: 50%; /* ensure image doesn't get too small on phone */ } figure.align-left.max-100-pct, img.align-left.max-100-pct, figure.align-right.max-100-pct, img.align-right.max-100-pct, figure.align-left.max-70-pct, img.align-left.max-70-pct, figure.align-right.max-70-pct, img.align-right.max-70-pct { /* center above text in phone */ float: none; text-align: center; margin-left: auto; margin-right: auto; } figure.align-left.max-100-pct > img, img.align-left.max-100-pct > img, figure.align-right.max-100-pct > img, img.align-right.max-100-pct > img, figure.align-left.max-70-pct > img, img.align-left.max-70-pct > img, figure.align-right.max-70-pct > img, img.align-right.max-70-pct > img, figure.align-left.max-100-pct > .imgwrap, img.align-left.max-100-pct > .imgwrap, figure.align-right.max-100-pct > .imgwrap, img.align-right.max-100-pct > .imgwrap, figure.align-left.max-70-pct > .imgwrap, img.align-left.max-70-pct > .imgwrap, figure.align-right.max-70-pct > .imgwrap, img.align-right.max-70-pct > .imgwrap { display: inline-block; } } /* Mobile Webreader Footer Nav */ #mobileWebreaderFooterNavbar { background-color: #fff; display: flex; align-items: center; margin-left: auto; z-index: 10000; /* Share Icons for app ios and android */ /* trigger show/hide of buttons dependent on platform=android default is show IOS button and hide android button see body[data-platform=android] */ } #mobileWebreaderFooterNavbar .footerNavButton, #mobileWebreaderFooterNavbar #articleZoomButton { display: flex; justify-content: center; text-align: center; align-items: center; position: static; margin: 0; } #mobileWebreaderFooterNavbar #shareIOS .desktop-button-text, #mobileWebreaderFooterNavbar #shareAndroid .desktop-button-text { line-height: 12px; } #mobileWebreaderFooterNavbar #shareAndroid { display: none; } #mobileWebreaderFooterNavbar #shareIOS { display: flex; } #mobileWebreaderFooterNavbar .icon-share-android:before { content: "\e601"; font-size: 25px; /* fixed size font for mobile button */ } #mobileWebreaderFooterNavbar .icon-share-ios:before { content: "\e600"; font-size: 23px; /* fixed size font for mobile button */ height: 26px; } #mobileWebreaderFooterNavbar .footerNavButton:last-child, #mobileWebreaderFooterNavbar #replicaPageView .footerNavButton:last-child, #mobileWebreaderFooterNavbar .footerNavButton .shareBtn { border: none; } #mobileWebreaderFooterNavbar .footerNavButton.supportIcon, #mobileWebreaderFooterNavbar #replicaPageView span.supportIcon { background-color: #006adb; color: #fff; flex: 1; text-align: center; font-size: 1.8em; } #mobileWebreaderFooterNavbar .desktop-button-text { line-height: 13px; font-family: 'Helvetica Neue', 'Tahoma', 'Segoe UI', 'Calibri', Helvetica, sans-serif; display: block; } body[data-platform=android] #mobileWebreaderFooterNavbar #shareIOS { display: none; } body[data-platform=android] #mobileWebreaderFooterNavbar #shareAndroid { display: flex; } /* * Mercury search (for ToC search which isn't present in the regular turnstyle) */ /* Mobile Cover for page when toc is visible */ #offTOC { position: fixed; display: none; top: 49px; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.8); padding-top: 20px; z-index: 2500; } #tocSearch { width: 100%; height: 64px; text-align: right; margin: 0 auto; padding-top: 6px; padding-left: 3%; padding-right: 3%; box-sizing: border-box; position: relative; z-index: 10; } #tocSearch.app { /* Search All Issues link doesn't show in the app, so reduce height */ height: 50px; } /* === Search Field === */ .searchFieldWrapper { width: 100%; display: flex; flex-direction: row; } #searchField { flex: 1; display: inline-block; height: 30px; -webkit-appearance: inherit; padding: 6px 6px 6px 10px; box-sizing: border-box; border-radius: 5px; border: 1px solid #aaa; font-size: 16px; /* fixed size font for mobile; iphone search box needs font-size to be 16px */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } #searchField:focus { outline: none; box-shadow: none; } .issueTitle { display: none; } .show-first-search-result, #cancelSearch { flex: 0 0 42px; display: inline-block; cursor: pointer; padding: 0 6px; margin-left: 6px; background-color: transparent; color: #006adb; font-size: 0.875rem; font-weight: bold; height: 30px; border: 1px solid #006adb; border-radius: 5px; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .show-first-search-result.noresults, #cancelSearch.noresults { color: #999; border-color: #ccc; cursor: default; } .toc-link { font-size: 0.75rem; padding-top: 6px; padding-right: 6px; display: inline-block; } #singleArticleSearchResults { position: absolute; display: none; top: 64px; left: 0; right: 0; height: 35px; z-index: 7; overflow: hidden; margin: 0; background-color: #f1f1f1; font-family: 'Helvetica Neue', 'Tahoma', 'Segoe UI', 'Calibri', Helvetica, sans-serif; font-size: 0.775rem; color: #333333; } #singleArticleSearchResults .headline { font-family: 'Helvetica Neue', 'Tahoma', 'Segoe UI', 'Calibri', Helvetica, sans-serif; font-weight: normal; font-size: 1.085rem; color: #333333; margin: 0 3% 3% 3%; text-align: center; } #searchResults { position: absolute; display: none; top: 64px; left: 0; right: 0; bottom: 0; z-index: 7; overflow: scroll; padding-top: 6px; margin: 0; background-color: #f1f1f1; font-family: 'Helvetica Neue', 'Tahoma', 'Segoe UI', 'Calibri', Helvetica, sans-serif; font-size: 0.775rem; color: #333333; } #searchResults section#results { overflow: visible; } #searchResults a.adLink { display: block; text-align: center; } #searchResults .tocArticle { width: auto; } #searchResults .headline { font-family: 'Helvetica Neue', 'Tahoma', 'Segoe UI', 'Calibri', Helvetica, sans-serif; font-weight: normal; font-size: 1.085rem; color: #333333; margin: 0 3% 3% 3%; text-align: center; } #searchResults .search-entry { cursor: pointer; overflow-y: hidden; text-align: left; } #searchResults .search-entry.small { height: 4.925rem; min-height: 4.925rem; max-height: 5.925rem; padding: 8px; margin-bottom: 0; } #searchResults .search-entry .search-entry-image { margin: -8px -8px -8px 8px; height: 5.925rem; max-height: none; float: right; max-width: 25%; overflow: hidden; } #searchResults .search-entry .search-entry-contents { height: 4.925rem; overflow: hidden; } #searchResults .search-entry .search-entry-contents .search-entry-title, #searchResults .search-entry .search-entry-contents .search-entry-doc-title { font-family: 'Helvetica Neue', 'Tahoma', 'Segoe UI', 'Calibri', Helvetica, sans-serif; font-size: 1.0rem; color: #000000; font-weight: normal; line-height: 1.2rem; } #searchResults .search-entry .search-entry-contents .search-entry-details { font-family: HelveticaNeue-Light, 'Helvetica Neue', 'Tahoma', 'Segoe UI', 'Calibri', Helvetica, sans-serif; font-size: 0.8rem; font-weight: normal; color: #333333; text-align: left; line-height: 1.2rem; margin-top: 2px; max-height: 4.8rem; overflow: hidden; } #articleTOC, #replicaTOC { visibility: hidden; position: absolute; top: 48px; bottom: 49px; right: -322px; background-color: #f1f1f1; font-family: 'Helvetica Neue', 'Tahoma', 'Segoe UI', 'Calibri', Helvetica, sans-serif; width: 340px; max-width: 100%; display: flex; flex-direction: column; margin-top: 0; border: 1px solid #ccc; z-index: 3000; } .toc_entry { display: block; margin: 0 3% 3% 3%; } /* * Article TOC */ #articleTOC article.box.small { box-sizing: border-box; height: 90px; } #articleTOC .tocArticle { width: auto; cursor: pointer; } #articleTOC .tocArticle.box { margin-bottom: 0; /* override default; apply margin to toc_entry */ } #articleTOC .tocArticle[data-id="cover"] { /* don't show MWR's injected turnstyle covers */ display: none; } #articleTOC .toc_entry.disabled { opacity: 0.8; cursor: default; } #articleTOC .toc_entry.disabled .articlePic { opacity: 0.5; } #articleTOC img.ad { display: block; max-width: 100%; margin: 0 auto 3% auto; height: auto; } #articleTOC #scrollWrapper div#tocArticles, #articleTOC #searchResults div#tocArticles { overflow: visible; } #articleTOC #scrollWrapper .tocArticle, #articleTOC #searchResults .tocArticle { overflow: hidden; } #articleTOC #scrollWrapper .tocArticle .articleTitle, #articleTOC #searchResults .tocArticle .articleTitle { font-family: 'Helvetica Neue', 'Tahoma', 'Segoe UI', 'Calibri', Helvetica, sans-serif; font-size: 0.90675rem; color: #333333; font-weight: normal; line-height: 1.2rem; } #articleTOC #scrollWrapper .tocArticle .articleContents, #articleTOC #searchResults .tocArticle .articleContents { height: 4.925rem; overflow: hidden; } #articleTOC #scrollWrapper .tocArticle .articleContents .articleDetails, #articleTOC #searchResults .tocArticle .articleContents .articleDetails { font-family: HelveticaNeue-Light, 'Helvetica Neue', 'Tahoma', 'Segoe UI', 'Calibri', Helvetica, sans-serif; font-size: 0.775rem; color: #333333; line-height: 1.2rem; margin-top: 2px; max-height: 4.8rem; overflow: hidden; font-weight: normal; } #articleTOC #scrollWrapper .tocArticle.small, #articleTOC #searchResults .tocArticle.small { height: 4.925rem; min-height: 4.925rem; max-height: 5.925rem; padding: 8px; } #articleTOC #scrollWrapper .tocArticle.small .articlePic, #articleTOC #searchResults .tocArticle.small .articlePic { margin: -8px -8px -8px 8px; height: 5.925rem; max-height: none; overflow: hidden; } #articleTOC #scrollWrapper .tocArticle.big, #articleTOC #searchResults .tocArticle.big { padding: 0; } #articleTOC #scrollWrapper .tocArticle.big .articlePic, #articleTOC #searchResults .tocArticle.big .articlePic { margin: 0 0 -3px 0; width: 100%; display: block; overflow: hidden; } #articleTOC #scrollWrapper .tocArticle.big .articleTitle, #articleTOC #searchResults .tocArticle.big .articleTitle { margin: 8px; } #articleTOC #scrollWrapper .tocArticle.selected, #articleTOC #searchResults .tocArticle.selected { background-color: #006adb; } #articleTOC #scrollWrapper .tocArticle.selected .articleTitle, #articleTOC #searchResults .tocArticle.selected .articleTitle { color: #ffffff; } #articleTOC #scrollWrapper .tocArticle.selected .articleDetails, #articleTOC #searchResults .tocArticle.selected .articleDetails { color: #ffffff; } #articleTOC #searchResults.app { top: 50px; } /* document-style toc definitions */ #articleTOC.document-toc #scrollWrapper { margin: 0 3%; padding: 0; background-color: #ffffff; /* Define border styles for document-toc-group separately to better manage different conditions */ } #articleTOC.document-toc #scrollWrapper .document-toc-group { font-family: "Open Sans", sans-serif; margin-bottom: 3%; overflow: hidden; } #articleTOC.document-toc #scrollWrapper .document-toc-group .toc_entry { display: block; margin: 0; padding: 1.4% 1%; width: auto; } #articleTOC.document-toc #scrollWrapper .document-toc-group .toc_entry.selected { background-color: #f0fffc; } #articleTOC.document-toc #scrollWrapper .document-toc-group .document-toc-top-group { display: flex; height: auto; } #articleTOC.document-toc #scrollWrapper .document-toc-group .document-toc-top-group.selected { background-color: #f0fffc; } #articleTOC.document-toc #scrollWrapper .document-toc-group .document-toc-top-group .toc-level-1 { flex: 1; font-weight: 700; font-size: 1.2em; } #articleTOC.document-toc #scrollWrapper .document-toc-group .document-toc-top-group .toc-level-1 .tocArticle { padding-top: 0; } #articleTOC.document-toc #scrollWrapper .document-toc-group .document-toc-top-group .toc-open-close-entry { flex: 0; height: 16px; width: 16px; padding: 0; margin: 2%; background-color: transparent; border: 0; cursor: pointer; } #articleTOC.document-toc #scrollWrapper .document-toc-group .document-toc-top-group .toc-open-close-entry::before { font-family: fontAwesome; font-weight: normal; font-style: normal; text-rendering: auto; font-size: 16px; } #articleTOC.document-toc #scrollWrapper .document-toc-group .document-toc-bottom-group { height: auto; overflow: hidden; } #articleTOC.document-toc #scrollWrapper .document-toc-group .document-toc-bottom-group .toc-level-2 { padding-left: 14%; font-weight: 600; font-size: 1.1em; } #articleTOC.document-toc #scrollWrapper .document-toc-group .document-toc-bottom-group .toc-level-3 { padding-left: 22%; font-weight: 400; font-size: 1em; } #articleTOC.document-toc #scrollWrapper .document-toc-group.opened .toc-open-close-entry::before { content: "\f147"; } #articleTOC.document-toc #scrollWrapper .document-toc-group.closed .document-toc-bottom-group { height: 0; display: none; } #articleTOC.document-toc #scrollWrapper .document-toc-group.closed .toc-open-close-entry::before { content: "\f196"; } #articleTOC.document-toc #scrollWrapper .document-toc-group.no-htags .toc-level-1 { padding-left: 9%; } #articleTOC.document-toc #scrollWrapper .document-toc-group.single .toc-level-1 { padding-left: 3%; } #articleTOC.document-toc #scrollWrapper .document-toc-group.single .toc-level-2 { padding-left: 11%; } #articleTOC.document-toc #scrollWrapper .document-toc-group.single .toc-level-3 { padding-left: 19%; } #articleTOC.document-toc #scrollWrapper .document-toc-group { border-width: 1px; border-style: solid; border-color: transparent; border-radius: 3px; } #articleTOC.document-toc #scrollWrapper .document-toc-group.selected { border-color: #88c8d8; } #articleTOC.document-toc #scrollWrapper #tocArticles.num-toc-entries-1 .document-toc-group.selected { border: none; } /* * Replica TOC */ #replicaTOC #contentsWrapper { position: relative; flex: 1; width: auto; overflow-y: auto; padding: 0 3%; } #replicaTOC #replicaTOCList { background-color: #FFF; width: 100%; } #replicaTOC #replicaTOCList ol { list-style-type: none; padding: 0; } #replicaTOC #replicaTOCList > ol { /* top-level tag definition */ padding: 10px 12px; } #replicaTOC #replicaTOCList li { max-width: 300px; } #replicaTOC #replicaTOCList li a { font-weight: bold; } #replicaTOC #replicaTOCList li li a { font-weight: normal; } #replicaTOC #replicaTOCList .toc_link { position: relative; display: block; cursor: pointer; } #replicaTOC #replicaTOCList .toc_link:hover { background-color: #ffffcc; } #replicaTOC #replicaTOCList .toc_link.disabled { color: #767676; cursor: default; } #replicaTOC #replicaTOCList .page_start { position: absolute; overflow: hidden; left: 5px; width: 43px; white-space: nowrap; } #replicaTOC #replicaTOCList .toc_entry { margin-left: 5px; hyphens: manual; } #replicaTOC #replicaTOCList li li .toc_entry { margin-left: 50px; } @media screen and (max-width: 1024px) { #articleTOC, #replicaTOC { display: none; } } .tocVisible #replicaTOC, .tocVisible #articleTOC { right: 0; display: flex; } .mobileWebreaderSupportBlock { position: absolute; display: flex; align-items: center; box-sizing: border-box; z-index: 5100; /* needs to be more than 5000 to be on top of toc menu/cover/footer */ bottom: 0; right: 0; width: 342px; max-width: 100%; height: 49px; padding: 0; border-top: 1px solid #ccc; background-color: #fff; font-family: 'Helvetica Neue', 'Tahoma', 'Segoe UI', 'Calibri', Helvetica, sans-serif; text-align: left; } .mobileWebreaderSupportBlock .feedbackLink, .mobileWebreaderSupportBlock .poweredBy { display: block; } .mobileWebreaderSupportBlock .feedbackLink .desktop-button-text { display: inline-block; /* always display button text for feedback */ } .mobileWebreaderSupportBlock .privacyPolicy, .mobileWebreaderSupportBlock .poweredBy { font-size: 0.875em; color: #666; } .mobileWebreaderSupportBlock .privacyPolicy a, .mobileWebreaderSupportBlock .poweredBy a { font-weight: normal; } .mobileWebreaderSupportBlock .gtxcel-policy { margin-left: auto; margin-right: 10px; text-align: right; } /* display only on mobile */ .toc-wrapper .mobileWebreaderSupportBlock { display: none; } @media screen and (max-width: 1024px) { /* Hidden on smaller width; shown navTOC */ .navTOC.desktop { display: none; } #mobileWebreaderNavbar .articlesButton, #mobileWebreaderNavbar .pagesButton, #mobileWebreaderNavbar .shareButton { display: none; } #mobileWebreaderFooterNavbar { width: 100%; } #mobileWebreaderFooterNavbar .footerNavButton, #mobileWebreaderFooterNavbar #articleZoomButton { flex: 1; line-height: 1; height: 100%; flex-direction: column; border: none; border-right: 1px solid #bfbfbf; border-radius: 0; padding: 0; } #mobileWebreaderFooterNavbar .articlesButton, #mobileWebreaderFooterNavbar .pagesButton, #mobileWebreaderFooterNavbar .shareButton { display: flex; } #mobileWebreaderFooterNavbar #page-display-buttons { display: none; } .mobileWebreaderSupportBlock { display: none; } .tocVisible .toc-wrapper .mobileWebreaderSupportBlock { display: flex; } .web .social-networks { position: fixed; top: auto; bottom: 50px; right: 0; border: none; border-top: 1px solid #d8d8d8; padding: 0; background-color: #FFF; width: 100%; text-align: center; } .web .social-networks.active { display: block; } .web .social-networks .social-buttons { display: flex; flex-direction: row; justify-content: center; } .web .social-networks .social-buttons li { flex: 1; border-right: 1px solid #d8d8d8; padding: 10px 0 !important; } .web .social-networks:after, .web .social-networks:before { border-width: 0; border-color: transparent; } /* for buttons other than support button */ .web .button-font-icon, .app .button-font-icon { /* keep support button at default */ } .web .button-font-icon:before, .app .button-font-icon:before { height: 23px; } .web .button-font-icon.icon-feedback-link:before, .app .button-font-icon.icon-feedback-link:before { height: 28px; } .app div.navTOC { margin: 8px; } #backToSearchButton { width: 33px; height: 33px; } #backToSearchButton .desktop-button-text { display: none; } } /* ***** WEBREADER AD DEFINITIONS - START ***** */ /* Default: everything hidden */ .webreaderPhoneAdBlock, .webreaderTabletAdBlock, .webreaderDesktopAdBlock { display: none; } .webreaderPhoneAdBlock .webreaderPhoneAd, .webreaderTabletAdBlock .webreaderPhoneAd, .webreaderDesktopAdBlock .webreaderPhoneAd, .webreaderPhoneAdBlock .webreaderTabletAd, .webreaderTabletAdBlock .webreaderTabletAd, .webreaderDesktopAdBlock .webreaderTabletAd, .webreaderPhoneAdBlock .webreaderDesktopAd, .webreaderTabletAdBlock .webreaderDesktopAd, .webreaderDesktopAdBlock .webreaderDesktopAd { display: none; } /* webreader ad phone size */ @media screen and (max-width: 767px) { .webreaderPhoneAdBlock { display: block; } .webreaderPhoneAdBlock .webreaderPhoneAd { display: block; } } /* webreader ad tablet size */ @media screen and (min-width: 768px) and (max-width: 1024px) { .webreaderPhoneAdBlock, .webreaderTabletAdBlock { display: block; } .webreaderPhoneAdBlock .webreaderPhoneAd { display: block; } .webreaderTabletAdBlock .webreaderPhoneAd { display: none; } .webreaderTabletAdBlock .webreaderTabletAd { display: block; } } /* webreader ad desktop size */ @media screen and (min-width: 1025px) { .webreaderPhoneAdBlock, .webreaderTabletAdBlock, .webreaderDesktopAdBlock { display: block; } .webreaderPhoneAdBlock .webreaderPhoneAd { display: block; } .webreaderTabletAdBlock .webreaderPhoneAd { display: none; } .webreaderTabletAdBlock .webreaderTabletAd { display: block; } .webreaderDesktopAdBlock .webreaderPhoneAd, .webreaderDesktopAdBlock .webreaderTabletAd { display: none; } .webreaderDesktopAdBlock .webreaderDesktopAd { display: block; } } /* ***** WEBREADER AD DEFINITIONS - END ***** */ /* ***** WEBREADER VIDEO DEFINITIONS - START ***** */ /* additional: provide media queries for margin: 3em auto on desktop */ /* responsive styles are applied to embedded media in article/article editor */ div.responsive_16x9, div.responsive_16x10, div.responsive_4x3, div.responsive_3x2, .video-container { position: relative; height: 0; overflow: hidden; margin: 3em auto; } div.responsive_16x9 iframe, div.responsive_16x10 iframe, div.responsive_4x3 iframe, div.responsive_3x2 iframe, .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; } /* optional styles for video-container; required definitions for responsive styles padding bottom for responsive interaction */ div.responsive_16x9, .video-container-16x9 { padding-bottom: 56.25%; } div.responsive_4x3, .video-container-4x3 { padding-bottom: 75%; } div.responsive_3x2, .video-container-3x2 { padding-bottom: 66.7%; } div.responsive_16x10, .video-container-16x10 { padding-bottom: 62.5%; } @media screen and (min-width: 701px) { div.responsive_16x9, div.responsive_16x10, div.responsive_4x3, div.responsive_3x2, .video-container { margin: 2em auto; } } /* ***** WEBREADER VIDEO DEFINITIONS - END ***** */ /* ***** ARTICLE EXTRACTION VERSION 2 DEFINITIONS - START ***** */ /* ***** ARTICLE EXTRACTION VERSION 2 DEFINITIONS - END ***** */ /* navigation arrows */ .icon-previous-article-mobile, .icon-next-article-mobile { color: #006adb; } /* stylesheet for article-gallery template */ .article-gallery .flexslider { max-width: 500px; margin: 20px auto 30px auto; } .article-gallery .flexslider .flex-viewport { background-color: #333333; margin-right: -2px; margin-left: -2px; } .article-gallery .flexslider .slides { margin: 0px; } .article-gallery .flexslider .slides figure { margin: 0px; } .article-gallery .flexslider .slides figure img { width: auto; } .article-gallery .flexslider .slides figure p { color: #ffffff; padding: 10px 50px; margin-bottom: 15px; } .article-gallery .flexslider .custom-navigation { padding: 0px; margin: 0px; } .article-gallery .flexslider .custom-navigation li { /* override default */ margin: 0px; padding: 0px; } .article-gallery .flexslider .custom-navigation span.flex-prev, .article-gallery .flexslider .custom-navigation span.flex-next { position: absolute; cursor: pointer; z-index: 100; margin-top: 0; top: 0; width: 44px; padding-top: 30%; height: 45%; line-height: 45%; opacity: 1; } .article-gallery .flexslider .custom-navigation span.flex-prev:before, .article-gallery .flexslider .custom-navigation span.flex-next:before { position: relative; display: inline-block; text-align: center; font-family: "flexslider-icon"; font-size: 1.875em; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); padding-top: 20px; height: 28px; width: 38px; border-radius: 20px; color: #ffffff; background-color: #333333; opacity: 0.5; } .article-gallery .flexslider .custom-navigation span.flex-prev { left: 0; text-align: left; } .article-gallery .flexslider .custom-navigation span.flex-prev:before { left: 3px; content: '\f001'; } .article-gallery .flexslider .custom-navigation span.flex-next { right: 0; text-align: right; } .article-gallery .flexslider .custom-navigation span.flex-next:before { right: 3px; content: '\f002'; } .article-gallery .flexslider ol { margin: 0; bottom: -35px; } /* stylesheet for cover template */ .cover { position: relative; padding: 0; /* screen-reader class added to articleBody in template; hidden for sighted, visible to screen readers */ } .cover #coverImageContainer { width: 100%; height: 100%; /* for background images (extraction v1) */ background-size: contain; background-repeat: no-repeat; background-position: center top; overflow-y: scroll; /* for cover images (extraction v2) */ } .cover #coverImageContainer figure img { position: absolute; width: auto; height: auto; margin: 0; padding: 0; top: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .cover .articleBody { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 36em; margin: 3em auto 0 auto; } /* special case where the browser is zoomed in and browserZoomed is added */ div.browserZoomed .cover #coverImageContainer figure img { position: static; width: auto; height: auto; margin: auto; top: 0; left: 0; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } /* stylesheet for default template */ .default .htmlBody .picture { margin-top: 1em; margin-bottom: 2em; } .default .htmlBody .picture img { max-height: 70vh; } /********** CUSTOM EDITIONS GLOBAL STYLES***************/ .captionButtonWrapper { position: absolute; bottom: 0; right: 0; padding: 0; left: 0; height: 50px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .captionButton { float: right; background: #006adb; color: #ffffff; width: 24px; height: 24px; border-radius: 12px; margin-right: 12px; margin-top: 14px; text-align: center; vertical-align: middle; font: normal 1em Georgia; line-height: 1.3rem; } .resizeButtonWrapper .captionButton { /* -webkit-text-stroke-width: 1px; */ font: normal 1.25em Georgia; line-height: 1.3em; } .imgwrap { display: inline-block; position: relative; } figure .imgwrap { outline: none; box-shadow: none; } .lightboxFigureWrap, .lightboxEnabled, .lightboxEnabled .imgwrap, .lightboxEnabled img { cursor: pointer; -webkit-user-select: none; /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout */ -webkit-touch-callout: none; } figure.withCaptionButton { text-align: center; } aside { display: block; margin: 1.5em auto; overflow-x: hidden; overflow-y: auto; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; } aside figure.smallImage { margin-left: 0px; margin-right: 1.125rem !important; } .columnImg.sidebar { max-height: 100%; } .imgParent.sidebar { position: relative; } .sidebar div.readMore { position: absolute; margin: 0; margin-left: 2.25rem; margin-right: 2.25rem; padding-right: 1.5rem; left: 0px; right: 0px; bottom: 0px; background: #dfbf94; box-sizing: border-box; height: 3rem; padding-top: 0.75rem; padding-bottom: 0.75rem; line-height: 1.5rem; z-index: 99; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .sidebar div.readMore p { text-align: right; color: #006adb; font: normal 1em "Avenir-Book", Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: bold; } aside.sidebar { background: #dfbf94; box-sizing: border-box; padding: 1.5rem; /* TODO: clean up the caption wrapper stuff and move to a simpler base style */ /* until then this override is needed to counteract the caption styles in the layouts */ } aside.sidebar .captionButtonWrapper { height: 48px !important; padding-right: 24px !important; } aside.sidebar .captionButton { margin: 0px !important; padding: 0px !important; } aside.sidebar.sidebarRight { float: right; width: 45%; margin: 0px 0px 0px 15px; } aside.sidebar.sidebarLeft { float: left; width: 45%; margin: 0px 15px 0px 0px; } .sidebar p:first-child { padding-top: 0px; } .sidebar figure { margin-left: auto; margin-right: auto; margin-top: 1.5rem; margin-bottom: 1.5rem; } .sidebar figure.smallImage { margin-top: 0px; margin-right: 0.75rem !important; } .sidebar img { margin-top: 1.5rem; margin-bottom: 1.5rem; } aside.longSidebar img { width: auto; } .sidebar h1:first-child, .sidebar h2:first-child, .sidebar h3:first-child, .sidebar h4:first-child, .sidebar h5:first-child, .sidebar h6:first-child { margin-top: 0px; padding-top: 0px; } .sidebar p:first-child, .sidebar figure:first-child { margin-top: 0px; padding-top: 0px; } .sidebar figure:last-child, .sidebar figure:last-child img { margin-bottom: 0px; padding-bottom: 0px; } @media screen and (max-width: 767px) { aside.sidebar.sidebarRight, aside.sidebar.sidebarLeft { float: none; width: 100%; margin: 15px auto; } } .CenterHorizontallyMixin { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -moz-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -moz-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .CenterVerticallyMixin { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -moz-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -moz-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .spacer { position: absolute; display: inline-block; } #roofHeaderElement { display: none; } /* USED BY ARTICLE_SWIPEVIEW.LESS */ :not(article.toc) .articleTitle { display: block; -webkit-hyphens: none; -moz-hyphens: none; margin-right: 0px; margin-left: 0px; text-align: left; margin-top: 0px; margin-bottom: 0px; } .title, .articleTitle, .gtxcelDefaultTemplate .article_title { color: #333333; font: normal 2.25em "Avenir-Black", "HelveticaNeue-Bold", Helvetica, Arial, sans-serif; line-height: 1.2em; display: block; -webkit-hyphens: none; -moz-hyphens: none; margin-right: 0px; margin-left: 0px; text-align: left; margin-top: 0px; margin-bottom: 0px; } .heroTitle .mainTitle, .heroTitle .title { text-align: center; } .imgParent { overflow: hidden; float: left; display: block; margin: 0.75rem; margin-bottom: 0px; margin-left: 0px; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .imgParent iframe, .imgParent video, .imgParent img { margin-left: auto; margin-right: auto; } .articleImg { max-width: 100%; vertical-align: top; } video { float: left; margin-left: 0px; margin-right: 0.75rem; padding: 0px; background-color: #ffffff; } img { display: block; max-width: 100%; max-height: 100%; margin-left: auto; margin-right: auto; } img.nomove, .nosplit img, .Image.nomove { width: auto; } .articleEnd:before { content: " "; } .articleEnd { text-indent: 0px; } .articleEnd:after { content: " "; display: inline-block; background: #006adb; width: 1em; height: 1em; position: relative; top: 1px; /* fudge factor to get baseline in the right place */ } .articleText { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; vertical-align: top; width: 100%; overflow: hidden; } .heroImg, .heroImg2 { float: none; width: 100%; max-width: 100%; max-height: 100%; margin: 0px; margin-left: auto; margin-right: auto; padding: 0px; padding-left: 0; padding-right: 0; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .heroImg2 { padding-left: 0; padding-right: 0; } .heroImg.sidebar, .heroImg2.sidebar { padding-left: 2.25rem; padding-right: 2.25rem; max-height: 75%; } #heroArticleTitle { display: none; width: 100%; text-align: center; box-sizing: border-box; pointer-events: none; } #heroArticleTitle .Byline { text-align: center; } #heroArticleTitle:empty { display: none !important; } #columnArticleTitle { margin-bottom: 1.5rem; } #columnArticleTitle:empty { margin: 0px; } video { width: 100%; } .loop-forward, .loop-back { background-color: #ff0000; } a { font-weight: bold; color: #006adb; text-decoration: none; } figcaption a { color: #499eef; } .dropCap, span.dropCap { color: #333333; font: bold 4.75em 'Open Sans', sans-serif; font-size: 4.5em; margin: 0 3px 0 0; line-height: 0.8em; float: left; padding-top: 0; padding-right: 3px; } /* disable auto drop caps for these elements...dropCap class should still work */ aside p:first-child:first-letter, section p:first-child:first-letter, figcaption p:first-child:first-letter { color: inherit !important; font: inherit !important; line-height: inherit !important; float: inherit !important; padding-top: inherit !important; padding-right: inherit !important; } figure.smallImage, .Picture.smallImage, .graphic.smallImage, .picture.smallImage { float: left; max-width: 30%; margin-right: 0.75rem; margin-bottom: 0px; } figure.smallImage .smallImage, .Picture.smallImage .smallImage, .picture.smallImage .smallImage, .graphic.smallImage .smallImage { /* reset styles on the child img */ float: none; max-width: 100%; margin: 0px; margin-top: 0.375rem; } #articleBodyDiv, #articlePageView { font: normal 1em "Avenir-Book", Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 1em; font-weight: normal; color: #333333; } h1.mainTitle, .mainTitle { font: normal 1.5em 'Open Sans', sans-serif; font-size: 2.25em; color: #333333; line-height: 1.2em; margin: 0.5em 0 0.5em 0; outline: none; box-shadow: none; } h1 { font: normal 1.5em 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif; font-size: 2.25em; font-weight: normal; line-height: 1.2em; color: #333333; margin: 1.5em 0 0.5em 0; } h2 { font: bold 1.3em 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif; font-size: 1.3em; font-weight: bold; line-height: 1.2em; color: #333333; margin: 1.3em 0 0.5em 0; } h3 { font: bold 1.15em 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif; font-size: 1.15em; font-weight: bold; line-height: 1.2em; color: #333333; margin: 1.15em 0 0.5em 0; } h4 { font: bold 1em 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif; font-size: 1em; font-weight: bold; line-height: 1.2em; color: #333333; margin: 1em 0 0.5em 0; } h5 { font: bold 1em 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif; font-size: 1em; font-weight: bold; line-height: 1.2em; color: #333333; margin: 1em 0 0.5em 0; } h6 { font: bold 1em 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif; font-size: 1em; font-weight: bold; line-height: 1.2em; color: #333333; margin: 1em 0 0.5em 0; } ul, ol { margin: 0px; } blockquote { font-style: italic; margin-top: 1.5rem; margin-bottom: 1.5rem; margin-left: 2em; margin-right: 2em; } blockquote p { font-style: italic; } /* prevent subscript and superscript from affecting line heights */ sub { vertical-align: sub; line-height: 0px; } sup { vertical-align: super; line-height: 0px; } .article_img { width: 100%; } .article_font_medium { color: #333333; font: normal 1.3em "Avenir-Black", "HelveticaNeue-Bold", Helvetica, Arial, sans-serif; font-size: 1.3em; font-weight: normal; line-height: 1.5rem; } .article_font_xlarge { font-size: 1.125em; line-height: 1.5rem; } .article_font_xxlarge { font-size: 1.125em; line-height: 1.5rem; } .articleText p.article_font_small + p.article_font_small { text-indent: 2em; padding-top: 0; } .articleText p.article_font_small:first-of-type { text-indent: 0px; margin-top: 0px; padding-top: 0px; } div.block p.article_font_small { text-indent: 0px; margin: 0px; } .comments { display: none; } .commentsLink { display: none; } .comment_reply { display: none; } .new { display: none; } .submitted { font-weight: bold; } .article_bold { font-weight: bold; } .article_italic { font-style: italic; } .articleBody { padding-top: 10px; } /* OLIVE STYLES */ .HtmlBody, .htmlBody { font-weight: normal; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333333; } .htmlBody h1:first-child { margin-top: 0px; } .htmlBody p { margin-bottom: 1.2em; margin-top: 0; } .htmlBody p.spacing-none { margin-bottom: 0px; } .htmlBody p.spacing-half { margin-bottom: 0.5em; } .htmlBody p.spacing-single { margin-bottom: 1em; } .htmlBody p.spacing-onepointfive { margin-bottom: 1.5em; } .htmlBody p.spacing-double { margin-bottom: 2em; } .htmlBody .graphic, .htmlBody .picture { margin-bottom: 1.5em; } .htmlBody .jwplayer, .htmlBody .vimeo, .htmlBody .youtube { margin-bottom: 1.5em; } .htmlBody .jwplayer iframe, .htmlBody .vimeo iframe, .htmlBody .youtube iframe { margin: 0 auto; } .Content .Component, p .Component { max-width: 100%; -webkit-column-break-inside: avoid; } .Content .FixedComponent, p .FixedComponent { float: right; top: 0px; right: 0px; max-width: 100%; -webkit-column-break-inside: avoid; padding-top: 0.75rem; padding-bottom: 0.75rem; } .Content .WideComponent, p .WideComponent { -webkit-column-span: all; max-width: 100%; } p { text-indent: 2em; padding-top: 0; } div.block p { text-indent: 0px; } div.block img { float: left; } p:first-of-type { text-indent: 0px; margin-top: 0px; padding-top: 0px; } p.Lead + p, aside.pullQuote + p { text-indent: 0px; } p.SmartTagTitle, p.SmartTagTitle + p { text-indent: 0px; } h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { text-indent: 0px; } /* this is a hack for the leftover .Component divs left behind when the images get moved around .Content p.SmartTagTitle + .Component + p, .Content p.SmartTagTitle + .Component + .Component + p { text-indent: 0px; } */ /* preventing whitespace at the top of a column .columnDiv .articleText:first-child div:first-of-type { margin-top:0px; padding-top:0px; } */ .columnDiv .articleText:first-child p.SmartTagTitle:first-child { margin-top: 0px; padding-top: 0px; } .columnDiv .articleText:first-child .Header:first-child { margin-top: 0px; padding-top: 0px; } .DropHead { color: #333333; font: normal 1.3em "Avenir-Black", "HelveticaNeue-Bold", Helvetica, Arial, sans-serif; line-height: 1.5rem; margin: 0px; padding-top: 0px; padding-bottom: 0px; } .Byline, .byline, .gtxcelDefaultTemplate .Byline { font-family: 'Open Sans', sans-serif; font-weight: normal; font-size: 1em; line-height: 1.4em; margin: 15px auto 0; } .Byline p, .byline p { padding: 0px; } .Byline .SmartTagAuthor, .byline .SmartTagAuthor, .Byline .attribution, .byline .attribution { text-align: left; } /* for the cases where the byline is in the article column, not the title block */ .Byline + p, .byline + p { padding-top: 1.5rem; } .subtitle, .gtxcelDefaultTemplate .DropHead, .gtxcelDefaultTemplate .article_subhead { color: #666666; font-family: 'Open Sans', sans-serif; font-weight: normal; font-size: 1.25em; line-height: 1.3em; margin: 15px auto 0; padding-top: 0; padding-bottom: 0; } .DropHead + .DropHead, .subtitle + .subtitle, .Byline, .Byline + .DropHead, .Byline + .subtitle, .byline + .DropHead, .byline + .subtitle { margin: 0px; padding: 0px; padding-top: 1.5rem; } .RoofHeader, .roofHeader, .gtxcelDefaultTemplate .roofHeader, .gtxcelDefaultTemplate .RoofHeader { display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #ff3b30; color: #ffffff; font-family: 'Open Sans', sans-serif; font-weight: normal; font-size: 1em; line-height: 1em; padding: 0.5em 1em; margin: 1.5em 0 auto 0; text-transform: uppercase; } .Content, li { color: #333333; margin: 0px; font: normal 1em "Avenir-Book", Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 1em; font-weight: normal; line-height: 1.5em; text-align: left; -webkit-hyphens: manual; -moz-hyphens: manual; -ms-hyphens: manual; hyphens: manual; } p { color: #333333; font: normal 1em "Avenir-Book", Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 1em; font-weight: normal; line-height: 1.5em; text-align: left; margin: 1.5em 0; text-indent: 0; -webkit-hyphens: manual; -moz-hyphens: manual; -ms-hyphens: manual; hyphens: manual; -webkit-hyphenate-limit-before: 2; -webkit-hyphenate-limit-after: 3; -webkit-hyphenate-limit-lines: 2; } li { margin: 0 0 0.75rem 0; text-indent: 0px; } aside.pullQuote { color: #000000; font-family: 'Open Sans', sans-serif; font-size: 1em; line-height: 1.5em; text-align: center; padding: 1.5rem; padding-bottom: 0.75rem; /* use less padding on the bottom, assuming some white space is added by layout*/ clear: both; } .Lead, .pullQuote p { color: #000000; text-align: center; font: normal 1.5em "BodoniSvtyTwoITCTT-Book", Times New Roman, Georgia, serif; line-height: normal; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; text-indent: 0px; } .Lead p, .pullQuote p { padding: 0px; } .Lead p + p, .pullQuote p + p { padding-top: 1.5rem; } .pullQuote figure { float: left; margin-left: 0px !important; } .Picture, .graphic, .picture { position: relative; } .Picture p, .graphic p, .picture p, .Image p { margin: 0px; } .Image, figure img { display: block; margin-left: auto; margin-right: auto; width: 100%; } .Caption { color: #ffffff; font: normal 1em "Avenir-Book", Helvetica Neue, Helvetica, Arial, sans-serif; margin: 0px; padding: 0px; display: none; } figcaption { color: #ffffff; font: normal 1em "Avenir-Book", Helvetica Neue, Helvetica, Arial, sans-serif; text-align: center; margin: 0.5em auto; display: none; } .screen-reader .Caption, .screen-reader figcaption { display: block; } div.Caption, figcaption { background: rgba(0, 0, 0, 0.75); position: absolute; bottom: 0px; width: 100%; box-sizing: border-box; padding: 0.75rem; } .smallImage div.Caption, .smallImage figcaption { background: rgba(0, 0, 0, 0.85); } .Supplementary, .supplementary p { color: #333333; font: normal 1em "Avenir-Book", Helvetica Neue, Helvetica, Arial, sans-serif; line-height: 1.5rem; margin: 0px; text-indent: 0px; } div.Supplementary p.Supplementary:first-of-type { padding-top: 0px; } .supplementary, .gtxcelDefaultTemplate .Supplementary { font-family: sans-serif; font-style: italic; background-color: #e3e3db; padding: 10px; margin: 1.5em 0; clear: both; } .footnote { font-size: 0.8em; } /* override screen-reader value so it is above footnote number */ .footnote-description .screen-reader { bottom: auto; top: 0; } .SmartTagTitle { color: #333333; font: normal 1.3em "Avenir-Black", "HelveticaNeue-Bold", Helvetica, Arial, sans-serif; line-height: 1.5rem; display: block; padding-top: 1.5rem; margin: 0px; margin-bottom: 0px; text-indent: 0px; text-align: left; } .RoofHeader + .SmartTagTitle:first-child, .roofHeader + .SmartTagTitle:first-child { padding-top: 0px; margin-top: 0px; } .SmartTagAuthor, .attribution, .gtxcelDefaultTemplate .SmartTagAuthor { color: #717171; font: normal 1em "Avenir-Book", Helvetica Neue, Helvetica, Arial, sans-serif; line-height: 1.5rem; text-align: right; } .SmartTagType.Agency { font-size: xx-small; line-height: 1.5rem; } .SmartTagCredit { font-size: xx-small; line-height: 1.5rem; } section { overflow: auto; box-sizing: border-box; } p section { padding-top: 1.5rem; } section img, section .Image, section figure { width: auto; display: inline; } section.singleImageSection .SmartTagTitle { padding-bottom: 1.5rem; } section.singleImageSection p { text-indent: 0px; } section.singleImageSection iframe { padding-top: 1.5rem; } section.shortSection { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid gray; } section.shortSection:first-child { margin-top: 0px; border-top: 0px; } section.shortSection p { text-indent: 0px; } section.shortSection .mediumImage { float: right; max-height: 150px; padding-left: 1.5rem; margin: 0px; } section.asideSection { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; -moz-column-gap: 2.25rem; -webkit-column-gap: 2.25rem; column-gap: 2.25rem; column-fill: balance; -moz-column-fill: balance; -webkit-column-fill: balance; background: #dfbf94; box-sizing: border-box; padding: 1.5rem; } section.asideSection .DropHead, section.asideSection .subtitle { margin-bottom: 1.5rem; } section.asideSection .Picture, section.asideSection .graphic, section.asideSection .picture { margin-top: 1.5rem; margin-bottom: 1.5rem; } .phoneFontSetupMixin .DropHead, .phoneFontSetupMixin .subtitle { padding: 0px; font-size: 1.125em; } .phoneFontSetupMixin .Lead, .phoneFontSetupMixin .pullQuote { font-size: 1.5em; padding-top: 0.75rem; padding-bottom: 0.75rem; } .phoneFontSetupMixin .mainTitle, .phoneFontSetupMixin .articleTitle { font-size: 1.5em; line-height: 1.5em; } .oneColumnSetupMixin { /* enable roof headers*/ } .oneColumnSetupMixin #roofHeaderElement { display: block; } .oneColumnSetupMixin .RoofHeader, .oneColumnSetupMixin .roofHeader { box-sizing: border-box; display: inline-block; background: #ff3b30; padding-top: 0.375rem; padding-bottom: 0.375rem; margin-top: 0.375rem; } .oneColumnSetupMixin .RoofHeader, .oneColumnSetupMixin .roofHeader { font-size: 1.125em; } .oneColumnSetupMixin .Byline, .oneColumnSetupMixin .byline { padding: 0px; } .oneColumnSetupMixin .imgParent .Lead, .oneColumnSetupMixin .pullQuote { padding: 0px; } .oneColumnSetupMixin #backButton { padding-left: 0.75rem; } .oneColumnSetupMixin #headerLogo.hideTOChideShare { margin-right: 0.75rem; } .oneColumnSetupMixin #headerLogo.showTOChideShare, .oneColumnSetupMixin #headerLogo.hideTOCshowShare { margin-right: 45.75rem; } .oneColumnSetupMixin #headerLogo.showTOCshowShare { margin-right: 90.75rem; } .oneColumnSetupMixin .pages_bar { margin-right: 0.75rem; } .oneColumnSetupMixin .page_circle, .oneColumnSetupMixin .page_circle_current { display: none; } .oneColumnSetupMixin #pageTracker, .oneColumnSetupMixin #pageNumber, .oneColumnSetupMixin #pageCount { display: inline-block; } .oneColumnSetupMixin #heroArticleTitle { padding-left: 0.75rem; padding-right: 0.75rem; } .oneColumnSetupMixin #columnArticleTitle { margin-bottom: 1.5rem; } .oneColumnSetupMixin .columns { box-sizing: border-box; padding-top: 48.75px; padding-left: 0.75rem; padding-right: 0.75rem; padding-bottom: 36px; } .oneColumnSetupMixin .col1 { width: 100%; padding-top: 48.75px; padding-left: 0.75rem; padding-right: 0.75rem; padding-bottom: 36px; } .oneColumnSetupMixin .col2, .oneColumnSetupMixin .col3 { display: none; } .oneColumnSetupMixin .sidebar div.readMore { margin-left: 0.75rem; margin-right: 0.75rem; } .oneColumnSetupMixin .columns aside.sidebar h1, .oneColumnSetupMixin .columns aside.sidebar h2, .oneColumnSetupMixin .columns aside.sidebar h3, .oneColumnSetupMixin .columns aside.sidebar h4, .oneColumnSetupMixin .columns aside.sidebar h5, .oneColumnSetupMixin .columns aside.sidebar h6 { padding-top: 0px; padding-bottom: 1.5rem; } .oneColumnSetupMixin .columns aside.sidebar :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { /* display:none !important; */ } /* small portrait */ @media screen and (max-width: 400px) { /* enable roof headers*/ #roofHeaderElement { display: block; } .RoofHeader, .roofHeader, .gtxcelDefaultTemplate .roofHeader, .gtxcelDefaultTemplate .RoofHeader { box-sizing: border-box; display: inline-block; background: #ff3b30; padding-top: 0.375rem; padding-bottom: 0.375rem; margin-top: 0.375rem; } .RoofHeader, .roofHeader, .gtxcelDefaultTemplate .roofHeader, .gtxcelDefaultTemplate .RoofHeader { font-size: 1.125em; } .Byline, .byline, .gtxcelDefaultTemplate .Byline { padding: 0px; } .imgParent .Lead, .pullQuote { padding: 0px; } #backButton { padding-left: 0.75rem; } #headerLogo.hideTOChideShare { margin-right: 0.75rem; } #headerLogo.showTOChideShare, #headerLogo.hideTOCshowShare { margin-right: 45.75rem; } #headerLogo.showTOCshowShare { margin-right: 90.75rem; } .pages_bar { margin-right: 0.75rem; } .page_circle, .page_circle_current { display: none; } #pageTracker, #pageNumber, #pageCount { display: inline-block; } #heroArticleTitle { padding-left: 0.75rem; padding-right: 0.75rem; } #columnArticleTitle { margin-bottom: 1.5rem; } .columns { box-sizing: border-box; padding-top: 48.75px; padding-left: 0.75rem; padding-right: 0.75rem; padding-bottom: 36px; } .col1 { width: 100%; padding-top: 48.75px; padding-left: 0.75rem; padding-right: 0.75rem; padding-bottom: 36px; } .col2, .col3 { display: none; } .sidebar div.readMore { margin-left: 0.75rem; margin-right: 0.75rem; } .columns aside.sidebar h1, .columns aside.sidebar h2, .columns aside.sidebar h3, .columns aside.sidebar h4, .columns aside.sidebar h5, .columns aside.sidebar h6 { padding-top: 0px; padding-bottom: 1.5rem; } .columns aside.sidebar :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { /* display:none !important; */ } .DropHead, .subtitle, .gtxcelDefaultTemplate .DropHead, .gtxcelDefaultTemplate .article_subhead { padding: 0px; font-size: 1.125em; } .Lead, .pullQuote { font-size: 1.5em; padding-top: 0.75rem; padding-bottom: 0.75rem; } .mainTitle, .articleTitle, .gtxcelDefaultTemplate .article_title { font-size: 1.5em; line-height: 1.5em; } .lightbox .footnote { margin-left: 0.75rem; margin-right: 0.75rem; } .lightbox .sidebar { margin: 0.75rem !important; } .lightbox .sidebar img { width: auto; max-height: none; } /* reduce the size of h1; handles h1 next to image */ h1 { font-size: 1.2em; } } /* Lightbox stuff */ #imageLightbox { height: auto; } #imageLightbox #lightboxbg, #imageLightbox .lightboxbg { height: 100vh; } #lightboxbg, .lightboxbg { min-height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.9); background-position: initial; background-repeat: initial; } #lightboxbg caption, .lightboxbg caption, #lightboxbg .Caption, .lightboxbg .Caption, #lightboxbg figcaption, .lightboxbg figcaption { left: 0; right: 0; position: absolute; text-align: center; display: block; bottom: 0; padding: 1.5rem; color: white; } #lightboxbg adcaption, .lightboxbg adcaption { display: inline-block; width: 100%; max-width: 900px; color: #ffffff; font: normal 1em "Avenir-Book", Helvetica Neue, Helvetica, Arial, sans-serif; margin: 0px; padding: 1.5rem; box-sizing: border-box; } #lightboxbg adcaption p, .lightboxbg adcaption p { color: #ffffff; } #lightboxbg adcaption li, .lightboxbg adcaption li, #lightboxbg adcaption h2, .lightboxbg adcaption h2, #lightboxbg adcaption h3, .lightboxbg adcaption h3, #lightboxbg adcaption h4, .lightboxbg adcaption h4, #lightboxbg adcaption h5, .lightboxbg adcaption h5, #lightboxbg adcaption h6, .lightboxbg adcaption h6 { color: #ffffff; } #lightboxbg adcaption a, .lightboxbg adcaption a { color: #548ecc; } #lightboxbg .lightbox-contents, .lightboxbg .lightbox-contents { position: relative; margin: 6px; } #lightboxbg .lightboximg, .lightboxbg .lightboximg { outline: 0; border: none; box-shadow: none; } #lightboxbg .SmartTagAuthor, .lightboxbg .SmartTagAuthor, #lightboxbg .attribution, .lightboxbg .attribution { color: #ffffff; } #lightboximg, .lightboximg { opacity: 1; } sup.footnoteReference a { color: #006adb; } #swipeview-slider sup.footnoteReference span.footnote-description { display: inline-block; } .nolightbox { text-align: center; } .nolightbox figcaption { display: block; position: relative; background: #eeeeee; color: #111111; } .nolightbox figcaption attribution { color: #666666; } .lightbox { height: 100%; position: absolute; width: 100%; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 10001; display: none; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; overflow-y: scroll; } .lightbox .footnote { display: block; text-align: left; background: #ffffff; font: normal 1em "Avenir-Book", Helvetica Neue, Helvetica, Arial, sans-serif; color: #333333; line-height: 1.5rem; padding: 1.5rem; max-width: 35em; max-height: 100%; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; overflow-y: scroll; -webkit-overflow-scrolling: touch; word-break: break-word; /* if multiple spans are present, indent them to look like paragraphs */ } .lightbox .footnote span { display: block; text-indent: 2em; } .lightbox .footnote span:first-child { text-indent: 0px; } .lightbox .footnote + .footnote { padding-top: 0px; } .lightbox .sidebar { margin: 2.25rem; } .lightbox.visible { background: rgba(0, 0, 0, 0.9); background-position: initial initial; background-repeat: initial initial; display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; display: -moz-box; -moz-box-orient: horizontal; -moz-box-pack: center; -moz-box-align: center; display: box; box-orient: horizontal; box-pack: center; box-align: center; } /********** Fractional Ads START ***************/ .advertisement { margin: 1.5em auto; text-align: center; } advertisement { width: 100%; height: auto; margin: 1.5em auto; text-align: center; } advertisement img { width: 100%; } .ad-fixed-position { position: fixed; width: 100%; margin: 0 auto; } .vertical-ad { background-color: #e4e4e4; float: left; width: 50%; margin: 0px 15px 15px 0px; padding: 5px 20px 20px; text-align: center; } .vertical-ad advertisement { width: 100%; } .horizontal-ad { background-color: #e4e4e4; padding: 5px 20px 20px; margin: 15px auto; text-align: center; } .vertical-ad + .horizontal-ad { clear: left; } figure.vertical-ad img, figure.horizontal-ad img { margin-top: 0px; } .advertisementText { color: #000000; text-align: center; font-family: sans-serif; font-size: 0.6em; } .fa-arrows-alt { background-color: #f1082f; color: #ffffff; width: 20px; height: 20px; border-radius: 50%; text-align: center; line-height: 20px; margin-left: 10px; margin-bottom: 10px; } .fullscreenIcon { background-color: #000000; color: #ffffff; width: 23px; height: 22px; border-radius: 50%; text-align: center; vertical-align: middle; line-height: 20px; display: block; margin: 0px auto 0px; position: relative; z-index: 1; } .adLightboxBg { background-color: rgba(0, 0, 0, 0.9); position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 101; display: none; overflow: scroll; transition: all 0.5s ease-in; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; } .showAdLightboxBg { display: block; } .lightboxLink { display: block; } @media screen and (max-width: 767px) { /* Do not float on devices smaller than ipad */ .vertical-ad { float: none; margin: 15px auto; padding: 10px; } } /********** Fractional Ads START ***************/ /********** Author Bio ***************/ .author-bio { width: 85%; border-top: 3px solid #d3d3d3; border-bottom: 3px solid #d3d3d3; margin: 10px auto; padding: 20px 0px; box-sizing: border-box; transition: height 0.2s ease-out; overflow: hidden; } .author-bio figure.profile-img { box-sizing: border-box; margin: 0px 15px 0px 0px; padding: 1px; text-align: center; width: 20%; display: inline-block; vertical-align: top; float: left; } .author-bio figure.profile-img img { width: 120px; display: inline-block; margin-top: 5px; } .author-bio figure.profile-img .captionButton { display: none; } .author-bio figure.profile-img figcaption { font-size: 0.7em; padding: 5px; display: block; position: static; padding: 0px; margin: 0px auto; background-color: transparent; color: #000000; } .author-bio .content { width: 100%; box-sizing: border-box; } .author-bio .content a { text-decoration: none; } .author-bio .content li { list-style: none; } .author-bio .content p { font-size: 0.9em; } .author-bio .content h1, .author-bio .content h2, .author-bio .content h3, .author-bio .content h4, .author-bio .content h5, .author-bio .content h6 { text-align: center; color: #000000; margin: 0px auto; } .author-bio .content h1 { font-size: 1.4em; } .author-bio .content h2 { font-size: 1.3em; } .author-bio .content h3 { font-size: 1.2em; } .author-bio .content h4 { font-size: 1.1em; } .author-bio .content h5 { font-size: 1.0em; } .author-bio .content h6 { font-size: 1.0em; } .author-bio .content.no-float { width: 70%; box-sizing: border-box; display: inline-block; } .author-bio .contact { width: 100%; text-align: center; display: block; } .author-bio .contact ul { padding: 0px; margin: 0px auto; } .author-bio .contact ul li { display: inline-block; } .author-bio .contact .fa-envelope, .author-bio .contact .fa-twitter, .author-bio .contact .fa-linkedin, .author-bio .contact .fa-facebook { background-color: #006adb; color: #ffffff; width: 40px; height: 40px; text-align: center; line-height: 40px; border-radius: 50%; font-size: 1.3em; margin: 0px 5px; display: inline-block; } @media screen and (max-width: 768px) { .author-bio .content.no-float { width: 100%; } .author-bio figure.profile-img { width: 25%; left: 31%; } } @media screen and (max-width: 767px) { .author-bio figure.profile-img { width: 100%; margin-bottom: 20px; } .author-bio figure.profile-img img { width: 90px; text-align: center; margin: 0px auto; } } /* ***** ARTICLE EXTRACTION VERSION 2 DEFINITIONS - START ***** */ .articleContent.articleExtractionV2 h1, .articleContent.articleExtractionV2 h1.mainTitle { font-size: 2.25em; margin: 0.5em 0 0.5em 0; line-height: 1.2em; } .articleContent.articleExtractionV2 h2 { font-size: 1.5em; margin: 1.5em 0 0.5em 0; line-height: 1.2em; } .articleContent.articleExtractionV2 h3 { font-size: 1.3em; margin: 1.3em 0 0.5em 0; line-height: 1.2em; } .articleContent.articleExtractionV2 h4 { font-size: 1.15em; margin: 1.15em 0 0.5em 0; line-height: 1.2em; } .articleContent.articleExtractionV2 h5 { font-size: 1em; margin: 1em 0 0.5em 0; line-height: 1.2em; } .articleContent.articleExtractionV2 h6 { font-size: 1em; margin: 1em 0 0.5em 0; line-height: 1.2em; } /* ***** ARTICLE EXTRACTION VERSION 2 DEFINITIONS - END ***** */ /* stylesheet for floated-images template */ .floated-images .htmlBody { /* default: float right */ } .floated-images .htmlBody figure.picture, .floated-images .htmlBody figure.graphic { float: right; clear: right; margin: 5px 0px 10px 10px; max-width: 50%; /* standard overrides */ /* overrides through image2 plugin */ } .floated-images .htmlBody figure.picture.float-left, .floated-images .htmlBody figure.graphic.float-left { float: left; clear: left; margin: 5px 10px 10px 0px; } .floated-images .htmlBody figure.picture.float-right, .floated-images .htmlBody figure.graphic.float-right { float: right; clear: right; margin: 5px 0px 10px 10px; } .floated-images .htmlBody figure.picture.float-none, .floated-images .htmlBody figure.graphic.float-none { float: none; clear: both; margin: 5px 10px 10px 10px; } .floated-images .htmlBody figure.picture.max-100-pct, .floated-images .htmlBody figure.graphic.max-100-pct { max-width: 100%; } .floated-images .htmlBody figure.picture.max-70-pct, .floated-images .htmlBody figure.graphic.max-70-pct { max-width: 70%; } .floated-images .htmlBody figure.picture.max-50-pct, .floated-images .htmlBody figure.graphic.max-50-pct { max-width: 50%; } .floated-images .htmlBody figure.picture.max-30-pct, .floated-images .htmlBody figure.graphic.max-30-pct { max-width: 30%; } .floated-images .htmlBody figure.picture.align-center.max-100-pct, .floated-images .htmlBody figure.graphic.align-center.max-100-pct, .floated-images .htmlBody figure.picture.align-center.max-70-pct, .floated-images .htmlBody figure.graphic.align-center.max-70-pct, .floated-images .htmlBody figure.picture.align-center.max-50-pct, .floated-images .htmlBody figure.graphic.align-center.max-50-pct, .floated-images .htmlBody figure.picture.align-center.max-30-pct, .floated-images .htmlBody figure.graphic.align-center.max-30-pct { float: none; text-align: center; margin-left: auto; margin-right: auto; } .floated-images .htmlBody figure.picture.align-center.max-100-pct > img, .floated-images .htmlBody figure.graphic.align-center.max-100-pct > img, .floated-images .htmlBody figure.picture.align-center.max-70-pct > img, .floated-images .htmlBody figure.graphic.align-center.max-70-pct > img, .floated-images .htmlBody figure.picture.align-center.max-50-pct > img, .floated-images .htmlBody figure.graphic.align-center.max-50-pct > img, .floated-images .htmlBody figure.picture.align-center.max-30-pct > img, .floated-images .htmlBody figure.graphic.align-center.max-30-pct > img, .floated-images .htmlBody figure.picture.align-center.max-100-pct > .imgwrap, .floated-images .htmlBody figure.graphic.align-center.max-100-pct > .imgwrap, .floated-images .htmlBody figure.picture.align-center.max-70-pct > .imgwrap, .floated-images .htmlBody figure.graphic.align-center.max-70-pct > .imgwrap, .floated-images .htmlBody figure.picture.align-center.max-50-pct > .imgwrap, .floated-images .htmlBody figure.graphic.align-center.max-50-pct > .imgwrap, .floated-images .htmlBody figure.picture.align-center.max-30-pct > .imgwrap, .floated-images .htmlBody figure.graphic.align-center.max-30-pct > .imgwrap { display: inline-block; } .floated-images .htmlBody figure.picture.align-left.max-100-pct, .floated-images .htmlBody figure.graphic.align-left.max-100-pct, .floated-images .htmlBody figure.picture.align-left.max-70-pct, .floated-images .htmlBody figure.graphic.align-left.max-70-pct, .floated-images .htmlBody figure.picture.align-left.max-50-pct, .floated-images .htmlBody figure.graphic.align-left.max-50-pct, .floated-images .htmlBody figure.picture.align-left.max-30-pct, .floated-images .htmlBody figure.graphic.align-left.max-30-pct { float: left; clear: left; margin: 0.5em 1em 0.5em 0; } .floated-images .htmlBody figure.picture.align-right.max-100-pct, .floated-images .htmlBody figure.graphic.align-right.max-100-pct, .floated-images .htmlBody figure.picture.align-right.max-70-pct, .floated-images .htmlBody figure.graphic.align-right.max-70-pct, .floated-images .htmlBody figure.picture.align-right.max-50-pct, .floated-images .htmlBody figure.graphic.align-right.max-50-pct, .floated-images .htmlBody figure.picture.align-right.max-30-pct, .floated-images .htmlBody figure.graphic.align-right.max-30-pct { float: right; margin: 0.5em 0 0.5em 1em; } @media screen and (max-width: 480px) { .floated-images .htmlBody figure.picture.max-30-pct, .floated-images .htmlBody figure.graphic.max-30-pct { max-width: 50%; /* ensure image doesn't get too small on phone */ } .floated-images .htmlBody figure.picture.align-left.max-100-pct, .floated-images .htmlBody figure.graphic.align-left.max-100-pct, .floated-images .htmlBody figure.picture.align-right.max-100-pct, .floated-images .htmlBody figure.graphic.align-right.max-100-pct, .floated-images .htmlBody figure.picture.align-left.max-70-pct, .floated-images .htmlBody figure.graphic.align-left.max-70-pct, .floated-images .htmlBody figure.picture.align-right.max-70-pct, .floated-images .htmlBody figure.graphic.align-right.max-70-pct { /* center above text in phone */ float: none; text-align: center; margin-left: auto; margin-right: auto; } .floated-images .htmlBody figure.picture.align-left.max-100-pct > img, .floated-images .htmlBody figure.graphic.align-left.max-100-pct > img, .floated-images .htmlBody figure.picture.align-right.max-100-pct > img, .floated-images .htmlBody figure.graphic.align-right.max-100-pct > img, .floated-images .htmlBody figure.picture.align-left.max-70-pct > img, .floated-images .htmlBody figure.graphic.align-left.max-70-pct > img, .floated-images .htmlBody figure.picture.align-right.max-70-pct > img, .floated-images .htmlBody figure.graphic.align-right.max-70-pct > img, .floated-images .htmlBody figure.picture.align-left.max-100-pct > .imgwrap, .floated-images .htmlBody figure.graphic.align-left.max-100-pct > .imgwrap, .floated-images .htmlBody figure.picture.align-right.max-100-pct > .imgwrap, .floated-images .htmlBody figure.graphic.align-right.max-100-pct > .imgwrap, .floated-images .htmlBody figure.picture.align-left.max-70-pct > .imgwrap, .floated-images .htmlBody figure.graphic.align-left.max-70-pct > .imgwrap, .floated-images .htmlBody figure.picture.align-right.max-70-pct > .imgwrap, .floated-images .htmlBody figure.graphic.align-right.max-70-pct > .imgwrap { display: inline-block; } } /* stylesheet for hero image template */ .heroimage { /* override default first-child, since hero image is now the first child */ } .heroimage figure img { width: auto; max-width: 100%; } .heroimage .hero { padding: 0; margin: 0; position: relative; background-color: #333333; /* hide caption button; figcaption still visible in lightbox */ /* override roofHeader styles from editions.less */ } .heroimage .hero figure { width: 100%; padding: 0; margin: 0; overflow: hidden; max-height: 80vh; border: none; line-height: 0; text-align: center; } .heroimage .hero figure img { max-height: none; padding: 0; margin: 0; width: 100%; } .heroimage .hero figure .imgwrap { width: 100%; } .heroimage .hero .captionButtonWrapper { display: none; } .heroimage .hero .roofHeader { position: absolute; z-index: 100; } .heroimage .float-right { float: right; padding: 5px; } .heroimage .float-left { float: left; padding: 5px; } .heroimage .gtxcelDefaultTemplate > :first-child { margin-top: 0; } @media screen and (max-width: 480px) { .heroimage .Image, .heroimage figure img, .heroimage figure { display: block; margin-left: auto; margin-right: auto; float: none; } } /* stylesheet for full-page-advertisement template */ .full-page-advertisement { overflow: hidden; } .full-page-advertisement .fullPageAdvertisementImageContainer { width: 100%; height: 100%; text-align: center; outline: none; box-shadow: none; /* figure definition placed outside link as an ad can be created without a link */ } .full-page-advertisement .fullPageAdvertisementImageContainer a.full-page-advertisement-link { display: inline-block; height: 100%; width: auto; } .full-page-advertisement .fullPageAdvertisementImageContainer figure { height: 100%; width: 100%; margin: 0; padding: 0; } .full-page-advertisement .fullPageAdvertisementImageContainer figure img { width: auto; height: auto; max-width: 100%; max-height: 100%; } .full-page-advertisement .articleBody { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 36em; margin: 0 auto; } .full-page-advertisement .articleBody .full-page-advertisement-title { margin-top: 5px; padding: 0 5px; } .full-page-advertisement .articleBody h2:first-child { margin-top: 0px; } .full-page-advertisement .articleBody .fullPageAdDescription { padding-bottom: 1.2em; margin-bottom: 0; } .full-page-advertisement .articleBody .fullPageAdDescription *:last-child { margin-bottom: 0; padding-bottom: 0; } /* special case where the browser is zoomed in and browserZoomed is added */ div.browserZoomed .full-page-advertisement { overflow: auto; } div.browserZoomed .full-page-advertisement .fullPageAdvertisementImageContainer { height: auto; } div.browserZoomed .full-page-advertisement .fullPageAdvertisementImageContainer figure img { max-height: none; max-width: none; } .full-width-html-ad .html-ad { max-width: 100%; max-height: 100%; margin: 0 auto; } /* stylesheet for toc-advertorial template */ .full-page-advertisement { overflow: hidden; } .full-page-advertisement .fullPageAdvertisementImageContainer { width: 100%; height: 100%; text-align: center; outline: none; box-shadow: none; /* figure definition placed outside link as an ad can be created without a link */ } .full-page-advertisement .fullPageAdvertisementImageContainer a.full-page-advertisement-link { display: inline-block; height: 100%; width: auto; } .full-page-advertisement .fullPageAdvertisementImageContainer figure { height: 100%; width: 100%; margin: 0; padding: 0; } .full-page-advertisement .fullPageAdvertisementImageContainer figure img { width: auto; height: auto; max-width: 100%; max-height: 100%; } .full-page-advertisement .articleBody { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 36em; margin: 0 auto; } .full-page-advertisement .articleBody .full-page-advertisement-title { margin-top: 5px; padding: 0 5px; } .full-page-advertisement .articleBody h2:first-child { margin-top: 0px; } .full-page-advertisement .articleBody .fullPageAdDescription { padding-bottom: 1.2em; margin-bottom: 0; } .full-page-advertisement .articleBody .fullPageAdDescription *:last-child { margin-bottom: 0; padding-bottom: 0; } /* special case where the browser is zoomed in and browserZoomed is added */ div.browserZoomed .full-page-advertisement { overflow: auto; } div.browserZoomed .full-page-advertisement .fullPageAdvertisementImageContainer { height: auto; } div.browserZoomed .full-page-advertisement .fullPageAdvertisementImageContainer figure img { max-height: none; max-width: none; }