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

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

/* 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; 
  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 */
  background: none;
  font-size: 16px;
}

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

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

#linkback {
    position: absolute;
    left: 0;
    top: 0;
    height: 32px;
    width: 32px;
}

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

/* 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: 1100px;
  margin: auto;
  line-height: 1em;
  background-color: transparent;
  left:-15px;
}

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

/* 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. */
#Skintone {
  inset: 0px;
  position: absolute;
    z-index: 1;
}

/* The background for your doll (NOT the entire dollmaker! This will be part of your exported doll and fits neatly inside the doll frame). */
#Background {
  inset: 0px; /* Set all positions to 0, since the background should be the same width and height as the final doll */
  z-index: 0;
  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: 310px;
  height: 500px;
  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, can be moved to account for height of sprite */
#swatchesArea { 
  position: absolute; 
  top: 480px;
  width: 301px;
  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;
  transition: 0.3s;
}

/* 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{
  position: relative;
  padding: 0px 5px;
  display: none;
}

#instructions-list, #terms-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: 315px;
  width: 795px;
}

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


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

@media (max-width: 800px) {
    #dollmaker_container {
  position: relative;
  max-width: 1050px;
  margin: auto;
  line-height: 1em;
  background-color: transparent;
  left:0px;
}
}