/*
  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
*/

/*
  ===========================================================
                  Page-Specific Styles
  ===========================================================
*/


/*------------------  Meteorology Page --------------------*/

/*
  The progression of the variables through the year.
*/
#met_var_progression
{
  float : left;
  margin : 0 -14em 0 0;
  padding : 0 0 0 0;
  width : 100%;
}

/*
  The progression of the variables through the year.
*/
#met_progression
{
  float : left;
  margin : 0 -1em 0 0;
  padding : 0 15em 0 0;
}

/*
  Links to the other met pages.
*/
#met_links
{
  float : right;
  margin : -1.5em 0 1em 2em;
  padding : 0 0 0 0;
  width : 12em;
}

/*
  A list of links to other years.
*/
#met_archive
{
  float : left;
  margin : 0 0 1em 0;
  padding : 0 0 0 0;
  width : 12em;
}

#met_archive li
{
  float : left;
  margin : 0 0 0 0;
  padding : 0 0.5em 0 0;
}

/*
  A list of links to other met pages.
*/
#met_var_list
{
  clear : left;
  float : left;
  margin : 0 0 1em 0;
  padding : 0 0 0 0;
}

#met_var_list li
{
  clear : left;
  float : left;
  margin : 0 0 0 0;
  padding : 0 0 0 0;
}

/*
  A list of links to other data sets.
*/
#met_data_set
{
  clear : left;
  float : left;
  margin : 0 0 1em 0;
  padding : 0 0 0 0;
  width : 9em;
}

#met_data_set li
{
  clear : left;
  float : left;
  margin : 0 0 0 0;
  padding : 0 0 0 0;
}

/*
  The section of gray-shade plots.
*/
.met_gray_shade
{
  float : left;
  margin : 0 0 0 0;
  padding : 0 0 0 0;
  width : 100%;
}

#met_gray_shades
{
  float : left;
  margin : 0 0 0 0;
  padding : 0 0 0 0;
  width : 100%;
}

.var_desc
{
  float : right;
  margin : 0 0 1em 0;
  padding : 0 0 0 0;
  width : 50%;
}

.var_desc_ozone
{
  float : right;
  margin : 0 0 1em 0;
  padding : 0 0 0 0;
  width : 70%;
}
/*
  This is the left side of the table, containing the titles and links.
*/
.var_links
{
  float : left;
  margin : 0 0 0 0;
  padding : 0 0 1em 0;
  width : 30%;
}

/*
  This is the left side of the table, containing the titles and links.
*/
.var_links_ozone
{
  float : left;
  margin : 0 0 0 0;
  padding : 0 0 1em 0 ;
  width : 10%;
}

/*
  Sets up the overall look of the left side
*/
.var_links ul
{
  margin : 0 0 0 0.5em;
  padding : 0 0 0 0;
}

/*
  Defines the look of the links.
*/
.var_links li
{
  display : inline;
  margin : 0 0 0 0;
  padding : 0 0 0 0.1em;
}

/*
  This is the middle of the table containing the sparkline images.
*/
.var_spark
{
  float : left;
  margin : 0 0 1em 0;
  padding : 0 0 0 0;
  width : 20%;
}

div#annual_data
{
  float : left;
  margin : 0 0 0 0;
  padding : 0 0 0 0;
  width : 100%;
}

.annual_section
{
  float : left;
  margin : 0 0 0 0;
  padding : 0 0 0 0;
  width : 100%;
}

.annual_desc
{
  float : right;
  margin : 0 0 1em 0;
  padding : 0 0 0 0;
  width : 90%;
}

/*
  This is the left side of the table, containing the titles and links.
*/
.annual_links
{
  float : left;
  margin : 0 0 0 0;
  padding : 0 0 1em 0 ;
  width : 10%;
}

/*
  Sets up the overall look of the left side
*/
.annual_links ul
{
  margin : 0 0 0.5em 0.5em;
  padding : 0 0 0 0;
}

/*
  Defines the look of the links.
*/
.annual_links li
{
  display : inline;
  margin : 0 0 0 0;
  padding : 0 0 0 0;
}

.annual_menu
{
  color : #006699;
  cursor : pointer;
  display : inline-block;
  margin : 0 0 0 0;
  padding : 0 0 0 0;
  position : relative;
}

.annual_menu button
{
  background : white;
  color : #006699;
  font-family : Helvetica, Arial, sans-serif;
}

.annual_menu:hover button
{
  background : black;
  color : white;
}

.annual_menu_items
{
  background : white;
  display : none;
  position : absolute;
  width : 10em;
  z-index : 1;
}

.annual_menu_items a
{
  display : block;
}

.annual_menu:hover .annual_menu_items
{
  display : block;
  padding : 0 0.5em 0.5em 0.5em;
}
/*
  For print, the background image will probably not appear, so put a
  gray box around the list
*/
@media print {
  ul#met_section {
    border: thin solid #CCC;
  }
}