body {
	margin: 0;
	padding: 0;
	font-family: lucida-grande, verdana, sans-serif;
	font-size: 62.5%; /*Makes the base font size of the page 10 px, but uses a percentage along with em value with the text styles (see below), allowing more flexibility*/
	background: #F4F6F9;
}


/*layout structure*/


#wrap {
	min-width: 900px;
	max-width: 1518px;
	_width: expression(document.body.clientWidth < 1002? "1000px" : document.body.clientWidth > 1520? "1518px" : "auto"); /*hack uses a script targeted at ie6 only that sets a min width and max width.  See http://www.cameronmoll.com/archives/000892.html*/
	background: url(../img/wrap-bg.gif) repeat-y 0% 0%;
	float: left;
	width: 100%;
}


/*skip to main content (accessibility feature)*/


#skiptocontent {
	position:absolute; 
	left:0; 
	top:-500px; 
	width:1px; 
	height:1px; 
	overflow:hidden;
}


/*header layout*/


#header {
	background-color: #fff;  
    background-image: url('../img/kid-banner-new.png');
    background-repeat: no-repeat;
    background-position: right 81px;
    width: 100%;
    float: left;
    border-bottom: 7px solid #00759A;
} /*changed July 2021*/

	/*media queries for positioning the header image*/

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


#header_middle {
	margin: 0;
	padding: 0;
	border-top: 7px solid #00759A;
	width: 100%;
	float: left;
} /*changed Mar 2021*/


	#header-top-left {
		width: 30%;
		float: left;
	} /*new Mar 2021*/

		#header_middle h1 {
			float: left;
			margin: 18px 0 0 81px
		} /*changed Mar 2021*/
	
		#header_middle h2.button {
			display: none;
		} /*changed Mar 2021*/


	#header-top-right {
		width: 70%;
		float: right;
	} /*new Mar 2021*/
	
		#header_middle h2.ncham-logo {
			display: block;
			float: right;
			width: auto;
			margin: 12px 25px 133px 20px;
			padding: 0;
		} /*new Mar 2021*/
		
		
		
		/* 2025 styles for search */
		
		#search {
			float: right;
			margin-top: 10px;
			margin-bottom: 133px;
		}
		
			h3#site-search-text {
				float: left;
				padding: 20px 0 0 0;
				margin: 0;
				width: auto;
				background-color: none;
				font-size: 1.4em;
				text-decoration: none;
			}
			
			img#search-icon {
				float: left;
				padding: 10px;
				margin: 13px 0 0 0;
				clear: none;
				width: auto;
			}
		
				
			/*pseudo selectors*/
			
			div#search a:link {
				color: #356aa0;
				text-decoration: underline;
				border: none;
			}
			
			div#search a:visited {
				color: #356aa0;
				text-decoration: underline;	
				border: none;
			}
			
			div#search a:hover {
				color: #356aa0;
				text-decoration: underline;	
				border: none;
			}
			
			div#search a:active {
				color: #356aa0;
				text-decoration: underline;	
				border: none;
			}
		
		
		
		/* old styles for searchbar */
		
		/*
		
		#search {
			float: right;
			margin-top: 10px;
			margin-bottom: 133px;
		}
		
		
			#search label {
				font-size: 1.4em;
				color: #666;
				margin-left: 10px;
				background: url("../img/icons/search_icon.png") no-repeat 110% 48%;
				_background: url("../img/icons/search_icon.gif") no-repeat 110% 48%;
				padding-right: 40px;
			}
			
			#q {
				background: #bad5e8;
				font-size: 1.2em;
				border: 2px solid black;
			}
			
			#zoom_query {
				background: #bad5e8;
				font-size: 1.2em;
				border: 2px solid black;
			}
			
			#blue {
				background: #00759A;
				padding: 7px;
				margin-top: 4px;
				border-radius: 8px;
				-moz-border-radius: 8px;
				-webkit-border-radius: 8px;
			}
			
			.submit {
				border: 2px solid black;
				background-color: #fff;
				font-size: 1.2em;
			}
		
		*/
		
		/*end styles for search*/
		
		

/*Begin Styles for Universal Navigation Bar*/

#nav {
	clear: both;
	float: right;
	margin-right: 21px;
}

#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#nav li {
	float: left;
	margin: 0 5px 0 0;
	font-size: 1.3em;
}

#nav a {
	display: block;
	padding: 3px 30px;
	color: #fff;
	text-decoration: none;
}


