Template:CSS/EPFL csscustom

From 2014.igem.org

body, html { 

 height: 100%;
 width: 100%;

}

h1, h2, h3, h4, h5, h6 { 

border: none;

margin: auto; }

.whitebg ul li { 

 font-size: 18px !important;
 font-weight: 300;
 line-height: 1.4;

}

  1. bodyContent h1, #bodyContent h2 { 
margin-bottom: 0px;

}

hr { margin: auto; margin-top: 20px; margin-bottom: 20px; }

body, h1, h2, h3, h4, h5, h6 { 

 font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

}

.whitebg a, .whitebg a:visited, .whitebg a:active { 

 color: #649CD2 !important;

}

.whitebg a:hover { 

 color: #A5D2DA !important;

}


.intro-header { 

 padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
 padding-bottom: 50px;
 color: #f8f8f8;
 background: url('https://static.igem.org/mediawiki/2014/f/f1/Rlc2.jpg') no-repeat center center;
 background-size: cover;
 text-align: center;

}

.intro-message { 

 position: relative;
 padding-top: 10%;
 padding-bottom: 10%;

}

.intro-message > h1 { 

 margin: 0;
 font-size: 5em;
 text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);

}

.intro-divider { 

 width: 400px;
 border-top: 1px solid #f8f8f8;
 border-bottom: 1px solid rgba(0, 0, 0, 0.2);

}

.intro-message > h3 { 

 text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);

}

@media (max-width: 767px) { 

 .intro-message {
   padding-bottom: 15%;
 }

 .intro-message > h1 {
   font-size: 3em;
 }

 ul.intro-social-buttons > li {
   display: block;
   margin-bottom: 20px;
   padding: 0;
 }

 ul.intro-social-buttons > li:last-child {
   margin-bottom: 0;
 }

 .intro-divider {
   width: 100%;
 }

}

.network-name { 

 text-transform: uppercase;
 font-size: 14px;
 font-weight: 400;
 letter-spacing: 2px;

}

.content-section-a { 

 background-color: #f8f8f8;
 padding: 50px 0;

}

.content-section-b { 

 border-top: 1px solid #e7e7e7;
 border-bottom: 1px solid #e7e7e7;
 padding: 50px 0;

}

.section-heading { 

 margin-bottom: 30px !important;

}

.section-heading-spacer { 

 border-top: 3px solid #e7e7e7;
 width: 200px;
 float: left;

}

.banner { 

 padding: 100px 0;
 color: #f8f8f8;
 background: url(../img/banner-bg.jpg) no-repeat center center;
 background-size: cover;

}

.banner h2 { 

 margin: 0;
 text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
 font-size: 3em;

}

.banner ul { 

 margin-bottom: 0;

}

.banner-social-buttons { 

 float: right;
 margin-top: 0;

}

@media (max-width: 1199px) { 

 ul.banner-social-buttons {
   float: left;
   margin-top: 15px;
 }

}

@media (max-width: 767px) { 

 .banner h2 {
   margin: 0;
   text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
   font-size: 3em;
 }

 ul.banner-social-buttons > li {
   display: block;
   margin-bottom: 20px;
   padding: 0;
 }

 ul.banner-social-buttons > li:last-child {
   margin-bottom: 0;
 }

}

footer { 

 background-color: #f8f8f8;
 padding: 50px 0;

}

p.copyright { 

 margin: 15px 0 0;

}

  1. content { 
   width: 100% !important;
   background: none !important;

}

  1. top-section { 
border: none;
height:auto;

width: 100%; }

  1. globalWrapper {

font-size: 100%; padding-bottom: 0px !important; }

.navbar-brand { padding: 0px; }

  1. content { 
 border: none;
 padding: 0px !important;
 margin: 0px !important;
 width: 100% !important;

}

.right-menu li a { 

background-color: transparent;

color: transparent; }


  1. menubar:hover .right-menu li {

color: white !important; }

  1. menubar { 
   background-color: transparent;
   color: white !important;

}

  1. menubar:hover { 
   background-color: transparent;
   color: white !important;

}

  1. menubar:hover li { 
   background-color: transparent;
   color: white !important;

}


  1. menubar { 
 top: 0px;

}

footer { text-align: center; }



