/*
  Cascading Style Sheet for the Ozone Watch web site:
    http://ozonewatch.gsfc.nasa.gov/

  Written by:
    Eric Nash
      
  Original development by:
    Robert Simmon
    Leslie Lait
*/

/*
  Global settings for default features on all web pages. No borders,
  normal font, no list style, no margins or padding, static position,
  left-aligned text, and no text decorations.
*/
*
{
  border : 0;
  font-size : 1em;
  font-style : normal;
  font-weight : normal;
  list-style : none;
  margin : 0 0 0 0;
  padding : 0 0 0 0;
  position : static;
  text-align : left;
  text-decoration : none;
}

/*
  All links appear blue-green normally, and red when hovering.
*/
a
{
  color : #006699;
}

a:hover
{
  color : #FF0000;
}

/*
  Put a little space below each paragraph.
*/
p
{
  margin : 0 0 1em 0;
}

/*
  H1 header is 40% larger than normal and bold, with extra space on
  bottom.
*/
h1
{
  font-size : 1.4em;
  font-weight : bold;
  margin : 0 0 .5em 0;
}

/*
  H2 header is 20% larger than normal and bold, with extra space on
  bottom.
*/
h2
{
  font-size : 1.2em;
  font-weight : bold;
  margin : 0 0 .5em 0;
}

/*
  H3 header is normal size and bold, with extra space on top.
*/
h3
{
  font-weight : bold;
  margin : 0.5em 0 0 0;
}

/*
  H4 header is normal size and weight, with extra space on top.
*/
h4
{
  margin : 0.5em 0 0 0;
}

/*
  Definition lists. The items have a little extra space on top. The
  definition term is bold.
*/
dl
{
  margin : 0.5em 0 0 0;
}
dt
{
  font-weight : bold;
  margin : 0.5em 0 0 0;
}
dd
{
}

/*
  Unordered list has extra space on top between list elements and for
  the list as a whole.
*/
ul
{
  margin : 0.5em 0 0 0;
}

/*
  List element: indent from left slightly
*/
li
{
  margin : 0.5em 0 0 0;
}

/*
  Superscript, subscript elements.
*/
sub, sup
{
  font-size : 0.8em;
  line-height : 0.1em;
}

/*
  Use to clear left, right, or both sides.
*/
.clear_both
{
  clear : both;
}
.clear_left

{
  clear : left;
}

.clear_right
{
  clear : right;
}

.page_bg
{
  background-color : #2C5134;
}


/*
  Provides a light gray background.
*/
.section_title
{
  background : #DDDDDD;
  margin : 0 0 0.5em 0;
}

/*
  Provides a bottom border line.
*/
.subsection_title
{
  border-bottom : thin solid #000000;
  margin : 0 0 0.5em 0;
}

/*
  Provides a bold type.
*/
.boldtype
{
  font-weight : bold;
}
/* =================== Specific Components =================== */

/*
  Set the entire page to the user's default font-size and give a little
  extra space for line spacing.
*/
html
{
  font-size : 100%;
  line-height : 130%;
}

/*
  Don't display any of the head information.
*/
head
{
  display : none;
}

/*
  The body is one large green area for a background. For webkit
    browsers, use the gradient function. Define the font family and
    provide a small margin around the entire page.
*/
body
{
  font-family : Helvetica, Arial, sans-serif;
  margin : 8px 9px 8px 9px;
}

/*
  Within the green body background is a "body" that contains all the
  page's content. This contianer is scaled to the page wisth, and has a
  minimal width value.
*/
#body
{
  background-color : #FFFFFF;
  border-bottom : 10px solid #2C5134;
  min-width : 75em;
}

/*
  This provides a bypass around the navigation links.
*/
#nav_bypass
{
  display : none;
}

/*
  The body container is divided into five section: the standard NASA
  header, the site header, the site navigation, the page-unique content,
  and the standard NASA footer, Each has a container associated with it. 
*/

/*********** The Standard NASA Header ************/

