/*
  Place all the styles related to the Maps controller here.
  They will automatically be included in application.css.
  You can use Sass (SCSS) here: http://sass-lang.com/
*/

div#map_cornis {
  text-align:center;
  width : 100%;
  padding : 0;
  position : absolute;
  z-index : 10;
  cursor : grab;
}

div#map_cornis img{

  margin : 0;
  padding : 0;
  border : 0;
}

div#mapview {
  height : 100%;
  overflow : hidden;
  z-index: 20;
  position : relative;
}

div#inner-map {
  position: relative;
}

div.frame {
  border : 0;
  margin : 0;
  padding : 0;
  position : absolute;
/*  float : left;*/
  width : 256px;
  height : 256px;
  background-color: #333;
}

div.frame img {
  border : 0;
  width: 100%;
  height: 100%;
}

div#popover_menu_handler {
  width : 0;
  height : 0;
  background-color : black;
  position : absolute;
  z-index : 50;
  opacity : 0.7
}

div#popover_menu{
  display : none;
}

div#popover_menu ul{
  z-index: 1000;
  float: left;
  min-width: 160px;
  width : 100%;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  background-color: #ffffff;
  background-clip: padding-box;
}

div#popover_menu li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 20px;
  color: #333333;
  white-space: nowrap;
}

div#popover_menu li > a:hover,
div#popover_menu li > a:focus 
{
  color: #ffffff;
  text-decoration: none;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}

div#popover_menu .active > a,
div#popover_menu .active > a:hover {
  color: #333333;
  text-decoration: none;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  outline: 0;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}

div.popover_comment {
  display : none;
}

div#comment-sidebar {
  height : 40px;
  min-height : 40px;
  overflow : scroll;
}

div#mapview, div#map_cornis {
  height : 400px;
}

div#previewbox,  div#preview{
  position : relative;
}

div#miniviewport {
  border : 1px solid red;
  width : 10px;
  height : 10px;
  position:absolute;
  display: none;
}

#map_cornis img.centered-loader {
  margin-top:300px;
}

div#comments-list {
  margin-top : 10px;
}

div#zoom-control {
  position : relative;
  float: left;
  z-index : 200;
  top: 10px;
  left: 10px;
}

div#center{
  width: 10px;
  height: 10px;
  z-index: 10000;
  background-color: black;
  float: left;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -5px;
  margin-left : -5px;
}

div#mapview{
  border: 1px solid black;
}

div#travelling_controls {
  position: relative;
  bottom: 0;
  height: 20px;
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 10000;
  display: none;

  a{
    color: black;
    text-decoration: none;
  }

  #travelling-lecture {
    display: inline-block;
    vertical-align: top;
    width: 5%;
    margin-left: 2%;

  }

  #travelling-jauge{
    display: inline-block;
    vertical-align: top;
    width: 80%;

    .bar{
      height: 10px;
    }

    .progress{
      height: 10px;
      margin-top: 5px;
    }
  }

  #travelling-speed{
    display: inline-block;
    width: 10%;

    i{
      color: white;
    }

    i.current {
      color: black;
    }
  }

  .progress .bar {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
  }

  .dropdown-menu{
    top: auto;
    bottom: 100%;
    width: 10%;
  }
}


div.pale-bar {
    top: 185px;
    left: 144px;
    width: 12px; /* your chosen line width */
    height: 144px;
    -webkit-transform-origin: center top;
    -moz-transform-origin: center top;
    -o-transform-origin: center top;
    -ms-transform-origin: center top;
    transform-origin: center top;
    pointer-events: none;
    /* transform-origin sets rotation around top left (instead of the geometrical center) */
}

div.eol-vierge-size {
  width: 300px;
  height: 500px;
}

div.eol-schema {
  background-image:url("/images/eol_vierge.gif");
  overflow: hidden;
  position:absolute;
  top: 0px;
  left: 0px;
  border: solid;
}

#compare-maps-div{
  border-spacing: 20px;
  border-collapse: separate;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.compare-maps-ligne {
    content: "";
    position: absolute;
    border-left: 2px dotted #444;
    height: 100%;
    left: 50%;
}

.good_move{
  color: green;
}

.wrong_move{
  color: red;
}

div.map_annotation_count {
  display:inline-block;
  color:red
}

.recalage_production_pipeline_status_1{
  background: yellow;
  color: black;
}
.recalage_production_pipeline_status_2{
  background: green;
  color: white;
}
.recalage_production_pipeline_status_3{
  background: red;
  color: white;
}


/* Colors for map status */
.dismissed-map {
  background-color: grey;
}
.delivered-map {
  background-color: green;
}

td.delivered-map {
  background-color: green;
}

td.dismissed-map {
  background-color: grey;
}

.hub_bout_position{
  position:absolute;
  color: red;
  font-size:20px;
  display: none; /* we'll show them once positionned */
}