<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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 id="wrapper" class="active"> <!-- Sidebar --> <!-- Sidebar --> <div id="sidebar-wrapper"> <ul id="sidebar_menu" class="sidebar-nav"> <li class="sidebar-brand"><a id="menu-toggle" href="#">Menu<span id="main_icon" class="glyphicon glyphicon-align-justify"></span></a></li> </ul> <ul class="sidebar-nav" id="sidebar"> <li><a>Link1<span class="sub_icon glyphicon glyphicon-link"></span></a></li> <li><a>link2<span class="sub_icon glyphicon glyphicon-link"></span></a></li> </ul> </div> <!-- Page content --> <div id="page-content-wrapper"> <!-- Keep all page content within the page-content inset div! --> <div class="page-content inset"> <div class="row"> <div class="col-md-12"> <nav class="navbar navbar-default" style="background:#011329;margin-bottom:0px;"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <!--- Added inline styling to remove default padding-top and padding-top from navbar-brand --> <div class="navbar-brand" style="padding-top:0px; padding-right:0px;"> <a href="#" class="navbar-brand"> <img src="images/logo_fm_white_2x.png" style="display:inline; width: 150px;"> </a> </div> <span class="navbar-brand" href="#">| Multifamily Disclosure</a> </div> <form class="navbar-form" role="search"> <div class="navbar-form"> <div class="input-group col-lg-8" id="adv-search"> <input type="text" class="form-control" placeholder="Search for Pool, CUSIP, or Trust" /> <div class="input-group-btn"> <div class="btn-group " role="group" id="advancedSearch"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span></button> <ul class="dropdown-menu dropdown-menu-right advanced-search-menu"> <table style="border-collapse:collapse;" id="advancedSearchForm"> <tr class="profilecardstats-statLabel"> <td>Prefix</td> <Td>Subtype</td> </tr> <tr> <td> <input id="prefix" class="form-control input-sm" placeholder="ex. HY" type="text"></td> <td><input id="prefix" class="form-control input-sm" placeholder="ex. DUS" type="text"> </td> </tr> <tr class="profilecardstats-statLabel"> <td>Status</td> </tr> <tr> <td><div class="btn-group" data-toggle="buttons"> <button class="btn btn-xs btn-default active"> <input type="checkbox" autocomplete="off" checked> Active </button> <button class="btn btn-xs btn-default"> <input type="checkbox" autocomplete="off"> Terminated </button></td> </tr> <tr class="profilecardstats-statLabel" cell-span="2"> <td>Security Type:</td> </tr> <tr> <td colspan="2"> <div class="btn-group" data-toggle="buttons"> <button class="btn btn-xs btn-default active"> <input type="checkbox" autocomplete="off" checked> Fixed-Rate MBS </button> <button class="btn btn-xs btn-default"> <input type="checkbox" autocomplete="off"> Adjustable-Rate MBS </button> <button class="btn btn-xs btn-default"> <input type="checkbox" autocomplete="off"> DMBS </button> </td> </tr> <tr class="profilecardstats-statLabel"> <td>Issue Date</td> <Td>Maturity Date</td> </tr> <tr> <td> <div class="input-group col-lg-8"> <input type="text" class="form-control input-sm" placeholder="yyyy" aria-describedby="sizing-addon3"> <span class="input-group-addon" id="sizing-addon3">to</i></span> <input type="text" class="form-control input-sm" placeholder="yyyy" aria-describedby="sizing-addon3"> </div> </td> <td> <div class="input-group col-lg-8"> <input type="text" class="form-control input-sm" placeholder="yyyy" aria-describedby="sizing-addon3"> <span class="input-group-addon" id="sizing-addon3">to</i></span> <input type="text" class="form-control input-sm" placeholder="yyyy" aria-describedby="sizing-addon3"> </div> </td> </tr> <tr class="profilecardstats-statLabel"> <td>Current PTR</td> <Td>Issuance UPB</td> <Td>Factor</td> </tr> <tr> <td> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Equals <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Greater Than</a></li> <li><a href="#">Less Than</a></li> </ul> </div><!-- /btn-group --> <input type="text" class="form-control input-sm" aria-label="..."> </div><!-- /input-group --> </td> <td> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Equals <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Greater Than</a></li> <li><a href="#">Less Than</a></li> </ul> </div><!-- /btn-group --> <input type="text" class="form-control input-sm" aria-label="..."> </div><!-- /input-group --> </td> <td> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Equals <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Greater Than</a></li> <li><a href="#">Less Than</a></li> </ul> </div><!-- /btn-group --> <input type="text" class="form-control input-sm" aria-label="..."> </div><!-- /input-group --> </td> </tr> <tr class="profilecardstats-statLabel"> <td>Loan Seller</td> <Td>Servicer</td> </tr> <tr> <td> <input id="prefix" class="form-control input-sm" placeholder="ex. HY" type="text"></td> <td><input id="prefix" class="form-control input-sm" placeholder="ex. DUS" type="text"> </td> </tr> <tr class="profilecardstats-statLabel"> <td>State</td> <Td>MSA</td> </tr> <tr class="profilecardstats-statLabel"> <td>State</td> <Td>MSA</td> </tr> <tr class="profilecardstats-statLabel"> <td>Include Pools:</td> </tr> <tr> <td colspan="2"> <form> <textarea class="form-control" rows="3" placeholder="Paste CUSIPs here."></textarea> </form> </td> </tr> </table> <li> <button class="btn btn-primary" style=margin-top:10px;"><i class="fa fa-search"></i></button> </li> </ul> </div><!-- /btn-group --> </div><!-- /input-group --> <ul class="nav navbar-nav navbar-right"> <li class="dropdown" style="padding-right:4px"> <button class="btn btn-default dropdown-toggle btn-sm" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="fa fa-cubes"></i> Resources <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#"><i class="fa fa-cube text-muted"></i> Product Information</a></li> <li><a href="#"><i class="fa fa-university text-muted"></i> Learning Center</a></li> <li><a href="#"><i class="fa fa-cloud-download text-muted"></i> Data Collections</a></li> </ul> </li> <li class="dropdown" style="padding-right:4px;"> <button class="btn btn-default dropdown-toggle btn-sm" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="fa fa-bell"></i> Notifications <span class="badge">2</span> <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" style="width:300px; padding:10px; font-size:11px;"> <li class="panel" style="border-right:solid 3px #337ab7;"> <div class="media-left" > <i class="fa fa-flag text-danger fa-lg"></i> </div> <div class="media-body"> <span>FN 466610 experienced a delinquency increase</span> <p class="text-muted">2 minutes ago</p> </div> </li> <li class="panel" style="border-right:solid 3px #337ab7;"> <div class="media-left"> <i class="fa fa-money text-success fa-lg"></i> </div> <div class="media-body"> <span>FN 466611 experienced a deal paydown</span> <p class="text-muted">1 hour ago</p> </div> </li> <li class="panel"> <div class="media-left"> <i class="fa fa-hourglass-end fa-lg"></i> </div> <div class="media-body"> <span>FN 466612 is Open for Repayment</span> <p class="text-muted">Yesterday</p> </div> </li> </ul> </li> <li class="dropdown" style="padding-right:4px;"> <button class="btn btn-sm btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="fa fa-user"></i> John Doe <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#"><i class="fa fa-user text-muted"></i> Profile</a> <li><a href="#"><i class="fa fa-sign-out text-muted"></i> Sign Out</a> </li> </ul> </li> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <!-- start search profile bar --> <div class="container"> <div class="navbar navbar-default"> <div class="col-md-5 col-sm-5" id="action-nav"> <ul> <li class="dropdown"> <button class="btn btn-lg btn-link dropdown-toggle nav-btn" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> User Search 1 <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li class="dropdown-header text-uppercase">Saved Lists</li> <li><a href="#">User Search 1</a> <li><a href="#">User Search 2</a> </li> <li><a href="#">User Search 3</a> </li> <li role="separator" class="divider"></li> <li><a href="#"><i class="fa fa-refresh"></i> Start new search</a> </ul> </li> <li> <button type="button" class="btn btn-link btn-sm" data-toggle="modal" data-target="#editSearch"> <i class="fa fa-filter"></i> Change Filters </button> <!-- Delete Modal --> <div class="modal fade" id="editSearch" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Update User Search 1</h4> </div> <div class="modal-body"> <ul> <li> <table style="border-collapse:collapse;" id="advancedSearchForm"> <tr class="profilecardstats-statLabel"> <td>Prefix</td> <Td>Subtype</td> </tr> <tr> <td> <input id="prefix" class="form-control input-sm" placeholder="ex. HY" type="text"></td> <td><input id="prefix" class="form-control input-sm" placeholder="ex. DUS" type="text"> </td> </tr> <tr class="profilecardstats-statLabel"> <td>Status</td> </tr> <tr> <td><div class="btn-group" data-toggle="buttons"> <button class="btn btn-xs btn-default active"> <input type="checkbox" autocomplete="off" checked> Active </button> <button class="btn btn-xs btn-default"> <input type="checkbox" autocomplete="off"> Terminated </button></td> </tr> <tr class="profilecardstats-statLabel" cell-span="2"> <td>Security Type:</td> </tr> <tr> <td colspan="2"> <div class="btn-group" data-toggle="buttons"> <button class="btn btn-xs btn-default active"> <input type="checkbox" autocomplete="off" checked> Fixed-Rate MBS </button> <button class="btn btn-xs btn-default"> <input type="checkbox" autocomplete="off"> Adjustable-Rate MBS </button> <button class="btn btn-xs btn-default"> <input type="checkbox" autocomplete="off"> DMBS </button> </td> </tr> <tr class="profilecardstats-statLabel"> <td>Issue Date</td> <Td>Maturity Date</td> </tr> <tr> <td> <div class="input-group col-lg-8"> <input type="text" class="form-control input-sm" placeholder="yyyy" aria-describedby="sizing-addon3"> <span class="input-group-addon" id="sizing-addon3">to</i></span> <input type="text" class="form-control input-sm" placeholder="yyyy" aria-describedby="sizing-addon3"> </div> </td> <td> <div class="input-group col-lg-8"> <input type="text" class="form-control input-sm" placeholder="yyyy" aria-describedby="sizing-addon3"> <span class="input-group-addon" id="sizing-addon3">to</i></span> <input type="text" class="form-control input-sm" placeholder="yyyy" aria-describedby="sizing-addon3"> </div> </td> </tr> <tr class="profilecardstats-statLabel"> <td>Current PTR</td> <Td>Issuance UPB</td> <Td>Factor</td> </tr> <tr> <td> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Equals <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Greater Than</a></li> <li><a href="#">Less Than</a></li> </ul> </div><!-- /btn-group --> <input type="text" class="form-control input-sm" aria-label="..."> </div><!-- /input-group --> </td> <td> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Equals <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Greater Than</a></li> <li><a href="#">Less Than</a></li> </ul> </div><!-- /btn-group --> <input type="text" class="form-control input-sm" aria-label="..."> </div><!-- /input-group --> </td> <td> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Equals <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Greater Than</a></li> <li><a href="#">Less Than</a></li> </ul> </div><!-- /btn-group --> <input type="text" class="form-control input-sm" aria-label="..."> </div><!-- /input-group --> </td> </tr> <tr class="profilecardstats-statLabel"> <td>Loan Seller</td> <Td>Servicer</td> </tr> <tr> <td> <input id="prefix" class="form-control input-sm" placeholder="ex. HY" type="text"></td> <td><input id="prefix" class="form-control input-sm" placeholder="ex. DUS" type="text"> </td> </tr> <tr class="profilecardstats-statLabel"> <td>State</td> <Td>MSA</td> </tr> <tr class="profilecardstats-statLabel"> <td>State</td> <Td>MSA</td> </tr> <tr class="profilecardstats-statLabel"> <td>Include Pools:</td> </tr> <tr> <td colspan="2"> <form> <textarea class="form-control" rows="3" placeholder="Paste CUSIPs here."></textarea> </form> </td> </tr> </table> </li> </ul> </div> <div class="modal-footer"> <button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary" data-dismiss="modal">Update Search</button> </div> </div> </div> </div> </li> <li> <!-- Button trigger modal --> <button type="button" class="btn btn-link btn-sm" data-toggle="modal" data-target="#deletePrompt"> <i class="fa fa-trash"></i> Delete </button> <!-- Delete Modal --> <div class="modal fade" id="deletePrompt" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> <h3>Are you sure you want to delete this list?</h3> </div> <div class="modal-footer"> <button type="button" class="btn btn-link" data-dismiss="modal">Nevermind</button> <button type="button" class="btn btn-danger" data-dismiss="modal">Yes, Delete</button> </div> </div> </div> </div> </li> </li> </ul> </div> <div class="col-md-6 col-sm-6 pull-right"> <ul class="profilecardstats arrange"> <li class="arrange-sizeFit-right"> <span class="profilecardstats-statLabel">issuance upb</span> <span class="profilecardstats-statValue">100,000,000</span> </li> <li class="arrange-sizeFit-right"> <span class="profilecardstats-statLabel">current upb</span> <span class="profilecardstats-statValue">$80,000,000</span> </li> <li class="arrange-sizeFit-right"> <span class="profilecardstats-statLabel">loans</span> <span class="profilecardstats-statValue">200</span> </li> <li class="arrange-sizeFit-right"> <span class="profilecardstats-statLabel">pools</span> <span class="profilecardstats-statValue">150</span> </li> </ul> </div> </div> </div> </div> </div> <!-- end of search profile bar --> <!--start graphs --> <div class="container" id="parent"> <div class="row"> <div class="col-md-4"> <div class="dropdown"> <button class="btn btn-link btn-lg dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Choose a Strat <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li class="dropdown-header text-uppercase">Strat List</li> <li><a href="#">Amortization Type</a></li> <li><a href="#">Debt Yield</a></li> <li><a href="#">Delinquency Status</a></li> <li><a href="#">DSCR</a></li> <li><a href="#">Loan Rate</a></li> <li><a href="#">LTV</a></li> <li><a href="#">MSA</li> <li><a href="#">Origination Year</a></li> <li><a href="#">Originator</a></li> <li><a href="#">Prepayment Exposure</a></li> <li><a href="#">Prepayment Restriction</a></li> <li><a href="#">Rate Type</a></li> <li><a href="#">Region</a></li> <li><a href="#">Remaining Term</a></li> <li><a href="#">Seasoning</a></li> <li><a href="#">State</a></li> <li><a href="#">Year Built</a></li> <li><a href="#">All</a></li> </ul> </div> </div> <!-- end graphs --> <div class="col-md-4"> <!--start list info --> <table class="table"> <thead><h3 class="text-center">All Loans</h3></thead> <tr class="text-center text-success"> <td>$80,000,000</td> <td>200 Loans</tr> </table> <div> <!-- start weighted averages table --> <table class="table"> <thead class="profilecardstats-statLabel"> <td></td> <td>Weighted Averages</td> </thead> <tbody> <tr> <td class="profilecardstats-statLabel">Loan Rate</td> <td>5.71</td> </tr> <tr> <td class="profilecardstats-statLabel">Current DSCR</td> <td>1.36</td> </tr> <tr> <td class="profilecardstats-statLabel">Issuance DSCR</td> <td>1.39</td> </tr> <tr> <td class="profilecardstats-statLabel">LTV</td> <td>360</td> </tr> <tr> <td class="profilecardstats-statLabel">Current Occ</td> <td>90.06</td> </tr> <tr> <td class="profilecardstats-statLabel">Pass-Thru Rate</td> <td>4.089</td> </tr> </tbody> </table> </div> </div> <div class="col-md-4"> <!-- start alerts list --> <h3 class="text-center">Alerts</h3> <ol> <li class="pad-btm"> <span class="profilecardstats-statLabel">New Issuance </span> <div class="btn-group pull-right" data-toggle="buttons"> <span class="btn btn-default btn-group btn-xs active btn-success"> <input type="radio" name="options" id="option1" autocomplete="off" checked> ON </span> <span class="btn btn-group btn-default btn-xs"> <input type="radio" name="options" id="option2" autocomplete="off"> OFF </span> </div> </li> <li class="pad-btm"> <span class="profilecardstats-statLabel">Deal Paydown </span> <div class="btn-group pull-right" data-toggle="buttons"> <span class="btn btn-default btn-group btn-xs active btn-success"> <input type="radio" name="options" id="option1" autocomplete="off" checked> ON </span> <span class="btn btn-group btn-default btn-xs"> <input type="radio" name="options" id="option2" autocomplete="off"> OFF </span> </div> </li> <li class="pad-btm"> <span class="profilecardstats-statLabel">Open for Repayment </span> <div class="btn-group pull-right" data-toggle="buttons"> <span class="btn btn-default btn-group btn-xs active btn-success"> <input type="radio" name="options" id="option1" autocomplete="off" checked> ON </span> <span class="btn btn-group btn-default btn-xs"> <input type="radio" name="options" id="option2" autocomplete="off"> OFF </span> </div> </li> <li class="pad-btm"> <span class="profilecardstats-statLabel">Collateral Change </span> <div class="btn-group pull-right" data-toggle="buttons"> <span class="btn btn-default btn-group btn-xs active btn-success"> <input type="radio" name="options" id="option1" autocomplete="off" checked> ON </span> <span class="btn btn-group btn-default btn-xs"> <input type="radio" name="options" id="option2" autocomplete="off"> OFF </span> </div> </li> <li class="pad-btm"> <span class="profilecardstats-statLabel">Delinquency Increase </span> <div class="btn-group pull-right" data-toggle="buttons"> <span class="btn btn-default btn-group btn-xs active btn-success"> <input type="radio" name="options" id="option1" autocomplete="off" checked> ON </span> <span class="btn btn-group btn-default btn-xs"> <input type="radio" name="options" id="option2" autocomplete="off"> OFF </span> </div> <li class="pad-btm"> <span class="profilecardstats-statLabel">Material Corrections </span> <div class="btn-group pull-right" data-toggle="buttons"> <span class="btn btn-default btn-group btn-xs active btn-success"> <input type="radio" name="options" id="option1" autocomplete="off" checked> ON </span> <span class="btn btn-group btn-default btn-xs"> <input type="radio" name="options" id="option2" autocomplete="off"> OFF </span> </div> </li> </ol> </div> </div> </div> <hr> </div> <!-- end search profile --> <!-- start search results table--> <div class="container"> <div class="pad-btm"> <button class="btn btn-default btn-sm "><i class="fa fa-list"></i> Download Search Results</button> </div> <table class="col-lg-12"> <thead class="text-center"> <td class="profilecardstats-statLabel">Alerts</td> <td class="profilecardstats-statLabel ">Status</td> <td class="profilecardstats-statLabel">Pool Number</td> <td class="profilecardstats-statLabel">CUSIP</td> <td class="profilecardstats-statLabel">Pool Prefix</td> <td class="profilecardstats-statLabel">Issue Date</td> <td class="profilecardstats-statLabel">WA Note Rate</td> <td class="profilecardstats-statLabel">Current PTR</td> <td class="profilecardstats-statLabel">Documents</td> </thead> <tr> <td class="text-center"><button class="btn btn-link btn-sm"><i class="fa fa-bell"></i></button></td> <td class="text-center">Active</td> <td class="text-right"><a href="#">466610</a></td> <td class="text-right">3149SX94</td> <td class="text-center">HY</td> <td class="text-center">01/01/2014</td> <td class="text-right">5.755%</td> <td class="text-right">5.4190%</td> <td class="text-center"><i class="fa fa-cloud-download btn btn-link text-muted"></i></td> </tr> <tr> <td class="text-center"><button class="btn btn-link btn-sm"><i class="fa fa-bell"></i></button></td> <td class="text-center">Active</td> <td class="text-right"><a href="#">466610</a></td> <td class="text-right">3149SX94</td> <td class="text-center">HY</td> <td class="text-center">01/01/2014</td> <td class="text-right">5.755%</td> <td class="text-right">5.4190%</td> <td class="text-center"><i class="fa fa-cloud-download btn btn-link text-muted"></i></td> </tr> <tr> <td class="text-center"><button class="btn btn-link btn-sm"><i class="fa fa-bell"></i></button></td> <td class="text-center">Active</td> <td class="text-right"><a href="#">466610</a></td> <td class="text-right">3149SX94</td> <td class="text-center">HY</td> <td class="text-center">01/01/2014</td> <td class="text-right">5.755%</td> <td class="text-right">5.4190%</td> <td class="text-center"><i class="fa fa-cloud-download btn btn-link text-muted"></i></td> </tr> <tr> <td class="text-center"><button class="btn btn-link btn-sm"><i class="fa fa-bell"></i></button></td> <td class="text-center">Active</td> <td class="text-right"><a href="#">466610</a></td> <td class="text-right">3149SX94</td> <td class="text-center">HY</td> <td class="text-center">01/01/2014</td> <td class="text-right">5.755%</td> <td class="text-right">5.4190%</td> <td class="text-center"><i class="fa fa-cloud-download btn btn-link text-muted"></i></td> </tr> <tr> <td class="text-center"><button class="btn btn-link btn-sm"><i class="fa fa-bell"></i></button></td> <td class="text-center">Active</td> <td class="text-right"><a href="#">466610</a></td> <td class="text-right">3149SX94</td> <td class="text-center">HY</td> <td class="text-center">01/01/2014</td> <td class="text-right">5.755%</td> <td class="text-right">5.4190%</td> <td class="text-center"><i class="fa fa-cloud-download btn btn-link text-muted"></i></td> </tr> <tr> <td class="text-center"><button class="btn btn-link btn-sm"><i class="fa fa-bell"></i></button></td> <td class="text-center">Active</td> <td class="text-right"><a href="#">466610</a></td> <td class="text-right">3149SX94</td> <td class="text-center">HY</td> <td class="text-center">01/01/2014</td> <td class="text-right">5.755%</td> <td class="text-right">5.4190%</td> <td class="text-center"><i class="fa fa-cloud-download btn btn-link text-muted"></i></td> </tr> <tr> <td class="text-center"><button class="btn btn-link btn-sm"><i class="fa fa-bell"></i></button></td> <td class="text-center">Active</td> <td class="text-right"><a href="#">466610</a></td> <td class="text-right">3149SX94</td> <td class="text-center">HY</td> <td class="text-center">01/01/2014</td> <td class="text-right">5.755%</td> <td class="text-right">5.4190%</td> <td class="text-center"><i class="fa fa-cloud-download btn btn-link text-muted"></i></td> </tr> <tr> <td class="text-center"><button class="btn btn-link btn-sm"><i class="fa fa-bell"></i></button></td> <td class="text-center">Active</td> <td class="text-right"><a href="#">466610</a></td> <td class="text-right">3149SX94</td> <td class="text-center">HY</td> <td class="text-center">01/01/2014</td> <td class="text-right">5.755%</td> <td class="text-right">5.4190%</td> <td class="text-center"><i class="fa fa-cloud-download btn btn-link text-muted"></i></td> </tr> <tr> <td class="text-center"><button class="btn btn-link btn-sm"><i class="fa fa-bell"></i></button></td> <td class="text-center">Active</td> <td class="text-right"><a href="#">466610</a></td> <td class="text-right">3149SX94</td> <td class="text-center">HY</td> <td class="text-center">01/01/2014</td> <td class="text-right">5.755%</td> <td class="text-right">5.4190%</td> <td class="text-center"><i class="fa fa-cloud-download btn btn-link text-muted"></i></td> </tr> <tr> <td class="text-center"><button class="btn btn-link btn-sm"><i class="fa fa-bell"></i></button></td> <td class="text-center">Active</td> <td class="text-right"><a href="#">466610</a></td> <td class="text-right">3149SX94</td> <td class="text-center">HY</td> <td class="text-center">01/01/2014</td> <td class="text-right">5.755%</td> <td class="text-right">5.4190%</td> <td class="text-center"><i class="fa fa-cloud-download btn btn-link text-muted"></i></td> </tr> <tr> <td class="text-center"><button class="btn btn-link btn-sm"><i class="fa fa-bell"></i></button></td> <td class="text-center">Active</td> <td class="text-right"><a href="#">466610</a></td> <td class="text-right">3149SX94</td> <td class="text-center">HY</td> <td class="text-center">01/01/2014</td> <td class="text-right">5.755%</td> <td class="text-right">5.4190%</td> <td class="text-center"><i class="fa fa-cloud-download btn btn-link text-muted"></i></td> </tr> <tr> <td class="text-center"><button class="btn btn-link btn-sm"><i class="fa fa-bell"></i></button></td> <td class="text-center">Active</td> <td class="text-right"><a href="#">466610</a></td> <td class="text-right">3149SX94</td> <td class="text-center">HY</td> <td class="text-center">01/01/2014</td> <td class="text-right">5.755%</td> <td class="text-right">5.4190%</td> <td class="text-center"><i class="fa fa-cloud-download btn btn-link text-muted"></i></td> </tr> <tr> <td class="text-center"><button class="btn btn-link btn-sm"><i class="fa fa-bell"></i></button></td> <td class="text-center">Active</td> <td class="text-right"><a href="#">466610</a></td> <td class="text-right">3149SX94</td> <td class="text-center">HY</td> <td class="text-center">01/01/2014</td> <td class="text-right">5.755%</td> <td class="text-right">5.4190%</td> <td class="text-center"><i class="fa fa-cloud-download btn btn-link text-muted"></i></td> </tr> <tr> <td class="text-center"><button class="btn btn-link btn-sm"><i class="fa fa-bell"></i></button></td> <td class="text-center">Active</td> <td class="text-right"><a href="#">466610</a></td> <td class="text-right">3149SX94</td> <td class="text-center">HY</td> <td class="text-center">01/01/2014</td> <td class="text-right">5.755%</td> <td class="text-right">5.4190%</td> <td class="text-center"><i class="fa fa-cloud-download btn btn-link text-muted"></i></td> </tr> <tr> <td class="text-center"><button class="btn btn-link btn-sm"><i class="fa fa-bell"></i></button></td> <td class="text-center">Active</td> <td class="text-right"><a href="#">466610</a></td> <td class="text-right">3149SX94</td> <td class="text-center">HY</td> <td class="text-center">01/01/2014</td> <td class="text-right">5.755%</td> <td class="text-right">5.4190%</td> <td class="text-center"><i class="fa fa-cloud-download btn btn-link text-muted"></i></td> </tr> </table> <nav class="text-center clearfix"> <ul class="pagination" > <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true"><</span></a></li> <li class="active"><a href="#">1 <span class="sr-only"></span></a></li> <li class="disabled"><a href="#">2 <span class="sr-only"></span></a></li> <li class="disabled"><a href="#">3 <span class="sr-only"></span></a></li> <li class="disabled"><a href="#">4 <span class="sr-only"></span></a></li> <li class="disabled"><a href="#">5 <span class="sr-only"></span></a></li> <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">></span></a></li> </ul> </nav> </div> <!--end search results table--> <!--Start footer --> <nav class="navbar navbar-default" style="background:#011329; margin-bottom:0px;" style="margin-top:20px;"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <!--- Added inline styling to remove default padding-top and padding-top from navbar-brand --> <div class="navbar-brand" style="padding-top:0px; padding-right:0px;"> <a href="#" class="navbar-brand"> <img src="images/logo_fm_white_2x.png" style="display:inline; width: 150px;"> </a> </div> <span class="navbar-brand" href="#">| Multifamily Disclosure</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">Suppliers</a></li> <li><a href="#">Careers</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Legal</a></li> <li><a href="#">Privacy</a></li> </ul> <ul class="nav navbar-nav pull-right"> <li><a href="#"><i class="fa fa-facebook fa-2x"></i></a></li> <li><a href="#"><i class="fa fa-twitter fa-2x"></i></a></li> <li><a href="#"><i class="fa fa-linkedin fa-2x"></i></a></li> </ul> </div><!-- /.container-fluid --> </nav> </div> </div> </div> </div> </div>

