Difference between revisions of "Template:Team:TU Darmstadt/Viki"

(Created page with "<html> <head> <meta charset="utf-8"/> <style> @font-face{ font-family:calibri; } /* Reset */ .show { position: fixed; top: 400; background-color: red; }: html, bo...")
 
 
(464 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
<head>
 
<head>
 
<meta charset="utf-8"/>
 
<meta charset="utf-8"/>
<style>
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@font-face{
+
<link rel="stylesheet" type="text/css"  
font-family:calibri;
+
href="https://2016.igem.org/Template:Team:TU_Darmstadt/Css?action=raw&ctype=text/css" />
}
+
<script type="text/javascript" src="https://2016.igem.org/Template:Team:TU_Darmstadt/Js?
 
+
action=raw&ctype=text/javascript"></script>
/* Reset */
+
 
+
 
+
/*.show {
+
position: fixed;
+
top: 400;
+
background-color: red;
+
}*/
+
 
+
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+
margin: 0;
+
padding: 0;
+
border: 0;
+
font-size: 100%;
+
font: inherit;
+
vertical-align: baseline;
+
}
+
 
+
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+
display: block;
+
}
+
 
+
body {
+
line-height: 1;
+
}
+
 
+
ol, ul {
+
list-style: none;
+
}
+
 
+
blockquote, q {
+
quotes: none;
+
}
+
 
+
blockquote:before, blockquote:after, q:before, q:after {
+
content: '';
+
content: none;
+
}
+
 
+
table {
+
border-collapse: collapse;
+
border-spacing: 0;
+
}
+
 
+
body {
+
-webkit-text-size-adjust: none;
+
}
+
+
h1 {
+
color:black;
+
}
+
 
+
/* Box Model */
+
 
+
*, *:before, *:after {
+
-moz-box-sizing: border-box;
+
-webkit-box-sizing: border-box;
+
box-sizing: border-box;
+
}
+
 
+
/* Containers */
+
 
+
.container {
+
margin-left: 0;
+
margin-right: 0;
+
}
+
 
+
.container.\31 25\25 {
+
width: 100%;
+
max-width: 1750px;
+
min-width: 1400px;
+
}
+
 
+
.container.\37 5\25 {
+
width: 1050px;
+
}
+
 
+
.container.\35 0\25 {
+
width: 700px;
+
}
+
 
+
.container.\32 5\25 {
+
width: 350px;
+
}
+
 
+
.container {
+
width: 1400px;
+
}
+
 
