@import 'constants.less';
@import 'connectors.less';
@import 'bootstrapCustomizations.less';
@import 'flxWidget.less';

::selection         {background: rgb(255,255,158);}
::-moz-selection    {background: rgb(255,255,158);}
img::selection      {background: transparent;}
img::-moz-selection {background: transparent;}

@media (min-width: 980px) {

    .nav-collapse.collapse {
        height: auto !important;
    }
    .container-fluid {
        padding-right: 10px;
        padding-left: 10px;
        width: 99%;
    }
}

// LARGE DESKTOP & UP
// ------------------

@media (min-width: 1200px) {

    .thumbnails {
        margin-left: -30px;
    }
    .thumbnails > li {
        margin-left: 30px;
    }

    .container-fluid {
        padding-right: 10px;
        padding-left: 10px;
        width: 99%;
    }

}

body {
    background-image: url('../../images/bg.gif');
    height: 100%;
    color: #444;
    background-color: #f5f5f5;
}

html {
    height: 100%;
    overflow-x: hidden;
}

#content {
   position: relative;
   min-height: 94%;
}

* html #content {
    height: 100%;
}

#footer {
    position: relative;
    padding-bottom: 1em;
    hr { margin-top:0; }
}

.editor {
    background: grayLight;
}

.diaryTitle {
    width: 100%;
}

.centered {
    margin-left: auto;
    margin-right: auto;
}

.map { height: 200px; background: blue; }
.weather { height: 200px; background: red; }
.breakdown { height: 200px; background: gray; }
.clockimg  {
    width: 100%;
}

.loading {
    display: none;
    padding-top: 4px;
    margin-right: 6px;
    float: right;
}

.addConnectorsMain #loading img { border: 0 !important; display: block; margin: 132px auto 0 !important; width: 32px; height: 32px; }

#modals {
    display: none;
}

#tooltips {
    display: none;
}

#the_map {
    width: 100%;
}

#time-menu {
    display: inline;
    float: right;
}

div#currentTimespanLabel {
    display:inline-block;
    width: 260px;
    text-align: center;
    align: center;
}

div#currentTimespanLabel span {
    text-align: center;
    align: center;
}

.alert p {
  line-height: 0.7;
}

.alert h4 {
  padding-bottom: 7px;
}

.navbar-inner {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}

.statLabel {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.25em;
    margin: 10px;
}

.bigFigure {
    font-size: 2.25em;
    text-align: center;
    line-height: 1;
    margin: 10px;
}

.bigFigure small {
    font-size: 1em;
}

.statsWell {
    border-radius: 5px;
    background-color: #e2e2e2;
    min-height: 8em;
    position: relative;
}

.statsWell-inner {
    margin-top: 2em;
}

.emptyList {
    width: 100%;
    text-align:center;
    color: @black;
}

/* icons */
*[class|='flx-icon'] {
    background-image: url('../images/icons.png');
    height: 20px;
    position: absolute;
    top: 4px;
    right: 4px;
}

.flx-spacer {
    margin-bottom:5.5em;
}

.pagination {
    margin-top: 8px;
}

a.paginationLink {
    cursor: pointer;
}

.timeline-button {
    display: inline;
}

.application.active {
    display: block;
}

.application.dormant { //hacky way of fixing comment display bug
    position:fixed;
    top:0px;
    left: 100%;
    margin-top:-1000px;
    height:500px;
    overflow:hidden;
    //display: none;
}

.tab.active {
    display: block;
}

.tab.dormant {        //hacky way of fixing comment display bug
    position:fixed;
    top:0px;
    left: 100%;
    margin-top:-1000px;
    height:500px;
    overflow:hidden;
    //display: none;
}

.fullwidth {
    width: 100%;
}

.leftAligned {
    width: 960px;
}

/* HACK: should "just work" as per the Twitter Bootstrap framework */
.nav-tabs > li {
    margin-bottom: -2px;
}

#mainCity span.ephemeris {font-size:12px; color:#878787; line-height: 11px; }

*[class|='flx-pict'] {
    background-image: url('../images/icons.png');
    background-size: 100px 20px;
    display: inline-block;
    height: 20px;
}
.flx-pict-temp {
    background-position: -51px -18px;
    width: 11px;
}
.flx-pict-moon {
    background-position: -162px -23px;
    width: 20px;
}
.flx-pict-sun {
    background-position: -79px -23px;
    width: 20px;
}

// PERI'S STYLES tp@studiorvb.com

img { display: block; }
a img { text-decoration: none; }


.nav-tabs { background: @hd-bg-color; }
.nav-tabs > li > a {
  padding-top: 8px;
  padding-bottom: 8px;
  line-height:18px;
  .unselectable;
}
.nav-tabs > li > a:hover { padding-top: 8px; padding-bottom: 7px; line-height:18px;}

.flx-timeMenu { .flx-clearfix; }

.menuTodayButton { margin-right:18px; }

#currentTimespanLabel { width: 260px !important;
    h3 { display: block; float:left; padding: 0 0 0 15px; margin-top: -2px; text-align: center; }
}

.floater { .flx-floatL; margin-right:20px; min-height: 31px; padding:0 0;}
.flx-main-city-infos { padding-top:4px; }

//----------TOOLTIP 


.flx-toolTipBody { width:435px; padding: 5px; background: rgba(255,255,255,0.75); position: relative; }

