Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <section>
	<header>
		<nav class="rad-navigation">
			<div class="rad-logo-container rad-nav-min">
				<a href="#" class="rad-logo"><i class=" fa fa-recycle"></i> Radar</a>
				<a href="#" class="rad-toggle-btn pull-right"><i class="fa fa-bars"></i></a>
			</div>
			<a href="#" class="rad-logo-hidden">Radar</a>
			<div class="rad-top-nav-container">
				<a href="" class="brand-icon"><i class="fa fa-recycle"></i></a>
				<ul class="pull-right links">
					<li class="rad-dropdown no-color">
						<a class="rad-menu-item" href="#"><img class="rad-list-img sm-img" src="https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg" alt="me" /></a>
						<ul class="rad-dropmenu-item sm-menu">
							<li class="rad-notification-item">
								<a class="rad-notification-content lg-text" href="#"><i class="fa fa-edit"></i> My Profile</a>
							</li>
							<li class="rad-notification-item">
								<a class="rad-notification-content lg-text" href="#"><i class="fa fa-power-off"></i> Sign out</a>
							</li>
						</ul>
					</li>
					<li class="rad-dropdown"><a class="rad-menu-item" href="#"><i class="fa fa-cog"></i></a>
						<ul class="rad-dropmenu-item rad-settings">
							<li class="rad-dropmenu-header"><a href="#">Settings</a></li>
							<li class="rad-notification-item text-left">
								<div class="pull-left"><i class="fa fa-link"></i></div>
								<div class="pull-right">
									<label class="rad-chk-pin pull-right">
										<input type="checkbox" /><span></span></label>
								</div>
								<div class="rad-notification-body">
									<div class="lg-text">Change to Flat Theme</div>
									<div class="sm-text">Flattify it</div>
								</div>
							</li>
							<li id="rad-color-opts" class="rad-notification-item text-left hide">
								<div class="pull-left"><i class="fa fa-puzzle-piece"></i></div>
								<div class="pull-right">
									<div class="rad-color-swatch">
										<label class="colors rad-bg-crimson rad-option-selected">
											<input type="radio" checked name="color" value="crimson" />
										</label>
										<label class="colors rad-bg-teal">
											<input type="radio" name="color" value="teal" />
										</label>
										<label class="colors rad-bg-purple">
											<input type="radio" name="color" value="purple">
										</label>
										<label class="colors rad-bg-orange">
											<input type="radio" name="color" value="orange" />
										</label>
										<label class="colors rad-bg-twitter">
											<input type="radio" name="color" value="twitter" />
										</label>
									</div>
								</div>
								<div class="rad-notification-body">
									<div class="lg-text">Choose a color</div>
									<div class="sm-text">Make it colorful</div>
								</div>
							</li>
						</ul>
					</li>
				</ul>
				<ul class="pull-right links">
					<li>
						<a class="rad-menu-item" href="#"><i class="fa fa-comment-o"><span class="rad-menu-badge rad-bg-success">0</span></i></a>
					</li>
					<li class="rad-dropdown"><a class="rad-menu-item" href="#"><i class="fa fa-envelope-o"><span class="rad-menu-badge rad-bg-primary">23</span></i></a>
						<ul class="rad-dropmenu-item">
							<li class="rad-dropmenu-header"><a href="#">Your Notifications</a></li>
							<li class="rad-notification-item text-left">
								<a class="rad-notification-content" href="#">
									<div class="pull-left"><i class="fa fa-html5 fa-2x"></i>
									</div>
									<div class="rad-notification-body">
										<div class="lg-text">Introduction to fetch()</div>
										<div class="sm-text">The fetch API</div>
									</div>
								</a>
							</li>
							<li class="rad-notification-item text-left">
								<a class="rad-notification-content" href="#">
									<div class="pull-left"><i class="fa fa-bitbucket fa-2x"></i>
									</div>
									<div class="rad-notification-body">
										<div class="lg-text">Check your BitBucket</div>
										<div class="sm-text">Last Chance</div>
									</div>
								</a>
							</li>
							<li class="rad-notification-item text-left">
								<a class="rad-notification-content" href="#">
									<div class="pull-left"><i class="fa fa-google fa-2x"></i>
									</div>
									<div class="rad-notification-body">
										<div class="lg-text">Google Account</div>
										<div class="sm-text">sathishlxg@gmail.com</div>
									</div>
								</a>
							</li>
							<li class="rad-dropmenu-footer"><a href="#">See all notifications</a></li>
						</ul>
					</li>
					<li class="rad-dropdown"><a class="rad-menu-item" href="#"><i class="fa fa-bell-o"><span class="rad-menu-badge">49</span></i></a>
						<ul class="rad-dropmenu-item">
							<li class="rad-dropmenu-header"><a href="#">Your Alerts</a></li>
							<li class="rad-notification-item text-left">
								<a class="rad-notification-content" href="#">
									<div class="pull-left"><i class="fa fa-html5 fa-2x"></i>
									</div>
									<div class="rad-notification-body">
										<div class="lg-text">Introduction to fetch()</div>
										<div class="sm-text">The fetch API</div>
										<em class="pull-right sm-text"><i class="fa fa-clock-o"></i> 2 sec ago</em>
									</div>
								</a>
							</li>
							<li class="rad-notification-item text-left">
								<a class="rad-notification-content" href="#">
									<div class="pull-left"><i class="fa fa-bitbucket fa-2x"></i>
									</div>
									<div class="rad-notification-body">
										<div class="lg-text">Check your BitBucket</div>
										<div class="sm-text">Last Chance</div>
										<em class="pull-right sm-text"><i class="fa fa-clock-o"></i> 49 mins ago</em>
									</div>
								</a>
							</li>
							<li class="rad-notification-item text-left">
								<a class="rad-notification-content" href="#">
									<div class="pull-left"><i class="fa fa-google fa-2x"></i>
									</div>
									<div class="rad-notification-body">
										<div class="lg-text">Google Account</div>
										<div class="sm-text">sathishlxg@gmail.com</div>
										<em class="pull-right sm-text"><i class="fa fa-clock-o"></i> 2 days ago</em>
									</div>
								</a>
							</li>
							<li class="rad-dropmenu-footer"><a href="#">See all alerts</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</nav>
	</header>
</section>
<aside>
	<nav class="rad-sidebar rad-nav-min">
		<ul>
			<li>
				<a href="#" class="inbox">
					<i class="fa fa-dashboard"><span class="icon-bg rad-bg-success"></span></i>
					<span class="rad-sidebar-item">Dashboard</span>
				</a>
			</li>
			<li>
				<a href="#">
					<i class="fa fa-bar-chart-o">
						<span class="icon-bg rad-bg-danger"></span>
					</i>
					<span class="rad-sidebar-item">Ticket status</span>
				</a>
			</li>
			<li><a href="#" class="snooz"><i class="fa fa-line-chart"><span class="icon-bg rad-bg-primary"></span></i><span class="rad-sidebar-item">Call trends</span></a></li>
			<li><a href="#" class="done"><i class="fa fa-area-chart"><span class="icon-bg rad-bg-warning"></span></i><span class="rad-sidebar-item">Heat maps</span></a></li>
			<li>
				<a href="#">
					<i class="fa fa-wrench"><span class="icon-bg rad-bg-violet"></span></i>
					<span class="rad-sidebar-item">Settings</span>
				</a>
			</li>
		</ul>
	</nav>
