Team:NJU China

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
 
-
<head>
 
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
-
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo"></script>
 
-
<link rel="stylesheet" type="text/css" href="http://cs.wellesley.edu/~hcilab/iGEM2012/css/Team.css">
+
<!DOCTYPE html>
-
<STYLE type="text/css">
+
<html lang="en">
-
/* MAIN STYLE DEFINITIONS */
+
    <head>
-
a{
+
<meta charset="UTF-8" />
-
color:#870203;
+
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-
-webkit-transition-duration:0.3s;
+
        <title>CSS-Only Responsive Layout with Smooth Transitions</title>
-
-moz-transition-duration:0.3s;
+
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-o-transition-duration:0.3s;
+
        <meta name="description" content="CSS-only Responsive Layout with Smooth Transitions" />
 +
        <meta name="keywords" content="css3, transitions, animations, css-only, navigation, smooth scrolling, full width, full height, window width, window height" />
 +
        <meta name="author" content="Codrops" />
 +
 
 +
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css'>
 +
<style type="text/css">
 +
 
 +
/* hiding the top section*/
 +
body{position:absolute; top:0px; width:100%; height:1480px;}
 +
#top-section{
 +
  height:0px;
 +
    border:none;
 +
    width:980px;
 +
    margin:0 auto;
 +
    padding:0 0 0 0;
 +
    background-color:transparent;
 +
    overflow:hide;
 +
 
}
}
 +
#p-logo{display:none;}
 +
#search-controls{display:none;}
 +
#top{display:none;}
 +
.firstHeading{display:none;}
 +
/* end of hiding the top section*/
-
a:hover {
+
/* global setting*/
-
color:#3d3f3c;
+
#globalWrapper{position:absolute; top:0px;left:0px; width:100%; padding:0 0 0 0;margin:0 0 0 0;height:100%;font-family: calibri， Arial, Helvetica, sans-serif;}
 +
#content{
 +
    background-color:transparent;
 +
    border:none;
 +
    width:1360px;
 +
    height:800px;
 +
    marign:0 auto;
 +
    padding:0 0 0 0;
 +
    top:-40px;
 +
    }
 +
#bodyContent{
 +
    background-color:transparent;
 +
    border:none;
 +
   
 +
    }
 +
siteSub{
 +
    display:none;
 +
    border:none;
 +
    }
 +
contentSub{
 +
    display:none;
 +
    }
 +
/* end of global setting*/
 +
 
 +
/*hiding the footer-box*/
 +
#footer-box{display:none;}
 +
#catlinks{display:none;}
 +
/*end of hiding the footer book*/
 +
 
 +
/* menu (page, edit ...) */
 +
#menubar {
 +
    background-color:transparent;
 +
    position: relative;
 +
    float:left;
 +
    white-space: nowrap;
 +
    top:-6px;
 +
    width: 490px;
 +
    z-index: 5000;
 +
    font-family: sans-serif;
 +
    font-size: 95%;
 +
    line-height: 1em;
 +
    z-index:99;
}
}
-
a:visited{
+
 
-
color:#870203;
+
.left-menu, .left-menu a {
 +
    text-align: left;
 +
    color:#999999;
 +
    text-transform: lowercase;
}
}
-
td
+
.left-menu:hover {
-
{
+
    color: #D00000;
-
font-family: Helvetica;
+
    background-color: transparent;
-
font-size: 10pt;
+
-
vertical-align: top;
+
-
text-align: left;
+
-
padding-right: 10px;
+
}
}
-
tr
+
.right-menu{width:400px; float:right}
-
{
+
.right-menu, .right-menu a {
-
vertical-align: top;
+
    right: 0px;
 +
    text-align: right;
 +
    color: #999999;
}
}
 +
#menubar ul {
 +
    color: #999999;
 +
    list-style: none;
 +
}
 +
#menubar li {
 +
    display: inline;
 +
    position: relative;
 +
    cursor: pointer;
 +
    padding-left: 0px;
 +
    padding-right: 0px;
 +
}
 +
.left-menu li a {
 +
    padding: 0px 10px 0px 0px;
 +
}
 +
.left-menu .selected {
 +
#    color: #999999;
 +
}
 +
#.left-menu .selected:hover {
 +
#    color: #999999;
 +
#}
-
H1 {
+
.left-menu:hover a {
-
    font-family: Helvetica;
+
     color: #999999;;
-
    text-transform: uppercase;
+
}
-
     color: #3d3f3c;
+
-
    text-align: left;
+
-
    }
+
-
 
+
.left-menu li a:hover {
-
H4 {
+
     color: #D00000;
-
    font-family: Helvetica;
+
     text-decoration: underline;
-
    text-transform: uppercase;
+
}
-
     color: #3d3f3c;
+
-
     text-align: left;
+
-
    }
+
-
/* CONTENT HEADING STYLES - overrides some main.css styling */
 
-
H6 {
+
.right-menu li {
-
font-family:'Caviar Dreams';
+
#    background-color: transparent;
-
font-size:30px;
+
-
font-weight:500;
+
-
text-align:left;
+
-
text-transform:uppercase;
+
-
color: #3d3f3c;
+
-
border-bottom:1px solid orangered;
+
-
padding-bottom:10px;
+
-
margin:15px 0;
+
}
}
 +
.right-menu li a {
 +
    padding: 0px 15px 0px 0px;
 +
    color: #999999;;
 +
    background-color: transparent;
 +
}
 +
.right-menu li a:hover {
 +
    color: #D00000;
 +
    text-decoration: underline;
 +
}
 +
/* end menu (edit, page ...) */
 +
 +
/*! normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */
 +
 +
/* =============================================================================
 +
  HTML5 display definitions
 +
  ========================================================================== */
 +
 +