/*

#t-home {
	background: url(../img/tabs/home_right.gif) no-repeat right top;
	padding: 0;
	margin: 0;
}

a.tab_home {
	background: url(../img/tabs/home_left.gif) no-repeat left top;
}

#t-about {
	background: url(../img/tabs/about_right.gif) no-repeat right top;
	padding: 0;
	margin: 0;
}

a.tab_about {
	background: url(../img/tabs/about_left.gif) no-repeat left top;
}

#t-components {
	background: url(../img/tabs/components_right.gif) no-repeat right top;
	padding: 0;
	margin: 0;
}

a.tab_components {
	background: url(../img/tabs/components_left.gif) no-repeat left top;
}

#t-resources {
	background: url(../img/tabs/resources_right.gif) no-repeat right top;		
	padding: 0;
	margin: 0;
}

a.tab_resources {
	background: url(../img/tabs/resources_left.gif) no-repeat left top;
}

#t-states {
	background: url(../img/tabs/states_right.gif) no-repeat right top;	
	padding: 0;
	margin: 0;
}

a.tab_states {
	background: url(../img/tabs/states_left.gif) no-repeat left top;
}

#t-legislation {
	background: url(../img/tabs/legislation_right.gif) no-repeat right top;
	padding: 0;
	margin: 0;
}

a.tab_legislation {
	background: url(../img/tabs/legislation_left.gif) no-repeat left top;
}

*/


#t-home, #t-about, #t-components, #t-resources, #t-states, #t-legislation {
	background-color: #00759A;
	padding: 0 0 3px 0;
	margin: 0;
	border-top-left-radius: 11px;
	border-top-right-radius: 11px;
	-moz-border-radius-topleft: 11px;
	-webkit-border-top-left-radius: 11px;
	-moz-border-radius-topright: 11px;
	-webkit-border-top-right-radius: 11px;
}

#t-home {
	
}

#t-about {
	/* border-bottom: 3px solid #008542; */
	border-right: 10px solid #008542;
}

#t-components {
	/* border-bottom: 3px solid #7CC3d3; */
	border-right: 10px solid #7CC3d3;
}

#t-resources {
	/* border-bottom: 3px solid #8EC677; */
	border-right: 10px solid #8EC677;
}

#t-states {
	/* border-bottom: 3px solid #CD9043; */
	border-right: 10px solid #CD9043;
}

#t-legislation {
	/* border-bottom: 3px solid #D5BA65; */
	border-right: 10px solid #D5BA65;
}




/*end styles for univeral navigation bar*/

/*end header layout*/



/*begin main content section styles*/

#container {
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
} /*contains both #content and #sidebar*/

#content {
	float: right;
	width: 70%;
	background: #fff;
	padding: 0;
}

#content p, h3 {
	padding: 0 20px;
}

.photo_right {
	float: right;
	width: auto;
	padding: 15px;
} /*for right-floating photos in subboxes, like those on the homepage*/

.float_right {
	float: right;
	width: auto;
	clear: both;
	padding: 0 40px 40px 40px;
} /*for right-floating images on subpages*/


.float_right_with_border {
	float: right;
	width: auto;
	clear: both;
	border: 1px solid #999;
	padding: 0;
	margin: 0 40px 40px 40px;
} /*for right-floating images on subpages*/


.text_left {
	float: left;
	width: auto;
}

/*end main content section styles*/


/*begin sidebar styles*/

#sidebar {
	float: left;
	width: 30%;
	display: inline;
	clear: left; /*found that I had to include this for ie6 layout to work, although layout worked in all other browsers without it*/
}

.gutter {
	padding: 20px;
	*padding: 0 20px 0 20px; /*This hack (the star before the rule) targets ie7 and lower only*/
	_margin-right: 2em; /*This hack (the underscore before the rule) targets ie6 and lower only*/
}

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

.sidebox h3 {
	font-size: 1.4em;
	text-align: center;
	color: #fff;
	background: #00759A url(../img/corners/box-blue.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 p {
	font-size: 1.3em;
	margin: 0;
	padding: 0 15px;
	text-align: center;
}

.sidebox ul {
	padding-right: 15px;
}


.sidebox ul li {
	font-size: 1.3em;
}

	.sidebox ul li li {
		font-size: 100%;
	}

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


/*end sidebar styles*/



/*begin footer styles*/
		
#footer {
	clear: both;
	background: #fff;
	text-align: center;
	border-top: 7px solid #00759A;
	width: 100%;
	float: left;
}

	#footer_left {
		float: left;
		width: 33%;
		display: inline;
		border: none;
		margin: 0;
		padding: 0;
	}
	
		#footer_left img {
			margin-top: 10px;
		}
	
	#footer_center {
		float: left;
		width: 33%;
		display: inline;
		border: none;
		margin: 0;
		margin-left: 1%;
		padding: 0;
		text-align: center;
	}
	
		#footer_center p {
			margin-left: 0;
			margin-right: 0;
			padding-left: 0;
			padding-right: 0;
			text-align: center;
		}
		
		#footer_center hr {
			margin-left: 0;
			margin-right: 0;
			padding-left: 0;
			padding-right: 0;
			text-align: center;
		}
	
	#footer_right {
		float: left;
		width: 33%;
		display: inline;
		border: none;
		margin: 0;
		padding: 0;
	}
	
		#footer_right img {
			margin-top: 14px;
		}
		
	div#footer_bottom {
		clear: both;
		width: 85%;
		float: none;
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 40px;
	}

