Team:NJU NJUT China

body{position:absolute; top:0px; width:100%; height:1380px;}

 

background:url(http://igem.3vfree.us/images/bg1.jpg) repeat-x top  left;

color: #787878;

/* Logo */

#logo {

float: left;

height: 240px;

margin: 0;

padding: 0px;

color: #FFFFFF;

     position: absolute;

top:705px;

left:194px;

width: 960px;

margin: 0 auto;

background: url(http://igem.3vfree.us/images/img04.jpg) repeat-y left top;/*bg-img ps 底灰色直接去掉还是向左拉伸点*/

padding: 30px 20px 0px 20px;

color: #181818;

.post .title a {

color: #181818;

font-family:Verdana, Geneva, sans-serif;

border: none;

.post .meta {

margin-top: -10px;

padding-bottom: 5px;

padding-left: 20px;

text-align: left;

.post .entry {

text-align: justify;

margin-bottom: 25px;

padding: 30px 20px 10px 20px;

left:610px;

text-align: right;

position:absolute;

bottom:-1286px;

color: #D78983;

/*--------------------team image-------------------------------*/

 

.teammemberimg { float:left; height:150px; width:105px; margin-left:20px;}

.teammemberinfo{float:left;}

.teammemberinfo p{ margin-bottom:-6px;}

<div id="wrapper">

 

<li><img src="http://igem.3vfree.us/images/1.jpg" alt="First Image" /></li>

<li><img src="http://igem.3vfree.us/images/2.jpg" alt="Second Image" /></li>

<li><img src="http://igem.3vfree.us/images/3.jpg" alt="Third Image" /></li>

<li><img src="http://igem.3vfree.us/images/4.jpg" alt="Forth Image" /></li>

<li><img src="http://igem.3vfree.us/images/5.jpg" alt="Fifth Image" /></li>

<li><img src="http://igem.3vfree.us/images/6.jpg" alt="Sixth Image" /></li>

</div>

    <div style="clear: both;">&nbsp;</div>

<!-- end #menu -->

  <div id="content">

<div class="post">

  <h2 class="title"><a href="#" >Project  </a></h2>

<p class="meta">Basic Information</p>

  <div class="entry">

<p> &nbsp;&nbsp;&nbsp;&nbsp;Most of the bacteria and archaea acquire virus resistance by integrating short viral nucleotide acid fragments into the clusters of regularly interspaced short palindromic repeats (CRISPRs). <img src="http://igem.3vfree.us/images/ind1.jpg" width="212" height="164"  width="237" align='right'/> And CRISPR-based defense system can also protects them against the invading DNA and/or RNA elements. It is believed that the integrated CRISPR sequences have the ability to form a genetic memory which prevents the host from being infected. The CRISPRs and Cas (CRISPR-associated) interact and form this prokaryotic adaptive immune system....</p>

<p>&nbsp;</p>

<hr />

  </div>

</div>

<div class="post">

  <h2 class="title"><a href="#">Introduction to our experiment</a></h2>

<p class="meta">information<a href="#" class="permalink"></a></p>

<div class="entry">

<div class="aa" id="change">

<p>Based on the fundamental synthetic biology methods, include the molecular cloning, long PCR, recombinant construction, restriction digestion and yeast transformation, our project aims to enable  Saccharomyces cerevisiae to resist viruses utilizing the CRISPR system found in most bacteria and archaea lately. </p>

<p>To ensure the accurate output, we divide the original linear gene into several elements , and also purify and propagate the complete target sequence to make the both two models work in the host cell. To present the actual effect of CRISPR in yeast, we design our own mimic virus construction based on the homologous sequences shown in the specific viral genome database, which can be recognized, and control the baseline both for anti-virus ability and CRISPR's effect in its original form.</p>

                    <p>More specifically, we first obtain our CRISPR system by genome-extraction from E.coli str W3110, and clone the respective target genes as modules. The construction, as well as the mimic virus construction, IS made by restriction-ligase way. We transform the mimic virus plasmid first by lithium acetate method and verify the availability by several antibiotics. We then import CRISPR system in the same way, utilizing the Ochre mutation and GFP switch-off to evaluate the anti-virus feasibility.</p>

                    </div>

                    <p class="links" onclick="unfold('change')">Read More </p>

</hr >

</div>

</div>

            <hr />

            </div>

</div>

<!-- end #content -->

<div id="sidebar">

<h3 style="left:100px">What's new about CRISPR/Cas</h3>

  <iframe width=350 height=600 frameborder=0 scrolling=auto src=http://igem.3vfree.us/news.html></iframe>

</div>

      <!-- end #sidebar -->

<div style="clear: both;"></div>

  <div id="myfooter">

    <p><a href="#">IGEM_NJU_NJUT</a>.</p>

</div>  

<!-- end #footer -->

<!-- The JavaScript -->

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

        <script type="text/javascript">

(function($) {

$.fn.parallaxSlider = function(options) {

var opts = $.extend({}, $.fn.parallaxSlider.defaults, options);

return this.each(function() {

var $pxs_container = $(this),

o = $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;

//the main slider

var $pxs_slider = $('.pxs_slider',$pxs_container),

//the elements in the slider

$elems = $pxs_slider.children(),

//total number of elements

total_elems = $elems.length,

//the navigation buttons

$pxs_next = $('.pxs_next',$pxs_container),

$pxs_prev = $('.pxs_prev',$pxs_container),

//the bg images

$pxs_bg1 = $('.pxs_bg1',$pxs_container),

$pxs_bg2 = $('.pxs_bg2',$pxs_container),

$pxs_bg3 = $('.pxs_bg3',$pxs_container),

current = 0,

$pxs_thumbnails = $('.pxs_thumbnails',$pxs_container),

//the thumbs

$thumbs = $pxs_thumbnails.children(),

//the interval for the autoplay mode

slideshow,

$pxs_loading = $('.pxs_loading',$pxs_container),

$pxs_slider_wrapper = $('.pxs_slider_wrapper',$pxs_container);

//first preload all the images

var loaded = 0,

$images = $pxs_slider_wrapper.find('img');

$images.each(function(){

var $img = $(this);

$('<img/>').load(function(){

++loaded;

if(loaded == total_elems*2){

$pxs_loading.hide();

$pxs_slider_wrapper.show();

//one images width (assuming all images have the same sizes)

var one_image_w = $pxs_slider.find('img:first').width();

need to set width of the slider,

of each one of its elements, and of the

setWidths($pxs_slider,

$elems,

total_elems,

$pxs_bg1,

$pxs_bg2,

$pxs_bg3,

one_image_w,

$pxs_next,

$pxs_prev);

/*

set the width of the thumbs

$pxs_thumbnails.css({

'width' : one_image_w + 'px',

'margin-left' : -one_image_w/2 + 'px'

});

var spaces = one_image_w/(total_elems+1);

$thumbs.each(function(i){

var $this = $(this);

var left = spaces*(i+1) - $this.width()/2;

$this.css('left',left+'px');

if(o.thumbRotation){

var angle = Math.floor(Math.random()*41)-20;

$this.css({

'-moz-transform' : 'rotate('+ angle +'deg)',

'-webkit-transform' : 'rotate('+ angle +'deg)',

'transform' : 'rotate('+ angle +'deg)'

});

}

//hovering the thumbs animates them up and down

$this.bind('mouseenter',function(){

$(this).stop().animate({top:'-10px'},100);

}).bind('mouseleave',function(){

$(this).stop().animate({top:'0px'},100);

});

});

//make the first thumb be selected

highlight($thumbs.eq(0));

$pxs_next.bind('click',function(){

++current;

if(current >= total_elems)

if(o.circular)

current = 0;

else{

--current;

return false;

}

highlight($thumbs.eq(current));

slide(current,

$pxs_slider,

$pxs_bg3,

$pxs_bg2,

$pxs_bg1,

o.speed,

o.easing,

o.easingBg);

});

$pxs_prev.bind('click',function(){

--current;

if(current < 0)

if(o.circular)

current = total_elems - 1;

else{

++current;

return false;

}

highlight($thumbs.eq(current));

slide(current,

$pxs_slider,

$pxs_bg3,

$pxs_bg2,

$pxs_bg1,

o.speed,

o.easing,

o.easingBg);

});

/*

clicking a thumb will slide to the respective image

*/

$thumbs.bind('click',function(){

var $thumb = $(this);

highlight($thumb);

//if autoplay interrupt when user clicks

if(o.auto)

clearInterval(slideshow);

current = $thumb.index();

slide(current,

$pxs_slider,

$pxs_bg3,

$pxs_bg2,

$pxs_bg1,

o.speed,

o.easing,

o.easingBg);

});

/*

activate the autoplay mode if

*/

if(o.auto != 0){

o.circular = true;

slideshow = setInterval(function(){

$pxs_next.trigger('click');

},o.auto);

}

/*

when resizing the window,

slider elements, based on the new windows width.

we need to slide again to the current one,

*/

$(window).resize(function(){

w_w = $(window).width();

setWidths($pxs_slider,$elems,total_elems,$pxs_bg1,$pxs_bg2,$pxs_bg3,one_image_w,$pxs_next,$pxs_prev);

slide(current,

$pxs_slider,

$pxs_bg3,

$pxs_bg2,

$pxs_bg1,

1,

o.easing,

o.easingBg);

});

}

}).error(function(){

alert('here')

}).attr('src',$img.attr('src'));

});

});

};