.strongBorder {border: 1px solid @tTborder;} 
.strongBorder-Right { .strongBorder; border-right-width: 4px; }
.strongBorder-Left { .strongBorder; border-left-width: 4px; }
.strongBorder-Bottom { .strongBorder; border-bottom-width: 4px; }
.strongBorder-Top { .strongBorder; border-top-width: 4px; }

.flx-toolTipLinks { position: absolute; list-style-type: none; width: 25%; margin-left:0; top: 10px; right:8px;
    li{text-align: right; line-height: 1.1em; }
}
.flx-toolTipData { margin: 5px; background:@white; overflow:hidden; padding: 8px 10px 10px 10px; position:relative; min-height:45px;
    -webkit-box-shadow:0 0px 4px rgba(80, 80, 80, 0.6); 
    -moz-box-shadow:0 0px 4px rgba(80, 80, 80, 0.6); 
    -o-box-shadow:0 0px 4px rgba(80, 80, 80, 0.6); 
    box-shadow:0 0px 4px rgba(80, 80, 80, 0.6);
    }
    
//---- once upon a time there was here a few lines about connectors icons

/*
.flx-deviceIcon { background-size:44px 1240px; width: 42px; height: 42px; background-repeat: no-repeat; float:left; margin-right: 10px; background-image: url(../images/devices-ic.png);} 
.flx-deviceIcon.withings { background-position: 0 -1173px; }
.flx-deviceIcon.fitbit { background-position: 0 -1088px; }
.flx-deviceIcon.twitter-tweet { background-position: 0 -128px; }
.flx-deviceIcon.twitter-dm-in { background-position: 0 -421px; }
.flx-deviceIcon.twitter-dm-out { background-position: 0 -464px; }
.flx-deviceIcon.twitter-mention { background-position: 0 -508px; }
.flx-deviceIcon.zeo-sleep { background-position: 0 -4px; }
.flx-deviceIcon.calendar { background-position: 0 -255px; }
.flx-deviceIcon.lastfm { background-position: 0 -86px; }
.flx-deviceIcon.bm-sleep { background-position: 0 -632px; }
.flx-deviceIcon.bm-steps { background-position: 0 -675px; }
.flx-deviceIcon.bm-burn { background-position: 0 -588px; }
.flx-deviceIcon.latitude { background-position: 0 -355px; }
.flx-deviceIcon.picasa { background-position: 0 -924px; }
.flx-deviceIcon.withings-blood_pressure { background-position: 0 -339px; }
.flx-deviceIcon.withings-heart_pulse { background-position: 0 -339px; }
.flx-deviceIcon.bodymedia-burn { background-position: 0 -589px; }
.flx-deviceIcon.bodymedia-sleep { background-position: 0 -633px; }
.flx-deviceIcon.bodymedia-steps { background-position: 0 -673px; }
.flx-deviceIcon.fitbit-activity_summary { background-position: 0 -1088px; }
.flx-deviceIcon.fitbit-logged_activity { background-position: 0 -1131px; }
.flx-deviceIcon.fitbit-sleep { background-position: 0 -1050px; }
.flx-deviceIcon.flickr-photo { background-position: 0 -924px; }
.flx-deviceIcon.instagram-photo { background-position: 0 -924px; }
.flx-deviceIcon.smsbackup-call-log-in { background-position: 0 -840px; }
.flx-deviceIcon.smsbackup-call-log-out { background-position: 0 -799px; }
.flx-deviceIcon.github-push { background-position: 0 -799px; }

*/

//---- they live appart now but are invoqued on top of this file ******


/*
.flx-toolTipData .flx-data { max-width:270px; overflow:hidden; height: 100%;
    .flx-description { font-size: 14px; color:lighten(@black, 20%); }
    .flx-text {  }
}
.flx-toolTipData .flx-tTime { font-size: 16px; margin-bottom: 5px;
        span {color: lighten(@black, 40%); font-size:11px; text-transform: none;}
}
*/
.flx-miniGraph { .flx-floatL; margin-top:-20px; }

.flx-toolTipContext { overflow:hidden; height:100%; margin:10px 5px 0;color: lighten(black, 40%);
    h4 { font-size : 12px; font-weight:normal; min-height:45px;
        span { font-size:18px; font-weight:bold} }
    .flx-toolTipLocation { .flx-floatL; width : 50%; margin-right:5px; color: lighten(black, 40%);} 
    .flx-toolTipWeather { overflow:hidden; height:100%;
        .weatherIcon { margin: 20px auto ; width:100px; height: 110px; }
        .flx-weatherDetails { 
            color: lighten(black, 40%);
            font-size:12px;
            list-style-type:none;
            padding:0 !important;
            margin:0 !important;
            li { width:29.5%; .flx-floatL; border-right: 1px solid lighten(black, 40%); font-weight:normal; padding:0 3px;
                span { font-weight: bold; }
            }
            li:last-child { border-right:0; }
         }
     }
}

.flx-toolTipTail { position:absolute; width:0; height:0; border:10px solid transparent; pointer-events: none; }
.flx-toolTipTail-Bottom { .flx-toolTipTail; border-top: 10px solid @tTborder; bottom: -24px;}
.flx-toolTipTail-Top { .flx-toolTipTail; border-bottom: 10px solid @tTborder; top: -24px; }
.flx-toolTipTail-Right { .flx-toolTipTail; border-left: 10px solid @tTborder; right: -24px; }
.flx-toolTipTail-Left { .flx-toolTipTail; border-right: 10px solid @tTborder; left:-24px;}


