Difference between revisions of "Team:Linkoping Sweden/Secret"

Line 1: Line 1:
 +
{{Linkoping_Sweden/Style}}
 +
{{Linkoping_Sweden/Header}}
  
 
<html>
 
<html>
 
+
   
     <style>
+
     <body>
 
+
 
+
 
+
/* {
+
    border: solid 1px;
+
}
+
 
+
/********************************* DEFAULT WIKI SETTINGS  ********************************/
+
/* Clear the default wiki settings */
+
+
#home_logo, #sideMenu { display:none; }
+
#sideMenu, #top_title, .patrollink  {display:none;}
+
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
+
body {background-color:white; }
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
#bodyContent a[href ^="https://"] { padding-right: 0px; }
+
+
/***************************************
+
******** Kod to be Removed *************
+
***************************************/
+
 
+
.igem-bar {
+
background: black;
+
height: 18px;
+
width: 100%;
+
position: fixed;
+
z-index: 10;
+
}
+
 
+
.igem-bar-outfill {
+
height: 18px;
+
width: 100%;
+
}
+
 
+
.provisorisk-header {
+
background: Firebrick;
+
padding: 1px;
+
}
+
 
+
.provisorisk-footer {
+
flex: 1 100%;
+
background: tomato;
+
}
+
 
+
/***************************************
+
****************************************
+
***************************************/
+
 
+
 
+
/***********************************************************************
+
************************************************************************
+
************************************************************************
+
******************* Allmänn kod till hela wikin ************************
+
************************************************************************
+
************************************************************************
+
***********************************************************************/
+
 
+
 
+
/*** fonts ***/
+
 
+
/* latin */
+
@font-face {
+
  font-family: 'Dosis';
+
  font-style: normal;
+
  font-weight: 400;
+
  src: local('Dosis Regular'), local('Dosis-Regular'),
+
      url('https://static.igem.org/mediawiki/2017/d/de/T--Linkoping_Sweden--Font-Dosis-latin.woff') format('woff');
+
}
+
 
+
/* dosis light - latin */
+
@font-face {
+
  font-family: 'Dosis';
+
  font-style: normal;
+
  font-weight: 200;
+
  src: local('Dosis ExtraLight'), local('Dosis-ExtraLight'),
+
      url('https://static.igem.org/mediawiki/2017/a/a9/T--Linkoping_Sweden--Font-Dosis-200-latin.woff') format('woff');
+
}
+
 
+
/* dosis bold - latin */
+
@font-face {
+
  font-family: 'Dosis';
+
  font-style: normal;
+
  font-weight: 600;
+
  src: local('Dosis Bold'), local('Dosis-Bold'),
+
      url('https://static.igem.org/mediawiki/2017/c/c4/T--Linkoping_Sweden--Font-Dosis-600-latin.woff') format('woff');
+
}
+
 
+
 
+
/* Gives full screen width */
+
body {
+
  color: #1a1a1a;
+
  margin: 0;
+
}
+
 
+
#flex-wrapper {  /* sidans backgrundsfärg */
+
background: #fff;
+
font-size: 16px;
+
font-family: Dosis, calibri;
+
position: relative;
+
}
+
 
+
#flex-wrapper hr {
+
background-color: #019667;
+
width: 98%;
+
margin: auto;
+
}
+
 
+
/* Makes all <a> links have this:*/
+
a:link {
+
    text-decoration: none; /* No underline on links! */
+
}
+
 
+
/*** text ***/
+
.text-center {  /*class which centers text. applied to text tags or parents */
+
text-align: center;
+
}
+
 
+
.text-extra-big {
+
font-size: 150%;
+
line-height: 140%;
+
}
+
 
+
.text-big {
+
font-size: 110%;
+
line-height: 140%;
+
}
+
 
+
.text-small {
+
font-size: 100%;
+
line-height: 140%;
+
}
+
 
+
#flexwrapper p, .fp p {
+
font-size: 110%;
+
margin: 0;
+
line-height: 140%;
+
font-family: Dosis, Calibri;
+
}
+
 
+
#flex-wrapper h1, #flex-wrapper h2, #flex-wrapper h3, #flex-wrapper h4 {
+
margin: 0px;
+
font-weight: 200;
+
line-height: 140%;
+
font-family: Dosis, Calibri;
+
}
+
 
+
#flex-wrapper h1 {
+
font-size: 500%;
+
}
+
 
+
#flex-wrapper h2{
+
font-size: 400%;
+
}
+
 
+
#flex-wrapper h3 {
+
font-size: 300%;
+
}
+
 
+
#flex-wrapper h4 {
+
font-size: 200%;
+
}
+
 
+
/******* img restrictions ********/
+
 
+
img {
+
max-width: 100%;
+
border-radius: 5px;
+
}
+
 
+
.personal-img {
+
  width: 100%;
+
  max-width: 210px;
+
  border-radius: 10px;
+
  margin: auto;
+
}
+
 
+
.img-enlarged {
+
visibility: hidden;
+
position: absolute;
+
left: 0;
+
right: 0;
+
margin: auto;
+
width: 0;
+
opacity: 0;
+
    transition: 300ms;
+
box-shadow: 0 0 100px #888888;
+
}
+
 
+
.flex-img-30:hover .img-enlarged {
+
visibility: visible;
+
width:  50%;  /*exakt width kan ändras. detta är i nuläget width av hela fönstret*/
+
opacity: 1;
+
}
+
 
