Difference between revisions of "Team:Toulouse/test"

 
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{Template:Toulouse/fontsome}}
+
{{Toulouse}}
{{Template:Toulouse/framework}}
+
 
+
 
<html>
 
<html>
<script>
+
<head>
var shiftWindow = function() { scrollBy(0, -30) };
+
<meta charset="utf-8">
if (location.hash) shiftWindow();
+
<title>iGEM Toulouse 2015</title>
window.addEventListener("hashchange", shiftWindow);
+
<link rel="icon" href="https://static.igem.org/mediawiki/2015/2/2e/TLSE_ApiColi.png" type="image/png" style="width:10%;"/>
</script>
+
<style>
+
@charset "utf-8";
+
#mainav li li a, #mainav li li .drop
+
address, article, aside, figcaption, figure, footer, header, main, nav, section{display:block; margin:0; padding:0;}
+
html, body{
+
overflow-x: hidden;
+
    overflow-y: scroll;
+
}
+
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo{
+
    display:none;}
+
#top-section {
+
    border: none;
+
    height: 0px;}
+
#content {
+
    border: none;
+
    padding: 0px 0px 0px 0px;
+
background-color: #817E8B; ;
+
}
+
#globalWrapper {
+
    font-size: 78%;
+
    position:absolute;
+
}
+
  
#content {
+
</head>
    width:100%;
+
<body id="top">
}
+
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
  
