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



header {background-color:#BA1C21; color: #FFFFFF; font-family: Georgia, serif;
       background-image: url("dixieimages/dsu.jpg");
       background-position: right; height: 72px;
       background-repeat: no-repeat; padding-left:1em;
       grid-row: 1 / 2; grid-column: 2 / 8;
}
      
       h1 {line-height: 240%; 
              margin: 0;
              padding-left: 0.5rem;}
       header a { text-decoration: none; color: #ffffff;}
       

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

h3 {color :#BA1C21}    

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

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

nav { background-color: #424242;
       top: 0;
       padding-top: 20px;
       padding-right: 5px; 
       padding-left: 20px; 
       font-weight: bold; 
       grid-row: 2 / 3; grid-column: 2 / -2;
       }

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

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

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

nav ul li {width: 100%;}



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

 table, tr, td, th {border: 1px solid;
         margin: 0 auto;
         border-collapse: collapse;
         color: #424242;
 
 }
 
 td, th {border: 1px solid;
 padding: 5px;
 color: #424242;}
 
 td {text-align: center;}
 td.text {text-align: left;}

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

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

#clear {clear: both;}

footer {background-color: #ffffff;
        font-size: .70em; 
        font-style: italic; 
        text-align: center; 
        padding: 1em; 
        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);
}

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

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

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

* {box-sizing: border-box;}
       
@media only screen and (max-width:1100px) {
       #wrapper {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 {background-image: url("dixieimages/homehero.jpg");         
              grid-row: 2 / 3; grid-column: 5 / 8;
       }
       
       #studenthero {background-image: url("dixieimages/studenthero.jpg"); 
              height: auto; background-size: cover; 
              background-repeat: no-repeat; 
              background-position: center;
              grid-row: 2 / 3; grid-column: 5 / 8;
       }
       
       #facultyhero {background-image: url("dixieimages/facultyhero.jpg"); 
              height: auto; background-size: cover; 
              background-repeat: no-repeat; 
              background-position: center;
              grid-row: 2 / 3; grid-column: 5 / 8;}

       

       .section {float: none; width: 100%; padding-right: 0px;}  
}

@media only screen and (max-width:600px) {
       header {background-image: none;}
       h1{background-image: none; text-align: center;}
       nav {grid-row: 2 / 3; grid-column: 1 / -1;}      

              #homehero {display:none}              
              #studenthero {display:none}            
             #facultyhero {display:none}              
             
}