/*

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

   Written by:
      Rob Simmon
      Leslie Lait

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

/*------------------ met pages --------------------------*/

/*
  Container for the content.
*/
div.met_content {
  float : left;
  width : 100%;
  text-align : left;
}

/*
  Explanatory text about the particular page.
*/
div#met_text {
  float : left;
  margin : 0 0 0 0;
  padding : 0 0 0 0;
  text-align : left;
  width : 100%;
}

/*
  A list of year links to the same variable, but for other years. Add a
  bit of space at the bottom.
*/
div#met_archive {
  margin : 0 0 0 0;
  text-align : left;
  width : 100%;
}

/*
  For the archive, the years are a list.
*/
ul.yearly {
  margin : 0 0 0 0;
  padding : 0 0 0 0;
  text-align : left;
}

/*
  Each year of the archive is a single list item. It should be displayed
  inline. The non-link is the current year, so we incrinlineease the size
  slightly and put it in bold, so that it stands out from all other
  years.
*/
ul.yearly li {
  border : none;
  display : inline;
  font-weight : bold;
  margin : 0 0 0 0;
  padding : 0 1em 0 0;
  text-align : left;
}

/*
  This is the format for all other years. We need to undo the increase
  in font size, so that the relative font size is 1.
*/
ul.yearly li a {
  font-weight : normal;
  padding : 0 0 0 0;
  text-align : left;
  text-decoration : none;
}

div#met_links {
  float : left;
  width : 100%;
  text-align : left;
}

/*
  This is the section for the actual links to the other met pages. The
  font info for the current page is specified here. The links are
  specified below.
*/
ul#met_section{
  background-image : url("/images/section_background.jpg");
  color : #FFFFFF;
  float : right;
  font-size : 1.1em;
  margin : 0 0 .5em 1.5em;
  padding : 0 0 0 0;
  width : 12em;
}

/*
  The data sources themselves are centered vertically in little boxes.
*/
ul#met_section li {
  border-top : #FFFFFF solid 1px;
  color : #FFFFFF;
  display : block;
  font-size : 1.0em;
  font-weight : bold;
  height : 1.5em;
  margin : 0 0 0 0;
  padding : 0.2em 0 0 .5em;
  vertical-align : middle;
}

/* 
  The data sources are links, so we control the text appearance here.
*/
ul#met_section a {
  color : #FFFFFF;
  font-weight : normal;
  padding : 0 0 0 0;
  text-decoration : none;
}

/*
  This is a link to other version of the web page. It should appear
  above the link box and lined up with the text of that box.
*/
div#other_version {
  float : right;
  margin : -2em 0 0 0;
  text-align : left;
  text-decoration : none;
  width : 12em;
}

/*
  The appearance of the link itself
*/
div#other_version a {
  text-decoration : none;
}

div#IE_version {
  float : right;
  font-size : 1.2em;
  margin : .5em 0 0 0;
  text-align : left;
  text-decoration : none;
  width : 100%;
}

/*
  The section of gray-shade plots. We put in a minimum height to handle
  the figure captions. This only occurs in the menu-based version.
*/
div#met_gray_shade {
  clear : both;
  margin : 0 0 0 0;
  padding : 1em 0 0 0;
  width : 100%;
}

div#met_gray_shade p {
  clear : both;
  margin : 0 0 0 0;
  padding : 0 0 0 0;
  width : 100%;
}

/*
  This is the a container for the menu items, the image, and the image
  captions.
*/
div.met_perm_image {
  float : left;
  margin : 220px 0 6em 0;
  position : relative;
  width : 100%;
}

/*
  The placement of the image that will be seen at all times on the page,
  except on rollover of other menu items. We give it a lower Z-index, so
  that the rollovers will appear instead.
*/
div.met_perm_image img {
  height : 192px;
  left : 0;
  position : absolute;
  top : -210px;
  width : 350px;
  z-index : 25;
}

/*
  The placement of the figure captions that will be seen at all times on
  the page, except on rollover of other menu items. We give it a lower
  Z-index, so that the rollovers will appear instead.
*/
div.met_perm_image span {
  background : #FFFFFF;
  color : #000000;
  height : 167px;
  left : 400px;
  margin : 25px 0 0 0;
  padding : 0 0 0 0;
  position : absolute;
  text-align : left;
  text-decoration : none;
  top : -210px;
  width : 355px;
  z-index : 25;
}

/*
  The following section is the magic that makes the drop-down menus
  work. Setting the cursor to default allows the "arrow" to be seen
  unless one of the linked menu items is rolled over. The width is for
  the menu as a whole.
*/
ul.met_imagemenu {
  cursor : default;
  display : block;
  margin : 0 0 0 0;
  padding : 0 0 0 0;
  position : relative;
  text-align : center;
  width : 17em;
  z-index : 50;
}

