/* Shadekeep Mapping Tool ©2018-present Howard A. Kistler */

/* Webfonts */
@font-face {
	font-family: 'OpenSans';
	src: url("../font/OpenSansRegular.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'OpenSans';
	src: url("../font/OpenSansBold.woff") format("woff");
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'OpenSans';
	src: url("../font/OpenSansItalic.woff") format("woff");
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'OpenSans';
	src: url("../font/OpenSansBoldItalic.woff") format("woff");
	font-weight: bold;
	font-style: italic;
}
@font-face {
	font-family: 'RobotoMono';
	src: url("../font/RobotoMono300.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'RobotoMono';
	src: url("../font/RobotoMono500.woff") format("woff");
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'RobotoMono';
	src: url("../font/RobotoMono300italic.woff") format("woff");
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'RobotoMono';
	src: url("../font/RobotoMono500italic.woff") format("woff");
	font-weight: bold;
	font-style: italic;
}
@font-face {
	font-family: 'Titillium';
	src: url("../font/titilliumregular.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Titillium';
	src: url("../font/titillium600.woff") format("woff");
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'Titillium';
	src: url("../font/titilliumitalic.woff") format("woff");
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'Titillium';
	src: url("../font/titillium600italic.woff") format("woff");
	font-weight: bold;
	font-style: italic;
}
/* Styles */
body {
	margin: 0 auto;
	font-family: 'OpenSans', sans-serif;
	background-color: #afcfff;
}
a[href] {
	text-decoration: none;
	color: #376ca6;
}
a[href]:active {
	text-decoration: none;
	color: #ff0000;
}
a[href]:visited {
	text-decoration: none;
	color: #376ca6;
}
#masthead {
	display: table;
	height: 26px;
	margin: 0px;
	padding: 8px;
	text-align: left;
	vertical-align: middle;
}
#menuBar {
	display: table-row;
	margin: 0;
	padding: 0;
}
#appname {
	display: table-cell;
	padding-right: 16px;
	border-right: 2px solid black;
}
#logo {
	display: inline-block;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}
