Team:UCSF/Home1

From 2013.igem.org

(Difference between revisions)
 
(13 intermediate revisions not shown)
Line 1: Line 1:
 +
<!--{{Team:HokkaidoU_Japan/Index/Slideshow}}-->
<html>
<html>
 +
<script type="text/javascript">
 +
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('j.m[\'19\']=j.m[\'V\'];j.O(j.m,{W:\'X\',V:8(x,t,b,c,d){6 j.m[j.m.W](x,t,b,c,d)},1a:8(x,t,b,c,d){6 c*(t/=d)*t+b},X:8(x,t,b,c,d){6-c*(t/=d)*(t-2)+b},1b:8(x,t,b,c,d){e((t/=d/2)<1)6 c/2*t*t+b;6-c/2*((--t)*(t-2)-1)+b},1c:8(x,t,b,c,d){6 c*(t/=d)*t*t+b},1d:8(x,t,b,c,d){6 c*((t=t/d-1)*t*t+1)+b},1e:8(x,t,b,c,d){e((t/=d/2)<1)6 c/2*t*t*t+b;6 c/2*((t-=2)*t*t+2)+b},1f:8(x,t,b,c,d){6 c*(t/=d)*t*t*t+b},1g:8(x,t,b,c,d){6-c*((t=t/d-1)*t*t*t-1)+b},1h:8(x,t,b,c,d){e((t/=d/2)<1)6 c/2*t*t*t*t+b;6-c/2*((t-=2)*t*t*t-2)+b},1i:8(x,t,b,c,d){6 c*(t/=d)*t*t*t*t+b},1j:8(x,t,b,c,d){6 c*((t=t/d-1)*t*t*t*t+1)+b},1k:8(x,t,b,c,d){e((t/=d/2)<1)6 c/2*t*t*t*t*t+b;6 c/2*((t-=2)*t*t*t*t+2)+b},1l:8(x,t,b,c,d){6-c*9.Y(t/d*(9.k/2))+c+b},1m:8(x,t,b,c,d){6 c*9.z(t/d*(9.k/2))+b},1n:8(x,t,b,c,d){6-c/2*(9.Y(9.k*t/d)-1)+b},1o:8(x,t,b,c,d){6(t==0)?b:c*9.n(2,10*(t/d-1))+b},1p:8(x,t,b,c,d){6(t==d)?b+c:c*(-9.n(2,-10*t/d)+1)+b},1q:8(x,t,b,c,d){e(t==0)6 b;e(t==d)6 b+c;e((t/=d/2)<1)6 c/2*9.n(2,10*(t-1))+b;6 c/2*(-9.n(2,-10*--t)+2)+b},1r:8(x,t,b,c,d){6-c*(9.F(1-(t/=d)*t)-1)+b},1s:8(x,t,b,c,d){6 c*9.F(1-(t=t/d-1)*t)+b},1t:8(x,t,b,c,d){e((t/=d/2)<1)6-c/2*(9.F(1-t*t)-1)+b;6 c/2*(9.F(1-(t-=2)*t)+1)+b},1u:8(x,t,b,c,d){g s=1.r;g p=0;g a=c;e(t==0)6 b;e((t/=d)==1)6 b+c;e(!p)p=d*.3;e(a<9.P(c)){a=c;g s=p/4}u g s=p/(2*9.k)*9.Q(c/a);6-(a*9.n(2,10*(t-=1))*9.z((t*d-s)*(2*9.k)/p))+b},1v:8(x,t,b,c,d){g s=1.r;g p=0;g a=c;e(t==0)6 b;e((t/=d)==1)6 b+c;e(!p)p=d*.3;e(a<9.P(c)){a=c;g s=p/4}u g s=p/(2*9.k)*9.Q(c/a);6 a*9.n(2,-10*t)*9.z((t*d-s)*(2*9.k)/p)+c+b},1w:8(x,t,b,c,d){g s=1.r;g p=0;g a=c;e(t==0)6 b;e((t/=d/2)==2)6 b+c;e(!p)p=d*(.3*1.5);e(a<9.P(c)){a=c;g s=p/4}u g s=p/(2*9.k)*9.Q(c/a);e(t<1)6-.5*(a*9.n(2,10*(t-=1))*9.z((t*d-s)*(2*9.k)/p))+b;6 a*9.n(2,-10*(t-=1))*9.z((t*d-s)*(2*9.k)/p)*.5+c+b},1x:8(x,t,b,c,d,s){e(s==G)s=1.r;6 c*(t/=d)*t*((s+1)*t-s)+b},1y:8(x,t,b,c,d,s){e(s==G)s=1.r;6 c*((t=t/d-1)*t*((s+1)*t+s)+1)+b},1z:8(x,t,b,c,d,s){e(s==G)s=1.r;e((t/=d/2)<1)6 c/2*(t*t*(((s*=(1.Z))+1)*t-s))+b;6 c/2*((t-=2)*t*(((s*=(1.Z))+1)*t+s)+2)+b},11:8(x,t,b,c,d){6 c-j.m.R(x,d-t,0,c,d)+b},R:8(x,t,b,c,d){e((t/=d)<(1/2.q)){6 c*(7.H*t*t)+b}u e(t<(2/2.q)){6 c*(7.H*(t-=(1.5/2.q))*t+.q)+b}u e(t<(2.5/2.q)){6 c*(7.H*(t-=(2.1A/2.q))*t+.1B)+b}u{6 c*(7.H*(t-=(2.1C/2.q))*t+.1D)+b}},1E:8(x,t,b,c,d){e(t<d/2)6 j.m.11(x,t*2,0,c,d)*.5+b;6 j.m.R(x,t*2-d,0,c,d)*.5+c*.5+b}});(8($){$.1F={1G:\'@1H\'};$.S([\'A\',\'T\'],8(i,c){$.I[\'1I\'+c]=8(){e(!f[0])6;g a=c==\'A\'?\'J\':\'B\',v=c==\'A\'?\'12\':\'13\';6 h(f,c.14())+h(f,\'K\'+a)+h(f,\'K\'+v)};$.I[\'1J\'+c]=8(a){e(!f[0])6;g b=c==\'A\'?\'J\':\'B\',v=c==\'A\'?\'12\':\'13\';a=$.O({L:1K},a||{});6 h(f,c.14())+h(f,\'15\'+b+\'T\')+h(f,\'15\'+v+\'T\')+h(f,\'K\'+b)+h(f,\'K\'+v)+(a.L?(h(f,\'L\'+b)+h(f,\'L\'+v)):0)}});$.S([\'B\',\'J\'],8(i,b){$.I[\'C\'+b]=8(a){e(!f[0])6;6 a!=G?f.S(8(){f==D||f==M?D.1L(b==\'B\'?a:$(D)[\'1M\'](),b==\'J\'?a:$(D)[\'1N\']()):f[\'C\'+b]=a}):f[0]==D||f[0]==M?1O[(b==\'B\'?\'1P\':\'1Q\')]||$.1R&&M.1S[\'C\'+b]||M.16[\'C\'+b]:f[0][\'C\'+b]}});$.I.O({17:8(){g a=0,w=0,N=f[0],o,y,l,U;e(N){l=f.l();o=f.o();y=l.o();o.w-=h(N,\'1T\');o.E-=h(N,\'1U\');y.w+=h(l,\'1V\');y.E+=h(l,\'1W\');U={w:o.w-y.w,E:o.E-y.E}}6 U},l:8(){g a=f[0].l;1X(a&&(!/^16|1Y$/i.1Z(a.20)&&$.18(a,\'17\')==\'21\'))a=a.l;6 $(a)}});8 h(a,b){6 22($.18(a.23?a[0]:a,b))||0}})(j);',62,128,'||||||return||function|Math|||||if|this|var|num||jQuery|PI|offsetParent|easing|pow|offset||75|70158|||else|borr|top||parentOffset|sin|Height|Left|scroll|window|left|sqrt|undefined|5625|fn|Top|padding|margin|document|elem|extend|abs|asin|easeOutBounce|each|Width|results|swing|def|easeOutQuad|cos|525||easeInBounce|Bottom|Right|toLowerCase|border|body|position|css|jswing|easeInQuad|easeInOutQuad|easeInCubic|easeOutCubic|easeInOutCubic|easeInQuart|easeOutQuart|easeInOutQuart|easeInQuint|easeOutQuint|easeInOutQuint|easeInSine|easeOutSine|easeInOutSine|easeInExpo|easeOutExpo|easeInOutExpo|easeInCirc|easeOutCirc|easeInOutCirc|easeInElastic|easeOutElastic|easeInOutElastic|easeInBack|easeOutBack|easeInOutBack|25|9375|625|984375|easeInOutBounce|dimensions|version|VERSION|inner|outer|false|scrollTo|scrollLeft|scrollTop|self|pageXOffset|pageYOffset|boxModel|documentElement|marginTop|marginLeft|borderTopWidth|borderLeftWidth|while|html|test|tagName|static|parseInt|jquery'.split('|'),0,{}));
 +
// JavaScript Document
 +
/*! Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
 +
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 +
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 +
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
 +
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
 +
*
 +
* Version: 3.0.2
 +
*
 +
* Requires: 1.2.2+
 +
*/
 +
