/***************************************************************************************************/
/*
/***************************************************************************************************/
div.d3calc-editor div.inventory{
  width: 300px; height: 430px;
  background: url(inventory/bg.jpg);
}
div.d3calc-editor[data-genre="Male"] > div.panel-right > div.inventory {background-position: -300px 0; }
div.d3calc-editor[data-class="Monk"] > div.panel-right > div.inventory{ background-image: url(inventory/bg-monk.jpg); }
div.d3calc-editor[data-class="Wizard"] > div.panel-right > div.inventory{ background-image: url(inventory/bg-wizard.jpg); }
div.d3calc-editor[data-class="Barbarian"] > div.panel-right > div.inventory{ background-image: url(inventory/bg-barbarian.jpg); }
div.d3calc-editor[data-class="DemonHunter"] > div.panel-right > div.inventory{ background-image: url(inventory/bg-demonhunter.jpg); }
div.d3calc-editor[data-class="WitchDoctor"] > div.panel-right > div.inventory{ background-image: url(inventory/bg-witchdoctor.jpg); }





div.d3calc-editor div.inventory > div.slot {
  position: absolute;
  border: 2px solid transparent;
  cursor: pointer;
  
  //background: green;
}


div.d3calc-editor div.inventory > div.slot:after { margin-top: 0; bottom: -15px; }

div.d3calc-editor div.inventory > div.slot.defined {
  border-color: green;
  background: rgba(0,255,0, 0.1);
}


