<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-heading"> <span class="panel-title"> <div class="pull-left"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab"><i class="glyphicon glyphicon-print"></i> Letters</a></li> <li><a href="#tab2" data-toggle="tab"><i class="glyphicon glyphicon-send"></i> Email</a></li> </ul> </div> <div class="btn-group pull-right"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <i class="glyphicon glyphicon-cog"></i> Options </button> <ul class="dropdown-menu" style="width:300px; padding:0px;"> <li> <form class="form-horizontal" id="preferences" action="" method="post" accept-charset="utf-8"> <div class="panel panel-default" id="preferences" style="margin:0px;"> <div class="panel-heading"> <span class="glyphicon glyphicon-wrench"></span> <span class="panel-label">User Preferences</span> </div> <div class="panel-body"> <div class="form-group"> <label for="text_size" class="col-lg-6 control-label"> Display Label </label> <div class="col-lg-6"> <div class="btn-group" data-toggle="buttons" style="margin:0px padding:0px;"> <label class="btn btn-default toggle-button" style="pull-left margin:0px padding:0px; width:50%"> <input id="inlineradio1" name="display_label" type="radio" value=""> Show </label> <label class="btn btn-default toggle-button" style="pull-right margin:0px padding:0px; width:50%"> <input id="inlineradio2" name="display_label" type="radio" value="hide" > Hide </label> </div> </div> </div> </div> <div class="panel-footer"> <div class="form-group"> <div class="col-lg-9 col-lg-offset-3"> <button type="submit" class="btn btn-primary" style="width:80px;">Update</button> <button type="submit" class="btn btn-default" style="width:80px;">Reset</button> </div> </div> </div> </div> </form> </li> </ul> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <i class="glyphicon glyphicon-th-list"></i> Logs <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">01/01/2011</a></li> <li><a href="#">01/02/2011</a></li> <li><a href="#">01/03/2011</a></li> <li><a href="#">01/04/2011</a></li> <li><a href="#">01/05/2011</a></li> <li><a href="#">01/06/2011</a></li> </ul> </div> </div> <div class="clearfix"></div> </span> </div> <div class="panel-body"> <h3 class="page_header">Panel Content</h3> </div> </div> </div> </div> </div>

/********************************************************************/ /*** Remove Outlines ***/ a.btn {outline:1px !important; -webkit-appearance:none; text-decoration:none;} a.btn:active {outline:1px !important; -webkit-appearance:none; text-decoration:none;} a.btn:focus {outline:1px !important; -webkit-appearance:none; text-decoration:none;} ul.dropdown-menu li a:active {outline:1px !important; -webkit-appearance:none; text-decoration:none; } ul.dropdown-menu li a:focus {outline:1px !important; -webkit-appearance:none; text-decoration:none; } ul.nav-tabs li a:active {outline:1px !important; -webkit-appearance:none; text-decoration:none;} ul.nav-tabs li a:focus {outline:1px !important; -webkit-appearance:none; text-decoration:none;} /********************************************************************/ .container {margin-top: 30px;} .panel .panel-heading { padding: 5px 5px 0 5px;} .panel .nav-tabs {border-bottom: none;} .panel .nav-justified { margin-bottom: -1px; } div.btn-group.pull-right {margin-top: 3px;} .nav > li > a:hover, .nav > li > a, .nav > li > a:hover, .nav > li > a:active, .nav > li > a:hover, .nav > li > a:focus { solid #dddddd; color: #939393; background-color: #e8e8e8;} .nav > li > a:hover, .nav > li > a:hover { solid #dddddd; color: #555555;} div.btn-group.pull-right button.btn.btn-default {color: #555555; } .page_header {text-align:center; color: #008400;} .switch {padding-left: 525px;} .cmn-toggle { position: absolute; margin-left: -9999px; visibility: hidden; } .cmn-toggle + label { display: block; position: relative; cursor: pointer; outline: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } input.cmn-toggle-round-flat + label { padding: 2px; width: 75px; height: 30px; background-color: #dddddd; -webkit-border-radius: 60px; -moz-border-radius: 60px; -ms-border-radius: 60px; -o-border-radius: 60px; border-radius: 60px; -webkit-transition: background 0.4s; -moz-transition: background 0.4s; -o-transition: background 0.4s; transition: background 0.4s; } input.cmn-toggle-round-flat + label:before, input.cmn-toggle-round-flat + label:after { display: block; position: absolute; content: ""; } input.cmn-toggle-round-flat + label:before { top: 2px; left: 2px; bottom: 2px; right: 2px; background-color: #fff; -webkit-border-radius: 60px; -moz-border-radius: 60px; -ms-border-radius: 60px; -o-border-radius: 60px; border-radius: 60px; -webkit-transition: background 0.4s; -moz-transition: background 0.4s; -o-transition: background 0.4s; transition: background 0.4s; } input.cmn-toggle-round-flat + label:after { top: 4px; left: 4px; bottom: 4px; width: 22px; background-color: #dddddd; -webkit-border-radius: 52px; -moz-border-radius: 52px; -ms-border-radius: 52px; -o-border-radius: 52px; border-radius: 52px; -webkit-transition: margin 0.4s, background 0.4s; -moz-transition: margin 0.4s, background 0.4s; -o-transition: margin 0.4s, background 0.4s; transition: margin 0.4s, background 0.4s; } input.cmn-toggle-round-flat:checked + label { background-color: #27A1CA; } input.cmn-toggle-round-flat:checked + label:after { margin-left: 45px; background-color: #27A1CA; }