</aside>
<main>
	<section>
		<div class="rad-body-wrapper rad-nav-min">
			<div class="container-fluid">
				<header class="rad-page-title">
					<span>Dashboard</span>
					<small class="md-txt">Welcome Sathish, <a href="https://www.google.com/maps/place/3720+Emerald+St,+Torrance,+CA+90503/@33.8403836,-118.3543828,17z/data=!4m18!1m15!4m14!1m6!1m2!1s0x80c2b4d407f58b11:0xdedca55964c89054!2s3720+Emerald+St,+Torrance,+CA+90503!2m2!1d-118.3520761!2d33.8403792!1m6!1m2!1s0x80c2b4d407f58b11:0xdedca55964c89054!2s3720+Emerald+St,+Torrance,+CA+90503!2m2!1d-118.3520761!2d33.8403792!3m1!1s0x80c2b4d407f58b11:0xdedca55964c89054" target="_blank"><i class="fa fa-map-marker rad-txt-danger"></i> California</a></small>					</header>
				<div class="row">
					<div class="col-lg-3 col-xs-6">
						<div class="rad-info-box rad-txt-success">
							<i class="fa fa-windows"></i>
							<span class="heading">Microsoft</span>
							<span class="value"><span>4949</span></span>
						</div>
					</div>
					<div class="col-lg-3 col-xs-6">
						<div class="rad-info-box rad-txt-primary">
							<i class="fa fa-facebook"></i>
							<span class="heading">Facebook</span>
							<span class="value"><span>23K</span></span>
						</div>
					</div>
					<div class="col-lg-3 col-xs-6">
						<div class="rad-info-box rad-txt-danger">
							<i class="fa fa-google-plus"></i>
							<span class="heading">Google</span>
							<span class="value"><span>49M</span></span>
						</div>
					</div>
					<div class="col-lg-3 col-xs-6">
						<div class="rad-info-box">
							<i class="fa fa-apple"></i>
							<span class="heading">Apple</span>
							<span class="value"><span>10.9K</span></span>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-12">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h3 class="panel-title">World Map<ul class="rad-panel-action">
																	<li><i class="fa fa-chevron-down"></i></li>
																	<li><i class="fa fa-rotate-right"></i></li>
																	<li><i class="fa fa-cog"></i>
																	<li><i class="fa fa-close"></i>
																	</li>
																</ul></h3>
							</div>
							<div class="panel-body rad-map-container">
								<div id="world-map" class="rad-map"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-12 col-md-6">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h3 class="panel-title">Area Chart<ul class="rad-panel-action">
																	<li><i class="fa fa-chevron-down"></i></li>
																	<li><i class="fa fa-rotate-right"></i></li>
																	<li><i class="fa fa-cog"></i>
																	<li><i class="fa fa-close"></i>
																	</li>
																</ul></h3>
							</div>
							<div class="panel-body">
								<div id="areaChart" class="rad-chart"></div>
							</div>
						</div>
					</div>
					<div class="col-xs-12 col-md-6">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h3 class="panel-title">Area Chart<ul class="rad-panel-action">
																	<li><i class="fa fa-chevron-down"></i></li>
																	<li><i class="fa fa-rotate-right"></i></li>
																	<li><i class="fa fa-cog"></i>
																	<li><i class="fa fa-close"></i>
																	</li>
																</ul></h3>
							</div>
							<div class="panel-body">
								<div id="areaChart2" class="rad-chart"></div>
							</div>

						</div>
					</div>
					<div class="col-lg-3 col-md-4 col-xs-12">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h3 class="panel-title">Activity<ul class="rad-panel-action">
																	<li><i class="fa fa-chevron-down"></i></li>
																	<li><i class="fa fa-rotate-right"></i></li>
																	<li><i class="fa fa-close"></i>
																	</li>
																</ul></h3>
							</div>
							<div class="panel-body">
								<div class="rad-activity-body">
								<div class="rad-list-group group">
									<div class="rad-list-group-item">
										<div class="rad-list-icon icon-shadow rad-bg-danger pull-left"><i class="fa fa-phone"></i></div>
										<div class="rad-list-content"><strong>Client meeting</strong>
											<div class="md-text">Meeting at 10:00 AM</div>
										</div>
									</div>
									<div class="rad-list-group-item">
										<div class="rad-list-icon icon-shadow rad-bg-primary pull-left"><i class="fa fa-refresh"></i></div>
										<div class="rad-list-content"><strong>Created ticket</strong>
											<div class="md-text">Ticket assigned to Dev team</div>
										</div>
									</div>
									<div class="rad-list-group-item">
										<div class="rad-list-icon icon-shadow rad-bg-success pull-left"><i class="fa fa-check"></i></div>
										<div class="rad-list-content"><strong>Activity completed</strong>
											<div class="md-text">Completed the dashboard html demo</div>
										</div>
									</div>
									<div class="rad-list-group-item">
										<div class="rad-list-icon icon-shadow rad-bg-violet pull-left"><i class="fa fa-envelope"></i></div>
										<div class="rad-list-content"><strong>New Invitation</strong>
											<div class="md-text">Max has invited you to join Inbox</div>
										</div>
									</div>
									<div class="rad-list-group-item">
										<div class="rad-list-icon icon-shadow rad-bg-success pull-left"><i class="fa fa-pencil"></i></div>
										<div class="rad-list-content"><strong>New post</strong>
											<div class="md-text">Created new post</div>
										</div>
									</div>
								</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-3 col-md-8 col-xs-12">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h3 class="panel-title">Donut Chart<ul class="rad-panel-action">
																	<li><i class="fa fa-chevron-down"></i></li>
																	<li><i class="fa fa-rotate-right"></i></li>
																	<li><i class="fa fa-cog"></i>
																	<li><i class="fa fa-close"></i>
																	</li>
																</ul></h3>
							</div>
							<div class="panel-body">
								<div id="donutChart" class="rad-chart"></div>
							</div>
						</div>
					</div>
					<div class="col-lg-6 col-md-12 col-xs-12">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h3 class="panel-title">Line Chart<ul class="rad-panel-action">
																	<li><i class="fa fa-chevron-down"></i></li>
																	<li><i class="fa fa-rotate-right"></i></li>
																	<li><i class="fa fa-cog"></i>
																	<li><i class="fa fa-close"></i>
																	</li>
																</ul></h3>
							</div>
							<div class="panel-body">
								<div id="lineChart" class="rad-chart"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-6 col-lg-12">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h3 class="panel-title">Bar Chart<ul class="rad-panel-action">
																	<li><i class="fa fa-chevron-down"></i></li>
																	<li><i class="fa fa-rotate-right"></i></li>
																	<li><i class="fa fa-cog"></i>
																	<li><i class="fa fa-close"></i>
																	</li>
																</ul></h3>
							</div>
							<div class="panel-body">
								<div id="barChart3" class="rad-chart"></div>
							</div>
						</div>
					</div>
					<div class="col-md-6 col-lg-6">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h3 class="panel-title">Bar Chart<ul class="rad-panel-action">
																	<li><i class="fa fa-chevron-down"></i></li>
																	<li><i class="fa fa-rotate-right"></i></li>
																	<li><i class="fa fa-cog"></i>
																	<li><i class="fa fa-close"></i>
																	</li>
																</ul></h3>
							</div>
							<div class="panel-body">
								<div id="barChart2" class="rad-chart"></div>
							</div>
						</div>
					</div>
					<div class="col-md-12 col-lg-6">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h3 class="panel-title">Bar Chart<ul class="rad-panel-action">
																	<li><i class="fa fa-chevron-down"></i></li>
																	<li><i class="fa fa-rotate-right"></i></li>
																	<li><i class="fa fa-cog"></i>
																	<li><i class="fa fa-close"></i>
																	</li>
																</ul></h3>
							</div>
							<div class="panel-body">
								<div id="barChart" class="rad-chart"></div>
							</div>
						</div>
					</div>
					<div class="col-md-6 col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h3 class="panel-title">Chat<ul class="rad-panel-action">
																	<li><i class="fa fa-chevron-down"></i></li>
																	<li><i class="fa fa-close"></i>
																	</li>
																</ul></h3>
							</div>
							<div class="panel-body">
								<div class="rad-chat-body">
									<div class="rad-list-group">
										<div class="rad-list-group-item left">
											<span class="rad-list-icon pull-left"><img class="rad-list-img" src="https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg" alt="me" /></span>
											<div class="rad-list-content rad-chat">
												<span class="lg-text">Me</span>
												<span class="sm-text"><i class="fa fa-clock-o"></i> 11:20 pm</span>
												<div class="rad-chat-msg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales at.</div>
											</div>
										</div>
										<div class="rad-list-group-item right">
											<span class="rad-list-icon pull-right"><img class="rad-list-img" src="http://www.gravatar.com/avatar/9099c2946891970eb4739e6455400913.png" alt="sathish"></span>
											<div class="rad-list-content rad-chat">
												<span class="lg-text">Sathish</span>
												<span class="sm-text"><i class="fa fa-clock-o"></i> 11:30 pm</span>
												<div class="rad-chat-msg">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
											</div>
										</div>
										<div class="rad-list-group-item left">
											<span class="rad-list-icon pull-left"><img class="rad-list-img" src="https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg" alt="me" /></span>
											<div class="rad-list-content rad-chat">
												<span class="lg-text">Me</span>
												<span class="sm-text"><i class="fa fa-clock-o"></i> 11:31 pm</span>
												<div class="rad-chat-msg">Checkout my new admin dashboard template in CSS3 <i class="fa fa-smile-o rad-txt-warning"></i></div>
											</div>
										</div>
										<div class="rad-list-group-item left">
											<span class="rad-list-icon pull-left"><img class="rad-list-img" src="https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg" alt="me" /></span>
											<div class="rad-list-content rad-chat">
												<span class="lg-text">Me</span>
												<span class="sm-text"><i class="fa fa-clock-o"></i> 11:20 pm</span>
												<div class="rad-chat-msg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales at.</div>
											</div>
										</div>
										<div class="rad-list-group-item right">
											<span class="rad-list-icon pull-right"><img class="rad-list-img" src="http://www.gravatar.com/avatar/9099c2946891970eb4739e6455400913.png" alt="sathish"></span>
											<div class="rad-list-content rad-chat">
												<span class="lg-text">Sathish</span>
												<span class="sm-text"><i class="fa fa-clock-o"></i> 11:30 pm</span>
												<div class="rad-chat-msg">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
											</div>
										</div>
										<div class="rad-list-group-item left">
											<span class="rad-list-icon pull-left"><img class="rad-list-img" src="https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg" alt="me" /></span>
											<div class="rad-list-content rad-chat">
												<span class="lg-text">Me</span>
												<span class="sm-text"><i class="fa fa-clock-o"></i> 11:31 pm</span>
												<div class="rad-chat-msg">Checkout my new admin dashboard template in CSS3 <i class="fa fa-smile-o rad-txt-warning"></i></div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="panel-footer">
								<div class="input-group">
									<input type="text" id="rad-chat-txt" placeholder="Type a message" class="form-control" /><span class="input-group-btn"><button id="rad-chat-send" class="btn btn-info">Send</button></span>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-6 col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h3 class="panel-title">Timeline<ul class="rad-panel-action">
																	<li><i class="fa fa-chevron-down"></i></li>
																	<li><i class="fa fa-close"></i>
																	</li>
																</ul></h3>
							</div>
							<div class="panel-body">
								<div class="rad-timeline-body">
									<ul class="rad-timeline">
										<li class="rad-timeline-item">
											<div class="rad-timeline-badge rad-bg-primary"><i class="fa fa-rss"></i><span class="pull-left"><i class="fa fa-clock-o"></i> 49m ago</span></div>
											<div class="rad-timeline-panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia, magni voluptatem sapiente amet quidem, nemo aliquid qui minus iusto asperiores dolorem autem placeat iste!</div>
										</li>
										<li class="rad-timeline-item">
											<div class="rad-timeline-badge rad-bg-danger"><i class="fa fa-signal"></i><span class="pull-right"><i class="fa fa-clock-o"></i> 28m ago</span></div>
											<div class="rad-timeline-panel pull-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia</div>
										</li>
										<li class="rad-timeline-item">
											<div class="rad-timeline-badge rad-bg-success"><i class="fa fa-rocket"></i><span class="pull-left"><i class="fa fa-clock-o"></i> 23m ago</span></div>
											<div class="rad-timeline-panel ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia, magni voluptatem sapiente amet quidem, nemo aliquid qui minus iusto asperiores dolorem autem placeat iste!</div>
										</li>
										<li class="rad-timeline-item">
											<div class="rad-timeline-badge rad-bg-warning"><i class="fa fa-linux"></i><span class="pull-right"><i class="fa fa-clock-o"></i> 13m ago</span></div>
											<div class="rad-timeline-panel pull-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia, magni voluptatem sapiente amet quidem, nemo aliquid qui minus iusto asperiores dolorem autem placeat iste!. Lorem ipsum dolor sit amet,
												consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia, magni voluptatem sapiente amet quidem, nemo aliquid qui minus iusto asperiores dolorem autem placeat iste!</div>
										</li>
										<li class="rad-timeline-item">
											<div class="rad-timeline-badge rad-bg-violet"><i class="fa fa-stack-overflow"></i><span class="pull-left"><i class="fa fa-clock-o"></i> 13m ago</span></div>
											<div class="rad-timeline-panel ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia</div>
										</li>
										<li class="rad-timeline-item">
											<div class="rad-timeline-badge rad-bg-danger"><i class="fa fa-wordpress"></i><span class="pull-right"><i class="fa fa-clock-o"></i> 7m ago</span></div>
											<div class="rad-timeline-panel pull-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia, magni voluptatem sapiente amet quidem, nemo aliquid qui minus iusto asperiores dolorem autem placeat iste!. Lorem ipsum dolor sit amet,
												consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia, magni voluptatem sapiente amet quidem, nemo aliquid qui minus iusto asperiores dolorem autem placeat iste!</div>
										</li>
										<li class="rad-timeline-item">
											<div class="rad-timeline-badge rad-bg-success"><i class="fa fa-credit-card"></i><span class="pull-left"><i class="fa fa-clock-o"></i> 7m ago</span></div>
											<div class="rad-timeline-panel ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia, magni voluptatem sapiente amet quidem, nemo aliquid qui minus iusto asperiores dolorem autem placeat iste!</div>
										</li>
									</ul>
								</div>
							</div>
							<div class="panel-footer">
								<div class="rad-timeline-footer">
									<p>There are many variations</p>
									<p class="pull-right"><i class="fa fa-comments-o"></i></p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
</main>
              
            
!

CSS

              
                //Vendor prefixes not added
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);

$logo-color:#222533; 
$base-color: white; 
$text-color: #515d6e; 
$font-size:13px;

*{
  box-sizing:border-box;
}