.row{ margin-left:0px; margin-right:0px; } #wrapper { padding-left: 70px; transition: all .4s ease 0s; height: 100% } #sidebar-wrapper { margin-left: -150px; left: 70px; width: 150px; background: #222; position: fixed; height: 100%; z-index: 10000; transition: all .4s ease 0s; } .sidebar-nav { display: block; float: left; width: 150px; list-style: none; margin: 0; padding: 0; } #page-content-wrapper { padding-left: 0; margin-left: 0; width: 100%; height: auto; } #wrapper.active { padding-left: 150px; } #wrapper.active #sidebar-wrapper { left: 150px; } #page-content-wrapper { width: 100%; } #sidebar_menu li a, .sidebar-nav li a { color: #999; display: block; float: left; text-decoration: none; width: 150px; background: #252525; border-top: 1px solid #373737; border-bottom: 1px solid #1A1A1A; -webkit-transition: background .5s; -moz-transition: background .5s; -o-transition: background .5s; -ms-transition: background .5s; transition: background .5s; } .sidebar_name { padding-top: 25px; color: #fff; opacity: .7; } .sidebar-nav li { line-height: 40px; text-indent: 20px; } .sidebar-nav li a { color: #999999; display: block; text-decoration: none; } .sidebar-nav li a:hover { color: #fff; background: rgba(255,255,255,0.2); text-decoration: none; } .sidebar-nav li a:active, .sidebar-nav li a:focus { text-decoration: none; } .sidebar-nav > .sidebar-brand { height: 65px; line-height: 60px; font-size: 18px; } .sidebar-nav > .sidebar-brand a { color: #999999; } .sidebar-nav > .sidebar-brand a:hover { color: #fff; background: none; } #main_icon { float:right; padding-right: 65px; padding-top:20px; } .sub_icon { float:right; padding-right: 65px; padding-top:10px; } .content-header { height: 65px; line-height: 65px; } .content-header h1 { margin: 0; margin-left: 20px; line-height: 65px; display: inline-block; } @media (max-width:767px) { #wrapper { padding-left: 70px; transition: all .4s ease 0s; } #sidebar-wrapper { left: 70px; } #wrapper.active { padding-left: 150px; } #wrapper.active #sidebar-wrapper { left: 150px; width: 150px; transition: all .4s ease 0s; } }

$("#menu-toggle").click(function(e) { e.preventDefault(); $("#wrapper").toggleClass("active"); });