Team:IBB Pune/style

From 2009.igem.org

(Difference between revisions)
Line 1: Line 1:
-
/* Nav Menu
+
/@charset "UTF-8";
-
-------------------------------------------------------------------------------------- */
+
 
-
ul#nav {
+
/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */
-
  height: 43px;
+
 
-
  left: 0;
+
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
-
  list-style: none;
+
 
-
  margin: 0 0 0 20px;
+
/*******************************************************************************
-
  min-width: 750px;
+
 
-
  padding: 0;
+
LAYOUT INFORMATION: describes box model, positioning, z-order
-
  position: absolute;
+
 
-
  top: 190px;
+
*******************************************************************************/
-
  width: 96%;
+
 
 +
/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
 +
ul.MenuBarVertical
 +
{
 +
margin: 0;
 +
padding: 0;
 +
list-style-type: none;
 +
font-size: 100%;
 +
cursor: default;
 +
width: 8em;
}
}
-
body.homepage ul#nav {
+
/* 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 */
-
  top: 328px;
+
ul.MenuBarActive
 +
{
 +
z-index: 1000;
}
}
-
ul#nav li {
+
/* Menu item containers, position children relative to this container and are same fixed width as parent */
-
  display: block;
+
ul.MenuBarVertical li
-
  float: left;
+
{
-
  margin-right: 1%;
+
margin: 0;
-
  padding: 0;
+
padding: 0;
-
  position: relative;
+
list-style-type: none;
-
  width: 19%;
+
font-size: 100%;
-
  z-index: 5;
+
position: relative;
 +
text-align: left;
 +
cursor: pointer;
 +
width: 8em;
}
}
-
ul#nav li:last-child {
+
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
-
  margin-right: 0;
+
ul.MenuBarVertical ul
 +
{
 +
margin: -5% 0 0 95%;
 +
padding: 0;
 +
list-style-type: none;
 +
font-size: 100%;
 +
position: absolute;
 +
z-index: 1020;
 +
cursor: default;
 +
width: 8.2em;
 +
left: -1000em;
 +
top: 0;
}
}
-
ul#nav li a {
+
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
-
  background-color: #393939;
+
ul.MenuBarVertical ul.MenuBarSubmenuVisible
-
  border: 1px solid #545353;
+
{
-
  display: block;
+
left: 0;
-
  font-size: 15px;
+
-
  line-height: 41px;
+
-
  text-align: center;
+
-
  text-decoration: none;
+
-
  text-transform: uppercase;
+
}
}
-
ul#nav li:hover a,
+
/* Menu item containers are same fixed width as parent */
-
ul#nav li.hover a,
+
ul.MenuBarVertical ul li
-
ul#nav li a:hover,
+
{
-
body.homepage ul#nav li.homepage a,
+
width: 8.2em;
-
body.rational ul#nav li.rational a,
+
-
body.singularity ul#nav li.singularity a,
+
-
body.other ul#nav li.other a,
+
-
body.contact ul#nav li.contact a {
+
-
  background-color: #fff;
+
-
  border-color: #fff;
+
-
  color: #000;
+
}
}
-
/* ------------------------------ Dropdowns */
+
 
-
ul#nav li ul {
+
/*******************************************************************************
-
  background-color: #fff;
+
 
-
  border-left: 1px solid #ccc;
+
DESIGN INFORMATION: describes color scheme, borders, fonts
-
  border-right: 1px solid #ccc;
+
 
-
  border-bottom: 1px solid #ccc;
+
*******************************************************************************/
-
  display: none;
+
 
-
  left: -1px;
+
/* Outermost menu container has borders on all sides */
-
  margin: 0;
+
ul.MenuBarVertical
-
  padding: 0 5% 5px;
+
{
-
  position: absolute;
+
border: 1px solid #CCC;
-
  top: 43px;
+
-
  width: 90%;
+
-
  z-index: 10;
+
}
}
-
ul#nav li:hover ul,
+
/* Submenu containers have borders on all sides */
-
ul#nav li.hover ul {
+
ul.MenuBarVertical ul
-
  display: block;
+
{
 +
border: 1px solid #CCC;
}
}
-
ul#nav li ul li {
+
/* Menu items are a light gray block with padding and no text decoration */
-
  display: block;
