/* Común para lípidos, aminoácidos y pigmentos
*/
body { overflow-x:hidden; }
code { color:#CC0000; }
.notaPie { font-size: 0.8em; border-top:2px #666 solid; margin:1.2em 0 0 0; padding:0.3em 2ex; width:54em; }
.nota { font-size:0.85em; color:#990033; margin-left:3ex; }

h1 {
	text-align:center;
	font-size:1.3em;
}
h2 { font-size:1.2em; padding-left:1em; }
#soundIcon { cursor:pointer; position:absolute; right:0.8em; top:0.5em; }

#labCont { float:right; margin-right:1em; -moz-user-select:none; user-select:none; }
#lab { 
	position:relative; 
	border:2px solid #DDD; border-radius:20px; box-shadow:8px 8px 4px 0px rgba(200,200,200,0.7);
	width:860px; height:330px; 
	margin-left:0.7em;
}

.dropTarget { z-index:40; border:1px dotted transparent; /*border-color:blue;*/ }
.dropTargetVis { border-color:magenta !important; border-style:dotted !important; }

#pipCont { position:absolute; z-index:2; top:165px; left:25px; height:95px; width:20px; padding-right:3px; }
#pip { position:absolute; z-index:10; top:0; 
	margin-left:0px; /* se modifica para Chrome en JS */
	height:160px;
	width:100%;
	transition:margin-top 1s;
	/* margin-top se leerá desde variable cfg */
}

#wasteCont { position:absolute; top:180px; left:760px; height:140px; width:55px; z-index:2; padding-left:30px; }
#waste { position:absolute; left:0; bottom:0; z-index:1; }
#etapasCont { position:absolute; left:380px; top:10px; width:320px; height:300px; }
.etapa { position:absolute; left:0; top:0; width:100%; height:301px; 
	opacity:0;
	transition: width 2s, left 2s, right 2s, opacity 2s;
}
.etapa h4 { text-align:center; font-weight:normal; font-style:normal; font-size:1em; margin:0; padding:0; }
#etapasCont .navi { position:absolute; top:127px; }
#etapasCont .navi button { border-radius:0.3em; font-size:22px; padding:0 0 2px 0; }
#etapasCont #naviA { left:-30px; }
#etapasCont #naviB { right:-30px; }

#tubosCont { position:absolute; left:50px; top:205px; }
.tubo { height:75px; width:21px; display:inline-block; position:relative; margin-right:17px; }
.tubo img { position:absolute; z-index:3; bottom:0; left:0; }
#tubosEtiq { position:absolute; left:38px; top:288px; }
#tubosEtiq span { display:inline-block; font-size:16px; width:46px; text-align:center; }

.spot { position:absolute; bottom:42px; width:20px; height:19px; padding-bottom:10px; }
#etapa1 .spotRef { position:absolute; bottom:50px; border-bottom:1px solid gray; width:20px; }
#etapa2 .spotRef,
.placa3 .spotRef { position:absolute; bottom:28px; border-bottom:1px solid gray; width:20px; z-index:9; }
#etapa1 .spotEtiq { position:absolute; bottom:47px; font-size:14px; }
#etapa2 .spotEtiq,
.placa3 .spotEtiq { position:absolute; bottom:20px; font-size:14px; z-index:9; }
.spotEtiq span { position:absolute; width:0.6em; text-align:center; }

.pipBkg {
		background-repeat: no-repeat;
		background-size: 3px 25px;
		background-position-y: 137px;
		background-position-x: center;
		background-image: none;
}
.bkg_BF9000 { background-image: url(img/1px-BF9000.svg); } /* aa y líp */
.bkg_DFC800 { background-image: url(img/1px-DFC800.svg); }
.bkg_F7E340 { background-image: url(img/1px-F7E340.svg); } /* líp */
.bkg_FFF8B0 { background-image: url(img/1px-FFF8B0.svg); }
.bkg_996633 { background-image: url(img/1px-996633.svg); }
.bkg_A0A040 { background-image: url(img/1px-A0A040.svg); }
.bkg_DCDCB8 { background-image: url(img/1px-DCDCB8.svg); }
.bkg_75DBCD { background-image: url(img/1px-75DBCD.svg); } /* aa */
.bkg_C9DBBA { background-image: url(img/1px-C9DBBA.svg); }
.bkg_DCDBA8 { background-image: url(img/1px-DCDBA8.svg); }
.bkg_F5CDA7 { background-image: url(img/1px-F5CDA7.svg); }
.bkg_FAA381 { background-image: url(img/1px-FAA381.svg); }
.bkg_FFE300 { background-image: url(img/1px-FFE300.svg); } /* pigm */
.bkg_729A24 { background-image: url(img/1px-729A24.svg); } 
.bkg_25AD33 { background-image: url(img/1px-25AD33.svg); } 
.bkg_80ED1A { background-image: url(img/1px-80ED1A.svg); } 
.bkg_F8A900 { background-image: url(img/1px-F8A900.svg); } 
.bkg_DD563B { background-image: url(img/1px-DD563B.svg); } 
.bkg_FFCE3D { background-image: url(img/1px-FFCE3D.svg); } 
.bkg_FF655B { background-image: url(img/1px-FF655B.svg); } 
.bkg_806000 { background-image: url(img/1px-806000.svg); } 

#placaPers { 
	position:absolute; left:50px; top:30px; 
	border:3px solid #AF5E4D; 
	background-color:white; 
	width:215px; height:250px; 
	box-shadow:0px 5px 20px rgba(0,0,0,0.35); 
	transform: perspective(400px) rotateX(45deg);
}
#placa, .placa3 { 
	position:absolute; left:50px; top:58px; 
	z-index:4;
	border:2px solid #AF5E4D; 
	background-color:white; 
}
#placa, .placa3 { 
	width:215px; height:220px; 
}
#clonPlaca3 { 
	width:245px; height:220px; 
}
#clonPlaca3 #regla { position:absolute; top:0; left: 218px; width:29px; height:194px;
 background-image: url(img/regla.gif); background-repeat: no-repeat; 
}
#clonPlaca3 #leyenda { position:absolute; bottom:-30px; font-size:12px; padding-bottom:4px; }
.placa3 { top:40px; }
#clonPlaca3 .placa3 { 
	left:0; top:0; 
}
#masc3 { position:absolute; height:100%; width:100%; z-index:6; background-color:white; opacity:1; transition:opacity 6s; }