/*end footer styles*/



/***************************************/

/*begin table styles*/

table {
	clear: both;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 0;
	border: 1px solid #000;
	font-size: 1.3em;
	border-collapse: collapse;
}

table th, table td {
	margin: 0;
	padding: 5px;
	text-align: left;
	border: 1px solid #b5b5b5;	
	line-height: 200%;
}

table th {
	color: #666;
}

th.row_header {
	font-size: 90%;
} /*Use this for tables that have left-hand side row headers*/

table tr {
	background: #e6e6e6;
}

table tr.alt {
	background:  #f1f1f1;
}

td li, td h3, th h3, td h4, th h4, td blockquote {
	font-size: 100%;
} /*fixes sizing issues for nested items.  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*/


/*end table styles*/



/*begin text and image styles*/

hr {
	color: #999;
	margin: 0 20px 0 20px;
}

img {
	border: none;
	padding: 0;
	margin: 0;
}

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

.text_center {
	text-align: center;
}

ol {
	margin-left: 10px;
}

ol.lower-alpha li {
	list-style-type: lower-alpha;
}

ol.lower-roman li {
	list-style-type: lower-roman;
}

p, li {
	font-size: 1.4em; /*13 pixels because we set the font-size in the "body" selector to 62.5% */
	color: #333;
	line-height: 160%;
}

blockquote {
	font-size: 1.4em;
	color: #333;
	line-height: 160%;
	font-style: italic;
}

blockquote li {
	font-size: 100%;
}

li.space_after {
	margin-bottom: 10px;
} /*for lists where there's more than a single line in the list (uses a <br/> tag in the list) that seem too crowded*/ 

.ref {
	font-size: 1.3em;
	color: #333;
	line-height: 140%;
} /*slightly smaller text for references and such*/

.ref_smaller {
	font-size: 1.0em;
	color: #333;
	line-height: 140%;
} /*slightly smaller text for references and such*/

address {
	font-size: 1.4em;
	color: #333;
	margin-left: 35px;
	margin-bottom: 20px;
}

span.bold_blue {
	color: #356AA0;
	font-weight: normal;
	font-weight: bold;
}

span.red {
	color: #bd3632;
}

span.disclaimer {
	color: #bd3632;
	font-style: italic;
}

span.dates {
	color: #666;
}

/*for hidden text, labels, divs, etc.*/
.hidden {
	display: none;
	visibility: hidden;
}

p.breadcrumbs {
	float: left;
	width: auto;
	font-size: 1.3em;
	clear: both;
}

p.last_updated {
	float: right;
	width: auto;
	font-size: 1.3em;
}

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

dl {
	margin-left: 30px;
}

dt {
	font-size: 1.4em; /*13 pixels because we set the font-size in the "body" selector to 62.5% */
	color: #333;
	line-height: 160%;
	font-style: italic;
	margin-top: 15px;
}

dt span.red {
	font-style: normal;
}

dd {
	margin-left: 20px;
	font-size: 1.4em; /*13 pixels because we set the font-size in the "body" selector to 62.5% */
	color: #333;
	line-height: 160%;
}

h1 {
	font-size: 2.2em;
	color: #356AA0;
	font-weight: normal;
}

h2 {
	font-size: 2.0em;
	color: #356AA0;
	padding: 20px 20px 0 20px;
	font-weight: normal;
	clear: both;
}

h3 {
	font-size: 1.4em;
	padding-left: 20px;
	color: #356AA0;
}

h4 {
	font-size: 1.2em;
	padding: 0 30px;
	color: #bd3632;
}

h5 {
	font-size: 1.2em;
	padding: 0 50px;
	color: #356AA0;
	font-style: italic;
}

h3.about {
	font-size: 1.4em;
	padding: 2px 20px;
	color: #fff;
	background-color: #008542;
}

h3.components {
	font-size: 1.4em;
	padding: 5px 20px;
	color: #fff;
	background-color: #7CC3d3;
	margin-top: 0;
	border-top-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
}

h3.resources {
	font-size: 1.4em;
	padding: 5px 20px;
	color: #fff;
	background-color: #8EC677;
	margin-top: 0;	
	border-top-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
}

