body {
  background: #eee;
  margin: 0;
}
#email_dialog_flip_card_container {
  position: relative;
  z-index: 12000;
  -webkit-perspective: 1000;
}
#email_dialog_flip_card_container #email_dialog_flip_card {
  -webkit-transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 1s;
}
#email_dialog_flip_card_container .face.back {
  -webkit-transform: rotateY(180deg);
  -webkit-box-sizing: border-box;
}
#email_dialog_flip_card_container .face {
  -webkit-backface-visibility: hidden;
}

#email_dialog_flip_card_container .face.back {
  background: #eee url(/assets/widget_bar_body.gif) top right repeat;
}
#email_dialog_flip_card_container .face.back .inner_layout {
  margin: 8px;
  background: #fff;
  -webkit-border-radius: 8px;
  border: 1px solid #000;
  border-color: #aaa #ccc #ccc #aaa;
}
button {
  -khtml-user-select: none;
  display: block;
  padding: 7px 10px;
  -webkit-border-radius: 4px;
  color: #222;
  border: 1px solid rgba(100,100,100,0.5);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#eee), color-stop(0.5, #ddd), color-stop(0.5, #ccc));
  text-shadow: 0px -1px 1px rgba(255,255,255,0.5);
}
button:hover {
  cursor: pointer;
}
button:active {
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7fbffa), to(#3f80bc), color-stop(0.5, #5599d8), color-stop(0.5, #2d7dc8));
  color: white;
  text-shadow: 0px -1px 1px rgba(7,91,169,0.75);
  border: 1px inset rgba(18,105,186,0.5);
}
#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 10000;
}

div.dialog {
  z-index: 10001;
  background: white;
  position: absolute;
  top: 50px;
  left: 50%;
  margin-left: -250px;
  width: 500px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 10px;
  -webkit-border-radius: 10px;
}
div.dialog .inner_layout {
  padding: 10px 15px;
}
div.dialog header {
  display: block;
  letter-spacing: 0.03em;
  font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 18px;
  padding: 5px 0;
  padding-top: 0;
  text-shadow: 0px -1px 1px #fff;
  font-weight: bold;
  color: #333;
}
div#email_dialog textarea, div#edit_message_dialog textarea {
  display: block;
  width: 442px;
  margin-bottom: 5px;
}

div#edit_message_dialog #variable_list {
  display: table-cell;
  vertical-align: middle;
  padding-bottom: 5px;
}
div#edit_message_dialog #variable_list span {
  display: inline-block;
  padding: 4px 8px;
  margin-right: 3px;
  font-family: Monaco;
  -webkit-border-radius: 12px;
  color: #fff;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2c86da), to(#085196));
  font-size: 11px;
  text-shadow: 0px -1px 0px #0f5a9f;
}
div#edit_message_dialog #variable_list span:hover {
  cursor: pointer;
}

#content {
  background: #fff;
  vertical-align: top;
  width: 960px;
  margin: 0 auto;
  font-family: Helvetica;
  -webkit-box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 10px;
}

#content #scheduled_followup {
  padding: 7px 15px;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cd4ef1), to(#9731b4));
  color: white;
  border-bottom: 1px solid rgba(113,14,141,0.9);
  text-shadow: 0px -1px 0px #710a8f;
}
#content #scheduled_followup a {
  display: block;
  float: right;
  color: #eee;
  text-decoration: none;
  background: rgba(113,10,143,0.2);
  padding: 2px 8px;
  -webkit-border-radius: 10px;
  margin-top: -2px;
  font-size: 11px;
  margin-right: -8px;
  border: 1px outset rgba(113,14,141,0.35);
  text-shadow: none;
}

#top_bar {
  width: 100%;
  display: table;
  padding: 10px 15px;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#555), to(#000));

}

#top_bar div#agent_image {
  display: table-cell;
  width: 0;
  padding-right: 13px;
}
#top_bar div#agent_image img {
  -webkit-border-radius: 5px;
}

#top_bar div#agent_name {
  font-family: HelveticaNeue-UltraLight, 'Helvetica Neue UltraLight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: 1px;
  font-weight: 100 !important;
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0px 1px 0px #000;
  display: table-cell;
  width: 100%;
  vertical-align: top;
  position: relative;
}
#top_bar div#agent_name small {
  display: block;
  font-size: 12px;
  color: #999;
  text-shadow: none !important;
  font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: .09em !important;
}

