/* Se usa la unidad vw, que representa 1% del ancho del viewport, como unidad de medida. Esto permite que los botones tengan un tamaño consistente sin importar la resolución */

#dockbar_widget {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1em;
	text-align: center;
	pointer-events: none;
	font-size: 0.8rem;
}

.dockbar {
	pointer-events: auto;
	height: 4em;
	background: #333;
	background: rgba(51,51,51,0.9);
	display: inline-block;
	border-radius: 0.75em;
}

	.dockbar > div {
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}

	.dockbar .nav {
		font-family: "FontAwesome";
		width: 4em; /* calza con height de .dockbar */
		height: 4em;
		color: gray;
		line-height: 4em;
	}

		.dockbar .nav.active {
			color: white;
			cursor: pointer;
		}

		.dockbar .nav:before {
			display: inline;
			font-size: 2em;
		}

	.dockbar .prev:before {
		content: "\00f053"; /*chevron-left*/
	}

	.dockbar .next:before {
		content: "\00f054"; /*chevron-right*/
	}

	.dockbar .iconHolder {
		margin: 0 1em;
	}

	.dockbar .prev {
		border-right: solid black 1px;
	}

	.dockbar .next {
		border-left: solid black 1px;
	}

	.dockbar .iconCarouselWrapper {
		width: 100%;
		height: 9.4em; /* 4em alto dockbar + 2em iconos levantados (margin-top) + 1em para que los iconos puedan subir al ser seleccionados (bottom en .dockItem.active) + 2.4em margen inferior para el puntito (.dockbar .dockItem:after font-size * bottom) (si no se da el margen aparece un scrollbar) */
		margin-top: -3em; /* 2em iconos levantados + 1em de espacio para que los iconos puedan subir (.dockItem.active bottom) */
		padding-top: 1em; /* el espacio que los iconos suben (.dockItem.active bottom) */
		overflow-x: hidden;
	}

	.dockbar .iconCarousel {
		position: relative;
		white-space: nowrap;
		width: 100%;
		text-align: center;
		left: 0;
		transition: left ease 0.25s;
	}

	.dockbar .dockItem {
		display: inline-block;
		position: relative;
		height: 5em; /* calza con .dockbar .dockItem .dockIcon */
		width: 5em; /* calza con .dockbar .dockItem .dockIcon */
		margin: 0 0.5em;
		bottom: 0;
		transition: bottom ease-in 0.1s;
	}

		.dockbar .dockItem.active {
			bottom: 1em;
		}

		.dockbar .dockItem:after {
			position: absolute;
			color: white;
			font-size: 2em;
			bottom: -1.2em;
			width: 100%;
			left: 0;
			right: 0;
			margin: 0 auto;
			content: "•";
			visibility: hidden;
			transition: visibility step-start 0.1s;
		}

		.dockbar .dockItem.active:after {
			visibility: visible;
			transition: visibility step-end 0.1s;
		}

		.dockbar .dockItem .dockIcon {
			display: block;
			width: 5em;
			height: 5em;
			border-radius: 50%;
			color: white;
			background: gray;
			box-shadow: 1px 3px rgba(20,24,75,0.4);
			cursor: pointer;
		}

			.dockbar .dockItem .dockIcon i {
				position: relative;
				top: 0.5em;
				font-size: 2.5em;
			}

			.dockbar .dockItem .dockIcon.color1 {
				background: #06c;
			}

				.dockbar .dockItem .dockIcon.color1:hover, .dockbar .dockItem .dockIcon.color1.flash {
					background: #0080ff;
				}

			.dockbar .dockItem .dockIcon.color2 {
				background: #056133;
			}

				.dockbar .dockItem .dockIcon.color2:hover, .dockbar .dockItem .dockIcon.color2.flash {
					background: #08914d;
				}

			.dockbar .dockItem .dockIcon.color3 {
				background: #ec5b13;
			}

				.dockbar .dockItem .dockIcon.color3:hover, .dockbar .dockItem .dockIcon.color3.flash {
					background: #f9681f;
				}

			.dockbar .dockItem .dockIcon.color4 {
				background: #aa1309;
			}

				.dockbar .dockItem .dockIcon.color4:hover, .dockbar .dockItem .dockIcon.color4.flash {
					background: #da180b;
				}

			.dockbar .dockItem .dockIcon.color5 {
				background: #8b29a3;
			}

				.dockbar .dockItem .dockIcon.color5:hover, .dockbar .dockItem .dockIcon.color5.flash {
					background: #ad33cc;
				}

			.dockbar .dockItem .dockIcon.color6 {
				background: #990;
			}

				.dockbar .dockItem .dockIcon.color6:hover, .dockbar .dockItem .dockIcon.color6.flash {
					background: #c2c20a;
				}

@media (max-height: 599px), (max-width: 799px) {
	/* bajo cierta resolución simplemente dejamos el dock de tamaño fijo. En la practica no se puede realmente usar el mapa en una pantalla demaciado chica, anyways. */

	#dockbar_widget {
		bottom: 0;
	}

	.dockbar {
		height: 30px;
		width: 100%;
		border-radius: 0;
	}

		.dockbar .nav {
			width: 30px; /* calza con height de .dockbar */
			height: 30px;
			line-height: 30px;
		}

			.dockbar .nav:before {
				font-size: 16px;
			}

		.dockbar .prev {
			float: left;
		}

		.dockbar .next {
			float: right;
		}

		.dockbar .iconHolder {
			padding: 0 5px;
		}

		.dockbar .iconCarouselWrapper {
			height: 65px; /* 30px alto dockbar + 20px iconos levantados + 5px desplazamiento iconos al ser seleccionados + 5px margen inferior para el puntito + 5px por si acaso */
			margin-top: -25px; /* 20px desplazamiento + 5px de espacio para que los iconos puedan subir (.dockItem.active bottom)  */
			padding-top: 5px; /* el espacio que los iconos suben (.dockItem.active bottom) */
		}

		.dockbar .dockItem {
			height: 40px; /* calza con .dockIcon */
			width: 40px; /* calza con .dockIcon */
			margin: 0 5px;
			bottom: 0;
		}

			.dockbar .dockItem.active {
				bottom: 5px;
			}

			.dockbar .dockItem .dockIcon {
				width: 40px;
				height: 40px;
			}

				.dockbar .dockItem .dockIcon i {
					font-size: 20px;
				}

			.dockbar .dockItem:after {
				font-size: 20px;
				bottom: -13px;
				line-height: 10px;
			}
}