/*---GLOBAL STYLES---*/

* {
	margin: 0;
	padding: 0;
	font-family: Arial, 'Open Sans', sans-serif;
	font-weight: 600;
}

html {
	height: 100%;
	min-height: 720px;
	min-width: 1280px;
	border: 0px;
	background-color: #777;
	background-image: url("cos1_bg.png");
	background-repeat: no-repeat;
	background-size: cover;
	overflow-x: hidden;
    overflow-y: hidden;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

body {
	height: 100%;
	width: 100%;
	z-index: 1;
	background-color: rgba(255, 255, 255, .1);
}

/*CLEAR FLOATS AFTER THE COLUMNS*/
body:after {
	content: "";
	display: table;
	clear: both;
}

#quest_header {
	position: relative;
	top: 1vw;
	font-family: Arial;
	font-size: 28px;
	color: #fff;
	min-height: 1.5em;
	line-height: 2em;
	background-color: #660066;
	border-bottom: 1px solid #fff;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

/*STYLE MAIN TAB LINKS FOR TOP NAV*/
.main_tablink {
	position: relative;
	top: 1vw;
	background-color: #4F004F;
	color: white;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: .5em;
	font-family: Arial;
	font-size: 20px;
	min-height: 1.5em;
	width: 33.33%;
	min-width: 33.33%;
	max-width: 33.33%;
	border-bottom: 1px solid #fff;
}

.main_tablink:hover {
	background-color: #902390;
}

/*STYLE THE CENTER COMBAT BUTTON FOR SIDE BORDERS*/ 
#combat_button {
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
}

#roll20window {
	position: absolute;
	float: right;
	top: 9vw;
	right: 2vw;
	border: 1px solid white;
	width: 45vw;
	height: 80%;
	background-color: #777;
	font-family: Arial;
	font-size: 48px;
	line-height: 40vw;
	color: #fff;
	text-align: center;
}

#temp_clock {
	position: relative;
	top: 4vw;
	left: 2vw;
	float: left;
}

.game_time {
	font-size: 5vw;
	padding-left: .1em;
	text-align: center;
	font-family: Arial, 'Open Sans', sans-serif;
	text-align: left;
	outline: none;
	color: black;
	width: 22.5vw;
	background-color: rgba(255, 255, 255, .7);
	border-radius: 10px;
	border: 2px solid black;
	box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5), 5px 10px 20px 0 rgba(0, 0, 0, 0.3);
}

.game_time::selection {
	background: rgba(255, 255, 255, .5); /* WebKit/Blink Browsers */
}
.game_time::-moz-selection {
	background: rgba(255, 255, 255, .5); /* Gecko Browsers */
}

#weather {
	position: relative;
	top: 4vw;
	left: 3vw;
	float: left;
	border: 2px solid black;
	border-radius: 10px;
	height: 5.7vw;
	width: 5.7vw;
	text-align: center;
	background-color: rgba(0, 0, 0, 1);
	box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5), 5px 10px 20px 0 rgba(0, 0, 0, 0.3);
}

#imageToSwap {
	border-radius: 8px;
	background-position: center;
	width: 5.7vw;
}

#day_count {
	position: relative;
	left: 4vw;
	top: 4vw;
}

.day_font {
	font-size: 1.5em;
	text-align: center;
	font-family: sans-serif;
	height: 1em;
	padding: .3em 0em;
	outline: none;
	color: black;
	width: 4.5em;
	border: 2px solid black;
	border-radius: 8px;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
}

#dlist {
	position: relative;
	left: 4vw;
	top: 4.42vw;
	font-size: 1em;
	font-family: sans-serif;
	font-weight: 700;
	color: #222;
	outline: none;
	line-height: 1em;
	padding: .6em 1.4em .5em .8em;
	width: 9em;
	max-width: 7em;
	box-sizing: border-box;
	margin: 0;
	text-align: center;
	border: 2px solid black;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}

#dlist::-ms-expand {
	display: none;
}

#dlist:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222;
	outline-width: 0;
	outline: none;
}

#dlist option {
	font-weight:normal;
}

#myBtnContainer {
	position: absolute;
	width: 48vw;
	height: 50%;
	top: 30%;
	left: 2vw;
}
	
