Team:XMU-China/CSS/SpryMenuBarHorizontal/css

From 2012.igem.org

(Difference between revisions)
 
(23 intermediate revisions not shown)
Line 1: Line 1:
-
{{Team:Calgary/Main_Header|home}}
+
<html>
 +
<style type="text/css">
-
<html>
 
-
<head>
+
@charset "UTF-8";
-
<script type="text/javascript">
+
-
$(document).ready(function(){
+
-
+
-
$('#promoter').hover(
+
-
function(){
+
-
$('#subdefault').hide();
+
-
$('#subpromoter').show();
+
-
},
+
-
function(){
+
-
$('#subpromoter').hide();
+
-
$('#subdefault').show();
+
-
});
+
-
+
-
$('#reporter').hover(
+
-
function(){
+
-
$('#subdefault').hide();
+
-
$('#subreporter').show();
+
-
},
+
-
function(){
+
-
$('#subreporter').hide();
+
-
$('#subdefault').show();
+
-
});
+
-
$('#chassis').hover(
+
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
-
function(){
+
-
$('#subdefault').hide();
+
-
$('#subchassis').show();
+
-
},
+
-
function(){
+
-
$('#subchassis').hide();
+
-
$('#subdefault').show();
+
-
});
+
-
});
+
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
-
</script>
+
-
<style>
+
/*******************************************************************************
-
h1, h2, h3, h4, h5{
+
LAYOUT INFORMATION: describes box model, positioning, z-order
-
text-decoration: none;
+
-
border: 0;
+
-
}
+
-
#titlebar{
+
*******************************************************************************/
 +
 
 +
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
 +
ul.MenuBarHorizontal
 +
{
 +
margin: 0;
 +
padding: 0;
 +
list-style-type: none;
 +
font-size: 100%;
 +
cursor: default;
 +
width: auto;
 +
}
 +
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
 +
ul.MenuBarActive
 +
{
 +
z-index: 1000;
 +
}
 +
/* Menu item containers, position children relative to this container and are a fixed width */
 +
ul.MenuBarHorizontal li
 +
{
 +
margin: 0;
 +
padding: 0;
 +
list-style-type: none;
 +
font-size: 100%;
position: relative;
position: relative;
-
margin-top: 0px;
+
text-align: left;
-
margin-left: 30px;
+
cursor: pointer;
 +
width: 8em;
 +
float: left;
 +
}
 +
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
 +
ul.MenuBarHorizontal li ul
 +
{
 +
margin: 0;
 +
padding: 0;
 +
list-style-type: none;
 +
font-size: 100%;
z-index: 1;
z-index: 1;
 +
cursor: default;
 +
width: 8.2em;
 +
position: absolute;
 +
left: -1000em;
}
}
-
 
+
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
-
#pagetitle{
+
ul.MenuBarHorizontal li ul.MenuBarSubmenuVisible
-
position: relative;
+
{
-
color: white;
+
left: auto;
-
margin-left: 50px;
+
-
margin-top: -45px;
+
-
z-index: 1;
+
-
width: 600px;
+
-
}
+
-
 
+
-
#box1{
+
-
margin-top: 24px;
+
}
}
-
+
/* Menu item containers are same fixed width as parent */
-
#box1 img.boxtop1{
+
ul.MenuBarHorizontal li ul li
-
position: relative;
+
{
-
margin-left: 30px;
+
width: 8.2em;
-
margin-top: -25px;
+
}
}
-
 
+
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
-
#box1 img.boxbottom1{
+
ul.MenuBarHorizontal li ul ul
-
position: relative;
+
{
-
margin-left: 30px;
+
position: absolute;
-
margin-top: -6px;
+
margin: -5% 0 0 95%;
 +
}
 +
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
 +
ul.MenuBarHorizontal li ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
 +
{
 +
left: auto;
 +
top: 0;
}
}
-
#box1pwrap{
+
/*******************************************************************************
-
background-image: url(https://static.igem.org/mediawiki/2011/5/5c/UCalgary_MainPageBox1Repeater.png);
+
-
background-repeat: repeat-y;
+
-
width: 600px;
+
-
height: 250px;
+
-
margin-left: 30px;
+
-
margin-top: -4px;
+
-
padding-right: 155px;
+
-
}
+
-
#box1 p{
+
DESIGN INFORMATION: describes color scheme, borders, fonts
-
padding-left: 20px;
+
-
padding-top: 15px;
+
-
padding-bottom: 2px;
+
-
float: left;
+
-
width: 560px;
+
-
color: black;
+
-
}
+
-
#likebutton{
+
*******************************************************************************/
-
float: left;
+
 
