*{box-sizing: border-box}


    
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;

}


header {
background-color: #BA1C21;
color:#FFFFFF;
font-family: Georgia, sans-serif;
grid-row: 1/2;
    grid-column: 2/8;
    margin: 0;
}


header h1{ 
background-image: url(dsu.jpg);
background-repeat: no-repeat;
background-position:right;
padding-left: 0.5em;
height: 72px;
line-height:240%;
margin: 0;
}
header a {text-decoration: none;
color: #FFFFFF}

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

}
nav a{
color: #FFFFFF;
display:block;
text-decoration: none;
text-align: center;
padding: 1rem 0rem;
}
nav a:hover{background-color:#BA1C21;
}
nav ul{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: flex;
flex-flow: row nowrap;}
nav ul li{width: 100%;

}
ul{list-style-type: none;
}


#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-row: 1/2;
    grid-column: 1/9;
}

#greybar{background-color: #424242;

    grid-row: 2/3;
    grid-column: 2/8;}


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


#facultyhero{
height: 300px;
background-image: url(facultyhero.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;

     grid-row: 3/4;
    grid-column: 1/9;
    }




#studenthero{
height: 300px;
background-image: url(studenthero.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;

     grid-row: 3/4;
    grid-column: 1/9;
    }

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

th{padding: 5px;
border:1px solid #424242}
td{padding: 5px;
border:1px solid #424242;
text-align: center}
.text{text-align: left}
tr:nth-of-type(2n+1){background-color: #F3F3F3}



main {
padding: 1px 1rem 1px 1rem;
display: block;
background-color: #FFFFFF;
grid-row: 4/5;
grid-column: 2/8;

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


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


h3{
color: #BA1C21
}


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


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




.clear{clear: both}



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

}







@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{
    grid-row: 2/3;
    grid-column: 5/9;
    height: auto;
    }
    #studenthero{
    grid-row: 2/3;
    grid-column: 5/9;
    height: auto;
    }
    #facultyhero{
    grid-row: 2/3;
    grid-column: 5/9;
    height: auto;
    }
        section{float: none; 
        width: 100%;
            padding-right: 0px;}
    
    }
    



@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
        }
        

        
    }}