/*
opener-layout-page-screen.css
Gordon Houtman for AGU, 2 March 2007

Copyright (c) 2007 American Geophysical Union

Description: page layout for "openers" HTML pages

Sections:

1) page layout overview (Page is composed of header, content, and footer.)
2) header details
3) footer details

[The "content" section is styled by the associated file (opener-text-screen.css).]


Updates:
2007-09-26, GH, increased #footer-updated from 10em to 11em to allow spell out month
2007-03-02, GH, created from 2007-02-20 version of opener.css
2008-02-27, MM
2008-07-03, MM
*/


/*-------------------------------*/
/* (1) PAGE LAYOUT OVERVIEW      */
/*-------------------------------*/

/*
	The page layout is header, content, and footer. 
	Blue lines separate header from content and content from footer.
	Left and right margins of 10% (of browser width) are used.
*/

/* header */

#header {
border-bottom: 2px solid #000099;
/*	A blue line separates header from content.

	When printing, the print stylesheet "turns this off" and adds a similar border 
	to header-in, below, so the line in print matches the left and right margins
	instead of going from print edge to print edge (which would look sloppy). 
	The print stylesheet does the same thing for the footer border. */
}

#header-in {
margin: 0.5em 10%;
/*	Inside the header, start content down a bit, and left/right margins 10%.
	
	0.5em top & bottom margins: makes a bit of space at the very top of the "page," 
		and between the header "stuff" and bottom border
	10% left & right margins: somewhat relieves otherwise excessive line length in 
		the content section, and serves as whitespace. Here applied just inside the 
		header, but content and footer have similar 10% left/right margins. */
}


/* content */

#content {
margin: 0 10%;
}

#content-in {
padding-top: 1em;
/*	Prevents content flush against the heading border (content provides a bottom margin). */
}


/* footer */

#footer {
border-top: 2px solid #000099;
/*	Mirroring header, separate content from footer with a blue line. */
}

#footer-in {
margin: 0.5em 10% 0 10%;
/*	Mirrors header appearance. Last item inside footer sets bottom margin. */
}


/*-------------------------------*/
/* (2) HEADER DETAILS            */
/*-------------------------------*/

#header p {
padding: 0;
margin: 0;
	/*	saves having to fiddle with each bit in turn... */
}

#header-brand {
float: left;
/*	The AGU logo and the major section link float left, so the 
	search bar (Google) will appear at the same height on the page. */
margin: 0 1em 1em 0;
/*	Right and bottom margins are set to keep the 
	search bars at a respectful distance from branding. */
}

#header-logo {
width: 150px; 
height: 41px;
	/*	Image dimensions allow page rendering before image is received. */
}

#header-sitesection a {
color: #000099; 
/*	Match the color to the logo color. This link color won't change. */
background-color: inherit;
/*	The validator will complain if you set color without setting background-color. */
text-decoration: none;
/*	Keep this plain, even though it's a link, to maintain 
	its dignity by association with the AGU logo. */
}

#header-search {
/*	This applies to the HTML form that implements Google search. */
margin-bottom: 1em;
/*	When screen width is narrow, this keeps Google search from touching FASTFind search. */
text-align: right;
/*	This pushes search to the right margin, instead of just to the right of the logo. */
line-height: 200%;
/*	When screen width is narrow, this keeps successive lines 
	of Google search from overlapping. */
}

span.header-search {
/*	Although the tag "header-search" is the same, this applies, not to the form, but to the 
	span nested inside the form. Without the span, the border would extend all the way to 
	the logo at page left, instead of just surrounding the search box. */
border: 1px solid #999999;
/*	Border around search is a medium grey. */
padding: 5px;
/*	Padding between search stuff and border establishes "space." */
margin: 0;
}

#header-search-brand {
/*	This is the little Google logo inside the search box. */
border: 0;
/*	Without this, a border would surround the logo. */
width: 56px;
height: 20px;
/*	Image dimensions allow page rendering before image is received. */
position: relative;
top: 6px;
/*	Position and top make the Google image align with the search input box. */
}

#header-search-input {
width: 15em;
/*	Width of Google search input box. */
}

#header-fastfind {
text-align: right;
/*	Put FASTFind against the right margin. */
margin-bottom: 0.5em;
/*	Put a little space between FASTFind and the links (or header border) that follow(s) it.
	Not a lot of space because the header pushes content "below the fold." */
line-height: 200%;
/*	In a compliant browser, this prevents the sections of the long search bar from 
	overlapping each other when the window is narrow. This doesn't work in IE6 or IE7. 
	The page is still functional, and browser statistics show that no one visiting our 
	site has a small screen, so it is not a practical issue. */
clear: both;
/*	This pushes the FASTFind bar down under the AGU logo. */
}

span.header-fastfind {
border: 1px solid black;
/*	Gives a nice "tied-together" look to the FASTFind bar. */
background-color: #f2f2f2;
/*	Light grey background improves FASTFind appearance further. */
color: inherit;
/*	Let the text color be whatever the rest of text is (valid requires this). */
padding: 5px;
/*	Padding between search stuff and border establishes "space." */
margin: 0;
}

#BATTerm1 {
width: 7em;
/*	width of last name field in FASTFind */
}

#BATTerm2 {
width: 7em;
/*	width of DOI suffix field in FASTFind */
}

#BATTerm3 {
width: 3em;
/*	width of year field in FASTFind */
}

#BATTerm4 {
width: 8em;
/*	width of journal selector control in FASTFind */
}

#header-page-nav {
text-align: right;
/*	puts list of links against right edge of page */
}

/*-------------------------------*/
/* (3) FOOTER DETAILS            */
/*-------------------------------*/

#footer-tagline {
font-style: italic;
padding: 0;
margin: 0 0 0.5em 0;
/*	Tagline is italicized, with a 1/2 space following. */
}

#footer-info {
width: 100%;
/*	Table containing tiny logo, copyright notice, and updated date fills page width. */
}

#footer-info td {
vertical-align: top;
/*	Top align all three items. */
}

#footer-logo {
width: 45px;
height: 15px;
padding-right: 0.5em;
}

#footer-copyright {
text-align: center;
}

#footer-updated {
text-align: right;
width: 12em;
}

sub {
	font-size: 10pt;
}

.no-bullets2 {list-style:none;}

p.pendingleg {padding-top: 22px;}

/*-------------------------------*/
/* (4) CONTENT            */
/*-------------------------------*/


table.tablechap {}
td.tdchap {vertical-align:top; padding-right:22px;}
td.tdchapdate {
	vertical-align:top;
	padding-top:20px;
	border-bottom:1px solid #666666;
	color:#000099;
	font-size: 13pt;
	font-weight:bold;
}
td.tdchaptopic {vertical-align:top; padding-top:12px; font-weight:bold;}

.columnfloat-ccontainer {

}

.columnfloat {
	float:left;
	width: 30%;
}