/* CSS HEX */
:root {
    --electric-purple: #B262F8;
    --picton-blue: #38b6ffff;
    --sgbus-green: #7ed957ff;
    --mustard: #ffde59ff;
    --white: #ffffffff;
    --oranges: #ff7538ff;
    --bsgrey: #adb5bd;
}

/* Sidebar styling */
.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    transition: all 0.3s;
    font-size: 14pt;
}

#sidebar a {
    color: black;
    text-decoration: none !important;
}

#sidebar li {
    padding: 5px 0px;
}

#sidebar.active {
    margin-left: -250px;
}

#sidebarCollapse {
    margin-right: 20px;
}

#sidebarCollapse span {
    display: none;
}

.components ul {
    list-style-type: none;
    margin-left: -25px;
}

#sidebar ul.components {
    padding: 20px 0 !important;
}

#sidebar hr {
    display: inherit;
    width: 75%;
    margin-left: 0px;
}
.lorge {
    font-weight: 700 !important;
}
.activeLink {
    font-family: "Arial", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700 !important;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    text-decoration: underline;
    margin-right:15px;
}
#menuIcon {
    width:20px;
    height:20px;
}


/* overall styling */
body {
    font-family: "Arial", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    margin: 15px;
}

.uppercased {
    text-transform: uppercase !important;
}

.tall {
    font-size: 20pt;
}

#content {
    width: 100%;
}
ul.resources li > ul {
padding: 0px 25px;
}
.paragraphAlign {
    margin-top: -15px !important;
}
/* footer styling */
.footer {
    padding-top:80px;
    position: sticky;
    bottom: 0px; 
    color: #797979;
    font-size: 10pt;
    line-height: 11pt;
}
.footer a {
    text-decoration:underline;
    color: black;
}
.footer a:hover {
    background-color: var(--bsgrey);
    text-decoration: none !important;
}

/*home page spacing*/
h1 {
    font-weight: 700 !important;
}
.rightHomeBlock {
    padding: 7.5%;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.rightHomeBlock h4 {
    font-weight:700 !important;
}
.card.index {
    margin-top:10px;
    margin-bottom: 10px;
    border-width: 0px;
}
div.aboutOER {
    background-color: var(--picton-blue);
    text-align: left;
}
.leftHomeBlock {
    padding: 10% 15px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.aboutOER h4 {
font-size: 26px;
}
p.excludedLink {
    font-size: 18px;
}
#openAxesBrand {
    font-size: 10pt;
}

#tagline {
    margin: 15px;
}

#aboutOERContent {
    margin: 15px;
}

div.example_libraries {
    background-color: var(--mustard);
}

div.getting_started {
    background-color: var(--sgbus-green);
}
div.at_your_library {
    background-color: var(--electric-purple);

}
/* h2 headings colors */

h2.getting_started {
    background-color: var(--sgbus-green);
    padding: 10px;
}

h2.example_libraries {
    background-color: var(--mustard);
    padding: 10px;
}

h2.library_collections {
    background-color: var(--electric-purple);
    padding: 10px;
}

h2.references {
    background-color: var(--oranges);
    padding: 10px;
}

h2.about {
    background-color: var(--picton-blue);
}

h2.us {
    background-color: var(--bsgrey);
}

/* highlights */

.collectionsHighlight {
    background-color: var(--electric-purple);
    padding: 15px 10px;
    margin: auto -10px;
    font-weight: 700;
}

.library_collectionsSubheading {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, var(--electric-purple) 25%) !important;
    display: inline !important;
    background-size: calc(100% - 5px) auto;
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 5px;
}

.aboutHighlight {
    background-color: var(--picton-blue);
    padding: 15px 10px;
    margin: auto -10px;
    font-weight: 700;
}

.aboutSubheading {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, var(--picton-blue) 25%) !important;
    display: inline !important;
    background-size: calc(100% - 5px) auto;
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 5px;   
}
.usHighlight {
    background-color: var(--bsgrey);
    padding: 15px 10px;
    font-weight: 700;
    margin: auto;
}
.usText {
    padding: 0px 10px;
}
.example_librariesHighlight {
    background-color: var(--mustard);
    padding: 15px 10px;
    margin: auto -10px;
    font-weight: 700;
}
.example_librariesSubheading {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, var(--mustard) 25%) !important;
    display: inline !important;
    background-size: calc(100% - 5px) auto;
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 5px;
}
.getting_startedHighlight {
    background-color: var(--sgbus-green);
    padding: 15px 10px;
    margin: auto -10px;
    font-weight: 700;
}
.getting_startedSubheading {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, var(--sgbus-green) 25%) !important;
    display: inline !important;
    background-size: calc(100% - 5px) auto;
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 5px;
}
.resourcesHighlight {
    background-color: var(--oranges);
    padding: 15px 24px;
    margin: auto -24px;
    font-weight: 700;
}
.resourcesSubheading {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, var(--oranges) 25%) !important;
    display: inline !important;
    background-size: calc(100% - 5px) auto;
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 5px;
}

.aboutOERContent p, blockquote {
    padding-left:12px;
}

