/* geraldpyork.com  painting.css  */

body 	{

	background-color: #332233; 
	font-family: arial, sans-serif;   
	font-size: small; 
	margin-top:  0px;
	height:  auto;
	text-align:  center;
    margin: 0px;
					
}

.flex-container 	{

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
    margin: 0px;
    margin-top:  0px;
    margin-right: auto;
    margin-left:  auto;
    
/* the following style is used to show the flex-container location 

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


/* # is an ID selector and means - for all elements labeled with the id 'container,' apply the following style.	*/

#container  {

	text-align:  center;
	height:  auto;	
	width: 90%;
    max-width: 1177px;
	margin-top:  10px;
	margin-bottom:  0px;
	margin-right:  auto ;
	margin-left:  auto ;
			
	padding-top:  0px;
	padding-bottom:  10px;
	padding-right: 20px; 
	padding-left:  20px;
/*  this style is used to locate the border of the div class when needed 

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

h1  {

	font-family: palatino-linotype, "Times New Roman", serif; font-size: 280%; 				
	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: 150%; 
	font-style:  italic;					
	color: #ffffcc;
	
	font-weight: normal;	
	line-height:  1;	
	margin-top:  4px;
	letter-spacing: 2px;			
}


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


p	{font-family:  arial, sans-serif; font-size:  100%;				
				color:  #eeeeee; 
				font-weight:  normal;				
				line-height:  1;
				letter-spacing: 1px;
				word-spacing:  .5em;				
}

/* end of style for header, begin style for navlist.  */

a:hover {
		text-decoration: none;
	}


/*   the ul id named navlist refers to each individual menu item.  */

#navlist a {		
		font-size:  100%;
		color:  #eeeeee;
/*        	
        border-color: yellow;
	    border-width:  1px;
	    border-style:  solid;
*/

	}

/* 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-color:  pink;
        border-width:  1px;
        border-style:  solid;
*/
	}


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


li 	{		
		display:inline; 
		margin-right:  38px;
		margin-left:  0px;
		margin-top:  0px;
		margin-bottom: 5px;
		letter-spacing:  1px;	
        padding: 6px;

 /* use the following style to make a pink border around the list items padding       
        border-color:  pink;
	    border-width:  1px;
	    border-style:  solid;
*/


	}

#titleblock{
		margin:  auto;
	}


a:link {

	text-decoration:  none;
	color: #666666;
}


a:visited  {
	text-decoration:  none;
	color:  #666666;

}

a:hover  {
	text-decoration:  none;
	color:  #666666;

}


/*  For any div with the class name "thmbnail", the photos of Lamar, Z, and Lee, .flex-container
make the margin 0 px etc,    */

div.thmbnail  {

	margin:  8px;
	float:  left;
	right:  auto;
	width:  auto;  	
  	text-align:  center;

/*This style is used to show the div thmbnail with a pink border
	border-color:  pink;
	border-width:  1px;
	border-style:  solid;
*/
}


/*  display the image Lamar, Z, or Lee inside the thmbnail class inline with a margin of 20 pixels   */		


div.thmbnail img     {

  	display: inline;
  	margin: 20px;


/* This style is used to show the div thmbnail img with above rule.
It surrounds each photo of Lamar, Z, and Lee.

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

div.thmbnail a:hover img  {

}

#footer  {

	margin-top: 1em;
	font-family: arial, verdana, sans-serif;
	font-size: 80%; 
	color: white;
	clear:  left;
}


/*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%;
	}
p	{
	font-size:  100%;
}

hr  {width: 270px;
}

#navlist a {font-size:  100%;
}


}

/*  if the browser window is 600 px or smaller, 
set the font size of h1 to 200%, etc. */

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

h1	{
	font-size: 200%;
}

h2      {font-size: 100%;
}

p	{font-size: 90%;
}

hr  {width:  215px;
}

#navlist a {
        font-size: 11px;
}

li  {
    margin-right:  0px;
}
}