h3.states {
	font-size: 1.4em;
	padding: 5px 20px;
	color: #fff;
	background-color: #CD9043;
	margin-top: 0;
	border-top-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
}

h3.legislation {
	font-size: 1.4em;
	padding: 5px 20px;
	color: #fff;
	background-color: #D5BA65;
	margin-top: 0;
	border-top-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
}

/*pseudo selectors*/

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

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

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

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



a.white:visited {
	color: #fff;
}

a.white:hover {
	color: #fff;
	text-decoration: underline;
}

a.white:active {
	color: #fff;
	text-decoration: underline;
}

a.white:link {
	color: #fff;
}



/**full width boxes, new addition 2012--box center like on homepage**/

.full_width_box {
	width: 100%;
	clear: both;
	margin: 0;
	padding: 0;
}

.full_width_box div {
	margin: 10px 20px 20px 20px;
	padding: 0;
	border: 1px solid #999;
	border-top-left-radius: 8px;
	-moz-border-radius-topleft: 8px;
	-webkit-border-top-left-radius: 8px;
    border-bottom-right-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    -webkit-border-bottom-right-radius: 8px;
}

.full_width_box h3 {
	font-size: 1.4em;
	padding: 5px 20px;
	color: #fff;
	background-color: #00759A;
	margin-top: 0;
	border-top-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
}




/*styles for pull quote boxes (right floating sidebox) -- new addition 2012*/

.pull_quotes {
	float: right;
	width: 40%;
	border: 1px solid #A9A9A9;
	background: #F1F1F1;
	clear: both;
	margin: 15px;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-box-shadow: 3px 3px 7px #999;
	-webkit-box-shadow: 3px 3px 7px #999;
	box-shadow: 3px 3px 7px #999;
}

.pull_quotes h3, .pull_quotes h4 {
	margin-top: 15px; /*for ie6*/
}
	
.pull_quotes img {
	margin-right: auto;
	margin-left: auto;
	display: block;
	margin-bottom: 20px;
}

/*styles for center, full-content box width boxes (copied from the webguide styles) -- new addition 2013*/

.subpage-box-center {
	float: left;
	width: 100%;
	clear: both;
	margin: 0;
	padding: 0;
	*margin-bottom: 20px; /*targets ie7 and lower only*/
	_margin-bottom: 0; /*targets ie6 and lower only*/
}

.subpage-box-center ul {
	margin: 0;
}

.subpage-box-center div {
	margin: 10px 20px 20px 20px;
	padding: 0;
	border: 1px solid #999;
	border-top-left-radius: 10px;
	-moz-border-radius-topleft: 8px;
	-webkit-border-top-left-radius: 8px;
    border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 8px;
    -webkit-border-bottom-right-radius: 8px;
	float: left; /*these divs need to be floated because they contain floating items.  To contain those items the divs too need to float.  However, this breaks ie 6 rendering.*/
	_float: none; /* this hack targets ie 6 only, telling it to override the above float: left; rule with a float: none; rule*/
	width: 95%;
}

.subpage-box-center h4 {
	font-size: 1.2em;
	padding: 5px 20px;
	color: #fff;
	background-color: #00759A;
	margin-top: 0;
	border-top-left-radius: 8px;
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
}


/*styles for captioned images*/
	/*captioned image styles originally added in the webguide, the webguide's styles are slightly different than these*/

div.caption_img2 {
	width: auto;
	float: right;
	border: none;
	margin: 0 35px;
	padding: 0;
	clear: right;
}

.caption_img2 img {
/*	margin: 0 10px 10px 10px; */
	padding: 5px 5px 0 5px;
	display: block;
	width: auto;
	clear: right;
	float: none;
/*	border: 1px solid #a9a9a9; 
	-moz-box-shadow: 3px 3px 7px #999;
	-webkit-box-shadow: 3px 3px 7px #999;
	box-shadow: 3px 3px 7px #999;
	background: white; */
}

.caption_img2 p {
	text-align: center;
	font-weight: bold;
}



/*captioned images, attribution styles*/
								
div.caption_img_attribution {
	width: auto;
	float: right;
	border: none;
	margin: 0 40px 0 0;
	padding: 0;
	clear: right;
}

div.caption_img_attribution img {
	margin: 0 auto;
	display: block;
	padding: 5px;
	width: auto;
	clear: right;
	float: none;
	border: 1px solid #a9a9a9;
	-moz-box-shadow: 3px 3px 7px #999;
	-webkit-box-shadow: 3px 3px 7px #999;
	box-shadow: 3px 3px 7px #999;
	background: white;
}

div.caption_img_attribution p {
	text-align: center;
	font-weight: normal;
	font-style: italic;
	font-size: 1.2em;
	line-height: 100%;
}