/* CONTENTS: 
*/
/* ========================================== 
@import CSS
============================================= 
-Responsive Tabs / Header Search
*/
/* ========================================== 
TYPOGRAPHY
============================================= 
@import, font-face
*/
/*=========================================
=========	DPL PAGE STYLE   ==============
==========================================
-html
-body
-<p>
-<a>
-<ol>
-<ul>
-<li>
-<h1-5>
-Floats & Alignments
-Display & Visibility
-Clear Fix
*/
/* ========================================== 
	PAGE HEADERS
============================================= 
-City Header
-Library Header
	-logo
	-extras
	-header search
-Main Navigation Bar
*/
/* ========================================== 
	PAGE MIDDLE
=============================================
-#library_middle_row
-Middle, Right Side (contentArea)
-Middle, Left Side  (Quick Links)
*/		
/* ========================================== 
	PAGE FOOTER
=============================================
-#library_footer_row
*/
/* ========================================== 
	OTHER
=============================================
-.full_height
-.box_shadow
-.styled-v-bar
-.styled-v-bar ins
-.green
.white
*/
/* ========================================== 
	NOTES
=============================================
*/

/* This line is needed because Percussion was making some regions
too big, and others too small.  I made changes to the templates and
Percussion added an extra temp region inside the middle row col 10 region.
For pages with javascript (i.e. owl carousels and the event calendar) funky
things were happening.  The temp region for the owl carousel page was extending
way off the right side of the page, making everything inside much too big.  
The temp region for the events page was half the size it should be.  This change
was suggested by Percussion https://support.percussion.com/hc/requests/17177
*/
#extra_middle {float:none;}


/* ========================================== 
	@IMPORT CSS
============================================= */
@import url(/web_resources/themes/dept-library/css/dpl_responsive_tabs.css) all;
@import url(/web_resources/themes/dept-library/css/dpl_responsive_tabs_style.css) all;
/*@import url(/web_resources/themes/dept-library/css/dpl_mobile.css) all;*/

