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

Copyright (c) 2007 American Geophysical Union

Description: typographic style for "openers" HTML pages

Sections:

1) typography
2) links
3) spacing
4) variations on spacing
5) ad hoc


Updates:
2007-04-17, GH, added ul.no-space-after li
2007-04-05, GH, increased h1 size from 150% to 160%, h2 & h3 in proportion
2007-03-02, GH, created from 2007-02-20 version of opener.css
*/


/*-------------------------------*/
/* (1) TYPOGRAPHY                */
/*-------------------------------*/

/*
We use Times New Roman, or the closest equivalent, for text on these pages, 
and also for headings. Headings are spaced close to the following content. 
Headings are smaller than the HTML default headings.
*/

body {
font-family: "Times New Roman", Times, serif;
/* AGU's preferred fonts, in order of preference. */
padding: 0;
margin: 0;
/* Setting these to zero allows the borders between header, content, and 
footer to extend to the left and right edges of the browser window. */
}

/* headings: */

h1, h2, h3, h4, h5, h6 {
font-family: "Times New Roman", Times, serif;
padding: 0;
margin: 0 0 0.25em 0;
/* Put headings close to the text they introduce. */
}

/* Extended note on heading sizes:

A common complaint about unstyled HTML is that the headings are cartoonishly large.

Before changing the sizes, I determined the default sizes:
h1 200%, 
h2 150%, 
h3 120% 
h4 100%, 
h5 ?, 
h6 ? 

I then asked Liz Castenson for her opinion of what looks good, by printing 
the page with successively smaller headers until she felt that they looked 
decent.

Deciding to keep the default 100% size for h4 (and h5 and h6), I split the 
size changes evenly among the successive headings, using the formula: 

x ^ 3 = 1.5

{ x = ~ 1.14 }

So we end up with:
*/

h1 { font-size: 160%; margin-bottom:0; }
h2 { font-size: 137%; margin-top:1.3em; }
h3 { font-size: 110%; margin-top:0; }
h4, 
h5, 
h6 { font-size: 100%; }

/* 
Each larger heading (h3-h1) is about 14% larger than its predecessor. 
h4-h6 are standard text size. If five or six levels of headers are required, 
it could be either a symptom of subcategorization run amok, non-semantic use 
of headings, or a document that needs to be split into pieces. */


/*-------------------------------*/
/* (2) LINKS                     */
/*-------------------------------*/

a:link {
color: #000099;
/* blue color of unfollowed links matches AGU logo */
background-color: inherit;
}

/* Let the other link states remain at default values. */
a:visited {}
a:hover {}
a:active {}


/*-------------------------------*/
/* (3) SPACING                   */
/*-------------------------------*/

/* The general rule is that a piece of content is followed by a blank line. */

p {
padding: 0;
margin: 0 0 1em 0;
/* This is a normal style for a paragraph of text. Start the paragraph where 
the previous content left the "cursor." After the paragraph, skip a line. */
}

ul, ol, dl {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 1em;
/* This is the same as the handling of a paragraph, but with an implementation 
difference. In order to preserve the indent of lists (ordered, unordered, and 
definition), one can't touch the margin/padding left/right settings, not even 
with inherit (I tried). */
}

blockquote {
margin-top: 0;
margin-bottom: 1em;
/* Handled consistently with other pieces of content. Keep the default 
left/right indents. */
}

form {
padding: 0;
margin: 0;
/*
A form's content needs to be enclosed by another container to validate, so 
the bottom margin of the form's content is provided by the nested container. */
}

address {
padding: 0;
margin: 0 0 1em 0;
font-style: normal;
/* On pages with contact information, this provides a bottom margin 
to prevent the last line of contact information from being right next 
to the bottom border. */
}

table {
border: 0;
margin: 0 0 1em 0;
/* As with other content, 1em after. */
}


/*-------------------------------*/
/* (4) VARIATIONS ON SPACING     */
/*-------------------------------*/

/* TABLE VARIATIONS */

/* allow table headings column to be left or right-aligned 
as well as (default) centered */

table.stub-right th {
text-align: right;
/* If column 1 is th's rather than td's, class="stub-right" on table puts 
all headings next to data. */
}

table.stub-left th {
text-align: left;
/* If column 1 is th's rather than td's, class="stub-left" on table puts 
all headings left-aligned. */
}

table.space td {
border: 1px solid #333333;
padding: 0 8px 0 5px;
vertical-align:top;
}

