<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/xhynk/pen/rLXXWk?limit=all&page=59&q=service" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>
<style class="cp-pen-styles">body {
font-family: 'Segoe UI';
background: #e9ebee;
-webkit-user-select: none;
}
.container {
overflow: hidden;
position: relative;
}
.quarter {
width: 25%;
display: inline-block;
margin-right: -4px;
}
.text-center {
text-align: center;
}
strong {
font-weight: 700;
}
.content,
.sidebar {
display: block;
vertical-align: top;
}
.hidden {
display: none;
}
.hr {
border-top: 1px solid #ccc;
}
.sidebar {
min-height: 650px;
height: 100%;
width: 240px;
background: #fafafa;
/*box-shadow: inset -5px 0 8px rgba(0,0,0,.2);*/
position: absolute;
top: 0;
bottom: 0;
}
.content {
overflow: hidden;
margin-left: 240px;
}
.header {
padding: 20px;
background: #fff;
color: #4b4f56;
border-left: 1px solid #ccc;
}
.header a {
color: #4b4f56;
text-decoration: none;
}
.header a,
.link {
color: #4b4f56;
text-decoration: none;
position: relative;
}
.link {
color: #3B78E7;
display: inline-block;
}
.link:after,
.header a:not(.faux):after {
content: '';
display: block;
width: 0;
height: 2px;
background: #3B78E7;
transition: width .3s;
position: absolute;
bottom: 0;
left: 0;
}
.link {
padding-bottom: 8px;
margin-bottom: -8px;
}
.header .label a:after {
bottom: -10px;
}
.header a:not(.faux):hover:after,
.link:hover:after {
width: 100%;
}
.header .pipe {
margin: 0 12px;
color: #aaa;
border-left: 1px solid #aaa;
position: relative;
top: 1px;
}
.header .menu {
float: right;
}
.header .menu a {
padding: 10px 20px;
vertical-align: top;
}
.main {
padding: 30px;
box-shadow: inset 1px 1px 3px rgba(0,0,0,.14);
}
.sidebar li {
list-style-type: none;
}
.sidebar li .badge {
font-size: 9px;
position: relative;
background: #3B78E7;
display: inline-block;
padding: 3px 0 3px 2px;
width: 14px;
border-radius:100px;
text-align: center;
color: #fff;
font-weight: 700;
top: -2px;
}
.sidebar .logo img {
max-width: 100%;
}
.sidebar .current {
background: #d3e0f6;
}
.sidebar .admin a {
color: #999;
color: #c14949;
}
.sidebar .current a {
cursor: default;
color: #3B78E7;
font-weight: 400;
}
.sidebar .spacer {
color: #90949c;
font-weight: 600;
padding: 20px 10px 10px;
}
.sidebar li a {
text-decoration: none;
color: #444;
padding: 10px 20px;
display: block;
font-size: 16px;
font-weight: 300;
letter-spacing: .8px;
}
.sidebar li:hover:not(.spacer) {
background: #d3e0f6;
transition: 0s all;
}
.sidebar li:not(.spacer) {
transition: .5s all cubic-bezier(0.15, 1.06, 0.87, 0.99);
}
.checkmark {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
}
.lock {
width: 10px;
height: 10px;
display: inline-block;
background-size: cover;
margin-right: 0px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABLUlEQVRIS+3VTSsGURjG8d8TUlKyEWInRfkCltbY2LJTdnbKV8DOStkpWyX2lr4AUtZeN4psvERH59E0PWdm8rCb2c2c677+577mnjMN5dcIVjGLsSi/wjG2cV1k0SjxX8IOehK6F6xgP+VTBAjme+UNfisWU5AUYBSXmZ2fYw0nETiDLUzG+9DJOG7yG0oBNqNh0AfzaTzlivtwion4fAPrVQEXmcK5+EJbpTWPw7hwhqmqgFd0RXEvQgStrrD2HBdCTXdVwGdGWDZphdpU8b8BArADb5kOmlGlJjav/cDPBrMdLGAX/RVnPyV7xDIOgiALuMdAm+bN8jsM5QHvMZ6/YISYOmtAUZR1RKWDVkf0u4huMVhaWk0QvIbzX3L4O4XDrt3z6CEedkcB8AWs7EIZjLw/3QAAAABJRU5ErkJggg==);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABnklEQVRIS+2VTS8DURSG39NRWpGIjSDsREJiL0LuhKY6E2xs2TWxs5P4C9hZSewkthLROE276IyNP4BIrCk2EiIj2royNSPUfPlY9izvec/73HvumTuEkChpWj8RrZCUswAGHfklAbmKomxN53JXQRYUlDR0fYmk3AbQ7qN7ArAsmPf8fHwBjvlu2Amd/KIfxBNgptMDUJQLd+cSOAOwKi2rZBvGEokpEG0CGHEAT0q1OjRRLF43bsgTYOj6Bkm5aott8wQwPsb88Lm4mEp1tsbjJwCGnfV1wbwWCWBq2rlbGCOamzw6ynm1ysxk5kF04OROBfNoVMALgLgtfq7VOmYKBfsyv0VJVTtiyeSjk3gRzG1RAdIVCubASTM1LVDrfckhRZ93+SOABMhQVSWWTFZck1fLqrfKLxq1qmHUqD4b7/FxgmNdX5BS7gDoijj7frJ7SJkV+fz+F4CpabcAuv9o7pbfCObeRkAVgPJPgJpgbmkCgrrZbFHorDVb9LsWlQH0hJZGE5QFc9/XL/n972Q/dn99j+4kkFWZD23AG3z1uRk9zwG5AAAAAElFTkSuQmCC);
}
.menu a.wiggle-bug {
padding: 0 15px;
position: relative;
display: inline-block;
}
.bug {
position:relative;
top:-2px;
width: 22px;
height: 22px;
display: inline-block;
background-size: cover;
background-image: url(data:image/png;base64,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);
}
.widget {
border: 1px solid;
border-color: #e5e6e9 #dfe0e4 #d0d1d5;
letter-spacing: .35px;
margin-bottom: 30px;
}
.widget.half {
width: -webkit-calc( 50% - 20px );
display: inline-block;
margin-right: -4px;
}
.widget.half {
margin-right: 30px;
}
.widget.half + .widget.half {
margin-right: 0;
}
.widget-title {
background: #f6f7f9;
padding: 20px;
font-weight: 600;
color: #4b4f56;
cursor: default;
}
.widget-title .button {
float: right;
top: -10px;
right: -10px;
}
.button {
display: inline-block;
text-decoration: none;
background: #4D5364; /* FB */
background: #3B78E7; /* G */
color: #fff;
font-weight: 100;
border-bottom: 3px solid #2B3142; /* FB */
border-bottom: 3px solid #1956C5; /* G */
padding: 9px 20px;
position: relative;
}
.button:not(.current){
box-shadow: 0 2px 2px rgba(0,0,0,.2);
}
.button:hover {
background: #5E6475; /* FB */
background: #4C89F7; /* G */
border-color: #3C4253; /* FB */
border-color: #2A67D6;
}
.button:active {
border-top: 3px solid #f6f7f9;
border-bottom: 0;
box-shadow: inset 0 4px 6px rgba(0,0,0,.2);
}
.widget-content {
padding: 20px;
background: #fff;
border-top: 1px solid #dfe0e4;
}
/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
position: relative;
cursor: pointer;
}
/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
position: absolute;
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition:
opacity 0.2s ease-in-out,
visibility 0.2s ease-in-out,
-webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transition: opacity 0.2s ease-in-out,
visibility 0.2s ease-in-out,
-webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transition: opacity 0.2s ease-in-out,
visibility 0.2s ease-in-out,
transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transition:
opacity 0.2s ease-in-out,
visibility 0.2s ease-in-out,
transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24),
-webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
pointer-events: none;
}
/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before {
z-index: 1001;
border: 6px solid transparent;
background: transparent;
content: "";
}
/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
font-weight: 100 !important;
letter-spacing: .65px;
z-index: 1000;
padding: 8px 16px;
width: auto;
display: inline-block;
white-space: nowrap;
background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9);
color: #fff;
content: attr(data-tooltip);
font-size: 14px;
line-height: 1.2;
}
/* Directions */
/* Top (default) */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after {
bottom: 100%;
left: 50%;
}
[data-tooltip]:before,
.tooltip:before,
.tooltip-top:before {
margin-left: -6px;
margin-bottom: -12px;
border-top-color: #000;
border-top-color: hsla(0, 0%, 20%, 0.9);
}
/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
margin-left: -80px;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after {
-webkit-transform: translateY(-12px);
transform: translateY(-12px);
}
/* Left */
.tooltip-left:before,
.tooltip-left:after {
right: 100%;
bottom: 50%;
left: auto;
}
.tooltip-left:before {
margin-left: 0;
margin-right: -12px;
margin-bottom: 0;
border-top-color: transparent;
border-left-color: #000;
border-left-color: hsla(0, 0%, 20%, 0.9);
}
.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after {
-webkit-transform: translateX(-12px);
transform: translateX(-12px);
}
/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
top: 100%;
bottom: auto;
left: 50%;
}
.tooltip-bottom:before {
margin-top: -12px;
margin-bottom: 0;
border-top-color: transparent;
border-bottom-color: #000;
border-bottom-color: hsla(0, 0%, 20%, 0.9);
}
.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
-webkit-transform: translateY(12px);
transform: translateY(12px);
}
/* Right */
.tooltip-right:before,
.tooltip-right:after {
bottom: 50%;
left: 100%;
}
.tooltip-right:before {
margin-bottom: 0;
margin-left: -12px;
border-top-color: transparent;
border-right-color: #000;
border-right-color: hsla(0, 0%, 20%, 0.9);
}
.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after {
-webkit-transform: translateX(12px);
transform: translateX(12px);
}
/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before,
.tooltip-right:before {
top: calc( 50% - 6px );
}
/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,
.tooltip-right:after {
margin-left: 0;
margin-bottom: -16px;
}
.bubble {
background: #eee;
color: #000;
height: 18px;
padding: 2px 10px;
font-weight: 400 !important;
display: inline-block;
border-bottom: 2px solid #4D5364;
}
.bubble.tooltip:hover {
background: #6F7586; /* FB */
background: #ddd;
cursor: help;
}
.bubble.tooltip:after {
left: 180%;
}
.sidebar li {
position: relative;
}
.has-children:after {
content: "";
border-right: 1px solid;
border-bottom: 1px solid;
border-color: #ada9ca;
transform: rotate(-45deg);
display: inline-block;
width: 6px;
height: 6px;
position: absolute;
right: 15px;
top: 15px;
}
.has-children:hover:after {
right: 10px;
border-color: #3B78E7;
}
.sub-menu {
display: none;
position: absolute;
width: auto;
white-space: nowrap;
top: 0;
left: 240px;
background: #6F7586;
background: #fafafa;
z-index: 9999999;
box-shadow: 0 0 5px rgba(0,0,0,.25);
}
.has-children:hover .sub-menu {
display: block;
}
.sub-menu li {
border-bottom: 1px solid #7F8697;
border-bottom: 0px solid transparent;
}
[data-tooltip]:before,
[data-tooltip]:after {
z-index: 9999999999999999999999;
}
.widget {
vertical-align: top;
}
.widget-content p {
margin-bottom: 15px;
}
.width-graph {
width: 100%;
height: 25px;
margin-bottom: 25px;
}
.width-graph div {
height: 25px;
display: inline-block;
margin-right: 0;
border-right: 1px solid #fff;
float: left;
}
.width-graph .one-star {
background: #c14949;
}
.width-graph .two-star {
background: #d17777;
}
.width-graph .three-star {
background: #999999;
}
.width-graph .four-star {
background: #83e0aa;
}
.width-graph .five-star {
background: #3ecb7a;
}
.width-graph div:last-child {
border-right: 0;
margin-right: -4px;
}
.width-graph + .width-graph {
padding-top: 25px;
}
.width-graph h4 {
margin-bottom: 10px;
}
.traverse {
margin-top: 40px;
}
.traverse .button:active {
top: 3px;
border-top: none !important;
}
.button.current {
border-bottom: 0;
top: 3px;
background: #5E6475; /* FB */
background: #4C89F8; /* G */
}
.chart.quarter img {
width: 200px;
max-width: 90%;
}</style></head><body>
<div class="container">
<div class="sidebar">
<ul>
<li class="logo">
<a href="#">
<img src="http://whirlocal.com/review-engine-images/login.png" />
</a>
<li>
<li class="current">
<a href="#">Home</a>
</li>
<li class="has-children">
<a href="#">My Reviews <span class="badge">2</span></a>
<ul class="sub-menu">
<li>
<a href="#" class="tooltip-right" data-tooltip="You have 2 new reviews!">List Reviews <span class="badge">2</span></a>
</li>
<li class="admin">
<a href="#" class="tooltip-right" data-tooltip="Only visible to admins."><span class="lock"></span> Comments</a>
</li>
<li>
<a href="#">Ask for Reviews</a>
</li>
</ul>
</li>
<li class="spacer">Settings</li>
<li class="has-children">
<a href="#">Review Engine Settings</a>
<ul class="sub-menu">
<li>
<a href="#">Business Information</a>
</li>
<li>
<a href="#">Design Settings</a>
</li>
<li>
<a href="#">Advanced Settings</a>
</li>
<li>
<a href="#">Service Categories</a>
</li>
<li>
<a href="#">Staff Members</a>
</li>
<li>
<a href="#">Service Areas</a>
</li>
<li>
<a href="#">Engagement Videos</a>
</li>
<li>
<a href="#">Customize Text</a>
</li>
<li>
<a href="#">Review Form Settings</a>
</li>
</ul>
</li>
<li class="has-children">
<a href="#">Review Invites</a>
<ul class="sub-menu">
<li>
<a href="#">Add Review Invite</a>
</li>
<li>
<a href="#">Edit Review Invites</a>
</li>
<li>
<a href="#">Add Contact</a>
</li>
<li>
<a href="#">Bulk Add Contacts</a>
</li>
<li>
<a href="#">List Contacts</a>
</li>
</ul>
</li>
<li class="hidden">
<a href="#">Activity</a>
</li>
<li class="has-children">
<a href="#">Marketing</a>
<ul class="sub-menu">
<li>
<a href="#">Auto-Responders</a>
</li>
<li>
<a href="#">Preferred Partners</a>
</li>
<li>
<a href="#">Review Box</a>
</li>
<li>
<a href="#">Facebook Box</a>
</li>
<li>
<a href="#">Special Offers</a>
</li>
<li>
<a href="#">MailChimp Settings</a>
</li>
</ul>
</li>
<li class="admin">
<a href="#" title="admin-only" class="tooltip-right" data-tooltip="Only visible to admins."><span class="lock"></span> Social Posting</a>
</li>
<li class="has-children">
<a href="#">Surveys</a>
<ul class="sub-menu">
<li>
<a href="#">Add Survey</a>
</li>
<li>
<a href="#">Edit Surveys</a>
</li>
<li>
<a href="#">Add Survey Page</a>
</li>
<li>
<a href="#">Edit Survey Pages</a>
</li>
<li>
<a href="#">View Entries</a>
</li>
<li>
<a href="#">Import/Export</a>
</li>
</ul>
</li>
<li>
<a href="#">Reputation Control Center</a>
</li>
<li class="spacer">Admin</li>
<li class="has-children">
<a href="#">Users</a>
<ul class="sub-menu">
<li>
<a href="#">List Users</a>
</li>
<li>
<a href="#">Add User</a>
</li>
<li class="admin">
<a target="_blank" href="https://codepen.io/xhynk/full/VpMpVE" class="tooltip-right" data-tooltip="Only visible to admins."><span class="lock"></span> Permissions</a>
</li>
</ul>
</li>
<li>
<a href="#">Training</a>
</li>
<li class="admin">
<a href="#" title="admin-only" class="tooltip-right" data-tooltip="Only visible to admins."><span class="lock"></span> Upgrade</a>
</li>
<li class="spacer"><div class="hr"></div></li>
<li>
<a href="#" class="tooltip-right" data-tooltip="Ready to leave? :(">Logout</a>
</li>
</ul>
</div>
<div class="content">
<div class="header">
<span class="label"><strong><a href="https://codepen.io/xhynk/full/LkgXxA" target="_blank">demo.whirfanpages.com</a></strong></span>
<span class="pipe"></span>
<span class="label">Dashboard</span>
<div class="menu">
<a href="#" class="faux wiggle-bug tooltip-bottom" data-tooltip="Report Bugs or Concerns." title="Report a Bug"><span class="bug"></span></a>
<a href="#">Network</a>
<a href="#">Review Engines</a>
<a href="#">Support</a>
</div>
</div>
<div class="main">
<div class="widget totals">
<h4 class="widget-title"><span data-tooltip="Analytical information about your Review Engine.">Analysis</span> <a href="#" class="tooltip-left button" data-tooltip="Attempt to reload Analytical data.">Reload Data</a></h4>
<div class="widget-content text-center">
<div class="chart quarter">
<span class="label">Completion</span><br /><br />
<img src="http://jamsandjelli.es/public/img/pie-completion.png" />
</div>
<div class="chart quarter">
<span class="label">Reviews</span><br /><br />
<img src="http://jamsandjelli.es/public/img/pie-reviews.png" />
</div>
<div class="chart quarter">
<span class="label">Visibility</span>
<br /><br />
<img src="http://jamsandjelli.es/public/img/pie-visibility.png" />
</div>
<div class="chart quarter">
<span class="label">Competition</span><br /><br />
<img src="http://jamsandjelli.es/public/img/pie-competition.png" />
</div>
</div>
</div>
<div class="widget half local">
<h4 class="widget-title"><span data-tooltip="Breakdown of reviews gathered on your Review Engine.">Local Reviews</span> <a href="#" class="button">View Local Reviews</a></h4>
<div class="widget-content">
<p>You've gotten <strong class="bubble tooltip" data-tooltip="17.5% of your total Local Reviews.">35</strong> Local Reviews in the past month, and <strong>200</strong> total.</p>
<div class="width-graph">
<h4>This Month:</h4>
<div class="one-star tooltip-bottom" data-tooltip="1 Star Reviews: 5 (14%)" style="width: 14%;"> </div>
<div class="two-star tooltip-bottom" data-tooltip="2 Star Reviews: 2 (6%)" style="width: 6%;"> </div>
<div class="three-star tooltip-bottom" data-tooltip="3 Star Reviews: 6 (17%)" style="width: 17%;"> </div>
<div class="four-star tooltip-bottom" data-tooltip="4 Star Reviews: 8 (23%)" style="width: 23%;"> </div>
<div class="five-star tooltip-bottom" data-tooltip="5 Star Reviews: 14 (40%)" style="width: 40%;"> </div>
</div>
<div class="width-graph">
<h4>Since the Beginning:</h4>
<div class="one-star tooltip-bottom" data-tooltip="1 Star Reviews: 20 (10%)" style="width: 10%;"> </div>
<div class="two-star tooltip-bottom" data-tooltip="2 Star Reviews: 10 (5%)" style="width: 5%;"> </div>
<div class="three-star tooltip-bottom" data-tooltip="3 Star Reviews: 40 (20%)" style="width: 20%;"> </div>
<div class="four-star tooltip-bottom" data-tooltip="4 Star Reviews: 70 (35%)" style="width: 35%;"> </div>
<div class="five-star tooltip-bottom" data-tooltip="5 Star Reviews: 60 (30%)" style="width: 30%;"> </div>
</div>
<div style="clear:both;"></div>
<div class="traverse text-center">
<a href="#" class="button current">This Month</a>
<a href="#" class="button">This Quarter</a>
<a href="#" class="button">This Year</a>
<a href="#" class="button">All Time</a>
</div>
</div>
</div>
<div class="widget half external">
<h4 class="widget-title"><span data-tooltip="Breakdown of reviews gathered elsewhere.">Third Party Reviews</span> <a href="#" class="button">View Third Party Reviews</a></h4>
<div class="widget-content">
<p>You've gotten <strong class="bubble tooltip" data-tooltip="63.1% of your total Third Party Reviews.">24</strong> Third Party Reviews in the past month, and <strong>38</strong> total.</p>
<div class="width-graph">
<h4>Facebook: <strong class="bubble tooltip" data-tooltip="37% of third party reviews we've tracked.">7</strong> Reviews</h4>
<div class="one-star tooltip-bottom" data-tooltip="1 Star Reviews: 1 (14%)" style="width: 14%;"> </div>
<div class="two-star tooltip-bottom" data-tooltip="2 Star Reviews: 1 (14%)" style="width: 14%;"> </div>
<div class="three-star tooltip-bottom" data-tooltip="3 Star Reviews: 1 (14%)" style="width: 14%;"> </div>
<div class="four-star tooltip-bottom" data-tooltip="4 Star Reviews: 2 (29%)" style="width: 29%;"> </div>
<div class="five-star tooltip-bottom" data-tooltip="5 Star Reviews: 2 (29%)" style="width: 29%;"> </div>
</div>
<div class="width-graph">
<h4>Google+: <strong class="bubble tooltip" data-tooltip="63% of third party reviews we've tracked.">17</strong> Reviews</h4>
<div class="one-star tooltip-bottom" data-tooltip="1 Star Reviews: 3 (18%)" style="width: 18%;"> </div>
<div class="two-star tooltip-bottom" data-tooltip="2 Star Reviews: 1 (6%)" style="width: 6%;"> </div>
<div class="three-star tooltip-bottom" data-tooltip="3 Star Reviews: 2 (12%)" style="width: 12%;"> </div>
<div class="four-star tooltip-bottom" data-tooltip="4 Star Reviews: 2 (12%)" style="width: 12%;"> </div>
<div class="five-star tooltip-bottom" data-tooltip="5 Star Reviews: 9 (52%)" style="width: 52%;"> </div>
</div>
<div style="clear:both;"></div>
<div class="traverse text-center">
<a href="#" class="button current">This Month</a>
<a href="#" class="button">This Quarter</a>
<a href="#" class="button">This Year</a>
<a href="#" class="button">All Time</a>
</div>
</div>
</div>
<div class="widget invites">
<h4 class="widget-title"><span data-tooltip="Analytical data for your Review Invites.">Review Invites</span> <a href="#" class="button">View Review Invites</a></h4>
<div class="widget-content">
<p>You've sent <a href="#" class="link">Review Invites</a> to <strong>64</strong> contacts this month, <strong class="bubble hoverable tooltip" data-tooltip="31% of total recipients.">20</strong> have left reviews!</p>
<div class="width-graph">
<div class="five-star tooltip-bottom" data-tooltip="20 (31%) of contacts left a review!" style="width: 31%"></div>
<div class="three-star tooltip-bottom" data-tooltip="44 (69%) of contacts didn't leave a review." style="width: 69%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>
<script >jQuery(document).ready(function($){
$('.wiggle-bug .bug').hover(function(){
$(this).addClass('animated infinite tada');
}, function(){
$(this).removeClass('animated infinite tada');
});
$('.wiggle-bug').click(function(){
$(this).find('.bug').toggle('explode');
});
});
//# sourceURL=pen.js
</script>
</body></html>
