/* Froglish css */

html, body {
	background-color: #000000;
}

#froglish {
	position: relative;
	width: 1024px;
	height: 768px;
	margin: 0px auto;
}
#froglish-background {
	width: 100%;
}
#froglish-subtitle {
	position: absolute;
	font-family: 'Gochi Hand', cursive;
	color: #ffffff;
	font-size: 32px;
	text-align: center;
	left: 25%;
	bottom: 4%;
	width: 50%;
	line-height: normal;
	text-shadow: 0px 1px 7px black;
}
.frog {
	position: absolute;
}
.frog:hover {
	cursor: pointer;
}
.frog img {
	width: 100%;
}
.frog-on {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}
.frog-on img {
	position: absolute;
}
.info-button {
	position: absolute;
}
.display-none {
	display: none;
}
#audio-players {
	display: none;
}

/* Whooping Frog */
#whooping-frog {
	width: 21.19140625%;
	top: 34%;
	left: 75%;
}
#whooping-frog .info-button {
	width: 18.433179724%;
	top: 10%;
	left: 76%;
}
#whooping-frog .audio-button {
	width: 18.894009217%;
	top: 51.1%;
	left: 5.8%;
}

/* Western Spotted Frog */
#western-spotted-frog {
	width: 19.62890625%;
	top: 37%;
	left: 27%;
}
#western-spotted-frog .info-button {
	width: 19.900497512%;
	top: 71%;
	left: 33%;
}
#western-spotted-frog .audio-button {
	width: 20.895522388%;
	height: 22.905027933%;
	top: 36.1%;
	left: 72.2%;
}

/* Quacking Froglet */
#quacking-froglet {
	width: 24.51171875%;
	top: 13%;
	left: 15%;
}
#quacking-froglet .info-button {
	width: 15.93625498%;
	top: 7.5%;
	left: 7.8%;
}
#quacking-froglet .audio-button {
	width: 17.928286853%;
	top: 33%;
	left: 77.5%;
}

/* Humming Frog */
#humming-frog {
	width: 21.77734375%;
	top: 25%;
	left: 46%;
}
#humming-frog .info-button {
	width: 17.937219731%;
	top: 48%;
	left: 23%;
}
#humming-frog .audio-button {
	width: 20.627802691%;
	top: 23.4%;
	left: 6%;
}

/* Moaning Frog */
#moaning-frog {
	width: 19.43359375%;
	top: 53%;
	left: 76%;
}
#moaning-frog .audio-button {
	width: 23.115577889%;
	top: 19%;
	left: 6%;
}
#moaning-frog .info-button {
	width: 20.100502513%;
	top: 56%;
	left: 23%;
}

/* Motorbike Frog */
#motorbike-frog {
	width: 17.578125%;
	top: 72%;
	left: 5%;
}
#motorbike-frog .audio-button {
	width: 22.222222222%;
	top: 7%;
	left: 71%;
}
#motorbike-frog .info-button {
	width: 22.222222222%;
	top: 12%;
	left: 15%;
}

/* Turtle Frog */
#turtle-frog {
	width: 20.21484375%;
	top: 33%;
	left: 6%;
}
#turtle-frog .info-button {
	width: 19.323671498%;
	top: 7%;
	left: 7%;
}
#turtle-frog .audio-button {
	width: 19.323671498%;
	top: 69%;
	left: 12%;
}

/* Western Banjo Frog */
#western-banjo-frog {
	width: 20.60546875%;
	top: 65%;
	left: 53%;
}
#western-banjo-frog .info-button {
	width: 18.957345972%;
	top: 63%;
	left: 10%;
}
#western-banjo-frog .audio-button {
	width: 21.327014218%;
	top: 17%;
	left: 6%;
}

/* Slender Tree Frog */
#slender-tree-frog {
	width: 21.09375%;
	top: 77%;
	left: 75%;
}
#slender-tree-frog .info-button {
	width: 18.518518519%;
	top: 9%;
	left: 6.7%;
}
#slender-tree-frog .audio-button {
	width: 19.907407407%;
	top: 44%;
	left: 74.5%;
}

/* Sunset Frog */
#sunset-frog {
	width: 23.33984375%;
	top: 45%;
	left: 48%;
}
#sunset-frog .info-button {
	width: 16.736401674%;
	top: 20%;
	left: 8%;
}
#sunset-frog .audio-button {
	width: 18.828451883%;
	top: 58.6%;
	left: 5.4%;
}