*{box-sizing: border-box;}
#wrapper {display: grid; grid-template-rows: minmax(0px, auto);
     grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);}

#greybar {background-color: #424242; grid-row: 2/3; grid-column: 1/9;}

#redbar {background-color: #BA1C21; grid-row: 1; grid-column: 1/9;}

#homehero {background-image: url(homehero.jpg);
     height: 300px; background-size: cover; background-repeat: no-repeat;
      background-position: center; grid-row: 3/4; grid-column: 1/9;}

body { background: linear-gradient(to bottom,#eeeeee,#ffffff);
     background-attachment: fixed; font-family: Verdana; margin: 0px;}

header h1 {background-image: url(dsu.jpg); background-position: right;
     background-repeat: no-repeat; background-color: #BA1C21;
      color:#FFFFFF; height: 72px; line-height: 240%; font-family: Georgia;
       margin: 0; padding-left: 0.5rem;}

nav { background-color: #424242; position: sticky; top: 0; font-weight: bold;
     grid-row: 2/3; grid-column: 2/8;}

header {grid-row: 1/2; grid-column: 2/8;}

h2 { color: #424242; font-family: Georgia;}

h3 { color: #BA1C21;}

footer { background-color: #FFFFFF; font-style: italic; font-size: small;
     text-align: center; padding: 1em; grid-row: 5/6; grid-column: 2/8;}

span.dsu { color:#BA1C21; font-size: 1.2em;}

dt { color:#BA1C21; font-weight: bold;}

#studenthero {grid-row: 3/4; grid-column: 1/9;
     background-image: url(studenthero.jpg); height: 300px;
      background-size: cover; background-repeat: no-repeat;
       background-position: center;}


#facultyhero {grid-row: 3/4; grid-column: 1/9;
     background-image: url(facultyhero.jpg); height: 300px;
      background-size: cover; background-repeat: no-repeat;
       background-position: center;}

main { grid-row:4/5; grid-column: 2/8; background-color: #FFFFFF;
     padding-top: 1px; padding-bottom: 1px; padding-left: 2em;
      padding-right: 2em; display: block;}

nav a { color: #FFFFFF; padding: 1rem 0rem; display: block;
     text-align: center;}

nav a:hover { background-color: #BA1C21;}

nav ul { list-style-type: none; margin-top: 0px; margin-left: 0px;
     margin-right: 0px; margin-bottom: 0px; padding-top: 0px; padding-left: 0px;
     padding-right: 0px; padding-bottom: 0px;
     display: flex; flex-flow: row nowrap;}

nav ul li {width: 100%;}

section {float: left; width: 33%; padding-right: 1rem;}

.clear { clear: both;}

header a {text-decoration: none; color: #FFFFFF;}

table {margin: 0; border: 1px solid #424242; width: 100%; border-collapse: collapse;}

td {padding: 5px; border: 1px solid #424242; text-align: center;}

th {padding: 5px; border: 1px solid #424242;}

.text {text-align: left;}

tr:nth-of-type(even) {background-color: #F3F3F3;}

@media only screen and (max-width: 1100px)
 {#wrapper { 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/5;} nav ul {flex-flow: column nowrap;}
  section {float: none; width: 100%; padding-right: 0px;} 
  #homehero{grid-row: 2/3; grid-column: 5/8; height: auto;} 
  #studenthero{grid-row: 2/3; grid-column: 5/8; height: auto;} 
  #facultyhero{grid-row: 2/3; grid-column: 5/8; 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/9;} #homehero{display: none;} 
 #studenthero{display: none;} #facultyhero{display: none;}}