/***************************************************************************************************/
/*
/***************************************************************************************************/
div.d3calc-editor{
  margin: 10px auto;
  width: 960px; height: 430px;
  border: 2px solid #222;
  background: url(editor/bg.jpg) no-repeat left top black;
  box-shadow: 1px 1px 2px black;
  font-family: "Palatino Linotype", "Times", serif;
  cursor: default;
}


div.d3calc-editor > div.panel-overview{
  display: inline-block;
  width: 220px; height: 380px;
  padding-top: 10px;
  vertical-align: top;
}
div.d3calc-editor > div.panel-overview:empty{ background: url(editor/loading-left.gif) no-repeat 50% 50%; }
/* preloader colors
> FFA012
> 5C3E2C
*/



/***************************************************************************************************/
/*
/***************************************************************************************************/


div.d3calc-editor > div.panel-detail{
  display: inline-block;
  width: 420px; height: 380px;
}
div.d3calc-editor > div.panel-detail:empty{ background: url(editor/loading-left.gif) no-repeat 50% 50%; }

div.d3calc-editor > div.panel-detail h4{
  display: block;
  height: 40px;
  padding: 2px 11px 0 11px;
  font-size: 22px;
  //color: #ffdfc7;
  text-shadow: 1px 1px black;
  text-align: center;
  line-height: 40px;
  font-family: sans-serif;
  background: url(editor/title-bg.png) no-repeat 40% 50%;
}
div.d3calc-editor > div.panel-detail h4 + div.ui-button{
  float: right;
  margin: -34px 10px 10px 0;
  background-image: url(ui/button-medium-cross.png);
}


div.d3calc-editor > div.panel-detail p i{
  color: #bbb;
}



/***************************************************************************************************/
/*
/***************************************************************************************************/


div.d3calc-editor > div.panel-right{
  width: 300px; height: 430px;
  //background: rgba(255,0,0,.1);
  float: right;
}
div.d3calc-editor > div.panel-right:empty{ background: url(editor/loading-right.gif) no-repeat 50% 50%; }





/***************************************************************************************************/
/*
/***************************************************************************************************/

div.d3calc-editor > div.panel-top{
  width: 660px; height: 50px;
  line-height: 50px;
  cursor: default;
}

div.d3calc-editor > div.panel-top > div.ui-button{ margin: 10px 0 0 5px; }
div.d3calc-editor > div.panel-top > div.ui-button + div.ui-button{ margin-left: 2px; }

div[data-genre="Male"].d3calc-editor > div.panel-top > div.button-genre{ background-image: url(editor/button-medium-male.png); }
div[data-genre="Female"].d3calc-editor > div.panel-top > div.button-genre{ background-image: url(editor/button-medium-female.png); }

