Difference between revisions of "Template:Freiburg/Menubar"

Line 1: Line 1:
    <!--doctype html-->
+
<!--doctype html-->
    <html>
+
<html>
        <head>
+
    <head>
            <title>""</title>
+
        <title>""</title>
            <meta charset="utf-8">
+
        <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
            <style>
+
        <style>
    /* ============= BEGIN: Stylesheet for navigation menu ============= */
+
/* ============= BEGIN: Stylesheet for navigation menu ============= */
  
    /* ==== Begin General Settings ====*/
+
/* ==== Begin General Settings ====*/
    body {
+
body {
        margin: 0px;
+
    margin: 0px;
     }
+
}
 +
 
 +
#header {
 +
position: fixed;
 +
width: 100%;
 +
margin-top: 0px;
 +
     z-index: 600;
 +
}
 +
/* ==== End General Settings ==== */
 +
 
 +
@media screen and (min-width: 911px){
  
    #header {
+
#naviconwrapper {
     position: fixed;
+
     margin: 0px ;    /*auto centers wrapper*/
 +
    height: 60px;
 
     width: 100%;
 
     width: 100%;
     margin-top: 0px;
+
     min-width: 900px;
        z-index: 600;
+
    padding-top: 16px;
    }
+
    z-index: -100;
    /* ==== End General Settings ==== */
+
}
  
     @media screen and (min-width: 911px){
+
#naviconbar {
 +
    margin: 0px auto;
 +
    padding: 0px;
 +
    width: 100%;
 +
     min-width: 900px;
 +
    background-color: #0051A2;
 +
    border-top-color: #FFF;
 +
    border-top-width: 1px;
 +
    border-top-style: inset;
 +
    border-bottom-color: #FFF;
 +
    border-bottom-width: 1px;
 +
    border-bottom-style: outset;
 +
    z-index: -60;
 +
}
 +
   
  
    #naviconwrapper {
+
/* ==== Begin Settings Main Menu Icons ==== */
        margin: 0px ;    /*auto centers wrapper*/
+
#navicons {
        height: 60px;
+
    margin: 0px auto;
        width: 100%;
+
    padding: 0px;
        min-width: 900px;
+
    width: 720px;
        padding-top: 16px;
+
    height: 60px;
        z-index: -100;
+
    background-color: #0051A2;
    }
+
    z-index: -20;   /*defines color behind icons */
 +
}
  
    #naviconbar {
+
#navicons ul {
        margin: 0px auto;
+
    margin: 0px auto;
        padding: 0px;
+
    padding: 0px;
        width: 100%;
+
    width: 720px;
        min-width: 900px;
+
    position: relative; /*makes chip go directly behind home from left corner*/
        background-color: #0051A2;
+
}
        border-top-color: #FFF;
+
        border-top-width: 1px;
+
        border-top-style: inset;
+
        border-bottom-color: #FFF;
+
        border-bottom-width: 1px;
+
        border-bottom-style: outset;
+
        z-index: -60;
+
    }
+
       
+
  
    /* ==== Begin Settings Main Menu Icons ==== */
+
#navicons ul li {
    #navicons {
+
    margin: 0px;
        margin: 0px auto;
+
    padding: 0px;
        padding: 0px;
+
    list-style: none;
        width: 720px;
+
    /*display: block;*/
        height: 60px;
+
    float: left;
        background-color: #0051A2;
+
    position: relative;
        z-index: -20;   /*defines color behind icons */  
+
    line-height: 106px;
     }
+
    font-family: sans-serif;
 +
    font-size: 12px;
 +
    background-color: #FFF;
 +
    /*border: 1px solid #5781BD;*/
 +
     z-index: 100;
 +
}
  
    #navicons ul {
+
#navicons ul li a {
        margin: 0px auto;
+
    height: 60px;
        padding: 0px;
+
    width: 120px;
        width: 720px;
+
    display: block;
        position: relative; /*makes chip go directly behind home from left corner*/
+
    text-decoration: none;
     }
+
    /*color: #FFF;*/
 +
     text-align: center;
 +
    text-transform: uppercase;
 +
    z-index: 50;
 +
}
  
    #navicons ul li {
+
#navicons ul a:hover {  
        margin: 0px;
+
}   
        padding: 0px;
+
/* ==== End Settings Main Menu Icons ==== */
        list-style: none;
+
 
        /*display: block;*/
+
        float: left;
+
        position: relative;
+
        line-height: 106px;
+
        font-family: sans-serif;
+
        font-size: 12px;
+
        background-color: #FFF;
+
        /*border: 1px solid #5781BD;*/
+
        z-index: 100;
+
    }
+
  
    #navicons ul li a {
+
/* ==== classes for icons ==== */
        height: 60px;
+
#home {
        width: 120px;
+
    background: url(https://static.igem.org/mediawiki/2015/8/81/Freiburg_icon_home.png) no-repeat;  
        display: block;
+
    height: 60px;;
        text-decoration: none;
+
    background-position: center;
        /*color: #FFF;*/
+
}
        text-align: center;
+
        text-transform: uppercase;
+
        z-index: 50;
+
    }
+
  
    #navicons ul a:hover {  
+
#home a {
     }  
+
     color: #FFF;
    /* ==== End Settings Main Menu Icons ==== */
+
}
     
+
  
    /* ==== classes for icons ==== */
+
#project {
    #home {
+
    background: url(https://static.igem.org/mediawiki/2015/6/67/Freiburg_icon_project.png) no-repeat;  
        background: url(https://static.igem.org/mediawiki/2015/8/81/Freiburg_icon_home.png) no-repeat;  
+
    height: 60px;
        height: 60px;;
+
    background-position: center;
        background-position: center;
+
}
    }
+
  
    #home a {
+
#project a {
        color: #FFF;
+
    color: #FFF;
    }
+
}
  
    #project {
+
#team {
        background: url(https://static.igem.org/mediawiki/2015/6/67/Freiburg_icon_project.png) no-repeat;  
+
    background: url(https://static.igem.org/mediawiki/2015/3/38/Freiburg_icon_team.png) no-repeat;  
        height: 60px;
+
    height: 60px;
        background-position: center;
+
    background-position: center;
    }
+
}
  
    #project a {
+
#team a {
        color: #FFF;
+
    color: #FFF;
    }
+
}
  
    #team {
+
#results {
        background: url(https://static.igem.org/mediawiki/2015/3/38/Freiburg_icon_team.png) no-repeat;  
+
    background: url(https://static.igem.org/mediawiki/2015/2/2d/Freiburg_icon_results.png) no-repeat;  
        height: 60px;
+
    height: 60px;
        background-position: center;
+
    background-position: center;
    }
+
}
  
    #team a {
+
#results a {
        color: #FFF;
+
    color: #FFF;
    }
+
}
  
    #results {
+
#policy {
        background: url(https://static.igem.org/mediawiki/2015/2/2d/Freiburg_icon_results.png) no-repeat;  
+
    background: url(https://static.igem.org/mediawiki/2015/3/3c/Freiburg_icon_policy.png) no-repeat;
        height: 60px;
+
    height: 60px;
        background-position: center;
+
    background-position: center;
    }
+
}
  
    #results a {