+
@media screen and (max-width: 1680px) {
+
 
+
.container.\31 25\25 {
+
width: 100vw;
+
max-width: 1500px;
+
min-width: 1200px;
+
}
+
 
+
.container.\37 5\25 {
+
width: 900px;
+
}
+
 
+
.container.\35 0\25 {
+
width: 600px;
+
}
+
 
+
.container.\32 5\25 {
+
width: 300px;
+
}
+
 
+
.container {
+
width: 1200px;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 1280px) {
+
 
+
.container.\31 25\25 {
+
width: 100vw;
+
max-width: 1200px;
+
min-width: 960px;
+
}
+
 
+
.container.\37 5\25 {
+
width: 720px;
+
}
+
 
+
.container.\35 0\25 {
+
width: 480px;
+
}
+
 
+
.container.\32 5\25 {
+
width: 240px;
+
}
+
 
+
.container {
+
width: 960px;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 980px) {
+
 
+
.container.\31 25\25 {
+
width: 100vw;
+
max-width: 118.75%;
+
min-width: 95%;
+
}
+
 
+
.container.\37 5\25 {
+
width: 71.25%;
+
}
+
 
+
.container.\35 0\25 {
+
width: 47.5%;
+
}
+
 
+
.container.\32 5\25 {
+
width: 23.75%;
+
}
+
 
+
.container {
+
width: 95%;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 840px) {
+
 
+
.container.\31 25\25 {
+
width: 100%;
+
max-width: 118.75%;
+
min-width: 95%;
+
}
+
 
+
.container.\37 5\25 {
+
width: 71.25%;
+
}
+
 
+
.container.\35 0\25 {
+
width: 47.5%;
+
}
+
 
+
.container.\32 5\25 {
+
width: 23.75%;
+
}
+
 
+
.container {
+
width: 95% !important;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 736px) {
+
 
+
.container.\31 25\25 {
+
width: 100%;
+
max-width: 112.5%;
+
min-width: 90%;
+
}
+
 
+
.container.\37 5\25 {
+
width: 67.5%;
+
}
+
 
+
.container.\35 0\25 {
+
width: 45%;
+
}
+
 
+
.container.\32 5\25 {
+
width: 22.5%;
+
}
+
 
+
.container {
+
width: 90% !important;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 480px) {
+
 
+
.container.\31 25\25 {
+
width: 100%;
+
max-width: 125%;
+
min-width: 100%;
+
}
+
 
+
.container.\37 5\25 {
+
width: 75%;
+
}
+
 
+
.container.\35 0\25 {
+
width: 50%;
+
}
+
 
+
.container.\32 5\25 {
+
width: 25%;
+
}
+
 
+
.container {
+
width: 100% !important;
+
}
+
 
+
}
+
 
+
/* Basic */
+
 
+
body {
+
background: white;
+
                margin-left:0;
+
                margin-top:2vh;
+
                padding-top:2vh;
+
               
+
}
+
 
+
body.is-loading * {
+
-moz-transition: none !important;
+
-webkit-transition: none !important;
+
-ms-transition: none !important;
+
transition: none !important;
+
-moz-animation: none !important;
+
-webkit-animation: none !important;
+
-ms-animation: none !important;
+
animation: none !important;
+
}
+
 
+
body, input, select, textarea {
+
color: #333;
+
font-family: calibri;
+
font-size: 16pt;
+
font-weight: 300;
+
line-height: 1.65em;
+
}
+
 
+
a {
+
-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
+
-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
+
-ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
+
transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
+
color: #019ac8;
+
text-decoration: none;
+
border-bottom: dotted 1px;
+
}
+
 
+
a:hover {
+
color: #019ac8;
+
border-bottom-color: transparent;
+
}
+
 
+
strong, b {
+
font-weight: 600;
+
}
+
 
+
em, i {
+
font-style: italic;
+
}
+
 
+
ul, ol, dl, table, blockquote {
+
margin: 0 0 0 0;
+
}
+
 
+
h1, h2{
+
color:black;
+
font-weight: 600;
+
line-height: 2em;
+
margin-bottom: 1em;
+
}
+
+
h3, h4{
+
color:black;
+
font-weight:300;
+
line-height:1.5em
+
}
+
+
h5{
+
color:black;
+
font-weight:600;
+
font-size:42pt;
+
font-family: 'Love Ya Like A Sister', cursive;
+
}
+
 
+
 
+
/* Logo */
+
    #title{
+
background-color:#333;
+
 
+
background: -webkit-radial-gradient(black 30%, #4d4d4d);
+
background: -o-radial-gradient(black 30%, #4d4d4d);
+
background: -moz-radial-gradient(black 30%, #4d4d4d);
+
background: -radial-gradient(black 30%, #4d4d4d);
+
display:inline-block;
+
width:100vw;gg
+
padding: 25px 0 25px 0;
+
position:static;
+
text-align:center;
+
margin:0;
+
/*float:left;*/
+
}
+
+
#logoleiste{
+
float:none;
+
}
+
 
+
/* Nav */
+
 
+
.navbar {
+
margin-left:0;
+
                text-align:center;
+
background-color:#019ac8;
+
display:block;
+
width:100vw;
+
height:7vh;
+
z-index:9999;
+
position:static;
+
box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.5);
+
}
+
+
ul{
+
margin: 0;
+
padding: 0;
+
border-bottom:0;
+
}
+
+
li a{
+
font-size: 2.5vh;
+
cursor:pointer;
+
text-decoration: none;
+
color: #ececec;
+
padding-right:2vw;
+
padding-top:2vh;
+
display: block;
+
border-bottom-style:none;
+
}
+
+
li a:link{
+
font-weight: normal;
+
text-decoration: none;
+
color: #ececec;
+
}
+
+
li a:visited{
+
font-weight: normal;
+
text-decoration: none;
+
color: white;
+
}
+
+
li a:hover{
+
font-weight: bold;
+
text-decoration: none;
+
color: white;
+
}
+
+
li a:active{
+
font-weight: bold;
+
text-decoration: none;
+
color: white;
+
}
+
+
#computer li a:active{
+
font-weight: bold;
+
text-decoration: none;
+
color: white;
+
}
+
+
#tabletmenu li a:active{
+
font-weight: bold;
+
text-decoration: none;
+
color: white;
+
}
+
+
/*.navbar > ul > li:first-child{
+
margin-left:8.4vw;
+
}*/
+
+
#computer{
+
text-align:center;
+
width:100vw;
+
}
+
+
.computer li {
+
width: auto;
+
text-align:center;
+
height: 7vh;
+
line-height: 2.5vh;
+
display:inline-block;
+
z-index:666;
+
}
+
+
/*.computer > ul > li:first-child{
+
margin-left:8.4vw;
+
}*/
+
+
.drop{
+
width: auto;
+
position: absolute;
+
display:none;
+
padding-top:0;
+
margin-left:-1.5vw;
+
background-color:#333;
+
box-shadow: 0 1em 1em 0 rgba(0, 0, 0, 0.5);
+
z-index:333;
+
margin-top:2.3vh;
+
}
+
+
li:hover .drop {
+
display: block;
+
}
+
+
.drop li {
+
width: auto;
+
height: 6vh;
+
line-height: 2vh;
+
background-color:#333;
+
padding-left:clear;
+
padding-left:1vw;
+
padding-right:1vw;
+
margin:0;
+
}
+
.drop a{
+
font-size: 2vh;
+
text-align: left;
+
padding-left:0;
+
margin:0;
+
}
+
+
li a.current{
+
font-weight:600;
+
color:white;
+
}
+
+
#menu{
+
background-color:#019ac8;
+
text-decoration:none;
+
border:none;
+
text-align:left;
+
}
+
+
#tabletbutton{
+
background-color:#019ac8;
+
text-decoration:none;
+
border:none;
+
cursor:pointer;
+
text-align:left;
+
margin-left:1vw;
+
padding-top:0.3vh;
+
height:6vh;
+
width:auto;
+
}
+
+
#tabletmenu{
+
display:none;
+
background-color:#019ac8;
+
width:auto;
+
text-decoration:none;
+
border:none;
+
cursor:pointer;
+
margin-left:0;
+
padding-right:2vw;
+
padding-left:2vw;
+
text-align:left;
+
position:absolute;
+
z-index:9999;
+
height:100vh;
+
margin-top:0;
+
box-shadow: 0 1em 1em 0 rgba(0, 0, 0, 0.5);
+
}
+
+
#tabletmenu > ul > li:first-child{
+
margin-top:2vh;
+
}
+
+
#tabletmenu > ul > li{
+
margin-top:0;
+
width:auto;
+
padding:0;
+
margin-bottom:0;
+
line-height: 3vh;
+
}
+
+
#tabletmenu > ul > li > a{
+
color:#ececec;
+
margin-bottom:0;
+
}
+
+
#tabletmenu > ul > li > a.current{
+
font-weight:600;
+
color:white;
+
}
+
+
#tabletmenu > ul > li > a:hover{
+
color:white;
+
}
+
+
#computer > ul > li > a{
+
color:#ececec;
+
}
+
+
#computer > ul > li > a:hover{
+
color:white;
+
font-weight:600;
+
}
+
+
#computer > ul > li > a.current{
+
font-weight:600;
+
color:white;
+
}
+
+
#computer.drop{
+
width: 100vw;
+
position: absolute;
+
display:none;
+
background-color:#333;
+
padding-top:0;
+
margin-left:-1.5vw;
+
box-shadow: 0 1em 1em 0 rgba(0, 0, 0, 0.5);
+
z-index:333;
+
}
+
+
#computer > ul > li .drop li a{
+
width: auto;
+
height: 6vh;
+
line-height: 2vh;
+
background-color:#333;
+
color:#ececec;
+
padding-left:clear;
+
padding-left:0.5vw;
+
margin:0;
+
}
+
#computer .drop a{
+
font-size: 2vh;
+
text-align: left;
+
padding-left:0;
+
margin:0;
+
}
+
+
#computer > ul > li .drop li a:hover{
+
font-weight: bold;
+
text-decoration: none;
+
color: white;
+
}
+
+
#computer > ul > li > a:active{
+
color:white;
+
font-weight:600;
+
}
+
+
/* Banner */
+
 
