/*
This css file creates a USGS theme, based on the layout.css, which much
be imported before this sheet.
Colors are mostly taken from this color scheme:
http://wellstyled.com/tools/colorscheme2/index-en.html?triad;37;0;233;0.59375;0.5019607843137255;0.59375;0.3513725490196078;0.1484375;1;0.296875;1;0.59375;0.3513725490196078;0.1484375;1;0.296875;1;0.59375;0.5019607843137255;0.59375;0.3513725490196078;0.1484375;1;0.296875;1;0.59375;0.5019607843137255;0.59375;0.5019607843137255;0.59375;0.3513725490196078;0.1484375;1;0.296875;1;0
...and validated for proper contrast via:
http://juicystudio.com/services/colourcontrast.php
All relative font-sizes are now in percentages, since IE seems to have issues
recalc'ing ems sizes when the user picks a view size manually:
http://www.communitymx.com/content/article.cfm?page=2&cid=A8E2DC392C467EEA
Section name within this file starts with '=' to make searching easier.
For instance for find the formatting for links, search for '=link'.
Note: htmldb has this rule on the first line of its themes:
*{font-size:12px;}
eg: http://infotrek.er.usgs.gov/i/themes/theme_12/theme_V2.css
For now, we have just taken it out of the themes we are using.
*/
/* =header area
The layout and format of the header is defined by USGS spec, so do not
modify unless you know what you are doing.
One exception: You may change the background image of the header by modifying
the background-image property of the '#header #banner-area' entry.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#header { background-color: #fff; padding: 0; }
#header #banner-area {
position: relative; overflow: hidden; width: 100%; height: 72px;
padding: 0;
color: #fff; background-color: #141414;
background: url("../images/ogw-banner.jpg") no-repeat scroll 0 0 #006699; /* Modify for alternate banner images */
background-repeat: no-repeat;
}
#banner-area h1 { /* USGS Title - not displayed b/c its replaced w/ the logo */
position: absolute; top: -400px;
padding: 0; margin: 0;
}
/* Logo appears in the banner-area */
#usgs-header-logo { float: left; border: none; padding: 0; margin: 0; }
#usgs-header-logo a, #usgs-header-logo img { border: none; padding: 0; margin: 0; }
/* Standard Customer Service Area
Almost directly copied from USGS std's site. Sits in the upper rt corner of the page
*/
#ccsa-area {
float: right;
height: 72px;
color: #fff;
background-color: #000;
}
#ccsa-area a {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 1em;
padding-right: 1em;
line-height: 1.0;
margin-left: 4px;
/*padding: 0;*/
color: #fff;
background-color: transparent;
}
#ccsa-area a:visited, #ccsa-area a:active { margin-left: 4px; color: #fff; }
#ccsa-area a:hover { text-decoration: underline;}
/* site-title is the title for the entire site (more then just a single page) */
#site-title {
display: block;
margin: 1px 0; padding: 5px 0 5px 3px;
color: #fff; background-color: #233F8F;
font-size: 120%; font-weight: bold;
}
#site-title a, #site-title a:visited, #site-title a:active, #site-title a:link
{ color: inherit; background-color: transparent; font-weight: inherit; font-size: inherit; }
#site-title a:hover { color: #ccf; }
/* For usgs-internal pages, this is used for the text: 'For Internal USGS Access Only' in the header */
#internal-only {
font: 80% Verdana Arial Helvetica sans-serif;
letter-spacing: 1px;
}
/* site-top-links is just below the banner and has links for the site. A type of hnav. */
#site-top-links { margin: 7px 0; }
#site-top-links a:visited { color: #fff; /* Don't mark pages w/in the site as visited */ }
/* =footer
The layout and format of the footer is defined by USGS spec. Do not modify.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#footer {
position: relative; width: 100%; padding: 0; float: left;
background-color: #fff;
}
#footer .content { position: relative; width: auto; margin: .3em 0 0 0; }
/* for internal pages, the footer has a grey border instead of accessabality links */
.internal #footer {
border-top: solid #666 24px;
}
#footer #page-info { }
#page-info p { padding: 0; margin: 0; }
/* This is the contact info for the DOI and USGS in the footer */
#footer-doi-links .vcard .adr, #footer-doi-links .vcard .tel { display: none; }
#footer-doi-links .vcard { display: inline; border: none; margin: inherit; padding: inherit; }
/* These are the 'First Gov' and 'Take Pride in America' buttons (bottom right) */
#footer #gov-buttons { position: absolute; right: 0; top: 0; text-align: right; }
#gov-buttons a { margin: 0; padding: 0; }
#gov-buttons a img { vertical-align: top; margin-left: 2px; border-width: 0px; }
/*
This is the horizontal navigation area at the top of the footer.
See the horizontal navigation styles for how the hnav class is defined.
DO NOT MODIFY THIS OR ANY OTHER FOOTER SECTION.
*/
#usgs-policy-links .hnav {
margin: 0; padding: 0;
background-color: #666;
}
#usgs-policy-links .hnav li {
margin: 0 2em 0 0; padding: 0;
background-image: none; /* Turn of the bkg image (a dot) that is used by default */
}
#usgs-policy-links .hnav a, #usgs-policy-links .hnav a:visited { font-weight: normal; color: #fff; }
#usgs-policy-links .hnav li a:hover {
color: #fff; background-color: transparent;
text-decoration: underline;
}
/* =theme
Everything below this point is related to the page's "theme" and can be
over-ridden in your main stylesheet.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#page-area-container .area-2, #page-area-container .area-3 {
color: #000; background-color: #ffc;
}
/* =headings =specific
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#page-name {
margin: 0; text-align: left;
color: #000; background-color: transparent;
font-weight: bold; font-size: 160%;
}
/*
Would like to provide this as default, but IE seems to be unable to override
the first-letter psudo class, so no one can turn it *off*. Yuck.
#page-name:first-letter {
font-size: 50px; font-family: "Times New Roman", Times, Century, Garmond, serif;
}
*/
#page-caption {
font-weight: normal;
font-size: 110%;
margin: .2em 0;
}
/* =headings =generic
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
h1.distinct, h2.distinct, h3.distinct, h4.distinct, h5.distinct, h6.distinct {
width: auto; padding: .2em;
color: #fff; background-color: #345280;
}
h1.distinct { font-size: 120%; }
h2.distinct { font-size: 110%; }
h3.distinct, h4.distinct, h5.distinct, h6.distinct { font-size: 100%; }
/* The header area appears at the top of each area */
.area-header {
margin: 0; padding: 0;
clear: left; /* Allow items to float up beside on the right */
}
.area-header h1, .area-header h2, .area-header h3,
.area-header h4, .area-header h5 {
padding: .25em 0; margin: 0;
color: #fff; background-color: #5A3524;
text-align: center;
}
/* =links =anchors =special
Special anchor tag formatting
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* A set of controls placed directly in the content */
.content-control {
display: block; position: relative;
margin: .3em 0; padding: 0;
}
/*
A link that *does* something (rather then just linking to a page)
This type of link never indicates that it has been visited (it doesn't grey out).
*/
.content-control a, a.content-control { color: #258; /* 75% saturation */ }
.content-control a:active, a.content-control:active { color: #EFEFEF; }
.content-control a:visited, a.content-control:visited { color: #258; }
.content-control a:hover, a.content-control:hover { color: #039; background: #eee; }
/* A set of navigation lines placed directly in the content */
.content-nav {
display: block; position: relative;
margin: .3em 0; padding: 0;
}
/* A navigation link placed directly in the content */
.content-nav a, a.content-link { color: #258; /* 75% saturation */ }
.content-nav a:active, a.content-link:active { color: #EFEFEF; }
.content-nav a:visited, a.content-link:visited { color: #526066; /* 20% saturation */ }
.content-nav a:hover, a.content-link:hover { color: #039; background: #eee; }
/* =horizontal =navigation =hnav
The hnav classes format a list of anchor tags horizontally across the page.
Usage example:
Note that due to a weakness in Internet Explorer, the first link must include
the 'ie-first-child' class entry (see example above).
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
ul.hnav, .hnav ul {
display: block; list-style-type: none; clear: both;
margin: 1px 0 1px 0; padding: 0 0 0 .3em; /* pad the left of the list. */
background-color: #555;
line-height: 1.0;
}
/* Holly hack to fix a render bug in IE6/Win - Hide from IE5 Mac \*/
* html .hnav {
height: 0.01%;
}
/* End IE5 Mac Hiding */
/* Note: Safari and FireFox do not seem to propogate the li's height to the parent*/
.hnav li {
display: inline;
margin: 0; padding: 0 0 0 14px; /* Padding must fit the 12px dot + space b/t dot and text. */
background-image: url("../assets/whitedot.png");
background-position: left center;
background-repeat: no-repeat;
list-style-type: none; list-style-image: none;
}
/* IE only: Supply a gif instead of a png b/c IE is not capable of propery png image display */
* html .hnav li { background-image: url("../assets/white_blue_dot.gif"); }
/* Remove bkg image from the 1st item. Since IE is 'special', the 'ie-first-child' class is required for IE. */
.hnav li:first-child, .hnav ul li.ie-first-child { padding: 0; background-image: none; }
/* Link formatting within the hnav */
.hnav li a {
display: inline;
white-space: nowrap; padding: .1em .2em;
color: #fff; font-size: 110%; line-height: 1.5;
}
.hnav li a, .hnav ul li a:link, .hnav ul li a:visited, .hnav ul li a:active {
color: #fff;
}
.hnav li a:hover { color: #ddf; background-color: #2E467C; }
/*
Holly hack for IE5/Win inline padding. this hack fixes different rendering
bugs in 5.0 and 5.5. Width is used instead of height b/c if the document is
too long, these elements become very tall. Too wide an element is better,
visually, than too tall. Hide from IE5 Mac.
*/
/* Begin IE5 Mac Hiding \*/
* html .hnav li a { width: 1%; }
/* End IE5 Mac hiding */
/* =vertical =navigation
Used to format lists of links as vertical navigation.
Usage example: