Difference between revisions of "Template:Toulouse France/menu"

Line 1: Line 1:
−
{{Template:Toulouse_France/fontsome}}
+
{{Toulouse_France}}
  
 
<html>
 
<html>
  
−
 
+
<head>
−
+
<title>iGEM Toulouse 2016</title>
−
<style>
+
<meta charset="utf-8">
−
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
−
@charset "utf-8
+
 
 
−
/* Framework
+
<!-- pour avoir logo dans onglet -->
−
--------------------------------------------------------------------------------------------------------------- */
+
<link rel="icon" href="https://static.igem.org/mediawiki/2016/1/19/Toulouse_France_logo2.png" type="image/jpg" style="width:100%;"/>
−
/* ------------------------------------------------------------------------------------------------------------ */
+
  
−
*, *::before, *::after{box-sizing:border-box;}
+
</head>
−
 
+
−
.bold{font-weight:bold;}
+
−
.center{text-align:center;}
+
−
.right{text-align:right;}
+
−
.uppercase{text-transform:uppercase;}
+
−
.capitalise{text-transform:capitalize;}
+
−
.hidden{display:none;}
+
−
.nospace{margin:10px; padding:10px; list-style:none;}
+
−
.block{display:block;}
+
−
.inline *{display:inline-block;}
+
−
.inline *:last-child{margin-right:0;}
+
−
.pushright li{margin-right:20px;}
+
−
.pushright li:last-child{margin-right:0;}
+
−
.borderedbox{border:1px solid;}
+
−
.overlay{position:relative; z-index:1;}
+
−
.overlay::after{display:block; position:absolute; top:0; left:0; width:100%; height:100%; content:""; z-index:-1;}
+
−
.bgded{background-position:top center; background-repeat:no-repeat; background-size:cover;}
+
−
.bgded2{background-position:top center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;}
+
−
.page{background-position:top center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;}
+
−
.circle{border-radius:50%; background-clip:padding-box;}
+
−
 
+
−
.btn{display:inline-block; padding:10px 20px 12px; text-transform:uppercase; border:1px solid;}
+
−
 
+
−
blockquote{display:block; position:relative; width:100%; margin:0; padding:30px; line-height:1.4; z-index:1;}
+
−
blockquote::before{display:block; position:absolute; top:0; left:0; font-family:"FontAwesome"; font-size:60px; line-height:60px; content:""; z-index:-1;}
+
−
 
+
−
.clear, .group{display:block;}
+
−
.clear::before, .clear::after, .group::before, .group::after{display:table; content:"";}
+
−
.clear, .clear::after, .group, .group::after{clear:both;}
+
−
 
+
−
a{outline:none; text-decoration:none;}
+
−
 
+
−
.fl_left, .imgl{float:left;}
+
−
.fl_right, .imgr{float:right;}
+
−
 
+
−
img{width:auto; max-width:100%; height:auto; margin:0; padding:0; border:none; line-height:normal; vertical-align:middle;}
+
−
.imgl{margin:0 15px 10px 0; clear:left;}
+
−
.imgr{margin:0 0 10px 15px; clear:right;}
+
−
 
+
−
 
+
−
/* Fonts
+
−
--------------------------------------------------------------------------------------------------------------- */
+
−
body, input, textarea, select{font-family:Verdana, Geneva, sans-serif;}
+
−
h1, h2, h3, h4, h5, h6, .heading{font-family:Georgia, "Times New Roman", Times, serif;}
+
−
 
+
−
 
+
−
/* Forms
+
−
--------------------------------------------------------------------------------------------------------------- */
+
−
form, fieldset, legend{margin:0; padding:0; border:none;}
+
−
legend{display:none;}
+
−
label, input, textarea, select, button{display:block; resize:none; outline:none; color:inherit; font-size:inherit; font-family:inherit; vertical-align:middle;}
+
−
label{margin-bottom:5px;}
+
−
:required, :invalid{outline:none; box-shadow:none;}
+
−
 
+
−
 
+
−
/* Generalise
+
−
--------------------------------------------------------------------------------------------------------------- */
+
−
h1, h2, h3, h4, h5, h6, .heading{margin:0 0 20px 0; font-size:28px; line-height:normal; font-weight:normal; text-transform:capitalize;}
+
−
 
+
−
address{font-style:normal; font-weight:normal;}
+
−
hr{display:block; width:100%; height:1px; border:solid; border-width:1px 0 0 0;}
+
−
 
+
−
.font-xs{font-size:.8rem;}
+
−
.font-x1{font-size:1.2rem;}
+
−
.font-x2{font-size:1.8rem;}
+
−
.font-x3{font-size:2.8rem;}
+
−
 
+
−
 
+
−
+
−
/*
+
−
The "hoc" class is a generic class used to centre a containing element horizontally
+
−
It should be used in conjunction with a second class or ID
+
−
*/
+
−
.hoc{display:block; margin:0 auto;}
+
−
 
+
−
 
+
−
/* HTML 5 Overrides
+
−
--------------------------------------------------------------------------------------------------------------- */
+
−
address, article, aside, figcaption, figure, footer, header, main, nav, section{display:block; margin:0; padding:0;}
+
−
 
+
−
 
+
−
/* Grid
+
−
--------------------------------------------------------------------------------------------------------------- */
+
−
.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:inline-block; float:left; margin:0 0 0 3.06748466257669%; list-style:none;}
+
−
 
+
−
.first{margin-left:0; clear:left;}
+
−
 
+
−
.one_quarter{width:22.69938650306748%;}
+
−
.one_third{width:25%;}
+
−
.one_half, .two_quarter{width:48.46625766871166%;}
+
−
.two_third{width:65.6441717791411%;}
+
−
.three_quarter{width:74.23312883435584%;}
+
−
 
+
−
 
+
−
/* Spacing
+
−
--------------------------------------------------------------------------------------------------------------- */
+
−
.btmspace-10{margin-bottom:10px;}
+
−
.btmspace-15{margin-bottom:15px;}
+
−
.btmspace-30{margin-bottom:30px;}
+
−
.btmspace-50{margin-bottom:50px;}
+
−
.btmspace-80{margin-bottom:80px;}
+
−
 
+
−
.inspace-5{padding:5px;}
+
−
.inspace-10{padding:10px;}
+
−
.inspace-15{padding:15px;}
+
−
.inspace-30{padding:30px;}
+
−
.inspace-50{padding:50px;}
+
−
.inspace-80{padding:80px;}
+
−
+
 
 
−
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
/* ------------  CSS  ---------------------------------------------------------------------------------------- */
 
−
 
−
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
 
−
 
−
/* Top Bar
 
−
--------------------------------------------------------------------------------------------------------------- */
 
−
#topbar{padding:2px 15px; font-size:.9rem; text-transform:uppercase;}
 
−
#topbar *{margin:0;}
 
−
#topbar ul li{display:initial; margin-right:10px; padding-right:10px; border-right:1px solid;}
 
−
#topbar ul li:last-child{margin-right:10px; padding-right:10px; border-right:none;}
 
−
#topbar i{margin:0px 5px 0px 0px; line-height:normal;}
 
−
 
−
/* Top Bar Colour */
 
−
#topbar{color:#CBCBCB; background-color:#000000;}
 
−
#topbar ul li{border-color:rgba(255,255,255,.2);}
 
−
#topbar > div:last-of-type li:first-child a{color:#66CCCC;}
 
−
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
 
−
 
−
#navi{position:fixed; z-index:4}
 
−
 
−
/* Navigation
 
−
--------------------------------------------------------------------------------------------------------------- */
 
−
nav ul, nav ol{margin:0; padding:0; list-style:none;}
 
−
 
−
#mainav, nav{line-height:normal;}
 
−
 
−
/* Top Navigation */
 
−
#mainav{}
 
−
#mainav ul.clear{margin-top:0px;}
 
−
#mainav ul{text-transform:uppercase; font-size:16px;}
 
−
#mainav ul ul{z-index:9999; position:absolute; width:230px; text-transform:none;}
 
−
#mainav ul ul ul{left:180px; top:0;}
 
−
#mainav li{display:inline-block; position:relative; margin:0 8px 0 0; padding:0;}
 