//----------------- FILTERS
 
.flx-sourceFilters4 { list-style-type: none; overflow:hidden; height:100%; margin-left:0;
    li { .flx-floatL;border-right: 1px solid @white;
        a, span {  color:@black; border-bottom-width: 1px; border-bottom-style: solid; padding: 10px 0; background: #fff; position:relative; width: 81px; text-align:center; display:inline-block;
            -webkit-transition: all 0.1s ease-in;
            -moz-transition: all 0.1s ease-in;
            -o-transition: all 0.1s ease-in;
            transition: all 0.1s ease-in;
            font-weight: 500;
        }
        a:after, span:after { content:''; width:0; height: 11px; border-right:1px solid lighten(@grey, 40%); position:absolute; top:13px; right:-1px; }

        .flx-active { border-bottom-width: 4px; padding-bottom: 7px; color: @black}
        a.flx-disconnected { border-bottom-color: lighten(@grey, 20%);color: lighten(@grey, 20%); cursor:default; border-bottom-width: 1px; padding-bottom:10px;}
        a:hover {
          text-decoration:none;
          //border-bottom-width: 4px; padding-bottom: 7px;
          background-color: lighten(@grey, 45%);
        }
        //a.flx-disconnected:hover  {
        //  background-color: white;
        //}
      .flx-inactive {
        font-style: italic;
      }
     }
   
   li:last-child a:after, li:last-child a:after { border-right: 0; }  
}

//------- MANAGE CONNECTORS

.manageConnectors .modal-body {
    padding: 0px;
}


.manageConnectors .topHeader{
  height: 52px;
  width: 738px;
  background:white;
  text-align: center;
  font-weight: bold;
}

.manageConnectors .topHeaderHolder{
  overflow:hidden;
}

.manageConnectors .topHeaderHolder.floating{
  position:fixed;
  border-bottom: 1px solid #E0E0E0;
  border-top: 1px solid #E0E0E0;
  margin-top: -48px;
  z-index: 1;
}

.manageConnectors .topHeader div{
  padding-top: 19.5px;
  height:52px;
  vertical-align: top;
  display:inline-block;
}

.manageConnectors .placeholder{
  height: 52px;
}

.manageConnectors .placeholder.hidden{
  display:none;
}

.synchAll { width:100%;background:@hd-bg-color; overflow:hidden; height: 100%;
    span { display:block; padding: 10px;  float:right;}
}
.renew span {
  margin-top: 18px;
}
table {.syncStatus, .remove, .renew, .connectors { text-align: center; }
    th.desc {  }
}
td.syncStatus { vertical-align: middle;
    span { display:block; width: 20px; height: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;border: 1px solid lighten(@grey, 20%); margin: 0 auto; -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.7);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.7); box-shadow: 0 0 5px rgba(0,0,0,0.3), inset 0 1px 2px rgba(255,255,255,0.7); }
    .syncLED-yes {
        background:#76d323;
    }
    .syncLED-no {
        background:#ff3030;
    }
    .syncLED-waiting { border:0; width: 35px; height:35px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none ;}
    .syncStatus-STATUS_UP {
        background:#76d323;
    }
    .syncStatus-STATUS_PERMANENT_FAILURE {
        background:#ff3030;
    }
    .syncStatus-STATUS_TRANSIENT_FAILURE {
        background: #ff9226;
    }
    .syncStatus-STATUS_OVER_RATE_LIMIT {
        background:#ff9226;
        background-image: url(../static/images/clock.png);
        background-size: 16px 16px;
        background-position: 2px 2px;
        background-repeat: no-repeat;
    }
    .syncStatus-NA {
        background: #faff00;
        background-image: url(../static/images/na.png);
        background-size: 20px 20px;
        background-repeat: no-repeat;
    }
}

.syncStatus.small { span { width: 15px; height: 15px; } }
td.connectors { text-align: center; padding:0;
    img { margin:0 auto; }
 }
.lastSync p, .latestData p, .remove i { padding-top: 18px; }
table .remove { text-align:center;
    i { font-size: 20px; }
}
.flx-tableSepar td { height:1px;background:@hd-bg-color; padding:2px 0;} 
.nowSynchro .lastSync { 
    p { font-style: italic; font-weight:bold; }
    a, span { color: @grey;}
}

//--------- TIMELINE MENU 

.load-view-subMenu { min-width:350px;
    li {   
        ul li { padding: 0; }
    }
    .view-id {width:60%; }
    .view-id a>* { white-space:normal; margin:0; padding:0;}
    .view-filters { text-align: right; line-height:1em; list-style:none;
        a { color: @link-green; display:inline;}
        a:hover { color: @link-green; background: @white; text-decoration:underline; }
    } 
}
.save-view-subMenu .dropdown-menu { min-width:316px;
    form, h5 { padding: 3px 15px; margin: 0; }
    a.btn { display: inline-block; margin-top:-8px; }
    a>* { white-space: normal; }
    a.savedView:hover {background-color: @green-background; color:inherit;}
}

//------- CHANNEL

.flx-channel-navigation {
  .btn {
    font-size: 11px;
  }
}