.btn {
	width: 16.32%;
	height: 8%;
	float: left;
	box-shadow: inset 0px 1px 0px 0px #B31228;
	background: linear-gradient(to bottom, #950015 5%, #730010 100%);
	background-color: #d0451b;
	border-radius: 3px;
	border: 1px solid black;
	cursor: pointer;
	outline: none;
	color: #ffffff;
	font-family: Arial;
	font-size: .75vw;
	text-decoration: none;
	text-shadow: 0px 1px 0px #854629;
}

.btn:hover {
	background:linear-gradient(to bottom, #B31228 5%, #730010 100%);
	background-color:#B31228;
}

.btn:active {
	background-color: #666;
	color: white;
}

.btn:focus {
	background:linear-gradient(to bottom, #bbb 5%, #eee 100%);
	text-decoration:none;
	text-shadow:0px 0px 0px #854629;
	box-shadow:inset 0px 0px 0px 0px #cf866c;
	outline: none;
	color: black;
}
	
#filter_container {
	position: absolute;
	top: 42%;
	left: 2vw;
	height: 100%;
	width: 48vw;
}

.filterDiv {
	width: 16%;
	line-height: 2.4em;
	float: left;
	margin: 2px;
	text-align: center;
	box-shadow: inset 0px 1px 0px 0px #ffffff;
	background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
	background-color: #f9f9f9;
	border-radius: 6px;
	border: 2px solid #000;
	display: none;
	color: #111;
	font-family: Arial;
	font-size: .75vw;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 0px 1px 0px #ffffff;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

/* The "show" class is added to the filtered elements */
.show {
	display: block;
}

#sheet_row {
	position: absolute;
	top: 48%;
	left: 8vw;
	width: 36vw;
	min-width: 36vw;
	max-width: 36vw;
	height: 50%;
	max-height: 27vw;
	background-color: rgba(255, 255, 255, 0);
}

.char_sheet {
	box-sizing: border-box;
	position: relative;
	float: right;
	font-family: Arial;
	color: #000;
	background-color: #e6e6e6;
	background-image: url("stat_bg.png");
	background-position: center;
	min-width: 12vw;
	max-width: 12vw;
	width: 12vw;
	height: 50%;
	padding-bottom: 5px;
	padding-top: 5px;
	padding-left: 5px;
	padding-right: 5px;
	border: 1px solid #000;
	overflow: hidden;
	-webkit-box-shadow: 0 8px 6px -6px black;
	-moz-box-shadow: 0 8px 6px -6px black;
	box-shadow: 0 8px 6px -6px black;
}

.char_name {
	font-family: Arial, 'Open Sans', sans-serif;
	text-align: left;
	box-sizing: border-box;
	width: 100%;
	color: maroon;
	background-color: #fff;
	padding: 5px 0px 5px 10px;
	border-style: solid;
	border-color: maroon;
	border-width: 1px;
	text-transform: uppercase;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
}

.name_label {
	font-size: 1.2vw;
}

.level_label {
	font-size: .8vw;
}

.subclass_label {
	font-size: .6vw;
}

/*STYLE FOR CHAR1 TAB*/
.char1_tab {
	box-sizing: border-box;
	position: relative;
	background-color: #f1f1f1;
	width: 100%;
	height: calc(1.8vw + 1px);
	top: calc(3.5% + 3px);
	border: 1px solid black;
}

/*STYLE FOR TAB CONTENTS*/
.char1_tabcontent {
	width: 100%;
	display: none;
	border-top: none;
}

/*STYLE FOR TAB BUTTONS*/
.char1_tab button {
	background-color: inherit;
	font-size: 100%;
	line-height: 1.8vw;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	transition: 0.1s;
	width: 50%;
}

/*BUTTON HOVER EFFECT*/
.char1_tab button:hover {
	background-color: #ddd;
}

/*CREATES AN ACTIVE/CURRENT TAB CLASS*/
.char1_tab button.active {
	background-color: #ccc;
}

#char1_insp_icon {
	display: block;
	z-index: 6;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	min-width: calc(1.5vw + 1px);
	min-height: calc(1.5vw + 1px);
	height: calc(1.5vw + 1px);
	width: calc(1.5vw + 1px);
	background-color: rgba(255, 255, 255, 1);
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, .7);
	background-image: url("icons/char_insp4_icon.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/*STYLE FOR CHAR2 TAB*/
.char2_tab {
	box-sizing: border-box;
	position: relative;
	background-color: #f1f1f1;
	width: 100%;
	height: calc(1.8vw + 1px);
	top: calc(3.5% + 3px);
	border: 1px solid black;
}

/*STYLE FOR TAB CONTENTS*/
.char2_tabcontent {
	width: 100%;
	display: none;
	border-top: none;
}

/*STYLE FOR TAB BUTTONS*/
.char2_tab button {
	background-color: inherit;
	font-size: 100%;
	line-height: 1.8vw;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	transition: 0.1s;
	width: 50%;
}

/*BUTTON HOVER EFFECT*/
.char2_tab button:hover {
	background-color: #ddd;
}

/*CREATES AN ACTIVE/CURRENT TAB CLASS*/
.char2_tab button.active {
	background-color: #ccc;
}

#char2_insp_icon {
	display: block;
	z-index: 6;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	min-width: calc(1.5vw + 1px);
	min-height: calc(1.5vw + 1px);
	height: calc(1.5vw + 1px);
	width: calc(1.5vw + 1px);
	background-color: rgba(255, 255, 255, 1);
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, .7);
	background-image: url("icons/char_insp4_icon.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/*STYLE FOR CHAR3 TAB*/
.char3_tab {
	box-sizing: border-box;
	position: relative;
	background-color: #f1f1f1;
	width: 100%;
	height: calc(1.8vw + 1px);
	top: calc(3.5% + 3px);
	border: 1px solid black;
}

/*STYLE FOR TAB CONTENTS*/
.char3_tabcontent {
	width: 100%;
	display: none;
	border-top: none;
}

/*STYLE FOR TAB BUTTONS*/
.char3_tab button {
	background-color: inherit;
	font-size: 100%;
	line-height: 1.8vw;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	transition: 0.1s;
	width: 50%;
}

/*BUTTON HOVER EFFECT*/
.char3_tab button:hover {
	background-color: #ddd;
}

/*CREATES AN ACTIVE/CURRENT TAB CLASS*/
.char3_tab button.active {
	background-color: #ccc;
}

#char3_insp_icon {
	display: block;
	z-index: 6;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	min-width: calc(1.5vw + 1px);
	min-height: calc(1.5vw + 1px);
	height: calc(1.5vw + 1px);
	width: calc(1.5vw + 1px);
	background-color: rgba(255, 255, 255, 1);
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, .7);
	background-image: url("icons/char_insp4_icon.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/*STYLE FOR CHAR4 TAB*/
.char4_tab {
	box-sizing: border-box;
	position: relative;
	background-color: #f1f1f1;
	width: 100%;
	height: calc(1.8vw + 1px);
	top: calc(3.5% + 3px);
	border: 1px solid black;
}

/*STYLE FOR TAB CONTENTS*/
.char4_tabcontent {
	width: 100%;
	display: none;
	border-top: none;
}

/*STYLE FOR TAB BUTTONS*/
.char4_tab button {
	background-color: inherit;
	font-size: 100%;
	line-height: 1.8vw;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	transition: 0.1s;
	width: 50%;
}

/*BUTTON HOVER EFFECT*/
.char4_tab button:hover {
	background-color: #ddd;
}

/*CREATES AN ACTIVE/CURRENT TAB CLASS*/
.char4_tab button.active {
	background-color: #ccc;
}

#char4_insp_icon {
	display: block;
	z-index: 6;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	min-width: calc(1.5vw + 1px);
	min-height: calc(1.5vw + 1px);
	height: calc(1.5vw + 1px);
	width: calc(1.5vw + 1px);
	background-color: rgba(255, 255, 255, 1);
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, .7);
	background-image: url("icons/char_insp4_icon.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/*STYLE FOR CHAR5 TAB*/
.char5_tab {
	box-sizing: border-box;
	position: relative;
	background-color: #f1f1f1;
	width: 100%;
	height: calc(1.8vw + 1px);
	top: calc(3.5% + 3px);
	border: 1px solid black;
}

/*STYLE FOR TAB CONTENTS*/
.char5_tabcontent {
	width: 100%;
	display: none;
	border-top: none;
}

/*STYLE FOR TAB BUTTONS*/
.char5_tab button {
	background-color: inherit;
	font-size: 100%;
	line-height: 1.8vw;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	transition: 0.1s;
	width: 50%;
}

/*BUTTON HOVER EFFECT*/
.char5_tab button:hover {
	background-color: #ddd;
}

/*CREATES AN ACTIVE/CURRENT TAB CLASS*/
.char5_tab button.active {
	background-color: #ccc;
}

#char5_insp_icon {
	display: block;
	z-index: 6;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	min-width: calc(1.5vw + 1px);
	min-height: calc(1.5vw + 1px);
	height: calc(1.5vw + 1px);
	width: calc(1.5vw + 1px);
	background-color: rgba(255, 255, 255, 1);
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, .7);
	background-image: url("icons/char_insp4_icon.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/*STYLE FOR CHAR6 TAB*/
.char6_tab {
	box-sizing: border-box;
	position: relative;
	background-color: #f1f1f1;
	width: 100%;
	height: calc(1.8vw + 1px);
	top: calc(3.5% + 3px);
	border: 1px solid black;
}

/*STYLE FOR TAB CONTENTS*/
.char6_tabcontent {
	width: 100%;
	display: none;
	border-top: none;
}

/*STYLE FOR TAB BUTTONS*/
.char6_tab button {
	background-color: inherit;
	font-size: 100%;
	line-height: 1.8vw;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	transition: 0.1s;
	width: 50%;
}

/*BUTTON HOVER EFFECT*/
.char6_tab button:hover {
	background-color: #ddd;
}

/*CREATES AN ACTIVE/CURRENT TAB CLASS*/
.char6_tab button.active {
	background-color: #ccc;
}

#char6_insp_icon {
	display: block;
	z-index: 6;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	min-width: calc(1.5vw + 1px);
	min-height: calc(1.5vw + 1px);
	height: calc(1.5vw + 1px);
	width: calc(1.5vw + 1px);
	background-color: rgba(255, 255, 255, 1);
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, .7);
	background-image: url("icons/char_insp4_icon.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/*STYLE FOR CHAR7 TAB*/
.char7_tab {
	box-sizing: border-box;
	position: relative;
	background-color: #f1f1f1;
	width: 100%;
	height: calc(1.8vw + 1px);
	top: calc(3.5% + 3px);
	border: 1px solid black;
}

/*STYLE FOR TAB CONTENTS*/
.char7_tabcontent {
	width: 100%;
	display: none;
	border-top: none;
}

/*STYLE FOR TAB BUTTONS*/
.char7_tab button {
	background-color: inherit;
	font-size: 100%;
	line-height: 1.8vw;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	transition: 0.1s;
	width: 50%;
}

/*BUTTON HOVER EFFECT*/
.char7_tab button:hover {
	background-color: #ddd;
}

/*CREATES AN ACTIVE/CURRENT TAB CLASS*/
.char7_tab button.active {
	background-color: #ccc;
}

#char7_insp_icon {
	display: block;
	z-index: 6;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	min-width: calc(1.5vw + 1px);
	min-height: calc(1.5vw + 1px);
	height: calc(1.5vw + 1px);
	width: calc(1.5vw + 1px);
	background-color: rgba(255, 255, 255, 1);
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, .7);
	background-image: url("icons/char_insp4_icon.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/*STYLE FOR CHAR8 TAB*/
.char8_tab {
	box-sizing: border-box;
	position: relative;
	background-color: #f1f1f1;
	width: 100%;
	height: calc(1.8vw + 1px);
	top: calc(3.5% + 3px);
	border: 1px solid black;
}

/*STYLE FOR TAB CONTENTS*/
.char8_tabcontent {
	width: 100%;
	display: none;
	border-top: none;
}

/*STYLE FOR TAB BUTTONS*/
.char8_tab button {
	background-color: inherit;
	font-size: 100%;
	line-height: 1.8vw;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	transition: 0.1s;
	width: 50%;
}

/*BUTTON HOVER EFFECT*/
.char8_tab button:hover {
	background-color: #ddd;
}

/*CREATES AN ACTIVE/CURRENT TAB CLASS*/
.char8_tab button.active {
	background-color: #ccc;
}

#char8_insp_icon {
	display: block;
	z-index: 6;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	min-width: calc(1.5vw + 1px);
	min-height: calc(1.5vw + 1px);
	height: calc(1.5vw + 1px);
	width: calc(1.5vw + 1px);
	background-color: rgba(255, 255, 255, 1);
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, .7);
	background-image: url("icons/char_insp4_icon.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#z_banner {
	position: absolute;
	right: 2%;
	min-width: 30px;
	min-height: 30px;
	height: 18%;
	width: 18%;
	background-image: url("z_banner.svg");
	background-position: center;
	background-repeat: no-repeat;
}

.ac_cell {
	position: absolute;
	top: 55%;
	left: 5px;
	border-radius: 10px;
	min-width: calc(50% - 10px);
	max-width: calc(50% - 10px);
	min-height: 50px;
	height: 38%;
	font-size: 2.3vw;
	border: 1px solid black;
	background-color: rgba(255, 255, 255, .2);
	background-image: url("icons/char_ac_icon.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 75%;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

.ac_count {
	position: relative;
	top: 20%;
	left: 13px;
	width: calc(100% - 8px);
	font-family: Arial;
	font-size: 100%;
	color: #fff;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	text-shadow:0px 3px 2px #333;
	border: none;
	outline: none;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0);
}

.ac_count::selection {
	background: rgba(255, 255, 255, 0); /* WebKit/Blink Browsers */
}
.ac_count::-moz-selection {
	background: rgba(255, 255, 255, 0); /* Gecko Browsers */
}

.hp_cell {
	position: absolute;
	top: 55%;
	right: 5px;
	border-radius: 10px;
	min-width: calc(50% - 10px);
	max-width: calc(50% - 10px);
	min-height: 50px;
	height: 38%;
	font-size: 2.3vw;
	border: 1px solid black;
	background-color: rgba(255, 255, 255, .2);
	background-image: url("icons/char_hp_icon.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 95%;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

.hp_count {
	position: relative;
	top: 20%;
	left: 8px;
	width: calc(100% - 2px);
	font-family: Arial;
	font-size: 100%;
	color: #fff;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	text-shadow:0px 3px 2px #333;
	border: none;
	outline: none;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0);
}

.hp_count::selection {
	background: rgba(255, 255, 255, 0); /* WebKit/Blink Browsers */
}
.hp_count::-moz-selection {
	background: rgba(255, 255, 255, 0); /* Gecko Browsers */
}

.stat_grid {
	position: absolute;
	width: calc(100% - 10px);
	height: 35%;
	top: 54%;
}

.stat_label {
	font-size: .8vw;
	color: maroon;
	text-shadow:0px 1px 1px #ccc;
}

.stat {
	box-sizing: border-box;
	text-align: center;
	line-height: 1.2vw;
	width: 33.33%;
	font-size: 100%;
	color: #000;
	font-weight: bold;
	padding: 2px 2px 4px 2px;
	border-style: solid;
	border-color: maroon;
	background-color: #fff;
	border-width: 1px;
	float: left;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
	text-shadow:0px 3px 2px #ccc;
}







.order_label {
	position: absolute;
	display: inline-block;
	left: 2vw;
	top: 18%;
	width: 48vw;
	max-width: 850px;
	height: 2em;
	line-height: 2em;
	color: #fff;
	font-size: 24px; 
	font-weight: 600; 
	text-align: center; 
	text-transform: uppercase; 
	text-decoration: none;
	text-shadow: 2px 2px 2px #000;
	background-color: rgba(136, 0, 0, .6);
	border-radius: 10px;
	border: 1px solid black;
}

.arrow_spacer {
	position: absolute;
	left: 2vw;
	top: calc(18% + 2.2em);
	width: 48vw;
	max-width: 850px;
}

#arrow_table {
	height: 10px;
	width: 48vw;
	max-width: 850px;
}

#arrow_cell_space {
	width: 83.3%;
	max-width: 800px;
}

#arrow_cell {
	width: 16.7%;
	min-width: 134px;
}

