{"sections":[{"urls":[],"urlPrefixes":[],"domains":[],"regexps":[],"code":"/**\r\n * @file AListApart-for-wide-screens.css\r\n * @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.\r\n *\r\n * @author Bevan Rudge, http://Drupal.geek.nz\r\n * @date 26 May 2010\r\n * @copyright Bevan Rudge\r\n * @license Creative Commons Attribution-ShareAlike 3.0 Unported License.\r\n * @url http://userstyles.org/styles/31057\r\n * @screenshots http://www.flickr.com/photos/bevanr/sets/72157624138410342/\r\n */\r\n\r\n/* Each column must be \u003e=540px to fit the illustrations. We can fit two columns plus the margins and sidebar at 1570px. */\r\n@media screen and (min-width: 1570px) {\r\n  /* Adjust the layout. */\r\n  #main {\r\n    width: 100% !important;\r\n    /* Push the grey vertical border/line hard right. It's now on the right edge of the sidebar instead of the left. */\r\n    background-position: 99% 0 !important;\r\n  }\r\n\r\n  #content {\r\n    width: 81.8% !important;\r\n    padding: 0;\r\n    /* Columnize the content. */\r\n    -moz-column-count: 2;\r\n    -moz-column-gap: 2em;\r\n  }\r\n\r\n  /* In order to achieve this simplistically, make the sidebar flexible width instead of fixed width. */\r\n  #sidebar {\r\n    width: 16%;\r\n    padding-left: 1%;\r\n  }\r\n\r\n  /* Text in columns is easier to read when it's justified, IHMHO. */\r\n  #main p { text-align: justify; }\r\n  /* Since the columns are flexi-width, they may be wider than 540px.  Center the illustrations within the column. */\r\n  .illustration { margin: 0 auto; }\r\n}\r\n\r\n/* 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. */\r\n@media screen and (min-width: 2090px)\r\n{\r\n  #content {\r\n    -moz-column-count: 3;\r\n    width: 89.8% !important;\r\n  }\r\n  #sidebar { width: 8%; }\r\n}"}],"url":"http://userstyles.org/styles/31057","updateUrl":"https://userstyles.org/styles/chrome/31057.json","md5Url":"https://update.userstyles.org/31057.md5","originalMd5":"4bac617bae050249f7c63d559737c427","name":"AListApart.com for wide screens","thumbnail":"https://userstyles.org/style_screenshots/31057_after.png?r=1779508823"}