div.d3calc-editor > div.panel-top div.button-level ul{ width: 329px; border-top: none; }
div.d3calc-editor > div.panel-top div.button-level ul li{
  display: inline-block;
  border-right: none;
  border-right: 1px solid #322a20;
  border-top: 1px solid #322a20;
  font-size: 14px;
  line-height: 32px;
  text-align: center;
  text-shadow: 1px 1px rgba(0,0,0,.6);
}
div.d3calc-editor > div.panel-top div.button-level ul li:nth-child(10n) { border-right: none; }
div.d3calc-editor > div.panel-top div.button-level ul li.mode-normal { background-color: #111111; }
div.d3calc-editor > div.panel-top div.button-level ul li.mode-nightmare { background-color: #1a1a1a; }
div.d3calc-editor > div.panel-top div.button-level ul li.mode-hell { background-color: #252525; }
div.d3calc-editor > div.panel-top div.button-level ul li.mode-inferno { background-color: #433; }
div.d3calc-editor > div.panel-top div.button-level ul li.selected { background-color: #999082/*baae9c*/; color: #eee; font-weight: bold; }

div.d3calc-editor > div.panel-top div.button-class { background-image: url(ui/button-medium-arrowdown.png); }
div[data-genre="Male"].d3calc-editor > div.panel-top div.button-class > ul > li { background-image: url(editor/class-icons-male.png); }
div[data-genre="Female"].d3calc-editor > div.panel-top div.button-class > ul > li { background-image: url(editor/class-icons-female.png); }
div.d3calc-editor > div.panel-top div.button-class > ul > li[data-class="Wizard"] { background-position: -32px 0;}
div.d3calc-editor > div.panel-top div.button-class > ul > li[data-class="Barbarian"] { background-position: -64px 0;}
div.d3calc-editor > div.panel-top div.button-class > ul > li[data-class="DemonHunter"] { background-position: -96px 0;}
div.d3calc-editor > div.panel-top div.button-class > ul > li[data-class="WitchDoctor"] { background-position: -128px 0;}
div[data-class="Monk"].d3calc-editor > div.panel-top div.button-class > ul > li[data-class="Monk"] { background-color: #999082; }
div[data-class="Wizard"].d3calc-editor > div.panel-top div.button-class > ul > li[data-class="Wizard"] { background-color: #999082; }
div[data-class="Barbarian"].d3calc-editor > div.panel-top div.button-class > ul > li[data-class="Barbarian"] { background-color: #999082; }
div[data-class="DemonHunter"].d3calc-editor > div.panel-top div.button-class > ul > li[data-class="DemonHunter"] { background-color: #999082; }
div[data-class="WitchDoctor"].d3calc-editor > div.panel-top div.button-class > ul > li[data-class="WitchDoctor"] { background-color: #999082; }


div.d3calc-editor > div.panel-top > h2{
  display: inline-block;
  vertical-align: top;
  padding-left: 15px;
  width: 175px; height: 50px;
  font-size: 22px;
  font-weight: normal;
  color: #ffdfc7;
  text-shadow: 0 0 3px red;
  overflow: hidden;
  /text-align: center;
}

/* Profile title bar */
div.d3calc-editor > div.panel-top > h3{
  display: inline-block;
  vertical-align: top;
  padding-right: 0px;
  width: 305px; height: 50px;
  overflow: hidden;
  color: #c27e36;
  font-size: 22px;
  font-weight: normal;
  text-shadow: 0 0 3px red;
  text-align: center;
}


div.d3calc-editor > div.panel-top > h3 > span.display{
  display: inline-block;
}
div.d3calc-editor > div.panel-top > h3.edit-mode > span.display{ display: none; }


div.d3calc-editor > div.panel-top > h3 > span.info{
  display: none;
  height: 20px;
  width: 100%;
  font-size: 13px;
  line-height: 22px;
}
div.d3calc-editor > div.panel-top > h3.edit-mode > span.info{ display: inline-block; }


div.d3calc-editor > div.panel-top > h3 > input{
  display: inline-block;
  vertical-align: middle;
  padding-right: 0px;
  height: 20px;
  
  margin-top: 3px;
  
  color: #c27e36;
  font-size: 18px;
  font-weight: normal;
  text-shadow: 0 0 3px red;
  text-align: center;
  
  border: none;
  background-color: transparent;
  border-radius: 8px;
  display: none;
}


div.d3calc-editor > div.panel-top > h3.edit-mode > input{
  border: none;
  background-color: #210504;
  box-shadow: 0 0 3px #c27e36;
  display: inline-block;
  outline: none;
}


div.d3calc-editor > div.panel-top > h3 > input:focus + span,
div.d3calc-editor > div.panel-top > h3 > input:hover + span{ /*/.unsaved:not()*/
  display: inline-block;
}


div.d3calc-editor > div.panel-top > h3 > div.ui-button{
  float: right;
  margin: 10px 3px 0 0;
  background-image: url(editor/button-medium-plus.png);
}

div.d3calc-editor > div.panel-top > h3.edit-mode > div.ui-button{
  display: none;
}

div.d3calc-editor > div.panel-top > h3 > div.ui-button > ul{
  width: 250px;
  margin-top: 0px;
  margin-left: 33px;
  font-size: 14px;
  line-height: 20px;
}
div.d3calc-editor > div.panel-top > h3 > div.ui-button > ul:empty{ display: none }

div.d3calc-editor > div.panel-top > h3 > div.ui-button > ul > li{
  height: 20px;
  background-color: #111;
  cursor: pointer;
  padding: 0 10px;
  text-align: left;
}
div.d3calc-editor > div.panel-top > h3 > div.ui-button > ul > li:hover{ background-color: #222; color: #FFDFC7; }
div.d3calc-editor > div.panel-top > h3 > div.ui-button > ul > li:not(:first-child){
  border-top: 1px solid #322A20;
}


div.d3calc-editor > div.panel-top > h3 > div.ui-button > ul > li.loadable{
  color: #A99877;
}




/* -------------- */
div.d3calc-editor > div.panel-top div.button-menu{
  display: inline-block;
  vertical-align: middle;
  margin: 6px 0 0 2px;
  height: 40px; width: 22px;
  cursor: pointer;
  background: url(editor/button-menu.png);
  vertical-align: middle;
}
div.d3calc-editor div.button-menu:hover{ background-position: -22px; }
div.d3calc-editor div.button-menu:active{ background-position: -44px; }
div.d3calc-editor div.button-menu.ui-button-disabled{ background-position: -66px; }





/***************************************************************************************************/
/*
/***************************************************************************************************/



div.d3calc-editor > div.panel-menu{
  display: inline-block;
  position: absolute;
  width: 960px; height: 430px;
  display: none;
  background: rgba(12,5,0,.95);
  z-index: 99;
}