#liqui {
	position:absolute; left:0; bottom:0; z-index:6;
	background-color:#f9e79480; /* igual que tanque-liq.svg */
	width:215px; 
	height:8%; /* inicialmente */
	visibility:hidden;
	transition-timing-function: ease-out;
}
#tanque { margin-left:15px; margin-top:0; position:relative; }
#tanque img { width:290px; position:absolute; }
.mancha  { position:absolute; bottom:0; width:100%; z-index:9; fill:#FFFFFF; }
.mancha2 { position:absolute; bottom:0; width:100%; z-index:5; fill:#EBDCBB; }
.manchaYodo { position:absolute; color:#AF6C00CC; background-color:#AF6C00; border-radius:4px; z-index:5; } /* color se usará para box-shadow */
.manchaNinh { position:absolute; color:#AC5B88CC; background-color:#AC5B88; border-radius:4px; z-index:5; }
.manchaPigm { position:absolute; border-radius:4px; z-index:5; }
#contManchas2 { opacity:1; transition:opacity 2s; }

#contAerosol { display:none; position:absolute; right:-100px; }
#contAerosol img { height:130px; }
#ninhVapores { display:no00ne; width:100%; position:absolute; bottom:0; z-index:20; opacity:0; transition:opacity 1s; }

#yodoVapores { display:none; width:100%; position:absolute; bottom:10px; z-index:20; }
#aplicarYodo { position:absolute; z-index:22; bottom:4px; right:4px; font-size:14px; border-radius:0.3em; padding:0 2px 2px 2px; background-color:blueviolet; color:white; font-weight:bold; }
#btnFoto { display:none; position:absolute; cursor:pointer; z-index:22; top:3px; left:4px; }
#contYodo { display:none; position:absolute; cursor:pointer; z-index:12; top:24px; right:-60px; }
.boteTapon { position:absolute; top:0; left:0; transform-origin:95% 70%; transition:all 0.8s ease; }
#etiqYodo { position:absolute; bottom:19px; left:9px; width:26px; font-size:14px; font-weight:bold; color:#800080; text-align:center; background-color:#E8F4FF; border-radius:4px; border:2px solid #800080; }

/* pigmentos */
#tiposM  { border-collapse:collapse; }
#tiposM td { vertical-align:top; padding-bottom:0.2em; }
#tiposM th { vertical-align:top; white-space:nowrap; padding-right:0.7ex; }
.tipoMsel { background-color:#E7FFA0; }