/*

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

   Written by:
      Rob Simmon
      Leslie Lait
      Eric Nash

   Revision history:
      $Log: o3watch.css,v $
*/


/*************  NASA STYLE ****************/

/*
  The body is one large black area.  This is a background. This sets the
  font style, color, and size.
*/
body
{
  background-color : #000000;
  color : #000000;
  font-family : Arial, Helvetica, sans-serif;
  font-size : 100%;
  line-height : 140%;
  margin : 10px 10px 10px 10px;
}

/*
  For print, leave no margin.
*/
@media print
{
  body
  {
    margin : 0 0 0 0;
    padding : 0 0 0 0;
  }
}

/*
  Within the black body background is a DIV of class "body" that
  contains all the page's content. This DIV has a proportioned width, 
  and is white.
*/
div.body
{
  background-color : #FFFFFF;
  margin : auto;
  padding : 0 0 0 0;
  text-align : left;
  min-width : 780px;
/*  width : 61em;*/
}

/*
  For print, leave no margin.
*/
@media print
{
  div.body
  {
    margin : 0 0 0 0;
    padding : 0 0 0 0;
  }
}

/*
  The "body" DIV class, is divided into three section: the standard NASA
  header, the page-unique content, and the standard NASA footer,Each has
  a DIV associated with it, that is specified below. First, some general
  specifications are defined.
*/

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

/*
  Links appear with no underlining, blue-green normally, and
  orangish-red when hovering.
*/
a
{
  color : #006699;
  text-decoration : none;
}
a:hover
{
  color : #DC282F;
  text-decoration : none;
}

/*
  Main H1 header:
    50% larger than normal and bold
    left-justified
    extra space on bottom
*/
h1
{
  font-size : 1.5em;
  font-weight : bold;
  margin : 0 0 .5em 0;
  padding : 0 0 0 0;
  text-align : left;
}

/*
  H2 header:
    25% larger than normal and bold
    extra space on top
*/
h2
{
  font-size : 1.25em;
  font-weight : bold;
  margin : 0.5em 0 0 0;
  padding : 0 0 0 0;
}

/*
  A class to make sure that the header starts in a new section.
*/

h2.h2_clear
{
  clear : both;
}

/*
  H3 header:
    normal size and bold
    more extra space on top
*/
h3
{
  font-size : 1em;
  font-weight : bold;
  margin : 0.5em 0 0 0;
  padding : 0 0 0 0;
}

/*
  H4 header:
    extra space on top
*/
h4
{
  font-size : 1em;
  margin : 0.5em 0 0 0;
  padding : 0 0 0 0;
}

/*
  Definition lists.
*/
dl
{
  margin : 0.2em 0 0 0;
  padding : 0 0 0 0;
}
dt
{
  font-size : 1em;
  font-weight : bold;
  margin : 0.5em 0 0 0;
  padding : 0 0 0 0;
}
dd
{
   font-size : 1em;
   margin : 0 0 0 0;
   padding : 0 0 0 0;
}

/*
  Unordered list : no bullets
*/
ul
{
  list-style : none;
  margin : 0.5em 0 0 0;
  padding : 0 0 0 0;
}

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

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

/*
  No margins or padding around an image
*/
img
{
   border : 0;
   margin: 0 0 0 0;
   padding: 0 0 0 0;
}

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

/*
  Everything is inside this container DIV. The header extends the full
  width of the "body"-class DIV. The background is light gray, and the
  default text color is a darker gray. 

  The header banner has four parts:
       the NASA meatball logo
       the title of the site
       a few NASA organizational links
       a search query form

  The positioning here is relative but unspecified, so the banner
  appears in its normal position. Its component pieces will be
  positioned absolutely within the banner.
*/

div#nasa_header
{
   background-color : #CCCCCC;
   border : 0;
   border-spacing : 0;
   color : #333333;
   font-weight : normal;
   height : 6em;
   margin : 0 0 0 0;
   padding : 0 0 0 0;
   position : relative;
   width : 100%;
}

/*
  For print media, we put a gray border around the header, since most
  browsers will not print background colors or images.
*/
@media print
{
  div#nasa_header
  {
    border : thin solid #CCCCCC;
  }
}

/*
  This provides a bypass for the navigation links.
*/
div#nasa_bypass
{
  display : none;
}

@media aural, braille
{
  div#nasa_bypass
  {
    display : block;
  }
}

/*
  The NASA logo goes to the left side of the banner.
*/
div.nasa_logo
{
  height : 100%;
  left : 0;
  position : absolute;
  width : 15%;
}

