Team:Marburg/

From 2013.igem.org

(Difference between revisions)
(Blanked the page)
m
Line 1: Line 1:
 +
<style>
 +
/* Wiki igem puricication */
 +
/* Author: Pieter van Boheemen | Team: TU Delft*/
 +
/* Minimized and extended by: Roman Martin | Team: Marburg*/
 +
#globalWrapper { background-color: transparent; width: 100%; height:100%; border:0; font-size: 100%}
 +
#content { background-color: #fff; border: none; width: 100%; overflow: hidden; height:100%; font-size: 100%;}
 +
#bodyContent { width:100%; height:100%;}
 +
#top-section { height: 15px; margin-left: auto; margin-right: auto; margin-bottom: 0 !important; font-size: 10px; z-index: 10; background: #4cb4b6; position: fixed; top: 0;}
 +
#p-logo { height:1px; overflow:hidden; display: none;}
 +
#search-controls { overflow:hidden; display:block; background: none; position: absolute; top: 100px; right: 40px;}
 +
#footer-box { width: 95%; margin: 0 auto; font-size: 100%; }
 +
#footer { width: 100%; margin: 0 auto; }
 +
#f-list a { color: #333; font-size: 10px;}
 +
#f-list a:hover { color: #666;}
 +
#footer ul { margin: 0; padding: 0;}
 +
#footer ul li { margin-top: 0; margin-bottom: 0; margin-left: 10px; margin-right: 10px; padding: 0;}
 +
.visualClear, .firstHeading, .printfooter, #search-controls, #catlinks, h3#siteSub, #footer-box, #contentSub  { display: none; }
 +
#menubar { width: 100%; height: 15px; position: fixed; top: 0; display: block; z-index: 10; color: #000; line-height: 15px; background: url('https://static.igem.org/mediawiki/2013/7/7e/Igem-marburg-header-bg.png') top; }
 +
#menubar.right-menu, #menubar.left-menu { height: 15px; background: #4cb4b6; z-index: 11; width: 50%; }
 +
#menubar.right-menu ul, #menubar.left-menu ul { line-height: 15px; height: 15px; z-index: 11; }
 +
#menubar.right-menu li a, #menubar.left-menu li a { color: #000; background: transparent; padding-left: 5px !important; font-size: 8pt;}
 +
/* Wiki purification */
 +
 +
 +
/*! normalize.css 2011-08-31T22:02 UTC · http://github.com/necolas/normalize.css */
 +
 +
/* =============================================================================
 +
  HTML5 display definitions
 +
  ========================================================================== */
 +
 +
/*
 +
* Corrects block display not defined in IE6/7/8/9 & FF3
 +
*/
 +
 +
article,
 +
aside,
 +
details,
 +
figcaption,
 +
figure,
 +
footer,
 +
header,
 +
hgroup,
 +
nav,
 +
section {
 +
    display: block;
 +
}
 +
 +
/*
 +
* Corrects inline-block display not defined in IE6/7/8/9 & FF3
 +
*/
 +
 +
audio,
 +
canvas,
 +
video {
 +
    display: inline-block;
 +
    *display: inline;
 +
    *zoom: 1;
 +
}
 +
 +
/*
 +
* Prevents modern browsers from displaying 'audio' without controls
 +
*/
 +
 +
audio:not([controls]) {
 +
    display: none;
 +
}
 +
 +
/*
 +
* Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
 +
* Known issue: no IE6 support
 +
*/
 +
 +
[hidden] {
 +
    display: none;
 +
}
 +
 +
 +
/* =============================================================================
 +
  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. Keeps page centred in all browsers regardless of content height
 +
* 3. 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 */
 +
    overflow-y: scroll; /* 2 */
 +
    -webkit-text-size-adjust: 100%; /* 3 */
 +
    -ms-text-size-adjust: 100%; /* 3 */
 +
}
 +
 +
/*
 +
* Addresses margins handled incorrectly in IE6/7
 +
*/
 +
 +
body {
 +
    margin: 0;
 +
}
 +
 +
/*
 +
* Addresses font-family inconsistency between 'textarea' and other form elements.
 +
*/
 +
 +
body,
 +
button,
 +
input,
 +
select,
 +
textarea {
 +
    font-family: sans-serif;
 +
}
 +
 +
 +
/* =============================================================================
 +
  Links
 +
  ========================================================================== */
 +
 +
a {
 +
    color: #00e;
 +
}
 +
 +
a:visited {
 +
    color: #551a8b;
 +
}
 +
 +
