html:-webkit-full-screen {
    width:100%;height:100%;
}

html:fullscreen {
    width:100%;height:100%;
}

body {
	background-color:#77613F;
	overflow:hidden;
	margin:0;
	font-family:Arial, Sans Serif;
	width:100%;
}

#game {
	background-color:#77613F;
	margin:auto;
	width:480px;
	height:600px;
}

#interface {
	background-color:#D3CFC4;
	position:relative;
	width:100%;
}

canvas {
	background-color:#FEFDFC;
}

#links {
	position:absolute;
	bottom:0;
	width: 100%;
	text-align:center;
	border-top: #77613F 1px solid;
	padding:0.5em 0;
	background-color:#AA9E7C;
}

#links a{
	font-size: 90%;
	color:#776E4D;
	text-decoration:none;
}
#links a:hover{color:#544924;}

button {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DDDDDD', endColorstr='#DAD7CC');
	background: -webkit-gradient(linear, left top, left bottom, from(#DDDDDD), to(#DAD7CC));
	background: -moz-linear-gradient(top,  #DDDDDD,  #DAD7CC);
	background-image: -ms-linear-gradient(top,  #DDDDDD,  #DAD7CC);
	background-image: -o-linear-gradient(top,  #DDDDDD,  #DAD7CC);
	border: 1px solid #000000;
	border-radius: 0.4em;
	position:absolute;
	box-shadow: 1px 1px #939189;
	-webkit-box-shadow: 1px 1px #939189;
	cursor: pointer;
	font-size:inherit;
	display:none;
	padding:0;
}
button:active:hover, .pressedbutton, .heldbutton {
	box-shadow: 0 0;
	-webkit-box-shadow: 0 0;
}
button:hover, .pressedbutton, .heldbutton {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DAD7CC', endColorstr='#E8E3D0');
	background: -webkit-gradient(linear, left top, left bottom, from(#DAD7CC), to(#E8E3D0));
	background: -moz-linear-gradient(top,  #DAD7CC,  #E8E3D0);
	background-image: -ms-linear-gradient(top,  #DAD7CC,  #E8E3D0);
	background-image: -o-linear-gradient(top,  #DAD7CC,  #E8E3D0);
}
.pressedbutton {cursor:default;}

#BookOfAzeroth button {left: 2%; min-width: 75%; height: 13%; text-align:left; padding-left:4%;}
#bRethinkApproach1,#bRethinkApproach2 {filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D3CFC4', endColorstr='#DAD7CC');
	background: -webkit-gradient(linear, left top, left bottom, from(#D3CFC4), to(#DAD7CC));
	background: -moz-linear-gradient(top,  #D3CFC4,  #DAD7CC);
	background-image: -ms-linear-gradient(top,  #D3CFC4,  #DAD7CC);
	background-image: -o-linear-gradient(top,  #D3CFC4,  #DAD7CC);}
#bRethinkApproach1:hover, #bRethinkApproach1.heldbutton, #bRethinkApproach2:hover, #bRethinkApproach2.heldbutton {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DAD7CC', endColorstr='#E8E3D0');
	background: -webkit-gradient(linear, left top, left bottom, from(#DAD7CC), to(#E8E3D0));
	background: -moz-linear-gradient(top,  #DAD7CC,  #E8E3D0);
	background-image: -ms-linear-gradient(top,  #DAD7CC,  #E8E3D0);
	background-image: -o-linear-gradient(top,  #DAD7CC,  #E8E3D0);
}

#PlanningEngage button {
	min-width: 27%;
	height: 21%;
	top: 40%;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E5E1D3', endColorstr='#D6D3C7');
	background: -webkit-gradient(linear, left top, left bottom, from(#E5E1D3), to(#D6D3C7));
	background: -moz-linear-gradient(top,  #E5E1D3, #D6D3C7);
	background-image: -ms-linear-gradient(top,  #E5E1D3, #D6D3C7);
	background-image: -o-linear-gradient(top,  #E5E1D3, #D6D3C7);
}

#PlanningEngage button:hover, #PlanningEngage button.heldbutton, .life:hover, .life.heldbutton {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EADED0', endColorstr='#D3CFC4');
	background: -webkit-gradient(linear, left top, left bottom, from(#EADED0), to(#D3CFC4));
	background: -moz-linear-gradient(top , #EADED0, #D3CFC4);
	background-image: -ms-linear-gradient(top , #EADED0, #D3CFC4);
	background-image: -o-linear-gradient(top , #EADED0, #D3CFC4);
}

#PlanningGuilt button {
	min-height: 18%;
	top: 41%;
	width: 17%;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E5E1D3', endColorstr='#D6D3C7');
	background: -webkit-gradient(linear, left top, left bottom, from(#E5E1D3), to(#D6D3C7));
	background: -moz-linear-gradient(top,  #E5E1D3, #D6D3C7);
	background-image: -ms-linear-gradient(top,  #E5E1D3, #D6D3C7);
	background-image: -o-linear-gradient(top,  #E5E1D3, #D6D3C7);
}

#PlanningGuilt button:hover, #PlanningGuilt button.heldbutton, .guilt:hover, .guilt.heldbutton {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E2E2D3', endColorstr='#CED1C2');
	background: -webkit-gradient(linear, left top, left bottom, from(#E2E2D3), to(#CED1C2));
	background: -moz-linear-gradient(top , #E2E2D3, #CED1C2);
	background-image: -ms-linear-gradient(top , #E2E2D3, #CED1C2);
	background-image: -o-linear-gradient(top , #E2E2D3, #CED1C2);
}

#PlanningInterest button {
	min-height: 6%;
	width: 35%;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E5E1D3', endColorstr='#D6D3C7');
	background: -webkit-gradient(linear, left top, left bottom, from(#E5E1D3), to(#D6D3C7));
	background: -moz-linear-gradient(top,  #E5E1D3, #D6D3C7);
	background-image: -ms-linear-gradient(top,  #E5E1D3, #D6D3C7);
	background-image: -o-linear-gradient(top,  #E5E1D3, #D6D3C7);
}

#PlanningInterest button:hover, #PlanningInterest button.heldbutton, .interest:hover, .interest.heldbutton {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8DEE1', endColorstr='#D3CFC4');
	background: -webkit-gradient(linear, left top, left bottom, from(#E8DEE1), to(#D3CFC4));
	background: -moz-linear-gradient(top , #E8DEE1, #D3CFC4);
	background-image: -ms-linear-gradient(top , #E8DEE1, #D3CFC4);
	background-image: -o-linear-gradient(top , #E8DEE1, #D3CFC4);
}
.notinterested:hover, .notinterested.heldbutton {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DDD2D5', endColorstr='#D1CCC0');
	background: -webkit-gradient(linear, left top, left bottom, from(#DDD2D5), to(#D1CCC0));
	background: -moz-linear-gradient(top , #DDD2D5, #D1CCC0);
	background-image: -ms-linear-gradient(top , #DDD2D5, #D1CCC0);
	background-image: -o-linear-gradient(top , #DDD2D5, #D1CCC0);
}

#PlanningInterest div{
	display:none;
	min-height: 11%;
	width: 25%;
	top:45%;
	text-align:center;
	position:absolute;
	border-radius: 0.4em;
	box-shadow: 0 0 1em #E2DEDC;
	-webkit-box-shadow: 0 0 1em #E2DEDC;
	cursor: default;
	background-color:#E2DEE1;
	padding:0 5%;
}

#bHeart:hover, #BHeart.heldbutton {
	progid:DXImageTransform.Microsoft.gradient(startColorstr='#E0D0D7', endColorstr='#E5D7CE');
	background: -webkit-gradient(linear, left top, left bottom, from(#E0D0D7), to(#E5D7CE));
	background: -moz-linear-gradient(top , #E0D0D7, #E5D7CE);
	background-image: -ms-linear-gradient(top , #E0D0D7, #E5D7CE);
	background-image: -o-linear-gradient(top , #E0D0D7, #E5D7CE);
}

#bStop {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#BF8080', endColorstr='#8E1F1F');
	background: -webkit-gradient(linear, left top, left bottom, from(#BF8080), to(#8E1F1F));
	background: -moz-linear-gradient(top,  #BF8080,  #8E1F1F);
	background-image: -ms-linear-gradient(top,  #BF8080,  #8E1F1F);
	background-image: -o-linear-gradient(top,  #BF8080,  #8E1F1F);
	color: #CCCCCC;
}
#bStop:hover, #BStop.heldbutton {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#BF9680', endColorstr='#8E461F');
	background: -webkit-gradient(linear, left top, left bottom, from(#BF9680), to(#8E461F));
	background: -moz-linear-gradient(top,  #BF9680,  #8E461F);
	background-image: -ms-linear-gradient(top,  #BF9680,  #8E461F);
	background-image: -o-linear-gradient(top,  #BF9680,  #8E461F);
}

#bGoAllIn, #bGoInForTheKill, #bGoInForTheKill2, #bGoInForTheKill3{
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DFE1DF', endColorstr='#DDE7DD');
	background: -webkit-gradient(linear, left top, left bottom, from(#DFE1DF), to(#DDE7DD));
	background: -moz-linear-gradient(top,  #DFE1DF, #DDE7DD);
	background-image: -ms-linear-gradient(top,  #DFE1DF, #DDE7DD);
	background-image: -o-linear-gradient(top,  #DFE1DF, #DDE7DD);
}
#bGoAllIn:hover, #bGoInForTheKill:hover, #bGoInForTheKill2:hover, #bGoInForTheKill3:hover, #bGoAllIn.heldbutton, #bGoInForTheKill.heldbutton, #bGoInForTheKill2.heldbutton, #bGoInForTheKill3.heldbutton{
	background: none repeat scroll 0 0 #607F5E;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
	color: #E5E1D5;
}

#ReactionOffensive {
	position: relative;
	top: 23%;
	left: 4%;
	border-radius: 0.5em;
	width: 29%;
	display: none;
	background-color: rgb(198, 39, 63);
	border: 1px solid rgb(85, 85, 85);
	height: 59%;
}
#ReactionDefensive {
	position: relative;
	top: 23%;
	left: 34%;
	border-radius: 0.5em;
	width: 29%;
	display: none;
	background-color: #D7CACC;
	border: 1px solid rgb(85, 85, 85);
	height: 59%;
}
#ReactionOffensive button, #ReactionDefensive button {
	height: 14%;
	left: 7%;
	width: 86%;
	display:block;
}
#ReactionOffensive button:active, #ReactionDefensive button:active, #ReactionOffensive button.heldbutton, #ReactionDefensive button.heldbutton {opacity:0.8;}

#bLashOut, #bActHurt {z-index:1;}

#bSendHimATelepathicMessage, #bSendHimATelepathicMessage:hover:active{
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#515B3D', endColorstr='#6B895B');
	background: -webkit-gradient(linear, left top, left bottom, from(#515B3D), to(#6B895B));
	background: -moz-linear-gradient(top,  #515B3D, #6B895B);
	background-image: -ms-linear-gradient(top,  #515B3D, #6B895B);
	background-image: -o-linear-gradient(top,  #515B3D, #6B895B);
	color:#DDD
}
#bSendHimATelepathicMessage:hover, #bSendHimATelepathicMessage.heldbutton{
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4F7565', endColorstr='#6D8361');
	background: -webkit-gradient(linear, left top, left bottom, from(#4F7565), to(#6D8361));
	background: -moz-linear-gradient(top, #4F7565, #6D8361);
	background-image: -ms-linear-gradient(top, #4F7565, #6D8361);
	background-image: -o-linear-gradient(top,  #4F7565, #6D8361);
	color: #E3F9B8;
}