/* Validated 07 FEB 2020 */
  /* Variable Declarations */
:root {
--black: #000000;
--red:   #ff0000;
--background: #ffffff;
--mainborder: #ff6600;
--orange: #fb4f14;
/* Below Not Used */
--white: #ffffff;
--bmainborder: #6a5acd;
--lbrown: #ffffcc;
--brmainborder: #ff6600;
--lgreen: #bef4be;
--gmainborder: #0af30a;

}

/* -----	Reset Styles start (from meyerweb.com) ----- */
html, body, div, span, h1, h2, h3, h4, h5, h6, p,
a, em, font, img, ul, li,
table {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-family: inherit; }
	table {border-collapse: collapse; border-spacing: 0;}
/* -----	Reset Styles end (from meyerweb.com) ----- */

/* ------------------------ FONT  ------------------------------ */
p	 {margin-bottom: 1em;}
p.p20 {width: 20em;}
.variant {color: var(--black); font-variant: small-caps;}
.asterisk {color: var(--red); font-weight: bold;}
p.mailerr {color: var(--red);}
p.sendsms {background-color: var(--lgreen); }
.underline {text-decoration: underline;}

h1 {font: normal 1.6em/2.0em Verdana, Arial, sans-serif;}
h1.bottom {font: normal 1.6em Verdana, Arial, sans-serif; margin-bottom: 20px;}
						 @media screen and (max-width: 667px) and (min-width: 320px)
						 				{h1.bottom {text-align: center;}}	
												

h1.caps {font: normal 1.6em/3em Verdana, Arial, sans-serif; font-variant: small-caps; margin: auto;}
h2 {font: normal 1.6em/1.6em Verdana, Arial, sans-serif;}
h2.margin {font: normal 1.6em/1.6em Verdana, Arial, sans-serif; margin: 0.3em 0 0.5em 0.5em;}
h2.border {font: normal 1.8em/1.8em Verdana, Arial, sans-serif; border: 2px solid var(--black); margin: 10px 0; padding-left: 5px;}
h2.caps {font: normal 1.6em/1.6em Verdana, Arial, sans-serif; font-variant: small-caps; margin: 0.3em 0 0.5em 0.5em;}
h2.contact {font: normal 1.5em Verdana, Arial, sans-serif; margin: 0.5em 0;}
h3 {font: normal 1.4em/1.8em Verdana, Arial, sans-serif; margin: 0.5em 0;}
h3.form {font: normal 1.4em/1.8em Verdana, Arial, sans-serif; margin: 30px 0;}
h3.centercaps {font: normal 1.4em Verdana, Arial, sans-serif; font-variant: small-caps; text-align: center;}
h3.didyouknow {font: normal 1.4em Verdana, Arial, sans-serif; margin: 1em 0 0.5em 0;}
h4 {font: normal 1.2em/1.2em Verdana, Arial, sans-serif;}
h5 {font: normal 1.0em/1.0em Verdana, Arial, sans-serif;}

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on August 6, 2012 03:09:27 PM America/New_York */
@font-face {
     font-family: 'RedressedRegular';
     src: url('/fonts/redressed/Redressed-webfont.eot');
     src: url('/fonts/redressed/Redressed-webfont.eot?#iefix') format('embedded-opentype'),
     url('/fonts/redressed/Redressed-webfont.woff') format('woff'),
     url('/fonts/redressed/Redressed-webfont.ttf') format('truetype'),
     url('/fonts/redressed/Redressed-webfont.svg#RedressedRegular') format('svg');
     font-weight: normal;
     font-style: normal;
}
h1.redressed  {font-family: RedressedRegular, Verdana, Arial, sans-serif; font-size: 2.2em;}
h1.caps 		  {font: normal 2em/2em RedressedRegular, Verdana, Arial, sans-serif; font-variant: small-caps; margin: auto;}
h2.redressed  {font-family: RedressedRegular, Verdana, Arial, sans-serif; font-size: 2.0em;}
h2.redressed1 {font-family: RedressedRegular, Verdana, Arial, sans-serif; font-size: 2.0em; border: 1px solid var(--black);}
h2.redressed2 {font-family: RedressedRegular, Verdana, Arial, sans-serif; font-size: 1.8em;}
h2.redressed3 {font-family: RedressedRegular, Verdana, Arial, sans-serif; font-size: 2.0em; margin: 0.5em auto;}
h2.redressed4 {font-family: RedressedRegular, Verdana, Arial, sans-serif; font-size: 1.8em; text-align: center;}
h3.redressed  {font-family: RedressedRegular, Verdana, Arial, sans-serif; font-size: 1.8em;}
h3.redressed1 {font-family: RedressedRegular, Verdana, Arial, sans-serif; font-size: 1.6em; text-align: center; text-decoration: underline;}
h4.redressed  {font-family: RedressedRegular, Verdana, Arial, sans-serif; font-size: 1.4em;}
h5.redressed  {font-family: RedressedRegular, Verdana, Arial, sans-serif; font-size: 1.2em;}

  /* HTML, WRAPPER, HEADER, FOOTER ---------- */