body{ background:#a5d2da; padding:0; color: #454545; font-family: "Helvetica Neue", "PT Sans", sans-serif;} a,a:hover{text-decoration:none; color:#FE5214} h2,h3{color:#fff; text-rendering: optimizelegibility; text-shadow: 1px 2px 3px #40a1b2; } h1{padding:0px; font-weight: 200;font-size: 32px;color: #3f3f3f;margin: 0;font-family: "PT Sans", sans-serif;text-rendering: optimizelegibility;} .debug{ border:1px solid #FFCC33;} h1.brand { 

   background: none repeat scroll 0 0 #299A0B;
   border-radius: 86% 86% 86% 86%;
   box-shadow: 0 0 4px #000000;
   color: #FFFFFF;
   font-size: 41px;
   height: 100px;
   line-height: 81px;
   margin: -87px auto 0;
   padding: 75px 0 0;
   text-shadow: 1px 1px 0 #000000;
   width: 222px;

}

.dl-horizontal dd, .dl-horizontal dt { 

   padding: 10px;
   color: #fff;

}

.span3.logo { 

   padding: 34px 0 0;

}

.clr{clear:both} .cntr{text-align:center} .navbar{margin-bottom:-1px; margin-top:28px; position:relative } .navbar .nav, .navbar .nav > li{float:none; text-align:right; margin-left:20px;} .nav li{display:inline-block; float:none;} .nav a {padding: 3px 18px;font-size: 23px; display: inline-block; color:#3a494c; font-family: "PT Sans", sans-serif;} 

#projectDescription, #project, #applications{padding:70px 0 ; }

.txtR{text-align:right}

  1. projectDescription h1 { 
 margin-bottom: 40px;
 text-shadow: 1px 2px 3px #40a1b2;

}

  1. project { 
 background: #fff;
 text-align: center;
 border-top: 1px solid #ddd;
 padding: 20px;
 padding-top: 40px;

}


  1. project h4 { 
   margin:25px 0;

}

  1. project p { 
   color: #5E5E5E;
   font-size: 20px;
   line-height: 28px;
   padding: 10px;
   font-weight: 200 !important;

}


  1. projectDescription{background: #99d4a5;text-align: center;}
  2. projectDescription h1{ text-transform:uppercase; color:#fff; padding:0;font-size:60px;}
  3. projectDescription p { 
   color: #fff;
   font-size: 19px;
   line-height: 27px;
   margin: 15px 0;

}

  1. projectDescription .span6, #contactSection .span6{ float:none; margin:0 auto; text-align:center;}
  2. projectDescription .thumbnails > li{margin-left: 60px; margin-bottom:60px;}
  3. projectDescription .thumbnails > li.span4{ width:350px;}


  1. applications{background: #fff;}
  2. applications p{margin:20px 0;}
  3. applications .span12{ margin:0;margin-bottom: 36px;}

/* BG COLOR: #ddb3c2 */

  1. meetourteam{ padding:70px 0 ; background:#928FCE; text-align: center; }
  2. meetourteam h1{ text-transform:uppercase; color:#fff; padding:0; font-size:60px;}
  3. meetourteam .thumbnails p { 
   color: #909090;
   font-size: 22px;
   line-height: 27px;
 margin:20px 0;

margin-bottom: 0px;

}

  1. meetourteam p { 
   color: #fff;
   font-size: 19px;
   line-height: 27px;
 margin: 15px 0;

}

  1. meetourteam h4 { 
   font-size: 24px;line-height: 40px; margin:10px 0;

}

  1. meetourteam h5 { 
   font-size: 18px;

}

  1. meetourteam .span6, #contactSection .span6{ float:none; margin:0 auto; text-align:center;}
  2. meetourteam .thumbnails { 
 margin-left: auto;
 margin-right: auto;
 text-align: center;

}

  1. meetourteam .thumbnails > li{ margin-bottom:60px; float: none !important; display: inline-block; }
  2. meetourteam .thumbnails > li.span4{ width:200px; height:250px;}
  3. meetourteam .thumbnails a.twitter{ height:56px; width:56px; background:url(../img/thum-t-icon.png) no-repeat center center;display:inline-block;}
  4. meetourteam .thumbnails a.facebook{ height:56px; width:56px; background:url(../img/thum-f-icon.png) no-repeat center center; display:inline-block;}
  5. meetourteam .thumbnails a.pin{ height:56px; width:56px; background:url(../img/thum-p-icon.png) no-repeat center center;display:inline-block;}


  1. recentpostSection{ padding:70px 0 ; background:#b5d5e1; text-align: center; }
  2. recentpostSection h1{ text-transform:uppercase; color:#fff; padding:0; font-size:60px;}
  3. recentpostSection .thumbnails p { 
   color: #909090;
   font-size: 22px;
   line-height: 27px;
 margin:20px 0 0;
 padding-bottom:10px;

}

  1. recentpostSection p { 
   color: #fff;
   font-size: 19px;
   line-height: 27px;
 margin: 15px 0;

}

  1. recentpostSection h4 { 
   font-size: 32px;line-height: 40px; margin:10px 0;

}

  1. recentpostSection h6 { 
   font-size: 20px; font-style:italic;

}

  1. recentpostSection .span6, #contactSection .span6{ float:none; margin:0 auto; text-align:center;}
  2. recentpostSection .thumbnails > li{margin-left: 60px; margin-bottom:60px;}
  3. recentpostSection .thumbnails > li.span4{ width:350px;}


  1. contactSection{ background:#3b3b3b; text-align:center; padding:70px 0 0;}
  2. contactSection .span8{ float:none; margin:0 auto;}
  3. contactSection h1{ text-transform:uppercase; color:#fff; padding:0;font-size:60px;}
  4. applications h1.cntr { text-transform:uppercase; color:#3A494C; padding:0;font-size:60px; text-align: center; margin-bottom: 20px; }
  1. contactSection p { 
   color: #fff;
   font-size: 19px;
   line-height: 27px;
 margin: 15px 0;

}


  1. headerSection { padding:14px 0 20px;}
  2. welcomeSection{padding:44px 0}
  3. headerSection {display: inline-block;width: 100%;}

.blockDtl {text-align:center} .blockDtl:hover{color:#FE5214}

  1. shadow{ min-height:44px; padding:18px 0; text-align:center}
  1. carouselSection{ margin:0 auto; padding: 38px 0 31px; color:#eee;}
  2. carouselSection #myCarousel{margin-bottom:0}
  3. myCarousel .carousel .item {-webkit-transition: opacity 3s; -moz-transition: opacity 3s; -ms-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s;}
  4. myCarousel .carousel .active.left {left:0;opacity:0;z-index:2;}
  5. myCarousel .carousel .next {left:0;opacity:1;z-index:1;}


.carousel-control { 

 font-size: 150px;

} .inner{margin-bottom:38px;} .blogBlk{background:#fff; display: block;padding: 28px;line-height: 1.6em;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}


.footerSection{ border-top:1px solid #171717; padding:30px 0 ;margin-top: 60px;} .footerSection .copyright a{padding:4px; color:#fed57e; font-size:22px;} .footerSection .container{} .socialicon{ margin-top:0px; width:300px; float:left; text-align:left;} .socialicon a{ margin-right:20px;} .socialicon a:hover{ opacity: 0.6;} a.twitter{ height:56px; width:56px; background:url(../img/t-icon.png) no-repeat center center;display:inline-block;} a.facebook{ height:56px; width:56px; background:url(../img/f-icon.png) no-repeat center center; display:inline-block;} a.html5{ height:56px; width:56px; background:url(../img/icon-1.png) no-repeat center center;display:inline-block;} a.icon2{ height:56px; width:56px; background:url(../img/icon-2.png) no-repeat center center;display:inline-block;}

.footerSection .copyright { text-align:right; color:#a2a3a3;}

  1. contactSection .footerSection .copyright p{ color:#a2a3a3;}


  1. contactSection .footerSection .span8{ float:left; margin:0 0 0 25px;}


.go-top { display: inline-block; position: fixed; bottom: 8px; right: 30px; color: #A5D2DA !important; text-decoration: none; font-size: 30px; background-color: #3A494C; font-size: 15px; padding: 5px; border-radius: 5px } .go-top:hover { display: inline-block; position: fixed; bottom: 8px; right: 30px; background-color: #A5D2DA !important; text-decoration: none; font-size: 30px; color: #3A494C !important; font-size: 15px; padding: 5px; border-radius: 5px }


  1. headerSection .btn.btn-navbar {

width: 100%; text-align: center; border: 0; margin: 0; border-radius: 0; }

  1. headerSection .navbar .btn-navbar .icon-bar {

width: 100%; height: 2px; } .blockDtl{background:#fff}

.carousel-control { 

 background: none;
 border: none;

}



@media (max-width: 600px){

  1. headerSection .btn.btn-navbar {

display: block;}

.nav-collapse .nav>li { float: none; display: block; text-align: left; } .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus { color: #FC3C00; border-bottom: 0; } }


.list-inline li { 

 display: inline-block;
 margin: 10px;
 color: #fff;

}

/*.list-inline img { 

 height: 100px !important;

}*/

  1. biopad { 
 position: absolute;

}

.align-right { text-align: right; }

.align-left { text-align: left; }


  1. results { 
 background: #fff;
 text-align: center;
 border-top: 1px solid #ddd;
 padding: 20px;
 padding-top: 40px;

}


  1. results h4 { 
   margin:25px 0;

}

  1. results p { 
   color: #5E5E5E;
   font-size: 16px;
   line-height: 24px;
   padding: 10px;
   font-weight: 200 !important;
   font-family: "Helvetica Neue" !important;

}

  1. notebook, .whitebg {

background-color: white; }

.notebook-item { padding: 20px; }

.notebook-item h1, .notebook-item h2, .notebook-item h3, .notebook-item h4, .notebook-item h5, .notebook-item h6, .whitebg h1, .whitebg h2, .whitebg h3, .whitebg h4, .whitebg h5, .whitebg h6 { text-shadow: none; color: inherit; }

  1. biobricks_list tr { 
 cursor: pointer;

}

.whitebg { padding: 20px; text-align: justify; }


.table tr th { background-color: #A5D2DA !important; color: white; cursor: auto !important; }

.embed-container iframe { position: absolute; height: 80%; width: 40%; left: 5%; top: 10%; }

.carousel-control { color: white !important; }

.navbar-header { float: left; }

.vignette { height: 300px; margin: 20px; }

.navbar .nav, .navbar .nav > li { float: left; }

.navbar .nav .dropdown-menu li { display: list-item; float: none; }


.dropdown-menu > li { 

text-align:center;

}

.dropdown-menu>li>a:hover, .dropdown-menu>li>a.active, .dropdown-menu>li.active > a { background-color: #A5D2DA !important; color: white; }

.navbar-default { padding-left: 30px; }

  1. carousel .carousel-inner > .item > img { 
   margin: 0 auto !important;

}

.timenav-tag-row-1 { background-color: beige !important; }

.timenav-tag-row-2 { background-color: slategrey !important; }

.timenav-tag h3 { color: white !important; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6) !important; }

.timenav-tag-row-3 { background-color: mediumaquamarine !important; }

.timenav-tag-row-4 { background-color: lightblue !important; }

.timenav-tag-row-5 { background-color: thistle !important; }

/* entire container, keeps perspective */ .flip-container { 

 perspective: 1000;
 -webkit-perspective: 1000;
      margin: 20px;

} 

 /* flip the pane when hovered */
 .flip-container:hover .flipper, .flip-container.hover .flipper {
   transform: rotateY(180deg);
               -webkit-transform: rotateY(180deg);
 }

.flip-container, .front, .back { 

 width: 100%;
 height: 300px;

color: white; }

.front h1, .back h1 { color: white !important; }


/* flip speed goes here */ .flipper { 

 transition: 0.6s;
 transform-style: preserve-3d;
 -webkit-transition: 0.6s;
 -webkit-transform-style: preserve-3d;

 position: relative;

}

/* hide back of pane during swap */ .front, .back { 

 backface-visibility: hidden;
       -webkit-backface-visibility: hidden;

text-align:center; 

 position: absolute;
 top: 0;
 left: 0;
 border-radius: 10px;
 padding: 10px;

}

/* front pane, placed above back */ .front { 

 z-index: 2;
 /* for firefox 31 */
 transform: rotateY(0deg);
       -webkit-transform: rotateY(0deg);

background-color: #7F3E98;

}

/* back, initially hidden pane */ .back { 

 transform: rotateY(180deg);
 -webkit-transform: rotateY(180deg);
 background-color: #999;

}

.valign-middle tr td { vertical-align: middle !important; }

.tab-pane { 

 margin-top: 20px;

}

.thumbnails { background-color: auto; }

.team-member img, .team-member a img { border: 5px solid #E5E5E5; height: 240px; }

.team-member { text-align:center; padding: 50px; }

.team-member h5 { font-style: italic; }

p { font-size: 21px !important; margin-bottom: 20px; font-size: 16px; font-weight: 300; line-height: 1.4; }


body { 

 background-color: #F1F2F6;

}

.page-Team_EPF_Lausanne { 

 background-color: #A5D2DA;

}

.box { background-color: #fff; border: none; border-radius: 4px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-color: #e6e9ed; margin-bottom: 50px; }

.navbar_alt { 

 margin-top: -20px;
 padding-top: 28px;
 margin-bottom: 20px;
 padding-bottom: 20px;
 border-bottom: 3px solid #3A494C;
 border-radius: 0px;

}

.whitebg { 

 padding-top: 30px;

}


/** 

* breadcrumb
* --------------------------------------------------
*/

.breadcrumb { 

 color: #434a54;
 background-color: #e6e9ed;

margin-left: 0px; } .breadcrumb > .active { 

 color: #434a54;

} .breadcrumb a { 

 color: #3bafda;

}

.breadcrumb-arrow { 

 height: 36px;
 padding: 0;
 line-height: 36px;
 list-style: none;
 background-color: white;

} .breadcrumb-arrow li:first-child a { 

         border-radius: 4px 0 0 4px;

 -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;

} .breadcrumb-arrow > li, .breadcrumb-arrow > li > a, .breadcrumb-arrow > li > span { 

 display: inline-block;
 vertical-align: top;

} .breadcrumb-arrow > li:not(:first-child) { 

 margin-left: -5px;

} .breadcrumb-arrow > li + li:before { 

 padding: 0;
 content: "";

} .breadcrumb-arrow > li > span { 

 padding: 0 10px;

} .breadcrumb-arrow > li > a, .breadcrumb-arrow > li:not(:first-child) > span { 

 height: 36px;
 padding: 0 10px 0 25px;
 line-height: 36px;

} .breadcrumb-arrow > li:first-child > a { 

 padding: 0 10px;

} .breadcrumb-arrow > li > a { 

 position: relative;
 color: white;
 text-decoration: none;
 background-color: #A5D2DA;
 border: 1px solid #A5D2DA;

} .breadcrumb-arrow > li:first-child > a { 

 padding-left: 10px;

} .breadcrumb-arrow > li > a:before, .breadcrumb-arrow > li > a:after { 

 position: absolute;
 top: -1px;
 width: 0;
 height: 0;
 content: ;
 border-top: 18px solid transparent;
 border-bottom: 18px solid transparent;

} .breadcrumb-arrow > li > a:before { 

 right: -10px;
 z-index: 3;
 border-left-color: #A5D2DA;
 border-left-style: solid;
 border-left-width: 11px;

} .breadcrumb-arrow > li > a:after { 

 right: -11px;
 z-index: 2;
 border-left: 11px solid #eee;

} .breadcrumb-arrow > li > a:hover, .breadcrumb-arrow > li > a:focus { 

 background-color: #3A494C;
 border: 1px solid #3A494C;

} .breadcrumb-arrow > li > a:hover:before, .breadcrumb-arrow > li > a:focus:before { 

 border-left-color: #3A494C;

} .breadcrumb-arrow > li > a:active { 

 background-color: #3A494C;
 border: 1px solid #3A494C;

}

/*.breadcrumb-arrow li a:active:before, .breadcrumb-arrow li a:active:after { 

 border-left-color: #3A494C;
 background-color: #3A494C;

}*/ .breadcrumb-arrow > li > span { 

 color: #434a54;

}

ul.affix { 

 position: fixed;
 top: 20px;
 width: 25%;
 margin-right: 30px;

}

ul.affix-top { 

 position: static;

}

ul.affix-bottom { 

 width: inherit;
 position: absolute;
 top: auto;

}

/* First level of nav */ .sidenav { 

 margin-bottom: 30px;
 padding-top:    10px;
 padding-bottom: 10px;
 border-radius: 5px;

}

/* All levels of nav */ .sidebar .nav > li > a { 

 display: block;
 color: #3A494C;
 padding: 5px 20px;

}

.sidebar .nav > li > a:hover, .sidebar .nav > li > a:focus { 

 text-decoration: none;
 background-color: #e5e3e9; 
 border-left: 3px solid #A5D2DA;
 font-weight: bold;

} .sidebar .nav > .active > a, .sidebar .nav > .active:hover > a, .sidebar .nav > .active:focus > a { 

 font-weight: bold;
 color: #3A494C;
 background-color: transparent;
 border-left: 3px solid #A5D2DA;

}

/* Nav: second level */ .sidebar .nav .nav { 

 margin-bottom: 8px;

}

.sidebar .nav li a { 

 font-size: 100%;

}

.sidebar .nav .nav > li > a { 

 padding-top:    3px;
 padding-bottom: 3px;
 padding-left: 30px;
 font-size: 90%;

}

  1. affix-nav li { 
 display: block;

}

.navbar { 

  -webkit-backface-visibility: hidden;

}

  1. boxbread { 
 margin-bottom: 15px;

}

@media only screen and (min-width : 768px) { 

   /* Make Navigation Toggle on Desktop Hover */
   .dropdown:hover .dropdown-menu {
       display: block;
   }

}

.dropdown-menu { margin-top: -2px; }

.navbar .dropdown-menu:after { content: ; display: inline-block; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #ffffff; position: absolute; top: -6px; right: 10px; }


.img-border { border: 4px solid #3A494C; border-radius: 5px; }

.img-left { 

 margin-top: 20px;

margin-right: 20px; margin-bottom: 20px; }

.img-right { 

 margin-top: 20px;

margin-left: 20px; margin-bottom: 20px; }


.gold { color: gold; }

.silver { color: silver; }

.bronze { color: #A67D3D; }

.table-center tr td, .table-center tr th { 

 text-align: center;

}


.carousel-inner > .item > a > img { 

 display: inline-block;

}

  1. photo_gallery { 
 text-align: center;

}

  1. photo_gallery img { 
 margin:2px;

}

.cntr .img-responsive { 

 display: inline-block;

}


.nav-pills { text-align: center; }

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover { color: white !important; background-color: #3A494C; }

.sidenav-hidden>.active>ul { display: block; } .sidenav-hidden .nav { display: none; padding-bottom: 10px; }

.btn-primary { color: white !important; background-color: #A5D2DA; border-color: white; }

.whitebg a.btn-primary { color: white !important; }

.whitebg a.btn-primary:hover { color: white !important; } .btn-primary:hover { color: white !important; background-color: #39484B; }


.whitebg blockquote.blockquote-reverse { 

 padding-right: 15px;
 padding-left: 0;
 margin-top: 40px;
 margin-bottom: 40px;
 text-align: right;
 border-right: 5px solid #39484B;
 border-left: 0;
 background-color: #f4f4f4;
 box-shadow: 10px 10px 20px #bbb;

}

.whitebg blockquote.blockquote { 

 padding-left: 15px;
 padding-right: 0;
 margin-top: 40px;
 margin-bottom: 40px;
 text-align: left;
 border-left: 5px solid #39484B;
 border-right: 0;
 background-color: #f4f4f4;
 box-shadow: 10px 10px 20px #bbb;

}

blockquote footer { 

 background-color: transparent;
 padding: 0;
 text-align: inherit;

}

ul { list-style-image: none; list-style-type: circle; }

  1. vignettes .col { 
 padding: 20px;
 padding-right: 50px;
 padding-left: 50px;

}

  1. vignettes { 
 margin-top: 30px;
 margin-bottom: 30px;

}

  1. vignette_microfluidics .front, #vignette_microfluidics .back { 
 background-color: #7F3E98;

}

  1. vignette_stress .front, #vignette_stress .back { 
 background-color: #128023;

}

  1. vignette_yeast .front, #vignette_yeast .back { 
 background-color: #BF5A15;

}

.flip-container img { 

 height: 70%;
 margin-top: 10px;
 margin-bottom: 10px;

}


.back { 

 height: 300px;
 display: table;

}

.back p { 

 display: table-cell;
 vertical-align: middle;

}

  1. vignette_hardware .front, #vignette_hardware .back { 
 background-color: #1B6EAE;

}

  1. vignette_humanpractice .front, #vignette_humanpractice .back { 
 background-color: #F0A30A;

}

  1. vignette_biosafety .front, #vignette_biosafety .back { 
 background-color: #A20025;

}

.fader { 

 position: relative;
 height: 240px;
 width: 240px;
 margin-right: auto;
 margin-left: auto;

}

.fader a:last-child img { 

 position: absolute;
 top: 0; 
 left: 0;
 display: none;
 height: 240px;
 width: 240px;

}

figcaption { margin-top: 5px; }


.navbar-brand { margin-top: -10px; }

Retrieved from "http://2014.igem.org/Template:CSS/EPFL_csscustom"