@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-family: verdana, arial, sans-serif;
font-size: 12px;
background: #eee;
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;
}

/* 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: 5px; 
-webkit-border-radius: 5px;
}

/* this puts rounded corners around the tabs*/
.ui-corner-top a{
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-right-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: 30px; /*Change these values to whatever you want*/
left: 30px;
}

/*-------------------------------------------------------------------*/
/* The box that contains the basebody */
#bodyArea
{
position: absolute;
top: 0px;
width: 544px;
height: 584px;
text-align: center;
}

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

/* Position of the base body elements*/
#skintone {margin: 40px 0 0 0;}

#eyes {position: absolute; top: 67px; left: 109px;}

/*-------------------------------------------------------------------*/
/* The area under the base that has links for skintones */
#swatchesArea { 
position: absolute; 
top: 370px;
width: 240px;
padding: 0px 5px;
}

/* individual links for thumbnails */
#swatchesArea a {
display: block;
float: left;
border: 1px solid #666;
margin: 2px 2px 7px 2px;
width: 20px;
height:20px;
position:relative;
}

/* the title of that area */
#swatchesArea h3 {
font-size: 12px;
font-weight: bold;
clear: both;
padding: 7px 0 5px 0;
}

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

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


/*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:visible; /* so that the panel extends as you add pieces to it*/
clear:both;
padding:5px;
}

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


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

/*-------------------------------------------------------------------*/
/* Anti Right-click */
#anti-rightclick {
display:none;
width: 170px;
height:  30px;
line-height: 1.2;
background: #fff;
border: 1px solid #ccc;
padding: 3px 3px 3px 15px;

position: absolute;
z-index: 9999;
}