/* $Id: multiple-graphs.css,v 1.6 2008/02/21 01:31:22 paulmillar Exp $ */

/**
 *  Copyright (c) 2007 the authors (see the file AUTHORS.gm file for
 *  a complete list)
 *
 *  All rights reserved.
 *
 *  Redistribution and use in source and binary forms, with or without
 *  modification, are permitted provided that the following conditions are
 *  met:
 *
 *   * Redistributions of source code must retain the above copyright
 *     notice, this list of conditions and the following disclaimer.
 *   * Redistributions in binary form must reproduce the above copyright
 *     notice, this list of conditions and the following disclaimer in
 *     the documentation and/or other materials provided with the
 *     distribution.
 *   * Neither the name of the University of Glasgow nor the name of
 *     GridPP nor the names of any contributors to this software may be
 *     used to endorse or promote products derived from this software
 *     without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 * "AS IS" AND ANY EXPRESSED OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

/**
 *  The CSS for frame-like multiple graphs.  This includes
 *  some slight changes to the underlying Ganglia CSS (within frames)
 *  plus some extra effects (like the hover-frames).
 */


/**
 *  CSS for the frames
 */
div.mg_frame {
  margin-bottom: 10px;
  margin-top: 5px;
  padding: 12px;
  border-style: solid;
  border-width: thin
}

div.mg_frame h1 {
  margin-top: 0px;
  margin-bottom: 2ex;
}

div.mg_frame h1 span.title {
  padding-right: 12px;
}

div.mg_frame h1 img {
  border: 0px;
  padding: 0px;
  margin: 2px;
  vertical-align: top;
  filter:alpha(opacity=45);
  -moz-opacity: 0.45;
  opacity: 0.45;
}

div.mg_frame h1 img:hover {
  filter:alpha(opacity=100);
  -moz-opacity: 1.0;
  opacity: 1.0;
}

div.mg_frame h2 {
  margin-top: 3ex;
  margin-bottom: 1ex;
}


div.mg_graph {
  margin-bottom: 15px;
}

img.mg_graph {
  margin-bottom: 2px;
  border: 0px;
}

img.mg_pie {
  margin-bottom: 12px;
  border: 0px
}

img.mg_icon {
  border: 0px;
  vertical-align: top;
}


/*  Default for our tables */
table.mg {
  background: #F0F0F0;
  padding: 5px;
  border-style: solid;
  border-width: thin;
  border-color: #bbbbbb;
  margin: 20px;
  font-size: 11pt;
  font-family: serif;
  vertical-align: text-bottom
}


/**
 *  Style for table header at the top of a table.
 */
table.mg tr.mth {
  font-size: 12pt;
  font-weight: bold;
  text-align: center;
  margin: 2px 0px 0px 0px;
  padding: 0px;
}


/**
 *  Table left-column header
 */
table.mg tr td.mtlh {
  text-align: right;
  font-weight: bold;
  vertical-align: text-top;
}


tr.mth td.secondary {
  font-size: 11pt;
  margin: 0px 3px;
  padding: 0px;
}

tr.mth td.tertiary {
  font-size: 11pt;
  font-weight: normal;
  font-style: italic;
  margin: 0px 2px;
  padding: 0px;
}

tr.mg_popup td {
  vertical-align: text-bottom
  margin: 0px;
  padding: 0px 0.4em;
}


/**
 *  Colours for "off" (red), "on" (green), "havedata" (black) and "nodata" (grey).
 */
span.off {
  color: #700000
}
span.on {
  color: #003000
}

td.havedata {
  color: #000000;
}

td.nodata {
  color: #909090;
}


ul.tight {
  margin: 0;
}

ul.tight * {
  margin: 0;
  padding: 0;
  border: 0;
}

/**
 *  CSS to support the hover pop-up in tables.
 */


/**
 *  Highlight colours...
 */
tr.mg_popup:hover {
  background: #E8E8E8;
}

tr.mg_popup {
  border-style: none;
}

tr.mg_popup:hover th {
  color: #E8E800;
}

tr.mg_popup:hover span.on {
  color: #008000
}

tr.mg_popup:hover span.off {
  color: #DD0000
}

tr.mg_popup:hover > td.havedata {
  color: #0000DD;
}


tr.mg_popup > td.mg_hidden {
  position: relative;
}

/* Default, don't display */
tr.mg_popup > td.mg_hidden > div {
  position: fixed;
  display: none; 
}


/*  Used for our tables  */
tr.mg_popup:hover > td.mg_hidden > div {
  position: fixed;
  display: block;
  top: 15%; left: 300px; height: auto; width: auto;
  min-width: 300px;
  min-height: 200px;
  padding: 20px;

  border-style: solid;
  border-width: thin;
  border-color: #888888;
  background: #ffffee;
}


td.mg_hidden h2 {
  padding-top: 0px;
  margin-top: 0px;
}


/* is this necessary? */
tr.mg_popup {
  min-width: 250px;
}



/**
 *  Support pop-up when hovering over a SPAN.
 */

span.mg_popup {
  margin: 10px;
  font-size: 70%;  // make underlying text a bit smaller
}


/* By default, don't display */
span.mg_popup > div {
  position: fixed;
  display: none;
}

span.mg_popup:hover > div {
  position: fixed;
  display: block;
  top: 15%; left: 300px; height: auto; width: auto;
  min-width: 300px;
  min-height: 200px;
  padding: 20px;

  border-style: solid;
  border-width: thin;
  border-color: #888888;
  background: #ffffee;
}

span.mg_popup h2 {
  padding-top: 0px;
  margin-top: 0px;
}