/* --------------- load font --------------- */

@font-face {
	font-family: 'museo_sans';
	src: url('../fonts/29696F_0_0.eot');
	src: url('../fonts/29696F_0_0.eot?#iefix') format('embedded-opentype'),
	url('../fonts/29696F_0_0.woff') format('woff'),
	url('../fonts/29696F_0_0.ttf') format('truetype'),
	url('../fonts/29696F_0_0.svg#museo_sans500') format('svg');
}

/* --------------- general --------------- */

*, html, body {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
  color: #000;
	font-family: 'museo_sans', museo_sans, raleway, sans serif;
	font-weight: 300;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
}

body {
	-webkit-text-size-adjust:none;
	height: 100%;
	/* background-color: #ccc; */
	background-color: #000;
}

a, a:visited {
	color: #76a4c3;
	text-decoration: none;
}

a:hover {
	color: #76a4c3;
}

h1 { font-size: 40px; }
h2 { font-size: 30px; }
h3 { font-size: 20px; }
h4 { font-size: 16px; }

/* --------------- full window --------------- */

.fullWindow {
	position: relative;
	width: 100%;
	text-align: center;
	min-height: 100%
	height: auto !important;
	height: 100%;
}

/* --------------- three sections --------------- */

.header {
	top: 0px;
	left: 0px;
	position: fixed;
	width: 100%;
	height: 50px;
	text-align: center;
	background-color: #000;
	z-index: 1100;
}

.content {
	position: relative;
  padding-top: 40px;
	width: 100%;
	min-height: 1100px;
  padding-bottom: 80px;
	text-align: center;
	z-index: 500;
}

.footer {
  position: relative;
	width: 100%;
  height: 100px;
	text-align: center;
	background-color: #aaa;
	z-index: 500;
}

/* --------------- centered inner container --------------- */

.innerContainer {
	position: relative;
  width: 100%;
	max-width: 1220px;
	font-size: 0px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* --------------- centered inner container --------------- */

.leftPage {
	position: relative;
  display: inline-block;
	width: 800px;
	padding-right: 20px;
}

.rightPage {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 400px;
}

.leftPanel1 {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 800px;
	height: 600px;
	background-color: #e0d4cb;
	margin-top: 10px;
}

.leftPanel2 {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 100%;
	background-color: #e6cdb6;
	margin-top: 20px;
	text-align: left;
}

.leftPanelInner2 {
	position: relative;
	display: inline-block;
	padding: 30px 50px 40px 50px;
	z-index: 1500;
}

.rightPanel1, .rightPanel2, .rightPanel3, .rightPanel4 {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 100%;
	margin-top: 20px;
	/* background: url("../images/paper.png") no-repeat center;
	background-size: 100%; */
}

.rightPanel1 { background-color: #d2bca7; margin-top: 10px; }
/* .rightPanel2 { background: #e6cdb6 url("../images/paper.png") no-repeat center; } */
.rightPanel2 { background: #e6cdb6; }
.rightPanel3 { background-color: #e0d4cb; display: none; }
.rightPanel4 { background-color: #e5c1b0; display: none; }

/* --------------- frame container --------------- */

.frameContainer {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 150;
}

/* --------------- header --------------- */

.headerLeft, .headerCenter, .headerRight {
  position: relative;
  display: inline-block;
  margin-top: 19px;
  height: 20px;
	font-weight: 600;
	font-size: 22px;
	color: #ccc;
}

#aygorLogo {
	position: relative;
  display: inline-block;
	vertical-align: bottom;
	margin-left: -20px;
	top: -8px;
	padding-right: 15px;
	width: 110px;
	height: 24px;
	transform: scale(0.6);
}

.logoFill {
	fill: #e6cdb6;
}

.headerLeft {
  width: 30%;
  text-align: left;
}

.chapterHead {
	font-size: 16px;
	font-weight: 600;
	color: #999;
}

.headerCenter{
  width: 40%;
  text-align: center;
}

.headerRight {
  width: 30%;
	font-size: 16px;
	font-weight: 600;
	color: #999;
  text-align: right;
}

/* --------------- text panel --------------- */

#actionPanelHeadline {
	display: inline-block;
	font-size: 21px;
	line-height: 26px;
	font-weight: 600;
	padding-bottom: 3px;
}

#actionPanelText {
	display: inline-block;
	font-size: 18px;
	line-height: 24px;
}

.actionPanelButton {
	display: inline-block;
	background-color: #000;
	color: #e6cdb6;
	margin-top: 6px;
	margin-right: 8px;
	padding: 12px 22px 9px 22px;
	font-size: 20px;
	font-weight: 600;
	cursor: pointer;
}

.actionPanelButton:hover {
	background-color: #555;
}

.inputField {
	background-color: #eee;
	height: 40px;
	width: 200px;
	padding: 3px 8px;
	margin-right: 10px;
	font-size: 28px;
}

.tribeBox {
	display: inline-block;
	text-align: center;
}

/* --------------- canvases --------------- */

#map {
	position: absolute;
	display: block;
	overflow: hidden;
	width: 800px;
	height: 600px;
	left: 0px;
	z-index: 50;
	background: url("../images/map3.jpg") no-repeat center;
	background-size: 800px 600px;
	opacity: 1;
	/* filter: saturate(0.7); */
}

#grid {
	position: absolute;
	left: 0px;
	z-index: 100;
}

#dragon {
	position: absolute;
	left: 0px;
	z-index: 200;
}

#characters {
	position: absolute;
	left: 0px;
	z-index: 300;
}