/*
  The appearance of the menu items.
*/
ul.met_imagemenu li {
  background-color : #666;
  border-bottom : 1px solid #FFFFFF;
/*  border-bottom : 2px solid #444;
  border-left : 2px solid #444;
  border-right : 2px solid #888;
  border-top : 2px solid #888;
*/  color : #FFFFFF;
  height : 1.5em;
  list-style-type : none;
  margin : 0 0 0 0;
  padding : 0 0 0 0.2em;
  text-align : left;
}

/*
  This changes the appearance of the menu items when rolled over.
*/
ul.met_imagemenu li:hover {
  background-color : #666;
  border-bottom : 1px solid #FFFFFF;
/*  border-bottom : 2px solid #888;
  border-left : 2px solid #888;
  border-right : 2px solid #444;
  border-top : 2px solid #444;
*/  color : #FFFFFF;
}

/*
  The layout for the submenus. This makes sure that the submenues will
  not be displayed until the parent menu item is rolled over.
*/
ul.met_imagemenu li ul {
  display : none;
  left : 16.5em;
  position : relative;
  top : -2.85em;
  width : 4.5em;
}

/*
  The appearance of linked menu items.
*/
ul.met_imagemenu li a {
  color : #FFFFFF;
  display : block;
  text-decoration : none;
}

/*
  Once we roll over the parent menu, we want to see the submenu.
*/
ul.met_imagemenu li:hover ul {
  display : block;
}

/*
  We are using spans for the captions. This will hide the caption until
  the assoicated menu item is rolled over.
*/
ul.met_imagemenu li span {
  display : none;
  height : 0;
  width : 0;
}

/*
  The caption for the menu item rolled over will magically appear over
  the static caption. It needs to line up with the static caption.
*/
ul.met_imagemenu li:hover span {
  background : #FFFFFF;
  color : #000000;
  display : block;
  height : 167px;
  left : 400px;
  overflow : auto;
  position : absolute;
  text-align : left;
  text-decoration : none;
  top : -210px;
  width : 355px;
  z-index : 75;
}

/*
  This will hide the image until the associated menu item is rolled over.
*/
ul.met_imagemenu li img {
  border-width : 0;
  height : 0;
  width : 0;
}

/*
  The image for the menu item rolled over will magically appear over
  the static image. It needs to line up with the static image.
*/
ul.met_imagemenu li:hover img {
  border-width : 0;
  display : block;
  height : 192px;
  left : 0;
  margin : 0 0 0 0;
  padding : 0 0 0 0;
  position: absolute;
  top : -210px;
  width : 350px;
  z-index : 50;
}

/*
  This sets what happens when rolling over a linked menu item. The
  background color changes and cursor changes to a pointer.
*/
ul.met_imagemenu li:hover > a {
  color : #FFFFFF;
  cursor : pointer;
  background-color : #069;
}

/*
  In the tables-based met pages, puts a permanent image up on the left.
*/
img.met_image_left {
  float : left;
  margin : 0.5em 0 1.0em 0;
}

/*
  In the tables-based met pages, puts a permanent image up on the right.
*/
img.met_image_right {
  margin : 0.5em 0.5em 1.0em 0;
  float : right;
}

/*
  Need to clear out 
*/
h2.met_tab_h2 {
  clear : both;
}

/*
  For the tables-based pages, this defines the overall table setup.
*/
table.met_table {
  border-spacing: 0 1em;
  border: 0;
  clear: both;
  margin: 0 1em 1em 1em ;
  padding: 0 0 0 0;
  position: relative;
}

/*
  This is the left side of the table, containing the titles and links.
*/
td.met_table_left {
  font-weight : bold;
  margin : 0 0 0 0;
  padding : 0 0.5em 0 0;
  text-align : left ;
  vertical-align : middle;
  width : 16em;
}

/*
  Defines what is in the list of links.
*/
td.met_table_left div.heading {
  font-weight : normal;
}

/*
  Sets up the overall look of the left side
*/
td.met_table_left ul {
  font-weight : normal;
  margin : 0 0 0 0;
  padding : 0 0 0 0;
  text-align: left ;
}

/*
  Defines the look of the links.
*/
td.met_table_left li {
  display : inline;
  margin : 0 0 0 0;
  padding : 0 0.5em 0 0;
  text-align : left;
  text-decoration : none;
}

/*
  This is the right side of the table, containing the titles and links.
*/
td.met_table_right {
  background-color : #EEEEEE;
  margin : 0 0 0 0;
  padding : 0.25em 0.25em 0.25em 0.25em;
  text-align : left;
  vertical-align : middle;
}

div.met_descrip {
  clear : both;
  width : 100%;
}

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

/*
  Container for the content.
*/
div.met_content {
  float : left;
  width : 100%;
  text-align : left;
}