Template:Caltech Header

From 2012.igem.org

(Difference between revisions)
m
Line 3: Line 3:
<!-- This is a comment in html -->
<!-- This is a comment in html -->
-
<!-- Begin the internal style sheet -->
+
<!-- Link to the style sheet -->
     <link rel="stylesheet" href="https://2011.igem.org/Team:Caltech/stylesheet?action=raw&ctype=text/css" type="text/css" />
     <link rel="stylesheet" href="https://2011.igem.org/Team:Caltech/stylesheet?action=raw&ctype=text/css" type="text/css" />
 +
 +
 +
/*-----------------------------------------------------------------------------------------------*/
 +
div.MenuBar ul li ul.DropDownMenu {
 +
  display: none; /* Hides all drop-down menus. */
 +
 +
}
 +
/*
 +
li:hover works in IE7 and FF2.
 +
a:hover works in IE6 and FF2.
 +
a:hover breaks li:hover in FF2.
 +
*/
 +
div.MenuBar ul li:hover ul.DropDownMenu li ul.SideMenu,
 +
div.MenuBar ul li a:hover ul.DropDownMenu li a ul.SideMenu {
 +
  display: none; /* Hides all side menus. */
 +
}
 +
/*------------------------------------------------------------------------------------- Menu Bar */
 +
div.MenuBar {
 +
  font: arial, helvetica, sans-serif;
 +
  height: 30px;
 +
  width: 910px;
 +
  /*width: 100%*/
 +
  margin: 0;
 +
  border-top: 0;
 +
  border-right: 0;
 +
  border-left: 0;
 +
  padding: 0;
 +
  background: black;
 +
 
 +
}
 +
div.MenuBar ul {
 +
  font: arial, helvetica, sans-serif;
 +
  text-align: center;
 +
  list-style-type: none;
 +
  margin: 0.5em auto;
 +
  border: 0;
 +
  padding: 0;
 +
  background: black;
 +
}
 +
div.MenuBar ul li {
 +
  font: arial, helvetica, sans-serif;
 +
  display: block;
 +
  padding: 0;
 +
  margin: 0;
 +
  font-size: 1.3em;
 +
  float: left;
 +
  background: black;
 +
  text-align: center;
 +
  width: 107px;
 +
  position: relative; /* Sets the positioning context for each drop-down menu. */
 +
}
 +
 +
div.MenuBar ul li a {
 +
  font: arial, helvetica, sans-serif;
 +
  display: block;
 +
  background: black;
 +
  height: 22px; /* Keep height + padding-top + padding-bottom sync with the menu bar height. */
 +
  color: #ffffff;
 +
  padding-top: 4px;
 +
  padding-bottom: 4px;
 +
  padding-left: 1em; /* Sets the left space between top-level items. */
 +
  padding-right: 1em; /* Sets the right space between top-level items. */
 +
  text-decoration: none;
 +
}
 +
 +
/*------------------------------------------------------------------------------ Drop-Down Menus */
 +
div.MenuBar ul li:hover ul.DropDownMenu,
 +
div.MenuBar ul li a:hover ul.DropDownMenu {
 +
  display: block;
 +
  width: 10em; /* Drop-down menu width.
 +
                  Use MenuTailor.css to customize. */
 +
  height: 1em;
 +
  padding: 1px; /* Sets the drop-down menu "effective border" width. */
 +
  position: absolute;
 +
  top: 23px; /* Places the drop-down menu under the menu bar.
 +
                Keep it sync with the menu bar height. */
 +
  left: 0; /* Aligns the drop-down menu to its top-level item. */
 +
  background-color: black; /* Selected item. */
 +
  color: #FFFFFF;
 +
 +
}
 +
div.MenuBar ul li:hover ul.DropDownMenu li a,
 +
div.MenuBar ul li a:hover ul.DropDownMenu li a {
 +
  width: 10em; /* Keep it sync with the drop-down menu width.
 +
                            Use MenuTailor.css to customize. */
 +
  height: 1em;
 +
  padding-left: 0;
 +
  padding-right: 0;
 +
  background-color: black; /* Selected item. */
 +
  color: #FFFFFF;
 +
}
 +
