@import compass

@media all and (min-width: 1600px)
  body
    font-size: larger

  aside#lug-list
    width: auto

  #advises
    max-width: 60em

@media all and (max-width: 1024px)
  body.events.index table
    width: 100%

  form#lug_search
    right: 0
  .formats, a#banner
    margin: 0.6em auto

  table, table.list, table.dates, table.list.dates
    border-spacing: 0
    tbody th
      overflow: hidden
      max-width: 3em
    th, td
      padding: 0 !important
      font-size: smaller
      border-width: 0px !important

@media all and (max-width: 900px)
  header.top
    img.logo
      margin-left: 0
    ul.countries
      margin-right: 0

  body
    border: none
    margin: 0
    header.top h1
      margin-top: 0
    main ul
      margin-left: 0

  form#lug_search
    font-size: smaller

  body.events.index table
    font-size: smaller
    td
      border-width: 0

/* For small screen width */
@media all and (max-width: 34em)
  body
    padding: 0
  p
    padding-left: 0.4em
    padding-right: 0.4em

  header.top
    ul.countries
      display: none
    h1
      letter-spacing: initial
    h2
      font-size: initial

  form#lug_search
    display: none

  body.events.index table
    font-size: normal
    thead
      display: none
    tr td
      clear: both
      width: auto
      height: auto
      margin: 1px
      display: block
      min-height: 1.1em
      border-width: 1px !important
      &.prev-month, &.next-month
        display: none
      .day_number
        float: right
        margin: 0
      // Enough space for tactile displays
      li a, .fa-li
        padding: 0.6em 0
        +inline-block()

  dl
    dt
      min-width: auto
      text-align: left
    dd, dd.quantity
      padding-right: 1em

  aside
    display: none

  .formats, a#banner
    float: none
    padding: 0.4em 0

  .events, .moderations
    h2 + p, #advises, .helper
      display: none
    form
      .field, .actions
        max-width: 100%
        .helper p
          margin-left: 0
          padding-left: 0
        label
          width: auto
          display: block
          text-align: left
          margin-left: 0
        input, .select2-container ul, .mce-tinymce
          width: 100%
          +border-bottom-left-radius(0.4em)
        .select2-container ul
          min-width: 20em