Team:Ravenwood Raptors

From 2014hs.igem.org

(Difference between revisions)
 
(147 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#menubar {
+
-
background-image: url('http://oi59.tinypic.com/2qvgkcw.jpg !important');
+
-
}
+
-
div#content{
+
-
background-image: url('http://oi59.tinypic.com/2qvgkcw.jpg !important');
+
-
}
+
-
li#pt-login {
+
-
color: #FFFFFF !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;
 
-
}
 
-
 
</style>
</style>
 +
</head>
<body>
<body>
-
<!-- jQuery -->
+
<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>
+
-
 
+
-
<!-- Logo -->
+
-
<h1>Ravenwood Raptors</h1>
+
-
 
+
-
<!-- Navigation -->
+
-
<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/Idea'><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>
</body>
</body>
-
 
</html>
</html>

Latest revision as of 16:37, 20 June 2014

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