clearadm/clearmenu.css

   1 /*==============================================================================
   2
   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.
   6
   7 Computed Geometries:    with a default 12px font, 1.0em == 12px and
   8 1px == 0.08333em.
   9 Thus, our 98px wide Freeware & Research buttons are 8.166666em wide.
  10
  11 PUBLIC DOMAIN CONTRIBUTION NOTICE
  12
  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 ==============================================================================*/
  16
  17 /*================= STYLES FOR THE GRC MASTHEAD & CONTROLS ===================*/
  18 /* for all browsers (non-IE) that obey min-width */
  19 .menuminwidth0 {
  20   position:relative;
  21   border:0;
  22   margin:0;
  23   padding:0;
  24   width:100%;
  25   height:55px; /* 36px masthead height + 18px button height + 1px lower border*/
  26   min-width:560px;
  27 }
  28
  29 /* suppress our whole menu when not an interactive mode (when printing, etc.) */
  30 @media print, projection { .menuminwidth0 { display:none; } }
  31
  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 */
  37 }
  38
  39 /* used to simulate min-width capability for IE5/6 */
  40 * html .menuminwidth2 {
  41   position:relative;
  42   margin-left:-560px;
  43   height: 1px;
  44 }
  45
  46 #masthead {
  47   position:relative;       /* position our child objects relative to this div */
  48   float:left;
  49   vertical-align:top;            /* protect from super-large user text sizing */
  50   border:0;
  51   margin:0;
  52   padding:0;
  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 */
  56 }
  57
  58 #mastheadlogo {
  59   /*float:left;*/
  60   vertical-align:top;
  61   border:0;
  62   padding:0;
  63   margin:6px 0 0 7px;
  64   height:56px;
  65 }
  66
  67 /* GRC's focus label */
  68 #focus {
  69   position:absolute;
  70   border:0;
  71   margin:0;
  72   padding:0;
  73   top:15px;
  74   left:301px;
  75   width:121px;
  76   height:13px;
  77 }
  78
  79 /* search button */
  80 #search {
  81   position:absolute;
  82   border:0;
  83   margin:0;
  84   padding:0;
  85   top:7px;
  86   right:6px;
  87   width:60px;
  88   height:19px;
  89 }
  90
  91 /* search text field */
  92 #text {
  93   position:absolute;
  94   border:1px solid #404040;
  95   margin:0;
  96   padding:0 0 0 2px;              /* move the left starting point a bit right */
  97   top:7px;
  98   right:165px;
  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;
 102   background:#fefefe;
 103 }
 104
 105 /*========================= TOP OF THE MENU CASCADE ==========================*/
 106 .menu {
 107   position:relative;         /* establish a menu-relative positioning context */
 108   float:left;                                      /* play nicely with others */
 109   margin:0;
 110   padding:0;
 111   border:0;
 112   height:18px;                                   /* the menu's overall height */
 113   width:100%;          /* we always want our menu to fill the available space */
 114   background:#ffdb17;
 115   font-family: Verdana, Arial, Helvetica, sans-serif;
 116   font-size:12px;          /* this (and also below) sets the menu's font size */
 117   font-weight:bold;
 118   border-bottom:1px solid black;         /* give us a black border underneath */
 119 }
 120
 121 .menu img {
 122   vertical-align: top;       /* prevent images from being pushed down by text */
 123 }
 124
 125 .menu ul {
 126   margin:0;
 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 */
 130
 131 .menu li {
 132   float:left;     /* this creates the side-by-side array of top-level buttons */
 133   position:relative;     /* create local positioning contexts for each button */
 134   margin:0;
 135   width:85px;
 136 }
 137
 138 .menu ul li table {
 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 */
 143 }
 144
 145 .drop {
 146   display:block;
 147   padding:0px 0.33em;          /* this sets the l/r margins for our menu item */
 148   margin:0;
 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 */
 152 }
 153
 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 */
 156 }
 157
 158 .rightmenu {
 159   position:relative;   /* establish a local positioning context for YAH label */
 160   float:right;                   /* and right-align it at the top of our page */
 161 }
 162
 163 /*======================== TOP LEVEL MENU DEFINITIONS ========================*/
 164 .menu a {
 165   text-decoration: none;
 166 }
 167
 168 .menu a:link {
 169   color:black;
 170 }
 171
 172 .menu a:visited {
 173   color: black;
 174 }
 175
 176 .menu a:hover {
 177   color:blue;
 178 }
 179
 180 .menu ul li ul {
 181   display:none;                   /* initially hide the entire list hierarchy */
 182   padding:1px;                                /* this is our box border width */
 183 }
 184
 185 .menu ul li a,
 186 .menu ul li a:visited {                    /* unselected top-level menu items */
 187   display:block;
 188   float:left;
 189   text-decoration:none;
 190   height:18px;
 191 }
 192
 193 .menu ul li:hover a,
 194 .menu ul li a:hover {                        /* selected top-level menu items */
 195   display:block;
 196   border-top:1px solid #000;     /* these 2 lines create the push-in illusion */
 197   height:16px;
 198 }
 199
 200 /*======================== 2ND LEVEL MENU DEFINITIONS ========================*/
 201
 202 /* 2nd level drop-down box */
 203 .menu ul li:hover ul,
 204 .menu ul li a:hover ul {
 205   display:block;
 206   position:absolute;
 207   margin:0;
 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 */
 211   width:13.5em;
 212   color:black;                         /* this sets the unselected-text color */
 213   background:black;          /* this sets our menu's effective "border" color */
 214 }
 215
 216 .menu ul li:hover ul.leftbutton,
 217 .menu ul li a:hover ul.leftbutton {/* our first dropdown should not be skewed */
 218   left:0px;
 219 }
 220
 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) */
 224 }
 225
 226 .menu ul.rightmenu li:hover ul,
 227 .menu ul.rightmenu li a:hover ul {    /* 2nd level neighborhood drop-down box */
 228   left:auto;
 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) */
 231 }
 232
 233 /* IE5/6 needs a tweak here */
 234 * html .menu ul.rightmenu li a:hover ul {
 235   right:-1px;
 236 }
 237
 238 /* 2nd level unselected items */
 239 .menu ul li:hover ul li a,
 240 .menu ul li a:hover ul li a {
 241   border:0;
 242   margin:0;
 243   padding:0;
 244   height:auto;
 245   color:#000;               /* this sets the unselected drop-down text color */
 246   background:#fef5d8;       /* this sets the drop-down menu background color */
 247   width:13.5em;
 248 }
 249
 250 /* 2nd level selected item */
 251 .menu ul li:hover ul li:hover a,
 252 .menu ul li a:hover ul li a:hover {
 253   color:black;
 254   background:white;
 255 }
 256
 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 {
 262   width:8.08333em;
 263 }
 264
 265 /*======================== 3RD LEVEL MENU DEFINITIONS ========================*/
 266
 267 /* hide inactive 3rd-level menus */
 268 .menu ul li:hover ul li ul,
 269 .menu ul li a:hover ul li a ul {
 270         visibility:hidden;
 271 }
 272
 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 {
 276   visibility:visible;
 277   position:absolute;
 278   margin-top:-1px;         /* bring the top edge of the 3rd level menu up one */
 279   top:0;
 280   left:8.08333em;
 281   width:14em;
 282 }
 283
 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 {
 287   width:14em;
 288   background:#fef5d8;
 289 }
 290
 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 {
 294   width:14em;
 295   background:white;
 296 }
 297
 298 /*
 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
 301 property val
 302 */
 303 #text {
 304   height:1.215em;#
 305 }