SpeciesFileGroup/taxonworks

/* see
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
 */
.horizontal-center-content {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}

.horizontal-left-content {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
}

.horizontal-right-content {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-end;
}

.middle {
  display: flex;
  align-items: center;
}

.align-start {
  display: flex;
  align-items: flex-start;
}

.align-end {
  display: flex;
  align-items: flex-end;
}

.flex-separate {
  display: flex;
  justify-content: space-between;
}

.flex-around {
  display: flex;
  justify-content: space-around;
}

.separate-top {
  margin-top: $standard_padding * 0.5;
}

.separate-bottom {
  margin-bottom: $standard_padding;
}

.flexbox {
  display: -webkit-box;
  display: -moz-box; // TODO: not valid?
  display: -ms-flexbox; // TODO: not valid?
  display: -webkit-flex;
  -webkit-flex-flow: row wrap;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;

  .item img {
    display: block;
  }
}

// sensu CSS tricks: TOOD: probably a much saner default than .flexbox above
.simple_flexbox {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.flexbox > * {
  flex: 1 100%;
}

.flex-wrap-row {
  width: auto;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap !important;
  flex-direction: row !important;
}

.flex-wrap-column {
  display: flex;
  justify-content: flex-start;
  width: auto;
  flex-wrap: wrap !important;
  flex-direction: column !important;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.item {
  word-wrap: break-word;
  flex: 1 auto;
}

@media all and (min-width: 400px) {
  .item {
    flex: 1 auto;
  }
  .column-big {
    flex: 3 auto;
  }
  .column-medium {
    flex: 2 auto;
  }
  .column-small {
    flex: 1 auto;
  }
  .column-tiny {
    flex: 0.5 auto;
  }
}

@media all and (min-width: 800px) {
  .item1 {
    order: 1;
  }
  .item2 {
    order: 2;
  }
  .item3 {
    order: 3;
  }
  .item4 {
    order: 4;
  }
  .item5 {
    order: 5;
  }
  .item6 {
    order: 6;
  }
}