@import url('https://fonts.googleapis.com/css?family=Merriweather%7COpen+Sans%7CRaleway');
html, body {
width: 100%; height: 100%; margin: 0; padding: 0; overflow-x: hidden;
}
body { background: #0d1c38; }
p { color: #fff; font-family: 'Open Sans', sans-serif; }
ul { color: #fff; font-family: 'Open Sans', sans-serif; }
/******************** HOME PAGE START ********************/ nav {
border-bottom: 0.5px solid #c93843;
margin-top:20px; padding-right: 100px; }
.nav-bar-logo { vertical-align: top; display: inline-block; float:left; margin-left: 80px;
}
.nav-bar-logo img{ width: 120px; }
.nav-bar-main-menu{ font-family: 'Raleway', sans-serif; }
.dropbtn {
background-color: #0d1c38; color: #e6b800;
text-decoration: none;
padding: 15px;
margin: 0px;
font-size: 15px; border: none;
}
.dropdown {
position: relative;
vertical-align: top;
display: inline-block;
float:right; }
.dropdown ul{
list-style-type: none !important;
}
.dropdown a {
position: relative; display: inline-block;
color: #e8b023; text-decoration: none;; }
.dropdown-content {
display: none; position: absolute; background-color:rgba(201,56,67, 0.9);
color: #ffffff; width: 200px; font-size: 14px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;
}
.toolkit-dropdown-content {
width: 410px;
left: -160px; }
.modeling-dropdown-content {
left: -40px;
}
.human-dropdown-content {
left: 12px;
}
.outreach-dropdown-content {
left: -40px;
}
.team-dropdown-content { width: 140px;
left: -35px;
}
.dropdown-content a {
color: #ffffff;
padding: 12px 16px;
text-decoration: none; display: block;
}
.wet-lab-list-title , .doc-list-title { padding-top: 12px; padding-left: 16px; padding-bottom: 14px; }
.nav-second-col{ margin-left: 30px; }
.dropbtn:hover, .active-page{ color: #c93843; transition-duration: 0.5s; }
.dropdown-content a:hover { color: #c93843; background-color: #ddd; }
.dropdown:hover .dropdown-content {
display: block;
}
.home-banner {
border-bottom: 0.5px solid #c93843;
position: relative;
}
.red-wave-animation { position: absolute;
width: 100%; left: 0; top: 23%;
}
.home-banner-wrapper { position: relative; }
.home-banner-content-wrapper { position: absolute;
left: 50%; top: 45%; -moz-transform: translateX(-50%) translateY(55%); -webkit-transform: translateX(-50%) translateY(55%); transform: translateX(-50%) translateY(55%); text-align: center; width: 95%;
}
.home-banner-logo { height: 120px; }
.home-banner-caption { color: #fff; font-family: 'Open Sans', sans-serif; font-size: 14px; margin: 0; }
.home-banner-chevron-wrapper { margin-top: 80px; }
.home-description-logo { width: 35%; height: auto; display: block; margin: 0 auto; margin-top: 50px; margin-bottom: 35px; }
.yellow-accent-line-center { border: #e8b023 solid 1px; display: block; margin: 0.5em auto 0.5em auto; width: 80px; }
.yellow-accent-line-left-sub {
border: #e8b023 solid 1px; display: block; float: left; margin: 2.5em auto 1.5em 2.4em; width: 80px;
}
.yellow-accent-line-right-sub {
border: #e8b023 solid 1px; display: block; float: right; margin: 2.5em 2.75em 1.5em 32em; width: 80px;
}
.home-description { color: #fff; font-family: 'Open Sans', sans-serif; font-size: 18px; margin-top: 50px; margin-bottom: 25px; text-align: center; line-height: 22px; }
- home-description-emphasis-words {
color: #e8b023; }
.home-red-frequency-wrapper { left: 18.5%; margin-top: 50px; position: relative; }
.home-red-frequency { position: absolute; top: -20px; }
.home-sub-descriptions-wrapper { /* This is margin around the home subdescriptions wrapper -- don't change! */ margin: 75px 0; }
.home-sub-description { color: #fff; font-family: 'Open Sans', sans-serif; font-size: 18px; margin-top: 50px; margin-bottom: 25px; }
.home-sub-description-left { color: #fff; font-family: 'Open Sans', sans-serif; font-size: 18px; border-left: 4px solid rgba(201, 56, 67, .5); border-bottom: 4px solid rgba(201, 56, 67, .5); padding-left: 25px; line-height: 22px; }
.home-sub-description-left2 { color: #fff; font-family: 'Open Sans', sans-serif; font-size: 18px; border-left: 4px solid rgba(201, 56, 67, .5); padding-left: 25px; line-height: 22px; }
.home-sub-description-left-content { padding-left: 10px; }
.home-sub-description-right-content { padding-right: 10px; }
.home-sub-description-left-content > div { padding-top: 80px; }
.home-sub-description-right-content > div { padding-top: 80px; text-align: right; }
.home-sub-description-right { color: #fff; font-family: 'Open Sans', sans-serif; font-size: 18px; border-right: 4px solid rgba(201, 56, 67, .5); border-bottom: 4px solid rgba(201, 56, 67, .5); padding-right: 25px; padding-bottom: 25px; line-height: 22px; }
.home-sub-description-right2 { color: #fff; font-family: 'Open Sans', sans-serif; font-size: 18px; border-right: 4px solid rgba(201, 56, 67, .5); padding-right: 25px; padding-bottom: 25px; line-height: 22px; }
.home-sub-description-right-image > img { border-radius: 50%; width: 300px; height: 300px; object-fit: cover; display: block; margin-left: auto; margin-right: 0; padding-top: 100px; padding-bottom: 100px; }
.home-sub-description-left-image > img { border-radius: 50%; width: 300px; height: 300px; object-fit: cover; display: block; padding-top: 80px; padding-bottom: 80px; }
.sub-description-sub-heading-left { color: #fff; font-family: 'Merriweather', serif; font-size: 28px; }
.sub-description-sub-heading-right { color: #fff; font-family: 'Merriweather', serif; font-size: 28px; text-align: right; }
footer {
border-top: 0.5px solid #c93843;
padding: 35px;
position: relative;
text-align: center; }
.footer-wrapper { margin: auto; display: inline-block; }
.icon-wrapper { display: inline-block; position: relative; padding-right: 18px; border-right: 0.5px solid white; }
.icon-wrapper-last { border-right: none; }
.icon { margin: 16px; }
.icon img { height: 24px; } /******************** HOME PAGE END ********************/
/******************** STANDARD PAGE START ********************/
.standard-page-banner {
background-image: url();
background-size: cover;
font-family: 'Raleway'; fill: black; font-size: 14px;
}
.about-page-banner{ background-image: url(); background-size: cover; font-family: 'Raleway'; fill: black; font-size: 14px; }
.standard-page-banner-title {
font-family: 'Raleway', sans-serif; fill: black; font-size: 14px;
}
.standard-page-side-bar-content-wrapper { padding: 5% 0; padding-right: 50px; }
.standard-page-side-bar-wrapper {
padding-right: 50px;
}
.standard-page-side-bar > li > a { text-decoration: none; color: #c93843; font-weight: bold; }
.standard-page-side-bar { list-style-type: none; font-family: 'Open Sans', sans-serif; padding-left: 15px; padding-right: 15px; vertical-align: middle; margin: 0; }
.standard-page-side-bar > li { margin-bottom: 15px; }
.standard-page-content-section-last { padding-bottom: 0px; }
.standard-page-content-section { padding-bottom: 75px; }
.no-pic-banner{
background-image: url(); background-position: center; background-size: 100%; font-family: Raleway; fill: black; font-size: 14px;
}
.standard-page-content-title {
font-family: 'Merriweather', serif; font-size: 24px; font-weight: 700; color: #FFF; position: relative;
}
.yellow-accent-line-left {
border: #e8b023 solid 1px; display: block; float: left; margin: 1em auto 1em auto; width: 80px;
}
.standard-page-content-subheading {
font-family: 'Merriweather', serif; font-size: 18px; font-weight: 1; color: #FFF; padding-top: 8%; padding-bottom: 0;
}
ol { font-family: 'Open Sans', serif; font-size: 16px; font-weight: 100; color: #FFF; padding-top: 0; padding-bottom: 0; }
.policies-list { font-size: 16px; }
p .standard-page-content-text {
font-family: 'Open Sans', serif; font-size: 16px; font-weight: 100; color: #FFF; padding-top: 0; padding-bottom: 0;
}
.standard-page-content-image-wrapper { padding-top: 50px; padding-bottom: 50px; }
.standard-page-content-image { display: block; margin-left: auto; margin-right: auto; height: 360px;
padding-top: 50px; padding-bottom: 50px;
} /******************** STANDARD PAGE END ********************/
/******************** NOTEBOOK PAGE START ********************/ .notebook-page-content-wrapper, .safety-page-content-wrapper, .about-page-content-wrapper, .attributions-page-content-wrapper, .demonstrate-page-content-wrapper, .foundations-page-content-wrapper, .interlab-page-content-wrapper, .parts-page-content-wrapper, .testing-page-content-wrapper, .basicParts-page-content-wrapper, .composite-page-content-wrapper { padding-bottom: 5%; }
.notebook-content-wrapper, .safety-content-wrapper, .about-content-wrapper, .attributions-page-content-wrapper, .demonstrate-page-content-wrapper, .foundations-page-content-wrapper, .interlab-page-content-wrapper, .parts-page-content-wrapper, .testing-page-content-wrapper, .basicParts-page-content-wrapper, .composite-page-content-wrapper, .modeling-overview-wrapper, .practices-page-content-section { padding-right: 100px; padding-left: 90px; padding-top: 35px; padding-bottom: 35px; }
.notebook-header-text, .safety-header-text, .about-header-text { font-family: 'Merriweather', serif; font-size: 24pt; text-align: center; color: #fff; }
.notebook-text-wrapper, .safety-text-wrapper, .about-text-wrapper, .attributions-text-wrapper, .testing-text-wrapper, .foundations-text-wrapper, .demonstrate-text-wrapper, .basicParts-text-wrapper, .composite-text-wrapper { /*padding-left: 100px;*/ padding-top: 20px; }
.notebook-body-text, .safety-body-text, .about-body-text, .basicParts-body-text, .parts-body-text, .composite-body-text, .modeling-overview { font-family: 'Open Sans', sans-serif; color: white; }
- safety-hyperlink {
color: #c93843; } /******************** NOTEBOOK PAGE END ********************/
/******************** ATRIBUTIONS PAGE START ********************/ .attributions-body-text{
font-family: 'Open Sans', serif; font-size: 16px; color: white;
}
/******************** ATTRIBUTIONS PAGE END ********************/
/******************** TEAM PAGE START ********************/ .team-page-banner { background-image: url(); }
.team-page-content-area { padding-top: 5%; padding-bottom: 5%; }
.team-page-content-title {
font-family: 'Merriweather'; font-size: 24px; font-weight: 100; color: #FFF; padding-bottom: 5px;
}
.team-page-content-subheading {
font-family: 'Merriweather'; font-size: 18px; font-weight: 1; color: #FFF; padding-top: 1%; padding-bottom: 0;
} p.team-page-content-text {
font-family: 'Open Sans'; font-size: 16px; font-weight: 100; color: #FFF; padding-top: 8%; padding-bottom: 0;
}
.team-page-content-image{
width: 85%; height: 85%; border-radius: 50%;
}
.team-page-image-left {
float: left; width: 40%; padding-right: 50px; padding-left: 10%; box-sizing: border-box;
}
.team-page-text-right {
float: left; width: 55%; padding: 50px; padding-top: 0px; margin-bottom: 10%; box-sizing: border-box;
}
.team-page-text-left {
float: right; width: 55%; padding: 50px; padding-top: 0px; margin-bottom: 10%; box-sizing: border-box;
}
.team-page-image-right {
float: right; width: 40%; padding-left: 50px; padding-right: 10%;
box-sizing: border-box;
}
.team-page-image-left-lastbio {
float: left; width: 40%; padding-right: 50px; padding-left: 10%; box-sizing: border-box;
}
.team-page-text-right-lastbio {
float: left; width: 55%; padding: 50px; padding-top: 0px; box-sizing: border-box;
}
- ItaiMeme {
height: 50%; width: 50%
}
- Avisha {
height: 80%; width: 80%
}
.gloriabio{
padding-top: 50px;
}
.gloriaimage{
display: block; margin-left: auto; margin-right: auto; height: 360px; float: left;
}
- CarolBio {
margin-top: 10%; margin-bottom: 10%;
} /******************** TEAM PAGE END ********************/
/******************** SPONSORS PAGE START ********************/ .sponsors-page-content-wrapper { background: #fff; padding: 5% 0; }
.sponsor-image-wrapper, .sponsor-description-wrapper { padding-top: 40px; padding-bottom: 40px; }
.sponsor-description-wrapper { display: table; }
.sponsor-image { display: block; height: 120px; margin-left: auto; margin-right: auto; }
.sponsor-description-wrapper { margin-left: 100px; }
.sponsor-description { display: table-cell; font-family: 'Open Sans', sans-serif; vertical-align: middle; font-size: 16px; } /******************** SPONSORS PAGE END ********************/
/******************** DEMONSTRATE PAGE START ********************/
.demonstrate-page-banner {
background-image: url(); background-size: cover; font-family: Raleway; fill: black; font-size: 14px;
}
.demonstrate-page-banner-title {
font-family: 'Raleway', sans-serif; fill: black; font-size: 14px;
}
.no-pic-banner{
background-image: url(); background-position: center; background-size: 100%; font-family:Raleway; fill: black; font-size: 14px;
}
.demonstrate-page-content-wrapper {
margin-top: 5%; margin-bottom: 5%;
}
.demonstrate-page-content-title {
font-family: 'Merriweather', serif; font-size: 24px; font-weight: 700; color: #FFF; position: relative;
}
.demonstrate-page-content-subheading {
font-family: 'Merriweather', serif; font-size: 18px; font-weight: 1; color: #FFF; padding-top: 8%; padding-bottom: 0;
}
.demonstrate-page-content-wrapper {
font-family: 'Open Sans', serif; font-size: 16px; font-weight: 100; color: #FFF; padding-top: 0; padding-bottom: 0;
}
.demonstrate-page-content-wrapper row img{
display: inline-block;
}
.demonstrate-page-content-wrapper img{ width: 500px; margin-left: auto; margin-right: auto; display: block; }
.demonstrate-caption {
font-size: 12px; font-family: 'Open Sans', sans-serif; text-align: center;
} /******************** DEMONSTRATE PAGE END ********************/
/******************** FOUNDATIONS PAGE START ********************/ .foundations-page-banner { background-image: url(); }
- foundations-img {
height: 150px; width: auto; }
- rnat-img {
width: 350px; height: auto; }
/******************** FOUNDATIONS PAGE END ********************/
/******************** INTERLAB PAGE START ********************/ .interlab-page-banner { background-image: url(); } /******************** INTERLAB PAGE END ********************/
/******************** PARTS PAGE START ********************/ .parts-page-banner { background-image: url(); }
.standard-page-content-wrapper table{
font-family: 'Open Sans', serif; font-size: 16px; color: white;
background-color: #ffffff; color: #000000; border-collapse: collapse;
}
.standard-page-content-wrapper table th{ border: 1px solid black; padding: 20px; }
.standard-page-content-wrapper table td{ border: 1px solid black; padding: 20px; }
.parts-page-content-section-last{
margin-left: auto; margin-right: auto; display: block;
}
/******************** PARTS PAGE END ********************/
/******************** POLICIES PAGE END ********************/ .policies-page-banner { background-image: url(); background-size: cover; font-family: 'Raleway'; fill: black; font-size: 14px; } /******************** POLICIES PAGE END ********************/
/******************** MODELING PAGE START ********************/ .modeling-overview-wrapper { margin-top: 100px; margin-bottom: 100px; }
.modeling-overview-title { margin-bottom: 1em; }
.modeling-overview { margin-top: 2.5em; font-size: 16px; font-family: 'Open Sans', sans-serif; /*text-align: center;*/ }
.modeling-chevron-wrapper { margin-top: 80px; }
.modeling-chevron { display: block; margin-left: auto; margin-right: auto; }
.modeling-page-content-wrapper { background-color: #fff; }
.modeling-page-text-wrapper { padding-right: 100px; padding-left: 90px; padding-bottom: 5%;
color: #000;
}
.modeling-page-content-section { padding-bottom: 75px; }
.modeling-image-wrapper { margin-top: 40px; margin-bottom: 50px; }
.modeling-image { display: block; margin-left: auto; margin-right: auto; width: 50%; height: auto; }
.modeling-image-caption { font-size: 12px; font-family: 'Open Sans', sans-serif; color: #000; text-align: center; }
.modeling-references { font-family: 'Open Sans', sans-serif; font-size: 16px;
color: black;
}
.modeling-sensitivity { width: 40%; }
.modeling-sensitivity-left { float: left; margin-left: 100px; }
.modeling-title, .modeling-subheading { color: #000; } /******************** MODELING PAGE END ********************/ /******************** ENTREPRENEURSHIP PAGE START ********************/
.entrepreneurship-page-banner { background-image: url(); }
.yellow-accent-line-left-sub {
border: #e8b023 solid 1px; display: block; float: left; margin: 2.5em auto 1.5em 0; width: 80px;
}
.yellow-accent-line-right-sub {
border: #e8b023 solid 1px; display: block; float: right; margin: 2.5em 0 1.5em 32em; width: 80px;
}
.entrepreneurship-description { color: #fff; font-family: 'Open Sans', sans-serif; font-size: 16px; margin-top: 130px; margin-bottom: 25px; text-align: center; }
- entrepreneurship-description-emphasis-words {
color: #e8b023; }
.entrepreneurship-red-frequency-wrapper { left: 18.5%; margin-top: 50px; position: relative; }
.entrepreneurship-red-frequency { position: absolute; top: -20px; }
.entrepreneurship-sub-descriptions-wrapper { /* This is margin around the home subdescriptions wrapper -- don't change! */ margin: 75px 0; }
.entrepreneurship-sub-description { color: #fff; font-family: 'Open Sans', sans-serif; font-size: 16px; margin-top: 50px; margin-bottom: 25px; }
.entrepreneurship-sub-description-left { color: #fff; font-family: 'Open Sans', sans-serif; font-size: 16px; }
.entrepreneurship-sub-description-left2 { color: #fff; font-family: 'Open Sans', sans-serif; font-size: 16px; }
.entrepreneurship-sub-description-left-content { padding-right: 75px; }
.entrepreneurship-sub-description-right-content { padding-left: 75px; }
.entrepreneurship-sub-description-left-content > div { padding-top: 80px; }
.entrepreneurship-sub-description-right-content > div { padding-top: 80px; text-align: right; }
.entrepreneurship-sub-description-right { color: #fff; font-family: 'Open Sans', sans-serif; font-size: 16px; }
.entrepreneurship-sub-description-right2 { color: #fff; font-family: 'Open Sans', sans-serif; font-size: 16px; }
.entrepreneurship-sub-description-right-image { padding-top: 175px; }
.entrepreneurship-sub-description-left-image {
padding-top: 200px;
}
.entrepreneurship-sub-description-right-image > img { width: 80%; display: block; float: right; margin-right: 0; }
.entrepreneurship-sub-description-left-image > img { width: 80%; display: block; }
.entrepreneurship-closing {
color: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
margin-top: 70px;
margin-bottom: 70px;
text-align: center;
}
/******************** ENTREPRENEURSHIP PAGE END ********************/
/******************** COMPOSITE PARTS PAGE START********************/
- composite-img {
height: 150px; width: auto;
} /******************** COMPOSITE PARTS PAGE END ********************/
/******************** PRACTICES PAGE START ********************/ .practices-page-content-section {
padding-bottom: 5%;
}
.practices-page-banner { background-image: url(); background-size: cover; font-family: 'Raleway'; fill: black; font-size: 14px; }
.practices-overview-wrapper { padding-top: 5%; padding-bottom: 5%; padding-left: 90px; padding-right: 100px; }
.practices-page-buttons-wrapper { margin-left: auto; margin-right: auto; }
.practices-button-wrapper { display: inline-block; }
.practices-button { background-color: #c93843; border: none; color: #fff; font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: bold; padding: 0.5em 1em; }
.practices-button:hover, .practices-button:focus { background-color: #ddd; color: #c93843; }
.practices-text-wrapper { display: none; }
.practices-recognition-wrapper { margin-top: 75px; }
.practices-recognition { padding-bottom: 75px; }
.practices-exploration-section-left, .practices-exploration-section-right { display: inline-block; padding-bottom: 10%; }
.practices-explore-date { padding-top: 10px; padding-bottom: 10px; }
.practices-exploration-text-left { width: 55%; float: left; }
.practices-exploration-text-right { width: 55%; float: right; }
.practices-page-content-subheading { font-family: 'Merriweather', serif; font-size: 18px; color: #fff; }
.practices-exploration-text-left > p, .practices-exploration-text-right > p, .practices-implementation-wrapper { color: #fff; font-family: 'Open Sans', sans-serif; font-size: 16px; }
.practices-exploration-image-left, .practices-exploration-image-right { width: 40%; }
.practices-exploration-image-right { float: left; }
.practices-exploration-image-right > img { height: 75%; width: 75%; border-radius: 50%; float: right; }
.practices-exploration-image-left > img { height: 75%; width: 75%; border-radius: 50%; float: left; }
.practices-applications-icon > img{ border-radius: initial; } /******************** PRACTICES PAGE END ********************/
/******************** COLLABORATIONS PAGE START ********************/ .collaborations-page-banner { background-image: url(); } /******************** COLLABORATIONS PAGE END ********************/
/*********************PUBLIC ENGAGEMENT PAGE START**************/ .public-engagement-banner { background-image: url(); }
.publicengagement-body-text{
font-family: 'Open Sans', serif; font-size: 16px; color: #fff;
margin: 0px; padding-left: 150px; padding-right: 150px; padding-top: 5%; padding-bottom: 5%; margin-bottom: 50px; text-align: center;
}
.plasmid-text { font-family: 'Merriweather', serif; font-size: 10px;
color: #fff;
} /*********************PUBLIC ENGAGEMENT PAGE END**************/