.arrow_down {
	position: absolute;
	z-index: 9;
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #fff;
}

#combatBtnContainer {
	position: absolute;
	z-index: 6;
	padding: 5px;
	top: 30%;
	left: 907.5px;
	text-align: center;
	border: 2px solid black;
	border-radius: 10px;
	height: 160px;
	background-color: rgba(136, 0, 0, .6);
}

.round_label {
	font-family: Arial;
	font-size: 20px;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	text-shadow:0px 3px 2px #111;
	border: none;
	outline: none;
	cursor: pointer;
	line-height: 40px;
}

.round_style {
	position: relative;
	bottom: 20px;
	display: block;
	margin-left: auto;
	margin-right: auto;	
	font-family: Arial;
	font-size: 40px;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	text-shadow:0px 3px 2px #000;
	border: none;
	outline: none;
	cursor: pointer;
}

.order_btn {
	display: block;
	width: 75px;
	height: 2.5em;	
	background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
	background-color: #f9f9f9;
	text-shadow: 0px 1px 0px #ffffff;
	border-radius: 3px;
	border: 1px solid black;
	cursor: pointer;
	outline: none;
	color: #111;
	font-family: Arial;
	font-size: .75vw;
	text-decoration: none;
}

.turn_btn {
	position: absolute;
	display: block;
	width: 75px;
	height: 2.5em;
	bottom: 5px;
	background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
	background-color: #f9f9f9;
	text-shadow: 0px 1px 0px #ffffff;
	border-radius: 3px;
	border: 1px solid black;
	cursor: pointer;
	outline: none;
	color: #111;
	font-family: Arial;
	font-size: .75vw;
	text-decoration: none;
}