.flx-channel { width:235px; .flx-floater;
    background: @hd-bg-color;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='lighten(@hd-bg-color,10%)', endColorstr='@hd-bg-color');
    background: -webkit-gradient(linear, left top, left bottom, from(lighten(@hd-bg-color,10%)), to(@hd-bg-color));
    background: -moz-linear-gradient(top,  lighten(@hd-bg-color,10%),  @hd-bg-color);
    div { .flx-floatL;  }
    .flx-channel-tab {
      width:235px;
    }
    .flx-remove-channel { padding: 0; font-size: 20px;
        a {color: lighten(@grey,20%)}
        a:hover {color: darken(@grey, 10%); text-decoration: none;} 
    }
    .flx-channel-name { padding: 0; overflow:hidden; text-shadow:1px 1px @white; width:180px; max-width: 180px;
        h4 { font-size: 18px; color:lighten(@black, 30%); overflow: hidden; text-overflow: ellipsis;}
        p { margin:0; padding:0; overflow: hidden; text-overflow: ellipsis;}
    }
    .flx-channel-name-nodeletebutton { padding: 0 0 0 5px; overflow:hidden; text-shadow:1px 1px @white; width:200px; max-width: 200px;
        h4 { font-size: 18px; color:lighten(@black, 30%); overflow: hidden; text-overflow: ellipsis;}
        p { margin:0; padding:0; overflow: hidden; text-overflow: ellipsis;}
    }
    .flx-channel-controls { padding: 0; margin: 0; list-style-type: none;
        li { list-style-type: none; text-align:right; font-size: 20px; line-height: 22px;}
        a { color:lighten(@grey, 20%);
            i { text-shadow:1px 1px @white; } 
        }
        a:hover {color: darken(@grey, 10%); text-decoration: none;} 
    }
    .flx-channel-filter {
      font-size: 8pt;
      font-style: italic;
      color: #aaaaaa;
    }
}

//------- DASHBOARDS

#dashboardsTab .nav-tabs {
    position:absolute; bottom: -10px; right: 10px; left: 10px;
}

#dashboardsTab .nav-tabs li:first-child {
    position: absolute; right:10px; top: 10px;
}

#dashboardsTab .nav li button {
    margin-top:-5px;
}

.tabs-below .nav-tabs {
    background-color: #FFF;
}

//---------MANAGE DASHBOARD

.manage-dashboard { position: absolute; right: 10px; bottom: 30px; width: 432px; form { padding:0; } }
.dashboard-list-header { padding: 10px 3px 10px 16px; overflow:hidden;
        .setName {input { margin-right:-4px; }}
}
.facetDetails {
    overflow:hidden; height:100%;

  .commentWarning{
    padding-top: 10px;
    font-style: italic;
  }
}
.facetDetails.many {
    margin-bottom: 10px;
}

.facet-comment-text {
  margin-top: 10px;
  font-style: italic;
  color: gray;
}

.facet-comment textarea {
  width:90%;
  margin-top:10px;
  background-color: lightyellow;
}

.dashboard-list-item { overflow:hidden; zoom:1; border: 1px solid @border-color; margin-bottom:-1px; border-left: 0; border-right:0; padding: 10px 10px 10px 15px;
    i {font-size: 16px; line-height:1; padding: 0;}
    .reorder { float: left; width: 60px; opacity:0.3; cursor:pointer;
    .up, .down { padding-right: 5px }
    }
    a:hover i { text-decoration:none; }
    .dashboard-list-item-name { float:left; width: 380px; font-size:14px; }
    .remove { float:left; opacity:0.3; cursor:pointer;}
    -webkit-transition: background 0.2s ease-in-out;
    -moz-transition: background 0.2s ease-in-out;
    -o-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;
}
.dashboard-rename {
    width: 150px;
}
.dashboards-list { height: 300px; width: 430px; background:@white; margin:0;}
.dashboard-list-item:hover { background-color: lighten(@link-blue,55%);
    .reorder, .remove { opacity:1; }
}        


.set-dashboards { border-top: 1px solid @border-color; overflow: hidden; padding: 10px 0 10px 16px; 
    .addOrRemove { float:left; margin-right:10px;} 
 }

//---------SET DEVICE CHANNELS

.set-device { width: 100%;
    .set-device-header { padding: 10px 0 10px 5px; }
    .flx-channel-table {  
        td:first-child { width: 50px; 
        } 
        input[type=checkbox]{ margin-top: 0; }
        label { white-space: nowrap; font-size:14px;}
        .description { color: lighten(@black, 45%); line-height: 21px; }
    }
}

.flx-nav-list { font-size: 14px; }


//---------LIST 

.flx-listItem .flx-box { background-color:#fff; overflow: hidden; height: 100%; padding: 15px 15px; border: 1px solid lighten(@black, 70%); border-left-width: 5px; margin-bottom:5px; max-width: 693px; border-radius : 3px;
     .flx-data { clear:left; max-width: 300px; padding-left: 0px;}
     .flx-deviceIcon, .flx-tTime, .flx-tRange { .flx-floatL }
     .flx-tTime { padding: 0 13px 0 0px; min-width:62px; height: 22px; font-size: 15px;
        span {color: lighten(@black, 40%); font-size:11px; text-transform: none;}
     }
     .flx-tRange { color: lighten(@black, 60%); font-size:14px; text-transform: none; padding: 0 13px 0 10px; min-width:62px; height: 42px; 
         span { display: block;
            span { font-size: 15px; color: @black; display: inline;}
            }
     }
     .flx-description { overflow:hidden; height: 100%; color:lighten(@black, 20%); display:block; max-width: 450px; 
     span { font-weight:bold; font-size: 14px; }
     }
     .flx-more { color: lighten(@grey, 10%); }
 }


