/*
Theme Name: Hanover Theme
Theme URI: http://artform.ca/
Author: Artform
Author URI: http://artform.ca/
Description: Custom built theme for Hanover Public Library
Version: v2.0
License: Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License
Tags: hanover public library, artform, 960, white, orange, blue, green
*/

body, html {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12pt;
	margin: 0;
	background: url("images/books.jpg") no-repeat center;
	background-size: cover;
	background-position: left;
	background-repeat: no-repeat;
	background-attachment: fixed;
	--site-accent: #8CC63F;
	--site-links: #070;
	--teen-zone: #ecf;
	--services: #aaf;
	--online-resources: #fa6;
	--kids-zone: #fe3;
	--home: #cfc;
	--menu-bg: #dfa;
	--menu-border: #070;
	--menu-text-shadow: #fff;
	--menu-text: #333;
} a, a:link {
	text-decoration:none;
	color:var(--site-links);
} a:hover {
	color:#009;
} img {
	max-width: 100%;
	height: auto;
}

/* E-Resources */
.col5 {
	display:inline-block;
}

/*a.button { display:block; width:220px; font-size:20px; border:2px solid #777; border-radius:30px; margin:20px 0; padding:10px; color:black; }
a.button:hover { background:#ccc; color:green; border:2px solid green; }*/

#content h1, h2, h3 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight:normal;
} h1, h2, h3 {
	color:#349;
	line-height:150%;
} h1 {
	font-size:218%;
} h2 {
	font-size:164%;
} h3 {
	font-size:127%;
}

#content ul {
	list-style:disc inside none;
} #capimage {
	float:left;
	padding:13px 13px 13px 0;
} #capid {
	font-size:20pt;
}

.holder {
	background-color:#fff;
	box-shadow:0 0 20px #131;
	margin: 0 auto;
	padding: 0 0 20px 0;
} .rounded {
	border:1px solid #777;
	border-radius:5px;
	-moz-border-radius:5px;
	-o-border-radius:5px;
	-webkit-border-radius:5px;
	padding:2px 4px;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* IE10+ */
	background: linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
}

header #sitesearch * {
	transition: all ease 0.25s;
} header #sitesearch {
	font-size: 120%;
	text-align: right;
	display: block;
	z-index: 100;
	position: relative;
} header #sitesearch .submit {
	width: 2em;
	line-height: 1.2em;
	background: none;
	border: 0;
	position: absolute;
	right: 0;
	top: 0;
	margin: 0;
	z-index: 10;
} header #sitesearch .field {
	background: rgba(255,255,255,0.8);
	padding: 3px 2em;
	width: 15%;
	border: 0;
	box-sizing: border-box;
	text-align: right;
} header #sitesearch .field:focus {
	background: #fff;
	width: 100%;
} header #sitesearch .submit {
	margin-bottom: 5px;
} header #sitesearch .submit i {
	font-size: 100%;
} header #sitesearch .submit:hover {
	color: #fff;
	background: #793;
}

#accessible {
	text-align: right;
} #accessible div, #accessible ul {
	display: inline-block;
	list-style: none;
	padding: 0;
	margin: 0;
	vertical-align: middle;
	line-height: 20px;
} #accessible .widget_execphp {
	margin-right: 100px;
} #accessible .helper {
	border-bottom: #777 1px dotted;
	cursor: help;
}

img.alignright {
	float:right;
	margin: 0 0 0.5em 1em;
} img.alignleft {
	float:left;
	margin: 0 1em 0.5em 0;
}
/* Captions */
p img,
.wp-caption {
	margin-top: 0.4em;
}
.wp-caption {
	background: #eee;
	margin-bottom: 1.625em;
	max-width: 96%;
	padding: 6px 2px;
}
.wp-caption img {
	display: block;
	margin: 0 auto;
	max-width: 98%;
}
.wp-caption .wp-caption-text,
.gallery-caption {
	color: #666;
	font-family: Georgia, serif;
	font-size: 12px;
}
.wp-caption .wp-caption-text {
	padding: 10px 0;
	position: relative;
	text-align:center;
}

#koha {
	padding:10px;
	text-align: center;
	background: #1e5799; /* Old browsers */
	background: -moz-linear-gradient(top,  #1e5799 0%, #8bb4e9 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#8bb4e9)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #1e5799 0%,#8bb4e9 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #1e5799 0%,#8bb4e9 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #1e5799 0%,#8bb4e9 100%); /* IE10+ */
	background: linear-gradient(top,  #1e5799 0%,#8bb4e9 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#8bb4e9',GradientType=0 ); /* IE6-9 */
} #koda h3, #koha p {
	color:#fff;
} #koha p {
	line-height:135%;
	font-size:11pt;
	margin:10px 0;
} #koha a, #koha a:hover, #koha a:link  {
	color:#fff !important;
} #koha a:visited {
	color:#eee;
} #koha h2 {
	margin: 0.5em;
}

#left, .alpha {
	padding-left: 0;
} #right, .omega {
	padding-right: 0;
} #left ul, #right ul, footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* MAIN MENU STYLES */
#main-menu {
	position:absolute;
	bottom:-3px;
	right:0;
	line-height: 100%;
} #main-menu ul {
	display:inline-block;
	margin: 0;
	padding: 0;
} #main-menu li {
	float:left;
	display:block;
} #main-menu li a {
	display:block;
	padding:0 12px;
	line-height:27px;
	text-align:center;
	font-size:120%;
} #main-menu a {
	color: var(--menu-text);
} .kids-zone, .kids-zone * {
	font-family:"Comic Sans MS", cursive;
} #main-menu li {
	position:relative;
} #main-menu ul ul {
	display:none;
	position:absolute;
	top:30px;
	right:0;
	width:200px;
	z-index:999;
	box-shadow:1px 1px 3px #777;
	margin-top:-3px;
	padding: 0;
} #main-menu ul ul ul {
	right: 100%;
	top: 0;
} #main-menu ul ul a {
	background: #f9f9f9;
	border-bottom: 1px solid #aaa;
	font-size: 95%;
	font-weight: normal;
	height: auto;
	line-height: 1.4em;
	padding: 5px 2px;
	width: 196px;
} #main-menu ul li:hover > ul {
	display: block;
}

/* LEFT MENU */
#left #menu-left-menu, #menu-left-menu ul {
	background-color:var(--menu-bg);
	border-top:1px solid var(--menu-border);
} #left #menu-left-menu * {
	transition: all 0.25s ease;
} #menu-left-menu {
	border-bottom: var(--menu-border) 8px solid;
	border-bottom-right-radius:8px;
} #left .menu-left-menu-container li {
	border-bottom:1px solid var(--menu-border);
	position:relative;
} #left .menu-left-menu-container li a {
	min-width:200px;
	display:block;
	color:var(--menu-text);
	padding:10px;
	text-shadow:1px 1px 2px var(--menu-text-shadow);
} #left .menu-left-menu-container li a:hover {
	color:#000;
	border-left:var(--menu-border) 8px solid;
	padding:10px 2px 10px 10px;
}

/* LEFT MENU DROPSIDES */
#left .menu-left-menu-container ul ul {
	display:none;
	position:absolute;
	float:left;
	z-index:999;
	box-shadow:1px 1px 3px #777;
	left: 100%;
	top:-1px;
	background: var(--menu-bg);
} #left .menu-left-menu-container ul ul a {
	color: var(--menu-text);
	font-weight: normal;
	height: auto;
} #left .menu-left-menu-container ul li:hover > ul {
	display: block;
}


/* CUSTOM NAVIGATION COLOURS (TOP MENU) */
#main-menu a:hover {
	background: white;
} #main-menu .teen-zone a, .teen-zone a:hover,
  #left .teen-zone ul a:hover {
	background-color:var(--teen-zone);
} #main-menu .services a, .services a:hover,
  #left .services ul a:hover {
	background-color:var(--services);
} #main-menu .home a,
  #left .home ul a:hover {
	background-color: var(--home);
} #main-menu .kids-zone a, .kids-zone a:hover,
  #left .kids-zone ul a:hover {
	background-color: var(--kids-zone);
} #main-menu .online-resources a, .online-resources a:hover, .pagenamed_e-resources a:hover,
  #left .pagenamed_e-resources ul a:hover {
	background-color: var(--online-resources);
}

#admin {
	padding:10px;
} #admin h4 {
	color:#333;
} .edit-link a {
	color:#555;
	font-size:80%;
}

#breadcrumbs {
	font-size:80%;
	margin:0.5em 0;
	color:#555;
}

h1, #main h1 a, #main h1, #primary h1 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight:normal;
	line-height:130%;
	color:#349;
} p {
	margin-bottom:0.8em;
	line-height:130%;
	color:#222;
} #main a:visited, #primary a:visited {
	color:#570;
} #main a:hover, primary a:hover {
	text-decoration:underline;
}