.aboutOERContent ul {
    padding-left: 28px;
}

.gettingStartedContent p {
    padding-left:12px;
}
.iconSubheading {
    padding-left: 5px;
}
/*links colors*/

#aboutLinkBlocks a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    color: black !important;
}

#aboutLinkBlocks a:hover {
    text-decoration: none !important;
}

a.specialTreatment  {
    color:black !important;
    text-decoration:none;
}
a#specialTreatment  {
    color:black !important;
    text-decoration:none;
}
a#specialTreatment:hover {
    text-decoration:none !important;
}
a#specialTreatment:hover h4 {
    text-decoration:none!important;
}
#aboutOERLink {
    font-weight: 700 !important;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    color: black !important;
}
.rightHomeLink {
    font-weight: 700 !important;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    color: black !important;
}
a.specialTreatment:hover {
    text-decoration:none !important;
}
a.specialTreatment:hover h4 {
    text-decoration:none!important;
}
.about a {
    color: black !important;
    text-decoration: underline;
}

.about a:hover {
    background-color: var(--picton-blue);
}

.us a {
    color: black;
    text-decoration: underline;
}

.us a:hover {
    background-color: var(--bsgrey);
}

.references a {
    color: black;
    text-decoration: underline;
}

.references a:hover {
    background-color: var(--oranges) !important;
}

.example_libraries a {
    color: black;
    text-decoration: underline;
}

.example_libraries a:hover {
    background-color: var(--mustard) !important;
}

.library_collections a {
    color: black;
    text-decoration: underline;
}

.library_collections a:hover {
    background-color: var(--electric-purple) !important;
}

.getting_started a {
    color: black;
    text-decoration: underline;
}

.getting_started a:hover {
    background-color: var(--sgbus-green) !important;
}

.collectionsText a {
    color: black !important;
    text-decoration: underline;
}

.collectionsText a:hover {
    color: var(--electric-purple) !important;
    text-decoration: none;
}

a.text {
    color: black !important;
    text-decoration: underline;
}

a.text:hover {
    color: var(--picton-blue) !important;
}

.about_oer a {
    color: black !important;
    text-decoration: underline;
}

.about_oer a:hover {
    background-color: var(--picton-blue) !important;
}
/* list styling NOT navbar */
.resources li {
    padding-top: 10px;
}

ul.resources {
    padding-top: 0px;
}

.collectionsPageList {
    position: relative;
    padding: 0px 24px;
}

.collectionsSubheading .feather {
    width: 24px;
    height: 24px;
    stroke: var(--electric-purple);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    margin-left: -24px;
}

.aboutOERContent .feather {
    width: 24px;
    height: 24px;
    stroke: var(--picton-blue);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    margin-left: -24px;
}

.gettingStartedContent .feather {
    width: 24px;
    height: 24px;
    stroke: var(--sgbus-green);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    margin-left:-24px;
}
.resources .feather {
    width: 24px;
    height: 24px;
    stroke: var(--oranges);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    margin-left:-24px;
}


/*collection page spacing*/
.buttonHeader {
    padding: 50px;
}

.pageHeader {
    padding: 50px 10px;
}


.collections {
    justify-content: center;
}

/*getting started page btns and spacing*/

.getting_started {
    justify-content: center;
}

.btn-started {
    font-weight: 600 !important;
    color: black !important;
    border-radius: 0px;
    background-color: var(--sgbus-green) !important;
    border-color: var(--sgbus-green) !important;
    border-width: 5px !important;
    text-decoration: none !important;
}

.btn-started:hover {
    color: var(--black) !important;
    background-color: var(--white) !important;
    border-color: var(--sgbus-green) !important;
}

/*example libraries cards and spacing*/

.exLibCards {
    margin: 10px;
}

.card {
    border-radius: 0px;
    border-width: 4px;
    border-color: var(--mustard);
}

.card-img-top {
    padding: 10px;
}

.cardLinks {
    font-weight: 400 !important;
    color: black !important;
    text-decoration: none;
    display: block;
}

.cardLinks:hover {
    text-decoration: none;
}

.cardLinks span:hover {
    background-color: var(--mustard) !important;
    display: inline;
    text-decoration: underline !important;
    text-decoration-color: var(--mustard) !important;
}

/* body text*/
.text {
    padding-bottom: 15px;
}

span.uppercaseThis {
    text-transform: uppercase;
    font-size: 16pt;
    font-weight: 600 !important;
}


/* edits for small screens */
@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }

    #sidebar.active {
        margin-left: 0;
    }

    #sidebarCollapse span {
        display: none;
    }

    h2.resources {
        font-size: 16pt;
    }

    .rightHomeBlock {
        padding: 10% 15px !important;
    }

    .about_oer {
        text-align: center !important;
    }

    #menuAndLogo {
        margin: 0px !important;
        padding-left: 0px !important;
        padding-right: 0px !important;

    }

    .navbar {
        padding: 8px 0px;
    }

    .buttons {
        margin: 10px;
    }

}

/* edits for larger screens*/
@media (min-width: 1368px) {
    #resourcesContent {
        margin: 15px !important;
    }
}