Content-Length: 18413 | pFad | http://www.ncei.noaa.gov/monitoring-content/sotc/css/sotc.css
@media print { .tabs, .sotc-form, .arrowNav { display: none; } } /* legacy CSS */ /**************/ .flex,.flex-wrap > * { flex: 1; } .fl,.fr,.fn { text-align: center; } .fl { float: left; margin: 0 0.75em 0.5em 0; } .fr { float: right; margin: 0 0 0.5em 0.75em; } .fn { float: none; margin: 0.5em auto; } .note { font-size: 0.8em !important; } ul.quicklinks { text-align: center; margin: 0.5em 0 !important; padding: 0 !important; list-style: none; } ul.quicklinks li { display: inline; margin: 0 !important; padding: 0 0.4em !important; } ul.quicklinks li:not(:last-child) { border-right: solid 1px #000; } /**************/ /* Legacy CSS */ /* Sections */ /************/ #sections .tabs li a[href$="feed.rss"]::after { font-family: "Font Awesome 6 Free"; font-size: smaller; content: "\f09e"; font-weight: 900; color: white; background-color: orange; margin-left: 5px; border-radius: 3px; padding: 3px; } /************/ /* Sections */ #report-header { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 15px; padding: 0.33em 0; box-shadow: 0 -5px 3px -3px var(--gray), 0 5px 3px -3px var(--gray); } #report-display { min-height: 250px; } .loader-overlay .noaa-loader { top: 100px; } /* Year Links */ /**************/ #year-selection { display: flex; max-width: 100%; width: fit-content; margin: auto; gap: 5px; overflow-x: auto; padding: 10px; border-radius: 8px; box-shadow: inset 0 0 10px #000000 } .year-select { width: 52px; } /**************/ /* Year Links */ /* SOTC Cards */ /**************/ .sotc-cards { flex: 1; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: stretch; margin: 0; padding: 0; list-style: none; } .sotc-cards .card { max-width: 335px; min-width: 245px; max-height: 317px; margin: 10px 5px; } @media (min-width: 1200px) { .sotc-cards .card { flex: 0 0 calc(25% - 10px); } } @media (min-width: 992px) and (max-width: 1199px) { .sotc-cards .card { flex: 0 0 calc(33% - 10px); } } @media (max-width: 991px) { .sotc-cards .card { flex: 0 0 calc(50% - 10px); } } @media (max-width: 575px) { .sotc-cards .card { min-width: 100%; max-width: 100%; width: 100%; } } #year-selection .btn-primary.climate-assessment, .sotc-cards .card.climate-assessment .btn-primary { border-color: #162e51 !important; } /**************/ /* SOTC Cards */ /* TOC */ /*******/ #scopes { justify-content: flex-start; margin: 0 !important; } #home-toc .scope-title { flex-basis: 100%; padding: 0.5em; font-size: 1.25em; color: rgba(22, 46, 81, 0.85); border-bottom: solid 1px rgba(22, 46, 81, 0.25); margin-bottom: 0.25em; padding-bottom: 0.25em; } @media (min-width: 576px) { #scopes > * { flex: 0 1 10rem; } } /*******/ /* TOC */ /* Page Navbar */ /***************/ nav.page-sections { width: 100%; box-shadow: 0 8px 6px -6px rgba(0,0,0,0.4); position: relative; margin-bottom: 1rem; -webkit-transition: background 0.5s linear; -moz-transition: background 0.5s linear; -o-transition: background 0.5s linear; transition: background 0.5s linear; } nav.page-sections ul { margin: 0 !important; padding: 0 !important; } nav.page-sections ul * { transition: background 0.25s linear; } nav.page-sections ul li { list-style: none; margin: 0 !important; padding: 0 !important; } nav.page-sections .page-item { text-decoration: none; display: block; height: 100%; padding: 1em; } nav.page-sections > ul > li > ul, nav.page-sections > ul > li > ul > li, nav.page-sections > ul > li > ul > li > ul { visibility: hidden; opacity: 0; height: 0; list-style: none; -webkit-transition: visibility 0s, opacity 0.15s linear; -moz-transition: visibility 0s, opacity 0.15s linear; -o-transition: visibility 0s, opacity 0.15s linear; transition: visibility 0s, opacity 0.15s linear; } nav.page-sections.sticky { position: fixed !important; top: 0; z-index: 1000; } .shortTitle { display: none; } .longTitle { display: inline; } @media only screen and (min-width: 576px) and (max-width: 1199px) { .shortTitle { display: inline; } .longTitle { display: none; } } @media only screen and (min-width: 576px) { nav.page-sections ul { display: flex; align-items: stretch; justify-content: space-evenly; flex-wrap: wrap; } nav.page-sections ul li { flex: 1; text-align: center; } nav.page-sections > ul > li > ul, nav.page-sections > ul > li > ul > li > ul { position: absolute; left: 0; top: 100%; width: 100%; box-shadow: 0 8px 6px -6px rgba(0,0,0,0.4); } nav.page-sections > ul > li:hover > ul, nav.page-sections > ul > li:hover > ul > li, nav.page-sections > ul > li:hover > ul > li:hover > ul, nav.page-sections > ul > li:hover > ul > li:hover > ul > li { visibility: visible; height: auto; opacity: 1; } nav.page-sections > ul > li .page-item { color: #0050d8; background-color: rgba(17,46,81,0.05); } nav.page-sections > ul > li:hover .page-item { color: #0050d8; background-color: rgba(198,202,206,0.9); } nav.page-sections > ul > li > ul > li .page-item { color: #0050d8; background-color: rgba(136,146,157,0.95); } nav.page-sections > ul > li > ul > li:hover .page-item { color: #0050d8; background-color: rgba(170,178,188,0.95); } nav.page-sections > ul > li:hover > ul > li:hover > ul > li .page-item { color: #0050d8; background-color: rgba(170,178,188,0.95); } nav.page-sections > ul > li:hover > ul > li:hover > ul > li:hover .page-item { color: #0050d8; background-color: rgba(127,139,155,0.95); } nav.page-sections span.page-item { cursor: default; color: #3d4551 !important; } nav.page-sections :hover span.page-item { cursor: default; color: #1c1d1f !important; } nav.page-sections.sticky > ul > li .page-item { color: #ffffff; background-color: rgba(17,46,81,0.9); } nav.page-sections.sticky > ul > li:hover .page-item { color: #ffffff; background-color: rgba(61,69,81,0.9); } nav.page-sections.sticky > ul > li > ul > li .page-item { color: #ffffff; background-color: rgba(50,58,68,0.9); } nav.page-sections.sticky > ul > li > ul > li:hover .page-item { color: #ffffff; background-color: rgba(77,85,95,0.9); } nav.page-sections.sticky > ul > li:hover > ul > li:hover > ul > li .page-item { color: #ffffff; background-color: rgba(77,85,95,0.9); } nav.page-sections.sticky > ul > li:hover > ul > li:hover > ul > li:hover .page-item { color: #ffffff; background-color: rgba(102,106,111,0.9); } nav.page-sections.sticky span.page-item { cursor: default; color: #c6cace !important; } nav.page-sections.sticky :hover span.page-item { cursor: default; color: #dcdee0 !important; } } @media only screen and (max-width: 575px) { nav.page-sections { background-color: rgba(28,29,31,0.15); } nav.page-sections::before { content: 'Contents of this Report'; font-weight: bold; margin: 10px !important; } nav.page-sections.sticky::before { color: #8d9297; } } /***************/ /* Page Navbar */ /* Form */ /********/ .sotc-form { margin: 1em auto; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; } .sotc-form label { display: inline-block; text-align: left; } @media (min-width:576px) and (max-width:991px) { .sotc-form > *:not(#submit-div) { flex: 1 0 auto; } .sotc-form:not(#summary-info-selection) label { width: 65px; } .sotc-form:not(#summary-info-selection) #report-select { width: 100%; } .sotc-form:not(#summary-info-selection) select { width: calc(100% - 70px); } } @media (max-width:575px) { .sotc-form > * { flex: 1 0 100%; width: 100%; } .sotc-form label { width: 65px; } .sotc-form select { width: calc(100% - 70px); } } /********/ /* Form */ /* PDF */ /*******/ .report-content, .report-content *, .supplemental-content, .supplemental-content * { break-inside: avoid; page-break-inside: avoid; -webkit-column-break-inside: avoid; } .download-pdf { position: fixed; bottom: 5px; left: 12px; z-index: 9999; } @media print { .pdf-scale { transform: scale(0.75); transform-origen: top left; width: 7.5in; margin: 0 auto; } .pdf-scale * { break-inside: avoid; } } .pdf-scale table { width: 100%; max-width: 700px; word-wrap: break-word; break-inside: avoid; overflow: visible !important; border-collapse: collapse; table-layout: auto; } .pdf-scale table tr { display: table-row !important; height: auto !important; break-inside: avoid; } .pdf-scale table th, .pdf-scale table td { word-break: break-word; white-space: normal; vertical-align: top; font-size: 0.8em; height: unset !important; } .pdf-scale th.top-merged-cell { border-bottom-color: #162e51 !important; } .pdf-scale tr.even td.top-merged-cell { border-bottom-color: white !important; } .pdf-scale tr.odd td.top-merged-cell { border-bottom-color: #dcdee0 !important; } /*******/ /* PDF */ /* Related Materials */ /*********************/ #related-materials > * { margin: 1rem auto; padding: 0.5em 1em; background: linear-gradient(rgba(17,46,81,0.05),rgba(17,46,81,0.01)); border-radius: 3px; box-shadow: 0 5px 5px 2px #c6cace; } #additional-resources-flexbox { display: flex; justify-content: space-between; flex-wrap: wrap; } #additional-resources-flexbox > * { flex-grow: 1; } @media (min-width: 1200px) { #additional-resources-flexbox > * { max-width: 50%; } } /*********************/ /* Related Materials */ /* Image Set */ /*************/ .image-set { display: flex; justify-content: space-evenly; } .image-set.image-set-min-width { flex-wrap: wrap; } .image-set > * { flex: 1; } @media (max-width: 400px) { .image-set { overflow: auto; } } /*************/ /* Image Set */ /* Float Image */ /***************/ .float-image { width: 48%; } /***************/ /* Float Image */ /* Rollovers */ /*************/ .rollover { position: relative; } .rollover img { position: absolute; display: none; } .rollover:hover img { display: block; left: 0; top: 1em; } /*************/ /* Rollovers */ /* Stats Table */ /***************/ table.stats-table tr.odd th, table.stats-table tr.odd td { background-color: #dcdee0; } table.stats-table tr.even th, table.stats-table tr.even td { background-color: #ffffff; } table.stats-table tr.odd a { color: #0050d8; } table.stats-table tr.even a { color: #0076d6; } table.stats-table td.section { background-color: #ffffff; font-weight: bold; text-align: left; border-top: solid 2px #000000; } table.stats-table td.header { font-weight: bold; text-align: left !important; } table.stats-table td.ties { font-size: 0.8em; } table.stats-table span.att { color: #8d9297; } p.stats-note { margin: 0; font-size: 0.9em !important; font-style: italic; } /***************/ /* Stats Table */ .totop,.top:not(tr.top) { text-align: right; } .warm { color: #e41d3d; } .cold { color: #2491ff; } div.available { text-align: center; } /* DYK */ /*******/ .dyk { margin: 1em auto; padding: 1em; border: solid 2px #3d4551; border-radius: 3px; background-color: #f1f3f6; -webkit-box-shadow: 3px 3px 2px 0 rgba(0, 0, 0, 0.4); -moz-box-shadow: 3px 3px 2px 0 rgba(0, 0, 0, 0.4); box-shadow: 3px 3px 2px 0 rgba(0, 0, 0, 0.4); } .dyk summary { color: #162e51; } .dyk h4, .dyk #article-title { text-align: center; } .dyk.floatLeft { width: 48%; margin: 1em 1em 1em 0 !important; } .dyk.floatRight { width: 48%; margin: 1em 0 1em 1em !important; } .dyk h4 { font-style: italic; } .dyk h5 { text-align: center; } .dyk p { text-align: justify; } .dyk details summary { text-align: left; } .dyk details[open] summary:after { content: 'Collapse'; } .dyk details[open] summary .dykTitle { display: none; } /*******/ /* DYK */ /* Circle Arrow */ /* Learn More /******************************************************************************************************************************************************************/ .circle-arrow { font-family: arial, sans-serif !important; position: relative; font-size: 0.75rem !important; line-height: 1.5 !important; display: inline-block; cursor: pointer; outline: none; border: 0; vertical-align: middle; text-decoration: none; background: transparent; padding: 0; width: 8rem; height: auto; } .circle-arrow .circle { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: relative; display: block; margin: 0; width: 1.5rem; height: 1.5rem; background: #3d4551; border-radius: 1.625rem; } .circle-arrow .circle .arrow { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0.0rem; bottom: 0; margin: auto; background: #fff; left: -0.125rem; width: 1.125rem; height: 0.125rem; background: none; } .circle-arrow .circle .arrow::before { position: absolute; content: ''; top: -0.1036rem; right: 0.0625rem; width: 0.325rem; height: 0.325rem; border-top: 0.125rem solid #fff; border-right: 0.125rem solid #fff; transform: rotate(45deg); } .circle-arrow .circle-arrow-text { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0.75rem 0; margin: 0 0 0 1.25rem; color: #3d4551; font-weight: 700; line-height: 0; text-align: center; text-transform: uppercase; } .circle-arrow:hover .circle { width: 100%; } .circle-arrow:hover .circle .arrow { background: #fff; transform: translate(0.75rem, 0); } .circle-arrow:hover .circle-arrow-text { color: #fff; } /****************/ /* Circle Arrow */ /* Triple Arrow */ /* */ /* Learn More */ /* */ /* */ /**/ /* */ /* */ /* Back */ /* */ /*****************/ .triple-arrow-link { font-size: 0.8em; text-decoration: none; color: rgb(0, 118, 214); background-color: #fafdff; border: 1px solid rgba(0, 118, 214, 0.25); border-radius: 5em; padding: 8px; transition: all 1s; } .triple-arrow-container { position: relative; display: inline-block; } .triple-arrow { display: inline-block; height: 0.5em; width: 0.5em; border: 1px solid rgba(0, 118, 214, 0.6); border-width: 3px 3px 0 0; margin-left: calc(0.5em + 3px); margin-right: calc(0.5em + 3px); transition: all .5s; } .triple-arrow:before, .triple-arrow:after { content: ''; position: absolute; display: block; height: 0.5em; width: 0.5em; border-width: 3px 3px 0 0; } .triple-arrow:before { border: 1px solid rgba(0, 118, 214, 1); border-width: 3px 3px 0 0; top: calc(0.5em - 3px); left: -0.5em; transition: all .75s; } .triple-arrow:after { border: 1px solid rgba(0, 118, 214, 0.3); border-width: 3px 3px 0 0; top: calc(-0.5em - 3px); left: 0.5em; transition: all 1s; } .triple-arrow-left { transform: rotate(225deg); } .triple-arrow-right { transform: rotate(45deg); } .triple-arrow-link:hover { background-color: #f1f3f6; color: rgb(0, 80, 216); border-color: rgba(0, 80, 216, 0.25); } .triple-arrow-link:hover .triple-arrow { border-color: rgba(0, 80, 216, 0.75); } .triple-arrow-link:hover .triple-arrow:before { border-color: rgba(0, 80, 216, 0.5); } .triple-arrow-link:hover .triple-arrow:after { border-color: rgba(0, 80, 216, 1); } /****************/ /* Triple Arrow */ #section-title { margin: 0.67em auto; font-family: "Merriweather",serif; font-weight: normal; font-style: normal; font-size: 36px; } .att { color: #8d9297; } h4#summary_info { margin-bottom: 0.5em; } div#summary-info h2, div#summary-info h3, div#summary-info h4 { margin-top: 1em; margin-bottom: 1em; } p.disclaimer { font-size: 0.8em; font-style: italic; }Fetched URL: http://www.ncei.noaa.gov/monitoring-content/sotc/css/sotc.css
Alternative Proxies: