/*
Public Stylesheet for Johnson County Public Library by SpinWeb [Patrick Johnson].

/* --------------- Global Styles --------------- */

body#public {
    background: #CDDCED url(/graphics/new_images/background.gif) repeat-x;
    }
body#children {
    background: #F7CF29 url(/graphics/new_images/background-children.gif) repeat-x;
    }
body#teen {
    background: #CDDCED url(/graphics/new_images/background-teen.gif) repeat-x;
    }
body, body#public, body#children, body#teen, .paragraph {
    font-size: .8em;
    line-height: 1.5;
    font-family: "Lucida Grande", "Lucida Sans", Verdana, Tahoma, "Trebuchet MS", Sans-Serif;
    color: #555;
    margin: 0;
    padding: 0;
    }
a:link, a:visited {color: #366b9d;text-decoration: none;}
a:hover, a:active {color: #009be3;text-decoration: underline;}
a img {border: 0;margin: 0;padding: 0;}
.errorMessage {font-weight: bold; color:#f00;}
.left {float: left;  margin: 0 10px 10px 0; border: 3px solid #ecdfce;}
.right {float: right; margin: 0 0 10px 10px; border: 3px solid #ecdfce;}
.center {text-align: center; border: 3px solid #ecdfce;}
h1 {font-size: 26px;}
h2, .heading, .eventHeadline {font-size: 16px; font-weight: bold;}
h3, sub-heading {font-size: 12px; font-weight: bold;}
.pdf {
 background: url(/graphics/new_images/pdf.gif) no-repeat;
 line-height: 40px;
 display: block;
 padding: 0 0 0 50px;
}

hr {
    color: #e7e7e7;
    background-color: #e7e7e7;
    height: 1px;
    margin: 15px 0;
   }
.clear {clear: both;}

* html img,
* html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "/graphics/new_images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
vertical-align:top;
}
.newsList, .eventsList, .blogList { margin: 0; padding: 0; list-style: none; }


/* --------------- Layout --------------- */

#wrapper {
	width: 960px;
	margin: 0 auto;
	}
.header {
	width: 960px;
	height: 247px;
	margin: 18px 0;
	float: left;
	z-index: 2;
        position: relative;
	}
.nav {
	background: url(/graphics/new_images/nav.png) no-repeat;
	width: 960px;
	height: 47px;
	float: left;
	overflow: hidden;
	z-index: 4;
        position: relative;
	}
.main {
	width: 720px;
	height: 200px;
	float: left;
	}
.main img {
        position: absolute;
	z-index: 3;
	}
.logo {
	position: absolute;
        z-index: 9999;
        margin: 12px 33px;
	}
.social-box {
        float: left;
        width: 220px;
        height: 160px;
        background: #efefef;
        margin: 0 10px 10px 0;
        display: block;
        text-align: center;
        padding: 60px 0 0 0;
        font-size: 12px;
        line-height: 50px;
        }
.social-box:hover {
        background: #89A8CC;
        text-decoration: none;
        color: #fff;
        }

.utility {background: url(/graphics/new_images/default-utility.png) no-repeat;}
.utilityChildren {background: url(/graphics/new_images/default-utility.png) no-repeat;}
.utilityTeen {background: url(/graphics/new_images/teen-utility.jpg) no-repeat;}

.utility, .utilityChildren, .utilityTeen {
	width: 240px;
	height: 200px;
	float: left;
        line-height: 1.5;
	}
.font-size {
	position: absolute;
	background: url(/graphics/new_images/font-size.png) no-repeat;
	width: 43px;
	height: 92px;
	margin-left: 240px;
	margin-top: -20px;
	line-height: 20px;
        z-index: 9999;
	}
.font-size a {
	display: block;
	float: left;
	width: 43px;
	height: 21px;
	text-align: center;
	padding: 5px 0;
	}
.font-size a:hover {
	text-decoration: none;
	}
.small {
	font-size: 12px;
	}
.medium {
	font-size: 16px;
	}
.large {
	font-size: 20px;
	}
.search {
	background: url(/graphics/new_images/search.png) no-repeat;
	width: 194px;
	height: auto;
	margin: 15px 0 0 20px;
        overflow: hidden;
	}
.search p {
        margin: 0;
        padding: 0;
        line-height: 0;
        height: 23px;
        }
.search form {
	margin: 0;
	padding: 0;
        position:static;
        overflow: hidden;
        height: 0;
	}
.search input {
	background: none;
	border: none;
	margin: 4px 8px;
	color: #555;
	}
.search .submit {
	background: url(/graphics/new_images/search-submit.gif) no-repeat;
	border:0 ;
	cursor:pointer;
	width:12px;
	height:13px;
	position: absolute;
	margin: 5px 0 0 172px;
	text-indent: -4000px;	
	}
.contentWrap {
	margin: 18px 0;
	float: left;
	width: 960px;
	}
.content {
	background: url(/graphics/new_images/content-wrap.gif) repeat-y;
	float: left;
	width: 960px;
	padding: 0 0 20px 0;
	position: relative;
	margin: 0;
	}
.rounded {
	display: block;
	margin: 0;
	padding: 0;
	float: left;
	}
.homepage {
	width: 660px;
	padding: 0 20px 0 30px;
	float: left;
	display: inline;
	}
.homepage h1 {
	background: url(/graphics/new_images/red-heading.png) no-repeat;
	color: #fff;
	font-size: 15px;
	width: 665px;
	height: 31px;
	line-height: 30px;
	margin-left: -33px;
	padding: 0 0 0 33px;
	}
.homepage h2 {
	background: url(/graphics/new_images/blue-heading.png) no-repeat;
	color: #fff;
	font-size: 15px;
	width: 665px;
	height: 31px;
	line-height: 30px;
	margin-left: -33px;
	padding: 0 0 0 33px;
	}
.homepage .news, .homepage .highlight {
	background: #272F47 url(/graphics/new_images/purple-module.gif) repeat-x;
	width: 282px;
        min-height: 280px;
        height: auto !important;
        height: 280px;
	float: left;
	padding: 20px;
	color: #fff;
	}
.homepage .news h2, .homepage .highlight h2 {
	background: none;
	width: auto;
	height: auto;
	margin: 0 0 10px 0;
	padding: 0;
	}
.homepage .news h3, .rightCol .news h3, .rightCol .events h3 {
	margin: 0 0 5px 0;
	padding: 0;
	font-size: 12px;
	}
.homepage .news li {
	border-bottom: 1px solid #596072;
	margin: 0 0 5px 0;
	padding: 0 0 5px 0;
	}
.homepage .news a {
	color: #a3ebff;
	}
.homepage .news .meta {
	color: #d6dae2;
	font-size: 10px;
	}
.homepage td {
	text-align: center;
	width: 20%;
	}
.highlight {
	margin-left: 15px;
	}
.leftCol {
	width: 207px;
	float: left;
	padding: 16px;
	}
.middleCol {
	width: 465px;
	float: left;
	padding: 16px 15px 0 0;
        overflow: hidden;
	}
.middleCol h1 {
	background: url(/graphics/new_images/default-heading.png) no-repeat;
	color: #fff;
	font-size: 15px;
	width: 429px;
	height: 31px;
	line-height: 30px;
	padding: 0 0 0 33px;
        margin: 0;
	}
.rightCol {
	width: 207px;
	float: right;
	padding: 16px;
	}
.rightCol .events {
	border-bottom: 1px solid #ccc;
	padding: 0 0 20px 0;
	}
.rightCol .news p, .rightCol .events p {
	font-size: 10px;
	}
.rightCol .news h2, .rightCol .events h2, .pollDetailWrapper h2 {
	color: #252f48;
	font-size: 16px;
	}
.rightCol .news .meta, .rightCol .events .meta {
	color: #252f48;
	font-size: 10px;
	}
.rightCol a img, .leftCol a img, .rightCol a span img, .leftCol a span img  {
	border: 1px solid #89a8cb;
	margin: 10px 0 0 0;
	float: left;
	}
.rightCol a img:hover, .leftCol a img:hover {
	border: 1px solid #00668a;
	}
.rightCol .news li, .rightCol .events li {
	border-bottom: 1px solid #e8e8e8;
	margin: 0 0 5px 0;
	padding: 0 0 5px 0;
	}
.homeContact {
	font-size: 11px;
	margin: 20px 0 0 0;
        float: left;
	}
.homeContact span {
	font-size: 9px;
	}
.catalog {
	background: url(/graphics/new_images/search-catalog.gif) no-repeat bottom left;
	width: 207px;
	height: 81px;
	display: block;
	}
.catalogChildren {
	background: url(/graphics/new_images/search-catalog-children.gif) no-repeat bottom left;
	width: 207px;
	height: 81px;
	display: block;
	}
.catalogTeen {
	background: url(/graphics/new_images/search-catalog-teen.gif) no-repeat bottom left;
	width: 207px;
	height: 81px;
	display: block;
	}
.catalog:hover, .catalogTeen:hover, .catalogChildren:hover {
	background-position: top left;
	}

.footer {
	width: 960px;
	}

/* --------------- Navigation --------------- */


.moreLink {
	font-weight: bold;
	display: block;
	text-align: right;
	width: 100%;
	clear: both;
	border-top: 1px solid #efefef;
	}
.mainNav li ul, #footerNav li ul, .utilityNav li ul, .footerNav li ul {
	display:none !important;
	}
.mainNav li, #footerNav li {
	margin:0;
	}
.mainNav {
	list-style-type: none;
	margin: 0 7px;
	padding: 0;
	}
.mainNav li {
	display: block;
	float: left;
        text-align: center;
	}
.mainNav li a.first {
	border-left: none;
	}
.mainNav li a.last {
	border-right: none;
	}
.mainNav li a {
	color: #366b9d;
	float: left;
	height: 47px;
	line-height: 47px;
	border-right: 1px solid #e2d6c7;
	border-left: 1px solid #f6f0e8;
	text-shadow: 1px 1px #fff;
        font-size: .9em;
        z-index: 5;
	}
.mainNav li.item1 a {width: 60px;}
.mainNav li.item2 a {width: 140px;}
.mainNav li.item3 a {width: 125px;}
.mainNav li.item4 a {width: 155px;}
.mainNav li.item5 a {width: 160px;}
.mainNav li.item6 a {width: 75px;}
.mainNav li.item7 a {width: 60px;}
.mainNav li.item8 a {width: 155px;}

.mainNav li a:hover, .mainNav li a.current {
	background: #F4EFE6;
	text-decoration: none;
        color: #009be3;
	}
.utilityNav {
	list-style-type: none;
	margin: 0;
	padding: 0 0 0 20px;
        line-height: 19px;
	}
.utilityNav li a, .utilityNav li a:visited {
	background: url(/graphics/new_images/arrow.png) no-repeat;
	display: block;
	color: #fff;
	padding: 0 0 0 30px;
	margin: 10px 0;
	font-weight: bold;
        height: 19px;
        line-height: 19px;
	}




.subNav, .utilitySubNav {
	margin: 0;
	padding: 0;
	list-style-type: none;
        text-indent:0px;
	}
.subNav1 li, .utilitySubNav li {
        margin: 0;
        padding: 0;
        list-style:none outside none; 
        float:left;
        }
.subNav li a, .subNav li a:visited, .utilitySubNav li a, .utilitySubNav li a:visited {
	background: url(/graphics/new_images/sub-nav-item.gif) no-repeat top left;
	color: #366b9d;
	font-weight: bold;
	width: 183px;
	line-height: 28px;
	display: block;
	border-bottom: 1px solid #fff;
	padding: 0 12px;
	}
.subNav li a:hover, .utilitySubNav li a:hover, .subNav li a.current, .utilitySubNav li a:hover {
	text-decoration: none;
	background-position: bottom;
        color: #009be3;
	}
.subNav li ul, .utilitySubNav li ul {
	margin: 0;
	padding: 0;
	}
.subNav li ul, .utilitySubNav li ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	}
#subNav li ul li a, #subNav2 li ul li a:visited, #utilitySubNav li ul li a, #utilitySubNav li ul li a:visited {
	background: #015591;
	color: #fff;
	font-weight: bold;
	width: 181px;
	line-height: 28px;
	display: block;
	border-bottom: 1px solid #fff;
	padding: 0 12px;
	border-left: 2px solid #fff;
	}
