Template:Nm style: Difference between revisions

From OpenWetWare
Jump to navigationJump to search
(Removing all content from page)
No edit summary
Line 1: Line 1:
<html>


<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:300,100&subset=latin">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script type"text/javascript">
$( document ).ready(function() {
$("style[media*='screen']").remove();
});
</script>
<script type"text/javascript">
//fix heading
var h1 = $(".firstHeading").text().split("/");
$(".firstHeading").text(h1[h1.length-1]);
</script>
<style type="text/css">
/**** Base styles ****/
#column-one, #footer, div#sidebar-main, #contentSub, .firstHeading, #siteSub, #jump-to-nav, .printfooter{
    display: none;
 
}
#content {
    margin: 0;
    padding: 0;
background: #1A1A1A;
border: medium none;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  /*padding: 15px;*/
  font-family: 'Lato', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
  font-size: 2rem;
  font-weight: 200;
  line-height: 1.4;
  background: #1A1A1A;
  color: #999999 ;
  max-width: 1280px;
  padding-top: 55px;
margin-left: auto;
    margin-right: auto;
}
}
h1, h2, h3, p, ul, ol, pre, dl {
  margin-bottom: 1.0em;
  font-weight: 100;
}
h1, h2, #super-list, .box, .tagline, #index-list {
  font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
}
h1, h2, h3 { font-weight: 300; }
h1 {
  font-size: 32px;
  line-height: 1.1em;
}
h2 {
  font-size: 48px;
  line-height: 1.1em;
}
a,
a code {
  color: #FB4;
  text-decoration: none;
}
a:hover,
a:hover code {
  color: #4BF;
}
a:active,
a:active code {
  color: #1FB;
  /*background: black;*/
}
a img { border: none; }
a.anchor{display: block; position: relative; top: -75px; visibility: hidden;}
p{
text-align:left;
}
em { color: #00EF00; }
strong { font-weight: bold; }
blockquote {
  padding-left: 1.0em;
  margin-left: 1.0em;
  border-left: 1px solid #333;
  font-style: italic;
}
#scrollUp {
    background: url("../images/top.png") no-repeat scroll 0 0 transparent;
    bottom: 20px;
    height: 38px;
    right: 10px;
    width: 38px;
}
nav {
  background: rgba(25, 25, 25, 0.85);
  padding: 0px;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
}
nav ul {
  width: 100%;
  margin: 0px auto;
  padding: 0px;
  list-style-type: none;
}
nav ul li {
  float: left;
  line-height:2.5;
}
nav ul li.selected {
  border-bottom: 10px solid #d30d15;
}
nav ul li.home {
  padding: 10px;
}
nav ul a {
  float: left;
  text-decoration: none;
  color: #F2F2F2;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 300;
  padding: 10px 20px 0;
}
#subnav {
    background-color: rgba(25, 25, 25, 0.8);
border-radius: 0 20px 20px 0;
left:0px;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.8;
    list-style: none outside none;
    margin-left: 0;
    padding: 20px;