/*
 +
* Addresses outline displayed oddly in Chrome
 +
*/
 +
 +
a:focus {
 +
    outline: 0;
 +
}
 +
 +
/*
 +
* Improves readability when focused and also mouse hovered in all browsers
 +
* people.opera.com/patrickl/experiments/keyboard/test
 +
*/
 +
 +
a:hover,
 +
a:active {
 +
    outline: 0;
 +
}
 +
 +
 +
/* =============================================================================
 +
  Typography
 +
  ========================================================================== */
 +
 +
/*
 +
* Addresses styling not present in IE7/8/9, S5, Chrome
 +
*/
 +
 +
abbr[title] {
 +
    border-bottom: 1px dotted;
 +
}
 +
 +
/*
 +
* Addresses style set to 'bolder' in FF3/4, S4/5, Chrome
 +
*/
 +
 +
b,
 +
strong {
 +
    font-weight: bold;
 +
}
 +
 +
blockquote {
 +
    margin: 1em 40px;
 +
}
 +
 +
/*
 +
* Addresses styling not present in S5, Chrome
 +
*/
 +
 +
dfn {
 +
    font-style: italic;
 +
}
 +
 +
/*
 +
* Addresses styling not present in IE6/7/8/9
 +
*/
 +
 +
mark {
 +
    background: #ff0;
 +
    color: #000;
 +
}
 +
 +
/*
 +
* Corrects font family set oddly in IE6, S4/5, Chrome
 +
* en.wikipedia.org/wiki/User:Davidgothberg/Test59
 +
*/
 +
 +
pre,
 +
code,
 +
kbd,
 +
samp {
 +
    font-family: monospace, serif;
 +
    _font-family: 'courier new', monospace;
 +
    font-size: 1em;
 +
}
 +
 +
/*
 +
* Improves readability of pre-formatted text in all browsers
 +
*/
 +
 +
pre {
 +
    white-space: pre;
 +
    white-space: pre-wrap;
 +
    word-wrap: break-word;
 +
}
 +
 +
/*
 +
* 1. Addresses CSS quotes not supported in IE6/7
 +
* 2. Addresses quote property not supported in S4
 +
*/
 +
 +
/* 1 */
 +
 +
q {
 +
    quotes: none;
 +
}
 +
 +
/* 2 */
 +
 +
q:before,
 +
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
 +
  ========================================================================== */
 +
 +
ul,
 +
ol {
 +
    margin: 1em 0;
 +
    padding: 0 0 0 40px;
 +
}
 +
 +
dd {
 +
    margin: 0 0 0 40px;
 +
}
 +
 +
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, F3
 +
* 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 margin and padding
 +
*/
 +
 +
fieldset {
 +
    margin: 0 2px;
 +
    padding: 0.35em 0.625em 0.75em;
 +
}
 +
 +
/*
 +
* 1. Corrects color not being inherited in IE6/7/8/9
 +
* 2. Corrects alignment displayed oddly in IE6/7
 +
*/
 +
 +
legend {
 +
    border: 0; /* 1 */
 +
    *margin-left: -7px; /* 2 */
 +
}
 +
 +
/*
 +
* 1. Corrects font size not being inherited in all browsers
 +
* 2. Addresses margins set differently in IE6/7, F3/4, 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 */
 +
}
 +
 +
/*
 +
* 1. Addresses FF3/4 setting line-height using !important in the UA stylesheet
 +
* 2. Corrects inner spacing displayed oddly in IE6/7
 +
*/
 +
 +
button,
 +
input {
 +
    line-height: normal; /* 1 */
 +
    *overflow: visible;  /* 2 */
 +
}
 +
 +
/*
 +
* Corrects overlap and whitespace issue for buttons and inputs in IE6/7
 +
* Known issue: reintroduces inner spacing
 +
*/
 +
 +
table button,
 +
table input {
 +
    *overflow: auto;
 +
}
 +
 +
/*
 +
* 1. Improves usability and consistency of cursor style between image-type 'input' and others
 +
* 2. Corrects inability to style clickable 'input' types in iOS
 +
*/
 +
 +
button,
 +
html input[type="button"],
 +
input[type="reset"],
 +
input[type="submit"] {
 +
    cursor: pointer; /* 1 */
 +
    -webkit-appearance: button; /* 2 */
 +
}
 +
 +
/*
 +
* 1. Addresses box sizing set to content-box in IE8/9
 +
* 2. Addresses excess padding in IE8/9
 +
*/
 +
 +
input[type="checkbox"],
 +
