.fabrica {
	padding-top: 1px;
	margin-bottom: 2px;
	/*width: 500px; /* Marce */
} 

.fabricaAtomos {
 /*   height: auto;*/
    width: auto;
}

.fabricaAtomos .panel {
	float: none;
	margin: 5px auto;
}

.fabricaAtomos .panel_tabla {
    background-color: rgba(255, 255, 255, 0.4);
    display: inline-block;
  /*  height: 300px;*/
    margin-left: 20px;
    margin-right: 20px;
    padding: 5px;
    position: relative;
    transition: all 200ms linear 0s;
    width: 403px;
    z-index: 1;
}


.tabla_periodica .elemento, .tabla_periodica .grupo, .tabla_periodica .periodo {
	font-size: 87%;

}

.tabla_periodica .elemento:hover {
	cursor: default;
	box-shadow: none;
}

.tabla_periodica .elemento.current {

	box-shadow: 2px 2px 2px #666666;
	z-index: 10;
}

.tabla_periodica .elemento div {
	margin: 2%;
}
.tabla_periodica .elemento div.simbolo {
	font-size: 120%;
	color:#516066;
}
.tabla_periodica .elemento div.numero_atomico {
	font-size: 70%;
}
.tabla_periodica .elemento div.nombre {
	display: none;
}

.tabla_periodica .grupo,
.tabla_periodica .periodo {
	visibility: visible;
}
.tabla_periodica .grupo {
/*	height: auto;*/
	margin-top:46px;
}

.tabla_periodica .grupo_1,
.tabla_periodica .grupo_18
 {
	/*height: auto;*/
	margin-top:0px;
}


.tabla_periodica .periodo {
	/*width: auto;*/
	width: 20px;
}

.tabla_periodica .periodo_lantanidos,
.tabla_periodica .periodo_actinidos {
	display: none;
}


/** Datos Elemetos */
	
.controls {
	width: 152px;
	display: inline-block;
/*	border: solid 1px black;*/
	padding: 3px;
	min-width: 150px;
}

.areaInteraccion {
/*    border: 1px solid black;*/
    display: inline-block;
/*    height: 270px;*/
    max-height: 270px;
    max-width: 300px;
    vertical-align: top;
    width: 291px;
}

.datos_elemento {
    display: inline-block;
    margin: 0 0 0 5px;
}

.datos_simbolo {
    display: inline-block;
    font-size: 1.2em;
    height: 46px;
    line-height: 2.5em;
    margin: 5px;
    text-align: center;
    width: 45px;
    color:#000;
}
.datos_nombre {
	text-transform: lowercase;
	display: inline-block;
	vertical-align: middle;
	color: #117474;
	font-weight: bold;
}

.ra-valor {
	
}


.ra-marker,
.ra-marker-small {
    display: block;
  /*  height: 229px;*/
    margin: 0 auto;
    position: relative;
    width: 229px;
}

