:root{
	--primary-blue: #00274C;
	--primary-yellow:#FFCB05; 
	--body-area-background: #EFF0F1;
	--in-this-section-bg:#dee2e3;
	--sa-area-background: #fafbfb;
	--link: #0D57AA;
	--link-mobile-nav:#2F65A7;
	--link-hover: #AC5600;
	--subnav-collapisble-bg: #fafafa;
	--menu-black: #131516;
	--subnav-hover: #eceeef;
	--tappen-red: #9A3324;
	--highlight-bg: #ffea9b;
	--body-text-gray: #637381;
}

/******* ACCESSIBILITY ****************************/
:focus-visible, :focus-visible{
    border: 1px solid; 
	outline-offset: 5px;
}
footer li a:focus-visible{
	border: 1px solid var(--primary-yellow) !important; 
}
/*scrollable component*/
.scroll-list:focus-visible, .scroll-list:focus-within{
	border: 1px solid; 
}
/********** BASE ELEMENT STYLES **********/

html {
	font-family: 'Montserrat', 'Open Sans', Arial, sans-serif;
	transition: width 0.2s ease-in-out, height 0.2s ease-in-out, box-shadow 0.2s ease-in-out, scale 0.2s ease-in-out, text-decoration 0.2s ease-in-out ;
}
::after{
	transition: all 0.2s ease-in-out ;
}

.header-util, .header-primary-nav {
    font-family: "Open Sans", Arial, sans-serif;
}

body {
	/* background-color: var(--body-area-background); */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #fafafa;

}

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
  	overflow-x: hidden; 
} 

a {
   outline: 0;
   padding: 0;
   color: var(--link);
}

a:hover{
	color: var(--link-hover);
}

a:not(.survey-link, .footer a, .social-icons a):hover > i {
    background-color: #AC5600;
}
/**************  BROWSER DEFAULT NEEDED TO BE MODIFIED ******************************/

input[type="date"]:hover{
	cursor:pointer;
}
input::-webkit-input-placeholder {
	color: #000;
}

input::-moz-placeholder {
	color: #000;
}
input:-moz-placeholder {   /* Older versions of Firefox */
	color: #000;
}
input:-ms-input-placeholder { 
	color: #000;
}

:focus {
    outline: none !important;
} 

h5 {
	font-family: 'Open Sans', sans-serif;
  color: white;
  text-align: center;
}
a:hover h3, h4{
	text-decoration: underline;
}

a h3{
	text-decoration: underline transparent;
}

h3{
	color: var(--menu-black);
}

h5 {
	font-family: 'Open Sans', sans-serif;
	color: white;
	text-align: center;
}

input::placeholder{
    font-weight: 400 !important;
    color: #616161bf !important;
}
/********** LEAD SECTION STYLES ***********/

section.lead {
  background-image: linear-gradient(
      rgba(0, 0, 0, 0.0),
      rgba(0, 0, 0, 0.0)
    ),
    url(../img/libDrawMain.jpg);
    background-size: cover;
	padding: 2em 0 3em 0;
} 
  
input.button.postfix.searchButton > button, .button {
	background-color: var(--primary-blue);
	border-color: var(--primary-blue);
	outline: 0 !important;
	font-size: 1em;
}

input.button.postfix.searchButton :hover {
	color: var(--primary-blue);
}

input#search-text {
	border: 1px solid var(--primary-blue);  
}

.searchButtonLead, input.search-text-lead {
	height: 45px;
}

.searchButtonLead i{
	filter: invert(100%) sepia(98%) saturate(0%) hue-rotate(332deg) brightness(102%) contrast(100%);
}

#search-text {
	font-weight: bold;
	color: #000;
}

input::-webkit-input-placeholder {
	color: #000;
}

input::-moz-placeholder {
	color: #000;
}
input:-moz-placeholder {   /* Older versions of Firefox */
	color: #000;
}
input:-ms-input-placeholder { 
	color: #000;
}

div.search {
	padding: 2.5em 0 4em 0;
}

.panel.hours, .panel.available, .panel.contact {
    background-color: var(--primary-blue);
}

i.fa.fa-lg.fa-external-link {
	padding: 0 1em;
	float: right;
}

ul.contactALibrarian {
	list-style: none;
	display:inline-block;
/*	text-align: left;    */
	margin: 0 auto;
	line-height: 1.5;
}

ul.contactALibrarian a:hover {
	text-decoration: underline;
	color: var(--primary-yellow);
}

.contact h5, .available h5, .hours h5 {
	color: #fff;
	font-weight: bold;
}

.contact a:hover {
	color: var(--primary-yellow);
}

.available {
	line-height: 1.5;
}

.hours p {
	color: #fff;
	line-height: 1.8;
}


div.set1 a {
	color: #fff;
}

div.set1 a {
	color: #fff;
}

a.moreHours .fa-chevron-right  {
	float: right;
}

.available a .fa-question-circle {
	color: #ced2d5;
} 


