Difference between revisions of "Template:Bristol/css/style"

m
 
(17 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
/* Fix for random black bar at top :D*/
 
/* Fix for random black bar at top :D*/
−
#content .mw-content-ltr > p {
+
 
 +
#content .mw-content-ltr>p {
 
   margin: 0;
 
   margin: 0;
−
}
 
−
 
−
#content .rounded-image {
 
−
  border-radius: 15px;
 
 
}
 
}
  
Line 13: Line 10:
 
   right: 20px;
 
   right: 20px;
 
   width: 10vw;
 
   width: 10vw;
−
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
+
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
−
   filter: gray; /* IE6-9 */
+
  /* Firefox 3.5+ */
−
   -webkit-filter: grayscale(100%); /* Chrome 19+ &amp; Safari 6+ */
+
   filter: gray;
 +
  /* IE6-9 */
 +
   -webkit-filter: grayscale(100%);
 +
  /* Chrome 19+ &amp; Safari 6+ */
 
   opacity: 0.5;
 
   opacity: 0.5;
 
}
 
}
Line 39: Line 39:
 
}
 
}
  
−
#content .notebook {
+
#content .people a {
 +
  color: inherit;
 
}
 
}
 +
 +
#content .people a:hover {
 +
  color: inherit;
 +
  text-decoration: none;
 +
}
 +
 +
#content .notebook {}
  
 
#content .notebook img {
 
#content .notebook img {
Line 60: Line 68:
 
   text-align: center;
 
   text-align: center;
 
}
 
}
−
 
  
 
#content .banner {
 
#content .banner {
 
   color: #ffffff;
 
   color: #ffffff;
−
   text-shadow: 2px 2px #9e9e9e;
+
   text-shadow: 2px 2px #9e9e9e;
 
   position: relative;
 
   position: relative;
 
   overflow-x: hidden;
 
   overflow-x: hidden;
Line 70: Line 77:
 
   min-height: 100vh;
 
   min-height: 100vh;
 
   width: 100%;
 
   width: 100%;
−
   background: blue; /* For browsers that do not support gradients */
+
   background: #69C5D6;
−
   background: -webkit-linear-gradient(#69C5D6 90%, #ffffff); /* For Safari 5.1 to 6.0 */
+
  /* For browsers that do not support gradients */
−
   background: -o-linear-gradient(#69C5D6 90%, #ffffff); /* For Opera 11.1 to 12.0 */
+
   background: -webkit-linear-gradient(#69C5D6 80%, #ffffff);
−
   background: -moz-linear-gradient(#69C5D6 90%, #ffffff); /* For Firefox 3.6 to 15 */
+
  /* For Safari 5.1 to 6.0 */
−
   background: linear-gradient(#69C5D6 90%, #ffffff); /* Standard syntax */
+
   background: -o-linear-gradient(#69C5D6 80%, #ffffff);
 +
  /* For Opera 11.1 to 12.0 */
 +
   background: -moz-linear-gradient(#69C5D6 80%, #ffffff);
 +
  /* For Firefox 3.6 to 15 */
 +
   background: linear-gradient(#69C5D6 80%, #ffffff);
 +
  /* Standard syntax */
 
}
 
}
  
Line 83: Line 95:
 
}
 
}
  
−
#content .banner-img > img {
+
#content .banner-img>img {
−
   min-height: 90vh;
+
   max-height: 80vh;
−
   object-fit: contain;
+
   max-width: 80vw;
 +
  height: auto;
 
}
 
}
  
Line 95: Line 108:
 
   overflow: hidden;
 
   overflow: hidden;
 
   min-height: 20vh;
 
   min-height: 20vh;
 +
}
 +
 +
#content .centreimage {
 +
  vertical-align: middle;
 +
  display: block;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
}
 +
 +
#content .centrevid {
 +
  display: block;
 +
  margin: 0 auto;
 +
  width: 840;
 
}
 
}
  
Line 104: Line 130:
 
}
 
}
  
−
#content .banner-text-sm > h1 {
+
#content .banner-text-sm>h1 {
 
   font-size: 5rem;
 
   font-size: 5rem;
 
}
 
}
  
−
#content .banner-text-sm > p {
+
#content .banner-text-sm>p {
 
   text-align: center;
 
   text-align: center;
 
   font-size: 2rem;
 
   font-size: 2rem;
 
   font-weight: 300;
 
   font-weight: 300;
 +
}
 +
 +
#content .background {
 +
  margin: 40px 0px 40px 0px;
 +
}
 +
 +
#content .background h2 {
 +
  text-align: center;
 +
  padding: 0px 15px 15px 15px;
 +
}
 +
 +
#content .background p {
 +
  font-size: 1.25rem;
 +
  font-weight: 300;
 +
}
 +
 +
#content .background {}
 +
 +
#content .background img {
 +
  width: 100%;
 +
  padding: 20px 0px 20px 0px;
 +
}
 +
 +
#content .medal-img {
 +
  width: 100%;
 +
}
 +
 +
#content .medal-title {
 +
  font-size: 5rem;
 +
  font-weight: 300;
 +
  margin-bottom: 20px;
 +
}
 +
 +
#content .medal-link {
 +
  transition: all .2s ease-in-out;
 +
}
 +
 +
#content .medal-link:hover {
 +
  transform: scale(1.1);
 +
}
 +
 +
#content .medal-link>a {
 +
  text-decoration: none;
 +
}
 +
 +
#content .medals {
 +
  text-align: center;
 +
}
 +
 +
#content .medal-bronze {
 +
  text-align: center;
 +
  font-size: 2.5rem;
 +
  font-weight: 300;
 +
  color: #fff;
 +
  background-color: #cd7f32;
 +
  border-radius: 20px;
 +
  padding: 10px;
 +
  width: 100%;
 +
}
 +
 +