/*
 +
* Corrects block display not defined in IE6/7/8/9 & FF3
 +
*/
-
H1, H3 {
+
article,
-
font-family:'Source Sans Pro';
+
aside,
-
font-weight:600;
+
details,
-
text-transform:uppercase;
+
figcaption,
 +
figure,
 +
footer,
 +
header,
 +
hgroup,
 +
nav,
 +
section,
 +
summary {
 +
    display: block;
}
}
-
H1 {
+
/*
-
font-size:20px;
+
* Corrects inline-block display not defined in IE6/7/8/9 & FF3
-
border:none;
+
*/
 +
 
 +
audio,
 +
canvas,
 +
video {
 +
    display: inline-block;
 +
    *display: inline;
 +
    *zoom: 1;
}
}
-
img.headshot {
+
/*
-
width: 100px;
+
* Prevents modern browsers from displaying 'audio' without controls
-
height: auto;
+
* Remove excess height in iOS5 devices
-
vertical-align: text-top;
+
*/
 +
 
 +
audio:not([controls]) {
 +
    display: none;
 +
    height: 0;
}
}
 +
/*
 +
* Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
 +
* Known issue: no IE6 support
 +
*/
 +
[hidden] {
 +
    display: none;
 +
}
-
body {
+
 
-
background:#fff;
+
/* =============================================================================
-
font-family: Helvetica;
+
  Base
 +
  ========================================================================== */
 +
 
 +
/*
 +
* 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
 +
*    http://clagnut.com/blog/348/#c790
 +
* 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
 +
*    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 +
*/
 +
 
 +
html {
 +
    font-size: 100%; /* 1 */
 +
    -webkit-text-size-adjust: 100%; /* 2 */
 +
    -ms-text-size-adjust: 100%; /* 2 */
}
}
-
content {
+
/*
-
background: transparent;
+
* Addresses font-family inconsistency between 'textarea' and other form elements.
 +
*/
 +
 
 +
html,
 +
button,
 +
input,
 +
select,
 +
textarea {
 +
    font-family: sans-serif;
}
}
-
#tracking_nav
+
/*
-
{
+
* Addresses margins handled incorrectly in IE6/7
-
margin: 0px 0px 0px 950px;
+
*/
-
position: fixed;
+
 
-
color:#bababa;
+
body {
-
border: 1px solid #3d3f3c;
+
    margin: 0;
-
background:#3d3f3c;
+
-
font-size: 16pt;
+
-
padding: 5px;
+
-
line-height: 120%;
+
}
}
-
#tracking_nav a { color:#ffffff; text-transform: lowercase;font-size: 16pt;}
 
-
#tracking_nav a:hover {background:#bababa;}
 
-
#parts_table
+
/* =============================================================================
-
{
+
  Links
-
border: 1px solid #870203;
+
  ========================================================================== */
-
border-collapse: collapse;
+
 
-
width: 70%;
+
/*
-
margin: auto;
+
* Addresses outline displayed oddly in Chrome
 +
*/
 +
 
 +
a:focus {
 +
    outline: thin dotted;
}
}
-
#parts_table td
+
/*
-
{
+
* Improves readability when focused and also mouse hovered in all browsers
-
text-align: center;
+
* people.opera.com/patrickl/experiments/keyboard/test
-
margin: 5px;
+
*/
-
border: 1px solid #870203;
+
 
-
+
a:hover,
 +
a:active {
 +
    outline: 0;
}
}
-
#parts_table th
+
 
-
{
+
/* =============================================================================
-
background-color: #bababa;
+
  Typography
-
border: 1px solid #870203;
+
  ========================================================================== */
-
color: #ffffff;
+
 
 +
/*
 +
* Addresses font sizes and margins set differently in IE6/7
 +
* Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
 +
*/
 +
 
 +
h1 {
 +
    font-size: 2em;
 +
    margin: 0.67em 0;
}
}
-
.table_part
+
h2 {
-
{
+
    font-size: 1.5em;
-
vertical-align: middle;
+
    margin: 0.83em 0;
}
}
-
/* HEADER STYLES: banner, navbar, etc. */
+
h3 {
-
#banner { width:300px; display:block; float:left; }
+
    font-size: 1.17em;
-
#banner img { width:100%; }
+
    margin: 1em 0;
 +
}
-
ul#nav {
+
h4 {
-
width:1200px;
+
    font-size: 1em;
-
margin:0 0 0 30px;
+
    margin: 1.33em 0;
-
position:relative;
+
}
}
-
#nav li {
+
h5 {
-
color: #bbb;
+
    font-size: 0.83em;
-
background-color:none;
+
    margin: 1.67em 0;
-
margin: 0 50px 0 0;
+
-
float: left;
+
-
position: relative;
+
-
list-style: none;
+
-
text-transform:uppercase;
+
}
}
-
#nav li:last-child { margin:0; }
 
-
/* main level link */
+
h6 {
-
#nav a {
+
    font-size: 0.75em;
-
font-family:'Source Sans Pro', sans-serif;
+
    margin: 2.33em 0;
-
font-size:10pt;
+
-
font-weight:500;
+
-
line-height:110%;
+
-
color: inherit;
+
-
text-decoration: none;
+
-
display: block;
+
-
padding: 0 0 0 5px;
+
-
margin: 0;
+
}
}
-
ul#nav > li > a {
+
/*
-
line-height:12px;
+
* Addresses styling not present in IE7/8/9, S5, Chrome
-
border-left:solid 2px #bbb;
+
*/
-
padding:0 0 0 3px;
+
 
 +
abbr[title] {
 +
    border-bottom: 1px dotted;
}
}
-
#nav a:hover {
+
/*
-
/*background-color: #870203;
+
* Addresses style set to 'bolder' in FF3+, S4/5, Chrome
-
color: #ffffff;*/
+
*/
 +
 
 +
b,
 +