(function($) {
 +
var types = ['DOMMouseScroll', 'mousewheel'];
-
<!--
+
$.event.special.mousewheel = {
-
* Markup for jQuery Orbit Plugin 1.2.3
+
setup: function() {
-
* www.ZURB.com/playground
+
if ( this.addEventListener )
-
* Copyright 2010, ZURB
+
for ( var i=types.length; i; )
-
* Free to use under the MIT license.
+
this.addEventListener( types[--i], handler, false );
-
* http://www.opensource.org/licenses/mit-license.php
+
else
-
-->
+
this.onmousewheel = handler;
-
+
},
-
+
-
+
teardown: function() {
-
<head>
+
if ( this.removeEventListener )
-
<meta charset="utf-8" />
+
for ( var i=types.length; i; )
-
<title>Stanford-Brown iGEM</title>
+
this.removeEventListener( types[--i], handler, false );
-
+
else
-
<!-- Attach our CSS -->
+
this.onmousewheel = null;
-
  <!-- <link rel="stylesheet" href="../orbit-1.2.3.css">
+
}
-
  <link rel="stylesheet" href="demo-style.css">
+
};
-
  -->
+
-
<!-- Attach necessary JS --><!--
+
-
<script type="text/javascript" src="../jquery-1.5.1.min.js"></script>
+
-
<script type="text/javascript" src="../jquery.orbit-1.2.3.min.js"></script>
+
-
-->
+
-
<!-- Attach our CSS -->
+
$.fn.extend({
-
  <link rel="stylesheet" href="http://www.stanford.edu/~sryoung/cgi-bin/igem/orbit-1.2.3.css">
+
mousewheel: function(fn) {
-
  <link rel="stylesheet" href="http://www.stanford.edu/~sryoung/cgi-bin/igem/demo/demo-style.css">
+
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
-
 
+
},
-
<!-- Attach necessary JS -->
+
-
<script type="text/javascript" src="http://www.stanford.edu/~sryoung/cgi-bin/igem/jquery-1.5.1.min.js"></script>
+
unmousewheel: function(fn) {
-
<script type="text/javascript" src="http://www.stanford.edu/~sryoung/cgi-bin/igem/jquery.orbit-1.2.3.min.js"></script>
+
return this.unbind("mousewheel", fn);
-
+
}
-
+
});
-
<!--[if IE]>
+
-
    <style type="text/css">
+
-
        .timer { display: none !important; }
+
-
        div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
+
-
    </style>
+
-
<![endif]-->
+
-
+
-
<!-- Run the plugin -->
+
-
<script type="text/javascript">
+
-
    $(window).load(function () {
+
-
        $('#featured').orbit();
+
-
    });
+
-
</script>
+
-
 
+
function handler(event) {
-
<!-- Stuff from Calgary -->
+
var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
-
 
+
-
<link rel='stylesheet' type='text/css' href="https://2012.igem.org/Team:Calgary/static/basicpageglobal.css?action=raw&ctype=text/css" />
+
-
 
+
-
<style>
+
-
/*======
+
-
Desktop Styling
+
-
======*/
+
-
/***Body styling***/
+
event = $.event.fix(event || window.event);
-
h1{
+
event.type = "mousewheel";
-
font-size: 2.5em;
+
-
}
+
if ( event.wheelDelta ) delta = event.wheelDelta/120;
-
h2{
+
if ( event.detail    ) delta = -event.detail/3;
-
font-size: 1.8em;
+
-
}
+
// Add events and delta to the front of the arguments
 +
args.unshift(event, delta);
-
#box1{
+
return $.event.handle.apply(this, args);
-
width: 968px;
+
-
margin-top: -8px;
+
-
background: threedface;
+
-
float: left;
+
-
padding-bottom: 20px;
+
-
margin-bottom: 13px;
+
}
}
-
#box1 h2{
 
-
padding: 20px 20px 20px 20px;
 
-
}
 
-
#box1 p{
 
-
padding: 0px 20px 0px 20px;
 
-
font-size: 1.1em;
 
-
}
 
-
#FredOscarFlag{
+
})(jQuery);
-
display: block;
+
 
-
float: left;
+
/**
-
width: 250px;
+
* @version $Id:  $Revision
-
height: 274px;
+
* @package jquery
-
background: url('https://static.igem.org/mediawiki/2012/0/0b/UCalgary2012_FRED_and_OSCAR_Main_Page.png');
+
* @subpackage lofslidernews
-
background-position: top;
+
* @copyright Copyright (C) JAN 2010 LandOfCoder.com <@emai:landofcoder@gmail.com>. All rights reserved.
-
margin: 15px;
+
* @website    http://landofcoder.com
-
}
+
* @license This plugin is dual-licensed under the GNU General Public License and the MIT License
-
#FredOscarFlag:hover{
+
*/
-
background-position: bottom;
+
// JavaScript Document
 +
(function($) {
 +
$.fn.lofJSidernews = function( settings ) {
 +
return this.each(function() {
 +
// get instance of the lofSiderNew.
 +
new  $.lofSidernews( this, settings );
 +
});
 +
}
 +
$.lofSidernews = function( obj, settings ){
 +
this.settings = {
 +
direction     : '',
 +
mainItemSelector    : 'li',
 +
navInnerSelector : 'ul',
 +
navSelector  : 'li' ,
 +
navigatorEvent : 'click',
 +
wapperSelector: '.lof-main-wapper',
 +
interval   : 4000,
 +
auto     : true, // whether to automatic play the slideshow
 +
maxItemDisplay : 3,
 +
startItem : 0,
 +
navPosition : 'vertical',
 +
navigatorHeight : 100,
 +
navigatorWidth : 310,
 +
duration : 600,
 +
navItemsSelector    : '.lof-navigator li',
 +
navOuterSelector    : '.lof-navigator-outer' ,
 +
isPreloaded : true,
 +
easing : 'easeInOutQuad'
 +
}
 +
$.extend( this.settings, settings ||{} );
 +
this.nextNo        = null;
 +
this.previousNo    = null;
 +
this.maxWidth  = this.settings.mainWidth || 600;
 +
this.wrapper = $( obj ).find( this.settings.wapperSelector );
 +
this.slides = this.wrapper.find( this.settings.mainItemSelector );
 +
if( !this.wrapper.length || !this.slides.length ) return ;
 +
// set width of wapper
 +
if( this.settings.maxItemDisplay > this.slides.length ){
 +
this.settings.maxItemDisplay = this.slides.length;
 +
}
 +
this.currentNo      = isNaN(this.settings.startItem)||this.settings.startItem > this.slides.length?0:this.settings.startItem;
 +
this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );
 +
this.navigatorItems = $( obj ).find( this.settings.navItemsSelector ) ;
 +
this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );
 +
 +
if( this.settings.navPosition == 'horizontal' ){
 +
this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth );
 +
this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth );
 +
this.navigatorOuter.height( this.settings.navigatorHeight );
 +
 +
} else {
 +
this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight );
 +
 +
this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );
 +
this.navigatorOuter.width( this.settings.navigatorWidth );
 +
}
 +
this.navigratorStep = this.__getPositionMode( this.settings.navPosition );
 +
this.directionMode = this.__getDirectionMode(); 
 +
 +
 +
if( this.settings.direction == 'opacity') {
 +
this.wrapper.addClass( 'lof-opacity' );
 +
$(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);
 +
} else {
 +
this.wrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );
}
}
-
 
-
#box2{
 
-
width: 968px;
 
-
background: #C68DD8;
 
-
float: left;
 
-
margin-bottom: 13px;
 
-
}
 
-
#box2 h2{
 
-
padding: 20px 20px 20px 20px;
 
-
color: white;
 
-
}
 
-
#box2 p{
 
-
padding: 0px 20px 0px 20px;
 
-
font-size: 1.1em;
 
-
color: white;
 
-
}
 
-
#box2 img{
 
-
float: left;
 
-
margin: 15px;
 
-
height: 110px;
 
-
}
 
-
#box2:hover{
 
-
background: #D79EE9;
 
-
}
 
-
/***positioning of elements in ZE EPIC BOX***/
+
if( this.settings.isPreloaded ) {
-
#epicbox{
+
this.preLoadImage( this.onComplete );
-
margin-top: 4px;
+
} else {
-
}
+
this.onComplete();
 +
}
 +
 +
}
 +
    $.lofSidernews.fn =  $.lofSidernews.prototype;
 +
    $.lofSidernews.fn.extend =  $.lofSidernews.extend = $.extend;
 +
 +
$.lofSidernews.fn.extend({
 +
 
 +
startUp:function( obj, wrapper ) {
 +
seft = this;
 +
 
 +
this.navigatorItems.each( function(index, item ){
 +
$(item).click( function(){
 +
seft.jumping( index, true );
 +
seft.setNavActive( index, item );
 +
} );
 +
$(item).css( {'height': seft.settings.navigatorHeight, 'width':  seft.settings.navigatorWidth} );
 +
})
 +
this.registerWheelHandler( this.navigatorOuter, this );
 +
this.setNavActive(this.currentNo );
 +
 +
if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){
 +
this.registerButtonsControl( 'click', this.settings.buttons, this );
-
#boximgcontainer{
 
-
float: left;
 
-
width: 644px;
 
-
height: 655px;
 
-
}
 
-
#boximgcontainer div{
 
-
float: left;
 
-
position: relative;
 
-
}
 
-
#orangebox{
 
-
margin-bottom: 4px;
 
-
}
 
-
#orangebox .imgbox{
 
-
width: 644px;
 
-
height: 215px;
 
-
top: 108px;
 
-
// background: #F6A82D;
 
-
//background: #33CC33;
 
-
background: #555555;
 
-
margin-bottom: 4px;
 
-
}
 
-
.oblank{
 
-
width: 644px;
 
-
height: 104px;
 
-
//background: #FFE485;
 
-
//background: #33EE33;
 
-
background: #888888;
 
-
position: relative;
 
-
top: -219px;
 
}
}
-
#orangebox:hover .oblank, .oblank:hover{
+
if( this.settings.auto )
-
display: none;
+
this.play( this.settings.interval,'next', true );
-
}
+
-
#orangebox .iconcontainer{
+
return this;
-
position: relative;
+
},
-
display: none;
+
onComplete:function(){
-
left: auto;
+
setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 ); this.startUp( );
-
top: -219px;
+
},
-
}
+
preLoadImage:function(  callback ){
-
.iconbox div, .iconbox{
+
var self = this;
-
width: 104px;
+
var images = this.wrapper.find( 'img' );
-
height: 104px;
+
-
margin-right: 4px;
+
var count = 0;
-
}
+
images.each( function(index,image){
-
a.obox1 div{
+
if( !image.complete ){  
-
background: #BBBBBB;
+
image.onload =function(){
-
}
+
count++;
-
a.obox2 div{
+
if( count >= images.length ){
-
background: #AAAAAA;
+
self.onComplete();
-
}
+
}
-
a.obox3 div{
+
}
-
background: #999999;
+
image.onerror =function(){  
-
}
+
count++;
-
a.obox4 div{
+
if( count >= images.length ){
-
background: #888888;
+
self.onComplete();
-
}
+
}
-
a.obox5 div{
+
}
-
background: #777777;
+
}else {
-
}
+
count++;
-
a.obox6 div{
+
if( count >= images.length ){
-
background: #666666;
+
self.onComplete();
-
margin-right: 0;
+
}
}
}
-
#orangebox div:hover, #orangebox div.iconbox:hover div{
+
} );
-
background: #DDDDDD;
+
},
 +
