/* Background colors */
@bck-green: #BCD24B;
@bck-blue: #36A3D4;
@bck-orange: #EF852A;
@bck-gray: #DFDFDF;
@bck-light-gray: #FAFAFA;

/* Typo colors */
@color-darkest-gray: #272B31;
@color-darker-gray: #383C3C;
@color-gray: #444747;
@color-lighter-gray: #676A6E;
@color-orange: #ef852a;
@color-blue: #3BB5EB;
@color-brown: #612F04;
@color-red: #b94a48;

/* Complementary colors */
@color-black: #000;
@color-white: #fff;

/* Font */
@primary-family: 'Lato', sans-serif;
@secondary-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

@normal: 400;
@bold: 700;
@bolder: 900;

/* Mixins */
.rounded-corners (@radius: 2px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

.border-radiuses (@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
    -webkit-border-top-right-radius:    @topright;
    -webkit-border-bottom-right-radius: @bottomright;
    -webkit-border-bottom-left-radius:  @bottomleft;
    -webkit-border-top-left-radius:     @topleft;

    -moz-border-radius-topright:        @topright;
    -moz-border-radius-bottomright:     @bottomright;
    -moz-border-radius-bottomleft:      @bottomleft;
    -moz-border-radius-topleft:         @topleft;

    border-top-right-radius:            @topright;
    border-bottom-right-radius:         @bottomright;
    border-bottom-left-radius:          @bottomleft;
    border-top-left-radius:             @topleft;

    -moz-background-clip:    padding;
    -webkit-background-clip: padding-box;
    background-clip:         padding-box;
}

.borders(@color: #dfdfdf) {
    border: 1px solid @color;
}

.gradient (@startColor: #eee, @endColor: white) {
    background-color: @startColor;
    background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
    background: -webkit-linear-gradient(top, @startColor, @endColor);
    background: -moz-linear-gradient(top, @startColor, @endColor);
    background: -ms-linear-gradient(top, @startColor, @endColor);
    background: -o-linear-gradient(top, @startColor, @endColor);
}

.box-shadow (@string) {
    -webkit-box-shadow: @string;
    -moz-box-shadow:    @string;
    box-shadow:         @string;
}

/* Default styleguide
-------------------------------------------------------------- */
/** Basic **/
body {
    color: @color-lighter-gray;
    font-family: @primary-family;
    font-size: 14px;
}

p {
    color: @color-lighter-gray;
    font-size: 14px;
    margin-bottom: 10px;
}

a ,
a:hover {
    color: @color-blue;
    text-decoration: underline;
}

blockquote {
    border-left: none;
    color: #52555a;
    font-family: 'Times New Roman';
    line-height: 25px;
    padding: 0;
}

#testimonialsCarousel blockquote p {
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
}

#testimonialsCarousel blockquote small {
    margin-top: 15px;
}

blockquote p {
    font-size: 14px;
    font-family: 'Lato', sans-serif;
}

cite {
    color: @color-orange;
    font-size: 14px;
    font-style: italic;
    font-weight: bold;
}

hr,
.divider {
    border-bottom: 1px solid @bck-gray;
    border-top: none;
    margin: 20px 0;
}

.form-horizontal .control-label,
label {
    color: @color-gray;
    padding-top: 3px;

}

label {
    font-size: 13px;
}

footer {
    background: @bck-gray;
    border-top: 1px solid #cccdcd;
    padding: 15px 0 0;
    p, a {
        color: @color-black;
        font-size: 10px;
        text-decoration: none;
        padding: 0 3px;
    }
    @media(max-width: 768px) {
      margin: 0 -20px;
      padding-left: 20px;
      padding-right: 20px;
      .pull-left, .pull-right {
        float: initial;
        text-align: center;
      }
    }

}

.left-align {
    float: left;
    margin-right: 25px;
}

.right-align {
    float: right;
    margin-left: 25px;
}
/* Headers
-------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    color: @color-darker-gray;
    font-family: @primary-family;
    font-weight: @normal;
}

h1 {
    font-size: 32px;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 22px;
}

h4, legend {
    font-size: 18px;
    font-weight: @bold;
}

h5 {
    font-size: 14px;
    font-weight: @bold;
    text-transform: uppercase;
}

h6 {
    color: @color-lighter-gray;
    font-size: 12px;
    margin: 0;
}

fieldset {
    margin-bottom: 40px;
}

legend {
    line-height: 20px;
    margin-bottom: 0;
    border: none;
}

form {
    margin-bottom: 0;
}

.form {
    margin: 10px 0;
}

/* Buttons default
-------------------------------------------------------------- */
.btn {
    .rounded-corners(3px);
    box-shadow: none;
    color: @color-white;
    font-weight: @bold;
    padding: 5px 17px;
    text-decoration: none;
    text-shadow: none;
    &:hover, &:focus {
        color: @color-white;
    }
    @media (max-width: 480px) {
        padding: 5px 0;
    }
}

.btn-group {
    margin-bottom: 30px;
    @media (max-width: 480px) {
        white-space: normal;
    }
}

.btn-group .btn {
    @media (max-width: 480px) {
        margin-top: 10px;
    }   
}

.btn-small {
    padding: 7px 8px;
}

.btn-large {
    padding: 12px 17px;
}

.btn-reset {
    background: none;
    border: none;
    color: @color-orange;
    padding: 8px 20px;
    &:hover, &:active {
        text-decoration: underline;
    }
}

/* Buttons styling
-------------------------------------------------------------- */
@media (max-width: 768px) {
    .btn-navbar {
        width: auto;
    }
}
@media (max-width: 320px) {
    .btn-group, .btn {
        width: 90%;
        margin-left: 5%;
    }
    .btn-navbar {
        width: inherit;
    }
}