div.nasa_logo img
{
  height : 6em;
  left : 0;
}

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

div#nasa_sitetitle
{
  height : 100%;
  left : 15%;
  position : absolute;
  width : 35%;
}

/*
  Here is the title.
*/

div#nasa_title
{
  font-size : 2em;
  font-weight : bold;
  left : 0;
  position : absolute;
  top : 20%;
}

/*
  Here is the subtitle.
*/
div#nasa_subtitle
{
  left : 0;
  position : absolute;
  top : 60%;
}

/*
  The NASA organizational links are in an unordered list.
*/
div#nasa_links
{
  border-left : 1px solid #666666;
  border-right : 1px solid #666666;
  height : 100%;
  left : 50%;
  position : absolute;
  width : 25%;
}

/*
  The list items themselves are blue-green, with a gray border to the
  left. There are no bullets (the text begins with a "+" instead)
*/
div#nasa_links ul
{
  left : 0;
  list-style-type : none;
  margin : 0 0 0 0;
  padding : 0 0 0 0;
  position : absolute;
  top : 16.67%;
}

/*
  This DIV container holds the search form. It has a blue-green background.
*/
div#nasa_search
{
  color : #FFFFFF;
  height : 100%;
  left : 75%;
  position : absolute;
  top : 0;
  width : 25%;
}

/*
  Display the search form itself.
*/
form#nasa_search_form
{
  left : 5%;
  margin : 0 0 0 0;
  padding : 0 0 0 0;
  position : absolute;
  top : 2em;
  width : 90%;
}

/*
  Display the search form itself.
*/
form#nasa_search_form input
{
  color : #006699;
  left : 0;
  width : 45%;
}

/*
  Display the submit button for the form.
*/
form#nasa_search_form input#submit
{
  background-color : #CCCCCC;
  border : thin solid #CCCCCC;
}

/*
  There could be a link to an "advanced search" page. If it existed, it
  would be described here.
*/
div #nasa_adv_search
{
}

/* supress the search box in print media */
@media print
{
  div#nasa_search
  {
    display : none;
  }
  div#nasa_search_form
  {
    display : none;
  }
  div#nasa_adv_search
  {
    display : none;
  }
}

/*
  Like the header, the standard NASA footer extends the full width of
  the "body"-class DIV. Its background, too, is light gray.
*/
div#nasa_footer
{
  background-color : #CCCCCC;
  border : 0;
  border-spacing : 0;
  clear : both;
  height : 6em;
  margin : 0 0 0 0;
  padding : 0;
  position : relative;
  width : 100%;
}

/*
  For print media, we put a gray border around the footer, since most
  browsers will not print background colors or images.
*/
@media print {
  div#nasa_footer {
    background-color : #CCCCCC;
    border : thin solid #CCCCCC;
  }
}

/*
  Footer material.
*/


/* The list of who/when goes to the right, and we include the NASA meatball
   in the background to the left.
*/
div#nasa_footer ul
{
  left : 51.5%;
  list-style : none;
  margin : .5em 1em 0 0;
  padding : 0 0 0 0;
  position : absolute;
  top : 0;
  width : 47%;
}

div#nasa_footer  li
{
  margin : 0 0 0 0;
  padding : 0 0 0 0;
}

/*
  Misc. text (i.e., the link to the privacy policy page) goes on the
  left and occupies half the available width.
*/
div#nasa_footer ul#nasa_priv_credit
{
  left : 15%;
  position : absolute;
  top : 0%;
  width : 45%;
}

div#nasa_footer ul#nasa_priv_credit li
{
  left : 0;
}


/*************  NASA STYLE ENDS ****************/


/*------------  Navigation Header -------------------*/


/*
  Just below the NASA header banner, there is a navigation menu.  This
  is a series of gray boxes with white text, each of which contains a
  link to some part of the site. EXCEPT: if the current page is in the
  section that the link would point to, it is orangish-red. Any link
  background turns blue-green when hovered over.
*/

/*
  This is the container for the nav banner. It extends the full width of
  the "body"-class DIV, and it is fairly narrow in height.
*/
div#nav_menuhead {
  border : 0;
  border-spacing : 0;
  color : #FFFFFF;
  height : 2em;
  margin : 0 0 0 0;
  padding : 0 0 0 0;
  page-break-after : avoid;
  position : relative;
  text-transform : uppercase;
  width : 100%;
  text-decoration : none;
}