.menuItem {
	display: inline-block;
	margin: 0px 0px 0px 16px;
	padding: 1px 6px;
	font-family: 'Titillium', sans-serif;
	font-size: 16px;
	vertical-align: middle;
	border: 1px solid #6f8fbf;
	color: #eeeeee;
	background-color: #6f8fbf;
	cursor: pointer;
	border-radius: 8px;
}
.menuItem-red {
	color: #efdddd;
}
.menuItem-green {
	color: #ddefdd;
}
.menuItem-blue {
	color: #ddddef;
}
#header {
	display: inline-block;
	font-family: 'Titillium', sans-serif;
	font-size: 16px;
	margin: 0;
	padding: 0 0 0 8px;
	vertical-align: middle;
}
#wrapper {
	display: block;
	text-align: center;
	margin: 0;
	padding: 0;
	height: 820px;
	width: 100%;
}
#editor {
	text-align: left;
	vertical-align: top;
	margin: 0;
	padding: 0 0 1px 0;
	border-bottom: 1px solid #808080;
	height: 820px;
	width: 670px;
	background-color: #d8d8d8;
	float: right;
}
#canvasframe {
	text-align: left;
	vertical-align: top;
	margin: 0 670px 0 0;
	padding: 0;
	border: 1px solid #808080;
	height: 820px;
	width: auto;
	white-space: nowrap;
	overflow: auto;
	background-color: #ffffff;
}
#editortabs {
	display: block;
	background-color: #afcfff;
}
#paletteTools {
	display: block;
	height: 764px;
	overflow: auto;
}
#paletteCompose {
	display: none;
	height: 764px;
	overflow: auto;
}
#paletteSpace {
	display: none;
}
#paletteCustom {
	display: none;
}
#paletteOpts {
	display: none;
}
#paletteHelp {
	display: none;
	height: 764px;
	overflow: auto;
}
#paletteHotkeys {
	display: none;
	height: 764px;
	overflow: auto;
}
#paletteAbout {
	display: none;
	height: 764px;
	overflow: auto;
}
.tab {
	display: table-cell;
	padding: 4px 12px;
	text-align: center;
}
.tabActive {
	background-color: #d8d8d8;
	border-bottom: none;
	border-top: 1px solid #808080;
	border-right: 1px solid #808080;
	color: #2f2f8f;
	cursor: default;
}
.tabInactive {
	background-color: #c8c8c8;
	border-top: 1px solid #808080;
	border-right: 1px solid #808080;
	border-bottom: 1px solid #808080;
	color: #3f3f3f;
	cursor: pointer;
}
.tabFiller {
	border-bottom: 1px solid #808080;
	width: 100%;
}
#editorform {
	padding: 8px;
	border-right: 1px solid #808080;
}
.nosvg {
	color: #803030;
}
.label {
	font-family: 'RobotoMono', monospace;
	font-size: 14pt;
	font-weight: bold;
	text-anchor: middle;
	dominant-baseline: central;
	alignment-baseline: central;
	cursor: pointer;
}
input {
	font-family: 'OpenSans', sans-serif;
}
textarea {
	font-family: 'OpenSans', sans-serif;
}
input[type=text] {
	border-radius: 4px;
	border-width: 1px;
	padding: 2px;
}
input[type=range] {
	height: 3px;
	background: #a0a0a0;
	cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
	appearance: none;
	background: #376ca6;
	border: none;
	cursor: pointer;
}
input[type=range]::-moz-range-thumb {
	appearance: none;
	background: #376ca6;
	border: none;
	cursor: pointer;
}
#zoomlevel {
}
#hexshade {
}
#imagesavesize {
	width: 260px;
}
.formlabel {
	display: block;
	font-size: 11pt;
    margin-bottom: 1px;
    padding: 2px;
	white-space: none;
}
.formgadget {
	display: block;
    margin-bottom: 4px;
    padding: 2px;
}
.formgadgetinline {
	display: inline-block;
    margin-bottom: 4px;
    padding: 2px;
}
.paletteheader {
	display: block;
	font-weight: bold;
	border: 1px solid #606060;
	color: #ffffff;
	background-color: #404040;
	padding: 1px 4px;
	font-size: 80%;
}
.palettesection {
	display: block;
	font-weight: bold;
}
.palettesep {
	display: block;
	height: 8px;
}
.palettebreak {
	display: block;
	height: 0px;
}
.palettetool {
	display: inline-block;
	width: 64px;
	height: 64px;
	margin: 2px;
	padding: 4px;
	text-align: center;
	vertical-align: bottom;
	border: 1px solid #7f7f7f;
	border-radius: 8px;
	background-color: #efefef;
	font-size: 10px;
	font-style: normal;
	overflow: hidden;
	cursor: pointer;
}
.palettetoolcompact {
	display: inline-block;
	width: 48px;
	height: 48px;
	margin: 2px;
	padding: 4px;
	text-align: center;
	vertical-align: bottom;
	border: 1px solid #7f7f7f;
	border-radius: 8px;
	background-color: #efefef;
	font-size: 10px;
	cursor: pointer;
}
.palettetoolcompact img {
	width: 70%;
	height: 70%;
}
.palettewidget {
	display: inline-block;
	width: 64px;
	height: 64px;
	margin: 2px;
	padding: 4px;
	text-align: center;
	vertical-align: bottom;
	border: 1px solid #7f7f7f;
	border-radius: 8px;
	background-color: #efefef;
	font-size: 10px;
}
.notclickable {
	cursor: default;
}
.widget2 {
	width: 142px;
}
.widget3 {
	width: 220px;
}
.widgetpad {
	padding: 8px;
}
.widgetblock {
	display: flex;
	width: 100%;
	height: 24px;
	margin: 12px 0px;
	padding: 0px;
	white-space: nowrap;
	justify-content: center;
}
.widgetbutton {
	height: 24px;
	width: 24px;
	border: none;
	margin: 1px;
	cursor: pointer;
}
.inpalbutton {
	display: inline-block;
	margin: 1px;
	padding: 2px;
	width: 24px;
	height: 24px;
	font-size: 10px;
}
.inpalinput {
	display: inline-block;
	margin: 1px 8px;
	padding: 0;
	width: 36px;
/*	height: 24px; */
	text-align: center;
	vertical-align: middle;
	font-size: 10px;
	border: 1px solid black;
	background-color: white;
}
.paletteform {
	margin-bottom: 8px;
	background-color: #e0e0e0;
	padding: 4px;
	border: 1px solid #808080;
}
.paletteform label {
	font-weight: bold;
	font-size: 90%;
}
.paletteformitem {
	display: inline-block;
	padding: 2px;
}
.paletteformwidget {
	display: block;
	width: 24px;
	height: 24px;
	padding: 0px;
	cursor: pointer;
}
.paletteformitem {
	display: inline-block;
	padding: 2px;
}
.floatl {
	float: left;
}
.floatr {
	float: right;
}
.palettebuttons {
	display: inline-block;
	width: 624px;
}
.paletteformscroller {
	display: inline-block;
	margin: 0px;
	padding: 2px;
	float: right;
}
.palettesubset {
	display: inline-block;
	margin: 0;
}
.paletteslider {
	display: inline-block;
	margin: 2px;
	padding: 2px;
	background-color: #efefef;
	border: 1px solid #7f7f7f;
	border-radius: 4px;
}
.paletteslider label {
	font-size: 90%;
	font-weight: bold;
}
#materpalette0 {
	display: inline-block;
}
#materpalette1 {
	display: none;
}
#materpalette2 {
	display: none;
}
#comppalette0row1 {
	display: inline-block;
}
#comppalette1row1 {
	display: none;
}
#comppalette0row2 {
	display: inline-block;
}
#comppalette1row2 {
	display: none;
}
#featpalette0row1 {
	display: inline-block;
}
#featpalette1row1 {
	display: none;
}
#featpalette0row2 {
	display: inline-block;
}
#featpalette1row2 {
	display: none;
}
#symbpalette0row1 {
	display: inline-block;
}
#symbpalette1row1 {
	display: none;
}
#symbpalette0row2 {
	display: inline-block;
}
#symbpalette1row2 {
	display: none;
}
.palettehidable {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
}
.customform {
	margin: 8px 0px;
	background-color: #e0e0e0;
	padding: 4px;
	border: 1px solid #808080;
}
.customform label {
	font-family: 'RobotoMono';
	font-weight: bold;
	font-size: 90%;
}
.customformitem {
	display: inline-block;
	padding: 2px;
	vertical-align: top;
}
.annotatetool {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 2px;
	padding: 4px;
	text-align: center;
	vertical-align: middle;
	border: 1px solid #7f7f7f;
	border-radius: 4px;
	background-color: #efefef;
	font-size: 12px;
}
#pblockMaterial {
	display: block;
	margin: 0px;
	padding: 0px;
}
#pblockComponent {
	display: block;
	margin: 0px;
	padding: 0px;
}
#pblockFeature {
	display: none;
	margin: 0px;
	padding: 0px;
}
#pblockTerrain {
	display: none;
	margin: 0px;
	padding: 0px;
}
#pblockSymbol {
	display: none;
	margin: 0px;
	padding: 0px;
}
#pblockDecor {
	display: none;
	margin: 0px;
	padding: 0px;
}
#pblockMegahex {
	display: none;
	margin: 0px;
	padding: 0px;
}
#pblockAnnotate {
	display: none;
	margin: 0px;
	padding: 0px;
}
.displaylabel {
	display: inline-block;
	width: 48px;
	padding: 2px;
	margin: 0px 0px 0px 4px;
}
.toolactive {
	font-weight: bold;
	font-style: normal;
	background-color: #ffaf5f;
	cursor: pointer;
}
.tooldisabled {
	font-weight: normal;
	font-style: italic;
	background-color: #bfbfbf;
	cursor: default;
}
.toolsep {
	display: inline-block;
	height: 72px;
	width: 4px;
	margin: 2px;
	padding: 0px;
	text-align: center;
	vertical-align: bottom;
	background-color: #404040;
}
.helpblock {
	display: block;
	border: 1px solid #808080;
	background-color: #ffffff;
	padding: 0px;
	margin-bottom: 8px;
}
.helpheader {
	display: block;
	font-weight: bold;
	background-color: #afdf7f;
	padding: 4px;
	text-align: center;
}
.barheader {
	display: block;
	font-weight: bold;
	background-color: #efbf8f;
	padding: 4px;
	text-align: center;
}
.helptext {
	display: block;
	padding: 4px;
}
.helpnote {
	display: block;
	padding: 0;
	margin: 0 0 4px 0;
	font-size: 80%;
	font-style: italic;
}
.helpitem {
	display: block;
	padding: 0;
	margin: 0 0 4px 0;
	font-size: 90%;
}
.helpsubitem {
	display: block;
	padding: 0;
	margin: 0 0 4px 16px;
	font-size: 80%;
	color: #404040;
}
.helpback {
	display: block;
	padding: 4px;
	margin: 4px -4px -4px -4px;
	text-align: right;
	font-size: 80%;
	background-color: #cfff9f;
}
.barback {
	display: block;
	padding: 4px;
	margin: 4px -4px -4px -4px;
	text-align: right;
	font-size: 80%;
	background-color: #ffdfaf;
}
.inlineimage {
	display: inline;
	vertical-align: bottom;
	border: none;
}
.compblock {
	display: block;
	border: 1px solid #808080;
	background-color: #ffffff;
	padding: 0px;
	margin-bottom: 8px;
}
.backheader {
	display: block;
	font-weight: bold;
	background-color: #8fbfef;
	padding: 4px;
	text-align: center;
}
.backback {
	display: block;
	padding: 4px;
	margin: 4px -4px -4px -4px;
	text-align: right;
	font-size: 80%;
	background-color: #afdfff;
}
.hotkeyblock {
	display: block;
	border: 1px solid #808080;
	background-color: #ffffff;
	padding: 0px;
	margin-bottom: 8px;
}
.hotkeyheader {
	display: block;
	font-weight: bold;
	background-color: #ffa080;
	padding: 4px;
	text-align: center;
}
.hotkeytable {
	display: block;
	width: 100%;
	padding: 4px;
	font-size: 90%;
}
.hotkeyrow {
	display: block;
	width: 100%;
}
.hotkeysym {
	display: inline-block;
	width: 28%;
	background: #e0e0e0;
	margin: 1px;
	text-align: center;
}
.hotkeydef {
	display: inline-block;
	width: 68%;
	margin: 1px;
}
.aboutblock {
	display: block;
	border: 1px solid #808080;
	background-color: #ffffff;
	padding: 0px;
	margin-bottom: 8px;
}
.aboutheader {
	display: block;
	font-weight: bold;
	background-color: #d0b0ff;
	padding: 4px;
	text-align: center;
}
.abouttext {
	display: block;
	padding: 4px;
}
.aboutitem {
	display: block;
	padding: 0;
	margin: 0 0 8px 0;
	font-size: 90%;
}
.licenseitem {
	display: block;
	padding: 4px;
	margin: 8px 0 8px 0;
	font-size: 80%;
}
.centerblock {
	display: block;
	text-align: center;
}
.footnotes {
	display: block;
	padding: 0;
	margin: 16px 0 16px 0;
	font-size: 70%;
	border-top: 1px solid #808080;
}
.footnotes ul {
	text-indent: 0px;
	margin: 8px 0px;
	padding: 0 0 0 16px;
	list-style-type: square;
}
.footnotes ul li {
	text-indent: 0px;
	margin: 8px 0px;
	padding: 0;
}
#updateblock {
	display: block;
	text-align: center;
	margin: 4px;
	padding: 4px;
	font-size: 90%;
}
#updatebutton {
	display: inline-block;
	font-family: 'OpenSans', sans-serif;
	font-size: 12px;
	text-align: center;
	vertical-align: middle;
	border: 1px solid black;
	border-radius: 6px;
	background-color: #bfdfff;
	margin: 0 auto;
	padding: 4px;
}
#mousewidgets {
	margin: 0;
	padding: 0;
	height: 26px;
	vertical-align: top;
}
#mousetracker {
	display: inline-block;
	width: 128px;
	height: 24px;
	border: 1px solid #7f7f7f;
	border-radius: 8px;
	background-color: #efefaf;
	text-align: center;
}
#mousetrackerlabel {
	display: inline-block;
	height: 24px;
	font-weight: bold;
}
#footer {
	display: block;
	height: 12px;
	padding: 4px;
	text-align: right;
	font-size: 50%;
}
#shader {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	background: #000000;
	display: none;
	opacity: 0.5;
}
#overlay {
	display: none;
}
#loadMapSelector {
	display: none;
}
#loadBackdropSelector {
	display: none;
}
.fileloaddiv {
	width: 300px;
	height: 200px;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -150px;
	margin-top: -100px;
	background: #efefef;
	border: 1px solid #000000;
	border-radius: 16px;
	font-family: 'OpenSans',sans-serif;
	padding: 0;
}
#loadgadget {
	display: inline-block;
	position: relative;
	overflow: hidden;
	margin: 8px 0px;
	width: 128px;
	height: 42px;
	border: 1px solid #404040;
	border-radius: 8px;
}
#loadgadget input[type="file"] {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 16px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
	width: 128px;
	height: 42px;
}
#loadgadget .userbutton {
	display: inline-block;
	width: 128px;
	height: 42px;
	background-color: #dfdfdf;
	text-align: center;
	vertical-align: middle;
	font-size: 16px;
	padding-top: 8px;
}
.messagebox {
	display: block;
	margin: 6px 0px;
	padding: 0px;
	text-align: center;
}
.messageboxinline {
	display: inline-block;
	margin: 6px 0px;
	padding: 0px;
	text-align: center;
}
.msg {
	padding: 4px;
}
.warning {
	color: #b03030;
	padding: 0px;
}
.success {
	color: #30b030;
}
.cancelbutton {
	display: inline-block;
	background-color: #cfcfcf;
	text-align: center;
	vertical-align: middle;
	font-size: 16px;
	margin: 8px 0px;
	padding: 8px;
	border: 1px solid #404040;
	cursor: pointer;
	float: right;
	border-radius: 8px;
}
#imageSaveGadget {
	display: none;
}
.imagesavediv {
	width: 300px;
	height: 200px;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -150px;
	margin-top: -100px;
	background: #efefef;
	border: 1px solid #000000;
	border-radius: 16px;
	font-family: 'OpenSans',sans-serif;
	padding: 0;
}
.imagesavediv label {
	font-size: 90%;
	font-weight: bold;
	vertical-align: middle;
}
.dialogheader {
	display: block;
	font-weight: bold;
	color: #cfcfcf;
	background-color: #404040;
	margin: 0;
	padding: 8px;
	border: none;
	border-radius: 16px 16px 0 0;
	font-size: 90%;
}
.dialogbody {
	padding: 8px;
}
#savescalegadget {
	margin: 8px;
}
#prefSetter {
	display: none;
}
.setprefdiv {
	width: 320px;
	height: 320px;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -160px;
	margin-top: -160px;
	background: #efefef;
	border: 1px solid #000000;
	border-radius: 16px;
	font-family: 'OpenSans',sans-serif;
	padding: 0;
}
.prefRow {
	display: block;
	width: 100%;
	text-align: left;
	margin: 0px 0px 4px 0px;
}
.prefRow label {
	font-weight: bold;
	font-size: 90%;
}
.prefFoot {
	display: block;
	font-size: 80%;
	border-top: 1px solid #808080;
	margin-top: 8px;
}
#materialname {
	padding: 4px;
}
#customRed {
	background: transparent;
	color: #000000;
	vertical-align: center;
	padding: 4px;
}
#customGreen {
	background: transparent;
	color: #000000;
	vertical-align: center;
	padding: 4px;
}
#customBlue {
	background: transparent;
	color: #000000;
	vertical-align: center;
	padding: 4px;
}
.customactive {
	font-weight: bold;
	color: #000000;
	background-color: #ffffff;
}
.custominactive {
	font-weight: normal;
	color: #404040;
	background-color: #c0c0c0;
}
#randomMapTools {
	display: none;
}
#randomRoomsSettings {
	display: none;
}
#randomTunnelsSettings {
	display: none;
}
.rndmaptoolsdiv {
	width: 400px;
	height: 360px;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -200px;
	margin-top: -180px;
	background: #efefef;
	border: 1px solid #000000;
	border-radius: 16px;
	font-family: 'OpenSans',sans-serif;
	padding: 0;
}
.formtitle {
	font-size: 90%;
	font-weight: bold;
	margin: 8px 0;
	text-align: left;
}
.formtools {
	display: block;
	margin: 8px 0;
	font-size: 90%;
}
.formblock {
	display: inline-block;
	font-size: 90%;
	text-align: left;
	vertical-align: top;
}
.formcol {
	display: inline-block;
	width: 40%;
	font-size: 90%;
	text-align: left;
	vertical-align: top;
}
.formcheck {
	display: block;
}
.formelem {
	display: block;
	padding-bottom: 2px;
}
.formfoot {
	display: block;
	margin: 8px 0;
}
.formbutton {
	display: inline-block;
	background-color: #cfcfcf;
	text-align: center;
	vertical-align: middle;
	font-size: 14px;
	margin: 0 0 0 4px;
	padding: 8px;
	border: 1px solid #404040;
	border-radius: 8px;
	cursor: pointer;
	float: right;
}
.formnote {
	display: block;
	width: 60%;
	text-align: left;
	font-size: 80%;
}