body{
  background:#f7f7f7;
  overflow-x:hidden;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}


#g-container{
  width:920px;
  margin: 25px auto;  
  height: 100%;
  padding-top:0px;  
  position:relative;
}

#g-log{
  width:650px;
  position: relative;
  padding-top:15px;
}

#g-sidebar{
  width:250px;
  position:absolute;
  left: 585px;
  top:0;
  bottom:0;
  display:none;
  background:#f7f7f7;
}


/* start top */
#g-header{
  margin: 0;
  padding: 0;
  z-index:1000;
  background: rgba(247,247,247,.85);
  position:absolute;
  left:0;
  top:77px;
  width:665px;
}
.ink-is-fixed #g-header{
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
#g-header svg{
  
}
/*.ink-is-fixed #g-header{
  
  box-shadow: 0 0 12px -5px rgba(0,0,0,.55);
}*/
/*.ink-is-fixed #g-header:after{
  content: '';
height: 3px;
position: absolute;
left: 0;
right: 0;
bottom: -3px;
-webkit-mask-box-image: -webkit-linear-gradient(left,transparent 0%,rgba(0,0,0,1) 50%,transparent 100%);
background-color: transparent;
background-image: -webkit-linear-gradient(top,rgba(0,0,0, .3),transparent);
background-image: -moz-linear-gradient(top,rgba(0,0,0, .3),transparent);
background-image: -ms-linear-gradient(top,rgba(0,0,0, .3),transparent);
background-image: -o-linear-gradient(top,rgba(0,0,0, .3),transparent);
background-image: linear-gradient(top,rgba(0,0,0, .2),transparent);
z-index: 1001;

}
*/
.g-mug{
  float: left;
display: inline;
margin: 0 12px 0 20px;
width: 50px;
height: 50px;
background: #ddd;
position: relative;
}

.g-hed{
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
  font-family:sans-serif;
  color: #333;
  padding: 5px 0 0;
  margin: 0;
}

.g-subHed{
  font-size: 12px;
  font-weight: normal;
  line-height: 1.5;
  font-family:sans-serif;
  color: #666;
  margin: 0;
  padding: 0;
}

#g-barNav{

width: 1002px;
/*box-shadow: -2px 0 15px -5px rgba(0,0,0,.1);*/
position: relative;
margin: -24px 0 0;
/*background:rgba(255,255,255,1);*/
position: absolute;
left: 685px;
top: 0;
padding:80px 0 0;
z-index:10006;  
bottom:0;  
  


}

.g-viewToggles{
  list-style-type: none;
  margin: 0 0 10px;
  padding: 0;
  text-align: center;
  /*background:#f7f7f7; */
}

/*.g-viewToggles a#{
  width:71px;
  padding:5px;
  background: url(images/);
}*/

#toggle-distance {
  /*background:url(../images/ruler.png) no-repeat 0 6px;
  padding: 3px 0 3px 27px;*/
  /*border-radius:2px 0 0 2px;*/
  /*border-right:1px solid #aaa;*/
  
}

#toggle-distance a{
  padding-left:0;
  margin-left:0;
}

#toggle-time {
/*  background:url(../images/time.png) no-repeat 1px 3px; 
  padding: 3px 0 3px 19px;
*/
/*border-right:1px solid #aaa;*/

}
#toggle-time a{
margin-left:0;
}

#toggle-elevation{
/*  background:url(../images/elevation.png) no-repeat 0 4px;
  padding: 3px 0 3px 22px;
*/  
}

.g-viewToggle{
  margin: 0 0px 0 0;
  
  float: left;
  font-size: 11px;
  list-style-type: none;
  
  /*
  text-transform:uppercase;
  background:#ccc;
  text-align:center;*/
  /*box-shadow: 1px 1px 0 #aaa, 2px 2px 0 #aaa, 3px 3px 0 #aaa;*/
  /*box-shadow: 1px 1px 0 #aaa, 2px 2px 0 #ccc, 2px 2px 0 #aaa;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
  color:#fff;
  cursor: pointer;
  transition: box-shadow .3s;*/
}
.g-viewToggle a{
  color:#007fb6;
  font-size:11px;
  padding: 7px;
  cursor: pointer;
  margin-left:5px;
}
.g-toggle-header{
  float: none;
  display:block;
  clear:both; 
  padding:0 12px 0 0;
  text-align:left;
  font-size:12px;
  margin-bottom:2px;
}
.g-viewToggle a:hover{
  color:#333;
  text-shadow: none;
}

