/* Site CSS */
 @import "homepage-styles.css";
 @import "branch-styles.css";
 @import "covid-styles.css";
 @import "gened-styles.css";
 @import "ul.tabs.css";
 
 /******** "Bento" Search Results *********/
 
 #grex > #grex-tabs > .nav-tabs > li {
margin: 0 5px 0 0; 
border: solid; 
border-width: 1px 1px 0 1px; 
border-top-left-radius: 10px; 
border-top-right-radius: 10px;
 }
 
 #grex .panel-default {
     margin-right:20px;
     margin-bottom: 0;
     min-width: 17rem;
 }
 
 #grex #searchResults .srpanel {
     border-color: #ba0c2f;
 }
 
 #grex #searchResults .srpanel .panel-heading, #grex #searchResults .srpanel .panel-footer {
     color: #ffffff;
     background-color:transparent;
     border-color:transparent;
 }
 
 .srlist {
     padding-left: 0;
 }
 
 .srlist li {
     list-style: none;
     padding:7px;
 }
 
 .srlist li:nth-of-type(even) {
     background-color:#f5f5f5;
     border-radius: 4px; 
 }
 
 /******** Loboalert dismiss button *********/
 #loboalert {
	 position: relative;
	 padding-top:10px;
}

#loboalert .close {
    font-size:28px;    
}

 #page {
	 overflow: hidden;
}

/******** Office Hours Styles *********/

	 .oh label
	 {
	     font-weight:400;
	 }
	 
	 .oh a:hover
	 {
	     text-decoration:none;
	 }