input[type="radio"] {
 +
    box-sizing: border-box; /* 1 */
 +
    padding: 0; /* 2 */
 +
}
 +
 +
/*
 +
* 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;
 +
}
 +
 +
/*
 +
* Corrects inner padding displayed oddly in S5, Chrome on OSX
 +
*/
 +
 +
input[type="search"]::-webkit-search-decoration {
 +
    -webkit-appearance: none;
 +
}
 +
 +
/*
 +
* Corrects inner padding and border displayed oddly in FF3/4
 +
* 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;
 +
}
 +
 +
.clearfix:before,.clearfix:after{content:" ";display:table;}
 +
.clearfix:after{clear:both;}
 +
.clearfix{zoom:1;}
 +
 +
/*
 +
COLORS
 +
 +
Dark Blue #222438
 +
Medium Blue #69697A
 +
Light Blue #C5C3DE
 +
Yellow #FFB000
 +
Red #D92B00
 +
 +
*/
 +
 +
body {
 +
background: #222438;
 +
font-family: Georgia, Times New Roman, Times, serif;
 +
font-weight: bold;
 +
font-size: 20px;
 +
text-align: center;
 +
visibility: hidden;
 +
}
 +
 +
.simple-demo, .mobile-demo {
 +
visibility: visible;
 +
}
 +
 +
.simple-demo #content-wrapper {
 +
height: 1600px;
 +
padding-top: 400px;
 +
}
 +
 +
h1 {
 +
font-size: 120px;
 +
font-weight: normal;
 +
margin: 0;
 +
font-family: 'Luckiest Guy',Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,Gadget,sans-serif;
 +
text-transform: uppercase;
 +
color: #FFB000;
 +
text-shadow: 0 2px 1px #000;
 +
line-height: .8;
 +
}
 +
 +
h2 {
 +
font-size: 150px;
 +
font-weight: normal;
 +
margin: 0;
 +
color: #FFB000;
 +
padding: 60px;
 +
text-shadow: 0 2px 1px #000;
 +
font-family: 'Luckiest Guy',Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,Gadget,sans-serif;
 +
text-transform: uppercase;
 +
}
 +
h3 {
 +
font-size: 60px;
 +
font-weight: normal;
 +
margin: 0;
 +
color: #FFB000;
 +
text-shadow: 0 2px 1px #000;
 +
font-family: 'Luckiest Guy',Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,Gadget,sans-serif;
 +
text-transform: uppercase;
 +
}
 +
 +
p { width: 80%; margin: 20px auto; text-shadow: 0 2px 1px #000; color: #C5C3DE; }
 +
a, a:visited { color: #D92B00; font-weight: bold; font-style: italic; }
 +
ul { list-style: none; }
 +
 +
figcaption { text-shadow: 0 2px 1px #000; color: #C5C3DE; }
 +
 +
.download { padding: 10px; }
 +
 +
pre { font-size: 15px; }
 +
code { font-style: normal; }
 +
blockquote {
 +
text-align: left;
 +
width: 720px;
 +
margin: 10px auto;
 +
background: #C5C3DE;
 +
border: solid 2px #69697A;
 +
padding: 0 40px;
 +
}
 +
 +
#console {
 +
display: none;
 +
position: fixed;
 +
top: 0;
 +
left: 15px;
 +
width: 500px;
 +
margin: 0;
 +
font-size: 14px;
 +
font-style: italic;
 +
background-color: #69697A;
 +
text-shadow: none;
 +
text-align: left;
 +
padding: 3px 10px;
 +
border-radius: 0 0 10px 10px;
 +
z-index: 99;
 +
opacity: .8;
 +
}
 +
 +
#title {
 +
overflow: hidden;
 +
font-size: 180px;
 +
margin: 0 auto -580px;
 +
width: 100%;
 +
height: 1000px;
 +
position: relative;
 +
padding-top: 30px;
 +
z-index: 99;
 +
}
 +
 +
.title-line { position: relative; display: block; margin: auto; width: 300%; left: -100%; }
 +
#title-line2 { top: -60px; }
 +
#title-line3 { top: -120px; }
 +
.title-line span { display: inline-block; line-height: 1.1; position: relative; }
 +
.twitter-follow-button { position: relative; top: 8px; left: 4px; }
 +
#title-info { position: relative; z-index:99998; margin-top: 40px; opacity: 0; }
 +
 +
.credit {
 +
font-size: 20px;
 +
margin: 10px auto;
 +
text-align: center;
 +
font-style: italic;
 +
color: #D92B00;
 +
z-index:100;
 +
}
 +
 +
#download {
 +
position: relative;
 +
margin: 50px auto;
 +
font-size: 18px;
 +
width: 100%;
 +
line-height: 1.8;
 +
z-index: 99999;
 +
}
 +