#combat_order {
	position: absolute;
	top:23%;
	left: 2vw;
	width: 48vw;
	max-width: 850px;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 2px 2px 3px #fff;
	border: 1px solid black;
}

#combat_order li	{ 
	cursor: pointer; 
	user-select: none;
	border: 1px solid black;
	background-image: url("stat_bg.png");
	background-position: center;
	background-size: 180%;
	font-weight: bold;
	font-size: 2.3vw;
	line-height: 84px;
	padding-left: 25px;
	list-style-type: none;
	font-family: Arial, 'Open Sans', sans-serif;
	text-align: left;
	color: maroon;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
}

#combat_line_table {
	position: relative;
	top: 8px;
	right: 42%;
	width: 20%;
	max-width: 140px;
	height: 66px;
	border-radius: 10px;
	border: 0px solid black;
	border-color: rgba(0, 0, 0, 1);
	text-align: center;
	float: right;
}

.combat_ac_cell {
	position: absolute;
	border-radius: 10px;
	line-height: 50px;
	width: calc(50% - 8px);
	min-height: 60px;
	height: 60px;
	border: 1px solid black;
	background-color: rgba(255, 255, 255, .6);
	background-image: url("icons/char_ac_icon.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 75%;
	color: #fff;
	font-size: 2vw;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */	
}

.combat_ac_count {
	position: relative;
	left: 8px;
	font-family: Arial;
	color: #fff;
	font-size: 100%;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-shadow: 0px 3px 2px #333;
	width: calc(100% - 2px);
	border: none;
	outline: none;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0);
}

