@media only screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
	
	.donate-top-nav, .button-go, .search-button-new, .icon-facebook-35, .icon-google-plus-35, 
	.icon-rss-35, .icon-twitter-35, .donate-icon, .mobile-search-sprite, .state-map { 
	background: url(../png/sprite-vertical-2025%402x.png) no-repeat; 
	background-size: 220px 371px;
	}
 
	.donate-top-nav { background-position: -1px -2px; }
	.button-go { background-position: 0 -69px; }
	.search-button-new { background-position: 0 -104px; }
	.icon-facebook-35 { background-position: 0 -132px; }
	.icon-google-plus-35 { background-position: 0 -172px; }
	.icon-rss-35 { background-position: 0 -212px; }
	.icon-twitter-35 { background-position: 0 -252px; }
	.donate-icon { background-position: 0 -292px; }
	.mobile-search-sprite { background-position: 0 -326px; }
	.state-map { background-position: -1px -352px; }
		
	#logo {
	background: url(../jpg/dog-photos-girl-x2.jpg) no-repeat top right;
	background-size: 330px 129px;
	}

	#logo-blog {
		background: url(../jpg/dog-photos-girl-x2.jpg) no-repeat top right;
		background-size: 330px 129px;
	}
	#logo-legislating {
		background: url(../jpg/dog-photos-ambull-x2.jpg) no-repeat top right;
		background-size: 330px 129px;
	}
	#logo-victim {
		background: url(../jpg/dog-photos-boy-x2.jpg) no-repeat top right;
		background-size: 330px 129px;
	}
	#logo-statistics {
		background: url(../jpg/dog-photos-rottweiler-x2.jpg) no-repeat top right;
		background-size: 330px 129px;
	}
	#logo-safe {
		background: url(../jpg/dog-photos-husky-x2.jpg) no-repeat top right;
		background-size: 330px 129px;
	}
	#logo-dangerous {
		background: url(../jpg/dog-photos-side-pit-bull-x2.jpg) no-repeat top right;
		background-size: 330px 129px;
	}
	.dangerous-breed-pit-bull-1, .dangerous-breed-pit-bull-2, .dangerous-breed-rottweiler, .dangerous-breed-pit-bull-3 
	{ background: url('../jpg/sprite-dangerous-dogs-pit-bulls%402x.jpg') no-repeat; background-size: 335px 299px; }

	.dangerous-breed-pit-bull-1 { background-position: -5px -0px; }
	.dangerous-breed-pit-bull-2 { background-position: -170px -0px; }
	.dangerous-breed-rottweiler { background-position: -5px -150px; }
	.dangerous-breed-pit-bull-3 { background-position: -170px -150px; }

	.fighting-breed-1, .fighting-breed-2, .fighting-breed-3, .fighting-breed-4
	{ background: url('../jpg/sprite-dangerous-dogs-fighting-breeds%402x.jpg') no-repeat; background-size: 335px 299px; }
 
	.fighting-breed-1 { background-position: -5px -0px; }
	.fighting-breed-2 { background-position: -170px -0px; }
	.fighting-breed-3 { background-position: -5px -150px; }
	.fighting-breed-4 { background-position: -170px -150px; }

	.wolfdog-1, .wolfdog-2, .wolfdog-3, .wolfdog-4
	{ background: url('../jpg/sprite-dangerous-dogs-wolf-dog-hybrids%402x.jpg') no-repeat; background-size: 335px 299px; }
 
	.wolfdog-1 { background-position: -5px -0px; }
	.wolfdog-2 { background-position: -170px -0px; }
	.wolfdog-3 { background-position: -5px -150px; }
	.wolfdog-4 { background-position: -170px -150px; }

	.what-is-a-pitbull-1x1, .what-is-a-pitbull-2x1, .what-is-a-pitbull-3x1, .what-is-a-pitbull-4x1
	{ background: url('../jpg/sprite-what-is-a-pit-bull-part1%402x.jpg') no-repeat; background-size: 335px 299px; }
 
	.what-is-a-pitbull-1x1 { background-position: -5px -0px; }
	.what-is-a-pitbull-2x1 { background-position: -170px -0px; }
	.what-is-a-pitbull-3x1 { background-position: -5px -150px; }
	.what-is-a-pitbull-4x1 { background-position: -170px -150px; }

	.what-is-a-pitbull-5x1, .what-is-a-pitbull-6x1, .what-is-a-pitbull-7x1, .what-is-a-pitbull-8x1
	{ background: url('../jpg/sprite-what-is-a-pit-bull-part2%402x.jpg') no-repeat; background-size: 335px 299px; }
 
	.what-is-a-pitbull-5x1 { background-position: -5px -0px; }
	.what-is-a-pitbull-6x1 { background-position: -170px -0px; }
	.what-is-a-pitbull-7x1 { background-position: -5px -150px; }
	.what-is-a-pitbull-8x1 { background-position: -170px -150px; }

	.find-a-pitbull-boxer-x1, .find-a-pitbull-english-bulldog-x1, .find-a-pitbull-golden-x1, .find-a-pitbull-rottweiler-x1
	{ background: url('../jpg/sprite-identify-a-pit-bull-row-1%402x.jpg') no-repeat; background-size: 335px 299px; }
 
	.find-a-pitbull-boxer-x1 { background-position: -5px -0px; }
	.find-a-pitbull-english-bulldog-x1 { background-position: -170px -0px; }
	.find-a-pitbull-golden-x1 { background-position: -5px -150px; }
	.find-a-pitbull-rottweiler-x1 { background-position: -170px -150px; }

	.find-a-pitbull-bullmastiff-x1, .find-a-pitbull-german-shepherd-x1, .find-a-pitbull-great-dane-x1, .find-a-pitbull-labrador-x1
	{ background: url('../jpg/sprite-identify-a-pit-bull-row-2%402x.jpg') no-repeat; background-size: 335px 299px; }
 
	.find-a-pitbull-bullmastiff-x1 { background-position: -5px -0px; }
	.find-a-pitbull-german-shepherd-x1 { background-position: -170px -0px; }
	.find-a-pitbull-great-dane-x1 { background-position: -5px -150px; }
	.find-a-pitbull-labrador-x1 { background-position: -170px -150px; }

	.find-a-pitbull-beagle-x1, .find-a-pitbull-doberman-x1, .find-a-pitbull-heeler-x1, .find-a-pitbull-pitbull-x1
	{ background: url('../jpg/sprite-identify-a-pit-bull-row-3%402x.jpg') no-repeat; background-size: 335px 299px; }
 
	.find-a-pitbull-beagle-x1 { background-position: -5px -0px; }
	.find-a-pitbull-doberman-x1 { background-position: -170px -0px; }
	.find-a-pitbull-heeler-x1 { background-position: -5px -150px; }
	.find-a-pitbull-pitbull-x1 { background-position: -170px -150px; }

}