-
margin-left: 30px;
+
/* Submenu containers have borders on all sides */
-
margin-top: -270px;
+
ul.MenuBarHorizontal li ul
 +
{
 +
border: 1px solid #CCC;
}
}
-
+
/* Menu items are a light gray block with padding and no text decoration */
-
#twitterwidget{
+
ul.MenuBarHorizontal a
-
float: left;
+
{
-
margin-top: -670px;
+
display: block;
-
padding-left: 30px;
+
cursor: pointer;
 +
background-color: #EEE;
 +
padding: 0.5em 0.75em;
 +
color: #333;
 +
text-decoration: none;
}
}
-
 
+
/* Menu items that have mouse over or focus have a blue background and white text */
-
#box2{
+
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
-
background-image: url(https://static.igem.org/mediawiki/2011/0/09/UCalgary_MainPageBox2Repeater.png);
+
{
-
background-repeat: repeat-y;
+
background-color: #33C;
-
margin-left: 80px;
+
color: #FFF;
-
margin-top: -160px;
+
}
-
padding-bottom: 80px;
+
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
 +
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
 +
{
 +
background-color: #33C;
 +
color: #FFF;
}
}
-
#box2 h2{
+
/*******************************************************************************
-
margin-top: -20px;
+
-
padding-top: 40px;
+
-
padding-left: 19px;
+
-
}
+
-
#box2 p{
+
SUBMENU INDICATION: styles if there is a submenu under a given menu item
-
width: 500px;
+
-
padding-left: 20px;
+
-
color: black;
+
-
}
+
-
#chassis{
+
*******************************************************************************/
-
position: absolute;
+
-
background-image: url(https://static.igem.org/mediawiki/2011/d/d8/UCalgary2011_MainPageBacterialChassis.png);
+
-
width: 400px;
+
-
height: 206px;
+
-
background-position: top;
+
-
text-indent: -99999px;
+
-
z-index: 1;
+
-
margin-top: 75px;
+
-
margin-left: 30px;
+
-
}
+
-
+
-
#chassis:hover{
+
-
background-position: bottom;
+
-
}
+
-
+
-
#circuit{
+
-
position: absolute;
+
-
z-index: 2;
+
-
margin-top: 170px;
+
-
margin-left: 100px;
+
-
}
+
-
+
-
#promoter{
+
-
position: absolute;
+
-
background-image: url(https://static.igem.org/mediawiki/2011/1/1d/UCalgary2011_MainPageBacterialPromoter.png);
+
-
width: 90px;
+
-
height: 44px;
+
-
background-position: top;
+
-
text-indent: -99999px;
+
-
z-index: 3;
+
-
margin-top: 155px;
+
-
margin-left: 80px;
+
-
}
+
-
+
-
#promoter:hover{
+
-
background-position: bottom;
+
-
}
+
-
+
-
#reporter{
+
-
position: absolute;
+
-
background-image: url(https://static.igem.org/mediawiki/2011/3/3b/UCalgary2011_MainPageBacterialGene.png);
+
-
width: 90px;
+
-
height: 53px;
+
-
background-position: top;
+
-
text-indent: -99999px;
+
-
z-index: 4;
+
-
margin-top: 150px;
+
-
margin-left: 205px;
+
-
}
+
-
+
-
#reporter:hover{
+
-
background-position: bottom;
+
-
}
+
-
+
-
#sensorimage{
+
-
margin-left: 40px;
+
-
margin-top: 20px;
+
-
}
+
-
+
-
#pulloutbox{
+
-
position: absolute;
+
-
margin-left: -75px;
+
-
margin-top: 60px;
+
-
}
+
-
+
-
 
+
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
-
#box3{
+
ul.MenuBarHorizontal a.MenuBarItemSubmenu
-
position: relative;
+
{
-
margin-left: 230px;
+
background-image: url(SpryMenuBarDown.gif);
-
margin-top: -20px;
+
background-repeat: no-repeat;
 +
background-position: 95% 50%;
}
}
-
 