+
#policy a {
        color: #FFF;
+
    color: #FFF;
    }
+
}
  
    #policy {
+
#notebook {
        background: url(https://static.igem.org/mediawiki/2015/3/3c/Freiburg_icon_policy.png) no-repeat;
+
    background: url(https://static.igem.org/mediawiki/2015/e/e6/Freiburg_icon_notebook.png) no-repeat;  
        height: 60px;
+
    height: 60px;
        background-position: center;
+
    background-position: center;
    }
+
}
  
    #policy a {
+
#notebook a {
        color: #FFF;
+
    color: #FFF;
    }
+
}
 +
/* ==== End classes for icons ==== */
  
    #notebook {
+
/* ==== Begin running chip ==== */
        background: url(https://static.igem.org/mediawiki/2015/e/e6/Freiburg_icon_notebook.png) no-repeat;  
+
/* == Begin Chip Design == */
        height: 60px;
+
#runningchip {
        background-position: center;
+
    position: absolute;
     }
+
    width: 90px;
 +
    height: 60px;
 +
    top: -15px;
 +
    left: 2.1%;
 +
     -webkit-transition: all 300ms ease-out;
 +
    -moz-transition: all 300ms ease-out;
 +
    transition: all 300ms ease-out;
 +
    z-index: 0;
 +
}
  
    #notebook a {
+
#runningchip-back{
        color: #FFF;
+
  width:100%;
    }
+
  height: 85px;
    /* ==== End classes for icons ==== */
+
  position: absolute;
 +
  background:#C5162F;
 +
  border-radius:5px;
 +
  border-bottom: 2px solid rgba(0, 0, 0, 0.09);
 +
  border-top: 2px solid rgba(255,255,255,0.1);
 +
  border-color: #0051A2;
 +
}  
  
    /* ==== Begin running chip ==== */
+
#top-arrow{  /* arrow like element above slider  */
    /* == Begin Chip Design == */
+
  position:absolute;
    #runningchip {
+
  overflow:hidden;
        position: absolute;
+
    color: #C5162F;
        width: 90px;
+
  width:100%;
        height: 60px;
+
  height:14px;
        top: -15px;
+
  top: 2px;
        left: 2.1%;
+
  left:0;
        -webkit-transition: all 300ms ease-out;
+
  z-index:2;
        -moz-transition: all 300ms ease-out;
+
    background-color: #C5162F;
        transition: all 300ms ease-out;
+
    border-top-right-radius: 5px;
        z-index: 0;
+
    border-top-left-radius: 5px;
    }
+
}  
  
    #runningchip-back{
+
#top-arrow:before{  
      width:100%;
+
  content:"";
      height: 85px;
+
  position:absolute;
      position: absolute;
+
  width:80%;
      background:#C5162F;
+
  height:10px;
      border-radius:5px;
+
  top:-12px;
      border-bottom: 2px solid rgba(0, 0, 0, 0.09);
+
  left:10%;
      border-top: 2px solid rgba(255,255,255,0.1);
+
  border-radius:20%;
      border-color: #0051A2;
+
  box-shadow:0 0 10px black;
    }  
+
}
  
    #top-arrow{ /* arrow like element above slider  */
+
#top-arrow:after{   /* little blue arrow */
      position:absolute;
+
  content:"";
      overflow:hidden;
+
  position:absolute;
        color: #C5162F;
+
  width:0;
      width:100%;
+
  height:0px;
      height:14px;
+
  top:0px;
      top: 2px;
+
  border-top:8px solid #C5162F;
      left:0;
+
  border-left:6px solid transparent;
      z-index:2;
+
  border-right:6px solid transparent;
        background-color: #C5162F;
+
  margin-left:-6px;
        border-top-right-radius: 5px;
+
  left:50%;
        border-top-left-radius: 5px;
+
}
    }  
+
  
    #top-arrow:before{  
+
#bottom-arrow{       /* arrow like element beneath slider */
      content:"";
+
  position:absolute;
      position:absolute;
+
  overflow:hidden;
      width:80%;
+
  width:100%;
      height:10px;
+
  height:15px;
      top:-12px;
+
  bottom: -30px;
      left:10%;
+
  left:0;
      border-radius:20%;
+
  z-index:2;
      box-shadow:0 0 10px black;
+
    background-color: #C5162F;
    }
+
    border-bottom-right-radius: 5px;
 +
    border-bottom-left-radius: 5px;
 +
}
  
    #top-arrow:after{   /* little blue arrow */
+
#bottom-arrow:before{
      content:"";
+
  content:"";
      position:absolute;
+
  position:absolute;
      width:0;
+
  width:80%;
      height:0px;
+
  height:10px;
      top:0px;
+
  bottom:-12px;
      border-top:8px solid #C5162F;
+
  left:10%;
      border-left:6px solid transparent;
+
  border-radius:20%;
      border-right:6px solid transparent;
+
  box-shadow:0 0 10px black;
      margin-left:-6px;
+
}
      left:50%;
+
    }
+
  
    #bottom-arrow{       /* arrow like element beneath slider */
+
#bottom-arrow:after{
      position:absolute;
+
  content:"";
      overflow:hidden;
+
  position:absolute;
      width:100%;
+
  width:0;
      height:15px;
+
  height:0;
      bottom: -30px;
+
  bottom:0;
      left:0;
+
  border-bottom:12px solid #C5162F;
      z-index:2;
+
  border-left:8px solid transparent;
        background-color: #C5162F;
+
  border-right:8px solid transparent;
        border-bottom-right-radius: 5px;
+
  margin-left:-8px;
        border-bottom-left-radius: 5px;
+
  left:50%;
    }
+
}
 +
/* == End Chip Design == */
  
    #bottom-arrow:before{
 
      content:"";
 
      position:absolute;
 
      width:80%;
 
      height:10px;
 
      bottom:-12px;
 
      left:10%;
 
      border-radius:20%;
 
      box-shadow:0 0 10px black;
 
    }
 
  
    #bottom-arrow:after{
+
/* == Begin Chip Movement == */
      content:"";
+
#home:hover ~ #runningchip {
      position:absolute;
+
    left: 2.1%;
      width:0;
+
}
      height:0;
+
      bottom:0;
+
      border-bottom:12px solid #C5162F;
+
      border-left:8px solid transparent;
+
      border-right:8px solid transparent;
+
      margin-left:-8px;
+
      left:50%;
+
    }
+
    /* == End Chip Design == */
+
  
 +
#project:hover ~ #runningchip {
 +
    left: 18.6%;
 +
}
  
    /* == Begin Chip Movement == */
+
#team:hover ~ #runningchip {
    #home:hover ~ #runningchip {
+
    left: 35.5%;
        left: 2.1%;
+
}
    }
+
  
    #project:hover ~ #runningchip {
+
#results:hover ~ #runningchip {
        left: 18.6%;