#top_bar aside#last_activity {
  color: #888;
  font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: .05em !important;
  display: table-cell;
  white-space: nowrap;
  text-shadow: 0px -1px 0px #333;
  vertical-align: top;
  font-size: 11px;
}
#top_bar aside#last_activity time {
  color: #bbb;
}

div#agent_history_and_contact {
  display: table;
  width: 100%;
  padding: 0 15px;
  padding-top: 5px;
}

div#agent_history_and_contact header, div#browser header {
  display: block;
  letter-spacing: 0.03em;
  font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 22px;
  padding: 5px 0;
  text-transform: uppercase;
  text-shadow: 0px -1px 1px #fff;
  font-weight: bold;
  color: #333;
}

div#agent_history {
  display: table-cell;
  width: 100%;
}

div#agent_history_list {
  height: 150px;
  overflow-y: scroll;
}

div#agent_history_list::-webkit-scrollbar-button {
  display: none;
}

div#agent_history_list::-webkit-scrollbar {
  width: 10px;
  height: 13px;
}

div#agent_history_list::-webkit-scrollbar:vertical {
  background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#f2f2f2), to(#f2f2f2));
  border: 1px inset rgba(200,200,200,0.35);
  -webkit-border-radius: 10px;
}
div#agent_history_list::-webkit-scrollbar-thumb:vertical {
  border: 1px solid #133f68;
  background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#81a7ca), to(#295b89));
  min-height: 10px;
  -webkit-border-radius: 10px;
}

div#agent_history article.inner_note {
  display: table;
  width: 100%;
  border-bottom: 1px solid #eee;
}

div#agent_history article.system_note {
  display: none;
}

div#agent_history article.inner_note section.note_content {
  display: table-cell;
  width: 100%;
}
div#agent_history article.inner_note section.note_content p {
  margin: 0;
  padding: 0;
}

div#agent_history article.inner_note time {
  color: #666;
  font-size: 11px;
  padding-right: 3px;
}

div#agent_history article.inner_note time.date {
  display: table-cell;
  text-align: left;
  white-space: nowrap;
  padding-left: 10px;
}
div#agent_history article.inner_note time.time {
  display: table-cell;
  text-align: right;
  white-space: nowrap;  
  padding-left: 3px;
  padding-right: 6px;
}

div.ghost_wrapper {
  position: relative;
}

span.ghost {
  padding: 4px 5px;
  position: absolute;
  display: block;
  color: #999;
  cursor: text;
  line-height: 1.4em;
}

div#agent_history_list {
  margin-bottom: 13px;
}

div#agent_history textarea {
  width: 600px;
  height: 60px;
}

div#agent_contact {
  display: table-cell;
  padding-right: 15px;
  width: 35%;
}

div#agent_contact section {
  display: block;
  border-bottom: 1px solid #ccc;
}

div#agent_contact dl {
  margin: 0;
  padding: 0;
  list-style: none;
}
div#agent_contact dl dt {
  display: block;
  float: left;
  width: 80px;
  text-align: right;
  clear: both;
  margin-right: 10px !important;
  /*  margin-bottom: 10px !important;*/
  color: #666;
}
div#agent_contact dl dd {
  display: block;
  float: left;
  font-weight: bold;
  padding-left: 10px !important;
  padding-right: 10px !important;
  /*  -webkit-border-radius: 15px;*/
  color: #fff;
  /*  -webkit-box-shadow: rgba(0, 0, 0, 0.25) 1px 1px 2px;*/
  /*  border: 2px solid #2a77b8;*/
  /*  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6a7d97), to(#0b2a55), color-stop(0.5, #264268), color-stop(0.5, #102e58));*/
  text-shadow: 0px 1px 1px #2a77b8;
  text-shadow: none !important;
  color: #000;
  /*  letter-spacing: 1px;*/
}
div#agent_contact dl dt, div#agent_contact dl dd {
  margin: 0;
  padding: 7px 0;
  font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 18px;
}
div#agent_contact dl:after {
  content: "";
  display: block;
  clear: both;
}

