.dressup-wrapper {
	position: relative;
	width: 100%;
}

.dressup-wrapper svg.dressup-base {
	max-height: 90vh;
}

/* navigation */
.dressup-wrapper nav ul {
	margin: 0;
	padding: 0.5em 0.5em 0.5em 0;
}

.dressup-wrapper nav ul li {
	display: inline;
	padding-right: 0.5em;
}

.dressup-wrapper nav ul li a {
	text-decoration: none;
}

.next-button text:hover, .prev-button text:hover {
	text-decoration: underline;
}

nav ul li.layer-title {
	display: block;
	font-weight: bold;
}

.next-button text, .prev-button text {
	fill: #FFF;
	font-size: 0.85em;
	font-weight: 600;
}

.next-button, .prev-button {
	fill: #E87D00;
}

.next-button:hover, .prev-button:hover {
	fill: #ffb504;
}

.audio-button circle {
	fill: #E87D00;
}

.audio-button:hover  {
	fill: #ffb504;
}

.buttondisabled {
	fill: #D9D9D9;
}

.buttondisabled:hover {
	fill: #F5F5F5;
}

/* pop ups */
.dressup-pop {
	position: absolute;
}

.dressup-pop {
	background-color: white;
	border: 1px solid gray;
	box-shadow: 2px 2px 6px black;
	max-width: 50%;
	padding: 1em;
}

.dressup-pop h2, .dressup-pop p {
	font-size: 0.8em;
	margin-top: 0;
}

.dressup-pop img {
	max-width: 100%;
	max-height: 250px;
}

/* pop up positions */
.left-top, .right-top, .full-top {
	top: 25%; left: 50%;
}

.left-middle, .right-middle, .full-middle {
	top: 50%; left: 50%;
}

.left-bottom, .right-bottom, .full-bottom {
	top: 70%; left: 50%;
}

.full-top img, .full-middle img, .full-bottom img {
	float: left;
	margin-right: 0.75em;
}

.hotspot {
	fill: #FFF;
	fill-opacity: 0.0;
}

/* hotspots */
.hotspoton {
	fill: #E87D00;
	fill-opacity: 0.5;
}