/
var
/
www
/
barefootlaw.org
/
bios2
/
manager
/
Upload File
HOME
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!--<link rel="shortcut icon" href="../images/favicon.png" type="image/png">--> <title>Quirk Responsive Admin Templates</title> <link rel="stylesheet" href="../lib/fontawesome/css/font-awesome.css"> <link rel="stylesheet" href="../lib/weather-icons/css/weather-icons.css"> <link rel="stylesheet" href="../lib/jquery-toggles/toggles-full.css"> <link rel="stylesheet" href="../lib/select2/select2.css"> <link href="../css/quirk.css" rel="stylesheet"> <script src="../lib/modernizr/modernizr.js"></script> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="../lib/html5shiv/html5shiv.js"></script> <script src="../lib/respond/respond.src.js"></script> <![endif]--> </head> <body> <header> <div class="headerpanel"> <div class="logopanel"> <h2><a href="index.php">Quirk</a></h2> </div><!-- logopanel --> <div class="headerbar"> <a id="menuToggle" class="menutoggle"><i class="fa fa-bars"></i></a> <div class="searchpanel"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button> </span> </div><!-- input-group --> </div> <div class="header-right"> <ul class="headermenu"> <li> <div id="noticePanel" class="btn-group"> <button class="btn btn-notice alert-notice" data-toggle="dropdown"> <i class="fa fa-globe"></i> </button> <div id="noticeDropdown" class="dropdown-menu dm-notice pull-right"> <div role="tabpanel"> <!-- Nav tabs --> <ul class="nav nav-tabs nav-justified" role="tablist"> <li class="active"><a data-target="#notification" data-toggle="tab">Notifications (2)</a></li> <li><a data-target="#reminders" data-toggle="tab">Reminders (4)</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="notification"> <ul class="list-group notice-list"> <li class="list-group-item unread"> <div class="row"> <div class="col-xs-2"> <i class="fa fa-envelope"></i> </div> <div class="col-xs-10"> <h5><a href="">New message from Weno Carasbong</a></h5> <small>June 20, 2015</small> <span>Soluta nobis est eligendi optio cumque...</span> </div> </div> </li> <li class="list-group-item unread"> <div class="row"> <div class="col-xs-2"> <i class="fa fa-user"></i> </div> <div class="col-xs-10"> <h5><a href="">Renov Leonga is now following you!</a></h5> <small>June 18, 2015</small> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <i class="fa fa-user"></i> </div> <div class="col-xs-10"> <h5><a href="">Zaham Sindil is now following you!</a></h5> <small>June 17, 2015</small> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <i class="fa fa-thumbs-up"></i> </div> <div class="col-xs-10"> <h5><a href="">Rey Reslaba likes your post!</a></h5> <small>June 16, 2015</small> <span>HTML5 For Beginners Chapter 1</span> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <i class="fa fa-comment"></i> </div> <div class="col-xs-10"> <h5><a href="">Socrates commented on your post!</a></h5> <small>June 16, 2015</small> <span>Temporibus autem et aut officiis debitis...</span> </div> </div> </li> </ul> <a class="btn-more" href="">View More Notifications <i class="fa fa-long-arrow-right"></i></a> </div><!-- tab-pane --> <div role="tabpanel" class="tab-pane" id="reminders"> <h1 id="todayDay" class="today-day">...</h1> <h3 id="todayDate" class="today-date">...</h3> <h5 class="today-weather"><i class="wi wi-hail"></i> Cloudy 77 Degree</h5> <p>Thunderstorm in the area this afternoon through this evening</p> <h4 class="panel-title">Upcoming Events</h4> <ul class="list-group"> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <h4>20</h4> <p>Aug</p> </div> <div class="col-xs-10"> <h5><a href="">HTML5/CSS3 Live! United States</a></h5> <small>San Francisco, CA</small> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <h4>05</h4> <p>Sep</p> </div> <div class="col-xs-10"> <h5><a href="">Web Technology Summit</a></h5> <small>Sydney, Australia</small> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <h4>25</h4> <p>Sep</p> </div> <div class="col-xs-10"> <h5><a href="">HTML5 Developer Conference 2015</a></h5> <small>Los Angeles CA United States</small> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <h4>10</h4> <p>Oct</p> </div> <div class="col-xs-10"> <h5><a href="">AngularJS Conference 2015</a></h5> <small>Silicon Valley CA, United States</small> </div> </div> </li> </ul> <a class="btn-more" href="">View More Events <i class="fa fa-long-arrow-right"></i></a> </div> </div> </div> </div> </div> </li> <li> <div class="btn-group"> <button type="button" class="btn btn-logged" data-toggle="dropdown"> <img src="images/photos/loggeduser.png" alt="" /> Elen Adarna <span class="caret"></span> </button> <ul class="dropdown-menu pull-right"> <li><a href="profile.html"><i class="glyphicon glyphicon-user"></i> My Profile</a></li> <li><a href="#"><i class="glyphicon glyphicon-cog"></i> Account Settings</a></li> <li><a href="#"><i class="glyphicon glyphicon-question-sign"></i> Help</a></li> <li><a href="signin.php"><i class="glyphicon glyphicon-log-out"></i> Log Out</a></li> </ul> </div> </li> <li> <button id="chatview" class="btn btn-chat alert-notice"> <span class="badge-alert"></span> <i class="fa fa-comments-o"></i> </button> </li> </ul> </div><!-- header-right --> </div><!-- headerbar --> </div><!-- header--> </header> <section> <div class="leftpanel"> <div class="leftpanelinner"> <!-- ################## LEFT PANEL PROFILE ################## --> <div class="media leftpanel-profile"> <div class="media-left"> <a href="#"> <img src="../images/photos/loggeduser.png" alt="" class="media-object img-circle"> </a> </div> <div class="media-body"> <h4 class="media-heading">Elen Adarna <a data-toggle="collapse" data-target="#loguserinfo" class="pull-right"><i class="fa fa-angle-down"></i></a></h4> <span>Software Engineer</span> </div> </div><!-- leftpanel-profile --> <div class="leftpanel-userinfo collapse" id="loguserinfo"> <h5 class="sidebar-title">Address</h5> <address> 4975 Cambridge Road Miami Gardens, FL 33056 </address> <h5 class="sidebar-title">Contact</h5> <ul class="list-group"> <li class="list-group-item"> <label class="pull-left">Email</label> <span class="pull-right">me@themepixels.com</span> </li> <li class="list-group-item"> <label class="pull-left">Home</label> <span class="pull-right">(032) 1234 567</span> </li> <li class="list-group-item"> <label class="pull-left">Mobile</label> <span class="pull-right">+63012 3456 789</span> </li> <li class="list-group-item"> <label class="pull-left">Social</label> <div class="social-icons pull-right"> <a href="#"><i class="fa fa-facebook-official"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-pinterest"></i></a> </div> </li> </ul> </div><!-- leftpanel-userinfo --> <ul class="nav nav-tabs nav-justified nav-sidebar"> <li class="tooltips active" data-toggle="tooltip" title="Main Menu"><a data-toggle="tab" data-target="#mainmenu"><i class="tooltips fa fa-ellipsis-h"></i></a></li> <li class="tooltips unread" data-toggle="tooltip" title="Check Mail"><a data-toggle="tab" data-target="#emailmenu"><i class="tooltips fa fa-envelope"></i></a></li> <li class="tooltips" data-toggle="tooltip" title="Contacts"><a data-toggle="tab" data-target="#contactmenu"><i class="fa fa-user"></i></a></li> <li class="tooltips" data-toggle="tooltip" title="Settings"><a data-toggle="tab" data-target="#settings"><i class="fa fa-cog"></i></a></li> <li class="tooltips" data-toggle="tooltip" title="Log Out"><a href="signin.php"><i class="fa fa-sign-out"></i></a></li> </ul> <div class="tab-content"> <!-- ################# MAIN MENU ################### --> <div class="tab-pane active" id="mainmenu"> <h5 class="sidebar-title">Favorites</h5> <ul class="nav nav-pills nav-stacked nav-quirk"> <li><a href="index.php"><i class="fa fa-home"></i> <span>Dashboard</span></a></li> <li><a href="widgets.html"><span class="badge pull-right">10+</span><i class="fa fa-cube"></i> <span>Widgets</span></a></li> <li><a href="maps.php"><i class="fa fa-map-marker"></i> <span>Maps</span></a></li> </ul> <h5 class="sidebar-title">Main Menu</h5> <ul class="nav nav-pills nav-stacked nav-quirk"> <li class="nav-parent"> <a href=""><i class="fa fa-check-square"></i> <span>Forms</span></a> <ul class="children"> <li><a href="general-forms.php">Form Elements</a></li> <li><a href="form-validation.html">Form Validation</a></li> <li><a href="form-wizards.html">Form Wizards</a></li> <li><a href="wysiwyg.html">Text Editor</a></li> </ul> </li> <li class="nav-parent active"><a href=""><i class="fa fa-suitcase"></i> <span>UI Elements</span></a> <ul class="children"> <li><a href="buttons.html">Buttons</a></li> <li><a href="icons.html">Icons</a></li> <li><a href="typography.html">Typography</a></li> <li><a href="alerts.html">Alerts & Notifications</a></li> <li class="active"><a href="tabs-accordions.html">Tabs & Accordions</a></li> <li><a href="sliders.html">Sliders</a></li> <li><a href="graphs.html">Graphs & Charts</a></li> <li><a href="panels.html">Panels</a></li> <li><a href="extras.html">Extras</a></li> </ul> </li> <li class="nav-parent"><a href=""><i class="fa fa-th-list"></i> <span>Tables</span></a> <ul class="children"> <li><a href="basic-tables.html">Basic Tables</a></li> <li><a href="data-tables.html">Data Tables</a></li> </ul> </li> <li class="nav-parent"><a href=""><i class="fa fa-file-text"></i> <span>Pages</span></a> <ul class="children"> <li><a href="asset-manager.html">Asset Manager</a></li> <li><a href="people-directory.html">People Directory</a></li> <li><a href="timeline.html">Timeline</a></li> <li><a href="profile.html">Profile</a></li> <li><a href="blank.html">Blank Page</a></li> <li><a href="notfound.html">404 Page</a></li> <li><a href="signin.php">Sign In</a></li> <li><a href="signup.html">Sign Up</a></li> </ul> </li> </ul> </div><!-- tab-pane --> <!-- ######################## EMAIL MENU ##################### --> <div class="tab-pane" id="emailmenu"> <div class="sidebar-btn-wrapper"> <a href="compose.html" class="btn btn-danger btn-block">Compose</a> </div> <h5 class="sidebar-title">Mailboxes</h5> <ul class="nav nav-pills nav-stacked nav-quirk nav-mail"> <li><a href="email.html"><i class="fa fa-inbox"></i> <span>Inbox (3)</span></a></li> <li><a href="email.html"><i class="fa fa-pencil"></i> <span>Draft (2)</span></a></li> <li><a href="email.html"><i class="fa fa-paper-plane"></i> <span>Sent</span></a></li> </ul> <h5 class="sidebar-title">Tags</h5> <ul class="nav nav-pills nav-stacked nav-quirk nav-label"> <li><a href="#"><i class="fa fa-tags primary"></i> <span>Communication</span></a></li> <li><a href="#"><i class="fa fa-tags success"></i> <span>Updates</span></a></li> <li><a href="#"><i class="fa fa-tags warning"></i> <span>Promotions</span></a></li> <li><a href="#"><i class="fa fa-tags danger"></i> <span>Social</span></a></li> </ul> </div><!-- tab-pane --> <!-- ################### CONTACT LIST ################### --> <div class="tab-pane" id="contactmenu"> <div class="input-group input-search-contact"> <input type="text" class="form-control" placeholder="Search contact"> <span class="input-group-btn"> <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button> </span> </div> <h5 class="sidebar-title">My Contacts</h5> <ul class="media-list media-list-contacts"> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user1.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Christina R. Hill</h4> <span><i class="fa fa-phone"></i> 386-752-1860</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user2.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Floyd M. Romero</h4> <span><i class="fa fa-mobile"></i> +1614-650-8281</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user3.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Jennie S. Gray</h4> <span><i class="fa fa-phone"></i> 310-757-8444</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user4.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Alia J. Locher</h4> <span><i class="fa fa-mobile"></i> +1517-386-0059</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user5.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Nicholas T. Hinkle</h4> <span><i class="fa fa-skype"></i> nicholas.hinkle</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user6.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Jamie W. Bradford</h4> <span><i class="fa fa-phone"></i> 225-270-2425</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user7.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Pamela J. Stump</h4> <span><i class="fa fa-mobile"></i> +1773-879-2491</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user8.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Refugio C. Burgess</h4> <span><i class="fa fa-mobile"></i> +1660-627-7184</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user9.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Ashley T. Brewington</h4> <span><i class="fa fa-skype"></i> ashley.brewington</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user10.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Roberta F. Horn</h4> <span><i class="fa fa-phone"></i> 716-630-0132</span> </div> </a> </li> </ul> </div><!-- tab-pane --> <!-- #################### SETTINGS ################### --> <div class="tab-pane" id="settings"> <h5 class="sidebar-title">General Settings</h5> <ul class="list-group list-group-settings"> <li class="list-group-item"> <h5>Daily Newsletter</h5> <small>Get notified when someone else is trying to access your account.</small> <div class="toggle-wrapper"> <div class="leftpanel-toggle toggle-light success"></div> </div> </li> <li class="list-group-item"> <h5>Call Phones</h5> <small>Make calls to friends and family right from your account.</small> <div class="toggle-wrapper"> <div class="leftpanel-toggle-off toggle-light success"></div> </div> </li> </ul> <h5 class="sidebar-title">Security Settings</h5> <ul class="list-group list-group-settings"> <li class="list-group-item"> <h5>Login Notifications</h5> <small>Get notified when someone else is trying to access your account.</small> <div class="toggle-wrapper"> <div class="leftpanel-toggle toggle-light success"></div> </div> </li> <li class="list-group-item"> <h5>Phone Approvals</h5> <small>Use your phone when login as an extra layer of security.</small> <div class="toggle-wrapper"> <div class="leftpanel-toggle toggle-light success"></div> </div> </li> </ul> </div><!-- tab-pane --> </div><!-- tab-content --> </div><!-- leftpanelinner --> </div><!-- leftpanel --> <div class="mainpanel"> <div class="contentpanel"> <ol class="breadcrumb breadcrumb-quirk"> <li><a href="index.php"><i class="fa fa-home mr5"></i> Home</a></li> <li><a href="buttons.html">UI Elements</a></li> <li class="active">Tabs & Accordions</li> </ol> <hr class="darken"> <div class="row"> <div class="col-md-6"> <h4 class="panel-title mb5">Basic Tabs</h4> <p class="mb15">Add quick, dynamic tab functionality to transition through panes of local content.</p> <!-- Nav tabs --> <ul class="nav nav-tabs"> <li class="active"><a href="#popular" data-toggle="tab">Popular</a></li> <li><a href="#recent" data-toggle="tab">Recent</a></li> <li><a href="#comments" data-toggle="tab">Comments</a></li> </ul> <!-- Tab panes --> <div class="tab-content mb20"> <div class="tab-pane active" id="popular"> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </div> <div class="tab-pane" id="recent"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="tab-pane" id="comments"> Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. </div> </div> </div><!-- col-md-6 --> <div class="col-md-6"> <h4 class="panel-title mb5">Nav Justified Tabs</h4> <p class="mb15">Easily make tabs or pills equal widths of their parent.</p> <!-- Nav tabs --> <ul class="nav nav-tabs nav-justified"> <li class="active"><a href="#popular2" data-toggle="tab"><strong>Popular</strong></a></li> <li><a href="#recent2" data-toggle="tab"><strong>Recent</strong></a></li> <li><a href="#comments2" data-toggle="tab"><strong>Comments</strong></a></li> </ul> <!-- Tab panes --> <div class="tab-content mb20"> <div class="tab-pane active" id="popular2"> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </div> <div class="tab-pane" id="recent2"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="tab-pane" id="comments2"> Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. </div> </div> </div><!-- col-md-6 --> </div><!-- row --> <div class="mb15"></div> <div class="row"> <div class="col-md-6"> <h4 class="panel-title mb5">Left Tabs</h4> <p class="mb15">A dynamic tab functionality with menu on the left using .nav-stacked class.</p> <div class="row tab-side-wrapper"> <div class="col-xs-4 col-sm-3 tab-left"> <!-- Nav tabs --> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#popular3" data-toggle="tab"><strong>Popular</strong></a></li> <li><a href="#recent3" data-toggle="tab"><strong>Recent</strong></a></li> <li><a href="#comments3" data-toggle="tab"><strong>Comments</strong></a></li> </ul> </div> <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3 tab-main"> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="popular3"> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </div> <div class="tab-pane" id="recent3"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="tab-pane" id="comments3"> Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. </div> </div> </div> </div><!-- row tab-left-wrapper --> </div><!-- col-md-6 --> <div class="col-md-6"> <h4 class="panel-title mb5">Right Tabs</h4> <p class="mb15">A dynamic tab functionality with menu on the right using .nav-stacked class.</p> <div class="row tab-side-wrapper"> <div class="col-xs-8 col-sm-9 tab-main"> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="popular4"> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </div> <div class="tab-pane" id="recent4"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="tab-pane" id="comments4"> Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. </div> </div> </div> <div class="col-xs-4 col-sm-3 tab-right"> <!-- Nav tabs --> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#popular4" data-toggle="tab"><strong>Popular</strong></a></li> <li><a href="#recent4" data-toggle="tab"><strong>Recent</strong></a></li> <li><a href="#comments4" data-toggle="tab"><strong>Comments</strong></a></li> </ul> </div> </div><!-- row tab-left-wrapper --> </div><!-- col-md-6 --> </div><!-- row --> <div class="mb15"></div> <div class="row"> <div class="col-md-6"> <h4 class="panel-title mb5">Primary Colored Tabs</h4> <p class="mb15">A colored tabs using class names of <code>.nav-primary</code></p> <!-- Nav tabs --> <ul class="nav nav-tabs nav-primary"> <li class="active"><a href="#popular5" data-toggle="tab"><strong>Popular</strong></a></li> <li><a href="#recent5" data-toggle="tab"><strong>Recent</strong></a></li> <li><a href="#comments5" data-toggle="tab"><strong>Comments</strong></a></li> </ul> <!-- Tab panes --> <div class="tab-content mb20"> <div class="tab-pane active" id="popular5"> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </div> <div class="tab-pane" id="recent5"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="tab-pane" id="comments5"> Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. </div> </div> </div><!-- col-md-6 --> <div class="col-md-6"> <h4 class="panel-title mb5">Success Colored Tabs</h4> <p class="mb15">A colored tabs using class name of <code>.nav-success</code></p> <!-- Nav tabs --> <ul class="nav nav-tabs nav-success"> <li class="active"><a href="#popular6" data-toggle="tab"><strong>Popular</strong></a></li> <li><a href="#recent6" data-toggle="tab"><strong>Recent</strong></a></li> <li><a href="#comments6" data-toggle="tab"><strong>Comments</strong></a></li> </ul> <!-- Tab panes --> <div class="tab-content mb20"> <div class="tab-pane active" id="popular6"> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </div> <div class="tab-pane" id="recent6"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="tab-pane" id="comments6"> Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. </div> </div> </div><!-- col-md-6 --> </div><!-- row --> <div class="mb15"></div> <div class="row"> <div class="col-md-6"> <h4 class="panel-title mb5">Warning Colored Tabs</h4> <p class="mb15">A colored tabs using class names of <code>.nav-warning</code></p> <!-- Nav tabs --> <ul class="nav nav-tabs nav-warning"> <li class="active"><a href="#popular7" data-toggle="tab"><strong>Popular</strong></a></li> <li><a href="#recent7" data-toggle="tab"><strong>Recent</strong></a></li> <li><a href="#comments7" data-toggle="tab"><strong>Comments</strong></a></li> </ul> <!-- Tab panes --> <div class="tab-content mb20"> <div class="tab-pane active" id="popular7"> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </div> <div class="tab-pane" id="recent7"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="tab-pane" id="comments7"> Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. </div> </div> </div><!-- col-md-6 --> <div class="col-md-6"> <h4 class="panel-title mb5">Danger Colored Tabs</h4> <p class="mb15">A colored tabs using class name of <code>.nav-danger</code></p> <!-- Nav tabs --> <ul class="nav nav-tabs nav-danger"> <li class="active"><a href="#popular8" data-toggle="tab"><strong>Popular</strong></a></li> <li><a href="#recent8" data-toggle="tab"><strong>Recent</strong></a></li> <li><a href="#comments8" data-toggle="tab"><strong>Comments</strong></a></li> </ul> <!-- Tab panes --> <div class="tab-content mb20"> <div class="tab-pane active" id="popular8"> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </div> <div class="tab-pane" id="recent8"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="tab-pane" id="comments8"> Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. </div> </div> </div><!-- col-md-6 --> </div><!-- row --> <div class="mb15"></div> <div class="row"> <div class="col-md-6"> <h4 class="panel-title mb5">Info Colored Tabs</h4> <p class="mb15">A colored tabs using class names of <code>.nav-info</code></p> <!-- Nav tabs --> <ul class="nav nav-tabs nav-info"> <li class="active"><a href="#popular9" data-toggle="tab"><strong>Popular</strong></a></li> <li><a href="#recent9" data-toggle="tab"><strong>Recent</strong></a></li> <li><a href="#comments9" data-toggle="tab"><strong>Comments</strong></a></li> </ul> <!-- Tab panes --> <div class="tab-content mb20"> <div class="tab-pane active" id="popular9"> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </div> <div class="tab-pane" id="recent9"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="tab-pane" id="comments9"> Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. </div> </div> </div><!-- col-md-6 --> <div class="col-md-6"> <h4 class="panel-title mb5">Inverse Colored Tabs</h4> <p class="mb15">A colored tabs using class name of <code>.nav-inverse</code></p> <!-- Nav tabs --> <ul class="nav nav-tabs nav-inverse"> <li class="active"><a href="#popular10" data-toggle="tab"><strong>Popular</strong></a></li> <li><a href="#recent10" data-toggle="tab"><strong>Recent</strong></a></li> <li><a href="#comments10" data-toggle="tab"><strong>Comments</strong></a></li> </ul> <!-- Tab panes --> <div class="tab-content mb20"> <div class="tab-pane active" id="popular10"> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </div> <div class="tab-pane" id="recent10"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="tab-pane" id="comments10"> Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. </div> </div> </div><!-- col-md-6 --> </div><!-- row --> <div class="row"> <div class="col-md-6"> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title">Line Tabs</h4> <p>A dynamic tab functionality using a line as an active indicator by adding class of <code>.nav-line</code></p> </div> <div class="panel-body"> <!-- Nav tabs --> <ul class="nav nav-tabs nav-line"> <li class="active"><a href="#popular11" data-toggle="tab"><strong>Popular</strong></a></li> <li><a href="#recent11" data-toggle="tab"><strong>Recent</strong></a></li> <li><a href="#comments11" data-toggle="tab"><strong>Comments</strong></a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="popular11"> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </div> <div class="tab-pane" id="recent11"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="tab-pane" id="comments11"> Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. </div> </div> </div> </div><!-- panel --> </div><!-- col-md-6 --> <div class="col-md-6"> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title">Line Tabs Justified</h4> <p>A justified line tab by adding class of <code>.nav-line</code></p> </div> <div class="panel-body"> <!-- Nav tabs --> <ul class="nav nav-tabs nav-line nav-justified"> <li class="active"><a href="#popular12" data-toggle="tab"><strong>Popular</strong></a></li> <li><a href="#recent12" data-toggle="tab"><strong>Recent</strong></a></li> <li><a href="#comments12" data-toggle="tab"><strong>Comments</strong></a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="popular12"> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </div> <div class="tab-pane" id="recent12"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="tab-pane" id="comments12"> Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. </div> </div> </div> </div><!-- panel --> </div><!-- col-md-6 --> </div><!-- row --> <div class="mb15"></div> <div class="row"> <div class="col-md-6"> <h4 class="panel-title mb5">Basic Accordion</h4> <p class="mb15">Get base styles and flexible support for collapsible components like accordions and navigation.</p> <div class="panel-group" id="accordion"> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 1. What payment types are available? </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> The most convenient is a credit card. Our transaction provider accepts VISA, MasterCard, American Express, Diners Club and JCB. Moreover, payments via PayPal or Giropay, as well as prepayments via wire transfer or check are possible. You will find all the available options on the first transaction page. Click there on [Info] for further details. </div> </div> </div> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" class="collapsed" data-parent="#accordion" href="#collapseTwo"> 2. How long do I have to wait after payment? </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> One of the main advantages of the download sales is the immediate delivery of the product at any time of the day. So, once the payment is accepted, it is a matter of minutes till you get the e-mails. Even better: the download links and the License number(s) are also shown in your browser right after the transaction, so there is even no need to wait. </div> </div> </div> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" class="collapsed" data-parent="#accordion" href="#collapseThree"> 3. In which currency can I pay? </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <p>The payments can be done in 15 different currencies (see [info] on the ShareIt transaction page). However, if you prefer to pay in US Dollars, British Pounds or any currency other than Euro, please consider that various exchange fees will be applied. For currencies other than USD or GBP, for example, the charge applied by ShareIt can be as much as 9 %.</p> </div> </div> </div> </div> </div><!-- col-md-6 --> <div class="col-md-6"> <h4 class="panel-title mb5">Standard Accordion</h4> <p class="mb15">A standard styles for collapsible components with an arrow indicator.</p> <div class="panel-group" id="accordion2"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne2"> 1. What payment types are available? </a> </h4> </div> <div id="collapseOne2" class="panel-collapse collapse in"> <div class="panel-body"> The most convenient is a credit card. Our transaction provider accepts VISA, MasterCard, American Express, Diners Club and JCB. Moreover, payments via PayPal or Giropay, as well as prepayments via wire transfer or check are possible. You will find all the available options on the first transaction page. Click there on [Info] for further details. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" class="collapsed" data-parent="#accordion2" href="#collapseTwo2"> 2. How long do I have to wait after payment? </a> </h4> </div> <div id="collapseTwo2" class="panel-collapse collapse"> <div class="panel-body"> One of the main advantages of the download sales is the immediate delivery of the product at any time of the day. So, once the payment is accepted, it is a matter of minutes till you get the e-mails. Even better: the download links and the License number(s) are also shown in your browser right after the transaction, so there is even no need to wait. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" class="collapsed" data-parent="#accordion2" href="#collapseThree2"> 3. In which currency can I pay? </a> </h4> </div> <div id="collapseThree2" class="panel-collapse collapse"> <div class="panel-body"> <p>The payments can be done in 15 different currencies. However, if you prefer to pay in US Dollars, British Pounds or any currency other than Euro, please consider that various exchange fees will be applied. For currencies other than USD or GBP, for example, the charge applied by ShareIt can be as much as 9 %.</p> </div> </div> </div> </div> </div><!-- col-md-6 --> </div><!-- row --> <div class="mb15"></div> <h4 class="panel-title mb5">Colored Accordions</h4> <p class="mb15">A colored styles for collapsible components.</p> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="panel-group" id="accordion3"> <div class="panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion3" href="#collapseOne3"> Product Details </a> </h4> </div> <div id="collapseOne3" class="panel-collapse collapse in"> <div class="panel-body"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div> <div class="panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" class="collapsed" data-parent="#accordion3" href="#collapseTwo3"> Specifications </a> </h4> </div> <div id="collapseTwo3" class="panel-collapse collapse"> <div class="panel-body"> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores. </div> </div> </div> <div class="panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" class="collapsed" data-parent="#accordion3" href="#collapseThree3"> Accessories </a> </h4> </div> <div id="collapseThree3" class="panel-collapse collapse"> <div class="panel-body"> Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates </div> </div> </div> </div> </div><!-- col-md-4 --> <div class="col-md-4 col-sm-6"> <div class="panel-group" id="accordion4"> <div class="panel panel-success"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion4" href="#collapseOne4"> Product Details </a> </h4> </div> <div id="collapseOne4" class="panel-collapse collapse in"> <div class="panel-body"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div> <div class="panel panel-success"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" class="collapsed" data-parent="#accordion4" href="#collapseTwo4"> Specifications </a> </h4> </div> <div id="collapseTwo4" class="panel-collapse collapse"> <div class="panel-body"> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores. </div> </div> </div> <div class="panel panel-success"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" class="collapsed" data-parent="#accordion4" href="#collapseThree4"> Accessories </a> </h4> </div> <div id="collapseThree4" class="panel-collapse collapse"> <div class="panel-body"> Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates </div> </div> </div> </div> </div><!-- col-md-4 --> <div class="col-md-4 col-sm-6"> <div class="panel-group" id="accordion5"> <div class="panel panel-warning"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion5" href="#collapseOne5"> Product Details </a> </h4> </div> <div id="collapseOne5" class="panel-collapse collapse in"> <div class="panel-body"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div> <div class="panel panel-warning"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" class="collapsed" data-parent="#accordion5" href="#collapseTwo5"> Specifications </a> </h4> </div> <div id="collapseTwo5" class="panel-collapse collapse"> <div class="panel-body"> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores. </div> </div> </div> <div class="panel panel-warning"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" class="collapsed" data-parent="#accordion5" href="#collapseThree5"> Accessories </a> </h4> </div> <div id="collapseThree5" class="panel-collapse collapse"> <div class="panel-body"> Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates </div> </div> </div> </div> </div><!-- col-md-4 --> <div class="col-md-4 col-sm-6"> <div class="panel-group" id="accordion6"> <div class="panel panel-danger"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion6" href="#collapseOne6"> Product Details </a> </h4> </div> <div id="collapseOne6" class="panel-collapse collapse in"> <div class="panel-body"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div> <div class="panel panel-danger"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" class="collapsed" data-parent="#accordion6" href="#collapseTwo6"> Specifications </a> </h4> </div> <div id="collapseTwo6" class="panel-collapse collapse"> <div class="panel-body"> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores. </div> </div> </div> <div class="panel panel-danger"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" class="collapsed" data-parent="#accordion6" href="#collapseThree6"> Accessories </a> </h4> </div> <div id="collapseThree6" class="panel-collapse collapse"> <div class="panel-body"> Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates </div> </div> </div> </div> </div><!-- col-md-4 --> <div class="col-md-4 col-sm-6"> <div class="panel-group" id="accordion7"> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion7" href="#collapseOne7"> Product Details </a> </h4> </div> <div id="collapseOne7" class="panel-collapse collapse in"> <div class="panel-body"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" class="collapsed" data-parent="#accordion7" href="#collapseTwo7"> Specifications </a> </h4> </div> <div id="collapseTwo7" class="panel-collapse collapse"> <div class="panel-body"> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores. </div> </div> </div> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" class="collapsed" data-parent="#accordion7" href="#collapseThree7"> Accessories </a> </h4> </div> <div id="collapseThree7" class="panel-collapse collapse"> <div class="panel-body"> Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates </div> </div> </div> </div> </div><!-- col-md-4 --> <div class="col-md-4 col-sm-6"> <div class="panel-group" id="accordion8"> <div class="panel panel-inverse"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion8" href="#collapseOne8"> Product Details </a> </h4> </div> <div id="collapseOne8" class="panel-collapse collapse in"> <div class="panel-body"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div> <div class="panel panel-inverse"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" class="collapsed" data-parent="#accordion8" href="#collapseTwo8"> Specifications </a> </h4> </div> <div id="collapseTwo8" class="panel-collapse collapse"> <div class="panel-body"> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores. </div> </div> </div> <div class="panel panel-inverse"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" class="collapsed" data-parent="#accordion8" href="#collapseThree8"> Accessories </a> </h4> </div> <div id="collapseThree8" class="panel-collapse collapse"> <div class="panel-body"> Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates </div> </div> </div> </div> </div><!-- col-md-4 --> </div><!-- row --> </div><!-- contentpanel --> </div><!-- mainpanel --> </section> <script src="../lib/jquery/jquery.js"></script> <script src="../lib/jquery-ui/jquery-ui.js"></script> <script src="../lib/bootstrap/js/bootstrap.js"></script> <script src="../lib/jquery-toggles/toggles.js"></script> <script src="../js/quirk.js"></script> </body> </html>