/*resources page styles*/




.sidebox_resources {
	background: #fff url(../img/corners/box-b.gif) no-repeat bottom right;
	padding: 0 0 12px 0;
	margin: 2em 0 3em 0;
	clear: left;
	width: 100%;
}

.sidebox_resources h3 {
	font-size: 1.4em;
	text-align: center;
	color: #fff;
	background: #8EC677 url(../img/corners/box-light-green.gif) no-repeat top left;
	padding: 5px 0;
	margin-top: 0; /*important, as this keeps standards-compliant browsers from adding a white margin above the heading, ruining the rouned corner look (when the box has a float on it)*/
}

.sidebox_resources p {
	margin: 0;
	padding: 0 15px;
	text-align: center;
}

.sidebox_resources img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}


/*header layout*/

#header_resources {
	background-color: #fff;  
    background-image: url('../img/kid-banner-new.png');
    background-repeat: no-repeat;
    background-position: right 81px;
    width: 100%;
    float: left; /*a div that contains floating divs must also have a float on it*/
    border-bottom: 7px solid #8EC677;
} /*changed July 2021*/

	/*media queries for positioning the header image*/

	@media only screen and (min-width : 1100px) and (max-width : 1200px) {
		
		#header_resources {
			background-size: 70%;
			background-position: right 75%;
		}
		
	}
	
	@media only screen and (min-width : 1000px) and (max-width : 1099px) {
		
		#header_resources {
			background-size: 67%;
			background-position: right 71%;
		}
		
	}
	
	@media only screen and (min-width : 900px) and (max-width : 999px) {
		
		#header_resources {
			background-size: 63%;
			background-position: right 69%;
		}
		
	}
	
	@media only screen and (min-width : 820px) and (max-width : 899px) {
		
		#header_resources {
			background-size: 60%;
			background-position: right 67%;
		}
		
	}
	
	@media only screen and (min-width : 1px) and (max-width : 819px) {
		
		#header_resources {
			background-image: none;
		}
		
	}


#footer_resources {
	clear: both;
	background: #fff;
	text-align: center;
	border-top: 7px solid #8EC677;
	width: 100%;
	float: left;
}

.subpage_photo {
	width: auto;
	text-align: center;
	clear: right;
}

.subpage_photo div {
	padding: 15px 0;
}

.subpage_text {
	float: left;
	width: 65%;
	clear: both;
}

.subpage_clear {
	clear: both;
}

li {
	padding-bottom: 5px;
}

li.local_nav {
	font-size: 1.2em; /*12 pixels because we set the font-size in the "body" selector to 62.5% */
	line-height: 140%;
	list-style-type: circle;
	font-weight: bold;
}

.local_nav li {
	font-size: 100%; 
}  /*fixes sizing issues for nested lists.  Since we're using relative font sizing (ems) the inheritance doesn't quite work right--without this rule it basically inherits the size rule twice, making text larger*/



/*link styles*/


#content a:link {
	color: #356aa0;
	text-decoration: underline;
	border: none;
}

#content a:visited {
	color: #663399;
	text-decoration: underline;
	border: none;
}

#content a:hover {
	color: #663399;
	text-decoration: underline;	
	border: none;
}

#content a:active {
	color: #663399;
	text-decoration: underline;	
	border: none;
}


/*end resources page styles*/