strong {
 +
    font-weight: bold;
}
}
-
/* main level link hover */
+
blockquote {
-
#nav .current a, #nav li:hover > a {
+
    margin: 1em 40px;
-
color: #000;
+
-
border-color:orangered;
+
}
}
-
/* sub levels link hover */
+
/*
-
#nav ul li:hover a, #nav li:hover li a {
+
* Addresses styling not present in S5, Chrome
-
border: none;
+
*/
-
/*background-color: #FA9D1C;*/
+
 
-
color:#000;
+
dfn {
 +
    font-style: italic;
}
}
-
#nav ul a:hover {
+
/*
-
color: orangered !important;
+
* Addresses styling not present in IE6/7/8/9
-
/*background: #fff url(img/gradient.png) repeat-x 0 -100px !important;
+
*/
-
text-shadow: 0 1px 1px rgba(0,0,0, .1);*/
+
 
 +
mark {
 +
    background: #ff0;
 +
    color: #000;
}
}
 +
/*
 +
* Addresses margins set differently in IE6/7
 +
*/
-
/* dropdown */
+
p,
-
#nav li:hover > ul {
+
pre {
-
/*display: block;*/
+
    margin: 1em 0;
-
opacity:1;
+
-
margin:0;
+
-
background-color: none;
+
-
z-index:0;
+
}
}
-
/* level 2 list */
+
/*
-
#nav ul {
+
* Corrects font family set oddly in IE6, S4/5, Chrome
-
/*display: none;*/
+
* en.wikipedia.org/wiki/User:Davidgothberg/Test59
-
opacity:0;
+
*/
-
margin: 20px 0 0 0;
+
 
-
padding: 7px 0 0 0;
+
pre,
-
width: 205px;
+
code,
-
position: absolute;
+
kbd,
-
left: 0;
+
samp {
-
z-index:-1;
+
    font-family: monospace, serif;
-
-webkit-transition-duration:0.5s;
+
    _font-family: 'courier new', monospace;
-
-moz-transition-duration:0.5s;
+
    font-size: 1em;
-
-o-transition-duration:0.5s;
+
}
}
-
#nav ul li {
+
 
-
float: none;
+
/*
-
margin: 0;
+
* Improves readability of pre-formatted text in all browsers
-
padding: 0;
+
*/
 +
 
 +
pre {
 +
    white-space: pre;
 +
    white-space: pre-wrap;
 +
    word-wrap: break-word;
}
}
-
#nav ul a {
+
/*
-
font-weight: normal;
+
* 1. Addresses CSS quotes not supported in IE6/7
-
/*text-shadow: 0 1px 0 #fff;*/
+
* 2. Addresses quote property not supported in S4
 +
*/
 +
 
 +
/* 1 */
 +
 
 +
q {
 +
    quotes: none;
}
}
-
/* clearfix */
+
/* 2 */
-
#nav:after {
+
 
-
content: ".";
+
q:before,
-
display: block;
+
q:after {
 +
    content: '';
 +
    content: none;
 +
}
 +
 
 +
small {
 +
    font-size: 75%;
 +
}
 +
 
 +
/*
 +
* Prevents sub and sup affecting line-height in all browsers
 +
* gist.github.com/413930
 +
*/
 +
 
 +
sub,
 +
sup {
 +
    font-size: 75%;
 +
    line-height: 0;
 +
    position: relative;
 +
    vertical-align: baseline;
 +
}
 +
 
 +
sup {
 +
    top: -0.5em;
 +
}
 +
 
 +
sub {
 +
    bottom: -0.25em;
 +
}
 +
 
 +
 
 +
/* =============================================================================
 +
  Lists
 +
  ========================================================================== */
 +
 
 +
/*
 +
* Addresses margins set differently in IE6/7
 +
*/
 +
 
 +
dl,
 +
menu,
 +
ol,
 +
ul {
 +
    margin: 1em 0;
 +
}
 +
 
 +
dd {
 +
    margin: 0 0 0 40px;
 +
}
 +
 
 +
/*
 +
* Addresses paddings set differently in IE6/7
 +
*/
 +
 
 +
menu,
 +
ol,
 +
ul {
 +
    padding: 0 0 0 40px;
 +
}
 +
 
 +
/*
 +
* Corrects list images handled incorrectly in IE7
 +
*/
 +
 
 +
nav ul,
 +
nav ol {
 +
    list-style: none;
 +
    list-style-image: none;
 +
}
 +
 
 +
 
 +
/* =============================================================================
 +
  Embedded content
 +
  ========================================================================== */
 +
 
 +
/*
 +
* 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
 +
* 2. Improves image quality when scaled in IE7
 +
*    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 +
*/
 +
 
 +
img {
 +
    border: 0; /* 1 */
 +
    -ms-interpolation-mode: bicubic; /* 2 */
 +
}
 +
 
 +
/*
 +
* Corrects overflow displayed oddly in IE9
 +
*/
 +
 
 +
svg:not(:root) {
 +
    overflow: hidden;
 +
}
 +
 
 +
 
 +
/* =============================================================================
 +
  Figures
 +
  ========================================================================== */
 +
 
 +
/*
 +
* Addresses margin not present in IE6/7/8/9, S5, O11
 +
*/
 +
 
 +
figure {
 +
    margin: 0;
 +
}
 +
 
 +
 
 +
/* =============================================================================
 +
  Forms
 +
  ========================================================================== */
 +
 
 +
/*
 +
* Corrects margin displayed oddly in IE6/7
 +
*/
 +
 
 +
form {
 +
    margin: 0;
 +
}
 +
 
 +
/*
 +
* Define consistent border, margin, and padding
 +
*/
 +
 
 +
fieldset {
 +
    border: 1px solid #c0c0c0;
 +
    margin: 0 2px;
 +
    padding: 0.35em 0.625em 0.75em;
 +
}
 +
 
 +
