Template:Virginia/css/awards

/** 

* 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: #110034;
 /*font-size: 0;*/

} .out { 

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

}

/* Navbar container */ .navbar { 

 position: fixed;
 top: 18px;
 left:0;
 overflow: auto;
 background-color: #110034; /*deep 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.33vw;
 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';

}

  1. map {
 margin-left: 5%;

} /* 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;

} .dropdown-content a:hover { 

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

} /* END OF NAVBAR STYLING*/

/* STYLE PICTURE AT THE TOP */

.top-picture { 

 z-index: -2;
 /* Full height */
 height: 100%; 

 /* 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;

} /* 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 */


/* FILL SCREEEN STYLE */

  1. contentbutnotcontentcuzigem {
 padding-left: 30%;
 padding-right: 8%;
 padding-top: 50px;
 padding-bottom: 50px;
 background-color:white;
 text-align: left;

}

.fixed-index { 

 position:absolute;
 /*top: 500px;*/ 

 padding-left: 3%;
 display: block;

} /* END FILL SCREEEN STYLE */

  1. contentbutnotcontentcuzigem h2 {
 /*padding-top: 90px;*/
 overflow: auto;
 font-size: 3em;
 text-align: center;

}

  1. contentbutnotcontentcuzigem h3 {
 font-size: 2em;

}

  1. contentbutnotcontentcuzigem h4 {
 font-size: 1.5em;

} .title { 

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

} p { 

 text-align: left;
 font-size: 1.25em;
 padding-left: 5%;
 font-family: 'Trebuchet MS';

}

  1. unordered-index {
 list-style: none;

}

  1. unordered-index {
 border: 10px solid #FF9290;
 background-color: #FF9290;
 border-radius: 20px;

} .hp-link { 

 font-family: 'Arial Rounded MT Bold';
 float: left;
 color: white;
 text-decoration: none;
 padding-right: 500px;

 -webkit-transform: translateX(-17%);

         transform: translateX(-17%);
 display: block;
 text-align: left;

} .education-link { 

 font-family: 'Arial Rounded MT Bold';
 float: left;
 color: white;
 padding-left: 0px;

 -webkit-transform: translate(2%,-7%);

         transform: translate(2%,-7%);
 text-decoration: none;
 display: block;
 text-align: left;

} .model-link { 

 font-family: 'Arial Rounded MT Bold';
 float: left;
 color: white;
 padding-left: 20px;
 padding-right: 0px;
 -webkit-transform: translate(-17%,-20%);
         transform: translate(-17%,-20%);
 text-decoration: none;
 display: block;
 text-align: left;

} .hp-link:hover, .education-link:hover, .model-link:hover { 

 color: #110034 !important;

}


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

 position: absolute;
 top: 600px;
 left: 47.1%; /*THIS IS FOR THE ARROW TO BE CENTERED*/
 z-index:5;

} .bot-arrow a:hover .bottom { 

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

} .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;
 width: 4em;
 height: 4em;
 border: 0.5em solid white;
 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 white;
 border-right: 0.5em solid white;
 -webkit-transform: rotate(135deg);
 transform: rotate(135deg);

}

/* PROGRESS RINGS */ .progress-ring__circle { 

 /*stroke-dasharray: 10 20; /* 10px dashes separated by 20px; */
 transition: stroke-dashoffset 0s;
 /* axis compensation */
 -webkit-transform: rotate(-90deg);
         transform: rotate(-90deg);
 -webkit-transform-origin: 50% 50%;
         transform-origin: 50% 50%;

} .svgplustext { 

 display: inline-flex;
 align-self:left;

} .svgplustexttwolines { 

 display: inline-flex;
 align-self:left;

} .svgplustext svg{ 

 display: inline-flex;
 stroke: white; /* border of number?*/
 -webkit-transform: translateY(35%);
         transform: translateY(35%); /* get number to line up with text*/
 align-self: left;

} .svgplustexttwolines svg{ 

 display: inline-flex;
 stroke: white; /* border of number?*/
 -webkit-transform: translateY(58%);
         transform: translateY(58%); /* get number to line up with text*/
 align-self: left;

}

  1. footer {
 position:absolute;
 bottom:0;
 background-color: #00054a;
 width:100%;
 height:300px;

}

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

}

  1. references-list {
 float:left;
 text-align: left;
 padding-left: 10%;
 padding-right: 10%;
 font-family: 'Arial';
 background-color: white;

}

  1. references-list li {
 padding-top: 30px;

}

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

} h3 { 

 padding-left: 5%;

}


h4 { 

 padding-left: 5%;
 padding-top: 20px;

}

  1. bullet {
 float:left;
 padding-right: 3%;
 width: 100px;
 height: 100px;

}

  1. tables {
 padding-right: 3%;
 width: 800px;
 height: 500px;

}

  1. pic1 {
 padding-right: 3%;
 width: 800px;
 height: 800px;

}

  1. pic2 {
 padding-right: 3%;
 width: 800px;
 height: 500px;

}

  1. pic3 {
 padding-right: 3%;
 width: 800px;
 height: 300px;

}

.image-container { 

 width: 850px;
 height: 352px;
 position: relative;
 padding-left: 3%;

} .slider-image { 

 width: 800px;

}


  1. caption {
 text-align: left;
 font-size: 1em;

}

  1. ref {
 float: left;
 text-align:left;
 padding-left: 20%;
 background-color: white;

}

.references { 

 padding-bottom: 300px;
 /*height: 100%;*/
 color:black;
 background-color: white;

}