z-index: 10;
}
#subnav li {
    list-style: none outside none;
}
#content {
    margin-top: 60px;
}
#filters > li{
margin: 5px;
display: inline-block;
}
.box.clickable{
background: none repeat scroll 0 0 #fff;
}
.clickable img {
transition: 0.3s ease;
}
.clickable img:hover {
opacity:0.9;
transition: 0.3s ease;
}
.background {
left: 0;
    margin: 0;
    max-width: 100%;
    padding: 0;
    position: absolute;
}
/*the boxes*/
.box.b2x2{
height: 460px;
width: 460px;
}
.box.b2x2 > img{
display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width: 400px;
}
.box.b2x1{
height: 460px;
}
.box.b1x2{
width: 460px;
}
.box.b1x3{
width: 700px;
}
/*start page*/
.box.logo          { background: #e74c3c;}
.box.intro      { font-size:7.2rem;}
.box > p {
font-size: 16px;
    padding: 0 20px;
    margin-top: 10px;
    text-align: justify;
font-weight: 300;
}
.box > h2 {
font-size: 40px;
    font-weight: 300;
text-align:left;
margin-left: 20px;
    margin-top: 15px;
}
.tease > h2 {
    font-size: 80px;
    font-weight: 100;
    margin-top: 80px;
}
/*project*/
.project{
background-attachment: fixed;
    width: 100%;
padding-bottom: 40px;
}
.project h2 {
color: #FFFFFF;
    font-weight: 300;
    margin-bottom: 30px;
    margin-left: 180px;
    padding-top: 20px;
    position: relative;
}
.project h3 {
    font-size: 26px;
}
.project .box {
margin-bottom: 20px;
    margin-top: 0;
}
.interlude{
background: none repeat scroll 0 0 #2A2A2A;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
border: 1px solid rgba(0, 0, 0, 0.3);
    height: 150px;
    position: relative;
    z-index: 3;
}
.interlude *{
float:left;
}
.interlude h2{
color: #FFFFFF;
    display: block;
    font-weight: 300;
    line-height: 150px;
    margin-left: 24%;
    margin-right: -14%;
    width: 50%;
}
.interlude img{
float: left;
    line-height: 150px;
    margin-left: 10%;
    margin-top: 25px;
    vertical-align: middle;
}
.referneces {
font-size: 14px;
}
.clear{
clear: both;
}
#motivation{ background-image: url("../images/project/background/motivation.png");}
#vesicle{ background-image: url("../images/project/background/vesicle_large_final.png");}
#origami{ background-image: url("../images/project/background/DNA_background_final.png");}
#reaction{ background-image: url("../images/project/background/IR_background.png");}
#nanoreactor{ background-image: url("../images/project/background/nanocontainer_background.png");}
.project_box{
background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    display: block;
    float: left;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    margin-left: 180px;
    margin-right: auto;
    overflow: hidden;
    padding: 10px;
    width: 50%;
}
.figure_box{
    display: block;
    float: left;
    margin-left: 20px;
    overflow: hidden;
    width: 220px;
}
/*se*/
.project_box h2{
color: #1A1A1A;
    display: block;
    font-weight: 300;
    margin-left: 0%;
    margin-right: -10%;
    width: 90%;
}
.project_box p{
    text-align: justify;
margin-bottom: 18px;
}
.project_box li {
margin-left:50px
}
#pb_mot.project_box{
height: 350px;
}
#pb_dna_scaff.project_box{
height: 400px;
}
#pb_dna_req.project_box{
height: 250px;
}
#pb_poly_intro.project_box{
/*right: -20%;*/
height: 200px;
}
#pb_poly_pmoxa.project_box{
/*right: -20%;*/
height: 600px;
width:  1000px;
overflow:scroll;
}
#pb_ir.project_box{
/*right: -20%;*/
height: 1300px;
}
#pb_poly_cp.project_box{
/*right: -20%;*/
height: 600px;
}
/*team page*/
.bio_box {
    background: none repeat scroll 0 0 #E74C3C;
    float: left;
    font-size: 15px;
    height: 440px;
    padding: 15px;
    text-align: justify;
    width: 210px;
}
.bio_box > .name{
font-size: 24px;
    font-weight: 300;
    margin-bottom: 25px;
    text-align: center;
    width: 100%;
}
.bio_box > p{
    text-align: justify;
font-weight: 300;
font-size: 16px;
}
.box.big  img{
    opacity:1;
}
.flag > *{
float:left;
}
.flag > p{
font-size: 18px;
    position: relative;
    text-align: center;
    top: -6px;
    width: 75%;
margin-bottom: 10px;
}
#team .big{
opacity:1;
}
.head{
width:220px;
float:left;
}
/*sponsor page*/
#sponsors .box {
    background: none repeat scroll 0 0 white;
}
#sponsors figcaption {
    height: 65px;
    width: 100%;
font-size: 15px;
    font-weight: 300;
    top: auto;
    bottom: 0;
    opacity: 0;
    transform: translateY(100%);
transition: transform 0.4s, opacity 0.1s 0.3s;
-webkit-transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
}
#sponsors .descr{
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
    font-size: 12px;
    font-weight: 300;
    height: 60px;
