@import "gn_search.less";

.panel-body .gn-metadata-view {
  width: 100%;
}

/* Angular view */
.gn-md-view {
  table tr th {
    width: 25%;
  }

  .badge {
    word-break: break-all;
    white-space: normal;
  }

  .iti-box[data-ng-click] {
    cursor: pointer;
  }
  .gn-iti {
    border-color: @text-muted;
    color: @text-muted;
    padding-left: 2px;
    cursor: pointer;
    .label {
      color: @text-muted !important;
      text-align: left;
      width: 194px !important;
    }
    .icon {
      border-radius: 4px;
      border: 1px solid #ffffff;
      padding-left: 4px;
      width: 34px !important;
      height: 34px !important;
      span {
        display: table-cell;
        font-size: 28px;
      }
    }
  }
}


.topic-color {
  color: #428BCA;
}
.resource-color {
  color: #5CB85C;
}

.gn-metadata-view {

  a.disabled {
    color: lightgrey;
    cursor: not-allowed;
  }
  .nav li:hover {
    cursor: pointer;;
  }

  h1 {
    font-size: 18px;
  }

  .property {
    @media (min-width: @screen-sm-min) {
      text-align: right;
    }
    font-style: italic;
    color: #666;
  }

  input[readonly] {
    background: #fff;
  }

  .extent {
    display: inline-block;
    position: relative;
    margin: 2em 0 0 90px;
    border: 1px solid #ccc;
  }
  .coord {
    @coord-half-width: 75px;
    @coord-half-height: 1.25em;
    position: absolute;
    width: (@coord-half-width * 2);
    &-north { top: -@coord-half-height; }
    &-south { bottom: -@coord-half-height; }
    &-east { right: -@coord-half-width; }
    &-west { left: -@coord-half-width; }
    &-north, &-south {
      left: 50%;
      margin-left: -@coord-half-width;
    }
    &-east, &-west {
      top: 50%;
      margin-top: -@coord-half-height;
    }
  }

  h1 {
   margin-bottom: 20px;
  }

  h3 {
    color: darken(@btn-primary-bg, 10%);
    position: relative;
    border-bottom: 2px dotted lightgrey;
    font-size: 15px;
    margin: .6em 0 .3em;
    button {
      position: absolute;
      right: -.5em;
      padding: 2px 3px;
      line-height: 1em;
      top: -.15em;
      border-radius: 1em;
      color: rgba(0,0,0,.6);
      border-color: white;
      &:hover {
        border-color: @panel-default-border;
      }
      @media (min-width: @screen-sm-min) {
        left: -.85em;
        right: auto;
      }
    }
    i {
      display: inline-block;
      width: 14px;
      transition: transform .4s;
      transform: rotate(0deg);
      -ms-transform: rotate(0deg);
    }
    .closed i {
      transform: rotate(90deg);
      -ms-transform: rotate(270deg);
    }
  }

  div.md-text {
    display: table;
    width: 100%;
    border-spacing: 10px 0;
    dd, dt {
      display: table-cell;
    }
  }

  dl {
    margin-bottom: 0;
    padding-bottom: 10px;
   /* h2, h3, h4, h5, h6 {
      margin-top: 0;
      padding-top: 1em;
    }*/
  }

  /* .dl-horizontal .dl-horizontal dt { */
  .dl-horizontal dt {
    font-weight: normal;
    font-style: italic;
    color: @gray;
    clear: none;
    float: none;
    padding-left: 0.5em;
    text-align: left;
    white-space: normal;
  }

  .target {
    .clearfix;
  }
  .entry {
    border-left: 2px solid @gray-lighter;
    padding-left: 1em;
    .btn-default:focus {
      border: none;
    }
  }
  .entry .entry {
    margin-left: 1em;
  }

  .img-thumbnail {
    margin-bottom: 1em;
  }

  @media (min-width: @grid-float-breakpoint) {
    @large-offset: 250px;
    .entry {
      padding-left: 0;
    }
    h3 {
      border: none;
      padding-left: .65em;
      i {
        transform: rotate(0deg);
      }
      .closed i {
        transform: rotate(-90deg);
      }
    }
    .offseted {
      margin-left: @large-offset;
      padding-bottom: 1.5em;
      padding-left: 1em;
    }
    dd, .offseted {
      dd {
        border: none;
        padding-left: 0;
      }
    }
    /* FIXME: needs `md-text` wrapping to removed
    dd:first-of-type {
      border-radius: 0 .5em 0 0;
    }
    dd:last-of-type {
      border-radius: 0 0 .5em 0;
    }
    */
    .dl-horizontal {
      dt {
        width: (@component-offset-horizontal - 20);
      }
      dd {
        margin-left: @component-offset-horizontal;
      }
    }
  }

  .md-actions .dropdown-menu .fa {
    margin-right: .4em;
  }
  .pad-right {
    margin-right: .4em;
  }
  .pad-left {
    margin-left: .4em;
  }
  .dropdown-menu {
    font-size: 90%;
  }
}