+
.img-round {
+
border-radius: 100%;
+
}
+
 
+
.img-center {
+
margin: auto;
+
}
+
 
+
/******** links *********/
+
 
+
#flex-wrapper a {
+
font-family: Dosis, Calibri;
+
color: #1a1a1a;
+
}
+
 
+
.content-button {
+
display: inline-block;
+
border-radius: 4px;
+
border: solid 2px #019667;
+
padding: 3%;
+
text-align: center;
+
font-size: 150%;
+
transition: ease 0.2s;
+
}
+
 
+
.content-button:hover {
+
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4);
+
color: #019667;
+
}
+
/******** Tables ***************/
+
 
+
.content-table { /* klass för vanliga tabeller på wikin */
+
width: 95%;
+
margin: auto;
+
text-align: left;
+
border-collapse: collapse;
+
overflow-x: auto;
+
}
+
 
+
.content-table td, .content-table th {
+
padding: 7px 3px;
+
border-bottom: 1px solid #019667;
+
}
+
 
+
.content-table tr:hover { /*markerar den raden som hoveras*/
+
background: #dddddd;
+
}
+
 
+
.content-table th { /* undo hover background on first row */
+
background: white;
+
}
+
 
+
/***********************************************************************
+
************************************************************************
+
************************************************************************
+
**************************** Flex /Baggman *****************************
+
************************************************************************
+
************************************************************************
+
***********************************************************************/
+
 
+
/*** flex main ***/
+
#flex-wrapper {
+
display: flex;
+
flex-flow: row wrap;
+
z-index: 2;
+
}
+
 
+
.aside {
+
display: none; /* gömmer asidesen i mobil och plattvy */
+
flex: 1 auto;
+
}
+
 
+
.flex-container {
+
flex: 1 100%; /* bredd i mobil och plattvy */
+
padding-bottom: 40px; /* ger en liten kant till footern*/
+
}
+
 
+
/** flexitem templates **/
+
 
+
.flex-flipper, .flex-flipper-evoth, .flex-sidebyside, .flex-sidebyside-reverse { /* flexcontainers i .flex-container */
+
display: flex;
+
flex: 1 100%;
+
align-items: center;
+
justify-content: space-around;
+
margin: 2% 0;
+
}
+
 
+
.flex-img-100, .flex-text-100 {
+
  flex: 1 90%;
+
}
+
 
+
.flex-img-70, .flex-text-70 {
+
  flex: 1 65%;
+
}
+
 
+
.flex-img-50, .flex-text-50 {
+
  flex: 1 45%;
+
}
+
 
+
.flex-img-30, .flex-text-30 {
+
  flex: 1 25%;
+
}
+
 
+
.flex-img-30, .flex-text-30, .flex-img-50, .flex-text-50, .flex-img-70, .flex-text-70, .flex-img-100, .flex-text-100 {
+
margin: 2%;
+
}
+
 
+
.flex-img-30, .flex-img-50, .flex-img-70, .flex-img-100 {
+
display: flex;
+
align-content: center;
+
align-items: center;
+
}
+
 
+
.flex-item-top {
+
align-self: flex-start;
+
}
+
 
+
/************** för olika skärmar ****************/
+
 
+
@media all and (max-width: 768px) { /*** mobil ***/
+
+
.flex-flipper, .flex-flipper-evoth {
+
/*flex-flow: column nowrap; krånglar på safari, därför display block istället */
+
display: block;
+
}
+
+
.flex-sidebyside, .flex-sidebyside-reverse {
+
/* flex-flow: column nowrap; krånglar på safari, därför display block istället */
+
display: block;
+
}
+
+
}
+
 
+
@media all and (min-width: 768px) { /****** platta ******/
+
+
.flex-sidebyside {
+
flex-flow: row wrap;
+
}
+
+
.flex-sidebyside-reverse {
+
flex-flow: row-reverse wrap;
+
}
+
+
.flex-flipper, .flex-flipper-evoth {
+
flex-flow: row nowrap;
+
}
+
+
.flex-flipper:nth-of-type(odd) { /* ändrar riktining på varannan flex-flipper */
+
flex-direction: row-reverse;
+
}
+
+
.flex-flipper-evoth:nth-of-type(4n) { /* ändrar riktining på varannan flex-flipper */
+
flex-direction: row-reverse;
+
}
+
+
.flex-outfil-50 {
+
flex: 1 45%;
+
}
+
}
+
+
@media all and (min-width: 1280px) { /***********  Dator ***************/
+
+
.aside {
+
display: block; /*visar asidsen*/
+
}
+
+
.flex-container {
+
flex: 1 80%; /*bredd på containern när asidsen är med*/
+
max-width: 1500px; /* en maxwidth för content => bredare asides på breda skärmar */
+
order: 2;
+
}
+
+
.aside-l { order: 1;}
+
.aside-r { order: 3;}
+
.provisorisk-footer  { order: 4;}  /* ta bort senare */
+
.footer  { order: 4;} 
+
}
+
 
+
 
+
 
+
/***********************************************************************
+
************************************************************************
+
************************************************************************
+
************** Headerkod desktop by Jonathan Bergqvist *****************
+
************************************************************************
+
************************************************************************
+
***********************************************************************/
+
 
+
 