.ra-marker:after {
	background: url("../img/radio.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);	
}

/* para los elementos H y He debe utilizarse esta imagen y escalarse al factor de escala por 3 */
.ra-marker-small:after {
	background: url("../img/radio_small.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);		
}

.ra-marker:after,
.ra-marker-small:after {
	content:"";
	display: block;
	position: absolute;
	width: 100%;
/*	height: 100%;*/
}

.controls {
/*	border: solid 1px #666;*/
    display: inline-block;
    margin: 1px 22px;
    vertical-align: top;
}

.controls .label {
    color: #ffffff;
    display: block;
}

.dato_radioAtomico .label {
    color: #ffffff;
}

.controls .control {
    border-radius: 8px;
    display: inline-block;
    font-size: 1.2em;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 40px;
}

.spin-value.control {
    background-color: #fff;
    color: #268989;
}

.controls .spin-minus:hover,
.controls .spin-plus:hover {
    background-color: #fce2cd;
    transition: all 0.5s ease 0s;
}

.controls .spin-minus,
.controls .spin-plus {
	cursor: pointer;
	background-color: #9ddcdc;
}

.elemento.active {
	box-shadow: 0px 4px 10px #333;
/*	border: solid 1px #333;*/
	z-index: 2;
}

.tabla_periodica .elemento:active {
    cursor: default;
    box-shadow: 2px 2px 2px #999;
}


/***************************************/
/*   Controles                         */
/***************************************/


.controls .spin-minus {
	background: url("../img/btn_menos.png") no-repeat scroll 12px 19px #9ddcdc;
    text-indent: -99999px;
}

.controls .spin-plus {
    background: url("../img/btn_mas.png") no-repeat scroll 8px 8px #9ddcdc;
    text-indent: -99999px;
}

.controlGrupos, .controlPeriodos, .dato_radioAtomico {
    border-radius: 5px;
    box-shadow: 1px 1px 3px #999;
    margin: 4px;
    padding: 7px;
}

.controlGrupos {
    background-color: #3d9999;

}

.controlPeriodos {
    background-color: #66bcbc;
}

.dato_radioAtomico {
    background-color: #117474;
    line-height: 25px;
    margin: 5px auto;
    padding-bottom: 8px;
    padding-right: 9px;
    width: 168px;
}

.dato_radio {
	background-color: #ffffff;
	border-radius: 3px;
	padding: 3px;
	color: #268989;
}	

/***** inicio características de color de fondo y de letra que se sobreescriben a la tabla periódica ****/

.tabla_periodica .no_metal,
.datos_elemento .no_metal,
.tablaElem .no_metal {
	background-color: #3bc8e6;
}

.tabla_periodica .metaloide,
.datos_elemento .metaloide,
.tablaElem .metaloide {
	background-color: #5480f0;
}

.tabla_periodica .alcalino,
.datos_elemento .alcalino,
.tablaElem .alcalino {
	background-color: #e13c3c; /*#c11c1c;*/
}

.tabla_periodica .alcalinoterreo,
.datos_elemento .alcalinoterreo,
.tablaElem .alcalinoterreo {
	background-color: #ffab66;
}

.tabla_periodica .bloque_p,
.datos_elemento .bloque_p,
.tablaElem .bloque_p {
	background-color: #33b633;
}

.tabla_periodica .gas_noble,
.datos_elemento .gas_noble,
.tablaElem .gas_noble {
	background-color: #9c69cd;
}

.tabla_periodica .halogeno,
.datos_elemento .halogeno,
.tablaElem .halogeno {
	background-color: #5f58ee;
}

.tabla_periodica .primordial,
.datos_elemento .primordial {
	border: 1px solid #ffffff;
}

.tabla_periodica .gas,
.datos_elemento .gas,
.tablaElem .gas {
	color: #ffffff;
}

.tabla_periodica .liquido,
.datos_elemento .liquido,
.tablaElem .liquido {
	color: #760909;
}

.tabla_periodica .solido,
.datos_elemento .solido,
.tablaElem .solido {
    color: #383838;
    font-weight: bold;
}

/***** inicio características de color de fondo y de letra que se sobreescriben a la tabla periódica ****/

.grupo_0 .nombre {
    display: none;
}

.periodo {
	line-height: 52px;
}

.ayuda:hover {
    background-color: #fce2cd;
    color: #268989;
    transition: all 0.5s ease 0s;
}

.ayuda {
    background-color: #268989;
    box-shadow: 1px 1px 3px #999;
    border-radius: 8px;
    color: #fce2cd;
    display: inline-block;
    font-family: trebuchet ms;
    font-size: 2.2em;
 /*   height: 40px;*/
    left: 14px;
    line-height: 1.2em;
    margin-top: 9px;
    text-align: center;
    vertical-align: top;
    width: 40px;

}

/***** flechas para la tabla periódica ***/


.flecha_horizontal_aumenta,
.flecha_horizontal_disminuye,
.flecha_vertical_aumenta,
.flecha_vertical_disminuye {
    background-image: url("../img/flecha.png");
/*    height: 37px;*/
    width: 94px;
    text-indent: -99999px;
    transform: all 1s;
    overflow: hidden;
}

.flecha_vertical_aumenta {
    transform: rotate(90deg);
}

.flecha_vertical_disminuye {
    transform: rotate(270deg);
}	

.flecha_vertical_aumenta,
.flecha_vertical_disminuye {
    bottom: 0;
    margin-bottom: auto;
    margin-top: auto;
    position: absolute;
    right: -69px;
    top: 0;
}

.flecha_horizontal_aumenta {
    transform: rotate(180deg);	
}

.flecha_horizontal_aumenta,
.flecha_horizontal_disminuye {
    left: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    right: 0;
    top: 13px;
}

.invisible {
	opacity: 0;	
}


/*animacion*/


.etiqueta span{
	display: block;
}

.fabricaAtomos{
position: absolute;
    margin-left: auto;
    margin-right: auto;
    left:0;
    right:0;

}
.fabricaAtomos:after {
	content: "";
	display: block;
	height: 0px;
	clear: both;
	visibility: hidden;
}

/* inicio Marce */

.electron img,
.proton img,
.neutron img {
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
}

/* fin Marce */

.electron img {
	max-width: 35px; 
	height: auto;
}

.proton img {
	max-width: 50px; 
	height: auto;
}

.neutron img {
	max-width: 50px; 
	height: auto;
}



.nombre_elemento {
	margin: 1px 0px;
	text-align: center;
	color: #117474;
    font-weight: bold;
    text-transform: lowercase;
    font-size: 1.2em;

}

.tablaElem{
    width: 396px;
    margin: auto;
}


.tablaElem td{
    width: 45px; 
/*	height: 46px;*/
	/*background: none repeat scroll 0 0 #651C54;*/
    text-align: center; /* Marce */
	margin: 1px; /* Marce */
	font-family: helvetica; /* Marce */
    font-size: 1.2em; /* Marce */
}

.opacado{
	left: -40px;
    position: relative;
}

.opacado2{
	left: -55px;
    opacity: 1;
    position: relative;
}

/* para la animación Marce */

.etiqueta {
    color: #444;
    font-family: helvetica;
    font-size: 1.1em;
}

.atomos {
	text-align: center;
}

.proton {
    margin-left: 32px;
    margin-right: 34px;
}

.animacion {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left:0;
    right:0;
    width: 750px;
}

.elementos {
	text-align: center;
}

.elemActivo{
	opacity: 1;	
}

.elemInac{
	opacity: .25;
   -moz-opacity: .25;
   filter:alpha(opacity=25);
}

.solido.alcalino.elem_3 {
    opacity: 1;
}

.atomosImg{
	display: none;
}


.tabla_periodica .elementoActivo:active,
.tabla_periodica .elementoActivo:hover {
    box-shadow: 0 4px 10px #333;
    cursor: pointer;
}

/* nuevo Marce */

.panel .tabla_periodica .resaltar {
    border: 3px solid #117474;
    box-shadow: 0 4px 10px #333;
    margin-left: -2px;
    margin-top: -2px;
    z-index: 1;
}

.periodo_1.elemento.sinFondoTabla.num_1{
	background-color: #3054ef;
    box-shadow: 1px 5px 3px #b7b8b7;
    color:#FFF;
	}