#subNav li ul li a:hover, #utilitySubNav li ul li a:hover {
	background: #2272a5;
        color: #fff;
	}




.footerNav {
	list-style-type: none;
	font-size:11px;
	margin: 0 0 10px 0;
	padding: 0;
	text-align:left;
	width: 800px;
	float: left;
	}
.footerNav li {
	display:inline;
	margin: 0 15px 0 0;
	float: left;
	}
.spinweb {
	float: right;
	display: block;
	width: 79px;
	height: 19px;
	margin: 15px 0 0 0;
	}

.childrenElement1 {
	position: absolute;
	z-index: -1;
        top:-309px;
        right:823px;
	}
.childrenElement2 {
	position: absolute;
	z-index: -1;
        top: -285px;
        left: 965px;
	}
.teenElement {
	position: absolute;
	right: 781px;
        top:-309px;
	z-index: -1;
	}

.newsList li, .eventsList li, .blogList li {
	border-bottom: 1px solid #999;
	padding: 0 0 10px 0;
	margin: 0 0 10px 0;
        }
.newsList h3, .eventsList h3, .blogList h3 {
        margin: 20px 0 0 0;
        }
.newsList .meta, .eventsList .meta, .blogList .meta, .meta, .blogPosted {
        font-size: 11px;
        margin-top: 0;
        }