−
#mainav li:last-child{margin-right:0;}
 
−
#mainav li li{width:100%; margin:0;}
 
−
#mainav li a{display:block; padding:15px auto;}
 
−
#mainav li li a{border:solid; border-width:0 0 1px 0;}
 
−
#mainav li li a, #mainav li li .drop{display:block; margin:0; padding:10px auto;}
 
−
#mainav li li .drop::after{top:15px; left:5px;}
 
−
#mainav ul ul{visibility:hidden; opacity:0;}
 
−
#mainav ul li:hover > ul{visibility:visible; opacity:1;}
 
−
 
−
#mainav form{display:none; margin:0; padding:0;}
 
−
#mainav form select, #mainav form select option{display:block; cursor:pointer; outline:none;}
 
−
#mainav form select{width:100%; padding:5px; border:none;}
 
−
#mainav form select option{margin:5px; padding:0; border:none;}
 
−
 
−
 
−
 
−
/* Navigation Colour */
 
−
#mainav{color:#FFFFFF; background-color:rgba(1,1,1,.5);}
 
−
#mainav li a{color:inherit;}
 
−
#mainav .active a, #mainav a:hover, #mainav li:hover > a{color:#66CCCC; background-color:inherit;}
 
−
#mainav li li a, #mainav .active li a{color:#FFFFFF; background-color:rgba(0,0,0,.7); border-color:rgba(0,0,0,.8);}
 
−
#mainav li li:hover > a, #mainav .active .active > a{color:#FFFFFF; background-color:#66CCCC;}
 
−
#mainav form select{color:#FFFFFF; background-color:#000000;}
 
−
 
−
 
−
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
 
−
/* Page Intro
 
−
--------------------------------------------------------------------------------------------------------------- */
 
−
#pageintro{padding:100px 0px 60px 0px;}
 
−
 
−
#pageintro article{max-width:100%;}
 
−
#pageintro article *{text-transform:uppercase;}
 
−
#pageintro article .heading{margin:0 0 50px 0; padding:0; line-height:1; font-size:32px;}
 
−
#pageintro article p{margin:0;}
 
−
#pageintro article h2{font-size:28px;}
 
−
#pageintro article p:first-of-type{margin-bottom:35px; font-size:32px; letter-spacing:5px;}
 
−
#pageintro article footer{margin-top:60px;}
 
−
 
−
/* Page Intro Colour
 
−
---------------------------------------------------------------------------------------------------------------*/
 
−
#pageintro{color:#FFFFFF;}
 
−
#pageintro article h2{color:#FFFFFF;}
 
−
 
−
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
 
−
/* Segments (3 segments) ne marche pas
 
−
---------------------------------------------------------------------------------------------------------------*/
 
−
#main article {border-style:solid; border-width: 10px; position:relative; margin-left:auto; margin-right:auto;}
 
−
#main article .heading2{margin:0; padding:0; line-height:1; font-size:22px; position:relative;}
 
−
 
−
 
−
 
−
 
−
 
−
/* Clients
 
−
---------------------------------------------------------------------------------------------------------------*/
 
−
.clients{}
 
−
.clients *{margin:0; padding:0;}
 
−
.clients ul li{display:block; float:left; width:12%; padding:0 5px; box-sizing:border-box;}
 
−
.clients ul li *{width:100%; opacity:.6;}
 
−
.clients ul li *:hover{opacity:1;}
 
−
 
−
 
−
 
−
 
−
/* Header
 
−
--------------------------------------------------------------------------------------------------------------- */
 
−
#header{align-content:center;}
 
−
 
−
#header #logo{margin-top:0px;}
 
−
#header #logo *{margin:0px; padding:0px; line-height:1px;}
 
−
#header #logo h1{font-size:16px; font-variant:small-caps;}
 
−
#header #logo p{font-size:14px; text-transform:lowercase;}
 
−
 
−
 
−
 
−
 
−
/* Content Area
 
−
--------------------------------------------------------------------------------------------------------------- */
 
−
.container{padding:0px 0;}
 
−
 
−
/* Content */
 
−
.container .content{}
 
−
 
−
.excerpt{display:inline-block; width:100%; max-width:320px; padding-bottom:10px;}
 
−
.excerpt img{}
 
−
.excerpt .excerpttxt{display:block; position:relative; max-width:90%; margin:-40px auto; padding:20px;}
 
−
.excerpt .heading{margin:0 0 5px 0;}
 
−
.excerpt .heading2{margin:0 0 5px 0;}
 
−
.excerpt p:last-of-type{margin:0; padding:0;}
 
−
 
−
 
−
 
−
/* Footer
 
−
--------------------------------------------------------------------------------------------------------------- */
 
−
#footer{padding:0px 0;}
 
−
 
−
#footer .title{margin:0 0 0 0; padding:0; font-size:1.2rem;}
 
−
 
−
#footer .linklist li{display:block; position:relative; margin-bottom:2px; padding:0 0 20px 0; border-bottom:1px solid; text-align:center;}
 
−
#footer .linklist li:last-child{margin:0; padding:0; border:none;}
 
−
#footer .linklist li::before, #footer .linklist li::after{display:table; content:"";}
 
−
#footer .linklist li, #footer .linklist li::after{clear:both;}
 
−
 
−
#footer .contact{}
 
−
#footer .contact.linklist li, #footer .contact.linklist li:last-child{position:relative; padding:0 0 20px 0; text-align:center;}
 
−
#footer .contact li *{margin:0; padding:0; line-height:1.6;}
 
−
#footer .contact li i{display:block; position:absolute; top:0; left:0; width:20px; font-size:14px; text-align:center;}
 
−
 
−
 
−
/* Copyright
 
−
--------------------------------------------------------------------------------------------------------------- */
 
−
#copyright{padding:7px 0;}
 
−
#copyright *{margin:0; padding:0;}
 
−
 
−
#copyright{color:#FFFFFF; background-color:rgba(0,0,0,.5); text-align:center;}
 
−
#copyright a{color:inherit;}
 
 
 
−
 
+
<body id="top">
−
 
+
−
/* Transition Fade
+
−
--------------------------------------------------------------------------------------------------------------- */
+
−
*, *::before, *::after{transition:all .3s ease-in-out;}
+
−
#mainav form *{transition:none;!important}
+
−
 
+
 
 
−
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
/* ------------------------------------------------------------------------------------------------------------ */
 
−
 
−
 
−
/* Colours
 
−
--------------------------------------------------------------------------------------------------------------- */
 