#filter_bar {
  display: block;
  font-family: Helvetica;
  width: 100%;
  background: #eee;
  border-bottom: 1px solid #aaa;
  color: #444;
  display: none;
}
.filter {
  display: inline-block;
  padding: 5px 0;
  padding-left: 10px;
  padding-right: 10px;
  margin: 0 10px;
  margin-right: 0;
  border: 1px solid #bbb;
  border-width: 0 1px;
  background: #d9d9d9;
}
.filter select {
  outline: none;
  border: 1px solid #888;
}
.system_note {
  color: #aaa;
  display: none;
}

.upcoming {
  width: 300px;
  border: 1px solid #ccc;
  background: #eee;
}
.upcoming .inner_layout {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upcoming h1 {
  margin: 0;
  padding: 0;
  color: #000;
  font-size: 100%;
}
.upcoming ul.calls {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 15px;
}
.upcoming ul.calls li.highlight {
  background: #ff8;
}

.upcoming .date_str {
  display: inline-block;
  width: 90px;
  text-align: right;
  padding-right: 5px;
  color: #aaa;
}
.upcoming .time_str {
  display: inline-block;
  width: 40px;
  text-align: left;
  color: #aaa;
}
.upcoming .agent_name {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upcoming ul.calls li.highlight .date_str {
  color: #333;
}
.upcoming ul.calls li.highlight .time_str {
  color: #333;
}
span.link {
  display: block;
  text-decoration: underline;
  color: #00d;
  cursor: pointer;
  padding: 2px 0;
  font-size: 11px;
}
span.link:hover {
  color: #d00;
}

#more_options {
  margin-left: 2px;
  margin-top: -3px;
  background: #eee;
  padding: 3px 5px;
  border: 1px solid #ccc;
  border-color: #000 #000 #555 #555;
  -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.65);
}

p.name {
  font-size: 20px;
  font-weight: bold;
}
.top_info p {
  margin-bottom: 4px;
}
.phone_info {
  margin-top: 6px;
  font-size: 18px;
}
.phone_info div {
  float: left;
  width: 200px;
  text-align: center;
  padding: 3px 0;
  background: url(/assets/phone_background.gif) repeat-x left;
  color: white;
  border: 1px solid #5c6368;
  border-color: #5c6368 #051123 #051123 #5c6368;
  text-shadow: #000 0 -1px 1px;
}
.phone_info div.office {
  margin-left: 2px;
  /*    float: right;*/
}
.phone_info div.cc_info {

}
.phone_info div small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: #eee;
  text-shadow: none;
  opacity: 0.5;
}
.notes {
  clear: both;
  padding-top: 10px;
}
.note_text {
  font-size: 11px;
}
.notes textarea {
  width: 99%;
  height: 50px;
}
.action {
  margin-top: 10px;
  border-top: 1px solid #ccc;
  margin-left: -15px;
  width: 680px;
  background: #d7d7d7;
  margin-bottom: -15px;
}
.action .action_layout {
  padding: 10px 15px;
}
.action button {
  border: 1px outset #555;
  background: #444;
  color: #fff;
  cursor: pointer;
}
.action button.concern {
  border-color: #d00;
  background: #c00;
}
.action select {
  border: 1px outset #555;
  outline: none;
  background: #222;
  color: #fff;
}
.inner_note {
  padding: 5px 0;
}