.pagination {
    clear: both;
    display: block;
}
.pagination a, .pagination a:link, .pagination a:visited {
    text-decoration: none;
}
.pagination .prevnextCurrent, .pagination .prevnextWindow, .pagination .prevnextWindowArrow {
    border: solid 1px #ccc;
    margin: 0;
    padding: 4px 6px;
    font-size: 11px;
    margin-right: 2px;
    display: inline;
    display: inline-block;
}
.pagination a.prevnextWindow:hover, .pagination a.prevnextLink:hover, .pagination .prevnextWindowArrow:hover {
    border: solid 1px #555;
    color: #555;
}
.pagination .prevnextCurrent {
    background: #ccc;
    color: #000;
    font-weight: bold;
    padding: 4px 6px;
}
.pagination a.prevnextLink {
    border: 1px solid #ccc;
    padding: 4px 6px 4px;
    margin-right: 2px;
    font-size: 11px;
    display: block;
}
#teenPoll {
    background: #efefef url(/graphics/new_images/pollTeen.gif) no-repeat top right;
    margin: 10px 0 0 0;
    float: left;
    clear: both;
}
#childrenPoll {
    background: #efefef url(/graphics/new_images/pollChildren.gif) no-repeat top right;
    margin: 10px 0 0 0;
    float: left;
    clear: both;
}
#childrenPoll h2, #teenPoll h2 {
    margin: 10px 0;
}
.pollDetailWrapper {
    background: #efefef;
    float: left;
    width: 189px;
    padding: 0 10px 10px 10px;
}
.pollDetailWrapper .moreLink {
    border-top: 1px solid #999;
    line-height: 40px;
    margin: 10px 0 0 0;
}
.pollQuestion, .pollResultQuestion {
    border-bottom:1px solid #999;
    float:left;
    font-weight:bold;
    margin:0 0 10px;
    width:100%;
    font-size: 11px;
    text-shadow:1px 1px #EFEFEF;
}
.pollChoices, .pollResultChoices {
    display: block;
    font-size: 10px;
}
.pollChoices {
    margin: 0 0 5px 0;
}
.pollDetailWrapper input[type="submit"] {
    background: #366b9d;
    border: 0 none;
    color: #FFFFFF;
    padding: 5px 10px;
    position :absolute;
    margin: 17px 0 0 0;
}
.pollDetailWrapper input[type="submit"]:hover {
    background: #009be3;
    color: #FFFFFF;
    cursor: pointer;
}
.pollBar {
    background: #366b9d;
    display: block;
    min-width: 1px;
    margin: 0 0 10px 0;
}
.gallery ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.gallery ul li {
    margin: 0;
    clear: both;
    border-bottom: 1px solid #ccc;
    float:left;
    margin:10px 0;
    padding:10px 0;
    width:100%;
}
.gallery a img {
    float: left;
    margin: 0 10px 10px 0;
    border: 2px solid #5c92be;
}
.gallery a img:hover {
    border: 2px solid #00668a;
}
.gallery h2 {
    margin: 0;
}
.thumbPhotos ul {
   list-style-type:none;
   margin:0;
   padding:0;
}
.thumbPhotos li {
   float:left;
   height:80px;
   max-height: 80px;
   margin:10px;
   width:125px;
   overflow: hidden;
   border:2px solid #5c92be;
}
.thumbPhotos li:hover {
   border: 2px solid #00668a;
}
.thumbPhotos a img {
   width: 125px;
}
.thumbPhotos img {
   margin-bottom: -4px;
   position: relative;
}
#comments_section h2 {
   width: 100%;
   border-bottom: 1px solid #555;
}
#comments_section .blogInfo {
   border-bottom: 1px solid #efefef;
   margin: 3px 0 0 0;
   padding: 3px 0 0 0;
}
.commentWrapper .name, .commentWrapper .email {
   float: left;
   width: 50%;
}
.commentWrapper textarea {
   height: 150px;
   margin: 20px 0 0;
   width: 439px;
}
.blogPosted {
   border-bottom: 1px solid #efefef;
   margin: 0 0 3px 0;
   padding: 0 0 3px 0;
}
.formButtons a {
    background: #366b9d;
    border: 0 none;
    color: #FFFFFF;
    padding: 5px 10px;
    margin: 17px 0;
    float: left;
}
.formButtons a:hover {
    background: #009be3;
    text-decoration: none;
}
.bottomNavigation a {
    width: 100%;
    diplay: block;
    border-top: 1px solid #555;
    padding: 5px 0 0 0;
    float: left;
}
.titlebg {
    background: #ecdfce;
}
.searchBoxTable {padding: 5%; background: #efefef; width: 90%; margin: 10px 0;}
.searchBoxTable input[type="image"] {margin: 0 0 -5px 0;}
.searchTopMatches {font-weight: bold; font-style: italic;}
.searchItem {
        margin: 0 0 10px 0;
        padding: 0 0 10px 0;
        border-bottom: 1px solid #ccc;
        }