+
ul.MenuBarVertical a
-
  float: none;
+
{
-
  margin: 0;
+
display: block;
-
  width: 100%;
+
cursor: pointer;
 +
background-color: #EEE;
 +
padding: 0.5em 0.75em;
 +
color: #333;
 +
text-decoration: none;
}
}
-
ul#nav li ul li a {
+
/* Menu items that have mouse over or focus have a blue background and white text */
-
  background: url(/assets/images/nav-doc.gif) no-repeat 5px 7px;
+
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
-
  border-top: none !important;
+
{
-
  border-left: none !important;
+
background-color: #33C;
-
  border-right: none !important;
+
color: #FFF;
-
  border-bottom: 1px solid #d8d8d8 !important;
+
-
  color: #000;
+
-
  font-size: 12px;
+
-
  line-height: 16px;
+
-
  padding: 7px 10px 7px 22px;
+
-
  text-align: left;
+
-
  text-transform: none;
+
}
}
-
ul#nav li ul li:last-child a {
+
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
-
  border-bottom: none !important;
+
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
 +
{
 +
background-color: #33C;
 +
color: #FFF;
}
}
-
ul#nav li ul li a:hover {
+
 
-
  background-color: #efefef !important;
+
/*******************************************************************************
 +
 
 +
SUBMENU INDICATION: styles if there is a submenu under a given menu item
 +
 
 +
*******************************************************************************/
 +
 
 +
/* 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%) */
 +
ul.MenuBarVertical a.MenuBarItemSubmenu
 +
{
 +
background-image: url(SpryMenuBarRight.gif);
 +
background-repeat: no-repeat;
 +
background-position: 95% 50%;
 +
}
 +
 
 +
/* 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.MenuBarVertical a.MenuBarItemSubmenuHover
 +
{
 +
background-image: url(SpryMenuBarRightHover.gif);
 +
background-repeat: no-repeat;
 +
background-position: 95% 50%;
 +
}
 +
 
 +
/*******************************************************************************
 +
 
 +
BROWSER HACKS: the hacks below should not be changed unless you are an expert
 +
 
 +
*******************************************************************************/
 +
 
 +
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
 +
ul.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE
 +
{
 +
display: inline;
 +
f\loat: left;
 +
background: #FFF;
 +
}
}
}

Revision as of 14:13, 5 June 2009

/@charset "UTF-8";

/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/******************************************************************************* 

LAYOUT INFORMATION: describes box model, positioning, z-order

*******************************************************************************/

/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */ ul.MenuBarVertical { margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: 8em; } /* 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 same fixed width as parent */ ul.MenuBarVertical li { margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; width: 8em; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarVertical ul { margin: -5% 0 0 95%; padding: 0; list-style-type: none; font-size: 100%; position: absolute; z-index: 1020; cursor: default; width: 8.2em; left: -1000em; top: 0; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarVertical ul.MenuBarSubmenuVisible { left: 0; } /* Menu item containers are same fixed width as parent */ ul.MenuBarVertical ul li { width: 8.2em; }

/******************************************************************************* 

DESIGN INFORMATION: describes color scheme, borders, fonts

*******************************************************************************/

/* Outermost menu container has borders on all sides */ ul.MenuBarVertical { border: 1px solid #CCC; } /* Submenu containers have borders on all sides */ ul.MenuBarVertical ul { border: 1px solid #CCC; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarVertical a { display: block; 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 */ ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus { background-color: #33C; color: #FFF; } /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible { background-color: #33C; color: #FFF; }

/******************************************************************************* 

SUBMENU INDICATION: styles if there is a submenu under a given menu item

*******************************************************************************/

/* 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%) */ ul.MenuBarVertical a.MenuBarItemSubmenu { background-image: url(SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: 95% 50%; }

/* 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.MenuBarVertical a.MenuBarItemSubmenuHover { background-image: url(SpryMenuBarRightHover.gif); background-repeat: no-repeat; background-position: 95% 50%; }

/******************************************************************************* 

BROWSER HACKS: the hacks below should not be changed unless you are an expert

*******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ ul.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE { display: inline; f\loat: left; background: #FFF; } }

Retrieved from "http://2009.igem.org/Team:IBB_Pune/style"