.has-tip, .has-tip:hover, .has-tip:focus {
    border: none !important;
}

div.set1 .panel {
	border: 1px solid var(--primary-blue);
	padding: 1.5rem;
}

div.set2 .panel {
	background-color: #3a3a3a;
	border: 1px solid #3a3a3a;
	padding: 1.15rem;
	text-align: left;

} /*Background and border for set 2*/

div.set2 a {
	color: #fff;
}

.test {
	height: 200px;
}

div.set3 .panel {
	background-color: #3a3a3a;
	border: 2px solid #3a3a3a;
	border-radius: 5px;
	padding: 1.25rem;
}

div.set3 a {
	color: #fff;
	font: 1em;
}

div.set3 span.icon {
	float: right;
	padding-right:1em;
}
 
span.icon {
	padding-right: 1em;
	padding-left: .5em;
}

.column + .column:last-child, .columns + .column:last-child, .column + .columns:last-child, .columns + .columns:last-child {
	float: left;
}

.panel {
	padding: 1em;
}

div.panel {
	text-align: center;
}

.hoursScript p {
	font-size: .5em;
}

.hours span {
	color: #fff;
}

.pc_counts span, .hours span {
	color: #fff;
	font-weight: normal;
}

div.panel.hours p {
	color: #fff;
}

div.panel.hours h5 {
	font-weight: bold;
}



div.panel.contact span.icon {
	padding-top: .5em;
}

.fa-file-text-o:before, .fa-table:before, .fa-book:before, .fa-file-text:before {

    position: absolute;
    top: auto;
    bottom: 0rem;
    right: 0rem;
    margin: 0;
    font-size: 5rem;
    opacity: 0.04;
    z-index: 1;
}


/********** NEW ARRIVALS SECTION STYLES ***********/

.newArrivalsPanel {
	background-color: #555;
	padding-bottom: 2em;
}

h2.newArrivals {
	color: #fff;
	font-size: 1.5em;
	padding: .5em 0;
}

.newArrivalsGroup {
	padding: 2.5em 0;
}

.more {
	float: right;
}

.fa-chevron-right {
	padding-left: .5em;
}

.bookCovers {
	padding: .25em .5em;
}

.newArrivalsPanel a img {
	height: 220px;
	width: auto;
}

.headerFullWidth {
	border-bottom: solid 1px #fff;
}

a.button.expand {
	background-color: var(--primary-yellow) !important;
	font-size: 1.25em;
}

.newArrivalsPanel a {
    color: #fff;
    font-size: .55em;
    padding: .5em 0;
}

.newArrivalsPanel a:hover {
	text-decoration: underline;
}

/********** FEATURED SECTION STYLES ***********/

.featuredPanel {
	background-color: #575294;
}

h2.featured {
	color: #fff;
	font-size: 1.5em;
	padding: .5em 0;
}

.featuredGroup {
	padding: 2.5em 0 0 0;
}
.featuredGroup img {
	padding: 1em;
}

 .faq-content{
    min-height: 500px;
  }

 /********** CAROUSEL **********/

.slick-slide {
	padding: 2em .5em;

}

 .slick-slide img {
	margin: 0 auto;
}

.slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none; }
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; background: transparent; color: transparent; }
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; }

.slick-prev:before, .slick-next:before { 
	font-family: "slick"; 
	font-size: 20px; 
	line-height: 1; 
	color: white; 
	opacity: 0.75; 
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; }

.slick-prev { left: -25px; }
[dir="rtl"] .slick-prev { left: auto; right: -25px; }
.slick-prev:before {
	font-family: monospace;
  	content: "<"; 
	font-size: 1.5rem;}
[dir="rtl"] .slick-prev:before {
	font-family: monospace;
  	content: "<"; 
	font-size: 1.5rem; }

.slick-next { right: -25px; }
[dir="rtl"] .slick-next { left: -25px; right: auto; }
.slick-next:before {
	font-family: monospace;
	content: '>';
	font-size: 1.5rem;}
[dir="rtl"] .slick-next:before {
	font-family: monospace;
  	content: ">";
	font-size: 1.5rem; }

/********** SECONDARY PAGE SEARCH and HOURS STYLES ***********/

section.secondaryLead {
  background-image: linear-gradient(
      rgba(0, 0, 0, 0.0),
      rgba(0, 0, 0, 0.0)
    ),
    url(../img/libDrawSecondary.jpg);
    background-size: cover;
	padding: 1em 0;
}

.searchBoxSecondary {
	background: #83b2a8;
	padding: 1em 2.5em .4em 1.5em;
	border-width: .5px;
	border-style: solid; 
	border-color: #555555;
}

.hoursSecondary {
	background: var(--primary-blue);
	border: 2px solid var(--primary-blue);
	padding: .3em 0;
}

.searchRow {
	padding-top: 1em;
}

.hoursSecondary h5 {
	margin: 0;
	padding: 0 0 0 .5em;
	text-align: left;
	font-size: 16px;
      float: left;
}

