<!DOCTYPE HTML>
<html>
	<head>
	<meta charset="UTF-8">
	<title>Embedded Style Sheet</title>
	<style>
		
		#myFakeElement { color:red ; }
		
		body { 
			color:#666666;
			background-color:#FFFFFF;
			font-family:Verdana,Arial;
			margin: 0px;
			background-image: linear-gradient(to bottom, #eeeeee, #ffffff);
			background-attachment: fixed;
		}
		
		#wrapper {
			display: grid;
			grid-auto-rows: minmax(0px, auto);
			grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);
		}	
		 
		#redbar {
			background-color: #BA1C21;
			grid-column: 1 / -1;
			grid-row: 1 / 2; 
		}
		
		#greybar {
			background-color: #424242;
			grid-column: 1 / -1;
			grid-row: 2 / 3;
		}
		
		 * { 
			box-sizing: border-box; 
		}	
			
		main {
			background-color: #FFFFFF;
			grid-column: 2 / -2;
			grid-row: 4 / 5;
			padding-top: 1px;
			padding-bottom: 1px;
			padding-left: 2em;
			padding-right: 2em;
			display: block;
		}
			
		header {
			background-color:#BA1C21;
			color:#FFFFFF;
			font-family:Georgia;
			grid-column: 2 / -2;
			grid-row: 1 / 2;
		}
		
		header a:link {
			color: #FFFFFF;
			text-decoration: none;
		}	
		
			
		h1 {
			line-height:240%;
			background-image: url("dixie4images/dsu.jpg");
			background-position: right;
			background-repeat: no-repeat;
			padding-left: 0.5rem;
			height: 72px;
			margin: 0;
		}
		
		h2 {
			color:#424242;
			font-family:Georgia;
		}
		
		h3 {
			color: #BA1C21;
		}
		
		dt {
			color:#BA1C21;
			font-weight:bold;
		}
		
		nav {
			background-color: #424242;
			grid-column: 2 / -2;
			grid-row: 2 / 3;
			font-weight:bold;
			position: sticky;
			top: 0;
		}
		
		nav a { 
			text-decoration: none;
			color: #FFFFFF;
			text-align: center;
			padding: 1rem 0rem;
			display:block;
			transition: background-color 0.5s;
		}
		
		nav ul {
			list-style-type: none;
			margin: 0;
			padding: 0px 0px 0px 0px;
			display: flex;
			flex-flow: row nowrap;
		}
		
		nav a:hover {
			background-color:  #BA1C21;
		}		
		
		nav ul li {
			width: 100%;
		}
		
		video {
			float: right;
			margin-left: 2em;	
		}
		
		form {
			display: grid;
			grid-template-rows: auto;
			grid-template-columns: 200px 1fr;
			grid-gap: 0.75rem;
			width: 100%;
		}
		
		input textarea {
			font-size: 1rem;
			padding: 10px;
			color: #666666;
			background-color: #fafafa;
			border: none;
			
		}
		
		input textarea:focus {
			outline:none;
			background-color:#f0f0f0;
		}	
		
		label {
			padding: 10px;
			text-align: right;
		}	
		
		#mySubmit {
			width: 10rem;
			grid-column: 2 / -2;
		}
		
		table {
			border: 1px solid #424242;
			width: 100%;
			border-collapse: collapse;
			margin: 0 auto;
		}
		
		th {
			padding: 5px;
			border: 1px solid #424242;	
		}	
		
		td {
			padding: 5px;
			border: 1px solid #424242;	
			text-align: center;
		}	
		
		tr:nth-of-type(even) {
			background-color: #F3F3F3;
		}	
		
		.text {
			text-align: left;
		}
		
		.dsu {
			color:#BA1C21;
			font-size:1.2em;
		}
		
		.clear {
			clear:both
		}
		
		footer {
			background-color: #FFFFFF;
			grid-column: 2 / -2;
			grid-row: 5 / 6;
			font-size: .70em;
			font-style: italic;
			text-align: center;
			padding: 1em;
		}
		
		section {
			float: left;
			width: 33%;
			padding-right: 1rem;
		}
		
		#homehero, #studenthero, #facultyhero {
			
		}	
		
		#homehero {
			height: 300px;
			background-image: url("dixie4images/homehero.jpg");
			grid-row: 3 / 4;
			grid-column: 1 / -1;
			background-size: cover;
			background-position: center;
		}
		
		#studenthero {
			background-image: url("dixie4images/studenthero.jpg");
			grid-row: 3 / 4;
			grid-column: 1 / -1;
			height: 300px;
			background-size: cover;
			background-position: center;
		}
		
		#facultyhero {
			background-image: url("dixie4images/facultyhero.jpg");
			grid-row: 3 / 4;
			grid-column: 1 / -1;
			height: 300px;
			background-size: cover;
			background-position: center;
		}
		
		#alumnihero {
			background-image: url("dixie4images/alumnihero.jpg");
			grid-row: 3 / 4;
			grid-column: 1 / -1;
			height: 300px;
			background-size: cover;
			background-position: center;
		}
		
		#shophero {
			height: 300px;
			background-image: url("dixie4images/shophero.jpg");
			grid-row: 3 / 4;
			grid-column: 1 / -1;
			background-size: cover;
			background-position: center;
		}
		
		
		@media only screen and (max-width: 1100px) {
			#wrapper {
			display: grid;
			grid-auto-rows: minmax(0px, auto);
			grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 150px)) minmax(0px, 1fr);
		}	
		}
		
		
		@media only screen and (max-width: 900px) {
			nav {
				grid-row: 2 / 3;
				grid-column: 1 / -4;
			}
			
			nav ul {
				flex-flow: column nowrap;
			}
			
			#homehero {
				grid-row: 2 / 3;
				grid-column: 5 / -2;
				height: auto;
			}

			#facultyhero {
				grid-row: 2 / 3;
				grid-column: 5 / -2;
				height: auto;
			}

			#studenthero {
				grid-row: 2 / 3;
				grid-column: 5 / -2;
				height: auto;
			}
			
			#alumnihero {
				grid-row: 2 / 3;
				grid-column: 5 / -2;
				height: auto;
			}
			
			#shophero {
				grid-row: 2 / 3;
				grid-column: 5 / -2;
				height: auto;
			}

			section {
				float: none;
				height: 100%;
				padding-right: 0px;
			}
			
			video {
				float: none;
				margin: 0;
				width: 100%;
				height: auto; 
			}
		}	
		
		@media only screen and (max-width: 600px) {
			
			header h1 {
				background-image: none;
				text-align: center;
			}
			
			nav {
				grid-row: 2 / 3;
				grid-column: 1 / -2;
			}
			
			#homehero {
				display: none;
			}

			#facultyhero {
				display: none;
			}	
			
			#studenthero {
				display: none;
			}	
			
			#alumnihero {
				display: none;
			}	
			
			#shophero {
				display: none;
			}	
		}	
	</style>
	</head>
	<body>
	</body>
</html>