−
body{color:#CBCBCB; background-color: #000000;}
 
−
a{color:#000000;}
 
−
a:active, a:focus{background:transparent;}/* IE10 + 11 Bugfix - prevents grey background */
 
−
hr, .borderedbox{border-color:#D7D7D7;}
 
−
label span{color:#FF0000; background-color:inherit;}
 
−
input:focus, textarea:focus, *:required:focus{border-color:#66CCCC;}
 
−
.overlay{color:#FFFFFF; background-color:inherit;}
 
−
.overlay::after{color:inherit; background-color:rgba(0,0,0,.4);}
 
−
 
−
.inherit{color:inherit;}
 
−
 
−
.btn, .btn.inverse:hover{color:#FFFFFF; background-color:#66CCCC; border-color:#66CCCC;}
 
−
.btn:hover, .btn.inverse{color:inherit; background-color:transparent; border-color:inherit;}
 
−
 
−
blockquote::before{color:rgba(255,255,255,.5);}
 
−
 
−
 
−
 
−
 
−
 
−
/* Sonsor */
 
−
.sponsor{margin:20px 0px 10px 0px;}
 
−
.sponsor, .sponsor a{color:#FFFFFF; background-color:#FFFFFF;}
 
−
 
−
 
−
/* Header */
 
−
#header #logo h1 a{color:inherit;}
 
−
 
−
 
−
/* Content Area */
 
−
.excerpt .excerpttxt{color:inherit; background-color:#FFFFFF;}
 
−
 
−
 
−
/* Footer */
 
−
#footer .title{color:#FFFFFF;}
 
−
#footer .linklist li{border-color:rgba(255,255,255,.4);}  /* couleur des barres séparatrices */
 
−
#footer .footertxt{background-color:rgba(255,255,255,.3);}
 
  
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<!-- ########################  BLACK BAR ###################################################### -->
 
 
−
 
+
<div id="navi">
−
/* back to top */
+
 
 
−
.anchor {
+
<div id="topbar" class="hoc clear">
−
height: 30px;
+
<p>Follow us  &#64;            
−
position: fixed;
+
<a href="https://www.facebook.com/pages/iGEM-Toulouse-2015/1604834019761538?ref=aymt_homepage_panel"><img src="https://static.igem.org/mediawiki/2016/3/3a/Toulouse_France_fb.png" style="width:2%;"/></a>
−
bottom: 20px;
+
<a href="https://twitter.com/igem_toulousefr"><img src="https://static.igem.org/mediawiki/2016/6/6a/Toulouse_France_twitter2.png" style="width:2%;"/></a>
−
right: 30px;
+
<a href="https://fr.ulule.com/paleobtilis/"><img src="https://static.igem.org/mediawiki/2016/4/46/Toulouse_France_Ulule_logo.png" style="width:3%; background-color:rgba(255,255,255,0.3);"/></a>
−
z-index: 1000;
+
</p>
−
cursor: pointer;
+
</div>
−
-webkit-transition: all ease 0.4s;
+
−
-moz-transition: all ease 0.4s;
+
−
-ms-transition: all ease 0.4s;
+
−
-o-transition: all ease 0.4s;
+
−
transition: all ease 0.4s;
+
−
}
+
−
 
+
−
 
+
−
+
−
/* Social Icons
+
−
---------------------------------------------------------------------------------------------------------------*/
+
−
.faico{margin:0px; padding:0; list-style:none;}
+
−
.faico li{display:inline-block; margin:0 2px 0 0; padding:0; line-height:10px;}
+
−
.faico li:last-child{margin-right:0;}
+
−
.faico a{display:inline-block; width:auto; height:auto; line-height:20px; border-radius:5px; font-size:16px; text-align:center;}
+
−
.faico img{width: 2%;}
+
−
+
−
.faico a{color:inherit; }
+
−
.faico a:hover{color:#FFFFFF;}
+
−
+
−
.faico2{margin:0px; padding:0; list-style:none;}
+
−
.faico2 li{display:inline-block; margin:0 2px 0 0; padding:0; line-height:10px;}
+
−
.faico2 li:last-child{margin-right:0;}
+
−
.faico2 a{display:inline-block; width:auto; height:auto; line-height:20px; border-radius:5px; font-size:16px; text-align:center;}
+
−
.faico2 img{width: 20%; margin:15px;}
+
−
+
−
.faico2 a{color:inherit; }
+
−
.faico2 a:hover{color:#FFFFFF;}
+
−
+
−
+
−
+
−
+
−
+
−
+
−
/* ------------------------------------------------------------------------------------------------------------ */
+
−
/* ------------------------------------------------------------------------------------------------------------ */
+
−
/* ------------------------------------------------------------------------------------------------------------ */
+
−
/* ------------------------------------------------------------------------------------------------------------ */
+
−
/* ------------------------------------------------------------------------------------------------------------ */
+
−
+
−
+
−
/* index bordereau */
+
−
+
−
/* ------------------------------------ gallerie ----*/
+
−
 
+
−
.gallerie-project{
+
−
margin: 5% 15%;
+
−
padding: 0px;
+
−
margin-top:40px;
+
−
margin-bottom:40px;
+
−
}
+
−
 
+
−
.line-gallerie-project{
+
−
background-color:#f0f0f0;
+
−
height:310px;
+
−
width:100%;
+
−
padding: 2px 0px;
+
−
}
+
−
 
+
−
.part-little-projet{
+
−
background-color:#a59999;
+
−
display: block;
+
−
position: relative;
+
−
height:310px;
+
−
width: 30%;
+
−
float:left;
+
−
}
+
−
 
+
−
.part-little-projet:hover{
+
−
background-color:#400000;
+
−
}
+
−
 
+
−
.title-part-projet{
+
−
position: absolute;
+
−
top:40px;
+
−
left:33px;
+
−
font-size:24px;
+
−
color:white;
+
−
}
+
−
 
+
−
.part-large-projet{
+
−
display: block;
+
−
position: relative;
+
−
height:310px;
+
−
width: 70%;
+
−
float:left;
+
−
opacity:0.9;
+
−
}
+
−
 
+
−
.part-large-projet:hover{
+
−
opacity:1;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
/* Human Practice */  
+
−
+
−
 
+
−
 
+
−
/* Subpanels */
+
−
.narrowimg {/* Subpanels background*/
+
−
/*position:absolute;*/
+
−
z-index:2;
+
−
opacity:0.3;
+
−
filter: alpha(opacity=30);
+
−
}
+
−
.titlebox {/* Subpanels Title*/
+
−
z-index:1;
+
−
position:relative;
+
−
bottom:480px;
+
−
background:transparent;
+
−
}
+
−
/* Project Panels*/
+
−
.subpanel1 { /* Overview */
+
−
float:left;
+
−
width:45%;
+
−
height:800px;
+
−
margin: 20px 50px 30px 20px;
+
−
border-radius:7px;
+
−
background:rgb(252,250,229);
+
−
}
+
−
.spdesc { /* Overview content */
+
−
display:none;
+
−
height:100px;
+
−
color:rgb(30,39,43);
+
−
}
+
−
.cont { /* Overview content */
+
−
width:90%;
+
−
height:auto;
+
−
margin-left:5%;
+
−
margin-top:5%;
+
−
background:transparent;
+
−
}
+
−
.cont p {
+
−
line-height:28px;
+
−
width:auto;
+
−
height:auto;
+
−
margin:5% 2%;
+
−
}
+
−
.subpanel2 { /* Projects */
+
−
float:left;
+
−
width:12%;
+
−
height:800px;
+
−
font-size:22px;
+
−
text-align:center;
+
−
margin: 20px 0px 30px 15px;
+
−
border-radius:7px;
+
−
overflow:hidden;
+
−
}
+
−
.subpanel2:hover{
+
−
font-weight:bold;
+
−
}
+
−
.subpanel2:hover .narrowimg {
+
−
opacity:0.8;
+
−
filter: alpha(opacity=80);
+
−
}
+
−
.subpanel3 { /* Results */
+
−
float:left;
+
−
width:45%;
+
−
height:50px;
+
−
font-size:30px;
+
−
text-align:left;
+
−
line-height:50px;
+
−
background:rgb(30,39,43);
+
−
color:white;
+
−
border-radius:7px;
+
−
position:relative;
+
−
margin: 20px 50px 30px 20px;
+
−
bottom:50px;
+
−
font-family: 'Great Vibes', cursive;
+
−
font-size: 35px;
+
−
}
+
−
/* Human Practice */
+
−
.subpanel4 { /* divide page in 3 */
+
−
float:left;
+
−
width:354px;
+
−
height:492px;
+
−
font-size:22px;
+
−
margin-top:0;
+
−
margin-right:18px;
+
−
}
+
−
.subpanel5 { /* TB Facts, TB in France, TB Gallery */
+
−
height:156px;
+
−
text-align:center;
+
−
margin-bottom:11px;
+
−
background:rgb(255,255,255);
+
−
color:black;
+
−
border-radius:7px;
+
−
overflow:hidden;
+
−
}
+
−
.subpanel5:hover{
+
−
font-weight:bold;
+
−
}
+
−
.subpanel5:hover .narrowimg {
+
−
opacity:0.8;
+
−
filter: alpha(opacity=80);
+
−
}
+
−
.subpanel7 { /* Gender */
+
−
float:left;
+
−
width:354px;
+
−
height:283px;
+
−
font-size:22px;
+
−
background:rgb(255,255,255);
+
−
color:black;
+
−
border-radius:7px;
+
−
overflow:hidden;
+
−
text-align:center;
+
−
}
+
−
.subpanel7:hover{
+
−
font-weight:bold;
+
−
}
+
−
.subpanel7:hover .narrowimg {
+
−
opacity:0.8;
+
−
filter: alpha(opacity=80);
+
−
}
+
−
.subpanel9 { /* Tech Transfer */
+
−
float:left;
+
−
width:354px;
+
−
height: 198px;
+
−
font-size:22px;
+
−
background:rgb(255,255,255);
+
−
color:black;
+
−
border-radius:7px;
+
−
overflow:hidden;
+
−
text-align:center;
+
−
margin-top:11px;
+
−
}
+
−
.subpanel9:hover .narrowimg {
+
−
opacity:0.8;
+
−
filter: alpha(opacity=80);
+
−
}
+
−
.subpanel9:hover{
+
−
font-weight:bold;
+
−
}
+
−
.subpanel6 { /* Collaboration, SensiGEM */
+
−
height:240.5px;
+
−
margin:0;
+
−
margin-bottom:11px;
+
−
border-radius:7px;
+
−
overflow:hidden;
+
−
background:rgb(255,255,255);
+
−
color:Black;
+
−
text-align:center;
+
−
}
+
−
.subpanel6:hover{
+
−
font-weight:bold;
+
−
}
+
−
.subpanel6:hover .narrowimg {
+
−
opacity:0.8;
+
−
filter: alpha(opacity=80);
+
−
}
+
−
/* Panels at the bottom */
+
−
.subpanel8 {
+
−
float:left;
+
−
height:96px;
+
−
width:261.5px;
+
−
margin-right:18px;
+
−
border-radius:7px;
+
−
overflow:hidden;
+
−
background:rgb(30,39,43);
+
−
color:white;
+
−
}
+
−
.subpanel8 img {
+
−
margin-top:16px;
+
−
background:white;
+
−
}
+
−
.subpanel8 img:hover {
+
−
background:rgb(252,250,229);
+
−
}
+
−
+
−
+
−
+
−
+
−
+
−
/* results */
+
−
+
−
#timeline .timeline-item:after,#timeline .timeline-item:before {
+
−
content: '';
+
−
display: block;
+
−
width: 100%;
+
−
clear: both;
+
−
}
+
−
.containerA {
+
−
max-width: 1100px;
+
−
margin: 0 auto;
+
−
}
+
−
.containerA h1{
+
−
width:18%;
+
−
margin:15px auto 10px;
+
−
padding: 15px 0 15px 0;
+
−
text-align: center;
+
−
font-size: 50px;
+
−
color:#fff;
+
−
}
+
−
 
+
−
#timeline {
+
−
width: 90%;
+
−
margin: 30px auto;
+
−
position: relative;
+
−
-webkit-transition: all 0.4s ease;
+
−
-moz-transition: all 0.4s ease;
+
−
-ms-transition: all 0.4s ease;
+
−
transition: all 0.4s ease;
+
−
}
+
−
#timeline:before {
+
−
content: "";
+
−
width: 3px;
+
−
height: 100%;
+
−
background: #ffffff;
+
−
left: 50%;
+
−
top: 0;
+
−
position: absolute;
+
−
}
+
−
#timeline:after {
+
−
content: "";
+
−
clear: both;
+
−
display: table;
+
−
width: 100%}
+
−
#timeline .timeline-item {
+
−
margin-bottom: 50px;
+
−
position: relative;
+
−
}
+
−
#timeline .timeline-item .timeline-icon {
+
−
background:rgba(20,10,11,0.75);
+
−
width: 50px;
+
−
height: 50px;
+
−
position: absolute;
+
−
top: 0;
+
−
left: 50%;
+
−
overflow: hidden;
+
−
margin-left: -23px;
+
−
-webkit-border-radius: 50%;
+
−
-moz-border-radius: 50%;
+
−
-ms-border-radius: 50%;
+
−
border-radius: 50%}
+
−
 
+
−
#timeline .timeline-item .timeline-content {
+
−
width: 35%;
+
−
background: #fff;
+
−
padding: 20px;
+
−
-webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
+
−
-moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
+
−
-ms-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
+
−
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
+
−
-webkit-border-radius: 5px;
+
−
-moz-border-radius: 5px;
+
−
-ms-border-radius: 5px;
+
−
border-radius: 5px;
+
−
-webkit-transition: all 0.3s ease;
+
−
-moz-transition: all 0.3s ease;
+
−
-ms-transition: all 0.3s ease;
+
−
transition: all 0.3s ease;
+
−
}
+
−
#timeline .timeline-item .timeline-content h2 {
+
−
padding: 15px;
+
−
background:rgba(20,10,11,1);
+
−
color: #fff;
+
−
margin: -20px -20px 0 -20px;
+
−
font-weight: 600;
+
−
-webkit-border-radius: 3px 3px 0 0;
+
−
-moz-border-radius: 3px 3px 0 0;
+
−
-ms-border-radius: 3px 3px 0 0;
+
−
border-radius: 3px 3px 0 0;
+
−
}
+
−
#timeline .timeline-item .timeline-content p {
+
−
font-size:18px;
+
−
font-family:"Lucida Bright", "DejaVu Serif", Georgia, serif;
+
−
line-height:1.2em;
+
−
padding:8px 0px;
+
−
}
+
−
 
+
−
#timeline .timeline-item .timeline-content:before {
+
−
content: '';
+
−
position: absolute;
+
−
left: 45%;
+
−
top: 20px;
+
−
width: 0;
+
−
height: 0;
+
−
border-top: 7px solid transparent;
+
−
border-bottom: 7px solid transparent;
+
−
border-left: 7px solid rgba(153,80,84,1.00);
+
−
}
+
−
#timeline .timeline-item .timeline-content.right {
+
−
float: right;
+
−
}
+
−
#timeline .timeline-item .timeline-content.right:before {
+
−
content: '';
+
−
right: 45%;
+
−
left: inherit;
+
−
border-left: 0;
+
−
border-right: 7px solid rgba(153,80,84,1.00);
+
−
}
+
−
+
−
@media screen and (max-width: 768px) {
+
−
#timeline {
+
−
margin: 30px;
+
−
padding: 0;
+
−
} 
+
−
#timeline:before {
+
−
left: 0;
+
−
}
+
−
#timeline .timeline-item .timeline-content {
+
−
width: 90%;
+
−
float: right;
+
−
}
+
−
#timeline .timeline-item .timeline-content:before, #timeline .timeline-item .timeline-content.right:before {
+
−
left: 10%;
+
−
margin-left: -6px;
+
−
border-left: 0;
+
−
border-right: 7px solid #ee4d4d;
+
−
}
+
−
#timeline .timeline-item .timeline-icon {
+
−
left: 0;
+
−
}
+
−
}
+
−
.timeline-content p{
+
−
color:rgba(114,111,119,1.00);
+
−
}
+
−
+
−
+
−
.la-ball-atom,
+
−
.la-ball-atom > div {
+
−
position: relative;
+
−
-webkit-box-sizing: border-box;
+
−
  -moz-box-sizing: border-box;
+
−
box-sizing: border-box;
+
−
}
+
−
.la-ball-atom {
+
−
display: block;
+
−
font-size: 0;
+
−
color: #fff;
+
−
}
+
−
.la-ball-atom > div {
+
−
display: inline-block;
+
−
float: none;
+
−
background-color: currentColor;
+
−
border: 0 solid currentColor;
+
−
}
+
−
.la-ball-atom {
+
−
position: absolute;
+
−
top:9px;
+
−
left:9px;
+
−
width: 32px;
+
−
height: 32px;
+
−
}
+
−
.la-ball-atom > div:nth-child(1) {
+
−
position: absolute;
+
−
top: 50%;
+
−
left: 50%;
+
−
z-index: 1;
+
−
width: 60%;
+
−
height: 60%;
+
−
background: #aaa;
+
−
border-radius: 100%;
+
−
-webkit-transform: translate(-50%, -50%);
+
−
  -moz-transform: translate(-50%, -50%);
+
−
-ms-transform: translate(-50%, -50%);
+
−
-o-transform: translate(-50%, -50%);
+
−
transform: translate(-50%, -50%);
+
−
-webkit-animation: ball-atom-shrink 4.5s infinite linear;
+
−
  -moz-animation: ball-atom-shrink 4.5s infinite linear;
+
−
-o-animation: ball-atom-shrink 4.5s infinite linear;
+
−
animation: ball-atom-shrink 4.5s infinite linear;
+
−
}
+
−
.la-ball-atom > div:not(:nth-child(1)) {
+
−
position: absolute;
+
−
left: 0;
+
−
z-index: 0;
+
−
width: 100%;
+
−
height: 100%;
+
−
background: none;
+
−
-webkit-animation: ball-atom-zindex 1.5s 0s infinite steps(2, end);
+
−
  -moz-animation: ball-atom-zindex 1.5s 0s infinite steps(2, end);
+
−
-o-animation: ball-atom-zindex 1.5s 0s infinite steps(2, end);
+
−
animation: ball-atom-zindex 1.5s 0s infinite steps(2, end);
+
−
}
+
−
.la-ball-atom > div:not(:nth-child(1)):before {
+
−
position: absolute;
+
−
top: 0;
+
−
left: 0;
+
−
width: 10px;
+
−
height: 10px;
+
−
margin-top: -5px;
+
−
margin-left: -5px;
+
−
content: "";
+
−
background: currentColor;
+
−
border-radius: 50%;
+
−
opacity: .75;
+
−
-webkit-animation: ball-atom-position 1.5s 0s infinite ease, ball-atom-size 1.5s 0s infinite ease;
+
−
  -moz-animation: ball-atom-position 1.5s 0s infinite ease, ball-atom-size 1.5s 0s infinite ease;
+
−
-o-animation: ball-atom-position 1.5s 0s infinite ease, ball-atom-size 1.5s 0s infinite ease;
+
−
animation: ball-atom-position 1.5s 0s infinite ease, ball-atom-size 1.5s 0s infinite ease;
+
−
}
+
−
.la-ball-atom > div:nth-child(2) {
+
−
-webkit-animation-delay: .75s;
+
−
  -moz-animation-delay: .75s;
+
−
-o-animation-delay: .75s;
+
−
animation-delay: .75s;
+
−
}
+
−
.la-ball-atom > div:nth-child(2):before {
+
−
-webkit-animation-delay: 0s, -1.125s;
+
−
  -moz-animation-delay: 0s, -1.125s;
+
−
-o-animation-delay: 0s, -1.125s;
+
−
animation-delay: 0s, -1.125s;
+
−
}
+
−
.la-ball-atom > div:nth-child(3) {
+
−
-webkit-transform: rotate(120deg);
+
−
  -moz-transform: rotate(120deg);
+
−
-ms-transform: rotate(120deg);
+
−
-o-transform: rotate(120deg);
+
−
transform: rotate(120deg);
+
−
-webkit-animation-delay: -.25s;
+
−
  -moz-animation-delay: -.25s;
+
−
-o-animation-delay: -.25s;
+
−
animation-delay: -.25s;
+
−
}
+
−
.la-ball-atom > div:nth-child(3):before {
+
−
-webkit-animation-delay: -1s, -.75s;
+
−
  -moz-animation-delay: -1s, -.75s;
+
−
-o-animation-delay: -1s, -.75s;
+
−
animation-delay: -1s, -.75s;
+
−
}
+
−
.la-ball-atom > div:nth-child(4) {
+
−
-webkit-transform: rotate(240deg);
+
−
  -moz-transform: rotate(240deg);
+
−
-ms-transform: rotate(240deg);
+
−
-o-transform: rotate(240deg);
+
−
transform: rotate(240deg);
+
−
-webkit-animation-delay: .25s;
+
−
  -moz-animation-delay: .25s;
+
−
-o-animation-delay: .25s;
+
−
animation-delay: .25s;
+
−
}
+
−
.la-ball-atom > div:nth-child(4):before {
+
−
-webkit-animation-delay: -.5s, -.125s;
+
−
  -moz-animation-delay: -.5s, -.125s;
+
−
-o-animation-delay: -.5s, -.125s;
+
−
animation-delay: -.5s, -.125s;
+
−
}
+
−
 
