html,
body {
font-family: "myriad_pro_light";
margin: 0;
padding: 0;
}
h1,
h2,
h3 {
margin: 0;
padding: 0;
}
header {
margin: 0;
padding: 0;
padding-left: 55px;
background-repeat: no-repeat;
background-position: bottom center;
background-size: cover;
height: 195px;
position: fixed;
width: 100%;
top: 0;
}
.main {
display: grid;
grid-gap: 0px;
grid-template-columns: 500px auto;
grid-template-rows: auto auto auto;
margin: 220px 0px 0px 50px;
position: absolute;
}
main {
font-family: "myriad_pro_light";
font-size: 10.4pt;
letter-spacing: 0.1em;
}
ul {
display: block;
list-style-position: outside;
list-style-type: disc;
}
li {
display: list-item;
margin-left: -20px;
}
section>h3 {
color: #16537B;
font-family: "proxima_nova_bold";
font-size: 16pt;
font-weight: bold;
letter-spacing: 0.1em;
padding-top: 10px;
text-transform: uppercase;
}
.main>aside {
grid-column: 2;
grid-row: 1;
}
aside>.graphic {
background-color: #FFFFFF;
height: 200px;
margin: 20px 20px 0 20px;
min-width: 300px;
position: relative;
text-align: center;
}
aside>.qrcode {
text-align: center;
}
aside>.graphic>img {
height: 200px;
}
aside>.caption {
font-family: "myriad_pro_light";
font-size: 9pt;
font-style: italic;
margin-left: 20px;
margin-right: 20px;
padding: 10px;
position: relative;
text-align: left;
}
aside>.research-focus {
background-color: #e6e7e8;
height: 200px;
letter-spacing: 0.1em;
margin: 10px 0px 30px 20px;
padding: 20px 30px 20px 20px;
position: relative;
}
aside>.research-focus>h3 {
font-size: 13pt;
font-family: "proxima_nova_bold";
font-weight: bold;
letter-spacing: 0.15em;
}
aside>.research-focus li,
aside>.research-focus p {
font-size: 10pt;
}
aside>div>h3 {
color: #16537B;
font-family: "proxima";
font-size: 10pt;
}
footer {
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
bottom: 0;
height: 110px;
margin: 0;
padding: 0;
position: fixed;
width: 100%;
}
.wrapper {
display: grid;
}
header>.wrapper {
align-items: center;
grid-gap: 5px;
grid-template-columns: 70px auto;
grid-template-rows: auto auto auto;
margin-top: 35px;
}
footer>.wrapper {
align-items: center;
color: #FFFFFF;
grid-gap: 5px;
grid-template-columns: auto;
grid-template-rows: auto auto;
margin-top: 0;
}
footer>.wrapper>.logo-wrapper {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto;
text-align: center;
height: 66px;
line-height: 66px;
}
#contact {
background-color: #e6e7e8;
bottom: 110px;
position: fixed;
text-align: center;
width: 100%;
}
#contact>div {
align-items: center;
justify-content: center;
display: grid;
grid-gap: 7px;
grid-template-columns: auto auto auto 5px auto 5px auto 5px auto;
grid-template-rows: auto;
padding: 10px 0;
margin-left: 0px;
white-space: nowrap;
}
#contact .email {
color: #0378c6;
}
#contact .label {
color: #16537B;
font-family: "proxima_nova_bold";
font-size: 16pt;
text-transform: uppercase;
}
#contact .label+.spacer {
margin: 0 9px;
color: #16537B;
font-family: "proxima_nova_bold";
height: 35px;
width: 3px;
background-color: #16537B;
border: 0px solid #16537B;
}
#disclaimer {
font-family: "myriad_pro_semibold";
font-size: 10pt;
grid-column: 1;
grid-row: 1;
height: 31px;
line-height: 31px;
text-align: center;
}
#logo {
grid-column: 1;
grid-row: 1 / 4;
width: 60px;
}
#logo-doe {
height: 40px;
padding-top: 9px;
}
#logo-doe-os {
height: 28px;
padding-top: 15px;
}
#logo-ornl {
height: 32px;
padding-top: 13px;
}
#organization {
font-family: "proxima_nova_semibold";
font-size: 12pt;
letter-spacing: 0.3em;
text-transform: uppercase;
}
#ornl-header {
grid-column: 2;
grid-row: 1;
color: #FFFFFF;
font-family: "proxima_nova_semibold";
font-size: 11pt;
font-weight: 400;
letter-spacing: 0.35em;
text-transform: uppercase;
}
#title {
grid-column: 2;
grid-row: 2;
color: #FFFFFF;
font-family: "proxima_nova_bold";
font-size: 30pt;
font-weight: bold;
}
#subtitle {
grid-column: 2;
grid-row: 3;
color: #FFFFFF;
font-family: "proxima";
font-size: 16pt;
font-style: italic;
font-weight: normal;
}