From 0b57615776bc4d78c93b82ecc0a266fcc0b1a461 Mon Sep 17 00:00:00 2001 From: Emmanuel Oga Date: Wed, 9 Nov 2011 14:05:45 -0300 Subject: [PATCH] initial --- .gitignore | 2 + app.rb | 19 + config.ru | 3 + env.rb | 10 + public/adapt/css/1200.css | 357 +++++++ public/adapt/css/1560.css | 357 +++++++ public/adapt/css/720.css | 359 +++++++ public/adapt/css/960.css | 357 +++++++ public/adapt/css/fluid.css | 332 +++++++ public/adapt/css/mobile.css | 27 + public/adapt/js/adapt.js | 135 +++ public/css/buttons.css | 882 ++++++++++++++++++ public/css/formalize.css | 398 ++++++++ public/css/master.css | 357 +++++++ public/css/normalize.css | 439 +++++++++ public/css/text.css | 56 ++ public/favicon.ico | Bin 0 -> 9662 bytes public/fonts/Andale Mono License.txt | 31 + public/fonts/AndaleMono-webfont.eot | Bin 0 -> 24546 bytes public/fonts/AndaleMono-webfont.svg | 150 +++ public/fonts/AndaleMono-webfont.ttf | Bin 0 -> 24348 bytes public/fonts/AndaleMono-webfont.woff | Bin 0 -> 15540 bytes public/fonts/Kontrapunkt License.txt | 1 + public/fonts/Kontrapunkt-Bold-webfont.eot | Bin 0 -> 30222 bytes public/fonts/Kontrapunkt-Bold-webfont.svg | 148 +++ public/fonts/Kontrapunkt-Bold-webfont.ttf | Bin 0 -> 30028 bytes public/fonts/Kontrapunkt-Bold-webfont.woff | Bin 0 -> 19180 bytes public/fonts/Kontrapunkt-Light-webfont.eot | Bin 0 -> 30290 bytes public/fonts/Kontrapunkt-Light-webfont.svg | 148 +++ public/fonts/Kontrapunkt-Light-webfont.ttf | Bin 0 -> 30092 bytes public/fonts/Kontrapunkt-Light-webfont.woff | Bin 0 -> 19248 bytes .../fonts/Kontrapunkt-LightItalic-webfont.eot | Bin 0 -> 35334 bytes .../fonts/Kontrapunkt-LightItalic-webfont.svg | 148 +++ .../fonts/Kontrapunkt-LightItalic-webfont.ttf | Bin 0 -> 35108 bytes .../Kontrapunkt-LightItalic-webfont.woff | Bin 0 -> 21524 bytes public/fonts/Lato-Black-webfont.eot | Bin 0 -> 34866 bytes public/fonts/Lato-Black-webfont.svg | 151 +++ public/fonts/Lato-Black-webfont.ttf | Bin 0 -> 34656 bytes public/fonts/Lato-Black-webfont.woff | Bin 0 -> 21980 bytes public/fonts/Lato-BlackItalic-webfont.eot | Bin 0 -> 38186 bytes public/fonts/Lato-BlackItalic-webfont.svg | 151 +++ public/fonts/Lato-BlackItalic-webfont.ttf | Bin 0 -> 37948 bytes public/fonts/Lato-BlackItalic-webfont.woff | Bin 0 -> 23864 bytes public/fonts/Lato-Bold-webfont.eot | Bin 0 -> 36090 bytes public/fonts/Lato-Bold-webfont.svg | 151 +++ public/fonts/Lato-Bold-webfont.ttf | Bin 0 -> 35884 bytes public/fonts/Lato-Bold-webfont.woff | Bin 0 -> 22840 bytes public/fonts/Lato-BoldItalic-webfont.eot | Bin 0 -> 40622 bytes public/fonts/Lato-BoldItalic-webfont.svg | 151 +++ public/fonts/Lato-BoldItalic-webfont.ttf | Bin 0 -> 40388 bytes public/fonts/Lato-BoldItalic-webfont.woff | Bin 0 -> 25524 bytes public/fonts/Lato-Hairline-webfont.eot | Bin 0 -> 34610 bytes public/fonts/Lato-Hairline-webfont.svg | 151 +++ public/fonts/Lato-Hairline-webfont.ttf | Bin 0 -> 34388 bytes public/fonts/Lato-Hairline-webfont.woff | Bin 0 -> 21924 bytes public/fonts/Lato-HairlineItalic-webfont.eot | Bin 0 -> 39522 bytes public/fonts/Lato-HairlineItalic-webfont.svg | 151 +++ public/fonts/Lato-HairlineItalic-webfont.ttf | Bin 0 -> 39272 bytes public/fonts/Lato-HairlineItalic-webfont.woff | Bin 0 -> 24428 bytes public/fonts/Lato-Italic-webfont.eot | Bin 0 -> 40270 bytes public/fonts/Lato-Italic-webfont.svg | 151 +++ public/fonts/Lato-Italic-webfont.ttf | Bin 0 -> 40056 bytes public/fonts/Lato-Italic-webfont.woff | Bin 0 -> 25340 bytes public/fonts/Lato-Light-webfont.eot | Bin 0 -> 36526 bytes public/fonts/Lato-Light-webfont.svg | 151 +++ public/fonts/Lato-Light-webfont.ttf | Bin 0 -> 36316 bytes public/fonts/Lato-Light-webfont.woff | Bin 0 -> 23216 bytes public/fonts/Lato-LightItalic-webfont.eot | Bin 0 -> 40638 bytes public/fonts/Lato-LightItalic-webfont.svg | 151 +++ public/fonts/Lato-LightItalic-webfont.ttf | Bin 0 -> 40400 bytes public/fonts/Lato-LightItalic-webfont.woff | Bin 0 -> 25544 bytes public/fonts/Lato-Regular-webfont.eot | Bin 0 -> 36666 bytes public/fonts/Lato-Regular-webfont.svg | 151 +++ public/fonts/Lato-Regular-webfont.ttf | Bin 0 -> 36448 bytes public/fonts/Lato-Regular-webfont.woff | Bin 0 -> 23144 bytes public/fonts/SIL Open Font License 1.1.txt | 91 ++ public/fonts/fonts.css | 223 +++++ public/images/Tick_green_modern.svg | 55 ++ public/images/arrow.png | Bin 0 -> 925 bytes public/images/bg.png | Bin 0 -> 161 bytes public/images/bgblue.png | Bin 0 -> 694 bytes public/images/button.png | Bin 0 -> 85 bytes public/images/clouds.png | Bin 0 -> 25259 bytes public/images/dom.jpg | Bin 0 -> 69079 bytes public/images/footer.png | Bin 0 -> 109 bytes public/images/free.png | Bin 0 -> 13893 bytes public/images/gotick.png | Bin 0 -> 3341 bytes public/images/jar.png | Bin 0 -> 1645 bytes public/images/pencil.png | Bin 0 -> 1560 bytes public/images/rain.png | Bin 0 -> 2739 bytes public/images/rain_small.png | Bin 0 -> 1106 bytes public/images/satell.png | Bin 0 -> 2394 bytes public/images/select_arrow.gif | Bin 0 -> 52 bytes public/images/tick.jpg | Bin 0 -> 11574 bytes public/javascripts/angular-0.9.18.min.js | 126 +++ public/javascripts/jquery-min.js | 18 + public/javascripts/jquery.formalize.min.js | 1 + public/javascripts/jquery.tmpl.js | 484 ++++++++++ public/javascripts/knockout-1.3.0beta.js | 96 ++ public/javascripts/master.js | 6 + public/javascripts/underscore-min.js | 27 + views/angular.haml | 50 + views/index.haml | 5 + views/jquery.haml | 73 ++ views/knockout.haml | 55 ++ views/layout.haml | 57 ++ 106 files changed, 7593 insertions(+) create mode 100644 .gitignore create mode 100644 app.rb create mode 100644 config.ru create mode 100644 env.rb create mode 100755 public/adapt/css/1200.css create mode 100755 public/adapt/css/1560.css create mode 100755 public/adapt/css/720.css create mode 100644 public/adapt/css/960.css create mode 100644 public/adapt/css/fluid.css create mode 100644 public/adapt/css/mobile.css create mode 100644 public/adapt/js/adapt.js create mode 100644 public/css/buttons.css create mode 100644 public/css/formalize.css create mode 100644 public/css/master.css create mode 100644 public/css/normalize.css create mode 100644 public/css/text.css create mode 100644 public/favicon.ico create mode 100644 public/fonts/Andale Mono License.txt create mode 100644 public/fonts/AndaleMono-webfont.eot create mode 100644 public/fonts/AndaleMono-webfont.svg create mode 100644 public/fonts/AndaleMono-webfont.ttf create mode 100644 public/fonts/AndaleMono-webfont.woff create mode 100644 public/fonts/Kontrapunkt License.txt create mode 100644 public/fonts/Kontrapunkt-Bold-webfont.eot create mode 100644 public/fonts/Kontrapunkt-Bold-webfont.svg create mode 100644 public/fonts/Kontrapunkt-Bold-webfont.ttf create mode 100644 public/fonts/Kontrapunkt-Bold-webfont.woff create mode 100644 public/fonts/Kontrapunkt-Light-webfont.eot create mode 100644 public/fonts/Kontrapunkt-Light-webfont.svg create mode 100644 public/fonts/Kontrapunkt-Light-webfont.ttf create mode 100644 public/fonts/Kontrapunkt-Light-webfont.woff create mode 100644 public/fonts/Kontrapunkt-LightItalic-webfont.eot create mode 100644 public/fonts/Kontrapunkt-LightItalic-webfont.svg create mode 100644 public/fonts/Kontrapunkt-LightItalic-webfont.ttf create mode 100644 public/fonts/Kontrapunkt-LightItalic-webfont.woff create mode 100644 public/fonts/Lato-Black-webfont.eot create mode 100644 public/fonts/Lato-Black-webfont.svg create mode 100644 public/fonts/Lato-Black-webfont.ttf create mode 100644 public/fonts/Lato-Black-webfont.woff create mode 100644 public/fonts/Lato-BlackItalic-webfont.eot create mode 100644 public/fonts/Lato-BlackItalic-webfont.svg create mode 100644 public/fonts/Lato-BlackItalic-webfont.ttf create mode 100644 public/fonts/Lato-BlackItalic-webfont.woff create mode 100644 public/fonts/Lato-Bold-webfont.eot create mode 100644 public/fonts/Lato-Bold-webfont.svg create mode 100644 public/fonts/Lato-Bold-webfont.ttf create mode 100644 public/fonts/Lato-Bold-webfont.woff create mode 100644 public/fonts/Lato-BoldItalic-webfont.eot create mode 100644 public/fonts/Lato-BoldItalic-webfont.svg create mode 100644 public/fonts/Lato-BoldItalic-webfont.ttf create mode 100644 public/fonts/Lato-BoldItalic-webfont.woff create mode 100644 public/fonts/Lato-Hairline-webfont.eot create mode 100644 public/fonts/Lato-Hairline-webfont.svg create mode 100644 public/fonts/Lato-Hairline-webfont.ttf create mode 100644 public/fonts/Lato-Hairline-webfont.woff create mode 100644 public/fonts/Lato-HairlineItalic-webfont.eot create mode 100644 public/fonts/Lato-HairlineItalic-webfont.svg create mode 100644 public/fonts/Lato-HairlineItalic-webfont.ttf create mode 100644 public/fonts/Lato-HairlineItalic-webfont.woff create mode 100644 public/fonts/Lato-Italic-webfont.eot create mode 100644 public/fonts/Lato-Italic-webfont.svg create mode 100644 public/fonts/Lato-Italic-webfont.ttf create mode 100644 public/fonts/Lato-Italic-webfont.woff create mode 100644 public/fonts/Lato-Light-webfont.eot create mode 100644 public/fonts/Lato-Light-webfont.svg create mode 100644 public/fonts/Lato-Light-webfont.ttf create mode 100644 public/fonts/Lato-Light-webfont.woff create mode 100644 public/fonts/Lato-LightItalic-webfont.eot create mode 100644 public/fonts/Lato-LightItalic-webfont.svg create mode 100644 public/fonts/Lato-LightItalic-webfont.ttf create mode 100644 public/fonts/Lato-LightItalic-webfont.woff create mode 100644 public/fonts/Lato-Regular-webfont.eot create mode 100644 public/fonts/Lato-Regular-webfont.svg create mode 100644 public/fonts/Lato-Regular-webfont.ttf create mode 100644 public/fonts/Lato-Regular-webfont.woff create mode 100644 public/fonts/SIL Open Font License 1.1.txt create mode 100644 public/fonts/fonts.css create mode 100644 public/images/Tick_green_modern.svg create mode 100644 public/images/arrow.png create mode 100644 public/images/bg.png create mode 100644 public/images/bgblue.png create mode 100644 public/images/button.png create mode 100644 public/images/clouds.png create mode 100644 public/images/dom.jpg create mode 100644 public/images/footer.png create mode 100644 public/images/free.png create mode 100644 public/images/gotick.png create mode 100644 public/images/jar.png create mode 100644 public/images/pencil.png create mode 100644 public/images/rain.png create mode 100644 public/images/rain_small.png create mode 100644 public/images/satell.png create mode 100644 public/images/select_arrow.gif create mode 100644 public/images/tick.jpg create mode 100644 public/javascripts/angular-0.9.18.min.js create mode 100644 public/javascripts/jquery-min.js create mode 100644 public/javascripts/jquery.formalize.min.js create mode 100644 public/javascripts/jquery.tmpl.js create mode 100644 public/javascripts/knockout-1.3.0beta.js create mode 100644 public/javascripts/master.js create mode 100644 public/javascripts/underscore-min.js create mode 100644 views/angular.haml create mode 100644 views/index.haml create mode 100644 views/jquery.haml create mode 100644 views/knockout.haml create mode 100644 views/layout.haml diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..8b5cd7f --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +log/* +config/database.yml diff --git a/app.rb b/app.rb new file mode 100644 index 0000000..cc3d923 --- /dev/null +++ b/app.rb @@ -0,0 +1,19 @@ +require 'sinatra' +require "sinatra/base" + +get "/" do + haml :index +end + +get "/angular" do + @use_angular = true + haml :angular +end + +get "/knockout" do + haml :knockout +end + +get "/jquery" do + haml :jquery +end diff --git a/config.ru b/config.ru new file mode 100644 index 0000000..38a1226 --- /dev/null +++ b/config.ru @@ -0,0 +1,3 @@ +require File.expand_path(File.join(File.dirname(__FILE__), "env.rb")) + +run Sinatra::Application diff --git a/env.rb b/env.rb new file mode 100644 index 0000000..1e3393a --- /dev/null +++ b/env.rb @@ -0,0 +1,10 @@ +require 'rubygems' +require 'logger' +require 'yaml' +require 'thin' +require 'haml' +require 'sinatra' + +require File.expand_path(File.join(File.dirname(__FILE__), "app.rb")) + +enable :sessions, :logging, :dump_errors, :raise_errors, :show_exceptions diff --git a/public/adapt/css/1200.css b/public/adapt/css/1200.css new file mode 100755 index 0000000..b9185c4 --- /dev/null +++ b/public/adapt/css/1200.css @@ -0,0 +1,357 @@ +/* + 960 Grid System ~ Core CSS. + Learn more ~ http://960.gs/ + + Licensed under GPL and MIT. +*/ + +/* + Forces backgrounds to span full width, + even if there is horizontal scrolling. + Increase this if your layout is wider. + + Note: IE6 works fine without this fix. +*/ + +body { + min-width: 1200px; +} + +/* `Containers +----------------------------------------------------------------------------------------------------*/ + +.container_12 { + margin-left: auto; + margin-right: auto; + width: 1200px; +} + +/* `Grid >> Global +----------------------------------------------------------------------------------------------------*/ + +.grid_1, +.grid_2, +.grid_3, +.grid_4, +.grid_5, +.grid_6, +.grid_7, +.grid_8, +.grid_9, +.grid_10, +.grid_11, +.grid_12 { + display: inline; + float: left; + margin-left: 10px; + margin-right: 10px; +} + +.push_1, .pull_1, +.push_2, .pull_2, +.push_3, .pull_3, +.push_4, .pull_4, +.push_5, .pull_5, +.push_6, .pull_6, +.push_7, .pull_7, +.push_8, .pull_8, +.push_9, .pull_9, +.push_10, .pull_10, +.push_11, .pull_11 { + position: relative; +} + +/* `Grid >> Children (Alpha ~ First, Omega ~ Last) +----------------------------------------------------------------------------------------------------*/ + +.alpha { + margin-left: 0; +} + +.omega { + margin-right: 0; +} + +/* `Grid >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .grid_1 { + width: 80px; +} + +.container_12 .grid_2 { + width: 180px; +} + +.container_12 .grid_3 { + width: 280px; +} + +.container_12 .grid_4 { + width: 380px; +} + +.container_12 .grid_5 { + width: 480px; +} + +.container_12 .grid_6 { + width: 580px; +} + +.container_12 .grid_7 { + width: 680px; +} + +.container_12 .grid_8 { + width: 780px; +} + +.container_12 .grid_9 { + width: 880px; +} + +.container_12 .grid_10 { + width: 980px; +} + +.container_12 .grid_11 { + width: 1080px; +} + +.container_12 .grid_12 { + width: 1180px; +} + +/* `Prefix Extra Space >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .prefix_1 { + padding-left: 100px; +} + +.container_12 .prefix_2 { + padding-left: 200px; +} + +.container_12 .prefix_3 { + padding-left: 300px; +} + +.container_12 .prefix_4 { + padding-left: 400px; +} + +.container_12 .prefix_5 { + padding-left: 500px; +} + +.container_12 .prefix_6 { + padding-left: 600px; +} + +.container_12 .prefix_7 { + padding-left: 700px; +} + +.container_12 .prefix_8 { + padding-left: 800px; +} + +.container_12 .prefix_9 { + padding-left: 900px; +} + +.container_12 .prefix_10 { + padding-left: 1000px; +} + +.container_12 .prefix_11 { + padding-left: 1100px; +} + +/* `Suffix Extra Space >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .suffix_1 { + padding-right: 100px; +} + +.container_12 .suffix_2 { + padding-right: 200px; +} + +.container_12 .suffix_3 { + padding-right: 300px; +} + +.container_12 .suffix_4 { + padding-right: 400px; +} + +.container_12 .suffix_5 { + padding-right: 500px; +} + +.container_12 .suffix_6 { + padding-right: 600px; +} + +.container_12 .suffix_7 { + padding-right: 700px; +} + +.container_12 .suffix_8 { + padding-right: 800px; +} + +.container_12 .suffix_9 { + padding-right: 900px; +} + +.container_12 .suffix_10 { + padding-right: 1000px; +} + +.container_12 .suffix_11 { + padding-right: 1100px; +} + +/* `Push Space >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .push_1 { + left: 100px; +} + +.container_12 .push_2 { + left: 200px; +} + +.container_12 .push_3 { + left: 300px; +} + +.container_12 .push_4 { + left: 400px; +} + +.container_12 .push_5 { + left: 500px; +} + +.container_12 .push_6 { + left: 600px; +} + +.container_12 .push_7 { + left: 700px; +} + +.container_12 .push_8 { + left: 800px; +} + +.container_12 .push_9 { + left: 900px; +} + +.container_12 .push_10 { + left: 1000px; +} + +.container_12 .push_11 { + left: 1100px; +} + +/* `Pull Space >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .pull_1 { + left: -100px; +} + +.container_12 .pull_2 { + left: -200px; +} + +.container_12 .pull_3 { + left: -300px; +} + +.container_12 .pull_4 { + left: -400px; +} + +.container_12 .pull_5 { + left: -500px; +} + +.container_12 .pull_6 { + left: -600px; +} + +.container_12 .pull_7 { + left: -700px; +} + +.container_12 .pull_8 { + left: -800px; +} + +.container_12 .pull_9 { + left: -900px; +} + +.container_12 .pull_10 { + left: -1000px; +} + +.container_12 .pull_11 { + left: -1100px; +} + +/* `Clear Floated Elements +----------------------------------------------------------------------------------------------------*/ + +/* http://sonspring.com/journal/clearing-floats */ + +.clear { + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; +} + +/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */ + +.clearfix:before, +.clearfix:after, +.container_12:before, +.container_12:after { + content: '.'; + display: block; + overflow: hidden; + visibility: hidden; + font-size: 0; + line-height: 0; + width: 0; + height: 0; +} + +.clearfix:after, +.container_12:after { + clear: both; +} + +/* + The following zoom:1 rule is specifically for IE6 + IE7. + Move to separate stylesheet if invalid CSS is a problem. +*/ + +.clearfix, +.container_12 { + zoom: 1; +} \ No newline at end of file diff --git a/public/adapt/css/1560.css b/public/adapt/css/1560.css new file mode 100755 index 0000000..88af16b --- /dev/null +++ b/public/adapt/css/1560.css @@ -0,0 +1,357 @@ +/* + 960 Grid System ~ Core CSS. + Learn more ~ http://960.gs/ + + Licensed under GPL and MIT. +*/ + +/* + Forces backgrounds to span full width, + even if there is horizontal scrolling. + Increase this if your layout is wider. + + Note: IE6 works fine without this fix. +*/ + +body { + min-width: 1560px; +} + +/* `Containers +----------------------------------------------------------------------------------------------------*/ + +.container_12 { + margin-left: auto; + margin-right: auto; + width: 1560px; +} + +/* `Grid >> Global +----------------------------------------------------------------------------------------------------*/ + +.grid_1, +.grid_2, +.grid_3, +.grid_4, +.grid_5, +.grid_6, +.grid_7, +.grid_8, +.grid_9, +.grid_10, +.grid_11, +.grid_12 { + display: inline; + float: left; + margin-left: 10px; + margin-right: 10px; +} + +.push_1, .pull_1, +.push_2, .pull_2, +.push_3, .pull_3, +.push_4, .pull_4, +.push_5, .pull_5, +.push_6, .pull_6, +.push_7, .pull_7, +.push_8, .pull_8, +.push_9, .pull_9, +.push_10, .pull_10, +.push_11, .pull_11 { + position: relative; +} + +/* `Grid >> Children (Alpha ~ First, Omega ~ Last) +----------------------------------------------------------------------------------------------------*/ + +.alpha { + margin-left: 0; +} + +.omega { + margin-right: 0; +} + +/* `Grid >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .grid_1 { + width: 110px; +} + +.container_12 .grid_2 { + width: 240px; +} + +.container_12 .grid_3 { + width: 370px; +} + +.container_12 .grid_4 { + width: 500px; +} + +.container_12 .grid_5 { + width: 630px; +} + +.container_12 .grid_6 { + width: 760px; +} + +.container_12 .grid_7 { + width: 890px; +} + +.container_12 .grid_8 { + width: 1020px; +} + +.container_12 .grid_9 { + width: 1150px; +} + +.container_12 .grid_10 { + width: 1280px; +} + +.container_12 .grid_11 { + width: 1410px; +} + +.container_12 .grid_12 { + width: 1540px; +} + +/* `Prefix Extra Space >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .prefix_1 { + padding-left: 130px; +} + +.container_12 .prefix_2 { + padding-left: 260px; +} + +.container_12 .prefix_3 { + padding-left: 390px; +} + +.container_12 .prefix_4 { + padding-left: 520px; +} + +.container_12 .prefix_5 { + padding-left: 650px; +} + +.container_12 .prefix_6 { + padding-left: 780px; +} + +.container_12 .prefix_7 { + padding-left: 910px; +} + +.container_12 .prefix_8 { + padding-left: 1040px; +} + +.container_12 .prefix_9 { + padding-left: 1170px; +} + +.container_12 .prefix_10 { + padding-left: 1300px; +} + +.container_12 .prefix_11 { + padding-left: 1430px; +} + +/* `Suffix Extra Space >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .suffix_1 { + padding-right: 130px; +} + +.container_12 .suffix_2 { + padding-right: 260px; +} + +.container_12 .suffix_3 { + padding-right: 390px; +} + +.container_12 .suffix_4 { + padding-right: 520px; +} + +.container_12 .suffix_5 { + padding-right: 650px; +} + +.container_12 .suffix_6 { + padding-right: 780px; +} + +.container_12 .suffix_7 { + padding-right: 910px; +} + +.container_12 .suffix_8 { + padding-right: 1040px; +} + +.container_12 .suffix_9 { + padding-right: 1170px; +} + +.container_12 .suffix_10 { + padding-right: 1300px; +} + +.container_12 .suffix_11 { + padding-right: 1430px; +} + +/* `Push Space >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .push_1 { + left: 130px; +} + +.container_12 .push_2 { + left: 260px; +} + +.container_12 .push_3 { + left: 390px; +} + +.container_12 .push_4 { + left: 520px; +} + +.container_12 .push_5 { + left: 650px; +} + +.container_12 .push_6 { + left: 780px; +} + +.container_12 .push_7 { + left: 910px; +} + +.container_12 .push_8 { + left: 1040px; +} + +.container_12 .push_9 { + left: 1170px; +} + +.container_12 .push_10 { + left: 1300px; +} + +.container_12 .push_11 { + left: 1430px; +} + +/* `Pull Space >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .pull_1 { + left: -130px; +} + +.container_12 .pull_2 { + left: -260px; +} + +.container_12 .pull_3 { + left: -390px; +} + +.container_12 .pull_4 { + left: -520px; +} + +.container_12 .pull_5 { + left: -650px; +} + +.container_12 .pull_6 { + left: -780px; +} + +.container_12 .pull_7 { + left: -910px; +} + +.container_12 .pull_8 { + left: -1040px; +} + +.container_12 .pull_9 { + left: -1170px; +} + +.container_12 .pull_10 { + left: -1300px; +} + +.container_12 .pull_11 { + left: -1430px; +} + +/* `Clear Floated Elements +----------------------------------------------------------------------------------------------------*/ + +/* http://sonspring.com/journal/clearing-floats */ + +.clear { + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; +} + +/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */ + +.clearfix:before, +.clearfix:after, +.container_12:before, +.container_12:after { + content: '.'; + display: block; + overflow: hidden; + visibility: hidden; + font-size: 0; + line-height: 0; + width: 0; + height: 0; +} + +.clearfix:after, +.container_12:after { + clear: both; +} + +/* + The following zoom:1 rule is specifically for IE6 + IE7. + Move to separate stylesheet if invalid CSS is a problem. +*/ + +.clearfix, +.container_12 { + zoom: 1; +} \ No newline at end of file diff --git a/public/adapt/css/720.css b/public/adapt/css/720.css new file mode 100755 index 0000000..7ca6d88 --- /dev/null +++ b/public/adapt/css/720.css @@ -0,0 +1,359 @@ +/* + 960 Grid System ~ Core CSS. + Learn more ~ http://960.gs/ + + Licensed under GPL and MIT. +*/ + +/* + Forces backgrounds to span full width, + even if there is horizontal scrolling. + Increase this if your layout is wider. + + Note: IE6 works fine without this fix. +*/ + +body { + min-width: 720px; +} + +/* `Containers +----------------------------------------------------------------------------------------------------*/ + +.container_12 { + margin-left: auto; + margin-right: auto; + width: 720px; +} + +/* `Grid >> Global +----------------------------------------------------------------------------------------------------*/ + +.grid_1, +.grid_2, +.grid_3, +.grid_4, +.grid_5, +.grid_6, +.grid_7, +.grid_8, +.grid_9, +.grid_10, +.grid_11, +.grid_12 { + display: inline; + float: left; + margin-left: 10px; + margin-right: 10px; +} + +.push_1, .pull_1, +.push_2, .pull_2, +.push_3, .pull_3, +.push_4, .pull_4, +.push_5, .pull_5, +.push_6, .pull_6, +.push_7, .pull_7, +.push_8, .pull_8, +.push_9, .pull_9, +.push_10, .pull_10, +.push_11, .pull_11 { + position: relative; +} + +/* `Grid >> Children (Alpha ~ First, Omega ~ Last) +----------------------------------------------------------------------------------------------------*/ + +.alpha { + margin-left: 0; +} + +.omega { + margin-right: 0; +} + +/* `Grid >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .grid_1 { + width: 40px; +} + +.container_12 .grid_2 { + width: 100px; +} + +.container_12 .grid_3 { + width: 160px; +} + +.container_12 .grid_4 { + width: 220px; +} + +.container_12 .grid_5 { + width: 280px; +} + +.container_12 .grid_6 { + width: 340px; +} + +.container_12 .grid_7 { + width: 400px; +} + +.container_12 .grid_8 { + width: 460px; +} + +.container_12 .grid_9 { + width: 520px; +} + +.container_12 .grid_10 { + width: 580px; +} + +.container_12 .grid_11 { + width: 640px; +} + +.container_12 .grid_12 { + width: 700px; +} + +/* `Prefix Extra Space >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .prefix_1 { + padding-left: 60px; +} + +.container_12 .prefix_2 { + padding-left: 120px; +} + +.container_12 .prefix_3 { + padding-left: 180px; +} + +.container_12 .prefix_4 { + padding-left: 240px; +} + +.container_12 .prefix_5 { + padding-left: 300px; +} + +.container_12 .prefix_6 { + padding-left: 360px; +} + +.container_12 .prefix_7 { + padding-left: 420px; +} + +.container_12 .prefix_8 { + padding-left: 480px; +} + +.container_12 .prefix_9 { + padding-left: 540px; +} + +.container_12 .prefix_10 { + padding-left: 600px; +} + +.container_12 .prefix_11 { + padding-left: 660px; +} + +/* `Suffix Extra Space >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .suffix_1 { + padding-right: 60px; +} + +.container_12 .suffix_2 { + padding-right: 120px; +} + +.container_12 .suffix_3 { + padding-right: 180px; +} + +.container_12 .suffix_4 { + padding-right: 240px; +} + +.container_12 .suffix_5 { + padding-right: 300px; +} + +.container_12 .suffix_6 { + padding-right: 360px; +} + +.container_12 .suffix_7 { + padding-right: 420px; +} + +.container_12 .suffix_8 { + padding-right: 480px; +} + +.container_12 .suffix_9 { + padding-right: 540px; +} + +.container_12 .suffix_10 { + padding-right: 600px; +} + +.container_12 .suffix_11 { + padding-right: 660px; +} + +/* `Push Space >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .push_1 { + left: 60px; +} + +.container_12 .push_2 { + left: 120px; +} + +.container_12 .push_3 { + left: 180px; +} + +.container_12 .push_4 { + left: 240px; +} + +.container_12 .push_5 { + left: 300px; +} + +.container_12 .push_6 { + left: 360px; +} + +.container_12 .push_7 { + left: 420px; +} + +.container_12 .push_8 { + left: 480px; +} + +.container_12 .push_9 { + left: 540px; +} + +.container_12 .push_10 { + left: 600px; +} + +.container_12 .push_11 { + left: 660px; +} + +/* `Pull Space >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .pull_1 { + left: -60px; +} + +.container_12 .pull_2 { + left: -120px; +} + +.container_12 .pull_3 { + left: -180px; +} + +.container_12 .pull_4 { + left: -240px; +} + +.container_12 .pull_5 { + left: -300px; +} + +.container_12 .pull_6 { + left: -360px; +} + +.container_12 .pull_7 { + left: -420px; +} + +.container_12 .pull_8 { + left: -480px; +} + +.container_12 .pull_9 { + left: -540px; +} + +.container_12 .pull_10 { + left: -600px; +} + +.container_12 .pull_11 { + left: -660px; +} + +/* `Clear Floated Elements +----------------------------------------------------------------------------------------------------*/ + +/* http://sonspring.com/journal/clearing-floats */ + +.clear { + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; +} + +/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */ + +.clearfix:before, +.clearfix:after, +.container_12:before, +.container_12:after { + content: '.'; + display: block; + overflow: hidden; + visibility: hidden; + font-size: 0; + line-height: 0; + width: 0; + height: 0; +} + +.clearfix:after, +.container_12:after { + clear: both; +} + +/* + The following zoom:1 rule is specifically for IE6 + IE7. + Move to separate stylesheet if invalid CSS is a problem. +*/ + +.clearfix, +.container_12 { + zoom: 1; +} + +.extra { display: none; } diff --git a/public/adapt/css/960.css b/public/adapt/css/960.css new file mode 100644 index 0000000..9ab253b --- /dev/null +++ b/public/adapt/css/960.css @@ -0,0 +1,357 @@ +/* + 960 Grid System ~ Core CSS. + Learn more ~ http://960.gs/ + + Licensed under GPL and MIT. +*/ + +/* + Forces backgrounds to span full width, + even if there is horizontal scrolling. + Increase this if your layout is wider. + + Note: IE6 works fine without this fix. +*/ + +body { + min-width: 960px; +} + +/* `Containers +----------------------------------------------------------------------------------------------------*/ + +.container_12 { + margin-left: auto; + margin-right: auto; + width: 960px; +} + +/* `Grid >> Global +----------------------------------------------------------------------------------------------------*/ + +.grid_1, +.grid_2, +.grid_3, +.grid_4, +.grid_5, +.grid_6, +.grid_7, +.grid_8, +.grid_9, +.grid_10, +.grid_11, +.grid_12 { + display: inline; + float: left; + margin-left: 10px; + margin-right: 10px; +} + +.push_1, .pull_1, +.push_2, .pull_2, +.push_3, .pull_3, +.push_4, .pull_4, +.push_5, .pull_5, +.push_6, .pull_6, +.push_7, .pull_7, +.push_8, .pull_8, +.push_9, .pull_9, +.push_10, .pull_10, +.push_11, .pull_11 { + position: relative; +} + +/* `Grid >> Children (Alpha ~ First, Omega ~ Last) +----------------------------------------------------------------------------------------------------*/ + +.alpha { + margin-left: 0; +} + +.omega { + margin-right: 0; +} + +/* `Grid >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .grid_1 { + width: 60px; +} + +.container_12 .grid_2 { + width: 140px; +} + +.container_12 .grid_3 { + width: 220px; +} + +.container_12 .grid_4 { + width: 300px; +} + +.container_12 .grid_5 { + width: 380px; +} + +.container_12 .grid_6 { + width: 460px; +} + +.container_12 .grid_7 { + width: 540px; +} + +.container_12 .grid_8 { + width: 620px; +} + +.container_12 .grid_9 { + width: 700px; +} + +.container_12 .grid_10 { + width: 780px; +} + +.container_12 .grid_11 { + width: 860px; +} + +.container_12 .grid_12 { + width: 940px; +} + +/* `Prefix Extra Space >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .prefix_1 { + padding-left: 80px; +} + +.container_12 .prefix_2 { + padding-left: 160px; +} + +.container_12 .prefix_3 { + padding-left: 240px; +} + +.container_12 .prefix_4 { + padding-left: 320px; +} + +.container_12 .prefix_5 { + padding-left: 400px; +} + +.container_12 .prefix_6 { + padding-left: 480px; +} + +.container_12 .prefix_7 { + padding-left: 560px; +} + +.container_12 .prefix_8 { + padding-left: 640px; +} + +.container_12 .prefix_9 { + padding-left: 720px; +} + +.container_12 .prefix_10 { + padding-left: 800px; +} + +.container_12 .prefix_11 { + padding-left: 880px; +} + +/* `Suffix Extra Space >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .suffix_1 { + padding-right: 80px; +} + +.container_12 .suffix_2 { + padding-right: 160px; +} + +.container_12 .suffix_3 { + padding-right: 240px; +} + +.container_12 .suffix_4 { + padding-right: 320px; +} + +.container_12 .suffix_5 { + padding-right: 400px; +} + +.container_12 .suffix_6 { + padding-right: 480px; +} + +.container_12 .suffix_7 { + padding-right: 560px; +} + +.container_12 .suffix_8 { + padding-right: 640px; +} + +.container_12 .suffix_9 { + padding-right: 720px; +} + +.container_12 .suffix_10 { + padding-right: 800px; +} + +.container_12 .suffix_11 { + padding-right: 880px; +} + +/* `Push Space >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .push_1 { + left: 80px; +} + +.container_12 .push_2 { + left: 160px; +} + +.container_12 .push_3 { + left: 240px; +} + +.container_12 .push_4 { + left: 320px; +} + +.container_12 .push_5 { + left: 400px; +} + +.container_12 .push_6 { + left: 480px; +} + +.container_12 .push_7 { + left: 560px; +} + +.container_12 .push_8 { + left: 640px; +} + +.container_12 .push_9 { + left: 720px; +} + +.container_12 .push_10 { + left: 800px; +} + +.container_12 .push_11 { + left: 880px; +} + +/* `Pull Space >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .pull_1 { + left: -80px; +} + +.container_12 .pull_2 { + left: -160px; +} + +.container_12 .pull_3 { + left: -240px; +} + +.container_12 .pull_4 { + left: -320px; +} + +.container_12 .pull_5 { + left: -400px; +} + +.container_12 .pull_6 { + left: -480px; +} + +.container_12 .pull_7 { + left: -560px; +} + +.container_12 .pull_8 { + left: -640px; +} + +.container_12 .pull_9 { + left: -720px; +} + +.container_12 .pull_10 { + left: -800px; +} + +.container_12 .pull_11 { + left: -880px; +} + +/* `Clear Floated Elements +----------------------------------------------------------------------------------------------------*/ + +/* http://sonspring.com/journal/clearing-floats */ + +.clear { + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; +} + +/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */ + +.clearfix:before, +.clearfix:after, +.container_12:before, +.container_12:after { + content: '.'; + display: block; + overflow: hidden; + visibility: hidden; + font-size: 0; + line-height: 0; + width: 0; + height: 0; +} + +.clearfix:after, +.container_12:after { + clear: both; +} + +/* + The following zoom:1 rule is specifically for IE6 + IE7. + Move to separate stylesheet if invalid CSS is a problem. +*/ + +.clearfix, +.container_12 { + zoom: 1; +} diff --git a/public/adapt/css/fluid.css b/public/adapt/css/fluid.css new file mode 100644 index 0000000..3322a7b --- /dev/null +++ b/public/adapt/css/fluid.css @@ -0,0 +1,332 @@ +/* + 960 Grid System ~ Core CSS. + Learn more ~ http://960.gs/ + + Licensed under GPL and MIT. +*/ + +/* Containers +----------------------------------------------------------------------------------------------------*/ + +.container_12 { + width: 92%; + margin-left: 4%; + margin-right: 4%; +} + +/* Grid >> Global +----------------------------------------------------------------------------------------------------*/ + +.grid_1, +.grid_2, +.grid_3, +.grid_4, +.grid_5, +.grid_6, +.grid_7, +.grid_8, +.grid_9, +.grid_10, +.grid_11, +.grid_12 { + display: inline; + float: left; + position: relative; + margin-left: 1%; + margin-right: 1%; +} + +/* Grid >> Children (Alpha ~ First, Omega ~ Last) +----------------------------------------------------------------------------------------------------*/ + +.alpha { + margin-left: 0; +} + +.omega { + margin-right: 0; +} + +/* Grid >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .grid_1 { + width: 6.333%; +} + +.container_12 .grid_2 { + width: 14.667%; +} + +.container_12 .grid_3 { + width: 23.0%; +} + +.container_12 .grid_4 { + width: 31.333%; +} + +.container_12 .grid_5 { + width: 39.667%; +} + +.container_12 .grid_6 { + width: 48.0%; +} + +.container_12 .grid_7 { + width: 56.333%; +} + +.container_12 .grid_8 { + width: 64.667%; +} + +.container_12 .grid_9 { + width: 73.0%; +} + +.container_12 .grid_10 { + width: 81.333%; +} + +.container_12 .grid_11 { + width: 89.667%; +} + +.container_12 .grid_12 { + width: 98.0%; +} + +/* Prefix Extra Space >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .prefix_1 { + padding-left: 8.333%; +} + +.container_12 .prefix_2 { + padding-left: 16.667%; +} + +.container_12 .prefix_3 { + padding-left: 25.0%; +} + +.container_12 .prefix_4 { + padding-left: 33.333%; +} + +.container_12 .prefix_5 { + padding-left: 41.667%; +} + +.container_12 .prefix_6 { + padding-left: 50.0%; +} + +.container_12 .prefix_7 { + padding-left: 58.333%; +} + +.container_12 .prefix_8 { + padding-left: 66.667%; +} + +.container_12 .prefix_9 { + padding-left: 75.0%; +} + +.container_12 .prefix_10 { + padding-left: 83.333%; +} + +.container_12 .prefix_11 { + padding-left: 91.667%; +} + +/* Suffix Extra Space >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .suffix_1 { + padding-right: 8.333%; +} + +.container_12 .suffix_2 { + padding-right: 16.667%; +} + +.container_12 .suffix_3 { + padding-right: 25.0%; +} + +.container_12 .suffix_4 { + padding-right: 33.333%; +} + +.container_12 .suffix_5 { + padding-right: 41.667%; +} + +.container_12 .suffix_6 { + padding-right: 50.0%; +} + +.container_12 .suffix_7 { + padding-right: 58.333%; +} + +.container_12 .suffix_8 { + padding-right: 66.667%; +} + +.container_12 .suffix_9 { + padding-right: 75.0%; +} + +.container_12 .suffix_10 { + padding-right: 83.333%; +} + +.container_12 .suffix_11 { + padding-right: 91.667%; +} + +/* Push Space >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .push_1 { + left: 8.333%; +} + +.container_12 .push_2 { + left: 16.667%; +} + +.container_12 .push_3 { + left: 25.0%; +} + +.container_12 .push_4 { + left: 33.333%; +} + +.container_12 .push_5 { + left: 41.667%; +} + +.container_12 .push_6 { + left: 50.0%; +} + +.container_12 .push_7 { + left: 58.333%; +} + +.container_12 .push_8 { + left: 66.667%; +} + +.container_12 .push_9 { + left: 75.0%; +} + +.container_12 .push_10 { + left: 83.333%; +} + +.container_12 .push_11 { + left: 91.667%; +} + +/* Pull Space >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .pull_1 { + left: -8.333%; +} + +.container_12 .pull_2 { + left: -16.667%; +} + +.container_12 .pull_3 { + left: -25.0%; +} + +.container_12 .pull_4 { + left: -33.333%; +} + +.container_12 .pull_5 { + left: -41.667%; +} + +.container_12 .pull_6 { + left: -50.0%; +} + +.container_12 .pull_7 { + left: -58.333%; +} + +.container_12 .pull_8 { + left: -66.667%; +} + +.container_12 .pull_9 { + left: -75.0%; +} + +.container_12 .pull_10 { + left: -83.333%; +} + +.container_12 .pull_11 { + left: -91.667%; +} + +/* `Clear Floated Elements +----------------------------------------------------------------------------------------------------*/ + +/* http://sonspring.com/journal/clearing-floats */ + +.clear { + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; +} + +/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */ + +.clearfix:before, +.clearfix:after, +.container_12:before, +.container_12:after { + content: '.'; + display: block; + overflow: hidden; + visibility: hidden; + font-size: 0; + line-height: 0; + width: 0; + height: 0; +} + +.clearfix:after, +.container_12:after { + clear: both; +} + +/* + The following zoom:1 rule is specifically for IE6 + IE7. + Move to separate stylesheet if invalid CSS is a problem. +*/ + +.clearfix, +.container_12 { + zoom: 1; +} \ No newline at end of file diff --git a/public/adapt/css/mobile.css b/public/adapt/css/mobile.css new file mode 100644 index 0000000..a023dab --- /dev/null +++ b/public/adapt/css/mobile.css @@ -0,0 +1,27 @@ +.grid_1, +.grid_2, +.grid_3, +.grid_4, +.grid_5, +.grid_6, +.grid_7, +.grid_8, +.grid_9, +.grid_10, +.grid_11, +.grid_12 { + margin-left: 10px; + margin-right: 10px; +} + +.align_center, +.align_right { + text-align: left; +} + +.logo a { font-size: 24px; } +.extra { display: none; } +.notmobile { display: none; } +.arrow { display: none; } +img.free-img { display: none; } +.call { font-size: 14px; } diff --git a/public/adapt/js/adapt.js b/public/adapt/js/adapt.js new file mode 100644 index 0000000..82556cd --- /dev/null +++ b/public/adapt/js/adapt.js @@ -0,0 +1,135 @@ +/* + Adapt.js licensed under GPL and MIT. + + Read more here: http://adapt.960.gs +*/ + +// Closure. +(function(w, d, config, undefined) { + // If no config, exit. + if (!config) { + return; + } + + // Empty vars to use later. + var url, url_old, timer; + + // Alias config values. + var callback = typeof config.callback === 'function' ? config.callback : undefined; + var path = config.path ? config.path : ''; + var range = config.range; + var range_len = range.length; + + // Create empty link tag: + // + var css = d.createElement('link'); + css.rel = 'stylesheet'; + + // Called from within adapt(). + function change(i, width) { + // Set the URL. + css.href = url; + url_old = url; + + // Call callback, if defined. + callback && callback(i, width); + } + + // Adapt to width. + function adapt() { + // This clearInterval is for IE. + // Really it belongs in react(), + // but doesn't do any harm here. + clearInterval(timer); + + // Parse browser width. + var width = w.innerWidth || d.documentElement.clientWidth || d.body.clientWidth || 0; + + // While loop vars. + var arr, arr_0, val_1, val_2, is_range, file; + + // How many ranges? + var i = range_len; + var last = range_len - 1; + + while (i--) { + // Turn string into array. + arr = range[i].split('='); + + // Width is to the left of "=". + arr_0 = arr[0]; + + // File name is to the right of "=". + // Presuppoes a file with no spaces. + // If no file specified, assign [i]. + file = arr[1] ? arr[1].replace(/\s/g, '') : i; + + // Assume min/max if "to" isn't present. + is_range = arr_0.match('to'); + + // If it's a range, split left/right sides of "to", + // and then convert each one into numerical values. + // If it's not a range, turn maximum into a number. + val_1 = is_range ? parseInt(arr_0.split('to')[0], 10) : parseInt(arr_0, 10); + val_2 = is_range ? parseInt(arr_0.split('to')[1], 10) : undefined; + + // Check for maxiumum or range. + if ((!val_2 && i === last && width > val_1) || (width > val_1 && width <= val_2)) { + // Built full URL to CSS file. + url = path + file; + break; + } + else { + // Blank if no conditions met. + url = ''; + } + } + + // Was it created yet? + if (!url_old) { + // Apply changes. + change(i, width); + + // Add the CSS, only if path is defined. + // Use faster document.head if possible. + path && (d.head || d.getElementsByTagName('head')[0]).appendChild(css); + } + else if (url_old !== url) { + // Apply changes. + change(i, width); + } + } + + // Fire off once. + adapt(); + + // Slight delay. + function react() { + // Clear interval as window resize fires, + // so that it only calls adapt() when the + // user has finished resizing the window. + clearInterval(timer); + timer = setInterval(adapt, 100); + } + + // Do we want to watch for + // resize and device tilt? + if (config.dynamic) { + // Event listener for window resize, + // also triggered by phone rotation. + if (w.addEventListener) { + // Good browsers. + w.addEventListener('resize', react, false); + } + else if (w.attachEvent) { + // Legacy IE support. + w.attachEvent('onresize', react); + } + else { + // Old-school fallback. + w.onresize = react; + } + } + +// Pass in window, document, config, undefined. +})(this, this.document, ADAPT_CONFIG); \ No newline at end of file diff --git a/public/css/buttons.css b/public/css/buttons.css new file mode 100644 index 0000000..66b767c --- /dev/null +++ b/public/css/buttons.css @@ -0,0 +1,882 @@ +button::-moz-focus-inner { + border: 0; } + +/* minimal +*******************************************************************************/ +button.minimal { + background: #e3e3e3; + border: 1px solid #bbb; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + border-radius: 3px; + -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6; + -moz-box-shadow: inset 0 0 1px 1px #f6f6f6; + -ms-box-shadow: inset 0 0 1px 1px #f6f6f6; + -o-box-shadow: inset 0 0 1px 1px #f6f6f6; + box-shadow: inset 0 0 1px 1px #f6f6f6; + color: #333; + font: bold 12px "helvetica neue", helvetica, arial, sans-serif; + line-height: 1; + padding: 8px 0 9px; + text-align: center; + text-shadow: 0 1px 0 #fff; + width: 150px; } + button.minimal:hover { + background: #d9d9d9; + -webkit-box-shadow: inset 0 0 1px 1px #eaeaea; + -moz-box-shadow: inset 0 0 1px 1px #eaeaea; + -ms-box-shadow: inset 0 0 1px 1px #eaeaea; + -o-box-shadow: inset 0 0 1px 1px #eaeaea; + box-shadow: inset 0 0 1px 1px #eaeaea; + color: #222; + cursor: pointer; } + button.minimal:active { + background: #d0d0d0; + -webkit-box-shadow: inset 0 0 1px 1px #e3e3e3; + -moz-box-shadow: inset 0 0 1px 1px #e3e3e3; + -ms-box-shadow: inset 0 0 1px 1px #e3e3e3; + -o-box-shadow: inset 0 0 1px 1px #e3e3e3; + box-shadow: inset 0 0 1px 1px #e3e3e3; + color: #000; } + +/* clean gray +*******************************************************************************/ +button.clean-gray { + background-color: #eeeeee; + background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); + background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); + background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); + background-image: -o-linear-gradient(top, #eeeeee, #cccccc); + background-image: linear-gradient(top, #eeeeee, #cccccc); + border: 1px solid #ccc; + border-bottom: 1px solid #bbb; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + border-radius: 3px; + color: #333; + font: bold 18px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; + line-height: 1; + padding: 8px 0; + text-align: center; + text-shadow: 0 1px 0 #eee; + width: 250px; } + button.clean-gray:hover { + background-color: #dddddd; + background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#bbbbbb)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb); + background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb); + background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb); + background-image: -o-linear-gradient(top, #dddddd, #bbbbbb); + background-image: linear-gradient(top, #dddddd, #bbbbbb); + border: 1px solid #bbb; + border-bottom: 1px solid #999; + cursor: pointer; + text-shadow: 0 1px 0 #ddd; } + button.clean-gray:active { + border: 1px solid #aaa; + border-bottom: 1px solid #888; + -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; + -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; + -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; + -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; + box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; } + +/* cupid green (inspired by okcupid.com) +*******************************************************************************/ +button.cupid-green { + background-color: #7fbf4d; + background-image: -webkit-gradient(linear, left top, left bottom, from(#7fbf4d), to(#63a62f)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #7fbf4d, #63a62f); + background-image: -moz-linear-gradient(top, #7fbf4d, #63a62f); + background-image: -ms-linear-gradient(top, #7fbf4d, #63a62f); + background-image: -o-linear-gradient(top, #7fbf4d, #63a62f); + background-image: linear-gradient(top, #7fbf4d, #63a62f); + border: 1px solid #63a62f; + border-bottom: 1px solid #5b992b; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + border-radius: 3px; + -webkit-box-shadow: inset 0 1px 0 0 #96ca6d; + -moz-box-shadow: inset 0 1px 0 0 #96ca6d; + -ms-box-shadow: inset 0 1px 0 0 #96ca6d; + -o-box-shadow: inset 0 1px 0 0 #96ca6d; + box-shadow: inset 0 1px 0 0 #96ca6d; + color: #fff; + font: bold 28px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; + line-height: 1; + padding: 7px 0 8px 0; + text-align: center; + text-shadow: 0 -1px 0 #4c9021; + width: 350px; } + button.cupid-green:hover { + background-color: #76b347; + background-image: -webkit-gradient(linear, left top, left bottom, from(#76b347), to(#5e9e2e)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #76b347, #5e9e2e); + background-image: -moz-linear-gradient(top, #76b347, #5e9e2e); + background-image: -ms-linear-gradient(top, #76b347, #5e9e2e); + background-image: -o-linear-gradient(top, #76b347, #5e9e2e); + background-image: linear-gradient(top, #76b347, #5e9e2e); + -webkit-box-shadow: inset 0 1px 0 0 #8dbf67; + -moz-box-shadow: inset 0 1px 0 0 #8dbf67; + -ms-box-shadow: inset 0 1px 0 0 #8dbf67; + -o-box-shadow: inset 0 1px 0 0 #8dbf67; + box-shadow: inset 0 1px 0 0 #8dbf67; + cursor: pointer; } + button.cupid-green:active { + border: 1px solid #5b992b; + border-bottom: 1px solid #538c27; + -webkit-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee; + -moz-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee; + -ms-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee; + -o-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee; + box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee; } + +/* cupid blue (inspired by okcupid.com) +*******************************************************************************/ +button.cupid-blue { + background-color: #d7e5f5; + background-image: -webkit-gradient(linear, left top, left bottom, from(#d7e5f5), to(#cbe0f5)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #d7e5f5, #cbe0f5); + background-image: -moz-linear-gradient(top, #d7e5f5, #cbe0f5); + background-image: -ms-linear-gradient(top, #d7e5f5, #cbe0f5); + background-image: -o-linear-gradient(top, #d7e5f5, #cbe0f5); + background-image: linear-gradient(top, #d7e5f5, #cbe0f5); + border-top: 1px solid #abbbcc; + border-left: 1px solid #a7b6c7; + border-bottom: 1px solid #a1afbf; + border-right: 1px solid #a7b6c7; + -webkit-border-radius: 12px; + -moz-border-radius: 12px; + -ms-border-radius: 12px; + -o-border-radius: 12px; + border-radius: 12px; + -webkit-box-shadow: inset 0 1px 0 0 white; + -moz-box-shadow: inset 0 1px 0 0 white; + -ms-box-shadow: inset 0 1px 0 0 white; + -o-box-shadow: inset 0 1px 0 0 white; + box-shadow: inset 0 1px 0 0 white; + color: #1a3e66; + font: normal 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; + line-height: 1; + padding: 6px 0 7px 0; + text-align: center; + text-shadow: 0 1px 1px #fff; + width: 150px; } + button.cupid-blue:hover { + background-color: #ccd9e8; + background-image: -webkit-gradient(linear, left top, left bottom, from(#ccd9e8), to(#c1d4e8)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #ccd9e8, #c1d4e8); + background-image: -moz-linear-gradient(top, #ccd9e8, #c1d4e8); + background-image: -ms-linear-gradient(top, #ccd9e8, #c1d4e8); + background-image: -o-linear-gradient(top, #ccd9e8, #c1d4e8); + background-image: linear-gradient(top, #ccd9e8, #c1d4e8); + border-top: 1px solid #a1afbf; + border-left: 1px solid #9caaba; + border-bottom: 1px solid #96a3b3; + border-right: 1px solid #9caaba; + -webkit-box-shadow: inset 0 1px 0 0 #f2f2f2; + -moz-box-shadow: inset 0 1px 0 0 #f2f2f2; + -ms-box-shadow: inset 0 1px 0 0 #f2f2f2; + -o-box-shadow: inset 0 1px 0 0 #f2f2f2; + box-shadow: inset 0 1px 0 0 #f2f2f2; + color: #163659; + cursor: pointer; } + button.cupid-blue:active { + border: 1px solid #8c98a7; + -webkit-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee; + -moz-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee; + -ms-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee; + -o-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee; + box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee; } + +/* blue pill (inspired by iTunes) +*******************************************************************************/ +button.blue-pill { + background-color: #a5b8da; + background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b8da), to(#7089b3)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #a5b8da, #7089b3); + background-image: -moz-linear-gradient(top, #a5b8da, #7089b3); + background-image: -ms-linear-gradient(top, #a5b8da, #7089b3); + background-image: -o-linear-gradient(top, #a5b8da, #7089b3); + background-image: linear-gradient(top, #a5b8da, #7089b3); + border-top: 1px solid #758fba; + border-right: 1px solid #6c84ab; + border-bottom: 1px solid #5c6f91; + border-left: 1px solid #6c84ab; + -webkit-border-radius: 18px; + -moz-border-radius: 18px; + -ms-border-radius: 18px; + -o-border-radius: 18px; + border-radius: 18px; + -webkit-box-shadow: inset 0 1px 0 0 #aec3e5; + -moz-box-shadow: inset 0 1px 0 0 #aec3e5; + -ms-box-shadow: inset 0 1px 0 0 #aec3e5; + -o-box-shadow: inset 0 1px 0 0 #aec3e5; + box-shadow: inset 0 1px 0 0 #aec3e5; + color: #fff; + font: bold 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; + line-height: 1; + padding: 8px 0; + text-align: center; + text-shadow: 0 -1px 1px #64799e; + text-transform: uppercase; + width: 150px; } + button.blue-pill:hover { + background-color: #9badcc; + background-image: -webkit-gradient(linear, left top, left bottom, from(#9badcc), to(#687fa6)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #9badcc, #687fa6); + background-image: -moz-linear-gradient(top, #9badcc, #687fa6); + background-image: -ms-linear-gradient(top, #9badcc, #687fa6); + background-image: -o-linear-gradient(top, #9badcc, #687fa6); + background-image: linear-gradient(top, #9badcc, #687fa6); + border-top: 1px solid #6d86ad; + border-right: 1px solid #647a9e; + border-bottom: 1px solid #546685; + border-left: 1px solid #647a9e; + -webkit-box-shadow: inset 0 1px 0 0 #a5b9d9; + -moz-box-shadow: inset 0 1px 0 0 #a5b9d9; + -ms-box-shadow: inset 0 1px 0 0 #a5b9d9; + -o-box-shadow: inset 0 1px 0 0 #a5b9d9; + box-shadow: inset 0 1px 0 0 #a5b9d9; + cursor: pointer; } + button.blue-pill:active { + border: 1px solid #546685; + -webkit-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee; + -moz-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee; + -ms-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee; + -o-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee; + box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee; } + +/* dribbble (inspired by dribbble.com) +*******************************************************************************/ +button.dribbble { + background-color: #f26895; + background-image: -webkit-gradient(linear, left top, left bottom, from(#f26895 0), to(#f26895 50%)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #f26895 0, #f26895 50%, #f15587 50%, #f15587 100%); + background-image: -moz-linear-gradient(top, #f26895 0, #f26895 50%, #f15587 50%, #f15587 100%); + background-image: -ms-linear-gradient(top, #f26895 0, #f26895 50%, #f15587 50%, #f15587 100%); + background-image: -o-linear-gradient(top, #f26895 0, #f26895 50%, #f15587 50%, #f15587 100%); + background-image: linear-gradient(top, #f26895 0, #f26895 50%, #f15587 50%, #f15587 100%); + border: 0; + -moz-border-radius: 6px; + -webkit-border-radius: 6px; + border-radius: 6px; + color: #fcfcfc; + font: bold 16px "helvetica neue", helvetica, arial, sans-serif; + line-height: 1; + padding: 10px 0 12px 0; + text-align: center; + text-shadow: 0px -1px 1px #a64767; + width: 150px; } + button.dribbble:hover { + background-color: #e2558b; + background-image: -webkit-gradient(linear, left top, left bottom, from(#e2558b 0), to(#e2558b 50%)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #e2558b 0, #e2558b 50%, #df3e7b 50%, #df3e7b 100%); + background-image: -moz-linear-gradient(top, #e2558b 0, #e2558b 50%, #df3e7b 50%, #df3e7b 100%); + background-image: -ms-linear-gradient(top, #e2558b 0, #e2558b 50%, #df3e7b 50%, #df3e7b 100%); + background-image: -o-linear-gradient(top, #e2558b 0, #e2558b 50%, #df3e7b 50%, #df3e7b 100%); + background-image: linear-gradient(top, #e2558b 0, #e2558b 50%, #df3e7b 50%, #df3e7b 100%); + cursor: pointer; } + button.dribbble:active { + background-color: #c94477; + background-image: -webkit-gradient(linear, left top, left bottom, from(#c94477 0), to(#c94477 50%)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #c94477 0, #c94477 50%, #c22b65 50%, #c22b65 100%); + background-image: -moz-linear-gradient(top, #c94477 0, #c94477 50%, #c22b65 50%, #c22b65 100%); + background-image: -ms-linear-gradient(top, #c94477 0, #c94477 50%, #c22b65 50%, #c22b65 100%); + background-image: -o-linear-gradient(top, #c94477 0, #c94477 50%, #c22b65 50%, #c22b65 100%); + background-image: linear-gradient(top, #c94477 0, #c94477 50%, #c22b65 50%, #c22b65 100%); } + +/* slick black +*******************************************************************************/ +button.slick-black { + background-color: rgba(50, 50, 50, 0.9); + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(50, 50, 50, 0.9) 0%), to(rgba(30, 30, 30, 0.9) 50%)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.9) 0%, rgba(30, 30, 30, 0.9) 50%, rgba(20, 20, 20, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%); + background-image: -moz-linear-gradient(top, rgba(50, 50, 50, 0.9) 0%, rgba(30, 30, 30, 0.9) 50%, rgba(20, 20, 20, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%); + background-image: -ms-linear-gradient(top, rgba(50, 50, 50, 0.9) 0%, rgba(30, 30, 30, 0.9) 50%, rgba(20, 20, 20, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%); + background-image: -o-linear-gradient(top, rgba(50, 50, 50, 0.9) 0%, rgba(30, 30, 30, 0.9) 50%, rgba(20, 20, 20, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%); + background-image: linear-gradient(top, rgba(50, 50, 50, 0.9) 0%, rgba(30, 30, 30, 0.9) 50%, rgba(20, 20, 20, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%); + border: 0; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1); + -moz-box-shadow: inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1); + -ms-box-shadow: inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1); + -o-box-shadow: inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1); + box-shadow: inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1); + color: #fff; + font: lighter 22px "helvetica neue", helvetica, arial, sans-serif; + line-height: 1; + padding: 12px 0; + text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8), 0 1px 1px rgba(255, 255, 255, 0.3); + width: 150px; } + button.slick-black:hover { + background-color: rgba(70, 70, 70, 0.9); + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(70, 70, 70, 0.9) 0%), to(rgba(50, 50, 50, 0.9) 50%)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, rgba(70, 70, 70, 0.9) 0%, rgba(50, 50, 50, 0.9) 50%, rgba(40, 40, 40, 0.9) 50%, rgba(20, 20, 20, 0.9) 100%); + background-image: -moz-linear-gradient(top, rgba(70, 70, 70, 0.9) 0%, rgba(50, 50, 50, 0.9) 50%, rgba(40, 40, 40, 0.9) 50%, rgba(20, 20, 20, 0.9) 100%); + background-image: -ms-linear-gradient(top, rgba(70, 70, 70, 0.9) 0%, rgba(50, 50, 50, 0.9) 50%, rgba(40, 40, 40, 0.9) 50%, rgba(20, 20, 20, 0.9) 100%); + background-image: -o-linear-gradient(top, rgba(70, 70, 70, 0.9) 0%, rgba(50, 50, 50, 0.9) 50%, rgba(40, 40, 40, 0.9) 50%, rgba(20, 20, 20, 0.9) 100%); + background-image: linear-gradient(top, rgba(70, 70, 70, 0.9) 0%, rgba(50, 50, 50, 0.9) 50%, rgba(40, 40, 40, 0.9) 50%, rgba(20, 20, 20, 0.9) 100%); + cursor: pointer; } + button.slick-black:active { + background-color: rgba(30, 30, 30, 0.9); + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(30, 30, 30, 0.9) 0%), to(rgba(20, 20, 20, 0.9) 50%)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, rgba(30, 30, 30, 0.9) 0%, rgba(20, 20, 20, 0.9) 50%, rgba(10, 10, 10, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%); + background-image: -moz-linear-gradient(top, rgba(30, 30, 30, 0.9) 0%, rgba(20, 20, 20, 0.9) 50%, rgba(10, 10, 10, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%); + background-image: -ms-linear-gradient(top, rgba(30, 30, 30, 0.9) 0%, rgba(20, 20, 20, 0.9) 50%, rgba(10, 10, 10, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%); + background-image: -o-linear-gradient(top, rgba(30, 30, 30, 0.9) 0%, rgba(20, 20, 20, 0.9) 50%, rgba(10, 10, 10, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%); + background-image: linear-gradient(top, rgba(30, 30, 30, 0.9) 0%, rgba(20, 20, 20, 0.9) 50%, rgba(10, 10, 10, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%); } + +/* thoughtbot (inspired by thoughtbot.com) +*******************************************************************************/ +button.thoughtbot { + background-color: #ee432e; + background-image: -webkit-gradient(linear, left top, left bottom, from(#ee432e 0%), to(#c63929 50%)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%); + background-image: -moz-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%); + background-image: -ms-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%); + background-image: -o-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%); + background-image: linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%); + border: 1px solid #951100; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333; + -moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333; + -ms-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333; + -o-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333; + box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333; + color: #fff; + font: bold 28px "helvetica neue", helvetica, arial, sans-serif; + line-height: 1; + padding: 12px 0 14px 0; + text-align: center; + text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8); + width: 250px; } + button.thoughtbot:hover { + background-color: #f37873; + background-image: -webkit-gradient(linear, left top, left bottom, from(#f37873 0%), to(#db504d 50%)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%); + background-image: -moz-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%); + background-image: -ms-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%); + background-image: -o-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%); + background-image: linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%); + cursor: pointer; } + button.thoughtbot:active { + background-color: #d43c28; + background-image: -webkit-gradient(linear, left top, left bottom, from(#d43c28 0%), to(#ad3224 50%)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%); + background-image: -moz-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%); + background-image: -ms-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%); + background-image: -o-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%); + background-image: linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%); + -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4); + -moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4); + -ms-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4); + -o-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4); + box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4); } + +/* punch +*******************************************************************************/ +button.punch { + background: #4162a8; + border-top: 1px solid #38538c; + border-right: 1px solid #1f2d4d; + border-bottom: 1px solid #151e33; + border-left: 1px solid #1f2d4d; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; + -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; + -ms-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; + -o-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; + box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; + color: #fff; + font: bold 20px "helvetica neue", helvetica, arial, sans-serif; + line-height: 1; + margin-bottom: 10px; + padding: 10px 0 12px 0; + text-align: center; + text-shadow: 0px -1px 1px #1e2d4d; + width: 150px; + -webkit-background-clip: padding-box; } + button.punch:hover { + -webkit-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; + -moz-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; + -ms-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; + -o-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; + box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; + cursor: pointer; } + button.punch:active { + -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111; + -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111; + -ms-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111; + -o-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111; + box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111; + margin-top: 58px; } + +/* blue candy (inspired by Apple iOS buttons) +*******************************************************************************/ +button.blue-candy { + background-color: #779be9; + background-image: -webkit-gradient(linear, left top, left bottom, from(#779be9 0%), to(#376fe0 50%)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #779be9 0%, #376fe0 50%, #2260dd 50%, #2463de 100%); + background-image: -moz-linear-gradient(top, #779be9 0%, #376fe0 50%, #2260dd 50%, #2463de 100%); + background-image: -ms-linear-gradient(top, #779be9 0%, #376fe0 50%, #2260dd 50%, #2463de 100%); + background-image: -o-linear-gradient(top, #779be9 0%, #376fe0 50%, #2260dd 50%, #2463de 100%); + background-image: linear-gradient(top, #779be9 0%, #376fe0 50%, #2260dd 50%, #2463de 100%); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + border-radius: 3px; + color: #fff; + font: bold 12px "helvetica neue", helvetica, arial, sans-serif; + line-height: 1; + padding: 10px 0 12px 0; + text-align: center; + text-shadow: 0px -1px 1px #2c4d93; + width: 150px; + -webkit-background-clip: padding-box; } + button.blue-candy:hover { + background-color: #6989cf; + background-image: -webkit-gradient(linear, left top, left bottom, from(#6989cf 0%), to(#3263c7 50%)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #6989cf 0%, #3263c7 50%, #1d55c4 50%, #1d55c4 100%); + background-image: -moz-linear-gradient(top, #6989cf 0%, #3263c7 50%, #1d55c4 50%, #1d55c4 100%); + background-image: -ms-linear-gradient(top, #6989cf 0%, #3263c7 50%, #1d55c4 50%, #1d55c4 100%); + background-image: -o-linear-gradient(top, #6989cf 0%, #3263c7 50%, #1d55c4 50%, #1d55c4 100%); + background-image: linear-gradient(top, #6989cf 0%, #3263c7 50%, #1d55c4 50%, #1d55c4 100%); + -webkit-background-clip: padding-box; + cursor: pointer; } + button.blue-candy:active { + background: #1a4aab; + background: -moz-radial-gradient(50% 31% 0deg, circle cover, rgba(38, 76, 153, 0.4), rgba(11, 23, 46, 0.4)), -moz-linear-gradient(top, #5c78b5 0%, #2b57ad 50%, #1a4aab 50%, #1b4bab 100%); + background: -webkit-gradient(radial, 50% 20%, 75, 50% 50%, 0, from(rgba(38, 76, 153, 0.4)), to(rgba(11, 23, 46, 0.4))), -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #5c78b5), color-stop(0.5, #2b57ad), color-stop(0.5, #1a4aab), color-stop(1, #1b4bab)); + color: #ddd; + -webkit-background-clip: padding-box; } + +/* purple candy +*******************************************************************************/ +button.purple-candy { + background-color: #9e76e8; + background-image: -webkit-gradient(linear, left top, left bottom, from(#9e76e8 0%), to(#7038e0 50%)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%); + background-image: -moz-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%); + background-image: -ms-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%); + background-image: -o-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%); + background-image: linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + border-radius: 3px; + color: #fff; + font: bold 12px "helvetica neue", helvetica, arial, sans-serif; + line-height: 1; + padding: 10px 0 12px 0; + text-align: center; + text-shadow: 0px -1px 1px #473569; + width: 150px; + -webkit-background-clip: padding-box; } + button.purple-candy:hover { + background-color: #8d69cf; + background-image: -webkit-gradient(linear, left top, left bottom, from(#8d69cf 0%), to(#6332c7 50%)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%); + background-image: -moz-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%); + background-image: -ms-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%); + background-image: -o-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%); + background-image: linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%); + -webkit-background-clip: padding-box; + cursor: pointer; } + button.purple-candy:active { + background: #4a1aab; + background: -moz-radial-gradient(50% 31% 0deg, circle cover, rgba(38, 76, 153, 0.4), rgba(11, 23, 46, 0.4)), -moz-linear-gradient(top, #7b5cb5 0%, #572bad 50%, #4a1aab 50%, #4b1bab 100%); + background: -webkit-gradient(radial, 50% 20%, 75, 50% 50%, 0, from(rgba(38, 76, 153, 0.4)), to(rgba(11, 23, 46, 0.4))), -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #7b5cb5), color-stop(0.5, #572bad), color-stop(0.5, #4a1aab), color-stop(1, #4b1bab)); + color: #ddd; + -webkit-background-clip: padding-box; } + +/* shiny blue (inspired by rdio iphone interface) +*******************************************************************************/ +button.shiny-blue { + background-color: #759ae9; + background-image: -webkit-gradient(linear, left top, left bottom, from(#759ae9 0%), to(#376fe0 50%)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); + background-image: -moz-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); + background-image: -ms-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); + background-image: -o-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); + background-image: linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%); + border-top: 1px solid #1f58cc; + border-right: 1px solid #1b4db3; + border-bottom: 1px solid #174299; + border-left: 1px solid #1b4db3; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8); + -moz-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8); + -ms-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8); + -o-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8); + box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8); + color: #fff; + font: bold 12px "helvetica neue", helvetica, arial, sans-serif; + padding: 7px 0; + text-shadow: 0 -1px 1px #1a5ad9; + width: 150px; } + button.shiny-blue:hover { + background-color: #5d89e8; + background-image: -webkit-gradient(linear, left top, left bottom, from(#5d89e8 0%), to(#2261e0 50%)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%); + background-image: -moz-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%); + background-image: -ms-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%); + background-image: -o-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%); + background-image: linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%); + cursor: pointer; } + button.shiny-blue:active { + border-top: 1px solid #1b4db3; + border-right: 1px solid #174299; + border-bottom: 1px solid #133780; + border-left: 1px solid #174299; + -webkit-box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee; + -moz-box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee; + -ms-box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee; + -o-box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee; + box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee; } + +/* download itunes + I wrote a blog post about creating this button: + http://robots.thoughtbot.com/post/2718077289/make-css3-buttons-like-a-boss +*******************************************************************************/ +button.download-itunes { + background-color: #52a8e8; + background-image: -webkit-gradient(linear, left top, left bottom, from(#52a8e8), to(#377ad0)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #52a8e8, #377ad0); + background-image: -moz-linear-gradient(top, #52a8e8, #377ad0); + background-image: -ms-linear-gradient(top, #52a8e8, #377ad0); + background-image: -o-linear-gradient(top, #52a8e8, #377ad0); + background-image: linear-gradient(top, #52a8e8, #377ad0); + border-top: 1px solid #4081af; + border-right: 1px solid #2e69a3; + border-bottom: 1px solid #20559a; + border-left: 1px solid #2e69a3; + -webkit-border-radius: 16px; + -moz-border-radius: 16px; + -ms-border-radius: 16px; + -o-border-radius: 16px; + border-radius: 16px; + -webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3; + -moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3; + -ms-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3; + -o-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3; + box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3; + color: #fff; + font: normal 11px "lucida grande", sans-serif; + line-height: 1; + padding: 3px 5px; + text-align: center; + text-shadow: 0 -1px 1px #3275bc; + width: 112px; + -webkit-background-clip: padding-box; } + button.download-itunes:hover { + background-color: #3e9ee5; + background-image: -webkit-gradient(linear, left top, left bottom, from(#3e9ee5 0%), to(#206bcb 100%)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #3e9ee5 0%, #206bcb 100%); + background-image: -moz-linear-gradient(top, #3e9ee5 0%, #206bcb 100%); + background-image: -ms-linear-gradient(top, #3e9ee5 0%, #206bcb 100%); + background-image: -o-linear-gradient(top, #3e9ee5 0%, #206bcb 100%); + background-image: linear-gradient(top, #3e9ee5 0%, #206bcb 100%); + border-top: 1px solid #2a73a6; + border-right: 1px solid #165899; + border-bottom: 1px solid #07428f; + border-left: 1px solid #165899; + -webkit-box-shadow: inset 0 1px 0 0 #62b1e9; + -moz-box-shadow: inset 0 1px 0 0 #62b1e9; + -ms-box-shadow: inset 0 1px 0 0 #62b1e9; + -o-box-shadow: inset 0 1px 0 0 #62b1e9; + box-shadow: inset 0 1px 0 0 #62b1e9; + cursor: pointer; + text-shadow: 0 -1px 1px #1d62ab; + -webkit-background-clip: padding-box; } + button.download-itunes:active { + background: #3282d3; + border: 1px solid #154c8c; + border-bottom: 1px solid #0e408e; + -webkit-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white; + -moz-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white; + -ms-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white; + -o-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white; + box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white; + text-shadow: 0 -1px 1px #2361a4; + -webkit-background-clip: padding-box; } + +button[disabled].download-itunes, +button[disabled].download-itunes:hover, +button[disabled].download-itunes:active { + background-color: #dadada; + background-image: -webkit-gradient(linear, left top, left bottom, from(#dadada), to(#f3f3f3)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #dadada, #f3f3f3); + background-image: -moz-linear-gradient(top, #dadada, #f3f3f3); + background-image: -ms-linear-gradient(top, #dadada, #f3f3f3); + background-image: -o-linear-gradient(top, #dadada, #f3f3f3); + background-image: linear-gradient(top, #dadada, #f3f3f3); + border-top: 1px solid #c5c5c5; + border-right: 1px solid #cecece; + border-bottom: 1px solid #d9d9d9; + border-left: 1px solid #cecece; + -webkit-box-shadow: none; + -moz-box-shadow: none; + -ms-box-shadow: none; + -o-box-shadow: none; + box-shadow: none; + color: #8f8f8f; + cursor: not-allowed; + text-shadow: 0 -1px 1px #ebebeb; } + +button.download-itunes::-moz-focus-inner { + border: 0; + padding: 0; } + +/* skip (inspired by okcupid iphone interface) +*******************************************************************************/ +button.skip { + background-color: #8c9cbf; + background-image: -webkit-gradient(linear, left top, left bottom, from(#8c9cbf 0%), to(#546a9e 50%)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%); + background-image: -moz-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%); + background-image: -ms-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%); + background-image: -o-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%); + background-image: linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%); + border: 1px solid #172d6e; + border-bottom: 1px solid #0e1d45; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: inset 0 1px 0 0 #b1b9cb; + -moz-box-shadow: inset 0 1px 0 0 #b1b9cb; + -ms-box-shadow: inset 0 1px 0 0 #b1b9cb; + -o-box-shadow: inset 0 1px 0 0 #b1b9cb; + box-shadow: inset 0 1px 0 0 #b1b9cb; + color: #fff; + font: bold 16px "helvetica neue", helvetica, arial, sans-serif; + padding: 7px 0 8px 0; + text-decoration: none; + text-align: center; + text-shadow: 0 -1px 1px #000f4d; + width: 150px; } + button.skip:hover { + background-color: #7f8dad; + background-image: -webkit-gradient(linear, left top, left bottom, from(#7f8dad 0%), to(#4a5e8c 50%)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%); + background-image: -moz-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%); + background-image: -ms-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%); + background-image: -o-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%); + background-image: linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%); + cursor: pointer; } + button.skip:active { + -webkit-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white; + -moz-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white; + -ms-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white; + -o-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white; + box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white; } + +/* minimal indent (inspired by okcupid iphone interface) +*******************************************************************************/ +div.indent { + background-color: #e2e2e2; + background-image: -webkit-gradient(linear, left top, left bottom, from(#e2e2e2), to(#fafafa)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #e2e2e2, #fafafa); + background-image: -moz-linear-gradient(top, #e2e2e2, #fafafa); + background-image: -ms-linear-gradient(top, #e2e2e2, #fafafa); + background-image: -o-linear-gradient(top, #e2e2e2, #fafafa); + background-image: linear-gradient(top, #e2e2e2, #fafafa); + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + -ms-border-radius: 8px; + -o-border-radius: 8px; + border-radius: 8px; + margin: 50px auto 0; + padding: 10px 0; + width: 170px; } + +button.minimal-indent { + background-color: #f3f3f3; + background-image: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3 0%), to(#dddddd 50%)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%); + background-image: -moz-linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%); + background-image: -ms-linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%); + background-image: -o-linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%); + background-image: linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%); + border-right: 1px solid #dfdfdf; + border-bottom: 1px solid #b4b4b4; + border-right: 1px solid #dfdfdf; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef; + -moz-box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef; + -ms-box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef; + -o-box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef; + box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef; + color: #666; + font: bold 16px "helvetica neue", helvetica, arial, sans-serif; + margin: 0; + padding: 7px 0; + text-shadow: 0 1px 1px #fff; + width: 150px; } + button.minimal-indent:hover { + background-color: #e5e5e5; + background-image: -webkit-gradient(linear, left top, left bottom, from(#e5e5e5 0%), to(#d1d1d1 50%)); + /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%); + background-image: -moz-linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%); + background-image: -ms-linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%); + background-image: -o-linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%); + background-image: linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%); + -webkit-box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3; + -moz-box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3; + -ms-box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3; + -o-box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3; + box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3; } + button.minimal-indent:active { + -webkit-box-shadow: inset 0 0 30px 0 #999999, 0 1px 0 0 white; + -moz-box-shadow: inset 0 0 30px 0 #999999, 0 1px 0 0 white; + -ms-box-shadow: inset 0 0 30px 0 #999999, 0 1px 0 0 white; + -o-box-shadow: inset 0 0 30px 0 #999999, 0 1px 0 0 white; + box-shadow: inset 0 0 30px 0 #999999, 0 1px 0 0 white; } + +/* webkit badge +*******************************************************************************/ +button.webkit-badge { + background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #ee432e), color-stop(0.5, #c63929), color-stop(0.5, #b51700), color-stop(1, #891100)); + color: #fff; + font-family: "hoefler text", georgia, serif; + font-size: 30px; + font-style: italic; + font-weight: lighter; + height: 88px; + line-height: 1; + padding: 0; + text-align: center; + text-shadow: 0px -1px 1px #3d0700; + width: 150px; + -webkit-mask-image: url("../images/badge.png"); + -webkit-mask-position: left top; + -webkit-mask-repeat: no-repeat; } + button.webkit-badge:hover { + background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #f37873), color-stop(0.5, #db504d), color-stop(0.5, #cb0500), color-stop(1, #a20601)); + cursor: pointer; } + button.webkit-badge:active { + background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #d43c28), color-stop(0.5, #ad3224), color-stop(0.5, #9c1500), color-stop(1, #700d00)); } + +/* webkit seal +*******************************************************************************/ +button.webkit-seal { + background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #9e76e8), color-stop(1, #6224de)); + color: #fff; + height: 90px; + color: #fff; + font-family: "helvetica neue", helvetica, arial, sans-serif; + font-size: 13px; + font-weight: bold; + line-height: 1; + padding: 0; + text-align: center; + text-shadow: 0px -1px 1px #473569; + width: 150px; + -webkit-mask-image: url("../images/seal.png"); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; } + button.webkit-seal:hover { + background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #8d69cf), color-stop(1, #561fc4)); + cursor: pointer; } + button.webkit-seal:active { + background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 0, from(rgba(38, 76, 153, 0.2)), to(rgba(11, 23, 46, 0.2))), -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #7b5cb5), color-stop(1, #4b1bab)); } + +/* webkit check +*******************************************************************************/ +button.webkit-check { + background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #779be9), color-stop(1, #2463de)); + color: #fff; + height: 88px; + line-height: 1; + padding: 0; + text-align: center; + text-indent: -9999px; + text-shadow: 0px -1px 1px #3d0700; + width: 150px; + -webkit-mask-image: url("../images/check.png"); + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; } + button.webkit-check:hover { + background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #6989cf), color-stop(1, #1d55c4)); + cursor: pointer; } + button.webkit-check:active { + background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #5c78b5), color-stop(1, #1b4bab)); } + +/* disabled button styles + works with this markup: +*******************************************************************************/ +button[disabled], +button[disabled]:hover, +button[disabled]:active { + background: #999; + border: 0; + -webkit-box-shadow: none; + -moz-box-shadow: none; + -ms-box-shadow: none; + -o-box-shadow: none; + box-shadow: none; + color: #aaa; + cursor: not-allowed; + text-shadow: none; } diff --git a/public/css/formalize.css b/public/css/formalize.css new file mode 100644 index 0000000..d5e1ee5 --- /dev/null +++ b/public/css/formalize.css @@ -0,0 +1,398 @@ +/* `Widths +----------------------------------------------------------------------------------------------------*/ + +.input_tiny { + width: 50px; +} + +.input_small { + width: 100px; +} + +.input_medium { + width: 150px; +} + +.input_large { + width: 200px; +} + +.input_xlarge { + width: 250px; +} + +.input_xxlarge { + width: 300px; +} + +.input_full { + width: 100%; +} + +/* + Added via JS to