.elemIcn {
  background-image: url('//storage.proboards.com/955844/images/jBiRPKTIbobQTZLkYHLt.png');
  background-repeat: no-repeat;
  height: 14px;
  width: 14px;
  margin-bottom: -3px;
  display: inline-block;
}

.elemStrIcn {
  background-image: url('//storage.proboards.com/955844/images/syirRKyhfefZWTwpyUhA.png');
  background-repeat: no-repeat;
  height: 14px;
  width: 14px;
  margin-bottom: -3px;
  display: inline-block;
}

.elemWkIcn {
  background-image: url('//storage.proboards.com/955844/images/rsLPTeznyRLlriLyGvQN.png');
  background-repeat: no-repeat;
  height: 14px;
  width: 14px;
  margin-bottom: -3px;
  display: inline-block;
}

.grayShadow {
    text-shadow: -1px -1px 0 #222222, 1px -1px 0 #222222, -1px 1px 0 #222222, 1px 1px 0 #222222;
}

.HWbtHpPort {
    border-radius: 5px 25px 5px 0px;
    opacity:1.0;
    float:left;
    margin-top: -1.5em;
    margin-bottom: -0.5em;
    margin-right: 0.5em;
    width: 60px;
    height: 25px;
    overflow: hidden;
}

.HWbtAtkBorder {
	border-radius: 6px; 
	padding: 0.25em;
}

.HWbtAtkBasicIcon {
    height: 15px; 
    vertical-align: sub;
}

.HWbtTarget {
    margin-left:1.5em;
    text-shadow: -1px -1px 0 #222222, 1px -1px 0 #222222, -1px 1px 0 #222222, 1px 1px 0 #222222;
}

.HWsAtkName {
    margin-left:1.5em;
    text-shadow: -1px -1px 0 #222222, 1px -1px 0 #222222, -1px 1px 0 #222222, 1px 1px 0 #222222;
}

.HWsAtkBorder {
	border-radius: 6px; 
	padding: 0.25em;
    margin-top: -1em;
}

.HWbossStats {
    border: dotted gray 1px;
    border-radius:5px;
    padding: 0.5em;
}

.HWbtElemIcon {
    vertical-align: sub;
    margin-right: 3px;
}

.HWfunctionDiv {
    border-left: solid 3px #FAA500;
    border-radius: 5px;
    padding: 0.25em;
    font-size: 10pt;
    font-family: arial;
    color: #bbbbbb;
    
    animation-name: HWfuncDivFlash;
	animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes HWfuncDivFlash {
    50% {border-left: solid #FAA500 3px;}
}

@keyframes HWfuncDivFlash {
    50% {border-left: solid #bbb 3px;}
}
    
.HWfunctionNam {
    text-shadow: -1px -1px 0 #222222, 1px -1px 0 #222222, -1px 1px 0 #222222, 1px 1px 0 #222222;
    color: #FAA500;
    animation-name: HWfuncNamFlash;
	animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes HWfuncNamFlash {
    50% {color: #FAA500;}
}

@keyframes HWfuncNamFlash {
    50% {color: #bbb;}
}
/* - - - - - MINIPROFILE BUTTON - - - - - */

/* Button Container */
.ttButton {
  display: inline;
  font-size: 1;
  font-family: Arial;
  /*border-bottom: 1px dotted white; /* If you want dots under the hoverable text */
}

/* Button Menu Text */
.ttMenu {
  width: 32em;
  border: 1px #bbbbbb solid;
  border-radius: 6px;
  background-color: #000000;
  color: #ddd;
  font-family: Arial;
  font-size: small;
  text-align: left;
  padding: 0.5em;
  float: left; 
  margin-left: 1em;
  margin-bottom: 1em;
  margin-top: -3px;
  line-height: normal;
 
  /* Position the tooltip text */
  position: fixed;
    bottom: 0;
    left:0;
  z-index: 99;
}

.profButton {
    border: solid white 1px;
    margin: 0.5em;
    padding: 0.5em;
    font-size: 8pt; 
    font-family: arial;
    color: #bbbbbb;
}


.selectableAttack::after {
    content: " (After) ";
    position: absolute; 
	border: solid orange 1px;
    padding: 0.25em;
    border-radius: 3px;
    cursor: pointer;
    color: orange;
    vertical-align: 50%;
    opacity: 0;
}

.selectableAttack:hover .selectableAttack::after {
    opacity: 1;
}

.selectableAttack:hover {
	border-left: solid orange 3px;
    border-radius: 3px;
    padding-left: 2px;
    cursor: pointer;
    color: orange;
    animation-name: hoverAtk;
	animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes hoverAtk {
    50% {border-left: solid orange 7px;}
}

/* - - - - - Text Boxes - - - - - */
.atkNamBox {
    font-size: 11px;
    width: 47%;
}

.atkTrcFld {
    font-size: 8px;
    width: 6em;
    margin-top: 1px;
    margin-left: 3em;
    opacity: 0;
}

.slowTrans {
    transition: all .75s;
    overflow: hidden;
    max-height: none;
}


/* - - - - - CUSTOM CHECK BOXES - - - - - */
 /* Customize the label (the container) */
.chField {
  display: inline;
  position: relative;
  /*padding-left: 14px;*/
  margin-right: 9px;
  cursor: pointer;
  font-size: 9px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.chField input:first-child {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.chMark {
/*  position: absolute;
  top: 0;
  left: 0;
  height: 9px;
  width: 9px;
  vertical-align: middle;
  background-color: #eee;
  border: solid black 1px;
  opacity: 0.3;*/
}

/* checkbox text */
.chText {
  text-shadow: -1px -1px 0 #222222, 1px -1px 0 #222222, -1px 1px 0 #222222, 1px 1px 0 #222222;
  opacity: 0.3;
}

/* On mouse-over, add a grey background color */
.chField:hover input:first-child ~ .chMark {
  /*border: solid #ffffff 1px;*/
}

/* When the checkbox is checked, add a blue background */
.chField input:checked ~ .chMark {
 /* background-color: #2299FF;
  opacity: 1;*/
}

/* When the checkbox is checked, highlight text */
.chField input:checked ~ .chMark ~ .chText {
  opacity: 1;
}

/* When the checkbox is checked, highlight field */
.chField input:checked ~ .chMark ~ .chText ~ .atkTrcFld {
  opacity: 1;
}

/* Create the checkmark/indicator (hidden when not checked) */
.chMark:after {
  /*content: "";
  position: absolute;
  display: none;*/
}

/* Show the checkmark when checked */
.chField input:checked ~ .chMark:after {
  /*display: block;*/
}

/* Style the checkmark/indicator */
.chField .chMark:after {
  left: 2px;
  width: 2px;
  height: 5px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}