/*
 +
* 1. Corrects color not being inherited in IE6/7/8/9
 +
* 2. Corrects text not wrapping in FF3
 +
* 3. Corrects alignment displayed oddly in IE6/7
 +
*/
 +
 
 +
legend {
 +
    border: 0; /* 1 */
 +
    padding: 0;
 +
    white-space: normal; /* 2 */
 +
    *margin-left: -7px; /* 3 */
 +
}
 +
 
 +
/*
 +
* 1. Corrects font size not being inherited in all browsers
 +
* 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
 +
* 3. Improves appearance and consistency in all browsers
 +
*/
 +
 
 +
button,
 +
input,
 +
select,
 +
textarea {
 +
    font-size: 100%; /* 1 */
 +
    margin: 0; /* 2 */
 +
    vertical-align: baseline; /* 3 */
 +
    *vertical-align: middle; /* 3 */
 +
}
 +
 
 +
/*
 +
* Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
 +
*/
 +
 
 +
button,
 +
input {
 +
    line-height: normal; /* 1 */
 +
}
 +
 
 +
/*
 +
* 1. Improves usability and consistency of cursor style between image-type 'input' and others
 +
* 2. Corrects inability to style clickable 'input' types in iOS
 +
* 3. Removes inner spacing in IE7 without affecting normal text inputs
 +
*    Known issue: inner spacing remains in IE6
 +
*/
 +
 
 +
button,
 +
input[type="button"],
 +
input[type="reset"],
 +
input[type="submit"] {
 +
    cursor: pointer; /* 1 */
 +
    -webkit-appearance: button; /* 2 */
 +
    *overflow: visible;  /* 3 */
 +
}
 +
 
 +
/*
 +
* Re-set default cursor for disabled elements
 +
*/
 +
 
 +
button[disabled],
 +
input[disabled] {
 +
    cursor: default;
 +
}
 +
 
 +
/*
 +
* 1. Addresses box sizing set to content-box in IE8/9
 +
* 2. Removes excess padding in IE8/9
 +
* 3. Removes excess padding in IE7
 +
      Known issue: excess padding remains in IE6
 +
*/
 +
 
 +
input[type="checkbox"],
 +
input[type="radio"] {
 +
    box-sizing: border-box; /* 1 */
 +
    padding: 0; /* 2 */
 +
    *height: 13px; /* 3 */
 +
    *width: 13px; /* 3 */
 +
}
 +
 
 +
/*
 +
* 1. Addresses appearance set to searchfield in S5, Chrome
 +
* 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
 +
*/
 +
 
 +
input[type="search"] {
 +
    -webkit-appearance: textfield; /* 1 */
 +
    -moz-box-sizing: content-box;
 +
    -webkit-box-sizing: content-box; /* 2 */
 +
    box-sizing: content-box;
 +
}
 +
 
 +
/*
 +
* Removes inner padding and search cancel button in S5, Chrome on OS X
 +
*/
 +
 
 +
input[type="search"]::-webkit-search-decoration,
 +
input[type="search"]::-webkit-search-cancel-button {
 +
    -webkit-appearance: none;
 +
}
 +
 
 +
/*
 +
* Removes inner padding and border in FF3+
 +
* www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
 +
*/
 +
 
 +
button::-moz-focus-inner,
 +
input::-moz-focus-inner {
 +
    border: 0;
 +
    padding: 0;
 +
}
 +
 
 +
/*
 +
* 1. Removes default vertical scrollbar in IE6/7/8/9
 +
* 2. Improves readability and alignment in all browsers
 +
*/
 +
 
 +
textarea {
 +
    overflow: auto; /* 1 */
 +
    vertical-align: top; /* 2 */
 +
}
 +
 
 +
 
 +
/* =============================================================================
 +
  Tables
 +
  ========================================================================== */
 +
 
 +
/*
 +
* Remove most spacing between table cells
 +
*/
 +
 
 +
table {
 +
    border-collapse: collapse;
 +
    border-spacing: 0;
 +
}
 +
/* Addition */
 +
/* apply a natural box layout model to all elements */
 +
/* By Paul Irish: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
 +
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
 +
@font-face {
 +
font-family:'RaphaelIcons';
 +
    src: url('file:///F|/桌面临时文件夹/IGEM/demo/选中/重要SmoothTransitionsResponsiveLayout/raphaelicons-webfont.eot');
 +
    src: local('☺'),
 +
url('file:///F|/桌面临时文件夹/IGEM/demo/选中/重要SmoothTransitionsResponsiveLayout/fonts/raphaelicons-webfont.woff') format('woff'),
 +
url('file:///F|/桌面临时文件夹/IGEM/demo/选中/重要SmoothTransitionsResponsiveLayout/fonts/raphaelicons-webfont.ttf') format('truetype'),
 +
url('file:///F|/桌面临时文件夹/IGEM/demo/选中/重要SmoothTransitionsResponsiveLayout/fonts/raphaelicons-webfont.svgwebfontKOf9F4sx') format('svg');
 +
    font-weight: normal;
 +
    font-style: normal;
 +
}
 +
/* General Demo Style */
 +
body{
 +
font-family: Georgia, serif;
 +
background: #ddd;
 +
font-weight: 400;
 +
font-size: 15px;
 +
color: #333;
 +
overflow: hidden;
 +
-webkit-font-smoothing: antialiased;
 +
}
 +
a{
 +
color: #555;
 +
text-decoration: none;
 +
}
 +
.clr{
clear: both;
clear: both;
-
visibility: hidden;
+
padding: 0;
-
line-height: 0;
+
height: 0;
height: 0;
 +
margin: 0;
 +
}
 +
/* Header Style */
 +
