/* VersionControl, all different sites use the same base file */
@import url("../base/base.css");

/* Additions to the base file for the bnlkids look */


/* MAIN STYLE -----------------------------------------------------------------------------------*/
body, div, h1, h2, h3, h4, h5, h6, form, textarea, p, td, input {
    font-family: Verdana,sans-serif;}

html {
	background:url("images/html-bg-gradient.png") no-repeat scroll 50% top #EFEFEF;}
body, #wrapper, #wrapperinner, #header, #header > a:first-child, #footer, #footerinner {
	background:transparent;
	margin:0;
	padding:0;}
body {
	background:url("images/bg-plectrum.png") no-repeat bottom right transparent;}

#wrapper {
	margin: 0 auto;
	max-width: 1200px;
	min-height: 50em;
	padding: 0 4px;
	width: 97% !important;}
#wrapperinner > div {
    clear: both;
    float: none;
    width: auto;}


/*HEADER-AgeSwitch/loginlogout/search*/
@media screen and (max-width:440px){
    #header{
        min-height:100px;
    }
}
#header .loginlogout, #header .ageswitch {
    position: absolute;
    right: 0px;
    top: 0;
    width: auto;}

#header .loginlogout {
	top:5px;}
#header .loginlogout a,
#header .loginlogout a>span {
    color: #FFFFFF;}
	
#header .ageswitch {
	bottom:90px;
    top: auto;}
#header .search {
    background: none repeat scroll 0 0 #efefef;
    border-radius: 0 0 10px 10px;
    bottom: 0;
    box-shadow: 0 1px 3px 0 #868686;
    height: 80px;
    left: 0;
    margin: -20px 0 0 !important;
    position: absolute;
    width: 100%;}
#header .search div.searchbox {
    height: 100% !important;
    padding: 0 !important;
    width: 100% !important;
}
#header .search > div > form {
    margin: 0 auto;
    position: relative;
    top: 30px;
    width: 700px;
    overflow:hidden;}

#wrapper #header .search > div > form,
body#body #wrapper .searchFilterSelect * {
    height: 40px !important;}
.searchFilterSelect .dijitArrowButton {
    background: none repeat scroll 0 0 transparent !important;
    float: left;}
#header .search form > div {
	float:left;
	padding:0;}

#header .search input{
	color: #505450;}	
#header .search .searchFilterSelect > div,
#header .search .searchterm input,
#header .search .searchsubmit input {
    background: none repeat scroll 0 0 #FFFFFF;
	float: left;
	height:40px !important;
	margin:0;}
#header .search .searchFilterSelect input,
#header .search .searchterm input {	
	line-height:40px;}
#header .search .searchFilterSelect input {
	cursor:default;
	padding: 0 5px;}


body#body #wrapper #header .search .searchterm input {
	right: 40px !important;
	width:450px !important;}
html.dj_ie body#body #header .search .searchterm input {
    border-left: 1px solid #DDDDDD;}
#header .search .searchsubmit input {
	background-position: center center !important;
	height: 40px !important;
	width: 40px !important;
}


#header .search .dijitComboBox {
    width: 150px;}

@media screen and (max-width:750px){
    #header .search > div > form {
        width: 460px !important;}
    #header .search .dijitComboBox {
        width: 100px;}
    body#body #wrapper #header .search .searchterm input {
        width: 210px !important;}
}
@media screen and (max-width:500px){
    #header .search > div > form {
        width: 340px !important;}
    #header #wrapper .search .dijitComboBox {
        width: 75px;}
    body#body #wrapper #header .search .searchterm input {
        width: 90px !important;}
}
@media screen and (max-width:375px){
    #header .search > div > form {
        width: 90% !important;}
    #header #wrapper .search .dijitComboBox {
        width: 15px;}
    body#body #wrapper #header .search .searchterm input {
        width: 100px !important;}
}


#header .ageswitch ul.navigation {
    background: none repeat scroll 0 0 #F2F2F2;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 1px 3px 0 #868686, 0 -30px 15px -10px #FFFFFF inset;
    height: 40px;
    overflow: auto;
    white-space: nowrap;}
#header .ageswitch ul.navigation > li {
    float:none;
    display:inline-block;
}
#header .ageswitch ul.navigation > li > a {
    border-right: 1px solid #EFEFEF;
    display: block;
    padding: 10px;
	color:#ea650d;}
