/*universal mobile styles--for phones and tablets */

@media only screen and (min-width : 1px) and (max-width : 819px) {
	
	html, body {
		width: 100%;
		height: 100%;
		margin: 0px;
		padding: 0px;
		overflow-x: hidden; 
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		-webkit-text-size-adjust: 100%;
	}

	
	/*header layout*/
	
	#header, #header_components, #header_resources, #header_states, #header_legislation, #header_about {
		background: #fff;
		background-image: none;
	} /*updated March 2021*/
	
	#header_middle {
		padding: 25px 0 0 0;
	}
	
	
		#header-top-left {
			width: 100%;
			float: left;
		} /*added March 2021*/
		
			#header-top-left h1 {
				margin: 0 45px 25px 25px;
			} /*updated March 2021*/
	
			#header-top-left h2.button {
				display: block;
				float: left;
				clear: none;
				margin: 15px 0 25px 25px;
				padding: 0;
				cursor: pointer;
			} /*updated March 2021*/
	
	
		#header-top-right {
			width: 100%;
			display: none;
			float: right;
			clear: both;
		} /*added March 2021*/
	
			#header_middle h2.ncham-logo {
				margin: 0 29px 15px 0;
				float: right;
			} /*added March 2021*/

	
	/*Begin Styles for Universal Navigation Bar*/	
	
	#nav {
		margin-right: 25px;
		margin-left: 100px;
		margin-bottom: 10px;
		float: right;
		display: none; /*hides the menu, but other functionality will display the menu when the mobile menu button is clicked*/
	}

	#nav li {
		float: none;
		text-align: center;
		padding: 0;
	}


/*

	#t-home {
		background: #00759A;
	}

	a.tab_home {
		background: none;
	}

	#t-about {
		background: #008542;
	}
	
	a.tab_about {
		background: none;
	}
	
	#t-components {
		background: #7CC3d3;
	}
	
	a.tab_components {
		background: none;
	}
	
	#t-resources {
		background: #8EC677;		
	}
	
	a.tab_resources {
		background: none;
	}
	
	#t-states {
		background: #CD9043;	
	}
	
	a.tab_states {
		background: none;
	}
	
	#t-legislation {
		background: #D5BA65;
	}
	
	a.tab_legislation {
		background: none;
	}
	
*/
	
	
	#t-home {
		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-about {
		border-bottom-left-radius: 11px;
		border-bottom-right-radius: 11px;
		-moz-border-radius-bottomleft: 11px;
		-webkit-border-bottom-left-radius: 11px;
		-moz-border-radius-bottomright: 11px;
		-webkit-border-bottom-right-radius: 11px;
		
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
		-moz-border-radius-topleft: 0px;
		-webkit-border-top-left-radius: 0px;
		-moz-border-radius-topright: 0px;
		-webkit-border-top-right-radius: 0px;
		
		border-top: 5px solid #008542;
	}
	
	#t-components {
		background-color: #00759A;
		padding: 0 0 3px 0;
		margin: 0;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
		-moz-border-radius-topleft: 0px;
		-webkit-border-top-left-radius: 0px;
		-moz-border-radius-topright: 0px;
		-webkit-border-top-right-radius: 0px;
		
		border-top: 5px solid #7CC3d3;
	}
		
	#t-resources {
		background-color: #00759A;
		padding: 0 0 3px 0;
		margin: 0;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
		-moz-border-radius-topleft: 0px;
		-webkit-border-top-left-radius: 0px;
		-moz-border-radius-topright: 0px;
		-webkit-border-top-right-radius: 0px;
		
		border-top: 5px solid #8EC677;
	}
	
	#t-states {
		background-color: #00759A;
		padding: 0 0 3px 0;
		margin: 0;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
		-moz-border-radius-topleft: 0px;
		-webkit-border-top-left-radius: 0px;
		-moz-border-radius-topright: 0px;
		-webkit-border-top-right-radius: 0px;
		
		border-top: 5px solid #CD9043;
	}
	
	#t-legislation {
		background-color: #00759A;
		padding: 0 0 3px 0;
		margin: 0;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
		-moz-border-radius-topleft: 0px;
		-webkit-border-top-left-radius: 0px;
		-moz-border-radius-topright: 0px;
		-webkit-border-top-right-radius: 0px;
		
		border-top: 5px solid #D5BA65;
	}
	
	
	#nav a {
		padding: 20px 100px;
	}




	/*begin footer styles*/	
	
	#footer_left {
		width: 100%;
	}
	
	#footer_center {
		width: 100%;
		clear: both;
		margin-left: auto;
		margin-right: auto;
		display: block;
	}
	
		#footer_center p {
			margin-left: 25px;
			margin-right: 25px;
		}
		
		#footer_center hr {
			margin-left: 25px;
			margin-right: 25px;
		}
	
	#footer_right {
		width: 100%;
		clear: both; /*for ie7, needs to clear its own containing div! :) */
	}
	
	/*end footer styles*/
	
	
	
	
	/*content styles*/
	
	
	p.breadcrumbs {
		float: left;
		clear: both;
		margin-bottom: 0px;
	}
		
	p.last_updated {
		float: left;
		clear: both;
	}
	
	
	/*styles for pull quote boxes (normally right floating sidebox)*/
	
	.pull_quotes {
		float: none;
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 90%;
	}
	
	
	/*styles for center, full-content box width boxes*/
	
	.subpage-box-center {
		float: left;
		width: 90%;
	}
	
	.subpage-box-center img {
		float: none;
		display: block;
		margin-right: auto;
		margin-left: auto;
	}
	
	
	/*images*/
	
	img.float_right_with_border {
		margin: 0 auto 40px auto;
		display: block;
		float: none;
	}
	
	/*scale the image as the browser window width decreases to that it doesn't expand beyond the content box*/
	.img_center {
		max-width: 100%;
		height: auto;
	}
	
	
	
	/* styles for caption_img divs, found predominantly on the webguide pages. These typically use the highslide.js function */
	div.caption_img {
		margin: 0 auto;
		display: block;
		float: none;
	}
	
	.caption_img img {
		margin: 0 auto;
		display: block;
		float: none;
	}
	
	div.caption_img p {
		margin: 0 auto;
		display: block;
		float: none;
	}
	
	
	


}







