/*
NAV.css
should be imported into main site CSS. In this way nav behavior can be quickly swapped out/changed for various sites/subsites.
Code sample for usage is pasted at end.
CSS by Steve Sabia GSFC
HISTORY:
sabia 12-1-07 modified for goes-r.gov mockup.
*/
/**** "TOP BAR text navigation" ******************************************/
.topnav td {
font-size: 12px;
color: white;
background: #666;
text-align: center;
text-transform: uppercase;
line-height: 24px;
font-weight: normal;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFFFFF;
border-top-width: 1px;
border-top-style: solid;
border-top-color: FFFFFF;
border-bottom-width: 1px;
border-bottom-color: #ffffff;
border-bottom-style: solid;
}
/* place id="set" in the TD that is "selected" or set, be sure the class="topnav" on the same td */
.topnav td#set {
color: #000000;
background: #154fcb;
text-decoration: none;
}
.topnav td a{
color: white;
display: block;
font-weight: normal;
}
.topnav td a:hover {
color: #ffffff;
background: #154fcb;
text-decoration: none;
font-weight: normal;
}
/*** left sidebar nav *****************************************************************************/
/* set this on the table containing all rows for leftnav so all tds styles inherit these base attribs from it, also set it specifically on all tds that are top level leftnav - see code sample at end of this file */
.leftnav td {
font-size: 11px;
font-weight: normal;
color: #555;
background: #c6c6c6;
text-align: left;
text-transform: capitalize;
width: 181px;
line-height: 24px;
/* border-left: 8px solid #c6c6c6; */
border-bottom: 1px solid white;
text-indent: 2pt
}
/* on the current page, set the tds id="set" and class="topnav" */
td.leftnav#set {
color: #000000;
text-decoration: none;
background: #7aa2f2;
/* border-left: 8px solid #0000ff; */
}
.leftnav td:hover {
color: #000000;
background: #7aa2f2;
text-decoration: none;
border-bottom: 1px solid white;
/* border-left: 8px solid #0000ff; */
}
.leftnav td a {
color: black; display: block;
}
/*** subnav has headers (the section title containing the subnav) and subnav entries of that header */
/* leftnav is applied as table level class so all tds in the table inherit from it, subnav1Header becomes a subclass applied at the TD level- inherits from leftnav and overrides these values. */
.leftnav td.subnav1Header {
color: #000000;
background: #c6c6c6;
/* border-left: 8px solid #666666; */
}
/* set should be applied as the id="set" on the td whose class="subnav1Header" within a table whose class="leftnav" */
.leftnav td.subnav1Header#set {
background: #7aa2f2;
/* border-left: 8px solid #0000ff; */
}
.leftnav td.subnav1Header:hover {
color: #000000;
background: #7aa2f2;
text-decoration: none;
border-bottom: 1px solid white;
border-left: 8px solid #0000ff;
}
/* subnav entries are below subnavHeader */
/* leftnav is applied as table level class so all tds in the table inherit from it, subnav1 is applied to specific tds and becomes a subclass applied at the TD level- inherits from leftnav but overrides these values. */
.leftnav td.subnav1 {
background: #eeeeee;
border-left: 8px solid #666666;
text-indent: 4pt;
}
/* set should be applied as the id="set" on the td whose class="subnav" within a table whose class="leftnav" */
.leftnav td.subnav1#set {
border-left: 12px solid #0000ff;
text-indent: 4pt;
}
.leftnav td.subnav1:hover {
color: #000000;
background: #7aa2f2;
text-decoration: none;
border-bottom: 1px solid white;
border-left: 8px solid #0000ff;
}
/* CODE SAMPLE *************
Untitled Document