/*
 * File: snowMelt.css
 * Purpose: To provide the styling and page formatting for the Cube Melt simulation
 * Author: Daniel Prudente (September 2012)
 * 		   Modified by Brooke Bullek and Daniel Vasquez (2017)
 *		   Under the supervision of Margot Vigeant, Bucknell University
 * (c) Margot Vigeant 2017
*/

.body {
	max-width: 100%;
	overflow-x: hidden;
}

/* The Bootstrap question-mark help button */
.glyphicon {
	font-size: 1.5em;
}

/* The grey box that holds information about the simulation */
.well {
	position: relative;
	width: 95%;
	left: 2%;
}

/* The text within the two-column table that displays simulation info */
.simulation-info {
	font-family: 'Helvetica', 'Arial', sans-serif;
	color: #444444;
	font-size: 11pt;
}

/* The editable text values that update as the simulation progresses (unbroken ice) */
.sim-value-unbroken {
	display: inline;
	font-weight: bold;
	color: #7fcdbb;
}

/* The editable text values that update as the simulation progresses (broken ice) */
.sim-value-broken {
	display: inline;
	font-weight: bold;
	color: #2c7fb8;
}

/* Holds the hidden tooltip help pop-up */
.alert {
	position: relative;
	width: 95%;
	left: 2%;
}

/* The row of buttons underneath the info panel */
.btn_array {
	padding-bottom: 2%;
}

.chartCanvas-holder {
	position: absolute;
	top: 5%;
	right: 1%;
	width: 50%;
	height: 50%;
}

.unbrokenIceCanvas-holder {
	position: absolute;
	left: 0px;
	top: 0px;
	float: left;
	width: 45%;
	height: 51%;
}

/* Transition animations when toggling the help and info boxes */

#help-box, #info-box {
  padding: 10px;
  position: absolute;
  visibility: hidden;
  opacity: 0;
          transition: 0.6s;
  -webkit-transition: 0.6s;
          transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
}

#help-box.appear, #info-box.appear{
  visibility: visible;
  opacity: 1;
          transform: translateX(0);
  -webkit-transform: translateX(0);
}