#header .ageswitch ul.navigation > li:hover	 > a.link {
    background: #FFF;}
#header .ageswitch ul.navigation > li.active > a {
    background: #FF7320;
    border: medium none;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 15px 20px -10px #efaf66 inset, 0 5px 3px -1px rgba(0, 0, 0, 0.5);
	color:#fff;}

#header .ageswitch ul.navigation > li:first-child > a {
	font-weight:bold;}



#banner {
    border: 1px solid #EFEFEF;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 1px 3px 0 #868686;
    overflow: hidden;}
#banner .bannerImage {
    background:none;}
#banner .bannerImage img {
    border-radius: 10px;
    margin-bottom: 0;}

#content {
	margin:0 -10px;}

#navigation {
    background:transparent !important;
    border: medium none !important;
}
#navigation >ul {
	background: #FF7320 !important;
	border-radius: 10px 10px 10px 10px;
	box-shadow: 0 1px 2px 1px rgba(51, 51, 51, 0.35), 0 -27px 15px -15px #DB5505 inset;
	margin-bottom: 20px;
	overflow:auto;}
#navigation > ul > li > a {
	border-left: 1px solid #D85304;
	min-height: 40px;}
#navigation > ul > li:first-child > a {
	border-left: 1px solid rgba(0, 0, 0, 0);}

@media screen and (max-width:750px){ /* medium */
    ul.mainnavigation > li {
        Zwidth: 33%;
    }
}
@media screen and (max-width:500px){  /* narrow */
    ul.mainnavigation > li {
        Zwidth: 49.5%;}
}
@media screen and (max-width:440px){
    ul.mainnavigation > li > {
		width: 100%;
    }
    ul.mainnavigation > li > a {
		border-left: none;
    }
}
ul.mainnavigation > li:hover, ul.mainnavigation > li:active {
	background-color: transparent;
	box-shadow: none;}
#navigation > ul > li > a {
    border-bottom: 1px solid transparent;
    border-top: 1px solid #FF7320;
    color: #FFFFFF;
    display: block;
    font-size: 116.67%;
    line-height: 33px;
    padding: 2px 20px 3px;
    text-decoration: none;}
#navigation > ul > li:first-child > a {
	border-radius:10px 0 0 10px;}
#navigation > ul > li.hasmenu > a {
	background-image: url("images/dropmarker.png");
	background-position: right 55%;
	background-repeat: no-repeat;
	cursor: pointer;
	padding-right: 38px;}
#navigation > ul > li.hasmenu > a.nolink {
    cursor: default;}
#navigation > ul > li:hover > a,
#navigation > ul > li:focus > a {
    background-color: #FF7320;
    box-shadow: -3px 0 4px -2px rgba(0, 0, 0, 0.25), 3px 0 4px -2px rgba(0, 0, 0, 0.25), 0 10px 7px -5px rgba(255, 255, 255, 0.2) inset, 0 15px 22px -11px rgba(255, 255, 255, 0.35) inset;
    color: #FFFFFF;
    outline: 0 none;
    text-decoration: none;}
#navigation > ul > li > a span {
    overflow: hidden;
    padding: 0;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;}

ul.mainnavigation > li:hover > ul,
ul.mainnavigation > li:focus > ul {
	border: 1px solid #FA711F;
	background-color: #FFFFFF;
	border-radius: 0 0 7px 7px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.33);
	margin-left: -1px;
	padding: 9px 0 14px;
	width:auto;}
ul.mainnavigation > li > ul li {
	display: list-item;
	float: none;
	width: auto;}
ul.mainnavigation > li > ul > li a {
    padding: 4px 20px;
    text-decoration: none;
	font-weight:normal;}
ul.mainnavigation > li li.hasmenu > a > span {
    font-weight: bold;}
ul.mainnavigation > li > ul > li a:hover {
    background-color: #FF7320;
    border-top: 1px solid #FF7320;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3), 0 5px 4px -2px rgba(255, 255, 255, 0.2) inset, 0 8px 11px -6px rgba(255, 255, 255, 0.35) inset;
    color: #FFFFFF;
    padding-top: 3px;
    text-decoration: none !important;}
