<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<link rel="stylesheet" href="https://use.typekit.net/zob2bjy.css">

<style>

/* ---- Variables ---- */

:root {
  --darkest-gray: #1f1f1f;
  --dark-gray: #514d52;
  --light-gray: #dddddd;
  --darkest-red: #6f0700;
  --dark-red: #880f07;
  --red: #bf2117;
  --heading-font: proxima-nova, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
body {
background-color: #fff;
}
.s-lib-box {
border-radius:0px;
box-shadow:none;
border:none;
background-color: #fff;
}
#s-lg-guide-main:focus,
.tab-pane.active:focus {
outline:0px;
}
.s-lib-box-content {
font-family: var(--heading-font) !important;
font-size:16px !important;
}
.s-lib-box-content a {
color:#C7231A;
font-weight:bold;
text-decoration: underline;
}
.s-lib-box-content a:hover {
color:#514D52;
}

#s-lg-guide-main p, #s-lg-guide-main li {
/*font-size: 14px;*/
}

ul.spaced-list li {
padding-bottom:10px;
}
.callout {
font-size:16px !important;
background-color: #efefef !important;
padding: 25px;
border-left: 5px solid var(--red);
}
.callout h2, .callout h3, .callout h4, .callout h5 {
margin-top: 0;
}

/* ---- Headers ---- */

h1, h2, h3, h4, h5 {
font-family: var(--heading-font);
}
.tab-content .tab-pane > div > h3:first-of-type {
margin-top: 5px;
}
#s-lg-guide-header-info h1 {
font-size: 32px;
}
.s-lib-box .s-lib-box-title {
background-color: transparent;
color: var(--dark-gray);
font-size:24px;
padding: 10px 0;
border-bottom: 1px solid var(--light-gray);
margin-bottom: 10px;
}

/* Helpers */
.red {
color:#C7231A!important
;}
.gray {
color:#514D52!important;
}
.green {
color:#007514!important;
}
.pad-top-xs {
margin-top:5px!important;
}
.pad-top-sm {
margin-top:10px!important;
}
/*.pad-top-med {
margin-top:25px!important;
}*/
.pad-top-lg {
margin-top:50px!important;
}
.pad-bottom-med {
margin-bottom:25px!important;
}
.pad-bottom-lg {
margin-bottom:50px!important;
}

/* Buttons */
.btn-danger {
background-color:#C7231A;
border-color:#C7231A;
}
.btn-danger:hover {
background-color:#9E140D;
}
.btn-sm {
margin:3px 0;
}

/* New Buttons */
.button {
border: 0 !important;
transition: 0.4s;
text-decoration:none !important;
border-radius:0;
margin: 1px;
}
.button.btn-default {
background-color: var(--light-gray);
color: var(--darkest-gray) !important;
font-family: var(--heading-font);
}
.button.btn-default:hover {
background-color: var(--dark-gray);
color: #fff !important;
}

/* Banners */
.row.banner {
margin-top:-35px;
padding: 65px;
background-color:#C7231A;
background-size:cover;
background-position: top;
position:relative;
}
.row.banner > .col-xs-12 {
background-color: rgba(31,31,31,.8);
padding:5px;
}
.row.banner h1, .row.banner p.h1 {
color:#FFF;
text-align:center !important;
font-family:"proxima-nova",system-ui,-apple-system;
font-size:36px;
line-height:44px;
margin:20px auto;
}
.row.banner #guide-title {
font-size:24px;
font-family:"proxima-nova",system-ui,-apple-system;
}

/* Link Lists */
.s-lib-box ul[class^="s-lg-link-list"] > li div[id^="s-lg-content"] > a,
.s-lib-box ul[class^="s-lg-link-list"] > li div[id^="s-lg-content"] > span > a,
.s-lib-box ul[class^="s-lg-link-list"] .s-lg-book .s-lg-book-props > a {
color:#C7231A;
font-family:"proxima-nova",system-ui,-apple-system;
font-size:16px;
font-weight:700;
}
.s-lg-book-props a {
color:#C7231A;
}
.s-lib-box ul[class^="s-lg-link-list"] > li div[id^="s-lg-content"] > a:hover,
.s-lib-box ul[class^="s-lg-link-list"] > li div[id^="s-lg-content"] > span > a:hover,
.s-lg-book-props a:hover {
color:#514D52;
}

