body { width:100%; 
	font-size: 1.000em;  /* base font 16px */
	font-family: Arial, Helvetica,  sans-serif;
	color: #000;
	padding:0;
	margin:0; 
	background:#FFF;   }  /*greenish beige D3D5A3*/

h1, h2, h3 {color: #336600;  /*dk green*/
	font-family: "Monotype Corsiva", "Freestyle Script", "URW Chancery L", "Apple Chancery", script; 
	font-weight:normal; } 

h1 { font-size: 1.8em; /* 29px */	 
	text-align:center;
	line-height:30px; }
	
h2 { font-size: 1.6em;	 /*26px*/
	line-height:30px;
	text-align:center; }
		
h3 { font-size: 1.45em;	/*22px*/
	text-align:center;  }
	   
#container {
	position:relative;
	padding:0;
      background-color: #D3D5A3;  }  	
      
#header { width:100%;
     background-color: #FFF;
     height:100%; 
     min-height:90px; }	
        
#logo {  /*inside header*/
	width:322px;
	display:block;
	padding:0 0 0 10px; }	
#logo a {
	position:relative;
	overflow:hidden;   } 
	
/* buy now btn menu -- see links */

#phone {
	height:50px;
	text-align:center;
      padding:15px 15px 8px;
	font-size:18px;
	font-family: 'arimo', sans-serif;
	color:#FF0000;  } 
      
#banner img {
 	display: block;  	/*removes space under img*/ }     

#content-wrapper1 {  /*column on ea side with pale green bg*/
	margin:0 auto;
	width:100%;  
      background-color: #D3D5A3;   }  /*pale greenish beige*/

#content-wrapper2 {width:75%;  /* column on ea side with paw prints*/
	clear:both;
	margin:0 auto;
	background:#fff; 
	border-radius:20px;
	background-image: url(https://www.petnpeopl.com/images/paw-print-bg3-min.jpg);
	background-repeat: repeat; }
		
	
#content {width:80%;  
	clear:both;
	font-size:112.5%; /*18px*/
	height:100%;
	margin:0 auto;
	background:#fff; }

	
/******************** Footer ******************/
#footer {   /*footer is inside container*/
	text-align:center;
	margin:0;
	width:100%;
	height:auto;
	color:#000;
	font-size:95%;
	padding:35px;
	overflow:hidden;
      background-color: #D3D5A3;  }
    
#footer a, a:visited {color:#000;
	font-weight: normal;
	text-decoration: none;
	font-size:110%;
	padding:0 10px;
	line-height:1.2; }   /*needed for legible tap size*/
#footer a:hover {color:#999; }
	
	
		/*******  Colors ******/	