html {
	font-family:	Verdana, Arial, sans-serif; 
	color: var(--black);
	background-color: var(--background);
	font-size: 0.9em;
}

.wrapper {width: 98%;	margin: 1.5em auto; overflow: hidden;}
				 @media screen and (max-width: 1500px) and (min-width: 1025px)
				 				{.wrapper {width: 60%;	margin: 1.5em auto;}}
				 @media screen and (max-width: 1024px) and (min-width: 900px)
				 				{.wrapper {width: 70%;	margin: 1.5em auto;}}

.grid-1 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr  1fr;
  grid-template-areas:
  "headarea headarea"
  "pagetextarea pagetextarea"
  "navigation navigation"
  "footarea footarea";
}

/* HEADER start ---------- */
header {grid-area: headarea;}

.head {
  		display: flex;
			justify-content: center;
			align-items: center;
			margin: 2em 1em;
			}
			
.heada img {margin: 1em 0.5em 0 0; max-width: 100%; height: auto;}

.headb {padding: 1em 0 0 1em; border-left: 3px solid var(--black);}
.headb p h1 {font: normal 1.5em Arial,Verdana, sans-serif; font-weight: bold;}
.headb p {font: normal 0.9em Arial,Verdana, sans-serif; margin-top: -1em;}

.headc {
			 margin-left: auto;
			 display: flex;
			 justify-content: center;
			 align-items: center;
			 }
.headc a:link 	 {color: var(--orange); background-color: var(--background); border-color: var(--mainborder);}	 						  /* header unvisited link */		
.headc a:visited {color: var(--orange); background-color: var(--background); border-color: var(--mainborder);}	 						  /* header visited link */		

.headc a[href^="tel:"]:before {content: "\260e";margin-right: 10px;}

/* HEADER end ---------- */

/* CHRISTMAS START ---------- */
.xmasrow {display: flex;}

/* Create two equal columns that sits next to each other */
.xmascolumn {flex: 100%; padding: 10px 40px 0 0;}
/* CHRISTMAS END ---------- */

/* TEXT START ---------- */
.pagetextarea {grid-area: pagetextarea;}
					 
.pagetext {
  display: flex;
	justify-content:space-between;
	flex-flow: row wrap;
	background-color: var(--background);
	border: 3px solid var(--mainborder);
	border-radius: 5px;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
	margin: 1em 0;
}

.pagetextone, .pagetextone-2 {
	background-color: var(--background);
	border: 3px solid var(--mainborder);
	border-radius: 5px;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
	margin: 0.5em auto;
	width: 60%;
}
						 @media screen and (max-width: 600px) and (min-width: 320px)
						 				{.pagetextone {width: 98%;}}		

.pagetextone-2 {width: 90%;}

.pagetextone-3 {width: 100%; padding-left: 10px;}

.pagetextcol { width: 46%; margin: 0em 0.5em 0em 1em;}
						 @media screen and (max-width: 600px) and (min-width: 320px)
						 				{.pagetextcol {margin: 0.5em; width: 98%;}}		

.didyouknow {width: 80%; margin: 1em auto ;}

/* TEXT end ---------- */


/* NAVIGATION start ---------- */
.navigation {grid-area: navigation; margin-bottom: 20px;}

.nav {
  display: flex;
	gap: 10px;
	justify-content: center;
	flex-flow: row wrap;
}

.navboxes {
	flex: 1 1 90px; 	/* default values - grow shrink basis */
	height: 55px;
	padding: 5px 4px 0 4px;
	text-align: center;
	font-variant: small-caps;
}
/* NAVIGATION end ---------- */

/* FOOTER start ---------- */
footer {grid-area: footarea;}

.foot {
  display: flex;
	gap: 10px;
	flex-flow: row wrap;
	justify-content: space-evenly;
}
	
.foota, .footb, .footc {text-align: center; margin: 10px 0;}
.foota a {display: inline;}
.footb a {display: inline; text-decoration: underline;}

header, footer, .nav > div {
  background-color: var(--background);
  border: 3px solid var(--mainborder);
  border-radius: 5px;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
}
/* FOOTER end ---------- */

/* ANCHORS and LISTS start ---------- */

a {text-decoration: none; display: block; width: 100%; height: 100%;}
/* ----- display: block; width: 100%; height: 100% makes whole div clickable ----- */
a:link 		{color: var(--black); background-color: var(--background); border-color: var(--mainborder);}	 						  /* unvisited link */		
a:visited {color: var(--black); background-color: var(--background); border-color: var(--mainborder);}	 						  /* visited link */		
a:hover, .nav > div:hover 	{color: var(--black); background-color: var(--background); border-color: var(--black);}	/* hover link */
a:active 	{color: var(--black); background-color: var(--background); border-color: var(--mainborder);}	 							/* selected link */		

