/*components page styles*/

.sidebox_components {
	background-color: #fff;
	padding: 0 0 12px 0;
	margin: 2em 0 3em 0;
	clear: left;
	width: 100%;
	border-top-left-radius: 11px;
	-moz-border-radius-topleft: 11px;
	-webkit-border-top-left-radius: 11px;
	border-bottom-right-radius: 11px;
	-moz-border-radius-bottomright: 11px;
	-webkit-border-bottom-right-radius: 11px;
}

.sidebox_components h3 {
	font-size: 1.4em;
	text-align: center;
	color: #fff;
	background-color: #00759A;
	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)*/
	margin-bottom: 17px;
	border-top-left-radius: 11px;
	/* border-right: 20px solid #8EC677; */
	-moz-border-radius-topleft: 11px;
	-webkit-border-top-left-radius: 11px;
	
	/* two borders below the h3, one with border-bottom and one with box-shadow */
	
	border-bottom: 10px solid #fff;
	box-shadow: 0 7px 0 0 #7CC3d3;
	
}

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

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



/*header layout*/

#header_components {
	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 #7CC3d3;
} /*changed July 2021*/

	/*media queries for positioning the header image*/

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







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

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

.subpage_photo div {
	padding: 15px 0;
}

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

.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*/

#content {
	min-height: 400px;
} /*makes the content box on all components pages at least 400px--longer than the local navigation bar (sidebar)*/

/*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 components page styles*/