.palegreen {background:#F4F4E8;} 
.dkgreen {background:#336600;}
.dkrgreen {background:#47512c;} 


/*****  FONTS  ********/ 

.smallfont {font-size:90%; font-family:Cambria, Georgia, serif; }
.medfont {font-size:100%; }
.largefont {font-size:120%; }
.exlargefont {font-size:130%; }
.exexlargefont {font-size:140%; }

/****** font types ******/

.mono-corsiva {font-family:'Monotype Corsiva', serif; 
	font-size: 125%; }
.cambria {font-family: Cambria, Georgia, serif; }

/******  SPECIAL FEATURES ********/

.notice { /*place inside box pad8*/
	clear:both;
	text-align:center;
	border:1px solid #999; 
	border-radius:20px; 
	background:#D3D5A3;
	box-shadow: 3px 3px 3px #999; }
	
	

.buynow { /*place in box 400 w exlg font for buy now*/
	clear:both;
	text-align:center;
	padding:12px;
	border:1px solid #999; 
	border-radius:20px; 
	background:#D3D5A3;
	box-shadow: 3px 3px 3px #999; }

.dropshadow { 
	box-shadow: 3px 3px 3px #999;  }

.gallery {     /* needs no media queries */
    text-align: center;  }
.galleryitem {
    margin:8px 0;
    display: inline-block;
    text-align: center; 
    vertical-align: top; }
    
 .galleryitem210 {   /*prod boxes on hm pg*/
 	position: relative; /* needed for pos button on bottom*/
 	width:210px;
 	height:620px;
      margin:8px 8px;
      font-size:90%;
      font-family: 'arimo', sans-serif;
      display: inline-block;
      text-align: center; 
      vertical-align: top;
      border:1px solid #999;
      border-radius:10px;
      box-shadow:1px 0 3px #999;   }   
   
/* BQ has a default margin of 40px and display block  add floats in html */
blockquote {  
    font-family: Georgia, serif;
    font-size: 95%;
    font-style: italic;
    width: 18.00em; /*290px*/
    margin: 0 auto 10px auto;
    padding: 20px;
    line-height: 1.45;
    position: relative;
    background:#F5F5F5; /* very lt gray */ 
    color: #383838;
    border:1px solid #ccc; 
	  border-radius:15px;   }
blockquote:before { /*for extra lg quotes*/
    display: block;
    padding-left: 10px;
    content: "\201C";
    font-size: 80px;
    position: absolute;
    left: -20px;
    top: -20px;
    color: #7a7a7a; }
blockquote cite {
		display:block;
    text-align:center;  }
blockquote cite:before {
    content: "\2014 \2009";  }
blockquote a {color:#1d62e2 !important;
		font-weight:500; }
blockquote a:hover {color:#999; }



			/*to align prod image to bottom of div but above button link */
.bottom { display:inline-block;   
	position:absolute; 
	bottom:50px;
	right:15%;   }

		/* use with box 450 for mobile meet jyl n patches hm pg etc */
.fancy-box {padding:15px; 
	min-width:280px;
	margin:0 15px; 
	border:1px solid #999;
	border-radius:10px; 
	box-shadow: 1px 0px 3px #999;}




/* ----------POSITIONING --------*/

.left {text-align:left;} 
.center {text-align:center;}
.right {text-align:right;}

.textbottom {vertical-align:text-bottom;}
.textmiddle {vertical-align:middle;}
.texttop {vertical-align:top;}
.textbaseline {vertical-align:baseline;}

.clearboth {clear:both;}
.clearleft {clear:left;}
.clearright {clear:right;}

/*-------PADDING MARGINS -----------*/

.pad5 {padding:5px; }
.pad8 {padding:8px; }
.pad8lrb {padding:0 8px 8px 8px;}

.pad10 {padding:10px; }

.pad12l {padding-left:12px; }
.pad12r {padding-right:12px; }
.pad12t {padding-top:12px; }
.pad12b {padding-bottom:12px; }

.mar12 {margin:12px; }
.mar12l {margin-left:12px; }
.mar12r {margin-right:12px; }
.marb12 {margin-bottom:12px; }
.mart12 {margin-top:12px; }

.mar8 {margin:8px; }
.mar8l {margin-left:8px; }
.mar8r {margin-right:8px; }
.marb8 {margin-bottom:8px; }
.mart8 {margin-top:8px; }

.mar20l {margin-left:20px; }
.mar20r {margin-right:20px; }
.marb20 {margin-bottom:20px; }


 /* ---------STYLING ------------*/
 
 img {border:0;
	max-width:100%; 
	height:auto;} /*preserves aspect ratio*/
	
.red {color: #ff0000; }
.white { background-color: #FFF; }

.heavy {font-weight:bold; }

.border {border:1px solid #999;}

.indent { margin-left:1.5em;
   margin-right: 1.5em; }
   
.indent2   { margin-left:2.0em;
   margin-right: 2.0em; } 
   
.cite {font-size:12px; } /*under text */

.caption  {color: #333;  /*charcoal under images*/
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	background: transparent;
	font-style:italic;
	font-size:85%; }
	
.caption  a {color: #333;  /*charcoal under images*/
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	background: transparent;
	text-decoration: underline;
	font-style:italic;
	font-size:85%; }
.caption  a:hover {color: #999; /*gray*/ font-size:90%; }  

.block {display:block;} /*to remove space under imgs*/

.bullet {
	color: #000; }

.nowrap {white-space:nowrap; } /* to keep words together */
	

	/*shorthand for images as backgrounds*/
/*background:url)images/#####3.jpg) top center no-repeat;	*/


		/*following keeps para at min width when images float L or R */
	/*P moves underneath the image.*/	
	/*don't use 'p after' or this won't work */
	/*this works on online but not when viewed on computer*/
p:before { content: ""; width:18.750em; /* 300px */ display:block; overflow:hidden;} 


.hr { height:2px;
	width:75%;
	background:#D3D5A3;
	margin: 25px auto; }
	
* {box-sizing:border-box; }/*to keep border padding inside of boxes*/
	
	
		.clearfix:before,
.clearfix:after {
  content: '\0020'; /* for IE<8  Older browsers do not support empty div */
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
.clearfix:after {
  clear: both; }

	
	/* add div around iframe with iframe-container class*/
	
.iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0; }
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%; }


	/* -----FLOATS --must be in pixels - imgs need width------  */

.floatright {float:right; }
.floatleft {float:left; }
.floatright300 {	float:right;	width:18.75em; }
.floatleft250 {	float: left;	width: 250px; }
.floatright250 {	float: right;	width: 250px; }
.floatleft200 {	float: left;	width: 22.22%; }
.floatright300 {	float: right;	width: 300px;}
   
/*--------BOXES---------*/
		
.box800 {width:800px; margin:0 auto; }	
.box700 {width:700px;	margin:0 auto; }
.box650 {width:650px;	margin:0 auto; }
.box600 {width:600px;	margin:0 auto; }
.box550 {width:550px;	margin:0 auto; }
.box500 {width:500px;	margin:0 auto; }
.box450 {width:450px;	margin:0 auto; }
.box400 {width:400px;	margin:0 auto; }
.box350 {width:350px;	margin:0 auto; }
.box300 {width:300px;	margin:0 auto; }
.box250 {width:250px;	margin:0 auto; }
.box200 {width:200px;	margin:0 auto; }
.box100 {width:100px;  margin:0 auto; }


/* --- Reg Links  keep above other links  same need to be listed in mult links ----*/
/*  do not need :link after a -  visited inherits a: color etc  */

.webm a:link, a:visited {color:#336600;
	font-weight: normal;
	background-color: transparent;
	text-decoration: underline;
	font-size:110%;
	line-height:1.2; }   /*needed for legible tap size*/
a:hover {color:#999; }

a:link, a:visited {color:#336600;
	font-weight: normal;
	background-color: transparent;
	text-decoration: underline;
	font-size:110%;
	line-height:1.2; }   /*needed for legible tap size*/
a:hover {color:#999; }

a.buynowbtnmenu:link, a.buynowbtnmenu:visited {  /* buy now button in top menu*/ 
	display:inline-block;  
	width:110px; 
	border-radius:6px; 
	text-align:center; 
	padding:5px; 
	margin:15px 15px 10px;
	color:#fff;  	
	font-weight: normal;
	background-color:#336600;  
	text-decoration: none;
	font-size:100%;
	line-height:1.2; }   /*needed for legible tap size*/	
a.buynowbtnmenu:hover { color:#ccc; }

a.button:link, a.button:visited { color:#fff;    /* buy now button hm pg*/
	display:inline-block; 
	width:105px; 
	border-radius:6px; 
	text-align:center; 
	padding:5px; 
	margin:5px;
	position:absolute;
	bottom:2px;
	left:20%;		
	font-weight: normal;
	background-color:#336600;  
	text-decoration: none;
	font-size:90%;
	line-height:1.2; }   /*needed for legible tap size*/	
a.button:hover { color:#ccc; }


		/*------  responsive menu needs Jquery.js  script.js 
		   menu and caret files loaded plus jquery.js and script.js link in  head
		    and https on jquery link. ---*/
	
#cssmenu { /*width cannot be 100% due to icon and buy btn on each end*/
  font-family:  Arimo, Verdana, Geneva, sans-serif;
  font-weight:bold; 
  line-height: 1.2;   /*needed for legible tap size*/
  text-align: center; 
  margin:0; 
  padding:0;  } 	
#cssmenu > ul {
  list-style-type: none;
  padding: 0;
  margin-top:10px;  }
#cssmenu > ul li#responsive-tab {
  display: none;
  /* Hide for large screens */   }
#cssmenu > ul li {
  display: inline-block;   }
#cssmenu > ul li.right {
  float: right;  } 
	  /*has sub drop down menu*/
#cssmenu > ul li.has-sub {
  text-align:left;
  position: relative; 
   	z-index:10; }
#cssmenu > ul li.has-sub:hover ul {
  display: block;   }
#cssmenu > ul li.has-sub ul {
  display: none;
  width: 320px;  /*width of drop down box*/
  position: absolute;
  margin: 0;
  font-size:90%;
  padding-left: 8px; /* indents sub menu items*/
  list-style-type: none;
  background: #fff;   /* BG under sub menu white */
  border-top:none;  } 
#cssmenu > ul li.has-sub ul li {   	/* has sub drop down links */
  text-align:left;
  display: block;  }
		  /*has sub font color weight n pad*/
#cssmenu > ul li.has-sub ul li a {  
  color:#000;  /* black*/
  font-weight:normal; 
  padding:4px; }  /*padding reduces double spacing*/
 #cssmenu > ul li.has-sub ul li a.active span,
 #cssmenu > ul li.has-sub ul li a:hover span {
 	color:#ff0000;  }
  		/*caret on top menu */
#cssmenu > ul li.has-sub > a {
  background-image: url(https://www.petnpeopl.com/images/caret-gray-lg.png);
  background-repeat: no-repeat;
   		 /*position of caret from left n bottom  gray top white btm*/
  background-position:88% -35%;   } 
#cssmenu > ul li.has-sub > a.active,   
#cssmenu > ul li.has-sub > a:hover { /*caret on top menu on mouse over  */
  background: url(https://www.petnpeopl.com/images/caret-gray-lg.png) no-repeat;
  background-position: 88% -35%;    }
#cssmenu > ul li a {  	 	/* main menu link pad n font size */
  font-size: 100%; 
  display: block;
  padding: 3px 1.5em 3px 5px;  /* pad between categories 2em is 24px Rt */
  text-decoration: none;
  color:#000;  }   /*font color */
#cssmenu > ul li a.active,  /*main menu hover link color */
#cssmenu > ul li a:hover {
  background:transparent;  
  color:#999;  }   /* font color on hover */


  /*----Mobile Media queries ---*/
  /* "menu"  in text and menu icon should appear below 600px */
@media (max-width: 600px) {
  #cssmenu > ul { 
     width: 100%; }
  #cssmenu > ul li#responsive-tab {
    display: block;  }
    /* menu icon img has one color on bottom and another on top */
  #cssmenu > ul li#responsive-tab a { 
    background: url(https://www.petnpeopl.com/images/menu-graytop-whitebtm.png) no-repeat; /* menu and icon*/
    background-position: 110% -10%;
    }  /* %from left margin  %from top*/ 
  #cssmenu > ul li#responsive-tab a:hover {
    background: transparent;  /* bg under Menu text */
    background-position: 110% -10%; }  
  #cssmenu > ul li {
    display: none;
    padding-left:10px;
    list-style-type: none;}
  #cssmenu > ul li.right {
    float: none; }
  #cssmenu > ul li.has-sub {
    position: relative; }
  #cssmenu > ul li.has-sub ul {
    display: block;
    position: static;
    width: 100%;
    background: #fff;  /* bg under sub menu white */
    border: none; }
  #cssmenu > ul li.has-sub ul li {
    display: block !important; }
  #cssmenu > ul li.has-sub ul li a span {   /*sub menu font color n padding*/
     color:#2A63A6;   /*royal blue*/  
    display: block;
    padding-left: 14px; }   
  #cssmenu > ul li.has-sub > a { 
    background-image: none; }
  #cssmenu > ul li.active {
    text-align:left; }
 					 }