+
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
-
#box3 p, table{
+
ul.MenuBarHorizontal li ul a.MenuBarItemSubmenu
-
background-image: url(https://static.igem.org/mediawiki/2011/2/29/UCalgary_MainPageBox3Repeater.png);
+
{
-
background-repeat: repeat-y;
+
background-image: url(SpryMenuBarRight.gif);
-
width: 673px;
+
background-repeat: no-repeat;
-
padding-left: 85px;
+
background-position: 95% 50%;
-
padding-right: 20px;
+
}
-
}
+
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
-
+
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
-
#box3 table tr td{
+
{
-
padding-left: 10px;
+
background-image: url(SpryMenuBarDownHover.gif);
-
padding-right: 10px;
+
background-repeat: no-repeat;
-
padding-top: 10px;
+
background-position: 95% 50%;
-
padding-bottom: 10px;
+
}
-
margin: 0;
+
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
-
}
+
ul.MenuBarHorizontal li ul a.MenuBarItemSubmenuHover
-
+
{
-
#notsmalltable tr td img{
+
background-image: url(SpryMenuBarRightHover.gif);
-
width: 240px;
+
background-repeat: no-repeat;
-
}
+
background-position: 95% 50%;
-
+
-
#smalltable{
+
-
padding-left: 85px;
+
-
padding-right: 35px;
+
-
width: 650px;
+
-
}
+
-
+
-
#smalltable tr td img{
+
-
width: 155px;
+
-
padding-top: 10px;
+
-
padding-bottom: 5px;
+
-
padding-left: 10px;
+
-
}
+
-
+
-
+
-
#box3 h2{
+
-
background-image: url(https://static.igem.org/mediawiki/2011/2/29/UCalgary_MainPageBox3Repeater.png);
+
-
background-repeat: repeat-y;
+
-
padding-left: 95px;
+
-
padding-bottom: 20px;
+
-
margin-bottom: -5px;
+
-
}
+
-
 
+
-
#box4{
+
-
background-image:url(https://static.igem.org/mediawiki/2011/2/26/UCalgary_MainPageBox4.png);
+
-
width: 314px;
+
-
height: 264px;
+
-
position: relative;
+
-
margin-left: 620px;
+
-
margin-top: -110px;
+
}
}
-
#box4 div h3, #box4 div p{
+
/*******************************************************************************
-
color: white;
+
-
margin-left: 15px;
+
-
margin-right: 10px;
+
-
}
+
-
#box4 div h3{
+
-
padding-top: 15px;
+
-
}
+
-
+
-
#subdefault{
+
-
display:block;
+
-
}
+
-
#subpromoter{
+
-
display:none;
+
-
}
+
-
#subreporter{
+
-
display:none;
+
-
}
+
-
#subchassis{
+
-
display:none;
+
-
}
+
-
+
-
</style>
+
BROWSER HACKS: the hacks below should not be changed unless you are an expert
-
</head>
+
-
<body>
+
*******************************************************************************/
-
<a style="position: absolute; float: right; margin-left: 788px; margin-top: 11px;" href="https://2011.igem.org/Team:Calgary/Notebook/PostRegionals"><img style="width: 150px;" src="https://static.igem.org/mediawiki/2011/0/0d/UCalgary2011_Fred_Flag.png"></img></a>
+
-
<a style="position: relative; float: right; left: -46px; margin-top: 75px;" href="https://2011.igem.org/Team:Calgary/Project/DataPage"><img style="width: 150px;" src="https://static.igem.org/mediawiki/2011/7/7f/UCalgary2011_Fred_Data_Page.png"></img></a>
+
-
<div id="box1">
+
-
<img id="titlebar" src="https://static.igem.org/mediawiki/2011/4/42/UCalgary_TitleBar.png"></img>
+
-
<h1 id="pagetitle">Welcome!</h1>
+
-
<img class="boxtop1" src="https://static.igem.org/mediawiki/2011/c/cf/UCalgary_MainPageBox1.png"></img>
+
-
<div id="box1pwrap">
+
-
<p>
+
-
This year, the University of Calgary iGEM team aims to build a biosensor for naphthenic acids (NAs). NAs are organic acids that are toxic to terrestrial and aquatic wildlife. Because they are waste products of the bitumen extraction process that mines petroleum from the Alberta oil sands, the accumulation of NAs in the on-site settling ponds (tailings ponds) is an environmental concern requiring constant monitoring and eventual remediation. In addition to harming the environment, NAs also contribute to refinery equipment corrosion, directly increasing maintenance and replacement costs. Currently, sophisticated and expensive procedures, such as Fourier Transform Infrared Spectrometer (FTIR) or gas chromatography-mass spectrometry, are needed to identify and assess NA concentrations in the environment. A bacterial sensor, if developed, could greatly improve the cost- and time-efficiency of NA detection, and facilitate a workable approach for remediation.
+
-
</p>
+
-
</div>
+
-
<img class="boxbottom1" src="https://static.igem.org/mediawiki/2011/1/11/UCalgary_MainPageBox1Bottom.png"></img>
+
-
</div>
+
-
 
