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

/*   HSU GIS DataHub Webmap Styles 
     by Brian McCaughey
     11/18/2016    */

/* Container for the entire map */
.CM_MapContainer {
	position:relative;
	left:0px;
	top:30px; 
	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 and tools */

.CM_MapHeader {
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;
	font-size:17px;
	background-color:#fff;
	
	position:absolute;
	left:0px;
	top:0px;
	width:0px;
	height:0px;
}

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

.CM_ToolContainer
{
    border-top: thick double #07000d;
	background-color:#000;
	
	position:absolute;
	left:0px; /* This is controlled from here */
	top:0px; /* 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;
	visibility: hidden;
	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:40px;
	width:20px;
	height:20px;
}

.CM_ToolEdit
{
	background-color:none;
	
	position:absolute;
	left:160px;
	top:40px;
	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:30px; /* 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 #07000d;
	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;
    
 /*   visibility: hidden;*/
    
	position:absolute;
	left:500px;
	top:0px;
	width:240px;
	height:55px;
}

.CM_TabUL {
	list-style-type: none;
	margin: 17px 0px 0px 12px;
	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;
	background-Color:#fff; /*NEW*/
	color: #07000d; 
}
/* class for the tabs when they are selected  */

.CM_TabLI_Selected {          /*NEW*/
	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:#5988ff;
	color: #fff; 
}

/* 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;   /*NEW*/ 
	padding:4px; 
    margin:0px 0px 0px 0px;    /*Missing Margin*/
/*  padding:7px; */               /*Missing Padding*/
	border-Radius:0px;
	overflow:auto;
	
	position:absolute;
	left:500px;
	top:55px;
	width:240px;
	height:445px;
  /*  width:240px;
	height:445px;*/
}

.CM_SearchButton {
	margin:4px;
}

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

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

.CM_MapFooter {
	border:0px solid #228B22;
	background:#07000d; 
	margin:0px 0px 0px 0px;
	border-Radius:0px;
	overflow:auto;
      color:whitesmoke; /* coordinates color */
	padding-left:2em; /* coordinates padding */
	
	
	position:absolute;
	left:0px;
	top:500px;
	width:500px;
	height:50px;
}

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

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

/* 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: rgba(7, 0, 13, 0.85);
	color: #f5f5f5;
	border:2px solid #f5f5f5;
	/*opacity:0.8;*/
    box-shadow: 2px 2px 15px 0px #07000d;
	zIndex:99;
	border-radius:10px 10px 10px 10px;
	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.85;
	
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	
	position:absolute;
	border-bottom:solid #f5f5f5;
	border-top:solid #f5f5f5;
}

/* 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: rgba(7, 0, 13, 0.65);
	border: 1px solid whitesmoke;
	visibility: visible;
	z-index: 100000000;
	box-shadow: 2px 2px 15px 0px #07000d;
	color: whitesmoke;
	border-radius: 10px;
}

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