.flx-toolTipData .flx-box { 
     .flx-data { clear:left; max-width: 250px; padding-left: 10px;}
     .flx-deviceIcon, .flx-tTime, .flx-tRange { .flx-floatL }
     .flx-tTime { padding: 0 13px 0 10px; min-width:62px; height: 26px; font-size: 15px; 
        span {color: lighten(@black, 40%); font-size:11px; text-transform: none;}
     }
     .flx-tRange { color: lighten(@black, 60%); font-size:14px; text-transform: none; padding: 0 13px 0 10px; min-width:62px; height: 42px; 
         span { display: block;
            span { font-size: 15px; color: @black; display: inline;}
            }
     }
     .flx-description { color:lighten(@black, 20%); display:block; max-width: 450px; 
     span { font-weight:bold; font-size: 14px; }
     }
     .flx-more { color: lighten(@grey, 10%); }
 }

/*
.flx-listItem .flx-box.twitter { border-left-color: @twitter; }
.flx-listItem .flx-box.bm { border-left-color: @bodyTrack; }
.flx-listItem .flx-box.picasa { border-left-color: @picasa; }
.flx-listItem .flx-box.fitbit { border-left-color: @fitbit; }
.flx-listItem .flx-box.calendar { border-left-color: @ggleCal; }
.flx-listItem .flx-box.withings { border-left-color: @withings; }
.flx-listItem .flx-box.lastfm { border-left-color: @lastFM; }
.flx-listItem .flx-box.bodymedia { border-left-color: @bodymedia; }
*/

.flx-listItem .gathered { padding-bottom:0; }
.flx-listItem .gathered.closed { height:52px; }

.flx-dataLabel {
    font-size: 12px;
    color: #878787;
    line-height: 11px;
    display: inline;
}
.flx-text {
    font-size: 14px;
    color: @black;
    line-height: 12px;
}

//-------WIDGET TYPOGRAPHY

.flx-widget { color: lighten(@black, 20%);
    .main-widget-data { position: relative; height: 223px; }    
    .big-data-figure { position: absolute; top: 50px; left: 0; color: lighten(@black, 40%); font-size: 4em; width: 100%; font-weight: bold; font-family: inherit; text-align: center; overflow: hidden; line-height: 1; padding-bottom: 0.5em;
        span { font-size: 0.5em; font-weight: normal; }
    }
    .flx-dashBMisc div { font-size: 16px; color: @link-blue; width: 33%; text-align: center;
        span { font-size: 0.8em; color: darken(@hd-bg-color, 40%);}
     }
    .flx-widgetMessage { padding: 10px 10px 0; border-style: solid; border-width: 1px; margin: 0 0 5px; .border-radius; }
    .flx-widgetError { border-color: @errorText; color: @errorText; background-color: @errorBackground; }
    .flx-widgetWarning { border-color: @warningText; color: @warningText; background-color: @warningBackground; }
    .flx-widgetSuccess { border-color: @successText; color: @successText; background-color: @successBackground; }
}


//----------FOOTER

footer { color: gray; }
.flx-credits { float: left; margin-right: 30px; margin-top:-10px; div {margin-top: 3px;}}
.feedback-call { height: 100%; float: right; margin-right:25px; }
.anne, .bubbles, .candide { .flx-floatL; }
.anne, .candide { background: url(../images/spriteAandC.png) no-repeat 0 0; width: 40px; height: 40px; background-size: 100%; }
.candide { background-position: 0px -40px; }
.bubbles { padding: 0 12px 0 15px; margin-top: -14px;
    .bubble1, .bubble2 { position: relative; 
         p { .border-radius; background-color: @fitbit; color: @white; padding: 5px 10px; margin: 0 0 5px; font-weight: 400;
             a { color: navy; }
         }
        .tail { position: absolute; top: 5px; width: 0; height: 0; border-width: 10px; border-style: solid; border-color: transparent; }
     } 
    .bubble1 p { width: 133px; }
    .bubble2 p { margin-left: 20px; }
    .bubble1 .tail { border-right-color: @fitbit; left:-17px; border-bottom-width: 0;}
    .bubble2 .tail { border-left-color:  @fitbit; right: -17px; border-top-width: 0; } 
}





//----------------- DISCARDED SNIPPETS

// css styles below are there for archive backup only