#content .medal-silver {
 +
  text-align: center;
 +
  font-size: 2.5rem;
 +
  font-weight: 300;
 +
  color: #fff;
 +
  background-color: #c0c0c0;
 +
  border-radius: 20px;
 +
  padding: 10px;
 +
}
 +
 +
#content .medal-gold {
 +
  text-align: center;
 +
  font-size: 2.5rem;
 +
  font-weight: 300;
 +
  color: #fff;
 +
  background-color: #daa520;
 +
  border-radius: 20px;
 +
  padding: 10px;
 +
}
 +
 +
#content .model-button {
 +
  text-align: center;
 +
  font-size: 2.5rem;
 +
  font-weight: 300;
 +
  color: #fff;
 +
  background-color: #69c5d6;
 +
  border-radius: 20px;
 +
  padding: 10px;
 +
  width: 100%;
 +
}
 +
 +
#content .design-button {
 +
  text-align: center;
 +
  font-size: 2rem;
 +
  font-weight: 300;
 +
  color: #fff;
 +
  background-color: #69c5d6;
 +
  border-radius: 20px;
 +
  padding: 10px;
 +
  width: 100%;
 +
}
 +
 +
#content .engagement-button {
 +
  text-align: center;
 +
  font-size: 1.5rem;
 +
  font-weight: 300;
 +
  color: #fff;
 +
  background-color: #69c5d6;
 +
  border-radius: 20px;
 +
  padding: 10px;
 +
  width: 100%;
 +
}
 +
 +
#content .award {
 +
  text-align: center;
 +
  font-size: 2.5rem;
 +
  font-weight: 300;
 +
  color: #fff;
 +
  background-color: #69c5d6;
 +
  border-radius: 20px;
 +
  padding: 10px;
 +
}
 +
 +
#content .parts {
 +
  margin-top: 50px;
 +
  margin-bottom: 50px;
 +
}
 +
 +
#content .parts h3 {
 +
  text-align: center;
 +
  font-size: 1.25rem;
 +
  font-weight: 400;
 +
}
 +
 +
#content .parts p {
 +
  font-size: 1.25rem;
 +
  font-weight: 300;
 +
}
 +
 +
#content .parts img {
 +
  width: 100%;
 +
  padding: 20px 0px 20px 0px;
 +
}
 +
 +
#content .protocol {}
 +
 +
#content .protocol img {
 +
  height: 20vh;
 +
  padding: 20px;
 +
}
 +
 +
#content .protocol h2 {
 +
  font-size: 2rem;
 +
  font-weight: 300;
 +
}
 +
 +
#content .protocol li {
 +
  border: none;
 +
  font-size: 1.3rem;
 +
  font-weight: 300;
 +
}
 +
 +
#content .btn-protocol {
 +
  font-size: 2rem;
 +
  font-weight: 300;
 +
}
 +
 +
#content .pod img {
 +
  width: 100%;
 +
  padding-top: 20px;
 +
}
 +
 +
.rotate90 {
 +
  -webkit-transform: rotate(90deg);
 +
  -moz-transform: rotate(90deg);
 +
  -o-transform: rotate(90deg);
 +
  -ms-transform: rotate(90deg);
 +
  transform: rotate(90deg);
 
}
 
}
  
Line 143: Line 347:
 
#content .footer a:hover {
 
#content .footer a:hover {
 
   color: inherit;
 
   color: inherit;
 +
  text-decoration: none;
 
}
 
}
  
Line 173: Line 378:
 
#content .sponsor {
 
#content .sponsor {
 
   text-align: center;
 
   text-align: center;
−
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
 
−
  filter: gray; /* IE6-9 */
 
−
  -webkit-filter: grayscale(100%); /* Chrome 19+ &amp; Safari 6+ */
 
 
}
 
}
  
−
#content .sponsor p {
+
#content .sponsor h2 {
−
   text-align: center;
+
   text-align: left;
−
  color: #fff;
+
 
}
 
}
  
Line 186: Line 387:
 
   margin: 20px;
 
   margin: 20px;
 
   width: 150px;
 
   width: 150px;
 +
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
 +
  /* Firefox 3.5+ */
 +
  filter: gray;
 +
  /* IE6-9 */
 +
  -webkit-filter: grayscale(100%);
 +
  /* Chrome 19+ &amp; Safari 6+ */
 
}
 
}
  
−
#content .sponsor:hover {
+
#content .sponsor img:hover {
 
   filter: none;
 
   filter: none;
 
   -webkit-filter: grayscale(0%);
 
   -webkit-filter: grayscale(0%);
 +
}
 +
 +
#content .sponsor a {
 +
  color: inherit;
 +
}
 +
 +
#content .sponsor a:hover {
 +
  color: inherit;
 +
  text-decoration: none;
 +
}
 +
 +
#content .table-bristol>thead>tr>th {
 +
  background-color: #69c5d6;
 +
}
 +
 +
#content .navibtn {
 +
  text-align: center;
 +
  background-color: #69c5d6;
 +
  border-radius: 10px;
 +
  padding: 10px;
 +
  margin: 20px;
 +
}
 +
 +
#content .navibtn p {
 +
  font-size: 1.5rem;
 +
  font-weight: 500;
 +
  color: #fff;
 +
}
 +
 +
#content .requirement {
 +
  text-align: center;
 +
  font-size: 1.5rem;
 +
  font-weight: 500;
 +
  color: #fff;
 +
  background-color: #69c5d6;
 +
  border-radius: 20px;
 +
  padding: 10px;
 +
}
 +
 +
