body{margin:0px 0px;}

/* z-indexes: 
	1.  map-container
	2.  map-grid
	5.  mountains / hills
	6.  rivers
	7.  river anchor points
	8.  lakes
	10. provinces
	11. province-polygon anchor points *province-rhombus
	12. province-polygon anchor points *province-circles province-circle-anchor
	15. province-label
	13. hooverMap
	99. tooltips for provinces, rivers and mountains.
	99. menu container *above-container*
*/

.map-container{
	top:0px;right:0px; 
	background-image: url('../img/blank.pattern.jpg');
	z-index:1;
}

.photo-desc{
	position:relative;
	display:table-cell;
}

.lower-left{
	position: absolute;
    bottom: 5px;
    left: 25px;
    -webkit-text-stroke: 1px;
    -webkit-text-stroke-color: #FFF;
    font-size: 48px;
}

.l25{
	left:100px;    bottom: -75px;
}

.l50{
	left:200px;    bottom: -75px;
}

.l150{
	left:300px;    bottom: -75px;
}

.lower-left.positive{color:Green;}
.lower-left.negative{color:Red;}

.photo-desc img{
	width:200px;
}

 

.polygon-print{opacity:.3;stroke-width: 1px;stroke:#FFF;}
.polygon-group:hover polygon{stroke-width: 3px;stroke:#000;opacity:.7;cursor:pointer;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out; 
}
.highlightedPolygon polygon{
	opacity:0.6;stroke-width:1px;fill:#ff3333;
}

.polygon-group.highlighted polygon{stroke-width: 2px;stroke:#000;opacity:.7;cursor:pointer}

.hoverMap{position:absolute;top:0px;left:0px;z-index:13;width:100%;height:100%;}

.province-label{ position:absolute;z-index:15;
font-family: 'Alegreya', sans-serif;font-size:14px;color:#000;
 color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
}
.topright2{
	position: absolute;
    top: 5px;
    right: 5px;
}
.topright{
	position: absolute;
    top: 20px;
    right: 20px;
}
.blank-pattern{position:absolute;top:0px;left:0px;background-image: url('../img/transparent.pattern.png');z-index:2;
display:none;opacity:.4;}

.above-container{  position:absolute;top:0px;left:0px;}

.l10{font-family: 'Alegreya', sans-serif;font-size:14px;color:#7f8c8d;}
.h1{font-family: 'Alegreya', sans-serif;font-size:24px;color:#7f8c8d;}
.cat12{font-family:'Play', sans-serif; ;font-size:14px;color:#000;} 
.font10{font-size:10px;}
.p10{padding:10px;}
.inline-image{margin-bottom:-6px;}
.editor-submenu{padding-top:10px;padding-bottom:10px;background-color:#ecf0f1;width:100px;overflow-y: scroll;
    max-height: 400px;}
.list li{margin-top:14px;}
.height14{ height:14px;}
.nomargin{margin:0px 0px;}
.grey{color:#C1C1C1;}

.message{font-family:'Tinos', sans-serif;font-size:16px;color:Black;}
.red2{font-family:'Tinos', sans-serif;font-size:14px;color:Red;}

.editor-menu{z-index:99;
	position:fixed;
	box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);background-color:#FFF; 
	padding:20px;
	margin:20px 20px;
	height:100%: 
}

.mountain{ z-index:5; position:absolute; }

.preview{ float:left;position:relative;cursor:pointer;}
.preview .item{width:100px;height:100px;margin:5px;}
.preview .alternatives{ opacity:.3; position:absolute;right:5px;bottom:5px;}
.preview .alternatives:hover{ background-color:#FFF;}
.preview:hover{background-color:#C1C1C1;}

.shadow-box{
	z-index:99;
	position:fixed;
	box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
	background-color:rgba(255, 255, 255,1);
	padding:20px;  
}

.shader-container{
	background-color: #FFFCFC;	
	height:75px;
}
.shader {  
	cursor:pointer;
	border:1px Solid #C1C1C1;	
	width:20px;
	float:left;
	height:70px;
	margin-right:1px;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
}
.shader:hover{ border:5px Solid #C1C1C1; }

.shader .color{
	min-height:14px; 
	 width:100%;

}
.shader.selected{ border:5px Solid #C1C1C1;}
.shader .color{ content: " "; }
.shader.center{ vertical-align:middle; font-size:14px;line-height:70px;}

.shader-font-color{ 
color:#000; text-shadow: 1px 1px rgba(255,255,255,0.5), -1px 1px rgba(255,255,255,0.5), 1px -1px rgba(255,255,255,0.5), -1px -1px rgba(0,0,0,0.5);
   font-family: 'Play', sans-serif;
    font-size: 14px;}

.tips{     
	position: fixed;
    z-index: 99;font-family:'Lato',serif;
    width: 500px;
    top: 0px;
    left: calc(50% - 250px);
}

.map-infobox{  height: 40px; }
.map-infobox span{width:430px;display:block;}
 

.province-svg{z-index:10;clear:both;top:0px;left:0px;position:absolute;}
.province-rhombus{z-index:11;position:absolute;}
.province-circle-anchor{z-index:12;position:absolute;}

.preview-image-in-edit{height:155px;}



.footer{
	position:absolute;
	left:20px;
	bottom:20px;
	margin:20px 20px;	
}

.textbox {
    height: 50px;
    width: 275px;
    border: solid 1px #E5E5E5;
    outline: 0;
    padding-left:10px;
    
    font: normal 13px/100% 'Lato', sans-serif;
    background: #FFF url('bg_form.png') left top repeat-x;
    background: -webkit-gradient(linear, left top, left 25, from(#FFF), color-stop(4%, #EEE), to(#FFF));
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	text-transform:uppercase;
}
 .textbox :focus {  
	border-color: #C9C9C9;  
	-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; 
	}

.textbox::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #bdc3c7;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #bdc3c7;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #bdc3c7;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #bdc3c7;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #bdc3c7;
}

.drop-box {
    background: #F8F8F8;
    border: 2px dashed #DDD;
    width: 220px;
    text-align: center;
    padding: 50px 10px;
    margin-right: 10px;
    float:left;
    font-size:14px;
    /*text-transform:uppercase;*/
    font-family:'Tinos', sans-serif;
    font-weight:bold;
    cursor:pointer;
}

.btn.small{
	font-size:8px;
	padding:2px 4px;
}

.hide-maps{
	color:#000;
	background-color:lightseagreen;
}

.btn {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
	background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
	background-color:#ededed;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#777777;
	font-family: 'Lato', serif;
	font-size:13px;
	/*font-weight:bold;*/
	padding:10px 15px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.btn:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
	background:-moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0);
	background-color:#dfdfdf;
}
.btn:active {
	position:relative;
	top:1px; 
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
	background:-moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0);
	background-color:#dfdfdf;
}
.btn.customstuff{ margin-top:2px; width:90%;}
.btn.small{
	padding:5px 5px;
	font-size:10px;
text-transform:uppercase;}
 
.btn.small.customstuff.highlighted{
	position:relative;
	top:1px; 
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
	background:-moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0);
	background-color:#dfdfdf;
}
 
.btn.highlighted{
	position:relative;
	top:1px; 
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
	background:-moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0);
	background-color:#dfdfdf;
}

.btn.icn {padding:6px;padding-top:9px; padding-bottom:9px;}
.btn.icn img{height:16px;}

.mountain-list{
	display:none;
	position: fixed;
    z-index: 99;font-family:'Lato',serif;
    width: 25%;
    top: 0px;
   	right: 0px;
   	height:100%;
}

.delete-province{height:24px;cursor:pointer;}
.delete-province:hover{
	-webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
	opacity:1; 
}

.x.spin:hover{
  background:#BB3333;
  transform: rotate(180deg);
}
.x b{
  display:block;
  position:absolute;
  height:0;
  width:0;
  padding:0;
  margin:0;
}
.x.small b {
  border:solid 5px rgba(255,255,255,0);
}
.x b:nth-child(1){
  border-top-color:#FFF;
  top:-2px;
}
.x b:nth-child(2){
  border-left-color:#FFF;
  left:-2px;
}
.x b:nth-child(3){
  border-bottom-color:#FFF;
  bottom:-2px;
}
.x b:nth-child(4){
  border-right-color:#FFF;
  right:-2px;
}
.x {
  float:right;
  position:relative;
  margin:0;
  padding:0;
  overflow:hidden;
  background:transparent;
  border-radius:2px;
  border:solid 2px transparent;
  transition: all .3s ease-out;
  cursor:pointer;
}
 
.hidebutton{
	cursor:pointer;
	border-radius:5px;
	padding:5px;
}

.hidebutton:hover{
	background-color:lightblue;
}

.map-list tr:hover{
	background-color:lightblue;
	cursor:pointer;
}
.oddcolor{background: #dfefe8;}

.x.small {
  width:10px;
  height:10px;
}

.userlink{
	padding:5px;
	background-color:lightgrey;
	color:#2F4F4F;
	cursor:pointer;
	margin-right:5px;
}

.userlink:hover{
	background-color:#2F4F4F;
	color:#FFF;
}

/* buttons from https://codepen.io/jgthms/pen/EjxBdR */

.lds-hourglass {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
  }
  .lds-hourglass:after {
	content: " ";
	display: block;
	border-radius: 50%;
	width: 0;
	height: 0;
	margin: 8px;
	box-sizing: border-box;
	border: 32px solid #000000;
	border-color: #000000 transparent #000000 transparent;
	animation: lds-hourglass 1.2s infinite;
  }
  @keyframes lds-hourglass {
	0% {
	  transform: rotate(0);
	  animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	}
	50% {
	  transform: rotate(900deg);
	  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	100% {
	  transform: rotate(1800deg);
	}
  }
  


kbd
{
    -moz-border-radius:3px;
    -moz-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
    -webkit-border-radius:3px;
    -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
    background-color:#f7f7f7;
    border:1px solid #ccc;
    border-radius:3px;
    box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
    color:#333;
    display:inline-block;
    font-family:'Play', sans-serif;
    font-size:11px;
    font-weight:bold;
    line-height:1.4;
    margin:0 .1em;
    padding:.1em .6em;
    text-shadow:0 1px 0 #fff;
    cursor:pointer;
}

.landmass-1.disabled .polygon-print{ fill:none !important; }
.landmass-1.disabled .polygon-print{ fill:none !important; }
.landmass-1.disabled .polygon-print{ fill:none !important; }
.landmass-1.disabled .polygon-print{ fill:none !important; }

.landmass-1 .polygon-print{ fill:#8FBC8F; }
.landmass-2 .polygon-print{ fill:#FFD700; }
.landmass-3 .polygon-print{ fill:#DCDCDC; }
.landmass-4 .polygon-print{ fill:#F8F8FF; }
.landmass-5 .polygon-print{ fill:#FFA500; }
.landmass-6 .polygon-print{ fill:#00FFFF; }
.landmass-7 .polygon-print{ fill:#DA70D6; }
.landmass-8 .polygon-print{ fill:#E0FFFF; }
.landmass-9 .polygon-print{ fill:#CD5C5C; }
.landmass-10 .polygon-print{ fill:#EEE8AA; }
.landmass-11 .polygon-print{ fill:rgb(22, 30, 102); }
.landmass-12 .polygon-print{ fill:#EE82EE; }
.landmass-13 .polygon-print{ fill:#DEB887	; }
.landmass-14 .polygon-print{ fill:#F0F8FF ; }
.landmass-15 .polygon-print{ fill:#FF6347; }
.landmass-16 .polygon-print{ fill:#A0522D; }
.landmass-17 .polygon-print{ fill:#FFFFFF; }
.landmass-18 .polygon-print{ fill:#FFA07A; }
.landmass-19 .polygon-print{ fill:#8B008B; }
.landmass-20 .polygon-print{ fill:#A52A2A; }
.landmass-21 .polygon-print{ fill:#4169E1; }
.landmass-22 .polygon-print{ fill:#FFB6C1; }
.landmass-23 .polygon-print{ fill:#40E0D0; }
.landmass-24 .polygon-print{ fill:#FF1493; }
.landmass-25 .polygon-print{ fill:#CD853F; }
.landmass-26 .polygon-print{ fill:#000000; }
.landmass-27 .polygon-print{ fill:#F0FFFF; }
.landmass-28 .polygon-print{ fill:#00008B; }
.landmass-29 .polygon-print{ fill:#2F4F4F; }
.landmass-30 .polygon-print{ fill:#7FFFD4; }
.landmass-31 .polygon-print{ fill:#F5FFFA; }


.landmass-41 .polygon-print{ fill:#8FBC8F; }
.landmass-42 .polygon-print{ fill:#FFD700; }
.landmass-43 .polygon-print{ fill:#DCDCDC; }
.landmass-44 .polygon-print{ fill:#F8F8FF; }
.landmass-45 .polygon-print{ fill:#FFA500; }
.landmass-46 .polygon-print{ fill:#00FFFF; }
.landmass-47 .polygon-print{ fill:#DA70D6; }
.landmass-48 .polygon-print{ fill:#E0FFFF; }
.landmass-49 .polygon-print{ fill:#CD5C5C; }
.landmass-50 .polygon-print{ fill:#EEE8AA; }
.landmass-51 .polygon-print{ fill:rgb(22, 30, 102); }
.landmass-52 .polygon-print{ fill:#EE82EE; }
.landmass-53 .polygon-print{ fill:#DEB887	; }
.landmass-54 .polygon-print{ fill:#F0F8FF ; }
.landmass-55 .polygon-print{ fill:#FF6347; }
.landmass-56 .polygon-print{ fill:#A0522D; }
.landmass-57 .polygon-print{ fill:#FFFFFF; }
.landmass-58 .polygon-print{ fill:#FFA07A; }
.landmass-59 .polygon-print{ fill:#8B008B; }
.landmass-60 .polygon-print{ fill:#A52A2A; }
.landmass-61 .polygon-print{ fill:#4169E1; }
.landmass-62 .polygon-print{ fill:#FFB6C1; }
.landmass-63 .polygon-print{ fill:#40E0D0; }
.landmass-64 .polygon-print{ fill:#FF1493; }
.landmass-65 .polygon-print{ fill:#CD853F; }
.landmass-66 .polygon-print{ fill:#000000; }
.landmass-67 .polygon-print{ fill:#F0FFFF; }
.landmass-68 .polygon-print{ fill:#00008B; }
.landmass-69 .polygon-print{ fill:#2F4F4F; }
.landmass-32 .polygon-print{ fill:#7FFFD4; }
.landmass-33 .polygon-print{ fill:rgb(78, 103, 245); }
.landmass-34 .polygon-print{ fill:rgb(61, 233, 61); }
.landmass-35 .polygon-print{ fill:rgb(202, 175, 21); }
.landmass-36 .polygon-print{ fill:rgb(212, 27, 27); }
.landmass-37 .polygon-print{ fill:rgb(66, 97, 25); }
.landmass-38 .polygon-print{ fill:rgb(207, 181, 132); }
.landmass-39 .polygon-print{ fill:rgb(20, 126, 126); }
.landmass-40 .polygon-print{ fill:rgb(224, 31, 218); }