|
|
| Line 1: |
Line 1: |
| - | * The outermost container of the Menu Bar, an auto width box with no margin or padding */ | + | /* Nav Menu |
| - | ul.MenuBarHorizontal | + | -------------------------------------------------------------------------------------- */ |
| - | { | + | ul#nav { |
| - | margin: 0;
| + | height: 43px; |
| - | padding: 0;
| + | left: 0; |
| - | list-style-type: none;
| + | list-style: none; |
| - | font-size: 100%;
| + | margin: 0 0 0 20px; |
| - | cursor: default;
| + | min-width: 750px; |
| - | width: auto;
| + | padding: 0; |
| | + | position: absolute; |
| | + | top: 190px; |
| | + | width: 96%; |
| | } | | } |
| - | /* 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 */
| + | body.homepage ul#nav { |
| - | ul.MenuBarActive | + | top: 328px; |
| - | { | + | |
| - | z-index: 1000;
| + | |
| | } | | } |
| - | /* Menu item containers, position children relative to this container and are a fixed width */
| + | ul#nav li { |
| - | ul.MenuBarHorizontal li | + | display: block; |
| - | { | + | float: left; |
| - | margin: 0;
| + | margin-right: 1%; |
| - | padding: 0;
| + | padding: 0; |
| - | list-style-type: none;
| + | position: relative; |
| - | font-size: 100%;
| + | width: 19%; |
| - | position: relative;
| + | z-index: 5; |
| - | text-align: left;
| + | |
| - | cursor: pointer;
| + | |
| - | width: 8em;
| + | |
| - | float: left;
| + | |
| - | overflow: hidden;
| + | |
| - | background-color: #D6D6D6;
| + | |
| | } | | } |
| - | /* 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#nav li:last-child { |
| - | ul.MenuBarHorizontal ul
| + | margin-right: 0; |
| - | { | + | |
| - | margin: 0;
| + | |
| - | padding: 0;
| + | |
| - | list-style-type: none;
| + | |
| - | font-size: 100%;
| + | |
| - | z-index: 1020;
| + | |
| - | 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 */
| + | ul#nav li a { |
| - | ul.MenuBarHorizontal ul.MenuBarSubmenuVisible | + | background-color: #393939; |
| - | { | + | border: 1px solid #545353; |
| - | left: auto;
| + | display: block; |
| | + | font-size: 15px; |
| | + | line-height: 41px; |
| | + | text-align: center; |
| | + | text-decoration: none; |
| | + | text-transform: uppercase; |
| | } | | } |
| - | /* Menu item containers are same fixed width as parent */
| + | ul#nav li:hover a, |
| - | ul.MenuBarHorizontal ul li | + | ul#nav li.hover a, |
| - | { | + | ul#nav li a:hover, |
| - | width: 8.2em;
| + | body.homepage ul#nav li.homepage a, |
| | + | 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; |
| | } | | } |
| - | /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ | + | /* ------------------------------ Dropdowns */ |
| - | ul.MenuBarHorizontal ul ul | + | ul#nav li ul { |
| - | { | + | background-color: #fff; |
| - | position: absolute;
| + | border-left: 1px solid #ccc; |
| - | margin: -5% 0 0 95%;
| + | border-right: 1px solid #ccc; |
| | + | border-bottom: 1px solid #ccc; |
| | + | display: none; |
| | + | left: -1px; |
| | + | margin: 0; |
| | + | padding: 0 5% 5px; |
| | + | position: absolute; |
| | + | top: 43px; |
| | + | width: 90%; |
| | + | z-index: 10; |
| | } | | } |
| - | /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
| + | ul#nav li:hover ul, |
| - | ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible | + | ul#nav li.hover ul { |
| - | { | + | display: block; |
| - | left: auto;
| + | |
| - | top: 0;
| + | |
| | } | | } |
| - | | + | ul#nav li ul li { |
| - | /*******************************************************************************
| + | display: block; |
| - | | + | float: none; |
| - | DESIGN INFORMATION: describes color scheme, borders, fonts
| + | margin: 0; |
| - | | + | width: 100%; |
| - | *******************************************************************************/
| + | |
| - | | + | |
| - | /* Submenu containers have borders on all sides */
| + | |
| - | ul.MenuBarHorizontal ul
| + | |
| - | {
| + | |
| - | border: 1px solid #CCC;
| + | |
| | } | | } |
| - | /* Menu items are a light gray block with padding and no text decoration */
| + | ul#nav li ul li a { |
| - | ul.MenuBarHorizontal a
| + | background: url(/assets/images/nav-doc.gif) no-repeat 5px 7px; |
| - | {
| + | border-top: none !important; |
| - | display: block;
| + | border-left: none !important; |
| - | cursor: pointer;
| + | border-right: none !important; |
| - | background-color: #EEE;
| + | border-bottom: 1px solid #d8d8d8 !important; |
| - | padding: 0.5em 0.75em;
| + | color: #000; |
| - | color: #333;
| + | font-size: 12px; |
| - | text-decoration: none;
| + | line-height: 16px; |
| | + | padding: 7px 10px 7px 22px; |
| | + | text-align: left; |
| | + | text-transform: none; |
| | } | | } |
| - | /* Menu items that have mouse over or focus have a blue background and white text */
| + | ul#nav li ul li:last-child a { |
| - | ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus | + | border-bottom: none !important; |
| - | { | + | |
| - | background-color: #33C;
| + | |
| - | color: #FFF;
| + | |
| | } | | } |
| - | /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
| + | ul#nav li ul li a:hover { |
| - | ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible | + | background-color: #efefef !important; |
| - | { | + | |
| - | 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.MenuBarHorizontal a.MenuBarItemSubmenu
| |
| - | {
| |
| - | background-image: url(SpryMenuBarDown.gif);
| |
| - | 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%) */
| |
| - | ul.MenuBarHorizontal ul 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.MenuBarHorizontal a.MenuBarItemSubmenuHover
| |
| - | {
| |
| - | background-image: url(SpryMenuBarDownHover.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.MenuBarHorizontal ul 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.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;
| |
| - | }
| |
| - | }
| |
| - | /* 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; } }
| |
| - |
| |
| - | Recent changes What links here Related changes Upload file Special pages My preferences
| |
| - | Printable version Permanent link Privacy policy Disclaimers
| |
}
ul#nav li:hover a,
ul#nav li.hover a,
ul#nav li a:hover,
body.homepage ul#nav li.homepage a,
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 {
"