margin: 0;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    text-align: justify;
    top: -155px;
    line-height: 1.3;
}
#sponsors .descr p{
width:90%;
margin-left:auto;
margin-right:auto;
}
#sponsors figure.clickable:hover figcaption{
    opacity: 1;
    transform: translateY(0px);
    transition: transform 0.4s, opacity 0.1s;
-webkit-transform: translateY(0px);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
}
#sponsors figure:hover .descr{
    opacity: 1;
    transform: translateY(155px);
    transition: transform 0.4s, opacity 0.1s;
-webkit-transform: translateY(155px);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
}
/*gallery*/
#gallery .box img{
min-height: 220px;
    min-width: 220px;
}
/*ptocols*/
.protocol_box{
background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    display: block;
    float: left;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    margin-left: 40px;
    margin-right: auto;
    overflow: hidden;
    padding: 10px;
    width: 66%;
}
.protocol_box li {
margin-left:50px
}
.protocol_box p{
    text-align: justify;
margin-top: 18px;
}
.protocol_box  h1 {
font-size: 30px;
}
.protocol_box  h2 {
font-size: 24px;
}
.protocol_box  h3 {
font-size: 22px;
}
/*Outreach*/
.outreach_box{
background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    display: block;
    float: left;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    margin-left: 10px;
    margin-right: auto;
    overflow: hidden;
    padding: 10px;
    width: 70%;
}
.outreach_box li {
margin-left:50px
}
/*Acknowlegement*/
.ack_box{
background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
text-align: center;
    display: block;
    float: left;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    margin-left: 10px;
    margin-right: auto;
    overflow: hidden;
    padding: 10px;
    width: 80%;
}
.ack_box p {
text-align: center;
}
.next, .prev{
z-index: 99;
background-image: url("fancybox_sprite.png");
width: 36px;
height: 36px;
top: 200px;
}
figure.box > .next {
left: 425px;
background-position: 0 -72px;
}
figure.box > .prev {
background-position: 0 -36px;
}
/**** Isotope styles ****/
/* required for containers to inherit vertical size from window */
html,
body {
  height: 100%;
}
#container {
  padding: 5px;
  margin-bottom: 20px;
}
.box {
  width: 220px;
  height: 220px;
  margin: 10px;
  float: left;
  overflow: hidden;
  position: relative;
  background: #2A2A2A;
  color: #F2F2F2;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  overflow:hidden;
}
figure.box > *{
left: 0;
    position: absolute;
    right: 0;
}
.box figure{
overflow: hidden;
}
.box figcaption {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
    bottom: 0;
    font-size: 20px;
font-weight: 300;
    padding-left: 5px;
    text-align: center;
    width: 100%;
z-index: 4;
}
.clickable .box:hover {
  cursor: pointer;
}
/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item {
  z-index: 2;
}
.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
      -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}
.isotope {
  -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
      -ms-transition-property: height, width;
      -o-transition-property: height, width;
          transition-property: height, width;
}
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:    -ms-transform, opacity;
      -o-transition-property:      -o-transform, opacity;
          transition-property:        transform, opacity;
}
.rs-wrap:after,
.rs-slider:after,
.rs-thumb-wrap:after,
.rs-arrows:after,
.rs-caption:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    line-height: 0;
    visibility: hidden;
}
/* ===[ Slider ]=== */
.rs-wrap {
    position: relative;
    max-width: 100%;
}
.rs-slide-bg { *zoom: 1 }
.rs-slider > li > a { display: block }
.rs-slider > li {
    list-style: none;
    filter: alpha(opacity=0);
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0 -100% 0 0;
    padding: 0;
    float: left;
    position: relative;
}
    .rs-slider > li > a {
        padding: 0;
        background: none;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
    .rs-slider > li img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        -ms-interpolation-mode: bicubic;
    }
/* ===[ Thumbnails ]=== */
.rs-thumb-wrap { *zoom: 1 }
    .rs-thumb-wrap > a {
        display: block;
        float: left;
        position: relative;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-backface-visibility: hidden; /* Hardware accelerate to prevent jumps on transition */
    }
        .rs-thumb-wrap > a > img {
            max-width: 100%;
            max-height: 100%;
            display: block;
            -ms-interpolation-mode: bicubic;
        }