/*
  The container for the NASA header. The header extends the full
  width of the body container. The background is gray, and the
  default text color is white. 

  The header banner has three parts:
    the NASA meatball logo
    the NASA and GSFC links
    links to Code 400 and 600
*/

#nasa_header
{
  background-color : #2E2E2E;
  border-bottom : 1px solid #000000;
  color : #FFFFFF;
  height : 7.0em;
  min-width : 75em;
  position : relative;
  width : 100%;
}

#nasa_header a
{
  color : #FFFFFF;
}

#nasa_header a:hover
{
  color : #AAAAAA;
}

/*
  The NASA logo goes to the left side on the banner and footer.
*/
.nasa_logo
{
  float : left;
  height : 6em;
  left : 0.5em;
  position : relative;
  top : 0.5em;
  width : 8em;
}

.nasa_logo img
{
  height : 100%;
  left : 0;
  position : relative;
  top : 0;
}


/*
  The site title has two lines: the title itself, and a subtitle. We
  put these into two containers which go into this container. 
*/

#nasa_name_block
{
  float : left;
  height : 100%;
  left : 0;
  position : relative;
  top : 1em;
  width : 45em;
}

/*
  Here is the title.
*/
#nasa_name
{
  color : #FFFFFF;
  float : left;
  font-size : 1.75em;
  left : 0.5em;
  position : relative;
  top : 0.5em;
  width : 100%;
}

/*
  Here is the subtitle.
*/
#gsfc_name
{
  font-size : 1.25em;
  left : 0.5em;
  position : relative;
  top : 1.2em;
  width : 100%;
}

/*
  The NASA GSFC organizational links are right aligned and float with the
  edge of the page. 
*/
#gsfc_org_links
{
  float : right;
  left : 0;
  padding-right : 1em;
  position : relative;
  right : 1em;
  text-align : right;
  top : 5.0em;
  width : 20em;
}


/*********** The Site Title ************/

/*
  The title extends the full width of the body container. The background
  is a green to indicate an Earth Science page (although we leave off the
  stupid stars image, since this ain't astronomy). The text color is white. 

  The site title has two parts:
    the title (which contains a link to the home page)
    a short description of the page
*/

#o3watch_header
{
  background-color : transparent;
  height : 3.5em;
  left : 0;
  min-width : 75em;
  position : relative;
  top : 0;
  width : 100%;
}

/*
  A container for the title and description.
*/
#o3watch_title_block
{
  color : #FFFFFF;
  float : left;
  left : 0;
  position : relative;
  top : 1em;
  width : 99%;
}

#o3watch_title_block a
{
  color : #FFFFFF;
}

#o3watch_title_block a:hover
{
  color : #AAAAAA;
}

/*
  The actual title is a link which leads back to the site home page.
*/
#o3watch_title
{
  float : left;
  font-size : 2em;
  left : 0;
  padding-left : 0.33em;
  position : relative;
  top : 0;
  width : 10em;
}

/*
  The subtitle.
*/
#o3watch_subtitle
{
  float : left;
  font-size : 1.25em;
  font-style : italic;
  left : 1.5em;
  position : relative;
  top : 0.1em;
  width : 28em;
}

/*********** The Site Navigation ************/

/*
  Just below the site title, there is a navigation menu. This is a
  series of gray boxes,outlined in a brighter green than the background,
  with white text. Each box contains a link to some part of the site. If
  the current page is in the section that the link would point to,  the
  background turns the same as the page background. Any link background
  brightens when hovered over.
*/

/*
  This is the container for the nav banner. It extends the full width of
  the body container, and it is fairly narrow in height. It contains
    tabs with links to each part of the website
    a link to the home page of the other hemisphere (not functioning yet)
*/
#site_navigation
{
  background-color : #2C5134;
  color : #FFFFFF;
  height : 2.5em;
  position : relative;
  width : 100%;
}

/*
  There are two classes of links within the nav header. The first,
  "elsewhere" has links that lead to other sections of the site.  This
  has a gray background.
*/
.nav_elsewhere
{
  background-color : #2E2E2E;
}

