/**
 * This stylesheet defines rules for box sizing that can be reused by
 * the layouts (and other components that require relative widths).
 * 
 * @author Robert Turnbull <rturnbul@uottawa.ca>
 */

.uol--width--1000 {
  width: 100%;
}
.uol--width--750 {
  width: 75%;
}
.uol--width--667 {
  width: 66.7%;
}
.uol--width--500 {
  width: 50%;
}
.uol--width--400 {
  width: 40%;
}
.uol--width--375 {
  width: 37.5%;
}
.uol--width--333 {
  width: 33.3%;
}
.uol--width--300 {
  width: 30%;
}
.uol--width--250 {
  width: 25%;
}
.uol--width--200 {
  width: 20%;
}
.uol--width--100 {
  width: 10%;
}

.uol--columns--3 {
  -ms-columns: 3;
  -moz-columns: 3;
  -webkit-columns: 3;
  columns: 3;
}

@media (min-width: 0px) and (max-width: 735px) {
  .uol--width--1000,
  .uol--width--750,
  .uol--width--667,
  .uol--width--500,
  .uol--width--400,
  .uol--width--375,
  .uol--width--333,
  .uol--width--300,
  .uol--width--250,
  .uol--width--200,
  .uol--width--100 {
    width: 100%;
  }
}

.uol--maxwidth--1000 {
  max-width: 100%;
  display: inline-block;
  width: auto;
}
.uol--maxwidth--750 {
  max-width: 75%;
  display: inline-block;
  width: auto;
}
.uol--maxwidth--667 {
  max-width: 66.7%;
  display: inline-block;
  width: auto;
}
.uol--maxwidth--500 {
  max-width: 50%;
  display: inline-block;
  width: auto;
}
.uol--maxwidth--375 {
  max-width: 37.5%;
  display: inline-block;
  width: auto;
}
.uol--maxwidth--333 {
  max-width: 33.3%;
  display: inline-block;
  width: auto;
}
.uol--maxwidth--250 {
  max-width: 25%;
  display: inline-block;
  width: auto;
}