/* Cursor styles: 
table {cursor: default;}
[type="button"], button, #MenuJPG {cursor: pointer;}
*/
/* Font styles: */
body, button, input, select, textarea, #Stats, #StatsClose 		
			{ font-family: arial, helvetica; font-size: 10pt; } 
#GPXText, #ProfileDiv, #ProDiv
			{ font-family: courier, monospace; font-size: 10pt; white-space: pre; }
#ProButtons	{ white-space:normal; }
#SearchSpace,
#MapDiv		{ font-size:	12pt; }	
#OSData		{ font-size:	 5pt; }
.SmallFont	{ font-size:	 3pt; } 
.Zero		{ font-size:	 0; height: 0; }
#MapNo,
.ol-attribution{ font-size:	 7pt; }


/* Map table styles: */ 
.MapCorner	{ height: 25px; width : 25px; max-height: 25px; max-width: 25px; }
#NBar,#SBar	{ height: 20px; /* position:relative; */ }
.C			{ text-align: center; }
.L			{ text-align: left; }
.R,
#SE			{ text-align: right; }
#map		{ width : 75px; height: 75px; position:relative;} /* initial size */
#map:focus	{ outline: none; }
#ScaleDiv 	{ height:30px; width:50px; left:0; bottom:0; z-index:2; 
			  position:absolute; margin-left:7px; margin-bottom:10px; }
#ScaleCanvas{ position:relative; opacity: 0.6; background: white; }
.ScaleDiv 	{ pointer-events:none; }
#OSlogo 	{ height:24px; width:90px; left:0; bottom:0; z-index:20; 
			  position:absolute; margin-left:0; margin-bottom:0; pointer-events: none; 
			  display: none; }
#OScopyright{ right:0; bottom:0; z-index:20; padding: 0 4px; pointer-events: none;
			  font: 10px 'Source Sans Pro', Arial, sans-serif;
			  line-height: 16px; background: rgba(255, 255, 255, 0.7);
			  position:absolute; margin-left:0; margin-bottom:0; 
			  display: none; }
			   
#MapTable
{ 	background-color: #F4F4F4;
	border			: 1px solid black; 
	border-collapse	: collapse; 
	border-spacing	: 0; 
	padding			: 0; 	
}
#TopEdge	{ padding: 0; /* vertical-align: bottom; */ }	
#TopLeft,#TopRight,#MenuJPG { vertical-align: middle; }	

/* Panel styles: */
#Panel, #MapDiv 
{	padding		: 0;
	overflow	: hidden;
	position 	: absolute; 
	white-space	: nowrap;
} 	
#CommentInput	{ white-space: pre-wrap; } 

.LineSpace1 { height: 12px; font-size: 1pt; }
.LineSpace2 { height: 15px; font-size: 1pt; }
.LineSpace3 { height: 20px; font-size: 1pt; }

.Component	{ border: 0 solid white; padding: 0; } 	

/* Panel styles for PanPos=1,2,3,4 resp (Alternated in Resize.js): */
.PanelRightStyle{ top: 0; 	left: auto;	bottom: auto;	right: 0; 	 max-height: none;  max-width	: 240px; }
.PanelLeftStyle	{ top: 0;	left: 0; 	bottom: auto;	right: auto; max-height: none;  max-width	: 240px; }
.PanelTopStyle	{ top: 0;	left: 0; 	bottom: auto;	right: auto; max-height: 200px; max-width	: none; }
.PanelBotStyle	{ top:auto;	left: 0; 	bottom: 0;		right: auto; max-height: 200px; max-width	: none; }

/* MapDiv styles for PanPos=1,2,3,4 resp (Alternated in Resize.js) : */
.MapLeftStyle	{ top: 0;	left: 0;	bottom: auto;	right: auto; height: 100%; width : auto; }
.MapRightStyle	{ top: 0; 	left: auto;	bottom: auto;	right: 0; 	 height: 100%; width : auto; }
.MapBotStyle	{ top:auto;	left: 0; 	bottom: 0;		right: auto; height: auto; width : 100%; }
.MapTopStyle	{ top: 0;	left: 0; 	bottom: auto;	right: auto; height: auto; width : 100%; }

/* Panel component styles for PanPos=1,2,3,4 resp (Toggled in Resize.js) : */
.AbStyle		{ position : absolute; 	top	: 0;	left: 0; }
.StStyle		{ position : static; }

/* Panel item style: */
.RtAlign		{ text-align:  right; }
.InnerRtAlign 	{ padding-right: 8px; }
.PopUpRt		{ padding-right:16px; }

/* Button table TD style: */
#CommentTxT,
.ButtonTable	{ margin-top: 6px; 
				  margin-bottom: 6px; 
				}
#Stay,
#WPHeadDiv,
.ButtonTable td	{ text-align: center; }