.g-scaleBy-distance #toggle-distance a,
.g-scaleBy-time #toggle-time a,
.g-scaleBy-elev_gain #toggle-elevation a{
  
  color:#000;
  font-weight:bold;

}


.g-days{
list-style-type: none;
margin: 0;
padding: 0;
/*border: 1px solid #ddd;*/
box-shadow: 1px 1px 1px #ddd;
background: #fff;
}
.ink-is-fixed .g-days{
  border-top: 1px solid #fff;
  box-shadow:none;
}
.g-day{
  list-style-type:none;
  font-size: 11px;
  color:#999;
  margin: 0;
  padding: 8px 0 6px;
  float: left;
  text-align:center;
  width: 76px;
  /*text-transform:uppercase;*/
  font-weight: normal;
  position:relative;
}

.g-day:after{
  content: '';
  position: absolute;
  right:0;
  top:6px;
  bottom:6px;
  width:1px;
  background:#eee;
}
.g-day:last-child:after{
  background:#fff;
}

.g-day-intro{
  width: 121px;
  text-align:center;
  
  color: #fff;
  
}
/*.g-day-intro:after{
  width:0;
}
.g-day-intro:before{
  width:154px;
  left:-1px;
  top:-1px;
  box-shadow:inset;
  height:28px;
  box-shadow: inset 0 0 0 1px rgb(252,76,2);
  content: '';
  position:absolute;
}*/

/* end top */

/* charts */
.weekBar{
  fill: rgb(168, 213, 224);
  shape-rendering:crispEdges;
  transition: fill .1s;
  cursor:pointer;
}
.weekBar:hover,.weekBar-selected{
  fill: rgb(92, 181, 202)
}
#g-rows{
  width: 670px;
  padding-top:30px;
}
.g-row{
  
  margin-bottom:15px;
}

.divider{
  stroke: #ccc;
  stroke-dasharray: 1,1;
  shape-rendering: crispEdges;
}
.run{
  transition-property: fill-opacity, fill;
  transition-duration: 1s, 1s;
  stroke: none;
  fill-opacity:.7;
  fill: #a5d4e1;    

}
.run-depth-0{
 fill: #f1f1f1;
stroke-width: 1px;
stroke-opacity: .85;
transition: stroke-width .4s;
fill-opacity: .35;
stroke-dasharray: 1,2;
stroke: #aaa;
}

circle.active{
    stroke-width: 2.5px;
    stroke: #333;
    fill-opacity:1;

  }