/* ---- Tabs ---- */

.s-lib-jqtabs ul.nav-tabs li a {
border-radius: 0px;
border: 0px;
background-color: var(--light-gray);
color: var(--darkest-gray);
font-family: var(--heading-font);
font-size: 16px;
font-weight: 600;
margin:2px;
transition: 0.4s;
}
.s-lib-jqtabs ul.nav-tabs li a:hover {
background-color: var(--dark-gray);
color: #fff;
outline: none;
border: 0px;
}
.s-lib-jqtabs ul.nav-tabs li.active a {
background-color: var(--red);
color:#fff;
outline:none;
border: 0px;
}
.s-lib-jqtabs div.tab-content, .s-lib-jqtabs ul.nav-tabs {
border: 0px;
}

/*Icon Boxes*/
.icon-box-row {
display:flex;
flex-wrap:wrap;
}
.icon-box-row > div[class*="col-"] {
display:flex;
flex-direction:column;
}
.icon-box {
padding:25px;
border:1px solid #ccc;
margin:10px;
height:100%;
}
.icon-box a {
text-decoration:none !important;
color:#D22131 !important;
font-family:"proxima-nova",system-ui,-apple-system;
font-size:16px;
font-weight:700;
}
.icon-box a:hover {
color:#55565a !important;
}
.icon-box small,
.icon-box small a {
color:#55565a!important;
font-weight:normal;
font-size:14px;
font-family:"proxima-nova",system-ui,-apple-system;
}
.icon-box small a:hover {
color:#000!important;
text-decoration:underline!important;
}
.icon-box i {
display:block;
color:#55565a;
}
.icon-box img {
width:80%;
max-width:75px;
margin: 0 auto;
display:block;
}

/* Tables */
.table {
width:95%;
margin:10px auto;
}
.table caption {
color:#333;
font-size:14px;
font-weight:bold;
margin-bottom:8px;
padding:0;
}
.table thead tr {
background-color:#f9f9f9;
}
table th {
white-space:nowrap;
}
table th small {
/*white-space:normal;*/
font-weight:normal;
}
th.border-bottom, tr.border-bottom {
border-bottom: 3px solid #ddd !important;
}

/* Alerts */
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
width:95%;
max-width:600px;
margin:0 auto 10px auto;
}
.alert-info a {
color:#31708f;
font-weight:bold;
}
#s-lg-guide-main .alert-sm {
width:95%;
max-width: 700px;
margin: 15px auto;
padding: 10px;
font-size: 14px;
}
#s-lg-guide-main p.alert-sm:before {
content: "\f05a";
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
margin-right: 4px;
}
.alert-light {
background-color: #f5f5f5;
border:0;
color: var(--dark-gray);
}

/* ---- Accordions ---- */