/************************************************************************************
MEDIA RESPONSIVE 1068
*************************************************************************************/

@media screen and (max-width: 1068px) {

	@viewport { width: device-width; zoom: 1.0; }	
	@-ms-viewport { width: 1068px; }
	@-o-viewport { width: 1068px; }


	body {
	width: 100%;
	align: left;
	}
	#graybackground, #header, #navigation {
		width: 100%;
	}
	.graybackground1 {
		width: auto;
	}
	.graybackground2 {
		display: none;
	}
	.graybackground3 {
		float: left;
		width: auto;
		margin-left: 5px;
	}
	#graybackground .graybackground3 {
		float: right;
		padding-right: 10px;
	}
	.search-box {
		background: #ffffff;
	}
/*--- logo size FLAG ---*/	
	.logoimg { 
		float: left; 
		padding-left: 25px; 
		padding-top: 25px; 
	}
	.logodesc {
		float: left;
		padding: 20px 0 0 25px;
		width: 48%;
	}
/*--- leftcol content OFF-CENTERED, including FOOTER ---*/	
	#content-www {
		clear: left;
		width:99.6%;
		height: auto;
		padding: 0 0 25px 0;
		margin: 0;
		background: url(../png/bkg-stripe-1068.png) repeat-y left;
	}
	#breadcrumb, #leftcol, #sidebar {
		float: none;
		width: 80%;
		padding: 20px 0 0 25px;
		margin: 0 auto;
		background: none;
	}

#leftcol #attention {
	margin: 0 0 25px 0;
}

/*--- width must stay 100% or H1 will NOT break properly ---*/	
	#leftcol #subnav {
		clear: left;
		float: left;
		width: 100%;
		height: auto;
		padding: 0;
		margin: 0 0 25px 0;
		background: none;
	}
	#leftcol #attention {
	clear: left;
		float: left;
		width: 100%;
		height: auto;
}
	
	#footnote {
	padding-bottom: 25px;
	}
/*--- Special to Home page sidebar top padding removed ---*/	
	body#home #sidebar {
	padding-top: 0;
	}
	
	#sidebar .sidebar-large-graphic {
		float: left;
		clear: left;
		margin: 0 0 15px 0;
	}	
	#subscribe-sidebar, #socialmedia {
		display: none;
	}	
	#sidebar #adirectory {
		float: left;
		clear: left;
	}
	#sidebar h4 {
		clear: left;
		font-size: 1.1em;
		width: auto;
		background: url(../gif/gray-ruler.gif) repeat-x;
		margin: 10px 0 0 0;
		padding: 40px 5px 20px 0;
	}	
	#sidebar h4 .more {
	padding-right: 0;
	margin-right: 0;
	width: auto;
	}
	#sidebar ul.red li:first-child {
		background: url(../gif/bullet-red.gif) no-repeat 0 3px; 
		padding-left: 24px; 
		padding-bottom: 10px;
	}
	#sidebar ul.red li {
		background: url(../gif/bullet-red.gif) no-repeat 0 3px; 
		padding-left: 24px; 
		padding-bottom: 10px;
	}
	#sidebar ul.red li a:link, #sidebar ul.red li a:visited, #sidebar ul.red li a:hover {
	font-size: 1.2em;
	}
	#footerwrapper {
		clear: left;
		width: 100%;
		height: auto;
		padding: 0 0 25px 0;
		margin: 0;
	}
	#footer {
		float: none;
		width: 95%;
		margin: 0 auto;
	}
	#footer .left {
		float: left;
		clear: left;
		width: auto;
		margin-top: 15px;
		}
	#footer .right {
		float: left;
		clear: left;
		width: left;
		margin-top: 15px;
		
		}
	#footer p.socialrow, #footer p.subscribe, #footer p.modified {
		float: left;
		clear: left;
		margin-top: 5px;
		}
}

/************************************************************************************
MEDIA RESPONSIVE 1040
*************************************************************************************/

@media screen and (max-width: 1040px) {

	@viewport { width: device-width; zoom: 1.0; }	
	@-ms-viewport { width: 1040px; }
	@-o-viewport { width: 1040px; }


/*--- remove Home, do not remove 1st child of dropdown ---*/	
	ul.topnav li:nth-child(1) {
		display: none;
	}
	ul.topnav ul li:nth-child(1) {
		display: block;
	}
/*--- left margin 2nd child, no margin 2nd child ---*/	
	ul.topnav li:nth-child(2) {
		margin-left: 4px;
	}
	ul.topnav ul li:nth-child(2) {
		margin-left: 0;
	}
/*--- donate dropdown smallest size ---*/
	.div01 {
		width: 115px;
	}	
	

}	

/************************************************************************************
MEDIA RESPONSIVE 950
*************************************************************************************/

@media screen and (max-width: 950px) {

	@viewport { width: device-width; zoom: 1.0; }	
	@-ms-viewport { width: 950px; }
	@-o-viewport { width: 950px; }

	body {
	width: 100%;
	align: left;
	}
	ul.topnav li:nth-child(3), ul.topnav li:nth-child(4), ul.topnav li:nth-child(5), ul.topnav li:nth-child(6), ul.topnav li:nth-child(7), ul.topnav li:nth-child(8) {
		width: 107px;
	}

/*--- logo size FLAG ---*/	
	.logoimg { 
		float: left; 
		padding-left: 15px; 
		padding-top: 25px; 
		width: 250px; 
	}
	.logoimg img { 
		max-width: 250px; 
	}
	.logodesc {
		padding: 30px 0 0 25px;
		width: 65%;
	}

/*--- Photo becomes hidden ---*/
	#logo, #logo-statistics, #logo-dangerous, #logo-blog, #logo-legislating, #logo-victim, #logo-safe {
		background: none;
		width: 100%;
	}
	 
}	
/************************************************************************************
MEDIA RESPONSIVE 920
*************************************************************************************/