+
−
/*
+
−
* Animations
+
−
*/
+
−
@-webkit-keyframes ball-atom-position {
+
−
50% {
+
−
top: 100%;
+
−
left: 100%;
+
−
}
+
−
}
+
−
@-moz-keyframes ball-atom-position {
+
−
50% {
+
−
top: 100%;
+
−
left: 100%;
+
−
}
+
−
}
+
−
@-o-keyframes ball-atom-position {
+
−
50% {
+
−
top: 100%;
+
−
left: 100%;
+
−
}
+
−
}
+
−
@keyframes ball-atom-position {
+
−
50% {
+
−
top: 100%;
+
−
left: 100%;
+
−
}
+
−
}
+
−
@-webkit-keyframes ball-atom-size {
+
−
50% {
+
−
-webkit-transform: scale(.5, .5);
+
−
transform: scale(.5, .5);
+
−
}
+
−
}
+
−
@-moz-keyframes ball-atom-size {
+
−
50% {
+
−
-moz-transform: scale(.5, .5);
+
−
transform: scale(.5, .5);
+
−
}
+
−
}
+
−
@-o-keyframes ball-atom-size {
+
−
50% {
+
−
-o-transform: scale(.5, .5);
+
−
  transform: scale(.5, .5);
+
−
}
+
−
}
+
−
@keyframes ball-atom-size {
+
−
50% {
+
−
-webkit-transform: scale(.5, .5);
+
−
  -moz-transform: scale(.5, .5);
+
−
-o-transform: scale(.5, .5);
+
−
transform: scale(.5, .5);
+
−
}
+
−
}
+
−
@-webkit-keyframes ball-atom-zindex {
+
−
50% {
+
−
z-index: 10;
+
−
}
+
−
}
+
−
@-moz-keyframes ball-atom-zindex {
+
−
50% {
+
−
z-index: 10;
+
−
}
+
−
}
+
−
@-o-keyframes ball-atom-zindex {
+
−
50% {
+
−
z-index: 10;
+
−
}
+
−
}
+
−
@keyframes ball-atom-zindex {
+
−
50% {
+
−
z-index: 10;
+
−
}
+
−
}
+
−
@-webkit-keyframes ball-atom-shrink {
+
−
50% {
+
−
-webkit-transform: translate(-50%, -50%) scale(.8, .8);
+
−
transform: translate(-50%, -50%) scale(.8, .8);
+
−
}
+
−
}
+
−
@-moz-keyframes ball-atom-shrink {
+
−
50% {
+
−
-moz-transform: translate(-50%, -50%) scale(.8, .8);
+
−
transform: translate(-50%, -50%) scale(.8, .8);
+
−
}
+
−
}
+
−
@-o-keyframes ball-atom-shrink {
+
−
50% {
+
−
-o-transform: translate(-50%, -50%) scale(.8, .8);
+
−
  transform: translate(-50%, -50%) scale(.8, .8);
+
−
}
+
−
}
+
−
@keyframes ball-atom-shrink {
+
−
50% {
+
−
-webkit-transform: translate(-50%, -50%) scale(.8, .8);
+
−
  -moz-transform: translate(-50%, -50%) scale(.8, .8);
+
−
-o-transform: translate(-50%, -50%) scale(.8, .8);
+
−
transform: translate(-50%, -50%) scale(.8, .8);
+
−
}
+
−
}
+
−
 
