1 /*==============================================================================
3 GRC multi-level script-free pure-CSS menuing system stylesheet. This code is
4 hereby placed into the public domain by its author Steve Gibson. It maybe freely
5 used for any purpose whatsoever.
7 Computed Geometries: with a default 12px font, 1.0em == 12px and
9 Thus, our 98px wide Freeware & Research buttons are 8.166666em wide.
11 PUBLIC DOMAIN CONTRIBUTION NOTICE
13 This work has been explicitly placed into the Public Domain for the benefit of
14 anyone who may find it useful for any purpose whatsoever.
15 ==============================================================================*/
17 /*================= STYLES FOR THE GRC MASTHEAD & CONTROLS ===================*/
18 /* for all browsers (non-IE) that obey min-width */
25 height:55px; /* 36px masthead height + 18px button height + 1px lower border*/
29 /* suppress our whole menu when not an interactive mode (when printing, etc.) */
30 @media print, projection { .menuminwidth0 { display:none; } }
32 * html .menuminwidth1 { /* this allows IE5/6 to simulate min-width capability */
33 position:relative; /* we can simulate a minimum width by creating a large */
34 float:left; /* border in this first div, then placing our content */
35 height: 1px; /* into a second nested div (see 2nd nested div next */
36 border-left:560px solid #fff; /* CSS box-model borders are a fixed size */
39 /* used to simulate min-width capability for IE5/6 */
40 * html .menuminwidth2 {
47 position:relative; /* position our child objects relative to this div */
49 vertical-align:top; /* protect from super-large user text sizing */
53 width:100%; /* grey-fill the entire width */
54 height:36px; /* set the overall height above the menu-bar */
55 background:#f3fefe; /* a very light shade of grey */
67 /* GRC's focus label */
91 /* search text field */
94 border:1px solid #404040;
96 padding:0 0 0 2px; /* move the left starting point a bit right */
99 width:12em; /* search field width */
100 /* height:1.215em; we'll define this at the bottom of our style sheet */
101 font-size:14px !important;
105 /*========================= TOP OF THE MENU CASCADE ==========================*/
107 position:relative; /* establish a menu-relative positioning context */
108 float:left; /* play nicely with others */
112 height:18px; /* the menu's overall height */
113 width:100%; /* we always want our menu to fill the available space */
115 font-family: Verdana, Arial, Helvetica, sans-serif;
116 font-size:12px; /* this (and also below) sets the menu's font size */
118 border-bottom:1px solid black; /* give us a black border underneath */
122 vertical-align: top; /* prevent images from being pushed down by text */
127 list-style-type:none; /* we don't want to view the list as a list */
128 line-height:1.5em; /* globally set the menu's item spacing. note */
129 } /* this must be 1.0 or 1.5 or 2.0 for Mozilla */
132 float:left; /* this creates the side-by-side array of top-level buttons */
133 position:relative; /* create local positioning contexts for each button */
139 margin:-1px 0; /* IE5 needs -1px top and bottom table margins */
140 margin:0; /* re-zero the table margins for everyone but IE5 */
141 border-collapse:collapse; /* IE5 needs this for the sub-menus to work */
142 font-size:12px; /* this sets the base font size for our entire menu */
147 padding:0px 0.33em; /* this sets the l/r margins for our menu item */
149 text-align:right; /* this right alignment goes with the float:left below */
150 cursor:pointer; /* IE tries to switch back to an I-beam, don't let it */
151 cursor:hand; /* IE5 only knows about "hand", so set it both ways */
154 .drop span { /* this simultaneously left and right aligns the text and */
155 float:left; /* the >> in the drop-down menus which link to sub-menus */
159 position:relative; /* establish a local positioning context for YAH label */
160 float:right; /* and right-align it at the top of our page */
163 /*======================== TOP LEVEL MENU DEFINITIONS ========================*/
165 text-decoration: none;
181 display:none; /* initially hide the entire list hierarchy */
182 padding:1px; /* this is our box border width */
186 .menu ul li a:visited { /* unselected top-level menu items */
189 text-decoration:none;
194 .menu ul li a:hover { /* selected top-level menu items */
196 border-top:1px solid #000; /* these 2 lines create the push-in illusion */
200 /*======================== 2ND LEVEL MENU DEFINITIONS ========================*/
202 /* 2nd level drop-down box */
203 .menu ul li:hover ul,
204 .menu ul li a:hover ul {
208 top:18px; /* place us just up underneath the top-level images */
209 left:-1px; /* left-align our drop-down to the previous button border */
210 height:auto; /* the drop-down height will be determiend by line count */
212 color:black; /* this sets the unselected-text color */
213 background:black; /* this sets our menu's effective "border" color */
216 .menu ul li:hover ul.leftbutton,
217 .menu ul li a:hover ul.leftbutton {/* our first dropdown should not be skewed */
221 .menu ul li:hover ul.skinny,
222 .menu ul li a:hover ul.skinny { /* 2nd level skinny drop-down box */
223 width:8.08333em; /* with a 12px default font, this is 97px width (97/12) */
226 .menu ul.rightmenu li:hover ul,
227 .menu ul.rightmenu li a:hover ul { /* 2nd level neighborhood drop-down box */
229 right:0; /* nudge the right menu right to line up under the border */
230 width:400px; /* with a 12px default font, this is 228px width (228/12) */
233 /* IE5/6 needs a tweak here */
234 * html .menu ul.rightmenu li a:hover ul {
238 /* 2nd level unselected items */
239 .menu ul li:hover ul li a,
240 .menu ul li a:hover ul li a {
245 color:#000; /* this sets the unselected drop-down text color */
246 background:#fef5d8; /* this sets the drop-down menu background color */
250 /* 2nd level selected item */
251 .menu ul li:hover ul li:hover a,
252 .menu ul li a:hover ul li a:hover {
257 /* 2nd level un+selected items */
258 .menu ul li:hover ul.skinny li a,
259 .menu ul li a:hover ul.skinny li a,
260 .menu ul li:hover ul.skinny li a:hover,
261 .menu ul li a:hover ul.skinny li a:hover {
265 /*======================== 3RD LEVEL MENU DEFINITIONS ========================*/
267 /* hide inactive 3rd-level menus */
268 .menu ul li:hover ul li ul,
269 .menu ul li a:hover ul li a ul {
273 /* 3rd level drop-down box */
274 .menu ul li:hover ul li:hover ul,
275 .menu ul li a:hover ul li a:hover ul {
278 margin-top:-1px; /* bring the top edge of the 3rd level menu up one */
284 /* 3rd level unselected items */
285 .menu ul li:hover ul li:hover ul li a,
286 .menu ul li a:hover ul li a:hover ul li a {
291 /* level3 selected items */
292 .menu ul li:hover ul li:hover ul li a:hover,
293 .menu ul li a:hover ul li a:hover ul li a:hover {
299 the Mac's standard Safari browser will not see this code but every other browser
300 will and should Safari barfs on the illegal pound sign (#) after the rule's