/* ========================================== 
	TYPOGRAPHY
============================================= */
@import url(/web_resources/themes/dept-library/type/dpl_font_awesome.css) all;
@import url(/web_resources/themes/dept-library/css/dpl_font-awesome-social.css) all;

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(https://themes.googleusercontent.com/static/fonts/lato/v6/nj47mAZe0mYUIySgfn0wpQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://themes.googleusercontent.com/static/fonts/lato/v6/v0SdcGFAl2aezM9Vq_aFTQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(https://themes.googleusercontent.com/static/fonts/lato/v6/DvlFBScY1r-FMtZSYIYoYw.ttf) format('truetype');
}
@font-face {
    font-family: 'GnuolaneRgRegular';
    src: url('/web_resources/themes/main/gnuolane_rg-webfont.eot');
    src: url('/web_resources/themes/main/gnuolane_rg-webfont.eot?#iefix') format('embedded-opentype'),
         url('/web_resources/themes/main/gnuolane_rg-webfont.woff') format('woff'),
         url('/web_resources/themes/main/gnuolane_rg-webfont.ttf') format('truetype'),
         url('/web_resources/themes/main/gnuolane_rg-webfont.svg#GnuolaneRgRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/*=========================================
=========	DPL PAGE STYLE   ==============
==========================================*/
		html {/*added this html */
	font-family:'GnuolaneRgRegular';
	font-size: 1.1vw; 
	color:#000000;	
	}

	body {
	color:#000000;
	text-align: -left;
	height:100%;
	font-family: "Lato", Arial, sans-serif;
/*	Original font-size:1em; */
	font-weight:400;
	background: url('/web_resources/themes/dept-library/img/bg_body.gif') repeat;
	}
 	p {
/* Original	margin: 0 0 1.8em 0;
		clear: both;
		display:block;
		letter-spacing: 0.0625em; */
		}
	
	a {
		color: #1a0dab;
		text-decoration: none;
		}
	a:hover {color:#163344;} 
    
	a img:hover {
		opacity: 0.7;
	}

	/*   <UL> <OL> <LI>  */
	/* Original	ul, ol {}
		ul li {
		list-style: square;
		padding: 0 0 9px 0;
		} */
	ul {}/* fix: go over this */
	ul li {
	/*font-size:1.00vw;*/
	list-style: square;
	padding: 0 0 9px 0;
	}
	ol {}
	ol li {
	/*font-size:1.00vw;*/
	list-style: square;
	padding: 0 0 9px 0;
	}

	/*    <H1-H5>  */ 
	/* Original	Headers h1 {
		font: 'GnuolaneRgRegular', sans-serif;
		color:#774a3a;
		background: none;
		margin:0;
		padding:0 0 .40em 0px;
		text-transform:uppercase;
		}
		h2, h3  {
		font:'GnuolaneRgRegular', sans-serif;
		color:#774a3a;
		background:none;
		margin:0;
		padding:0 0 .25em 0;
		text-transform:none;
		}
		h1 {font-size: 2em} 
		h2 {font-size:1.5em;}
		h3 {font-size:1em; }
		h4 {font-size:1em;} */
	h1, h2, h3, h4, h5 {
	color:#774a3a;
	margin:0;
	padding:0 0 .40vw 0;
	text-transform:uppercase;
	font-family:'GnuolaneRgRegular';	
	}
	h1 {font-size:2.00vw;}
	h2 {font-size:1.50vw;}
	/*h3 {font-size:1.00w;}*/
	/*h4 {font-size:1.00vw;}*/

h6 {
	color:#774a3a;
	margin:0;
	padding:0 0 .40vw 0;
	font-size:1.5vw;
	font-family:'GnuolaneRgRegular';
}

/*  Don't change the size of the menu text or it won't fit on the screen */

.main_nav_tabs ul {font-size: 1vw;}

	.strong {font-weight: 700;}
	em {font-style: italic;}

	/*   Floats & Alignments  */
	.left { float: left; }
	.right { float: right; }
	.alignright { float:right; }
	.alignleft {float:left;}

	.center { /* centers DIV in col span */
		margin: 0 auto;
		display: table;
		}

	.align_left { text-align: left; }
	.align-center { text-align: center; }
	.align_right { text-align: right; }

	/*  Display & Visibility  */
	.none,
	.hidden,
	.button.none,
	.button.hidden { display: none; }
	#skiptomain {display:none;}

	/*  Clear Fix  */
	.clear:before,
	.clear:after {
    content: " ";
    display: table;
	}
	.clear:after {
    clear: both;
	}
	.cl { clear: left; }
	.cr { clear: right; }
	.clear { clear: both; }






/*  PAGE HEADERS 
========================================== */
	/*  City Header - The City's Shared Asset  */	
				#city_header {
				margin:0px!important;
				padding:0px!important;
				background: transparent; /*#738b71;*/
				border-bottom:0px solid #000;
				}
			
				#city_header_inner {
				height:40px;
				padding:0px;
				margin:0px;
				background:transparent;
				vertical-align:middle!important;
				}
				#city_header img {
						padding:0px;
						margin:0px;
						border:0px;
						outline:none;
					}
				#nav {}
				#nav {height:40px!important;
				padding: 0px 0px 0px 0px!important;
				margin:0px;
				}
				#nav {
				/*font: 0px 'Lato', sans-serif;
			 	padding:5px 0px 5px 0px!important;
								margin:0px!important; */
				}
				#nav {
				display:block;
				background:transparent;
				}
				#nav ul {list-style-position:outside;}
				#nav ul > li {
				display:inline;
				list-style:none;
				float:left;
				position:relative;
				background:transparent!important;
				padding:0px;
				margin:0px;
				width:;
				height:40px;
				}
				#nav ul > li:hover {
				display:inline;
				list-style:none;
				float:left;
				position:relative;
				background:transparent!important;
				padding:0px;
				margin:0px;
				width:;
				height:40px;
				}
				#nav ul > li.about {width:203px;height:40px;} 
				#nav ul > li.about a {
				text-indent:-9000px;
				display:block;
				padding:0px;
				margin:0px;
				width:203px;
				height:40px;
				background: url('/web_resources/themes/dept-library/img/city_nav/city_about.png') no-repeat;
				}
				#nav ul > li.about a:hover {
				background-color: transparent;
				text-indent:-9000px;
				display:block;
				padding:0px;
				margin:0px;
				width:203px;
				height:40px;
				background: url('/web_resources/themes/dept-library/img/city_nav/city_about_hover.png') no-repeat;
				}
				#nav ul > li.nav_sep {display:none!important;}
				#nav ul > li.business {width:102px;height:40px;} 
				#nav ul > li.business a {
				text-indent:-9000px;
				display:block;
				padding:0px;
				margin:0px;
				width:102px;
				height:40px;
				background: url('/web_resources/themes/dept-library/img/city_nav/city_business.png') no-repeat;
				}
				#nav ul > li.business a:hover {
				background-color: transparent;
				text-indent:-9000px;
				display:block;
				padding:0px;
				margin:0px;
				width:102px;
				height:40px;
				background: url('/web_resources/themes/dept-library/img/city_nav/city_business_hover.png') no-repeat;
				}
				#nav ul > li ul li {display:none!important;}
				#nav ul > li.government {width:99px;height:40px;} 
				#nav ul > li.government a {
				text-indent:-9000px;
				display:block;
				padding:0px;
				margin:0px;
				width:99px;
				height:40px;
				background: url('/web_resources/themes/dept-library/img/city_nav/city_government.png') no-repeat;
				}
				#nav ul > li.government a:hover {
				background-color: transparent;
				text-indent:-9000px;
				display:block;
				padding:0px;
				margin:0px;
				width:99px;
				height:40px;
				background: url('/web_resources/themes/dept-library/img/city_nav/city_government_hover.png') no-repeat;
				}
				#nav ul > li.services {width:77px;height:40px;} 
				#nav ul > li.services a {
				text-indent:-9000px;
				display:block;
				padding:0px;
				margin:0px;
				width:77px;
				height:40px;
				background: url('/web_resources/themes/dept-library/img/city_nav/city_services.png') no-repeat;
				}
				#nav ul > li.services a:hover {
				background-color: transparent;
				text-indent:-9000px;
				display:block;
				padding:0px;
				margin:0px;
				width:77px;
				height:40px;
				background: url('/web_resources/themes/dept-library/img/city_nav/city_services_hover.png') no-repeat;
				}
				#nav ul > li.nav_search { display:none!important;}
				#nav ul > li.contact {width:98px;height:40px;} 
				#nav ul > li.contact a {
				text-indent:-9000px;
				display:block;
				padding:0px;
				margin:0px;
				width:98px;
				height:40px;
				background: transparent url('/web_resources/themes/dept-library/img/city_nav/contact_the_city.png.gif') no-repeat;
				}
				#nav ul > li.contact a:hover {
				background-color: transparent;
				text-indent:-9000px;
				display:block;
				padding:0px;
				margin:0px;
				width:98px;
				height:40px;
				background: transparent url('/web_resources/themes/dept-library/img/city_nav/contact_the_city_hover.png') no-repeat;
				}
				#nav ul > li:hover.nav_search {display:none!important;background:transparent;}
				#nav ul > li:hover.contact {background:red;}
				#nav ul > li.contact a span {display:none!important;}
				#nav ul > li.nav_sep {width:0px!important;}
				#nav ul > li.sep_contact {Width:0px !important;}
				#nav ul li ul {display:none!important;}
				#nav ul li:hover > ul {display:none!important;}
				div.primary_nav #nav ul li ul li {display:none!important;}
				#nav ul li ul li a {display:none!important;}
				#nav ul li ul li a:hover {color:#000;}
				#nav ul li ul li a:hover { 
				display:block;
				color:#fff;
				padding:5px 0px 5px 0px;
				font: 12px 'Lato', sans-serif;
				font-weight:700;
				}
				#nav ul li ul li a:hover span {display:inline;}
				div.primary_nav #nav ul li.contact ul {display:none!important;}
				div.primary_nav #nav ul li.contact ul li a {display:none!important;}
				div.primary_nav #nav ul li.contact ul li a:hover {display:none!important;}
				div.nav_social, li.nav_search fieldset, form#search label {display:none!important;}
				div.nav_social {display:none!important;}
				div.nav_social a {display:none!important;}
				/*  .nav_search  */
				.nav_search {display:none!important;}
				li.nav_search fieldset {display:none!important;}
				li.nav_search fieldset form {display:none!important;}
				li.nav_search fieldset form#search input.search_field {display:none!important;}
				li.nav_search fieldset form#search label {display:none!important;}
				li.nav_search fieldset form#search input.search-button[type="image"] {display:none!important;}