.rs-thumb-wrap > a:first-child { margin-left: 0!important }
/* ===[ Arrows ]=== */
.rs-arrows .rs-next,
.rs-arrows .rs-prev { z-index: 1; background-image: url("fancybox_sprite.png");}
.rs-arrows .rs-next,
.rs-arrows .rs-prev { z-index: 1; background-image: url("fancybox_sprite.png");}
.rs-arrows:hover .rs-next,
.rs-arrows:hover .rs-prev { z-index: 2; }
/* ===[ Captions ]=== */
.rs-caption {
    position: absolute;
    max-height: 100%;
    overflow: auto;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    bottom: 0;
    left: 0;
}
.rs-caption.rs-top-left {
    top: 0;
    bottom: auto;
}
.rs-caption.rs-top-right {
    top: 0;
    right: 0;
    left: auto;
    bottom: auto;
}
.rs-caption.rs-bottom-left {
    bottom: 0;
    left: 0;
}
.rs-caption.rs-bottom-right {
    right: 0;
    left: auto;
    border-bottom: none;
    border-right: none;
}
.rs-caption.rs-top {
    top: 0;
    bottom: auto;
    width: 100%!important;
}
.rs-caption.rs-bottom { width: 100%!important }
.rs-caption.rs-left {
    top: 0;
    height: 100%;
}
.rs-caption.rs-right {
    top: 0;
    left: auto;
    right: 0;
    height: 100%;
}
/* ===[ Grid ]=== */
.rs-grid {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: none;
}
.rs-gridlet {
    position: absolute;
    opacity: 1;
}
/* Optional - remove captions at smaller screen widths
@media screen and (max-width: 480px) {
.rs-caption { opacity: 0!important; }
}
*/
</style>
<nav role="navigation">
<ul id="navmenu" class="open">
<li><a href="http://openwetware.org/wiki/Biomod/2013/Dresden"><img src="http://openwetware.org/images/0/01/Logo_menu.png"></a></li>
<li><a href="http://openwetware.org/wiki/Biomod/2013/Dresden/team"><i class="menu-icon icon-team"></i><span>Team</span></a></li>
<li><a href="http://openwetware.org/wiki/Biomod/2013/Dresden/project"><i class="menu-icon icon-studio"></i><span>Project</span></a></li>
<li><a href="http://openwetware.org/wiki/Biomod/2013/Dresden/labbook"><i class="menu-icon icon-studio"></i><span>Lab book</span></a></li>
<li><a href="http://openwetware.org/wiki/Biomod/2013/Dresden/outreach"><i class="menu-icon icon-studio"></i><span>Outreach</span></a></li>
<li><a href="http://openwetware.org/wiki/Biomod/2013/Dresden/sponsors"><i class="menu-icon icon-studio"></i><span>Sponsors</span></a></li>
</ul>
</nav>
<script src="https://biomod2013.googlecode.com/svn/trunk/js/jquery.isotope.min.js"></script>
<script src="https://biomod2013.googlecode.com/svn/trunk/js/jquery.refineslide.min.js"></script>
</html>

Revision as of 09:55, 25 October 2013

<html>

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:300,100&subset=latin"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>

<script type"text/javascript"> 

$( document ).ready(function() {

$("style[media*='screen']").remove(); }); </script>

<script type"text/javascript"> //fix heading var h1 = $(".firstHeading").text().split("/"); $(".firstHeading").text(h1[h1.length-1]); </script> <style type="text/css"> /**** Base styles ****/

  1. column-one, #footer, div#sidebar-main, #contentSub, .firstHeading, #siteSub, #jump-to-nav, .printfooter{
   display: none;

}

  1. content {
   margin: 0;
   padding: 0;

background: #1A1A1A; border: medium none; }


html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { 

 margin: 0;
 padding: 0;
 border: 0;
 font: inherit;
 vertical-align: baseline;

}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 

 display: block;

}

body { 

 /*padding: 15px;*/
 font-family: 'Lato', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
 font-size: 2rem;
 font-weight: 200;
 line-height: 1.4;
 background: #1A1A1A;
 color: #999999 ;
 max-width: 1280px;
 padding-top: 55px;
margin-left: auto;
   margin-right: auto;

} } h1, h2, h3, p, ul, ol, pre, dl { 

 margin-bottom: 1.0em;
 font-weight: 100;

}