div.d3calc-editor div.inventory > div.slot:hover { background: rgba(255, 255, 255, 0.35); border-color: #aaa/*eee*/; }



div.d3calc-editor[data-slot="Head"] div.inventory > div.slot[data-slot="Head"],
div.d3calc-editor[data-slot="Neck"] div.inventory > div.slot[data-slot="Neck"],
div.d3calc-editor[data-slot="Shoulders"] div.inventory > div.slot[data-slot="Shoulders"],
div.d3calc-editor[data-slot="Torso"] div.inventory > div.slot[data-slot="Torso"],
div.d3calc-editor[data-slot="Hands"] div.inventory > div.slot[data-slot="Hands"],
div.d3calc-editor[data-slot="Wrists"] div.inventory > div.slot[data-slot="Wrists"],
div.d3calc-editor[data-slot="Waist"] div.inventory > div.slot[data-slot="Waist"],
div.d3calc-editor[data-slot="Finger1"] div.inventory > div.slot[data-slot="Finger1"],
div.d3calc-editor[data-slot="Finger2"] div.inventory > div.slot[data-slot="Finger2"],
div.d3calc-editor[data-slot="Legs"] div.inventory > div.slot[data-slot="Legs"],
div.d3calc-editor[data-slot="Feet"] div.inventory > div.slot[data-slot="Feet"],
div.d3calc-editor[data-slot="Mainhand"] div.inventory > div.slot[data-slot="Mainhand"],
div.d3calc-editor[data-slot="Offhand"] div.inventory > div.slot[data-slot="Offhand"]{ background: rgba(242, 233, 181, 0.35); border-color: #f2e9b5/*eee*/; }

/*div.d3calc-editor div.inventory > div:after{
  display: none;
  position: absolute;
  content: attr(data-title);
  color: #222;
  background: #eee;
  background: #f2e9b5;
  padding: 4px 4px 2px 4px;
  font-size: 14px;
  line-height: 14px;
  
  margin-top: -23px;
  margin-left: -4px;
  border-top: 1px solid black;
  border-left: 2px solid black;
  border-right: 1px solid black;
  
  white-space: nowrap;
}
div.d3calc-editor div.inventory > div.slot:hover:after { background: #aaa; display: block; }*/

/*
div.d3calc-editor[data-slot="head"]           > div.inventory > div.slot[data-slot="head"]:after,
div.d3calc-editor[data-slot="neck"]           > div.inventory > div.slot[data-slot="neck"]:after,
div.d3calc-editor[data-slot="shoulders"]  > div.inventory > div.slot[data-slot="shoulders"]:after,
div.d3calc-editor[data-slot="torso"]         > div.inventory > div.slot[data-slot="torso"]:after,
div.d3calc-editor[data-slot="hands"]         > div.inventory > div.slot[data-slot="hands"]:after,
div.d3calc-editor[data-slot="wrists"]       > div.inventory > div.slot[data-slot="wrists"]:after,
div.d3calc-editor[data-slot="waist"]         > div.inventory > div.slot[data-slot="waist"]:after,
div.d3calc-editor[data-slot="finger1"]     > div.inventory > div.slot[data-slot="finger1"]:after,
div.d3calc-editor[data-slot="finger2"]     > div.inventory > div.slot[data-slot="finger2"]:after,
div.d3calc-editor[data-slot="legs"]          > div.inventory > div.slot[data-slot="legs"]:after,
div.d3calc-editor[data-slot="feet"]          > div.inventory > div.slot[data-slot="feet"]:after,
div.d3calc-editor[data-slot="mainhand"]   > div.inventory > div.slot[data-slot="mainhand"]:after,
div.d3calc-editor[data-slot="offhand"]     > div.inventory > div.slot[data-slot="offhand"]:after { background: #f2e9b5; display: block; }*/


/* -207 -3 */
div.d3calc-editor div.inventory > div.slot[data-slot="Head"] { width: 56px; height: 56px; margin-top: 16px; margin-left: 120px; }
div.d3calc-editor div.inventory > div.slot[data-slot="Neck"] { width: 44px; height: 44px; margin-top: 59px; margin-left: 204px; }
div.d3calc-editor div.inventory > div.slot[data-slot="Shoulders"] { width: 56px; height: 78px; margin-top: 38px; margin-left: 38px; } /*ok*/
div.d3calc-editor div.inventory > div.slot[data-slot="Torso"] { width: 72px; height: 105px; margin-top: 84px; margin-left: 112px; }
div.d3calc-editor div.inventory > div.slot[data-slot="Hands"] { width: 56px; height: 78px; margin-top: 137px; margin-left: 12px; }
div.d3calc-editor div.inventory > div.slot[data-slot="Wrists"] { width: 56px; height: 78px; margin-top: 137px; margin-left: 228px; }
div.d3calc-editor div.inventory > div.slot[data-slot="Waist"] { width: 72px; height: 24px; margin-top: 203px; margin-left: 112px; }
div.d3calc-editor div.inventory > div.slot[data-slot="Finger1"] { width: 32px; height: 32px; margin-top: 237px; margin-left: 24px; }
div.d3calc-editor div.inventory > div.slot[data-slot="Finger2"] { width: 32px; height: 32px; margin-top: 237px; margin-left: 240px; }
div.d3calc-editor div.inventory > div.slot[data-slot="Legs"]{ width: 56px; height: 78px; margin-top: 241px; margin-left: 120px; }
div.d3calc-editor div.inventory > div.slot[data-slot="Feet"]{ width: 56px; height: 78px; margin-top: 333px; margin-left: 120px; }
div.d3calc-editor div.inventory > div.slot[data-slot="Mainhand"]{ width: 56px; height: 120px; margin-top: 291px; margin-left: 12px; }
div.d3calc-editor div.inventory > div.slot[data-slot="Offhand"]{ width: 56px; height: 120px; margin-top: 291px; margin-left: 228px; }


div.d3calc-editor[data-slot="Head"]         div.tooltip[data-slot="Head"],
div.d3calc-editor[data-slot="Neck"]         div.tooltip[data-slot="Neck"],
div.d3calc-editor[data-slot="Shoulders"] div.tooltip[data-slot="Shoulders"],
div.d3calc-editor[data-slot="Torso"]       div.tooltip[data-slot="Torso"],
div.d3calc-editor[data-slot="Hands"]       div.tooltip[data-slot="Hands"],
div.d3calc-editor[data-slot="Wrists"]     div.tooltip[data-slot="Wrists"],
div.d3calc-editor[data-slot="Waist"]       div.tooltip[data-slot="Waist"],
div.d3calc-editor[data-slot="Legs"]         div.tooltip[data-slot="Legs"],
div.d3calc-editor[data-slot="Feet"]         div.tooltip[data-slot="Feet"],
div.d3calc-editor[data-slot="Finger1"]    div.tooltip[data-slot="Finger1"],
div.d3calc-editor[data-slot="Finger2"]    div.tooltip[data-slot="Finger2"],
div.d3calc-editor[data-slot="Mainhand"]  div.tooltip[data-slot="Mainhand"],
div.d3calc-editor[data-slot="Offhand"]    div.tooltip[data-slot="Offhand"]{ display: block; }