/* Library Header - Shared Asset */
	#library_header_row {
	background:#1d461a;
	overflow:auto;
	}
		/*  Logo  */
	#library_header_logo_col_2 {
	background:#1d461a;
	}
	#library_header_logo_col_2 .logo_large img {
	max-width: 200px;
	height:auto;
	padding:0px;
	margin:0px;	
	}
	/*  Extras  */
	#library_header_extras_col4 {}
	#library_header_extras_col4 {
	padding:0px; /*5%;*/
	margin: 0px;
	background:#1d461a;
	/*	font-family:'Lato';
	font-size: .50em;
	color:#fff; */
	}
	#library_header_extras_col4 ul {
	display:none;
	list-style-type: none;
  	padding:0px;
	margin:15px 0px 0px 0px;
	}
	#library_header_extras_col4 li {
	display: inline-block;
	vertical-align: top;
	color:#fff;
	padding: 0px 0px 0px 0px;
	margin:0px 10px 0px 0px;
	}
	#library_header_extras_col4 li a {
	padding: 0px 0px 0px 0px;
	margin:0px 0px 0px 0px; 
	text-decoration:none;
	color:#fff;
	}
	#library_header_extras_col4 li a:visited {
	text-decoration:none;
 	color:#fff;
	}
	#library_header_extras_col4 li a:hover {
	color:#2a99d8;
	}
	/* Header Search
	SEE: 	@import url(/web_resources/themes/dept-library/css/dpl_responsive_tabs.css) all;
			@import url(/web_resources/themes/dept-library/css/dpl_responsive_tabs_style.css) all; */

			
