Changing the color on my tabbed left bootstrap3 tabs

Question

I am using bootstrap 3, and I cannot figure out how to change the color on my tabs. Something in my css is making my inactive tabs entirely white in the regular state, and nothing I do will override it.

I am using this suggestion: tab-left

to get my tabs to be on the left since it's not native anymore. But if I use this, nothing I do allows me to change my tab colors in any states.

My code:

<div class="container">
  <div class="normal">
    <h2 style="text-align: center;">PRODUCTS + SERVICES</h2>
      <div class="tabbable tabs-left">
        <ul id="myTab" class="nav nav-tabs color">
          <li class="active"><a href="#data" data-toggle="tab">DATA MANAGEMENT<br>
            + ANALYTICS</a></li>
          <li><a href="#software" data-toggle="tab">CARE MANAGEMENT<br>SOFTWARE</a></li>
          <li><a href="#callcenter" data-toggle="tab">CARE<br>COORDINATION<br>+ NURSING<br>CALL CENTER</a></li>
          <li><a href="#financing" data-toggle="tab">FINANCING,<br>RISK POOLING<br>+ REINSURANCE</a></li>
          <li><a href="#contracting" data-toggle="tab">CONTRACTING</a></li>
          <li><a href="#admin" data-toggle="tab">ADMINISTRATION</a></li>
        </ul>
        <div id="myTabContent" class="tab-content">

          <div class="tab-pane fade in active" id="data">
            <p>TITLE</p>
        <p>copy copy</p>
          </div>

          <div class="tab-pane fade" id="software">
            <p>copy copy</p>
          </div>

          <div class="tab-pane fade" id="callcenter">
            <p>copy copy</p>
          </div>

          <div class="tab-pane fade" id="financing">
            <p>copy copy</p>
          </div>

          <div class="tab-pane fade" id="contracting">
            <p>copy copy</p>
          </div>

          <div class="tab-pane fade" id="admin">
            <p>copy copy</p> 
          </div>

        </div>

      </div>         <!--end of TABS-->

  </div>  <!--end of normal-->
</div>  

The CSS (I do understand this is a lot of duplication, but I wanted to show everything I've tried so far)

.tabs-left {
  .nav-tabs {
    border-bottom: 0;
  }


.tab-content > .tab-pane,{
  display: none;
}

.tab-content > .active,{
  display: block;
}

.tabs-left, .tabs-right
  > .nav-tabs > li {
    float: none;
  }
.tabs-left, .tabs-right
  > .nav-tabs > li> a {
      min-width: 74px;
      margin-right: 0;
      margin-bottom: 3px;
    }

.tabs-left > .nav-tabs {
  float: left;
  margin-right: 19px;
  border-right: 1px solid #ddd;
}

> li > a, a:hover, a:focus {
    margin-right: -1px;
    -webkit-border-radius: 4px 0 0 4px;
       -moz-border-radius: 4px 0 0 4px;
            border-radius: 4px 0 0 4px;
      border-color: #dddddd;
    }

  > .active a, a:hover, a:focus {
      border-color: #ddd transparent #ddd #ddd;
      *border-right-color: #fff;
    }
.tabs-left > .nav-tabs > li.active > a, a:hover, a:focus {
    background-color: #1a92c1;
    color: #ffffff;
    curser: default;
    border: none;
}

.tabs-left > .nav-tabs > li > a {
    color: #555555;
    curser: default;
    border-color: #ddd transparent #ddd #ddd;
    *border-right-color: #fff;

}

.tabs-left > .nav-tabs > li > a:hover, a:focus {
    color: #555555;
    background-color: #eeeeee;
    curser: default;
    border-color: #ddd transparent #ddd #ddd;
    *border-right-color: #fff;
}

.color .active a, 
.color .active a:hover,
.color .active a:focus {
        background-color: #1a92c1 !important;
    color: #ffffff !important;
    curser: default !important;
    border: none !important;
}

.color a {
    color: #555555 !important;
    border-color: #ddd transparent #ddd #ddd !important;
    *border-right-color: #fff !important;
}

.color a:hover, a:focus {
    color: #555555 !important;
    background-color: #eeeeee !important;
    border-color: #ddd transparent #ddd #ddd !important;
    *border-right-color: #fff !important;
}

I will take any and all suggestions- I'm really at a loss here. Thanks!

Answer 1

So here is the error

.tabs-left {  <--- extra brace -->
  .nav-tabs {
    border-bottom: 0;
  }

Make it

.tabs-left .nav-tabs {
    border-bottom: 0;
  }

Demo

Here on bootply with original thing