title: Changing the color on my tabbed left bootstrap3 tabs
body: <p>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.</p>
  
  <p>I am using this suggestion:
  <a href="https://stackoverflow.com/questions/18432577/stacked-tabs-in-bootstrap-3">tab-left</a></p>
  
  <p>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.</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="normal"&gt;
      &lt;h2 style="text-align: center;"&gt;PRODUCTS + SERVICES&lt;/h2&gt;
        &lt;div class="tabbable tabs-left"&gt;
          &lt;ul id="myTab" class="nav nav-tabs color"&gt;
            &lt;li class="active"&gt;&lt;a href="#data" data-toggle="tab"&gt;DATA MANAGEMENT&lt;br&gt;
              + ANALYTICS&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#software" data-toggle="tab"&gt;CARE MANAGEMENT&lt;br&gt;SOFTWARE&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#callcenter" data-toggle="tab"&gt;CARE&lt;br&gt;COORDINATION&lt;br&gt;+ NURSING&lt;br&gt;CALL CENTER&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#financing" data-toggle="tab"&gt;FINANCING,&lt;br&gt;RISK POOLING&lt;br&gt;+ REINSURANCE&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#contracting" data-toggle="tab"&gt;CONTRACTING&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#admin" data-toggle="tab"&gt;ADMINISTRATION&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div id="myTabContent" class="tab-content"&gt;
  
            &lt;div class="tab-pane fade in active" id="data"&gt;
              &lt;p&gt;TITLE&lt;/p&gt;
          &lt;p&gt;copy copy&lt;/p&gt;
            &lt;/div&gt;
  
            &lt;div class="tab-pane fade" id="software"&gt;
              &lt;p&gt;copy copy&lt;/p&gt;
            &lt;/div&gt;
  
            &lt;div class="tab-pane fade" id="callcenter"&gt;
              &lt;p&gt;copy copy&lt;/p&gt;
            &lt;/div&gt;
  
            &lt;div class="tab-pane fade" id="financing"&gt;
              &lt;p&gt;copy copy&lt;/p&gt;
            &lt;/div&gt;
  
            &lt;div class="tab-pane fade" id="contracting"&gt;
              &lt;p&gt;copy copy&lt;/p&gt;
            &lt;/div&gt;
  
            &lt;div class="tab-pane fade" id="admin"&gt;
              &lt;p&gt;copy copy&lt;/p&gt; 
            &lt;/div&gt;
  
          &lt;/div&gt;
  
        &lt;/div&gt;         &lt;!--end of TABS--&gt;
  
    &lt;/div&gt;  &lt;!--end of normal--&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>The CSS (I do understand this is a lot of duplication, but I wanted to show everything I've tried so far)</p>
  
  <pre><code>.tabs-left {
    .nav-tabs {
      border-bottom: 0;
    }
  
  
  .tab-content &gt; .tab-pane,{
    display: none;
  }
  
  .tab-content &gt; .active,{
    display: block;
  }
  
  .tabs-left, .tabs-right
    &gt; .nav-tabs &gt; li {
      float: none;
    }
  .tabs-left, .tabs-right
    &gt; .nav-tabs &gt; li&gt; a {
        min-width: 74px;
        margin-right: 0;
        margin-bottom: 3px;
      }
  
  .tabs-left &gt; .nav-tabs {
    float: left;
    margin-right: 19px;
    border-right: 1px solid #ddd;
  }
  
  &gt; li &gt; 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;
      }
  
    &gt; .active a, a:hover, a:focus {
        border-color: #ddd transparent #ddd #ddd;
        *border-right-color: #fff;
      }
  .tabs-left &gt; .nav-tabs &gt; li.active &gt; a, a:hover, a:focus {
      background-color: #1a92c1;
      color: #ffffff;
      curser: default;
      border: none;
  }
  
  .tabs-left &gt; .nav-tabs &gt; li &gt; a {
      color: #555555;
      curser: default;
      border-color: #ddd transparent #ddd #ddd;
      *border-right-color: #fff;
  
  }
  
  .tabs-left &gt; .nav-tabs &gt; li &gt; 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;
  }
  </code></pre>
  
  <p>I will take any and all suggestions- I'm really at a loss here. Thanks!</p>