+
    left: 52%;
    }
+
}
  
    #team:hover ~ #runningchip {
+
#policy:hover ~ #runningchip {
        left: 35.5%;
+
    left: 68.9%;
    }
+
}
  
    #results:hover ~ #runningchip {
+
#notebook:hover ~ #runningchip {
        left: 52%;
+
    left: 85.5%;
    }
+
}
 +
/* == End Chip Movment == */
 +
/* ==== End running chip ==== */
  
    #policy:hover ~ #runningchip {
 
        left: 68.9%;
 
    }
 
  
    #notebook:hover ~ #runningchip {
+
/* ==== Begin Settings Submenu Level 1 ==== */
        left: 85.5%;
+
#navtextwrapper {               /*define background box*/
     }
+
    margin: 0 auto;
     /* == End Chip Movment == */
+
     padding: 0px;
     /* ==== End running chip ==== */
+
     top: -2px;
 +
    height: 24px;
 +
    width: 920px;
 +
    position: relative;
 +
     /*border: 2px solid #000;*/
 +
}
  
 +
#navtext {
 +
    text-align: center;
 +
    font-family: Roboto,sans-serif;
 +
    font-size: 16px;
 +
    z-index: 600;
 +
}
  
    /* ==== Begin Settings Submenu Level 1 ==== */
+
#navtext ul {
    #navtextwrapper {               /*define background box*/
+
    margin: 0px auto;
        margin: 0 auto;
+
    top: -8px;
        padding: 0px;
+
    padding: 0px;
        top: -2px;
+
    position: absolute;
        height: 24px;
+
    z-index: 600;
        width: 920px;
+
}
        position: relative;
+
        /*border: 2px solid #000;*/
+
    }
+
  
    #navtext {
+
#navtext li {
        text-align: center;
+
    margin: 0px auto;        /*centers text*/
        font-family: Roboto,sans-serif;
+
    list-style: none;
        font-size: 16px;
+
    display: block;       /*makes items go horizontal and centers them*/
        z-index: 600;
+
    /*float: left;*/                /*makes items go horizontal*/
    }
+
    position: relative;
 +
    z-index: 600;
 +
}  
  
    #navtext ul {
+
#navtext ul li a {
        margin: 0px auto;
+
    margin-top: 2px;
        top: -8px;
+
    height: 24px;
        padding: 0px;
+
    padding-left: 10px;
        position: absolute;
+
    padding-right: 10px;
        z-index: 600;
+
    text-decoration: none;
    }
+
    color: #FFF;
 +
    display: block;
 +
    text-align: center;
 +
    border-radius: 8px;
 +
    z-index: 600;
 +
}
  
    #navtext li {
+
#navtext ul li:hover > a {
        margin: 0px auto;        /*centers text*/
+
  /* background-color: #6696c7; /*makes a link stay in a certain color when hovering over it and then looking throught its subitems */
        list-style: none;
+
    color: #ecdc18;
        display: block;        /*makes items go horizontal and centers them*/
+
}
        /*float: left;*/                /*makes items go horizontal*/
+
        position: relative;
+
        z-index: 600;
+
    }  
+
  
    #navtext ul li a {
+
#project-sub {
        margin-top: 2px;
+
    display: none;
        height: 24px;
+
    left: 22.6%;
        padding-left: 10px;
+
}
        padding-right: 10px;
+
        text-decoration: none;
+
        color: #FFF;
+
        display: block;
+
        text-align: center;
+
        border-radius: 8px;
+
        z-index: 600;
+
    }
+
  
    #navtext ul li:hover > a {
+
#team-sub {
      /* background-color: #6696c7; /*makes a link stay in a certain color when hovering over it and then looking throught its subitems */
+
    /*background-color: #ac34fe;*/
        color: #ecdc18;
+
    display: none;
     }
+
     left: 35.2%;
 +
}
  
    #project-sub {
+
#results-sub{
        display: none;
+
    display: none;
        left: 22.6%;
+
    left: 49.4%;
    }
+
}
  
    #team-sub {
+
#policy-sub{
        /*background-color: #ac34fe;*/
+
    display: none;
        display: none;
+
    left: 62.8%;
        left: 35.2%;
+
}
    }
+
  
    #results-sub{
+
#notebook-sub{
        display: none;
+
    display: none;
        left: 49.4%;
+
    left: 76%;
     }
+
     width: 120px;
 +
}
  
    #policy-sub{
+
.chip_gap {
        display: none;
+
    content: none;
        left: 62.8%;
+
}
    }
+
  
     #notebook-sub{
+
.navsub1 {
        display: none;
+
     background-color: #1962AB;
        left: 76%;
+
opacity: 1;
        width: 120px;
+
    }
+
/* ==== End Settings Submenu Level 1 ==== */
  
    .chip_gap {
 
        content: none;
 
    }
 
  
    .navsub1 {
+
/* ==== Begin Settings Submenu Level 2 ==== */
        background-color: #1962AB;
+
#navtext ul ul {
     opacity: 1;
+
    position: absolute;
    
+
     width: 130%;
     /* ==== End Settings Submenu Level 1 ==== */
+
     display: none;
 +
     left: 100%;              /* subsubmenu always touches its parent element jb */
 +
    top: -2px;
 +
}
  
 +
#navtext ul  ul li {
 +
    margin: 0px auto;        /*centers text*/
 +
    list-style: none;
 +
    /*display: block; */      /*makes items go horizontal and centers them*/
 +
    /*float: left;*/              /*makes items go horizontal*/
 +
    position: relative;
 +
}   
  
    /* ==== Begin Settings Submenu Level 2 ==== */
+
#navtext ul ul li a {
    #navtext ul ul {
+
    height: 24px;
        position: absolute;
+
    padding-left: 10px;
        width: 130%;
+
    padding-right: 10px;
        display: none;
+
    text-decoration: none;
        left: 100%;               /* subsubmenu always touches its parent element jb */
+
    color: #FFF;
        top: -2px;  
+
    /*display: block;*/
    }
+
    text-align: center;
 +
}
  
    #navtext ul ul li {
+
#navtext ul li:hover ul {
        margin: 0px auto;        /*centers text*/
+
    display: block;
        list-style: none;
+
}
        /*display: block; */      /*makes items go horizontal and centers them*/
+
        /*float: left;*/              /*makes items go horizontal*/
+
        position: relative;
+
    }  
+
  
    #navtext ul  ul li a {
+
.navsub2 {
        height: 24px;
+
    background-color: #1962AB;
        padding-left: 10px;
+
    opacity: 1;
        padding-right: 10px;
+
}
        text-decoration: none;
+
        color: #FFF;
+
        /*display: block;*/
+
        text-align: center;
+
    }
+
  
     #navtext ul li:hover ul {
+
.navsub2before {
        display: block;
+
     background-color: #1962AB;
     }
