/*keep this same for all*/
/*the main div container parallel to and above mainBox div*/
#SoundLab3
{
	position: relative;
	width:100%;
	height:100%;
	/*border:1px solid red;	*/
	top:0%;
	left:0%;
	margin: 0;
	padding: 0;	
	/*change only this*/
	background-image: url("../../bg.png");
}

/*topic*/
#topic
{
	position: absolute;
	top:0%;
	left:0%;
	width: 100%;
	text-align: center;
	font-size: 2em;
	
	text-align: center;
	/*text-decoration: underline;*/
	color:#A6033F;

}
/*hammerBoard*/
#hammerBoard
{
	position:absolute;
	/*border: 1px solid blue;*/
	top:12%;
	left:10%;
	width: 10%;
	height: 42%;
}

#hammerBoard > h4
{
	position: absolute;
	top:60%;
	left:-50%;
	width:110%;

	/*border: 1px solid red;*/
	font-size: 1.5em;
	color: brown;

}

#hammer
{
	position:absolute;
	width: 120%;
	top:30%;
	left:-30%;
	z-index: 50;
	cursor:pointer;
	/*border: 1px solid red;*/

    transform: rotate(310deg) ;
    -webkit-transform: rotate(310deg) ;
    -moz-transform: rotate(310deg) ;
    -o-transform: rotate(310deg) ;
    -ms-transform: rotate(310deg) ;

    /*transform: rotate(37deg) ;
    -webkit-transform: rotate(37deg) ;
    -moz-transform: rotate(37deg) ;
    -o-transform: rotate(37deg) ;
    -ms-transform: rotate(37deg) ;*/
}

#board
{
	position: absolute;
	top:0%;
	right:0%;
	width:20%;
	height:100%;
	border-radius:5%;
	
	/*border: 1px solid red;*/
	background-color: #8C6535;
}


/*air water and iron*/
#air , #water, #iron
{
	/*border:1px solid red;*/
	position: absolute;
	left:20%;
	width:70%;
	height:12%;
}

#air
{
	top:12%;
}

#water
{
	top:27%;
}

#iron
{
	top:42%;
}

/*the moving div to show sound travel effect*/
#airMove, #waterMove, #ironMove
{
	position:absolute;
	top:0%;
	left:0%;
	width:0%;
	height:100%;
	/*border:1px solid red;*/
	display:none;
	border-right:3px solid rgba(255,255,255,0.5);
	border-radius: 50%;
	
}
/*medium*/
#airMedium , #waterMedium, #ironMedium
{
	position: absolute;
	top:0%;
	left:0%;
	width:70%;
	height: 100%;
}

#airMedium
{
	background-color: #ACD1F2;
}

#waterMedium
{
	background-color: #4193A6;
}

#ironMedium
{
	background-color: #4D4D4D;
}

/*the medium name*/
#airMedium > h1 , #waterMedium > h1, #ironMedium > h1
{	
	position: absolute;
	top:5%;
	left: 0%;
	width:100%;
	text-align: center;
	font-size: 2em;
	/*emboss text effect*/
	opacity: 0.7;
	color: rgba(0, 0, 0, 0.6);
	text-shadow: rgba(255, 255, 255, 0.2) 3px 2px 3px;
}


/*cat*/
#airCat , #waterCat, #ironCat
{
	position: absolute;
	top:0%;
	left:68%;
	width:15%;
}

#airCat > img , #waterCat > img, #ironCat >img
{
	position: absolute;

	width:100%;
}

#airCat > img:nth-of-type(n+2) , #waterCat > img:nth-of-type(n+2), #ironCat > img:nth-of-type(n+2)
{
	display:none;
}

/*time*/
#airTimeLapse , #waterTimeLapse, #ironTimeLapse
{	
	position: absolute;
	top:20%;
	left:87%;
	
	font-size:2em;
}

#airTimeLapse
{
	color:#ACD1F2;	
}

#waterTimeLapse
{
	color:#4193A6;
}