/** Hide the second page title region current page block necessary for title element to work */
 #primary>h1 {
	 display: none;
}
/*********************** * * Top Navigations * ***********************/
 #nav, #main-nav {
	 background-color:#333;
}
 #main-nav a {
	 padding: 7px;
	 display: inline-block;
	 font-size: 1.1em;
	 color: #fff;
	 width: 100%;
}
 #main-nav a:hover, #main-nav a:focus {
	 color: #ba0c2f;
}
 #top-nav a.active, #main-nav a.active {
	 background-color: #fff;
	 color: #ba0c2f;
}
 #header {
	 padding: 0;
	 background-color: rgba(51, 51, 51,.8);
	 width: 100%;
	 top: 32px;
	 z-index: 1;
}
 #top-nav a {
	 color: #fff;
	 padding: 8px 15px;
}
 #top-nav a:hover, #top-nav a:focus {
	 color: #ba0c2f;
}
 #mobile-menu #top-nav {
	 background-color: #333;
	 text-align: center;
}
 #mobile-menu.in {
	 max-width:100%;
}
 @media (max-width: 992px) {
	 .navbar-unm .container {
		 width: 100%;
	}
	 .navbar-unm .nav>li>a {
		 padding: 4px 10px;
	}
	 #top-nav a {
		 color: #fff;
		 padding: 8px 10px;
	}
	 #unm_search_form input {
		 width:80px;
	}
}
 @media (max-width:380px) {
	 .navbar-unm .navbar-brand {
		 max-width:100%;
		 left:0;
	}
}
/******* End Top Navigation **********/
 .navbar-brand {
	 background: #FFF;
	 color: #fff;
	 position: absolute;
	 border-bottom: 3px solid #ba0c2f;
	 background-image: url("/images/ullogo.png") !important;
	 text-indent: -999px;
	 width: 235px;
	 background-repeat: no-repeat;
	 height: 70px;
	 background-position-x: 50%;
	 background-position-y: 50%;
	 z-index: 100;
	 padding: 0;
	 background-size: contain;
	 top: -1px;
}
/******* secondary nav **************/
 #header .auxiliary-nav a {
	 color: #FFF;
	 background-color: inherit;
}
 #header .auxiliary-nav a:hover, #homepage .auxiliary-nav a:active {
	 background-color: inherit;
}
 #header .dropdown-menu {
	 padding: 0;
	 margin-top: 0px;
}
 #header .auxiliary-nav .dropdown-menu a {
	 color: black;
}
 #header .auxiliary-nav .dropdown-menu a:hover {
	 color: black;
	 background-color: #CCC;
}
 #header {
	 padding: 0;
	/* background-color: rgba(51, 51, 51,.8);
	 */
}
/******* end secondary nav **********/
/******* Hero images ************/
 #hero .boxshadow::after {
	 top: 100%;
	 left: 0;
	 width: 100%;
	 height: 0;
	 padding-top: 100%;
	 -webkit-transform-origin: 0 0;
	 -ms-transform-origin: 0 0;
	 transform-origin: 0 0;
	 -webkit-transform: none;
	 -ms-transform: none;
	 transform: none;
	 background: #c10037;
	 -webkit-box-shadow: none;
	 box-shadow: none;
}
 #hero .boxshadow::before {
	 top: 0;
	 left: 100%;
	 height: 100%;
	 width: 0;
	 padding-right: 100%;
	 -webkit-transform-origin: 0 0;
	 -ms-transform-origin: 0 0;
	 transform-origin: 0 0;
	 border: 1px solid black;
	 -webkit-transform: none;
	 -ms-transform: none;
	 transform: none;
	 background: #c10037;
	 -webkit-box-shadow: none;
	 box-shadow: none;
}
 #hero .boxshadow {
	 position: relative;
	 background-color: #c10037;
}
 #hero .carousel-caption {
	 left: 0;
	 right: 0;
	 bottom: 0;
}
 #hero .carousel-indicators {
	 position: relative;
	 bottom: 20px;
	 left: 50%;
	 z-index: 15;
	 width: 60%;
	 margin-left: -30%;
	 padding-left: 0;
	 list-style: none;
	 text-align: center;
}
 @media only screen and (min-width : 992px) {
	 #hero .boxshadow {
		 position: absolute;
		 background-color: rgba(0,0,0,.5);
	}
	 #hero .boxshadow::after {
		 -webkit-transform: skew(45deg,0deg);
		 -ms-transform: skew(45deg,0deg);
		 transform: skew(45deg,0deg);
		 background: -webkit-gradient(linear,left top, left bottom,color-stop(0, rgba(0,0,0,.3)),to(rgba(0,0,0,.3)));
		 background: -o-linear-gradient(top,rgba(0,0,0,.3) 0,rgba(0,0,0,.3) 100%);
		 background: linear-gradient(to bottom,rgba(0,0,0,.3) 0,rgba(0,0,0,.3) 100%);
		 -webkit-box-shadow: 1px 0 0 0 rgba(0,0,0,.1);
		 box-shadow: 1px 0 0 0 rgba(0,0,0,.1);
	}
	 #hero .boxshadow::before {
		 -webkit-transform: skew(0deg,45deg);
		 -ms-transform: skew(0deg,45deg);
		 transform: skew(0deg,45deg);
		 background: -webkit-gradient(linear,left top, right top,color-stop(0, rgba(0,0,0,.3)),to(rgba(0,0,0,.3)));
		 background: -o-linear-gradient(left,rgba(0,0,0,.3) 0,rgba(0,0,0,.3) 100%);
		 background: linear-gradient(to right,rgba(0,0,0,.3) 0,rgba(0,0,0,.3) 100%);
		 -webkit-box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
		 box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
	}
	 #hero .carousel-caption {
		 left: 15%;
		 right: 15%;
		 bottom: 0px;
	}
}
 @media only screen and (min-width : 1200px) {
	 #hero .carousel-indicators {
		 position: absolute;
		 bottom: 10px;
	}
	 #hero .carousel-caption {
		 left: 20%;
		 right: 20%;
		 bottom: 20px;
	}
}
/**** Alert Message width/margins/padding to match content****/

