/* -----------------------------------------------------------------------
Vanderbilt University Stylesheet
University Web Communications (web.vanderbilt.edu)
SHARED STYLES OVERRIDES
----------------------------------------------------------------------- */

/* WHICH TYPE OF HEADER -- REMOVE WHAT YOU DO NOT USE */ 

/* 
** HEADER WITH BACKGROUND IMAGE (requires FOUR files)  ** 
*/
.header-background {
    background: #000 url("../images/vuheader-bg-1x.jpg") top center; background-size: cover;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    .header-background {
        background-color: #669999;
		background-image: url("../images/vuheader-bg-2x.jpg");
        background-size: cover;
        text-shadow: 1px 1px 6px #111;
    }
}

/* 
** HEADER ONLY (requires TWO files)  ** 
*/
.header-background {
    background-color: #000;
}

/* 
###############	
    GLOBAL  (This might need a better name.)
############### 
*/

/* Softening primary button text. Black is too strong. */
.primary-content a.btn-primary,
.vu-footer__map a.btn-primary {
	color: hsl(0, 0%, 20%);
}

/* Mainly so inset shadows for images will work. */
.vu-main-content .panel {
	position: relative;
	z-index: 0;
}

/* For images that blend into the white background. */
.inset-shadow {
    box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.1);
    border-radius: 4px;
    overflow: hidden;
	display: inline-block;
}

.inset-shadow .img-responsive {
    position: relative;
	z-index: -1;
}

/* 
====================================
    Bootstrap Class Extensions 
====================================
*/

.text-uppercase {
	letter-spacing: 0.5px;
}

/*
================================
    Custom Utility Classes
================================
*/

.icon--alert {
	display: block;
	font-size: 1.5em;
	margin-bottom: 15px;
}

.alert__icon {
	display: block;
	text-align: center;
	margin-bottom: 10px;
}

/* 
===============
    Headers 
===============
*/

.vu-main-content h1 {
	margin-bottom: 1.5625rem;
}

.vu-main-content h2 {
	background: none;
	border: 0;
	padding: 0;
}

/*
=================
    Forms
=================
*/

/* Give form elements more space and align label tags (https://getbootstrap.com/docs/3.3/components/#labels) w/ text. */
.form-group {
	margin-bottom: 1.3333rem;
}

.radio {
	margin-bottom: 0.9375rem;
}

.radio label {
	padding-left: 1.5625rem;
}

.radio input[type=radio] {
	margin-left: -1.5625rem;
}

.label {
	margin-left: 0.3125rem;
	position: relative;
	top: -0.125rem;
}

.label-info {
	background-color: hsl(194, 66%, 37%);
}

.label-danger {
	background-color: hsl(2, 64%, 53%);
}

/* Honeypot fields */
.form-group[aria-hidden=true] {
	position: absolute;
	z-index: -1;
}

/*
================
	Buttons
================
*/

#anchordown .btn {
	font-weight: 500;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	white-space: normal;
}

.primary-content .btn-primary {
	color: #333;
}

/*
================
    Videos
================
*/

/* This extra rule is needed to get videos - like YouTube - to format properly */
.embed-video {
  margin-bottom: 2em;
  overflow: hidden;
  z-index: 0;
}

/*
======================
    Banner Images
======================
*/

.heard-home .img-banner.header-background[data-div*="Heard"] {
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/banners/banner-heard-home.jpg") top center / cover no-repeat;
	min-height: 385px;
}

.img-banner.header-background[data-div*="Heard"] {
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/banners/banner-heard.jpg") top center / cover no-repeat;
}

.img-banner.header-background[data-div*="Biomedical"] {
	background: url('/images/banners/banner-biomedical.jpg') top center / cover no-repeat;
}

.img-banner.header-background[data-div*="Central"] {
	background: url('/images/banners/banner-central.jpg') top center / cover no-repeat;
}

.img-banner.header-background[data-div*="Digital Scholarship and Communication"] {
	background: url('/images/banners/banner-disc.jpg') top center / cover no-repeat;
}

