[Pkg-javascript-commits] [rebar.js] 01/09: Imported Upstream version 0.3.1
Alexandre Viau
aviau at moszumanska.debian.org
Tue Jan 5 22:56:46 UTC 2016
This is an automated email from the git hooks/post-receive script.
aviau pushed a commit to branch master
in repository rebar.js.
commit 29933dad030bfa4c33b38beeb62873b3dd4dd1be
Author: aviau <alexandre at alexandreviau.net>
Date: Tue Jan 5 14:44:10 2016 -0500
Imported Upstream version 0.3.1
---
.editorconfig | 11 +
.gitignore | 4 +
Gruntfile.js | 46 +
LICENSE | 20 +
README.md | 111 ++
bower.json | 38 +
css/app.css | 2445 +++++++++++++++++++++++++++++++++
css/guide.css | 103 ++
css/rebar.css | 2198 +++++++++++++++++++++++++++++
images/rebar-header.png | Bin 0 -> 35028 bytes
images/rebar-logo.png | Bin 0 -> 17148 bytes
images/rebar.png | Bin 0 -> 15871 bytes
images/rebar.svg | 15 +
index.html | 600 ++++++++
less/app.less | 21 +
less/app/backgrounds.less | 1 +
less/app/icons.less | 1 +
less/app/mobile.less | 17 +
less/app/tablet.less | 22 +
less/app/web.less | 7 +
less/app/webfonts.less | 1 +
less/config.less | 391 ++++++
less/rebar.less | 26 +
less/rebar/base.less | 40 +
less/rebar/boxes.less | 152 ++
less/rebar/buttons.less | 213 +++
less/rebar/clearing.less | 62 +
less/rebar/forms.less | 140 ++
less/rebar/grid.less | 178 +++
less/rebar/images.less | 13 +
less/rebar/links.less | 6 +
less/rebar/lists.less | 102 ++
less/rebar/messages.less | 46 +
less/rebar/navigation.less | 15 +
less/rebar/rectangles.less | 158 +++
less/rebar/separators.less | 31 +
less/rebar/shapes.less | 39 +
less/rebar/tables.less | 152 ++
less/rebar/typography.less | 73 +
less/rebar/validation.less | 42 +
package.json | 30 +
webfonts/OpenSans-Bold.ttf | Bin 0 -> 224592 bytes
webfonts/OpenSans-BoldItalic.ttf | Bin 0 -> 213292 bytes
webfonts/OpenSans-ExtraBold.ttf | Bin 0 -> 222584 bytes
webfonts/OpenSans-ExtraBoldItalic.ttf | Bin 0 -> 213420 bytes
webfonts/OpenSans-Italic.ttf | Bin 0 -> 212896 bytes
webfonts/OpenSans-Light.ttf | Bin 0 -> 222412 bytes
webfonts/OpenSans-LightItalic.ttf | Bin 0 -> 213128 bytes
webfonts/OpenSans-Regular.ttf | Bin 0 -> 217360 bytes
webfonts/OpenSans-Semibold.ttf | Bin 0 -> 221328 bytes
webfonts/OpenSans-SemiboldItalic.ttf | Bin 0 -> 212820 bytes
webfonts/index.html | 1 +
52 files changed, 7571 insertions(+)
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..cf8d7fa
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,11 @@
+# editorconfig.org
+
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..3f690f5
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+.DS_Store
+config.codekit
+node_modules/
+bower_components/
\ No newline at end of file
diff --git a/Gruntfile.js b/Gruntfile.js
new file mode 100644
index 0000000..ee55c41
--- /dev/null
+++ b/Gruntfile.js
@@ -0,0 +1,46 @@
+/**
+ * @description watch less, compile and minify
+ */
+
+module.exports = function(grunt) {
+
+ grunt.initConfig({
+ pkg: grunt.file.readJSON('package.json'),
+ less: {
+ development: {
+ options: {
+ paths: ['less'],
+ yuicompress: false
+ },
+ files: {
+ 'css/rebar.css':'less/rebar.less',
+ 'css/app.css':'less/app.less'
+ }
+ }
+ },
+ cssmin: {
+ compress: {
+ files: {
+ 'css/rebar.min.css': ['css/app.css'],
+ 'css/app.min.css': ['css/app.css']
+ }
+ }
+ },
+ watch: {
+ styles: {
+ files: [
+ 'less/**/*.less'
+ ],
+ tasks: ['less']
+ }
+ }
+ });
+
+ grunt.loadNpmTasks('grunt-contrib-watch');
+ grunt.loadNpmTasks('grunt-contrib-less');
+ grunt.loadNpmTasks('grunt-contrib-cssmin');
+
+ grunt.registerTask('build', ['less','cssmin']);
+ grunt.registerTask('default', ['less','watch']);
+
+};
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..e0958e4
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,20 @@
+Copyright (c) 2013, Brennan Novak <hi at brennannovak.com>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..0fedbe7
--- /dev/null
+++ b/README.md
@@ -0,0 +1,111 @@
+
+
+**Rebar** makes developing responsive front-end HTML5 & CSS3 easier. An alternative to popular frameworks like Bootstrap & Foundation which are a bit too heavy & opinionated for our taste- if you've ever tried making a Bootstrap site that doesn't look like a Bootstrap site- you know what we mean. The heaviness of these frameworks works great for back-end developers who have little to no front-end or design knowledge or interest, but can be more of obstacle to people who poses the later s [...]
+
+Think of Rebar as a toolbox + some blueprints to help you start building beautiful modern responsive web applications, quickly. Rebar also aims to provide you with an dependency architecture that should meet most of your needs without getting in your way, no mater the scale of your application :)
+
+Features
+------------
+
+* CSS Reset
+* HTML5 Element Styling
+* HTML5 Form Styling
+* Responsive Grid
+* Responsive Boxes
+* Color Palate
+* LESS
+
+### LESS
+
+Before you can really customize Rebar, you need to be comfortable with the CSS preprocessor LESS. If you're unfamiliar with it, go check out [lesscss.org](http://lesscss.org), read up, and do a basic tutorial. If you're not be ready to compile LESS just yet, if you're scratching your head saying WTF, seriously consider trying it, preprocessors are where it's at and will take your front-end skills to the next level.
+
+
+### Architecture
+
+Rebar documentation guide, use this page to copy style and snippets for your application.
+
+* **index.html**
+
+#### CSS
+
+Include ```rebar.css``` along with your application's CSS but place the ``` <link rel="stylesheet" href="rebar.css" />``` link above your custom CSS code and beware of conflicting styles happening lower in your code. The ```guide.css``` is only used for our documentation page.
+
+* **css/**
+ * rebar.css
+ * guide.css
+
+#### Config
+
+The magic happens in ```config.less``` and is where you define fonts, colors, sizes, margins, and paddings of your app. By tweaking a few things you can get a custom look and feel with little effort.
+
+* **less/config.less**
+
+#### Rebar Core LESS
+
+The ```less/rebar/``` folder contains the core Rebar LESS files. You **should not** edit things in here unless you're trying to submit bug fixes or add functionality to Rebar. If so, we'd love for you to help make Rebar better :)
+
+* **less/rebar/**
+ * base.less
+ * buttons.less
+ * clearing.less
+ * forms.less
+ * grid.less
+ * images.less
+ * links.less
+ * lists.less
+ * messages.less
+ * navigation.less
+ * responsive-boxes.less
+ * responsive-grid.less
+ * separators.less
+ * shapes.less
+ * tables.less
+ * typography.less
+
+By default all these files are included in **less/rebar.less** but you may leave out files your app does not need to cut down on size. Example: comment out **tables.less** if you don't have <tables> in your application, and your name is not [Bobby](http://xkcd.com/327/)
+
+* **less/rebar.less**
+
+This LESS file is what creates the final **rebar.css** that you link to in your application. You shouldn't edit this file if you are using Rebar by itself with little to no customization.
+
+#### Application LESS
+
+If you want to build a new application with Rebar use the ```less/app/``` folder which contains LESS templates commonly used in web applications & responsive design.
+
+* **less/app/**
+ * backgrounds.less
+ * icons.less
+ * mobile.less
+ * tablet.less
+ * web.less
+ * webfonts.less
+
+And if you're using [Bower](http://bower.io) package manager (which we reccomend), you will probably want to copy this folder to your application assets or static folder. Once you do that update the paths inside ```app.less``` to a path similar to ``` ../bower_components/rebar/less/rebar/base.less ``` Then set your LESS compiler to properly compile the CSS within your static folder as well.
+
+What's Missing
+--------------------
+
+Rebar would LIKE to be able to easily switch between fixed and fluid grid designs with adding a class or two but we don't have this functionality, yet.
+
+At the moment Rebar does not have a theme generator or anything, so you need recompile the LESS files with updated config values to make aethetic changes to your site, otherwise it will look like the demo page.
+
+Where's the JavaScript?
+--------------------------------
+
+If you need a lightbox, dropdown menu, tooltip, or other snazy JS things- you ain't gonna find it here. This is an intentional decision, Rebar is a CSS only framework. We believe responsive design and CSS is a complex enough thing to warrant separting it from JS. We suggest you install robust JS libraries and modules instead of large monolithic counterparts.
+
+### Dependencies
+
+The following depencies are installed via Bower when you install Rebar. If you don't use Bower you can manually install them yourself. These are both very helpful libraries for doing fun CSS3 animation, shapes, and gradients. To add these to your application, just link to the LESS or CSS in your ```app.less``` or ```rebar.less``` manifest file.
+
+Dan Eden's [Animate.css](http://daneden.me/animate)
+
+Useful mixins [LESS Elements](http://lesselements.com)
+
+### Credits
+
+Brennan Novak creator of [Rebar](https://brennannovak.com)
+
+David Gamache's for creating [Skeleton Framework](http://www.getskeleton.com)
+
+Awesome CSS preprocessor [LESS](http://lesscss.org)
\ No newline at end of file
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..2278577
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,38 @@
+{
+ "name": "Rebar",
+ "version": "0.3.1",
+ "homepage": "https://brennannovak.com/work/rebar",
+ "authors": [
+ "Brennan Novak https://brennannovak.com",
+ "Edward Hotchkiss http://github.com/edwardhotchkiss"
+ ],
+ "description": "A lightweight HTML5 / CSS3 framework for making responsive websites, built using the LESS preprocessor",
+ "main": "index.html",
+ "keywords": [
+ "less",
+ "css3",
+ "html5",
+ "svg",
+ "responsive"
+ ],
+ "license": "MIT",
+ "ignore": [
+ "**/.*",
+ ".gitignore",
+ ".jshintignore",
+ ".jshintrc",
+ "bower.json",
+ "codekit-config.json",
+ "Gruntfile.js",
+ "package.json",
+ "README.md",
+ "node_modules",
+ "bower_components",
+ "test",
+ "tests"
+ ],
+ "dependencies": {
+ "animate.css": "~3.1.0",
+ "less-elements": "master"
+ }
+}
\ No newline at end of file
diff --git a/css/app.css b/css/app.css
new file mode 100644
index 0000000..f0add9e
--- /dev/null
+++ b/css/app.css
@@ -0,0 +1,2445 @@
+ at charset "UTF-8";
+/* Your Groovy Application v0.0.0
+ * Designed by You and built using Rebar by @brennannovak
+ * http://yourgroovyappplication.com
+ */
+/* Global App - include before config file to specify custom fonts or backgrounds */
+/* Webfonts */
+/* Icons */
+/* Backgrounds */
+/* Config - change settings in this file for the look and feel of your style */
+/* Rebar v0.1.0
+ * config.less
+ */
+/* Colors */
+/* Body */
+/* Container */
+/* Margins, Paddings, and Spacings */
+/* Text */
+/* Links */
+/* Headings */
+/* Navigation */
+/* Lists */
+/* Separators */
+/* Buttons */
+/* Button - Primary */
+/* Button - Secondary */
+/* Button - Info */
+/* Button - Alert */
+/* Button - Warning */
+/* Forms */
+/* Validation */
+/* Tables */
+/* Grid */
+/* Boxes */
+/* Rectangles */
+/* Messages */
+/* Bower */
+/*!
+Animate.css - http://daneden.me/animate
+Licensed under the MIT license
+
+Copyright (c) 2013 Daniel Eden
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+.animated {
+ -webkit-animation-duration: 1s;
+ animation-duration: 1s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+.animated.hinge {
+ -webkit-animation-duration: 2s;
+ animation-duration: 2s;
+}
+ at -webkit-keyframes bounce {
+ 0%,
+ 20%,
+ 50%,
+ 80%,
+ 100% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+ 40% {
+ -webkit-transform: translateY(-30px);
+ transform: translateY(-30px);
+ }
+ 60% {
+ -webkit-transform: translateY(-15px);
+ transform: translateY(-15px);
+ }
+}
+ at keyframes bounce {
+ 0%,
+ 20%,
+ 50%,
+ 80%,
+ 100% {
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+ 40% {
+ -webkit-transform: translateY(-30px);
+ -ms-transform: translateY(-30px);
+ transform: translateY(-30px);
+ }
+ 60% {
+ -webkit-transform: translateY(-15px);
+ -ms-transform: translateY(-15px);
+ transform: translateY(-15px);
+ }
+}
+.bounce {
+ -webkit-animation-name: bounce;
+ animation-name: bounce;
+}
+ at -webkit-keyframes flash {
+ 0%,
+ 50%,
+ 100% {
+ opacity: 1;
+ }
+ 25%,
+ 75% {
+ opacity: 0;
+ }
+}
+ at keyframes flash {
+ 0%,
+ 50%,
+ 100% {
+ opacity: 1;
+ }
+ 25%,
+ 75% {
+ opacity: 0;
+ }
+}
+.flash {
+ -webkit-animation-name: flash;
+ animation-name: flash;
+}
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+ at -webkit-keyframes pulse {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+ 50% {
+ -webkit-transform: scale(1.1);
+ transform: scale(1.1);
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+}
+ at keyframes pulse {
+ 0% {
+ -webkit-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+ 50% {
+ -webkit-transform: scale(1.1);
+ -ms-transform: scale(1.1);
+ transform: scale(1.1);
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+}
+.pulse {
+ -webkit-animation-name: pulse;
+ animation-name: pulse;
+}
+ at -webkit-keyframes shake {
+ 0%,
+ 100% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+ 10%,
+ 30%,
+ 50%,
+ 70%,
+ 90% {
+ -webkit-transform: translateX(-10px);
+ transform: translateX(-10px);
+ }
+ 20%,
+ 40%,
+ 60%,
+ 80% {
+ -webkit-transform: translateX(10px);
+ transform: translateX(10px);
+ }
+}
+ at keyframes shake {
+ 0%,
+ 100% {
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+ 10%,
+ 30%,
+ 50%,
+ 70%,
+ 90% {
+ -webkit-transform: translateX(-10px);
+ -ms-transform: translateX(-10px);
+ transform: translateX(-10px);
+ }
+ 20%,
+ 40%,
+ 60%,
+ 80% {
+ -webkit-transform: translateX(10px);
+ -ms-transform: translateX(10px);
+ transform: translateX(10px);
+ }
+}
+.shake {
+ -webkit-animation-name: shake;
+ animation-name: shake;
+}
+ at -webkit-keyframes swing {
+ 20% {
+ -webkit-transform: rotate(15deg);
+ transform: rotate(15deg);
+ }
+ 40% {
+ -webkit-transform: rotate(-10deg);
+ transform: rotate(-10deg);
+ }
+ 60% {
+ -webkit-transform: rotate(5deg);
+ transform: rotate(5deg);
+ }
+ 80% {
+ -webkit-transform: rotate(-5deg);
+ transform: rotate(-5deg);
+ }
+ 100% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+}
+ at keyframes swing {
+ 20% {
+ -webkit-transform: rotate(15deg);
+ -ms-transform: rotate(15deg);
+ transform: rotate(15deg);
+ }
+ 40% {
+ -webkit-transform: rotate(-10deg);
+ -ms-transform: rotate(-10deg);
+ transform: rotate(-10deg);
+ }
+ 60% {
+ -webkit-transform: rotate(5deg);
+ -ms-transform: rotate(5deg);
+ transform: rotate(5deg);
+ }
+ 80% {
+ -webkit-transform: rotate(-5deg);
+ -ms-transform: rotate(-5deg);
+ transform: rotate(-5deg);
+ }
+ 100% {
+ -webkit-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+}
+.swing {
+ -webkit-transform-origin: top center;
+ -ms-transform-origin: top center;
+ transform-origin: top center;
+ -webkit-animation-name: swing;
+ animation-name: swing;
+}
+ at -webkit-keyframes tada {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+ 10%,
+ 20% {
+ -webkit-transform: scale(0.9) rotate(-3deg);
+ transform: scale(0.9) rotate(-3deg);
+ }
+ 30%,
+ 50%,
+ 70%,
+ 90% {
+ -webkit-transform: scale(1.1) rotate(3deg);
+ transform: scale(1.1) rotate(3deg);
+ }
+ 40%,
+ 60%,
+ 80% {
+ -webkit-transform: scale(1.1) rotate(-3deg);
+ transform: scale(1.1) rotate(-3deg);
+ }
+ 100% {
+ -webkit-transform: scale(1) rotate(0);
+ transform: scale(1) rotate(0);
+ }
+}
+ at keyframes tada {
+ 0% {
+ -webkit-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+ 10%,
+ 20% {
+ -webkit-transform: scale(0.9) rotate(-3deg);
+ -ms-transform: scale(0.9) rotate(-3deg);
+ transform: scale(0.9) rotate(-3deg);
+ }
+ 30%,
+ 50%,
+ 70%,
+ 90% {
+ -webkit-transform: scale(1.1) rotate(3deg);
+ -ms-transform: scale(1.1) rotate(3deg);
+ transform: scale(1.1) rotate(3deg);
+ }
+ 40%,
+ 60%,
+ 80% {
+ -webkit-transform: scale(1.1) rotate(-3deg);
+ -ms-transform: scale(1.1) rotate(-3deg);
+ transform: scale(1.1) rotate(-3deg);
+ }
+ 100% {
+ -webkit-transform: scale(1) rotate(0);
+ -ms-transform: scale(1) rotate(0);
+ transform: scale(1) rotate(0);
+ }
+}
+.tada {
+ -webkit-animation-name: tada;
+ animation-name: tada;
+}
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+ at -webkit-keyframes wobble {
+ 0% {
+ -webkit-transform: translateX(0%);
+ transform: translateX(0%);
+ }
+ 15% {
+ -webkit-transform: translateX(-25%) rotate(-5deg);
+ transform: translateX(-25%) rotate(-5deg);
+ }
+ 30% {
+ -webkit-transform: translateX(20%) rotate(3deg);
+ transform: translateX(20%) rotate(3deg);
+ }
+ 45% {
+ -webkit-transform: translateX(-15%) rotate(-3deg);
+ transform: translateX(-15%) rotate(-3deg);
+ }
+ 60% {
+ -webkit-transform: translateX(10%) rotate(2deg);
+ transform: translateX(10%) rotate(2deg);
+ }
+ 75% {
+ -webkit-transform: translateX(-5%) rotate(-1deg);
+ transform: translateX(-5%) rotate(-1deg);
+ }
+ 100% {
+ -webkit-transform: translateX(0%);
+ transform: translateX(0%);
+ }
+}
+ at keyframes wobble {
+ 0% {
+ -webkit-transform: translateX(0%);
+ -ms-transform: translateX(0%);
+ transform: translateX(0%);
+ }
+ 15% {
+ -webkit-transform: translateX(-25%) rotate(-5deg);
+ -ms-transform: translateX(-25%) rotate(-5deg);
+ transform: translateX(-25%) rotate(-5deg);
+ }
+ 30% {
+ -webkit-transform: translateX(20%) rotate(3deg);
+ -ms-transform: translateX(20%) rotate(3deg);
+ transform: translateX(20%) rotate(3deg);
+ }
+ 45% {
+ -webkit-transform: translateX(-15%) rotate(-3deg);
+ -ms-transform: translateX(-15%) rotate(-3deg);
+ transform: translateX(-15%) rotate(-3deg);
+ }
+ 60% {
+ -webkit-transform: translateX(10%) rotate(2deg);
+ -ms-transform: translateX(10%) rotate(2deg);
+ transform: translateX(10%) rotate(2deg);
+ }
+ 75% {
+ -webkit-transform: translateX(-5%) rotate(-1deg);
+ -ms-transform: translateX(-5%) rotate(-1deg);
+ transform: translateX(-5%) rotate(-1deg);
+ }
+ 100% {
+ -webkit-transform: translateX(0%);
+ -ms-transform: translateX(0%);
+ transform: translateX(0%);
+ }
+}
+.wobble {
+ -webkit-animation-name: wobble;
+ animation-name: wobble;
+}
+ at -webkit-keyframes bounceIn {
+ 0% {
+ opacity: 0;
+ -webkit-transform: scale(0.3);
+ transform: scale(0.3);
+ }
+ 50% {
+ opacity: 1;
+ -webkit-transform: scale(1.05);
+ transform: scale(1.05);
+ }
+ 70% {
+ -webkit-transform: scale(0.9);
+ transform: scale(0.9);
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+}
+ at keyframes bounceIn {
+ 0% {
+ opacity: 0;
+ -webkit-transform: scale(0.3);
+ -ms-transform: scale(0.3);
+ transform: scale(0.3);
+ }
+ 50% {
+ opacity: 1;
+ -webkit-transform: scale(1.05);
+ -ms-transform: scale(1.05);
+ transform: scale(1.05);
+ }
+ 70% {
+ -webkit-transform: scale(0.9);
+ -ms-transform: scale(0.9);
+ transform: scale(0.9);
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+}
+.bounceIn {
+ -webkit-animation-name: bounceIn;
+ animation-name: bounceIn;
+}
+ at -webkit-keyframes bounceInDown {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(-2000px);
+ transform: translateY(-2000px);
+ }
+ 60% {
+ opacity: 1;
+ -webkit-transform: translateY(30px);
+ transform: translateY(30px);
+ }
+ 80% {
+ -webkit-transform: translateY(-10px);
+ transform: translateY(-10px);
+ }
+ 100% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+ at keyframes bounceInDown {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(-2000px);
+ -ms-transform: translateY(-2000px);
+ transform: translateY(-2000px);
+ }
+ 60% {
+ opacity: 1;
+ -webkit-transform: translateY(30px);
+ -ms-transform: translateY(30px);
+ transform: translateY(30px);
+ }
+ 80% {
+ -webkit-transform: translateY(-10px);
+ -ms-transform: translateY(-10px);
+ transform: translateY(-10px);
+ }
+ 100% {
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+.bounceInDown {
+ -webkit-animation-name: bounceInDown;
+ animation-name: bounceInDown;
+}
+ at -webkit-keyframes bounceInLeft {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(-2000px);
+ transform: translateX(-2000px);
+ }
+ 60% {
+ opacity: 1;
+ -webkit-transform: translateX(30px);
+ transform: translateX(30px);
+ }
+ 80% {
+ -webkit-transform: translateX(-10px);
+ transform: translateX(-10px);
+ }
+ 100% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+ at keyframes bounceInLeft {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(-2000px);
+ -ms-transform: translateX(-2000px);
+ transform: translateX(-2000px);
+ }
+ 60% {
+ opacity: 1;
+ -webkit-transform: translateX(30px);
+ -ms-transform: translateX(30px);
+ transform: translateX(30px);
+ }
+ 80% {
+ -webkit-transform: translateX(-10px);
+ -ms-transform: translateX(-10px);
+ transform: translateX(-10px);
+ }
+ 100% {
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+.bounceInLeft {
+ -webkit-animation-name: bounceInLeft;
+ animation-name: bounceInLeft;
+}
+ at -webkit-keyframes bounceInRight {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(2000px);
+ transform: translateX(2000px);
+ }
+ 60% {
+ opacity: 1;
+ -webkit-transform: translateX(-30px);
+ transform: translateX(-30px);
+ }
+ 80% {
+ -webkit-transform: translateX(10px);
+ transform: translateX(10px);
+ }
+ 100% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+ at keyframes bounceInRight {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(2000px);
+ -ms-transform: translateX(2000px);
+ transform: translateX(2000px);
+ }
+ 60% {
+ opacity: 1;
+ -webkit-transform: translateX(-30px);
+ -ms-transform: translateX(-30px);
+ transform: translateX(-30px);
+ }
+ 80% {
+ -webkit-transform: translateX(10px);
+ -ms-transform: translateX(10px);
+ transform: translateX(10px);
+ }
+ 100% {
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+.bounceInRight {
+ -webkit-animation-name: bounceInRight;
+ animation-name: bounceInRight;
+}
+ at -webkit-keyframes bounceInUp {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(2000px);
+ transform: translateY(2000px);
+ }
+ 60% {
+ opacity: 1;
+ -webkit-transform: translateY(-30px);
+ transform: translateY(-30px);
+ }
+ 80% {
+ -webkit-transform: translateY(10px);
+ transform: translateY(10px);
+ }
+ 100% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+ at keyframes bounceInUp {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(2000px);
+ -ms-transform: translateY(2000px);
+ transform: translateY(2000px);
+ }
+ 60% {
+ opacity: 1;
+ -webkit-transform: translateY(-30px);
+ -ms-transform: translateY(-30px);
+ transform: translateY(-30px);
+ }
+ 80% {
+ -webkit-transform: translateY(10px);
+ -ms-transform: translateY(10px);
+ transform: translateY(10px);
+ }
+ 100% {
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+.bounceInUp {
+ -webkit-animation-name: bounceInUp;
+ animation-name: bounceInUp;
+}
+ at -webkit-keyframes bounceOut {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+ 25% {
+ -webkit-transform: scale(0.95);
+ transform: scale(0.95);
+ }
+ 50% {
+ opacity: 1;
+ -webkit-transform: scale(1.1);
+ transform: scale(1.1);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: scale(0.3);
+ transform: scale(0.3);
+ }
+}
+ at keyframes bounceOut {
+ 0% {
+ -webkit-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+ 25% {
+ -webkit-transform: scale(0.95);
+ -ms-transform: scale(0.95);
+ transform: scale(0.95);
+ }
+ 50% {
+ opacity: 1;
+ -webkit-transform: scale(1.1);
+ -ms-transform: scale(1.1);
+ transform: scale(1.1);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: scale(0.3);
+ -ms-transform: scale(0.3);
+ transform: scale(0.3);
+ }
+}
+.bounceOut {
+ -webkit-animation-name: bounceOut;
+ animation-name: bounceOut;
+}
+ at -webkit-keyframes bounceOutDown {
+ 0% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+ 20% {
+ opacity: 1;
+ -webkit-transform: translateY(-20px);
+ transform: translateY(-20px);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(2000px);
+ transform: translateY(2000px);
+ }
+}
+ at keyframes bounceOutDown {
+ 0% {
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+ 20% {
+ opacity: 1;
+ -webkit-transform: translateY(-20px);
+ -ms-transform: translateY(-20px);
+ transform: translateY(-20px);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(2000px);
+ -ms-transform: translateY(2000px);
+ transform: translateY(2000px);
+ }
+}
+.bounceOutDown {
+ -webkit-animation-name: bounceOutDown;
+ animation-name: bounceOutDown;
+}
+ at -webkit-keyframes bounceOutLeft {
+ 0% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+ 20% {
+ opacity: 1;
+ -webkit-transform: translateX(20px);
+ transform: translateX(20px);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(-2000px);
+ transform: translateX(-2000px);
+ }
+}
+ at keyframes bounceOutLeft {
+ 0% {
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+ 20% {
+ opacity: 1;
+ -webkit-transform: translateX(20px);
+ -ms-transform: translateX(20px);
+ transform: translateX(20px);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(-2000px);
+ -ms-transform: translateX(-2000px);
+ transform: translateX(-2000px);
+ }
+}
+.bounceOutLeft {
+ -webkit-animation-name: bounceOutLeft;
+ animation-name: bounceOutLeft;
+}
+ at -webkit-keyframes bounceOutRight {
+ 0% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+ 20% {
+ opacity: 1;
+ -webkit-transform: translateX(-20px);
+ transform: translateX(-20px);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(2000px);
+ transform: translateX(2000px);
+ }
+}
+ at keyframes bounceOutRight {
+ 0% {
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+ 20% {
+ opacity: 1;
+ -webkit-transform: translateX(-20px);
+ -ms-transform: translateX(-20px);
+ transform: translateX(-20px);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(2000px);
+ -ms-transform: translateX(2000px);
+ transform: translateX(2000px);
+ }
+}
+.bounceOutRight {
+ -webkit-animation-name: bounceOutRight;
+ animation-name: bounceOutRight;
+}
+ at -webkit-keyframes bounceOutUp {
+ 0% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+ 20% {
+ opacity: 1;
+ -webkit-transform: translateY(20px);
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(-2000px);
+ transform: translateY(-2000px);
+ }
+}
+ at keyframes bounceOutUp {
+ 0% {
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+ 20% {
+ opacity: 1;
+ -webkit-transform: translateY(20px);
+ -ms-transform: translateY(20px);
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(-2000px);
+ -ms-transform: translateY(-2000px);
+ transform: translateY(-2000px);
+ }
+}
+.bounceOutUp {
+ -webkit-animation-name: bounceOutUp;
+ animation-name: bounceOutUp;
+}
+ at -webkit-keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+ at keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+.fadeIn {
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+}
+ at -webkit-keyframes fadeInDown {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(-20px);
+ transform: translateY(-20px);
+ }
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+ at keyframes fadeInDown {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(-20px);
+ -ms-transform: translateY(-20px);
+ transform: translateY(-20px);
+ }
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+.fadeInDown {
+ -webkit-animation-name: fadeInDown;
+ animation-name: fadeInDown;
+}
+ at -webkit-keyframes fadeInDownBig {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(-2000px);
+ transform: translateY(-2000px);
+ }
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+ at keyframes fadeInDownBig {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(-2000px);
+ -ms-transform: translateY(-2000px);
+ transform: translateY(-2000px);
+ }
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+.fadeInDownBig {
+ -webkit-animation-name: fadeInDownBig;
+ animation-name: fadeInDownBig;
+}
+ at -webkit-keyframes fadeInLeft {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(-20px);
+ transform: translateX(-20px);
+ }
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+ at keyframes fadeInLeft {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(-20px);
+ -ms-transform: translateX(-20px);
+ transform: translateX(-20px);
+ }
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+.fadeInLeft {
+ -webkit-animation-name: fadeInLeft;
+ animation-name: fadeInLeft;
+}
+ at -webkit-keyframes fadeInLeftBig {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(-2000px);
+ transform: translateX(-2000px);
+ }
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+ at keyframes fadeInLeftBig {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(-2000px);
+ -ms-transform: translateX(-2000px);
+ transform: translateX(-2000px);
+ }
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+.fadeInLeftBig {
+ -webkit-animation-name: fadeInLeftBig;
+ animation-name: fadeInLeftBig;
+}
+ at -webkit-keyframes fadeInRight {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(20px);
+ transform: translateX(20px);
+ }
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+ at keyframes fadeInRight {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(20px);
+ -ms-transform: translateX(20px);
+ transform: translateX(20px);
+ }
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+.fadeInRight {
+ -webkit-animation-name: fadeInRight;
+ animation-name: fadeInRight;
+}
+ at -webkit-keyframes fadeInRightBig {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(2000px);
+ transform: translateX(2000px);
+ }
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+ at keyframes fadeInRightBig {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(2000px);
+ -ms-transform: translateX(2000px);
+ transform: translateX(2000px);
+ }
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+.fadeInRightBig {
+ -webkit-animation-name: fadeInRightBig;
+ animation-name: fadeInRightBig;
+}
+ at -webkit-keyframes fadeInUp {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(20px);
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+ at keyframes fadeInUp {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(20px);
+ -ms-transform: translateY(20px);
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+.fadeInUp {
+ -webkit-animation-name: fadeInUp;
+ animation-name: fadeInUp;
+}
+ at -webkit-keyframes fadeInUpBig {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(2000px);
+ transform: translateY(2000px);
+ }
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+ at keyframes fadeInUpBig {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(2000px);
+ -ms-transform: translateY(2000px);
+ transform: translateY(2000px);
+ }
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+.fadeInUpBig {
+ -webkit-animation-name: fadeInUpBig;
+ animation-name: fadeInUpBig;
+}
+ at -webkit-keyframes fadeOut {
+ 0% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
+ at keyframes fadeOut {
+ 0% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
+.fadeOut {
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+}
+ at -webkit-keyframes fadeOutDown {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(20px);
+ transform: translateY(20px);
+ }
+}
+ at keyframes fadeOutDown {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(20px);
+ -ms-transform: translateY(20px);
+ transform: translateY(20px);
+ }
+}
+.fadeOutDown {
+ -webkit-animation-name: fadeOutDown;
+ animation-name: fadeOutDown;
+}
+ at -webkit-keyframes fadeOutDownBig {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(2000px);
+ transform: translateY(2000px);
+ }
+}
+ at keyframes fadeOutDownBig {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(2000px);
+ -ms-transform: translateY(2000px);
+ transform: translateY(2000px);
+ }
+}
+.fadeOutDownBig {
+ -webkit-animation-name: fadeOutDownBig;
+ animation-name: fadeOutDownBig;
+}
+ at -webkit-keyframes fadeOutLeft {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(-20px);
+ transform: translateX(-20px);
+ }
+}
+ at keyframes fadeOutLeft {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(-20px);
+ -ms-transform: translateX(-20px);
+ transform: translateX(-20px);
+ }
+}
+.fadeOutLeft {
+ -webkit-animation-name: fadeOutLeft;
+ animation-name: fadeOutLeft;
+}
+ at -webkit-keyframes fadeOutLeftBig {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(-2000px);
+ transform: translateX(-2000px);
+ }
+}
+ at keyframes fadeOutLeftBig {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(-2000px);
+ -ms-transform: translateX(-2000px);
+ transform: translateX(-2000px);
+ }
+}
+.fadeOutLeftBig {
+ -webkit-animation-name: fadeOutLeftBig;
+ animation-name: fadeOutLeftBig;
+}
+ at -webkit-keyframes fadeOutRight {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(20px);
+ transform: translateX(20px);
+ }
+}
+ at keyframes fadeOutRight {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(20px);
+ -ms-transform: translateX(20px);
+ transform: translateX(20px);
+ }
+}
+.fadeOutRight {
+ -webkit-animation-name: fadeOutRight;
+ animation-name: fadeOutRight;
+}
+ at -webkit-keyframes fadeOutRightBig {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(2000px);
+ transform: translateX(2000px);
+ }
+}
+ at keyframes fadeOutRightBig {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(2000px);
+ -ms-transform: translateX(2000px);
+ transform: translateX(2000px);
+ }
+}
+.fadeOutRightBig {
+ -webkit-animation-name: fadeOutRightBig;
+ animation-name: fadeOutRightBig;
+}
+ at -webkit-keyframes fadeOutUp {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(-20px);
+ transform: translateY(-20px);
+ }
+}
+ at keyframes fadeOutUp {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(-20px);
+ -ms-transform: translateY(-20px);
+ transform: translateY(-20px);
+ }
+}
+.fadeOutUp {
+ -webkit-animation-name: fadeOutUp;
+ animation-name: fadeOutUp;
+}
+ at -webkit-keyframes fadeOutUpBig {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(-2000px);
+ transform: translateY(-2000px);
+ }
+}
+ at keyframes fadeOutUpBig {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(-2000px);
+ -ms-transform: translateY(-2000px);
+ transform: translateY(-2000px);
+ }
+}
+.fadeOutUpBig {
+ -webkit-animation-name: fadeOutUpBig;
+ animation-name: fadeOutUpBig;
+}
+ at -webkit-keyframes flip {
+ 0% {
+ -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+ transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+ -webkit-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+ 40% {
+ -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+ transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+ -webkit-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+ 50% {
+ -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+ transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+ 80% {
+ -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
+ transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+ 100% {
+ -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+ transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+}
+ at keyframes flip {
+ 0% {
+ -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+ -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+ transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+ -webkit-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+ 40% {
+ -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+ -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+ transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+ -webkit-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+ 50% {
+ -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+ -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+ transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+ 80% {
+ -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
+ -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
+ transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+ 100% {
+ -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+ -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+ transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+}
+.animated.flip {
+ -webkit-backface-visibility: visible;
+ -ms-backface-visibility: visible;
+ backface-visibility: visible;
+ -webkit-animation-name: flip;
+ animation-name: flip;
+}
+ at -webkit-keyframes flipInX {
+ 0% {
+ -webkit-transform: perspective(400px) rotateX(90deg);
+ transform: perspective(400px) rotateX(90deg);
+ opacity: 0;
+ }
+ 40% {
+ -webkit-transform: perspective(400px) rotateX(-10deg);
+ transform: perspective(400px) rotateX(-10deg);
+ }
+ 70% {
+ -webkit-transform: perspective(400px) rotateX(10deg);
+ transform: perspective(400px) rotateX(10deg);
+ }
+ 100% {
+ -webkit-transform: perspective(400px) rotateX(0deg);
+ transform: perspective(400px) rotateX(0deg);
+ opacity: 1;
+ }
+}
+ at keyframes flipInX {
+ 0% {
+ -webkit-transform: perspective(400px) rotateX(90deg);
+ -ms-transform: perspective(400px) rotateX(90deg);
+ transform: perspective(400px) rotateX(90deg);
+ opacity: 0;
+ }
+ 40% {
+ -webkit-transform: perspective(400px) rotateX(-10deg);
+ -ms-transform: perspective(400px) rotateX(-10deg);
+ transform: perspective(400px) rotateX(-10deg);
+ }
+ 70% {
+ -webkit-transform: perspective(400px) rotateX(10deg);
+ -ms-transform: perspective(400px) rotateX(10deg);
+ transform: perspective(400px) rotateX(10deg);
+ }
+ 100% {
+ -webkit-transform: perspective(400px) rotateX(0deg);
+ -ms-transform: perspective(400px) rotateX(0deg);
+ transform: perspective(400px) rotateX(0deg);
+ opacity: 1;
+ }
+}
+.flipInX {
+ -webkit-backface-visibility: visible !important;
+ -ms-backface-visibility: visible !important;
+ backface-visibility: visible !important;
+ -webkit-animation-name: flipInX;
+ animation-name: flipInX;
+}
+ at -webkit-keyframes flipInY {
+ 0% {
+ -webkit-transform: perspective(400px) rotateY(90deg);
+ transform: perspective(400px) rotateY(90deg);
+ opacity: 0;
+ }
+ 40% {
+ -webkit-transform: perspective(400px) rotateY(-10deg);
+ transform: perspective(400px) rotateY(-10deg);
+ }
+ 70% {
+ -webkit-transform: perspective(400px) rotateY(10deg);
+ transform: perspective(400px) rotateY(10deg);
+ }
+ 100% {
+ -webkit-transform: perspective(400px) rotateY(0deg);
+ transform: perspective(400px) rotateY(0deg);
+ opacity: 1;
+ }
+}
+ at keyframes flipInY {
+ 0% {
+ -webkit-transform: perspective(400px) rotateY(90deg);
+ -ms-transform: perspective(400px) rotateY(90deg);
+ transform: perspective(400px) rotateY(90deg);
+ opacity: 0;
+ }
+ 40% {
+ -webkit-transform: perspective(400px) rotateY(-10deg);
+ -ms-transform: perspective(400px) rotateY(-10deg);
+ transform: perspective(400px) rotateY(-10deg);
+ }
+ 70% {
+ -webkit-transform: perspective(400px) rotateY(10deg);
+ -ms-transform: perspective(400px) rotateY(10deg);
+ transform: perspective(400px) rotateY(10deg);
+ }
+ 100% {
+ -webkit-transform: perspective(400px) rotateY(0deg);
+ -ms-transform: perspective(400px) rotateY(0deg);
+ transform: perspective(400px) rotateY(0deg);
+ opacity: 1;
+ }
+}
+.flipInY {
+ -webkit-backface-visibility: visible !important;
+ -ms-backface-visibility: visible !important;
+ backface-visibility: visible !important;
+ -webkit-animation-name: flipInY;
+ animation-name: flipInY;
+}
+ at -webkit-keyframes flipOutX {
+ 0% {
+ -webkit-transform: perspective(400px) rotateX(0deg);
+ transform: perspective(400px) rotateX(0deg);
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: perspective(400px) rotateX(90deg);
+ transform: perspective(400px) rotateX(90deg);
+ opacity: 0;
+ }
+}
+ at keyframes flipOutX {
+ 0% {
+ -webkit-transform: perspective(400px) rotateX(0deg);
+ -ms-transform: perspective(400px) rotateX(0deg);
+ transform: perspective(400px) rotateX(0deg);
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: perspective(400px) rotateX(90deg);
+ -ms-transform: perspective(400px) rotateX(90deg);
+ transform: perspective(400px) rotateX(90deg);
+ opacity: 0;
+ }
+}
+.flipOutX {
+ -webkit-animation-name: flipOutX;
+ animation-name: flipOutX;
+ -webkit-backface-visibility: visible !important;
+ -ms-backface-visibility: visible !important;
+ backface-visibility: visible !important;
+}
+ at -webkit-keyframes flipOutY {
+ 0% {
+ -webkit-transform: perspective(400px) rotateY(0deg);
+ transform: perspective(400px) rotateY(0deg);
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: perspective(400px) rotateY(90deg);
+ transform: perspective(400px) rotateY(90deg);
+ opacity: 0;
+ }
+}
+ at keyframes flipOutY {
+ 0% {
+ -webkit-transform: perspective(400px) rotateY(0deg);
+ -ms-transform: perspective(400px) rotateY(0deg);
+ transform: perspective(400px) rotateY(0deg);
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: perspective(400px) rotateY(90deg);
+ -ms-transform: perspective(400px) rotateY(90deg);
+ transform: perspective(400px) rotateY(90deg);
+ opacity: 0;
+ }
+}
+.flipOutY {
+ -webkit-backface-visibility: visible !important;
+ -ms-backface-visibility: visible !important;
+ backface-visibility: visible !important;
+ -webkit-animation-name: flipOutY;
+ animation-name: flipOutY;
+}
+ at -webkit-keyframes lightSpeedIn {
+ 0% {
+ -webkit-transform: translateX(100%) skewX(-30deg);
+ transform: translateX(100%) skewX(-30deg);
+ opacity: 0;
+ }
+ 60% {
+ -webkit-transform: translateX(-20%) skewX(30deg);
+ transform: translateX(-20%) skewX(30deg);
+ opacity: 1;
+ }
+ 80% {
+ -webkit-transform: translateX(0%) skewX(-15deg);
+ transform: translateX(0%) skewX(-15deg);
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: translateX(0%) skewX(0deg);
+ transform: translateX(0%) skewX(0deg);
+ opacity: 1;
+ }
+}
+ at keyframes lightSpeedIn {
+ 0% {
+ -webkit-transform: translateX(100%) skewX(-30deg);
+ -ms-transform: translateX(100%) skewX(-30deg);
+ transform: translateX(100%) skewX(-30deg);
+ opacity: 0;
+ }
+ 60% {
+ -webkit-transform: translateX(-20%) skewX(30deg);
+ -ms-transform: translateX(-20%) skewX(30deg);
+ transform: translateX(-20%) skewX(30deg);
+ opacity: 1;
+ }
+ 80% {
+ -webkit-transform: translateX(0%) skewX(-15deg);
+ -ms-transform: translateX(0%) skewX(-15deg);
+ transform: translateX(0%) skewX(-15deg);
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: translateX(0%) skewX(0deg);
+ -ms-transform: translateX(0%) skewX(0deg);
+ transform: translateX(0%) skewX(0deg);
+ opacity: 1;
+ }
+}
+.lightSpeedIn {
+ -webkit-animation-name: lightSpeedIn;
+ animation-name: lightSpeedIn;
+ -webkit-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+}
+ at -webkit-keyframes lightSpeedOut {
+ 0% {
+ -webkit-transform: translateX(0%) skewX(0deg);
+ transform: translateX(0%) skewX(0deg);
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: translateX(100%) skewX(-30deg);
+ transform: translateX(100%) skewX(-30deg);
+ opacity: 0;
+ }
+}
+ at keyframes lightSpeedOut {
+ 0% {
+ -webkit-transform: translateX(0%) skewX(0deg);
+ -ms-transform: translateX(0%) skewX(0deg);
+ transform: translateX(0%) skewX(0deg);
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: translateX(100%) skewX(-30deg);
+ -ms-transform: translateX(100%) skewX(-30deg);
+ transform: translateX(100%) skewX(-30deg);
+ opacity: 0;
+ }
+}
+.lightSpeedOut {
+ -webkit-animation-name: lightSpeedOut;
+ animation-name: lightSpeedOut;
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+}
+ at -webkit-keyframes rotateIn {
+ 0% {
+ -webkit-transform-origin: center center;
+ transform-origin: center center;
+ -webkit-transform: rotate(-200deg);
+ transform: rotate(-200deg);
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform-origin: center center;
+ transform-origin: center center;
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+}
+ at keyframes rotateIn {
+ 0% {
+ -webkit-transform-origin: center center;
+ -ms-transform-origin: center center;
+ transform-origin: center center;
+ -webkit-transform: rotate(-200deg);
+ -ms-transform: rotate(-200deg);
+ transform: rotate(-200deg);
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform-origin: center center;
+ -ms-transform-origin: center center;
+ transform-origin: center center;
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+}
+.rotateIn {
+ -webkit-animation-name: rotateIn;
+ animation-name: rotateIn;
+}
+ at -webkit-keyframes rotateInDownLeft {
+ 0% {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+}
+ at keyframes rotateInDownLeft {
+ 0% {
+ -webkit-transform-origin: left bottom;
+ -ms-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(-90deg);
+ -ms-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform-origin: left bottom;
+ -ms-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+}
+.rotateInDownLeft {
+ -webkit-animation-name: rotateInDownLeft;
+ animation-name: rotateInDownLeft;
+}
+ at -webkit-keyframes rotateInDownRight {
+ 0% {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+}
+ at keyframes rotateInDownRight {
+ 0% {
+ -webkit-transform-origin: right bottom;
+ -ms-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ transform: rotate(90deg);
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform-origin: right bottom;
+ -ms-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+}
+.rotateInDownRight {
+ -webkit-animation-name: rotateInDownRight;
+ animation-name: rotateInDownRight;
+}
+ at -webkit-keyframes rotateInUpLeft {
+ 0% {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+}
+ at keyframes rotateInUpLeft {
+ 0% {
+ -webkit-transform-origin: left bottom;
+ -ms-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ transform: rotate(90deg);
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform-origin: left bottom;
+ -ms-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+}
+.rotateInUpLeft {
+ -webkit-animation-name: rotateInUpLeft;
+ animation-name: rotateInUpLeft;
+}
+ at -webkit-keyframes rotateInUpRight {
+ 0% {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+}
+ at keyframes rotateInUpRight {
+ 0% {
+ -webkit-transform-origin: right bottom;
+ -ms-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(-90deg);
+ -ms-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform-origin: right bottom;
+ -ms-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+}
+.rotateInUpRight {
+ -webkit-animation-name: rotateInUpRight;
+ animation-name: rotateInUpRight;
+}
+ at -webkit-keyframes rotateOut {
+ 0% {
+ -webkit-transform-origin: center center;
+ transform-origin: center center;
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform-origin: center center;
+ transform-origin: center center;
+ -webkit-transform: rotate(200deg);
+ transform: rotate(200deg);
+ opacity: 0;
+ }
+}
+ at keyframes rotateOut {
+ 0% {
+ -webkit-transform-origin: center center;
+ -ms-transform-origin: center center;
+ transform-origin: center center;
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform-origin: center center;
+ -ms-transform-origin: center center;
+ transform-origin: center center;
+ -webkit-transform: rotate(200deg);
+ -ms-transform: rotate(200deg);
+ transform: rotate(200deg);
+ opacity: 0;
+ }
+}
+.rotateOut {
+ -webkit-animation-name: rotateOut;
+ animation-name: rotateOut;
+}
+ at -webkit-keyframes rotateOutDownLeft {
+ 0% {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+ opacity: 0;
+ }
+}
+ at keyframes rotateOutDownLeft {
+ 0% {
+ -webkit-transform-origin: left bottom;
+ -ms-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform-origin: left bottom;
+ -ms-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ transform: rotate(90deg);
+ opacity: 0;
+ }
+}
+.rotateOutDownLeft {
+ -webkit-animation-name: rotateOutDownLeft;
+ animation-name: rotateOutDownLeft;
+}
+ at -webkit-keyframes rotateOutDownRight {
+ 0% {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+ opacity: 0;
+ }
+}
+ at keyframes rotateOutDownRight {
+ 0% {
+ -webkit-transform-origin: right bottom;
+ -ms-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform-origin: right bottom;
+ -ms-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(-90deg);
+ -ms-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+ opacity: 0;
+ }
+}
+.rotateOutDownRight {
+ -webkit-animation-name: rotateOutDownRight;
+ animation-name: rotateOutDownRight;
+}
+ at -webkit-keyframes rotateOutUpLeft {
+ 0% {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+ opacity: 0;
+ }
+}
+ at keyframes rotateOutUpLeft {
+ 0% {
+ -webkit-transform-origin: left bottom;
+ -ms-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform-origin: left bottom;
+ -ms-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(-90deg);
+ -ms-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+ opacity: 0;
+ }
+}
+.rotateOutUpLeft {
+ -webkit-animation-name: rotateOutUpLeft;
+ animation-name: rotateOutUpLeft;
+}
+ at -webkit-keyframes rotateOutUpRight {
+ 0% {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+ opacity: 0;
+ }
+}
+ at keyframes rotateOutUpRight {
+ 0% {
+ -webkit-transform-origin: right bottom;
+ -ms-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform-origin: right bottom;
+ -ms-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ transform: rotate(90deg);
+ opacity: 0;
+ }
+}
+.rotateOutUpRight {
+ -webkit-animation-name: rotateOutUpRight;
+ animation-name: rotateOutUpRight;
+}
+ at -webkit-keyframes slideInDown {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(-2000px);
+ transform: translateY(-2000px);
+ }
+ 100% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+ at keyframes slideInDown {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(-2000px);
+ -ms-transform: translateY(-2000px);
+ transform: translateY(-2000px);
+ }
+ 100% {
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+.slideInDown {
+ -webkit-animation-name: slideInDown;
+ animation-name: slideInDown;
+}
+ at -webkit-keyframes slideInLeft {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(-2000px);
+ transform: translateX(-2000px);
+ }
+ 100% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+ at keyframes slideInLeft {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(-2000px);
+ -ms-transform: translateX(-2000px);
+ transform: translateX(-2000px);
+ }
+ 100% {
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+.slideInLeft {
+ -webkit-animation-name: slideInLeft;
+ animation-name: slideInLeft;
+}
+ at -webkit-keyframes slideInRight {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(2000px);
+ transform: translateX(2000px);
+ }
+ 100% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+ at keyframes slideInRight {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(2000px);
+ -ms-transform: translateX(2000px);
+ transform: translateX(2000px);
+ }
+ 100% {
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+.slideInRight {
+ -webkit-animation-name: slideInRight;
+ animation-name: slideInRight;
+}
+ at -webkit-keyframes slideOutLeft {
+ 0% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(-2000px);
+ transform: translateX(-2000px);
+ }
+}
+ at keyframes slideOutLeft {
+ 0% {
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(-2000px);
+ -ms-transform: translateX(-2000px);
+ transform: translateX(-2000px);
+ }
+}
+.slideOutLeft {
+ -webkit-animation-name: slideOutLeft;
+ animation-name: slideOutLeft;
+}
+ at -webkit-keyframes slideOutRight {
+ 0% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(2000px);
+ transform: translateX(2000px);
+ }
+}
+ at keyframes slideOutRight {
+ 0% {
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(2000px);
+ -ms-transform: translateX(2000px);
+ transform: translateX(2000px);
+ }
+}
+.slideOutRight {
+ -webkit-animation-name: slideOutRight;
+ animation-name: slideOutRight;
+}
+ at -webkit-keyframes slideOutUp {
+ 0% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(-2000px);
+ transform: translateY(-2000px);
+ }
+}
+ at keyframes slideOutUp {
+ 0% {
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(-2000px);
+ -ms-transform: translateY(-2000px);
+ transform: translateY(-2000px);
+ }
+}
+.slideOutUp {
+ -webkit-animation-name: slideOutUp;
+ animation-name: slideOutUp;
+}
+ at -webkit-keyframes hinge {
+ 0% {
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
+ -webkit-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ }
+ 20%,
+ 60% {
+ -webkit-transform: rotate(80deg);
+ transform: rotate(80deg);
+ -webkit-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ }
+ 40% {
+ -webkit-transform: rotate(60deg);
+ transform: rotate(60deg);
+ -webkit-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ }
+ 80% {
+ -webkit-transform: rotate(60deg) translateY(0);
+ transform: rotate(60deg) translateY(0);
+ opacity: 1;
+ -webkit-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ }
+ 100% {
+ -webkit-transform: translateY(700px);
+ transform: translateY(700px);
+ opacity: 0;
+ }
+}
+ at keyframes hinge {
+ 0% {
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ -webkit-transform-origin: top left;
+ -ms-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ }
+ 20%,
+ 60% {
+ -webkit-transform: rotate(80deg);
+ -ms-transform: rotate(80deg);
+ transform: rotate(80deg);
+ -webkit-transform-origin: top left;
+ -ms-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ }
+ 40% {
+ -webkit-transform: rotate(60deg);
+ -ms-transform: rotate(60deg);
+ transform: rotate(60deg);
+ -webkit-transform-origin: top left;
+ -ms-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ }
+ 80% {
+ -webkit-transform: rotate(60deg) translateY(0);
+ -ms-transform: rotate(60deg) translateY(0);
+ transform: rotate(60deg) translateY(0);
+ opacity: 1;
+ -webkit-transform-origin: top left;
+ -ms-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ }
+ 100% {
+ -webkit-transform: translateY(700px);
+ -ms-transform: translateY(700px);
+ transform: translateY(700px);
+ opacity: 0;
+ }
+}
+.hinge {
+ -webkit-animation-name: hinge;
+ animation-name: hinge;
+}
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+ at -webkit-keyframes rollIn {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(-100%) rotate(-120deg);
+ transform: translateX(-100%) rotate(-120deg);
+ }
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateX(0px) rotate(0deg);
+ transform: translateX(0px) rotate(0deg);
+ }
+}
+ at keyframes rollIn {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(-100%) rotate(-120deg);
+ -ms-transform: translateX(-100%) rotate(-120deg);
+ transform: translateX(-100%) rotate(-120deg);
+ }
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateX(0px) rotate(0deg);
+ -ms-transform: translateX(0px) rotate(0deg);
+ transform: translateX(0px) rotate(0deg);
+ }
+}
+.rollIn {
+ -webkit-animation-name: rollIn;
+ animation-name: rollIn;
+}
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+ at -webkit-keyframes rollOut {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateX(0px) rotate(0deg);
+ transform: translateX(0px) rotate(0deg);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(100%) rotate(120deg);
+ transform: translateX(100%) rotate(120deg);
+ }
+}
+ at keyframes rollOut {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateX(0px) rotate(0deg);
+ -ms-transform: translateX(0px) rotate(0deg);
+ transform: translateX(0px) rotate(0deg);
+ }
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(100%) rotate(120deg);
+ -ms-transform: translateX(100%) rotate(120deg);
+ transform: translateX(100%) rotate(120deg);
+ }
+}
+.rollOut {
+ -webkit-animation-name: rollOut;
+ animation-name: rollOut;
+}
+/*---------------------------------------------------
+ LESS Elements 0.9
+ ---------------------------------------------------
+ A set of useful LESS mixins
+ More info at: http://lesselements.com
+ ---------------------------------------------------*/
+/* App */
+/* Web Style (one responsive breakpoint, use as needed) */
+/* Breakpoint - Larger than 1024 (standard browsers) */
+/* Tablet Style (four responsive breakpoints, change as you see fit) */
+/* Tablet Breakpoint - most iPads & modern tablets */
+/* Tablet Breakpoint - smaller than standard 960 */
+/* Tablet Breakpoint - portrait size to standard 960 */
+/* Tablet Breakpoint - iPad portrait only */
+/* Mobile Style (three responsive breakpoints, change as you see fit) */
+/* Mobile Breakpoint - all sizes */
+/* Mobile Breakpoint - landscape size to tablet portrait */
+/* Mobile Breakpoint - portrait size to mobile landscape size */
diff --git a/css/guide.css b/css/guide.css
new file mode 100644
index 0000000..68fbc79
--- /dev/null
+++ b/css/guide.css
@@ -0,0 +1,103 @@
+/**
+ * @description guide styles
+ */
+
+div.doc-section {
+ margin: 30px 0;
+}
+
+.img-filler {
+ width: 100%;
+ height: 113px;
+ border: 1px solid #999;
+}
+
+.hidden-code a {
+ font-size: 12px;
+ color: #999;
+}
+
+.hidden-code > div {
+ display: none;
+}
+
+/* --- example grid --- */
+
+#grid .example-grid {
+ overflow: hidden;
+}
+
+#grid .example-grid .row div {
+ background: #ddd;
+ -moz-border-radius: 2px;
+ -webkit-border-radius: 2px;
+ border-radius: 2px;
+ text-align: center;
+ text-transform: uppercase;
+ color: #555;
+ font-size: 12px;
+ font-weight: bold;
+ line-height: 25px;
+}
+
+#grid .example-grid .row div:hover {
+ background: #bbb;
+ color: #333;
+}
+
+/* --- boxes --- */
+
+#boxes div.boxes-outer {
+ background: #e9e9e9;
+}
+
+#boxes div.boxes-outer:hover {
+ background: #d6d6d6;
+}
+
+
+.post-button-note, .post-button-note a {
+ font-size: 11px;
+ color: #999;
+}
+
+/* --- buttons --- */
+
+#buttons a,
+#buttons input,
+#buttons button {
+ margin-right: 20px;
+}
+
+#icons li {
+ margin-bottom: 20px;
+}
+
+#icons span {
+ font-size: 30px;
+ line-height: 30px;
+ position: relative;
+ top: 7px;
+ left: 0px;
+ margin-right: 10px;
+}
+
+/* --- color palate --- */
+
+.color-palate-item {
+ width: 120px;
+ height: 150px;
+ margin: 0px 20px 20px 0px;
+ float: left;
+ font-size: 12px;
+ font-weight: bold;
+ text-align: center;
+ padding-top: 25px;
+ cursor: pointer;
+}
+
+/* --- gist --- */
+
+.gist-meta {
+ display: none !important;
+}
diff --git a/css/rebar.css b/css/rebar.css
new file mode 100644
index 0000000..16e65d8
--- /dev/null
+++ b/css/rebar.css
@@ -0,0 +1,2198 @@
+/* Rebar v0.1.0
+ * Designed and built by @brennannovak
+ * http://github.com/brennannovak/Rebar
+ */
+/* Config - change settings in this file for the look and feel of your style */
+/* Rebar v0.1.0
+ * config.less
+ */
+/* Colors */
+/* Body */
+/* Container */
+/* Margins, Paddings, and Spacings */
+/* Text */
+/* Links */
+/* Headings */
+/* Navigation */
+/* Lists */
+/* Separators */
+/* Buttons */
+/* Button - Primary */
+/* Button - Secondary */
+/* Button - Info */
+/* Button - Alert */
+/* Button - Warning */
+/* Forms */
+/* Validation */
+/* Tables */
+/* Grid */
+/* Boxes */
+/* Rectangles */
+/* Messages */
+/* Rebar - these files reset and style all the basic HTML elements */
+/* #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: separate;
+ border-spacing: 0;
+}
+/* #Body Styles
+================================================== */
+body {
+ background: #ffffff;
+ font-size: 18px;
+ font-weight: normal;
+ font-family: OpenSans-Regular, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ line-height: 24px;
+ color: #333333;
+ -webkit-font-smoothing: antialiased;
+ /* Fix for webkit rendering */
+ -webkit-text-size-adjust: 100%;
+}
+/* #Buttons
+================================================== */
+/* Global */
+button,
+button:hover,
+button:active,
+input[type="submit"],
+input[type="submit"]:hover,
+input[type="submit"]:active,
+input[type="reset"],
+input[type="reset"]:hover,
+input[type="reset"]:active,
+input[type="button"],
+input[type="button"]:hover,
+input[type="button"]:active,
+.button-primary,
+.button-secondary,
+.button-info,
+.button-alert,
+.button-warning {
+ font-family: OpenSans-Semibold, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
+ font-size: 16px !important;
+ font-weight: bold !important;
+ line-height: inherit;
+ text-decoration: none;
+ margin: 0px;
+ padding: 5px 15px;
+ display: inline-block;
+ cursor: pointer;
+ box-sizing: border-box;
+ user-select: none;
+ transition-duration: 0.2s;
+ outline: none;
+}
+a.button-primary,
+a.button-primary:visited,
+a.button-primary:hover,
+a.button-secondary,
+a.button-secondary:visited,
+a.button-secondary:hover,
+a.button-info,
+a.button-info:visited,
+a.button-info:hover,
+a.button-alert,
+a.button-alert:visited,
+a.button-alert:hover,
+a.button-warning,
+a.button-warning:visited,
+a.button-warning:hover {
+ text-decoration: none;
+}
+.button-small,
+button.button-small,
+input[type="submit"].button-small,
+input[type="reset"].button-small,
+input[type="button"].button-small {
+ font-family: OpenSans-Semibold, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
+ font-size: 12px !important;
+ font-weight: bold !important;
+ line-height: inherit;
+ text-decoration: none;
+ margin: 0px;
+ padding: 2px 10px;
+ display: inline-block;
+ cursor: pointer;
+ box-sizing: border-box;
+ user-select: none;
+ transition-duration: 0.2s;
+}
+/* Primary */
+button.button-primary,
+input[type="submit"].button-primary,
+input[type="reset"].button-primary,
+input[type="button"].button-primary,
+a.button-primary {
+ color: #ffffff !important;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
+ border: 1px solid #07658f;
+ border-top: 1px solid #2987b1;
+ border-left: 1px solid #2987b1;
+ border-radius: 4px;
+ background: #0a87bf;
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0px 0px rgba(0, 0, 0, 0.2);
+}
+button:hover,
+input[type="submit"]:hover,
+input[type="reset"]:hover,
+input[type="button"]:hover,
+a.button-primary:hover {
+ border-color: #065476;
+ background-color: #0976a7;
+}
+button:active,
+input[type="submit"]:active,
+input[type="reset"]:active,
+input[type="button"]:active,
+a.button-primary:active {
+ border-color: #065476;
+ background-color: #0976a7;
+ box-shadow: inset 0 0.17em 0.1em rgba(0, 0, 0, 0.3);
+}
+/* Secondary */
+button.button-secondary,
+input[type="submit"].button-secondary,
+input[type="reset"].button-secondary,
+input[type="button"].button-secondary,
+a.button-secondary {
+ color: #ffffff !important;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
+ border: 1px solid #045736;
+ border-top: 1px solid #267958;
+ border-left: 1px solid #267958;
+ border-radius: 4px;
+ background: #078754;
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0px 0px rgba(0, 0, 0, 0.2);
+}
+.button-secondary:hover,
+input[type="submit"].button-secondary:hover,
+input[type="reset"].button-secondary:hover,
+input[type="button"].button-secondary:hover,
+a.button-secondary:hover {
+ border-color: #045736;
+ background-color: #066f45;
+}
+button.button-secondary:active,
+input[type="submit"].button-secondary:active,
+input[type="reset"].button-secondary:active,
+input[type="button"].button-secondary:active,
+a.button-secondary:active {
+ border-color: #045736;
+ background-color: #066f45;
+ box-shadow: inset 0 0.17em 0.1em rgba(0, 0, 0, 0.3);
+}
+/* Info */
+button.button-info,
+input[type="submit"].button-info,
+input[type="reset"].button-info,
+input[type="button"].button-info,
+a.button-info {
+ color: #333333 !important;
+ text-shadow: 0px 0px 0px;
+ border: 1px solid #a9b2bd;
+ border-top: 1px solid #cbd4df;
+ border-left: 1px solid #cbd4df;
+ border-radius: 4px;
+ background: #e6e6e6;
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0px 0px rgba(0, 0, 0, 0.2);
+}
+button.button-info:hover,
+input[type="submit"].button-info:hover,
+input[type="reset"].button-info:hover,
+input[type="button"].button-info:hover,
+a.button-info:hover {
+ border-color: #9aa5b2;
+ background-color: #d9d9d9;
+}
+button.button-info:active,
+input[type="submit"].button-info:active,
+input[type="reset"].button-info:active,
+input[type="button"].button-info:active,
+a.button-info:active {
+ border-color: #9aa5b2;
+ background-color: #d9d9d9;
+ box-shadow: inset 0 0.17em 0.1em rgba(0, 0, 0, 0.3);
+}
+/* Alert */
+button.button-alert,
+input[type="submit"].button-alert,
+input[type="reset"].button-alert,
+input[type="button"].button-alert,
+a.button-alert {
+ color: #ffffff !important;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
+ border: 1px solid #c06e00;
+ border-top: 1px solid #e29022;
+ border-left: 1px solid #e29022;
+ border-radius: 4px;
+ background: #f38b00;
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0px 0px rgba(0, 0, 0, 0.2);
+}
+button.button-alert:hover,
+input[type="submit"].button-alert:hover,
+input[type="reset"].button-alert:hover,
+input[type="button"].button-alert:hover,
+a.button-alert:hover {
+ border-color: #a65f00;
+ background-color: #ca7400;
+}
+button.button-alert:active,
+input[type="submit"].button-alert:active,
+input[type="reset"].button-alert:active,
+input[type="button"].button-alert:active,
+a.button-alert:active {
+ border-color: #b66800;
+ background-color: #da7c00;
+ box-shadow: inset 0 0.17em 0.1em rgba(0, 0, 0, 0.3);
+}
+/* Warning */
+button.button-warning,
+input[type="submit"].button-warning,
+input[type="reset"].button-warning,
+input[type="button"].button-warning,
+a.button-warning {
+ color: #ffffff !important;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
+ border: 1px solid #840404;
+ border-top: 1px solid #a62626;
+ border-left: 1px solid #a62626;
+ border-radius: 4px;
+ background: #b50606;
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0px 0px rgba(0, 0, 0, 0.2);
+}
+button.button-warning:hover,
+input[type="submit"].button-warning:hover,
+input[type="reset"].button-warning:hover,
+input[type="button"].button-warning:hover,
+a.button-warning:hover {
+ border-color: #840404;
+ background-color: #920505;
+}
+button.button-warning:active,
+input[type="submit"].button-warning:active,
+input[type="reset"].button-warning:active,
+input[type="button"].button-warning:active,
+a.button-warning:active {
+ border-color: #8e0505;
+ background-color: #9c0505;
+ box-shadow: inset 0 0.17em 0.1em rgba(0, 0, 0, 0.3);
+}
+/* Icons */
+.button span,
+.button-secondary span,
+.button-alert span,
+.button-warning span {
+ margin-right: 5px;
+}
+/* Full Width */
+.button.full-width,
+.button-primary.full-width,
+.button-secondary.full-width,
+.button-alert.full-width,
+.button-warning.full-width,
+.button-big-primary.full-width,
+.button-big-secondary.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;
+}
+/* --- Clearing --- */
+.container:after {
+ content: "\0020";
+ display: block;
+ height: 0;
+ clear: both;
+ visibility: hidden;
+}
+/* Clearfix helper */
+.clearfix {
+ zoom: 1;
+}
+.clearfix:before,
+.clearfix:after {
+ content: "";
+ display: table;
+}
+.clearfix:after {
+ clear: both;
+}
+/* Vertical Margins & Padding */
+.remove-top {
+ margin-top: 0 !important;
+}
+.half-top {
+ margin-top: 10px !important;
+}
+.add-top {
+ margin-top: 20px !important;
+}
+.double-top {
+ margin-top: 40px !important;
+}
+.remove-bottom {
+ margin-bottom: 0 !important;
+}
+.half-bottom {
+ margin-bottom: 10px !important;
+}
+.add-bottom {
+ margin-bottom: 20px !important;
+}
+.double-bottom {
+ margin-top: 40px !important;
+}
+/* Centering */
+.left {
+ float: left;
+}
+.center {
+ margin-left: auto;
+ margin-right: auto;
+}
+.right {
+ float: right;
+}
+.verticle-middle {
+ display: inline-table !important;
+ vertical-align: middle;
+}
+.text-left {
+ text-align: left;
+}
+.text-center {
+ text-align: center;
+}
+.text-right {
+ text-align: right;
+}
+.middle {
+ vertical-align: middle;
+}
+.remove-right {
+ margin-right: 0px;
+}
+.add-right {
+ margin-right: 20px;
+}
+.add-right-half {
+ margin-right: 10px;
+}
+.add-right-double {
+ margin-left: 40px;
+}
+.remove-left {
+ margin-left: 0px;
+}
+.add-left {
+ margin-left: 20px;
+}
+.add-left-half {
+ margin-left: 10px;
+}
+.add-left-double {
+ margin-left: 40px;
+}
+/* Hide */
+.hide {
+ display: none;
+}
+/* #Forms
+================================================== */
+.standard form {
+ margin-bottom: 20px;
+}
+.standard fieldset {
+ margin-bottom: 20px;
+}
+.standard input[type="text"],
+.standard input[type="password"],
+.standard input[type="email"],
+.standard input[type="url"],
+.standard input[type="phone"],
+.standard input[type="address"],
+.standard textarea,
+.standard select {
+ margin-bottom: 20px;
+ padding: 10px 12px;
+ outline: none;
+ font-size: 16px;
+ font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ color: #666666;
+ width: 210px;
+ max-width: 100%;
+ display: block;
+ background: #ffffff;
+ border-radius: 4px;
+ border: 1px solid #999999;
+ box-sizing: border-box;
+}
+.standard input[type="text"]:focus,
+.standard input[type="password"]:focus,
+.standard input[type="email"]:focus,
+.standard textarea:focus {
+ border: 1px solid #666666;
+ color: #333333;
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
+}
+.standard textarea {
+ min-height: 60px;
+}
+.standard label,
+.standard legend {
+ display: block;
+ font-weight: normal;
+ font-size: 16px;
+ font-style: italic;
+ margin: 0 0 5px 0;
+ color: #333333;
+}
+.standard select {
+ color: #0a87bf;
+ width: 220px;
+ font-size: 14.4px;
+}
+.standard input[type="checkbox"] {
+ display: inline;
+}
+.standard label span,
+.standard legend span {
+ font-weight: normal;
+ font-size: 16px;
+ color: #333333;
+}
+.standard a {
+ font-style: normal;
+}
+.standard label span.form_error {
+ margin: 0 0 0 3px;
+ color: #333333;
+}
+input[type="text"].tiny,
+input[type="password"].tiny,
+input[type="email"].tiny,
+input[type="url"].tiny,
+input[type="phone"].tiny,
+input[type="address"].tiny,
+textarea.tiny,
+select.tiny {
+ width: 75px;
+}
+input[type="text"].small,
+input[type="password"].small,
+input[type="email"].small,
+input[type="url"].small,
+input[type="phone"].small,
+input[type="address"].small,
+textarea.small,
+select.small {
+ width: 135px;
+}
+input[type="text"].medium,
+input[type="password"].medium,
+input[type="email"].medium,
+input[type="url"].medium,
+input[type="phone"].medium,
+input[type="address"].medium,
+textarea.medium,
+select.medium {
+ width: 350px;
+}
+input[type="text"].large,
+input[type="password"].large,
+input[type="email"].large,
+input[type="url"].large,
+input[type="phone"].large,
+input[type="address"].large,
+textarea.large,
+select.large {
+ width: 500px;
+}
+input[type="text"].full,
+input[type="password"].full,
+input[type="email"].full,
+input[type="url"].full,
+input[type="phone"].full,
+input[type="address"].full,
+textarea.full,
+select.full {
+ width: 100%;
+}
+label.checkbox {
+ margin-bottom: 20px;
+}
+/**
+ * @name Rebar Grid v0.0.1
+ * @description
+ * - web big 1140 grid
+ * - web 960 grid
+ * - tablet (portrait)
+ * - mobile (portrait)
+ * - mobile (landscape)
+ * - auto-clearing
+ */
+.container {
+ width: 1140px;
+ margin: 0px auto;
+}
+.container div.row {
+ width: 100%;
+ margin-bottom: 20px;
+ overflow: hidden;
+ zoom: 1;
+}
+.container div.row:before,
+.container div.row:after {
+ content: "";
+ display: table;
+}
+.container div.row:after {
+ clear: both;
+}
+.container div:first-child {
+ margin-left: 0;
+}
+.container div:last-child {
+ margin-right: 0;
+}
+.container .col-1,
+.container .col-2,
+.container .col-3,
+.container .col-4,
+.container .col-5,
+.container .col-6,
+.container .col-7,
+.container .col-8,
+.container .col-9,
+.container .col-10,
+.container .col-11,
+.container .col-12,
+.container .col-13,
+.container .col-14,
+.container .col-15,
+.container .col-16,
+.container .one-third,
+.container .two-thirds,
+.container .half,
+.container .one-quarter,
+.container .three-quarters {
+ float: left;
+ display: inline;
+ margin: 0px 1%;
+ min-height: 1px;
+ word-wrap: break-word;
+}
+.container .one-quarter {
+ width: 23.5%;
+}
+.container .three-quarters {
+ width: 74.5%;
+}
+.container .one-third {
+ width: 32%;
+}
+.container .two-thirds {
+ width: 66%;
+}
+.container .half {
+ width: 49%;
+}
+/* --- LESS mixin to generate multiple size grids --- */
+/* ---- Web, max grid ---- */
+ at media only screen and (min-width: 1140px) {
+ .container {
+ width: 1140px;
+ }
+ .container .col-1 {
+ width: 4.4%;
+ }
+ .container .col-2 {
+ width: 10.8%;
+ }
+ .container .col-3 {
+ width: 17.2%;
+ }
+ .container .col-4 {
+ width: 23.6%;
+ }
+ .container .col-5 {
+ width: 30%;
+ }
+ .container .col-6 {
+ width: 36.4%;
+ }
+ .container .col-7 {
+ width: 42.8%;
+ }
+ .container .col-8 {
+ width: 49.0%;
+ }
+ .container .col-9 {
+ width: 55.2%;
+ }
+ .container .col-10 {
+ width: 61.6%;
+ }
+ .container .col-11 {
+ width: 68%;
+ }
+ .container .col-12 {
+ width: 74.4%;
+ }
+ .container .col-13 {
+ width: 80.8%;
+ }
+ .container .col-14 {
+ width: 87.2%;
+ }
+ .container .col-15 {
+ width: 93.6%;
+ }
+ .container .col-16 {
+ width: 100%;
+ }
+ .container .col-offset-1 {
+ padding-left: 4.4%;
+ }
+ .container .col-offset-2 {
+ padding-left: 10.8%;
+ }
+ .container .col-offset-3 {
+ padding-left: 17.2%;
+ }
+ .container .col-offset-4 {
+ padding-left: 23.6%;
+ }
+ .container .col-offset-5 {
+ padding-left: 30%;
+ }
+ .container .col-offset-6 {
+ padding-left: 36.4%;
+ }
+ .container .col-offset-7 {
+ padding-left: 42.8%;
+ }
+ .container .col-offset-8 {
+ padding-left: 49%;
+ }
+ .container .col-offset-9 {
+ padding-left: 55.2%;
+ }
+ .container .col-offset-10 {
+ padding-left: 61.6%;
+ }
+ .container .col-offset-11 {
+ padding-left: 68%;
+ }
+ .container .col-offset-12 {
+ padding-left: 74.4%;
+ }
+ .container .col-offset-13 {
+ padding-left: 80.8%;
+ }
+ .container .col-offset-14 {
+ padding-left: 87.2%;
+ }
+ .container .col-offset-15 {
+ padding-left: 93.6%;
+ }
+}
+/* ---- Web, 960 grid ---- */
+ at media only screen and (min-width: 960px) and (max-width: 1139px) {
+ .container {
+ width: 960px;
+ }
+ .container .col-1 {
+ width: 4.4%;
+ }
+ .container .col-2 {
+ width: 10.8%;
+ }
+ .container .col-3 {
+ width: 17.2%;
+ }
+ .container .col-4 {
+ width: 23.6%;
+ }
+ .container .col-5 {
+ width: 30%;
+ }
+ .container .col-6 {
+ width: 36.4%;
+ }
+ .container .col-7 {
+ width: 42.8%;
+ }
+ .container .col-8 {
+ width: 49.0%;
+ }
+ .container .col-9 {
+ width: 55.2%;
+ }
+ .container .col-10 {
+ width: 61.6%;
+ }
+ .container .col-11 {
+ width: 68%;
+ }
+ .container .col-12 {
+ width: 74.4%;
+ }
+ .container .col-13 {
+ width: 80.8%;
+ }
+ .container .col-14 {
+ width: 87.2%;
+ }
+ .container .col-15 {
+ width: 93.6%;
+ }
+ .container .col-16 {
+ width: 100%;
+ }
+ .container .col-offset-1 {
+ padding-left: 4.4%;
+ }
+ .container .col-offset-2 {
+ padding-left: 10.8%;
+ }
+ .container .col-offset-3 {
+ padding-left: 17.2%;
+ }
+ .container .col-offset-4 {
+ padding-left: 23.6%;
+ }
+ .container .col-offset-5 {
+ padding-left: 30%;
+ }
+ .container .col-offset-6 {
+ padding-left: 36.4%;
+ }
+ .container .col-offset-7 {
+ padding-left: 42.8%;
+ }
+ .container .col-offset-8 {
+ padding-left: 49%;
+ }
+ .container .col-offset-9 {
+ padding-left: 55.2%;
+ }
+ .container .col-offset-10 {
+ padding-left: 61.6%;
+ }
+ .container .col-offset-11 {
+ padding-left: 68%;
+ }
+ .container .col-offset-12 {
+ padding-left: 74.4%;
+ }
+ .container .col-offset-13 {
+ padding-left: 80.8%;
+ }
+ .container .col-offset-14 {
+ padding-left: 87.2%;
+ }
+ .container .col-offset-15 {
+ padding-left: 93.6%;
+ }
+}
+/* ---- Tablet (portrait) design for a width of 768px ---- */
+ at media only screen and (min-width: 768px) and (max-width: 959px) {
+ .container {
+ width: 768px;
+ }
+ .container .col-1 {
+ width: 4.4%;
+ }
+ .container .col-2 {
+ width: 10.8%;
+ }
+ .container .col-3 {
+ width: 17.2%;
+ }
+ .container .col-4 {
+ width: 23.6%;
+ }
+ .container .col-5 {
+ width: 30%;
+ }
+ .container .col-6 {
+ width: 36.4%;
+ }
+ .container .col-7 {
+ width: 42.8%;
+ }
+ .container .col-8 {
+ width: 49.0%;
+ }
+ .container .col-9 {
+ width: 55.2%;
+ }
+ .container .col-10 {
+ width: 61.6%;
+ }
+ .container .col-11 {
+ width: 68%;
+ }
+ .container .col-12 {
+ width: 74.4%;
+ }
+ .container .col-13 {
+ width: 80.8%;
+ }
+ .container .col-14 {
+ width: 87.2%;
+ }
+ .container .col-15 {
+ width: 93.6%;
+ }
+ .container .col-16 {
+ width: 100%;
+ }
+ .container .col-offset-1 {
+ padding-left: 4.4%;
+ }
+ .container .col-offset-2 {
+ padding-left: 10.8%;
+ }
+ .container .col-offset-3 {
+ padding-left: 17.2%;
+ }
+ .container .col-offset-4 {
+ padding-left: 23.6%;
+ }
+ .container .col-offset-5 {
+ padding-left: 30%;
+ }
+ .container .col-offset-6 {
+ padding-left: 36.4%;
+ }
+ .container .col-offset-7 {
+ padding-left: 42.8%;
+ }
+ .container .col-offset-8 {
+ padding-left: 49%;
+ }
+ .container .col-offset-9 {
+ padding-left: 55.2%;
+ }
+ .container .col-offset-10 {
+ padding-left: 61.6%;
+ }
+ .container .col-offset-11 {
+ padding-left: 68%;
+ }
+ .container .col-offset-12 {
+ padding-left: 74.4%;
+ }
+ .container .col-offset-13 {
+ padding-left: 80.8%;
+ }
+ .container .col-offset-14 {
+ padding-left: 87.2%;
+ }
+ .container .col-offset-15 {
+ padding-left: 93.6%;
+ }
+}
+/* ---- Mobile (landscape) design for a width of 480px ---- */
+ at media only screen and (max-width: 767px) {
+ .container {
+ width: 420px;
+ }
+ .container div.row {
+ margin-bottom: 0px;
+ }
+ .container .col-1,
+ .container .col-2,
+ .container .col-3,
+ .container .col-4,
+ .container .col-5,
+ .container .col-6,
+ .container .col-7,
+ .container .col-8,
+ .container .col-9,
+ .container .col-10,
+ .container .col-11,
+ .container .col-12,
+ .container .col-13,
+ .container .col-14,
+ .container .col-15,
+ .container .col-16,
+ .container .one-quarter,
+ .container .three-quarters,
+ .container .one-third,
+ .container .two-thirds,
+ .container .half {
+ margin: 0px 0px 20px 0px;
+ width: 420px;
+ }
+ .container .col-offset-1,
+ .container .col-offset-2,
+ .container .col-offset-3,
+ .container .col-offset-4,
+ .container .col-offset-5,
+ .container .col-offset-6,
+ .container .col-offset-7,
+ .container .col-offset-8,
+ .container .col-offset-9,
+ .container .col-offset-10,
+ .container .col-offset-11,
+ .container .col-offset-12,
+ .container .col-offset-13,
+ .container .col-offset-14,
+ .container .col-offset-15 {
+ margin: 0px 0px 20px 0px;
+ }
+}
+/* #Images
+================================================== */
+img {
+ max-width: 100%;
+ height: auto;
+}
+img.scale-with-grid {
+ max-width: 100%;
+ height: auto;
+}
+/* #Links
+================================================== */
+a,
+a:visited {
+ font-size: 18px;
+ color: #b50606;
+ font-weight: bold;
+ text-decoration: none;
+ outline: 0;
+}
+a:hover,
+a:focus {
+ color: #ac0f0f;
+ text-decoration: underline;
+}
+p a,
+p a:visited {
+ line-height: inherit;
+}
+/* #Lists
+================================================== */
+ul,
+ol {
+ margin: 0 0 40px 40px;
+ padding: 0px;
+}
+ul {
+ list-style: square outside;
+}
+ol {
+ list-style: decimal outside;
+}
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+ margin: 0 0 40px 40px;
+}
+ul ul li,
+ul ol li,
+ol ol li,
+ol ul li {
+ margin-bottom: 15px;
+ line-height: 18px;
+}
+li {
+ margin-bottom: 15px;
+ line-height: 18px;
+}
+/* Lists - Square, Circle, Disc, None */
+ul.square,
+ul.circle,
+ul.disc,
+ul.none,
+ol.square,
+ol.circle,
+ol.disc,
+ol.none {
+ margin: 0 0 40px 40px;
+}
+ul.square,
+ol.square {
+ list-style: square outside;
+}
+ul.circle,
+ol.square {
+ list-style: circle outside;
+}
+ul.disc,
+ol.disc {
+ list-style: disc outside;
+}
+ul.none,
+ol.none {
+ list-style: none outside;
+}
+/* Lists - Large & Small */
+ul li p,
+ul.large li,
+ol.large li {
+ font-size: 27px;
+ line-height: 27px;
+}
+ul li p,
+ul.small li,
+ol.small li {
+ font-size: 14.4px;
+ line-height: 14.4px;
+}
+/* Lists - Horizontal */
+ul.horizontal,
+ol.horizontal {
+ list-style: none inside;
+ margin: 0px;
+}
+ul.horizontal li,
+ol.horizontal li {
+ display: inline-block;
+ margin: 5px 15px;
+}
+ul.horizontal li:first-child,
+ol.horizontal li:first-child {
+ margin-left: 0px;
+}
+ul.horizontal li:last-child,
+ol.horizontal li:last-child {
+ margin-right: 0px;
+}
+/* Messages - error, warning, debug, info, success */
+#messages div {
+ margin: 0px;
+ padding: 10px 10px 10px 20px;
+ list-style: none;
+ font-family: OpenSans-Semibold, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ color: #333333;
+ border-bottom: 0px solid #b7bfc8;
+ background-color: #ffffff;
+ zoom: 1;
+}
+#messages div:before,
+#messages div:after {
+ content: "";
+ display: table;
+}
+#messages div:after {
+ clear: both;
+}
+#messages span.message-text {
+ width: 90%;
+ padding-top: 3px;
+ display: block;
+ float: left;
+ text-align: left;
+ font-size: 18px;
+ line-height: 21px;
+}
+#messages abbr.message-close {
+ cursor: pointer;
+ float: right;
+ display: block;
+ background: #ffffff;
+ color: #333333;
+ padding: 2px 10px;
+ font-size: 12px;
+ font-weight: bold;
+ border-radius: 4px;
+}
+#messages abbr.message-close:hover {
+ background: #b7bfc8;
+}
+#messages .error {
+ background-color: #b50606;
+ color: #ffffff;
+}
+#messages .warning {
+ background-color: #f38b00;
+ color: #ffffff;
+}
+#messages .debug {
+ background-color: #f8e406;
+ color: #333333;
+}
+#messages .info {
+ background-color: #0a87bf;
+ color: #ffffff;
+}
+#messages .success {
+ background-color: #078754;
+ color: #ffffff;
+}
+/* Navigation */
+#navigation {
+ background: #222222;
+ z-index: 10;
+ color: #eeeeee;
+}
+#navigation a {
+ color: #eeeeee;
+ text-decoration: none;
+}
+#navigation a:hover {
+ color: #aaaaaa;
+}
+#navigation span.name_ome {
+ color: #818181;
+}
+#navigation_logo {
+ display: none;
+}
+/* Navigation Sub */
+.navigation-sub {
+ background: #d9d9d9;
+ border-radius: 10px;
+}
+/* Separators
+================================================== */
+hr {
+ border: solid #333333;
+ border-width: 1px 0 0;
+ clear: both;
+ margin: 45px 0;
+ height: 0;
+}
+hr.medium {
+ border: none;
+ height: 2px;
+ margin: 45px 0;
+ background: #333333;
+}
+hr.large {
+ border: none;
+ height: 4px;
+ margin: 45px 0;
+ background: #333333;
+}
+hr.giant {
+ border: none;
+ height: 8px;
+ margin: 45px 0;
+ background: #333333;
+}
+/**
+ * @name Rebar Boxes
+ * @description
+ * - web max 1140
+ * - web 960
+ * - tablet
+ * - mobile
+ */
+.boxes-outer {
+ position: relative;
+ float: left;
+ display: block;
+}
+.boxes-inner h1,
+.boxes-inner h2,
+.boxes-inner h3,
+.boxes-inner h4 {
+ font-size: 24px;
+ margin-bottom: 15px;
+}
+.boxes-inner p {
+ font-size: 14px;
+}
+.boxes-inner p a {
+ font-size: 14px;
+ color: #b7bfc8;
+}
+.boxes-inner a.bottom {
+ position: absolute;
+ bottom: 15px;
+}
+.boxes-inner a.bottom.right {
+ right: 15px;
+}
+/* --- LESS mixin to generate multiple sizes --- */
+/* Five Column, 1140 web max */
+ at media only screen and (min-width: 1140px) {
+ .container .boxes-outer {
+ width: 19.1%;
+ padding-bottom: 19.1%;
+ margin-right: 1.1%;
+ margin-bottom: 1.2%;
+ }
+ .container .boxes-outer:nth-child( 6),
+ .container .boxes-outer:nth-child( 11),
+ .container .boxes-outer:nth-child( 16),
+ .container .boxes-outer:nth-child( 21),
+ .container .boxes-outer:nth-child( 26),
+ .container .boxes-outer:nth-child( 31),
+ .container .boxes-outer:nth-child( 36),
+ .container .boxes-outer:nth-child( 41),
+ .container .boxes-outer:nth-child( 46),
+ .container .boxes-outer:nth-child( 51),
+ .container .boxes-outer:nth-child( 56),
+ .container .boxes-outer:nth-child( 61),
+ .container .boxes-outer:nth-child( 66),
+ .container .boxes-outer:nth-child( 71),
+ .container .boxes-outer:nth-child( 76),
+ .container .boxes-outer:nth-child( 81),
+ .container .boxes-outer:nth-child( 86),
+ .container .boxes-outer:nth-child( 91),
+ .container .boxes-outer:nth-child( 96),
+ .container .boxes-outer:nth-child( 101),
+ .container .boxes-outer:nth-child( 106),
+ .container .boxes-outer:nth-child( 111),
+ .container .boxes-outer:nth-child( 116),
+ .container .boxes-outer:nth-child( 121),
+ .container .boxes-outer:nth-child( 126),
+ .container .boxes-outer:nth-child( 131),
+ .container .boxes-outer:nth-child( 136),
+ .container .boxes-outer:nth-child( 141),
+ .container .boxes-outer:nth-child( 146),
+ .container .boxes-outer:nth-child( 151),
+ .container .boxes-outer:nth-child( 156),
+ .container .boxes-outer:nth-child( 161),
+ .container .boxes-outer:nth-child( 166),
+ .container .boxes-outer:nth-child( 171),
+ .container .boxes-outer:nth-child( 176),
+ .container .boxes-outer:nth-child( 181),
+ .container .boxes-outer:nth-child( 186),
+ .container .boxes-outer:nth-child( 191),
+ .container .boxes-outer:nth-child( 196),
+ .container .boxes-outer:nth-child( 201) {
+ margin-right: 0px;
+ }
+ .container .boxes-inner {
+ position: absolute;
+ left: 1px;
+ top: 1px;
+ bottom: 1px;
+ right: 1px;
+ padding: 15px;
+ color: #555555;
+ overflow: hidden;
+ }
+}
+/* Four Column, 960 web */
+ at media only screen and (min-width: 960px) and (max-width: 1139px) {
+ .container .boxes-outer {
+ width: 23.1%;
+ padding-bottom: 23.1%;
+ margin-right: 2.5%;
+ margin-bottom: 2.5%;
+ }
+ .container .boxes-outer:nth-child( 5),
+ .container .boxes-outer:nth-child( 9),
+ .container .boxes-outer:nth-child( 13),
+ .container .boxes-outer:nth-child( 17),
+ .container .boxes-outer:nth-child( 21),
+ .container .boxes-outer:nth-child( 25),
+ .container .boxes-outer:nth-child( 29),
+ .container .boxes-outer:nth-child( 33),
+ .container .boxes-outer:nth-child( 37),
+ .container .boxes-outer:nth-child( 41),
+ .container .boxes-outer:nth-child( 45),
+ .container .boxes-outer:nth-child( 49),
+ .container .boxes-outer:nth-child( 53),
+ .container .boxes-outer:nth-child( 57),
+ .container .boxes-outer:nth-child( 61),
+ .container .boxes-outer:nth-child( 65),
+ .container .boxes-outer:nth-child( 69),
+ .container .boxes-outer:nth-child( 73),
+ .container .boxes-outer:nth-child( 77),
+ .container .boxes-outer:nth-child( 81),
+ .container .boxes-outer:nth-child( 85),
+ .container .boxes-outer:nth-child( 89),
+ .container .boxes-outer:nth-child( 93),
+ .container .boxes-outer:nth-child( 97),
+ .container .boxes-outer:nth-child( 101),
+ .container .boxes-outer:nth-child( 105),
+ .container .boxes-outer:nth-child( 109),
+ .container .boxes-outer:nth-child( 113),
+ .container .boxes-outer:nth-child( 117),
+ .container .boxes-outer:nth-child( 121),
+ .container .boxes-outer:nth-child( 125),
+ .container .boxes-outer:nth-child( 129),
+ .container .boxes-outer:nth-child( 133),
+ .container .boxes-outer:nth-child( 137),
+ .container .boxes-outer:nth-child( 141),
+ .container .boxes-outer:nth-child( 145),
+ .container .boxes-outer:nth-child( 149),
+ .container .boxes-outer:nth-child( 153),
+ .container .boxes-outer:nth-child( 157),
+ .container .boxes-outer:nth-child( 161) {
+ margin-right: 0px;
+ }
+ .container .boxes-inner {
+ position: absolute;
+ left: 1px;
+ top: 1px;
+ bottom: 1px;
+ right: 1px;
+ padding: 15px;
+ color: #555555;
+ overflow: hidden;
+ }
+}
+/* Three Column, tablet landscape */
+ at media only screen and (min-width: 768px) and (max-width: 959px) {
+ .container .boxes-outer {
+ width: 31%;
+ padding-bottom: 31%;
+ margin-right: 3.5%;
+ margin-bottom: 3.5%;
+ }
+ .container .boxes-outer:nth-child( 4),
+ .container .boxes-outer:nth-child( 7),
+ .container .boxes-outer:nth-child( 10),
+ .container .boxes-outer:nth-child( 13),
+ .container .boxes-outer:nth-child( 16),
+ .container .boxes-outer:nth-child( 19),
+ .container .boxes-outer:nth-child( 22),
+ .container .boxes-outer:nth-child( 25),
+ .container .boxes-outer:nth-child( 28),
+ .container .boxes-outer:nth-child( 31),
+ .container .boxes-outer:nth-child( 34),
+ .container .boxes-outer:nth-child( 37),
+ .container .boxes-outer:nth-child( 40),
+ .container .boxes-outer:nth-child( 43),
+ .container .boxes-outer:nth-child( 46),
+ .container .boxes-outer:nth-child( 49),
+ .container .boxes-outer:nth-child( 52),
+ .container .boxes-outer:nth-child( 55),
+ .container .boxes-outer:nth-child( 58),
+ .container .boxes-outer:nth-child( 61),
+ .container .boxes-outer:nth-child( 64),
+ .container .boxes-outer:nth-child( 67),
+ .container .boxes-outer:nth-child( 70),
+ .container .boxes-outer:nth-child( 73),
+ .container .boxes-outer:nth-child( 76),
+ .container .boxes-outer:nth-child( 79),
+ .container .boxes-outer:nth-child( 82),
+ .container .boxes-outer:nth-child( 85),
+ .container .boxes-outer:nth-child( 88),
+ .container .boxes-outer:nth-child( 91),
+ .container .boxes-outer:nth-child( 94),
+ .container .boxes-outer:nth-child( 97),
+ .container .boxes-outer:nth-child( 100),
+ .container .boxes-outer:nth-child( 103),
+ .container .boxes-outer:nth-child( 106),
+ .container .boxes-outer:nth-child( 109),
+ .container .boxes-outer:nth-child( 112),
+ .container .boxes-outer:nth-child( 115),
+ .container .boxes-outer:nth-child( 118),
+ .container .boxes-outer:nth-child( 121) {
+ margin-right: 0px;
+ }
+ .container .boxes-inner {
+ position: absolute;
+ left: 1px;
+ top: 1px;
+ bottom: 1px;
+ right: 1px;
+ padding: 15px;
+ color: #555555;
+ overflow: hidden;
+ }
+}
+/* Two Column, mobile portrait & landscape */
+ at media only screen and (max-width: 767px) {
+ .container .boxes-outer {
+ width: 47.7%;
+ padding-bottom: 47.7%;
+ margin-right: 4.5%;
+ margin-bottom: 4.5%;
+ }
+ .container .boxes-outer:nth-child( 3),
+ .container .boxes-outer:nth-child( 5),
+ .container .boxes-outer:nth-child( 7),
+ .container .boxes-outer:nth-child( 9),
+ .container .boxes-outer:nth-child( 11),
+ .container .boxes-outer:nth-child( 13),
+ .container .boxes-outer:nth-child( 15),
+ .container .boxes-outer:nth-child( 17),
+ .container .boxes-outer:nth-child( 19),
+ .container .boxes-outer:nth-child( 21),
+ .container .boxes-outer:nth-child( 23),
+ .container .boxes-outer:nth-child( 25),
+ .container .boxes-outer:nth-child( 27),
+ .container .boxes-outer:nth-child( 29),
+ .container .boxes-outer:nth-child( 31),
+ .container .boxes-outer:nth-child( 33),
+ .container .boxes-outer:nth-child( 35),
+ .container .boxes-outer:nth-child( 37),
+ .container .boxes-outer:nth-child( 39),
+ .container .boxes-outer:nth-child( 41),
+ .container .boxes-outer:nth-child( 43),
+ .container .boxes-outer:nth-child( 45),
+ .container .boxes-outer:nth-child( 47),
+ .container .boxes-outer:nth-child( 49),
+ .container .boxes-outer:nth-child( 51),
+ .container .boxes-outer:nth-child( 53),
+ .container .boxes-outer:nth-child( 55),
+ .container .boxes-outer:nth-child( 57),
+ .container .boxes-outer:nth-child( 59),
+ .container .boxes-outer:nth-child( 61),
+ .container .boxes-outer:nth-child( 63),
+ .container .boxes-outer:nth-child( 65),
+ .container .boxes-outer:nth-child( 67),
+ .container .boxes-outer:nth-child( 69),
+ .container .boxes-outer:nth-child( 71),
+ .container .boxes-outer:nth-child( 73),
+ .container .boxes-outer:nth-child( 75),
+ .container .boxes-outer:nth-child( 77),
+ .container .boxes-outer:nth-child( 79),
+ .container .boxes-outer:nth-child( 81) {
+ margin-right: 0px;
+ }
+ .container .boxes-inner {
+ position: absolute;
+ left: 1px;
+ top: 1px;
+ bottom: 1px;
+ right: 1px;
+ padding: 15px;
+ color: #555555;
+ overflow: hidden;
+ }
+}
+/**
+ * @name Rebar Rectangles
+ * @description
+ * - web max 1140
+ * - web 960
+ * - tablet
+ * - mobile
+ */
+.rectangles-outer {
+ position: relative;
+ float: left;
+ display: block;
+}
+.rectangles-inner h1,
+.rectangles-inner h2,
+.rectangles-inner h3,
+.rectangles-inner h4 {
+ font-size: 18px;
+ margin-bottom: 10px;
+}
+.rectangles-inner p {
+ font-size: 12px;
+}
+.rectangles-inner p a {
+ font-size: 12px;
+ color: #b7bfc8;
+}
+.rectangles-inner a.bottom {
+ position: absolute;
+ bottom: 10px;
+}
+.rectangles-inner a.bottom.right {
+ right: 10px;
+}
+/* --- LESS mixin to generate multiple sizes --- */
+/* Five Column, 1140 web max */
+ at media only screen and (min-width: 1140px) {
+ .container .rectangles-outer {
+ width: 19.1%;
+ height: 75px;
+ margin-right: 1.1%;
+ margin-bottom: 1.2%;
+ }
+ .container .rectangles-outer:nth-child( 6),
+ .container .rectangles-outer:nth-child( 11),
+ .container .rectangles-outer:nth-child( 16),
+ .container .rectangles-outer:nth-child( 21),
+ .container .rectangles-outer:nth-child( 26),
+ .container .rectangles-outer:nth-child( 31),
+ .container .rectangles-outer:nth-child( 36),
+ .container .rectangles-outer:nth-child( 41),
+ .container .rectangles-outer:nth-child( 46),
+ .container .rectangles-outer:nth-child( 51),
+ .container .rectangles-outer:nth-child( 56),
+ .container .rectangles-outer:nth-child( 61),
+ .container .rectangles-outer:nth-child( 66),
+ .container .rectangles-outer:nth-child( 71),
+ .container .rectangles-outer:nth-child( 76),
+ .container .rectangles-outer:nth-child( 81),
+ .container .rectangles-outer:nth-child( 86),
+ .container .rectangles-outer:nth-child( 91),
+ .container .rectangles-outer:nth-child( 96),
+ .container .rectangles-outer:nth-child( 101),
+ .container .rectangles-outer:nth-child( 106),
+ .container .rectangles-outer:nth-child( 111),
+ .container .rectangles-outer:nth-child( 116),
+ .container .rectangles-outer:nth-child( 121),
+ .container .rectangles-outer:nth-child( 126),
+ .container .rectangles-outer:nth-child( 131),
+ .container .rectangles-outer:nth-child( 136),
+ .container .rectangles-outer:nth-child( 141),
+ .container .rectangles-outer:nth-child( 146),
+ .container .rectangles-outer:nth-child( 151),
+ .container .rectangles-outer:nth-child( 156),
+ .container .rectangles-outer:nth-child( 161),
+ .container .rectangles-outer:nth-child( 166),
+ .container .rectangles-outer:nth-child( 171),
+ .container .rectangles-outer:nth-child( 176),
+ .container .rectangles-outer:nth-child( 181),
+ .container .rectangles-outer:nth-child( 186),
+ .container .rectangles-outer:nth-child( 191),
+ .container .rectangles-outer:nth-child( 196),
+ .container .rectangles-outer:nth-child( 201) {
+ margin-right: 0px;
+ }
+ .container .rectangles-inner {
+ position: absolute;
+ left: 1px;
+ top: 1px;
+ bottom: 1px;
+ right: 1px;
+ padding: 10px;
+ overflow: hidden;
+ }
+}
+/* Four Column, 960 web */
+ at media only screen and (min-width: 960px) and (max-width: 1139px) {
+ .container .rectangles-outer {
+ width: 23.1%;
+ height: 75px;
+ margin-right: 2.25%;
+ margin-bottom: 2%;
+ }
+ .container .rectangles-outer:nth-child( 5),
+ .container .rectangles-outer:nth-child( 9),
+ .container .rectangles-outer:nth-child( 13),
+ .container .rectangles-outer:nth-child( 17),
+ .container .rectangles-outer:nth-child( 21),
+ .container .rectangles-outer:nth-child( 25),
+ .container .rectangles-outer:nth-child( 29),
+ .container .rectangles-outer:nth-child( 33),
+ .container .rectangles-outer:nth-child( 37),
+ .container .rectangles-outer:nth-child( 41),
+ .container .rectangles-outer:nth-child( 45),
+ .container .rectangles-outer:nth-child( 49),
+ .container .rectangles-outer:nth-child( 53),
+ .container .rectangles-outer:nth-child( 57),
+ .container .rectangles-outer:nth-child( 61),
+ .container .rectangles-outer:nth-child( 65),
+ .container .rectangles-outer:nth-child( 69),
+ .container .rectangles-outer:nth-child( 73),
+ .container .rectangles-outer:nth-child( 77),
+ .container .rectangles-outer:nth-child( 81),
+ .container .rectangles-outer:nth-child( 85),
+ .container .rectangles-outer:nth-child( 89),
+ .container .rectangles-outer:nth-child( 93),
+ .container .rectangles-outer:nth-child( 97),
+ .container .rectangles-outer:nth-child( 101),
+ .container .rectangles-outer:nth-child( 105),
+ .container .rectangles-outer:nth-child( 109),
+ .container .rectangles-outer:nth-child( 113),
+ .container .rectangles-outer:nth-child( 117),
+ .container .rectangles-outer:nth-child( 121),
+ .container .rectangles-outer:nth-child( 125),
+ .container .rectangles-outer:nth-child( 129),
+ .container .rectangles-outer:nth-child( 133),
+ .container .rectangles-outer:nth-child( 137),
+ .container .rectangles-outer:nth-child( 141),
+ .container .rectangles-outer:nth-child( 145),
+ .container .rectangles-outer:nth-child( 149),
+ .container .rectangles-outer:nth-child( 153),
+ .container .rectangles-outer:nth-child( 157),
+ .container .rectangles-outer:nth-child( 161) {
+ margin-right: 0px;
+ }
+ .container .rectangles-inner {
+ position: absolute;
+ left: 1px;
+ top: 1px;
+ bottom: 1px;
+ right: 1px;
+ padding: 10px;
+ overflow: hidden;
+ }
+}
+/* Three Column, tablet landscape */
+ at media only screen and (min-width: 768px) and (max-width: 959px) {
+ .container .rectangles-outer {
+ width: 31.25%;
+ height: 75px;
+ margin-right: 2.75%;
+ margin-bottom: 2.25%;
+ }
+ .container .rectangles-outer:nth-child( 4),
+ .container .rectangles-outer:nth-child( 7),
+ .container .rectangles-outer:nth-child( 10),
+ .container .rectangles-outer:nth-child( 13),
+ .container .rectangles-outer:nth-child( 16),
+ .container .rectangles-outer:nth-child( 19),
+ .container .rectangles-outer:nth-child( 22),
+ .container .rectangles-outer:nth-child( 25),
+ .container .rectangles-outer:nth-child( 28),
+ .container .rectangles-outer:nth-child( 31),
+ .container .rectangles-outer:nth-child( 34),
+ .container .rectangles-outer:nth-child( 37),
+ .container .rectangles-outer:nth-child( 40),
+ .container .rectangles-outer:nth-child( 43),
+ .container .rectangles-outer:nth-child( 46),
+ .container .rectangles-outer:nth-child( 49),
+ .container .rectangles-outer:nth-child( 52),
+ .container .rectangles-outer:nth-child( 55),
+ .container .rectangles-outer:nth-child( 58),
+ .container .rectangles-outer:nth-child( 61),
+ .container .rectangles-outer:nth-child( 64),
+ .container .rectangles-outer:nth-child( 67),
+ .container .rectangles-outer:nth-child( 70),
+ .container .rectangles-outer:nth-child( 73),
+ .container .rectangles-outer:nth-child( 76),
+ .container .rectangles-outer:nth-child( 79),
+ .container .rectangles-outer:nth-child( 82),
+ .container .rectangles-outer:nth-child( 85),
+ .container .rectangles-outer:nth-child( 88),
+ .container .rectangles-outer:nth-child( 91),
+ .container .rectangles-outer:nth-child( 94),
+ .container .rectangles-outer:nth-child( 97),
+ .container .rectangles-outer:nth-child( 100),
+ .container .rectangles-outer:nth-child( 103),
+ .container .rectangles-outer:nth-child( 106),
+ .container .rectangles-outer:nth-child( 109),
+ .container .rectangles-outer:nth-child( 112),
+ .container .rectangles-outer:nth-child( 115),
+ .container .rectangles-outer:nth-child( 118),
+ .container .rectangles-outer:nth-child( 121) {
+ margin-right: 0px;
+ }
+ .container .rectangles-inner {
+ position: absolute;
+ left: 1px;
+ top: 1px;
+ bottom: 1px;
+ right: 1px;
+ padding: 10px;
+ overflow: hidden;
+ }
+}
+/* Two Column, mobile portrait & landscape */
+ at media only screen and (max-width: 767px) {
+ .container .rectangles-outer {
+ width: 48.5%;
+ height: 75px;
+ margin-right: 3%;
+ margin-bottom: 3%;
+ }
+ .container .rectangles-outer:nth-child( 3),
+ .container .rectangles-outer:nth-child( 5),
+ .container .rectangles-outer:nth-child( 7),
+ .container .rectangles-outer:nth-child( 9),
+ .container .rectangles-outer:nth-child( 11),
+ .container .rectangles-outer:nth-child( 13),
+ .container .rectangles-outer:nth-child( 15),
+ .container .rectangles-outer:nth-child( 17),
+ .container .rectangles-outer:nth-child( 19),
+ .container .rectangles-outer:nth-child( 21),
+ .container .rectangles-outer:nth-child( 23),
+ .container .rectangles-outer:nth-child( 25),
+ .container .rectangles-outer:nth-child( 27),
+ .container .rectangles-outer:nth-child( 29),
+ .container .rectangles-outer:nth-child( 31),
+ .container .rectangles-outer:nth-child( 33),
+ .container .rectangles-outer:nth-child( 35),
+ .container .rectangles-outer:nth-child( 37),
+ .container .rectangles-outer:nth-child( 39),
+ .container .rectangles-outer:nth-child( 41),
+ .container .rectangles-outer:nth-child( 43),
+ .container .rectangles-outer:nth-child( 45),
+ .container .rectangles-outer:nth-child( 47),
+ .container .rectangles-outer:nth-child( 49),
+ .container .rectangles-outer:nth-child( 51),
+ .container .rectangles-outer:nth-child( 53),
+ .container .rectangles-outer:nth-child( 55),
+ .container .rectangles-outer:nth-child( 57),
+ .container .rectangles-outer:nth-child( 59),
+ .container .rectangles-outer:nth-child( 61),
+ .container .rectangles-outer:nth-child( 63),
+ .container .rectangles-outer:nth-child( 65),
+ .container .rectangles-outer:nth-child( 67),
+ .container .rectangles-outer:nth-child( 69),
+ .container .rectangles-outer:nth-child( 71),
+ .container .rectangles-outer:nth-child( 73),
+ .container .rectangles-outer:nth-child( 75),
+ .container .rectangles-outer:nth-child( 77),
+ .container .rectangles-outer:nth-child( 79),
+ .container .rectangles-outer:nth-child( 81) {
+ margin-right: 0px;
+ }
+ .container .rectangles-inner {
+ position: absolute;
+ left: 1px;
+ top: 1px;
+ bottom: 1px;
+ right: 1px;
+ padding: 10px;
+ overflow: hidden;
+ }
+}
+/* Two Column, mobile portrait */
+ at media only screen and (max-width: 480px) {
+ .container .rectangles-outer {
+ width: 100%;
+ height: 75px;
+ margin-right: 4%;
+ margin-bottom: 2%;
+ }
+ .container .rectangles-outer:nth-child( 2),
+ .container .rectangles-outer:nth-child( 3),
+ .container .rectangles-outer:nth-child( 4),
+ .container .rectangles-outer:nth-child( 5),
+ .container .rectangles-outer:nth-child( 6),
+ .container .rectangles-outer:nth-child( 7),
+ .container .rectangles-outer:nth-child( 8),
+ .container .rectangles-outer:nth-child( 9),
+ .container .rectangles-outer:nth-child( 10),
+ .container .rectangles-outer:nth-child( 11),
+ .container .rectangles-outer:nth-child( 12),
+ .container .rectangles-outer:nth-child( 13),
+ .container .rectangles-outer:nth-child( 14),
+ .container .rectangles-outer:nth-child( 15),
+ .container .rectangles-outer:nth-child( 16),
+ .container .rectangles-outer:nth-child( 17),
+ .container .rectangles-outer:nth-child( 18),
+ .container .rectangles-outer:nth-child( 19),
+ .container .rectangles-outer:nth-child( 20),
+ .container .rectangles-outer:nth-child( 21),
+ .container .rectangles-outer:nth-child( 22),
+ .container .rectangles-outer:nth-child( 23),
+ .container .rectangles-outer:nth-child( 24),
+ .container .rectangles-outer:nth-child( 25),
+ .container .rectangles-outer:nth-child( 26),
+ .container .rectangles-outer:nth-child( 27),
+ .container .rectangles-outer:nth-child( 28),
+ .container .rectangles-outer:nth-child( 29),
+ .container .rectangles-outer:nth-child( 30),
+ .container .rectangles-outer:nth-child( 31),
+ .container .rectangles-outer:nth-child( 32),
+ .container .rectangles-outer:nth-child( 33),
+ .container .rectangles-outer:nth-child( 34),
+ .container .rectangles-outer:nth-child( 35),
+ .container .rectangles-outer:nth-child( 36),
+ .container .rectangles-outer:nth-child( 37),
+ .container .rectangles-outer:nth-child( 38),
+ .container .rectangles-outer:nth-child( 39),
+ .container .rectangles-outer:nth-child( 40),
+ .container .rectangles-outer:nth-child( 41) {
+ margin-right: 0px;
+ }
+ .container .rectangles-inner {
+ position: absolute;
+ left: 1px;
+ top: 1px;
+ bottom: 1px;
+ right: 1px;
+ padding: 10px;
+ overflow: hidden;
+ }
+}
+/* Shapes */
+/* #Tables
+================================================== */
+table {
+ background-color: #ffffff;
+ border-right: 1px solid #cccccc;
+ border-left: 1px solid #cccccc;
+ border-bottom: 1px solid #cccccc;
+}
+table th,
+table td,
+table tfoot {
+ border-top: 1px solid #cccccc;
+}
+table td {
+ padding: 15px;
+ font-size: 16px;
+ line-height: 16px;
+}
+table th {
+ padding: 10px 15px;
+ background-color: #f9f9f9;
+ text-align: left;
+ font-style: italic;
+ font-size: 14px;
+}
+table tr.foot td {
+ padding: 10px 15px;
+ background-color: #f9f9f9;
+ font-style: italic;
+ font-size: 14px;
+}
+/* Table - Full */
+table.full {
+ width: 100%;
+}
+table.full td,
+table.full th {
+ padding: 15px;
+}
+/* Table - Rounded */
+table.rounded {
+ border-radius: 7px;
+}
+table.rounded td:first-child,
+table.rounded th:first-child {
+ border-left: none;
+}
+table.rounded th:first-child {
+ border-radius: 7px 0 0 0;
+}
+table.rounded th:last-child {
+ border-radius: 0 7px 0 0;
+}
+table.rounded th:only-child {
+ border-radius: 7px 7px 0 0;
+}
+table.rounded tr:last-child td:first-child {
+ border-radius: 0 0 0 7px;
+}
+table.rounded tr:last-child td:last-child {
+ border-radius: 0 0 7px 0;
+}
+table.rounded tr:last-child td:only-child {
+ border-radius: 0 0 7px 7px;
+}
+/* Table - Zebra Striping */
+table.zebra {
+ border-right: 1px solid #cccccc;
+ border-left: 1px solid #cccccc;
+}
+table.zebra td,
+table.zebra th {
+ padding: 15px;
+}
+table.zebra tr:nth-child(odd) {
+ background-color: #f9f9f9;
+}
+table.zebra tbody tr:nth-child(even) {
+ background-color: #fefefe;
+ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
+}
+table.zebra th {
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+ background-color: #eee;
+ background-image: linear-gradient(top, #f5f5f5, #eeeeee);
+}
+table.zebra th:first-child {
+ border-radius: 6px 0 0 0;
+}
+table.zebra th:last-child {
+ border-radius: 0 6px 0 0;
+}
+table.zebra th:only-child {
+ border-radius: 6px 6px 0 0;
+}
+table.zebra tfoot td {
+ border-bottom: 0;
+ border-top: 1px solid #fff;
+ background-color: #f1f1f1;
+}
+table.zebra tfoot td:first-child {
+ border-radius: 0 0 0 6px;
+}
+table.zebra tfoot td:last-child {
+ border-radius: 0 0 6px 0;
+}
+table.zebra tfoot td:only-child {
+ border-radius: 0 0 6px 6px;
+}
+/* Table - Rouded & Zebra */
+table tr:hover,
+table.rounded tr:hover,
+table.zebra tr:hover {
+ background: #f5f6db;
+ transition: all 0.1s ease-in-out;
+}
+/* #Typography
+================================================== */
+/* Headings */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ color: #333333;
+ font-family: OpenSans-Bold, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-weight: normal;
+ letter-spacing: -2px;
+}
+h1 a,
+h2 a,
+h3 a,
+h4 a,
+h5 a,
+h6 a {
+ font-weight: inherit;
+}
+h1 {
+ font-size: 60px;
+ line-height: 60px;
+ margin-bottom: 30px;
+}
+h2 {
+ font-size: 48px;
+ line-height: 48px;
+ margin-bottom: 30px;
+}
+h3 {
+ font-size: 36px;
+ line-height: 36px;
+ margin-bottom: 30px;
+}
+h4 {
+ font-size: 30px;
+ line-height: 30px;
+ margin-bottom: 30px;
+}
+h5 {
+ font-size: 24px;
+ line-height: 24px;
+ margin-bottom: 30px;
+}
+h6 {
+ font-size: 18px;
+ line-height: 18px;
+ margin-bottom: 30px;
+}
+.subheader {
+ color: #777;
+}
+/* Non Headings */
+p {
+ margin: 0 0 20px 0;
+}
+p img {
+ margin: 0;
+}
+p.lead {
+ font-size: 21px;
+ line-height: 27px;
+ color: #777;
+}
+i,
+em {
+ font-style: OpenSans-Italic, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+b,
+strong {
+ font-family: OpenSans-Bold, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-weight: normal;
+ color: #333333;
+}
+small {
+ font-size: 80%;
+}
+/* Blockquotes */
+blockquote,
+blockquote p {
+ font-size: 18px;
+ line-height: 24px;
+ color: #666666;
+ font-style: italic;
+ margin: 0 0 10px 0;
+}
+blockquote {
+ margin: 0 0 20px;
+ padding: 9px 20px 0 19px;
+ border-left: 4px solid #c9c9c9;
+}
+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;
+}
+/* Pre & Code */
+code,
+pre,
+.pre {
+ margin-bottom: 20px;
+ background: #e6e6e6;
+ color: #333333;
+ padding: 2px 6px;
+ border: 1px solid #b7bfc8;
+ border-radius: 3px;
+ font-family: 'Courier';
+ font-size: 14px;
+ font-weight: bold;
+}
+code,
+pre {
+ display: inline-block;
+}
+/* Validation */
+.validation-message {
+ font-style: italic;
+}
+/* Success */
+span.validation-success,
+label.validation-success {
+ color: #078754;
+}
+input.validation-success,
+textarea.validation-success,
+select.validation-success {
+ border: 1px solid #078754 !important;
+}
+/* Warning */
+span.validation-warning,
+label.validation-warning {
+ color: #f38b00;
+}
+input.validation-warning,
+textarea.validation-warning,
+select.validation-warning {
+ border: 1px solid #f38b00 !important;
+}
+/* Error */
+span.validation-error,
+label.validation-error {
+ color: #b50606;
+}
+input.validation-error,
+textarea.validation-error,
+select.validation-error {
+ border: 1px solid #b50606 !important;
+}
diff --git a/images/rebar-header.png b/images/rebar-header.png
new file mode 100644
index 0000000..95e0090
Binary files /dev/null and b/images/rebar-header.png differ
diff --git a/images/rebar-logo.png b/images/rebar-logo.png
new file mode 100644
index 0000000..43c177f
Binary files /dev/null and b/images/rebar-logo.png differ
diff --git a/images/rebar.png b/images/rebar.png
new file mode 100644
index 0000000..2aabbed
Binary files /dev/null and b/images/rebar.png differ
diff --git a/images/rebar.svg b/images/rebar.svg
new file mode 100644
index 0000000..5293c69
--- /dev/null
+++ b/images/rebar.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="438px" height="120px" viewBox="0 0 438 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+ <title>Rebar</title>
+ <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+ <defs></defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+ <g id="Rebar" sketch:type="MSArtboardGroup">
+ <path d="M338.51634,115.550725 L333.124183,104.681159 L332.54902,104.681159 C328.762508,109.415483 324.904159,112.652165 320.973856,114.391304 C317.043553,116.130443 311.962994,117 305.732026,117 C298.063142,117 292.023987,114.681183 287.614379,110.043478 C283.204771,105.405774 281,98.8841 281,90.4782609 C281,81.7342558 284.019578,75.2246591 290.058824,70.9492754 C296.098069,66.6738917 304.845259,64.2705341 316.300654,63.7391304 L329.888889,63.3043478 L329.888889,62.1449275 C [...]
+ <path d="M104.301188,104.094203 C96.7670251,96.8236351 93,86.4734971 93,73.0434783 C93,59.1786746 96.4902149,48.5386844 103.47075,41.1231884 C110.451284,33.7076924 120.41645,30 133.366545,30 C145.690799,30 155.210661,33.2246054 161.926417,39.673913 C168.642173,46.1232207 172,55.4105674 172,67.5362319 L172,80.1449275 L121.523766,80.1449275 C121.716332,84.7343225 123.389229,88.3333203 126.542505,90.942029 C129.695781,93.5507377 133.992355,94.8550725 139.432358,94.8550725 C144.3 [...]
+ <path d="M261.164991,43.3629442 C266.388356,50.8376008 269,61.181406 269,74.3946701 C269,87.7043813 266.364286,98.1325765 261.092779,105.679569 C255.821272,113.226561 248.49182,117 239.104205,117 C236.071283,117 233.375393,116.674496 231.016453,116.023477 C228.657514,115.372459 226.55135,114.46828 224.697898,113.310914 C222.844445,112.153548 220.69014,110.224633 218.234918,107.524112 L216.501828,107.524112 L212.02468,115.553299 L190,115.553299 L190,3 L218.234918,3 L218.234918 [...]
+ <path d="M233.396721,54 C229.453532,54 226.568315,55.3792966 224.740984,58.137931 C222.913652,60.8965655 222,65.2280407 222,71.1324864 L222,75.1252269 C222,81.8524232 222.913652,86.6799612 224.740984,89.6079855 C226.568315,92.5360098 229.549706,94 233.685246,94 C237.003295,94 239.551904,92.2940279 241.331148,88.8820327 C243.110391,85.4700374 244,80.448914 244,73.8185118 C244,60.6061045 240.465609,54 233.396721,54 L233.396721,54 Z" id="Path" stroke="#333333" stroke-width="2" f [...]
+ <path d="M28.6871508,77.4281806 L28.6871508,116 L0,116 L0,10 L34.7877095,10 C63.6444646,10 78.0726257,20.4403881 78.0726257,41.3214774 C78.0726257,53.5987846 72.0689613,63.0966376 60.0614525,69.8153215 L91,116 L58.4636872,116 L35.9497207,77.4281806 L28.6871508,77.4281806 Z M29,55 L34.2669039,55 C44.0890171,55 49,50.6168103 49,41.8502994 C49,34.6167303 44.1839153,31 34.5516014,31 L29,31 L29,55 Z" id="Path" fill="#B50606" sketch:type="MSShapeGroup"></path>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..dbaab72
--- /dev/null
+++ b/index.html
@@ -0,0 +1,600 @@
+<!DOCTYPE html>
+<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
+<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
+<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
+<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
+<head>
+ <meta charset="utf-8">
+ <title>Rebar is a lightweight HTML5 / CSS3 framework for making responsive websites built using the LESS preprocessor</title>
+ <meta name="description" content="">
+ <meta name="author" content="Brennan Novak">
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <link rel="stylesheet" href="css/rebar.css">
+ <link rel="stylesheet" href="css/app.css">
+ <link rel="stylesheet" href="css/guide.css">
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+ <link rel="shortcut icon" href="img/favicon.ico">
+ <link rel="apple-touch-icon" sizes="57x57" href="img/apple-touch-icon.png">
+ <link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
+ <link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">
+</head>
+<body>
+
+ <div id="messages">
+ <div class="error">
+ <span class="message-text">Whoa Cowboy, you've mozyed on over to an error!</span>
+ <abbr title="Close" class="message-close">X</abbr>
+ </div>
+ <div class="warning">
+ <span class="message-text">This here be a warning to you, just a warning!</span>
+ <abbr title="Close" class="message-close">X</abbr>
+ </div>
+ <div class="debug">
+ <span class="message-text">What kind of bug is a debug?</span>
+ <abbr title="Close" class="message-close">X</abbr>
+ </div>
+ <div class="info">
+ <span class="message-text">Hi, I am info message</span>
+ <abbr title="Close" class="message-close">X</abbr>
+ </div>
+ <div class="success">
+ <span class="message-text">Success, you sly dog you!</span>
+ <abbr title="Close" class="message-close">X</abbr>
+ </div>
+ </div>
+
+ <div class="container add-top">
+ <div class="row add-bottom">
+ <h1 class="hide">Rebar</h1>
+ <object class="logo" data="images/rebar.svg">
+ <img class="logo" src="images/rebar.png">
+ </object>
+ <p><strong>Rebar</strong> is a lightweight HTML5 / CSS3 framework for making responsive websites built using the LESS preprocessor</p>
+ </div>
+ <div class="row">
+ <div class="half">
+ <h3>This Style Guide</h3>
+ <p>This is a collection of CSS styles and corresponding HTML elements that are currently being styled. Use this code to develop the front-end of your website.</p>
+ <p>The CSS styles are all broken apart into smaller easy to manage <a href="http://lesscss.org/" target="_blank">LESS</a> files that draw from configurable variables in the <strong>less/rebar/config.less</strong> file which is then compiled to CSS.</p>
+ <p>You can install <strong>Rebar</strong> using the <a href="http://bower.io" target="_blank">Bower</a> package manager by typing:</p>
+ <pre>$ bower install rebar</pre>
+ <p>If you're unfamiliar with LESS I suggest <a href="http://incident57.com/codekit/" target="_blank">CodeKit</a> for Mac OS, or <a href="http://gruntjs.com/" target="_blank">Grunt</a> which uses Node.js and runs on the command line.</p>
+ </div>
+ <div class="half">
+ <h3>About Rebar</h3>
+ <p>Rebar is a collection of modular CSS files that helps rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, forms and media queries. Go ahead, resize this super basic page to see the grid in action.</p>
+ <h3>Compact</h3>
+ <p>Written with small file sizes in mind, the core <b>rebar.css</b> library is <b>under 30K</b> in size.</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="one-third">
+ <h3>3 Core Principles</h3>
+ <p>Rebar is built on three core principles:</p>
+ <ul class="square">
+ <li><strong>A Responsive Grid</strong>: Elegant scaling from a browser to tablets to mobile.</li>
+ <li><strong>Fast to Start</strong>: It's a tool for rapid development with best practices</li>
+ <li><strong>Style Agnostic</strong>: It provides the most basic, beautiful styles, but is meant to be overwritten.</li>
+ </ul>
+ </div>
+ <div class="one-third">
+ <h3>Docs & Support</h3>
+ <p>The easiest way to start developing with Rebar is to check out the docs & info on this page and download the <a href="https://github.com/brennannovak/Rebar">open source repository</a>.</p>
+ <p>If you want to help report bugs and create a pull requests with quality additions, we would be very happy. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at <a href="mailto:hi at brennannovak.com">hi at brennannovak.com</a>.</p>
+ </div>
+ <div class="one-third">
+ <h3>Are You Hip?</h3>
+ <p>Lomo locavore swag retro stumptown four loko keytar polaroid. Portland selfies cray, plaid pop-up salvia sustainable literally. Marfa church-key 3 wolf moon narwhal aesthetic. Hoodie Marfa fixie wayfarers, Pinterest trust fund fanny pack 3 wolf moon dreamcatcher. Echo Park chillwave jean shorts ugh. IPhone Terry Richardson letterpress, literally keytar scenester kale chips tumblr dreamcatcher deep v. We suggest using <a href="http://hipsum.co" target="_blank">Hipster Ipsum</a></p>
+ </div>
+ </div>
+ <hr>
+ <h1 class="text-center">A Beautiful CSS Framework for Responsive Web-App Development</h1>
+ <hr class="medium">
+ <hr class="large">
+ <hr class="giant">
+
+ <!-- Wide -->
+ <div class="doc-section" id="whatAndWhy">
+ <h3>What Is It?</h3>
+ <p>Rebar is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. Rebar is built on three core principles:</p>
+ <div class="row">
+ <div class="one-third">
+ <div class="img-filler"></div>
+ </div>
+ <div class="two-thirds">
+ <h5>Responsive Grid Down To Mobile</h5>
+ <p>Rebar has a familiar, lightweight 960 grid as its base, but elegantly scales down to downsized browser windows, tablets, mobile phones (in landscape and portrait). <strong>Go ahead, resize this page!</strong></p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="one-third">
+ <div class="img-filler"></div>
+ </div>
+ <div class="two-thirds">
+ <h5>Fast to Start</h5>
+ <p>Rebar is a tool for rapid development. Get started fast with CSS best practices, a well-structured grid that makes mobile consideration easy, an organized file structure and super basic UI elements like lightly styled forms, buttons, tabs and more.</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="one-third">
+ <div class="img-filler"></div>
+ </div>
+ <div class="two-thirds">
+ <h5>Style Agnostic</h5>
+ <p>Rebar is not a UI framework. It's a development kit that provides the most basic styles as a foundation, but is ready to adopt whatever your design or style is.</p>
+ </div>
+ </div>
+ </div>
+ <hr>
+
+ <!-- The Grid
+ ================================================== -->
+ <div class="doc-section clearfix" id="grid">
+ <h3>Two Item Grid</h3>
+ <p>Rebar's base grid is a variation of the 960 grid system. The syntax is simple and it's effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ. <strong>Go ahead, resize the browser and watch as the layout reacts!</strong></p>
+ <div class="example-grid add-bottom">
+ <div class="row">
+ <div class="col-1">One</div>
+ <div class="col-15">Fifteen</div>
+ </div>
+ <div class="row">
+ <div class="col-2">Two</div>
+ <div class="col-14">Fourteen</div>
+ </div>
+ <div class="row">
+ <div class="col-3">Three</div>
+ <div class="col-13">Thirteen</div>
+ </div>
+ <div class="row">
+ <div class="col-4">Four</div>
+ <div class="col-12">Twelve</div>
+ </div>
+ <div class="row">
+ <div class="col-5">Five</div>
+ <div class="col-11">Eleven</div>
+ </div>
+ <div class="row">
+ <div class="col-6">Six</div>
+ <div class="col-10">Ten</div>
+ </div>
+ <div class="row">
+ <div class="col-7">Seven</div>
+ <div class="col-9">Nine</div>
+ </div>
+ <div class="row">
+ <div class="col-8">Eight</div>
+ <div class="col-8">Eight</div>
+ </div>
+ <div class="row">
+ <div class="col-9">Nine</div>
+ <div class="col-7">Seven</div>
+ </div>
+ <div class="row">
+ <div class="col-10">Ten</div>
+ <div class="col-6">Six</div>
+ </div>
+ <div class="row">
+ <div class="col-11">Eleven</div>
+ <div class="col-5">Five</div>
+ </div>
+ <div class="row">
+ <div class="col-12">Twelve</div>
+ <div class="col-4">Four</div>
+ </div>
+ <div class="row">
+ <div class="col-13">Thirteen</div>
+ <div class="col-3">Three</div>
+ </div>
+ <div class="row">
+ <div class="col-14">Fourteen</div>
+ <div class="col-2">Two</div>
+ </div>
+ <div class="row">
+ <div class="col-15">Fifteen</div>
+ <div class="col-1">One</div>
+ </div>
+ </div>
+
+ <h3>Large Item Grid</h3>
+ <p>These are examples of large items grids</p>
+ <div class="example-grid">
+ <div class="row">
+ <div class="one-quarter">Quarter</div>
+ <div class="one-quarter">Quarter</div>
+ <div class="one-quarter">Quarter</div>
+ <div class="one-quarter">Quarter</div>
+ </div>
+ <div class="row">
+ <div class="one-quarter">Quarter</div>
+ <div class="half">Half</div>
+ <div class="one-quarter">Quarter</div>
+ </div>
+ <div class="row">
+ <div class="one-quarter">Quarter</div>
+ <div class="three-quarters">Three Quarters</div>
+ </div>
+ <div class="row">
+ <div class="one-third">Third</div>
+ <div class="one-third">Third</div>
+ <div class="one-third">Third</div>
+ </div>
+ <div class="row">
+ <div class="one-third">Third</div>
+ <div class="two-thirds">Two Thirds</div>
+ </div>
+ <div class="row">
+ <div class="half">Half</div>
+ <div class="half">Half</div>
+ </div>
+ </div>
+ </div>
+ <hr>
+
+ <div class="doc-section clearfix" id="boxes">
+ <h3>Responsive Boxes</h3>
+ <div class="boxes-outer">
+ <div class="boxes-inner">
+ <h4>Box #1</h4>
+ <p>Ugh fixie butcher, cornhole Pinterest scenester banh mi Tonx retro salvia tousled <a href="#">cool link</a></p>
+
+ </div>
+ </div>
+ <div class="boxes-outer">
+ <div class="boxes-inner">
+ <h4>Box #2</h4>
+ <p>Narwhal DIY salvia Blue Bottle, Schlitz locavore cray Pinterest Bushwick chia.</p>
+ <p><a href="#" class="bottom">Bottom</a></p>
+ </div>
+ </div>
+ <div class="boxes-outer">
+ <div class="boxes-inner">
+ <h4>Box #3</h4>
+ <p>Carles artisan try-hard, Helvetica letterpress swag umami flexitarian lo-fi seitan</p>
+ <p><a href="#" class="bottom right">Link Right</a></p>
+ </div>
+ </div>
+ <div class="boxes-outer">
+ <div class="boxes-inner">
+ <h4>Box #4</h4>
+ <p>Asymmetrical pork belly VHS. Pickled XOXO Pitchfork paleo pork belly.</p>
+ </div>
+ </div>
+ <div class="boxes-outer">
+ <div class="boxes-inner">
+ <h4>Box #5</h4>
+ <p>Asymmetrical hoodie plaid, YOLO occupy slow-carb. Wolf McSweeney's pickled fashion axe</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="doc-section clearfix" id="rectangles">
+ <h3>Responsive Rectangles</h3>
+ <div class="rectangles-outer">
+ <div class="rectangles-inner">
+ <h4>Rectangle #1</h4>
+ <p>Squid asymmetrical chambray fap flexitarian tousled vegan.</p>
+ </div>
+ </div>
+ <div class="rectangles-outer">
+ <div class="rectangles-inner">
+ <h4>Rectangle #2</h4>
+ <p> Trust fund chillwave ugh American Apparel Bushwick food truck kitsch.</p>
+ </div>
+ </div>
+ <div class="rectangles-outer">
+ <div class="rectangles-inner">
+ <h4>Rectangle #3</h4>
+ <p>Pinterest plaid quinoa. Vice literally pour-over chambray VHS freegan. Quinoa Cosby</p>
+ </div>
+ </div>
+ <div class="rectangles-outer">
+ <div class="rectangles-inner">
+ <h4>Rectangle #4</h4>
+ <p>Blog before they sold out 8-bit, food truck roof party slow-carb Vice Neutra bicycle rights. Fap hashtag lo-fi, banh mi</p>
+ </div>
+ </div>
+ <div class="rectangles-outer">
+ <div class="rectangles-inner">
+ <h4>Rectangle #5</h4>
+ <p>Bicycle rights Austin sustainable Marfa, cardigan pickled raw denim Intelligentsia street art Neutra distillery Banksy Truffaut.</p>
+ </div>
+ </div>
+ </div>
+
+ <em>*Note: Boxes & Rectangles only work up to 200 items nicely- after that each row shows -1 item per row than it should. This could probably be fixed by someone who is better at maths.</em>
+ <hr>
+
+ <div class="doc-section clearfix" id="typography">
+ <h3>Typography</h3>
+ <p>The typography of Rebar is designed to create a strong hierarchy with basic styles. The primary font is Open Sans, but the font stack can be easily changed with just a couple adjustments. Regular paragraphs are set at a 14px base with 21px line height.</p>
+ <div class="row">
+ <div class="col-7 headings">
+ <h1>Heading <h1></h1>
+ <h2>Heading <h2></h2>
+ <h3>Heading <h3></h3>
+ <h4>Heading <h4></h4>
+ <h5>Heading <h5></h5>
+ <h6>Heading <h6></h6>
+ </div>
+ <div class="col-5">
+ <blockquote>
+ <p>This is a blockquote style example. It stands out, and it is awesome!</p>
+ <cite>Brennan Noval, Rebar Creator</cite>
+ </blockquote>
+ </div>
+ </div>
+ </div>
+ <hr>
+
+ <div class="doc-section clearfix" id="lists">
+ <h3>Lists</h3>
+ <p>The list elements in Rebar are designed to create a strong hierarchy with basic styles.</p>
+ <div class="row add-top remove-bottom">
+ <div class="col-5">
+ <p>Base <code>ul</code> element</p>
+ <ul>
+ <li>Unordered Item</li>
+ <li>Unordered Item</li>
+ <li>Unordered Item</li>
+ <li>Unordered Item</li>
+ </ul>
+ <p>Base <code>ol</code> element</p>
+ <ol>
+ <li>Ordered Item</li>
+ <li>Ordered Item</li>
+ <li>Ordered Item</li>
+ <li>Ordered Item</li>
+ </ol>
+ <p>Add the <code>ul.none</code> class</p>
+ <ul class="none">
+ <li>Unordered Item</li>
+ <li>Unordered Item</li>
+ <li>Unordered Item</li>
+ <li>Unordered Item</li>
+ </ul>
+ </div>
+ <div class="col-5">
+ <p>Add the <code>ul.square</code> class</p>
+ <ul class="square">
+ <li>Bottle Rocket</li>
+ <li>Rushmore</li>
+ <li>The Royal Tenebaums</li>
+ <li>Life Aquatic w/ Steve Zissou</li>
+ </ul>
+ <p>Add the <code>ul.circle</code> class</p>
+ <ul class="circle">
+ <li>Darjeeling Limited</li>
+ <li>Fantastic Mr. Fox</li>
+ <li>Moonrise Kingdom</li>
+ <li>The Grand Budapest Hotel</li>
+ </ul>
+ </div>
+ <div class="col-5">
+ <p>Add the <code>ul.large</code> class to list element</p>
+ <ul class="large">
+ <li>Large Item</li>
+ <li>Large Item</li>
+ <li>Large Item</li>
+ </ul>
+ <p>Add the <code>ul.small</code> class to list element</p>
+ <ul class="small remove-bottom">
+ <li>Small Item</li>
+ <li>Small Item</li>
+ <li>Small Item</li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <p>Add the <code>ul.horizontal</code> class to list element</p>
+ <ul class="horizontal">
+ <li>Item #1</li>
+ <li>Item #2</li>
+ <li>Item #3</li>
+ <li>Item #4</li>
+ <li>Item #5</li>
+ </ul>
+ </div>
+ </div>
+ <hr>
+
+ <div class="doc-section" id="buttons">
+ <h3>Buttons</h3>
+ <p>In order to make one of the following HTML element types more appealing & clickable:</p>
+ <code>a, input[type=submit] input[type=reset] input[type=button] button</code>
+ <p>All you need to do is add one of the following classes to any of the elements:</p>
+ <code>.button-primary .button-secondary .button-info .button-alert .button-warning</code>
+ <div class="add-top add-bottom">
+ <a href="#buttons" class="button-primary" onclick="javascript:alert('Add button-primary class')">Button Primary</a>
+ <input type="submit" class="button-secondary" onclick="javascript:alert('Add button-secondary class')" value="Button Secondary">
+ <input type="reset" class="button-info" onclick="javascript:alert('Add button-info class')" value="Button Info">
+ <input type="button" class="button-alert" onclick="javascript:alert('Add button-alert class')" value="Button Alert">
+ <button href="#buttons" class="button-warning" onclick="javascript:alert('Add button-warning class')">Button Warning</button>
+ </div>
+
+
+ <div class="add-top add-bottom">
+ <h5>Small Buttons</h5>
+ <p>To make a button small, simply add the <code>.button-small</code> as well as the above class to a given element</p>
+ <a href="#buttons" class="button-primary button-small" onclick="javascript:alert('Add button-primary button-small class')">Small Primary</a>
+ <input type="submit" class="button-secondary button-small" onclick="javascript:alert('Add button-secondary button-small class')" value="Small Secondary">
+ <input type="reset" class="button-info button-small" onclick="javascript:alert('Add button-info button-small class')" value="Small Info">
+ <input type="button" class="button-alert button-small" onclick="javascript:alert('Add button-alert button-small class')" value="Small Alert">
+ <button href="#buttons" class="button-warning button-small" onclick="javascript:alert('Add button-warning button-small class')">Small Warning</button>
+ </div>
+ </div>
+ <hr>
+
+ <div class="doc-section" id="forms">
+ <h3>Forms</h3>
+ <p>In order to nicely style form elements, add the <code>.standard</code> class to a <code>form</code> element. You can also add the <code>.tiny .small .medium .large .full</code> class to any of the following elements <code>input textarea select</code> to alter the size.</p>
+ <div class="row">
+ <form class="col-10 standard">
+ <label for="tiny-input">Tiny Input</label>
+ <input type="text" id="tiny-input" placeholder=".tiny" class="tiny">
+ <label for="small-input">Small Input</label>
+ <input type="text" id="small-input" placeholder="Add .small" class="small">
+ <label for="regular-input">Regular Input (default size)</label>
+ <input type="text" id="regular-input" placeholder="Default">
+ <label for="medium-input">Medium Input</label>
+ <input type="text" id="medium-input" placeholder="Add .medium class" class="medium">
+ <label for="large-input">Large Input</label>
+ <input type="text" id="large-input" placeholder="Add .large class" class="large">
+ <label for="full-input">Full Input</label>
+ <input type="text" id="full-input" placeholder="Add .full class" class="full">
+ <label for="regular-textarea">Regular Textarea</label>
+ <textarea id="regular-textarea" placeholder="Default"></textarea>
+ <label for="full-textarea">Full Textarea</label>
+ <textarea id="full-textarea" placeholder="Add .full class" class="full"></textarea>
+ <label for="select-list">Select List</label>
+ <select id="select-list">
+ <option value="Option 1">Option 1</option>
+ <option value="Option 2">Option 2</option>
+ <option value="Option 3">Option 3</option>
+ <option value="Option 4">Option 4</option>
+ </select>
+ <fieldset>
+ <legend>Checkboxes</legend>
+ <label for="regular-checkbox">
+ <input type="checkbox" id="regular-checkbox" value="checkbox 1">
+ <span>Regular Checkbox</span>
+ </label>
+ <label for="second-regular-checkbox">
+ <input type="checkbox" id="second-regular-checkbox" value="checkbox 2">
+ <span>Regular Checkbox</span>
+ </label>
+ </fieldset>
+ <fieldset>
+ <legend>Radio Buttons</legend>
+ <label for="regular-radio">
+ <input type="radio" name="radios" id="regular-radio" value="radio 1">
+ <span>Regular Radio</span>
+ </label>
+ <label for="second-regular-radio">
+ <input type="radio" name="radios" id="second-regular-radio" value="radio 2">
+ <span>Regular Radio</span>
+ </label>
+ </fieldset>
+ <button class="button-primary">Submit Form</button>
+ </form>
+ </div>
+ <div class="row">
+ <h4>Validation</h4>
+ <p>You can add form validation UI feedback by adding the following classes <code>.validation-success .validation-warning .validation-error</code> to <code>label</code> element and it will style children elements <code>input select textarea</code> elements.</p>
+ </div>
+ </div>
+ <hr>
+
+ <div id="tables">
+ <h3>Tables</h3>
+ <div class="row">
+ <p>Apply the <code>.rounded</code> class to the <code>table</code> element</p>
+ <table border="0" cellpadding="0" cellspacing="0" class="rounded add-bottom">
+ <tr>
+ <th>Moral</th>
+ <th>Description</th>
+ <th>Count</th>
+ </tr>
+ <tr>
+ <td>Time</td>
+ <td>An easy way to contact groups of people & organize their responses</td>
+ <td>123</td>
+ </tr>
+ <tr>
+ <td>Cash</td>
+ <td>An easy way to contact groups of people & organize their responses</td>
+ <td>456</td>
+ </tr>
+ <tr>
+ <td>Patience</td>
+ <td>An easy way to contact groups of people & organize their responses</td>
+ <td>789</td>
+ </tr>
+ <tr class="foot">
+ <td colspan="3">Thank you for reading :)</td>
+ </tr>
+ </table>
+ </div>
+ <div class="row">
+ <p>This table has the <code>.zebra</code> and <code>.full</code> class on the <code>table</code> element [UNFINISHED]</p>
+ <table border="0" cellpadding="0" cellspacing="0" class="full zebra add-bottom">
+ <tr>
+ <td>Time</td>
+ <td>An easy way to contact groups of people & organize their responses</td>
+ <td>123</td>
+ </tr>
+ <tr>
+ <td>Cash</td>
+ <td>An easy way to contact groups of people & organize their responses</td>
+ <td>456</td>
+ </tr>
+ <tr>
+ <td>Patience</td>
+ <td>An easy way to contact groups of people & organize their responses</td>
+ <td>789</td>
+ </tr>
+ </table>
+ </div>
+ </div>
+ <hr>
+
+ <div class="doc-section" id="mediaQueries">
+ <h3>Media Queries</h3>
+ <p>Rebar uses a <strong>lot</strong> of media queries to serve the scalable grid, but also for the convenience of styling your site on different size screens. Rebar's media queries are almost exclusively targeted at max and min widths rather than device sizes or orientations. The advantage of this is browsers and future mobile devices that don't map to exact set dimensions will still benefit from the styles. That being said, all of the queries were written to be optimal on Apple iOS d [...]
+ <ul class="square">
+ <li><strong>Web (max)</strong>: Smaller than the standard base grid 1140px</li>
+ <li><strong>Web (normal)</strong>: Smaller than the standard base grid 960px</li>
+ <li><strong>Tablet (landscape)</strong>: Between 768px and 959px</li>
+ <li><strong>Tablet (portrait)</strong>: Between 768px and 959px</li>
+ <li><strong>Mobile (all sizes)</strong>: Less than 767px</li>
+ <li><strong>Mobile (landscape)</strong>: Between 480px and 767px</li>
+ <li><strong>Mobile (potrait)</strong>: Less than 479px</li>
+ </ul>
+ </div>
+ <hr>
+
+ <!-- Color Palate
+ ================================================== -->
+ <div class="doc-section" id="colorPalate">
+ <h3>Color Palate</h3>
+ <p>Click square to see HEX value for easier copying</p>
+
+ <div class="color-palate-item" style="background-color:#FFFFFF">
+ @white
+ </div>
+ <div class="color-palate-item" style="background-color:#333333">
+ <span style="color:white">@black</span>
+ </div>
+ <div id="color-palate-copy"></div>
+ </div>
+
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ // column hover, display dimensions
+ var originalText;
+ $('.example-grid .row div').hover(
+ function() {
+ originalText = $(this).text();
+ $(this).text($(this).width()+'px');
+ },
+ function() {
+ $(this).text(originalText);
+ }
+ );
+ // click to alert color on palate
+ $('.color-palate-item').on('click', function() {
+ var rgb, hex, originalText, rgb_color;
+ rgb_color = $(this).css('background-color'),
+ rgb_color = rgb_color.replace('rgb(', ''),
+ rgb_color = rgb_color.replace(')', '');
+ rgb = rgb_color.split(', ');
+ hex = "#" + ((1 << 24) + (parseInt(rgb[0]) << 16) + (parseInt(rgb[1]) << 8) + parseInt(rgb[2])).toString(16).slice(1);
+ alert('HEX Color is: ' + hex);
+ });
+ });
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/less/app.less b/less/app.less
new file mode 100644
index 0000000..fb7a43e
--- /dev/null
+++ b/less/app.less
@@ -0,0 +1,21 @@
+/* Your Groovy Application v0.0.0
+ * Designed by You and built using Rebar by @brennannovak
+ * http://yourgroovyappplication.com
+ */
+
+/* Global App - include before config file to specify custom fonts or backgrounds */
+ at import "app/webfonts.less";
+ at import "app/icons.less";
+ at import "app/backgrounds.less";
+
+/* Config - change settings in this file for the look and feel of your style */
+ at import "config.less";
+
+/* Bower */
+ at import (less) "../bower_components/animate.css/animate.css";
+ at import "../bower_components/less-elements/elements.less";
+
+/* App */
+ at import "app/web.less";
+ at import "app/tablet.less";
+ at import "app/mobile.less";
\ No newline at end of file
diff --git a/less/app/backgrounds.less b/less/app/backgrounds.less
new file mode 100644
index 0000000..4ae27eb
--- /dev/null
+++ b/less/app/backgrounds.less
@@ -0,0 +1 @@
+/* Backgrounds */
\ No newline at end of file
diff --git a/less/app/icons.less b/less/app/icons.less
new file mode 100644
index 0000000..ab116fa
--- /dev/null
+++ b/less/app/icons.less
@@ -0,0 +1 @@
+/* Icons */
\ No newline at end of file
diff --git a/less/app/mobile.less b/less/app/mobile.less
new file mode 100644
index 0000000..11058f6
--- /dev/null
+++ b/less/app/mobile.less
@@ -0,0 +1,17 @@
+/* Mobile Style (three responsive breakpoints, change as you see fit) */
+
+
+/* Mobile Breakpoint - all sizes */
+ at media only screen and (max-width: 767px) {
+
+}
+
+/* Mobile Breakpoint - landscape size to tablet portrait */
+ at media only screen and (min-width: 480px) and (max-width: 767px) {
+
+}
+
+/* Mobile Breakpoint - portrait size to mobile landscape size */
+ at media only screen and (max-width: 479px) {
+
+}
\ No newline at end of file
diff --git a/less/app/tablet.less b/less/app/tablet.less
new file mode 100644
index 0000000..ab37a2a
--- /dev/null
+++ b/less/app/tablet.less
@@ -0,0 +1,22 @@
+/* Tablet Style (four responsive breakpoints, change as you see fit) */
+
+
+/* Tablet Breakpoint - most iPads & modern tablets */
+ at media only screen and (max-width: 1024px) {
+
+}
+
+/* Tablet Breakpoint - smaller than standard 960 */
+ at media only screen and (min-width: 768px) and (max-width: 959px) {
+
+}
+
+/* Tablet Breakpoint - portrait size to standard 960 */
+ at media only screen and (max-width: 768px) {
+
+}
+
+/* Tablet Breakpoint - iPad portrait only */
+ at media only screen and (min-width: 768px) and (max-width: 959px) and (max-device-width: 1000px) {
+
+}
\ No newline at end of file
diff --git a/less/app/web.less b/less/app/web.less
new file mode 100644
index 0000000..6aa45d7
--- /dev/null
+++ b/less/app/web.less
@@ -0,0 +1,7 @@
+/* Web Style (one responsive breakpoint, use as needed) */
+
+
+/* Breakpoint - Larger than 1024 (standard browsers) */
+ at media only screen and (min-width: 1025px) {
+
+}
\ No newline at end of file
diff --git a/less/app/webfonts.less b/less/app/webfonts.less
new file mode 100644
index 0000000..8412330
--- /dev/null
+++ b/less/app/webfonts.less
@@ -0,0 +1 @@
+/* Webfonts */
\ No newline at end of file
diff --git a/less/config.less b/less/config.less
new file mode 100644
index 0000000..b458bed
--- /dev/null
+++ b/less/config.less
@@ -0,0 +1,391 @@
+/* Rebar v0.1.0
+ * config.less
+ */
+
+/* Colors */
+
+ @white: #FFFFFF;
+ @black: #333333;
+ @gray: #b7bfc8;
+ @grayLight: #E6E6E6;
+ @grayDark: #656E77;
+ @blue: #0A87BF;
+ @brown: #826f69;
+ @yellow: #F8E406;
+ @green: #078754;
+ @orange: #F38B00;
+ @red: #B50606;
+
+
+/* Body */
+
+ @body-background-color: #ffffff;
+ @body-background-image: ~'';
+ @body-background-repeat: ~'';
+ @body-background-position: ~'';
+
+
+/* Container */
+
+ @container-desktop-max-width: 1140px;
+ @container-desktop-width: 960px;
+ @container-tablet-width: 768px;
+ @container-mobile-width: 420px;
+
+
+/* Margins, Paddings, and Spacings */
+
+ @base-line-height: 20px;
+ @base-margin: 20px;
+ @base-margin-bottom: @base-margin * 1.5;
+ @base-padding: 20px;
+ @base-border-radius: 4px;
+
+
+/* Text */
+
+ @text-font-size: 18px;
+ @text-font-weight: normal;
+ @text-font-family: OpenSans-Regular, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ @text-font-family-italic: OpenSans-Italic, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ @text-font-family-semibold: OpenSans-Semibold, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ @text-font-family-bold: OpenSans-Bold, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ @text-line-height: 24px;
+ @text-color: #333333;
+ @text-color-light: #999999;
+
+ @em-font-style: @text-font-family-italic;
+
+ @strong-font-family: @text-font-family-bold;
+ @strong-font-weight: normal;
+ @strong-color: #333;
+
+ @text-shadow-on-light: 1px 1px 1px #888888;
+ @text-shadow-on-dark: 0 -1px 0 rgba(0, 0, 0, 0.4);
+
+ @pre-margin-bottom: 20px;
+ @pre-background: @grayLight;
+ @pre-color: @black;
+ @pre-padding: 2px 6px;
+ @pre-border: 1px solid @gray;
+ @pre-border-radius: 3px;
+ @pre-font-family: 'Courier';
+ @pre-font-size: 14px;
+ @pre-font-weight: bold;
+
+
+/* Links */
+
+ @link-font-size: 18px;
+ @link-font-wieght: bold;
+ @link-color: @red;
+ @link-color-hover: desaturate(@red, 10%);
+ @link-decoration: none;
+ @link-decoration-hover: underline;
+
+
+/* Headings */
+
+ @headings-color: #333333;
+ @headings-font-family: @text-font-family-bold;
+ @headings-font-weight: normal;
+ @headings-letter-spacing: -2px;
+ @headings-size-h1: 60px;
+ @headings-size-h2: 48px;
+ @headings-size-h3: 36px;
+ @headings-size-h4: 30px;
+ @headings-size-h5: 24px;
+ @headings-size-h6: 18px;
+ @headings-line-height: 1px;
+ @headings-margin-bottom: 0px;
+
+
+/* Navigation */
+
+ @navigation-background: #222222;
+ @navigation-text: #EEEEEE;
+ @navigation-text-hover: #AAAAAA;
+ @navigation-text-dark: #818181;
+ @navigation-elements: #AAAAAA;
+ @navigation-shadows: #EEEEEE;
+
+ @navigation-sub-background: #d9d9d9;
+ @navigation-sub-text: #EEEEEE;
+ @navigation-sub-text-hover: #AAAAAA;
+ @navigation-sub-text-dark: #818181;
+ @navigation-sub-elements: #AAAAAA;
+ @navigation-sub-shadows: #EEEEEE;
+
+
+/* Lists */
+
+ @list-margin: 0 0 (@base-margin * 2) (@base-margin * 2);
+ @list-padding: 0px;
+ @list-font-size: @text-font-size;
+ @list-line-height: @text-font-size;
+ @list-item-margin: 15px;
+ @list-item-padding: 5px;
+
+ @list-unordered-type: square outside;
+ @list-ordered-type: decimal outside;
+
+ @list-item-horizontal-margin: 5px 15px;
+
+
+/* Separators */
+
+ @blockquote-font-size: 18px;
+ @blockquote-font-style: italic;
+ @blockquote-line-height: 24px;
+ @blockquote-color: #666666;
+
+ @hr-border-type: solid;
+ @hr-border-color: @black;
+ @hr-border-width: 1px;
+ @hr-border-margin: 45px 0;
+
+
+/* Buttons */
+
+ .button-global(@font-family, @font-size, @font-weight, @margin, @padding) {
+
+ // Font
+ font-family: @font-family !important;
+ font-size: @font-size !important;
+ font-weight: @font-weight !important;
+ line-height: inherit;
+ text-decoration: none;
+
+ // Display
+ margin: @margin;
+ padding: @padding;
+ display: inline-block;
+ cursor: pointer;
+ box-sizing: border-box;
+
+ // Select
+ user-select:none;
+
+ // Animate
+ transition-duration: 0.2s;
+ }
+
+ .button-colors(@color, @text-shadow, @border-color, @background) {
+
+ color: @color !important;
+ text-shadow: @text-shadow;
+
+ border: 1px solid @border-color;
+ border-top: 1px solid (@border-color + #222222);
+ border-left: 1px solid (@border-color + #222222);
+
+ border-radius: 4px;
+
+ background: @background;
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0px 0px rgba(0, 0, 0, 0.2);
+ }
+
+ .button-colors-hover(@border-color, @background) {
+ border-color: @border-color;
+ background-color: @background;
+ }
+
+ .button-colors-active(@border-color, @background) {
+ border-color: @border-color;
+ background-color: @background;
+ box-shadow: inset 0 .17em .1em rgba(0, 0, 0, 0.3);
+ }
+
+ @btn-color: @white;
+ @btn-font-family: @text-font-family-semibold;
+ @btn-font-size: 16px;
+ @btn-font-weight: bold;
+ @btn-margin: 0px;
+ @btn-padding: 5px 15px;
+
+ @btn-small-font-size: 12px;
+ @btn-small-font-weight: bold;
+ @btn-small-margin: @btn-margin;
+ @btn-small-padding: 2px 10px;
+
+
+/* Button - Primary */
+
+ @btn-primary-color: @white;
+ @btn-primary-text-shadow: @text-shadow-on-dark;
+ @btn-primary-background: @blue;
+ @btn-primary-background-hover: darken(@blue, 5%);
+ @btn-primary-background-active: darken(@blue, 5%);
+ @btn-primary-border-color: darken(@blue, 10%);
+ @btn-primary-border-color-hover: darken(@blue, 15%);
+ @btn-primary-border-color-active: darken(@blue, 15%);
+
+
+/* Button - Secondary */
+
+ @btn-secondary-color: @white;
+ @btn-secondary-text-shadow: @text-shadow-on-dark;
+ @btn-secondary-background: @green;
+ @btn-secondary-background-hover: darken(@green, 5%);
+ @btn-secondary-background-active: darken(@green, 5%);
+ @btn-secondary-border-color: darken(@green, 10%);
+ @btn-secondary-border-color-hover: darken(@green, 10%);
+ @btn-secondary-border-color-active: darken(@green, 10%);
+
+
+/* Button - Info */
+
+ @btn-info-color: @black;
+ @btn-info-text-shadow: 0px 0px 0px;
+ @btn-info-background: @grayLight;
+ @btn-info-background-hover: darken(@grayLight, 5%);
+ @btn-info-background-active: darken(@grayLight, 5%);
+ @btn-info-border-color: darken(@gray, 5%);
+ @btn-info-border-color-hover: darken(@gray, 10%);
+ @btn-info-border-color-active: darken(@gray, 10%);
+
+
+/* Button - Alert */
+
+ @btn-alert-color: @white;
+ @btn-alert-text-shadow: @text-shadow-on-dark;
+ @btn-alert-background: @orange;
+ @btn-alert-background-hover: darken(@orange, 8%);
+ @btn-alert-background-active: darken(@orange, 5%);
+ @btn-alert-border-color: darken(@orange, 10%);
+ @btn-alert-border-color-hover: darken(@orange, 15%);
+ @btn-alert-border-color-active: darken(@orange, 12%);
+
+
+/* Button - Warning */
+
+ @btn-warning-color: @white;
+ @btn-warning-text-shadow: @text-shadow-on-dark;
+ @btn-warning-background: @red;
+ @btn-warning-background-hover: darken(@red, 7%);
+ @btn-warning-background-active: darken(@red, 5%);
+ @btn-warning-border-color: darken(@red, 10%);
+ @btn-warning-border-color-hover: darken(@red, 10%);
+ @btn-warning-border-color-active: darken(@red, 8%);
+
+
+/* Forms */
+
+ @form-background: #FFFFFF;
+ @form-color: #666666;
+ @form-color-focus: #333333;
+ @form-font-size: 16px;
+ @form-font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ @form-font-style: normal;
+
+ @form-label-margin: 0 0 5px 0;
+ @form-label-font-size: @form-font-size;
+ @form-label-font-style: italic;
+ @form-label-font-weight: normal;
+ @form-label-color: @black;
+
+ @form-border-size: 1px;
+ @form-border-color: #999999;
+ @form-border-radius: 4px;
+ @form-border-color-focus: #666666;
+
+ @form-input-width: 210px;
+ @form-input-margin-bottom: @base-margin;
+ @form-input-padding: 10px 12px;
+ @form-input-focus: rgba(0, 0, 0,.4);
+
+ @form-textarea-height: 60px;
+
+ @form-select-color: @blue;
+ @form-select-padding: 15px 20px;
+
+ @form-tiny: 75px;
+ @form-small: 135px;
+ @form-medium: 350px;
+ @form-large: 500px;
+ @form-full: 100%;
+
+
+/* Validation */
+
+ @validation-border: 1px solid;
+ @validation-font-style: italic;
+ @validation-success-color: @green;
+ @validation-warning-color: @orange;
+ @validation-error-color: @red;
+
+
+/* Tables */
+
+ @table-background-color: @white;
+ @table-hover-background-color: #F5F6DB;
+ @table-zebra-odd-background-color: #F9F9F9;
+ @table-zebra-even-background-color: #FEFEFE;
+
+ @table-th-padding: 10px 15px;
+ @table-th-background-color: #f9f9f9;
+ @table-th-font-style: italic;
+ @table-th-font-size: 14px;
+
+ @table-margin: @base-margin 0;
+ @table-padding: 15px;
+
+ @table-border: 1px solid #ccc;
+ @table-border-radius: 7px;
+
+ @table-td-border-top: 1px solid #ccc;
+ @table-font-size: 16px;
+ @table-line-height: 16px;
+
+
+/* Grid */
+
+ @grid-row-margin-bottom: 20px;
+ @grid-gutter: 1%;
+ @grid-column-count: 16;
+
+ @grid-tablet-width: 100%;
+ @grid-mobile-width: 100%;
+
+
+/* Boxes */
+
+ @boxes-padding: 15px;
+ @boxes-header-font-size: 24px;
+ @boxes-paragraph-font-size: 14px;
+ @boxes-link-color: @gray;
+
+
+/* Rectangles */
+
+ @rectangles-padding: 10px;
+ @rectangles-header-font-size: 18px;
+ @rectangles-paragraph-font-size: 12px;
+ @rectangles-link-color: @gray;
+ @rectangles-height: 75px;
+
+
+/* Messages */
+
+ @messages-border-bottom: 0px solid @gray;
+ @messages-padding: 10px 10px 10px 20px;
+ @messages-font-family: @text-font-family-semibold;
+ @messages-font-size: 18px;
+ @messages-line-height: 21px;
+ @messages-color: @black;
+ @messages-background: @white;
+
+ @messages-error-color: @white;
+ @messages-error-background: @red;
+
+ @messages-warning-color: @white;
+ @messages-warning-background: @orange;
+
+ @messages-debug-color: @black;
+ @messages-debug-background: @yellow;
+
+ @messages-info-color: @white;
+ @messages-info-background: @blue;
+
+ @messages-success-color: @white;
+ @messages-success-background: @green;
diff --git a/less/rebar.less b/less/rebar.less
new file mode 100644
index 0000000..f91983a
--- /dev/null
+++ b/less/rebar.less
@@ -0,0 +1,26 @@
+/* Rebar v0.1.0
+ * Designed and built by @brennannovak
+ * http://github.com/brennannovak/Rebar
+ */
+
+/* Config - change settings in this file for the look and feel of your style */
+ at import "config.less";
+
+/* Rebar - these files reset and style all the basic HTML elements */
+ at import "rebar/base.less";
+ at import "rebar/buttons.less";
+ at import "rebar/clearing.less";
+ at import "rebar/forms.less";
+ at import "rebar/grid.less";
+ at import "rebar/images.less";
+ at import "rebar/links.less";
+ at import "rebar/lists.less";
+ at import "rebar/messages.less";
+ at import "rebar/navigation.less";
+ at import "rebar/separators.less";
+ at import "rebar/boxes.less";
+ at import "rebar/rectangles.less";
+ at import "rebar/shapes.less";
+ at import "rebar/tables.less";
+ at import "rebar/typography.less";
+ at import "rebar/validation.less";
\ No newline at end of file
diff --git a/less/rebar/base.less b/less/rebar/base.less
new file mode 100644
index 0000000..03f9250
--- /dev/null
+++ b/less/rebar/base.less
@@ -0,0 +1,40 @@
+/* #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: separate;
+ border-spacing: 0;
+ }
+
+
+/* #Body Styles
+================================================== */
+ body {
+ background: @body-background-image @body-background-repeat @body-background-position @body-background-color;
+ font-size: @text-font-size;
+ font-weight: @text-font-weight;
+ font-family: @text-font-family;
+ line-height: @text-line-height;
+ color: @text-color;
+ -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
+ -webkit-text-size-adjust: 100%;
+ }
+
diff --git a/less/rebar/boxes.less b/less/rebar/boxes.less
new file mode 100644
index 0000000..a19451a
--- /dev/null
+++ b/less/rebar/boxes.less
@@ -0,0 +1,152 @@
+/**
+ * @name Rebar Boxes
+ * @description
+ * - web max 1140
+ * - web 960
+ * - tablet
+ * - mobile
+ */
+
+.boxes-outer { position: relative; float: left; display: block; }
+.boxes-inner h1,
+.boxes-inner h2,
+.boxes-inner h3,
+.boxes-inner h4 { font-size: @boxes-header-font-size; margin-bottom: @boxes-padding; }
+.boxes-inner p { font-size: @boxes-paragraph-font-size; }
+.boxes-inner p a { font-size: @boxes-paragraph-font-size; color: @boxes-link-color; }
+.boxes-inner a.bottom { position: absolute; bottom: @boxes-padding; }
+.boxes-inner a.bottom.right { right: @boxes-padding; }
+
+/* --- LESS mixin to generate multiple sizes --- */
+.boxes(@blocks, @width, @margin-right, @margin-bottom) {
+
+ .boxes-outer {
+ width: @width;
+ padding-bottom: @width;
+ margin-right: @margin-right;
+ margin-bottom: @margin-bottom;
+ }
+
+ @nth1: @blocks + 1;
+ @nth2: (@blocks * 2) + 1;
+ @nth3: (@blocks * 3) + 1;
+ @nth4: (@blocks * 4) + 1;
+ @nth5: (@blocks * 5) + 1;
+ @nth6: (@blocks * 6) + 1;
+ @nth7: (@blocks * 7) + 1;
+ @nth8: (@blocks * 8) + 1;
+ @nth9: (@blocks * 9) + 1;
+ @nth10: (@blocks * 10) + 1;
+ @nth11: (@blocks * 11) + 1;
+ @nth12: (@blocks * 12) + 1;
+ @nth13: (@blocks * 13) + 1;
+ @nth14: (@blocks * 14) + 1;
+ @nth15: (@blocks * 15) + 1;
+ @nth16: (@blocks * 16) + 1;
+ @nth17: (@blocks * 17) + 1;
+ @nth18: (@blocks * 18) + 1;
+ @nth19: (@blocks * 19) + 1;
+ @nth20: (@blocks * 20) + 1;
+ @nth21: (@blocks * 21) + 1;
+ @nth22: (@blocks * 22) + 1;
+ @nth23: (@blocks * 23) + 1;
+ @nth24: (@blocks * 24) + 1;
+ @nth25: (@blocks * 25) + 1;
+ @nth26: (@blocks * 26) + 1;
+ @nth27: (@blocks * 27) + 1;
+ @nth28: (@blocks * 28) + 1;
+ @nth29: (@blocks * 29) + 1;
+ @nth30: (@blocks * 30) + 1;
+ @nth31: (@blocks * 31) + 1;
+ @nth32: (@blocks * 32) + 1;
+ @nth33: (@blocks * 33) + 1;
+ @nth34: (@blocks * 34) + 1;
+ @nth35: (@blocks * 35) + 1;
+ @nth36: (@blocks * 36) + 1;
+ @nth37: (@blocks * 37) + 1;
+ @nth38: (@blocks * 38) + 1;
+ @nth39: (@blocks * 39) + 1;
+ @nth40: (@blocks * 40) + 1;
+
+ .boxes-outer:nth-child(@{nth1}),
+ .boxes-outer:nth-child(@{nth2}),
+ .boxes-outer:nth-child(@{nth3}),
+ .boxes-outer:nth-child(@{nth4}),
+ .boxes-outer:nth-child(@{nth5}),
+ .boxes-outer:nth-child(@{nth6}),
+ .boxes-outer:nth-child(@{nth7}),
+ .boxes-outer:nth-child(@{nth8}),
+ .boxes-outer:nth-child(@{nth9}),
+ .boxes-outer:nth-child(@{nth10}),
+ .boxes-outer:nth-child(@{nth11}),
+ .boxes-outer:nth-child(@{nth12}),
+ .boxes-outer:nth-child(@{nth13}),
+ .boxes-outer:nth-child(@{nth14}),
+ .boxes-outer:nth-child(@{nth15}),
+ .boxes-outer:nth-child(@{nth16}),
+ .boxes-outer:nth-child(@{nth17}),
+ .boxes-outer:nth-child(@{nth18}),
+ .boxes-outer:nth-child(@{nth19}),
+ .boxes-outer:nth-child(@{nth20}),
+ .boxes-outer:nth-child(@{nth21}),
+ .boxes-outer:nth-child(@{nth22}),
+ .boxes-outer:nth-child(@{nth23}),
+ .boxes-outer:nth-child(@{nth24}),
+ .boxes-outer:nth-child(@{nth25}),
+ .boxes-outer:nth-child(@{nth26}),
+ .boxes-outer:nth-child(@{nth27}),
+ .boxes-outer:nth-child(@{nth28}),
+ .boxes-outer:nth-child(@{nth29}),
+ .boxes-outer:nth-child(@{nth30}),
+ .boxes-outer:nth-child(@{nth31}),
+ .boxes-outer:nth-child(@{nth32}),
+ .boxes-outer:nth-child(@{nth33}),
+ .boxes-outer:nth-child(@{nth34}),
+ .boxes-outer:nth-child(@{nth35}),
+ .boxes-outer:nth-child(@{nth36}),
+ .boxes-outer:nth-child(@{nth37}),
+ .boxes-outer:nth-child(@{nth38}),
+ .boxes-outer:nth-child(@{nth39}),
+ .boxes-outer:nth-child(@{nth40}) {
+ margin-right: 0px;
+ }
+
+ .boxes-inner {
+ position: absolute;
+ left: 1px;
+ top: 1px;
+ bottom: 1px;
+ right: 1px;
+ padding: @boxes-padding;
+ color: #555555;
+ overflow: hidden;
+ }
+}
+
+/* Five Column, 1140 web max */
+ at media only screen and (min-width: 1140px) {
+ .container {
+ .boxes(5, 19.1%, 1.1%, 1.2%);
+ }
+}
+
+/* Four Column, 960 web */
+ at media only screen and (min-width: 960px) and (max-width: 1139px) {
+ .container {
+ .boxes(4, 23.1%, 2.5%, 2.5%);
+ }
+}
+
+/* Three Column, tablet landscape */
+ at media only screen and (min-width: 768px) and (max-width: 959px) {
+ .container {
+ .boxes(3, 31%, 3.5%, 3.5%);
+ }
+}
+
+/* Two Column, mobile portrait & landscape */
+ at media only screen and (max-width: 767px) {
+ .container {
+ .boxes(2, 47.7%, 4.5%, 4.5%);
+ }
+}
\ No newline at end of file
diff --git a/less/rebar/buttons.less b/less/rebar/buttons.less
new file mode 100644
index 0000000..22addde
--- /dev/null
+++ b/less/rebar/buttons.less
@@ -0,0 +1,213 @@
+/* #Buttons
+================================================== */
+
+ /* Global */
+ button,
+ button:hover,
+ button:active,
+ input[type="submit"],
+ input[type="submit"]:hover,
+ input[type="submit"]:active,
+ input[type="reset"],
+ input[type="reset"]:hover,
+ input[type="reset"]:active,
+ input[type="button"],
+ input[type="button"]:hover,
+ input[type="button"]:active,
+ .button-primary,
+ .button-secondary,
+ .button-info,
+ .button-alert,
+ .button-warning {
+ .button-global(@btn-font-family, @btn-font-size, @btn-font-weight, @btn-margin, @btn-padding);
+ outline: none;
+ }
+
+ a.button-primary,
+ a.button-primary:visited,
+ a.button-primary:hover,
+ a.button-secondary,
+ a.button-secondary:visited,
+ a.button-secondary:hover,
+ a.button-info,
+ a.button-info:visited,
+ a.button-info:hover,
+ a.button-alert,
+ a.button-alert:visited,
+ a.button-alert:hover,
+ a.button-warning,
+ a.button-warning:visited,
+ a.button-warning:hover {
+ text-decoration: none;
+ }
+
+ .button-small,
+ button.button-small,
+ input[type="submit"].button-small,
+ input[type="reset"].button-small,
+ input[type="button"].button-small, {
+ .button-global(@btn-font-family, @btn-small-font-size, @btn-small-font-weight, @btn-small-margin, @btn-small-padding);
+ }
+
+
+ /* Primary */
+ button.button-primary,
+ input[type="submit"].button-primary,
+ input[type="reset"].button-primary,
+ input[type="button"].button-primary,
+ a.button-primary {
+ .button-colors(@btn-primary-color, @btn-primary-text-shadow, @btn-primary-border-color, @btn-primary-background);
+ }
+
+ button:hover,
+ input[type="submit"]:hover,
+ input[type="reset"]:hover,
+ input[type="button"]:hover,
+ a.button-primary:hover {
+ .button-colors-hover(@btn-primary-border-color-hover, @btn-primary-background-hover);
+ }
+
+ button:active,
+ input[type="submit"]:active,
+ input[type="reset"]:active,
+ input[type="button"]:active,
+ a.button-primary:active {
+ .button-colors-active(@btn-primary-border-color-active, @btn-primary-background-active);
+ }
+
+
+ /* Secondary */
+ button.button-secondary,
+ input[type="submit"].button-secondary,
+ input[type="reset"].button-secondary,
+ input[type="button"].button-secondary,
+ a.button-secondary {
+ .button-colors(@btn-secondary-color, @btn-secondary-text-shadow, @btn-secondary-border-color, @btn-secondary-background);
+ }
+
+ .button-secondary:hover,
+ input[type="submit"].button-secondary:hover,
+ input[type="reset"].button-secondary:hover,
+ input[type="button"].button-secondary:hover,
+ a.button-secondary:hover {
+ .button-colors-hover(@btn-secondary-border-color-hover, @btn-secondary-background-hover);
+ }
+ button.button-secondary:active,
+ input[type="submit"].button-secondary:active,
+ input[type="reset"].button-secondary:active,
+ input[type="button"].button-secondary:active,
+ a.button-secondary:active {
+ .button-colors-active(@btn-secondary-border-color-active, @btn-secondary-background-active);
+ }
+
+
+ /* Info */
+ button.button-info,
+ input[type="submit"].button-info,
+ input[type="reset"].button-info,
+ input[type="button"].button-info,
+ a.button-info {
+ .button-colors(@btn-info-color, @btn-info-text-shadow, @btn-info-border-color, @btn-info-background);
+ }
+
+ button.button-info:hover,
+ input[type="submit"].button-info:hover,
+ input[type="reset"].button-info:hover,
+ input[type="button"].button-info:hover,
+ a.button-info:hover {
+ .button-colors-hover(@btn-info-border-color-hover, @btn-info-background-hover);
+ }
+
+ button.button-info:active,
+ input[type="submit"].button-info:active,
+ input[type="reset"].button-info:active,
+ input[type="button"].button-info:active,
+ a.button-info:active {
+ .button-colors-active(@btn-info-border-color-active, @btn-info-background-active);
+ }
+
+
+ /* Alert */
+ button.button-alert,
+ input[type="submit"].button-alert,
+ input[type="reset"].button-alert,
+ input[type="button"].button-alert,
+ a.button-alert {
+ .button-colors(@btn-alert-color, @btn-alert-text-shadow, @btn-alert-border-color, @btn-alert-background);
+ }
+
+ button.button-alert:hover,
+ input[type="submit"].button-alert:hover,
+ input[type="reset"].button-alert:hover,
+ input[type="button"].button-alert:hover,
+ a.button-alert:hover {
+ .button-colors-hover(@btn-alert-border-color-hover, @btn-alert-background-hover);
+ }
+
+ button.button-alert:active,
+ input[type="submit"].button-alert:active,
+ input[type="reset"].button-alert:active,
+ input[type="button"].button-alert:active,
+ a.button-alert:active {
+ .button-colors-active(@btn-alert-border-color-active, @btn-alert-background-active);
+ }
+
+
+ /* Warning */
+ button.button-warning,
+ input[type="submit"].button-warning,
+ input[type="reset"].button-warning,
+ input[type="button"].button-warning,
+ a.button-warning {
+ .button-colors(@btn-warning-color, @btn-warning-text-shadow, @btn-warning-border-color, @btn-warning-background);
+ }
+
+ button.button-warning:hover,
+ input[type="submit"].button-warning:hover,
+ input[type="reset"].button-warning:hover,
+ input[type="button"].button-warning:hover,
+ a.button-warning:hover {
+ .button-colors-hover(@btn-warning-border-color-hover, @btn-warning-background-hover);
+ }
+
+ button.button-warning:active,
+ input[type="submit"].button-warning:active,
+ input[type="reset"].button-warning:active,
+ input[type="button"].button-warning:active,
+ a.button-warning:active {
+ .button-colors-active(@btn-warning-border-color-active, @btn-warning-background-active);
+ }
+
+
+ /* Icons */
+ .button span,
+ .button-secondary span,
+ .button-alert span,
+ .button-warning span, {
+ margin-right: 5px;
+ }
+
+ /* Full Width */
+ .button.full-width,
+ .button-primary.full-width,
+ .button-secondary.full-width,
+ .button-alert.full-width,
+ .button-warning.full-width,
+ .button-big-primary.full-width,
+ .button-big-secondary.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;
+ }
diff --git a/less/rebar/clearing.less b/less/rebar/clearing.less
new file mode 100644
index 0000000..c5b1a6d
--- /dev/null
+++ b/less/rebar/clearing.less
@@ -0,0 +1,62 @@
+/* --- Clearing --- */
+
+ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
+
+
+/* Clearfix helper */
+
+ .clearfix {
+ zoom: 1;
+ &:before, &:after {
+ content: "";
+ display: table;
+ }
+ &:after {
+ clear: both;
+ }
+ }
+
+
+/* Vertical Margins & Padding */
+
+ .remove-top { margin-top: 0 !important; }
+ .half-top { margin-top: (@base-margin / 2) !important; }
+ .add-top { margin-top: @base-margin !important; }
+ .double-top { margin-top: (@base-margin * 2) !important; }
+
+ .remove-bottom { margin-bottom: 0 !important; }
+ .half-bottom { margin-bottom: (@base-margin / 2) !important; }
+ .add-bottom { margin-bottom: @base-margin !important; }
+ .double-bottom { margin-top: (@base-margin * 2) !important; }
+
+ .remove-right { margin-right: 0px !important; }
+ .add-right { margin-right: @base-margin !important; }
+ .add-right-half { margin-right: (@base-margin / 2) !important; }
+ .add-right-double { margin-left: (@base-margin * 2) !important; }
+
+ .remove-left { margin-left: 0px !important; }
+ .add-left { margin-left: @base-margin !important; }
+ .add-left-half { margin-left: (@base-margin / 2) !important; }
+ .add-left-double { margin-left: (@base-margin * 2) !important; }
+
+
+/* Centering */
+
+ .left { float: left; }
+ .center { margin-left: auto !important; margin-right: auto !important; }
+ .right { float: right; }
+ .vertical { vertical-align: middle !important; }
+
+ .text-left { text-align: left !important; }
+ .text-center { text-align: center !important; }
+ .text-right { text-align: right !important; }
+
+
+/* Display */
+
+ .hide { display: none; }
+ .block { display: block !important; }
+ .inline-block { display: inline-block !important; }
+ .table { display: table !important; }
+ .table-cell { display: table-cell !important; }
+
diff --git a/less/rebar/forms.less b/less/rebar/forms.less
new file mode 100644
index 0000000..c59c0f2
--- /dev/null
+++ b/less/rebar/forms.less
@@ -0,0 +1,140 @@
+/* #Forms
+================================================== */
+
+ .standard {
+
+ form { margin-bottom: @base-margin; }
+ fieldset { margin-bottom: @base-margin; }
+ input[type="text"],
+ input[type="password"],
+ input[type="email"],
+ input[type="url"],
+ input[type="phone"],
+ input[type="address"],
+ textarea,
+ select {
+ margin-bottom: @form-input-margin-bottom;
+ padding: @form-input-padding;
+ outline: none;
+ font-size: @form-font-size;
+ font-family: @form-font-family;
+ color: @form-color;
+ width: @form-input-width;
+ max-width: 100%;
+ display: block;
+ background: @form-background;
+ border-radius: @form-border-radius;
+ border: @form-border-size solid @form-border-color;
+ box-sizing: border-box;
+ }
+
+ input[type="text"]:focus,
+ input[type="password"]:focus,
+ input[type="email"]:focus,
+ textarea:focus {
+ border: @form-border-size solid @form-border-color-focus;
+ color: @form-color-focus;
+ box-shadow: 0 0 5px @form-input-focus;
+ }
+
+ textarea {
+ min-height: @form-textarea-height;
+ }
+
+ label,
+ legend {
+ display: block;
+ font-weight: @form-label-font-weight;
+ font-size: @form-label-font-size;
+ font-style: @form-label-font-style;
+ margin: @form-label-margin;
+ color: @form-label-color;
+ }
+
+ select {
+ color: @form-select-color;
+ width: (@form-input-width + 10px);
+ font-size: (@form-font-size * .90);
+ }
+
+ input[type="checkbox"] {
+ display: inline;
+ }
+
+ label span,
+ legend span {
+ font-weight: @form-label-font-weight;
+ font-size: @form-label-font-size;
+ color: @form-label-color;
+ }
+
+ a {
+ font-style: normal;
+ }
+
+ label span.form_error {
+ margin: 0 0 0 3px;
+ color: @form-label-color;
+ }
+
+ }
+
+ input[type="text"].tiny,
+ input[type="password"].tiny,
+ input[type="email"].tiny,
+ input[type="url"].tiny,
+ input[type="phone"].tiny,
+ input[type="address"].tiny,
+ textarea.tiny,
+ select.tiny {
+ width: @form-tiny;
+ }
+
+ input[type="text"].small,
+ input[type="password"].small,
+ input[type="email"].small,
+ input[type="url"].small,
+ input[type="phone"].small,
+ input[type="address"].small,
+ textarea.small,
+ select.small {
+ width: @form-small;
+ }
+
+ input[type="text"].medium,
+ input[type="password"].medium,
+ input[type="email"].medium,
+ input[type="url"].medium,
+ input[type="phone"].medium,
+ input[type="address"].medium,
+ textarea.medium,
+ select.medium {
+ width: @form-medium;
+ }
+
+ input[type="text"].large,
+ input[type="password"].large,
+ input[type="email"].large,
+ input[type="url"].large,
+ input[type="phone"].large,
+ input[type="address"].large,
+ textarea.large,
+ select.large {
+ width: @form-large;
+ }
+
+ input[type="text"].full,
+ input[type="password"].full,
+ input[type="email"].full,
+ input[type="url"].full,
+ input[type="phone"].full,
+ input[type="address"].full,
+ textarea.full,
+ select.full {
+ width: @form-full;
+ }
+
+ label.checkbox {
+ margin-bottom: @base-margin;
+ }
+
diff --git a/less/rebar/grid.less b/less/rebar/grid.less
new file mode 100644
index 0000000..b2ebd53
--- /dev/null
+++ b/less/rebar/grid.less
@@ -0,0 +1,178 @@
+/**
+ * @name Rebar Grid v0.0.1
+ * @description
+ * - web big 1140 grid
+ * - web 960 grid
+ * - tablet (portrait)
+ * - mobile (portrait)
+ * - mobile (landscape)
+ * - auto-clearing
+ */
+
+.container {
+
+ width: @container-desktop-max-width;
+ margin: 0px auto;
+
+ div.row {
+ width: 100%;
+ margin-bottom: @grid-row-margin-bottom;
+ overflow: hidden;
+ .clearfix;
+ }
+
+ div:first-child {
+ margin-left: 0;
+ }
+
+ div:last-child {
+ margin-right: 0;
+ }
+
+ .col-1,
+ .col-2,
+ .col-3,
+ .col-4,
+ .col-5,
+ .col-6,
+ .col-7,
+ .col-8,
+ .col-9,
+ .col-10,
+ .col-11,
+ .col-12,
+ .col-13,
+ .col-14,
+ .col-15,
+ .col-16,
+ .one-third,
+ .two-thirds,
+ .half,
+ .one-quarter,
+ .three-quarters {
+ float: left;
+ display: inline;
+ margin: 0px 1%;
+ min-height: 1px;
+ word-wrap: break-word;
+ }
+
+ .one-quarter { width: 23.5%; }
+ .three-quarters { width: 74.5%; }
+ .one-third { width: 32%; }
+ .two-thirds { width: 66%; }
+ .half { width: 49%; }
+}
+
+/* --- LESS mixin to generate multiple size grids --- */
+.grid(@grid-container-width, @grid-width, @grid-column-count, @grid-gutter-param) {
+
+ .container {
+
+ width: @grid-container-width;
+
+ .col-1 { width: 4.4%; }
+ .col-2 { width: 10.8%; }
+ .col-3 { width: 17.2%; }
+ .col-4 { width: 23.6%; }
+ .col-5 { width: 30%; }
+ .col-6 { width: 36.4%; }
+ .col-7 { width: 42.8%; }
+ .col-8 { width: 49.0%; }
+ .col-9 { width: 55.2%; }
+ .col-10 { width: 61.6%; }
+ .col-11 { width: 68%; }
+ .col-12 { width: 74.4%; }
+ .col-13 { width: 80.8%; }
+ .col-14 { width: 87.2%; }
+ .col-15 { width: 93.6%; }
+ .col-16 { width: 100%; }
+
+ .col-offset-1 { padding-left: 4.4%; }
+ .col-offset-2 { padding-left: 10.8%; }
+ .col-offset-3 { padding-left: 17.2%; }
+ .col-offset-4 { padding-left: 23.6%; }
+ .col-offset-5 { padding-left: 30%; }
+ .col-offset-6 { padding-left: 36.4%; }
+ .col-offset-7 { padding-left: 42.8%; }
+ .col-offset-8 { padding-left: 49%; }
+ .col-offset-9 { padding-left: 55.2%; }
+ .col-offset-10 { padding-left: 61.6%; }
+ .col-offset-11 { padding-left: 68%; }
+ .col-offset-12 { padding-left: 74.4%; }
+ .col-offset-13 { padding-left: 80.8%; }
+ .col-offset-14 { padding-left: 87.2%; }
+ .col-offset-15 { padding-left: 93.6%; }
+ }
+}
+
+/* ---- Web, max grid ---- */
+ at media only screen and (min-width: 1140px) {
+ .grid(@container-desktop-max-width, @container-desktop-max-width, @grid-column-count, @grid-gutter);
+}
+
+/* ---- Web, 960 grid ---- */
+ at media only screen and (min-width: 960px) and (max-width: 1139px) {
+ .grid(@container-desktop-width, @container-desktop-width, @grid-column-count, @grid-gutter);
+}
+
+/* ---- Tablet (portrait) design for a width of 768px ---- */
+ at media only screen and (min-width: 768px) and (max-width: 959px) {
+ .grid(@container-tablet-width, @container-tablet-width, @grid-column-count, @grid-gutter);
+}
+
+/* ---- Mobile (landscape) design for a width of 480px ---- */
+ at media only screen and (max-width: 767px) {
+
+ .container {
+
+ width: @container-mobile-width;
+
+ div.row {
+ margin-bottom: 0px;
+ }
+
+ .col-1,
+ .col-2,
+ .col-3,
+ .col-4,
+ .col-5,
+ .col-6,
+ .col-7,
+ .col-8,
+ .col-9,
+ .col-10,
+ .col-11,
+ .col-12,
+ .col-13,
+ .col-14,
+ .col-15,
+ .col-16,
+ .one-quarter,
+ .three-quarters,
+ .one-third,
+ .two-thirds,
+ .half {
+ margin: 0px 0px @grid-row-margin-bottom 0px;
+ width: @container-mobile-width;
+ }
+
+ .col-offset-1,
+ .col-offset-2,
+ .col-offset-3,
+ .col-offset-4,
+ .col-offset-5,
+ .col-offset-6,
+ .col-offset-7,
+ .col-offset-8,
+ .col-offset-9,
+ .col-offset-10,
+ .col-offset-11,
+ .col-offset-12,
+ .col-offset-13,
+ .col-offset-14,
+ .col-offset-15 {
+ margin: 0px 0px @grid-row-margin-bottom 0px;
+ }
+ }
+}
diff --git a/less/rebar/images.less b/less/rebar/images.less
new file mode 100644
index 0000000..61290e2
--- /dev/null
+++ b/less/rebar/images.less
@@ -0,0 +1,13 @@
+/* #Images
+================================================== */
+
+ img {
+ max-width: 100%;
+ height: auto;
+ }
+
+
+ img.scale-with-grid {
+ max-width: 100%;
+ height: auto;
+ }
diff --git a/less/rebar/links.less b/less/rebar/links.less
new file mode 100644
index 0000000..eeda218
--- /dev/null
+++ b/less/rebar/links.less
@@ -0,0 +1,6 @@
+/* #Links
+================================================== */
+
+ a, a:visited { font-size: @link-font-size; color: @link-color; font-weight: @link-font-wieght; text-decoration: @link-decoration; outline: 0; }
+ a:hover, a:focus { color: @link-color-hover; text-decoration: @link-decoration-hover; }
+ p a, p a:visited { line-height: inherit; }
\ No newline at end of file
diff --git a/less/rebar/lists.less b/less/rebar/lists.less
new file mode 100644
index 0000000..994e509
--- /dev/null
+++ b/less/rebar/lists.less
@@ -0,0 +1,102 @@
+/* #Lists
+================================================== */
+
+ ul, ol {
+ margin: @list-margin;
+ padding: @list-padding;
+ }
+
+ ul {
+ list-style: @list-unordered-type;
+ }
+
+ ol {
+ list-style: @list-ordered-type;
+ }
+
+ ul ul, ul ol,
+ ol ol, ol ul {
+ margin: @list-margin;
+ }
+
+ ul ul li, ul ol li,
+ ol ol li, ol ul li {
+ margin-bottom: @list-item-margin;
+ line-height: @list-line-height;
+ }
+
+ li {
+ margin-bottom: @list-item-margin;
+ line-height: @list-line-height;
+ }
+
+
+/* Lists - Square, Circle, Disc, None */
+
+ ul.square, ul.circle, ul.disc, ul.none,
+ ol.square, ol.circle, ol.disc, ol.none {
+ margin: @list-margin;
+ }
+
+ ul.square,
+ ol.square {
+ list-style: square outside;
+ }
+
+ ul.circle,
+ ol.square {
+ list-style: circle outside;
+ }
+
+ ul.disc,
+ ol.disc {
+ list-style: disc outside;
+ }
+
+ ul.none,
+ ol.none {
+ list-style: none outside;
+ }
+
+
+/* Lists - Large & Small */
+
+ ul li p,
+ ul.large li,
+ ol.large li {
+ font-size: @list-font-size * 1.5;
+ line-height: @list-line-height * 1.5;
+ }
+
+ ul li p,
+ ul.small li,
+ ol.small li {
+ font-size: @list-font-size * .80;
+ line-height: @list-line-height * .80;
+ }
+
+
+/* Lists - Horizontal */
+
+ ul.horizontal,
+ ol.horizontal {
+ list-style: none inside;
+ margin: 0px;
+ }
+
+ ul.horizontal li,
+ ol.horizontal li {
+ display: inline-block;
+ margin: @list-item-horizontal-margin;
+ }
+
+ ul.horizontal li:first-child,
+ ol.horizontal li:first-child {
+ margin-left: 0px;
+ }
+
+ ul.horizontal li:last-child,
+ ol.horizontal li:last-child {
+ margin-right: 0px;
+ }
+
diff --git a/less/rebar/messages.less b/less/rebar/messages.less
new file mode 100644
index 0000000..b93a96e
--- /dev/null
+++ b/less/rebar/messages.less
@@ -0,0 +1,46 @@
+/* Messages - error, warning, debug, info, success */
+
+ #messages div {
+ margin: 0px;
+ padding: @messages-padding;
+ list-style: none;
+ font-family: @messages-font-family;
+ color: @messages-color;
+ border-bottom: @messages-border-bottom;
+ background-color: @messages-background;
+ .clearfix();
+ }
+
+ #messages span.message-text {
+ width: 90%;
+ padding-top: 3px;
+ display: block;
+ float: left;
+ text-align: left;
+ font-size: @messages-font-size;
+ line-height: @messages-line-height;
+ }
+
+ #messages abbr.message-close {
+ cursor: pointer;
+ float: right;
+ display: block;
+ background: @white;
+ color: @text-color;
+ padding: 2px 10px;
+ font-size: 12px;
+ font-weight: bold;
+ border-radius: 4px;
+ }
+
+ #messages abbr.message-close:hover {
+ background: @gray;
+ }
+
+ #messages .error { background-color: @messages-error-background; color: @messages-error-color; }
+ #messages .warning { background-color: @messages-warning-background; color: @messages-warning-color; }
+ #messages .debug { background-color: @messages-debug-background; color: @messages-debug-color; }
+ #messages .info { background-color: @messages-info-background; color: @messages-info-color; }
+ #messages .success { background-color: @messages-success-background; color: @messages-success-color; }
+
+
\ No newline at end of file
diff --git a/less/rebar/navigation.less b/less/rebar/navigation.less
new file mode 100755
index 0000000..4634c45
--- /dev/null
+++ b/less/rebar/navigation.less
@@ -0,0 +1,15 @@
+/* Navigation */
+
+ #navigation { background: @navigation-background; z-index: 10; color: @navigation-text; }
+ #navigation a { color: @navigation-text; text-decoration: none; }
+ #navigation a:hover { color: @navigation-text-hover; }
+ #navigation span.name_ome { color: #818181; }
+ #navigation_logo { display: none; }
+
+
+/* Navigation Sub */
+
+ .navigation-sub {
+ background: @navigation-sub-background;
+ border-radius: 10px;
+ }
\ No newline at end of file
diff --git a/less/rebar/rectangles.less b/less/rebar/rectangles.less
new file mode 100644
index 0000000..6df1156
--- /dev/null
+++ b/less/rebar/rectangles.less
@@ -0,0 +1,158 @@
+/**
+ * @name Rebar Rectangles
+ * @description
+ * - web max 1140
+ * - web 960
+ * - tablet
+ * - mobile
+ */
+
+.rectangles-outer { position: relative; float: left; display: block; }
+.rectangles-inner h1,
+.rectangles-inner h2,
+.rectangles-inner h3,
+.rectangles-inner h4 { font-size: @rectangles-header-font-size; margin-bottom: @rectangles-padding; }
+.rectangles-inner p { font-size: @rectangles-paragraph-font-size; }
+.rectangles-inner p a { font-size: @rectangles-paragraph-font-size; color: @rectangles-link-color; }
+.rectangles-inner a.bottom { position: absolute; bottom: @rectangles-padding; }
+.rectangles-inner a.bottom.right { right: @rectangles-padding; }
+
+/* --- LESS mixin to generate multiple sizes --- */
+.rectangles(@blocks, @width, @margin-right, @margin-bottom) {
+
+ .rectangles-outer {
+ width: @width;
+ height: @rectangles-height;
+ margin-right: @margin-right;
+ margin-bottom: @margin-bottom;
+ }
+
+ @nth1: @blocks + 1;
+ @nth2: (@blocks * 2) + 1;
+ @nth3: (@blocks * 3) + 1;
+ @nth4: (@blocks * 4) + 1;
+ @nth5: (@blocks * 5) + 1;
+ @nth6: (@blocks * 6) + 1;
+ @nth7: (@blocks * 7) + 1;
+ @nth8: (@blocks * 8) + 1;
+ @nth9: (@blocks * 9) + 1;
+ @nth10: (@blocks * 10) + 1;
+ @nth11: (@blocks * 11) + 1;
+ @nth12: (@blocks * 12) + 1;
+ @nth13: (@blocks * 13) + 1;
+ @nth14: (@blocks * 14) + 1;
+ @nth15: (@blocks * 15) + 1;
+ @nth16: (@blocks * 16) + 1;
+ @nth17: (@blocks * 17) + 1;
+ @nth18: (@blocks * 18) + 1;
+ @nth19: (@blocks * 19) + 1;
+ @nth20: (@blocks * 20) + 1;
+ @nth21: (@blocks * 21) + 1;
+ @nth22: (@blocks * 22) + 1;
+ @nth23: (@blocks * 23) + 1;
+ @nth24: (@blocks * 24) + 1;
+ @nth25: (@blocks * 25) + 1;
+ @nth26: (@blocks * 26) + 1;
+ @nth27: (@blocks * 27) + 1;
+ @nth28: (@blocks * 28) + 1;
+ @nth29: (@blocks * 29) + 1;
+ @nth30: (@blocks * 30) + 1;
+ @nth31: (@blocks * 31) + 1;
+ @nth32: (@blocks * 32) + 1;
+ @nth33: (@blocks * 33) + 1;
+ @nth34: (@blocks * 34) + 1;
+ @nth35: (@blocks * 35) + 1;
+ @nth36: (@blocks * 36) + 1;
+ @nth37: (@blocks * 37) + 1;
+ @nth38: (@blocks * 38) + 1;
+ @nth39: (@blocks * 39) + 1;
+ @nth40: (@blocks * 40) + 1;
+
+ .rectangles-outer:nth-child(@{nth1}),
+ .rectangles-outer:nth-child(@{nth2}),
+ .rectangles-outer:nth-child(@{nth3}),
+ .rectangles-outer:nth-child(@{nth4}),
+ .rectangles-outer:nth-child(@{nth5}),
+ .rectangles-outer:nth-child(@{nth6}),
+ .rectangles-outer:nth-child(@{nth7}),
+ .rectangles-outer:nth-child(@{nth8}),
+ .rectangles-outer:nth-child(@{nth9}),
+ .rectangles-outer:nth-child(@{nth10}),
+ .rectangles-outer:nth-child(@{nth11}),
+ .rectangles-outer:nth-child(@{nth12}),
+ .rectangles-outer:nth-child(@{nth13}),
+ .rectangles-outer:nth-child(@{nth14}),
+ .rectangles-outer:nth-child(@{nth15}),
+ .rectangles-outer:nth-child(@{nth16}),
+ .rectangles-outer:nth-child(@{nth17}),
+ .rectangles-outer:nth-child(@{nth18}),
+ .rectangles-outer:nth-child(@{nth19}),
+ .rectangles-outer:nth-child(@{nth20}),
+ .rectangles-outer:nth-child(@{nth21}),
+ .rectangles-outer:nth-child(@{nth22}),
+ .rectangles-outer:nth-child(@{nth23}),
+ .rectangles-outer:nth-child(@{nth24}),
+ .rectangles-outer:nth-child(@{nth25}),
+ .rectangles-outer:nth-child(@{nth26}),
+ .rectangles-outer:nth-child(@{nth27}),
+ .rectangles-outer:nth-child(@{nth28}),
+ .rectangles-outer:nth-child(@{nth29}),
+ .rectangles-outer:nth-child(@{nth30}),
+ .rectangles-outer:nth-child(@{nth31}),
+ .rectangles-outer:nth-child(@{nth32}),
+ .rectangles-outer:nth-child(@{nth33}),
+ .rectangles-outer:nth-child(@{nth34}),
+ .rectangles-outer:nth-child(@{nth35}),
+ .rectangles-outer:nth-child(@{nth36}),
+ .rectangles-outer:nth-child(@{nth37}),
+ .rectangles-outer:nth-child(@{nth38}),
+ .rectangles-outer:nth-child(@{nth39}),
+ .rectangles-outer:nth-child(@{nth40}) {
+ margin-right: 0px;
+ }
+
+ .rectangles-inner {
+ position: absolute;
+ left: 1px;
+ top: 1px;
+ bottom: 1px;
+ right: 1px;
+ padding: @rectangles-padding;
+ overflow: hidden;
+ }
+}
+
+/* Five Column, 1140 web max */
+ at media only screen and (min-width: 1140px) {
+ .container {
+ .rectangles(5, 19.1%, 1.1%, 1.2%);
+ }
+}
+
+/* Four Column, 960 web */
+ at media only screen and (min-width: 960px) and (max-width: 1139px) {
+ .container {
+ .rectangles(4, 23.1%, 2.25%, 2%);
+ }
+}
+
+/* Three Column, tablet landscape */
+ at media only screen and (min-width: 768px) and (max-width: 959px) {
+ .container {
+ .rectangles(3, 31.25%, 2.75%, 2.25%);
+ }
+}
+
+/* Two Column, mobile portrait & landscape */
+ at media only screen and (max-width: 767px) {
+ .container {
+ .rectangles(2, 48.5%, 3%, 3%);
+ }
+}
+
+/* Two Column, mobile portrait */
+ at media only screen and (max-width: 480px) {
+ .container {
+ .rectangles(1, 100%, 4%, 2%);
+ }
+}
\ No newline at end of file
diff --git a/less/rebar/separators.less b/less/rebar/separators.less
new file mode 100644
index 0000000..e062f1c
--- /dev/null
+++ b/less/rebar/separators.less
@@ -0,0 +1,31 @@
+/* Separators
+================================================== */
+
+ hr {
+ border: @hr-border-type @hr-border-color;
+ border-width: @hr-border-width 0 0;
+ clear: both;
+ margin: @hr-border-margin;
+ height: 0;
+ }
+
+ hr.medium {
+ border: none;
+ height: @hr-border-width * 2;
+ margin: @hr-border-margin;
+ background: @hr-border-color;
+ }
+
+ hr.large {
+ border: none;
+ height: @hr-border-width * 4;
+ margin: @hr-border-margin;
+ background: @hr-border-color;
+ }
+
+ hr.giant {
+ border: none;
+ height: @hr-border-width * 8;
+ margin: @hr-border-margin;
+ background: @hr-border-color;
+ }
\ No newline at end of file
diff --git a/less/rebar/shapes.less b/less/rebar/shapes.less
new file mode 100644
index 0000000..978185d
--- /dev/null
+++ b/less/rebar/shapes.less
@@ -0,0 +1,39 @@
+/* Shapes */
+
+ .circle(@size:100px, @color:red) {
+ width: @size;
+ height: @size;
+ background: @color;
+ -moz-border-radius: @size/2;
+ -webkit-border-radius: @size/2;
+ border-radius: @size/2;
+ }
+
+ .triangle-up(@size:100px, @color:red) {
+ width: 0;
+ height: 0;
+ border-left: @size/2 solid transparent;
+ border-right: @size/2 solid transparent;
+ border-bottom: @size solid @color;
+ }
+ .triangle-down(@size:100px, @color:red) {
+ width: 0;
+ height: 0;
+ border-left: @size/2 solid transparent;
+ border-right: @size/2 solid transparent;
+ border-top: @size solid @color;
+ }
+ .triangle-left(@size:100px, @color:red) {
+ width: 0;
+ height: 0;
+ border-top: @size/2 solid transparent;
+ border-right: @size solid @color;
+ border-bottom: @size/2 solid transparent;
+ }
+ .triangle-right(@size:100px, @color:red) {
+ width: 0;
+ height: 0;
+ border-top: @size/2 solid transparent;
+ border-left: @size solid @color;
+ border-bottom: @size/2 solid transparent;
+ }
diff --git a/less/rebar/tables.less b/less/rebar/tables.less
new file mode 100644
index 0000000..aa3108b
--- /dev/null
+++ b/less/rebar/tables.less
@@ -0,0 +1,152 @@
+/* #Tables
+================================================== */
+
+ table {
+ background-color: @table-background-color;
+ border-right: @table-border;
+ border-left: @table-border;
+ border-bottom: @table-border;
+ }
+
+ table th,
+ table td,
+ table tfoot {
+ border-top: @table-border;
+ }
+
+ table td {
+ padding: @table-padding;
+ font-size: @table-font-size;
+ line-height: @table-line-height;
+ }
+
+ table th {
+ padding: @table-th-padding;
+ background-color: @table-th-background-color;
+ text-align: left;
+ font-style: @table-th-font-style;
+ font-size: @table-th-font-size;
+ }
+
+ table tr.foot td {
+ padding: @table-th-padding;
+ background-color: @table-th-background-color;
+ font-style: @table-th-font-style;
+ font-size: @table-th-font-size;
+ }
+
+
+/* Table - Full */
+
+ table.full {
+ width: 100%;
+ }
+
+ table.full td,
+ table.full th {
+ padding: @table-padding;
+ }
+
+
+/* Table - Rounded */
+
+ table.rounded {
+ border-radius: @table-border-radius;
+ }
+
+ table.rounded td:first-child,
+ table.rounded th:first-child {
+ border-left: none;
+ }
+
+ table.rounded th:first-child {
+ border-radius: @table-border-radius 0 0 0;
+ }
+
+ table.rounded th:last-child {
+ border-radius: 0 @table-border-radius 0 0;
+ }
+
+ table.rounded th:only-child {
+ border-radius: @table-border-radius @table-border-radius 0 0;
+ }
+
+ table.rounded tr:last-child td:first-child {
+ border-radius: 0 0 0 @table-border-radius;
+ }
+
+ table.rounded tr:last-child td:last-child {
+ border-radius: 0 0 @table-border-radius 0;
+ }
+
+ table.rounded tr:last-child td:only-child {
+ border-radius: 0 0 @table-border-radius @table-border-radius;
+ }
+
+
+/* Table - Zebra Striping */
+
+ table.zebra {
+ border-right: @table-border;
+ border-left: @table-border;
+ }
+
+ table.zebra td,
+ table.zebra th {
+ padding: @table-padding;
+ }
+
+ table.zebra tr:nth-child(odd) {
+ background-color: @table-zebra-odd-background-color;
+ }
+
+ table.zebra tbody tr:nth-child(even) {
+ background-color: @table-zebra-even-background-color;
+ box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
+ }
+
+ table.zebra th {
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
+ background-color: #eee;
+ background-image: linear-gradient(top, #f5f5f5, #eee);
+ }
+
+ table.zebra th:first-child {
+ border-radius: 6px 0 0 0;
+ }
+
+ table.zebra th:last-child {
+ border-radius: 0 6px 0 0;
+ }
+
+ table.zebra th:only-child {
+ border-radius: 6px 6px 0 0;
+ }
+
+ table.zebra tfoot td {
+ border-bottom: 0;
+ border-top: 1px solid #fff;
+ background-color: #f1f1f1;
+ }
+
+ table.zebra tfoot td:first-child {
+ border-radius: 0 0 0 6px;
+ }
+
+ table.zebra tfoot td:last-child {
+ border-radius: 0 0 6px 0;
+ }
+
+ table.zebra tfoot td:only-child {
+ border-radius: 0 0 6px 6px;
+ }
+
+
+/* Table - Rouded & Zebra */
+
+ table tr:hover,
+ table.rounded tr:hover,
+ table.zebra tr:hover {
+ background: @table-hover-background-color;
+ transition: all 0.1s ease-in-out;
+ }
\ No newline at end of file
diff --git a/less/rebar/typography.less b/less/rebar/typography.less
new file mode 100644
index 0000000..2b0379f
--- /dev/null
+++ b/less/rebar/typography.less
@@ -0,0 +1,73 @@
+/* #Typography
+================================================== */
+
+/* Headings */
+
+ h1, h2, h3, h4, h5, h6 {
+ color: @headings-color;
+ font-family: @headings-font-family;
+ font-weight: @headings-font-weight;
+ letter-spacing: @headings-letter-spacing;
+ }
+
+ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
+ h1 { font-size: @headings-size-h1; line-height: (@headings-size-h1 * @headings-line-height); margin-bottom: (@base-margin-bottom + @headings-margin-bottom); }
+ h2 { font-size: @headings-size-h2; line-height: (@headings-size-h2 * @headings-line-height); margin-bottom: (@base-margin-bottom + @headings-margin-bottom); }
+ h3 { font-size: @headings-size-h3; line-height: (@headings-size-h3 * @headings-line-height); margin-bottom: (@base-margin-bottom + @headings-margin-bottom); }
+ h4 { font-size: @headings-size-h4; line-height: (@headings-size-h4 * @headings-line-height); margin-bottom: (@base-margin-bottom + @headings-margin-bottom); }
+ h5 { font-size: @headings-size-h5; line-height: (@headings-size-h5 * @headings-line-height); margin-bottom: (@base-margin-bottom + @headings-margin-bottom); }
+ h6 { font-size: @headings-size-h6; line-height: (@headings-size-h6 * @headings-line-height); margin-bottom: (@base-margin-bottom + @headings-margin-bottom); }
+
+ .subheader { color: #777; }
+
+
+/* Non Headings */
+
+ p { margin: 0 0 20px 0; }
+ p img { margin: 0; }
+ p.lead { font-size: 21px; line-height: 27px; color: #777; }
+
+ i,
+ em {
+ font-style: @em-font-style;
+ }
+
+ b,
+ strong {
+ font-family: @strong-font-family;
+ font-weight: @strong-font-weight;
+ color: @strong-color;
+ }
+
+ small { font-size: 80%; }
+
+
+/* Blockquotes */
+
+ blockquote, blockquote p { font-size: @blockquote-font-size; line-height: @blockquote-line-height; color: @blockquote-color; font-style: @blockquote-font-style; margin: 0 0 10px 0; }
+ blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 4px solid #c9c9c9; }
+ 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; }
+
+
+/* Pre & Code */
+
+ code,
+ pre,
+ .pre {
+ margin-bottom: @pre-margin-bottom;
+ background: @pre-background;
+ color: @pre-color;
+ padding: @pre-padding;
+ border: @pre-border;
+ border-radius: @pre-border-radius;
+ font-family: @pre-font-family;
+ font-size: @pre-font-size;
+ font-weight: @pre-font-weight;
+ }
+
+ code,
+ pre {
+ display: inline-block;
+ }
\ No newline at end of file
diff --git a/less/rebar/validation.less b/less/rebar/validation.less
new file mode 100644
index 0000000..3607d88
--- /dev/null
+++ b/less/rebar/validation.less
@@ -0,0 +1,42 @@
+/* Validation */
+
+ .validation-message {
+ font-style: @validation-font-style;
+ }
+
+ /* Success */
+ span.validation-success,
+ label.validation-success {
+ color: @validation-success-color;
+ }
+
+ input.validation-success,
+ textarea.validation-success,
+ select.validation-success {
+ border: @validation-border @validation-success-color !important;
+ }
+
+ /* Warning */
+ span.validation-warning,
+ label.validation-warning {
+ color: @validation-warning-color;
+ }
+
+ input.validation-warning,
+ textarea.validation-warning,
+ select.validation-warning {
+ border: @validation-border @validation-warning-color !important;
+ }
+
+ /* Error */
+ span.validation-error,
+ label.validation-error {
+ color: @validation-error-color;
+ }
+
+ input.validation-error,
+ textarea.validation-error,
+ select.validation-error {
+ border: @validation-border @validation-error-color !important;
+ }
+
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..441f23f
--- /dev/null
+++ b/package.json
@@ -0,0 +1,30 @@
+{
+ "name": "Rebar",
+ "version": "0.2.0",
+ "author": "Brennan Novak <hi at brennannovak.com>",
+ "contributors":[
+ { "name": "Edward Hotchkiss", "github": "http://github.com/edwardhotchkiss/" }
+ ],
+ "description": "A lightweight HTML5 / CSS3 framework for making responsive websites, built using the LESS preprocessor",
+ "homepage": "https://github.com/brennannovak/Rebar/",
+ "bugs": {
+ "url": "https://github.com/brennannovak/Rebar/issues"
+ },
+ "repository":{
+ "type":"git",
+ "url":"git://github.com/brennannovak/Rebar.git"
+ },
+ "engines":{
+ "node":">= 0.10.0"
+ },
+ "dependencies": {
+ "grunt": "0.4.1",
+ "grunt-contrib-less": "0.5.0",
+ "grunt-contrib-cssmin": "0.4.1",
+ "grunt-contrib-watch": "0.2.0"
+ },
+ "licenses":[{
+ "type":"MIT",
+ "url":"https://github.com/brennannovak/Rebar/LICENSE"
+ }]
+}
\ No newline at end of file
diff --git a/webfonts/OpenSans-Bold.ttf b/webfonts/OpenSans-Bold.ttf
new file mode 100755
index 0000000..fd79d43
Binary files /dev/null and b/webfonts/OpenSans-Bold.ttf differ
diff --git a/webfonts/OpenSans-BoldItalic.ttf b/webfonts/OpenSans-BoldItalic.ttf
new file mode 100755
index 0000000..9bc8009
Binary files /dev/null and b/webfonts/OpenSans-BoldItalic.ttf differ
diff --git a/webfonts/OpenSans-ExtraBold.ttf b/webfonts/OpenSans-ExtraBold.ttf
new file mode 100755
index 0000000..21f6f84
Binary files /dev/null and b/webfonts/OpenSans-ExtraBold.ttf differ
diff --git a/webfonts/OpenSans-ExtraBoldItalic.ttf b/webfonts/OpenSans-ExtraBoldItalic.ttf
new file mode 100755
index 0000000..31cb688
Binary files /dev/null and b/webfonts/OpenSans-ExtraBoldItalic.ttf differ
diff --git a/webfonts/OpenSans-Italic.ttf b/webfonts/OpenSans-Italic.ttf
new file mode 100755
index 0000000..c90da48
Binary files /dev/null and b/webfonts/OpenSans-Italic.ttf differ
diff --git a/webfonts/OpenSans-Light.ttf b/webfonts/OpenSans-Light.ttf
new file mode 100755
index 0000000..0d38189
Binary files /dev/null and b/webfonts/OpenSans-Light.ttf differ
diff --git a/webfonts/OpenSans-LightItalic.ttf b/webfonts/OpenSans-LightItalic.ttf
new file mode 100755
index 0000000..68299c4
Binary files /dev/null and b/webfonts/OpenSans-LightItalic.ttf differ
diff --git a/webfonts/OpenSans-Regular.ttf b/webfonts/OpenSans-Regular.ttf
new file mode 100755
index 0000000..db43334
Binary files /dev/null and b/webfonts/OpenSans-Regular.ttf differ
diff --git a/webfonts/OpenSans-Semibold.ttf b/webfonts/OpenSans-Semibold.ttf
new file mode 100755
index 0000000..1a7679e
Binary files /dev/null and b/webfonts/OpenSans-Semibold.ttf differ
diff --git a/webfonts/OpenSans-SemiboldItalic.ttf b/webfonts/OpenSans-SemiboldItalic.ttf
new file mode 100755
index 0000000..59b6d16
Binary files /dev/null and b/webfonts/OpenSans-SemiboldItalic.ttf differ
diff --git a/webfonts/index.html b/webfonts/index.html
new file mode 100644
index 0000000..3ca9080
--- /dev/null
+++ b/webfonts/index.html
@@ -0,0 +1 @@
+Put your webfonts in this folder
\ No newline at end of file
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/rebar.js.git
More information about the Pkg-javascript-commits
mailing list