@media screen and (max-width: 920px) {

	@viewport { width: device-width; zoom: 1.0; }	
	@-ms-viewport { width: 920px; }
	@-o-viewport { width: 920px; }

		body {
		width: 100%;
		align: left;
	}
	ul.topnav li:nth-child(2) {
		width: 80px;
		background: none;
	}


/*--- Footer moves to vertical to avoid navigation breaking ---*/
	#footerwrapper {
		background: none;
		padding-bottom: 0;
	}
/*--- remove foot top padding ---*/
	#footer {
	padding-top: 0;
	}
	#footer .footermenu ul li:first-child a  { 
		display: inline;
	}
	#footer .footermenu ul li:first-child a  { 
		padding: 15px 0 15px 0;
		border-top: 1px solid #cccccc;
	} 
	#footer .footermenu ul li a { 
		padding: 3px;
		float: left;
		width: 100%;
		padding: 15px 0 15px 0;
		border-bottom: 1px solid #cccccc;
		border-right: none;
	}
	.copyrightmenu ul {
  	padding-top: 0;
	}

}	
/************************************************************************************
MEDIA RESPONSIVE 870 - NAVIGATION WINDOW
*************************************************************************************/

@media screen and (max-width: 870px) {

	@viewport { width: device-width; zoom: 1.0; }	
	@-ms-viewport { width: 870px; }
	@-o-viewport { width: 870px; }



body {
		width: 100%;
		align: left;
	}
/*--- New header area for mobile dropdown menu ---*/
	#headerwrapper {
		height: 175px;
		background: url(../png/background-masthead-mobile.png) repeat-x;
		border: 0;
	}
	#graybackground, #navigation, #header {
		padding: 0;
	}
	.graybackground1, .graybackground3 {
		width: auto;
		height: auto;
		padding: 0;
	}
	.graybackground3 {
		padding-right: 8px;
	}
/*--- donate dropdown tricky ---*/	
	.container img {
		float: right;
		position: absolute;
		top: 5px;
		left: -14px;
	}
	.div01 {
		display: none;
		}
	div.container:hover div.div01 {
		display:none;
	}
	.logoimg { 
		z-index: -1;
	}
	.logoimg img { 
		position: absolute;
		left: 5px; top: 37px;
		padding-left: 10px;
		z-index: 2;
		width: 245px;
		height: 70px
	}
/*--- RELATIVE POSITION all wrappers to keep logodesc from overlapping elements ---*/	
	.logodesc {
		float: none;
		clear: both;
		display: block;
		width: 85%;
		padding: 0 0 30px 0;
		margin: 0 auto;
		position: relative;
		top: 70px;
		left: 0;
		font-style: italic;
		background: url(../gif/gray-ruler.gif) repeat-x bottom left;
	}	

/*--- Home spacing above Welcome has not breadcrumb, needs less space ---*/	
body#home h1, body#home #leftcol, #leftcol h1.blog {
		padding-top: 0;
	}
#contentwrapper, #footerwrapper {
		clear: left;
		position: relative;
		width: 100%;
		top: 125px;
		left: 0;
	}
/*--- leftcol content CENTERED, including FOOTER ---*/	
	#content-www {
		background: none;
	}
	#breadcrumb, #leftcol, #sidebar, #footer {
		float: none;
		width: 85%;
		padding-left: 0;
		margin: 0 auto;
		background: none;
	}

/*--- navigation starts ---*/
	ul.topnav {
	  list-style-type: none;
	  clear: both;
	  margin: 0;
	  padding: 0;
	  height: 50px;
	  width: 100%;
	  position: absolute;
	  top: 115px;
	  left: 0;
	  overflow: hidden;
	  box-shadow: 0 0 3px 2px #e4e4e4;
	}
	ul.topnav li:not(:first-child) {
	  display: none;
	 }
	 ul.topnav li:first-child {
	  display: block;
	 }
	ul.topnav li:first-child a {
	  text-transform:  uppercase;
	  padding-top: 17px;
	  padding-left: 25px;
	}	  	
	ul.topnav li.icon {
	  float: right;
	  display: inline-block;
	  padding: 0;
	  margin: -4px 15px 0 10px;
	  background: none;
	  }
	ul.topnav li.icon a {
		text-decoration: none;
	  }
	ul#myTopnav.topnavresponsive li.icon {   /*--- icon in open box ---*/
		position: absolute;
		right: 13px;
		top: -5px;
		margin: 0;
		background: none;
	  }
	ul#myTopnav.topnavresponsive li.icon a, ul#myTopnav.topnavresponsive li.icon a:hover {
		background: transparent;
		border: none;
	  }	  
/*--- overall UL, the box ---*/
/* Display the dropdown */
	ul#myTopnav.topnavresponsive {
		position: absolute;
		display: block; 
		background: #ffffff;
		border: 2px solid #fd750e;
		width: 95%;
		margin-left: 7px;
		margin-top: 85px;
		z-index: 15;
		box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.15);
	  }
	 ul#myTopnav.topnavresponsive li {
		float: none;
		list-style-type: none;
		display: inline;
		background: #ffffff;
		}
	ul#myTopnav.topnavresponsive li a {
		display: block;
		text-align: left;
		font-family: 'Fira sans', sans-serif; 
		font-weight: 500;
		color: #fd750e;
		padding: 10px 0 10px 15px;
		margin-left: -20px;
		text-decoration: none;
		border-bottom: 1px solid #ffe5d1;
	  }
	ul#myTopnav.topnavresponsive li a:hover {
		background: #ffe5d1;
	  }
