Team:Imperial/Resources/CSS:main

From 2014.igem.org

       #labbook .content li{

text-align: left;

        }
  1. labbook .content h2{

text-align: center;

        }
       .tg {
           border-collapse: collapse;
           border-spacing: 0;
       }
       .tg td {
           font-family: Arial, sans-serif;
           font-size: 14px;
           padding: 10px 5px;
           border-style: solid;
           border-width: 1px;
           overflow: hidden;
           word-break: normal;
       }
       .tg th {
           font-family: Arial, sans-serif;
           font-size: 14px;
           font-weight: normal;
           padding: 10px 5px;
           border-style: solid;
           border-width: 1px;
           overflow: hidden;
           word-break: normal;
       }
       .tg .tg-97fa {
           background-color: #6d9eeb
       }
       .tg .tg-jazs {
           background-color: #8e7cc3
       }
       .tg .tg-nb4k {
           background-color: #ffd966
       }
       .tg .tg-dc8v {
           background-color: #ffff00
       }
       .tg .tg-ojj3 {
           background-color: #cccccc
       }
       .tg .tg-r535 {
           background-color: #ff0000
       }
       .tg .tg-zpcz {
           background-color: #b6d7a8
       }
       .tg .tg-m6v9 {
           background-color: #f9cb9c
       }
       .tg .tg-qaud {
           background-color: #ea9999
       }
       .tg .tg-e3zv {
           font-weight: bold
       }
       .fixed {
           position: fixed;
           top: 0;
           height: 30px;
           z-index: 1;
       }
       body {
           width: 960px;
           margin: 0 auto;
           background-color: #fff;
           font-family: 'Noto Sans', sans-serif;
       }
       .wrapper {
           background-color: #fff;
       }
       h1,
       h2,
       h3,
       h4,
       h5 {
           color: #fdcc70;
           font-weight: bold;
           margin: 20px 5px 5px 5px !important;
           border-bottom: none;
           padding: 0px;
           line-height: 100%;
           font-family: 'Oxygen', sans-serif;
       }
       p {
           margin: 0px 5px 1.5em 5px;
           color: #666666;
           font-family: 'Noto Sans', sans-serif;
           line-height: normal;
       }
       li {
           font-family: 'Noto Sans', sans-serif;
           color: #666666;
       }
       a {
           font-family: 'Noto Sans', sans-serif;
           text-decoration: none;
       }
       .header {
           background-color: #fdcc70;
           position:relative;
           z-index:1000;
       }
       .header-banner {
           height: 100px;
           z-index:1000;
       }
       .banner {
           position: relative;
z-index:999;


       }
       .content {
           margin: 5px;
           background-color: beige;
           text-align: center;
           position: relative;
           overflow: hidden;
       }
       #sponsors {
           height: 100px;
           background-color: #ffffff;
           margin: 20px 0px 20px 0px;
       }
       #main_nav {
           font-size: 12px;
       }
       .banner-text {
           position: absolute;
           bottom: 0;
           z-index: 1;
       }
       .left {
           float: left;
       }
       .right {
           float: right;
           margin: 40px 30px 0px 0px;
       }
       .social {
           display: inline-block;
           height: 30px;
       }
       .content-icon img {
           height: 150px;
       }
       .content-icon {
           float: right;
           display: block;
       }
       #Logo {
           color: #625e71;
           font-size: 75px;
           display:inline;
           position: relative;
           left:30px;
           top:20px;
           
       }
  1. logo-img {
   width:75px;
   display:inline;
   position:relative;
   left:15px;
   

}

       #side_nav {
           font-size: 12px;
           margin: 70px 0 0 0;
       }
       .content-image {
           display: block;
           margin: auto;
       }
       .questions {
           z-index: 13;
       }
       .hidden {
           display: none;
       }
       .name {
           margin: auto;
           text-align: center;
       }
       .overlay {
           height: 200px;
           width: 300px;
           margin: 10px;
           text-align: center;
           background-color: rgba(0, 0, 0, 0.6);
           border-radius: 5px;
           position: absolute;
           top: 0;
           left: 0;
           z-index: 10;
       }
       .member {
           position: relative;
       }
       .expand {
           margin: auto;
           margin-top: 65px;
           width: 30px;
           height: 30px;
           border: 2px solid #fdcc70;
           border-radius: 50%;
       }
       .expand:hover {
           cursor: hand;
           cursor: pointer;
           opacity: .9;
       }
       .info-overlay {
           height: 650px;
           width: 940px;
           margin: 10px;
           text-align: center;
           background-color: rgba(0, 0, 0, 0.7);
           border-radius: 5px;
           position: absolute;
           z-index: 11;
       }
       .min {
           width: 30px;
           height: 30px;
       }
       .min:hover {
           cursor: hand;
           cursor: pointer;
           opacity: .9;
       }
       .min h4 {
           font-size: 26px;
       }
       hr {
           color: #ffffff;
       }
       .questions,
       .log p {
           color: #ffffff;
       }
       .overlay-content {
           margin-top: 20px;
       }
       .sponsors {
           margin: 2.5px;
           width: 125px;
       }
       .log {
           min-height: 650px;
           width: 940px;
           margin: auto;
           padding: 10px;
           text-align: center;
           background-color: #625d73;
           border-radius: 5px;
       }
       .log h3 {
           color: #fdcc70;
       }
       .arrow {
           display: inline-block;
           width: 15px;
           height: 15px;
           line-height: 15px;
           border-top: 3px solid #6ABEDB;
           border-right: 3px solid #6ABEDB;
           -ms-transform: rotate(45deg);
           -moz-transform: rotate(45deg);
           -webkit-transform: rotate(45deg);
           transform: rotate(45deg);
       }
       .arrow-left {
           -ms-transform: rotate(225deg);
           -moz-transform: rotate(225deg);
           -webkit-transform: rotate(225deg);
           transform: rotate(225deg);
       }
       #date {
           display: inline-block;
           background: none;
           border: none;
           text-align: center;
           color: #fdcc70;
           font-size: 32px;
       }
       .arrow:hover {
           cursor: hand;
           cursor: pointer;
           opacity: .9;
       }
       #date:hover {
           cursor: hand;
           cursor: pointer;
           opacity: .9;
       }
       .info-overlay h2 {
           color: #fdcc70;
       }
       .info-overlay h3 {
           color: #fdcc70;
       }
       .info-overlay p {
           color: #fff;
       }
       .info-overlay h4 {
           color: #fdcc70;
           margin: 5px 5px 5px 5px !important;
       }