+
    border-top-right-radius: 8px;
 +
     opacity: 0.6;
 +
}
  
    .navsub2 {
+
.navsub2after {
        background-color: #1962AB;
+
    background-color: #0051A2;
        opacity: 1;
+
    border-bottom-right-radius: 8px;
     }
+
     border-bottom-left-radius: 8px;
 +
    opacity: 0.6;
 +
}
  
    .navsub2before {
+
.subsubmenu{
        background-color: #1962AB;
+
background-image: url("https://static.igem.org/mediawiki/2015/f/ff/Freiburg_submenu_arrow.png");
        border-top-right-radius: 8px;
+
background-repeat: no-repeat;
        opacity: 0.6;
+
background-position: 95% 50%;
    }
+
background-size: 10px 13px;
 +
}
  
    .navsub2after {
+
/* ==== End Settings Submenu Level 2 ==== */
        background-color: #0051A2;
+
        border-bottom-right-radius: 8px;
+
        border-bottom-left-radius: 8px;
+
        opacity: 0.6;
+
    }
+
  
    .subsubmenu{
+
#smallnav{
     background-image: url("https://static.igem.org/mediawiki/2015/f/ff/Freiburg_submenu_arrow.png");
+
     display: none;
    background-repeat: no-repeat;
+
}
    background-position: 95% 50%;
+
    background-size: 10px 13px;
+
    }
+
  
    /* ==== End Settings Submenu Level 2 ==== */
+
} /* end media query*/
  
     #smallnav{
+
@media screen and (max-width: 910px){
         display: none;
+
     #header{
 +
         top: -9000px;
 +
        opacity: 0;
 
     }
 
     }
 +
}
  
    } /* end media query*/
+
/* Styles for smallnav */
  
    @media screen and (max-width: 910px){
+
/* Clearfix */
        #header{
+
.clearfix:before,
            top: -9000px;
+
.clearfix:after {
            opacity: 0;
+
    content: " ";
        }
+
    display: table;
 +
}
 +
.clearfix:after {
 +
    clear: both;
 +
}
 +
.clearfix {
 +
    *zoom: 1;
 +
}
  
        /* avoid space to content box */
 
        .content_background_wrapper{
 
            padding-top: 20px;
 
        }
 
  
    }
+
/* Basic Styles */
  
    /* Styles for smallnav */
+
/* avoid space to content box */
 
+
/*.content_background_wrapper{
    /* Clearfix */
+
     padding-top: 20px;
    .clearfix:before,
+
}*/
    .clearfix:after {
+
        content: " ";
+
        display: table;
+
     }
+
    .clearfix:after {
+
        clear: both;
+
    }
+
    .clearfix {
+
        *zoom: 1;
+
    }
+
  
 +
#smallnav {
 +
    height: 40px;
 +
    width: 100%;
 +
    background: #0051A2;
 +
    font-size: 11pt;
 +
    font-family: 'PT Sans', Arial, sans-serif;
 +
    font-weight: bold;
 +
    position: fixed;
 +
    border-bottom: 2px solid #CFCFCF;
 +
    z-index: 3000;
 +
    opacity: 0.9;
 +
}
 +
#smallnav ul {
 +
    padding: 0;
 +
    margin: 0 auto;
 +
    width: 720px;
 +
    height: 40px;
 +
}
 +
#smallnav li {
 +
    display: inline;
 +
    float: left;
 +
}
 +
#smallnav a {
 +
    color: #fff;
 +
    display: inline-block;
 +
    width: 120px;
 +
    text-align: center;
 +
    text-decoration: none;
 +
    line-height: 40px;
 +
}
 +
#smallnav li a {
 +
    box-sizing:border-box;
 +
    -moz-box-sizing:border-box;
 +
    -webkit-box-sizing:border-box;
 +
}
 +
#smallnav li:last-child a {
 +
    border-right: 0;
 +
}
 +
#smallnav a:hover, #smallnav a:active {
 +
    background-color: #1D629F;
 +
}
 +
#smallnav a#pull {
 +
    display: none;
 +
}
  
    /* Basic Styles */
+
/*Styles for screen 600px and lower*/
 
+
@media screen and (max-width: 720px) {
     #smallnav {
+
     #smallnav {  
         height: 40px;
+
         height: auto;
        width: 100%;
+
         background: #3B7EBF;
         background: #0051A2;
+
        font-size: 11pt;
+
        font-family: 'PT Sans', Arial, sans-serif;
+
        font-weight: bold;
+
        position: fixed;
+
        border-bottom: 2px solid #CFCFCF;
+
        z-index: 3000;
+
        opacity: 0.9;
+
 
     }
 
     }
 
     #smallnav ul {
 
     #smallnav ul {
         padding: 0;
+
         width: 100%;
         margin: 0 auto;
+
         display: block;
        width: 720px;
+
         height: auto;
         height: 40px;
+
 
     }
 
     }
 
     #smallnav li {
 
     #smallnav li {
         display: inline;
+
         width: 50%;
 
         float: left;
 
         float: left;
 +
        position: relative;
 +
        margin-bottom: 0;
 
     }
 
     }
 +
 
     #smallnav a {
 
     #smallnav a {
        color: #fff;
+
         text-align: left;
        display: inline-block;
+
         width: 100%;
        width: 120px;
+
         text-indent: 25px;
         text-align: center;
+
         text-decoration: none;
+
         line-height: 40px;
+
 
     }
 
     }
     #smallnav li a {
+
 
         box-sizing:border-box;
+
     #smallnav {
        -moz-box-sizing:border-box;
+
         border-bottom: 0;
        -webkit-box-sizing:border-box;
+
 
     }
 
     }
     #smallnav li:last-child a {
+
     #smallnav ul {
         border-right: 0;
+
         display: none;
    }
+
         height: auto;
    #smallnav a:hover, #smallnav a:active {
+
         background-color: #1D629F;
+
 
     }
 
     }
 
     #smallnav a#pull {
 
     #smallnav a#pull {
         display: none;
+
         display: block;
 +
        background-color: #0051A2;
 +
        width: 100%;
 +
        position: relative;
 +
    }
 +
    #smallnav a#pull:after {
 +
        content:"";
 +
        background: url('https://static.igem.org/mediawiki/2015/e/e0/Freiburg_menu_button_white.png') no-repeat;
 +
        background-size: auto 90%;
 +
        width: 30px;
 +
        height: 30px;
 +
        display: inline-block;
 +
        position: absolute;
 +
        right: 15px;
 +
        top: 5px;
 
     }
 
     }
  
    /*Styles for screen 600px and lower*/
 
    @media screen and (max-width: 720px) {
 
        #smallnav {
 
            height: auto;
 
            background: #3B7EBF;
 
        }
 
        #smallnav ul {
 
            width: 100%;
 
            display: block;
 
            height: auto;
 
        }
 
        #smallnav li {
 
            width: 50%;
 
            float: left;
 
            position: relative;
 
            margin-bottom: 0;
 
        }
 
  
        #smallnav a {
+
/* ==== classes for icons ==== */
            text-align: left;
+
#home_small {
            width: 100%;
+
    background-color: #3673AF;
            text-indent: 25px;
+
        }
+
  
        #smallnav {