.flx-sourceFilters1 { list-style-type: none; overflow:hidden; height:100%;
    li { .flx-floatL;border-right: 1px solid transparent; padding-bottom: 20px;
        a, span {  color:darken(@grey,20%); border-bottom: 1px solid @grey; padding: 10px 10px; background: #fff;
            -webkit-transition: all 0.1s ease-in;
            -moz-transition: all 0.1s ease-in;
            -o-transition: all 0.1s ease-in;
            transition: all 0.1s ease-in;
        }
        .flx-active { border-bottom-width: 4px; padding-bottom: 7px; color: darken(grey, 20%);}
        .flx-disconnected { border-bottom-color: lighten(@grey, 30%);color: lighten(@grey, 30%); cursor:default }
        a:hover { text-decoration:none; border-bottom-width: 4px; padding-bottom: 7px; }
     }
     
     a.fitbit { border-bottom-color: @fitbit; }
     a.bodytrack { border-bottom-color: @bodyTrack; }
     a.lastFM { border-bottom-color: @lastFM; }
     a.withings { border-bottom-color: @withings; }
     a.picasa { border-bottom-color: @picasa; }
     a.twitter { border-bottom-color: @twitter; }
     a.ggleCal { border-bottom-color: @ggleCal; }
 }

.flx-sourceFilters2 { list-style-type: none; overflow:hidden; height:100%;
    li { .flx-floatL;border-right: 1px solid transparent; font-size: 11px; letter-spacing: 0.1em;padding-bottom: 20px;
        a, span {  color:@grey; border-bottom: 1px solid @grey; padding: 10px 10px; background: #fff; position:relative;
            -webkit-transition: all 0.1s ease-in;
            -moz-transition: all 0.1s ease-in;
            -o-transition: all 0.1s ease-in;
            transition: all 0.1s ease-in;
        }
        a:after, span:after { content:''; width:0; height: 11px; border-right:1px solid lighten(@grey, 40%); position:absolute; top:10px; right:-1px; }
        a.ggleCal:after { border-right:0; }
        
        .flx-active { border-bottom-width: 4px; padding-bottom: 7px; color: darken(grey, 20%);}
        .flx-disconnected { border-bottom-color: lighten(@grey, 30%);color: lighten(@grey, 30%); cursor:default }
        a:hover { text-decoration:none; border-bottom-width: 4px; padding-bottom: 7px; }
     }
     
     a.fitbit { color: @fitbit; border-bottom-color: @fitbit; }
     a.bodytrack { color: @bodyTrack; border-bottom-color: @bodyTrack; }
     a.lastFM { color: @lastFM; border-bottom-color: @lastFM; }
     a.withings { color: @withings; border-bottom-color: @withings; }
     a.picasa { color: @picasa; border-bottom-color: @picasa; }
     a.twitter { color: @twitter; border-bottom-color: @twitter; }
     a.ggleCal { color: @ggleCal; border-bottom-color: @ggleCal; }
 }
 
.flx-sourceFilters3 { list-style-type: none; overflow:hidden; height:100%;
    li { .flx-floatL;border-right: 1px solid transparent; letter-spacing:0.1em;padding-bottom: 20px;
        a, span {  color:@grey; border-bottom: 1px solid @grey; padding: 15px 15px; background: #fff; overflow:hidden; text-align:center;width: 65px; display:block;
            -webkit-transition: all 0.1s ease-in;
            -moz-transition: all 0.1s ease-in;
            -o-transition: all 0.1s ease-in;
            transition: all 0.1s ease-in;
        }
        .glow(@glow){ text-shadow: 0 0 5px @glow; }
        .flx-active { border-bottom-width: 4px; padding-bottom: 12px; color: darken(grey, 20%); .glow(lighten(@connector,25%));}
        .flx-disconnected { border-bottom-color: lighten(@grey, 30%);color: lighten(@grey, 30%); cursor:default }
        a:hover { text-decoration:none; border-bottom-width: 4px; padding-bottom: 12px; }
     }
     
     a.fitbit { color: @connector; border-bottom-color: @connector; }
     a.bodytrack { color: darken(@connector, 5%); border-bottom-color: darken(@connector, 5%); }
     a.lastFM { color: darken(@connector, 10%); border-bottom-color: darken(@connector, 10%); }
     a.withings { color: darken(@connector, 15%); border-bottom-color: darken(@connector, 15%); }
     a.picasa { color: darken(@connector, 20%); border-bottom-color: darken(@connector, 20%); }
     a.twitter { color: lighten(@connector, 5%); border-bottom-color: lighten(@connector, 5%); }
     a.ggleCal { color: lighten(@connector, 15%); border-bottom-color: lighten(@connector, 15%); }
 }
 
.flx-sourceFilters5 { list-style-type: none; overflow:hidden; height:100%;
    li { .flx-floatL;border-right: 1px solid transparent; padding-bottom: 20px;
            a, span {  color:@grey; border-bottom: 1px solid @grey; padding: 10px 10px; background: #fff; position:relative;
            -webkit-transition: all 0.1s ease-in;
            -moz-transition: all 0.1s ease-in;
            -o-transition: all 0.1s ease-in;
            transition: all 0.1s ease-in;
        }
        a:after, span:after { content:''; width:0; height: 11px; border-right:1px solid lighten(@grey, 40%); position:absolute; top:10px; right:-1px; }
        a.ggleCal:after { border-right:0; }
        
        .flx-active { border-bottom-width: 4px; padding-bottom: 7px; color: darken(grey, 20%);}
        .flx-disconnected { border-bottom-color: lighten(@grey, 30%);color: lighten(@grey, 30%); cursor:default }
        a:hover { text-decoration:none; border-bottom-width: 4px; padding-bottom: 7px; }
     }
     
     a.fitbit { color: @fitbit; border-bottom-color: @fitbit; }
     a.bodytrack { color: @bodyTrack; border-bottom-color: @bodyTrack; }
     a.lastFM { color: @lastFM; border-bottom-color: @lastFM; }
     a.withings { color: @withings; border-bottom-color: @withings; }
     a.picasa { color: @picasa; border-bottom-color: @picasa; }
     a.twitter { color: @twitter; border-bottom-color: @twitter; }
     a.ggleCal { color: @ggleCal; border-bottom-color: @ggleCal; }
 }

