Difference between revisions of "Team:UNOTT/CSS"

Line 4: Line 4:
 
   /*Make dropdown links appear inline*/
 
   /*Make dropdown links appear inline*/
  
−
nav ul {
+
  nav ul {
−
    position: static;
+
      position: static;
−
    display: flex;
+
      display: flex;
−
    float: right;
+
      float: right;
−
    margin: 0px;
+
      margin: 0px;
−
    margin-top:0px;
+
      margin-top:0px;
−
    padding: 0px 0px;
+
      padding: 0px 0px;
−
    justify-content:space-around;
+
      justify-content:space-around;
−
}
+
  }
 +
 
 +
  /* Create vertical spacing */
  
−
  /*Create vertical spacing*/
 
 
   li {
 
   li {
 
     margin-bottom: 1px;
 
     margin-bottom: 1px;
 
   }
 
   }
−
   /*Make all menu links full width*/
+
 
 +
 
 +
   /* Make all menu links full width */
 
   ul li,
 
   ul li,
 
   li a {
 
   li a {
 
     width: 100%;
 
     width: 100%;
 
   }
 
   }
−
}
+
 
  
  
Line 44: Line 47:
 
.content {
 
.content {
 
margin-top:50px;
 
margin-top:50px;
−
}
 
−
 
−
.col-centered {
 
−
  float: none;
 
−
  margin: 0 auto;
 
−
}
 
−
 
−
.backTop {
 
−
  height: 40px;
 
−
  width: 40px;
 
−
  position: fixed;
 
−
  bottom: 10px;
 
−
  right: 5px;
 
−
  z-index: 1000;
 
−
  cursor: pointer;
 
−
  -webkit-transition: all ease 0.4s;
 
−
  -moz-transition: all ease 0.4s;
 
−
  -ms-transition: all ease 0.4s;
 
−
  -o-transition: all ease 0.4s;
 
−
  transition: all ease 0.4s;
 
−
}
 
−
 
−
.backTop:hover {
 
−
  -webkit-transform: rotate(180deg);
 
−
  -moz-transform: rotate(180deg);
 
−
  -ms-transform: rotate(180deg);
 
−
  -o-transform: rotate(180deg);
 
−
  transform: rotate(180deg);
 
 
}
 
}
  
Line 114: Line 89:
 
   min-height: 400px;
 
   min-height: 400px;
 
   margin-bottom: 100px;
 
   margin-bottom: 100px;
−
}
 
−
 
−
 
−
.indent {
 
−
  text-indent: 50px;
 
−
}
 
−
 
−
hr {
 
−
  border-color: #333A56;
 
−
  border-width: 3px;
 
−
  max-width: 50px;
 
−
  margin-top: 25px;
 
−
  margin-bottom: 25px;
 
−
  margin-left: auto;
 
−
  margin-right: auto;
 
−
}
 
−
 
−
hr.light {
 
−
  border-color: white;
 
−
}
 
−
 
−
hr.grey {
 
−
  border-color: #E8E8E8;
 
−
}
 
−
 
−
hr.blue {
 
−
  border-color: #333A56;
 
 
}
 
}
  
Line 146: Line 94:
 
   padding-bottom: 97px;
 
   padding-bottom: 97px;
 
}
 
}
−
 
  
 
.container {
 
.container {
 
   margin-top:50px;
 
   margin-top:50px;
 
}
 
}
−
 
−
 
  
  
Line 160: Line 105:
 
   padding-top: 0px;
 
   padding-top: 0px;
 
}
 
}
−
 
  
 
/*adds necessary spacing to the navbar so links display correctly below the black iGEM navbar BACKGROUND*/
 
/*adds necessary spacing to the navbar so links display correctly below the black iGEM navbar BACKGROUND*/
Line 341: Line 285:
 
   line-height: 1.5;
 
   line-height: 1.5;
 
   margin-bottom: 20px;
 
   margin-bottom: 20px;
−
}
 
−
 
−
.bg-primary {
 
−
  background-color: #F7F5E6;
 
−
  color: black;
 
−
}
 
−
 
−
.bg-dark {
 
−
  background-color: #333A56;
 
−
}
 
−
 
−
.bg-danger {
 
−
  background-color: #52658F;
 
−
}
 
−
 
−
.text-faded {
 
−
  color: rgba(255, 255, 255, 0.7);
 
−
}
 
−
 
−
.text-dark {
 
−
  color: rgba(38, 12, 12, 0.8);
 
−
}
 
−
 
−
section {
 
−
  padding: 100px 0;
 
−
}
 
−
 
−
aside {
 
−
  padding: 50px 0;
 
−
}
 
−
 
−
.no-padding {
 
−
  padding: 0;
 
−
}
 
−
 
−
.section-heading {
 
−
  margin-top: 0;
 
−
}
 
−
 
−
.service-box {
 
−
  max-width: 400px;
 
−
  margin: 50px auto 0;
 
−
}
 
−
 
−
.call-to-action h2 {
 
−
  margin: 0 auto 20px;
 
−
}
 
−
 
−
.text-primary {
 
−
  color: #333A56;
 
−
}
 
−
 
−
.no-gutter > [class*='col-'] {
 
−
  padding-right: 0;
 
−
  padding-left: 0;
 
−
}
 
−
 
−
.btn-default {
 
−
  color: #222222;
 
−
  background-color: #F7F5E6!important;
 
−
  border-color: white;
 
−
  -webkit-transition: all 0.35s;
 
−
  -moz-transition: all 0.35s;
 
−
  transition: all 0.35s;
 
−
}
 
−
 
−
.btn-default:hover,
 
−
.btn-default:focus,
 
−
.btn-default.focus,
 
−
.btn-default:active,
 
−
.btn-default.active,
 
−
.open > .dropdown-toggle.btn-default {
 
−
  color: #222222;
 
−
  background-color: #E8E8E8 !important;
 
−
  border-color: #ededed !important;
 
−
}
 
−
 
−
.btn-default:active,
 
−
.btn-default.active,
 