.hoursSecondary p {
	color: #fff;
	text-align: center;
	padding: 0;
	margin: 0;
}

/********** SECONDARY PAGE CONTENT SECTION STYLES ***********/

.breadcrumbs {
	border: none;
	background-color: #EFF0F2;
	padding: 1em 0;
}

.breadcrumbs a {
	color: #000;
}

.breadcrumbs > *:before {
    content: " > ";
}

/* /*nav.breadcrumbs a:hover, a:focus {
	color: #222222;
	font-weight: bold;
} *//*the style that makes links bold after clicking*/*/


h2.pageTitle {
	color: #000;
	font-size: 1.5em;
	padding: 10px 0;
	text-transform: uppercase;
}

.contentPanel {
	background-color: #EFF0F2;
	padding-bottom: 2em;
}

section.contentPanel > .headerFullWidth {
	border-bottom: solid 1px #000;
}

.sideNav {
	padding-left: 0;
}

 .sideTopNav {
	list-style: none;
    background-color: #E5E5E5;
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin: 0px;
	margin-bottom: 2em;
    font-size: 0.9em;
}

.sideTopNav li {
	padding-bottom: 0.5em;
}
.sideTopNav li:first-child a, .sideBottomNav li:first-child a  {
    border-top: medium none;
}

.sideTopNav li a {
    position: relative;
    display: block;
    color: var(--primary-blue);
    border-top: 1px dotted #8E8C8C;
    padding-top: 0.3em;
    padding-right: 15px;
}

.sideTopNav li a .fa {
    position: absolute;
    right: 0px;
    line-height: 1.5em;
}

.sideBottomNav {
	list-style: none;
	background-color: #F7EBA5;
	border: 1px solid rgba(0, 0, 0, 0.2);
  	margin: 0;
	font-size: 0.8em;
}

.sideBottomNav li {
	padding-bottom: 0.5em;
}

.sideBottomNav li a {
    position: relative;
    display: block;
    color: var(--primary-blue);
    border-top: 1px dotted #8E8C8C;
    padding-top: 0.3em;
    padding-right: 15px;
}

.sideBottomNav li a .fa {
    position: absolute;
    right: 0px;
    line-height: 1.5em;
}

.sideBottomNav li a:hover, .sideTopNav li a:hover {
    color: #AE5600;
} 

.sideBottomNav li a:hover, .sideTopNav li a:hover i{
    filter: invert(31%) sepia(97%) saturate(1244%) hue-rotate(16deg) brightness(90%) contrast(103%);
} 

.availableSide p {
	margin-bottom: 0;
	padding-top: 1.5em;
	font-weight: bold;
}

.availableSide ul {
	 list-style: none;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.2);
  	margin: 0;
	font-size: 0.8em;
	margin-bottom: 1em;
}

.availableSide ul li {
	padding: .5em;
}

span.openLabs  {
	float: right;
}

.centerCopy {
	text-align: center;
	} /*To center any copy in the seconday pages*/

.contentCopy {
	padding-left: 2em;
}
.contentCopy a {
	color: var(--primary-blue);
	font-weight: bold;
}

.linkBlueBold a {
	color: var(--primary-blue);
	font-weight: bold;
}

.contentCopy ul {
	padding-left: 2em;
}

/* visited link */
.linkBlueBold a:visited {
    color: var(--primary-blue);
}

/* mouse over link */
.linkBlueBold a:hover {
    color: var(--primary-yellow);
}

/* visited link */
.contentCopy a:visited {
    color: var(--primary-blue);
}

/* mouse over link */
.contentCopy a:hover {
    color: var(--primary-yellow);
}

.contentCopy form {
	padding-bottom: 1em;
}

.aTOz {
	padding-bottom: 1em;
}

.maizeEmphasisBox {
	background-color: var(--primary-yellow);
	padding: .25em;
}

.borderedBox {
	border: 1px dashed var(--primary-blue);
	margin-bottom: 2em;
}

.borderedBox p {
	padding: 0 .5em;
	margin: .5em 1.5em;
}

ul.jobsApp {	
	margin: 0;
	list-style: none;
}

.intro p {
	font-weight: bold;
} /* Add to Section Titles for Bold */

.addressList {
	list-style: none;
}

ul.addressList {
	list-style: none;
}

.maizeButton {
	color: #fff;
	background-color: var(--primary-yellow);
}

a.maizeButton:hover {
	background-color: var(--primary-blue);
}

#HoursDisplay table {
	margin: 0 auto 1em;
}

a.staffWebsiteButton  {
	float: right;
	font-weight: bold;
	border: 2px solid var(--primary-blue);
	padding: 1em 2em;
	border-radius: 2px;
	background-color: var(--primary-blue);
	font-size: .75em;
	color: #fff;
}

a.staffWebsiteButton i {
	filter: invert(100%) sepia(98%) saturate(0%) hue-rotate(332deg) brightness(102%) contrast(100%);
}