/* Customize focus-visible for keyboard */
*:focus-visible {
  border-radius: 4px;
  animation-name:  showFocus;
  animation-duration: 0.32s;
  animation-fill-mode: forwards;  
} 
/* Remove outline for non-keyboard :focus */
/**:focus {
  outline: none;
}*/
/* Styling - Accordion */
details {
  margin-bottom: 8px;
}
summary {
  position: relative;
  font-weight: 600;
  cursor: pointer;
  list-style-type: none;
  &::-webkit-details-marker { display:none; }
    background-color: var(--light-gray);
    color: var(--darkest-gray);
transition: 0.4s;
}
summary h3, summary h4, summary h5 {
font-weight: 600;
font-size: 14px;
margin: 0;
}
details-accordion.accordion-lg details summary h3, 
details-accordion.accordion-lg details summary h4,
details-accordion.accordion-lg details summary h5 {
  padding: 24px 24px 24px 56px;
}
details-accordion.accordion-md details summary h3,
details-accordion.accordion-md details summary h4,
details-accordion.accordion-md details summary h5 {
  padding: 18px 18px 18px 56px;
}
details-accordion.accordion-sm details summary h3,
details-accordion.accordion-sm details summary h4,
details-accordion.accordion-sm details summary h5 {
  padding: 10px 10px 10px 56px;
}
details[open] summary, details summary:hover {
background-color: var(--dark-gray);
color: #fff;
}
details > div {
padding: 15px;
}
details-accordion.plain {
display: inline-block;
}
details-accordion.plain details summary {
background-color: #fff;
color: var(--dark-gray);
}
/* Content in Accordion fades in */
details[open] > div {
  opacity: 0;
  animation-name: showContent;
  animation-duration: 0.6s;
  animation-delay: 0.16s;
  animation-fill-mode: forwards;
}
/* Arrow for Accordion */
details summary h3:after,
details summary h4:after,
details summary h5:after {
  content: '';
  position: absolute;
  margin-top: 2px;
  left: 24px;
  width: 8px;
  height: 8px;
  border: solid;
  border-color: $acc-arrow-color;
  border-width: 0 2px 2px 0;
  animation-name: flipArrowDown;
  animation-duration: 0.32s;
  animation-fill-mode: forwards;
}
details[open] summary h3:after,
details[open] summary h4:after,
details[open] summary h5:after {
  margin-top: 6px;
  animation-name: flipArrowUp;
  animation-duration: 0.24s;
  animation-fill-mode: forwards;
}
/* Animation for Focus */
@keyframes showFocus {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 0 0 2px $acc-focus-color;
  }
}
/* Animation for Content */
@keyframes showContent {  
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Animation for Arrow */
@keyframes flipArrowUp { 100% { -webkit-transform: rotate(-135deg); transform:rotate(-135deg); } }
@keyframes flipArrowDown { 100% { -webkit-transform: rotate(45deg); transform:rotate(45deg); } }

/* plus glyph for showing collapsible panels */
.panel-heading .accordion-plus-toggle:before {
   font-family: FontAwesome;
   content: "\f068";
   float: right;
   color: silver;
   /*line-height: 25px;*/
}

.panel-heading .accordion-plus-toggle.collapsed:before {
   content: "\f067";
   color: silver;
}

/* arrow glyph for showing collapsible panels */
.panel-heading .accordion-arrow-toggle:before {
   font-family: FontAwesome;
   content: "\f078";
   float: right;
   color: silver;
  /* line-height: 25px;*/
}

.panel-heading .accordion-arrow-toggle.collapsed:before {
   content: "\f054";
   color: silver;
}

.panel-group .panel-heading {
padding: 0 !important;
}
/* sets the link to the width of the entire panel title */
.panel-group .panel-title > a {
   display: block;
   line-height: 25px;
padding: 10px 15px;
}
.panel-group .panel-title > a:focus {
outline-color: #000;
}

/* Popovers */
a.popover-link i {
color:#C7231A ;
position:relative;
top:-3px;
}
a.popover-black i {
color:#000;
}
a.popover-link:hover i {
color: #514D52;
}

/* Sliders */
.slick-list .s-lib-cpane-caption h3 {
text-align:center;
margin:0;
font-family:"proxima-nova",system-ui,-apple-system;
font-size:16px;
font-weight:700;
}
.slick-list .s-lib-cpane-caption h3 a {
color: #C7231A;
font-size: 14px;
}
.slick-list .s-lib-cpane-caption h3 a:hover {
color:#514D52;
}
.slick-list .s-lib-cpane-caption p,
.s-lg-link-list .s-lg-book-prop-isbn  {
display:none;
}
div.slick-slider {
text-align:center;
font-size:12px;
}

/* For small screens */
@media only screen and (max-width: 987px) {
body > center > a > img {
width:100%;
}
.nav.nav-pills.nav-stacked,
.col-md-3.s-lg-tabs-side.pad-bottom-med {
margin-bottom:0!important;
}
.row.banner {
padding:25px;
}
div.slick-slider {
line-height:inherit;
}
.slick-list .s-lib-cpane-caption h3 {
font-size:14px;
}
}
</style>

<script type="text/javascript">
//Enable Bootstrap popovers
$(function () {
  $('[data-toggle="popover"]').popover()
});
$(document).ready(function(){
if(window.matchMedia("(max-width: 987px)").matches){
//Pull sidebar to bottom on mobile
$('#s-lg-col-0 > div.s-lg-col-boxes>div').appendTo( $('#s-lg-col-1 > div:nth-child(1)') );
//Swap out header image for cropped version
document.querySelector('body > center > a > img').src = "https://libapps.s3.amazonaws.com/accounts/352381/images/LibraryLogoBanner-Cropped.jpg";
}
});
// Accordions
$('details').on('click', function(event) {
$(this).siblings('details').removeAttr('open'); 
});

//Turn tabs into accordions

$(document).ready(function() {
    // Function to convert tabs to accordions
    function convertTabsToAccordions() {
        $(".s-lib-box").each(function(boxIndex) {
            let box = $(this);
            let title = box.find("h2");
            
            // Only proceed if the title contains [Accordion]
            if (title.length && title.html().indexOf("[Accordion]") >= 0) {
                // Remove only the "[Accordion]" text, keeping the rest of the content intact
                title.html(title.html().replace(/\[Accordion\]/g, "").trim());
                
                let tabsContainer = box.find(".s-lib-jqtabs");
                if (tabsContainer.length) {
                    let navTabs = tabsContainer.find(".nav-tabs");
                    let tabContent = tabsContainer.find(".tab-content");
                    if (navTabs.length && tabContent.length) {
                        let accordionId = `accordion-${boxIndex}`;
                        let newAccordion = $("<div>", {
                            class: "panel-group",
                            id: accordionId,
                            role: "tablist",
                            "aria-multiselectable": "true"
                        });
                        navTabs.find("li a").each(function(index) {
                            let tab = $(this);
                            let tabId = tab.attr("href").replace("#", "");
                            let tabPane = $("#" + tabId);
                            if (tabPane.length) {
                                let collapseId = `collapse-${accordionId}-${tabId}`;
                                let item = $("<div>", { class: "panel panel-default" });
                                let headingId = `heading-${accordionId}-${tabId}`;
                                let heading = $("<div>", { class: "panel-heading", role: "tab", id: headingId });
                                // Change from h4 to h3 for panel titles
                                let title = $("<h3>", { class: "panel-title" });
                                let link = $("<a>", {
                                    role: "button",
                                    "data-toggle": "collapse",
                                    "data-parent": `#${accordionId}`,
                                    href: `#${collapseId}`,
                                    "aria-expanded": index === 0 ? "true" : "false",
                                    "aria-controls": collapseId,
                                    // Add the new classes to the link
                                    class: `${index === 0 ? "" : "collapsed"} accordion-toggle accordion-plus-toggle`,
                                    text: tab.text()
                                });
                                title.append(link);
                                heading.append(title);
                                let collapse = $("<div>", {
                                    id: collapseId,
                                    class: `panel-collapse collapse${index === 0 ? " in" : ""}`,
                                    role: "tabpanel",
                                    "aria-labelledby": headingId
                                });
                                let body = $("<div>", { class: "panel-body" }).append(tabPane);
                                collapse.append(body);
                                item.append(heading).append(collapse);
                                newAccordion.append(item);
                            }
                        });
                        tabsContainer.replaceWith(newAccordion);
                    }
                }
            }
        });
    }

    // Run on page load
    convertTabsToAccordions();

    // Simple approach: run again when specific events occur
    // Assuming content is loaded via AJAX or similar
    $(document).on('ajaxComplete', function() {
        setTimeout(convertTabsToAccordions, 500);
    });
});

</script>