#filterPlaceHolderElement, #filtersContainer {
  min-height: 18px;
  margin-top: -17px;
}

#filtersContainer.floating{
  margin:0;
  position:fixed;
  top:0;
  z-index: 5;
  left:0;
  right:0;
  ul{
    padding-left:10px;
    background:white;
  }
}

#filterPlaceHolderElement.hidden{
  display:none;
}

.flx-sourceFilters6 { list-style-type: none; 
    li { .flx-floatL;border-right: 1px solid transparent; font-size:11px; letter-spacing:0.1em;
        a, span {  color:@grey; border-bottom: 1px solid @grey; padding: 10px 0; background: #fff; position:relative; width: 70px; text-align:center; display:inline-block;
            -webkit-transition: all 0.1s ease-in;
            -moz-transition: all 0.1s ease-in;
            -o-transition: all 0.1s ease-in;
            transition: all 0.1s ease-in;
        }
        a:after, span:after { content:''; width:0; height: 11px; border-right:1px solid lighten(@grey, 40%); position:absolute; top:13px; right:-1px; }
        
        .flx-active { border-bottom-width: 4px; padding-bottom: 7px; color: @grey;}
        .flx-disconnected { border-bottom-color: lighten(@grey, 30%);color: lighten(@grey, 30%); cursor:default }
        a:hover { text-decoration:none; 
        //border-bottom-width: 4px; padding-bottom: 7px; 
        background-color: lighten(@grey, 45%); }
     }
   li:last-child a:after, li:last-child a:after { border-right: 0; }  
}

// candide

#selectedConnectors {
  background-color: #fff;
}

#sharedConnectors {
  min-height: 200px;
}

.loading-animation {
  border:none;
  width:20px;
  height:20px;
  margin: 0 0px 6px 6px;
  display: inline;
}

#removeCoachButton {
  float: left;
  margin-left: 10px;
}

#coachesDropdown {
  float: left;
}

a.disabled {
  pointer-events: none;
  cursor: default;
  color: @grey;
}

a.enabled {
  pointer-events: auto;
  cursor: hand;
  color: @link-blue;
}

.guessed {
  font-style: italic;
}

.dateHeading{
  padding-top: 10px;
  font-size: 16px;
}

.priorRuler{
  margin-bottom: 0;
}

.dateHeading a{
  display:block;
}

.dateHeading hr{
  margin-bottom: 0;
  margin-top: 10px;
}

.dateHeading.floating{
  position: fixed;
  top: 41px;
  background: white;
  z-index: 2;
  right: 0;
  left: 0;
  padding-left: 10px;
}

.bullet {
  width:15px;
  height:15px;
  border: 1px solid;
  float: left;
  margin-right: 3px;
}

#photoViewContainer{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:black;
  width:auto;
  height:auto;
  border:none;
  margin-left:0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-background-clip: content-box;
  -moz-background-clip: content-box;
  background-clip: content-box;
  outline: none;

  #closePhotoViewer{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 100px;
    line-height: 75px;
    z-index: 100;
    margin-top:15px;
    margin-right:15px;
    text-decoration: none;
    color: white;
    opacity: 0.7;
  }

  #closePhotoViewer:hover{
    opacity: 0.85;

  }

  .photoHolder{
    position:fixed; top:-100000px; left:-100000px; opacity:0;

    .photo{
      opacity:0; position:fixed;  top:-100000px; left:-100000px;
    }
  }

  #photosCarousel, .carousel-inner{
    height:100%;

    .item{
      text-align:center;
      height:100%;
    }

    img{
      cursor: pointer;
    }
  }


}

body.photoCarouselViewing{
  overflow:hidden;
}

.allDayEvent {
  background-color:#009900;
  color:#ffffff;
  margin-bottom: 3px;
  float: left;
  padding: 2px;
}

.expandcollapse {
  margin-left: 3px;
  margin-right: 3px;
  cursor: hand;
}

.expandcollapse.icon {
  cursor: hand;
}

.flx-collapsed {
  display: none;
  height: 0px;
}

.settings-tab {
  padding: 10px;
}

.settings-tab h3 {
  margin-bottom: 20px;
}

i.mainmenu-icon {
  margin-top: 6px;
}

.noDataOverlay{
  position: absolute;
  left: 0px;
  right: 0px;
  text-align: center;
  top: 50%;
  font-size: 100px;
  z-index: 50;
  line-height: 0px;
  opacity: 0.6;
  pointer-events:none;
}

.fbShare {
  width: 29px;
  cursor: pointer;
  float: right;
  margin-right: 15px;
}

.fbShare img {
  display: inline;
}

.flx-description {
  display: block;
}

.timeago {
  margin-left: 1em;
}

@media(min-width:768px){
  .modal.manageConnectors, .settingsDialog {
    width:750px;
    margin-left:-375px;
  }
}
@media(min-width:668px){
  #viewUpdatesModal, .addConnectorsDialog{
    width: 650px;
    margin-left:-325px;
  }

}
@media(min-width:978px){
  .settingsDialog{
    width:960px;
    margin-left:-480px;
  }
}

