/*En este ejemplo habría estado bien hacer una clase para 
las tres redondas y luego en cada caso cambiar solo el 
color de fondo. Me habría ahorrado copiar varias lineas 
de texto.*/

#semaforo{
	margin:auto;
	width:300px;
	height:800px;
	background-color:black;
	z-index:0;
}

#rojo{
	position:relative;
	left:50px;
	top:50px;
	width:200px;
	height:200px;
	border: 2px solid white;
    border-radius:50%;
    background-color:red;
    opacity: 0.25;
    z-index:1;
/*    float:left;*/
}

#rojo:hover{
	opacity: 1;
}

#ambar{
	position:relative;
	left:50px;
	top:100px;
	width:200px;
	height:200px;
	border: 2px solid white;
    border-radius:50%;
    background-color:orange;
    opacity: 0.25;
    z-index:1;
/*    clear:left;
    float:left;*/
}

#ambar:hover{
	opacity: 1;
}

#verde{
	position:relative;
	left:50px;
	top:150px;
	width:200px;
	height:200px;
	border: 2px solid white;
    border-radius:50%;
    background-color:green;
    opacity: 0.25;
    z-index:1;
 /*   clear:left;
    float:left;*/
}

#verde:hover{
	opacity: 1;
}