body{
  background:#f0f0f0;
  line-height:normal;
  font-size: $font-size + 3;
	overflow-Y:scroll;
  font-family: 'Roboto Condensed', "Helvetica Neue",Helvetica,Arial,sans-serif;
	-webkit-font-smoothing: antialiased !important;
}

a,a:hover, a:visited, a:link, a:active{
	text-decoration : none; 
}

a:active{
	color:#fff !important;
}

.sm-img{
	height:30px !important;
	width:30px !important;
}

::-moz-selection { background: #5af; color: #fff; text-shadow: none; }
::selection { background: #5af; color: #fff; text-shadow: none; }

.rad-page-title{
	margin-bottom:20px;
  text-shadow: 1px 4px 6px #c6c6c6, 0 0 0 #000, 1px 4px 6px #c6c6c6;
	
	span{
		font-size:22px;
		font-weight:500;
		display:block;
	}
}

.rad-navigation{
  position:fixed;
  left:0;right:0;top:0;
  box-shadow:0 0px 9px 4px rgba(#000, .1), 0 -5px 2px 2px rgba(#000, .1);
  background:$base-color;
	z-index:10000;
	text-align:center;
	
	ul{
		margin-bottom:0;
	}
}

.rad-logo-hidden{
	line-height: 75px;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 22px;
	text-decoration:none;
	color: $logo-color;
	opacity:0;
	visibility:hidden;
	position:absolute;
	left:50%;
	transition:all .2s ease-in-out;
}

.links{
    margin-right: 10px;    
    position:relative;
		
    >li{
      list-style:none;
      position:relative;
      margin:10px;
      display:inline-block;
	}
}

.rad-dropmenu-item.active{
   display:block;
   -webkit-animation:flipInX 1s ease;
}

.lg-text{
	font-size:13px;
	font-weight:600;
	color:#333;
}
.sm-text{
	font-size:11px;
	color:#c6c6c6;
}

.md-text{
	font-size:12px;
	color:#c6c6c6;
}

.rad-notification-item{
	width:100%;
	padding:15px;
	border-bottom:1px solid #EEEEEE;
	
	&:hover{
		background:#F5F5F5;
	}
	
	.rad-notification-content{
		color: lighten(#333,5);
	}
}

.rad-notification-body{
	color:black;	
	vertical-align:middle;
	margin-left:30px;
}

.rad-logo-container{
	width:225px;
	text-align:center;	
	height:50px;
	float:left;
	transition:all .2s ease-in-out;
}

.rad-top-nav-container{
	float:right;
	transition:all .2s ease-in-out;
}

.rad-toggle-btn,
.rad-logo{
	text-decoration:none;
  position:relative;  
  height:50px;
  line-height:50px;
  padding:0 15px;
  font-size:22px;
  font-weight:900;
  text-transform:uppercase;
	text-decoration:none;
	color: $logo-color;
	display:inline-block;
}

.rad-logo i {
	  padding-top: 2px;
   
    vertical-align: middle;
    margin-right: 10px;
}

.rad-toggle-btn:hover{
  background:lighten(#c6c6c6,20);	
}

.rad-menu-item{
	position:relative;
  padding:0 5px;
  line-height:30px;
  height:30px;
	color:#89949B;
	z-index:5;
	display:inline-block;
}

.rad-badge{
	height:20px;	
	color: $base-color;
	border-radius:10px;
	line-height:20px;
	font-size:12px;
	background:#E94B3B;
	box-shadow:.5px .2px 1px rgba(#000,.5);
	display:inline-block;
	text-align:center;
}

.rad-menu-badge{
	position:absolute;
	min-width:20px;
	min-height:20px;	
	line-height:20px;
	font-weight:bold;
	color: $base-color;
	border-radius:100%;
	font-size:12px;
	background:#E94B3B;
	box-shadow:.5px .2px 1px rgba(#000,.5);
	display:inline-block;
	text-align:center;
	top:-10px;
	z-index:1;
}

.sm-menu{
	min-width:150px !important;
	>li{
		padding:10px;
		text-align:left;
		i{
			
			margin:0 10px 0 0;
		}
		>a{
			padding:10px;
		}
	}
}

.rad-dropmenu-item{
  position:absolute;          
  right:-6px; 
  top:45px;
  min-width:250px;
  background: $base-color;
	border:1px solid #BDBDBD;
	border-top:5px solid $text-color;
  border-radius:2px;          
  box-shadow:0 0 5px rgba(#000, .15);
  display:none;
						
	&:before{
		content:"";
		position: absolute;
		border-width:0 10px 10px 10px;			
		border-style:solid;
		border-color: $text-color transparent;
		top:-14px;
		right:8px;
	}					
}

.rad-dropmenu-item.rad-settings{
	  right: 0 !important;
    left: auto !important;
	
		&:before{
			right: 5px !important;
      left: auto !important;
		}
	
	>.rad-notification-item {
		&:hover{
			background: #fff !important;
		}		
		i{
			font-size:24px;
		}
	}
}

.rad-dropmenu-footer,
.rad-dropmenu-header{
	display:block !important;		
	background:#CFD8DC;
	text-transform:uppercase;
	font-size:12px;
	margin:0 !important;
	padding:6px;
	text-align:center;
	
	>a{
		color: white;//#98A0A3;
		line-height:12px;
		text-decoration:none;
	}
}

.rad-dropmenu-header{
	border-bottom:1px solid #CFD8DC;
}

.rad-dropmenu-footer{
	border-top:1px solid #CFD8DC;
}

.rad-chk-pin {
  margin:0 !important;
	
	span {
		display: inline-block;
    position: relative;
    height: 20px;
    width: 40px;
    border-radius: 4px;
    background: crimson;
    border: 1px solid #f6f6f6;

		&:after {
			content: "";
			position: absolute;
			background: white;
			width: 20px;
			height: 20px;
			border-radius: 4px;
			top: -1px;
			left: 0px;
			box-shadow: 0 0 .5px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
			-webkit-transition: all .2s ease;
			transition: all .2s ease;
		}
	}
	
	input {
		display: none;
		&:checked + span {
			background: #23AE89;
			&:after {
				left: 19px;
			}
		}
	}
}

.hide{
	display:none;
}
.rad-option-selected{
	box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 -2px 4px rgba(0,0,0,.2);
	transform: scale(1.1);
	transition: all .2s linear;
}
.rad-color-swatch{
	display:table;
	width: 90px;
	height:25px;
	border-radius:4px;
	
	.colors{
		width:25px;
		height:25px;
		display:table-cell;
		cursor:pointer;
		
		input[type="radio"]{
			display:none;
		}
		
	}
	
	.colors:first-child{
		border-top-left-radius:4px;
		border-bottom-left-radius:4px;
	}
	
	.colors:last-child{
		border-top-right-radius:4px;
		border-bottom-right-radius:4px;
	}
	
}

.rad-sidebar{
	z-index:9999;
	position:fixed;
	font-weight:600;
	background: $base-color !important;
	width:225px;
	height:100vh;
	top:50px;
	left:0;	
	bottom:0;
	box-shadow: 0 0 4px rgba(0,0,0,.14),2px 4px 8px rgba(0,0,0,.28);	
	transition:all .2s ease-in-out;
	
	li{
			text-align:left;
			height:45px;
			font-size: 14px;
			font-weight:500;		
			letter-spacing:.025em;
			line-height:1.5;
		
		a{
			text-decoration:none;
			display:block;
			color:$text-color;			
			
			i{
				position:relative;
				width:45px;				
				line-height:45px;
				text-align:center;				
				&:before{
					z-index:10;
					position:relative;
				}
			}
			
			>span{				
				display: inline-block;
				visibility:visible;
				opacity:1;
				padding-left:10px;							
				-webkit-transition:all .2s ease-in-out .2s;
				transform:translate3d(0,0,0);
				text-transform: uppercase;
    	  font-size: 11px;
			}
		}
		
		&:hover{
			background: darken($base-color,5);
			
			.icon-bg{
				transform:translate3d(0,0,0);				
			}
			
			a>i{
				color: white;
			}
		}
	}
}

.icon-bg{
	position:absolute;
	left:0;top:0;bottom:0;
	z-index:1;
	width:100%;
	transform:translate3d(-43px,0,0);
	transition: all .2s ease-in-out;
}

.rad-txt-primary{
	color:#1C7EBB;
}
.rad-bg-primary{
	background:#1C7EBB;
}
.rad-txt-success{
	color:#23AE89;
}
.rad-bg-success{
	background:#23AE89;
}
.rad-txt-danger{
	color:#E94B3B;
}
.rad-bg-danger{
	background:#E94B3B;
}
.rad-txt-warning{
	color:#F98E33;
}
.rad-bg-warning{
	background:#F98E33;
}
.rad-txt-violet{
	color:#6A55C2;
}
.rad-bg-violet{
	background:#6A55C2;
}


.rad-logo-container.rad-nav-min{
	transform:translate3d(-180px,0,0);
		
	.rad-logo{
		opacity:0;
	}
	&+.rad-logo-hidden{
		opacity:1;
		visibility:visible;
	}
}

.rad-sidebar.rad-nav-min{
	width:45px !important;
	
	.rad-sidebar-item{
		opacity:0;
		visibility:hidden;
		-webkit-transition:all .1s linear;
		transform:translate3d(-200px,0,0);
	}
	
	.icon-bg{
		transform:translate3d(0,0,0);		
	}
	
	i{
		border:0px;	
		color:white;
		transition:all .2s linear;
	}
	
	li:hover{
		.icon-bg{
			transform:scale(1.2,1);
		}
	}
}


.rad-body-wrapper{
	position:absolute;
	left:230px;
	top:75px;
	width:auto;
	right:0;
	transition: all .2s ease-in-out;
}

.rad-body-wrapper.rad-nav-min{
	left:50px;
}

.rad-chart{
	height:250px;
}

.rad-map{
	width: 100%;
	height:100%;
}

.rad-map-container{
	height: 400px;
	position: relative;
}

.rad-collapse {
  height:0px;
  padding: 0;
	opacity:0;
  overflow: hidden;
}

@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
  }
}


@media screen and (max-width: 450px){
	.rad-info-box i{
		opacity:.3;
	}
	
	.flat-theme{
		.rad-toggle-btn{						
			right:20px !important;
	  }	
		
		.rad-top-nav-container{
			.links:last-child{
				display:none;
			}
		}
	}
}

@media screen and (min-width: 850px){		
		
		.rad-logo-container{						
			height:75px;
			
			.rad-logo{
				line-height:75px;				
			}
			
			.rad-toggle-btn{
				line-height:75px;
				height:auto;
			}
	  }	
		
		.rad-top-nav-container{
			padding:10px;
		}
		
		.rad-sidebar{
			top:75px;
		}
		.rad-body-wrapper{
			top:100px;
		}
	
		.flat-theme{
			.rad-toggle-btn{
				top:20px !important;
			}
		}
	
}

@media screen and (max-width: 850px){
	
	.flat-theme{
		
		.rad-menu-badge{
			top:-3px;
		}
		
		.rad-toggle-btn{						
			right:20px !important;
	  }
		
		.rad-body-wrapper{
			top:125px !important;
		}
		
		.rad-sidebar{
			position: absolute;
		}
		
		.rad-navigation{
			position:absolute;
			
			.links > li:first-child {
				 margin-left:15px !important;
			}
			
		}
		
		&.sticky{
			
			.rad-logo-container {
				z-index:10000;
				
				.rad-toggle-btn{
					color: #89949B!important;						
					position: fixed;						
					right: 120px !important;
					background: #f6f6f6;
					top: 11px;
					
					&:hover{
						background: crimson;
						color:#fff !important;
					}
				}
			}
			
			.rad-navigation{
				height:50px;			
			}

			.rad-sidebar{
				top:50px;
				position:fixed;
				//transition: none;
			}

			.rad-top-nav-container{
				background:#FFF important;
				box-shadow:0 0px 9px 4px rgba(#000, .1), 0 -5px 2px 2px rgba(#000, .1);
				position:fixed;
				left:0;
				top:0;
				width:100%;
				z-index:1000;
			}
			
			.links{
				margin-left:50px;
			}
			
			.brand-icon{
				margin-left: 0px;
				
				&:hover{
					color:#fff;
				}
			}

		}	
	}
	
	.rad-navigation{
		height:100px;
	}
	
	.rad-logo-container.rad-nav-min{
			transform:translate3d(0,0,0);
			background:transparent;		
			.rad-logo{
				opacity:1;
			}
		
			&+.rad-logo-hidden{
				display: none;
			}
	}
	
	.rad-logo-container{
		display:block;
		float:none;
		width:100%;		
		border-bottom:1px solid #F2F2F2;
	}
	
	.rad-top-nav-container{
		display:block;
		float:none;
		height:50px;		
		background: $base-color;
		
		.links>li>a{
			font-size:12px;
		}
	}
	
	.rad-menu-badge{
		font-size:10px;
		min-width:15px;
		min-height:15px;	
		line-height:15px;		
	}
	
	.rad-sidebar{
		top:100px;
	}
	
	.rad-sidebar.rad-nav-min{
		transform:translate3d(-200px,0,0);	
	}
	
	.rad-body-wrapper{
		top:125px;
		position:relative;
	}
	
	.rad-body-wrapper.rad-nav-min{
		left:0px;
	}
	
}

//---------------------------------------------------------
//Bootstrap Override
//---------------------------------------------------------

.panel{
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
	border-radius:0 !important;	
	position:relative;
	-webkit-transition:all .2s linear;
}

.panel-close{
	transform:scale3d(0,0,0);
}

.panel-body{
	position:relative;
	-webkit-transition:all .2s linear;
}

.panel-heading{
	background: $base-color !important;	
	border-radius:0;
	padding:15px;	
	border-bottom:0 !important;
}

.panel-heading .panel-title{
	text-transform:uppercase;
	font-weight:600;
	font-size:$font-size;	
	color:$text-color;
}

.overlay{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;			
	z-index:1001;
	background: rgba(255,255,255,0.75);
	text-align:center;
	
	&:before{
			content:"";
			height:100%;
			vertical-align: middle;
			width:1px;
			display:inline-block;
			margin-left:-5px;
	}
	
	.overlay-content{		
		display:inline-block;		
		vertical-align:middle;		
	}
	
	i{
		display:block;
		position:inline-block;
		vertical-align:middle;		
		color:black;		
	}
}

.rad-panel-action {
  list-style: none;
  display: inline-block;
  float: right;
}

.rad-panel-action li {
  display: inline-block;
  color: $text-color;
  margin: 0 5px;
  cursor: pointer;
}

.rad-info-box{	
	margin-bottom:16px;
	box-shadow:1px 1px 2px 0 #CCCCCC;
	padding:20px;
	box-shadow:0 2px 5px 0 rgba(0,0,0,.26);
	background:$base-color !important;
}

.rad-info-box i{
	display:block;
	background-clip:padding-box;
	margin-right:15px;
	height:60px;
	width:60px;
	border-radius:100%;
	line-height:60px;
	text-align:center;
	font-size:4.4em;
	position:absolute;	
}

.rad-info-box .value,
.rad-info-box .heading{
	display:block;	
	position:relative;
	color: $text-color;
	text-align:right;
	z-index:10;
}

.rad-info-box .heading{
	font-size:1.2em;
	font-weight:300;
	text-transform:uppercase;
}

.rad-info-box .value{
	font-size:2.1em;
	font-weight:600;
	margin-top:5px;
}

.rad-list-group-item{
	margin:5px 10px 25px 5px;	
	
	&:after{
		content:"";
		display:table;
	}
}

.rad-chat{
	border:1px solid rgba(#c6c6c6,.5);
	padding:0 10px;
	border-radius:2px;
	position:relative;	
}

.rad-chat-body{
	position:relative;
}

.rad-list-group-item.left{
	.rad-chat{
		margin-left:50px;
		.sm-text{
			float:right;
		}
		
		&:after{
			content:"";
			border-top:1px solid rgba(#c6c6c6,.5);
			border-left:1px solid rgba(#c6c6c6,.5);
			height:10px;
			width:10px;
			background:$base-color;
			position:absolute;
			left:-6px;
			top:10px;
			transform:rotate(-45deg);
		}
	}
}

.rad-chat-msg {
	font-size:14px;
	color:#585f69;
}

.rad-list-group-item.right{
	.rad-chat{
		margin-right:50px;		
		.lg-text{
			float:right;
		}
		
		&:after{
			content:"";
			border-top:1px solid rgba(#c6c6c6,.5);
			border-right:1px solid rgba(#c6c6c6,.5);
			height:10px;
			width:10px;
			background:$base-color;
			position:absolute;
			right:-6px;
			top:10px;
			transform:rotate(45deg);
		}
	}
}

.rad-list-icon{
	position:relative;
	height:40px;
	width:40px;
	border-radius:100%;
	line-height:40px;
	text-align:center;
	color: white;	
	top:-5px;
}

.icon-shadow{
	box-shadow: 0 0px 3px 1px rgba(0,0,0,.26);
}

.rad-list-img{
	border-radius:100%;
	width:32px;
	height:32px;
}

.rad-list-group{
	position:relative;
}

.rad-list-group.group{
	&:before{
		content:"";
		position:absolute;				
		background:rgba(#c6c6c6,.3);
		top:-20px;
		bottom:-20px;
		left:25px;
		width:1px;
	}
}

.rad-list-content{	
	line-height:1.3;
	margin-left:50px;
}

.rad-timeline {
			padding: 10px 0;
			position: relative;
	
			&:before {
				content: "";
				position: absolute;
				border: 1px solid #c6c6c6;
				left: 50%;
				top: 0;
				height: 100%;
				bottom: 1px;
				box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
			}
	
			.rad-timeline-item {
				list-style: none;
				padding: 10px;
				position: relative;
				vertical-align: middle;
				margin-bottom: 20px;
				font-size: 14px;
				
				.rad-timeline-badge {
					position: absolute;
					left: 50%;
					top: 0;
					margin-left: -15px;
					color: #FFF;
					width: 30px;
					height: 30px;
					font-size: 12px;
					border-radius: 100%;
					text-align: center;
					line-height: 25px;
					box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
					cursor: pointer;
					transition: all .2s easein-out;
					border: 2px solid #fff;
					
					span {
						transition: all 200ms linear;
						transform: scale(0);
						opacity: 0;
						position: absolute;
						color: #e6e6e6;
						background: Grey;
						min-width: 70px;
						border-radius: 3px;
						
						&.pull-right {
							right: 35px;
						}
						
						&.pull-left {
							left: 35px;
						}
						
					}
					&:hover span {
						opacity: 1;
						transform: scale(1);
					}
				}
				
				.rad-timeline-panel {
					position: relative;
					width: 40%;
					background: #FFF;
					padding: 15px;
					//box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
					top: -20px;
					margin-left: 10px;
					border-radius: 6px;
					border:1px solid rgba(0, 0, 0, 0.2);
					
					&:after {
						content: "";
						width: 15px;
						height: 15px;
						background: #FFF;
						position: absolute;
						top: 30px;
						right: -8.5px;
						margin-top: -10px;
						transform: rotate(135deg);
						border-top: 1px solid rgba(0, 0, 0, 0.2);
    				border-left: 1px solid rgba(0, 0, 0, 0.2);
					}
				}
				
				&:before {
					content: "";
					display: table;
				}
				
				&:after {
					content: "";
					clear: both;
					display: block;
					overflow: hidden;
				}
				
				&:first-child {
					margin-top: 20px;
				}
				
				.pull-right.rad-timeline-panel {
					background: #e6e6e6;
					margin-right: 10px;
					
					&:after {
						content: "";
						left: -8.5px;
						transform: rotate(-45deg);
						background: #e6e6e6;
					}
				}
			}
	
		}

.rad-timeline-footer {
	p {
		display: inline-block;
		font-weight: 600;
		color: #515d6e;
		i {
			font-size: 24px;
			color: crimson;
		}
	}
}

//-----------------------------
//Morris style overrides
//-----------------------------
.rad-chart {
	.morris-hover{
		display:none !important;	
	}
}
.rad-chart:hover{
	.morris-hover{
		display:block !important;	
	}
}


//**********************
// override fa
//**********************
.fa-spin{
	 -webkit-animation: fa-spin .5s infinite linear;
  animation: fa-spin .5s infinite linear;
}


.brand-icon{
	font-size:22px;
	height: 50px;
	display: inline-block;
	float: left;
	width: 50px;
	background-color: crimson;
	text-align: center;
	line-height: 50px;
	color: white;
	font-weight: 700;
	transition: all .2s linear;
	margin-left: -230px;
	display:none;
}

.flat-theme{
	
	body{
		background: #f1f2f7;
	}
	
	.brand-icon{
		display:inline-block;
	}
	
	.rad-logo{
		color:white;
	}
	
	.rad-navigation{		
		text-align: left;	
		
		.rad-top-nav-container{
			float: none !important;
			
			.links:last-child{
				float:none !important;
				
				& > li{															
					& > ul.rad-dropmenu-item{
						left:0;
						&:before{
							left:8px;
							right:100%;
						}
					}
					
				}
	
				& > li:first-child{
					margin-left:30px;
				}
				
			}
			
			.links > li{
				text-align: center;	
				
				& >a{
						border-radius: 50%;
						width: 32px;
						height: 32px;
						background: #f6f6f6;
						display:inline-block;
						line-height:32px;
					}
				
				&:hover{						
						>a{
							color:white !important;
						}
					}
			}			
		}
				
	}
	
	.rad-dropmenu-item{
		border-color:crimson !important;
		
		&:before{
			border-color: crimson transparent;
		}
	}
	
	.rad-logo-container.rad-nav-min{
		transform: none;	
		
		.rad-logo{
			opacity:1;	
		}
		
		& + .rad-logo-hidden{
			opacity:0;	
		}
	}
	
	.rad-logo-container{
		background: crimson !important;
		position:relative;
		z-index:1000;
		
		.rad-toggle-btn{
			color: #fff !important;
			font-size:14px;
			width:30px;
			height:30px;
			display:inline-block;
			position:absolute;
			line-height:30px;
			text-align:center;
			padding:0;
			border-radius:50%;
			right:-15px;
			background:red;
			top:7.5px;
			transition: all .2s linear;
		}
	}
	
	.rad-sidebar{
		background: #32323a !important;
		
		li{
			border-bottom:1px solid rgba(255,255,255,.05);			
			
			&:hover{
				background: #28282a !important;
				
				span{
					color:crimson !important;					
				}
			}
			
			& a {				
				i{
					color: white;
				}
				>span{
				 	color: #aeb2b7 !important;
					-webkit-transition: none;
			  }
			}
		}
	}
	
	.rad-info-box{
		box-shadow: none !important;
		border-radius:4px;
	}
	
	.panel{
		box-shadow: none !important;	
		border-radius: 4px !important;
		border:none !important;
		
		.panel-heading{
			background: #fafafa !important;
			border-top-left-radius: 4px;
    	border-top-right-radius: 4px;
		}
		
		.panel-body{
			border-bottom-left-radius: 4px;
    	border-bottom-right-radius: 4px;
		}
	}
	
	.panel-default{
		border-color: none;
	}
	
}

@each $key, $value in (crimson: crimson, teal: #1fb5ad, orange: #ff503f, purple: rebeccapurple, twitter: #55acee){
		
		.rad-bg-#{$key}{
			background: $value;
		}

		.flat-theme.#{$key}{
			.rad-logo-container{
				background: $value !important;
			}

			.rad-toggle-btn{
				background: darken($value,10) !important;
			}
			
			.rad-dropmenu-footer, 
			.rad-dropmenu-header{
					background: darken($value,10) !important;
			}
			

			.links{	
				& > li:not(.no-color){
					&:hover{						
						>a{
							background: lighten($value,5) !important;
						}
					}
				}
			}
			
			.rad-dropmenu-item{
				border-color: darken($value,10) !important;
				&:before{
					border-color: darken($value,10) transparent;
				}
			}

			.rad-sidebar{
				li:hover a>span{
					color: $value !important;
				}
			}

			&.sticky {	
				
				@media screen and (max-width: 850px){		
					.rad-toggle-btn{
							background: #fafafa !important;
							color:#89949B !important;
					}		
				}
				
				.brand-icon,
				.rad-toggle-btn:hover{
					background: $value !important;
					color: #fff !important;
				}
			}
	}
}
              
            
!

JS

              
                ///Last modified 02/06/2016
//Sathish kumar
//Added theming

$(function () {
	var world;
	var mapSeries = {
		AF: 16.63,
		AL: 11.58,
		DZ: 158.97,
		AO: 85.81,
		AG: 1.1,
		AR: 351.02,
		AM: 8.83,
		AU: 1219.72,
		AT: 366.26,
		AZ: 52.17,
		BS: 7.54,
		IN: 4949,
		US: 852
	};
	var settings = {
		map: "world_mill",
		container: $("#world-map"),
		backgroundColor: "transparent",
		colors: "#3377CC",
		zoomOnScroll: false,
		regionStyle: {
			initial: {
				fill: "crimson"
			}
		},
		series: {
			regions: [
				{
					values: mapSeries,
					scale: ["#A8ECFF", "#FA71D4"],
					normalizeFunction: "polynomial"
				}
			]
		}
	};

	function setFlatTheme() {
		$("body").toggleClass("flat-theme");
		$("#rad-color-opts").toggleClass("hide");
		$(".rad-chk-pin input[type=checkbox]").prop("checked", true);
	}

	setFlatTheme();

	$(window).on("scroll", function (e) {
		if ($(window).scrollTop() > 50) {
			$("body").addClass("sticky");
		} else {
			$("body").removeClass("sticky");
		}
	});

	$(document).on("click", function (e) {
		e.preventDefault();
		var $item = $(".rad-dropmenu-item");
		if ($item.hasClass("active")) {
			$item.removeClass("active");
		}
	});

	$(".rad-sidebar a").on("click", function (e) {
		e.stopPropagation();
	});

	$(".rad-chat-body").slimScroll({
		height: "450px",
		color: "#c6c6c6"
	});

	$(".rad-timeline-body").slimScroll({
		height: "450px",
		color: "#c6c6c6"
	});

	$(".rad-activity-body").slimScroll({
		height: "250px",
		color: "#c6c6c6"
	});

	$(".rad-toggle-btn").on("click", function () {
		$(".rad-logo-container").toggleClass("rad-nav-min");
		$(".rad-sidebar").toggleClass("rad-nav-min");
		$(".rad-body-wrapper").toggleClass("rad-nav-min");
		setTimeout(function () {
			initializeCharts();
		}, 200);
	});

	$("li.rad-dropdown > a.rad-menu-item").on("click", function (e) {
		e.preventDefault();
		e.stopPropagation();
		$(".rad-dropmenu-item").removeClass("active");
		$(this).next(".rad-dropmenu-item").toggleClass("active");
	});

	$(".fa-chevron-down").on("click", function () {
		var $ele = $(this).parents(".panel-heading");
		$ele.siblings(".panel-footer").toggleClass("rad-collapse");
		$ele.siblings(".panel-body").toggleClass("rad-collapse", function () {
			setTimeout(function () {
				initializeCharts();
			}, 200);
		});
	});

	$(".fa-close").on("click", function () {
		var $ele = $(this).parents(".panel");
		$ele.addClass("panel-close");
		setTimeout(function () {
			$ele.parent().remove();
		}, 210);
	});

	$(".fa-rotate-right").on("click", function () {
		var $ele = $(this).parents(".panel-heading").siblings(".panel-body");
		$ele.append(
			'<div class="overlay"><div class="overlay-content"><i class="fa fa-refresh fa-2x fa-spin"></i></div></div>'
		);
		setTimeout(function () {
			$ele.find(".overlay").remove();
		}, 2000);
	});

	$("#rad-chat-send").on("click", function () {
		var value = $("#rad-chat-txt").val();
		var $ele = $(".rad-chat-body");
		var img =
			"https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg";
		
		if (value) {
			$("#rad-chat-txt").val("");
			$ele.append(getTempl(img, value, "left"));
			
			setTimeout(function () {
				img = "http://www.gravatar.com/avatar/9099c2946891970eb4739e6455400913.png";
				$ele.append(getTempl(img, "Cool!!!", "right"));
				$ele.slimScroll({
					scrollTo: $ele[0].scrollHeight
				});
			}, 2000);

			$ele.slimScroll({
				scrollTo: $ele[0].scrollHeight
			});
		}
	});

	$(".rad-chk-pin input[type=checkbox]").change(function (e) {
		$("body").toggleClass("flat-theme");
		$("#rad-color-opts").toggleClass("hide");
		var selectedTheme = $(".rad-color-swatch input[type=radio]:checked");
		var fillColor = '#C6C6C6';
		var scale = ["#C8EEFF", "#0071A4"];

		if (this.checked) {
			scale = ["#A8ECFF", "#FA71D4"];
			fillColor = colorMap[selectedTheme.val()];
		}
		
		changeMapColors(fillColor, scale);
	});
	
	function changeMapColors(fillColor, scale) {
		world.remove();
		settings.regionStyle.initial.fill = fillColor;
		settings.series.regions[0].scale = scale;
		world = new jvm.Map(settings);
	}

	var colorMap = {
		crimson: "crimson",
		teal: "#1fb5ad",
		orange: "#ff503f",
		purple: "rebeccapurple",
		twitter: "#55acee"
	};

	$(".rad-color-swatch input[type=radio]").change(function (e) {
		if ($(".rad-chk-pin input[type=checkbox]").is(":checked")) {
			$("body").removeClass().addClass("flat-theme").addClass(this.value);
			$(".rad-color-swatch label").removeClass("rad-option-selected");
			$(this).parent().addClass("rad-option-selected");
			$(window).scrollTop(0);

			changeMapColors(colorMap[this.value], ["#A8ECFF", "#FA71D4"]);
		}
	});

	$(".rad-notification-item").on("click", function (e) {
		e.stopPropagation();
	});

	$(window).resize(function () {
		setTimeout(function () {
			initializeCharts();
		}, 200);
	});

	var colors = ["#E94B3B", "#39C7AA", "#1C7EBB", "#F98E33"];
	var data = [
			{
				y: "Jan",
				a: 50,
				b: 90
			},
			{
				y: "Feb",
				a: 75,
				b: 65
			},
			{
				y: "Mar",
				a: 50,
				b: 40
			},
			{
				y: "Apr",
				a: 10,
				b: 20
			},
			{
				y: "May",
				a: 95,
				b: 65
			},
			{
				y: "Jun",
				a: 50,
				b: 40
			},
			{
				y: "Jul",
				a: 75,
				b: 65
			},
			{
				y: "Aug",
				a: 100,
				b: 90
			},
			{
				y: "Sep",
				a: 15,
				b: 65
			},
			{
				y: "Oct",
				a: 75,
				b: 65
			},
			{
				y: "Nov",
				a: 15,
				b: 65
			},
			{
				y: "Dec",
				a: 95,
				b: 65
			}
		];

	function initializeCharts() {
		$(".rad-chart").empty();
		$(".d3-*").empty();

		Morris.Line({
			lineColors: ["#E67A77", "#D9DD81", "#79D1CF", "#95D7BB"],
			element: "lineChart",
			data: [
				{
					year: "2008",
					value: 45,
					value2: 15,
					value3: 95
				},
				{
					year: "2009",
					value: 10,
					value2: 40,
					value3: 80
				},
				{
					year: "2010",
					value: 45,
					value2: 95,
					value3: 5
				},
				{
					year: "2011",
					value: 20,
					value2: 60,
					value3: 40
				},
				{
					year: "2012",
					value: 45,
					value2: 0,
					value3: 90
				}
			],
			xkey: "year",
			ykeys: ["value", "value2", "value3"],
			labels: ["Value", "value2", "value3"],
			pointSize: 0,
			hideHover: "auto"
		});

		Morris.Donut({
			element: "donutChart",
			data: getDonutData("Sector", "Country"),
			labelColor: "#23AE89",
			colors: ["#E67A77", "#D9DD81", "#79D1CF", "#95D7BB"]
		});

		Morris.Bar({
			element: "barChart",
			data: data,
			xkey: "y",
			ykeys: ["a", "b"],
			barColors: ["#95D7BB", "#79D1CF"],
			labels: ["Series A", "Series B"]
		});

		Morris.Bar({
			element: "barChart2",
			data: getDonutData("Sector", "Volume"),
			xkey: "label",
			ykeys: ["value"],
			barColors: ["#D9DD81", "#79D1CF", "#95D7BB"],
			labels: ["Sector by Volume"]
		});

		Morris.Bar({
			element: "barChart3",
			data: data,
			xkey: "y",
			ykeys: ["a", "b"],
			barColors: ["#E67A77", "#79D1CF"],
			labels: ["Series A", "Series B"]
		});

		Morris.Area({
			element: "areaChart2",
			behaveLikeLine: true,
			padding: 10,
			fillOpacity: 0.7,
			lineColors: ["#ED5D5D", "#D6D23A"],
			gridEnabled: false,
			gridLineColor: "#dddddd",
			axes: true,
			data: [
				{
					y: "2006",
					a: 0,
					c: 0
				},
				{
					y: "2007",
					a: 75,
					c: 112
				},
				{
					y: "2008",
					a: 50,
					c: 72
				},
				{
					y: "2009",
					a: 75,
					c: 2
				},
				{
					y: "2010",
					a: 150,
					c: 92
				},
				{
					y: "2011",
					a: 75,
					c: 22
				},
				{
					y: "2012",
					a: 3,
					c: 0
				}
			],
			xkey: "y",
			ykeys: ["a", "c"],
			labels: ["Open", "Closed"],
			pointSize: 0,
			lineWidth: 0,
			hideHover: "auto"
		});

		Morris.Area({
			element: "areaChart",
			padding: 10,
			behaveLikeLine: true,
			gridEnabled: false,
			gridLineColor: "#dddddd",
			axes: true,
			fillOpacity: 0.7,
			data: [
				{
					period: "2010 Q1",
					iphone: 10,
					ipad: 10,
					itouch: 10
				},
				{
					period: "2010 Q2",
					iphone: 1778,
					ipad: 7294,
					itouch: 18441
				},
				{
					period: "2010 Q3",
					iphone: 4912,
					ipad: 12969,
					itouch: 3501
				},
				{
					period: "2010 Q4",
					iphone: 3767,
					ipad: 3597,
					itouch: 5689
				},
				{
					period: "2011 Q1",
					iphone: 6810,
					ipad: 1914,
					itouch: 2293
				},
				{
					period: "2011 Q2",
					iphone: 5670,
					ipad: 4293,
					itouch: 1881
				},
				{
					period: "2011 Q3",
					iphone: 4820,
					ipad: 3795,
					itouch: 1588
				},
				{
					period: "2011 Q4",
					iphone: 25073,
					ipad: 5967,
					itouch: 5175
				},
				{
					period: "2012 Q1",
					iphone: 10687,
					ipad: 34460,
					itouch: 22028
				},
				{
					period: "2012 Q2",
					iphone: 1000,
					ipad: 5713,
					itouch: 1791
				}
			],
			lineColors: ["#ED5D5D", "#D6D23A", "#32D2C9"],
			xkey: "period",
			ykeys: ["iphone", "ipad", "itouch"],
			labels: ["iPhone", "iPad", "iPod Touch"],
			pointSize: 0,
			lineWidth: 0,
			hideHover: "auto"
		});
	}

	function getTempl(img, text, position) {
		return (
			'<div class="rad-list-group-item ' +
			position +
			'"><span class="rad-list-icon pull-' +
			position +
			'"><img class="rad-list-img" src=' +
			img +
			' alt="me" /></span><div class="rad-list-content rad-chat"><span class="lg-text">Me</span><span class="sm-text"><i class="fa fa-clock-o"></i> ' +
			formatTime(new Date()) +
			'</span><div class="rad-chat-msg">' +
			text +
			"</div>"
		);
	}

	function formatTime(date) {
		var hours = date.getHours();
		var minutes = date.getMinutes();
		var ampm = hours >= 12 ? "pm" : "am";
		
		hours = hours % 12;
		hours = hours ? hours : 12;
		minutes = minutes < 10 ? "0" + minutes : minutes;
		
		return hours + ":" + minutes + " " + ampm;
	}

	initializeCharts();

	world = new jvm.Map(settings);
});

var monthNames = [
		"Jan",
		"Feb",
		"Mar",
		"Apr",
		"May",
		"Jun",
		"Jul",
		"Aug",
		"Sep",
		"Oct",
		"Nov",
		"Dec"
	];

var data = [
		{
			label: "Technology",
			value: 20
		},
		{
			label: "Financial",
			value: 45
		},
		{
			label: "Industrial Goods",
			value: 30
		},
		{
			label: "Consumer Goods",
			value: 10
		},
		{
			label: "Basic Materials",
			value: 5
		}
	];

function getDonutData(group, column) {
	function sum(numbers) {
		return _.reduce(
			numbers,
			function (result, current) {
				return result + 1;
			},
			0
		);
	}
	var result = _.chain(getChartData())
		.groupBy(group)
		.map(function (value, key) {
			return {
				label: key,
				value: sum(_.pluck(value, column))
			};
		})
		.value();

	return result;
}

function getChartData() {
	return [
		{
			_id: {
				$oid: "52853800bb1177ca391c17ff"
			},
			Ticker: "A",
			"Profit Margin": 0.137,
			"Institutional Ownership": 0.847,
			"EPS growth past 5 years": 0.158,
			"Total Debt/Equity": 0.5600000000000001,
			"Current Ratio": 3,
			"Return on Assets": 0.089,
			Sector: "Healthcare",
			"P/S": 2.54,
			"Change from Open": -0.0148,
			"Performance (YTD)": 0.2605,
			"Performance (Week)": 0.0031,
			"Quick Ratio": 2.3,
			"Insider Transactions": -0.1352,
			"P/B": 3.63,
			"EPS growth quarter over quarter": -0.29,
			"Payout Ratio": 0.162,
			"Performance (Quarter)": 0.09279999999999999,
			"Forward P/E": 16.11,
			"P/E": 19.1,
			"200-Day Simple Moving Average": 0.1062,
			"Shares Outstanding": 339,
			"Earnings Date": {
				$date: 1384464600000
			},
			"52-Week High": -0.0544,
			"P/Cash": 7.45,
			Change: -0.0148,
			"Analyst Recom": 1.6,
			"Volatility (Week)": 0.0177,
			Country: "USA",
			"Return on Equity": 0.182,
			"50-Day Low": 0.0728,
			Price: 50.44,
			"50-Day High": -0.0544,
			"Return on Investment": 0.163,
			"Shares Float": 330.21,
			"Dividend Yield": 0.0094,
			"EPS growth next 5 years": 0.0843,
			Industry: "Medical Laboratories & Research",
			Beta: 1.5,
			"Sales growth quarter over quarter": -0.041,
			"Operating Margin": 0.187,
			"EPS (ttm)": 2.68,
			PEG: 2.27,
			"Float Short": 0.008,
			"52-Week Low": 0.4378,
			"Average True Range": 0.86,
			"EPS growth next year": 0.1194,
			"Sales growth past 5 years": 0.048,
			Company: "Agilent Technologies Inc.",
			Gap: 0,
			"Relative Volume": 0.79,
			"Volatility (Month)": 0.0168,
			"Market Cap": 17356.8,
			Volume: 1847978,
			"Gross Margin": 0.512,
			"Short Ratio": 1.03,
			"Performance (Half Year)": 0.1439,
			"Relative Strength Index (14)": 46.51,
			"Insider Ownership": 0.001,
			"20-Day Simple Moving Average": -0.0172,
			"Performance (Month)": 0.0063,
			"P/Free Cash Flow": 19.63,
			"Institutional Transactions": -0.0074,
			"Performance (Year)": 0.4242,
			"LT Debt/Equity": 0.5600000000000001,
			"Average Volume": 2569.36,
			"EPS growth this year": 0.147,
			"50-Day Simple Moving Average": -0.0055
		},
		{
			_id: {
				$oid: "52853800bb1177ca391c1800"
			},
			Ticker: "AA",
			"Profit Margin": 0.013,
			"Institutional Ownership": 0.599,
			"EPS growth past 5 years": -0.439,
			"Total Debt/Equity": 0.65,
			"Current Ratio": 1.2,
			"Return on Assets": 0.008,
			Sector: "Basic Materials",
			"P/S": 0.41,
			"Change from Open": -0.0022,
			"Performance (YTD)": 0.0502,
			"Performance (Week)": -0.0694,
			"Quick Ratio": 0.7,
			"Insider Transactions": 0.1031,
			"P/B": 0.75,
			"EPS growth quarter over quarter": 1.143,
			"Payout Ratio": 0.429,
			"Performance (Quarter)": 0.1058,
			"Forward P/E": 21.35,
			"P/E": 35.96,
			"200-Day Simple Moving Average": 0.0823,
			"Shares Outstanding": 1070,
			"Earnings Date": {
				$date: 1381264200000
			},
			"52-Week High": -0.0925,
			"P/Cash": 9.460000000000001,
			Change: 0.0033,
			"Analyst Recom": 3.1,
			"Volatility (Week)": 0.0345,
			Country: "USA",
			"Return on Equity": 0.023,
			"50-Day Low": 0.1579,
			Price: 9.02,
			"50-Day High": -0.0925,
			"Return on Investment": 0.007,
			"Shares Float": 1068.5,
			"Dividend Yield": 0.0133,
			"EPS growth next 5 years": 0.1747,
			Industry: "Aluminum",
			Beta: 2.02,
			"Sales growth quarter over quarter": -0.012,
			"Operating Margin": 0.049,
			"EPS (ttm)": 0.25,
			PEG: 2.06,
			"Float Short": 0.1129,
			"52-Week Low": 0.1899,
			"Average True Range": 0.3,
			"EPS growth next year": 0.231,
			"Sales growth past 5 years": -0.041,
			Company: "Alcoa, Inc.",
			Gap: 0.0056,
			"Relative Volume": 0.6,
			"Volatility (Month)": 0.0336,
			"Market Cap": 9619.299999999999,
			Volume: 14600992,
			"Gross Margin": 0.163,
			"Short Ratio": 4.51,
			"Performance (Half Year)": 0.06519999999999999,
			"Relative Strength Index (14)": 49.61,
			"Insider Ownership": 0.0007,
			"20-Day Simple Moving Average": -0.0192,
			"Performance (Month)": 0.0766,
			"P/Free Cash Flow": 33.17,
			"Institutional Transactions": 0.0252,
			"Performance (Year)": 0.0963,
			"LT Debt/Equity": 0.6,
			"Average Volume": 26728.11,
			"EPS growth this year": -0.673,
			"50-Day Simple Moving Average": 0.052
		},
		{
			_id: {
				$oid: "52853800bb1177ca391c1801"
			},
			Ticker: "AADR",
			Sector: "Financial",
			"Change from Open": 0.0055,
			"Performance (YTD)": 0.1809,
			"Performance (Week)": -0.0134,
			"Performance (Quarter)": 0.061,
			"200-Day Simple Moving Average": 0.0693,
			"52-Week High": -0.0194,
			Change: 0.0064,
			"Volatility (Week)": 0.0072,
			Country: "USA",
			"50-Day Low": 0.07920000000000001,
			Price: 36.4,
			"50-Day High": -0.0194,
			"Dividend Yield": 0.005,
			Industry: "Exchange Traded Fund",
			"52-Week Low": 0.2727,
			"Average True Range": 0.31,
			Company: "WCM/BNY Mellon Focused Growth ADR ETF",
			Gap: 0.0008,
			"Relative Volume": 0.72,
			"Volatility (Month)": 0.0052,
			Volume: 6660,
			"Performance (Half Year)": 0.04,
			"Relative Strength Index (14)": 51.91,
			"20-Day Simple Moving Average": -0.0054,
			"Performance (Month)": 0.0183,
			"Performance (Year)": 0.229,
			"Average Volume": 10.07,
			"50-Day Simple Moving Average": 0.0158
		},
		{
			_id: {
				$oid: "52853800bb1177ca391c1802"
			},
			Ticker: "AAIT",
			Sector: "Financial",
			"Change from Open": -0.0232,
			"Performance (YTD)": 0.1048,
			"Performance (Week)": -0.0097,
			"Performance (Quarter)": 0.1129,
			"200-Day Simple Moving Average": 0.0492,
			"52-Week High": -0.0641,
			Change: -0.02,
			"Volatility (Week)": 0.014,
			Country: "USA",
			"50-Day Low": 0.0609,
			Price: 29.95,
			"50-Day High": -0.0641,
			"Dividend Yield": 0.036,
			Industry: "Exchange Traded Fund",
			"52-Week Low": 0.1791,
			"Average True Range": 0.45,
			Company: "iShares MSCI AC Asia Information Tech",
			Gap: 0.0033,
			"Relative Volume": 0.17,
			"Volatility (Month)": 0.0111,
			Volume: 250,
			"Short Ratio": 0.04,
			"Performance (Half Year)": 0.0307,
			"Relative Strength Index (14)": 38.79,
			"20-Day Simple Moving Average": -0.0295,
			"Performance (Month)": 0.003,
			"Performance (Year)": 0.1947,
			"Average Volume": 1.64,
			"50-Day Simple Moving Average": -0.0065
		},
		{
			_id: {
				$oid: "52853800bb1177ca391c1803"
			},
			Ticker: "AAMC",
			"Institutional Ownership": 0.153,
			Sector: "Financial",
			"Change from Open": 0.0476,
			"Performance (YTD)": 6.1951,
			"Performance (Week)": -0.0781,
			"Insider Transactions": 0.0002,
			"P/B": 393.33,
			"Performance (Quarter)": 0.7101,
			"200-Day Simple Moving Average": 0.9846,
			"Shares Outstanding": 2.35,
			"52-Week High": -0.1812,
			Change: 0.0135,
			"Volatility (Week)": 0.0283,
			Country: "USA",
			"50-Day Low": 0.8672,
			Price: 597.98,
			"50-Day High": -0.1812,
			Industry: "Asset Management",
			"EPS (ttm)": -0.02,
			"52-Week Low": 38.8653,
			"Average True Range": 30.17,
			Company: "Altisource Asset Management Corporation",
			Gap: -0.0325,
			"Relative Volume": 0.12,
			"Volatility (Month)": 0.0388,
			"Market Cap": 1386.5,
			Volume: 543,
			"Short Ratio": 8.91,
			"Performance (Half Year)": 0.9832,
			"Relative Strength Index (14)": 54.38,
			"Insider Ownership": 0.4634,
			"20-Day Simple Moving Average": -0.0189,
			"Performance (Month)": 0.0631,
			"Institutional Transactions": 0.1176,
			"Average Volume": 4.94,
			"50-Day Simple Moving Average": 0.1281
		},
		{
			_id: {
				$oid: "52853800bb1177ca391c1804"
			},
			Ticker: "AAME",
			"Profit Margin": 0.056,
			"Institutional Ownership": 0.05,
			"EPS growth past 5 years": -0.167,
			"Total Debt/Equity": 0.42,
			"Return on Assets": 0.027,
			Sector: "Financial",
			"P/S": 0.57,
			"Change from Open": -0.0025,
			"Performance (YTD)": 0.316,
			"Performance (Week)": 0,
			"P/B": 0.87,
			"EPS growth quarter over quarter": 7.667,
			"Payout Ratio": 0.05,
			"Performance (Quarter)": 0.0576,
			"P/E": 10.63,
			"200-Day Simple Moving Average": 0.08450000000000001,
			"Shares Outstanding": 21.27,
			"Earnings Date": {
				$date: 1383541200000
			},
			"52-Week High": -0.0382,
			"P/Cash": 1.82,
			Change: -0.0025,
			"Volatility (Week)": 0.0239,
			Country: "USA",
			"Return on Equity": 0.082,
			"50-Day Low": 0.0747,
			Price: 4.03,
			"50-Day High": -0.0098,
			"Return on Investment": 0.031,
			"Shares Float": 5.24,
			"Dividend Yield": 0.005,
			Industry: "Life Insurance",
			Beta: 0.72,
			"Sales growth quarter over quarter": 0.274,
			"Operating Margin": 0.078,
			"EPS (ttm)": 0.38,
			"Float Short": 0.0025,
			"52-Week Low": 0.6087,
			"Average True Range": 0.06,
			"Sales growth past 5 years": 0.026,
			Company: "Atlantic American Corp.",
			Gap: 0,
			"Relative Volume": 2.05,
			"Volatility (Month)": 0.013,
			"Market Cap": 85.92,
			Volume: 17754,
			"Short Ratio": 1.35,
			"Performance (Half Year)": 0.0949,
			"Relative Strength Index (14)": 46.3,
			"Insider Ownership": 0.7513,
			"20-Day Simple Moving Average": -0.0035,
			"Performance (Month)": 0.0025,
			"P/Free Cash Flow": 35.8,
			"Institutional Transactions": -0.0009,
			"Performance (Year)": 0.4175,
			"LT Debt/Equity": 0.42,
			"Average Volume": 9.51,
			"EPS growth this year": 0.5,
			"50-Day Simple Moving Average": 0.0038
		},
		{
			_id: {
				$oid: "52853800bb1177ca391c1805"
			},
			Ticker: "AAN",
			"Profit Margin": 0.06,
			"Institutional Ownership": 0.98,
			"EPS growth past 5 years": 0.204,
			"Total Debt/Equity": 0.12,
			"Return on Assets": 0.074,
			Sector: "Services",
			"P/S": 1.02,
			"Change from Open": 0,
			"Performance (YTD)": 0.0658,
			"Performance (Week)": 0.0488,
			"Insider Transactions": 0.206,
			"P/B": 1.89,
			"EPS growth quarter over quarter": -0.263,
			"Payout Ratio": 0.038,
			"Performance (Quarter)": 0.0949,
			"Forward P/E": 14.02,
			"P/E": 17.11,
			"200-Day Simple Moving Average": 0.0653,
			"Shares Outstanding": 76.09999999999999,
			"Earnings Date": {
				$date: 1382646600000
			},
			"52-Week High": -0.023,
			"P/Cash": 10.88,
			Change: 0.0013,
			"Analyst Recom": 2.8,
			"Volatility (Week)": 0.0177,
			Country: "USA",
			"Return on Equity": 0.116,
			"50-Day Low": 0.1508,
			Price: 30.15,
			"50-Day High": -0.002,
			"Return on Investment": 0.138,
			"Shares Float": 67.11,
			"Dividend Yield": 0.0023,
			"EPS growth next 5 years": 0.08,
			Industry: "Rental & Leasing Services",
			Beta: 1.04,
			"Sales growth quarter over quarter": 0.019,
			"Operating Margin": 0.108,
			"EPS (ttm)": 1.76,
			PEG: 2.14,
			"Float Short": 0.0601,
			"52-Week Low": 0.2264,
			"Average True Range": 0.49,
			"EPS growth next year": 0.0926,
			"Sales growth past 5 years": 0.098,
			Company: "Aaron's, Inc.",
			Gap: 0.0013,
			"Relative Volume": 1.71,
			"Volatility (Month)": 0.0171,
			"Market Cap": 2291.4,
			Volume: 1190872,
			"Gross Margin": 0.832,
			"Short Ratio": 5.28,
			"Performance (Half Year)": 0.0517,
			"Relative Strength Index (14)": 71.11,
			"Insider Ownership": 0.005,
			"20-Day Simple Moving Average": 0.043,
			"Performance (Month)": 0.0617,
			"Institutional Transactions": 0.0172,
			"Performance (Year)": 0.0255,
			"LT Debt/Equity": 0.12,
			"Average Volume": 763.14,
			"EPS growth this year": 0.573,
			"50-Day Simple Moving Average": 0.0742
		},
		{
			_id: {
				$oid: "52853800bb1177ca391c1806"
			},
			Ticker: "AAOI",
			"Profit Margin": -0.023,
			"Institutional Ownership": 0.114,
			"EPS growth past 5 years": 0,
			"Current Ratio": 1.5,
			"Return on Assets": -0.048,
			Sector: "Technology",
			"P/S": 2.3,
			"Change from Open": -0.0215,
			"Performance (YTD)": 0.2671,
			"Performance (Week)": -0.0381,
			"Quick Ratio": 0.9,
			"EPS growth quarter over quarter": -1,
			"Forward P/E": 12.77,
			"200-Day Simple Moving Average": 0.0654,
			"Shares Outstanding": 12.6,
			"52-Week High": -0.09039999999999999,
			"P/Cash": 16.23,
			Change: -0.0269,
			"Analyst Recom": 1.8,
			"Volatility (Week)": 0.0377,
			Country: "USA",
			"Return on Equity": 0.043,
			"50-Day Low": 0.3539,
			Price: 12.28,
			"50-Day High": -0.09039999999999999,
			"Return on Investment": -0.004,
			"Shares Float": 11.46,
			Industry: "Semiconductor - Integrated Circuits",
			"Sales growth quarter over quarter": 0.256,
			"Operating Margin": -0.007,
			"EPS (ttm)": -0.13,
			"Float Short": 0.0011,
			"52-Week Low": 0.3539,
			"Average True Range": 0.63,
			"EPS growth next year": 38.52,
			Company: "Applied Optoelectronics, Inc.",
			Gap: -0.0055,
			"Relative Volume": 0.12,
			"Volatility (Month)": 0.0608,
			"Market Cap": 159.06,
			Volume: 12203,
			"Gross Margin": 0.292,
			"Short Ratio": 0.12,
			"Insider Ownership": 0.021,
			"20-Day Simple Moving Average": -0.0251,
			"Performance (Month)": 0.2397,
			"Average Volume": 110.95,
			"EPS growth this year": 0.833,
			"50-Day Simple Moving Average": 0.0654
		},
		{
			_id: {
				$oid: "52853800bb1177ca391c1807"
			},
			Ticker: "AAON",
			"Profit Margin": 0.105,
			"Institutional Ownership": 0.581,
			"EPS growth past 5 years": 0.065,
			"Total Debt/Equity": 0,
			"Current Ratio": 2.3,
			"Return on Assets": 0.163,
			Sector: "Industrial Goods",
			"P/S": 4.78,
			"Change from Open": 0.019,
			"Performance (YTD)": 0.956,
			"Performance (Week)": -0.056,
			"Quick Ratio": 1.6,
			"Insider Transactions": 0.0024,
			"P/B": 9.789999999999999,
			"EPS growth quarter over quarter": -0.12,
			"Payout Ratio": 0.188,
			"Performance (Quarter)": 0.0944,
			"Forward P/E": 24.01,
			"P/E": 34.78,
			"200-Day Simple Moving Average": 0.2614,
			"Shares Outstanding": 55.14,
			"Earnings Date": {
				$date: 1383859800000
			},
			"52-Week High": -0.054,
			"P/Cash": 49.53,
			Change: 0.016,
			"Analyst Recom": 3,
			"Volatility (Week)": 0.0558,
			Country: "USA",
			"Return on Equity": 0.229,
			"50-Day Low": 0.1558,
			Price: 27.57,
			"50-Day High": -0.054,
			"Return on Investment": 0.198,
			"Shares Float": 28.02,
			"Dividend Yield": 0.0048,
			"EPS growth next 5 years": 0.1,
			Industry: "General Building Materials",
			Beta: 1.2,
			"Sales growth quarter over quarter": 0.095,
			"Operating Margin": 0.158,
			"EPS (ttm)": 0.78,
			PEG: 3.48,
			"Float Short": 0.0369,
			"52-Week Low": 1.2639,
			"Average True Range": 1.07,
			"EPS growth next year": 0.1649,
			"Sales growth past 5 years": 0.029,
			Company: "AAON Inc.",
			Gap: -0.0029,
			"Relative Volume": 0.53,
			"Volatility (Month)": 0.0381,
			"Market Cap": 1495.92,
			Volume: 43938,
			"Gross Margin": 0.252,
			"Short Ratio": 11.42,
			"Performance (Half Year)": 0.317,
			"Relative Strength Index (14)": 54.09,
			"Insider Ownership": 0.203,
			"20-Day Simple Moving Average": 0.0057,
			"Performance (Month)": 0.0044,
			"P/Free Cash Flow": 35.36,
			"Institutional Transactions": 0.0094,
			"Performance (Year)": 1.1312,
			"LT Debt/Equity": 0,
			"Average Volume": 90.54000000000001,
			"EPS growth this year": 1,
			"50-Day Simple Moving Average": 0.0389
		},
		{
			_id: {
				$oid: "52853800bb1177ca391c1808"
			},
			Ticker: "AAP",
			"Profit Margin": 0.063,
			"Institutional Ownership": 0.971,
			"EPS growth past 5 years": 0.18,
			"Total Debt/Equity": 0.41,
			"Current Ratio": 1.3,
			"Return on Assets": 0.08500000000000001,
			Sector: "Services",
			"P/S": 1.13,
			"Change from Open": -0.0067,
			"Performance (YTD)": 0.3808,
			"Performance (Week)": 0.0119,
			"Quick Ratio": 0.3,
			"Insider Transactions": -0.036,
			"P/B": 4.94,
			"EPS growth quarter over quarter": 0.174,
			"Payout Ratio": 0.043,
			"Performance (Quarter)": 0.2183,
			"Forward P/E": 14.45,
			"P/E": 18.03,
			"200-Day Simple Moving Average": 0.1903,
			"Shares Outstanding": 72.75,
			"Earnings Date": {
				$date: 1383222600000
			},
			"52-Week High": -0.038,
			"P/Cash": 12.78,
			Change: -0.0077,
			"Analyst Recom": 2.3,
			"Volatility (Week)": 0.0182,
			Country: "USA",
			"Return on Equity": 0.306,
			"50-Day Low": 0.2545,
			Price: 98.92,
			"50-Day High": -0.038,
			"Return on Investment": 0.231,
			"Shares Float": 72.26000000000001,
			"Dividend Yield": 0.0024,
			"EPS growth next 5 years": 0.13,
			Industry: "Auto Parts Stores",
			Beta: 0.34,
			"Sales growth quarter over quarter": 0.043,
			"Operating Margin": 0.106,
			"EPS (ttm)": 5.53,
			PEG: 1.39,
			"Float Short": 0.0342,
			"52-Week Low": 0.4159,
			"Average True Range": 2.11,
			"EPS growth next year": 0.2562,
			"Sales growth past 5 years": 0.051,
			Company: "Advance Auto Parts Inc.",
			Gap: -0.001,
			"Relative Volume": 0.32,
			"Volatility (Month)": 0.0189,
			"Market Cap": 7251.42,
			Volume: 220670,
			"Gross Margin": 0.501,
			"Short Ratio": 3.3,
			"Performance (Half Year)": 0.1687,
			"Relative Strength Index (14)": 62.29,
			"Insider Ownership": 0.007,
			"20-Day Simple Moving Average": -0.0031,
			"Performance (Month)": 0.2082,
			"P/Free Cash Flow": 21.1,
			"Institutional Transactions": 0.0089,
			"Performance (Year)": 0.2613,
			"LT Debt/Equity": 0.41,
			"Average Volume": 749.1,
			"EPS growth this year": 0.022,
			"50-Day Simple Moving Average": 0.1151
		},
		{
			_id: {
				$oid: "52853800bb1177ca391c1809"
			},
			Ticker: "AAPL",
			"Profit Margin": 0.217,
			"Institutional Ownership": 0.621,
			"EPS growth past 5 years": 0.424,
			"Total Debt/Equity": 0.14,
			"Current Ratio": 1.7,
			"Return on Assets": 0.186,
			Sector: "Consumer Goods",
			"P/S": 2.75,
			"Change from Open": 0.0092,
			"Performance (YTD)": 0.0029,
			"Performance (Week)": -0.0005999999999999999,
			"Quick Ratio": 1.6,
			"Insider Transactions": 0.3412,
			"P/B": 3.81,
			"EPS growth quarter over quarter": -0.047,
			"Payout Ratio": 0.286,
			"Performance (Quarter)": 0.0517,
			"Forward P/E": 10.89,
			"P/E": 13.14,
			"200-Day Simple Moving Average": 0.1672,
			"Shares Outstanding": 904.16,
			"Earnings Date": {
				$date: 1382992200000
			},
			"52-Week High": -0.08989999999999999,
			"P/Cash": 11.61,
			Change: 0.0139,
			"Analyst Recom": 2,
			"Volatility (Week)": 0.0151,
			Country: "USA",
			"Return on Equity": 0.291,
			"50-Day Low": 0.1872,
			Price: 527.87,
			"50-Day High": -0.0154,
			"Return on Investment": 0.255,
			"Shares Float": 899.28,
			"Dividend Yield": 0.0234,
			"EPS growth next 5 years": 0.1427,
			Industry: "Electronic Equipment",
			Beta: 0.84,
			"Sales growth quarter over quarter": 0.042,
			"Operating Margin": 0.287,
			"EPS (ttm)": 39.63,
			PEG: 0.92,
			"Float Short": 0.0203,
			"52-Week Low": 0.397,
			"Average True Range": 8.529999999999999,
			"EPS growth next year": 0.1,
			"Sales growth past 5 years": 0.354,
			Company: "Apple Inc.",
			Gap: 0.0047,
			"Relative Volume": 0.74,
			"Volatility (Month)": 0.0173,
			"Market Cap": 470732.83,
			Volume: 8750589,
			"Gross Margin": 0.376,
			"Short Ratio": 1.42,
			"Performance (Half Year)": 0.213,
			"Relative Strength Index (14)": 64.13,
			"Insider Ownership": 0.0004,
			"20-Day Simple Moving Average": 0.0176,
			"Performance (Month)": 0.0501,
			"P/Free Cash Flow": 13.83,
			"Institutional Transactions": 0.0005999999999999999,
			"Performance (Year)": -0.0169,
			"LT Debt/Equity": 0.14,
			"Average Volume": 12913.68,
			"EPS growth this year": -0.1,
			"50-Day Simple Moving Average": 0.0649
		},
		{
			_id: {
				$oid: "52853800bb1177ca391c180a"
			},
			Ticker: "AAT",
			"Profit Margin": 0.155,
			"Institutional Ownership": 0.861,
			"EPS growth past 5 years": 0.08599999999999999,
			"Total Debt/Equity": 1.6,
			"Return on Assets": 0.021,
			Sector: "Financial",
			"P/S": 5.03,
			"Change from Open": 0.0025,
			"Performance (YTD)": 0.1692,
			"Performance (Week)": -0.0229,
			"Insider Transactions": 0.0411,
			"P/B": 1.95,
			"EPS growth quarter over quarter": 0.1,
			"Payout Ratio": 0.84,
			"Performance (Quarter)": 0.0313,
			"Forward P/E": 188.24,
			"P/E": 640,
			"200-Day Simple Moving Average": 0.0144,
			"Shares Outstanding": 39.82,
			"Earnings Date": {
				$date: 1383687000000
			},
			"52-Week High": -0.1008,
			"P/Cash": 19.39,
			Change: 0.0053,
			"Analyst Recom": 1.8,
			"Volatility (Week)": 0.023,
			Country: "USA",
			"Return on Equity": 0.061,
			"50-Day Low": 0.1307,
			Price: 32.17,
			"50-Day High": -0.07049999999999999,
			"Return on Investment": 0.043,
			"Shares Float": 34.34,
			"Dividend Yield": 0.0263,
			"EPS growth next 5 years": 0.0485,
			Industry: "REIT - Office",
			"Sales growth quarter over quarter": -0.441,
			"Operating Margin": 0.319,
			"EPS (ttm)": 0.05,
			PEG: 131.96,
			"Float Short": 0.0354,
			"52-Week Low": 0.3303,
			"Average True Range": 0.6899999999999999,
			"EPS growth next year": -0.1053,
			"Sales growth past 5 years": 0.149,
			Company: "American Assets Trust, Inc.",
			Gap: 0.0028,
			"Relative Volume": 0.16,
			"Volatility (Month)": 0.0199,
			"Market Cap": 1274.14,
			Volume: 40765,
			"Gross Margin": 0.733,
			"Short Ratio": 4.35,
			"Performance (Half Year)": -0.0727,
			"Relative Strength Index (14)": 46.23,
			"Insider Ownership": 0.007,
			"20-Day Simple Moving Average": -0.0269,
			"Performance (Month)": -0.0009,
			"Institutional Transactions": 0.1931,
			"Performance (Year)": 0.2144,
			"LT Debt/Equity": 1.6,
			"Average Volume": 279.14,
			"EPS growth this year": 0,
			"50-Day Simple Moving Average": 0.014
		},
		{
			_id: {
				$oid: "52853800bb1177ca391c180b"
			},
			Ticker: "AAU",
			"Institutional Ownership": 0.059,
			"EPS growth past 5 years": -0.232,
			"Total Debt/Equity": 0,
			"Current Ratio": 44.8,
			"Return on Assets": -0.207,
			Sector: "Basic Materials",
			"P/S": 250.21,
			"Change from Open": -0.0159,
			"Performance (YTD)": -0.6057,
			"Performance (Week)": -0.0385,
			"Quick Ratio": 44,
			"P/B": 1.58,
			"EPS growth quarter over quarter": 0.333,
			"Performance (Quarter)": -0.399,
			"200-Day Simple Moving Average": -0.2745,
			"Shares Outstanding": 60.05,
			"52-Week High": -0.6242,
			"P/Cash": 4.78,
			Change: -0.008,
			"Volatility (Week)": 0.0617,
			Country: "Canada",
			"Return on Equity": -0.209,
			"50-Day Low": 0.0333,
			Price: 1.24,
			"50-Day High": -0.2994,
			"Return on Investment": -0.203,
			"Shares Float": 52.97,
			Industry: "Gold",
			Beta: 0.43,
			"EPS (ttm)": -0.16,
			"Float Short": 0.009299999999999999,
			"52-Week Low": 0.1273,
			"Average True Range": 0.06,
			"Sales growth past 5 years": -0.156,
			Co
              
            
!
999px

Console