/*  page top  */				

		div.top { background-color: black; font-size: 0; padding: 5px 0; }        
		div.header{ color: black; background-color: #afc193; width: 100%; padding: 5px 0 5px 0; }
        header { color: black; background-color: #afc193; font-family: garamond, serif; width: 100%; text-align: center;  padding: 3px 0; font-size: 100%; display: inline;} 
        h1.header { padding: 0; margin: 0; font-weight: 300; display: inline; }
		img.hikes { float: left; display: inline; padding: 14px 0px 0 20px; }
		img.home { float: right; display: inline; padding: 8px 20px 0 0; }
        
/*  content  */
        body { background-color: white; }     
    	#map-canvas { display: inline; float: left; width: 65%; height: 400px; }
		article.hike { text-align: left; font-size: 95%; display: inline; float: left; padding: 5px 2%; width: 31%; height: auto; color: #4d4d4d; background-color: white; }	
        img.camera { vertical-align:middle; }
    	div.pics { width: 100%; display: inline-block; background-color: white; }
    	aside.pics {padding: 1%;  background-color: white; width: 350px; max-width: 98%; height: auto; display: inline-block; }
		hr { width: 85%; }
        h5.hike { margin: 0; display: inline; font-size: 95%; }
        
/*  NEW 5/25/22: add div.map to use BaseCamp map graphic instead of Google map; and can download gpx  */          
        div.map { display: inline; float: left; width: 65%; height: }        
        div.download { padding: 5px; }  
        h5.download { margin: 0; display: inline; }
        div.download a:link { color: black; text-decoration: none; }
        div.download a:visited { color: black; }
        div.download a:hover { color: brown; }	

/*  PRINT  */	        
        @media print 
        {
    		#map-canvas { width: 100%; }
            div.map { width: 100%; }
    		article.hike { display: inline; font-size: 85%; }
    		div.pics { display: inline; width 65%; font-size: 85%; }
    		aside.pics { display: inline; width: 30%; float: left; }
        }        
        
 /*  BREAKPOINT 550  */		
		@media (max-width: 550px) 
		{
    		div.top { display: none; }
            header { font-size: 90%; }
			img.hikes { display: inline; padding: 12px 0 0 15px; }  
            img.home { padding: 7px 15px 0 0; }
/*  shrink height to finger-navigate page on small screens  */            
			#map-canvas { width: 100%; max-height: 200px}
            div.map { width: 100%; height: auto; }
			article.hike { width: 96%; height: auto; }
            div.pics { font-size: 85%; }      
		}        

/*  BREAKPOINT 375  */		
		@media (max-width: 375px) 
		{
			header { font-size: 80%; }
            img.hikes { padding: 10px 0 0 10px; }  
            img.home { padding: 6px 10px 0 0; }
		}