body  {background-color: #BDB764; }

	p { font-size: 18px; font-family: 'Lora', serif;}

#maincontent { width: 80%;
              margin-left: auto;
			  margin-right: auto;
			  height: 700px;
			  background-color: #FFFFC4;
			  border: 4px solid black;
			  border-radius: 10px;
			  box-shadow: 3px 3px 3px black;

}

header {
        background-color: #2A4E6E;
		height: 100px;
        padding-top: 3px;
        padding-bottom: 5px;
        font-family: Lucida Handwriting, serif;
        text-align: center;
        color: white;
		border-bottom: 4px solid black;
		text-shadow: 3px 3px 3px black;}

nav { float: left;
     width: 150px;
     height: 510px;
	 color: white;
	 background-color: #FFFFC4;
	 margin-right: 10px;}

nav ul {list-style-type: none;}

nav li {padding: 10px;
     background-color: #8B744D;
     color: white;
	 border: 0px solid #8B744D;
	 border-radius: 10px;
     text-shadow: 3px 3px 3px black;
     margin-top: 1em;	 }


nav a { text-decoration: none;
       color: white;}

nav a:link { color: white;}


footer {background-color: #FFFFC4;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 0.70em;
font-style: italic;
float: bottom;
}

main {
     background-color: #FFFFC4;
     height: 537px;
	 margin-top: 10px;
     margin-left: auto;
	 margin-right: auto;
	 padding-left: 10px;
	 padding-right: 10px;
     }



header, main, nav, footer {display: block;}

.cats-content {display: none;
               position: absolute;
			   left: 95px;
			   top: 170px;}

.cats-content li {padding: 10px;
               background-color: #8B744D;
               color: white;
               border: 1px solid black;
			   }

.cats:hover .cats-content{ display: block;}

#photo1 { display: block; margin-left: auto; margin-right: auto; height: 300px; width: 400px; border: 4px solid black;
			  box-shadow: 3px 3px 3px black;}

#mainh1 {text-align: center; font-family: 'Gloria Hallelujah', cursive;}

#rightcol { height: 583px;
overflow: auto;
margin-left: 150px;
}

#logo { display: block;
margin-left: auto;
margin-right: auto;}

h2 {text-align: center; font-family: 'Domine', serif;}

h3 {font-family: 'Domine', serif;}

table {border-collapse: collapse;
border: 1px solid black;}

th, td {padding: 10px;
border: 2px solid black;}

.theader { background-color: #B58A59;}

.trow1 { background-color:#C8A474; }

.trow2 { background-color: #EDD292;}

dt { font-family: 'Domine', serif; font-size: 19px;
}

dd { font-family: 'Trirong';
}
#backtotop { margin-left: auto; margin-right: auto; }

#form1 {width: 500px; margin-left: auto; margin-right: auto; text-align: left;}

label { float: left; display: block; text-align: right; width: 8em; padding-right: 10px; }

input, textarea { display: block; margin-bottom:1em;}

#submitbutton{ margin-left: auto; margin-right: auto;}


#sub-menu {
   position:absolute;
   display:none;
}

.figcats {
   border: 4px solid black;
   box-shadow: 3px 3px 3px black;
   margin-bottom: 10px;
}

#ourcats:hover  > ul{
   display:inline-block;
}

.shop { width: 40%;
float: left;
padding: 1em;}

.catimage { display:block; margin-left:auto; margin-right: auto; height: 250px; width: 250px;border: 4px solid black;
			  box-shadow: 3px 3px 3px black; }

#catimage2 { display: block; border: 4px solid black;  box-shadow: 3px 3px 3px black;  }

#gallery { position: relative; }

#gallery ul { width: 300px;
			  list-style-type: none;
              margin-left: 50px;}

#gallery li { display: inline-block;
			  padding: 10px; }

#gallery img { border-style: none; }

#gallery a { text-decoration: none;
			 color: #333;
			 font-style: italic; }

#gallery span { display: none; }

#gallery a:hover span { display: block;
						position: absolute;
						top: 10px;
						left: 400px;
						text-align: center; }

#adoptablegallery { position: relative; }

#adoptablegallery ul {
	margin-left: 100px;
	list-style-type: none; }

#adoptablegallery li { display: inline-block;
	padding: 10px; }

figcaption { text-align: center;}

#description {border: 1px solid black; width: 300px; margin-left: 200px;}

svg { display: block; margin-left: auto; margin-right: auto; }
svg circle { fill: brown; }
#circle1:hover { fill: black; }
#circle2:hover { fill: black; }
#circle3:hover { fill: black; }
#circle4:hover { fill: black; }

figure { position: relative; top:10px;}
figure img { margin-left: auto; margin-right: auto; display: block; height: 300; width: 300;}
figcaption { text-align: center; }

#cat2 { display: none; }
#cat3 { display: none; }
#cat4 { display: none; }

@media only screen and (max-width: 1024px){
	body { margin: 0; padding: 0; background-color: white; background-image: none; }

	#maincontent { width: auto; min-width: 0; margin: 0; height: auto;}

	h1 { margin: 0; text-align: center; font-size: 2em; line-height: 200%;}

	nav { float: none; width: auto; margin-left: 0; margin-right: 0; margin-bottom: 0; margin-top: 10px; height: 100px;}

	nav a {padding: 1em; border-style: none; font-size: 1.2em; }

	nav li {display: inline-block; margin-top: 0;}

	/* img { height: 200px; width: 300px; } */

	nav ul { margin: 0; padding: 0;}

	#rightcol{  height: auto; width: auto; margin: 0; padding-top: 0; padding-bottom: 0; padding-left: 1em; padding-right: 1em;
	font-size: 90%;}


	footer { margin: 0; }

	#description { margin-left: 120px;}

	#adoptablegallery ul{width: auto; min-width: 0; margin-left: auto;}
}

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

	#maincontent { height: auto; overflow: auto;}

	header { padding-top: 5px; padding-bottom: 5px; }

	#logo { width: auto; }

	h1 { font-size: 1.5em; line-height: 120%;}

	nav a { display: block; padding: 0.2em; font-size: 1.3em;}

	nav li { display: block; }

	nav ul { text-align: left; }

	main { height: auto; width: auto; position: relative; top: 270px; }

	#rightcol { overflow: visible; height: auto; }

	footer { padding: 0; position: relative; top: 300px;}

	#photo1 { height: 200px; width: auto;}

	#description { margin-left: 100px;}

	#adoptablegallery ul { width: 375px; margin-left: 50px;}

	#adoptablegallery  li{ display: block;}


	#gallery ul { position: relative; left: 25px;}

	#gallery li { display: block;}

	#gallery a:hover span { display: block; left: 200px;}

    #ourcats:hover  > ul{display:none;}
}