/* PANEL */

TABLE#cpEstadoPuertoMapa {
	background-image: linear-gradient(to bottom, #f1f4fe, #cbdff6 150px, #c0d8f1 150px, #bcd5f0);
}

DIV#estadoPuertoMapaPanel {
	position: relative;
	height: 624px;
	width: 920px;
}

/* BOTONES */

.estadoPuertoMapaBoton {
	background-color: #e5eff9;
	cursor: pointer;
	display: block;
	font-size: 11px !important;
	text-decoration: none;
}

#estadoPuertoMapaPanelControl .estadoPuertoMapaBoton:HOVER {
	background-color: #ffe08e;
	transition: 0.2s;
}

#estadoPuertoMapaPanelControl .estadoPuertoMapaBoton:ACTIVE {
	background-color: #edebd9;
}

.estadoPuertoMapaBoton:BEFORE {
	background-repeat: no-repeat;
	content: "";
	display: inline-block;
	height: 18px;
	width: 18px;
	vertical-align: middle;
}

.estadoPuertoMapaBoton.estadoPuertoMapaIconoCerrado:BEFORE {
	background-image: url("/a/ir-resources/semaforo.png");
	background-position: -1px -1px;
}

.estadoPuertoMapaBoton.estadoPuertoMapaIconoParcial:BEFORE {
	background-image: url("/a/ir-resources/semaforo.png");
	background-position: -1px -21px;
}

.estadoPuertoMapaBoton.estadoPuertoMapaIconoAbierto:BEFORE {
	background-image: url("/a/ir-resources/semaforo.png");
	background-position: -1px -41px;
}

.estadoPuertoMapaBoton > SPAN {
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	padding: 0px 3px 0px 3px;
	vertical-align: middle;
	white-space: nowrap;
}

/* LEYENDA */

#estadoPuertoMapaLeyenda {
	border: 4px solid #fff;
	border-radius: 4px;
	height: 30px;
	line-height: 30px;
	position: absolute;
	right: 0px;
	text-align: center;
	top: 0px;
	width: 292px;
}

#estadoPuertoMapaLeyenda .estadoPuertoMapaBoton {
	display: inline-block;
	font-size: 14px !important;
	font-weight: bold;
	min-width: 0px;
}

/* MAPA */

#estadoPuertoMapaUbicacion {
	background: url("/a/ir-resources/mapa.png") no-repeat;
	background-position: 300px 0px;
	height: 100%;
	left: 0px;
	position: absolute;
	top: 0px;
	width: 100%;
}

/* FLOTANTES */

#estadoPuertoMapaPanelControl {
	height: 100%;
	left: 0px;
	position: absolute;
	top: 0px;
	width: 100%;
}

/* FLOTANTES DE OODD */

#estadoPuertoMapaListaOodd {
	position: relative;
	cursor: pointer;
}

.estadoPuertoMapaOodd {
	position: absolute;
	white-space: nowrap;
}

.estadoPuertoMapaOodd_termport {
	background-color: #fff;
	position: absolute;
}

.estadoPuertoMapaOodd_titulo {
	margin: 0px 6px;
	font-size: 11px;
	font-weight: bold;
	position: absolute;
	text-shadow: 0px 0px 4px #fff,
	             0px 0px 4px #fff,
	             0px 0px 4px #fff,
	             0px 0px 4px #fff,
	             0px 0px 4px #fff,
	             0px 0px 4px #fff,
	             0px 0px 5px #fff,
	             0px 0px 5px #fff,
	             0px 0px 6px #fff,
	             0px 0px 6px #fff;
}

.estadoPuertoMapaOodd_con_1,
.estadoPuertoMapaOodd_con_2,
.estadoPuertoMapaOodd_con_3 {
	background-color: #fff;
	height: 4px;
	position: absolute;
}


.estadoPuertoMapaOodd_con_punto {
	background: rgba(255, 255, 255, 1);
	border-radius: 50%;
	height: 8px;
	position: absolute;
	width: 8px;

	box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
	transform: scale(1);
}

.estadoPuertoMapaOodd:HOVER .estadoPuertoMapaOodd_con_punto {
	animation: pulso 1s infinite;
}

@keyframes pulso {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
	}

	100% {
		transform: scale(1);
		box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
	}
}

/* FLOTANTES DE TERMINALES */

#estadoPuertoMapaListaTerminal {
	position: absolute;
	left: 640px;
	top: 330px;
}

.estadoPuertoMapaTerminalPortDet {
	border: 1px solid;
	border-radius: 4px;
}

.estadoPuertoMapaTerminalPortDet.estadoPuertoMapaIconoCerrado {
	border-color: #bf0000;
	background: #bf0000;
	color: #fff;
}

.estadoPuertoMapaTerminalPortDet.estadoPuertoMapaIconoAbierto {
	border-color: #00bf00;
	background: #00bf00;
	color: #fff;
}

.estadoPuertoMapaTerminalPortDet.estadoPuertoMapaIconoParcial {
	border-color: #ffbf00;
	background: #ffbf00;
	color: #000;
}

.estadoPuertoMapaTerminalPortDet .estadoPuertoMapaTerminalPortDetTitulo {
	line-height: 20px;
	font-weight: bold;
}

.estadoPuertoMapaTerminalPortDet .estadoPuertoMapaTerminalPortDetCerrar {
	width: 20px;
	height: 20px;
}

.estadoPuertoMapaTerminalPortDet .estadoPuertoMapaTerminalPortDetCerrar SPAN {
	background: url("/a/ir-resources/semaforo.png") 0px -60px no-repeat;
	display: block;
	width: 100%;
	height: 100%;
}

/* FLOTANTES AYUDA */

.estadoPuertoMapaAyuda_boton {
	margin: 0px 6px;
	font-size: 11px;
	font-weight: bold;
	position: absolute;
}

.estadoPuertoMapaAyuda_boton:BEFORE {
	background-image: url("/a/js/dojo-1.4.0/vup/resources/images/help.png");
	background-repeat: no-repeat;
	content: "";
	display: inline-block;
	height: 18px;
	width: 18px;
	vertical-align: middle;
}