+
    .banner{
+
position: center;
+
width:100vw;
+
height:auto;
+
text-align:center;
+
position: relative;
+
margin:0;
+
z-index:333;
+
}
+
#banner{
+
width:100%;
+
height:auto;
+
}
+
+
/* MainHeader */
+
   
+
.mainHeader{
+
text-align:center;
+
width:100vw;
+
}
+
/*.withSubH{
+
text-align:center;
+
height:42vh;
+
margin-bottom:15vh;
+
}*/
+
#mainHeader{
+
text-align:center;
+
}
+
#mainHeader h1{
+
+
vertical-align:middle;
+
/*font-family:they perished;*/
+
font-family: 'Love Ya Like A Sister', cursive;
+
font-size:75pt;
+
padding-top:7vh;
+
padding-bottom:9vh;
+
}
+
+
/*#firstHeader{
+
text-align:center;
+
}
+
#firstHeader h1{
+
+
vertical-align:middle;
+
font-family:they perished;
+
font-size:13vh;
+
padding-top:7vh;
+
margin-bottom:0;
+
color:#666;
+
}
+
+
#subheader{
+
text-align:center;
+
vertical-align:middle;
+
font-family:they perished;
+
font-size:8vh;
+
margin-top:-5vh;
+
color:black;
+
}*/
+
 
+
.page {
+
        width: 100vw;
+
        float: none;
+
    }
+
+
@media only screen and (min-width: 800px){
+
.page{
+
width:65vw;
+
margin-left:7vw;
+
float:left;
+
}}
+
+
/* abstract */
+
   
+
.abstract{
+
float:left;
+
width:100%;
+
height:auto;
+
border:3px solid #019ac8;
+
text-align:center;
+
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+
border-radius:6px;
+
margin-bottom:3vh;
+
padding:2vh 2vw 2vh 2vw;
+
}
+
 
+
.abstract h5{
+
float:left;
+
padding-bottom:7pt;
+
font-family: 'Love Ya Like A Sister', cursive;
+
}
+
.abstract p{
+
clear:both;
+
text-align:justify;
+
font-size:16pt;
+
}
+
+
.abstract2{
+
width:90vw;
+
margin-left:5vw;
+
height:auto;
+
border:3px solid #019ac8;
+
text-align:center;
+
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+
border-radius:6px;
+
margin-bottom:5vh;
+
padding:1vh 3vw 1vh 3vw;
+
}
+
.abstractHP{
+
float:left;
+
width:70vw;
+
margin-left:0;
+
height:auto;
+
border:3px solid #019ac8;
+
text-align:center;
+
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+
border-radius:6px;
+
margin-bottom:5vh;
+
padding:1vh 3vw 1vh 3vw;
+
}
+
+
/* highlights */
+
.rechts{
+
float:right;
+
margin-right:7vw;
+
width:14vw;
+
height:auto;
+
font-size:16pt;
+
text-align:center;
+
}
+
+
/*@media screen and (max-width: 800px){
+
.rechts {
+
        float: none;
+
        width: 86vw;
+
}}*/
+
 