/* Primary */
.btn-primary {
    background: @bck-blue;
    color: @color-white;
    .borders(#36a3d4);
    &:active,
    &:focus {
        background: #3aafe4;
    }
    &:hover {
        background: #3194c1;
    }
}

/* Secondary */
.btn-secondary {
    color: @bck-blue;
    .borders(#e6e6e6);
    .gradient(#fbfbfb, #f5f5f5);
    &:active {
        .gradient(#ffffff, #f9f9f9);
        color: @bck-blue;
    }
    &:hover {
        .gradient(#f6f6f6, #f1f1f1);
        color: @bck-blue;
    }
}

/* Green */
.btn-green {
    background: #aec925;
    .borders(#a0b921);
    &:active {
        background: #b7d327;
    }
    &:hover {
        background: #a0b921;
    }
}

/* Gradient Green */
.btn-gradient-green {
    .gradient(#aec925, #9db521);
    &:active {
        .gradient(#bad627, #a8c123);
    }
    &:hover {
        .gradient(#a0b921, #90a61e);
    }
}

/* Orange */
.btn-orange {
    .borders(#d56506);
    .gradient(#e97410, #d2690e);
    &:active {
        .gradient(#f77a10, #df6e0e);
    }
    &:hover {
        .gradient(#dc6e10, #c6630e);
    }
}

.btn-twitter,
.btn-facebook {
    padding: 4px 5px;
    text-align: left;
     [class^="icon-fit-"], [class*=" icon-fit-"] {
        width: 31px;
        height: 31px;
        padding-right: 0;
        border-right: 1px solid rgba(0, 0, 0, 0.13);
        margin-right: 10px;
        vertical-align: middle;
     }
}

/* Button Facebook */
.btn-facebook {
    background: #3b579d;
    .icon-fit-facebook {
        background-position: -320px 0;
    }
    &:hover {
        background: #3b579d;
        opacity: 0.9;
    }
}

/* Button Twitter */
.btn-twitter {
    background: #00aced;
    .icon-fit-twitter {
        background-position: -352px 0;
    }
    &:hover {
        background: #00aced;
        opacity: 0.9;
    }
}

/* Button Payment */
.btn-payment {
    background-color: white;
    width: 100px;
    height: 50px;
    padding: 0px;
    background-repeat: no-repeat;
    background-position: center;
    margin: 10px 5px;
}

.btn-payment:hover,
.btn-payment:focus {
    background-repeat: no-repeat;
    background-position: center;
}

.btn-payment.selected {
    background-color: #e6e6e6;
    border: 2px solid @bck-blue;
}

.btn-visa {
    background-image: url("../img/visa-logo.png");
}

.btn-mastercard {
    background-image: url("../img/mastercard-logo.png")
}


/* Input
-------------------------------------------------------------- */
.input-mini {
    width: 45px;
}
 
.input-mini-plus {
    width: 55px; /*need something for weight */
}


.input-small {
    /*width: 105px;*/
}

.input-large {
    width: 206px;
}

.input-xlarge {
    width: 263px;
}

.input-xxlarge {
    width: 484px;
    max-width: 100%;
}
input[type=number].number{
    width: 55px;
}
input[type=number].number-small{
    width: 40px;
}

/* Icons
-------------------------------------------------------------- */
 [class^="icon-fit-"], [class*=" icon-fit-"] {
    background-image: url("../img/fitwatch-sprite.png");
    height: 17px;
    width: 18px;
}

.icon-fit-user-female {
    background-position: 0 -64px;
    &:hover {
        background-position: 0 -96px;
    }
    &.icon-orange:hover {
        background-position: 0 -128px;
    }
}

.icon-fit-user-male {
    background-position: -32px -64px;
    &:hover {
        background-position: -32px -96px;
    }
    &.icon-orange:hover {
        background-position: -32px -128px;
    }
}

.icon-fit-photography {
    background-position: -64px -64px;
    &:hover {
        background-position: -64px -96px;
    }
    &.icon-orange:hover {
        background-position: -64px -128px;
    }
}

.icon-fit-settings {
    background-position: -96px -64px;
    &:hover {
        background-position: -96px -96px;
    }
    &.icon-orange:hover {
        background-position: -96px -128px;
    }
}

.icon-fit-information {
    background-position: -128px -64px;
    margin-left: 10px;
    &:hover {
        background-position: -128px -96px;
    }
    &.icon-orange:hover {
        background-position: -128px -128px;
    }
}

.icon-fit-picture {
    background-position: -160px -64px;
    &:hover {
        background-position: -160px -96px;
    }
    &.icon-orange:hover {
        background-position: -160px -128px;
    }
}

.icon-fit-quote-bubble {
    background-position: -192px -64px;
    &:hover {
        background-position: -192px -96px;
    }
    &.icon-orange:hover {
        background-position: -192px -128px;
    }
}

.icon-fit-plus-sign {
    background-position: -224px -64px;
    &:hover {
        background-position: -224px -96px;
    }
    &.icon-orange:hover {
        background-position: -224px -128px;
    }
}

.icon-fit-check-sign {
    background-position: -256px -64px;
    &:hover {
        background-position: -256px -96px;
    }
    &.icon-orange:hover {
        background-position: -256px -128px;
    }
}

.icon-fit-zoom {
    background-position: -288px -64px;
    &:hover {
        background-position: -288px -96px;
    }
    &.icon-orange:hover {
        background-position: -288px -128px;
    }
}

.icon-fit-trash {
    background-position: -320px -64px;
    &:hover {
        background-position: -320px -96px;
    }
    &.icon-orange:hover {
        background-position: -320px -128px;
    }
}

.icon-fit-x {
    background-position: -352px -64px;
    margin-top: 5px;
    margin-left: 10px;
    &:hover {
        background-position: -352px -96px;
    }
    &.icon-orange:hover {
        background-position: -352px -128px;
    }
}

.icon-fit-left  {
    width: 8px;
    background-position: -256px 0;
    &:hover {
        background-position: -256px -32px;
    }
}

.icon-fit-right  {
    width: 8px;
    background-position: -288px 0;
    &:hover {
        background-position: -288px -32px;
    }
}

.alert {
    margin-top: 20px;
    p {
        margin-bottom: 0;
    }
}

.alert-info {
    p {
        color: #3a87ad;
    }
}

.alert-error {
    p {
        color: @color-red;
    }
}

.help-block {
    font-size: 12px;
}
.alert-saved{
/*color: @color-blue;
background-color: @bck-green;
font-weight: bold;*/
padding: 2px;
color: #468847;
background-color: #dff0d8;
border-color: #d6e9c6;
}

/* Switch Toggle
-------------------------------------------------------------- */

.toggle{
    background-color: #444747;
    border: 1px solid #999;
    border-radius: 20px;
    color: $white;
    cursor: pointer;
    display: inline-block;
    font-size: 0;
    height: 10px;
    margin: 0;
    padding: 0;
    position: relative;
    width: 26px;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    &:after,
    &:before{
        color: @color-gray;
        content : "Imperial";
        display: block;
        font-size: 12px;
        line-height: 1.5;
        height: 100%;
        left: -55px;
        padding: 0;
        position: absolute;
        text-align: center;
        top: -4px;
        width: 51%;
    }

    &:before{
        content : "Metric";
        left: auto;
        right: -25px;
        width: 50%;
    }

    .knob{
        border: 1px solid @color-lighter-gray;
        .gradient(#f3f3f3, #d4d4d4);
        .box-shadow (2px 2px 2px rgba(103, 106, 110, 0.58));
        border-bottom: none;
        border-top: none;
        border-radius: 50%;
        display: block;
        font-size: 14px;
        height: 13px;
        left: -1px;
        position: relative;
        top: -2px;
        width: 12px;
        z-index: 2;

        -webkit-transition: all 0.15s ease;
        -moz-transition: all 0.15s ease;
        -ms-transition: all 0.15s ease;
        transition: all 0.15s ease;

        &:before{
            border-left-color: transparent;
            border-right-color: inherit;
            margin-left: -10px;
        }
    }

    input{
        position: absolute;
        visibility: hidden;
    }

    input:checked + .knob{
        left: 50%;
    }
}

.uom-wrapper {
    text-align: right;
    margin-bottom: 15px;
    margin-right: 50px;
    @media (max-width: 980px) {
        margin-left: 55px;
        text-align: left;
        width: 100%;
        float: none;
    }
}
.toggle-register {
    margin-top: 10px;
}


.link-list {
    color: @color-blue;
    font-size: 10px;
    list-style-type: square;
    margin-left: 15px;
    li {
        line-height: 25px;
    }
    a {
        font-size: 14px;
        text-decoration: none;
        vertical-align: middle;
    }
}

.title-link {
    font-weight: @normal;
    a {
        text-decoration: none;
        &:before, &::before {
            content: '»';
            font-size: 15px;
            padding-right: 10px;
            vertical-align: text-top;
        }
    }
}

/* Navbars
-------------------------------------------------------------- */
/** General **/
.nav li a {
    text-decoration: none;
}

.navbar {
    margin-top: 0;
    margin-bottom: 0;
    .btn-navbar {
      margin-bottom: 5px;
    }
    .brand {
		background: url("../img/fitwatch-logo.png") 0 0;
        background-size: cover;
		height: 64px;
        padding: 0;
        margin-left: 0;
        text-indent: -9999px;
        width: 291px;
    }
    @media (max-width: 320px) {
        .brand {

            width: 273px;
            height: 60px;

        }
    }
}

/** Primary **/
.nav-wrapper-primary {
    background: @bck-light-gray;
    border-bottom: 1px solid @bck-gray;
    @media (max-width: 768px) {
      margin: 0 -20px;
      padding: 0 20px;
    }
}

.navbar-primary {
    padding: 30px 0;
    .nav {
        margin-top: 18px;
        > li,
        > li.active {
            > a  {
                .borders(transparent);
                color: @color-darkest-gray;
                font-size: 16px;
                text-shadow: none;
                padding: 8px 19px;
                &:hover  {
                    background: #fdfdfd;
                    .borders(@bck-gray);
                    .rounded-corners(3px);
                    color: @color-darkest-gray;
                }
            }
        }
        > li.current,
        > li.has_current,
        > li.active.open {
            > a,
            > a:hover {
                .box-shadow(none);
                background: #fdfdfd;
                .borders(@bck-gray);
                .rounded-corners(3px);
                color: @color-darkest-gray;
            }
        }
    }
}

.dropdown-menu {
    background: #fdfdfd;
    .borders(@bck-gray);
    .border-radiuses(0, 6px, 6px, 0);
    .box-shadow(none);
    border-top-width: 0;
    margin-top: 16px;
    > li {
        > a {
            font-size: 13px;
            color: @color-darkest-gray;
            text-decoration: none;
            &:hover {
                background: #f1f1f1;
                filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
                color: @color-darkest-gray;
            }
        }
    }
    >.active {
        >a,
        > a:hover,
         a:focus {
            background: #f1f1f1;
            color: @color-darkest-gray;
        }
    }
}

/** Secondary **/
.nav-wrapper-secondary {
    background: @bck-green;
    @media (max-width: 768px) {
      margin: 0 -20px;
      padding: 0 20px;
    }
}

.navbar-secondary {
    padding: 3px 0;
    .nav {
        > li {
            > a  {
                color: @color-darker-gray;
                font-size: 13px;
                text-shadow: none;
                padding: 8px 20px 8px;
                &:hover {
                    text-decoration: underline;
                }
            }
            > .btn-green {
                color: @color-white;
                margin-top: 0;
                padding: 7px 15px;
                &:hover {
                    background: #a0b921;
                    color: @color-white;
                    text-decoration: none;
                }
            }
            &.dropdown.active > .dropdown-toggle,
            &.dropdown.open > .dropdown-toggle {
                color: @color-darker-gray;
                background: transparent;
            }
        }
    }
    .dropdown-menu {
        margin-top: 3px;
    }
}


/* Homepage
-------------------------------------------------------------- */
/** Carousel **/
.carousel {
    margin-bottom: 0;
}

.image-carousel {
  text-align: center;
}

.carousel-wrapper {
    @media (max-width: 768px) {
      margin: 0 -20px;
      padding-left: 20px;
      padding-right: 20px;
    }
    .carousel-inner {
        .item {
            > .carousel-item-title {
                text-align: center;
                font-weight: 300;
                strong {
                    font-weight: 400;
                }
            }
        }
    }
    .gradient(@color-white, #fafafa);
    border-bottom: 1px solid #ececec;
    border-top: 1px solid #fafafa;
    padding: 40px 0 15px;
    position: relative;
    p {
        font-size: 16px;
    }
    .sign-up {
        margin-top: 35px;
        text-align: center;
        a {
            margin: 0 10px;
            text-decoration: none;
        }
        @media (max-width: 768px) {
            a {
                width: 85%;
                margin-bottom: 15px;
            }
        }
    }
    .carousel-indicators {
        bottom: -35px;
        cursor: pointer;
        left: 50%;
        top: auto;
        right: auto;
        li {
            background: #adadad;
            height: 7px;
            width: 7px;
        }
        .active {
            background-color: #4e4e4e;
        }
    }
    .span5.offset2 {
        margin-top: 80px;
    }

}


/** More links section **/
.teaser-wrapper {
    padding: 90px 0;
    border-top: 1px solid #dedede;
    h1 {
        text-align: center;
        margin: 0 auto 100px;
        max-width: 770px;
        @media(max-width:768px) {
          margin: 0 auto 50px;
        }
    }
    h3 {
        margin-bottom: 20px;
    }
    .span4 p {
        margin-right: 50px;
    }
    @media(max-width: 768px) {
      margin: 0 -20px;
      padding-left: 20px;
      padding-right: 20px;
        a {
            width: 85%;
            margin-bottom: 15px;
        }
    }
}

/** Search section **/
input.search-query {
    .rounded-corners(4px);
    @media (max-width: 768px) {
        width: 90%;
        margin-bottom: 10px;
        margin-left: 5%;
    }
}

input.gsc-input {
  height: 20px !important;
  margin: 0 !important;
  padding: 4px 6px !important;
}

input.gsc-search-button {
  background-color: #f6f6f6 !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#f1f1f1)) !important;
  background: -webkit-linear-gradient(top, #f6f6f6, #f1f1f1) !important;
  background: -moz-linear-gradient(top, #f6f6f6, #f1f1f1) !important;
  background: -ms-linear-gradient(top, #f6f6f6, #f1f1f1) !important;
  webkit-border-radius: 3px !important;
  -moz-border-radius: 3px !important;
  -ms-border-radius: 3px !important;
  -o-border-radius: 3px !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  color: #ffffff !important;
  height: auto !important;
  font-weight: 700 !important;
  padding: 5px 17px !important;
  text-decoration: none !important;
  text-shadow: none !important;
  background: -o-linear-gradient(top, #f6f6f6, #f1f1f1) !important;
  color: #36a3d4 !important;
  border: 1px solid #e6e6e6 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

td.gsc-clear-button { display: none !important; }

.formbar {
    padding: 20px 0;
    .form-search {
        .search-query {
            .rounded-corners(4px);
            font-size: 11px;
            margin-top: 0;
            padding: 4px 8px;
        }
    }
    h1 {
        margin: 0;
    }
    .input-xxlarge  {
        width: 70%;
        margin-right: 20px;
    }
    p {
        font-size: 13px;
    }
    @media(max-width:768px) {
      margin: 0 -20px;
      padding-left: 20px;
      padding-right: 20px;
    }
}

.typeahead {
    margin-top: 0;
}

.search-wrapper {
    background: @bck-orange;
    h1 {
        color: @color-white;
    }
    .search-query {
        .borders(#e37e28);
    }
    .popular-tags {
        color: @color-brown;
        a {
           color: @color-brown;
        }
    }
    .divider {
        display: none;
    }
  .form-food-search-wrapper {
    @media (max-width:979px) {
      width: 74.46808510638297%;
    }
    @media (max-width: 768px) {
        width: 100%;
    }
  }

}

@media (max-width: 768px) {
    #searchKeyword #key {
        margin-bottom: 15px;
    }
    .formbar .input-xxlarge {
        margin-right: 0;
        width:100%;
    }
}


/** Newsletter section **/
.newsletter-wrapper {
    background: @bck-green;
    .search-query {
        font-size: 11px;
        .borders(#b1c747);
    }
    .fb-like {
        margin-right: 30px;
    }
}
#mc_embed_signup {
  @media(max-width:979px) {
    margin-bottom: 20px;
    .email {
      width: 79%;
    }
  }
  @media (max-width: 480px) {
    width: 100%;
  }
}

/** Testimonials section **/
.testimonials-wrapper {
    padding: 50px 0;
    h1 {
        text-align: center;
    }
    #testimonialsCarousel {
        margin: 50px auto 20px;
        width: 70%;
        text-align: center;
        &:before, &:after {
            background-image: url("../img/fitwatch-sprite.png");
            content: '';
            height: 20px;
            position: absolute;
            width: 30px;
        }
        &:before {
            background-position: -224px 0;
            left: -75px;
            top: 0;
        }
        &:after {
            background-position: -224px -32px;
            right: -70px;
            bottom: 50px;
        }
        @media (max-width: 768px) {
            &:before {
                left: -30px;
            }
            &:after {
                right: -30px;
            }
        }
    }
}

/* Blog
-------------------------------------------------------------- */
.page-content {
    background: @bck-light-gray;
    overflow: hidden;
    .left-side {
        .box-shadow(0 0 12px 6px #f0f0f0);
        min-height: 2000px;
        @media (max-width: 768px) {
            min-height: initial;
            padding-right: 0;
            border-right: none;
        }
    }
}

.main-content {
    margin-bottom: 50px;
}

.left-side {
    background: @color-white;
    min-height: 600px;
    padding-right: 50px;
    border-right: 1px solid @bck-gray;
}

@media(max-width: 768px) {

    .left-side {
        padding-right: 20px;
    } 

}

.right-side {
    margin-top: 0;
}

/** Sidebar **/
.right-side-sidebar {
    padding-right: 35px;
    .widget {
        max-width: 297px;
        @media (max-width: 768px) {
            max-width: initial;
        }
    }
    .sidebar {
        margin-bottom: 176px;
        margin-top: 45px;
    }
    @media (max-width: 768px) {
        padding-right: 10px;
        padding-left: 10px;
    }
}

.widget {
    h3 {
        font-size: 20px;
        line-height: 1.2;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    ul {
        list-style: none;
        margin-left: 0;
        li {
            margin-bottom: 10px;
        }
    }
    li > a {
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }
    p {
        margin-bottom: 30px;
    }
    .divider {
        margin: 30px 0 20px;
    }
    input + .btn {
        margin-left: 10px;
        width: 100px;
        @media (max-width: 768px) {
            width: initial;
        }
    }
    input[type="email"] {
        width: auto;
    }
}

/** Posts **/
.preview {
    margin-bottom: 20px;
}

/*.post-title {
    font-weight: @bold;
    line-height: 22px;
    margin: 0 0 10px;
}*/

.post-title-link {
    color: @color-darkest-gray;
    text-decoration: none;
}

.meta {
    margin-bottom: 20px;
}

.meta-item {
    display: inline-block;
    font-size: 11px;
    a {
        color: @color-gray;
        font-size: 11px;
        font-weight: @bold;
        text-decoration: none;
        &:hover,
        &:active {
            text-decoration: underline;
        }
    }
}

/** Navigation between posts in post view **/
.prevnext {
    clear: both;
    border-top: 1px solid @bck-gray;
    margin-top: 60px;
    padding-top: 15px;
    p {
        margin-bottom: -15px;
    }
}

.prevnext-symbol {
  color: #8B8F94;
  font-size: 24px;
  vertical-align: bottom;
  font-weight: 600;
  line-height: 1;
}

.prev-prevnext,
.next-prevnext {
  max-width: 45%;
  p {
    font-size: 13px;
  }
}

.next-prevnext {
    text-align: right;
}

.prevnext-link {
    font-size: 12px;
    padding-right: 4px;
    font-weight: @bold;
}

.prev-title {
    margin-left: 15px;
}

.next-title {
    margin-right: 15px;
}

.about-author {
    background: @bck-light-gray;
    border: 1px solid @bck-gray;
    margin-bottom: 40px;
    p {
        font-size: 13px;
        margin-bottom: 10px;
        margin-right: 10px;
    }
    .about-author-title {
        margin-bottom: 3px;
        margin-top: 10px;
    }
    + .divider {
        display: none;
    }
    img {
        margin: 10px;
    }
}
.social-media-post {
    margin-bottom: 25px;
}

/** Bottom of posts **/
.emphasis-text {
    margin: 40px 0 50px;
    text-align: center;
    p {
        font-size: 20px;
    }
    p > .btn {
        margin-left: 30px;
        @media (max-width: 768px) {
            margin-left: 0;
            margin-top: 15px;
        }
    }
}

/* Pagination
-------------------------------------------------------------- */
.pagination {
    margin: 0 0 20px;
    text-align: center;
    ul {
        .box-shadow (none);
        > .active {
            > span {
                background: @bck-blue;
                color: @color-white;
            }
        }
        > li {
            > a,
            > span {
                .rounded-corners (3px);
                border: 0;
                color: @color-darkest-gray;
                font-size: 13px;
                font-weight: @bold;
                margin: 0 5px;
                &:hover,
                &.selected {
                    background: @bck-gray;
                }
            }
        }
    }
}

/* Alignment for images
-------------------------------------------------------------- */
.alignment-left {
    margin-right: 10px;
}

.alignment-right {
    margin-left: 10px;
}

/* Default Page
-------------------------------------------------------------- */
.body-content {
    margin-bottom: 75px;
}

.social_bookmark {
    .divider {
        display: none;
    }
}

/* Reports section
-------------------------------------------------------------- */
.overview-report h5 {
  border-bottom: 1px solid #dfdfdf;
}

.table-vitamins-minerals .row-name {
  font-weight: 700;
}

/* Dashboard
-------------------------------------------------------------- */
.page-content-dashboard {
    /*overflow: hidden;*/
    .left-side {
        background: #ffffff; /* Old browsers */
        background: -moz-linear-gradient(left,  #ffffff 0%, #ffffff 97%, #f2f2f2 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(97%,#ffffff), color-stop(100%,#f2f2f2)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left,  #ffffff 0%,#ffffff 97%,#f2f2f2 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left,  #ffffff 0%,#ffffff 97%,#f2f2f2 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left,  #ffffff 0%,#ffffff 97%,#f2f2f2 100%); /* IE10+ */
        background: linear-gradient(to right,  #ffffff 0%,#ffffff 97%,#f2f2f2 100%); /* W3C */
        padding-right: 20px;
    }
    .widget p {
        margin-bottom: 15px;
    }
}

.navbar-dashboard {
    margin-top: 15px;
    margin-bottom: 300px;
    a {

        border: 1px solid transparent;
        color: @color-darkest-gray;
        &:hover {
            border: 1px solid @bck-gray;
            color: @color-darkest-gray;
            background: #fdfdfd;
        }
    }
    .current {
        a {
            border: 1px solid @bck-gray;
            color: @color-darkest-gray;
            background: #eee;;
        }
    }
}

.sidebar-dashboard-links {
  margin-bottom: 30px;
  li:before {
    content: "›";
    margin-right: 5px;
    font-weight: bold;
    vertical-align: bottom;
  }
}

.graph {
  margin-bottom: 35px;
}

@media (min-width: 768px) and (max-width: 979px) {
  .page-content-dashboard {
    .right-side {
        float: none;
        margin-left: 0;
        width: 100%;
    }
    .overview-info {
        margin-left: 0;
        padding-left: 0;
    }
  }

  .navbar-dashboard {
    margin-bottom: 15px;
  }
}

@media (max-width: 979px) {
  .page-content-dashboard {
    .left-side {
        float: none;
        min-height: 0;
        margin-bottom: 0;
        padding-bottom: 0;
        width: 100%;
        border-right: none;
        background: #fff;
        border-bottom: 1px solid #dfdfdf;
        padding-right: 0;
    }
  }
}

.top-divider {
    border-top: 1px solid @bck-gray;
    padding-top: 10px;
    margin-top: 10px;
}

.nav-pills {
    font-size: 13px;
    .active {
        a,
        a:hover,
        a:focus {
            background: @bck-blue;
        }
    }

}

.navbar-primary .nav-user {
    margin-top: 0;
    > li > a {
        background: transparent;
        border: none;
        font-size: 12px;
        padding: 0;
        &:hover {
            background: transparent;
            border: none;
        }
    }
    .username {
        @media (max-width: 768px) {
            display: none;
        }
    }
    .dropdown {
        text-align: right;
    }
    .dropdown-menu {
        margin-top: 21px;
        text-align: left;
    }
}

.user-avatar {
    .borders(@bck-gray);
}

.user-avatar-wrapper {
    margin-left: 10px;
}

.navbar-tracker {
    padding-top: 15px;
}

.dropdown-menu.user-options {
    left: auto;
    right: 0;
}

.navbar .nav>li>.dropdown-menu.user-options:before {
    left: auto;
    right: 9px;
}
.navbar .nav>li>.dropdown-menu.user-options:after {
    left: auto;
    right: 10px;
}

.page-content-section {
    margin-bottom: 15px;
}

.overview-info {
    border-bottom: 1px solid @bck-gray;
    margin: 0 -30px 20px;
    padding-bottom: 10px;
    padding-left: 30px;
    .profile-completion {
        font-size: 12px;
        margin-top: 10px;
        text-align: right;
    }
}

.overview-info span,
.current-informations span {
    color: @color-gray;
    font-size: 20px;

}

.dashboard-box-title {
    background: @bck-light-gray;
    border: 1px solid @bck-gray;
    .border-radiuses(5px, 0, 0, 5px);
    font-size: 14px;
    padding: 5px 10px;
    margin-bottom: 0;
}

.dashboard-box {
    border: 1px solid @bck-gray;
    border-top: none;
    .border-radiuses (0, 5px, 5px, 0);
    padding: 15px 10px;
    margin-bottom: 30px;
    hr {
        margin: 15px 0;
    }

}
/****background colors for dashboard-box****/
.green{
	background: @bck-green;
	color:white;
}  
.red{
	background: @color-red;
	color:white;
}
.blue{
	background: @bck-blue;
	color:white;
}

/****end background colors for dashboard-box****/
/** check box for nutrition items**/
.food-item-label{
font-size: 14px;
cursor: default;
}

.food-item {
display:none;
}

.input-append input.total-value {
    font-size: 18px;
}

.carousel-goals {
    margin: 10px 0;
    line-height: inherit;
    .carousel-control {
        position: absolute;
        top: 50%;
        left: auto;
        width: auto;
        height: auto;
        margin-top: -7px;
        font-size: inherit;
        line-height: inherit;
        text-align: center;
        background: none;
        border: none;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        opacity: 1;
        filter: alpha(opacity=100);
        &.right {
            right: 0;
        }
    }
    .carousel-inner {
        text-align: center;
    }
    .carousel-indicators {
        top: auto;
        bottom: -20px;
        right: 50%;
        margin-right: -10px;
        li {
            background: @bck-gray;
            height: 8px;
            width: 8px;
        }
        .active {
            background: @color-lighter-gray;
        }
    }
}

/* Timeline */
.food-exercice-timeline {
    .dashboard-box-title {
        margin-top: 0;
        padding: 3px 10px;
    }
    .dashboard-box {
        padding: 15px 10px 0;
        margin-bottom: 15px;
    }
}

.timeline-list {
    list-style: none;
    margin: 0;
    li {
        line-height: 15px;
    }
}

.calories {
    text-align: right;
}

.timeline-day-wrapper {
    h3 {
        font-size: 15px;
        font-weight: 700;
        margin: 0 0 0 25px;
        line-height: 15px;
        position: relative;
        &:before {
            content: '';
            .gradient (@bck-light-gray, @bck-gray);
            .borders (@color-lighter-gray);
            border-radius: 50%;
            display: block;
            height: 10px;
            left: -30px;
            margin-top: -7px;
            position: absolute;
            top: 50%;
            width: 10px;
        }
    }
}

.timeline-day-content {
    border-left: 1px solid @bck-gray;
    padding: 10px 0 30px 24px;
}
.timeline-caloriecounter-wrapper {
    a {
        font-size: 15px;
        font-weight: 700;
        margin: 0 0 0 25px;
        line-height: 15px;
        position: relative;
        &:before {
            content: '';
            .gradient (@bck-light-gray, @bck-gray);
            .borders (@color-lighter-gray);
            border-radius: 50%;
            display: block;
            height: 10px;
            left: -30px;
            margin-top: -7px;
            position: absolute;
            top: 50%;
            width: 10px;
        }
    }
}
.timeline-caloriecounter-content {
    border-left: 1px solid @bck-gray;
    padding: 10px 0 30px 24px;
	font-size: 15px;

}

/* Activity Tracker */
.activity-totals-wrapper,
.meal-totals-wrapper {
    width: 60%;

}

.exercise-goals-wrapper,
.nutrition-goals-wrapper {
    width: 40%;

}

.activity-total {
    float: left;
    width: 20%;
}

.table-history {
    margin-bottom: 30px;
    tr td.add-comment-link {
        background: @bck-light-gray;
        border-top: 1px solid @bck-gray;
        border-bottom: 1px solid @bck-gray;
        text-align: left;
    }
    .note {
        float:left;
        font-style:italic;
        cursor: pointer; cursor: hand;
    }

    .history-options {
        text-align: right;
        min-width: 100px;
        a {
            display: inline-block;
            width: 45%;

        }
    }
    @media (max-width: 768px) {
        .history-options {
            min-width: 50px;
        }
    } 
	.custom-foods-options {
        text-align: right;
        min-width: 150px;
        a {
            display: inline-block;
            width: 15%;

        }
    }
    @media (max-width: 768px) {
        .custom-foods-options {
            min-width: 150px;
        }
    }     	

    .sub-total {
        height: 50px;
    }
    .meal-title td {
        border-top: none;
    }
}
.table-vm-history tr:last-child td {
    border-bottom: none;
}

/* Weigh-In tracker */
.wm-entry {
    text-align: right;
}

.form-weigh-in {
    .btn {
        margin-right: 24px;
    }
}

.form-inline .input-append {
    margin-top: 1px;
}

.measurement-wrapper {
    display: inline-block;
    margin-right: 5px;
}

/* Food Tracker and Activity Tracker */
.tracker-add-item {
    background-color: @bck-light-gray;
    border: 1px solid @bck-gray;
    .rounded-corners(5px);
    padding: 10px;
    position: relative;
    margin-bottom: 10px;
}

.tracker-add-item h5 {
    margin-top: 0;
}

.tracker-add-item .close {
    position: absolute;
    top: 10px;
    right: 10px;
}

.tracker-add-item .pagination {
    margin-bottom: 5px;
}

.add-custom-link {
    margin-left: 20px;
}
input.editbox {
    display: none; /*tried to get hide to work as it does with other classes but it wouldn't work */

}
input.edit-activity-box {
    display: none; /*tried to get hide to work as it does with other classes but it wouldn't work */

}

/*.editlink {
display:none;
}*/
.scrolling-list {
    margin-left: 0;
    list-style: none;
    overflow: auto;
}

.scrolling-list a {
    color: @color-lighter-gray;
    display: block;
    line-height: 1.75;
    text-decoration: none;
    padding-left: 10px;
}

.scrolling-list a:hover,
.scrolling-list .selected, {
    background-color: @bck-gray;
}

.category-list {
    max-height: 17em;
}

.tracker-add-item-list {
    max-height: 17em;
    margin-left: 20px;
}

.food-search .tracker-add-item-list {
    max-height: 15em;
}

.tracker-add-item-list-wrapper {
    border-left: 1px solid @bck-gray;
    margin-left: -10px;
}

.pagination .pagination-food > li:first-child > a,
.pagination .pagination-food > li:first-child > span {
    border-left: none;
}

.pagination-food {
    border: 1px solid @bck-gray;
}

.pagination .pagination-food {
    .rounded-corners(0);
}

.pagination .pagination-food > li > a,
.pagination  .pagination-food > li > span {
    .rounded-corners(0);
    border-left: 1px solid @bck-gray;
    margin: 0;
    padding: 0 6px 0 5px;
    text-transform: uppercase;
}

.form-add-custom {
    margin-bottom: 10px;
}

.form-submission {
    border-top: 1px solid @bck-gray;
    margin: 0 -10px;
    padding: 20px 10px  0;
}

.form-submission .btn {
    margin-top: 26px;
}

.custom-recipe-total {
    background-color: @bck-light-gray;
}

.custom-food-basic-info .row-fluid {
    margin-bottom: 20px;
}

.food-form-info a,
.custom-food-basic-info a {
    display: block;
    margin-top: 30px;
}

.ingredient-list {
    background-color: @color-white;
    border-top: 1px solid #dfdfdf;
    margin: 20px -10px 0;
    padding: 20px 10px 10px;
}

/* Calorie Goal */
.border-right {
    border-right: 1px solid @bck-gray;
}

.current-informations {
    a {
        font-size: 10px;
        margin-right: 10px;
    }
}

.goal-wrapper {
    margin: 20px 0;
}

.calorie-label {
    margin-right: 30px;
}

.calorie-deficit-selector {
    margin: 30px 0;
    position: relative;
    hr {
        left: 12%;
        position: absolute;
        top: 10px;
        margin: 0;
        width: 75%;
        z-index: -1;
    }
}

.calorie-deficit-option {
    float: left;
    position: relative;
    width: 25%;
    text-align: center;
    label {
        text-align: center;
        margin-top: 20px;
    }
    input {
        left: 50%;
        position: absolute;
        clear: both;
        margin-left: -6px;
    }
}

/* Weight Goal
-------------------------------------------------------------- */
.current-informations.goal-tracker-weight-body-fat span {
    font-size: 16px;
}

/* Custom Goals
-------------------------------------------------------------- */
.custom-goal {
    margin-bottom: 20px;
}

.goal-days {
    text-transform: capitalize;
}

.goal-header {
    border-left: none;
    border-right: none;
}

.new-goal-description {
    margin-top: 20px;
}

.goal-description {
    padding: 20px 10px;
}

.edit-link {
    margin-right: 15px;
}

/* Charts */
.chart {
    margin: 25px 0 100px;
    @media (max-width: 768px) {
        margin: 25px 0 125px;
    }
}
.chart-selection, #search-options .btn {
    margin-bottom: 10px;

}

/* Bootstrap Date picker
-------------------------------------------------------------- */
.date-wrapper {
    display: inline-block;
    position: relative;
}

.date-input[readonly] {
    background: @color-white;
    text-align: center;
    width: 200px;
}
.date-selection {
    background: @bck-light-gray;
    border: 1px solid @bck-gray;
    padding: 0px 5px;
    .date {
        margin: 10px;
    }
}

.date-switch {
    margin-top: -7px;
    position: absolute;
    top: 50%;
    z-index: 999;
}

.date-prev {
    left: 15px;
}

.date-next {
    right: 43px;
}

.datepicker table tr td span.active,
.datepicker table tr td.active {
    &:active,
    &.active,
    &:hover:active,
    &:hover.active,
    &.disabled:active,
    &.disabled.active,
    &.disabled:hover:active,
    &.disabled:hover.active {
        background: @bck-blue;
        color: @color-white;
    }
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
    color: @bck-gray;
}

.datepicker.dropdown-menu {
    border-top-width: 1px;
}

/* Register and login form
-------------------------------------------------------------- */
.modal-footer {
    text-align: left;
}

.modal-body {
    max-height: none;
}

.social-media-register {
    padding: 120px 15px 30px 0;
    text-align: center;
    .btn {
        margin-top: 20px;
    }
}
.form-inputs {
    border-left: 1px solid @bck-gray;
    padding-left: 30px;
    @media(max-width: 768px) {
      border-left: none;
      padding-left: 0;
    }
}

.form-actions {
    background: @bck-light-gray;
    border-top: 1px solid @bck-gray;
    padding: 20px 0 0 0;
    margin: 20px -15px 0;
    padding: 20px 20px 0 20px;
    .btn {
        margin-top: 10px;
    }
}

.sex-selection:hover,
.sex-selection:checked {
    + .icon-fit-user-female {
        background-position: 0 -96px;
        &.icon-orange {
            background-position: 0 -128px;
        }
    }
    + .icon-fit-user-male {
        background-position: -32px -96px;
        &.icon-orange {
            background-position: -32px -128px;
        }
    }
}

.icon-fit-user-female.gender-selected {
    background-position: 0 -128px;
}
.icon-fit-user-male.gender-selected {
    background-position: -32px -128px;
}

.icon-with-label {
    margin-right: 40px;
}

.sex-label {
    margin-left: 18px;
    font-size: 12px;
    font-style: normal;
    color: #444747;
}
.first-input {
    margin-top: 15px;
}


#calorie_goal_choice {
    margin-bottom: 12px;
}

.goal-wrapper .radio.inline {
    padding: 8px 12px;
    .rounded-corners(5px);
    text-align: center;
    &:hover {
        background: @bck-gray;
    }
}
.goal-selection {
    display: none;
    margin-top: 24px;
    &:checked + .radio {
        background: @bck-blue;
        color: @color-white;
    }
}

.goal-selection-info {
    margin-top: 0px;
}

.input-append.input-block-level {
    input,
    select {
        /*.rounded-corners(4px);*/
    }
    select {
        display: inline-block;
    }
    .add-on {
        /*background: none;*/
        /*border-color: transparent;*/
        /*cursor: pointer;*/
    }
}

.forgot-password,
.cancel-link {
    text-decoration: none;
    margin-left: 15px;
}

.social-btn {
    margin-top: 5px;
}

.register-btn {
    margin-left: 120px;
}

/* Account Settings
-------------------------------------------------------------- */
.form-horizontal .control-label {
    text-align: left;
}

.btn-account-settings {
    margin-top: 8px;
}

/* Premium account info */
.premium-account-info {
    list-style: none;
    margin: 20px 0;
}

.help-premium-account-cancel {
    margin-top: 20px;
}

.before-well {
    margin-top: 40px;
}
/* Profile settings
-------------------------------------------------------------- */
.form-bottom {
    margin-top: 20px;
}

#inspirational_quote {
    width: 90%;
}

/* Popover info
-------------------------------------------------------------- */
#occupation_level_info + .popover,
#activity_level_info + .popover,
#target_heart_rate_info + .popover {
    width: 97%;
    max-width: 750px;
    @media (max-width: 768px) {
        left: 1% !important;    
    }
    
}

.popover blockquote {
    border-left: 3px solid @bck-gray;
    padding-left: 30px;
}

/* Calculators
-------------------------------------------------------------- */
.main-content {
  margin-bottom: 48px;
}

.calculators-wrapper {
  /*  background: url(../img/calculator-image.png) no-repeat right 60px;
    padding: 65px 0;
    @media (max-width: 768px) {
      background: none;
    }
    @media (max-width:1200px) {
      background-size: 30%;
    }*/
}

.field-group {
    margin-bottom: 13px;
}

.form-calculator {
    .borders(@color-orange);
    .rounded-corners(3px);
    background: @bck-light-gray;
    select {
        width: auto;
        max-width: 180px;
        @media (max-width: 1200px) {
            width: 100%;
            max-width: 100%;
        }
    }
    .level-activity {
        width: 145px;
    }
    h4 {
        background: @bck-orange;
        color: @color-white;
        padding: 15px 20px;
        margin-top: 0;
    }
    .control-label {
        text-align: left;
        width: 128px;
    }
    .form-fields {
        padding: 10px 20px 20px 20px;
        clear: both;
    }
    .controls {
        margin-left: 0;
    }
    .radio.inline {
        padding-top: 0;
    }

}

.control-group,
.form-horizontal .control-group {
    margin-bottom: 10px;
}

.input-append + .input-append,
.input-append + .btn,
.page-content-dashboard input + .btn,
.page-content-dashboard .btn + .btn {
    /*margin-left: 5px;*/
}

.input-append + .input-append,
.input-mini + .input-append {
    @media (min-width: 768px) and (max-width: 979px) {
        margin-left: 0;
        margin-top: 5px;
    }
    @media (min-width:980px) and (max-width: 1199px) {
        margin-left: 128px;
        margin-top: 5px;
    }
}

.table-bodyfat {
    @media (min-width: 768px) and (max-width: 979px) {
        margin-left: -13px;
    }
    td {
        border-bottom: 1px solid @bck-gray;
        border-top: none;
        border: none;
        text-align: center;
        &:first-child {
            text-align: left;
            vertical-align: middle;
        }
    }
    thead {
        th {
            text-align: center;
        }
    }
}
.weight-loss-results {
    border-bottom: 1px solid @bck-gray;
    margin-bottom: 20px;
}

.table-weight-loss-td {
    th {
        vertical-align: middle;
    }
}

.reduce-visibility {
    opacity: 0.5;
}
.unit {
    /*margin: 0 5px;*/
}

.between-input {
    margin-left: 10px;
    margin-right: 10px;
}

.type-title h5 {
        padding-top: 7px;
        font-size: 13px;
}

/* Ads
-------------------------------------------------------------- */
.ad-wrapper {
    margin: 15px 0;
    img {
        margin: 0 auto;
        display: block;
    }
}


.reponsive-ad-small { width: 336px; height: 280px; margin-left: 0; };

.responsive-ad-blog { width: 320px; height: 50px; }
@media(min-width: 500px) { .responsive-ad-blog { width: 468px; height: 60px; } }
@media(min-width: 800px) { .responsive-ad-blog { width: 728px; height: 90px; } }

.responsive-ad-calculators { width: 320px; height: 50px; }
@media(min-width: 500px) { .responsive-ad-calculators { width: 468px; height: 60px; } }
@media(min-width: 800px) { .responsive-ad-calculators { width: 728px; height: 90px; } }

/*  Suzanne's classes -- copied from above but need to be verified*/
/* Some may appear to be duplicates but I want the ability to test ad sizes, in the future - eg: small leaderboard vs. rectangle BTF*/

/*  Leaderboard ad should never be a rectangle on the desktop or tablet*/
.responsive-ad-leaderboard { width: 320px; height: 100px; }
@media(min-width: 468px) { .responsive-ad-leaderboard { width: 468px; height: 60px; } }
@media(min-width: 1025px) { .responsive-ad-leaderboard { width: 728px; height: 90px; } }

/*  Tracker - BTF - Wide - Show Leaderboard*/
.responsive-ad-btf-wide { width: 320px; height: 50px; }
@media(min-width: 500px) { .responsive-ad-btf-wide { width: 468px; height: 60px; } }
@media(min-width: 800px) { .responsive-ad-btf-wide { width: 728px; height: 90px; } }

/*  Tracker - BTF - Small - Show Leaderboard (not possible to show 728 X90 px because of sidebar)*/
.responsive-ad-btf-small { width: 320px; height: 50px; }
@media(min-width: 500px) { .responsive-ad-btf-small { width: 468px; height: 60px; } }

/*  Tracker Sidebar -- wide enough for large rectangle? No leaderboards allowed*/
.responsive-ad-sidebar-tracker { width: 250px; height: 250px; } 
@media(min-width: 500px) { .responsive-ad-sidebar-tracker { width: 160px; height: 600px; } }
@media(min-width: 800px) { .responsive-ad-sidebar-tracker { width: 300px; height: 600px; } }

/*  Blog - BTF*/
.responsive-ad-btf-blog { width: 320px; height: 50px; }
@media(min-width: 500px) { .responsive-ad-btf-blog { width: 468px; height: 60px; } }
@media(min-width: 800px) { .responsive-ad-btf-blog { width: 728px; height: 90px; } }

/*  Calculators - BTF*/
.responsive-ad-btf-calculators { width: 300px; height: 250px; }
@media(min-width: 500px) { .responsive-ad-btf-calculators { width: 300px; height: 250px; } }
@media(min-width: 800px) { .responsive-ad-btf-calculators { width: 300px; height: 600px; } }

/*  Blog Sidebar -- large rectangle; no skyscrapers*/
.responsive-ad-sidebar-blog { width: 250px; height: 250px; } 
@media(min-width: 500px) { .responsive-ad-sidebar-blog { width: 300px; height: 250px; } }
@media(min-width: 800px) { .responsive-ad-sidebar-blog { width: 336px; height: 280px; } }







/* Breadcrumb
-------------------------------------------------------------- */
.breadcrumb {
    background: none;
    font-size: 13px;
    margin: 35px 0;
    padding: 0;
    a {
        text-decoration: none;
    }
    > .active {
        color: @color-lighter-gray;;
    }
    .divider {
        border: none;
    }
}

@media(max-width: 768px) {
    .breadcrumb {
        margin: 0;
    }
}


/* Blog title link
-------------------------------------------------------------- */
.post-title {
  line-height: 1.5;
}

.featured-image {
  float: left;
  margin-right: 36px;
  margin-bottom: 12px;
}

/* Share this
-------------------------------------------------------------- */
.share-this {
    margin-top: 20px;
    .follow-us {
        line-height: 1.7;
        margin-right: 15px;
    }
}

/* Misc
-------------------------------------------------------------- */
.hide {
    display: none;
}

/* Nutrion Facts
-------------------------------------------------------------- */
.modal-body-label {
    overflow-y: auto;
    max-height: 680px;
    @media(max-width: 980px) {
        max-height: 550px;
    }
    @media(max-width: 768px) {
        max-height: 432px;
    }

}

#input-measure {
    @media (max-width: 768px) {
        max-width:80%;
    }

}

.performance-facts {
  border: 1px solid black;
  margin: 20px auto;
  float: left;
  width: 280px;
  padding: 0.5rem;
  table {
    border-collapse: collapse;
    color: #383c3c;
  }
  @media (max-width: 768px) {
    width: 90%;
    float: initial;

  }
}
/*need this for View Food modal on Nutrition page*/
.performance-facts-modal {
  border: 1px solid black;
  margin: 20px auto;
  width: 280px;
  padding: 0.5rem;
  table {
    border-collapse: collapse;
    color: #383c3c;
  }
}
.performance-facts__title {
  font-weight: bold;
  font-size: 2rem;
  margin: 0 0 0.25rem 0;
}
.performance-facts__header {
  border-bottom: 10px solid black;
  padding: 0 0 0.25rem 0;
  margin: 0 0 0.5rem 0;
  p {
    margin: 0;
  }
}
.performance-facts__table--grid,
.performance-facts__table--small,
.performance-facts__table {
  font-size: 12px;
  width: 100%;
  thead tr {
    th, td {
      border: 0;
    }
  }
  th, td {
    font-weight: normal;
    text-align: left;
    padding: 0.25rem 0;
    border-top: 1px solid black;
    white-space: nowrap;
  }
  td {
    &:last-child {
      text-align: right;
    }
  }
  .blank-cell {
    width: 1rem;
    border-top: 0;
  }
  .thick-row {
    th, td {
      border-top-width: 5px;
    }
  }
}
.small-info {
  font-size: 0.7rem;
}

.performance-facts__table--small {
  border-bottom: 1px solid #999;
  margin: 0 0 0.5rem 0;
  thead {
    tr {
      border-bottom: 1px solid black;
    }
  }
  td {
    &:last-child {
      text-align: left;
    }
  }
  th, td {
    border: 0;
    padding: 0;
  }
}

.performance-facts__table--grid {
  margin: 0 0 0.5rem 0;
  td {
    &:last-child {
      text-align: left;
      &::before {
        content: "•";
        font-weight: bold;
        margin: 0 0.25rem 0 0;
      }
    }
  }
}

.text-center {
  text-align: center;
}
.thick-end {
  border-bottom: 10px solid black;
}
.thin-end {
  border-bottom: 1px solid black;
}

/* Subscription Premium */

.title-h4 {
    margin: 20px 0 16px 0;
}

.select-expiration {
    width: 109px;
}

/* jQuery Validate */

.error {
   color: @color-red;
}

input.error, textarea.error{
    border-color: @color-red;
}

input.error:focus, textarea.error:focus {
    border-color: @color-red;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(185, 74, 72, 0.6);
       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(185, 74, 72, 0.6);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(185, 74, 72, 0.6);
}

.editarea{
width: 100%;
}

.loader {
    background-image: url("../img/ajax-loader.gif");
    background-repeat: no-repeat;
    background-position: center;
	height:100px;

}

.modal.hide {
    z-index: -1041;
}
.modal.in {
    z-index: 1041;
}

.modal-label-body{
max-height: 100%;
overflow-y: scroll;
}

.tooltip-fat {
    cursor: help;
}

@media(max-width: 768px) {
    .tooltip-more {
        cursor: help;
        display: inline-block !important;
        width: 45%;
    }

    .nutrition-selector-wrapper {
        margin-bottom: 10px;
    }

    #nutrition_selector, #range_nutrition_selector {
        margin-bottom: 10px;
    }

    #qty_nutrition_selector {
        display: block;
    }
    .share-this .pull-right
    {
        float: initial;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .btn {
        padding: 5px 10px;
    }
    #add-custom-recipe {
        margin-bottom: 15px;
    }
}

input[type="checkbox"], input[type="radio"] {
    -webkit-transform: scale(1.5,1.5);
    -moz-transform: scale(1.5,1.5);
    -o-transform: scale(1.5,1.5);
    transform: scale(1.5,1.5);    
}

#food_search_form input[type="radio"] {
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1);   
} 

input[type="radio"] {
    margin-right: 5px;
}

label.radio {margin-right: 10px;}

input.food-item[type="checkbox"] {
    margin: 0 10px 5px 0;
}
.table-printer-friendly {
width: 750px;
}
.div-printer-friendly{
width: 750px;
margin-left: 20px;
}
/*for AddThis.com's Custom Sharing buttons; otherwise, buttons stretch out*/
.addthis_custom_sharing span {
display:inline-block !important;
float:none !important;
width:32px !important;
}
/*Elements of Weight Loss*/
.modal-body-elements {
	margin: 10px;
    overflow-y: auto;
    max-height: 680px;
    @media(max-width: 980px) {
        max-height: 550px;
    }
    @media(max-width: 768px) {
        max-height: 432px;
    }
}
.box{
 	border: 1px solid black; 
 	padding: 20px 20px 20px 10px;
 	text-align: center; 
 	font-size: 16px;
 	-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     -webkit-border-radius: 3px; 
     -moz-border-radius: 3px; 
     border-radius: 3px; 
     margin: 2px; 
     -webkit-box-shadow: 1px 1px 1px #ccc; 
     -moz-box-shadow: 1px 1px 1px #ccc; 
     box-shadow: 1.5px 2px 2px #000; 
     text-shadow: 1px 1px 1px #ccc; 
 	color:white;
 	width: 68px;
 	float:left;
 }
 
 .firstcharacter { color: #fff; font-size: 30px;  padding-top: 4px;   }
 
 .box a{
 	text-decoration: none;
 	color: inherit; 
 }
 
 .box:hover{
 	box-shadow: 1px 1px 1px #ccc; 
 	cursor: pointer; 
 	text-shadow: 1px 1px 1px #000;
 }
 
 .wle-orange{
 	background: #EF852A;
 	color:white;
 } 
 
 .wle-blue{
 	background: #36A3D4;
 	color:white;
 } 
 .wle-blue-fit {
 background: #207297;
 color: white;
 }
 .wle-purple {
 background: #CE24CE;
 color: white;
 }
 .wle-green {
 background: #BCD24B;
 color:white;
 }
 
 .wle-red {
 background: #b94a48;
 color:white;
 
 }
 #clear{
 	clear: both; 
 }
 .fs-16 {
 font-size:16px;
 }