/* @group seantis.dir.events */

/* @group event directory: columns */
.portaltype-seantis-dir-events-directory {

  #directoryInfo {
    clear: both;
  }

  #directoryResultList {
    float: left;
    width: 60%;
  }

  .event-sidebar {
    float: right;
    width: 35%;
  }

  @media screen and (max-width: $screen-tablet-landscape) {
    #directoryResultList,
    .event-sidebar {
      clear: both;
      float: none;
      padding: 0;
      width: 100%;
    }
  }
}
/* @end */

/* @group event directory: submit your event */
.your-event {
  margin-bottom: 1rem;

  div {
    background-color: $lightgray;
    font-size: $font-size-18;
    padding: 1em;
  }
}
/* @end */


/* @group event directory: event navigation (filters) */
.event-navigation {
  border-bottom: 1px solid $lightgray2;
  border-top: 1px solid $lightgray2;
  margin-bottom: 16px;
  padding-bottom: 8px;
  padding-top: 13px;

  .event-navigation-search,
  .event-navigation-filter {
    float: left;
    line-height: 2em;
    margin-right: 30px;
  }

  .event-navigation-search {
    .LSBox {
      display: inline-block;
      line-height: 1.4em;
      position: relative;

      &:before {
        right: .6em;
      }
    }

    a.reset {
      font-size: 1.4em;
      vertical-align: middle;

      &:after {
        @include base_icon("\34");
        padding-left: 10px;
        vertical-align: middle;
      }

      &:hover {
        text-decoration: none;
      }
    }
  }

  .event-navigation-filter {
    span {
      color: $link-color;
      cursor: pointer;
      font-size: 1.1em;
      vertical-align: middle;

      &.empty:after {
        @include base_icon("\e80c");
        padding-left: 10px;
      }

      &.selected {
        font-weight: bold;
      }
    }

    a.reset {
      font-size: 1.4em;
      vertical-align: middle;

      &:after {
        @include base_icon("\34");
        padding-left: 10px;
        vertical-align: middle;
      }
      &:hover {
        text-decoration: none;
      }
    }

    ul {
      @include ul('plain');
      @include boxshadow(0 .25em .5em -.25em $darkgray);

      background-color: $page-background;
      border: 1px solid $breadcrumbs-border;
      display: none;
      margin-top: 8px;
      padding: 8px 0;
      position: absolute;
      z-index: 100;

      li {
        margin: 0;
        min-width: 10em;

        a {
          cursor: pointer;
          display: inline-block;
          padding: 3px 20px;
        }

        &.selected a {
          color: $text-color;

          &:hover {
            text-decoration: none;
          }
        }
      }
    }

    input {
      @include boxsizing(border-box);
      margin-left: 2em;
      margin-right: 1em;
      max-width: 100%;
    }
  }

  @media screen and (max-width: $screen-tablet-landscape) {
    border-bottom: 0;

    .event-navigation-search,
    .event-navigation-filter {
      clear: both;
      float: none;
      padding: .5em 0;
      width: 100%;
    }

    .event-navigation-search {
      input {
        width: 100%;
      }

      .LSBox {
        margin-right: 1em;
        width: 85%;

        &:before {
          right: 0;
          top: .4em;
        }
      }
    }

    .event-navigation-filter {
      ul {
        @include boxshadow(none);
        border: 0;
        position: static;
      }
    }
  }

}
/* @end */

/* @group event directory: event results */
#directoryResultList .eventgroup {

  .directoryResult.event {
    margin-bottom: 1rem;
  }

  .event-image {
    float: left;
    width: 25%;
  }

  .directoryInfoText {
    float: left;
    padding: 0;
    width: 75%;
  }

  h2 {
    border-top: 1px solid $lightgray2;
    margin: 0 0 .3em;
    padding-top: 1em;
  }

  img {
    max-width: 85%;
  }

  .event-image-dummy {
    div {
      background-color: $lightgray2;
      color: $lightgray3;
      font-size: $font-size-36;
      font-weight: bold;
      max-width: 85%;
      padding: 1.5em 0;
      text-align: center;
      width: 200px;
    }
  }

  .short {
    margin-bottom: .5rem;
  }

  .locality {
    color: $link-color;
    display: inline;
  }

  .timerange {
    clear: right;
    display: inline-block;
    float: right;
    text-align: right;

    a.recurring:after {
      @include base_icon("\e900");
    }
  }

  .event-tags {
    margin-top: .5rem;
  }

  .event-workflow {
    clear: both;
    margin-top: .5rem;

    .event-state {
      @include tag();
      color: $text-color-light;
    }
  }

  @media screen and (max-width: $screen-tablet-landscape) {
    .event-image {
      display: none;
    }

    .directoryInfoText {
      width: 100%;
    }

    .locality {
      display: block;
    }

    .timerange {
      float: none;
    }
  }
}


/* @group event: sidebar */
.event-sidebar {
  #directoryResultMap {
    float: none;
    width: 100%;
  }

  ul {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;

    li {
      margin: 0;
    }
  }
}
/* @end */


/* @group tags */
.eventtag {
  @include tag();
}
/* @end */


/* @group event detail */
.event-view {

  .event-col-1 {
    float: left;
    margin: 1rem 1rem 0 0;
    width: 17%;
  }

  .event-col-2 {
    float: left;
    width: 60%;
  }

  @media screen and (max-width: $screen-tablet-landscape) {
    .event-col-1, .event-col-2 {
      clear: both;
      float: none;
      padding: 0;
      width: 100%;
    }
  }

  h2 {
    border-top: 1px solid $lightgray2;
    margin-top: 1rem;
    padding-top: 1.2em;
  }

  a {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  ul {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;

    li {
      margin: 0;
    }
  }

  img {
    max-width: 100%;
  }

  .event-image-dummy {
    div {
      background-color: $lightgray2;
      color: $lightgray3;
      font-size: $font-size-36;
      font-weight: bold;
      max-width: 100%;
      padding: 2.5em 0;
      text-align: center;
      width: 100%;
    }
  }

  @media screen and (max-width: $screen-tablet-landscape) {
    .event-image-dummy {
      display: none;
    }
  }

  .short,
  .long {
    margin-bottom: 1em;
  }

  .location-url,
  .contact {
    margin-top: 1em;
  }

  #directoryResultMap {
    float: none;
    margin-top: 2em;
    width: 100%;
  }
}
/* @end */


/* @group submit form */
#formfield-form-widgets-cat1,
#formfield-form-widgets-cat2 {
  clear: none;
  float: left;
  width: 50%;
}

#formfield-form-widgets-cat1 > span,
#formfield-form-widgets-cat2 > span {
  display: block;
}

#formfield-form-widgets-submission_start_time input,
#formfield-form-widgets-submission_end_time input,
#formfield-form-widgets-submission_range_start_time input,
#formfield-form-widgets-submission_range_end_time input {
  width: 200px;
}

#formfield-form-widgets-submission_days .option {
  float: left;
  margin-right: .75em;
}

#formfield-form-widgets-submission_days .option input {
  margin-right: 0;
}

.event-submit-form .olControlDrawFeaturePathItemInactive,
.event-submit-form .olControlDrawFeaturePolygonItemInactive,
.event-submit-form .olControlDrawFeaturePathItemActive,
.event-submit-form .olControlDrawFeaturePolygonItemActive {
  display: none;
}
/* @end */


/* @group event preview form */
.event-preview-form {
  margin-top: 1em;
}
/* @end */


/* @end */