+
    .highlights{
+
float:right;
+
margin-right:0;
+
width:14vw;
+
height:auto;
+
font-size:16pt;
+
border:3px solid #019ac8;
+
text-align:center;
+
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+
border-radius:6px;
+
margin-bottom:3vh;
+
padding:1vh 1vw;
+
}
+
+
.highlights a{
+
border-bottom:none;
+
line-height:5vh;
+
}
+
+
.highlights a:hover{
+
font-weight:600;
+
}
+
+
/*@media screen and (max-width: 800px){
+
.highlights{
+
float:left;
+
width:60vw;
+
height:auto;
+
font-size:16pt;
+
border:3px solid #019ac8;
+
text-align:center;
+
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+
border-radius:6px;
+
margin-bottom:5vh;
+
}}*/
+
+
.see_other{
+
width:14vw;
+
height:auto;
+
margin-bottom:2.5vh;
+
font-size:16pt;
+
color:#ececec;
+
background-color:#019ac8;
+
border:3px solid #019ac8;
+
text-align:center;
+
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+
border-radius:6px;
+
padding:1vh 0 1vh 0;
+
}
+
+
/*@media screen and (max-width: 800px){
+
.see_other{
+
width:20vw;
+
float:right;
+
height:auto;
+
margin-bottom:2.5vh;
+
font-size:16pt;
+
color:#ececec;
+
background-color:#019ac8;
+
border:3px solid #019ac8;
+
text-align:center;
+
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+
border-radius:6px;
+
padding:1vh 0 1vh 0;
+
}}*/
+
+
a button.see_other:hover{
+
font-weight: bold;
+
text-decoration: none;
+
color: white;
+
cursor:pointer;
+
}
+
+
.back_top{
+
width:14vw;
+
height:auto;
+
font-size:16pt;
+
color:#ececec;
+
background-color:#019ac8;
+
border:3px solid #019ac8;
+
text-align:center;
+
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+
border-radius:6px;
+
padding:1vh 0 1vh 0;
+
}
+
+
a button.back_top:hover{
+
font-weight: bold;
+
text-decoration: none;
+
color: white;
+
cursor:pointer;
+
}
+
/* submenu*/
+
   
+
.submenu{
+
width:30vw;
+
height:10vh;
+
margin-left:34.5vw;
+
background-color:white;
+
text-align:center;
+
margin-bottom:10vh;
+
}
+
+
.submenu_results{
+
width:90vw;
+
height:10vh;
+
margin-left:5vw;
+
background-color:white;
+
margin-bottom:100px;
+
text-align:center;
+
}
+
+
.button_r{
+
background-color:#019ac8;
+
cursor:pointer;
+
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+
border:none;
+
border-radius:6px;
+
text-align:center;
+
vertical-align:middle;
+
padding: 0 0 0 0;
+
width:42vw;
+
}
+
+
.button_r h2{
+
color:#ececec;
+
font-size:30pt;
+
line-height:42px;
+
vertical-align:middle;
+
display:block;
+
text-align:center;
+
padding-top:33px;
+
}
+
+
.button_r:hover{
+
cursor:pointer;
+
}
+
    .button_r h2:hover{
+
font-weight:bold;
+
text-decoration:none;
+
color:white;
+
cursor:pointer;
+
}
+
.button_m{
+
background-color:#019ac8;
+
cursor:pointer;
+
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+
border:none;
+
border-radius:6px;
+
text-align:center;
+
vertical-align:middle;
+
padding: 0 0 0 0;
+
width:27vw;
+
}
+
+
.button_m h2{
+
color:#ececec;
+
font-size:30pt;
+
line-height:42px;
+
vertical-align:middle;
+
display:block;
+
text-align:center;
+
padding-top:33px;
+
}
+
+
.button_m:hover{
+
cursor:pointer;
+
}
+
    .button_m h2:hover{
+
font-weight:bold;
+
text-decoration:none;
+
color:white;
+
cursor:pointer;
+
}
+
+
#a{
+
float:left;
+
}
+
+
#b{
+
float:none;
+
}
+
+
#c{
+
float:right;
+
}
+
+
/* Content */
+
    .content{
+
font-size:16pt;
+
font-family:calibri;
+
text-align:justify;
+
float:left;
+
}
+
#content{
+
font-family:calibri;
+
text-align:justify;
+
float:left;
+
}
+
.content2{
+
font-size:16pt;
+
}
+
#content2{
+
font-family:calibri;
+
width:86vw;
+
margin-left:7vw;
+
text-align:justify;
+
padding:0 0 0 0;
+
}
+
.contentHP1{
+
font-size:16pt;
+
font-family:calibri;
+
width:30vw;
+
margin-left:0;
+
text-align:justify;
+
margin-bottom:5vh;
+
float:left;
+
}
+
.contentHP2{
+
font-size:16pt;
+
font-family:calibri;
+
width:30vw;
+
margin-right:0;
+
text-align:justify;
+
float:right;
+
margin-bottom:5vh;
+
}
+
.contentHP3{
+
clear:both;
+
font-size:16pt;
+
font-family:calibri;
+
width:30vw;
+
margin-left:0;
+
text-align:justify;
+
float:left;
+
margin-bottom:5vh;
+
}
+
+
.more_parts{
+
width:90vw;
+
margin-left:5vw;
+
background-color:white;
+
text-align:center;
+
margin-bottom:5vh;
+
+
}
+
+
.specialPrize{
+
width:25vw;
+
font-size:16pt;
+
color:#ececec;
+
background-color:#019ac8;
+
border:3px solid #019ac8;
+
text-align:center;
+
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+
border-radius:6px;
+
padding:0 0 0 0;
+
}
+
+
.specialPrize h2{
+
font-weight:normal;
+
color:#ececec;
+
margin:0;  /* dringend notwendig damit der button schmal ist!!!*/
+
}
+
+
.specialPrize h2:hover{
+
font-weight: bold;
+
text-decoration: none;
+
color: white;
+
cursor:pointer;
+
}
+
+
a button.specialPrize:hover{
+
font-weight: bold;
+
text-decoration:none;
+
color:white;
+
cursor:pointer;
+
}
+
 
