
html {
	/*width: auto;*/
	/*height: auto;*/
	/*margin-left: auto;*/
	/*margin-right: auto;*/
	position: absolute;
}

#planet {
	background-image: url("../pics/earth.jpg");
	background-color: black;
	width: 740px;
	height: 560px;
}
	.popups {
		/*display: none;*/
		z-index: -1;
		position: absolute;
		left: 100% !important;
	}


.numsButton {
	position: absolute;
	top: 8%;
	left: 3%;
	/*z-index: 10;*/
}

.contentTitle {
	position: absolute;
	text-align: center;
	padding: 1%;
	/*z-index: 9;*/

	/*height: 8%;*/
	/*height: auto;*/
	width: 40%;
	/*width: auto;*/
	
	/*left: 5%;*/
	/*top: 5%;*/

}

	.contentTitle div {
		/*font-size: 30px;*/
		font-size: 2em
	}
	.contentTitle a {
		text-decoration: none;
	}
		a {
			text-decoration: none;
		}
		/* not visited link */
		a:link {
			color: black;
		}

		/* visited link */
		a:visited {
			color: black;
		}
	#contTitle1 {
		/*width: 50%;*/
		top: 50%;
		left: 15%;
	}
	#contTitle2 {
		width: 24%;
		top: 30%;
		left: 38%;
	}
	#contTitle3 {
		width: 24%;
		left: 38%;
		top: 20%;
	}
	#contTitle4 {
		top: 50%;
		left: 45%;
	}

	#cyclesImg {
		margin-top: 1.5%;
		position: absolute;
		/*z-index: 1;*/
	}
	#volcanoImg {
		/*position: absolute;*/
		left: 61%;
		top: 8%;
		z-index: 10;
	}


	.titleDiv {
		/*z-index: 9;*/
		/*border: solid red 1px;*/
		/*display: inline-block;*/
		position: relative;
		top: 2em;
	}
	#titleDiv1 {
		width:370px;
		height:200px;
	}
	#titleDiv2 {
		width:740px;
		height:179px;
	}
	#titleDiv3 {
		width:740px;
		height:155px;
	}
	#titleDiv4 {
		top: -507px;
		left: 370px;
		width:370px;
		height:200px;
	}


	.opacity-background {
		position: relative;
		height: 90%;
		width: 90%;
		left: 5%;
		top: 5%;
	}

/*##################
  #### main page ###
  ##################*/
#main_title {
	text-align: center;
	position: relative;
	height: 50%;
	/*width: 90%;*/
	/*left: 5%;*/
	top: 15%;
	/*font-size: 70px;*/
	font-size: 4em;
	border: solid rgba(255,255,255,0) 1px;
}
#start {
	position: relative;
	top: 15%;
	left: 30%;
	width: 40%;
	/*height: 15%;*/

	/*z-index: 200;*/

	text-align: center;
	/*font-size: 35px;*/
	font-size: 2em;
	border-radius: 25px;
	box-shadow: 5px 5px 20px 1px black;
	background-color: rgba(255,255,255,0.6);
}
#start:hover {
	background-color: rgba(224,224,224,0.9);
	box-shadow: 5px 5px 20px 1px black;
	border-radius: 25px;
	cursor:pointer;
}

/*.area {
	position: relative;
	z-index: 10;
	background-color: red;
	border: solid red 1px;
}*/

#con1 {
	position: absolute;
	top: 5%;
	left: 5%;
}
	#showNums {
		z-index: 90;
	}
	#hideNums {
		z-index: 90;
	}


#slide {
	padding: 2%;
	position: relative;
	/*font-size: 20px;*/
	font-size: 1.05em;
	font-family: Helvetica;
	/*font-size: 1em;*/
	height: 80%;
	width: 80%;
	top: 5%;
	left: 8%;
	/*width: 40% !important;*/
}
	table {
		height: 490px !important;
		/*width: auto%;*/
		/*border: solid blue 1px;*/
	}

#back1 {
	position: absolute;
	z-index: 100;
	top: 90%;
	left: 5%;
}
#back1:hover {
	background-color: rgba(224,224,224,0.3);
}

#col1 {
	vertical-align: top;
	/*border: solid red 1px;*/
}
	#col1Anim {
		vertical-align: top;
		/*font-size: 0.8em;*/
		/*font-size: 17px;*/
		/*border: solid red 1px;*/
		font-size: 0.95em;
	}
	#col1Car {
		vertical-align: top;
		/*font-size: 0.9em;*/
		/*font-size: 19px;*/
		/*border: solid red 1px;*/
	}
	#col1Shell {
		vertical-align: top;
		/*font-size: 0.8em;*/
		width: 75% !important;
	}
	#col1Shell1 {
		vertical-align: top;
		/*font-size: 0.8em;*/
		width: 70% !important;
	}

#col2 {
	text-align: center;
	vertical-align: bottom;
}
	#col2Car {
		text-align: center;
	}
	
				#col2Shell {
					/*margin-top: 15%;*/
					margin-top: 10%;
					text-align: center;
					vertical-align: center;
					/*border: solid red 1px;*/
				}
				#col2Shell img {
					margin-top: 25%;
					/*border: solid red 1px;*/
				}
				#col2Shell2 {
					/*vertical-align: center;*/
					text-align: center;
					position: relative;
					top: 29%;
				}
#shortArrows {
	width: 65%;
}
#shortTree {
}
#longVolcano {
	z-index: 1;
	position: absolute;
	top: 44%;
	left: 64%;
}
	#volcanoImg {
		position: absolute;
		top: -0.5%;
		left: 64%;
	}

	.arrow {
		position: absolute;
		left: 70%;
		height: 40%;
		top: 5%;
		-webkit-transform: rotate(15deg);
		-moz-transform: rotate(15deg);
		-o-transform: rotate(15deg);
		-ms-transform: rotate(15deg);
		transform: rotate(15deg);
	}

	/*##################*/
	
	#arrow1 {
	}
	#arrow2 {
		top: 15%;
		height: 20%;
		left: 75%;
		width: 5%;
	}
	#arrow3 {
		-webkit-transform: rotate(195deg);
		-moz-transform: rotate(195deg);
		-o-transform: rotate(195deg);
		-ms-transform: rotate(195deg);
		transform: rotate(195deg);
	
		top: 15%;
		left: 80%;
		width: 5%;
		height: 20%;
	}
	#arrow4 {
		top: 20%;
		left: 85%;
		width: 5%;
		height: 20%;
	}

	.arrowTxt {
		font-size: 15px;
		position: absolute;
		left: 70%;
	}

.volcanoNext {
	z-index: 700;
}
	.volcanoNextL:hover {
		background-color: rgba(225,150,0,0.9);
	}
	.volcanoNextR:hover {
		background-color: rgba(224,100,100,0.9);
	}
	
#shellImg {
	width: 100%;
	height: auto;
	position: relative;
}


