Team:Warwick/CSS

body{ 

 background-image: url("../images/DNABackground.svg");
 background-repeat: repeat-y;
 background-size: 100%;

}

/* @import url('https://fonts.googleapis.com/css?family=Raleway');*/

  • {
 margin: 0;
 padding: 0;
 font-family: "Century Gothic";

}

  1. body_div{
 position: relative;
 padding-bottom: 70px;
 top: 0;

}

  1. header{
 background-color: #12a8dd;
 height: 50px;
 width: 100%;
 position: fixed;
 background-image: url('https://static.igem.org/mediawiki/2018/5/50/T--Warwick--TransparentBanner.png');
 z-index: 50;
 box-shadow: inset 0px -2px 5px blue;

}

  1. header_content li{
 display: inline-block;
 list-style: none;

}

  1. header input[type=submit]{
 background-color: transparent;
 color: white;
 padding: 0px 8px;
 margin-top: -3px;
 border: 3px solid transparent;
 border-radius: 4px;
 font-size: 120%;
 cursor: pointer;

}

  1. header input[type=submit]:hover{
 background: #00A080;

}

  1. header_content{
 float: right;
 padding-right: 3%;
 padding-top: 14px;

}

  1. logo{
 width: 70%;
 margin-left: auto;
 margin-right: auto;
 display: block;
 padding-bottom: 5%;
 margin-top: 20px;

}

  1. mainbody{
 margin: 5px 20% 70px 20%;
 width: 100%;
 padding-top: 50px;
 display: inline-block;
 box-shadow: 0px 0px 40px black inset;
 border-bottom-left-radius: 25px;
 border-bottom-right-radius: 25px;
 background: linear-gradient(to right, #ccc, #eee, #ccc);
 padding-bottom: 3%;

}

  1. mainbody span{
 color: #ED483A;

}

  1. footer{
 margin-left: 20%;
 margin-right: 20%;
 background-image: url("T--Warwick--TransparentBanner.png");
 background-color: #ccc;
 border-top-left-radius: 16px;
 border-top-right-radius: 16px;
 width: 60%;  
 position: absolute;
 bottom: 0;  
 box-shadow: 0px 0px 10px black inset;
 height: 70px;

}

  1. footer img{
 width: 60%;
 height: 60%;
 margin: 20%;

}

  1. footer div{
 width: 50px;
 height: 50px;
 margin-top: 10px;
 margin-bottom: 10px;
 background-color: transparent;
 display: inline-block;

}

  1. youtubeLogo{
 margin-left: 3%;
 margin-right: 1%;

}

  1. youtubeLogo:hover{
 background: #bbb;

}

  1. twitterLogo:hover{
 background: #1DA1F2

}

  1. MainTitle{
 margin: 3% 20% 0% 20%;
 text-align: center;
 width: 60%;
 font-size: 300%;
 border-bottom: 3px solid #00c080;

}

  1. theTeam{
 margin: 0 auto;
 table-layout: fixed;
 width: 80%;

}

  1. theTeam td{
 padding: 3% 5%;

}

  1. profilePic{
 display: block;
 float: left;
 width: 125px;
 height: 125px;
 border-radius: 50%;
 box-shadow: 0px 0px 20px 0px black;

}

  1. profileDetails{
 margin-left: 10px;
 margin-top: -12px;
 display: block;
 float: left;

}

  1. profileDetails span{
 color: grey;

}

.button{ 

 display: inline-block;
 border-radius: 20px;
 background-color: white;
 border: none;
 color: #222;
 text-align: center;
 font-size: 18px;
 padding: 20px;
 width: 200px;
 transition: all 0.5s;
 cursor: pointer;
 margin: 5px;

}

.button span { 

 cursor: pointer;
 display: inline-block;
 position: relative;
 transition: 0.5s;

}

.button span:after { 

 content: '\00bb';
 position: absolute;
 opacity: 0;
 top: 0;
 right: -20px;
 transition: 0.5s;

}

.button:hover span { 

 padding-right: 25px;

}

.button:hover span:after { 

 opacity: 1;
 right: 0;

}

.aca-links{ 

 color: white;

}

.aca-links:hover{ 

 color: #22a0d3;

}

.aca-links:visited{ 

 color: #ED483A;

}

  1. iframeContainer{
 position: relative;
 width: 100%;
 height: 0;
 padding-bottom: 56.25%;

}

  1. video{
 position: absolute;
 top: 0;
 left: 10%;
 width: 80%;
 height: 80%;

}

.slideshow-container { 

 max-width: 1000px;
 position: relative;
 margin: auto;

}

  • {
   box-sizing:border-box;

}

/* Hide the images by default */ .mySlidesFade { 

   display: none;

}

/* Next & previous buttons */ .prev, .next { 

 cursor: pointer;
 position: absolute;
 top: 50%;
 width: auto;
 margin-top: -22px;
 padding: 16px;
 color: white;
 font-weight: bold;
 font-size: 18px;
 transition: 0.6s ease;
 border-radius: 0 3px 3px 0;
 background-color: rgba(50,50,50,0.5);

}

/* Position the "next button" to the right */ .next { 

 right: 0;
 border-radius: 3px 0 0 3px;

}

/* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { 

 background-color: rgba(0,0,0,0.8);

}

/* Caption text */ .text { 

 color: #f2f2f2;
 font-size: 15px;
 padding: 8px 12px;
 position: absolute;
 bottom: 4px;
 text-align: center;
 background-color: rgba(50,50,50,0.8);

}

/* Number text (1/3 etc) */ .numbertext { 

 color: #f2f2f2;
 background-color: rgba(50,50,50, 0.8);
 font-size: 12px;
 padding: 8px 12px;
 position: absolute;
 top: 0;

}

/* The dots/bullets/indicators */ .dot { 

 cursor: pointer;
 height: 15px;
 width: 15px;
 margin: 0 2px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
 transition: background-color 0.6s ease;

}

.active, .dot:hover { 

 background-color: #717171;

}

/* Fading animation */ .fade { 

 -webkit-animation-name: fade;
 -webkit-animation-duration: 1.5s;
 animation-name: fade;
 animation-duration: 1.5s;

}

@-webkit-keyframes fade { 

 from {opacity: .4} 
 to {opacity: 1}

}

@keyframes fade { 

 from {opacity: .4} 
 to {opacity: 1}

}

.text{ 

 height: 35px;
 transition: 0.4s;

}

.slideshow-container:hover .text{ 

 transition: 0.4s ease-out;
 background-color: rgba(50,50,50,0.95);

}

.text_inner{ 

 opacity: 0;
 visibility: hidden;

}

.text_inner h3{ 

 color: #ED483A;

}

.slideshow-container:hover .text_inner{ 

 visibility: visible;
 opacity: 1;
 transition: 0.5s opacity 0.4s;

}

.text:hover .arrows{ 

 display: none;

}

  1. text1{
 width: 30%;
 margin: 0% 35%;

}

.slideshow-container:hover #text1{ 

 height: 450px;
 width: 500px;
 margin: 0px 250px;

}

  1. text2{
 width: 20%;
 margin: 0% 40%;

}

.slideshow-container:hover #text2{ 

 height: 65%;
 width: 500px;
 margin: 0px 250px;

}

  1. text3{
 width: 20%;
 margin: 0% 40%;

}

.slideshow-container:hover #text3{ 

 height: 80%;
 width: 500px;
 margin: 0px 250px;

}

  1. text4{
 width: 20%;
 margin: 0% 40%;

}

.slideshow-container:hover #text4{ 

 height: 65%;
 width: 400px;
 margin: 0px 300px;

}

  1. text5{
 width: 20%;
 margin: 0% 40%;

}

.slideshow-container:hover #text5{ 

 height: 65%;
 width: 500px;
 margin: 0px 250px;

}