body {background-color:#FFFFFF; 
      color:#666666; 
      font-family:Verdana, Arial, sans-serif;
      background-image:linear-gradient(to bottom, #eeeeee, #ffffff);
      background-attachment:fixed;
      margin:0px;}

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

header a {color:#FFFFFF;
          text-decoration:none;
          grid-row:1/2;
          grid-column:2/8}

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

nav a {color:#FFFFFF;
       padding:1rem 0rem;
       display:block;
       text-decoration:none;
       text-align:center;
       transition: background-color 0.5s ease;}

a:hover {background-color:#BA1C21;
         text-align:center;}

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

nav ul li {width:100%;}

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

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

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

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

#wrapper {display:grid;
          grid-auto-rows:minmax(0px,auto);
          grid-template-columns:minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);
          background-color:#424242;}

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

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

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

h3 {color:#BA1C21;}

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

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

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

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

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

form {display: grid;
      grid-template-rows: auto;
      grid-template-columns: 200px 1fr;
      grid-row-gap: 0.75rem;
      width: 100%;}

input, text area {font-size: 1rem;
                  padding: 10px;
                  color: #666666;
                  background-color: #fafafa;
                  border-style: none;
                  :focus{outline: none;
                         background-color: #f0f0f0;}}

* {box-sizing:border-box;}

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

.clear {clear:both;}

@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;}
#homehero, #studenthero, #facultyhero, #alumnihero {grid-row:2 / 3;
grid-column:5 to 8;
height:auto;}
section {float:none;
         width:100%;
         padding-right:0px;}
.controls {float: none;
       margin: 0;
       width: 100%;
       height: auto;}}

@media only screen and (max-width:600px) {
h1{background-image:none;
   text-align:center;}
nav{grid-row:2/3;
    grid-column:1/-1;}
    
#homehero, #studenthero, #facultyhero, #alumnihero{ display:none;}}

table {margin:0 auto;
       text-align:center;
       border-color:#424242;
       border-width:100%;
       border-style:solid;
       border:1px;
       border-collapse:collapse;}

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

td {text-align:center;}

th {background-color: #FFFFFF}

.text {text-align:left;}

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

label {padding: 10px;
       text-align: right;}

#Submit {width: 10rem;
         column-gap: 2/3;}

.controls {float: right;
       margin-left: 2em;
       }