Team:Ravenwood Raptors

From 2014hs.igem.org

(Difference between revisions)
 
(136 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<head>
<head>
-
<link href='http://fonts.googleapis.com/css?family=Audiowide|Share+Tech+Mono' rel='stylesheet' type='text/css'>
 
-
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 
-
</head>
 
-
<style>
+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-
/* Hide Defaults */
+
<script type="text/javascript">
-
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
+
-
    display:none;}
+
-
#top-section {
+
-
    border: none;
+
-
    height: 0px;}
+
-
#content {
+
-
    border: none;}
+
-
/* Background */
+
$(document).ready(function(){
-
body {
+
-
background-image:url("http://oi62.tinypic.com/2uek64o.jpg");
+
-
}
+
-
div#bodyContent {
+
-
background-image: url('http://oi59.tinypic.com/2qvgkcw.jpg !important');
+
-
}
+
-
div#content{
+
-
background-image: url('http://oi59.tinypic.com/2qvgkcw.jpg !important');
+
-
}
+
-
div#menubar {
+
-
background-image: url('http://oi59.tinypic.com/2qvgkcw.jpg !important');
+
-
}
+
-
/* Text Styles */
+
  // PLEASE READ BELOW COMMENT
-
h1{
+
  //
-
font: 400 45px/0.5 'Audiowide', Helvetica, sans-serif;
+
  // don't worry, we're open source --> https://github.com/raptor-igem/2014hs-website
-
text-align:center;
+
  // 
-
border-bottom: medium none !important;
+
  // PLEASE READ ABOVE COMMENT
-
}
+
 
-
p{
+
  $("body.page-Team_Ravenwood_Raptors").append("<iframe class='real' src='http://raptor-igem.github.io/2014hs-website/'></iframe>");
-
font: 400 14px/1.5 'Share Tech Mono', Times, serif;
+
});
-
}
+
-
/* Navigation */
+
</script>
-
#cssmenu {
+
 
-
  position: relative;
+
<style type="text/css">
-
  height: 44px;
+
body {
-
  background: #e6e6e6;
+
   overflow-x: hidden;
-
  width: auto;
+
   height: 100%;
-
}
+
}  
-
#cssmenu ul {
+
.real {
-
  list-style: none;
+
-
  padding: 0;
+
-
  margin: 0;
+
-
  line-height: 1;
+
-
}
+
-
#cssmenu > ul {
+
-
  position: relative;
+
-
  display: block;
+
-
  background: #e6e6e6;
+
-
  height: 32px;
+
-
  width: 100%;
+
-
  z-index: 500;
+
-
}
+
-
#cssmenu > ul > li {
+
-
  display: block;
+
-
  position: relative;
+
-
  float: left;
+
-
  margin: 0;
+
-
  padding: 0;
+
-
}
+
-
#cssmenu > ul > #menu-button {
+
-
  display: none;
+
-
}
+
-
#cssmenu ul li a {
+
-
  display: block;
+
-
  font-family: Helvetica, sans-serif;
+
-
  text-decoration: none;
+
-
}
+
-
#cssmenu > ul > li > a {
+
-
  font-size: 14px;
+
-
  font-weight: bold;
+
-
  padding: 15px 20px;
+
-
  color: #7a8189;
+
-
  text-transform: uppercase;
+
-
  -webkit-transition: color 0.25s ease-out;
+
-
  -moz-transition: color 0.25s ease-out;
+
-
  -ms-transition: color 0.25s ease-out;
+
-
  -o-transition: color 0.25s ease-out;
+
-
  transition: color 0.25s ease-out;
+
-
}
+
-
#cssmenu > ul > li.has-sub > a {
+
-
   padding-right: 32px;
+
-
}
+
-
#cssmenu > ul > li:hover > a {
+
-
  color: #9c9c9c;
+
-
}
+
-
#cssmenu li.has-sub::after {
+
-
  display: block;
+
-
  content: '';
+
-
  position: absolute;
+
-
  width: 0;
+
-
   height: 0;
+
-
}
+
-
#cssmenu > ul > li.has-sub::after {
+
-
  right: 10px;
+
-
  top: 20px;
+
-
  border: 5px solid transparent;
+
-
  border-top-color: #7a8189;
+
-
}
+
-
#cssmenu > ul > li:hover::after {
+
-
  border-top-color: #9c9c9c;
+
-
}
+
-
#indicatorContainer {
+
   position: absolute;
   position: absolute;