#next_steps {
  position: relative;
  padding: 0;
  -khtml-user-select: none;
}
#next_steps ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: table;
  width: 100%;
}
#next_steps li {
  color: #333;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding: 15px 0;
  border-top: 1px solid rgba(100,100,100,0.5);
  border-right: 1px solid rgba(100,100,100,0.5);
  width: 25%;
  cursor: pointer;
  font-size: 16px;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#eee), color-stop(0.5, #ddd), color-stop(0.5, #ccc));
  text-shadow: 0px -1px 1px rgba(255,255,255,0.5);
}
#next_steps #follow-up {
  padding: 7px 0;
}
#next_steps #close-lead, #next_steps #fake-close-lead {
  padding: 7px 0;
}
#next_steps li small {
  display: block;
  font-size: 11px;
}
#next_steps #calendar_slider {
  z-index: 51;
  bottom: 59px;
  left: 0;
  position: absolute;
  width: 627px;
  overflow: hidden;
  -khtml-user-select: none;
  /*    -webkit-box-shadow: rgba(0,0,0,0.5) 0px 0px 5px;*/
}
#next_steps #calendar_slider #bottom_bar {
  text-align: left;
  clear: both;
  font-size: 13px;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f57474), to(#be1e1e));
  color: #fff;
  display: block;
  width: 100%;
  padding: 5px 10px;
  text-shadow: 0px -1px 0px #a91414;
}
#next_steps #calendar_slider #bottom_bar select {
  outline: none;
  border: 1px inset rgba(169,20,20,0.5);
  background: #962727;
  color: #fff;
  font-weight: bold;
}
#next_steps #calendar_slider div.arrow {
  display: none;
  position: absolute;
  top: 4px;
  color: #fff;
  font-size: 16px;
  z-index: 3;
  cursor: pointer;
}
#next_steps #calendar_slider div.left-arrow {
  left: 5px;
}
#next_steps #calendar_slider div.right-arrow {
  right: 5px;
}

#next_steps div#calendar {
  font-size: 12px;
  position: relative;
  float: left;
  background: #fff;
  z-index: 50000;
  overflow: hidden;
  width: 2508px;
  z-index: 2;
  -webkit-transition-duration: 0.7s;
  -webkit-transition-property: margin-left;
  margin-left: 0;
}
#next_steps div#calendar div.month {
  float: left;
  padding: 0 10px;
}
#next_steps div#calendar header {
  font-size: 13px;
  font-weight: bold;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f57474), to(#be1e1e));
  color: #fff;
  display: block;
  width: 100%;
  padding: 6px 10px;
  margin-left: -10px;
  text-shadow: 0px -1px 0px #a91414;
  text-align: center;
}
#next_steps div#calendar table {
  border-collapse: collapse;
}
#next_steps div#calendar table td, #next_steps li#follow-up div#calendar table th {
  font-size: 12px;
}
#next_steps div#calendar table th {
  width: 25px;
  height: 25px;
  text-align: center;
  vertical-align: middle;
  text-shadow: none !important;
}
#next_steps div#calendar table td {
  width: 25px;
  height: 25px;
  text-align: center;
  vertical-align: middle;
  text-shadow: none !important;
}
#next_steps div#calendar table td.today {
  color: #3e99e7;
  font-weight: bold;
}
#next_steps div#calendar table td.weekend {
  color: #aaa;
}
#next_steps div#calendar table td.past {
  color: #eee;
}
#next_steps div#calendar table td.qualified:hover {
  -webkit-box-shadow: #3e99e7 0px 0px 2px;
  font-weight: bold;
  background: #eef6ff;
  cursor: pointer;
}
#next_steps div#calendar table td.selected {
  font-weight: bold !important;
  color: #fff !important;
  -webkit-box-shadow: rgba(0,0,0,0.5) 0px 0px 1px !important;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(127, 191, 250)), color-stop(0.5, rgb(85, 153, 216)), color-stop(0.5, rgb(45, 125, 200)), to(rgb(63, 128, 188))) !important;
}

#next_steps li input {
  display: none;
}
#next_steps li#close-lead, #next_steps li#fake-close-lead {
  border-right: none;
}
#next_steps li#next-lead {
  border-left: 1px solid rgba(100,100,100,0.5);
  border-right: none;
}  
#next_steps li.active {
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7fbffa), to(#3f80bc), color-stop(0.5, #5599d8), color-stop(0.5, #2d7dc8));
  color: white;
  text-shadow: 0px -1px 1px rgba(7,91,169,0.75);
  border-top: 1px inset rgba(18,105,186,0.5) !important;
}
#next_steps li.disabled {
  cursor: default;
  color: #bbb;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#eee), color-stop(0.5, #eee), color-stop(0.5, #ddd));
}
#next_steps li#next-lead.enabled {
  cursor: pointer;
  color: #fff;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#68e55e), to(#23a219), color-stop(0.5, #59e24f), color-stop(0.5, #2ad41d));
  border-top: 1px outset rgba(86,202,78,0.5) !important;
  text-shadow: 0px -1px 1px rgba(15,110,7,0.75);
}

