Line 110: | Line 110: | ||
h1 { | h1 { | ||
text-align: center; | text-align: center; | ||
− | margin | + | margin: 100px; |
− | + | ||
color: #0000ff; | color: #0000ff; | ||
− | |||
} | } | ||
Revision as of 14:02, 10 July 2018
/* Nav bar */ .navbar {
margin-bottom: 0; margin-top: 15px; z-index: 99;
} @media only screen and (min-width: 768px){
.dropdown:hover .dropdown-menu { display:block; }
} .logo {
padding:5px;
} .logo > img {
height: 100%
} .navbar-fixed-top + div {
margin-top:65px;
} .white {
background-color:white;
} .neat {
margin-top:0; margin-bottom: 0;
} .logbook {
background: white url("") repeat-y; padding: 35px 25px 25px 85px; margin: 0 auto; max-width: 1200px; text-align: left;
} h1, h2 { font-weight: bold; } p { font-size: 16px; } .jumbotron {
text-align: center; /* background-color: #FFF444; */
} .jumbotron p { font-size: 20px; } .main-wrapper {
/*background-image: linear-gradient(to bottom right, rgba(57, 44, 172, 0.801), rgba(164, 4, 196, 0.521)); */ margin-bottom: 0;
}
- main {
margin-top: 54px; margin-bottom: 15px;
} .integrated-content, .ethics-content, .safe-content, .stakeholder-content {
margin-top: 15px; /* margin-top: 54px; */ margin-bottom: 15px;
} .round {
border-radius: 6px;
} .navbar-inverse { background: #2E2F31; border: 0; } .navbar-inverse .navbar-nav li a { color: #f7f7f7; font-size: 16px; } .navbar-inverse .navbar-nav li a:hover { background: rgba(126, 0, 151); } .dropdown-menu { background: #2E2F31; border-radius: 0; border: 0; } .dropdown-menu li a { padding: 10px; } .navbar-inverse .navbar-nav .dropdown-menu li a:hover { background: rgb(40, 0, 48); }
/* footer */ .footer {
/* webkit example */ /* background-image: -webkit-gradient( linear, right top, left top, from(rgba(255, 255, 255, 1.0)), to(rgba(255, 255, 255, 0)) ); */
/* mozilla example - FF3.6+ */ /* background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1.0) ); */ background-color:white;
/* margin-top:7px; */ padding:25px; padding-bottom: 0px; text-align: center; width: 100%;
} .footer a {
color: white; text-decoration : none; margin:0px 20px; bottom: 0px; width: 100%;
} .fengexian {
color: #CCDFCB; margin-top: 30px; margin-bottom: 30px; margin-right:10%; margin-left: 10%;
} .sponsoren {
width:20%; max-height:initial; margin:30px; vertical-align: middle; max-width: 200px; min-width: 100px;
} .contactus {
line-height: 1.6; text-align: center; background-color: #cc0234; margin-right: -25px; margin-left: -25px; font-size: 20px;
} .contactus div {
height: 32px;
} .contactus img {
height: 20px;
} /* footer mobile */ @media screen and (max-width: 800px) {
.sponsoren { width:100%; margin:12px 0; } .footer a { margin: 5px; } .contactus a span { display: none; }
}
/* document styles */ html, body {
height: 100%
} body {
min-height: 100%; box-sizing: border-box; padding: 0; margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: normal; font-size: 16px;
} h1, h2, h3, h4, h5, h6 {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; color: #10487c;
}
- HQ_page h1,
- HQ_page h2,
- HQ_page h3,
- HQ_page h4,
- HQ_page h5,
- HQ_page h6 {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; color: #10487c; padding-top:1px; padding-bottom:1px;
}
- HQ_page h1,
- HQ_page h2 {
padding-bottom:5px;
} .myAnswer {
padding-left:30px;
} .emph {
color:rgb(49, 49, 49); text-decoration: underline;
} .timeline h3 {
margin-top: 0px;
} .myModal-header h3 {
margin-top: 20px;
} p {
color:rgb(56, 56, 56); line-height: 1.6;
}
- selection {
/* color: red; */ background: rgb(0, 149, 207);
} /* explanation quote */ .klk2elaborate {
cursor: help; color:rgb(0, 102, 255);
} .klk2elaborate::before {
content:"["; color: rgb(31, 112, 233);
} .klk2elaborate::after {
content: "]⇓"; color: rgb(31, 112, 233);
} .moreinfo {
cursor: pointer; color: rgb(31, 112, 233); text-decoration-style: underline;
} .moreinfo::after {
content: "⇓"; color: rgb(31, 112, 233);
} .moreinfo:hover {
text-decoration: underline;
} .disappear {
display: none;
} .explanation {
background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px; padding: 0.5em 10px; quotes: "\201C""\201D""\2018""\2019";
} .explanation::before {
color: #ccc; /* content: open-quote; */ font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em;
} /* figure */ /* .figureWrapper {
} */ .figureMiddle {
margin: 0.5em;
} .figureRight {
margin: 0.5em 0 1.3em 1.4em; clear: right; float: right;
} .figureMiddle .figureFrame{
margin: 0 auto; max-width:75%; /* max-height: 300px; */ /* max-height:400px; */ border: 1px solid #c8ccd1; padding: 3px; background-color: #f8f9fa;
} .figureRight .figureFrame {
max-width:300px; border: 1px solid #c8ccd1; padding: 3px; background-color: #f8f9fa; font-size: 94%; overflow: hidden;
} .figureCaption p{
text-align: left; font-size: 13px;
} .figureModal {
cursor: pointer;
} img.figure {
width: 100%;
}
/* Style the Image Used to Trigger the Modal */
.figure:hover {opacity: 0.8;} .modal-body .figure:hover {
opacity: 1;
}
/* The Modal (background) */ .figureModalWindow {
display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 999; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ /* overflow: hidden; */
}
/* Modal Content (Image) */ .figureModal-content {
margin: auto; display: block; width: 80%; max-width: 700px;
} .figureModal-content-wide {
margin: auto; display: block; max-width: 80%;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */ .modalCaption {
margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px;
} .modalCaption p{
color: #ccc;
} /* Add Animation - Zoom in the Modal */ .figureModal-content, .modalCaption {
animation-name: zoomFigure; animation-duration: 0.3s;
}
@keyframes zoomFigure {
from {transform:scale(0)} to {transform:scale(1)}
}
/* The Close Button */ .closeFigure {
position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s;
}
.closeFigure:hover, .closeFigure:focus {
color: #bbb; text-decoration: none; cursor: pointer;
}
/* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){
.figureModal-content { width: 100%; }
} /* lab annotation */ .annotationImg {
max-width: 600px; position: relative; margin-left: auto; margin-right: auto; border: 2px solid blue; padding: 3px;
} .annotationImg img {
width: 100%;
} .annotation-dot {
position: absolute; z-index: 100; width: 20px; height: 20px; /* cursor: pointer; */ cursor: url(/images/zoom_in.png), auto; border: 5px solid purple; background-color: orangered; opacity: 0.3; border-radius: 50%; margin-right: -50%; transform: translate(-50%, -50%);
} .annotation-dot:hover {
opacity: 1; animation-name: goSolid; animation-duration: 0.7s;
} @keyframes goSolid {
from {opacity: 0.5;} to {opacity: 1};
} /* .tooltiptext {
display: none;
} */ .tooltip {
/* position: relative; */ display: inline-block; /* border-bottom: 1px dotted black; */
} .tooltip .anno-text {
visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -60px;
} .tooltip .anno-text::after {
content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent;
} .tooltip:hover .anno-text {
visibility: visible;
} .zoomInFrame {
padding:0px; border:2px solid yellow; max-width:300px; background-color:white;
} .zoomInFrame img{
width:100%;
}
/* toc */ .docs, .introduction{
/* font-size: 1.2em; */ position: relative; /* background-color:#FFFFFF; */ /* box-shadow: 2px 2px 10px #919191; */
} .introduction {
width: 100%; /*text-align: center;*/
} .introduction h1 {
margin-left: auto; margin-right: auto;
} .introduction p {
text-align: justify;
} .introduction img{
width:100px;
}
- introDiv, #main {
font-family: 'Roboto',"Helvetica Neue",Helvetica,Arial,sans-serif;
} .toc-column {
padding-left: 0; /* background-color: #FFFFFF; */
} .toc-wrapper{
position: sticky; top:100px; right: 0px; margin-top:20px; margin-bottom: 15px; border-radius: 7px; /* border: 1px solid black; */ font-size: 20px; padding: 10px 0px 3px 5px; /* background-color: #f8f9fa; */
} .toc-wrapper a {
text-decoration: none;
}
.toc-wrapper > li {
text-align: right;
}
- tableOfContent {
padding-left:0;
}
- tableOfContent > li {
margin: 10px 0px;
}
- tableOfContent > li > a {
color: rgb(0, 57, 133);
} .toc-wrapper ul {
padding-left:12px;
} /* top */ .toc-wrapper > li > ul {
text-align: left; font-size: 0.7em;
} .toc-wrapper ul, .toc-wrapper li {
list-style: none; margin:0;
} .backToTop {
cursor: pointer; margin-right:15px;
}
/* logbook accordion */
.accordion {
background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; margin-bottom:3px;
}
button.active, .accordion:hover {
background-color: #ddd;
}
.accordion:after {
content: '\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px;
}
button.active:after {
content: "\2212";
}
.my-panel {
padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out;
} .my-panel p {
text-align: justify;
} .all img {
max-width: 400px; display:block; margin:0 auto;
} .all {
position: relative;
} .ibp h2 {
color: #10487c;
} .cloning h2 {
color: #2E2F31;
} .biobrick h2 {
color: #000;
} .organiclab h2 {
color: #444;
}
/* Human Practice */ .myModal ul li {
list-style-type: '-';
} .myModal ul li ul li {
list-style-type: circle;
} .timelineHead {
text-align:center; padding:10px 40px; margin-left: auto; margin-right: auto;
} .timelineHead p, .timelineHead ol, .timelineHead ul {
/* color:#040404; */ text-align: justify
} .reference {
font-size: 12px;
} .referece li{
list-style-type: decimal;
} .integrated-content p {
text-align: justify;
} /* .integrated-content {
background-color:white;
} */ .integrated-content, .ethics-content, .safe-content, .stakeholder-content {
display:none;
} .activeTab {
display: block;
} .inactiveTab {
display: none;
} .hp-heading {
background-image:url(); background-repeat: no-repeat; background-size: cover;
} .hp-tabs > ul{
list-style-type: none; margin: 0; padding: 0;
} .hp-tabs ul li {
display:inline;
} .hp-tabs ul li a {
display: inline-block; width: 150px;
} .hp-tabs button {
font-size: 20px; height: 70px; width: 200px; white-space: normal; /* border-color: #cc0234; */
} .hp-tabs button:hover{
opacity: 0.9;
} .int-btn.activeBtn, .int-btn:hover, .eth-btn.activeBtn, .eth-btn:hover, .saf-btn.activeBtn, .saf-btn:hover, .sta-btn.activeBtn, .sta-btn:hover {
background-color: #d5ff83; color: #505050;
}
/* Timeline */
/* The actual timeline (the vertical ruler) */
.timeline {
position: relative; max-width: 1200px; margin: 5px auto;
}
/* The actual timeline (the vertical ruler) */ .timeline::after {
content: ; position: absolute; width: 6px; background-color: rgb(100, 100, 100); top: 0; bottom: 0; left: 50%; margin-left: -3px;
}
/* Container around content */ .tl-event {
padding: 10px 40px; position: relative; /* background-color: greenyellow; */ width: 50%; border:1px;
}
/* The circles on the timeline */ .tl-event::after {
content: ; position: absolute; width: 25px; height: 25px; right: -13px; background-color: white; border: 4px solid #FF9F55; top: 20px; border-radius: 50%; z-index: 1;
}
/* Place the container to the left */ .left {
left: 0;
}
/* Place the container to the right */ .right {
left: 50%;
}
/* Add arrows to the left container (pointing right) */ .left::before {
content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; right: 30px; border: medium solid #eee; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #eee; /* box-sizing: content-box; */
}
/* Add arrows to the right container (pointing left) */ .right::before {
content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; left: 30px; border: medium solid #eee; border-width: 10px 10px 10px 0; border-color: transparent #eee transparent transparent; /* box-sizing: content-box; */
}
/* Fix the circle for containers on the right side */ .right::after {
left: -13px;
}
/* The actual content */ .tl-content {
padding: 20px 30px; background-color: #eee; position: relative; border-radius: 6px;
} .tl-content.docs > h2 {
margin:0;
}
/* modal window */ /* button.readmore {
border-radius: 10%;
} */
/* .tl-content button {
left:0;
} */ @media screen and (min-width:768px) {
.modal-dialog { width:60%; }
}
/* Media queries - Responsive timeline on screens less than 600px wide */ @media screen and (max-width: 600px) {
/* Place the timelime to the left */ .timeline::after { left: 31px; } /* Full-width containers */ .tl-event { width: 100%; padding-left: 70px; padding-right: 25px; } /* Make sure that all arrows are pointing leftwards */ .tl-event::before { left: 60px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent; }
/* Make sure all circles are at the same spot */ .left::after, .right::after { left: 15px; } /* Make all right containers behave like the left ones */ .right { left: 0%; }
} /* The Modal (background) */ .myModal {
display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 999; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */ .myModal-content {
position: relative; background-color: #fefefe; margin: auto; padding: 0; border: 1px solid #888; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s; border-radius: 6px;
} @-webkit-keyframes animatetop {
from {top:-600px; opacity:0} to {top:0; opacity:1}
} /* Add Animation */ @keyframes animatetop {
from {top: -600px; opacity: 0} to {top: 0; opacity: 1}
} /* The Close Button */ .closeModal {
color: white; float: right; font-size: 28px; font-weight: bold;
margin-top: -2px; float: right; /* font-size: 21px; */ font-weight: bold; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; filter: alpha(opacity=20); opacity: .2;
appearance: none; padding: 0; cursor: pointer; background: transparent; border: 0;
}
.closeModal:hover, .closeModal:focus {
color: #000; text-decoration: none; cursor: pointer;
} .myModal-header {
padding: 2px 16px; color: white; border-bottom: 1px solid #e5e5e5;
}
.myModal-body {
padding: 2px 16px;
}
.myModal-footer {
padding: 2px 16px; color: white; border-top: 1px solid #e5e5e5;
} @media screen and (min-width:768px) {
.myModal-content{ width: 60%; }
} @media screen and (max-width:767px) {
.myModal { padding-top:15px; padding-bottom:15px; padding-left:5px; padding-right:5px; }
} /* photo slides */ .personale {
position:sticky; top: 65px; background-color:white; height: 500px;
} .personale-wrapper {
height:100%;
} /* .team-wrapper { } */ .teamMembers img {
width:100%;
} /* .teamMembers {
margin: 10%;
} */ @media screen and (max-width: 992px) {
.teamMembers { margin: 5%; }
} @media screen and (min-width: 1440px) {
.teamMembers { margin: 5%; }
} .foto img {
border-radius: 35%;
} /* slides */ .slideshow-container {
max-width: 800px; position: relative; margin: auto;
}
/* Hide the images by default */ .mySlides {
display: none;
}
/* Next & previous buttons */ .prevbtn, .nextbtn {
cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0;
} .prevbtn {
left:0;
}
/* Position the "next button" to the right */ .nextbtn {
right: 0; border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */ .prevbtn:hover, .nextbtn:hover {
background-color: rgba(0,0,0,0.8); text-decoration: none;
}
/* Caption text */ .slidetext {
color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 0px; width: 100%; text-align: center; background-color: #0009;
}
/* Number text (1/3 etc) */ .numbertext {
color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0;
}
/* The dots/bullets/indicators */ .dot {
cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease;
}
.dot.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */ .myfade {
animation-name: myfade; animation-duration: 1.5s;
}
@-webkit-keyframes myfade {
from {opacity: .4} to {opacity: 1}
}
@keyframes myfade {
from {opacity: .4} to {opacity: 1}
} .slideJumbotron {
background-image: linear-gradient(to bottom right, rgba(57, 44, 172, 0.801), rgba(126, 0, 151, 0.521)); margin-bottom: 0;
} .team-main {
background-image: linear-gradient(to bottom right, rgba(57, 44, 172, 0.801), rgba(126, 0, 151, 0.521));
} /* change images with fade effect */ .swapImage img {
-webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
} .foto img {
width:100%;
}
/* MISC Correction */
- top_title{
display:none;
}
- globalWrapper{
font-size:100%; padding-bottom: 0; margin-bottom: -10px;
} div#mw-content-text.mw-content-ltr {
background-image: url(""); background-attachment: fixed;
} body {
background-image: url(""); background-attachment: fixed;
}
- content{
width:100%; margin:0 auto; padding:0px;
} ul.normal-menu li {
list-style:none;
}
ul.nav.navbar-nav.navbar-right {
margin: 0;
}
- HQ_page p {
font-family: 'Roboto',"Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 16px; text-align: justify;
}
- HQ_page .figureCaption p{
text-align: left; font-size: 13px;
}
- HQ_page .sponsors-list a {
padding-right: 0;
}
- HQ_page .introduction h1,
- HQ_page .timelineHead h1 {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; padding-top: 0; padding-bottom: 5px;
}
- HQ_page .jumbotron h1 {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; /*text-shadow: 2px 2px #5d0086;*/
}
- HQ_page .tl-content h3 {
padding-top: 0px;
} .jumbotron h1 {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; /*text-shadow: 2px 2px #5d0086;*/
} .myTooltips {
position:fixed; border-radius:5px; border: 2px solid #444; max-width:500px; /* min-height:100px; */ background-color:wheat; padding:10px;
} .myTooltips p {
font-size:12px;
} .myTooltips button {
position: absolute; bottom:5px; right:5px;
} .tooltipsBtn {
cursor:help;
} .parts-table th, .parts-table td {
text-align: center; padding:5px; border:1px solid rgb(156, 156, 156); border-collapse: collapse;
} .parts-table th {
background-color:rgb(183, 0, 255);
} .parts-table .odd-tr {
background-color:wheat;
}
- mw-content-text a[href ^="https://"], .link-https {
background: url(https://2018.igem.org/wiki/skins/Igem/resources/lock_icon.gif?2015-09-11T20:20:00Z) center right no-repeat; padding-right: 0px;
}
Meet the team
Tim van der Hek
CEO & Founder
Some text that describes me lorem ipsum ipsum lorem.
Tim van der Hek
CEO & Founder
Some text that describes me lorem ipsum ipsum lorem.
Tim van der Hek
CEO & Founder
Some text that describes me lorem ipsum ipsum lorem.
Tim van der Hek
CEO & Founder
Some text that describes me lorem ipsum ipsum lorem.
Tim van der Hek
CEO & Founder
Some text that describes me lorem ipsum ipsum lorem.
Tim van der Hek
CEO & Founder
Some text that describes me lorem ipsum ipsum lorem.
Tim van der Hek
CEO & Founder
Some text that describes me lorem ipsum ipsum lorem.
Tim van der Hek
CEO & Founder
Some text that describes me lorem ipsum ipsum lorem.
Tim van der Hek
CEO & Founder
Some text that describes me lorem ipsum ipsum lorem.
Tim van der Hek
CEO & Founder
Some text that describes me lorem ipsum ipsum lorem.
Tim van der Hek
CEO & Founder
Some text that describes me lorem ipsum ipsum lorem.
Tim van der Hek
CEO & Founder
Some text that describes me lorem ipsum ipsum lorem.
Supervisors
Tim van der Hek
CEO & Founder
Some text that describes me lorem ipsum ipsum lorem.
Tim van der Hek
CEO & Founder
Some text that describes me lorem ipsum ipsum lorem.
Tim van der Hek
CEO & Founder
Some text that describes me lorem ipsum ipsum lorem.
Professors
Tim van der Hek
CEO & Founder
Some text that describes me lorem ipsum ipsum lorem.
Tim van der Hek
CEO & Founder
Some text that describes me lorem ipsum ipsum lorem.
Tim van der Hek
CEO & Founder
Some text that describes me lorem ipsum ipsum lorem.