+
}
            border-bottom: 0;
+
        }
+
        #smallnav ul {
+
            display: none;
+
            height: auto;
+
        }
+
        #smallnav a#pull {
+
            display: block;
+
            background-color: #0051A2;
+
            width: 100%;
+
            position: relative;
+
        }
+
        #smallnav a#pull:after {
+
            content:"";
+
            background: url('https://static.igem.org/mediawiki/2015/e/e0/Freiburg_menu_button_white.png') no-repeat;
+
            background-size: auto 90%;
+
            width: 30px;
+
            height: 30px;
+
            display: inline-block;
+
            position: absolute;
+
            right: 15px;
+
            top: 5px;
+
        }
+
  
 +
#home_small a {
 +
    background: url(https://static.igem.org/mediawiki/2015/1/15/Freiburg_icon_home_white_03.png) no-repeat;
 +
    background-position: left;
 +
    background-size: auto 100%;
 +
    background-repeat: no-repeat;
 +
    padding-left: 40px;
 +
    color: #FFF;
 +
}
  
    /* ==== classes for icons ==== */
+
#project_small {
    #home_small {
+
    background-color: #3673AF;
        background-color: #3673AF;
+
  
    }
+
}
  
    #home_small a {
+
#project_small a {
        background: url(https://static.igem.org/mediawiki/2015/1/15/Freiburg_icon_home_white_03.png) no-repeat;  
+
    background: url(https://static.igem.org/mediawiki/2015/7/76/Freiburg_icon_project_white_03.png) no-repeat;  
        background-position: left;
+
    background-position: left;
        background-size: auto 100%;
+
    background-size: auto 90%;
        background-repeat: no-repeat;
+
    background-repeat: no-repeat;
        padding-left: 40px;
+
    padding-left: 40px;
        color: #FFF;
+
    color: #FFF;
    }
+
}
  
    #project_small {
+
#team_small {
        background-color: #3673AF;
+
    background-color: #3673AF;
  
    }
+
}
  
    #project_small a {
+
#team_small a {
        background: url(https://static.igem.org/mediawiki/2015/7/76/Freiburg_icon_project_white_03.png) no-repeat;  
+
    background: url(https://static.igem.org/mediawiki/2015/4/42/Freiburg_icon_team_white_03.png) no-repeat;  
        background-position: left;
+
    background-position: left;
        background-size: auto 90%;
+
    background-size: auto 90%;
        background-repeat: no-repeat;
+
    background-repeat: no-repeat;
        padding-left: 40px;
+
    padding-left: 40px;
        color: #FFF;
+
    color: #FFF;
    }
+
}
  
    #team_small {
+
#results_small {
        background-color: #3673AF;
+
    background-color: #3673AF;
  
    }
+
}
  
    #team_small a {
+
#results_small a {
        background: url(https://static.igem.org/mediawiki/2015/4/42/Freiburg_icon_team_white_03.png) no-repeat;  
+
    background: url(https://static.igem.org/mediawiki/2015/1/1e/Freiburg_icon_results_white_03.png) no-repeat;  
        background-position: left;
+
    background-position: left;
        background-size: auto 90%;
+
    background-size: auto 90%;
        background-repeat: no-repeat;
+
    background-repeat: no-repeat;
        padding-left: 40px;
+
    padding-left: 40px;
        color: #FFF;
+
    color: #FFF;
    }
+
}
  
    #results_small {
+
#policy_small {
        background-color: #3673AF;
+
    background-color: #3673AF;
 +
}
  
     }
+
#policy_small a {
 +
     color: #FFF;
 +
    padding-left: 40px;
 +
    background-image: url(https://static.igem.org/mediawiki/2015/f/f9/Freiburg_icon_policy_white_03.png);
 +
    background-position: left;
 +
    background-size: auto 90%;
 +
    background-repeat: no-repeat;
 +
}
  
    #results_small a {
+
#notebook_small {
        background: url(https://static.igem.org/mediawiki/2015/1/1e/Freiburg_icon_results_white_03.png) no-repeat;
+
    background-color: #3673AF;
        background-position: left;
+
}
        background-size: auto 90%;
+
        background-repeat: no-repeat;
+
        padding-left: 40px;
+
        color: #FFF;
+
    }
+
  
    #policy_small {
+
#notebook_small a {
        background-color: #3673AF;
+
    background: url(https://static.igem.org/mediawiki/2015/9/99/Freibur_icon_notebook_white_03.png) no-repeat;
    }
+
    background-position: left;
 +
    background-size: auto 90%;
 +
    background-repeat: no-repeat;
 +
    padding-left: 40px;
 +
    color: #FFF;
 +
}
 +
/* ==== End classes for icons ==== */
  
    #policy_small a {
 
        color: #FFF;
 
        padding-left: 40px;
 
        background-image: url(https://static.igem.org/mediawiki/2015/f/f9/Freiburg_icon_policy_white_03.png);
 
        background-position: left;
 
        background-size: auto 90%;
 
        background-repeat: no-repeat;
 
    }
 
  
    #notebook_small {
+
}/* end media query
        background-color: #3673AF;
+
    }
+
  
    #notebook_small a {
+
/*Smartphone*/
        background: url(https://static.igem.org/mediawiki/2015/9/99/Freibur_icon_notebook_white_03.png) no-repeat;
+
@media only screen and (max-width : 320px) {
        background-position: left;
+
    #smallnav li {
        background-size: auto 90%;
+
         display: block;
         background-repeat: no-repeat;
+
         float: none;
         padding-left: 40px;
+
         width: 100%;
         color: #FFF;
+
 
     }
 
     }
    /* ==== End classes for icons ==== */
+
}
  
  
    }/* end media query
+
</style>
  
    /*Smartphone*/
 
    @media only screen and (max-width : 320px) {
 
        #smallnav li {
 
            display: block;
 
            float: none;
 
            width: 100%;
 
        }
 
    }
 
  
 +
<!-- BEGIN: jQuery -->
  
    </style>
 
  
 +
<script>
 +
// FOR SMALLNAV
 +
    $(function() {
 +
        var pull        = $('#pull');
 +
            menu        = $('#smallnav ul');
 +
            menuHeight  = menu.height();
  
    <!-- BEGIN: jQuery -->
+
        $(pull).on('click', function(e) {
 +
            e.preventDefault();
 +
            menu.slideToggle();
 +
        });
  
 +
        $(window).resize(function(){
 +
            var w = $(window).width();
 +
            if(w > 320) {
 +
                if (menu.is(':hidden')) {
 +
                menu.removeAttr('style');
 +
                }
 +
            }
 +
        });
 +
    });
 +
</script>
  
    <script>
+
<script type="text/javascript">
    // FOR SMALLNAV
