/**
 * @file AListApart-for-wide-screens.css
 * @description Reformats AListApart.com article pages for wider screens, but only when the browser is wide enough.  This currently only works in recent versions of Firefox that support -moz-column-count (column-count in standard CSS3).  It wouldn't take much to add support for webkit and other modern browsers that support CSS3 multicolumn layouts.
 *
 * @author Bevan Rudge, http://Drupal.geek.nz
 * @date 26 May 2010
 * @copyright Bevan Rudge
 * @license Creative Commons Attribution-ShareAlike 3.0 Unported License.
 * @url http://userstyles.org/styles/31057
 * @screenshots http://www.flickr.com/photos/bevanr/sets/72157624138410342/
 */

/* Each column must be >=540px to fit the illustrations. We can fit two columns plus the margins and sidebar at 1570px. */
@media screen and (min-width: 1570px) {
  /* Adjust the layout. */
  #main {
    width: 100% !important;
    /* Push the grey vertical border/line hard right. It's now on the right edge of the sidebar instead of the left. */
    background-position: 99% 0 !important;
  }

  #content {
    width: 81.8% !important;
    padding: 0;
    /* Columnize the content. */
    -moz-column-count: 2;
    -moz-column-gap: 2em;
  }

  /* In order to achieve this simplistically, make the sidebar flexible width instead of fixed width. */
  #sidebar {
    width: 16%;
    padding-left: 1%;
  }

  /* Text in columns is easier to read when it's justified, IHMHO. */
  #main p { text-align: justify; }
  /* Since the columns are flexi-width, they may be wider than 540px.  Center the illustrations within the column. */
  .illustration { margin: 0 auto; }
}

/* Adjust some of the above elements when the viewport is large enough for 3 columns. This is adds to the above CSS, not replaces it. */
@media screen and (min-width: 2090px)
{
  #content {
    -moz-column-count: 3;
    width: 89.8% !important;
  }
  #sidebar { width: 8%; }
}