Bizamajig UI - Setup Dashboard - With Sub-steps

by bizamajig

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container" style="background-color: white;">
	<div class="row">
		<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">





			<div data-info-section="1" class="info-section m-t-large m-b-large clearfix">
				<div style="display: table; width: 100%;">
					<span class="btn btn-standard-6 btn-circle btn-sm" style="display: table-cell;">
						<span class="icon-2x" aria-hidden="true" data-icon="&#xe6a5;"></span>
					</span>
					<div class="pull-left m-l-mini" style="display: table-cell; width: 100%;">
						<h4 class="info-section-title m-b-mini pull-left color-6">
							<strong>
								Company
							</strong>
						</h3>
						<h6 class="info-section-summary clear">
							<i>
								“Setup your company, domain name, and user accounts.”
							</i>
						</h5>
					</div>
				</div>
				<div class="clear"></div>
<!--
				<div class="info-section-description m-t-large">
					The first step is to setup your initial model of how you will use Bizamajig to support your business. After completing, move on to creating and publishing your first work process, and finally start working with Bizamajig to build traffic, do commerce, and serve customers.
				</div>
-->
				<ol class="info-task-list m-t-large">
					<li id="info-task-1-1" class="info-task info-task-completed accordion-group" data-info-task="1">
						<div class="accordion-heading">
							<a id="info-task-title-1-1" class="info-task-title color-3 accordion-toggle" data-toggle="collapse" data-target="#info-task-description-1-1">
								Enter your company name and locations</a></div>
						<div id="info-task-description-1-1" class="info-task-description collapse">
							<div class="accordion-inner">
								<p>
								</p>
								<a id="" class="info-task-next color-6">
									Start this...

CSS

/*
**
**	START Bizamajig Base CSS
**
*/

/* START BIZAMAJIG FONTS - IMPORT AS NEEDED */
/* @import url("//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"); */

/* END BIZAMAJIG FONTS - IMPORT AS NEEDED */










/* START Bizamajig Base CSS - Bootstrap */
/* START Bootstrap */
/*!
 * Bootstrap v3.0.0
 *
 * Copyright 2013 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */

/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden] {
  display: none;
}
html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
body {
  margin: 0;
}
a:focus {
  outline: thin dotted;
}
a:active,
a:hover {
  outline: 0;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}
mark {
  background: #ff0;
  color: #000;
}
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}
pre {
  white-space: pre-wrap;
}
q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 0;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  padding: 0;
}
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}
button,
input {
  line-height:...