.combat_ac_count::selection {
	background: rgba(255, 255, 255, 0); /* WebKit/Blink Browsers */
}
.combat_ac_count::-moz-selection {
	background: rgba(255, 255, 255, 0); /* Gecko Browsers */
}

.combat_hp_cell {
	position: absolute;
	right: 2px;
	border-radius: 10px;
	line-height: 50px;
	width: calc(50% - 8px);
	min-height: 60px;
	height: 60px;
	border: 1px solid black;
	background-color: rgba(255, 255, 255, .6);
	background-image: url("icons/char_hp_icon.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 93%;
	color: #fff;
	font-size: 2vw;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

.combat_hp_count {
	position: relative;
	left: 7px;
	font-family:Arial;
	color: #fff;
	font-size: 100%;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-shadow: 0px 3px 2px #333;
	width: calc(100% - 2px);
	border: none;
	outline: none;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0);
}

.combat_hp_count::selection {
	background: rgba(255, 255, 255, 0); /* WebKit/Blink Browsers */
}
.combat_hp_count::-moz-selection {
	background: rgba(255, 255, 255, 0); /* Gecko Browsers */
}

#combat_status_table {
	display: inline-block;
	position: relative;
	top: 11px;
	left: 14%;
	width: 35%;
	height: 66px;
	border-radius: 10px;
	border: 0px solid black;
	border-color: rgba(0, 0, 0, 1);
	color: #000;
	float: right;
}

