body {
 background-color: #FFFFFF;   
    
}

#workspace {
	background-color:#FFFFFF;
	height:600px;
	margin-bottom:15px;
}

#toolbox {
	background-color:#FFFFF;
	border: 1px solid #d8d8da;
	height:180px;
}

#body_parts {
	float:left;
}

#body_parts ul {
	margin-bottom:100px;
	list-style-type:none;
}

#body_parts li {
	margin:4px;
	background-color:#FFFFF;
	float:left;
	display:inline;
}

#body_parts img {
	height:70px;
	display: block;
    margin: auto;
  -webkit-transition: height 0.2s; /* Safari */
  transition: height 0.2s;
  opacity: 0.5;
}

#body_parts img:hover {
	margin-top: -40px;
	height:90px;
	display: block;
    margin: auto;
  -webkit-transition: height 0.2s; /* Safari */
  transition: height 0.2s;
  opacity: 1;
}

#part_detail {
	float:left;
	width:300px;
	height:350px;
	overflow:auto;
}

#part_detail ul{
	margin-bottom:20px;
	list-style-type:none;
	margin-left:-20px;
}

#part_detail li {
	margin:5px;
	background-color:#FFFFF;
	border: 2px dotted #d8d8da;
	height:80px;
	width:40%;
	float:left;
	display:inline;
}

#part_detail img {
	height:80px;
	display: block;
	padding-top:0px;
    margin: auto;
}

#character {
	display:block;
	position:absolute;
	border: 5px solid #ececec;
	width: 410px;
	height: 410px;
	left:123px;
	top:190px;
}

#body , #helmet, #hair, #bottom, #top, #elbow_wrist, #knees, #skates, #beard, #glasses, #sock, #wheels, #tattoo, #shoes {
	display: block;
    position: absolute;
    left: 105px;
    top: 5px;
    margin: auto;
    height: 400px;
    width: 200px;
}

#eye {
	display:none;
	position:absolute;
	left:104px;
	top:60px;
	height:100px; 
	width:100px;
}

#mustache {
	display:none;
	position:absolute;
	left:104px;
	top:80px;
	height:100px; 
	width:100px;
	z-index:1000;
}

#mouth {
	display:none;
	position:absolute;
	left:105px;
	top:85px;
	height:100px; 
	width:100px;
}



#boobs {
	display:none;
	position: absolute;
    left: 55px;
    top: -16px;
    margin: auto;
    height: 400px;
    width: 200px;
}

#export_button {
    display: block;
    position: absolute;
    width: 200;
    left: 230px;
    top: 620px;
}

#onskate_button{
    display: none;
    position: absolute;
    width: 200;
    left: 230px;
    top: 680px;
}

#offskate_button{
    display: block;
    position: absolute;
    width: 200;
    left: 230px;
    top: 680px;
}

#export_div {
	display:none;
	position:absolute;
	z-index:2000;
	background-color:#FFFFFF;
	height: 595px;
    width: 500px;
    top: 15px;
    left: 81px;
	border: 1px solid #d8d8da;

}


#export_img {
	display: block;
    margin: auto;
    height:480px;
    margin-top: 20px;
    margin-bottom: 15px;
    border: 5px solid #ececec;

}


#export {
    display: block;
    position: absolute;
    width: 300px;
    height: 370px;
    left: 180px;
    top: 180px;
}

#export:hover {
    width: 160px;
}

#select_export_div {
	display:none;
	position:absolute;
	z-index:100;
	background-color:#FFFFFF;
	height:400px;
	width:400px;
	top:100px;
	left:180px;
	border: 1px solid #d8d8da;
}

#export_head {
    height:80px;
    margin-left: 100px;
    margin-top: 20px;
}

#export_body {
    height: 80px;
    margin-left: 100px;
}

#export_marvelous {
    height: 90px;
    margin-left: 30px
}

#export_head:hover {
    height: 85px;
}

#export_body:hover {
    height: 85px;
}

#export_marvelous:hover {
    height: 95px;
}

#save {
    height: 60px;
    margin-left: 108px;
}

#closeExport {
    height: 60px;
    margin-left: 10px;
}


#character_background {
    width: 410px;
    height: 410px;
    background-color: #FFFFFF;
}

#next {
    position: absolute;
    left: 552px;
    top: 300px;
}


#previous {
    position: absolute;
    left: 35px;
    top: 300px;
}

.partSelector.active {
	background: #d8d8da;
}


#body_parts .active > img {
		margin-top: -40px;
		height:90px;
		display: block;
	    margin: auto;
	  -webkit-transition: height 0.2s; /* Safari */
	  transition: height 0.2s;
	  opacity: 1;
	}