Difference between revisions of "Team:Cornell/styles"

Revision as of 23:31, 16 October 2018 (view source) Oyq2 (Talk | contribs) ← Older edit		Revision as of 02:17, 17 October 2018 (view source) Zhongat (Talk | contribs) (Shifted team page banner up) Newer edit →
Line 556:		Line 556:
	.team-page-banner {		.team-page-banner {
	background-image: url(https://static.igem.org/mediawiki/2018/d/d5/T--Cornell--TeamBannerPhoto.jpg);		background-image: url(https://static.igem.org/mediawiki/2018/d/d5/T--Cornell--TeamBannerPhoto.jpg);
		+	background-position: 0 -200px;
	}		}

---

Revision as of 02:17, 17 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; }

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

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();

       background-position: 0 -200px;

}

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

}

1. IshaBio {

   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 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(); }

1. foundations-img {

height: 150px; width: auto; }

1. rnat-img {

width: 350px; height: auto; }

.foundations-image-caption { font-size: 12px; font-family: 'Open Sans', sans-serif; color: #fff; text-align: center; }

/******************** 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-top: 5%; padding-bottom: 5%;

       color: #fff;
       background-color: #0d1c38;

}

.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: 60%; height: auto; }

.modeling-image-caption { font-size: 12px; font-family: 'Open Sans', sans-serif; color: #fff; text-align: center; }

.modeling-references { font-family: 'Open Sans', sans-serif; font-size: 16px;

       color: #fff;

}

.modeling-sensitivity { width: 45%; }

.modeling-sensitivity-left { float: left; margin-left: 90px; margin-right: 15px; }

.modeling-title, .modeling-subheading { 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 ********************/

/******************** COMPOSITE PARTS PAGE START********************/

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