Team:Imperial/Resources/CSS:main

From 2014.igem.org

(Difference between revisions)
 
(49 intermediate revisions not shown)
Line 1: Line 1:
-
.fixed {
+
        #labbook .content li{
-
    position: fixed;  
+
text-align: left;
-
    top: 0;  
+
        }
-
    height: 30px;
+
#labbook .content h2{
-
    z-index: 1;
+
text-align: center;
-
}
+
        }
-
/* timeline css*/
+
        .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;
 +
        }
-
.cbp_tmtimeline {
+
        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;
-
    margin: 30px 0 0 0;
 
-
 
-
    padding: 0;
 
-
 
-
    list-style: none;
 
-
 
-
    position: relative;
 
 +
        }
 +
        .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;
 +
           
 +
        }
 +
#logo-img {
 +
    width:75px;
 +
    display:inline;
 +
    position:relative;
 +
    left:15px;
 +
   
}
}
-
 
+
        #side_nav {
-
.cbp_tmtimeline h2 {
+
            font-size: 12px;
-
color:#fff;  
+
            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 {
}
}
-
/* The line */
+
#gold {
-
 
+
    background-color: gold;
-
.cbp_tmtimeline:before {
+
           
-
 
+
-
    content: '';
+
-
 
+
-
    position: absolute;
+
-
 
+
-
    top: 0;
+
-
 
+
-
    bottom: 0;
+
-
 
+
-
    width: 10px;
+
-
 
+
-
    background: #d7ab5e;
+
-
 
+
-
    left: 20%;
+
-
 
+
-
    margin-left: -10px;
+
-
 
+
}
}
-
/* The date/time */
+
#silver {
-
 
+
    background-color: silver;
-
.cbp_tmtimeline > li .cbp_tmtime {
+
-
 
+
-
    display: block;
+
-
 
+
-
    width: 25%;
+
-
 
+
-
    padding-right: 100px;
+
-
 
+
-
    position: absolute;
+
-
 
+
}
}
-
.cbp_tmtimeline > li .cbp_tmtime span {
+
#bronze {
-
 
+
    background-color: #dca56f;
-
    display: block;
+
-
 
+
-
    text-align: left;
+
-
 
+
}
}
-
.cbp_tmtimeline > li .cbp_tmtime span {
+
.medal {
-
 
+
-
    font-size: 2em;
+
-
 
+
-
    color: #ffcb6f;
+
-
 
+
-
}
+
-
 
+
-
/* Right content */
+
-
 
+
-
.cbp_tmtimeline > li .cbp_tmlabel {
+
-
 
+
-
    margin: 0 0 15px 25%;
+
-
 
+
-
    background: #ffcb6f;
+
-
 
+
-
    padding: 2em;
+
-
 
+
-
    font-size: 1.2em;
+
-
 
+
-
    font-weight: 300;
+
-
 
+
-
    line-height: 1.4;
+
-
 
+
-
    position: relative;
+
-
 
+
     border-radius: 5px;
     border-radius: 5px;
-
 
+
     padding:5px;
-
}
+
     margin:20px auto;
-
 
+
-
.cbp_tmtimeline > li .cbp_tmlabel {
+
-
 
+
-
    background: #ffcb6f;
+
-
 
+
-
}
+
-
 
+
-
.cbp_tmtimeline > li .cbp_tmlabel h2 {
+
-
 
+
-
    margin-top: 0px;
+
-
 
+
-
     padding: 0 0 10px 0;
+
-
 
+
-
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
+
-
 
+
-
}
+
-
 
+
-
/* The triangle */
+
-
 
+
-
.cbp_tmtimeline > li .cbp_tmlabel:after {
+
-
 
+
-
    right: 100%;
+
-
 
+
-
    border: solid transparent;
+
-
 
+
-
    content: " ";
+
-
 
+
-
    height: 0;
+
-
 
+
-
    width: 0;
+
-
 
+
-
    position: absolute;
+
-
 
+
-
    pointer-events: none;
+
-
 
+
-
    border-right-color: #ffcb6f;
+
-
 
+
-
    border-width: 10px;
+
-
 
+
-
    top: 10px;
+
-
 
+
-
}
+
-
 
+
-
/* The icons */
+
-
 
+
-
.cbp_tmtimeline > li .cbp_tmicon {
+
-
 
+
-
    width: 40px;
+
-
 
+
-
    height: 40px;
+
-
 
+
-
    speak: none;
+
-
 
+
-
    font-style: normal;
+
-
 
+
-
    font-weight: normal;
+
-
 
+
-
    font-variant: normal;
+
-
 
+
-
    text-transform: none;
+
-
 
+
-
    font-size: 1.4em;
+
-
 
+
-
    line-height: 40px;
+
-
 
+
-
    -webkit-font-smoothing: antialiased;
+
-
 
+
-
    position: absolute;
+
-
 
+
-
    color: #fff;
+
-
 
+
-
    background: #ffcb6f;
+
-
 
+
-
    border-radius: 50%;
+
-
 
+
-
    box-shadow: 0 0 0 8px #d7ab5e;
+
-
 
+
-
    text-align: center;
+
-
 
+
-
    left: 20%;
+
-
 
+
-
    top: 0;
+
-
 
+
-
    margin: 0 0 0 -25px;
+
-
 
+
-
}
+
-
 
+
-
/*End of timeline styles */
+
-
 
+
-
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;
+
-
    text-transform: uppercase;
+
-
    margin: 20px 5px 5px 5px !important;
+
-
    border-bottom:none;
+
-
    padding:0px;
+
-
    line-height:100%;
+
-
    font-family: 'Oxygen', sans-serif;
+
-
 
+
-
}
+
-
 
+
-
p {
+
-
 
+
-
    margin: 0px 10px 1.5em 10px;
+
-
color: #666666;
+
-
    font-family: 'Noto Sans', sans-serif;
+
-
    line-height: normal;
+
-
 
+
-
}
+
-
 
+
-
li {
+
-
 
+
-
    font-family: 'Noto Sans', sans-serif;
+
-
 
+
-
}
+
-
 
+
-
a {
+
-
 
+
-
    font-family: 'Noto Sans', sans-serif;
+
-
 
+
-
    text-decoration: none;
+
-
 
+
-
}
+
-
 
+
-
.header {
+
-
 
+
-
    background-color: #fdcc70;
+
-
 
+
-
}
+
-
 
+
-
.header-banner {
+
-
 
+
-
    height: 100px;
+
-
 
+
-
}
+
-
 
+
-
.banner {
+
-
 
+
-
    position: relative;
+
-
 
+
-
}
+
-
 
+
-
.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: 80px;
+
-
 
+
-
}
+
-
 
+
-
#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 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);
+
-
 
+
-
}
+
-
 
+
-
#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.3);
+
-
 
+
-
    overflow: hidden;
+
-
 
+
-
}
+
-
 
+
-
.banner-overlay h1 {
+
-
 
+
-
    color: #fdcc70;
+
-
 
+
-
    font-size: 100px;
+
-
 
+
-
}
+
-
 
+
-
.banner-overlay h2 {
+
-
 
+
-
    color: #fdcc70;
+
-
 
+
-
    font-size: 50px;
+
-
 
+
-
}
+
-
 
+
-
.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;
+
-
       
+
}
}

Latest revision as of 23:34, 17 October 2014

       #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;

}

Retrieved from "http://2014.igem.org/Team:Imperial/Resources/CSS:main"