−
.open > .dropdown-toggle.btn-default {
 
−
  background-image: none;
 
−
}
 
−
 
−
.btn-default.disabled,
 
−
.btn-default[disabled],
 
−
fieldset[disabled] .btn-default,
 
−
.btn-default.disabled:hover,
 
−
.btn-default[disabled]:hover,
 
−
fieldset[disabled] .btn-default:hover,
 
−
.btn-default.disabled:focus,
 
−
.btn-default[disabled]:focus,
 
−
fieldset[disabled] .btn-default:focus,
 
−
.btn-default.disabled.focus,
 
−
.btn-default[disabled].focus,
 
−
fieldset[disabled] .btn-default.focus,
 
−
.btn-default.disabled:active,
 
−
.btn-default[disabled]:active,
 
−
fieldset[disabled] .btn-default:active,
 
−
.btn-default.disabled.active,
 
−
.btn-default[disabled].active,
 
−
fieldset[disabled] .btn-default.active {
 
−
  background-color: white;
 
−
  border-color: white;
 
−
}
 
−
 
−
.btn-default .badge {
 
−
  color: white;
 
−
  background-color: #222222;
 
−
}
 
−
 
−
.btn-primary {
 
−
  color: white !important;
 
−
  background-color: #52658F !important;
 
−
  border-color: #333A56 !important;
 
−
  -webkit-transition: all 0.35s;
 
−
  -moz-transition: all 0.35s;
 
−
  transition: all 0.35s;
 
−
}
 
−
 
−
.btn-primary:hover,
 
−
.btn-primary:focus,
 
−
.btn-primary.focus,
 
−
.btn-primary:active,
 
−
.btn-primary.active,
 
−
.open > .dropdown-toggle.btn-primary {
 
−
  color: white !important;
 
−
  background-color: #333A56 !important;
 
−
  border-color: #52658F !important;
 
−
}
 
−
 
−
.btn-primary:active,
 
−
.btn-primary.active,
 
−
.open > .dropdown-toggle.btn-primary {
 
−
  background-image: none;
 
−
}
 
−
 
−
.btn-primary.disabled,
 
−
.btn-primary[disabled],
 
−
fieldset[disabled] .btn-primary,
 
−
.btn-primary.disabled:hover,
 
−
.btn-primary[disabled]:hover,
 
−
fieldset[disabled] .btn-primary:hover,
 
−
.btn-primary.disabled:focus,
 
−
.btn-primary[disabled]:focus,
 
−
fieldset[disabled] .btn-primary:focus,
 
−
.btn-primary.disabled.focus,
 
−
.btn-primary[disabled].focus,
 
−
fieldset[disabled] .btn-primary.focus,
 
−
.btn-primary.disabled:active,
 
−
.btn-primary[disabled]:active,
 
−
fieldset[disabled] .btn-primary:active,
 
−
.btn-primary.disabled.active,
 
−
.btn-primary[disabled].active,
 
−
fieldset[disabled] .btn-primary.active {
 
−
  background-color: #333A56;
 
−
  border-color: #333A56;
 
−
}
 
−
 
−
.btn-primary .badge {
 
−
  color: #333A56;
 
−
  background-color: white;
 
−
}
 
−
 
−
.btn {
 
−
  font-family: 'Quicksand', sans-serif;
 
−
  border: none;
 
−
  border-radius: 300px;
 
−
  font-weight: 400;
 
−
  font-size: 15px !important;
 
−
  text-transform: uppercase;
 
−
}
 
−
 
−
.btn-xl {
 
−
  padding: 15px 30px;
 
−
}
 
−
 
−
::-moz-selection {
 
−
  color: white;
 
−
  text-shadow: none;
 
−
  background: #222222;
 
−
}
 
−
 
−
::selection {
 
−
  color: white;
 
−
  text-shadow: none;
 
−
  background: #222222;
 
−
}
 
−
 
−
img::selection {
 
−
  color: white;
 
−
  background: transparent;
 
−
}
 
−
 
−
img::-moz-selection {
 
−
  color: white;
 
−
  background: transparent;
 
 
}
 
}
  
Line 542: Line 290:
 
   webkit-tap-highlight-color: #222222;
 
   webkit-tap-highlight-color: #222222;
 
}
 
}
−
 
  
 
/* TIMELINE */
 
/* TIMELINE */
Line 600: Line 347:
 
}
 
}
  
−
#cd-timeline {
 
−
  position: relative;
 
−
  padding: 2em 0;
 
−
  margin-top: 2em;
 
−
  margin-bottom: 2em;
 
−
}
 
−
 
−
#cd-timeline::before {
 
−
  /* this is the vertical line */
 
−
  content: '';
 
−
  position: absolute;
 
−
  top: 0;
 
−
  left: 18px;
 
−
  height: 100%;
 
−
  width: 4px;
 
−
  background: #d7e4ed;
 
−
}
 
−
 
−
@media only screen and (min-width: 1170px) {
 
−
  #cd-timeline {
 
−
    margin-top: 3em;
 
−
    margin-bottom: 3em;
 
−
  }
 
−
  #cd-timeline::before {
 
−
    left: 50%;
 
−
    margin-left: -2px;
 
−
  }
 
−
}
 
−
 
−
.cd-timeline-block {
 
−
  position: relative;
 
−
  margin: 2em 0;
 
−
}
 
−
 
−
.cd-timeline-block:after {
 
−
  content: "";
 
−
  display: table;
 
−
  clear: both;
 
−
}
 
−
 
−
.cd-timeline-block:first-child {
 
−
  margin-top: 0;
 
−
}
 
−
 
−
.cd-timeline-block:last-child {
 
−
  margin-bottom: 0;
 
−
}
 
−
 
−
@media only screen and (min-width: 1170px) {
 
−
  .cd-timeline-block {
 
−
    margin: 4em 0;
 
−
  }
 
−
  .cd-timeline-block:first-child {
 
−
    margin-top: 0;
 
−
  }
 
−
  .cd-timeline-block:last-child {
 
−
    margin-bottom: 0;
 
−
  }
 
−
}
 