h1, h2, #super-list, .box, .tagline, #index-list { 

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

}

h1, h2, h3 { font-weight: 300; }

h1 { 

 font-size: 32px;
 line-height: 1.1em;

}

h2 { 

 font-size: 48px;
 line-height: 1.1em;

}


a, a code { 

 color: #FB4;
 text-decoration: none;

}

a:hover, a:hover code { 

 color: #4BF;

}

a:active, a:active code { 

 color: #1FB;
 /*background: black;*/

}

a img { border: none; }

a.anchor{display: block; position: relative; top: -75px; visibility: hidden;}

p{ text-align:left; }

em { color: #00EF00; } strong { font-weight: bold; }

blockquote { 

 padding-left: 1.0em;
 margin-left: 1.0em;
 border-left: 1px solid #333;
 font-style: italic;

}

  1. scrollUp {
   background: url("../images/top.png") no-repeat scroll 0 0 transparent;
   bottom: 20px;
   height: 38px;
   right: 10px;
   width: 38px;

}

nav { 

 background: rgba(25, 25, 25, 0.85);
 padding: 0px;
 position: fixed;
 top: 0px;
 left: 0px;
 right: 0px;
 z-index: 100;

}

nav ul { 

 width: 100%;
 margin: 0px auto;
 padding: 0px;
 list-style-type: none;

} nav ul li { 

 float: left;
 line-height:2.5;

} nav ul li.selected { 

 border-bottom: 10px solid #d30d15;

}

nav ul li.home { 

 padding: 10px;

} nav ul a { 

 float: left;
 text-decoration: none;
 color: #F2F2F2;
 text-transform: uppercase;
 font-size: 20px;
 font-weight: 300;
 padding: 10px 20px 0;

}

  1. subnav {
   background-color: rgba(25, 25, 25, 0.8);

border-radius: 0 20px 20px 0; left:0px; 

   font-size: 18px;
   font-weight: 300;
   line-height: 1.8;
   list-style: none outside none;
   margin-left: 0;
   padding: 20px;

z-index: 10; }

  1. subnav li {
   list-style: none outside none;

}

  1. content {
   margin-top: 60px;

}

  1. filters > li{

margin: 5px; display: inline-block; }

.box.clickable{ background: none repeat scroll 0 0 #fff; }

.clickable img { transition: 0.3s ease; }

.clickable img:hover { opacity:0.9; transition: 0.3s ease; }

.background { left: 0; 

   margin: 0;
   max-width: 100%;
   padding: 0;
   position: absolute;

} /*the boxes*/

.box.b2x2{ height: 460px; width: 460px; } .box.b2x2 > img{ display: block; 

   margin-left: auto;
   margin-right: auto;
   margin-top: 10px;
   width: 400px;

}

.box.b2x1{ height: 460px; }

.box.b1x2{ width: 460px; }

.box.b1x3{ width: 700px; }


/*start page*/

.box.logo { background: #e74c3c;} .box.intro { font-size:7.2rem;}

.box > p { font-size: 16px; 

   padding: 0 20px;
   margin-top: 10px;
   text-align: justify;

font-weight: 300; }

.box > h2 { font-size: 40px; 

   font-weight: 300;

text-align:left; margin-left: 20px; 

   margin-top: 15px;

}

.tease > h2 { 

   font-size: 80px;
   font-weight: 100;
   margin-top: 80px;

}

/*project*/

.project{ background-attachment: fixed; 

   width: 100%;

padding-bottom: 40px; }

.project h2 { color: #FFFFFF; 

   font-weight: 300;
   margin-bottom: 30px;
   margin-left: 180px;
   padding-top: 20px;
   position: relative;

}


.project h3 { 

   font-size: 26px;

}

.project .box { margin-bottom: 20px; 

   margin-top: 0;

}

.interlude{ background: none repeat scroll 0 0 #2A2A2A; box-shadow: 0 0 25px rgba(0, 0, 0, 0.8); border: 1px solid rgba(0, 0, 0, 0.3); 

   height: 150px;
   position: relative;
   z-index: 3;

}

.interlude *{ float:left; }

.interlude h2{ color: #FFFFFF; 

   display: block;
   font-weight: 300;
   line-height: 150px;
   margin-left: 24%;
   margin-right: -14%;
   width: 50%;

}

.interlude img{ float: left; 

   line-height: 150px;
   margin-left: 10%;
   margin-top: 25px;
   vertical-align: middle;

}

.referneces { font-size: 14px; }

.clear{ clear: both; }

  1. motivation{ background-image: url("../images/project/background/motivation.png");}
  1. vesicle{ background-image: url("../images/project/background/vesicle_large_final.png");}
  1. origami{ background-image: url("../images/project/background/DNA_background_final.png");}
  1. reaction{ background-image: url("../images/project/background/IR_background.png");}
  1. nanoreactor{ background-image: url("../images/project/background/nanocontainer_background.png");}

.project_box{ background: none repeat scroll 0 0 #FFFFFF; 

   color: #000000;
   display: block;
   float: left;
   font-size: 18px;
   font-weight: 300;
   line-height: 1.6;
   margin-left: 180px;
   margin-right: auto;
   overflow: hidden;
   padding: 10px;
   width: 50%;

}

.figure_box{ 

   display: block;
   float: left;
   margin-left: 20px;
   overflow: hidden;
   width: 220px;

}


/*se*/

.project_box h2{ color: #1A1A1A; 

   display: block;
   font-weight: 300;

   margin-left: 0%;
   margin-right: -10%;
   width: 90%;

}

.project_box p{ 

   text-align: justify;

margin-bottom: 18px; }

.project_box li { margin-left:50px }

  1. pb_mot.project_box{

height: 350px; }

  1. pb_dna_scaff.project_box{

height: 400px; }

  1. pb_dna_req.project_box{

height: 250px; }

  1. pb_poly_intro.project_box{

/*right: -20%;*/ height: 200px;

}

  1. pb_poly_pmoxa.project_box{

/*right: -20%;*/ height: 600px; width: 1000px; overflow:scroll; }

  1. pb_ir.project_box{

/*right: -20%;*/ height: 1300px; }

  1. pb_poly_cp.project_box{

/*right: -20%;*/ height: 600px; }

/*team page*/ .bio_box { 

   background: none repeat scroll 0 0 #E74C3C;
   float: left;
   font-size: 15px;
   height: 440px;
   padding: 15px;
   text-align: justify;
   width: 210px;

}

.bio_box > .name{ font-size: 24px; 

   font-weight: 300;
   margin-bottom: 25px;
   text-align: center;
   width: 100%;

}

.bio_box > p{ 

   text-align: justify;

font-weight: 300; font-size: 16px; } .box.big img{ 

   opacity:1;

}

.flag > *{ float:left; } .flag > p{ font-size: 18px; 

   position: relative;
   text-align: center;
   top: -6px;
   width: 75%;

margin-bottom: 10px; }

  1. team .big{

opacity:1; }

.head{ width:220px; float:left; }

/*sponsor page*/

  1. sponsors .box {
   background: none repeat scroll 0 0 white;

}


  1. sponsors figcaption {
   height: 65px;
   width: 100%;

font-size: 15px; 

   font-weight: 300;
   top: auto;
   bottom: 0;
   opacity: 0;
   transform: translateY(100%);

transition: transform 0.4s, opacity 0.1s 0.3s; -webkit-transform: translateY(100%); 

   -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;

}

  1. sponsors .descr{

background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4); 

   font-size: 12px;
   font-weight: 300;
   height: 60px;

margin: 0; 

   padding-left: 10px;
   padding-right: 10px;
   padding-top: 10px;
   text-align: justify;
   top: -155px;
   line-height: 1.3;

}

  1. sponsors .descr p{

width:90%; margin-left:auto; margin-right:auto; }

  1. sponsors figure.clickable:hover figcaption{
   opacity: 1;
   transform: translateY(0px);
   transition: transform 0.4s, opacity 0.1s;

-webkit-transform: translateY(0px); 

   -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;

}

  1. sponsors figure:hover .descr{
   opacity: 1;
   transform: translateY(155px);
   transition: transform 0.4s, opacity 0.1s;

-webkit-transform: translateY(155px); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s; }

/*gallery*/

  1. gallery .box img{

min-height: 220px; 

   min-width: 220px;

} /*ptocols*/ .protocol_box{ background: none repeat scroll 0 0 #FFFFFF; 

   color: #000000;
   display: block;
   float: left;
   font-size: 18px;
   font-weight: 300;
   line-height: 1.6;
   margin-left: 40px;
   margin-right: auto;
   overflow: hidden;
   padding: 10px;
   width: 66%;

} .protocol_box li { margin-left:50px }

.protocol_box p{ 

   text-align: justify;

margin-top: 18px; }

.protocol_box h1 { font-size: 30px; }

.protocol_box h2 { font-size: 24px; }

.protocol_box h3 { font-size: 22px; }

/*Outreach*/

.outreach_box{ background: none repeat scroll 0 0 #FFFFFF; 

   color: #000000;
   display: block;
   float: left;
   font-size: 18px;
   font-weight: 300;
   line-height: 1.6;
   margin-left: 10px;
   margin-right: auto;
   overflow: hidden;
   padding: 10px;
   width: 70%;

}

.outreach_box li { margin-left:50px }


/*Acknowlegement*/

.ack_box{ background: none repeat scroll 0 0 #FFFFFF; 

   color: #000000;

text-align: center; 

   display: block;
   float: left;
   font-size: 18px;
   font-weight: 300;
   line-height: 1.6;
   margin-left: 10px;
   margin-right: auto;
   overflow: hidden;
   padding: 10px;
   width: 80%;

} .ack_box p { text-align: center; } .next, .prev{ z-index: 99; background-image: url("fancybox_sprite.png"); width: 36px; height: 36px; top: 200px; }


figure.box > .next { left: 425px; background-position: 0 -72px; }

figure.box > .prev { background-position: 0 -36px; }

/**** Isotope styles ****/

/* required for containers to inherit vertical size from window */ html, body { 

 height: 100%;

}

  1. container {
 padding: 5px;
 margin-bottom: 20px;

}

.box { 

 width: 220px;
 height: 220px;
 margin: 10px;
 float: left;
 overflow: hidden;
 position: relative;
 background: #2A2A2A;
 color: #F2F2F2;
 display: table-cell;
 text-align: center;
 vertical-align: middle;
 overflow:hidden;

}

figure.box > *{ left: 0; 

   position: absolute;
   right: 0;

}

.box figure{ overflow: hidden; }

.box figcaption { 

   background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
   bottom: 0;
   font-size: 20px;

font-weight: 300; 

   padding-left: 5px;
   text-align: center;
   width: 100%;

z-index: 4; }

.clickable .box:hover { 

 cursor: pointer;

}

/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; }

/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item { 

 z-index: 2;

}

.isotope-hidden.isotope-item { 

 pointer-events: none;
 z-index: 1;

}

/**** Isotope CSS3 transitions ****/

.isotope, .isotope .isotope-item { 

 -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
     -ms-transition-duration: 0.8s;
      -o-transition-duration: 0.8s;
         transition-duration: 0.8s;

}

.isotope { 

 -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
     -ms-transition-property: height, width;
      -o-transition-property: height, width;
         transition-property: height, width;

}

.isotope .isotope-item { 

 -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property:    -moz-transform, opacity;
     -ms-transition-property:     -ms-transform, opacity;
      -o-transition-property:      -o-transform, opacity;
         transition-property:         transform, opacity;

} .rs-wrap:after, .rs-slider:after, .rs-thumb-wrap:after, .rs-arrows:after, .rs-caption:after { 

   content: ".";
   display: block;
   height: 0;
   clear: both;
   line-height: 0;
   visibility: hidden;

}

/* ===[ Slider ]=== */

.rs-wrap { 

   position: relative;
   max-width: 100%;

}

.rs-slide-bg { *zoom: 1 }

.rs-slider > li > a { display: block }

.rs-slider > li { 

   list-style: none;
   filter: alpha(opacity=0);
   opacity: 0;
   width: 100%;
   height: 100%;
   margin: 0 -100% 0 0;
   padding: 0;
   float: left;
   position: relative;

} 

   .rs-slider > li > a {
       padding: 0;
       background: none;
       -webkit-border-radius: 0;
       -moz-border-radius: 0;
       border-radius: 0;
   }

   .rs-slider > li img {
       display: block;
       max-width: 100%;
       max-height: 100%;
       -ms-interpolation-mode: bicubic;
   }

/* ===[ Thumbnails ]=== */

.rs-thumb-wrap { *zoom: 1 } 

   .rs-thumb-wrap > a {
       display: block;
       float: left;
       position: relative;
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
       -webkit-backface-visibility: hidden; /* Hardware accelerate to prevent jumps on transition */
   }

       .rs-thumb-wrap > a > img {
           max-width: 100%;
           max-height: 100%;
           display: block;
           -ms-interpolation-mode: bicubic;
       }

.rs-thumb-wrap > a:first-child { margin-left: 0!important }

/* ===[ Arrows ]=== */

.rs-arrows .rs-next, .rs-arrows .rs-prev { z-index: 1; background-image: url("fancybox_sprite.png");}

.rs-arrows .rs-next, .rs-arrows .rs-prev { z-index: 1; background-image: url("fancybox_sprite.png");}

.rs-arrows:hover .rs-next, .rs-arrows:hover .rs-prev { z-index: 2; }

/* ===[ Captions ]=== */

.rs-caption { 

   position: absolute;
   max-height: 100%;
   overflow: auto;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   bottom: 0;
   left: 0;

}

.rs-caption.rs-top-left { 

   top: 0;
   bottom: auto;

}

.rs-caption.rs-top-right { 

   top: 0;
   right: 0;
   left: auto;
   bottom: auto;

}

.rs-caption.rs-bottom-left { 

   bottom: 0;
   left: 0;

}

.rs-caption.rs-bottom-right { 

   right: 0;
   left: auto;
   border-bottom: none;
   border-right: none;

}

.rs-caption.rs-top { 

   top: 0;
   bottom: auto;
   width: 100%!important;

}

.rs-caption.rs-bottom { width: 100%!important }

.rs-caption.rs-left { 

   top: 0;
   height: 100%;

}

.rs-caption.rs-right { 

   top: 0;
   left: auto;
   right: 0;
   height: 100%;

}

/* ===[ Grid ]=== */

.rs-grid { 

   position: absolute;
   overflow: hidden;
   width: 100%;
   height: 100%;
   display: none;

}

.rs-gridlet { 

   position: absolute;
   opacity: 1;

}

/* Optional - remove captions at smaller screen widths @media screen and (max-width: 480px) { .rs-caption { opacity: 0!important; } }

  • /

</style> <nav role="navigation"> <ul id="navmenu" class="open"> <li><a href="http://openwetware.org/wiki/Biomod/2013/Dresden"><img src="http://openwetware.org/images/0/01/Logo_menu.png"></a></li> <li><a href="http://openwetware.org/wiki/Biomod/2013/Dresden/team"><i class="menu-icon icon-team"></i><span>Team</span></a></li> <li><a href="http://openwetware.org/wiki/Biomod/2013/Dresden/project"><i class="menu-icon icon-studio"></i><span>Project</span></a></li> <li><a href="http://openwetware.org/wiki/Biomod/2013/Dresden/labbook"><i class="menu-icon icon-studio"></i><span>Lab book</span></a></li> <li><a href="http://openwetware.org/wiki/Biomod/2013/Dresden/outreach"><i class="menu-icon icon-studio"></i><span>Outreach</span></a></li> <li><a href="http://openwetware.org/wiki/Biomod/2013/Dresden/sponsors"><i class="menu-icon icon-studio"></i><span>Sponsors</span></a></li> </ul> </nav> <script src="https://biomod2013.googlecode.com/svn/trunk/js/jquery.isotope.min.js"></script> <script src="https://biomod2013.googlecode.com/svn/trunk/js/jquery.refineslide.min.js"></script>

</html>

Retrieved from "https://openwetware.org/mediawiki/index.php?title=Template:Nm_style&oldid=745494"