<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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">
<br/>
<div class="panel-group" role="tablist">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="collapseListGroupHeading1">
<h4 class="panel-title">
<a href="#collapseListGroup1" class="" role="button" data-toggle="collapse" aria-expanded="true" aria-controls="collapseListGroup1">Insured / Joint Insured</a>
</h4>
</div>
<div class="panel-collapse collapse in" role="tabpanel" id="collapseListGroup1" aria-labelledby="collapseListGroupHeading1" aria-expanded="true">
<ul class="list-group">
<li class="list-group-item">
<address>
<strong>Owner Code </strong>None, Insured<br>
<abbr title="Tax Identification Number">TIN:</abbr> 285-16-1723<br>
GEORGE S MALOOF<br>
1804 FARRS GARDEN PATH<br>
WESTLAKE, OH 44145-2068<br>
</address>
</li>
<li class="list-group-item">
<address>
<strong>Owner Code </strong>None, Insured<br>
<abbr title="Tax Identification Number">TIN:</abbr> 289-20-4981<br>
NORA M MALOOF<br>
1804 FARRS GARDEN PATH<br>
WESTLAKE, OH 44145-2068<br>
</address>
</li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="collapseListGroupHeading2">
<h4 class="panel-title">
<a href="#collapseListGroup2" class="" role="button" data-toggle="collapse" aria-expanded="true" aria-controls="collapseListGroup2">Owner(s)</a>
</h4>
</div>
<div class="panel-collapse collapse in" role="tabpanel" id="collapseListGroup2" aria-labelledby="collapseListGroupHeading2" aria-expanded="true">
<ul class="list-group">
<li class="list-group-item">
<address>
<strong>Owner Code </strong>Partial, Owner, non-COLI<br>
<abbr title="Tax Identification Number">TIN:</abbr> 288-42-3103<br>
FAYE JUDITH MALOOF-WOLF<br>
1804 FARRS GARDEN PATH<br>
WESTLAKE, OH 44145-2068<br>
</address>
</li>
<li class="list-group-item">
<address>
<strong>Owner Code </strong>Partial, Owner, non-COLI<br>
<abbr title="Tax Identification Number">TIN:</abbr> 278-22-7666<br>
THERESA J KRATUS<br>
20965 LAKE RD <br>
ROCKY RIVER, OH 44116-1339<br>
</address>
</li>
<li class="list-group-item">
<address>
<strong>Owner Code </strong>Partial, Owner, non-COLI<br>
<abbr title="Tax Identification Number">TIN:</abbr> 283-42-2248<br>
VIRGINIA M CASCARILLA<br>
25408 LAKE RD <br>
BAY VILLAGE, OH 44140-2623<br>
</address>
</li>
<li class="list-group-item">
<address>
<strong>Owner Code </strong>Partial, Owner, non-COLI<br>
<abbr title="Tax Identification Number">TIN:</abbr> 289-44-5612<br>
KIMBERLY G HAIKAL<br>
13882 LAKE AVE <br>
LAKEWOOD, OH 44107-1425<br>
</address>
</li>
</ul>
</div>
</div>
</div>
</div>
body,html{
height: 100%;
}
nav.sidebar, .main{
-webkit-transition: margin 200ms ease-out;
-moz-transition: margin 200ms ease-out;
-o-transition: margin 200ms ease-out;
transition: margin 200ms ease-out;
}
.main{
padding: 10px 10px 0 10px;
}
@media (min-width: 765px) {
.main{
position: absolute;
width: calc(100% - 40px);
margin-left: 40px;
float: right;
}
nav.sidebar:hover + .main{
margin-left: 200px;
}
nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
margin-left: 0px;
}
nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
text-align: center;
width: 100%;
margin-left: 0px;
}
nav.sidebar a{
padding-right: 13px;
}
nav.sidebar .navbar-nav > li:first-child{
border-top: 1px #e5e5e5 solid;
}
nav.sidebar .navbar-nav > li{
border-bottom: 1px #e5e5e5 solid;
}
nav.sidebar .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
padding: 0 0px 0 0px;
}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #777;
}
nav.sidebar{
width: 200px;
height: 100%;
margin-left: -160px;
float: left;
margin-bottom: 0px;
}
nav.sidebar li {
width: 100%;
}
nav.sidebar:hover{
margin-left: 0px;
}
.forAnimate{
opacity: 0;
}
}
@media (min-width: 1330px) {
.main{
width: calc(100% - 200px);
margin-left: 200px;
}
nav.sidebar{
margin-left: 0px;
float: left;
}
nav.sidebar .forAnimate{
opacity: 1;
}
}
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
color: #CCC;
background-color: transparent;
}
nav:hover .forAnimate{
opacity: 1;
}
section{
padding-left: 15px;
}