navivationAnimate:function( currentIndex ) {  
 +
if (currentIndex <= this.settings.startItem
 +
|| currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1) {
 +
this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;
 +
if (this.settings.startItem < 0) this.settings.startItem = 0;
 +
if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) {
 +
this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;
 +
}
 +
}
 +
this.navigatorInner.stop().animate( eval('({'+this.navigratorStep[0]+':-'+this.settings.startItem*this.navigratorStep[1]+'})'),
 +
{duration:500, easing:'easeInOutQuad'} );
 +
},
 +
setNavActive:function( index, item ){
 +
if( (this.navigatorItems) ){
 +
this.navigatorItems.removeClass( 'active' );
 +
$(this.navigatorItems.get(index)).addClass( 'active' );
 +
this.navivationAnimate( this.currentNo );
}
}
-
#orangebox:hover .iconcontainer{
+
},
-
display: block;
+
__getPositionMode:function( position ){
-
background: transparent;
+
if( position  == 'horizontal' ){
-
}
+
return ['left', this.settings.navigatorWidth];
-
+
-
+
-
#greenbox .imgbox{
+
-
width: 320px;
+
-
height: 215px;
+
-
//background: #58CD45;
+
-
//background: #888888;
+
-
//background: #33CC33;
+
-
background: #663399;
+
-
}
+
-
.gblank{
+
-
width: 320px;
+
-
height: 104px;
+
-
//background: #B6FFA3;
+
-
//background: #BBBBBB;
+
-
//background: #33EE33;
+
-
background: #9933FF;
+
-
position: relative;
+
-
top: 219px;
+
-
left: -320px;
+
}
}
-
#greenbox .iconcontainer{
+
return ['top', this.settings.navigatorHeight];
-
position: relative;
+
},
-
margin-top: 4px;
+
__getDirectionMode:function(){
-
left: -999em;
+
switch( this.settings.direction ){
-
z-index: 1;
+
case 'opacity': this.maxSize=0; return ['opacity','opacity'];
 +
default: this.maxSize=this.maxWidth; return ['left','width'];
}
}
-
a.gbox1 div{
+
},
-
background: #9933FF;
+
registerWheelHandler:function( element, obj ){
 +
element.bind('mousewheel', function(event, delta ) {
 +
var dir = delta > 0 ? 'Up' : 'Down',
 +
vel = Math.abs(delta);
 +
if( delta > 0 ){
 +
obj.previous( true );
 +
} else {
 +
obj.next( true );
}
}
-
a.gbox2 div{
+
return false;
-
background: #9900FF;
+
});
 +
},
 +
registerButtonsControl:function( eventHandler, objects, self ){
 +
for( var action in objects ){
 +
switch (action.toString() ){
 +
case 'next':
 +
objects[action].click( function() { self.next( true) } );
 +
break;
 +
case 'previous':
 +
objects[action].click( function() { self.previous( true) } );
 +
break;
}
}
-
a.gbox3 div{
 
-
background: #660099;
 
-
}
 
-
a.gbox4 div{
 
-
background: #663399;
 
-
}
 
-
#greenbox div:hover, #greenbox div.iconbox:hover div{
 
-
//background: #94FF7D;
 
-
background: #9933FF;
 
-
z-index: 99; /*hovers are not overridden by OSCAR boxes*/
 
}
}
-
#greenbox:hover .gblank, .gblank:hover{
+
return this;
-
display: none;
+
},
-
}
+
onProcessing:function( manual, start, end ){
-
#greenbox:hover .iconcontainer{
+
this.previousNo = this.currentNo + (this.currentNo>0 ? -1 : this.slides.length-1);
-
left: auto;
+
this.nextNo = this.currentNo + (this.currentNo < this.slides.length-1 ? 1 : 1- this.slides.length);
-
background: transparent;
+
return this;
 +
},
 +
finishFx:function( manual ){
 +
if( manual ) this.stop();
 +
if( manual && this.settings.auto ){
 +
this.play( this.settings.interval,'next', true );
 +
}
 +
this.setNavActive( this.currentNo );
 +
},
 +
getObjectDirection:function( start, end ){
 +
return eval("({'"+this.directionMode[0]+"':-"+(this.currentNo*start)+"})");
 +
},
 +
fxStart:function( index, obj, currentObj ){
 +
if( this.settings.direction == 'opacity' ) {  
 +
$(this.slides).stop().animate({opacity:0}, {duration: this.settings.duration, easing:this.settings.easing} );
 +
$(this.slides).eq(index).stop().animate( {opacity:1}, {duration: this.settings.duration, easing:this.settings.easing} );
 +
}else {
 +
this.wrapper.stop().animate( obj, {duration: this.settings.duration, easing:this.settings.easing} );
}
}
-
+
return this;
-
#bluebox{
+
},
-
position: relative;
+
jumping:function( no, manual ){
-
top: -323px;
+
this.stop();
-
left: 320px;
+
if( this.currentNo == no ) return;
 +
var obj = eval("({'"+this.directionMode[0]+"':-"+(this.maxSize*no)+"})");
 +
this.onProcessing( null, manual, 0, this.maxSize )
 +
.fxStart( no, obj, this )
 +
.finishFx( manual );
 +
this.currentNo  = no;
 +
},
 +
next:function( manual , item){
 +
 
 +
this.currentNo += (this.currentNo < this.slides.length-1) ? 1 : (1 - this.slides.length);
 +
this.onProcessing( item, manual, 0, this.maxSize )
 +
.fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
 +
.finishFx( manual );
 +
},
 +
previous:function( manual, item ){
 +
this.currentNo += this.currentNo > 0 ? -1 : this.slides.length - 1;
 +
this.onProcessing( item, manual )
 +
.fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
 +
.finishFx( manual );
 +
},
 +
play:function( delay, direction, wait ){
 +
this.stop();
 +
if(!wait){ this[direction](false); }
 +
var self  = this;
 +
this.isRun = setTimeout(function() { self[direction](true); }, delay);
 +
},
 +
stop:function(){
 +
if (this.isRun == null) return;
 +
clearTimeout(this.isRun);
 +
            this.isRun = null;  
}
}
-
#bluebox .imgbox{
+
})
-
width: 320px;
+
})(jQuery)
-
height: 215px;
+
</script>
-
//background: #5BB5E8;
+
<style type="text/css">
-
background: #660000;
+
@charset "utf-8";
-
margin-left: 4px;
+
/* CSS Document */
-
}
+
.lof-slidecontent, .lof-slidecontent a {
-
.bblank{
+
color:#FFF;
-
width: 320px;
+
-
height: 104px;
+
-
//background: #C5F0F0;
+
-
background: #996666;
+
-
position: relative;
+
-
top: 219px;
+
-
left: -320px;
+
-
z-index: 0;
+
-
}
+
-
#bluebox .iconcontainer{
+
-
position: relative;
+
-
margin-top: 4px;
+
-
left: -999em;
+
-
z-index: 0;
+
-
}
+
-
a.bbox1 div{
+
-
background: #993333;
+
-
}
+
-
a.bbox2 div{
+
-
background: #993300;
+
-
}
+
-
a.bbox3 div{
+
-
background: #990033;
+
-
}
+
-
a.bbox4 div{
+
-
background: #990000;
+
-
}
+
-
a.bbox5 div{
+
-
background: #990066;
+
-
}
+
-
a.bbox6 div{
+
-
background: #993366;
+
-
margin: 0;
+
-
}
+
-
#bluebox div:hover, #bluebox .iconbox:hover div{
+
-
//background: #7DD7FF;
+
-
background: #993333;
+
-
z-index: 99; /*hovers are not overridden by FRED boxes*/
+
-
}
+
-
#bluebox:hover .bblank, .bblank:hover{
+
-
display: none;
+
-
}
+
-
#bluebox:hover .iconcontainer{
+
-
left: -212px;
+
-
background: transparent;
+
-
}
+
-
+
-
#boxinfo{
+
-
float: right;
+
-
position: relative;
+
-
width: 320px;
+
-
left: 3px;
+
-
// background: #555555;
+
-
background: #33CC33;
+
-
height: 650px;
+
-
margin-bottom: 12px;
+
-
}
+
-
#boxinfo h2{
+
-
color: white;
+
-
padding: 20px 20px 0px;
+
-
}
+
-
#boxinfo p{
+
-
color: white;
+
-
padding: 10px 20px 20px;
+
-
font-size: 1.2em;
+
-
}
+
-
/*initial boxinfo appearance settings*/
+
-
#boxinfo div.orangebox, #boxinfo div.obox1, #boxinfo div.obox2, #boxinfo div.obox3, #boxinfo div.obox4, #boxinfo div.obox5, #boxinfo div.obox6{
+
-
display: none;
+
-
}
+
-
#boxinfo div.greenbox, #boxinfo div.gbox1, #boxinfo div.gbox2, #boxinfo div.gbox3, #boxinfo div.gbox4,
+
-
#boxinfo div.bluebox, #boxinfo div.bbox1, #boxinfo div.bbox2, #boxinfo div.bbox3, #boxinfo div.bbox4, #boxinfo div.bbox5{
+
-
position: relative;
+
-
padding-top: 320px;
+
-
display: none;
+
-
}
+
-
/*bold colours for FRED and OSCAR*/
+
-
#boxinfo div.greenbox b{
+
-
color: #72E85B;
+
-
}
+
-
#boxinfo div.bluebox b{
+
-
color: #5EB7F0;
+
-
}
+
-
.threeboxes{
+
-
clear: both;
+
-
position: relative;
+
-
width: 968px;
+
-
margin-bottom: 12px;
+
}
}
-
.threeboxes a, .threeboxes a div{
+
.lof-slidecontent a.readmore{
-
width: 320px;
+
color:#58B1EA;
-
height: 155px;
+
font-size:95%;
-
float: left;
+
-
margin-bottom: 12px;
+
-
}
+
-
.threeboxes div h2{
+
-
padding: 20px 20px 0px;
+
-
position: relative;
+
-
top: -155px;
+
-
}
+
-
.threeboxes div p{
+
-
padding: 0px 20px;
+
-
position: relative;
+
-
top: -155px;
+
-
}
+
-
#greybox1, #greybox6{
+
-
margin-right: 4px;
+
-
//background: #58CD45;
+
-
                        background: #3399FF;
+
-
}
+
-
#greybox1:hover, #greybox6:hover{
+
-
background: #94FF7D;
+
-
}
+
-
#greybox2, #greybox5{
+
-
margin-right: 4px;
+
-
background: #5BB5E8;
+
-
                     
