body  {background-color: #BDB764; }

	p { font-size: 18px;}

#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;}

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

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

h2 {text-align: center; }

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

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

#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; }

#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; }
						
@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;}	
}