@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:relative;
	left:0px;
	top:0px; 
	width:800px;
	height:552px; 
	
	/* The user-select 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;
}

/* Container for the entire map */
.CM_MapContainer_Resizable {
	position:absolute;
	left:0px;
	top:0px; 
	bottom:0px;
	right:0px; 
	
	/* The user-select 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:50px; 
	top:0px; /* change to 0 to put the tool container at the top of the map container */
	right:0px;
	height:50px; 
}

/* Class for individual tools, those not in a group */
.CM_Tool
{
	background-color:red;
	
	border:solid 1px;
	border-color:#666;
	border-radius:3px;
	box-shadow: 1px 1px 5px #333333;
	
	width: 30px;
	height: 30px;
	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: 30px;
	height: 30px;
	float: left;
	padding: 3px;
}
.CM_ToolInGroup_Selected
{
	background-color:#d0d0d0;
	border-color:#666;
	
	vertical-align: middle;

	width: 30px;
	height: 30px;
	float: left;
	padding: 3px;
}

/* Class for the images (or icon) within the tool DIV */
.CMTool_Image
{
	background-color:none;
}
.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:50px;
	top:50px; /* change this to move the top of the map up or down */
	right:1px; /* 1 is required to see the border on the right */
	bottom:50px;
}

/* Class for the div that contains the Canvas with the map data when the controls are inside the map rather than around the outside */
.CM_CanvasContainerWithoutPanels
{
	border:solid 1px;
	border-color:#cccccc;
	
	position:absolute;
	left:0px;
	top:0px; /* change this to move the top of the map up or down */
	right:0px;
	bottom:0px;
}

/* 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:50px;
	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(239,239,239,0.9);
    padding: 2px 2px;
	z-index:99;
	overflow: auto;
	
	position:absolute;
	left:50px;
	width:500px;
	top:50px; /* offset from the top of the tab panel (tabs) to where the content starts */
	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;
	
	position:absolute;
	top: 0px; 
	left: 0px; /* overriden by JavaScript when list is created */
	width: 16px;
	height: 16px;
}

.CM_LayerListItemClass_Selected {
	background-color: none;
	border-color:#000000;
	border-width:1px;
	border-style:solid;
	
	position:absolute;
	top: 0px; 
	left: 0px; /* overriden by JavaScript when list is created */
	width: 16px;
	height: 16px;
}
/*
* The styles below create the hierarchical menu for the layer list
* Floats and in-line where attempted but did not keep the elements
* properly aligned and spaced out on each browse so absolute positioning
* was used
*/
/* The open/close box next to the layer list item if it has chilren 
* Use the margin to move the position of the open/close box */
.CM_LayerListOpenCloseBoxClass {
	background-color: none;
	margin: 8px 0px 0px 0px; /* top, right, bottom, left */
	border:1px solid black;
	
	position:absolute;
	top: 0px; 
	left: 0px; /* overriden by JavaScript when list is created */
	width: 16px;
	height: 16px;
}

/* The checkbox next to the layer list item */
.CM_LayerListCheckBoxClass {
	background-color: none;
	margin: 4px 4px 0px 2px; /* top, right, bottom, left */
	
	position:absolute;
	top: 2px;
	left: 0px; /* overriden by JavaScript when list is created */
	width: 20px;
	height: 22px;
}

.CM_LayerListIconClass {
	background-color: none;
	margin: 8px 0px 0px 0px; /* top, right, bottom, left */
	border:0px solid black;

	position:absolute;
	top: 0px; 
	left: 0px; /* overriden by JavaScript when list is created */
	width: 18px;
	height: 18px;
}
/* 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: 4px;
	
	/* added to have text expand the layer list */
	width:auto;
	white-space:nowrap;
	
	position:absolute;
	top: 0px; 
	left: 0px; /* overriden by JavaScript when list is created */
	width: 200px;
	height: 16px;
}
/* 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;
}

/* sets the styles for the elements inside the layer list popup */
.CM_LayerListPopupMenuItem {
	cursor:pointer;
	padding: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 {
	background-color: none;
	margin: 6px 4px 0px 2px; /* top, right, bottom, left */
	
	position:absolute;
	top: 2px;
	left: 0px; /* overriden by JavaScript when list is created */
	width: 16px;
	height: 16px;
}
/* Class for the name in the layer list item */
.CM_BackgroundListNameClass {
	font-family:Arial, sans-serif;
	font-size:15px;
	
	color: #000000;
	background-color: none;
	margin-top: 7px;
	margin-left: 4px;
	
	/* added to have text expand the layer list */
	width:auto;
	white-space:nowrap;
	
	position:absolute;
	top: 0px; 
	left: 0px; /* overriden by JavaScript when list is created */
	width: 200px;
	height: 16px;
}

/************************************************************************
* 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:50px;
	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 #000000;
	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 #000000;
	border-top:solid #000000;
}

/* 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;
}

/************************************************************************
* 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; 
}