a.staffWebsiteButton:before {
	content: none;
}

a.staffWebsiteButton:hover {
	background-color: #02386b;
}

.floatRt {
	float: right;
}

.floatLt {
	float: left;
}

.journalBookshelf a {
	font-size: .75em;
}
.journalBookshelf {
	padding-top: 1em; 
}

.journalBookshelfTitle {
	background-color: #E5E5E5;
	padding: .5em .5em;
}

.smallLink {
	font-size: .9em;
}

/********** Find a Librarian and Liaison List **********/

.librarianButtons a {
	color: var(--primary-blue);
}
.librarianButtons a:hover {
	color: var(--primary-yellow);
}

.librarianButtons a:focus {
	color: #555;
}

/********** Staff Profile Page **********/
.staffPhoto {
	display: flex;
	padding-bottom: 1.5em;
	justify-content: center;
}

.staffPhoto > img {
	max-width: 250px;
}

.staffContact {
	display: grid;
	grid-template-columns: 2rem auto;
	grid-column-gap: 1rem;
	grid-row-gap: 0.5rem;
	margin-left: 2rem;
	margin-bottom: 2rem;
	grid-auto-rows: 1fr;
	align-items: center;
}

.iconBox {
	background-color: var(--primary-blue);
	padding: 0.5rem;
	max-height: 3rem;
}

.iconBox > * {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

.staffTitle p {
	font-weight: bold;
	color: var(--primary-blue);
}

.librariansNav ul {
	background-color: #3531de;
	 list-style: none;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.2);
  	margin: 0;
	font-size: 0.8em;
	padding-top: 2em;
}

.email-librarian::before {
  	content: url(/img/icon/icon-email-w.svg);
	vertical-align: middle;
  	padding:0.25rem;
    display: inline-block;
	height: 40px;
	width: 40px;
	background-color: var(--primary-blue);
	margin-right: .5em;
}

.phone-librarian::before {
	content: url(/img/icon/icon-phone-w.svg);
	vertical-align: middle;
	padding:0.5rem;
    display: inline-block;
	height: 40px;
	width: 40px;
	background-color: var(--primary-blue);
	margin-right: .5em;
}

.office-librarian::before {
	content: url(/img/icon/icon-map-marker-w.svg);
	vertical-align: middle;
    display: inline-block;
	height: 40px;
	width: 40px;
	background-color: var(--primary-blue);
	margin-right: .5em;

}

.librariansTitle p {
	font-size: 1.25em;
}

.mainContent {
	padding-bottom: 2em;
}

.asideStaff select {
	margin-bottom: 1rem;
}

p.profileHeadings  {
	font-size: 1.25em;
	color: var(--primary-blue);
	border: .5px dashed var(--primary-blue);
	padding: .35em;
} 

.librarianSubjects p {
	margin-bottom: .3em;
}
/******** ACCORDION ********/

.accordion {
	padding-bottom: 2em;
}

ul.accordionInner a {
	border: none;
}

a.accordionInner {
	border: none;
}

.accordion .accordion-navigation > a {
	color: var(--primary-blue);
	font-weight: bold;
	background-color: #fafafb;
	border: 1px solid #e3e5e8;
}
.accordion .accordion-navigation > a:active, a:visited {
	text-decoration: none !important;
}

.accordion .accordion-navigation > a:hover {
	color: var(--primary-yellow);
	background-color: var(--primary-blue);
}

.accordion .accordion-navigation > a:hover i{
	filter: invert(81%) sepia(66%) saturate(2711%) hue-rotate(351deg) brightness(110%) contrast(108%);;
}

.accordion .accordion-navigation > a i{
	filter: invert(10%) sepia(89%) saturate(1699%) hue-rotate(190deg) brightness(99%) contrast(102%);
}
.accordion .accordion-navigation > .content a {
	color: var(--primary-blue);
	font-weight: bold;
}
.accordion .accordion-navigation > .content a:hover {
	color: var(--primary-yellow);
}

a.reserveForm {
	background-color: #fff !important;
}

.accordion li .fa-chevron-circle-down {
	float: right;
}


/********** BUTTONS *********/

.button.allSearchButtons {
	padding: 0;
}

/********** CALL TO ACTION **********/

.callToAction li a {
	  position: relative;
    display: block;
    padding: 10px 28px 10px 10px;
    color: var(--primary-yellow);
    background-color: var(--primary-blue);
    font-size: 1em;
    border-radius: 3px;
}

.callToAction li a i{
	filter: invert(81%) sepia(66%) saturate(2711%) hue-rotate(351deg) brightness(110%) contrast(108%);
}

