<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";
/*
* These are styles for the elements of a CanvasMap.
* Change these as you desire to change the appearance of the elements in the CanvasMap
*
* The styles are named for the elements that they are used with.  The names are just
* "CamelCase" here (upper and lower case) where they are all capitols in the CanvasMap.js file.
* There is a full list of these elements in the referece.
*
* CSS originally by Chris Muhl, maintained by Jim Graham
*/

/************************************************************************
* Classes for the map container, header, tool bar, and map
************************************************************************/

/* Container for the entire map */
.CM_MapContainer {
	position:absolute;
	left:0px;
	top:0px; 
	bottom:0px;
	right:0px; 
	
	/* The .noselect css styles are used to prevent selectable text within the CM_MapContainer */
 
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/************************************************************************
* Clases for tools
************************************************************************/

/* The class for the tools above the map */
.CM_ToolContainer
{
    border: 1px solid #ccc;
    background-color: #efefef;
	
	position:absolute;
	left:60px; 
	top:0px; /* change to 0 to put the tool container at the top of the map container */
	right:0px;
	height:36px; 
}

/* Class for the tools */
.CM_Tool
{
	background-color:none;
	
	border:solid 1px;
	border-color:#666;
	border-radius:3px;
	box-shadow: 1px 1px 5px #333333;
	
	width: 24px;
	height: 24px;
	float: left;
	margin: 4px
}
/** This is for the group table for the tool groups */
.CM_ToolGroup
{
	background-color:none;
	
	border:solid 1px;
	border-color:#666;
	border-radius:3px;
	box-shadow: 1px 1px 5px #333333;
	
	float: left;
	margin: 4px
}
/* Style for a tool in a group table */
.CM_ToolInGroup
{
	background-color:none;
	
	border-color:#666;
	
	vertical-align: middle;

	width: 24px;
	height: 24px;
	float: left;
}


/* Class for the images within the tool DIV */
.CMTool_Image
{
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=45)"; 
	filter:alpha(opacity=45);
	display: block;
    margin: auto;
	vertical-align: middle; /* does not work */
}
.CMTool_Image:hover
{
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter:alpha(opacity=100);
}
 
.CMTool_Image
{
  opacity: 1.0;
}
 
.CMTool_Image:hover
{
  cursor:pointer;
  opacity: 0.75;
}

/************************************************************************
* Styles for the canvas object and its container
************************************************************************/

/* Class for the div that contains the Canvas with the map data */
.CM_CanvasContainer
{
	border:solid 1px;
	border-color:#cccccc;
	
	position:absolute;
	left:60px;
	top:36px; /* change this to move the top of the map up or down */
	right:0px;
	bottom:52px;
}

/* Class for the HTML Canvas element that contains the map data */
.CM_Canvas
{
	position:absolute;
	left:0px;
	top:0px;
}

/* Class for the HTML Canvas element that contains the north arrow */
.CM_NorthArrow
{
	position:absolute;
	left:20px;
	top:20px;
	width:200px;
	height:200px;
	pointer-events: none;
}

/* Class for the HTML Canvas element that contains the scale bar */
.CM_ScaleBar
{
	position:absolute;
	left:20px;
	bottom:20px;
	width:200px;
	height:40px;
	pointer-events: none;
	border:black 1px solid;
   	background-color: #f8f8f8;
	border-radius: 5px;
}

/************************************************************************
* Classes for the Layers, Background, and Search tabs 
* This is implemented as an unordered list.
************************************************************************/
.CM_PanelButtons
{
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #efefef;
	
	position:absolute;
	left:0px;
	top:0px;
	width:60px;
	bottom:0px;
}
.CM_PanelButtons button {
    /*background-color: inherit;*/
    float: left;
    outline: none;
    cursor: pointer;
    padding: 2px 2px;
    transition: 0.3s;
    font-size: 14px;
	
	background-color:none;
	
	border:solid 1px;
	border-color:#666;
	border-radius:3px;
	box-shadow: 1px 1px 5px #333333;
	
	width: 38px;
	height: 38px;
	float: left;
	margin: 4px
}
/* Change background color of buttons on hover */
.CM_PanelButtons button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.CM_PanelButtons button.active {
    background-color: #ccc;
}
/* This is the content that is displayed to the right of the button */
.CM_ButtonContent {
 	font-family:Arial, sans-serif;
	font-size:14px;
	background-color: rgba(255,255,255,0.9);
    padding: 2px 2px;
	z-index:99;
	
	position:absolute;
	left:60px;
	width:300px;
	top:0px; /* offset from the top of the tab panel (tabs) to where the content starts */
	bottom:0px;
}
/************************************************************************
* Classes for tab panels used by the CMPanelAttributes, CMPanelTime
************************************************************************/