/*--- 2nd LEVEL NAV dropdown using "responsive" ---*/
	ul#myTopnav.topnavresponsive ul {
		list-style: none;
		display: none;
		border: 0;
		background: #ffe5d1;
	}
	ul#myTopnav.topnavresponsive ul li a {
		display: block;
		background: #ffffff;
		font-family: 'Fira sans', sans-serif; 
		font-weight: 500;
		color: #fd750e;
		padding: 10px 0 10px 15px;
		margin-left: 15px;
		text-decoration: none;
		border-bottom: 1px solid #ffe5d1;
	}
	ul#myTopnav.topnavresponsive ul li a:hover {
		background: #ffe5d1;
	}
/*--- had to switch to relative ---*/
	ul#myTopnav.topnavresponsive li:hover ul { 
		display: block;
		position: relative;
		left: 0;
		top: 0;
		padding: 0;
	}
/*--- 3rd LEVEL NAV ---*/
	ul#myTopnav.topnavresponsive ul ul {
		list-style: none;
		display: none;
		border: 0;
		background: #ffe5d1;
	}
	ul#myTopnav.topnavresponsive ul ul li {
	display: block;
		background-color: #ffffff;
		
	}
	ul#myTopnav.topnavresponsive ul ul li a {
		display: block;
		background: url(../gif/bullet-orange-mobile.gif) no-repeat 15px 15px;
		font-family: 'Fira sans', sans-serif; 
		font-weight: 400;
		padding: 10px 0 10px 35px;
		text-decoration: none;
		border-bottom: 1px solid #ffe5d1;
	}
	ul#myTopnav.topnavresponsive ul ul li a:hover {
		background: url(../gif/bullet-orange-mobile.gif) no-repeat 15px 15px;
		background-color: #ffffff;
	}	
	#subnav {
	display: none;
	}

	#leftcol #attention {
	margin: 25px 0 25px 0;
}
/*--- INCREASE WIDTHS to full screen ---*/
	#leftcol #grayquote, #leftcol #greenquote, #leftcol h1, #leftcol h1.blog, #leftcol h1.teal, #leftcol h1.multi-year, #leftcol h2, #leftcol h2.bar, #leftcol h2.hover, #leftcol h2.bar-multicol {
	width: auto;
	padding-right: 0;
	}

/*--- xmas banner mobile 
Controlling banner 100% from www CSS, no added code in blog CSS
---*/

	#advertisementwrapper, body#blog #advertisementwrapper {
	position: fixed; 
	z-index: 255;
	bottom: 0;
	width: 100%;
	height: 90px;
	}
	#advertisement, body#blog #advertisement {
	width: 80%;
	}
	#advertisement h2.survives, body#blog #advertisement h2.survives {
	display: none;
	}
	#advertisement .xmas-donate, body#blog #advertisement .xmas-donate  {
	display: block;
	clear: left;
	padding: 12px 0 0 0;
	}
	
	#advertisement a:link, #advertisement a:visited, #advertisement a:hover, body#blog #advertisement a:link, body#blog #advertisement a:visited, body#blog #advertisement a:hover  {
	margin-left: 0;
}

/*--- END xmas banner mobile ---*/



}		

/************************************************************************************
MEDIA RESPONSIVE 800 - Just a Safari stopping point
*************************************************************************************/

@media screen and (max-width: 800px) {


	@viewport { width: device-width; zoom: 1.0; }	
	@-ms-viewport { width: 800px; }
	@-o-viewport { width: 800px; }
		
	
	body {
		width: 100%;
		box-shadow: none;
	}

}	
/************************************************************************************
MEDIA RESPONSIVE 768 - All Videos Stack
*************************************************************************************/

@media screen and (max-width: 768px) {


	@viewport { width: device-width; zoom: 1.0; }	
	@-ms-viewport { width: 768px; }
	@-o-viewport { width: 768px; }
		

	body {
		width: 100%;
		box-shadow: none;
	}
/*--- leftcol content CENTERED, including FOOTER ---*/	
	#content-www #breadcrumb, #leftcol, .logodesc, #sidebar, #footer   {
		width: 90%;
	}
/*--- search results ---*/
	.search-box {
		width: 120px;
	}
	#leftcol .gs-result img.gs-image, #leftcol .gs-result img.gs-promotion-image {
		max-width: 60px;
		height: auto;
	}

/*--- This image size keeps enlarged graphics at correct ratio ---*/
	#leftcol img {
	max-width: 640px;
	height: auto;
	}

/*--- remove last child ---*/
	#breadcrumb, #breadcrumb ol li a, #breadcrumb, #breadcrumb ol li:last-child a {
		font-weight: normal;
	}
	#breadcrumb ol li:first-child a {
		font-weight: 700;
		}
	#breadcrumb ol li:last-child a {
		display: none;
		}
/*--- blog specific removes line separators ---*/
body#blog #breadcrumb ol li:last-child {
		display: none;
		}

/*--- expanding lists, airing out ---*/	
	#leftcol ul.list li, #leftcol #recentposts li, #leftcol ul.multiCol li, #leftcol ul.read li {
			padding-bottom: 10px;
		}
/*--- HOME-PHOTOBOX #FLAG ---*/
	#photobox-new {
		float: left;
		padding: 0;
		width: 100%;
	}
	#photobox-new .photoboxLeft-new, #photobox-new .photoboxRight-new {
		float: left;
		width: 95%;
		}
	#photobox-new .photoboxRight-new {
		margin: 30px 0 0 0;		
		}
	#photobox-new .photoboxStandard-new {
		width: 100%;
		background: url(../gif/bkg-video.gif) repeat-x;
		}	