/*
  There are two classes of SPAN within the nav header. The first,
  "elsewhere" has links that lead to other sections of the site.  This
  has a gray background.
*/
span.nav_elsewhere {
  background-color : #666666;
/*  background-image : url("/images/navbar_normal.gif"); */
  background-position : top left;
  background-repeat : repeat-x;
  margin : 0 0 0 0;
}
span.nav_elsewhere:hover {
  background-color : #006699 ;
/*  background-image : url("/images/navbar_hover.gif"); */
  background-position : top left;
  background-repeat : repeat-x;
  color : #DC282F;
  margin : 0 0 0 0;
}

/*
  The other class of SPAN in the nav header is "here", which points to
  the current section. This has an orangish-red backgrond.
*/
span.nav_here {
  background-color : #DC282F;
/*  background-image : url("/images/navbar_active.gif"); */
  background-position : top left;
  background-repeat : repeat-x;
  margin : 0 0 0 0;

}
span.nav_here:hover {
  background-color : #006699;
  color : #DC282F;
/*  background-image : url("/images/navbar_hover.gif"); */
}

/*
  In addition to the two classes of SPAN, each SPAN in the nav header
  has one of the following six IDs. Each has its own width and
  starting location, carefully calculated so that the sum of all the
  widths and their borders is the full width of the nav header.
*/
span#nav_home,span#nav_historical,span#nav_meteorology,span#nav_facts
,span#nav_multimedia,span#nav_education {
  font-weight : bold;
  margin : 0 0 0 0;
  padding : 0.3em 0 0.3em 0;
  position : absolute;
  text-align : center;
  top : 0;
}

span#nav_home {
  left : 0;
  width : 9%;
}

span#nav_historical {
  border-left : 1px solid #FFFFFF;
  left : 9%;
  width : 24%;
}
span#nav_meteorology {
  border-left : 1px solid #FFFFFF;
  left : 33%;
  width : 17%;
}
span#nav_facts {
  border-left : 1px solid #FFFFFF;
  left : 50%;
  width : 18%;
}
span#nav_multimedia {
  border-left : 1px solid #FFFFFF;
  left : 68%;
  width : 16%;
}
span#nav_education {
  border-left : 1px solid #FFFFFF;
  left : 84%;
  width : 15.9%;
}

/*
  Specify the link behavior in the nav header. Normally, links are
  undecorated and white on gray. But when the cursor hovers over
  them, they become white on blue-green.
*/
div#nav_menuhead a {
   color : #FFFFFF;
}

/*
  For print media, suppress display of all but the active box, and put
  that up into the standard NASA header, where the search box would
  otherwise be.
*/
@media print {
  span.nav_elsewhere {
    display : none;
  }
  span.nav_here {
    background-color : #DC282F;
    background-image : url("/images/navbar_active.gif");
    background-position : top left;
    background-repeat : repeat-x;
    border : thin solid #DC282F;
    color : black;
    margin : 0 0 0 0;
  }

/*
  Note: for print media, we put ALL the menu items at the same location
  in the header, but only one of them will be displayed: the active one.
*/
  span#nav_home,span#nav_historical,span#nav_meteorology,span#nav_facts
    ,span#nav_multimedia,span#nav_education {
    border-right : thin solid #DC282F;
    height : 21px;
    padding : 4px 0 0 0;
    position : absolute;
    right : 0px;
    text-align : center;
    top : -4.5em;
  }
  span#nav_home {
    left : 650px;
    width : 50px;
  }
  span#nav_historical {
    left : 560px;
    width : 170px;
  }
  span#nav_meteorology {
    left : 575px;
    width : 136px;
  }
  span#nav_facts {
    left : 590px;
    width : 119px;
  }
  span#nav_multimedia {
    left : 585px;
    width : 109px;
  }
  span#nav_education {
    left : 600px;
    width : 98px;
  }
}


/*
  ===========================================================
              Styles that apply to the entire site
  ===========================================================
*/


/*
  This DIV hold the page's actual content, aside from headers and
  footers We put a little padding on the sides and top, so the content
  does not press against the sides. And we push the whole thing down a
  little from the nav header.
*/
div#content {
   margin : 0 0 0 0;
   padding : .5em 1.5% 0 1.5%;
   position : relative;
   width : 97%;
}
/*
  Because the "content" DIV is very long, Mozilla wants to push it's
  start onto the next page. We want to avoid this. */
@media print {
  div#content {
    page-break-before : avoid;
  }
}