+
/**********Logo and social media****************************************************************/
+
/* For background, LiU iGEM logo and social media icons*/
+
.logo-container {
+
background: url("https://static.igem.org/mediawiki/2017/2/2c/T--Linkoping_Sweden--bike_bg_cut.jpg") no-repeat center;
+
    background-size: cover;
+
height: 25vh;
+
width: 100%;
+
position: fixed;
+
top: 18px;
+
min-height: 140px;
+
}
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
/* Determine position for the LiU iGEM logo */
+
.liu_igem_logo {
+
float: left;
+
z-index: 5;
+
}
+
 
+
/* Determine size of the actual picture, within the size of .logo-container above */
+
.liu_igem_logo img{
+
height: 23vh;
+
width: auto;
+
    padding-left: 3%;
+
    padding-bottom: 1%;
+
    padding-top: 1%;
+
min-height: 130px;
+
}
+
 
+
/* For social media only */
+
.social-container {
+
position: absolute;
+
right: 1%;
+
bottom: 0;
+
z-index: 5;
+
+
}
+
 
+
/* Link to social media, determine its position */
+
.social-container a {
+
/* Used as <a><img></img></a> */
+
margin: 2px;
+
 
+
}
+
 
+
/* Determine the size of the social media icons */
+
.social-container img {
+
/* Used as <a><img></img></a> */
+
height: 5vh;
+
width:auto;
+
min-height: 28px;
+
}
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
/*********************Navigation Bar*******************************************************/
+
 
+
/* Overall navigation bar */
+
.topnav, uses {
+
background: white;
+
background: linear-gradient(to bottom right, #B8DFD2, #edf7f4, #f9f9f9, #f9f9f9, #f9f9f9, #edf7f4, #B8DFD2);
+
    display: block;
+
font-size: calc(15px + 0.5vh);
+
font-family: Dosis, calibri;
+
width: 100%; /* Full screen width */
+
height: 7vh; /* 9.72 Equals 66px based on a total width of 1366px */
+
border-top: 2px solid #019966;
+
border-bottom: 2px solid #019966;
+
position: relative;
+
min-height: 39px;
+
}
+
 
+
/* Style the links inside the navigation bar, used by non-lists/non-buttons */
+
.topnav a, .topnav span {
+
display: block;
+
text-align: center; /* Delete text-align for .topnav a, topnav span (line 168, headlines) in Baggmanstyle, to get all .dropdown to the left if wanted */
+
}
+
 
+
/* Change the color of the three bar menu on click to menu */
+
.topnav a:hover {
+
background-color: inherit;
+
color: black;
+
}
+
 
+
/* Hide the link that should open and close the topnav on small screens */
+
.topnav .icon {
+
display: none;
+
color: black;
+
}
+
 
+
/* Show the dropdown menu on hover */
+
.topnav .dropdown:hover .dropdown-content {
+
    display: block;
+
}
+
 
+
 
+
 
+
/****************** Menu buttons *****************/
+
 
+
/* The general menu button */
+
.dropdown {
+
    display: inline-block;
+
    position: relative;
+
    text-align: center;
+
    width: 11%; /*19.5%; for =< 5 menu items!*/
+
    box-sizing: border-box;
+
}
+
 
+
/* What happens to <a> and <span> in .dropdown */
+
.dropdown a, .dropdown span {
+
    display: block;
+
padding-bottom: 1.2vh;
+
    color: #1a1a1a;
+
}
+
 
+
/* The dropdown menu-content */
+
.dropdown .dropdown-content {
+
    display: none;
+
    position: absolute;
+
    background: #f9f9f9;
+
    width: 100%; /*90% before, 98.5% used to align with width: 14% in dropdown*/
+
    border: 2px solid #019966;
+
    border-top: none;
+
    z-index: 10;
+
}
+
 
+
.dropdown .dropdown-content a {
+
    display: block;
+
    padding: 10px 0px; /*only 10px before*/
+
    border-bottom: 1px solid #019966; /* 1px if otherwise used */
+
    color: #1a1a1a;
+
    text-align: center;
+
    width: 100%; /* 90% for cut line, if used with margin: 0px 10px (not 0px only); (only works when in full screen) */
+
    margin: 0px;
+
overflow: auto;
+
}
+
 
+
.dropdown .dropdown-content a:first-child {
+
    border-top: 1px solid #019966; /* 1px if otherwise used, for cut line in <a> */
+
}
+
 
+
.dropdown .dropdown-content a:last-child {
+
    border-bottom: none;
+
}
+
 
+
/* What happens to link on hover */
+
.dropdown a:hover {
+
    color: #019966;
+
background: rgba(0,0,0,0);
+
}
+
 
+
/* What happens to .drop on hover */
+
.dropdown:hover .dropdown-content {
+
    display: block;
+
}
+
 
+
 
+
/**************** for stickyheader *******************/
+
.topnav-scrolled{  /*must be written after the headers css code*/
+
  position: fixed;
+
  top: 18px;
+
  z-index: 10;
+
}
+
 
+
.header-outfill {
+
  height: 25vh;
+
  position: relative;
+
  z-index: -20;
+
  min-height: 140px;
+
}
+
 
+
.header-outfill-plus {
+
  height: 33vh;
+
  min-height: 182px;
+
}
+
 
+
.logo-container-hidden {
+
visibility: hidden;
+
}
+
 
+
/***********************************************************************
+
************************************************************************
+
************************************************************************
+
******************* Frontpagekod by Jonatan Baggman ********************
+
************************************************************************
+
************************************************************************
+
***********************************************************************/
+
 
+
/************************* allmänn frontpage (fp) *******************/
+
.fp {
+
position: relative;
+
z-index: 1;
+
}
+
 
+
.fp > div {
+
margin: 0;
+
}
+
 
+
.fp h1 {
+
  font-size: 700%;
+
}
+
 
+
.fp h1, .fp h2, .fp h3, .fp h4 {
+
margin: 0px;
+
font-weight: 200;
+
line-height: 140%;
+
font-family: Dosis, Calibri;
+
}
+
 
+
.fp h2{
+
font-size: 400%;
+
}
+
 
+
.fp h3 {
+
font-size: 300%;
+
}
+
 
+
.fp h4 {
+
font-size: 200%;
+
}
+
 
+
/************************** frontpage images ************************/
+
 
+
.fp-bg-img-div {
+
position: relative;
+
}
+
 
+
#fp-cover-img {
+
  Background: url("https://static.igem.org/mediawiki/2017/9/99/T--Linkoping_Sweden--lab.jpg") no-repeat center left;
+
  background-size: cover;
+
  height: 65vh;
+
}
+
 