.foot a:hover	{color: var(--black); background-color: transparent; border: 1px solid var(--black);}										/* footer hover link */		

ul {width: 90%; margin: 0.5em 0 2em 2em;}
ul.caps {margin: 1em 0 0 1em;}
li {margin-bottom: 0.4em; list-style-type: square;}
li.caps {font-variant: small-caps; font-weight: bold; list-style-type: none;}

/* ANCHORS and LISTS end ---------- */

/* -------------------- FORMS & TABLES -------------------- */
/* Various Form Pages - START */
form {}
input:focus {outline: none;} /* prevents input box highlighting when selected */
textarea	{width: 20em; height: 10em; border: 2px solid var(--mainborder); border-radius: 5px;}
input[type=text], input[type=button], input[type=password], input[type=submit] {background-color: var(--background); border: 1px solid var(--mainborder); border-radius: 2px;}

input.btn, input.txt {
  margin: 0 0.7em 1em 0;
	padding: 0.5em;
  border: 2px solid var(--mainborder);
	}

input.txt {width: 20em;}

button {
			 background-color: var(--background);
			 border: 1px solid var(--mainborder);
			 border-radius: 2px;
			 }

/* Below are used in Mail pages */
.formpage {width: 45%; margin: 0.5em auto;}
					@media screen and (max-width: 600px) and (min-width: 320px)
								 {.formpage {margin: 0.5em; width: 98%;}}
								 
.formpage p input {  
	margin: 0 0.7em 1em 0;
	padding: 0.5em;
  border: 2px solid var(--mainborder);
	border-radius: 5px;
}								 

/* Various Form Pages - END */

/* Below are used in Accounts pages */
.accounts {width: 100%;}
						 @media screen and (max-width: 667px) and (min-width: 320px)
						 				{.accounts {width: 65%;}}		
.accounts input {padding: 0.3em; margin: 2em 0;}
						 @media screen and (max-width: 667px) and (min-width: 320px)
						 				{.accounts input {margin: 2em 0 1em 6em;}}		

.searchowners {padding: 1em 0 2em 0; border: 2px solid #000000; text-align: center;}
.searchowners input {margin-top: 2em;}

/* --------- table --------- */
table {
			table-layout: auto;
			width: 90%;
			margin: 1em auto;
			border-collapse: collapse;
			}
table th		{text-align: left; padding: 1em 0 0 2em; text-decoration: underline;}
table tr td {width: 50%; padding: 1em 0 1em 2em;}

/* Various Form Pages - END */					

/* A better looking default hr  */
/* hr box-sizing differences between Firefox and other browsers. */
hr {box-sizing: content-box; display: block;  border-bottom: 2px solid var(--mainborder);  margin: 1em 0;  padding: 0;}
/* hr {box-sizing: content-box; height: 2px; border: 0; color: rgb(205,133,63); background-color: rgb(205,133,63); margin: 0;}  */

/*  --------- IMAGES --------- */
/*  --------- To make images responsive --------- */
img	{max-width: 100%; height: 0 auto;}
.imgborder {border-radius: 40px;
width: 60%;
  margin: 10px auto;
  display: block;}




/*  --------- DOGS GALLERY --------- */
/* First the Grid  */
.gallery-grid {
  display: grid;
/*  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));	*/
    grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr));
	grid-gap: 1px;
  justify-items: center;
  margin: 10px 0;
  padding: 0;
}

/* The Images */
.gallery-img {
  width: 100%;
	height: 100%;
  object-fit: cover;
}
/* END DOG GALLERY  */

/* ---------- MISC ---------- */
.lefting  {float: left; shape-outside: circle(50%); margin: 0 10px 10px 0;}
.righting {float: right; shape-outside: circle(50%); margin: 0 0 10px 10px;}
.clear 		{clear: both;}
.center 	{text-align: center;}
.right		{text-align: right;}
.contactmenu {margin: 20px 0 40px 0;}

.margin1 {padding: 10px 4px 0 4px; text-align: center; font-variant: small-caps;}
.margin2 {padding: 1em 4em; font-variant: small-caps;}
.margin3 {text-align: center;}
.margin3 p {margin-top: 1.5em;}
.margin4 {padding: 1em 0 1em 1em;}
.margin5 {margin: 3em auto;}
.margin6 {padding: 0.3em 0 0.3em 0.3em;}
.margin7 {width: 100%; margin: 0 auto;}
.margin8 {margin: 1em 1.5em 3em 1.5em; text-align: justify;}

.spacer10	{height: 10px;}
.spacer20	{height: 20px;}
.spacer30	{height: 30px;}
.spacer40	{height: 40px;}
.spacer50	{height: 50px;}
.spacer60	{height: 60px;}

/* END MISC ---------- */

/* TEST BORDERS ---------- */
.testblack			{border: 2px solid #000000;}
.testgreen			{border: 2px solid #00ff00;}
.testblue				{border: 2px solid #0000ff;}