/* WRHS1965 newTest */

/*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-07.jpg");	
		
	/* Full height */
	height: 100%;
	
	/* Center and scale the image nicely */
	background-position:center center;
	background-repeat: no-repeat;
/* 	background-size: cover; */
	}
	
	* 
		{
		box-sizing: border-box;
		}
	
/*
	h1 
		{ 
	    padding: 3px 0 8px 0;
	    font-size: 1.6em;
		text-align: center;
	    color:#094E23;}
*/
		
    

    /* 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 
			{
			display: inline-block;
			float: left;
			padding: 10px 8px;
			text-align: center;
			font-size: 13px;
			z-index: 5px;
/* 					border: 1px solid yellow; */
			}
						
			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;

				}
				
			li.dropdown {
				  float: left;
				  overflow: hidden;
/* 				  		border: 1px solid red; */

				}
				
			
				
				.dropdown .dropbtn 
					{
					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 CONTENTS */  



	.ybPage {
						display:flex;
						position: absolute;
						z-index: 0;
						top: 115px;
						left: 40%;
						margin: 0px;
/* 						border: 1px solid red; */
	}

   .ybPage img {
			width: 100%;
		}
		
		   
    .main-content 
    	{
	    width: 95%;
	    margin: -10px auto 20px;
		/* border: 2px solid blue; */
	    height: 680px;
    	} 
    	
    	
    	

    	  
        .contentheading 
        	{
            text-align:center;
			/* border:1px solid yellow; */
            margin-top: 15px;
            width:95%;

            }
            
			.contentheading h1 
           		{
            	text-align:center;
            	color:rgba(0,0,0,0);font-size: 1.5em;          
            	}
            
			#classmates 
				{
				padding:10px 0;
				display:flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-around;
				width: 350px;
				border: 2px solid rgba(150,150,150,.5);
				margin: -28px 5% 0;
				height: 688px;
				overflow-y: auto;	          
				}  
            
            
				[class|="articlepg"] 
					{
					border: 1px solid rgb(100,100,100);
					color: rgb(10,10,10);
					background-color: rgba(240,240,240,.8);
					line-height: 1.2;
					width:150px;
					margin: 3px;
					padding: 4px;			
					}
				
				[class|="articlepg"]:hover
					{
					color: blue; 
					background-color: #dddddd;
					text-indent: 0; /* added the default value */			
					}
					
					
				[class|="articlepg"]:focus;
					{
/* 					border:1px solid red;			 */
					}
				
		
					span {
						display: none;
						
		
					}
			
					a:hover span {
						display:flex;
						position: absolute;
						z-index: 1;
						top: 110px;
						left: 40%;
						margin: 0px;
						border: 1px solid #666;
					}
					
					
						/*MEDIA QUERY*/
						@media only screen and (max-width : 1100px) 
							{
								
										#classmates 
											{
											margin-left: 3%;
											}
											
							a:hover span 
								{
								left: 46%;
								}
								}
					
					span img {
						width: 487px;
						height: 680px;
						
					}
			
/* END MAIN CONTENTS */ 
	


		


/*BEGIN FOOTER*/
	footer {
/* 		background-color: rgba(244,244,244,0.6); */
		padding: 20px 0 0;
		width: 100%;
		height: 75px;
		text-align: center;

}
/*END FOOTER*/





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

	/* 	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;
			}


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

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

				.links
					{
					margin-top:150px;
					}	
	
			    .main-content {
				    width: 99%;
				    margin: 0 auto 5px;
				    height: 680px;
			    }   
	/* 	END NAVIGATION */	

	
	/* 	START CONTENT */
			
        #classmates
        	{
			padding:0;
			display:flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-around;
			width: 300px;
			border: 2px solid rgba(150,150,150,0);
			margin:-40px 0 0 0;
			height: 533px;
			} 
      
            [class|="articlepg"] 
				{
				font-size: .9em;
				line-height: 1.1;
				width:136px;
				margin: 2px;
				padding: 3px;
				z-index: 0;		
				} 
      

				
					#ybPage {
						z-index: 0;
	/* 	END CONTENT */					
		}

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

.main-content 
	{
    width: 160px;
    margin: 2%;
    height: 680px;
    overflow: hidden;
/*     border:1px solid red; */
	}  

    #classmates
    	{
		justify-content: flex-start;
		width: 100%;
		border: none;
		margin-top:-70px;
		height: 530px;
		padding-right: 17px;
		box-sizing: content-box;
			          
		} 
		
		#ybPage {
			z-index: 0;
/* 			border:1px solid red; */
			margin: 0px 5px 0 -40px;
						

	}




}