/*.active circle.run-depth-0{
  stroke-width:4.5px;
  stroke;
}*/
  text.time,
  text.distance,
  text.sum{
    transition: opacity .7s;
    font-size: 13px;
    font-family:sans-serif;
    fill:#666;
    pointer-events: none;
  }
    .ink-tooltip{
  max-width: 280px;
  background: rgba(255,255,255,.95);
  box-shadow: 0px 1px 3px rgba(0,0,0,.1);
  text-align: left;
  padding: 10px;
  z-index: 100000;
  font-size: 12px;
  position:absolute;
  color:#333;
  /*pointer-events:none;*/
  border:1px solid #ddd;
  transition: width .3s;
  
  /*border-bottom-color:#efefef;
  border-right-color:#efefef;*/
  }
  .ink-tooltip:after{
    /*pointer-events:none;*/
    content: '';
    width: 0; 
    height: 0; 
    display:inline-block;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(0,0,0,.8);
    margin:100px 0 0;
    z-index:10000;
    position:absolute;
    left:45%;
    bottom:-10px;
  }
    .ink-tooltip:before{
    /*pointer-events:none;*/
    content: '';
    width: 0; 
    height: 0; 
    display:inline-block;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #fff;

    margin:100px 0 0;
    z-index:10001;
    position:absolute;
    left:45%;
    bottom:-10px;
  }
  .ink-tooltip .block{
    font-size:14px;
    font-weight:bold;
    padding-bottom:8px;
    text-overflow: ellipsis;
    margin: 0 0 2px;
    /*text-align:center;*/
    /*width:180px;*/
  }
  .ink-tooltip .block-type{
    font-size:11px;
    text-transform:uppercase;
    color:#999;
    margin: 0;
    padding-bottom:3px;
    font-weight:normal;

  }
  .block b{
    display:inline-block;
    width:86px;
  }
  .ink-tooltip .pace{
    font-size:12px;
    font-weight:normal;
    padding-bottom:0;    
  }  
  circle.active{
    stroke-width: 2.5px;
    stroke: #999;
    fill-opacity:1;
    stroke-opacity:.5;
  }
  text.time,
  text.distance,
  text.sum,
  text.rest{
    transition: font-size .3s;
    font-size: 12px;
    font-family:sans-serif;
    fill:#666;
    fill-opacity:1;
  }
  text.rest{

  }
  text.activeText{
    transition: font-size .3s;
    font-size:15px !important;
  }
  text.rest{
    font-size:10px;
    fill-opacity:.4;
    fill:#333;
    cursor:default; 
    /*text-transform: uppercase;*/
  }

  text.rest:hover{
    fill-opacity:1;
  }
  .weekTotal{
    font-size:18px;
    font-weight:bold;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  }

  .weekTotal-time{
    font-size:11px;
    font-weight:normal;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    fill:#999;
  }

  .weekTotal-elev{
    font-size:11px;
    font-weight:normal;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    fill:#999;
  }
    .divider{
    stroke: #ccc;
    stroke-dasharray: 1,1;
    shape-rendering: crispEdges;
  }
  .text-bg{
    fill:#f7f7f7;
    point-events: none;
  }
  .text-bg-hidden{
    display:none;
  }
  .dateRange{
    font-size:10px;
    fill:#999;
    text-transform:uppercase;
  }

/*  .g-scaleBy-elev_gain circle{
     fill: #aaa;     

  }*/
  #g-barNav-chart{
background: #fff;
width: 200px;
padding: 4px 11px 12px 0;
box-shadow: 1px 1px 0px #ddd, 2px 2px 0px #ddd;
border-radius: 4px;
/*min-height:300px;*/
/*display: none;*/
  }

 #g-barNav-chart .domain{
  stroke-width: 1px;
  fill: #999;
  display:none;
 } 
 #g-barNav svg{
 /*border-bottom:1px solid #ddd;*/
}

.g-bigBarLabel{
  font-size:13px;
  fill:#333;
  font-weight:bold;
  pointer-events: none
}

.g-smallBarLabel{
  font-size:11px;
  fill:#555;
  font-weight:normal;
  pointer-events: none
}


.g-barLabel{
  font-size:11px;
  fill:#555;
  pointer-events: none;
}
.g-line{
  stroke-width:1px;
  stroke:#fff;
  shape-rendering:crispEdges;
}

.run-depth-0.run-children-1{
  display: none;
}

.run-type-0{
  cursor:pointer;  
}
.run-type-1{
  fill:rgb(255, 184, 212);
  cursor:pointer;
}
.run-type-2{
  fill:rgb(138, 185, 142);
  cursor:pointer;
}
.run-type-3{
  fill: rgb(250, 198, 87);
  cursor:pointer;
}

#g-timeNav{
  list-style-type: none;
  margin: 0;
  padding:0;
  box-shadow:1px 1px 0px #fc4c02, 2px 2px 0px #fc4c02;
  width:201px;
  border-radius: 0 5px 0 0;
}