+
/* Images */
+
 
+
    .imageHP_r{
+
width:30vw;
+
height:auto;
+
margin-right:0;
+
float:right;
+
margin-top:3.7vh;
+
}
+
.imageHP_l{
+
width:30vw;
+
height:auto;
+
margin-left:0;
+
float:left;
+
margin-top:3.5vh;
+
}
+
+
/* Tabelle */
+
   
+
table{
+
border:3px solid #019ac8;
+
border-radius:6px;
+
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+
}
+
#groupParts{
+
margin-left:5vw;
+
margin-right:5vw;
+
width:90vw;
+
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+
border:3px solid #019ac8;
+
border-radius:6px;
+
font-size:16pt;
+
height:auto;
+
border-spacing:0;
+
text-align:center;
+
margin-bottom:5vh;
+
}
+
th{
+
font-weight:bold;
+
background-color:#019ac8;
+
color:white;
+
}
+
th, td{
+
border:1px solid #019ac8;
+
}
+
th, td #t1{
+
width:7vw;
+
}
+
th, td #t2{
+
width:7vw;
+
}
+
th, td #t3{
+
width:7vw;
+
}
+
th, td #t4{
+
    width:12vw;
+
}
+
th, td #t5{
+
width:17vw;
+
}
+
th, td #t6{
+
width:17vw;
+
}
+
th, td #t7{
+
width:17vw;
+
}
+
th, td #t8{
+
width:6vw;
+
}
+
/* Footer */
+
   
