@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;
}

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

/* 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: Verdana, Geneva, Tahoma, sans-serif;
  background: none;
  font-size: 12px;

    @media (max-width: 980px) {
  body {
  width: 95%;
  }
}

}

/* Page header and sub-header styling */
#page-header{
  margin-bottom: -.6em;
}

#page-subheader {
  padding-bottom:.8em;
}

/* 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;
  margin-bottom: 0.5em;
  display: inline;
}

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

/* 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 {
  /* Add defaults for browser compat */
  border-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: 915px;
  line-height: 1em;
  left: 5px;
  background-color: transparent;
}

/*-------------------------------------------------------------------*/
/* The box that contains the basebody */
#bodyArea {
  position: absolute;
  top: -45px;
  width: 270px;
  height: 520px;
  text-align: center;
  margin-left:auto;

}

/* 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;
}

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


/* I separated the customization for the left and right eyes, so you can easily create odd-eyed dolls with any combination of colors and shapes. */
#eyes 
{position: absolute; top: -67px; left: 109px;}


/* 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;
  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, can be moved to account for height of sprite */
#swatchesArea { 
  position: absolute; 
  top: 480px;
  width: 249px;
  padding: 5px 10px 0px;
}



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

/* Create a margin around the eye switch images */
#Left-eye-switch img, #Right-eye-switch img {
  margin-top: 5px;
}




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

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

#instructions-list, #terms-list, #external-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: 294px;
  width: 800px;
}


/*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;
}

/*-------------------------------------------------------------------*/
Anti Right-click
/*Commented out by default since I don't care for it. Feel free to uncomment it for your own project. */
#anti-rightclick {
  display:none;
  width: 170px;
  height:  30px;
  line-height: 1.2;
  padding: 3px 3px 3px 15px;
  position: absolute;
  z-index: 9999;
}

@media (max-width: 980px) {

#piecesArea {
  max-width: 55vw;
  }

  
#dollmaker_container
{
  left: 0;
}


#bodyArea, #swatchesArea {
  margin-left: 10px;
  }
  }

#Mouths {
  position: absolute;
  margin-top: 91px;
  margin-left: 110px;
  z-index: 99;
  pointer-events: none;
}

@media (max-width: 780px) {

#piecesArea {
  max-width: 40vw;
  margin-left: .4vw;
  }

#dollmaker_container
{
  left: 0;
}

#bodyArea, #swatchesArea {
  margin-left: 10px;
  }
}