-
  height: 12px;
 
   width: 100%;
   width: 100%;
-
   bottom: 0px;
+
   height: 99%;
 +
  background-color: white;
 +
  top: 0%;
 +
  left: 0%;
   overflow: hidden;
   overflow: hidden;
-
   z-index: -1;
+
   z-index: 999;
}
}
-
#pIndicator {
 
-
  position: absolute;
 
-
  height: 0;
 
-
  width: 100%;
 
-
  border: 12px solid transparent;
 
-
  border-top-color: #2b2f3a;
 
-
  z-index: -2;
 
-
  -webkit-transition: left .25s ease;
 
-
  -moz-transition: left .25s ease;
 
-
  -ms-transition: left .25s ease;
 
-
  -o-transition: left .25s ease;
 
-
  transition: left .25s ease;
 
-
}
 
-
#cIndicator {
 
-
  position: absolute;
 
-
  height: 0;
 
-
  width: 100%;
 
-
  border: 12px solid transparent;
 
-
  border-top-color: #2b2f3a;
 
-
  top: -12px;
 
-
  right: 100%;
 
-
  z-index: -2;
 
-
}
 
-
#cssmenu ul ul {
 
-
  position: absolute;
 
-
  left: -9999px;
 
-
  top: 70px;
 
-
  opacity: 0;
 
-
  -webkit-transition: opacity .3s ease, top .25s ease;
 
-
  -moz-transition: opacity .3s ease, top .25s ease;
 
-
  -ms-transition: opacity .3s ease, top .25s ease;
 
-
  -o-transition: opacity .3s ease, top .25s ease;
 
-
  transition: opacity .3s ease, top .25s ease;
 
-
  z-index: 1000;
 
-
}
 
-
#cssmenu ul ul ul {
 
-
  top: 37px;
 
-
  padding-left: 5px;
 
-
}
 
-
#cssmenu ul ul li {
 
-
  position: relative;
 
-
}
 
-
#cssmenu > ul > li:hover > ul {
 
-
  left: auto;
 
-
  top: 44px;
 
-
  opacity: 1;
 
-
}
 
-
#cssmenu ul ul li:hover > ul {
 
-
  left: 170px;
 
-
  top: 0;
 
-
  opacity: 1;
 
-
}
 
-
#cssmenu ul ul li a {
 
-
  width: 130px;
 
-
  border-bottom: 1px solid #eee;
 
-
  padding: 10px 20px;
 
-
  font-size: 12px;
 
-
  color: #9ea2a5;
 
-
  background: #fff;
 
-
  -webkit-transition: all .35s ease;
 
-
  -moz-transition: all .35s ease;
 
-
  -ms-transition: all .35s ease;
 
-
  -o-transition: all .35s ease;
 
-
  transition: all .35s ease;
 
-
}
 
-
#cssmenu ul ul li:hover > a {
 
-
  background: #f6f6f6;
 
-
  color: #8c9195;
 
-
}
 
-
#cssmenu ul ul li:last-child > a,
 
-
#cssmenu ul ul li.last > a {
 
-
  border-bottom: 0;
 
-
}
 
-
.submenuArrow {
 
-
  border: 6px solid transparent;
 
-
  width: 0;
 
-
  height: 0;
 
-
  border-bottom-color: #fff;
 
-
  position: absolute;
 
-
  top: -12px;
 
-
}
 
-
#cssmenu ul ul li.has-sub::after {
 
-
  border: 4px solid transparent;
 
-
  border-left-color: #9ea2a5;
 
-
  right: 10px;
 
-
  top: 12px;
 
-
  -moz-transition: all .2s ease;
 
-
  -ms-transition: all .2s ease;
 
-
  -o-transition: all .2s ease;
 
-
  transition: all .2s ease;
 
-
  -webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
 
-
}
 
-
#cssmenu ul ul li.has-sub:hover::after {
 
-
  border-left-color: #fff;
 
-
  right: -5px;
 
-
  -webkit-transform: rotateY(180deg);
 
-
  -ms-transform: rotateY(180deg);
 
-
  -moz-transform: rotateY(180deg);
 
-
  -o-transform: rotateY(180deg);
 
-
  transform: rotateY(180deg);
 
-
}
 
-
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
 
-
#cssmenu {
 
-
width: auto;
 
-
}
 
-
#cssmenu ul {
 
-
width: auto;
 
-
}
 