.CM_HorizontalTabContainer {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #efefef;
	
	left:0px;
	top:0px;
	right:0px;
	height:200px;
}
/* Container with all tabs */
.CM_Tabs {
    overflow: hidden;
    border-bottom: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.CM_Tabs button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 6px 8px;
    transition: 0.3s;
    font-size: 14px;
}

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

/* Create an active/current tablink class */
.CM_Tabs button.active {
    background-color: #ccc;
}

/* Style the tab content */
.CM_TabContent {
 	font-family:Arial, sans-serif;
	font-size:14px;
	
    padding: 4px 6px;
    border-top: none;
	
	position:absolute;
	left:0px;
	top:30px; /* offset from the top of the tab panel (tabs) to where the content starts */
	right:0px;
	bottom:0px;
}

/************************************************************************
* These classes are used internally to the LayerList
************************************************************************/

/* The item in the list containing the layer checkbox, icon, and name */
.CM_LayerListItemClass {
	background-color: none;
}

.CM_LayerListItemClass_Selected {
	background-color: none;
	border-color:#000000;
	border-width:1px;
	border-style:solid;
}

/* The popup menu for the layer list item (this is the entire popup which contains items) */
.CM_LayerPopupMenu {
	border:1px solid #000000;
	background:#000000;
	z-index:9001;
}

/* Class for the name in the layer list item */
.CM_LayerListNameClass {
	font-family:Arial, sans-serif;
	font-size:15px;
	
	color: #000000;
	background-color: none;
	margin-top: 7px;
	margin-left: 3px;
	
	/* added to have text expand the layer list */
	width:auto;
	white-space:nowrap;
}

/* The checkbox next to the layer list item */
.CM_LayerListCheckBoxClass {
	background-color: none;
	margin: 10px 4px 0px 0px; /* top, right, bottom, left */
	height: 18px;
}

.CM_LayerListIconClass {
	background-color: none;
	margin: 12px 0px 0px 3px; /* top, right, bottom, left */
	border:1px solid black;
	background-color"rgba(0,0,0,0);
}

/* sets the styles for the elements inside the layer list popup */
.CM_LayerListPopupMenuItem {
	cursor:pointer;
	padding:0px 0px 0px 7px;
	color: #FFF;
	background-color:#000000;
	opacity:1;
	box-shadow: 1px 1px 5px #999999;
	border-radius: 3px;
}
/************************************************************************
* These classes are used internally to the Background layer list
************************************************************************/

.CM_BackgroundListRadioButtonClass {
	width:20%;
}
/************************************************************************
* Classes for the search controls in the search tab content
************************************************************************/

/* The button on the search div */
.CM_SearchButton {
	margin:4px;
}

/* The style for the search results divs */
.CM_SearchResult {
	background:#ffffff;
	color:#000000;
}

/* The style for the selected element in the search results */
.CM_SearchResultSelected {
	background:#000000;
	color:#ffffff;
}
/************************************************************************
* Classes for the map footer
************************************************************************/

/* Class for footer containing the credits, projection, etc. */
.CM_MapFooter {
	font-family:Arial, sans-serif;
	font-size:14px;
	
	border:1px solid #CCCCCC;
	background:#efefef; 
	margin:0px 0px 0px 0px;
	border-Radius:0px;
	overflow:auto;
	
	position:absolute;
	left:60px;
	bottom:0px;
	right:0px;
	height:50px;
}

