/* CSS file for the RTSW web page. */
/* @author: jjohnson */
/* date: July 2015 */
/* the base font size is controlled via javascript, the font sizes specified here control the relative size of the fonts as needed */

/*.axis path,*/
/*.axis line {*/
/*fill: none;*/
/*stroke: #000;*/
/*shape-rendering: crispEdges;*/
/*}*/

/*.x.axis path {*/
/*display: none;*/
/*}*/

/*.area {*/
/*fill: steelblue;*/
/*}*/

.legend-text {
  box-sizing: border-box;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
}

/* TODO temporary! */
body {
  margin: 0;
  padding: 0;
  /*background-color: green;*/
}

#outer_div1 {
  /*background-color: blue;*/
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
}

.main_columns {
  /* This prevents Chrome from highlighting a plot div on double click */
  -webkit-user-select: none;
}

.info_container {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  margin-left: 4px;
  margin-top: 2px;
}

.info_label {
  text-align: left;
  font-size: 0.9em;
}

/* container for the capturing the collection of plot canvases as an image */
#main_div {
  width: 100%;
  height: 90%;
  display: block;
  text-align: center;
  padding: 0;
  position: relative;
  background-color: yellow;
}

/* the chart container height is resized by the javascript */
.chart_container {
  width: 100%;
  height: 100px;
  padding: 0;
}

.chart {
  /* important! - must set both the height and width of the plot in order to override the defaults in jqplot-target and fill the resizable container */
  height: 100%;
  width: 100%;
}

/* the date tick interval and timespan start date at the bottom left, adjacent to the zoom box */
.date_container {
  position: absolute;
  left: 2px;
  /* more drupal css madness... */
  bottom: -6px;
}

/* the date tick interval size, e.g., UTC(hours) */
#zoom_interval_size {
  font-size: 0.7em;
  margin-bottom: 2px;
}

#timespan_start_date {
  font-size: 0.7em;
}

/* zoom viewport chart */
#zoom {
  width: 100%;
}

/* we don't have a title, so don't need padding */
.jqplot-title {
  padding-bottom: 0;
}

#date_range_labels {
  width: 100%;
  height: 1.0em;
  text-align: center;
  padding-top: 2px;
}

.date_ranges {
  width: 100%;
  /* set the font size to match the jqplot x-axis date tick labels which are set programmatically */
  font-size: 0.95em; /* 1.0em; */
}

#start_date {
  width: 12em;
  float: left;
  margin-left: 3.0em;
}

#end_date {
  width: 12em;
  float: right;
  margin-right: 0.5em;
}

#resolution {
  margin: 0 auto;
  width: 60ch;
  text-align: center;
  padding-left: 15px;
}

#loading_div {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
}

#loading_icon_div {
  text-align: center;
  /* used to center the image over the plots */
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 20;
}

#loading_image {
  /* center the image on the main div */
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  /* make sure it's in front */
  z-index: 30;
}

#loading_text_div {
  text-align: center;
  height: 100%;
  width: 100%;

  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  /* make sure it's in front */
  z-index: 20;
}

#readout_timestamp {
  width: 110px;
  text-align: center;
  position: absolute;
  /* position it just above the top plot */
  top: 12px;
  left: 2px;
}

/* hover readouts over each plot */
.readout {
  font-size: 0.7em;
  width: 90px;
  z-index: 5;
  position: absolute;
}

/* hover readouts over each plot - needed for drupal-staging */
.hover_readout_text {
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 1.0em;
}

/* hover time readouts over each plot - needed for drupal-staging */
.hover_readout_text_time {
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 1.1em;
}

table.jqplot-table-legend {
  /* rotate the legend to conserve space */
  -webkit-transform-origin: top left; /* Safari and Chrome */
  -moz-transform-origin: top left; /* Firefox */
  -ms-transform-origin: top left; /* IE 9 */
  -o-transform-origin: top left; /* Opera */
  transform-origin: top left;
  -webkit-transform: rotate(-90deg); /* Safari and Chrome */
  -moz-transform: rotate(-90deg); /* Firefox */
  -ms-transform: rotate(-90deg); /* IE 9 */
  -o-transform: rotate(-90deg); /* Opera */
  /* increasing 1st parameter moves up */
  /* increasing 2nd parameter moves right */
  /* don't know why the downward translation isn't 50%, but this looks about right */
  transform: rotate(-90deg) translate(-63%, 0);
  text-align: center;
  /* the left edge of the legend should have no padding to the left */
  margin: 0 0 0 0;
  padding: 0;
  /* no border around the legend */
  border: 0;
}

/* no border around the legend swatch */
div.jqplot-table-legend-swatch-outline {
  border: 0;
  padding: 0;
  margin-left: 2px;
}

/* no borders around the cells within the legend */
td.jqplot-table-legend {
  padding: 0;
}

td.jqplot-table-legend-label {
  vertical-align: text-top;
}

.jqplot-yaxis {
  /* the yaxis tick labels should be very close to the plot */
  margin-right: 5px;
}

.jqplot-y2axis {
  /* change to margin-left: 5px if using right axis labels */
  margin: 0;
}

/* only used for the dates below the zoombox, override the default of 10px */
.jqplot-xaxis {
  margin-top: 4px;
}

/* used for dates above the zoombox and below the last plot, shows the zoomed date tick */
.jqplot-x2axis {
  margin-bottom: 0;
}

/* button area at the bottom of the page */
.button_container {
  display: block;
  width: 100%;
  background-color: red;
}

/* the time span and series containers should add up to 100% of the dynamic button container for the default single row layout. */
/* using display: inline-block makes each container move as a unit */
.time_span_container {
  display: inline-block;
  height: 23px;
}

.series_container {
  display: inline-block;
  height: 23px;
}

/* the timespan select menu */
#timespan {
  width: 20%;
  text-align-last: center;
  border: none;
}

/* the timespan button that creates the pop-up menu */
#timespan-button {
  font-size: 0.7em;
  text-align-last: center;
  /* TODO something with relative positioning makes setting the bottom to 0 not line up right... */
  bottom: -7px;
  border: 2px outset;
  padding-bottom: 1px;
  background-color: buttonface;
  height: 19px;
}

/* the remaining buttons */
.option_button {
  width: 19.8%;
  /* add padding to match the timespan menu button */
  padding: 3px;
  /* buttons get spaced apart automatically, so override */
  margin-left: -4px;
  /* after moving to drupal, trying to make these buttons look like the timespan button... */
  border-radius: 4px;
  font: inherit;
}

#mag_only_label #sw_only_label #mag_and_sw_label {
  /* the radio button adds a little border/padding, so reduce the percentage slightly from 33% */
  width: 30%;
}

.ui-buttonset {
  margin-right: 0;
}

/* the radio (time span and plot series) buttons */
.ui-button-text {
  font-size: 0.8em;
}

/* needed for radio buttons on Drupal */
.ui-widget {
  font-size: 0.8em;
}

/* turn off the border and border spacing around each table cell */
td.jqplot-table-legend {
  border-spacing: 0;
  border: 0;
}

/* the debug pane, overlaid at the top of the screen */
#debug {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  text-align: center;
}

/* the feedback pane, overlaid at the top of the screen */
#feedback {
  width: 100%;
  font-size: 1.5em;
  position: absolute;
  left: 0;
  top: 6px;
  text-align: center;
  z-index: 100;
}