body {
	background-color: #000;
	font-family: Arial, Sans;
	font-size: 14px;
	line-height: 18px;
	color: #999;
	overflow: hidden;
}

.wrapper {
	width: 854px;
	height: 482px;
	overflow: hidden;
	background-repeat: repeat-x;
	position: relative;
}


/* Elements
*/

#bg { background-image: url("imgs/bg.png"); background-repeat: repeat-x; width: 854px; height: 1000px;
	position: absolute;
	top: 0px;
	left: 0px;

	}

#sol { background-image: url("imgs/sol.png"); background-repeat: no-repeat; width: 80px; height: 80px;
	position: absolute;
	top: 40px;
	left: 40px;
	display: none;
	}

#cloud1 { background-image: url("imgs/cloud1.png"); background-repeat: no-repeat; width: 75px; height: 35px;
	position: absolute;
	top: 30px;
	left: 40px;
	opacity: .6;
	}

#cloud-2 { background-image: url("imgs/clouds-2.png"); background-repeat: no-repeat; width: 117px; height: 43px;
	position: absolute;
	top: 100px;
	left: 160px;
	opacity: 0.4;}

#clouds-home { background-image: url("imgs/clouds-home.png"); background-repeat: no-repeat; width: 345px; height: 310px;
	position: absolute;
	top: 80px;
	right: 40px; }

#cloud5 { background-image: url("imgs/c-cloud2.png"); background-repeat: no-repeat; width: 168px; height: 79px;
	position: absolute;
	top: 30px;
	right: 40px; }

#main { width: 854px; height: 300px;
	position: absolute;
	bottom: -300px;
	left: 0px; }

#title { background-image: url("imgs/title.png"); background-repeat: no-repeat; width: 600px; height: 128px;
	position: absolute;
	top: 160px;
	right: 100px;
	cursor: pointer;
	z-index: 99;
	opacity: 1;
	}

	
#cond { background-image: url("imgs/cond-cloud.png"); background-repeat: no-repeat; width: 198px; height: 58px;
	position: absolute;
	top: 160px;
	left: 120px;
	cursor: pointer;
	z-index: 99;
	display: none;
	}

	
#cond { background-image: url("imgs/cond.gif"); background-repeat: no-repeat; width: 220px; height: 114px;
	position: absolute;
	top: 60px;
	left: 100px;
	cursor: pointer;
	z-index: 99;
	display: none;
	}
	
	
/* phases
*/

#evaporacao { background-image: url("imgs/evaporacao.png"); background-repeat: no-repeat; width: 161px; height: 160px;
	position: absolute;
	top: 160px;
	left: 50px;
	cursor: pointer;
	z-index: 99;
	display: none;
	}

#evaporacao:hover { background-image: url("imgs/evaporacao2.gif"); }
	
#condensacao { background-image: url("imgs/condensacao.png"); background-repeat: no-repeat; width: 249px; height: 83px;
	position: absolute;
	top: 50px;
	left: 270px;
	cursor: pointer;
	z-index: 99;
	display: none;
	}
	
#precipitacao {
	position: absolute;
	top: 55px;
	left: 620px;
	cursor: pointer;
	z-index: 99;
	display: none;
	}
	
#solidificacao { width: 199px; height: 144px;
	position: absolute;
	top: 193px;
	left: 648px;
	cursor: pointer;
	z-index: 99;
	display: none;
	}
	
#fusao { background-image: url("imgs/fusao.png"); background-repeat: no-repeat; width: 84px; height: 28px;
	position: absolute;
	top: 310px;
	left: 716px;
	cursor: pointer;
	z-index: 99;
	display: none;
	}
	
#evaporacao:hover, #condensacao:hover, #precipitacao:hover,
#solidificacao:hover, #fusao:hover {
	opacity: 0.8 !important;
}

.info {
	background-color: #fff;
	border-radius: 5px;
	display: none;
	margin: 200px auto;
	width: 300px;
	min-height: 20px;
	opacity: 0.8;
}	
.info p {
	padding: 10px;
	
}

.desc1, .desc2, .desc3, .desc4, .desc5 { position: relative; z-index: 999; }