/*--- ALL OTHER PHOTOBOX #FLAG, Overflowing at 100% is because images have been enlarged(?) ---*/
	#photobox {
		float: left;
		padding: 0;
		width: 100%;
	}
	#photobox .photoboxLeft, #photobox .photoboxRight {
		float: left;
		width: 95%;
		padding-top: 10px;
		}
	#photobox .photoboxStandard {
		width: 100%;
		height: auto;
		background: url(../gif/bkg-video.gif) repeat-x;
	}	
	.photoboxStandard .photobox-image {
		width: 130%;
		height: 100%;
		float: left;
		clear: left;
	}
	.photoboxStandard .photobox-image {
		float: left;
		clear: left;
	}
	.photoboxStandard .text-block {
		float: left;
		width: 100%;
	}
	#photobox h3.custom-box {
		font-size: 1em;
	}
	#photobox .photoboxStandard p.location-box, #photobox .photoboxFeature p.location-box, p.watch-box, p.read-box {
		font-size: 1em;
		line-height: 1.4em;
	}
/*--- ENGLARGE IMAGES 768 ---*/
	#leftcol #photobox img {
		width: 120%;
		height: 120%;
		margin: 0 0 10px 0;
		box-shadow: 15px -15px 0 4px #61a8b4;
	}
	#photobox-new img {
		width: 115%;
		height: 115%;
		box-shadow: 15px -15px 0 4px rgba(97, 168, 180, 1.0);
	}
/*--- Sidebar Large Graphics ---*/
	#sidebar .sidebar-large-graphic img {
		width: 250px;
		height: auto;
	}
/*--- Recommended Read ---*/
	#sidebar .img-link img {
		width: 250px;
		height: auto;
	}
/*--- Attorney Directoru ---*/
	#sidebar .rollover-plain img {
		width: 250px;
		height: auto;
		margin-bottom: 20px;
	}
	#flyer div, #flyer div:last-child {
		float: left;
		clear: left;
		width: 95%;
		margin-bottom: 25px;
		padding-right: 0;
	}
/*--- last setting for these images that operate on percentage of leftcol ---*/
	#flyer img {
		width: 250px;
		height: auto;
	}
	#leftcol .books-entry img {
		width: 250px;
		height: auto;
		clear: left;
		padding-bottom: 10px;
	}

	#brochure img {
		width: 120%;
		height: 120%;
	}
/*--- Stack brochure  books ---*/
	#brochure p, #red-buy-now, p.books {
		float:left;
		clear: left;
	}
}

/************************************************************************************
MEDIA RESPONSIVE 730 - 4 images stack
*************************************************************************************/

@media screen and (max-width: 730px) {

	@viewport { width: device-width; zoom: 1.0; }	
	@-ms-viewport { width: 730px; }
	@-o-viewport { width: 730px; }


/*--- home and FAQ photos stacking images ---*/
	#leftcol table.all-photos td {
		display: block;
		float: left;
		padding-right: 0;
		padding-top: 5px;
		width: 50%;
	}
	#leftcol table.all-photos td.full-width {
		display: block;
		float: left;
		width: 100%;
	}
}
	
/************************************************************************************
MEDIA RESPONSIVE 625
*************************************************************************************/

@media screen and (max-width: 625px) {

	@viewport { width: device-width; zoom: 1.0; }	
	@-ms-viewport { width: 625px; }
	@-o-viewport { width: 625px; }

/*--- MAX image affects all videos to, so just the large images in Legislating, statistics, will need to occur in blog too ---*/	
	body#legislating #leftcol img, body#statistics #leftcol img {
		max-width: 100%;
		height: auto;
	}
	#fatal-chart {
	margin: 15px 0;
	}
	#fatal-chart td {
	padding: 0 0 10px 10px;
	}
	#fatal-chart th {
	padding: 10px 0 5px 10px;
	}
/*--- Chart text all aligns top ---*/	
	#leftcol table th, #leftcol table td {
		vertical-align: top;
	}

}

/************************************************************************************
MEDIA RESPONSIVE 601 - Most common Pad - Forms Stack, Chart fonts rise
*************************************************************************************/

@media screen and (max-width: 601px) {

	@viewport { width: device-width; zoom: 1.0; }	
	@-ms-viewport { width: 601px; }
	@-o-viewport { width: 601px; }


/*--- RELATIVE POSITION all wrappers to keep logodesc from overlapping elements ---*/	
	#contentwrapper, #footerwrapper {
		top: 130px;
		left: 0;
	}
/*--- leftcol content CENTERED, including SIDEBAR and FOOTER ---*/		
	#content-www #breadcrumb, #leftcol, .logodesc, sidebar, #footer {
		width: 90%;
	}
	#content-www #breadcrumb ol li:nth-child(4) a {
		display: none;
	}
/*----------------------------------------------------------
START TABULAR CHARTS 2023 except images, home and dogs 
NO MORE TABLES - Combine #chart and #chart-gray shared features
-----------------------------------------------------------*/	

	/* Force table to not be like tables anymore */
	#chart table, #chart thead, #chart tbody, #chart th, #chart td, #chart tr,
	#chart-gray table, #chart-gray thead, #chart-gray tbody, #chart-gray th, #chart-gray td, #chart-gray tr {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	#chart thead tr, #chart-gray thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
    #chart tr, #chart-gray tr {
      margin: 0 0 .6rem 0;
    }
    #chart td:first-child, #chart-gray td:first-child {
		/* Behave  like a "row" */
		border-top: 0;
	}
 
/*--- Light Gold Tables - Delicate Lines, quite tedious because th/td are changing places ---*/			
	#chart tr {
      border-top: 1px solid #8c857d;
    }
	#chart td:last-child {
      border-bottom: 1px solid #e0dfd3;
    }
	#chart td {
		/* Behave  like a "row" */
		border: 1px solid #e0dfd3;
		border-bottom: 0;
		position: relative;
		padding-left: 50%;
		background: white;
	}
	#chart td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 0;
		left: 0;
		width: 45%;
		height: 100%;
		white-space: nowrap;
		font-weight: bold;
		padding: 5px 10px 0 7px;
		background: #f4f3e7;
	}
	/* Label the data */
	#chart td:before { content: attr(data-title);}


