/**
 * RD2 Framework v0.1
 *
 * Description: The RD2 Framework is used to assist in the Front-End Development process.
 *
 * This stylesheet uses the Idiomatic CSS guidelines. https://github.com/necolas/idiomatic-css
 */

/* ==========================================================================
   Global Layout Structure :: Fluid/Responsive Layout
   ========================================================================== */

/**
 * Column layout for responsive websites.
 *
 * This creates a wrapper element that tells all next child siblings to
 * be browsed horizontally within their parent.
 *
 * Example HTML:
 *
 * <div id="content" role="main" class="rd2-layout-fluid rd2-cols-2">
 *     <div></div>
 *     <div></div>
 * </div>
 *
 * Note: You can specify column spans as well.
 *
 * <div id="content" role="main" class="rd2-layout-fluid rd2-cols-4">
 *     <div class="rd2-span-3"></div>
 *     <div></div>
 * </div>
 *
 */

/**
 * Parent container must contain 2 types of classes
 * Must container .rd2-layout-fluid and the column number .rd2-cols-2
 */

/* Parent container and default values
   ========================================================================== */

.rd2-layout-fluid {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.rd2-layout-fluid > * {
    float: left;
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.rd2-layout-fluid:before,
.rd2-layout-fluid:after {
  display: table;
  line-height: 0;
  content: "";
}
.rd2-layout-fluid:after {
  clear: both;
}
.rd2-layout-fluid > * {
    margin-right: 2.5%;
}
.rd2-cols-2 > .rd2-span-2,
.rd2-cols-3 > .rd2-span-3,
.rd2-cols-4 > .rd2-span-4,
.rd2-cols-5 > .rd2-span-5,
.rd2-cols-6 > .rd2-span-6,
.rd2-cols-7 > .rd2-span-7,
.rd2-cols-8 > .rd2-span-8 {
    width: 100%;
}

/* Condensed Layout Overrides */
.rd2-layout-fluid.rd2-layout-fluid-condensed > * {
    margin-right: 0;
}

/* 1 column (aka stacked)
   ========================================================================== */

.rd2-layout-fluid.rd2-cols-1 > * {
    width: 100%;
    margin-right: 0;
}

/* 2 column layout
   ========================================================================== */

.rd2-layout-fluid.rd2-cols-2 > * {
    width: 48.75%;
}
.rd2-cols-2 > *:nth-child(even) {
    margin-right: 0;
}

/* Condensed Layout Overrides */
.rd2-layout-fluid-condensed.rd2-cols-2 > * {
    width: 50%;
}

/* 3 column layout
   ========================================================================== */

.rd2-layout-fluid.rd2-cols-3 > * {
    width: 31.66666666666667%;
}
.rd2-cols-3 > *:nth-child(3n) {
    margin-right: 0;
}
.rd2-cols-3 > .rd2-span-2 {
    width: 65.8333333333333%;
}

/* Condensed Layout Overrides */
.rd2-layout-fluid-condensed.rd2-cols-3 > * {
    width: 33.3333333333%;
}
.rd2-layout-fluid-condensed.rd2-cols-3 > .rd2-span-2 {
    width: 66.666666666%;
}

/* 4 column layout
   ========================================================================== */

.rd2-layout-fluid.rd2-cols-4 > * {
    width: 23.125%;
}
.rd2-cols-4 > *:nth-child(4n) {
    margin-right: 0;
}
.rd2-cols-4 > .rd2-span-2 {
    width: 48.75%;
}
.rd2-cols-4 > .rd2-span-3 {
    width: 74.375%;
}

/* Condensed Layout Overrides */
.rd2-layout-fluid-condensed.rd2-cols-4 > * {
    width: 25%;
}
.rd2-layout-fluid-condensed.rd2-cols-4 > .rd2-span-2 {
    width: 50%;
}
.rd2-layout-fluid-condensed.rd2-cols-4 > .rd2-span-3 {
    width: 75%;
}

/* 5 column layout
   ========================================================================== */

.rd2-layout-fluid.rd2-cols-5 > * {
    width: 18%;
}
.rd2-cols-5 > *:nth-child(5n) {
    margin-right: 0;
}
.rd2-cols-5 > .rd2-span-4 {
    width: 79.5%
}
.rd2-cols-5 > .rd2-span-3 {
    width: 59%
}
.rd2-cols-5 > .rd2-span-2 {
    width: 38.5%
}

/* Condensed Layout Overrides */
.rd2-layout-fluid-condensed.rd2-cols-5 > * {
    width: 20%;
}
.rd2-layout-fluid-condensed.rd2-cols-5 > .rd2-span-4 {
    width: 80%
}
.rd2-layout-fluid-condensed.rd2-cols-5 > .rd2-span-3 {
    width: 60%
}
.rd2-layout-fluid-condensed.rd2-cols-5 > .rd2-span-2 {
    width: 40%
}

/* 6 column layout
   ========================================================================== */

.rd2-layout-fluid.rd2-cols-6 > * {
    width: 14.58333333333333%;
}
.rd2-cols-6 > *:nth-child(6n) {
    margin-right: 0;
}
.rd2-cols-6 > .rd2-span-5 {
    width: 82.916666666666667%;
}
.rd2-cols-6 > .rd2-span-4 {
    width: 65.83333333333334%;
}
.rd2-cols-6 > .rd2-span-3 {
    width: 48.75000000000001%;
}
.rd2-cols-6 > .rd2-span-2 {
    width: 31.66666666666668%;
}
.rd2-layout-fluid > *:last-child {
    margin-right: 0 !important;
}

/* Condensed Layout Overrides */
.rd2-layout-fluid-condensed.rd2-cols-6 > * {
    width: 16.6666666667%;
}
.rd2-layout-fluid-condensed.rd2-cols-6 > .rd2-span-5 {
    width: 83.3333333333%;
}
.rd2-layout-fluid-condensed.rd2-cols-6 > .rd2-span-4 {
    width: 66.66666666666667%;
}
.rd2-layout-fluid-condensed.rd2-cols-6 > .rd2-span-3 {
    width: 50%;
}
.rd2-layout-fluid-condensed.rd2-cols-6 > .rd2-span-2 {
    width: 33.33333333333333%;
}

/* 7 column layout
   ========================================================================== */

.rd2-layout-fluid.rd2-cols-7 > * {
    width: 12.142857142857143%;
}
.rd2-cols-7 > *:nth-child(7n) {
    margin-right: 0;
}
.rd2-cols-7 > .rd2-span-6 {
    width: 85.357142857142858%;
}
.rd2-cols-7 > .rd2-span-5 {
    width: 70.714285714285715%;
}
.rd2-cols-7 > .rd2-span-4 {
    width: 56.071428571428572%;
}
.rd2-cols-7 > .rd2-span-3 {
    width: 41.428571428571429%;
}
.rd2-cols-7 > .rd2-span-2 {
    width: 26.785714285714286%;
}
.rd2-layout-fluid > *:last-child {
    margin-right: 0 !important;
}

/* Condensed Layout Overrides */
.rd2-layout-fluid-condensed.rd2-cols-7 > * {
    width: 14.285714285714286%;
}
.rd2-layout-fluid-condensed.rd2-cols-7 > .rd2-span-6 {
    width: 85.714285714285716%;
}
.rd2-layout-fluid-condensed.rd2-cols-7 > .rd2-span-5 {
    width: 71.42857142857143%;
}
.rd2-layout-fluid-condensed.rd2-cols-7 > .rd2-span-4 {
    width: 57.142857142857144%;
}
.rd2-layout-fluid-condensed.rd2-cols-7 > .rd2-span-3 {
    width: 42.857142857142858%;
}
.rd2-layout-fluid-condensed.rd2-cols-7 > .rd2-span-2 {
    width: 28.571428571428572%;
}

/* 8 column layout
   ========================================================================== */

.rd2-layout-fluid.rd2-cols-8 > * {
    width: 10.3125%;
}
.rd2-cols-8 > *:nth-child(8n) {
    margin-right: 0;
}
.rd2-cols-8 > .rd2-span-7 {
    width: 87.1875%;
}
.rd2-cols-8 > .rd2-span-6 {
    width: 74.375%;
}
.rd2-cols-8 > .rd2-span-5 {
    width: 61.5625%;
}
.rd2-cols-8 > .rd2-span-4 {
    width: 48.75%;
}
.rd2-cols-8 > .rd2-span-3 {
    width: 35.9375%;
}
.rd2-cols-8 > .rd2-span-2 {
    width: 23.125%;
}
.rd2-layout-fluid > *:last-child {
    margin-right: 0 !important;
}

/* Condensed Layout Overrides */
.rd2-layout-fluid-condensed.rd2-cols-8 > * {
    width: 12.5%;
}
.rd2-layout-fluid-condensed.rd2-cols-8 > .rd2-span-7 {
    width: 87.5%;
}
.rd2-layout-fluid-condensed.rd2-cols-8 > .rd2-span-6 {
    width: 75%;
}
.rd2-layout-fluid-condensed.rd2-cols-8 > .rd2-span-5 {
    width: 62.5%;
}
.rd2-layout-fluid-condensed.rd2-cols-8 > .rd2-span-4 {
    width: 50%;
}
.rd2-layout-fluid-condensed.rd2-cols-8 > .rd2-span-3 {
    width: 37.5%;
}
.rd2-layout-fluid-condensed.rd2-cols-8 > .rd2-span-2 {
    width: 25%;
}

/* ==========================================================================
   CSS Helpers
   ========================================================================== */

.rd2-rounded-5 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
}
.rd2-rounded-5-5-0-0 {
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
}
.rd2-rounded-0-0-5-5 {
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    overflow: hidden;
}
.rd2-rounded-0-5-5-0 {
    -webkit-border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    overflow: hidden;
}
.rd2-rounded-10 {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
}
.rd2-shadow-outer-below {
    -webkit-box-shadow: 0 1px 5px -2px #333333;
    -moz-box-shadow: 0 1px 5px -2px #333333;
    box-shadow: 0 1px 5px -2px #333333;
}
.rd2-shadow-outer {
    -webkit-box-shadow: 0 0 4px 0px #333333;
    -moz-box-shadow: 0 0 4px 0px #333333;
    box-shadow: 0 0 4px 0px #333333;
}
.rd2-shadow-inner {
    -webkit-box-shadow: inset 0 0 4px 0px #333333;
    -moz-box-shadow: inset 0 0 4px 0px #333333;
    box-shadow: inset 0 0 4px 0px #333333;
}
.rd2-shadow-inner-below {
    -webkit-box-shadow: inset 0 -1px 4px -1px #333333;
    -moz-box-shadow: inset 0 -1px 4px -1px #333333;
    box-shadow: inset 0 -1px 4px -1px #333333;
}
.rd2-no-line-height {
    line-height: 0;
}
.rd2-no-margin {
    margin: 0;
}
.rd2-no-padding {
    padding: 0;
}
.rd2-padding-10 {
    padding: 10px;
}
.rd2-padding-15 {
    padding: 15px;
}

/* ==========================================================================
   Layout Helpers
   ========================================================================== */

.rd2-float-left {
    float: left;
}
.rd2-float-right {
    float: right;
}
.rd2-display-block {
    display: block;
}
.rd2-display-inline-block {
    display: inline-block;
}
.rd2-display-inline {
    display: inline;
}
.rd2-container-align-center {
    margin-left: auto;
    margin-right: auto;
}
.rd2-absolute-bottom {
    position: absolute;
    bottom:0;
    left:0;
}
.rd2-absolute-right {
    position: absolute;
    right:0;
    top:0;
}
.rd2-absolute-left {
    position: absolute;
    left:0;
    top:0;
}
.rd2-hide {
    display: none;
}
.rd2-show {
    display: block;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/* Emphasis Colors
   ========================================================================== */

.rd2-color-muted {
    color: #999;
}
.rd2-color-warning {
    color: #ffaa00;
}
.rd2-color-error {
    color: #fd4a4a;
}
.rd2-color-success {
    color: #18b21b;
}

/* Typography Helpers
   ========================================================================== */

.rd2-text-align-right {
    text-align: right;
}
.rd2-text-align-left {
    text-align: left;
}
.rd2-text-align-center {
    text-align: center;
}
.rd2-text-transform-uppercase {
    text-transform: uppercase;
}

/* ==========================================================================
   Clearfix Helper
   ========================================================================== */

.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}
.clearfix:after {
  clear: both;
}

.hidden {
    display: none;
}