#hero .alert-container {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/**** End Hero Slider ****/
 #csel #hero {
	 height: 400px;
	 -webkit-transition: height 1s ease;
	 -o-transition: height 1s ease;
	 transition: height 1s ease;
	 background: transparent url('../../about/libraries/images/csel-banner.jpg') center bottom no-repeat;
	 background-size: auto;
	 background-size: cover;
	 margin-bottom: 0;
}
/* #cswr #hero {
	 height: 400px;
	 -webkit-transition: height 1s ease;
	 -o-transition: height 1s ease;
	 transition: height 1s ease;
	 background: transparent url('../../about/images/cswr-banner.jpg') center bottom no-repeat;
	 background-size: auto;
	 background-size: cover;
	 margin-bottom: 0;
}
*/
 #fadl #hero {
	 height: 400px;
	 -webkit-transition: height 1s ease;
	 -o-transition: height 1s ease;
	 transition: height 1s ease;
	 background: transparent url('../../about/libraries/images/fadl-1920x540.jpg') center bottom no-repeat;
	 background-size: auto;
	 background-size: cover;
	 margin-bottom: 0;
}
 #inlp #hero {
	 height: 400px;
	 -webkit-transition: height 1s ease;
	 -o-transition: height 1s ease;
	 transition: height 1s ease;
	 background: transparent url('../../about/libraries/images/inlp-banner.jpg') center bottom no-repeat;
	 background-size: auto;
	 background-size: cover;
	 margin-bottom: 0;
}
 #lac #hero {
	 height: 400px;
	 -webkit-transition: height 1s ease;
	 -o-transition: height 1s ease;
	 transition: height 1s ease;
	 background: transparent url('../../about/images/latin-page-banner.jpg') center bottom no-repeat;
	 background-size: auto;
	 background-size: cover;
	 margin-bottom: 0;
}
 #magic #hero {
	 height: 400px;
	 -webkit-transition: height 1s ease;
	 -o-transition: height 1s ease;
	 transition: height 1s ease;
	 background: transparent url('../../about/images/magic-banner-2.jpg') center bottom no-repeat;
	 background-size: auto;
	 background-size: cover;
	 margin-bottom: 0;
}
 #pml #hero {
	 height: 400px;
	 -webkit-transition: height 1s ease;
	 -o-transition: height 1s ease;
	 transition: height 1s ease;
	 background: transparent url('../../about/libraries/images/pml-outside-1920x540.png') center bottom no-repeat;
	 background-size: auto;
	 background-size: cover;
	 margin-bottom: 0;
}
#rds #hero {
	 height: 400px;
	 -webkit-transition: height 1s ease;
	 -o-transition: height 1s ease;
	 transition: height 1s ease;
	 background: transparent url('/services/images/rdsbanner.jpg') center bottom no-repeat;
	 background-size: auto;
	 background-size: cover;
	 margin-bottom: 0;
 }
 #zim #hero {
	 height: 400px;
	 -webkit-transition: height 1s ease;
	 -o-transition: height 1s ease;
	 transition: height 1s ease;
	 background: transparent url('../../about/libraries/images/zimmerman-banner.jpg') center bottom no-repeat;
	 background-size: auto;
	 background-size: cover;
	 margin-bottom: 0;
}

 #fourohfour #hero {
	 height: 400px;
	 -webkit-transition: height 1s ease;
	 -o-transition: height 1s ease;
	 transition: height 1s ease;
	 background: transparent url('../../images/404-shelves.jpg') center bottom no-repeat;
	 background-size: auto;
	 background-size: cover;
	 margin-bottom: 0;
}

/*******END Hero images ************/
/********** Box Grid Styles ***********/
 .boxes__box a {
	 color: inherit;
	 text-decoration: none;
}
 .boxes__box p {
	 margin: 5px;
	 padding: 0 0 10px 10px;
}
 .boxes__box img {
	 width: 100%;
}
 .boxes__box_1 p:nth-child(3) {
	 display: none;
}
/******* End Box Grid Styles ***********/
/*******Start FAQ boxes ************/
 div.faq h1 {
	 font-family: "Gotham A","Gotham B","Helvetica Neue",Helvetica,Arial,sans-serif;
	 font-size: 15px;
	 font-weight: normal;
	 line-height: 1.5;
	 color: #222;
}
 span.s-la-faq-listing-topics {
	 display: none;
}
 span.metalabel span.divider {
	 display: none;
}
 span.s-la-faq-listing-views span {
	 display: none;
}
 span.s-la-faq-listing-updated span.divider {
	 display: none;
}
 span.s-la-faq-listing-updated {
	 display: block;
	 line-height: 0.8;
	 margin-top: -1px;
	 margin-bottom: 10px;
	 text-indent: 5px;
}
 span.s-la-faq-listing-updated > span {
	 font-size: 12px;
	 font-weight: lighter;
	 font-style: italic;
}
/*******end FAQ boxes ************/
/********** Experimental (Things DAH is testing ***/

