@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
*/

/* Style photo class for Site Pictures */
.Photo_Class {
	display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
	width: 200px;
	opacity: 1;
}

/* Container for the entire map */
.CM_MapContainer {
	position:relative;
	left:0px;
	top:0px; 
	width:550px;
	height:900px; 
	
	/* 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;
}

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

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

/* 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;
	right:10px;
	top:10px;
	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;
	
	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 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;
	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; 
}

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

.CM_InfoBox {
	background:#000000;
	color:#FFFFFF;
	border:1px solid #cccccc;
	opacity:1;
	zIndex:99;
	border-radius:5px 5px 5px 5px;
	z-index:999;
	padding: 10px;
	font-size: 12px
}

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

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

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