Template:Virginia/css/home

/** 

* This page and wiki was built with the help of igem-wikibrick, a tool created by Virginia iGEM 2018
* @version v0.8.0
* @link https://github.com/Virginia-iGEM/igem-wikibrick
* @license MIT
*/

html { 

 height: 100%;
 min-height:100%;
 margin:0;
 text-align: center;

} body { 

 height: 100%;
 min-height:100%;
 margin:0;
 text-align: center;
 background-color: #00054a;
 /*font-size: 0;*/

} .out { 

 font-size: 1em;
 height: 100%;
 min-height:100%;
 margin:0;
 text-align: center;
 background-color: #00054a;

}

/* Navbar container */ .navbar { 

 position: fixed;
 top: 18px;
 left:0;
 overflow: auto;
 background-color: #00054a; /*blue*/
 font-family: Arial;
 width: 100%;
 height: 80px;
 z-index: 10;
 font-size: 1em;

}

/* Links inside the navbar */ /*.navbar a { 

 float: left;
 font-size: 16px;
 color: white;
 text-align: center;
 /*padding: 14px 16px;*/
 /*display: block;
 text-decoration: none;

}*/ .logo { 

 float: left;
 overflow: hidden;
 font-size: 16px;

 color: red;
 text-align: center;
 text-decoration: none;
 width: 33.33%;
 height: 100%;

} .logo img { 

 width: 70%; /* THIS CHANGES WITH THE LOGO */
 height: 75%;
 -webkit-transform: translateY(15%);
         transform: translateY(15%);

} /* The dropdown container */ .dropdown-team, .dropdown-project,.dropdown-results, .dropdown-parts, .dropdown-human, .dropdown-awards { 

 float: left;
 overflow: auto;
 width: 11.11%;
 font-family: 'Trebuchet MS';

}

/* Dropdown button */ .dropdown-project .dropbtn, .dropdown-team .dropbtn, .dropdown-results .dropbtn, .dropdown-parts .dropbtn, .dropdown-human .dropbtn, .dropdown-awards .dropbtn { 

 font-size: 16px; 
 border: none;
 outline: none;
 color: white;
 padding: 14px 16px;
 background-color: inherit;
 font-family: inherit; /* Important for vertical align on mobile phones */
 margin: 0; /* Important for vertical align on mobile phones */
 height: 80px;
 width: 100%;

} .dropbtn img { 

 width: 17%;
 height: 50%;

} .dropbtn span { 

 display: block;

}

/* Add a red background color to navbar links on hover */ .dropdown-project:hover .dropbtn, .dropdown-team:hover .dropbtn, .dropdown-results:hover .dropbtn, .dropdown-parts:hover .dropbtn, .dropdown-human:hover .dropbtn, .dropdown-awards:hover .dropbtn { 

 background-color: #a6a6ff; /*light perrywinckle*/
 color:#fff2bb; /*midnight purple*/

} /* Show the dropdown menu on hover */ .dropdown-project:hover .dropdown-content, .dropdown-team:hover .dropdown-content,.dropdown-results:hover .dropdown-content, .dropdown-parts:hover .dropdown-content, .dropdown-human:hover .dropdown-content, .dropdown-awards:hover .dropdown-content { 

 display: block;

} /* Dropdown content (hidden by default) */ .dropdown-content { 

 display: none;
 position: fixed;
 background-color: #cdd9ff; /*lighter perrywinckle*/
 min-width: 10px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 /*z-index: 1;*/
 width: 11.11%;

}

/* Links inside the dropdown */ .dropdown-content a { 

 font-family: 'Trebuchet MS';
 float: none;
 color: #42427c; /*blueberry*/
 padding: 12px 16px;
 text-decoration: none;
 display: block;
 text-align: center;

}

/* Add a grey background color to dropdown links on hover */ .dropdown-content a:hover { 

 background-color: #717ad3; /*deep perrywinckle*/
 color: #eef0ff; /*ghost lilac*/

} /* END OF NAVBAR STYLING*/

/* STYLE PICTURE AT THE TOP */

.top-picture { 

 position:absolute;
 top:18px;
 z-index: 4;
 /* Full height */

 /* Center and scale the image nicely */
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;

}

  1. background {
 width: 100vw;
 height: 100vh;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;

} .title { 

 position: absolute;
 top: 15%;
 left: 33%;
 font-size: 50px;
 font-weight: bold;
 z-index: 5;

} .title img { 

 height: 80%;
 width: 50%;

}

/* END OF STYLE PICTURE AT THE TOP */