/*normal size range, from phone to ipad portrait*/
/*@media only screen and (min-width : 481px) and (max-width : 768px) {*/


/*for ipad portrait mode*/	
@media only screen and (min-width : 610px) and (max-width : 819px) {

/*layout structure*/	
	#wrap {
		min-width: 610px;
		max-width: 819px;
	}
	
	
/*Begin Styles for Universal Navigation Bar*/
	
	#nav {
		width: 55%;
	}	
	
	
	
	/* 2025 styles for search */
	
	#search {
		float: right;
		clear: both;
		display: none; /*hides the searchbar, but other functionality will display the menu when the mobile menu button is clicked*/
		margin: 0 0 10px 0;
		width: 250px;
		padding: 0;
	}
	
	
	
	/*old styles for search*/

	/*

	#search {
		float: right;
		clear: both;
		display: none;
		margin: 0 30px 0 0;
		width: 275px;
		padding: 0;
	}
		
	#search form {
		width: 275px;
	}
	
	#q {
		font-size: 1.2em;
		padding: 0;
		margin: 0;
	}
	
	#blue {
		padding: 17.5px;
		margin-bottom: 10px;
		border-radius: 0;
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
	}
	
	*/
		
	/*end old styles for search*/

	
	
/*sidebar and main content width styles*/	
	
	#sidebar {
		width: 40%;
	}
	
	#content {
		width: 60%;
	}
		
}




/*normal iPhone range:*/
/*@media only screen and (min-width : 200px) and (max-width : 480px) {*/


/*mobile styles, for phones*/
@media only screen and (min-width: 200px) and (max-width: 609px) {


/*layout structure*/
	
	#wrap {
		min-width: 200px;
		max-width: 609px;
	}
	
/*Begin Styles for Universal Navigation Bar*/
	
	#nav {
		width: 90%;
	}	
	
	
	/* 2025 styles for search */

	#search {
		float: right;
		clear: both;
		display: none; /*hides the searchbar, but other functionality will display the menu when the mobile menu button is clicked*/
		margin: 0 0 10px 0;
		width: 250px;
		padding: 0;
	}



	/*begin old styles for search*/

	/*
		
	#search {
		float: right;
		clear: both;
		display: none;
		margin: 0 30px 0 0;
		width: 275px;
		padding: 0;
	}
	
	#q {
		font-size: 1.2em;
		padding: 0;
		margin: 0;
	}
	
	#blue {
		padding: 17.5px;
		margin-bottom: 10px;
		border-radius: 0;
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
	}
	
	*/
	
	/*end old styles for search*/



/*sidebar and main content width styles*/	

	#sidebar {
		width: 100%;
	}

	#content {
		float: left;
		width: 100%;
	}

	
}




/*styles for specific in-between points, minor fixes for text flow and picture placement*/

@media only screen and (min-width : 820px) and (max-width : 1150px) {

	#nav {
		margin-top: 10px;
	} /*added Mar 2021 to allow for some space between the lefthand logo and the navigation tabs when the tabs sit under the logo at narrower browser widths*/

}


@media only screen and (min-width : 610px) and (max-width : 819px) {
	
	.float_right {
		padding: 15px;
	}
	
}

@media only screen and (min-width: 451px) and (max-width: 609px) {

	.float_right {
		padding: 25px;
	}
	
}

@media only screen and (min-width: 1px) and (max-width: 450px) {	
		
	.float_right {
		float: none;
		margin-left: auto;
		margin-right: auto;
		display: block;
		padding: 0;
	}
	
}


/*for the mobile menu/ icon */
@media only screen and (min-width: 1px) and (max-width: 454px) {
		
	/*mobile menu button*/
	
	#header_middle h2 {
		width: 100%;
	}

}