/* ========================================== 
	MAIN NAVIGATION TABS
============================================= */
#library_header_nav_row {background:#1d461a!important;}	
#library_header_nav_col12 {
	text-align:right;
	background:transparent;
}
.main_nav_tabs ul  {
	background:transparent;
	/*Font size set at the top - Don't change this font size or the menus don't fit */
	letter-spacing: 0.15em;			
	padding: 0px;
  	margin: 0px;
}
.main_nav_tabs ul li {
	background: #738b71;
	list-style:none!important;
	display:inline;
	padding: .5vw 0;
	margin:0px .5vw 0px 0px;
	border-width: 1px 1px 0px 1px;
  	border-color:#738b71;
  	border-style: solid;
}
.main_nav_tabs ul li:last-child {
	margin:0px;
}
.main_nav_tabs ul li:hover {
	background: #fff;
	color: #1d461a;
}
.main_nav_tabs ul li a {
	text-decoration: none;
	padding:.5%;
	outline:none;
	border:0px;
	color:#fff;
}  
.main_nav_tabs ul li a:hover {
	background: #fff;
	color: #1d461a;
}

/* ========================================== 
	PAGE MIDDLE
============================================= */
#library_middle_row {
	background:#fff;
	overflow:hidden;
/*overflow:auto;*/
	padding:30px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	height:100%;
}
	/* Middle, Right Side (Content Area) */
	#library_middle_right_col10 {
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	background:#fff;
	}
	#library_middle_right_col12 {
	background:#fff;
	}
	.sm {
	opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   	-webkit-transition: opacity .25s ease-in-out;
	}
	.sm:hover {
	opacity: 0.7;
	}  
	/*  Middle, Left Side  (Quick Links) */
	#library_middle_left_col2 {
	background:#fff;
	}
	.quick_links {
	padding:0px 0px 0px 0px;
	margin:0px auto;
	background:#fff;
	}
	.quick_links ul {

	padding:0px 17%;
	margin:0px;
	}
	.quick_links ul li {

	display:block;
	padding:0px 0px 0px 0px;
	margin:0px 0px 10px 0px;
	/*text-indent:-9999px;*/
	}
	#library_catalog {}
	#library_catalog:hover {/*  fix: does bkg img need to be here?  */
	/*background-image: url(/web_resources/themes/dept-library/img/quick_links/ql_library_catalog_hover.jpg);
	background-position: 100% 0; /* Use ONLY percents here */
	/*cursor:hand;*/
	}
	#my_account {}
	#overdrive {}
	#time {}
	#novelist {}
	#novelist_kids {}
	#mags_news {}

    #events {
		font-size: 1vw;
	}

/* ========================================== 
	PAGE FOOTER
============================================= */
/* Footer */			
#library_footer_row {
	background:#738b71;
	/* was overflow:auto;  - does this remove the scroll bar? */
	overflow:hidden;
}
/*#library_footer_row ul {
	font-size: .7em;
	letter-spacing: 0.0625em;
   padding:0px;
   margin:15px 0px 15px 0px;
   color:#fff;
}*/
#library_footer_row ul {
   padding:0px;
   margin:2vw 0px 2vw 0px;
   color:#fff;
}
#library_footer_row li {
	list-style:none;
	padding:0px;
	margin:0px;	
}
#library_footer_row li a, #footer li a:visited {
	background:transparent;
	color:#fff;
	text-decoration:none;
}
#library_footer_row li a:hover {
	color:#c0d1bf;
	background:transparent;
}


