/* This script is modified from Ninique's Dollmaker Script (http://minidollz.ninique.net) */

/*These are needed for the tab functionality and drag/drop functionality to work*/
.ui-tabs-hide 			{ visibility:hidden;}
.ui-tabs-panel { position:absolute; width:100%;}

* {
  box-sizing: border-box;
}
/*------------------------------------------------*/

/*General body styles. Change to your own colors! */
body {
font-family: 'Open Sans', sans-serif;
background: #eee;
background-image: url(bg-general.jpg);
background-size: cover;
background-attachment: fixed;
color: #666;
}

/* This specifies styles that will affect all the boxes. Change to your own colors!*/
#bodyArea, #swatchesArea, .ui-tabs-panel{
border: 1px solid #888;
background: #fff;
}

/*this puts rounded corners around the boxes*/
.ui-corner-all, .ui-tabs-panel{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}


/*This div contains the whole dollmaker. It can be placed anywhere on the page and everything will follow
  Keep the height unspecified so that it can stretch to accomodate varied number of pieces */
#dollmaker_container {
position: absolute;
top: 50px; /*Change these values to whatever you want*/

}

/*-------------------------------------------------------------------*/
/* The box that contains the basebody */
#bodyArea
{
position: relative;
margin-top: 2rem;
top: 0px;
width: calc((95vh - 50px)*(2/3));
height: calc(95vh - 50px);
text-align: center;
display: block;

overflow: hidden;
}

.dollmaker-img {
position: absolute;
top: 0;
left: 0;
/* top: 0;
left: -55vh;
 height: calc(250vh); */
/* height: calc(95vh - 50px); */

}

.dollmaker-zoom-img {
position: absolute;
/* top: -50px;
left: -500px; */
top: 0;
left: -35vh;
 height: calc(200vh);

}

#full-button {
  height: 2rem;
  width: 15%;
position:relative;
font-size: 0.8rem;
top: 0;
z-index: 60;

}

#face-button {
position:relative;
font-size: 0.8rem;
height: 2rem;
width: 15%;
z-index: 60;

}


/*-------------------------------------------------------------------*/
/*The tabbed area at the right that contains all the draggable pieces*/
#piecesArea {
position: relative;
max-width: 700px;
/* left: 525px;
width: 625px; */
}

/*Positioning for tabs area*/
#tabsbar {
text-align: left;
padding: 5px 10px 0px 10px; /* This extra space is required for browser compatibility */
margin-bottom: -10px;
font-size: 14px;
}


/*Allows the tabs to be next to eachother*/
#tabsbar li{
display: inline;
}

/*Individual tabs. Change to your own colors!*/
#tabsbar li a {
/* !!!!!IE7 */ padding: 3px 10px 4px;
border: 1px solid #888;
background-color: #ddd;
color: #666;
text-decoration: none;
font-weight:bold;
}

/*Selected tab. Change to your own colors!*/
#tabsbar .ui-state-active a {
border-bottom: 1px solid #fff;
background-color: #fff; /* This needs to be the the same as the background color of the panel.*/
position:relative;
z-index:2;
}

/*-------------------------------------------------------------------*/
/* The panel under the tabs that contain the props*/
.ui-tabs-panel{
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
clear:both;
padding:5px;
height: calc(95vh - 100px);
}

#piecesArea div {
padding: 10px 10px 0;
}


#piecesArea img{
margin: .25rem;
padding: .25rem;
border: 1px solid #ddd;
max-height: calc(20vh);
max-width: calc(15vh);
}

[class^="tabs-"] {
clear: both;
display: block;
margin-bottom: 3rem;
}



.doll-footer {
clear: both;
position: absolute;
top: calc(95vh - 50px);
font-size: .8rem;

z-index: 3;
height: 30px!important;
overflow: hidden;
}