.callToAction li {
    padding-bottom: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.callToAction li a .fa {
    right: 10px;
    margin-top: 0.2em;
    font-size: 18px;
    position: absolute;
}

.callToAction li a:hover {
    background-color: #0D57AA;
}

.callToAction li a:visited {
	 color: var(--primary-yellow);
}

/********** TOPIC TILES **********/

.topicTile li a, .topicTile li a.green {
    position: relative;
    display: block;
    color: #FFF !important;
    background-color: #48736A;
    border-radius: 3px;
}

.topicTile li a.orange {
    background-color: #AC5600;
}

.topicTile li a.purple {
    background-color: #575294;
}

.topicTile li a.toxic-green {
    background-color: #7E732F;
}

.topicTile li a.red {
    background-color: #7A121C;
}

.topicTile li a.blue {
    background-color: #587ABC;
}

.topicTile li a:hover {
	 opacity: .75;
}

.topicTile li a p {
    padding: 10px 28px 10px 10px;
}

.topicTile li, .callToAction li {
    padding-bottom: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.topicTile li a p {
	margin-bottom: 0;
	text-align: left;
}

.topicTile li a .fa {
    right: 10px;
    margin-top: 0.2em;
    font-size: 18px;
    position: absolute;
}

/********* Ask A Question **********/





fieldset {
	margin: .75em !important;
	padding: .75em !important;
}

.formP {
	margin: 0 !important;
	font-weight: bold;
	font-size: .90em;
	text-align: center;
}

.formNoPaddingLt {
	padding-left: 0 !important;
}

.formNoPaddingRt {
	padding-right: 0 !important; 
}

/********* BOOKPLATES *********/

.bookplateAside {
	padding-left: 0;
}

.backToBookplates a {
	background-color: #EFF0F2;
	color: var(--primary-blue);
	border: 2px solid var(--primary-blue);
	margin-top: 1em;
	padding: .75em;
}

.backToBookplates a:hover {
	color: #fff;
	background: var(--primary-blue);
}

.bookplateContent {
	padding-bottom: 3em;
}

.topicTileHover a:hover {
	color: #fff;
}

.bookplatesList {
	padding-left: 1em;
}

.bookplateCaption {
	font-size: .85em;
}

/********* DATABASES **********/

#DBListDisplay h4 {
	text-align: center;
}

.childSpan {
	cursor: pointer;
	cursor: pointer;
    align-items: center;
    display: flex;
    gap: 0.35rem;
}
.dbResultsClass {
	background-color: #e5e5e5;
	padding: 1em;
	margin-bottom: 20px;
}

.dbResultsClass:nth-of-type(even){
	/*Set alternating background colors for Database Results.*/
	background-color: #fff !important;
}

.dbResultsClass .fa-arrow-circle-right {
	transition: all .5s;
}

.childDBActive {
	transform: rotate(90deg);
}

.breakLink {
	color: red !important;
	display: inline-block;
	margin-bottom: 20px;
}

p#DBListDisplay a:first-child, p#CatListDisplay a:first-child {
	font-size: 1.10em;
}


p#DBListDisplay a {
	color: var(--primary-blue);
	font-weight: bold;
}

p#DBListDisplay a:visited {
	color: var(--primary-blue);
}

p#DBListDisplay a:focus {
	color: #555;
}

p#DBListDisplay a:hover {
	color: var(--primary-yellow);
}

p#CatListDisplay a {
	color: var(--primary-blue);
	font-weight: bold;
}

/* visited link */
 p#CatListDisplay a:visited {
    color: var(--primary-blue);
}

/* mouse over link */
 p#CatListDisplay a:hover {
    color: var(--primary-yellow);
}

p#CatListDisplay a:focus {
	color: #555;
}

ul.dbest p {
	margin: 0;
}

p#CatListDisplay h4 {
	margin: 0;
}

form#list {
	padding: 0;
}

input.offCampusConvert {
	height: 50px;
	width: 90%;
	margin-bottom: .5em;
}

span.dbBookmarkText {
	font-weight: bold;
	color: #333333;
}

p.miniText {
	font-size: .75em;
	text-align: right;
	color: #555;
}

a.dbBookmarkLink {
	font-weight: normal !important;
	color: #000!important;
}

.dbBookmark {
	text-align: right;
}

/********* LOANABLE TECH *********/

.tech {
	border-bottom: 1px dashed var(--primary-blue);
	padding: .75em 0;
}

/********* LINK BLOCK **********/

.linkBlock {
    border: 1px solid #D6D6D6;
    background-color: #FFF;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 2em;
}

.linkBlock li {
    padding: 0px 10px;
}

.linkBlock li a {
    position: relative;
    display: block;
    padding: 5px 20px 5px 0px;
    border-top: 1px dotted var(--primary-blue);
    font-size: 0.9em;
}

.linkBlock li a {
    position: relative;
    display: block;
    padding: 5px 20px 5px 0px;
    border-top: 1px dotted var(--primary-blue);
    font-size: 0.9em;
}

.linkBlock li:first-child a, .linkBlock li:nth-child(2) a {
	border-top: medium none;
}

.linkBlock li i {
    position: absolute;
    right: 3px;
    top: 10px;
}

