/* ================ wrapper ================ */
.bug-wrapper,
.bug-parts-wrapper{
	height: 766px;
	position: relative;
	/*
	padding: 10px;
	outline: solid 1px #f00;
	*/
}







/* ================ bug ================ */
/* == wrapper == */
.build-a-bug{ position: relative; }


/* == main bug pic == */
#bug{
	height: 100%;
	position: relative;
}

.no-background{ background-image: none !important; }

.kids-body .native-habitat-link{
	position: absolute;
	top: 0;
	right: 100px;
	z-index: 1000;
}

.kids-body .build-a-bug-reset-button{
	position: absolute;
	top: 0;
	right: -60px;
	z-index: 9000;
}

.kids-body .build-a-bug-hint{
	position: absolute;
	top: 0;
	right: 525px;
	z-index: 9000;
}

.build-a-bug-hint:after{
	width: 276px;
	height: 388px;
	content: '';
	background: url(../images/build-a-bug/hint.png) no-repeat 0 0;
	position: absolute;
	bottom: -750px;
	right: -650px;
	opacity: .1;
}

.show-hint:after{
	background: url(../images/build-a-bug/hint-colour.png) no-repeat 0 0;
	opacity: 1;
	-webkit-filter: drop-shadow(0 0 8px black);
}

/* == droppable parts == */
.bug-part{
	position: absolute;
	padding: 0;
	text-align: left;
	font: 0/0 a;
}

#bugGills{
	width: 183px;
	height: 216px;
	top: 219px;
	left: 136px;
	/*background: url(../images/build-a-bug/gills.png) no-repeat 0 0;*/
	z-index: 100;
}

#bugTeeth{
	width: 48px;
	height: 48px;
	top: 176px;
	left: 202px;
	z-index: 30;
	/*background: url(../images/build-a-bug/teeth-on-kid.png) no-repeat 50% 50%;*/
}

#bugTeeth.final-droppable{
	width: 31px;
	height: 15px;
	top: 192px;
	left: 210px;
	z-index: 30;
	/*background: url(../images/build-a-bug/teeth-on-kid.png) no-repeat 0 0;*/
}

#bugNet{
	width: 206px;
	height: 439px;
	top: 0;
	left: 11px;	
	background: url(../images/build-a-bug/empty-net-arm.png) no-repeat 0 0;
}

#bugTube{
	width: 102px;
	height: 36px;
	top: 170px;
	left: 221px;
	z-index: 20;
	/*background: url(../images/build-a-bug/tube.png) no-repeat 0 0;*/
}

#bugEyes{
	width: 138px;
	height: 60px;
	top: 152px;
	left: 155px;
	z-index: 10;
	/*background: url(../images/build-a-bug/eyes.png) no-repeat 0 0;*/
}

#bugLegs{
	width: 298px;
	height: 103px;
	bottom: 293px;
	left: 62px;
	/*background: url(../images/build-a-bug/legs.png) no-repeat 0 0;*/
}

#bugClaws{
	width: 189px;
	height: 66px;
	bottom: 276px;
	right: 115px;
	z-index: 110;
	/*background: url(../images/build-a-bug/claw.png) no-repeat 0 0;*/
}

#bugAntennae{
	width: 92px;
	height: 68px;
	top: 61px;
	right: 150px;
	/*background: url(../images/build-a-bug/antennae.png) no-repeat 0 0;*/
}

#bugBalloon{
	width: 176px;
	height: 308px;
	top: 154px;
	right: 11px;
	background: url(../images/build-a-bug/empty-balloon-arm.png) no-repeat 0 0;
}


/* == draggable parts = */
.part{
	/*
	height: 125px;
	text-align: center;
	line-height: 125px;
	*/
	text-indent: -9999px;
	position: absolute;
	z-index: 200;
}

#partsGills{
	width: 183px;
	height: 216px;
	background: url(../images/build-a-bug/gills.png) no-repeat 0 0;
	top: 275px;
	left: 35px;
	z-index: 210;
}

#partsTeeth{
	width: 48px;
	height: 48px;
	background: url(../images/build-a-bug/teeth.png) no-repeat 0 0;
	z-index: 350;
	top: 146px;
	left: 320px;
}

#partsTeeth.final-draggable{
	width: 31px;
	height: 15px;
	background: url(../images/build-a-bug/teeth-on-kid.png) no-repeat 0 0;
}

#partsNet{
	width: 132px;
	height: 269px;
	background: url(../images/build-a-bug/net.png) no-repeat 0 0;
	top: 504px;
	left: 40px;
}

#partsNet.update-draggable{
	width: 206px;
	height: 439px;
	background: url(../images/build-a-bug/net-with-arm.png) no-repeat 0 0;
}

#partsTube{
	width: 102px;
	height: 36px;
	background: url(../images/build-a-bug/tube.png) no-repeat 0 0;
	z-index: 370;
	top: 195px;
	left: 50px;
}

#partsEyes{
	width: 138px;
	height: 60px;
	background: url(../images/build-a-bug/eyes.png) no-repeat 0 0;
	z-index: 10;
	top: 140px;
	left: 160px;
}

#partsLegs{
	width: 298px;
	height: 103px;
	background: url(../images/build-a-bug/legs.png) no-repeat 0 0;
	top: 205px;
	left: 153px;
}

#partsClaws{
	width: 189px;
	height: 66px;
	background: url(../images/build-a-bug/claw.png) no-repeat 0 0;
	z-index: 300;
	top: 315px;
	left: 244px;
}

#partsAntennae{
	width: 92px;
	height: 68px;
	background: url(../images/build-a-bug/antennae.png) no-repeat 0 0;
	top: 120px;
	left: 40px;
}

#partsBubble{
	width: 69px;
	height: 54px;
	background: url(../images/build-a-bug/balloon.png) no-repeat 0 0;
	z-index: 30;
	top: 137px;
	left: 387px;
}

#partsBubble.update-draggable{
	width: 176px;
	height: 308px;
	background: url(../images/build-a-bug/balloon-with-arm.png) no-repeat 0 0;
	z-index: 30;
}

.sm-draggable{
	width: auto;
	height: auto;
	padding: 10px;
	font-size: 1em;
	line-height: 1;
	float: none;
}





/* ================ pics ================ */
.kid{
	background: url(../images/build-a-bug/kid-no-arms.png) no-repeat 50% 50%;
	background-size: contain;
}

.kid-with-everything{
	background: url(../images/build-a-bug/kid-with-everything.png) no-repeat 50% 50%;
	background-size: contain;
}