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

/* Also, I stored all the colors in a separate file. This is because I was originally gonna add theming but it wasn't working out unfortunately. I kept them separate because no way am I adding them all back. */

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

/* 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;
  position: absolute;
  width: 100%;
}

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

/* General HTML stylings */
html {
  image-rendering: pixelated; /* We are working with art assets, so we want the page to look pixelated even on zoom-in so the images will not blur. This also helps with canvas rendering (now for real because of my custom html2canvas fork). */
  scroll-behavior: smooth; /* To scroll slowly while dragging, rather than shifting quickly all over the place */
  touch-action: initial;
  
}

/*General body styles. Change to your own colors! */
body {
  overscroll-behavior: none; /* Prevents pull-to-refresh on mobile */
  font-family: 'Times New Roman', serif;
  background: none;
}

/* Page header and sub-header styling */
#page-header, #page-subheader {
  text-align: center; /* Center the page header and sub-header */
  margin: 0;
}

/* Specific stylings for page header */
#page-header, #page-header a {
  font-size: 46px;
}

/* Specific stylings for page sub-header */
#page-subheader, #page-subheader a {
  font-size: 26px;
  margin-bottom: 1em;
}

#page-header a, #page-subheader a {
  text-decoration: none;
}

h3 {
  font-size: 14px;
}

/* Stylings for buttons */
button {
  border-radius:5px;
  text-align: center;
  transition: 0.3s; /* Fancy button transitions */
  font-size: 17px;
  cursor: pointer;
  display: inline;
  font-family: 'Times New Roman', serif;
}

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

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

/*this puts rounded corners around the boxes*/
.ui-corner-all,.ui-tabs-panel {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  /* Add defaults for browser compat. I highly recommend that you keep all of these the same for consistency among different browsers. */
  border-radius: 5px;
}

/* this puts rounded corners around the divs*/
.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;
  /* Add defaults for browser compat */
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

/* Make headers nice and bold */
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

/*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 */
/* I made the dollmaker nice and responsive, too. */
#dollmaker_container {
  position: relative;
  max-width: 900px;
  margin: auto;
  line-height: 1em;
  left: 5px;
  background-color: transparent;
}

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

/* The background for your doll (NOT the entire dollmaker! This will be part of your exported doll and fits neatly inside the doll frame). */
#Doll-background {
  inset: 0px; /* Set all positions to 0, since the background should be the same width and height as the final doll */
  position: absolute;
}




/* Customize the avatar dimensions here. The avatar div isn't actually visible on the document, although it is technically there on the page. */
#avi-area {
  width: 100px;
  height: 100px;
  top: 35px;
  left: 0; /* These "left", "right* and "margin" settings combined will center an absolutely-positioned div */
  right: 0;
  margin: auto;
  position: absolute;
  visibility: hidden; /* DON'T use "display: none" here, it will completely hide the element and throw an error. */
}

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

/* individual links for thumbnails */
#swatchesArea a {
  display: block;
  float: left;
  margin: 2px 2px 7px 2px;
  text-align: center;
  width: 20px;
  height: 20px;
  position:relative;
  font-family: 'Times New Roman', serif;
  transition: 0.3s;
}

/* the title of that area */
#swatchesArea h3 {
  font-weight: bold;
  clear: both;
  padding: 7px 0 5px 0;
  font-family: 'Times New Roman', serif;
}


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

/* Instructions for using the dollmaker */
#instructions {
  position: relative;
  padding: 0px 5px;
  display: none;
}

#instructions-list {
  margin: 1em;
  line-height: 1.5em;
  display: list-item;
  list-style-type: disc;
}

/* Sub-bullet styling */
.subBullet {
  display: list-item;
  list-style-type: circle;
  margin-left: 1em;
}

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

/* Draggable pieces CSS */
.ui-draggable {
  user-select: none; /* Makes it so that draggable pieces aren't selectable even when not dragged (I personally find it annoying when that happens) */
  cursor: grab; /* Add grab cursor on hover */
}

.ui-draggable-dragging {
  cursor:grabbing; /* Add grabbing cursor on dragging */
}

/*The area with divs in the middle that contains all the draggable pieces*/
#piecesArea {
  position: relative;
  left: 264px;
  width: 585px;
}

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

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

/*Individual tabs. Change to your own colors!*/
/* Note: I wouldn't change the tab bar's font and/or font-size here. Make it the same size as the body font size. If you don't do it like that, your drag & drop positions will get messed up. Yes, really. */
#tabsbar li a {
  /* !!!!!IE7 */
  padding: 4px 10px 3px;
  font-weight: bold;
  text-decoration: none;
  transition: 0.3s;
}

/*Selected tab. Change to your own colors!*/
#tabsbar .ui-state-active a, #tabsbar .ui-state-active a:hover {
  position: relative;
  z-index: 1;
  font-weight: bold;
}


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

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

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