#g-timeNav li{ 
  list-style-type: none;
  margin: 0;
  padding:0;
  float:left;
}
#g-timeNav li:first-child a{ 
  border-radius: 4px 0 0 0;
  overflow:hidden;
}
#g-timeNav li:last-child a{ 
  border-radius: 0 4px 0 0;
  overflow:hidden;
}
#g-timeNav li a{
  display:block;
  background:#fc4c02;
  color:#ffded2;
  text-align:center;
  width:67px;
  padding:9px 0;
  font-size:12px;
  text-decoration: none;
  text-shadow: 1px 1px 3px rgba(0,0,0,.3);
  position:relative;
  transition:background .4s;
}
#g-timeNav li.selected a,
#g-timeNav li a:hover{
  box-shadow:inset 0 0 12px rgba(0,0,0,.15);
  text-shadow: 1px 1px 3px rgba(0,0,0,.9);
  color:rgba(255,255,255,1);
  background:#e23c03;
}
#g-timeNav li.selected a:before,
#g-timeNav li a:before:hover{
   content: "";
   position:absolute; 
   left:0;
   top:0;
   bottom:0;
   width:1px;
   background:rgba(0,0,0,.1);
   pointer-events: none;
   z-index:100;
}
#g-timeNav li.selected a:after,
#g-timeNav li a:after:hover{
   content: "";
   position:absolute; 
   right:0;
   top:0;
   bottom:0;
   width:1px;
   background:rgba(0,0,0,.1);
   pointer-events: none;
    z-index:100;
}
#row-prev,
#row-next{
  width:30px;
  text-indent:-1000em;
  outline:none;
  margin: 1px 0 0 1px;
  visibility:hidden;
}
#row-prev:hover,
#row-next:hover{
  background-color:#f7f7f7;
  cursor:pointer;
}

#row-prev{
  background: url(up1.png) no-repeat center center;
}
 #row-next{
  background: url(down1.png) no-repeat center center;
}
#row-next:after{
  display:none;
}

#row-summary{
  text-shadow: px 1px 0px rgba(0,0,0,.1);
 font-size: 14px;
color: #555;
padding-right: 7px;
padding-left: 18px;
text-align: left;
width: 94px;
padding-top: 6px;
font-weight:bold;
}

#row-summary:after{
  background:#fff;
}

#g-header-overlay{
  position:fixed;
  top:63px;
  left:0;
  right:0;
  height:18px;
  background:#fff;
  background: linear-gradient(to top, rgba(248,248,248,0) 0%,rgba(248,248,248,.9) 100%); 
  pointer-events:none;
  z-index:100;
  display:none;
}

.ink-is-fixed #g-header-overlay{
  display:block;
}

#g-footer-overlay{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  height:30px;
  background:#fff;
  background: linear-gradient(to bottom, rgba(248,248,248,0) 0%,rgba(248,248,248,1) 100%); 
  pointer-events:none;
}

.g-run-key{
  margin: 8px 0 0 12px;
  padding:0;
  font-size:12px;
  float:right;
}
.g-run-key dt{
  font-weight:bold;
  margin: 0;
  padding:0;
  float:left;
  display:none;
}

.g-run-key dd{
  font-weight:normal;
  margin: 0 15px 0 0;
  padding:0;
  float:left;
  font-size:11px;
}

.g-run-key .g-chip{
  float:left;
  margin:2px 5px 0 0;
  width:9px;
  height:9px;
  background:#ddd;
  border-radius:9px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}

.g-run-type-workout .g-chip{
  background:orange;
}
.g-run-type-run .g-chip{
  background: rgb(187,226,236);
}
.g-run-type-race .g-chip{
  background:rgb(255, 184, 212);
}
.g-run-type-long .g-chip{
  background: rgb(138, 185, 142);
}

.g-month-title{
font-size: 14px;
color: #555;
padding: 7px 18px 7px 10px;
margin: 0 7px 0 7px;
/*background: #fff;*/
border: 1px solid #f7f7f7;
box-shadow: 1px 2px 1px -2px rgba(0,0,0,.18);
}

.g-row:first-child .g-month-title{
  visibility:hidden;
  height:1px;
  margin:0;
  padding:0;
}


.y.axis text{
  font-size:11px;
  pointer-events:none;
  fill:#999;
}
.y.axis line{
  stroke-width:1px;
  stroke:#999;
  pointer-events:none;
  shape-rendering:crispEdges;
  
}

.active .sum.no-rest{
  fill-opacity:0;
  transition: fill-opacity .3s;
}
.dayWrap-children-1.active .sum.no-rest{
  fill-opacity:1;
}

.block-title{
  font-size:16px !important;
  font-weight:normal !important;
}

.g-viewToggles-main{
padding: 7px 15px 7px 12px;
margin: 0 0 0 7px;
/*width: 635px;*/
border-radius: 0 0 3px 3px;
/*background: #f7f7f7;*/
float:left;
position: relative;
/*border-left: 1px solid #dadada;
border-right: 1px solid #dadada;
border-bottom: 1px solid #dadada;*/
text-align: center;
}

