/* geraldpyork.com  pntggalgray.css*/

body 	{
                text-align:  center;
				background-color: #808080; 
				font-family: arial; 
				font-size: small; 
				margin-top:  0px;
				height:  100%;					
			}

			#flex-container {

				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				
				margin-top: 0px;
				margin-bottom:  0px;
                margin-right:  auto;
                margin-left:  auto;

				/*  the following style is used to show the flex-container location 

				border-color:  green;
				border-width:  1px;
				border-style:  solid;	
                
                */
					                				
			}

			#container {

				max-width:  800px;			
				
				height:  100%;	
				margin-right:  auto ;
				margin-left:  auto ;
				margin-top:  0px;

				background-color:  #cccccc;				
				
				padding-top:  0px;
				padding-bottom:  20px;
				padding-right:  0px; 
				padding-left:  0px;

				/*The following style is used to show the container border 
				
				border-width:  thin;
				border-style:  solid;
				border-color:  orange;	   

                */ 
            		
			}
		 
/* id selector # selects only the anchor tags within the unordered list 
with the id 'navlist'  ie:  Home, Drawings, etc.  */

#navlist a {			
		font-size:  100%;
		color:  #333333;
		text-decoration:  none;	
        text-align:  center;  

	/*	border-width:  thin;
		border-style:  solid;
		border-color:  blue;	
    */     
	}

/* selects any element name ul.  ul refers to the unordered list taken as a whole - 
thus it surrounds all of unordered list.  */	
		
ul	{	      
        text-align:  center;		
		list-style-type:  none;
    /*
		border-width:  thin;
		border-style:  solid;
		border-color:  black;
    */			
	}	

/* li refers to each individual list item.  Thus the name of each menu choice.  */

ul li 	{	
        font-size:  100%;	
		display:  inline;  
		padding: 5px;
       
		margin-right:  38px;
		margin-left:  0px;
		margin-top:  0px;
		margin-bottom: 0px;
		letter-spacing:  1px;        	
		text-decoration:  none;
 /* use the following style to make a red border around the list items padding       
        	border-width:  1px;
	    	border-style:  solid;
		    border-color:  red;
        */
}

ul li a:hover {
		text-decoration: none;
	}
			header {
				text-align:  center;				
			}

			h1  {

				font-family: palatino-linotype, "Times New Roman", serif; font-size: 250%; 				
				color:  #1a1a1a;	
				font-weight: normal; 
				letter-spacing:  3px;
				line-height: 1; 
				margin-top:  10px;
				margin-bottom:  2px;			
			}

			hr  {
				width: 300px;
				margin-top:  0px;
				margin-bottom:  0px;
				height:  1px;
				border-width:  0px;
				background-color:  gray;
				color: gray;
			}


			h2  {	
				font-family: palatino-linotype, "Times New Roman", serif;  font-size: 125%; 
				font-style:  italic;					
				/*color: #ffffcc;*/
				color:  #4d4d4d;
	
				font-weight: normal;	
				line-height:  1;	
				margin-top:  4px;
				letter-spacing: 2px;			
			}


			h3, h4	{font-family:  palatino-linotype, "Times New Roman", serif; font-size:  140%;
				text-align:  center;
				color:  #795c06; 
				font-weight:  normal;				
				line-height:  1;
				letter-spacing: 1px;
				margin-top:  10px;
				margin-bottom:  10px;
				word-spacing:  .2em;
			}


			li 	{font-family: Arial, sans-serif; font-size: 90%; color:  #ffffff;
            		}

			#caption	{  font-family:  Arial, sans-serif; 
                            font-size: 90%; color:  #1a1a1a;
				            text-align:  center;
			}

            p     {
				font-family:  Arial, sans-serif; font-size: 100%; color:  #404040; 
			}
            	
			img	{
				display:  block;
				margin-left:  auto;
				margin-right:  auto;
				margin-top:  20px; 
				margin-bottom:  20px;
				width:  100%;
				max-width:  500px;
				height:  auto;				

			/* The following style is used to show the img border 
				padding:  20px;
				border-width:  thin;
				border-style:  solid;
				border-color:  orange;
			*/
			}
        

footer	{	font-family: Arial, sans-serif; 
		font-size: 80%; 
		color: #999999;
		text-align:  center;	
	}	

			

/*If the browser window is 601px or more,
set the font-size of h1 to 280%, etc. */

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

h1	{
	font-size: 250%;
}
h2      {
	font-size: 125%
}
h3, h4	{
	font-size: 140%;
}

p	{
	font-size:  100%;
}

hr  {width: 35%;
}

ul li {font-size:  100%;
	margin-right:  38px;
}
}

/*  if the browser window is 600 px or smaller, 
set the size of the following elements as noted below. */

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

h1	{
	font-size: 210%;
}

h2      {font-size: 110%;
}

h3, h4	{font-size:  120%;
}

p	{font-size: 90%;
}

hr  {width:  40%;
}
li   {margin-right:  4px;
    padding: 3px;
}

#caption	{
	font-size:  80%;
}

ul li {font-size:  80%;
	margin-right:  30px;
}

}


/*  If the browser window is 400 or smaller, 
set the size of the following elements as noted below.  */

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

h1	{
	font-size: 170%;
}

h2  {font-size: 95%;
}

h3 	{
	font-size:  100%;
	}

h4  {
    font-size:  90%;
}

hr  {width:  60%;
	}

#caption{
    font-size:  80%;
}

ul li {font-size: 70%;
	margin-right:  15px;
    }

	}