diff --git a/stylesheets/skeleton1024.css b/stylesheets/skeleton1024.css new file mode 100644 index 0000000..fea9e3f --- /dev/null +++ b/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; +}