.codrops-top{
 +
line-height: 24px;
 +
font-size: 9px;
 +
text-transform: uppercase;
 +
z-index: 9999;
 +
position: relative;
 +
font-family: Cambria, Georgia, serif;
}
}
-
#nav {
+
.codrops-top a{
 +
padding: 0px 10px;
 +
letter-spacing: 1px;
 +
color: #888;
display: inline-block;
display: inline-block;
-
}  
+
text-shadow: 0 1px 1px rgba(255,255,255,0.4);
-
html[xmlns] #nav {
+
}
 +
.codrops-top span.right{
 +
float: right;
 +
}
 +
.codrops-top span.right a{
 +
float: left;
display: block;
display: block;
}
}
-
+
@media screen and (max-width: 520px) {
-
* html #nav {
+
.codrops-top { display: none; }
-
height: 1%;
+
}
 +
</style>
 +
<style type="text/css">
 +
.st-container {
 +
position: absolute;
 +
width: 100%;
 +
height: 100%;
 +
top: 0;
 +
left: 0;
 +
font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
}
}
-
/* pinterest like photo grid for social page*/
+
.st-container > input,
 +
.st-container > a {
 +
position: fixed;
 +
bottom: 0px;
 +
width: 20%;
 +
cursor: pointer;
 +
font-size: 16px;
 +
height: 34px;
 +
line-height: 34px;
 +
}
-
/*
+
.st-container > input {
-
body {
+
opacity: 0;
-
background: url(http://subtlepatterns.com/patterns/scribble_light.png) ;
+
z-index: 1000;
}
}
-
*/
 
-
#wrapper {
+
.st-container > a {
-
width: 90%;
+
z-index: 10;
-
max-width: 1100px;
+
font-weight: 700;
-
min-width: 800px;
+
background: #e23a6e;
-
margin: 50px auto;
+
color: #fff;
 +
text-align: center;
 +
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
}
}
-
#columns {
+
/* "Fix" for percentage rounding: add a background bar pseudo element with the same color like the labels */
-
-webkit-column-count: 3;
+
.st-container:before {
-
-webkit-column-gap: 10px;
+
content: '';
-
-webkit-column-fill: auto;
+
position: fixed;
-
-moz-column-count: 3;
+
width: 100%;
-
-moz-column-gap: 10px;
+
height: 34px;
-
-moz-column-fill: auto;
+
background: #e23a6e;
-
column-count: 3;
+
z-index: 9;
-
column-gap: 15px;
+
bottom: 0;
-
column-fill: auto;
+
}
}
-
.pin {
+
#st-control-1, #st-control-1 + a {
-
display: inline-block;
+
left: 0;
-
background: #FEFEFE;
+
-
border: 2px solid #FAFAFA;
+
-
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
+
-
margin: 0 2px 15px;
+
-
-webkit-column-break-inside: avoid;
+
-
-moz-column-break-inside: avoid;
+
-
column-break-inside: avoid;
+
-
padding: 15px;
+
-
padding-bottom: 5px;
+
-
background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
+
-
opacity: 1;
+
-
+
-
-webkit-transition: all .2s ease;
+
-
-moz-transition: all .2s ease;
+
-
-o-transition: all .2s ease;
+
-
transition: all .2s ease;
+
}
}
-
.pin img {
+
#st-control-2, #st-control-2 + a {
-
width: 100%;
+
left: 20%;
-
border-bottom: 1px solid #ccc;
+
-
padding-bottom: 15px;
+
-
margin-bottom: 5px;
+
}
}
-
.pin p {
+
#st-control-3, #st-control-3 + a {
-
font: 12px/18px Arial, sans-serif;
+
left: 40%;
-
color: #333;
+
-
margin: 0;
+
}
}
-
@media (min-width: 960px) {
+
#st-control-4, #st-control-4 + a {
-
#columns {
+
left: 60%;
-
-webkit-column-count: 4;
+
-
-moz-column-count: 4;
+
-
column-count: 4;
+
-
}
+
}
}
-
@media (min-width: 1100px) {
+
#st-control-5, #st-control-5 + a {
-
#columns {
+
left: 80%;
-
-webkit-column-count: 5;
+
-
-moz-column-count: 5;
+
-
column-count: 5;
+
-
}
+
}
}
-
#columns:hover .pin:not(:hover) {
+
.st-container > input:checked + a,
-
opacity: 0.4;
+
.st-container > input:checked:hover + a{
 +
background: #821134;
}
}
-
</STYLE>
 
-
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css'>
+
.st-container > input:checked + a:after,
 +
.st-container > input:checked:hover + a:after{
 +
bottom: 100%;
 +
border: solid transparent;
 +
content: '';
 +
height: 0;
 +
width: 0;
 +
position: absolute;
 +
pointer-events: none;
 +
border-bottom-color: #821134;
 +
border-width: 20px;
 +
left: 50%;
 +
margin-left: -20px;
 +
}
-
<!--Start NavBar-->
+
.st-container > input:hover + a{
-
<ul id="nav">
+
background: #AD244F;
-
    <li><a href="https://2013.igem.org/Team:NJU_China">Home</a></li>
+
}
-
+
-
    <li><a href="https://2013.igem.org/Team:NJU_China/Team">Team</a></li>
+
-
    <li><a href="https://2013.igem.org/Team:NJU_China/Project">Project</a>
+
.st-container > input:hover + a:after {
-
        <ul>
+
border-bottom-color: #AD244F;
-
  <li><a href="http://https://2013.igem.org/Team:NJU_China/Project#Overall_project">Project Overview</a></li>
+
}
-
          <li><a https://2013.igem.org/Team:NJU_China/Project#Project_Details">Project Details</a></li>
+
-
          <li><a https://2013.igem.org/Team:NJU_China/Project#Part_2">Part2</a></li>
+
-
          <li><a https://2013.igem.org/Team:NJU_China/Project#The_Experiments">The_Experiments</a></li>
+
-
          <li><a https://2013.igem.org/Team:NJU_China/Project#Part_3">Part3</a></li>
