|
|
| Line 1: |
Line 1: |
| − | {{Pasteur_Paris/Fonts}} | + | {{Pasteur_Paris/MenuBlock}} |
| | <html> | | <html> |
| − | <head> | + | |
| − | <title>""</title>
| + | <style type="text/css"> |
| − | <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
| + | #runningchip { |
| − | </head>
| + | left: 245px; |
| − | <style>
| + | |
| − | /* BEGIN : Default Wiki Settings */ | + | |
| − | #home_logo, #sideMenu { display:none; }
| + | |
| − | #sideMenu, #top_title, .patrollink {display:none;} | + | |
| − | #content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
| + | |
| − | body {background-color:white; }
| + | |
| − | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
| + | |
| − | .judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;};
| + | |
| − | /* END : Default Wiki Settings */
| + | |
| − | *{
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| | } | | } |
| − | body { | + | #hp_small { |
| − | padding-top: 80px; | + | background-color: #292929; |
| − | font-family: 'Raleway', Arial Black, sans-serif;
| + | |
| | } | | } |
| − | /* BEGIN : Menu Bar Settings */ | + | #bannerchanged{ |
| − | /* BEGIN : General Settings of Menu Bar */
| + | |
| − | /* BEGIN: Settings Menu Containers and List */
| + | |
| − | #Menu {
| + | |
| − | opacity: .95;
| + | |
| − | height: 80px;
| + | |
| − | position: fixed;
| + | |
| − | top: 18px;
| + | |
| − | left: 0%;
| + | |
| − | width: 100%;
| + | |
| − | z-index: 2;
| + | |
| − | border-bottom-left-radius: 15px;
| + | |
| − | border-bottom-right-radius: 15px;
| + | |
| − | z-index: 3000;
| + | |
| − | box-shadow: 0px 0px 5px black;
| + | |
| − | | + | |
| − | }
| + | |
| − | #Menu img {
| + | |
| − | float: left;
| + | |
| − | height: 100%;
| + | |
| − | width: auto;
| + | |
| − | }
| + | |
| − | #naviconwrapper {
| + | |
| − | height: 100%;
| + | |
| − | margin: 0px ; /*auto centers wrapper*/
| + | |
| − | min-width: 900px;
| + | |
| − | z-index: -100;
| + | |
| − | }
| + | |
| − | #naviconbar {
| + | |
| − | height: 100%;
| + | |
| − | min-width: 900px;
| + | |
| − | background-image: linear-gradient(to right, rgb(0, 0, 127), rgb(227, 0, 56));
| + | |
| − | z-index: -60;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | #navicons {
| + | |
| − | width: 960px;
| + | |
| − | z-index: -20; /*defines color behind icons */
| + | |
| − | display: inline-block;
| + | |
| − | vertical-align: middle;
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − | #navicons ul {
| + | |
| − | padding: 0px;
| + | |
| − | margin: 0px;
| + | |
| − | height: 100%;
| + | |
| − | width: 100%;
| + | |
| − | position: relative; /*makes chip go directly behind home from left corner*/
| + | |
| − | }
| + | |
| − | #navicons ul li {
| + | |
| − | list-style: none;
| + | |
| − | /*display: block;*/
| + | |
| − | float: left;
| + | |
| − | position: relative;
| + | |
| − | font-family: 'Raleway', sans-serif;
| + | |
| − | font-size: 12px;
| + | |
| − | background-color: rgba(161, 47, 92, 0.0);
| + | |
| − | /*border: 1px solid #5781BD;*/
| + | |
| − | z-index: 100;
| + | |
| − | height: 70%;
| + | |
| − | margin-top: 5px;
| + | |
| − | }
| + | |
| − | #navicons ul li a {
| + | |
| − | width: 120px;
| + | |
| − | display: block;
| + | |
| − | text-decoration: none;
| + | |
| − | /*color: #FFF;*/
| + | |
| − | text-align: center;
| + | |
| − | text-transform: uppercase;
| + | |
| − | z-index: 50;
| + | |
| − | padding-top: 48%;
| + | |
| − | }
| + | |
| − | #navicons ul a:hover {
| + | |
| − | }
| + | |
| − | /* END: Settings Menu Containers and List */
| + | |
| − | /* BEGIN : Classes for Main Menu Icons */
| + | |
| − | #home {
| + | |
| − | background: url(https://static.igem.org/mediawiki/2018/3/39/T--Pasteur_Paris--teamlogoigemwhite_99x60.png) no-repeat;
| + | |
| − | height: 60px;
| + | |
| − | background-position: center;
| + | |
| − | }
| + | |
| − | #home a {
| + | |
| − | color: #ffffff;
| + | |
| − | }
| + | |
| − | #project {
| + | |
| − | background: url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
| + | |
| − | height: 60px;
| + | |
| − | background-position: center;
| + | |
| − | }
| + | |
| − | #project a {
| + | |
| − | color: #ffffff;
| + | |
| − | }
| + | |
| − | #hp {
| + | |
| − | background: url(https://static.igem.org/mediawiki/2018/e/e6/T--Pasteur_Paris--HP.svg) no-repeat;
| + | |
| − | height: 60px;
| + | |
| − | background-position: center;
| + | |
| − | }
| + | |
| − | #hp a {
| + | |
| − | color: #ffffff;
| + | |
| − | }
| + | |
| − | #design {
| + | |
| − | background:url(https://static.igem.org/mediawiki/2018/b/bf/T--Pasteur_Paris--Design.svg) no-repeat;
| + | |
| − | height: 60px;
| + | |
| − | background-position: center;
| + | |
| − | }
| + | |
| − | #design a {
| + | |
| − | color: #ffffff;
| + | |
| − | }
| + | |
| − | #parts {
| + | |
| − | background:url(https://static.igem.org/mediawiki/2018/3/39/T--Pasteur_Paris--Parts.svg) no-repeat;
| + | |
| − | height: 60px;
| + | |
| − | background-position: center;
| + | |
| − | }
| + | |
| − | #parts a {
| + | |
| − | color: #ffffff;
| + | |
| − | }
| + | |
| − | #labwork {
| + | |
| − | background:url(https://static.igem.org/mediawiki/2018/9/9f/T--Pasteur_Paris--Labwork.svg)no-repeat;
| + | |
| − | height: 60px;
| + | |
| − | background-position: center;
| + | |
| − | }
| + | |
| − | #labwork a {
| + | |
| − | color: #ffffff;
| + | |
| − | }
| + | |
| − | #achievements {
| + | |
| − | background:url(https://static.igem.org/mediawiki/2018/8/89/T--Pasteur_Paris--Achievements.svg) no-repeat;
| + | |
| − | height: 60px;
| + | |
| − | background-position: center;
| + | |
| − | }
| + | |
| − | #achievements a {
| + | |
| − | color: #ffffff;
| + | |
| − | }
| + | |
| − | #aboutus {
| + | |
| − | background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
| + | |
| − | height: 60px;
| + | |
| − | background-position: center;
| + | |
| − | }
| + | |
| − | #aboutus a {
| + | |
| − | color: #ffffff;
| + | |
| − | }
| + | |
| − | /* END : Classes for Main Menu Icons */
| + | |
| − | /* BEGIN : Running Chip Settings */
| + | |
| − | /* Begin Chip design */
| + | |
| − | #runningchip {
| + | |
| − | position: absolute;
| + | |
| − | width: 110px;
| + | |
| − | height: 120%;
| + | |
| − | left: 5px;
| + | |
| − | -webkit-transition: all 300ms ease-out;
| + | |
| − | -moz-transition: all 300ms ease-out;
| + | |
| − | transition: all 300ms ease-out;
| + | |
| − | z-index: 0;
| + | |
| − | border-bottom-left-radius: 5px;
| + | |
| − | border-bottom-right-radius: 5px;
| + | |
| − | background: #000000;
| + | |
| − | }
| + | |
| − | /* End Chip design */
| + | |
| − | /* Begin Chip Movement */
| + | |
| − | #home:hover ~ #runningchip {
| + | |
| − | left: 5px;
| + | |
| − | }
| + | |
| − | #project:hover ~ #runningchip {
| + | |
| − | left: 125px;
| + | |
| − | }
| + | |
| − | #hp:hover ~ #runningchip {
| + | |
| − | left: 245px;
| + | |
| − | }
| + | |
| − | #design:hover ~ #runningchip {
| + | |
| − | left: 365px;
| + | |
| − | }
| + | |
| − | #parts:hover ~ #runningchip {
| + | |
| − | left: 485px;
| + | |
| − | }
| + | |
| − | #labwork:hover ~ #runningchip {
| + | |
| − | left: 605px;
| + | |
| − | }
| + | |
| − | #achievements:hover ~ #runningchip {
| + | |
| − | left: 725px;
| + | |
| − | }
| + | |
| − | #aboutus:hover ~ #runningchip {
| + | |
| − | left: 845px;
| + | |
| − | }
| + | |
| − | /* End Chip Movment */
| + | |
| − | /* END : Running Chip Settings */
| + | |
| − | /* BEGIN : Settings Submenu Level 1 */
| + | |
| − | #navtextwrapper { /*define background box*/
| + | |
| − | margin: 0 auto;
| + | |
| − | padding: 0px;
| + | |
| − | top: -2px;
| + | |
| − | height: 24px;
| + | |
| − | width: 960px;
| + | |
| − | position: relative;
| + | |
| − | /*border: 2px solid #000;*/
| + | |
| − | }
| + | |
| − | #navtext {
| + | |
| − | text-align: center;
| + | |
| − | font-family: 'Raleway',sans-serif;
| + | |
| − | font-size: 16px;
| + | |
| − | z-index: 600;
| + | |
| − | }
| + | |
| − | #navtext ul {
| + | |
| − | margin: 0px auto;
| + | |
| − | top: -8px;
| + | |
| − | padding: 0px;
| + | |
| − | position: absolute;
| + | |
| − | z-index: 600;
| + | |
| − | }
| + | |
| − | #navtext 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;
| + | |
| − | z-index: 600;
| + | |
| − | }
| + | |
| − | #navtext ul li a {
| + | |
| − | margin-top: 2px;
| + | |
| − | height: 24px;
| + | |
| − | 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 {
| + | |
| − | /* background-color: #6696c7; /*makes a link stay in a certain color when hovering over it and then looking throught its subitems */
| + | |
| − | color: #345292; /* couleur du sous titre quand tu passes dessus*/
| + | |
| − | }
| + | |
| − | #project-sub {
| + | |
| − | display: none;
| + | |
| − | left: 91px;
| + | |
| − | }
| + | |
| − | #hp-sub {
| + | |
| − | display: none;
| + | |
| − | left: 195px;
| + | |
| − | }
| + | |
| − | #design-sub {
| + | |
| − | /*background-color: #ac34fe;*/
| + | |
| − | display: none;
| + | |
| − | left: 356.5px;
| + | |
| − | }
| + | |
| − | #parts-sub{
| + | |
| − | display: none;
| + | |
| − | left: 473px;
| + | |
| − | }
| + | |
| − | #labwork-sub{
| + | |
| − | display: none;
| + | |
| − | left: 602px;
| + | |
| − | }
| + | |
| − | #achievements-sub{
| + | |
| − | display: none;
| + | |
| − | left: 720px;
| + | |
| − | }
| + | |
| − | #aboutus-sub{
| + | |
| − | display: none;
| + | |
| − | left: 840px;
| + | |
| − | }
| + | |
| − | .chip_gap {
| + | |
| − | content: none;
| + | |
| − | }
| + | |
| − | .navsub1 {
| + | |
| − | background-color: #000000;
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | /* END : Settings Submenu Level 1 */
| + | |
| − | /* END : General Settings of Menu Bar */
| + | |
| − | /* BEGIN Styles for Smallnav Intermediate Screens */
| + | |
| − | /* Clearfix */
| + | |
| − | .clearfix:before,
| + | |
| − | .clearfix:after {
| + | |
| − | content: " ";
| + | |
| − | display: table;
| + | |
| − | }
| + | |
| − | .clearfix:after {
| + | |
| − | clear: both;
| + | |
| − | }
| + | |
| − | .clearfix {
| + | |
| − | *zoom: 1;
| + | |
| − | }
| + | |
| − | /* Basic Styles */
| + | |
| − | #smallnav {
| + | |
| − | height: 40px;
| + | |
| − | width: 100%;
| + | |
| − | background-image: linear-gradient(to right, rgba(0, 0, 127, .9), rgba(227, 0, 56, .9));
| + | |
| − | font-size: 11pt;
| + | |
| − | font-family: 'Raleway', Arial, sans-serif;
| + | |
| − | position: fixed;
| + | |
| − | top: 18px;
| + | |
| − | left: 0%;
| + | |
| − | z-index: 3000;
| + | |
| − | box-shadow: 0px 0px 5px black;
| + | |
| − | z-index: 20000;
| + | |
| − | }
| + | |
| − | #smallnav ul {
| + | |
| − | padding: 0;
| + | |
| − | margin: 0 auto;
| + | |
| − | width: 770px;
| + | |
| − | height: 40px;
| + | |
| − | background: #345292;
| + | |
| − | }
| + | |
| − | #smallnav li {
| + | |
| − | display: inline;
| + | |
| − | float: left;
| + | |
| − | }
| + | |
| − | #smallnav a {
| + | |
| − | color: #ffffff;
| + | |
| − | display: inline-block;
| + | |
| − | width: 110px;
| + | |
| − | 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: #000000;
| + | |
| − | }
| + | |
| − | #smallnav a#pull {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | /* END Styles for Smallnav Intermediate Screens*/
| + | |
| − | /* END : Menu Bar Settings */
| + | |
| − | /* BEGIN : Content blocks settings */
| + | |
| − | #upArrow{
| + | |
| − | position: fixed;
| + | |
| − | bottom: 3%;
| + | |
| − | right: 3%;
| + | |
| − | height: 40px;
| + | |
| − | width: 60px;
| + | |
| − | background-image: url("https://static.igem.org/mediawiki/2018/0/05/T--Pasteur_Paris--UpArrow.svg");
| + | |
| − | opacity: .3;
| + | |
| − | border-radius: 5px;
| + | |
| − | z-index: 300;
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | transition: transform .5s;
| + | |
| − | }
| + | |
| − | #upArrow:hover{
| + | |
| − | opacity: .8;
| + | |
| − | transform: scale(1.1,1.1);
| + | |
| − | }
| + | |
| − | | + | |
| − | #upArrow a {
| + | |
| − | padding-top: 1px;
| + | |
| − | padding-bottom: 20px;
| + | |
| − | padding-left: 60px;
| + | |
| − | }
| + | |
| − | #banner {
| + | |
| | width: 100%; | | width: 100%; |
| − | height: 70vh; | + | overflow: hidden; |
| − | background-image: url("https://static.igem.org/mediawiki/2018/5/53/T--Pasteur_Paris--BannerHome1.png"); | + | margin: 0 auto; |
| − | background-repeat: no-repeat;
| + | } |
| − | background-attachment: fixed;
| + | @media screen and (max-width: 760px) { |
| − | background-size: cover;
| + | /*#wrapper { |
| − | background-position: 50% 50%;
| + | |
| − | }
| + | |
| − | #banner h1 {
| + | |
| − | text-align: center;
| + | |
| − | color: white;
| + | |
| − | font-size: 10vh;
| + | |
| − | line-height: 10vh;
| + | |
| − | font-family: 'Raleway', Arial Black, sans-serif;
| + | |
| − | }
| + | |
| − | #GeneralContent {
| + | |
| − | position:relative;
| + | |
| | width: 100%; | | width: 100%; |
| − | background-color: rgba(219, 0, 58, .001); | + | overflow: hidden; |
| | } | | } |
| − | #GeneralContent p, #GeneralContent h1, #GeneralContent h2, #GeneralContent h3, #GeneralContent h4, #GeneralContent h5, #GeneralContent h6, #GeneralContent ol, #GeneralContent li {
| + | #container { |
| − | font-family: 'Raleway', Arial Black, sans-serif; | + | width: 100%; |
| | + | margin: 0 auto; |
| | + | }*/ |
| | + | .banner-img { |
| | + | width: 100%; |
| | } | | } |
| − | #GeneralContent p, #GeneralContent li, #GeneralContent ol {
| + | } |
| − | font-size: 16px;
| + | |
| − | }
| + | ul li{ |
| − | #MainContent {
| + | list-style: disc; |
| − | max-width: 1100px;
| + | } |
| − | margin: auto;
| + | |
| − | padding-top: 10%;
| + | |
| − | padding-bottom: 10%;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | footer {
| + | |
| − | position: absolute;
| + | |
| − | background-color: #000000;
| + | |
| − | height: 70px;
| + | |
| − | width: 100%;
| + | |
| − | bottom: 0%;
| + | |
| − | left: 0%;
| + | |
| − | }
| + | |
| − | .block {
| + | |
| − | display: inline-block;
| + | |
| − | vertical-align: middle;
| + | |
| − | margin: auto;
| + | |
| − | margin-top: 2%;
| + | |
| − | margin-bottom: 2%;
| + | |
| − | margin-left: 1%;
| + | |
| − | margin-right: 1%;
| + | |
| − | }
| + | |
| − | .block.title {
| + | |
| − | width: 94%;
| + | |
| − | margin-bottom: 2%%;
| + | |
| − | }
| + | |
| − | .block.two-third {
| + | |
| − | width: 60%;
| + | |
| − | }
| + | |
| − | .block.two-third.center {
| + | |
| − | width: 60%;
| + | |
| − | }
| + | |
| − | .block.one-third {
| + | |
| − | width: 30%;
| + | |
| − | }
| + | |
| − | .block.full {
| + | |
| − | width: 90%;
| + | |
| − | }
| + | |
| − | .block.half {
| + | |
| − | width: 45%;
| + | |
| − | }
| + | |
| − | .block.separator {
| + | |
| − | height: 1px;
| + | |
| − | width: 90%;
| + | |
| − | margin-top: 3%;
| + | |
| − | margin-bottom: 3%;
| + | |
| − | }
| + | |
| − | .block.separator-invisible {
| + | |
| − | height: 1px;
| + | |
| − | width: 90%;
| + | |
| − | }
| + | |
| − | .block.separator-mark {
| + | |
| − | height: 2px;
| + | |
| − | width: 70%;
| + | |
| − | margin-top: 10%;
| + | |
| − | margin-bottom: 10%;
| + | |
| − | background-color: black;
| + | |
| − | opacity: 0.3;
| + | |
| − | }
| + | |
| − | .onglet{
| + | |
| − | position: relative;
| + | |
| − | display: inline-block;;
| + | |
| − | border-radius: 50%;
| + | |
| − | width: 250px;
| + | |
| − | box-shadow: 5px 5px 30px grey;
| + | |
| − | margin-bottom: 100px;
| + | |
| − | }
| + | |
| − | .onglet:hover{
| + | |
| − | opacity: .8;
| + | |
| − | transform: scale(1.05,1.05);
| + | |
| − | }
| + | |
| − | .ongletImg {
| + | |
| − | width: 100%;
| + | |
| − | padding-top: 100%;
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | background-size: cover;
| + | |
| − | background-position: center;
| + | |
| − | border-radius: 50%;
| + | |
| − | }
| + | |
| − | .textOnglet{
| + | |
| − | position: absolute;
| + | |
| − | left: 50%;
| + | |
| − | top: 90%;
| + | |
| − | transform: translate(-50%, 0%);
| + | |
| − | background-color: black;
| + | |
| − | width: 90%;
| + | |
| − | height: auto;
| + | |
| − | padding-top: 3px;
| + | |
| − | border-radius: 25px;
| + | |
| − | box-shadow: 0px 0px 20px -3px black;
| + | |
| − | }
| + | |
| − | .textOnglet p{
| + | |
| − | text-align: center;
| + | |
| − | text-indent: 0;
| + | |
| − | color: white;
| + | |
| − | line-height: 100%;
| + | |
| − | font-size: 160%;
| + | |
| − | padding-top: 3px;
| + | |
| − | }
| + | |
| − | .legend {
| + | |
| − | margin-top: 5px;
| + | |
| − | margin-bottom: 5px;
| + | |
| − | }
| + | |
| − | .tableData{
| + | |
| − | background-color: transparent;
| + | |
| − | width: 95%;
| + | |
| − | }
| + | |
| − | p {
| + | |
| − | text-align: justify;
| + | |
| − | text-indent: 30px;
| + | |
| − | }
| + | |
| − | img {
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | a img:hover {
| + | |
| − | opacity: 0.4;
| + | |
| − | }
| + | |
| − | /* END : Content block settings */ | + | |
| − | /* BEGIN : Hidden Contents*/
| + | |
| − | .bothContent {
| + | |
| − | border-radius: 15px;
| + | |
| − | border-width: 2px;
| + | |
| − | box-shadow: 0px 1px 3px black;
| + | |
| − | margin: 0;
| + | |
| − | margin-top: 15px;
| + | |
| − | }
| + | |
| − | .dropDown{
| + | |
| − | background-color: rgb(133, 25, 106);
| + | |
| − | margin: 5px;
| + | |
| − | border-radius: 10px;
| + | |
| − | position: relative;
| + | |
| − | opacity: .95;
| + | |
| − | padding-bottom: 40px;
| + | |
| − | padding-top: 40px;
| + | |
| − | cursor: pointer;
| + | |
| − | width: 100%;
| + | |
| − | margin: 0;
| + | |
| − | position: sticky;
| + | |
| − | top: 98px;
| + | |
| − | z-index: 1;
| + | |
| − | }
| + | |
| − | .dropDown:hover {
| + | |
| − | opacity: .7;
| + | |
| − | }
| + | |
| − | .dropDown h4 {
| + | |
| − | position: absolute;
| + | |
| − | left: 50%;
| + | |
| − | top: 50%;
| + | |
| − | transform: translate(-50%, -50%);
| + | |
| − | color: white;
| + | |
| − | z-index: 1;
| + | |
| − | }
| + | |
| − | .dropDown a {
| + | |
| − | color: white;
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − | .hiddenContent{
| + | |
| − | transition-duration: : opacity 1s;
| + | |
| − | margin: 1px 0px 0px;
| + | |
| − | }
| + | |
| − | .hiddenContent:target{
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | .closeCross{
| + | |
| − | height: 50px;
| + | |
| − | width: 50px;
| + | |
| − | position: absolute;
| + | |
| − | opacity: .2;
| + | |
| − | transition: transform .5s;
| + | |
| − | }
| + | |
| − | .closeCross:hover {
| + | |
| − | opacity: .8;
| + | |
| − | transform: scale(1.05,1.05);
| + | |
| − | cursor: pointer;
| + | |
| − | }
| + | |
| − | /* END : Hidden Contents */ | + | |
| − | /* BEGIN : Index Menu */
| + | |
| − | #index {
| + | |
| − | position: fixed;
| + | |
| − | top: 60vh;
| + | |
| − | background-image: linear-gradient(to top, rgb(0, 0, 127), rgb(227, 0, 56));
| + | |
| − | -webkit-transition: transform .7s; /* Safari */
| + | |
| − | transition: transform .7s;
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | border-top-right-radius: 13px;
| + | |
| − | border-bottom-right-radius: 15px;
| + | |
| − | z-index: 10000;
| + | |
| − | transform: translate(0%, -50%);
| + | |
| − | cursor: pointer;
| + | |
| − | }
| + | |
| − | #index p {
| + | |
| − | text-indent: 0px;
| + | |
| − | margin: 0px;
| + | |
| − | padding: 10px;
| + | |
| − | }
| + | |
| − | #indexContent {
| + | |
| − | display: inline-block;
| + | |
| − | background-color: black;
| + | |
| − | margin-top: 4px;
| + | |
| − | margin-bottom: 4px;
| + | |
| − | border-bottom-right-radius: 15px;
| + | |
| − | border-top-right-radius: 15px;
| + | |
| − | }
| + | |
| − | #indexContent p:hover {
| + | |
| − | transform: scale(1.1,1.1);
| + | |
| − | transition: transform .5s;
| + | |
| − | }
| + | |
| − | #indexContent p a{
| + | |
| − | color: white;
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − | #indexRight{
| + | |
| − | float: right;
| + | |
| − | width: 10px;
| + | |
| − | display: inline-block;
| + | |
| − | }
| + | |
| − | #littleButton{
| + | |
| − | height: 45px;
| + | |
| − | width: 22px;
| + | |
| − | border-top-right-radius: 50px;
| + | |
| − | border-bottom-right-radius: 50px;
| + | |
| − | background-image: linear-gradient(to bottom, rgb(227, 0, 56), rgb(170, 0, 73));
| + | |
| − | }
| + | |
| − | /* END : Index Menu*/
| + | |
| − | /* BEGIN : Media Query Responsive design */
| + | |
| − | /* BEGIN : Menu Style for Large screens above 960 */
| + | |
| − | @media screen and (min-width: 961px){
| + | |
| − | #smallnav{
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | }/* END : Menu Style for Large screens above 960 */
| + | |
| − | /* BEGIN : Menu Style for Small screens 960 and lower*/
| + | |
| − | @media screen and (max-width: 960px){
| + | |
| − | body {
| + | |
| − | padding-top: 40px;
| + | |
| − | }
| + | |
| − | #Menu{
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | .dropDown {
| + | |
| − | position: relative;
| + | |
| − | top: 0px;
| + | |
| − | }
| + | |
| − | .block.two-third, .block.one-third, .block.half {width: 44%;}
| + | |
| − | .block.two-third.center, .block.full, .block.separator, .block.title {width: 90%;}
| + | |
| − | /* BEGIN : smallnav settings for mobile */
| + | |
| − | #smallnav {
| + | |
| − | height: auto;
| + | |
| − | }
| + | |
| − | #smallnav ul {
| + | |
| − | width: 100%;
| + | |
| − | display: block;
| + | |
| − | height: auto;
| + | |
| − | }
| + | |
| − | #smallnav li {
| + | |
| − | width: 50%;
| + | |
| − | float: left;
| + | |
| − | position: relative;
| + | |
| − | margin-bottom: 0;
| + | |
| − | }
| + | |
| − | #smallnav a {
| + | |
| − | text-align: left;
| + | |
| − | width: 100%;
| + | |
| − | text-indent: 25px;
| + | |
| − | }
| + | |
| − | #smallnav {
| + | |
| − | border-bottom: 0;
| + | |
| − | }
| + | |
| − | #smallnav ul {
| + | |
| − | display: none;
| + | |
| − | height: auto;
| + | |
| − | }
| + | |
| − | #smallnav a#pull {
| + | |
| − | display: block;
| + | |
| − | width: 100%;
| + | |
| − | position: relative;
| + | |
| − | }
| + | |
| − | #smallnav a#pull:after {
| + | |
| − | content:"";
| + | |
| − | background: url('https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png') no-repeat;
| + | |
| − | background-size: auto 90%;
| + | |
| − | width: 30px;
| + | |
| − | height: 30px;
| + | |
| − | display: inline-block;
| + | |
| − | position: absolute;
| + | |
| − | right: 15px;
| + | |
| − | top: 5px;
| + | |
| − | }
| + | |
| − | /* END : smallnav settings for mobile */
| + | |
| − | /* BEGIN : classes for Small Mobile Icons */
| + | |
| − | #home_small {
| + | |
| − | background-color: #345292;
| + | |
| − | }
| + | |
| − | #home_small a {
| + | |
| − | background: url(https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png) no-repeat;
| + | |
| − | background-position: left;
| + | |
| − | background-size: auto 100%;
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | padding-left: 40px;
| + | |
| − | color: #FFF;
| + | |
| − | }
| + | |
| − | #project_small {
| + | |
| − | background-color: #345292;
| + | |
| − | }
| + | |
| − | #project_small a {
| + | |
| − | background: url(https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png) no-repeat;
| + | |
| − | background-position: left;
| + | |
| − | background-size: auto 90%;
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | padding-left: 40px;
| + | |
| − | color: #FFF;
| + | |
| − | }
| + | |
| − | #hp_small {
| + | |
| − | background-color:#345292;
| + | |
| − | }
| + | |
| − | #hp_small a {
| + | |
| − | background: url(https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png) no-repeat;
| + | |
| − | background-position: left;
| + | |
| − | background-size: auto 90%;
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | padding-left: 40px;
| + | |
| − | color: #FFF;
| + | |
| − | }
| + | |
| − | #design_small {
| + | |
| − | background-color: #345292;
| + | |
| − | }
| + | |
| − | #design_small a {
| + | |
| − | background: url(https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png) no-repeat;
| + | |
| − | background-position: left;
| + | |
| − | background-size: auto 90%;
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | padding-left: 40px;
| + | |
| − | color: #FFF;
| + | |
| − | }
| + | |
| − | #parts_small {
| + | |
| − | background-color: #345292;
| + | |
| − | }
| + | |
| − | #parts_small a {
| + | |
| − | color: #FFF;
| + | |
| − | padding-left: 40px;
| + | |
| − | background-image: url(https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png);
| + | |
| − | background-position: left;
| + | |
| − | background-size: auto 90%;
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | }
| + | |
| − | #labwork_small {
| + | |
| − | background-color: #345292;
| + | |
| − | }
| + | |
| − | #labwork_small a {
| + | |
| − | color: #FFF;
| + | |
| − | padding-left: 40px;
| + | |
| − | background-image: url(https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png);
| + | |
| − | background-position: left;
| + | |
| − | background-size: auto 90%;
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | }
| + | |
| − | #achievements_small {
| + | |
| − | background-color: #345292;
| + | |
| − | }
| + | |
| − | #achievements_small a {
| + | |
| − | color: #FFF;
| + | |
| − | padding-left: 40px;
| + | |
| − | background-image: url(https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png);
| + | |
| − | background-position: left;
| + | |
| − | background-size: auto 90%;
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | }
| + | |
| − | #aboutus_small {
| + | |
| − | background-color: #345292;
| + | |
| − | }
| + | |
| − | #aboutus_small a {
| + | |
| − | background: url(https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png) no-repeat;
| + | |
| − | background-position: left;
| + | |
| − | background-size: auto 90%;
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | padding-left: 40px;
| + | |
| − | color: #FFF;
| + | |
| − | }
| + | |
| − | /* END : classes for Small Mobile Icons */
| + | |
| − | }/* END : Menu Style for Small screens 960 and lower */ | + | |
| − | /* BEGIN : Style for Small Mobile screen 760 and lower */
| + | |
| − | @media screen and (max-width: 760px) {
| + | |
| − | /* BEGIN : Content Settings */
| + | |
| − | .block.two-third, .block.one-third, .block.two-third.center, .block.full, .block.separator, .block.title, .block.half {
| + | |
| − | width: 90%;
| + | |
| − | }
| + | |
| − | #banner {
| + | |
| − | background-image: none;
| + | |
| − | background-color: black;
| + | |
| − | height: 100vh;
| + | |
| − | }
| + | |
| − | #banner h1 {
| + | |
| − | }
| + | |
| − | /* END : Content Settings */
| + | |
| − | }/* END : Style for Small Mobile screen 760 and lower */
| + | |
| − | /* BEGIN : Style for Smartphones 320 and lower*/
| + | |
| − | @media only screen and (max-width : 370px) {
| + | |
| − | #smallnav li {
| + | |
| − | display: block;
| + | |
| − | float: none;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | }/* END : Style for Smartphones 320 and lower*/
| + | |
| − | /* END : Media query Responsive design */
| + | |
| | </style> | | </style> |
| | | | |
| − | <script> | + | <div id="bannerchanged"> |
| − | /* BEGIN : Show and Close Hidden Contents */
| + | <img class="banner-img" src="https://static.igem.org/mediawiki/2018/8/80/T--Pasteur_Paris--Banner_Safety.jpg"> |
| − | $(document).ready(function() {
| + | </div> |
| − | $('.hiddenContent').hide();
| + | <h1></h1> |
| − | $('.dropDown').on('click', function() {
| + | </div> |
| − | if ($(this).next().css("display")=="none"){
| + | |
| − | ShowHiddenContent(this);
| + | |
| − | }
| + | |
| − | else {
| + | |
| − | var top = $(this).parent().offset().top - 200;
| + | |
| − | $('html, body').animate( { scrollTop:top }, 750);
| + | |
| − | }
| + | |
| − | });
| + | |
| − | $('.closeCross').on('click', function () {
| + | |
| − | HideHiddenContent(this);
| + | |
| − | });
| + | |
| − | });
| + | |
| − | function ShowHiddenContent (dropDown){
| + | |
| − | $(dropDown).next().fadeIn(500);
| + | |
| − | $(dropDown).css("border-bottom-right-radius","0px");
| + | |
| − | $(dropDown).css("border-bottom-left-radius", "0px");
| + | |
| − | };
| + | |
| − | function HideHiddenContent (closeCross){
| + | |
| − | $(closeCross).parent().fadeOut(500);
| + | |
| − | $(closeCross).parent().prev().css("border-bottom-right-radius","15px");
| + | |
| − | $(closeCross).parent().prev().css("border-bottom-left-radius", "15px");
| + | |
| − | }
| + | |
| − | /* END : Show and Close Hidden Contents */
| + | |
| − | /* BEGIN : Index Side Menu */
| + | |
| − | $(document).ready(function() {
| + | |
| − | /* BEGIN : Index Menu disappears when scrolls*/
| + | |
| − | $(window).scroll(function () {
| + | |
| − | var heightScreen = $(window).height(),
| + | |
| − | height = $(this).scrollTop(),
| + | |
| − | ratio = height/heightScreen;
| + | |
| − | if (ratio > .01 ) {
| + | |
| − | $('#index').css("transform","translate(-97%,-50%)");
| + | |
| − | $('#index').css("opacity",".7");
| + | |
| − | } else {
| + | |
| − | $('#index').css("transform","translate(0px,-50%)");
| + | |
| − | $('#index').css("opacity","1");
| + | |
| − | }
| + | |
| − | });
| + | |
| − | /* END : Index Menu disappears when scrolls */
| + | |
| − | /* BEGIN : Index Menu appears when click on it*/
| + | |
| − | $('#index').on("click", function() {
| + | |
| − | $(this).css("transform","translate(0px,-50%)");
| + | |
| − | $('#index').css("opacity","1");
| + | |
| − | });
| + | |
| − | /* END : Index Menu appears when mouse on it */
| + | |
| − | /* BEGIN : Opens and goes to the hidden Content when click on link */
| + | |
| − | $('.link').on('click', function() {
| + | |
| − | var idLink = $(this).attr('href');
| + | |
| − | ShowHiddenContent($(idLink));
| + | |
| − | var top = $(idLink).offset().top - 200;
| + | |
| − | $('html, body').animate( { scrollTop: top }, 750);
| + | |
| − | return false;
| + | |
| − | });
| + | |
| − | /* END : Opens and goes to the hidden Content when click on link */
| + | |
| − | });
| + | |
| − | /* END : Index Side Menu */
| + | |
| − | </script>
| + | |
| − | <script>
| + | |
| − | // FOR SMALLNAV
| + | |
| − | $(function() {
| + | |
| − | var pull = $('#pull');
| + | |
| − | menu = $('#smallnav ul');
| + | |
| − | menuHeight = menu.height();
| + | |
| − | $(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 type="text/javascript">
| + | |
| − | $(document).ready(function(){
| + | |
| − | // make submenus appear //
| + | |
| − | $("#home").hover(function(){
| + | |
| − | $("#project-sub") .hide();
| + | |
| − | $("#design-sub") .hide();
| + | |
| − | $("#hp-sub") .hide();
| + | |
| − | $("#parts-sub") .hide();
| + | |
| − | $("#labwork-sub") .hide();
| + | |
| − | $("#achievements-sub") .hide();
| + | |
| − | $("#aboutus-sub") .hide();
| + | |
| − | });
| + | |
| − | $("#project").hover(function(){
| + | |
| − | $("#project-sub") .show();
| + | |
| − | $("#hp-sub") .hide();
| + | |
| − | $("#design-sub") .hide();
| + | |
| − | $("#parts-sub") .hide();
| + | |
| − | $("#labwork-sub") .hide();
| + | |
| − | $("#achievements-sub") .hide();
| + | |
| − | $("#aboutus-sub") .hide();
| + | |
| − | },
| + | |
| − | function(){
| + | |
| − | $("#project-sub") .hide();
| + | |
| − | });
| + | |
| − | $("#hp").hover(function(){
| + | |
| − | $("#hp-sub") .show();
| + | |
| − | $("#project-sub") .hide();
| + | |
| − | $("#design-sub") .hide();
| + | |
| − | $("#parts-sub") .hide();
| + | |
| − | $("#labwork-sub") .hide();
| + | |
| − | $("#achievements-sub") .hide();
| + | |
| − | $("#aboutus-sub") .hide();
| + | |
| − | },
| + | |
| − | function(){
| + | |
| − | $("#hp-sub") .hide();
| + | |
| − | });
| + | |
| − |
| + | |
| − | $("#design").hover(function(){
| + | |
| − | $("#design-sub") .show();
| + | |
| − | $("#project-sub") .hide();
| + | |
| − | $("#hp-sub") .hide();
| + | |
| − | $("#parts-sub") .hide();
| + | |
| − | $("#labwork-sub") .hide();
| + | |
| − | $("#achievements-sub") .hide();
| + | |
| − | $("#aboutus-sub") .hide();
| + | |
| − | },
| + | |
| − | function(){
| + | |
| − | $("#design-sub") .hide();
| + | |
| − | });
| + | |
| − |
| + | |
| − | $("#parts").hover(function(){
| + | |
| − | $("#parts-sub") .show();
| + | |
| − | $("#project-sub") .hide();
| + | |
| − | $("#design-sub") .hide();
| + | |
| − | $("#hp-sub") .hide();
| + | |
| − | $("#labwork-sub") .hide();
| + | |
| − | $("#achievements-sub") .hide();
| + | |
| − | $("#aboutus-sub") .hide();
| + | |
| − | },
| + | |
| − | function(){
| + | |
| − | $("#parts-sub") .hide();
| + | |
| − | });
| + | |
| − |
| + | |
| − | $("#labwork").hover(function(){
| + | |
| − | $("#labwork-sub") .show();
| + | |
| − | $("#project-sub") .hide();
| + | |
| − | $("#design-sub") .hide();
| + | |
| − | $("#hp-sub") .hide();
| + | |
| − | $("#parts-sub") .hide();
| + | |
| − | $("#achievements-sub") .hide();
| + | |
| − | $("#aboutus-sub") .hide();
| + | |
| − | },
| + | |
| − | function(){
| + | |
| − | $("#labwork-sub") .hide();
| + | |
| − | });
| + | |
| − |
| + | |
| − | $("#achievements").hover(function(){
| + | |
| − | $("#achievements-sub") .show();
| + | |
| − | $("#project-sub") .hide();
| + | |
| − | $("#design-sub") .hide();
| + | |
| − | $("#hp-sub") .hide();
| + | |
| − | $("#parts-sub") .hide();
| + | |
| − | $("#labwork-sub") .hide();
| + | |
| − | $("#aboutus-sub") .hide();
| + | |
| − | },
| + | |
| − | function(){
| + | |
| − | $("#achievements-sub") .hide();
| + | |
| − | });
| + | |
| − | $("#aboutus").hover(function(){
| + | |
| − | $("#aboutus-sub") .show();
| + | |
| − | $("#project-sub") .hide();
| + | |
| − | $("#design-sub") .hide();
| + | |
| − | $("#hp-sub") .hide();
| + | |
| − | $("#parts-sub") .hide();
| + | |
| − | $("#labwork-sub") .hide();
| + | |
| − | $("#achievements-sub") .hide();
| + | |
| − | },
| + | |
| − | function(){
| + | |
| − | $("#aboutus-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','125px');
| + | |
| − | $("#project-sub") .show();
| + | |
| − | },
| + | |
| − | function(){
| + | |
| − | $("#runningchip") .css('left','');
| + | |
| − | $("#project-sub") .hide();
| + | |
| − | });
| + | |
| − | $("#hp-sub") .hover(function(){
| + | |
| − | $("#runningchip") .css('left','245px');
| + | |
| − | $("#hp-sub") .show();
| + | |
| − | },
| + | |
| − | function(){
| + | |
| − | $("#runningchip") .css('left','');
| + | |
| − | $("#hp-sub") .hide();
| + | |
| − | });
| + | |
| − | $("#design-sub") .hover(function(){
| + | |
| − | $("#runningchip") .css('left','365px');
| + | |
| − | $("#design-sub") .show();
| + | |
| − | },
| + | |
| − | function(){
| + | |
| − | $("#runningchip") .css('left','');
| + | |
| − | $("#design-sub") .hide();
| + | |
| − | });
| + | |
| − | $("#parts-sub") .hover(function(){
| + | |
| − | $("#runningchip") .css('left','485px');
| + | |
| − | $("#parts-sub") .show();
| + | |
| − | },
| + | |
| − | function(){
| + | |
| − | $("#runningchip") .css('left','');
| + | |
| − | $("#parts-sub") .hide();
| + | |
| − | });
| + | |
| − | $("#labwork-sub") .hover(function(){
| + | |
| − | $("#runningchip") .css('left','605px');
| + | |
| − | $("#labwork-sub") .show();
| + | |
| − | },
| + | |
| − | function(){
| + | |
| − | $("#runningchip") .css('left','');
| + | |
| − | $("#labwork-sub") .hide();
| + | |
| − | });
| + | |
| − | $("#achievements-sub") .hover(function(){
| + | |
| − | $("#runningchip") .css('left','725px');
| + | |
| − | $("#achievements-sub") .show();
| + | |
| − | },
| + | |
| − | function(){
| + | |
| − | $("#runningchip") .css('left','');
| + | |
| − | $("#achievements-sub") .hide();
| + | |
| − | });
| + | |
| − | $("#aboutus-sub") .hover(function(){
| + | |
| − | $("#runningchip") .css('left','845px');
| + | |
| − | $("#aboutus-sub") .show();
| + | |
| − | },
| + | |
| − | function(){
| + | |
| − | $("#runningchip") .css('left','');
| + | |
| − | $("#aboutus-sub") .hide();
| + | |
| − | });
| + | |
| − | });
| + | |
| − | </script>
| + | |
| − | <script>
| + | |
| − | /*Attachable menu code*/
| + | |
| − | $( document ).ready(function() {
| + | |
| − |
| + | |
| − | $(window).scroll(function (event) {
| + | |
| − | var y = $(this).scrollTop();
| + | |
| − | if(y>60){
| + | |
| − | $("#header").css('position','fixed');
| + | |
| − | $("#header").css('width','100%');
| + | |
| − | $("#header").css('margin-top','-61px');
| + | |
| − | $("#bottom-arrow").css('display','none');
| + | |
| − | $("#runningchip-back").css('display','none');
| + | |
| − | $("#navtext").css('margin-top','-20px');
| + | |
| − | $(".chip_gap").css('height','30px');
| + | |
| − | }else{
| + | |
| − | var offsetTop = -y;
| + | |
| − | $("#header").css('margin-top',offsetTop+'px');
| + | |
| − | $("#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>
| |
| − | $(document).ready(function() {
| |
| − | $("#upArrow").hide();
| |
| − | $(window).scroll(function () {
| |
| − | var heightScreen = $(window).height(),
| |
| − | height = $(this).scrollTop(),
| |
| − | ratio = height/heightScreen;
| |
| − | if (ratio > 1 ) {
| |
| − | $('#upArrow').fadeIn(500);
| |
| − | } else {
| |
| − | $('#upArrow').fadeOut(500);
| |
| − | }
| |
| − | });
| |
| − | $('#upArrow').on('click', function() { // Au clic sur un élément
| |
| − | var page = $(this).attr('href'); // Page cible
| |
| − | var speed = 750; // Durée de l'animation (en ms)
| |
| − | $('html, body').animate( { scrollTop: $(page).offset().top }, speed ); // Go
| |
| − | return false;
| |
| − | });
| |
| − | });
| |
| − | </script>
| |
| | | | |
| − | <body> | + | <div id="GeneralContent"> |
| − | <div id="upWindow" style="transform: translate(0px, -100px);"> | + | <div id="index" class="block"> |
| | + | <div id="indexContent"> |
| | + | <p><a href="#Environment" class="link">Environmental Safety</a></p> |
| | + | <p><a href="#LabSafety" class="link">Lab Safety</a></p> |
| | + | <p><a href="#References" class="link">References</a></p> |
| | + | </div> |
| | + | <div id="indexRight"> |
| | + | <div id="littleButton"></div> |
| | + | </div> |
| | </div> | | </div> |
| − | <div id="upArrow" href="#upWindow"> | + | <div id="MainContent"> |
| − | <a href=""></a> | + | <div class="block title" id="Environment"> |
| − | </div>
| + | <h1>SAFETY FOR THE ENVIRONMENT</h1> |
| − | <!-- BEGIN normal Menubar-->
| + | </div> |
| − | <div id="Menu">
| + | |
| − | <div id="naviconwrapper"> | + | <p>A major concern of our project is to prevent any risk for the environment and the human body. The genetically modified E.coli must not leave the biofilm because they could have unintended environmental or health consequences. In order to avoid collateral damage, we implemented two barriers to prevent the genetically modified bacteria to spread outside the biofilm.</p> |
| − | <!-- BEGIN icons -->
| + | <p>The first barrier is a physical one: the biofilm is contained inside a membrane having small pores that the bacteria cannot pass because of its size. The biocompatible membrane made of aluminum oxide and covered by a polymer, have pores of 0.2 micrometers which is smaller than the size of the bacteria composing the biofilm. The second barrier is a biological one, that we integrated into the genetically modified E.coli forming the biofilm. Indeed, we worked on a kill switch that is cryosensitive. The bacteria should die when they leave the prosthesis and go in an environment that has a temperature lower than 37°C. In practice, the kill switch is fully effective when the temperature is lower than 22°C. The membrane and the kill switch confine the bacteria inside of our device, so they won’t spread inside the human body or the environment.</p> |
| − | | + | </div> |
| − | | + | <div class="block full"> |
| − | <ul>
| + | <img src=""> |
| − | <li id="home" style="height: 75px; margin-top: 3px"><a href="https://2018.igem.org/Team:Pasteur_Paris"></a>
| + | <div class="legend">This video explains in simple terms how the kill switch works. He featured to bacteria in the biofilm that explain the objective of this biological barrier. </div> |
| − | </li>
| + | </div> |
| − | <li id="project" ><a>Project</a>
| + | <div class=" block separator- mark"></div> |
| − | </li>
| + | <div class=" block title" id=" LabSafety"> |
| − | <li id="hp"><a>Human Practices</a>
| + | <h1>LAB SAFETY: <h1><h4>A time line to understand the lab worker's daily life</h4> |
| − | </li>
| + | </div> |
| − | <li id="design"><a>Product Design</a>
| + | <div class="block full"> |
| − | </li>
| + | <img src="https://static.igem.org/mediawiki/2018/7/7d/T--Pasteur_Paris--LabSafety.png"> |
| − | <li id="parts"><a>Parts</a>
| + | <div class="legend"><b>Figure 1:</b> with this interactive timeline, we want to explain the main lab safety rules which are applied every day in labs!</div> |
| − | </li>
| + | </div> |
| − | <li id="labwork"><a>labwork</a>
| + | <div class="block two-third"> |
| − | </li>
| + | <p>This role-playing shows that, during one day as a lab worker, you may have to work in laboratories with different biosafety levels. Then, a classification exists which takes into consideration the organism used, the equipment practices and procedures you have to follow. Mainly, BSL-1 and BSL-2 are used for research. However, in some important cases, you could use BSL-3 lab and more. An important point is that rules are cumulative, it means that in BSL-2 you have to apply BSL-1 rules and BSL-2 rules. </p> |
| − | <li id="achievements"><a>Achievements</a>
| + | </div> |
| − | </li>
| + | <div class="block full"> |
| − | <li id="aboutus"><a>About Us</a>
| + | <h3 style="text-align: left;"><span style="color: #e90000;">BSL-1:</span> a basic laboratory with a biosafety level 1</h3> |
| − | </li>
| + | <p>This laboratory is used for basic teaching and research. In this lab, you have to use good microbiological techniques (GMT). GMT rules should be applied every time you work with any microorganism, regardless the biosafety level. No safety equipment is required <b>except an open bench work</b>. No isolation of laboratory is required.</p> |
| − | <div id="runningchip">
| + | </div> |
| − | <div id="top-arrow"></div>
| + | <div class="block full"> |
| − | <div id=" runningchip- back"></div> | + | <h3 style="text-align: left;"><span style="color: #e90000;">BSL-2:</span> a basic laboratory with a biosafety level 2 </h3> |
| − | </div>
| + | <p>This laboratory is used for primary health services, diagnostic services and research. As a BSL-1 lab, you have to adopt GMT practices but also wear <b>protective clothing</b>. In this lab, you will see the biohazard sign. With a bench work, in this lab, you must have a class II BSC: biological safety cabinet, a protection against potential aerosols. No isolation of laboratory is required.</p> |
| − | </ul>
| + | </div> |
| − | </div>
| + | <div class="block full"> |
| − | </div>
| + | <h3 style="text-align: left;"><span style="color: #e90000;">BSL-3:</span> the containment laboratory with a biosafety level 3</h3> |
| − | <!-- END icons -->
| + | <p>This laboratory is used for special diagnostic services and research. You must wear special clothing. This lab is controlled for its access, and has a directional airflow. As BSL-2 lab, this lab requires a class III BSC and other primary devices for special activities. Thus, isolation of laboratory is required.</p> |
| − | </div>
| + | </div> |
| − | <!-- Begin navigation submenu -->
| + | <div class="block full"> |
| − | <div id="navtextwrapper"> <!-- only names of elements -->
| + | <h3 style="text-align: left;"><span style="color: #e90000;">BSL-4:</span> the maximum containment laboratory with a biosafety level 4</h3> |
| − | <div id="navtext">
| + | <p>This laboratory is a dangerous pathogen unit. In this lab, you have an airlock entry, a shower exit and special waste disposal. Safety equipment is composed of a class III BSC with a double ended autoclave. Moreover, the air is always filtered. Thus, isolation of laboratory is required.<br> |
| − | <ul id="project-sub">
| + | In this lab, you must pay attention to personnel safety monitoring capability: indeed, you must have a closed-circuit television and a two-way communication for example. </p> |
| − | <li class="chip_gap"><a href="https://2018.igem.org/Team:Pasteur_Paris/Project"></a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Description">Overview</a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Growing_Back_Nerves">Growing back nerves</a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Fighting">Fighting Infections</a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Model">Model</a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Membrane">Membrane</a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Kill">Kill Switch</a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Entrepreneurship">Entrepreneurship</a></li>
| + | |
| − | </ul>
| + | |
| − | <ul id="hp-sub">
| + | |
| − | <li class="chip_gap"><a href="https://2018.igem.org/Team:Pasteur_Paris/Human_Practices"> </a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/IntegratedHP">Integrated HP</a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Public_Engagement">Education & Engagement</a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Safety">Safety</a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Law">Law</a></li>
| + | |
| − | </ul>
| + | |
| − | <ul id="design-sub">
| + | |
| − | <li class="chip_gap"><a href="https://2018.igem.org/Team:Pasteur_Paris/Applied_design"></a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Context">Context</a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Device">Device</a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Technicals">Technicals</a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Scenario">User scenario</a></li>
| + | |
| − | </ul>
| + | |
| − | <ul id="parts-sub">
| + | |
| − | <li class="chip_gap"><a href="https://2018.igem.org/Team:Pasteur_Paris/"></a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Composite_Part">Composite Part</a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Improve">Improve</a></li>
| + | |
| − | </ul>
| + | |
| − | <ul id="labwork-sub">
| + | |
| − | <li class="chip_gap"><a href="https://2018.igem.org/Team:Pasteur_Paris/labwork"></a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Notebook">Notebook</a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Experiments">Protocols</a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Results">Results</a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Demonstrate">Demonstrate</a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/InterLab">InterLab</a></li>
| + | |
| − | </ul>
| + | |
| − | <ul id="achievements-sub">
| + | |
| − | <li class="chip_gap"><a href="https://2018.igem.org/Team:Pasteur_Paris/Achievements"></a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Medals">Medals</a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Awards">Awards</a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Collaborations">Collaboration</a></li>
| + | |
| − | </ul>
| + | |
| − | <ul id="aboutus-sub">
| + | |
| − | <li class="chip_gap"><a href="https://2018.igem.org/Team:Pasteur_Paris/Team"></a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Team">Team Members</a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Attributions">Attributions</a></li>
| + | |
| − | <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Sponsors">Sponsors</a></li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <!-- End of navigation submenu -->
| + | |
| − | </div> | + | |
| − | <!-- END: normal Menubar -->
| + | |
| − | <!-- BEGIN: Mobile Navigation Menu -->
| + | |
| − | <div class="clearfix" id="smallnav"> | + | |
| − | <ul class="clearfix"> | + | |
| − | <li id="home_small"><a href="https://2018.igem.org/Team:Pasteur_Paris">Home</a></li>
| + | |
| − | <li id="project_small"><a href="https://2018.igem.org/Team:Pasteur_Paris/Project">Project</a></li>
| + | |
| − | <li id="hp_small"><a href="https://2018.igem.org/Team:Pasteur_Paris/Human_Practices">HP</a></li>
| + | |
| − | <li id="design_small"><a href="https://2018.igem.org/Team:Pasteur_Paris/Applied_Design">Design</a></li>
| + | |
| − | <li id="parts_small"><a href="https://2018.igem.org/Team:Pasteur_Paris/Parts">Parts</a></li>
| + | |
| − | <li id="labwork_small"><a href="https://2018.igem.org/Team:Pasteur_Paris/Labwork">Labwork</a></li>
| + | |
| − | <li id="achievements_small"><a href="https://2018.igem.org/Team:Pasteur_Paris/Achievements">Achievements</a></li>
| + | |
| − | <li id="aboutus_small"><a href="https://2018.igem.org/Team:Pasteur_Paris/AboutUs">About us</a></li>
| + | |
| − | </ul>
| + | |
| − | <a href="#" id="pull">Menu</a>
| + | |
| | </div> | | </div> |
| − | <!-- END: Mobile Navigation Menu -->
| + | <div class="block separator-mark"></div> |
| − | </body>
| + | <div class="block title" id="References"> |
| − | <!-- Menu Bar code inspired from Freiburg 2015 : https://2015.igem.org/Team:Freiburg -->
| + | <h1>REFERENCES</h1> |
| | + | </div> |
| | + | <div class=" block full"> |
| | + | <p style="text-align: left;"><a href="http://www.who.int/csr/resources/publications/biosafety/Biosafety7.pdf">World Health Organization "Laboratory Biosafety Manual. Third Edition.", Geneva (2004)</a></p> |
| | + | </div> |
| | + | </div> |
| | + | </div> |
| | </html> | | </html> |