−
 
−
.cd-timeline-img {
 
−
  position: absolute;
 
−
  top: 0;
 
−
  left: 0;
 
−
  width: 40px;
 
−
  height: 40px;
 
−
  border-radius: 50%;
 
−
  box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
 
−
}
 
−
 
−
.cd-timeline-img img {
 
−
  display: block;
 
−
  width: 24px;
 
−
  height: 24px;
 
−
  position: relative;
 
−
  left: 50%;
 
−
  top: 50%;
 
−
  margin-left: -12px;
 
−
  margin-top: -12px;
 
−
}
 
−
 
−
.cd-timeline-img.cd-picture {
 
−
  background: #75ce66;
 
−
}
 
−
 
−
.cd-timeline-img.cd-movie {
 
−
  background: #c03b44;
 
−
}
 
−
 
−
.cd-timeline-img.cd-location {
 
−
  background: #f0ca45;
 
−
}
 
−
 
−
@media only screen and (min-width: 1170px) {
 
−
  .cd-timeline-img {
 
−
    width: 60px;
 
−
    height: 60px;
 
−
    left: 50%;
 
−
    margin-left: -30px;
 
−
    /* Force Hardware Acceleration in WebKit */
 
−
    -webkit-transform: translateZ(0);
 
−
    -webkit-backface-visibility: hidden;
 
−
  }
 
−
  .cssanimations .cd-timeline-img.is-hidden {
 
−
    visibility: hidden;
 
−
  }
 
−
  .cssanimations .cd-timeline-img.bounce-in {
 
−
    visibility: visible;
 
−
    -webkit-animation: cd-bounce-1 0.6s;
 
−
    -moz-animation: cd-bounce-1 0.6s;
 
−
    animation: cd-bounce-1 0.6s;
 
−
  }
 
−
}
 
−
 
−
@-webkit-keyframes cd-bounce-1 {
 
−
  0% {
 
−
    opacity: 0;
 
−
    -webkit-transform: scale(0.5);
 
−
  }
 
−
  60% {
 
−
    opacity: 1;
 
−
    -webkit-transform: scale(1.2);
 
−
  }
 
−
  100% {
 
−
    -webkit-transform: scale(1);
 
−
  }
 
−
}
 
−
 
−
@-moz-keyframes cd-bounce-1 {
 
−
  0% {
 
−
    opacity: 0;
 
−
    -moz-transform: scale(0.5);
 
−
  }
 
−
  60% {
 
−
    opacity: 1;
 
−
    -moz-transform: scale(1.2);
 
−
  }
 
−
  100% {
 
−
    -moz-transform: scale(1);
 
−
  }
 
−
}
 
−
 
−
@keyframes cd-bounce-1 {
 
−
  0% {
 
−
    opacity: 0;
 
−
    -webkit-transform: scale(0.5);
 
−
    -moz-transform: scale(0.5);
 
−
    -ms-transform: scale(0.5);
 
−
    -o-transform: scale(0.5);
 
−
    transform: scale(0.5);
 
−
  }
 
−
  60% {
 
−
    opacity: 1;
 
−
    -webkit-transform: scale(1.2);
 
−
    -moz-transform: scale(1.2);
 
−
    -ms-transform: scale(1.2);
 
−
    -o-transform: scale(1.2);
 
−
    transform: scale(1.2);
 
−
  }
 
−
  100% {
 
−
    -webkit-transform: scale(1);
 
−
    -moz-transform: scale(1);
 
−
    -ms-transform: scale(1);
 
−
    -o-transform: scale(1);
 
−
    transform: scale(1);
 
−
  }
 
−
}
 
−
 
−
.cd-timeline-content {
 
−
  position: relative;
 
−
  margin-left: 60px;
 
−
  background: white;
 
−
  border-radius: 0.25em;
 
−
  padding: 1em;
 
−
  box-shadow: 0 3px 0 #d7e4ed;
 
−
}
 
−
 
−
.cd-timeline-content:after {
 
−
  content: "";
 
−
  display: table;
 
−
  clear: both;
 
−
}
 
−
 
−
.cd-timeline-content h2 {
 
−
  color: #303e49;
 
−
}
 
−
 
−
.cd-timeline-content p,
 
−
.cd-timeline-content .cd-read-more,
 
−
.cd-timeline-content .cd-date {
 
−
  font-size: 13px;
 
−
  font-size: 0.8125rem;
 
−
}
 
−
 
−
.cd-timeline-content .cd-read-more,
 
−
.cd-timeline-content .cd-date {
 
−
  display: inline-block;
 
−
}
 
−
 
−
.cd-timeline-content p {
 
−
  margin: 1em 0;
 
−
  line-height: 1.6;
 
−
}
 
−
 
−
.cd-timeline-content .cd-read-more {
 
−
  float: right;
 
−
  padding: .8em 1em;
 
−
  background: #acb7c0;
 
−
  color: white;
 
−
  border-radius: 0.25em;
 
−
}
 
−
 
−
.no-touch .cd-timeline-content .cd-read-more:hover {
 
−
  background-color: #bac4cb;
 
−
}
 
−
 
−
.cd-timeline-content .cd-date {
 
−
  float: left;
 
−
  padding: .8em 0;
 
−
  opacity: .7;
 
−
}
 
−
 
−
.cd-timeline-content::before {
 
−
  content: '';
 
−
  position: absolute;
 
−
  top: 16px;
 
−
  right: 100%;
 
−
  height: 0;
 
−
  width: 0;
 
−
  border: 7px solid transparent;
 
−
  border-right: 7px solid white;
 
−
}
 
−
 
−
@media only screen and (min-width: 768px) {
 
−
  .cd-timeline-content h2 {
 
−
    font-size: 20px;
 
−
    font-size: 1.25rem;
 
−
  }
 
−
  .cd-timeline-content p {
 
−
    font-size: 16px;
 
−
    font-size: 1rem;
 
−
  }
 
−
  .cd-timeline-content .cd-read-more,
 
−
  .cd-timeline-content .cd-date {
 
−
    font-size: 14px;
 
−
    font-size: 0.875rem;
 
−
  }
 
−
}
 