/*----------Menu for desktop  ---------*/
/* Make sure they show even if hidden in mobile view by JS */
@media (min-width: 600px) {
  #cssmenu > ul > li.collapsed {
    display: inline-block !important;  }
  #cssmenu > ul ul li.collapsed {
    display: block !important; }
  }
 
	

/*========================MEDIA====================*/


	/* max 320 Smartphones portrait */
	/* leave 'device" out to be able to view on computer */
@media only screen and (max-width:320px) { 
body {font-size:98%;}
#content  {width:80%; }
#phone { height:18px;}
h1 {margin:0 auto; padding:10px 10px; font-size:1.250em; display:block; word-wrap:break-word; } /*18px*/
h2 {clear:both; font-size:1.125em; word-wrap:break-word;} /*16px*/
ul li {margin-left:0; font-size:0.875em; }  /*3px 14px*/
.box800,.box750,.box700,.box650,.box600,.box550,.box500,.box450,.box400,.box350,.box300{width:95%; }	
#form { margin:0}	
.floatright {float:none; text-align:center; width:100%; }
.floatleft {float:none; text-align:center;  width:100%; }
#header {min-height:200px; }

	}
          

	/* min320 x max480 Gen Smartphones/Nexus S portrait and landscape */
		/* leave 'device" out to be able to view on computer */
