<div id="fil-page" class="fil-page">
<div class="fil-container">
<div class="fil-demo-note">
<h2>C18.1 Top mega tabs (e.g. Fund facts/ fund story) </h2>
</div>
</div>
<!--#include virtual="/include/teamsite_component_begin.html" -->
<section class="au-section tabs-section">
<div class="tabs fil-tabs huge-tabs">
<ul class="fil-tabs-nav" id="myTab" role="tablist">
<li id="tab-item-one" class="nav-item tab-item current">
<a class="tab-link active " id="first-tab" data-toggle="tab" href="#first" role="tab" aria-controls="first" aria-expanded="true" onfocus="this.blur();">
<div class="tabs-icon icon-circle left">
<span class="icon-chart circle-icon"></span>
</div>
<div class="tabs-title-caption">
<h3 class="h3 post-head"><strong>Fund Facts</strong></h3>
<p>Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.</p>
</div>
</a>
</li>
<li id="tab-item-two" class="nav-item tab-item">
<a class="tab-link" id="second-tab" data-toggle="tab" href="#second" role="tab" aria-controls="second" aria-expanded="false" onfocus="this.blur();">
<div class="tabs-icon icon-circle left">
<span class="icon-factsheet-full circle-icon"></span>
</div>
<div class="tabs-title-caption">
<h3 class="h3 post-head"><strong>Fund Story</strong></h3>
<p>Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.</p>
</div>
</a>
</li>
</ul>
</div>
<div class="tab-content fil-tab-content" id="myTabContent">
<div role="tabpanel" class="tab-pane fade in active" id="first" aria-labelledby="first-tab" aria-expanded="false">
<div class="fil-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis tellus augue. Nulla volutpat semper quam, sit amet cursus lacus. Nam aliquam eros a lectus convallis commodo.
</p>
<p>Etiam sodales placerat quam vel mollis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam tempor, nibh nec vehicula rutrum, ipsum est luctus mauris, eu pharetra dolor arcu sed sem. Quisque at tellus vel orci vehicula laoreet. Quisque finibus rhoncus lectus id porttitor.
</p>
</div>
</div>
<div class="tab-pane fade" id="second" role="tabpanel" aria-labelledby="second-tab" aria-expanded="true">
<div class="fil-container">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. </p>
<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
</div>
</div>
</div>
</section>
<!--#include virtual="/include/teamsite_component_end.html" -->
</div>
<script src="/static/js/lib/jquery.js"></script>
<script src="/static/js/lib/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn-dm-grid").click(function(){
$("#fil-dm-grid").toggle();
});
});
$(document).ready(function(){
$("#second-tab").click(function(){
//$(this).parent().parent().toggleClass('current');
$(this).parent().css('borderBottom','none');
});
});
</script>
.fil-demo-note{
margin: 0;
padding: 0;
padding-top: 20px;
}
.fil-demo-note h2{
margin-bottom: 0;
}
.fil-tabs{
position: relative;
padding-top: 30px;
}
.fil-tabs ul{
/* -webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-padding-start: 15px;
-webkit-padding-end: 15px; */
list-style: none;
padding-left: 15px;
padding-right: 15px;
max-width: 75rem;
margin: 0 auto;
}
.fil-tabs-nav{
max-width: 75rem;
margin: 0 auto;
}
.tabs::before, .tabs::after {
content: ' ';
display: table;
}
.tabs::after {
clear: both;
}
.fil-tabs::after {
content: "";
display: table;
clear: both;
}
.tabs .tab-link .h4{
margin-bottom: 0;
}
.tab-link {
display: inline-block;
}
.tab-link:focus,
.tab-link:hover {
text-decoration: none;
}
.fil-tabs .tab-link {
display: block;
color: #244a67;
padding: 10px 12px;
/* border: 1px solid #999; */
border-top: 5px solid transparent;
}
.fil-tabs .tab-link.active{
}
.fil-tabs a,
.fil-tabs a h4{
color: #244a67;
}
.fil-tabs a,
.fil-tabs a h4{
color: #244a67;
}
.fil-tabs a.tab-link.active,
.fil-tabs a.tab-link.active h4{
color: #333;
}
.fil-tabs .tab-link h4{
margin-bottom: 0;
}
.tabs .tab-link .ub-head{
margin-bottom: 0;
color:red;
}
.fil-tabs .tab-link:hover {
background-color: #f6f6f6;
}
.fil-tabs .tab-link.active,
.fil-tabs .tab-link.active:focus {
border-top: 5px solid #B22029;;
}
.fil-tabs .tab-item{
margin-bottom: 20px;
border: 1px solid #999;
}
.fil-tabs .tab-item:last-child{
margin-bottom: 0;
}
.fil-tabs .tab-item.open .tab-link,
.fil-tabs .tab-item.open .tab-link:focus,
.fil-tabs .tab-item.open .tab-link:hover,
.fil-tabs .tab-link.active,
.fil-tabs .tab-link.active:focus,
.fil-tabs .tab-link.active:hover {
color: #333;
background-color: #fff;
}
.fil-tabs .tab-item.current .tab-link,
.fil-tabs .tab-item.current .tab-link:focus,
.fil-tabs .tab-item.current .tab-link:hover{
color: #333;
background-color: #fff;
}
.fil-tab-content{
padding-top: 30px;
}
.tab-content>.tab-pane {
display: none;
}
.tab-content>.active {
display: block;
}
.fade {
opacity: 0;
-webkit-transition: opacity .15s linear;
-o-transition: opacity .15s linear;
transition: opacity .15s linear;
}
.fade.in {
opacity: 1;
}
.fil-tabs-cont{
position: absolute;
width: 100%;
margin-top: -1px;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
@media only screen and (min-width: 64em){
.fil-tabs {
border-bottom: 1px solid #999;
}
.fil-tabs .tab-item {
float: left;
margin-bottom: -1px;
}
.fil-tabs .tab-item:last-child {
margin-bottom: -1px;
}
.fil-tabs .tab-item:last-child {
margin-bottom: -1px;
}
.fil-tabs .tab-link {
/* display: block; */
padding: 10px 30px;
/* border: 1px solid #999; */
border-bottom: none;
}
.fil-tabs .tab-item {
border: 1px solid #999;
}
.fil-tabs .nav-item.tab-item.open {
border-bottom: none;
}
.fil-tabs .nav-item.tab-item.current{
border-bottom: none;
}
.fil-tabs .tab-item{
border-right: none;
}
.fil-tabs .tab-item:first-child{
border-right: none;
}
.fil-tabs .tab-item:last-child{
border-right: 1px solid #999;
}
.fil-tabs .tab-item:first-child .tab-link{
border-right: none;
}
.fil-tabs .tab-item:last-child .tab-link{
border-left: none;
}
.fil-tab-content{
padding-top: 40px;
}
}
/*huge-tabs*/
.fil-tabs.huge-tabs{
}
.fil-tabs.huge-tabs .tab-item{
width: 100%;
}
.fil-tabs .tabs-icon{
width: 50px;
height: 50px;
border: 1px solid #244a67;
border-radius: 50%;
color: #244a67;
text-align: center;
vertical-align: middle;
}
.fil-tabs.huge-tabs .tab-link {
padding: 12px 12px 20px 12px;
}
.fil-tabs.huge-tabs .tabs-icon.left{
margin-right: 12px;
}
.fil-tabs.huge-tabs .tabs-icon.left ~ .tabs-title-caption{
margin-left: 12px;
padding-left: 50px;
}
.fil-tabs .tab-link.active .tabs-icon{
border: 1px solid #666;
}
.fil-tabs .tab-link.active .circle-icon{
color: #666;
}
.fil-tabs .tabs-icon .circle-icon{
display:block;
font-size: 30px;
margin-top: 8px;
}
.fil-tabs .tabs-title:before: {
content: ' ';
display: table;
}
.fil-tabs .tabs-title:after{
clear: both;
}
.fil-tabs .tabs-icon.left{
float: left;
}
.fil-tabs .tabs-title{
float: none;
display: table-cell;
border: 1px solid transparent;
vertical-align: top;
}
.fil-tabs a,
.fil-tabs a h3{
color: #244a67;
}
.fil-tabs a,
.fil-tabs a h3{
color: #244a67;
}
.fil-tabs a.tab-link.active,
.fil-tabs a.tab-link.active h3{
color: #333;
}
@media only screen and (min-width: 40em){
.fil-tabs .tabs-icon{
width: 80px;
height: 80px;
border: 2px solid #244a67;
border-radius: 50%;
color: #244a67;
text-align: center;
vertical-align: middle;
}
.fil-tabs .tab-link.active .tabs-icon{
border: 2px solid #666;
}
.fil-tabs .tab-link.active .circle-icon{
color: #666;
}
.fil-tabs .tabs-icon .circle-icon{
display:block;
font-size: 48px;
margin-top: 14px;
}
.fil-tabs.huge-tabs .tab-link {
padding: 18px 30px 20px 30px;
}
.fil-tabs.huge-tabs .tabs-icon.left{
margin-right: 20px;
}
.fil-tabs.huge-tabs .tabs-icon.left ~ .tabs-title-caption{
margin-left: 20px;
padding-left: 80px;
}
}
@media only screen and (min-width: 64em){
.fil-tabs.huge-tabs .tab-item{
width: 50%;
}
.fil-tabs .tabs-icon{
width: 92px;
height: 92px;
border-radius: 50%;
}
.fil-tabs .tabs-icon .circle-icon{
display:block;
font-size: 56px;
margin-top: 14px;
}
.fil-tabs.huge-tabs .tabs-icon.left ~ .tabs-title-caption{
margin-left: 20px;
padding-left: 92px;
}
.fil-tabs a.tab-link.active:after{
content:'';
display: table;
height: 1px;
background-color: red;
}
}