@media all and (max-width: 1024px)
  .links, a#banner
    margin: 0.6em auto

  table, table.list, table.dates, table.list.dates
    border-spacing: 1px
    tbody th
      overflow: hidden
      max-width: 3em

@media all and (max-width: 900px)
  body
    border: none
    margin: 0
    padding: 1%
    font-size: smaller
    main ul
      margin-left: 0

  form#orga_search, button.search, .digest
    font-size: smaller !important

  table.list.dates
    th, td
      &, a
        padding: 0 !important
        font-size: inherit

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

  header.top
    nav
      display: none
    img.logo
      margin-right: 0

  form#orga_search
    display: none

  body.index
    table thead
      display: none
    &.events table tr td
      clear: both
      width: auto
      height: auto
      margin: 1px
      display: block
      font-size: larger
      min-height: 1em
      border-width: 1px !important
      &.prev-month, &.next-month, &.current-month.past
        display: none
      .day_number
        font-size: initial
      .event a
        padding: 0.4em 1em
    header
      &:active, &:hover
        & + table tr td.current-month.past
          display: block

    &.versions, &.orgas
      table tbody
        tr td
          width: auto
          padding: 0 0.2em
          display: block
          &:first-child
            float: left
        td + td + td
          display: inline-block
        td:first-child + td
          width: 100%
          display: block

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

  #advises
    font-size: smaller
    & > *
      display: none
    & > :first-child:after
      content: '...'
    & > :first-child, &:hover > *
      display: block

  aside
    display: none

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

  fieldset
    padding-left: 0
    padding-right: 0

  .field
    & > label
      width: 100%
      display: block
      text-align: left
      margin-left: 1%
    &.locality, &.repeat, &.active
      label
        width: auto
    input
      width: 100%
      display: block
      &#event_repeat, &#orga_active
        width: auto
    .radios
      margin-left: auto

  body.mce-content-body
    padding: 1px 0
  .mce-btn-group .mce-btn
    margin-left: 0 !important

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

  #advises
    max-width: 60em