#ironTimeLapse
{
	color:#4D4D4D;
}
/*slider content*/
#slideContent
{
	position: absolute;
	top:60%;
	left:20%;
	width:50%;
	height: 10%;
	/*border:1px solid green;*/
}

#slideContent > h1
{
	position: absolute;
	top:-30%;
	right:70%;
	width: 25%;	
	font-size: 1.5em;
	/*border: 1px solid red;*/

}

#slideContent > em
{
	position: absolute;
	top:120%;
	left:-20%;
	width:150%;
	text-align: center;
	font-size: 1.5em;
	color:darkred;
	/*border: 1px solid red;*/

}

#distance
{
	position: absolute;
	top:10%;
	left:85%;
	font-size: 2em;
}

/*slider legend*/
#legend
{
	position:absolute;
	top:0%;
	left:32%;
	width:50%;
	

	/*border: 1px solid red;*/
}

#legend > p
{
	position: absolute;

	color:royalblue;

}

#legend >p:nth-of-type(2)
{
	left: 37%;
}

#legend >p:nth-of-type(3)
{
	left: 75%;
}
/*slider*/
#slideMe
{
	position: absolute;	
	top:50%;
	left:35%;
	background-color: #707317;
	box-shadow: 0px 0px 2px 2px #59454C;
	width:40%;
}


/*popup table and info*/
#popTable
{
	display: none;
	position:absolute;
	top:1%;
	left:2%;
	width:96%;
	height: 98%;
	z-index: 500;
	
	border-radius: 2%;
	background-color: #F0F0EA;	

    -moz-box-shadow:inset 0px 0px 1px 1px #363A35;
    -webkit-box-shadow:inset 0px 0px 1px 1px #363A35;
    box-shadow:inset 0px 0px 1px 1px #363A35;
}

/*button for close button*/
#closeTable
{
	display: none;
	position: absolute;
	top:1%;
	right:1%;
	width:5%;
	height: 8%;
	cursor:pointer;	
}


/*table*/
#popTable table
{
	display: none;
	position: relative;
	margin-top:1%;
	left:2%;
	width:95%;
	text-align: center;
	border-spacing: 0.1em;
    border-collapse:separate;
}


#popTable th
{
	text-align: center;
	font-size: 1.4em;
	background-color: rgba(170, 181, 146,1);
	color:brown;

}

#popTable td
{
	width: 20%;
	font-size: 1.2em;
}

#popTable td:nth-of-type(1),#popTable th:nth-of-type(1)
{
	width:10%; /*first column width*/
}

#popTable tr:nth-of-type(2) td:nth-of-type(even)
{
	color:black;
	background-color: rgba(172, 209, 242,0.6);
}


#popTable tr:nth-of-type(3) td:nth-of-type(even)
{
	color:black;
	background-color: rgba(65, 147, 166,0.6);
}

#popTable tr:nth-of-type(4) td:nth-of-type(even)
{
	color:black;
	background-color: rgba(77, 77, 77,0.6);
}

#popTable tr td:nth-of-type(odd)
{
	color:black;
	background-color: rgb(217, 217, 217);
}

#tableRowAir, #tableRowWater, #tableRowIron
{
	display:none;
}

/*why speed difference */
#whySpeedDiffer
{
	display: none;
	position: relative;
	margin-top:1%;
	left: 5%;
	width:90%;
	text-align: center;
	font-size: 1.3em;
	color: #E3934D;
}

/*reason in the table */

#reason
{
	position:relative;
	margin-top:1%;
	left:1%;
	width:98%;
	/*border: 1px solid red;*/
}

#airReason, #waterReason, #ironReason
{
	display: none;
}

#airReason > p, #waterReason > p, #ironReason > p
{
	font-size: 1em;
	color: green;
}

#airReason > h4, #waterReason > h4, #ironReason > h4
{
	color: maroon;
	font-size: 1.2em;
}

#airReason > h2, #waterReason > h2, #ironReason > h2
{
	color: royalblue;
	text-decoration: underline;
	font-size: 1.4em;
}