skeleton1024.css

# Added 1024px support
# Removed unnecessary comments
# Minor bugfixes in column widths on smaller screens
# Compacted the whole thing
# Removed all styling (except the CSS-reset part)

stylesheets/skeleton1024.css

@@ -0,0 +1,585 @@
+/*
+* Skeleton V1.2
+* Copyright 2011, Dave Gamache
+* www.getskeleton.com
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+*/
+
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.scale-with-grid {
+  max-width: 100%;
+  height: auto;
+}
+
+.container {
+  position: relative;
+  width: 1024px;
+  margin: 0 auto;
+  padding: 0;
+}
+
+.container .column,
+.container .columns {
+  float: left;
+  display: inline;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.row {
+  margin-bottom: 20px;
+}
+
+.column.alpha, .columns.alpha {
+  margin-left: 0;
+}
+
+.column.omega, .columns.omega {
+  margin-right: 0;
+}
+
+.container .one.column,
+.container .one.columns {
+  width: 64px;
+}
+
+.container .two.columns {
+  width: 108px;
+}
+
+.container .three.columns {
+  width: 172px;
+}
+
+.container .four.columns {
+  width: 236px;
+}
+
+.container .five.columns {
+  width: 300px;
+}
+
+.container .six.columns {
+  width: 364px;
+}
+
+.container .seven.columns {
+  width: 428px;
+}
+
+.container .eight.columns {
+  width: 492px;
+}
+
+.container .nine.columns {
+  width: 556px;
+}
+
+.container .ten.columns {
+  width: 620px;
+}
+
+.container .eleven.columns {
+  width: 684px;
+}
+
+.container .twelve.columns {
+  width: 748px;
+}
+
+.container .thirteen.columns {
+  width: 812px;
+}
+
+.container .fourteen.columns {
+  width: 876px;
+}
+
+.container .fifteen.columns {
+  width: 940px;
+}
+
+.container .sixteen.columns {
+  width: 1004px;
+}
+
+
+.container .offset-by-one {
+  padding-left: 64px;
+}
+
+.container .offset-by-two {
+  padding-left: 128px;
+}
+
+.container .offset-by-three {
+  padding-left: 192px;
+}
+
+.container .offset-by-four {
+  padding-left: 256px;
+}
+
+.container .offset-by-five {
+  padding-left: 320px;
+}
+
+.container .offset-by-six {
+  padding-left: 384px;
+}
+
+.container .offset-by-seven {
+  padding-left: 448px;
+}
+
+.container .offset-by-eight {
+  padding-left: 512px;
+}
+
+.container .offset-by-nine {
+  padding-left: 576px;
+}
+
+.container .offset-by-ten {
+  padding-left: 640px;
+}
+
+.container .offset-by-eleven {
+  padding-left: 704px;
+}
+
+.container .offset-by-twelve {
+  padding-left: 768px;
+}
+
+.container .offset-by-thirteen {
+  padding-left: 832px;
+}
+
+.container .offset-by-fourteen {
+  padding-left: 896px;
+}
+
+.container .offset-by-fifteen {
+  padding-left: 960px;
+}
+
+@media only screen and (min-width: 959px) and (max-width: 1024px) {
+  .container {
+    width: 960px;
+  }
+
+  .container .one.column,
+  .container .one.columns {
+    width: 40px;
+  }
+
+  .container .two.columns {
+    width: 100px;
+  }
+
+  .container .three.columns {
+    width: 160px;
+  }
+
+  .container .four.columns {
+    width: 220px;
+  }
+
+  .container .five.columns {
+    width: 280px;
+  }
+
+  .container .six.columns {
+    width: 340px;
+  }
+
+  .container .seven.columns {
+    width: 400px;
+  }
+
+  .container .eight.columns {
+    width: 460px;
+  }
+
+  .container .nine.columns {
+    width: 520px;
+  }
+
+  .container .ten.columns {
+    width: 580px;
+  }
+
+  .container .eleven.columns {
+    width: 640px;
+  }
+
+  .container .twelve.columns {
+    width: 700px;
+  }
+
+  .container .thirteen.columns {
+    width: 760px;
+  }
+
+  .container .fourteen.columns {
+    width: 820px;
+  }
+
+  .container .fifteen.columns {
+    width: 880px;
+  }
+
+  .container .sixteen.columns {
+    width: 940px;
+  }
+
+  .container .offset-by-one {
+    padding-left: 60px;
+  }
+
+  .container .offset-by-two {
+    padding-left: 120px;
+  }
+
+  .container .offset-by-three {
+    padding-left: 180px;
+  }
+
+  .container .offset-by-four {
+    padding-left: 240px;
+  }
+
+  .container .offset-by-five {
+    padding-left: 300px;
+  }
+
+  .container .offset-by-six {
+    padding-left: 360px;
+  }
+
+  .container .offset-by-seven {
+    padding-left: 420px;
+  }
+
+  .container .offset-by-eight {
+    padding-left: 480px;
+  }
+
+  .container .offset-by-nine {
+    padding-left: 540px;
+  }
+
+  .container .offset-by-ten {
+    padding-left: 600px;
+  }
+
+  .container .offset-by-eleven {
+    padding-left: 660px;
+  }
+
+  .container .offset-by-twelve {
+    padding-left: 720px;
+  }
+
+  .container .offset-by-thirteen {
+    padding-left: 780px;
+  }
+
+  .container .offset-by-fourteen {
+    padding-left: 840px;
+  }
+
+  .container .offset-by-fifteen {
+    padding-left: 900px;
+  }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 959px) {
+  .container {
+    width: 768px;
+  }
+  .container .column,
+  .container .columns {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+  .column.alpha, .columns.alpha {
+    margin-left: 0;
+    margin-right: 10px;
+  }
+  .column.omega, .columns.omega {
+    margin-right: 0;
+    margin-left: 10px;
+  }
+  .alpha.omega {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .container .one.column,
+  .container .one.columns {
+    width: 28px;
+  }
+  .container .two.columns {
+    width: 76px;
+  }
+  .container .three.columns {
+    width: 124px;
+  }
+  .container .four.columns {
+    width: 172px;
+  }
+  .container .five.columns {
+    width: 220px;
+  }
+  .container .six.columns {
+    width: 268px;
+  }
+  .container .seven.columns {
+    width: 316px;
+  }
+  .container .eight.columns {
+    width: 364px;
+  }
+  .container .nine.columns {
+    width: 412px;
+  }
+  .container .ten.columns {
+    width: 460px;
+  }
+  .container .eleven.columns {
+    width: 508px;
+  }
+  .container .twelve.columns {
+    width: 556px;
+  }
+  .container .thirteen.columns {
+    width: 604px;
+  }
+  .container .fourteen.columns {
+    width: 652px;
+  }
+  .container .fifteen.columns {
+    width: 700px;
+  }
+  .container .sixteen.columns {
+    width: 748px;
+  }
+
+  .container .one-third.column {
+    width: 236px;
+  }
+  .container .two-thirds.column {
+    width: 492px;
+  }
+
+  .container .offset-by-one {
+    padding-left: 48px;
+  }
+  .container .offset-by-two {
+    padding-left: 96px;
+  }
+  .container .offset-by-three {
+    padding-left: 144px;
+  }
+  .container .offset-by-four {
+    padding-left: 192px;
+  }
+  .container .offset-by-five {
+    padding-left: 240px;
+  }
+  .container .offset-by-six {
+    padding-left: 288px;
+  }
+  .container .offset-by-seven {
+    padding-left: 336px;
+  }
+  .container .offset-by-eight {
+    padding-left: 384px;
+  }
+  .container .offset-by-nine {
+    padding-left: 432px;
+  }
+  .container .offset-by-ten {
+    padding-left: 480px;
+  }
+  .container .offset-by-eleven {
+    padding-left: 528px;
+  }
+  .container .offset-by-twelve {
+    padding-left: 576px;
+  }
+  .container .offset-by-thirteen {
+    padding-left: 624px;
+  }
+  .container .offset-by-fourteen {
+    padding-left: 672px;
+  }
+  .container .offset-by-fifteen {
+    padding-left: 720px;
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .container {
+    width: 300px;
+  }
+  .container .columns,
+  .container .column {
+    margin: 0;
+  }
+
+  .container .one.column,
+  .container .one.columns,
+  .container .two.columns,
+  .container .three.columns,
+  .container .four.columns,
+  .container .five.columns,
+  .container .six.columns,
+  .container .seven.columns {
+    width: 270px;
+  }
+  .container .eight.columns,
+  .container .nine.columns,
+  .container .ten.columns,
+  .container .eleven.columns,
+  .container .twelve.columns,
+  .container .thirteen.columns,
+  .container .fourteen.columns,
+  .container .fifteen.columns,
+  .container .sixteen.columns,
+  .container .one-third.column,
+  .container .two-thirds.column {
+    width: 280px;
+  }
+
+/* Offsets */
+  .container .offset-by-one,
+  .container .offset-by-two,
+  .container .offset-by-three,
+  .container .offset-by-four,
+  .container .offset-by-five,
+  .container .offset-by-six,
+  .container .offset-by-seven,
+  .container .offset-by-eight,
+  .container .offset-by-nine,
+  .container .offset-by-ten,
+  .container .offset-by-eleven,
+  .container .offset-by-twelve,
+  .container .offset-by-thirteen,
+  .container .offset-by-fourteen,
+  .container .offset-by-fifteen {
+    padding-left: 0;
+  }
+
+}
+
+@media only screen and (min-width: 480px) and (max-width: 767px) {
+  .container {
+    width: 420px;
+  }
+  .container .columns,
+  .container .column {
+    margin: 0;
+  }
+
+  .container .one.column,
+  .container .one.columns,
+  .container .two.columns,
+  .container .three.columns,
+  .container .four.columns,
+  .container .five.columns,
+  .container .six.columns,
+  .container .seven.columns {
+    width: 390px;
+  }
+  .container .eight.columns,
+  .container .nine.columns,
+  .container .ten.columns,
+  .container .eleven.columns,
+  .container .twelve.columns,
+  .container .thirteen.columns,
+  .container .fourteen.columns,
+  .container .fifteen.columns,
+  .container .sixteen.columns,
+  .container .one-third.column,
+  .container .two-thirds.column {
+    width: 400px;
+  }
+}
+
+.container:after {
+  content: "\0020";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+.clearfix:before,
+.clearfix:after,
+.row:before,
+.row:after {
+  content: '\0020';
+  display: block;
+  overflow: hidden;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
+
+.row:after,
+.clearfix:after {
+  clear: both;
+}
+
+.row,
+.clearfix {
+  zoom: 1;
+}
+
+.clear {
+  clear: both;
+  display: block;
+  overflow: hidden;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}