styles.css

/* The Ganglia Web-frontend Cascading Style Sheet. */

body{ font: 75% "Trebuchet MS", sans-serif; margin: 5px;}

A:link
{
   color: rgb(32,41,204);
   text-decoration: none;
}

A:visited
{
   color: rgb(51,51,204);
   text-decoration: none;
}

A:active
{
   color: rgb(204,205,226);
   text-decoration: none;
}

h1 
{
   font: bold 18pt/22pt helvetica, sans-serif;
   color: rgb(12,17,142);
   margin-bottom: 2mm;
}

h2
{
   font: bold 14pt/16pt helvetica;
   color: rgb(12,17,142); 
   margin-left: 0.1em;
   margin-right: 0.1em;
}

h3
{
   font: bold 12pt/15pt helvetica, sans-serif;
   text-align: left;
   margin-left: 3mm;
   color: rgb(247,142,14);
}

h4
{
   font: bold 12pt/14pt helvetica;
   color: rgb(12,17,142); 
   margin-left: 0.1em;
   margin-right: 0.1em;
}

small
{
   font: 10pt/12pt arial, helvetica, sans-serif;
}

td.title
{
   font-size: larger;
   font-weight: normal;
   background: rgb(238,238,238);
   text-align: center;
}

td.metric
{
   background: rgb(217,218,224);
   padding: 2mm;
}

td.cluster
{
   background: rgb(238,238,238);
   /* padding: 1mm; */
}

td.grid
{
   vertical-align: top;
   background: rgb(204,204,255);
}

td.self
{
   vertical-align: top;
   text-align: center;
   background: rgb(255,153,153);
}

td.even
{
   background: rgb(201,205,234);
}

td.odd
{
   background: rgb(217,218,224);
}

td.small
{
   font: 10pt/12pt times, serif;
}

td.L1
{
   background: rgb(184,249,119);
}

td.L2
{
   background: rgb(213,249,119);
}

td.L3
{
   background: rgb(228,249,119);
}

td.L4
{
   background: rgb(245,249,119);
}

td.L5
{
   background: rgb(249,239,119);
}

td.L6
{
   background: rgb(249,219,119);
}

td.L7
{
   background: rgb(249,202,119);
}

td.L8
{
   background: rgb(249,182,119);
}

td.L9
{
   background: rgb(249,152,119);
}

td.L10
{
   background: rgb(249,124,119);
}

td.down
{
   background: rgb(255,153,153);
}

th 
{
   font: bold 12pt/14pt helvetica, sans-serif;
   color: rgb(238,238,238);
   background: rgb(80,80,80);
   border: thin solid rgb(47,47,47);
}

td em
{
   font: 8pt/10pt helvetica, sans-serif;
   color: rgb(31,31,112);
   font-style: normal;
}

td strong
{
   color: rgb(31,31,112);
   font-style: normal;
}

.footer
{
      font: 10pt/12pt helvetica, sans-serif;
      color: rgb(100,100,100);
}

#trend_range_menu {
   font-size: 10px
}

table {
  font-size: 1em ! important
}

