<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid" style="margin-top: 30px">
<div class="row-fluid">
<div id="myTabHolder" class="span10 offset1 tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="active">
<p class="tabx" data-target="#lA" data-toggle="tab">
<!-- <a href="#lA" data-toggle="tab"> -->
<span class="account-type">HSA</span><br/>
<span class="account-amount">$587.00</span><br/>
<!-- <span class="account-link">Investments</span> -->
<a href="#" class="account-link">Investments</a>
<!-- </a> -->
</p >
</li>
<li class="">
<a href="#lB" data-toggle="tab">
<span class="account-type">FSA</span><br/>
<span class="account-amount">$587.00</span><br/>
<span class="account-link">Investments</span>
</a>
</li>
<li class="">
<a href="#lC" data-toggle="tab">
<span class="account-type">HSAOD</span><br/>
<!--<span class="account-amount">$587.00</span><br/>-->
<!--<span class="account-link">Investments</span>-->
</a>
</li>
<li class="">
<a href="#lD" data-toggle="tab">
<span class="account-type">DCAP</span><br/>
<span class="account-amount">$587.00</span><br/>
<span class="account-link">Investments</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="lA">
<div>
<p>HSA account selected.</p>
</div>
</div>
<div class="tab-pane" id="lB">
<div>
<p>FSA account selected.</p>
</div>
</div>
<div class="tab-pane" id="lC">
<div>
<p>HSAOD account selected.</p>
</div>
</div>
<div class="tab-pane" id="lD">
<div>
<p>DCAP account selected.</p>
</div>
</div>
</div>
</div>
</div>
</div>
/** Import ROBOTO font **/
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900);
body
{
font-family: 'Roboto', sans-serif;
color: #B7C4CB;
background-color: #F7F9F9;
margin:0;
padding:0;
width: 100%;
height: 100%;
}
body > div {
margin-top: 10px;
}
.tabbable > .nav-tabs > li > p {
border: solid 1px transparent;
padding-top: 28px;
padding-bottom: 0px;
padding-left: 12px;
padding-right: 12px;
margin-right: -1px;
}
a, .account-link
{
color: #72B032;
}
.account-type
{
font-family: 'Roboto', sans-serif;
color: #A0AEB6;
font-size: 18px;
font-weight: bold;
line-height: 20px;
}
.account-amount
{
font-family: 'Roboto', sans-serif;
color: #A0AEB6;
font-size: 14px;
line-height: 16px;
}
.account-link
{
font-family: 'Roboto', sans-serif;
color: #72B032;
font-size: 14px;
line-height: 16px;
cursor: pointer;
}
/* TABS */
.tabs-left > .nav-tabs{
margin-right:0px;
padding: 0;
height: 700px; /* Debe ser el mismo height que el que tenga .tab-content */
}
/* CONTENIDO DE LOS TABS */
.tab-content {
background-color: #FFFFFF;
border:solid 1px #DCE1E5;
border-left-style: none;
height: 700px; /* Debe ser el mismo height que el que tenga .tabs-left > .nav-tabs */
padding-left: 50px;
border-radius: 0px 4px 4px 4px;
-moz-border-radius: 0px 4px 4px 4px;
-webkit-border-radius: 0px 4px 4px 4px;
-webkit-box-shadow: 0px 0px 18px 2px rgba(0,0,0,0.05);
-moz-box-shadow: 0px 0px 18px 2px rgba(0,0,0,0.05);
box-shadow: 0px 0px 18px 2px rgba(0,0,0,0.05);
}
.tab-content > div {
margin-top: 26px;
}
/* Color de los enlaces de los tabs */
.tabs-left > .nav-tabs > a {
color: #7FAD30;
}
/* Formato del primer elemento */
.tabs-left > .nav-tabs > li:nth-child(1) > a,
.tabs-left > .nav-tabs > li:nth-child(1) > a:hover,
.tabs-left > .nav-tabs > li:nth-child(1) > a:focus,
.tabs-left > .nav-tabs > li:nth-child(1) > .tabx,
.tabs-left > .nav-tabs > li:nth-child(1) > .tabx:hover,
.tabs-left > .nav-tabs > li:nth-child(1) > .tabx:focus
{
border-top-left-radius: 4px;
}
/* Formato del tab activo */
.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus,
.tabs-left > .nav-tabs .active .tabx,
.tabs-left > .nav-tabs .active .tabx:hover,
.tabs-left > .nav-tabs .active .tabx:focus
{
background-color: #FFFFFF;
border-bottom: 1px solid #DCE1E5;
border-left: 1px solid #DCE1E5;
border-bottom-left-radius: 0px;
border-right-style: none;
margin-right: -1px;
-webkit-box-shadow: -4px 0px 18px -1px rgba(0,0,0,0.05);
-moz-box-shadow: -4px 0px 18px -1px rgba(0,0,0,0.05);
box-shadow: -4px 0px 18px -1px rgba(0,0,0,0.05);
}
/* Formato de los tabs en general */
.tabs-left > .nav-tabs > li > a,
.tabs-left > .nav-tabs > li > .tabx {
margin-bottom: 0;
padding-bottom: 0;
padding-top: 2em;
min-height: 105px;
min-width: 105px;
border:solid 1px #DCE1E5;
border-radius: 0px;
}