#left h3.widget-title {
	font-weight:normal;
	margin: 0.75em 0 0.25em 0.25em;
} .widget_recent_entries li a {
	font-size: 10pt;
	line-height: 14pt;
	padding: 0.25em 0 0.25em 1em;
	border-top: 1px solid #eee;
	display: block;
}

#fullfooter .grid-container {
	max-width: 100%;
	margin: 0 1em;
} #fullfooter {
	border-top:1px solid #648dc9;
	padding:10px 0 0 0;
	background: #adbbe0; /* Old browsers */
	background: -moz-linear-gradient(top,  #adbbe0 0%, #c7d4ef 47%, #ffffff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#adbbe0), color-stop(47%,#c7d4ef), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #adbbe0 0%,#c7d4ef 47%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #adbbe0 0%,#c7d4ef 47%,#ffffff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #adbbe0 0%,#c7d4ef 47%,#ffffff 100%); /* IE10+ */
	background: linear-gradient(top,  #adbbe0 0%,#c7d4ef 47%,#ffffff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#adbbe0', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
} #fullfooter p, #fullfooter td, #social {
	font-size:90%;
	line-height:110%;
	color:#333;
} #fullfooter h3 {
	font-size:100%;
	line-height:120%;
	color:#222;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
} #fullfooter a, #fullfooter a:link {
	color:#050;
	font-weight:bold;
} #fullfooter a:hover {
	text-decoration:underline;
} #fullfooter #credit {
	text-align:right;
} .credits a, .credits a:link {
	color:#555 !important;
} .credits {
	margin-top: 2em;
	color:#555;
	font-size:85%;
	background: rgba(0,0,50,0.3);
}

.entry-meta {
	font-size:80%;
	clear:both;
	color:#777;
} .entry-meta a, .entry-meda time, .entry-date {
	color:#444;
}

article footer {
	margin-bottom:1em;
}
footer.entry-meta {
	margin-top:1em;
	border-top:1px solid #ccc;
	padding-top:0.5em;
	font-size: 0.75em;
} .entry-content {
	margin-top:1em;
} #comments {
	clear:both;
} #commentform .form-allowed-tags {
	display:none;
} #commentform .comment-form-comment label {
	display:block;
	width:100%;
	font-size:90%;
	color:#555;
	font-weight:bold;
}

.ai1ec-agenda-widget-view { width: 100%; }

#social {
	text-align: right;
} #social li {
	display: inline-block;
	vertical-align: top;
} #social li a, #social li a:link {
	display:block;
	text-align:center;
	padding:0 10px;
	color:#050;
	font-weight:normal;
	font-size:80%;
} #social img {
	margin-left:4px;
} #social .facebook a:link {
	color:#247;
} #social #rss a {
	color:#d41;
} #social #sitemap a {
	color:#162;
} #social a:hover {
	color:#222 !important;
}

/* Responsive Menus (MOBILE ONLY) */
.close-menu, .open-menu, #main-menu { display:none; }

@media (max-width: 768px) {

	body {
		font-size: 14pt;
	} .alpha, .beta {
		padding: 0;
	}

	#mainheader, #topheader {
		height: 120px;
		background: none;
		padding-bottom: 30px;
	} #accessible, #admin,
	#left .menu-left-menu-container, #left .widget_text {
		display:none;
	} #logo img {
		border-radius: 10px;
		border: #fff solid 5px;
		margin: 5px;
		max-width: 200px;
	} #logo h1 {
		margin: 0;
		text-align: center;
	}

	#koha input.rounded {
		width:80%;
		text-align: center;
	} #koha h2 {
		display: none;
	}

	header #sitesearch .field {
		min-width: 25%;
	}

	/* MENU */
	.open-menu, .close-menu {
		color: #fff;
		position: fixed;
		top: 50px;
		right: 5px;
		font-size: 1.5em;
		border-radius: 5px;
		background: rgba(0,0,0,0.6);
		color:#ccc;
		height: 50px;
		padding: 0 10px;
		line-height: 50px;
		text-align: center;
		cursor: pointer;
		box-shadow: 2px 2px 6px #333;
		z-index: 1000;
		display: block;
	} .close-menu:hover, .open-menu:hover {
		background: #fff;
		color: #000;
	}

	#main-menu {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		padding: 30px 0 0 0;
		margin: 0;
		width: 100%;
		background: var(--menu-bg);
		z-index: 1000;
		height: 100vh;
		overflow: scroll;
		line-height: 130%;
	} #main-menu * {
		margin: 0;
		border: none;
	} #main-menu ul {
		float:none;
		padding: 0;
		margin: 0;
		border-top: 1px solid var(--menu-border);
	} #main-menu li, #main-menu li li {
		width: 100%;
		border-bottom: 1px solid var(--menu-border);
	} #main-menu li a, #main-menu li li a, #main-menu ul ul a {
		font-size: 150%;
		line-height: 2em;
		background: var(--menu-bg);
		border: none;
		width: 100%;
	} #main-menu li .sub-menu {
		display: block;
		width: 100%;
		font-size: 80%;
		float: none;
		position: static;
		color: var(--menu-text);
	}

	#social {
		text-align: center;
		padding-top: 30px;
	}
	#right {
		padding-right: 10px !important;
	}
 }

