//
// @file
//
// Used for single and multiple event pages (not calendar views).
//

// ======================
// = Variables & mixins =
// ======================
// Based on Bootstrap. Modify variables.less for custom colors, font-sizes, etc.
@import "variables.less";
@import "mixins.less";
@import "mixins-custom.less";

// ================
// = Events pages =
// ================

// Event header: General table attributes.
.ai1ec-full-event {
  border: none !important;
  border-collapse: collapse !important;
  width: 100%;
  margin-bottom: 0.5em !important;
  td {
    font-size: 10pt !important;
  }
  th,
  td {
    line-height: 14pt !important;
    padding: 0.3em 0.5em !important;
    border: none !important;
    vertical-align: top;
  }
  th.ai1ec-empty,
  td.ai1ec-empty {
    padding: 0 !important;
  }
  th {
    color: #888 !important;
    font-size: 9pt !important;
    font-family: sans-serif !important;
    font-weight: bold;
    #gradient > .horizontal-three-colors-replace(mix(@singleEventLabelBackground, fade(@singleEventLabelBackground, 0%), 40%), @singleEventLabelBackground, 90%, fade(@singleEventLabelBackground, 0%));
    text-align: right;
    text-shadow: 0 1px 0 @textEmboss;
    width: 6em;
  }
}
.ai1ec-multi-event {
  th,
  td {
    padding: 0.3em 0.5em !important;
  }
}

// Event time(s).
.ai1ec-full-event {
  .ai1ec-time {
    line-height: 16pt !important;
    vertical-align: middle;
  }
  td.ai1ec-time {
    font-weight: bold;
    font-size: 11pt !important;
  }
  .ai1ec-allday-label {
    font-size: 10pt !important;
    color: fadeOut(@textColor, 50%);
    padding-left: 0.2em;
  }
}
.ai1ec-multi-event {
  .ai1ec-time {
    line-height: 15pt !important;
  }
  td.ai1ec-time {
    font-size: 10pt !important;
  }
  .ai1ec-allday-label {
    font-size: 9pt !important;
  }
}

// Location & map.
.ai1ec-full-event {
  td.ai1ec-location {
    min-width: 30%;
  }
  td.ai1ec-map {
    text-align: right;
  }
  td.ai1ec-map.ai1ec-has-map {
    width: 55%;
    text-align: left;
  }
  .ai1ec-gmap-container {
    border: 1px solid @tableBorder;
    .border-radius(4px);
    margin-bottom: 0.3em;
    position: relative;
  }
  #ai1ec-gmap-canvas {
    min-width: 18em;
    width: 100%;
    height: 12em;
  }
  .ai1ec-gmap-link {
    position: absolute;
    margin: 0;
    font-size: 0.8em !important;
    bottom: -1px;
    right: -1px;
  }
  #ai1ec-gmap-canvas input {
    margin: 0 !important;
  }
}
.ai1ec-multi-event .ai1ec-gmap-link {
  font-size: 8pt !important;
  margin: -0.2em 0;
}
.ai1ec-gmap-placeholder {
  .border-radius(4px);
  color: @linkColor;
  cursor: pointer;
  height: 12em;
  border: 1px dashed @tableBorder;
  min-width: 18em;
  margin-bottom: 0.3em;
  text-align: center;
  width: 100%;
  &:hover {
    border-color: darken(@tableBorder, 15%);
    color: @linkColorHover;
  }
  strong {
    position: relative;
    top: 45%;
  }
}
.ai1ec-gmap-container-hidden {
  position: absolute !important;
  visibility: hidden;
}

// Contact info.
.ai1ec-full-event .ai1ec-contact a {
  white-space: nowrap;
}

// Categories and tags.
.ai1ec-full-event {
  td.ai1ec-tags,
  td.ai1ec-categories {
    padding: 0.1em 0.2em !important;
  }
  .ai1ec-category {
    float: left;
  }
}
.ai1ec-multi-event .ai1ec-category {
  font-size: 8pt !important;
}

// Footer.
.ai1ec-event-footer {
  clear: left;
  font-size: 0.9em !important;
  font-style: italic;
}
.ai1ec-ics-icon {
  background: url(../img/ics-icon.png) no-repeat right;
  padding-right: 15px;
}

// Excerpts.
.ai1ec-excerpt {
  margin-bottom: 0.5em;
  font-size: 10pt !important;
  line-height: 1.6em;
  overflow: hidden;
  > div {
    padding-left: 7.2em;
  }
  .ai1ec-label {
    clear: left;
    float: left;
    #gradient > .horizontal-three-colors-replace(fade(@singleEventLabelBackground, 40%), @singleEventLabelBackground, 90%, fade(@singleEventLabelBackground, 0%));
    margin-left: -7.2em;
    padding: 0 0.6em !important;
    text-align: right;
    text-shadow: 0 1px 0 @textEmboss;
    width: 6em;
  }
  .ai1ec-time {
    font-weight: bold;
  }
  .ai1ec-event-link {
    float: right;
    font-size: 8pt !important;
  }
  .ai1ec-allday-label {
    font-size: 9pt !important;
    color: #bbb;
    padding-left: 0.2em;
  }
}