+
         $(document).ready(function(){
         $(function() {
+
// make submenus appear //
             var pull        = $('#pull');
+
             $("#home").hover(function(){
                 menu        = $('#smallnav ul');
+
                 $("#team-sub") .hide();
                 menuHeight  = menu.height();
+
                 $("#project-sub") .hide();
 
+
                $("#results-sub") .hide();
            $(pull).on('click', function(e) {
+
                 $("#policy-sub") .hide();
                 e.preventDefault();
+
                 $("#notebook-sub") .hide();
                 menu.slideToggle();
+
 
             });
 
             });
 
+
            $("#project").hover(function(){
             $(window).resize(function(){
+
                $("#project-sub") .show();
                 var w = $(window).width();
+
                $("#team-sub") .hide();
                 if(w > 320) {
+
                $("#results-sub") .hide();
                    if (menu.is(':hidden')) {
+
                $("#policy-sub") .hide();
                    menu.removeAttr('style');
+
                $("#notebook-sub") .hide();
                    }
+
             },
                 }
+
                                    function(){
 +
                $("#project-sub") .hide();
 +
            });
 +
           
 +
            $("#team").hover(function(){
 +
                 $("#team-sub") .show();
 +
                 $("#project-sub") .hide();
 +
                $("#results-sub") .hide();
 +
                $("#policy-sub") .hide();
 +
                $("#notebook-sub") .hide();
 +
            },
 +
                                    function(){
 +
                $("#team-sub") .hide();
 +
            });
 +
           
 +
            $("#results").hover(function(){
 +
                $("#results-sub") .show();
 +
                $("#project-sub") .hide();
 +
                $("#team-sub") .hide();
 +
                $("#policy-sub") .hide();
 +
                $("#notebook-sub") .hide();
 +
            });
 +
           
 +
            $("#policy").hover(function(){
 +
                $("#policy-sub") .show();
 +
                $("#project-sub") .hide();
 +
                $("#team-sub") .hide();
 +
                $("#results-sub") .hide();
 +
                $("#notebook-sub") .hide();
 +
            },
 +
                                    function(){
 +
                $("#policy-sub") .hide();
 +
            });
 +
           
 +
            $("#notebook").hover(function(){
 +
                $("#notebook-sub") .show();
 +
                $("#project-sub") .hide();
 +
                $("#team-sub") .hide();
 +
                $("#results-sub") .hide();
 +
                $("#policy-sub") .hide();
 +
            },
 +
                                    function(){
 +
                $("#notebook-sub") .hide();
 +
            });
 +
// make chip stay over main menu point when its submenu appears and makes the submenu stay visible//
 +
            $("#project-sub") .hover(function(){
 +
                $("#runningchip") .css('left','18.6%');
 +
                $("#project-sub") .show();
 +
            },
 +
                                    function(){
 +
                $("#runningchip") .css('left','');
 +
                $("#project-sub") .hide();
 +
            });
 +
            $("#team-sub") .hover(function(){
 +
                 $("#runningchip") .css('left','35.5%');
 +
                $("#team-sub") .show();
 +
            },
 +
                                    function(){
 +
                $("#runningchip") .css('left','');
 +
                $("#team-sub") .hide();
 +
            });
 +
            $("#results-sub") .hover(function(){
 +
                $("#runningchip") .css('left','52%');
 +
                $("#results-sub") .show();
 +
            },
 +
                                    function(){
 +
                $("#runningchip") .css('left','');
 +
                $("#results-sub") .hide();
 +
            });
 +
            $("#policy-sub") .hover(function(){
 +
                $("#runningchip") .css('left','68.9%');
 +
                $("#policy-sub") .show();
 +
            },
 +
                                    function(){
 +
                $("#runningchip") .css('left','');
 +
                $("#policy-sub") .hide();
 +
            });
 +
            $("#notebook-sub") .hover(function(){
 +
                $("#runningchip") .css('left','85.5%');
 +
                $("#notebook-sub") .show();
 +
            },
 +
                                    function(){
 +
                $("#runningchip") .css('left','');
 +
                $("#notebook-sub") .hide();
 
             });
 
             });
 
         });
 
         });
    </script>
+
</script>
  
    <script type="text/javascript">
 
            $(document).ready(function(){
 
    // make submenus appear //
 
                $("#home").hover(function(){
 
                    $("#team-sub") .hide();
 
                    $("#project-sub") .hide();
 
                    $("#results-sub") .hide();
 
                    $("#policy-sub") .hide();
 
                    $("#notebook-sub") .hide();
 
                });
 
                $("#project").hover(function(){
 
                    $("#project-sub") .show();
 
                    $("#team-sub") .hide();
 
                    $("#results-sub") .hide();
 
                    $("#policy-sub") .hide();
 
                    $("#notebook-sub") .hide();
 
                },
 
                                        function(){
 
                    $("#project-sub") .hide();
 
                });
 
               
 
                $("#team").hover(function(){
 
                    $("#team-sub") .show();
 
                    $("#project-sub") .hide();
 
                    $("#results-sub") .hide();
 
                    $("#policy-sub") .hide();
 
                    $("#notebook-sub") .hide();
 
                },
 
                                        function(){
 
                    $("#team-sub") .hide();
 
                });
 
               
 
                $("#results").hover(function(){
 
                    $("#results-sub") .show();
 
                    $("#project-sub") .hide();
 
                    $("#team-sub") .hide();
 
                    $("#policy-sub") .hide();
 
                    $("#notebook-sub") .hide();
 
                });
 
               
 
                $("#policy").hover(function(){
 
                    $("#policy-sub") .show();
 
                    $("#project-sub") .hide();
 
                    $("#team-sub") .hide();
 
                    $("#results-sub") .hide();
 
                    $("#notebook-sub") .hide();
 
                },
 
                                        function(){
 
                    $("#policy-sub") .hide();
 
                });
 
               
 
                $("#notebook").hover(function(){
 
                    $("#notebook-sub") .show();
 
                    $("#project-sub") .hide();
 
                    $("#team-sub") .hide();
 
                    $("#results-sub") .hide();
 
                    $("#policy-sub") .hide();
 
                },
 
                                        function(){
 
                    $("#notebook-sub") .hide();
 
                });
 
    // make chip stay over main menu point when its submenu appears and makes the submenu stay visible//
 
                $("#project-sub") .hover(function(){
 
                    $("#runningchip") .css('left','18.6%');
 
                    $("#project-sub") .show();
 
                },
 
                                        function(){
 
                    $("#runningchip") .css('left','');
 
                    $("#project-sub") .hide();
 
                });
 
                $("#team-sub") .hover(function(){
 
                    $("#runningchip") .css('left','35.5%');
 
                    $("#team-sub") .show();
 
                },
 
                                        function(){
 
                    $("#runningchip") .css('left','');
 
                    $("#team-sub") .hide();
 
                });
 
                $("#results-sub") .hover(function(){
 
                    $("#runningchip") .css('left','52%');
 
                    $("#results-sub") .show();
 
                },
 
                                        function(){
 
                    $("#runningchip") .css('left','');
 
                    $("#results-sub") .hide();
 
                });
 
                $("#policy-sub") .hover(function(){
 
                    $("#runningchip") .css('left','68.9%');
 
                    $("#policy-sub") .show();
 
                },
 
                                        function(){
 
                    $("#runningchip") .css('left','');
 
                    $("#policy-sub") .hide();
 
                });
 
                $("#notebook-sub") .hover(function(){
 
                    $("#runningchip") .css('left','85.5%');
 
                    $("#notebook-sub") .show();
 
                },
 
                                        function(){
 
                    $("#runningchip") .css('left','');
 
                    $("#notebook-sub") .hide();
 
                });
 
            });
 
    </script>
 
  
 +