/* ========================================== 
	OTHER
============================================= */
	/*  --  DIV Fill Height */
	.full_height {height:100vh;} /* to make the #main 100% height */	
	/*  --  Box Shadow */
	.box_shadow {
	-webkit-box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3); /* Safari and Chrome */
		-moz-box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3); /* Firefox */
			-ms-box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3); /* Internet Explorer */
				-o-box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3); /* Opera */
		box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3); /* CSS3 */
			moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .3);
				box-shadow:0px 0px 3px 0px rgba(0, 0, 0, .3); */ 
	}
	/*    DPL FaceScroll Bar   */
	.styled-v-bar	{ /* sample CSS class for a different vertical scrollbar look */
	background:	url(/web_resources/themes/dept-library/img/custom-scroll-bar.png) center top no-repeat;
	width: 10px;
	margin-right: 0;
	margin-bottom: 4px;
	}
	.styled-v-bar ins	{ /* Style for the "ins" inner element, or bottom of the scrollbar */ 
	display: block;
	background:	url(/web_resources/themes/dept-library/img/custom-scroll-bar.png) center bottom no-repeat;
	width: 10px;
	height: 4px;
	position: absolute;
	top: 100%;
	}
	.green  {background:#1d461a;}
	.white {background:#fff;}

td { 
	display: table-cell;
	padding:5px 1px; 
}

td img {
	max-width: 100%!important;
	height: auto!important;
}
/* RESPONSIVE TABLE CSS*/
/*table {
	margin: .1vw 0 .5vw; 
	width:100%;
}
*/
/*  This is what styles.css has

td { 
	display: block;
	padding:5px 1px; 
}

td strong {color:#183616;}

tr:first-child {
	border-top: 1px solid #f0f0f0;
}

tr { border-bottom: 1px solid #f0f0f0; }

td { 
	border: none;
	/*position: relative;*/
	/*
}
*/

/* ==========================================
               Forms
*/

.field-row {
	clear: both;
	display: block;
}
.field-label-container {
	width: 20%;
	float: left;
}

.field-input-container {
	width: 80%;
	float: right;
}

.field-input-container input[type=text] {
	width: 100%;
}

.field-input-container input[type=radio] {
	float: left;
}

.field-input-container input[type=checkbox] {
	float: left;
}

.field-input-container textarea {
	width: 100%;
}
	

/* ==========================================
    Videos
=============================================*/
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* ==========================================
    Mobile
=============================================*/

#mobile_header {
	  display: block
	  background:#1d461a;
	  color:inherit;
	  padding:0px;
	  margin:0px;
	  width:100%;
  }
  
#mobile_header img {
	width:100%;
	height:auto;
}
/*  SEARCH  */
#mobile-search #input, #mobile-search #submit,
#mobile-search .col10, #mobile-search .col2  {
   padding: 0;
   margin: 0vw 0 0 0;    /*  Orange   */
	background:transparent;
}
/*#mobile-search #input {
margin:.5em .5em;
  font-size: .8em;
  background: transparent!important;
  color:#333;
  width: 85%;
}*/

#mobile-search #input {
  margin:1vw 1vw;
  font-size: 3vw;
  background: transparent!important;
  color:#333;
  width: 85%;
}

#mobile-search #submit {
	margin: 0 auto;
	background: transparent url(../../../../../../../../../Assets/government/city-operations/library/image/header/MagnifyGlass.gif) no-repeat;
	background-position: right;
	background-size:contain;
}
#mobile-search .ui-submit {
	height:3vw;
  	background: transparent!important;
	border:1px solid #333;
	border-left: 0px;
  	-webkit-border-radius: 0em 1em 1em 0em;
 	border-radius: 0em 1em 1em 0em;	
}
#mobile-search .ui-shadow {
  -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);
}
#mobile-search .ui-shadow-inset {
	height:3vw;
  border-right: 1px!important;
  -webkit-border-radius: 1em 0em 0em 1em;
  border-radius: 1em 0em 0em 1em;
  background: transparent;
  border: 1px solid #333;
}
#mobile-search .ui-shadow-inset {
  -moz-box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.2);
}