#hire { margin-bottom: 80px; }
 +
 +
#download a { color: #69697A; }
 +
 +
#examples-1 { overflow: hidden; }
 +
#fly-it { position: relative; }
 +
#scale-it { width: 500%; margin: 0px -200%; padding: 0; }
 +
 +
#examples-pin { position: relative; width: 100%; height: 600px; overflow: hidden; margin-bottom: -200px; }
 +
.pin-frame { position: absolute; width: 100%; height: 100%; overflow: hidden; }
 +
.pin-frame h2 { margin-top: 120px; }
 +
#pin-frame-slide { background: #D92B00; margin-left:-100%; }
 +
#pin-frame-wipe  { background: #FFB000; top:100%; }
 +
#pin-frame-wipe h2  { color: #D92B00; }
 +
#pin-frame-bounce  { background: #222438; }
 +
#pin-frame-color  { background: #222438; }
 +
#pin-frame-unpin  { top:100%; }
 +
 +
#examples-2 { z-index: 9999; width: 100%; height: 100%; overflow: hidden; }
 +
#fling-it, #move-it { position: relative; }
 +
#examples-parallax {
 +
padding-top: 200px;
 +
height: 800px;
 +
margin-bottom: -600px;
 +
overflow: hidden;
 +
}
 +
#parallax-it {
 +
padding: 0;
 +
font-size: 80px;
 +
position: relative;
 +
}
 +
 +
#parallax-it-left {
 +
position: relative;
 +
font-size: 120px;
 +
left: -160px;
 +
color: #C5C3DE;
 +
opacity: 0.5;
 +
-moz-opacity: 0.5;
 +
filter:alpha(opacity=5);
 +
overflow: hidden;
 +
}
 +
 +
#parallax-it-right {
 +
position: relative;
 +
font-size: 160px;
 +
left: 80px;
 +
color: #C5C3DE;
 +
opacity: 0.25;
 +
-moz-opacity: 0.25;
 +
filter:alpha(opacity=2.5);
 +
overflow: hidden;
 +
width: 900px;
 +
}
 +
 +
#showcase { padding: 60px 0; }
 +
.gallery { width: 960px; margin: 0 auto; text-align: center; }
 +
.gallery figure { text-align: center; float: left; margin: 10px; height: 270px; display: inline-block; }
 +
 +
#howtouse { padding-top: 200px; }
 +
 +
.divider { font-size: 14px; padding-top: 20px; }
 +
 +
.disclaimer {
 +
font-size: 18px;
 +
font-style: italic;
 +
font-weight: normal;
 +
margin: 0 auto;
 +
}
 +
 +
#instructions { padding-top: 40px; }
 +
 +
#instructions p { margin: 0px auto 20px; }
 +
 +
#instructions-animation { padding-top: 40px; }
 +
 +
#instructions .documentation {
 +
font-size: 16px;
 +
text-align: left;
 +
width: 720px;
 +
margin: 10px auto 30px;
 +
padding: 20px 40px;
 +
text-shadow: none;
 +
border: solid 1px #69697A;
 +
color:#C5C3DE;
 +
}
 +
 +
#instructions .param-list {
 +
font-size: 18px;
 +
line-height: 1.4;
 +
padding: 0 18px;
 +
margin: 1em 0 0;
 +
}
 +
 +
#instructions .param-list-sub {
 +
padding-left: 36px;
 +
font-size: 15px;
 +
}
 +
 +
#instructions .param-list li {
 +
font-weight: normal;
 +
padding-bottom: 20px;
 +
text-shadow: 0 2px 1px #000;
 +
}
 +
.param {
 +
font-style:italic;
 +
}
 +
 +
.param-list small {
 +
display: block;
 +
font-weight: normal;
 +
font-style: italic;
 +
}
 +
 +
#credits { padding: 80px 0; }
 +
 +
/* mobile demo */
 +
 +
.mobile-demo #fade-it {
 +
margin: 400px 0 500px 0;
 +
}
 +
.mobile-demo #examples-1 {
 +
margin-bottom: 200px;
 +
}
 +
.mobile-demo #instructions {
 +
width: 800px;
 +
text-align: left;
 +
margin: auto;
 +
}
 +
