handy-css-rails 0.0.1

data/vendor/assets/stylesheets/handy-css-rails/handyCSS.css

@@ -0,0 +1,1803 @@
+/* normalize.css v1.1.1 | MIT License | git.io/normalize */
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+/**
+ * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+  display: block; }
+
+/**
+ * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+audio,
+canvas,
+video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1; }
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+audio:not([controls]) {
+  display: none;
+  height: 0; }
+
+/**
+ * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
+ * Known issue: no IE 6 support.
+ */
+[hidden] {
+  display: none; }
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+/**
+ * 1. Prevent system color scheme's background color being used in Firefox, IE,
+ *    and Opera.
+ * 2. Prevent system color scheme's text color being used in Firefox, IE, and
+ *    Opera.
+ * 3. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
+ *    `em` units.
+ * 4. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+html {
+  background: #fff;
+  /* 1 */
+  color: #000;
+  /* 2 */
+  font-size: 100%;
+  /* 3 */
+  -webkit-text-size-adjust: 100%;
+  /* 4 */
+  -ms-text-size-adjust: 100%;
+  /* 4 */ }
+
+/**
+ * Address `font-family` inconsistency between `textarea` and other form
+ * elements.
+ */
+html,
+button,
+input,
+select,
+textarea {
+  font-family: sans-serif; }
+
+/**
+ * Address margins handled incorrectly in IE 6/7.
+ */
+body {
+  margin: 0; }
+
+/* ==========================================================================
+   Links
+   ========================================================================== */
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+a:focus {
+  outline: thin dotted; }
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+a:active,
+a:hover {
+  outline: 0; }
+
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+/**
+ * Address font sizes and margins set differently in IE 6/7.
+ * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
+ * and Chrome.
+ */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0; }
+
+h2 {
+  font-size: 1.5em;
+  margin: 0.83em 0; }
+
+h3 {
+  font-size: 1.17em;
+  margin: 1em 0; }
+
+h4 {
+  font-size: 1em;
+  margin: 1.33em 0; }
+
+h5 {
+  font-size: 0.83em;
+  margin: 1.67em 0; }
+
+h6 {
+  font-size: 0.67em;
+  margin: 2.33em 0; }
+
+/**
+ * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
+ */
+abbr[title] {
+  border-bottom: 1px dotted; }
+
+/**
+ * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
+ */
+b,
+strong {
+  font-weight: bold; }
+
+blockquote {
+  margin: 1em 40px; }
+
+/**
+ * Address styling not present in Safari 5 and Chrome.
+ */
+dfn {
+  font-style: italic; }
+
+/**
+ * Address differences between Firefox and other browsers.
+ * Known issue: no IE 6/7 normalization.
+ */
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0; }
+
+/**
+ * Address styling not present in IE 6/7/8/9.
+ */
+mark {
+  background: #ff0;
+  color: #000; }
+
+/**
+ * Address margins set differently in IE 6/7.
+ */
+p,
+pre {
+  margin: 1em 0; }
+
+/**
+ * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
+ */
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, serif;
+  _font-family: 'courier new', monospace;
+  font-size: 1em; }
+
+/**
+ * Improve readability of pre-formatted text in all browsers.
+ */
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word; }
+
+/**
+ * Address CSS quotes not supported in IE 6/7.
+ */
+q {
+  quotes: none; }
+
+/**
+ * Address `quotes` property not supported in Safari 4.
+ */
+q:before,
+q:after {
+  content: '';
+  content: none; }
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+small {
+  font-size: 80%; }
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline; }
+
+sup {
+  top: -0.5em; }
+
+sub {
+  bottom: -0.25em; }
+
+/* ==========================================================================
+   Lists
+   ========================================================================== */
+/**
+ * Address margins set differently in IE 6/7.
+ */
+dl,
+menu,
+ol,
+ul {
+  margin: 1em 0; }
+
+dd {
+  margin: 0 0 0 40px; }
+
+/**
+ * Address paddings set differently in IE 6/7.
+ */
+menu,
+ol,
+ul {
+  padding: 0 0 0 40px; }
+
+/**
+ * Correct list images handled incorrectly in IE 7.
+ */
+nav ul,
+nav ol {
+  list-style: none;
+  list-style-image: none; }
+
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+/**
+ * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
+ * 2. Improve image quality when scaled in IE 7.
+ */
+img {
+  border: 0;
+  /* 1 */
+  -ms-interpolation-mode: bicubic;
+  /* 2 */ }
+
+/**
+ * Correct overflow displayed oddly in IE 9.
+ */
+svg:not(:root) {
+  overflow: hidden; }
+
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+/**
+ * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
+ */
+figure {
+  margin: 0; }
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+/**
+ * Correct margin displayed oddly in IE 6/7.
+ */
+form {
+  margin: 0; }
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em; }
+
+/**
+ * 1. Correct color not being inherited in IE 6/7/8/9.
+ * 2. Correct text not wrapping in Firefox 3.
+ * 3. Correct alignment displayed oddly in IE 6/7.
+ */
+legend {
+  border: 0;
+  /* 1 */
+  padding: 0;
+  white-space: normal;
+  /* 2 */
+  *margin-left: -7px;
+  /* 3 */ }
+
+/**
+ * 1. Correct font size not being inherited in all browsers.
+ * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
+ *    and Chrome.
+ * 3. Improve appearance and consistency in all browsers.
+ */
+button,
+input,
+select,
+textarea {
+  font-size: 100%;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  vertical-align: baseline;
+  /* 3 */
+  *vertical-align: middle;
+  /* 3 */ }
+
+/**
+ * Address Firefox 3+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+button,
+input {
+  line-height: normal; }
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
+ */
+button,
+select {
+  text-transform: none; }
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
+ *    Known issue: inner spacing remains in IE 6.
+ */
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button;
+  /* 2 */
+  cursor: pointer;
+  /* 3 */
+  *overflow: visible;
+  /* 4 */ }
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+button[disabled],
+html input[disabled] {
+  cursor: default; }
+
+/**
+ * 1. Address box sizing set to content-box in IE 8/9.
+ * 2. Remove excess padding in IE 8/9.
+ * 3. Remove excess padding in IE 7.
+ *    Known issue: excess padding remains in IE 6.
+ */
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box;
+  /* 1 */
+  padding: 0;
+  /* 2 */
+  *height: 13px;
+  /* 3 */
+  *width: 13px;
+  /* 3 */ }
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+input[type="search"] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  /* 2 */
+  box-sizing: content-box; }
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none; }
+
+/**
+ * Remove inner padding and border in Firefox 3+.
+ */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0; }
+
+/**
+ * 1. Remove default vertical scrollbar in IE 6/7/8/9.
+ * 2. Improve readability and alignment in all browsers.
+ */
+textarea {
+  overflow: auto;
+  /* 1 */
+  vertical-align: top;
+  /* 2 */ }
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+/**
+ * Remove most spacing between table cells.
+ */
+table {
+  border-collapse: collapse;
+  border-spacing: 0; }
+
+/*
+ * HTML5 Boilerplate
+ *
+ * What follows is the result of much research on cross-browser styling.
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ */
+/* ==========================================================================
+   Base styles: opinionated defaults
+   ========================================================================== */
+html,
+button,
+input,
+select,
+textarea {
+  color: #222; }
+
+body {
+  font-size: 1em;
+  line-height: 1.4; }
+
+/*
+ * Remove text-shadow in selection highlight: h5bp.com/i
+ * These selection rule sets have to be separate.
+ * Customize the background color to match your design.
+ */
+::-moz-selection {
+  background: #b3d4fc;
+  text-shadow: none; }
+
+::selection {
+  background: #b3d4fc;
+  text-shadow: none; }
+
+/*
+ * A better looking default horizontal rule
+ */
+hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid #ccc;
+  margin: 1em 0;
+  padding: 0; }
+
+/*
+ * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
+ */
+img {
+  vertical-align: middle; }
+
+/*
+ * Remove default fieldset styles.
+ */
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0; }
+
+/*
+ * Allow only vertical resizing of textareas.
+ */
+textarea {
+  resize: vertical; }
+
+/* ==========================================================================
+   Chrome Frame prompt
+   ========================================================================== */
+.chromeframe {
+  margin: 0.2em 0;
+  background: #ccc;
+  color: #000;
+  padding: 0.2em 0; }
+
+/* ==========================================================================
+   Author's custom styles
+   ========================================================================== */
+/* ==========================================================================
+   Helper classes
+   ========================================================================== */
+/*
+ * Image replacement
+ */
+.ir {
+  background-color: transparent;
+  border: 0;
+  overflow: hidden;
+  /* IE 6/7 fallback */
+  *text-indent: -9999px; }
+
+.ir:before {
+  content: "";
+  display: block;
+  width: 0;
+  height: 150%; }
+
+/*
+ * Hide from both screenreaders and browsers: h5bp.com/u
+ */
+.hidden {
+  display: none !important;
+  visibility: hidden; }
+
+/*
+ * Hide only visually, but have it available for screenreaders: h5bp.com/v
+ */
+.visuallyhidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px; }
+
+/*
+ * Extends the .visuallyhidden class to allow the element to be focusable
+ * when navigated to via the keyboard: h5bp.com/p
+ */
+.visuallyhidden.focusable:active,
+.visuallyhidden.focusable:focus {
+  clip: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  position: static;
+  width: auto; }
+
+/*
+ * Hide visually and from screenreaders, but maintain layout
+ */
+.invisible {
+  visibility: hidden; }
+
+/*
+ * Clearfix: contain floats
+ *
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ *    `contenteditable` attribute is included anywhere else in the document.
+ *    Otherwise it causes space to appear at the top and bottom of elements
+ *    that receive the `clearfix` class.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ *    `:before` to contain the top-margins of child elements.
+ */
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  /* 1 */
+  display: table;
+  /* 2 */ }
+
+.clearfix:after {
+  clear: both; }
+
+/*
+ * For IE 6/7 only
+ * Include this rule to trigger hasLayout and contain floats.
+ */
+.clearfix {
+  *zoom: 1; }
+
+/* ==========================================================================
+   EXAMPLE Media Queries for Responsive Design.
+   These examples override the primary ('mobile first') styles.
+   Modify as content requires.
+   ========================================================================== */
+@media only screen and (min-width: 35em) {
+  /* Style adjustments for viewports that meet the condition */ }
+@media print, (-o-min-device-pixel-ratio: 5 / 4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
+  /* Style adjustments for high resolution devices */ }
+/* ==========================================================================
+   Print styles.
+   Inlined to avoid required HTTP connection: h5bp.com/r
+   ========================================================================== */
+@media print {
+  * {
+    background: transparent !important;
+    color: #000 !important;
+    /* Black prints faster: h5bp.com/s */
+    box-shadow: none !important;
+    text-shadow: none !important; }
+
+  a,
+  a:visited {
+    text-decoration: underline; }
+
+  a[href]:after {
+    content: " (" attr(href) ")"; }
+
+  abbr[title]:after {
+    content: " (" attr(title) ")"; }
+
+  /*
+   * Don't show links for images, or javascript/internal links
+   */
+  .ir a:after,
+  a[href^="javascript:"]:after,
+  a[href^="#"]:after {
+    content: ""; }
+
+  pre,
+  blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid; }
+
+  thead {
+    display: table-header-group;
+    /* h5bp.com/t */ }
+
+  tr,
+  img {
+    page-break-inside: avoid; }
+
+  img {
+    max-width: 100% !important; }
+
+  @page {
+    margin: 0.5cm; }
+
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3; }
+
+  h2,
+  h3 {
+    page-break-after: avoid; } }
+/* Clear Both Classes */
+.cl {
+  clear: both;
+  display: block; }
+
+.cl-2 {
+  clear: both;
+  display: block;
+  height: 2px; }
+
+.cl-3 {
+  clear: both;
+  display: block;
+  height: 3px; }
+
+.cl-4 {
+  clear: both;
+  display: block;
+  height: 4px; }
+
+.cl-5 {
+  clear: both;
+  display: block;
+  height: 5px; }
+
+.cl-10 {
+  clear: both;
+  display: block;
+  height: 10px; }
+
+.cl-15 {
+  clear: both;
+  display: block;
+  height: 15px; }
+
+.cl-20 {
+  clear: both;
+  display: block;
+  height: 20px; }
+
+.cl-25 {
+  clear: both;
+  display: block;
+  height: 25px; }
+
+.cl-30 {
+  clear: both;
+  display: block;
+  height: 30px; }
+
+.cl-40 {
+  clear: both;
+  display: block;
+  height: 40px; }
+
+.cl-50 {
+  clear: both;
+  display: block;
+  height: 50px; }
+
+.cl-60 {
+  clear: both;
+  display: block;
+  height: 60px; }
+
+.cl-70 {
+  clear: both;
+  display: block;
+  height: 70px; }
+
+.cl-80 {
+  clear: both;
+  display: block;
+  height: 80px; }
+
+.cl-90 {
+  clear: both;
+  display: block;
+  height: 90px; }
+
+.cl-100 {
+  clear: both;
+  display: block;
+  height: 100px; }
+
+.cl-200 {
+  clear: both;
+  display: block;
+  height: 200px; }
+
+/* ---------------------- */
+/* Margin/Padding Classes */
+/* ---------------------- */
+.margin-auto {
+  margin: 0px auto !important; }
+
+/* e.g: margin-10, padding-10 */
+.margin-2 {
+  margin: 2px !important; }
+
+.margin-3 {
+  margin: 3px !important; }
+
+.margin-4 {
+  margin: 4px !important; }
+
+.margin-5 {
+  margin: 5px !important; }
+
+.margin-10 {
+  margin: 10px !important; }
+
+.margin-15 {
+  margin: 15px !important; }
+
+.margin-20 {
+  margin: 20px !important; }
+
+.margin-25 {
+  margin: 25px !important; }
+
+.margin-30 {
+  margin: 30px !important; }
+
+.margin-40 {
+  margin: 40px !important; }
+
+.margin-50 {
+  margin: 50px !important; }
+
+.margin-60 {
+  margin: 60px !important; }
+
+.margin-70 {
+  margin: 70px !important; }
+
+.margin-80 {
+  margin: 80px !important; }
+
+.margin-90 {
+  margin: 90px !important; }
+
+.margin-100 {
+  margin: 100px !important; }
+
+.margin-200 {
+  margin: 200px !important; }
+
+/* e.g: margin-top-10, padding-top-10 */
+.margin-top-2 {
+  margin-top: 2px !important; }
+
+.margin-top-3 {
+  margin-top: 3px !important; }
+
+.margin-top-4 {
+  margin-top: 4px !important; }
+
+.margin-top-5 {
+  margin-top: 5px !important; }
+
+.margin-top-10 {
+  margin-top: 10px !important; }
+
+.margin-top-15 {
+  margin-top: 15px !important; }
+
+.margin-top-20 {
+  margin-top: 20px !important; }
+
+.margin-top-25 {
+  margin-top: 25px !important; }
+
+.margin-top-30 {
+  margin-top: 30px !important; }
+
+.margin-top-40 {
+  margin-top: 40px !important; }
+
+.margin-top-50 {
+  margin-top: 50px !important; }
+
+.margin-top-60 {
+  margin-top: 60px !important; }
+
+.margin-top-70 {
+  margin-top: 70px !important; }
+
+.margin-top-80 {
+  margin-top: 80px !important; }
+
+.margin-top-90 {
+  margin-top: 90px !important; }
+
+.margin-top-100 {
+  margin-top: 100px !important; }
+
+.margin-top-200 {
+  margin-top: 200px !important; }
+
+/* e.g: margin-bottom-10, padding-bottom-10 */
+.margin-bottom-2 {
+  margin-bottom: 2px !important; }
+
+.margin-bottom-3 {
+  margin-bottom: 3px !important; }
+
+.margin-bottom-4 {
+  margin-bottom: 4px !important; }
+
+.margin-bottom-5 {
+  margin-bottom: 5px !important; }
+
+.margin-bottom-10 {
+  margin-bottom: 10px !important; }
+
+.margin-bottom-15 {
+  margin-bottom: 15px !important; }
+
+.margin-bottom-20 {
+  margin-bottom: 20px !important; }
+
+.margin-bottom-25 {
+  margin-bottom: 25px !important; }
+
+.margin-bottom-30 {
+  margin-bottom: 30px !important; }
+
+.margin-bottom-40 {
+  margin-bottom: 40px !important; }
+
+.margin-bottom-50 {
+  margin-bottom: 50px !important; }
+
+.margin-bottom-60 {
+  margin-bottom: 60px !important; }
+
+.margin-bottom-70 {
+  margin-bottom: 70px !important; }
+
+.margin-bottom-80 {
+  margin-bottom: 80px !important; }
+
+.margin-bottom-90 {
+  margin-bottom: 90px !important; }
+
+.margin-bottom-100 {
+  margin-bottom: 100px !important; }
+
+.margin-bottom-200 {
+  margin-bottom: 200px !important; }
+
+/* e.g: margin-left-10, padding-left-10 */
+.margin-left-2 {
+  margin-left: 2px !important; }
+
+.margin-left-3 {
+  margin-left: 3px !important; }
+
+.margin-left-4 {
+  margin-left: 4px !important; }
+
+.margin-left-5 {
+  margin-left: 5px !important; }
+
+.margin-left-10 {
+  margin-left: 10px !important; }
+
+.margin-left-15 {
+  margin-left: 15px !important; }
+
+.margin-left-20 {
+  margin-left: 20px !important; }
+
+.margin-left-25 {
+  margin-left: 25px !important; }
+
+.margin-left-30 {
+  margin-left: 30px !important; }
+
+.margin-left-40 {
+  margin-left: 40px !important; }
+
+.margin-left-50 {
+  margin-left: 50px !important; }
+
+.margin-left-60 {
+  margin-left: 60px !important; }
+
+.margin-left-70 {
+  margin-left: 70px !important; }
+
+.margin-left-80 {
+  margin-left: 80px !important; }
+
+.margin-left-90 {
+  margin-left: 90px !important; }
+
+.margin-left-100 {
+  margin-left: 100px !important; }
+
+.margin-left-200 {
+  margin-left: 200px !important; }
+
+/* e.g: margin-right-10, padding-right-10 */
+.margin-right-2 {
+  margin-right: 2px !important; }
+
+.margin-right-3 {
+  margin-right: 3px !important; }
+
+.margin-right-4 {
+  margin-right: 4px !important; }
+
+.margin-right-5 {
+  margin-right: 5px !important; }
+
+.margin-right-10 {
+  margin-right: 10px !important; }
+
+.margin-right-15 {
+  margin-right: 15px !important; }
+
+.margin-right-20 {
+  margin-right: 20px !important; }
+
+.margin-right-25 {
+  margin-right: 25px !important; }
+
+.margin-right-30 {
+  margin-right: 30px !important; }
+
+.margin-right-40 {
+  margin-right: 40px !important; }
+
+.margin-right-50 {
+  margin-right: 50px !important; }
+
+.margin-right-60 {
+  margin-right: 60px !important; }
+
+.margin-right-70 {
+  margin-right: 70px !important; }
+
+.margin-right-80 {
+  margin-right: 80px !important; }
+
+.margin-right-90 {
+  margin-right: 90px !important; }
+
+.margin-right-100 {
+  margin-right: 100px !important; }
+
+.margin-right-200 {
+  margin-right: 200px !important; }
+
+/* ------------------------- */
+/* Negative margins/paddings */
+/* ------------------------- */
+/* e.g: margin-top-minus-10, padding-top-minus-10 */
+.margin-top-minus-2 {
+  margin-top: -2px !important; }
+
+.margin-top-minus-3 {
+  margin-top: -3px !important; }
+
+.margin-top-minus-4 {
+  margin-top: -4px !important; }
+
+.margin-top-minus-5 {
+  margin-top: -5px !important; }
+
+.margin-top-minus-10 {
+  margin-top: -10px !important; }
+
+.margin-top-minus-15 {
+  margin-top: -15px !important; }
+
+.margin-top-minus-20 {
+  margin-top: -20px !important; }
+
+.margin-top-minus-25 {
+  margin-top: -25px !important; }
+
+.margin-top-minus-30 {
+  margin-top: -30px !important; }
+
+.margin-top-minus-40 {
+  margin-top: -40px !important; }
+
+.margin-top-minus-50 {
+  margin-top: -50px !important; }
+
+.margin-top-minus-60 {
+  margin-top: -60px !important; }
+
+.margin-top-minus-70 {
+  margin-top: -70px !important; }
+
+.margin-top-minus-80 {
+  margin-top: -80px !important; }
+
+.margin-top-minus-90 {
+  margin-top: -90px !important; }
+
+.margin-top-minus-100 {
+  margin-top: -100px !important; }
+
+.margin-top-minus-200 {
+  margin-top: -200px !important; }
+
+/* e.g: margin-bottom-minus-10, padding-bottom-minus-10 */
+.margin-bottom-minus-2 {
+  margin-bottom: -2px !important; }
+
+.margin-bottom-minus-3 {
+  margin-bottom: -3px !important; }
+
+.margin-bottom-minus-4 {
+  margin-bottom: -4px !important; }
+
+.margin-bottom-minus-5 {
+  margin-bottom: -5px !important; }
+
+.margin-bottom-minus-10 {
+  margin-bottom: -10px !important; }
+
+.margin-bottom-minus-15 {
+  margin-bottom: -15px !important; }
+
+.margin-bottom-minus-20 {
+  margin-bottom: -20px !important; }
+
+.margin-bottom-minus-25 {
+  margin-bottom: -25px !important; }
+
+.margin-bottom-minus-30 {
+  margin-bottom: -30px !important; }
+
+.margin-bottom-minus-40 {
+  margin-bottom: -40px !important; }
+
+.margin-bottom-minus-50 {
+  margin-bottom: -50px !important; }
+
+.margin-bottom-minus-60 {
+  margin-bottom: -60px !important; }
+
+.margin-bottom-minus-70 {
+  margin-bottom: -70px !important; }
+
+.margin-bottom-minus-80 {
+  margin-bottom: -80px !important; }
+
+.margin-bottom-minus-90 {
+  margin-bottom: -90px !important; }
+
+.margin-bottom-minus-100 {
+  margin-bottom: -100px !important; }
+
+.margin-bottom-minus-200 {
+  margin-bottom: -200px !important; }
+
+/* e.g: margin-left-minus-10, padding-left-minus-10 */
+.margin-left-minus-2 {
+  margin-left: -2px !important; }
+
+.margin-left-minus-3 {
+  margin-left: -3px !important; }
+
+.margin-left-minus-4 {
+  margin-left: -4px !important; }
+
+.margin-left-minus-5 {
+  margin-left: -5px !important; }
+
+.margin-left-minus-10 {
+  margin-left: -10px !important; }
+
+.margin-left-minus-15 {
+  margin-left: -15px !important; }
+
+.margin-left-minus-20 {
+  margin-left: -20px !important; }
+
+.margin-left-minus-25 {
+  margin-left: -25px !important; }
+
+.margin-left-minus-30 {
+  margin-left: -30px !important; }
+
+.margin-left-minus-40 {
+  margin-left: -40px !important; }
+
+.margin-left-minus-50 {
+  margin-left: -50px !important; }
+
+.margin-left-minus-60 {
+  margin-left: -60px !important; }
+
+.margin-left-minus-70 {
+  margin-left: -70px !important; }
+
+.margin-left-minus-80 {
+  margin-left: -80px !important; }
+
+.margin-left-minus-90 {
+  margin-left: -90px !important; }
+
+.margin-left-minus-100 {
+  margin-left: -100px !important; }
+
+.margin-left-minus-200 {
+  margin-left: -200px !important; }
+
+/* e.g: margin-right-minus-10, padding-right-minus-10 */
+.margin-right-minus-2 {
+  margin-right: -2px !important; }
+
+.margin-right-minus-3 {
+  margin-right: -3px !important; }
+
+.margin-right-minus-4 {
+  margin-right: -4px !important; }
+
+.margin-right-minus-5 {
+  margin-right: -5px !important; }
+
+.margin-right-minus-10 {
+  margin-right: -10px !important; }
+
+.margin-right-minus-15 {
+  margin-right: -15px !important; }
+
+.margin-right-minus-20 {
+  margin-right: -20px !important; }
+
+.margin-right-minus-25 {
+  margin-right: -25px !important; }
+
+.margin-right-minus-30 {
+  margin-right: -30px !important; }
+
+.margin-right-minus-40 {
+  margin-right: -40px !important; }
+
+.margin-right-minus-50 {
+  margin-right: -50px !important; }
+
+.margin-right-minus-60 {
+  margin-right: -60px !important; }
+
+.margin-right-minus-70 {
+  margin-right: -70px !important; }
+
+.margin-right-minus-80 {
+  margin-right: -80px !important; }
+
+.margin-right-minus-90 {
+  margin-right: -90px !important; }
+
+.margin-right-minus-100 {
+  margin-right: -100px !important; }
+
+.margin-right-minus-200 {
+  margin-right: -200px !important; }
+
+/* e.g: margin-10, padding-10 */
+.padding-2 {
+  padding: 2px !important; }
+
+.padding-3 {
+  padding: 3px !important; }
+
+.padding-4 {
+  padding: 4px !important; }
+
+.padding-5 {
+  padding: 5px !important; }
+
+.padding-10 {
+  padding: 10px !important; }
+
+.padding-15 {
+  padding: 15px !important; }
+
+.padding-20 {
+  padding: 20px !important; }
+
+.padding-25 {
+  padding: 25px !important; }
+
+.padding-30 {
+  padding: 30px !important; }
+
+.padding-40 {
+  padding: 40px !important; }
+
+.padding-50 {
+  padding: 50px !important; }
+
+.padding-60 {
+  padding: 60px !important; }
+
+.padding-70 {
+  padding: 70px !important; }
+
+.padding-80 {
+  padding: 80px !important; }
+
+.padding-90 {
+  padding: 90px !important; }
+
+.padding-100 {
+  padding: 100px !important; }
+
+.padding-200 {
+  padding: 200px !important; }
+
+/* e.g: margin-top-10, padding-top-10 */
+.padding-top-2 {
+  padding-top: 2px !important; }
+
+.padding-top-3 {
+  padding-top: 3px !important; }
+
+.padding-top-4 {
+  padding-top: 4px !important; }
+
+.padding-top-5 {
+  padding-top: 5px !important; }
+
+.padding-top-10 {
+  padding-top: 10px !important; }
+
+.padding-top-15 {
+  padding-top: 15px !important; }
+
+.padding-top-20 {
+  padding-top: 20px !important; }
+
+.padding-top-25 {
+  padding-top: 25px !important; }
+
+.padding-top-30 {
+  padding-top: 30px !important; }
+
+.padding-top-40 {
+  padding-top: 40px !important; }
+
+.padding-top-50 {
+  padding-top: 50px !important; }
+
+.padding-top-60 {
+  padding-top: 60px !important; }
+
+.padding-top-70 {
+  padding-top: 70px !important; }
+
+.padding-top-80 {
+  padding-top: 80px !important; }
+
+.padding-top-90 {
+  padding-top: 90px !important; }
+
+.padding-top-100 {
+  padding-top: 100px !important; }
+
+.padding-top-200 {
+  padding-top: 200px !important; }
+
+/* e.g: margin-bottom-10, padding-bottom-10 */
+.padding-bottom-2 {
+  padding-bottom: 2px !important; }
+
+.padding-bottom-3 {
+  padding-bottom: 3px !important; }
+
+.padding-bottom-4 {
+  padding-bottom: 4px !important; }
+
+.padding-bottom-5 {
+  padding-bottom: 5px !important; }
+
+.padding-bottom-10 {
+  padding-bottom: 10px !important; }
+
+.padding-bottom-15 {
+  padding-bottom: 15px !important; }
+
+.padding-bottom-20 {
+  padding-bottom: 20px !important; }
+
+.padding-bottom-25 {
+  padding-bottom: 25px !important; }
+
+.padding-bottom-30 {
+  padding-bottom: 30px !important; }
+
+.padding-bottom-40 {
+  padding-bottom: 40px !important; }
+
+.padding-bottom-50 {
+  padding-bottom: 50px !important; }
+
+.padding-bottom-60 {
+  padding-bottom: 60px !important; }
+
+.padding-bottom-70 {
+  padding-bottom: 70px !important; }
+
+.padding-bottom-80 {
+  padding-bottom: 80px !important; }
+
+.padding-bottom-90 {
+  padding-bottom: 90px !important; }
+
+.padding-bottom-100 {
+  padding-bottom: 100px !important; }
+
+.padding-bottom-200 {
+  padding-bottom: 200px !important; }
+
+/* e.g: margin-left-10, padding-left-10 */
+.padding-left-2 {
+  padding-left: 2px !important; }
+
+.padding-left-3 {
+  padding-left: 3px !important; }
+
+.padding-left-4 {
+  padding-left: 4px !important; }
+
+.padding-left-5 {
+  padding-left: 5px !important; }
+
+.padding-left-10 {
+  padding-left: 10px !important; }
+
+.padding-left-15 {
+  padding-left: 15px !important; }
+
+.padding-left-20 {
+  padding-left: 20px !important; }
+
+.padding-left-25 {
+  padding-left: 25px !important; }
+
+.padding-left-30 {
+  padding-left: 30px !important; }
+
+.padding-left-40 {
+  padding-left: 40px !important; }
+
+.padding-left-50 {
+  padding-left: 50px !important; }
+
+.padding-left-60 {
+  padding-left: 60px !important; }
+
+.padding-left-70 {
+  padding-left: 70px !important; }
+
+.padding-left-80 {
+  padding-left: 80px !important; }
+
+.padding-left-90 {
+  padding-left: 90px !important; }
+
+.padding-left-100 {
+  padding-left: 100px !important; }
+
+.padding-left-200 {
+  padding-left: 200px !important; }
+
+/* e.g: margin-right-10, padding-right-10 */
+.padding-right-2 {
+  padding-right: 2px !important; }
+
+.padding-right-3 {
+  padding-right: 3px !important; }
+
+.padding-right-4 {
+  padding-right: 4px !important; }
+
+.padding-right-5 {
+  padding-right: 5px !important; }
+
+.padding-right-10 {
+  padding-right: 10px !important; }
+
+.padding-right-15 {
+  padding-right: 15px !important; }
+
+.padding-right-20 {
+  padding-right: 20px !important; }
+
+.padding-right-25 {
+  padding-right: 25px !important; }
+
+.padding-right-30 {
+  padding-right: 30px !important; }
+
+.padding-right-40 {
+  padding-right: 40px !important; }
+
+.padding-right-50 {
+  padding-right: 50px !important; }
+
+.padding-right-60 {
+  padding-right: 60px !important; }
+
+.padding-right-70 {
+  padding-right: 70px !important; }
+
+.padding-right-80 {
+  padding-right: 80px !important; }
+
+.padding-right-90 {
+  padding-right: 90px !important; }
+
+.padding-right-100 {
+  padding-right: 100px !important; }
+
+.padding-right-200 {
+  padding-right: 200px !important; }
+
+/* ------------------------- */
+/* Negative margins/paddings */
+/* ------------------------- */
+/* e.g: margin-top-minus-10, padding-top-minus-10 */
+.padding-top-minus-2 {
+  padding-top: -2px !important; }
+
+.padding-top-minus-3 {
+  padding-top: -3px !important; }
+
+.padding-top-minus-4 {
+  padding-top: -4px !important; }
+
+.padding-top-minus-5 {
+  padding-top: -5px !important; }
+
+.padding-top-minus-10 {
+  padding-top: -10px !important; }
+
+.padding-top-minus-15 {
+  padding-top: -15px !important; }
+
+.padding-top-minus-20 {
+  padding-top: -20px !important; }
+
+.padding-top-minus-25 {
+  padding-top: -25px !important; }
+
+.padding-top-minus-30 {
+  padding-top: -30px !important; }
+
+.padding-top-minus-40 {
+  padding-top: -40px !important; }
+
+.padding-top-minus-50 {
+  padding-top: -50px !important; }
+
+.padding-top-minus-60 {
+  padding-top: -60px !important; }
+
+.padding-top-minus-70 {
+  padding-top: -70px !important; }
+
+.padding-top-minus-80 {
+  padding-top: -80px !important; }
+
+.padding-top-minus-90 {
+  padding-top: -90px !important; }
+
+.padding-top-minus-100 {
+  padding-top: -100px !important; }
+
+.padding-top-minus-200 {
+  padding-top: -200px !important; }
+
+/* e.g: margin-bottom-minus-10, padding-bottom-minus-10 */
+.padding-bottom-minus-2 {
+  padding-bottom: -2px !important; }
+
+.padding-bottom-minus-3 {
+  padding-bottom: -3px !important; }
+
+.padding-bottom-minus-4 {
+  padding-bottom: -4px !important; }
+
+.padding-bottom-minus-5 {
+  padding-bottom: -5px !important; }
+
+.padding-bottom-minus-10 {
+  padding-bottom: -10px !important; }
+
+.padding-bottom-minus-15 {
+  padding-bottom: -15px !important; }
+
+.padding-bottom-minus-20 {
+  padding-bottom: -20px !important; }
+
+.padding-bottom-minus-25 {
+  padding-bottom: -25px !important; }
+
+.padding-bottom-minus-30 {
+  padding-bottom: -30px !important; }
+
+.padding-bottom-minus-40 {
+  padding-bottom: -40px !important; }
+
+.padding-bottom-minus-50 {
+  padding-bottom: -50px !important; }
+
+.padding-bottom-minus-60 {
+  padding-bottom: -60px !important; }
+
+.padding-bottom-minus-70 {
+  padding-bottom: -70px !important; }
+
+.padding-bottom-minus-80 {
+  padding-bottom: -80px !important; }
+
+.padding-bottom-minus-90 {
+  padding-bottom: -90px !important; }
+
+.padding-bottom-minus-100 {
+  padding-bottom: -100px !important; }
+
+.padding-bottom-minus-200 {
+  padding-bottom: -200px !important; }
+
+/* e.g: margin-left-minus-10, padding-left-minus-10 */
+.padding-left-minus-2 {
+  padding-left: -2px !important; }
+
+.padding-left-minus-3 {
+  padding-left: -3px !important; }
+
+.padding-left-minus-4 {
+  padding-left: -4px !important; }
+
+.padding-left-minus-5 {
+  padding-left: -5px !important; }
+
+.padding-left-minus-10 {
+  padding-left: -10px !important; }
+
+.padding-left-minus-15 {
+  padding-left: -15px !important; }
+
+.padding-left-minus-20 {
+  padding-left: -20px !important; }
+
+.padding-left-minus-25 {
+  padding-left: -25px !important; }
+
+.padding-left-minus-30 {
+  padding-left: -30px !important; }
+
+.padding-left-minus-40 {
+  padding-left: -40px !important; }
+
+.padding-left-minus-50 {
+  padding-left: -50px !important; }
+
+.padding-left-minus-60 {
+  padding-left: -60px !important; }
+
+.padding-left-minus-70 {
+  padding-left: -70px !important; }
+
+.padding-left-minus-80 {
+  padding-left: -80px !important; }
+
+.padding-left-minus-90 {
+  padding-left: -90px !important; }
+
+.padding-left-minus-100 {
+  padding-left: -100px !important; }
+
+.padding-left-minus-200 {
+  padding-left: -200px !important; }
+
+/* e.g: margin-right-minus-10, padding-right-minus-10 */
+.padding-right-minus-2 {
+  padding-right: -2px !important; }
+
+.padding-right-minus-3 {
+  padding-right: -3px !important; }
+
+.padding-right-minus-4 {
+  padding-right: -4px !important; }
+
+.padding-right-minus-5 {
+  padding-right: -5px !important; }
+
+.padding-right-minus-10 {
+  padding-right: -10px !important; }
+
+.padding-right-minus-15 {
+  padding-right: -15px !important; }
+
+.padding-right-minus-20 {
+  padding-right: -20px !important; }
+
+.padding-right-minus-25 {
+  padding-right: -25px !important; }
+
+.padding-right-minus-30 {
+  padding-right: -30px !important; }
+
+.padding-right-minus-40 {
+  padding-right: -40px !important; }
+
+.padding-right-minus-50 {
+  padding-right: -50px !important; }
+
+.padding-right-minus-60 {
+  padding-right: -60px !important; }
+
+.padding-right-minus-70 {
+  padding-right: -70px !important; }
+
+.padding-right-minus-80 {
+  padding-right: -80px !important; }
+
+.padding-right-minus-90 {
+  padding-right: -90px !important; }
+
+.padding-right-minus-100 {
+  padding-right: -100px !important; }
+
+.padding-right-minus-200 {
+  padding-right: -200px !important; }
+
+/*  To align text to Right / Left  */
+.text-align-center {
+  text-align: center !important; }
+
+.text-align-left {
+  text-align: left !important; }
+
+.text-align-right {
+  text-align: right !important; }
+
+/* text styles */
+.text-color-red {
+  color: darkred; }
+
+.text-color-blue {
+  color: #24a9e1; }
+
+.text-color-dark-grey {
+  color: #4b4b4b; }
+
+.text-color-gray {
+  color: #898989; }
+
+.text-color-dark-gray {
+  color: #4b4b4b; }
+
+.text-color-light-grey {
+  color: #999999; }
+
+.text-color-white {
+  color: #FFF; }
+
+.text-color-green {
+  color: green; }
+
+.font-size-10 {
+  font-size: 10px !important; }
+
+.font-size-11 {
+  font-size: 11px !important; }
+
+.font-size-12 {
+  font-size: 12px !important; }
+
+.font-size-13 {
+  font-size: 13px !important; }
+
+.font-size-14 {
+  font-size: 14px !important; }
+
+.font-size-15 {
+  font-size: 15px !important; }
+
+.font-size-16 {
+  font-size: 16px !important; }
+
+.font-size-18 {
+  font-size: 18px !important; }
+
+.font-size-20 {
+  font-size: 20px !important; }
+
+.font-size-22 {
+  font-size: 22px !important; }
+
+.font-size-24 {
+  font-size: 24px !important; }
+
+.line-height-10 {
+  line-height: 10px !important; }
+
+.line-height-20 {
+  line-height: 20px !important; }
+
+.line-height-30 {
+  line-height: 30px !important; }
+
+.line-height-40 {
+  line-height: 40px !important; }