+
-
<div id="box4">
+
-
<div id="subdefault">
+
-
<h3>Our Naphthenic Acid Biosensor</h3>
+
-
<p><br><br>A detailed description of our project can be seen <a style="color:#42ffd9;" href="https://2011.igem.org/Team:Calgary/Project">here</a>! Below is a picture of what our final product will look like. We will have our biosensing bacterium in a container that the sample to be measured can be added to.</p><br><br><p style="font-size: 14px;"><b>Roll over the bacterium below!</b></p>
+
-
</div>
+
-
 
+
-
<div id="subpromoter">
+
-
<h3>An NA-Sensitive Promoter</h3>
+
-
<p>The most critical component of our biosensor is a naphthenic acid sensory element. This would likely be a promoter element. The major challenge for this was that given the lack of available information on NA degradation, there was no NA sensitive promoter available in the literature for us to use. We needed to develop methods to search for such an element. These included our novel “fishing” method as well as our bioinformatics approach. Click on the promoter to learn more about this!</p>
+
-
</div>
+
-
+
-
<div id="subreporter">
+
-
<h3>An Electrochemical Reporter</h3>
+
-
<p>We need a reliable reporter for our system. Given the highly variable and often turbid nature of oil sands tailings ponds however, we needed a special kind of reporter. We chose to use the <i>lacZ</i> gene, but characterize it as an electrochemical reporter. Click the gene to learn more!</p>
+
-
</div>
+
-
+
-
<div id="subchassis">
+
-
<h3>A Suitable Chassis</h3>
+
-
<p>We need a chassis in which to house our system. Given that we intended to get our sensory element from either <i>Pseudomonas</i> or microalgae, and that these organisms are both naturally present within tailings ponds, we chose to focus on them. As such, we contributed and characterized several parts for future work in microalgae, and to move plasmids efficiently from <i>E. coli</i> to <i>Pseudomonas</i>. Click the chassis to learn more!</p>
+
-
</div>
+
-
</div>
+
-
 
+
-
<div id="box2">
+
-
<h2>The Vision: A Naphthenic Acid Biosensor</h2>
+
-
<p>We plan to create a relatively small, cheap biosensing device that can respond to naphthenic acids and produce an electrochemical output. Roll over the individual parts for more details.</p>
+
-
+
-
<img id="sensorimage" src="https://static.igem.org/mediawiki/2011/f/f8/UCalgary2011_MainPageDevice.png"></img>
+
-
<img id="pulloutbox" src="https://static.igem.org/mediawiki/2011/b/b4/UCalgary2011_MainPageBacterialZoomBox.png"></img>
+
-
<img id="circuit" src="https://static.igem.org/mediawiki/2011/8/80/UCalgary2011_BacterialCircuitBase.png"></img>
+
-
<a id="promoter" href="https://2011.igem.org/Team:Calgary/Project/Promoter">Promoter</a>
+
-
<a id="reporter" href="https://2011.igem.org/Team:Calgary/Project/Reporter">Reporter</a>
+
-
<a id="chassis" href="https://2011.igem.org/Team:Calgary/Project/Chassis">Chassis</a>
+
-
 
+
-
</div>
+
-
 
