/* WRHS1965 HOMEPAGE CSS */

/*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-bg_harvard.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:10 ;  
        position: fixed;     
        }

	    #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 8px;
					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 */ 


	/*BEGIN MAIN CONTENT*/
	
		#wrapper
	     	{
		    margin-top:25px; 
		    margin-bottom:10px;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 0;
		    } 

		    
			.bg-image {
			  /* The image used */
			  background-image: url("../img/wrhs65yb.jpg");
			
			  /* Add the blur effect */
			  filter: blur(2px);
			  -webkit-filter: blur(2px);
			
			  /* Full height */
			  height: 100%;
			
			  /* Center and scale the image nicely */
			  background-position:top right;
			  margin-top: 96px;
			  background-repeat: no-repeat;
			  background-size: cover;
			}
	
			a {
				color: #3399ff;
				}
			
			a:hover {
				color: #444;
				}	
		
			h1, h2, h3 {
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
				margin-left: 2%;
				text-align: left;
				color:#336633;	
			}
					
					
				h1 
					{
					font-size: 1.5em;	
					margin-bottom: -2px;
					}
					
				h2 
					{
					font-size: 1.1em;

					}
	
			main {

				min-width: 350px;
				margin:100px 20% 0 4%;
/* 				border:1px solid red; */
				z-index: -1;
		
			}
			
			#content {
				max-width: 800px;
			}
			
			
			#lblGreetings {
				z-index: -1;
				font-size: 1em;
			}
			
			#dtg {
				z-index: -1;
				font-size: .9em;
			}
	
			[class|="articlepromo"] {
				border-top: 10px solid rgb(0,100,0);
				color: rgb(10,10,10);
				line-height: 1.2;
				padding-top: .5em;
				z-index: -1;
	/* 			max-width: 800px; */
	
			}
			
			[class|="articlepromo"] h3 {
				color: #000;
				font-size: 1.2em;
				margin:0;
				z-index: -1;
			}
	
			[class|="articlepromo"] p {
				color: rgb(10,10,10);
				margin: 0 0 .5em;
				z-index: -1;
			}
		
	
			
			article {
				background-color: rgba(255, 255, 255, .8);
				padding: 0 8px 1px;
			z-index: -1;
			}
			
			article p {
				font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
				font-size: 1.1em;
				line-height: 1.1em;
				margin-bottom: 10px;
				z-index: -1;
				}
			
	
			
	/*END MAIN CONTENT*/

	/*BEGIN FOOTER*/

	#footer-container { 
		background:rgba(244, 255, 244, .8);  
		border:1px solid rgba(100, 155, 100, .4); 
		margin:20px 1% 40px; 
		z-index:1;
		border-radius: 5px;
		position:fixed;
		width:93%;
		}
		
	#footer {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		padding: 3px;		
		}
		
		#footer p{			
				font-size:1em;
				text-align: center;
				}
			
		.copyright {
			margin: 5px;
			padding: 8px;
			width: 180px;
			border-radius: 3px;	
						}			
						
			
		.elink	 {
			margin: 5px;
			text-align: center;
			padding: 8px;
			width: 140px;
			border-radius: 3px;	
			}

	/*END FOOTER*/



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

	body 
		{
		background-position: right 0;
		height: 1000px;
		}
		
		header 
		{ position: absolute;}

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

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


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


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

			nav:hover ul {
				display: block;
				background-color: rgb(200,200,200);
				}
		
			.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 */	

																						
		
		main {
			margin:150px 4% 0 4%;
			width: 400px;
		}
		
	}



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

	main 
		{
		margin:50px 4% 0 4%;
		width: 400px;
/* 		border: 2px solid yellow; */
		}  

	
	h1 {
		margin-bottom: -8px;
	}

	h3 
		{
		font-size: 1.4em;
		line-height: 1.3em;
		margin: 15px 0 ;
		}
	
		article p {
			font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
			font-size: 1em;
			line-height: 1em;
			margin-bottom: 10px;
			z-index: -1;
			}
		
    #header_container
    	{ height: 89px; }	
		
		#logo img
			{ height: 70px; }
	}
	
	
	
@media only screen and (max-width : 440px) {


	#wrapper
     	{
	    margin-bottom:100px;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 0;
	    } 
  
		    
	main 
		{
		margin:50px 4% 50px; 4%;
		width: 350px;
/* 		border: 2px solid red; */
		position: relative;
		}  
		    
	
	h1 {
		margin-bottom: -8px;
		font-size: 1.2em
	}
	

	h2 
		{
		font-size: 1.1em;
		line-height: 1.3em;
		margin: 4px 0 ;
		}
	
		
    #header_container
    	{
        height: 89px;
        }	
		
		#logo img
			{
			height: 70px;
			}
	
		
	
	
		/*BEGIN FOOTER*/

	#footer-container { 
		background:rgba(244, 255, 244, .8);  
		border:1px solid rgba(100, 155, 100, .4); 
		margin:20px 0; 
		z-index:1;
		border-radius: 5px;
		position:fixed;
		width:93%;
		}
		
	#footer {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		padding: 3px;		
		}
		
		#footer p{			
				font-size:.9em;
				text-align: center;
				}

}