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

Line 1: Line 1:
−
{{Toulouse_France}}
+
{{Template:Toulouse_France/fontsome}}
  
 
<html>
 
<html>
  
−
<head>
+
 
−
<title>iGEM Toulouse 2016</title>
+
−
<meta charset="utf-8">
+
<style>
−
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
+
 +
@charset "utf-8
 
 
−
<!-- pour avoir logo dans onglet -->
+
/* Framework
−
<link rel="icon" href="https://static.igem.org/mediawiki/2016/1/19/Toulouse_France_logo2.png" type="image/jpg" style="width:100%;"/>
+
--------------------------------------------------------------------------------------------------------------- */
 +
/* ------------------------------------------------------------------------------------------------------------ */
  
−
</head>
+
*, *::before, *::after{box-sizing:border-box;}
 +
 
 +
.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 */
 
 
−
<div id="topbar" class="hoc clear">
+
.anchor {
−
<p>Follow us  &#64;            
+
height: 30px;
−
<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>
+
position: fixed;
−
<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>
+
bottom: 20px;
−
<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>
+
right: 30px;
−
</p>
+
z-index: 1000;
−
</div>
+
cursor: pointer;
 +
-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">  
+
−
<!-- POURQUOI ICI ? MathJax is a JavaScript library for displaying mathematical equations. A copy of MathJax 2.5 is installed on 2015.igem.org -->
+
.sec_title{
−
<script src="https://2015.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+
width:100%;
 +
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:18, 16 September 2016