<script>
 +
        /*Attachable menu code*/
 +
        $( document ).ready(function() {
 +
       
 +
            $(window).scroll(function (event) {
 +
                var y = $(this).scrollTop();
 +
                if(y>60){
  
    <script>
+
                    $("#header").css('position','fixed');
            /*Attachable menu code*/
+
                    $("#header").css('width','100%');
            $( document ).ready(function() {
+
                    $("#header").css('margin-top','-61px');
           
+
                    $("#bottom-arrow").css('display','none');
                $(window).scroll(function (event) {
+
                    $("#runningchip-back").css('display','none');
                    var y = $(this).scrollTop();  
+
                    $("#navtext").css('margin-top','-20px');
                    if(y>60){
+
                    $(".chip_gap").css('height','30px');
  
                        $("#header").css('position','fixed');
+
                }else{
                        $("#header").css('width','100%');
+
                    var offsetTop = -y;
                        $("#header").css('margin-top','-61px');
+
                    $("#header").css('margin-top',offsetTop+'px');
                        $("#bottom-arrow").css('display','none');
+
                    $("#bottom-arrow").removeAttr('style');
                        $("#runningchip-back").css('display','none');
+
                    $("#runningchip-back").removeAttr('style');
                        $("#navtext").css('margin-top','-20px');
+
                    $("#navtext").removeAttr('style');
                        $(".chip_gap").css('height','30px');
+
                    $(".chip_gap").css('height','23px');
 +
                }
  
                    }else{
+
            });
                        var offsetTop = -y;
+
/*Fix for when a link targets an id -> check the position on pageload*/
                        $("#header").css('margin-top',offsetTop+'px');
+
/* $(window).scroll();*/
                        $("#bottom-arrow").removeAttr('style');
+
                        $("#runningchip-back").removeAttr('style');
+
                        $("#navtext").removeAttr('style');
+
                        $(".chip_gap").css('height','23px');
+
                    }
+
  
                });
+
        });
    /*Fix for when a link targets an id -> check the position on pageload*/
+
    /* $(window).scroll();*/
+
  
            });
+
</script>
  
    </script>
+
<!-- END: jQuery -->
  
    <!-- END: jQuery -->
 
  
 +
</head>
  
    </head>
 
  
 +
<!-- BEGIN: Body content -->
 +
<body>
  
    <!-- BEGIN: Body content -->
+
<!-- BEGIN: Normal Menubar -->
    <body>
+
  
    <!-- BEGIN: Normal Menubar -->
+
      <div id="header">
 
+
<!-- Begin navigation menu icons -->
          <div id="header">
+
            <div id="naviconwrapper">  <!-- hier könnte man noch ein Logo in einer Seitenecke platzieren -->
    <!-- Begin navigation menu icons -->
+
                <div id="naviconbar">
                <div id="naviconwrapper">  <!-- hier könnte man noch ein Logo in einer Seitenecke platzieren -->
+
                <div id="navicons"> <!-- only icons -->
                    <div id="naviconbar">
+
                    <ul>
                    <div id="navicons"> <!-- only icons -->
+
                        <li id="home" ><a href="https://2015.igem.org/Team:Freiburg/Home">Home</a>
                        <ul>
+
                        </li>
                            <li id="home" ><a href="https://2015.igem.org/Team:Freiburg/Home">Home</a>
+
                        <li id="project"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview">Project</a>
                            </li>
+
                        </li>
                            <li id="project"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview">Project</a>
+
                        <li id="team"><a href="https://2015.igem.org/Team:Freiburg/Team">Team</a>
                            </li>
+
                        </li>
                            <li id="team"><a href="https://2015.igem.org/Team:Freiburg/Team">Team</a>
+
                        <li id="results"><a href="https://2015.igem.org/Team:Freiburg/Results">Results</a>
                            </li>
+
                        </li>
                            <li id="results"><a href="https://2015.igem.org/Team:Freiburg/Results">Results</a>
+
                        <li id="policy" style="font-size:11px"><a href="https://2015.igem.org/Team:Freiburg/Practices">Human Practice</a>
                            </li>
+
                        </li>
                            <li id="policy" style="font-size:11px"><a href="https://2015.igem.org/Team:Freiburg/Practices">Human Practice</a>
+
                        <li id="notebook"><a href="https://2015.igem.org/Team:Freiburg/Notebook">Notebook</a>
                            </li>
+
                        </li>
                            <li id="notebook"><a href="https://2015.igem.org/Team:Freiburg/Notebook">Notebook</a>
+
                    <div id="runningchip">
                            </li>
+
                                <div id="top-arrow"></div>
                        <div id="runningchip">
+
                                <div id="runningchip-back"></div>
                                    <div id="top-arrow"></div>
+
                                <div id="bottom-arrow"></div>
                                    <div id="runningchip-back"></div>
+
                                    <div id="bottom-arrow"></div>
+
                        </div>
+
                        </ul>
+
 
                     </div>
 
                     </div>
                     </div>
+
                     </ul>
                 </div>  
+
                </div>
    <!-- End navigation menu icons -->
+
                 </div>
 +
            </div>
 +
<!-- End navigation menu icons -->
  
               
+
           
    <!-- Begin navigation submenu -->
+
<!-- Begin navigation submenu -->
                <div id="navtextwrapper"> <!-- only names of elements -->
+
            <div id="navtextwrapper"> <!-- only names of elements -->
                    <div id="navtext">
+
                <div id="navtext">
                        <ul id="project-sub">
+
                    <ul id="project-sub">
                            <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview"></a></li>
+
                        <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview"></a></li>
                            <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Overview">Introduction</a></li>
+
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Overview">Introduction</a></li>
                            <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/System">Overview</a></li>
+
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/System">Overview</a></li>
                            <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Diagnostics">Diagnostics today</a></li>
+
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Diagnostics">Diagnostics today</a></li>
                            <li><a class="navsub1 subsubmenu" href="#">The DiaCHIP</a>
+
                        <li><a class="navsub1 subsubmenu" href="#">The DiaCHIP</a>
                                <ul>
+
                            <ul>
                                    <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Methods/Cloning">DNA Engineering</a></li>
+
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Methods/Cloning">DNA Engineering</a></li>
                                    <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Cellfree_Expression">Cell-free Expression</a></li>
+
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Cellfree_Expression">Cell-free Expression</a></li>
                                    <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Protein_Purification">Protein Purification</a></li>
+
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Protein_Purification">Protein Purification</a></li>
                                    <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Surface_Chemistry">Surface Chemistry</a></li>