+
-
}
+
-
#greybox2:hover, #greybox5:hover{
+
-
background: #7DD7FF;
+
-
}
+
-
#greybox3, #greybox4{
+
-
margin: 0;
+
-
//background: #F6A82D;
+
-
                        background: #00CCFF;
+
-
}
+
-
#greybox3:hover, #greybox4:hover{
+
-
background: #FFE44F;
+
-
}
+
-
 
+
-
#greybox4 {
+
-
background: #CCFFFF;
+
}
}
-
#greybox5 {
+
.lof-slidecontent{
-
background: #CCFFFF;
+
position:relative;
 +
overflow:hidden;
 +
border:#F4F4F4 solid 1px;
 +
margin: 0 auto 30px auto;
 +
border-radius: 4px;
}
}
-
#greybox6 {
+
.lof-slidecontent .preload{
-
background: #CCFFFF;
+
height:100%;
 +
width:100%;
 +
position:absolute;
 +
top:0;
 +
left:0;
 +
z-index:100000;
 +
text-align:center;
 +
background:#FFF
}
}
-
#greybox1:hover, #greybox2:hover, #greybox3:hover {
+
.lof-slidecontent .preload div{
-
background: #00CC00;
+
height:100%;
 +
width:100%;
 +
background:transparent url(https://static.igem.org/mediawiki/2011/5/5d/IGEM_HokkaidoU_Index_Slideshow_Load-indicator.gif) no-repeat scroll 50% 50%;
 +
}
 +
.lof-main-outer{
 +
position:relative;
 +
height:100%;
 +
width:900px;
 +
z-index:3px;
 +
overflow:hidden;
}
}
-
 
+
/*******************************************************/
-
 
+
.lof-main-item-desc{
-
#greybox4:hover, #greybox5:hover, #greybox6:hover {
+
z-index:100px;
-
background: #66FFFF;
+
position:absolute;
 +
bottom:55px;
 +
left:0px;
 +
background:url(https://static.igem.org/mediawiki/2011/e/eb/IGEM_HokkaidoU_Index_Slideshow_Bg_trans.png);
 +
height:1.5em;
 +
/* filter:0.7(opacity:60) */
 +
padding:10px;
 +
overflow: hidden;
}
}
-
 
+
.lof-main-item-desc p{
-
#greybox1 {
+
margin:0 8px;
-
background: #CCFF99;
+
padding:0 0;
 +
font-size: small;
 +
line-height: 1.2em;
}
}
-
#greybox2 {
+
.lof-main-item-desc h3{
-
background: #CCFF99;
+
padding:0;
 +
margin:0;
 +
color: #fff;
 +
font-size: small;
 +
border-left: none;
}
}
-
#greybox3 {
+
.lof-main-item-desc h2{
-
background: #CCFF99;
+
padding:0;
 +
margin:15px 0 0 0;
 +
color: #fff;
 +
border-bottom: none;
 +
font-weight:bold;
}
}
-
+
.lof-main-item-desc h3 a{
-
#sponsorsbox{
+
margin:0;
-
clear: both;
+
background:#C01F25;
-
position: relative;
+
font-size:75%;
-
width: 968px;
+
padding:2px 3px;
-
margin: 4px 0px;
+
font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
-
background: #EEEEEE;
+
text-transform:uppercase;
 +
text-decoration:none
}
}
-
#sponsorsbox h2{
+
.lof-main-item-desc h3 a:hover{
-
padding: 20px 20px 0px 20px;
+
-
}
+
-
#sponsorsbox p{
+
-
padding: 0px 20px;
+
-
}
+
-
#sponsorsbox table{
+
-
width: 950px;
+
-
margin-left: auto;
+
-
margin-right: auto;
+
-
background: #EEEEEE;
+
-
}
+
-
#sponsorsbox td{
+
-
padding: 15px 0px;
+
-
width: 300px;
+
-
}
+
-
#sponsorsbox img{
+
-
display: block;
+
-
margin-right: auto;
+
-
margin-left: auto;
+
-
}
+
-
</style>
+
text-decoration:underline;
 +
}
 +
.lof-main-item-desc h3 i {
 +
font-size:70%;
 +
}
-
<script>
+
/* main flash */
-
    jQuery(document).ready(function ($) {
+
ul.lof-main-wapper{
 +
/* margin-right:auto; */
 +
overflow:hidden;
 +
background:transparent url(https://static.igem.org/mediawiki/2011/5/5d/IGEM_HokkaidoU_Index_Slideshow_Load-indicator.gif) no-repeat scroll 50% 50%;
 +
padding:0px;
 +
margin:0;
 +
position:absolute;
 +
overflow:hidden;
 +
}
-
        //eliminate jsnotice
+
ul.lof-main-wapper li{
-
        $('#jsnotice').hide();
+
overflow:hidden;
 +
padding:0px;
 +
margin:0px;
 +
float:left;
 +
position:relative;
 +
}
 +
.lof-opacity  li{
 +
position:absolute;
 +
top:0;
 +
left:0;
 +
float:inherit;
 +
}
 +
ul.lof-main-wapper li img{
 +
padding:0px;
 +
}
 +
/* item navigator */
 +
.lof-navigator-wapper {
 +
position:absolute;
 +
bottom:10px;
 +
right:10px;
 +
background:url(https://static.igem.org/mediawiki/2011/b/b8/IGEM_HokkaidoU_Index_Slideshow_Transparent_bg.png) repeat;
 +
padding:5px 0px;
 +
}
 +
.lof-navigator-outer{
 +
position:relative;
 +
z-index:100;
 +
height:180px;
 +
width:310px;
 +
overflow:hidden;
 +
color:#FFF;
 +
float:left
 +
}
 +
ul.lof-navigator{
 +
top:0;
 +
padding:0;
 +
margin:0;
 +
position:absolute;
 +
width:100%;
 +
}
 +
ul.lof-navigator li{
 +
cursor:hand;
 +
cursor:pointer;
 +
list-style:none;
 +
padding:0;
 +
margin-left:0px;
 +
overflow:hidden;
 +
float:left;
 +
display:block;
-
        /*epic box info functionality*/
+
text-align:center;
-
        //small icons
+
-
        $('#boximgcontainer .iconbox').hover(
+
-
function () {
+
-
    var className = $(this).attr('class').split(" ");
+
-
    var box = className[0];
+
-
    clearinfo();
+
-
    $('#boxinfo div.' + box).show();
+
-
},
+
-
function () {
+
-
    clearinfo();
+
-
    $('#boxinfo_default').show();
+
-
});
+
-
        //large icons
+
-
        $('.imgbox').hover(
+
-
function () {
+
-
    var id = $(this).parent().parent().attr('id');
+
-
    clearinfo();
+
-
    $('#boxinfo div.' + id).show();
+
-
},
+
-
function () {
+
-
    clearinfo();
+
-
    $('#boxinfo_default').show();
+
-
});
+
-
        /*epic box FRED/OSCAR blank box disappearance*/
+
}
-
        $('#bluebox').hover(
+
ul.lof-navigator li img{
-
function () {
+
border:#666 solid 3px;
-
    $('.gblank').hide();
+
}
-
    $('.bblank').hide();
+
ul.lof-navigator li.active img, ul.lof-navigator li:hover img {
-
},
+
border:#A8A8A8 solid 3px;
-
function () {
+
}
-
    $('.gblank').show();
+
.lof-navigator-wapper .lof-next,  .lof-navigator-wapper .lof-previous{
-
    $('.bblank').show();
+
display:block;
-
});
+
width:22px;
 +
height:30px;
 +
color:#FFF;
 +
cursor:pointer;
-
        $('#greenbox').hover(
+
}
-
function () {
+
.lof-navigator-wapper .lof-next {
-
    $('.gblank').hide();
+
float:left;
-
    $('.bblank').hide();
+
text-indent:-999px;
-
},
+
margin-right:5px;
-
function () {
+
background:url(https://static.igem.org/mediawiki/2011/9/9c/IGEM_HokkaidoU_Index_Slideshow_Arrow-l.png) no-repeat right center;
-
    $('.gblank').show();
+
}
-
    $('.bblank').show();
+
.lof-navigator-wapper .lof-previous {
-
});
+
float:left;
 +
text-indent:-999px;
 +
margin-left:5px;
 +
background:url(https://static.igem.org/mediawiki/2011/9/98/IGEM_HokkaidoU_Index_Slideshow_Arrow-r.png) no-repeat left center;
 +
}
 +
</style></html>
 +
<!--{{Team:HokkaidoU_Japan/header}}-->
 +
<html>
 +
<!--{{Team:HokkaidoU_Japan/css}}-->
 +
<html>
 +
<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis|Miltonian|Josefin+Sans:400,700' rel='stylesheet' type='text/css'>
-
     });
+
<!--{{Team:HokkaidoU_Japan/css/wikireset.css}}-->
 +
<html><style>
 +
/*
 +
* Reset iGEM Wiki CSS. Use this with Template:Team:HokkaidoU_Japan/css/reset.css
 +
*/
 +
#top-section{
 +
     position: absolute;
 +
    width: 100%;
 +
    height: 0;
 +
    border: none;
 +
}
 +
#top-section #menubar.left-menu{
 +
    position: absolute;
 +
    top: 0; left: 0;
 +
}
 +
#top-section #menubar.right-menu{
 +
    position: absolute;
 +
    top: 0; right: 0;
 +
}
 +
.editsection,
 +
#top-section #p-logo,
 +
#top-section #search-controls,
 +
#content h1.firstHeading,
 +
#content #bodyContent #contentSub,
 +
#content #bodyContent p,    /* holly crap, they have p element for script tag and no id and no class... */
 +
#catlinks{
 +
    display: none;
 +
}
 +
