* { box-sizing: border-box; } body { margin: 0; color:#666666; font-family: Arial, Verdana, sans-serif; background:linear-gradient(to bottom,#eeeeee,#ffffff); background-attachment: fixed; } header{ background-color: #BA1C21; color: #FFFFFF; font-family: Georgia, sans-serif; grid-row:1/3; grid-column: 2/8; } header h1 { line-height: 240%; height: 72px; background-image: url("dsu.jpg"); background-repeat: no-repeat; background-position: right; padding-left: 0.5rem; margin: 0; } header a{ text-decoration: none; color: #FFFFFF; } nav { font-weight: bold; background-color: #424242; grid-row: 2/3; grid-column: 2/8; position: sticky; padding: 20px 5px 0px 20px; top: 0; } nav ul{ list-style-type: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; display: flex; flex-flow: row nowrap; } nav ul li{ width: 100%; } nav a { text-decoration: none; color: #FFFFFF; padding: 1rem 0rem; display: block; text-align: center; } nav a:hover { background-color: #BA1C21; } h2 { color: #424242; font-family: Georgia, serif; } dt { color: #BA1C21; font-weight: bold; } .dsu { color: #BA1C21; font-size:1.2em; } footer { font-size:.70em; font-style: italic; text-align: center; padding: 1em; background-color: #FFFFFF; grid-row: 5/6; grid-column: 2/8; } h3 { color: #BA1C21; } main { padding-left: 2em; padding-right: 2em; display:block; background-color: #FFFFFF; padding-top: 1px; padding-bottom: 1px; grid-row: 4/5; 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) } #redbar { background-color: #BA1C21; grid-row: 1/2; grid-column: 1/9; } #graybar { background-color: #424242; grid-row: 2/3; grid-column: 1/9; } #homehero { height: 300px; background-image: url("homehero.jpg"); background-size: cover; background-position: 20% 50%; grid-row: 3/4; grid-column: 1/9; } #studenthero { height: 300px; background-image: url("studenthero.jpg"); background-size: cover; background-position: 20% 50%; grid-row: 3/4; grid-column: 1/9; } #facultyhero { height: 300px; background-image: url("facultyhero.jpg"); background-size: cover; background-position: 20% 50%; grid-row: 3/4; grid-column: 1/9; } #alumnihero { height: 300px; background-image: url("alumnihero.jpg"); background-size: cover; background-position: 20% 50%; grid-row: 3/4; grid-column: 1/9; } .section{ float: left; width: 33%; padding-right: 1rem; } .clear{ clear: both; } table{ margin: 0 auto; border: 1px solid #424242; width: 100%; border-collapse: collapse; } th, td{ padding: 5px; border: 1px solid #424242; } td{ margin: 0 auto; } .text, td{ text-align: left; } tr:nth-of-type(2n){ background-color: #F3F3F3; } form{ display: grid; grid-template-rows: auto; grid-template-columns: 200px 1fr; grid-gap: 0.75rem; width: 100%; } input, textarea{ font-size: 1rem; padding: 10px; color: #666666; background-color: #fafafa; border: 0; } input:focus, textarea:focus{ outline: 0; background-color: #f0f0f0; } label{ padding: 10px; text-align: right; } #mySubmit{ width: 10rem; column-gap: 2px; } @media only screen and (max-width: 1100px){ #wrapper { display: grid; 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 { font-weight: bold; background-color: #424242; grid-row: 2/3; grid-column: 1/5; position: sticky; padding: 20px 5px 0px 20px; top: 0; } nav ul{ list-style-type: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; display: flex; flex-flow: column nowrap; } #homehero { height: auto; background-image: url("homehero.jpg"); background-size: cover; background-position: 20% 50%; grid-row: 2/3; grid-column: 5/8; } #studenthero { height: auto; background-image: url("studenthero.jpg"); background-size: cover; background-position: 20% 50%; grid-row: 2/3; grid-column: 5/8; } #facultyhero { height: auto; background-image: url("facultyhero.jpg"); background-size: cover; background-position: 20% 50%; grid-row: 2/3; grid-column: 5/8; } .section{ float: none; width: 100%; padding-right: 0px; } } @media only screen and (max-width: 600px){ header h1 { line-height: 240%; background-image: none; background-repeat: no-repeat; background-position: right; height: 72px; padding-left: 1em; margin: 0; padding-left: 0.5rem; text-align: center; } nav { font-weight: bold; background-color: #424242; grid-row: 2/3; grid-column: 1/9; position: sticky; padding: 20px 5px 0px 20px; top: 0; } #homehero { display: none; } #studenthero { display: none; } #facultyhero { display: none; } }