.temphp_label {
	position: absolute;
	box-sizing: border-box;
	width: 25%;
	height: 1em;
	font-family: Arial;
	text-align: center;
	font-size: 12px;
	line-height: 12px;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 2px 2px 3px #fff;
	text-transform: uppercase;
}

.speed_label {
	position: absolute;
	box-sizing: border-box;
	left: 25%;
	width: 25%;
	height: 1em;
	font-family: Arial;
	text-align: center;
	font-size: 12px;
	line-height: 12px;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 2px 2px 3px #fff;
	text-transform: uppercase;
}

.react_label {
	position: absolute;
	box-sizing: border-box;
	left: 50%;
	width: 25%;
	height: 1em;
	font-family: Arial;
	text-align: center;
	font-size: 12px;
	line-height: 12px;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 2px 2px 3px #fff;
	text-transform: uppercase;
}

.ready_label {
	position: absolute;
	box-sizing: border-box;
	left: 75%;
	width: 25%;
	height: 1em;
	font-family: Arial;
	text-align: center;
	font-size: 12px;
	line-height: 12px;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 2px 2px 3px #fff;
	text-transform: uppercase;
}

.temphp_cell {
	position: absolute;
	width: 25%;
}

.temphp_count {
	display: block;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	font-size: 28px;
	top: .5em;
	border-radius: 10px;
	line-height: 40px;
	min-width: 40px;
	width: 40px;
	min-height: 40px;
	height: 40px;
	border: 1px solid black;
	background-color: rgba(255, 255, 255, .6);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
}