.linkBlock li a:hover {
    color: #AE5600;
}

/********** DID YOU KNOW/FACTS SECTION STYLES ***********/

.factsPanel {
	background-color: #333333;
	padding-bottom: 2em;
}

h2.facts {
	color: #fff;
	font-size: 1.5em;
	padding-top: .5em;
	padding-bottom: .5em;
	text-transform: uppercase;
}

.factsGroup li p {
	color:#fff;
}

.factsGroup li {
	padding-top: 1em;
	padding-bottom: 1em;
}

.factsGroup li a {
	color:#fff;
	font-weight: bold;
}

li.factsText {
	padding-left: 1.25em;
	padding-right: 1.25em;
}

/*********** ANCHOR Panel w/ Report Noise, News, and Give Button *********/

section.anchorPanel {
background-color: #fff;
}

div.anchor {
padding-top: 1.75em;
padding-bottom: 1.75em;
margin: 0;
}

div.giveButton {
	padding-top: 1em;
}

.news h4 a {
	padding-left: .25em;
	color: var(--primary-blue);
	font-weight: bold;
}

a.rss-item {
	color: var(--primary-blue);
}

.anchor .fa-rss-square {
	color: var(--primary-yellow);
}

.news {
	margin: 0 auto;
}

.moreNews a {
	float: right;
	color: var(--primary-blue);
	font-size: .9em;
}

.moreNews a:hover, .moreNews a:focus {
	text-decoration: underline;
}

.giveButton img {
	display: block;
	margin: 0 auto;
}

.anchorNav {
	padding-left: 0;
}

.anchorNav {
	list-style: none;
    background-color: #335270;
    border: 1px solid rgba(255, 255, 255, 0.5);
    font-size: 0.9em;
}

.anchorNav li a:hover i{
	filter: invert(81%) sepia(66%) saturate(2711%) hue-rotate(351deg) brightness(110%) contrast(108%);
}

.anchorNav li a:hover{
	color: #ffcb05;
}

.anchorNav li {
	padding-bottom: 0.5em;
}
.anchorNav li:first-child a, .sideBottomNav li:first-child a  {
    border-top: medium none;
}

.anchorNav li a {
    position: relative;
    display: flex;
	align-items: center;
    color: #fff;
    border-top: 1px dotted #8E8C8C;
    padding-top: 0.3em;
    padding-right: 15px;
}

.anchorNav li a .fa {
    position: absolute;
    right: 0px;
    line-height: 1.5em;
}


/*********** YAF *****************/
section.yafLead {
  background: #fff;
}

.yafLeadRow {
	padding: 1em 0 0 0;
}

.yafTitle h3, .yafTitle h4, h4.yafThinText {
	font-weight: lighter;
}

.yafHeadText h1, .yafHeadText p {
	color: #002e5e;
	font-family: serif;
}

.yafHeadText {
	padding-top: 2em;
}

img.pencil {
	padding-bottom: 1em;
}

.yafSponsorsPanel {
	background-color: #fff;
}

.yafSponsorsTitle {
    color: #66bc47;
    font-size: 1.5em;
    padding-top: .5em;
    padding-bottom: .5em;
    text-transform: uppercase;
}

.yafHeaderFullWidth {
	border-bottom: solid 1px #66bc47;
}

.yafButton a {
	color: #fff;
}

.yafButton a:visited {
	color: #ADD8E6;

}
/*********** MEDIA QUERIES **********/

/** Small screens**/

@media only screen and (max-width: 40em) { 

	
 	section.lead {
  	background-image: linear-gradient(
     rgba(0, 0, 0, 0.0),
     rgba(0, 0, 0, 0.0)
    ),
    url(../img/libDrawMobile.jpg);
    background-size: cover;
	padding: 0 0 2em 0;
	}

	a {
		font-size: 1em;
	}

	div#openModal.modalDialog p {
	color: #000;
	}

	.modalDialog > div {
	width: 75%;
	}

	input.button.postfix.searchButton > button {
	font-size: .65em;
	}
	

	h2.newArrivals, h2.featured, h2.facts, h2.pageTitle {
		text-align: center;
	}

	
	li.factsImage  {
	text-align: center;
	}


	.linkBlock li:nth-child(2) a {
  	 border-top: 1px dotted var(--primary-blue);
	}

	input, textarea, select {
  		font-size: 16px !important;
	}

	input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea {
		font-size: 16px !important;
	}

 } /* max-width 640px, mobile-only styles*/

/** Medium screens**/

