Difference between revisions of "Team:Cornell/styles"

Revision as of 23:09, 12 October 2018 (view source) Oyq2 (Talk | contribs) (updated foundations page banner) ← Older edit		Revision as of 23:12, 12 October 2018 (view source) Oyq2 (Talk | contribs) (Undo revision 267170 by Oyq2 (talk)) Newer edit →
Line 724:		Line 724:
	/******************** FOUNDATIONS PAGE START ********************/		/******************** FOUNDATIONS PAGE START ********************/
	.foundations-page-banner {		.foundations-page-banner {
−	background-image: url(https://static.igem.org/mediawiki/2018/5/56/T--Cornell--SnehaInLab.jpg);	+	background-image: url(https://static.igem.org/mediawiki/2018/9/9b/T--Cornell--foundationsBanner.jpg);
	}		}

---

Revision as of 23:12, 12 October 2018

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

1. 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; padding-left: 40px; }

.home-sub-description-right-content > div { padding-top: 80px; text-align: right; padding-right: 40px; }

.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; } /******************** 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 { padding-right: 100px; padding-left: 90px; padding-top: 35px; padding-bottom: 35px; }

.notebook-header-text, .safety-header-text, .about-header-text, .modeling-overview-title { 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; }

1. 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;
   

}

1. ItaiMeme {

   height: 50%;
   width: 50%

}

1. Avisha {

   height: 80%;
   width: 80%

}

.gloriabio{

   padding-top: 50px;

}

.gloriaimage{

   display: block;
   margin-left: auto;
   margin-right: auto;
   height: 360px;
   float: left;

}

1. 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(); } /******************** DEMONSTRATE PAGE END ********************/

/******************** FOUNDATIONS PAGE START ********************/ .foundations-page-banner { background-image: url(); }

1. foundations-img {

height: 200px; width: auto; }

1. 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(); } /******************** 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;

text-align: center; }

.modeling-chevron-wrapper { margin-top: 80px; }

.modeling-chevron { display: block; margin-left: auto; margin-right: auto; }

.modeling-content-wrapper { background-color: #fff; } /******************** 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; }

1. 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 ********************/