#SCopy,
#SListTable,
#MoveWPtTable	{ margin-left: auto; 
				  margin-right:auto; 
				  -moz-user-select: none;
				  -webkit-user-select: none;
				  -ms-user-select: none;
				  user-select: none;
				  -webkit-touch-callout:none; 
				}
				
#MoveWPtTable 	{ text-align: center; } /* margin-left: 20px; */
#MoveWPtTable td{ padding: 10px; }

/* Remove extra dotted internal focus ring: */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner
{  border-style: none; padding: 0; }

select:-moz-focusring 
{  color: transparent; text-shadow: 0 0 0 #000; }

#StatsClose,
[type="button"], button
		{ height    : 23px;
		  border    : outset 2px #DDDDDD;
		  outline   : 1px none blue;
		  text-align: center;  
		}
#StatsClose,		
[type="button"], button /* :not(.IconTable button) */
		{ padding	: 1px 0; } /* top/bot & L/R padding round text */

.ButtonImg { width: 16px; height: 16px; }		
				
#GPXMenu, #RteTrkMenu
			{ height    : 23px; }
		
[type="button"]:focus, button:focus
			{ outline-style: solid; }
				
.ActiveBtn, [type="button"]:active, button:active
			{ border-style : inset;
			  transform    : translateX(1px) translateY(1px);
			  outline-style: solid;
			}

#MapTable td{ border: 1px solid black; }
#TopEdge td	{ border: none; }
.IconTable 	{ border: none; border-collapse: collapse; padding: 0; }
.IconTable td { border: none; padding: 0 1px 0 1px; }
.IconTable button { padding: 0; }


/* Style of input boxes, etc. */
#CommentInput, select, [type="text"], [type="checkbox"]
{	border	 	: 1px solid; 
	border-color: /* gray #DDDDDD #DDDDDD gray */
				  #888888 #DDDDDD #DDDDDD #888888; 
}		

.ScaleStyle	{ position:absolute; left:  30px; }
.IconsStyle	{ position:absolute; right: 32px; text-align: right; top: 3px; }
.NBarIcon   { } /* { padding: 0 8px 0 7px; display: inline-block; } */
#LayerIBtn  { position:relative; } 
#MapNo		{ display: inline-block; position:absolute; right: 1.5px; bottom: 0;} 
.Outline    { outline: 1px none blue; }	
.inLine		{ display: inline-table;  
			  padding: 4px 5px 4px 5px;  
			}
.GPXchBox	{ display: inline-table;
			  padding: 2px 2px 2px 2px;  
			}
			
.Centre	{ vertical-align: middle; display: flex; align-items:center; justify-content:center; margin: auto; height: 32px; }
[type="checkbox"] { vertical-align: middle; }

.ButtonTable table { border: 0; width: 100%; border-collapse: collapse; padding: 0; }

#GPXText, #ProfileDiv
			{ border: 0; padding: 0; }	

body, #GPXText, #ProfileDiv, .MenuDiv
			{ margin: 0; } 				
body 		{ overflow: hidden; /* cursor: pointer; */ } 	/* NoScrollbar */

/* Menu styles: */
.MenuDiv  { position: absolute; display: none; left: 0; z-index: 1610; } /* For submenu DIVs */
.MenuDiv /* Style of outer table edge */
{	border	 	: 1px solid; 
	border-color: white dimgray dimgray white;    /* #EEEEEE gray gray #EEEEEE; */
}

.MenuGroup /* Style of inner table edge */
{	border	 	: 1px solid; 
	border-color: dimgray white white dimgray; /* gray #EEEEEE #EEEEEE gray; */
}	

.MenuItem { width: 104px; /* height: 17px; */ } /* 100 is too small, 102 is enough. */
												/* 17px makes menu same height in FF as with no height set.*/
.MenuItem, 
.LoLight  { background-color:  #EEEEEE; color: black; }
.FindStyle:active,
.FindStyle:focus,
.FindStyle:hover, 
.HiLight  { background-color:  blue; color: white; } /* Toggled in Menus.js */
	  
/* Button Widths: */
#MenusDiv	button	{ width :  48px; } 
#Icons		button	{ width :  34px; }
#WPDiv 		button	{ width :  30px; }
#FindDiv	button	{ width :  40px; }
#StatsClose,
#GPXbuttons [type="button"]	{ width :  90px; }
#SearchList [type="button"] { width :  80px; } 
#ProButtons	[type="button"]	{ width :  75px; }
.ButtonDiv /* These divs contain buttons,chkboxes, selects, etc */
{	padding  : 4px 4px 4px 8px; 
	border-bottom       : solid;
	border-bottom-color : gray;
	border-bottom-width : 2px;
}
/* Input Widths: */
#GPXbuttons	select	{ width : 120px; }
#TXTbuttons	select 	{ width :  90px; }
#RouteDims input,
#WPInputs input,
#WPInputs select
			{ width : 90px; 
			  -moz-box-sizing:border-box;
			  -webkit-box-sizing:border-box;
			  box-sizing:border-box;
			}
#DefaultName	{ width :  70px; }
#CommentInput	{ width : 185px; resize : none;}
#MouseGRInput	{ width : 120px; }
#WayPtCount		{ width :  28px; height: 18px; text-align: center; vertical-align: middle; } 

/* Search, TrackInt and GPX window styles: */

#NBarTxtLenDiv
{   position	: absolute;
    visibility	: hidden;
    height		: auto;
    width		: auto;
    white-space	: nowrap; 
	font-size	: 12pt;
}

#Stats { width : auto; overflow-y:auto; }

#SearchList  
{ 	position : 	fixed; 
	display  : 	none;  
	top      :	50px; 
	left     :	100px;
	width    :	275px;
	height   :  auto;
	padding  :	0 0 5px 0; 
	border   :	1px solid black;
	background-color: white; 
	z-index  :	1606;
	opacity  : 	0.8;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter   :	alpha(opacity=80); 
}	
#SList
{	overflow-x : hidden; 
	overflow-y : auto;
	height     : auto;
	padding    : 5px 0 5px 5px;
}

.PopUp
{ 	position : 	fixed; 
	display  : 	none;  
	top      :	50px; 
	left     :	100px;
	width    :	160px;
	height   :  auto;
	padding  :	0 0 5px 0; 
	border   :	1px solid black;
	background-color: white; 
	z-index  :	1600; /* 1500 too small, 1600 works  */
}	
.PopUp,
.PopUp button,
.PopUp input { font-size: 12pt; }	
.PopUp center{ padding: 0 0 8pt 0; }
.PopUp [type="button"] { width : 80px; margin: 10px 0;}
.PopUp input[type="text"] 
			 { width: 50px; margin: 5px 32px 5px 0; } 
.PopUp input[type="checkbox"] 
			 { margin: 5px 32px 5px 0; } 
.PopUpButt 	 { text-align: center; }
.closeX		 { margin-left: 4px; }
.closeX:hover{ background-color: aliceblue; }
.closeX a:focus{ background-color: lightblue; }
.PopUpX		 { padding-right: 4px; padding-top: 2px;}
[type="radio"] { vertical-align: middle; }
.PopUp input { height: 2em; }

#FindBox	 { width : 135px; margin: 5px 12px 5px 12px; }
#NBarFind 	 { width: auto; min-width: 165px; }

#GPXDiv, #ProDiv
{	position :	absolute; 
	display  : 	none;  
	background-color: white; 
	border   :   0;
	width    :	100%; 
	z-index  :	5; 
}		

#GPXText
{	resize   : none;
	background-color: #FAFAFA; 
	padding-top  : 4px;
	padding-left : 4px;
	overflow : auto;
	width    : 100%; 
	height   : 200px;
}	

#ProfileDiv
{	resize   : none;
	background-color: white; 
	overflow : auto;
	width    : 100%; 
	height   : 200px;
}	

/* Tracking: */
#tracking
{ 	/* display  : 	none;  */
	width    :	auto;
	height   :  auto;
	margin-top: 5px;
}

#switchcontainer  /* box in which switch + labels are placed */
{	width	: 182px; 
	float	: right;
	border	: none; /* 1px solid black; */
}

.switch /* Outer edge of switch */
{	width	: 64px;
	height	: 32px; /* Button height for touch screens */
	background: grey;
	z-index	: 0;
	padding	: 0;
	appearance:none;
	border	: none;
/*	cursor	: pointer; */
	position: relative;
	border-radius:16px; /* = half height */
	left	: 85px;
}

.switchIn /* Inner edge and interior of switch */
{	content	: ' ';
	position: absolute;
	left	: 1px;
	top		: 1px;
	height	: 30px;
	width	: 62px;
	background: #EEEEEE; 
	z-index	: 1;
	border-radius:15px;
}

.circle /* White circle, on top of switch interior */
{	content	: ' ';
	position: absolute;
	left	: 2px;
	top		: 2px;
	height	: 28px;
	width	: 28px;
	background: white;
	z-index	: 2;
	border-radius:13px;
	box-shadow:0 1px 3px grey; /* makes RHS of circle stand out from background */
}
		
.circleOff{left: 2px;}  /* Update of horizontal position of white circle */
.circleOn {left:34px;}  /* Update of horizontal position of white circle */

.leftLabel  { float: left;  margin-right: 1em; margin-top: 7.5px; }
.rightLabel { float: right; margin-left: 1em; margin-top: 7.5px; }
.TrackLabel { float: left;  margin-top: 7.5px; } /* useless */