@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:500px;
	height:550px; 
	
	/* 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;
}
/* The class for the div containing the title */
.CM_MapHeader {
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;
	font-size:17px;
	background-color:#999;
	border-radius:0px 0px 0px 0px;
	
	position:absolute;
	left:0px;
	top:0px;
	width:500px;
	height:40px;
}
/************************************************************************
* Clases for tools
************************************************************************/

/* The class for the tools above the map */
.CM_ToolContainer
{
	background-color:#000;
	
	position:absolute;
	left:0px; 
	top:40px; /* change to 0 to put the tool container at the top of the map container */
	width:500px;
	height:30px; 
}

/* Class for the "Toolbar" text to the left of the tools */
.CM_ToolsTitle {
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;
	font-size:13px; 
	margin:8px 0px 0px 15px;
	padding:0px 0px 0px 0px;
	border-right:1px solid #999999;
	
	position:absolute;
	left:0px;
	top:0px;
	width:60px;
	height:15px;
}
/* Class for the "Info" tool (I-bar) */
.CM_ToolInfo
{
	background-color:none;
	
	position:absolute;
	left:85px;
	top:0px;
	width:20px;
	height:20px;
}
/* Class for the "Add" tool (not implemented) */
.CM_ToolAdd
{
	background-color:none;
	
	position:absolute;
	left:160px; 
	top:0px;
	width:20px;
	height:20px;
}
/* Class for the "Edit" tool (not implemented) */
.CM_ToolEdit
{
	background-color:none;
	
	position:absolute;
	left:160px;
	top:0px;
	width:20px;
	height:20px;
}
/* Class for the "Pan" tool (Hand) */
.CM_ToolPan
{
	background-color:none;
	
	position:absolute;
	left:120px; /* This is controlled from here */
	top:0px;
	width:20px;
	height:20px;
}
/* Class for the "Select" tool (Arrow) */
.CM_ToolSelect
{
	background-color:none;
	
	position:absolute;
	left:150px;
	top:0px;
	width:20px;
	height:20px;
}
/************************************************************************
* Styles for the canvas object and its container
************************************************************************/

/* Class for the div that contains the Canvas with the map data */
.CM_CanvasContainer
{
	position:absolute;
	left:0px;
	top:70px; /* change this to move the top of the map up or down */
	width:500px;
	height:430px;
}

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

/* The class for the div surrounding the navigation tools (zoom in, zoom out, home) */
.CM_Navigation {
	background-color:#CCC;
	border-radius:3px;
	box-shadow: 1px 1px 5px #333333;
	z-index:999;
	
	position:absolute;
	left:20px;
	top:20px;
	width:35px;
	height:105px;
}
/************************************************************************
* Classes for the Layers, Background, and Search tabs 
* This is implemented as an unordered list.
************************************************************************/

/* Classes container with all 3 tabs */
.CM_TabContainer {
	border:1px solid #CCCCCC;
	background:#efefef;
	margin:0px 0px 0px 0px;
	border-Radius:0px;
	overflow:auto;
	
	position:absolute;
	left:500px;
	top:0px;
	width:240px;
	height:55px;
}

/* undered list that contains the tabs */
.CM_TabUL {
	list-style-type: none;
	margin: 8px 0px 0px 0px;
	padding: 0px 0px 0px 0px
}

/* list item for each tab when it is not selected */
.CM_TabLI {
	padding: 7px 5px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	border:1px solid #dddddd;
	border-radius:0px 0px 0px 0px;
	display: inline; 
	cursor: pointer;
	background-Color:#ffffff;
	color: #000000; 
}
/* class for the tabs when they are selected  */
.CM_TabLI_Selected {
	padding: 7px 5px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	border:1px solid #dddddd;
	border-radius:0px 0px 0px 0px;
	display: inline; 
	cursor: pointer;
	background-Color:#4991ab;
	color: #ffffff; 
}

/* The class for the div surrounding the layer list */
.CM_LayerList {
	border:1px solid #CCCCCC;
	background:#efefef;
	margin:0px 0px 0px 0px;
	border-Radius:0px;
	overflow:auto; /* auto*/
	
	position:absolute;
	left:500px;
	top:55px;
	width:240px;
	height:445px;
}

/* The class for the div surrounding the Background list */
.CM_BackgroundList {
	border:1px solid #CCCCCC;
	background:#efefef;
	margin:0px 0px 0px 0px;
	border-Radius:0px;
	overflow:auto;
	
	position:absolute;
	left:500px;
	top:55px;
	width:240px;
	height:445px;
}

/* The class for the div surrounding the Search div */
.CM_SearchPanel {
	border:1px solid #CCCCCC;
	background:#efefef;
	padding:4px;
	border-Radius:0px;
	overflow:auto;
	
	position:absolute;
	left:500px;
	top:55px;
	width:232px;
	height:437px;
}

/* 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 {
	border:1px solid #CCCCCC;
	background:#efefef; 
	margin:0px 0px 0px 0px;
	border-Radius:0px;
	overflow:auto;
	
	position:absolute;
	left:0px;
	top:500px;
	width:500px;
	height:50px;
}

/* Class for credits in the footer */
.CM_Credits {
	textAlign:right;
	marginRight:5px; 
	float:right;
}
/************************************************************************
* 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;
}

/* The popup menu for the layer list item */
.CM_LayerPopupMenu {
	border:1px solid #000000;
	background:#000000;
	z-index:"9001";
				
}

/* Class for the name in the layer list item */
.CM_LayerListNameClass {
	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: 20px;
}

.CM_LayerListIconClass {
	background-color: none;
	margin: 12px 0px 0px 3px; /* top, right, bottom, left */
	border:1px solid black;
}
.CM_DraggingDivClass {
	border: 2px solid green;
	z-index: 9001; 
}

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

.CM_BackgroundListRadioButtonClass {
	width:20%;
}
/************************************************************************
* 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;
	zIndex:99;
	border-radius:5px 5px 5px 5px;
	z-index:999;
}
/* 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;
	zIndex: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
************************************************************************/

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

.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. 
************************************************************************/
.opacity_img{
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=45)"; 
  filter:alpha(opacity=45);
 }
.opacity_img:hover{
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter:alpha(opacity=100);
 }
 
.opacity_img{
  opacity: 1.0;
 }
 
.opacity_img:hover{
  cursor:pointer;
  opacity: 0.75;
 }
 
.h2_lighter {
	 font-size:24px;
	 font-weight: lighter; 
 }

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