.nobr
{
white-space:nowrap;
}
.noborder
{
border:0;
}
.icon16 
{
height:16px;width:16px;border:0;
}
.flotlegend
{
margin-left: 40px;
padding: 10px;
width: 85%;
clear: both;
border: 1px solid #000000;
background-opacity: 0.5;
background-color: #e5e5ff;
}
.flotlegendtoplabel label
{
display: block;
text-align: center;
size: small;
text-weight: bold;
}
/* Following buttons taken from http://ubuwaits.github.com/css3-buttons */
button.minimal-indent {
  background-color: #f3f3f3;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3 0%), to(#dddddd 50%));
  /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%);
  background-image: -moz-linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%);
  background-image: -ms-linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%);
  background-image: -o-linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%);
  background-image: linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%);
  border-right: 1px solid #dfdfdf;
  border-bottom: 1px solid #b4b4b4;
  border-right: 1px solid #dfdfdf;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef;
  -moz-box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef;
  -ms-box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef;
  -o-box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef;
  box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef;
  color: #666;
  font: bold 16px "helvetica neue", helvetica, arial, sans-serif;
  margin: 0;
  padding: 7px 0;
  text-shadow: 0 1px 1px #fff;
  width: 150px; }
  button.minimal-indent:hover {
    background-color: #e5e5e5;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e5e5e5 0%), to(#d1d1d1 50%));
    /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%);
    background-image: -moz-linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%);
    background-image: -ms-linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%);
    background-image: -o-linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%);
    background-image: linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%);
    -webkit-box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3;
    -moz-box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3;
    -ms-box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3;
    -o-box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3;
    box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3; }
  button.minimal-indent:active {
    -webkit-box-shadow: inset 0 0 30px 0 #999999, 0 1px 0 0 white;
    -moz-box-shadow: inset 0 0 30px 0 #999999, 0 1px 0 0 white;
    -ms-box-shadow: inset 0 0 30px 0 #999999, 0 1px 0 0 white;
    -o-box-shadow: inset 0 0 30px 0 #999999, 0 1px 0 0 white;
    box-shadow: inset 0 0 30px 0 #999999, 0 1px 0 0 white; }

button.cupid-green {
  background-color: #7fbf4d;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#7fbf4d), to(#63a62f));
  /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -moz-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -ms-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -o-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: linear-gradient(top, #7fbf4d, #63a62f);
  border: 1px solid #63a62f;
  border-bottom: 1px solid #5b992b;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 0 0 #96ca6d;
  -moz-box-shadow: inset 0 1px 0 0 #96ca6d;
  -ms-box-shadow: inset 0 1px 0 0 #96ca6d;
  -o-box-shadow: inset 0 1px 0 0 #96ca6d;
  box-shadow: inset 0 1px 0 0 #96ca6d;
  color: #fff;
  line-height: 1;
  text-align: center;
  text-shadow: 0 -1px 0 #4c9021;
  font: 8px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  padding: 0px 2px 0px 2px;
  
  }
  button.cupid-green:hover {
    background-color: #76b347;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#76b347), to(#5e9e2e));
    /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #76b347, #5e9e2e);
    background-image: -moz-linear-gradient(top, #76b347, #5e9e2e);
    background-image: -ms-linear-gradient(top, #76b347, #5e9e2e);
    background-image: -o-linear-gradient(top, #76b347, #5e9e2e);
    background-image: linear-gradient(top, #76b347, #5e9e2e);
    -webkit-box-shadow: inset 0 1px 0 0 #8dbf67;
    -moz-box-shadow: inset 0 1px 0 0 #8dbf67;
    -ms-box-shadow: inset 0 1px 0 0 #8dbf67;
    -o-box-shadow: inset 0 1px 0 0 #8dbf67;
    box-shadow: inset 0 1px 0 0 #8dbf67;
    cursor: pointer; }
  button.cupid-green:active {
    border: 1px solid #5b992b;
    border-bottom: 1px solid #538c27;
    -webkit-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
    -ms-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
    -o-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee; }


button.shiny-blue {
  background-color: #759ae9;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#759ae9 0%), to(#376fe0 50%));
  /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
  background-image: -moz-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
  background-image: -ms-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
  background-image: -o-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
  background-image: linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
  border-top: 1px solid #1f58cc;
  border-right: 1px solid #1b4db3;
  border-bottom: 1px solid #174299;
  border-left: 1px solid #1b4db3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
  -moz-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
  -ms-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
  -o-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
  box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
  color: #fff;
  font: 8px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  padding: 0px 2px 0px 2px;
  text-shadow: 0 -1px 1px #1a5ad9;
   }
  button.shiny-blue:hover {
    background-color: #5d89e8;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#5d89e8 0%), to(#2261e0 50%));
    /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
    background-image: -moz-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
    background-image: -ms-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
    background-image: -o-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
    background-image: linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
    cursor: pointer; }
  button.shiny-blue:active {
    border-top: 1px solid #1b4db3;
    border-right: 1px solid #174299;
    border-bottom: 1px solid #133780;
    border-left: 1px solid #174299;
    -webkit-box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee;
    -moz-box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee;
    -ms-box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee;
    -o-box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee;
    box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee; }

/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; }
.ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; }

label[class~="show_event_text"] span.ui-button-text {
  font-size: 60% !important
}

label[class~="show_timeshift_text"] span.ui-button-text {
  font-size: 60% !important
}

.ganglia-qtip {
  width: 250px;
}

.ganglia-qtip .qtip-content {
  font-size: 14px;
}

.img_view {
  float: left;
  margin: 0 0 10px 10px;
}