@charset "UTF-8";
/* CSS Document */

body{
	background-color: powderblue;
	text-align:center;
	font-family: 'Indie Flower', cursive;
}

div{
	display:inline-block;
}

img{
	cursor:pointer;
}

.topButton{
	float:right;
}
/* Containers and etc. */
.header{
	background-color:rgba(255,255,255,0.75);
	width:95%;
	height:50px;
	padding:15px;
	text-align:left;
}

.instructions{
	position:absolute;
	float:left;
	left:575px;
	background-color:rgba(255,255,255,0.95);
	width:700px;
	height:600px;
	margin:20px;
	padding:10px;
	outline: 5px dotted #37548F;
}

.dollContainer{
	position:relative;
	background-color:rgba(255,255,255,0.75);
	width:500px;
	height:620px;
	float:left;
	margin:20px;
}

.menuContainer{
	background-color:rgba(255,255,255,0.75);
	width:700px;
	height:600px;
	float:left;
	margin:20px;
	padding: 10px;
	text-align:left;
}

.menu{
	background-color:rgba(255,255,255,0.75);
	text-align:center;
	padding:2px;
	margin:2px;
}


/* starting position IDs*/
#base{
	width:300px;
	height:691px;
	background-image: url("../images/base/toneOne.png");
	background-repeat: no-repeat;
}
#eyebrows{
	position:absolute;
	width:300px;
	height:620px;
}

#eyes{
	position:absolute;
	width:300px;
	height:620px;
}

#noses{
	position:absolute;
	width:300px;
	height:620px;
}

#mouths{
	position:absolute;
	width:300px;
	height:620px;
}

#tops{
	position:absolute;
	width:300px;
	height:620px;
}

#bottoms{
	position:absolute;
	width:300px;
	height:620px;
}

#feet{
	position:absolute;
	width:300px;
	height:620px;
}

#hair{
	position:absolute;
	width:300px;
	height:620px;
}

#instructions{
	visibility: visible;
}