.gn-metadata-view-groovy {
  font-family: Arial @font-family-sans-serif;
  font-size: 13px;
  dd, .offseted {
    border-left: 1px solid @gray-light;
    background: @gray-lighter;
    padding-left: 0.6em;
  }
}

.gn-related-resources {
  .gn-related-item {
    h4 {
      word-break: break-word;
    }
  }
  p {
    word-wrap: break-word;
  }
}


img.graphic-overview:not(.large):not(.thumbnail) {
  max-height: 200px;
  min-height: 200px;
}
img.graphic-overview.large {
  min-height: 200px;
}

img.graphic-overview:not(.large):hover {
  cursor: pointer;
  cursor: hand;
}

img.graphic-overview.large.dropdown-menu {
  margin-top: -200px;
}

.container img.logo {
  max-width: 128px;
  float:left;
  padding-top: 5px;
  padding-right: 5px;
}

.container img.small-logo {
  max-width: 64px;
}

.overview img:not(.graphic-overview):not(.icon) {
  max-width: 500px;
  max-height: 500px;
  padding-left: 1em;
  border: 0;
  //    margin-left: auto;
  //    margin-right: auto
}
.container span.title {
  margin-left: 1em;
}

.overview div.abstract > dd {
  margin-left: 1em;
}

.summary-links div {
  margin-left: .5em;
  margin-right: .5em;
}

.summary-links .link-block-title {
  background-color: #F7EEE1;
}
ul.view-outline {
  padding-top: 2em;
}

ul.view-outline a[disabled] {
  pointer-events: none;
  cursor: default;
  color: #C0C0C0;
}

a {
  word-wrap: break-word;
}

ul.md-value-list > li {
  list-style-type: none;
  border-left: 1px solid #999999;
  padding-left: 1em;
  background: #eeeeee;
}

ul.md-value-list > li:hover, ul.container-list > li:hover  {
  cursor: default;
  background: #eeeeee;
  background-color: #eeeeee;
}

ul.container-list {
  list-style-type: none;
  background: #eeeeee;
  border-left: 1px solid #999999 !important;
  padding-left: 1em;
  margin-left: 1em;
}

.dropdown-submenu > .dropdown-menu.pull-left {
  left: -100%;
  margin-left: 10px;
}

.gn-metadata-display {
  h1 {
    font-size: 20px;
    margin: 30px 0;
  }
  h2 {
    font-size: 18px;
    margin-bottom: 20px;
  }
  h3 {
    font-size: 16px;
  }
  h4 {
    font-size: 15px;
  }
  .table-striped {
    .btn-sm {
      margin-right: .5em;
      margin-bottom: .5em;
    }
    td {
      padding-left: 40px;
      ul {
        padding-left: 0;
      }
    }
  }
}

[data-gn-metadata-contacts], [gn-metadata-contacts] {
  .gn-contact {
    margin-left: -1.7em;
  }
}