@media only screen and (min-width: 40.063em) { 
	
} /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
  		section.lead {
		  	background-image: linear-gradient(
		     rgba(0, 0, 0, 0.0),
		     rgba(0, 0, 0, 0.0)
		    ),
		    url(../img/libDrawMedium.jpg);
		    background-size: cover;
			padding: 0 0 2em 0;
			}
  	
  	.sideTopNav li:first-child a  {
    border-top: medium none;
	}

	.sideBottomNav li:first-child a {
	border-top: medium none;
	} 

	.modalDialog > div {
	width: 50%;
	}
	input.button.postfix.searchButton > button, .button {
	font-size: 1em;
	}
	h2.newArrivals, h2.featured, h2.facts, h2.pageTitle {
		text-align: left;
	}

	img.factsImage  {
	float: left;
	}
	
	div.set2 span.title {
	font-size: 1em;
	}


	.linkBlock li:nth-child(2) a {
  	 border-top: medium none;
	}

	input, textarea, select {
  		font-size: 16px;
	}

	input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea {
		font-size: 16px !important;
	}

} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

/* Large screens*/
@media only screen and (min-width: 64.063em) {

} /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) {
	.modalDialog > div {
	width: 25%;
	} 
	input.button.postfix.searchButton > button, .button {
	font-size: 1em;
	}
	h2.newArrivals, h2.featured, h2.facts, h2.pageTitle {
		text-align: left;
	}
	div.set2 span.title {
	font-size: 1em;
	}
	img.factsImage  {
	float: left;
	}
	.linkBlock li:nth-child(2) a {
  	 border-top: medium none;
	}

} /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

/* XLarge screens*/
@media only screen and (min-width: 90.063em) { 
	h2.newArrivals, h2.featured {
		text-align: left;
	}
	
	.modalDialog > div {
	width: 25%;
	}

	img.factsImage  {
	float: left;
	}

	input.button.postfix.searchButton > button, .button {
	font-size: 1em;
	}

	h2.newArrivals, h2.featured, h2.facts, h2.pageTitle {
		text-align: left;
	}
	div.set2 span.title {
	font-size: 1em;
	}
	.linkBlock li:nth-child(2) a {
  	 border-top: medium none;
	}
} /* min-width 1441px, xlarge screens */


@media only screen and (min-width: 90.063em) and (max-width: 120em) {
	h2.newArrivals, h2.featured, h2.facts, h2.pageTitle {
		text-align: left;
	}
	.factsImage {
	float: left;
	}
	.modalDialog > div {
	width: 25%;
	}
	input.button.postfix.searchButton > button, .button {
	font-size: 1em;
	}
	.linkBlock li:nth-child(2) a {
  	 border-top: medium none;
	}

} /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

/* XXLarge screens*/
@media only screen and (min-width: 120.063em) { 
	
	h2.newArrivals, h2.featured {
		text-align: left;
	}
	.factsImage {
	float: left;
	}
	.linkBlock li:nth-child(2) a {
  	 border-top: medium none;
	}

} /* min-width 1921px, xxlarge screens */


/**** Tim's Tools CSS ****/

.tinnerboxright {
	float: right;
	width: 50%;
}

.tinnerboxleft {
	float: left;
	width: 50%;
}

/**** CSS Information for Text Overlay Boxes (used on the Database's List for Subject Images...maybe for Featured Boxes? ****/
/* Container holding the image and the text */
.container {
  position: relative;
}

/* Subject Text Box */
.text-block {
  position: absolute;
  left: 5%;
  width: 90%;
  height: 70%;
  top: 15%;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); 
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}

.featureContainer {
  position: relative;
  max-width: 800px; /* Maximum width */
  max-height: 300px; /*Maximum height */
  margin: 0 auto; /* Center it */
  font-size: 100% !important;
  width: 100%;
}

.featureContainer img{
	margin-left: 0px;
	margin-right: 0px;
	width: 100%;
}

.featureContainer .content {
  box-sizing: border-box;
  position: absolute; /* Position the background text */
  bottom: 0; /* At the bottom. Use top:0 to append it to the top */
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.85); /* Black background with 0.85 opacity (0, 0, 0, 0.85) */
  width: 100%;
  height: 73px;
  color: #f1f1f1; /* Grey text */
  padding: 5px; /* Some padding */
  text-align: center;
  font-size: 95%;
}

/* Top left text */
.featureContainer .galleryNote {
	
	position: absolute;
	top: 8px;
	left: 5px;
	background: white;
	color: black;
}

/* This is all the CSS Tim and Patrick used to jerry-rig portions of the Mardigian Search box. */
.mainSearchBox {
	background: #83b2a8 !important;
	padding-top: 9px !important;
}


.mainSearchBox .leadSearchButton {
	margin-top: 4px;
	margin-bottom: 1px !important; 
	padding: 0 2.25rem 1rem 1.75rem !important;
}

.leadSearchButton i{
	margin-left: -0.5rem;
    margin-top: 0.35rem;
	filter: invert(100%) sepia(98%) saturate(0%) hue-rotate(332deg) brightness(102%) contrast(100%);
}

.mainSearchBox .searchBoxTitle {
	font-size: 1.2em;
	color:var(--primary-blue);
}

.mainSearchBox .searchInputText {
	font-size: 80% !important;; 
	margin-bottom: 0px !important;
}