ul.DropDownMenu li a span {
 +
  display: block;
 +
  padding-left: 0.75em; /* Sets the left space of each drop-down menu item. */
 +
  padding-right: 0.25em; /* Sets the right space of each drop-down menu item. */
 +
  text-align: right; /* Aligns the >> symbol to the right. */
 +
}
 +
ul.DropDownMenu li a span span {
 +
  float: left; /* Aligns the text (back) to the left. */
 +
  font: 12px arial, helvetica, sans-serif; /* Required for IE55. */
 +
  height: 20px;
 +
  color: #FFFFFF;
 +
}
 +
/*----------------------------------------------------------------------------------- Side Menus */
 +
div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu,
 +
div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu {
 +
  display: block;
 +
  width: 11em; /* Side menu width.
 +
                  Use MenuTailor.css to customize. */
 +
  padding: 1px; /* Sets the side menu "effective border" width. */
 +
  position: absolute;
 +
  top: -1px; /* Aligns the side menu to its drop-down menu item.
 +
                Keep it sync with the side menu "effective border" width. */
 +
  left: 13em; /* Places the side menu to the right of the drop-down menu.
 +
                            Keep it sync with the drop-down menu width.
 +
                            Use MenuTailor.css to customize. */
 +
}
 +
div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu li a,
 +
div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a {
 +
  width: 11em; /* Keep it sync with the side menu width.
 +
                            Use MenuTailor.css to customize. */
 +
  font: 12px arial, helvetica, sans-serif; /* Required for IE55. */
 +
  left: 13em; /* Places the side menu to the right of the drop-down menu.
 +
                            Keep it sync with the drop-down menu width.
 +
                            Use MenuTailor.css to customize. */
 +
}
 +
div.MenuBar ul li ul.DropDownMenu li ul.SideMenu li a span {
 +
  padding-left: 1.5em; /* Sets the left space of each side menu item. */
 +
  padding-right: 0.5em; /* Sets the right space of each side menu item. */
 +
  text-align: left;
 +
  font: 12px arial, helvetica, sans-serif; /* Required for IE55. */
 +
  left: 13em; /* Places the side menu to the right of the drop-down menu.
 +
                            Keep it sync with the drop-down menu width.
 +
                            Use MenuTailor.css to customize. */
 +
}
 +
/*----------------------------------------------------------------------------- Browser Specific */
 +
* html div.MenuBar ul li a {
 +
  float: left; /* Required for IE55 and IE6.
 +
                            Breaks O9.
 +
                            Hidden (* html) from non-IE browsers. */
 +
}
 +
* html ul.DropDownMenu li a:hover {
 +
  cursor: hand; /* Required for IE55.
 +
                  Hidden (* html) from non-IE browsers. */
 +
}
 +
ul.DropDownMenu li a:hover {
 +
  cursor: pointer; /* Required for IE6 and IE7.
 +
                      Hidding it (* html) from non-IE browsers breaks IE7!
 +
}
 +
* html div.MenuBar a:hover {
 +
  text-decoration: none; /* Required for IE55 and IE6.
 +
                            Hidden (* html) from non-IE browsers. */
 +
}
 +
* html div.MenuBar ul li table,
 +
* html div.MenuBar ul li table td {
 +
  border: 0; /* Required for IE55 and IE6.
 +
                Hidden (* html) from non-IE browsers. */
 +
}
 +
/*------------------------------------------------------------------------------- Default Colors */
 +
div.MenuBar {
 +
  background-color: Menu;
 +
  border-bottom: 1px solid ButtonShadow;
 +
}
 +
div.MenuBar a {
 +
  background-color: Menu; /* Top-level unselected items. */
 +
  color: MenuText;
 +
}
 +
div.MenuBar ul li:hover a,
 +
div.MenuBar ul li a:hover {
 +
  color: #ea7f16;
 +
  background-color: Highlight; /* Top-level selected item. */
 +
  color: HighlightText;
 +
}
 +
/*...............................................................................................*/
 +
div.MenuBar ul li:hover ul.DropDownMenu,
 +