#globalWrapper,
 +
#globalWrapper #content{
 +
    background: none;
 +
    margin: 0;
 +
    padding: 0;
 +
    border: none;
 +
    width: auto;
 +
}
-
    function clearinfo() {
+
#footer-box {
-
        $('#boxinfo div').hide();
+
border-top: 1px solid #E4E4E4;
-
    }
+
border-right: 0px;
-
</script>
+
border-bottom: 0px;
 +
border-left: 0px;
 +
}
-
<!-- End stuff from Calgary -->
+
/* because I hide p element in #bodyContent */
 +
#content #bodyContent div p{
 +
    display: block;
 +
}
 +
</style></html>
 +
<!--{{Team:HokkaidoU_Japan/css/components.css}}-->
 +
<html><style>
 +
.editsection{
 +
    font-size: 9px;
 +
    font-weight: normal;
 +
}
 +
.thumbinner{
 +
    -webkit-border-radius: 4px;
 +
    -moz-border-radius: 4px;
 +
    border-radius: 4px;
 +
}
 +
#menubar{
 +
    font-size: 10px;
 +
}
 +
#menubar ul{
 +
    margin: 0;
 +
    padding: 0;
 +
    width: auto;
 +
}
 +
</style></html>
 +
<!--{{Team:HokkaidoU_Japan/css/typography.css}}-->
 +
<html><style>
 +
@import url(http://fonts.googleapis.com/css?family=Terminal+Dosis);
 +
@import url(http://fonts.googleapis.com/css?family=Miltonian);
 +
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:400,700);
 +
body{
 +
    font-size: 100%;
 +
    font-family: 'Terminal Dosis', sans-serif;
 +
    background: #ffffff;
 +
    color: #3e3e3e;
 +
    letter-spacing: 0.1em;
 +
}
 +
a{
 +
    text-decoration: none;
 +
    color: #5a7bf8;
 +
}
 +
a:visited { color: #4f6ddc; }
 +
a:hover {
 +
    text-decoration: none;
 +
    color: #525bb8;
 +
}
 +
a:active { color: #4f6ddc; }
 +
p{
 +
    margin: 0 0 1.5em 0;
 +
    text-indent: 0.5em;
 +
    line-height: 1.5em;
 +
}
 +
p:last-child {
 +
    margin-bottom: 0;
 +
}
 +
h1, h2, h3, h4, h5, h6{
 +
    font-family: 'Josefin Sans', sans-serif;
 +
    font-weight: normal;
 +
    letter-spacing: 0.15em;
 +
    margin: 2em 0 1em 0;
 +
    padding: 0;
 +
}
 +
h1:first-child, h2:first-child, h3:first-child,
 +
h4:first-child, h5:first-child, h6:first-child {
 +
    margin-top: 0;
 +
}
 +
h1{
 +
    border-bottom: 1px solid #e4e4e4;
 +
    line-height: 1.2em;
 +
}
 +
h2{
 +
    border-bottom: 1px dotted #e4e4e4;
 +
}
 +
ul, ol{
 +
    margin: 1em 0 1em 0;
 +
    padding: 0 0 0 1em;
 +
}
 +
pre{
 +
    margin: 1em 0;
 +
    padding: 1em;
 +
    border: 1px solid #e4e4e4;
 +
    background: #f7f7f7;
 +
    -webkit-border-radius: 4px;
 +
    -moz-border-radius: 4px;
 +
    border-radius: 4px;
 +
}
 +
table{
 +
    border-collapse: collapse;
 +
    border: 1px solid #ababab;
 +
    font-size: 100%;
 +
}
 +
table th, table td{
 +
    padding: 0.4em 0.6em;
 +
}
 +
</style></html>
 +
<!--{{Team:HokkaidoU_Japan/css/toc.css}}-->
 +
<html><style>
 +
div.toc-wrapper {
 +
  display: block;
 +
  position: fixed;
 +
  top: 20%;
 +
  right: 0;
 +
  width: 300px;
 +
  height: 70%;
 +
  z-index: 10000;
 +
}
 +
#toc {
 +
  display: block;
 +
  height: 100%;
 +
  overflow: auto;
 +
}
 +
div.toc-tab {
 +
  background: #dedede url(/wiki/images/f/f8/HokkaidoU_toc_tab.png) left top no-repeat;
 +
  top: 20%;
 +
  right: 0;
 +
  width: 30px;
 +
  height: 120px;
 +
  display: block;
 +
  position: fixed;
 +
  z-index: 9999;
 +
  cursor: pointer;
 +
}
 +
div.toc-wrapper div.close {
 +
  background: url(/wiki/images/7/73/HokkaidoU_toc_close.png) left top no-repeat;
 +
  top : 10px;
 +
  right : 20px;
 +
  width: 20px;
 +
  height: 20px;
 +
  display: block;
 +
  position: absolute;
 +
  cursor: pointer;
 +
}
 +
</style></html>
 +
<!--{{Team:HokkaidoU_Japan/css/layout.v1.css}}-->
 +
<html><style>
 +
*:after{
 +
    display: block;
 +
    clear: both;
 +
}
 +
body{
 +
    font-size: 76%;
 +
    background: #ffffff;
 +
}
 +
#hokkaidou-container{
 +
    width: 980px;
 +
    margin: 0 auto;
 +
    padding: 0;
 +
}
 +
#hokkaidou-header{
 +
    background: #ffffff url(https://static.igem.org/mediawiki/2011/2/2b/Hokkaidou_header.png) repeat-x;
 +
    margin-bottom: 10px;
 +
}
 +
#hokkaidou-footer{
 +
    margin-top: 30px;
 +
    padding-top: 15px;
 +
    border-top: 1px solid #e4e4e4;
 +
    text-align: center;
 +
}
 +
#hokkaidou-footer #hokkaidou-sponsors ul li{
 +
    display: inline-block;
 +
    margin: 10px;
 +
    list-style: none;
 +
}
 +
#hokkaidou-footer #hokkaidou-sponsors ul:after {content: "";}
 +
</style></html>
 +
<!--{Team:HokkaidoU_Japan/css/layout.logo.css}}-->
 +
<html><style>
 +
#hokkaidou-header{
 +
    position: relative;
 +
    height: 117px;
 +
}
 +
#hokkaidou-header #hokkaidou-logo h1 a{
 +
    display: block;
 +
    position: absolute;
 +
    top: 10px; left: 20px;
 +
    width: 400px;
 +
    height: 75px;
 +
    background: url(https://static.igem.org/mediawiki/2011/e/e5/Hokkaidou_logo.png) no-repeat;
 +
    border: none;
 +
    text-indent: -10000px;
 +
    outline: none;
 +
}
 +
#hokkaidou-header #hokkaidou-logo h1 a:hover {
 +
    background-position: 0 -76px;
 +
}
 +
#hokkaidou-header #hokkaidou-logo h1 a:active {
 +
    background-position: 0 -152px;
 +
}
 +
#hokkaidou-header #hokkaidou-logo p{
 +
    display: none !important;
 +
}
 +
</style></html>
 +
<!--{{Team:HokkaidoU_Japan/css/layout.navigation.css}}-->
 +
<html><style>
 +
#hokkaidou-header #hokkaidou-navigation ul{
 +
    position: absolute;
 +
    top: 10px; right: 0;
 +
}
 +
#hokkaidou-header #hokkaidou-navigation ul li{
 +
    float: left;
 +
    list-style: none;
 +
    margin: 0;
 +
    text-align: center;
 +
    width: 60px;
 +
}
 +
#hokkaidou-header #hokkaidou-navigation ul li a,
 +
#hokkaidou-header #hokkaidou-navigation ul li strong.selflink{
 +
    display: inline-block;
 +
    width: 30px; height: 30px;
 +
    background: url(https://static.igem.org/mediawiki/2011/4/4b/Hokkaidou_menu.png) no-repeat;
 +
    border: none;
 +
    outline: none;
 +
    text-indent: -10000px;
 +
}
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-home a{ background-position: 0 0; }
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-home a:hover { background-position: -30px 0; }
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-home a:active,
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-home strong.selflink{ background-position: -60px 0; }
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-project a{ background-position: 0 -30px; }
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-project a:hover { background-position: -30px -30px; }
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-project a:active,
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-project strong.selflink{ background-position: -60px -30px; }
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-protocol a{ background-position: 0 -60px; }
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-protocol a:hover { background-position: -30px -60px; }
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-protocol a:active,
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-protocol strong.selflink{ background-position: -60px -60px; }
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-parts a{ background-position: 0 -90px; }
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-parts a:hover { background-position: -30px -90px; }
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-parts a:active,
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-parts strong.selflink{ background-position: -60px -90px; }
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-notebook a{ background-position: 0 -120px; }
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-notebook a:hover { background-position: -30px -120px; }
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-notebook a:active,
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-notebook strong.selflink{ background-position: -60px -120px; }
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-safety a{ background-position: 0 -150px; }
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-safety a:hover { background-position: -30px -150px; }
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-safety a:active,
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-safety strong.selflink{ background-position: -60px -150px; }
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-humanpractice a{ background-position: 0 -180px; }
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-humanpractice a:hover { background-position: -30px -180px; }
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-humanpractice a:active,
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-humanpractice strong.selflink{ background-position: -60px -180px; }
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-team a{ background-position: 0 -210px; }
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-team a:hover { background-position: -30px -210px; }
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-team a:active,
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-team strong.selflink{ background-position: -60px -210px; }
 +
/* i couldn't be bothered to add text on picture... lol */
 +
#hokkaidou-header #hokkaidou-navigation ul li:after {
 +
    display: inline-block;
 +
    font-family: 'Josefin Sans', sans-serif;
 +
    font-size: 12px;
 +
    margin-top: 5px;
 +
    width: 100%;
 +
    line-height: 14px;
 +
}
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-home:after {content: "Home";}
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-project:after {content: "Project";}
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-protocol:after {content: "Protocol";}
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-parts:after {content: "Parts";}
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-notebook:after {content: "Notebook";}
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-safety:after {content: "Safety";}
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-humanpractice:after {content: "Human Practice";}
 +