+
#fp-2nd-img {
+
  Background: url("https://static.igem.org/mediawiki/2017/f/f9/T--Linkoping_Sweden--igem-pin.jpg") no-repeat top fixed;
+
  background-size: cover;
+
  min-height: 450px;
+
}
+
 
+
#fp-3rd-img {
+
  Background: url("https://static.igem.org/mediawiki/2017/f/fc/T--Linkoping_Sweden--Labwork.jpg") no-repeat top fixed;
+
  background-size: cover;
+
  min-height: 400px;
+
}
+
 
+
#fp-4th-img {
+
  Background: url("https://static.igem.org/mediawiki/2017/c/c9/T--Linkoping_Sweden--gruppbild_skog.jpg") no-repeat center fixed;
+
  background-size: cover;
+
  min-height: 600px;
+
}
+
 
+
#fp-5th-img {
+
  Background: url("https://static.igem.org/mediawiki/2017/a/a5/T--Linkoping_Sweden--aggregation.jpg") no-repeat top fixed;
+
  background-size: cover;
+
  min-height: 400px;
+
}
+
 
+
#fp-6th-img {
+
  Background: url("https://static.igem.org/mediawiki/2017/6/67/T--Linkoping_Sweden--godisagar.jpg") no-repeat bottom fixed;
+
  background-size: cover;
+
  min-height: 500px;
+
}
+
 
+
 
+
/************************* frontpage text-content **************************/
+
 