−
 
−
@media only screen and (min-width: 1170px) {
 
−
  .cd-timeline-content {
 
−
    margin-left: 0;
 
−
    padding: 1.6em;
 
−
    width: 45%;
 
−
  }
 
−
  .cd-timeline-content::before {
 
−
    top: 24px;
 
−
    left: 100%;
 
−
    border-color: transparent;
 
−
    border-left-color: white;
 
−
  }
 
−
  .cd-timeline-content .cd-read-more {
 
−
    float: left;
 
−
  }
 
−
  .cd-timeline-content .cd-date {
 
−
    position: absolute;
 
−
    width: 100%;
 
−
    left: 122%;
 
−
    top: 6px;
 
−
    font-size: 16px;
 
−
    font-size: 1rem;
 
−
  }
 
−
  .cd-timeline-block:nth-child(even) .cd-timeline-content {
 
−
    float: right;
 
−
  }
 
−
  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
 
−
    top: 24px;
 
−
    left: auto;
 
−
    right: 100%;
 
−
    border-color: transparent;
 
−
    border-right-color: white;
 
−
  }
 
−
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
 
−
    float: right;
 
−
  }
 
−
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
 
−
    left: auto;
 
−
    right: 122%;
 
−
    text-align: right;
 
−
  }
 
−
  .cssanimations .cd-timeline-content.is-hidden {
 
−
    visibility: hidden;
 
−
  }
 
−
  .cssanimations .cd-timeline-content.bounce-in {
 
−
    visibility: visible;
 
−
    -webkit-animation: cd-bounce-2 0.6s;
 
−
    -moz-animation: cd-bounce-2 0.6s;
 
−
    animation: cd-bounce-2 0.6s;
 
−
  }
 
−
}
 
−
 
−
@media only screen and (min-width: 1170px) {
 
−
  /* inverse bounce effect on even content blocks */
 
−
  .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
 
−
    -webkit-animation: cd-bounce-2-inverse 0.6s;
 
−
    -moz-animation: cd-bounce-2-inverse 0.6s;
 
−
    animation: cd-bounce-2-inverse 0.6s;
 
−
  }
 
−
}
 
−
 