td {
vertical-align: bottom;
/* If heading is long, put associated data on lower line. */
}

table.top-align th, table.top-align td {
vertical-align: top;
/* For table layout: headings aligned at top */
}

/* DEFINITION LIST VARIATIONS */

dd {
margin-left: 1.5em;
/* Default left margin is too large. */
}

/* Definition list optional styles: */

dl.bold dt {
font-weight: bold;
/* Definition terms are bolded for emphasis if class="bold" is put on the dl. */
}

dl.space-after dd {
margin-bottom: 0.5em;
/* All definition list definitions are followed by a half-line of space if 
class="space-after" is put on the dl. */
}

dd.space-after {
margin-bottom: 0.5em;
/* If any term in your definition list has more than one definition, you 
probably don't want a space between the multiple definitions. In that case, 
instead of applying the "space-after" class to the dl, just apply the 
"space-after" class to the last dd of each dt. */
}

dl.no-indent dd {
margin-left: 0;
padding-left: 0;
}


/* LIST VARIATIONS */

ul.no-bullets {
list-style-type: none;
padding: 0;
margin: 0 0 1em 0;
/* unordered list without bullets and without indent 
(probably won't nest well) */
}

ul.no-bullets li {
padding: 0;
margin: 0;
/* Don't show bullets, and don't indent the list items (makes an unordered 
list look like paragraph text separated by breaks. */
}

ul.space-after li, ol.space-after li {
margin-bottom: 0.5em;
/* Each unordered list item is followed by a half-line of space if 
class="space-after" is put on the ul. */
}

li.space-after {
margin-bottom: 0.5em;
/* If you want a half line of space after some list items, but not others, 
apply the "space-after" class to the list items you want space after. */
}

/* "COLUMNS" VARIATIONS */

/* Note on columns: although the column class can be applied to other content, 
I recommend that you only apply it to a div. If it is applied to other content, 
the column CSS may override the presentation of the other HTML tag, causing 
unpredictable results. */

.column {
float: left;
/* Display this piece to the left. The next piece will be to its right, 
space permitting. */
margin-right: 3em;
/* Put 3 ems of space at the right of this piece, so the piece to the right 
isn't flush to it. Note: if 3ems is the wrong amount of margin, 
you can override this inline. */
}

.column-indent {
margin-left: 1.5em;
/* Indent (usually the first) column. Reset to zero in print stylesheet. */
}

.columns-after {
clear: both;
/* The first piece of content after the columns needs this so that it won't 
appear to the right of the columns. I'd suggest just applying it to an empty 
div. */
}


/*-------------------------------*/
/* (5) AD HOC                    */
/*-------------------------------*/

/*	Handling these details here simplifies coding text appearance in HTML: */

.no-space-after, ul.no-space-after li {
margin-bottom: 0 !important;
/* This class is intended for paragraphs or headings that "label" a list or 
other following content. With this class, the heading will appear next to the 
list, rather than being separated by a blank line. Without !important, the 
#content p has higher specificity than this rule, and this rule would therefore 
have no effect. Headings introducing lists can also be styled this way. */
}

.half-space-after {
margin-bottom: 0.5em !important;
/* Same as above, but instead of all-or-none, this provides an intermediate 
value. However, we now have an inconsistency, where space-after is 0.5em for 
lists, but it's explicitly labelled "half space after for this. Since a full 
space between list items would almost always be too much, it works in sense of 
designing text, but it's inconsistent in terms of rule names and consistency of 
their effects. */
}

div.sidebar {
border: 1px solid #000099;
margin: 0 0 1em 1em;
padding: 1em 1em 0 1em;
float: right;
/* A right-floating sidebar for action items, contact information, etc. 
Padding should be 1em all around, but content (e.g. p) provides a 1em bottom 
margin. A width can be provided: style="width: x%;" or style="width: 12em;" for 
instance. */
}

/* If you want a left-floated sidebar, use: 
<div class="sidebar" style="float: left;"> */

.no-border-link {
border: 0;
text-decoration: none;
/* The HTML default is to underline links, and put borders around linked 
pictures. This overrides that default behavior, and makes the page look better 
(used judiciously).

Class for logo image links to homepage, both <a> and <img>: seemed to have no 
effect on a, just kept on img */
}

.first-line-bold:first-line {
font-weight: bold;
}

.right {
text-align: right;
}


.reference {
margin-left:.5in;
text-indent:-.5in;
}


.red {color:#CC0000;}