+
.fp .flex-flipper-evoth {
+
  padding: 3% 5%;
+
  border-top: solid 1px #019966;
+
  border-bottom: solid 3px #019966;
+
  background: white;
+
  background: linear-gradient(to right, #B8DFD2, #edf7f4, #edf7f4, #f9f9f9);
+
 
+
}
+
 
+
@media all and (min-width: 768px) {
+
.fp .flex-flipper-evoth:nth-child(4n) {  /* ändrar färgen på varannan textspace på fp. endast platta + */
+
  background: linear-gradient(to left, #B8DFD2, #edf7f4, #f9f9f9);
+
}
+
}
+
 
+
.fp-img-content {  /* text på fp-bilderna */
+
  display: block;
+
  position: absolute;
+
  right:0;
+
  left:0;
+
 
+
  text-align: center;
+
  color: #1a1a1a;
+
}
+
 
+
.fp-img-button {
+
  display: inline-block;
+
  min-width: 20%;
+
  max-width: 40%;
+
  max-height: 80%;
+
  position: absolute;
+
  right: 10%;
+
  left: auto;
+
  top: 10%;
+
  padding: 2%;
+
 
+
 
+
  background-color: rgb( 200, 200, 200); /* ifall gammal browser*/
+
  border: 1px solid rgb( 200, 200, 200);
+
  background-color: rgba( 255, 255, 255 , 0.5);
+
  border: 2px solid rgba( 127, 219, 189 , 0);
+
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
+
  border-radius: 5px;
+
  transition: ease 0.2s;
+
 
+
  color: #000;
+
}
+
 
+
.fp-bg-img-div:nth-of-type(4n+3) .fp-img-button {
+
  right:auto;
+
  left: 10%;
+
}
+
+
.fp-img-button:hover {
+
  background-color: rgb( 155, 155, 155); /* ifall gammal browser  48, 180, 137 */
+
  border: 1px solid rgb( 155, 155, 155);
+
  background-color: rgba( 0,0,0 , 0.5);
+
  border: 2px solid rgba( 127, 219, 189 , 0);
+
  color: #fff;
+
}
+
 
+
 
+
 
+
/***********************************************************************
+
************************************************************************
+
************************************************************************
+
****************************** Footer **********************************
+
************************************************************************
+
************************************************************************
+
***********************************************************************/
+
 
+
.footer {
+
    background-color: #fff;
+
width: 100%;
+
align-items: stretch;
+
}
+
 
+
#foot_text {
+
border-top: 1px solid #019966;
+
background: #fff;
+
}
+
 
+
.sponsors, .old-teams {
+
display: table;
+
width: 100%;
+
}
+
 
+
.sponsors a, .old-teams a {
+
display: table-cell;
+
text-align: center;
+
width: 20%;
+
 
+
}
+
 
+
.sponsors img, .old-teams img {
+
width: 90%;
+
max-width: 250px;
+
max-height: 250px;
+
vertical-align: middle;
+
 
+
}
+
 
+
.bottom-footer {
+
display: flex;
+
background: #019966;
+
height: auto;
+
flex-flow: row wrap;
+
}
+
+
.liu {
+
height: auto;
+
order: 1;
+
margin: auto;
+
max-width: 100%;
+
 
+
}
+
 
+
.foot-1 {
+
 
+
color: white;
+
height: auto;
+
order: 2;
+
margin: auto;
+
}
+
 
+
.foot-2 {
+
 
+
color: white;
+
height: auto;
+
order: 3;
+
margin: auto;
+
}
+
 
+
.bottom-footer a {
+
font-size: 150%;
+
margin: auto;
+
}
+
 
+
.bottom-footer a:link {
+
color: white;
+
text-decoration: none;
+
}
+
 
+
.bottom-footer a:visited {
+
color: white;
+
text-decoration: none;
+
}
+
 
+
.bottom-footer a:hover {
+
color: white;
+
text-decoration: underline;
+
}
+
 
+
 
+
/***********************************************************************
+
************************************************************************
+
************************************************************************
+
*************** Headerkod mobile by Jonathan Bergqvist ** ***************
+
************************************************************************
+
************************************************************************
+
***********************************************************************/
+
 
+
/* What to show before click */
+
@media screen and (max-width: 1280px) { /* Size based on Google Nexus 7 (7") width in portrait mode */
+
/* Hide all of .dropdown */
+
.dropdown {display: none;}
+
+
/* Position icon */
+
.topnav .icon, .topnav topnav-scrolled responsive .icon {
+
position: relative; /* used fixed */
+
top: 5px;
+
right: 2%;
+
display: block;
+
color: black;
+
float: right;
+
height: 0.8em; /* To give the button a defined size */
+
width: 1em; /* To give the button a defined size */
+
        padding-top: 0.5em;
+
        padding-bottom: 0.15em;
+
}
+
+
} /* End @media */
+
 
+
/* Show the vertical menu on click */
+
@media screen and (max-width: 1280px) { /* Size based on Google Nexus 7 (7") width in portrait mode */
+
+
.topnav.responsive {
+
position: relative; /* Needs to be positoned relative to work! */
+
}
+
+
/* Define the area within topnav.responsive, that makes .topnav.responsive .mobile-view .icon position possible */
+
/* Defines the area for the content to be seen */
+
.topnav.responsive .mobile-menu {
+
top: 0%; /* KEEP ABOVE position: fixed;! To put the start on top of the page */
+
left: 0%;
+
right: 0%;
+
position: fixed; /* To position the mobile menu on top of page */
+
width: 100vw;
+
height: 100%; /* To cover all of the screen, together with overflow */
+
background: white;
+
background: linear-gradient(to bottom right, #B8DFD2, #edf7f4, #f9f9f9, #f9f9f9, #f9f9f9, #edf7f4, #B8DFD2);
+
overflow: auto;
+
z-index: 100;
+
}
+
+
/* Position the new threebar */
+
.topnav.responsive .icon {
+
position: fixed;
+
top: 2.7%;
+
right: 2%;
+
display: block;
+
color: black;
+
z-index: 10;
+
}
+
+
/* What happens to .dropdown in mobile, shown as a list */
+
.topnav.responsive .dropdown {
+
display: block;
+
width: 90%; /* Determine width of the .dropdown "boxes" */
+
border: none;
+
}
+
 
+
/* Make .dropdown-content be to seen together with .dropdown! */
+
.topnav.responsive .mobile-menu .dropdown .dropdown-content {
+
background: inherit;
+
display: block;
+
position: relative;
+
}
+
+
/* Make the dropdown-content have a bigger padding and text-align */
+
.topnav.responsive .mobile-menu .dropdown .dropdown-content a {
+
padding: 10px 0 10px 40px;
+
width: 90%;
+
font-weight: normal; /* To keep text normal */
+
}
+
+
/* Make .dropdown (titels/headers) have a bigger padding */
+
.topnav.responsive .mobile-menu .dropdown a {
+
text-align: left;
+
padding: 38px 0px 10px 0px; /* 20px + 18px for iGEM top bar */
+
font-weight: bold; /* Bold mobile button */
+
}
+
+
/* Make non-clickable .dropdown (titels/headers) have a bigger padding */
+
.topnav.responsive .mobile-menu .dropdown span {
+
text-align: left;
+
padding: 38px 0px 10px 0px;
+
font-weight: bold; /* Bold mobile dropdown button */
+
}
+
+
/* IMPORTANT! To position the mobile menu-content correctly below the LiU iGEM section */
+
.topnav.responsive .topnav-bottom-content {
+
display: block;
+
position: relative;
+
}
+
+
/* To "hide" the normal line between undertitles */
+
.topnav.responsive .dropdown .dropdown-content a {
+
border-bottom: none;
+
}
+
+
.dropdown .dropdown-content {
+
border: none;
+
    }
+
+
    .dropdown .dropdown-content a:first-child {
+
border: none;
+
    }
+
+
} /* End @media */
+
+
+
/* To position .dropdown on the bottom of .topnav */
+
.topnav-bottom-content {
+
position: absolute;
+
right: 0;
+
left: 0;
+
bottom: 0;
+
}
+
 
+
center {
+
height: 0;
+
}
+
 
+
/***********************************************************************
+
************************************************************************
+
************************************************************************
+
*************** End Headerkod by Jonathan Bergqvist ********************
+
************************************************************************
+
************************************************************************
+
***********************************************************************/
+
 
+
 
+
 
+
</style>
+
 
+
<head>
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
</head>
+
 
+
<body>
+
 
+
<div class="header-outfill">
+
</div>
+
<!---------------Logo and social media------------------------------->
+
<div class="logo-container">
+
<div class="liu_igem_logo">
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden">
+
<img alt="LiU iGEM" id="liu_igem_logo" src="https://static.igem.org/mediawiki/2017/c/c3/T--Linkoping_Sweden--Logo.jpg"/>
+
</a>
+
</div> <!--class="liu_igem_logo"-->
+
+
<div class="social-container">
+
<a href="https://twitter.com/liuigem" target="_blank" title="Follow us on Twitter!">
+
<img src="https://static.igem.org/mediawiki/2017/b/b9/T--Linkoping_Sweden--social_tweet_icon.png"/>
+
</a>
+
<a href="https://www.facebook.com/LiuIgem" target="_blank" title="Go give us a thumbs-up on Facebook!">
+
<img src="https://static.igem.org/mediawiki/2017/d/d8/T--Linkoping_Sweden--social_fb_icon.png"/>
+
</a>
+
<a href="https://www.instagram.com/liu_igem/" target="_blank" title="Follow us on Instagram!">
+
<img src="https://static.igem.org/mediawiki/2017/0/06/T--Linkoping_Sweden--social_insta_icon.png"/>
+
</a>
+
</div> <!--class="social-container"-->
+
</div> <!--class="logo-container"-->
+
 
+
<!------------------------------Navigation Bar----------------------------------------------------------->
+
<div class="topnav" id="myTopnav"> <!-- For the entire menu bar, with the borders -->
+
+
<div class="mobile-menu">
+
+
<center> <!-- Center the following dropdown-buttons -->
+
+
<div class="topnav-bottom-content">
+
+
<!-- Home! -->
+
<div class="dropdown">
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden">Home</a>
+
</div>
+
 
+
<!-- The Team! -->
+
<div class="dropdown">
+
<span>Team</span>
+
<div class="dropdown-content">
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Team">Team</a>
+
<!--  <a href="https://2017.igem.org/Team:Linkoping_Sweden/Collaborations">Collaborations</a> -->
+
</div>
+
</div>
+
+
<!-- The Project! -->
+
<div class="dropdown">
+
<span>Project</span>
+
<div class="dropdown-content">
+
<!--FEL LÄNKNAMN!!! <a href="https://2017.igem.org/Team:Linkoping_Sweden/Modeling">Model</a> -->
+
<!--INGEN STANDARDLÄNK <a href="https://2017.igem.org/Team:Linkoping_Sweden/Project">The Project</a> -->
+
<!--<a href="https://2017.igem.org/Team:Linkoping_Sweden/Protocols>Protocols</a>-->
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Description">Description</a>
+
<!-- <a href="https://2017.igem.org/Team:Linkoping_Sweden/Design">Design</a> -->
+
<!-- <a href="https://2017.igem.org/Team:Linkoping_Sweden/Experiments">Experiments</a> -->
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Notebook">Notebook</a>
+
<!-- <a href="https://2017.igem.org/Team:Linkoping_Sweden/Contribution">Contribution</a> -->
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Model">Model</a>
+
<!-- <a href="https://2017.igem.org/Team:Linkoping_Sweden/Results">Results</a> -->
+
<!-- <a href="https://2017.igem.org/Team:Linkoping_Sweden/Demonstrate">Demonstrate</a> -->
+
<!-- <a href="https://2017.igem.org/Team:Linkoping_Sweden/Improve">Improve</a> -->
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Attributions">Attributions</a>
+
+
</div>
+
</div>
+
+
<!-- Parts! -->
+
<div class="dropdown">
+
<span>Parts</span>
+
<div class="dropdown-content">
+
<!--<a href="https://2017.igem.org/Team:Linkoping_Sweden/construct">Constructs</a>-->
+
<!--CONSTRUCTS SHALL BE INCLUDED IN ANY OF THE FOLLOWING LINKS BELOW!-->
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Parts">Parts</a>
+
<!-- <a href="https://2017.igem.org/Team:Linkoping_Sweden/Basic_Part">Basic Parts</a> -->
+
<!-- <a href="https://2017.igem.org/Team:Linkoping_Sweden/Composite_Part">Composite Parts</a> -->
+
<!-- <a href="https://2017.igem.org/Team:Linkoping_Sweden/Part_Collection">Part Collection</a> -->
+
</div>
+
</div>
+
 
+
<!-- Safety!
+
<div class="dropdown">
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Safety">Safety</a>
+
</div> -->
+
+
<!-- Human Practices! -->
+
<div class="dropdown">
+
<span>Human Practices</span>
+
<div class="dropdown-content">
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Human_Practices">Overview</a>
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/HP/Silver">Silver HP</a>
+
<!-- <a href="https://2017.igem.org/Team:Linkoping_Sweden/HP/Gold_Integrated">Integrated and Gold</a> -->
+
<!-- <a href="https://2017.igem.org/Team:Linkoping_Sweden/HP/Engagement">Public Engagement</a> -->
+
</div>
+
</div>
+
+
<!-- Contact us! -->
+
<div class="dropdown">
+
<a href="#">Contact us</a>
+
</div>
+
+
<!-- JavaScript that is placed after all class="dropdown"! -->
+
<a href="javascript:void(0);" style="font-size:2em;" class="icon" onclick="menuButton()">&#9776;</a> <!-- font-size gives the size of the three bar -->
+
</center>
+
 
+
 
+
</div> <!-- <div class="mobile-menu" -->
+
</div> <!-- <div class="topnav" id="myTopnav"> -->
+
 
+
 
+
 
+
 
<div id="flex-wrapper">
 
<div id="flex-wrapper">
 
 
Line 1,083: Line 12:
 
<h1> Our Team </h1>
 
<h1> Our Team </h1>
 
<hr>
 
<hr>
<h2> History: </h2>
+
</br>
+
<br>
<p>
+
This year we are a group of 11 students participating in the project, all studying different aspects of biology, more precisely chemical biology, engineering biology and medical biology. Our project can you read about <a href="https://2017.igem.org/Team:Linkoping_Sweden/Description">here</a>.
LiU iGEM was founded in 2013 at Linköping University and has been active with different projects ever since. The projects between 2013 and 2015 focused on different biosensors for allergy, while the project for 2016 focused on the production of lipids in <i>Chlamydomonas reinhardtii</i>.
+
 
</p>
 
</p>
<p>
+
<br>
This year we are a group of 11 students participating in the group, all studying different aspects of biology. Our project can you read about <a href="#">here</a>.
+
 
</p>
+
</br>
+
<hr>
+
 
<h2> Members: </h2>
 
<h2> Members: </h2>
 
</article>
 
</article>
Line 1,209: Line 134:
 
<p class="text-big">  
 
<p class="text-big">  
 
<b> Education: </b> 3rd year of MSc in Engineering Biology </br>
 
<b> Education: </b> 3rd year of MSc in Engineering Biology </br>
<b> Works with: </b> Laboratory, wiki, modeling, human practices </br>
+
<b> Works with: </b> Laboratory, wiki, human practices </br>
 
<b> Why iGEM? </b> I wanted to see if my education has taught me anything useful.  
 
<b> Why iGEM? </b> I wanted to see if my education has taught me anything useful.  
 
</p>
 
</p>
Line 1,281: Line 206:
 
</article>
 
</article>
 
</div>
 
</div>
 +
<br>
 +
<hr>
 +
<h2> History: </h2>
 +
 +
<hr>
 +
<br>
 +
 +
<p>
 +
LiU iGEM was founded in 2013 at Linköping University and has been active with different projects ever since. The projects between 2013 and 2015 focused on different biosensors for allergy, while the project from 2016 focused on the production of lipids in <i>Chlamydomonas reinhardtii</i>.
 +
<br>
 +
 +
<br>
 +
 +
<div class="old-teams">
 +
<a href="https://2013.igem.org/Team:Linkoping_Sweden" title="Check out the 2013 team Wiki!"><img src="https://static.igem.org/mediawiki/2017/8/84/T--Linkoping_Sweden--LiU_logo2013.png"></img></a>
 +
<a href="https://2014.igem.org/Team:Linkoping_Sweden" title="Check out the 2014 team Wiki!"><img src="https://static.igem.org/mediawiki/2017/1/11/T--Linkoping_Sweden--LiU_logo2014.png"></img></a>
 +
<a href="https://2015.igem.org/Team:Linkoping_Sweden" title="Check out the 2015 team Wiki!"><img src="https://static.igem.org/mediawiki/2017/1/16/T--Linkoping_Sweden--LiU_logo2015.png"></img></a>
 +
<a href="https://2016.igem.org/Team:Linkoping_Sweden" title="Check out the 2016 team Wiki!"><img src="https://static.igem.org/mediawiki/2017/3/3b/T--Linkoping_Sweden--LiU_logo2016.png"></img></a>
 +
</div>
  
 
 
</div>
 
</div>
 
<aside class="aside aside-l"> </aside>
 
<aside class="aside aside-l"> </aside>
 
<aside class="aside aside-r"> </aside>
 
<aside class="aside aside-r"> </aside>
 
<footer class="footer">
 
 
<div id="foot_text">
 
<p style="text-align: center;">LiU iGEM is proudly sponsored by</p>
 
</div>
 
 
<div class="sponsors">
 
   
 
<a href="http://www.bioarctic.se/" title="Check out bioarctic, our awesome sponsor!" target="_blank" >
 
    <img src="https://static.igem.org/mediawiki/2017/8/80/T--Linkoping_Sweden--bioartic.png"/>
 
    </a>
 
   
 
  <a href="https://eu.idtdna.com/site" title="Check out IDT, our awesome sponsor!" target="_blank">
 
  <img src="https://static.igem.org/mediawiki/2017/b/b6/T--Linkoping_Sweden--idt.jpg"/>
 
  </a>
 
   
 
  <a href="https://www.eppendorf.com/NC-en/" title="Check out eppendorf, our awesome sponsor!" target="_blank">
 
  <img src="https://static.igem.org/mediawiki/2017/1/19/T--Linkoping_Sweden--eppendorf.jpg"/>
 
  </a>
 
 
  <a href="https://www.labteamet.com/" title="Check out labteamet, our awesome sponsor!" target="_blank">
 
  <img src="https://static.igem.org/mediawiki/2017/c/cf/T--Linkoping_Sweden--Labteamet.jpg"/>
 
  </a>
 
</div>
 
 
<div class="bottom-footer">
 
 
<div class="liu">
 
<a href="https://liu.se/en" target="_blank">
 
<img src="https://static.igem.org/mediawiki/2017/b/b3/T--Linkoping_Sweden--LiU_logo.png">
 
        </a>
 
</div>
 
 
 
<div class="foot-1">
 
    LiU iGEM
 
    <br>
 
    Kårallen, Linköpings Universitet
 
    <br>
 
    581 83 Linköping
 
    <br><br>
 
    <a href="mailto:igem.linkoping@gmail.com" target="_blank">igem.linkoping@gmail.com</a>
 
</div>
 
 
<div class="foot-2">
 
    <a href="https://liu.se/en/about-liu" target="_blank">About LiU</a>
 
    <br>
 
    <a href="https://liu.se/en/education" target="_blank">Study in Linköping</a>
 
    <br>
 
    <a href="https://liu.se/en/research" target="_blank">Research</a>
 
    <br><br>
 
    <a href="https://liu.se/en" target="_blank">www.liu.se</a>
 
</div>
 
</div>
 
</footer>
 
</div>
 
 
<!------------JAVASCRIPT FOR NAVIGATION BAR------------------------------>
 
<script>
 
 
/* Add or remove "responsive" when the button is clicked */
 
function menuButton() {
 
var x = document.getElementById("myTopnav");
 
 
if (x.className === "topnav") {
 
x.className += " responsive";
 
 
} else if (x.className === "topnav topnav-scrolled") {
 
x.className += " responsive";
 
 
} else {
 
x.classList.remove("responsive");
 
}
 
}
 
 
 
</script>
 
 
<script> <!-- script för sticky header! lägger till klassen header-scrolled till header när man skrollat mer än pre-header -->
 
var  tn = $(".topnav");
 
ofn = $(".header-outfill");
 
lc = $(".logo-container");
 
tns = "topnav-scrolled";
 
ofp = "header-outfill-plus";
 
lch = "logo-container-hidden";
 
hdr = $('.logo-container').height();
 
 
 
$(window).scroll(function() {
 
  if( $(this).scrollTop() > hdr - 1) {
 
tn.addClass(tns);
 
ofn.addClass(ofp);
 
lc.addClass(lch);
 
  } else {
 
tn.removeClass(tns);
 
ofn.removeClass(ofp);
 
lc.removeClass(lch);
 
  }
 
});
 
</script>
 
  
</body>
+
</body>
  
 
</html>
 
</html>
 +
{{Linkoping_Sweden/Footer}}

Revision as of 06:46, 4 August 2017

Our Team



This year we are a group of 11 students participating in the project, all studying different aspects of biology, more precisely chemical biology, engineering biology and medical biology. Our project can you read about here.


Members:

Our team

Max Lindberg

Max Lindberg

Education: 4th year of MSc in Protein Science
Responsible for: Project
Works with: Project leader
Why iGEM? Because synthetic biology is f*cking awesome! :D


Moa Nilsson

Moa Nilsson

Education: 3rd year of BSc in Medical Biology
Works with: Laboratory, sponsorship, human practices
Why iGEM? To increase my knowledge and competence within laboratory work and research in practice.


Jonatan Baggman

Jonatan Baggman

Education: 3rd year of MSc in Engineering Biology
Responsible for: Wiki
Works with: Laboratory, wiki
Why iGEM? To test my experiences from my education and to get a deeper view into the field of synthetic biology.


Johan Larsson

Johan Larsson

Education: 3rd year of BSc in Medical Biology
Responsible for: Laboratory
Works with: Laboratory, sponsorship, human practices
Why iGEM? It seemed like a fun way to spend my summer.


Jonathan Bergqvist

Jonathan Bergqvist

Education: 5th year of MSc in Chemical Biology
Works with: Wiki, modeling, human practices
Why iGEM? The project seemed interesting and I wanted to do something new.


Marie Peterson

Marie Peterson

Education: 3rd year of BSc in Chemical Biology
Works with: Laboratory, wiki, sponsorship and human practice
Why iGEM? The project seemed interesting and I wanted to meet new people.


Sophie Stridh Karppinen

Sophie Stridh Karppinen

Education: 3rd year of MSc in Engineering Biology
Works with: Laboratory, wiki, human practices
Why iGEM? I wanted to see if my education has taught me anything useful.


Oskar Reinhed Gustafsson

Oskar Reinhed Gustafsson

Education: 3rd year of BSc in Medical Biology
Works with: Laboratory, human practices
Why iGEM? Fun.


Lovisa Karlsson

Lovisa Karlsson

Education: 3rd year of BSc in Medical Biology
Responsible for: Human Practices
Works with: Laboratory, wiki and human practices
Why iGEM? To get more experience in laboratory work and get a more diverse education.


Henrik Karlsson

Henrik Karlsson

Education: 3rd year of MSc in Engineering Biology
Responsible for: Sponsorship
Works with: Laboratory, modeling, sponsorship
Why iGEM? The whole project seemed interesting and a good experience.


Jan Ybrahim

Jan Ybrahim

Education: 4th year of MSc in Engineering Biology
Responsible for: Modeling
Works with: Modeling, sponsorship
Why iGEM? To work with something relevant to my education during the summer.



History:



LiU iGEM was founded in 2013 at Linköping University and has been active with different projects ever since. The projects between 2013 and 2015 focused on different biosensors for allergy, while the project from 2016 focused on the production of lipids in Chlamydomonas reinhardtii.