ul.mainnavigation > li > ul > li li a{
    padding-left: 30px !important;}
ul.mainnavigation ul ul > li > a.link > span {
	background: none;
	padding-left: 0;}


.applicationcontainer{
	padding:10px !important;}
.application {
	background: url("images/bg-widget-standard.png") repeat-x scroll left bottom #FFFFFF;
	border-radius: 10px 10px 10px 10px;
	box-shadow: 0 1px 3px 0 #868686;}
.apptitle {
	border-radius: 10px 10px 0 0;
	margin: 0;
	padding: 10px 20px;
	border:none !important;}
.apptitle h2 {
	color: #FF7320;
	font-size: 150% !important;
	font-weight: normal !important;
	margin:0;
	border:0;}
.appcontent {
    padding: 0 20px 20px;}
.FeaturedItems .appcontent {
    padding-bottom: 0;}

#footer {
    height: auto;
	padding-top:30px;}
#footer .footerinner {
	display:none;}
#footer .footer {
    background: none repeat scroll 0 0 #505450;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    color: #FFFFFF;
    height: 126px;
    padding: 20px 20px 40px !important;}
#footer .payoff {
	margin: 5px 0 1px;}


/*Readinglists*/
.ReadingListTitle {
    color: #F47921 ;
    font-size: 2em;}
.newList {
    margin-bottom: 20px;}
.listReadingListItemCover {
    clear: both;
	width:100%;} /*Start all on new line*/

.recordDisplayElement.vertical div.data.popup {
	margin:0;
	width:auto !important;}
.recordDisplayElement.vertical .image {
	width:100% !important;}

ul.itemCover > li.listItem, ul.itemCover > li {
    margin: 10px 2% 20px 3%;
    width: 20% !important;}
@media (max-width: 1024px) {
    ul.itemCover > li.listItem, ul.itemCover > li {
        margin: 10px 1% 20px 1%;
        width: 23% !important;}
}

.recordDisplayElement.vertical div.data.popup:hover {
    width: 100% !important;}
.recordDisplayElement.vertical div.data.popup:hover * {
    white-space: normal;}

html {
	background:url("images/background.png") repeat-x scroll center 100px #00af9e !important;}

#header {
	background: url("images/logo.png") no-repeat scroll left top transparent;
    padding-bottom: 100px;}
#navigation {
    margin-top: -50px;
    top: -50px;}
	


/*SELF SERVICE 27601003213604 
.application .selfcheckpreText,
.application .SelfCheckLoans .SelfCheckLoansheader,
.application .SelfCheckLoans .SelfCheckLoansArea,
.application .selfcheckpostText {
    background: url("images/keyboard.png") no-repeat scroll 0 0 transparent;
    margin-top: 10px;
	min-height:26px;
    padding-left: 35px;}
.application .SelfCheckLoans .SelfCheckLoansheader {
    background: url("images/card_in_use.png") no-repeat scroll 0 0 transparent;}
.SelfCheckLoansheader + .SelfCheckLoansheader,
.application .SelfCheckLoans .SelfCheckLoansArea {
    background: none !important;
	margin-top: 0 !important;}
.SelfCheckLoansheader + .SelfCheckLoansheader + .SelfCheckLoansheader {
    background: url("images/book.png") no-repeat scroll 0 0 transparent !important;
	margin-top:10px !important;}
.application .selfcheckpostText {
    background: url("images/key.png") no-repeat scroll 0 0 transparent;}
*/

.treeLink[onclick*="DatabaseLink"] .treeElementText {
    text-decoration: underline;} /*Show search links underlinked*/


/*V3.0 fixes*/
#header {
    min-height: 90px;
}
#header .ageswitch {
    bottom: 110px;
}
#header .search > div > form {
    border-radius: 7px;
}
#header .search form > div.searchterm {
    bottom: 0;
    float: none;
    left: 5px;
    position: absolute;
    right: 45px;
    top: 0;
}
body#body #wrapper #header .search .searchterm input {
    width: 100% !important;
    left: 0;
    padding: 0;
}
.locname {
    margin-top: 0;
    padding-top: 24px;
}
body#body #navigation {
    float: none;
    top: -70px !important;
    width: auto;
}
#banner {
    margin: -10px 10px 0 !important;
}
#footer {
    width: 100%;
}