+
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Surface_Chemistry">Surface Chemistry</a></li>
                                    <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/iRIf">Optical Detection</a></li>
+
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/iRIf">Optical Detection</a></li>
                                </ul>
+
                            </ul>
                            </li>
+
                        </li>
                            <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Future_Directions">Outlook</a></li>
+
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Future_Directions">Outlook</a></li>
                        </ul>
+
                    </ul>
                        <ul id="team-sub">
+
                    <ul id="team-sub">
                            <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Team"></a></li>
+
                        <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Team"></a></li>
                            <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Team">Members</a></li>
+
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Team">Members</a></li>
                            <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Attributions">Acknowledgements</a></li>
+
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Attributions">Acknowledgements</a></li>
                            <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Partners">Partners</a></li>
+
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Partners">Partners</a></li>
                        </ul>
+
                    </ul>
                        <ul id="results-sub">
+
                    <ul id="results-sub">
                            <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Results"></a></li>
+
                        <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Results"></a></li>
                            <li><a class="navsub1 subsubmenu" href="#">The DiaCHIP</a>
+
                        <li><a class="navsub1 subsubmenu" href="#">The DiaCHIP</a>
                                <ul>
+
                            <ul>
                                    <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results">Main Results</a></li>
+
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results">Main Results</a></li>
                                    <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Diagnostics">Diagnostics</a></li>
+
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Diagnostics">Diagnostics</a></li>
                                    <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Own_Device">Own Device</a></li>
+
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Own_Device">Own Device</a></li>
                                    <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Immobilization">DNA Immobilization</a></li>
+
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Immobilization">DNA Immobilization</a></li>
                                    <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Cellfree">Cellfree Expression</a></li>
+
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Cellfree">Cellfree Expression</a></li>
                                    <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Surface">Binding on Surface</a></li>
+
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Surface">Binding on Surface</a></li>
                                    <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Modeling">Modeling</a></li>
+
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Modeling">Modeling</a></li>
                                </ul>
+
                            </ul>
                            </li>
+
                        </li>
                            <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Parts">BioBricks</a></li>
+
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Parts">BioBricks</a></li>
                            <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Collaborations">Collaborations</a></li>
+
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Collaborations">Collaborations</a></li>
                            <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/InterLab_Study">Interlab Study</a></li>
+
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/InterLab_Study">Interlab Study</a></li>
                            <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Achievements">Achievements</a></li>
+
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Achievements">Achievements</a></li>
                        </ul>  
+
                    </ul>  
                        <ul id="policy-sub">
+
                    <ul id="policy-sub">
                            <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Human_Practice"></a></li>
+
                        <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Human_Practice"></a></li>
                            <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Human_Practice/Science_Fair">Science Fair</a></li>
+
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Human_Practice/Science_Fair">Science Fair</a></li>
                            <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Human_Practice/Theater_Project">Theater Project</a></li>
+
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Human_Practice/Theater_Project">Theater Project</a></li>
                            <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Human_Practice/Public_Opinion">Public Opinion</a></li>
+
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Human_Practice/Public_Opinion">Public Opinion</a></li>
                            <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Human_Practice/College">College Talk</a></li>
+
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Human_Practice/College">College Talk</a></li>
                            <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Human_Practice/Ethics">Ethics</a></li>
+
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Human_Practice/Ethics">Ethics</a></li>
                        </ul>
+
                    </ul>
                        <ul id="notebook-sub">
+
                    <ul id="notebook-sub">
                            <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Notebook"></a></li>
+
                        <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Notebook"></a></li>
                            <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Labjournals">Labjournals</a>
+
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Labjournals">Labjournals</a>
                            </li>
+
                        </li>
                            <li><a class="navsub1 subsubmenu" href="#">Techniques</a>
+
                        <li><a class="navsub1 subsubmenu" href="#">Techniques</a>
                                <ul>
+
                            <ul>
                                    <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Classic_vs_Gibson">Gibson</a></li>
+
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Classic_vs_Gibson">Gibson</a></li>
                                    <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Coli_Strains">E.coli Strains</a></li>
+
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Coli_Strains">E.coli Strains</a></li>
                                </ul>
+
                            </ul>
                            </li>
+
                        </li>
                            <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Protocols">Protocols</a></li>
+
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Protocols">Protocols</a></li>
                            <li><a class="navsub1" href="">Materials</a></li>
+
                        <li><a class="navsub1" href="">Materials</a></li>
                            <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Safety">Safety</a></li>
+
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Safety">Safety</a></li>
                            <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Wikimigration">Wiki-Tricks</a></li>
+
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Wikimigration">Wiki-Tricks</a></li>
                            <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Glossary">Glossary</a></li>
+
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Glossary">Glossary</a></li>
                                </ul>  
+
                            </ul>  
                            </li>
+
                        </li>
                        </ul>
+
                    </ul>
                    </div>
+
                </div>
                </div>   
+
            </div>   
    <!-- End of navigation submenu -->
+
<!-- End of navigation submenu -->
            </div>
+
        </div>
  
    <!-- End of header -->     
+
<!-- End of header -->     
    <!-- END: normal Menubar -->
+
<!-- END: normal Menubar -->
  
  
    <!-- BEGIN: Mobile Navigation -->
+
<!-- BEGIN: Mobile Navigation -->
  
            <div class="clearfix" id="smallnav">
+
        <div class="clearfix" id="smallnav">
                <ul class="clearfix">
+
            <ul class="clearfix">
                    <li id="home_small"><a href="https://2015.igem.org/Team:Freiburg/Home">Home</a></li>
+
                <li id="home_small"><a href="https://2015.igem.org/Team:Freiburg/Home">Home</a></li>
                    <li id="project_small"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview">Project</a></li>
+
                <li id="project_small"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview">Project</a></li>
                    <li id="results_small"><a href="https://2015.igem.org/Team:Freiburg/Results">Results</a></li>
+
                <li id="results_small"><a href="https://2015.igem.org/Team:Freiburg/Results">Results</a></li>
                    <li id="team_small"><a href="https://2015.igem.org/Team:Freiburg/Team">Team</a></li>
+
                <li id="team_small"><a href="https://2015.igem.org/Team:Freiburg/Team">Team</a></li>
                    <li id="policy_small"><a href="https://2015.igem.org/Team:Freiburg/Practices">Practice</a></li>
+
                <li id="policy_small"><a href="https://2015.igem.org/Team:Freiburg/Practices">Practice</a></li>
                    <li id="notebook_small"><a href="https://2015.igem.org/Team:Freiburg/Notebook">Notebook</a></li>   
+
                <li id="notebook_small"><a href="https://2015.igem.org/Team:Freiburg/Notebook">Notebook</a></li>   
                </ul>
+
            </ul>
                <a href="#" id="pull">Menu</a>
+
            <a href="#" id="pull">Menu</a>
            </div>
+
        </div>
  
    <!-- END: Mobile Navigation -->
+
<!-- END: Mobile Navigation -->
  
        </body>
+
    </body>
    </html>
+
</html>

Revision as of 21:56, 16 September 2015

""