.mobile_menu_class {
	float: none !important;
}

.mobile_menu_class ul  {
	color: #333;
	font-family: "Lato"Arial,sans-serif;
	font-size: 3vw;
	font-weight: 400;
	list-style: outside none none;
	margin: -15 px;
	margin-top: -16 px;
	padding: 0;
	text-shadow 0 1px 0 #fff;
	background: white;
}
.mobile_menu_class li {
	display: block;
	padding: 0.7em 40px 0.7em 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color #2f3e46;
	text-decoration: none !important;
	text-align: left;
	list-style: outside none none;
	font-size: 16px;
	cursor: pointer;
	font-family: "Lato", Arial,sans-serif;
	font-weight: bold;
	text-shadow: 0 0 0 #fff;
}
.mobile_menu_class ul li:last-child {
	margin:0px;
}

.mobile_quick_class {
	float: none !important;
} 

.mobile_quick_class ul  {
	color: #333;
	font-family: "Lato"Arial,sans-serif;
	font-size: 3vw;
	font-weight: 400;
	list-style: outside none none;
	margin: -15 px;
	margin-top: -16 px;
	padding: 0;
	text-shadow 0 1px 0 #fff;
	background: white;
}
.mobile_quick_class ul li {
	display: block;
	padding: 0.7em 40px 0.7em 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color #2f3e46;
	text-decoration: none !important;
	text-align: right;
	list-style: outside none none;
	font-size: 16px;
	cursor: pointer;
	font-family: "Lato", Arial,sans-serif;
	font-weight: bold;
	text-shadow: 0 0 0 #fff;
}
.mobile_quick_class ul li img {
	display: none;
}
.mobile_quick_class ul li:last-child {
	margin:0px;
}
.mobile_quick_class ul li a:hover {
	background: #fff;
	color: #1d461a;
}
.nodisplay ul {

    display: none;
}

/* ========================================== 
	NOTES
=========================================== */

@media screen and (max-width: 800px) {
	
   html {font-size: 2.0vw;}
  
  h1,h2,h3,h4,h5 {
	  padding: 0 0 1.2vw 0;
  }
  
  h1 {font-size: 4.0vw;}
  h2 {font-size: 3vw;}

  #events {
	  font-size: 2.0vw;
  }
  
  /*  menu text  */

.main_nav_tabs ul {font-size: 1.17vw;}
}

@media screen and (max-width: 584px) {

  #city_header_row {
    display: none;
  }
  #library_header_logo_col_2, #library_header_extras_col4,
  #library_header_search_col6_last, #library_header_nav_row,
  #library_middle_left_col2, #library_footer_col3_4,
  #library_footer_col3_1, #library_footer_col_3_2,
  #library_footer_col3_3 {
	  display: none;
  }

   html {font-size: 3.0vw;}
  
  h1,h2,h3,h4,h5 {
	  padding: 0 0 1.2vw 0;
  }
  
  h1 {font-size: 6.0vw;}
  h2 {font-size: 4.5vw;}

  #events {
	  font-size: 3.0vw;
  }
   
  #library_middle_right_col10, #extra_region {
	  width: 100%
  }
#main_nav_tabs ul  {
	background:transparent;
	font-size: 1em;
	letter-spacing: 0.15em;			
	padding: 0px;
  	margin: 0px;
}
#main_nav_tabs ul li {
	background: #333;
	list-style:none!important;
	display:inline;
	padding: 5px;
	margin:0px 5px 0px 0px;
	border-width: 1px 1px 0px 1px;
  	border-color:#333;
  	border-style: solid;
}
#main_nav_tabs ul li:last-child {
	margin:0px;
}
#main_nav_tabs ul li:hover {
	background: #fff;
	color: #1d461a;
}
#main_nav_tabs ul li a {
	text-decoration: none;
	padding:5px;
	outline:none;
	border:0px;
	color:#333;
}  
#main_nav_tabs ul li a:hover {
	background: #fff;
	color: #1d461a;
}

/*    CAUTION
      Be sure to change dpl_page_layout to match the screen size to change to mobile size
*/

}
@media screen and (min-width: 585px) {
 #mobile_header, #mobile_search_wrap,
 #mobile_search, #mobile_nav_buttons,
 #mobile_menus, #footer_hours_phone,
 #mobile_footer_right, #mobile_footer_left {
    display: none;
  }
 
}
	