h1, h2, h3, h4, h5, h6 { border-bottom: 0px transparent;
+
</html>{{Toulouse/nav}}<html>
  
margin-bottom: none;
+
<!-- ################################################################################################ -->
}
+
<!-- ################################################################################################ -->
h3 {color:#90A83E;}
+
<!-- ######################################  URL DE L'IMAGE EN BG    ########################################################## -->
@charset "utf-8";
+
<div class="wrapper row0 bgded" style="background-image:url('https://static.igem.org/mediawiki/2015/6/61/TLSE_bg_8.png')">
/*
+
 
Template Name: Fertile
+
Author: <a href="http://www.os-templates.com/">OS Templates</a>
+
Author URI: http://www.os-templates.com/
+
Licence: Free to use under our free template licence terms
+
Licence URI: http://www.os-templates.com/template-terms
+
File: Layout CSS
+
*/
+
  
@import url("fontawesome-4.2.0.min.css");
+
  <div class="shout">
@import url("framework.css");
+
   
 +
    <div class="shout-content clear">
 +
      <div class="maintitle">
 +
    <center> <h3>Gallery</h3> </center>
 +
    </div>
 +
  <center><img src="https://static.igem.org/mediawiki/2015/b/ba/TLSE_Apicoli_nice.png" style="padding-bottom:50px;"></center>
 +
 
 +
</div>
  
 +
  </div>
 +
 
 +
 +
</div>
  
/* Rows
 
---------------------------------------------------------------------------------------------------------------*/
 
.row0{border-bottom:0px solid; margin-top:5px;}
 
.row1, .row1 a{}
 
.row2, .row2 a{}
 
.row3, .row3 a{}
 
.row4, .row4 a{}
 
.row5, .row5 a{}
 
.row6{border-top:1px solid;}
 
  
  
/* Header
 
---------------------------------------------------------------------------------------------------------------*/
 
#header{text-transform:uppercase; font-size:13px;}
 
#header *{margin:0;}
 
#header #logo{margin-top:-20px; margin-left:-10px; margin-top:15px;}
 
#header #logo h1{    text-transform:capitalize; font-variant:small-caps;}
 
#header #logo h1::first-letter{}
 
  
 +
  <main class="container clear">
 +
 
 +
  <!-- ################################ ICI CONTENEUR OU TU PEUX T'AMUSER A METTRE LES DIVS ############################### -->
 +
 
  
/* Shout - Call To Action
+
<div class="group center"> <p class="text">
---------------------------------------------------------------------------------------------------------------*/
+
As we were saying before, ethics was a dimension that was present from the <b>very first stages of development</b> of our project. During the summer, we had the great chance to meet and talk with a few ethicians: M. Vincent Gégoire-Delory, M. Simon Desbois and Mrs Anne Cambon-Thomsen. They helped us develop our reflexion and shared their knowledge with us while still having the skill to let us think by ourselves.<br> <br>
.shout{padding:650px 0 0 0; text-transform:uppercase;}
+
We realized that the iGEM competition is a great time to develop our ethical thinking. Indeed, ethics are a requirement, which is a great opportunity and an advantage compared to being immediately included in an already existing project and never learning to think critically. The ability to carry out this type of deliberation, to question one’s own work, is what singles out a good scientist, in our opinion. <br> <br>
.shout.inner{padding-top:120px;}
+
Finally, we would like to share with you this quote by <b>Arthur M. Schlesinger</b> that underlines something that we have learned this summer:<br><br>
.shout p{margin:0; padding:0;}
+
</div>
.shout p:first-of-type{/*margin-top:10px;*/ text-transform:none;}
+
<div class="group center"> <p class="text">
.shout-content img{
+
<i>Science and technology revolutionize our lives, but memory, tradition and myth frame our response.</i><br><br>
max-height:150px;
+
</p> </div>
}
+
<div class="group center"> <p class="text">
.shout .shout-content{padding:15px 30px; border-radius:50px 50px 5px 5px; font-size:1.2rem; margin:auto;}
+
Any ethical reflection, to be pertinent, has to root itself in a society’s history, tradition and beliefs. This is the way in which one will be able to identify the barriers and the fears of the public, and understanding them is the first step to conquering them.
.row0 .shout .shout-content{padding:15px 30px; border-radius:50px 50px 5px 5px; font-size:1.2rem;margin-top:-224px;}
+
</p> </div>
/* Page Header
+
 
--------------------------------------------------------------------------------------------------------------- */
+
  </main>
#pageintro{padding:180px 0 0 0;}
+
</div>
#pageintro .title{margin:0 0 50px 0;}
+
#pageintro .title :first-of-type{font-size:32px;}
+
  
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<!-- #######################        FOOTER        ######################################################################### -->
  
/* Latest
+
</html>{{Toulouse/footer}}<html>
---------------------------------------------------------------------------------------------------------------*/
+
.latest{display:block; width:100%; min-width:978px; max-width:2000px; margin:0 auto;}
+
.latest *{margin:0; padding:0;}
+
.latest ul, .latest ul li{border:solid; margin-bottom:15px;}
+
.latest ul{border:solid; border-width:1px 0;}
+
.latest ul li{display:block; float:left; width:20%; border-width:0 0 0 1px; box-sizing:border-box;}
+
.latest ul li:first-child{border-left:none;}
+
.latest ul li:first-child, .latest ul li:nth-child(5n+1){clear:left;}
+
.latest ul li *{width:100%; box-sizing:border-box;}
+
 
+
 
+
/* Clients
+
---------------------------------------------------------------------------------------------------------------*/
+
.clients{padding:30px 0;}
+
.clients *{margin:0; padding:0;}
+
.clients ul li{display:block; float:left; width:20%; padding:0 15px; box-sizing:border-box;}
+
.clients ul li:first-child, .clients ul li:nth-child(5n+1){clear:left;}
+
.clients ul li *{width:100%; opacity:.5;}
+
.clients ul li *:hover{opacity:1;}
+
 
+
 
+
/* Content Area
+
---------------------------------------------------------------------------------------------------------------*/
+
.container{padding:30px;padding-bottom:80px;}
+
 
+
/* Content */
+
.container #content{}
+
 
+
.boxedicon{display:inline-block; width:70px; height:70px; line-height:70px; margin-bottom:50px; text-align:center;}
+
.boxedicon a{display:block; width:100%; height:100%; border:2px solid;}
+
.boxedicon a i{line-height:inherit;}
+
 
+
.testimonial em{display:block; margin:0; padding:0; font-style:normal; font-size:.8rem;}
+
 
+
/* Comments */
+
#comments ul{margin:0 0 40px 0; padding:0; list-style:none;}
+
#comments li{margin:0 0 10px 0; padding:15px;}
+
#comments .avatar{float:right; margin:0 0 10px 10px; padding:3px; border:1px solid;}
+
#comments address{font-weight:bold;}
+
#comments time{font-size:smaller;}
+
#comments .comcont{display:block; margin:0; padding:0;}
+
#comments .comcont p{margin:10px 5px 10px 0; padding:0;}
+
 
+
/* Sidebar */
+
.container .sidebar{}
+
 
+
.sidebar .sdb_holder{margin-bottom:50px;}
+
.sidebar .sdb_holder:last-child{margin-bottom:0;}
+
 
+
 
+
/* Footer
+
---------------------------------------------------------------------------------------------------------------*/
+
#footer{padding:0 0 80px 0; color:white;}
+
 
+
#footer .shout{margin:0 0 80px 0; padding:0;}
+
#footer .shout .shout-content{border-radius:0 0 50px 50px;}
+
 
+
#footer .title{margin:0 0 30px 0; padding:0 0 8px 0; border-bottom:1px solid; font-size:16px; text-transform:uppercase;}
+
 
+
#footer .linklist li {margin-bottom:10px;}
+
#footer .linklist li:last-child{margin-bottom:0;}
+
#footer .linklist li a{color:white;/*font-size: 12px*/}
+
 
+
#footer .smallfont{font-size:.8em; margin:0;}
+
 
+
#footer input, #footer button{border:none; border-radius:5px;}
+
#footer input{display:block; width:100%; padding:8px;}
+
#footer button{padding:6px 12px; font-weight:bold; text-transform:uppercase; cursor:pointer;}
+
 
+
 
+
 
+
/* Copyright
+
---------------------------------------------------------------------------------------------------------------*/
+
#copyright{padding:30px 0;}
+
#copyright p{margin:0; padding:0;}
+
 
+
 
+
/* Back to Top
+
---------------------------------------------------------------------------------------------------------------*/
+
 
+
 
+
/* Transition Fade
+
--------------------------------------------------------------------------------------------------------------- */
+
.row0, .faico a, #mainav *, .shout-content, .overlay ::before, .overlay ::after, .boxedicon a, .clients ul li *, }
+
 
+
 
+
/*-------------------------------------------------------------------------------------------------------------*/
+
/*-------------------------------------------------------------------------------------------------------------*/
+
/*-------------------------------------------------------------------------------------------------------------*/
+
/*-------------------------------------------------------------------------------------------------------------*/
+
/*-------------------------------------------------------------------------------------------------------------*/
+
 
+
 
+
/* Navigation
+
---------------------------------------------------------------------------------------------------------------*/
+
nav ul, nav ol{margin:0; padding:0; list-style:none;}
+
 
+
#mainav .drop::after, #mainav li li .drop::after, #breadcrumb li a::after, .sidebar nav a::after{position:absolute; font-family:"FontAwesome"; font-size:50px; line-height:10px;}
+
 
+
/* Top Navigation */
+
#mainav{margin-bottom:-1px; }
+
#mainav ul{text-transform:uppercase;margin-top:-1px;}
+
#mainav ul ul{z-index:9999; position:absolute; width:160px; text-align:left; text-transform:none;}
+
#mainav ul ul ul{left:150px; top:0;}
+
#mainav li{display:inline-block; position:relative; margin:0 10px 0 0; padding:0;}
+
#mainav li:last-child{margin-right:0;}
+
#mainav li li{width:100%; margin:0;}
+
#mainav li a{display:block; padding:25px 10px;}
+
#mainav li li a{border:solid; border-width:0 0 1px 0;font-size:12px;}
+
#mainav .drop{padding-left:10px; margin-top:20px;}
+
#mainav li li a, #mainav li li .drop{display:block; margin:-1px; padding:10px 15px;}
+
#mainav .drop::after, #mainav li li .drop::after{content:"";}
+
#mainav .drop::after{top:30px; left:5px;}
+
#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;}
+
 
+
/* Breadcrumb */
+
#breadcrumb{display:block; padding:15px 20px; border-radius:5px 5px 0 0;}
+
#breadcrumb ul{margin:0; padding:0; list-style:none;}
+
#breadcrumb li{display:inline-block; margin:0 6px 0 0; padding:0;}
+
#breadcrumb li a{display:block; position:relative; margin:0; padding:0 12px 0 0; font-size:13px;color:rgba(29, 5, 79, 1);}
+
#breadcrumb li a::after{top:5px; right:0; content:"";}
+
#breadcrumb li:last-child a{margin:0; padding:0;}
+
#breadcrumb li:last-child a::after{display:none;}
+
 
+
/* Sidebar Navigation */
+
.sidebar nav{display:block; width:100%;}
+
.sidebar nav li{margin:0 0 3px 0; padding:0;}
+
.sidebar nav a{display:block; position:relative; margin:0; padding:5px 10px 5px 15px; text-decoration:none; border:solid; border-width:0 0 1px 0;}
+
.sidebar nav a::after{top:9px; left:5px; content:"";}
+
.sidebar nav ul ul a{padding-left:35px;}
+
.sidebar nav ul ul a::after{left:25px;}
+
.sidebar nav ul ul ul a{padding-left:55px;}
+
.sidebar nav ul ul ul a::after{left:45px;}
+
 
+
/* Pagination */
+
.pagination{display:block; width:100%; text-align:center; clear:both;}
+
.pagination li{display:inline-block; margin:0 3px 0 0;}
+
.pagination li:last-child{margin-right:0;}
+
.pagination a, .pagination strong{display:block; padding:8px 11px; border:1px solid; font-weight:normal;}
+
 
+
 
+
/* Forms
+
---------------------------------------------------------------------------------------------------------------*/
+
form, fieldset, legend{margin:0; padding:0; border:none;}
+
legend{display:none;}
+
label, input, textarea, select{display:block; resize:none; font-size:inherit; box-sizing:border-box;}
+
label{margin-bottom:5px;}
+
 
+
/* Comment Area */
+
#comments form{display:block; width:100%;}
+
#comments input, #comments textarea{width:100%; padding:10px; border:1px solid;}
+
#comments textarea{overflow:auto;}
+
#comments div{margin-bottom:15px;}
+
#comments input[type="submit"], #comments input[type="reset"]{display:inline-block; width:auto; min-width:150px; margin:0; padding:8px 5px; cursor:pointer;}
+
 
+
 
+
/* Tables
+
---------------------------------------------------------------------------------------------------------------*/
+
table.df th td{border:1px solid; border-collapse:collapse; vertical-align:top; box-sizing:border-box;}
+
table.df th{table-layout:auto;}
+
table.df{width:100%; margin-bottom:15px;color:#888888}
+
table.df th td{padding:10px 15px;}
+
table.df td{border-width:0 1px;}
+
 
+
 
+
/* Gallery
+
---------------------------------------------------------------------------------------------------------------*/
+
#gallery{display:block; width:100%; margin-bottom:50px;}
+
#gallery figure figcaption{display:block; width:100%; clear:both;}
+
#gallery li{margin-bottom:10px;}
+
#gallery img{max-height:150px;max-width:100%;border-width:10px; border-color:black;}
+
 
+
.overlay ul li a{display:block; position:relative;}
+
.overlay ul li a::before{display:block; position:absolute; top:0; left:0; width:100%; height:100%; content:"";}
+
.overlay ul li a::after{display:block; position:absolute; top:50%; left:50%; width:40px; height:40px; line-height:40px; margin:-18px 0 0 -18px; padding:0; border-radius:50%; font-family:"FontAwesome"; content:""; font-size:18px; text-align:center;}
+
.overlay ul li a::before, .overlay ul li a::after{opacity:0;}
+
.overlay ul li a:hover::before, .overlay ul li a:hover::after{opacity:1;}
+
 
+
 
+
/* Font Awesome Social Icons
+
---------------------------------------------------------------------------------------------------------------*/
+
.faico{margin:40px; padding:0; list-style:none;}
+
.faico li{display:inline-block; margin:0 2px 0 0; padding:0; line-height:normal;}
+
.faico li:last-child{margin-right:0;}
+
.faico a{display:inline-block; width:30px; height:30px; line-height:30px; border-radius:5px; font-size:16px; text-align:center;}
+
 
+
.faico a{color:inherit; }
+
.faico a:hover{color:#FFFFFF;}
+
 
+
.faicon-facebook:hover{background-color:#3B5998;}
+
.faicon-google-plus:hover{background-color:#DB4A39;}
+
.faicon-instagram:hover{background-color:#3F729B;}
+
.faicon-linkedin:hover{background-color:#0E76A8;}
+
.faicon-tumblr:hover{background-color:#34526F;}
+
.faicon-twitter:hover{background-color:#00ACEE;}
+
 
+
 
+
/*-------------------------------------------------------------------------------------------------------------*/
+
/*-------------------------------------------------------------------------------------------------------------*/
+
/*-------------------------------------------------------------------------------------------------------------*/
+
/*-------------------------------------------------------------------------------------------------------------*/
+
/*-------------------------------------------------------------------------------------------------------------*/
+
 
+
 
+
/* Colours
+
---------------------------------------------------------------------------------------------------------------*/
+
body{color:black; background-color:#817E8B;}
+
 
+
hr, .borderedbox{border-color:#EDEDED;}
+
label span{color:#FF0000; background-color:inherit;}
+
.btn{color:#FFFFFF;}
+
.font_xxl:after{color:inherit; background-color:rgba(9, 181, 31, 0.32);}
+
 
+
 
+
/* Rows */
+
/* Structure des rows, le row0 est la barre de nav */
+
.row0{color:#101132; background-color:rgba(245, 245, 245, 1); border-color:rgba(29, 5, 79, 0.81); max-height:650px;}
+
.row0:hover{background-color:rgba(245, 245, 245, 1);}
+
.row1, .row1 a{color:#FFFFFF; background-color:#000000;}
+
.row2, .row2 a{color:#FFFFFF; background-color:#000000;}
+
.row3{color:#888888; background-color:white;}
+
.row4, .row4 a{color:#B4B4B4; background-color:#EDEDED;}
+
.row5{color:white; background-color:#817E8B; padding-top:50px;}
+
.row6, .row6 a{color:#B4B4B4; background-color:#817E8B;}
+
.row6{border-color:#3C3C3C;}
+
 
+
 
+
/* Header */
+
#header #logo h1 a{color:inherit;}
+
 
+
 
+
/* Shout */
+
.shout .shout-content{color:inherit; background-color:rgba(247, 244, 255, 0.48);max-width:800px;max-height:300px;}
+
.shout .shout-content:hover{background-color:rgba(247, 244, 255, 0.48);}
+
 
+
 
+
/* Latest Work */
+
.latest ul, .latest ul li{border-color:#EDEDED;}
+
 
+
 
+
/* Content */
+
.boxedicon a{color:#56AED4; }
+
.boxedicon a:hover{color:#FFFFFF;}
+
 
+
 
+
/* Footer */
+
/* Couleur de la barre du footer */
+
#footer .shout .shout-content, #footer .shout .shout-content:hover{color:rgba(8, 44, 47, 0.82); background-color:#EDEDED; border-bottom: 7px solid rgba(46, 29, 89, 0.88);}
+
#footer .title{color:#FFFFFF; border-color:#3C3C3C;} /* Couleur des textes */
+
#footer input{color:#FFFFFF; background-color:#3C3C3C;}
+
#footer button{color:#FFFFFF;}
+
e-block;}
+
 
+
/*Back to Top*/
+
 
+
 
+
/* Navigation */
+
 
+
#mainav li a{color:inherit;} /* Couleur des textes de la barre nav */
+
#mainav.active a, #mainav a:hover, #mainav li:hover > a{; background-color:inherit;} /* Couleur de fond lors d'un mouseover du texte */
+
#mainav li li a, #mainav .active li a{color:black; background-color:rgb(205, 215, 117); border-color:rgb(205, 215, 117);} /* Gestion de la couleur des onglets */
+
#mainav li li:hover > a, #mainav .active .active > a{color:#FFFFFF; background-color:rgba(29, 5, 79, 0.81);border-color:rgba(29, 5, 79, 0.81);font-size:12px;}/* Gestion couleur des onglets lors d'un mouseover */
+
#mainav li a.set{color:#90A83E;font-size:15px;} /*classe active qui s'appelle pas active parceque active ?a marchait pas */
+
/* J'ai toujours pas trop compris */
+
#breadcrumb{color:inherit; background-color:rgba(255, 255, 255, 0.7);}
+
#breadcrumb a{background-color:inherit;}
+
 
+
.container .sidebar nav a{color:inherit; border-color:#EDEDED;}
+
.container .sidebar nav a:hover{color:#56AED4;}
+
 
+
.pagination a, .pagination strong{border-color:#EDEDED;}
+
.pagination .current{color:#B9D94A;}
+
 
+
/*ALL TABLE ATTRIBUTES*/
+
/* Tables + Comments
+
df for default style table*/
+
table.df th td, #comments .avatar, #comments input, #comments textarea{border-color:#EDEDED;}
+
table.df th{color:#FFFFFF; background-color:rgba(29, 5, 79, 1);font-size:15px;}
+
table.df tr, #comments li, #comments input[type="submit"], #comments input[type="reset"]{color:inherit; background-color:#FBFBFB;}
+
table.df tr:nth-child(even), #comments li:nth-child(even){color:inherit; background-color:#F7F7F7;}
+
table.df a, #comments a{background-color:inherit;}
+
 
+
 
+
/* Gallery */
+
.overlay ul li a::before{background-color:rgba(236, 255, 226, 0.6);}
+
.overlay ul li a::after{color:#FFFFFF; }
+
 
+
/* */
+
a:link {color: rgba(29, 5, 79, 0.81);}
+
a:visited {color: rgba(29, 5, 79, 0.81);}
+
a:hover {color:rgba(22, 19, 29, 0.95);}
+
a:active {color:rgba(29, 5, 79, 0.81);}
+
img
+
{
+
    filter: type(value);
+
}
+
img
+
{
+
    filter: type(value);
+
    -webkit-filter: type(value);
+
    -moz-filter: type(value);
+
    -ms-filter: type(value);
+
    -o-filter: type(value);
+
}
+
.grayscale img:hover
+
{
+
        filter: grayscale(0);
+
        -webkit-filter: grayscale(0);
+
        -moz-filter: grayscale(0);
+
        -o-filter: grayscale(0);
+
        -ms-filter: grayscale(0);
+
}
+
.grayscale img
+
{
+
        filter: grayscale(1);
+
        -webkit-filter: grayscale(1);
+
        -moz-filter: grayscale(1);
+
        -o-filter: grayscale(1);
+
        -ms-filter: grayscale(1);
+
}
+
 
+
.group {padding-top:10px;}
+
 
+
p.text{
+
font-size:15px;
+
text-align:justify;
+
}
+
.title{
+
margin-top:60px;
+
color:rgba(29, 5, 79, 0.81);
+
}
+
 
+
.title h3{
+
color:rgba(29, 5, 79, 1);
+
font-size:25px;
+
}
+
 
+
.subtitle{
+
right: 5px;
+
padding-top:30px;
+
margin-top:30px;
+
}
+
 
+
.subtitle h3{
+
color:#90A83E;
+
font-size:20px;
+
}
+
 
+
.subsubtitle{
+
margin-left: 10px;
+
margin-top:30px;
+
}
+
 
+
.subsubtitle h3{
+
color:#90A83E;
+
font-size:18px;
+
}
+
 
+
.subsubsubtitle{
+
margin-left: 10px;
+
margin-top:30px;
+
}
+
 
+
.subsubsubtitle h3{
+
color:#90A83E;
+
font-size:15px;
+
}
+
 
+
.maintitle{
+
color:rgba(29, 5, 79, 0.81);
+
}
+
 
+
.maintitle h3{
+
color:rgba(29, 5, 79, 1);
+
font-size:25px;
+
}
+
 
+
p.legend{
+
font-size:12px;
+
margin-bottom:20px;
+
padding-bottom:10px;
+
}
+
 
+
 
+
table.team{
+
text-align:center;
+
background-color:rgb(0,0,0,0); /*transparent*/
+
 
+
}
+
 
+
table.team td {
+
padding-top: 15px;
+
padding-bottom: 15px;
+
width:472px;
+
height:327px;
+
}
+
 
+
 
+
 
+
table.team td img{
+
width:472px;
+
height:327px;
+
}
+
 
+
 
+
/* table Gallery */
+
table.gallery th td, #comments .avatar, #comments input, #comments textarea{border-color:#EDEDED;}
+
table.gallery th{color:#FFFFFF; background-color:rgba(29, 5, 79, 1);font-size:15px; }
+
table.gallery tr, #comments li, #comments input[type="submit"], #comments input[type="reset"]{color:inherit; background-color:#FBFBFB;}
+
table.gallery tr:nth-child(even), #comments li:nth-child(even){color:inherit; background-color:#F7F7F7;}
+
table.gallery a, #comments a{background-color:inherit;}
+
 
+
 
+
table.gallery th td{border:1px solid; border-collapse:collapse; vertical-align:top; box-sizing:border-box; text-align:center;}
+
table.gallery th{table-layout:auto;}
+
table.gallery{width:100%; margin-bottom:15px;color:#888888}
+
table.gallery th td{padding:10px 15px;}
+
table.gallery td{border-width:0 1px; text-align:center; padding:10px;}
+
 
+
 
+
 
+
 
+
 
+
table.result{
+
  display: block;
+
  font-family: sans-serif;
+
  -webkit-font-smoothing: antialiased;
+
  font-size: 115%;
+
  overflow: auto;
+
  width: auto;
+
  }
+
+
table.result th {
+
    background-color: rgba(29, 5, 79, 1);
+
    color: white;
+
    font-weight: normal;
+
    padding: 20px 30px;
+
    text-align: center;
+
  }
+
 
+
table.result  td {
+
    background-color: rgb(238, 238, 238);
+
    color: rgb(111, 111, 111);
+
    padding: 20px 30px;
+
  }
+
 
+
 
+
  
.anchor {
 
    height: 30px;
 
    position: fixed;
 
    bottom: 30px;
 
    right: 30px;
 
    z-index: 1000;
 
    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;
 
}
 
/* SLIDESHOW */
 
  
    .contener_slideshow
 
    {
 
      width:800px;
 
      height:600px;
 
      overflow: hidden;
 
      position: relative;
 
      background-image: url(YOUR-URL-IMAGE.png);
 
    }
 
    .slid_1, .slid_2, .slid_3
 
    {
 
      position: absolute;
 
      width:800px;
 
      height:600px;
 
    }
 
    .slid_1{left: 0;}
 
    .slid_2{left: 800px;}
 
    .slid_3{left: 1600px;}
 
    .contener_slide
 
    {
 
      width: 2400px;
 
      height: 600px;
 
      left:0px;
 
      position: absolute;
 
      -webkit-animation-duration: 10s;
 
      -webkit-animation-iteration-count:infinite;
 
      -webkit-animation-name: anim_slide;
 
      -moz-animation-duration: 10s;
 
      -moz-animation-iteration-count:infinite;
 
      -moz-animation-name: anim_slide;
 
      -ms-animation-duration: 10s;
 
      -ms-animation-iteration-count:infinite;
 
      -ms-animation-name: anim_slide;
 
      animation-duration: 10s;
 
      animation-iteration-count:infinite;
 
      animation-name: anim_slide;
 
    }
 
    @-webkit-keyframes anim_slide
 
    {
 
      0% {left:0px;}
 
      22% {left:0px;}
 
      33% {left:-800px;}
 
      45% {left:-800px;}
 
      66% {left:-1600px;}
 
      90% {left:-1600px;}
 
    }
 
    @-moz-keyframes anim_slide
 
    {
 
      0% {left:0px;}
 
      22% {left:0px;}
 
      33% {left:-800px;}
 
      45% {left:-800px;}
 
      66% {left:-1600px;}
 
      90% {left:-1600px;}
 
    }
 
    @-ms-keyframes anim_slide
 
    {
 
      0% {left:0px;}
 
      22% {left:0px;}
 
      33% {left:-800px;}
 
      45% {left:-800px;}
 
      66% {left:-1600px;}
 
      90% {left:-1600px;}
 
    }
 
    @keyframes anim_slide
 
    {
 
      0% {left:0px;}
 
      22% {left:0px;}
 
      33% {left:-800px;}
 
      45% {left:-800px;}
 
      66% {left:-1600px;}
 
      90% {left:-1600px;}
 
    }
 
  
</style>
+
</body>
 
</html>
 
</html>

Latest revision as of 00:01, 19 September 2015

iGEM Toulouse 2015

Gallery

As we were saying before, ethics was a dimension that was present from the very first stages of development of our project. During the summer, we had the great chance to meet and talk with a few ethicians: M. Vincent Gégoire-Delory, M. Simon Desbois and Mrs Anne Cambon-Thomsen. They helped us develop our reflexion and shared their knowledge with us while still having the skill to let us think by ourselves.

We realized that the iGEM competition is a great time to develop our ethical thinking. Indeed, ethics are a requirement, which is a great opportunity and an advantage compared to being immediately included in an already existing project and never learning to think critically. The ability to carry out this type of deliberation, to question one’s own work, is what singles out a good scientist, in our opinion.

Finally, we would like to share with you this quote by Arthur M. Schlesinger that underlines something that we have learned this summer:

Science and technology revolutionize our lives, but memory, tradition and myth frame our response.

Any ethical reflection, to be pertinent, has to root itself in a society’s history, tradition and beliefs. This is the way in which one will be able to identify the barriers and the fears of the public, and understanding them is the first step to conquering them.