Team:Marburg/1

From 2013.igem.org

(Difference between revisions)
Line 7: Line 7:
<title>SUPERSCROLLORAMA - Simple Demo #1</title>
<title>SUPERSCROLLORAMA - Simple Demo #1</title>
-
<link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
+
<link href="2013.igem.org/Team:Marburg/normalize.css?action=raw" rel="stylesheet" type="text/css">
-
<style type="text/css">
+
-
/*! 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>
+
</head>
</head>

Revision as of 10:22, 4 March 2014

SUPERSCROLLORAMA - Simple Demo #1

Fade It

Fly It

Spin It

Scale It

Smush It

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