/*
SO Styles
=========

Styles avalaible when the SO.css is included.

*/
@color-1: #607998;
@color-2: #dfe4eb;
@color-3: #595959;
@white: #FFF;
@border-thickness: 1px;

/*
NS Field Breakout
=================

This is used to make NetSuite field-widt: 100%.

*/
.uir-outside-fields-table {
  width: 100%;
}

/*
The report class
================

Defines a table as a report.

  <table class="report ns-font">
      <thead>
      <tr class="header">
          <th class="" width="15%">Tier I</th>
          <th class="" width="15%">Mar 2015</th>
          <th class="" width="15%">Apr 2015</th>
          <th class="" width="15%">May 2015</th>
          <th class="" width="15%">Jun 2015</th>
      </tr>
      </thead>
      <tbody>
      <tr class="subtotal">
          <th class="" scope="row">Beginning Customers</th>
          <td class="" width="15%">449</td>
          <td class="" width="15%">441</td>
          <td class="" width="15%">673</td>
          <td class="" width="15%">433</td>
      <tr>
      <tr class="data">
          <th class="" scope="row">New</th>
          <td class="" width="15%">19</td>
          <td class="" width="15%">256</td>
          <td class="" width="15%">19</td>
          <td class="" width="15%">7</td>
      <tr>
      <tr class="data">
          <th class="" scope="row">Cancelled</th>
          <td class="" width="15%">18</td>
          <td class="" width="15%">27</td>
          <td class="" width="15%">24</td>
          <td class="" width="15%">259</td>
      <tr>
      <tr class="subtotal">
          <th class="" scope="row">Ending Customers</th>
          <td class="" width="15%">450</td>
          <td class="" width="15%">670</td>
          <td class="" width="15%">668</td>
          <td class="" width="15%">181</td>
      <tr>
      <tr class="total">
          <th class="" scope="row">Churn</th>
          <td class="" width="15%">4 %</td>
          <td class="" width="15%">6 %</td>
          <td class="" width="15%">4 %</td>
          <td class="" width="15%">60 %</td>
      <tr>
      </tbody>
  </table>

*/
table.report {
  border-style: solid;
  border-width: @border-thickness;
  border-color: @color-3;
  font-family: 'Open Sans';
  border-spacing: 0px;
  width: 100%;
  border-collapse: separate;
}

/*
The header Class
================

Defines the styling of th elements in a header row.

  <table class="report ns-font">
    <thead>
    <tr class="header">
        <th class="" width="15%">Tier I</th>
        <th class="" width="15%">Mar 2015</th>
        <th class="" width="15%">Apr 2015</th>
        <th class="" width="15%">May 2015</th>
        <th class="" width="15%">Jun 2015</th>
    </tr>
    </thead>
  </table>

*/
tr.header th {
  background-color: @color-1;
  color: @white;
  text-align: center;
}

/*
The data Class
==============

Defines the styling of th elements in a data row.

  <table class="report ns-font">
      <tbody>
      <tr class="data">
          <th class="" scope="row">Cancelled</th>
          <td class="" width="15%">18</td>
          <td class="" width="15%">27</td>
          <td class="" width="15%">24</td>
          <td class="" width="15%">259</td>
      <tr>
      </tbody>
  </table>

*/
tr.data td:not(:nth-last-child(-n+2)) {
  border-right: @border-thickness @color-3 dotted;
  text-align: center;
}

tr.data td:last-child {
  border-left: @border-thickness @color-3 dotted;
  text-align: center;
}

tr.data td:nth-child(2) {
  border-right: @border-thickness @color-3 dotted;
  text-align: center;
}

tr.data th {
  background-color: @white;
  border-right-style: solid;
  border-right-width: @border-thickness;
  border-right-color: @color-3;
  font-weight: 400;
}

tr.data td {
  text-align: center;
}

/*
The subtotal Class
==================

Defines the styling of th elements in a subtotal row.

  <table class="report ns-font">
      <tbody>
      <tr class="subtotal">
          <th class="" scope="row">Ending Customers</th>
          <td class="" width="15%">450</td>
          <td class="" width="15%">670</td>
          <td class="" width="15%">668</td>
          <td class="" width="15%">181</td>
      <tr>
      </tbody>
  </table>

*/
tr.subtotal td:not(:nth-last-child(-n+2)) {
  border-right: @border-thickness @color-3 dotted;
  text-align: center;
}

tr.subtotal td:last-child {
  border-left: @border-thickness @color-3 dotted;
  text-align: center;
}

tr.subtotal td:nth-child(2) {
  border-right: @border-thickness @color-3 dotted;
  text-align: center;
}

tr.subtotal th {
  background-color: @white;
  font-weight: bold;
  border-right-style: solid;
  border-right-width: @border-thickness;
  border-right-color: @color-3;
}

tr.subtotal td {
  text-align: center;
}

tr.subtotal {
  font-weight: bold;
}

/*
The total class
===============

Defines the styling of th elements in a total row.

  <table class="report ns-font">
      <tbody>
      <tr class="total">
          <th class="" scope="row">Churn</th>
          <td class="" width="15%">4 %</td>
          <td class="" width="15%">6 %</td>
          <td class="" width="15%">4 %</td>
          <td class="" width="15%">60 %</td>
      <tr>
      </tbody>
  </table>

*/
tr.total {
  font-weight: bold;
}

tr.total td:not(:nth-last-child(-n+2)) {
  border-right: @border-thickness @color-3 dotted;
  text-align: center;
}

tr.total td:last-child {
  border-left: @border-thickness @color-3 dotted;
  text-align: center;
}

tr.total td:nth-child(2) {
  border-right: @border-thickness @color-3 dotted;
  text-align: center;
}

tr.total th {
  background-color: @color-2;
  border-right: @border-thickness @color-3 solid;
  border-top: @border-thickness @color-3 solid;
  font-weight: bold;
}

tr.total td {
  background-color: @color-2;
  text-align: center;
  border-top: @border-thickness @color-3 solid;
}

/*
The text classes
================

Makes whatever it's applied to have various properties.

    <div class="normal">Normal</div>
    <div class="bold">Bold</div>
    <div class="bolder">Bolder</div>

*/
.normal {
  font-weight: 400;
}

.bold {
  font-weight: 600;
}

.bolder {
  font-weight: 700;
}

.ns-font {
  font-family: 'Open Sans';
}

/*
The color classes
=================

Makes whatever it's applied to have various color properties.

    <div class="foreground-color-1">Color 1</div>
    <div class="foreground-color-2">Color 2</div>
    <div class="foreground-color-3">Color 3</div>
    <div class="background-color-1">Color 1</div>
    <div class="background-color-2">Color 2</div>
    <div class="background-color-3">Color 3</div>

*/
.foreground-color-1 {
  color: @color-1;
}

.foreground-color-2 {
  color: @color-2;
}

.foreground-color-3 {
  color: @color-3;
}

.background-color-1 {
  background-color: @color-1;
}

.background-color-2 {
  background-color: @color-2;
}

.background-color-3 {
  background-color: @color-3;
}