+
−
+
−
/* safety */
+
−
+
−
 
+
−
.title1{color:#870721; font-family:'Open Sans'; font-weight:600; font-size:24px;  margin:0 0 33px 0; border:none;}
+
−
 
+
−
.title2{color:#5a6060; font-family:'Open Sans'; font-weight:600; font-size:18px; margin:0 0 30px 0; border:none;}
+
−
 
+
−
.title3{color:#7f8c8c; font-family:'Open Sans'; font-weight:400; font-size:16px; margin:0 0 20px 0; border:none;}
+
−
 
+
−
.title4{color:#5a6060; font-family:'Open Sans'; font-weight:700; font-size:15px; margin:0 0 20px 0; border:none;}
+
−
 
+
−
.texte{color:#5a6060; font-family:'Open Sans'; font-size:14px; margin:0 0 50px 0; line-height:24px; text-align:justify;}
+
−
 
+
−
.citation{color:#5a6060; font-family:'Open Sans'; font-size:18px; margin:0 0 50px 0; line-height:24px; font-style: italic; text-align: center;}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
.Title{
+
−
text-shadow: 1px 3px 3px rgba(70, 156, 133, 0.75);
+
−
color: #2CC23E;
+
−
font-size: 50px;
+
−
text-align: center;
+
−
}
+
−
 
+
−
.Sub_title{
+
−
color: #2CC23E;
+
−
font-size: 30px;
+
−
}
+
−
 
+
−
.Article {
+
−
text-align: justify;
+
−
text-indent:15px;
+
−
}
+
−
 
+
−
a.Link {
+
−
font-size:10pt;
+
−
color :#A4A4A4;
+
−
text-decoration:none;
+
−
}
+
−
 
+
−
a.Link:hover{
+
−
text-decoration:underline;
+
−
}
+
 
 
−
/*Overview*/
 
−
.CropImg{
 
−
position : absolute;
 
−
width: 700px;
 
−
left :50%;
 
−
margin-left:-350px;
 
−
height: auto;       
 
−
overflow: hidden;
 
−
display :block;
 
−
 
−
}
 
−
 
−
table {
 
−
display: table;
 
−
border-collapse: separate;
 
−
border-spacing: 2px;
 
−
border-color: gray;
 
−
}
 
−
 
−
table[Attributes Style] {
 
−
border-top-width: 1px;
 
−
border-right-width: 1px;
 
−
border-bottom-width: 1px;
 
−
border-left-width: 1px;
 
−
width: 100%;
 
−
height: 20%;
 
−
}
 
−
 
−
#column-left{
 
−
float:left;
 
−
width: 190px;
 
−
float: left;
 
−
padding: 15px 10px 15px 15px;
 
−
border: 1px solid #ccc;
 
−
border-radius: 5px;
 
−
background-color: #eee;
 
−
}
 
−
 
−
.fixNavigation{
 
−
z-index: 9999;
 
−
position: fixed;
 
−
top:15px;
 
−
width:240px;
 
−
}
 
−
 
−
ul.menuleft {
 
−
padding-left:10px;
 
−
}
 
−
 
−
 
−
ul.menuleft li {
 
−
padding-bottom: 10px;
 
−
}
 
−
 
−
ul.menuleft li a{
 
−
color:#5a6060;
 
−
font-family:'Open Sans';
 
−
font-size:14px;
 
−
margin:0 0 0 0;
 
−
line-height:24px;
 
−
}
 
−
 
−
 
−
 
 
 
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<!-- #############################  NAVIGATEUR + PORTION EN DESSOUS  ################################################# -->
 
 
−
/* notebook */
 
 
 
−
+
<header id="header" class="hoc clear">  
−
.sec_title{
+
<!-- POURQUOI ICI ? MathJax is a JavaScript library for displaying mathematical equations. A copy of MathJax 2.5 is installed on 2015.igem.org -->
−
width:100%;
+
<script src="https://2015.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
−
height:100px;
+
−
line-height:100px;
+
−
text-align:center;
+
−
background-color:#3A3A3A;
+
−
color:#efefef;
+
−
font-size:42px;
+
−
}
+
−
+
−
.sec_title_trans{
+
−
width:100%;
+
−
height:100px;
+
−
line-height:100px;
+
−
text-align:center;
+
−
background-color:rgba(1,1,1,0.5);
+
−
color:#efefef;
+
−
font-size:42px;
+
−
}
+
−
 
+
−
 
+
−
#notebook_2{
+
−
position:relative;
+
−
width:1100px;
+
−
height:230px;
+
−
margin:0 auto;
+
−
}
+
−
 
+
−
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
+
−
*html .clearfix {zoom:1;}
+
−
*+html .clearfix {zoom:1;}
+
−
 
+
−
.course_nr{height:162px; background:url(https://static.igem.org/mediawiki/2016/c/c7/Toulouse_France_notebookPoint.gif) repeat-x center;}
+
−
.course_nr li{ float:left; background:url(https://static.igem.org/mediawiki/2016/e/ee/Toulouse_France_rondNotebook.png) no-repeat center top; padding-top:30px; width:84px; text-align:center; position:relative; margin-top:69px;}
+
−
.shiji{ position:absolute; width:100%; left:0px; top:-14px; display:none;}
+
−
.shiji{ height:67px; line-height:53px; color:#000000;; font-weight:bold; background:url(https://static.igem.org/mediawiki/2016/4/4f/Toulouse_France_rondNotebook2.png) no-repeat center top; margin-bottom:8px;}
+
−
 
+
−
.month{
+
−
position:absolute;
+
−
top:-50px;
+
−
left:-10px;
+
−
height:49px;
+
−
width:30px;
+
−
color:#fff;
+
−
font-size:11px;
+
−
line-height:30px;
+
−
background-image:url(https://static.igem.org/mediawiki/2016/7/7e/Toulouse_France_notebookBubble.png);
+
−
background-repeat:no-repeat;
+
−
}
+
−
 
+
−
#shiji_1p,#shiji_2p,#shiji_3p,#shiji_4p,#shiji_5p,#shiji_6p,#shiji_7p,#shiji_8p,#shiji_10p,#shiji_11p,#shiji_13p{
+
−
position:absolute;
+
−
top:130px;
+
−
left:150px;
+
−
width:800px;
+
−
height:60px;
+
−
line-height:60px;
+
−
color:rgba(122,122,122,1.00);
+
−
background-color:#efefef;
+
−
font-family: Arial,Helvetica,sans-serif;
+
−
font-size:19px;
+
−
font-weight:600;
+
−
border-radius:50px;
+
−
display:none;
+
−
text-align:center;
+
−
}
+
−
 
+
−
#shiji_9p,#shiji_12p{
+
−
position:absolute;
+
−
top:130px;
+
−
left:0px;
+
−
width:1100px;
+
−
height:60px;
+
−
line-height:60px;
+
−
color:rgba(122,122,122,1.00);
+
−
background-color:#efefef;
+
−
font-family: Arial,Helvetica,sans-serif;
+
−
font-size:19px;
+
−
font-weight:600;
+
−
border-radius:50px;
+
−
display:none;
+
−
text-align:center;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
/* loading */
+
−
 
+
−
 
+
−
/* team */
+
−
.hello{
+
−
padding: 20px 20px 20px 20px;
+
−
background-color:rgba(255,255,255,0.6);
+
−
}
+
−
    .fotorama{
+
−
position:relative;
+
−
z-index:0;
+
−
}
+
−
+
−
+
−
/* dans menu rotate */
+
−
+
−
.rotating{
+
−
animation: rotating linear 5s infinite;
+
−
-webkit-animation: rotating linear 5s infinite;
+
−
+
−
}
+
−
@keyframes rotating {
+
−
0% {
+
−
transform: rotate(0deg);
+
−
}
+
−
+
−
100% {
+
−
transform: rotate(-360deg);
+
−
}
+
−
}
+
−
 
+
−
@-webkit-keyframes rotating {
+
−
0% {
+
−
-webkit-transform: rotate(0deg);
+
−
}
+
−
100% {
+
−
-webkit-transform: rotate(-360deg);
+
−
}
+
−
}
+
−
+
−
+
−
+
−
/********************************* DEFAULT WIKI SETTINGS  ********************************/
+
−
 
+
−
#sideMenu, #top_title {display:none;}
+
−
#content {padding:0px; width:auto; margin-top:-7px;margin-left:0} /*J'ai regle les marges */
+
−
#body {width: 100% ; height: 100% ; font-family: Raleway,"Helvetica Neue",Helvetica,Arial,sans-serif; color: #000;  background-color: #d4dce4;}
+
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin: 0 0 35px; text-transform: uppercase; font-family: Montserrat, cursive,"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 700; letter-spacing: 1px;} /*Ca tu peux changer la police*/
+
−
 
+
−
/*Là y avait le CSS du menu d'iGEM, j'ai enlevé */
+
−
 
+
−
/********************************* CONTENT OF THE PAGE ********************************/
+
−
 
+
−
/* Wrapper for the content */
+
−
.content_wrapper {
+
−
width: 85%;
+
−
margin-left:150px;
+
−
padding:10px 0px;
+
−
float:left;
+
−
background-color:white;
+
−
}
+
−
 
+
−
/*LAYOUT */
+
−
.column  {
+
−
padding: 10px 0px;
+
−
float:left;
+
−
background-color:white;
+
−
}
+
−
 
+
−
.full_size {
+
−
width:100%;
+
−
}
+
−
 
+
−
.full_size img {
+
−
padding: 10px 15px;
+
−
width:96.5%;
+
−
}
+
−
 
+
−
.half_size {
+
−
width: 50%;
+
−
}
+
−
.half_size img {
+
−
padding: 10px 15px;
+
−
width: 93%;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
.highlight {
+
−
width: 90%;
+
−
margin: auto;
+
−
padding: 15px 5px;
+
−
background-color: #f2f2f2;
+
−
}
+
−
 
+
−
.judges-will-not-evaluate {
+
−
border: 4px solid #72c9b6;
+
−
display: block;
+
−
margin: 5px 15px;
+
−
width: 95%;
+
−
font-weight:bold;
+
−
}
+
−
 
+
−
 
+
−
/*STYLING */
+
−
 
+
−
/* styling for the titles */
+
−
.content_wrapper h1, .content_wrapper h2 {
+
−
padding:5px 15px;
+
−
border-bottom:0px;
+
−
color:#72c9b6;
+
−
 
+
−
}
+
−
.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {
+
−
padding:5px 15px;
+
−
border-bottom:0px;
+
−
color: #000000; 
+
−
}
+
−
 
+
−
 
+
−
/* font and text */
+
−
.content_wrapper p {
+
−
padding:0px 15px;
+
−
font-size: 13px;
+
−
font-family:Tahoma, Geneva, sans-serif;
+
−
}
+
−
 
+
−
/* Links */
+
−
.content_wrapper a {
+
−
font-weight: bold;
+
−
text-decoration: underline;
+
−
text-decoration-color:#72c9b6;
+
−
color: #72c9b6;
+
−
-webkit-transition: all 0.4s ease;
+
−
-moz-transition: all 0.4s ease;
+
−
-ms-transition: all 0.4s ease;
+
−
-o-transition: all 0.4s ease;
+
−
transition: all 0.4s ease;
+
−
}
+
−
 
+
−
/* hover for the links */
+
−
.content_wrapper a:hover {
+
−
text-decoration:none;
+
−
color:#000000;
+
−
}
+
−
 
+
−
/* non numbered lists */
+
−
.content_wrapper ul {
+
−
padding:0px 20px;
+
−
font-size: 13px;
+
−
font-family:Tahoma, Geneva, sans-serif;
+
−
}
+
−
 
+
−
/* numbered lists */
+
−
.content_wrapper ol {
+
−
padding:0px;
+
−
font-size: 13px;
+
−
font-family:Tahoma, Geneva, sans-serif;
+
−
}
+
−
 
+
−
/* Table */
+
−
.content_wrapper table {
+
−
width: 97%;
+
−
margin:15px 10px;
+
−
border: 1px solid #d3d3d3;
+
−
border-collapse: collapse;
+
−
}
+
−
 
+
−
/* table cells */
+
−
.content_wrapper  td {
+
−
padding: 10px;
+
−
vertical-align: text-top;
+
−
border: 1px solid #d3d3d3;
+
−
border-collapse: collapse;
+
−
}
+
−
 
+
−
/* table headers */
+
−
.content_wrapper th {
+
−
padding: 10px;
+
−
vertical-align: text-top;
+
−
border: 1px solid #d3d3d3;
+
−
border-collapse: collapse;
+
−
background-color:#f2f2f2;
+
−
}
+
−
 
+
−
/* Button class */
+
−
.button_click {
+
−
margin: 10px auto;
+
−
padding: 15px; width:12%; 
+
−
text-align:center;
+
−
font-weight:bold;
+
−
background-color: #72c9b6;
+
−
cursor:pointer; 
+
−
-webkit-transition: all 0.4s ease;
+
−
-moz-transition: all 0.4s ease;
+
−
-ms-transition: all 0.4s ease;
+
−
-o-transition: all 0.4s ease;
+
−
transition: all 0.4s ease;
+
−
}
+
−
 
+
−
/* button class on hover */
+
−
.button_click:hover { 
+
−
background-color:#000000;
+
−
color:#72c9b6;
+
−
}
+
−
 
+
−
/********************************* RESPONSIVE STYLING ********************************/
+
−
 
+
−
/* IF THE SCREEN IS LESS THAN 1000PX */
+
−
 
+
−
@media only screen and (max-width: 1000px) {
+
−
 
+
−
#content {width:100%; }
+
−
.menu_wrapper {width:15%;}
+
−
.content_wrapper {margin-left: 15%;}
+
−
.menu_item {display:block;}
+
−
.icon {display:none;}
+
−
.highlight {padding:10px 0px;}
+
−
}
+
−
 
+
−
 
+
−
/* IF THE SCREEN IS LESS THAN 680PX */
+
−
 
+
−
@media only screen and (max-width: 680px) {
+
−
.collapsable_menu_control { display:block;}
+
−
.menu_item {display:none;}
+
−
.menu_wrapper { width:100%; height: 15%; position:relative;}
+
−
.content_wrapper {width:100%; margin-left:0px;}
+
−
.column.half_size {width:100%; }
+
−
.column img { width: 100%; padding: 5px 0px;}
+
−
.icon {display:block;}
+
−
.highlight {padding:15px 5px;}
+
−
}
+
−
+
−
+
−
+
−
+
−
+
−
+
−
+
−
+
−
/* -----------------------------------------------------------------------------
+
−
--------------------------------------------------------------------------------
+
−
--------------------------------------------------------------------------------
+
−
*/
+
−
 
+
−
/* Team page */
+
−
#teamGallery {
+
−
  width: 100%;
+
−
  height: 100%;
+
−
  background-color: transparent;
+
−
}
+
−
#teamGallery .box {
+
−
  width: 35%;
+
−
  padding-bottom: 35%;
+
−
  position: relative;
+
−
  float: left;
+
−
}
+
−
#teamGallery .innerBox {
+
−
  position: absolute;
+
−
  left: 3px;
+
−
  right: 3px;
+
−
  bottom: 3px;
+
−
  top: 3px;
+
−
  background-color: ##000000;
+
−
}
+
−
 
+
−
#teamGallery .innerBox img {
+
−
  width: 100%;
+
−
  height: 100%;
+
−
  position: relative;
+
−
}
+
−
#teamGallery .innerBox a {
+
−
  width: 100%;
+
−
  height: 100%;
+
−
  display: block;
+
−
  position: relative;
+
−
}
+
−
#teamGallery .innerBox a:hover .ptext {
+
−
  padding-top: 5%;
+
−
  padding-bottom: 3%;   
+
−
}
+
−
#teamGallery .innerBox a:hover {
+
−
  text-decoration: none;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
.descriptionArea {
+
−
  width: 99%;
+
−
  width: calc(100% - 20px);
+
−
  display: none;
+
−
  color: black;
+
−
}
+
−
.descriptionArea.show {
+
−
  display: block;
+
−
}
+
−
.descriptionArea img {
+
−
  display: block;
+
−
  width: 100%;
+
−
  margin-top: 40px;
+
−
  padding: 3px;
+
−
}
+
−
+
−
 
+
−
/* Title styling */
+
−
.textContent h1 {
+
−
font-size: 33px;
+
−
font-weight: bold;
+
−
margin: 20px;
+
−
margin-left: 0;
+
−
height: 33px;
+
−
/*font-family: 'Libertinagec', serif;*/
+
−
}
+
−
.textContent h2 {
+
−
font-size: 25px;
+
−
font-weight: bold;
+
−
margin-bottom: 15px;
+
−
margin-top: 30px;
+
−
border-bottom: 1px solid black;
+
−
/*font-family: 'Libertinagec', serif;*/
+
−
width: 100%;
+
−
}
+
−
.textContent h3 {
+
−
font-size: 20px;
+
−
font-weight: bold;
+
−
margin-top: 20px
+
−
/*font-family: 'Libertinagec', serif;*/
+
−
}
+
−
.textContent h4 {
+
−
font-size: 18px;
+
−
font-weight: bold;
+
−
margin-bottom: 10px;
+
−
margin-top: 8px;
+
−
/*font-family: 'Libertinagec', serif;*/
+
−
}
+
−
.textContent h5 {
+
−
font-size: 18px;
+
−
text-decoration: underline;
+
−
margin-bottom: 10px;
+
−
margin-top: 8px;
+
−
/*font-family: 'Libertinagec', serif;*/
+
−
}
+
−
 
+
−
 
+
−
/* Lists styling */
+
−
.textContent ul, ol {
+
−
display: block;
+
−
margin-top: 5px;
+
−
margin-bottom: 5px;
+
−
padding-left: 20px;
+
−
list-style-type: disc;
+
−
}
+
−
 
+
−
.textContent ul li ul {
+
−
padding-left: 40px;
+
−
list-style-type: circle;
+
−
}
+
−
+
−
/* Paragraphs and columns */
+
−
.textContent p {
+
−
margin-top: 5px;
+
−
margin-bottom: 10px;
+
−
text-align: justify;
+
−
line-height: 25px;
+
−
}
+
−
.textContent {
+
−
line-height: 25px;
+
−
}
+
−
 
+
−
.textContent div.column-left {
+
−
float: left;
+
−
width: 48%;
+
−
}
+
−
.textContent div.column-right {
+
−
width: 48%;
+
−
float: right;
+
−
}
+
−
.textContent #clear {
+
−
clear: both;
+
−
height: 10px;
+
−
}
+
−
 
+
−
+
−
/* Responsive design! */
+
−
@media only screen and (max-width : 600px) {
+
−
  /* Small screens: two columns become one! */
+
−
  .textContent div.column-left,
+
−
  .textContent div.column-right {
+
−
float: none;
+
−
width: 100%;
+
−
  }
+
−
}
+
−
 
+
−
.textContent hr {
+
−
border: 0;
+
−
border-bottom: 1px solid grey;
+
−
margin-left: 100px;
+
−
margin-right: 100px;
+
−
margin-bottom: 50px;
+
−
margin-top: 50px;
+
−
}
+
−
 
+
−
.textContent a {
+
−
  color: #636363;
+
−
}
+
−
.textContent a:hover {
+
−
  color: #909090;
+
−
}
+
−
 
+
−
 
+
−
/* -----------------------------------------------------------------------------
+
−
--------------------------------------------------------------------------------
+
−
--------------------------------------------------------------------------------
+
−
*/
+
−
+
−
</style>
+
−
 
+
−
<script src="https://2016.igem.org/Team:Toulouse_France/jqueryNotebook" type="text/javascript" ></script>
+
−
+
−
<script src="https://2016.igem.org/wiki/index.php?title=Template:Toulouse_France/backtotop&action=submit"></script>
+
−
<script src="https://2016.igem.org/wiki/index.php?title=Template:Toulouse_France/min&action=submit"></script>
+
−
<script src="https://2016.igem.org/wiki/index.php?title=Template:Toulouse_France/mobilemenu&action=submit"></script>
+
−
<script src="https://2016.igem.org/wiki/index.php?title=Template:Toulouse_France/a&action=submit"></script>
+
−
+
−
<script>
+
−
 
+
−
// This is the jquery part of our template.
+
−
 
+
−
$(document).ready(function() {
+
−
 
+
−
$("#HQ_page").attr('id','');
+
−
 
+
−
 
+
−
if ( wgPageName.substring( 0,  8) == "Template")  {  // if the page is a template it displays the full name in a single line
+
−
$("#team_name").html( wgPageName );
+
−
}
+
−
 
+
−
else if (  ( (wgPageName.match(/\//g) || []).length ) == 0 ) {  // if it is the home page , just print the team's name
+
−
$("#team_name").html( wgPageName.substring( 5, wgPageName.length ) );
+
−
}
+
−
 
+
−
else {
+
−
// this adds the team's name as an h1
+
−
$("#team_name").html( wgPageName.substring( 5 , wgPageName.indexOf("/")  ) );
+
−
 
+
−
// this adds the page's title as an h4
+
−
$("#page_name").html (    ( wgPageName.substring( wgPageName.indexOf("/") + 1, wgPageName.length ) ).replace( /\/|_/g , " ")  );
+
−
}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
$('#accordion').find('.menu_item').click(function(){
+
−
 
+
−
//Expand or collapse this panel
+
−
+
−
submenu = $(this).find('.submenu');
+
−
submenu.toggle();
+
−
 
+
−
icon = $(this).find('.icon');
+
−
 
+
−
if ( !$( submenu ).is(':visible') ) {
+
−
icon.removeClass("less").addClass("plus");
+
−
}
+
−
else {
+
−
icon.removeClass("plus").addClass("less");
+
−
}
+
−
 
+
−
//Hide the other panels
+
−
+
−
$(".submenu").not(submenu).hide();
+
−
$(".icon").not(icon).removeClass("less").addClass("plus");
+
−
});
+
−
 
+
−
 
+
−
$(".collapsable_menu_control").click(function() {
+
−
$(".menu_item").toggle();
+
−
});
+
−
 
+
−
$( window ).resize(function() {
+
−
$(".menu_item").show();
+
−
});
+
−
 
+
−
 
+
−
});
+
−
 
+
−
</script>
+
−
+
−
<script type='text/javascript'> $(function(){
+
−
$(window).scroll(function () {
+
−
if ($(this).scrollTop() > 250) {
+
−
$('#column-left').addClass("fixNavigation");
+
−
} else {
+
−
$('#column-left').removeClass("fixNavigation");
+
−
}
+
−
});
+
−
});
+
−
</script>
+
  
 +
<nav id="mainav">
 +
<ul class="clear" style="max-width:90%; margin:0 auto;">
 +
<li class="active"><a href="https://2016.igem.org/Team:Toulouse_France">Home</a></li>
 +
<ul>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France#Presentation">General Presentation</a></li>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France#Achievements">Achievements</a></li>
 +
</ul>
 +
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Team">Team</a>
 +
<ul>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Team#Presentation">Presentation</a></li>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Team#Gallery">Gallery</a></li>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Team#FunFacts">Fun Facts</a></li>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Collaborations">Meet ups & Collaboration</a></li>
 +
</ul>
 +
</li>
 +
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Description">Project</a>
 +
<ul>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Description">Description</a></li>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Design">Design</a>
 +
<ul>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Design#Predation">Predation</a></li>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Design#Antifungals">Antifungals</a></li>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Design#Confinement">Confinement</a>
 +
<ul>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Design#Confinement">Biological confinement</a></li>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Device">Physical confinement : Device</a></li>
 +
</ul>
 +
</li>
 +
</ul>
 +
</li>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Demonstrate">Results</a></li>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Proof">Proof of Concept</a></li>
 +
</ul>
 +
</li>
 +
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Model">Modeling</a></li>
 +
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Wetlab">Wet Lab</a>
 +
<ul>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Notebook">Notebook</a></li>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Experiments#Protocols">Protocols</a></li>
 +
</ul>
 +
</li>
 +
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Parts">Parts</a></li>
 +
<ul>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Basic_Parts">Basic Parts</a></li>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Composite_Parts">Composite Parts</a></li>
 +
</ul>
 +
</li>
 +
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Ethics">Ethics</a></li>
  
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Human_Practices">Human Practices</a>
 +
<ul>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Safety">Safety</a></li>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Women">Public Policy</a></li>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Application">Application : Laboratory Cave</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Attributions">Attributions</a>
 +
<ul>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Attributions#Aknowledgements">Aknowledgements</a></li>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Attributions#Supports">Supports</a></li>
 +
<li><a href="https://2016.igem.org/Team:Toulouse_France/Attributions#Medias">Medias</a></li>
 +
</ul>
 +
</li>
 +
</ul>
 +
</nav>
 +
</header>
 +
</div>
 +
<!-- Top Background Image Wrapper -->
 +
<!-- ################################################################################################ -->
 
</html>
 
</html>

Revision as of 16:19, 16 September 2016

iGEM Toulouse 2016