#content .solution {
 +
  text-align: center;
 +
  font-size: 1.5rem;
 +
  font-weight: 500;
 +
  color: #fff;
 +
  background-color: #51c05e;
 +
  border-radius: 20px;
 +
  padding: 10px;
 
}
 
}
  
Line 196: Line 450:
 
   position: relative;
 
   position: relative;
 
   overflow-x: hidden;
 
   overflow-x: hidden;
−
   min-height: 200px;
+
   min-height: 400px;
 
}
 
}
  
Line 206: Line 460:
 
   height: 200px;
 
   height: 200px;
 
   transform: translate(-50%, -50%);
 
   transform: translate(-50%, -50%);
−
   background-color: #bbbbbb;
+
   /*background-color: #bbb;*/
 
   border-radius: 5px;
 
   border-radius: 5px;
 
}
 
}
  
−
#content .reactor div{
+
#content .reactor img {
 +
  position: absolute;
 +
  top: 50%;
 +
  left: 50%;
 +
  width: auto;
 +
  height: 400px;
 +
  transform: translate(-50%, -50%);
 +
}
 +
 
 +
#content .reactor div {
 
   margin-top: 50%;
 
   margin-top: 50%;
 
   transform: translateY(-50%);
 
   transform: translateY(-50%);
Line 223: Line 486:
 
   height: 70px;
 
   height: 70px;
 
   border-radius: 70px;
 
   border-radius: 70px;
−
   top: 50%;
+
   top: 40%;
 
   transform: translate(50%, -50%);
 
   transform: translate(50%, -50%);
−
 
 
   animation: reactant-animate 3s linear infinite;
 
   animation: reactant-animate 3s linear infinite;
 
}
 
}
Line 233: Line 495:
 
   top: 15%;
 
   top: 15%;
 
   text-align: center;
 
   text-align: center;
−
   font-size: 2rem;
+
   font-size: 1.9rem;
 +
  font-weight: 500;
 
   color: #ffffff;
 
   color: #ffffff;
 
   transform: translate(-50%);
 
   transform: translate(-50%);
Line 241: Line 504:
  
 
#content .reactant:nth-child(2) {
 
#content .reactant:nth-child(2) {
−
   top: 20%;
+
   top: 30%;
 
   animation: reactant-animate -3s 5s linear infinite;
 
   animation: reactant-animate -3s 5s linear infinite;
 
}
 
}
  
 
#content .reactant:nth-child(3) {
 
#content .reactant:nth-child(3) {
−
   top: 60%;
+
   top: 50%;
 
   animation: reactant-animate -2s 4s linear infinite;
 
   animation: reactant-animate -2s 4s linear infinite;
 
}
 
}
  
 
#content .reactant:nth-child(4) {
 
#content .reactant:nth-child(4) {
−
   top: 80%;
+
   top: 60%;
 
   animation: reactant-animate -1s 6s linear infinite;
 
   animation: reactant-animate -1s 6s linear infinite;
 
}
 
}
Line 273: Line 536:
 
     opacity: 0;
 
     opacity: 0;
 
   }
 
   }
−
 
 
   10% {
 
   10% {
 
     right: 90%;
 
     right: 90%;
 
     opacity: 1;
 
     opacity: 1;
 
   }
 
   }
−
 
 
   49% {
 
   49% {
 
     background-color: #0000bb;
 
     background-color: #0000bb;
Line 284: Line 545:
 
     opacity: 1;
 
     opacity: 1;
 
   }
 
   }
−
 
 
   51% {
 
   51% {
 
     background-color: #00bb00;
 
     background-color: #00bb00;
Line 290: Line 550:
 
     opacity: 1;
 
     opacity: 1;
 
   }
 
   }
−
 
 
   90% {
 
   90% {
 
     right: 10%;
 
     right: 10%;
 
     opacity: 1;
 
     opacity: 1;
 
   }
 
   }