/* Class for credits in the footer */
.CM_Credits {
	textAlign:right;
	marginRight:5px; 
	float:right;
}

/************************************************************************
* These classes are used for the info box     
* The position of the box and it's padding are set by the JavaScript code
* to make the dimensions of the box fit the info div and arrow
************************************************************************/

/* position (left, top or bottom) set by JavaScript so it can be positioned where the mouse was clicked */
/* style for the box within the popup info window */
.CM_InfoBox {
	background:#000000;
	color:#FFFFFF;
	border:1px solid #cccccc;
	opacity:0.8;
	z-index:99;
	border-radius:5px 5px 5px 5px;
}
/* Arrow pointing to the feature at the top or bottom of the info box */
/* Not used with the image triangle */
.CM_InfoArrow {
	display:block;
	opacity:0.9;
	
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	
	position:absolute;
	border-bottom:solid #cccccc;
	border-top:solid #cccccc;
}

/* New info box driven by CSS */
/* style for the box within the popup info window */
.CM_InfoContainer {
	position:absolute;
	width:320px; /* width of info plus the padding on each side */
	
	background:#000000;
	color:#FFFFFF;
	/*border:1px solid #00ff00;*/
	opacity:1;
	z-index:98;
}
/* style for the box within the popup info window */
.CM_InfoBoxBelowTriangle {
	position:absolute;
	top:10px; /* this must be the same as the height of the triangle */
	left:0px;
	width:300px;
	
	padding:10px;
	background:#000000;
	color:#FFFFFF;
	border:1px solid #cccccc;
	opacity:0.9;
	border-radius:8px;
	z-index:99;
}
.CM_InfoBoxAboveTriangle {
	position:absolute;
	bottom:7px; /* this must be the same as the height of the triangle */
	left:0px;
	width:300px;
	
	padding:10px;
	background:#000000;
	color:#FFFFFF;
	border:1px solid #cccccc;
	opacity:0.9;
	border-radius:8px;
	z-index:99;
}
/* arrow at the top left */
.CM_InfoArrowNE {
	position:absolute;
	right:10px;
	top:-3px; /* not sure why this is needed */
	z-index:999;
}
/* arrow at the top left */
.CM_InfoArrowNW {
	position:absolute;
	left:10px;
	top:-3px;
	z-index:999;
}
.CM_InfoArrowSE {
	position:absolute;
	right:10px;
	bottom:3px;
	height:10px; /* required to have the triangle position correctly */
	z-index:999;
}
/* arrow at the top left */
.CM_InfoArrowSW {
	position:absolute;
	left:10px;
	bottom:3px;
	height:10px;
	z-index:999;
}

/************************************************************************
* These classes are used for the dialog box (jjg - this will be removed eventually)
************************************************************************/

.CM_SettingsDialog {
	background-color:#333;
	border: 1px solid #C6C6C6;
	z-index: 100;
	box-shadow: 1px 1px 3px #555555;
	color: #FFFFFF;
	border-radius: 5px;
}

/* for the settings panels in the dialog box and going away */
.CM_SettingsPanel {
	border-top: 1px solid #C6C6C6;
}

.CM_SettingsDialogTab
{
	background-color:#cccccc;
	border: 1px solid #ffffff;
	color: #000000;
	border-radius: 5px 5px 0px 0px;

	display: inline;
	list-style-type: none;
	padding: 4px 10px 4px 10px; // top, right,bottom,left
}
.CM_SettingsDialogTab_Selected
{
	background-color:#000000;
	border: 1px solid #ffffff;
	color: #ffffff;
	border-radius: 5px 5px 0px 0px;

	display: inline;
	list-style-type: none;
	padding: 4px 10px 4px 10px; // top, right,bottom,left
}
/************************************************************************
* The following .opacity styles create a fade effect on "mouseover" 
* for elements that have the style applied to them. They are used with buttons created with images. 
************************************************************************/

/* 
* The .noselect class is used to prevent selectable text within 
* the element the class is applied to 
*/
 .noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
 .CM_DraggingDivClass {
	border: 2px solid black;
	z-index: 9001; 
}
</pre></body></html>