@import url("reset.css"); /* This is to reset all default browser CSS to none.*/

/*----------------------------------------------*/
/*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%;}
.draggedout { visibility:visible; position:absolute;}

/*------------------------------------------------*/

/*General body styles. Change to your own colors!
body {
font-size: 12px;
background: #eee;
color: #99e3fa;
} */

/* NOTE: You can change the colors for the tabs further below . . . .*/

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

/* this puts rounded corners around the tabs*/
.ui-corner-top a{
-moz-border-radius-topleft:20px;
-webkit-border-top-left-radius:20px;
-moz-border-radius-topright:20px;
-webkit-border-top-right-radius:20px;
border-top-left-radius:20px;
border-top-right-radius:20px;
}

/*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: 30px; /*Change these values to whatever you want*/
left: 30px;
}

/*-------------------------------------------------------------------*/
/* The box that contains the basebody */
#stickyArea   
{
position: absolute;
top: 0px;
left:200px;
width: 1325px;
height: 1000px;
text-align: center;
background-color: #99e3fa00;
display:grid;
}

/*#stickyArea img {position: absolute;}*/

/*-------------------------------------------------------------------*/
/*The tabbed area at the right that contains all the draggable pieces*/
#piecesArea {
position: absolute; 
left:300px;
width: 500px;
top:-130px;
z-index:23;
border-radius:20px;
grid-area:right;
  height:1000px;
  margin-bottom:0;
}

/*Positioning for tabs area*/
#tabsbar {
text-align: left; 
line-height:45px;

}


/*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: 10px dotted #db16b0d8; 
background-color: #2c0223be; 
color: #99e3fa; 
text-decoration: none;
font-weight:bold;
font-size:25px;

}

/*Selected tab. Change to your own colors!*/
#tabsbar .ui-state-active a {
background-color: #db16b05e; /* This needs to be the the same as the background color of the panel.*/
position:relative;
z-index:2;
 filter: drop-shadow(0px -5px 5px #cf83e247)
drop-shadow(0px 5px 5px #cf83e247)
drop-shadow(5px 0px 5px #cf83e247)
drop-shadow(-5px 0px 5px #cf83e247);
    transition: ease-in-out .6s;
  transform: translate(0px, -10px);

}

/*-------------------------------------------------------------------*/
/* The panel under the tabs that contain the props*/
.ui-tabs-panel{ 
overflow:visible; /* so that the panel extends as you add pieces to it*/
clear:both;
border-radius:20px;
  border: 10px dotted #db16b0d8;
  border-radius:20px;
  background-color: #2c0223be;
  font-size:20px;
  
}

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


#piecesArea img{
margin: 0 10px 10px 0;
cursor: move;
}


ul {
    margin-block-end: 1px;

}