-
#cssmenu .submenuArrow,
 
-
#cssmenu #indicatorContainer {
 
-
display: none;
 
-
}
 
-
#cssmenu > ul {
 
-
height: auto;
 
-
display: block;
 
-
}
 
-
#cssmenu > ul > li {
 
-
float: none;
 
-
}
 
-
#cssmenu li,
 
-
#cssmenu > ul > li {
 
-
display: none;
 
-
}
 
-
#cssmenu ul ul,
 
-
#cssmenu ul ul ul,
 
-
#cssmenu ul > li:hover > ul,
 
-
#cssmenu ul ul > li:hover > ul {
 
-
position: relative;
 
-
left: auto;
 
-
top: auto;
 
-
topacity: 1;
 
-
padding-left: 0;
 
-
}
 
-
#cssmenu ul .has-sub::after {
 
-
display: none;
 
-
}
 
-
#cssmenu ul li a {
 
-
padding: 12px 20px;
 
-
}
 
-
#cssmenu ul ul li a {
 
-
border: 0;
 
-
background: none;
 
-
width: auto;
 
-
padding: 8px 35px;
 
-
}
 
-
#cssmenu ul ul li:hover > a {
 
-
background: none;
 
-
color: #8c9195;
 
-
}
 
-
#cssmenu ul ul ul a {
 
-
padding: 8px 50px;
 
-
}
 
-
#cssmenu ul ul ul ul a {
 
-
padding: 8px 65px;
 
-
}
 
-
#cssmenu ul ul ul ul ul a {
 
-
padding: 8px 80px;
 
-
}
 
-
#cssmenu ul ul ul ul ul ul a {
 
-
padding: 8px 95px;
 
-
}
 
-
#cssmenu > ul > #menu-button {
 
-
display: block;
 
-
cursor: pointer;
 
-
}
 
-
#cssmenu #menu-button > a {
 
-
padding: 14px 20px;
 
-
}
 
-
#cssmenu ul.open li,
 
-
#cssmenu > ul.open > li {
 
-
display: block;
 
-
}
 
-
#cssmenu > ul.open > li#menu-button > a {
 
-
color: #fff;
 
-
border-bottom: 1px solid rgba(150, 150, 150, 0.1);
 
-
}
 
-
#cssmenu #menu-button::after {
 
-
display: block;
 
-
content: '';
 
-
position: absolute;
 
-
height: 3px;
 
-
width: 22px;
 
-
border-top: 2px solid #7a8189;
 
-
border-bottom: 2px solid #7a8189;
 
-
right: 20px;
 
-
top: 15px;
 
-
}
 
-
#cssmenu #menu-button::before {
 
-
display: block;
 
-
content: '';
 
-
position: absolute;
 
-
height: 3px;
 
-
width: 22px;
 
-
border-top: 2px solid #7a8189;
 
-
right: 20px;
 
-
top: 25px;
 
-
}
 
-
#cssmenu ul.open #menu-button::after,
 
-
#cssmenu ul.open #menu-button::before {
 
-
border-color: #fff;
 
-
}
 
-
}
 
-
#cssmenu {
 
-
padding-left: 200px !important;
 
-
}
 
-
 
-
/* Slider */
 
-
.rslides {
 
-
position: relative;
 
-
list-style: none;
 
-
overflow: hidden;
 
-
width: 100%;
 
-
padding: 0;
 
-
margin: 0;
 
-
}
 
-
.rslides li {
 
-
-webkit-backface-visibility: hidden;
 
-
position: absolute;
 
-
display: none;
 
-
width: 100%;
 
-
left: 0;
 
-
top: 0;
 
-
}
 
-
.rslides li:first-child {
 
-
position: relative;
 
-
display: block;
 
-
float: left;
 
-
}
 
-
.rslides img {
 
-
display: block;
 
-
height: auto;
 
-
float: left;
 
-
width: 100%;
 
-
border: 0;
 
-
}
 
-
 
</style>
</style>
 +