@media only screen and (min-width:320px) and (max-width:480px) {
body {font-size:98%;}
#content  {width:80%; }
#phone { height:18px;}
h1 {margin:0 auto;padding:10px 10px; display:block; word-wrap:break-word; } 
h2 {clear:both; word-wrap:break-word;} /*16px*/
ul li {margin-left:0; font-size:0.875em; }  /*3px 14px*/
.box800,.box750,.box700,.box650,.box600,.box550,.box500,.box450,.box400,.box350,.box300 {width:95%; }		
.floatright {float:none; text-align:center; width:100%; }
.floatleft {float:none; text-align:center;  width:100%; }
#form { margin:0; }
#header {min-height:200px;  }
}

/* min 481 x max 600 */
@media only screen and (min-width:481px) and (max-width: 600px) {
#header {min-height:200px;  } /* to allow space for menu wrap*/
body {font-size:95%;}
#content { width:85%;}
#phone { height:18px;}
h1 {clear:both; text-align:center; padding:10px 0; display:block; word-wrap:break-word; } 
h2 { text-align:center; word-wrap:break-word; margin-top:10px;} 
.box800,.box750,.box700,.box650,.box600,.box550,.box500,.box450,.box400,.box350,.box300 {width:90%; }
.floatright {float:none; margin:0 auto; width:100%; }
.floatleft  {float:none; margin:0 auto; width:100%; }
#form { margin:0; }	
}

	/* min 601 x max 767  TABLET  */
@media only screen and (min-width:601px) and (max-width: 767px) {
body {font-size:95%;}
#content { width:85%;}
#phone { height:18px;}
h1 {clear:both; text-align:center; padding:10px 0; display:block; word-wrap:break-word; } 
h2 { text-align:center; word-wrap:break-word; margin-top:10px;} 
.box800,.box750,.box700,.box650,.box600,.box550,.box500,.box450,.box400,.box350,.box300 {width:90%; }
.floatright {float:none; margin:0 auto; width:100%; }
.floatleft  {float:none; margin:0 auto; width:100%; }
#form { margin:0; }	
   }

	/* min 768 to max 1280 iPads (portrait) ----------- */
  @media only screen and (min-width : 768px) and (max-width : 1280px) 
and (orientation : portrait) { 
#content {width:90%;}  
h1 {margin:0;  text-align:center; word-wrap:break-word;}  

.floatright {float:none; margin:0 auto; width:100%; }
.floatleft  {float:none; margin:0 auto; width:100%; }
.box800,.box750,.box700,.box550,.box650,.box600,.box500,.box450,.box400,.box300 {width:90%; }
	 }