CINXE.COM
Springshare
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Springshare</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <!-- ask.springshare.com system-level custom JS/CSS combined v2.3.4 --> <!-- External files needed for the site --> <!-- Preconnect to Google Fonts CDM --> <link rel="preconnect" href="https://fonts.gstatic.com"> <!-- Header font: Nanum Gothic--> <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet"> <!-- Body font: Raleway --> <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@200;400;600;700;800&display=swap" rel="stylesheet"> <!-- Material Icons - Basline theme: used for displaying icons from certain apps --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Material Icons - Outlined theme: used in the Ask site design (header, panels, alerts, etc.) --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"> <!-- Scripts --> <script> // remove-class.min.js: Remove a class from an element const removeClass = (elementId, className) => { document.getElementById(elementId).classList.remove(className) }; // title-bar-header.min.js: Apply uniform text to title bar header const setNavbarText = text => { const titleBar = "#s-la-page-title-bar", navbarHeader = `${titleBar} .navbar-header`, navbarText = `${navbarHeader} .navbar-text`; if (!document.querySelector(navbarText)) { const paragraph = document.createElement("p"); paragraph.classList.add("navbar-text"), document.querySelector(navbarHeader).appendChild(paragraph) } const selectNavbarText = document.querySelector(navbarText); selectNavbarText.innerText = text, selectNavbarText.classList.add("display") }; // faq-nav-box.min.js: FAQ "In this article" box generator const assignIds = headings => { headings.forEach((heading, i) => { heading.id || (heading.id = `heading${i}`) }) }, buildNavList = (answerId, headingLevel, listId) => { try { const headingList = document.querySelectorAll(`#${answerId} > ${headingLevel}`); headingList.length && (assignIds(headingList), headingList.forEach(heading => { const link = document.createElement("a"); link.setAttribute("href", `#${heading.id}`), link.innerText = heading.innerText; const listItem = document.createElement("li"); listItem.appendChild(link); const parentList = document.getElementById(listId); parentList.appendChild(listItem) }), removeClass("faq-nav", "hide")) } catch (e) { const msg = "Failed to build list!"; console.error(msg, e) } }; // scroll-to-anchor.min.js: Scroll to a section if URL contains a hash const scrollToAnchor = () => { const urlString = window.location.toString(), pageUrl = new URL(urlString), anchorId = pageUrl.hash.slice(1), targetElement = document.getElementById(anchorId); targetElement && targetElement.scrollIntoView(!0) }; // faq-audience.min.js: Display 'User' and 'System' keywords in FAQ metadata const getFaqId = () => { const faqUrl = window.location.toString(), regex = /faq\/\d+/g; if (regex.test(faqUrl)) { const faqId = faqUrl.match(regex)[0].toString().split("/")[1]; return faqId } }, appendKeywords = (keywords, prefix, listId, containerId) => { try { let keywordNames = []; const regex = new RegExp(`^${prefix}:\\s*\\S.+`, "i"); keywords.forEach(kw => { if (regex.test(kw.name)) { const keyword = kw.name.match(regex)[0].toString().split(`${prefix}:`)[1].trim(); keywordNames.push(keyword) } }), keywordNames.length && (keywordNames.forEach(name => { const span = document.createElement("span"); span.setAttribute("class", "label label-default"), span.innerText = name; const li = document.createElement("li"); li.appendChild(span); const list = document.getElementById(listId); list && list.appendChild(li) }), removeClass(containerId, "hide")) } catch (e) { const msg = "Failed to build list!"; console.error(msg, e) } }, buildAudienceLists = async groupId => { try { const apiUrl = "https://ask.springshare.com/api/1.0/faqs/", faqId = getFaqId(), iid = "1251", groupParam = groupId ? `&group_id=${groupId}` : ""; if (faqId) { const response = await fetch(`${apiUrl}${faqId}?iid=${iid}${groupParam}`); if (response.ok) { const faqData = await response.json(); if (faqData.faqs.length) { const faqKeywords = faqData.faqs[0].keywords; faqKeywords.length && (appendKeywords(faqKeywords, "User", "faq-users-list", "faq-meta-users"), appendKeywords(faqKeywords, "System", "faq-systems-list", "faq-meta-systems")) } } } } catch (e) { console.error(e) } }; // text-size-widget.min.js: Widget that allows users to increase/decrease text size const getHtmlFontSize = () => { const html = document.querySelector("html"), htmlStyles = window.getComputedStyle(html), fontSize = htmlStyles.getPropertyValue("font-size"); return Number.parseFloat(fontSize) }, toggleDisabled = (button, state) => { button.disabled = state }, checkBtnStates = (fontSize, buttons) => { const decreaseBtn = document.getElementById(buttons.decrease), increaseBtn = document.getElementById(buttons.increase), minFontSize = buttons.minimum, maxFontSize = buttons.maximum; fontSize === minFontSize ? toggleDisabled(decreaseBtn, !0) : fontSize === minFontSize + 1 && decreaseBtn.disabled ? toggleDisabled(decreaseBtn, !1) : fontSize === maxFontSize ? toggleDisabled(increaseBtn, !0) : fontSize === maxFontSize - 1 && increaseBtn.disabled && toggleDisabled(increaseBtn, !1) }, saveUserFontSize = fontSize => localStorage.setItem("userFontSize", fontSize.toString()), removeUserFontSize = () => localStorage.removeItem("userFontSize"), getUserFontSize = () => { const fontSize = localStorage.getItem("userFontSize"); return Number.parseFloat(fontSize) }, decreaseFontSize = buttons => { const html = document.querySelector("html"); let fontSize = getHtmlFontSize(); fontSize--, html.style.fontSize = `${fontSize}px`, checkBtnStates(fontSize, buttons), saveUserFontSize(fontSize) }, increaseFontSize = buttons => { const html = document.querySelector("html"), maxFontSize = buttons.maximum; let fontSize = getHtmlFontSize(); fontSize++, fontSize === maxFontSize ? (html.style.fontSize = null, removeUserFontSize()) : (html.style.fontSize = `${fontSize}px`, saveUserFontSize(fontSize)), checkBtnStates(fontSize, buttons) }, setupTextSizeWidget = (decBtnId, incBtnId, minFontSize, maxFontSize) => { const decreaseBtn = document.getElementById(decBtnId), increaseBtn = document.getElementById(incBtnId), buttons = {decrease: decBtnId, increase: incBtnId, minimum: minFontSize, maximum: maxFontSize}, fontSize = getUserFontSize() || getHtmlFontSize(), html = document.querySelector("html"); getUserFontSize() && (html.style.fontSize = `${fontSize}px`), checkBtnStates(fontSize, buttons), decreaseBtn.addEventListener("click", e => decreaseFontSize(buttons)), increaseBtn.addEventListener("click", e => increaseFontSize(buttons)) }; // Set up the text size widget as soon as DOM is loaded document.addEventListener('DOMContentLoaded', e => { setupTextSizeWidget('text-size-dec', 'text-size-inc', 16, 20); }); // Add event listener to run scripts after window loads window.addEventListener('load', e => { setNavbarText('Find Articles'); buildAudienceLists(); buildNavList('faq-answer', 'h3', 'section-links'); scrollToAnchor(); }); </script> <!-- Styles --> <style> /* s-la-override.min.css: Reset elements in LA stylesheet */ #s-la-bc .s-la-color-bars, #s-la-page-title-bar-topics .badge, #s-la-public-header, .alert, .alert-danger, .alert-info, .alert-success, .alert-warning, .badge, .container, .label, .label-danger, .label-default, .label-info, .label-success, .label-warning, .panel, .panel-body, .panel-danger, .panel-danger > .panel-heading, .panel-default, .panel-default > .panel-heading, .panel-heading, .panel-heading .panel-title, .panel-info, .panel-info > .panel-heading, .panel-success, .panel-success > .panel-heading, .panel-title, .panel-warning, .panel-warning > .panel-heading, .s-la-box-container, .s-la-box-content, .s-la-box-content h3, .s-la-box-title, .s-la-box-title h2, .s-la-faq-action-bar .collapse, .s-la-faq-action-bar .navbar-nav, .s-la-faq-action-bar .navbar-right, .s-la-faq-listing-q, .s-la-faq-media-wrapper, .s-la-public-header-description, .s-la-public-header-text, .s-srch-params, .s-srch-result, .s-srch-result .label, .s-srch-result .label-default, .s-srch-result-meta, .s-srch-result-title, .s-srch-top-header, blockquote, blockquote ol:last-child, blockquote p:last-child, blockquote ul:last-child, caption, code, figcaption, figure, h1, h1#s-la-public-header-title, h2, h3, h4, h5, h6, hr, img, kbd, legend, p, pre, samp, span.marker, table, td, th, tt, video { box-sizing: border-box; padding: revert; margin: revert; display: revert; background: unset; background-color: unset; color: unset; border: none; float: none; position: revert; width: revert; height: revert; vertical-align: revert; font-size: revert; font-weight: revert; line-height: revert; text-decoration: unset } li, ol, ul { padding: revert; margin: revert; line-height: revert } .alert-danger:hover { color: revert } @media print { h1, h2, h3, h4, h5, h6 { font-size: revert !important; font-weight: revert } } /* header.min.css: Springy header styles */ #springy-navbar { --color-navbar-bg: #004E80; --color-navbar-bg-secondary: #F5F5F5; --color-navbar-text: #FFF; --color-navbar-menu-bg: #FFF; --color-navbar-menu-text: #25282B; --color-navbar-shadow: #000; --font-navbar-brand: "Nanum Gothic", "Century Gothic", CenturyGothic, AppleGothic, sans-serif; --font-navbar-dropdown: 'Raleway', Arial, sans-serif } #springy-navbar .navbar-brand { color: var(--color-navbar-text) } #sites-nav-logo { max-width: 120px; height: auto; float: left; margin-right: 7px; margin-top: -1px } #springy-navbar .navbar { background-color: var(--color-navbar-bg); box-shadow: 0 0 10px 0 var(--color-navbar-shadow); border-radius: 0; margin-bottom: 10px; border: none; font-size: 1rem } #springy-navbar .navbar-brand, #springy-navbar-collapse-1 > ul > li { font-size: 20px; line-height: 1; font-family: var(--font-navbar-brand) } #springy-navbar .navbar-header, #springy-navbar .navbar-nav { padding-top: 5px } #springy-navbar .navbar-text { color: var(--color-navbar-text); padding-right: 10px } #springy-navbar a, #springy-navbar a:focus, #springy-navbar a:hover { text-decoration: none } #springy-navbar .navbar-header > a:focus-visible, #springy-navbar .navbar-nav > li > a:focus-visible { outline: 1px dotted var(--color-navbar-text) } #springy-navbar-collapse-1 .navbar-nav > li > a { padding: 15px 14px } #springy-navbar .navbar-default .navbar-nav > li > a, #springy-navbar .navbar-default .navbar-nav > li > a:focus, #springy-navbar .navbar-default .navbar-nav > li > a:hover, #springy-navbar .navbar-default .navbar-nav > li > a > i { color: var(--color-navbar-text) } #springy-navbar .navbar-default .navbar-nav > .open > a, #springy-navbar .navbar-default .navbar-nav > .open > a:focus, #springy-navbar .navbar-default .navbar-nav > .open > a:hover, #springy-navbar .navbar-default .navbar-nav > .open > a > i { color: var(--color-navbar-menu-text) } #springy-navbar .dropdown-menu > li > a { font-family: var(--font-navbar-dropdown); font-size: 16px; color: var(--color-navbar-menu-text) } #springy-navbar .navbar-nav .open .dropdown-menu { background-color: var(--color-navbar-menu-bg) } @media (max-width: 767px) { #springy-navbar .navbar-default .navbar-nav .open .dropdown-menu > li > a { font-size: 1rem; color: var(--color-navbar-menu-text) } } #springy-navbar .navbar-toggle { background-color: var(--color-navbar-bg-secondary) } #springy-navbar .navbar-toggle .icon-bar { background-color: var(--color-navbar-menu-text) } #springy-navbar .navbar-toggle.collapsed { background-color: var(--color-navbar-bg) } #springy-navbar .navbar-toggle.collapsed .icon-bar { background-color: var(--color-navbar-text) } /* text-size-widget.min.css: Styles for the text size widget */ #text-size-widget { --color-text-widget: #D9D9D9; --color-text-widget-btn-bg: #FFF; --color-text-widget-btn-text: #25282B; --text-widget-border-radius: 5px } #text-size-widget { display: none } @media (any-pointer: fine) { #s-la-bc { float: left } #s-la-public-header { clear: both } #text-size-widget { display: flex; float: right; padding: 5px 20px; margin: 10px 0; font-size: 14px } @media screen and (min-width: 1500px) { #text-size-widget { margin-right: calc((100vw - 1500px) / 2) } }#text-size-widget-label { flex: 1 1; padding: 2px 4px } #text-size-buttons { border: 1px solid var(--color-text-widget); border-radius: var(--text-widget-border-radius); background-color: var(--color-text-widget) } #text-size-buttons button { width: 30px; font-weight: 700; border: 0; background-color: var(--color-text-widget-btn-bg); color: var(--color-text-widget-btn-text); padding: 2px 4px } #text-size-buttons button:active { box-shadow: inset 1px 1px 3px 0 } #text-size-buttons button:focus-within { outline: 2px solid } #text-size-buttons button:disabled { cursor: not-allowed; opacity: .5 } #text-size-dec { border-radius: var(--text-widget-border-radius) 0 0 var(--text-widget-border-radius); margin-right: -1px } #text-size-inc { border-radius: 0 var(--text-widget-border-radius) var(--text-widget-border-radius) 0; margin-left: -1px } } /* footer.min.css: Springy footer styles */ #springy-footer { --color-footer-bg: #FFF; --color-footer-border: #919191 } #s-la-public-footer { display: none } #springy-footer { background-color: var(--color-footer-bg); border-top: 1px solid var(--color-footer-border); padding-left: 15px; padding-right: 15px; display: flex; justify-content: center; flex-wrap: wrap; margin-top: 50px } #springy-footer a { font-size: .7rem } #footer-social { flex-grow: 1 } #footer-nav, #footer-social { padding-top: 5px; padding-bottom: 8px } #footer-nav a { margin-right: 10px } #footer-nav a:last-of-type { margin-right: 0 } .social-icons { display: inline; list-style-type: none; padding-left: 0 } .social-icon > a > .svg-icon-component { height: 20px; width: 20px; padding-top: 5px } .social-icon { display: inline-block; margin-right: 10px } .social-icon:last-of-type { margin-right: 0 } /* scrolltop.min.css: Scroll-to-top widget styles */ #scroll-top { --color-scrolltop: #FFF; --color-scrolltop-bg: #555; --color-scrolltop-hover-bg: #000; --color-scrolltop-shadow: #000 } #scroll-top { position: fixed; bottom: 3em; right: 1em; z-index: 100; text-decoration: none } #scroll-top span { background-color: var(--color-scrolltop-bg); border-radius: 15px; opacity: .4; color: var(--color-scrolltop); box-shadow: 0 3px 5px var(--color-scrolltop-shadow); padding: 10px } #scroll-top a, #scroll-top:focus, #scroll-top:hover { text-decoration: none; background-color: transparent } #scroll-top:hover { cursor: pointer } #scroll-top span:hover { background-color: var(--color-scrolltop-hover-bg); opacity: 1; box-shadow: none } /* ask.min.css: Original styles */ :root { --color-bg-primary: #FFF; --color-bg-secondary: #F5F5F5; --color-accent-primary: #0C4376; --color-accent-secondary: #FAA33D; --color-text: #25282B; --color-text-light: #FFF; --color-marker-bg: #FFE1BD; --color-link-default: #333; --color-link-hover: #25282B; --color-link-hover-bg: #DADADA; --color-border: #D9D9D9; --color-info: #2179AA; --color-warning-icon: #AF9100; --color-warning-border: #DAB501; --color-success: #0E7C0E; --color-danger: #D3443D; --font-primary: 'Raleway', Arial, sans-serif; --font-pre: Consolas, monaco, monospace; --font-samp: 'Courier New', Courier, monospace; --border-radius: 5px } html { font-size: 20px } @media screen and (max-width: 1120px) { html { font-size: 16px } } body { background-color: var(--color-bg-primary); font-family: var(--font-primary); font-size: 1rem; color: var(--color-text); line-height: 1.4 } h1, h1#s-la-public-header-title { font-size: 2rem; margin-bottom: 5px } .s-la-box-title h2, h2 { font-size: 1.75rem; margin-bottom: 5px } .s-la-box-content h3, h3 { font-size: 1.5rem; border-bottom: 3px solid var(--color-accent-secondary); margin-top: 50px; margin-bottom: 20px } h4 { font-size: 1.25rem; border-left: 5px solid var(--color-accent-secondary); padding-left: 5px; margin-bottom: 20px } h5 { font-size: 1.125rem; font-style: italic; text-transform: uppercase; margin-bottom: 20px } h6 { font-size: 1rem; font-style: italic; text-transform: uppercase; margin-bottom: 20px } a, .alert-danger a:not(.btn), .alert-info a:not(.btn), .alert-success a:not(.btn), .alert-warning a:not(.btn) { color: var(--color-link-default); text-decoration: underline } a:focus, a:hover { background-color: var(--color-link-hover-bg); color: var(--color-link-hover) } a:focus-visible { outline: 1px dotted var(--color-accent-primary) } a:active { text-decoration: none } #s-la-page-maincontent li { margin: 5px 0 } ul li::marker { font-family: sans-serif; font-size: 1.1rem } span.marker { background-color: var(--color-marker-bg) } blockquote { background-color: #f5f5f5; border-left: 5px solid var(--color-border); padding: 10px } blockquote > :first-child { margin-top: 0 } blockquote > :last-child, blockquote > ol:last-child, blockquote > p:last-child, blockquote > ul:last-child { margin-bottom: 0 } hr { border: 2px solid var(--color-border); width: 80%; margin: 40px auto } code { font-family: var(--font-pre); font-size: .8rem; background-color: var(--color-bg-secondary); padding: 3px } pre { font-family: var(--font-pre); font-size: .8rem; background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: 10px; white-space: pre-wrap; word-break: break-word; overflow-x: auto } samp, tt { font-family: var(--font-samp) } kbd { font-family: var(--font-pre); font-size: .8rem; background-color: var(--color-bg-secondary); border: 2px solid var(--color-border); border-radius: var(--border-radius); padding: 1px 5px; min-width: 30px; display: inline-block; text-align: center; box-shadow: none } #s-la-page-maincontent img { display: block; margin: 20px auto; border: 1px solid var(--color-border); border-radius: var(--border-radius); max-width: 100% !important; height: auto !important } figure { margin: 20px 0; background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: 10px; display: flex; align-items: center; flex-direction: column } #s-la-page-maincontent figure img { border: none; border-radius: 0; margin: 0 } figure table { display: block; border-collapse: collapse; max-width: 100%; overflow-x: auto; margin-bottom: 0 } figure td, figure th { padding: 10px; background-color: var(--color-bg-primary); border-bottom: 2px solid var(--color-border); border-right: 1px solid var(--color-border) } figure tr:first-of-type { border-top: 3px solid var(--color-border) } figure tr:last-of-type { border-bottom: 3px solid var(--color-border) } figure td:last-child, figure th:last-child { border-right: none } figcaption { font-size: .8rem; font-style: italic; text-align: center; margin-top: 10px } table, td, th, tr { border-collapse: collapse } .material-icons-outlined { vertical-align: top } .material-icons-outlined.info { color: var(--color-info) } .material-icons-outlined.warning { color: var(--color-warning-icon) } .material-icons-outlined.success { color: var(--color-success) } .material-icons-outlined.danger { color: var(--color-danger) } .alert { padding: 20px; border: 1px solid transparent; border-left-width: 10px; border-radius: var(--border-radius); margin-top: 20px; margin-bottom: 20px } .alert-icon { float: left; margin-right: 10px } .alert-heading { font-weight: 700; margin-bottom: 5px } .alert-info { border-color: var(--color-info) } .alert-warning { border-color: var(--color-warning-border) } .alert-success { border-color: var(--color-success) } .alert-danger { border-color: var(--color-danger) } .label, .s-srch-result .label { font-size: .7rem; padding: 3px 6px; border: 1px solid transparent; border-radius: var(--border-radius) } .label a:focus, .label a:hover, .s-srch-result .label a:focus, .s-srch-result .label a:hover { background-color: transparent } .faq-meta-list .label-topic, .label-default, .s-la-faq-listing-meta .label-topic, .s-la-faq-topics .label-topic, .s-srch-result .label-default { border-color: var(--color-border); background-color: var(--color-bg-secondary) } .faq-meta-list .label-topic a, .label-default a, .s-la-faq-listing-meta .label-topic a, .s-la-faq-topics .label-topic a, .s-srch-result .label-default a { color: var(--color-text) } .label-success a:focus-visible { outline-color: var(--color-text) } .label-info { border-color: var(--color-info); background-color: var(--color-info); color: var(--color-text-light) } .label-info a { color: var(--color-text-light) } .label-info a:focus-visible { outline-color: var(--color-text-light) } .label-warning { border-color: var(--color-warning-border); background-color: var(--color-warning-border); color: var(--color-text) } .label-warning a { color: var(--color-text) } .label-warning a:focus-visible { outline-color: var(--color-text) } .label-success { border-color: var(--color-success); background-color: var(--color-success); color: var(--color-text-light) } .label-success a { color: var(--color-text-light) } .label-success a:focus-visible { outline-color: var(--color-text-light) } .label-danger { border-color: var(--color-danger); background-color: var(--color-danger); color: var(--color-text-light) } .label-danger a { color: var(--color-text-light) } .label-danger a:focus-visible { outline-color: var(--color-text-light) } #s-la-page-title-bar-topics .badge, .badge { background-color: var(--color-accent-primary); border: 1px solid var(--color-accent-primary); border-radius: 20px; color: var(--color-text-light); font-size: .7rem; font-weight: 700; min-width: 26px; text-align: center; float: right } .panel { display: flex; flex-flow: column; border: 1px solid transparent; border-radius: var(--border-radius); margin-top: 20px; margin-bottom: 20px } .panel .panel-heading { padding: 10px 20px } .panel-body { flex: 1 1; padding: 0 20px; background-color: var(--color-bg-primary); border-radius: 0 0 var(--border-radius) var(--border-radius) } .panel-heading .panel-title { font-size: 1rem; font-weight: 700; margin: 0 } .panel-heading .panel-title > a:focus, .panel-heading .panel-title > a:hover { background-color: inherit; color: inherit } .panel-default { border-color: var(--color-border); background-color: var(--color-bg-secondary) } .panel-default .panel-heading { border-bottom: 1px solid var(--color-border) } .panel-info { border-color: var(--color-info); background-color: var(--color-info) } .panel-info .panel-heading { border-bottom: 1px solid var(--color-info); color: var(--color-text-light) } .panel-warning { border-color: var(--color-warning-border); background-color: var(--color-warning-border) } .panel-warning .panel-heading { border-bottom: 1px solid var(--color-warning-border) } .panel-success { border-color: var(--color-success); background-color: var(--color-success) } .panel-success .panel-heading { border-bottom: 1px solid var(--color-success); color: var(--color-text-light) } .panel-danger { border-color: var(--color-danger); background-color: var(--color-danger) } .panel-danger .panel-heading { border-bottom: 1px solid var(--color-danger); color: var(--color-text-light) } details { border: 1px solid var(--color-border); border-radius: var(--border-radius); margin-top: 20px; margin-bottom: 20px } summary { border-bottom: 1px solid var(--color-border); border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); background-color: var(--color-bg-secondary); padding: 10px; font-weight: 700 } .details-body { padding: 0 10px } .hide { display: none } .grid { display: grid; gap: 20px; margin: 20px 0 } .grid.cols-1-1 { grid-template-columns:1fr 1fr } .grid.cols-2-1 { grid-template-columns:2fr 1fr } .grid.cols-3-1 { grid-template-columns:3fr 1fr } @media screen and (max-width: 1120px) { .grid { display: block !important } .grid > div { margin: 40px 0 } } .card-container { display: flex; justify-content: space-between } .card { flex: 1 1 300px; margin: 20px 10px; border: 1px solid var(--color-border); border-radius: var(--border-radius); min-height: 300px } .card.padded { padding: 20px } .padded :first-child { margin-top: 0 } .padded :last-child { margin-bottom: 0 } .card.static { flex-grow: 0 } @media screen and (max-width: 768px) { .card-container { flex-wrap: wrap } } .container { max-width: 1500px; margin: 0 auto; padding: 0 20px } #s-la-bc .s-la-color-bars { font-size: .7rem; padding: 5px 0 } #s-la-bc .breadcrumb .active { color: var(--color-text) } .s-la-public-header-text { text-align: center; margin-bottom: 40px } #s-la-page-title-bar .navbar { padding: 5px } #s-la-page-title-bar .s-la-color-bars { background: var(--color-bg-secondary) } #s-la-page-title-bar .s-la-color-bars-border { border-color: var(--color-border) } #s-la-page-title-bar .navbar-header .navbar-text { display: none } @media screen AND (min-width: 768px) { #s-la-page-title-bar .form-group, #s-la-page-title-bar .form-group .col-xs-3, #s-la-page-title-bar .form-group .col-xs-9, #s-la-page-title-bar .navbar-form, #s-la-page-title-bar .navbar-left { width: 100%; float: none; position: revert; display: revert } #s-la-page-title-bar .form-group button, #s-la-page-title-bar .form-group input { width: 100%; display: revert } #s-la-browsebar-collapse { display: flex !important } .s-la-content-search { flex: 1 1 } #s-la-page-title-bar .form-group { display: flex; padding-top: 4px } .s-la-content-search .form-group .col-xs-9 { flex: 1 1; padding: 0 } .s-la-content-search .form-group .col-xs-3 { flex: 0 1 } .s-la-navbrowse { float: right } } #s-la-page-title-bar .form-group button, #s-la-page-title-bar .form-group input { height: 32px; font-size: .8rem } #s-la-page-title-bar .form-group button { padding: 2px 8px } #s-la-page-title-bar .s-ui-autocomplete-list { font-size: .8rem; padding: 5px 10px; color: var(--color-text) } .s-ui-autocomplete-list li:hover { background-color: var(--color-bg-secondary) } .s-la-navbrowse { border: 0; border-radius: 0; background-color: var(--color-bg-secondary) } .navbar-nav.s-la-navbrowse > li > a, .navbar-nav.s-la-navbrowse > li > a:active, .navbar-nav.s-la-navbrowse > li > a:focus, .navbar-nav.s-la-navbrowse > li > a:hover { color: var(--color-text); text-decoration: none; font-size: 1rem; padding: .5rem 15px; background-color: transparent } .dropdown-menu > li > a { font-size: .8rem; line-height: 1.4; color: var(--color-text); font-weight: 500; display: block; padding: 3px 20px; clear: both; white-space: nowrap } #s-la-page-title-bar .navbar-text { color: var(--color-text); font-weight: 700; font-size: 1rem } .s-la-navbrowse .navbar-text { margin-right: 7px } #s-la-page-title-bar-topics .topic_item { margin-right: 50px } #s-la-page-title-bar-topics .dropdown-menu { overflow-x: hidden } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover { color: var(--color-text) } @media screen AND (max-width: 767px) { #s-la-page-title-bar .navbar-text, .navbar-nav.s-la-navbrowse li a, .navbar-nav.s-la-navbrowse > li > a:focus, .navbar-nav.s-la-navbrowse > li > a:hover { font-size: .9rem; padding-left: 10px; padding-right: 10px } .s-la-navbrowse .navbar-text { margin: 6px 0 } #s-la-page-title-bar .navbar-header .navbar-text { margin: 14px 8px; font-size: 1rem } #s-la-page-title-bar .navbar-header .navbar-text.display { display: block } #s-la-page-title-bar .navbar-form { padding-left: 0 } .navbar-nav .open .dropdown-menu { background-color: var(--color-bg-primary) } .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: var(--color-text); text-overflow: ellipsis; overflow-x: hidden } } #s-ui-cc-msg { padding: 0 20px } #s-ui-cc-read-more-link:focus, #s-ui-cc-read-more-link:hover { background-color: transparent } #homepage-cards { flex-wrap: wrap; justify-content: space-around } #homepage-cards .card { background-color: var(--color-bg-secondary) } @media screen AND (min-width: 1024px) { #homepage-cards .card { flex-basis: 350px } } @media screen AND (max-width: 1024px) { #homepage-cards .card { min-height: 250px } } .product-heading { display: flex; justify-content: flex-end; padding: 10px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom: 4px solid var(--color-border); background-color: var(--color-bg-primary) } #card-libguides .product-heading { border-bottom-color: #3799E2; } #card-libguides .material-icons { color: #3799E2; } #card-libanswers .product-heading { border-bottom-color: #FADB4F; } #card-libanswers .material-icons { color: #FADB4F; } #card-libcal .product-heading { border-bottom-color: #82BE40; } #card-libcal .material-icons { color: #82BE40; } #card-libapps .product-heading { border-bottom-color: #186adc; } #card-libapps .material-icons { color: #186adc; } #card-libwizard .product-heading { border-bottom-color: #F99900; } #card-libwizard .material-icons { color: #F99900; } #card-libinsight .product-heading { border-bottom-color: #F9531F; } #card-libinsight .material-icons { color: #F9531F; } #card-libstaffer .product-heading { border-bottom-color: #9B7CD7; } #card-libstaffer .material-icons { color: #9B7CD7; } #card-libcrm .product-heading { border-bottom-color: #1B4E80; } #card-libcrm .material-icons { color: #1B4E80; } #card-help .product-heading { border-bottom-color: #186adc; } #card-help .material-icons { color: #186adc; } .product-img { flex: 0 5 100px; display: flex; justify-content: center; align-items: center } .product-img span { font-size: 2.5rem } .product-info { display: flex; flex-flow: column wrap; flex: 1 2 300px } .card .product-name { margin: 0; border-bottom: none } .card .product-description { font-size: .7rem } .product-menu { padding: 20px } .product-menu-list { padding-left: 20px; margin: 0 } #product-intro-cards { flex-wrap: wrap; justify-content: space-between } #product-intro-cards .card { background-color: var(--color-bg-secondary) } #card-learn-more { flex: 2 1 500px } #card-need-more-help, #card-upcoming-training { flex: 1 1 300px } @media screen AND (min-width: 1024px) { #card-need-more-help, #card-upcoming-training { flex: 1 1 350px } } #card-upcoming-training .product-menu > p:first-child { margin-top: 0 } .training-events .s-lc-ea-h3 { display: none } .training-events .s-lc-ea-date { font-size: .8rem } .training-events ul { list-style: none; padding-left: 0; border-top: 2px solid var(--color-border) } .training-events ul > li { border-bottom: 1px solid var(--color-border); padding-bottom: 5px; padding-top: 5px } #faq-heading { margin-bottom: 40px } #faq-meta { display: flex; flex-wrap: wrap; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin-top: 10px; padding: 10px 0 } .faq-meta-container { display: flex; flex-wrap: wrap; margin-right: 20px } .faq-meta-title { font-size: 1rem; font-weight: 700; padding: 5px 5px 5px 0 } .faq-meta-list { display: flex; flex-wrap: wrap; list-style-type: none; padding-left: 0; margin: 0 } .faq-meta-list > li { display: inline; padding: 0 5px } @media screen and (min-width: 813px) { #faq-grid { grid-template-areas:"answer nav" "answer sidebar"; grid-template-rows:0fr 1fr; row-gap: 0 } #faq-answer { grid-area: answer } #faq-nav { grid-area: nav } #faq-sidebar { grid-area: sidebar } } #faq-answer > :first-child { margin-top: 0 } #faq-nav, #faq-sidebar .panel { margin-bottom: 40px } #faq-nav, #faq-sidebar .panel:first-child { margin-top: 0 } #faq-nav-title { margin: 0; font-size: 1rem } #faq-nav .panel-body, #faq-sidebar .panel-body { padding: 0 } #faq-nav ul, #faq-sidebar ul { list-style-type: none; padding: 0; margin: 0 } #faq-nav ul > li, #faq-sidebar ul > li { border-bottom: 1px solid var(--color-border); padding: 10px 20px; margin: 0 } #faq-nav ul > li:last-child, #faq-sidebar ul > li:last-child { border-bottom: none } #s-la-page-column-1 .s-la-faq-action-bar .s-la-color-bars-border, .s-la-faq-action-bar .s-la-color-bars { background: 0 0; border: none } .s-la-faq-action-bar .navbar { min-height: 0 } .s-la-faq-action-bar .navbar-right { float: none !important; padding: 0 } #s-la-faq-fblink, #s-la-faq-printlink, #s-la-faq-tweetlink, #s-la-vote, .s-la-faq-action-bar .navbar-header { display: none } #editlink { background-color: var(--color-bg-secondary); border-radius: var(--border-radius); border: 1px solid var(--color-border); padding: 10px 20px; display: flex; justify-content: space-between; float: none } #editlink a { display: inline; margin-left: 20px; padding: 0; line-height: 1.4 } #editlink a, #editlink a:hover { color: var(--color-text); text-decoration: underline } #editlink a:active { text-decoration: none } #editlink:before { content: 'You are logged into Ask.' } .s-la-faq-action-bar .navbar-nav { margin: 0 } .s-srch-top-header { display: none } .s-srch-header, .s-srch-pagination, .s-srch-range, .s-srch-range button { font-size: .8rem } .s-srch-sorter { text-decoration: none; font-size: .8rem } .s-srch-pagination .pagination a { font-size: .8rem } .s-srch-pagination .pagination > li > a, .s-srch-pagination .pagination > li > span { color: var(--color-accent-primary); border-color: var(--color-border); background-color: var(--color-bg-primary) } .s-srch-pagination .pagination > li > a:focus, .s-srch-pagination .pagination > li > a:hover, .s-srch-pagination .pagination > li > span:focus, .s-srch-pagination .pagination > li > span:hover { color: var(--color-accent-primary); background-color: var(--color-bg-secondary); border-color: var(--color-border) } .s-srch-pagination .pagination > .active > a, .s-srch-pagination .pagination > .active > a:focus, .s-srch-pagination .pagination > .active > a:hover, .s-srch-pagination .pagination > .active > span, .s-srch-pagination .pagination > .active > span:focus, .s-srch-pagination .pagination > .active > span:hover { color: var(--color-text-light); background-color: var(--color-accent-primary); border-color: var(--color-accent-primary) } .s-srch-params { font-size: .8rem; background-color: var(--color-bg-secondary); border-radius: var(--border-radius); padding: 5px 10px; margin: 5px 0 } #s-srch-results-container .s-srch-params h3 { display: inline-block; border: none; margin: 0 10px 0 0; font-size: .8rem } .s-srch-params h3:after, .s-srch-result-meta .metalabel:after { content: ':' } .s-srch-result { border-bottom: 1px solid var(--color-border); padding: 20px 0 } .s-srch-result-title { margin-bottom: 3px } .s-la-faq-listing-meta, .s-srch-result-meta { font-size: .8rem } .s-la-faq-listing-meta .metalabel, .s-srch-result-meta .metalabel { font-weight: 500 } .s-la-faq-listing-updated, .s-srch-result-date { padding-right: 10px } .s-la-faq-listing-topics .divider, .s-la-faq-listing-updated .divider, .s-srch-result-meta .divider { display: none } .s-la-faq-listing-topics, .s-la-faq-listing-views, .s-srch-result-subj { padding-left: 10px; border-left: 1px solid var(--color-border) } .s-srch-askbutton a.btn { text-decoration: none } #s-sui-modal .form-actions .btn-primary, .s-la-askform .btn-primary.s-la-askform-button, .s-srch-askbutton .btn-primary { color: var(--color-text-light); background-color: var(--color-info); border-color: var(--color-info); font-size: .8rem } #s-sui-modal .form-actions .btn-primary:active:hover, #s-sui-modal .form-actions .btn-primary:focus, #s-sui-modal .form-actions .btn-primary:hover, .s-la-askform .btn-primary.s-la-askform-button:active:hover, .s-la-askform .btn-primary.s-la-askform-button:focus, .s-la-askform .btn-primary.s-la-askform-button:hover, .s-srch-askbutton .btn-primary:active:hover, .s-srch-askbutton .btn-primary:focus, .s-srch-askbutton .btn-primary:hover { color: var(--color-text-light); background-color: var(--color-accent-primary); border-color: var(--color-accent-primary) } .s-srch-cloud label, .s-srch-facet-btn { font-size: .8rem; font-weight: 500 } #s-srch-results-container .s-srch-facet h3 { border-bottom: none } .s-srch-facet-btn, .s-srch-facet-btn:active, .s-srch-facet-btn:active:hover, .s-srch-facet-btn:focus, .s-srch-facet-btn:hover { border-bottom-color: var(--color-border); font-weight: 700; color: var(--color-text); background-color: var(--color-bg-primary) } .modal-title { border-left: none; padding-left: 0 } .modal-header .close { font-size: 1.25rem } .s-la-askform fieldset { margin: 20px 0 } .s-la-askform legend { width: 100%; font-weight: 700; border-bottom: 2px solid var(--color-accent-secondary); margin: 20px 0 } .s-la-askform .form-group { margin: 20px 0 } .s-la-askform fieldset > :nth-child(2) { margin-top: 0 } .s-la-askform .form-control { height: initial; font-size: .8rem } .s-la-askform .s-ui-filedrop p, .s-la-askform .s-ui-filedrop span, .s-la-askform .s-ui-filedrop-clear, .s-ui-filedrop-filenames { font-size: .8rem } .s-la-askform-reqnote { font-size: .8rem; font-style: italic; margin: 20px 0 } /* edit-page-styles.min.css: Styles for the admin page editor views */ .modal-body h3 { margin: 20px 0; border-bottom: none; font-size: 1.2rem; font-weight: 500 } .modal-body .help-block { font-size: .7rem } .modal-body .alert p:first-child { margin-top: 0 } .modal-body { font-size: .8rem } .modal-body hr { border-width: 1px; margin: 20px auto } #box_reorder .sort_list { margin-top: 0 } #box_reorder .sort_list > li { font-size: .8rem } #newboxtabs li > a, #s-la-page-maincontent .btn-default, #s-sui-modal .btn, .s-la-box-editcontent .btn-default { font-size: .8rem; text-decoration: none } .dropdown-menu > li > a { text-decoration: none } .s-la-content-edit { background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 5px; padding: 5px 10px } .s-la-content-edit a:active, .s-la-content-edit a:focus, .s-la-content-edit a:hover { background-color: var(--color-bg-secondary) } /* print.min.css: Print styles */ @media print { html { font-size: 12px } #s-la-bc { display: none !important } .panel-group { display: none } #scroll-top, #springy-footer, #springy-navbar, #text-size-widget { display: none } .s-la-page-faq .s-la-box-title { display: none } #faq-nav, #faq-sidebar { display: none } .grid { display: block } h1, h1#s-la-public-header-title { font-size: 2rem !important; margin-bottom: 5px } .s-la-box-title h2, h2 { font-size: 1.75rem !important; margin-bottom: 5px } .s-la-box-content h3, h3 { font-size: 1.5rem !important; border-bottom: 3px solid var(--color-accent-secondary); margin-top: 50px; margin-bottom: 20px } h4 { font-size: 1.25rem !important; border-left: 5px solid var(--color-accent-secondary); padding-left: 5px; margin-bottom: 20px } h5 { font-size: 1.125rem !important; font-style: italic; text-transform: uppercase; margin-bottom: 20px } h6 { font-size: 1rem !important; font-style: italic; text-transform: uppercase; margin-bottom: 20px } } </style> </head> <body> <header id="top"> <div id="springy-navbar"> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#springy-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="https://ask.springshare.com"><img src="https://libapps.s3.amazonaws.com/accounts/62172/images/text_logo_white_200.png" alt="Springshare" id="sites-nav-logo" width="200" height="38"><span id="navbar-brand-text">Help Center</span></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="springy-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Documentation <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="https://ask.springshare.com/libanswers">LibAnswers</a></li> <li><a href="https://ask.springshare.com/libapps">LibApps</a></li> <li><a href="https://ask.springshare.com/libcal">LibCal</a></li> <li><a href="https://ask.springshare.com/libconnect">LibConnect</a></li> <li><a href="https://ask.springshare.com/libguides">LibGuides</a></li> <li><a href="https://ask.springshare.com/libinsight">LibInsight</a></li> <li><a href="https://ask.springshare.com/libstaffer">LibStaffer</a></li> <li><a href="https://ask.springshare.com/libwizard">LibWizard</a></li> <li><a href="https://ask.springshare.com/patron-point">Patron Point</a></li> <li><a href="https://ask.springshare.com/pickup-manager">Pickup Manager</a></li> </ul> </li> <li><a href="https://ask.springshare.com/springboards">Tutorials</a></li> <li><a href="https://ask.springshare.com/ask">Ask Support</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle visible-xs" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Springshare Sites <span class="caret"></span></a> <a href="#" class="dropdown-toggle hidden-xs" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span id="app-switcher" class="material-icons-outlined"> apps </span><span class="sr-only">Springshare Sites</span></a> <ul class="dropdown-menu"> <li><a href="https://springshare.com">Springshare</a></li> <li><a href="https://lounge.springshare.com">Springshare Lounge</a></li> <li><a href="https://calendar.springshare.com">Training Calendar</a></li> <li><a href="https://training.springshare.com">Recorded Training</a></li> <li><a href="https://springyu.springshare.com">SpringyU</a></li> <li><a href="https://buzz.springshare.com">Springy Buzz</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div> </header> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-3" style="border: 5px solid #286090;padding:15px;margin-top:100px;"> <strong> Login Required to Access Documentation & Community Resources </strong> <p> To access this content, you must be logged into your local Springshare tool (I.E. LibGuides, LibCal, LibAnswers, LibStaffer...any LibApps tool will do!) </p> <strong> How do I login and view this content? </strong> <p> Using this browser, open a new tab or window, load any Springshare tool that you have access to. Login using your username and password, then come back to this tab/window and click the "I'm logged in" button below. That should do the trick! </p> <p> If you are still having problems, please <a href="https://ask.springshare.com/faq/3507">check the troubleshooting FAQ</a>. </p> <p> If you are a Patron Point customer, please see the <a href="https://ask.springshare.com/faq/3507#Patron-Point">Patron Point section in that FAQ</a>. </p> <div class="text-center"> <a class="btn btn-primary" style="text-decoration:none" href="/global" role="button"> I'm logged in </a> </div> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> </body> </html>