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

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

/*********** Home Page Specific ************/

/*
  This holds the intro text, the news items, the animation links, the
  data source links, and the ozone facts. We float it all the way to the
  right. The rest of the page is floated left with a fixed size. We let
  this expand to the size of the window
*/
#home_text
{
  float : right;
  top : 0;
  width : 100%;
}

/*
  This is the intro section. We set it to start past the left column.
*/
#home_intro
{
  margin : 0 0 0 488px;
}

/*
  This is the news section. It follows the intro section. We space it a
  bit downward and set it to start past the left column.
*/
#home_news
{
  margin : 2em 0 0 488px;
}

/*
  This is the animation links section. It follows the news section. We
  space it a bit downward and set it to start past the left column.
*/
#home_animation
{
  margin : 2em 0 0 488px;
}

/*
  This is the data source links section. It follows the animation
  section. We space it a bit downward and set it to start past the left
  column.
*/
#home_sources
{
  margin : 2em 0 0 488px;
}

/*
  Put a bit of vertical space between the outer link items.
*/
#home_sources>ul>li
{
  margin : 0.5em 0 0 0;
}

/*
  No extra vertical space before the inner link items.
*/
#home_sources>ul>li ul
{
  margin : 0 0 0 0;
}

/*
  Put a bit of horizontal space before the inner link items.
*/
#home_sources>ul>li li
{
  margin : 0 0 0 1em;
}

/*
  This is the ozone facts section. It follows the data source section.
  We space it a bit downward, put space below it, and set it to start
  past the left column.
*/
#home_facts
{
  margin : 2em 0 1em 488px;
}

/*
  This holds the main image along with the year-to-date and annual
  records sparkline plots. We place this to the left by doing a trick to
  float these to right with a fixed size and set the left margin to the
  fixed size, since we know the width of the images. Image backgrounds
  are white, so we leave this background white, also. 
*/
#home_images
{
  float : right;
  left : 0;
  margin : 0 -348px 0 0;
  top : 0;
  width : 348px;
}

#home_intro_first
{
  display : inline-block;
  font-size : 3em;
}

/*
  This holds the sparkline plots and it follows the main image caption.
*/
#home_met
{
  left : 0;
}

/*
  This holds the text and plot image for the daily time history for this
  season, year-to-date.
*/
#home_ytd
{
  float : left;
  margin : 2em 0 0 0;
}

/*
  This holds the text and plot image for the annual statistics. We need
  to clear to the left to guarantee that it falls below the year-to-date
  block. 
*/
#home_annual
{
  float : left;
  margin : 0 0 0 0;
}

/*
  This holds the previous week's images. We use another trick to place
  this in between the two columns. We  float these to right with a fixed
  size and set the left margin to the fixed size for this column + the
  left column, since we know the width of the images. Image backgrounds
  are white, so we leave this background white, also. 
*/
#last_week
{
  background : #FFFFFF;
  float : right;
  left : 0;
  margin : 0 -478px 0 0;
  padding : 0 0 0 0;
  top : 0;
  width : 120px;
}

/*
  Special code to handle  
*/
* html #last_week
{
	left : 348px;
}

#last_week ul
{
  display : inline;
}

#last_week ul li
{
  margin : 0 5px 0 0;
  text-align : right;
}

#last_week ul li.last_week_date
{
  margin : -0.5em 0 0 0.5em;
  text-align : left;
}

/*
  Don't print animation links.
*/
@media print
{
  #home_animation
  {
    display : none;
  }
}