/* END OF STYLE PICTURE AT THE TOP */ /* STYLE OF HORIZONTAL SCROLL INDICATOR PROGRESS BAR */ progress { 

 /* Positioning */
 position: fixed;
 left: 0;
 top: 98px;

 /* Dimensions */
 width: 100%;
 height: 10px;

 /* Reset the appearance */
 -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;

 /* Get rid of the default border in Firefox/Opera. */
 border: none;

 /* Progress bar container for Firefox/IE10+ */
 background-color: transparent;

 /* Progress bar value for IE10+ */
 color: red;
 z-index: 6;

} progress::-webkit-progress-bar { 

 background-color: transparent; /*transparent*/

} progress::-webkit-progress-value { 

 background-color: #ff5d5f; /*coral*/

}

/* END OF STYLE OF HORIZONTAL SCROLL INDICATOR PROGRESS BAR */

  1. GIF {
 position: absolute;
 z-index: 0;
 top: 0vh;
 left: 0px; /* fixed to left. Replace it by right if you want.*/
 width: 100vw;

} /* BOTTOM FACING ARROW TO BRING YOU TO THE FIRST SECTION */ .bot-arrow { 

 position: absolute;
 top: 80vh;
 left: 47.1%; /*THIS IS FOR THE ARROW TO BE CENTERED*/
 z-index:8;

} .bot-arrow a:hover .bottom { 

 border: 0.5em solid #FC664B;
 /*position:absolute;*/

} h2 { 

 position: relative;
 color: white;
 z-index: 10;

} .bot-arrow a:hover .bottom:after { 

 border-top: 0.5em solid #FC664B;
 border-right: 0.5em solid #FC664B;

}

.bot-arrow .bottom { /* circle arround arrow */ 

 display: inline-block;
 z-index: 8;
 width: 4em;
 height: 4em;
 border: 0.5em solid #FFFFFF;
 border-radius: 50%;
 margin-left: 0.75em;

}

.bot-arrow .bottom:after { /* arrow*/ 

 content: ;
 display: inline-block;
 margin-top: 0.6em;
 width: 1.4em;
 height: 1.4em;
 border-top: 0.5em solid #FFFFFF;
 border-right: 0.5em solid #FFFFFF;
 -webkit-transform: rotate(135deg);
 transform: rotate(135deg);

}

/* END OF BOTTOM FACING ARROW BRINGING YOU TO THE FIRST SECTION */


  1. fill {
 position:relative;
 top:         calc(100vh + 10px);
 z-index:1;
 min-width: 100vw;
 font-family: 'Nexa Regular';
 display:block;
 font-weight:normal;
 font-size:16px;
 background-color:black;
 min-height: 330vh;

}

  1. fill h2 {
 padding-top: 130vh;
 font-family: "Arial Rounded MT Bold";
 font-size: 4em;
 color: white;
 z-index: 59;
 padding-bottom: 5vh;

} h3 { 

 color: white;
 font-family: "Trebuchet MS";
 font-size: 2em;

}

  1. footer {
 -webkit-transform: translateY(26vh);
         transform: translateY(26vh);
 position:absolute;
 bottom:0;
 background-color: #00054a;
 width:100vw;
 height:300px;
 z-index: 10;

}

  1. outer {
 position: relative;
 min-height: 75vh; /*CHANGE BASED ON HOW LONG REFERENCES ARE*/
 background-color:white;

}

  1. footer img {
 width: 100%;
 height:100%;

}

  1. img1, #img2, #img3 {
 width: 20%;
 padding-left: 6.55%;
 padding-right: 6.55%;
 border-radius:50%;

} p { 

 position: relative;
 padding-left: 20vw;
 padding-right: 20vw;
 z-index: 10;
 color: white;
 font-family: "Trebuchet MS";
 font-size: 1.5em;

}

  1. img1op {
 position: absolute;
 width: 20%;
 padding-left: 6.55%;
 padding-right: 6.55%;
 border-radius:50%;

}

  1. smolimg {
 position: relative;
 width: 15vw;
 padding-right: 4%;

}

  1. fullscreen {
 -webkit-transform: translateX(-20vw);
         transform: translateX(-20vw);
 width: 100vw;

}

  1. description1, #description2, #description3 {
 width: 20%;
 padding-left: 6.55%;
 padding-right: 6.55%;
 float:left;
 font-size: 1.25em;
 font-family: "Arial Rounded MT Bold"

}

  1. abstract {
 text-align:left;
 font-size: 1.25em;
 font-family: "Arial Rounded MT Bold"

}

  1. diagram {
 width:50%;
 height:50%;

}