−
 
 
   100% {
 
   100% {
 
     background-color: #00bb00;
 
     background-color: #00bb00;
Line 304: Line 562:
  
 
@keyframes reactant-after-animate {
 
@keyframes reactant-after-animate {
−
   0%{
+
   0% {
 
     content: "NOx";
 
     content: "NOx";
 
   }
 
   }
−
   49%{
+
   49% {
 
     content: "NOx";
 
     content: "NOx";
 
   }
 
   }
Line 319: Line 577:
  
 
#content .x1 {
 
#content .x1 {
−
-webkit-animation: animateCloud -9s 20s linear infinite;
+
  -webkit-animation: animateCloud -9s 20s linear infinite;
−
-moz-animation: animateCloud -9s 20s linear infinite;
+
  -moz-animation: animateCloud -9s 20s linear infinite;
−
animation: animateCloud -9s 20s linear infinite;
+
  -o-animation: animateCloud -9s 20s linear infinite;
−
 
+
  animation: animateCloud -9s 20s linear infinite;
−
-webkit-transform: scale(0.3);
+
  -webkit-transform: scale(0.3);
−
-moz-transform: scale(0.3);
+
  -moz-transform: scale(0.3);
−
transform: scale(0.3);
+
  transform: scale(0.3);
 
   position: absolute;
 
   position: absolute;
 
   top: 5%;
 
   top: 5%;
Line 332: Line 590:
  
 
#content .x2 {
 
#content .x2 {
−
-webkit-animation: animateCloud -15s 35s linear infinite;
+
  -webkit-animation: animateCloud -15s 35s linear infinite;
−
-moz-animation: animateCloud -15s 35s linear infinite;
+
  -moz-animation: animateCloud -15s 35s linear infinite;
−
animation: animateCloud -15s 35s linear infinite;
+
  -o-animation: animateCloud -15s 35s linear infinite;
−
 
+
  animation: animateCloud -15s 35s linear infinite;
−
-webkit-transform: scale(0.65);
+
  -webkit-transform: scale(0.65);
−
-moz-transform: scale(0.65);
+
  -moz-transform: scale(0.65);
−
transform: scale(0.65);
+
  transform: scale(0.65);
 
   position: absolute;
 
   position: absolute;
 
   top: 20%;
 
   top: 20%;
Line 345: Line 603:
  
 
#content .x3 {
 
#content .x3 {
−
-webkit-animation: animateCloud -25s 30s linear infinite;
+
  -webkit-animation: animateCloud -25s 30s linear infinite;
−
-moz-animation: animateCloud -25s 30s linear infinite;
+
  -moz-animation: animateCloud -25s 30s linear infinite;
−
animation: animateCloud -25s 30s linear infinite;
+
  -o-animation: animateCloud -25s 30s linear infinite;
−
 
+
  animation: animateCloud -25s 30s linear infinite;
−
-webkit-transform: scale(0.5);
+
  -webkit-transform: scale(0.5);
−
-moz-transform: scale(0.5);
+
  -moz-transform: scale(0.5);
−
transform: scale(0.5);
+
  transform: scale(0.5);
 
   position: absolute;
 
   position: absolute;
 
   top: 35%;
 
   top: 35%;
Line 358: Line 616:
  
 
#content .x4 {
 
#content .x4 {
−
-webkit-animation: animateCloud -5s 18s linear infinite;
+
  -webkit-animation: animateCloud -5s 18s linear infinite;
−
-moz-animation: animateCloud -5s 18s linear infinite;
+
  -moz-animation: animateCloud -5s 18s linear infinite;
−
animation: animateCloud -5s 18s linear infinite;
+
  -o-animation: animateCloud -5s 18s linear infinite;
−
 
+
  animation: animateCloud -5s 18s linear infinite;
−
-webkit-transform: scale(0.4);
+
  -webkit-transform: scale(0.4);
−
-moz-transform: scale(0.4);
+
  -moz-transform: scale(0.4);
−
transform: scale(0.4);
+
  transform: scale(0.4);
 
   position: absolute;
 
   position: absolute;
 
   top: 45%;
 
   top: 45%;
Line 371: Line 629:
  
 
#content .x5 {
 
#content .x5 {
−
-webkit-animation: animateCloud -18s 25s linear infinite;
+
  -webkit-animation: animateCloud -18s 25s linear infinite;
−
-moz-animation: animateCloud -18s 25s linear infinite;
+
  -moz-animation: animateCloud -18s 25s linear infinite;
−
animation: animateCloud -18s 25s linear infinite;
+
  -o-animation: animateCloud -18s 25s linear infinite;
−
 
+
  animation: animateCloud -18s 25s linear infinite;
−
-webkit-transform: scale(0.55);
+
  -webkit-transform: scale(0.55);
−
-moz-transform: scale(0.55);
+
  -moz-transform: scale(0.55);
−
transform: scale(0.55);
+
  transform: scale(0.55);
 
   position: absolute;
 
   position: absolute;
 
   top: 60%;
 
   top: 60%;
Line 384: Line 642:
  
 
#content .cloud {
 
#content .cloud {
−
background: #fff;
+
  background: #fff;
−
background: -moz-linear-gradient(top, #fff 5%, #f1f1f1 100%);
+
  background: -moz-linear-gradient(top, #fff 5%, #f1f1f1 100%);
−
background: -webkit-linear-gradient(top, #fff 5%,#f1f1f1 100%);
+
  background: -webkit-linear-gradient(top, #fff 5%, #f1f1f1 100%);
−
background: -o-linear-gradient(top, #fff 5%,#f1f1f1 100%);
+
  background: -o-linear-gradient(top, #fff 5%, #f1f1f1 100%);
−
background: -ms-linear-gradient(top, #fff 5%,#f1f1f1 100%);
+
  background: -ms-linear-gradient(top, #fff 5%, #f1f1f1 100%);
−
background: linear-gradient(top, #fff 5%,#f1f1f1 100%);
+
  background: linear-gradient(top, #fff 5%, #f1f1f1 100%);
−
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1',GradientType=0 );
+
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1', GradientType=0);
−
 
+
  -webkit-border-radius: 100px;
−
-webkit-border-radius: 100px;
+
  -moz-border-radius: 100px;
−
-moz-border-radius: 100px;
+
  border-radius: 100px;
−
border-radius: 100px;
+
  -webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
−
 
+
  -moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
−
-webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
+
  box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
−
-moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
+
  height: 120px;
−
box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
+
  position: relative;
−
 
+
  width: 350px;
−
height: 120px;
+
−
position: relative;
+
−
width: 350px;
+
 
}
 
}
  
Line 409: Line 664:
 
   content: '';
 
   content: '';
 
   position: absolute;
 
   position: absolute;
−
z-indeX: -1;
+
  z-indeX: -1;
 
}
 
}
  
 
#content .cloud:after {
 
#content .cloud:after {
−
-webkit-border-radius: 100px;
+
  -webkit-border-radius: 100px;
−
-moz-border-radius: 100px;
+
  -moz-border-radius: 100px;
−
border-radius: 100px;
+
  border-radius: 100px;
−
 
+
  height: 100px;
−
height: 100px;
+
  left: 50px;
−
left: 50px;
+
  top: -50px;
−
top: -50px;
+
  width: 100px;
−
width: 100px;
+
 
}
 
}
  
 
#content .cloud:before {
 
#content .cloud:before {
−
-webkit-border-radius: 200px;
+
  -webkit-border-radius: 200px;
−
-moz-border-radius: 200px;
+
  -moz-border-radius: 200px;
−
border-radius: 200px;
+
  border-radius: 200px;
−
 
+
  width: 180px;
−
width: 180px;
+
  height: 180px;
−
height: 180px;
+
  right: 50px;
−
right: 50px;
+
  top: -90px;
−
top: -90px;
+
 
}
 
}
  
Line 443: Line 696:
 
}
 
}
  
−
#content .fadeIn {
+
#content .fadeIn {}
−
}
+
  
 
#content .fadeIn.Up, .fadeIn .Up {
 
#content .fadeIn.Up, .fadeIn .Up {
Line 510: Line 762:
 
     transform: scale(1);
 
     transform: scale(1);
 
   }
 
   }
 +
}
 +
 +