−
@-webkit-keyframes cd-bounce-2 {
 
−
  0% {
 
−
    opacity: 0;
 
−
    -webkit-transform: translateX(-100px);
 
−
  }
 
−
  60% {
 
−
    opacity: 1;
 
−
    -webkit-transform: translateX(20px);
 
−
  }
 
−
  100% {
 
−
    -webkit-transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
@-moz-keyframes cd-bounce-2 {
 
−
  0% {
 
−
    opacity: 0;
 
−
    -moz-transform: translateX(-100px);
 
−
  }
 
−
  60% {
 
−
    opacity: 1;
 
−
    -moz-transform: translateX(20px);
 
−
  }
 
−
  100% {
 
−
    -moz-transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
@keyframes cd-bounce-2 {
 
−
  0% {
 
−
    opacity: 0;
 
−
    -webkit-transform: translateX(-100px);
 
−
    -moz-transform: translateX(-100px);
 
−
    -ms-transform: translateX(-100px);
 
−
    -o-transform: translateX(-100px);
 
−
    transform: translateX(-100px);
 
−
  }
 
−
  60% {
 
−
    opacity: 1;
 
−
    -webkit-transform: translateX(20px);
 
−
    -moz-transform: translateX(20px);
 
−
    -ms-transform: translateX(20px);
 
−
    -o-transform: translateX(20px);
 
−
    transform: translateX(20px);
 
−
  }
 
−
  100% {
 
−
    -webkit-transform: translateX(0);
 
−
    -moz-transform: translateX(0);
 
−
    -ms-transform: translateX(0);
 
−
    -o-transform: translateX(0);
 
−
    transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
@-webkit-keyframes cd-bounce-2-inverse {
 
−
  0% {
 
−
    opacity: 0;
 
−
    -webkit-transform: translateX(100px);
 
−
  }
 
−
  60% {
 
−
    opacity: 1;
 
−
    -webkit-transform: translateX(-20px);
 
−
  }
 
−
  100% {
 
−
    -webkit-transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
@-moz-keyframes cd-bounce-2-inverse {
 
−
  0% {
 
−
    opacity: 0;
 
−
    -moz-transform: translateX(100px);
 
−
  }
 
−
  60% {
 
−
    opacity: 1;
 
−
    -moz-transform: translateX(-20px);
 
−
  }
 
−
  100% {
 
−
    -moz-transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
@keyframes cd-bounce-2-inverse {
 
−
  0% {
 
−
    opacity: 0;
 
−
    -webkit-transform: translateX(100px);
 
−
    -moz-transform: translateX(100px);
 
−
    -ms-transform: translateX(100px);
 
−
    -o-transform: translateX(100px);
 
−
    transform: translateX(100px);
 
−
  }
 
−
  60% {
 
−
    opacity: 1;
 
−
    -webkit-transform: translateX(-20px);
 
−
    -moz-transform: translateX(-20px);
 
−
    -ms-transform: translateX(-20px);
 
−
    -o-transform: translateX(-20px);
 
−
    transform: translateX(-20px);
 
−
  }
 
−
  100% {
 
−
    -webkit-transform: translateX(0);
 
−
    -moz-transform: translateX(0);
 
−
    -ms-transform: translateX(0);
 
−
    -o-transform: translateX(0);
 
−
    transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
.timeline {
 
−
  background-color: rgb(82, 101, 143);
 
−
}
 
−
 
−
.animated {
 
−
  -webkit-animation-fill-mode: both;
 
−
  -moz-animation-fill-mode: both;
 
−
  -ms-animation-fill-mode: both;
 
−
  -o-animation-fill-mode: both;
 
−
  animation-fill-mode: both;
 
−
  -webkit-animation-duration: 1s;
 
−
  -moz-animation-duration: 1s;
 
−
  -ms-animation-duration: 1s;
 
−
  -o-animation-duration: 1s;
 
−
  animation-duration: 1s;
 
−
}
 
−
 
−
.animated.hinge {
 
−
  -webkit-animation-duration: 2s;
 
−
  -moz-animation-duration: 2s;
 
−
  -ms-animation-duration: 2s;
 
−
  -o-animation-duration: 2s;
 
−
  animation-duration: 2s;
 
−
}
 
−
 
−
@-webkit-keyframes bounceIn {
 
−
  0% {
 
−
    opacity: 0;
 
−
    -webkit-transform: scale(0.8);
 
−
  }
 
−
  50% {
 
−
    opacity: 1;
 
−
    -webkit-transform: scale(1.05);
 
−
  }
 
−
  100% {
 
−
    opacity: 1;
 
−
    -webkit-transform: scale(1);
 
−
  }
 
−
}
 
−
 
−
@-moz-keyframes bounceIn {
 
−
  0% {
 
−
    opacity: 0;
 
−
    -moz-transform: scale(0.8);
 
−
  }
 
−
  50% {
 
−
    opacity: 1;
 
−
    -moz-transform: scale(1.05);
 
−
  }
 
−
  100% {
 
−
    opacity: 1;
 
−
    -moz-transform: scale(1);
 
−
  }
 
−
}
 
−
 
−
@-o-keyframes bounceIn {
 
−
  0% {
 
−
    opacity: 0;
 
−
    -o-transform: scale(0.8);
 
−
  }
 
−
  50% {
 
−
    opacity: 1;
 
−
    -o-transform: scale(1.05);
 
−
  }
 
−
  100% {
 
−
    opacity: 1;
 
−
    -o-transform: scale(1);
 
−
  }
 
−
}
 
−
 
−
@keyframes bounceIn {
 
−
  0% {
 
−
    opacity: 0;
 
−
    transform: scale(0.8);
 
−
  }
 
−
  50% {
 
−
    opacity: 1;
 
−
    transform: scale(1.05);
 
−
  }
 
−
  100% {
 
−
    opacity: 1;
 
−
    transform: scale(1);
 
−
  }
 
−
}
 
−
 
−
.bounceIn {
 
−
  -webkit-animation-name: bounceIn;
 
−
  -moz-animation-name: bounceIn;
 
−
  -o-animation-name: bounceIn;
 
−
  animation-name: bounceIn;
 
−
}
 
−
 
−
@-webkit-keyframes fadeIn {
 
−
  0% {
 
−
    opacity: 0;
 
−
  }
 
−
  100% {
 
−
    opacity: 1;
 
−
  }
 
−
}
 
−
 
−
@-moz-keyframes fadeIn {
 
−
  0% {
 
−
    opacity: 0;
 
−
  }
 
−
  100% {
 
−
    opacity: 1;
 
−
  }
 
−
}
 
−
 
−
@-o-keyframes fadeIn {
 
−
  0% {
 
−
    opacity: 0;
 
−
  }
 
−
  100% {
 
−
    opacity: 1;
 
−
  }
 
−
}
 
−
 
−
@keyframes fadeIn {
 
−
  0% {
 
−
    opacity: 0;
 
−
  }
 
−
  100% {
 
−
    opacity: 1;
 
−
  }
 
−
}
 
−
 
−
.delay {
 
−
  -webkit-animation-delay: 0.30s;
 
−
  -moz-animation-delay: 0.30s;
 
−
  -o-animation-delay: 0.30s;
 
−
  animation-delay: 0.30s;
 
−
}
 
−
 
−
.delay-three {
 
−
  -webkit-animation-delay: 0.60s;
 
−
  -moz-animation-delay: 0.60s;
 
−
  -o-animation-delay: 0.60s;
 
−
  animation-delay: 0.60s;
 
−
}
 
−
 
−
.delay-two {
 
−
  -webkit-animation-delay: 1.0s;
 
−
  -moz-animation-delay: 1.0s;
 
−
  -o-animation-delay: 1.0s;
 
−
  animation-delay: 1.0s;
 
−
}
 
−
 
−
.delay-one {
 
−
  -webkit-animation-delay: 1.5s;
 
−
  -moz-animation-delay: 1.5s;
 
−
  -o-animation-delay: 1.5s;
 
−
  animation-delay: 1.5s;
 
−
}
 
−
 
−
.fadeIn {
 
−
  -webkit-animation-name: fadeIn;
 
−
  -moz-animation-name: fadeIn;
 
−
  -o-animation-name: fadeIn;
 
−
  animation-name: fadeIn;
 
−
}
 
−
 
−
@-webkit-keyframes fadeInUp {
 
−
  0% {
 
−
    opacity: 0;
 
−
    -webkit-transform: translateY(20px);
 
−
  }
 
−
  100% {
 
−
    opacity: 1;
 
−
    -webkit-transform: translateY(0);
 
−
  }
 
−
}
 
−
 
−
@-moz-keyframes fadeInUp {
 
−
  0% {
 
−
    opacity: 0;
 
−
    -moz-transform: translateY(20px);
 
−
  }
 
−
  100% {
 
−
    opacity: 1;
 
−
    -moz-transform: translateY(0);
 
−
  }
 
−
}
 
−
 
−
@-o-keyframes fadeInUp {
 
−
  0% {
 
−
    opacity: 0;
 
−
    -o-transform: translateY(20px);
 
−
  }
 
−
  100% {
 
−
    opacity: 1;
 
−
    -o-transform: translateY(0);
 
−
  }
 
−
}
 
−
 
−
@keyframes fadeInUp {
 
−
  0% {
 
−
    opacity: 0;
 
−
    transform: translateY(20px);
 
−
  }
 
−
  100% {
 
−
    opacity: 1;
 
−
    transform: translateY(0);
 
−
  }
 
−
}
 
−
 
−
.fadeInUp {
 
−
  -webkit-animation-name: fadeInUp;
 
−
  -moz-animation-name: fadeInUp;
 
−
  -o-animation-name: fadeInUp;
 
−
  animation-name: fadeInUp;
 
−
}
 
−
 
−
@-webkit-keyframes fadeInDown {
 
−
  0% {
 
−
    opacity: 0;
 
−
    -webkit-transform: translateY(-20px);
 
−
  }
 
−
  100% {
 
−
    opacity: 1;
 
−
    -webkit-transform: translateY(0);
 
−
  }
 
−
}
 
−
 
−
@-moz-keyframes fadeInDown {
 
−
  0% {
 
−
    opacity: 0;
 
−
    -moz-transform: translateY(-20px);
 
−
  }
 
−
  100% {
 
−
    opacity: 1;
 
−
    -moz-transform: translateY(0);
 
−
  }
 
−
}
 
−
 
−
@-o-keyframes fadeInDown {
 
−
  0% {
 
−
    opacity: 0;
 
−
    -o-transform: translateY(-20px);
 
−
  }
 
−
  100% {
 
−
    opacity: 1;
 
−
    -o-transform: translateY(0);
 
−
  }
 
−
}
 
−
 
−
@keyframes fadeInDown {
 
−
  0% {
 
−
    opacity: 0;
 
−
    transform: translateY(-20px);
 
−
  }
 
−
  100% {
 
−
    opacity: 1;
 
−
    transform: translateY(0);
 
−
  }
 
−
}
 
−
 
−
.fadeInDown {
 
−
  -webkit-animation-name: fadeInDown;
 
−
  -moz-animation-name: fadeInDown;
 
−
  -o-animation-name: fadeInDown;
 
−
  animation-name: fadeInDown;
 
−
}
 
−
 
−
@-webkit-keyframes fadeInLeft {
 
−
  0% {
 
−
    opacity: 0;
 
−
    -webkit-transform: translateX(-20px);
 
−
  }
 
−
  100% {
 
−
    opacity: 1;
 
−
    -webkit-transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
@-moz-keyframes fadeInLeft {
 
−
  0% {
 
−
    opacity: 0;
 
−
    -moz-transform: translateX(-20px);
 
−
  }
 
−
  100% {
 
−
    opacity: 1;
 
−
    -moz-transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
@-o-keyframes fadeInLeft {
 
−
  0% {
 
−
    opacity: 0;
 
−
    -o-transform: translateX(-20px);
 
−
  }
 
−
  100% {
 
−
    opacity: 1;
 
−
    -o-transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
@keyframes fadeInLeft {
 
−
  0% {
 
−
    opacity: 0;
 
−
    transform: translateX(-20px);
 
−
  }
 
−
  100% {
 
−
    opacity: 1;
 
−
    transform: translateX(0);
 
−
  }
 
−
}
 
−
 
−
.fadeInLeft {
 
−
  -webkit-animation-name: fadeInLeft;
 
−
  -moz-animation-name: fadeInLeft;
 
−
  -o-animation-name: fadeInLeft;
 
−
  animation-name: fadeInLeft;
 
−
}
 
−
 
−
.fadeOutDown {
 
−
  -webkit-animation-name: fadeOutDown;
 
−
  -moz-animation-name: fadeOutDown;
 
−
  -o-animation-name: fadeOutDown;
 
−
  animation-name: fadeOutDown;
 
−
}
 
−
 
−
@-webkit-keyframes fadeOutLeft {
 
−
  0% {
 
−
    opacity: 1;
 
−
    -webkit-transform: translateX(0);
 
−
  }
 
−
  100% {
 
−
    opacity: 0;
 
−
    -webkit-transform: translateX(-20px);
 
−
  }
 
−
}
 
−
 
−
@-moz-keyframes fadeOutLeft {
 
−
  0% {
 
−
    opacity: 1;
 
−
    -moz-transform: translateX(0);
 
−
  }
 
−
  100% {
 
−
    opacity: 0;
 
−
    -moz-transform: translateX(-20px);
 
−
  }
 
−
}
 
−
 
−
@-o-keyframes fadeOutLeft {
 
−
  0% {
 
−
    opacity: 1;
 
−
    -o-transform: translateX(0);
 
−
  }
 
−
  100% {
 
−
    opacity: 0;
 
−
    -o-transform: translateX(-20px);
 
−
  }
 
−
}
 
−
 
−
@keyframes fadeOutLeft {
 
−
  0% {
 
−
    opacity: 1;
 
−
    transform: translateX(0);
 
−
  }
 
−
  100% {
 
−
    opacity: 0;
 
−
    transform: translateX(-20px);
 
−
  }
 
−
}
 
−
 
−
@-webkit-keyframes fadeOut {
 
−
  0% {
 
−
    opacity: 1;
 
−
  }
 
−
  100% {
 
−
    opacity: 0;
 
−
  }
 
−
}
 
−
 
−
@-moz-keyframes fadeOut {
 
−
  0% {
 
−
    opacity: 1;
 
−
  }
 
−
  100% {
 
−
    opacity: 0;
 
−
  }
 
−
}
 
−
 
−
@-o-keyframes fadeOut {
 
−
  0% {
 
−
    opacity: 1;
 
−
  }
 
−
  100% {
 
−
    opacity: 0;
 
−
  }
 
−
}
 
−
 
−
@keyframes fadeOut {
 
−
  0% {
 
−
    opacity: 1;
 
−
  }
 
−
  100% {
 
−
    opacity: 0;
 
−
  }
 
−
}
 
−
 
−
.animated.fadeOut {
 
−
  -webkit-animation-name: fadeOut;
 
−
  -moz-animation-name: fadeOut;
 
−
  -o-animation-name: fadeOut;
 
−
  animation-name: fadeOut;
 
−
}
 
−
 
−
.animated.fadeOutLeft {
 
−
  -webkit-animation-name: fadeOutLeft;
 
−
  -moz-animation-name: fadeOutLeft;
 
−
  -o-animation-name: fadeOutLeft;
 
−
  animation-name: fadeOutLeft;
 
−
}
 
  
 
/********************************* DEFAULT WIKI SETTINGS  ********************************/
 
/********************************* DEFAULT WIKI SETTINGS  ********************************/

Revision as of 11:38, 17 August 2017

/* Default Font and Sizing of Website */

@media screen and (max-width: 760px) { 

 /*Make dropdown links appear inline*/

 nav ul {
     position: static;
     display: flex;
     float: right;
     margin: 0px;
     margin-top:0px;
     padding: 0px 0px;
     justify-content:space-around;
 }

 /* Create vertical spacing */

 li {
   margin-bottom: 1px;
 }



 /* Make all menu links full width */
 ul li,
 li a {
   width: 100%;
 }


/* Visiting Links */

a, a:hover { 

 color: #52658F;
 text-decoration: none;
 -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease;
 -o-transition: all .5s ease;
 transition: all .5s ease-in-out;

}

a:visited { 

 color: #333A56;

}

.content { margin-top:50px; }

.red { 

 color: #EA3923;

}

.blue { 

 color: #0C68E6;

}

.darkblue { 

 color: #52658F;

}

.yellow { 

 color: #FFDF1E;

}

.green { 

 color: #32BE01;

}

.cream { 

 color: #F7F5E6;

}

.grey { 

 color: #E8E8E8;

}

.darkgrey { 

 color: #8C8C8C;

}


/* Body */

body { 

 font-family: 'Karla', sans-serif;
 padding-top: 40px;
 min-height: 400px;
 margin-bottom: 100px;

}

html { 

 padding-bottom: 97px;

}

.container { 

 margin-top:50px;

}


/* Navbar */

.some-padding { 

 padding-top: 0px;

}

/*adds necessary spacing to the navbar so links display correctly below the black iGEM navbar BACKGROUND*/

.navbar-default { 

 background-color: #black;
 border-color: rgba(255, 255, 255, 0.3);
 font-family: 'Karla', sans-serif;
 font-weight: 300;
 -webkit-transition: all 0.35s;
 -moz-transition: all 0.35s;
 transition: all 0.35s;
 margin : 0 !important;

}


/*NavBar UNOTT Information*/

.navbar-default .navbar-header .navbar-brand { 

 color: #white;
 font-family: 'Karla', sans-serif;
 font-weight: none;
 font-size: 22px;
 display: inline-block;
 background: black

}


/*Changes colour of the iGEM logo in the navbar.*/

.navbar-default .navbar-header .navbar-brand:hover, .navbar-default .navbar-header .navbar-brand:focus { 

 color: #white;

}

.navbar-default .navbar-header .navbar-toggle { 

 font-family: 'Karla', sans-serif;
 font-weight: 400; bold;
 font-size: 14px;
 color: #white;
 text-transform: uppercase;

}

/* FONT */ .navbar-default .nav > li > a, .navbar-default .nav > li > a:focus { 

 text-transform: uppercase;
 font-family: 'Karla', sans-serif;
 font-weight: bold;
 font-size: 14px;
 color: #white;

}

.navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus:hover { 

 color: #white;

}

/*Navbar background colour*/

.navbar-default .nav > li.active > a, .navbar-default .nav > li.active > a:focus { 

 color: #CF5435 !important;
 background-color: black;

}

.navbar-default .nav > li.active > a:hover, .navbar-default .nav > li.active > a:focus:hover { 

 background-color: black;
 border-left-color: black; border-top-color: black;

}

.navbar-default .navbar-toggle { 

 border: none;

} /*dropdown menu colours*/ .navbar-default .dropdown-menu > li > a:hover, .navbar-default .dropdown-menu > li > a:focus { 

 background-color: #CDD7B6;
 color: #blue;

}

.navbar-default .dropdown-menu { 

 border: none;
 outline: none;
 font-family: 'Karla', sans-serif;
 text-transform: uppercase;
 font-weight: bold;
 font-size: 14.2px !important;
 color: #CF5435;

}


  1. sitelinks a {
 display: inline-block;
 border: 3px solid #fff;
 color: #fff;
 padding: 10px 20px;
 margin: 10px

}

  1. footer {
 background: #333;
 text-align: center;
 color: #fff;
 line-height: 50px;

}

  1. footer a {
 color: #fff;

}


/* Titles and text */

specialh1 { 

 font-size: 100px;
 font-weight: 400;
 font-family: 'Quicksand', sans-serif;
 text-align: center;
 color: #333A56;
 letter-spacing: 3px;
 border-bottom: none;

}

specialh2 { 

 font-size: 40px;
 font-weight: 400;
 font-family: 'Quicksand', sans-serif;
 text-align: center;
 color: #333A56;
 border-bottom: none;
 text-transform: uppercase;

}

specialh3 { 

 font-size: 30px;
 font-weight: 400;
 font-family: 'Quicksand', sans-serif;
 text-align: center;
 color: #52658F;
 border-bottom: none;

}

specialh4 { 

 font-size: 22px;
 font-weight: 400;
 font-family: 'Quicksand', sans-serif;
 text-align: center;
 color: #52658F;
 border-bottom: none;

}

h1 { 

 font-family: 'Quicksand', sans-serif !important;
 font-size: 50px !important;

}

h2 { 

 font-family: 'Quicksand', sans-serif !important;
 font-size: 40px !important;

}

h3 { 

 font-family: 'Quicksand', sans-serif !important;
 font-size: 35px !important;

}

h4 { 

 font-family: 'Quicksand', sans-serif !important;
 font-size: 30px !important;

}

p { 

 font-family: 'Roboto', sans-serif !important;
 ;
 font-weight: 400 !important;
 ;
 font-size: 18px !important;
 line-height: 1.5;
 margin-bottom: 20px;

}

body { 

 webkit-tap-highlight-color: #222222;

}

/* TIMELINE */

img { 

 max-width: 100%;

}

h1, h2 { 

 font-family: "Open Sans", sans-serif;
 font-weight: bold;

}


/* -------------------------------- Modules - reusable parts of our design -------------------------------- */

.cd-container { 

 /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
 width: 90%;
 max-width: 1170px;
 margin: 0 auto;

}

.cd-container::after { 

 /* clearfix */
 content: ;
 display: table;
 clear: both;

}


/* -------------------------------- Main components -------------------------------- */

header { 

 height: 200px;
 line-height: 200px;
 text-align: center;
 background: #303e49;

}

header h1 { 

 color: white;
 font-size: 18px;
 font-size: 1.125rem;

}

@media only screen and (min-width: 1170px) { 

 header {
   height: 300px;
   line-height: 300px;
 }
 header h1 {
   font-size: 24px;
   font-size: 1.5rem;
 }

}


/********************************* DEFAULT WIKI SETTINGS ********************************/

  1. sideMenu,
  2. top_title {
 display: none;

}

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

}

body { 

 background-color: white;
 width: 100%;

}

  1. bodyContent h1,
  2. bodyContent h2,
  3. bodyContent h3,
  4. bodyContent h4,
  5. bodyContent h5 {
 margin-bottom: 0px;

}

  1. bodyContent {
 padding-right: 0px;

}

  1. globalWrapper {
 font-size: 100%;
 padding: 0px;
 margin: -10px -20px -20px -20px;

}

.navbar-collapse { 

 padding-left: 0px;

}

  1. banner {
 margin-top: 50px;

}

  1. sideMenu {
 margin-top: 10px;

}

.dropdown-menu li:hover .sub-menu { 

 visibility: visible;

}

.dropdown:hover .dropdown-menu { 

 display: block;

}

.navbar-nav .dropdown-menu, .navbar .dropdown-menu { 

 margin-top: 0;

}


/********************************* CONTENT OF THE PAGE ********************************/


/* Wrapper for the content */

.content_wrapper { 

 width: 85%;
 margin-left: 150px;
 padding: 0px;
 float: left;
 background-color: white;

}


/*LAYOUT */

.column { 

 padding: 10px 0px;
 float: left;
 background-color: white;

}

.full_size { 

 width: 100%;

}

.full_size img { 

 padding: 10px 15px;
 width: 96.5%;

}

.half_size { 

 width: 50%;

}

.half_size img { 

 padding: 10px 15px;
 width: 93%;

}

.img:hover { 

 opacity: 1.0 !important;

}

.clear { 

 clear: both;

}

.highlight { 

 width: 90%;
 margin: auto;
 padding: 15px 5px;
 background-color: #f2f2f2;

}

.judges-will-not-evaluate { 

 border: 4px solid #72c9b6;
 display: block;
 margin: 5px 15px;
 width: 95%;
 font-weight: bold;

}


/*STYLING */


/* styling for the titles */

.content_wrapper h1, .content_wrapper h2 { 

 padding: 5px 15px;
 border-bottom: 0px;
 color: #72c9b6;

}

.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 { 

 padding: 5px 15px;
 border-bottom: 0px;
 color: #000000;

}


/* font and text */

.content_wrapper p { 

 padding: 0px 15px;
 font-size: 13px;
 font-family: 'Karla', sans-serif;

}


/* Links */

.content_wrapper a { 

 font-weight: bold;
 text-decoration: underline;
 text-decoration-color: #72c9b6;
 color: #72c9b6;
 -webkit-transition: all 0.4s ease;
 -moz-transition: all 0.4s ease;
 -ms-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 transition: all 0.4s ease;

}


/* hover for the links */

.content_wrapper a:hover { 

 text-decoration: none;
 color: #000000;

}


/* non numbered lists */

.content_wrapper ul { 

 padding: 0px 20px;
 font-size: 13px;
 font-family: 'Karla', sans-serif;

}


/* numbered lists */

.content_wrapper ol { 

 padding: 0px;
 font-size: 13px;
 font-family: 'Karla', sans-serif;

}


/* Table */

.content_wrapper table { 

 width: 97%;
 margin: 15px 10px;
 border: 1px solid #d3d3d3;
 border-collapse: collapse;

}


/* table cells */

.content_wrapper td { 

 padding: 10px;
 vertical-align: text-top;
 border: 1px solid #d3d3d3;
 border-collapse: collapse;

}


/* table headers */

.content_wrapper th { 

 padding: 10px;
 vertical-align: text-top;
 border: 1px solid #d3d3d3;
 border-collapse: collapse;
 background-color: #f2f2f2;

}


/* Button class */

.button_click { 

 margin: 10px auto;
 padding: 15px;
 width: 12%;
 text-align: center;
 font-weight: bold;
 background-color: #72c9b6;
 cursor: pointer;
 -webkit-transition: all 0.4s ease;
 -moz-transition: all 0.4s ease;
 -ms-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 transition: all 0.4s ease;

}


/* button class on hover */

.button_click:hover { 

 background-color: #000000;
 color: #72c9b6;

}

.top-pad { 

 padding: 35px;

}


/********************************* RESPONSIVE STYLING ********************************/


/* IF THE SCREEN IS LESS THAN 1000PX */

@media only screen and (max-width: 1000px) { 

 #content {
   width: 100%;
 }
 .menu_wrapper {
   width: 15%;
 }
 .content_wrapper {
   margin-left: 15%;
 }
 .menu_item {
   display: block;
 }
 .icon {
   display: none;
 }
 .highlight {
   padding: 10px 0px;
 }

}


/* IF THE SCREEN IS LESS THAN 680PX */

@media only screen and (max-width: 680px) { 

 .collapsable_menu_control {
   display: block;
 }
 .menu_item {
   display: none;
 }
 .menu_wrapper {
   width: 100%;
   height: 15%;
   position: relative;
 }
 .content_wrapper {
   width: 100%;
   margin-left: 0px;
 }
 .column.half_size {
   width: 100%;
 }
 .column img {
   width: 100%;
   padding: 5px 0px;
 }
 .icon {
   display: block;
 }
 .highlight {
   padding: 15px 5px;
 }

}