.race-event{
  fill:red;
  shape-rendering:crispEdges;
}

.race-event-title{
  font-size:11px;
  color:#900;
  font-weight:bold;
}

#g-volume{
  width:666px;
  height:77px;
  background:#f7f7f7;
}

.g-key-goal-line{
  stroke:#ccc;
  
  shape-rendering:crispEdges;
  stroke-width:5px;
}
.g-key-recorded-line{
  stroke:rgb(168, 213, 224);
  shape-rendering:crispEdges;
   stroke-width:5px;
}

.g-goal-line{
  fill:#ddd;
  
  shape-rendering:crispEdges;
  
}
.g-goal-line-exceeded{
  fill:#6F7188;
  shape-rendering:crispEdges;
  fill-opacity:.5;
}

.y.axis .domain{
  stroke-width:1px;
  stroke:#999;
 shape-rendering:crispEdges; 
  fill:none;
}

.y.axis .tick:first-child{
  display:none;
}

.day-total-depth-0{
  display:none;
}

.day-total-depth-1{
  display:none;
}
.day-total{
  opacity:0;
  font-size:10px;
  pointer-events: none;
}

.active .day-total{
  opacity:1;
  transition: opacity .5s;
}


.g-bubble-chart{
  margin-top:-20px;
}

#typeToggle:focus{
  /*box-shadow: 0 0 5px rgba(0,0,0,.3);
  outline:none;*/
}

.g-race-collection{
  margin:0 0 20px 15px;
  padding:0;
  list-style-type:none;
  font-size:13px;
}

.g-month-head{
  text-transform:uppercase;
  font-size:11px;
  color:#888;
  margin: 0 0 0;
  padding-bottom:2px;
}

.g-month-head a{
  font-weight:bold;
  color:#666;
  text-decoration:none;
  font-family:arial,sans-serif;
}
.g-month-head a:hover{
    text-decoration:underline;
}
.g-race{
  margin: 0 0 5px 0;
  padding: 0 0 5px;
  border-bottom:1px dotted #ddd;
  /*line-height:1.5;*/
}
.g-race:last-child{
  border-bottom:none;  
  margin-bottom: 0;
padding-bottom: 0;

}
.g-race a{
  text-decoration:none;
  font-size:11px;
  color:#007fb6;
  width:170px;
  text-overflow:ellipsis;
  display:inline-block;
}
.g-race a:hover{
  text-decoration:underline;
}

.g-race-history-hed{
  margin: 0 0 10px 15px;
  padding: 15px 0 5px;
  font-size:14px;
  color:#333;
  border-bottom:1px solid #000;
}

#strava-header{
  height:38px;
  background:#fff;
  box-shadow:0 1px 3px -1px rgba(0,0,0,0.05);

}

/* calendar */
.g-cal{
  padding:0;
  margin: 0 15px 15px;
  list-style-type: none; 
  border-collapse: collapse;
  width:180px;

}
.g-cal td{
  cursor:pointer;  
  text-align:center;
  list-style-type: none;
  padding:5px 0;
  font-size:11px;
  transition:background .2s;
  background:#fff;
}

.g-cal tr:hover td,
.g-cal tr.g-current-row td{
  background:#FCFCD1;
}

.g-cal-day-row-3:first-child{
  color:#0f0;
}

.g-row-break{
  clear:left;

}

.g-last-month{
  color:#999;
}

.g-cal-day-today{
  box-shadow : inset 0 0 0 2px orange;
  font-weight:bold;
}

.g-cal-head{
  font-weight:bold;
  margin:0;
  padding:0 0 0;
  text-align:center;
  font-size:14px;
  width:150px;
  line-height:1.8;
}

.g-date-nav{
  width: 180px;
  margin: 0 0 5px 13px;
  padding: 10px 0 5px;
  list-style-type:none;
  /*border-bottom:1px solid #ddd;*/
}
.g-date-nav li{
  float:left;

}
 .g-cal-prev,
 .g-cal-next{
  width:15px;
  text-align:center;
}
 .g-cal-prev a,
 .g-cal-next a{
  font-size:11px;
  color:orange;
  text-decoration:none;
  font-weight:bold;
 }