#hokkaidou-header #hokkaidou-navigation ul li#hokkaidou-menu-team:after {content: "Team";}
 +
</style></html>
 +
<!--{{Team:HokkaidoU_Japan/css/layout.twocolumn.css}}-->
 +
<html><style>
 +
#hokkaidou-content{zoom: 1;}
 +
#hokkaidou-content:after { content: ""; }
 +
#hokkaidou-content #hokkaidou-left-content{
 +
    float: left;
 +
    width: 280px;
 +
    margin-right: 20px;
 +
}
 +
#hokkaidou-content #hokkaidou-left-content ul{
 +
    margin: 0;
 +
    padding: 0 1em;
 +
}
 +
#hokkaidou-content #hokkaidou-left-content ul li{
 +
    list-style: none;
 +
    margin: 0 0 1em 0;
 +
}
 +
#hokkaidou-content #hokkaidou-left-content ul li .hokkaidou-description{
 +
    font-size: small;
 +
    color: #8a8a8a;
 +
}
 +
#hokkaidou-content #hokkaidou-right-content{
 +
    float: right;
 +
    width: 680px;
 +
}
 +
</style></html>
 +
<!--{{Team:HokkaidoU_Japan/css/layout.index.css}}-->
 +
<html><style>
 +
#hokkaidou-index-menu{
 +
    margin: 0 0 30px 0 !important;
 +
    padding: 0 !important;
 +
    border: 1px solid #ababab;
 +
    -webkit-border-top-right-radius: 12px;
 +
    -moz-border-radius-topright: 12px;
 +
    border-top-right-radius: 12px;
 +
    -webkit-border-bottom-right-radius: 12px;
 +
    -moz-border-radius-bottomright: 12px;
 +
    border-bottom-right-radius: 12px;
 +
}
 +
#hokkaidou-index-menu li{
 +
    list-style: none;
 +
    margin: 0 !important;
 +
    padding: 0 !important;
 +
    background: -moz-radial-gradient(center 80px 45deg, circle cover, hsl(0, 0%, 100%) 0%, hsl(240, 5%, 70%) 100%);
 +
    overflow: hidden;
 +
    text-shadow: 0 1px 1px hsl(240, 10%, 80%);
 +
}
 +
#hokkaidou-index-menu li:first-child{
 +
    -webkit-border-top-right-radius: 12px;
 +
    -moz-border-radius-topright: 12px;
 +
    border-top-right-radius: 12px;
 +
}
 +
#hokkaidou-index-menu li:last-child{
 +
    -webkit-border-bottom-right-radius: 12px;
 +
    -moz-border-radius-bottomright: 12px;
 +
    border-bottom-right-radius: 12px;
 +
}
 +
#hokkaidou-index-menu li a{
 +
    display: block;
 +
    padding: 10px 20px;
 +
    border-bottom: none;
 +
    color: #3b3b3b;
 +
    transition: background 0.5s ease-in-out;
 +
    -moz-transition-property: background;
 +
    -moz-transition-duration: 700ms;
 +
    background: #e4e4e4;
 +
    border-bottom: 1px solid #dedede;
 +
    border-top: 1px solid #f7f7f7;
 +
}
 +
#hokkaidou-index-menu li a{
 +
}
 +
#hokkaidou-index-menu li a:hover{
 +
    background: transparent none;
 +
}
 +
#hokkaidou-index-menu li a .hokkaidou-description{
 +
    display: block;
 +
    margin-left: 40px;
 +
}
 +
#hokkaidou-index-menu li a:before{
 +
    display: block;
 +
    float: left;
 +
    content: "";
 +
    width: 30px; height: 30px;
 +
    margin: 5px 10px 0 0;
 +
    background: url(https://static.igem.org/mediawiki/2011/4/4b/Hokkaidou_menu.png) no-repeat;
 +
}             
 +
#hokkaidou-index-menu li#hokkaidou-index-project a:before{ background-position: 0 -30px; }
 +
#hokkaidou-index-menu li#hokkaidou-index-protocol a:before{ background-position: 0 -60px; }
 +
#hokkaidou-index-menu li#hokkaidou-index-parts a:before{ background-position: 0 -90px; }
 +
#hokkaidou-index-menu li#hokkaidou-index-notebook a:before{ background-position: 0 -120px; }
 +
#hokkaidou-index-menu li#hokkaidou-index-safety a:before{ background-position: 0 -150px; }
 +
#hokkaidou-index-menu li#hokkaidou-index-humanpractice a:before{ background-position: 0 -180px; }
 +
#hokkaidou-index-menu li#hokkaidou-index-team a:before{ background-position: 0 -210px; }
 +
#hokkaidou-index-menu li#hokkaidou-index-project a:hover:before{ background-position: -30px -30px; }
 +
#hokkaidou-index-menu li#hokkaidou-index-protocol a:hover:before{ background-position: -30px -60px; }
 +
#hokkaidou-index-menu li#hokkaidou-index-parts a:hover:before{ background-position: -30px -90px; }
 +
#hokkaidou-index-menu li#hokkaidou-index-notebook a:hover:before{ background-position: -30px -120px; }
 +
#hokkaidou-index-menu li#hokkaidou-index-safety a:hover:before{ background-position: -30px -150px; }
 +
#hokkaidou-index-menu li#hokkaidou-index-humanpractice a:hover:before{ background-position: -30px -180px; }
 +
#hokkaidou-index-menu li#hokkaidou-index-team a:hover:before{ background-position: -30px -210px; }
 +
#hokkaidou-official-team-logo{
 +
    text-align: center;
 +
}
 +
#hokkaidou-official-team-logo img{
 +
    display: block;
 +
    width: 240px;
 +
    height: 240px;
 +
    border: 1px solid #e4e4e4;
 +
    margin: 0 auto;
 +
}
 +
#hokkaidou-official-team-logo .hokkaidou-description{
 +
    font-size: small;
 +
    color: #ababab;
 +
}
 +
#hokkaidou-links ul{
 +
    margin: 20px 0 !important;
 +
    padding: 0 !important;
 +
}
 +
#hokkaidou-links ul {zoom: 1;}
 +
#hokkaidou-links ul:after {content: ""; }
 +
#hokkaidou-links ul li{
 +
    float: left;
 +
    display: block !important;
 +
    margin: 0 5px !important;
 +
    padding: 0 !important;
 +
}
 +
#hokkaidou-links ul li:first-child{
 +
    margin-left: 0 !important;
 +
}
 +
#hokkaidou-links ul li a{
 +
    display: block;
 +
    width: 32px;
 +
    height: 32px;
 +
    background: url(https://static.igem.org/mediawiki/2011/8/8b/IGEM_HokkaidoU_Index_Links.png) no-repeat;
 +
    text-indent: -10000px;
 +
}
 +
#hokkaidou-links ul li#hokkaidou-links-email a{ background-position: 0 0; }
 +
#hokkaidou-links ul li#hokkaidou-links-facebook a{ background-position: -32px 0; }
 +
#hokkaidou-links ul li#hokkaidou-links-twitter a{ background-position: -64px 0; }
 +
#hokkaidou-links ul li#hokkaidou-links-wordpress a{ background-position: -96px 0; }
 +
#hokkaidou-links ul li#hokkaidou-links-youtube a{ background-position: -128px 0; }
 +
#hokkaidou-links ul li#hokkaidou-links-email{
 +
    display: block !important;
 +
    width: 32px !important;
 +
    height: 32px !important;
 +
    margin: 0 5px 0 0 !important;
 +
    padding: 0 !important;
 +
}
 +
#hokkaidou-links ul li#hokkaidou-links-email a{
 +
    display: block !important;
 +
    width: 100% !important;
 +
    height: 100% !important;
 +
    margin: 0 !important;
 +
    padding: 0 !important;
 +
    background: url(https://static.igem.org/mediawiki/2011/8/8b/IGEM_HokkaidoU_Index_Links.png) no-repeat !important;
 +
    text-indent: -10000px !important;
 +
}
 +
</style></html>
 +
<!--{{Team:HokkaidoU_Japan/header}}-->
 +
</html>
 +
<div id="hokkaidou-container">
 +
    <div id="hokkaidou-header">
 +
        <div id="hokkaidou-logo">
 +
            <h1><html><a href="https://2011.igem.org/Team:HokkaidoU_Japan">HokkaidoU Japan</a></html></h1>
 +
            <p class="description">iGEM 2011 Team of Hokkaido University</p>
 +
        </div>
 +
        <div id="hokkaidou-navigation"><ul>
 +
            <li id="hokkaidou-menu-home">[[Team:HokkaidoU_Japan|Home]]</li>
 +
            <li id="hokkaidou-menu-team">[[Team:HokkaidoU_Japan/Team|Team]]</li>
 +
            <li id="hokkaidou-menu-project">[[Team:HokkaidoU_Japan/Project|Project]]</li>
 +
            <li id="hokkaidou-menu-parts">[[Team:HokkaidoU_Japan/Parts|Parts]]</li>
 +
            <li id="hokkaidou-menu-protocol">[[Team:HokkaidoU_Japan/Protocols|Protocols]]</li>
 +
            <li id="hokkaidou-menu-notebook">[[Team:HokkaidoU_Japan/Notebook|Notebook]]</li>
 +
            <li id="hokkaidou-menu-safety">[[Team:HokkaidoU_Japan/Safety|Safety]]</li>
 +
            <li id="hokkaidou-menu-humanpractice">[[Team:HokkaidoU_Japan/HumanPractice|Human Practice]]</li>
 +
        </ul></div>
 +
    </div>
 +
    <div id="hokkaidou-content">
-
+
<!--Javascript-->
-
</head>
+
<html>
-
<body>
+
<script type="text/javascript">
-
 