+
-
          <li><a https://2013.igem.org/Team:NJU_China/Project#Results">Results</a></li>
+
-
        </ul>
+
-
    </li>
+
-
+
-
    <li><a href="https://2013.igem.org/Team:NJU_China/Parts">Parts</a></li>
+
-
    <li><a href="https://2013.igem.org/Team:NJU_China/Modeling">Modeling</a></li>
+
.st-scroll,
-
   
+
.st-panel {
-
    <li><a href="https://2013.igem.org/Team:NJU_China/Notebook">Notebook</a></li>
+
position: relative;
 +
width: 100%;
 +
height: 100%;
 +
}
-
    <li><a href="https://2013.igem.org/Team:NJU_China/Safety">Safety</a></li>
+
.st-scroll {
 +
top: 0;
 +
left: 0;
 +
-webkit-transition: all 0.6s ease-in-out;
 +
-moz-transition: all 0.6s ease-in-out;
 +
-o-transition: all 0.6s ease-in-out;
 +
-ms-transition: all 0.6s ease-in-out;
 +
transition: all 0.6s ease-in-out;
 +
 +
/* Let's enforce some hardware acceleration */
 +
-webkit-transform: translate3d(0, 0, 0);
 +
-webkit-backface-visibility: hidden;
 +
}
-
    <li><a href="https://2013.igem.org/Team:NJU_China/Attributions">Attributions</a></li>
+
.st-panel{
-
   
+
background: #fff;
-
</ul>
+
overflow: hidden;
-
<!--End NavBar--> 
+
}
-
</body>
+
-
</html>
+
 +
#st-control-1:checked ~ .st-scroll {
 +
-webkit-transform: translateY(0%);
 +
-moz-transform: translateY(0%);
 +
-o-transform: translateY(0%);
 +
-ms-transform: translateY(0%);
 +
transform: translateY(0%);
 +
}
 +
#st-control-2:checked ~ .st-scroll {
 +
-webkit-transform: translateY(-100%);
 +
-moz-transform: translateY(-100%);
 +
-o-transform: translateY(-100%);
 +
-ms-transform: translateY(-100%);
 +
transform: translateY(-100%);
 +
}
 +
#st-control-3:checked ~ .st-scroll {
 +
-webkit-transform: translateY(-200%);
 +
-moz-transform: translateY(-200%);
 +
-o-transform: translateY(-200%);
 +
-ms-transform: translateY(-200%);
 +
transform: translateY(-200%);
 +
}
 +
#st-control-4:checked ~ .st-scroll {
 +
-webkit-transform: translateY(-300%);
 +
-moz-transform: translateY(-300%);
 +
-o-transform: translateY(-300%);
 +
-ms-transform: translateY(-300%);
 +
transform: translateY(-300%);
 +
}
 +
#st-control-5:checked ~ .st-scroll {
 +
-webkit-transform: translateY(-400%);
 +
-moz-transform: translateY(-400%);
 +
-o-transform: translateY(-400%);
 +
-ms-transform: translateY(-400%);
 +