+
-
<div id="box3">
+
-
<img class="boxtop3" src="https://static.igem.org/mediawiki/2011/2/22/UCalgary_MainPageBox3.png"></img>
+
-
<h2>Our Sponsors</h2>
+
-
<table id="notsmalltable">
+
-
<tr>
+
-
<td><a href="http://www.ucalgary.ca/"><img src="https://static.igem.org/mediawiki/2011/c/c1/UCalgary_UofCLogo.png"></img></a></td>
+
-
<td><a href="http://www.albertatechfutures.ca/"><img src="https://static.igem.org/mediawiki/2011/3/3f/UCalgary2011_AITF_Logo_Small.png"></img></a></td>
+
-
</tr>
+
-
</table>
+
-
<table>
+
-
<tr>
+
-
<td><a href="http://www.osli.ca/"><img style="width: 510px;" src="https://static.igem.org/mediawiki/2011/d/da/UCalgary2011_OSLI_Banner_Logo_Small.png"></img></a></td>
+
-
</tr>
+
-
</table>
+
-
<table id="smalltable" style="margin-top: -20px;">
+
-
<tr>
+
-
<td><a href="http://www.osrin.ualberta.ca/"><img src="https://static.igem.org/mediawiki/2011/9/9a/UCalgary_OSRIN_Logo.png"></img></a></td>
+
-
<td><a href="http://www.neb.com/nebecomm/default.asp"><img src="https://static.igem.org/mediawiki/2011/d/d6/UCalgary_NEB_Logo.png"></img></a></td>
+
-
<td><a href="http://www.ucalgary.ca/bhsc/"><img src="https://static.igem.org/mediawiki/2011/c/c7/UCalgary_BHSc_Logo.png"></img></a></td>
+
-
</tr>
+
-
<tr>
+
-
<td><a href="http://www.vwr.com/"><img src="https://static.igem.org/mediawiki/2011/6/65/UCalgary_VWR_Logo.png"></img></a></td>
+
-
<td><a href="http://www.nexeninc.com/"><img src="https://static.igem.org/mediawiki/2011/a/a8/UCalgary_Nexen_Logo.png"></img></a></td>
+
-
<td><a href="http://www.sarstedt.com/php/main.php"><img src="https://static.igem.org/mediawiki/2011/e/ee/UCalgary_Sarstedt_Logo.png"></a></img></td>
+
-
</tr>
+
-
<tr>
+
-
<td><a href="http://www.sigmaaldrich.com/canada-english.html?cm_mmc=Google_eBusiness-_-search-_-SIAL+Countries_Countries-_-sigma+aldrich+canada_BROAD&cm_guid=1-_-100000000000000025748-_-7408517799"><img src="https://static.igem.org/mediawiki/2011/8/8a/UCalgary_Sigma_Aldrich_Logo.png"></img></a></td>
+
-
<td><a href="http://www.mhc.ab.ca/"><img src="https://static.igem.org/mediawiki/2011/7/78/UCalgary2011_Medicine_Hat_College_Logo.png"></img></a></td>
+
-
</tr>
+
-
</table>
+
-
<img class="boxbottom3" src="https://static.igem.org/mediawiki/2011/6/6c/UCalgary_MainPageBox3Bottom.png"></img>
+
-
</div>
+
-
 
+
-
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
+
-
<div id="twitterwidget">
+
-
<script>
+
-
new TWTR.Widget({
+
-
  version: 2,
+
-
  type: 'profile',
+
-
  rpp: 5,
+
-
  interval: 30000,
+
-
  width: 250,
+
-
  height: 300,
+
-
  theme: {
+
-
    shell: {
+
-
      background: '#006ebd',
+
-
      color: '#ffffff'
+
-
    },
+
-
    tweets: {
+
-
      background: '#003961',
+
-
      color: '#ffffff',
+
-
      links: '#42ffd9'
+
-
    }
+
-
  },
+
-
  features: {
+
-
    scrollbar: true,
+
-
    loop: false,
+
-
    live: false,
+
-
    hashtags: true,
+
-
    timestamp: true,
+
-
    avatars: false,
+
-
    behavior: 'all'
+
-
  }
+
-
}).render().setUser('iGEMCalgary').start();
+
-
</script>
+
-
</div>
+
-
 
+
-
<a id="likebutton" href="http://www.facebook.com/pages/Calgary-iGEM/215971681759173">
+
-
<img src="https://static.igem.org/mediawiki/2011/5/57/UCalgary_FacebookLikeButton_Small.png"></img>
+
-
</a>
+
-
 
+
-
</body>
+
 +
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
 +
ul.MenuBarHorizontal iframe
 +
{
 +
position: absolute;
 +
z-index: 1010;
 +
filter:alpha(opacity:0.1);
 +
}
 +
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
 +
@media screen, projection
 +
{
 +
ul.MenuBarHorizontal li.MenuBarItemIE
 +
{
 +
display: inline;
 +
f\loat: left;
 +
background: #FFF;
 +
}
 +
}
 +
</style>
</html>
</html>

Latest revision as of 04:55, 6 August 2012

Retrieved from "http://2012.igem.org/Team:XMU-China/CSS/SpryMenuBarHorizontal/css"