body{
  padding:0px;
  margin:0px;
  border:none;
  font-family:Tahoma, Geneva, sans-serif;
}


#wrapper{
  padding:0px;
  margin:0px;
  width:360px;
  height:530px;
  border:none;
  background-image:url(img/bg.png);
}


/*
**********************************
***Hero & Enemy image formating***
**********************************
*/


#hero, #enemy{
  top:5px;
  position:absolute;
  border:1px solid black;
  width: 150px;
  height:190px;
  padding:0px;
  margin:0px;
  
}


#hero{
  background-image:url(img/me.png);
  background-repeat:no-repeat;
  color:#0033AA;
  left:5px;
}


#enemy{
  background-image:url(img/enemy.png);
  background-repeat:no-repeat;
  color:#CC0033;
  left:205px;
}


/*
**********************************
*Hero & Enemy health info outputs*
**********************************
*/


#enemy p, #hero p{
    opacity:0.75;
	/*filter:alpha(opacity=75);*/
	margin:0px;
	width:100%;
	height:21%;
	position:absolute;
	top: 150px;
	font-size:32px;
}


#hero p{ background-color:#9af; }


#enemy p{ background-color:#fa9; }


/*
**********************************
*******Main UI Button styles******
**********************************
*/


#reset, #attack{
	text-align:center;
	color:#CCC;
	position:absolute;width: 98px;
	height: 46px;
	padding-top:10px;
	font-size:26px;
	opacity:0.6;
	/*filter:alpha(opacity=60);*/
	top:215px;
}


#reset{
  background-color:#223;
  left: 55px;
  border:1px solid blue;
}


#attack{
  background-color:#422;
  left:205px;
  border:1px solid red;
}


/*
**********************************
*Main text output and format tags*
**********************************
*/


#output{
  -webkit-overflow-scrolling: touch;
  overflow:scroll;
  padding:0px;
  margin:0px;
  left:5px;
  top:275px;
  background-color:#000;/*#cb7;*/
  position:absolute;
  border:1px solid black;
  width: 350px;
  height:250px;
  font-family:"Courier New", Courier, monospace;
  font-size:12px;/*20px;*/
  color:#FFF;
  opacity:0.99;
  /*filter:alpha(opacity=50);*/
}


#output div{
  background-color:#111;/*#dc7;*/
  padding:0px;
  margin:0px;
  border:#333333 solid;
  border-bottom-color:#111111;
}


#goodHit, #goodMiss, #goodWin, #badHit, #badMiss, #badWin{
  display:block;
}


#goodWin, #badWin{
  opacity:1.0;
  /*filter:alpha(opacity=100);*/
  background-color:#030204;
}


#goodHit{
  color:#5af;
}


#goodMiss{
  color:#23f;
}


#goodWin{
  color:#acF;
  border:#333399 solid;
  border-bottom-color:#111133;
  background-color:#005;
}


#badHit{
  color:#F22;
}


#badMiss{
  color:#A00;
}


#badWin{
  color:#F66;
  border:#993333 solid;
  border-bottom-color:#331111;
  background-color:#500;
}


/*
**********************************
**Log Div output console def:off**
**********************************
*/


#logDiv{
  font-family:"Courier New", Courier, monospace;
  font-size:8.5px;
  padding:0px;
  margin:0px;
  border:groove #009 1px;
  display:block;
  position:absolute;
  top:535px;
  left:0px;
  height:100px;
  width:350px;
  overflow: scroll;
}

#logDiv p{
  padding:0px;
  margin:0px;
  border:none;
}

















.str{
	color:#ee0000;
}


.dex{
	color:#cc4400;
}


.con{
	color:#bbbb00;
}


.int{
	color:#00ee00;
}


.wis{
	color:#2222ff;
}


.cha{
	color:#aa00ee;
}