/* Over ride carousel */
 +
 +
#content .img-fluid {
 +
  width: 100%;
 +
  height: 100%;
 +
  border-radius: 20px;
 +
}
 +
 +
#content .img-fluid-edit {
 +
  width: 80%;
 +
  height: 80%;
 +
  border-radius: 20px;
 +
  display: block;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
}
 +
 +
#content .img-fluid-small {
 +
  width: 50%;
 +
  height: 50%;
 +
  border-radius: 20px;
 +
  display: block;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
}
 +
 +
#content .img-fluid-portrait {
 +
  width: 30%;
 +
  height: 30%;
 +
  border-radius: 20px;
 +
  display: block;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
}
 +
 +
#content .carousel-control-next-icon {
 +
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2aaa0000' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
 +
}
 +
 +
#content .carousel-control-prev-icon {
 +
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2aaa0000' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
 +
  -webkit-transform: rotate(180deg);
 +
  -moz-transform: rotate(180deg);
 +
  -ms-transform: rotate(180deg);
 +
  -o-transform: rotate(180deg);
 +
  transform: rotate(180deg);
 
}
 
}
  
Line 516: Line 816:
  
 
#content .featurette-divider {
 
#content .featurette-divider {
−
   margin: 5rem 0; /* Space out the Bootstrap <hr> more */
+
   margin: 5rem 0;
 +
  /* Space out the Bootstrap <hr> more */
 
}
 
}
  
 
/* Thin out the marketing headings */
 
/* Thin out the marketing headings */
 +
 
#content .featurette-heading {
 
#content .featurette-heading {
 
   font-weight: 300;
 
   font-weight: 300;
 +
  line-height: 1;
 +
  letter-spacing: -.05rem;
 +
}
 +
 +
#content .featurette-subheading {
 +
  font-weight: 300;
 +
  font-size: 2.5rem;
 
   line-height: 1;
 
   line-height: 1;
 
   letter-spacing: -.05rem;
 
   letter-spacing: -.05rem;
Line 533: Line 842:
  
 
/* Remove bootstrap dropdown caret */
 
/* Remove bootstrap dropdown caret */
 +
 
#content .dropdown-toggle::after {
 
#content .dropdown-toggle::after {
−
    display:none
+
  display: none
 
}
 
}
  
 
/* Bootstrap dropdown on hover*/
 
/* Bootstrap dropdown on hover*/
 +
 
@media (min-width: 992px) {
 
@media (min-width: 992px) {
 
   #content .dropdown:hover .dropdown-menu {
 
   #content .dropdown:hover .dropdown-menu {
Line 550: Line 861:
  
 
@media (min-width: 40em) {
 
@media (min-width: 40em) {
−
  /* Bump up size of carousel content */
 
−
  #content .carousel-caption p {
 
−
    margin-bottom: 1.25rem;
 
−
    font-size: 1.25rem;
 
−
    line-height: 1.4;
 
−
  }
 
−
 
 
   #content .featurette-heading {
 
   #content .featurette-heading {
−
     font-size: 50px;
+
     font-size: 3.5rem;
 
   }
 
   }
 
}
 
}
  
 +
/*
 
@media (min-width: 62em) {
 
@media (min-width: 62em) {
 
   #content .featurette-heading {
 
   #content .featurette-heading {
 
     margin-top: 7rem;
 
     margin-top: 7rem;
 
   }
 
   }
−
}
+
}*/

Latest revision as of 16:53, 14 December 2017