.temphp_value {
	position: relative;
	left: 4.4px;
	font-family:Arial;
	color: green;
	font-size: 100%;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-shadow: 0px 3px 2px #ccc;
	width: calc(100% + 6px);
	border: none;
	outline: none;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0);
}

.speed_cell {
	position: absolute;
	width: 25%;
	left: 25%;
}

.speed_count {
	display: block;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	top: .5em;
	border-radius: 10px;
	line-height: 40px;
	min-width: 40px;
	width: 40px;
	min-height: 40px;
	height: 40px;
	border: 1px solid black;
	background-color: rgba(255, 255, 255, .6);
	color: #660066;
	font-family: Arial;
	font-size: 28px;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	text-shadow: 0px 3px 2px #ccc;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
}

.react_cell {
	position: absolute;
	width: 25%;
	left: 50%;
}

.ready_cell {
	position: absolute;
	width: 25%;
	left: 75%;
}

/* The container */
.react_container {
	display: block;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	top: .5em;
	border-radius: 10px;
	line-height: 40px;
	min-width: 40px;
	width: 40px;
	min-height: 40px;
	height: 40px;
	border: 1px solid black;
	background-color: rgba(255, 255, 255, .6);
	font-size: 28px;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

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

/* Create a custom checkbox */
.react_checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 40px;
	width: 40px;
	border-radius: 9px;
	background-color: #eee;
}

/* On mouse-over, add a grey background color */
.react_container:hover input ~ .react_checkmark {
	background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.react_container input:checked ~ .react_checkmark {
	background-color: #2196F3;
}

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

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

/* Style the checkmark/indicator */
.react_container .react_checkmark:after {
	left: 15px;
	top: 5px;
	width: 10px;
	height: 20px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

#notes_frame {
	border: 3px solid black;
	border-radius: 5px;
	position: absolute;
	top: 17%;
	left: 2vw;
	max-height: 300px;
	height: 300px;
	overflow-x: hidden;
	overflow-y: scroll;
	background-color: rgba(255, 255, 255, .3);
}

#notes {
	position: relative;
	min-width: 850px;
	width: 850px;
	border-style: solid;
	border-color: black;
	border: 0;
	border-right: 1px solid black;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
}