.nav_elsewhere:hover
{
  background-color : #5D5D5D;
}

/*
  The other class of link in the nav header is "here", which points to
  the current section. This has a green backgrond.
*/
.nav_here
{
  background-color : #2C5134;
  border-top : 1px solid #2E2E2E;
}

.nav_here:hover
{
  background-color : #4B6751;
}

/*
  In addition to the two classes of links, each link in the nav header
  has one of the following five IDs. Each has its own starting location
  They are placed absolutely.
*/
#nav_historical,#nav_meteorology,#nav_facts,#nav_multimedia,#nav_education,#nav_vortex
{
  border-left : 2px solid #448462;
  border-right : 2px solid #448462;
  border-top : 2px solid #448462;
  bottom : 0;
  color : #FFFFFF;
  font-size : 1.2em;
  font-weight : bold;
  padding-top : 0.4em;
  position : absolute;
  text-align : center;
  top : 0;
  width : 8em;
}

#nav_historical {
  left : 0.5em;
}
#nav_meteorology {
  left : 9.5em;
}
#nav_facts {
  left : 18.5em;
}
#nav_multimedia {
  left : 27.5em;
}
#nav_education {
  left : 36.5em;
}
#nav_vortex {
  left : 27.5em;
}

/*
  A link to the home page of the other hemisphere. This aligns to the right
  side of the page and moves with the page.
*/
#o3watch_hemisphere
{
  background-color : #2E2E2E;
  border-left : 2px solid #448462;
  border-right : 2px solid #448462;
  border-top : 2px solid #448462;
  bottom : 0;
  color : #FFFFFF;
  font-size : 1.2em;
  font-weight : bold;
  padding-top : 0.4em;
  position : absolute;
  right : 0;
  text-align : center;
  top : 0;
  width : 12em;
}

#o3watch_hemisphere a
{
  color : #FFFFFF;
}

#o3watch_hemisphere a:hover
{
  color : #FFFFFF;
}

#o3watch_hemisphere:hover
{
  color : #FFFFFF;
  background-color : #5D5D5D;
}

/*********** The Content Container ************/
/*
  This container hold the page's actual content, aside from headers and
  footers. We put a little padding all around, so the content
  does not press against the sides. 
*/
#content:after
{
  clear: both; 
  content: 'False text to clear the visual page for footer info.'; 
  display: block; 
  height: 0; 
  visibility: hidden;
}

#content
{
  display: inline-block;
  left : 0;
  margin : 1em 10px 1em 10px;
  position : relative;
  top : 0;
}

/*\*/
* html #content
{
  height: 1%;
}

#content
{
  display: block;
}
/* */

/*
  Table for animations.
*/
table.anim
{
  margin : 0 0 1em 0;
  text-align : center;
}

/*
  Animation table headers. Align text left and add a bit for padding the widths.
*/
table.anim th
{
  padding : 0 0 0 0;
  text-align : center;
}

/*
  Animation table left headers. Add padding at the top (for spacing between 
  groups), and pad to the right.
*/
table.anim th.anim_left
{
  padding : 0 0 0 0;
  text-align : left;
}

table.anim th.anim_decade
{
  padding : 1em 1em 0 0;
  text-align : left;
}

/*
  Animation table cells. Align text centered, add a bit for padding the widths, 
  and push the text to the bottom.
*/
table.anim td
{
/*  height : 1em; */
  padding : 0 0.5em 0 0.5em;  
  text-align : center;
  vertical-align : bottom;
}


/*********** The Standard NASA Footer ************/

/*
  Everything is inside this container. The footer extends the full
  width of the body container. The background is light gray, and the
  default text color is white. 

  The footer banner has two parts:
    the NASA footer
    the footer information
*/
#footer
{
  background-color : #2E2E2E;
  border-top : 1px solid #000000;
  color : #FFFFFF;
  height : 7.0em;
  min-width : 75em;
  position : relative;
  width : 100%;
}

