html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
:focus {
	outline: 0;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

button{
    border:none;
    margin:0;
    padding:0;
}

input { vertical-align:middle; }
img { display:block; }
:root {    
  --action-color: #eee;  
  --action-color-2: #4a4a4a;  
  --disabled-color: #666;
  --emphasis-1: #fff;
  --emphasis-2: #ccc;
  --emphasis-3: #777;
  --emphasis-4: #555;
  --emphasis-5: #444;  
  --emphasis-6: #333;
  --emphasis-7: #2a2a2a;
}

:root {    
  --action-color: #eee;  
  --action-color-2: #4a4a4a;  
  --disabled-color: #666;
  --emphasis-1: rgba(255,255,255,0.9);
  --emphasis-2: rgba(255,255,255,0.6);
  --emphasis-3: rgba(255,255,255,0.3);
  --emphasis-4: rgba(255,255,255,0.25);
  --emphasis-5: rgba(255,255,255,0.2);  
  --emphasis-6: rgba(255,255,255,0.1);
  --emphasis-7: rgba(255,255,255,0.1);
}

/* clearfix */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

html * {-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;text-size-adjust: none;}

body.phone { background-color: #fafafa;  -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; -webkit-user-select: none; }
body.phone .button .mobile-spinner { position: absolute; left: 50%; top:6px; margin-left: -50px; }

/* top masthead/nav in container */
#mastHead { width: 966px; margin: 0px auto; border-top-left-radius: 10px; border-top-right-radius: 10px; margin-top:10px;}
#main > .menu-container { width: 966px; margin: 0px auto; box-sizing:border-box; }
#main > .menu-container{height:34px;background-position:0 -173px;background-color:#35393C;overflow:hidden;padding:3px 4px 0px 0px;border-bottom:1px solid #111;border-top:1px solid #484848;}
#main > .menu-container #navArea{float:left;}

.expanded .header-bg { background-image: none; }
.expanded #mastHead { width: 1166px; }
.expanded .mast-head-elements { width: 940px; }
.expanded #main > .menu-container { width: 1166px; }
.expanded #main > .center-container { width: 1166px; }
.expanded slideMenuArea { width: 1166px; }
.expanded #footer .content-1 { width: 1166px; }
.expanded #footer .content-2 { width: 1130px; }
.expanded > .logged-in-user {margin-left:580px;}
.expanded .run-report .col1 { width: 376px; margin-right:42px; }
.expanded .run-report .col2 { width: 376px; }
.expanded .run-report .col3 { width: 266px; }
.expanded .run-report .col1.col2 { width: 784px; }
.expanded .run-report .col1.col2 .data { width: 798px; }

.expanded .badges-to-go .badge-container { margin: 30px 60px; height: 1675px; }
.expanded .badges-to-go h2 { line-height: 1.5em; margin-bottom: 1.1em; }
.expanded .badges-to-go h3 { position:absolute; left:670px; top:0px; width:300px; }
.expanded .badges-to-go .badge-list { margin: 0px; }
.expanded .badges-to-go .badge-list li { width: auto; }
.expanded .badges-to-go .badge.full { height: 135px; width: 135px; background-size: contain; }
.expanded .badges-to-go .badge.full.badge-025 {height:140px;}
.expanded .badges-to-go .badge.full.badge-115 { height: 130px; }
.expanded .badges-to-go .badge.full.badge-130 { height: 145px; }
.expanded .badges-to-go .badge.full.badge-149 { height: 145px;background-size:cover; }
.expanded .badges-to-go .badge.full.badge-240 { height:145px;}
.expanded .badges-to-go .badge-container .badge-series { }
.expanded .badges-to-go .badge-series .designer { top:1700px; left:780px; font-size: 1em; }

.expanded .ranks-overview .medals-container .row {display:inline-flex;}
.expanded .ranks-overview .medals-container .row .category .name{ width:225px; margin-top:4px; font-size:16px; margin-right:5px; line-height:normal; }
.expanded .ranks-overview .medals-container .row .category span.medal { height: 18px; width: 18px; margin: 4px 4px 0px 4px; }
.expanded .ranks-overview .medals-container .headings-1 { margin-left: 230px; margin-bottom:50px;}
.expanded .ranks-overview .medals-container .headings-1 span { width: 164px; margin-left: 15px; font-size:14px;}
.expanded .ranks-overview .medals-container .headings-2 { padding-left: 205px; margin-bottom: 0px; border: none; }
.expanded .ranks-overview .medals-container .headings-2 div { margin:0px 13px; }
.expanded .ranks-overview .medals-container .headings-2 div span { width:30px; font-size:14px; margin-bottom:7px;  }
.expanded .ranks-overview h2.rank-breakdown { display: none; }
.expanded .ranks-overview ul.nav { margin: 50px 0px; }
.expanded .ranks-overview ul.nav li { padding: 4px 16px; font-size: 18px; }
.expanded .ranks-overview .rank-details-container .period > h3 { margin-bottom: -20px; margin-top: 30px; border-bottom: none; border-top: 1px solid #333; padding-top: 10px; font-size: 18px; }
.expanded .ranks-overview .rank-details-container .period > h3 span { font-size: 0.7em; }
.expanded .ranks-overview .rank-details-container .userdata-container { width: 340px; margin-right: 0px; padding-left: 20px; margin-top:45px; }
.expanded .ranks-overview .rank-details-container .userdata-container .medal { height: 90px; width: 90px; }
.expanded .ranks-overview .rank-details-container .userdata-container .medal h3 { width: 90px; font-size: 14px; margin-top: 20px; }
.expanded .ranks-overview .rank-details-container .userdata-container .medal-label { width: 170px; font-size: 22px; color: #ccc; margin-top: 35px; margin-left: 20px; }
.expanded .ranks-overview .rank-details-container .userdata-container .medal h3 > span { font-size: 30px; }
.expanded .ranks-overview .rank-details-container .userdata-container .explain { width: 220px; }
.expanded .ranks-overview .rank-details-container .userdata-container .more-info { top:160px; left:250px; right:unset; bottom:unset; font-size:12px; }

.run-hover {position:absolute;min-width:280px;background-color:#333;padding:5px 10px; font-size:12px; color:#ccc;z-index:99;pointer-events:none;}
.run-hover .top-container .stat-container { height:40px; margin-top:5px; font-size: 20px; display: flex; justify-content: space-between; align-items:flex-start; }
.run-hover .top-container .stat-container div { color: #f1f1f1; }
.run-hover .top-container .stat-container span { font-size: 0.6em; color: #aaa; margin-left: 2px; display: inline-block; }
.run-hover .top-container .stat-container .weather-container {display:flex;}
.run-hover .top-container .stat-container .weather-sprite { transform: scale(0.66); transform-origin:top;margin-top:-1px;}
.run-hover .top-container .stat-container .temperature span {font-size:1em;}

.run-hover .bottom-container { display: flex; }
.run-hover .bottom-container .container-1 { width: 160px; z-index: 2; }
.run-hover .bottom-container .container-2 { z-index: 1; }
.run-hover .bottom-container .description { font-size: 18px; margin-bottom: 8px; z-index: 2; background-color: rgba(52,52,52,0.6); }
.run-hover .bottom-container .location-container { color: #fff; text-align: right; font-size: 12px; position: relative; text-transform: uppercase; }
.run-hover .bottom-container .location-container .toponym { bottom: 18px; }
.run-hover .bottom-container .location-container .location { bottom: 0px; }
.run-hover .bottom-container .location-container div { position: absolute; right: 0px; display: inline-block; padding: 1px 4px; white-space: nowrap; }

.phone #main > .menu-container { background-image: none; height: 115px; border: none; padding: 0; }
.phone #main > .menu-container ul.nav { display:flex; margin: 0; }
.phone #main > .menu-container ul.nav li a {font-size:28px; margin:0; padding: 47px 25px 47px 25px; display:inline-block; border-radius:0;}
.phone #main > .menu-container ul.nav li.nav-item-invite { display: none; }

.phone .header-bg, .phone .footer-bg, .phone #main .bg-shadow-left, .phone #main .bg-shadow-right { display: none; }


/* Logging window in IE */
#consoleLog { font-size:10px; background-color: #f1f1f1; color:#444; position: fixed; overflow: scroll; bottom: 0px; height: 90%; right: 0px; width: 500px; padding: 10px; border: 1px solid #555; z-index: 99; }
#consoleLog li { border-bottom: 1px solid #aaa; padding:3px 0px;}

/* global sprites */
#addWeightButton .scale, .button.icon .runner-small, .close-button-image, #colorSelector div, .down-arrow, #footer .social-media a, .official-tag, .sendToFB,
.sentToFB, .share .facebook, .share .twitter, .icon-help, .button, .button:visited, .sync-sprite,
.hovertext.warning, .scissors, .import-settings, .sr-logo, .up-arrow, .close-stat, .sync-img, .missing-profile-image, .favicon-logo,
.userphoto.size-100.missing, .userphoto.size-50x50.missing, .userphoto.size-200.missing, .button.icon .mobile{background-image:url('../images/sprites/srMasterSprite205x760v2.png');}

.icon-share{background-image:url('../images/sprites/icon-share-sprite.png');background-position:0px 12px;height:12px;width:15px;}
.icon-share:hover{background-position: 0px 0px;}

.header-bg, .footer-bg, #main .bg-shadow-left, #main .bg-shadow-right{background-image:url('../images/sprites/header-footer-shadows2060x74.png');}
.icon-help{background-position:-59px -156px;height:17px;opacity:0.5;width:17px;}
.medal-image{background-image:url('../images/sprites/srMedals489x627.png');width:153px;height:150px;}


html body{font-family: Arial, Helvetica, sans-serif;}
html body{background-color:#111;background-repeat:repeat;overflow-y:scroll;}
/*
html body.hills {background-color: #000;background-image: url('../images/backgrounds/12.jpg');background-repeat: no-repeat;overflow-y: scroll;background-size: cover;background-position: center; }
    */
/*   
html  video{background-color:#000;background:url('../images/backgrounds/patterns/video.jpg');background-size:cover;width:auto;height:auto;min-height:100%;min-width:100%;position:fixed;right:0px;bottom:0px;}
html  body.pro1{background-color: rgba(78, 166, 255,0.2);
background-image: linear-gradient(90deg, rgba(0,0,0,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(0,0,0,.13) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(0,0,0,.17) 50%),
linear-gradient(90deg, transparent 50%, rgba(0,0,0,.19) 50%);
background-size: 13px, 29px, 37px, 53px;
}
*/

.add-run-container.full-screen { position: absolute; top:0px;left:0px; min-height: 105vh; background-color: #fff; padding:20% 30%; z-index:20; box-sizing:border-box; }

body > .status-message { position: absolute; color:#f1f1f1; padding:1em 2em; font-size:30px; line-height:1.5em; left: 50%; transform: translateX(-50%); top:30%; z-index:5; border:1px solid rgba(255,255,255,0.5); border-left:none; border-right:none; }
body > .status-overlay { position: absolute; top:0px; left:0px; height: 100vh; width: 100vw; background-color: rgba(0,0,0,0.87); z-index:4; }

strong {font-weight:bold;}

h1{font-size:1.8em;}
h2{font-size:1.4em;}

.holiday-egg{position:absolute;width:100%;height:100%;}

/*  override guidders.css zindex (sometime we want them to stay behind modals) 
	also, the guiders seem weirdly offset to the left...
*/
div.guider{z-index:9999 !important;} 
.guiders_content p{margin-top:20px;padding:0px 10px;line-height:1.4em;}
.guiders_description ul{margin-top:14px;}
.guiders_description li{margin-bottom:7px;list-style:disc;margin-left:35px;}

.hovertext-box{background-color:#f4f4f4;padding:.5em;max-width:350px;color:#333;border-radius:5px;font-size: 14px;line-height: 1.4em;}
.hovertext-box table td { padding: 3px; border: 1px solid #eee; }
#hoverBox  a { color: #ff6600; text-decoration: none; font-weight:bold;}
#hoverBox {border:1px solid #333;}


/* user photos */
.userphoto{background-repeat:no-repeat;}
.userphoto.size-50x50{height:50px;width:50px;}
.userphoto.size-50x50.missing{height:50px;width:50px;background-position:-150px -53px;}
.userphoto.size-50{height:50px;width:100px;}
.userphoto.size-50.missing{height:50px;width:50px;background-position:-150px -53px;}
.userphoto.size-100{height:100px;width:100px;}
.userphoto.size-100.missing{background-position:0 -605px;height:100px;width:100px;}
.userphoto.size-200{height:200px;width:200px;}
.userphoto.size-200.missing{background-position:2px -404px;height:200px;width:200px;}

/* header */
#mastHead{height: 54px; background-color:#274152;border-bottom:1px solid #111;}
#mastHead .logout{font-weight:normal;font-size:13px;color:#f6f6f6;text-decoration:none;}
#mastHead .logout:hover{text-decoration:underline;}
.header-bg{background-position:-20px -10px;position:absolute;left:-2px;top:-31px;width:974px;height:45px;}
.mast-head-elements{position:relative;width: 740px;margin-left: 220px;}
.sr-logo{position:absolute;background-position:0 -334px;height:33px;margin:10px 10px 0 10px;width:198px;}
.warning{background-position:-20px -270px;height:12px;width:16px;}
.member-type a{color:#bbb;background-color:#333;text-decoration:none;font-weight:normal;display:inline-block;position:relative;font-size:15px;padding:1px 6px;margin:4px;border:1px solid #555;border-radius:5px;}
.member-type a:hover{color:#fafafa;}
.member-type a .notification-count{position:absolute;top:-6px;right:-8px;z-index:11;display:inline-block;font-size:11px;background-color:#ff2c2c;color:#fafafa;border-radius:10px;padding:0 4px;min-height:15px;min-width:15px;box-sizing:border-box;text-align:center;line-height:15px;font-weight:bold;}
.member-type .beta-tester { display: inline-block; font-size: 15px; padding: 0px 6px; margin: 4px; color: #eee; border: 1px dotted #fff; border-radius: 5px; }
.member-type .beta-tester.social { background-color:rgba(255,255,255,0.12);border:none;padding:1px 8px; }

#quickSignup { display: inline-block; }

/* header login/welcome area */
.loginArea { position: absolute; top: 5px; right: 10px; }
.loginArea #quickSignup{position:absolute;right:90px;top:0px;}
.loginArea .ajax-spinner-logout { position: absolute; left: -22px; top: 2px; }
.login-nav {float:right;margin-right:20px;margin-top:5px;}
.login-nav a:nth-of-type(1) {margin-right:10px;font-weight:normal;font-size:14px;}
.login-nav a:nth-of-type(2) {font-weight:normal;font-size:14px;}

/* header nav */
#globalNavArea {float:left;margin-top:10px;}
#globalNavArea li{display:inline-block;position:relative;margin-left:14px;clear:none;padding:0px 0px;}
#globalNavArea li a{display:block;font-weight:normal;font-size:12px;text-decoration:none;cursor:pointer;color:#eee;padding-bottom:1px;text-transform:uppercase;}
#globalNavArea li:hover a{color:#FFCC00;border-bottom:none;}           
#globalNavArea li:hover ul a{border:none;color:#eee;}           
#globalNavArea ul ul li:hover a{color:#FFCC00;}           
#globalNavArea ul ul a{font-size:11px;}
#globalNavArea ul{display:inline-table;position:relative;}
#globalNavArea ul:after{content:"";clear:both;display:block;}
#globalNavArea ul ul{display:none;}
#globalNavArea ul li:hover > ul{display:block;}
#globalNavArea ul ul:hover{display:block;}
#globalNavArea ul ul{position:absolute;padding-top:9px;top:11px;left:-90px;width:400px;height:20px;}
#globalNavArea ul ul li{float:left;}

#globalNavArea .upgrade{margin-left:0px;padding:0px;}
#globalNavArea .upgrade a{font-weight:bold;color:#ffdd20;margin-left:15px;font-size:15px;}

.my-runs #myRunsNavItem a{border-bottom:1px solid #DDD;}
.my-runs #myRunsNavItem a:hover{border-bottom:none;}
.settings #settingsNavItem a{border-bottom:1px solid #DDD;}
.settings #settingsNavItem a:hover{border-bottom:none;}
.leaders #leadersNavItem a{border-bottom:1px solid #DDD;}
.leaders #leadersNavItem a:hover{border-bottom:none;}
.about #aboutNavItem a{border-bottom:1px solid #DDD;}
.about #aboutNavItem a:hover{border-bottom:none;}
.app-faq #appsNavItem a{border-bottom:1px solid #DDD;}
.app-faq #appsNavItem a:hover{border-bottom:none;}
.beta #betaNavItem a{border-bottom:1px solid #DDD;}
.beta #betaNavItem a:hover{border-bottom:none;}

/* slide down friend list panel */
#slideMenuArea {position:absolute;width:966px;height:0px;overflow:visible;z-index:100;}
.expanded #slideMenuArea { width: 1166px;}
.slide-shadow{width: 100%; background-color:#000;opacity:0.3; height: 2px; margin-top: 0px;}
.slide-panel{display:none;border-bottom:1px solid #333;background-color:#333;height:76px;border-top:1px solid #333;}

#slidePanelTab{display:none;position:absolute;cursor:pointer;left:35%;margin-top:-3px;padding:3px 6px 1px 6px;background-color:#555;text-align:center;box-shadow:0px 1px 3px rgba(0,0,0,.5);border-top:1px solid #222;border-radius:0px 0px 3px 3px;}

#slidePanelTabText {color:#fff;}
#slidePanelTabText          .open   { display: inline; }
#slidePanelTabText          .close  { display: none; }
#slidePanelTabText.open     .open   { display: none; }
#slidePanelTabText.open     .close  { display: inline; }


#synchReport{position:absolute;right:10px;top:32px;font-size:14px;}
#synchReport a{text-decoration:none;font-weight:normal;}
#synchReport a:hover{text-decoration:underline;}
.sync-status .ajax-loader, .import-message .ajax-loader{float:left;margin-top:2px;margin-right:6px;background-image:url("../images/ajax-loader.gif");width:15px;height:15px;}
#slideMenuArea .ajax-loader{background-image:url("../images/ajax-loader-grey.gif");}

.sync-sprite{float:right;margin-left:6px;background-position:0 -267px;height:20px;width:20px;cursor:pointer;}
.sync-sprite:hover{background-position:0px -286px;}
.sync-sprite:active{background-position:0px -307px;}

.import-settings{background-position:-42px -156px;cursor:pointer;height:17px;width:17px;float:right;margin:0px 4px;}
.import-options{position:absolute;left:0px;top:25px;width:156px;z-index:110;background-color:#272727;box-shadow:3px 3px 3px rgba(0,0,0,0.5);}
.import-options p{padding:5px; font-size:14px;color:#e8e8e8;}
.import-options p a{font-weight:normal;color:#fff;}
.import-options p.new-device{font-size:11px;color:#aaa;text-align:right;padding-right:15px;}
.import-option{border-bottom:1px solid #444;padding:8px;width:140px;font-weight:normal;}
.import-option:hover{background-color:#333;cursor:pointer;}
.import-option:active{background-color:#444;}
.import-option-file{cursor:pointer;border-bottom:1px solid #444;height:20px;height:30px;width:100%;font-weight:normal;position:relative}
.import-option-file:hover { background-color: #333; cursor: pointer; }
.import-option-file:active{background-color:#444;}
.import-file{cursor:pointer;position:absolute;left:5px;top:1px;width:130px;height:18px;font-size:14px;border:none;padding:none;margin:none;opacity:0;}
.import-label{cursor:pointer;position:absolute;left:8px;top:8px;width:100%;}

.nike-battery{float:right;margin-right:10px;margin-top:2px;cursor:pointer;}

.import-message-container{float:right;clear:none;}
.import-message{height:16px;padding:8px;background-color:#333;border:1px solid #555;border-top:none;border-right:none;display:none;}
.import-modal-container { width: 100%; position: fixed; top: 40%; text-align:center; z-index:99;}
.import-modal { display:inline-block; padding:1em 1.5em; background-color: #fff;font-size: 32px; border-radius:4px; border:1px solid #aaa;}


#blogNavItem {width:54px;height:20px;}
#blogNavItem a{width:35px;} /*removed float left during nav redesign*/
.blog-notification{height:18px;width:18px;position:absolute;right:2px;top:-10px;cursor:pointer;}
.blog-notification.notify-1{background-image:url("../images/notification-1-18x18.png");}
.blog-notification.notify-2{background-image:url("../images/notification-2-18x18.png");}
.blog-notification.notify-3{background-image:url("../images/notification-3-18x18.png");}
.blog-notification.notify-3-plus{background-image:url("../images/notification-3-plus-18x18.png");}

.blog-titles-hover li{margin-left:20px;padding-bottom:4px;list-style-type:square;}
.blog-titles-hover{margin:10px;width:300px;}
.blog-titles-hover .clear-notifications{float:right;margin:10px;}
.blog-titles-hover .view-blog-updates{float:left;margin:10px;}

body > .logged-in-user { position: fixed; left:50%; top: 20px; margin-left:480px; padding: 4px 15px; background-color: #eee; color: #666; font-size: 18px; display: inline-block; border-radius:0px 20px 20px 0px; }

.smashrun{color:#FFA000;}
	
/*other nav*/
#menubar { position: relative; }
.nav{margin-top:1px;float:left;margin-left:5px;}
.nav.left-nav{min-width:555px;}
.nav li{display:inline;line-height:23px;}
#menubar .nav li:hover a{background-color:#4b4b4b;} /*important to have the ID o/w screws up badges detail nav*/
.nav li a{font-size:14px;font-weight:normal;line-height:19px;text-decoration:none;text-transform:uppercase;color:#fff;vertical-align:middle;padding:1px 10px 0px;margin:0px 3px;border-radius:8px;}
.nav li a em{color:#ffff00;text-shadow:0 0 3px rgba(255, 255, 255, 0.55);font-size:16px;}

/*secondary nav*/
.sub1.nav{margin-top:6px;}
.sub1.nav li{margin:0px;padding:0px;margin-right:14px;}
.sub1.nav li a{padding:4px;margin:0px;text-transform:lowercase;font-size:18px;line-height:20px;font-weight:normal;}

/*tertiary nav*/
.sub2.nav{margin-top:4px;}
.sub2.nav li{margin:0px;padding:0px;margin-right:10px;}
.sub2.nav li a{padding:2px;margin:0px;text-transform:lowercase;font-size:14px;line-height:16px;}

/*nav in pop up boxes*/
#box .inner-box ul.nav {margin:0px;padding:0px;}
#box .inner-box ul.nav li {padding:0px 10px 0px 0px;}
#box .inner-box ul.nav li a{color:#333;text-transform:lowercase;font-weight:normal;}

#main{z-index:3;position:relative;color:#fff;}
#main .bg-shadow-left, #main .bg-shadow-right{background-repeat:repeat-y;top:-80px;bottom:45px;position:absolute;width:18px;}
#main .bg-shadow-left{background-position:-1993px 0;left:-18px;}
#main .bg-shadow-right{background-position:-2026px 0;right:-18px;}
#main > .center-container{ width: 966px; margin: 0px auto; position:relative;}

/* 2nd level nav*/
/* when new social tab is added
#currentView{margin-top:5px;float:left;margin-left:0px;width:256px;padding-left:20px;border-left:3px solid #666;}
*/
#currentView{display:inline-block;padding-left:20px;}
.pipe{background-color:#666666;float:left;height:22px;margin-left:-30px;width:3px;} 

.facebook-loader{background:url('../images/facebook/indicator_blue_large.gif');height:32px;width:32px;}
.facebook-loader-2{background:url('../images/facebook/fb-logo-150x150.gif');height:150px;width:150px;}
.facebook-loader-3{background:url('../images/facebook/fb-logo-clear-150x150.gif');height:150px;width:150px;}

.form-error{margin:0px 0px 5px 130px;color:#880000;font-weight:bold;height:20px;white-space:nowrap;}

.centered{position:relative;width:900px;left:0px;margin:0px auto;}
.breaker{clear:both;}

a{color:#fff;text-decoration:underline;font-weight:bold;}

a.link{display:inline-block;}

a.on-white{color:#000;text-decoration:underline;}


/* Footer */
.footer-bg{background-position:-1010px -10px;bottom:-44px;height:69px;left:-8px;position:absolute;width:974px;}
#footer a{text-decoration:none;}
#footer {margin-bottom:25px;width:966px;}
#footer .content-1{position:relative;border-top:1px solid #444;height:65px;width:966px;background-color:#131313;}
#footer .content-2{border-radius:0px 0px 25px 25px; height:20px;width:930px;border-top:1px solid #444;border-bottom:1px #191919 solid; padding:4px 0px 8px 36px;background-color:#131313;}
#footer #otherProjects {margin-top:30px;margin-left:30px;}
#footer #otherProjects a{margin-right:20px;text-decoration:none;border-bottom:1px solid #eee;}
#footer #otherProjects h3{margin-right:20px;text-transform:uppercase;}
#footer .link ul{margin:0px;}
#footer .links li{list-style-type:none;float:left;margin-right:10px;padding-right:9px;border-right:2px solid #444;}
#footer .links{font-size:15px;padding-top:1px;position:absolute;}
#footer .links a{border:none;font-weight:normal;text-transform:lowercase;color:#cacaca}
#footer .links a:hover{border-bottom:0px solid #fafafa;font-weight:normal;color:#fff}
#footer .contact-info  {font-size:15px;left:490px;position:absolute;margin-top:1px;}
#footer .contact-info a{font-size:15px;color:#fece7b;font-weight:normal;border:none;}
#footer .contact-info span{color:#ddd;}
#footer .hirunner {position:absolute;left:36px;top:12px;}
#footer .hirunner a{text-decoration:none;border:none;}
#footer .hirunner span{color:#fece7b;}
#footer .hirunner h2{font-size:20px;width:210px;border-bottom:1px solid #eee;}
#footer .hirunner h3{color:#fece7b;font-size:13px;}
#footer .here-we-are{position:absolute;left:280px;top:18px;font-size:22px;color:#383838;white-space:nowrap;}
#footer .here-we-are a{color:#464646;font-weight:normal;}
#footer .here-we-are a:hover{color:#777;}
#footer .here-we-are a.jacklyn{color:#453636;}
#footer .here-we-are a.jacklyn:hover{color:#775a5a;}
#footer .social-media {width:140px;height:15px;position:absolute;top:18px;left:777px;border:1px solid #555; padding:4px;}
#footer .social-media div{float:left;}
#footer .social-media p {font-size:11px;color:#999;margin-top:-15px;margin-left:20px;background-color:#131313;padding:4px;width:76px;white-space:nowrap;}

#footer .social-media a{text-indent:-100px;height:25px;width:31px;display:block;float:left;cursor:pointer;overflow:hidden;padding-right:2px;}
#footer .social-media a.google{background-position:-4px -79px;}
#footer .social-media a.twitter{background-position:-39px -79px;}
#footer .social-media a.facebook{background-position:-72px -79px;}
#footer .social-media a.rss{background-position:-104px -79px;}
#footer .social-media a.google:hover{background-position:-4px -53px;}
#footer .social-media a.twitter:hover{background-position:-39px -53px;}
#footer .social-media a.facebook:hover{background-position:-72px -53px;}
#footer .social-media a.rss:hover{background-position:-104px -53px;}



#footerHead{background-color:#fff;padding-top:10px;margin-top:40px;width:100%;font-size:1.4em;clear:both;height:40px;}
#footerHead div{font-size:42px;font-weight:bold;color:#000;left:40px;padding:4px 0px 0px 4px;}
#footerContent h2{margin-top:24px;}
#footerContent{height:240px;position:relative;width:900px;left:0px;margin:0px auto;color:#fff;}


legend{font-size:30px;}


.black input{background-color:#FFF;background-position:0 -714px;border:1px solid #111;color:#222;padding:3px;width:180px;}
.black input[type="checkbox"]{
	background:none;
	height:13px;
	padding:0;
	width:12px;
}



/* Form validation errors */
.validation{font-size:16px;font-weight:bold;color:#ff6666;}
.validation a{color:#fff;}
	
/*Specific forms*/
#loginNike {width:650px;}
#loginNike fieldset{height:320px}
#loginNike #nikeEmail{width:365px;}
#loginNike #nikePassword{width:365px;}

#passwordReminder {width: 570px;}
#passwordReminder fieldset{height:180px}
#passwordReminder #reminderEmail{width:250px;}
#passwordReminder label{width:100px;}
#passwordReminder #emailPasswordButton{width:100px;margin-left:4px;}
#passwordReminder #passwordReminderError{height:20px;margin-left:110px;}
#passwordReminder .button-loader{margin:10px 0px 0px 10px;}

#linkAccount {width:585px;padding:0px 5px 10px 5px;}
#linkAccount fieldset{height:300px}
#linkAccount #linkLogin {width:330px;}
#linkAccount #linkPassword {width:330px;}

.info-box{background-color:#fff;border:1px solid #333;position:absolute;z-index:999999;}
.info-box .message{margin-top:0px;padding:20px 30px 10px 30px;}
.info-box p{margin-top:10px;margin-bottom:20px;}
.info-box ul{margin:10px 0px 10px 15px;list-style-type: disc;}
.info-box ul li{padding-left:10px;margin-bottom:6px;}
.info-box .button.okay{width:33%;margin-top:10px;margin-bottom:20px;}
.info-box .close{color:#888;float:right;cursor:pointer;text-decoration:underline;font-size:12px;margin:6px 10px;}
.info-box .info-html { padding:15px 20px; }

#box.panel {background-color:#fff;}
#box.panel fieldset {border:1px solid #ccc;padding:20px;}  
#box.panel fieldset li { padding-bottom: 1em; clear:both;height:50px;}  
#box.panel .panel-head{font-size:18px;background-color:#454545;padding-top:4px;width:100%;color:#fafafa;position:absolute;top:0px;left:0px;}
#box.panel .panel-head div{padding:1px 15px 5px 20px;cursor:move;text-transform:capitalize;}
#box.panel .message{margin-top:0px;padding:15px;}
#box.panel .message-body{font-size:16px;margin-top:20px;margin-bottom:25px;color:#333;}

#box.panel .message-body .import-failure { max-width:550px; }
#box.panel .message-body .import-failure h2 { font-size:18px }
#box.panel .message-body .import-failure p { margin-top:20px;}

.phone #box.panel .button.center.medium { position:absolute; bottom:2em; }

.phone #box.panel .import-failure h2 { font-size: 60px; margin-top: 140px; margin-bottom:140px; }
.phone #box.panel .import-failure p { font-size: 46px; margin-top: 100px; }

.phone #box.panel .panel-head > div {font-size:38px;padding:15px 0;} /* initially added to fix mobile css for goal setting*/
.phone #box.panel .panel-head {font-size:48px;padding:40px 0;}
.phone #box.panel .message.question .message-body > div {margin-bottom:50px;}
.phone #box.panel .message.question .message-body {max-width:750px;line-height:1.4;font-size:38px;letter-spacing:0.02em;}

#box.panel .message.question {line-height: 1.4em;letter-spacing: 0.01em;}
#box.panel .message.question .message-body { max-width: 550px; }
#box.panel .message.question .message-body div { margin: 20px 0; }
#box.panel .message.question .message-body .button { }
#box.panel .message.question .message-body .button.small { }

/* box explaining a feature */
#box.panel .explanation p {color:#444;line-height:1.4em;}
#box.panel .explanation a {color:#ff9900;border-bottom:1px solid #ccc; padding-bottom:0px;text-decoration:none;font-weight:bold;}
#box.panel .explanation .box{margin-top:10px;border:1px solid #aaa;background-color:#f1f1f1;padding:5px 10px;line-height:1.4em;}

ul.bullet li:before 
{    
	color:#ff6600;
	font-weight:bold;
	font-size:18px;
	content: "\00BB \0020"; 
}
ul.bullet li{margin-bottom:8px;}

/* Don't screw with this without careful consideration, it's more complicated than it appears */
.close-button{position:absolute;display:block;height:0px;width:0px;top:-15px;right:12px;}
.close-button-image{background-position:-58px -11px;cursor:pointer;height:30px;width:30px;}
.close-button-image:hover{background-position:-101px -11px;cursor:pointer;}
.close-button-image2{background-image:url("../images/close2-30x30.png");cursor:pointer;height:30px;width:30px;}
.close-button-image2:hover{background-image:url("../images/close2-over-30x30.png");cursor:pointer;height:30px;width:30px;}


/*container for all pop up forms*/
/* this really needs to rationalized at some point */
#shadow { display: none; }
#box {border-radius:8px;display:block;width:auto;position:absolute;box-shadow:8px 12px 20px 10px rgba(0, 0, 0, .3);}
#box.fixed{position:fixed;}
#box2 {display:block;width:auto;position:absolute;}
#box2 .popup-image{border:5px solid #eee;}
.inner-box:hover{cursor:auto;}
.inner-box{cursor:auto;padding:10px;overflow:auto;margin-top:0px;} 
.inner-box h2{font-size:1.1em;font-weight:bold;margin-top:15px;}
.inner-box h3{font-weight:bold;margin-top:10px;}
.inner-box p{margin-top:10px;margin-bottom:20px;}
.inner-box ul{margin:10px 0px 10px 15px;list-style-type: disc;}
.inner-box ul li{padding-left:10px;margin-bottom:6px;}
.inner-box .button.okay{margin-top:10px;margin-bottom:0px;}

.phone .main-container { overflow: hidden; width: 100%; }
.phone .phone-celebration-container .rays { width: 400px; height: 400px; background-size:400px;left:30%;}
.phone .phone-celebration-container .rays.orange { left: 20%; } 
.phone .phone-celebration-container .rays.white { left: 120%; }
.phone .phone-celebration-container canvas { width: 950px !important; }
.phone #box { border: none; border-radius: 0px; min-height:100%;}
.phone .inner-box { padding: 0px 60px 40px 60px; margin-top:0px; }
.phone .panel .panel-head { position:relative; background-color:transparent; text-align:center; color:#aaa; border-bottom:1px solid #aaa; padding:10px;margin-bottom:100px; font-size:50px;}
.phone .panel .button.medium { font-size: 70px; padding: 0.2em 0.6em; background-image: none; box-sizing:border-box;}
.phone .panel .button.center { width: 700px; }

.phone #box.panel .message-body .import-failure { max-width: auto; }
.phone #box.panel .message-body { font-size: 5em; width: 100%; margin-top: 2em; margin-bottom: 3em; color: #333; }
.phone .panel .message .button { background-image: none; font-size: 50px; margin-left: 20px; padding:30px 40px;}
.phone .panel .message.question .button {font-size:48px;background-color:#3a3a3a;margin-left:0;padding:30px 50px;}/* check against confirm message for reactivating social on mobile */

.phone .info-box { font-size: 40px; width:966px; left:auto; padding:2em 1em 1em 1em;box-sizing:border-box;position:absolute;margin:0px auto;border:none;}
.phone .info-box .close { color:#fff;; position:absolute; right:35px;top:0px;}
.phone .info-box .close:after { font-size:80px;color:#aaa;cursor:pointer; content: "X"; position:absolute;top:0px;left:0px;}

body.phone .mobile-loader { position: absolute; top:50%; left: 50%; margin-left: -100px; margin-top:-100px; opacity:0.8; z-index:999}

body.phone .close-button { top: 30px; right:45px; }
body.phone .close-button-image { background: none; font-size: 80px; color: #ccc; text-indent: -50px;  }
body.phone .close-button-image:after { content: "X"; }

.box-transform {
	-webkit-transition: all .75s ease-in-out;    
	-webkit-transform: rotate(360deg);    
	-moz-transition: all .75s ease-in-out;
	-moz-transform: rotate(360deg);    
}

/*Standard message response (messages are embedded in popup forms)*/
.message-standard{width:450px;margin:5px;}
.message-standard h1{padding-bottom:4px; border-bottom:2px solid #ccc}
.message-standard .body{clear:both;margin-top:20px;width:450px;}
.message-standard .button{margin-top:30px;}

body.phone .message-standard{width:450px;margin:5px;}
body.phone .message-standard h1{font-size: 50px;}
body.phone .message-standard .body{font-size:30px; margin-top:90px;width:750px;}
body.phone .message-standard .button{margin-top:80px;font-size:40px;line-height:1.2em;}


.text-info{color:#2222AA;font-weight:bold;}
.text-info-unexpected{color:#880000;font-weight:bold;}

.popup-overlay { position:fixed; top:0px; left:0px; height:100%; width:100%; background-color: rgba(0,0,0,0.4); z-index:3; }

#overlay img{ border: none; }
#overlay{ background-image: url(../images/overlay-50.png); }
#overlay.clear { background-image:none;}                  

.overlay-2{ background-image: url(../images/overlay-30.png); background-repeat:repeat;width:100%;height:100%;position:absolute;z-index:999999;top:0px;left:0px;}                         
.overlay-3{ background-color:#000;opacity:0.9;width:100%;height:100%;position:absolute;z-index:999999;top:0px;left:01px;}                         

* html #overlay{
	background-color: #333;
	background-color: transparent;
	background-image: url(../images/blank.png);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/overlay-50.png", sizingMethod="scale");
}
	
	
#shadow img{ border: none; }
#shadow{ background-image: url(../images/overlay-30.png); }                         

* html #shadow{
	background-color: #333;
	background-color: transparent;
	background-image: url(../images/blank.png);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/overlay-20.png", sizingMethod="scale");
}

.reflect{
	-webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.5)));
}

/* Publish facebook run */
.fbContainer{border-top:medium none;margin-top:15px;margin-bottom:7px;min-height:50px;padding:7px 0 0 60px;position:relative;}
.fb-name{color:#3B5998; font-size:13px;font-weight:bold;display:block;}
.fbStoryPic{left:0;position:absolute;color:#3B5998;cursor:pointer;outline-style:none;text-decoration:none;}
.fbAttachment{padding-right:10px;float:left;overflow:hidden;}
.fbAttachmentInfo{display:table;}
.fbAttachmentCaption{color:#111;padding-top:3px;font-weight:normal;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:11px;text-align:left;}
.fbContainer .fbStatus{color:#333333;font-size:13px;margin:10px 10px 10px 0px;}
.fbShowRestOfMessageLink{font-size:11px;padding-top:4px;font-weight:bold;color:#3B5998;text-decoration:none;cursor:pointer;display:none;}
.fbShowRestOfMessageLink:hover{text-decoration:underline;}
.fbRestOfMessage{display:none;}
.fb-publish-head{background-image:url("../images/facebook/fb-publish-header-500x68.gif");height:68px;width:500px;}


/*publish to facebook*/
#fb-status-skip {float:left;}
#fb-status-publish{float:left;margin-left:30px;}


.tp-help {
    width: 25px;
    height: 22px;    
    position:absolute;
    right:0px;
    background-image: url("../images/toiletpaper25x22.png");
    opacity:0.1;
    cursor:pointer;
}
.tp-help:hover{
    opacity:1;
}
.tp-help.spin {
    opacity:1;
    -webkit-animation: spin 2s ease-in-out forwards,  slide-in 2s ease-in-out forwards;
    /* webkit chrome, safari, mobile */
    -webkit-animation-name: spin 2s ease-in-out forwards;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-timing-function: linear;
    /* mozilla ff */
    -moz-animation-name: spin 2s ease-in-out forwards;
    -moz-animation-iteration-count: 2;
    -moz-animation-timing-function: linear;
    /* microsoft ie */
    -ms-animation-name: spin 2s ease-in-out forwards;
    -ms-animation-duration: 1000ms; 
    -ms-animation-iteration-count: 2;
    -ms-animation-timing-function: linear;
    /* standard */
    animation-name: spin 2s ease-in-out forwards;
    animation-duration: 1000ms; 
    animation-iteration-count: 2;
    animation-timing-function: linear;
}



/* Badge Award Graphics */

#confetti{display:none;z-index:99;position:absolute;width:100%;height:100%;}

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

/* basic structure for the rays setup */
.rays.white{
	background: url("../images/rays-yellow-600x600.png") 0 0 no-repeat; 
	margin-left:-700px;
    animation-duration: 30000ms;
	-webkit-animation-duration: 30000ms; 
	-moz-animation-duration: 30000ms; 
    -ms-animation-duration: 30000ms; 
}
.rays.orange{    
	margin-left:-200px;    
	background: url("../images/rays-orange-700x700.png") 0 0 no-repeat;     
	-webkit-animation-duration: 40000ms; 
	-moz-animation-duration: 40000ms; 
    -ms-animation-duration: 40000ms; 
}

.rays	{ /* with animation properties */
	display:none;z-index:99;
	background: url("../images/rays-white-700x700.png") 0 0 no-repeat; 
	position: absolute; 
	width: 900px; 
	height: 700px;
	left:50%; 
	margin-left:-500px;
	margin-top:-100px;
	animation-name: spin;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

	/* webkit chrome, safari, mobile */
	-webkit-animation-name: spin; 
	-webkit-animation-iteration-count: infinite; 
	-webkit-animation-timing-function: linear;
	
	/* mozilla ff */
	-moz-animation-name: spin; 	
	-moz-animation-iteration-count: infinite; 
	-moz-animation-timing-function: linear;
	
	/* microsoft ie */
	-ms-animation-name: spin; 
	-ms-animation-iteration-count: infinite; 
	-ms-animation-timing-function: linear;
}

.tooltip{display: block;background: #000;background: rgba(0, 0, 0, 0.9); color: #fff; margin-top: -3.7em; text-align: left;padding: 1em;z-index: 99;position: absolute;right: 105%;min-width: 11em;border-radius: 5px;font-style: italic;font-size: 14px;line-height: 1.4em;opacity: 0;}
.upload-box {background-color:#333;border:1px solid #888;padding:20px;min-height:80px;}
.upload-box p{float:left;display:block;width:300px;color: #e8e8e8; font-size: 16px; text-align: center;padding:0px 20px;}

.nike-connect{background-image:url('../images/sprites/loginSprite339x156.png');cursor:pointer;height:39px;width:339px;}
.nike-connect{background-position:0 0;}
.nike-connect:hover{background-position:0 -39px;}


#welcomeToPRO{background-color:#000;height:1500px;overflow:hidden;position:absolute;color:#111;}
#welcomeToPRO .welcome{position: fixed;width: 600px;background-color: #fff;padding: 40px 50px 30px 50px;border: 1px solid #333;left: 50%;margin-left: -350px;z-index: 30;border-radius: 10px;box-shadow: 0px 0px 20px #555;}
#welcomeToPRO .welcome{-webkit-animation: spin 2s ease-in-out forwards,  slide-in 2s ease-in-out forwards;}
#welcomeToPRO .welcome h1{padding:0px 0px 20px 0px;margin:0px;text-align:left;}
#welcomeToPRO .welcome p{font-size:16px;margin-bottom:14px;}
#welcomeToPRO .welcome .get-started {position:absolute;right:50px;bottom:30px;}


.light-theme #footer .content-1 { background-color:#333; border-top:none;}
.light-theme #footer .content-1 .here-we-are { color: #5a5a5a; }
.light-theme #footer .content-1 .here-we-are a { color: #7a7a7a; }
.light-theme #footer .content-1 .here-we-are a:hover { color: #999999; }
.light-theme #footer .content-1 .here-we-are a.jacklyn { color: #836970; }
.light-theme #footer .content-1 .here-we-are a.jacklyn:hover { color: #A07A7A; }
.light-theme #footer .content-2 { background-color:#2a2a2a; border-top:none;}




/* File upload ajax spinner - bubbling orange blips */
.bubblingG {
text-align: center;
width:80px;
height:50px;
float:left;
}

.bubblingG span {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
margin: 25px auto;
background: #FF6600;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
-webkit-animation: bubblingG 0.9s infinite alternate;
-moz-animation: bubblingG 0.9s infinite alternate;
-ms-animation: bubblingG 0.9s infinite alternate;
-o-animation: bubblingG 0.9s infinite alternate;
}

#bubblingG_1 {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
}

#bubblingG_2 {
-webkit-animation-delay: 0.27s;
-moz-animation-delay: 0.27s;
-ms-animation-delay: 0.27s;
-o-animation-delay: 0.27s;
}

#bubblingG_3 {
-webkit-animation-delay: 0.54s;
-moz-animation-delay: 0.54s;
-ms-animation-delay: 0.54s;
-o-animation-delay: 0.54s;
}

@-webkit-keyframes bubblingG {
0% {
width: 10px;
height: 10px;
background-color:#FF6600;
-webkit-transform: translateY(0);
}

100% {
width: 24px;
height: 24px;
background-color:#FFFAA0;
-webkit-transform: translateY(-21px);
}

}

@-moz-keyframes bubblingG {
0% {
width: 10px;
height: 10px;
background-color:#FF6600;
-moz-transform: translateY(0);
}

100% {
width: 24px;
height: 24px;
background-color:#FFFAA0;
-moz-transform: translateY(-21px);
}

}

@keyframes bubblingG {
0% {
width: 10px;
height: 10px;
background-color:#FF6600;
-ms-transform: translateY(0);
}

100% {
width: 24px;
height: 24px;
background-color:#FFFAA0;
-ms-transform: translateY(-21px);
}

}

@-o-keyframes bubblingG {
0% {
width: 10px;
height: 10px;
background-color:#FF6600;
-o-transform: translateY(0);
}

100% {
width: 24px;
height: 24px;
background-color:#FFFAA0;
-o-transform: translateY(-21px);
}

}

/********************************* analyze section animations**************************************/
.pt-page-moveToLeftFade {
	-webkit-animation: moveToLeftFade .7s ease both;
	-moz-animation: moveToLeftFade .7s ease both;
	animation: moveToLeftFade .7s ease both;
}

.pt-page-moveFromLeftFade {
	-webkit-animation: moveFromLeftFade .7s ease both;
	-moz-animation: moveFromLeftFade .7s ease both;
	animation: moveFromLeftFade .7s ease both;
}

.pt-page-moveFromLeftFadeIn {
	-webkit-animation: moveFromLeftFade .7s ease both;
	-moz-animation: moveFromLeftFade .7s ease both;
	animation: moveFromLeftFade .7s ease both;
}

.pt-page-moveToRightFade {
	-webkit-animation: moveToRightFade .7s ease both;
	-moz-animation: moveToRightFade .7s ease both;
	animation: moveToRightFade .7s ease both;
}

.pt-page-moveFromRightFade {
	-webkit-animation: moveFromRightFade .7s ease both;
	-moz-animation: moveFromRightFade .7s ease both;
	animation: moveFromRightFade .7s ease both;
}
/********************************* keyframes **************************************/
@-webkit-keyframes moveToLeftFade {
	to { opacity: 0.3; -webkit-transform: translateX(-100%); }
}
@-moz-keyframes moveToLeftFade {
	to { opacity: 0.3; -moz-transform: translateX(-100%); }
}
@keyframes moveToLeftFade {
	to { opacity: 0.3; transform: translateX(-100%); }
}

@-webkit-keyframes moveFromLeftFadeIn {
	from { opacity: 1.0; -webkit-transform: translateX(-100%); }
}
@-moz-keyframes moveFromLeftFadeIn {
	from { opacity: 1.0; -moz-transform: translateX(-100%); }
}
@-webkit-keyframes moveFromLeftFade {
	from { opacity: 0.3; -webkit-transform: translateX(-100%); }
}
@-moz-keyframes moveFromLeftFade {
	from { opacity: 0.3; -moz-transform: translateX(-100%); }
}
@keyframes moveFromLeftFade {
	from { opacity: 0.3; transform: translateX(-100%); }
}

@-webkit-keyframes moveToRightFade {
	to { opacity: 0.3; -webkit-transform: translateX(100%); }
}
@-moz-keyframes moveToRightFade {
	to { opacity: 0.3; -moz-transform: translateX(100%); }
}
@keyframes moveToRightFade {
	to { opacity: 0.3; transform: translateX(100%); }
}
@-webkit-keyframes moveFromRightFade {
	from { opacity: 0.3; -webkit-transform: translateX(100%); }
}
@-moz-keyframes moveFromRightFade {
	from { opacity: 0.3; -moz-transform: translateX(100%); }
}
@keyframes moveFromRightFade {
	from { opacity: 0.3; transform: translateX(100%); }
}


#facebookConnectButton {width:auto;float:right;overflow:hidden;background-color:rgb(59, 89, 152);border-radius:3px;padding-right:9px;position:relative;}
#facebookConnectButton a {cursor:pointer;display:inline-block;font-size:13px;float:right;text-decoration:none;height:20px;margin-top:2px;padding-top:4px;border-left:1px solid rgb(77, 102, 158);}
#loginArea #facebookConnectButton a {padding-left:22px;}
img#fbLogin {padding:2px;position:absolute;left:0;top:0;}
.nike-button {background-color:#e86a16;border-radius:3px;width:auto;padding-left:5px;display:inline-block;overflow:hidden;position:relative;vertical-align:top;}
.nike-button span {cursor:pointer; color:#fff;font-weight:bold;font-size:10px;line-height:27px;height:24px;text-decoration:none;padding:4px 6px;margin-left:24px;}
img#nikePlus {padding:10px 8px 10px 8px;position:absolute;left:0;top:0;}

/* Common style */
.button2{
	padding:5px 15px 5px 15px;background-color:#838383;color:#ffffff;text-transform:uppercase;font-weight:bold;border:2px solid #888;	
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);	
	border-radius: 15px;	
	background: gradient(linear, 0% 0%, 0% 100%, from(rgb(125, 125, 125)), to(rgb(90,90,90)));	
	text-align:center;
	font-size:30px;  	
}

.ajax .spinner{background:url(../images/ajax-loader2-30x30.gif) repeat-x scroll 0 0;height:31px;width:31px;float:right;margin:2px 2px;}    
div.button.ajax{text-align:left;}
.ajax:hover .spinner{background:url(../images/ajax-loader2-over-30x30.gif) repeat-x scroll 0 0;height:31px;width:31px;float:right;margin:2px 2px;}    

.button.green.ajax .spinner{background:url("../images/ajax-loader2-green-30x30.gif") repeat-x scroll 0 0;height:30px;width:30px;float:right;margin:2px 2px;}    
.green.ajax:hover .spinner{background:url("../images/ajax-loader2-green-over-30x30.gif") repeat-x scroll 0 0;height:30px;width:30px;float:right;margin:2px 2px;}    

.button.green.medium.ajax .spinner{background:url("../images/ajax-loader2-green-18x18.gif") repeat-x scroll 0 0;height:18px;width:18px;float:right;margin:3px 4px;}    
.button.green.medium.ajax:hover .spinner{background:url("../images/ajax-loader2-green-over-18x18.gif") repeat-x scroll 0 0;height:18px;width:18px;float:right;margin:3px 4px;}    

.button.green.small.ajax .spinner{background:url("../images/ajax-loader2-green-18x18.gif") repeat-x scroll 0 0;height:18px;width:18px;float:right;margin:0px 0px;}    
/* removed corresponding hover state for now */   

.button.green.smaller.ajax .spinner{background:url("../images/ajax-loader2-green-15x15.gif") repeat-x scroll 0 0;height:15px;width:15px;float:right;margin:0px 0px;}    
.button.green.smaller.ajax:hover .spinner{background:url("../images/ajax-loader2-green-over-15x15.gif") repeat-x scroll 0 0;height:15px;width:15px;float:right;margin:0px 0px;}

.button:active{opacity:0.85;}

.button, .button:visited{
	padding:5px 15px 5px 15px;
	background-color:#838383;color:#ffffff;text-transform:uppercase;font-weight:bold;
	text-align:center;
	font-size:30px; 
	background-color:#222;
	background-position:0 -216px;
	background-repeat:repeat-x;
	display: inline-block; 	
	color: #fff; 
	text-decoration: none;
	border-radius: 5px; 				
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid #333;	
	border-right: 1px solid #333;	
	position: relative;
	cursor: pointer;	
}
.button.light-background{
	box-shadow: none;
	border:0px solid #888;
}

.button:hover{ background-color: #444; color: #fff; }


.button.smallest {font-size:12px;padding:0px;font-weight:normal;text-transform:none;}
.button.smallish {font-size:13px;padding:1px 3px 1px 3px;}
.button.smaller2 {font-size:11px;line-height:12px;}
.button.smaller {font-size:13px;line-height:15px;}
.button.small {font-size:14px;line-height:18px;}
.button.medium {font-size:20px;}
.button.large {font-size:30px;}

.button.red {background-color:#a61717;}
.button.red:hover {background-color:#d91e1e;}
.button.green{background-color:#159923;} /* could be changed to #58B231 */
.button.green:hover{background-color:#42A02C;} 
.button.blue{background-color:#1E5497;}
.button.blue:hover{background-color:#2465B3;}
.button.orange{background-color:#cc4b06;}
.button.orange:hover{background-color:#f25a07;}
.button.white{background-color:#ccc;color:#333;}

.button.flat { background-image: none; box-shadow:0 1px 1px rgba(0,0,0,0.4);border:none;}
.button.ios i, .button.android i, .button.windows-phone i{background-image:url("../images/phone-os-icons-white.png");display:inline-block;}
.button.ios i { height: 23px; width: 15px; background-position: 0 7px; margin:-10px 5px 0px -9px}
.button.android i { height: 18px; width: 14px; background-position: -14px 3px; margin:-5px 4px 0px -9px}
.button.windows-phone i { height: 24px; width: 15px; background-position: -30px 10px; margin:-20px 5px 0px -7px;}
.button.ios { background-color: rgb(0,122,255); }
.button.ios:hover { background-color: rgb(15,135,254); }
.button.android { background-color: #78C257; }
.button.android:hover { background-color: #88D267; }
.button.windows-phone{ background-color: #00ADEF; }
.button.windows-phone:hover{ background-color: #11BDFF; }
.button.none { margin-right: 32px; }

.button.icon {height:18px;margin-top:0px;overflow:hidden;padding-left:8px;padding-top:3px;}
.button.icon div{height:20px;font-size:14px;background-repeat:no-repeat;padding-top:2px;text-align:left;}
.button.icon .friend{padding-left:30px;background-image:url("../images/add-friend-clear-21x20.png");}
.button.icon .facebook{padding-left:20px;background-image:url("../images/facebook-f-9x20.png");}
.button.icon .gears{padding-left:25px;background-image:url("../images/icon-gears-18x20.png");}
.button.icon .runner{padding-left:25px;background-image:url("../images/icon-runner-15x20.png");}
.button.icon .mobile{padding-left:25px;background-position:-146px -149px;}
.button.icon .runner-small { background-position: -91px -151px; position: absolute; width: 16px; height: 17px; left: 5px; top: 3px; }


.button.inactive{background-color:#555;color:#888;cursor:default;}
.button.inactive:hover{background-color:#444;color:#777;}

.button.highlight{color:#e7bf41}

.button.golden{margin:0px 61.8% 0px 38.2%;width:38.2%;} /*golden ratio*/
.button.center{-webkit-transform: translateX(-50%);transform: translateX(-50%);left:50%;display:inline-block;position:relative;} /*center*/
.button2:hover {color:#ffcc00;cursor:pointer;border:2px solid #999;}
.button2:active {border-bottom:4px solid #999;padding-bottom:3px;}

.button-loader{margin:30px auto 0px;background:url('../images/activity-loader-2.gif');height:15px;width:128px;} /*black background */

/* new buttons (future state of Smashrun) */
.button-new {color:#ddd;text-align:center;cursor:pointer;}
.button-new.standard{font-size:17px;padding:9px;min-width:160px;}
.button-new.blue{background-color:#1E5497;}
.button-new.blue:hover{background-color:#4471A9;}
.button-new.next:after {
	content: "";
	position: absolute;
	height: 0;
	width: 0;
	line-height: 0;
	font-size: 0;
	float:left;
	margin-left:8px;
	margin-top:2px;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 14px solid #333;
	opacity:0.3
}

/* conversion pages */
#conversions .button.green.medium.ajax .spinner,
#conversions .button.green.small.ajax .spinner,
#conversions #tosContinue.button.green.medium.ajax .spinner {background:url("../images/ajax-loader-new.gif") repeat-x scroll 0 0;height:15px;width:15px;float:right;margin:1px 0 0 0;}

#conversions .button.green.medium.ajax:hover .spinner,
#conversions .button.green.medium.ajax:hover .spinner,
#conversions #tosContinue.button.green.medium.ajax:hover .spinner {background:url("../images/ajax-loader-new-over.gif") repeat-x scroll 0 0;height:15px;width:15px;float:right;margin:1px 0 0 0;}
/*
 * jQuery UI CSS Framework @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*
 * jQuery UI CSS Framework @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 *
 * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Segoe%20UI,%20Arial,%20sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=6px&bgColorHeader=333333&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=25&borderColorHeader=333333&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=000000&bgTextureContent=05_inset_soft.png&bgImgOpacityContent=25&borderColorContent=666666&fcContent=ffffff&iconColorContent=cccccc&bgColorDefault=555555&bgTextureDefault=02_glass.png&bgImgOpacityDefault=20&borderColorDefault=666666&fcDefault=eeeeee&iconColorDefault=cccccc&bgColorHover=ff9900&bgTextureHover=02_glass.png&bgImgOpacityHover=40&borderColorHover=ff9900&fcHover=000000&iconColorHover=ffffff&bgColorActive=f58400&bgTextureActive=05_inset_soft.png&bgImgOpacityActive=30&borderColorActive=ffaf0f&fcActive=ffffff&iconColorActive=222222&bgColorHighlight=eeeeee&bgTextureHighlight=03_highlight_soft.png&bgImgOpacityHighlight=80&borderColorHighlight=cccccc&fcHighlight=2e7db2&iconColorHighlight=4b8e0b&bgColorError=ffc73d&bgTextureError=02_glass.png&bgImgOpacityError=40&borderColorError=ffb73d&fcError=111111&iconColorError=a83300&bgColorOverlay=5c5c5c&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=50&opacityOverlay=80&bgColorShadow=cccccc&bgTextureShadow=01_flat.png&bgImgOpacityShadow=30&opacityShadow=60&thicknessShadow=7px&offsetTopShadow=-7px&offsetLeftShadow=-7px&cornerRadiusShadow=8px
 */


/* Component containers
----------------------------------*/
.ui-widget { font-family: Segoe UI, Arial, sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Segoe UI, Arial, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #666666; background: #000000; color: #ffffff; }
.ui-widget-content a { color: #ffffff; }
.ui-widget-header { border: 1px solid #333333; background: #333333; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }

/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #666666; background: #555555; font-weight: bold; color: #eeeeee; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #eeeeee; text-decoration: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #ff9900; background: #ff9900; font-weight: bold; color: #000000; }
.ui-state-hover a, .ui-state-hover a:hover { color: #000000; text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #ffaf0f; background-color: #f58400; font-weight: bold; color: #ffffff; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #ffffff; text-decoration: none; }
.ui-widget :active { outline: none; }

/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #cccccc; background: #eeeeee; color: #2e7db2; }
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #2e7db2; }
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #ffb73d; background: #ffc73d; color: #111111; }
.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #111111; }
.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #111111; }
.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }

/* Icons
----------------------------------*/

/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(../images/jquery-ui/ui-icons_cccccc_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(../images/jquery-ui/ui-icons_cccccc_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(../images/jquery-ui/ui-icons_ffffff_256x240.png); }
.ui-state-default .ui-icon { background-image: url(../images/jquery-ui/ui-icons_cccccc_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(../images/jquery-ui/ui-icons_ffffff_256x240.png); }
.ui-state-active .ui-icon {background-image: url(../images/jquery-ui/ui-icons_222222_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(../images/jquery-ui/ui-icons_4b8e0b_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(../images/jquery-ui/ui-icons_a83300_256x240.png); }

/* positioning */
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -64px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-off { background-position: -96px -144px; }
.ui-icon-radio-on { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }


/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-tl { -moz-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; }
.ui-corner-tr { -moz-border-radius-topright: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; }
.ui-corner-bl { -moz-border-radius-bottomleft: 6px; -webkit-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; }
.ui-corner-br { -moz-border-radius-bottomright: 6px; -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; }
.ui-corner-top { -moz-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; -moz-border-radius-topright: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; }
.ui-corner-bottom { -moz-border-radius-bottomleft: 6px; -webkit-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; -moz-border-radius-bottomright: 6px; -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; }
.ui-corner-right {  -moz-border-radius-topright: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; -moz-border-radius-bottomright: 6px; -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; }
.ui-corner-left { -moz-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; -moz-border-radius-bottomleft: 6px; -webkit-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; }
.ui-corner-all { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; }

/* Overlays */
.ui-widget-overlay { background: #5c5c5c; opacity: .80;filter:Alpha(Opacity=80); }
.ui-widget-shadow { margin: -7px 0 0 -7px; padding: 7px; background: #cccccc; opacity: .60;filter:Alpha(Opacity=60); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }/*
 * jQuery UI Autocomplete @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Autocomplete#theming
 */
.ui-autocomplete { position: absolute; cursor: default; }	

/* workarounds */
* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */

/*
 * jQuery UI Menu @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Menu#theming
 */
.ui-menu {
	list-style:none;
	padding: 2px;
	margin: 0;
	display:block;
	float: left;
}
.ui-menu .ui-menu {
	margin-top: -3px;
}
.ui-menu .ui-menu-item {
	margin:0;
	padding: 0;
	zoom: 1;
	float: left;
	clear: left;
	width: 100%;
}
.ui-menu .ui-menu-item a {
	text-decoration:none;
	display:block;
	padding:.2em .4em;
	line-height:1.5;
	zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
	font-weight: normal;
	margin: -1px;
}
/*
 * jQuery UI Datepicker @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Datepicker#theming
 */
.ui-datepicker { width: 17em; padding: .2em .2em 0; }
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
.ui-datepicker .ui-datepicker-prev { left:2px; }
.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
.ui-datepicker td { border: 0; padding: 1px; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi { width:auto; }
.ui-datepicker-multi .ui-datepicker-group { float:left; }
.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
.ui-datepicker-row-break { clear:both; width:100%; }

/* RTL support */
.ui-datepicker-rtl { direction: rtl; }
.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
.ui-datepicker-rtl .ui-datepicker-group { float:right; }
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }

/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover {
	display: none; /*sorry for IE5*/
	display/**/: block; /*sorry for IE5*/
	position: absolute; /*must have*/
	z-index: -1; /*must have*/
	filter: mask(); /*must have*/
	top: -4px; /*must have*/
	left: -4px; /*must have*/
	width: 200px; /*must have*/
	height: 200px; /*must have*/
}
/* iPad portrait CSS */
@media  all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
    .footer-bg{height:0;}
    body{background-image:none;}
    #footer{margin-bottom:0;}
    #footer .content-2{border-radius:none;}
    #main .bg-shadow-left, #main .bg-shadow-right{display:none;}
    #mastHead{border-radius:none;margin-top:1px;}
}
.small.badge, .small-medal-image.bronze, .small-medal-image.silver, .small-medal-image.gold{background-image:url('../images/sprites/28pxbadges-sprite313x530v6.png');} /*28px badge sprite incl. series 1, series 2, pro series and medals */
.small.badge{height:28px;width:28px;}
.small-medal-image{height:18px;width:18px;}

/* 28px badge images - small badges - user quickView */
.small.badge-001{background-position:-5px -3px;}                  /*   Early Bird                                    */
.small.badge-002{background-position:-36px -3px;}                 /*   Night Owl                                     */
.small.badge-003{background-position:-67px -3px;}                  /*   Lunch Hour                                    */
.small.badge-004{background-position:-98px -3px;}                  /*   Popular                                       */
.small.badge-005{background-position:-129px -3px;}                /*   OCD                                           */
.small.badge-006{background-position:-5px -34px;}                 /*   One Mile                                      */
.small.badge-007{background-position:-36px -33px;}                /*   Marathoner                                    */
.small.badge-008{background-position:-67px -33px;}                /*   Ultra-Marathoner                              */
.small.badge-009{background-position:-99px -34px;}                /*   Half Marathoner                               */
.small.badge-010{background-position:-130px -34px;}               /*   10ker                                         */
.small.badge-011{background-position:-5px -63px;}                 /*   Beat A 9yr Old                                */
.small.badge-012{background-position:-36px -63px;}                /*   Pounded Palin                                 */
.small.badge-013{background-position:-67px -63px;}                /*   Past Diddy                                    */
.small.badge-014{background-position:-99px -64px;}                /*   Under Oprah                                   */
.small.badge-015{background-position:-130px -64px;}               /*   Cleared Kate                                  */
.small.badge-016{background-position:-5px -93px;}                 /*   5 For 5                                       */
.small.badge-017{background-position:-36px -93px;}                 /*   10 For 10                                     */
.small.badge-018{background-position:-68px -93px;}                /*   20 For 20                                     */
.small.badge-019{background-position:-99px -93px;}                /*   50 For 50                                     */
.small.badge-020{background-position:-129px -93px;}               /*   Perfect 100                                   */
.small.badge-021{background-position:-5px -126px;}                /*   10 Under Your Belt                            */
.small.badge-022{background-position:-36px -126px;}               /*   20 Under Your Belt                            */
.small.badge-023{background-position:-67px -126px;}               /*   50 Under Your Belt                            */
.small.badge-024{background-position:-98px -126px;}               /*   A Century Down                                */
.small.badge-025{background-position:-129px -126px;}              /*   Monster 500                                   */
.small.badge-026{background-position:-5px -157px;}                /*   Solid Week                                    */
.small.badge-027{background-position:-36px -158px;}               /*   Rocked The Week                               */
.small.badge-028{background-position:-67px -158px;}               /*   Solid Month                                   */
.small.badge-029{background-position:-98px -158px;}              /*   Rocked The Month                              */
.small.badge-030{background-position:-129px -158px;}             /*   Run Nut Month                                 */
.small.badge-031{background-position:-5px -188px;}                /*   Veteran                                       */
.small.badge-032{background-position:-36px -188px;}                /*   Guinea Pig                                    */
.small.badge-033{background-position:-67px -188px;}               /*   5ker                                          */
.small.badge-034{background-position:-98px -188px;}               /*   Birthday Run                                  */
.small.badge-035{background-position:-130px -188px;}              /*   Corleone Badge                                */
.small.badge-036{background-position:-5px -220px;}                 /*   Brought A Buddy                               */
.small.badge-037{background-position:-36px -220px;}               /*   Got Friends                                   */
.small.badge-038{background-position:-68px -220px;}               /*   Social Seven                                  */
.small.badge-039{background-position:-99px -220px;}              /*   Shares Well                                   */
.small.badge-040{background-position:-130px -220px;}              /*   Pack Leader                                   */
.small.badge-101{background-position:-5px -250px;}               /*   NYC-Philly                                    */
.small.badge-102{background-position:-36px -251px;}               /*   London-Paris                                  */
.small.badge-103{background-position:-68px -251px;}               /*   Sydney-Melbourne                              */
.small.badge-104{background-position:-99px -251px;}              /*   NYC-Chicago                                   */
.small.badge-105{background-position:-130px -251px;}              /*   Miami-Toronto                                 */
.small.badge-106{background-position:-5px -282px;}               /*   Chariots Of Fire                              */
.small.badge-107{background-position:-36px -282px;}               /*   Went To Work                                  */
.small.badge-108{background-position:-68px -282px;}               /*   That's A Day                                  */
.small.badge-109{background-position:-99px -282px;}               /*   Week Not Weak                                 */
.small.badge-110{background-position:-130px -282px;}              /*   Outlast The Alamo                             */
.small.badge-111{background-position:-5px -314px;}               /*   Chill Runner                                  */
.small.badge-112{background-position:-36px -314px;}              /*   Easy Runner                                   */
.small.badge-113{background-position:-68px -314px;}              /*   Roadrunner                                    */
.small.badge-114{background-position:-99px -314px;}              /*   Mercury                                       */
.small.badge-115{background-position:-130px -314px;}             /*   Fast & Slow                                   */
.small.badge-126{background-position:-5px -346px;}              /*   Stairs                                         */
.small.badge-127{background-position:-36px -346px;}             /*   Steep Stairs                                   */
.small.badge-128{background-position:-68px -346px;}             /*   Long Stairs                                    */
.small.badge-129{background-position:-99px -346px;}             /*   Long/Steep Stairs                              */
.small.badge-130{background-position:-130px -346px;}            /*   Towering Stairs                               */
.small.badge-131{background-position:-5px -376px;}              /*   In It For January                              */
.small.badge-132{background-position:-36px -376px;}             /*   In It For February                             */
.small.badge-133{background-position:-68px -376px;}             /*   In It For March                               */
.small.badge-134{background-position:-99px -376px;}             /*   In It For April                               */
.small.badge-135{background-position:-130px -376px;}            /*   In It For May                                 */
.small.badge-136{background-position:-5px -407px;}              /*   In It For June                                */
.small.badge-137{background-position:-36px -406px;}             /*   In It For July                                */
.small.badge-138{background-position:-68px -406px;}             /*   In It For August                              */
.small.badge-139{background-position:-99px -406px;}             /*   In It For September                           */
.small.badge-140{background-position:-130px -406px;}           /*   In It For October                             */
.small.badge-141{background-position:-5px -437px;}             /*   In It For November                            */
.small.badge-142{background-position:-36px -436px;}             /*   In It For December                            */
.small.badge-143{background-position:-68px -436px;}             /*   Color Picker                                  */
.small.badge-144{background-position:-99px -436px;}             /*   365 Days                                      */
.small.badge-145{background-position:-130px -436px;}            /*   365 Of 730                                    */
.small.badge-146{background-position:-5px -468px;}             /*   365 Of 365                                    */
.small.badge-147{background-position:-36px -468px;}            /*   A Year In Running                             */
.small.badge-148{background-position:-68px -468px;}            /*   Leap Year Sweep                               */
.small.badge-149{background-position:-37px -499px;}                 /*   Lifetime Badge                               */
.small.badge-150{background-position:-4px -499px;}                  /*   Translator Badge                             */
.small.badge-246{background-position:-67px -468px;}                 /*   366 In 2020 Badge                           */
.small.badge-247{background-position:-68px -499px;}                 /*   Annus Horribilis Badge                       */
.small.badge-248{background-position:-98px -498px;width:29px;}      /*   All Bronze Badges                            */
.small.badge-249{background-position:-131px -498px;width:30px;}     /*   All Silver Badges                            */
.small.badge-250{background-position:-165px -498px;}                /*   All Gold Badges                              */
.small.badge-251{background-position:-163px -468px;}                /*   Beat Joe Strummer's Time (Replacing Puffy) */


.small.badge-201{background-position:-163px -3px;}             /*   U.S. Of R.                                    */
.small.badge-202{background-position:-192px -3px;}             /*   International                                 */
.small.badge-203{background-position:-250px -3px;}             /*   Top And Bottom                                */
.small.badge-204{background-position:-221px -3px;}             /*   4 Corners                                     */
.small.badge-205{background-position:-279px -3px;}             /*   International Super Runner                    */
.small.badge-206{background-position:-161px -34px;}            /*   Special Agent                                 */
.small.badge-207{background-position:-191px -34px;}            /*   The Gauntlet                                  */
.small.badge-208{background-position:-220px -34px;}            /*   Foreign Legion                                */
.small.badge-209{background-position:-250px -34px;}            /*   Super Agent                                   */
.small.badge-210{background-position:-280px -34px;}            /*   Army Ranger                                   */
.small.badge-211{background-position:-161px -64px;}            /*   Strong Start                                  */
.small.badge-212{background-position:-191px -64px;}            /*   Strong Finish                                 */
.small.badge-213{background-position:-221px -64px;}            /*   Strong Middle                                 */
.small.badge-214{background-position:-250px -64px;}            /*   Strong Ends                                   */
.small.badge-215{background-position:-280px -64px;}            /*   Strongest Finish                              */
.small.badge-216{background-position:-161px -93px;}            /*   Sunriser                                      */
.small.badge-217{background-position:-191px -93px;}            /*   Full Moon Runner                              */
.small.badge-218{background-position:-221px -93px;}            /*   Sunsetter                                     */
.small.badge-219{background-position:-251px -93px;}            /*   Longest Day                                   */
.small.badge-220{background-position:-280px -93px;}            /*   Shortest Day                                  */
.small.badge-221{background-position:-161px -126px;}           /*   Four Further                                  */
.small.badge-222{background-position:-191px -126px;}           /*   Six Further                                   */
.small.badge-223{background-position:-221px -126px;}           /*   Four Far Further                              */
.small.badge-224{background-position:-251px -126px;}           /*   Six Far Further                               */
.small.badge-225{background-position:-280px -126px;}           /*   Further To Farther                            */
.small.badge-226{background-position:-161px -157px;}           /*   Short And Steady                              */
.small.badge-227{background-position:-191px -157px;}           /*   Long And Steady                               */
.small.badge-228{background-position:-221px -157px;}           /*   Short And Solid                               */
.small.badge-229{background-position:-251px -157px;}           /*   Long And Solid                                */
.small.badge-230{background-position:-280px -157px;}           /*   Long And Rock Solid                           */
.small.badge-231{background-position:-161px -187px;}           /*   Two By 33                                     */
.small.badge-232{background-position:-191px -187px;}           /*   Two By 99                                     */
.small.badge-233{background-position:-221px -187px;}           /*   Two By 33 By 10k                              */
.small.badge-234{background-position:-251px -187px;}           /*   Two By 99 By 5k                               */
.small.badge-235{background-position:-280px -187px;}           /*   Two By 365 By 10k                             */
.small.badge-236{background-position:-161px -220px;}           /*   Top Of Table                                  */
.small.badge-237{background-position:-191px -220px;}           /*   Climbed Half Dome                             */
.small.badge-238{background-position:-221px -220px;}           /*   Reached Fitz Roy                              */
.small.badge-239{background-position:-251px -220px;}           /*   Matterhorn Master                             */
.small.badge-240{background-position:-280px -220px;}           /*   Conquered Everest                             */
.small.badge-241{background-position:-161px -251px;}           /*   Towered Pisa                                  */
.small.badge-242{background-position:-191px -251px;}           /*   Top Of Washington                             */
.small.badge-243{background-position:-221px -251px;}           /*   Over The Eiffel                               */
.small.badge-244{background-position:-250px -251px;}           /*   Above The Burj                                */
.small.badge-245{background-position:-280px -251px;}           /*   To Pike's Peak                                */
/* Phone (not tablet) style*/
body.mobile #main { margin: 0px; }
body.phone .phone-hide{ display: none !important; }
body.phone { overflow-y: auto; }

body.phone #mastHead { display:none; }
/* body.phone .report-container {height:calc(100vh - 385px); overflow-y:scroll; overflow-x:hidden; } */
body.phone #mainContentArea { min-height: 100vh; }
body.phone #footer { display: none; }

#navArea .hamburger { display: none; }
body.phone #navArea .hamburger { display: block; }

body.phone #navArea .hamburger { position: absolute; top:20px; right:30px; width: 90px; height: 110px; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; -moz-user-select:none; cursor:pointer;}
body.phone #navArea .hamburger          div { display:inline-block;width: 100%; border-radius: 1em; height: 10%; margin-bottom:10px;background-color: #fff; transform-origin: top right; -webkit-transform-origin:top right;}
body.phone #navArea .hamburger.selected div { width: 73px; }
body.phone #navArea .hamburger.selected div:nth-child(1) { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin-right:10px;}
body.phone #navArea .hamburger.selected div:nth-child(2){ opacity:0; }
body.phone #navArea .hamburger.selected div:nth-child(3) { transform: rotate(45deg); -webkit-transform: rotate(45deg); margin-left:10px;}

body.phone .hamburger-menu { position: absolute; top: 115px; width: 100%; min-height: 100vh; background-color:#2a2a2a}
body.phone .hamburger-menu .center-container { background-color: #333; }
body.phone .hamburger-menu li{ list-style:none; font-size: 50px; background-color:#333; color: #e1e1e1; border-bottom: 2px solid #666; padding:50px 0px;text-align:center;text-transform:uppercase;cursor:pointer;}

body.phone #proAnalyze { font-size: 30px; line-height: 1.1em; margin-top:20px;margin-bottom:20px;}

body.phone .mobile-friends-container { position: absolute; top: 120px; left: 0px; width: 966px; min-height:100vh; z-index:10; background-color:#111;}
body.phone .mobile-friends-container ul { background-color: #111; }
body.phone .mobile-friends-container li { width: 100%; color:#bbb; background-color: #444444; position:relative;border-right:80px solid;box-sizing:border-box;margin:1px 0px 1px 0px;}
body.phone .mobile-friends-container li.is-you { background-color: #4c5763;}
body.phone .mobile-friends-container .is-this-week { background-color: #333;}
body.phone .mobile-friends-container div.name {  top:27px; left:240px;position:absolute; font-size:45px;  color:#fafafa; }
body.phone .mobile-friends-container div.distance {top:80px; left:240px;font-size:45px; position:absolute;  }
body.phone .mobile-friends-container div.distance span.value { color: #fafafa; }
body.phone .mobile-friends-container div.distance span.label { }
body.phone .mobile-friends-container div.distance span.unit { font-size:0.6em; }
body.phone .mobile-friends-container div.last-run {top:133px; left:240px; font-size:45px; position:absolute; }
body.phone .mobile-friends-container div.distance-difference { top:75px; right:50px; font-size:55px; position:absolute; width:280px;  text-align:right; color:#888;}
body.phone .mobile-friends-container div.distance-difference .unit { font-size: 60px; }

/* Mobile CSS for Social + Notifications button + Analyze + Share */
@media (orientation: landscape) {
    body.phone div.mobile-buttons { display: none; }
}
body.phone .mobile-buttons {position:fixed;bottom:0;z-index:5;display:flex;justify-content:space-evenly;background-color:#2a2a2a;width:100%;padding:0.5em;}
body.phone .mobile-buttons .mobile span {text-transform:uppercase;line-height:1.5;text-align:center;color:#d9d9d9;letter-spacing:0.08em;}
body.phone .mobile-buttons > div {font-size:2em;cursor:pointer;background-image: none;z-index: 9;}
body.phone .mobile-buttons .social.panel {left: 0;}
body.phone .mobile-buttons .social.notification { right: 0; }
body.phone .mobile-buttons .social img, body.phone .mobile-buttons .analyze.mobile img, body.phone .mobile-buttons .share.mobile img {max-height:2.5em;width:auto;margin:0.5em auto;}
body.phone .mobile-buttons .social.notification .notification-count {position: absolute;top: 0.5em;right: 10em;background-color: #777;padding: 0.20em;border-radius: 1em;line-height: 1;font-size: 1.25em;}

body.phone .mobile-buttons .view {left: 0;}
body.phone .mobile-buttons .my-runs { right: 0; }

body.phone .mobile-buttons .login,
body.phone .mobile-buttons .signup,
body.phone .mobile-buttons .view,
body.phone .mobile-buttons .my-runs {margin-top: 25px;color: #efefef;letter-spacing: 0.03em;font-weight: bold;padding: 15px 0 35px 0;}

body.phone .mobile-buttons .view, body.phone .mobile-buttons .my-runs {text-align: center;}
body.phone .mobile-buttons .my-runs {color: #ffee00;}
body.phone .mobile-buttons > div.login, body.phone .mobile-buttons > div.signup {font-size:2.5em;}

body.phone .mobile-buttons .login {left: 0;}
body.phone .mobile-buttons .signup { right: 0; color: #ffee00}


.fullscreen-chart-container { width: 100%; height: 100%; position:fixed; top: 0px; left:0px; z-index:99; background-color:#111;}
.fullscreen-chart-container .axis.hide-line path { fill: none; stroke: none; }
.fullscreen-chart-container .axis path, 
.fullscreen-chart-container .axis line { fill: none; stroke: #2a2a2a; shape-rendering: crispEdges; stroke-width: 0.2em;}
.fullscreen-chart-container .x.axis text {stroke:none;fill:#555;font-size:2em;text-transform:none;}
.fullscreen-chart-container .x.axis .label-1 {font-size:1em;} 
.fullscreen-chart-container .x.axis .label-2 {font-size:0.85em;}
.fullscreen-chart-container .y.axis path {stroke:#2a2a2a;stroke-width: 0.2em;shape-rendering: crispEdges;}
.fullscreen-chart-container .y.axis text {stroke:none;fill:#555;font-size:2em;text-transform:none;}
.fullscreen-chart-container .plumb-line { stroke-width: 0.5em; stroke: #aaa; opacity: 0.8; pointer-events:none; }
.fullscreen-chart-container .close-button { position:absolute;right:5%;top:5%; color : #fafafa; font-size: 3.25em; font-weight: bold; cursor:pointer;}
.fullscreen-chart-container h3 { color: #aaa; font-size: 2.5em; margin:15px 30px;}
.fullscreen-chart-container path { fill: none; }

/* tooltips */
.report-container .fyi{height: 17px;width: 17px;background: url('../images/sprites/settings-sprites60x35.png') repeat-x scroll -30px -16px;opacity:0.5;
                       float:right; margin-right:25px;}
.info-carousel {background: url('../images/info-13.png'); width: 13px; height: 13px; display: inline-block; cursor: pointer;}

#mainContentArea .report-container{padding:25px 25px 50px 25px;}
#mainContentArea  #missingUser{padding:25px 25px 50px 25px;}

/* welcome to Smashrun quick tour */
#newUserOnboardingInfo {display:inline-block;cursor:pointer;background:none;font-size:12px;padding:3px 6px;color:#ddd;border:2px solid #ddd;text-align:center;border-radius:5px;height:auto;font-weight:bold;text-transform:uppercase;}
#newUserOnboardingInfo:hover {color: #ffbb33;border:2px solid #ffbb33;}

.overview   .nav-item-overview a{background-color:#4b4b4b;}
.last-run   .nav-item-by-run a{background-color:#4b4b4b;}
.run-list   .nav-item-list a{background-color:#4b4b4b;}
.run-ranks  .nav-item-ranks a{background-color:#4b4b4b;}
.badges     .nav-item-badges a{background-color:#4b4b4b;}
.signup     .nav-item-signuip a{background-color:#4b4b4b;}
.invite     .nav-item-invite a{background-color:#4b4b4b;}

/* note show only runs which are eligible for badges */
.badge-view{position:relative;left:420px;top:-5px;width:250px;}
.badge-view a{font-weight:normal;text-decoration:none;font-size:14px;}
.badge-view a:hover{text-decoration:underline;}
.badge-view span{color:#ff6600;font-size:14px;}
.badge-view .button{width:90px;height:15px;margin-left:5px;}
.badge-view.hide {top:0;width:240px;}

/*Report header*/
.run-report h1 { font-size:1.8em; margin-top:5px;}

/* generic pointer events trap*/
.focus-overlay { fill: none; pointer-events: all;}


/*Explains and labels data content */
.run-report .label{color:#bbb;font-size:14px;display:inline;text-transform:lowercase;white-space:nowrap;margin-left:7px;}
.run-report .label.small{font-size:12px;margin-left:5px;}
.run-report .label.next-line{display:block;margin-left:0px;}
.run-report .label.next-line div:first-child{margin-top:5px;}
.run-report .label.next-line div{line-height:17px;}
.run-report .label.top-right{right:5px;top:5px;position:absolute;}

.run-report .supporting-data{font-size:14px;line-height:normal;white-space:nowrap;color:#aaa;text-transform:none;}
.run-report .supporting-data.next-line{display:block;}
.run-report .supporting-data.next-line div:first-child{margin-top:5px;}
.run-report .supporting-data.next-line div{line-height:17px;}
.run-report .supporting-data.top-right{right:8px;top:8px;position:absolute;}

/*label for the axis of the chart*/
.run-report .chart-axis-label{color:#444;font-size:12px;line-height:12px;text-transform:none;}
.run-report .chart-axis-label.yAxis{position:absolute;right:-20px;top:120px;}
.run-report .chart-axis-label.xAxis{display:block;text-align:center;width:100%;}


/* structure */
.run-report {padding:4px 10px 10px 10px;}
.data {padding-top:8px;border-top:2px solid #292929;position:relative;}
.full .data, .left .data,.right .data, .col1 .data, .col2 .data, .col3 .data{
	display:block;line-height:0.9em;text-transform:uppercase;
}
.run-report .col1.col2{width:665px} /* spanning column 1 and column 2*/
.run-report .col1{float:left;width:320px;margin-right:24px;position:relative;}
.run-report .col2{float:left;width:320px;position:relative;}
.run-report .col3{float:right;width:199px;position:relative;}
.run-report .col1 .col{float:left;width:159px;overflow:hidden;}
.run-report .col2 .col{float:left;width:159px;overflow:hidden;}

.run-report .col1.col2 .data{width:665px;} 
.run-report .col1 .data{width:inherit;}
.run-report .col2 .data{width:inherit;}
.run-report .col3 .data{width:inherit;}

.run-report .single-height{font-size:60px;height:55px;}
.run-report .double-height{font-size:168px;height:180px;}
.expanded .run-report .double-height { font-size: 168px; height: 210px; }

.run-report .main-supporting { display:flex; justify-content:space-between; align-items:baseline;}
.run-report .main-supporting > div { width: 155px; }
.run-report .main-supporting .supporting { font-size:0.45em;padding-right:4px;}

/* data block with labels flush left */
.run-report .data.label-left{padding:0px;}
.run-report .data.label-left dl{clear:both;border-bottom:1px solid #333;position:relative;}
.run-report .data.label-left dl dt{display:inline-block;width:25%;vertical-align:top;font-size:15px;line-height:1.15em;padding-top:17px;color:#666;cursor:default;text-transform:capitalize;}
.run-report .data.label-left dl dd{display:inline-block;width:65%;padding:10px 0px 10px 15px;font-size:45px;line-height:normal;overflow:hidden;cursor:default;}
.run-report .data.label-left dl dd .label{font-size:12px;line-height:normal;}
.run-report .data.label-left dl.longest-streak{border-bottom: none; }
.run-report .data.label-left dl .injured { position:absolute; right:0px; bottom:11px; font-size:14px; color:#000; font-style:italic; background-color:rgba(216,55,55,0.8); padding:2px 8px; border-radius:10px;font-weight:bold;}

/*
.run-report .data.label-left dl .injured { position:absolute; top:61px; font-size:14px; color:#000; font-style:italic; background-color:rgba(216,55,55,0.8); padding:2px 8px; border-radius:10px;}
*/

.run-report .showing-current.data.label-left dl { border-bottom:none; }
.run-report .showing-current.data.label-left dl.longest-break { padding-top:15px;}
.run-report .showing-current.data.label-left dl.longest-streak { border-top:1px solid #333; padding-top:15px;}
.run-report .showing-current.data.label-left dl dt { font-size:12px; width:25%; padding-right:25px; padding-top:0px; box-sizing: border-box; }
.run-report .showing-current.data.label-left dl dd { font-size: 34px; margin-top:-4px; padding-left: 20px; padding-top:0px; }
.run-report .showing-current.data.label-left dl .supporting-data { font-size: 12px; }
.run-report .showing-current.data.label-left dl .injured { font-size:12px; padding:0px 8px; }
.run-report .showing-current .super { margin-left: 5px; }
.run-report .showing-current .pow { margin-left: 5px; }
.run-report .showing-current .never-stop-running {top: 10px; right: 10px; left:auto;}
.run-report .showing-current .bunny {top: 10px; right: 10px; left:auto;}
.run-report .showing-current .days-365 { top: 10px; right: 10px; left:auto; }
.run-report .showing-current .days-366 { top: 10px; right: 10px; left:auto;}
.run-report .showing-current .monster-streak { top: 10px; right: 10px; left:auto;}
.run-report .showing-current .blocked { font-size: 14px; padding-top: 2px; padding-bottom: 2px; top:18px; }

/*Data label*/
.run-report h2{color:#666;font-size:15px;margin-top:25px;padding-bottom:2px;}
.run-report h2.right {position:absolute; right:10px; top:0px; }

.run-report .page-top {display:flex; justify-content:space-between;}
.run-report .page-top  header { }
.run-report .page-top outputCalendar { }

/* date navigation */
#dateNav { border-radius: 5px; margin-top: 5px; margin-left: 0px; margin-bottom: 4px; background-color: #333; padding: 10px; width: 480px; border: 1px solid #333; }
#dateNav .button.allTime { display: block; box-sizing: padding-box; padding: 0px; line-height: 33px; font-size: 13px; color: #fff; white-space: nowrap; }
#dateNav .button.custom-period { line-height: 33px; font-size: 13px; white-space: nowrap; padding: 0px; }
#dateNav .years { display: flex; justify-content: left; color: #666; text-transform: uppercase; font-weight: bold; line-height: 0.65em; }
#dateNav .year-container{height:38px;margin-right:7px;width:72px;display:inline-block;overflow:hidden;}
#dateNav .year{box-sizing:border-box;line-height:33px;font-size:18px;display:block;padding:0px;}
#dateNav .year.half:first-child{margin-bottom:3px;} 
#dateNav .year.half{line-height:12px;font-size:11px;padding:1px 15px;}
#dateNav .months{display:flex; justify-content:space-around; font-size:1.2em; color:#666;text-transform:uppercase;font-weight:bold;height:25px;margin-top:3px;}
#dateNav .month{margin-right:5px;padding:5px 3px;}
#dateNav .days{height:45px;font-size:1.0em; color:#666;margin-top:7px;border-top:1px solid #666; padding-top:3px;}
#dateNav .day{width:25px;height:19px; padding-top:3px; overflow:visible;display:block; float:left;margin:4px 4px 2px 0px;border-color:transparent;box-sizing:border-box;}
#dateNav .day.dummy.button { color: #4a7fe0; font-weight: bold; }
#dateNav .race.button.selected .race-icon { border-bottom: 7px solid #333; }
#dateNav .race.button.selected .race-icon:before { border-bottom: 8px solid #333; }
#dateNav .race.button.selected .race-icon:after { border-bottom: 7px solid #333; }

/*
#dateNav.compact .year.half { padding:2px 10px;}
#dateNav.compact .year { padding: 2px 10px; }
#dateNav.compact .year-container { width: auto; margin-right: 4px; }
#dateNav.compact.year-columns-6 .year-container { margin-right: 6px; }
#dateNav.compact.year-columns-6 .year.half { padding: 2px 18px; }
#dateNav.compact.year-columns-7 .year-container { margin-right:5px;}
#dateNav.compact.year-columns-7 .year.half { padding: 2px 13px;}
#dateNav.compact.year-columns-8 .year-container { margin-right: 4px; }
#dateNav.compact.year-columns-8 .year.half { padding: 2px 10px; }
#dateNav.compact.year-columns-9 .year-container { margin-right: 4px; }
#dateNav.compact.year-columns-9 .year.half { padding: 2px 7px; }
*/

#dateNav .extra-years-container { position: absolute; background: linear-gradient(#3a3a3a,#444444); z-index: 4; right: 55px; top: 50px; border-radius: 0px 0px 8px 8px; display: none; }
#dateNav .extra-years-container.half-start{ top:81px; }
#dateNav .extra-years-container .extra-year { margin: 8px; font-size: 14px; line-height: 18px; padding: 1px 14px; }

body.light-theme .extra-years-container { right: 60px; }
body.light-theme .extra-years-container .extra-year { padding: 1px 8px; }

/* #dateNav.compact .allTime { width: 72px; } */
#dateNav a.day { cursor: pointer; }
#dateNav span.day { cursor:default; }
#dateNav .runs {height:20px;max-width:466px;font-size:1.0em; color:#666;margin-top:10px;border-top:1px solid #666; padding-top:1px;}
#dateNav .runs .race-icon { zoom: 0.7; top:-1px;right:-3px;}
#dateNav .runs .race-number { display: inline-block; color:#fff;}
#dateNav .selected .race-number { color: #000; }
#dateNav .run{display:inline-block; float:left;margin:6px 4px 2px 0px; padding:1px 6px;}
#dateNav .most-recent{position:absolute;left:340px;color:#666;font-size:1.5em;text-transform:uppercase;font-weight:bold;}
#dateNav .button.selected{background-color:#ffcc00;color:#000;border:none;}
#dateNav span{color:#666}
#dateNav a.button:hover{background-color:#ccc;color:#000;text-decoration:none;}
#dateNav .weekend{border-bottom: 1px solid #777; margin-bottom: 2px;}

#dateNav .custom-container {position:relative;}
#dateNav .custom-container h2 { margin-top: 0px; }
#dateNav .custom-container .date-range {}
#dateNav .custom-container .date-range dl.start {position:absolute; right:120px;}
#dateNav .custom-container .date-range dl.end{ position: absolute; right: 0px; }
#dateNav .custom-container .date-range dd { font-size: 10px; color: rgba(255,255,255,0.4); }
#dateNav .custom-container .axis path,
#dateNav .custom-container .axis line { fill: none; stroke: #666; shape-rendering: crispEdges; }
#dateNav .custom-container .x.axis path { stroke: #666; stroke-width: 1px; }
#dateNav .custom-container .x.axis .label-1 { font-size: 1em; }
#dateNav .custom-container .x.axis .label-2 { font-size: 0.85em; }
#dateNav .custom-container .y.axis path { stroke: #666; stroke-width: 1px; }
#dateNav .custom-container .x.axis text { font-size: 0.5em; fill: #ccc; text-anchor: middle; }
#dateNav .custom-container .y.axis text { font-size: 0.5em; fill: #ccc; text-anchor: middle; }
#dateNav .custom-container .brush .extent { fill-opacity: .15; shape-rendering: crispEdges; }
#dateNav .custom-container .resize.e rect {fill:#fff;cursor:e-resize;visibility:visible;}
#dateNav .custom-container .resize.w rect { fill: #fff; cursor: w-resize; visibility: visible; }
#dateNav .custom-container rect { fill: var(--graph-color-highlight); cursor: pointer; }
#dateNav .custom-container .button-container { position:absolute; right:0px; top:0px; margin: 0px; }
#dateNav .custom-container .button-container div { display:inline-block; padding:2px 6px; font-size:13px;color:#fff; border-radius:2px; margin:4px; cursor:pointer;}
#dateNav .custom-container .button-container div.apply {background-color:#22aa22;}
#dateNav .custom-container .button-container div.cancel { background-color: #555; }


#profileImage { background-color: #353535; border: 2px solid #444; width: 200px; float: left; margin-left: -26px; margin-bottom: 10px; margin-top: -24px; border-top: none; border-left: none; }
#profileImage .background{position:absolute;background-image:url("../images/overlay-60.png");margin-top:-38px;padding:4px;height:30px;width:162px;z-index:9999;text-align:center;margin-left:30px}
#profileImage .picture-label{position:absolute;color:#fff;margin-top:-40px;z-index:999;width:200px;text-shadow: 2px px 4px #000;text-align:center;margin:-37px auto 0px auto;}
#profileImage .picture-label .name-container{width:165px;height:50px;float:right;padding:5px;}
#profileImage .picture .userphoto{z-index:1}   

/*Follow unfollow buttons */
#follow, #unfollow, #facebookFollow {display:none; width:70px; margin-left:8px;}

/* List of users this user is following display on ReportMast*/
#followingUsers {position:absolute;top:84px;left:24px;}
#followingUsers .current-following-user{float:left;border-bottom:1px solid #666;border-right:1px solid #666;background-color:#dd5500;padding:2px 6px 2px 6px;}
#followingUsers .following-user{float:left;border-bottom:1px solid #666;border-right:1px solid #666;padding:2px 6px 2px 6px;cursor:pointer;}
#followingUsers .following-user:hover{background-color:#ff6600;}


.add-run-or-weight-container{width:172px;}
/* Add run button */
#addRunButton{font-size:14px;font-weight:normal;overflow:hidden;height:12px;margin-left:-10px;padding:2px 6px 7px 18px;width:75px;}
/* Add weight button */
#addWeightButton{margin-left:10px;}
#addWeightButton .scale{background-position:-112px -151px;height:14px;margin-top:-2px;width:26px;}

/* kilometer/mile selector */
#unitSelectContainer{position:absolute;top:4px;right:10px;width:140px;height:22px;overflow:hidden;}
#unitSelectContainer ul{float:right;height:15px;width:75px;}
#unitSelectContainer label{float:right;font-size:15px;margin:0px;width:40px;}
#unitSelect {background-color:#333;}
#unitSelect li{padding:8px;font-weight:normal;display:inline;}
.unit-k #unitMiles{cursor:pointer;color:#000;}
.unit-k #unitMiles:hover{color:#ccc;}
.unit-k #unitMiles:active{color:#fff;}
.unit-m #unitKilometers{cursor:pointer;color:#000;}
.unit-m #unitKilometers:hover{color:#ccc;}
.unit-m #unitKilometers:active{color:#fff;}
.unit-k #unitKilometers{color:#ffcc00;text-decoration:none;}
.unit-m #unitMiles{color:#ffcc00;text-decoration:none;}


#userQuickViewTab{border-top-right-radius:20px; border-bottom-right-radius:20px;position:absolute;top:10px;left:0;border:none;border-left:none;background-color:transparent; color:#fff; z-index:50;height:30px; font-size:22px; }
#userQuickViewTab .display-name-container { margin-left: 4px; }
#userQuickViewTab .display-name { display:inline-block; box-sizing:border-box; padding:2px 10px; background-color:#4b4b4b;letter-spacing:0.05em;border-radius: 20px;}
#userQuickViewTab .display-name.is-not-you{color:#ffee00;}
#userQuickViewTab:hover{background-color:#35393C;overflow:visible;}
.broad-box-shadow {
	box-shadow:10px 10px 10px rgba(0,0,0,0.5);	
}

#colorSelector {float:right; width: 36px; height: 36p; margin-top:-15px; cursor:pointer; }
#colorSelector div { background-position: -105px -113px; height: 29px; width: 29px; }
#colorTeam{float:right;margin-right:10px;margin-top:-10px;font-size:14px;}

.run-report .calories-container { height: 70px; }
.run-report .calories-container .label { text-transform: none; } /*someone keeps tweeting about how calories with a lowercase isn't the same a capital C kilocalories */
.run-report .calories-container.long .calories{ font-size:0.85em; }

.run-report .list .selectable li:hover{cursor:pointer;background-color:#222;color:#ffcc00;border-bottom:1px solid #333;border-top:1px solid #333;}
.run-report .list .selectable li{border-top:1px solid #222;border-bottom:1px solid #222}

.run-report ul.run-list{font-size:17px;line-height:17px;}
.run-report ul.run-list li { text-transform: lowercase; margin: 0px; padding-top: 2px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.run-report ul.run-list li.selected{color:#ffcc00;}
.run-report ul.run-list li:hover{color:#ffcc00;cursor:pointer;background-color:#222;border-bottom:1px solid #333;border-top:1px solid #333;padding-top:1px;}
.run-report ul.run-list li div {pointer-events:none;}
.run-report ul.run-list li div span { font-size: 0.6em; color: #aaa; display: inline-block; margin-left: 1px; }


.run-report ul.run-list .sparkline{display:inline-block;width:57px;}
.run-report ul.run-list .pace { display: inline-block; width: 60px; text-align: right; }
.run-report ul.run-list .date { display: inline-block; width: 72px; text-align:right; }
.run-report ul.run-list .color-code { display: inline-block; width: 5px; height: 15px; margin-left: 5px; }

.expanded .run-report ul.run-list .sparkline { width: 70px; }
.expanded .run-report ul.run-list .pace { width: 80px; }
.expanded .run-report ul.run-list .date { width: 95px; }

.expanded .run-report ul.run-list.has-hr .sparkline { display: inline-block; width: 55px; }
.expanded .run-report ul.run-list.has-hr .pace { display: inline-block; width: 63px; text-align: right; }
.expanded .run-report ul.run-list.has-hr .hr { display: inline-block; width: 60px; text-align: right; }
.expanded .run-report ul.run-list.has-hr .date { display: inline-block; width: 76px; text-align: right; }
.expanded .run-report ul.run-list.has-hr .color-code { display: inline-block; width: 5px; height: 15px; margin-left: 5px; }


.run-report .legend{margin-top:2px;padding-top:2px;}
.run-report .legend .key{float:right;margin-left:6px;}
.run-report .legend .color-key{height:15px;width:15px;float:right;margin:5px 0px 5px 3px;clear:both;}
.run-report .legend .label{float:right;font-size:12px;margin-top:5px;}

.run-report .whoop { display: inline-block; position: absolute; margin-left: -15px; top: 10px; }
.run-report .bada-bing{background-image:url("../images/bada-bing-white-38x25.png");height:25px;width:38px;display:inline-block;position:absolute;margin-left:5px;}
.run-report .pow{background-image:url("../images/pow-35x25.png");height:25px;width:35px;display:inline-block;position:absolute;margin-left:-30px;}
.run-report .super{background-image:url("../images/super-39x25.png");height:25px;width:39px;display:inline-block;position:absolute;margin-left:-30px;}
.run-report .coyote{background-image:url("../images/sad-coyote-38x30.png");height:30px;width:38px;display:inline-block;position:absolute;margin-left:5px;top:10px;}
.run-report .bunny{background-image:url("../images/bunny-65x55.png");height:55px;width:65px;display:inline-block;position:absolute;top:5px;}
.run-report .days-365{background-image:url("../images/365-days-run-46x50.png");height:50px;width:46px;display:inline-block;position:absolute;top:0px;}
.run-report .days-366{background-image:url("../images/366-days-run-50x54.png");height:54px;width:50px;display:inline-block;position:absolute;top:0px;}
.run-report .five-years{background-image:url("../images/five-years-77x15.gif");height:15px;width:77px;display:inline-block;position:absolute;right:5px; top:5px;padding:4px 6px; background-repeat:no-repeat; border-radius:10px;background-position:7px 5px;border:1px solid #555;background-color:#000;}
.run-report .never-stop-running{background-image:url("../images/never-stop-running-50x50.png");height:50px;width:50px;position:absolute;top:5px;left:224px;}
.run-report .never-stop-running{
  -webkit-transition-property: left, top, background, -webkit-transform;
  -webkit-transition-duration: 2s, 2s, 1s, 1s;
  -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;  
  -moz-transition: -moz-transform 2s ease-out;
}
.run-report .never-stop-running:hover{
	 -webkit-transform: rotate(900deg);
	-moz-transform: rotate(900deg);
	-o-transform: rotate(900deg);
	-ms-transform: rotate(900deg);
	transform: rotate(900deg);      
}
.run-report .monster-streak{background-image:url("../images/monster-streak-47x45.png");height:45px;width:47px;position:absolute;top:12px;left:245px;}
.run-report .blocked { font-size:14px; right:0px; top:15px; position:absolute; white-space:normal; left:auto; text-align:center; color:#111; font-weight:bold; display:inline-block; background-color:rgba(10,255,15,0.5); line-height:1.1em; padding:5px 8px;border-radius:20px; }


/* A list of items */
.run-report .list ul{list-style:none;}
.run-report .list ul li .data-item{float:left;}
.run-report .list.large .data-item{line-height:30px;font-size:20px}
.run-report .list.medium .data-item{line-height:19px;font-size:16px}
.run-report .list.small .data-item{line-height:14px;font-size:12px}
.run-report .list ul li {clear:both;}

/* click to zoom chart */
.report-container .can-zoom{cursor:pointer;}

.run-report .icon-embed{position:absolute;right:1px;top:27px;cursor:pointer;color:#666;font-size:12px;}

/* generated element for shine effect.
 * normal state is semi-transparent
 * white but with zero width. Set no
 * transition here for no mouse-leave
 * animations. Otherwise the effect
 * will play in reverse when your mouse
 * leaves the element
 */
.shimmer:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0%;
    height: 100%;
    background-color: rgba(255,255,255,0.4);
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;    
}
/* on hover we animate the width to
 * 100% and opacity to 0 so the element
 * grows and fades out 
 */
.shimmer:hover:after {
    width: 120%;
    background-color: rgba(255,255,255,0);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.look-at-me.button { color:#ffcc00 }

.ranks .peers .data-item.name .smashrun-tag{
    line-height:0.9em;
    display:inline-block;    
    color: #ffbb33;
    background-color: #555;
    border-radius: 3px;
    font-size: 8px;
    font-family: 'Arial', sans-serif;
    font-weight: normal;
    padding: 2px 4px;
    letter-spacing: .07em;
    margin-left:5px;
    text-decoration: none;
    text-transform:uppercase;    
    -webkit-transition: .35s; 
    transition:.35s;
    vertical-align:middle;
}
.pro-user-tag{
    color: #ffffff;
    background-color: #555;
    border-radius: 3px;
    font-size: 8px;
    font-family: 'Arial', sans-serif;
    font-weight: normal;
    padding: 1px 4px;
    letter-spacing: .07em;
    margin-left:5px;
    text-decoration: none;
    text-transform:uppercase;
    vertical-align: middle;
    -webkit-transition: .35s; 
    transition:.35s;
    line-height:0.9em;
}

.pro-user-tag:hover{background-color:#ff9900;color:#151515;}

/* language drop-down for main master */
.select-styled {margin-top:16px; margin-right:35px; float: right; padding: 0; width: 150px; border-radius: 3px; overflow: hidden;  background-color: #fff; background: #fff url('../images/store/dropdown-arrow15x20.jpg') no-repeat 90% 50%;}
.select-styled select {color: #454545;font-size:12px; cursor:pointer; padding: 5px 8px; width: 120%; border: none; box-shadow: none; background-color: transparent; background-image: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.select-styled select:focus, select {outline: none;}
.select-styled option {color:#454545;}
select:-moz-focusring {color: transparent; text-shadow: 0 0 0 #000;}


.selected .race-icon { 
    border-bottom: 7px  solid #000;
}
.selected .race-icon:before { 
    border-bottom: 8px solid #000;
}
.selected .race-icon:after { 
    border-bottom: 8px solid #000;
}
.race-icon{
   margin: 2px 3px;
   position: relative;
   display: block;
   color: #fff;
   width: 0px;
   height: 0px;
   border-right:  10px solid transparent;
   border-bottom: 7px  solid #fff;
   border-left:   9px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
.race-icon:before {
   border-bottom: 8px solid #fff;
   border-left: 3px solid transparent;
   border-right: 3px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -4.5px;
   left: -6.5px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);

}
.race-icon:after {
   position: absolute;
   display: block;
   color: #fff;
   top: 0px;
   left: -10.5px;
   width: 0px;
   height: 0px;
   border-right: 10px solid transparent;
   border-bottom: 7px solid #fff;
   border-left: 10px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}
#dateNav .race-number { display: none;}
#dateNav .runs .race-number { display: inline-block; }
#dateNav .runs .race-icon { display: inline-block; margin-left:-7px;}


/* AJAX Loader*/
@-webkit-keyframes uil-reload-css {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes uil-reload-css {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes uil-reload-css {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-ms-keyframes uil-reload-css {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes uil-reload-css {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes uil-reload-css {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes uil-reload-css {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes uil-reload-css {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.uil-reload-css {
  position: relative;
  width: 200px;
  height: 200px;
}
.uil-reload-css > div {
  -ms-animation: uil-reload-css 2s linear infinite;
  -moz-animation: uil-reload-css 2s linear infinite;
  -webkit-animation: uil-reload-css 2s linear infinite;
  -o-animation: uil-reload-css 2s linear infinite;
  animation: uil-reload-css 2s linear infinite;
  display: block;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 160px;
  height: 160px;
  border-radius: 100px;
  border: 20px solid #ff6600;
  border-top: 20px solid rgba(0,0,0,0);
  border-right: 20px solid #ff6600;
  border-bottom: 20px solid #ff6600;
}
.uil-reload-css > div:after {
  content: " ";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 30px 30px 30px;
  border-color: transparent transparent #ff6600 transparent;
  display: block;
  -ms-transform: translate(-15px, 0) rotate(45deg);
  -moz-transform: translate(-15px, 0) rotate(45deg);
  -webkit-transform: translate(-15px, 0) rotate(45deg);
  -o-transform: translate(-15px, 0) rotate(45deg);
  transform: translate(-15px, 0) rotate(45deg);
}

.run-by-run .ran-with h2 { text-align: right; }
.run-by-run .ran-with .name { font-size:12px; line-height:12px; text-align: right; }

.run-by-run .tags-container { width: 100%; }
.run-by-run .tags-container .data { max-height: 242px; overflow:hidden; position: absolute; background-color: var(--graph-color-background); z-index:2; padding-bottom:8px;  box-sizing: border-box;}
.run-by-run .tags-container .data.over { max-height: inherit; box-shadow: 0px 10px 10px rgba(0,0,0,.5); border-bottom:1px solid #333;}


.screenshot-loading { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background-color: #222; z-index:999;}
.screenshot-loading div {   transform: translate(-50%); position:absolute; left:50%; top:40%; color: #f1f1f1; font-size: 80px; text-align:center;}

/* high contrast labels */
.bright .run-by-run .y.axis text,
.bright .run-by-run .x.axis text,
.bright .run-overview .am-pm text,
.bright .ranks .x.axis text,
.bright .ranks .y.axis text,
.bright .run-overview .x.axis text,
.bright .run-overview .y.axis text,
.bright .run-overview .run-not-run .left-labels text,
.bright .run-overview .run-not-run .bottom-labels text {fill:#999;}

.bright .run-report .chart-axis-label,
.bright .run-report h2,
.bright .run-list th,
.bright .run-overview .goal-setting label {color:#999;}


body.light-theme {  }
body.light-theme #mastHead { background-color: #555; }
body.light-theme #mainContentArea { background-color: var(--graph-color-background); }
body.light-theme .badge-view { display: none; }


/*
    body.light-theme #shareStats { display: none; }
    body.light-theme .info-carousel { display: none; }
body.light-theme #slidePanelTab { display: none !important; }
body.light-theme #slideMenuArea { display: none !important; }
body.light-theme #userQuickViewTab { display: none; }
body.light-theme #proAnalyze { display: none; }
body.light-theme .label .pow { display: none; }

*/
body.light-theme .slide-shadow { height: 1px; }
body.light-theme #slidePanelTab { margin-top: -2px; }
body.light-theme #dateNav { background-color: transparent; background-color: #3a3a3a; border:none; margin-top:5px;}
body.light-theme #dateNav .button { border: 1px solid; box-shadow: none; -webkit-box-shadow: none; text-shadow:none; background-color: transparent; background:none; border-radius:0px; border-color:transparent; }
/*
    body.light-theme #dateNav .button.selected { border: 1px; border-style:solid; border-color:#fff; border-color:var(--emphasis-1); color: #3a3a3a; border-radius:6px;background-color:#fff;}
    body.light-theme #dateNav .year-container { width: 65px; margin-left: 2px; }
    body.light-theme #dateNav .year.half { padding: 1px 20px; }
 */
body.light-theme #dateNav .button.selected { border: 1px; border-style:solid; border-color:transparent; border-radius:6px;background-color:#ffcc00; color:#3a3a3a;}
body.light-theme #dateNav .days .race.button { margin-top: 0px; padding-top:4px;border:none;margin-left:0px;margin-right:0px;}
body.light-theme #dateNav .days .race.button .race-icon { margin: 0px; display:inline-block;}
body.light-theme #dateNav .days .race.button.selected { border: none; background-color:#ffcc00; height:22px;width:22px;margin-left:2.5px;margin-right:2.5px; border-radius:30px;padding-top:4px;padding-left:1px;box-sizing:border-box;}
body.light-theme #dateNav .days .race.button.selected .race-icon { border-bottom: 8px solid #3a3a3a; }
body.light-theme #dateNav .days .race.button.selected .race-icon:before { border-bottom: 8px solid #3a3a3a; }
body.light-theme #dateNav .days .race.button.selected .race-icon:after { border-bottom: 7px solid #3a3a3a; }
body.light-theme #dateNav .days .runs .race-number { color:#eee; color: var(--action-color); }
body.light-theme #dateNav .days { margin-top:10px; padding-top:4px; }
body.light-theme #dateNav .days .day { padding-top: 2px; width: 31px; margin: 2px 0px 2px 0px; }
body.light-theme #dateNav .days.short-month .day { width: 34px; }
body.light-theme #dateNav .days.long-month  .day { width: 29px; }
body.light-theme #dateNav .runs { padding-top:2px; margin-top:5px;}
body.light-theme #dateNav .runs a { margin-top: 6px; }
body.light-theme #dateNav .runs a.selected { margin-top: 5px; }
body.light-theme #dateNav .runs a.selected .race-number { color: #3a3a3a; }
body.light-theme #dateNav .runs a.selected .race-icon { border-bottom: 7px solid #3a3a3a; }
body.light-theme #dateNav .runs a.selected .race-icon:before { border-bottom: 8px solid #3a3a3a; }
body.light-theme #dateNav .runs a.selected .race-icon:after { border-bottom: 7px solid #3a3a3a; }


body.light-theme #dateNav a.button { color:#eee; color: var(--action-color); }
body.light-theme #dateNav a.button:not(.selected):hover{ border: 1px; border-style:solid; border-color:transparent; border-color:var(--emphasis-1); border-color: #3a3a3a; color: var(--emphasis-1); color: #3a3a3a; border-radius:6px;background-color:#fff;}
body.light-theme #dateNav a.button:not(.selected):hover .race-icon { border-bottom: 8px solid #3a3a3a; }
body.light-theme #dateNav a.button:not(.selected):hover .race-icon:before { border-bottom: 8px solid #3a3a3a; }
body.light-theme #dateNav a.button:not(.selected):hover .race-icon:after { border-bottom: 7px solid #3a3a3a; }
body.light-theme #dateNav a.button:not(.selected):hover .race-number { color: #3a3a3a; }
body.light-theme #dateNav a.button.race:not(.selected):hover { border: none; background-color:#fff; height:22px;width:22px;border-radius:30px;padding-top:4px;padding-left:1px;box-sizing:border-box;margin-left:5px;margin-right:2px;margin-top:0px;margin-bottom:-1px;}
body.light-theme #dateNav .runs .selected .race-number {color: var(--emphasis-1); color: #3a3a3a; }
body.light-theme #dateNav span.button { color:#666; color: var(--disabled-color); }
body.light-theme #dateNav .runs a.button { margin: 4px 2px 0px 0px; }


body.light-theme .run-report h1 { color:#fff; color: var(--emphasis-1); }
body.light-theme .run-report .label { color:#ccc; color: var(--emphasis-2); }
body.light-theme .run-report h2 { color:#777; color: var(--emphasis-3); }
body.light-theme .data { border-top: 1px solid #444; border-top: 1px solid var(--emphasis-5); color:#fff; color:var(--emphasis-1);}
body.light-theme .run-overview .goal-setting .goal-chart-container .show-progress { background-color: var(--graph-color-background); }
body.light-theme .run-overview .data .axis text { fill:#777; fill: var(--emphasis-3) !important; }

body.light-theme .run-overview .data .axis line { stroke:#444 !important; stroke: var(--emphasis-5) !important; }
body.light-theme .run-overview .data .axis .tick line { stroke:#444 !important; stroke: var(--emphasis-5) !important; }
body.light-theme .run-overview .data .axis path { stroke:#444; stroke: var(--emphasis-5); }
body.light-theme .run-overview .data .lines polyline{ stroke:#777; stroke: var(--emphasis-3); }
body.light-theme .run-overview .svg-graph-color-highlight { fill: var(--graph-color-highlight); }
body.light-theme .run-overview .goal-setting .data .set-a-goal { color:#4a4a4a; color: var(--action-color-2); }
body.light-theme .run-overview h2 span.clickable { color:#eee; color: var(--action-color); background-color:#444; background-color: var(--emphasis-5); }

body.light-theme .run-overview .data.label-left dl { border-color:#444; border-color: var(--emphasis-5); }
body.light-theme .run-overview .data.label-left dl dt { color:#777; color: var(--emphasis-3); border-color:#333; border-color: var(--emphasis-6);text-transform:uppercase;}
body.light-theme .run-overview .data.label-left dl dd { color:#fff; color: var(--emphasis-1); border-color:#333; border-color: var(--emphasis-6);border-left:none;}

body.light-theme .run-report .selectable li { border-top-color:#444; border-top-color: var(--emphasis-5); }

body.light-theme .run-by-run .tags .tag { color:#555; color: var(--emphasis-4); border-color:#444; border-color: var(--emphasis-5);}
body.light-theme .run-by-run .tags .tag:hover { color: #ccc; color: var(--emphasis-2); }
body.light-theme .run-by-run .tags .tag-no-effect { color:#fff; color: var(--emphasis-1); border-color:#777; border-color: var(--emphasis-3); }
body.light-theme .run-by-run .tags .tagged { color:#ccc; color: var(--emphasis-2); border-color:#777; border-color: var(--emphasis-3); }

body.light-theme .run-by-run .data.label-left dl dt { color:#777; color: var(--emphasis-3); border-color:#333; border-color: var(--emphasis-6);text-transform:uppercase;}
body.light-theme .run-by-run .data.label-left dl dd { color:#fff; color: var(--emphasis-1); border-color:#333; border-color: var(--emphasis-6);border-left:none;}

body.light-theme .bright .run-report h2 { color:#ccc; color: var(--emphasis-2); }
body.light-theme .bright .data .axis text { color:#ccc; fill: var(--emphasis-2) !important; }
body.light-theme .bright .run-by-run .tags .tag { color:#777; color: var(--emphasis-3); border-color:#444; border-color: var(--emphasis-5);}
body.light-theme .bright .run-by-run .tags .tag-no-effect { color:#777; color: var(--emphasis-3); border-color:#444; border-color: var(--emphasis-3); }
body.light-theme .bright .run-by-run .tags .tagged { color:#ccc; color: var(--emphasis-2); border-color: #777; border-color: var(--emphasis-3); }

body.light-theme .run-overview .run-not-run .left-labels text { fill: #777; fill: var(--emphasis-3) !important; font-size: 12px; }
body.light-theme .run-overview .run-not-run .bottom-labels text { fill: #777; fill: var(--emphasis-3) !important; font-size: 12px; text-anchor: middle; }

.pt-main.blur{ -webkit-filter: blur(5px);-moz-filter: blur(5px);-ms-filter: blur(5px);-o-filter: blur(5px);filter: blur(5px);}
.mobile-overlay { -webkit-filter: blur(0px); filter: blur(0px); position:fixed;top:0px;left:0px;height: 100%; width: 100%; z-index:10; background-color: rgba(0, 0, 0, 0.5);}
.mobile-overlay .buttons-container { position: fixed; left: 50%; top:10%;margin-left: -40%; width: 80%; height: 80%; text-align:center;border-radius:6px;box-sizing:border-box;}
.mobile-overlay .button { height: 18%;  margin:2%; width: 90%; background-color: #222; border: 1px solid #111; background-image:none; vertical-align:middle; box-sizing:border-box;line-height:2em;}
.mobile-overlay .button:active { background-color: #555; }
.mobile-overlay .button span { display: inline-block; position: absolute; left: 50%; width: 100%; margin-left: -50%; top: 50%; margin-top: -1em;}
.mobile-overlay .button form { width: 100%; height: 100%; }
.mobile-overlay .button form input{ width: 100%; height: 100%; }

/*******************************
 Container for page transition
******************************/
.pt-page {
	position: fixed;
	width:100%;
	top: 0;
	left: 0;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.pt-page-current,
.no-js .pt-page {
	visibility: visible;
	z-index: 4;
    height:100%;
}


.run-overview .overview-error { float:left; margin:25px 0px 15px -36px; padding:8px 12px 8px 36px; color:#eee; background-color:#555; width:450px; font-size:16px; line-height:1.5em;border-radius:0px 4px 4px 0px; }
.run-overview .quick-button-container { margin-top: 10px; }
.run-overview .quick-button-container.social-disabled .social.button { background: none; border: 1px solid rgba(255,255,255,0.1); font-weight:normal; color:rgba(255,255,255,0.2);box-shadow:none; text-shadow:none;}
.run-overview .quick-button-container.social-disabled .social.button:hover { color:rgba(255,255,255,0.3);}
.run-overview .quick-button-container.social-disabled .social.notification { display: none; }
.run-overview .quick-button-container .button { font-size: 14px; line-height: 15px; padding: 4px 15px; margin-left: 8px; }
.run-overview .quick-button-container .button:first-child { margin-left: 0px; }
.run-overview .quick-button-container .social.notification {display:inline-block;position:relative;}
.run-overview .quick-button-container .social.notification:hover {cursor:pointer;}
.run-overview .quick-button-container .notification-icon {background-image:url('../images/social/notify-22.png');width:22px;height:22px;display:inline-block;margin-bottom:-5px;}
.run-overview .quick-button-container .notification-count {display:inline-block;font-size:11px;background-color:#ff2c2c;color:#fafafa;border-radius:10px;padding:0px 2px;z-index:11;min-height:15px; min-width:15px; box-sizing:border-box; text-align:center; vertical-align: top; line-height:15px; font-weight:bold; margin-left:-8px; margin-top:-4px;  }

.run-overview .goal-setting .cancel{display:none;cursor:pointer;position:absolute;right:0px;top:47px;color:#ccc;background-color:#333;border-radius:20px;padding:1px 4px;font-size:10px;z-index:99;}
.run-overview .goal-setting .cancel:hover{color:#fff;background-color:#666;}
.run-overview .goal-setting .data .text {text-transform:none;font-size:15px;line-height:1.35em;color:#EDF4FC;}
.run-overview .goal-setting .data .set-a-goal{color:#444;font-size:18px;height:40px;line-height:1.2em;}
.run-overview .goal-setting.month-goal .data .set-a-goal { margin-bottom: 7px; }
.run-overview .goal-setting .data.editable{cursor:pointer;}


.run-overview .goal-setting {position:relative; padding-bottom:8px;}
.run-overview .goal-setting .goal-final.fail{border-radius:5px; background-color:#333;padding:5px 10px;font-size:14px;font-size:12px;}
.run-overview .goal-setting .goal-final.success.one{background-image:url("../images/goals/laurels-133x70.png");width:133px;height:70px;text-align:center;display:inline-block;}
.run-overview .goal-setting .goal-final.success span.goal-value{font-size:40px;padding-top:20px;display:block;line-height:30px;}
.run-overview .goal-setting .goal-final.success span.unit-label{font-size:14px;display:block;}
.run-overview .goal-setting .goal-chart-container{position:relative;margin-top:16px;text-align:center;}
.run-overview .goal-setting .goal-chart-container .show-progress{display:none;z-index:2;border:2px solid;border-radius:5px;text-transform:none;position:absolute;height:25px;width:100%;bottom:-20px;left:0px;padding-top:10px;font-size:16px;color:#ffaa00;font-weight:bold;background-color:rgba(0,0,0,.85);text-align:center;}
.pro .is-you .run-overview .goal-setting .goal-chart-container:hover .show-progress{ display:block; }
.run-overview .goal-setting .goal-chart {height:11px;background-color:#3a3a3a;overflow:hidden;}
.run-overview .goal-setting .goal-chart .done{height:20px;background-color:#ffce00;}
.run-overview .goal-setting label{font-size:10px;color:#666;position:absolute;}
.run-overview .goal-setting label.start-date{left:0px;bottom:8px;}
.run-overview .goal-setting label.start{left: 0px; bottom: -15px; }
.run-overview .goal-setting label.target{-moz-box-sizing:border-box;box-sizing:border-box;top:11px;border-left:1px solid #666;height:10px;overflow:visible;padding-top:8px;text-indent:-5px;line-height:16px;}
.run-overview .goal-setting label.target .icon{display:none;background-image:url("../images/arrow-14x10.png");height:10px;width:14px;position:absolute;right:-15px;top:8px;}
.run-overview .goal-setting label.current{color:#bbb;margin-top:-13px;margin-left:-1px;padding-left:4px;font-size:11px;}
.run-overview .goal-setting label.current.behind{color:#dd7777;}
.run-overview .goal-setting label.current.ahead{color:#fafafa;}
.run-overview .goal-setting label.goal{right:0px;}

.run-overview path { }
.run-overview rect {shape-rendering:geometricPrecision;}
.run-overview rect.focus { fill: #fff; opacity:0.25; pointer-events:none;}
.run-overview rect.cell { stroke-width: 0.25px; shape-rendering:geometricPrecision; }
.run-overview h2 span.clickable { background-color: #333; color: #aaa; padding:1px 4px; cursor:pointer;}

.chart { font-size: 11px; }
.chart .axis path, 
.chart .axis line { fill: none; stroke: #2a2a2a; shape-rendering: crispEdges; stroke-width: 1.0px;}
.chart .x.axis text {stroke:none;fill:#555;font-size:1em;text-transform:none;}
.chart .x.axis .label-1 {font-size:1em;} 
.chart .x.axis .label-2 {font-size:0.85em;}
.chart .y.axis path {stroke:#2a2a2a;stroke-width: 1px;shape-rendering: crispEdges;}
.chart .y.axis text {stroke:none;fill:#555;font-size:1em;text-transform:none;}
body .data .chart .axis.hide-line path { fill: none; stroke: none; }


.by-period .plumb-line { stroke-width: 1px; stroke: #aaa; opacity: 0.8; pointer-events:none; }

.fullscreen-chart-container { font-size: 25px; }
.fullscreen-chart-container.distance-pace circle { opacity: 0.8; }
.fullscreen-chart-container.distance-pace circle.last-run.highlight{ stroke-width: 6px; stroke: #fff; fill:#fff; opacity:1.0 }

.fullscreen-chart-container.trailing path { stroke-width: 3px; }



.distance-pace .plumb-line { stroke-width: 0.5px; stroke: #aaa; opacity: 0.8; pointer-events:none; }
.distance-pace circle { opacity: 0.4; stroke-width: 0px;}
.distance-pace circle.highlighted { opacity: 0.7; fill: #fff; }
.distance-pace circle.last-run.highlight { opacity: 1; fill: #fff; stroke-width: 0.5px; stroke:#444; }
.distance-pace circle.hidden { opacity: 0; }
.distance-pace circle.hidden.highlighted { opacity: 0.7; fill: #fff; }
.distance-pace .mean circle { opacity: 0.6; fill: #000; stroke-width: 1px; stroke:#fff; }
.focus-overlay { fill: #111; opacity:0;cursor:default;}
.distance-pace .legend { position:absolute;right:10px;bottom:-14px;}
.distance-pace .legend div { display: inline-block; }
.distance-pace .legend svg { }
.distance-pace .legend .legend-label { line-height:22px;font-size: 10px; vertical-align:bottom;color:#777;display:inline-block;margin-left: 15px;margin-right:2px;}
.distance-pace svg { overflow: hidden }

.run-overview .run-not-run path.month { stroke-width: 0.5px; stroke: #999; pointer-events: none; }
.run-overview .run-not-run text.path-label { fill: rgba(255,255,255,0.45); font-size: 12px; text-anchor:middle;text-transform:lowercase;}
.run-overview .run-not-run .left-labels     text { fill: #555; font-size:11px;}
.run-overview .run-not-run .bottom-labels   text { fill: #555; font-size:11px;text-anchor:middle;}
.run-overview .run-not-run .legend {padding-top:14px; }
.run-overview .run-not-run .legend .key .label { margin-left: 0px; color:#999; }
.run-overview .run-not-run .legend .explain.label { position: absolute; right: 0px; bottom: -40px; color:#666;}
.run-overview .run-not-run .legend .alt-scale-toggle { color: #666; text-transform: lowercase; border-bottom: 1px solid #555; display: inline-block; position: absolute; cursor: pointer; bottom: 10px; right: 0px; font-size: 10px; }

.run-overview .run-not-run .dimmed { opacity: 0.075; }
.run-overview .run-not-run .white { fill:#fff; }

.focus-tooltip { display: none; position: absolute; background-color: #fafafa; padding:6px 10px;z-index:20; pointer-events:none;font-size:10px;}
.focus-tooltip .date { text-align:right; color: #333; font-size: 12px; margin-bottom:2px; padding-bottom:1px; border-bottom:1px solid #ccc;}
.focus-tooltip .run div { color:#555; display: inline-block; padding: 2px 0px 0px 0px; font-size:16px;text-align:right;}
.focus-tooltip .run .value { padding-left: 0px; font-size:14px;text-align:right;}
.focus-tooltip .run .row-label { width: 24px; font-size:10px; }
.focus-tooltip .run .distance { width: 70px; }
.focus-tooltip .run .elevation { width: 70px; }
.focus-tooltip .run .pace { width: 80px; }
.focus-tooltip .run .label { font-size:10px;margin-right:5px;}
.focus-tooltip .total { margin-top: 1px; padding-bottom: 1px; border-top: 1px solid #aaa; }

.focus-tooltip .period-stats div { font-size: 13px; color: #333; }
.focus-tooltip .period-stats div .row-label { display:inline-block; width:90px;text-align:right; color:#666; }
.focus-tooltip .period-stats div .value { margin-left:2px; color: #000; }
.focus-tooltip .period-stats div .label { font-size:11px;color: #666; }

.focus-tooltip .scatter { font-size: 14px; color: #555; }
.focus-tooltip .scatter.container { width: 150px; }
.focus-tooltip .scatter .value { color: #111;font-size:1.1em;}
.focus-tooltip .scatter .label { font-size:0.7em;color:#555;}

.trailing .focus circle { fill: #fff; stroke-width: 1px; stroke:#111; opacity: 0.8; pointer-events:none;}
.trailing path { fill: none; stroke-width:1.5px;}

.run-overview .run-not-run path { fill: none; }
.run-overview .run-not-run .day-labels.mon .mon { fill: #aaa}
.run-overview .run-not-run .day-labels.tue .tue { fill: #aaa}
.run-overview .run-not-run .day-labels.wed .wed { fill: #aaa}
.run-overview .run-not-run .day-labels.thu .thu { fill: #aaa}
.run-overview .run-not-run .day-labels.fri .fri { fill: #aaa}
.run-overview .run-not-run .day-labels.sat .sat { fill: #aaa}
.run-overview .run-not-run .day-labels.sun .sun { fill: #aaa}

.run-overview .run-not-run .month-labels.jan .jan { fill: #aaa}
.run-overview .run-not-run .month-labels.feb .feb { fill: #aaa}
.run-overview .run-not-run .month-labels.mar .mar { fill: #aaa}
.run-overview .run-not-run .month-labels.apr .apr { fill: #aaa}
.run-overview .run-not-run .month-labels.may .may { fill: #aaa}
.run-overview .run-not-run .month-labels.jun .jun { fill: #aaa}
.run-overview .run-not-run .month-labels.jul .jul { fill: #aaa}
.run-overview .run-not-run .month-labels.aug .aug{ fill: #aaa}
.run-overview .run-not-run .month-labels.sep .sep{ fill: #aaa}
.run-overview .run-not-run .month-labels.oct .oct{ fill: #aaa}
.run-overview .run-not-run .month-labels.nov .nov{ fill: #aaa}
.run-overview .run-not-run .month-labels.dec .dec{ fill: #aaa}

.run-overview .weekday .data{font-size:27px;}
.run-overview .longest-run { text-transform:lowercase; }
.run-overview .longest-run:first-child:first-letter{ text-transform:uppercase; }


.expanded .run-overview .am-pm .data .value { position: absolute; top: 50px; left: 75px; width:110px; text-align:center; font-size: 45px; font-weight: bold; text-shadow: 0px 0px 1px #444; color: #fff; }
.expanded .run-overview .am-pm .data .label { position: absolute; top: 75px; left: 75px; width:110px; text-align:center; font-size: 20px; color: #fff; text-shadow: 0px 0px 1px #444 }
.expanded .run-overview .am-pm .data .chart { margin-top: -10px; margin-left: -20px; }

.run-overview .am-pm .data .chart {margin-top:-20px;margin-left:-40px;}
.run-overview .am-pm .data .value { position: absolute; top: 27px; left: 70px; font-size: 40px; font-weight: bold; text-shadow: 0px 0px 1px #444; color: #fff; }
.run-overview .am-pm .data .value span{font-size:0.6em}
.run-overview .am-pm .data .label { position: absolute; top: 58px; left: 85px; font-size: 20px; color: #fff; text-shadow: 0px 0px 1px #444 }
.run-overview .am-pm path.slice{stroke-width:0px;}
.run-overview .am-pm polyline { opacity: .4; stroke: #fafafa; stroke-width: 1px; fill: none; }
.run-overview .am-pm text{fill:#666;text-transform:none;font-size:11px;}

.run-overview .header-button {float:right;color:#e5e5e5;font-size:12px;margin-right:5px;margin-top:-21px;text-transform:lowercase;}
.run-overview .header-button:hover{color:#fff;cursor:pointer;}
.run-overview .list .data-item {margin-top:2px;margin-bottom:-2px;}
.run-overview .list .data-item.sparkline{margin-left:4px;width:75px;height:30px;overflow:hidden;}
.run-overview .list .data-item.sparkline .chart path{fill:none;stroke-width:1.5px;}
.run-overview .list .data-item.start-date{margin-left:0px;width:100px;text-align:right;}
.run-overview .list .data-item.distance{margin-left:10px;width:130px;}
.run-overview .list .data-item.color-code{margin:6px 4px;width:6px;height:20px;}
.run-overview .list .data-item.pace{width:150px;text-align:right;}
.run-overview .list .data-item.speed{margin-left:10px;text-align:right;width:120px;}
.run-overview .list .data-item.elapsed-time{width:130px;text-align:right;}
.run-overview .list .data-item.official{display:inline-block;width:50px;height:20px;margin-left:5px;}
.run-overview .list .data-item.official img{height:19px;width:50px;margin-top:5px;}
.run-overview .list .data-item.run-count{width:90px;text-align:right;}
.run-overview .personal-bests .legend{float:right;width:300px;}

.run-overview .list.large p{margin:10px;color:#efefef;}

.run-overview .tweet-2011{cursor:pointer;position:absolute;width:45px;height:135px;background-image:url("../images/tweet-2011-45x136.png");left:950px;top:255px;z-index:-1}

.run-overview .data.distance-text{height:56px;line-height:normal;font-size:inherit;padding-top:0px;}
.run-overview .data.distance-text .thousands { white-space: nowrap; font-size:35px;}
.run-overview .data.distance-text .other-numbers {width: 348px; height: 30px; font-size:12px; margin-left: 5px; display: block; float: left; padding-top: 14px; }
.run-overview .data.distance-text span { opacity: 0; }
.run-overview .share {position:absolute;width:50px;height:21px;margin-top:5px;}    
.run-overview .share .container{float:left;height:21px;width:auto;cursor:pointer;}
.run-overview .share .facebook{background-image:url('../images/sprites/share-icons-50x45.png'); background-position: -4px 0; width:16px; height:21px; margin-left: 4px;}
.run-overview .share .facebook:hover {background-position: -4px -23px;}
.run-overview .share .twitter{background-image:url('../images/sprites/share-icons-50x45.png'); background-position: -24px -2px; width:22px; height:21px; margin-left: 4px; margin-top: 2px;}
.run-overview .share .twitter:hover {background-position: -24px -25px;}

.run-overview .icon-share{position:absolute;right:1px;top:27px;cursor:pointer;}

.official-tag{background-position:-3px -7px;display:inline-block;height:20px;margin-left:5px;width:50px;}

.new-user-box{position:absolute;font-size:16px;line-height:22px;padding:20px;top:150px;width:895px;border-radius:8px;border:1px solid #333;color:#444;background-color:#fff;z-index:100;box-sizing:border-box;}
.new-user-box .invite{color:#ddd;font-size:14px;letter-spacing:.01em;}
.new-user-box .fb-send span{height:18px;}

.light-theme .run-overview .run-not-run rect { /*stroke: var(--graph-color-background); */ stroke: #444; }


/*******************************
 Main container
*******************************/
.analyze-container{font-size:10px;fill:#bbb;position:absolute;background-color:#343B43;z-index:100;top:0px;left:0px;height:100%;width:100%;color:#ddd;}   


/*******************************
 Main Navigation
******************************/

.analyze-container .menu{height:50px;color:#ccc;margin:10px 0px 0px 20px;}
.analyze-container .menu .item{display:inline-block;padding:4px 0;text-align:left;font-size:18px;margin:10px;text-shadow:0 -1px 1px rgba(0,0,0,.75);text-transform:capitalize;cursor:pointer;}
.analyze-container .menu .item.selected{border-bottom:2px solid #ffaa00; color:#fafafa;}
.analyze-container .menu .item:hover{color:#fafafa;}
.analyze-container .close-icon{cursor:pointer;position:absolute;top:12px; right:20px;font-size:30px;color:#e9e9e9;}
.analyze-container .close-icon:hover{color:#fff;}

/*******************************
 Tutorials
******************************/
.tutorials {position:absolute;top:22px;right:100px;cursor:pointer;padding:4px 6px;letter-spacing:.03em;font-size:1.1em;transition:0.5s;}
.tutorials a {text-decoration:none;color:#e6e6e6;}
.tutorials:hover a{color: #fafafa;}
.tutorials {border:1px solid #e1e1e1;border-radius:3px;padding:2px 5px;}
.tutorials:hover {border-color:#fafafa;}
/*.tutorials span {background-image:url('../images/dropdown-arrow15x20.png');height:13px;width:15px;display:inline-block;}*/


/*******************************
 Common Styles
*******************************/
/*-----------------------------
 structure
------------------------------*/
.analyze-container .graph{position:relative;}

/*-----------------------------
 chart headings
------------------------------*/
.analyze-container h3{position:relative;font-size:1.6em;color:#dedede;font-weight:bold;letter-spacing:0.03em;text-transform:capitalize;}
.analyze-container h3.right{margin-right:25px;text-align:right;text-transform:capitalize;}



/*-----------------------------
 chart styles
------------------------------*/
.analyze-container .axis path,
.analyze-container .axis line { fill: none; stroke: #666; shape-rendering: crispEdges;}
.analyze-container .x.axis path { stroke:#666; stroke-width: 1px; }
.analyze-container .x.axis .label-1 {font-size:1em;}
.analyze-container .x.axis .label-2 {font-size:0.85em;}
.analyze-container .y.axis path {stroke:#666;stroke-width: 1px;}

.analyze-container .brush .extent {fill-opacity: .15;shape-rendering: crispEdges;}

/*-----------------------------
 top informational section
------------------------------*/
.analyze-container .display-container { display:table; box-sizing:border-box; margin-top:1em; margin-bottom:1em; background-color: #39404A; color:#dedede; border-radius: 0px 8px 8px 0px; padding: 1em 2.5em; line-height: 1.75em; max-width:50%; }
.analyze-container .display-container .left-column,
.analyze-container .display-container .right-column {display: table-cell;}
.analyze-container .display-container .time-period { color: #dedede; font-size: 1.4em; letter-spacing: .03em; }
.analyze-container .display-container .time-period span { margin: 0 0.5em; }
.analyze-container .display-container .instructions {margin-top:4px;font-size:1.3em;}
.analyze-container .display-container .instructions b{font-size:1em;color:#eaeaea;}
.analyze-container .display-container .instructions .label{font-size:0.75em;padding-left:2px;}

.analyze-container .display-data-container{position:absolute;right:4em;top:0px;padding:1em;font-size:1.4em;}

/*-----------------------------
 data type selection icons
------------------------------*/
.analyze-container .data-type { background-image: url('../images/pro/training-band-filters163x82.png'); background-repeat: no-repeat; }
.analyze-container .data-type.pace { background-position: -19px -8px; height: 27px; width: 23px; }
.analyze-container .data-type.pace.selected { background-position: -19px -44px; }
.analyze-container .data-type.heart-rate { background-position: -70px -12px; height: 23px; width: 23px; }
.analyze-container .data-type.heart-rate.selected { background-position: -70px -48px; }
.analyze-container .data-type.grade { background-position: -120px -13px; height: 22px; width: 27px; }
.analyze-container .data-type.grade.selected { background-position: -120px -49px; }

/*-----------------------------
  help icon
------------------------------*/
.analyze-container .help { background: url('../images/sprites/settings-sprites60x35.png') no-repeat -30px -16px; height: 17px; opacity: .5; width: 17px; position: absolute;}
.analyze-container .help { top: -10px; right: -15px; }

/*-----------------------------
  general
------------------------------*/
.analyze-container .clickable{cursor:pointer;}
.analyze-container .mouse-trap{pointer-events: all; fill:none;}

.unselectable { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;-webkit-tap-highlight-color: rgba(0,0,0,0);}


/*-----------------------------
  focus circle
------------------------------*/
.workspace .focus circle {fill: #fff; cursor:pointer;}
.workspace .focus-overlay.hover-pointer{cursor:pointer;}
.workspace .focus-overlay { fill: none; pointer-events: all;}
.workspace .focus {z-index:999; pointer-events: none;}


/*-----------------------------
  run hover (all sections)
------------------------------*/
.workspace .run-hover{pointer-events:none; display:none;position:absolute;background-color:#fafafa;border-radius:3px;padding:4px 8px;color:#454545;margin-left:60px;margin-bottom:160px;}
.workspace .run-hover div.description {display:none;width:200px;padding-left:14px;border-left:1px solid #aaa;vertical-align:middle;}
.workspace .run-hover dl {display:inline-block;padding-right:14px;vertical-align:middle;}
.workspace .run-hover dl div{padding-bottom:0px;}
.workspace .run-hover dl div dt{display:inline-block;color:#666; line-height:17px;vertical-align:middle;font-size:1.2em;text-align:right;padding-right:5px;}
.workspace .run-hover dl div dd{display:inline-block;color:#333; line-height:17px;vertical-align:bottom;font-size:1.2em;color:#454545;}
.workspace .run-hover div.spi {display:none;}
.workspace .run-hover div.distance {display:none;}
.workspace .run-hover .label{padding-left:1px;font-size:10px;line-height:12px;vertical-align:bottom;color:#454545;}

.workspace .run-hover.expand div.description  { display: inline-block; }
.workspace .run-hover.expand div.spi { display: inline-block; }
.workspace .run-hover.expand div.distance { display: inline-block; }
.workspace .run-hover.expand dl { width: 150px; }
.workspace .run-hover.expand dl dt{ width: 60px; }
.workspace .run-hover.expand dl dd{ width: 60px; }

/*---------------------------------------------------------------------------------------
  Filter our pauses/treadmill runs on pace trends or pr progress
----------------------------------------------------------------------------------------*/
.workspace .filter-container { position: absolute; bottom: 5px; right:0px; padding:8px 30px 8px 8px; z-index:1;background-color: #434B56; border-radius:10px 0px 0px 10px;}
.workspace .filter-container p { display: inline-block; margin-right: 10px; vertical-align:middle;font-size:1.1em;}
.workspace .filter-container .choice { display:inline-block; vertical-align:middle; color: #f1f1f1; background-color: #434B56; border-radius: 3px; margin:0px 4px 0px 0px; font-size:1.2em; }
.workspace .filter-container .choice.runs-with-pauses { padding:7px 8px;width:12px;}
.workspace .filter-container .choice.treadmill-runs { padding:7px 8px 6px 3px; width:18px;height:15px;}
.workspace .filter-container .choice.races{padding:0px 0px 4px 4px; margin-left:8px; width: 16px; height: 17px;}
.workspace .filter-container .pause {background-image:url('../images/pause10x14.png');width:15px;height:14px;background-repeat:no-repeat;opacity:0.7;}
.workspace .filter-container .treadmill{ width: 25px; height: 17px; background-image:url('../images/treadmill-icon25x17.png');background-repeat:no-repeat;opacity:0.7;margin-top:-2px;}
.workspace .filter-container .race {background-image:url('../images/race16x17.png');height: 17px;width: 25px; background-repeat:no-repeat;opacity:0.6; margin-top:2px;}
.workspace .filter-container .choice:hover {opacity:1;cursor:pointer;}
.workspace .filter-container .choice.selected div{opacity:1;}
.workspace .filter-container .choice.selected:not(.races){ background-image: url('../images/cross26x26.png'); }

/*-----------------------------
  run view pop up
------------------------------*/
#shadow { margin-left: 4px; margin-top: 4px; opacity:0.6; border-radius:15px;}
#box.analyze { border: none; background-color:transparent; }
#box.analyze .inner-box { padding: 0px; overflow: visible; background-color: #297c93;border-radius:15px 0px 15px 15px; }
.run-view { color:#fff; padding:1.2em 1.2em 0.6em 1.2em; font-size: 20px; z-index:10;}
.run-view .close { position: absolute; right: 0px; top: 0px; margin-top:-20px;margin-right:-20px; font-size: 20px; font-weight: bold; color:#f1f1f1; height:30px; width:30px; line-height:30px; text-align:center; vertical-align:middle; background-color:#fff; color: #00ccff;border-radius:30px;}
.run-view .close:hover { cursor:pointer; }

.run-view h2 { border-bottom: 1px solid #fff; margin-bottom:5px;}
.run-view .label.clickable { background-color: #f1f1f1; color: #333; padding: 0.05em 0.4em; vertical-align:baseline;}
.run-view .label.clickable:hover { background-color: #fff; cursor:pointer; }
.run-view .conditions-container {text-transform:capitalize;}

.run-view svg { overflow: hidden; }
.run-view .top-container { display: flex; justify-content: space-between; }
.run-view .top-container .map-container { position:relative; width:210px; height:150px; }
.run-view.no-map .top-container .map-container { position: relative; width: 150px; height: 180px; }
.run-view .top-container .map-container polyline { fill:none; stroke: #fff; stroke-width:3px; }
.run-view .top-container .map-container .location-container { position: absolute; right: 0px; bottom: 0px; width:150px; display:flex; flex-flow:column; align-items:flex-end;}
.run-view.no-map .top-container .map-container .location-container {width:150px; }
.run-view .top-container .map-container .location { background-color: #fff; color: #00ccff; padding: 0.15em 0.25em; line-height: 1em; }
.run-view .top-container .map-container .location.one { font-size: 0.6em; }
.run-view .top-container .map-container .location.two { font-size: 1em; }

.run-view .top-container .overview-container { width:280px;  }
.run-view.no-map .top-container .overview-container { width: 505px; display:flex; justify-content:space-between;}
.run-view .top-container .overview-container .description { font-size: 0.6em; margin-bottom: 10px; line-height: 1.4; letter-spacing: .01em; margin-top: 1em; width: 290px; }
.run-view.no-map .top-container .overview-container .description { order:1; margin-top:0px; max-width:250px; font-size:0.8em; }
.run-view .top-container .overview-container .details-container { display: flex; justify-content: space-between; align-items: baseline; }
.run-view.no-map .top-container .overview-container .details-container { width: 200px; order: 2;  }
.run-view .top-container .overview-container .details-container .name { font-size: 0.6em; } 
.run-view .top-container .overview-container .details-container .value { display: inline-block; font-size: 2em; }
.run-view .top-container .overview-container .details-container .label { display: inline-block; font-size: 0.5em; margin-left:0.25em; }
.run-view .top-container .overview-container .details-container .distance { order:1;}
.run-view .top-container .overview-container .details-container .duration { order:2;}
.run-view .top-container .overview-container .details-container .distance .name,
.run-view .top-container .overview-container .details-container .duration .name {text-transform:capitalize;}

.run-view .top-container .date-container { width:210px;text-align:right;}
.run-view .top-container .date-container .season { font-size: 0.8em; text-transform:uppercase;}
.run-view .top-container .date-container .year { font-size: 1.2em; }
.run-view .top-container .date-container .date { font-size: 0.8em; min-width:80px; display:inline-block;border-top:1px solid #fff; margin-top:5px; padding-top:5px;}

/* Alternate Run-View */
.run-view.alternate { color: #FBFBF2; display: flex; flex-flow: column wrap; padding-bottom: 1.2em; }
.run-view.alternate h2 { border-bottom: 1px solid rgba(255, 255, 255, 0.3); color: #FBFBF2; letter-spacing: .01em; font-weight: bold; padding-bottom: 2px; }
.run-view.alternate .stat-container .name { border-right: 1px solid rgba(255, 255, 255, 0.3); }
.run-view.alternate .top-container { order: 1; }
.run-view.alternate .stat-container { order: 2; margin-top: 20px; }
.run-view.alternate .trailing-training-container { order: 3; margin-bottom: 0; margin-top: 20px; padding-top: 10px; border-top: 1px solid rgba(20, 20, 20, 0.2); border-bottom: 1px solid rgba(20, 20, 20, 0.2); }

.run-view.alternate .top-container .map-container .location { color: #384e63; }
.run-view.alternate .stat-container h2 { font-size: 0.7em; }

.run-view.alternate .trailing-training-container .explain { font-size: 0.7em; letter-spacing: .01em; }
.run-view.alternate .trailing-training-container .view-options div.selected { color: #415D77; }
.run-view.alternate .trailing-training-container .view-options div { font-size: 0.7em; border-radius: 3px; margin-left: 4px; }
.run-view.alternate .trailing-training-container .view-options div:hover { color: #415D77; }

.run-view .trailing-training-container .legend li {list-style:none; font-size:0.5em; color:#aaa; }

.trailing-training-container .run-container { margin: 0.5em 0; }
.trailing-training-container .arrow-box .multirun-container .run-count { font-size: 0.6em; }
.trailing-training-container .arrow-box .multirun-container { font-size: inherit; }


.trailing-training-container {  margin:20px -25px 30px -25px; background-color:rgba(0,0,0,0.05); padding:0px 25px 10px 25px;}
.trailing-training-container .menu-container { display: flex; justify-content: space-between; align-items:flex-end;}
.trailing-training-container .graph-container { margin: 0 -15px; padding: 0 15px; overflow:hidden; }
.trailing-training-container .explain { order:1; font-size: 0.6em; }
.trailing-training-container .view-options { order: 2; }
.trailing-training-container .view-options div { padding: 2px 6px; border: 0px solid #fff; color:#fff; display:inline-block; margin-left: 2px; font-size: 0.4em; }
.trailing-training-container .view-options div:hover { background-color:#fff; color:#00ccff; cursor:pointer; }
.trailing-training-container .view-options div.selected { background-color: #fff; color: #00ccff; }

.trailing-training-container .info-container { margin-top: 22px; }
.trailing-training-container .info-container .label-container { position: absolute; margin-top: -24px; margin-left: 0px; text-align: center; cursor: pointer; display: none; user-select: none; }
.trailing-training-container .info-container .label-container .label-data { display: inline-block; font-size: 0.6em; border-radius: 15px 15px 0px 0px; padding: 4px 15px 3px 15px; background-color: rgba(255,255,255,0.2); }
.trailing-training-container .info-container .label-container .label-data div div { display: inline-block; }
.trailing-training-container .info-container .label-container .label-data .data-container { display: inline-block; cursor: pointer; }
.trailing-training-container .info-container .label-container .label-data .data-container .name { display: inline-block; font-size: 0.6em; }
.trailing-training-container .info-container .label-container .label-data .data-container .value { display: inline-block; font-size: 1em; font-weight: bold; }
.trailing-training-container .info-container .label-container .label-data .data-container .label { display: inline-block; font-size: 0.8em; margin-left: 0.25em; color: #f1f1f1; }

.trailing-training-container .info-container .label-container .label-data .triangle { display: inline-block; vertical-align: text-bottom; margin: 2px 0px 2px 4px; width: 0px; height: 0px; border-width: 5px 0px 5px 8.7px; border-color: transparent transparent transparent #e1e1e1; border-style: solid; }
.trailing-training-container .info-container .label-container .label-data .triangle:hover { border-color: transparent transparent transparent #ffffff; cursor: pointer; }

.run-view .trailing-training-container .legend { font-size: 0.65em; text-align: left; margin-bottom: -50px; margin-top: 40px; }
.run-view .trailing-training-container .legend li { display: inline-block; list-style: none; }
.run-view .trailing-training-container .legend div { display: inline-block; text-transform: lowercase; padding: 0 10px 0 2px; }
.run-view .trailing-training-container .legend svg { display: inline-block; vertical-align: top; }
.run-view .trailing-training-container .legend circle { fill: #fff; opacity: 0.5; line-height: 10 }
.run-view .trailing-training-container .legend circle.reference-run { fill: #000; }
.run-view .trailing-training-container .legend rect { fill: #fff; }

.trailing-training-container .arrow-box { z-index: 10; }
.trailing-training-container .arrow-box.right { position: absolute; width: 105px; top: 4px; margin-top: -18px; padding: 4px 6px; background: #fff; color: #999; }
.trailing-training-container .arrow-box.right:after { left:100%; top:50%; border:solid transparent; content:" "; height:0; width:0px; position:absolute; pointer-events:none; border-color:rgba(255, 255, 255, 0); border-left-color: #ffffff; border-width:5px; margin-top:-5px; }
.trailing-training-container .arrow-box.top:after {top:100%; left:50%; border:solid transparent; content:" "; height:0; width:0px; position:absolute; pointer-events:none; border-color:rgba(255, 255, 255, 0); border-top-color: #ffffff; border-width:5px;	margin-left:-5px;}
.trailing-training-container .arrow-box.bottom {  position:absolute; width:180px; font-size:24px; margin-right:-90px; top:22px; padding:8px 10px; background: #f1fcff; color:#5a5a5a; }
.trailing-training-container .arrow-box.bottom:after {bottom:100%; left:30px; border:solid transparent; content:" "; height:0; width:0px; position:absolute; pointer-events:none; border-color:rgba(255, 255, 255, 0); border-bottom-color: #f1fcff; border-width:5px;	margin-left:-5px;}

.trailing-training-container .arrow-box > div { line-height: 0.6em; }
.trailing-training-container .arrow-box .date-container { font-size: 0.6em; margin-bottom: 4px; margin-top: 0px; display: flex; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,0.2); }
.trailing-training-container .arrow-box .multirun-container { font-size: 0.8em; }
.trailing-training-container .arrow-box .multirun-container .run-count { color: #aaa; font-size: 0.4em; }
.trailing-training-container .arrow-box .name { display: inline-block; width: 44px; text-align: right; font-size:0.55em; }
.trailing-training-container .arrow-box .run-container .value { display: inline-block; width: 44px; font-size:0.6em; color:#666; text-align:right;}
.trailing-training-container .arrow-box .run-container .label { display: inline-block; font-size: 0.4em; margin-left: 0.2em; }


.trailing-training-container .graph-time-container { position:relative; margin-left: -10px; margin-top:-5px;}
.trailing-training-container .graph-time-container rect { fill:#b5d0d8; fill-opacity:1.0; stroke:#333;stroke-opacity:0.3;stroke-dasharray:0,7,7.666,14.666; cursor:pointer;}
.trailing-training-container .graph-time-container rect.selected { fill:#fff; }
.trailing-training-container .graph-time-container rect.deselected { fill:#327d92; stroke: none;}
.trailing-training-container .graph-time-container rect.race-day { fill:#222; }
.trailing-training-container .graph-time-container rect.highlighted { fill:#fff; stroke:#000; stroke-width:0.5px; pointer-events:none;}
.trailing-training-container .graph-time-container .x.axis path { stroke: #fff; stroke-width:0px;fill:none;}
.trailing-training-container .graph-time-container .x.axis line { stroke: #fff; }
.trailing-training-container .graph-time-container .x.axis text {font-size:0.5em;fill:#ccc; text-anchor: middle;text-transform:lowercase;}
.trailing-training-container .graph-time-container .x.axis .tick:last-of-type text {text-anchor: start; }
.trailing-training-container .graph-time-container .x.axis .tick:first-of-type text {text-anchor: end; }



.trailing-training-container .graph-value-container { position:relative; margin-left: -10px; }
.trailing-training-container .graph-value-container rect.average { fill: #fff; opacity:0.8;}
.trailing-training-container .graph-value-container text.average { text-anchor: start; font-size: 0.6em; fill: #f1f1f1; }
.trailing-training-container .graph-value-container text.average tspan { font-size: 0.6em; } 
.trailing-training-container .graph-value-container circle {fill:#fff; opacity:0.2; }
.trailing-training-container .graph-value-container circle.reference-run {fill:#000; opacity:0.75; }
.trailing-training-container .graph-value-container circle.selected { fill:#fff; opacity:0.6; }
.trailing-training-container .graph-value-container circle.deselected:not(.reference-run) { fill:#327d92; opacity:1; }
.trailing-training-container .graph-value-container circle.highlighted { opacity:1.0; stroke: #075166; pointer-events:none;}
.trailing-training-container .graph-value-container .x.axis path { stroke: #fff; stroke-width:0px;fill:none;}
.trailing-training-container .graph-value-container .x.axis line { stroke: #fff; }
.trailing-training-container .graph-value-container .x.axis text{font-size:0.6em;fill:#ddd; text-anchor: middle;}
.trailing-training-container .graph-value-container .x.axis .tick:last-of-type text {text-anchor: end; }
.trailing-training-container .graph-value-container .x.axis .tick:first-of-type text {text-anchor: start; }

.trailing-training-container .graph-value-container .x.axis text tspan { font-size: 0.7em; fill:#aaa; }
.trailing-training-container .graph-value-container .x.axis text.selected tspan{font-size:0.8em; fill:#f1f1f1; text-transform:lowercase; }
.trailing-training-container .graph-value-container .x.axis text.selected { font-size: 14px; fill: #fff; }
.trailing-training-container .graph-value-container .x.axis text.deselected { fill-opacity: 0.6; }
.trailing-training-container .graph-value-container .x.axis text.hidden { fill: none; }

.trailing-training-container .graph-value-container .brush .extent { fill: #fff; fill-opacity:0.3; }
.trailing-training-container .graph-value-container .brush .resize { stroke: #fff; opacity: 1; } 


.run-view .stat-container { display: flex; justify-content: space-between; }

.run-view .stat-container > div { min-width: 210px; }
.run-view .stat-container h2 { font-size: 0.5em; }
.run-view .stat-container .name { width: 80px; font-size: 0.6em; display:inline-block; border-right:1px solid #fff; line-height:3em; vertical-align:middle; }
.run-view .stat-container .value { display:inline-block; font-size: 1em; vertical-align:middle; margin-left: 20px; width:50px; text-align: right; }
.run-view .stat-container .label { display:inline-block; font-size:0.5em; margin-left: 0.25em; }

.run-view .button-container { text-align: right; order:3; }
.run-view .button-container .button { display: inline-block; margin-top:30px; padding: 5px 30px; text-align:center; background-color: #f1f1f1; color: #444; text-transform: uppercase; font-size: 0.8em; cursor: pointer; font-weight:bold;}
.run-view .button-container .button { text-shadow: none; border-radius: 0px; box-shadow: none; border: none;}
.run-view .button-container .button:hover { background-color: #fff; }

.trailing-training-container .run-container span.name { text-transform: capitalize; }



/*******************************
 Training Bands
*******************************/

/*-----------------------------
  structure
------------------------------*/
.workspace.training-bands .area-graph-container {margin: 0;}
.workspace.training-bands .bar-graph-container {margin: 0;}
.workspace.training-bands .brush-graph-container {margin:0;}

/*-----------------------------
  top informational section
------------------------------*/

/*-----------------------------
  area chart 
------------------------------*/
.workspace.training-bands path.plumb-line { stroke: #ccc; stroke-width: 0.5px; opacity: 0.6; }
.workspace.training-bands .y.axis text {text-transform:capitalize;}

/*-----------------------------
  filter section 
------------------------------*/
.workspace.training-bands .configure-container{position:relative;padding:0 4em;}
.workspace.training-bands .configure.chart-type{display:inline-block;float:right;width:164px;margin-top:15px;}
.workspace.training-bands .configure.chart-type .toggle{display:inline-block;padding:4px 10px;font-size:18px;margin:2px 5px;}

.workspace.training-bands .configure.chart-normalize { display:inline-block;position:relative;left:0px; width:180px; color: #ccc; font-size: 12px; font-weight: bold; height: 50px; letter-spacing: .02em; }
.workspace.training-bands .configure.chart-normalize .toggle { float: left; margin-right: 4px; margin-top: 15px; padding: 4px 10px; }
.workspace.training-bands .configure.chart-normalize .toggle.selected {background-color: #434B56; border-radius: 3px;}
.workspace.training-bands .configure.chart-normalize .help { right: 0; top: 6px; }
.workspace.training-bands .configure .toggle{cursor:pointer;}

.workspace.training-bands .configure .toggle.duration {text-transform:capitalize;}

/*-----------------------------
  bar graph
------------------------------*/
.workspace.training-bands .bar{opacity:0.85}
.workspace.training-bands .bar.deselected{opacity:0.5}
.workspace.training-bands .bar.selected{opacity:1}


/*******************************
 Pace trends
*******************************/

/*-----------------------------
  structure
------------------------------*/
.workspace.pace-trends {position:relative;}

/*-----------------------------
  top informational section
------------------------------*/
.workspace.pace-trends .time-period{display:inline-block;}
.workspace.pace-trends .display-container .change-container { font-size: 1em; float: right; }
.workspace.pace-trends .change-container .pace-delta span { background-color:#555; padding:2px 5px;color:#fafafa;cursor:pointer;}
.workspace.pace-trends .change-container .pace-delta span:hover { background-color: #777; }

/*-----------------------------
  trend graph
------------------------------*/
.workspace.pace-trends path.interpolated-line {fill:none;stroke-width:1px;stroke:#999;opacity:0.5}
.workspace.pace-trends path.plumb-line{fill:none;stroke-width:1.5px;stroke:#fff;opacity:0.25}

.workspace.pace-trends path.trend-line{fill:none;stroke-width:50px;stroke:#eee;opacity:0.2}
.workspace.pace-trends circle.is-race.best { stroke-width:2px;stroke:#ffcc00; fill:transparent; }
.workspace.pace-trends circle.is-race.not-best { stroke-width:2px;stroke:#fff; fill:transparent; }
.workspace.pace-trends circle.is-race.very-best { stroke-width:2px;stroke:#ffff55; fill:transparent; }
.workspace.pace-trends circle.very-best{fill:#ffff55;}
.workspace.pace-trends circle.best{fill:#ffcc00;}
.workspace.pace-trends circle.not-best{fill:#fff;opacity:0.4;}

.workspace.pace-trends .legend { left: 0px; padding-left:60px; }
.workspace.pace-trends .legend li { display: inline-block; }
.workspace.pace-trends .legend li div{ display: inline-block; margin-left:5px;margin-right:20px;}

.workspace.pace-trends .adjust-container {position:absolute;right:400px;top:25px;}
.workspace.pace-trends .adjust { background-image: url('../images/pro/training-band-filters163x82.png'); background-repeat: no-repeat; }
.workspace.pace-trends .adjust.grade          { background-position: -120px -13px; height: 22px; width: 27px; cursor:pointer;}
.workspace.pace-trends .adjust.grade.selected { background-position: -120px -49px; }


.workspace.pace-trends .run-hover {font-size:12px;}
.workspace.pace-trends .distance, .workspace.pace-trends .pace dt {text-transform:capitalize;}


/*******************************
 Goals
*******************************/
/*-----------------------------
  structure
------------------------------*/
.workspace.goals {position:relative;}
.workspace.goals .display-data-container { position:relative; padding:1em 0em; }

/*-----------------------------
  No goal set notice
------------------------------*/
.workspace.goals .notice { position:absolute;top:0;left:0%; padding:0em 20em; background-color:#343B43; font-size:0.7em; margin-left:-25em; text-align: left;  }
.workspace.goals .notice li { font-size: 1.8em; color:#f1f1f1;margin-top:1em;}
.workspace.goals .notice li span { font-size: 1.4em; display:block;}
.workspace.goals .sub-notice { margin-top:2em;color: #9999; font-size: 2em; font-style: italic; }
.workspace.goals .sub-sub-notice { margin-top: 1.5em; color: #777; font-size: 1em; }

/*-----------------------------
  goals navigation section
------------------------------*/
/* goal nav goes along the left for landscape orientation */

.workspace.goals .goal-nav-container.landscape { top:68px; margin: 0.5em 1em 0.5em 0; padding: 1em; position:absolute; overflow:hidden;}
.workspace.goals .goal-nav-container.landscape  .goals-container { display: block; margin:0.5em;padding:1em 0;}
.workspace.goals .goal-nav-container.landscape  .goals-container         h3 { display:inline-block; font-size: 1.4em; margin:0 0 0.4em 0;color:#e8e8e8}
.workspace.goals .goal-nav-container.landscape  .goals-container.expired h3:hover { color: #fff; }
.workspace.goals .goal-nav-container.landscape  .goals-container.expired { width: 100%; }
.workspace.goals .goal-nav-container.landscape  .goals-container.expired          .expand { display: inline-block; font-weight: bold; font-size: 1.4em; padding: 0.1em 0.2em; -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg);  -webkit-transition: 0.1s linear; -moz-transition: 0.1s linear; -o-transition: 0.1s linear; transition: 0.1s linear; }
.workspace.goals .goal-nav-container.landscape  .goals-container.expired.expanded .expand{ -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
.workspace.goals .goal-nav-container.landscape  .goals-container.expired          .goals { display: none; }
.workspace.goals .goal-nav-container.landscape  .goals-container.expired.expanded .goals { display: block; }
.workspace.goals .goal-nav-container.landscape  .goals-container.expired          .goals .years-container { font-size: 1.4em; }
.workspace.goals .goal-nav-container.landscape  .goals-container.expired          .goals .years-container div { display: inline-block; margin: 0 0.8em 0 0; color:#888;}
.workspace.goals .goal-nav-container.landscape  .goals-container.expired          .goals .years-container div:hover{color: #f1f1f1; }
.workspace.goals .goal-nav-container.landscape  .goals-container.expired          .goals .years-container div.active { color: #f1f1f1; }
.workspace.goals .goal-nav-container.landscape  .goals-container         .goal{ position:relative; width:100%; cursor:pointer; text-align:right; display:inline-block; padding: 0.5em 1em; box-sizing:border-box; margin-top: 0.6em; font-size: 1.15em; color: #cdcdcd; }
.workspace.goals .goal-nav-container.landscape  .goals-container         .goal .percent-complete { position: absolute; left:0; margin-top: 0.42em; opacity: 0.85; font-size: 1.5em; color: #fafafa; width:50%;text-align:center;}
.workspace.goals .goal-nav-container.landscape  .goals-container         .goal .sparkline svg { height:2.5em;width:100%;}
.workspace.goals .goal-nav-container.landscape  .goals-container         .goal > div { display: inline-block; }
.workspace.goals .goal-nav-container.landscape  .goals-container.active  .goal > div { width: 50%; }

.workspace.goals .goal-nav-container.landscape  .goals-container .goal:hover { color:#f1f1f1;}
.workspace.goals .goal-nav-container.landscape  .goals-container .goal.active { background-color: #424b56; color:#f6f6f6; }
.workspace.goals .goal-nav-container.landscape  .goals-container.expired { font-size:0.8em;}
.workspace.goals .goal-nav-container.landscape  .goals-container.expired:hover { color: #fff; cursor:pointer;}
.workspace.goals .goal-nav-container.landscape  .goals-container.expired .goal{ color: #999; width:50%; white-space: nowrap;}
.workspace.goals .goal-nav-container.landscape  .goals-container .goal .indicator { height: 100%; width: 1em; display:inline-block;}
.workspace.goals .goal-nav-container.landscape  .goals-container .goal         .bar-container { position:relative; height: 2.4em; width:2px; margin-left:0.6em;background-color: #555 }
.workspace.goals .goal-nav-container.landscape  .goals-container .goal         .bar { position:absolute; bottom:0px;left:0px;display: inline-block; width:2px;background-color: #eee; }
.workspace.goals .goal-nav-container.landscape  .goals-container .goal.success .bar {  }
.workspace.goals .goal-nav-container.landscape  .goals-container .goal.failure .bar { background-color:#a03434; }
.workspace.goals .goal-nav-container.landscape  .goals-container .year { display: inline-block; font-size:1.2em;}
.workspace.goals .goal-nav-container.landscape  .goals-container .month { font-size:1.2em;display: inline-block; margin:0 0.25em; }

/* goal nav goes along the top for portrait orientation (not currently used)*/
.workspace.goals .goal-nav-container.portrait { margin-top: 6em; }
.workspace.goals .goal-nav-container.portrait   .goals-container { margin-left: 3.5em; vertical-align:top; }
.workspace.goals .goal-nav-container.portrait   .goals-container h3 { display:inline-block; font-size: 1.2em; margin:0 0 0.4em 0; color:#e8e8e8;}
.workspace.goals .goal-nav-container.portrait   .goals-container.active { width: 20%; display:inline-block;}
.workspace.goals .goal-nav-container.portrait   .goals-container.expired { width: 70%; display:inline-block;}
.workspace.goals .goal-nav-container.portrait   .goals-container.expired          .expand { display: inline-block; font-weight: bold; font-size: 1.4em; padding: 0.1em 0.2em; -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg);  -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; }
.workspace.goals .goal-nav-container.portrait   .goals-container.expired.expanded .expand { -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
.workspace.goals .goal-nav-container.portrait   .goals-container.expired          .goals { display: none; }
.workspace.goals .goal-nav-container.portrait   .goals-container.expired.expanded .goals { display: block; }

.workspace.goals .goal-nav-container.portrait   .goals-container .goals { display: block; }
.workspace.goals .goal-nav-container.portrait   .goals-container         .goal { display:inline-block; box-sizing:border-box; width:50%; vertical-align:top; font-size: 1.2em; color: #cdcdcd; text-align:left; cursor:pointer; }
.workspace.goals .goal-nav-container.portrait   .goals-container.active  .goal { width: 50%; }
.workspace.goals .goal-nav-container.portrait   .goals-container.expired .goal { width: 10%; }
.workspace.goals .goal-nav-container.portrait   .goals-container .goal-text { display: none;}
.workspace.goals .goal-nav-container.portrait   .goals-container .year-goal .year { font-size: 1.4em; }
.workspace.goals .goal-nav-container.portrait   .goals-container .year { display: block; font-size:1.2em;}
.workspace.goals .goal-nav-container.portrait   .goals-container .month { display: inline-block; font-size:1.2em;}


/*-----------------------------
  trend graph
------------------------------*/
.workspace.goals .display-data-container div.heading { margin-top:20px;display:table;width:37em;}
.workspace.goals .display-data-container .goal-text { display: table-cell; vertical-align:top; margin-left:20px;padding-left:20px;border-left:2px solid #666;}
.workspace.goals .display-data-container hgroup { display:table-cell;width:14em;}
.workspace.goals .display-data-container h3 { text-align: left;  }
.workspace.goals .display-data-container h4 { text-align: left;  }
.workspace.goals path.spark-line{fill:none;stroke-width:1px;stroke:#999;opacity:1}
.workspace.goals path.goal-line{fill:none;stroke-width:2px;stroke:#ccc;opacity:1}
.workspace.goals path.trend-line{fill:none;stroke-width:2px;stroke:#ff6600;opacity:1}
.workspace.goals text.per-day tspan.unit{ font-size: 0.8em; }
.workspace.goals path.goal-difference-line{fill:none;stroke-width:1px;}
.workspace.goals path.plumb-line{fill:none;stroke-width:0.5px;stroke:#777;opacity:0.5}
.workspace.goals text.plumb-line-label { font-size:0.8em;fill: #999; }

/*-----------------------------
  goals graph hover
------------------------------*/
.workspace.goals .focus circle {fill: #fff; cursor:pointer;}
.workspace.goals .focus-overlay.hover-pointer{cursor:pointer;}
.workspace.goals .focus-overlay { fill: none; pointer-events: all;}
.workspace.goals .focus {z-index:100;}

.workspace.goals .event-capture { }

.workspace.goals .run-hover{pointer-events:none;width:260px;font-size:1.1em;display:none;position:absolute;background-color:#fafafa;border-radius:0.2em;padding:0.3em 0.5em;color:#454545;margin-left:8em;}
.workspace.goals .run-hover .date {font-size: 1em;margin-bottom:0.2em;font-weight:bold;}
.workspace.goals .run-hover .label {display:inline-block; font-size: 0.8em; width:2.5em;text-align:left;color:#666;}
.workspace.goals .run-hover .value {display:inline-block; font-size: 0.8em; width:7em;text-align:right;padding-left:0.2em;color:#444;}
.workspace.goals .run-hover .offset { border-top: 1px solid #888; padding-top:0.35em;margin-top:0.15em;white-space:nowrap;}
.workspace.goals .run-hover .offset .label { width: 2.5em; }
/*.workspace.goals .run-hover .offset .value { color: #222; font-size:1.1em; width:5em;}*/
.workspace.goals .run-hover .offset .value .unit { font-size: 0.6em; }

.workspace.goals .run-hover .unit{padding-left:1px;font-size:0.8em;}
.workspace.goals .run-hover .must-run { font-size: 0.8em; color:#666;margin-bottom:1em;}
.workspace.goals .run-hover .must-run .unit { font-size: 1.0em; }
.workspace.goals .run-hover .must-run b { color: #333; font-weight:bold;}
.workspace.goals .run-hover .week { color:#454545; text-align:right; font-size: 1.1em; display:block; margin-top:0.4em;float:right;}
.workspace.goals .run-hover .week .unit { font-size: 0.65em; color:#666; }
.workspace.goals .run-hover .day { color: #454545; text-align:right; font-size: 1.1em; display:block; margin-top:0.4em;float:left;}
.workspace.goals .run-hover .day .unit { font-size: 0.65em; color:#666;}


/*-----------------------------
  x-axis and blocks
------------------------------*/
.analyze-container .workspace.goals .x.axis.labeled{font-size:0.8em;opacity: 1;stroke: none;}
.analyze-container .workspace.goals .x.axis.days {font-size:0.8em;fill: #999;text-transform: uppercase;stroke: #ccc;}
.analyze-container .workspace.goals .x.axis.days text{font-size:0.7em;stroke: none;fill:#e1e1e1; text-transform: uppercase;-webkit-font-smoothing: antialiased;}

.analyze-container .workspace.goals .x.axis .month { font-size: 0.7em; }
.analyze-container .workspace.goals .clickable { cursor: pointer; }
.analyze-container .workspace.goals .block-label .distance { font-size: 0.9em; }
.analyze-container .workspace.goals .block-label .unit{ font-size: 0.7em; margin-left:2px;}


/*******************************
 Run List
*******************************/
.analyze-container .workspace.list .brush-graph-container{position:absolute;bottom:0px;}

.analyze-container .workspace.list .table-container { position:absolute;left:0px;}
.analyze-container .workspace.list .table-container .nano-content { margin-left: 32px; }
.analyze-container .workspace.list .stats-container { position: absolute; right: 0px; }

.analyze-container .workspace.list .nano > .nano-content { top: 0px; outline:none; }

.analyze-container .workspace.list .table-container .headings { margin-left: 32px;}
.analyze-container .workspace.list .table-container .headings > div { cursor: pointer; display: inline-block; border-bottom: 1px solid #888; font-size: 1.2em; height:20px;}
.analyze-container .workspace.list .table-container .headings > div.active { color: #ffcc00; }
.analyze-container .workspace.list .table-container .headings > div.color { background-color: transparent; }
.analyze-container .workspace.list .data-table.runs .row { border-bottom: 1px solid #555; font-size: 1.2em; vertical-align: bottom; }
.analyze-container .workspace.list .data-table.runs .row:hover {background-color:#39404A;cursor:pointer;}
.analyze-container .workspace.list .data-table.runs .row > div { display: inline-block;line-height: 1.8em; }

.analyze-container .workspace.list  .focus-overlay {pointer-events: none; margin-left:30px; position:absolute;width:200px;background-color:#f1f1f1;color:#333;padding:10px 4px;display:none;}

.analyze-container .workspace.list .color { width: 2px; margin-right:8px;}
.analyze-container .workspace.list .color.days-30{background-color: #ffffff; }
.analyze-container .workspace.list .color.days-60{background-color: #ffcc00; }
.analyze-container .workspace.list .color.days-90{background-color: #aa6600; }
/*
.analyze-container .workspace.list .start-date { padding-left:35px; width: 120px; }
.analyze-container .workspace.list .pace { width: 80px; }
.analyze-container .workspace.list .distance { width: 80px; }
.analyze-container .workspace.list .spi { width: 80px; }
.analyze-container .workspace.list .hill-difficulty { width: 65px; }
.analyze-container .workspace.list .time { width: 95px; }
.analyze-container .workspace.list .pace-variability { width: 65px; }
*/
.analyze-container .workspace.list table { table-layout: fixed; }
.analyze-container .workspace.list table.runs th { padding: 2px 6px; font-size: 1.2em; width:60px; }

.analyze-container .workspace.list table.runs td { border-bottom: 1px solid #555; overflow:hidden; }
.analyze-container .workspace.list table.runs th { border-bottom: 1px solid #888; }

.analyze-container .workspace.list table.runs td.color { background-color: #ffcc00; }
.analyze-container .workspace.list table.runs td span { display:inline-block; line-height:1.8em;vertical-align:bottom; font-size: 1.2em; }


.analyze-container .workspace.list .stats-container .container { display: inline-block; width:200px;margin-bottom:4em;margin-right:50px;}
.analyze-container .workspace.list .stats-container .container h3 { border-bottom: 1px solid #666; padding-bottom: 1px; margin-bottom:4px;}
.analyze-container .workspace.list .stats-container .container .stat { font-size: 4em; }
.analyze-container .workspace.list .stats-container .container .label { font-size: 1.5em; }

.analyze-container .workspace.list .container.locations .country { position:relative; height:0.9em; }
.analyze-container .workspace.list .container.locations .country .label { position:absolute; top:5px; left:0px; display:inline-block; font-size:0.35em; }
.analyze-container .workspace.list .container.locations .country .value { position:absolute; right:0px; display:inline-block; font-size:0.45em; }
.analyze-container .workspace.list .container.locations .country .unit { font-size: 11px; color: #999;}
.analyze-container .workspace.list .container.locations .country .bar { position:absolute;top:22px; background-color: #777; width:100%; }
.analyze-container .workspace.list .container.locations .country .bar .progress { background-color: #ffcc00; height: 5px; }

.analyze-container .workspace.list .time-view-container { text-align: right; margin-right: 40px; }
.analyze-container .workspace.list .time-view-container span { font-size: 1.2em; color: #aaa; }
.analyze-container .workspace.list .time-view-container .time-view { cursor:pointer; display: inline-block; font-size: 1.2em; margin:2px 5px; border-bottom: 1px solid transparent; color: #bbb;}
.analyze-container .workspace.list .time-view-container .time-view.active { border-color: #ddd; color: #ddd;}





/*******************************
 Run Map
*******************************/

.analyze-container .workspace.run-map {position:relative;}
.analyze-container .workspace.run-map .map-container { position: absolute; left: 0px; }
.analyze-container .workspace.run-map .stats-container { position:absolute; right:0px; padding:1.5em;}

.analyze-container .workspace.run-map .map-container .map{ width:100%;height:100%; }

.analyze-container .workspace.run-map .data-types-container{ display:block; margin-bottom:2em;}
.analyze-container .workspace.run-map .data-types-container .label { display:inline-block; color: #aaa; font-size: 0.8em; margin:2px 4px; padding:2px 6px; border: 1px solid #888;cursor:pointer;}
.analyze-container .workspace.run-map .data-types-container .label.selected { border: 1px solid #fafafa; color:#fafafa; }

.analyze-container .workspace.run-map .locations-container{ display:block; }
.analyze-container .workspace.run-map .locations-container h3 { border-bottom: 1px solid #666; padding-bottom: 1px; margin-bottom:4px;}
.analyze-container .workspace.run-map .locations-container .stat { font-size: 4em; }
.analyze-container .workspace.run-map .locations-container .label { font-size: 1.5em; }

.analyze-container .workspace.run-map .locations-container .country { position:relative; height:2.7em; }
.analyze-container .workspace.run-map .locations-container .country .label { position:absolute; top:5px; left:0px; display:inline-block; font-size:1em; }
.analyze-container .workspace.run-map .locations-container .country .value { position:absolute; right:0px; display:inline-block; font-size:1.4em; }
.analyze-container .workspace.run-map .locations-container .country .unit { font-size: 11px; color: #999;}
.analyze-container .workspace.run-map .locations-container .country .bar { position:absolute;top:22px; background-color: #777; width:100%; }
.analyze-container .workspace.run-map .locations-container .country .bar .progress { background-color: #ffcc00; height: 5px; }



/*******************************
 PR Progress
*******************************/

/*-----------------------------
  structure
------------------------------*/
.workspace.pr-progress {position:relative;}

/*-----------------------------
  top informational section
------------------------------*/
.workspace.pr-progress .time-period{display:inline-block;}
.workspace.pr-progress .display-container .change-container { font-size: 1em; float: right; }

.workspace.pr-progress .configure-container{ position:relative;padding:0 4em; }
.workspace.pr-progress .configure.spi-speed { display:inline-block;position:relative;left:0px; width:180px; color: #ccc; font-size: 12px; font-weight: bold; height: 50px; letter-spacing: .02em; }
.workspace.pr-progress .configure.spi-speed .toggle { float: left; margin-right: 4px; margin-top: 15px; padding: 4px 10px; }
.workspace.pr-progress .configure.spi-speed .toggle.selected {background-color: #434B56; border-radius: 3px;}

.workspace.pr-progress .compare-data-container { position: absolute; right: 20px; }
.workspace.pr-progress .compare-data-container h3 { position:absolute; top:0px;}
.workspace.pr-progress .compare-data-container h4 { position:absolute; top:-30px;font-size:2em;}
.workspace.pr-progress .compare-data-container h4 span { font-size: 0.6em; }
.workspace.pr-progress .compare-data-container .pr-container { display: inline-block; padding: 8px 16px;  }
.workspace.pr-progress .compare-data-container .pr-container.pr-all-time { background-color: #1A84A1; }
.workspace.pr-progress .compare-data-container .pr-container.pr-view { background-color: #999DA1; margin-left:10px; }

.workspace.pr-progress .control-container { position: absolute; top:-5px; right:20px; width:15em; z-index:1;}
.workspace.pr-progress .control-container > div.choice { margin: 0px 5px 10px 0px; }
.workspace.pr-progress .control-container .choice { text-align: center; display: inline-block; color: #f1f1f1; background-color: #525964; padding:5px 10px; font-size:1.4em; font-weight: bold;}
.workspace.pr-progress .control-container .choice:hover { cursor: pointer; color: #00ccff; }

.workspace.pr-progress .control-container .layer { position: absolute; top: 0px; right:0px; background-color: #434B56; width:270px; }
.workspace.pr-progress .control-container .layer .back{ position: absolute; display:inline-block; top: 5px; right:15px; font-size:1.25em; color:#f1f1f1; font-weight: bold; border-bottom: 1px solid #ccc;}
.workspace.pr-progress .control-container .layer .back:hover { cursor:pointer; color:#fff; border-bottom:1px solid #f1f1f1; }
.workspace.pr-progress .control-container .layer > div p { font-size: 1.3em; margin: 30px 20px 20px 20px; letter-spacing: .03em; line-height: 1.4;}
.workspace.pr-progress .control-container .layer > div p.note { font-size: 1em; margin-top: 20px;} 
.workspace.pr-progress .control-container .layer > div .choice {font-size: 1.2em;box-sizing:border-box;padding: 10px; text-transform: capitalize; display: block;}
.workspace.pr-progress .control-container .layer > div .show-prs .choice, .workspace.pr-progress .control-container .layer > div .show-projections .choice {margin: 0;background-color: #525964;border-radius: 0;border-right: 1px solid #434B56;}
.workspace.pr-progress .control-container .layer > div .show-prs .choice {padding: 14px 18px; width: 33.34%;white-space:nowrap;}
.workspace.pr-progress .control-container .layer > div .show-projections .choice {padding: 14px 20px;width:33.34%;white-space:nowrap;}
.workspace.pr-progress .control-container .layer > div .choice:nth-child(3) {border:none;}
.workspace.pr-progress .control-container .layer > div .choice.selected {background-color:#6f7680;}
.workspace.pr-progress .show-projections, .workspace.pr-progress .show-prs {display:flex;justify-content:space-between;}


.workspace.pr-progress .control-container .choice.disabled { color: #666; }
.workspace.pr-progress .control-container .choice:not(.disabled):hover { cursor: pointer; color: #00ccff; }



.workspace.pr-progress .pr-container dl {display:inline-block;padding-right:14px;vertical-align:middle;}
.workspace.pr-progress .pr-container dl div{padding-bottom:0px;}
.workspace.pr-progress .pr-container dl div dt{display:inline-block;color:#fff; line-height:17px;vertical-align:middle;font-size:1.2em;text-align:right;padding-right:5px;}
.workspace.pr-progress .pr-container dl div dd{display:inline-block;color:#f1f1f1; line-height:17px;vertical-align:bottom;font-size:1.2em;}
.workspace.pr-progress .pr-container .label{padding-left:1px;font-size:10px;line-height:12px;vertical-align:bottom;color:#f1f1f1;}

.workspace.pr-progress .pr-container dl { width: 150px; }
.workspace.pr-progress .pr-container dt { width: 80px; }
.workspace.pr-progress .pr-container dl dd { width: 60px; }

.workspace.pr-progress .pr-container div.description {display:none; }


/*-----------------------------
  trend graph
------------------------------*/
.workspace.pr-progress path.pr-line { fill:none;stroke-width:5px;stroke:#ffcc00;opacity:0.5; pointer-events:none; }
.workspace.pr-progress path.pr-line.projected { stroke-width:1px;stroke:#ffffff;opacity:0.8; pointer-events:none; }
.workspace.pr-progress path.pr-line.overall { stroke:#00ccff; pointer-events:none; }
.workspace.pr-progress path.pr-line.view { stroke:#ff3434; pointer-events:none; }
.workspace.pr-progress circle.run { opacity:0;pointer-events:none;}

.workspace.pr-progress circle.run.highlight.focus { fill: #ffcc00; stroke:#00ccff;stroke-width:3px;}
.workspace.pr-progress circle.run.is-pr-overall { opacity: 0.8 !important; pointer-events:all;cursor:pointer;}
.workspace.pr-progress circle.run.is-pr-overall.focus { stroke: #00ccff; stroke-width:5px; fill:#00ccff;}
.workspace.pr-progress circle.run.is-pr { opacity: 0.8; fill:#fff; stroke-width: 0px; pointer-events:all;cursor:pointer;}
.workspace.pr-progress circle.run.highlight { opacity: 0.2; stroke:#ddd; fill:#777;stroke-width:1px; }
.workspace.pr-progress circle.run.highlight.is-pr { opacity: 1 !important; fill:#fff; stroke-width:0px;}
.workspace.pr-progress circle.run.highlight.is-pr.focus { fill: #00ccff; }
.workspace.pr-progress circle.run.highlight.is-pr.selected { fill: #ffcc00; stroke-width:5px; stroke-opacity:0.3; stroke:#ffcc00;}
.workspace.pr-progress circle.focus.pr1 { opacity: 1; fill: #333; stroke:#00ccff;stroke-width:3px;pointer-events:none;}
.workspace.pr-progress circle.focus.pr2 { opacity: 1;fill: #333; stroke:#fff;stroke-width:3px;pointer-events:none;}

.workspace.pr-progress circle.recent { stroke:#fff !important; stroke-opacity:0.7 !important;}
.workspace.pr-progress circle.recent.is-pr { opacity: 1 !important; }
.workspace.pr-progress circle.past { fill: #ff3434 !important; fill-opacity:0.5; stroke-opacity:0;}
.workspace.pr-progress circle.prediction { opacity: 0.0; fill: #ffcc00; stroke: #ffcc00; stroke-opacity:0.0; stroke-width:10px;}
.workspace.pr-progress circle.prediction.hover { stroke-opacity: 0.6; }
.workspace.pr-progress circle.prediction.new-pr.best.hover { stroke-opacity: 0.8; }
.workspace.pr-progress circle.prediction.new-pr.not-best.hover { stroke-opacity: 0.8; }
.workspace.pr-progress circle.prediction.new-pr { }
.workspace.pr-progress circle.prediction.new-pr.best { stroke-opacity: 0.5; opacity: 1; fill: #00cc00; stroke: #00cc00; }
.workspace.pr-progress circle.prediction.new-pr.not-best { stroke-opacity: 0.4; opacity: 0.5; fill: #ff2222; stroke: #ff2222; }

.workspace.pr-progress circle.magic {fill:#ffcc00; fill-opacity:0; stroke:#ffcc00; stroke-width:2px;}

.workspace.pr-progress .x.axis.two .domain { display: none; }
.workspace.pr-progress .x.axis .tick line { stroke-opacity: 0.6; }

.workspace.pr-progress .legend { padding-left:60px; }
.workspace.pr-progress .legend li { display: inline-block; vertical-align:top;}
.workspace.pr-progress .legend li div{ display: inline-block; margin-left:5px;margin-right:20px;vertical-align:top;}
.workspace.pr-progress .legend rect.pr-all-time { fill: #00ccff; }
.workspace.pr-progress .legend rect.pr-view { fill: #ff3434; }
.workspace.pr-progress .legend circle.pr { fill: #f1f1f1; }
.workspace.pr-progress .legend circle.other { fill: #fff; fill-opacity:0.4; stroke-width:1px; stroke:#fff; stroke-opacity:0.9; }

.workspace.pr-progress .plumb-line { stroke: #fff; stroke-opacity: 0.8; stroke-width:0.5px; pointer-events:none; }
.workspace.pr-progress .plumb-explain { color: #f1f1f1; font-size: 1em; position:absolute;top:110px;pointer-events:none; }
.workspace.pr-progress .plumb-explain span { font-size: 0.6em; color: #e9e9e9; }
.workspace.pr-progress .display-container { max-width: none; }

/*-----------------------------
  stat graphs
------------------------------*/
.workspace.stat-graphs .stat-graph-container path.stat { stroke:#ffcc00; stroke-width:3px; fill: none; }
.workspace.stat-graphs .configure-container { position:absolute; right:20px; margin-top:-50px; z-index:1;font-size:1.2em;}
.workspace.stat-graphs .configure-container .stat-container { display:inline-block; vertical-align:top;}
.workspace.stat-graphs .configure-container .stat-container:hover .choice-container { visibility:visible; }
.workspace.stat-graphs .configure-container .trailing-container { display:inline-block; vertical-align:top; }
.workspace.stat-graphs .configure-container .trailing-container:hover .choice-container { visibility:visible; }
.workspace.stat-graphs .configure-container .selected-container .choice { background-color:rgba(255,255,255,0.2); margin-bottom:10px;}
.workspace.stat-graphs .configure-container .selected-container { }
.workspace.stat-graphs .configure-container .choice-container { visibility:hidden; background-color:#343b43;}
.workspace.stat-graphs .configure-container .choice { padding:5px 10px; margin:4px; text-transform:uppercase; background-color:rgba(255,255,255,0.1); cursor:pointer; text-transform:uppercase; border: 1px solid rgba(255,255,255,0.0);}
.workspace.stat-graphs .configure-container .choice:hover { border: 1px solid rgba(255,255,255,0.5); }

/*-----------------------------
  run info mouseovers
------------------------------*/

.workspace.pr-progress .run-hover dl {display:block;padding-right:0;}
.workspace.pr-progress .run-hover dl div.date, .workspace.pr-progress .run-hover dl div.pace, 
.workspace.pr-progress .run-hover dl div.distance {display:inline-block;padding:10px;}
.workspace.pr-progress .run-hover.expand dl dd, .workspace.pr-progress .run-hover.expand dl dt, .workspace.pr-progress .run-hover.expand dl {width:auto;}
.workspace.pr-progress .run-hover.expand dl dt {text-transform:capitalize;}
.workspace.pr-progress .run-hover.expand div.spi, .workspace.pr-progress .run-hover div.spi {display:none;}
/*.workspace.pr-progress .run-hover.expand.reference dl {width:335px;}*/
.workspace.pr-progress .run-hover div.description {padding:10px;border-left:none;width:335px;border-top: 1px solid #5C6672;}

.workspace.pr-progress .run-hover {background-color:#435362;border-radius:3px;padding:4px 8px;position:absolute;display:none; pointer-events: none;color:#ddd;margin-left:0;margin-bottom:0;border:1px solid #434B57;white-space:nowrap;z-index:2;}
.workspace.pr-progress .run-hover .choice { border: 1px solid #aaa; padding: 2px 4px; display: inline-block; margin-top:5px; float:right; clear:both; cursor:pointer;pointer-events:all;}
.workspace.pr-progress .run-hover .choice:hover { background-color:#eee; }
.workspace.pr-progress .run-hover .description { white-space: normal; font-size:1.1em;letter-spacing:.03em;line-height:1.4;}
.workspace.pr-progress .run-hover dl div dt{color:#858B93;vertical-align:initial;font-size:1em;font-weight:bold;display:inline-block;line-height:17px;text-align:right;padding-right:5px;}
.workspace.pr-progress .run-hover dl div dd{display:inline-block;line-height:17px;font-size:1.2em;color:#fff;font-size:1.2em;vertical-align:initial;}
.workspace.pr-progress .run-hover .label{padding-left:1px;font-size:0.6em;line-height:12px;vertical-align:initial;color:#ddd;}

.workspace.pr-progress .run-hover.reference { background-color: /*#393F47*/#435362; color: #dddddd; z-index:1; border:none;border-radius:0px;}
.workspace.pr-progress .run-hover.reference dl { display: block; }
.workspace.pr-progress .run-hover.reference h2 { margin: -5px -8px 5px -8px; font-weight: bold; padding: 10px 0px 10px 15px; font-size: 1.3em; color:#ffcc00;}
.workspace.pr-progress .run-hover.reference dt { color: #969ea9; vertical-align:initial; font-size:1em; font-weight:bold; text-transform:capitalize;}
.workspace.pr-progress .run-hover.reference dd { color: #fff; font-size:1.2em; vertical-align:initial;}
.workspace.pr-progress .run-hover.reference dd span.label { color: #f6f6f6; line-height: inherit; margin-left:1px; vertical-align:initial; font-size:0.6em;}

.workspace.pr-progress .run-hover.prediction { background-color: /*#434B57*/#435362; color: #f6f6f6; font-size:0.9em;padding:4px;}
.workspace.pr-progress .run-hover.prediction dl { width: 200px; padding:4px; vertical-align: top; display:inline-block;}
.workspace.pr-progress .run-hover.prediction dl h3 { font-size: 1.2em; border-bottom: 1px solid #5C6672; padding: 2px; margin: 2px 0px 4px 0px; }
.workspace.pr-progress .run-hover.prediction dl h3 { text-transform: none; }
.workspace.pr-progress .run-hover.prediction dl h3 span { text-transform:none; }
.workspace.pr-progress .run-hover.prediction dl.prediction h3 { color: #ffcc00;}
.workspace.pr-progress .run-hover.prediction dl.prediction h3 b { }
.workspace.pr-progress .run-hover.prediction dl.reference h3 { color: #00ccff;}
.workspace.pr-progress .run-hover.prediction dl div { padding: 2px; }
.workspace.pr-progress .run-hover.prediction dl div dt { width: 90px; color:#969ea9; text-transform:capitalize; }
.workspace.pr-progress .run-hover.prediction dl div dd { font-size:1.5em; line-height:normal; color:#fff; }
.workspace.pr-progress .run-hover.prediction dl div dd.improve { color: #00cc00; font-weight: bold; }
.workspace.pr-progress .run-hover.prediction dl div dd span { font-size: 0.7em; margin-left: 2px; color:#ddd; }

.workspace.pr-progress .run-hover.prediction.benchmark dl:first-of-type { border-right: 1px solid #5C6672; }
.run-by-run .calendar-container{display:inline-block;order:2;}
.run-by-run .report-head-container {text-align:right}
.run-by-run .report-container{clear:both;}

/* important note at the top */
.run-by-run .note-container { width: 100%; display:inline-block; text-align:left; font-size: 12px; color: #ca9254; }
.run-by-run .note-container span:first-child { padding-right: 5px; }

/* if a map is displayed */
.run-by-run #route{display:none;}
.run-by-run.has-route #route{display:block;float:left;}
.run-by-run.has-route .timing-container { float: left; width: 340px;margin-right:0px;  }
.expanded .run-by-run.has-route .timing-container { float: left; width: 376px; margin-right: 42px; }

.run-by-run .polaroid-container { height: 125px; width: 135px; -webkit-transform: rotate(-2deg); border-top: 10px solid #fff; border-left: 10px solid #fff; border-right: 10px solid #fff; border-bottom:30px solid #fff;overflow:hidden;}
.run-by-run .polaroid-container.two { margin-top: -150px; margin-left: 130px; -webkit-transform: rotate(-8deg); }
.run-by-run .photo-container img { }
.run-by-run .cooper-container .ratings { font-size: 14px; line-height: 14px; }
.run-by-run .cooper-container .ratings div { font-size: 12px; color:#555; display:inline-block; padding:2px 4px;}
.run-by-run .cooper-container .ratings.excellent div.excellent { color:#fff;}
.run-by-run .cooper-container .ratings.very-good div.very-good { color:#fff;}
.run-by-run .cooper-container .ratings.good div.good { color:#fff;}
.run-by-run .cooper-container .ratings.average div.average{ color:#fff;}
.run-by-run .cooper-container .ratings.untrained div.untrained{ color:#fff;}

.run-by-run .top-container {display:flex; justify-content:space-between;align-items:flex-start; }
.run-by-run .chalkboard-container { display: inline-block; position: relative; height: 140px; width: 350px; margin-top: 5px; text-align: left; color: #ececec; overflow: hidden; padding: 5px 10px 5px 15px; line-height: 0.85em; }
.run-by-run .chalkboard-container .chalkboard { display: none; }
.run-by-run .chalkboard-container .chalkboard.non-latin{font-family:Arial, Helvetica, sans-serif;}
.is-you .run-by-run .chalkboard-container{cursor:pointer;border:2px solid #292929;}
.run-by-run .chalkboard-container .chalk-input{background-color:transparent;font-size:30px;height:128px;resize:none;width:324px;color:#eee;border:none;overflow-y:hidden;}
.run-by-run .chalkboard-container #howWasYourRun{position:absolute;top:65px;left:15px;color:#444;font-size:40px;cursor:pointer;display:none;}

.run-by-run h2 img{margin-top:14px;margin-bottom:8px;} /*charts*/
.run-by-run .data.food-equivalent{font-size:18px;line-height:17px;}

/* no tag setting for new users or invalid runs */
.run-by-run.new-user #addTag{display:none;}
.run-by-run.new-user .tags .tag:hover{color:#444;cursor:inherit;}
.run-by-run.new-user .tags .tagged:hover{color:#444;cursor:inherit;}
.run-by-run.invalid-run #addTag{display:none;}
.run-by-run.invalid-run .tags .tag:hover{color:#444;cursor:inherit;}
.run-by-run.invalid-run .tags .tagged:hover{color:#444;cursor:inherit;}

.run-by-run .tags { display: inline-block; } /*needed for js height calc*/
.run-by-run .tags .tag, .tags .tag-no-effect{font-size:12px;padding:2px 4px;border:1px solid #2a2a2a; margin:0px 4px 6px; float:left;color:#444;}
.run-by-run .tags .tag.tagged, .tags .tag-no-effect{border-color:#777;color:#fff;}
.run-by-run .tags .tag.userTag {border-style:dashed;}
.run-by-run .tags .tag:hover{color:#999;cursor:pointer}
.run-by-run .tags .tag.tagged:hover{color:#bbb;cursor:pointer}
.run-by-run .tags .tag:active{color:#fff;}

.run-by-run .right.triangle{width: 0px;height: 0px;border-style: solid;border-width: 23px 0px 23px 25px;border-color: transparent transparent transparent #444;}

.run-by-run .dot-metric{height:15px;width:15px;border-radius:35px;display:inline-block;vertical-align:top;margin-left:-10px;}
.run-by-run .col.pace-equivalent h2{}
.run-by-run .pace-equivalent .triangle{position:absolute;right:0px;top:56px;}
.run-by-run .pace-equivalent .distance{font-size:0px;line-height:0px;}
.run-by-run .pace-equivalent .value{font-size:15px;line-height:15px;display:inline-block;margin:0px 3px;}
.run-by-run .pace-equivalent .time{font-size:38px;line-height:38px;}
.run-by-run .pace-equivalent .triangle.right:hover{border-color:transparent transparent transparent #ccc;cursor:pointer;}
.run-by-run .calories-text{font-size:14px;line-height:16px;text-transform:none;color:#ccc;}
.run-by-run .calories-text a{display:block;margin-top:5px;font-weight:normal;}

.run-report.run-by-run #heartRateInfo{ float:left;height:auto;}
.run-report.run-by-run #cadenceInfo { float:left; }

.run-report.run-by-run .two-day-run { text-align: right; margin-right: 8px; font-style: italic; font-weight: bold; color: #ffaa00; font-size: 0.19em; }

.is-you .run-by-run .notables-container { margin-top: 260px; }
.run-by-run .notables-container span { color: #444; text-transform: lowercase; }
.run-by-run .notables-container .data li{font-size:13px; text-transform:none;list-style:disc outside; margin-bottom:10px;margin-left:17px;}
/* .pro .is-you .run-by-run .notables-container .data li:hover { color: #ffcc00; cursor: pointer; } */
.run-by-run .notables-container h2 span { color: #666; font-size: 12px; }
.run-by-run .notables-refresh-button { background:transparent;border:0;color:#666;cursor:pointer;float:right;height:18px;margin:0;padding:1px;width:18px;opacity:.8; }
.run-by-run .notables-refresh-button svg { display:block;fill:currentColor;height:16px;stroke:none;width:16px; }
.run-by-run .notables-refresh-button:hover { color:#aaa;opacity:1;outline:none; }
.run-by-run .notables-refresh-button:focus { outline:none; }
.run-by-run .notables-refresh-button:focus-visible { border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.3); }
.run-by-run .notables-refresh-button:disabled { cursor:default;opacity:.45; }
.run-by-run .notables-refresh-button.is-loading svg { animation:notables-refresh-rotate .9s linear infinite; }
.run-by-run .notables-refresh-button.is-complete { color:#7b9b7b; }
.run-by-run .notables-refresh-button.is-error { color:#a87878; }
.run-by-run .notables-refresh-status { clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px; }
.phone .run-by-run .notables-refresh-button,
.phone .run-by-run .notables-refresh-status { display:none; }
.run-by-run .notables-container .pro-notables-not-displayed { text-transform: lowercase;background-color: rgba(255,255,255,0.05);padding: 4px 12px;border-radius: 10px;color: #666;font-size: 14px;margin: 0px auto;display: inline-block;text-decoration:none; font-weight:normal; }
.run-by-run .notables-container .pro-notables-not-displayed:hover { cursor: pointer; color: #999; background-color: rgba(255,255,255,0.075);}

@keyframes notables-refresh-rotate {
    to { transform:rotate(360deg); }
}

.run-by-run #route .label{right:0px;background-color:rgba(99, 138, 203, 0.35);position:absolute;text-align:right;text-transform:uppercase;color:#fff;font-size:12px;line-height:20px;padding:2px 6px;}
.run-by-run #route .label.toponym{top:168px;}
.run-by-run #route .label.locale{top:195px;}
.run-by-run #route .note-count { position: absolute; top: 55px; right: 2px; border-radius: 30px; width: 30px; height: 30px; color: #f1f1f1; }
.run-by-run #route .note-count svg { position: absolute; left: 5px; top: 0px; height: 25px; width:5px; fill: #f1f1f1; transform: rotate(45deg); }
.run-by-run #route .note-count span { position: absolute; left: 12px; top: 8px; font-size:14px; }

.run-by-run .scissors{background-position:-1px -34px;height:14px;width:25px;margin:8px 4px;cursor:help;float:right;}
.run-by-run .pauses.clickable { cursor: pointer; }
.run-by-run .stops.clickable { cursor: pointer; }
.run-by-run .pauses{height:12px;width:3px;border-left:4px solid #fff;border-right:4px solid #fff;margin:8px 4px;float:right;}
.run-by-run .stops { height: 12px; width: 12px; background-color: #fff; float: right; clear: right; margin:8px 4px;cursor:pointer;}
.stop-table { width: 190px; line-height:1.0em;}
.stop-table span.label { width: 125px; font-size: 12px; color:#555;display:inline-block;text-align:right;}
.stop-table span.value { width: 50px; font-size: 14px; color:#000;display:inline-block;text-align:left;margin-left:6px;}
.pause-table { width: 150px; line-height:1.0em;}
.pause-table span.label { width: 85px; font-size: 12px; color:#555;display:inline-block;text-align:right;}
.pause-table span.value { width: 50px; font-size: 14px; color:#000;display:inline-block;text-align:left;margin-left:6px;}

.run-by-run .calorie-info{height:14px;width:14px;display:inline-block;cursor:help;}
.run-by-run .alternate-food{text-decoration:underline;display:inline;cursor:pointer;}

.run-by-run .tags:hover {z-index:999;}
.run-by-run .invalid-message{ margin-top: 10px; display:inline-block; font-size:17px;color:#eee;background-color:#333;padding:5px 10px; border-radius:10px; text-align:left;}
.run-by-run .invalid-message.full-page { margin: 150px 120px 500px 0px; padding: 40px 60px; line-height:1.5em; font-size:1.1em;}
.run-by-run #dateNav a{z-index:2;} /* Fix for weird issue with chalkboard overlap*/
.run-by-run .pace-note {display:inline-block;width:0px;height:0px;overflow:visible;cursor:pointer;vertical-align:top;}
.run-by-run .pace-note div{height: 17px;width: 17px;background: url('../images/sprites/settings-sprites60x35.png') repeat-x scroll -30px -16px;opacity:0.5;}

.run-by-run #route{height:218px;overflow:hidden;}
.run-by-run #proSPI{height:135px;overflow:hidden;}
.run-by-run #proSPIComparison{height:135px;overflow:hidden;}
.run-by-run #proPaceVariability{height:222px;overflow:hidden;}
.run-by-run #proElevationProfile{height:222px;}
.run-by-run #proElevationProfile .elevation-profile{height:177px;}
.run-by-run #proElevationProfile .chart{height:70px;margin-top:-5px;}

.run-by-run .spi-comparison .chart .ref-spi{font-size:9px;fill:#ccc;}
.run-by-run .spi-comparison .chart .line{stroke-width:1px;shape-rendering:auto;stroke:#777;}
.run-by-run .spi-comparison .percent{position:absolute;top:20px;right:0px;width:80px;text-align:right;font-size:22px;}
.run-by-run .spi-comparison .percent label{font-size:12px;color:#eee;padding-right:5px;}
.run-by-run .spi-comparison .percent span{font-size:15px;}
.run-by-run .spi-comparison .focus-overlay.hover-pointer{cursor:pointer;}
.run-by-run .spi-comparison .focus-overlay { fill: none; pointer-events: all;}
.run-by-run .spi-comparison .focus {z-index:999;}
.run-by-run .spi-comparison .focus circle {fill: #fff; stroke: #333;cursor:pointer;}
.run-by-run .spi-comparison .focus rect{fill:#000;}
.run-by-run .spi-comparison .focus text tspan.value{font-size:13px;fill:#fff;}
.run-by-run .spi-comparison .focus text tspan.label{font-size:9px;fill:#ccc;}
.run-by-run .data .message{color:#aaa;margin:25px;}

.run-by-run .run-list .chart path{stroke-width:1.3px;fill:none;shape-rendering: geometricPrecision;}

.run-by-run .run-chart svg { overflow: hidden; }
.run-by-run .run-chart path{fill:none;shape-rendering:geometricPrecision;}
.run-by-run .run-chart .chart div.focus{position:absolute;pointer-events:none;}
.run-by-run .run-chart .chart div.focus.pace { top: 20px; }
.run-by-run .run-chart .chart .focus-container { font-size: 12px; height:75px;padding:15px 15px 0px 15px;white-space:nowrap;}
.run-by-run .run-chart .chart .focus-container .pace { display:block;font-size:1.5em;padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #444;}
.run-by-run .run-chart .chart .focus-container .finish { top: 20px; margin-top:5px;margin-bottom:5px;}
.run-by-run .run-chart .chart .focus-container .distance { display:inline-block;padding-right:5px;}
.run-by-run .run-chart .chart .focus-container .duration { display:inline-block;padding-left:5px;}
.run-by-run .run-chart .chart .focus-container .heart-rate { display:inline-block;padding-left:5px;}
.run-by-run .run-chart .chart .focus-container .duration.right-side { position: absolute; right: 15px; }
.run-by-run .run-chart .chart div.focus .value{color:#fff;font-size:1.2em;}
.run-by-run .run-chart .chart div.focus .label{font-size:0.8em;color:#ccc;margin-left:2px;}

.run-by-run .run-chart  .note {color:#555;font-size:16px;position:absolute;top:65px;left:70px;}

.run-by-run .adjust { background-image: url('../images/pro/training-band-filters163x82.png'); background-repeat: no-repeat; }
.run-by-run .adjust.grade          { background-position: -120px -13px; height: 22px; width: 27px; cursor:pointer;}
.run-by-run .adjust.grade.selected { background-position: -120px -49px; }

.run-by-run .axis path,
.run-by-run .axis line { fill: none; stroke: #444; shape-rendering: crispEdges;}
.run-by-run .x.axis path { stroke:#666; stroke-width: 0px; }
.run-by-run .x.axis text {stroke:none;fill:#555;font-size:11px;}
.run-by-run .x.axis .label-1 {font-size:1em;} 
.run-by-run .x.axis .label-2 {font-size:0.85em;}
.run-by-run .y.axis path {stroke:#444;stroke-width: 1px;}
.run-by-run .y.axis text {stroke:none;fill:#555;font-size:11px;}

.run-by-run .brush .extent {fill-opacity: 0;shape-rendering: crispEdges;}

.run-by-run .run-chart .elevation-chart .down {margin-top:-29px;}
.run-by-run .run-chart .elevation-chart div.focus{position:absolute;white-space:nowrap;pointer-events:none;}
.run-by-run .run-chart .elevation-chart div.focus.up{top:10px;}
.run-by-run .run-chart .elevation-chart div.focus.down{bottom:20px;}
.run-by-run .run-chart .elevation-chart div.focus .text {margin-left:4px;font-size:10px; color: #aaa;}
.run-by-run .run-chart .elevation-chart div.focus       .value{margin:0px 0px 0px 0px;font-size:16px;color:#ddd;font-weight:bold;display:inline-block;width:100px;text-align:right;}
.run-by-run .run-chart .elevation-chart div.focus.up    .value{}
.run-by-run .run-chart .elevation-chart div.focus.down  .value{}
.run-by-run .run-chart .elevation-chart div.focus .label{color:#ccc;margin-left:1px;font-size:10px;}
.run-by-run .run-chart .elevation-chart div.focus .extra {clear: both;display: block;text-align: right;font-size: 10px;}

.run-by-run .run-count-by-distance .chart, .run-by-run .nth-fastest-container .chart{margin-top:-20px;margin-right:-15px;}
.run-by-run .highlight-chart .bar-label text {text-anchor:middle;}
.run-by-run .highlight-chart .bar-label text .highlight-value {fill:#f1f1f1;}
.run-by-run .highlight-chart .bar-label text .highlight-label {fill:#e1e1e1;text-anchor:middle;text-transform:none;}
.run-by-run .highlight-chart .x.axis path{stroke:#444;stroke-width:1px;}

.run-report .nth-fastest-container .chart-axis-label.xAxis{display:inline-block;text-align:center;position:absolute;right:0px;width:285px}
.run-report .run-count-by-distance .chart-axis-label.xAxis{display:inline-block;text-align:center;position:absolute;right:0px;width:285px}

.run-by-run .pace-variability .chart{position:absolute;left:50%;margin-left:-100px;}
.run-by-run .pace-variability path{stroke-width:5px;shape-rendering: geometricPrecision;}
.run-by-run .pace-variability .value{position:absolute;left:50%;margin-left:-45px;top:92px;width:85px;font-size:35px;text-align:center;}
.run-by-run .pace-variability .value span{font-size:0.4em;margin-right:-16px;}

.run-by-run .data.elevation-profile .distance {position:absolute;top:6px;left:2px;font-size:12px;color:#f1f1f1;}
.run-by-run .data.elevation-profile .distance .label{font-size:10px;color:#d6d6d6;}
.run-by-run .data.elevation-profile .chart path.line{stroke-width:2px;shape-rendering:auto;stroke:#777;fill:none;}
.run-by-run .data.elevation-profile .profile{padding:0px;margin:5px 0px;}
.run-by-run .data.elevation-profile .difficulty{position:absolute;top:63px;right:10px;width:130px;height:110px;line-height:100px;font-size:100px;text-align:center;vertical-align:top;color:#ddd;}
.run-by-run .data.elevation-profile .difficulty .label{position:absolute; left:0px;width:100%;bottom:0px;text-align:center;line-height:20px;margin:0px;}
.run-by-run .data.elevation-profile dl{width:170px;}
.run-by-run .data.elevation-profile dl dt{width:60px;}
.run-by-run .data.elevation-profile dl dd{width:80px;font-size:30px;overflow:visible;text-align:right;}
.run-by-run .data.elevation-profile dl dd .label{margin:0px;margin-left:2px;}

.run-by-run .data.elevation-profile .profile.uphill{display:inline-block;width: 0px;height: 0px;border-style: solid;border-width: 0px 0px 30px 80px;border-color: transparent transparent #FF9900 transparent;}
.run-by-run .data.elevation-profile .profile.flat{display:inline-block;position:relative;width:100px;height:15px;background-color:#555;opacity:0.5;margin-left:-4px;margin-top:10px;}
.run-by-run .data.elevation-profile .profile.flat .overlay{position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:#FFCB32;}
.run-by-run .data.elevation-profile .profile.downhill{display:inline-block;width: 0px;height: 0px;border-style: solid;border-width: 30px 0px 0px 80px;border-color: transparent transparent transparent #FFCB32;margin-left:-4px;}

.run-by-run .data.elevation-profile .message{color:#aaa;margin:25px;margin-bottom:-8px;}


.run-by-run .data.elevation-profile .focus-overlay { fill: none; pointer-events: all;}
.run-by-run .data.elevation-profile .focus {z-index:999;pointer-events:none;}
.run-by-run .data.elevation-profile .focus circle {fill: #fff; stroke: #333;}
.run-by-run .data.elevation-profile .focus rect{fill:#555;}
.run-by-run .data.elevation-profile .focus text tspan.value{font-size:13px;fill:#fff;}
.run-by-run .data.elevation-profile .focus text tspan.label{font-size:9px;fill:#ccc;}

.run-by-run #proTrainingAnalysis h2 { display: inline-block; margin-right: 8px; }

.run-by-run .trailing-training-container { background-color: transparent; margin: 0px; padding: 0px; }
.run-by-run .trailing-training-container .menu-container {display:block; text-align:right; }
.run-by-run .trailing-training-container .view-options { display: inline-block; }
.run-by-run .trailing-training-container .view-options { text-align: left; margin-top: 5px; }
.run-by-run .trailing-training-container .view-options div { color: var(--emphasis-3); border: none; font-size: 0.7em; }
.run-by-run .trailing-training-container .view-options div.selected { color: var(--emphasis-1); background-color: transparent; }
.run-by-run .trailing-training-container .view-options div:hover { background-color:transparent;}
.run-by-run .trailing-training-container .explain { display: none; }

.run-by-run .trailing-training-container .info-container .label-container { margin-left: -40px; }
.run-by-run .trailing-training-container .info-container .label-container .label-data { background-color: transparent; font-size: 0.9em; }

.run-by-run .trailing-training-container .graph-value-container { margin: 0px; margin-left: -15px; }
.run-by-run .trailing-training-container .graph-value-container circle { fill: var(--graph-color-base); }
.run-by-run .trailing-training-container .graph-value-container circle.selected { fill: var(--graph-color-highlight); }
.run-by-run .trailing-training-container .graph-value-container circle.deselected:not(.reference-run) { fill: var(--graph-color-fill); opacity:0.2;}
.run-by-run .trailing-training-container .graph-value-container circle.reference-run { fill: rgba(0,0,0,0.8); stroke: rgba(255,255,255,0.8); }
.run-by-run .trailing-training-container .graph-value-container .x.axis line { stroke: #444; }
.run-by-run .trailing-training-container .graph-value-container .x.axis text { fill: var(--emphasis-3); font-size: 11px; }
.run-by-run .trailing-training-container .graph-value-container .x.axis text.selected tspan { fill: var(--emphasis-3); }
.run-by-run .trailing-training-container .graph-value-container .x.axis text.selected { fill: var(--emphasis-1); }

.run-by-run .trailing-training-container .graph-time-container { margin: 0px; margin-left: -15px; }
.run-by-run .trailing-training-container .graph-time-container rect.deselected { fill: var(--graph-color-fill); }
.run-by-run .trailing-training-container .graph-time-container rect.selected { fill: var(--graph-color-highlight); }
.run-by-run .trailing-training-container rect { fill: var(--graph-color-base); }
.run-by-run .trailing-training-container .graph-time-container .x.axis line { stroke: #444; }
.run-by-run .trailing-training-container .graph-time-container .x.axis text { fill: #555; font-size:11px; text-transform: lowercase;}

.run-by-run .trailing-training-container .arrow-box.bottom:after { border-bottom-color: #444; }
.run-by-run .trailing-training-container .arrow-box.bottom { background-color: #444; color: var(--emphasis-2); font-size: 24px; width: 180px; }
.run-by-run .trailing-training-container .arrow-box .date-container { border-bottom:1px solid rgba(255,255,255,0.2); }
.run-by-run .trailing-training-container .arrow-box .date-container span { text-transform: lowercase; }
.run-by-run .trailing-training-container .arrow-box .value { color: var(--emphasis-1); }

.run-by-run .legend { right: 0px; padding-left: 60px; color:var(--emphasis-4); text-align:right;}
.run-by-run .legend li { display: inline-block; text-transform:lowercase; font-size:0.7em; vertical-align:top; }
.run-by-run .legend li div { display: inline-block; margin-left: 5px; margin-right: 20px; height:10px; }
.run-by-run .legend rect{fill:#fff;}
.run-by-run .legend circle { fill: var(--graph-color-base); opacity:0.5;}
.run-by-run .legend circle.reference-run { fill: rgba(0,0,0,0.8); stroke: rgba(255,255,255,0.8); }
.run-by-run .legend li svg.training-run {vertical-align:middle;}
/* Toolbox CSS */
body.phone .run-by-run .toolbox { display: none; } 
.run-by-run .toolbox .more{display: none; } 
.run-by-run .toolbox .share.icon{display: none; } 

.is-you .run-by-run .toolbox .more{display: inline-block; }
.is-you .run-by-run .toolbox .share.icon {background-image: url('../images/share-14x17-v2.png');width: 14px;height: 17px;cursor: pointer;display: inline-block;vertical-align: middle;margin-top: 7px; margin-right:5px;}

.run-by-run .toolbox {display:inline-block; position:relative; z-index:3; height:30px; margin-top:10px; padding:0px 5px; max-width: 144px; background-color: #333;border-radius: 5px;}

.run-by-run .toolbox-container { margin-bottom: -10px; }
.run-by-run .toolbox-container.no-toolbox { display: none; }
.run-by-run .toolbox-container.no-social     .container.like { display: none; }
.run-by-run .toolbox-container.no-social     .container.comment { display: none; }
.run-by-run .toolbox-container.no-more       .container.more { display: none; }
.run-by-run .toolbox-container.no-more       .container.comment .panel { right: -5px; width: 400px; }
.run-by-run .toolbox-container.no-liking     .container.like { display: none; }
.run-by-run .toolbox-container.no-commenting .container.comment { display: none; }


.run-by-run .toolbox .overlay { display: none; position:absolute; width: 100vw; height: 100vh; margin-left: calc(-50vw - 350px); margin-top: -400px; pointer-events:all;}
.run-by-run .toolbox .container {display:inline-block;position:relative;height:22px;  vertical-align:top;text-align:left;}
.run-by-run .toolbox .container > .panel {display:none;background-color:#333;border-radius:10px;}
.run-by-run .toolbox .container > .count { position: absolute; display: inline-block; background-color: #666; border-radius: 10px; font-size: 11px; height:15px; width:15px;text-align:center;vertical-align:middle;font-weight:bold;}
.run-by-run .toolbox .container > .count.empty { height: auto; width: auto; }
.run-by-run .toolbox .container > .icon { position: absolute; top: 0px; left: 8px; }


.run-by-run .toolbox .container.like { width: 32px; }
.run-by-run .toolbox .container.comment { width: 40px; }
.run-by-run .toolbox .container.more { width: 32px; }

.run-by-run .toolbox .container.like > .icon {display: inline-block; margin-left:-16px; margin-top:0px; height: 38px; width: 38px; background-image: url("../images/like-small-v2.png"); background-repeat: no-repeat; background-size: 2900%; cursor: pointer; }
.run-by-run .toolbox .container.like.new.selected > .icon {animation: like-explode 1.2s steps(28) 1; }
.run-by-run .toolbox .container.like.selected > .icon { background-position:right;margin-left:-15px; margin-top:-3px;}
.run-by-run .toolbox .container.like > .count {top:-5px;left:24px;}
.run-by-run .toolbox .container.like > .count span { }

.run-by-run .toolbox .container.comment > .icon { background-image: url(../images/social/comment_22.png);height:22px;width:22px;display:inline-block;cursor:pointer;margin-top:5px;}
.run-by-run .toolbox .container.comment > .count  {top:-5px;left:24px;}

.run-by-run .toolbox .container.more > .icon{background: url('../images/sprites/toolboxSprite-40x184v2.png') no-repeat; cursor: pointer;background-position: -2px -145px; width: 20px; height: 20px; display: inline-block;margin-top:10px;vertical-align:top;}
.run-by-run .toolbox .container.more > .icon:hover {background-position: -22px -145px;}

.run-by-run .toolbox .container.comment .panel { display:none; position:absolute; top:0px; right:-40px; padding: 10px; background-color: #333; z-index:3; width:400px; border-radius:10px; }
.run-by-run .toolbox .container.comment .panel .comments-container { }
.run-by-run .toolbox .container.comment .panel .comments-container .comment-text-container .comment-text { display:inline-block; background-color: rgba(255,255,255,0.1); border-radius: 10px; padding: 1px 8px; }
.run-by-run .toolbox .container.comment .panel .comments-container .comment-text-container .options-container .icon { position: absolute; top:-13px; }
.run-by-run .toolbox .container.comment .panel .comments-container .comment-text-container .options-container .hover { background-color: #c6c6c6; color: #222; right:auto; top:0px; left:30px;}
.run-by-run .toolbox .container.comment .panel .comments-container .comment-text-container .options-container .options-menu { background-color: #ddd; }
.run-by-run .toolbox .container.comment .panel .comments-container .comment-text-container .options-container .options-menu .caret { background-color: #ddd; }
.run-by-run .toolbox .container.comment .panel .comments-container .comment-text-container .options-container .options-menu .option { background-color: #ddd; color:#555; font-weight:bold; }
.run-by-run .toolbox .container.comment .panel .comments-container .comment-text-container .options-container .options-menu .option:hover { background-color:#22496d;color:#efefef; }
.run-by-run .toolbox .container.comment .panel .comments-container .comment.is-edit .comment-text { background-color: transparent; padding: 0px; }
.run-by-run .toolbox .container.comment .panel textarea { width:280px;}



.run-by-run .toolbox .container.more .panel { width: 160px; text-align: left; position:absolute; right:-5px; top:0px;z-index:3;}
.run-by-run .toolbox .container.more ul {padding: 25px 15px 10px 15px;}
.run-by-run .toolbox .container.more li { padding: 2px 0px; }
.run-by-run .toolbox .container.more li a {text-decoration:none;font-size:13px;font-weight:normal;color:#ddd;letter-spacing:.01em;cursor:pointer;}
.run-by-run .toolbox .container.more li a:hover {color:#ffce00;}
.run-by-run .toolbox .container.more li a:before {background: url('../images/sprites/toolboxSprite-40x184v2.png') no-repeat;content: "";width: 20px; height: 20px; display: inline-block; vertical-align: middle;}

.run-by-run .toolbox .container.more li a.edit:before {background-position: -2px -2px;}
.run-by-run .toolbox .container.more li a.delete:before {background-position: -3px -23px;}
.run-by-run .toolbox .container.more li a.info:before {background-position: -3px -43px;}
.run-by-run .toolbox .container.more li a.fb:before {background-position: -4px -62px;}
.run-by-run .toolbox .container.more li a.twitter:before {background-position: -3px -82px;}
.run-by-run .toolbox .container.more li a.download:before {background-position: -4px -102px;}
.run-by-run .toolbox .container.more li a.beacon:before {background-position: -22px -123px; } 
.run-by-run .toolbox .container.more li a.share:before {background-position: -3px -167px; } 

.run-by-run .toolbox .container.more li a.edit:hover:before {background-position: -22px -2px;}
.run-by-run .toolbox .container.more li a.delete:hover:before {background-position: -23px -23px;}
.run-by-run .toolbox .container.more li a.info:hover:before {background-position: -23px -43px;}
.run-by-run .toolbox .container.more li a.fb:hover:before {background-position: -24px -62px;}
.run-by-run .toolbox .container.more li a.twitter:hover:before {background-position: -23px -82px;}
.run-by-run .toolbox .container.more li a.download:hover:before {background-position: -24px -102px;}
.run-by-run .toolbox .container.more li a.beacon:hover:before {background-position: -22px -123px; }
.run-by-run .toolbox .container.more li a.share:hover:before {background-position: -24px -167px; }

.run-by-run .toolbox .container.more li a.beacon { display: none; }
.run-by-run .toolbox .container.more li a.beacon.has-notes { display: block; }

.run-by-run .toolbox.more-panel .count { display: none; }
.run-by-run .toolbox.more-panel .container.more > .icon { z-index: 5; }
.run-by-run .toolbox.more-panel .container.more > .panel{ display: block; }

.run-by-run .toolbox.comment-panel .count { display: none; }
.run-by-run .toolbox.comment-panel .container.comment .icon { z-index: 5; }
.run-by-run .toolbox.comment-panel .container.comment .panel{ display: block; }


@keyframes like-explode {
  from {background-position:left;}
  to { background-position:right;}
}

/* toolbox icons not in use 
.toolbox .switch-shoes.icon {background-position: -116px -3px; width: 10px; height: 9px; display: inline-block; position: absolute; top: 56px; right: 5px; z-index: 99;}
.toolbox .data-hacks.icon {background-position: -58px -1px; width: 12px; height: 13px; display: inline-block;}
.toolbox .data-hacks.icon:hover {background-position: -58px -18px;}
.toolbox .switch-shoes.icon:hover {background-position: -116px -23px;}
.shoe-locker{text-transform: none; text-decoration:none;font-weight: normal; font-size: 10px; cursor: pointer; margin: 2px 0; position: absolute; top: 50px;}
.shoe-locker:hover {color: #ffce00;}
*/

/* Weather sprite CSS */
.weather-sprite {background: url('../images/sprites/weather-sprite304x239.png') no-repeat; padding: 4px; overflow: hidden;}
.add-heat-index .more-weather .weather-sprite {background-position: -88px 0; width: 40px; height: 40px;}
.add-wind-chill .more-weather .weather-sprite {background-position: -8px 2px; width: 49px; height: 40px;}
.partly-cloudy.weather-sprite {background-position: -162px -1px; width: 48px; height: 40px;}
.clear.weather-sprite {background-position: -242px 0; width: 39px; height: 40px;}
.drizzle.weather-sprite {background-position: -7px -50px; width: 40px; height: 40px;}
.rain.weather-sprite {background-position: -73px -50px; width: 40px; height: 40px;}
.storm.weather-sprite {background-position: -140px -50px; width: 36px; height: 40px;}
.cloudy.weather-sprite {background-position: -202px -51px; width: 49px; height: 40px;}
.snow.weather-sprite {background-position: -270px -50px; width: 31px; height: 40px;}
.blizzard.weather-sprite {background-position: -5px -100px; width: 44px; height: 40px;}
.sleet.weather-sprite {background-position: -78px -100px; width: 31px; height: 40px;}
.hail.weather-sprite {background-position: -138px -100px; width: 37px; height: 40px;}
.hurricane.weather-sprite {background-position: -213px -100px; width: 20px; height: 40px; margin-left: 10px;}
.tornado.weather-sprite {background-position: -267px -102px; width: 37px; height: 40px; margin-left: 5px;}
.smoke.weather-sprite {background-position: -7px -150px; width: 41px; height: 40px;}
.sandstorm.weather-sprite {background-position: -71px -150px; width: 43px; height: 40px;}
.volcano.weather-sprite {background-position: -143px -150px; width: 40px; height: 40px;}
.extreme-rain.weather-sprite {background-position: -204px -151px; width: 45px; height: 40px;}
.extreme-cold.weather-sprite {background-position: -15px -201px; width: 22px; height: 40px; margin-left: 10px;}
.extreme-heat.weather-sprite {background-position: -79px -201px; width: 22px; height: 40px; margin-left: 10px;}
.extreme-wind.weather-sprite {background-position: -138px -209px; width: 45px; height: 40px; margin-top: 2px;}

/* birthday cake */
.run-report .birthday-egg{position:absolute;left:80px;width:59px;margin-right:20px;margin-top:3px;}
.run-report .date-day-container .birthday-egg {left: 255px; top: 13px; margin-right: 0;}
.run-report .date-day-container.wide { font-size: 55px; margin-top:2px;}
.run-report .date-day-container.wide.birthday { }
.run-report .date-day-container.wide.birthday span.label { display:none;}

/* Weather layout */
.run-by-run .add-heat-index .switch,
.run-by-run .add-wind-chill .switch {border-width: 8px 0px 8px 10px; border-color: transparent transparent transparent #444; width: 0; height: 0; border-style: solid; position: absolute; right: 10px; top: 24px; cursor: pointer;}

.run-by-run .add-heat-index .switch:hover,
.run-by-run .add-wind-chill .switch:hover {border-color: transparent transparent transparent #CCC;}

.run-by-run .more-weather .show-symbol { display: block; }

.run-by-run .with-weather .weather-container,
.run-by-run .without-weather .date-day-container {display: block;}

.run-by-run .weather-container,
.run-by-run .date-day-container {display: none;}

.run-by-run .date-day {font-size: 25px; text-transform: capitalize; line-height: 1em; float:left; width: 130px; border-right: 1px solid rgba(255,255,255,0.08); padding-right: 10px;}
.run-by-run .date-day span {font-size: 20px;}
.run-by-run .date-day-container {font-size: 60px; text-transform: uppercase; padding-top: 18px;}
.run-by-run .weather-info {position: relative; width: 55%;}

.run-by-run .show-symbol,
.run-by-run .show-temperature,
.run-by-run .show-humidity {display: none;}

.run-by-run .type        .show-symbol,
.run-by-run .temperature .show-temperature,
.run-by-run .humidity    .show-humidity {display: block;}

.run-by-run .type.temperature.humidity .show-temperature {top: 10px; font-size: 16px;}
.run-by-run .type.temperature.humidity .show-humidity {position: absolute; left: 230px; top: 30px; width: 70px;font-size: 16px;}

.run-by-run .temperature.humidity .show-temperature {top: 10px; left:180px; top:6px; font-size: 16px;font-size: 26px;}
.run-by-run .temperature.humidity .show-humidity {position: absolute; left: 180px; top: 35px; width: 70px;font-size: 16px;}

.run-by-run .show-symbol {position: absolute; left: 150px; padding-left: 15px; padding-top: 4px;}
.run-by-run .show-temperature {position: absolute; left: 230px; top: 10px; width: 70px;}
.run-by-run .show-humidity {position: absolute; left: 230px; top: 30px; width: 70px;}

.run-by-run .type        .show-symbol {display: block; margin-left: 35px;}
.run-by-run .temperature .show-temperature {display: block; left: 195px; font-size: 30px; width: 100px; top: 20px;}
.run-by-run .humidity    .show-humidity{display: block; left: 195px; font-size: 24px; width: 100px; top: 20px;}

.run-by-run .type.temperature .show-symbol {display: block; position: absolute; left: 150px; padding-left: 15px; padding-top: 4px; margin-left: 5px;}
.run-by-run .type.temperature .show-temperature {display: block; position: absolute; left: 230px; top: 16px; width: 80px; font-size: 20px;}

.run-by-run .type.humidity .show-symbol {display: block; margin-left: 5px;}
.run-by-run .type.humidity .show-humidity {display: block; left: 230px; top: 20px; font-size:20px;}

.run-by-run .more-weather {display: none; position: relative;}
.run-by-run .more-weather .weather-sprite {position: absolute; left: 20px; bottom: 3px; top: 7px;}
.run-by-run .show-heat-index, .run-by-run .show-wind-chill {top: 17px; position: absolute; left: 239px; font-size: 20px;}

.run-by-run .type.temperature.humidity .show-humidity { position: absolute; left: 230px; top: 30px; width: 70px; font-size: 16px; }


#runChart .option { position:relative;float:right; top:23px; right:0px; font-size:13px; background-color: #333; color: #aaa; padding:2px 6px; cursor:pointer;}
#runChart .option:hover { color: #fff; background-color: #666; }
#runChart .option.selected { color: #fff; background-color: #888; }
#runChart text.split { fill: #f1f1f1; font-size:14px;text-anchor:middle;text-rendering: optimizeLegibility;}
#runChart text.split tspan { font-size: 0.7em; color:#e1e1e1; letter-spacing:0.09em;}
#runChart .chart{ position: relative; }
#runChart .chart img { margin-left: -17px; }
#runChart .chart h2 { font-size: 25px; color: #9d9d9d; position: absolute; top: 0px; left:2px;}
#runChart .chart h3 { font-size: 15px; color: #9d9d9d; position: absolute; top: 55px; left:2px;font-weight:bold;}

body.light-theme .run-by-run .toolbox { background-color: #3a3a3a; }
body.light-theme .run-by-run .chalkboard-container { height: 132px; width:378px; margin-top:5px;border-right:0px; border-left:0px; padding:15px 0px 5px 0px; }
body.light-theme .run-by-run .chalkboard-container #howWasYourRun { top:60px; left:20px; font-size:33px; }

/* mobile */
.phone .run-report {padding-bottom:10em;} /* extra padding so that social buttons don't overlap with elevation */
.run-list h1.full { font-size: 1.2em; margin-bottom: 0.6em; color: #f1f1f1; margin-top: 30px; }
.run-list table td { padding: 4px 2px 4px 0;; }
.run-list thead { border-bottom: 1px solid #333; }
.run-list th { color: #666; font-size: 0.7em; vertical-align: middle; }
.run-list .run-data { width: 100%; font-size: 1.2em; margin-top: 2px; border-collapse: collapse; }
.run-list .run-data tr { border-bottom: 1px solid #333; }
.run-list .run-data tr td { white-space: nowrap; }
/*ie*/
.run-list .run-data tr th { height: 28px; text-transform: capitalize; }
/*ie*/
.run-list .run-data th { cursor: default; }
.run-list .run-data thead tr:hover { color: #fff; cursor: default; background-color: transparent; }
.run-list .run-data tr:hover { color: #FFCC00; cursor: pointer; background-color: #222; }
.run-list .run-data tr:hover .button { visibility: visible; }
.run-list .run-data .edit { vertical-align: middle; }
.run-list .run-data .date { width: 60px; text-align: right; padding-right: 15px; }
.run-list .run-data .sparkline { width: 80px; }
.run-list .run-data .sparkline path { fill: none; shape-rendering: geometricPrecision; }
.run-list .run-data .distance { width: 130px; }
.run-list .run-data .distance .value { width: 60px; display: inline-block; text-align: right; }
.run-list .run-data .distance .label { width: 15px; display: inline-block; text-align: left; margin-right: 30px; }

.run-list .run-data .pace { width: 130px; }
.run-list .run-data .duration { width: 120px; overflow: hidden; }
.run-list .run-data .speed { width: 110px; overflow: hidden; }
.run-list .run-data .speed .value { width: 50px; display: inline-block; text-align: right; }
.run-list .run-data .speed .label { width: 25px; display: inline-block; text-align: left; margin-right: 30px; }
.run-list .run-data .source { width: 150px; }
.run-list .run-data .source span { font-size: 10px; font-weight: normal; color: #ccc; }
.run-list .run-data .deleted { text-decoration: line-through; }

.run-list .run-data .edit a,
.run-data .delete .button,
.run-data .undelete .button,
.run-data .share .button { visibility: hidden; }
.run-list .edit .button { padding: 2px 10px; }
.run-list .delete .button { padding: 4px 11px 3px 11px; top: -1px; font-size: 16px; color: #eee; }
.run-list .undelete .button { padding: 5px 10px; top: -3px; }
.run-list .share .button { padding: 4px 10px 1px 10px; top: 1px; }
.run-list .share .button div { display: inline-block; background-image: url('../images/share-14x17.png'); background-repeat: no-repeat; width: 14px; height: 17px; cursor: pointer; }

.run-list .run-report h1 { margin-top: 0px }
.run-list .run-report table { margin-bottom: 20px }
.run-list .hoverText { background-color: #fff; border: 1px solid #333; padding: 6px; }
.run-list .label { font-size: 12px; color: #999; }

/*
.phone .run-list h1.full { margin-top: 3em; }
.phone .run-list .sentToFB { display: none; }
.phone .run-list .run-data .edit { display: none; }
.phone .run-list .run-data .edit { display: none; }
.phone .run-list table td { font-size: 22px; padding: 10px 0px 10px 0px; }
.phone .run-list .run-data .date { width: 80px; }
.phone .run-list .run-data .date { width: 80px; }
*/

.phone .day-of-week { display: none; }
.phone .run-list-container .headings-container > div { color:#bbb; font-size:18px; }
.phone .run-list-container .row { height: 60px; line-height: 60px; }
.phone .run-list-container .row > div .value { font-size: 25px; }

.run-list-container .headings-container { border-bottom: 1px solid #444; padding-bottom: 4px; }
.run-list-container .headings-container > div { display: inline-block; color: #666; text-align:right; cursor:pointer; }
.run-list-container .headings-container > div:hover { color: #aaa; }
.run-list-container .headings-container > div.pace { padding-right: 43px; box-sizing: border-box; }
.run-list-container .headings-container > div.spi { padding-right: 6px; box-sizing: border-box; }
.run-list-container .headings-container > div.distance {box-sizing:border-box;}
.run-list-container .headings-container > div.source { text-align:left; padding-left:20px; }
.run-list-container .headings-container > div.hr-avg { margin-left: 4px; }
.run-list-container .headings-container > div.elevation-gain { text-align: center; margin-left: 15px; }
.run-list-container .row > div { display: inline-block; text-align: right; vertical-align:middle; white-space:nowrap; }
.run-list-container .row > div .value { font-size: 18px; }
.run-list-container .row { border-bottom: 1px solid #343434; height: 36px; line-height: 36px; box-sizing: border-box; }
.run-list-container .row.same-day{border-bottom:none; height:32px; line-height:32px;}
.run-list-container .row.same-day-next .start-date { visibility:hidden; }
.run-list-container .row:hover { /*color: #ffcc00;*/ background-color: rgba(255,255,255, 0.1); cursor: pointer; }
.run-list-container .row .value { display: inline-block; position:relative;}
.run-list-container .row.deleted {color:rgba(255,255,255,0.4);}
.run-list-container .row.deleted path{opacity:0.4;}
.run-list-container .row.deleted circle { opacity: 0.5; }
.run-list-container .row.deleted > div span { color: rgba(255,255,255,0.3); }
.run-list-container .row.deleted .start-date .value {  }
.run-list-container .row.deleted .time .value { text-decoration: line-through; }
.run-list-container div.start-date { text-align:left;}
.run-list-container div.spi {margin-left:14px}
.run-list-container div.duration { margin-left: 15px }
.run-list-container div.hr-avg { margin-left: 14px; }
.run-list-container div.elevation-gain span { font-size: 0.8em; }
.run-list-container .pace { margin-left: 5px; }
.run-list-container .row > div.day-of-week { display: none; position: absolute; right: 1130px; background-color: #2A272A; border-top: 1px solid; border-left:1px solid; border-bottom: 1px solid; border-color: #333; height: 37px; box-sizing: border-box; margin-top: -1px; text-align: right; padding-right: 10px; padding-left: 10px; border-radius:10px 0px 0px 10px; }
.run-list-container .row > div.day-of-week .value {font-size:16px; }
.run-list-container .row:hover > div.day-of-week { display: inline-block; }

.run-list-container .row .label { position: relative; display: inline-block; margin-left: 4px; }
.run-list-container .row .label.close { margin-left:2px;}
.run-list-container .row .time .value { font-size: 0.8em; }
.run-list-container .row > div.source {text-align:left; margin-left:20px;}
.run-list-container .row .value-container {padding:2px 4px;position:relative;}
.run-list-container .row .color-block { border-radius: 20px; height:26px; margin-top:4px; width:100%; opacity:0.7; position:absolute; }
.run-list-container .row .source span { font-size: 0.6em; color: #ccc; text-transform: none; }
.run-list-container .row .sparkline { vertical-align: middle; margin-bottom:-2px; }
.run-list-container .row .sparkline path { fill: none; shape-rendering: geometricPrecision; }
.run-list-container .row .button { position: relative; }
.run-list-container .row > div.actions .button span { color: #fff; }
.run-list-container .row .button.edit { font-size: 12px; margin-top: -5px; line-height: 14px; height: 24px; vertical-align: middle; box-sizing: border-box; margin-right: 8px; }
.run-list-container .row .button.delete { font-size: 18px; height: 24px; width: 24px; line-height: 24px; overflow: hidden; padding: 0px; vertical-align: middle; margin-left: 8px; margin-top:-5px; font-weight:normal;}
.run-list-container .row .button.delete .loader {height:16px; width:16px; margin:4px 0px 0px 4px;}
.run-list-container .row .button.undelete { font-size: 12px; padding: 1px 6px; margin-top: -4px; line-height: 23px; height: 23px; vertical-align: middle; box-sizing: border-box; }
.run-list-container .row .button.share { font-size: 22px; height: 24px; line-height: 1em; width: 30px; padding: 0px; box-sizing: border-box; background-origin: border-box; vertical-align: middle; margin-top: -5px; }
.run-list-container .row .button.share div { background-image: url('../images/share-14x17.png'); background-repeat: no-repeat; width: 14px; height: 17px; margin-top:3px; margin-left:6px; }
.run-list .run-list-container .row .button { visibility: hidden; }
.run-list .run-list-container .row:hover .button { visibility: visible; }
.run-list .run-list-container h1 {margin-top:40px; margin-bottom:-20px; font-size:20px; }

.expanded .run-list-container .message {font-size:20px; margin:10px;}

.run-list .spinner.small { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin-left: -9px; margin-top: -9px; border: 4px solid rgba(255,255,255,0.3); border-top: 4px solid rgba(255,255,255,0); border-bottom: 4px solid rgba(255,255,255,0); box-sizing: border-box; }
.run-list .spinner { border-radius: 50%; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1.2s; -webkit-animation-name: spinner-rotate; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-transition-property: -moz-transform; -moz-animation-name: spinner-rotate; -moz-animation-duration: 1.2s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; transition-property: transform; animation-name: spinner-rotate; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: linear; }

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

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

@keyframes spinner-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
svg {
  shape-rendering: auto;
}

.run-map-container {position:fixed;z-index:100;top:0px;height:100%;width:100%;left:0px;}   
.run-map-container *{-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.run-map-container #runMap{height:100%;width:100%;border:0px solid #454545;background-color:#494949;}    
.run-map-container .leaflet-left .leaflet-control{opacity:0.7;}
.run-map-container .leaflet-bar, .leaflet-touch .leaflet-bar{border:none;}
.run-map-container .leaflet-control:hover{opacity:1.0;}
.run-map-container .osm-attribution { background-color: #f6f6f6; padding: 2px; position:absolute;bottom:0px;right:0px;}
.run-map-container .osm-attribution:hover span { color: #24d; cursor:pointer;  }
.run-map-container .osm-attribution span { display: inline-block; color:#57f;font-size:0.8em;}
.run-map-container             .close-map-button{z-index:100;cursor:pointer;position:absolute;right:100px;top:60px;border-radius:25px;font-size:20px;width:80px;height:30px;text-align:center;line-height:30px;}
.run-map-container.color       .close-map-button{opacity:0.8;color:#777;background-color:#fff;}
.run-map-container.black-white .close-map-button{opacity:0.9;color:#fff;background-color:#999;}
.run-map-container .close-map-button:hover{opacity:1.0;border-color:#fff;}

.run-map-container .raw-data-button { position:absolute; cursor: pointer; border: 1px solid #666; background-color: #fff; color: #333; padding:2px 6px; right:20px; }

.run-map-container .map-type-text { position: absolute; top: 10px; right: 0px; height: 50px; font-size: 30px; text-align: right; padding-right: 15px; font-weight: bold; }
.run-map-container .map-type-text span.over { padding: 6px 12px; border-radius:20px; }
.run-map-container.color .map-type-text span { color: #fff; background-color: rgba(0,0,0,0.35); }
.run-map-container.black-white .map-type-text span { color: #fafafa; background-color: rgba(0,0,0,0.3); }

/* referenced in guider as well which is not in run-map-container */
.map-switch-container {position:absolute;top:0px;right:0px;width:90px;height:50px;}
.map-switch-button{z-index:100;cursor:pointer;position:absolute;right:20px;top:10px;color:#fff;border:2px solid #CCCCCC;height:30px;width:60px;border-radius:25px;opacity:0.9}
.map-switch-button.classic{background-image:url("../images/map-switch-button/classic-map-100x43.png");}
.map-switch-button.ninja{background-image:url("../images/map-switch-button/bw-map-100x43.png");}
.map-switch-button.trail{background-image:url("../images/map-switch-button/outdoors-map-100x43.png");}
.map-switch-button.satellite { background-image: url("../images/map-switch-button/satellite-map-100x43.png"); }
.map-switch-button.terrain { background-image: url("../images/map-switch-button/terrain-map-100x43.png"); }
.map-switch-button.pale { background-image: url("../images/map-switch-button/pale-map-100x43.png"); }
.map-switch-button.old-west { background-image: url("../images/map-switch-button/old-west-map-100x43.png"); }
.map-switch-button.digital { background-image: url("../images/map-switch-button/blade-map-100x43.png"); }

.map-switch-button.pencil{background-image:url("../images/map-switch-button/pencil-map-100x43.png");}
.map-switch-button.pirate{background-image:url("../images/map-switch-button/pirate-map-100x43.png");}
.map-switch-button.comic{background-image:url("../images/map-switch-button/comic-map-100x43.png");}
.map-switch-button.newspaper{background-image:url("../images/map-switch-button/newspaper-map-100x43.png");}
.map-switch-button.popart{background-image:url("../images/map-switch-button/pop-art-map-100x43.png");}

.map-switch-button:hover{opacity:1.0;border-color:#fff;}

.run-map-container             .add-note-button{left:60px;top:6px;height:60px;width:60px;border-radius:25px;background-image:url("../images/sketch-book-48x48.png");z-index:100;cursor:pointer;position:absolute;color:#fff;border:2px solid #CCCCCC;opacity:0.9;background-position:8px center;background-repeat:no-repeat;}
.run-map-container.black-white .add-note-button{background-color:#aaa;}
.run-map-container.color       .add-note-button{background-color:#fff;}
.run-map-container             .add-note-button:hover{opacity:1.0;border-color:#fff;}

.run-map-container .view-options{position:absolute;left:140px;top:30px;z-index:100}
.run-map-container .view-options div.view-types{position:absolute;width:45px;height:45px;border-radius:45px;border:8px solid #999;overflow:hidden;background-color:#999;}
.run-map-container .view-options div.view-option{position:absolute;top:0px;height:45px;width:45px;margin-right:7px;cursor:pointer;border-radius:50%;}
.run-map-container.color       .view-options div.view-option{background-color: #aaa;border-color:#999;}
.run-map-container.color       .view-options .view-option:hover{background-color:#ccc;border-color:#aaa;}
.run-map-container.black-white .view-options div.view-option{background-color: #999;border-color:#888;}
.run-map-container.black-white .view-options div.view-option:hover{background-color:#ccc;border-color:#aaa;}
.run-map-container.color       .speed             .view-option.speed{background-color: #f9f9f9;border-color:#aaa;z-index:11;}
.run-map-container.color       .speedGA           .view-option.speed-ga{background-color: #f9f9f9;border-color:#aaa;z-index:11;}
.run-map-container.color       .grade             .view-option.grade{background-color: #f9f9f9;border-color:#aaa;z-index:11;}
.run-map-container.color       .hrOfMax           .view-option.heart-rate{background-color: #f9f9f9;border-color:#aaa;z-index:11;}
.run-map-container.color       .cadence           .view-option.cadence{background-color: #f9f9f9;border-color:#aaa;z-index:11;}
.run-map-container.color       .strideLength      .view-option.stride-length{background-color: #f9f9f9;border-color:#aaa;z-index:11;}
.run-map-container.color       .satellites        .view-option.satellites{background-color: #f9f9f9;border-color:#aaa;z-index:11;}
.run-map-container.color       .gpsAccuracy       .view-option.gps{background-color: #f9f9f9;border-color:#aaa;z-index:11;}
.run-map-container.color       .power             .view-option.power{background-color: #f9f9f9;border-color:#aaa;z-index:11;}
.run-map-container.color       .powerForm         .view-option.powerForm{background-color: #f9f9f9;border-color:#aaa;z-index:11;color:#bbb;}
.run-map-container.black-white       .speed       .view-option.speed{background-color: #eee;border-color:#ddd;z-index:11;}
.run-map-container.black-white       .speedGA     .view-option.speed-ga{background-color: #eee;border-color:#ddd;z-index:11;}
.run-map-container.black-white       .grade       .view-option.grade{background-color: #eee;border-color:#ddd;z-index:11;}
.run-map-container.black-white       .hrOfMax     .view-option.heart-rate{background-color: #eee;border-color:#ddd;z-index:11;}
.run-map-container.black-white       .cadence     .view-option.cadence{background-color: #eee;border-color:#ddd;z-index:11;}
.run-map-container.black-white       .satellites  .view-option.satellites{background-color: #eee;border-color:#ddd;z-index:11;}
.run-map-container.black-white       .gpsAccuracy .view-option.gps{background-color: #eee;border-color:#ddd;z-index:11;}
.run-map-container.black-white       .power       .view-option.power{background-color: #eee;border-color:#ddd;z-index:11;}
.run-map-container.black-white       .powerForm   .view-option.powerForm{background-color: #eee;border-color:#ddd;z-index:11;}


.run-map-container.screenshot .segments-and-splits { display: none; }
.run-map-container.screenshot .run-stats { background-color:rgba(255,255,255,0.8); padding:5em; }
.run-map-container.screenshot .run-stats dt { font-size: 2em; padding: 0.5em 0 0 0;}
.run-map-container.screenshot .run-stats dd { font-size: 6em; }
.run-map-container.screenshot .map-overlay-d3 path{ stroke: #ff6600; stroke-width: 5px; }
.run-map-container.screenshot .stat-container { background-color:rgba(255,255,255,0.8); position:absolute; text-align:center; }
.run-map-container.screenshot .stat-container > div { padding: 3em; }
.run-map-container.screenshot .stat-container.stat-1{ top: 0px; left: 0px; border-radius:0 10em 10em 10em; }
.run-map-container.screenshot .stat-container.stat-2 { top: 0px; right: 0px; border-radius:0 0 0 10em; }
.run-map-container.screenshot .stat-container.stat-2 .timeofday { font-size:0.8em;  }
.run-map-container.screenshot .stat-container        .birthday .value{ font-size:3em; color:#cc0000; font-weight:bold; text-align:center;}
.run-map-container.screenshot .stat-container        .birthday .label{ font-size:4em; color:#cc0000; font-weight:bold; text-align:center; font-style:italic; }
.run-map-container.screenshot .stat-container .label { font-size: 2em; text-align:center;}
.run-map-container.screenshot .stat-container .value { font-size: 7em; text-align:center;}
.run-map-container.screenshot .stat-container .value span { font-size: 0.4em; }
.run-map-container.screenshot .elevation-graph { background-color: rgba(255,255,255,0.2); position: absolute; bottom: -5px; padding-top: 10px; width: 100%; height: 200px; }
.run-map-container.screenshot .elevation-graph svg { position:absolute; bottom: 0px; }
.run-map-container.screenshot .elevation-graph path { fill: #3d3c3c; }
.run-map-container.screenshot .elevation-graph circle { fill:#fff; stroke: #333; }
.run-map-container.screenshot .elevation-graph line { stroke: #fff; stroke-width:1.5; }


.run-map-container             .zoomer{border-color:#555;left:49px;top:40px;z-index:99;}
.run-map-container.color       .zoomer{background-color:#fff;}
.run-map-container.black-white .zoomer{background-color:#999;}
.run-map-container .zoomin{left:80px;}
.run-map-container .map-attribution{margin-left:-100px;}
.run-map-container path{opacity:1.0;}
.run-map-container .start {position:absolute;pointer-events:all;background-color:#ffcc00;height:15px;width:15px;border-radius:15px;margin-left:-7px;margin-top:-10px;font-weight:normal;line-height:14px;color:#444;text-align:center;font-size:10px;z-index:2;}
.run-map-container .end {position:absolute;pointer-events:all;background-color:#ffcc00;height:15px;width:15px;border-radius:15px;margin-left:-7px;margin-top:-10px;font-weight:normal;line-height:14px;color:#444;text-align:center;font-size:10px;z-index:2;}
.run-map-container .start.end{width:25px;margin-left:-12px;}
     
.run-map-container             .run-stats{z-index:100;position:absolute;left:10px;top:120px;padding:10px 20px;opacity:0.9;border-radius:0.75em;}
.run-map-container.color       .run-stats{background-color:#fff;color:#333;}
.run-map-container.black-white .run-stats{background-color:#333;color:#fff;}
.run-map-container             .run-stats dt{width:100%;text-align:left;font-size:1.0em;border-bottom:1px solid #ccc;text-transform:capitalize;}
.run-map-container.color       .run-stats dt{color:#777;}
.run-map-container.black-white .run-stats dt{color:#aaa;}
.run-map-container             .run-stats dd{width:100%;line-height:1.4em;margin-bottom:0.1em;text-align:left;font-size:2.0em;}
.run-map-container             .run-stats dd span{font-size:0.5em;}
.run-map-container.black-white .run-stats dd{color:#ccc;}
.run-map-container.color       .run-stats dd{color:#555;}
.run-map-container .legend {z-index:999;position:absolute;}    
.run-map-container .legend .y-axis{padding-top:5px;clear:both;height:16px;}
.run-map-container.black-white  .legend .y-axis{background-color:#111;}
.run-map-container             .legend .y-axis .text{float:left;opacity:1;font-size:0.85em;text-align:right;width:41px;opacity:1;margin-top:-2px;}
.run-map-container             .legend .y-axis.gpsAccuracy .text div{margin-right:28%;}
.run-map-container             .legend .y-axis .text div{margin-right:-28%;text-transform:capitalize;}
.run-map-container             .legend .y-axis .text{color:#000;}
.run-map-container.black-white .legend .y-axis .text{color:#bbb;}

.run-map-container .block.selected .value-label{display:block;margin-top:-2.2em;font-size:1.0em;height:1.15em;border-radius:0.5em;border:none;margin-left:1px;}
.run-map-container             .legend .value-label{display:none;font-size:0.75em;opacity:0.85;width:41px;height:15px;margin-top:-21px;padding:2px 0px;text-align:center;border:1px solid #333;margin-left:-1px}
.run-map-container.black-white .legend .value-label{color:#fff;background-color:#000;}
.run-map-container             .legend .value-label{color:#111;background-color:#fff;}
.run-map-container .legend .value-label span{font-size:0.65em;color:#666;}

.run-map-container .legend .block{cursor:pointer;width:40px;height:100%;float:left;border:1px solid #333;margin-left:-1px;}
.run-map-container .legend .block:hover .value-label{display:block;}
.run-map-container .legend .block:hover {opacity:1}
.run-map-container .legend .deselect{position: absolute;padding: 0.2em 0.7em;background-color: #333333;border: 1px solid #777777;border-radius: 0.5em;color: #ccc;font-size: 0.85em;text-align: center;}
.run-map-container .legend .deselect:hover{border-color:#aaa;color:#fff;cursor:pointer;}
.run-map-container .block{opacity:0.85;}
.run-map-container .block.deselected{opacity:0.5}
.run-map-container .block.selected{opacity:1}

.run-map-container .filter-label { position: absolute; z-index: 10; color:#666; padding:0.5em 1em;background-color:rgba(255,255,255,0.7);border-radius:0.3em}
.run-map-container .filter-label .remove { height:1.25em;width:1.25em; text-align:center;display:inline-block;background-color: #bababa; color: #ececec; border-radius: 2em; font-size:0.9em; margin:0px 0px 0px 0.2em;font-weight:bold;cursor:pointer;}

.run-map-container .segments-and-splits{position:absolute;top:140px;right:10px;z-index:100;}
.run-map-container .segments-and-splits .splits-container::-webkit-scrollbar-thumb { background-color: #444; }
.run-map-container .segments-and-splits .splits-container::-webkit-scrollbar-track { background-color: #aaa; border-radius:5px; }
.run-map-container .segments-and-splits .splits-container::-webkit-scrollbar { width:6px; background-color: #fff; }


.run-map-container .splits-container, .run-map-container .segments-container, .run-map-container .laps-container{width:180px;}
.run-map-container .segments-and-splits.splits .segments-container{display:none;}
.run-map-container .segments-and-splits.splits .laps-container{display:none;}
.run-map-container .segments-and-splits.segments .splits-container{display:none;}
.run-map-container .segments-and-splits.segments .laps-container{display:none;}
.run-map-container .segments-and-splits.laps .segments-container{display:none;}
.run-map-container .segments-and-splits.laps .splits-container{display:none;}
.run-map-container .segments-and-splits.splits .menu .splits{background-color:#fff;}
.run-map-container .segments-and-splits.segments .menu .segments{background-color:#fff;}
.run-map-container .segments-and-splits.laps .menu .laps{background-color:#fff;}
.run-map-container .segments-and-splits .menu div{position:absolute;top:-2em;padding:0.5em 0.7em;cursor:pointer;font-size:0.9em;background-color:#d8d8d8;display:inline-block;border-radius:0.5em 0.5em 0em 0em;}
.run-map-container .segments-and-splits .menu .segments{left:0px;}
.run-map-container .segments-and-splits .menu .splits{left:6.3em;}
.run-map-container .segments-and-splits .menu .laps{left:130px;}

.run-map-container .segments-and-splits .headers {border-bottom:1px solid #333;}
.run-map-container .segments-and-splits .headers div{display:inline-block;text-align:left;height:1.45em;font-style:italic;}

.run-map-container .splits-container, .run-map-container .segments-container, .run-map-container .laps-container{border-radius:0 0 0.5em 0.5em;background-color:#fff;opacity:0.9;padding:5px 5px 20px 5px;z-index:99;}
.run-map-container .splits-container .split{border-bottom:1px solid #eee;}
.run-map-container .splits-container .color-code{width:8px;margin-right:10px;}
.run-map-container .splits-container .number{width:35px;}
.run-map-container .splits-container .ref-value{width:50px;}

.run-map-container .splits-container .split { cursor: pointer; }
.run-map-container .splits-container .split.deselected{background-color:#ddd;}
.run-map-container .splits-container .split:hover{background-color:#eee;}
.run-map-container .splits-container .split > div{display:inline-block;height:1.4em;padding-top:0.15em;vertical-align:bottom;text-align:left;font-size:0.95em;}
.run-map-container .splits-container .split .color-code{margin-top:1px;margin-bottom:1px;}
.run-map-container .splits-container .split .change {width:40px;position:relative;}
.run-map-container .splits-container .split .change .graph{height:0.85em;margin-top:0.15em;}
.run-map-container .splits-container .split .change .graph.down{margin-right:20px;float:right;background-color:#aa0000;}
.run-map-container .splits-container .split .change .graph.up{margin-left:20px;float:left;background-color:#00aa00;}
.run-map-container .splits-container .split .change .midpoint{position:absolute;left:50%;border-left:1px solid #777;height:115%;}

.run-map-container .laps-container .split{border-bottom:1px solid #eee;}
.run-map-container .laps-container .color-code{width:8px;margin-right:10px;}
.run-map-container .laps-container .number{width:35px;}
.run-map-container .laps-container .ref-value{width:50px;}

.run-map-container .laps-container .lap-type { cursor: pointer; }
.run-map-container .laps-container .lap-type.deselected { background-color: #ddd; }
.run-map-container .laps-container .lap-type:hover { background-color: #eee; }
.run-map-container .laps-container .lap-type > div { display: inline-block; height: 1.4em; padding-top: 0.15em; vertical-align: bottom; text-align: left; font-size: 0.95em; }
.run-map-container .laps-container .lap-type-name { width: 60px; }

.run-map-container .laps-container .lap{cursor:pointer;}
.run-map-container .laps-container .lap.deselected{background-color:#ddd;}
.run-map-container .laps-container .lap.selected { background-color: #eee; }
.run-map-container .laps-container .lap:hover{background-color:#eee;}
.run-map-container .laps-container .lap > div{display:inline-block;height:1.4em;padding-top:0.15em;vertical-align:bottom;text-align:left;font-size:0.95em;}
.run-map-container .laps-container .lap .color-code{margin-top:1px;margin-bottom:1px;}
.run-map-container .laps-container .lap .change {width:40px;position:relative;}
.run-map-container .laps-container .lap .change .graph{height:0.85em;margin-top:0.15em;}
.run-map-container .laps-container .lap .change .graph.down{margin-right:20px;float:right;background-color:#aa0000;}
.run-map-container .laps-container .lap .change .graph.up{margin-left:20px;float:left;background-color:#00aa00;}
.run-map-container .laps-container .lap .change .midpoint{position:absolute;left:50%;border-left:1px solid #777;height:115%;}

.run-map-container .segments-container .segment{cursor:pointer;border-bottom:1px solid #eee;}
.run-map-container .segments-container .segment.deselected{background-color:#ddd;}
.run-map-container .segments-container .segment > div{display:inline-block;height:1.4em;padding-top:0.15em;vertical-align:bottom;text-align:left;font-size:0.95em;}
.run-map-container .segments-container .segment:hover{background-color:#eee;}
.run-map-container .segments-container .color-code{width:8px;margin-right:10px;margin-top:1px;margin-bottom:1px;}
.run-map-container .segments-container .distance{width:45px;margin-right:10px;}
.run-map-container .segments-container .pace{width:40px;}
.run-map-container .segments-container .spi{width:40px;}


/* map plot dimensions */
.view-option{background-image: url("../images/sprites/mapIcons-240x199v3.png"); background-repeat: no-repeat;}
.view-option.speed{background-position: -2px -103px; height:30px; width:30px;}
.view-option.speed-ga{background-position: -42px -145px; height:30px; width:30px;}
.view-option.grade{background-position: -169px -106px; height:30px; width:30px;}
.view-option.cadence{background-position: -43px -104px; height:30px; width:30px;}
.view-option.stride-length{background-position: -2px -144px; height:30px; width:30px;}
.view-option.heart-rate{background-position: -85px -103px; height:30px; width:30px;}
.view-option.satellites{background-position: -125px -105px; height:30px; width:30px;}
.view-option.gps{background-position: -124px -104px; height:30px; width:30px;}
.view-option.temperature{background-position: -198px -73px; height: 34px; width: 20px;}
.view-option.power{background-position:-84px -143px; width: 16px; height: 30px;}
.view-option.powerForm{background-position: -75px -143px;width: 16px;height: 30px;font-size: 24px;line-height: 42px;color: #dddd;text-indent: 8px;vertical-align: middle;font-style:italic;font-weight:bold;}
.view-option.powerForm::after { content: "F"; }

/* map annotation icons */
#mapIconContainer{position:absolute;left:0px;top:0px;width:425px;height:80px;background-color:#eaa500;padding:2px 5px;border-radius:8px 8px 0px 0px} 
#mapIconContainer > div{cursor:pointer;}
#mapIconContainer ul li{float:left; list-style-type:none; padding:3px;border-width:0px;border-radius:20px;margin:1px 5px 0px 5px;border:1px solid transparent;}
#mapIconContainer li:hover{background-color:#EAD9B0;cursor:pointer;}
#mapIconContainer li.selected{background-color:#EACC84;cursor:pointer;}

.tracker-legend-pause{position:absolute;background-color:#eee;color:#444;padding:1px 4px 1px 4px;z-index:2;color:#f1f1f1;background-color:#666;font-size:12px;}
.tracker-legend{position:absolute;background-color:#eee;color:#444;padding:0px 4px 0px 4px;z-index:2}
.tracker-legend .value{font-size:14px;color:#444;}
.tracker-legend .label{font-size:11px;color:#777;}
.leaflet-marker-icon.map-icon-tracker{height:12px;width:12px;margin-left:-6px;margin-top:-6px;border-radius:12px;background-color:#fff;border:2px solid #666;}
.leaflet-marker-icon.map-icon-pause{height:12px;width:12px;margin-left:-6px;margin-top:-6px;border-radius:12px;background-color:#000;border:2px solid #fff;}

.leaflet-marker-icon.map-icon-base{height:12px;width:12px;margin-left:-4px;margin-top:-4px;border-radius:5px;background-color:#fff;border:1px solid #666;}
.leaflet-marker-icon.map-icon{margin-left:-13px;margin-top:-14px;border-radius:20px;background-color:#fff;border:2px solid #999;height:32px; width: 32px; }
.leaflet-marker-icon.map-icon.good{background-color:#e9e9e9;border-color:#008800;}
.leaflet-marker-icon.map-icon.neutral{background-color:#e9e9e9;border-color:#999999;}
.leaflet-marker-icon.map-icon.bad{background-color:#e9e9e9;border-color:#880000;}

.map-icon{background-image: url('../images/sprites/mapIcons240x199.png');height:20px; width: 20px; background-repeat: no-repeat;padding: 2px;}
.map-icon.water-stop{background-position: -6px -6px;}
.map-icon.stoplight{background-position: -40px -7px;}
/*.map-icon.low-battery{background-position: -74px -6px;}*/
.map-icon.goose{background-position:-72px -8px;}
.map-icon.info{background-position:-106px -8px;}
.map-icon.hr-recovery{background-position: -139px -6px;}
/*.map-icon.compass{background-position: -176px -8px;}*/
.map-icon.sneakers{background-position:-178px -6px;}
.map-icon.arrowed{background-position: -8px -40px;}
.map-icon.terrain-change{background-position: -40px -40px;}
.map-icon.gps-accuracy{background-position: -75px -40px;}
.map-icon.warning{background-position: -110px -40px;}
/*.map-icon.map{background-position: -144px -40px;}*/
.map-icon.car{background-position:-142px -38px;}
.map-icon.people{background-position: -179px -40px;}
.map-icon.dog{background-position: -7px -73px;}
.map-icon.beer{background-position: -37px -72px;}
/*.map-icon.crosswalk{background-position: -74px -72px;}*/
.map-icon.cyclist{background-position:-74px -72px;}
.map-icon.hill{background-position: -109px -72px;}
.map-icon.post-it{background-position: -141px -72px;}
.map-icon.flag{background-position: -176px -72px;}
.map-icon.smiley{background-position:-212px -40px;}
.map-icon.heart{background-position:-213px -5px;}


.leaflet-objects-pane .leaflet-popup-pane{margin-top:-15px;margin-left:4px;z-index:99;}

.leaflet-marker-icon.map-icon.water-stop{background-position: -4px -5px;}
.leaflet-marker-icon.map-icon.stoplight{background-position: -36px -5px;}
.leaflet-marker-icon.map-icon.low-battery{background-position: -71px -4px;}
.leaflet-marker-icon.map-icon.info{background-position:-104px -6px;}
.leaflet-marker-icon.map-icon.hr-recovery{background-position: -138px -4px;}
.leaflet-marker-icon.map-icon.compass{background-position: -174px -6px;}
.leaflet-marker-icon.map-icon.sneakers{background-position:-176px -4px;}
.leaflet-marker-icon.map-icon.arrowed{background-position: -6px -38px;}
.leaflet-marker-icon.map-icon.terrain-change{background-position: -39px -38px;}
.leaflet-marker-icon.map-icon.gps-accuracy{background-position: -73px -38px;}
.leaflet-marker-icon.map-icon.warning{background-position: -107px -39px;}
.leaflet-marker-icon.map-icon.warning{background-position: -107px -39px;}
.leaflet-marker-icon.map-icon.car{background-position: -140px -38px;}
.leaflet-marker-icon.map-icon.people{background-position: -176px -38px;}
.leaflet-marker-icon.map-icon.dog{background-position: -5px -70px;}
.leaflet-marker-icon.map-icon.goose{background-position:-70px -4px;}
.leaflet-marker-icon.map-icon.beer{background-position: -35px -70px;}
.leaflet-marker-icon.map-icon.crosswalk{background-position: -72px -69px;}
.leaflet-marker-icon.map-icon.cyclist{background-position:-72px -71px;}
.leaflet-marker-icon.map-icon.hill{background-position: -105px -71px;}
.leaflet-marker-icon.map-icon.post-it{background-position: -139px -70px;}
.leaflet-marker-icon.map-icon.flag{background-position: -174px -70px;}
.leaflet-marker-icon.map-icon.smiley{background-position:-209px -37px;}
.leaflet-marker-icon.map-icon.heart{background-position:-210px -3px;}

.leaflet-marker-icon.map-icon.active-marker{
    box-shadow: 3px 3px 7px #777; 
    
}

.run-map-container .add-note-overlay{position:absolute;z-index:9998;margin-left:-200px;top:150px;left:50%;height:240px;width:435px;background-color:#fff;border:1px solid #333;border-radius:8px;}
.run-map-container .add-note-overlay .explain-container{display:table;margin:-80px auto;}
.run-map-container .add-note-overlay .explain{text-align:center;font-size:35px;color:#111;opacity:0.7;background-color:#fff;padding:5px 10px;}
.run-map-container .add-note-overlay .close-button{position:absolute;right:-20px;top:-18px;height:28px;width:28px;font-weight:normal;background-color:#f6f6f6;color:#555;font-size:24px;line-height:28px;text-align:center;z-index:1;border-radius:30px;border:2px solid #555;}
.run-map-container .add-note-overlay .close-button:hover{color:#111;cursor:pointer;border-color:#111;background-color:#fff;}
.run-map-container .add-note-overlay h2{position:absolute;left:20px;top:20px;font-size:16px;color:#333;}
.run-map-container .add-note-overlay .note-text-explain{position:absolute;top:91px;left:100px;z-index:3;font-size:18px;color:#888;}
.run-map-container .add-note-overlay .note-text{position:absolute;color:#666;top:69px;left:0px;width:395px;height:37px;padding:20px;font-size:16px;z-index:3;background-color:#fafafa;font-family:Arial;border:none;border-top:1px solid #333;}
.run-map-container .add-note-overlay .slider-container{position:absolute;top:135px;width:435px;}
.run-map-container .add-note-overlay .slider-container .jslider .jslider-pointer{top:4px;}
.run-map-container .add-note-overlay .note-save-button{position:absolute;bottom:14px;right:20px;}
.run-map-container .add-note-overlay .note-remove-button{position:absolute;bottom:14px;right:95px;}
.run-map-container .add-note-overlay .select-icon{position:absolute;bottom:2px;left:24px;}
.run-map-container .add-note-overlay .sentiment-container{position:absolute;overflow:hidden;left:22px;bottom:20px;}
.run-map-container .add-note-overlay .sentiment-container div{float:left;width:55px;color:#e9e9e9;font-size:14px;padding:3px 1px;text-align:center;background-color:#ccc;}
.run-map-container .add-note-overlay .sentiment-container div:hover{cursor:pointer;}
.run-map-container .add-note-overlay .sentiment-container .good{border-radius:8px 0px 0px 8px;}
.run-map-container .add-note-overlay .sentiment-container .neutral{}
.run-map-container .add-note-overlay .sentiment-container .bad{border-radius:0px 8px 8px 0px;}
.run-map-container .add-note-overlay .sentiment-container .good.selected{background-color:#008800;}
.run-map-container .add-note-overlay .sentiment-container .neutral.selected{background-color:#888;}
.run-map-container .add-note-overlay .sentiment-container .bad.selected{background-color:#880000}
.run-map-container .add-note-overlay .sentiment-container .good:hover{background-color:#00aa00;}
.run-map-container .add-note-overlay .sentiment-container .neutral:hover{background-color:#aaa;}
.run-map-container .add-note-overlay .sentiment-container .bad:hover{background-color:#aa0000}

.run-map-container .add-note-overlay .sentiment-label{position:absolute;bottom:4px;left:84px;color:#666;font-size:11px;}
.run-map-container .icon-select-overlay{position:absolute;z-index:9999;margin-left:-250px;top:310px;left:50%;padding:2px;width:200px;background-color:#fff;border:1px solid #333;border-radius:8px;}
.run-map-container .color-select-overlay{position:absolute;z-index:9999;margin-left:-250px;top:260px;left:50%;padding:5px;width:146px;background-color:#fff;border:1px solid #333;border-radius:8px;}
.run-map-container .size-select-overlay{position:absolute;z-index:9999;margin-left:-250px;top:330px;left:50%;padding:5px;width:115px;height:57px;background-color:#fff;border:1px solid #333;border-radius:8px;line-height:12px;}
.run-map-container .size-select-overlay img{float:left;margin:4px;border:none;cursor:pointer;}
.run-map-container.black-white  .icon-start-end{color:#111;background-color:#ccbb00;border:0px;font-size:10px;line-height:14px;}
.run-map-container              .icon-start-end{line-height:14px;border-radius:10px;background-color:#ffee00;text-align:center;font-weight:bold;border:1px solid #aaa;font-size:10px;cursor:pointer;}
.run-map-container              .icon-start-end.start.end{width:30px;height:15px;margin-left:-15px;margin-top:-8px;}
.run-map-container .icon-split{margin-top:-8px; margin-left:-8px; padding:1px 3px;background-color:#fafafa;border-radius:10px;font-weight:normal;line-height:11px;font-size:10px;color:#444;text-align:center;z-index:2;border:1px solid #777;cursor:pointer;-moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box;}
.run-map-container .icon-new-note{margin-left:-11px;margin-top:-11px;height:22px;width:22px;border-radius:10px;background-color:#fff;border:1px solid #555;background-repeat:no-repeat;background-position:3px 3px;}
.run-map-container .icon-new-note{background-image:url("../images/map-icons/traffic-light-exclamation.png");}
.run-map-container .jslider .jslider-value{top:30px;color:#666;}

#hoverBox.map-pause { border: 0px; font-size: 8px; border-radius:none;}
.run-map-container .run-graph{z-index:100;position:absolute; left:0px;bottom:0px;padding-top:12px;border-top:1px solid #333;}
.run-map-container.color .run-graph.shaded{background-color:rgba(255,255,255,0.85);}
.run-map-container.black-white .run-graph.shaded{background-color:rgba(10,10,10,0.9);}
.run-map-container .run-graph.v1 .line{fill:none;stroke:#555;stroke-width:1.5px;}
.run-map-container .run-graph.v2 .line{fill:#000;stroke:none;opacity:0.85;}
.run-map-container .run-graph.v2 .overlay-line{fill:none;stroke:#fff;stroke-width:1.5px;}
.run-map-container .run-graph .axis path{fill:none;stroke:#555;shape-rendering: crispEdges;}
.run-map-container.color .run-graph .axis{font-size:10px;fill:#555;}
.run-map-container.color .run-graph .axis{font-size:10px;fill:#555;}
.run-map-container.black-white .run-graph .axis{font-size:10px;fill:#ccc;}
.run-map-container.black-white .run-graph .axis{font-size:10px;fill:#ccc;}
.run-map-container .run-graph .selected{opacity:1;}
.run-map-container .run-graph .deselected{opacity:0.1;}
.run-map-container .run-graph .focus-overlay { fill: none; pointer-events: all;}
.run-map-container .run-graph .focus {z-index:999;}
.run-map-container .run-graph .focus circle {fill: #fff; stroke: #333;}
.run-map-container .run-graph .focus rect{fill:#eee;}
.run-map-container .run-graph .focus rect.pause { fill: #666; }
.run-map-container .run-graph .focus text tspan.value{font-size:12px;fill:#444;}
.run-map-container .run-graph .focus text tspan.value.pause{fill:#f1f1f1;}
.run-map-container .run-graph .focus text tspan.label{font-size:8px;fill:#666;}
.run-map-container .run-graph .focus.distance text tspan.value { font-size: 11px; fill:#d6d6d6;}
.run-map-container .run-graph .focus.distance text tspan.label { font-size: 9px; fill:#c6c6c6;}
.run-map-container .run-graph .focus.distance rect.tick { fill: #fff; opacity: 0.45; }
.run-map-container .run-graph .pause-line{fill:#111;}
.run-map-container .run-graph .lap-line{fill:#fff;}

.run-map-container .run-graph .focus text.diagnostic { white-space: pre; }
.run-map-container .run-graph .focus text.diagnostic .label { width: 30px; fill: #444; font-size: 10px; }
.run-map-container .run-graph .focus text.diagnostic .value { width: 80px; fill: #000; font-size: 12px; }
.run-map-container .run-graph .focus text.diagnostic .unit { fill: #666; font-size: 8px; }
.run-map-container .run-graph .focus text.diagnostic .value.pause { fill: #f00; font-weight:bold; }
.run-map-container .run-graph circle.gps-point { fill: #eee; stroke:#111; fill-opacity: 0.8; stroke-opacity:0.4}
.run-map-container .run-graph circle.gps-point.after-pause { fill-opacity: 1; stroke: #ff0; stroke-width:3px; fill:#000;stroke-opacity:1;}
.run-map-container .run-graph circle.gps-point.interpolated { stroke: #fff; fill:#000; stroke-opacity:1;}

.map-overlay-d3 { position:absolute; z-index:1;}
.run-map-container .map-overlay-d3 path.selected{opacity:1;}
.run-map-container .map-overlay-d3 path.deselected { stroke-opacity:0.3;}
.map-overlay-d3 path.width-2 { stroke-width: 2px; }
.map-overlay-d3 path.width-3 { stroke-width: 3px; }
.map-overlay-d3 path.width-4 { stroke-width: 4px; }
.map-overlay-d3 path.width-5 { stroke-width: 5px; }
.map-overlay-d3 path.width-6 { stroke-width: 6px; }
.map-overlay-d3 path.width-2.selected { stroke-width: 4px; }
.map-overlay-d3 path.width-3.selected { stroke-width: 5px; }
.map-overlay-d3 path.width-4.selected { stroke-width: 7px; }
.map-overlay-d3 path.width-5.selected { stroke-width: 8px; }
.map-overlay-d3 path.width-6.selected { stroke-width: 9px; }
.map-overlay-d3 path.width-2.deselected { stroke-width: 1px; }
.map-overlay-d3 path.width-3.deselected { stroke-width: 2px; }
.map-overlay-d3 path.width-4.deselected { stroke-width: 2px; }
.map-overlay-d3 path.width-5.deselected { stroke-width: 3px; }
.map-overlay-d3 path.width-6.deselected { stroke-width: 4px; }

.map-overlay-d3 path.width-4.deselected { stroke-opacity:0.5; }

.map-overlay-d3  path {
    stroke-width: 4px;        
    fill:none;
}

/*  Everything except %grade and hrOfMax uses the same default color scale. 
    This could change easily enough in the future */   

.zone-map .default.zone-0{stroke:#813f3f;fill:#813f3f;background-color:#813f3f}      
.zone-map .default.zone-1{stroke:#94413e;fill:#94413e;background-color:#94413e;}  
.zone-map .default.zone-2{stroke:#94413E;fill:#94413E;background-color:#94413E;}  
.zone-map .default.zone-3{stroke:#a6433d;fill:#a6433d;background-color:#a6433d;}  
.zone-map .default.zone-4{stroke:#C04F3F;fill:#C04F3F;background-color:#C04F3F;}  
.zone-map .default.zone-5{stroke:#d95a41;fill:#d95a41;background-color:#d95a41;}  
.zone-map .default.zone-6{stroke:#e67732;fill:#e67732;background-color:#e67732;}  
.zone-map .default.zone-7{stroke:#fa930c;fill:#fa930c;background-color:#fa930c;} 
.zone-map .default.zone-8{stroke:#f7a820;fill:#f7a820;background-color:#f7a820;} 
.zone-map .default.zone-9{stroke:#f7ca25;fill:#f7ca25;background-color:#f7ca25;} 
.zone-map .default.zone-10{stroke:#efd52a;fill:#efd52a;background-color:#efd52a;} 
.zone-map .default.zone-11{stroke:#e6df2e;fill:#e6df2e;background-color:#e6df2e;}
.zone-map .default.zone-12{stroke:#ccd916;fill:#ccd916;background-color:#ccd916;}
.zone-map .default.zone-13{stroke:#97bf1d;fill:#97bf1d;background-color:#97bf1d;}
.zone-map .default.zone-14{stroke:#70ac16;fill:#70ac16;background-color:#70ac16;}
.zone-map .default.zone-15{stroke:#49990f;fill:#49990f;background-color:#49990f;}
.zone-map .default.zone-16{stroke:#078c55;fill:#078c55;background-color:#078c55;}
.zone-map .default.zone-17{stroke:#03766e;fill:#03766e;background-color:#03766e;}
.zone-map .default.zone-18{stroke:#006b73;fill:#006b73;background-color:#006b73;}
.zone-map .default.zone-19{stroke:#096a8d;fill:#096a8d;background-color:#096a8d;}
.zone-map .default.zone-20{stroke:#1168a6;fill:#1168a6;background-color:#1168a6;}
.zone-map .default.zone-21{stroke:#0a7bcc;fill:#0a7bcc;background-color:#0a7bcc;}
.zone-map .default.zone-22{stroke:#0b83d9;fill:#0b83d9;background-color:#0b83d9;}
.zone-map .default.zone-23{stroke:#0b8be6;fill:#0b8be6;background-color:#0b8be6;}
.zone-map .default.zone-24{stroke:#0694f1;fill:#0694f1;background-color:#0694f1;}
.zone-map .default.zone-25{stroke:#009cfc;fill:#009cfc;background-color:#009cfc;}
.zone-map .default.zone-26{stroke:#2cadfc;fill:#2cadfc;background-color:#2cadfc;}
.zone-map .default.zone-27{stroke:#57bdfc;fill:#57bdfc;background-color:#57bdfc;} 
.zone-map .default.zone-28{stroke:#83cefc;fill:#83cefc;background-color:#83cefc;} 
.zone-map .default.zone-29{stroke:#aedefc;fill:#aedefc;background-color:#aedefc;} 
.zone-map .default.zone-30{stroke:#cae9fc;fill:#cae9fc;background-color:#cae9fc;} 
.zone-map .default.zone-31{stroke:#ddf0fc;fill:#ddf0fc;background-color:#ddf0fc;} 
.zone-map .default.zone-32{stroke:#fff7f9;fill:#fff7f9;background-color:#fff7f9;} 
.zone-map .default.zone-33{stroke:#fff0f4;fill:#fff0f4;background-color:#fff0f4;} 
.zone-map .default.zone-34{stroke:#ffe8ee;fill:#ffe8ee;background-color:#ffe8ee;} 
.zone-map .default.zone-35{stroke:#ffdce7;fill:#ffdce7;background-color:#ffdce7;} 
.zone-map .default.zone-36{stroke:#ffccdc;fill:#ffccdc;background-color:#ffccdc;} 
.zone-map .default.zone-37{stroke:#ffb0cb;fill:#ffb0cb;background-color:#ffb0cb;} 

.zone-map.line .default{fill:none !important;}
.zone-map.line .grade{fill:none !important;}
.zone-map.line .hr{fill:none !important;}
.zone-map.line .satellites{fill:none !important;}
.zone-map.line .gpsAccuracy{fill:none !important;}

.zone-map .grade.zone-14{stroke:#990800;fill:#990800;background-color:#990800;}
.zone-map .grade.zone-13{stroke:#a41a12;fill:#a41a12;background-color:#a41a12;}
.zone-map .grade.zone-12{stroke:#B93D36;fill:#B93D36;background-color:#B93D36;}
.zone-map .grade.zone-11{stroke:#d9726c;fill:#d9726c;background-color:#c44f48;}     
.zone-map .grade.zone-10{stroke:#D98C88;fill:#D98C88;background-color:#d9726c;} 
.zone-map .grade.zone-9{stroke:#D98C88;fill:#D98C88;background-color:#D98C88;}     
.zone-map .grade.zone-8{stroke:#d9a5a3;fill:#d9a5a3;background-color:#DCCFCF;}     /* least saturated red   */
.zone-map .grade.zone-7{stroke:#dddddd;fill:#dddddd;background-color:#dddddd;}     /* off white		     */
.zone-map .grade.zone-6{stroke:#cfe5d2;fill:#cfe5d2;background-color:#D6E1D8;}     /* least saturated green */
.zone-map .grade.zone-5{stroke:#a3d9ab;fill:#a3d9ab;background-color:#a3d9ab;}     
.zone-map .grade.zone-4{stroke:#6cd97d;fill:#6cd97d;background-color:#6cd97d;}     
.zone-map .grade.zone-3{stroke:#2db241;fill:#2db241;background-color:#2db241;}     
.zone-map .grade.zone-2{stroke:#009917;fill:#009917;background-color:#009917;}     
.zone-map .grade.zone-1{stroke:#007719;fill:#007719;background-color:#007719;}     
.zone-map .grade.zone-0{stroke:#005500;fill:#005500;background-color:#005500;}     /* deep green            */

.zone-map .gpsAccuracy.zone-5{stroke:#616161;fill:#616161;background-color:#616161;}     /* bad slate*/
.zone-map .gpsAccuracy.zone-4{stroke:#de613e;fill:#de613e;background-color:#de613e;}     /* poor red*/
.zone-map .gpsAccuracy.zone-3{stroke:#de9b3e;fill:#de9b3e;background-color:#de9b3e;}     /* ok orange */
.zone-map .gpsAccuracy.zone-2{stroke:#ded93e;fill:#ded93e;background-color:#ded93e;}     /* good yellow */
.zone-map .gpsAccuracy.zone-1{stroke:#a9de3e;fill:#a9de3e;background-color:#a9de3e;}     /* great greenyellow*/
.zone-map .gpsAccuracy.zone-0{stroke:#3fde42;fill:#3fde42;background-color:#3fde42;}     /* best green */

.zone-map.legend .block.grade-14{background-color:#771111;}     /* deep red             */
.zone-map.legend .block.grade-13{background-color:#990800;}     
.zone-map.legend .block.grade-12{background-color:#B93D36;}     
.zone-map.legend .block.grade-11{background-color:#d9726c;}     
.zone-map.legend .block.grade-10{background-color:#D98C88;}     
.zone-map.legend .block.grade-9{background-color:#d9a5a3;}     
.zone-map.legend .block.grade-8{background-color:#DCCFCF;}      /* least saturated red   */
.zone-map.legend .block.grade-7{background-color:#c9c9c9;}      /* off white		     */
.zone-map.legend .block.grade-6{background-color:#D6E1D8;}      /* least saturated green */
.zone-map.legend .block.grade-5{background-color:#a3d9ab;}     
.zone-map.legend .block.grade-4{background-color:#6cd97d;}     
.zone-map.legend .block.grade-3{background-color:#2db241;}     
.zone-map.legend .block.grade-2{background-color:#009917;}
.zone-map.legend .block.grade-1{background-color:#007719;}
.zone-map.legend .block.grade-0{background-color:#005500;}      /* deep green            */

.zone-map .grade2.zone-11{stroke:#EE44AA;fill:#EE44AA;background-color:#EE44AA;}    /* pinkish red */
.zone-map .grade2.zone-10{stroke:#EA4491;fill:#EA4491;background-color:#EA4491;}     
.zone-map .grade2.zone-9{stroke:#E64477;fill:#E64477;background-color:#E64477;}     
.zone-map .grade2.zone-8{stroke:#E2445E;fill:#E2445E;background-color:#E2445E;}     
.zone-map .grade2.zone-7{stroke:#DD4444;fill:#DD4444;background-color:#DD4444;}     
.zone-map .grade2.zone-6{stroke:#D54411;fill:#D54411;background-color:#D54411;}     /* orange - pivot   */
.zone-map .grade2.zone-5{stroke:#D35A30;fill:#D35A30;background-color:#D35A30;}     
.zone-map .grade2.zone-4{stroke:#D1704E;fill:#D1704E;background-color:#D1704E;}     
.zone-map .grade2.zone-3{stroke:#CF876D;fill:#CF876D;background-color:#CF876D;}     
.zone-map .grade2.zone-2{stroke:#CD9D8C;fill:#CD9D8C;background-color:#CD9D8C;}     
.zone-map .grade2.zone-1{stroke:#CBB3AA;fill:#CBB3AA;background-color:#CBB3AA;}     
.zone-map .grade2.zone-0{stroke:#C9C9C9;fill:#C9C9C9;background-color:#C9C9C9;}     /* off white		     */

/*
.zone-map .hr.zone-4{stroke:#c10900;fill:#c10900;background-color:#c10900;}      bright red     
.zone-map .hr.zone-3{stroke:#d34600;fill:#d34600;background-color:#d34600;}      red orange     
.zone-map .hr.zone-2{stroke:#e19f00;fill:#e19f00;background-color:#e19f00;}      orange         
.zone-map .hr.zone-1{stroke:#dad700;fill:#dad700;background-color:#dad700;}      light orange   
.zone-map .hr.zone-0{stroke:#7bbb00;fill:#7bbb00;background-color:#7bbb00;}      lemon lime     
*/

.zone-map .hr.zone-0 { stroke: #7bd457; fill: #7bd457; background-color: #7bd457 } /* Zesty Green — Easy/recovery pace */
.zone-map .hr.zone-1 { stroke: #f1ff19; fill: #f1ff19; background-color: #f1ff19 } /* Neon Yellow — Comfortable endurance */
.zone-map .hr.zone-2 { stroke: #ffbc00; fill: #ffbc00; background-color: #ffbc00 } /* Solar Amber — Moderate effort */
.zone-map .hr.zone-3 { stroke: #FF7F00; fill: #FF7F00; background-color: #FF7F00 } /* Fiery Orange — Threshold level */
.zone-map .hr.zone-4 { stroke: #FF1E00; fill: #FF1E00; background-color: #FF1E00 } /* Crimson Blast — High-intensity anaerobic */
.zone-map .hr.zone-5 { stroke: #CC0000; fill: #CC0000; background-color: #CC0000 } /* Redline Red — Near-max or max effort */



.zone-map.legend .block.default-0{background-color:#813f3f;}  
.zone-map.legend .block.default-1{background-color:#94413E;}  
.zone-map.legend .block.default-2{background-color:#a6433d;}  
.zone-map.legend .block.default-3{background-color:#C04F3F;}  
.zone-map.legend .block.default-4{background-color:#d95a41;}  
.zone-map.legend .block.default-5{background-color:#e67732;}  
.zone-map.legend .block.default-6{background-color:#fa930c;} 
.zone-map.legend .block.default-7{background-color:#f7a820;} 
.zone-map.legend .block.default-8{background-color:#f7ca25;} 
.zone-map.legend .block.default-9{background-color:#efd52a;} 
.zone-map.legend .block.default-10{background-color:#e6df2e;}
.zone-map.legend .block.default-11{background-color:#ccd916;}
.zone-map.legend .block.default-12{background-color:#97bf1d;}
.zone-map.legend .block.default-13{background-color:#70ac16;}
.zone-map.legend .block.default-14{background-color:#49990f;}
.zone-map.legend .block.default-15{background-color:#078c55;}
.zone-map.legend .block.default-16{background-color:#03766e;}
.zone-map.legend .block.default-17{background-color:#006b73;}
.zone-map.legend .block.default-18{background-color:#096a8d;}
.zone-map.legend .block.default-19{background-color:#1168a6;}
.zone-map.legend .block.default-20{background-color:#0a7bcc;}
.zone-map.legend .block.default-21{background-color:#0b83d9;}
.zone-map.legend .block.default-22{background-color:#0b8be6;}
.zone-map.legend .block.default-23{background-color:#0694f1;}
.zone-map.legend .block.default-24{background-color:#009cfc;}
.zone-map.legend .block.default-25{background-color:#2cadfc;}
.zone-map.legend .block.default-26{background-color:#57bdfc;} 
.zone-map.legend .block.default-27{background-color:#83cefc;} 
.zone-map.legend .block.default-28{background-color:#aedefc;} 
.zone-map.legend .block.default-29{background-color:#cae9fc;} 
.zone-map.legend .block.default-30{background-color:#ddf0fc;} 
.zone-map.legend .block.default-31{background-color:#fff7f9;} 
.zone-map.legend .block.default-32{background-color:#fff0f4;} 
.zone-map.legend .block.default-33{background-color:#ffe8ee;} 
.zone-map.legend .block.default-34{background-color:#ffdce7;} 
.zone-map.legend .block.default-35{background-color:#ffccdc;} 
.zone-map.legend .block.default-36{background-color:#ffb0cb;}         

.zone-map.legend .block.grade-14{background-color:#771111;}     /* deep red             */
.zone-map.legend .block.grade-13{background-color:#990800;}     
.zone-map.legend .block.grade-12{background-color:#B93D36;}     
.zone-map.legend .block.grade-11{background-color:#d9726c;}     
.zone-map.legend .block.grade-10{background-color:#D98C88;}     
.zone-map.legend .block.grade-9{background-color:#d9a5a3;}     
.zone-map.legend .block.grade-8{background-color:#e5d0cf;}      /* least saturated red   */
.zone-map.legend .block.grade-7{background-color:#c9c9c9;}      /* off white		     */
.zone-map.legend .block.grade-6{background-color:#cfe5d2;}      /* least saturated green */
.zone-map.legend .block.grade-5{background-color:#a3d9ab;}     
.zone-map.legend .block.grade-4{background-color:#6cd97d;}     
.zone-map.legend .block.grade-3{background-color:#2db241;}     
.zone-map.legend .block.grade-2{background-color:#009917;}
.zone-map.legend .block.grade-1{background-color:#007719;}
.zone-map.legend .block.grade-0{background-color:#005500;}      /* deep green            */
      
/*
.zone-map.legend .block.hr-4{background-color:#c10900;}          bright red   
.zone-map.legend .block.hr-3{background-color:#d34600;}     
.zone-map.legend .block.hr-2{background-color:#e19f00;}     
.zone-map.legend .block.hr-1{background-color:#dad700;}     
.zone-map.legend .block.hr-0{background-color:#7bbb00;}         lemon lime    
*/

.zone-map.legend .block.hr-0 { background-color: #7bd457 } /* Zesty Green — Easy/recovery pace */
.zone-map.legend .block.hr-1 { background-color: #f1ff19 } /* Neon Yellow — Comfortable endurance */
.zone-map.legend .block.hr-2 { background-color: #ffbc00 } /* Solar Amber — Moderate effort */
.zone-map.legend .block.hr-3 { background-color: #FF7F00 } /* Fiery Orange — Threshold level */
.zone-map.legend .block.hr-4 { background-color: #FF1E00 } /* Crimson Blast — High-intensity anaerobic */
.zone-map.legend .block.hr-5 { background-color: #CC0000 } /* Redline Red — Near-max or max effort */


.zone-map.legend .block.gpsAccuracy-5{background-color:#616161;}        
.zone-map.legend .block.gpsAccuracy-4{background-color:#de613e;}        
.zone-map.legend .block.gpsAccuracy-3{background-color:#de9b3e;}     
.zone-map.legend .block.gpsAccuracy-2{background-color:#ded93e;}     
.zone-map.legend .block.gpsAccuracy-1{background-color:#a9de3e;}     
.zone-map.legend .block.gpsAccuracy-0{background-color:#3fde42;}        

/* special badges*/
.large.badge.badge-149{background-image:url('../images/lifetime/lifetimeSprite-badge-1370x120.png');height:120px;width:113px;}
.full.badge.badge-149{background-image:url('../images/lifetime/lifetimeSprite1950x172.png');height:172px;width:164px;}

.full.badge{height:160px;width:160px;}
.large.badge{height:120px;width:120px;}
.medium.badge{height:90px;width:90px;}


/* 160px badge images - full badges */
.full.badge-013{background-image:url('../images/badges/series-0/full/013-puffy.png'); }
.full.badge-031{background-image:url('../images/badges/series-0/full/031-veteran.png');}
.full.badge-500{background-image:url('../images/badges/series-0/full/500-runventure-1.png');}
.full.badge-151{background-image:url('../images/badges/series-0/full/151-twenty-four-hour.png');}
.full.badge-246{background-image:url('../images/badges/series-0/full/246-366-in-2020.png');}
.full.badge-247{background-image:url('../images/badges/series-0/full/247-annus-horribilis-2020.png');}
.full.badge-248{background-image:url('../images/badges/series-0/full/248-united-bronze.png');}
.full.badge-249{ background-image:url('../images/badges/series-0/full/249-united-silver.png');}
.full.badge-250{ background-image:url('../images/badges/series-0/full/250-united-gold.png');}

.full.badge-001{background-image:url('../images/badges/series-1/full/001-early-bird.png');}
.full.badge-002{background-image:url('../images/badges/series-1/full/002-night-owl.png');}
.full.badge-003{background-image:url('../images/badges/series-1/full/003-lunch-hour.png');}
.full.badge-004{background-image:url('../images/badges/series-1/full/004-popular.png');}
.full.badge-005{background-image:url('../images/badges/series-1/full/005-ocd.png');}
.full.badge-006{background-image:url('../images/badges/series-1/full/006-mile.png');}
.full.badge-007{background-image:url('../images/badges/series-1/full/007-marathon.png');}
.full.badge-008{background-image:url('../images/badges/series-1/full/008-ultra-marathon.png');}
.full.badge-009{background-image:url('../images/badges/series-1/full/009-half-marathon.png');height:161px;width:161px;}
.full.badge-010{background-image:url('../images/badges/series-1/full/010-10k.png');}
.full.badge-011{background-image:url('../images/badges/series-1/full/011-wesley.png');}
.full.badge-012{background-image:url('../images/badges/series-1/full/012-palin.png');}
.full.badge-251{background-image:url('../images/badges/series-1/full/251-strummer.png');}
.full.badge-014{background-image:url('../images/badges/series-1/full/014-oprah.png');}
.full.badge-015{background-image:url('../images/badges/series-1/full/015-katie.png');}
.full.badge-016{background-image:url('../images/badges/series-1/full/016-5for5.png');}
.full.badge-017{background-image:url('../images/badges/series-1/full/017-10for10.png');}
.full.badge-018{background-image:url('../images/badges/series-1/full/018-20for20.png');}
.full.badge-019{background-image:url('../images/badges/series-1/full/019-50for50.png');}
.full.badge-020{background-image:url('../images/badges/series-1/full/020-100for100.png');}
.full.badge-021{background-image:url('../images/badges/series-1/full/021-10.png');}
.full.badge-022{background-image:url('../images/badges/series-1/full/022-20.png');}
.full.badge-023{background-image:url('../images/badges/series-1/full/023-50.png');}
.full.badge-024{background-image:url('../images/badges/series-1/full/024-100.png');}
.full.badge-025{background-image:url('../images/badges/series-1/full/025-500.png');height:164px;}
.full.badge-026{background-image:url('../images/badges/series-1/full/026-10mileweek.png');}
.full.badge-027{background-image:url('../images/badges/series-1/full/027-25mileweek.png');}
.full.badge-028{background-image:url('../images/badges/series-1/full/028-30milemonth.png');}
.full.badge-029{background-image:url('../images/badges/series-1/full/029-75milemonth.png');}
.full.badge-030{background-image:url('../images/badges/series-1/full/030-300milemonth.png');}
.full.badge-032{background-image:url('../images/badges/series-1/full/032-beta.png');}
.full.badge-033{background-image:url('../images/badges/series-1/full/033-5k.png');}
.full.badge-034{background-image:url('../images/badges/series-1/full/034-birthday.png');}
.full.badge-035{background-image:url('../images/badges/series-1/full/035-corleone.png');}
.full.badge-036{background-image:url('../images/badges/series-1/full/036-buddy.png');}
.full.badge-037{background-image:url('../images/badges/series-1/full/037-got-friends.png');}
.full.badge-038{background-image:url('../images/badges/series-1/full/038-social-7.png');}
.full.badge-039{background-image:url('../images/badges/series-1/full/039-shares-well.png');}
.full.badge-040{background-image:url('../images/badges/series-1/full/040-pack-leader.png');}

.full.badge-101{background-image:url('../images/badges/series-2/full/101-nyc-philly.png');}
.full.badge-102{background-image:url('../images/badges/series-2/full/102-london-paris.png');}
.full.badge-103{background-image:url('../images/badges/series-2/full/103-sydney-melbourne.png');}
.full.badge-104{background-image:url('../images/badges/series-2/full/104-nyc-chicago.png');}
.full.badge-105{background-image:url('../images/badges/series-2/full/105-miami-toronto.png');}
.full.badge-106{background-image:url('../images/badges/series-2/full/106-chariots-of-fire.png');}
.full.badge-107{background-image:url('../images/badges/series-2/full/107-went-to-work.png');}
.full.badge-108{background-image:url('../images/badges/series-2/full/108-thats-a-day.png');}
.full.badge-109{background-image:url('../images/badges/series-2/full/109-week-not-weak.png');}
.full.badge-110{background-image:url('../images/badges/series-2/full/110-alamo.png');}
.full.badge-111{background-image:url('../images/badges/series-2/full/111-chillrunner.png');}
.full.badge-112{background-image:url('../images/badges/series-2/full/112-easyrunner.png');}
.full.badge-113{background-image:url('../images/badges/series-2/full/113-roadrunner.png');}
.full.badge-114{background-image:url('../images/badges/series-2/full/114-mercury.png');}
.full.badge-115{background-image:url('../images/badges/series-2/full/115-fast-slow.png');height:154px;}
.full.badge-126{background-image:url('../images/badges/series-2/full/126-staircase.png');}
.full.badge-127{background-image:url('../images/badges/series-2/full/127-steep-staircase.png');}
.full.badge-128{background-image:url('../images/badges/series-2/full/128-long-staircase.png');}
.full.badge-129{background-image:url('../images/badges/series-2/full/129-long-steep-staircase.png');}
.full.badge-130{background-image:url('../images/badges/series-2/full/130-towering-staircase.png');height:172px;}
.full.badge-131{background-image:url('../images/badges/series-2/full/131-showed-up-jan.png');}
.full.badge-132{background-image:url('../images/badges/series-2/full/132-showed-up-feb.png');}
.full.badge-133{background-image:url('../images/badges/series-2/full/133-showed-up-mar.png');}
.full.badge-134{background-image:url('../images/badges/series-2/full/134-showed-up-apr.png');}
.full.badge-135{background-image:url('../images/badges/series-2/full/135-showed-up-may.png');}
.full.badge-136{background-image:url('../images/badges/series-2/full/136-showed-up-jun.png');}
.full.badge-137{background-image:url('../images/badges/series-2/full/137-showed-up-jul.png');}
.full.badge-138{background-image:url('../images/badges/series-2/full/138-showed-up-aug.png');}
.full.badge-139{background-image:url('../images/badges/series-2/full/139-showed-up-sep.png');}
.full.badge-140{background-image:url('../images/badges/series-2/full/140-showed-up-oct.png');}
.full.badge-141{background-image:url('../images/badges/series-2/full/141-showed-up-nov.png');}
.full.badge-142{background-image:url('../images/badges/series-2/full/142-showed-up-dec.png');}
.full.badge-143{background-image:url('../images/badges/series-2/full/143-color-picker.png');}
.full.badge-144{background-image:url('../images/badges/series-2/full/144-365-days.png');}
.full.badge-145{background-image:url('../images/badges/series-2/full/145-365-days-in-2-years.png');}
.full.badge-146{background-image:url('../images/badges/series-2/full/146-365-days-in-a-row.png');}
.full.badge-147{background-image:url('../images/badges/series-2/full/147-365-in-a-year.png');}
.full.badge-148{background-image:url('../images/badges/series-2/full/148-366-in-a-year.png');}
.full.badge-150{background-image:url('../images/badges/series-2/full/150-translate.png');}/*translator badge*/

.full.badge-201{background-image:url('../images/badges/series-3/full/201-us-of-r.png');}
.full.badge-202{background-image:url('../images/badges/series-3/full/202-international-runner.png');}
.full.badge-203{background-image:url('../images/badges/series-3/full/203-top-and-bottom.png');}
.full.badge-204{background-image:url('../images/badges/series-3/full/204-four-corners.png');height:160px;width:160px}
.full.badge-205{background-image:url('../images/badges/series-3/full/205-international-super-runner.png');}
.full.badge-206{background-image:url('../images/badges/series-3/full/206-special-agent.png');}
.full.badge-207{background-image:url('../images/badges/series-3/full/207-the-gauntlet.png');}
.full.badge-208{background-image:url('../images/badges/series-3/full/208-green-beret.png');}
.full.badge-209{background-image:url('../images/badges/series-3/full/209-super-agent.png');}
.full.badge-210{background-image:url('../images/badges/series-3/full/210-ranger.png');}
.full.badge-211{background-image:url('../images/badges/series-3/full/211-strong-start.png');}
.full.badge-212{background-image:url('../images/badges/series-3/full/212-finish-strong.png');}
.full.badge-213{background-image:url('../images/badges/series-3/full/213-strong-in-between.png');}
.full.badge-214{background-image:url('../images/badges/series-3/full/214-strong-at-the-ends.png');}
.full.badge-215{background-image:url('../images/badges/series-3/full/215-strongest-finish.png');}
.full.badge-216{background-image:url('../images/badges/series-3/full/216-sunriser.png');}
.full.badge-217{background-image:url('../images/badges/series-3/full/217-full-moon-runner.png');}
.full.badge-218{background-image:url('../images/badges/series-3/full/218-sunsetter.png');}
.full.badge-219{background-image:url('../images/badges/series-3/full/219-longest-day.png');}
.full.badge-220{background-image:url('../images/badges/series-3/full/220-shortest-day.png');}
.full.badge-221{background-image:url('../images/badges/series-3/full/221-four-further.png');}
.full.badge-222{background-image:url('../images/badges/series-3/full/222-six-further.png');}
.full.badge-223{background-image:url('../images/badges/series-3/full/223-four-far-further.png');}
.full.badge-224{background-image:url('../images/badges/series-3/full/224-six-far-further.png');}
.full.badge-225{background-image:url('../images/badges/series-3/full/225-further-to-farther.png');}
.full.badge-226{background-image:url('../images/badges/series-3/full/226-short-steady.png');}
.full.badge-227{background-image:url('../images/badges/series-3/full/227-long-steady.png');}
.full.badge-228{background-image:url('../images/badges/series-3/full/228-short-solid.png');}
.full.badge-229{background-image:url('../images/badges/series-3/full/229-long-solid.png');}
.full.badge-230{background-image:url('../images/badges/series-3/full/230-long-rock-solid.png');}
.full.badge-231{background-image:url('../images/badges/series-3/full/231-two-by-33.png');}
.full.badge-232{background-image:url('../images/badges/series-3/full/232-two-by-99.png');}
.full.badge-233{background-image:url('../images/badges/series-3/full/233-two-by-33-10k.png');}
.full.badge-234{background-image:url('../images/badges/series-3/full/234-two-by-99-5k.png');}
.full.badge-235{background-image:url('../images/badges/series-3/full/235-two-by-365-10k.png');}
.full.badge-236{background-image:url('../images/badges/series-3/full/236-table-mountain.png');}
.full.badge-237{background-image:url('../images/badges/series-3/full/237-half-dome.png');}
.full.badge-238{background-image:url('../images/badges/series-3/full/238-fitz-roy.png');}
.full.badge-239{background-image:url('../images/badges/series-3/full/239-matterhorn.png');}
.full.badge-240{background-image:url('../images/badges/series-3/full/240-everest.png');height:172px;}
.full.badge-241{background-image:url('../images/badges/series-3/full/241-towered-pisa.png');}
.full.badge-242{background-image:url('../images/badges/series-3/full/242-exceeded-washington-monument.png');}
.full.badge-243{background-image:url('../images/badges/series-3/full/243-scaled-eiffel-tower.png');}
.full.badge-244{background-image:url('../images/badges/series-3/full/244-ascended-burj-khalifa.png');}
.full.badge-245{background-image:url('../images/badges/series-3/full/245-crushed-pikes-peak.png');}

/* 120px badge images - large badges */
.large.badge-013{background-image:url('../images/badges/series-0/large/013-puffy.png'); }
.large.badge-031{background-image:url('../images/badges/series-0/large/031-veteran.png');}
.large.badge-500{background-image:url('../images/badges/series-0/large/500-runventure-1.png');}
.large.badge-151{background-image:url('../images/badges/series-0/large/151-twenty-four-hour.png');}
.large.badge-246{background-image:url('../images/badges/series-0/large/246-366-in-2020.png');}
.large.badge-247{background-image:url('../images/badges/series-0/large/247-annus-horribilis-2020.png');}
.large.badge-248{background-image:url('../images/badges/series-0/large/248-united-bronze.png');}
.large.badge-249{background-image:url('../images/badges/series-0/large/249-united-silver.png');}
.large.badge-250{background-image:url('../images/badges/series-0/large/250-united-gold.png'); }

.large.badge-001{background-image:url('../images/badges/series-1/large/001-early-bird.png');}
.large.badge-002{background-image:url('../images/badges/series-1/large/002-night-owl.png');}
.large.badge-003{background-image:url('../images/badges/series-1/large/003-lunch-hour.png');}
.large.badge-004{background-image:url('../images/badges/series-1/large/004-popular.png');}
.large.badge-005{background-image:url('../images/badges/series-1/large/005-ocd.png');}
.large.badge-006{background-image:url('../images/badges/series-1/large/006-mile.png');}
.large.badge-007{background-image:url('../images/badges/series-1/large/007-marathon.png');}
.large.badge-008{background-image:url('../images/badges/series-1/large/008-ultra-marathon.png');}
.large.badge-009{background-image:url('../images/badges/series-1/large/009-half-marathon.png');}
.large.badge-010{background-image:url('../images/badges/series-1/large/010-10k.png');}
.large.badge-011{background-image:url('../images/badges/series-1/large/011-wesley.png');}
.large.badge-012{background-image:url('../images/badges/series-1/large/012-palin.png');}
.large.badge-251{background-image:url('../images/badges/series-1/large/251-strummer.png');}
.large.badge-014{background-image:url('../images/badges/series-1/large/014-oprah.png');}
.large.badge-015{background-image:url('../images/badges/series-1/large/015-katie.png');}
.large.badge-016{background-image:url('../images/badges/series-1/large/016-5for5.png');}
.large.badge-017{background-image:url('../images/badges/series-1/large/017-10for10.png');}
.large.badge-018{background-image:url('../images/badges/series-1/large/018-20for20.png');}
.large.badge-019{background-image:url('../images/badges/series-1/large/019-50for50.png');}
.large.badge-020{background-image:url('../images/badges/series-1/large/020-100for100.png');}
.large.badge-021{background-image:url('../images/badges/series-1/large/021-10.png');}
.large.badge-022{background-image:url('../images/badges/series-1/large/022-20.png');}
.large.badge-023{background-image:url('../images/badges/series-1/large/023-50.png');}
.large.badge-024{background-image:url('../images/badges/series-1/large/024-100.png');}
.large.badge-025{background-image:url('../images/badges/series-1/large/025-500.png');height:123px;margin-top:-3px;}
.large.badge-026{background-image:url('../images/badges/series-1/large/026-10mileweek.png');}
.large.badge-027{background-image:url('../images/badges/series-1/large/027-25mileweek.png');}
.large.badge-028{background-image:url('../images/badges/series-1/large/028-30milemonth.png');}
.large.badge-029{background-image:url('../images/badges/series-1/large/029-75milemonth.png');}
.large.badge-030{background-image:url('../images/badges/series-1/large/030-300milemonth.png');}
.large.badge-032{background-image:url('../images/badges/series-1/large/032-beta.png');}
.large.badge-033{background-image:url('../images/badges/series-1/large/033-5k.png');}
.large.badge-034{background-image:url('../images/badges/series-1/large/034-birthday.png');}
.large.badge-035{background-image:url('../images/badges/series-1/large/035-corleone.png');}
.large.badge-036{background-image:url('../images/badges/series-1/large/036-buddy.png');}
.large.badge-037{background-image:url('../images/badges/series-1/large/037-got-friends.png');}
.large.badge-038{background-image:url('../images/badges/series-1/large/038-social-7.png');}
.large.badge-039{background-image:url('../images/badges/series-1/large/039-shares-well.png');}
.large.badge-040{background-image:url('../images/badges/series-1/large/040-pack-leader.png');}

.large.badge-101{background-image:url('../images/badges/series-2/large/101-nyc-philly.png');}
.large.badge-102{background-image:url('../images/badges/series-2/large/102-london-paris.png');}
.large.badge-103{background-image:url('../images/badges/series-2/large/103-sydney-melbourne.png');}
.large.badge-104{background-image:url('../images/badges/series-2/large/104-nyc-chicago.png');}
.large.badge-105{background-image:url('../images/badges/series-2/large/105-miami-toronto.png');}
.large.badge-106{background-image:url('../images/badges/series-2/large/106-chariots-of-fire.png');}
.large.badge-107{background-image:url('../images/badges/series-2/large/107-went-to-work.png');}
.large.badge-108{background-image:url('../images/badges/series-2/large/108-thats-a-day.png');}
.large.badge-109{background-image:url('../images/badges/series-2/large/109-week-not-weak.png');}
.large.badge-110{background-image:url('../images/badges/series-2/large/110-alamo.png');}
.large.badge-111{background-image:url('../images/badges/series-2/large/111-chillrunner.png');}
.large.badge-112{background-image:url('../images/badges/series-2/large/112-easyrunner.png');}
.large.badge-113{background-image:url('../images/badges/series-2/large/113-roadrunner.png');}
.large.badge-114{background-image:url('../images/badges/series-2/large/114-mercury.png');}
.large.badge-115{background-image:url('../images/badges/series-2/large/115-fast-slow.png');height:116px;}
.large.badge-126{background-image:url('../images/badges/series-2/large/126-staircase.png');}
.large.badge-127{background-image:url('../images/badges/series-2/large/127-steep-staircase.png');}
.large.badge-128{background-image:url('../images/badges/series-2/large/128-long-staircase.png');}
.large.badge-129{background-image:url('../images/badges/series-2/large/129-long-steep-staircase.png');}
.large.badge-130{background-image:url('../images/badges/series-2/large/130-towering-staircase.png');height:131px;margin-top:-11px;}
.large.badge-131{background-image:url('../images/badges/series-2/large/131-showed-up-jan.png');}
.large.badge-132{background-image:url('../images/badges/series-2/large/132-showed-up-feb.png');}
.large.badge-133{background-image:url('../images/badges/series-2/large/133-showed-up-mar.png');}
.large.badge-134{background-image:url('../images/badges/series-2/large/134-showed-up-apr.png');}
.large.badge-135{background-image:url('../images/badges/series-2/large/135-showed-up-may.png');}
.large.badge-136{background-image:url('../images/badges/series-2/large/136-showed-up-jun.png');}
.large.badge-137{background-image:url('../images/badges/series-2/large/137-showed-up-jul.png');}
.large.badge-138{background-image:url('../images/badges/series-2/large/138-showed-up-aug.png');}
.large.badge-139{background-image:url('../images/badges/series-2/large/139-showed-up-sep.png');}
.large.badge-140{background-image:url('../images/badges/series-2/large/140-showed-up-oct.png');}
.large.badge-141{background-image:url('../images/badges/series-2/large/141-showed-up-nov.png');}
.large.badge-142{background-image:url('../images/badges/series-2/large/142-showed-up-dec.png');}
.large.badge-143{background-image:url('../images/badges/series-2/large/143-color-picker.png');}
.large.badge-144{background-image:url('../images/badges/series-2/large/144-365-days.png');}
.large.badge-145{background-image:url('../images/badges/series-2/large/145-365-days-in-2-years.png');}
.large.badge-146{background-image:url('../images/badges/series-2/large/146-365-days-in-a-row.png');}
.large.badge-147{background-image:url('../images/badges/series-2/large/147-365-in-a-year.png');}
.large.badge-148{background-image:url('../images/badges/series-2/large/148-366-in-a-year.png');}
.large.badge-150{background-image:url('../images/badges/series-2/large/150-translate.png');}/*translator badge*/


.large.badge-201{background-image:url('../images/badges/series-3/large/201-us-of-r.png');}
.large.badge-202{background-image:url('../images/badges/series-3/large/202-international-runner.png');}
.large.badge-203{background-image:url('../images/badges/series-3/large/203-top-and-bottom.png');}
.large.badge-204{background-image:url('../images/badges/series-3/large/204-four-corners.png');height:120px;width:120px}
.large.badge-205{background-image:url('../images/badges/series-3/large/205-international-super-runner.png');}
.large.badge-206{background-image:url('../images/badges/series-3/large/206-special-agent.png');}
.large.badge-207{background-image:url('../images/badges/series-3/large/207-the-gauntlet.png');}
.large.badge-208{background-image:url('../images/badges/series-3/large/208-green-beret.png');}
.large.badge-209{background-image:url('../images/badges/series-3/large/209-super-agent.png');}
.large.badge-210{background-image:url('../images/badges/series-3/large/210-ranger.png');}
.large.badge-211{background-image:url('../images/badges/series-3/large/211-strong-start.png');}
.large.badge-212{background-image:url('../images/badges/series-3/large/212-finish-strong.png');}
.large.badge-213{background-image:url('../images/badges/series-3/large/213-strong-in-between.png');}
.large.badge-214{background-image:url('../images/badges/series-3/large/214-strong-at-the-ends.png');}
.large.badge-215{background-image:url('../images/badges/series-3/large/215-strongest-finish.png');}
.large.badge-216{background-image:url('../images/badges/series-3/large/216-sunriser.png');}
.large.badge-217{background-image:url('../images/badges/series-3/large/217-full-moon-runner.png');}
.large.badge-218{background-image:url('../images/badges/series-3/large/218-sunsetter.png');}
.large.badge-219{background-image:url('../images/badges/series-3/large/219-longest-day.png');}
.large.badge-220{background-image:url('../images/badges/series-3/large/220-shortest-day.png');}
.large.badge-221{background-image:url('../images/badges/series-3/large/221-four-further.png');}
.large.badge-222{background-image:url('../images/badges/series-3/large/222-six-further.png');}
.large.badge-223{background-image:url('../images/badges/series-3/large/223-four-far-further.png');}
.large.badge-224{background-image:url('../images/badges/series-3/large/224-six-far-further.png');}
.large.badge-225{background-image:url('../images/badges/series-3/large/225-further-to-farther.png');}
.large.badge-226{background-image:url('../images/badges/series-3/large/226-short-steady.png');}
.large.badge-227{background-image:url('../images/badges/series-3/large/227-long-steady.png');}
.large.badge-228{background-image:url('../images/badges/series-3/large/228-short-solid.png');}
.large.badge-229{background-image:url('../images/badges/series-3/large/229-long-solid.png');}
.large.badge-230{background-image:url('../images/badges/series-3/large/230-long-rock-solid.png');}
.large.badge-231{background-image:url('../images/badges/series-3/large/231-two-by-33.png');}
.large.badge-232{background-image:url('../images/badges/series-3/large/232-two-by-99.png');}
.large.badge-233{background-image:url('../images/badges/series-3/large/233-two-by-33-10k.png');}
.large.badge-234{background-image:url('../images/badges/series-3/large/234-two-by-99-5k.png');}
.large.badge-235{background-image:url('../images/badges/series-3/large/235-two-by-365-10k.png');}
.large.badge-236{background-image:url('../images/badges/series-3/large/236-table-mountain.png');}
.large.badge-237{background-image:url('../images/badges/series-3/large/237-half-dome.png');}
.large.badge-238{background-image:url('../images/badges/series-3/large/238-fitz-roy.png');}
.large.badge-239{background-image:url('../images/badges/series-3/large/239-matterhorn.png');}
.large.badge-240{background-image:url('../images/badges/series-3/large/240-everest.png');height:128px;margin-top:-8px;}
.large.badge-241{background-image:url('../images/badges/series-3/large/241-towered-pisa.png');}
.large.badge-242{background-image:url('../images/badges/series-3/large/242-exceeded-washington-monument.png');}
.large.badge-243{background-image:url('../images/badges/series-3/large/243-scaled-eiffel-tower.png');}
.large.badge-244{background-image:url('../images/badges/series-3/large/244-ascended-burj-khalifa.png');}
.large.badge-245{background-image:url('../images/badges/series-3/large/245-crushed-pikes-peak.png');}

/* 90px badge images - medium badges */
.medium.badge-013{background-image:url('../images/badges/series-0/medium/013-puffy.png'); }
.medium.badge-031{background-image:url('../images/badges/series-0/medium/031-veteran.png');}
.medium.badge-500{background-image:url('../images/badges/series-0/medium/500-runventure.png');}
.medium.badge-151{background-image:url('../images/badges/series-0/medium/151-twenty-four-hour.png');}
.medium.badge-246{background-image:url('../images/badges/series-0/medium/246-366-in-2020.png');}
.medium.badge-247{background-image:url('../images/badges/series-0/medium/247-annus-horribilis-2020.png');}
.medium.badge-248{background-image:url('../images/badges/series-0/medium/248-united-bronze.png');}
.medium.badge-249{ background-image:url('../images/badges/series-0/medium/249-united-silver.png'); }
.medium.badge-250{ background-image:url('../images/badges/series-0/medium/250-united-gold.png'); }

.medium.badge-001{background-image:url('../images/badges/series-1/medium/001-early-bird.png');}
.medium.badge-002{background-image:url('../images/badges/series-1/medium/002-night-owl.png');}
.medium.badge-003{background-image:url('../images/badges/series-1/medium/003-lunch-hour.png');}
.medium.badge-004{background-image:url('../images/badges/series-1/medium/004-popular.png');}
.medium.badge-005{background-image:url('../images/badges/series-1/medium/005-ocd.png');}
.medium.badge-006{background-image:url('../images/badges/series-1/medium/006-mile.png');}
.medium.badge-007{background-image:url('../images/badges/series-1/medium/007-marathon.png');}
.medium.badge-008{background-image:url('../images/badges/series-1/medium/008-ultra-marathon.png');}
.medium.badge-009{background-image:url('../images/badges/series-1/medium/009-half-marathon.png');}
.medium.badge-010{background-image:url('../images/badges/series-1/medium/010-10k.png');}
.medium.badge-011{background-image:url('../images/badges/series-1/medium/011-wesley.png');}
.medium.badge-012{background-image:url('../images/badges/series-1/medium/012-palin.png');}
.medium.badge-251{background-image:url('../images/badges/series-1/medium/251-strummer.png');}
.medium.badge-014{background-image:url('../images/badges/series-1/medium/014-oprah.png');}
.medium.badge-015{background-image:url('../images/badges/series-1/medium/015-katie.png');}
.medium.badge-016{background-image:url('../images/badges/series-1/medium/016-5for5.png');}
.medium.badge-017{background-image:url('../images/badges/series-1/medium/017-10for10.png');}
.medium.badge-018{background-image:url('../images/badges/series-1/medium/018-20for20.png');}
.medium.badge-019{background-image:url('../images/badges/series-1/medium/019-50for50.png');}
.medium.badge-020{background-image:url('../images/badges/series-1/medium/020-100for100.png');}
.medium.badge-021{background-image:url('../images/badges/series-1/medium/021-10.png');}
.medium.badge-022{background-image:url('../images/badges/series-1/medium/022-20.png');}
.medium.badge-023{background-image:url('../images/badges/series-1/medium/023-50.png');}
.medium.badge-024{background-image:url('../images/badges/series-1/medium/024-100.png');}
.medium.badge-025{background-image:url('../images/badges/series-1/medium/025-500.png');}
.medium.badge-026{background-image:url('../images/badges/series-1/medium/026-10mileweek.png');}
.medium.badge-027{background-image:url('../images/badges/series-1/medium/027-25mileweek.png');}
.medium.badge-028{background-image:url('../images/badges/series-1/medium/028-30milemonth.png');}
.medium.badge-029{background-image:url('../images/badges/series-1/medium/029-75milemonth.png');}
.medium.badge-030{background-image:url('../images/badges/series-1/medium/030-300milemonth.png');}
.medium.badge-032{background-image:url('../images/badges/series-1/medium/032-beta.png');}
.medium.badge-033{background-image:url('../images/badges/series-1/medium/033-5k.png');}
.medium.badge-034{background-image:url('../images/badges/series-1/medium/034-birthday.png');}
.medium.badge-035{background-image:url('../images/badges/series-1/medium/035-corleone.png');}
.medium.badge-036{background-image:url('../images/badges/series-1/medium/036-buddy.png');}
.medium.badge-037{background-image:url('../images/badges/series-1/medium/037-got-friends.png');}
.medium.badge-038{background-image:url('../images/badges/series-1/medium/038-social-7.png');}
.medium.badge-039{background-image:url('../images/badges/series-1/medium/039-shares-well.png');}
.medium.badge-040{background-image:url('../images/badges/series-1/medium/040-pack-leader.png');}

.medium.badge-101{background-image:url('../images/badges/series-2/medium/101-nyc-philly.png');}
.medium.badge-102{background-image:url('../images/badges/series-2/medium/102-london-paris.png');}
.medium.badge-103{background-image:url('../images/badges/series-2/medium/103-sydney-melbourne.png');}
.medium.badge-104{background-image:url('../images/badges/series-2/medium/104-nyc-chicago.png');}
.medium.badge-105{background-image:url('../images/badges/series-2/medium/105-miami-toronto.png');}
.medium.badge-106{background-image:url('../images/badges/series-2/medium/106-chariots-of-fire.png');}
.medium.badge-107{background-image:url('../images/badges/series-2/medium/107-went-to-work.png');}
.medium.badge-108{background-image:url('../images/badges/series-2/medium/108-thats-a-day.png');}
.medium.badge-109{background-image:url('../images/badges/series-2/medium/109-week-not-weak.png');}
.medium.badge-110{background-image:url('../images/badges/series-2/medium/110-alamo.png');}
.medium.badge-111{background-image:url('../images/badges/series-2/medium/111-chillrunner.png');}
.medium.badge-112{background-image:url('../images/badges/series-2/medium/112-easyrunner.png');}
.medium.badge-113{background-image:url('../images/badges/series-2/medium/113-roadrunner.png');}
.medium.badge-114{background-image:url('../images/badges/series-2/medium/114-mercury.png');}
.medium.badge-115{background-image:url('../images/badges/series-2/medium/115-fast-slow.png');}
.medium.badge-126{background-image:url('../images/badges/series-2/medium/126-staircase.png');}
.medium.badge-127{background-image:url('../images/badges/series-2/medium/127-steep-staircase.png');}
.medium.badge-128{background-image:url('../images/badges/series-2/medium/128-long-staircase.png');}
.medium.badge-129{background-image:url('../images/badges/series-2/medium/129-long-steep-staircase.png');}
.medium.badge-130{background-image:url('../images/badges/series-2/medium/130-towering-staircase.png');}
.medium.badge-131{background-image:url('../images/badges/series-2/medium/131-showed-up-jan.png');}
.medium.badge-132{background-image:url('../images/badges/series-2/medium/132-showed-up-feb.png');}
.medium.badge-133{background-image:url('../images/badges/series-2/medium/133-showed-up-mar.png');}
.medium.badge-134{background-image:url('../images/badges/series-2/medium/134-showed-up-apr.png');}
.medium.badge-135{background-image:url('../images/badges/series-2/medium/135-showed-up-may.png');}
.medium.badge-136{background-image:url('../images/badges/series-2/medium/136-showed-up-jun.png');}
.medium.badge-137{background-image:url('../images/badges/series-2/medium/137-showed-up-jul.png');}
.medium.badge-138{background-image:url('../images/badges/series-2/medium/138-showed-up-aug.png');}
.medium.badge-139{background-image:url('../images/badges/series-2/medium/139-showed-up-sep.png');}
.medium.badge-140{background-image:url('../images/badges/series-2/medium/140-showed-up-oct.png');}
.medium.badge-141{background-image:url('../images/badges/series-2/medium/141-showed-up-nov.png');}
.medium.badge-142{background-image:url('../images/badges/series-2/medium/142-showed-up-dec.png');}
.medium.badge-143{background-image:url('../images/badges/series-2/medium/143-color-picker.png');}
.medium.badge-144{background-image:url('../images/badges/series-2/medium/144-365-days.png');}
.medium.badge-145{background-image:url('../images/badges/series-2/medium/145-365-days-in-2-years.png');}
.medium.badge-146{background-image:url('../images/badges/series-2/medium/146-365-days-in-a-row.png');}
.medium.badge-147{background-image:url('../images/badges/series-2/medium/147-365-in-a-year.png');}
.medium.badge-148{background-image:url('../images/badges/series-2/medium/148-366-in-a-year.png');}
.medium.badge-150{background-image:url('../images/badges/series-2/medium/150-translate.png');}/*translator badge*/

.medium.badge-201{background-image:url('../images/badges/series-3/medium/201-us-of-r.png');}
.medium.badge-202{background-image:url('../images/badges/series-3/medium/202-international-runner.png');}
.medium.badge-203{background-image:url('../images/badges/series-3/medium/203-top-and-bottom.png');}
.medium.badge-204{background-image:url('../images/badges/series-3/medium/204-four-corners.png');}
.medium.badge-205{background-image:url('../images/badges/series-3/medium/205-international-super-runner.png');}
.medium.badge-206{background-image:url('../images/badges/series-3/medium/206-special-agent.png');}
.medium.badge-207{background-image:url('../images/badges/series-3/medium/207-the-gauntlet.png');}
.medium.badge-208{background-image:url('../images/badges/series-3/medium/208-green-beret.png');}
.medium.badge-209{background-image:url('../images/badges/series-3/medium/209-super-agent.png');}
.medium.badge-210{background-image:url('../images/badges/series-3/medium/210-ranger.png');}
.medium.badge-211{background-image:url('../images/badges/series-3/medium/211-strong-start.png');}
.medium.badge-212{background-image:url('../images/badges/series-3/medium/212-finish-strong.png');}
.medium.badge-213{background-image:url('../images/badges/series-3/medium/213-strong-in-between.png');}
.medium.badge-214{background-image:url('../images/badges/series-3/medium/214-strong-at-the-ends.png');}
.medium.badge-215{background-image:url('../images/badges/series-3/medium/215-strongest-finish.png');}
.medium.badge-216{background-image:url('../images/badges/series-3/medium/216-sunriser.png');}
.medium.badge-217{background-image:url('../images/badges/series-3/medium/217-full-moon-runner.png');}
.medium.badge-218{background-image:url('../images/badges/series-3/medium/218-sunsetter.png');}
.medium.badge-219{background-image:url('../images/badges/series-3/medium/219-longest-day.png');}
.medium.badge-220{background-image:url('../images/badges/series-3/medium/220-shortest-day.png');}
.medium.badge-221{background-image:url('../images/badges/series-3/medium/221-four-further.png');}
.medium.badge-222{background-image:url('../images/badges/series-3/medium/222-six-further.png');}
.medium.badge-223{background-image:url('../images/badges/series-3/medium/223-four-far-further.png');}
.medium.badge-224{background-image:url('../images/badges/series-3/medium/224-six-far-further.png');}
.medium.badge-225{background-image:url('../images/badges/series-3/medium/225-further-to-farther.png');}
.medium.badge-226{background-image:url('../images/badges/series-3/medium/226-short-steady.png');}
.medium.badge-227{background-image:url('../images/badges/series-3/medium/227-long-steady.png');}
.medium.badge-228{background-image:url('../images/badges/series-3/medium/228-short-solid.png');}
.medium.badge-229{background-image:url('../images/badges/series-3/medium/229-long-solid.png');}
.medium.badge-230{background-image:url('../images/badges/series-3/medium/230-long-rock-solid.png');}
.medium.badge-231{background-image:url('../images/badges/series-3/medium/231-two-by-33.png');}
.medium.badge-232{background-image:url('../images/badges/series-3/medium/232-two-by-99.png');}
.medium.badge-233{background-image:url('../images/badges/series-3/medium/233-two-by-33-10k.png');}
.medium.badge-234{background-image:url('../images/badges/series-3/medium/234-two-by-99-5k.png');}
.medium.badge-235{background-image:url('../images/badges/series-3/medium/235-two-by-365-10k.png');}
.medium.badge-236{background-image:url('../images/badges/series-3/medium/236-table-mountain.png');}
.medium.badge-237{background-image:url('../images/badges/series-3/medium/237-half-dome.png');}
.medium.badge-238{background-image:url('../images/badges/series-3/medium/238-fitz-roy.png');}
.medium.badge-239{background-image:url('../images/badges/series-3/medium/239-matterhorn.png');}
.medium.badge-240{background-image:url('../images/badges/series-3/medium/240-everest.png');}
.medium.badge-241{background-image:url('../images/badges/series-3/medium/241-towered-pisa.png');}
.medium.badge-242{background-image:url('../images/badges/series-3/medium/242-exceeded-washington-monument.png');}
.medium.badge-243{background-image:url('../images/badges/series-3/medium/243-scaled-eiffel-tower.png');}
.medium.badge-244{background-image:url('../images/badges/series-3/medium/244-ascended-burj-khalifa.png');}
.medium.badge-245{background-image:url('../images/badges/series-3/medium/245-crushed-pikes-peak.png');}


@-webkit-keyframes float-lr {
	0%, 2%, 4%, 6%, 8%, 10%, 12%, 14%, 16%, 18%, 20%, 22%, 24%, 26%, 28%, 30%, 32%, 34%, 36%, 38%, 40%, 42%, 44%, 46%, 48%, 50%, 52%, 54%, 56%, 58%, 60%, 62%, 64%, 66%, 68%, 70%, 72%, 74%, 76%, 78%, 80%, 82%, 84%, 86%, 88%, 90%, 92%, 94%, 96%, 98%, 100% { left: -60px; }
	1%, 3%, 5%, 7%, 9%, 11%, 13%, 15%, 17%, 19%, 21%, 23%, 25%, 27%, 29%, 31%, 33%, 35%, 37%, 39%, 41%, 43%, 45%, 47%, 49%, 51%, 53%, 55%, 57%, 59%, 61%, 63%, 65%, 67%, 69%, 71%, 73%, 75%, 77%, 79%, 81%, 83%, 85%, 87%, 89%, 91%, 93%, 95%, 97%, 99% { left: 60px;}
}
@-moz-keyframes float-lr {
	0%, 2%, 4%, 6%, 8%, 10%, 12%, 14%, 16%, 18%, 20%, 22%, 24%, 26%, 28%, 30%, 32%, 34%, 36%, 38%, 40%, 42%, 44%, 46%, 48%, 50%, 52%, 54%, 56%, 58%, 60%, 62%, 64%, 66%, 68%, 70%, 72%, 74%, 76%, 78%, 80%, 82%, 84%, 86%, 88%, 90%, 92%, 94%, 96%, 98%, 100% { left: -60px; }
	1%, 3%, 5%, 7%, 9%, 11%, 13%, 15%, 17%, 19%, 21%, 23%, 25%, 27%, 29%, 31%, 33%, 35%, 37%, 39%, 41%, 43%, 45%, 47%, 49%, 51%, 53%, 55%, 57%, 59%, 61%, 63%, 65%, 67%, 69%, 71%, 73%, 75%, 77%, 79%, 81%, 83%, 85%, 87%, 89%, 91%, 93%, 95%, 97%, 99% { left: 60px;}
}
@-o-keyframes float-lr {
	0%, 2%, 4%, 6%, 8%, 10%, 12%, 14%, 16%, 18%, 20%, 22%, 24%, 26%, 28%, 30%, 32%, 34%, 36%, 38%, 40%, 42%, 44%, 46%, 48%, 50%, 52%, 54%, 56%, 58%, 60%, 62%, 64%, 66%, 68%, 70%, 72%, 74%, 76%, 78%, 80%, 82%, 84%, 86%, 88%, 90%, 92%, 94%, 96%, 98%, 100% { left: -60px; }
	1%, 3%, 5%, 7%, 9%, 11%, 13%, 15%, 17%, 19%, 21%, 23%, 25%, 27%, 29%, 31%, 33%, 35%, 37%, 39%, 41%, 43%, 45%, 47%, 49%, 51%, 53%, 55%, 57%, 59%, 61%, 63%, 65%, 67%, 69%, 71%, 73%, 75%, 77%, 79%, 81%, 83%, 85%, 87%, 89%, 91%, 93%, 95%, 97%, 99% { left: 60px;}
}
@keyframes float-lr {
	0%, 2%, 4%, 6%, 8%, 10%, 12%, 14%, 16%, 18%, 20%, 22%, 24%, 26%, 28%, 30%, 32%, 34%, 36%, 38%, 40%, 42%, 44%, 46%, 48%, 50%, 52%, 54%, 56%, 58%, 60%, 62%, 64%, 66%, 68%, 70%, 72%, 74%, 76%, 78%, 80%, 82%, 84%, 86%, 88%, 90%, 92%, 94%, 96%, 98%, 100% { left: -60px; }
	1%, 3%, 5%, 7%, 9%, 11%, 13%, 15%, 17%, 19%, 21%, 23%, 25%, 27%, 29%, 31%, 33%, 35%, 37%, 39%, 41%, 43%, 45%, 47%, 49%, 51%, 53%, 55%, 57%, 59%, 61%, 63%, 65%, 67%, 69%, 71%, 73%, 75%, 77%, 79%, 81%, 83%, 85%, 87%, 89%, 91%, 93%, 95%, 97%, 99% { left: 60px;}
}

@-webkit-keyframes float-up {
	0% { top: 2000px; }
	88% { top:0;}
	92% { top:10px;}
	96% { top:0}
	98% { top:5px;}
	100% { top:0;}
}

@-moz-keyframes float-up {
	0% { top: 2000px; }
	88% { top:0;}
	92% { top:10px;}
	96% { top:0}
	98% { top:5px;}
	100% { top:0;}
}

@-o-keyframes float-up {
	0% { top: 2000px; }
	86% { top:0;}
	90% { top:10px;}
	96% { top:0}
	98% { top:5px;}
	100% { top:0;}
}
@keyframes float-up {
	0% { top: 2000px; }
	86% { top:0;}
	90% { top:10px;}
	96% { top:0}
	98% { top:5px;}
	100% { top:0;}
}

@-webkit-keyframes wobble {
	0%, 2%, 4%, 6%, 8%, 10%, 12%, 14%, 16%, 18%, 20%, 22%, 24%, 26%, 28%, 30%, 32%, 34%, 36%, 38%, 40%, 42%, 44%, 46%, 48%, 50%, 52%, 54%, 56%, 58%, 60%, 62%, 64%, 66%, 68%, 70%, 72%, 74%, 76%, 78%, 80%, 82%, 84%, 86%, 88%, 90%, 92%, 94%, 96%, 98%, 100%{ -webkit-transform: rotate(4deg);}
	1%, 3%, 5%, 7%, 9%, 11%, 13%, 15%, 17%, 19%, 21%, 23%, 25%, 27%, 29%, 31%, 33%, 35%, 37%, 39%, 41%, 43%, 45%, 47%, 49%, 51%, 53%, 55%, 57%, 59%, 61%, 63%, 65%, 67%, 69%, 71%, 73%, 75%, 77%, 79%, 81%, 83%, 85%, 87%, 89%, 91%, 93%, 95%, 97%, 99% { -webkit-transform: rotate(-4deg);}
	100% { }
}
@-moz-keyframes wobble {
	0%, 2%, 4%, 6%, 8%, 10%, 12%, 14%, 16%, 18%, 20%, 22%, 24%, 26%, 28%, 30%, 32%, 34%, 36%, 38%, 40%, 42%, 44%, 46%, 48%, 50%, 52%, 54%, 56%, 58%, 60%, 62%, 64%, 66%, 68%, 70%, 72%, 74%, 76%, 78%, 80%, 82%, 84%, 86%, 88%, 90%, 92%, 94%, 96%, 98%, 100%{ -webkit-transform: rotate(4deg);}
	1%, 3%, 5%, 7%, 9%, 11%, 13%, 15%, 17%, 19%, 21%, 23%, 25%, 27%, 29%, 31%, 33%, 35%, 37%, 39%, 41%, 43%, 45%, 47%, 49%, 51%, 53%, 55%, 57%, 59%, 61%, 63%, 65%, 67%, 69%, 71%, 73%, 75%, 77%, 79%, 81%, 83%, 85%, 87%, 89%, 91%, 93%, 95%, 97%, 99% { -webkit-transform: rotate(-4deg);}
	100% { }
}
@-o-keyframes wobble {
	0%, 2%, 4%, 6%, 8%, 10%, 12%, 14%, 16%, 18%, 20%, 22%, 24%, 26%, 28%, 30%, 32%, 34%, 36%, 38%, 40%, 42%, 44%, 46%, 48%, 50%, 52%, 54%, 56%, 58%, 60%, 62%, 64%, 66%, 68%, 70%, 72%, 74%, 76%, 78%, 80%, 82%, 84%, 86%, 88%, 90%, 92%, 94%, 96%, 98%, 100%{ -webkit-transform: rotate(4deg);}
	1%, 3%, 5%, 7%, 9%, 11%, 13%, 15%, 17%, 19%, 21%, 23%, 25%, 27%, 29%, 31%, 33%, 35%, 37%, 39%, 41%, 43%, 45%, 47%, 49%, 51%, 53%, 55%, 57%, 59%, 61%, 63%, 65%, 67%, 69%, 71%, 73%, 75%, 77%, 79%, 81%, 83%, 85%, 87%, 89%, 91%, 93%, 95%, 97%, 99% { -webkit-transform: rotate(-4deg);}
	100% { }
}
@keyframes wobble {
	0%, 2%, 4%, 6%, 8%, 10%, 12%, 14%, 16%, 18%, 20%, 22%, 24%, 26%, 28%, 30%, 32%, 34%, 36%, 38%, 40%, 42%, 44%, 46%, 48%, 50%, 52%, 54%, 56%, 58%, 60%, 62%, 64%, 66%, 68%, 70%, 72%, 74%, 76%, 78%, 80%, 82%, 84%, 86%, 88%, 90%, 92%, 94%, 96%, 98%, 100%{ -webkit-transform: rotate(4deg);}
	1%, 3%, 5%, 7%, 9%, 11%, 13%, 15%, 17%, 19%, 21%, 23%, 25%, 27%, 29%, 31%, 33%, 35%, 37%, 39%, 41%, 43%, 45%, 47%, 49%, 51%, 53%, 55%, 57%, 59%, 61%, 63%, 65%, 67%, 69%, 71%, 73%, 75%, 77%, 79%, 81%, 83%, 85%, 87%, 89%, 91%, 93%, 95%, 97%, 99% { -webkit-transform: rotate(-4deg);}
	100% { }
}

.balloon{	
    float:left;
	margin: 0 auto;
	position: relative;
    height:195px;width:150px;
	border-radius: 40px;    
	-webkit-animation: float-up 4s ease-in-out forwards, 
		float-lr 400s ease-in-out forwards, 
		wobble 400s ease-in-out forwards;
    -moz-animation: float-up 4s ease-in-out forwards, 
		float-lr 400s ease-in-out forwards, 
		wobble 400s ease-in-out forwards;
    -o-animation: float-up 4s ease-in-out forwards, 
		float-lr 400s ease-in-out forwards, 
		wobble 320s ease-in-out forwards;
    animation: float-up 4s ease-in-out forwards, 
		float-lr 400s ease-in-out forwards, 
		wobble 400s ease-in-out forwards;
}

.balloons{position:absolute;width:100%;height:2000px;}
.sky-bound-balloons{position:absolute;margin-top:-500px;width:100%;height:2000px;}
.balloon{margin-bottom:10px;height:185px;width:142px;background-size:142px 185px;}
.balloon.over{z-index:2;height:195px;width:150px;background-size:150px 195px;margin-bottom:0px;}
.balloon.sky-bound{z-index:100;height:205px;width:173px;background-size:173px 205px;margin-bottom:0px;}
.balloon.red{background-image:url("../images/balloons/balloon-red.png");}
.balloon.red1{background-image:url("../images/balloons/balloon-red1.png");}
.balloon.red2{background-image:url("../images/balloons/balloon-red2.png");}
.balloon.green{background-image:url("../images/balloons/balloon-green.png");}
.balloon.green1{background-image:url("../images/balloons/balloon-green1.png");}
.balloon.gold{background-image:url("../images/balloons/balloon-gold.png");}
.balloon.gold1{background-image:url("../images/balloons/balloon-gold1.png");}
.balloon.gold2{background-image:url("../images/balloons/balloon-gold2.png");}
.balloon.blue{background-image:url("../images/balloons/balloon-blue.png");}
.balloon.blue1{background-image:url("../images/balloons/balloon-blue1.png");}
.balloon.orange{background-image:url("../images/balloons/balloon-orange1.png");}
.balloon.aqua{background-image:url("../images/balloons/balloon-aqua1.png");}

/*
 * Container style
 */
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-y {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 0.6;
}

.ps__rail-x:hover,
.ps__rail-y:hover,
.ps__rail-x:focus,
.ps__rail-y:focus {
  background-color: #eee;
  opacity: 0.9;
}

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, height .2s ease-in-out;
  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, width .2s ease-in-out;
  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x {
  background-color: #999;
  height: 11px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y {
  background-color: #999;
  width: 11px;
}

/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}

.jslider .jslider-bg i,.jslider .jslider-pointer{background:url(../img/jslider.png) no-repeat 0 0}.jslider{display:block;width:100%;height:1em;position:relative;top:.6em;font-family:Arial,sans-serif}.jslider table{width:100%;border-collapse:collapse;border:0}.jslider td,.jslider th{padding:0;vertical-align:top;text-align:left;border:0}.jslider table,.jslider table tr,.jslider table tr td{width:100%;vertical-align:top}.jslider .jslider-bg{position:relative}.jslider .jslider-bg i{height:5px;position:absolute;font-size:0;top:0}.jslider .jslider-bg .l{width:10%;background-position:0 0;left:0}.jslider .jslider-bg .f{width:80%;left:10%;background-repeat:repeat-x;background-position:0 -20px}.jslider .jslider-bg .r{width:10%;left:90%;background-position:right 0}.jslider .jslider-bg .v{position:absolute;width:60%;left:20%;top:0;height:5px;background-repeat:repeat-x;background-position:0 -40px}.jslider .jslider-pointer{width:13px;height:15px;background-position:0 -60px;position:absolute;left:20%;top:-4px;margin-left:-6px;cursor:pointer;cursor:hand}.jslider .jslider-pointer-hover{background-position:-20px -60px}.jslider .jslider-pointer-to{left:80%}.jslider .jslider-label{font-size:9px;line-height:12px;color:black;opacity:.4;white-space:nowrap;padding:0 2px;position:absolute;top:-18px;left:0}.jslider .jslider-label-to{left:auto;right:0}.jslider .jslider-value{font-size:9px;white-space:nowrap;padding:1px 2px 0;position:absolute;top:-19px;left:20%;background:white;line-height:12px;-moz-border-radius:2px;-webkit-border-radius:2px;-o-border-radius:2px;border-radius:2px}.jslider .jslider-value-to{left:80%}.jslider .jslider-label small,.jslider .jslider-value small{position:relative;top:-0.4em}.jslider .jslider-scale{position:relative;top:9px}.jslider .jslider-scale span{position:absolute;height:5px;border-left:1px solid #999;font-size:0}.jslider .jslider-scale ins{font-size:9px;text-decoration:none;position:absolute;left:0;top:5px;color:#999}.jslider-single .jslider-pointer-to,.jslider-single .jslider-value-to,.jslider-single .jslider-bg .v,.jslider-limitless .jslider-label{display:none}.jslider_blue .jslider-bg i,.jslider_blue .jslider-pointer{background-image:url(../img/jslider.blue.png)}.jslider_plastic .jslider-bg i,.jslider_plastic .jslider-pointer{background-image:url(../images/jquery-slider/jslider.plastic.png)}.jslider_round .jslider-bg i,.jslider_round .jslider-pointer{background-image:url(../img/jslider.round.png)}.jslider_round .jslider-pointer{width:17px;height:17px;top:-6px;margin-left:-8px}.jslider_round_plastic .jslider-bg i,.jslider_round_plastic .jslider-pointer{background-image:url(../img/jslider.round.plastic.png)}.jslider_round_plastic .jslider-pointer{width:18px;height:18px;top:-7px;margin-left:-8px}
/*! Hint.css - v1.3.3 - 2014-07-06
* http://kushagragour.in/lab/hint/
* Copyright (c) 2014 Kushagra Gour; Licensed MIT */

/*-------------------------------------*\
	HINT.css - A CSS tooltip library
\*-------------------------------------*/
/**
 * HINT.css is a tooltip library made in pure CSS.
 *
 * Source: https://github.com/chinchang/hint.css
 * Demo: http://kushagragour.in/lab/hint/
 *
 * Release under The MIT License
 *
 */
/**
 * source: hint-core.scss
 *
 * Defines the basic styling for the tooltip.
 * Each tooltip is made of 2 parts:
 * 	1) body (:after)
 * 	2) arrow (:before)
 *
 * Classes added:
 * 	1) hint
 */
.hint, [data-hint] {
  position: relative;
  display: inline-block;
  /**
   * tooltip arrow
   */
  /**
   * tooltip body
   */ }
  .hint:before, .hint:after, [data-hint]:before, [data-hint]:after {
    position: absolute;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: hidden;
    opacity: 0;
    z-index: 1000000;
    pointer-events: none;
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    transition: 0.3s ease;
    -webkit-transition-delay: 0ms;
    -moz-transition-delay: 0ms;
    transition-delay: 0ms; }
  .hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before, [data-hint]:focus:after {
    visibility: visible;
    opacity: 1; }
  .hint:hover:before, .hint:hover:after, [data-hint]:hover:before, [data-hint]:hover:after {
    -webkit-transition-delay: 700ms;
    -moz-transition-delay: 700ms;
    transition-delay: 700ms; }
  .hint:before, [data-hint]:before {
    content: '';
    position: absolute;
    background: transparent;
    border: 6px solid transparent;
    z-index: 1000001;}

  .hint:after, [data-hint]:after {
    content: attr(data-hint);
    background: #fff;
    color: #444;
    padding: 10px;
    font-size: 12px;
    letter-spacing: .01em;
    line-height: 1.3em;
    min-width: 120px;
    max-width: 350px;
    /*white-space: nowrap;*/ }

/**
 * source: hint-position.scss
 *
 * Defines the positoning logic for the tooltips.
 *
 * Classes added:
 * 	1) hint--top
 * 	2) hint--bottom
 * 	3) hint--left
 * 	4) hint--right
 */
/**
 * set default color for tooltip arrows
 */
.hint--top:before {
  border-top-color: #383838; }

.hint--bottom:before {
  border-bottom-color: #fff; }

.hint--left:before {
  border-left-color: #383838; }

.hint--right:before {
  border-right-color: #383838; }

/**
 * top tooltip
 */
.hint--top:before {
  margin-bottom: -12px; }
.hint--top:after {
  margin-left: -18px; }
.hint--top:before, .hint--top:after {
  bottom: 100%;
  left: 50%; }
.hint--top:hover:after, .hint--top:hover:before, .hint--top:focus:after, .hint--top:focus:before {
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  transform: translateY(-8px); }

/**
 * bottom tooltip
 */
.hint--bottom:before {
  margin-top: -12px; }
.hint--bottom:after {
  margin-left: -18px; }
.hint--bottom:before, .hint--bottom:after {
  top: 100%;
  left: 50%; }
.hint--bottom:hover:after, .hint--bottom:hover:before, .hint--bottom:focus:after, .hint--bottom:focus:before {
  -webkit-transform: translateY(8px);
  -moz-transform: translateY(8px);
  transform: translateY(8px); }

/**
 * right tooltip
 */
.hint--right:before {
  margin-left: -12px;
  margin-bottom: -6px; }
.hint--right:after {
  margin-bottom: -14px; }
.hint--right:before, .hint--right:after {
  left: 100%;
  bottom: 50%; }
.hint--right:hover:after, .hint--right:hover:before, .hint--right:focus:after, .hint--right:focus:before {
  -webkit-transform: translateX(8px);
  -moz-transform: translateX(8px);
  transform: translateX(8px); }

/**
 * left tooltip
 */
.hint--left:before {
  margin-right: -12px;
  margin-bottom: -6px; }
.hint--left:after {
  margin-bottom: -14px; }
.hint--left:before, .hint--left:after {
  right: 100%;
  bottom: 50%; }
.hint--left:hover:after, .hint--left:hover:before, .hint--left:focus:after, .hint--left:focus:before {
  -webkit-transform: translateX(-8px);
  -moz-transform: translateX(-8px);
  transform: translateX(-8px); }

/**
 * source: hint-color-types.scss
 *
 * Contains tooltips of various types based on color differences.
 *
 * Classes added:
 * 	1) hint--error
 * 	2) hint--warning
 * 	3) hint--info
 * 	4) hint--success
 *
 */
/**
 * Error
 */
.hint--error:after {
  background-color: #b34e4d;
  text-shadow: 0 -1px 0px #592726; }
.hint--error.hint--top:before {
  border-top-color: #b34e4d; }
.hint--error.hint--bottom:before {
  border-bottom-color: #b34e4d; }
.hint--error.hint--left:before {
  border-left-color: #b34e4d; }
.hint--error.hint--right:before {
  border-right-color: #b34e4d; }

/**
 * Warning
 */
.hint--warning:after {
  background-color: #c09854;
  text-shadow: 0 -1px 0px #6c5328; }
.hint--warning.hint--top:before {
  border-top-color: #c09854; }
.hint--warning.hint--bottom:before {
  border-bottom-color: #c09854; }
.hint--warning.hint--left:before {
  border-left-color: #c09854; }
.hint--warning.hint--right:before {
  border-right-color: #c09854; }

/**
 * Info
 */
.hint--info:after {
  background-color: #3986ac;
  text-shadow: 0 -1px 0px #193b4d; }
.hint--info.hint--top:before {
  border-top-color: #3986ac; }
.hint--info.hint--bottom:before {
  border-bottom-color: #3986ac; }
.hint--info.hint--left:before {
  border-left-color: #3986ac; }
.hint--info.hint--right:before {
  border-right-color: #3986ac; }

/**
 * Success
 */
.hint--success:after {
  background-color: #458746;
  text-shadow: 0 -1px 0px #1a321a; }
.hint--success.hint--top:before {
  border-top-color: #458746; }
.hint--success.hint--bottom:before {
  border-bottom-color: #458746; }
.hint--success.hint--left:before {
  border-left-color: #458746; }
.hint--success.hint--right:before {
  border-right-color: #458746; }

/**
 * source: hint-always.scss
 *
 * Defines a persisted tooltip which shows always.
 *
 * Classes added:
 * 	1) hint--always
 *
 */
.hint--always:after, .hint--always:before {
  opacity: 1;
  visibility: visible; }
.hint--always.hint--top:after, .hint--always.hint--top:before {
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  transform: translateY(-8px); }
.hint--always.hint--bottom:after, .hint--always.hint--bottom:before {
  -webkit-transform: translateY(8px);
  -moz-transform: translateY(8px);
  transform: translateY(8px); }
.hint--always.hint--left:after, .hint--always.hint--left:before {
  -webkit-transform: translateX(-8px);
  -moz-transform: translateX(-8px);
  transform: translateX(-8px); }
.hint--always.hint--right:after, .hint--always.hint--right:before {
  -webkit-transform: translateX(8px);
  -moz-transform: translateX(8px);
  transform: translateX(8px); }

/**
 * source: hint-rounded.scss
 *
 * Defines rounded corner tooltips.
 *
 * Classes added:
 * 	1) hint--rounded
 *
 */
.hint--rounded:after {
  border-radius: 4px; }

/**
 * source: hint-effects.scss
 *
 * Defines various transition effects for the tooltips.
 *
 * Classes added:
 * 	1) hint--no-animate
 * 	2) hint--bounce
 *
 */
.hint--no-animate:before, .hint--no-animate:after {
  -webkit-transition-duration: 0ms;
  -moz-transition-duration: 0ms;
  transition-duration: 0ms; }

.hint--bounce:before, .hint--bounce:after {
  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  -moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); }
/*-----------------------------
 social page layout
------------------------------*/
.adblock-message { position:fixed; top:0px; left:0px; z-index:200; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); padding: 100px; text-align:center; }
.adblock-message h3 { position:absolute; width:600px; left:50%; margin-left:-400px; font-size: 2em; color: #fff; }
.adblock-message h4 { position: absolute; top: 9.8em; right: 22em; font-size: 1.5em; width: 280px; color: #ddd; }
.adblock-message p { color:#ccc; bottom:270px; left:50%; position:absolute; text-align:center; font-size:1.4em; width:500px; margin-left:-350px; font-style:italic;}
.adblock-message .arrow {background-image: url(../images/arrow-215x91.png);width:215px;height:91px;position:absolute;right:20em;top:8em;transform:rotate(-30deg);}

.social-container { position:absolute; top:0px; left:0px; height:100%;width:100%; color:#ddd;/*background-color:#343B43;background-color:#475b71;*/ background-color:rgba(59, 83, 105, 1); z-index:101; font-size:10px;fill:#bbb;}
.social-container > div.panel { display: inline-block; vertical-align:top; box-sizing: border-box; }

.social-container .panel.filter { position:fixed; height:70px; width:100%; background-color:#354b5e;}
.social-container .panel.view { position:fixed; width: 220px;padding: 30px 30px;font-size: 0.8em;text-transform: uppercase;background-color: rgba(0,0,0,0.1);padding-top: 110px;height: 100%; }
.social-container .panel.feed { position: relative; height: auto; margin-top:80px; margin-left:220px; }

.social-container .panel.feed .feed-container { height:calc(100vh - 80px); width:calc(100vw - 265px); padding-left:45px; overflow: auto; webkit-overflow-scrolling: touch;}

.social-container .panel.view .view-container { margin-top: 30px; }
.social-container .panel.view .view-container div.choice { display: block; width:100%; font-size: 1.5em; font-weight: bold; background-color: rgba(255,255,255,0.12); margin:0px 0px 10px 0px; padding: 10px 0px; cursor:pointer;text-align:center;}
.social-container .panel.view .view-container div.choice img { display: none; }
.social-container .panel.view .view-container div.choice.selected,
.social-container .panel.view .view-container div.choice.selected:hover { background-color:hsla(209, 28%, 46%, 1); color: #fcfcfc; }
.social-container .panel.view .view-container div.choice:hover { background-color: hsla(209, 28%, 35%, 1);  }
.social-container .panel.view .view-container div.choice:active { background-color: hsla(209, 28%, 36%, 1); color: #fff; }

.social-container .panel.filter .filter-container { margin-left: 250px; margin-top:20px;}
.social-container .panel.filter .filter-container div.choice { display: inline-block; font-size: 1.5em; font-weight: bold; text-transform:uppercase; background-color: rgba(255,255,255,0.12); margin:10px 15px 4px 0px; padding: 4px 20px; cursor:pointer;}
.social-container .panel.filter .filter-container div.choice.selected { background-color:#537493; color: #fff;  }
.social-container .panel.filter .manage { display: inline-block; position: absolute; padding: 8px 30px; border-radius:15px; text-transform: uppercase; font-weight: bold; color: #f1f1f1; top: 30px; right: 200px; font-size: 1.4em; background-color:rgba(0,0,0,0.4);cursor:pointer; }
.social-container .panel.filter .manage:hover { background-color: rgba(0,0,0,0.6); }

.social-container .settings-icon-container { position: absolute; right: 40px; bottom: 30px; }
.social-container .settings-icon-container svg { cursor:pointer; }
.social-container .settings-icon-container svg:hover path{ fill: #fff; }

/* Feed scrollbar styling */
.social-container .panel.feed .feed-container::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 25px;
}
.social-container .panel.feed .feed-container::-webkit-scrollbar-track {
  border-radius: 5px;
  background:rgba(0, 0, 0, 0.1);
}

.social-container .panel.feed .feed-container::-webkit-scrollbar-thumb {
  cursor: pointer;
  border-radius: 5px;
  transition: color 0.2s ease;
  background: rgba(0, 0, 0, 0.05);
}

.social-container .panel.feed .feed-container::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(0, 0, 0, 0.10);
}

.social-container .panel.feed .feed-container::-webkit-scrollbar-thumb:hover {
  background: rgba(128, 135, 139, 0.8);
}

 

/*-----------------------------
 social notifications
------------------------------*/
.social-notifications-container { position:absolute; top:22px; left:22px; width:350px; color:#1d2129;font-size:12px;line-height:16px; z-index:11;}
.social-notifications-container.full-height { position:fixed; overflow:hidden; max-height:90%;box-shadow:8px 12px 20px 10px rgba(0, 0, 0, 0.3); }
.social-notifications-container.full-height.placeholder { filter: blur(3px); }
.social-notifications-container .notification { position:relative; min-height:65px; border-top:1px solid #dddfe2;padding:10px;background-color:#fff;cursor:pointer;}
.social-notifications-container .notification:hover { background-color: #f6f6f6; }
.social-notifications-container .notification.unread { background-color: #edf2fa;}
.social-notifications-container .notification.unread:hover { background-color: #d5ddea; }
.social-notifications-container .notification .user-image-container { display: inline-block; margin-right: 5px; border-radius:50px; min-width:50px; overflow:hidden;}
.social-notifications-container .notification .notification-text-container { width:80%; margin-left:10px; display:inline-block; vertical-align:top;}
.social-notifications-container .notification.badge .notification-text-container { width:60%;}
.social-notifications-container .notification .notification-text { color:#666; min-height:45px; }
.social-notifications-container .notification .notification-text span.distance { white-space: nowrap; }
.social-notifications-container .notification .notification-text span.distance .distance-value { color: #555; font-size:1.2em;display:inline-block;margin-right:1px;font-weight:bold;}
.social-notifications-container .notification .notification-text span.distance .distance-unit { color: #444; font-size:0.8em;}
.social-notifications-container .notification .time-ago-wrapper {display:block;line-height:10px;margin-top:10px;}
.social-notifications-container .notification .time-ago { display:inline; color:#90949c; margin-left:2px;}
.social-notifications-container .notification .supporting-image { display:inline-block;vertical-align:top; margin-left:10px;}
.social-notifications-container .notification .supporting-image .badge {  }
.social-notifications-container .notification .choice-container { display:inline-block; margin-top:15px;text-align:right;width:220px;}
.social-notifications-container .notification .choice-container .result-text { margin-right: 15px; color: #666; font-size: 1.2em; }
.social-notifications-container .notification .action { color:#666; border-bottom:1px solid #666; margin-right:10px; font-weight:bold; cursor:pointer; }
.social-notifications-container .notification .action:hover { color: #222; border-color: #222; }
.social-notifications-container .notification .choice { display:inline-block; padding: 2px 12px; color:#666; font-weight:bold; background-color:#f1f1f1;border:1px solid #aaa; margin-right:5px;border-radius:2px;}
.social-notifications-container .notification .choice.accept { background-color: rgba(60,140,200,0.9); color: #fff; }
.social-notifications-container .notification .choice.accept:hover { background-color: rgba(60,140,200,0.6); color:#fff;}
.social-notifications-container .notification .choice:hover { background-color:#fff; color:#333; border:1px solid #ccc;}
.social-notifications-container .notification .choice:active { background-color: #fff; }
.social-notifications-container .notification .name-display { font-weight:bold; color:#222;}
.social-notifications-container .notification .name-display:hover { text-decoration:underline; }
.social-notifications-container .notification .distance-unit { font-size: 0.85em; }
.social-notifications-container .notification.comment .icon { background-image: url('../images/sprites/socialSprite-31x15.png');background-position: -16px -3px;display: inline-block;width: 11px;height: 11px;vertical-align:top; }
.social-notifications-container .notification.like    .icon { background-image: url('../images/sprites/socialSprite-31x15.png');background-position: -3px -3px;display: inline-block;width: 10px;height: 10px; }
.social-notifications-container .show-all { padding: 4px 0px; text-align: center; color: #fff; background-color: #aaa; font-size:1.1em;}
.social-notifications-container .show-all:hover { background-color: #ccc; }
                                              

.social-container .close-icon{cursor:pointer;position:absolute;top:12px; right:80px;font-size:30px;color:#e9e9e9;}
.social-container .close-icon:hover{color:#fff;}


/*-----------------------------
 chart styles
------------------------------*/
.social-container .explore-container { padding:30px 10px; display:none;}
.social-container .explore-container .menu-container { display:flex; justify-content:space-between; margin-bottom: 10px; }
.social-container .explore-container .menu-container .menu { display:inline-block; height:auto;margin:0px; }
.social-container .explore-container .menu-container .menu.x { text-align: right; } 
.social-container .explore-container .menu-container .menu.y { text-align: left; }
.social-container .explore-container .menu-container .menu p { font-size: 1.4em; margin-bottom:10px; }
.social-container .explore-container .menu-container .menu p b { text-transform: capitalize; color: #f1f1f1; }
.social-container .explore-container .menu-container .menu.y div { margin: 0px 8px 0px 0px; }
.social-container .explore-container .menu-container .menu.x div { margin: 0px 0px 0px 8px; }
.social-container .explore-container .menu-container .menu div{ display:inline-block;  padding:3px 7px; text-align:center;font-size:1em; font-weight:bold; vertical-align:middle; background-color:rgba(255,255,255,0.1);cursor:pointer;}
.social-container .explore-container .menu-container .menu div:hover { background-color:rgba(255,255,255,0.15) }
.social-container .explore-container .menu-container .menu div.selected{background-color:rgba(255,255,255,0.3); color:#fff;}

.social-container .explore-container .graph-container { position: relative; }
.social-container .explore-container .graph-container .svg-container svg { position: absolute; }

.social-container .explore-container .axis path,
.social-container .explore-container .axis line { fill: none; stroke: #666; shape-rendering: crispEdges;}
.social-container .explore-container .x.axis path { stroke:#666; stroke-width: 1px; }
.social-container .explore-container .y.axis path {stroke:#666;stroke-width: 1px;}


.social-container .explore-container circle { fill-opacity: 0.9; stroke:transparent; stroke-opacity:0.5;fill:#fff; stroke-width:2px; cursor:pointer; }
.social-container .explore-container circle.you {fill-opacity:0.5; fill:#ff0000; stroke:#fff; stroke-opacity:0.8; stroke-width:3px;}
.social-container .explore-container circle.private { cursor: default; fill-opacity:0.4; }

.social-container .explore-container path.trend { stroke: #fff; stroke-opacity: 0.25; stroke-width:5px;fill:none;}
.social-container .explore-container circle.everyone {fill-opacity:0.1; fill:#fff; stroke:#fff;stroke-opacity:0.05;stroke-width:1px;}

.social-container .explore-container  .user-hover { position: absolute; background-color: #222; border:1px solid #111;}
.social-container .explore-container  .user-hover p { padding: 5px; }

.social-container .explore-container .legend-container { position: absolute; bottom: 5px; left: 90px; padding:8px 16px; background-color:rgba(255,255,255,0.05);font-size:1.2em;color:#bbb;border-radius:8px;}
.social-container .explore-container .legend-container > div { margin:5px; }
.social-container .explore-container .legend-container div, 
.social-container .explore-container .legend-container svg { display: inline-block; vertical-align:middle; margin-left:4px;}

/*-----------------------------
 feed
------------------------------*/

.feed-container .page-container.blurred { opacity:0.3; }
.feed-container.desktop .activity:first-child { margin-top: 80px; }
.feed-container.desktop .activity { margin-bottom:80px; width:700px; }

.feed-container.desktop .hover { display: none; position: absolute; padding: 6px 12px; background-color: #fff; color:#333; font-size: 12px; pointer-events:none; white-space: nowrap; border-radius:10px;}
.feed-container.desktop .hover.right { left: 25px; }
.feed-container.desktop .hover.left { right: 25px; }
.feed-container.desktop .hover.top { bottom: 15px; }
.feed-container.desktop .hover.bottom { top: 15px; }

.notification-container { position: absolute; width: 820px; height: 100vh; background-color: #3b5369; top:-10px; z-index:2; display:none;}
.notification-container .notification { margin:60px; padding: 25px 50px; line-height:1.3em; font-size: 30px; background-color: rgba(255,255,255,0.1); }
.notification-container .notification .note { padding: 15px 20px; font-size: 16px; line-height:1.2em; color:#f1f1f1; margin:40px 40px 20px 40px;border-top:1px solid #aaa; border-bottom:1px solid #aaa;}
.notification-container .notification .note > span { display:flex; }
.notification-container .notification .note > span > span { vertical-align:top; margin-right:15px; }
.notification-container .notification .note > span > div { font-style: italic; }
.notification-container .notification .choice-container { text-align: right; }
.notification-container .notification .choice { display:inline-block; margin:25px 0px 25px 0px; font-size: 0.6em; padding: 0.4em 1.2em; background-color: rgba(255,255,255,0.2); text-transform:uppercase; cursor:pointer; margin-left:15px;}
.notification-container .notification .choice:hover { background-color: rgba(255,255,255,0.3); }

.notification-container .notification .suggest-container {padding: 10px 40px;margin:40px 0px 0px 0px; border-top:1px solid rgba(255,255,255,0.2);border-bottom:1px solid rgba(255,255,255,0.2);}
.notification-container .notification .suggest-container h3 { font-size:18px; margin:10px 0px 0px 0px; line-height:1em;} 
.notification-container .notification .suggest-container p { margin: 10px 0px; font-size: 14px; color: #e6e6e6; line-height:1em;}
.notification-container .notification .miles-container { background-color: rgba(255,255,255,0.1); padding: 5px 10px; margin-top:20px; }
.notification-container .notification .miles-container .miles-picture { display:inline-block; height: 100px; width: 100px; background-size: 160px; background-position:-25px 0px; background-image: url("../images/home-new/landing-m236.png"); border-radius: 50px; margin:10px; cursor:pointer; }
.notification-container .notification .miles-container .bio { display:inline-block; vertical-align:top; font-size: 14px; color: #eaeaea; margin:10px; line-height:1.4em;}
.notification-container .notification .miles-container .bio p.name { border-bottom: 1px solid rgba(255,255,255,0.3); cursor:pointer;}
.notification-container .notification .miles-container .choice-container { text-align:left; box-sizing:border-box; height:45px; }
.notification-container .notification .miles-container .choice {display:inline-block; margin:10px;font-size: 0.7em; padding: 5px 25px;font-weight: bold;letter-spacing: 0.08em;color: #f1f1f1;background-color: transparent;border-radius: 0px;}
.notification-container .notification .miles-container .choice.friend { border: 1px solid #d1d1d1; }
.notification-container .notification .miles-container .choice.profile { border: 1px solid transparent; } 
.notification-container .notification .miles-container .choice:hover { color:#f1f1f1; border: 1px solid #f1f1f1; }

.feed-container.desktop .activity-container { position: relative; overflow:visible; min-height:140px; margin-left:140px; margin-right:30px; border:1px solid rgba(20,20,20,0.1); border-bottom: none; background-color:rgba(255,255,255,0.05);box-shadow:4px 6px 12px rgba(20,20,20,0.2);}
.feed-container.desktop .activity-container .time-ago { position:absolute; top:-18px; right:6px; font-size:1.2em; vertical-align:middle; line-height:1.2em; color:rgba(200,200,200,0.8);}
.feed-container.desktop .activity-container h2 { font-size: 0.4em; letter-spacing:0.08em; margin-top:-2px;text-transform:capitalize;color:rgba(255,255,255,0.5);text-align:left;}
.feed-container.desktop .activity-container       .details-container { position: relative; width:300px;height:45px;margin-left:20px;margin-top:10px;}
.feed-container.desktop .activity-container.badge .details-container p { font-size: 2em; margin-top: 20px; }
.feed-container.desktop .activity-container.badge .details-container p b { color: #fff; }

.feed-container.desktop .activity-container .center-container { display:inline-block; vertical-align:top; min-height:140px; width:360px;}
.feed-container.desktop .activity-container .right-container { display:inline-block; }
.feed-container.desktop .activity-container .right-container .badge { margin: 20px; }
.feed-container.desktop .activity-container .right-container .span { display: block; position: absolute;}
.feed-container.desktop .activity-container .right-container .note-count { position:absolute; right:20px; font-size:16px; height:26px; width:26px; line-height:26px; vertical-align:middle; text-align:center; }
.feed-container.desktop .activity-container .right-container .note-count span { background-image: url("../images/social/map-notes-34x31.png"); height: 34px; width: 31px; display:block; background-repeat:no-repeat;right:-12px;top:0px; position:absolute;}
.feed-container.desktop .activity-container .right-container .note-count div { color: #f1f1f1; }
.feed-container.desktop .activity-container .right-container .note-count div { position: absolute; top: 1px; left: 8px; }
.feed-container.desktop .activity-container .right-container .route-container { height: 162px; width: 160px; text-align:right;}
.feed-container .activity-container .right-container .route-container path { stroke: #fff; stroke-width: 2px; fill:none; pointer-events:none; }
.feed-container .activity-container .right-container .route-container circle { fill: rgba(0,0,0,0.8); stroke:#666; stroke-width:1px; pointer-events:none; }


.feed-container.desktop .activity-container .left-container { position: absolute; left: -185px; width:185px; top: 3px; text-align:center;}
.feed-container.desktop .activity-container .left-container .user-tags {padding:0px 15px; margin-top:-10px; margin-bottom:6px; }
.feed-container.desktop .activity-container .left-container .user-tags .pro-tag { display:inline-block; padding:1px 6px; text-transform:uppercase; letter-spacing:0.17em; margin-top:2px; background-color:rgba(255,255,255,0.15); font-weight:bold;}

.feed-container.desktop .activity-container .left-container .photo { display:inline-block; border-radius:100px; margin-top:8px; overflow:hidden;cursor:pointer;border:4px solid rgba(255,255,255,0.2);}
.feed-container.desktop .activity-container .left-container .photo .userphoto {  }
.feed-container.desktop .activity-container .left-container .display-name {cursor:pointer;color:rgba(255,255,255,0.95); padding:10px 0px;  font-size:1.4em;letter-spacing:0.05em;box-sizing:border-box; line-height:1.2em; text-align:center;border-radius:0px;font-weight:bold; }

.feed-container.desktop .activity-container.run .notable-container { position:absolute; box-sizing:border-box; background-color: rgb(47, 63, 78); border-radius:5px 0px 0px 0px; left:0px; top:-33px; height:33px; letter-spacing:0.05em; font-weight:bold;}
.feed-container.desktop .activity-container.run .notable-container .icon {margin-left:-25px; background-image:url('../images/social/notable-25.png'); width: 25px; height: 25px; display: inline-block; vertical-align: middle;}
.feed-container.desktop .activity-container.run .notable-container .notable-text { font-size:1.25em; margin-bottom:2px; padding:10px 26px 10px 12px; vertical-align: middle; display: inline-block;color:rgba(255, 255, 255, 1);}
.feed-container.desktop .activity-container.run .notable-container .notable-count-2{ position:absolute; right:-20px; top:0px; background-color: rgb(47, 63, 78); padding:2px 4px; border-radius:0px 10px 10px 0px; cursor:pointer;}
.feed-container.desktop .activity-container.run .notable-container .notable-count-1 {position:absolute; right:-17px; top:-12px; box-sizing:border-box; font-size:11px; font-weight:bold; color:#fff; background-color: #586d80; border-radius:20px; height:18px; text-indent:-2px; text-align:center; vertical-align:middle; line-height:18px; cursor:pointer; padding:0px 4px; }
.feed-container.desktop .activity-container.run .notable-container .notable-count {position:absolute; right:-19px; top:-12px; box-sizing:border-box; font-size:11px; font-weight:normal; color:#fff; background-color: #586d80; border-radius:20px; height:19px; text-indent:-2px; text-align:center; vertical-align:middle; line-height:19px; cursor:pointer; padding:0px 7px; border: 1px solid #586d80;}
.feed-container.desktop .activity-container.run .notable-container .notables-hover { position: absolute; top:10px; left:110%; z-index:2; border-radius:4px;  background-color: #2f3f4e; padding: 10px; line-height: 1.6em; font-size:1.2em; font-weight:normal; white-space:nowrap;}
.feed-container.desktop .activity-container.run .notable-container .notables-hover ul { list-style: circle; margin-left:20px; }
.feed-container.desktop .activity-container.run .notable-container .notables-hover li { }

.feed-container.desktop .activity-container.run .details-container > div > div { color: #fff; }
.feed-container.desktop .activity-container.run .details-container span { font-size: 0.45em; color:rgba(225,225,225,0.9); margin-left: 4px;}
.feed-container.desktop .activity-container.run .details-container > div { position: absolute; top: 0px; font-size: 2.5em;}
.feed-container.desktop .activity-container.run .details-container .distance { left: 0px; }
.feed-container.desktop .activity-container.run .details-container .duration-string { left: 100px;}
.feed-container.desktop .activity-container.run .details-container .pace-string { left: 220px; }
.feed-container.desktop .activity-container.run .time-string { display: none; }
.feed-container.desktop .activity-container .description { width:315px; min-height:65px;margin-left:20px; margin-top: 10px; font-size: 1.25em; line-height:1.4em; overflow:hidden; letter-spacing: .05em; color: rgba(255,255,255,0.95);}
.feed-container.desktop .activity-container .description-hide { margin-left: 20px; display:inline-block; font-style: italic; font-size:1.1em; padding:2px 8px; background-color:rgba(0,0,0,0.08);border-radius:8px;}

.feed-container.desktop .action-container { position:relative; margin-top:35px; bottom:0px; width:100%; height:37px; padding-left:21px; box-sizing:border-box; background-color: rgba(255,255,255,0.1);}
.feed-container.desktop .action-container .count-container { display:inline-block; text-align:center;}
.feed-container.desktop .action-container .count-container .count { box-sizing:border-box; margin-top:-16px; border-radius: 20px; min-width:15px; padding:0px 2px; line-height:15px; background-color: rgba(255,255,255,0.85); color:rgba(0,0,0,0.8);display:inline-block;font-size:1.1em;font-weight:bold;text-align:center;vertical-align:middle; overflow:hidden;}
.feed-container.desktop .action-container .likes-hover { position:absolute; margin-left:10px; background-color:#2f3f4e; padding:10px; border-radius:4px; text-align:left; color:#eee; z-index:4;font-size:1.2em;letter-spacing:0.03em;margin-top:-5px;}
.feed-container.desktop .action-container .likes-hover div { padding: 3px; }

.feed-container.desktop .activity-container .socially-motivated { position: absolute; top: 4px; left:-50px; height:30px;width:30px;  }
.feed-container.desktop .activity-container .socially-motivated svg { position:absolute; top:7px; left:7px; fill: #fafafa; }
.feed-container.desktop .activity-container .socially-motivated .hover-note { position:absolute; display:none; background-color: #fff; color: #555; text-align:left; font-size: 14px; padding: 10px 20px; width:292px;margin-left:10px;margin-top:40px;z-index:20; border-radius:8px; }
.feed-container.desktop .activity-container .socially-motivated:hover .hover-note { display:inline-block; }

.feed-container.desktop .action-container .action-container-item { display: inline-block; cursor:pointer; color: #bbb; }
.feed-container.desktop .action-container .action-container-item.selected { color: #fafafa;}
.feed-container.desktop .action-container .action-container-item:not(.disabled):hover {color:#fafafa; }
.feed-container.desktop .action-container .action-container-item .icon { opacity: 1; }
.feed-container.desktop .action-container .action-container-item:not(.disabled):hover .icon { opacity: 1.0; }
.feed-container.desktop .action-container .action-container-item.disabled { cursor: default; }
.feed-container.desktop .action-container .action-container-item.disabled .icon { opacity: 0.3; }
.feed-container.desktop .action-container .action-container-item.disabled span { opacity: 0.3; }
.feed-container.desktop .action-container .action-container-item.disabled .count-container { display:none; }
.feed-container.desktop .action-container .action-container-item.selected:hover {color:#fff; }
.feed-container.desktop .action-container .action-container-item > div { display: inline-block; }

.feed-container.desktop .action-container .action-container-item.like.container { width:100px; }
.feed-container.desktop .action-container .action-container-item.like.container > .icon { display: inline-block; vertical-align:middle; height: 37px; width: 37px; background-image: url("../images/like-explode-v2.png"); background-repeat: no-repeat; background-size: 2900%; cursor: pointer; }
.feed-container.desktop .action-container .action-container-item.like.container.disabled > .icon { cursor: default; }
.feed-container.desktop .action-container .action-container-item.like.container > span { display:inline-block; font-size: 1.5em; font-weight: bold; vertical-align:middle; cursor:pointer;}
.feed-container.desktop .action-container .action-container-item.like.container.disabled > span { cursor: default; }

.feed-container .action-container .action-container-item.like.container.new.selected .icon { animation: like-explode 1.2s steps(28) 1; }
.feed-container .action-container .action-container-item.like.container.selected .icon { background-position:right;}

.feed-container.desktop .action-container .action-container-item.comment.container { width:150px; }
.feed-container.desktop .action-container .action-container-item.comment.container > .icon { display: inline-block; vertical-align:middle; height: 22px; width: 22px; margin: 0px 2px 6px 2px; background-image: url("../images/social/comment_22.png"); cursor: pointer; }
.feed-container.desktop .action-container .action-container-item.comment.container > span { display:inline-block; font-size: 1.5em; font-weight: bold; vertical-align:middle; cursor:pointer;}
.feed-container.desktop .action-container .action-container-item.comment.container.disabled > .icon { cursor: default; }
.feed-container.desktop .action-container .action-container-item.comment.container.disabled > span { cursor: default; }
.feed-container.desktop .action-container .action-container-item.comment.container > .count-container { margin-left: 1px; }

.feed-container.desktop .action-container .action-container-item.comment-container.selected .comment { }

.feed-container.desktop .action-container .action-container-item.go-to-container {float: right;}
.feed-container.desktop .action-container .action-container-item.go-to-container > .icon { }
.feed-container.desktop .action-container .action-container-item.go-to-container > span:hover,
.feed-container.desktop .action-container .action-container-item.go-to-container .map-text:hover { color: #fff; cursor:pointer; background-color:rgba(255,255,255,0.15); border-color:transparent;}
.feed-container.desktop .action-container .action-container-item.go-to-container > span,
.feed-container.desktop .action-container .action-container-item.go-to-container .map-text { display:inline-block; width:80px; padding:12px 0px; text-align:center; color: #ddd; font-size: 1.2em; font-weight: bold; text-transform: capitalize;  }

.feed-container.desktop .comments-container { padding-top:0px;padding-left:10px; padding-right:30px; background-color:rgba(0, 0, 0, 0.1); }
.feed-container.desktop .comments-container.is-open { padding-bottom: 20px; padding-top:15px;}
.feed-container.desktop .comments-container .comment-count { font-size: 14px; margin: 8px; padding-bottom:1px; display: inline-block; border-bottom: 1px solid #aaa; cursor:pointer; }
.feed-container.desktop .comments-container .name { display:inline-block; font-weight: bold; font-size: 14px; margin: 4px 8px 2px 10px; color: #fff; cursor:pointer; }
.feed-container.desktop .comments-container .comment { font-size:14px; }
.feed-container.desktop .comments-container .comment { position: relative; padding:5px 0px 15px 48px;margin:0px; }
.feed-container.desktop .comments-container .comment .action { display:inline-block;margin:0px 8px 0px 10px;color: rgba(255,255,255,0.7); font-size: 10px; border-bottom:1px solid transparent;cursor:pointer;}
.feed-container.desktop .comments-container .comment .action:hover { border-bottom:1px solid rgba(255,255,255,0.6);cursor:pointer;}
.feed-container.desktop .comments-container .comment .comment-text { display:inline-block; max-width:400px; white-space:pre-wrap; padding:3px 10px; border-radius:10px;background-color:rgba(255,255,255,0.1);color:rgba(255,255,255,0.92);line-height:1.4em;margin-top:2px;}
.feed-container.desktop .comments-container .comment.is-edit .comment-text { background-color: transparent; padding: 0px; }
.feed-container.desktop .comments-container .comment.is-edit .options-container span.icon { display: none; }

.feed-container.desktop .comments-container .comment .options-container { display: inline-block; position:relative; }
.feed-container.desktop .comments-container .comment .options-container > span.icon{ display: inline-block; border-radius: 10px; font-size: 12px; background-color: rgba(255,255,255,0.04); color: rgba(255,255,255,0.2); height: 8px; width: 12px; line-height: 12px; vertical-align: middle; margin-left: 5px; padding: 0px 4px 10px 4px; letter-spacing: 1px;font-weight:bold; }
.feed-container.desktop .comments-container .comment .options-container:hover span.hover { display: inline-block; }
.feed-container.desktop .comments-container .comment .options-container span.hover { background-color:#3a4249; color:#f6f6f6;right:-50px; top:28px;z-index:1;}
.feed-container.desktop .comments-container .comment .options-container .options-menu { display:none; }
.feed-container.desktop .comments-container .comment .options-container.is-open:hover span.hover { display: none; }
.feed-container.desktop .comments-container .comment .options-container.is-open .options-menu { display:block; position:absolute; margin-top:12px; margin-left:-15px; padding:3px; border-radius:8px; background-color:#eee; z-index:1; }
.feed-container.desktop .comments-container .comment .options-container.is-open .options-menu .caret { position:absolute; height:10px; width:10px; transform:rotate(45deg); margin-left:20px; margin-top:-7px; background-color:#eee; }
.feed-container.desktop .comments-container .comment .options-container.is-open .options-menu .option { border-radius: 3px; margin: 5px; padding: 4px; font-weight:bold;color:#555;letter-spacing:0.03em;}
.feed-container.desktop .comments-container .comment .options-container.is-open .options-menu .option:hover {background-color:#22496d;color:#efefef;cursor:pointer;}
.feed-container.desktop .comments-container .comment .options-container.is-open .options-menu .option.edit   .icon { display:inline-block; background-image:url("../images/social/"); width:20px; height:15px; margin-right:2px;}
.feed-container.desktop .comments-container .comment .options-container.is-open .options-menu .option.delete .icon { display:inline-block; background-image:url("../images/social/"); width:20px; height:15px; margin-right:2px;}

.feed-container.desktop .comments-container .comment .options-container .options-menu div:before {background:url(../images/social/edit-delete.png);content:"";width:12px;height:17px;display:inline-block;vertical-align:middle;margin-right:5px;}
.feed-container.desktop .comments-container .comment .options-container .options-menu div.edit:before {background-position: 0 -19px;margin-top:-3px;}
.feed-container.desktop .comments-container .comment .options-container .options-menu div.edit:hover:before {background-position:0 0;}
.feed-container.desktop .comments-container .comment .options-container .options-menu div.delete:before {background-position:-15px -20px;margin-top:-2px;}
.feed-container.desktop .comments-container .comment .options-container .options-menu div.delete:hover:before {background-position:-15px -2px;}

.feed-container.desktop .comments-container .comment .comment-text-container { white-space: nowrap; }
.feed-container.desktop .comments-container .comment .comment-text-container .options-container:hover  span.icon{ background-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5);cursor:pointer;}
 
.feed-container.desktop .comments-container .comment .only-you-container { display: inline-block; position:relative; }
.feed-container.desktop .comments-container .comment .only-you-container img { display: inline-block; margin-right:5px;}
.feed-container.desktop .comments-container .comment .only-you-container:hover span.hover { display: inline-block; }
.feed-container.desktop .comments-container .textarea-container { display: none; }
.feed-container.desktop .comments-container .textarea-container .failure-message { display: table; margin-left:22px; padding:3px 6px; border-radius:5px; color:#666;background-color:#fff; display:inline-block; font-size:14px; }
.feed-container.desktop .comments-container .textarea-container .failure-message:empty { display: none; }
.feed-container.desktop .comments-container textarea { vertical-align: middle; display:inline-block; overflow: hidden; padding: 6px 8px; margin:20px 10px 20px 20px; width: 400px; font-size: 14px; border-radius: 5px; border: 1px solid #556677; background-color:rgba(255,255,255,0.92); font-family: 'Helvetica', Arial, non-serif; letter-spacing: .04em;}
.feed-container.desktop .comments-container .comment-text textarea { width:370px; margin:4px 6px;}
.feed-container.desktop .comments-container .reply-container textarea { padding: 2px 6px; }

.feed-container.desktop .comments-container .privacy {display:none; background-image: url('../images/social/locks-40x20.png');vertical-align:bottom;cursor:pointer;overflow:visible;position:relative;margin-bottom:25px;}
.feed-container.desktop .comments-container .privacy.unlocked {background-position:0 0;width:24px;height:20px;}
.feed-container.desktop .comments-container .privacy.locked {background-position:-24px -1px;width:15px;height:19px;}
.feed-container.desktop .comments-container .privacy .hover { position:absolute; right:-35px; top: 35px; }

@keyframes like-explode {
  from {background-position:left;}
  to { background-position:right;}
}

/*-----------------------------
overrides for comments on the by run panel
------------------------------*/
.run-by-run .toolbox .feed-container.desktop .comments-container { border: none; }
.run-by-run .toolbox .feed-container.desktop > div:first-child { margin-top: 0px; }
.run-by-run .toolbox .feed-container.desktop .comments-container { margin: 0px; background-color:initial;}
.run-by-run .toolbox .feed-container.desktop .comments-container .comment .remove span.hover { background-color:#161616; color:#f6f6f6;}

/*-----------------------------
popup from notification
------------------------------*/
.social-pop-up { position:absolute; left:50%;top:200px; margin-left: -350px; z-index:100;font-size:12px; border-radius:0px 10px 10px 10px; box-shadow:8px 12px 20px 10px rgba(0, 0, 0, 0.3);}
.social-pop-up .feed-container.desktop {  }
.social-pop-up .feed-container.desktop > div {margin:0px;}
.social-pop-up .feed-container.desktop .activity-container { border: none; margin: 0px; white-space:nowrap;}
.social-pop-up .feed-container.desktop .activity-container .center-container { white-space:normal;}
.social-pop-up .feed-container.desktop .activity-container .bottom-container { white-space: normal; }
.social-pop-up .feed-container.desktop .activity { width: 770px; }
.social-pop-up .feed-container.desktop .activity:first-child { margin: 0px; }
.social-pop-up .feed-container.desktop .activity-container .time-ago { padding: 5px 10px 18px 10px; background-color:#4d6c89;right:0px; top:-26px; color:#f6f6f6;border-radius:10px 10px 0px 0px}
.social-pop-up .feed-container.desktop .activity-container       .center-container { width:380px; height:200px; display:inline-block; vertical-align:top; margin-left:-3px; background-color:#fff; border-left:none;} 
.social-pop-up .feed-container.desktop .activity-container.run   .center-container .details-container { width:auto; display:flex; justify-content:space-between; padding:10px 20px; background-color:#e0e0e0; height:auto;  margin-top:0px; margin-left:0px; vertical-align:top;border-bottom:none;}
.social-pop-up .feed-container.desktop .activity-container.run   .center-container .details-container > div { position: relative; left:0px; }
.social-pop-up .feed-container.desktop .activity-container.run   .center-container .details-container > div { color: #333; }
.social-pop-up .feed-container.desktop .activity-container.run   .center-container .details-container > div > div { color: #454545; }
.social-pop-up .feed-container.desktop .activity-container.run   .center-container .details-container > div > div span { color: #777; }
.social-pop-up .feed-container.desktop .activity-container.run   .center-container .details-container > div > h2 { text-transform:uppercase;font-weight:bold; color:#666; letter-spacing:normal; font-size:0.3em; }
.social-pop-up .feed-container.desktop .activity-container.badge .center-container .details-container p { color: #555; }
.social-pop-up .feed-container.desktop .activity-container.badge .center-container .details-container p b {color:#ff6600; }
.social-pop-up .feed-container.desktop .activity-container       .center-container .description { width:auto; min-height:129px; margin: 0px; padding: 10px 15px; color: #333; font-size: 1em; box-sizing:border-box;}

.social-pop-up .feed-container.desktop .activity-container { padding-bottom: 0px; background-color:transparent;}
.social-pop-up .feed-container.desktop .activity-container .left-container .user-tags { display: none; }
.social-pop-up .feed-container.desktop .activity-container .left-container {position:relative; height:200px; top:0px;left:0px; width:auto; display:inline-block;vertical-align:top;}
.social-pop-up .feed-container.desktop .activity-container .left-container .display-name {position:absolute; max-width:none; width:100%; bottom:-37px; height:37px; line-height:18px; color:#fafafa; background-color:transparent; font-size:1.2em; box-sizing:border-box;z-index:2;cursor:pointer;}
.social-pop-up .feed-container.desktop .activity-container .left-container .photo { margin:0px; box-shadow: none; background-color:#aaa; border-color:#999;border:0px;border-radius:20px 0px 0px 0px;border:0px;}
.social-pop-up .feed-container.desktop .activity-container .left-container .photo .userphoto { margin-left:-10px; }
.social-pop-up .feed-container.desktop .activity-container .right-container { position: relative; height:200px; top: 0px; left: 0px; display: inline-block; background-color:#373c3e;vertical-align:top;margin-left:-4px;border-left:none; box-sizing:border-box;border-radius:0px;}
.social-pop-up .feed-container.desktop .activity-container .right-container.badge { background-color: #fff; border-left: none; width: 200px /* fix for misaligned edges of social popup*/; }
.social-pop-up .feed-container.desktop .activity-container .right-container .route-container { height:200px; width: 200px; }
.social-pop-up .feed-container.desktop .activity-container .right-container .route-container path { stroke: rgba(170, 0, 0, 0.8); stroke-width: 3px; fill:none; }
.social-pop-up .feed-container.desktop .activity-container .right-container .note-count { bottom:18px; right:2px; background-color:rgba(0,0,0,0.4); border-radius:20px;width:40px;height:32px; }
.social-pop-up .feed-container.desktop .activity-container .right-container .note-count div { top: 4px; left: 8px; }
.social-pop-up .feed-container.desktop .activity-container .right-container .note-count span { right: 6px; top: 3px; }
.social-pop-up .feed-container.desktop .activity-container .right-container a.attribution { display: inline-block; position: absolute; right: 0px; bottom: 0px; padding: 2px 4px; background-color: rgba(0,0,0,0.5); color: #ccc; font-size: 11px; text-decoration: none; font-weight: normal; }
.social-pop-up .feed-container.desktop .activity-container .right-container a.attribution .hover { display:none; position:absolute;right:-170px; bottom:-10px;}
.social-pop-up .feed-container.desktop .activity-container .right-container a.attribution:hover .hover { display:block; background-color:#f1f1f1;color:#666;padding:2px 6px;width:150px;white-space:normal;}
.social-pop-up .feed-container.desktop .activity-container .right-container .badge { margin: 37px; }
.social-pop-up .feed-container.desktop .notable-container {display:none;}

.social-pop-up .feed-container.desktop .bottom-container { border-radius:0px 0px 20px 20px; background-color: #f1f1f6; border-top: none; padding:20px 0px;min-height:80px;}
.social-pop-up .feed-container.desktop .likes-container { display: inline-block; width:190px; padding:10px 15px; box-sizing:border-box;vertical-align:top;}
.social-pop-up .feed-container.desktop .likes-container h2 { margin-left:5px; font-size: 1.2em; margin-bottom:4px;width:65%;letter-spacing:0.03em;color:rgba(0,0,0,0.75);font-weight:bold; margin-right:50px;}
.social-pop-up .feed-container.desktop .likes-container:not(.disabled) > span { display:inline-block;margin:2px 4px;padding:3px 10px;border-radius:10px;background-color:rgba(77, 108, 137, 0.6); color: #fafafa; cursor:pointer; }
.social-pop-up .feed-container.desktop .likes-container:not(.disabled) > span:hover { background-color:rgba(77, 108, 137, 1); }
.social-pop-up .feed-container.desktop .likes-container div { text-align: center; color: #777; font-size: 15px; margin-top: 10px; }
.social-pop-up .feed-container.desktop .likes-container div span { color: #555; font-weight:bold; }
.social-pop-up .feed-container.desktop .comments-container {border: none; display:inline-block; margin:0px; width:490px;background-color:transparent;}
.social-pop-up .feed-container.desktop .comments-container .comment {border-bottom:1px solid #ddd; }

.feed-container.desktop .comments-container .photo-container { position: absolute; top:12px; left:2px;overflow:hidden;cursor:pointer;}
.feed-container.desktop .comments-container .photo-container img { opacity:0.8; border-radius: 25px;width:35px;}
.feed-container.desktop .comments-container .photo-container:hover img {opacity:1; }

.social-pop-up .feed-container.desktop .comments-container .photo-container img { border: 3px solid transparent; opacity:1;}
.social-pop-up .feed-container.desktop .comments-container .photo-container:hover img { border: 3px solid #ddd; }
.social-pop-up .feed-container.desktop .comments-container .name {color: #444;}
.social-pop-up .feed-container.desktop .comments-container .name:hover { color: #555; }
.social-pop-up .feed-container.desktop .comments-container .textarea-container img { display: inline-block; border-radius: 20px; margin: 12px 2px; vertical-align:top;}
.social-pop-up .feed-container.desktop .comments-container .textarea-container textarea {border: 1px solid #a1a1a1;margin-top:15px; margin-left:5px; vertical-align:top; width:375px;}
.social-pop-up .feed-container.desktop .comments-container .textarea-container .privacy { margin-bottom: 0px; margin-top: 20px; vertical-align: top; }
.social-pop-up .feed-container.desktop .comments-container .comment-text {color: #4a4a4a; background-color:#fafafa; max-width:350px; }
.social-pop-up .feed-container.desktop .comments-container .comment .action { border-bottom: 1px solid #999; color: #444; }
.social-pop-up .feed-container.desktop .comments-container:not(.disabled) .comment .action:hover { border-bottom: 1px solid #444; color: #111; }

.social-pop-up .feed-container.desktop .comments-container .comment .options-container span.icon { color: #444; background-color: #fafafa; } 
.social-pop-up .feed-container.desktop .comments-container .comment .options-container:hover span.icon { color: #333;background-color: #fff; }
.social-pop-up .feed-container.desktop .comments-container .comment .options-container:hover .hover { background-color: #fff; color:#444; right:initial; left:20px; top:15px;}
.social-pop-up .feed-container.desktop .comments-container .comment .options-container.is-open .options-menu { background-color:#fff; }
.social-pop-up .feed-container.desktop .comments-container .comment .options-container.is-open .options-menu .caret { background-color:#fff; }
.social-pop-up .feed-container.desktop .comments-container .comment .options-container.is-open .options-menu .option { background-color:#fff; color:#555; font-weight:bold; }
.social-pop-up .feed-container.desktop .comments-container .comment .options-container.is-open .options-menu .option:hover { background-color: #f1f1f1; color: #444; }

.social-pop-up .feed-container.desktop .comments-container .privacy { margin-bottom: 34px; filter:invert(60%);}

.social-pop-up .feed-container.desktop .action-container { position: relative; bottom: initial; background-color:#4d6c89;border:0px;padding-top:2px;margin-top:0px;}
.social-pop-up .feed-container.desktop .action-container .action-container-item.like.container > span,
.social-pop-up .feed-container.desktop .action-container .action-container-item.comment.container > span {color: #ddd; font-size:1.4em; }

.social-pop-up .feed-container.desktop .action-container .action-container-item.go-to-container { float: none; position: absolute; right: 0px; top: 0px; height: 37px; text-align:center; } 
.social-pop-up .feed-container.desktop .action-container .action-container-item.go-to-container span {color: #ddd; background-color: transparent; padding: 0; border-radius: initial; font-size: 14px; height:37px; vertical-align:middle; line-height:37px; width:100px; }
.social-pop-up .feed-container.desktop .action-container .action-container-item.go-to-container span:hover {color: #fff; background-color:rgba(255,255,255,0.2);}

.social-pop-up .feed-container.desktop .action-container .action-container-item.like { padding-left:210px; color: #888; }
.social-pop-up .feed-container.desktop .action-container .action-container-item.like > span { margin-left: -5px; }
.social-pop-up .feed-container.desktop .action-container .action-container-item.comment { padding-left:60px; color: #888; }
.social-pop-up .feed-container.desktop .action-container .action-container-item.comment > span { margin-left: 0px; }

.social-pop-up .feed-container.desktop .action-container .action-container-item { color: #888; }
.social-pop-up .feed-container.desktop .action-container .action-container-item.selected { color: #333;}
.social-pop-up .feed-container.desktop .action-container .action-container-item:not(.disabled):hover { color:#333; }
.social-pop-up .feed-container.desktop .action-container .action-container-item.selected:not(.disabled):hover { color:#222; }
.social-pop-up .feed-container.desktop .action-container .action-container-item.disabled { cursor: default; }
.social-pop-up .feed-container.desktop .action-container .action-container-item.disabled .icon { opacity: 0.3; cursor:default;}
.social-pop-up .feed-container.desktop .action-container .action-container-item.disabled span { opacity: 0.3; cursor:default;}
.social-pop-up .feed-container.desktop .action-container .action-container-item.disabled .count-container { display:none; cursor:default;}
.social-pop-up .feed-container.desktop .action-container .count-container .count {background-color: #f1f1f1;font-size:0.9em;}

.phone .social-container .settings-icon-container { display: none; }
.phone .social-container .panel.filter .manage { display: none; }

/* mobile CSS */ 
.phone .feed-container .action-container .socially-motivated svg,
.phone .social-container .panel.filter .filter-container div.choice.explore,
.phone .feed-container .activity-container.run .notable-container .icon,
.phone .feed-container .action-container .socially-motivated,
.phone .action-container .action-container-item.like.container > span, 
.phone .action-container .action-container-item.comment.container > span,
.phone .social-container .settings-icon-container svg,
.phone .feed-container .comments-container .textarea-container {display:none;}

.phone .social-container {font-size:16px;position:relative;}

.phone .social-container .close-icon { font-size: 5em; right: 20px; }

/* filter options (mobile) */
.phone .panel.filter {background-color:initial;padding:0;position:initial;margin-top:10em;height:auto;}
.phone .panel.filter .filter-container {margin: 0; text-align:center;}
.phone .panel.filter .filter-container div.choice {font-size:2.5em;letter-spacing:.02em;text-transform:capitalize;padding:0.4em 3em;margin:0;width:4em;text-align:center;}
.phone .social-container .panel.view .view-container div.choice.selected, .social-container .panel.view .view-container div.choice.selected:hover {background-color:#3b5369;border:0px transparent;}

/* panel view - social feed options (mobile) */
.phone .social-container .panel.view {height:auto;margin:0;padding:0;background-color:#fff;color:#5a5a5a;z-index:1;position:absolute;top:0;left:0;width:auto;}
.phone .social-container .panel.view .view-container, .phone .social-container .panel.view .view-container div.choice {margin:0;}
.phone .social-container .panel.view .view-container .choice {font-size:3em;text-transform:capitalize;text-align:left;padding:1em;width:auto;border:1px solid rgba(170, 170, 170, 0.25);white-space:nowrap;}
.phone .social-container .panel.view .view-container span {vertical-align:middle;}
.phone .social-container .panel.view .view-container .choice .icon-container { width: 110px; display:inline-block;}
.phone .social-container .panel.view .view-container .choice .icon-container img {max-height: 60px;display: inline-block;vertical-align: middle;margin-right: 0.5em;}
.phone .social-container .panel.view .view-container .choice.similar img { margin-left:-10px;}
.phone .social-container .panel.view .view-container .choice.you img {border-radius:100px;}

.phone .social-container .panel.view .view-container div.choice.loading { overflow:visible; width:auto; height:auto; font-size:3em; padding:1em; background-color:#405a72;color:#fff;}
.phone .social-container .panel.view .view-container div.choice.loading .icon-container { width:0px; }
.phone .social-container .panel.view .view-container div.choice.loading img { display: none; }
.phone .social-container .panel.view          .view-container .choice:not(.selected){ width:0px; height:0px;  padding:0px; overflow:hidden; font-size:0px; border:none;}
.phone .social-container .panel.view.expanded .view-container .choice:not(.selected){ font-size:3em;/*border:1px solid rgba(170, 170, 170, 0.25);*/overflow:auto;padding:1em; }
.phone .social-container .panel.view.expanded .view-container .choice { display:block; width:auto; height:auto; }

/* social feed (mobile) */
.phone .panel.feed {width:100%;margin-left:0px;margin-top:2em;}
.phone .panel.feed .feed-container { width:auto; }
.phone .panel.feed .feed-container { position: relative; padding-left:0;}
.phone .feed-container .activity:first-child {margin-top:5em;}
.phone .feed-container .activity-container .time-ago {position:absolute;top:-2em;right:0.5em;font-size:2em;color:rgba(200,200,200,0.8);font-weight:bold;}
.phone .notification-container {position:initial;margin:0 auto;}
.phone .notification-container .notification {margin:1em;font-size:2.5em;padding:1em;}
.phone .notification-container .notification .choice {font-size:1em;margin-top:2em;text-transform:capitalize;font-weight:bold;color:#eee;}
.phone .notification-container .notification .suggest-container {padding:0.5em;margin:1em 0 0 0;}
.phone .notification-container .notification .suggest-container h3 {font-size:1em;}
.phone .notification-container .notification .suggest-container p {margin:0.75em 0;font-size:0.75em;line-height:1.4;letter-spacing:0.03em;}
.phone .notification-container .notification .suggest-container p br {display:none;}
.phone .notification-container .notification .miles-container {padding:1em;margin-top:1em;}
.phone .notification-container .notification .miles-container .bio {font-size:1em;margin:0;}
.phone .notification-container .notification .miles-container .miles-picture {display:block;margin:0 auto;}
.phone .notification-container .notification .miles-container .choice-container {margin-top:1em;}
.phone .notification-container .notification .miles-container .choice.friend {margin:0;font-size:0.8em;}
.phone .notification-container .notification .miles-container .choice.profile {margin:0 0 0 0.5em;font-size:0.8em;}
.phone .notification-container .notification .note {padding:1em 0;margin:1em 0;}
.phone .notification-container .notification .note span {font-size:2.25em;line-height:1.4em;letter-spacing:0.03em;padding:0.25em;margin:0;color:#eee;}

/* social feed - earned badge  (mobile) */
.phone .feed-container .badge p {font-size:2em;color:#ffffff;max-width:300px;}

/* social feed - activity container (mobile) */
.phone .feed-container .activity {position:relative;width:auto;padding-top:7em;margin-bottom:10em;}
.phone .feed-container .photo .userphoto {background-size:200px; border:0px solid rgba(255,255,255,0.2);border-radius:100px;overflow:hidden;cursor:pointer;margin:0 auto;margin-top:30px;}
.phone .feed-container .photo .userphoto.missing { background-size: auto; }
.phone .feed-container .activity-container {border:1px solid rgba(20,20,20,0.1);background-color:rgba(255,255,255,0.05);box-shadow:4px 6px 12px rgba(20,20,20,0.2);border-bottom:none;position:relative;}
.phone .feed-container .activity-container.badge .full.badge { height:200px; width:200px; background-size:cover; }
.phone .feed-container .activity-container .center-container {text-align:center;margin:0 auto;padding:0 1em;}
.phone .feed-container .activity-container .left-container {left:1em;top:1em;width:39%;min-height:320px;text-align:center;}
.phone .feed-container .activity-container .right-container {top:5em;right:2em;position:absolute;}
.phone .feed-container .activity-container .right-container.badge {top:6em;right:5em;position:absolute;}
.phone .feed-container .activity-container .right-container .route-container {width:15em;height:15em;}
.phone .feed-container .activity-container .right-container .route-container path {stroke-width:6px;}
.phone .feed-container .activity-container .left-container .display-name {font-size:2em;color:#ffffff;text-align:center;font-weight:bold;letter-spacing:.03em;margin-top:1em;}
.phone .feed-container .activity-container .left-container .user-tags .pro-tag {padding: 0.25em 0.5em;letter-spacing:.01em;background-color:rgba(255,255,255,0.2);color:#ffffff;font-weight:bold;display:inline-block;}
.phone .feed-container .activity-container .user-tags {font-size:1.75em;margin:0.25em auto 0.75em auto;width:25%;position:absolute;top:320px; left:60px;}
.phone .feed-container .activity-container.run .notable-container .notable-text {font-size:2em;padding:0.9em 0.25em 0.9em 1em;display:inline-block;}
.phone .feed-container .activity-container.run .notable-container {background-color:rgb(47, 63, 78);letter-spacing:0.05em;font-weight:bold;position:absolute;width:100%;top:-6em;}
.phone .feed-container .activity-container.run .notable-container .notable-count {font-size:2em;border-radius:50%;display:inline-block;background-color:rgba(255,255,255,0.10);padding:0.35em;vertical-align:middle;}
.phone .feed-container .activity-container .details-container div div {font-size:2.5em;font-weight:bold;}
.phone .feed-container .activity-container .details-container h2 {font-weight:normal;font-size:1.5em;margin-bottom:0.75em;}
.phone .feed-container .activity-container .description {font-size:40px;margin:2em auto;padding:0 1em;line-height:1.25em;height:auto;text-align:left;display:block;min-height:2em;}
.phone .feed-container .activity-container .details-container {position:absolute;top:5em;left:39%;text-align:left;}
.phone .feed-container .activity-container.badge .details-container { top:12em; left:35%;}
.phone .feed-container .activity-container .details-container div span {font-size:0.65em;margin-left:4px;}

.phone .feed-container .notables-hover ul li {font-size:2em;font-weight:normal;line-height:1.4;letter-spacing:0.04em;}
.phone .feed-container .notables-hover ul {list-style-type:circle;margin-left:2em;}
.phone .feed-container .notables-hover {position:absolute;top:-6em;left:18em;z-index:2;background-color:#2f3f4e;border-radius:8px;padding:1.25em;white-space:nowrap;border:1px solid #718292;}

/* social feed - action container (mobile) */
.phone .feed-container .action-container {width:100%;height:3em;box-sizing:border-box;background-color:rgba(255,255,255,0.1);font-size:2.25em;position:relative;bottom:0;}
.phone .feed-container .action-container-item.like.container, .phone .feed-container .action-container-item.comment.container {display:inline-block;padding:0.5em 1em;}
.phone .feed-container .action-container .action-container-item.disabled .icon { opacity: 0.3; }
.phone .feed-container .action-container .action-container-item.disabled span { opacity: 0.3; }
.phone .feed-container .action-container .action-container-item.disabled .count-container { display:none; }
.phone .feed-container .action-container-item.go-to-container {float:right;}
.phone .feed-container .action-container .action-container-item.like.container > .icon {background-image: url(../images/social/mobile-icons/like-mobile2900x82.png);height:75px;width:100px;display:inline-block;vertical-align:middle;background-repeat:no-repeat;background-size:2900%;cursor:pointer;margin-top:-5px;}
.phone .feed-container .action-container .action-container-item.comment.container > .icon {height:60px;width:60px;background-image: url(../images/social/mobile-icons/comment-mobile-60.png);background-repeat:no-repeat;display:inline-block;vertical-align:middle;margin-right:0.5em;}
.phone .feed-container .action-container .count-container .count {border-radius:50%;font-size:0.9em;padding:0.1em;min-width:1.5em;min-height:1.5em;line-height:1.5em;letter-spacing:.05em;background-color:rgba(255,255,255,0.15);color:#ffffff;}
.phone .feed-container .action-container .count-container {display:inline-block;text-align:center;}
.phone .feed-container .action-container .view-map { display: inline-block; }
.phone .feed-container .action-container .view-map.loading .loader-1 { display: block; }
.phone .feed-container .action-container .view-map.loading .map-text { display: none; }
.phone .feed-container .action-container .view-map .loader-1 { margin-left: 80px; margin-right: 80px; }
.phone .feed-container .go-to-container span {display:inline-block;padding:0.90em;background-color:rgba(255,255,255,0.15);margin-left:2px;}

.phone .feed-container .comments-container .name {display:inline-block;vertical-align:middle;font-size:2em;font-weight:bold;color:#ffffff;}
.phone .feed-container .comments-container .photo-container {overflow:hidden;cursor:pointer;display:inline-block;vertical-align:middle;}
.phone .feed-container .comments-container .photo-container img {opacity:0.85;border-radius:100px;min-width:100px;margin:2em 1em 1em 2em;border:2px solid rgba(255,255,255,0.2);}
.phone .feed-container .comment-text-container {width:75%;margin-left:9em;margin-bottom:5em;display:inline-block;}
.phone .feed-container .comment-text-container .comment-text {padding:0 0.5em 0.5em 0.5em;font-size:40px;display:inline-block;vertical-align:bottom;white-space:pre-wrap;max-width:85%;}
.phone .feed-container .comments-container textarea {vertical-align:middle;display:inline-block;overflow:hidden;padding:0.5em 1em;margin:2em 0.5em 1em 1em;width:80%;font-size:40px;border-radius:8px;border:1px solid #556677;background-color:rgba(255,255,255,0.92);font-family:'Helvetica', Arial, non-serif;letter-spacing:.04em;}
.phone .feed-container .comments-container .is-edit textarea {width:100%;margin-left:2.5em;}
.phone .feed-container .comments-container .comment .options-container.is-open .options-menu .option {font-size:2.5em;color:#555555;letter-spacing:0.03em;font-weight:bold;padding:0.5em;border-radius:1em;display:inline-block;}
.phone .feed-container .comments-container .comment .options-container.is-open .options-menu {display:block;position:absolute;margin-top:1.5em;margin-left:-5em;padding:1em 0.25em;border-radius:0.5em;background-color:#eeeeee;z-index:1;width:14em;}
.phone .feed-container .comments-container .comment.is-edit .options-container span.icon {display:none;}
.phone .feed-container .comments-container .comment .options-container span.icon {padding:0.2em;width:0.8em;font-size:3em;line-height:0.25em;background-color:rgba(0,0,0,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:50%;color:#fff;height:0.8em;display:inline-block;vertical-align:middle;}
.phone .feed-container .comments-container.is-open .comment-count {display:inline-block;font-size:2.25em;margin:1em 0 0.5em 2em;border-bottom:1px solid #ccc;padding-bottom:4px;}
.phone .feed-container .comments-container .comment .options-container.is-open .options-menu .caret {position:absolute;height:2em;width:2em;transform:rotate(45deg);margin-left:5.6em;margin-top:-0.8em;background-color:#eeeeee;}
.phone .feed-container .comments-container .comment .options-container .options-menu div:before {margin-right:0.5em;background:url(../images/social/mobile-icons/edit-delete-mobile.png);content:"";width:29px;height:37px;display:inline-block;vertical-align:middle;margin-right:0.25em;}
.phone .feed-container .comments-container .comment .options-container .options-menu div.edit:before {background-position: 0 -1px;}
.phone .feed-container .comments-container .comment .options-container .options-menu div.edit:hover:before {background-position:0 -39px;}
.phone .feed-container .comments-container .comment .options-container .options-menu div.delete:before {background-position:-32px -2px;}
.phone .feed-container .comments-container .comment .options-container .options-menu div.delete:hover:before {background-position:-32px -39px;}

.phone .feed-container .is-edit .comment-text-container {margin-left:3em;margin-bottom:1em;}
.phone .feed-container .is-edit .comment-text {font-size:1em;padding:0;}
.phone .feed-container .options-container .options-menu, .phone .feed-container .options-container .hover {display:none;}
.phone .feed-container .options-container {display:inline-block;position:relative;}

/* social notifications container (mobile) */
.phone .social-notifications-container {top:0;font-size:16px;left:0;width:85%;line-height:1.4;}
.phone .social-notifications-container .notification {padding:2em;}
.phone .social-notifications-container .notification p {font-size:2.5em;}
.phone .social-notifications-container .notification .user-image-container {max-width:100px;}
.phone .social-notifications-container .notification .notification-text {margin-bottom:1em;}
.phone .social-notifications-container .notification-text-container {width:70%;margin-left:1em;font-size:2.15em;}
.phone .social-notifications-container .notification .choice.follow {padding:0.75em;text-align:center;width:50%;}
.phone .social-notifications-container .notification .choice-container.following {display:block;text-align:left;margin:0.5em 0 1em 0;}
.phone .social-notifications-container .notification .choice-container {width:100%;text-align:left;margin:1em 0;}
.phone .social-notifications-container .notification.comment .icon { background-image: url('../images/sprites/socialSprite-63x35.png');background-position: 0 -7px;display: inline-block;width: 29px;height: 29px;vertical-align:top; }
.phone .social-notifications-container .notification.like    .icon { background-image: url('../images/sprites/socialSprite-63x35.png');background-position: -35px 0;display: inline-block;width: 29px;height: 29px; }

.phone .social-pop-up {position:fixed; height:100vh;width:100vw;top:0;left:0;overflow:scroll; margin-left:0;background-color:#344A5E;font-size:16px;color:#ffffff;}
.phone .social-pop-up .close-button { font-size: 6em; right:1em; height:auto; width: auto; z-index:1; }
.phone .social-pop-up .feed-container .activity:first-child {margin-top:0;margin-bottom:0;}
.phone .social-pop-up .feed-container .activity-container .time-ago {top:0.25em;color:#ffffff;top:1em;right:2em;}
.phone .social-pop-up .feed-container .activity-container .description {font-size:40px;line-height:1.5em;letter-spacing:.04em;padding:1.5em 1em;}
.phone .social-pop-up .feed-container .comments-container .is-edit textarea {margin-left:1em;margin-top:0.25em;font-size:40px;}
.phone .social-pop-up .feed-container .comments-container.is-open .textarea-container img {display:none;}
.phone .social-pop-up .feed-container .comments-container textarea {margin-left:3em;}
.phone .social-pop-up .feed-container .comments-container .textarea-container {margin-left:3em;width:90%;}
.phone .social-pop-up .feed-container .comments-container .textarea-container textarea {border:1px solid #a1a1a1;margin-left:10px;margin-top:32px;width:75%;}
.phone .social-pop-up .feed-container .comments-container .textarea-container img {display:inline-block;border-radius:20px;margin:18px 2px;vertical-align:middle;width:50px;}
.phone .social-pop-up .feed-container .comment-text-container .comment-text {font-size:40px;line-height:1.5em;}
.phone .social-pop-up .likes-container {margin:2em 4em;padding-bottom:2em;}
.phone .social-pop-up .likes-container h2 {font-size:2.25em;font-weight:bold;margin-bottom:0.5em;}
.phone .social-pop-up .likes-container span {font-size:2em;display:inline-block;margin:0.5em 0.5em 0.5em 0;padding:0.3em 0.5em;background-color:rgba(255,255,255,0.15);border-radius:1em;}
.phone .social-pop-up .likes-container br {display:none;}
.phone .social-pop-up .likes-container .others {font-size:2em;display:inline-block;}
.phone .social-pop-up .likes-container .others span {font-size:1em;}
.phone .social-pop-up .note-count {display:none;}

/* social configure (mobile) */
.phone .social-configure-container {top:0;left:0;margin-left:0;width:100%;height:100vh;}
.phone .social-configure .step-container.step-5 {margin-top:0;min-height:100px;}
.phone .social-configure .step-container.step-5 h2 {font-size:3em;padding:1em 2em 0 2em;font-weight:bold;}
.phone .social-configure .step-container.step-5 .note {font-size:2em;margin:0 auto 1em auto;text-align:left;padding:0.5em 1em;width:80%;}
.phone .social-configure .step-container.step-5 .social-options {margin:0 auto 0 auto;width:90%;}
.phone .social-configure .step-container.step-5 .social-option .name {font-size:2em;text-align:left;margin:2em 0 0 5em;}
.phone .social-configure .step-container.step-5 .social-option {display:block;width:90%;height:290px;padding:0 4em;position:relative;margin:0.5em auto;}
.phone .social-configure .step-container.step-5 .social-option p {font-size:2em;text-align:left;margin:1em 0 0 5em;letter-spacing:0.01em;}
.phone .social-configure .step-container.step-5 .social-option .icon {position:absolute;top:4em;left:2em;}
.phone .social-configure .step-container.step-5 .social-option.option-4 .icon {background-image:url('../images/social/mobile-icons/socially-motivated-150.png');height:152px;width:155px;}
.phone .social-configure .step-container.step-5 .social-option.option-3 .icon {background-image:url('../images/social/mobile-icons/socially-open-152.png');height:97px;width:152px;margin-top:2em;}
.phone .social-configure .step-container.step-5 .social-option.option-2 .icon {background-image:url('../images/social/mobile-icons/closed-150.png');height:152px;width:152px;}
.phone .social-configure .step-container.step-5 .social-option.option-1 .icon {background-image:url('../images/social/mobile-icons/private-150.png');height:154px;width:130px;}
.phone .social-configure .step-container.step-5 .social-option.option-4:hover .icon, .phone .social-configure .step-container.step-5 .social-option.option-4.selected .icon {background-image:url('../images/social/mobile-icons/social-motivated-light-150.png');}
.phone .social-configure .step-container.step-5 .social-option.option-3:hover .icon, .phone .social-configure .step-container.step-5 .social-option.option-3.selected .icon {background-image:url('../images/social/mobile-icons/socially-open-light-152.png');height:99px;}
.phone .social-configure .step-container.step-5 .social-option.option-2:hover .icon, .phone .social-configure .step-container.step-5 .social-option.option-2.selected .icon {background-image:url('../images/social/mobile-icons/closed-light-152.png');}
.phone .social-configure .step-container.step-5 .social-option.option-1:hover .icon, .phone .social-configure .step-container.step-5 .social-option.option-1.selected .icon {background-image:url('../images/social/mobile-icons/private-light-150.png');}

.phone .social-configure .step-container.step-6 {margin:0;height:100vh;padding:3em;overflow:auto;font-size:16px;}
.phone .social-configure .step-container.step-6 .friends-note {display:none;}
.phone .social-configure .step-container.step-6 .privacy-settings-container.run-privacy {margin-top:3em;}
.phone .social-configure .step-container.step-6 .setting .pros-and-cons-container span {width:2.5em;}
.phone .social-configure .step-container.step-6 .setting .pros-and-cons-container > div {font-size:2em;margin:0.5em 0 0.5em 0;display:inline-block;}
.phone .social-configure .step-container.step-6 .setting .name div {font-size:1em;}
.phone .social-configure .step-container.step-6 .setting .name {font-size:2em;font-weight:bold;padding:0.5em 0.5em 0.5em 0;}
.phone .social-configure .step-container.step-6 .social-nav div {font-size:3em;margin:0 0.35em 0 0;padding:0.5em 0.1em;width:30%;text-align:center;text-transform:capitalize;}
.phone .social-configure .step-container.step-6 .social-nav div.selected {background-color:#537493;color:#ffffff;border-radius:8px;}
.phone .social-configure .step-container.step-6 .social-nav {margin:0 auto 0 auto;width:95%;}
.phone .social-configure .step-container.step-6 .choice-container {top:initial;right:initial;width:100%;margin:2em auto;position:initial;text-align:center;}
.phone .social-configure .step-container.step-6 .setting .checkbox {height:2em;width:2em;padding:1em;}
.phone .social-configure .step-container.step-6 .setting .checkbox svg {height:2.5em;width:2.5em;margin-top:0;margin-left:-4px;}
.phone .social-configure .step-container.step-6 .note.show-if-social span {font-size:2.5em;font-style:normal;margin:1em;color:#fff;line-height:1.4;}

.phone .social-configure .step-container.step-7 .message {font-size:3.5em;margin:2em 1em;line-height:1.4;}

.phone .social-configure .step-container.step-5 .choice-container {position:fixed;bottom:0;width:100%;margin:0 auto;}
.phone .social-configure .step-container.step-5 .choice-container div.privacy {font-size:1.5em;}
.phone .social-configure .step-container.step-5 .choice-container div.continue {font-size:2em;}

.phone .social-configure .choice-container {position:absolute;bottom:0;width:90%;margin:0 auto;}
.phone .social-configure .choice-container div.privacy {width:30%;text-align:center;text-decoration:underline;}
.phone .social-configure .choice-container > div {font-size:2em;font-weight:bold;color:#ffffff;padding:1em;margin:0.5em;vertical-align:middle;}
.phone .social-configure .choice-container div.finish {font-size:3em;padding:0.5em 1.5em;margin-bottom:2em;}



/**
 * ==============================================
 * Dot Elastic
 * ==============================================
 */
.view-container .choice.loading .loader-1 { display:none; }
.phone .view-container .choice.loading .loader-1 { display:inline-block; margin-right:50px;margin-left:30px;}

.loader-1 {display:none;position: relative;width: 10px;height: 10px;border-radius: 5px;background-color: rgba(255,255,255,0.8);color: rgba(255,255,255,0.8);animation: dotElastic 1s infinite linear;}
.loader-1::before, .loader-1::after { content: ''; display: inline-block; position: absolute; top: 0;}
.loader-1::before {left: -15px; width: 10px; height: 10px; border-radius: 5px; background-color: rgba(255,255,255,0.8); color: rgba(255,255,255,0.8); animation: dotElasticBefore 1s infinite linear;}
.loader-1::after { left: 15px; width: 10px; height: 10px; border-radius: 5px; background-color: rgba(255,255,255,0.8); color: rgba(255,255,255,0.8); animation: dotElasticAfter 1s infinite linear;}

@keyframes dotElasticBefore {0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1, 1.5);
  }
  50% {
    transform: scale(1, 0.67);
  }
  75% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}

@keyframes dotElastic {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1, 1.5);
  }
  75% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}

@keyframes dotElasticAfter {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1, 0.67);
  }
  75% {
    transform: scale(1, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}