/* Fix for random black bar at top :D*/

  1. content .mw-content-ltr>p {
 margin: 0;

}

  1. content .igem-logo {
 position: absolute;
 top: 20px;
 right: 20px;
 width: 10vw;
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
 /* Firefox 3.5+ */
 filter: gray;
 /* IE6-9 */
 -webkit-filter: grayscale(100%);
 /* Chrome 19+ & Safari 6+ */
 opacity: 0.5;

}

  1. content .igem-logo img {
 max-width: 100%;

}

  1. content .team {
 text-align: center;
 width: 100%;

}

  1. content .smallheadshot {
 text-align: center;
 height: 20vh;
 margin-top: 20px;
 border-radius: 100%;

}

  1. content .people {
 overflow: hidden;

}

  1. content .people a {
 color: inherit;

}

  1. content .people a:hover {
 color: inherit;
 text-decoration: none;

}

  1. content .notebook {}
  1. content .notebook img {
 height: 20vh;
 padding: 20px;

}

  1. content .notebook h2 {
 font-size: 3rem;

}

  1. content .notebook li {
 border: none;
 font-size: 1.3rem;
 font-weight: 300;

}

  1. content .notebookicon {
 text-align: center;

}

  1. content .banner {
 color: #ffffff;
 text-shadow: 2px 2px #9e9e9e;
 position: relative;
 overflow-x: hidden;
 text-align: center;
 min-height: 100vh;
 width: 100%;
 background: #69C5D6;
 /* For browsers that do not support gradients */
 background: -webkit-linear-gradient(#69C5D6 80%, #ffffff);
 /* For Safari 5.1 to 6.0 */
 background: -o-linear-gradient(#69C5D6 80%, #ffffff);
 /* For Opera 11.1 to 12.0 */
 background: -moz-linear-gradient(#69C5D6 80%, #ffffff);
 /* For Firefox 3.6 to 15 */
 background: linear-gradient(#69C5D6 80%, #ffffff);
 /* Standard syntax */

}

  1. content .banner-img {
 position: relative;
 /*margin-top: 30vh;
 transform: translateY(-30%);*/

}

  1. content .banner-img>img {
 max-height: 80vh;
 max-width: 80vw;
 height: auto;

}

  1. content .banner-sm {
 width: 100%;
 position: relative;
 left: 50%;
 transform: translateX(-50%);
 overflow: hidden;
 min-height: 20vh;

}

  1. content .centreimage {
 vertical-align: middle;
 display: block;
 margin-left: auto;
 margin-right: auto;

}

  1. content .centrevid {
 display: block;
 margin: 0 auto;
 width: 840;

}

  1. content .banner-text-sm {
 text-align: center;
 position: relative;
 margin-top: 10vh;
 transform: translateY(-10%);

}

  1. content .banner-text-sm>h1 {
 font-size: 5rem;

}

  1. content .banner-text-sm>p {
 text-align: center;
 font-size: 2rem;
 font-weight: 300;

}

  1. content .background {
 margin: 40px 0px 40px 0px;

}

  1. content .background h2 {
 text-align: center;
 padding: 0px 15px 15px 15px;

}

  1. content .background p {
 font-size: 1.25rem;
 font-weight: 300;

}

  1. content .background {}
  1. content .background img {
 width: 100%;
 padding: 20px 0px 20px 0px;

}

  1. content .medal-img {
 width: 100%;

}

  1. content .medal-title {
 font-size: 5rem;
 font-weight: 300;
 margin-bottom: 20px;

}

  1. content .medal-link {
 transition: all .2s ease-in-out;

}

  1. content .medal-link:hover {
 transform: scale(1.1);

}

  1. content .medal-link>a {
 text-decoration: none;

}

  1. content .medals {
 text-align: center;

}

  1. content .medal-bronze {
 text-align: center;
 font-size: 2.5rem;
 font-weight: 300;
 color: #fff;
 background-color: #cd7f32;
 border-radius: 20px;
 padding: 10px;
 width: 100%;

}

  1. content .medal-silver {
 text-align: center;
 font-size: 2.5rem;
 font-weight: 300;
 color: #fff;
 background-color: #c0c0c0;
 border-radius: 20px;
 padding: 10px;

}

  1. content .medal-gold {
 text-align: center;
 font-size: 2.5rem;
 font-weight: 300;
 color: #fff;
 background-color: #daa520;
 border-radius: 20px;
 padding: 10px;

}

  1. content .model-button {
 text-align: center;
 font-size: 2.5rem;
 font-weight: 300;
 color: #fff;
 background-color: #69c5d6;
 border-radius: 20px;
 padding: 10px;
 width: 100%;

}

  1. content .design-button {
 text-align: center;
 font-size: 2rem;
 font-weight: 300;
 color: #fff;
 background-color: #69c5d6;
 border-radius: 20px;
 padding: 10px;
 width: 100%;

}

  1. content .engagement-button {
 text-align: center;
 font-size: 1.5rem;
 font-weight: 300;
 color: #fff;
 background-color: #69c5d6;
 border-radius: 20px;
 padding: 10px;
 width: 100%;

}

  1. content .award {
 text-align: center;
 font-size: 2.5rem;
 font-weight: 300;
 color: #fff;
 background-color: #69c5d6;
 border-radius: 20px;
 padding: 10px;

}

  1. content .parts {
 margin-top: 50px;
 margin-bottom: 50px;

}

  1. content .parts h3 {
 text-align: center;
 font-size: 1.25rem;
 font-weight: 400;

}

  1. content .parts p {
 font-size: 1.25rem;
 font-weight: 300;

}

  1. content .parts img {
 width: 100%;
 padding: 20px 0px 20px 0px;

}

  1. content .protocol {}
  1. content .protocol img {
 height: 20vh;
 padding: 20px;

}

  1. content .protocol h2 {
 font-size: 2rem;
 font-weight: 300;

}

  1. content .protocol li {
 border: none;
 font-size: 1.3rem;
 font-weight: 300;

}

  1. content .btn-protocol {
 font-size: 2rem;
 font-weight: 300;

}

  1. content .pod img {
 width: 100%;
 padding-top: 20px;

}

.rotate90 { 

 -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 -o-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 transform: rotate(90deg);

}

  1. content .footer {
 background: #F7F7F7;
 margin-top: 50px;
 padding-left: 50px;
 padding-right: 50px;
 padding-top: 20px;

}

  1. content .footer h4 {
 text-align: center;
 font-weight: 400;

}

  1. content .footer h5 {
 text-align: center;
 font-weight: 400;

}

  1. content .footer h6 {
 text-align: center;
 font-weight: 300;

}

  1. content .footer a {
 color: inherit;

}

  1. content .footer a:hover {
 color: inherit;
 text-decoration: none;

}

  1. content footer p {
 text-align: center;
 margin: 0 !important;
 padding-bottom: 16px;

}

  1. content .footer-social {
 width: 100%;
 text-align: center;

}

  1. content .footer-social img {
 width: 80px;
 padding: 20px;
 text-shadow:

}

  1. content .footer-team {
 text-align: center;

}

  1. content .footer-team img {
 height: 150px;
 width: 150px;

}

  1. content .sponsor {
 text-align: center;

}

  1. content .sponsor h2 {
 text-align: left;

}

  1. content .sponsor img {
 margin: 20px;
 width: 150px;
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
 /* Firefox 3.5+ */
 filter: gray;
 /* IE6-9 */
 -webkit-filter: grayscale(100%);
 /* Chrome 19+ & Safari 6+ */

}

  1. content .sponsor img:hover {
 filter: none;
 -webkit-filter: grayscale(0%);

}

  1. content .sponsor a {
 color: inherit;

}

  1. content .sponsor a:hover {
 color: inherit;
 text-decoration: none;

}

  1. content .table-bristol>thead>tr>th {
 background-color: #69c5d6;

}

  1. content .navibtn {
 text-align: center;
 background-color: #69c5d6;
 border-radius: 10px;
 padding: 10px;
 margin: 20px;

}

  1. content .navibtn p {
 font-size: 1.5rem;
 font-weight: 500;
 color: #fff;

}

  1. content .requirement {
 text-align: center;
 font-size: 1.5rem;
 font-weight: 500;
 color: #fff;
 background-color: #69c5d6;
 border-radius: 20px;
 padding: 10px;

}

  1. content .solution {
 text-align: center;
 font-size: 1.5rem;
 font-weight: 500;
 color: #fff;
 background-color: #51c05e;
 border-radius: 20px;
 padding: 10px;

}

  1. content .reactor-animation {
 position: relative;
 overflow-x: hidden;
 min-height: 400px;

}

  1. content .reactor {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 200px;
 height: 200px;
 transform: translate(-50%, -50%);
 /*background-color: #bbb;*/
 border-radius: 5px;

}

  1. content .reactor img {
 position: absolute;
 top: 50%;
 left: 50%;
 width: auto;
 height: 400px;
 transform: translate(-50%, -50%);

}

  1. content .reactor div {
 margin-top: 50%;
 transform: translateY(-50%);
 text-align: center;
 font-size: 4rem;
 color: #ffffff

}

  1. content .reactant {
 position: absolute;
 width: 70px;
 height: 70px;
 border-radius: 70px;
 top: 40%;
 transform: translate(50%, -50%);
 animation: reactant-animate 3s linear infinite;

}

  1. content .reactant::after {
 position: relative;
 top: 15%;
 text-align: center;
 font-size: 1.9rem;
 font-weight: 500;
 color: #ffffff;
 transform: translate(-50%);
 animation: reactant-after-animate 3s linear infinite;
 content: "";

}

  1. content .reactant:nth-child(2) {
 top: 30%;
 animation: reactant-animate -3s 5s linear infinite;

}

  1. content .reactant:nth-child(3) {
 top: 50%;
 animation: reactant-animate -2s 4s linear infinite;

}

  1. content .reactant:nth-child(4) {
 top: 60%;
 animation: reactant-animate -1s 6s linear infinite;

}

  1. content .reactant:nth-child(2)::after {
 animation: reactant-after-animate -3s 5s linear infinite;

}

  1. content .reactant:nth-child(3)::after {
 animation: reactant-after-animate -2s 4s linear infinite;

}

  1. content .reactant:nth-child(4)::after {
 animation: reactant-after-animate -1s 6s linear infinite;

}

@keyframes reactant-animate { 

 0% {
   background-color: #0000bb;
   right: 100%;
   opacity: 0;
 }
 10% {
   right: 90%;
   opacity: 1;
 }
 49% {
   background-color: #0000bb;
   right: 50%;
   opacity: 1;
 }
 51% {
   background-color: #00bb00;
   right: 50%;
   opacity: 1;
 }
 90% {
   right: 10%;
   opacity: 1;
 }
 100% {
   background-color: #00bb00;
   right: 0%;
   opacity: 0;
 }

}

@keyframes reactant-after-animate { 

 0% {
   content: "NOx";
 }
 49% {
   content: "NOx";
 }
 50% {
   content: "NH4";
 }
 100% {
   content: "NH4";
 }

}

  1. content .x1 {
 -webkit-animation: animateCloud -9s 20s linear infinite;
 -moz-animation: animateCloud -9s 20s linear infinite;
 -o-animation: animateCloud -9s 20s linear infinite;
 animation: animateCloud -9s 20s linear infinite;
 -webkit-transform: scale(0.3);
 -moz-transform: scale(0.3);
 transform: scale(0.3);
 position: absolute;
 top: 5%;
 z-index: 2;

}

  1. content .x2 {
 -webkit-animation: animateCloud -15s 35s linear infinite;
 -moz-animation: animateCloud -15s 35s linear infinite;
 -o-animation: animateCloud -15s 35s linear infinite;
 animation: animateCloud -15s 35s linear infinite;
 -webkit-transform: scale(0.65);
 -moz-transform: scale(0.65);
 transform: scale(0.65);
 position: absolute;
 top: 20%;
 z-index: 2;

}

  1. content .x3 {
 -webkit-animation: animateCloud -25s 30s linear infinite;
 -moz-animation: animateCloud -25s 30s linear infinite;
 -o-animation: animateCloud -25s 30s linear infinite;
 animation: animateCloud -25s 30s linear infinite;
 -webkit-transform: scale(0.5);
 -moz-transform: scale(0.5);
 transform: scale(0.5);
 position: absolute;
 top: 35%;
 z-index: 2;

}

  1. content .x4 {
 -webkit-animation: animateCloud -5s 18s linear infinite;
 -moz-animation: animateCloud -5s 18s linear infinite;
 -o-animation: animateCloud -5s 18s linear infinite;
 animation: animateCloud -5s 18s linear infinite;
 -webkit-transform: scale(0.4);
 -moz-transform: scale(0.4);
 transform: scale(0.4);
 position: absolute;
 top: 45%;
 z-index: 2;

}

  1. content .x5 {
 -webkit-animation: animateCloud -18s 25s linear infinite;
 -moz-animation: animateCloud -18s 25s linear infinite;
 -o-animation: animateCloud -18s 25s linear infinite;
 animation: animateCloud -18s 25s linear infinite;
 -webkit-transform: scale(0.55);
 -moz-transform: scale(0.55);
 transform: scale(0.55);
 position: absolute;
 top: 60%;
 z-index: 2;

}

  1. content .cloud {
 background: #fff;
 background: -moz-linear-gradient(top, #fff 5%, #f1f1f1 100%);
 background: -webkit-linear-gradient(top, #fff 5%, #f1f1f1 100%);
 background: -o-linear-gradient(top, #fff 5%, #f1f1f1 100%);
 background: -ms-linear-gradient(top, #fff 5%, #f1f1f1 100%);
 background: linear-gradient(top, #fff 5%, #f1f1f1 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1', GradientType=0);
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
 border-radius: 100px;
 -webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
 -moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
 box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
 height: 120px;
 position: relative;
 width: 350px;

}

  1. content .cloud:after, .cloud:before {
 background: #fff;
 content: ;
 position: absolute;
 z-indeX: -1;

}

  1. content .cloud:after {
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
 border-radius: 100px;
 height: 100px;
 left: 50px;
 top: -50px;
 width: 100px;

}

  1. content .cloud:before {
 -webkit-border-radius: 200px;
 -moz-border-radius: 200px;
 border-radius: 200px;
 width: 180px;
 height: 180px;
 right: 50px;
 top: -90px;

}

@keyframes animateCloud { 

 0% {
   left: -1000px;
 }
 100% {
   left: 100%;
 }

}

  1. content .fadeIn {}
  1. content .fadeIn.Up, .fadeIn .Up {
 opacity: 0;
 transition: all 500ms ease-in;
 transform: translateY(5vh);

}

  1. content .fadedIn.Up, .fadedIn .Up {
 opacity: 1;
 transform: translateY(0);

}

  1. content .fadeIn.Down, .fadeIn .Down {
 opacity: 0;
 transition: all 500ms ease-in;
 transform: translateY(-5vh);

}

  1. content .fadedIn.Down, .fadedIn .Down {
 opacity: 1;
 transform: translateY(0);

}

  1. content .fadeIn.Left, .fadeIn .Left {
 opacity: 0;
 transition: all 500ms ease-in;
 transform: translateX(-10vw);

}

  1. content .fadedIn.Left, .fadedIn .Left {
 opacity: 1;
 transform: translateX(0);

}

  1. content .fadeIn.Right, .fadeIn .Right {
 opacity: 0;
 transition: all 500ms ease-in;
 transform: translateX(10vw);

}

  1. content .fadedIn.Right, .fadedIn .Right {
 opacity: 1;
 transform: translateX(0);

}

  1. content .fadeIn.Pop, .fadeIn .Pop {
 opacity: 0;
 transition: all 700ms ease-in;

}

  1. content .fadedIn.Pop, .fadedIn .Pop {
 opacity: 1;
 animation: fadeInPop 700ms linear;

}

@keyframes fadeInPop { 

 0% {
   transform: scale(0);
 }
 80% {
   transform: scale(1.1);
 }
 100% {
   transform: scale(1);
 }

}

/* Over ride carousel */

  1. content .img-fluid {
 width: 100%;
 height: 100%;
 border-radius: 20px;

}

  1. content .img-fluid-edit {
 width: 80%;
 height: 80%;
 border-radius: 20px;
 display: block;
 margin-left: auto;
 margin-right: auto;

}

  1. content .img-fluid-small {
 width: 50%;
 height: 50%;
 border-radius: 20px;
 display: block;
 margin-left: auto;
 margin-right: auto;

}

  1. content .img-fluid-portrait {
 width: 30%;
 height: 30%;
 border-radius: 20px;
 display: block;
 margin-left: auto;
 margin-right: auto;

}

  1. content .carousel-control-next-icon {
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2aaa0000' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");

}

  1. content .carousel-control-prev-icon {
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2aaa0000' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 transform: rotate(180deg);

}

/* Featurettes

*/
  1. content .featurette-divider {
 margin: 5rem 0;
/* Space out the Bootstrap
more */

}

/* Thin out the marketing headings */

  1. content .featurette-heading {
 font-weight: 300;
 line-height: 1;
 letter-spacing: -.05rem;

}

  1. content .featurette-subheading {
 font-weight: 300;
 font-size: 2.5rem;
 line-height: 1;
 letter-spacing: -.05rem;

}

  1. content .featurette-image {
 border-radius: 100%;
 width: 100%;
 height: auto;

}

/* Remove bootstrap dropdown caret */

  1. content .dropdown-toggle::after {
 display: none

}

/* Bootstrap dropdown on hover*/

@media (min-width: 992px) { 

 #content .dropdown:hover .dropdown-menu {
   display: block;
   margin-top: 0;
   animation: fadeInPop 100ms linear;
 }

}

/* RESPONSIVE CSS

*/

@media (min-width: 40em) { 

 #content .featurette-heading {
   font-size: 3.5rem;
 }

}

/* @media (min-width: 62em) { 

 #content .featurette-heading {
   margin-top: 7rem;
 }

}*/