.img-banner.header-background[data-div*="Divinity"] {
	background: url('/images/banners/banner-divinity.jpg') top center / cover no-repeat;
}

.img-banner.header-background[data-div*="Gallery"] {
	background: url('/images/banners/banner-gallery.jpg') top center / cover no-repeat;
}

.img-banner.header-background[data-div*="Law"] {
	background: url('/images/banners/banner-law.jpg') top center / cover no-repeat;
}

.img-banner.header-background[data-div*="Management"] {
	background: url('/images/banners/banner-management.jpg') top center / cover no-repeat;
}

.img-banner.header-background[data-div*="Music"] {
	background: url('/images/banners/banner-music.jpg') top center / cover no-repeat;
}

.img-banner.header-background[data-div*="Peabody"] {
	background: url('/images/banners/banner-peabody.jpg') top center / cover no-repeat;
}

.img-banner.header-background[data-div*="Science"] {
	background: url('/images/banners/banner-science.jpg') top center / cover no-repeat;
}

.img-banner.header-background[data-div*="Special Collections"] {
	background: url('/images/banners/banner-specialcollections.jpg') top center / cover no-repeat;
}

.img-banner.header-background {
	position: static;
	margin: 0;
}

.heard-home .img-banner .container--banner {
	padding-bottom: 0.9375rem; 
	padding-top: 0;
}

.img-banner .container--banner {
	padding: 2.8125rem 1.875rem;
}

.graphic-header__small {
    color: #fff;
	display: inline-block;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1.5em;
    line-height: 1.25;
    text-transform: uppercase;
}

@media only screen and (min-width: 48em) {
	.graphic-header__small {
		font-size: 1.75em;
	}
}

@media only screen and (min-width: 62em) {
	.graphic-header__small {
		font-size: 2em;
	}
}

.heard-home .graphic-header__title {
	text-align: center;
}

.img-banner.header-background[data-div*="Heard"] .graphic-header__title {
	margin: 0;
}

.header-background .graphic-header__title {
	font-size: 2.25em;
	margin: 0.5rem 0 0 0;
}

@media only screen and (min-width: 48em) {
	.header-background .graphic-header__title {
		font-size: 3.25em;
	}
}

@media only screen and (min-width: 62em) {
	.header-background .graphic-header__title {
		font-size: 4em;
	}
}

/*
==========================================
    Survicate (pop-up survey software)
==========================================
*/

/* Make the survey's footer text color match the color used in the main portion of the survey, for accessibility/contrast reasons */
#survicate-box .surv-close,
#survicate-box .surv-footer a {
	color: inherit !important;
}


/* 
#################
    HOMEPAGES	
#################
*/

/*
==================
    General
==================
*/

/* Give space between the events section and right sidebar. */
.vu-main-content {
	padding: 1.2em 0;
}

/* Claim back some horizontal space for the panel body of the homepage(s) main content section. */
.vu-main-content .primary-content .panel-body {
	padding: 15px 0;
}

.vu-main-content .row {
	margin-bottom: 0;
}

/*
==================
    Headers
==================
*/

/* Set homepage headers */
.home .vu-main-content h2,
.home .vu-main-content h3,
.home .vu-main-content h4 {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.5rem;
	line-height: 1.35;
}

/* Uppercase */
.sidebar__right .todays-hours-heardhome strong,
.sidebar__right h2,
.sidebar__right h4 {
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* Primary content headers */
.home .primary-content h3 {
	font-size: 2.25rem;
	margin-top: 0;
}

/* 
==============================
    Library Search Form
==============================
*/

/*
------------------------------
    Division/Base Styles
------------------------------
*/

#library-search-box_container {
	background-color: #f7eedb;
	border-radius: 6px;
	border-top: 15px solid #d8ab4c;
	margin-bottom: 2.8125rem;
	padding: 20px;
}

#library-search-info .library-search-box__icon {
	margin-right: 2px;
}

#library-search-form {
	background-color: #fff;
	border-radius: 4px;
	display: flex;
	margin-top: 0.5rem;
}

