// out: layout.css

@font-face {
  font-family: 'droid';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/DroidNaskh-Regular.eot?#iefix) format('embedded-opentype'),
     url(../fonts/DroidNaskh-Regular.woff) format('woff'),
     url(../fonts/DroidNaskh-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'droid';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/DroidNaskh-Bold.eot?#iefix) format('embedded-opentype'),
     url(../fonts/DroidNaskh-Bold.woff) format('woff'),
     url(../fonts/DroidNaskh-Bold.ttf) format('truetype');
}

body {
  font-family: 'droid', "Lucida Grande", Verdana;
}

.btn, h1, h2, h3, h4, h5, h6 {
  font-family: 'droid';
}

a {
  &.disabled-link {
    pointer-events: none;
    cursor: default;
    opacity: 0.4;
  }
}

button:active, .btn:active,
button:active:focus, .btn:active:focus,
button.active:focus, .btn.active:focus,
button:focus, .btn:focus{
  outline: none;
}

button.btn-round {
  padding: 4px 7px;
  line-height: 100%;
  font-size: 22px;
  border-radius: 50px;
}

nav {
  &.navbar.navbar-default {
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
  }
}

footer {
  min-height: 50px;
}

.align {
  &.center{ text-align: center; }
  &.left{ text-align: left; }
  &.right{ text-align: right; }
}

.image-link {
  display: inline-block;
  overflow: hidden;
  border-radius: 3px;
  opacity: 0.6;
  transition: opacity 0.4s;

  &:hover {
    opacity: 1;
  }
}

.latin {
  font: 14px;// "Lucida Grande", Helvetica, Arial, sans-serif;
  direction: ltr;
}
.serif {
  font-family: serif;
}
.flag {
  background-color: #505050;
  color: #FFF;
  padding: 0px 7px 2px 7px;
  border-radius: 3px;
}
.ltr {
  direction: ltr;
}

.text-middle { vertical-align: middle !important; }
.text-bottom { vertical-align: bottom !important; }

.row {
  &.form-field {
    margin-bottom: 10px;

    label {
      padding-top:5px;
    }
  }
}

.btn-tag {
  display: inline-block;
  margin-top: 5px;
  margin-left: 5px;
}

.body-text {
  line-height: 200%;
}

.space20 { margin: 10px 0; }
.space30 { margin: 15px 0; }
.space40 { margin: 20px 0; }

.lat {
  direction: ltr;
}

table {
  .sortable-title {
    cursor: pointer;
    color: #5E8EC5;
  }

  tbody:not(:first-child) {
    border: none;
  }

  .section-heading {
    background-color: white !important;
    border-bottom: 2px solid #888;

    td {
      height: 50px;
    }
  }

  td.not-yet {
    background-color: #EEE;
  }
  td.expired {
    background-color: #EEE;
  }
}

.book-info {
  .book-desc {
    margin: 15px 0;
  }
}

.entry {
  // max-width: 600px;
  // margin: 0 auto 3em auto;
  margin-bottom: 3em;

  .entry-title {
    h1 {
      display: inline-block;
      font-size: 28px;
      color: #2745D8;
    }

    .entry-phonetics {
      color: #00CC03;
      padding: 0 10px;
    }
  }

  .meanings {
    line-height: 170%;
    text-align: justify;

    .meaning {
      display: inline;
      padding: 0 5px;

      .meaning-index {
        font-weight: 700;
      }
    }
  }

  .entry-attachment {
    &.entry-attachment-example {
      font-style: italic;
      // padding: 0 2em;
    }

    .attachment-case {
      font-style: italic;
      font-weight: 700;
      color: #AAA;
    }
  }

  .entry-tip {
    border-right: 4px solid #AAA;
    padding-right: 10px;
    line-height: 200%;
    text-align: justify;
    margin-top: 40px;
  }


  &.entry-ltr {
    .entry-title {
      direction: ltr;
    }
    .entry-attachment {
      .attachment-title {
        float: left;
        direction: ltr;
      }
    }
    .ref {
      direction: ltr;
      margin-left: 2em;

      .ref-title {
        direction: ltr;
        display: inline-block;
      }
    }
    .entry-case {
      .case {
        direction: ltr;
      }
    }
    .meanings {
      .grammar {
        direction: ltr;
      }
    }
  }

  &.entry-rtl {
    .entry-title {
      direction: rtl;
    }
    .entry-attachment {
      .attachment-title {
        float: right;
        direction: rtl;
      }
    }
    .ref {
      direction: rtl;
      margin-right: 2em;
    }
    .entry-case {
      .case {
        direction: rtl;
      }
    }
    .meanings {
      .grammar {
        direction: rtl;
      }
    }
  }

  .entry-attachment{
    margin-right: 2em;
    margin-left: 2em;
    clear: both;
  }

  &.meaning-rtl {
    .entry-case {
      .case {
        float: right;
        width: 5em;
        padding-left: 5px;
      }
      .meanings {
        margin-right: 5em;
        border-right: 1px solid #DDD;
        padding-right: 1em;

        .ref {
          direction: rtl;
        }
      }
    }
    .meanings {
      direction: rtl;
      
      .grammar {
        text-align: right;
        color: #CC6D00;
      }
    }
    /* .entry-attachment .ref {
      direction: rtl;
      margin: 0;
    } */
  }

  &.meaning-ltr {
    .entry-case {
      .case {
        float: left;
        width: 5em;
        direction: rtl;
        padding-right: 5px;
      }
      .meanings {
        direction: ltr;
        margin-left: 5em;
        border-left: 1px solid #DDD;
        padding-left: 1em;
      }
      .ref {
        direction: ltr;
      }
    }
    .meanings {
      direction: ltr;
      
      .grammar {
        text-align: left;
        color: #CC6D00;
      }
    }
    /* .entry-attachment .ref {
      direction: ltr;
      margin: 0;
    } */
  }
}

.book-view {
  .book-cover {
    img {
      border: 5px solid #DDD;
    }
  }
  .book-desc {
    min-height: 50px;
  }
}

h1.page-title {
  position: relative;
  text-align: center;
  font-size: 24px;
  width: 80%;
  margin: 0 auto 2em;
  color: #777;

  &::before {
    position: absolute;
    content: ' ';
    height: 16px;
    // background-color: red;
    border-bottom: 1px solid #AAA;
    top: 0;
    right: 0;
    width: 100%;
    z-index: -10;
  }

  .wrapper {
    background-color: #fcfcfc;
    padding: 0 20px;
  }
}

body.user-service {
  padding-top: 2em;
}

.fa.disabled {
  color: #BBB !important;
}

.datepicker-control {
  direction: ltr;

  .ADMdtp.rtl input {
    font-family: droid, "Lucida Grande", Verdana;
  }
}
.ADMdtp-calendar-container {
  direction: ltr;
  &.rtl {
    font-family: 'droid';
  }
}

.text-right {
  text-align: right !important;
}

.text-left {
  text-align: left !important;
}