+
    $(document).ready(function () {
-
<h1>Stanford-Brown iGEM </h1>
+
        var buttons = {
-
+
            previous: $('#lofslidercontent45 .lof-previous'),
-
<!-- =======================================
+
            next: $('#lofslidercontent45 .lof-next')
-
 
+
        };
-
THE ACTUAL ORBIT SLIDER CONTENT
+
        $obj = $('#lofslidecontent45').lofJSidernews({
-
 
+
            interval: 5000,
-
======================================= -->
+
            direction: 'opacitys',
-
<div id="featured">  
+
            easing: 'easeInOutExpo',
-
<div class="content" style="">
+
            duration: 1200,
-
<h1>Orbit does content now.</h1>
+
            auto: true,
-
<h3>Highlight me...I'm text.</h3>
+
            maxItemDisplay: 7,
-
</div>
+
            startItem: 0,
-
<a href=""><img src="http://www.stanford.edu/~sryoung/cgi-bin/igem/demo/dummy-images/overflow.jpg" /></a>
+
            navPosition: 'horizontal', // horizontal
-
<img src="http://www.stanford.edu/~sryoung/cgi-bin/igem/demo/dummy-images/captions.jpg" data-caption="#htmlCaption" />
+
            navigatorHeight: 32,
-
<img src="http://www.stanford.edu/~sryoung/cgi-bin/igem/demo/dummy-images/features.jpg"  />
+
            navigatorWidth: 80,
-
</div>
+
            mainWidth: 780,
-
<!-- Captions for Orbit -->
+
            buttons: buttons
-
<span class="orbit-caption" id="htmlCaption"><strong>I'm A Badass Caption:</strong> I can haz <a href="#">links</a>, <em>style</em> or anything that is valid markup :)</span>
+
        });
-
+
    });
-
+
</script>
-
 
+
</html>
-
 
+
<!--Left-cntent-->
-
 
+
<html>
-
+
<div id="hokkaidou-left-content">
-
<!-- <div class="container"> -->
+
    <ul id="hokkaidou-index-menu">
-
<!-- <h4>ZURB's Orbit Slider</h4>
+
        <li id="hokkaidou-index-team"><a href="https://2011.igem.org/Team:HokkaidoU_Japan/Team">Team
-
<a href="http://www.zurb.com/playground/orbit-jquery-image-slider">View Docs + Playground for Orbit</a> -->
+
            <span class="hokkaidou-description">
-
 
+
                The HokkaidoU_Japan is formed by 16 students and 3 instructors
-
<br />
+
            </span>
-
<br />
+
        </a>
-
 
+
        </li>
-
<div class="threeboxes">
+
        <li id="hokkaidou-index-project"><a href="https://2011.igem.org/Team:HokkaidoU_Japan/Project">Project
-
<a id="greybox4" href="http://www.youtube.com/watch?v=KHhswxo6xow" style="margin-right:4px;">
+
            <span class="hokkaidou-description">
-
<div>
+
                We tried to further develop E. coli-based protein injection system which we started working on during iGEM 2010
-
<img src="https://static.igem.org/mediawiki/2012/0/02/UCalgary2012_ThreeBoxMusic.png-"></img>
+
            </span>
-
<h2>Project #1</h2>
+
        </a>
-
<p>Description</p>
+
        </li>
-
</div>
+
        <li id="hokkaidou-index-parts"><a href="https://2011.igem.org/Team:HokkaidoU_Japan/Parts">Parts
-
</a>
+
            <span class="hokkaidou-description">
-
<a id="greybox5" href="https://2012.igem.org/Team:Calgary/Project/Synergy-">
+
                Ready-to-inject backbone and Bsa I cloning system
-
<div>
+
            </span>
-
<img src="https://static.igem.org/mediawiki/2012/2/20/UCalgary2012_ThreeBoxSynergy.png-"></img>
+
        </a>
-
<h2>Project #2</h2>
+
        </li>
-
<p>Description</p>
+
        <li id="hokkaidou-index-protocol"><a href="https://2011.igem.org/Team:HokkaidoU_Japan/Protocols">Protocol
-
</div>
+
            <span class="hokkaidou-description">
-
</a>
+
                General protocols, Primers and methods of infection assay
-
<a id="greybox6" href="http://www.youtube.com/watch?v=vluDpf4ao6c" style="margin:0;">
+
            </span>
-
<div>
+
        </a>
-
<img src="https://static.igem.org/mediawiki/2012/b/b1/UCalgary2012_ThreeBoxFilm.png-"></img>
+
        </li>
-
<h2>Project #3</h2>
+
        <li id="hokkaidou-index-notebook"><a href="https://2011.igem.org/Team:HokkaidoU_Japan/Notebook">Notebook
-
<p>Description</p>
+
            <span class="hokkaidou-description">
-
</div>
+
                The record of our many failures and a bit of achievement
-
</a>
+
            </span>
-
+
        </a>
 +
        </li>
 +
        <li id="hokkaidou-index-safety"><a href="https://2011.igem.org/Team:HokkaidoU_Japan/Safety">Safety
 +
            <span class="hokkaidou-description">
 +
                Addressing safety concerns
 +
            </span>
 +
        </a>
 +
        </li>
 +
        <li id="hokkaidou-index-humanpractice"><a href="https://2011.igem.org/Team:HokkaidoU_Japan/HumanPractice">Human Practice
 +
            <span class="hokkaidou-description">
 +
                Science art gallery "BIO ART"
 +
            </span>
 +
        </a>
 +
        </li>
 +
    </ul>
 +
    <div id="hokkaidou-official-team-logo">
 +
        <img src="http://igemhokkaidou.files.wordpress.com/2011/04/igem-hokkaidou-logo-transparent.png?w=240&h=240#038;h=240" width="240" height="240" />
 +
        <span class="hokkaidou-description">iGEM HokkaidoU_Japan Official Team Logo</span>
 +
    </div>
 +
    <div id="hokkaidou-links">
 +
        <ul>
 +
            <li id="hokkaidou-links-email"><a href="mailto:igemhokkaidou@gmail.com">Email</a></li>
 +
            <li id="hokkaidou-links-facebook"><a href="http://www.facebook.com/iGEMHokkaidoU">Facebook</a></li>
 +
            <li id="hokkaidou-links-twitter"><a href="http://twitter.com/iGEM_HokkaidoU">Twitter</a></li>
 +
            <li id="hokkaidou-links-wordpress"><a href="http://igemhokkaidou.com">WordPress</a></li>
 +
            <li id="hokkaidou-links-youtube"><a href="http://www.youtube.com/user/iGEMHokkaidoU">YouTube</a></li>
 +
        </ul>
 +
    </div>
 +
</html>
 +
<!--right content-->
 +
<html>
</div>
</div>
 +
<div id="hokkaidou-right-content">
 +
    <div id="lofslidecontent45" class="lof-slidecontent">
 +
        <div style="display: none;" class="preload"><div></div></div>
 +
            <div class="lof-main-outer" style="width:900px; height:340px;">
 +
            <ul style="left: -4200px; width: 6300px;" class="lof-main-wapper">
 +
                <li>
 +
                    <img src="https://static.igem.org/mediawiki/2011/6/64/IGEM_HokkaidoU_Index_Slideshow_7.jpg">         
 +
                    <div class="lof-main-item-desc">
 +
                        <h2>HokkaidoU_Japan 2011</h2>
 +
                    </div>
 +
                </li>
 +
                <li>
 +
                    <img src="https://static.igem.org/mediawiki/2011/8/8a/IGEM_HokkaidoU_Index_Slideshow_1.jpg">         
 +
                    <div class="lof-main-item-desc">
 +
                        <h2>Welcome to the BIOxART Gallery!!</h2>
 +
                    </div>
 +
                </li>
 +
                <li>
 +
                    <img src="https://static.igem.org/mediawiki/2011/b/b5/IGEM_HokkaidoU_Index_Slideshow_2.jpg">         
 +
                    <div class="lof-main-item-desc">
 +
                        <h2>Be careful not to contaminate...</h2>
 +
                    </div>
 +
                </li>
 +
                <li>
 +
                    <img src="https://static.igem.org/mediawiki/2011/0/01/IGEM_HokkaidoU_Index_Slideshow_3.jpg">           
 +
                    <div class="lof-main-item-desc">
 +
                        <h2>Meeting, meeting and MEETING!</h2>
 +
                    </div>
 +
                </li>
 +
                <li>
 +
                    <img src="https://static.igem.org/mediawiki/2011/d/d1/IGEM_HokkaidoU_Index_Slideshow_4.jpg">           
 +
                    <div class="lof-main-item-desc">
 +
                        <h2>Dr. <i>E. coli</i> get ready for the job</h2>
 +
                    </div>
 +
                </li>
 +
                <li>
 +
                    <img src="https://static.igem.org/mediawiki/2011/0/06/IGEM_HokkaidoU_Index_Slideshow_5.jpg">           
 +
                    <div class="lof-main-item-desc">
 +
                        <h2>BIOxART, please feel free to look around</h2>
 +
                    </div>
 +
                </li>
 +
                <li>
 +
                    <img src="https://static.igem.org/mediawiki/2011/7/74/IGEM_HokkaidoU_Index_Slideshow_6.jpg">           
 +
                    <div class="lof-main-item-desc">
 +
                        <h2>Experiment, experiment and EXPERIMENT!</h2>
 +
                    </div>
 +
                </li>
 +
            </ul>   
 +
        </div>
 +
        <div class="lof-navigator-wapper">
 +
            <div style="width: 320px; height: 32px;" class="lof-navigator-outer">
 +
                <ul style="width: 54px; left: -160px;" class="lof-navigator">
 +
                    <li class="" style="height: 32px; width: 80px;"><img src="https://static.igem.org/mediawiki/2011/8/81/IGEM_HokkaidoU_Index_Slideshow_Thumb_7.jpg"></li>
 +
                    <li class="" style="height: 32px; width: 80px;"><img src="https://static.igem.org/mediawiki/2011/f/f3/IGEM_HokkaidoU_Index_Slideshow_Thumb_1.jpg"></li>
 +
                    <li class="" style="height: 32px; width: 80px;"><img src="https://static.igem.org/mediawiki/2011/a/aa/IGEM_HokkaidoU_Index_Slideshow_Thumb_2.jpg"></li>
 +
                    <li class="" style="height: 32px; width: 80px;"><img src="https://static.igem.org/mediawiki/2011/f/fb/IGEM_HokkaidoU_Index_Slideshow_Thumb_3.jpg"></li>
 +
                    <li class="" style="height: 32px; width: 80px;"><img src="https://static.igem.org/mediawiki/2011/e/e2/IGEM_HokkaidoU_Index_Slideshow_Thumb_4.jpg"></li>
 +
                    <li class="" style="height: 32px; width: 80px;"><img src="https://static.igem.org/mediawiki/2011/9/93/IGEM_HokkaidoU_Index_Slideshow_Thumb_5.jpg"></li>
 +
                    <li class="" style="height: 32px; width: 80px;"><img src="https://static.igem.org/mediawiki/2011/2/21/IGEM_HokkaidoU_Index_Slideshow_Thumb_6.jpg"></li>
 +
                </ul>
 +
            </div>
 +
        </div>
 +
    </div>
 +
    <h2>Abstract</h2>
 +
    <p>We further developed "Dr. E. coli": our project of iGEM 2010. Last year, we showed that Type 3 Secretion System (T3SS) works in E. coli by injecting GFP into RK13 cells. T3SS is a syringe like organelle found in bacterium such as Salmonella which uses it to inject virulence effector proteins into a target eukaryotic cell. We think this system can be applied to direct reprogramming of somatic cells among many other things.</p>
 +
    <p>We tested T3SS performance and tried to make it more convenient. For this purpose we designed a plasmid backbone which can instantly produce ready-to-inject fusion proteins from ordinary biobrick part. Using it, we tried to further characterize this system by injecting a library of protein domains.</p>
 +
    <p>In Science Gallery we exhibited awesome photographs related with biotechnology in public. We tried to catch the pedestrians’ interest in current synthetic biology and explore their thoughts.</p>