#library-search-form .form-group {
	flex: 1 1 auto;
	margin-bottom: 0;
}

#library-search-form .form-group input {
	border: 0;
	border-bottom: 2px solid hsla(0, 0%, 0%, 0.25);
	border-bottom-right-radius: 0;
	box-shadow: none;
	width: 100%;
}

#library-search-form .library-search-box_button {
	background-color: transparent;
	border-radius: 0;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: 2px solid hsla(0, 0%, 0%, 0.25);
	
}

#library-search-form .library-search-box_button:hover, 
#library-search-form .library-search-box_button:focus {
	background-color: hsl(41, 64%, 57%);
}

#library-search-form .library-search-box_button:focus {
	outline: none;
	box-shadow: none;
}

#library-search-form .library-search-box_button:active {
	background-color: hsl(41, 64%, 47%) !important;
	border: 0;
	border-top: 2px solid hsla(0, 0%, 0%, 0.35);
	box-shadow: inset 3px 0px 3px -3px hsl(41, 64%, 30%),
				inset 0px -3px 3px -3px hsl(41, 64%, 30%), 
				inset -3px 0px 3px -3px hsl(41, 64%, 30%);
}

#library-search-form .library-search-box_button .glyphicon-search {
	color: #333;
	font-size: 1.25rem;
}

#library-search-form .library-search-box_button:hover .glyphicon-search, 
#library-search-form .library-search-box_button:focus .glyphicon-search {
	color: hsl(41, 64%, 20%);
}

#library-search-box_linklist {
	align-items: center;
	display: flex;
	font-size: 0.875rem;
	justify-content: space-between;
}

#library-search-box_container .btn-link,
.btn-greedy {
	border: 0;
	border-radius: 4px;
	color: hsl(41, 64%, 27%);
}

#library-search-box_linklist .btn-link:hover,
#library-search-box_linklist .btn-link:focus,
.btn-greedy:hover,
.btn-greedy:focus {
	background-color: hsla(41, 64%, 50%, 0.35);
	text-decoration: none;
}

#library-search-box_linklist .btn-link:active,
.btn-greedy:active {
	background-color: #333;
	color: #f5f5f5;
	text-decoration: none;
}

#library-search-box_container .library-search-info-link.btn-link:hover,
#library-search-box_container .library-search-info-link.btn-link:active {
	text-decoration: underline;
}

#library-search-box_linklist .left-links {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

#library-search-box_linklist .left-links,
#library-search-box_linklist .right-links {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

/*
-------------------------
    Heard Home Only
-------------------------
*/
.heard-home .img-banner img {
	position: absolute;
	left: -99999px;
}

.heard-home .img-banner {
	padding: 45px 0;
}

.heard-home #library-search-box_container {
	background-color: rgba(0, 0, 0, 0.8);
	background-image: none;
	border-top: 0;
	margin: 0 auto;
	max-width: 900px;
	padding: 30px;
	position: relative;
}

@media only screen and (min-width: 48em) {
	.heard-home #library-search-box_container {
		padding: 45px;
	}
}

.heard-home #library-search-box_container .btn-link,
.heard-home .btn-greedy {
	border-radius: 4px;
	color: #f5f5f5;
}

.heard-home #library-search-box_linklist .btn-link:hover,
.heard-home #library-search-box_linklist .btn-link:focus,
.heard-home .btn-greedy:hover,
.heard-home .btn-greedy:focus {
	background-color: hsla(0, 0%, 100%, 0.15);
	text-decoration: none;
}

.heard-home #library-search-box_linklist .btn-link:active,
.heard-home .btn-greedy:active {
	background-color: #d8ab4c;
	color: #333;
	text-decoration: none;
}

/*
========================
    Popover buttons
========================
*/

.popover .popover-content .btn {
	border: 1px solid #333;
	color: #333;
}

.popover .popover-content .btn:hover,
.popover .popover-content .btn:focus {
	background-color: #333;
	color: #f5f5f5;
}

.popover .popover-content .btn:active {
	color: #d8ab4c;
}