transform: translateY(-400%);
 +
}
-
{|align="justify"
+
/* Content elements */
 +
.st-deco{
 +
width: 200px;
 +
height: 200px;
 +
position: absolute;
 +
top: 0px;
 +
left: 50%;
 +
margin-left: -100px;
 +
background: #fa96b5;
 +
-webkit-transform: translateY(-50%) rotate(45deg);
 +
-moz-transform: translateY(-50%) rotate(45deg);
 +
-o-transform: translateY(-50%) rotate(45deg);
 +
-ms-transform: translateY(-50%) rotate(45deg);
 +
transform: translateY(-50%) rotate(45deg);
 +
}
-
[[Image:NJU China TeamLogo.png|1000px]]                                       
+
[data-icon]:after {
 +
    content: attr(data-icon);
 +
    font-family: 'RaphaelIcons';
 +
    color: #fff;
 +
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
 +
position: absolute;
 +
width: 200px;
 +
height: 200px;
 +
line-height: 200px;
 +
text-align: center;
 +
font-size: 90px;
 +
top: 50%;
 +
left: 50%;
 +
margin: -100px 0 0 -100px;
 +
-webkit-transform: rotate(-45deg) translateY(25%);
 +
-moz-transform: rotate(-45deg) translateY(25%);
 +
-o-transform: rotate(-45deg) translateY(25%);
 +
-ms-transform: rotate(-45deg) translateY(25%);
 +
transform: rotate(-45deg) translateY(25%);
 +
}
-
|'''Biomissile'''
+
.st-panel h2 {
-
Site-specific drug delivery has always been a challenge in gene therapy. It is urgently required to develop a new system to overcome the off-target effect, low efficiency and high toxicity of the currently available approaches. Recently, small interfering RNA (siRNA) is emerging as a promising therapeutic drug against a wide array of diseases. Current techniques for siRNA transfer use viruses or synthetic agents as delivery vehicles. However, these approaches are toxic and low-efficient, and more importantly, can not deliver siRNA to specific tissues and organs.
+
color: #e23a6e;
 +
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
 +
position: absolute;
 +
font-size: 54px;
 +
font-weight: 900;
 +
width: 80%;
 +
left: 10%;
 +
text-align: center;
 +
line-height: 50px;
 +
margin: -70px 0 0 0;
 +
padding: 0;
 +
top: 50%;
 +
-webkit-backface-visibility: hidden;
 +
}
-
{|align="justify"
+
#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
 +
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
 +
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
 +
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
 +
#st-control-5:checked ~ .st-scroll #st-panel-5 h2{
 +
-webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
 +
-moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
 +
-o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
 +
-ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
 +
animation: moveDown 0.6s ease-in-out 0.2s backwards;
 +
}
 +
@-webkit-keyframes moveDown{
 +
0% {
 +
-webkit-transform: translateY(-40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-webkit-transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
-
|To better deliver the siRNA and other drugs, we are trying to construct a novel system which employs MVs to encapsulate and protect siRNAs for delivery to target cells. Microvesicles (MVs) are lipid bilayer vesicles which
+
@-moz-keyframes moveDown{
-
{|align="justify"
+
0% {
-
|are naturally secreted by almost all cell types, playing crucial roles in intercellular transport of bioactive molecules, including siRNAs. Given the intrinsic ability to traverse biological barriers and to naturally transport functional siRNAs between cells, MVs potentially represent a novel and exciting drug carrier for therapeutic uses. Thus, MVs derived from cells engineered to express siRNAs may be capable of delivering siRNAs to local cellular environment.
+
-moz-transform: translateY(-40px);
 +
opacity: 0;
 +
}
 +
100% {  
 +
-moz-transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
-
To achieve site-specific siRNA delivery, we will express targeting protein onto the surface of MVs and the modified MVs will, in theory, have the ability to target specific tissues and organs. By transfecting the producer cells with siRNA plasmids and collect MVs, we will fill the MVs with therapeutic siRNAs.
+
@-o-keyframes moveDown{
 +
0% {
 +
-o-transform: translateY(-40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-o-transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
-
Our modified MVs are just like the “biomissile”, which can be delivered to specific cells and destroy target mRNAs. Our project will open up avenues for therapeutic applications of MVs as biomissile.
+
@-ms-keyframes moveDown{
-
|[[Image:NJU China Team.JPG|520px|right]]
+
0% {
-
|-|
+
-ms-transform: translateY(-40px);
-
|align="center"|[[Team:NJU_China | Team NJU_China]]
+
opacity: 0;
-
|}
+
}
 +
100% {
 +
-ms-transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
-
<!--- The Mission, Experiments
+
@keyframes moveDown{
 +
0% {
 +
transform: translateY(-40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
-
{| style="color:#1b2c8a;background-color:#0c6;" cellpadding="3" cellspacing="1" border="1" bordercolor="#fff" width="62%" align="center"
+
.st-panel p {
-
!align="center"|[[Team:NJU_China|Home]]
+
position: absolute;
-
!align="center"|[[Team:NJU_China/Team|Team]]
+
text-align: center;
-
!align="center"|[https://igem.org/Team.cgi?year=2013&team_name=NJU_China Official Team Profile]
+
font-size: 16px;
-
!align="center"|[[Team:NJU_China/Project|Project]]
+
line-height: 22px;
-
!align="center"|[[Team:NJU_China/Parts|Parts Submitted to the Registry]]
+
color: #8b8b8b;
-
!align="center"|[[Team:NJU_China/Modeling|Modeling]]
+
z-index: 2;
-
!align="center"|[[Team:NJU_China/Notebook|Notebook]]
+
padding: 0;
-
!align="center"|[[Team:NJU_China/Safety|Safety]]
+
width: 50%;
-
!align="center"|[[Team:NJU_China/Attributions|Attributions]]
+
left: 25%;
-
|}--->
+
top: 50%;
 +
margin: 10px 0 0 0;
 +
-webkit-backface-visibility: hidden;
 +
}
 +
#st-control-1:checked ~ .st-scroll #st-panel-1 p,
 +
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
 +
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
 +
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
 +
#st-control-5:checked ~ .st-scroll #st-panel-5 p{
 +
-webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards;
 +
-moz-animation: moveUp 0.6s ease-in-out 0.2s backwards;
 +
-o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
 +
-ms-animation: moveUp 0.6s ease-in-out 0.2s backwards;
 +
animation: moveUp 0.6s ease-in-out 0.2s backwards;
 +
}
 +
 
 +
@-webkit-keyframes moveUp{
 +
0% {
 +
-webkit-transform: translateY(40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-webkit-transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@-moz-keyframes moveUp{
 +
0% {
 +
-moz-transform: translateY(40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-moz-transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@-o-keyframes moveUp{
 +
0% {
 +
-o-transform: translateY(40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-o-transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@-ms-keyframes moveUp{
 +
0% {
 +
-ms-transform: translateY(40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-ms-transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@keyframes moveUp{
 +
0% {
 +
transform: translateY(40px);
 +
opacity: 0;
 +
}
 +
100% {
 +
transform: translateY(0px); 
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
/* Colored sections */
 +
 
 +
.st-color,
 +
.st-deco{
 +
background: #fa96b5;
 +
}
 +
.st-color [data-icon]:after {
 +
color: #fa96b5;
 +
}
 +
.st-color .st-deco {
 +
background: #fff;
 +
}
 +
.st-color h2 {
 +
color: #fff;
 +
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
 +
}
 +
.st-color p {
 +
color: #fff;
 +
color: rgba(255,255,255,0.8);
 +
}
 +
 
 +
@media screen and (max-width: 520px) {
 +
.st-panel h2 {
 +
font-size: 42px;
 +
}
 +
 +
.st-panel p {
 +
width: 90%;
 +
left: 5%;
 +
margin-top: 0;
 +
}
 +
 +
.st-container > a {
 +
font-size: 13px;
 +
}
 +
}
 +
@media screen and (max-width: 360px) {
 +
.st-container > a {
 +
font-size: 10px;
 +
}
 +
 +
.st-deco{
 +
width: 120px;
 +
height: 120px;
 +
margin-left: -60px;
 +
}
 +
 +
[data-icon]:after {
 +
font-size: 60px;
 +
-webkit-transform: rotate(-45deg) translateY(15%);
 +
-moz-transform: rotate(-45deg) translateY(15%);
 +
-o-transform: rotate(-45deg) translateY(15%);
 +
-ms-transform: rotate(-45deg) translateY(15%);
 +
transform: rotate(-45deg) translateY(15%);
 +
}
 +
}
 +
</style>
 +
<script language="Javascript">
 +
/* Modernizr 2.5.3 (Custom Build) | MIT & BSD
 +
* Build: http://www.modernizr.com/download/#-cssanimations-csstransforms-csstransforms3d-csstransitions-shiv-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes
 +
*/
 +
;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.substr(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.5.3",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k=b.createElement("div"),l=b.body,m=l?l:b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),k.appendChild(j);return f=["&#173;","<style>",a,"</style>"].join(""),k.id=h,(l?k:m).innerHTML+=f,m.appendChild(k),l||(m.style.background="",g.appendChild(m)),i=c(k,a),l?k.parentNode.removeChild(k):m.parentNode.removeChild(m),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e});var G=function(a,c){var d=a.join(""),f=c.length;w(d,function(a,c){var d=b.styleSheets[b.styleSheets.length-1],g=d?d.cssRules&&d.cssRules[0]?d.cssRules[0].cssText:d.cssText||"":"",h=a.childNodes,i={};while(f--)i[h[f].id]=h[f];e.csstransforms3d=(i.csstransforms3d&&i.csstransforms3d.offsetLeft)===9&&i.csstransforms3d.offsetHeight===3},f,c)}([,["@media (",m.join("transform-3d),("),h,")","{#csstransforms3d{left:9px;position:absolute;height:3px;}}"].join("")],[,"csstransforms3d"]);q.cssanimations=function(){return F("animationName")},q.csstransforms=function(){return!!F("transform")},q.csstransforms3d=function(){var a=!!F("perspective");return a&&"webkitPerspective"in g.style&&(a=e.csstransforms3d),a},q.csstransitions=function(){return F("transition")};for(var H in q)y(q,H)&&(v=H.toLowerCase(),e[v]=q[H](),t.push((e[v]?"":"no-")+v));return z(""),i=k=null,function(a,b){function g(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function h(){var a=k.elements;return typeof a=="string"?a.split(" "):a}function i(a){var b={},c=a.createElement,e=a.createDocumentFragment,f=e();a.createElement=function(a){var e=(b[a]||(b[a]=c(a))).cloneNode();return k.shivMethods&&e.canHaveChildren&&!d.test(a)?f.appendChild(e):e},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+h().join().replace(/\w+/g,function(a){return b[a]=c(a),f.createElement(a),'c("'+a+'")'})+");return n}")(k,f)}function j(a){var b;return a.documentShived?a:(k.shivCSS&&!e&&(b=!!g(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio{display:none}canvas,video{display:inline-block;*display:inline;*zoom:1}[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}mark{background:#FF0;color:#000}")),f||(b=!i(a)),b&&(a.documentShived=b),a)}var c=a.html5||{},d=/^<|^(?:button|form|map|select|textarea)$/i,e,f;(function(){var a=b.createElement("a");a.innerHTML="<xyz></xyz>",e="hidden"in a,f=a.childNodes.length==1||function(){try{b.createElement("a")}catch(a){return!0}var c=b.createDocumentFragment();return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}()})();var k={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:j};a.html5=k,j(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document);
 +
</script>
 +
<!--[if lte IE 8]>
 +
<link rel="stylesheet" type="text/css" href="css/simple.css" />
 +
<![endif]-->
 +
    </head>
 +
    <body>
 +
        <div class="container">
 +
 +
<!-- Codrops top bar -->
 +
            <div class="codrops-top">
 +
               
 +
                <span class="right">
 +
                   
 +
                </span>
 +
                <div class="clr"></div>
 +
            </div><!--/ Codrops top bar -->
 +
 +
<div class="st-container">
 +
 +
<input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
 +
<a href="#st-panel-1">serendipity</a>
 +
<input type="radio" name="radio-set" id="st-control-2"/>
 +
<a href="#st-panel-2">Happiness</a>
 +
<input type="radio" name="radio-set" id="st-control-3"/>
 +
<a href="#st-panel-3">Tranquillity</a>
 +
<input type="radio" name="radio-set" id="st-control-4"/>
 +
<a href="#st-panel-4">Positivity</a>
 +
<input type="radio" name="radio-set" id="st-control-5"/>
 +
<a href="#st-panel-5">Passion</a>
 +
 +
<div class="st-scroll">
 +
 +
<!-- Placeholder text from http://hipsteripsum.me/ -->
 +
 +
<section class="st-panel" id="st-panel-1">
 +
<div class="st-deco" data-icon="H"></div>
 +
<h2>=========调试中=========</h2>
 +
<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>
 +
</section>
 +
 +
<section class="st-panel st-color" id="st-panel-2">
 +
<div class="st-deco" data-icon="2"></div>
 +
<h2>Happiness</h2>
 +
<p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>
 +
</section>
 +
 +
<section class="st-panel" id="st-panel-3">
 +
<div class="st-deco" data-icon="B"></div>
 +
<h2>Tranquillity</h2>
 +
<p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>
 +
</section>
 +
 +
<section class="st-panel st-color" id="st-panel-4">
 +
<div class="st-deco" data-icon="x"></div>
 +
<h2>Positivity</h2>
 +
<p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>
 +
</section>
 +
 +
<section class="st-panel" id="st-panel-5">
 +
<div class="st-deco" data-icon="Ç"></div>
 +
<h2>Passion</h2>
 +
<p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>
 +
</section>
 +
 
 +
</div><!-- // st-scroll -->
 +
 +
</div><!-- // st-container -->
 +
 +
        </div>
 +
</body>
 +
</html>

Revision as of 08:22, 24 September 2013

<!DOCTYPE html> CSS-Only Responsive Layout with Smooth Transitions

serendipity Happiness Tranquillity Positivity Passion

=========调试中=========

Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.

Happiness

Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.

Tranquillity

Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.

Positivity

Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.

Passion

Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.

Retrieved from "http://2013.igem.org/Team:NJU_China"