@font-face {
    font-family: 'Century Gothic Regular';
    src: url('CenturyGothic.eot');
    src: url('CenturyGothic.eot?#iefix') format('embedded-opentype'),
    url('CenturyGothic.woff') format('woff'),
    url('CenturyGothic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    }

:root { /* redefined in function.js by set_palette() */
--rgb0: #000;
--rgb1: #423024;
--rgb2: #665F59;
--rgb3: #666;
--rgb4: #888;
--rgb5: #8a7873;
--rgb6: #f00; /* reserved */
--rgb7: #0f0; /* reserved */
--rgb8: #00f; /* reserved */
--rgb9: #b2ada1;
--rgb10: #cac8c3;
--rgb11: #ece9e0;
--rgb12: #f2f1ec;	  
--rgb13: #f3eedd;
--rgb14: #fffaec;
--rgb15: #fff';		
}

body {
	font-family:  verdana, sans-serif; /*Droid, Serif,*/
	font-family: Century Gothic,sans-serif; 
	font-family: 'Century Gothic Regular';

	font-size: 8pt !important;
/*	font-size: 10px close to 8 pt 16px !important;  for mobile */
	color: var(--rgb1); 
/*	background-image:url('http://retromap.ru/images/old-paper.png'); */
	background : var(--rgb14);
	margin:0;
	padding:0;
}

.main_font {
	font-family:  verdana, sans-serif !important;
	font-size: 8pt !important;
	color:#423024;
}

button {
	font-family: 'Century Gothic Regular';
}

.playerInnerBox_gsvb .player_gsvb {
  width : 220px;
  height : 160px;
}

.b :hover{
	background-color	:#ece9e0;
}

.d :hover{
	background-color	:var(--rgb12);
	font-weight:bold;	
	}

.d a:hover{
	background-color	:var(--rgb12);
	font-weight:bold;
	}

.icon_on_brown{
	float:left;
	margin-right:10px;
	color:var(--rgb14);
	font-size:16px;
	}

.icon_on_brown :hover{
	color:var(--rgb7);
	cursor:pointer;
	}

.icon_brown{
	float:left;
	margin:4px 10px 0 0;
	color:var(--rgb1);
	font-size:16px;
	}

.icon_brown :hover{
	color:var(--rgb7);
	cursor:pointer;
	}
.f a:link {text-decoration: none;}
.f a:hover{
	background-color	:var(--rgb14); /*#888; color:#FFF; */	
	}
.f a:hover{text-decoration: none;}

a.f1:link {text-decoration: none;} /* used in streets.js */ 
a.f1:hover{color:#FFF;}
a.f1:hover{text-decoration: none;}

a.f:link {text-decoration: none;}
a.f:visited {text-decoration: none;}
a.f:hover{
	text-decoration: none;
	background-color	:var(--rgb13); /*#888; color:#FFF; */	
	}

.f2 { /* used in search.html */ 
	font-size:11px;
}

.f3:hover{
	text-decoration: none;
	background-color	:var(--rgb15); 
	}

a.f3:hover{
	text-decoration: none;
	background-color	:var(--rgb15); 
	}

a.g {color:#FFF}
a.g:link {text-decoration: none;}
a.g:visited {text-decoration: none;}
/*a.g:hover{background-color	:#aaa;}*/
a.g:hover{
	background-color	:#eee;
	color: #3a2823;
	-shadow: 0px 0px 7px 0px #eee; /* Валидное свойство CSS 3 тень*/
    -webkit-box-shadow: 0px 0px 7px 0px #eee; /* Safari, Chrome */
  /*  -moz-box-shadow: 0px 0px 7px 0px #eee;  Firefox */
/*	padding	:0px 5px 0px 5px; */
	
	}	
/*
a.w{color:#FFF}
a.w:link {text-decoration: none;}
a.w:visited {text-decoration: none;}
a.w:hover{
	background-color	:#aaa;
	}
*/
a:visited{color:#000}
a:link {color:#000}

.intext
	{
	float:left;
	clear:both;
	margin-right:20px;
	padding-bottom:10px;
	}

.w {color:#FFF !important}
.w a{text-decoration: none;color:#FFF}
.w a:visited{color:#FFF}
.w a:link {text-decoration: none;color:#FFF}
.w a:hover{
	background-color:#888;
}
a.w {color:#FFF !important}
a.w:link {text-decoration: none;}
a.w:visited {text-decoration: none;}
a.w:hover{
	text-decoration: none;
	background-color	:var(--rgb9);
	color:#FFF;
}
h2{
	font-size:1.8em !important;
	padding-bottom:5px !important;
	background-color	:var(--rgb13);
}
h3{background-color	:var(--rgb13);}
h4{font-size:1.3em;background-color	:var(--rgb13);}
.t{padding-left:30px;padding-bottom:25px;padding-top:5px;}
.t1{padding-left:20px;}

.mainheadermenu {
	color:#FFF;text-decoration:none;padding-left:10px;
}

.mainheadermenu a{
	color:#FFF;text-decoration:none;padding-left:10px;
}

.dshadow{
	border-radius:8px; /* Валидное свойство CSS 3 скругление углов, значение(цифра) задаёт радиус скругления*/
    -webkit-border-radius:8px; /* Safari, Chrome */
    /* -moz-border-radius:8px; /* Firefox */
    box-shadow: 10px 7px 7px 2px #3a2823; /* Валидное свойство CSS 3 тень*/
    -webkit-box-shadow: 10px 7px 7px 2px #3a2823; /* Safari, Chrome */
  /*  -moz-box-shadow: 10px 7px 7px 2px #3a2823;  Firefox */
}

.shadow{
    border-radius:4px; /*10px; /* Валидное свойство CSS 3 скругление углов, значение(цифра) задаёт радиус скругления*/
    -webkit-border-radius:4px; /*10px; /* Safari, Chrome */
    /* -moz-border-radius:10px; /* Firefox */
    box-shadow: 30px 30px 100px 0px #3a2823; /* Валидное свойство CSS 3 тень*/
    -webkit-box-shadow: 15px 15px 100px 0px #3a2823; /* Safari, Chrome */
  /*  -moz-box-shadow: 30px 30px 100px 0px #3a2823;  Firefox */
    /* ТЕНЬ   Первое значение(цифра) задает смещение тени по оси X (горизонтали). Может задаваться в любых допустимых единицах измерения CSS Положительное значение задает смещение вправо, отрицательное – смещение влево;
    * Второе значение(цифра) задает смещение по оси Y (вертикали). Положительное значение соответствует смещению вниз, отрицательное – вверх;
    * Третье значение(цифра) определяет радиус размытия. Отрицательные значения недопустимы;
    * Четвертое значение(цифра) – радиус растяжения тени. Положительные значения растягивают тень во всех направлениях, отрицательные сужают;
    * color – базовый цвет тени;
    * Если указано ключевое слово inset, тень будет направлена внутрь элемента.*/
 /*	 behavior: url(ie-css3.htc);  This lets IE know to call the script on all elements which get the 'box' class */
}

.topround{
    border-radius:4px 4px 0 0; /*10px 10px 0 0; /* Top-left, top-right, bottom-left, bottom-right*/
    -webkit-border-radius:4px 4px 0 0; /*10px 10px 0 0; /* Safari, Chrome */
    /* -moz-border-radius:10px 10px 0 0; /* Firefox */
}

.shadow1{
    box-shadow: 15px 15px 30px 0px #3a2823; /* Валидное свойство CSS 3 тень*/
    -webkit-box-shadow: 15px 15px 30px 0px #3a2823; /* Safari, Chrome */
    /* -moz-box-shadow: 15px 15px 30px 0px #3a2823; /* Firefox */
}
.shadow2{
    border-radius:4px; /*10px; /* Валидное свойство CSS 3 скругление углов, значение(цифра) задаёт радиус скругления*/
    -webkit-border-radius:4px; /*10px; /* Safari, Chrome */
    /* -moz-border-radius:10px; /* Firefox */
    box-shadow: 0px 0px 300px 30px #3a2823; /* Валидное свойство CSS 3 тень*/
    -webkit-box-shadow: 0px 0px 300px 30px #3a2823; /* Safari, Chrome */
    /* -moz-box-shadow: 0px 0px 300px 30px #3a2823; /* Firefox */
}
.shadow3{
    box-shadow: -15px -15px 30px 0px #3a2823; /* Валидное свойство CSS 3 тень*/
    -webkit-box-shadow: -15px -15px 30px 0px #3a2823; /* Safari, Chrome */
    /* -moz-box-shadow: -15px -15px 30px 0px #3a2823; /* Firefox */
}
.shadow4{
    border-radius:18px; /* Валидное свойство CSS 3 скругление углов, значение(цифра) задаёт радиус скругления*/
    -webkit-border-radius:18px; /* Safari, Chrome */
    /* -moz-border-radius:18px; /* Firefox */
    box-shadow: 0px 0px 30px 0px #3a2823; /* Валидное свойство CSS 3 тень*/
    -webkit-box-shadow: 0px 0px 30px 0px #3a2823; /* Safari, Chrome */
    /* -moz-box-shadow: 0px 0px 30px 0px #3a2823; /* Firefox */
}
.shadow5{
    border-radius:8px; /* Валидное свойство CSS 3 скругление углов, значение(цифра) задаёт радиус скругления*/
    -webkit-border-radius:8px; /* Safari, Chrome */
    /* -moz-border-radius:8px; /* Firefox */
    box-shadow: 15px 15px 30px 0px #3a2823; /* Валидное свойство CSS 3 тень*/
    -webkit-box-shadow: 15px 15px 30px 0px #3a2823; /* Safari, Chrome */
    /* -moz-box-shadow: 15px 15px 30px 0px #3a2823; /* Firefox */
}
.shadow6{ /* Pics and maps on forum */
	 border-radius:8px; /* Валидное свойство CSS 3 скругление углов, значение(цифра) задаёт радиус скругления*/
    -webkit-border-radius:8px; /* Safari, Chrome */
    /* -moz-border-radius:8px; /* Firefox */
    box-shadow: 5px 5px 10px 0px #8a8873; /* Валидное свойство CSS 3 тень*/
    -webkit-box-shadow: 5px 5px 10px 0px #8a8873; /* Safari, Chrome */
    /* -moz-box-shadow: 5px 5px 10px 0px #8a8873; /* Firefox */
}
.shadow7{
    box-shadow: 0px 0px 3px 0px #3a2823; /* Валидное свойство CSS 3 тень*/
    -webkit-box-shadow: 0px 0px 3px 0px #3a2823; /* Safari, Chrome */
    /* -moz-box-shadow: 15px 15px 30px 0px #3a2823; /* Firefox */
}
.shadow8{
	 border-radius:4px; /* Валидное свойство CSS 3 скругление углов, значение(цифра) задаёт радиус скругления*/
    -webkit-border-radius:4px; /* Safari, Chrome */	
    box-shadow: 0px 0px 3px 0px #3a2823; /* Валидное свойство CSS 3 тень*/
    -webkit-box-shadow: 0px 0px 3px 0px #3a2823; /* Safari, Chrome */
    /* -moz-box-shadow: 15px 15px 30px 0px #3a2823; /* Firefox */
}
.shadow_main{
  /*  border-radius:4px; 
    -webkit-border-radius:4px; 

    box-shadow: 5px 5px 5px 0px #cac8c3; 
    -webkit-box-shadow: 5px 5px 5px 0px #cac8c3; 
  
	border: 1px solid #cac8c3;
	*/
}
.shadow_main a{text-decoration: none;}
.roundall{ 
	 border-radius:8px; /* Валидное свойство CSS 3 скругление углов, значение(цифра) задаёт радиус скругления*/
    -webkit-border-radius:8px; /* Safari, Chrome */
    /* -moz-border-radius:8px; /* Firefox */
}

.roundtop{ 
	 border-radius:8px 8px 0px 0px; /* Валидное свойство CSS 3 скругление углов, значение(цифра) задаёт радиус скругления*/
    -webkit-border-radius:8px 8px 0px 0px; /* Safari, Chrome */
    /* -moz-border-radius:8px 8px 0px 0px; /* Firefox */
}

.roundbottom{ 
	 border-radius:0px 0px 8px 8px; /* Валидное свойство CSS 3 скругление углов, значение(цифра) задаёт радиус скругления*/
    -webkit-border-radius:0px 0px 8px 8px; /* Safari, Chrome */
    /* -moz-border-radius:0px 0px 8px 8px; /* Firefox */
}
/*
#preview{
	position:absolute;
	background:#fff;
	padding:5px;
	display:none;
	}
*/
.boxtext {
/*	font-family	:verdana, sans-serif;
	font-size	:8pt; */
	color		:#423024;	
}

.txtbox {
	border-width 			:1px;
	border-style			:solid;
	border-color			:#E0E0E0;
	position 				:absolute;
	background-color 		:#fff;
	color 					:#423024;
/*	font-family 			:verdana, sans-serif; 
	font-size 				:8pt; */
	padding-top				:8px;
	padding-left			:2%;
	padding-right			:2%;
}
.box {
	border-width 			:1px;
	border-style			:solid;
	border-color			:#E0E0E0;
	background-color 		:#fff;
	color 					:#665F59; 
/*	font-family 			:verdana, sans-serif; 
	font-size 				:8pt; */
	text-decoration			:none;
	padding					:4px;
	padding-left			:8px;
	padding-right			:8px;
	overflow				:auto;
}
.box a{
	text-decoration			:none;
}
.underlined,.whitebox a{
	text-decoration			:underline;
}
.boxtable td{
	text-decoration			:none;
}
/*.boxtable a:hover{
	background-color		:#ccc;
}*/
.boxheader {
	border-width 			:1px;
	border-style			:solid;
	border-color			:#C0C0C0;
	padding-top				:4px;
	padding-bottom			:4px;
	padding-left			:10px;
	padding-right			:10px;
	background-color		:#b2ada1;
	color 					:#FFF;
}
.whitebox {
	border-width 			:1px;
	border-style			:solid;
	border-color			:#f0f0e0;
	background-color		:#FFF;
	padding					:5px;
}
.yellowbox {
	border-width 			:1px;
	border-style			:solid;
	border-color			:#f0f0e0;
	background-color		:#fffaec;
	padding					:15px;
	padding-bottom			:5px;
	margin					:10px;		
}
.paperbox {
	border-width 			:1px;
	border-style			:solid;
	border-color			:#f0f0e0;
	background-image		:url('../images/old-paper.png');
	padding					:5px;
}
.picbox {
	width 					:200px;
	height					:165px;
	text-align				:center;
	background-color		:#fffaec;
}
.picbox1 {
	width 					:200px;
	text-align				:center;
	background-color		:#fffaec;
}
.pictitle {
	width 					:200px;
	height					:28px;
	text-align				:center;
	font-size 				:8pt;
}
.videobox {
	width 					:130px;
	height					:100px;
	text-align				:center;
	background-color		:#fffaec;
}
.videotitle {
	width 					:130px;
	height					:40px;
	text-align				:center;
	font-size 				:8pt;
	background-color		:#fffaec;
}
.pidtable {
	background-image:url('../images/gradient1.jpg');color:#fff;padding:4px;width:600px;
}
.pidtd0 {
	background-color		:#fffaec;
	text-align				:center;
}
.pidtd1 {
	padding:2px 0px 0px 20px;
}
.pidtd2 {
	text-align:right;width:120px;padding:6px 20px 0px 0px;
}

.pidtable a {text-decoration: none;color:#fff}
.pidtable a:link {text-decoration: none;color:#fff}
.pidtable a:hover{
	background-color	:#888;
	color:#FFF;
	text-decoration: none;
	}
.map_icons32{
    border-radius:5px; /* Валидное свойство CSS 3 скругление углов, значение(цифра) задаёт радиус скругления*/
    -webkit-border-radius:5px; /* Safari, Chrome */
    /* -moz-border-radius:5px; /* Firefox */
	border: 1px solid #cac8c3;
	background : url('../images/map_icons32.jpg') no-repeat;
	width: 32px;
	height: 32px;
}

.map_icons{
	border: 1px solid #cac8c3;
	background : url('../images/map_icons.jpg') no-repeat;
	width: 24px;
	height: 24px;
	margin:1px 5px 1px 0px;
}

.map_icons12{
	float:left;
	border: 1px solid #cac8c3;
	background : url('../images/map_icons.jpg') no-repeat;
	width: 12px;
	height: 12px;
	margin:1px 3px 1px 0px;
}

.marker_icons{
	border:2px solid white;
	border-radius: 4px;
	background : url('../images/map_icons.jpg') no-repeat;
	width:16px;
	height:16px;
}

.map_title_small{
	top:7px;
	left:10px;
	position:absolute;
	z-index:800;
	background:#fffaec;
	font-family: 'Century Gothic Regular';
	font-weight:bold;
	border:1px solid #888;
	padding:2px 5px 2px 5px;
	border-radius:4px; /* Валидное свойство CSS 3 скругление углов, значение(цифра) задаёт радиус скругления*/
    -webkit-border-radius:4px; /* Safari, Chrome */
    /* -moz-border-radius:4px; /* Firefox */
    box-shadow: 3px 3px 3px 0px #888; /* Валидное свойство CSS 3 тень*/
    -webkit-box-shadow: 3px 3px 3px 0px #888; /* Safari, Chrome */
    /* -moz-box-shadow: 3px 3px 3px 0px #888; /* Firefox */
	}
.main_panels{
	position	:absolute;
	/*padding		: 5px; */
	background	:#fffaec;
}
/* users */
.users{
	font-size:80px;
	font-weight:bold;
	color:#423024;
	width:290px;
	height:190px;
	background:url('../images/users.jpg') no-repeat;
}
.logo {
	margin: 0px 30px;
	border: 0px;
}
.menu{
	padding-left:10px;
}
.coord{
	color:#0f0;background-color:#3a2823;font-size:1.0em;border:0;
}
.header_div{
	top:0px;
	left:0px;
	width:100%;
/*	min-width:1140px; */
	position:absolute;
	background-color:#3a2823;
	text-align:left;
	padding-top:0px;
/*	overflow:hidden */;
}
.div_inner{ /* infowindows */
	width:97%;
	padding-top:0px;
	overflow:auto;	
}
#extra_header{
	left:0px;
	width:100%;
	position:absolute;
	background-color:#3a2823;
	text-align:left;
	padding-top:0px;
	height:0px;
	overflow:hidden;
	z-index:5;
	border-bottom:1px solid #aaa;
	z-index:9999;
}
.strips_div1{
	width:90px;
	height:112px;
	background-color:var(--rgb14);
	float:left;
	margin:6px;
	font-size:8px;
/*	font-weight:bold; */
	line-height:10px;
	overflow:hidden;
}
.strips_div1_f4{
	width:140px;
	height:140px;
	background-color:var(--rgb14);
	float:left;
	margin:6px;
	font-size:9px;
	line-height:9px;
	overflow:hidden;
}

.strips_div2{
	height:80px;
	overflow:hidden;
	text-align:center;
	background-color:var(--rgb14);
	}
.strips_img{
	width:90px;height:80px;
}

.strips_img1{
	width:90px;
	height:80px;
	margin-top:-12px;
}

.strips_img1_f4{
	width:140px;
	height:104px;
	margin:-12px 0 3px 0;
}

.strips_div3{
	width:90px;
	height:112px;
	background-color:var(--rgb14);
	float:left;
	margin:6px;
	font-size:8px;
	font-weight:bold;
	line-height:10px;
	overflow:hidden;
}
.strips_div4{
	position:relative;
	top:-12px;
	}
.strip_div1{
	width:150px;
	height:174px;
	background:var(--rgb14);
	float:left;
	margin:4px;
	font-size:11px;
	font-weight:bold;
	line-height:11px;
	overflow:hidden;
}
.strip_div2{
	display:flex;
    justify-content: center; 
    align-items: flex-end; 
	width:150px;
	height:150px;
	overflow:hidden;
	text-align:center;
	background-color:var(--rgb14);
	}
.strip_div3{	
	width:150px;
	height:190px;
	background:var(--rgb14);
	float:left;
	margin:4px;
	font-size:11px;
	font-weight:bold;
	line-height:11px;
	overflow:hidden;
}	
.strip_img{
	width:auto;
	height:150px;
	min-width:150px;
	border:0;
}

.div_150_150{
    display:flex;
    justify-content: center; 
    align-items: center; 
    width: 150px; 
    height: 150px;
    overflow: hidden;
}

.div_150_32{
    display:flex;
    justify-content: center; 
    align-items: center; 
    width: 150px; 
    height: 32px;
    overflow: hidden;
}

.div_154_186{
	width:150px;
	height:186px;
	padding:8px 2px 2px 2px;
	font-size:10px;
	line-height:10px;
	overflow:hidden;
	background: #f3eedd;
	border:2px solid white;
	box-shadow: 5px 5px 5px grey;
}

.stripf_div2{
	height:310px;
	overflow:hidden;
	text-align:center;
	background-color:var(--rgb14);
	}
.stripf_div3{
	width:310px;
	height:400px;
	background:var(--rgb14);
	float:left;
	margin:4px;
	font-size:24px;
	font-weight:bold;
	line-height:24px;
	overflow:hidden;
}	
.stripf_img{
	width:auto;
	height:310px;
	min-width:310px;
	border:0;
}
.stripf_title1{
	padding:3px 0px 0px 5px;
}
.strip_title1{
	display:flex;
    justify-content: center; 
    align-items: flex-start; 
	padding:3px 0px 0px 5px;
}
.strips_title1{
	padding:3px 0px 0px 5px;
}
.strip_title{
	padding:0 2px 2px 2px;
}
.strip{
	min-height:350px;
	min-width:520px;
	padding-bottom:5px;
}
.strip_inner{
	padding-bottom:3px;
	min-height:300px;
	min-width:500px;
	overflow:auto;
}
.strip_footer_left{
	float:left;
	text-align:left;
	background:#f3eedd;
	width:30%;
}
.strip_footer_right{
	float:left;
	text-align:right;
	background:#f3eedd;
	width:70%;
}
.forum_tooltip{
	background: #fffaec;
	white-space: normal;
	font-weight : bold;
}
/* locations list*/
.location_list{
	position:fixed;
	bottom:0px;
	left: 0;
	width: 100%;
	background:#3a2823;
	z-index:9999;
	font:7pt verdana,sans-serif bold;
	padding:0 0 2px 0;
}
.city_0{
	padding:0 5px 0 5px;
	font-weight:bold;
}
.city_1{
	float:left;
	padding:0 5px 0 5px;
}
.city_2{
	width:225px;
	height:16x; 
}
.city_1m{
	float:left;
	padding:0 5px 0 5px;
}
.city_2m{
	width:250px;
	height:36px;
}
.city_3{
	padding:4px 24px 4px 24px;
	max-height:20px;
}
.copyright{
	background:#ddd2ce;
	color:#3a2823;
	padding:0 10px 2px 10px;
	margin-bottom:0px;
	border-radius:4px; 
    -webkit-border-radius:4px; 
    box-shadow: 0px 0px 3px 0px #ddd2ce; 
    -webkit-box-shadow: 0px 0px 3px 0px #ddd2ce; 
}
.h_guide{
	top:50%;
	left:0px;
	width:100%;
	z-index:800;
	position:absolute;
}
.v_guide{
	top:0px;
	left:50%;
	height:100%;
	z-index:800;
	position:absolute;
}
.guides_border{
	top:50%;
	left:0px;
	height:4px;
	width:40px;
	margin-top:-2px;
	z-index:801;
	position:absolute;
	border:1px solid red;
}
.g_color{
	height:4px;
	width:10px;
	z-index:802;
	float:left;
}
.expand_cat1{
	clear:left;margin:5px 0 5px 0;color:#423024;padding:15px 6px 0 20px;
}
.expand_cat2{
	margin:-3px 0 5px 0;color:#423024;padding:5px 6px 5px 20px;
}
.cat_level0{
	padding-left:0px;
	width:275px;
	font-weight:bold;
}
.cat_level1{
	padding-left:0px;
	width:255px;
	font-weight:bold;
}
.cat_level2{
	padding-left:20px;
	width:235px;
}
.cat_level3{
	padding-left:40px;
	width:215px;
}
.cat_level4{
	padding-left:60px;
	width:195px;
}

.cat_levelm0{
	padding-left:0px;
	width:275px;
	font-weight:bold;
}
.cat_levelm1{
	padding-left:0px;
	width:251px;
	font-weight:bold;
}
.cat_levelm2{
	padding-left:24px;
	width:227px;
}
.cat_levelm3{
	padding-left:48px;
	width:203px;
}
.cat_levelm4{
	padding-left:72px;
	width:179px;
}
.map_list_row{
	padding:0 0 2px 10px;
}
.map_list_rowm{
	padding:0 0 2px 10px;
	height:32px;
}
.map_list_z{
    float:left;
	padding:0 10px 0 0;
	width:25px;
	text-align:right;
}
.w_div{
    clear:left;
	padding:5px 0px 5px 5px;
	width:100%;
}

.map_name_with_icon{
	float:left;
	width:280px;
	color: var(--rgb1);
	border-top:1px solid #cac8c3;
	overflow:hidden;
	padding-left:10px;height:24px;
	line-height:24px;
	}

.map_name_with_icon a{
	text-decoration:none;
	}

.map_name_with_icon :hover{
	background-color	:#888;
	color:#FFF;
	font-weight:bold;
	}

.kw {
	background-color	:#ede6e4;
	color:#000;
	margin-left: 5px;
	text-decoration: none;
	padding: 0 4px 0 4px;
	border-radius:4px;
}

/* svg fonts color filters https://codepen.io/sosuke/pen/Pjoqqp */
.filter-white{
	filter: invert(100%) sepia(1%) saturate(7500%) hue-rotate(327deg) brightness(102%) contrast(113%);
}
.filter-lightgray{
	filter: invert(75%) sepia(10%) saturate(0%) hue-rotate(267deg) brightness(102%) contrast(83%);
}
.filter-gray{
	filter: invert(52%) sepia(0%) saturate(6021%) hue-rotate(76deg) brightness(95%) contrast(93%);
}
.filter-green{
	filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}
.filter-brown{
	filter: invert(10%) sepia(6%) saturate(5486%) hue-rotate(325deg) brightness(85%) contrast(80%);
}

.control_icon {
	background:#f3eedd;
	width: 26px;
	height: 26px;
	text-align: center;
	border: 1px solid gray;
	z-index: 802;	
}

.control_icon1 {
	background:#8a7873;
	color:white;
	font-weight:bold;
	width: 27px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	border: 1px solid white;
}

.column1 {
  width: 560px;
}

.column2 {
  width: 560px;
}

@media screen and (max-width: 700px) {
	.column1,.column2 {
	  width: 100%;
	}	
}
/* https://www.smashingmagazine.com/2021/09/simplifying-form-styles-accent-color/
Changes color of input fields
*/
:root {
  accent-color: var(--rgb1);
}
/********** Range Input Styles ********* https://www.smashingmagazine.com/2021/12/create-custom-range-input-consistent-browsers */
/*Range Reset*/
input[type="range"] {
   -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 15rem;
}
 
/* Removes default focus */
input[type="range"]:focus {
  outline: none;
}

/***** Chrome, Safari, Opera and Edge Chromium styles - desktop *****/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
	background-color: var(--rgb9);
	border-radius: 0.2rem;
	height: 0.2rem;
	margin-top: 4px;
	margin-bottom: 4px;
}
/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
   appearance: none;
   margin-top: -3px; /* Centers thumb on the track */
   /*custom styles*/
   background-color: var(--rgb4);
   height: 8px;
   width: 8px;
}

/******** Firefox styles ********/
/* slider track */
input[type="range"]::-moz-range-track {
   background-color: var(--rgb9);
   border-radius: 0.2rem;
   height: 0.2rem;
}
/* slider thumb */
input[type="range"]::-moz-range-thumb {
   border: none; /*Removes extra border that FF applies*/
   border-radius: 0; /*Removes default border-radius that FF applies*/
   /*custom styles*/
   background-color: var(--rgb1);
   height: 8px;
   width: 8px;
}

@media screen and (max-width: 700px) {
	/***** Chrome, Safari, Opera and Edge Chromium styles *****/
	/* slider track */
	input[type="range"]::-webkit-slider-runnable-track {
	   border-radius: 0.2rem;
	   height: 0.2rem;
		margin-top: 6px;
	}
	/* slider thumb */
	input[type="range"]::-webkit-slider-thumb {
	  -webkit-appearance: none; /* Override default look */
	   appearance: none;
	   margin-top: -6px; /* Centers thumb on the track */
	   height: 1rem;
	   width: 1.2rem;
	}
	/******** Firefox styles ********/
	/* slider track */
	input[type="range"]::-moz-range-track {
	   border-radius: 0.2rem;
	   height: 0.2rem;
	}
	/* slider thumb */
	input[type="range"]::-moz-range-thumb {
	   height: 1rem;
	   width: 1.2rem;
	}
}

input[class="time_machine"] {
   -webkit-appearance: none;
    appearance: none;
    background: transparent;
	opacity:0.7;
    cursor: pointer;
    width: 15rem;
}
 
/* Removes default focus */
input[class="time_machine"]:focus {
  outline: none;
}

/***** Chrome, Safari, Opera and Edge Chromium styles - desktop *****/
/* slider track */
input[class="time_machine"]::-webkit-slider-runnable-track {
	background-color: var(--rgb15);
	border: 1px solid var(--rgb1);
	height: 4px;
	margin-top: 4px;
	margin-bottom: 4px;
}
/* slider thumb */
input[class="time_machine"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
   appearance: none;
   margin-top: -5px; /* Centers thumb on the track */
   /*custom styles*/
	border: 1px solid var(--rgb1);
	background-color: var(--rgb13);
	height: 12px;
	width: 20px;
}

/******** Firefox styles ********/
/* slider track */
input[class="time_machine"]::-moz-range-track {
	background-color: var(--rgb15);
	border: 1px solid var(--rgb1);
   height: 2px;
}
/* slider thumb */
input[class="time_machine"]::-moz-range-thumb {
   /*border: none; Removes extra border that FF applies*/
   border-radius: 0; /*Removes default border-radius that FF applies*/
   /*custom styles*/
	border: 1px solid var(--rgb1);
	background-color: var(--rgb13);
   height: 12px;
   width: 20px;
}

input[type="checkbox"] {
	accent-color:  var(--rgb1);
}

.draw_mode_icon {
	width:24px;
	height:24px;
	float:left;
	display:flex;
    justify-content: center; 
    align-items: center;
}

.draw_mode_icon img {
	width:16px;
	height:16px;
	/* filter-gray */
	filter: invert(52%) sepia(0%) saturate(6021%) hue-rotate(76deg) brightness(95%) contrast(93%);
}

@media screen and (max-width: 700px) {
	.draw_mode_icon {
		width:36px;
		height:36px;
		margin-right:6px;
		float:left;
		display:flex;
		justify-content: center; 
		align-items: center;
	}
	.draw_mode_icon img {
		width:22px;
		height:22px;
		/* filter-gray */
		filter: invert(52%) sepia(0%) saturate(6021%) hue-rotate(76deg) brightness(95%) contrast(93%);
	}	
}

.inactive img {
	opacity:0.3;
}

.active img {
	opacity:1;
}

.d_marker {
	-webkit-mask-size: cover;
	mask-size: cover;
	-webkit-mask-image: url(../images/fa_fonts/fa-map-marker-alt.svg);
	mask-image: url(../images/fa_fonts/fa-map-marker-alt.svg);
	width: 16px;
	height: 16px;
	background-color:#f00;
}

.button {
	height:16px;
	width:auto;
	min-width:40px;
	border-radius:3px;
	background: var(--rgb11);
	float:left;
	font-size:10px;
	padding:3px;
	margin-right:10px;
	display:flex;
	justify-content: center; 
	align-items: center;
}
@media screen and (max-width: 700px) {
	.button {
		height:24px;
	}
}

.colorpicker {
	float:left;
	height:15px;
	width:15px;
	border-radius:3px;
	border-right:1px solid white;
	border-bottom:1px solid white;
	margin:1px;
}

.weightpicker {
	margin:0 0 8px 0;
	width:100%;
	background:lightgray;
	border-radius:8px;
}

@media screen and (max-width: 700px) {
	.colorpicker {
		height:24px;
		width:24px;
		border-radius:6px;
		margin:6px 5px 6px 5px;
	}
	.weightpicker {
		margin:0 16px 0 0;
		height:100%;
		background:lightgray;
		border-radius:8px;
		transform:rotate(30deg);
	}	
}

.tooltip {
	position:absolute;
	height:auto;
	width:auto;
	max-width:120px;
	text-align:center;
	margin-left:15px;
	margin-top:-12px;
	padding:5px;
	background:black;
	color:white;
	border-radius:10px;
	opacity:0.5;
	z-index:650;
	display:flex;
	justify-content:center;
	align-items: center;	
}

.mapster_popup .leaflet-popup-tip,
.mapster_popup .leaflet-popup-content-wrapper {
	height:auto;
	width:auto;
	max-width:240px;
	text-align:center;
	background:var(--rgb13);
	color:var(--rgb1);
	border-radius:5px;
	justify-content:center;
	align-items: center;
	font-size:0.8em;
	font-family: 'Century Gothic Regular';
}

.mapster_popup .leaflet-popup-content {
	margin: 0px;
}

.file_name {
	height:16px;
	width:auto;
	min-width:60px;
	border-radius:3px;
	background: var(--rgb11);
	float:left;
	font-size:10px;
	padding:3px;
	margin:1px 5px 1px 5px;
	display:flex;
	justify-content: center; 
	align-items: center;
}

.on {
	border:1px solid lightgrey;
	box-shadow: 0px 0px 2px 2px lightgrey;
}