/* RSS FEED */
.feed_item {
	display: inline-block;
	width: 30%;
	padding: 0 1.5%;
	vertical-align: top;
}
.feed_item * {
	font-family: 'Open Sans', sans-serif;
}
.feed_item_description img {
	float: left;
	margin-right: 0.5em;
	margin-bottom: 0.5em;
}
.jspContainer {
	background: #eee;
}
.feed_item_description a {
	font-size: 80%;
	text-decoration: none;
	color: green;
	background: #fff none repeat scroll 0% 0%;
	border-radius: 3px;
	padding: 2px 4px;
	border: 1px solid green;
	display: inline-block;
} .feed_item_description a:hover {
	background: green;
	color: #fff;
}

/* TOP AREA */
.topbar .button {
	border-radius: 3px;
	border: #333 solid 1px;
	padding: 5px 5px 2px 8px;
	margin: 5px 0 0 20px;
	font-size: 80%;
}
.topbar .button, .topbar .button * {
	color: #333;
	text-decoration: none;
	transition: ease .25s all;
}
.button:hover, .button:hover * {
	color: #fff;
	background: #000;
}
.button-resizer {
	list-style: none;
	display: inline;
	font-weight: bold;
	z
}
.button-resizer li {
	display: inline;
}
.topbar .button-print {
	text-decoration: none;
	font-size: 80%;
}
.half {
	display: inline-block;
	width: 47%;
	padding: 0 1%;
}
.scrollToTop {
	height: 40px;
	width: 40px;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.2);
	display: inline-block;
	text-align: center;
	margin: -4px 1em;
	font-size: 18px;
	line-height: 40px;
	position: fixed;
	bottom: 20px;
	right: 0;
	color: var(--site-accent);
	background: #eee;
	z-index: 9999;
	box-shadow: 0 2px 6px #888;
	transition: all ease 0.25s;
}
.scrollToTop:hover {
	background: var(--site-accent);
	color: #fff;
	box-shadow: 0 1px 1px #aaa;
}

/* Nav Menu */
.site-search {
	z-index: 1000;
	margin: 20px;
	height: 30px;
	border: 1px solid #ccc;
	border-radius: 3px;
	overflow: hidden;
}
.site-search input, .site-search button {
	border: none;
	line-height: 20px;
}
.site-search button {
	float: right;
}
.site-search input {
	width: 100%;
	width: calc(100% - 30px);
}

/* LAYOUT */
.content-area {
	float: right;
	margin: 0 0 0 -34%;
	width: 100%;
}
.site-main {
	margin: 0 0 0 34%;
}
.site-content .widget-area {
	float: left;
	overflow: hidden;
	width: 30%;
}
.site-footer {
	clear: both;
	width: 100%;
}
#content {
	max-width: 1600px;
	margin: 0 auto;
}

/* HEADER */
#masthead {
	background: center no-repeat;
	background-size: cover;
	position: relative;
}
.site-header {
	background: #eee;
	border-bottom: 3px solid var(--site-accent);
	padding-top: 25px;
}
.site-title {
	margin: 0;
	max-width: 50%;
	min-width: 300px;
	opacity: 0.9;
} .site-title img {
	margin: 0;
} .site-title a:hover {
	background: none;
}

.topbar {
	background: var(--site-accent);
	/*font-size: 60%;*/
	opacity: 0.8;
	color: #000;
	padding: 8px 0 0 0;
	/*position: fixed;*/
	width: 100%;
	min-height: 25px;
	margin-top: -25px;
	z-index: 10;
}
.text-right {
	text-align: right;
}

.helper {
	border-bottom: 1px dotted #000;
	cursor: help;
}

span.nav-next {
	float: right;
}