/* Main style sheet for the Technology Photos part of the Scott Alumni website, Version 2018. 
	Initially copied from the 2016 HPS style sheet (on 2016-11-16 Wed), but adaptation for Tech photos 
	was not finished until much later (starting 2017-12-18 for 2018).  
	
	Each year folder will have its own CSS file, named styles.css 
	
	This CSS was last updated 
	2018-12-19 Tue
	by C Ingalls
*/

/* Note that color #D0E0FF is closest to Scott Blue, and was used as background in previous webpages. */

/* The Body is set to always show the vertical scroll bar, but horizontal only when needed. */
	body
	{
		text-align: center; 
		background-color: white; 
		max-width: 700px;
		margin: auto; 
		padding: 0;
		overflow-y: scroll; 
		overflow-x: auto; 
		font-family: "Lucida Sans Unicode", Verdana, Arial, sans-serif; 
		font-size: 1em;
	}

	p
	{
		text-align: left; 
		font-size: 100%; 
	}

	#OuterWrapper	
	{
		display: block; 
		margin: auto;
		text-align: center; 
	}

	h1
	{
		margin-top: 0; margin-bottom: 0.5em;
		font-size: 150%; 
	}
	h2
	{
		text-align: left;
		margin-bottom: 0.3em;
		font-size: 120%; 
	}

	hr
	{
		background-color: #D0E0FF;
		border: none;
		height: 3px;
	}

/*Navigation links for selecting previous or next or index.*/
	.DateNav
	{
		background-color: #D0E0FF;
		margin: auto; 
		margin-top: 20px;  margin-bottom: 20px; 
		width: 100%; 
		display: block; 
		clear: both; 
	}
	.DateNav div
	{
		display: inline-block; 
		width: 30%;
		text-align: center; 
		font-size: 100%;
		clear: both; 
	}
	.DateNav div:first-child
	{
		text-align: left; 
	}
	.DateNav div:last-child
	{
		text-align: right; 
	}
	.DateNav a, a:visited
	{
		color: black; 
		text-decoration: none; 
		font-weight: normal;
	}
	.DateNav a:hover
	{
		color: white; 
		text-decoration: underline; 
	}

	#MainContent
	{
		margin-left: 10px; 
		margin-right: 10px; 
	}

/*Event Item*/
	div.EventItem
	{
		border-top: solid 1px;
		padding: 10px;
		text-align: left;
		font-size: 100%;
	}
	div.EventItem a, a:visited
	{
		color: black; 
		text-decoration: none; 
		font-size: 100%;
		font-weight: normal;
	}
	div.EventItem a:hover
	{
		color: white; 
		text-decoration: underline; 
	}
	div.EventItem img
	{
		width: 200px;
		border: none; 
		margin-right: 10px;
	}
	div.EventItem div
	{
		display: inline-block;
		vertical-align: top;
	}

/*Phone, Address, Website*/
	.LocationDetails
	{
		overflow-x: auto;
		text-align: left;
		font-size: 100%;
	}
	.LocationDetails tr
	{
		vertical-align: top;  
		font-size: 100%;
	}
	.LocationDetails th
	{
		padding-right: 10px;  
		font-size: 100%;
	}
	.LocationDetails td
	{
		font-size: 100%;
	}

/*Block of photos*/
	#PhotoList
	{
	}
	#PhotoList div
	{
		width: 100%; 
		text-align: left;
		margin-top: 10px;
		border-top: solid 3px #D0E0FF;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	#PhotoList div:last-child
	{
		margin-bottom: 10px;
		border-bottom: solid 3px #D0E0FF;
		padding-bottom: 20px;
	}
	#PhotoList img
	{
		width: 100%; 
		display: block;
	}

	.hid
	{
		visibility: hidden;
	}

/*Footer area.*/
	#Footer
	{
		font-size: 80%;
		margin-top: 10px; 
		clear: both;
	}

/*The following is for small screen devices, like smartphones.  Inserted here 2017-12-29 Fri.*/
/* I commented-out this media query on 2017-12-30 Sat because the meta viewport tag in each webpage header is simpler and looks better. 
@media (max-device-width: 1200px) {
	body
	{
		font-size: 1.5em;
	}
	p
	{
		font-size: 1em; 
	}
	.DateNav
	{
		font-size: 140%;
	}
	.LocationDetails
	{
		font-size: 140%;
	}
	#Footer
	{
		font-size: 60%;
	}
}

*/