/* 
=====================
    Sidebar Left
=====================
*/

.sidebar__left {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='450' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.05'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/svg%3E"); /* background by SVGBackgrounds.com */
	border-top: 0;
	margin-bottom: 15px;
}

.sidebar__left h3,
.sidebar__left h5 {
	padding-left: 0.9375rem;
}

.sidebar__left .btn {
	background: transparent;
	border: 1px solid #ccc;
	color: #ccc;
	margin-top: 10px;
	white-space: initial;
}

.sidebar__left .btn:hover,
.sidebar__left .btn:active {
	background-color: #eee;
}

/* get images in left aside to align properly (3-col only) */
.sidebar__left img {
	width: 100%;
}

/* Give FA icons a little more breathing room. */
.sidebar__left i {
	margin-right: 5px;
}

/*
---------------
    Links
---------------
*/

.sidebar__left .nav.nav-stacked {
	margin-bottom: 1.875rem;
}

.sidebar__left .nav.nav-stacked li .link-label {
	font-size: 0.875rem;
	padding-left: 30px;
	padding-bottom: 15px;
}

.sidebar__left .nav.nav-stacked li .link-label:first-child {
	padding-bottom: 0;
	padding-top: 10px;
}

.sidebar__left .nav.nav-stacked li .link-label a:hover,
.sidebar__left .nav.nav-stacked li .link-label a:active {
	color: #d8ab4c;
}

/* Distinguish b/t link + label groups better. */
.sidebar__left .nav.nav-stacked > li {
	border-top: 1px dotted rgba(255, 255, 255, 0.25);
}

.sidebar__left .nav.nav-stacked > li:first-child {
	border: 0;
}

.sidebar__left .nav.nav-stacked > li + li {
	margin-top: 0;
}

/* 
======================
    Sidebar Right
====================== 
*/

/*
-----------------
    General
-----------------
*/

/* Panel style */
.sidebar__right .todays-hours,
.sidebar__right .ask,
.sidebar__right .upcoming-events,
.sidebar__right .widget {
	border: 0;
	overflow: hidden;
}