</head>
<body>
<body>
-
<!-- Navigation -->
+
<div id="page-contain">
-
<script>
+
<div class="page-real-main">
-
$('#cssmenu').prepend('<div id="indicatorContainer"><div id="pIndicator"><div id="cIndicator"></div></div></div>');
+
</div>
-
var activeElement = $('#cssmenu>ul>li:first');
+
-
$('#cssmenu>ul>li').each(function() {
+
-
if ($(this).hasClass('active')) {
+
-
activeElement = $(this);
+
-
}
+
-
});
+
-
var posLeft = activeElement.position().left;
+
-
var elementWidth = activeElement.width();
+
-
posLeft = posLeft + elementWidth/2 -6;
+
-
if (activeElement.hasClass('has-sub')) {
+
-
posLeft -= 6;
+
-
}
+
-
$('#cssmenu #pIndicator').css('left', posLeft);
+
-
var element, leftPos, indicator = $('#cssmenu pIndicator');
+
-
$("#cssmenu>ul>li").hover(function() {
+
-
element = $(this);
+
-
var w = element.width();
+
-
if ($(this).hasClass('has-sub'))
+
-
{
+
-
leftPos = element.position().left + w/2 - 12;
+
-
}
+
-
else {
+
-
leftPos = element.position().left + w/2 - 6;
+
-
}
+
-
$('#cssmenu #pIndicator').css('left', leftPos);
+
-
}
+
-
, function() {
+
-
$('#cssmenu #pIndicator').css('left', posLeft);
+
-
});
+
-
$('#cssmenu>ul>.has-sub>ul').append('<div class="submenuArrow"></div>');
+
-
$('#cssmenu>ul').children('.has-sub').each(function() {
+
-
var posLeftArrow = $(this).width();
+
-
posLeftArrow /= 2;
+
-
posLeftArrow -= 12;
+
-
$(this).find('.submenuArrow').css('left', posLeftArrow);
+
-
});
+
-
$('#cssmenu>ul').prepend('<li id="menu-button"><a>Menu</a></li>');
+
-
$( "#menu-button" ).click(function(){
+
-
if ($(this).parent().hasClass('open')) {
+
-
$(this).parent().removeClass('open');
+
-
}
+
-
else {
+
-
$(this).parent().addClass('open');
+
-
}
+
-
});
+
-
</script>
+
-
 
+
-
<div id='cssmenu'>
+
-
<ul>
+
-
<li class='active'><a href='https://2014hs.igem.org/Team:Ravenwood_Raptors'><span>Home</span></a></li>
+
-
<li class='active'><a href='https://2014hs.igem.org/Team:Ravenwood_Raptors/team'><span>Team</span></a>
+
-
<li class='has-sub'><a href='#'><span>Project</span></a>
+
-
<ul>
+
-
<li class='active'><a href='https://2014hs.igem.org/Team:Ravenwood_Raptors/project/overview'><span>Overview</span></a>
+
-
<li class='active'><a href='https://2014hs.igem.org/Team:Ravenwood_Raptors/Project/process'><span>Process</span></a>
+
-
<li class='active'><a href='https://2014hs.igem.org/Team:Ravenwood_Raptors/Project/results'><span>Results</span></a>
+
-
</ul>
+
-
<li class='has-sub'><a href='#'><span>Technicalities</span></a>
+
-
<ul>
+
-
<li class='active'><a href='https://2014hs.igem.org/Team:Ravenwood_Raptors/Project/Technicalities/safety'><span>Safety</span></a>
+
-
<li class='active'><a href='https://2014hs.igem.org/Team:Ravenwood_Raptors/Project/Technicalities/credits'><span>Credits</span></a>
+
-
</ul>
+
-
<li class='active'><a href='https://2014hs.igem.org/Team:Ravenwood_Raptors/sponsors'><span>sponsors</span></a>
+
-
</ul>
+
</div>
</div>
-
 
-
<!-- Logo -->
 
-
<h1>Ravenwood Raptors</h1>
 
-
 
-
<!-- Slider -->
 
-
<script>
 