/*--- Light Gray Tables - Delicate Lines, quite tedious because th/td are changing places ---*/				
	#chart-gray tr {
      border-top: 1px solid #898989;
    }
	#chart-gray td:last-child {
      border-bottom: 1px solid #d2d2d2;
    }
	#chart-gray td {
		/* Behave  like a "row" */
		border: 1px solid #d2d2d2;
		border-bottom: 0;
		position: relative;
		padding-left: 50%;
		background: white;
	}			
	#chart-gray td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 0;
		left: 0;
		width: 45%;
		height: 100%;
		white-space: nowrap;
		font-weight: bold;
		padding: 5px 10px 0 7px;
		background: #ededed;
	}
	/* Label the data */
	#chart-gray td:before { content: attr(data-title);}




/*--- LOSING MY MIND, if two or less TRs, font remains small in mobile. No clue as to why ---*/	
#chart th, #chart td, #chart-gray th, #chart-gray td {
  font-size: .95em;
}
#chart caption, #chart-gray caption {
  font-size: .95em;
  text-align: left;
}
#chart td:before, #chart-gray td:before {
  font-size: 1.1em;
}
	

/*--- Remaining non-image table - Stay the same with some design adjustments ---*/	

	table.statchart, table.simple {
	padding: 0;
	margin: 20px 0 25px 0;
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
	border: 0px solid red;
	background-color: white;
	}
	table.statchart th, table.statchart td, table.simple th, table.simple td {
	display: block;
	width: 93%;
	float: left;
	clear: left;
	font-size: .95em;
	line-height: 1.5em;
	margin: 0;
	padding: 10px 10px;
	border-bottom: 1px solid #e0dfd3;
	}
	table.statchart th, table.simple th {
		background: #f4f3e7;
	}	
	table.statchart td, table.simple td {
		background: white;
	}

/*----------------------------------------------------------
END TABULAR CHARTS 2023 except images, home and dogs 
-----------------------------------------------------------*/	


/*--- Double Columns all STACK ---*/	
	#leftcol .colLeft, #leftcol .colRight {
		float: left;
		clear: left;
		width: 95%;
		padding-right: 0;
		margin: 20px 0 0 0;
		padding: 0;
		border: none;
	}
	#leftcol .model-ordinance, #leftcol .noted-ordinance {
	font-weight: 500;
	}
	#leftcol .join-extended {
	width: 90%;
}

#leftcol .top-nav a:link, #leftcol .top-nav a:visited {
    font-size: 1.1em;
    }
    
/*--- Final footer menu, no children removed, copyright LEFT aligned ONLY ---*/
	#footer, .footermenu ul {
	padding-left: 0;
	padding-right: 0;
	}
	#footer .copyrightmenu ul {
	padding-left: 0;
	padding-right: 0;
	width: 100%;
	}
	#footer .copyrightmenu ul li a {
		float: left;
		width: 100%;
		font-weight: 500;
		display: block;
		border-right: none;
		padding: 12px 0;
		border-bottom: 1px solid #cccccc;
	}
	#footer  .left, #footer .right {
		width: 100%;
	}
	#footer #subscribe-footer {
		margin: 10px 0 0 0;
		padding: 8px 0;
		width: 100%;
	}
	#footer p.copyright, #footer p.copyright a:link, #footer .copyrightmenu ul li a:link {
		font-size: .95em;
	}
	#footer p.copyright {
	line-height: 1.5em;
	}
	#footer p.modified {
		font-size: .89em;
	}
}

/************************************************************************************
MEDIA RESPONSIVE 525 - Gray Search Bar
*************************************************************************************/

@media screen and (max-width: 525px) {

	@viewport { width: device-width; zoom: 1.0; }	
	@-ms-viewport { width: 525px; }
	@-o-viewport { width: 525px; }

/*--- overall UL, the box ---*/
/* Display the dropdown */
	ul#myTopnav.topnavresponsive {
		width: 93%;
	  }
/*--- Gray bar Search Replacement ---*/
	#graybackground .graybackground1, #graybackground .graybackground3 {
		display: none;
	}
	#graybackground .graybackground4 {
		display: visible;
	}
/*--- show mobile search ---*/
	#mobileshow {
		display: block;
	}
	input#search-focus.formbox {
		width: 90%;
	}
	#photobox-new .photoboxStandard-new, #photobox .photoboxStandard {
		width: 98%;
		}

/*--- last setting for these images ---*/
	#flyer img {
		width: 225px;
	}
	#leftcol .books-entry img {
		width: 225px;
		clear: left;
		padding-bottom: 10px;
	}
	#brochure img {
		width: 115%;
		height: 115%;
	}
/*--- SPECIALIZED HOME ---*/
	#leftcol p.home {
		padding-bottom: 10px;
	}
/*--- ALL UL 100% ---*/
	#leftcol ul.list, #leftcol ul, #leftcol ul.multiCol, #leftcol #blog ul, #leftcol #blog ul.space, #sidebar ul.sidebar, .donation {
		padding-right: 0;
		margin-right: 0;
		width: 100%;
	}
/*--- ALL OL 90-95% ---*/
	#leftcol ol {
		padding-right: 0;
		margin-right: 0;
		width: 90% !important;
	}
	#leftcol #footnote ol {
		width: 95% !important;
	}
/*--- Quoteboxes float left at full width ---*/
	.quotebox-about, .quotebox, .quotebox-dax {
		float: left;
		clear: both;
		width: 100%;
		padding: 15px 0;
		margin: 0;
		background: none;
		border: 0;
	}
/*--- Last reviewed flips to left ---*/	
	#leftcol .last-reviewed {
		float: left;
		clear: left;
		padding: 0;
		margin: 10px 0 0 0;
		}
	#leftcol h1, #leftcol h2, #leftcol h3 {
		clear: left;
		}
		#leftcol h3 {
		line-height: 1.5em;
		}
/*--- Not flipping down because of relative setting ---*/	
	.noted-ordinance, .model-ordinance {
	display: none;
	}

}

/************************************************************************************
MEDIA RESPONSIVE 480
*************************************************************************************/

@media screen and (max-width: 480px) {

	@viewport { width: device-width; zoom: 1.0; }	
	@-ms-viewport { width: 480px; }
	@-o-viewport { width: 480px; }	


/*--- overall UL, the box ---*/
/* Display the dropdown */
	ul#myTopnav.topnavresponsive {
		width: 93%;
	  }