#photoModal{
  height:700px;
  margin-top:-350px;
  width:370px;
  margin-left:-185px;
  .modal-body{
    max-height:650px;
  }
}
#photoModal.fade.in{
  top:50%;
}

.manageConnectors .modal-body .content{
  min-width: 735px;
}

iframe {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-repeat: initial;
}

body .modal-reading {
  /* new custom width */
  width: 750px;
  /* must be half of the width, minus scrollbar on the left (30px) */
  margin-left: -375px;
  top:10%; bottom:10%;
  .modal-body {
    max-height:100%;
    height:83%; // note: when the window gets smaller, a gap between modal-body and modal-footer appears and this
                // value must be adjusted downwards (e.g. 77%). OTOH if we choose a smaller value, a white space
                // will appear beneath the modal-footer. 83% is a compromise and will display perfectly for
                // reasonably sized windows (min. 612px in height)
    overflow-y:
    hidden;
  }

  .modal-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }

}

.no_select{
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.evernote-note iframe {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-repeat: initial;
}

.ennote{
  font-family: Helvetica, Arial, "Droid Sans", sans-serif;
  font-size: 14px;
  margin: 1.428571em;
}

.evernoteTag {
  margin: 2px;
  padding: 3px;
  background-color: lightblue;
  color: @black;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;

}

.evernoteNotebook {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  color: white;
  border-radius: 3px;
  margin: 2px;
  padding: 3px;
}

.flx-clockToolTipContainer {
  z-index: 4;
}

.sharedConnectorSettingsBtn {
  padding: 0;
}

.form-inline.sharedConnectors {
  margin: 0 0 4px;
}

a.disabled-link,
a.disabled-link:visited ,
a.disabled-link:active,
a.disabled-link:hover {
  color:#aaa !important;
}

#IntercomDefaultWidget {
  right: 5px !important;
  bottom: 5px !important
}

.tu-link {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px !important;
  font-weight: 200 !important;
  text-shadow: none !important;
};

.tu-app-link {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px !important;
  font-weight: 200 !important;
  text-shadow: none !important;
};

.brand {
  padding: 10px 0px 10px 20px !important;
}

.navbar .nav>li>a {
  text-shadow: none;
}

.ui-dialog .ui-dialog-titlebar {
  line-height: 1.5em !important;
}

.ui-widget-content .btn {
  padding: 2px 10px 1px;
  min-width: 28px;
  min-height: 30px;
  font-size: 12px;
  line-height: 26px;
  letter-spacing: 1px
}
.ui-widget-content .btn-default {
  background-image: none;
  background-color: transparent;
  border-color: #aaa;
  color: #999;
  &:hover { background-color: #eee; }
}
.ui-widget-content .btn-primary {
  background-image: none; 
  background-color: #39C; 
  border-color: #3291B7;
  &:hover { background-color: darken(#39C, 5%); }
}

.ui-widget-content {
  textarea:focus { 
    -webkit-box-shadow: none !important; 
    box-shadow: none !important; 
    background: #fff !important; 
  }
}

.wallPost > div:last-child { padding: 10px; }

.wallPost {
  margin: 10px 0;
  border: 1px solid #DDD;
  .wallPostHeader {
    padding: 10px 10px;
    border-bottom: 1px solid #DDD;
     
    .wallPostAuthor {
      font-size: 16px;
      font-weight: bold;
    }
    .wallPostWhen {
      font-size: 14px;
      color: #777;
    }
    .wallPostActions {
      float: right;
      margin-top: 2px;
      > a {
        cursor: hand;
        color: #3291B7;
        text-decoration: none;
        &:hover { text-decoration: none; color: darken(#3291B7, 15%); }
      }
      i { font-size: 14px !important; }
    }
  }
  .wallPostBody {
    font-size: 14px;
    line-height: 20px;
    color: #404257; 
    padding: 10px 10px;
  }
  .wallPostComment {
    padding: 15px;
    margin: 0 10px 3px;
    background: #E6F0F4;
    line-height: 20px;
    font-size: 14px;
    .wallPostCommentHeader {
      .wallPostCommentAuthor {
        font-weight: bold;
      }
      .wallPostCommentWhen {
        color: #777;
      }
      .wallPostCommentActions {
        float: right;
        > a {
          cursor: hand;
          color: #3291B7;
          text-decoration: none;
          &:hover { text-decoration: none; color: darken(#3291B7, 15%); }
        }
      }
    }
    .wallPostCommentBody {

    }
  }
}

.timePeriod.allDay {
    margin-top: 0.5em;
    margin-bottom: 1em;
}

.timePeriod.events {
  margin-top: 2em;
}

.widgetSandboxIframe {
  width: 100%;
  height: calc(300px - 18px - 8px);
  padding: 0px !important;
}
.sharedChannels {
    margin: 0 0 0 20px;
}

.popover {
    z-index: 9999;
    position: fixed;
}

.loading-animation.refresh {
    margin: 0 0 -2px 0;
}

.remove-connector-warning {
    display:inline;
    float:left;
    padding:4px;
    margin:0;
}

.backtomydata {
    display: none;
}

.buddiesmenu-icon {
    line-height: 1.5;
}