/*
 * File: mixingstyle.css
 * Purpose: To provide the styling and page formatting for the Entropy of Mixing simulation (Mixing.html)
 * Author: Emily Ehrenberger (June 2011)
 *		   Under the supervision of Margot Vigeant, Bucknell University
 *		   Based on Flash simulation by Molly Harms and Gavin MacInnes (2006)
 * (c) Margot Vigeant 2011
*/


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

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

h1 {
	font-family: "Times New Roman";
	font-weight: bold;
	font-size: 32px;
	color: #000000;
	position: relative;
	left:160px;
	width: 600px;
}

h3 {
	font-family: "Times New Roman";
	font-weight: bold;
	font-size: 18px;
	color: #000000;
}

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

.btn {
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

.container {
	position:relative; /* Must have non-static positioning so other elements can be absolutely positioned relative to the container */
	margin-left:auto;
	margin-right:auto;
	font-family: "Times New Roman";
	font-size: 16px;
	height:0px;
}
.text {
	line-height:120%;
	width:470px;
}
.tooltip {
	position:absolute;
	width:190px;
	height:60px;
	background-color:#FFC;
	border-style:solid;
	border-width:thin;
	border-color:#000;
	padding-left:1px;
	z-index:3; /* Ensure the tooltip appears on top of all the images (except for tooltipTrigger images) */
	font-size:0.75em;
	font-family:sans-serif;
	overflow:auto; /* Necessary to prevent IE from automatically putting scrollbars everywhere */
}
.coldDot {
	position:absolute;
	height:2px;
	width:2px;
	background-color:blue;
}
.hotDot {
	position:absolute;
	height:2px;
	width:2px;
	background-color:red;
}


/********** textContainer and contents (contains initial question, instructions, & explanation; top of page)************/

#textContainer {
	width: 50%;
	height:350px;
	z-index:2;
}

#startQuestion {
	position:absolute;
	top:-20;
	left:120px;
	width:520px;
	height:100px;
}

#submitP {
	text-align:center;
}

#submitButton {
	position:absolute;
	left: 180px;
	top: 230px;
	width:100px;
}

#responseText {
	position:absolute;
	left: 130px;
	top: 100px;
	width:470px;
}

#tryItTitle {
	position:absolute;
	top: 115px;
	text-align:center;
	left: 180px;
	width: 300px;
}

#instructionsParagraph {
	position:absolute;
	top: 170px;
	left: 130px;
	width: 470px;
}

/***** demoContainer and contents (contains all of the pictures, as well as experimentParameters and experimentResults)*******/

#demoContainer {
	width: 50%;
	height:265px;
}

#table {
	position: absolute;
	top:100px;
	left:40px;
	z-index:-1;
}
#bigBeaker {
	position:absolute;
	top:20px;
	left:215px;
	z-index:1;
}
#smallBeaker {
	position:absolute;
	top:60px;
	left:365px;
	/*top:-90px;
	left:295px;*/
	z-index:1;
}
#bigLiquid {
	position:absolute;
	top:83px;
	left:217px;
	opacity:0.75;
	filter:alpha(opacity=75);
	height:65px;
	width:91px;
	background:url('images/bigLiquid.png') 0 0;
	z-index:0;
}
#smallLiquid {
	position:absolute;
	top:83px;
	left:372px;
	/*top:-67px;
	left:302px;*/
	opacity:0.75;
	filter:alpha(opacity=75);
	height:59px;
	width:60px;
	background:url('images/smallLiquid.png') 0 0;
	z-index:0;
}
#smallBeakerPour {
	position:absolute;
	top:-99px;
	left:248px;
	height:240px;
	width:150px;
	background:url('images/smallBeakerPour.gif') 0 0;
	z-index:-1;
}
#eyedropper {
	position:absolute;
	top:20px;
	left:395px;
	z-index:-1;
}
#dyeDrops {
	position:absolute;
	top:-30px;
	left:263px;
	z-index:-2;
}


/********** experimentParameters and contents (contains all displays of info about initial beaker contents)************/

#experimentParameters {
	position:absolute;
	top:-20;
	left:70px;
	width:520px;
	height:100px;
}

#bigBeakerSubstance {
	position:absolute;
	font-weight: normal;
}
#bigBeakerTemp {
	position:absolute;
	top:25px;
	font-weight: normal;
}
#bigBeakerVolume {
	position: absolute;
	top:50px;
	font-weight: normal;
}
#smallBeakerSubstanceLabel {
	position:absolute;
	left:380px;
	font-weight: normal;
}
#smallBeakerSubstanceSelect {
	position:absolute;
	left:470px;
	font-weight: normal;
}
#smallBeakerTempLabel {
	position:absolute;
	top:25px;
	left:380px;
	font-weight: normal;
}
#smallBeakerTempSelect {
	position:absolute;
	top:25px;
	left:470px;
	font-weight: normal;
}
#smallBeakerTempUnits {
	position:absolute;
	top:25px;
	left:525px;
	font-weight: normal;
}
#smallBeakerVolumeLabel {
	position:absolute;
	top:50px;
	left:380px;
	font-weight: normal;
}
#smallBeakerVolume {
	position:absolute;
	top:50px;
	left:470px;
	width: 100px;
	font-weight: normal;
}
#smallBeakerConcentration {
	position:absolute;
	top:73px;
	left:380px;
	font-weight: normal;
}


/********** experimentResults and contents (contains the entropy/temp change info that appears when beakers are mixed)************/

#experimentResults {
	position:absolute;
	top:-130px;
	left:70px;
	width:520px;
	height:150px;
	z-index:-1;
}

#bigBeakerEntropyChangeLabel {
	position:absolute;
	top:20px;
	height:50px;
	width:110px;
	text-align:center;
}
#bigBeakerEntropyChange {
	position:absolute;
	top:65px;
	width:110px;
}
#smallBeakerEntropyChangeLabel {
	position:absolute;
	top:20px;
	left:380px;
	height:50px;
	width:110px;
	text-align:center;
}
#smallBeakerEntropyChange {
	position:absolute;
	top:65px;
	left:380px;
	width:110px;
}
#totalEntropyChangeLabel {
	position:absolute;
	left:180px;
}
#totalEntropyChange {
	position:absolute;
	top:25px;
	left:190px;
	width:110px;
}
#otherResultLabel {
	position:absolute;
	top:75px;
	left:190px;
}
#otherResult {
	position:absolute;
	top:100px;
	left:190px;
	width:110px;
}



/********** Components for the "zoom-in" / particle animations ************/

#zoomInBackdrop {
	position:absolute;
	top:35px;
	left:351px;
	z-index:2;
}
#zoomLink {
	position:absolute;
	top:150px;
	left:215px;
	color:#FC0;
	text-decoration:none;
}
#zoomDiv {
	position:absolute;
	top:85px;
	left:400px;
	z-index:3;
}
#zoomInfo {
	top:-10px;
	left:170px;
}


/********** Other buttons / clickables (bottom of page) ************/

#tryItButton {
	position:absolute;
	top:220px;
	left:40px;
	width:100px;
}
#toggleAnimations {
	position:absolute;
	top:220px;
	left:147px;
	width:140px;
}
#about {
	position:absolute;
	top:220px;
	left:294px;
}