body { background-color:#FFFFFF; color:#666666; font-family:Arial, Helvetica, sans-serif; background-image: linear-gradient(to bottom,#eeeeee,#ffffff); background-attachment: fixed; margin: 0px; } main { display: block; background-color:#FFFFFF; padding-left: 2em; padding-right: 2em; padding-top: 1px; padding-bottom:1px; grid-row:4/5; grid-column:2/8; } header a { color:#FFFFFF; text-decoration:none; } .clear { clear:both; } header { background-color:#BA1C21; color:#FFFFFF; font-family:Georgia, 'Times New Roman', Times, serif; grid-column:2/8; grid-row:1/2; } header h1 { padding-left: 0.5rem; line-height:240%; background-image: url(images/dsu.jpg); background-position: right; height:72px; padding-left: 1em; background-repeat: no-repeat; margin: 0; } section { float: left; width: 33%; padding-right: 1rem; } nav { font-weight:bold; top: 0; position: sticky; background-color:#424242; grid-column:2/8; grid-row:2/3; } nav a { text-decoration: none; color: #FFFFFF; padding: 1rem 0rem; display:block; text-align: center; } nav a:hover { background-color:#BA1C21; } nav ul { padding:0; margin:0; list-style-type: none; display:flex; flex-flow:row; flex-flow:nowrap; } nav ul li { width:100%; } h2 { color:#424242; font-family:Georgia, 'Times New Roman', Times, serif; } h3 { color:#BA1C21; font-weight:bold; } dt { color:#BA1C21; font-weight:bold; } .dsu { color:#BA1C21; font-size:1.2em; } /*This is used to create a class, example: this will make the line red.*/ footer { background-color:#FFFFFF; font-size:0.70em; font-style:italic; text-align:center; padding: 1em; grid-row:5/6; grid-column:2/8; } #redbar { background-color:#BA1C21; grid-area: 1/1/2/9; } #greybar { background-color:#424242; grid-row:2/3; grid-column:1/9; } #wrapper { display:grid; grid-auto-rows: minmax(0px,auto); grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr); } #facultyhero { background-image: url(images/facultyhero.jpg); height: 300px; background-position: center; background-size: cover; background-repeat: no-repeat; grid-row:3/4; grid-column:1/9; } #homehero { background-image: url(images/homehero.jpg); height: 300px; background-position: center; background-size: cover; background-repeat: no-repeat; grid-row:3/4; grid-column:1/9; } #studenthero { background-image: url(images/studenthero.jpg); height: 300px; background-position: center; background-size: cover; background-repeat: no-repeat; grid-row:3/4; grid-column:1/9; } #alumnihero { background-image: url(images/alumnihero.jpg); height: 300px; background-position: center; background-size: cover; background-repeat: no-repeat; grid-row:3/4; grid-column:1/9; } form { display:grid; grid-template-rows:auto; grid-template-columns: 200px 1fr; gap: 0.75rem; width:100%; } input { font-size:1rem; padding:10px; color:#666666; background-color:#fafafa; border:none; } textarea { font-size:1rem; padding:10px; color:#666666; background-color:#fafafa; border:none; } input:focus { font-size:1rem; padding:10px; color:#666666; background-color:#f0f0f0; border:none; outline:none; } textarea:focus { font-size:1rem; padding:10px; color:#666666; background-color:#f0f0f0; border:none; outline:none; } label { padding:10px; text-justify:right; } #Submit { width:10rem; grid-template-columns:2/3; } * { 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 { 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; } #alumnihero { grid-row:2/3; grid-column:5/8; height:auto; } selection { 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; } #alumnihero { display:none; } } table { margin: 0 auto; border: 1px solid #424242; width: 100%; border-collapse: collapse; } th, td { border: 1px solid #424242; padding: 5px; } .text { text-align: left; } td { text-align: center; } tr:nth-of-type(2n+3) { background-color:#F3F3F3; }