@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 class for the div containing the title and tools */
.CM_MapContainer {
	position:relative;
	left:0px;
	top:0px; /* where is this positioning controlled CM_ALERT */
	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;
}

.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;
}

/* The class for the title at the start of the tools */

.CM_ToolContainer
{
	background-color:#000;
	
	position:absolute;
	left:0px; /* This is controlled from here */
	top:40px; /* This is controlled from here */
	width:500px;
	height:30px; /* This is defined in CanvasMap.js */
}

.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;
}

.CM_ToolInfo
{
	background-color:none;
	
	position:absolute;
	left:85px;
	top:0px;
	width:20px;
	height:20px;
}

.CM_ToolAdd
{
	background-color:none;
	
	position:absolute;
	left:160px; /* This is controlled from here */
	top:0px;
	width:20px;
	height:20px;
}

.CM_ToolEdit
{
	background-color:none;
	
	position:absolute;
	left:160px;
	top:0px;
	width:20px;
	height:20px;
}

.CM_ToolPan
{
	background-color:none;
	
	position:absolute;
	left:120px; /* This is controlled from here */
	top:0px;
	width:20px;
	height:20px;
}

.CM_CanvasContainer
{
	position:absolute;
	left:0px;
	top:70px; /* where is this positioning controlled CM_ALERT */
	width:500px;
	height:430px;
}

.CM_Canvas
{
	position:absolute;
	left:0px;
	top:0px;
}

/* The class for the div surrounding the navigation tools */

.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;
}

/*****************************************************/

.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;
}

.CM_TabUL {
	list-style-type: none;
	margin: 8px 0px 0px 0px;
	padding: 0px 0px 0px 0px
}

.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
}

/* 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;
	
	position:absolute;
	left:500px;
	top:55px;
	width:240px;
	height:445px;
}

.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;
}

.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;
}

.CM_SearchButton {
	margin:4px;
}

.CM_SearchResult {
	background:#ffffff;
	color:#000000;
}

.CM_SearchResultSelected {
	background:#000000;
	color:#ffffff;
}

.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;
}

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

/* The anem within the layer list item */

.CM_LayerPopupMenu {
	border:1px solid #000000;
	background:#000000;
	z-index:"9001";
				
}

.CM_LayerListNameClass {
	color: #000000;
	background-color: none;
	margin-top: 7px;
	margin-left: 3px;
}

/* The checkbox next to the layer list item */

.CM_LayerListCheckBoxClass {
	background-color: none;
}

/* The item in the list containing the layer */

.CM_LayerListItemClass {
	background-color: none;
}

/* sets the styles for the elements inside the layer list popup */

.CM_LayerListPopupMenuItem {
	cursor:pointer;
	padding:0px 0px 0px 7px;
	color: #FFF;
}

/*****************************************************/
/* These classes are used for the dialog box */

/*****************************************************/

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

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