@import "twitter/bootstrap/mixins";
@import "twitter/bootstrap/variables";
@import "woople-theme/colours.css.less";

@contentPadding: 20px;
@menuWidth: 255px;
@contentOverlap: 5px;
@contentOffset: @menuWidth - @contentOverlap;
@negativeContentOffset: @contentOffset * -1;

@logoSize: 24px;
@logoWithPadding: @logoSize * 3;

@title-font-weight: 300;
@default-shadow: 0 1px 3px rgba(0,0,0,.25);

@sosumi-font-size: 12px;

@titleFont: HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif;

/*course*/
@imageWidth: 50px;
@tableCellPadding: 10px;
@leftColumnOffset: (@gridGutterWidth*2) + @imageWidth;

@phoneImageSize: 50px;
@phoneMargin: @contentPadding / 2;
@phoneOffset: @phoneImageSize + @phoneMargin;
@phoneLeftColumnOffset: @phoneMargin + @gridGutterWidth + @imageWidth;

.content-title() {
  font-weight: @title-font-weight;
  font-size:18px;
  line-height:1.5em;
  margin-bottom:0.5em;
}

.outline-title(@left: @leftColumnOffset) {
  line-height:1.5em;
  font-size:11px;
  text-transform:uppercase;
  padding-left:@left;
  /*border-top:solid 1px @insetContentBorder;*/
  color: @secondaryTextColour;
  margin-top:@contentPadding * 1.5;
  margin-bottom:@contentPadding * 1.5;
  padding-right:@leftColumnOffset;
}

.section-title() {
  font-weight: @title-font-weight;
  margin-bottom:@contentPadding;
  font-family:@titleFont;
  color: @secondaryTextColour;
}

.modal-video() {
  max-height:600px;
  overflow:visible;

  .modal-video {
    position:relative;
    padding-bottom: 56.25%;
    padding-top:30px; /* ie 6 workaround */
    height:0;
    overflow:hidden;

    iframe, object, embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .modal-video-box {
      background: black;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      #theme_video_html5_api {
        margin: 0;
      }

      img {
        display: block;
      }
    }
  }
}

.course-image() {
  width:100%;
  .border-radius(10px);
  .box-shadow(0 1px 3px rgba(0, 0, 0, 0.10));

}

.woople-badge() {
  background:@highlight;
  cursor:initial;
}

.hanging-border-radius(@radius) {
  -webkit-border-radius: 0 0 @radius @radius;
     -moz-border-radius: 0 0 @radius @radius;
          border-radius: 0 0 @radius @radius;
}

.styled-table() {
  table {
    margin-bottom:0;

    th {
      color: @secondaryTextColour;
    }

    th, td {
      padding:@tableCellPadding;
      border-top:none;
      a {
        color:@primaryTextColour;
      }
    }

    .count {
      width:75px;
    }

    th {
      border-top:none;
    }

    tr > td:first-child, tr > th:first-child {
      padding-left:@contentPadding;
      width:@gridGutterWidth + @imageWidth - (@tableCellPadding * 2);
    }

    .action {
      display:block;
    }

    tr:hover {
      td {
        background-color:@highlightBackground;
      }
    }
    tr.completed {
      .action {
        display:none;
      }
    }

    .disabled td {
      .opacity(50);

      a:hover {
        text-decoration:none;
      }

      .action {
        display:none;
      }

    }

    tr.disabled {
      &:hover {
        td {
          background:none;
        }
      }

      td {
        background-color:transparent;
        text-shadow:none;
        color:@primaryTextColour;

        a {
          color:@primaryTextColour;
        }

        .action {
          display:none;
        }
      }
    }

    @media (max-width: 767px) {
      tr > td:first-child, tr > th:first-child {
        padding-left:@phoneMargin;
        text-indent:@phoneMargin * 1.5;

        > *:first-child {
          text-indent:0;
          margin-left:@phoneMargin;
        }
      }
    }
  }

}