.mainSearchBox .searchInputType {
	font-size: 80% !important;; 
	margin-bottom: 0px !important;
	margin-top: 4px !important;
}

.mainSearchBox .searchButtonMS {
	height: 36px !important;
	margin-top: 4px;
	padding-left: 1.2em;
	width:120%; 
}

.mainSearchBox .focusedSearchBox {
	margin:54px 0 0 0 !important;
	font-size: .9em;
}

.mainSearchBox .focusedSearchBox a {
	background-color:var(--primary-blue) !important; 
	padding:3px; 
	padding-left: 6px; 
	padding-right: 6px;
	color:white; 
	margin: 0 0 -10px 0 !important;
}

.mainSearchBox .focusedSearchBox a:hover{
	background-color: #008cba !important;
	color: white;
}

/* This is a spinner css that Tim stole from W3 */
.loader {
	border: 16px solid #f3f3f3; /* Light grey */
	border-top: 16px solid #3498db; /* Blue */
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
  }
  

  /*chat with us*/

  #libchat_275e9dfced1d2541b476d109f9ee4fee{
	z-index: 20;
  }

  /*****************Landing Page*******************/

#landing-page-links-container{
	padding-left: 3.1rem;
	margin-bottom: 3rem;
}

#landing-page-link-grp{
	margin-left: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-row-gap: 1.5rem;
	grid-column-gap: 0.5rem;
}


.landing-page-item{
	line-height: 2;
	font-weight: 600;
	padding: 0.25rem 0.75rem;
	color: var(--primary-blue);
	list-style: none;
	border-left: 3px solid var(--primary-yellow);
	transition: all 0.2s ease-in-out;
	
}

.landing-page-link{
	display: block;
    width: 100%;
}

.landing-page-item:hover{
	background-color: var(--in-this-section-bg);
}

.landing-page-item:hover .landing-page-link{
	color:var(--link-hover)
}

#relatedResources{
	margin-left: 3.1rem;
	/*margin-top: 2em;
	margin-bottom: 2em;
	width: 66%;
	background-color: var(--in-this-section-bg);
    border-left: 5px solid var(--primary-yellow);
    padding: 1.5em 2em; */
}

.relatedResourcesTitle{
	font-size: 20px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 40px;
    margin-top: 0;
	color: var(--menu-black);
    font-family: "Montserrat",Arial,sans-serif;
}

/* #relatedResourceList{
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-gap: 1rem;
	line-height: 1.7; 
} */

@media only screen and (min-width:37.5em){
	#relatedResourceList{
		grid-template-columns: repeat(2, 1fr);
	}
}


@media only screen and (max-width:40em){
	#landing-page-link-grp{
		grid-template-columns: 1fr;
	}
	#landing-page-links-container{
		padding-left: 0;
		margin-top: 1rem;
	}
	#relatedResources{
		margin-left: 0;
	}
}

.staff-directory-table>tbody>tr>td>a{
	font-weight: 700;
	color:#222;
}

#StaffDirDisplay>table{
	width: 88%;
}

@media only screen and (max-width:63.5rem){
	#StaffDirDisplay>table{
		width: 100%;
	}
}

/*IRO classes needed. Apper in staffDirectoryScript.php and profile.php*/
.iro-staff-directory{
	display: inline-block;
	height: 1rem;
	background: var(--primary-yellow);
	padding: 0 0.4rem;
	border-radius: 2rem;
	/* filter: drop-shadow(0px 2px 6px rgba(60, 64, 67, 0.15)) drop-shadow(0px 1px 2px rgba(60, 64, 67, 0.30)); */
	filter: drop-shadow(2px -1px 6px rgba(60, 64, 67, 0.15)) drop-shadow(1px 0px 2px rgba(60, 64, 67, 0.30));
	margin-left: 0.15rem;
}

.iro-link{
	line-height: 1rem;
}

.iro-text{
	vertical-align:top;
	font-family: 'Times New Roman', Times, serif;
	font-weight: bold;
	color: var(--primary-blue);
	margin-right: 0.25rem;
	font-size: 0.75rem;
}

.iro-icon{
	vertical-align:2.5% !important;
}

/*iro title in breadcrumb*/
.current .iro-staff-directory, .current .iro-link{
	display: none;
}

.current .iro-in-title-marker::before{
	content: '(IRO)';
	margin-left: 0.15rem;
}

/* iro title in page title */
.pageTitle .iro-staff-directory{
	height: 1.25rem;
	vertical-align: middle;
	margin-left: 0.5rem;
}

.pageTitle .iro-link::after{
	content: url(/img/icon/icon-external-link.svg);
	filter: invert(10%) sepia(89%) saturate(1699%) hue-rotate(190deg) brightness(99%) contrast(102%);
	vertical-align: top;
	display: inline-block;
	transform: scale(0.7) translate(0, -0.35rem);
}
.pageTitle .iro-text::before{
	content:'IRO';
	font-size: 1rem;
	vertical-align: middle;
}