/*--- all fonts rise - MOBILE BROWSERS ADJUST ALL FONTS AT RANDOM, anything inside DIV is rendered smaller ---*/
	body, p { 
	font-size: 1.05em !important; 
	line-height: 1.65em; 
	}
	#leftcol .uw-text { 
	font-size: 1.05em !important; 
	line-height: 1.65em; 
	}
	.left li, .right li { 
	font-size: 1.15em !important; 
	}
	.left, .right { 
	float: left;
	clear: left;
	}
	body p.smalltight {
	font-size: .89em !important;
	line-height: 1.65em; 
	font-style: italic;
	}
	body#home #logo .logodesc {
		float: left;
		margin: 0 0 85px 0;
		padding: 0 0 40px 25px;
		font-style: italic;
		clear: left;
	}
	.premium {
	font-size: .95em;
	font-weight: 500;
	}
	body#blog .logodesc, body#statistics .logodesc, body#dangerous .logodesc, body#legislating .logodesc, body#victim .logodesc, body#safe .logodesc, body#about .logodesc, body#blank .logodesc {
		display: none;
	}
	#contentwrapper, #content-www {
		clear: left;
	}
	/*--- Reposition all wrappers to static ---*/	
	body#home #contentwrapper, body#home #footerwrapper, body#blog #contentwrapper, body#statistics #contentwrapper, body#dangerous #contentwrapper, body#legislating #contentwrapper, body#victim #contentwrapper, body#safe #contentwrapper, body#about #contentwrapper, body#blank #contentwrapper, body#blog #footerwrapper, body#statistics #footerwrapper, body#dangerous #footerwrapper, body#legislating #footerwrapper, body#victim #footerwrapper, body#safe #footerwrapper, body#about #footerwrapper, body#blank #footerwrapper {
		position: static !important;
	}


/*--- 480 and on for mega content, leftcol and BLOG ---*/	
	#contentwrapper {
		padding-top: 0;
		margin-top: 0;
		width: 100%;
	}
	#leftcol {
		padding-top: 0;
		margin-top: 0;

	}
/*--- multiple blockquotes, this captures nearly all, see below for blog ---*/
	#leftcol blockquote, body#blog #leftcol blockquote.plain, body#blog #leftcol blockquote {
		margin-left: 30px;
		margin-right: 30px;
	}
/*--- special case fonts increase size ---*/
	h4.related {
    margin-bottom: 0;
	}
	h3.home {
	font-size: 1.2em;
	}
	#photobox-new h3.custom-box-new, #photobox h3.custom-box, h4.link {
	font-size: 1.05em;
	}
	#photobox .photoboxStandard .watch-box a {
	font-size: 1.05em;
	line-height: 1.5em;
	}
	#photobox .photoboxStandard p.watch-box {
	padding: 10px 0 4px 0;
	}
	#photobox .photoboxStandard .read-box a, #photobox .photoboxFeature .read-box a  {
	font-size: 1em;
	font-weight: 400;
	}
/*--- Decreasing margin top ---*/
	#red-donate {
	margin-left: 0;
	margin-top: 0;
	}
	.donation .center-button {
	margin-top: 0px;
	clear: left;
	}
/*--- Sidebar Large Graphics ---*/
	#sidebar .sidebar-large-graphic img {
		width: 275px;
		height: auto;
	}
/*--- special case fonts increase weight ---*/	
	#leftcol a.biglink:link, #leftcol a.biglink:visited, #leftcol a.biglink:hover {
	font-weight: 500;
	}
/*--- orange ordinances on BSL FAQ page ---*/
	#leftcol #orange {
	display: none;
	}
/*--- Remove nowrap lower left side spacing ---*/
#chart td:before, #chart-gray td:before {
		/* Now like a table header */
		white-space: normal;
		width: 40%;
		height: 100%;
	}
/*--- special case fonts decrease size ---*/
	#sidebar h4.graybar, #sidebar h4.greenbar, #sidebar h4.redbar, #sidebar h4.tealbar {
		font-size: 1.05em;
	}
/*--- Decrease/increase footer, position button text ---*/
	#footer .footermenu ul li a  {
	font-family: 'Fira sans', sans-serif; 
	font-size: 1.1em !important;
	line-height: 1.4em;
	font-weight: 500 !important; 
	}
	.documentation {
	font-size: .89em;
	}
	#footer .copyrightmenu ul li a {
	border-bottom: 1px dashed #cccccc;
	}
	#footer p.copyright, #footer p.modified {
		font-size: .91em !important;
		line-height: 1.5em;
	}
	#footer #subscribe-footer {
		padding: 8px 0;
		line-height: 1.3em;
	} 
	#subscribe-footer a, #subscribe-footer a:visited {
		font-weight: 500;
	} 

/*--- xmas banner mobile ---*/

	#advertisementwrapper, #advertisement, body#blog #advertisementwrapper, body#blog #advertisement {
	height: 125px;
	}
	
/*--- END xmas banner mobile ---*/

}


/************************************************************************************
MEDIA RESPONSIVE 430
*************************************************************************************/
@media screen and (max-width: 430px) {

	@viewport { width: device-width; zoom: 1.0; }	
	@-ms-viewport { width: 430px; }
	@-o-viewport { width: 430px; }


/*--- overall UL, the box ---*/
/* Display the dropdown */
	ul#myTopnav.topnavresponsive {
		width: 91%;
	  }

/*--- REMOVE BREADCRUMB ---*/
	#breadcrumb {
	display: none;
	}

}


/************************************************************************************
MEDIA RESPONSIVE 414
*************************************************************************************/
@media screen and (max-width: 414px) {

	@viewport { width: device-width; zoom: 1.0; }	
	@-ms-viewport { width: 414px; }
	@-o-viewport { width: 414px; }

/*--- RELATIVE POSITION for HOME wrappers to keep logodesc from overlapping elements ---*/	
	body#home #contentwrapper, body#home #footerwrapper {
		top: 180px;
		left: 0;
	}
	.logoimg img { 
		max-width: 220px;
		margin-left: -6px;
	}	