.sidebar__right .todays-hours h2,
.sidebar__right .ask h2,
.sidebar__right .upcoming-events h4,
.sidebar__right .widget .widget-title {
	background-color: #006682;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='450' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/svg%3E"); /* background by SVGBackgrounds.com */
	background-size: cover;
	border: 0;
	border-radius: 0;
	color: #fff;
	font-size: 1.125rem;
	margin: 0;
	padding: 0.625rem 0.9375rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Add side padding back on mobile */
@media only screen and (max-width: 47.9375em) {
	.sidebar__right.col-sm-3 {
		padding: 0 15px;
	}
}

/* Align top of right sidebar with primary content panel and remove the right padding to gain more space for content */
.sidebar__right {
	padding-top: 0;
	padding-right: 0;
}

/*
-------------------------
    Links (General)
-------------------------
*/

/* Remove background from links */
.sidebar__right .nav-stacked:not(.sidebar-news__list) a:link, 
.sidebar__right .nav-stacked:not(.sidebar-news__list) a:visited {
	background-color: transparent;
	margin-bottom: 0.5rem;
}

/* Increase contrast of text and background on hover */
.sidebar__right .nav-stacked:not(.sidebar-news__list) a:hover,
.sidebar__right .nav-stacked:not(.sidebar-news__list) a:active {
	background-color: hsl(193, 30%, 95%);
	border-right: 3px solid #006682;
	color: #006682;
}

/* A class to make links in the right sidebar not be entire-row blocks */
.sidebar__right a.link-simple, 
.sidebar__right a.link-simple, 
.sidebar__right a.link-simple {
	background-color: inherit;
	border-right: none;
	display: inherit;
}

/* Button links */
.sidebar__right a.btn {
    color: #006682;
    border-color: #006682;
	margin-top: 10px;
	text-decoration: none;
	white-space: initial;
}

.sidebar__right a.btn:hover,
.sidebar__right a.btn:active {
	background-color: #006682;
	color: #fff;
}

/*
----------------------------
    Today's Hours Panel
----------------------------
*/

.sidebar__right .todays-hours i {
	margin-right: 0.5rem;
}

/* Heard only */
.sidebar__right .todays-hours-heardhome a {
	align-items: flex-start;
	display: flex;
    padding: 0.5rem 0.9375rem;
}

.sidebar__right .todays-hours-heardhome img {
	border-radius: 4px;
    margin-right: 0.625rem;
	max-width: 60px;
}

.sidebar__right .todays-hours-heardhome a div {
	overflow: hidden;
}

.sidebar__right .todays-hours-heardhome strong {
    display: block;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sidebar__right .todays-hours-heardhome p {
	color: #006682;
	font-size: 1rem;
	margin-bottom: 0.9375rem;
}

/* Division only */
.sidebar__right .todays-hours-divisional .h3 {
	line-height: 1.25;
}

.sidebar__right .todays-hours-divisional .h4 {
	line-height: 1.35
}

.sidebar__right .todays-hours-divisional .h5 {
	line-height: 1.6;
}

/*
--------------------------
    Ask Division Panel
--------------------------
*/

/* Ask (Library) Contact Info */
.sidebar__right .ask-division {
	font-weight: 500;
}

.sidebar__right .ask-division li:last-child {
	margin-bottom: 15px;
}

.sidebar__right .ask-division i {
    background-color: #006682;
	border-radius: 50%;
    color: #fff;
	margin-right: 8px;
	min-width: 28px;
    padding: 6px;
}

/*
------------------------------
    Upcoming Events Panel
------------------------------
*/

.upcoming-events b {
    font-weight: 500;
    color: #006682;
}

.upcoming-events i {
    margin-right: 0.5rem;
}

/*
===============
    Events
===============
*/

.events h2 {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 2.25rem;
	margin-bottom: 2rem;
	text-align: center;
}

/* Increase contrast ratio of "View More Events" button. */
.events .btn-primary {
	background-color: #993d1b;
	color: #fff;
}

.events .btn-primary:hover,
.events .btn-primary:active {
	background-color: hsl(16, 70%, 27%);
}

/* Align event social icons on Heard homepage into center of their container. */
.event-share .event-facebook,
.event-share .event-twitter {
	align-items: center;
	display: flex;
	font-size: 1rem; /* Twitter brand guidelines state the logo should not be less than 16px. */
	justify-content: center;
	margin: 0;
	padding: 0;
}

/* Needed after removing duplicate ids from calendar templates */
.event .event-share ul {
	padding: 5px 0;
}

.event .event-share ul li {
	margin: 0;
	padding: 0;
}

/* Correct Twitter brand color */
.event-twitter {
	color: hsl(203, 89%, 53%) !important;
}

.event-twitter:hover, 
.event-twitter a:hover {
	background-color: hsl(203, 89%, 53%) !important;
}

/* 
=================
    GSW List
================= 
*/
.gsw-container {
	margin-bottom: 0.9375rem;
}

.gsw-list {
	padding: 0;
}

.gsw-list__item {
	list-style-type: none;
	margin-bottom: 1.875rem;
}

.gsw-list__link {
	align-items: center;
    background-color: hsl(193, 68%, 33%);
	border: 0 !important;
    color: #fff !important;
	display: flex;
    height: 60px;
    text-align: left;
	white-space: initial;
}

.gsw-list__link:hover,
.gsw-list__link:active {
	background-color: #006682;
}

.gsw-list__icon {
	font-size: 1.2rem;
	margin-right: 0.75rem;
}

.gsw-list__icon--vu {
	margin-left: 5px;
	margin-right: 17px;
}

.gsw-list__title {
	font-size: 1rem;
}

/*
===========================
    Recent Library News
===========================
*/

/* Remove strange top margin from Recent News section. */
.vu-news-list {
	margin-top: 0;
}

/* Fixing wrong photo size uploads... */
@media only screen and (min-width: 48em) {
	.vu-news-list .img-responsive {
		height: 170px;
	}
}

@media only screen and (min-width: 62em) {
	.vu-news-list .img-responsive {
		height: 106px;
	}
}

@media only screen and (min-width: 75em) {
	.vu-news-list .img-responsive {
		height: 132px;
	}
}

.vu-news-list p {
	font-weight: 400;
	margin-top: 0.5em;
	margin-bottom: 1em;
}

.vu-news-list .media-list ul {
	list-style-type: none;
    padding: 0;
}

/* 
######################	
    CONTENT PAGES  
######################
*/

/* Make nav-simple menu items sit next to each other as in the old site */
.nav-simple li {
	display: block;
}

.nav-simple li a {
	display: inherit;
}

.panel .nav-simple {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding: 0;
}

.panel .nav-simple > li {
	margin-right: 15px;
}

/* Align and display collection items 1/2/3 per row based on viewport size. This hooks into existing class from previous site. */
.collections {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.collection {
	width: 100%;
	padding: 0 15px;
	margin-bottom: 1.875rem;
}

.collections .collection img {
	height: auto;
	width: 100%;
	margin-bottom: 0.625rem;
}

@media only screen and (min-width: 48em) and (max-width: 61.9375em) {
	.collection {
		width: 50%;
	}
}

@media only screen and (min-width: 62em) {
	.collection {
		width: 33.33%;
	}
}

/* 
======================
    Callout Box 
======================
*/

.callout-box {
	background-color: #fff;
	border: 1px solid rgb(221, 221, 221);
	border-radius: 4px;
	float: none;
	margin-bottom: 20px;
}

.callout-box h4 {
	background-color: #f5f5f5;
	border-bottom: 1px solid rgb(221, 221, 221);
	margin: 0 !important;
	padding: 15px;
}

.callout-box .callout-content {
	padding: 15px;
}

.callout-box ul {
	margin-top: 0.9375rem;
	margin-bottom: 0.9375rem;
}

@media only screen and (min-width: 62em) {
	.callout-box {
		float: right !important;
		margin-left: 20px;
		max-width: 41.66666667%;
	}
}

/* 
######################	
    STAFF DIRECTORY  
######################
*/

/*
==================
    Navigation
==================
*/

.directory-browse {
    margin-top: 15px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    padding: 10px 15px;
    background-color: #F6F6F6;
}

.directory-browse a:link,
.directory-browse a:visited {
    white-space: nowrap;
    transition: all 0.2s ease-in-out 0s;
    text-decoration: none;
    color: #5A5A5A;
    border: 1px solid #e3e3e3;
    padding: 6px 10px;
    font-size: .85rem;
    line-height: 2.8;
    background-color: #fff;
}


/*
==================
  Lists of People
==================
*/

.directory-container {
	display: flex;
	flex-wrap: wrap;
}

.directory-browse a:active,
.directory-browse a.current {
    border: 1px solid #336699;
}

.directory-entry {
	background-color: #f5f5f5;
	margin-bottom: 1.5625rem;
	overflow: hidden;
	width: 100%;
}

@media only screen and (min-width: 48em) and (max-width: 61.9375em) {
	.directory-entry {
		width: calc(100%/3 - 0.9375rem);
		margin-right: 1.125rem;
	}
	
	.directory-entry:nth-child(3n+3) {
		margin-right: 0;
	}
}

@media only screen and (min-width: 62em) and (max-width: 74.9375em) {
	.directory-entry {
		width: calc(100%/4 - 0.9375rem);
		margin-right: 1.125rem;
	}
	
	.directory-entry:nth-child(4n+4) {
		margin-right: 0;
	}
}

@media only screen and (min-width: 75em) {
	.directory-entry {
		width: calc(100%/5 - 0.9375rem);
		margin-right: 1.125rem;
	}
	
	.directory-entry:nth-child(5n+5) {
		margin-right: 0;
	}
}

.directory-entry .headshot {
	display: none;
	margin: 0 auto;
}

@media only screen and (min-width: 48em) {
	.directory-entry .headshot {
		display: block;
	}
}

.directory-entry .directory-name {
	font-weight: 700;
	margin-bottom: 0.125rem;
	padding: 0 0.625rem;
}

.directory-entry a:hover,
.directory-entry a:active {
	text-decoration: underline;
}

.directory-title {
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5;
	margin-bottom: 0.9375rem;
}

@media only screen and (max-width: 47.9375em) {
	.directory-name,
	.directory-title {
		text-align: left;
	}
}

.directory-info-container {
	padding: 0 0.625rem;
}

.directory-info {
	border-top: 1px solid hsl(0, 0%, 75%);
	list-style-type: none;
	margin-bottom: 0.9375rem;
	padding: 0.9375rem 0 0 0;
}

.directory-info li {
	margin-bottom: 0.5rem;
}

.directory-info i {
	color: hsl(0, 0%, 45%);
	margin-right: 0.5rem;
}


/*
==========================
  Division Staff List
==========================
*/

.ask-entry {
	margin-bottom: 1rem;
}

.ask-entry-info ul {
	list-style-type: none;
	padding: 0;
}

.ask-entry-headshot-container {
	overflow: hidden;
}

.ask-entry .directory-name {
	font-weight: 700;
	margin: 0 0 0.5rem 0;
}

.ask-entry-headshot {
	margin-bottom: 1rem;
	max-height: 225px;
}


/* 
###############	
    FOOTER  
############### 
*/

/*
==================
    General
==================
*/

/* Set footer headers */
.vu-footer h4 {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1.35;
}

/* Remove large empty space below Support JAHL column on mobile viewports. */
.vu-footer__map .embed-responsive-16by9 {
	height: initial;
	padding: initial;
	z-index: 1;
}

/* Give space to footer links in lists. */
.vu-footer__yourvu li, 
.vu-footer__popular li {
	line-height: 1.35;
	margin-bottom: 0.5em;
}

/* 
==========================
    Social media icons 
==========================
*/
.vu-footer__social .social-icons {
	padding: 0 15px;
	margin: 15px 0 0 0;
}

.vu-footer__social .social-icons li {
	display: inline-block;
	margin-bottom: 10px;
}

.vu-footer__social .social-icons i {
	color: #fff;
	border-radius: 50%;
	display: inline-block;
    padding: 10px 0;
	transition: transform 150ms ease-in-out; 
    min-width: 50px;
	min-height: 50px;
}

.vu-footer__social .social-icons i:hover {
	transform: scale(1.1);
}

.vu-footer__social .social-icons .facebook i {
	background-color: hsl(221, 44%, 41%);
}

.vu-footer__social .social-icons .twitter i {
	background-color: hsl(203, 89%, 53%);
}

.vu-footer__social .social-icons .instagram i {
	background: radial-gradient(circle at 10% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.vu-footer__social .social-icons .youtube i {
	background-color: hsl(0, 100%, 46%);
}

.vu-footer__social .social-icons .flickr i {
	background-color: #fff;
	position: relative;
	z-index: 0;
}

.vu-footer__social .social-icons .flickr i:after {
	background: linear-gradient(to right, #0063dc 50%, #ff0084 50%);
	content: "";
	height: 18px;
	left: 15px;
	position: absolute;
	top: 15px;
	width: 20px;
	z-index: -1;
}

.vu-footer__social .social-icons .rss i {
	background-color: hsl(32, 100%, 50%);
	color: hsl(32, 100%, 18%);
}

.vu-footer__social .social-icons .linkedin i {
	background-color: hsl(201, 100%, 35%);
}

/*
=============================
    Support the Libraries
=============================
*/

/* Adjust size of giVe image. */
.vu-footer__map .give-now img {
	min-width: 100px;
	width: 100%;
}

/* Extra space for Friend of the Libraries button. */
.vu-footer__map .friend {
	padding: 15px 0;
}

/* Allow the Friend of the Libraries button to word-wrap. */
.vu-footer__map .friend a.btn {
	white-space: initial;
}

/*
=============================
    Depository Logo
=============================
*/

/* Adjust size of the depository logo */
.depository-logo {
	width: 30px;
}