/* WRHS1965 70TH BIRTHDAY BASH ATTENDEES */

/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

/*MAIN*/

body, html 
	{
	margin: 0;
	background-color: rgb(200, 200, 200);
	background-image: url("../img/wachMt-05.jpg");	
		
	/* Full height */
	height: 1200px;
	
	/* Center and scale the image nicely */
	background-position:center center;
	background-repeat: no-repeat;
	background-size: cover;
	}
	
	* 
		{
		box-sizing: border-box;
		}


    /* START HEADER */ 
    #header_container {

        background-image:url('../img/wachmt-bg_harvard.jpg');
        background-size:cover;
        background-position: center bottom;
        border-bottom:3px solid #003300;
        top:0; width:100%;
        height: 99px;
        z-index:0 ;       
        }

	    #topbar{
	        margin:4px auto 0;
	        z-index:0 ;
	        }       
	              
	    #logo img{
	        float:left;
	        margin: 4px 0 0 2%;
	        height: 80px;
	        background-color: rgba(255,255,255,.3);
	        border:3px solid rgba(120,120,120,.1);
	        border-radius: 5px;
	        box-shadow: 3px 6px 20px rgb(150,150,150);
	        }
        
		/* START NAVIGATION */
			nav {
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
				float: right;
				background-color: rgba(244,244,244,0.8);
				border-radius: 5px;
				margin: 36px 3% 0 0;
				padding: 2px 10px 2px 0;	
				z-index: 5px;	
				}
			
			
				
				#menu-icon 
					{
					display: hidden;
					width: 40px;
					height: 40px;
					background: #000000 url(../img/menu-icon.png) center;
					}
			
				a:hover#menu-icon 
					{
					background-color: #444;
					border-radius: 4px 4px 0 0;
					}
			
				nav ul 
					{
					list-style: inherit;
					}
			
					nav li 
						{
						/* border:1px solid red; */
						display: inline-block;
						float: left;
						padding: 10px 5px;
						text-align: center;
						font-size: 13px;
						z-index: 5px;
						}
						
					
			
				
					nav li .current 
						{
						background-color:rgba(100,100,100,0.3);
						border-radius: 3px;
						padding: 6px;
						}
				
					nav a
						{
						color: #333;
						text-decoration: none;
						}
					
					nav a:hover 
						{
						color:black;   
						}
				
					nav li:hover a 
						{ 
						background-color: black;
						color:white;
						padding: 6px;
						width: 50px;
						border-radius: 3px;
						}
			
			
						.dropdown {
							  float: left;
							  overflow: hidden;
							}
							
							.dropdown .dropbtn 
								{
								/* 	border:1px black solid; */
								display: inline-block;
								float: left;
								padding: 9px 6px;
								text-align: center;
								font-size: 13px;
								z-index: 5px;
								}
							
							.navbar a:hover, .dropdown:hover .dropbtn
								{
								background-color: inherit;
								}
							
							.dropdown-content 
								{
								display: none;
								top:75px;
								position: absolute;
								background-color: #f9f9f9;
								min-width: 185px;
								margin-left: -100px;
								z-index: 1;
								}
								
								.dropdown-content p
									{
									margin-top:12px;
									color:darkgreen;
									text-align: center;
									font-weight: bold;
									}
								
								.dropdown-content .current
									{
									background-color:rgba(100,100,100,0.3);
									border:1px solid rgba(50,50,50,0.6);
									}
							
							.dropdown-content a
								{
								float: none;
								color: black;
								padding: 12px 16px;
								text-decoration: none;
								display: block;
								text-align: left;
								}
							
							.dropdown-content a:hover 
								{
								background-color: #ddd;
								}
							
							.dropdown:hover .dropdown-content 
								{
								display: block;
								}
			
			/*   END NAVIGATION    */

	/* END HEADER */
	

    /* START MAIN CONTENTS */     
    .main-content 
    	{
	    width: 98%;
	    margin: 0 auto;
		/* border: 2px solid red; */

    	} 
    	
    	
    	h1, h2, h3, h4
    		{
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			}


    	  
        #contentheading 
        	{
	        margin: 8px auto;
            text-align:center;
			/* border:1px solid yellow; */
			border-radius: 5px;
			box-shadow: 5px 5px 12px 2px rgba(100,100,100,.4);
			background-color: rgba(220,220,220,.8);
			padding: 10px;
            max-width:700px;

            }
            
			#contentheading h1            		
            	{ 
				padding: 5px 0;
				font-size: 1.6em;
				text-align: center;
				color:#336633;
				} 
				
			#contentheading h2            		
            	{ 
				padding: 2px 0 18px;
				font-size: 1em;
				text-align: center;
				color:#444444;
				} 
				
				p span            		
            		{ 
	            	font-size: .9em;
					padding-left:7px;
					color:black;
					font-weight: bold;
					} 

				
			#contentheading p           		
            	{ 
				font-size: 1.1em;
				line-height: 1.3em;
				text-align: center;
				}  

		
		
		#columns
			{
		    margin: 20px auto;
		    border:1px solid #094E23;
		    padding: 7px;
			width:96%;
		    background-color: rgba(200,240,255,.4);
			display:flex;
			flex-wrap: wrap;
			justify-content: space-around;
		    }
		    #columns p 
		    
		    	{
				font-family: "Times New Roman", Times, Georgia, Palatino, serif;
				font-size: 1em;
				line-height: 1.2em;
				margin: 6px;
				}
				
			#columns a
		    
		    	{
				font-family: "Times New Roman", Times, Georgia, Palatino, serif;
				font-size: 1em;
				line-height: 1.2em;
				margin: 6px 2px;
				}
		    
		    
		    
		    		
		
		    #column1
		    	{
				width: 350px;
				border:1px solid grey;
				margin: 5px;
				padding:5px;
				background-color: rgba(220,220,220,.9);
				box-shadow: 5px 5px 7px grey;
				}           
		    #column2
		    	{
		        width: 350px;
		        border:1px solid black;
				margin: 5px;
				padding:5px;
				background-color: rgba(220,220,220,.9);
				box-shadow: 5px 5px 7px grey;
		        }
		    #column3
		    	{
		        width: 350px;
		        border:1px solid black;
				margin: 5px;
				padding:5px 0 0 5px;
				background-color: rgba(220,220,220,.9);
				box-shadow: 5px 5px 7px grey;
				padding: 10px;

		        }
		        
		        #column3 p 
		    
				 	{
					font-size: 1em;
					/* line-height: 1.15em; */
					margin-bottom: 8px;
					}
					
				#column3 h2 
		    
				 	{
					font-size: 1.2em;
					text-align: center;
					padding: 0;
					}
				#column3 h4 
		    
				 	{
					font-size: .9em;
					font-weight: 400;
					text-decoration: none;
					text-align: center;
					padding: 0;
					}
					

		        tr.row2
		        	{
					border:1px solid orange;
					margin: 2px 0 15px;
					}
					
					td.row2
		        		{

						border:1px solid orange;
						margin: 2px 0 15px;
						}
		

		
					.paynowbutton 
						{
							margin: 12px 34% 0;
						}
				
		/* END MAIN CONTENTS */ 
		
		
		/*START HOVER POPUP LINKS*/
		
			/*hoverpopups type 1*/
		
			.popup { color: #000;}
		
			.popup a, .popup a:visited {
				position: relative;
				display: ;
				width: 150px;
				line-height: 18px;
				text-align: left;
				margin: 0;
				color: #40007f;
				border: 0px solid #633;
				text-decoration: none;
				font-size: 15px;
				font-weight: ;
			}
		
			.popup a span {
				color: red;
				display: none;
			}
		
			.popup a:hover { 
				background-color: ; 
			}
		
			/* the IE correction rule */
			.popup a:hover	{
				color: #f00; 
				background-color: #e9e9e2;
				text-indent: 0; /* added the default value */
			}
		
			.popup a:hover span {
				display: block;
				position: absolute;
				z-index: 1;
				top: -160px;
				left: 100px;
				width: 180px;
				/* box-shadow: 3px 6px 10px rgb(100,100,100); */
				margin: 0px;
				color: #335500;
				font-weight: normal;
				text-align: left;
			}
		
		
			/*THUMBNAIL HOVERPOPUPS*/
		
			.thumbnail  {
				position: relative;
				float: left;
				padding: 5px;
				/*z-index: 0;*/
			}
		
			.thumbnail:hover {
				background-color: #e9e9e2;
				color: #335500;
				text-decoration: none;
			}
		
			.thumbnail span { /*CSS for enlarged image*/
				position: absolute;
				background-color: #e5e5e5;
				padding: 5px;
				border: 1px solid #666;
				visibility: hidden;
				color: black;
				text-decoration: none;
			}
		
			.thumbnail span img { /*CSS for enlarged image*/
				border-width: 0px; 
			
				/*padding: 2px;*/
			}
		
			.thumbnail:hover span { /*CSS for enlarged image on hover*/
				visibility: visible; 
			
				width: 200px;
				top: 5px; /* use IF IE6 style to correct IE6 positions of larger image relative to thumb */
				left: 300px;/*position where enlarged image should offset horizontally */
			}
		 /*END HOVER POPUP LINKS*/
		
		
		
		
		
		
		
		
		
		
		
		
			
		/* END MAIN CONTENTS */ 
	


		


/*BEGIN FOOTER*/
	#footer {
		margin: 0 auto 20px;
		background-color: rgba(244,244,244,0.9);
		padding: 15px;
		width: 35%;
		height: 50px;
		border: 1px solid black;
}

	#footer a {
		margin: 12px;
	}