.mobile-demo ul {
 +
list-style: disc;
 +
color:#FFFFFF;
 +
margin: 20px 80px 100px 80px;
 +
}
 +
.mobile-demo #content-wrapper {
 +
margin-bottom: 100px;
 +
width: 100%;
 +
}
 +
.mobile-demo h2 {
 +
width: 90%;
 +
}
 +
.mobile-demo h3 {
 +
color:#C5C3DE;
 +
}
 +
 +
#newversion {
 +
position: absolute;
 +
top: 230px;
 +
left: 50%;
 +
margin-left: 250px;
 +
z-index: 100;
 +
background-color: #D92B00;
 +
width: 200px;
 +
height: 200px;
 +
border-radius: 100px;
 +
box-shadow: 0 2px 1px #000;
 +
}
 +
#newversion h2 {
 +
font-size: 43px;
 +
margin: 0;
 +
padding: 30px 0px 0px 0px;
 +
color: #FFFFFF;
 +
font-style: normal;
 +
}
 +
#newversion a {
 +
text-decoration: none;
 +
padding: 0px 20px 20px 20px;
 +
display: block;
 +
font-size: 18px;
 +
color: #FFFFFF;
 +
}
 +
#newversion a:hover span {
 +
text-decoration: underline;
 +
}
 +
</style>
 +
 +
<link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
 +
 +
 +
<body class="simple-demo">
 +
<div id="content-wrapper">
 +
 +
<div id="examples-1">
 +
<h2 id="fade-it">Fade It</h2>
 +
<h2 id="fly-it">Fly It</h2>
 +
<h2 id="spin-it">Spin It</h2>
 +
<h2 id="scale-it">Scale It</h2>
 +
<h2 id="smush-it">Smush It</h2>
 +
</div>
 +
 +
</div>
 +
<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
 +
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 +
  <script>window.jQuery || document.write('<script src="_/js/jquery-1.9.1.min.js"><\/script>')</script>
 +
  <script src="js/jquery.superscrollorama.js"></script>
 +
<script>
 +
$(document).ready(function() {
 +
var controller = $.superscrollorama();
 +
// individual element tween examples
 +
controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}}));
 +
controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .25, {css:{right:'1000px'}, ease:Quad.easeInOut}));
 +
controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), .25, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut}));
 +
