/*! explorer.illustris.css
 * (c) 2014, Dylan Nelson
 */

/* -------------------------------------- explorer -------------------------------------- */
#map {
      position: absolute;
      top: 50px;
      right: 0; 
      left: 0;
      bottom: 0;
      padding: 0px;
}
.haloTable {
      width: 100%;
      border: 1px solid #999;
      padding: 2px;
}
.haloTable tr:nth-child(odd) {
      background-color:#eee;
}
.haloTable tr:nth-child(even) {
      background-color:#ddd;
}
.haloTable tr.haloRowActive {
      background-color:#444;
      color: #eee;
}
.haloTable th {
      text-align: left;
      background-color:#cc8;
      padding: 2px 8px;
}
.haloTable td {
      padding: 2px 2px;
}

.modal {
      overflow-y: auto; /* disable scrollbar from appearing */
      z-index: 100001; /* over leaflet controls */
}
.modal-dialog {
      width: 80%;
}
@media(max-width:767px){
  /* let galaxy modal take whole screen (like sidebar) for small screens */
  .modal-dialog {
    width: 100%;
    margin-top: 50px;
    padding: 0;
  }
  .modal-content {
    /* height: 100%; */
    border-radius: 0;
  }
}
.modalHeader {
      margin-top: 0;
}
.sizeOk {
      color: #009933;
}
.sizeBad {
      color: #cc3300;
}
.exSec {
      font-size: 18px;
      padding-left: 10px;
      padding-right: 8px;
}
.exPT {
      opacity: 0.2;
}

/* -------------------------------------- galaxy modal -------------------------------------- */

#odyssey-subhaloinfo {
  width: 100%;
  min-height: 300px;
}

.treeContainer {
  /*width: 100%;*/
  min-height: 200px;
  position: relative;
  /* display: inline-block; */
}

div#treetip {   
  position: absolute;  
  text-align: center;    
  height: auto;  
  overflow: auto;            
  padding: 5px 15px;             
  /* font-size: 12px; */      
  background: #444;
  color: #fff;
  border: 0px;      
  border-radius: 4px;           
  /* pointer-events: none; */
  z-index: 100002;  
}

#treefull, #treefull_1 {
  margin-left: 10px;
  margin-bottom: 5px;
  font-size: 120%;
}
#treefull:hover, #treefull_1:hover {
  color: #f39c12;
  transition: color 0.2s;
}

#treeFullTxt {
  padding-left: 5px;
  padding-bottom: 2px;
}

/* -------------------------------------- temporary three.js -------------------------------------- */

span.oculusRiftSelect {
  background-image: url(images/icon-oculusrift.png);
  width: 34px;
  height: 22px;
  /* position: relative;
  left: -14px; */
  display: inline-block;
  cursor: pointer;
}

#riftSelect {
  margin-left: 10px;
}

#riftStatus {
  color:red;
  margin-left:5px;
  padding-bottom:10px;
}

/* -------------------------------------- temporary d3 testing -------------------------------------- */
  g.node {
      font-family: Verdana, Helvetica;
      font-size: 6px;
  }
  circle.node-dot {
      /*fill: lightsalmon;*/
      stroke: #000;
      stroke-width: 1px;
  }

  path.link {
      fill: none;
      stroke: #888;
  }
  
/* -------------------------------------------------------------------------------------------------- */

