/*
 * File: MISstyle.css
 * Purpose: To provide the styling and page formatting for the Melting Ice simulation (melting-ice.html)
 * Author: Emily Ehrenberger (July 2011)
 *		   Under the supervision of Margot Vigeant, Bucknell University
 *		   Based on Flash simulation by Matt Koppenhaver under Professor Michael Prince
 * (c) Margot Vigeant 2011
*/


/**********Tag selectors************/

body {
	font-size: 15px;
}

h3 {
	margin:0px;
	width:200px;
	text-decoration:underline;
	font-size:19px;
	font-weight: bold;
	font-family: 'Times New Roman';
}

h1 {
	font-family: Georgia;
	font-weight: bold;
	font-size: 25px;
}

a {
	font-size:0.80em;
	color:#C00;
}

/**********Class selectors************/

/*****Classes for input fields*****/
.input1 {
	color:blue;
	font-size:13px;
}

.input2 {
	color:red;
	font-size:13px;
}

.input1Label {
	position:absolute;
	font-weight:bold;
	font-size:0.9em;
	font-family:sans-serif;
	color:#B90000;
}

.input2Label {
	position:absolute;
	font-weight:bold;
	font-size:0.9em;
	font-family:sans-serif;
	color:#2011D0;
}

/******************** Other ************************/

.frm {
  width: 50%;
}

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

/*****Classes for ice/beaker animation elements*****/

.sit1block {
	position:absolute;
	top:60px;
	height:33px;
	width:32px;
	background:url('blocks.png') 0 0;
	z-index:-2;
}
.sit2block {
	position:absolute;
	top:60x;
	height:33px;
	width:32px;
	background:url('blocks.png') 0 0;
	z-index:-2;
}
.sit1Ice {
	position:absolute;
	height:42px;
	width:85px;
	border-style:solid;
	border-width:thin;
	-webkit-border-radius: 20px;
	-khtml-border-radius: 20px;	
	-moz-border-radius: 20px;
	border-radius: 20px;
	background:url('blueGradient.png') 0 0;
	z-index:0;
}
.sit2Ice {
	position:absolute;
	height:42px;
	width:85px;
	border-style:solid;
	border-width:thin;
	-webkit-border-radius: 20px;
	-khtml-border-radius: 20px;	
	-moz-border-radius: 20px;
	border-radius: 20px;
	background:url('blueGradient.png') 0 0;
	z-index:0;
}

/*****Classes for graph elements*****/
.graphLabel {
	font-weight:bold;
	font-size:0.9em;
}
.sit1Point {
	position:absolute;
	height:6px;
	width:5px;
	background-color:#C00;
}
.sit2Point {
	position:absolute;
	height:4px;
	width:4px;
	background-color:#03C;
}

.myTooltip {
	position:absolute;
	background-color:#FFC;
	border-style:solid;
	border-width:thin;
	border-color:#000;
	-webkit-border-radius: 20px;
	-khtml-border-radius: 20px;	
	-moz-border-radius: 20px;
	border-radius: 20px;
	padding-left:1px;
	font-family:sans-serif;
	font-size:0.85em;
	z-index:3; /* Ensure the tooltip appears on top of all the images (except for tooltipTrigger images) */
	/* Prevent browsers from automatically putting scrollbars everywhere */
	overflow:hidden;
	overflow-y: hidden;
	overflow-x: hidden; 
	line-height: normal;
}

/**********ID selectors************/

/***** the page title *****/
#title {
	text-align:center;
}


/***** div elements *****/

#pageDiv { /* Contains all page elements; used for formatting */
	position:relative; /* Must have non-static positioning so other elements can be absolutely positioned relative to the container */
	margin-left:auto;
	margin-right:auto;
	width:1150px;
}
#sit1Div { /* Contains all input fields for Situation 1 */
	position:absolute;
	top:0px;
	height:300px;
	width:250px;
}
#sit2Div { /* Contains all input fields for Situation 2 */
	position:absolute;
	top:0px;
	left:900px;
	height:300px;
	width:250px;
}
#graphPointsDiv { /* Will be generated by Javascript to contain/align the points on the graph */
	position:absolute;
	top:302px;
	left:284px;
	width:811px;
	height:453px;
}


/***** labels/elements of the ice/beaker animation *****/
/*#beakerHelp {
	position:absolute;
	top:175px;
	left:475px;
	height:90px;
	width:189px;
	font-size:0.75em;
	padding-left:11px;
	padding-top:7px;
}*/

#beakersImg {
	position:absolute;
	top:100px;
	left:250px;
	z-index:-1;
}
#waterImg {
	position:absolute;
	top:100px;
	left:250px;
	opacity:0.75;
	filter:alpha(opacity=75);
	z-index:1;
}
#stirBar1 {
	position:absolute;
	top:240px;
	left:375px;
	z-index:0;
}
#stirBar2 {
	position:absolute;
	top:240px;
	left:700px;
	z-index:0;
}
#sit1block1 {
	left:290px;
}
#sit1block2 {
	left:350px;
}
#sit1block3 {
	left:410px;
}
#sit1block4 {
	left:470px;
}
#sit2block1 {
	left:615px;
}
#sit2block2 {
	left:675px;
}
#sit2block3 {
	left:735px;
}
#sit2block4 {
	left:795px;
}
#sit1Ice1 {
	top:135px;
	left:280px;
}
#sit1Ice2 {
	top:140px;
	left:370px;
}
#sit1Ice3 {
	top:135px;
	left:440px;
}
#sit2Ice1 {
	top:135px;
	left:600px;
}
#sit2Ice2 {
	top:140px;
	left:675px;
}
#sit2Ice3 {
	top:135px;
	left:760px;
}


