From 154a70ed5896cf052d785463355379f3d5599258 Mon Sep 17 00:00:00 2001 From: Nick Pack Date: Fri, 17 May 2013 11:08:30 +0100 Subject: [PATCH 1/3] Grunt based builds --- .gitignore | 3 +- Gruntfile.js | 46 ++++ css/skeleton.css | 616 ----------------------------------------------- package.json | 36 +++ 4 files changed, 84 insertions(+), 617 deletions(-) create mode 100644 Gruntfile.js delete mode 100644 css/skeleton.css create mode 100644 package.json diff --git a/.gitignore b/.gitignore index ad28d89..9a1d2a5 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -.sass-cache/* \ No newline at end of file +.sass-cache/* +node_modules \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..56d52a8 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,46 @@ +module.exports = function(grunt) { + + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + // CSS + sass: { + dist: { + files: { + 'css/skeleton.css': 'scss/skeleton.scss', + } + } + }, + csslint: { + scssoutput: { + options: { + import: false + }, + src: ['css/skeleton.css'] + } + }, + cssmin: { + compress: { + options: { + banner: '/* <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today("dd-mm-yyyy") %> */' + }, + files: { + 'css/skeleton.min.css': 'css/skeleton.css' + } + }, + }, + watch: { + files: 'scss/**/*', + tasks: ['sass', 'csslint', 'cssmin'] + } + }); + + grunt.loadNpmTasks('grunt-contrib-csslint'); + grunt.loadNpmTasks('grunt-contrib-cssmin'); + grunt.loadNpmTasks('grunt-contrib-sass'); + grunt.loadNpmTasks('grunt-contrib-watch'); + + grunt.registerTask('lint', ['sass', 'csslint']); + grunt.registerTask('minify', ['sass', 'cssmin']); + grunt.registerTask('build', ['sass', 'cssmin']); + +}; \ No newline at end of file diff --git a/css/skeleton.css b/css/skeleton.css deleted file mode 100644 index fcda9fd..0000000 --- a/css/skeleton.css +++ /dev/null @@ -1,616 +0,0 @@ -/* -* Skeleton V1.2 -* Copyright 2011, Dave Gamache -* -* SCSS Conversion and Mixins by Nick Pack -* -* www.getskeleton.com -* Free to use under the MIT license. -* http://www.opensource.org/licenses/mit-license.php -* 6/20/2012 -*/ -/* ul, ol with disc, square etc. */ -/* #Reset & Basics (Inspired by E. Meyers) -================================================== */ -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; } - -/* #Misc -================================================== */ -.remove-bottom { - margin-bottom: 0 !important; } - -.half-bottom { - margin-bottom: 10px !important; } - -.add-bottom { - margin-bottom: 20px !important; } - -/* #Basic Styles -================================================== */ -body { - background: #fff; - font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #444; - -webkit-text-size-adjust: 100%; } - -/* #Forms -================================================== */ -.container { - position: relative; - margin: 0 auto; - padding: 0; } - -.column, .columns { - float: left; - display: inline; - margin-left: 10px; - margin-right: 10px; } - .column.alpha, .columns.alpha { - margin-left: 0; } - .column.omerga, .columns.omerga { - margin-right: 0; } - -.row { - margin-bottom: 20px; } - -.container { - width: 960px; } - .container .columns.one, .container .column.one { - width: 40px; } - .container .columns.two, .container .column.two { - width: 100px; } - .container .columns.three, .container .column.three { - width: 160px; } - .container .columns.four, .container .column.four { - width: 220px; } - .container .columns.five, .container .column.five { - width: 280px; } - .container .columns.six, .container .column.six { - width: 340px; } - .container .columns.seven, .container .column.seven { - width: 400px; } - .container .columns.eight, .container .column.eight { - width: 460px; } - .container .columns.nine, .container .column.nine { - width: 520px; } - .container .columns.ten, .container .column.ten { - width: 580px; } - .container .columns.eleven, .container .column.eleven { - width: 640px; } - .container .columns.twelve, .container .column.twelve { - width: 700px; } - .container .columns.thirteen, .container .column.thirteen { - width: 760px; } - .container .columns.fourteen, .container .column.fourteen { - width: 820px; } - .container .columns.fifteen, .container .column.fifteen { - width: 880px; } - .container .columns.sixteen, .container .column.sixteen { - width: 940px; } - .container .columns.one-third, .container .column.one-third { - width: 300px; } - .container .columns.two-thirds, .container .column.two-thirds { - width: 620px; } - .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 (max-width: 959px) { - .container { - width: 768px; } - .container .columns.one, .container .column.one { - width: 28px; } - .container .columns.two, .container .column.two { - width: 76px; } - .container .columns.three, .container .column.three { - width: 124px; } - .container .columns.four, .container .column.four { - width: 172px; } - .container .columns.five, .container .column.five { - width: 220px; } - .container .columns.six, .container .column.six { - width: 268px; } - .container .columns.seven, .container .column.seven { - width: 316px; } - .container .columns.eight, .container .column.eight { - width: 364px; } - .container .columns.nine, .container .column.nine { - width: 412px; } - .container .columns.ten, .container .column.ten { - width: 460px; } - .container .columns.eleven, .container .column.eleven { - width: 508px; } - .container .columns.twelve, .container .column.twelve { - width: 556px; } - .container .columns.thirteen, .container .column.thirteen { - width: 604px; } - .container .columns.fourteen, .container .column.fourteen { - width: 652px; } - .container .columns.fifteen, .container .column.fifteen { - width: 700px; } - .container .columns.sixteen, .container .column.sixteen { - width: 748px; } - .container .columns.one-third, .container .column.one-third { - width: 236px; } - .container .columns.two-thirds, .container .column.two-thirds { - 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; } - - .container { - width: 768px; } - - .column.alpha, .columns.alpha { - margin-right: 10px; } - .column.omega, .columns.omega { - margin-left: 10px; } - - .alpha.omega { - margin-right: 0; - margin-left: 0; } } -@media only screen and (max-width: 767px) { - .container { - width: 90%; } - .container .column, .container .columns { - margin: 0; } - .container .column.one, .container .column.two, .container .column.three, .container .column.four, .container .column.five, .container .column.six, .container .column.seven, .container .column.eight, .container .column.nine, .container .column.ten, .container .column.eleven, .container .column.twelve, .container .column.thirteen, .container .column.fourteen, .container .column.fifteen, .container .column.sixteen, .container .column.one-third, .container .column.two-thirds, .container .columns.one, .container .columns.two, .container .columns.three, .container .columns.four, .container .columns.five, .container .columns.six, .container .columns.seven, .container .columns.eight, .container .columns.nine, .container .columns.ten, .container .columns.eleven, .container .columns.twelve, .container .columns.thirteen, .container .columns.fourteen, .container .columns.fifteen, .container .columns.sixteen, .container .columns.one-third, .container .columns.two-thirds { - width: 100%; } - .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; } } -/* #Clearing -================================================== */ -/* Self Clearing Goodness */ -.container:after { - content: "\0020"; - display: block; - height: 0; - clear: both; - visibility: hidden; } - -/* Use clearfix class on parent to clear nested columns, -or wrap each row of columns in a
*/ -.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; } - -/* You can also use a
to clear columns */ -.clear { - clear: both; - display: block; - overflow: hidden; - visibility: hidden; - width: 0; - height: 0; } - -/* #Typography -================================================== */ -/* @font-face { - font-family: 'FontName'; - src: url('../fonts/FontName.eot'); - src: url('../fonts/FontName.eot?iefix') format('eot'), - url('../fonts/FontName.woff') format('woff'), - url('../fonts/FontName.ttf') format('truetype'), - url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); - font-weight: normal; - font-style: normal; } -*/ -h1, h2, h3, h4, h5, h6 { - color: #181818; - font-family: "Georgia", "Times New Roman", serif; - font-weight: normal; } - -h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { - font-weight: inherit; } - -h1 { - font-size: 46px; - line-height: 50px; - margin: 0 0 14px 0; } - -h2 { - font-size: 35px; - line-height: 40px; - margin: 0 0 10px 0; } - -h3 { - font-size: 28px; - line-height: 34px; - margin: 0 0 8px 0; } - -h4 { - font-size: 21px; - line-height: 30px; - margin: 0 0 4px 0; } - -h5 { - font-size: 17px; - line-height: 24px; } - -h6 { - font-size: 14px; - line-height: 21px; } - -.subheader { - color: #777777; } - -p { - margin: 0 0 20px 0; } - -p img { - margin: 0; } - -p.lead { - font-size: 21px; - line-height: 27px; - color: #777777; } - -em { - font-style: italic; } - -strong { - font-weight: bold; - color: #333333; } - -small { - font-size: 80%; } - -/* Blockquotes */ -blockquote, blockquote p { - font-size: 17px; - line-height: 24px; - color: #777777; - font-style: italic; } - -blockquote { - margin: 0 0 20px; - padding: 9px 20px 0 19px; - border-left: 1px solid #dddddd; } - -blockquote cite { - display: block; - font-size: 12px; - color: #555555; } - -blockquote cite:before { - content: "\2014 \0020"; } - -blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { - color: #555555; } - -/* not really typographical, but I couldnt find anywhere else to put it */ -hr { - border: solid #dddddd; - border-width: 1px 0 0; - clear: both; - margin: 10px 0 30px; - height: 0; } - -/* #Links -================================================== */ -a, a:visited { - color: #333333; - text-decoration: underline; - outline: 0; } - -a:hover, a:focus { - color: black; - text-decoration: none; } - -p a, p a:visited { - line-height: inherit; } - -/* #Lists -================================================== */ -ul, ol { - margin: 0 0 20px 0; } - -ul { - list-style: none outside; } - -ol { - list-style: decimal; } - -ol, ul.square, ul.circle, ul.disc { - margin: 0 0 0 30px; } - -ul.square { - list-style: square outside; } - -ul.circle { - list-style: circle outside; } - -ul.disc { - list-style: disc outside; } - -ul ul, ul ol, -ol ol, ol ul { - margin: 4px 0 5px 30px; - font-size: 90%; } - -li { - line-height: 18px; - margin: 0 0 12px 0; } - -ul.large li { - line-height: 21px; } - -li p { - line-height: 21px; } - -/* #Buttons -================================================== */ -.button, -button, -input[type="submit"], -input[type="reset"], -input[type="button"] { - background-color: rgba(153, 153, 153, 0.2); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.2)), to(rgba(0, 0, 0, 0.2))); - background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); - background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); - background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); - background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); - background-repeat: repeat-x; - border: 1px solid #aaaaaa; - border-top: 1px solid #cccccc; - border-left: 1px solid #cccccc; - border-radius: 3px; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - color: #444444; - display: inline-block; - font-size: 11px; - font-weight: bold; - text-decoration: none; - text-shadow: 0 1px rgba(255, 255, 255, 0.75); - cursor: pointer; - margin: 0 0 20px 0; - line-height: normal; - padding: 8px 10px; - font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } - -.button:hover, -button:hover, -input[type="submit"]:hover, -input[type="reset"]:hover, -input[type="button"]:hover { - background-color: rgba(153, 153, 153, 0.3); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.3)), to(rgba(0, 0, 0, 0.3))); - background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); - background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); - background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); - background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); - background-repeat: repeat-x; - color: #222222; - border: 1px solid #888888; - border-top: 1px solid #aaaaaa; - border-left: 1px solid #aaaaaa; } - -.button:active, -button:active, -input[type="submit"]:active, -input[type="reset"]:active, -input[type="button"]:active { - background-color: rgba(153, 153, 153, 0.2); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.2)), to(rgba(0, 0, 0, 0.2))); - background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); - background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); - background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); - background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); - background-repeat: repeat-x; - border: 1px solid #666666; } - -.button.full-width, -button.full-width, -input[type="submit"].full-width, -input[type="reset"].full-width, -input[type="button"].full-width { - width: 100%; - padding-left: 0 !important; - padding-right: 0 !important; - text-align: center; } - -/* Fix for odd Mozilla border & padding issues */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; } - -/* #Forms -================================================== */ -form { - margin: 0 0 20px 0; } - -fieldset { - margin: 0 0 20px 0; } - -input[type="search"], -input[type="url"] { - -webkit-appearance: textfield; - -moz-appearance: textfield; } - -input[type="text"], -input[type="password"], -input[type="email"], -input[type="search"], -input[type="url"], -input[type="number"], -input[type="tel"], -textarea, -select { - border: 1px solid #cccccc; - padding: 6px 4px; - outline: none; - border-radius: 2px; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #777777; - width: 210px; - max-width: 100%; - display: block; - margin: 0 0 20px 0; - background: white; } - -select { - padding: 0; } - -input[type="text"]:focus, -input[type="password"]:focus, -input[type="email"]:focus, -input[type="search"]:focus, -input[type="url"]:focus, -input[type="number"]:focus, -input[type="tel"]:focus, -textarea:focus { - border: 1px solid #aaaaaa; - color: #444444; - -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); - -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); - box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); } - -textarea { - min-height: 60px; } - -label, -legend { - display: block; - font-weight: bold; - font-size: 13px; } - -select { - width: 220px; } - -input[type="checkbox"] { - display: inline; } - -label span, -legend span { - font-weight: normal; - font-size: 13px; - color: #444444; } - -/* #Images -================================================== */ -img.scale-with-grid { - max-width: 100%; - height: auto; } - -/* #Media Queries -================================================== */ -/* Smaller than standard 960 (devices and browsers) */ -/* Tablet Portrait size to standard 960 (devices and browsers) */ -/* All Mobile Sizes (devices and browser) */ -/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ -/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ diff --git a/package.json b/package.json new file mode 100644 index 0000000..3ea9e90 --- /dev/null +++ b/package.json @@ -0,0 +1,36 @@ +{ + "name": "Skeleton-SCSS", + "title": "Skeleton SCSS", + "description": "Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.", + "version": "1.0.0", + "homepage": "https://github.com/nickpack/Skeleton-SCSS", + "author": { + "name": "Nick Pack", + "email": "nick@nickpack.com", + "url": "http://0xdeadfa11.net" + }, + "repository": { + "type": "git", + "url": "git@github.com:nickpack/Skeleton-SCSS.git" + }, + "bugs": { + "url": "https://github.com/nickpack/Skeleton-SCSS/issues" + }, + "licenses": [ + { + "type": "MIT", + "url": "https://github.com/nickpack/Skeleton-SCSS/blob/master/LICENSE-MIT" + } + ], + "main": "./index", + "keywords": [ + "static" + ], + "devDependencies": { + "grunt": "~0.4.1", + "grunt-contrib-watch": "~0.3.1", + "grunt-contrib-sass": "~0.3.0", + "grunt-contrib-csslint": "~0.1.1", + "grunt-contrib-cssmin": "~0.5.0" + } +} \ No newline at end of file From 217b549133adbbd6fba333018d7fd2efdbc5ebe1 Mon Sep 17 00:00:00 2001 From: Nick Pack Date: Fri, 17 May 2013 11:12:21 +0100 Subject: [PATCH 2/3] Added updated CSS files and switched the index file to the minified version --- css/skeleton.css | 616 +++++++++++++++++++++++++++++++++++++++++++ css/skeleton.min.css | 2 + index.html | 2 +- 3 files changed, 619 insertions(+), 1 deletion(-) create mode 100644 css/skeleton.css create mode 100644 css/skeleton.min.css diff --git a/css/skeleton.css b/css/skeleton.css new file mode 100644 index 0000000..eff5121 --- /dev/null +++ b/css/skeleton.css @@ -0,0 +1,616 @@ +/* +* Skeleton SCSS V1.0 +* Skeleton is Copyright 2011, Dave Gamache +* +* SCSS Conversion and Mixins by Nick Pack +* +* www.getskeleton.com +* Free to use under the MIT license. +* http://www.opensource.org/licenses/mit-license.php +* 6/20/2012 +*/ +/* ul, ol with disc, square etc. */ +/* #Reset & Basics (Inspired by E. Meyers) +================================================== */ +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; } + +/* #Misc +================================================== */ +.remove-bottom { + margin-bottom: 0 !important; } + +.half-bottom { + margin-bottom: 10px !important; } + +.add-bottom { + margin-bottom: 20px !important; } + +/* #Basic Styles +================================================== */ +body { + background: #fff; + font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #444; + -webkit-text-size-adjust: 100%; } + +/* #Forms +================================================== */ +.container { + position: relative; + margin: 0 auto; + padding: 0; } + +.column, .columns { + float: left; + display: inline; + margin-left: 10px; + margin-right: 10px; } + .column.alpha, .columns.alpha { + margin-left: 0; } + .column.omega, .columns.omega { + margin-right: 0; } + +.row { + margin-bottom: 20px; } + +.container { + width: 960px; } + .container .columns.one, .container .column.one { + width: 40px; } + .container .columns.two, .container .column.two { + width: 100px; } + .container .columns.three, .container .column.three { + width: 160px; } + .container .columns.four, .container .column.four { + width: 220px; } + .container .columns.five, .container .column.five { + width: 280px; } + .container .columns.six, .container .column.six { + width: 340px; } + .container .columns.seven, .container .column.seven { + width: 400px; } + .container .columns.eight, .container .column.eight { + width: 460px; } + .container .columns.nine, .container .column.nine { + width: 520px; } + .container .columns.ten, .container .column.ten { + width: 580px; } + .container .columns.eleven, .container .column.eleven { + width: 640px; } + .container .columns.twelve, .container .column.twelve { + width: 700px; } + .container .columns.thirteen, .container .column.thirteen { + width: 760px; } + .container .columns.fourteen, .container .column.fourteen { + width: 820px; } + .container .columns.fifteen, .container .column.fifteen { + width: 880px; } + .container .columns.sixteen, .container .column.sixteen { + width: 940px; } + .container .columns.one-third, .container .column.one-third { + width: 300px; } + .container .columns.two-thirds, .container .column.two-thirds { + width: 620px; } + .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 (max-width: 959px) { + .container { + width: 768px; } + .container .columns.one, .container .column.one { + width: 28px; } + .container .columns.two, .container .column.two { + width: 76px; } + .container .columns.three, .container .column.three { + width: 124px; } + .container .columns.four, .container .column.four { + width: 172px; } + .container .columns.five, .container .column.five { + width: 220px; } + .container .columns.six, .container .column.six { + width: 268px; } + .container .columns.seven, .container .column.seven { + width: 316px; } + .container .columns.eight, .container .column.eight { + width: 364px; } + .container .columns.nine, .container .column.nine { + width: 412px; } + .container .columns.ten, .container .column.ten { + width: 460px; } + .container .columns.eleven, .container .column.eleven { + width: 508px; } + .container .columns.twelve, .container .column.twelve { + width: 556px; } + .container .columns.thirteen, .container .column.thirteen { + width: 604px; } + .container .columns.fourteen, .container .column.fourteen { + width: 652px; } + .container .columns.fifteen, .container .column.fifteen { + width: 700px; } + .container .columns.sixteen, .container .column.sixteen { + width: 748px; } + .container .columns.one-third, .container .column.one-third { + width: 236px; } + .container .columns.two-thirds, .container .column.two-thirds { + 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; } + + .container { + width: 768px; } + + .column.alpha, .columns.alpha { + margin-right: 10px; } + .column.omega, .columns.omega { + margin-left: 10px; } + + .alpha.omega { + margin-right: 0; + margin-left: 0; } } +@media only screen and (max-width: 767px) { + .container { + width: 90%; } + .container .column, .container .columns { + margin: 0; } + .container .column.one, .container .column.two, .container .column.three, .container .column.four, .container .column.five, .container .column.six, .container .column.seven, .container .column.eight, .container .column.nine, .container .column.ten, .container .column.eleven, .container .column.twelve, .container .column.thirteen, .container .column.fourteen, .container .column.fifteen, .container .column.sixteen, .container .column.one-third, .container .column.two-thirds, .container .columns.one, .container .columns.two, .container .columns.three, .container .columns.four, .container .columns.five, .container .columns.six, .container .columns.seven, .container .columns.eight, .container .columns.nine, .container .columns.ten, .container .columns.eleven, .container .columns.twelve, .container .columns.thirteen, .container .columns.fourteen, .container .columns.fifteen, .container .columns.sixteen, .container .columns.one-third, .container .columns.two-thirds { + width: 100%; } + .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; } } +/* #Clearing +================================================== */ +/* Self Clearing Goodness */ +.container:after { + content: "\0020"; + display: block; + height: 0; + clear: both; + visibility: hidden; } + +/* Use clearfix class on parent to clear nested columns, +or wrap each row of columns in a
*/ +.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; } + +/* You can also use a
to clear columns */ +.clear { + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; } + +/* #Typography +================================================== */ +/* @font-face { + font-family: 'FontName'; + src: url('../fonts/FontName.eot'); + src: url('../fonts/FontName.eot?iefix') format('eot'), + url('../fonts/FontName.woff') format('woff'), + url('../fonts/FontName.ttf') format('truetype'), + url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); + font-weight: normal; + font-style: normal; } +*/ +h1, h2, h3, h4, h5, h6 { + color: #181818; + font-family: "Georgia", "Times New Roman", serif; + font-weight: normal; } + +h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { + font-weight: inherit; } + +h1 { + font-size: 46px; + line-height: 50px; + margin: 0 0 14px 0; } + +h2 { + font-size: 35px; + line-height: 40px; + margin: 0 0 10px 0; } + +h3 { + font-size: 28px; + line-height: 34px; + margin: 0 0 8px 0; } + +h4 { + font-size: 21px; + line-height: 30px; + margin: 0 0 4px 0; } + +h5 { + font-size: 17px; + line-height: 24px; } + +h6 { + font-size: 14px; + line-height: 21px; } + +.subheader { + color: #777777; } + +p { + margin: 0 0 20px 0; } + +p img { + margin: 0; } + +p.lead { + font-size: 21px; + line-height: 27px; + color: #777777; } + +em { + font-style: italic; } + +strong { + font-weight: bold; + color: #333333; } + +small { + font-size: 80%; } + +/* Blockquotes */ +blockquote, blockquote p { + font-size: 17px; + line-height: 24px; + color: #777777; + font-style: italic; } + +blockquote { + margin: 0 0 20px; + padding: 9px 20px 0 19px; + border-left: 1px solid #dddddd; } + +blockquote cite { + display: block; + font-size: 12px; + color: #555555; } + +blockquote cite:before { + content: "\2014 \0020"; } + +blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { + color: #555555; } + +/* not really typographical, but I couldnt find anywhere else to put it */ +hr { + border: solid #dddddd; + border-width: 1px 0 0; + clear: both; + margin: 10px 0 30px; + height: 0; } + +/* #Links +================================================== */ +a, a:visited { + color: #333333; + text-decoration: underline; + outline: 0; } + +a:hover, a:focus { + color: black; + text-decoration: none; } + +p a, p a:visited { + line-height: inherit; } + +/* #Lists +================================================== */ +ul, ol { + margin: 0 0 20px 0; } + +ul { + list-style: none outside; } + +ol { + list-style: decimal; } + +ol, ul.square, ul.circle, ul.disc { + margin: 0 0 0 30px; } + +ul.square { + list-style: square outside; } + +ul.circle { + list-style: circle outside; } + +ul.disc { + list-style: disc outside; } + +ul ul, ul ol, +ol ol, ol ul { + margin: 4px 0 5px 30px; + font-size: 90%; } + +li { + line-height: 18px; + margin: 0 0 12px 0; } + +ul.large li { + line-height: 21px; } + +li p { + line-height: 21px; } + +/* #Buttons +================================================== */ +.button, +button, +input[type="submit"], +input[type="reset"], +input[type="button"] { + background-color: rgba(153, 153, 153, 0.2); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.2)), to(rgba(0, 0, 0, 0.2))); + background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-repeat: repeat-x; + border: 1px solid #aaaaaa; + border-top: 1px solid #cccccc; + border-left: 1px solid #cccccc; + border-radius: 3px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + color: #444444; + display: inline-block; + font-size: 11px; + font-weight: bold; + text-decoration: none; + text-shadow: 0 1px rgba(255, 255, 255, 0.75); + cursor: pointer; + margin: 0 0 20px 0; + line-height: normal; + padding: 8px 10px; + font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } + +.button:hover, +button:hover, +input[type="submit"]:hover, +input[type="reset"]:hover, +input[type="button"]:hover { + background-color: rgba(153, 153, 153, 0.3); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.3)), to(rgba(0, 0, 0, 0.3))); + background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); + background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); + background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); + background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); + background-repeat: repeat-x; + color: #222222; + border: 1px solid #888888; + border-top: 1px solid #aaaaaa; + border-left: 1px solid #aaaaaa; } + +.button:active, +button:active, +input[type="submit"]:active, +input[type="reset"]:active, +input[type="button"]:active { + background-color: rgba(153, 153, 153, 0.2); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.2)), to(rgba(0, 0, 0, 0.2))); + background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-repeat: repeat-x; + border: 1px solid #666666; } + +.button.full-width, +button.full-width, +input[type="submit"].full-width, +input[type="reset"].full-width, +input[type="button"].full-width { + width: 100%; + padding-left: 0 !important; + padding-right: 0 !important; + text-align: center; } + +/* Fix for odd Mozilla border & padding issues */ +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; } + +/* #Forms +================================================== */ +form { + margin: 0 0 20px 0; } + +fieldset { + margin: 0 0 20px 0; } + +input[type="search"], +input[type="url"] { + -webkit-appearance: textfield; + -moz-appearance: textfield; } + +input[type="text"], +input[type="password"], +input[type="email"], +input[type="search"], +input[type="url"], +input[type="number"], +input[type="tel"], +textarea, +select { + border: 1px solid #cccccc; + padding: 6px 4px; + outline: none; + border-radius: 2px; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #777777; + width: 210px; + max-width: 100%; + display: block; + margin: 0 0 20px 0; + background: white; } + +select { + padding: 0; } + +input[type="text"]:focus, +input[type="password"]:focus, +input[type="email"]:focus, +input[type="search"]:focus, +input[type="url"]:focus, +input[type="number"]:focus, +input[type="tel"]:focus, +textarea:focus { + border: 1px solid #aaaaaa; + color: #444444; + -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); } + +textarea { + min-height: 60px; } + +label, +legend { + display: block; + font-weight: bold; + font-size: 13px; } + +select { + width: 220px; } + +input[type="checkbox"] { + display: inline; } + +label span, +legend span { + font-weight: normal; + font-size: 13px; + color: #444444; } + +/* #Images +================================================== */ +img.scale-with-grid { + max-width: 100%; + height: auto; } + +/* #Media Queries +================================================== */ +/* Smaller than standard 960 (devices and browsers) */ +/* Tablet Portrait size to standard 960 (devices and browsers) */ +/* All Mobile Sizes (devices and browser) */ +/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ +/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ diff --git a/css/skeleton.min.css b/css/skeleton.min.css new file mode 100644 index 0000000..024d6e9 --- /dev/null +++ b/css/skeleton.min.css @@ -0,0 +1,2 @@ +/* Skeleton-SCSS 1.0.0 17-05-2013 */ +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}.remove-bottom{margin-bottom:0!important}.half-bottom{margin-bottom:10px!important}.add-bottom{margin-bottom:20px!important}body{background:#fff;font:14px/21px HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#444;-webkit-text-size-adjust:100%}.container{position:relative;margin:0 auto;padding:0}.column,.columns{float:left;display:inline;margin-left:10px;margin-right:10px}.column.alpha,.columns.alpha{margin-left:0}.column.omega,.columns.omega{margin-right:0}.row{margin-bottom:20px}.container{width:960px}.container .columns.one,.container .column.one{width:40px}.container .columns.two,.container .column.two{width:100px}.container .columns.three,.container .column.three{width:160px}.container .columns.four,.container .column.four{width:220px}.container .columns.five,.container .column.five{width:280px}.container .columns.six,.container .column.six{width:340px}.container .columns.seven,.container .column.seven{width:400px}.container .columns.eight,.container .column.eight{width:460px}.container .columns.nine,.container .column.nine{width:520px}.container .columns.ten,.container .column.ten{width:580px}.container .columns.eleven,.container .column.eleven{width:640px}.container .columns.twelve,.container .column.twelve{width:700px}.container .columns.thirteen,.container .column.thirteen{width:760px}.container .columns.fourteen,.container .column.fourteen{width:820px}.container .columns.fifteen,.container .column.fifteen{width:880px}.container .columns.sixteen,.container .column.sixteen{width:940px}.container .columns.one-third,.container .column.one-third{width:300px}.container .columns.two-thirds,.container .column.two-thirds{width:620px}.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 (max-width:959px){.container{width:768px}.container .columns.one,.container .column.one{width:28px}.container .columns.two,.container .column.two{width:76px}.container .columns.three,.container .column.three{width:124px}.container .columns.four,.container .column.four{width:172px}.container .columns.five,.container .column.five{width:220px}.container .columns.six,.container .column.six{width:268px}.container .columns.seven,.container .column.seven{width:316px}.container .columns.eight,.container .column.eight{width:364px}.container .columns.nine,.container .column.nine{width:412px}.container .columns.ten,.container .column.ten{width:460px}.container .columns.eleven,.container .column.eleven{width:508px}.container .columns.twelve,.container .column.twelve{width:556px}.container .columns.thirteen,.container .column.thirteen{width:604px}.container .columns.fourteen,.container .column.fourteen{width:652px}.container .columns.fifteen,.container .column.fifteen{width:700px}.container .columns.sixteen,.container .column.sixteen{width:748px}.container .columns.one-third,.container .column.one-third{width:236px}.container .columns.two-thirds,.container .column.two-thirds{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}.container{width:768px}.column.alpha,.columns.alpha{margin-right:10px}.column.omega,.columns.omega{margin-left:10px}.alpha.omega{margin-right:0;margin-left:0}}@media only screen and (max-width:767px){.container{width:90%}.container .column,.container .columns{margin:0}.container .column.one,.container .column.two,.container .column.three,.container .column.four,.container .column.five,.container .column.six,.container .column.seven,.container .column.eight,.container .column.nine,.container .column.ten,.container .column.eleven,.container .column.twelve,.container .column.thirteen,.container .column.fourteen,.container .column.fifteen,.container .column.sixteen,.container .column.one-third,.container .column.two-thirds,.container .columns.one,.container .columns.two,.container .columns.three,.container .columns.four,.container .columns.five,.container .columns.six,.container .columns.seven,.container .columns.eight,.container .columns.nine,.container .columns.ten,.container .columns.eleven,.container .columns.twelve,.container .columns.thirteen,.container .columns.fourteen,.container .columns.fifteen,.container .columns.sixteen,.container .columns.one-third,.container .columns.two-thirds{width:100%}.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}}.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}h1,h2,h3,h4,h5,h6{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}h1{font-size:46px;line-height:50px;margin:0 0 14px}h2{font-size:35px;line-height:40px;margin:0 0 10px}h3{font-size:28px;line-height:34px;margin:0 0 8px}h4{font-size:21px;line-height:30px;margin:0 0 4px}h5{font-size:17px;line-height:24px}h6{font-size:14px;line-height:21px}.subheader{color:#777}p{margin:0 0 20px}p img{margin:0}p.lead{font-size:21px;line-height:27px;color:#777}em{font-style:italic}strong{font-weight:700;color:#333}small{font-size:80%}blockquote,blockquote p{font-size:17px;line-height:24px;color:#777;font-style:italic}blockquote{margin:0 0 20px;padding:9px 20px 0 19px;border-left:1px solid #ddd}blockquote cite{display:block;font-size:12px;color:#555}blockquote cite:before{content:"\2014 \0020"}blockquote cite a,blockquote cite a:visited,blockquote cite a:visited{color:#555}hr{border:solid #ddd;border-width:1px 0 0;clear:both;margin:10px 0 30px;height:0}a,a:visited{color:#333;text-decoration:underline;outline:0}a:hover,a:focus{color:#000;text-decoration:none}p a,p a:visited{line-height:inherit}ul,ol{margin:0 0 20px}ul{list-style:none outside}ol{list-style:decimal}ol,ul.square,ul.circle,ul.disc{margin:0 0 0 30px}ul.square{list-style:square outside}ul.circle{list-style:circle outside}ul.disc{list-style:disc outside}ul ul,ul ol,ol ol,ol ul{margin:4px 0 5px 30px;font-size:90%}li{line-height:18px;margin:0 0 12px}ul.large li{line-height:21px}li p{line-height:21px}.button,button,input[type=submit],input[type=reset],input[type=button]{background-color:rgba(153,153,153,.2);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.2)),to(rgba(0,0,0,.2)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-moz-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-o-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(0,0,0,.2));background-repeat:repeat-x;border:1px solid #aaa;border-top:1px solid #ccc;border-left:1px solid #ccc;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;color:#444;display:inline-block;font-size:11px;font-weight:700;text-decoration:none;text-shadow:0 1px rgba(255,255,255,.75);cursor:pointer;margin:0 0 20px;line-height:normal;padding:8px 10px;font-family:HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif}.button:hover,button:hover,input[type=submit]:hover,input[type=reset]:hover,input[type=button]:hover{background-color:rgba(153,153,153,.3);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.3)),to(rgba(0,0,0,.3)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:-moz-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:-o-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(0,0,0,.3));background-repeat:repeat-x;color:#222;border:1px solid #888;border-top:1px solid #aaa;border-left:1px solid #aaa}.button:active,button:active,input[type=submit]:active,input[type=reset]:active,input[type=button]:active{background-color:rgba(153,153,153,.2);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.2)),to(rgba(0,0,0,.2)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-moz-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-o-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(0,0,0,.2));background-repeat:repeat-x;border:1px solid #666}.button.full-width,button.full-width,input[type=submit].full-width,input[type=reset].full-width,input[type=button].full-width{width:100%;padding-left:0!important;padding-right:0!important;text-align:center}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}form{margin:0 0 20px}fieldset{margin:0 0 20px}input[type=search],input[type=url]{-webkit-appearance:textfield;-moz-appearance:textfield}input[type=text],input[type=password],input[type=email],input[type=search],input[type=url],input[type=number],input[type=tel],textarea,select{border:1px solid #ccc;padding:6px 4px;outline:0;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;font:13px HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#777;width:210px;max-width:100%;display:block;margin:0 0 20px;background:#fff}select{padding:0}input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=search]:focus,input[type=url]:focus,input[type=number]:focus,input[type=tel]:focus,textarea:focus{border:1px solid #aaa;color:#444;-moz-box-shadow:0 0 3px rgba(0,0,0,.2);-webkit-box-shadow:0 0 3px rgba(0,0,0,.2);box-shadow:0 0 3px rgba(0,0,0,.2)}textarea{min-height:60px}label,legend{display:block;font-weight:700;font-size:13px}select{width:220px}input[type=checkbox]{display:inline}label span,legend span{font-weight:400;font-size:13px;color:#444}img.scale-with-grid{max-width:100%;height:auto} \ No newline at end of file diff --git a/index.html b/index.html index 140e54b..dc5fe82 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@ - +