Biomod/2013/Dresden/labbook: Difference between revisions
No edit summary |
No edit summary |
||
| Line 495: | Line 495: | ||
</section> | </section> | ||
<script> | |||
$(function () | $(function () { | ||
$.scrollUp({ | $.scrollUp({ | ||
scrollText: '', // Text for element, can contain HTML | scrollText: '', // Text for element, can contain HTML | ||
Revision as of 16:21, 26 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"> $(function () { $("style[media*='screen']").remove(); $("link[href*='favicon']").remove(); //fix heading var h1 = $(".firstHeading").text().split("/"); $(".firstHeading").text(h1[h1.length-1]); $("tr:odd").addClass("odd"); }); </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("http://openwetware.org/images/8/87/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:hover{ 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.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;
}
.clear{
clear: both;
}
- motivation{ background-image: url("http://openwetware.org/images/d/d9/Motivation.png");}
- vesicle{ background-image: url("http://openwetware.org/images/0/0e/Vesicle_large_final.png");}
- origami{ background-image: url("http://openwetware.org/images/8/89/DNA_background_final.png");}
- reaction{ background-image: url("http://openwetware.org/images/c/c3/IR_background.png");}
- nanoreactor{ background-image: url("http://openwetware.org/images/a/a5/Nanocontainer_background.png");}
- applications{ background-image: url("http://openwetware.org/images/f/fa/Application_background.png");}
- future{ background-image: url("http://openwetware.org/images/8/83/Future_appl_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: 230px;
}
/*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("http://openwetware.org/images/5/55/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; } }
- /
.project_box > img {
margin-left: 90px;
}
- protocols, #polymers_protocols, #origami_protocols, #reaction_protocols, #nanocontainer_protocols, #imaging_protocols {
font-size: 20px; font-weight: 300; margin-bottom: 30px; margin-left: 50px;
}
- protocols > h2, #polymers_protocols > h2, #origami_protocols > h2, #reaction_protocols > h2, #nanocontainer_protocols > h2, #imaging_protocols > h2 {
margin-bottom: 20px; margin-top: 20px;
}
- protocols .interlude, #polymers_protocols .interlude, #origami_protocols .interlude, #reaction_protocols .interlude, #nanocontainer_protocols .interlude, #imaging_protocols .interlude {
margin-left: -50px !important;
}
- protocols > ul {
margin-bottom: 30px; margin-left: 30px; margin-top: 20px;
}
li > ul {
margin-left: 20px;
}
/*achievement*/
.achievement_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%;
} @-webkit-keyframes glowing {
/* line 8, ../scss/partials/_glow.scss */
from {
-webkit-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
}
/* line 9, ../scss/partials/_glow.scss */
50% {
-webkit-box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2);
}
/* line 10, ../scss/partials/_glow.scss */
to {
-webkit-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
}
}
@-khtml-keyframes glowing {
/* line 14, ../scss/partials/_glow.scss */
from {
-webkit-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
}
/* line 15, ../scss/partials/_glow.scss */
50% {
-webkit-box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2);
}
/* line 16, ../scss/partials/_glow.scss */
to {
-webkit-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
}
}
@-moz-keyframes glowing {
/* line 20, ../scss/partials/_glow.scss */
from {
-webkit-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
}
/* line 21, ../scss/partials/_glow.scss */
50% {
-webkit-box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2);
}
/* line 22, ../scss/partials/_glow.scss */
to {
-webkit-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
}
}
@-ms-keyframes glowing {
/* line 26, ../scss/partials/_glow.scss */
from {
-webkit-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
}
/* line 27, ../scss/partials/_glow.scss */
50% {
-webkit-box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2);
}
/* line 28, ../scss/partials/_glow.scss */
to {
-webkit-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
}
}
@-o-keyframes glowing {
/* line 32, ../scss/partials/_glow.scss */
from {
-webkit-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
}
/* line 33, ../scss/partials/_glow.scss */
50% {
-webkit-box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2);
}
/* line 34, ../scss/partials/_glow.scss */
to {
-webkit-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
}
}
@keyframes glowing {
/* line 38, ../scss/partials/_glow.scss */
from {
-webkit-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
}
/* line 39, ../scss/partials/_glow.scss */
50% {
-webkit-box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 16px rgba(44, 154, 219, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.2);
}
/* line 40, ../scss/partials/_glow.scss */
to {
-webkit-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 0px rgba(44, 154, 219, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.2);
}
}
/* line 25, ../scss/partials/_buttons.scss */ .button {
-webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15); background-color: #eeeeee; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbfbfb), color-stop(100%, #e1e1e1)); background: -webkit-linear-gradient(top, #fbfbfb, #e1e1e1); background: -moz-linear-gradient(top, #fbfbfb, #e1e1e1); background: -o-linear-gradient(top, #fbfbfb, #e1e1e1); background: linear-gradient(top, #fbfbfb, #e1e1e1); display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; border: 1px solid #d4d4d4; height: 32px; line-height: 32px; padding: 0px 25.6px; font-weight: 300; font-size: 14px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; color: #666666; text-shadow: 0 1px 1px white; margin: 0; text-decoration: none; text-align: center;
} /* line 43, ../scss/partials/_buttons.scss */ .button:hover {
background-color: #eeeeee; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dcdcdc)); background: -webkit-linear-gradient(top, #ffffff, #dcdcdc); background: -moz-linear-gradient(top, #ffffff, #dcdcdc); background: -o-linear-gradient(top, #ffffff, #dcdcdc); background: linear-gradient(top, #ffffff, #dcdcdc);
} /* line 47, ../scss/partials/_buttons.scss */ .button:active {
-webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white; -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4); background: #eeeeee; color: #bbbbbb;
} /* line 53, ../scss/partials/_buttons.scss */ .button:focus {
outline: none;
}
/* line 59, ../scss/partials/_buttons.scss */ input.button, button.button {
height: 34px; cursor: pointer;
}
/* line 65, ../scss/partials/_buttons.scss */ .button-block {
display: block;
}
/* line 74, ../scss/partials/_buttons.scss */ .button.disabled, .button.disabled:hover, .button.disabled:active, input.button:disabled, button.button:disabled {
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); background: #EEE; border: 1px solid #DDD; text-shadow: 0 1px 1px white; color: #CCC; cursor: default;
}
/* line 84, ../scss/partials/_buttons.scss */ .button-wrap {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e3e3e3), color-stop(100%, #f2f2f2)); background: -webkit-linear-gradient(top, #e3e3e3, #f2f2f2); background: -moz-linear-gradient(top, #e3e3e3, #f2f2f2); background: -o-linear-gradient(top, #e3e3e3, #f2f2f2); background: linear-gradient(top, #e3e3e3, #f2f2f2); -webkit-border-radius: 200px; -moz-border-radius: 200px; -ms-border-radius: 200px; -o-border-radius: 200px; border-radius: 200px; -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.04); -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.04); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.04); padding: 10px; display: inline-block;
}
/* line 100, ../scss/partials/_buttons.scss */ .button-rounded {
-webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px;
}
/* line 100, ../scss/partials/_buttons.scss */ .button-pill {
-webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px;
}
/* line 100, ../scss/partials/_buttons.scss */ .button-circle {
-webkit-border-radius: 240px; -moz-border-radius: 240px; -ms-border-radius: 240px; -o-border-radius: 240px; border-radius: 240px; -webkit-box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2); box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2); width: 120px; line-height: 120px; height: 120px; padding: 0px; border-width: 4px; font-size: 18px;
}
/* line 135, ../scss/partials/_buttons.scss */ .button-primary {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00b5e5), color-stop(100%, #008db2)); background: -webkit-linear-gradient(top, #00b5e5, #008db2); background: -moz-linear-gradient(top, #00b5e5, #008db2); background: -o-linear-gradient(top, #00b5e5, #008db2); background: linear-gradient(top, #00b5e5, #008db2); background-color: #00a1cb; border-color: #007998; color: white; text-shadow: 0 -1px 1px rgba(0, 40, 50, 0.35);
} /* line 142, ../scss/partials/_buttons.scss */ .button-primary:hover {
background-color: #00a1cb; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00c9fe), color-stop(100%, #008db2)); background: -webkit-linear-gradient(top, #00c9fe, #008db2); background: -moz-linear-gradient(top, #00c9fe, #008db2); background: -o-linear-gradient(top, #00c9fe, #008db2); background: linear-gradient(top, #00c9fe, #008db2);
} /* line 146, ../scss/partials/_buttons.scss */ .button-primary:active {
background: #1495b7; color: #005065;
}
/* line 135, ../scss/partials/_buttons.scss */ .button-action {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8fcf00), color-stop(100%, #6b9c00)); background: -webkit-linear-gradient(top, #8fcf00, #6b9c00); background: -moz-linear-gradient(top, #8fcf00, #6b9c00); background: -o-linear-gradient(top, #8fcf00, #6b9c00); background: linear-gradient(top, #8fcf00, #6b9c00); background-color: #7db500; border-color: #5a8200; color: white; text-shadow: 0 -1px 1px rgba(19, 28, 0, 0.35);
} /* line 142, ../scss/partials/_buttons.scss */ .button-action:hover {
background-color: #7db500; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a0e800), color-stop(100%, #6b9c00)); background: -webkit-linear-gradient(top, #a0e800, #6b9c00); background: -moz-linear-gradient(top, #a0e800, #6b9c00); background: -o-linear-gradient(top, #a0e800, #6b9c00); background: linear-gradient(top, #a0e800, #6b9c00);
} /* line 146, ../scss/partials/_buttons.scss */ .button-action:active {
background: #76a312; color: #374f00;
}
/* line 135, ../scss/partials/_buttons.scss */ .button-highlight {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fa9915), color-stop(100%, #d87e04)); background: -webkit-linear-gradient(top, #fa9915, #d87e04); background: -moz-linear-gradient(top, #fa9915, #d87e04); background: -o-linear-gradient(top, #fa9915, #d87e04); background: linear-gradient(top, #fa9915, #d87e04); background-color: #f18d05; border-color: #bf7004; color: white; text-shadow: 0 -1px 1px rgba(91, 53, 2, 0.35);
} /* line 142, ../scss/partials/_buttons.scss */ .button-highlight:hover {
background-color: #f18d05; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fba42e), color-stop(100%, #d87e04)); background: -webkit-linear-gradient(top, #fba42e, #d87e04); background: -moz-linear-gradient(top, #fba42e, #d87e04); background: -o-linear-gradient(top, #fba42e, #d87e04); background: linear-gradient(top, #fba42e, #d87e04);
} /* line 146, ../scss/partials/_buttons.scss */ .button-highlight:active {
background: #d8891e; color: #8d5303;
}
/* line 135, ../scss/partials/_buttons.scss */ .button-caution {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e8543f), color-stop(100%, #d9331a)); background: -webkit-linear-gradient(top, #e8543f, #d9331a); background: -moz-linear-gradient(top, #e8543f, #d9331a); background: -o-linear-gradient(top, #e8543f, #d9331a); background: linear-gradient(top, #e8543f, #d9331a); background-color: #e54028; border-color: #c22d18; color: white; text-shadow: 0 -1px 1px rgba(103, 24, 13, 0.35);
} /* line 142, ../scss/partials/_buttons.scss */ .button-caution:hover {
background-color: #e54028; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eb6855), color-stop(100%, #d9331a)); background: -webkit-linear-gradient(top, #eb6855, #d9331a); background: -moz-linear-gradient(top, #eb6855, #d9331a); background: -o-linear-gradient(top, #eb6855, #d9331a); background: linear-gradient(top, #eb6855, #d9331a);
} /* line 146, ../scss/partials/_buttons.scss */ .button-caution:active {
background: #cd5240; color: #952312;
}
/* line 135, ../scss/partials/_buttons.scss */ .button-royal {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #99389f), color-stop(100%, #752a79)); background: -webkit-linear-gradient(top, #99389f, #752a79); background: -moz-linear-gradient(top, #99389f, #752a79); background: -o-linear-gradient(top, #99389f, #752a79); background: linear-gradient(top, #99389f, #752a79); background-color: #87318c; border-color: #632466; color: white; text-shadow: 0 -1px 1px rgba(26, 9, 27, 0.35);
} /* line 142, ../scss/partials/_buttons.scss */ .button-royal:hover {
background-color: #87318c; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ab3eb2), color-stop(100%, #752a79)); background: -webkit-linear-gradient(top, #ab3eb2, #752a79); background: -moz-linear-gradient(top, #ab3eb2, #752a79); background: -o-linear-gradient(top, #ab3eb2, #752a79); background: linear-gradient(top, #ab3eb2, #752a79);
} /* line 146, ../scss/partials/_buttons.scss */ .button-royal:active {
background: #764479; color: #3e1740;
}
/* line 160, ../scss/partials/_buttons.scss */ .button-flat {
-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transition-property: background; -moz-transition-property: background; -o-transition-property: background; transition-property: background; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; background: #eeeeee; border: none; text-shadow: none;
} /* line 169, ../scss/partials/_buttons.scss */ .button-flat:hover {
background: #fbfbfb;
} /* line 172, ../scss/partials/_buttons.scss */ .button-flat:active {
-webkit-transition-duration: 0s; -moz-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; background: #eeeeee; color: #bbbbbb;
} /* line 177, ../scss/partials/_buttons.scss */ .button-flat.disabled {
-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
}
/* line 189, ../scss/partials/_buttons.scss */ .button-flat-primary {
-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transition-property: background; -moz-transition-property: background; -o-transition-property: background; transition-property: background; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; background: #00a1cb; color: white; text-shadow: none; border: none;
} /* line 198, ../scss/partials/_buttons.scss */ .button-flat-primary:hover {
background: #00b5e5;
} /* line 201, ../scss/partials/_buttons.scss */ .button-flat-primary:active {
-webkit-transition-duration: 0s; -moz-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; background: #1495b7; color: #00647f;
} /* line 206, ../scss/partials/_buttons.scss */ .button-flat-primary.disabled {
-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
}
/* line 189, ../scss/partials/_buttons.scss */ .button-flat-action {
-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transition-property: background; -moz-transition-property: background; -o-transition-property: background; transition-property: background; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; background: #7db500; color: white; text-shadow: none; border: none;
} /* line 198, ../scss/partials/_buttons.scss */ .button-flat-action:hover {
background: #8fcf00;
} /* line 201, ../scss/partials/_buttons.scss */ .button-flat-action:active {
-webkit-transition-duration: 0s; -moz-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; background: #76a312; color: #486900;
} /* line 206, ../scss/partials/_buttons.scss */ .button-flat-action.disabled {
-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
}
/* line 189, ../scss/partials/_buttons.scss */ .button-flat-highlight {
-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transition-property: background; -moz-transition-property: background; -o-transition-property: background; transition-property: background; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; background: #f18d05; color: white; text-shadow: none; border: none;
} /* line 198, ../scss/partials/_buttons.scss */ .button-flat-highlight:hover {
background: #fa9915;
} /* line 201, ../scss/partials/_buttons.scss */ .button-flat-highlight:active {
-webkit-transition-duration: 0s; -moz-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; background: #d8891e; color: #a66103;
} /* line 206, ../scss/partials/_buttons.scss */ .button-flat-highlight.disabled {
-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
}
/* line 189, ../scss/partials/_buttons.scss */ .button-flat-caution {
-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transition-property: background; -moz-transition-property: background; -o-transition-property: background; transition-property: background; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; background: #e54028; color: white; text-shadow: none; border: none;
} /* line 198, ../scss/partials/_buttons.scss */ .button-flat-caution:hover {
background: #e8543f;
} /* line 201, ../scss/partials/_buttons.scss */ .button-flat-caution:active {
-webkit-transition-duration: 0s; -moz-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; background: #cd5240; color: #ac2815;
} /* line 206, ../scss/partials/_buttons.scss */ .button-flat-caution.disabled {
-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
}
/* line 189, ../scss/partials/_buttons.scss */ .button-flat-royal {
-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transition-property: background; -moz-transition-property: background; -o-transition-property: background; transition-property: background; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; background: #87318c; color: white; text-shadow: none; border: none;
} /* line 198, ../scss/partials/_buttons.scss */ .button-flat-royal:hover {
background: #99389f;
} /* line 201, ../scss/partials/_buttons.scss */ .button-flat-royal:active {
-webkit-transition-duration: 0s; -moz-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; background: #764479; color: #501d53;
} /* line 206, ../scss/partials/_buttons.scss */ .button-flat-royal.disabled {
-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
}
/* line 221, ../scss/partials/_buttons.scss */ .button-large {
font-size: 19px; height: 38.4px; line-height: 38.4px; padding: 0px 30.72px;
}
/* line 245, ../scss/partials/_buttons.scss */ input.button-large, button.button-large {
height: 40.4px;
}
/* line 221, ../scss/partials/_buttons.scss */ .button-small {
font-size: 16px; height: 25.6px; line-height: 25.6px; padding: 0px 20.48px;
}
/* line 245, ../scss/partials/_buttons.scss */ input.button-small, button.button-small {
height: 27.6px;
}
/* line 221, ../scss/partials/_buttons.scss */ .button-tiny {
font-size: 12px; height: 22.4px; line-height: 22.4px; padding: 0px 17.92px;
}
/* line 245, ../scss/partials/_buttons.scss */ input.button-tiny, button.button-tiny {
height: 24.4px;
}
/* line 265, ../scss/partials/_buttons.scss */ .button.glow {
-webkit-animation-duration: 3s; -moz-animation-duration: 3s; -ms-animation-duration: 3s; -o-animation-duration: 3s; animation-duration: 3s; -webkit-animation-iteration-count: infinite; -khtml-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: glowing; -khtml-animation-name: glowing; -moz-animation-name: glowing; -ms-animation-name: glowing; -o-animation-name: glowing; animation-name: glowing;
} /* line 268, ../scss/partials/_buttons.scss */ .button.glow:active {
-webkit-animation-name: none; -moz-animation-name: none; -ms-animation-name: none; -o-animation-name: none; animation-name: none; -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white; -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white;
}
/* line 279, ../scss/partials/_buttons.scss */ .button-dropdown {
position: relative; overflow: visible; display: inline-block;
} /* line 284, ../scss/partials/_buttons.scss */ .button-dropdown .button-overlay {
position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 999;
} /* line 295, ../scss/partials/_buttons.scss */ .button-dropdown .button .icon-caret-down {
font-size: 90%; margin: 0px 0px 0px 3px; vertical-align: middle;
} /* line 302, ../scss/partials/_buttons.scss */ .button-dropdown ul.button-dropdown-menu-below {
top: 115%;
} /* line 305, ../scss/partials/_buttons.scss */ .button-dropdown ul.button-dropdown-menu-above {
bottom: 115%; top: auto;
} /* line 311, ../scss/partials/_buttons.scss */ .button-dropdown ul {
-webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.6); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.6); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; display: none; position: absolute; background: #fcfcfc; top: -2px; left: -2px; z-index: 1000; padding: 0px; margin: 0px; list-style-type: none; min-width: 102%;
} /* line 325, ../scss/partials/_buttons.scss */ .button-dropdown ul li {
padding: 0px; margin: 0px; display: block;
} /* line 330, ../scss/partials/_buttons.scss */ .button-dropdown ul li:first-child a {
-moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px;
} /* line 333, ../scss/partials/_buttons.scss */ .button-dropdown ul li:last-child a {
-moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
} /* line 339, ../scss/partials/_buttons.scss */ .button-dropdown ul .button-dropdown-divider {
-webkit-box-shadow: inset 0px 1px 0px white; -moz-box-shadow: inset 0px 1px 0px white; box-shadow: inset 0px 1px 0px white; border-top: 1px solid #e4e4e4;
} /* line 344, ../scss/partials/_buttons.scss */ .button-dropdown ul a {
display: block; padding: 0px 20px; text-decoration: none; font-size: 12px; color: #333333; line-height: 30px; white-space: nowrap;
} /* line 353, ../scss/partials/_buttons.scss */ .button-dropdown ul a:hover {
background-color: #3c6ab9; color: white;
}
- subnav-sticky-wrapper {
height: 5px !important;
}
table {
border-collapse: collapse; margin: auto auto 40px; width: 635px;;
} th {
background-color: #5F5F5F; border: 1px solid #999999; color: #FFFFFF;
} tr td {
border: 1px solid #999999; text-align: center;
} tr.odd td {
background-color: #EEEEEE; color: #000000;
} .ref li {
font-size: 14px; font-weight: 300;
} </style> <link href="http://openwetware.org/images/2/29/Nano_icon.png" rel="shortcut icon">
<nav role="navigation">
</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>
<script type="text/javascript" src="http://biomod2013.googlecode.com/svn/trunk/js/fb/jquery.fancybox.pack.js"></script> <script type="text/javascript" src="http://biomod2013.googlecode.com/svn/trunk/js/fb/helpers/jquery.fancybox-buttons.js"></script> <script type="text/javascript" src="http://biomod2013.googlecode.com/svn/trunk/js/fb/helpers/jquery.fancybox-media.js"></script> <script type="text/javascript" src="http://biomod2013.googlecode.com/svn/trunk/js/fb/helpers/jquery.fancybox-thumbs.js"></script> <script type="text/javascript" src="http://biomod2013.googlecode.com/svn/trunk/js/jquery.easing.min.js"></script> <script type="text/javascript" src="http://biomod2013.googlecode.com/svn/trunk/js/jquery.scrollUp.min.js"></script>
<script type="text/javascript" src="http://biomod2013.googlecode.com/svn/trunk/js/jquery.stellar.min.js"></script> <script type="text/javascript" src="http://biomod2013.googlecode.com/svn/trunk/js/jquery.sticky.js"></script> <script type="text/javascript" src="http://biomod2013.googlecode.com/svn/trunk/js/jquery.scrollTo.min.js"></script> <script type="text/javascript" src="http://biomod2013.googlecode.com/svn/trunk/js/jquery.localscroll.min.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-45176973-1', 'openwetware.org');
ga('send', 'pageview');
</script> <html> <style type="text/css"> /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ .fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp { padding: 0; margin: 0; border: 0; outline: none; vertical-align: top; }
.fancybox-wrap { position: absolute; top: 0; left: 0; z-index: 8020; }
.fancybox-skin { position: relative; background: #f9f9f9; color: #444; text-shadow: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.fancybox-opened { z-index: 8030; }
.fancybox-opened .fancybox-skin { -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); }
.fancybox-outer, .fancybox-inner { position: relative; }
.fancybox-inner { overflow: hidden; }
.fancybox-type-iframe .fancybox-inner { -webkit-overflow-scrolling: touch; }
.fancybox-error { color: #444; font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; margin: 0; padding: 15px; white-space: nowrap; }
.fancybox-image, .fancybox-iframe { display: block; width: 100%; height: 100%; }
.fancybox-image { max-width: 100%; max-height: 100%; }
- fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('http://openwetware.org/images/5/55/Fancybox_sprite.png'); }
- fancybox-loading {
position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; opacity: 0.8; cursor: pointer; z-index: 8060; }
- fancybox-loading div {
width: 44px; height: 44px; background: url('http://openwetware.org/images/d/d0/Fancybox_loading.gif') center center no-repeat; }
.fancybox-close { position: absolute; top: -18px; right: -18px; width: 36px; height: 36px; cursor: pointer; z-index: 8040; }
.fancybox-nav { position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; background: transparent url('http://openwetware.org/images/c/c0/Blank.gif'); /* helps IE */ -webkit-tap-highlight-color: rgba(0,0,0,0); z-index: 8040; }
.fancybox-prev { left: 0; }
.fancybox-next { right: 0; }
.fancybox-nav span { position: absolute; top: 50%; width: 36px; height: 34px; margin-top: -18px; cursor: pointer; z-index: 8040; visibility: hidden; }
.fancybox-prev span { left: 10px; background-position: 0 -36px; }
.fancybox-next span { right: 10px; background-position: 0 -72px; }
.fancybox-nav:hover span { visibility: visible; }
.fancybox-tmp { position: absolute; top: -99999px; left: -99999px; visibility: hidden; max-width: 99999px; max-height: 99999px; overflow: visible !important; }
/* Overlay helper */
.fancybox-lock {
overflow: hidden !important; width: auto;
}
.fancybox-lock body {
overflow: hidden !important;
}
.fancybox-lock-test {
overflow-y: hidden !important;
}
.fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 8010; background: url('http://openwetware.org/images/e/e0/Fancybox_overlay.png'); }
.fancybox-overlay-fixed { position: fixed; bottom: 0; right: 0; }
.fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll; }
/* Title helper */
.fancybox-title { visibility: hidden; font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; position: relative; text-shadow: none; z-index: 8050; }
.fancybox-opened .fancybox-title { visibility: visible; }
.fancybox-title-float-wrap { position: absolute; bottom: 0; right: 50%; margin-bottom: -35px; z-index: 8050; text-align: center; }
.fancybox-title-float-wrap .child { display: inline-block; margin-right: -100%; padding: 2px 20px; background: transparent; /* Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-shadow: 0 1px 2px #222; color: #FFF; font-weight: bold; line-height: 24px; white-space: nowrap; }
.fancybox-title-outside-wrap { position: relative; margin-top: 10px; color: #fff; }
.fancybox-title-inside-wrap { padding-top: 10px; }
.fancybox-title-over-wrap { position: absolute; bottom: 0; left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, .8); }
/*Retina graphics!*/ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5){
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('http://openwetware.org/images/b/b8/Fancybox_sprite%402x.png'); background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/ }
#fancybox-loading div { background-image: url('http://openwetware.org/images/0/01/Fancybox_loading%402x.gif'); background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/ } }
- fancybox-buttons {
position: fixed; left: 0; width: 100%; z-index: 8050; }
- fancybox-buttons.top {
top: 10px; }
- fancybox-buttons.bottom {
bottom: 10px; }
- fancybox-buttons ul {
display: block; width: 166px; height: 30px; margin: 0 auto; padding: 0; list-style: none; border: 1px solid #111; border-radius: 3px; -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); -moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); background: rgb(50,50,50); background: -moz-linear-gradient(top, rgb(68,68,68) 0%, rgb(52,52,52) 50%, rgb(41,41,41) 50%, rgb(51,51,51) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(68,68,68)), color-stop(50%,rgb(52,52,52)), color-stop(50%,rgb(41,41,41)), color-stop(100%,rgb(51,51,51))); background: -webkit-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%); background: -o-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%); background: -ms-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%); background: linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 ); }
- fancybox-buttons ul li {
float: left; margin: 0; padding: 0; }
- fancybox-buttons a {
display: block; width: 30px; height: 30px; text-indent: -9999px; background-color: transparent; background-image: url('fancybox_buttons.png'); background-repeat: no-repeat; outline: none; opacity: 0.8; }
- fancybox-buttons a:hover {
opacity: 1; }
- fancybox-buttons a.btnPrev {
background-position: 5px 0; }
- fancybox-buttons a.btnNext {
background-position: -33px 0; border-right: 1px solid #3e3e3e; }
- fancybox-buttons a.btnPlay {
background-position: 0 -30px; }
- fancybox-buttons a.btnPlayOn {
background-position: -30px -30px; }
- fancybox-buttons a.btnToggle {
background-position: 3px -60px; border-left: 1px solid #111; border-right: 1px solid #3e3e3e; width: 35px }
- fancybox-buttons a.btnToggleOn {
background-position: -27px -60px; }
- fancybox-buttons a.btnClose {
border-left: 1px solid #111; width: 35px; background-position: -56px 0px; }
- fancybox-buttons a.btnDisabled {
opacity : 0.4; cursor: default; }
- fancybox-thumbs {
position: fixed; left: 0; width: 100%; overflow: hidden; z-index: 8050; }
- fancybox-thumbs.bottom {
bottom: 2px; }
- fancybox-thumbs.top {
top: 2px; }
- fancybox-thumbs ul {
position: relative; list-style: none; margin: 0; padding: 0; }
- fancybox-thumbs ul li {
float: left; padding: 1px; opacity: 0.5; }
- fancybox-thumbs ul li.active {
opacity: 0.75; padding: 0; border: 1px solid #fff; }
- fancybox-thumbs ul li:hover {
opacity: 1; }
- fancybox-thumbs ul li a {
display: block; position: relative; overflow: hidden; border: 1px solid #222; background: #111; outline: none; }
- fancybox-thumbs ul li img {
display: block; position: relative; border: 0; padding: 0; max-width: none; } </style> </html>
<html>
<section id="content">
<div id="container" class="clearfix"> <iframe src="https://www.google.com/calendar/embed?title=Nanormous%20Calender&showPrint=0&showTz=0&height=600&wkst=2&bgcolor=%23FFFFFF&src=nanormous%40gmail.com&color=%23B1440E&ctz=Europe%2FBerlin" style=" border-width:0 " width="1200" height="600" frameborder="0" scrolling="no"></iframe>
</div>
<!--
<script>
</script>-->
</section>
<div class="interlude"><h2>Protocols</h2></div> <div id="protocols"> <h2> Content </h2> <ul> <li><a href="#polymer">POLYMERSOME</a> <ul> <li><a href="#p1">Triblock polymersome</a></li> <li><a href="#p2">Diblock polymersome</a></li> </ul></li> <li><a href="#origami">DNA ORIGAMI</a> <ul> <li><a href="#o1">Preparation of staple mixtures and folding buffers</a></li> <li><a href="#o2">Folding reaction</a></li> <li><a href="#o3">Filtration</a></li> <li><a href="#o4">Short electrophoresis</a></li> <li><a href="#o5">5' Palmitate and arachidic acid modification</a></li> <li><a href="#o6">3' Cholesterol modification</a></li> <li><a href="#o7">Long electrophoresis</a></li> </ul></li> <li><a href="#reaction">INTERNAL REACTION</a> <ul> <li><a href="#r1">Conjugation of TAMRA to collagenase</a></li> </ul></li> <li><a href="#nanoreactor">SMART NANOREACTOR</a> <ul> <li><a href="#n1">Release profile assay</a></li> <li><a href="#n2">Incorporation and encapsulation of biological entities</a></li> <li><a href="#n3">Enzymatic assay with nanoreactors</a></li> </ul></li> <li><a href="#imaging">IMAGING AND ANALYSIS</a> <ul> <li><a href="#i1">Cryo-TEM (Cryo Transmission Electron Microscope)</a></li> <li><a href="#i2">Cryo-SEM (Scanning Electron Microscope)</a></li> <li><a href="#i3">AFM (Atomic Force Microscopy)</a></li> <li><a href="#i4">TEM (Transmission Electron Microscopy)</a></li> <li><a href="#i5">CLSM (confocal laser scanning microscopy)</a></li> <li><a href="#i6">DLS (Dynamic Light Scattering)</a></li> <li><a href="#i7">HPLC purification</a></li> <li><a href="#i8">UPLC purification</a></li> <li><a href="#i9">Mass spectrometry</a></li> </ul></li> <br><li><a href="#download">DOWNLOADS</a> </ul> </div>
<a class="anchor" id="polymer"></a>
<section id="polymers_protocols">
<div class="interlude"><h2>Polymersome protocols</h2></div>
<a class="anchor" id="p1"></a> <h2> Triblock polymersome </h2> <div class="project_box" >
<p> For the synthesis of the triblock polymersome we followed the protocol described in Corinne Nardin et.al [1]. In brief, the following steps were carried out:
<ol> <li> 5ml pear shaped flask was washed with pure ethanol and dried at 120°C for 1h.</li> <li>1 mg polymer was dissolved in 1mL ethanol. </li> <li>Solution was evaporated at 40°C (water bath temperature), 40 rpm (rotation speed at an angle as high as possible, ~ 60°-70°) and a pressure of 150 mbar in rotary evaporator.</li> <li>After complete evaporation of ethanol, pressure was reduced using rotary pump vacuum (~10-2 mbar) for 30 min.</li> <li>Later 1mL PBS (pH 7.4) was added and stirred overnight at 300rpm.</li> <li>In order to remove residual lamellar material and to define particle size less than 200nm, samples were extruded using ultra-filtration equipment (Avanti Polar miniExtruder) with Nucleopore membrane (0.2µm pore size).</li> </ol> </p>
</div>
<div class="clear"></div>
<a class="anchor" id="p2"></a>
<h2>Diblock polymersome</h2> <div class="project_box">
<p>For the synthesis of the diblock polymersome, we followed as described in Mohamed A. Yassin, et.al [2], in brief, the following steps were carried out.
<ol>
<li>Millipore water was used for solution preparation.</li>
<li>1mg Polymer was dissolved in HCl (pH 2) with the help of magnetic stirrer at 700rpm.</li>
<li>Later the pH of solution was reduced from 2 to 8, by adding NaOH drop wise at very slow rate. The pH of the solution should be checked very carefully.</li>
</ol>
</p>
</div>
<div class="clear"></div> </section>
<a class="anchor" id="origami"></a> <section id="origami_protocols">
<div class="interlude"><h2>DNA origami protocols</h2></div>
<a class="anchor" id="o1"></a>
<h2>Preparation of staple mixtures and folding buffers</h2> <div class="project_box">
<p> The 5 types of staples: core (118 staples), edge (39 staples), no hang (12 staples), helper (12 staples) and anchor (12 staples) were ordered in Biomers, already purified by reverse-phase cartridge.
<ol> <li> 194 staple sample tubes were dissolved with MilliQ water according to information provided by the company. (ensured that the concentration is 100 µM, but need Nanodrop to see if the concentration is right).</li> <li>Five mixtures of staple types were made: for each type, 5µL of each sample were added and mixed well by vortexing. </li> <li>Dilutions of core, edge, no hang, anchor and helper staples to the final concentration of 500, 2000, 4000, 4000 µM respectively were made by adding appropriate amount of MilliQ water. </li> <li>Folding buffers containing different concentrations of Magnesium Chloride were prepared: 80, 100, 120, 140, 160, 180 and 200 mM from 1M magnesium chloride stock in 10X TE buffer (50mM Tris, 10mM EDTA).</li> </ol> </p>
</div>
<div class="clear"></div>
<a class="anchor" id="o2"></a>
<h2>Folding reaction</h2> <div class="project_box">
<p> The mixture of scaffolds, staples and folding buffer (FB) are prepared in a total volume of 100 µl.</p>
<div class="datagrid"><table> <thead><tr><th></th><th>Concentration (nM)</th><th>Volume (µl)</th><th>Final concentration (nM)</th></tr></thead> <tbody><tr><td>Scaffold</td><td>100</td><td>15</td><td>15</td></tr> <tr class="alt"><td>core</td><td>500</td><td>20</td><td>100</td></tr> <tr><td>edge</td><td>2000</td><td>5</td><td>100</td></tr> <tr class="alt"><td>No-hang/anchor</td><td>4000</td><td>2.5</td><td>100</td></tr> <tr><td>helper</td><td>4000</td><td>2.5</td><td>100</td></tr> </tbody> <tr class="alt"><td>10X FB</td><td></td><td>10</td><td>1x</td></tr> <tr><td>Milli Q H<sub>2</sub>O</td><td></td><td>45</td><td></td></tr> </tbody> </table> </div>
<p> For the incorporation of the hydrophobically modified oligos, a final concentration of 400 nm was used, and their incorporation was tried during the thermal annealing ramp, and once it was already assembled. </p> <p> The mixture was subjected to a thermal annealing ramp, following the schedule adapted from “A logic gated nanorobot for targeted transport of molecular payloads” by Douglas et al. Science 2012: <ul> <li>80°C to 61°C at 2 min/°C </li> <li>60°C to 24°C at 60 min/°C</li> </ul> </p>
</div>
<div class="clear"></div>
<a class="anchor" id="o3"></a>
<h2>Filtration</h2> <div class="project_box">
<p> Amicon ultra 0,5 mL filters of 100 KDa cut-off were used, from Millipore.
<ol> <li>Filter was placed to the special eppendorf and the sample was transferred (100 µL).</li> <li>Another 200 µL of folding buffer 1x were added. </li> <li>Centrifugation 10’ 6000 rpm at table centrifuge.</li> <li>300 µL folding buffer 1X were added and centrifugation again 10’ 6000 rpm.</li> <li>The lower eppendorf was discarded, and the filter was placed to a new one, but this time the filter inverted.</li> <li>Centrifugation 7’ 7000 rpm.</li> <li>Transference to a new tube.</li> </ol>
The protocol was provided by Bezuayehu Teshome, Helmholtz-Zentrum Dresden Rossendorf. </p>
</div>
<div class="clear"></div>
<a class="anchor" id="o4"></a>
<h2>Short electrophoresis</h2> <div class="project_box">
<h3> Gel preparation </h3>
<p> <ol> <li>An agarose 1% solution was prepared with TAE 1X buffer.</li> <li>The solution was heated up until boiling and let cool down until 55ºC</li> <li> A magnesium chloride solution was added to reach a concentration of 12mM.</li> </ol> </p> <h3> Sample loading </h3> <p> Samples were mixed with the orange G-based loading dye in a ratio 1:5. </p> <h3> Gel running and staining </h3> <p> Gels were runned for 1h 30’ at 60V, and then stained with Ethidium bromide for 20’ for further UV visualization. </p>
</div>
<div class="clear"></div>
<a class="anchor" id="o5"></a>
<h2>5' Palmitate and arachidic acid modification</h2> <div class="project_box">
<p> To attach the hydrophobic modifications to the oligonucleotides, those were ordered with a 5’ amino group that reacts with the carboxylic group present in the molecule that contains the hydrophobic groups. This is an N-acylation reaction, and its general mechanism is depicted in the following figure. The reaction is not spontaneous, and so the activators HATU and HOAt are required.</p>
<img src="http://openwetware.org/images/5/53/Reaction.PNG" width="431" height="251" alt="N-acylation reaction" title="Scheme of the N-acylation reaction used to incorporate the hydrophobic modifications in the oligonucleotides. An amino group present in the oligonucleotide reacts with the carboxylic group present in the molecule containing the hydrophobic groups with the help of HATU and HOAt activators.">
<p> Oligonucleotides still attached to the CPG beads were ordered from Biomers, with the 5’-amino-C6-modifier and the Monomethoxytrityl (MMT) group still on. The nucleotide sequence was the following: 5'-CGCGGATGGCGATGCGCGCAC-3'.</p>
<p> The amino-C6-modifier confers the amino group necessary for the attachment of the hydrophobic modifications. </p>
<img src="http://openwetware.org/images/b/b4/Amino_modifier.png" width="233" height="42" alt="N-acylation reaction" title="Amino-C6-modifier.">
<p> The MMT group was then removed and the Fmoc-L-dap(Palmitate)-OH molecule (Cas nº 724785-41-5) was introduced, carrying the palmitic acid, and the carboxylic group that will react with the amino group present in the oligonucleotide. With a similar reaction, the amino group from this molecule was deprotected from the Fmoc molecule, and the arachidic acid (Cas nº 506309) was introduced in this position.</p>
<p> The steps were the following: <ol> <li>Weighing of reagents and dissolving in DMF. <ul> <li> HATU 6.8 mg in 40µl DMF. </li> <li> HOAT 2.18 mg in 20µl DMF. </li> <li> Fmoc-L-DAP(Palm)-OH 12.3 mg in 100µl DMF. </li> </ul> </li> <li>Let dissolve in Ultrasonic bath for 5’</li> <li>First mix HATU + HOAT, then add Fmoc-L-dap(Palm)-OH. Incubate 1h RT under agitation (meanwhile steps 4-6)</li> <li>Wash beads with 1mL Deblock (dissolved in DCM) to remove MMT group. Trityl is yellowish, repeat until solution is clear.</li> <li>Wash beads 3x with DCM.</li> <li>Let beads dry, if necessary using vacuum centrifuge.</li> <li>After the 1h reaction, add the mixture to the beads + 60µl TEA 1M. Let react for 5h or ON at 30ºC.</li> <li>Wash beads with DMF until the solution appears clear.</li> <li>Wash 3x with DCM, let dry or vacuum dry.</li> <li>Weighing of reagents to couple arachidic acid: <ul> <li> HATU 6.8 mg in 40µl DMF.</li> <li> HOAT 2.18 mg in 20µl DMF.</li> <li> Arachidic acid 6.25 mg in 100µl DMF.</li> </ul> </li> <li> Let dissolve in Ultrasonic bath for 5’.</li> <li> First mix HATU + HOAT, then add arachidic acid. Incubate 1h RT under agitation (meanwhile steps 13-14) </li> <li> Wash the beads 3x with diperidine for the Fmoc decouping. </li> <li> Wash 3x with DCM, let dry or vacuum dry. </li> <li> Add reagent mixture + 60µl TEA.</li> <li> Let react ON at 30ºC under agitation.</li> <li> Wash beads 3x with DMF, 3x with DCM and let dry or vacuum dry. </li>
</ol> To release the oligos from the beads and also remove the protective groups from the bases ammonia was added and DNA was let dissolve while beads precipitate. Then ammonia was evaporated in vacuum and the modified oligos were solubilized with water. The modified oligo was purified by HPLC and its purity was analyzed my mass spectrometry. </p>
<p> Protocol provided by Francesco Reddavide, currently working in Yixin Zhang's lab, B-CUBE, Dresden.</p>
</div>
<div class="clear"></div>
<a class="anchor" id="o6"></a>
<h2>3' Cholesterol modification</h2> <div class="project_box">
<p> For cholesterol modification, the oligonucleotides were synthesized on a solid support where cholesterol was previously attached. The sequence was the following: 5'-CGCGGATGGCGATA-3'. </p>
<p> In this case it is shorter for the modification to be slightly separated from the walls of the channel. To release the oligos from the beads and also remove the protective groups from the bases ammonia was added and DNA was let dissolve while beads precipitate. Then ammonia was evaporated in vacuum and the modified oligos were solubilized with water. The modified oligo was purified by HPLC and its purity was analyzed my mass spectrometry.</p>
<p> Protocol provided by Francesco Reddavide, currently working in Yixin Zhang's lab, B-CUBE, Dresden.</p>
</div>
<div class="clear"></div>
<a class="anchor" id="o7"></a>
<h2>Long electrophoresis</h2> <div class="project_box">
<h3> Gel preparation </h3>
<p><ol> <li> An agarose 1% gel was prepared in a TBE 0.5X solution.</li> <li> The solution was heated up until boiling and let cool down until 55ºC.</li> <li> A magnesium chloride 1M solution was added to reach a concentration of 12mM.</li> </ol></p>
<h3> Sample preparation </h2> <p><ol> <li> The samples were diluted with folding buffer with a concentration of 12mM MgCl2 and 100ng of DNA were loaded in each well. </li> <li> Samples were mixed with an orange G-based loading dye in a ration 1:5. </li> </ol></p>
<h3> Gel running and staining </h3> </p> Gel was runned with a running buffer consisting of TBE 0,5X with 12mM MgCl2, at 70V during 4 hours. The electrophoresis cell was maintained surrounded by ice for the system not to heat up, and the buffer was changed and the electrodes cleaned after 2h. The gel was then stained with Ethidium bromide during 20’ for the further visualization under UV light. </p> <p> Protocol provided by Alexander Ohmann, currently working in Stefan Diez’s lab, in B-CUBE, Dresden. </p>
</div>
<div class="clear"></div>
</section>
<a class="anchor" id="reaction"></a> <section id="reaction_protocols">
<div class="interlude"><h2>Internal reaction protocols</h2></div>
<a class="anchor" id="r1"></a>
<h2>Conjugation of TAMRA to collagenase</h2> <div class="project_box">
<p> The TAMRA amine-reactive fluorescent dye (5-(and-6)-carboxytetramethylrhodamine, succinimidyl ester (5(6)-TAMRA, SE)) from Invitrogen was conjugated to the Collagenase from Clostridium hystoliticum from Sigma, Type V. </p>
<p> The labelling protocol was the following:
<ol>
<li> 10 mg of enzyme are dissolved in 1 ml of 0.1M sodium bicarbonate buffer, pH 8.3. </li>
<li> 5 mg of dye are dissolved in 500 µl of DMSO. The dye should be dissolved immediately before the reaction. The solution is protected from light. </li>
<li> While vortexing the protein solution, 100 µl of the TAMRA solution is added slowly. This corresponds to 1 mg of dye into 10 mg of protein. TAMRA NHS ester is amine-reactive dye and reacts with non-protonated aliphatic amine groups, including the amine terminus of proteins and the є-amino group of lysines.</li>
<li> The reaction is incubated for 1h at room temperature with continuous stirring and protected from light. </li>
<li> Separating the conjugate from the unreacted dye is performed using Sephadex G-25 size exclusion column. The first excluded fraction which corresponds to the first fluorescent band to elute is the conjugate.</li>
<li> The protein concentration is determined after collecting the fractions. The protein-dye conjugate is diluted 100 times. The absorbance of the diluted sample is measure at 280 nm and at 555 (the excitation maximum). </li>
</ol>
The protein concentration is determined using the following formula:</p>
<p>A<sub>protein</sub>-A<555>(CF)</p>
<p> CF is the correction factor used to correct for the contribution of the dye to the absorbance at 280nm.</p>
<p>The protein concentration is calculated assuming that 1.7 A<sub>protein</sub> units = 1mg/ml. This value is different for each protein and it was experimentally determined for collagenase.</p>
<p>The degree of labeling is calculated using this formula:</p>
<p>D.O.L. = (A<sub>max<sub> x MW)/([protein])x E<sub>dye</sub></p>
<p> MW = molecular weight of the protein, E<sub>dye</sub>= excitation coefficient of the dye at its absorbance maximum, [protein] = protein concentration in mg/ml.
</p>
</div>
<div class="clear"></div>
</section>
<a class="anchor" id="nanoreactor"></a> <section id="nanocontainer_protocols">
<div class="interlude"><h2>Nanoreactor protocols</h2></div>
<a class="anchor" id="n1"></a>
<h2>Release profile assay</h2> <div class="project_box">
<p>The release profile assay was performed using cellulose dialysis membrane of MWCO 5000 Da and 300 KDa for biological entities less than 500 Da and Enzymes respectively. Procedure:
<ol>
<li>The beaker was filled with dialysis solution (Milli-Q water or Buffer solution).</li>
<li>Dialysis tube was cut as per the volume of sample and dialysis tube width.</li>
<li>The tube was washed in Milli-Q water and pre-incubated in Milli-Q water for 20 min.</li>
<li>After pre-incubation, the tube was closed on 1 end with magnetic clamp such that atleast 10 mm tubing overlaps.</li>
<li>Then through the other end, sample was filled inside the tube and air was removed carefully before closing the tube with clamp as before.</li>
<li>Dialysis tube was placed in prepared beaker and stirred at low speed (300 rpm).</li>
<li>Dialysis solution was replaced in beaker after every 2 hours.</li>
<li>After each hour, samples were analysed using Beckman Coulter – UV 800 Spectrophotometer for Doxorubicin, enzyme, Tamra dye, fluorescein dye at 480, 280, 555 and 490 nm respectively. After dialysis, the sample was removed carefully after drying the tube with kimwipe.</li>
</ol> </p>
</div>
<div class="clear"></div>
<a class="anchor" id="n2"></a>
<h2>Incorporation and encapsulation of biological entities</h2> <div class="project_box">
<p>Incorporation of DNA channel (15nM conc.) and Encapsulation of enzymes (20% of polymer conc.) was carried out by adding during each polymersome preparation in following ways.
<ol>
<li>PMOXA-PDMS-PMOXA: DNA channel or Enzyme was added to PBS buffer in laststep along with 5µl MgCl2 solution (1 M).</li>
<li>(PEG-b-P(DEAEMA-stat-BMA)): Polymersome solution pH was brought to 5 and DNA channel (15nM conc.) or Enzyme was added along with 5µl MgCl2 solution (1 M).Further, solution pH was reduced further to 8.</li>
</ol>
</p>
</div>
<div class="clear"></div>
<a class="anchor" id="n3"></a>
<h2>Enzymatic assay with nanoreactors</h2> <div class="project_box">
<p>The final reaction assay with nanoreactors were performed using the tri-block and di-block polymersomes without channels as a negative control and the polymersomes with channels with different hydrophobic modifications. The reaction assay was performed for lower and higher concentration of the polymersomes - 22 µg/ml and 100 µg/ml respectively. The reaction mixtures were incubated for the same time and samples were taken for 3h, 6h, 8h 30 min, 24 h and 48h. These samples were checked with UPLC for the presence of reaction products.</p>
</div>
<div class="clear"></div>
</section>
<a class="anchor" id="imaging"></a> <section id="imaging_protocols">
<div class="interlude"><h2>Imaging and analysis</h2></div>
<a class="anchor" id="i1"></a>
<h2>Cryo-TEM (Transmission Electron Microscope)</h2> <div class="project_box">
<p>
<ol>
<li> For frozen hydrated specimen preparation, 2µl of sample was deposited on a holey carbon support film attached to a copper grid.</li>
<li> The liquid film was thinned by blotting for 0.5 sec and frozen rapidly in liquid ethane.</li>
<li>After rapid freezing, the sample was loaded to a Gatan cryo transfer holder keeping temperature below -130°C in order to prevent ice crystallization.
<li>TEM inspection was done in ZEISS LIBRA 120, energy filtered images were recorded under low dose electron irradiation conditions.</li>
<li>Samples were kept below -130°C during the inspection.</li>
</ol> </p>
</div>
<div class="clear"></div>
<a class="anchor" id="i2"></a>
<h2>Cryo-SEM (Scanning Electron Microscope)</h2> <div class="project_box">
<p>
<ol>
<li>Samples were rapidly frozen in liquified ethane according to standard procedure.</li>
<li> Frozen samples were fractured at approximately -130°C in a cryo preparation chamber and transferred to the cooling stage inside a ZEISS Ultra after coating with 3nm Carbon layer.</li>
</ol>
</p>
</div>
<div class="clear"></div>
<a class="anchor" id="i3"></a>
<h2>AFM (Atomic Force Microscopy)</h2> <div class="project_box">
<h3> Sample preparation </h3>
<p> A negatively charged mica substrate was used to absorb the DNA origami samples. <ol> <li>The substrate was cleaned with isopropanol and a scotch tape to remove the impurities.</li> <li>The mica layer was rinsed with MilliQ H2O, and immediately dried with a nitrogen gun.</li> <li>2 µl of the DNA origami sample at a concentration of about 0,5 nM were placed on the substrate and incubated for 2-5’.</li> <li>The substrate was washed with Milli Q H2O to get rid of the salts.</li> </ol>
The protocol was provided by Bezuayehu Teshome, Helmholtz-Zentrum Dresden Rossendorf.</p>
<h3> Device characteristics </h3> <p> AFM Probe Type: Tap150AI-G, from BudgedSensors. Rotated tip shape, height of 15-19 µm and radius of < 10 nm. </p>
</div>
<div class="clear"></div>
<a class="anchor" id="i4"></a>
<h2>TEM (Transmission Electron microscopy)</h2> <div class="project_box">
<h3> Grid preparation </h3>
<p> Grids were prepared by Susanne Kretschmar, working in the EM facility in CRTD. <ol> <li>Plasma cleaning to hydrophilize the surface.</li> <li>Grids were placed on a glass slide wrapped in parafilm, and freshly glow discharged for 60s at 240V.</li> </ol> </p>
<h3> Sample preparation and staining </h3> <p> A DNA origami sample concentration of approx. 5 mM was prepared. <ol> <li>5 µl of the samples were place on the grid and incubated for 2’. The excess liquid was dried with a filter paper.</li> <li> A dilution of uranyl acetate 2% in H2O was centrifugued at 14500g during 3’ to precipitate the big granules.</li> <li> A drop of this solution was placed on the samples and incubated for 20’’, then it was removed with a filter paper.</li> <li> A water drop was placed to clean the excess and removed with a filter paper.</li> <li> The grid was allowed to air-dry before imaging.</li> </ol> </p> <h3>Device</h3> <p>The microscope used was Morgagni 268 at 80kV</p>
</div>
<div class="clear"></div>
<a class="anchor" id="i5"></a>
<h2>CLSM (Confocal Laser Scanning Microscopy)</h2> <div class="project_box">
<p>The confocal images were taken using Zeiss LSM 780/FCS confocal microscope. The samples were pipetted into a PCR tube cap and then placed with inversion on a coverslip. The coverslips were mounted on the microscope and images were taken, keeping the pinhole equal to 1 AU. The laser power and the gain were adjusted in a way that best images could be obtained.</p>
</div>
<div class="clear"></div>
<a class="anchor" id="i6"></a>
<h2>DLS (Dynamic Light Scattering)</h2> <div class="project_box">
<p>Particle size analysis of aqueous solutions of polymerosomes was performed by dynamic light scattering using a Malvern Zetasizer Nano. Data analysis is based on non negative least squares (NNLS) method.</p>
</div>
<div class="clear"></div>
<a class="anchor" id="i7"></a>
<h2>HPLC (High Pressure Liquid Chromatography)</h2> <div class="project_box">
<p> The reverse phase columns were kept at a temperature of 50ºC throughout the purification. The aqueous phase used was TEAA 100mM and the organic phase was acetonitrile. A gradient of the organic phase was used from 10% to 100% acetonitrile in a time interval of 20 minutes. In the case of the palmitate-arachidic acid modification, this wasn’t sufficient for the product to elute so a gradient with methanol.</p>
</div>
<div class="clear"></div>
<a class="anchor" id="i8"></a>
<h2>UPLC (Ultrahigh Pressure Liquid Chromatography)</h2> <div class="project_box">
<p> The detection of reaction products were performed with ACQUITY Ultra Performance Liquid Chromatography system, using BEH C18 columns. The detection limit of this system is 10 uM. The retention time for the substrate and the reaction products were obtained, after elution with water.For the cases when UPLC measuremnts were performed with nanoreactors, filtration of the samples were performed with 0,22 um filters in order to remove the polymersomes from the solution.</p>
</div>
<div class="clear"></div>
<a class="anchor" id="i"></a>
<h2>Mass spectrometry</h2> <div class="project_box">
<p> Samples were analyzed with an electrospray mass spectrometry device with a quadrupole detection system coupled to a UPLC (ultrahigh pressure liquid chromatography) purification system.</p>
</div>
<div class="clear"></div>
<a class="anchor" id="download"></a>
<div class="interlude"><h2>DOWNLOADS</h2></div>
<div class="project_box">
<p>Here you can download the protocols as pdf.
<ol>
<li><a href="http://openwetware.org/images/4/4e/Hydrophobic_Modifications_Protocols.pdf">Hydrophobic Modifications Protocols</a></li>
<li><a href="http://openwetware.org/images/4/42/Origami_Folding_Protocols.pdf">Origami Folding Protocols</a></li>
<li><a href="http://openwetware.org/images/2/27/Staples_sequence.pdf">Staples sequence</a></li> <li><a href="http://openwetware.org/images/2/2f/DNA_Origami_Channel_Staple_Map.pdf">Origami Channel Staple Map</a></li> <li><a href="http://openwetware.org/images/6/60/Protocols_for_Internal_Reaction.pdf">Protocols for Internal Reaction</a></li>
<li><a href="http://openwetware.org/images/0/06/Protocols_for_Polymersome.pdf">Protocols for Polymersomes</a></li>
</ol>
</p>
</div>
<div class="clear"></div>
</section> <script>
$(function () { $.scrollUp({ scrollText: '', // Text for element, can contain HTML scrollTitle: true, // Set a custom <a> title if required. Defaults to scrollText scrollImg: true, // Set true to use image zIndex: 2147483647 // Z-Index for the overlay }); $.localScroll(); }); </script>
</body>
</html>