.overlay-content li {

           color: #fff;
       }

.overlay-content li a { color: inherit; } .overlay-content ul {

           list-style-type: none;

padding:0; margin:0;

       }
       .overlay-content h2 {
           color: #fdcc70;
       }
       .overlay-content h3 {
           color: #fdcc70;
       }
       .overlay-content h4 {
           margin: 5px 5px 5px 5px !important;
           color: #fdcc70;
       }
       .content-double {
           height: 610px;
           width: 300px;
           overflow: auto;
       }
       .content-single {
           height: 300px;
           width: 300px;
       }
       .member-image {
           height: 200px;
           width: 300px;
           border-radius: 5px;
           margin: 10px
       }
       .circle-overlay {
           position: absolute;
           top: 0;
           right: 0;
           bottom: 0;
           left: 0;
           height: 100%;
           border-radius: 50%;
           margin: auto;
           overflow: hidden;
       }
       .overlay-red {
           background-color: rgba(120, 74, 77, 0.7);
       }
       .overlay-blue {
           background-color: rgba(116, 131, 162, 0.7);
       }
       .overlay-green {
           background-color: rgba(0,40,0, 0.7);
       }
       #tweets {
           background-color: #8bcaeb;
       }
       #tweets-container {
           margin: 10px;
       }
       #tweets h2 {
           color: #fff;
       }
       .more-box {
           background-color: #625d71;
           text-transform: uppercase;
           text-decoration: none;
           margin: 5px;
           display: inline-block;
       }
       .more-box a {
           padding: 10px;
           font-size: 10px;
           color: #fff;
           text-transform: upper;
           text-decoration: none;
       }
       .content-single .bg {
           height: 100%;
           width: 100%;
       }
       .circle-overlay .overlay-content {
           margin-top: 100px;
       }
       .overlay-green {
           background-color: rgba(116, 200, 162, 0.7);
       }
       .banner-overlay {
           position: absolute;
           top: 0;
           right: 0;
           bottom: 0;
           left: 0;
           height: 75%;
           width: 75%;
           margin: auto;
           background-color: rgba(0, 0, 0, 0.1);
           overflow: hidden;
       }
       .banner-overlay h1 {
           color: #fdcc70;
           font-size: 75px;
       }
       .banner-overlay h2 {
           color: #fdcc70;
           font-size: 40px;
       }
       .banner-overlay p {
           color: #fff;
       }
       .centre-box {
           position: absolute;
           top: 0;
           right: 0;
           bottom: 0;
           left: 0;
           text-align: center;
           margin: auto;
       }
       .more-box-bottom {
           position: absolute;
           bottom: 10px;
           left: 50px;
           width: 200px;
       }
       /*subNav*/
       #navWrap {
           height: 30px;
           background: #44474B;
           width: 960px;
           margin-bottom: 20px;
       }
       #subNav {
           padding: 5px;
           background: #625d71;
       }
       #subNav ul {
           margin: 0;
           list-style-image: none;
           padding: 0;
       }
       #subNav li {
           float: left;
           padding: 3px 8px;
           margin: 0 10px 0 0;
           color: #F00;
           list-style-type: none !important;
       }
       #subNav li a {
           color: #FFF;
           text-decoration: none;
       }
       #subNav li a:hover {
           text-decoration: underline;
       }
       br.clearLeft {
           clear: left;
       }
       .image-right {
           width: 50%;
           float: right;
           margin: 10px;
       }
       .image-left {
           width: 50%;
           float: left;
           margin: 10px;
       }
       .image-full {
           width: 100%;
       }
       #overview {
           background-color: rgba(0, 0, 0, 0.1);
           border-radius: 5px;
       }
       .content-info {
           width: 50%;
           float: right;
           min-height: 200px;
       }
       .centre {
           text-align: center;
       }
       .image-small {
           width: 35%;
       }
       figcaption {
           text-align: center;
           color: #666666;
           font-size: 0.8em;
           font-style: italic;
           font-family: 'Noto Sans', sans-serif;
           margin-bottom: 15px;
       }
       .sidebar {
           background-color: beige;
           overflow:auto;
           position:fixed;
       }
       .image-half {
           width: 50%;
       }

.protocols { }

  1. gold {
    background-color: gold;
           

}

  1. silver {
    background-color: silver;

}

  1. bronze {
    background-color: #dca56f;

}

.medal {

   border-radius: 5px;
   padding:5px;
   margin:20px auto;

}