/* Remove margins and padding from the list */
#myUL {
	margin: 0;
	padding: 0;
}

/* Style the list items */
#myUL li {
	height: 24px;
	line-height: 24px;
	cursor: pointer;
	position: relative;
	padding: 3px;
	padding-left: 15px;
	background: #eee;
	font-family: 'Open Sans', sans-serif;
	color: maroon;
	font-size: 18px;
	transition: 0.2s;
	list-style-type: none;
	/* make the list items unselectable */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Set all odd list items to a different color (zebra-stripes) */
#myUL li:nth-child(odd) {
	background: #f9f9f9;
}

#myUL li:last-child {
	border-bottom: 1px solid black;
}

/* Darker background-color on hover */
#myUL li:hover {
	background: #ddd;
}

/* When clicked on, add a background color and strike out text */
#myUL li.checked {
	background: #888;
	color: #fff;
	text-decoration: line-through;
}

/* Add a "checked" mark when clicked on */
#myUL li.checked::before {
	content: '';
	position: absolute;
	border-color: #fff;
	border-style: solid;
	border-width: 0 2px 2px 0;
	top: 10px;
	left: 16px;
	transform: rotate(45deg);
	height: 10px;
	width: 7px;
}

/* Style the close button */
.close {
	position: absolute;
	right: 0;
	top: 0;
	padding: 2px 12px 4px 12px;
}

.close:hover {
	background-color: #f44336;
	color: white;
}

/* Style the header */
.header {
	background-color: #f4d297;
	color: white;
	text-align: center;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-color: black;
}

#notes_header {
	line-height: 36px;
	font-size: 18px;
	font-family: 'Open Sans', sans-serif;
	color: maroon;
}

/* Clear floats after the header */
.header:after {
	content: "";
	display: table;
	clear: both;
}

/* Style the input */
#myInput {
	margin: 0;
	border: 0;
	border-top: 1px;
	border-right: 1px;
	border-radius: 0;
	width: 671px;
	padding: 10px;
	float: left;
	font-size: 16px;
	font-family: 'Open Sans', sans-serif;
	color: maroon;
	border-style: solid;
	border-color: black;
}

/* Style the "Add" button */
.addBtn {
	width: 158px;
	background: #d9d9d9;
	color: #555;
	float: left;
	text-align: center;
	height: 38px;
	line-height: 38px;
	font-size: 16px;
	font-family: 'Open Sans', sans-serif;
	color: maroon;
	cursor: pointer;
	transition: 0.3s;
	border-top: 1px solid black;

}

.addBtn:hover {
	background-color: #bbb;
}


#save_button {
	position: absolute;
	display: inline-block;
	top: 0px;
	left: 0px;
	width: 100px;
	border: none;
	border-right: 1px solid black;
	outline: none;
	background: #3F8C00;
	text-align: center;
	line-height: 36px;
	font-size: 16px;
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	cursor: pointer;
}

/* Style the tab */
.tab {
	position: relative;
	top: 21vw;
	left: 2vw;
	float: left;
	border: 3px solid #000;
	background-color: #660066;
	width: 170px;
	height: 521px;
	overflow-y: auto;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

/* Style the buttons inside the tab */
.tab button {
	display: block;
	background-color: inherit;
	color: #fff;
	padding: 10px 16px;
	width: 170px;
	border: none;
	outline: none;
	text-align: left;
	cursor: pointer;
	transition: 0.3s;
	font-size: 14px;
}

/* Change background color of buttons on hover */
.tab button:hover {
	background-color: #902390;
}

/* Create an active/current "tab button" class */
.tab button.active {
	background-color: #3F8C00;

}

#top_btn {
	border-top-left-radius: 2px;
}

/* Style the tab content */
.tabcontent {
	position: relative;
	top: 21vw;
	left: 2vw;
	float: left;
	padding: 20px;
	border: 3px solid #000;
	width: 656px;
	border-left: none;
	height: 480px;
	font-family: Arial;
	font-size: 14px;
	color: #000;
	line-height: 14px;
	background-color: rgba(255, 255, 255, .8);
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	overflow-y: scroll;
}

.tabcontent p {
	padding-left: 10px;
}