/* bootstrap-slider.js v2.0.0 (Stefan Petre) */
.slider {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
.slider.slider-horizontal {
  width: 210px;
  height: 20px;
}
.slider.slider-horizontal .slider-track {
  height: 10px;
  width: 100%;
  margin-top: -5px;
  top: 50%;
  left: 0;
}
.slider.slider-horizontal .slider-selection {
  height: 100%;
  top: 0;
  bottom: 0;
}
.slider.slider-horizontal .slider-handle {
  margin-left: -10px;
  margin-top: -5px;
}
.slider.slider-horizontal .slider-handle.triangle {
  border-width: 0 10px 10px 10px;
  width: 0;
  height: 0;
  border-bottom-color: #0480be;
  margin-top: 0;
}
.slider.slider-vertical {
  height: 210px;
  width: 20px;
}
.slider.slider-vertical .slider-track {
  width: 10px;
  height: 100%;
  margin-left: -5px;
  left: 50%;
  top: 0;
}
.slider.slider-vertical .slider-selection {
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
}
.slider.slider-vertical .slider-handle {
  margin-left: -5px;
  margin-top: -10px;
}
.slider.slider-vertical .slider-handle.triangle {
  border-width: 10px 0 10px 10px;
  width: 1px;
  height: 1px;
  border-left-color: #0480be;
  margin-left: 0;
}
.slider.slider-disabled .slider-handle {
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#dfdfdf), to(#bebebe));
  background-image: -webkit-linear-gradient(top, #dfdfdf, 0%, #bebebe, 100%);
  background-image: -moz-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
  background-image: linear-gradient(to bottom, #dfdfdf 0%, #bebebe 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf', endColorstr='#ffbebebe', GradientType=0);
}
.slider.slider-disabled .slider-track {
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#e5e5e5), to(#e9e9e9));
  background-image: -webkit-linear-gradient(top, #e5e5e5, 0%, #e9e9e9, 100%);
  background-image: -moz-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%);
  background-image: linear-gradient(to bottom, #e5e5e5 0%, #e9e9e9 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5', endColorstr='#ffe9e9e9', GradientType=0);
  cursor: not-allowed;
}
.slider input {
  display: none;
}
.slider .tooltip-inner {
  white-space: nowrap;
}
.slider-track {
  position: absolute;
  cursor: pointer;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f5f5f5), to(#f9f9f9));
  background-image: -webkit-linear-gradient(top, #f5f5f5, 0%, #f9f9f9, 100%);
  background-image: -moz-linear-gradient(top, #f5f5f5 0%, #f9f9f9 100%);
  background-image: linear-gradient(to bottom, #f5f5f5 0%, #f9f9f9 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
.slider-selection {
  position: absolute;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f9f9f9), to(#f5f5f5));
  background-image: -webkit-linear-gradient(top, #f9f9f9, 0%, #f5f5f5, 100%);
  background-image: -moz-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
  background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 4px;
}
.slider-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#149bdf), to(#0480be));
  background-image: -webkit-linear-gradient(top, #149bdf, 0%, #0480be, 100%);
  background-image: -moz-linear-gradient(top, #149bdf 0%, #0480be 100%);
  background-image: linear-gradient(to bottom, #149bdf 0%, #0480be 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  opacity: 0.8;
  border: 0px solid transparent;
}
.slider-handle.round {
  border-radius: 50%;
}
.slider-handle.triangle {
  background: transparent none;
}

/* -------------------------------------- custom controls -------------------------------------- */

.leaflet-control { opacity: 0.9; }
.leaflet-control-explorerinfo { background-image: url(images/icon-info.png); }
.leaflet-control-explorersearch { background-image: url(images/icon-search.png); }

.searchBox { width: 100%; }
#searchSlide { width: 100%; }
#searchSlide .slider-selection { background: #ffd496; }
#searchSlide .slider-handle { background: #f97301; }

.minorlinks a { color: #000; }
span.zoomTo {
  background-image: url(images/icon-zoom.png);
  width: 12px;
  height: 12px;
  /* position: relative;
  left: -14px; */
  display: inline-block;
  cursor: pointer;
}

/* -------------------------------------- map markers/etc -------------------------------------- */

.diamond-icon {
   width: 12px; 
   height: 12px;
   background-image: url(images/icon-crosshair.png);
}

/* -------------------------------------- ios/android webapp -------------------------------------- */
#test11 {
      color: #fff;
      position: absolute;
      display: inline-block;
      width: 200px;
      height: 25px;
      bottom: 2px;
      left: 100px;
      z-index: 99999;
      display: none;
}