table.stripey > thead {
    background-color: #ba0c2f;
    color: #FFF;
}

 table.stripey tr:nth-child(even) {
    background-color: #ebebeb;
}

 H4 {
	 font-family: "gotham";
}
/************ * Hours ************/
 .hours-noscript a {
	 text-decoration: underline;
}
/**** Clock *****/
 .clockContainer {
	 display: -webkit-inline-box;
	 display: -ms-inline-flexbox;
	 display: inline-flex;
	 -webkit-box-align: center;
	 -ms-flex-align: center;
	 align-items: center;
	 -webkit-box-pack: center;
	 -ms-flex-pack: center;
	 justify-content: center;
}
 .clockContainer .clock {
	 position: relative;
	 width: 30px;
	 height: 30px;
	 background: url(/assets/images/icons/clock/clockface.png);
	 background-size: cover;
}
 .clockContainer .hands {
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 30px;
	 height: 30px;
}
/**** End Clock *****/
/************ * End Hours ************/
/******************* * * News Slider * *******************/
 .newsitem {
	 float: left;
	 background-color:#fff;
	 width: 100%;
}
 .newsitem:nth-child(3n) {
	 background: #ba0c2f;
	 color: #fff;
}
 .newsitem:nth-child(3n+1) {
	 background-color: #f6f6f6;
}
 .newsitem:nth-child(3n) a {
	 color: #fff;
}
 .newstext{
	 padding: 0 20px;
	 height: 125px;
}
/* Extra Small Devices, Phones */
 @media only screen and (min-width : 480px) {
	 .newsitem, .eventitem {
		 width:100% 
	}
}
/* Small Devices, Tablets */
 @media only screen and (min-width : 768px) {
	 .newsitem, .eventitem {
		 width:50% 
	}
}
/* Medium Devices, Desktops */
 @media only screen and (min-width : 992px) {
	 .newsitem, .eventitem {
		 width:33.3333% 
	}
}
/* Large Devices, Wide Screens */
 @media only screen and (min-width : 1200px) {
	 .newsitem, .eventitem {
		 width:25% 
	}
}
 #newsslider {
	 background: #ba0c2f;
	 background: -webkit-gradient(linear, left top, right top, color-stop(50%, #ba0c2f), color-stop(50%, #fff));
	 background: -o-linear-gradient(left, #ba0c2f 50%, #fff 50%);
	 background: linear-gradient(90deg, #ba0c2f 50%, #fff 50%);
}
 #newsslider h2 {
	 margin: 0;
	 padding: 10px 0;
	 color: #fff;
	 z-index: 0;
	 position: relative;
	 width: 100%;
}
 #newsslider h2:before {
	 content: '';
	 position: absolute;
	 top: 0;
	 right: 0;
	 bottom: 0;
	 left: 0;
	 background-image: -o-linear-gradient(45deg,#ba0c2f 60%,#ffffff 60%);
	 background-image: linear-gradient(45deg,#ba0c2f 60%,#ffffff 60%);
	 z-index: -1;
}
 #newsslider .row.multicarousel {
	 border-top: 3px solid #ba0c2f;
}
 .carousel .item video {
	 width: 100%;
	 display: block;
	 max-width: 100%;
	 height: auto;
}
 // arai fix for focus .carousel-control .fa:focus {
	 outline: 1px dotted white;
}
 .multicarousel .carousel-control.left, .multicarousel .carousel-control.right {
	 width: auto;
	 background-image: none;
	 background-image: none;
	 top: 40%;
	 bottom: inherit;
}
 .aspect {
	 display:block;
	 width:100%;
	 overflow:hidden;
	 position: relative;
	 height: 0;
	 padding-top: 51.5%;
}
 .aspect img {
	 display: block;
	 min-width: 100%;
	 margin: auto;
	 position: absolute;
	 top: -100%;
	 right: -100%;
	 bottom: -100%;
	 left: -100%;
}
/********* End News Slider *********/
/********** Branch Hours ******/
 #magic tr.loc3183 {
	 display: none;
}
 #csel .dep3189 {
	 display: none;
}
 #inlp .loc3182 {
	 display: none;
}
#cswr .loc3182 {
	 display: none;
}
 #zim .dep11025 {
	 display: none;
}
 #magic th.hours-col-loc, #csel th.hours-col-loc, #fadl th.hours-col-loc, #pml th.hours-col-loc, #zim th.hours-col-loc, #cswr th.hours-col-loc, #inlp th.hours-col-loc {
	 display: none;
}
 table.hours-today {
	 float: right;
}
 .hours-col-time::before {
	 content: url(/assets/images/icons/home/clock24.png) "Today's Hours: ";
}
/********** END Branch Hours ******/
/**********END Experimental ***/
/************* Footer ************/
 #footer > .container {
	 width: 100%;
}
 #siteMap, #footer .col, #footer ul {
	 padding: 0;
	 margin: 0;
}
 #site-map-container {
	 display: -webkit-box;
	 display: -ms-flexbox;
	 display: flex;
	 -ms-flex-wrap: wrap;
	 flex-wrap: wrap;
	 -webkit-box-orient: vertical;
	 -webkit-box-direction: normal;
	 -ms-flex-direction: column;
	 flex-direction: column;
	 -webkit-box-pack: start;
	 -ms-flex-pack: start;
	 justify-content: flex-start;
	 -webkit-box-align: start;
	 -ms-flex-align: start;
	 align-items: flex-start;
}
 #site-map-container .col {
	 margin: 20px;
}
 #footer ul {
	 list-style: none;
}
 #footer .col ul li:first-child {
	 font-size: 2.0em;
}
 #footer #unm_footer_links li {
	 float: left;
	 padding: 0 5px;
}
/**********End Footer ************/
/****************** * Snippets ******************/
/********* - Visually Hidden - Class visuallyhidden is added when elements should be visuallyhidden but still accessible to screen readers and other browser aids. ********/
 .visuallyhidden {
	 border: 0;
	 clip: rect(0 0 0 0);
	 height: 1px;
	 margin: -1px;
	 overflow: hidden;
	 padding: 0;
	 position: absolute;
	 width: 1px;
}
/***** End Visually Hidden ********/
/******************** * Media Queries ********************/
/****** Screen 480 *********/
 @media only screen and (min-width: 30em) {
	/********** Box Grid Styles ***********/
	 .boxes__container br {
		 display: none;
	}
	 .boxes__container .boxes__box img {
		 width: 300px;
		 height: 200px;
	}
	 .boxes__box p {
		 margin: 0;
		 padding: 0;
	}
	 .boxes__container {
		 width: 100%;
		 margin: 15px auto;
		 display: -ms-grid;
		 display: grid;
		 -ms-grid-columns: 1fr 10px 1fr;
		 grid-template-columns: 1fr 1fr;
		 -ms-grid-rows: auto 10px auto 10px auto;
		 grid-template-rows: auto auto auto;
		 grid-gap: 10px;
		 grid-template-areas: "box_1 box_2" "box_3 box_4" "box_5 box_6";
	}
	 .boxes__box_1 {
		 grid-area: box_1;
	}
	 .boxes__box_2 {
		 grid-area: box_2;
	}
	 .boxes__box_3 {
		 grid-area: box_3;
	}
	 .boxes__box_4 {
		 grid-area: box_4;
	}
	 .boxes__box_5 {
		 grid-area: box_5;
	}
	 .boxes__box_6 {
		 grid-area: box_6;
	}
	/******* End Box Grid Styles ***********/
}
 @media only screen and (min-width: 30em){
	 .boxes__box_1 {
		 -ms-grid-row: 1;
		 -ms-grid-column: 1;
	}
	 .boxes__box_2 {
		 -ms-grid-row: 1;
		 -ms-grid-column: 3;
	}
	 .boxes__box_3 {
		 -ms-grid-row: 3;
		 -ms-grid-column: 1;
	}
	 .boxes__box_4 {
		 -ms-grid-row: 3;
		 -ms-grid-column: 3;
	}
	 .boxes__box_5 {
		 -ms-grid-row: 5;
		 -ms-grid-column: 1;
	}
	 .boxes__box_6 {
		 -ms-grid-row: 5;
		 -ms-grid-column: 3;
	}
}
/****** End Screen 480 *****/
/*** Small Screen Size 570px ***/
 @media only screen and (min-width: 570px) {
	 .boxes__box p {
		 margin: 5px;
		 padding: 0 0 10px 10px;
	}
}
/*** End Small Screen Size 570px ***/
/*** Small Screen Size 640px ***/
 @media only screen and (min-width: 640px) {
	 #site-map-container {
		 -webkit-box-orient: horizontal;
		 -webkit-box-direction: normal;
		 -ms-flex-direction: row;
		 flex-direction: row;
		 -webkit-box-pack: justify;
		 -ms-flex-pack: justify;
		 justify-content: space-between;
	}
	 #footer #unm_footer_links li {
		 padding: 0 15px;
	}
}
/*** End Small Screen Size 640px ***/
/*** Small Screen Size 670px ***/
 @media only screen and (min-width: 670px) {
	 .boxes__container .boxes__box img {
		 width: 100%;
	}
}
/*** End Small Screen Size 670px ***/
/*** Small Medium Size 768px ***/
 @media only screen and (min-width: 768px) {
	 #secondary-nav {
		 height: 38px;
	}
	 #secondary-nav nav {
		 padding-top: 5px;
	}
}
/*** End Medium Screen Size 768px ***/
/*** Small Large Size 992px ***/
 @media only screen and (min-width: 992px) {
	/*********** Box Grid Styles ***********/
	 .boxes__box_1 {
		 width: 610px;
	}
	 .boxes__container .boxes__box img {
		 width: 300px;
		 height: 200px;
	}
	 .boxes__container .boxes__box_1 img{
		 width: 610px;
		 height: 510px;
	}
	 .boxes__container {
		 width: 930px;
		 -ms-grid-columns: 300px 10px 300px 10px 300px;
		 grid-template-columns: 300px 300px 300px;
		 -ms-grid-rows: 300px 10px 300px 10px 300px;
		 grid-template-rows: 300px 300px 300px;
		 grid-template-areas: "box_1 box_1 box_2" "box_1 box_1 box_3" "box_4 box_5 box_6";
	}
	/******* End Box Grid Styles ***********/
	/******* Footer Styles ***********/
	 #footer #unm_footer_links li {
		 padding: 0 35px;
	}
	/******* End Footer Styles ***********/
	 .boxes__box_1 {
		 -ms-grid-row: 1;
		 -ms-grid-row-span: 3;
		 -ms-grid-column: 1;
		 -ms-grid-column-span: 3;
	}
	 .boxes__box_2 {
		 -ms-grid-row: 1;
		 -ms-grid-column: 5;
	}
	 .boxes__box_3 {
		 -ms-grid-row: 3;
		 -ms-grid-column: 5;
	}
	 .boxes__box_4 {
		 -ms-grid-row: 5;
		 -ms-grid-column: 1;
	}
	 .boxes__box_5 {
		 -ms-grid-row: 5;
		 -ms-grid-column: 3;
	}
	 .boxes__box_6 {
		 -ms-grid-row: 5;
		 -ms-grid-column: 5;
	}
/*** End Large Screen Size 992px ***/