controller.addTween('#scale-it', TweenMax.fromTo( $('#scale-it'), .25, {css:{opacity:0, fontSize:'20px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, fontSize:'240px'}, ease:Quad.easeInOut}));
 +
controller.addTween('#smush-it', TweenMax.fromTo( $('#smush-it'), .25, {css:{opacity:0, 'letter-spacing':'30px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, 'letter-spacing':'-10px'}, ease:Quad.easeInOut}), 0, 100); // 100 px offset for better timing
 +
});
 +
</script>
 +
 +
</body></html>

Revision as of 08:51, 4 March 2014

<style> /* Wiki igem puricication */ /* Author: Pieter van Boheemen | Team: TU Delft*/ /* Minimized and extended by: Roman Martin | Team: Marburg*/

  1. globalWrapper { background-color: transparent; width: 100%; height:100%; border:0; font-size: 100%}
  2. content { background-color: #fff; border: none; width: 100%; overflow: hidden; height:100%; font-size: 100%;}
  3. bodyContent { width:100%; height:100%;}
  4. top-section { height: 15px; margin-left: auto; margin-right: auto; margin-bottom: 0 !important; font-size: 10px; z-index: 10; background: #4cb4b6; position: fixed; top: 0;}
  5. p-logo { height:1px; overflow:hidden; display: none;}
  6. search-controls { overflow:hidden; display:block; background: none; position: absolute; top: 100px; right: 40px;}
  7. footer-box { width: 95%; margin: 0 auto; font-size: 100%; }
  8. footer { width: 100%; margin: 0 auto; }
  9. f-list a { color: #333; font-size: 10px;}
  10. f-list a:hover { color: #666;}
  11. footer ul { margin: 0; padding: 0;}
  12. footer ul li { margin-top: 0; margin-bottom: 0; margin-left: 10px; margin-right: 10px; padding: 0;}

.visualClear, .firstHeading, .printfooter, #search-controls, #catlinks, h3#siteSub, #footer-box, #contentSub { display: none; }

  1. menubar { width: 100%; height: 15px; position: fixed; top: 0; display: block; z-index: 10; color: #000; line-height: 15px; background: url('https://static.igem.org/mediawiki/2013/7/7e/Igem-marburg-header-bg.png') top; }
  2. menubar.right-menu, #menubar.left-menu { height: 15px; background: #4cb4b6; z-index: 11; width: 50%; }
  3. menubar.right-menu ul, #menubar.left-menu ul { line-height: 15px; height: 15px; z-index: 11; }
  4. menubar.right-menu li a, #menubar.left-menu li a { color: #000; background: transparent; padding-left: 5px !important; font-size: 8pt;}

/* Wiki purification */


/*! normalize.css 2011-08-31T22:02 UTC · http://github.com/necolas/normalize.css */

/* ============================================================================= 

  HTML5 display definitions
  ========================================================================== */

/* 

* Corrects block display not defined in IE6/7/8/9 & FF3
*/

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

   display: block;

}

/* 

* Corrects inline-block display not defined in IE6/7/8/9 & FF3
*/

audio, canvas, video { 

   display: inline-block;
   *display: inline;
   *zoom: 1;

}

/* 

* Prevents modern browsers from displaying 'audio' without controls
*/

audio:not([controls]) { 

   display: none;

}

/* 

* Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
* Known issue: no IE6 support
*/

[hidden] { 

   display: none;

}


/* ============================================================================= 

  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. Keeps page centred in all browsers regardless of content height
* 3. 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 */
   overflow-y: scroll; /* 2 */
   -webkit-text-size-adjust: 100%; /* 3 */
   -ms-text-size-adjust: 100%; /* 3 */

}

/* 

* Addresses margins handled incorrectly in IE6/7
*/

body { 

   margin: 0;

}

/* 

* Addresses font-family inconsistency between 'textarea' and other form elements.
*/

body, button, input, select, textarea { 

   font-family: sans-serif;

}


/* ============================================================================= 

  Links
  ========================================================================== */

a { 

   color: #00e;

}

a:visited { 

   color: #551a8b;

}

/* 

* Addresses outline displayed oddly in Chrome
*/

a:focus { 

   outline: 0;

}

/* 

* Improves readability when focused and also mouse hovered in all browsers
* people.opera.com/patrickl/experiments/keyboard/test
*/

a:hover, a:active { 

   outline: 0;

}


/* ============================================================================= 

  Typography
  ========================================================================== */

/* 

* Addresses styling not present in IE7/8/9, S5, Chrome
*/

abbr[title] { 

   border-bottom: 1px dotted;

}

/* 

* Addresses style set to 'bolder' in FF3/4, S4/5, Chrome
  • /

b, strong { 

   font-weight: bold;

}

blockquote { 

   margin: 1em 40px;

}

/* 

* Addresses styling not present in S5, Chrome
*/

dfn { 

   font-style: italic;

}

/* 

* Addresses styling not present in IE6/7/8/9
*/

mark { 

   background: #ff0;
   color: #000;

}

/* 

* Corrects font family set oddly in IE6, S4/5, Chrome
* en.wikipedia.org/wiki/User:Davidgothberg/Test59
*/

pre, code, kbd, samp { 

   font-family: monospace, serif;
   _font-family: 'courier new', monospace;
   font-size: 1em;

}

/* 

* Improves readability of pre-formatted text in all browsers
*/

pre { 

   white-space: pre;
   white-space: pre-wrap;
   word-wrap: break-word;

}

/* 

* 1. Addresses CSS quotes not supported in IE6/7
* 2. Addresses quote property not supported in S4
*/

/* 1 */

q { 

   quotes: none;

}

/* 2 */

q:before, 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
  ========================================================================== */

ul, ol { 

   margin: 1em 0;
   padding: 0 0 0 40px;

}

dd { 

   margin: 0 0 0 40px;

}

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, F3
* 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 margin and padding
*/

fieldset { 

   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;

}

/* 

* 1. Corrects color not being inherited in IE6/7/8/9
* 2. Corrects alignment displayed oddly in IE6/7
*/

legend { 

   border: 0; /* 1 */
   *margin-left: -7px; /* 2 */

}

/* 

* 1. Corrects font size not being inherited in all browsers
* 2. Addresses margins set differently in IE6/7, F3/4, 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 */

}

/* 

* 1. Addresses FF3/4 setting line-height using !important in the UA stylesheet
* 2. Corrects inner spacing displayed oddly in IE6/7
*/

button, input { 

   line-height: normal; /* 1 */
   *overflow: visible;  /* 2 */

}

/* 

* Corrects overlap and whitespace issue for buttons and inputs in IE6/7
* Known issue: reintroduces inner spacing
*/

table button, table input { 

   *overflow: auto;

}

/* 

* 1. Improves usability and consistency of cursor style between image-type 'input' and others
* 2. Corrects inability to style clickable 'input' types in iOS
*/

button, html input[type="button"], input[type="reset"], input[type="submit"] { 

   cursor: pointer; /* 1 */
   -webkit-appearance: button; /* 2 */

}

/* 

* 1. Addresses box sizing set to content-box in IE8/9
* 2. Addresses excess padding in IE8/9
*/

input[type="checkbox"], input[type="radio"] { 

   box-sizing: border-box; /* 1 */
   padding: 0; /* 2 */

}

/* 

* 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;

}

/* 

* Corrects inner padding displayed oddly in S5, Chrome on OSX
*/

input[type="search"]::-webkit-search-decoration { 

   -webkit-appearance: none;

}

/* 

* Corrects inner padding and border displayed oddly in FF3/4
* 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;

}

.clearfix:before,.clearfix:after{content:" ";display:table;} .clearfix:after{clear:both;} .clearfix{zoom:1;}

/* COLORS

Dark Blue #222438 Medium Blue #69697A Light Blue #C5C3DE Yellow #FFB000 Red #D92B00

  • /

body { background: #222438; font-family: Georgia, Times New Roman, Times, serif; font-weight: bold; font-size: 20px; text-align: center; visibility: hidden; }

.simple-demo, .mobile-demo { visibility: visible; }

.simple-demo #content-wrapper { height: 1600px; padding-top: 400px; }

h1 { font-size: 120px; font-weight: normal; margin: 0; font-family: 'Luckiest Guy',Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,Gadget,sans-serif; text-transform: uppercase; color: #FFB000; text-shadow: 0 2px 1px #000; line-height: .8; }

h2 { font-size: 150px; font-weight: normal; margin: 0; color: #FFB000; padding: 60px; text-shadow: 0 2px 1px #000; font-family: 'Luckiest Guy',Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,Gadget,sans-serif; text-transform: uppercase; } h3 { font-size: 60px; font-weight: normal; margin: 0; color: #FFB000; text-shadow: 0 2px 1px #000; font-family: 'Luckiest Guy',Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,Gadget,sans-serif; text-transform: uppercase; }

p { width: 80%; margin: 20px auto; text-shadow: 0 2px 1px #000; color: #C5C3DE; } a, a:visited { color: #D92B00; font-weight: bold; font-style: italic; } ul { list-style: none; }

figcaption { text-shadow: 0 2px 1px #000; color: #C5C3DE; }

.download { padding: 10px; }

pre { font-size: 15px; } code { font-style: normal; } blockquote { text-align: left; width: 720px; margin: 10px auto; background: #C5C3DE; border: solid 2px #69697A; padding: 0 40px; }

  1. console {

display: none; position: fixed; top: 0; left: 15px; width: 500px; margin: 0; font-size: 14px; font-style: italic; background-color: #69697A; text-shadow: none; text-align: left; padding: 3px 10px; border-radius: 0 0 10px 10px; z-index: 99; opacity: .8; }

  1. title {

overflow: hidden; font-size: 180px; margin: 0 auto -580px; width: 100%; height: 1000px; position: relative; padding-top: 30px; z-index: 99; }

.title-line { position: relative; display: block; margin: auto; width: 300%; left: -100%; }

  1. title-line2 { top: -60px; }
  2. title-line3 { top: -120px; }

.title-line span { display: inline-block; line-height: 1.1; position: relative; } .twitter-follow-button { position: relative; top: 8px; left: 4px; }

  1. title-info { position: relative; z-index:99998; margin-top: 40px; opacity: 0; }

.credit { font-size: 20px; margin: 10px auto; text-align: center; font-style: italic; color: #D92B00; z-index:100; }

  1. download {

position: relative; margin: 50px auto; font-size: 18px; width: 100%; line-height: 1.8; z-index: 99999; }

  1. hire { margin-bottom: 80px; }
  1. download a { color: #69697A; }
  1. examples-1 { overflow: hidden; }
  2. fly-it { position: relative; }
  3. scale-it { width: 500%; margin: 0px -200%; padding: 0; }
  1. examples-pin { position: relative; width: 100%; height: 600px; overflow: hidden; margin-bottom: -200px; }

.pin-frame { position: absolute; width: 100%; height: 100%; overflow: hidden; } .pin-frame h2 { margin-top: 120px; }

  1. pin-frame-slide { background: #D92B00; margin-left:-100%; }
  2. pin-frame-wipe { background: #FFB000; top:100%; }
  3. pin-frame-wipe h2 { color: #D92B00; }
  4. pin-frame-bounce { background: #222438; }
  5. pin-frame-color { background: #222438; }
  6. pin-frame-unpin { top:100%; }
  1. examples-2 { z-index: 9999; width: 100%; height: 100%; overflow: hidden; }
  2. fling-it, #move-it { position: relative; }
  3. examples-parallax {

padding-top: 200px; height: 800px; margin-bottom: -600px; overflow: hidden; }

  1. parallax-it {

padding: 0; font-size: 80px; position: relative; }

  1. parallax-it-left {

position: relative; font-size: 120px; left: -160px; color: #C5C3DE; opacity: 0.5; -moz-opacity: 0.5; filter:alpha(opacity=5); overflow: hidden; }

  1. parallax-it-right {

position: relative; font-size: 160px; left: 80px; color: #C5C3DE; opacity: 0.25; -moz-opacity: 0.25; filter:alpha(opacity=2.5); overflow: hidden; width: 900px; }

  1. showcase { padding: 60px 0; }

.gallery { width: 960px; margin: 0 auto; text-align: center; } .gallery figure { text-align: center; float: left; margin: 10px; height: 270px; display: inline-block; }

  1. howtouse { padding-top: 200px; }

.divider { font-size: 14px; padding-top: 20px; }

.disclaimer { font-size: 18px; font-style: italic; font-weight: normal; margin: 0 auto; }

  1. instructions { padding-top: 40px; }
  1. instructions p { margin: 0px auto 20px; }
  1. instructions-animation { padding-top: 40px; }
  1. instructions .documentation {

font-size: 16px; text-align: left; width: 720px; margin: 10px auto 30px; padding: 20px 40px; text-shadow: none; border: solid 1px #69697A; color:#C5C3DE; }

  1. instructions .param-list {

font-size: 18px; line-height: 1.4; padding: 0 18px; margin: 1em 0 0; }

  1. instructions .param-list-sub {

padding-left: 36px; font-size: 15px; }

  1. instructions .param-list li {

font-weight: normal; padding-bottom: 20px; text-shadow: 0 2px 1px #000; } .param { font-style:italic; }

.param-list small { display: block; font-weight: normal; font-style: italic; }

  1. credits { padding: 80px 0; }

/* mobile demo */

.mobile-demo #fade-it { margin: 400px 0 500px 0; } .mobile-demo #examples-1 { margin-bottom: 200px; } .mobile-demo #instructions { width: 800px; text-align: left; margin: auto; } .mobile-demo ul { list-style: disc; color:#FFFFFF; margin: 20px 80px 100px 80px; } .mobile-demo #content-wrapper { margin-bottom: 100px; width: 100%; } .mobile-demo h2 { width: 90%; } .mobile-demo h3 { color:#C5C3DE; }

  1. newversion {

position: absolute; top: 230px; left: 50%; margin-left: 250px; z-index: 100; background-color: #D92B00; width: 200px; height: 200px; border-radius: 100px; box-shadow: 0 2px 1px #000; }

  1. newversion h2 {

font-size: 43px; margin: 0; padding: 30px 0px 0px 0px; color: #FFFFFF; font-style: normal; }

  1. newversion a {

text-decoration: none; padding: 0px 20px 20px 20px; display: block; font-size: 18px; color: #FFFFFF; }

  1. newversion a:hover span {

text-decoration: underline; } </style>

<link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>


<body class="simple-demo">

Contents

Fade It

Fly It

Spin It

Scale It

Smush It

<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

 	<script>window.jQuery || document.write('<script src="_/js/jquery-1.9.1.min.js"><\/script>')</script>
 	<script src="js/jquery.superscrollorama.js"></script>

<script> $(document).ready(function() { var controller = $.superscrollorama(); // individual element tween examples controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}})); controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .25, {css:{right:'1000px'}, ease:Quad.easeInOut})); controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), .25, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut})); controller.addTween('#scale-it', TweenMax.fromTo( $('#scale-it'), .25, {css:{opacity:0, fontSize:'20px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, fontSize:'240px'}, ease:Quad.easeInOut})); controller.addTween('#smush-it', TweenMax.fromTo( $('#smush-it'), .25, {css:{opacity:0, 'letter-spacing':'30px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, 'letter-spacing':'-10px'}, ease:Quad.easeInOut}), 0, 100); // 100 px offset for better timing }); </script>

</body></html>

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