/*END FOOTER*/



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

	/* 	START NAVIGATION */
	#menu-icon
		{
		display:inline-block;
		}

	nav 
		{
		background-color: rgba(0,0,0,0);
		}


		nav li 
			{
			width: 190px;
			padding:12px 5px;
			text-align: left;
			font-size: 18px;
			line-height: 1.6em;
			z-index: 5px;
			}


			nav ul, nav:active ul 
				{
				display: none;
				position: absolute;
				width: 220px;
				border: 3px ridge rgb(100,100,100);
				right: 20px;
				top:75px;
				z-index: 5px;
				}

			nav:hover ul {
				display: block;
				background-color: rgb(200,200,200);
				z-index: 5px;
				}
		
			.dropdown-content {
				  left:-80px;						  
				  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8);
				}
				
				.classmates
					{
					margin-top:-40px;
					}
					
				.fifty5th
					{
					margin-top:80px;
					}
					
				.sixtyth
					{
					margin-top:140px;
					margin-right:200px;
					}

				.links
					{
					margin-top:150px;
					}	
  
	/* 	END NAVIGATION */	

	
	/* 	START CONTENT */
	
			#columns
			{
			width:95%;
			
	
	/* 	END CONTENT */					
		}
		
		
		

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

	#footer {
		width: 380px;
}

}