Team:Warwick/css/stylesheet.css

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

  • {
 margin: 0;
 padding: 0;
 font-family: "Raleway";

}

body{ 

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

}

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

}

  1. header{
 background-color: #00c080;
 height: 50px;
 width: 100%;
 position: fixed;
 background-image: url(../images/TransparentBanner.png);
 z-index: 50;
 box-shadow: inset 0px -2px 5px darkgreen;

}

  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: 60%;
 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("../images/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%;

}