/* CSS MARKWHITINGDAVIS.COM/WORDS/THIRST */


	
body {
	width: 100%;
	margin: 0 auto;
	background-color: #cdc1c3; 
	background-image:url('../images/autumn_leaves_bg.jpg');
	background-size: cover;
	background-position: center top;
	font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
	color: #665544;
	}

#header {
	position: relative;
	width: 100%;
	height: 100px;
	margin: 0 auto 10px;
	background-color: rgba(120,120,120,.2)	
	}

#header img{
width:190px;
	float: left;
	margin: 12px 0 0 1%;
	}
            
 
 /* START NAVIGATION */    
 nav {
    margin:10px 1% 0 0;
	float:right;              
    font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
    font-weight:lighter;
    }


	#menu-icon {
		display: hidden;
		margin-right: 10px;
		margin-top: 12px;
		width: 40px;
		height: 40px;
		background: black url(../images/menu-icon.png) center;
		}
		

    nav ul ul {
        display: none;
        z-index: 2;        
    	}

        nav ul li:hover > ul {                       
            display: block;
            }


    nav ul {
        margin: 0 auto;                       
        background: none;        
        list-style: none;
        position: relative;
        display: table;                
        width: 100%;                            
            }
    
/*
        nav ul:after 
            {
            content: ""; clear: both; display: block; 
            }
*/
    

        nav ul li 
            {
            display:inline-block;
			padding: 8px 2px; 
            line-height: 15px;
            }
            


                        
      nav li .current 
            {
            background-color: rgb(150,150,150);
            }

            nav ul li:hover {
                background-color: rgb(50,50,50);
            }
    
            nav ul li:hover a {
                color: #fff;               
            }
            
            
            
            
            

            nav ul li a {
                
				padding: 5px; 
                color: black;
                text-decoration: none;
                
            }


                nav ul ul {
                    background: none;
                    position: absolute; width:80px;
                    border-radius: 0px;
					margin-top: 6px;
					margin-left: -30px;
					}
                
              
                    nav ul ul li {                       
                        background: rgb(100,100,100);;
                        border: none;
                        text-align: center;
                        width:120px;
                        padding: 8px;
                        
                    }
                        nav ul ul li a {

                            color: #fff;
                        }	
                            nav ul ul li a:hover {
/*                                 background: #6c0000; */
                                
                            }



                ul.a-muse {                       
                        margin-left: -100px;                       
                    }
                    
                    li.a-muse {                       
                        width:170px;                        
                    }
                                        
                        nav ul ul li a {
                            color: #fff;
                        }
                        	
                        nav ul ul li a:hover {                                
                            }
                            
                            
                            
                nav ul ul ul {
                    position: absolute; left: 100%; top:0;
        }                 							
/* END NAVIGATION */ 


/* BEGIN CONTENT */

 
    .box {
	    background-color: rgba(240,240,240,.8);
	    margin: 6px auto 25px;
	    padding:0 12px;
	    width:95%;
	    max-width:1200px;
	    min-width: 500px;
	    height:750px;
	    border: 1px solid black;
	    overflow-x: hidden;
        overflow-y: auto;
    	}
    
    	.box h1 {
	    	font-size: 2em;
	    	text-align: center;
	    	color: black;
	    	margin: 18px 0 0 0;
	    	}
	    	
	    .box     h4 {
		    text-align: center;
			margin: 0 0 0 18px;
	}
	    	
		.box p {
			color: black;
	    	line-height: 1.2em;
	    	}
	    	
	    	
	    	
	    	
			.wrapper {
			  margin: 0 auto;
			  width: 100%;
			  display: grid;
			  grid-template-columns: 4fr 9fr;
			  grid-gap: 0px;
			}
			
				.sidebar {
				
				  grid-column: 1;
				  background-color: rgba(230,220,220,.6);
				  color: #fff;
				  font-size: 90%;
				  padding: 20px 10px;
/*
				  margin-top: 60px;
				  margin-bottom: 600px;
*/
				}
				
				p.author {
						margin: -12px 0 0 80px;
						font-size: .9em;
					}
				
				p.treasure-chest {
					 text-align: center;
				}
				
				.content {
				  background-color: white;
/* 				  background-image:url('thirst-img/petersham_unitarian.png'); */
				  background-size: contain, cover;
				  background-repeat: no-repeat;
				  grid-column: 2;
				  padding:0 24px;
				}
				
				blockquote {
				  margin: 0;
				  padding: 0;
				}
					
				
				img {
				  width:95%;
				  display: block;
				  margin: 0 auto;
				}
	
	
	
	figure {
    border: thin #c0c0c0 solid;
    padding: 5px;
    max-width: 900px;
    margin: auto;
}

		figure > img {
			width:100%;
		    max-width: 900px;
		    max-height: 600px;
		}
		
		figcaption {
		    background-color: #222;
		    color: #fff;
		    font: italic smaller sans-serif;
		    padding: 5px;
		    text-align: center;
		}
	
	
	
	    	

/* END CONTENT */  


/* BEGIN FOOTER */
            
	 #footer {
        margin: 0 auto;
        padding: .1px;             
        background-color: rgba(50, 50, 50, .8);
        border-radius: 5px;                
        width:80%;
		min-width: 350px; 
		text-align: center;                                                      
    }
    
     #footer p {
         color:white;
         font-size: .8em;
     }
/* END FOOTER */         
            



/*MEDIA QUERY*/
@media only screen and (max-width : 640px) {

	header {
		position: absolute;
	}

	#menu-icon {
		display:inline-block;
		}

		nav ul, nav:active ul { 
			display: none;
			position: absolute;
			padding: 15px 0;
			background: rgb(200,200,200);
/* 			border: 1px solid yellow; */
			right: 20px;
			top: 60px;
			width: 148px;
			border-radius: 4px 0 4px 4px;
			}
			
		nav:hover ul {
			display: block;
			}
			
		nav:hover ul ul {
			display: none;
			width:200px;
			}

		nav ul li {
			text-align: center;
			width: 100%;
			padding: 18px 0;
			margin: -9px 0;
			}
			
			nav ul ul li {
				text-align: center;
				width: 150px;
				padding: 18px 0;
				margin: 0;
				}

	
		nav ul:hover ul { 
			position: absolute;
			background: none;
			border: none;
			left: -120px;
			top: 0px;
			width: 25%;
			border-radius: 4px 0 4px 4px;
			}