div.MenuBar ul li a:hover ul.DropDownMenu {
 +
  background-color: ButtonShadow; /* Sets the drop-down menu "effective border" color. */
 +
}
 +
div.MenuBar ul li:hover ul.DropDownMenu li a,
 +
div.MenuBar ul li a:hover ul.DropDownMenu li a {
 +
  background-color: Menu;  Drop-down menu unselected items.
 +
                            Sets the drop-down menu "effective background" color. */
 +
  color: MenuText;
 +
}
 +
div.MenuBar ul li:hover ul.DropDownMenu li:hover a,
 +
div.MenuBar ul li a:hover ul.DropDownMenu li a:hover {
 +
  background-color: Highlight; /* Drop-down menu selected item. */
 +
  color: HighlightText;
 +
}
 +
/*...............................................................................................*/
 +
div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu,
 +
div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu {
 +
  background-color: ButtonShadow; /* Sets the side menu "effective border" color. */
 +
}
 +
div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu li a,
 +
div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a {
 +
  background-color: Menu; /* Side menu unselected items.
 +
                            Sets the side menu "effective background" color. */
 +
  color: MenuText;
 +
}
 +
div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu li a:hover,
 +
div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a:hover {
 +
  background-color: Highlight; /* Side menu selected item. */
 +
  color: HighlightText;
 +
}
 +
/*-----------------------------------------------------------------------------------------------*/
 +
/*Script-Free 3-Level Menu 1.2 Tailor
 +
  www.CesarDaniel.info
 +
/*-------------------------------------------------------------------------------------- General */
 +
body {
 +
  background:  style="color:#bb4400";
 +
  color: black;
 +
  margin: 0;
 +
  border: 0;
 +
  padding: 0;
 +
}
 +
 +
 +
div.MenuBar {
 +
  font: 13px arial, helvetica, sans-serif;
 +
}
 +
div.MenuBar ul {
 +
  font: 13px arial, helvetica, sans-serif; /* Required for IE55. */
 +
}
 +
/*--------------------------------------------------------------------------------------- Colors */
 +
div.MenuBar {
 +
  background-color: black; /* Selected item. */
 +
  color: #FFFFFF;
 +
  border-bottom: 1px solid ButtonShadow;
 +
}
 +
div.MenuBar a,
 +
div.MenuBar ul li:hover ul.DropDownMenu li a,
 +
div.MenuBar ul li a:hover ul.DropDownMenu li a,
 +
div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu li a,
 +
div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a {
 +
  background-color: black; /* Selected item. */
 +
  color: #FFFFFF;
 +
}
 +
div.MenuBar ul li:hover a,
 +
div.MenuBar ul li a:hover,
 +
div.MenuBar ul li:hover ul.DropDownMenu li:hover a,
 +
div.MenuBar ul li a:hover ul.DropDownMenu li a:hover,
 +
div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu li a:hover,
 +
div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a:hover {
 +
  background-color: #00b0e6; /* Selected item. */
 +
  color: #FFFFFF;
 +
}
 +
div.MenuBar ul li:hover ul.DropDownMenu,
 +
div.MenuBar ul li a:hover ul.DropDownMenu,
 +
div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu,
 +
div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu {
 +
  background-color: ButtonShadow; /* Sets the drop-down and side menus "effective border" color. */
 +
}
 +
/*--------------------------------------------------------------------------------------- Widths */
 +
/*
 +
 +
/*
 +
Menu Bar 1
 +
Drop-Down Menu #2
 +
*/
 +
div.MenuBar#navi ul li:hover ul.DropDownMenu#MB1-DDM4,
 +
div.MenuBar#navi ul li a:hover ul.DropDownMenu#MB1-DDM4,
 +
div.MenuBar#navi ul li:hover ul.DropDownMenu#MB1-DDM4 li a,
 +
div.MenuBar#navi ul li a:hover ul.DropDownMenu#MB1-DDM4 li a {
 +
  width: 11em; /* Drop-down menu width. */
 +
}
 +
div.MenuBar#navi ul li:hover ul.DropDownMenu#MB1-DDM5,
 +
div.MenuBar#navi ul li a:hover ul.DropDownMenu#MB1-DDM5,
 +
