/*  geraldpyork.com pntggal332233.css */

body 	{
                text-align:  center;
				background-color: #332233; 
				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:  yellow;
				border-width:  1px;
				border-style:  solid;	
				*/	                				
			}

			#container {

				max-width:  800px;			
				
				height:  100%;	
				margin-right:  auto ;
				margin-left:  auto ;
				margin-top:  0px;
				background-color:  #332233;				
				
				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;	    
            	*/	
			}
		 
/*   the ul id named navlist refers to each individual menu item.  */

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

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

/* the following selects any element named 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;
	}


/* 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;
		letter-spacing:  1px;	
        text-decoration:  none;
 /* use the following style to make a pink border around the list items padding       
        border-color:  pink;
	    border-width:  1px;
	    border-style:  solid;
*/

}

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

			header {
				text-align:  center;
			}

			h1  {
				font-family: palatino-linotype, "Times New Roman", serif; font-size: 250%; 				
				color:  #ffffcc;	
				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;	
				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%;
				color:  #aa8208; 
				font-weight:  normal;				
				line-height:  1;
				letter-spacing: 1px;
				margin-top: 10px;
				margin-bottom:  10px;
				word-spacing:  .2em;
			}

			h4	{font-family:  palatino-linotype, 'Times New Roman', Times, serif; 	
				color:  #aa8208;
                font-size:  120%;
                font-weight:  normal;
                margin-top:  5px;
                margin-bottom:  5px;               		 				
			}

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

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

            p     {
				font-family:  Arial, sans-serif; 
                font-size: 100%; 
                color:  #f2f2f2; 
			}
            	
			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	{
	font-size: 140%;
}
h4  {
    font-size:  130%;
    margin-top: 5px;
    margin-bottom: 0px;
}

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	{font-size:  120%;
}
h4  {
    font-size:  110%;
}
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 500 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:  50%;
}

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


}