#footer a
{
  color : #FFFFFF;
}

#footer a:hover
{
  color : #AAAAAA;
}

/*
  The NASA footer contains the NASA meatball logo and the Goddard signature.
*/

#nasa_footer
{
  float : left;
  height : 100%;
  margin : 0 0 0 0;
  padding : 0 0 0 0;
  position : relative;
  width : 26em;
}

#nasa_sig
{
  float : left;
  left : 3em;
  position : relative;
  top : 0.5em;
  width : 15em;
}

#nasa_sig img
{
  height : 6em;
  left : 0;
  position : relative;
  top : 0;
}

/*
  The footer info contains the the NASA official, the curator, the
  update date, the credit notice, the privacy link, and the disclaimer link.
*/

#footer_info
{
  color : #FFFFFF;
  float : right;
  height : 100%;
  line-height : 100%;
  position : relative;
  right : 1em;
  width : 44em;
}

#footer_info_text
{
  color : #FFFFFF;
  float : left;
  height : 80%;
  left : 0;
  position : relative;
  top : 0;
  width : 100%;
}

#footer_text
{
  color : #FFFFFF;
  float : left;
  height : 100%;
  left : 0;
  line-height : 100%;
  position : relative;
  width : 20em;
}

/*
  Links to the NASA privacy page and our disclaimer page.
*/
#footer_links
{
  color : #FFFFFF;
  float : right;
  height : 100%;
  line-height : 100%;
  margin : 0 0 0 0;
  padding : 0 0 0 0;
  position : relative;
  right : 0;
  width : 17em;
}

/*
  Give extra space to the credit text.
*/
#nasa_credit
{
  float : left;
  height : 20%;
  left : 4em;
  position : relative;
  top : 0;
  width : 38em;
}


/*
****************  For Print Media  ****************
*/

@media print
{
  *
  {
    background-color : #FFFFFF;
    color : #000000;
  }

  a
  {
    color : #000000;
  }

  .page_bg
  {
    background-color : #FFFFFF;
    background-image : none;
    background-position : top center;
    background-repeat : no-repeat;
  }

  html
  {
    line-height : 100%;
  }

  body
  {
    font-family : Helvetica, Arial, sans-serif;
    margin : 0 0 0 0;
  }

  #body
  {
    min-width : 0;
    border-bottom : 0 solid #FFFFFF;
  }

  #nasa_header
  {
    background-color : #FFFFFF;
    border-bottom : 1px solid #000000;
    color : #000000;
    height : 4em;
    position : relative;
    width : 100%;
  }

  .nasa_logo
  {
    display : none;
  }

  #nasa_name_block
  {
    color : #000000;
  }

  #nasa_name_block a
  {
    color : #000000;
  }

  #nasa_name
  {
    color : #000000;
    margin : 0 0 0 0;
  }

  #gsfc_name
  {
    color : #000000;
    top : 1.5em;
  }

  #gsfc_org_links
  {
    color : #000000;
    top : 2.2em;
  }

  #gsfc_org_links a
  {
    color : #000000;
  }

  #o3watch_header
  {
    background-color : #FFFFFF;
    border-bottom : 1px solid #000000;
    position : relative;
    top : 0;
    width : 100%;
  }

  #o3watch_title_block
  {
    color : #000000;
  }

  #o3watch_title_block a
  {
    color : #000000;
  }

  #o3watch_subtitle
  {
    color : #000000;
  }

  #site_navigation
  {
    display : none;
  }

  #footer
  {
    margin : 0 0 0 0;
    color : #000000;
  }

  #nasa_footer
  {
    display : none;
  }

  #footer_info
  {
    float : left;
    height : 100%;
    left : 0;
    right : 0;
    width : 100%;
  }

  #footer_links
  {
    display : none;
  }
}

@media aural
{
  #nasa_bypass
  {
    display : block;
  }

  abbr.spell
  {
    speak : spell-out;
  }

}

@media braille
{
  #nasa_bypass
  {
    display : block;
  }
}