Difference between revisions of "Team:LaVerne-Leos"

Line 2: Line 2:
 
{{Team:LaVerne-Leos/PopupCSS}}
 
{{Team:LaVerne-Leos/PopupCSS}}
 
<html>
 
<html>
−
<head>
+
<head>
−
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+
<title>Team:LaVerne-Leos 2015.igem.org</title>
−
<title>ULV iGEM Home</title>
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
−
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
−
<style>
+
<link href='http://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
−
body { background-color: #F0F0D8;
+
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
−
padding: 0;
+
<!-- jQuery -->
−
margin: 0; }
+
<script type="text/javascript" src="js/jquery.min.js"></script>
−
nav { background-color:#789048;
+
<!-- Add fancyBox main JS and CSS files -->
−
list-style-type: none;
+
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
−
text-align: center;
+
<link href="css/magnific-popup.css" rel="stylesheet" type="text/css">
−
height: 40px;
+
<script>
−
position: fixed;
+
$(document).ready(function() {
−
top: 18px;
+
$('.popup-with-zoom-anim').magnificPopup({
−
                                left: 0;
+
type: 'inline',
−
width: 100%;
+
fixedContentPos: false,
−
text-align: center;
+
fixedBgPos: true,
−
padding-top: 20px; }
+
overflowY: 'auto',
−
nav ul { padding: 0;
+
closeBtnInside: true,
−
margin: 0;
+
preloader: false,
−
display: inline; }
+
midClick: true,
−
nav ul li { display: inline-block; }
+
removalDelay: 300,
−
nav ul li a { text-decoration: none;
+
mainClass: 'my-mfp-zoom-in'
−
color: #F0F0D8;
+
});
−
padding: 22px 30px 23px 30px; }
+
});
−
nav a:link { color: #F0F0D8; }
+
</script>
−
nav a:hover { background-color: #93A66D;
+
</head>
−
                                      text-decoration: none; }
+
<body>
−
nav a:visited { color: #C0C0AD; }
+
  <div class="header">
−
                        h1, h2, h3 { border-bottom: none; }
+
      <div class="wrap">
−
footer { border-top: thin gray solid;
+
        <div class="logo">
−
font-size: .75em;
+
<a href="index.html"><img src="images/logo.png" alt=""/></a>
−
padding: 0 5px 0 5px;
+
</div>
−
background-color: #789048;
+
<div class="cssmenu">
−
color: #F0F0D8; }
+
<ul>
−
+
<li class="active"><a href="index.html">Home</a></li>
−
+
<li><a href="project.html">Project</a></li>
−
#banner { text-align: center;
+
                    <li><a href="notebook.html">Notebook</a></li>
−
height: 200px; }
+
                    <li><a href="practice.html">Human Practices</a></li>
−
+
<li><a href="about.html">Team</a></li>
−
#wrapper { margin-left: auto;
+
<li><a href="sponsors.html">Sponsors</a></li>
−
margin-right: auto;
+
</ul>
−
background-color: #FFFFFF; }
+
    </div>
−
+
    <div class="clear"></div>
−
#projdes { text-align: center;
+
  </div>
−
border: thin gray solid;
+
  </div>
−
border-radius: 15px;
+
  <div class="index-banner">
−
padding: 5px;
+
      <div class="wmuSlider example1">
−
background-color: #E0ECB0; }
+
  <div class="wmuSliderWrapper">
−
+
  <article style="position: absolute; width: 100%; opacity: 0;">
−
#whoweare { padding: 0 5px 0 5px; }
+
  <div class="banner-wrap">
−
</style>
+
  <div class="slider-left">
−
 
+
<h3>Bacterial</h3>
−
</head>
+
                            <h4>Biofuels</h4>
−
+
<p class="top">Toxic Tolerance</p>
−
<body><div id="wrapper">
+
<p class="middle">Photosynthetic Improvements</p>
−
<nav>
+
<p class="bottom">Self Regulation</p>
−
<ul>
+
  <!-- start magnific-->
−
<li><a href="https://2015.igem.org/Team:LaVerne-Leos">Home</a></li>
+
<div id="small-dialog" class="mfp-hide">
−
<li><a href="https://2015.igem.org/Team:LaVerne-Leos/Project">Project</a></li>
+
                              <div class="plans_table">
−
<li><a href="https://2015.igem.org/Team:LaVerne-Leos/Team">Team</a></li>
+
 
−
<li><a href="parts.html">Parts</a></li>
+
  <table width="100%" cellspacing="0" class="compare_plan">
−
<li><a href="notebook.html">Notebook</a></li>
+
<thead>
−
<li><a href="safety.html">Safety</a></li>
+
  <tr>
−
                                <li><a href="https://2015.igem.org/Team:LaVerne-Leos/Attribution">Attribution</a></li>
+
        <th class="plans-list"><h3>Plan Features</h3></th>
−
                                <li><a href="https://2015.igem.org/Team:LaVerne-Leos/HumanPractices">Human Practices</a></li>
+
        <th class="plans-list"><h3>Basic</h3><h4>$5<small>/month</small></h4></th>
−
                                <li><a href="https://2015.igem.org/Team:LaVerne-Leos/Collaboration">Collaboration</a></li>
+
        <th class="plans-list"><h3>Economy</h3><h4>$9<small>/month</small></h4></th>
−
</ul>
+
    </tr>
−
</nav>
+
</thead>
−
<br>
+
<tfoot>
−
<div style="text-align:center; height: 200px; margin-left:0;">
+
    <tr>
−
<img src="https://static.igem.org/mediawiki/2015/a/a0/Team_LaVerne-Leos_banner.jpg" alt="La Verne-Leos Banner" width="965px" height="auto">
+
        <td> </td>
−
                </div>
+
</tr>
−
<main>
+
</tfoot>
−
<p id="projdes">Currently, cyanobacteria is used to produce biofuel, however the process is costly and not as
+
  <tbody>
−
efficient. We will reengineer cyanobacteria to increase the efficiency of biofuel production by
+
  <tr>
−
improving the collection of sunlight and the collection of biofuel. We will maximise the collection
+
        <td class="plan_list_title">Web Space</td>
−
of sunlight by engineering a system in which cyanobacteria will be able to adjust its antenna length
+
        <td class="price_body">Unlimited</td>
−
to the light intensity. Collection of biofuel will also become easier when we engineer cyanobacteria
+
        <td class="price_body">Unlimited</td>
−
to lyse when optimal levels of inner fatty acids are sensed.</p>
+
    </tr>
−
<div id="whoweare">
+
    <tr>
−
<h2>Who We Are</h2>
+
        <td class="plan_list_title">Bandwidth</td>
−
<p>We are the first iGEM team from University of La Verne and La Canada High School.  We are
+
<td class="price_body">Unlimited</td>
−
an interdisciplinary team with members from biology, math, computer science, art, and library
+
        <td class="price_body">Unlimited</td>
−
science.  We are a community-engaged team that hopes to partner with other high schools,
+
    </tr>
−
non-profits, and local businesses to create innovative solutions to global issues!</p>
+
    <tr>
 +
        <td class="plan_list_title">25 GB Storage</td>
 +
        <td class="price_body"><img src="images/icon-remove.png" alt="img"></td>
 +
        <td class="price_body">Unlimited</td>
 +
</tr>
 +
    <tr>
 +
        <td class="plan_list_title">iPhone App</td>
 +
        <td class="price_body"><img src="images/icon-remove.png" alt="img"></td>
 +
        <td class="price_body">Unlimited</td>
 +
    </tr>
 +
    <tr>
 +
        <td class="plan_list_title">Enhanced Security</td>
 +
        <td class="price_body"><img src="images/tickmark-icon.png" alt="img"></td>
 +
        <td class="price_body"><img src="images/tickmark-icon.png" alt="img"></td>
 +
    </tr>
 +
    <tr>
 +
        <td class="plan_list_title">E-mail</td>
 +
        <td class="price_body"><img src="images/tickmark-icon.png" alt="img"></td>
 +
        <td class="price_body"><img src="images/tickmark-icon.png" alt="img"></td>
 +
    </tr>
 +
    <tr>
 +
        <td class="plan_list_title">Wordpress Support</td>
 +
        <td class="price_body"><img src="images/icon-remove.png" alt="img"></td>
 +
        <td class="price_body"><img src="images/tickmark-icon.png" alt="img"></td>
 +
    </tr>
 +
    <tr>
 +
        <td class="plan_list_title">24/7 Support</td>
 +
        <td class="price_body"><img src="images/tickmark-icon.png" alt="img"></td>
 +
        <td class="price_body"><img src="images/tickmark-icon.png" alt="img"></td>
 +
    </tr>
 +
    <tr>
 +
        <td class="plan_list_title">Backups</td>
 +
    <td class="price_body"><img src="images/tickmark-icon.png" alt="img"></td>
 +
        <td class="price_body"><img src="images/tickmark-icon.png" alt="img"></td>
 +
    </tr>
 +
    <tr>
 +
        <td class="plan_list_title">Dedicated IP</td>
 +
        <td class="price_body">$2/mo</td>
 +
        <td class="price_body">$2/mo</td>
 +
    </tr>
 +
</tbody></table> 
 +
  </div>
 +
</div>
 +
<!-- end magnific-->
 +
</div>
 +
<div class="slider-right">
 +
</div>
 +
<div class="clear"></div>
 +
</div>
 +
</article>
 +
  <article style="position: relative; width: 100%; opacity: 1;">
 +
  <div class="banner-wrap">
 +
  <div class="slider-right">
 +
    <img src="images/banner-left.png" />
 +
</div>
 +
  <div class="slider-left">
 +
<h3>Bacterial</h3>
 +
                            <h4>Biofuels</h4>
 +
<p class="top">Toxic Tolerance</p>
 +
<p class="middle">Photosynthetic Improvements</p>
 +
<p class="bottom">Self Regulation</p>
 +
<button class="btn btn-8 btn-8b"><a class="popup-with-zoom-anim" href="#small-dialog">Order Now</a></button>
 +
</div>
 +
<div class="clear"></div>
 +
</div>
 +
  </article>
 +
  <article style="position: absolute; width: 100%; opacity: 0;">
 +
  <div class="banner-wrap">
 +
  <div class="slider-left">
 +
<h3>Bacterial</h3>
 +
                            <h4>Biofuels</h4>
 +
<p class="top">Toxic Tolerance</p>
 +
<p class="middle">Photosynthetic Improvements</p>
 +
<p class="bottom">Self Regulation</p>
 +
<button class="btn btn-8 btn-8b"><a class="popup-with-zoom-anim" href="#small-dialog">Order Now</a></button>
 +
</div>
 +
<div class="slider-right">
 +
    <img src="images/banner-left.png" />
 +
</div>
 +
<div class="clear"></div>
 +
</div>
 +
  </article>
 +
  <article style="position: absolute; width: 100%; opacity: 0;">
 +
  <div class="banner-wrap">
 +
  <div class="slider-right">
 +
    <img src="images/banner-left.png" />  
 +
</div>
 +
  <div class="slider-left">
 +
<h3>Bacterial</h3>
 +
                            <h4>Biofuels</h4>
 +
<p class="top">Toxic Tolerance</p>
 +
<p class="middle">Photosynthetic Improvements</p>
 +
<p class="bottom">Self Regulation</p>
 +
<button class="btn btn-8 btn-8b"><a class="popup-with-zoom-anim" href="#small-dialog">Order Now</a></button>
 +
</div>
 +
<div class="clear"></div>
 +
</div>
 +
  </article>
 +
  <article style="position: absolute; width: 100%; opacity: 0;">
 +
  <div class="banner-wrap">
 +
  <div class="slider-left">
 +
<h3>Bacterial</h3>
 +
                            <h4>Biofuels</h4>
 +
<p class="top">Toxic Tolerance</p>
 +
<p class="middle">Photosynthetic Improvements</p>
 +
<p class="bottom">Self Regulation</p>
 +
<button class="btn btn-8 btn-8b"><a class="popup-with-zoom-anim" href="#small-dialog">Order Now</a></button>
 +
</div>
 +
<div class="slider-right">
 +
    <img src="images/banner-left.png" />  
 +
</div>
 +
<div class="clear"></div>
 +
</div>
 +
      </article>
 +
</div>
 +
                <a class="wmuSliderPrev">Previous</a><a class="wmuSliderNext">Next</a>
 +
                <ul class="wmuSliderPagination">
 +
                <li><a href="#" class="">0</a></li>
 +
                <li><a href="#" class="">1</a></li>
 +
                <li><a href="#" class="wmuActive">2</a></li>
 +
                <li><a href="#">3</a></li>
 +
                <li><a href="#">4</a></li>
 +
                  </ul>
 +
        </div>
 +
             
 +
  </div>
 +
<!---//End-da-slider----->
 +
  <div class="main">
 +
<div class="content-top">
 +
<div class="wrap">
 +
<h3>We are the First igem team at la verne</h3>
 +
<h5>We plan on making an imprint onto the future! </h5>
 +
<div class="section group">
 +
<div class="col_1_of_4 span_1_of_4">
 +
                    <div class="grid1">
 +
                        <img src="images/pic.png" alt=""/>
 +
<h4>Our <br>Project</h4>
 +
</div>
 +
<a href="project.html"><div class="desc">
 +
  <p>Click <u>here</u> to read our about our overall goals for the entire project!</p>
 +
                        </div></a>
 +
</div>
 +
<div class="col_1_of_4 span_1_of_4">
 +
<div class="grid1">
 +
<img src="images/icon1.png" alt=""/>
 +
<h4>Our <br>Results</h4>
 +
</div>
 +
<a href="project.html"><div class="desc">
 +
  <p>Click <u>here</u> to read more on what we accomplished this summer!</p>
 +
                        </div></a>  
 +
</div>
 +
<div class="col_1_of_4 span_1_of_4">
 +
<div class="grid1">
 +
<img src="images/icon2.png" alt=""/>
 +
<h4>Human <br>Practices</h4>
 +
</div>
 +
<a href="project.html"><div class="desc">
 +
  <p>Click <u>here</u> to see the implications of our project!</p>
 +
                        </div></a>
 +
</div>
 +
<div class="col_1_of_4 span_1_of_4">
 +
<div class="grid1">
 +
<img src="images/icon3.png" alt=""/>
 +
<h4>Notebook & Protocols</h4>
 +
</div>
 +
<a href="project.html"><div class="desc">
 +
  <p>Click <u>here</u> to view our protocols and steps throughout the project!</p>
 +
</div>
 +
</div>
 +
<div class="clear"></div>
 
</div>
 
</div>
−
</main>
+
</div>
−
<footer>
+
</div>
−
<p>Natural Science Division Office and Biology Department<br>
+
<div class="content-middle">
−
1950 3rd St.<br>
+
<h2><span>Our work</span></h2>
−
La Verne, CA 91750<br>
+
<p></p>
−
Phone: (909) 448-4601</p>
+
      <div id="container">
−
<p style="text-align: center">Copyright &copy; 2015 La Verne iGEM</p>
+
        <div id="main1">
−
</footer>
+
      <ul id="tiles">
 +
        <!-- These are our grid blocks -->
 +
        <li>
 +
          <a href="images/pic1.jpg" rel="lightbox" class="cboxElement">
 +
            <img src="images/pic1.jpg" width="200" height="283">
 +
          </a>
 +
        </li>
 +
        <li>
 +
          <a href="images/pic2.jpg" rel="lightbox" class="cboxElement">
 +
            <img src="images/pic2.jpg" width="200" height="300">
 +
          </a>
 +
      </li>
 +
        <li>
 +
          <a href="images/pic3.jpg" rel="lightbox" class="cboxElement">
 +
            <img src="images/pic3.jpg" width="200" height="252">
 +
          </a>
 +
      </li>
 +
        <li>
 +
          <a href="images/pic4.jpg" rel="lightbox" class="cboxElement">
 +
            <img src="images/pic4.jpg" width="200" height="158">
 +
          </a>
 +
        </li>
 +
        <li>
 +
          <a href="images/pic5.jpg" rel="lightbox" class="cboxElement">
 +
            <img src="images/pic5.jpg" width="200" height="265">
 +
          </a>
 +
      </li>
  
−
</div></body>
+
        <li>
−
+
          <a href="images/pic6.jpg" rel="lightbox" class="cboxElement">
 +
            <img src="images/pic6.jpg" width="200" height="158">
 +
          </a>
 +
        </li>
 +
        <li>
 +
          <a href="images/pic7.jpg" rel="lightbox" class="cboxElement">
 +
            <img src="images/pic7.jpg" width="200" height="200">
 +
          </a>
 +
        </li>
 +
        <li>
 +
          <a href="images/pic8.jpg" rel="lightbox" class="cboxElement">
 +
            <img src="images/pic8.jpg" width="200" height="200">
 +
          </a>
 +
        </li>
 +
    </ul>
 +
  </div>
 +
  </div>
 +
  <link rel="stylesheet" href="css/colorbox.css">
 +
  <!-- Include the imagesLoaded plug-in -->
 +
  <script src="js/jquery.imagesloaded.js"></script>
 +
  <!-- include colorbox -->
 +
  <script src="js/jquery.colorbox-min.js"></script>
 +
  <!-- Include the plug-in -->
 +
  <script src="js/jquery.wookmark.js"></script>
 +
  <!-- Once the page is loaded, initalize the plug-in. -->
 +
  <script type="text/javascript">
 +
    (function ($){
 +
      $('#tiles').imagesLoaded(function() {
 +
        // Prepare layout options.
 +
        var options = {
 +
          autoResize: true, // This will auto-update the layout when the browser window is resized.
 +
          container: $('#main1'), // Optional, used for some extra CSS styling
 +
          offset: 2, // Optional, the distance between grid items
 +
          itemWidth:200 // Optional, the width of a grid item
 +
        };
 +
 
 +
        // Get a reference to your grid items.
 +
        var handler = $('#tiles li');
 +
 
 +
        // Call the layout function.
 +
        handler.wookmark(options);
 +
 
 +
        // Init lightbox
 +
        $('a', handler).colorbox({
 +
          rel: 'lightbox'
 +
        });
 +
      });
 +
    })(jQuery);
 +
  </script>
 +
</div>
 +
  <div class="content-bottom">
 +
<h2><span>Our Sponsors</span></h2>     
 +
<ul id="flexiselDemo3">
 +
<li><img src="images/client1.png" /></li>
 +
<li><img src="images/client2.png" /></li>
 +
<li><img src="images/client3.png" /></li>
 +
</ul>
 +
<script type="text/javascript">
 +
$(window).load(function() {
 +
$("#flexiselDemo1").flexisel();
 +
$("#flexiselDemo2").flexisel({
 +
enableResponsiveBreakpoints: true,
 +
    responsiveBreakpoints: {
 +
    portrait: {
 +
    changePoint:480,
 +
    visibleItems: 1
 +
    },
 +
    landscape: {
 +
    changePoint:640,
 +
    visibleItems: 2
 +
    },
 +
    tablet: {
 +
    changePoint:768,
 +
    visibleItems: 3
 +
    }
 +
    }
 +
    });
 +
 
 +
$("#flexiselDemo3").flexisel({
 +
visibleItems: 3,
 +
animationSpeed: 1000,
 +
autoPlay: true,
 +
autoPlaySpeed: 3000,   
 +
pauseOnHover: true,
 +
enableResponsiveBreakpoints: true,
 +
    responsiveBreakpoints: {
 +
    portrait: {
 +
    changePoint:480,
 +
    visibleItems: 1
 +
    },
 +
    landscape: {
 +
    changePoint:640,
 +
    visibleItems: 2
 +
    },
 +
    tablet: {
 +
    changePoint:768,
 +
    visibleItems: 3
 +
    }
 +
    }
 +
    });
 +
   
 +
});
 +
</script>
 +
<script type="text/javascript" src="js/jquery.flexisel.js"></script>
 +
</div>
 +
</div>
 +
  <div class="footer">
 +
<div class="footer-top">
 +
  <div class="wrap">
 +
  <div class="section group">
 +
<div class="col_1_of_3 span_1_of_3">
 +
<h3>About Us</h3>
 +
<p>We are the first iGEM team from University of La Verne and La Canada High School. We are an interdisciplinary team with members from biology, math, computer science, art, and library science. We are a community-engaged team that hopes to partner with other high schools, non-profits, and local businesses to create innovative solutions to global issues!</p>
 +
<button class="btn1 btn-8 btn-8b">Our Team</button>
 +
</div>
 +
<div class="col_1_of_3 span_1_of_3">
 +
<h4>Follow Us on Facebook</h4>
 +
    <ul>
 +
  <li class="facebook"><a href="#"><span> </span></a></li>        
 +
        </ul>
 +
    </div>
 +
    </div>
 +
<div class="col_1_of_3 span_1_of_3">
 +
<h3>Contact info</h3>
 +
<div class="footer-list">
 +
<ul>
 +
<li><img src="images/address.png" alt=""/><p>Natural Science Division Office and Biology Department<br>1950 3rd St.
 +
La Verne, CA 91750<br></p><div class="clear"></div></li>
 +
<li><img src="images/msg.png" alt=""/><p>Email: <span class="yellow"><a href="#">ulvigemteam@laverne.edu</a></span></p><div class="clear"></div></li>
 +
  </ul>
 +
</div>
 +
 +
</div>
 +
<div class="clear"></div>
 +
</div>
 +
  </div>
 +
</div>
 +
<div class="footer-bottom">
 +
<div class="wrap">
 +
<div class="copy">
 +
    <p class="copy">� 2013 Template by <a href="http://w3layouts.com" target="_blank">w3layouts</a></p>
 +
    </div>
 +
<div class="footer-nav">
 +
<ul>
 +
<li><a href="index.html">Home</a></li>
 +
<li><a href="project.html">Project</a></li>
 +
                    <li><a href="notebook.html">Notebook</a></li>
 +
                    <li><a href="practice.html">Human Practices</a></li>
 +
<li><a href="about.html">Team</a></li>
 +
                    <li><a href="sponsors.html">Sponsors</a></li>
 +
</ul>
 +
</div>
 +
<div class="clear"></div>
 +
    </div>
 +
</div>
 +
</div>
 +
</body>
 
</html>
 
</html>

Revision as of 17:21, 25 June 2015

.mfp-bg { 

 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1042;
 overflow: hidden;
 position: fixed;
 background: #0b0b0b;
 opacity: 0.9;
 filter: alpha(opacity=80); }

.mfp-wrap { 

 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1043;
 position: fixed;
 outline: none !important;
 -webkit-backface-visibility: hidden; }

.mfp-container { 

 text-align: center;
 position: absolute;
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
 padding: 0 8px;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box; }

.mfp-container:before { 

 content: ;
 display: inline-block;
 height: 100%;
 vertical-align: middle; }

.mfp-align-top .mfp-container:before { 

 display: none; }

.mfp-content { 

 position: relative;
 display: inline-block;
 vertical-align: middle;
 margin: 0 auto;
 text-align: left;
 z-index: 1045; }

.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { 

 width: 100%;
 cursor: auto; }

.mfp-ajax-cur { 

 cursor: progress; }

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { 

 cursor: -moz-zoom-out;
 cursor: -webkit-zoom-out;
 cursor: zoom-out; }

.mfp-zoom { 

 cursor: pointer;
 cursor: -webkit-zoom-in;
 cursor: -moz-zoom-in;
 cursor: zoom-in; }

.mfp-auto-cursor .mfp-content { 

 cursor: auto; }

.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { 

 -webkit-user-select: none;
 -moz-user-select: none;
 user-select: none; }

.mfp-loading.mfp-figure { 

 display: none; }

.mfp-hide { 

 display: none !important; }

.mfp-preloader { 

 color: #cccccc;
 position: absolute;
 top: 50%;
 width: auto;
 text-align: center;
 margin-top: -0.8em;
 left: 8px;
 right: 8px;
 z-index: 1044; }

.mfp-preloader a { 

 color: #cccccc; }

.mfp-preloader a:hover { 

 color: white; }

.mfp-s-ready .mfp-preloader { 

 display: none; }

.mfp-s-error .mfp-content { 

 display: none; }

button.mfp-close, button.mfp-arrow { 

 overflow: visible;
 cursor: pointer;
 background: transparent;
 border: 0;
 -webkit-appearance: none;
 display: block;
 padding: 0;
 z-index: 1046; }

button::-moz-focus-inner { 

 padding: 0;
 border: 0; }

.mfp-close { 

 width:30px;
 height:30px;
 line-height: 44px;
 position: absolute;
 right: 0;
 top: 0;
 text-decoration: none;
 text-align: center;
 opacity: 0.65;
 padding: 0 0 18px 10px;
 color: white;
 font-style: normal;
 font-size: 28px;
 font-family: Arial, Baskerville, monospace; 
 outline:none;
}
 .mfp-close:hover, .mfp-close:focus {
   opacity: 1; }
 .mfp-close:active {
   top: 1px; }

.mfp-close-btn-in .mfp-close { 

 color: #333333; }

.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { 

 color: white;
 right: -6px;
 text-align: right;
 padding-right: 6px;
 width: 100%; 
 outline:none;
}

.mfp-counter { 

 position: absolute;
 top: 0;
 right: 0;
 color: #cccccc;
 font-size: 12px;
 line-height: 18px; }

.mfp-arrow { 

 position: absolute;
 opacity: 0.65;
 margin: 0;
 top: 50%;
 margin-top: -55px;
 padding: 0;
 width: 90px;
 height: 110px;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

.mfp-arrow:active { 

 margin-top: -54px; }

.mfp-arrow:hover, .mfp-arrow:focus { 

 opacity: 1; }

.mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a { 

 content: ;
 display: block;
 width: 0;
 height: 0;
 position: absolute;
 left: 0;
 top: 0;
 margin-top: 35px;
 margin-left: 35px;
 border: medium inset transparent; }

.mfp-arrow:after, .mfp-arrow .mfp-a { 

 border-top-width: 13px;
 border-bottom-width: 13px;
 top: 8px; }

.mfp-arrow:before, .mfp-arrow .mfp-b { 

 border-top-width: 21px;
 border-bottom-width: 21px; }

.mfp-arrow-left { 

 left: 0; }
 .mfp-arrow-left:after,
 .mfp-arrow-left .mfp-a {
   border-right: 17px solid white;
   margin-left: 31px; }
 .mfp-arrow-left:before,
 .mfp-arrow-left .mfp-b {
   margin-left: 25px;
   border-right: 27px solid #3f3f3f; }

.mfp-arrow-right { 

 right: 0; }
 .mfp-arrow-right:after,
 .mfp-arrow-right .mfp-a {
   border-left: 17px solid white;
   margin-left: 39px; }
 .mfp-arrow-right:before,
 .mfp-arrow-right .mfp-b {
   border-left: 27px solid #3f3f3f; }

.mfp-iframe-holder { 

 padding-top: 40px;
 padding-bottom: 40px; }

.mfp-iframe-holder .mfp-content { 

 line-height: 0;
 width: 100%;
 max-width: 900px; }

.mfp-iframe-scaler { 

 width: 100%;
 height: 0;
 overflow: hidden;
 padding-top: 56.25%; }

.mfp-iframe-scaler iframe { 

 position: absolute;
 display: block;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
 background: black; }

.mfp-iframe-holder .mfp-close { 

 top: -40px; }

/* Main image in popup */ img.mfp-img { 

 width: auto;
 max-width: 100%;
 height: auto;
 display: block;
 line-height: 0;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 padding: 40px 0 40px;
 margin: 0 auto; }

/* The shadow behind the image */ .mfp-figure:after { 

 content: ;
 position: absolute;
 left: 0;
 top: 40px;
 bottom: 40px;
 display: block;
 right: 0;
 width: auto;
 height: auto;
 z-index: -1;
 box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
 background: #444444; }

.mfp-figure { 

 line-height: 0; }

.mfp-bottom-bar { 

 margin-top: -36px;
 position: absolute;
 top: 100%;
 left: 0;
 width: 100%;
 cursor: auto; }

.mfp-title { 

 text-align: left;
 line-height: 18px;
 color: #f3f3f3;
 word-break: break-word;
 padding-right: 36px; }

.mfp-figure small { 

 color: #bdbdbd;
 display: block;
 font-size: 12px;
 line-height: 14px; }

.mfp-image-holder .mfp-content { 

 max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure { 

 cursor: pointer; }

/******** Plans List *******/ /* Styles for dialog window */

  1. small-dialog {

background: white; padding: 20px 30px; text-align: left; max-width: 400px; margin: 40px auto; position: relative; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; } /**

/** 

* Fade-zoom animation for first dialog
*/

/* start state */ .my-mfp-zoom-in #small-dialog { opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .my-mfp-zoom-in.mfp-ready #small-dialog { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* animate out */ .my-mfp-zoom-in.mfp-removing #small-dialog{ -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; } /* Dark overlay, start state */ .my-mfp-zoom-in.mfp-bg { opacity: 0; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } /* animate in */ .my-mfp-zoom-in.mfp-ready.mfp-bg { 

  opacity: 0.9;

} /* animate out */ .my-mfp-zoom-in.mfp-removing.mfp-bg{ 

  opacity: 0;

} .plans_table thead{ background: #ffea00; font-family: "Century Gothic",Arial, Helvetica, sans-serif; } .plans_table thead th.plans-list{ padding:15px 0; border: 1px solid #F0D82F; } .plans_table thead th.plans-list h3{ font-size: 1.4em; color: #000; display: block; width: 100%; margin: 0; text-align: center; } .plans_table thead th.plans-list h4{ font-size: 1em; color: #000; display: block; width: 100%; margin: 0; text-align: center; } .plans_table thead th.plans-list h4 small{ font-size:14px; padding-left:2px; } .plans_table td.plan_list_title{ 

   font-size:0.85em;

text-align:left; color:#222; } .plans_table tbody td{ padding:10px; color:#8F8F8F; font-size:0.8em; border:1px solid #E6E6E6; text-align:center; } .plans_table tfoot td.order_now button{ display:block; font-size:0.85em; text-align:center; text-decoration:none; margin:0 auto; outline: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; padding:8px 10px; 

    -moz-border-radius:1px; -webkit-border-radius:1px; border-radius:1px;
    border:none;
    cursor:pointer;
   background:#000000;

color:#ffffff; } .plans_table tfoot td.order_now button:hover{ background: #ffea00; color:#000; } .plans_table tfoot td{ text-align:center; 

   padding:10px 0; 
   border:1px solid #E6E6E6;

} /**** End Plans List *********/ @media (max-width: 320px){

  1. small-dialog{

padding:20px 5px; } .mfp-close{ line-height:25px; } .plans_table{ margin-top:10px; } .plans_table thead th.plans-list h3{ font-size:1em; } .plans_table thead th.plans-list{ padding:10px 0; } .plans_table thead th.plans-list h4{ 

  font-size:1em;

} .plans_table thead th.plans-list h4 small{ 

 font-size:10px;

} .plans_table tfoot td.order_now button{ 

  font-size:0.7em;
  padding:8px;

} } /* start state1 */ .pop_up h2{ font-size: 1.5em; color: #000; margin-bottom: 4%; text-transform: capitalize; }

  1. small-dialog1{

background: white; padding: 20px 30px; text-align: left; max-width: 400px; margin: 40px auto; position: relative; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; } .my-mfp-zoom-in #small-dialog1 { opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .my-mfp-zoom-in.mfp-ready #small-dialog1 { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* animate out */ .my-mfp-zoom-in.mfp-removing #small-dialog1{ -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; } /* start state2 */ .pop_up h2{ font-size: 1.5em; color: #000; margin-bottom: 4%; text-transform: capitalize; } .pop_up p{ font-size: 13px; color: #000; line-height: 1.8em; }

  1. small-dialog2{

background: white; padding: 10px 15px; text-align: left; max-width: 400px; margin: 40px auto; position: relative; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; } .my-mfp-zoom-in #small-dialog2 { opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .my-mfp-zoom-in.mfp-ready #small-dialog2 { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* animate out */ .my-mfp-zoom-in.mfp-removing #small-dialog2{ -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; } /* start state3 */ .pop_up h3{ font-size: 1.5em; color: #000; margin-bottom: 4%; text-transform: capitalize; } .pop_up p{ font-size: 13px; color: #000; line-height: 1.8em; }

  1. small-dialog3{

background: white; padding: 10px 15px; text-align: left; max-width: 400px; margin: 40px auto; position: relative; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; } .my-mfp-zoom-in #small-dialog3 { opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .my-mfp-zoom-in.mfp-ready #small-dialog3 { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* animate out */ .my-mfp-zoom-in.mfp-removing #small-dialog3{ -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; } /* start state4 */ .pop_up h4{ font-size: 1.5em; color: #000; margin-bottom: 4%; text-transform: capitalize; } .pop_up p{ font-size: 13px; color: #000; line-height: 1.8em; }

  1. small-dialog4{

background: white; padding: 10px 15px; text-align: left; max-width: 400px; margin: 40px auto; position: relative; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; } .my-mfp-zoom-in #small-dialog4 { opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .my-mfp-zoom-in.mfp-ready #small-dialog4 { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* animate out */ .my-mfp-zoom-in.mfp-removing #small-dialog4{ -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; } /* start state5 */ .pop_up h5{ font-size: 1.5em; color: #000; margin-bottom: 4%; text-transform: capitalize; } .pop_up p{ font-size: 13px; color: #000; line-height: 1.8em; }

  1. small-dialog5{

background: white; padding: 10px 15px; text-align: left; max-width: 400px; margin: 40px auto; position: relative; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; } .my-mfp-zoom-in #small-dialog5 { opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .my-mfp-zoom-in.mfp-ready #small-dialog5 { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* animate out */ .my-mfp-zoom-in.mfp-removing #small-dialog5{ -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; } /* start state6 */ .pop_up h6{ font-size: 1.5em; color: #000; margin-bottom: 4%; text-transform: capitalize; } .pop_up p{ font-size: 13px; color: #000; line-height: 1.8em; }

  1. small-dialog6{

background: white; padding: 10px 15px; text-align: left; max-width: 400px; margin: 40px auto; position: relative; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; } .my-mfp-zoom-in #small-dialog6 { opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .my-mfp-zoom-in.mfp-ready #small-dialog6 { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* animate out */ .my-mfp-zoom-in.mfp-removing #small-dialog6{ -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; } /* start state7 */ .pop_up h7{ font-size: 1.5em; color: #000; margin-bottom: 4%; text-transform: capitalize; } .pop_up p{ font-size: 13px; color: #000; line-height: 1.8em; }

  1. small-dialog7{

background: white; padding: 10px 15px; text-align: left; max-width: 400px; margin: 40px auto; position: relative; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; } .my-mfp-zoom-in #small-dialog7 { opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .my-mfp-zoom-in.mfp-ready #small-dialog7 { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* animate out */ .my-mfp-zoom-in.mfp-removing #small-dialog7{ -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; } /* start state8 */ .pop_up h8{ font-size: 1.5em; color: #000; margin-bottom: 4%; text-transform: capitalize; } .pop_up p{ font-size: 13px; color: #000; line-height: 1.8em; }

  1. small-dialog8{

background: white; padding: 10px 15px; text-align: left; max-width: 400px; margin: 40px auto; position: relative; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; } .my-mfp-zoom-in #small-dialog8 { opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .my-mfp-zoom-in.mfp-ready #small-dialog8 { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* animate out */ .my-mfp-zoom-in.mfp-removing #small-dialog8{ -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; } /* start state9 */ .pop_up h9{ font-size: 1.5em; color: #000; margin-bottom: 4%; text-transform: capitalize; } .pop_up p{ font-size: 13px; color: #000; line-height: 1.8em; }

  1. small-dialog9{

background: white; padding: 10px 15px; text-align: left; max-width: 400px; margin: 40px auto; position: relative; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; } .my-mfp-zoom-in #small-dialog9 { opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .my-mfp-zoom-in.mfp-ready #small-dialog9 { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* animate out */ .my-mfp-zoom-in.mfp-removing #small-dialog9{ -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; } Team:LaVerne-Leos 2015.igem.org

PreviousNext

We are the First igem team at la verne

We plan on making an imprint onto the future!

Our
Project

Click here to read our about our overall goals for the entire project!

Our
Results

Click here to read more on what we accomplished this summer!

Human
Practices

Click here to see the implications of our project!

Notebook & Protocols

Click here to view our protocols and steps throughout the project!

Our work

Our Sponsors

About Us

We are the first iGEM team from University of La Verne and La Canada High School. We are an interdisciplinary team with members from biology, math, computer science, art, and library science. We are a community-engaged team that hopes to partner with other high schools, non-profits, and local businesses to create innovative solutions to global issues!

Follow Us on Facebook

Contact info

  • Natural Science Division Office and Biology Department
    1950 3rd St. La Verne, CA 91750

  • Email: ulvigemteam@laverne.edu

� 2013 Template by w3layouts