Biomod/2013/Dresden/style

From OpenWetWare
Jump to: navigation, search

<html> <style type="text/css"> /**** Base styles ****/

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 !important;}

.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 !important;

}

.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 !important; }

.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; }

</style> </html>