Team:Marburg/

From 2013.igem.org

Revision as of 08:51, 4 March 2014 by RomanM89 (Talk | contribs)

<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/"