+
#footer{
+
background-color:#333;
+
background: -webkit-linear-gradient(top, black 30%, #4d4d4d);
+
background: -o-linear-gradient(bottom, black 30%, #4d4d4d);
+
background: -moz-linear-gradient(bottom, black 30%, #4d4d4d);
+
background: -linear-gradient(to bottom, black 30%, #4d4d4d);
+
height:10%;
+
padding-bottom:0;
+
width:100vw;
+
}
+
.footer{
+
clear:both;
+
margin-bottom:0;
+
}
+
 
+
/* Links IDs */
+
 
+
    .verlinked{
+
padding-top:9vh;
+
margin-bottom:3vh;
+
margin-top:3vh;
+
clear:both;
+
}
+
+
.read_more{
+
width:auto;
+
float:left;
+
font-size:16pt;
+
color:#ececec;
+
background-color:#019ac8;
+
border:3px solid #019ac8;
+
text-align:center;
+
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+
border-radius:6px;
+
padding:0 2vw;
+
margin-bottom:3vh;
+
}
+
+
.read_more p{
+
padding:1vh 0;
+
margin:0;
+
}
+
+
button.read_more:hover{
+
font-weight: bold;
+
text-decoration: none;
+
color: white;
+
cursor:pointer;
+
}rel="stylesheet" href="bluebox/css/theDoctor.css"
+
</style>
+
<script type="text/javascript">
+
(function($) {
+
 
+
skel.breakpoints({
+
wide: '(max-width: 1680px)',
+
normal: '(max-width: 1280px)',
+
narrow: '(max-width: 980px)',
+
narrower: '(max-width: 840px)',
+
mobile: '(max-width: 736px)',
+
mobilep: '(max-width: 480px)'
+
});
+
 
+
$(function() {
+
 
+
var $window = $(window),
+
$body = $('body');
+
 
+
// Disable animations/transitions until the page has loaded.
+
$body.addClass('is-loading');
+
 
+
$window.on('load', function() {
+
$body.removeClass('is-loading');
+
});
+
 
+
// Fix: Placeholder polyfill.
+
$('form').placeholder();
+
 
+
// Prioritize "important" elements on narrower.
+
skel.on('+narrower -narrower', function() {
+
$.prioritize(
+
'.important\\28 narrower\\29',
+
skel.breakpoint('narrower').active
+
);
+
});
+
 
+
// Dropdowns.
+
$('#nav > ul').dropotron({
+
offsetY: -15,
+
hoverDelay: 0,
+
alignment: 'center'
+
});
+
 
+
// Off-Canvas Navigation.
+
 
+
// Title Bar.
+
$(
+
'<div id="titleBar">' +
+
'<a href="#navPanel" class="toggle"></a>' +
+
'<span class="title">' + $('#logo').html() + '</span>' +
+
'</div>'
+
)
+
.appendTo($body);
+
 
+
// Navigation Panel.
+
$(
+
'<div id="navPanel">' +
+
'<nav>' +
+
$('#nav').navList() +
+
'</nav>' +
+
'</div>'
+
)
+
.appendTo($body)
+
.panel({
+
delay: 500,
+
hideOnClick: true,
+
hideOnSwipe: true,
+
resetScroll: true,
+
resetForms: true,
+
side: 'left',
+
target: $body,
+
visibleClass: 'navPanel-visible'
+
});
+
 
+
// Fix: Remove navPanel transitions on WP<10 (poor/buggy performance).
+
if (skel.vars.os == 'wp' && skel.vars.osVersion < 10)
+
$('#titleBar, #navPanel, #page-wrapper')
+
.css('transition', 'none');
+
 
+
});
+
 
+
})(jQuery);
+
</script>
+
<script type="text/javascript">
+
$(document).ready(function(){
+
$("#header").load("header.html");
+
$("#footer").load("footer.html");
+
$(window).scroll(function(event){
+
var scrollY = $(window).scrollTop();
+
var navbar = $(".navbar");
+
var computer = $(".computer")
+
var tablet = $(".tablet")
+
var topButton = $('button.back_top');
+
var highlights = $(".rechts");
+
+
    if(scrollY > $("#title").height()){
+
navbar.css({"top":"0", "position":"fixed"});
+
}else{
+
navbar.css({"top":"0", "position":"static"});
+
}
+
+
if(scrollY > 1300){
+
highlights.css({"top": "10vh","position": "fixed","right":"0"});
+
}else{
+
highlights.css({"top": "0","position": "static"});
+
}
+
+
$("#lab1b").click(function(){
+
$("#lab1c").toggle();
+
});
+
+
$("#lab2b").click(function(){
+
$("#lab2c").toggle();
+
});
+
+
$("#lab3b").click(function(){
+
$("#lab3c").toggle();
+
});
+
+
$("#lab4b").click(function(){
+
$("#lab4c").toggle();
+
});
+
+
$("#lab5b").click(function(){
+
$("#lab5c").toggle();
+
});
+
+
        /*var $element = $('.highlights');
+
        var headerHeight = $('.mainHeader').outerHeight();
+
        var isFixed = ($element.css('position') == 'fixed');
+
 
+
        function positionOfBoxScrolled() {
+
            if ($('.page').css('float') == 'none') {
+
                console.log('nonefloat');
+
                $element.css({
+
                    'position': 'fixed',
+
                    'bottom': '0px',
+
                    'top': 'auto'
+
                });
+
            } else {
+
                console.log('float');
+
                $element.css({
+
                    'position': 'fixed',
+
                    'top': '7vh',
+
                    'bottom': 'auto'
+
                });
+
            }
+
        }
+
 
+
        if ($(this).scrollTop() > headerHeight && !isFixed) {
+
            positionOfBoxScrolled();
+
        }
+
+
        if ($(this).scrollTop() < headerHeight && isFixed) {
+
            $element.css({
+
                'position': 'relative',
+
                'top': '0px',
+
                'bottom': 'auto'
+
            });
+
        }*/
+
    });
+
+
});
+
 
+
 
+
$(document).ready(function(){
+
+
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
+
$(".tablet").show();
+
$("#tabletbutton").click(function(){
+
$("#tabletmenu").toggle();
+
});
+
}
+
else{
+
$(".computer").show();
+
}
+
});
+
 
+
$(document).ready(function(){
+
+
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
+
$("#logoleiste").css({"width":"70vw"});
+
}
+
else{
+
$("#logoleiste").css({"width":"50vw"});
+
}
+
});
+
</script>
+
<style>@import 'https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister';</style>
+
 
</head>
 
</head>
<body>
+
<noscript>
        <div id="title">
+
  <style type="text/css">
    <img id="logoleiste" src="images/titel.png" alt="iGEM TU Darmstadt 2016"/>
+
    .js-message {
        </div>
+
    position: fixed;
<div class="vviki" id="vviki">
+
    top: 30px;
<div id="title">
+
    right: 30px;
<img id="logoleiste" src="images/titel.png" alt="iGEM TU Darmstadt 2016"/>
+
    background: white;
</div>
+
    line-height: 12px;
<div class="navbar">
+
    font-size: 10px;
<div class="tablet" style="display: none">
+
    width: 280px;
    <div id="menu">
+
    z-index: 999;
  <button id="tabletbutton">
+
    color: red;
  <img src="images/nav/zahnrad.png" alt="menu" id="tabletbutton"></img></button>
+
  }
    <div id="tabletmenu">
+
  </style>
<ul>
+
  <div class="js-message abstract">
            <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Achievements">Achievements</a></li>
+
    If you can see this message, you do not use Javascript. This Website is best to use with Javascript enabled. Without Javascript enabled, many features including the mobile version are not usable.
            <li ><a class="current" href="https://2016.igem.org/Team:TU_Darmstadt/Lab">In the Lab</a></li>
+
  </div>
            <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Hardware">Robotics</a></li>
+
</noscript>
            <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Model">Modelling</a></li>
+
            <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Human_Practices">Human Practices</a></li>
+
            <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Collaborations">Collaborations</a></li>
+
            <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Results_Parts">Results + Parts</a></li>
+
            <li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Notebook">Labbook</a></li>
+
<li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Team">Team</a></li>
+
            </ul>
+
</div>
+
</div>
+
</div>
+
<div class="computer" id="computer" style="display: none">
+
<ul>
+
<li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Achievements">Achievements</a></li>
+
<li ><a class="current" href="https://2016.igem.org/Team:TU_Darmstadt/Lab">In the Lab</a></li>
+
<li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Hardware">Robotics</a></li>
+
<li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Model">Modeling</a></li>
+
<li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Human_Practices">Human Practices</a></li>
+
<li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Collaborations">Collaborations</a></li>
+
<li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Results_Parts">Results + Parts</a></li>
+
<li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Notebook">Labbook</a></li>
+
<li ><a href="https://2016.igem.org/Team:TU_Darmstadt/Team">Team</a></li>
+
</ul>
+
</div>
+
</div>
+
<div class="banner"><img id="banner" src="images/team.jpg" alt="teamphoto"></img>
+
</div>
+
<div id="mainHeader">
+
<h1>IN THE LAB...</h1>
+
    </div>
+
<div class="page">
+
    <div class="abstract">
+
<p><b>THE PROJECT</b><br/>
+
<b>[...]</b></p>
+
</div>
+
    <div class="verlinked" id="ortho"><h5>ORTHOGONAL PAIR</h5></div>
+
<div class="abstract">
+
    <p><b>ABSTRACT</b><br/>
+
<b>[...]
+
</b></p>
+
<button class="read_more" id="lab1b"><p>interested? read more</p></button>
+
</div>
+
<div class="content" id="lab1c" style="display:none">
+
<p>Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to say that they were perfectly normal, thank you very much. They were the last people you'd expect to be involved in anything strange or mysterious, because they just didn't hold with such nonsense.<br/>
+
Mr. Dursley was the director of a firm called Grunnings, which made drills. He was a big, beefy man with hardly any neck, although he did have a very large mustache. Mrs. Dursley was thin and blonde and had nearly twice the usual amount of neck, which came in very useful as she spent so much of her time craning over garden fences, spying on the neighbors. The Dursleys had a small son called Dudley and in their opinion there was no finer boy anywhere.
+
The Dursleys had everything they wanted, but they also had a secret, and their greatest fear was that somebody would discover it. They didn't think they could bear it if anyone found out about the Potters. Mrs. Potter was Mrs. Dursley's sister, but they hadn't met for several years; in fact, Mrs. Dursley pretended she didn't have a sister, because her sister and her good-for-nothing husband were as unDursleyish as it was possible to be. The Dursleys shuddered to think what the neighbors would say if the Potters arrived in the street. The Dursleys knew that the Potters had a small son, too, but they had never even seen him. This boy was another good reason for keeping the Potters away; they didn't want Dudley mixing with a child like that.<br/>
+
When Mr. and Mrs. Dursley woke up on the dull, gray Tuesday our story starts, there was nothing about the cloudy sky outside to suggest that strange and mysterious things would soon be happening all over the country. Mr. Dursley hummed as he picked out his most boring tie for work, and Mrs. Dursley gossiped away happily as she wrestled a screaming Dudley into his high chair.<br/>
+
None of them noticed a large, tawny owl flutter past the window.<br/>
+
At half past eight, Mr. Dursley picked up his briefcase, pecked Mrs. Dursley on the cheek, and tried to kiss Dudley good-bye but missed, because Dudley was now having a tantrum and throwing his cereal at the walls.<br/>
+
"Little tyke," chortled Mr. Dursley as he left the house. He got into his car and backed out of number four's drive.<br/>
+
It was on the corner of the street that he noticed the first sign of something peculiar -- a cat reading a map. For a second, Mr. Dursley didn't realize what he had seen -- then he jerked his head around to look again. There was a tabby cat standing on the corner of Privet Drive, but there wasn't a map in sight. What could he have been thinking of? It must have been a trick of the light. Mr. Dursley blinked and stared at the cat. It stared back. As Mr. Dursley drove around the corner and up the road, he watched the cat in his mirror. It was now reading the sign that said Privet Drive -- no, looking at the sign; cats couldn't read maps or signs. Mr. Dursley gave himself a little shake and put the cat out of his mind. As he drove toward town he thought of nothing except a large order of drills he was hoping to get that day.<br/>
+
But on the edge of town, drills were driven out of his mind by something else. As he sat in the usual morning traffic jam, he couldn't help noticing that there seemed to be a lot of strangely dressed people about. People in cloaks. Mr. Dursley couldn't bear people who dressed in funny clothes -- the getups you saw on young people! He supposed this was some stupid new fashion. He drummed his fingers on the steering wheel and his eyes fell on a huddle of these weirdos standing quite close by. They were whispering excitedly together. Mr. Dursley was enraged to see that a couple of them weren't young at all; why, that man had to be older than he was, and wearing an emerald-green cloak! The nerve of him! But then it struck Mr. Dursley that this was probably some silly stunt -- these people were obviously collecting for something... yes, that would be it. The traffic moved on and a few minutes later, Mr. Dursley arrived in the Grunnings parking lot, his mind back on drills.<br/>
+
Mr. Dursley always sat with his back to the window in his office on the ninth floor. If he hadn't, he might have found it harder to concentrate on drills that morning. He didn't see the owls swooping past in broad daylight, though people down in the street did; they pointed and gazed open- mouthed as owl after owl sped overhead. Most of them had never seen an owl even at nighttime. Mr. Dursley, however, had a perfectly normal, owl-free morning. He yelled at five different people. He made several important telephone calls and shouted a bit more. He was in a very good mood until lunchtime, when he thought he'd stretch his legs and walk across the road to buy himself a bun from the bakery.<br/>
+
He'd forgotten all about the people in cloaks until he passed a group of them next to the baker's. He eyed them angrily as he passed. He didn't know why, but they made him uneasy. This bunch were whispering excitedly, too, and he couldn't see a single collecting tin. It was on his way back past them, clutching a large doughnut in a bag, that he caught a few words of what they were saying.<br/>
+
"The Potters, that's right, that's what I heard -"<br/>
+
"- yes, their son, Harry -"Mr. Dursley was the director of a firm called Grunnings, which made drills. He was a big, beefy man with hardly any neck, although he did have a very large mustache. Mrs. Dursley was thin and blonde and had nearly twice the usual amount of neck, which came in very useful as she spent so much of her time craning over garden fences, spying on the neighbors. The Dursleys had a small son called Dudley and in their opinion there was no finer boy anywhere.<br/>
+
The Dursleys had everything they wanted, but they also had a secret, and their greatest fear was that somebody would discover it. They didn't think they could bear it if anyone found out about the Potters. Mrs. Potter was Mrs. Dursley's sister, but they hadn't met for several years; in fact, Mrs. Dursley pretended she didn't have a sister, because her sister and her good-for-nothing husband were as unDursleyish as it was possible to be. The Dursleys shuddered to think what the neighbors would say if the Potters arrived in the street. The Dursleys knew that the Potters had a small son, too, but they had never even seen him. This boy was another good reason for keeping the Potters away; they didn't want Dudley mixing with a child like that.<br/>
+
When Mr. and Mrs. Dursley woke up on the dull, gray Tuesday our story starts, there was nothing about the cloudy sky outside to suggest that strange and mysterious things would soon be happening all over the country. Mr. Dursley hummed as he picked out his most boring tie for work, and Mrs. Dursley gossiped away happily as she wrestled a screaming Dudley into his high chair.<br/>
+
None of them noticed a large, tawny owl flutter past the window.<br/>
+
<b>[....]</b>
+
    <p>
+
    </div>
+
<div class="verlinked" id="repo"><h5>REPORTER</h5></div>
+
<div class="abstract">
+
<p><b>ABSTRACT</b><br/>
+
<b>[...]</b></p>
+
<button class="read_more" id="lab2b"><p>interested? read more</p></button>
+
</div>
+
<div class="content" id="lab2c" style="display:none">
+
    <p>[...]</p>
+
</div>
+
<div class="verlinked" id="kill"><h5>KILL(switch)</h5></div>
+
<div class="abstract">
+
<p><b>ABSTRACT</b><br/>
+
<b>[...]</b></p>
+
<button class="read_more" id="lab3b"><p>interested? read more</p></button>
+
</div>
+
<div class="content" id="lab3c" style="display:none">
+
    <p>[...]</p>
+
</div>
+
<div class="verlinked" id="GI"><h5>GENOMIC INTEGRATION</h5></div>
+
<div class="abstract">
+
<p><b>ABSTRACT</b><br/>
+
<b>[...]</b></p>
+
<button class="read_more" id="lab4b"><p>interested? read more</p></button>
+
</div>
+
<div class="content" id="lab4c" style="display:none">
+
    <p>[...]</p>
+
</div>
+
<div class="verlinked" id="chem"><h5>CHEMICAL SYNTHESIS</h5></div>
+
<div class="abstract">
+
<p><b>ABSTRACT</b><br/>
+
<b>[...]</b></p>
+
<button class="read_more" id="lab5b"><p>interested? read more</p></button>
+
</div>
+
<div class="content" id="lab5c" style="display:none">
+
    <p>[...]</p>
+
</div>
+
    </div>
+
<div class="rechts">
+
<div class="highlights"><a href="#ortho">Orthogonal Pair</a><br/><a href="#repo">Reporter</a><br/><a href="#kill">KILL(switch)</a><br/><a href="#GI">Genomic Integration</a><br/><a href="#chem">Chemical Synthesis</a></div>
+
        <div><a href="#mainHeader"><button class="back_top">back to the top</button></a></div>
+
</div>
+
<div class="footer" id="footer">
+
</div>
+
</div>
+
</body>
+
 
</html>
 
</html>

Latest revision as of 11:29, 17 October 2016

If you can see this message, you do not use Javascript. This Website is best to use with Javascript enabled. Without Javascript enabled, many features including the mobile version are not usable.