/* reset */
html, body, h1, h2, h3, h4, h5, h6, figure
{
  padding: 0;
  margin: 0;
  border: 0;
  font-weight: normal;
}

html, body
{
  width: 100%;
  height: 100%;
  font-size: 12px;
  font-family: Arial, Verdana, Helvetica, sans-serif;
}
.clear_fix
{
  display: inline-block;
  clear: both;
}
.clear_fix:after
{
  content: " "; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
.no_display
{
  display: none;
}

#map
{
  width: 100%;
  height: 100%;
}
div#loading
{
  width: 100%;
  height: 200px;
  background-color: #111;
  color: #aaa;
  opacity: 0.4;
  filter: alpha(opacity=40);
  font-size: 60px;
  text-align: center;
  vertical-align: middle;
  line-height: 200px;
}
a#logo
{
  display: block;
  width: 294px;
  height: 90px;
  margin-left: 10px;
  margin-bottom: 10px;
}
div#disclaimer
{
  margin-left: 20px;
  margin-bottom: 5px;
  color: #fff;
  font-size: 14px;
}
#contents_wrapper
{
  height: 90%;
}
#contents
{
  padding: 15px;
  height: 100%;
  width: 200px;
  background-color: #111;
  opacity: 0.8;
  filter: alpha(opacity=80);
  font-size: 13px;
  color: #ccc;
  overflow-x: hidden;
  overflow-y: auto;
}
#contents_close
{
  float: right;
  cursor: pointer;
}
#contents h2
{
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
}
#unselect_deployment
{
  display: none;
  color: #16b;
  cursor: pointer;
}
.deployment
{
  width: 190px;
  margin-top: 3px;
  padding: 5px;
  background-color: #333;
  cursor: pointer;
}
.deployment.selected
{
  background-color: #555;
}
.deployment.highlighted
{
  background-color: #777;
}
.deployment_color
{
  width: 20px;
  height: 20px;
  float: left;
}
.deployment_title
{
  margin-left: 25px;
  padding-top: 3px;
  width: 165px;
}
.deployment.selected .deployment_title
{
  color: #fff;
  font-weight: bold;
}
.deployment_recent
{
  display: inline-block;
  margin-left: 3px;
}

#contents_open
{
  margin-top: 20px;
  width: 24px;
  height: 24px;
  padding: 8px;
  background-color: #111;
  opacity: 0.8;
  filter: alpha(opacity=80);
  cursor: pointer;
  display: none;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

#measure_container
{
  margin-bottom: 15px;
}
#measure_toggle
{
  margin: 0 auto;
}
#measure_information
{
  width: 200px;
  padding: 8px;
  background-color: #fff;
  display: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  font-size: 13px;
}
#measure_close
{
  float: right;
  cursor: pointer;
}
#measure_title
{
  margin-bottom: 8px;
}
#measure_help
{
  color: #aaa;
}
#measure_distance
{
  margin-top: 15px;
  font-weight: bold;
}

@media all and (max-width: 1000px)
{
  a#logo
  {
    width: 225px;
    height: 69px;
    margin-bottom: 5px;
  }
  a#logo img
  {
    width: 225px;
    height: 69px;
  }
  div#disclaimer
  {
    margin-left: 5px;
    margin-bottom: 5px;
    font-size: 11px;
  }
  #contents
  {
    padding: 10px;
    width: 190px;
    font-size: 12px;
  }
  #contents h2
  {
    font-size: 14px;
  }
  .deployment
  {
    width: 180px;
  }
  .deployment_color
  {
    width: 18px;
    height: 18px;
    float: left;
  }
  .deployment_title
  {
    margin-left: 25px;
    padding-top: 3px;
    width: 155px;
  }
}

@media all and (max-width: 800px)
{
  a#logo
  {
    width: 180px;
    height: 55px;
    margin-bottom: 0px;
  }
  a#logo img
  {
    width: 180px;
    height: 55px;
  }
  div#disclaimer
  {
    margin-left: 5px;
    margin-bottom: 5px;
    font-size: 10px;
  }
  #contents
  {
    padding: 10px;
    width: 170px;
    font-size: 11px;
  }
  #contents h2
  {
    font-size: 12px;
  }
  .deployment
  {
    width: 160px;
  }
  .deployment_color
  {
    width: 15px;
    height: 15px;
    float: left;
  }
  .deployment_title
  {
    margin-left: 20px;
    padding-top: 2px;
    width: 140px;
  }
}

/* additional jquery ui states */
.ui-state-callout,
.ui-widget-content .ui-state-callout,
.ui-widget-header .ui-state-callout
{
	border: 1px solid #16b;
	background: #16b url('../theme/images/ui-bg_highlight-soft_50_16b_1x100.png') 50% 50% repeat-x;
	color: #fff;
}
.ui-state-callout a,
.ui-widget-content .ui-state-callout a,
.ui-widget-header .ui-state-callout a
{
	color: #fff;
}
.ui-state-callout .ui-icon
{
	background-image: url('../theme/images/ui-icons_fff_256x240.png');
}
.ui-state-callout.ui-state-hover,
.ui-widget-content .ui-state-callout.ui-state-hover,
.ui-widget-header .ui-state-callout.ui-state-hover
{
	border: 1px solid #15b;
	background: #15b url('../theme/images/ui-bg_highlight-soft_50_15b_1x100.png') 50% 50% repeat-x;
	color: #fff;
}
.ui-state-callout.ui-state-hover .ui-icon
{
	background-image: url('../theme/images/ui-icons_fff_256x240.png');
}

.ui-state-remove,
.ui-widget-content .ui-state-remove,
.ui-widget-header .ui-state-remove
{
	border: 1px solid #c00;
	background: #c00 url('../theme/images/ui-bg_highlight-soft_50_c00_1x100.png') 50% 50% repeat-x;
	color: #fef9f9;
}
.ui-state-remove a,
.ui-widget-content .ui-state-remove a,
.ui-widget-header .ui-state-remove a
{
	color: #fef9f9;
}
.ui-state-remove .ui-icon
{
	background-image: url('../theme/images/ui-icons_fef9f9_256x240.png');
}
.ui-state-remove.ui-state-hover,
.ui-widget-content .ui-state-remove.ui-state-hover,
.ui-widget-header .ui-state-remove.ui-state-hover
{
	border: 1px solid #b00;
	background: #b00 url('../theme/images/ui-bg_highlight-soft_50_b00_1x100.png') 50% 50% repeat-x;
	color: #fef9f9;
}
.ui-state-remove.ui-state-hover .ui-icon
{
	background-image: url('../theme/images/ui-icons_fef9f9_256x240.png');
}

/* The location pointed to by the popup tip. */
.popup-tip-anchor
{
  height: 0;
  position: absolute;
  /* The max width of the info window. */
  width: 200px;
}
/* The bubble is anchored above the tip. */
.popup-bubble-anchor
{
  position: absolute;
  width: 100%;
  bottom: /* TIP_HEIGHT= */ 8px;
  left: 0;
}
/* Draw the tip. */
.popup-bubble-anchor::after
{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  /* Center the tip horizontally. */
  transform: translate(-50%, 0);
  /* The tip is a https://css-tricks.com/snippets/css/css-triangle/ */
  width: 0;
  height: 0;
  /* The tip is 8px high, and 12px wide. */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: /* TIP_HEIGHT= */ 8px solid white;
}
/* The popup bubble itself. */
.popup-bubble-content
{
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -100%);
  /* Style the info window. */
  background-color: white;
  padding: 5px;
  border-radius: 5px;
  font-family: sans-serif;
  overflow-y: auto;
  max-height: 60px;
  box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.5);
  text-align: center;
  font-size: 12px;
}