-
(function(c,I,B){c.fn.responsiveSlides=function(l){var a=c.extend({auto:!0,speed:500,timeout:4E3,pager:!1,nav:!1,random:!1,pause:!1,pauseControls:!0,prevText:"Previous",nextText:"Next",maxwidth:"",navContainer:"",manualControls:"",namespace:"rslides",before:c.noop,after:c.noop},l);return this.each(function(){B++;var f=c(this),s,r,t,m,p,q,n=0,e=f.children(),C=e.size(),h=parseFloat(a.speed),D=parseFloat(a.timeout),u=parseFloat(a.maxwidth),g=a.namespace,d=g+B,E=g+"_nav "+d+"_nav",v=g+"_here",j=d+"_on",
 
-
w=d+"_s",k=c("<ul class='"+g+"_tabs "+d+"_tabs' />"),x={"float":"left",position:"relative",opacity:1,zIndex:2},y={"float":"none",position:"absolute",opacity:0,zIndex:1},F=function(){var b=(document.body||document.documentElement).style,a="transition";if("string"===typeof b[a])return!0;s=["Moz","Webkit","Khtml","O","ms"];var a=a.charAt(0).toUpperCase()+a.substr(1),c;for(c=0;c<s.length;c++)if("string"===typeof b[s[c]+a])return!0;return!1}(),z=function(b){a.before(b);F?(e.removeClass(j).css(y).eq(b).addClass(j).css(x),
 
-
n=b,setTimeout(function(){a.after(b)},h)):e.stop().fadeOut(h,function(){c(this).removeClass(j).css(y).css("opacity",1)}).eq(b).fadeIn(h,function(){c(this).addClass(j).css(x);a.after(b);n=b})};a.random&&(e.sort(function(){return Math.round(Math.random())-0.5}),f.empty().append(e));e.each(function(a){this.id=w+a});f.addClass(g+" "+d);l&&l.maxwidth&&f.css("max-width",u);e.hide().css(y).eq(0).addClass(j).css(x).show();F&&e.show().css({"-webkit-transition":"opacity "+h+"ms ease-in-out","-moz-transition":"opacity "+
 
-
h+"ms ease-in-out","-o-transition":"opacity "+h+"ms ease-in-out",transition:"opacity "+h+"ms ease-in-out"});if(1<e.size()){if(D<h+100)return;if(a.pager&&!a.manualControls){var A=[];e.each(function(a){a+=1;A+="<li><a href='#' class='"+w+a+"'>"+a+"</a></li>"});k.append(A);l.navContainer?c(a.navContainer).append(k):f.after(k)}a.manualControls&&(k=c(a.manualControls),k.addClass(g+"_tabs "+d+"_tabs"));(a.pager||a.manualControls)&&k.find("li").each(function(a){c(this).addClass(w+(a+1))});if(a.pager||a.manualControls)q=
 
-
k.find("a"),r=function(a){q.closest("li").removeClass(v).eq(a).addClass(v)};a.auto&&(t=function(){p=setInterval(function(){e.stop(!0,!0);var b=n+1<C?n+1:0;(a.pager||a.manualControls)&&r(b);z(b)},D)},t());m=function(){a.auto&&(clearInterval(p),t())};a.pause&&f.hover(function(){clearInterval(p)},function(){m()});if(a.pager||a.manualControls)q.bind("click",function(b){b.preventDefault();a.pauseControls||m();b=q.index(this);n===b||c("."+j).queue("fx").length||(r(b),z(b))}).eq(0).closest("li").addClass(v),
 
-
a.pauseControls&&q.hover(function(){clearInterval(p)},function(){m()});if(a.nav){g="<a href='#' class='"+E+" prev'>"+a.prevText+"</a><a href='#' class='"+E+" next'>"+a.nextText+"</a>";l.navContainer?c(a.navContainer).append(g):f.after(g);var d=c("."+d+"_nav"),G=d.filter(".prev");d.bind("click",function(b){b.preventDefault();b=c("."+j);if(!b.queue("fx").length){var d=e.index(b);b=d-1;d=d+1<C?n+1:0;z(c(this)[0]===G[0]?b:d);if(a.pager||a.manualControls)r(c(this)[0]===G[0]?b:d);a.pauseControls||m()}});
 
-
a.pauseControls&&d.hover(function(){clearInterval(p)},function(){m()})}}if("undefined"===typeof document.body.style.maxWidth&&l.maxwidth){var H=function(){f.css("width","100%");f.width()>u&&f.css("width",u)};H();c(I).bind("resize",function(){H()})}})}})(jQuery,this,0);
 
-
</script>
 
-
 
-
<ul class="rslides">
 
-
  <li><img src="1.jpg" alt=""></li>
 
-
  <li><img src="2.jpg" alt=""></li>
 
-
  <li><img src="3.jpg" alt=""></li>
 
-
</ul>
 
-
 
-
<script>
 
-
  $(function() {
 
-
    $(".rslides").responsiveSlides();
 
-
  });
 
-
</script>
 
</body>
</body>
-
 
</html>
</html>

Latest revision as of 16:37, 20 June 2014

Retrieved from "http://2014hs.igem.org/Team:Ravenwood_Raptors"