nav#tempest {
  position: relative;
  width: 100%;
  display: block;
  padding: 3px 0;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#ccc));
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5fb1f6), to(#3ea0f3), color-stop(0.5, #4aa6f4), color-stop(0.5, #3e99e7));
  color: white;
  border-bottom: 2px solid rgba(255,255,255,1.0);
  border-bottom: 1px solid #2a77b8;
  z-index: 9000;
}
nav#tempest div#bar {
  position: relative;
  width: 960px;
  margin: 0 auto;
}
nav#tempest ul {
  list-style: none;
  margin: 0;
  padding: 0;
  /*      background: url(/assets/bw-logo.png) no-repeat center right;*/
  margin-right: 10px;
}
nav#tempest ul li {
  display: table-cell;
  margin: 0;
  padding: 0;
}
nav#tempest ul li a, nav#tempest ul li div.holder {
  display: table-cell;
  padding: 0 10px;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  color: #fff;
  text-shadow: 0px -1px 1px rgba(255,255,255,0.95);
  text-shadow: rgba(0, 0, 0, 0.167969) 1px 1px 0px;
  font-size: 23px;
}
nav#tempest ul li a small {
  font-size: 12px;
  vertical-align: 4px;
  padding-left: 5px;
}
nav#tempest ul li a.leads {
  border-right: 1px solid rgba(255,255,255,0.4);
  padding-right: 15px;
}
nav#tempest ul li a.leads small {
  font-weight: bold;
}
nav#tempest ul li a.stats {
  padding-left: 15px;
}
/*nav#tempest ul li a img {
  margin: 0;
  padding: 0;
  display: block;
  margin: 0 auto;
}*/

nav#tempest ul li a img {
  margin-right: 3px;
}

#agent_stats {
  display: table;
  width: 100%;
  padding: 0px 15px;
}
div.stats {
  display: table-cell;
  width: 33.3%;
  border-right: 1px solid #ccc;
  padding: 10px 15px;
}
#agent_stats header {
  display: block;
  letter-spacing: 0.03em;
  font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 22px;
  padding: 5px 0;
  text-transform: uppercase;
  text-shadow: 0px -1px 1px #fff;
  font-weight: bold;
  color: #333;
}
div#agent_stats dl {
  margin: 0;
  padding: 0;
  list-style: none;
}
div#agent_stats dl dt {
  display: block;
  float: left;
  width: 180px;
  text-align: right;
  clear: both;
  margin-right: 10px !important;
  color: #666;
}
div#agent_stats dl dd {
  display: block;
  float: left;
  font-weight: bold;
  padding-left: 10px !important;
  padding-right: 10px !important;
  color: #fff;
  text-shadow: 0px 1px 1px #2a77b8;
  text-shadow: none !important;
  color: #000;
}
div#agent_stats dl dt, div#agent_stats dl dd {
  margin: 0;
  padding: 7px 0;
  font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
}
div#agent_stats dl:after {
  content: "";
  display: block;
  clear: both;
}
div#email_address {
  margin: 0;
  padding: 7px 0;
  font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  width: 290px;
  margin: 0 auto;
}
.red_link {
  color: #000;
  cursor: pointer;
  opacity: 0.2;
  margin-top: 10px;
}
#agent_contact:hover .red_link {
  color: #f00;
  opacity: 1;
  text-decoration: underline;
}

div#week_slider {
/*    position: absolute;*/
width: 100%;
}
table#week {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  background: white;
  width: 100%;
}
table#week td {
  border: 1px solid #ddd;
  border-width: 1px 0;
  width: 137px;
}
table#week td.today {
  background: #ffe;
}
table#week td.odd {
  background: #f3f3f3;
}
table#week th {
  white-space: nowrap;
  width: 137px;
  text-align: center;
  font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: normal;
  padding: 10px 0 5px 0;
  border-bottom: 1px solid #a8a8a8;
}
div.agenda_agent {
  background: #f0bff7;
  border: 1px solid rgba(186,35,208,0.5);
  width: 137px;
  padding: 4px;
  -webkit-box-sizing: border-box;
}
div.agenda_agent b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}