/*--- Home button background special requirement ---*/
	a#nav-home {
		margin-left: -6px;
	}

/*--- REDUCE HOME IMAGES ---*/

	#photobox-new img {
		width: 100%;
		height: 100%;
		box-shadow: 15px -15px 0 4px rgba(97, 168, 180, 1.0);
	}
	#photobox-new .photoboxStandard-new, #photobox .photoboxStandard {
		width: 97%;
	}

}

/************************************************************************************
MEDIA RESPONSIVE 390
*************************************************************************************/

@media screen and (max-width: 390px) {

	@viewport { width: device-width; zoom: 1.0; }	
	@-ms-viewport { width: 390px; }
	@-o-viewport { width: 390px; }

	.logoimg img { 
		margin-left: -8px;
	}	


}

/************************************************************************************
MEDIA RESPONSIVE 375
*************************************************************************************/


@media screen and (max-width: 375px) {

	@viewport { width: device-width; zoom: 1.0; }	
	@-ms-viewport { width: 375px; }
	@-o-viewport { width: 375px; }

	.logoimg img { 
		max-width: 215px;
	}

}


/************************************************************************************
MEDIA RESPONSIVE 360
*************************************************************************************/

@media screen and (max-width: 360px) {

	@viewport { width: device-width; zoom: 1.0; }	
	@-ms-viewport { width: 360px; }
	@-o-viewport { width: 360px; }


	.logoimg img { 
		max-width: 205px;
	}
/*--- Home button background special requirement ---*/
		a#nav-home {
		margin-left: -8px;
	}

}

/************************************************************************************
MEDIA RESPONSIVE 355
*************************************************************************************/

@media screen and (max-width: 355px) {

	@viewport { width: device-width; zoom: 1.0; }	
	@-ms-viewport { width: 355px; }
	@-o-viewport { width: 355px; }


	.logodesc {
		position: relative;
		top: 50px;
		left: 0;
	}	
	.logodesc {
		width: 90%;
		margin: 49px 25px 0 23px;
		padding: 15px 0 30px 0;
	}

/*--- STACK IMAGES ---*/	
	#leftcol table.all-photos  {
		margin-left: auto;
		margin-right: auto;
	}
	#leftcol table.all-photos td {
		float: left;
		clear: left;
		width: 100%;
		text-align: center;
	}
	.logoimg img { 
		max-width: 200px;
		height: auto;
		margin-left: -10px;
	}		
	
	.graybackground4 {
	margin-right: 10px;
	}
	.container img {
		float: right;
		position: absolute;
		top: 5px;
		left: -10px;
	}
	/*--- Remove size increase and background offset shadowbox ---*/
	#photobox-new .photoboxStandard-new, #photobox .photoboxStandard {
		width: 95%;
	}
	#photobox img {
		max-width: 105%;
		height: auto;
	}
	#photobox-new img {
		max-width: 90%;
		height: auto;
	}

}


/************************************************************************************
MEDIA RESPONSIVE SMALLEST 320 and BELOW
*************************************************************************************/

@media screen and (max-width: 320px) {

	@viewport { width: 320px; }
	@-ms-viewport { width: 320px; }
	@-o-viewport { width: 320px; }


	/*--- overall UL, the box ---*/
/* Display the dropdown */
	ul#myTopnav.topnavresponsive {
		width: 88%;
	  }
	  
/*--- RELATIVE POSITION for HOME wrappers to keep logodesc from overlapping elements ---*/	
	body#home #contentwrapper, body#home #footerwrapper {
		top: 200px;
		left: 0;
	}	
	.logoimg img { 
		max-width: 170px;
		height: auto;
		margin-left: -10px;
		padding-top: 9px;
	}		


/*--- multiple blockquotes, this captures nearly all ---*/
	#leftcol blockquote, body#blog #leftcol blockquote.plain {
		margin-left: 15px;
		margin-right: 15px;
	}	
}

/************************************************************************************
MEDIA RESPONSIVE SMALLEST 300
*************************************************************************************/

@media screen and (max-width: 300px) {

	@viewport { width: 300px; }
	@-ms-viewport { width: 300px; }
	@-o-viewport { width: 300px; }

	#content-www {
		width: 99%;
	}
	
	/*--- overall UL, the box ---*/
/* Display the dropdown */
	ul#myTopnav.topnavresponsive {
		width: 88%;
	  }
	  
/*--- RELATIVE POSITION for HOME wrappers to keep logodesc from overlapping elements ---*/	
	body#home #contentwrapper, body#home #footerwrapper {
		top: 220px;
		left: 0;
	}	
	
	.container img {
		display: none;
	}
	.logoimg img { 
		max-width: 200px;
		height: auto;
		margin-left: -10px;
		padding-top: 4px;
	}	
}

/************************************************************************************
Larger font size for landscape mode
*************************************************************************************/

@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
/* your CSS to target only landscape mobile users */
	
	body, p { 
	font-size: 1.05em !important; 
	line-height: 1.65em; 
	}
	
	/*--- expanding lists, airing out ---*/	
	#leftcol ul.list li, #leftcol #recentposts li, #leftcol ul.multiCol li, #leftcol ul.read li {
			padding-bottom: 10px;
		}

	#leftcol li, #leftcol li a, .left li, .right li {
		font-size: 1.05em !important; 
	}
	/*--- must be 100% for mobile ---*/	
	#leftcol #subnav ul {
		width: 100%;
	}
	#leftcol #subnav ul li {
		font-size: 1em !important; 
	}

	#chart th, #chart td, #chart-gray th, #chart-gray td {
	  font-size: .98em;
	}
	#chart caption, #chart-gray caption {
	  font-size: .98em;
	}

	table.statchart th, table.statchart td {
	font-size: .98em;
	}
	#footer .copyrightmenu ul li a {
	font-size: 1em !important;
	}
	
	#footer p.copyright, #footer p.modified {
		font-size: .89em !important;
	}
	#footer .footermenu ul li a  {
	font-size: 1.1em !important;
	line-height: 1.4em;
	}

	#footer #subscribe-footer {
		padding: 8px 12px;
		line-height: 1.3em;
	} 
}