div.MenuBar#navi ul li:hover ul.DropDownMenu#MB1-DDM5 li a,
 +
div.MenuBar#navi ul li a:hover ul.DropDownMenu#MB1-DDM5 li a {
 +
  width: 12em; /* Drop-down menu width. */
 +
}
 +
 +
/*...............................................................................................*/
 +
/*
 +
Menu Bar 1
 +
Drop-Down Menu #2
 +
Side Menu #1
 +
*/
 +
div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM1,
 +
div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM1 {
 +
  left: 15.5em !important; /* Places the side menu to the right of the drop-down menu.
 +
                            Keep it sync with the drop-down menu width. */
 +
}
 +
div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM1,
 +
div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM1,
 +
div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM1 li a,
 +
div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM1 li a {
 +
  width: 10em; /* Side menu width. */
 +
}
 +
/*...............................................................................................*/
 +
/*
 +
Menu Bar 1
 +
Drop-Down Menu #2
 +
Side Menu #2
 +
*/
 +
div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM2,
 +
div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM2 {
 +
  left: 15.5em  !important; /* Places the side menu to the right of the drop-down menu.
 +
                            Keep it sync with the drop-down menu width. */
 +
}
 +
div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM2,
 +
div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM2,
 +
div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM2 li a,
 +
div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM2 li a {
 +
  width: 10em; /* Side menu width. */
 +
}
 +
/*...............................................................................................*/
 +
/*
 +
Menu Bar 1
 +
Drop-Down Menu #2
 +
Side Menu #3
 +
*/
 +
div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM3,
 +
div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM3 {
 +
  left: 15.5em  !important; /* Places the side menu to the right of the drop-down menu.
 +
                            Keep it sync with the drop-down menu width. */
 +
}
 +
div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM3,
 +
div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM3,
 +
div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM3 li a,
 +
div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM3 li a {
 +
  width: 10em; /* Side menu width. */
 +
}
 +
/*...............................................................................................*/
 +
</head>
</head>

Revision as of 18:36, 9 July 2012