/***** input fields for Situation 1 *****/
#sit1Heading {
	text-align:center;
	color:#B90000;
}
#temp1 {
	position:absolute;
	top:35px;
	left:140px;
	width:30px;
}
#heatCapacity1 {
	position:absolute;
	top:60px;
	left:145px;
	width:25px;
}
#mass1 {
	position:absolute;
	top:85px;
	left:150px;
	width:20px;
}
#area1 {
	position:absolute;
	top:110px;
	left:155px;
	width:10px;
}
#numBlocks1 {
	position:absolute;
	top:135px;
	left:140px;
	width:40px;
}
#currentBlockTemp1 {
	position:absolute;
	top:165px;
	left:155px;
	width:28px;
	overflow:hidden;
}
#stirBarCheck1 {
	position:absolute;
	top:190px;
	left:120px;
}
#sit1DefaultButton {
	position:absolute;
	top:220px;
	left:40px;
	width:120px;
	font-weight:bold;
	border-style:outset;
	border-color:#B90000;
	color:#B90000;
}


/***** input fields for Situation 2 *****/
#sit2Heading {
	text-align:center;
	color:#2011D0;
	/*color:#1A7B17;*/
}
#temp2 {
	position:absolute;
	top:35px;
	left:140px;
	width:30px;
}
#heatCapacity2 {
	position:absolute;
	top:60px;
	left:145px;
	width:25px;
}
#mass2 {
	position:absolute;
	top:85px;
	left:150px;
	width:20px;
}
#area2 {
	position:absolute;
	top:110px;
	left:155px;
	width:10px;
}
#numBlocks2 {
	position:absolute;
	top:135px;
	left:140px;
	width:40px;
}
#currentBlockTemp2 {
	position:absolute;
	top:165px;
	left:155px;
	width:28px;
	overflow:hidden;
}
#stirBarCheck2 {
	position:absolute;
	top:190px;
	left:120px;
}
#sit2DefaultButton {
	position:absolute;
	top:220px;
	left:40px;
	width:120px;
	font-weight:bold;
	border-style:outset;
	border-color:#2011D0;
	color:#2011D0;
}


/***** input labels(IDs are shared by situations 1 and 2) *****/
#tempLabel {
	top:35px;
}
#tempUnits {
	position:absolute;
	top:35px;
	left:185px;
}
#heatCapacityLabel {
	top:60px;
}
#heatCapacityUnits {
	position:absolute;
	top:60px;
	left:185px;
}
#massLabel {
	left:3px;
	top:85px;
}
#massUnits {
	position:absolute;
	top:85px;
	left:185px;
}
#areaLabel {
	left:8px;
	top:110px;
}
#areaUnits {
	position:absolute;
	top:105px;
	left:180px;
}
#numBlocksLabel {
	left:5px;
	top:135px;
}
#currentBlockTempLabel {
	top:165px;
}
#currentBlockTempUnits {
	position:absolute;
	top:165px;
	left:190px;
}
#stirBarCheckLabel {
	left:50px;
	top:190px;
}


/***** graph elements/labels *****/

#graphBase { /* the gray background/axes */
	position:absolute;
	top:300px;
	left:200px;
	z-index:-1;
}
#yLabel1 {
	position:absolute;
	top:630px;
	left:240px;
}
#yLabel2 {
	position:absolute;
	top:520px;
	left:240px;
}
#yLabel3 {
	position:absolute;
	top:410px;
	left:240px;
}
#yLabel4 {
	position:absolute;
	top:300px;
	left:240px;
}
#xLabel1 {
	position:absolute;
	top:760px;
	left:470px;
}
#xLabel2 {
	position:absolute;
	top:760px;
	left:680px;
}
#xLabel3 {
	position:absolute;
	top:760px;
	left:880px;
}
#xLabel4 {
	position:absolute;
	top:760px;
	left:1080px;
}
/* text bubbles of "more info" */
#graphHeightInfo {
	top:335px;
	left:875px;
	width:168px;
	height:57px;
	padding-left:9px;
	padding-top:7px;
}

#graphSlopeInfo {
	top:585px;
	left:400px;
	width:178px;
	height:87px;
	padding-left:11px;
	padding-top:7px;
}

/***** control buttons (start, pause, reset, help) *****/

#startButton {
	position:absolute;
	top:310px;
	left:25px;
}

#resetButton {
	position:absolute;
	top:310px;
	left:100px;
}

#pauseButton {
	position:absolute;
	top:360px;
	left:30px;
}

#helpButton {
	position:absolute;
	top:360px;
	left:130px;
}

#infoButton {
	position:absolute;
	top:360px;
	left:80px;
}

/****** "more info" links ******/

#initialIceLabel {
	position:absolute;
	top:550px;
	font-weight:bold;
}

#initialIce {
	position:absolute;
	top:570px;
	font-weight:normal;
}

#initialIceUnits {
	position:absolute;
	top:570px;
	left:44px;
	font-weight:normal;
}

#graphInfoLabel {
	position:absolute;
	top:500px;
	left:-25px;
	height:100px;
	width:210px;
	font-family:sans-serif;
	font-weight:550;
	text-shadow: 1px 1px #999;
}
#graphInfo {
	position:absolute;
	top:650px;
	width:210px;
	font-family:sans-serif;
	font-size:1em;
	text-shadow: 1px 1px #999;
}
#about {
	position:absolute;
	top:715px;
	left:0px;
}
#IEexp {
	position:absolute;
	top:735px;
	left:-25px;
}

/***** program info paragraph at bottom of page *****/
#programInfo {
	position:relative;
	top:775px;
}