#projectiles {
	position: absolute;
	left: 0px;
	z-index: 400;
}

#fire {
	position: absolute;
	left: 0px;
	z-index: 500;
}

/* --------------- dragon --------------- */

#dragonImage {
	position: absolute;
	left: 240px;
	top: 60px;
	transform: rotate(350deg);
	/* transition:all 1s ease-out;  */
	transition-property: transform;
	transition-duration: 7s;
}

/* --------------- score panel --------------- */

#scorePanel {
	display: inline-block;
	margin: 20px 40px 25px 40px;
	font-size: 0px;
}

#scoreName1, #scoreName2 {
	display: inline-block;
	width: 40%;
	margin: 0px;
	font-size: 21px;
	line-height: 21px;
	font-weight: 600;
}

#scoreTribe1, #scoreTribe2 {
	display: inline-block;
	width: 40%;
	font-size: 16px;
	line-height: 18px;
}

#scoreName1, #scoreTribe1 {
	padding-right: 20%;
}

#scoreDivider {
	display: inline-block;
	width: 100%;
	border-bottom: 1px solid #000;
	margin-top: 7px;
	margin-bottom: 10px;
}

#scoreHP1, #scoreArmor1, #scoreMove1, #scoreHP2, #scoreArmor2, #scoreMove2 {
	display: inline-block;
	width: 40%;
	padding-top: 1px;
	font-size: 21px;
}

#scoreHPLabel, #scoreArmorLabel, #scoreMoveLabel {
	display: inline-block;
	width: 20%;
	font-size: 16px;
}

/* --------------- initiative panel --------------- */

#initiativePanel {
	display: inline-block;
	margin: 20px 40px 20px 17px;
	font-size: 0px;
	z-index: 100;
}

#initiativeTitle {
	display: inline-block;
	width: 100%;
	margin: 0px;
	font-size: 21px;
	line-height: 21px;
	font-weight: 600;
}

#initiativeDivider {
	display: inline-block;
	width: 70%;
	border-bottom: 1px solid #000;
	margin-top: 7px;
	margin-bottom: 10px;
}

#initiativeArrow0, #initiativeArrow1, #initiativeArrow2, #initiativeArrow3 {
	display: inline-block;
	padding-left: 10%;
	padding-right: 3%;
	width: 20%;
	text-align: right;
	vertical-align: middle;
	font-size: 26px;
	line-height: 21px;
	height: 25px;
	color: green;
}

#initiativeName0, #initiativeName1, #initiativeName2, #initiativeName3 {
	display: inline-block;
	width: 67%;
	text-align: left;
	font-size: 17px;
}

#keyDot0, #keyDot1, #keyDot2, #keyDot3, #keyDot4 {
	display: inline-block;
	height: 10px;
	width: 10px;
	border-radius: 5px;
}

#keyDot0 { background-color: #f1ed26; }
#keyDot1 { background-color: #545456; }
#keyDot2 { background-color: #00486c; }
#keyDot3 { background-color: #7e421a; }
#keyDot4 { background-color: #000000; }

/* --------------- ininventory panel --------------- */

#inventoryPanel {
	display: inline-block;
	margin: 20px 40px 20px 17px;
	font-size: 0px;
	z-index: 100;
}

#inventoryTitle {
	display: inline-block;
	width: 100%;
	margin: 0px;
	font-size: 21px;
	line-height: 21px;
	font-weight: 600;
}

#inventoryDivider {
	display: inline-block;
	width: 70%;
	border-bottom: 1px solid #000;
	margin-top: 7px;
	margin-bottom: 10px;
}

.inventoryName {
	display: inline-block;
	width: 67%;
	text-align: left;
	font-size: 17px;
	padding-bottom: 7px;
}

#bloodlineName {
	font-size: 17px;
}

/* --------------- countdown --------------- */

#countdown1, #countdown2 {
  position: absolute;
	top: 20px;
	right: 30px;
  height: 40px;
  width: 40px;
  text-align: center;
}

#countdown1 {
	display: none;
}

#countdown2 {
	display: none;
}

#countdownNumber1, #countdownNumber2 {
  color: #000;
  display: inline-block;
	font-size: 15px;
  line-height: 42px;
}

#countdownDiv1, #countdownDiv2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  transform: rotateY(-180deg) rotateZ(-90deg);
}

svg circle {
  stroke-dasharray: 113px;
  stroke-dashoffset: 0px;
  stroke-linecap: round;
  stroke-width: 1px;
  stroke: #000;
  fill: none;
	/* transition-property: stroke-dashoffset;
  transition-duration: 1s;
	transition-delay: 0s; */
}

/* --------------- dice --------------- */

#diceD20 {
	display: inline-block;
	height: 70px;
	width: 70px;
	text-align: center;
	cursor: pointer;
	background: url("../images/d20.png") no-repeat center;
}

#diceD20:hover {
	opacity: 0.8;
}

#diceD20Number {
	font-weight: 600;
	font-size: 16px;
	line-height: 75px;
	color: #e0d4cb;
}

/* --------------- dice --------------- */

#diceD4 {
	display: inline-block;
	height: 70px;
	width: 70px;
	text-align: center;
	cursor: pointer;
	background: url("../images/d4.png") no-repeat center;
}

#diceD4:hover {
	opacity: 0.8;
}

#diceD4Number {
	font-weight: 600;
	font-size: 20px;
	line-height: 85px;
	color: #e0d4cb;
}

/* --------------- mobile --------------- */

@media (max-width: 600px) {


}