/*-----------------------------------------------------------------------------------------------*/ div.MenuBar ul li ul.DropDownMenu { display: none; /* Hides all drop-down menus. */ } /* li:hover works in IE7 and FF2. a:hover works in IE6 and FF2. a:hover breaks li:hover in FF2. */ div.MenuBar ul li:hover ul.DropDownMenu li ul.SideMenu, div.MenuBar ul li a:hover ul.DropDownMenu li a ul.SideMenu { display: none; /* Hides all side menus. */ } /*------------------------------------------------------------------------------------- Menu Bar */ div.MenuBar { font: arial, helvetica, sans-serif; height: 30px; width: 910px; /*width: 100%*/ margin: 0; border-top: 0; border-right: 0; border-left: 0; padding: 0; background: black; } div.MenuBar ul { font: arial, helvetica, sans-serif; text-align: center; list-style-type: none; margin: 0.5em auto; border: 0; padding: 0; background: black; } div.MenuBar ul li { font: arial, helvetica, sans-serif; display: block; padding: 0; margin: 0; font-size: 1.3em; float: left; background: black; text-align: center; width: 107px; position: relative; /* Sets the positioning context for each drop-down menu. */ } div.MenuBar ul li a { font: arial, helvetica, sans-serif; display: block; background: black; height: 22px; /* Keep height + padding-top + padding-bottom sync with the menu bar height. */ color: #ffffff; padding-top: 4px; padding-bottom: 4px; padding-left: 1em; /* Sets the left space between top-level items. */ padding-right: 1em; /* Sets the right space between top-level items. */ text-decoration: none; } /*------------------------------------------------------------------------------ Drop-Down Menus */ div.MenuBar ul li:hover ul.DropDownMenu, div.MenuBar ul li a:hover ul.DropDownMenu { display: block; width: 10em; /* Drop-down menu width. Use MenuTailor.css to customize. */ height: 1em; padding: 1px; /* Sets the drop-down menu "effective border" width. */ position: absolute; top: 23px; /* Places the drop-down menu under the menu bar. Keep it sync with the menu bar height. */ left: 0; /* Aligns the drop-down menu to its top-level item. */ background-color: black; /* Selected item. */ color: #FFFFFF; } div.MenuBar ul li:hover ul.DropDownMenu li a, div.MenuBar ul li a:hover ul.DropDownMenu li a { width: 10em; /* Keep it sync with the drop-down menu width. Use MenuTailor.css to customize. */ height: 1em; padding-left: 0; padding-right: 0; background-color: black; /* Selected item. */ color: #FFFFFF; } ul.DropDownMenu li a span { display: block; padding-left: 0.75em; /* Sets the left space of each drop-down menu item. */ padding-right: 0.25em; /* Sets the right space of each drop-down menu item. */ text-align: right; /* Aligns the >> symbol to the right. */ } ul.DropDownMenu li a span span { float: left; /* Aligns the text (back) to the left. */ font: 12px arial, helvetica, sans-serif; /* Required for IE55. */ height: 20px; color: #FFFFFF; } /*----------------------------------------------------------------------------------- Side Menus */ div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu, div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu { display: block; width: 11em; /* Side menu width. Use MenuTailor.css to customize. */ padding: 1px; /* Sets the side menu "effective border" width. */ position: absolute; top: -1px; /* Aligns the side menu to its drop-down menu item. Keep it sync with the side menu "effective border" width. */ left: 13em; /* Places the side menu to the right of the drop-down menu. Keep it sync with the drop-down menu width. Use MenuTailor.css to customize. */ } div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu li a, div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a { width: 11em; /* Keep it sync with the side menu width. Use MenuTailor.css to customize. */ font: 12px arial, helvetica, sans-serif; /* Required for IE55. */ left: 13em; /* Places the side menu to the right of the drop-down menu. Keep it sync with the drop-down menu width. Use MenuTailor.css to customize. */ } div.MenuBar ul li ul.DropDownMenu li ul.SideMenu li a span { padding-left: 1.5em; /* Sets the left space of each side menu item. */ padding-right: 0.5em; /* Sets the right space of each side menu item. */ text-align: left; font: 12px arial, helvetica, sans-serif; /* Required for IE55. */ left: 13em; /* Places the side menu to the right of the drop-down menu. Keep it sync with the drop-down menu width. Use MenuTailor.css to customize. */ } /*----------------------------------------------------------------------------- Browser Specific */ * html div.MenuBar ul li a { float: left; /* Required for IE55 and IE6. Breaks O9. Hidden (* html) from non-IE browsers. */ } * html ul.DropDownMenu li a:hover { cursor: hand; /* Required for IE55. Hidden (* html) from non-IE browsers. */ } ul.DropDownMenu li a:hover { cursor: pointer; /* Required for IE6 and IE7. Hidding it (* html) from non-IE browsers breaks IE7! } * html div.MenuBar a:hover { text-decoration: none; /* Required for IE55 and IE6. Hidden (* html) from non-IE browsers. */ } * html div.MenuBar ul li table, * html div.MenuBar ul li table td { border: 0; /* Required for IE55 and IE6. Hidden (* html) from non-IE browsers. */ } /*------------------------------------------------------------------------------- Default Colors */ div.MenuBar { background-color: Menu; border-bottom: 1px solid ButtonShadow; } div.MenuBar a { background-color: Menu; /* Top-level unselected items. */ color: MenuText; } div.MenuBar ul li:hover a, div.MenuBar ul li a:hover { color: #ea7f16; background-color: Highlight; /* Top-level selected item. */ color: HighlightText; } /*...............................................................................................*/ div.MenuBar ul li:hover ul.DropDownMenu, div.MenuBar ul li a:hover ul.DropDownMenu { background-color: ButtonShadow; /* Sets the drop-down menu "effective border" color. */ } div.MenuBar ul li:hover ul.DropDownMenu li a, div.MenuBar ul li a:hover ul.DropDownMenu li a { background-color: Menu; Drop-down menu unselected items. Sets the drop-down menu "effective background" color. */ color: MenuText; } div.MenuBar ul li:hover ul.DropDownMenu li:hover a, div.MenuBar ul li a:hover ul.DropDownMenu li a:hover { background-color: Highlight; /* Drop-down menu selected item. */ color: HighlightText; } /*...............................................................................................*/ div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu, div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu { background-color: ButtonShadow; /* Sets the side menu "effective border" color. */ } div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu li a, div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a { background-color: Menu; /* Side menu unselected items. Sets the side menu "effective background" color. */ color: MenuText; } div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu li a:hover, div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a:hover { background-color: Highlight; /* Side menu selected item. */ color: HighlightText; } /*-----------------------------------------------------------------------------------------------*/ /*Script-Free 3-Level Menu 1.2 Tailor www.CesarDaniel.info /*-------------------------------------------------------------------------------------- General */ body { background: style="color:#bb4400"; color: black; margin: 0; border: 0; padding: 0; } div.MenuBar { font: 13px arial, helvetica, sans-serif; } div.MenuBar ul { font: 13px arial, helvetica, sans-serif; /* Required for IE55. */ } /*--------------------------------------------------------------------------------------- Colors */ div.MenuBar { background-color: black; /* Selected item. */ color: #FFFFFF; border-bottom: 1px solid ButtonShadow; } div.MenuBar a, div.MenuBar ul li:hover ul.DropDownMenu li a, div.MenuBar ul li a:hover ul.DropDownMenu li a, div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu li a, div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a { background-color: black; /* Selected item. */ color: #FFFFFF; } div.MenuBar ul li:hover a, div.MenuBar ul li a:hover, div.MenuBar ul li:hover ul.DropDownMenu li:hover a, div.MenuBar ul li a:hover ul.DropDownMenu li a:hover, div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu li a:hover, div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a:hover { background-color: #00b0e6; /* Selected item. */ color: #FFFFFF; } div.MenuBar ul li:hover ul.DropDownMenu, div.MenuBar ul li a:hover ul.DropDownMenu, div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu, div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu { background-color: ButtonShadow; /* Sets the drop-down and side menus "effective border" color. */ } /*--------------------------------------------------------------------------------------- Widths */ /* /* Menu Bar 1 Drop-Down Menu #2 */ div.MenuBar#navi ul li:hover ul.DropDownMenu#MB1-DDM4, div.MenuBar#navi ul li a:hover ul.DropDownMenu#MB1-DDM4, div.MenuBar#navi ul li:hover ul.DropDownMenu#MB1-DDM4 li a, div.MenuBar#navi ul li a:hover ul.DropDownMenu#MB1-DDM4 li a { width: 11em; /* Drop-down menu width. */ } div.MenuBar#navi ul li:hover ul.DropDownMenu#MB1-DDM5, div.MenuBar#navi ul li a:hover ul.DropDownMenu#MB1-DDM5, div.MenuBar#navi ul li:hover ul.DropDownMenu#MB1-DDM5 li a, div.MenuBar#navi ul li a:hover ul.DropDownMenu#MB1-DDM5 li a { width: 12em; /* Drop-down menu width. */ } /*...............................................................................................*/ /* Menu Bar 1 Drop-Down Menu #2 Side Menu #1 */ div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM1, div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM1 { left: 15.5em !important; /* Places the side menu to the right of the drop-down menu. Keep it sync with the drop-down menu width. */ } div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM1, div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM1, div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM1 li a, div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM1 li a { width: 10em; /* Side menu width. */ } /*...............................................................................................*/ /* Menu Bar 1 Drop-Down Menu #2 Side Menu #2 */ div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM2, div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM2 { left: 15.5em !important; /* Places the side menu to the right of the drop-down menu. Keep it sync with the drop-down menu width. */ } div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM2, div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM2, div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM2 li a, div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM2 li a { width: 10em; /* Side menu width. */ } /*...............................................................................................*/ /* Menu Bar 1 Drop-Down Menu #2 Side Menu #3 */ div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM3, div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM3 { left: 15.5em !important; /* Places the side menu to the right of the drop-down menu. Keep it sync with the drop-down menu width. */ } div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM3, div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM3, div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM3 li a, div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM3 li a { width: 10em; /* Side menu width. */ } /*...............................................................................................*/

Retrieved from "http://2012.igem.org/Template:Caltech_Header"