-
<div class="threeboxes">
+
 
-
<a id="greybox1" href="https://2012.igem.org/Team:Calgary/Team">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/b/b8/UCalgary2012_ThreeBoxTeam.png-"></img>
+
-
<h2>Team</h2>
+
-
<p>Who are we?</p>
+
-
</div>
+
-
</a>
+
-
<a id="greybox2" href="https://2012.igem.org/Team:Calgary/Project/DataPage">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/9/92/UCalgary2012_ThreeBoxData.png-"></img>
+
-
<h2>Data Page</h2>
+
-
<p>Click here to see a summary of all our data collected so far!</p>
+
-
</div>
+
-
</a>
+
-
<a id="greybox3" href="https://2012.igem.org/Team:Calgary/Notebook">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/1/1b/UCalgary2012_ThreeBoxNotebook.png-"></img>
+
-
<h2>Notebook</h2>
+
-
<p>Here is a record of our summer's work. We also want to thank everybody who helped us along the way!</p>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
<div id="epicbox">
+
-
<div id="boximgcontainer">
+
-
<div id="orangebox">
+
-
<a href="https://2012.igem.org/Team:Calgary/Project/HumanPractices">
+
-
<div class="imgbox">
+
-
<img src="https://static.igem.org/mediawiki/2012/9/9e/UCalgary2012_EpicBoxHP_-_Blank.png-"></img>
+
-
</div>
+
-
+
-
<div class="oblank">
+
-
</div>
+
-
+
-
<div class="iconcontainer">
+
-
<a class="obox1 iconbox" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Collaborations">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/1/1b/UCalgary2012_IconHP8.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="obox2 iconbox" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Interviews">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/d/d6/UCalgary2012_IconHP3.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="obox3 iconbox" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Design">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/1/1c/UCalgary2012_IconHP4.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="obox4 iconbox" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Killswitch">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/6/65/UCalgary2012_IconHP2.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="obox5 iconbox" href="https://2012.igem.org/Team:Calgary/Safety">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/c/c9/UCalgary2012_IconHP5.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="obox6 iconbox" href="https://2012.igem.org/Team:Calgary/Outreach">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/0/0e/UCalgary2012_IconHP6.png-"></img>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
 
+
-
+
-
</a>
+
-
</div>
+
-
+
-
<div id="greenbox">
+
-
<a href="https://2012.igem.org/Team:Calgary/Project/FRED">
+
-
<div class="imgbox">
+
-
<img src="https://static.igem.org/mediawiki/2012/4/47/UCalgary2012_EpicBoxFRED_-_Blank.png-"></img>
+
-
</div>
+
-
+
-
<div class="gblank">
+
-
</div>
+
-
+
-
<div class="iconcontainer">
+
-
<a class="gbox1 iconbox" href="https://2012.igem.org/Team:Calgary/Project/FRED/Detecting">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/0/0a/UCalgary2012_IconFRED1.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="gbox2 iconbox" href="https://2012.igem.org/Team:Calgary/Project/FRED/Reporting">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/8/8d/UCalgary2012_IconFRED2.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="gbox3 iconbox" href="https://2012.igem.org/Team:Calgary/Project/FRED/Modelling">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/c/c0/UCalgary2012_IconFRED3.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="gbox4 iconbox" href="https://2012.igem.org/Team:Calgary/Project/FRED/Prototype">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/a/a7/UCalgary2012_IconFRED4.png-"></img>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
+
-
<div id="bluebox">
+
-
<a href="https://2012.igem.org/Team:Calgary/Project/OSCAR">
+
-
<div class="imgbox">
+
-
<img src="https://static.igem.org/mediawiki/2012/9/94/UCalgary2012_EpicBoxOSCAR_-_Blank.png-"></img>
+
-
</div>
+
-
+
-
<div class="bblank">
+
-
</div>
+
-
+
-
<div class="iconcontainer">
+
-
<a class="bbox1 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Decarboxylation">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/f/f1/UCalgary2012_IconOSCAR1.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="bbox2 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/CatecholDegradation">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/0/0c/UCalgary2012_IconOSCAR4.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="bbox3 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/FluxAnalysis">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/4/40/UCalgary2012_IconOSCAR6.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="bbox4 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Bioreactor">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/3/3e/UCalgary2012_IconOSCAR5.png-"></img>
+
-
</div>
+
-
</a>
+
-
<a class="bbox5 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Upgrading">
+
-
<div>
+
-
<img src="https://static.igem.org/mediawiki/2012/4/44/UCalgary2012_IconOSCAR7.png-"></img>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
</div>
+
-
<div id="boxinfo">
+
-
<div id="boxinfo_default">
+
-
<h2>The Concept</h2>
+
-
<p>The concept</p>
+
-
</div>
+
-
<div class="orangebox">
+
-
<h2>Human Practices</h2>
+
-
<p>Human Practices</p>
+
-
</div>
+
-
<div class="obox1">
+
-
<h2>Initiative</h2>
+
-
<p>Initiative</p>
+
-
</div>
+
-
<div class="obox2">
+
-
<h2>Interviews</h2>
+
-
<p>Interviews</p>
+
-
</div>
+
-
<div class="obox3">
+
-
<h2>Design Considerations</h2>
+
-
<p>Design Considerations</p>
+
-
</div>
+
-
<div class="obox4">
+
-
<h2>Killswitch</h2>
+
-
<p>Kill Switch</p>
+
-
</div>
+
-
<div class="obox5">
+
-
<h2>Safety</h2>
+
-
<p>Safety</p>
+
-
</div>
+
-
<div class="obox6">
+
-
<h2>Community Outreach</h2>
+
-
<p>Community Outreach</p>
+
-
</div>
+
-
<div class="greenbox">
+
-
<h2>Project #1</h2>
+
-
<p>Project #1</p>
+
-
</div>
+
-
<div class="gbox1">
+
-
<h2>Detecting</h2>
+
-
<p>Project #1 Detection</p>
+
-
</div>
+
-
<div class="gbox2">
+
-
<h2>Reporting</h2>
+
-
<p>Project #1 Reporting</p>
+
-
</div>
+
-
<div class="gbox3">
+
-
<h2>Modelling</h2>
+
-
<p>Modelling for Project #1</p>
+
-
</div>
+
-
<div class="gbox4">
+
-
<h2>Prototyping</h2>
+
-
<p>Prototyping for Project #1</p>
+
-
</div>
+
-
<div class="bluebox">
+
-
<h2>Project #2</h2>
+
-
<p>Project #2</p>
+
-
</div>
+
-
<div class="bbox1">
+
-
<h2>Decarboxylation</h2>
+
-
<p>Project #2</p>
+
-
</div>
+
-
<div class="bbox2">
+
-
<h2>Catechol Degradation</h2>
+
-
<p>Project #2</p>
+
-
</div>
+
-
<div class="bbox3">
+
-
<h2>Flux-Variability Analysis</h2>
+
-
<p>Project #2</p>
+
-
</div>
+
-
<div class="bbox4">
+
-
<h2>Bioreactor</h2>
+
-
<p>Project #2</p>
+
-
</div>
+
-
<div class="bbox5">
+
-
<h2>Upgrading</h2>
+
-
<p>Project #2</p>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
 
+
-
 
+
-
 
+
-
 
+
-
+
-
<!-- </div> -->
+
-
</body>
+
</html>
</html>

Latest revision as of 09:45, 8 August 2013

</html>


  • HokkaidoU_Japan 2011

  • Welcome to the BIOxART Gallery!!

  • Be careful not to contaminate...

  • Meeting, meeting and MEETING!

  • Dr. E. coli get ready for the job

  • BIOxART, please feel free to look around

  • Experiment, experiment and EXPERIMENT!

Abstract

We further developed "Dr. E. coli": our project of iGEM 2010. Last year, we showed that Type 3 Secretion System (T3SS) works in E. coli by injecting GFP into RK13 cells. T3SS is a syringe like organelle found in bacterium such as Salmonella which uses it to inject virulence effector proteins into a target eukaryotic cell. We think this system can be applied to direct reprogramming of somatic cells among many other things.

We tested T3SS performance and tried to make it more convenient. For this purpose we designed a plasmid backbone which can instantly produce ready-to-inject fusion proteins from ordinary biobrick part. Using it, we tried to further characterize this system by injecting a library of protein domains.

In Science Gallery we exhibited awesome photographs related with biotechnology in public. We tried to catch the pedestrians’ interest in current synthetic biology and explore their thoughts.

Retrieved from "http://2013.igem.org/Team:UCSF/Home1"