/*
 * Breakpoint mixin. See: http://css-tricks.com/conditional-media-query-mixins/
 *
 * Use:
 * .row {
 *  @include bp(mobile, min) {
 *    //mobile styles
 *  };
 * }
 *
 * Breakpoints are set in _config.scss e.g. $bp1
 */
.mobile-only {
  display: none;
}
@media (max-width: 37.625em) {
  .mobile-only {
    display: block;
  }
}

@media (max-width: 37.625em) {
  .hidden-on-mobile {
    display: none !important;
  }
}

/**
 * Mixins for doing CSS3 cross-browser stuff:
 */
/**
 * Special grayscale mixin to support IE rather than using
 *	@include filter(grayscale(100%)) 
 * which IE does not support
*/
#ft .bd-width {
  padding-left: 20px;
  padding-right: 20px;
}

#ft ul,
#ft li {
  margin: 0;
  padding: 0;
  list-style: none;
}

#ft li {
  font-size: 0.833333em;
  /* 10px / 12px = 83.3333% */
  line-height: 1.25em;
  letter-spacing: 1px;
}

#ft li a {
  color: #AAA;
}

.ft-list-left,
.ft-list-right,
.ft-list-icon {
  text-transform: uppercase;
}

.ft-header h3 {
  font-size: 1.666667em;
  /* 20px / 12px = 166.6667% */
}

.ft-underline {
  height: 1px;
  background-color: #3c3c3c;
  margin-bottom: 10px;
}
@media (min-width: 30.125em) {
  .ft-underline {
    width: 200px;
  }
}

.ft-left,
.ft-middle,
.ft-right {
  *zoom: 1;
  margin-bottom: 15px;
}
.ft-left:before, .ft-left:after,
.ft-middle:before,
.ft-middle:after,
.ft-right:before,
.ft-right:after {
  display: table;
  content: "";
}
.ft-left:after,
.ft-middle:after,
.ft-right:after {
  clear: both;
}
@media (min-width: 37.625em) {
  .ft-left,
  .ft-middle,
  .ft-right {
    width: 32.0%;
    float: left;
    margin-top: 0px;
  }
}
@media (min-width: 62.5em) {
  .ft-left,
  .ft-middle,
  .ft-right {
    width: 29.0%;
  }
}

@media (min-width: 62.5em) {
  .ft-left {
    margin-left: 6.5%;
  }
}

.ft-middle {
  color: #666666;
}
@media (min-width: 37.625em) {
  .ft-middle {
    margin-left: 2.0%;
    margin-right: 2.0%;
  }
}

.ft-middle a {
  color: #aaa;
  text-decoration: none;
}

.ft-right {
  color: #666666;
}

.ft-right a {
  color: #aaa;
  text-decoration: none;
}

.ft-list-left,
.ft-list-right {
  float: left;
  width: 45%;
}

.ft-list-left {
  margin-right: 5%;
}

.ft-list-left a,
.ft-list-right a {
  display: inline-block;
  min-height: 1.8em;
  padding-top: 0.7em;
}

.ie8 .ft-list-left .ft-list,
.ie8 .ft-list-right .ft-list {
  width: 150px;
}

.ft-list {
  padding-bottom: 0.75em;
}

.ft-list-icon li {
  margin-bottom: 3px;
}

.ft-list-icon li a {
  background: url("/pet-pack/images/social-networking.png") no-repeat;
  display: block;
  line-height: 2.2em;
  /* 22px / 10px */
  margin-bottom: 3px;
  padding-left: 48px;
}

.ft-list-icon li a.ft-list-facebook {
  background-position: 0 -24px;
}

.ft-list-icon li a.ft-list-twitter {
  background-position: 0 -48px;
}

.ft-list-icon li a.ft-list-youtube {
  background: url("/pet-pack/images/icon-youtube-22.png") no-repeat left top;
  line-height: 2.4em;
}

.hd-social li a.hd-social-icon.ft-list-youtube {
  width: 22px;
}

.hd-social .fbbutton {
  margin-top: 2px;
}

#ft .hd-social-fb-like {
  padding: 3px 0 0 3px;
}

/**
 * Facebook buttons style
 */
.fbbutton,
.fbbutton:visited {
  position: relative;
  z-index: 1;
  overflow: visible;
  display: inline-block;
  padding: 0.3em 0.6em 0.375em !important;
  border: 1px solid #999;
  border-bottom-color: #888;
  margin: 0;
  text-decoration: none !important;
  text-align: center;
  font: bold 11px/normal 'lucida grande', tahoma, verdana, arial, sans-serif !important;
  white-space: nowrap;
  cursor: pointer;
  /* outline: none; */
  color: #333;
  background-color: #eee;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, left, right);
  background-image: -moz-linear-gradient(#f5f6f6, #e4e4e3);
  background-image: -o-linear-gradient(#f5f6f6, #e4e4e3);
  background-image: linear-gradient(#f5f6f6, #e4e4e3);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f6f6', EndColorStr='#e4e4e3');
  /* for IE 6 - 9 */
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
  /* IE hacks */
  zoom: 1;
  *display: inline;
}

.fbbutton:hover,
.fbbutton:focus,
.fbbutton:active {
  border-color: #777 #777 #666;
}

.fbbutton:active {
  border-color: #aaa;
  background: #ddd;
  filter: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/* overrides extra padding on button elements in Firefox */
.fbbutton::-moz-focus-inner {
  padding: 0;
  border: 0;
}

/* ............................................................................................................. Icons */
.fbbutton.icon:before {
  content: "";
  position: relative;
  top: 1px;
  float: left;
  width: 10px;
  height: 12px;
  margin: 0 0.5em 0 0;
  background: url(fb-icons.png) 99px 99px no-repeat;
}

.fbbutton.edit:before {
  background-position: 0 0;
}

.fbbutton.add:before {
  background-position: -10px 0;
}

.fbbutton.secure:before {
  background-position: -20px 0;
}

.fbbutton.prev:before {
  background-position: -30px 0;
}

.fbbutton.next:before {
  float: right;
  margin: 0 -0.25em 0 0.5em;
  background-position: -40px 0;
}

/* ------------------------------------------------------------------------------------------------------------- BUTTON EXTENSIONS */
/* ............................................................................................................. Large */
.fbbutton.large {
  font-size: 13px;
}

/* ............................................................................................................. Submit, etc */
.fbbutton.confirm {
  border-color: #29447e #29447e #1a356e;
  color: #fff !important;
  background-color: #5B74A8;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, left, right);
  background-image: -moz-linear-gradient(#637bad, #5872a7);
  background-image: -o-linear-gradient(#637bad, #5872a7);
  background-image: linear-gradient(#637bad, #5872a7);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#637bad', EndColorStr='#5872a7');
  /* for IE 6 - 9 */
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
}

.fbbutton.confirm:active {
  border-color: #29447E;
  background: #4F6AA3;
  filter: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/* ............................................................................................................. Special */
.fbbutton.special {
  border-color: #3b6e22 #3b6e22 #2c5115;
  color: #fff;
  background-color: #69a74e;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, left, right);
  background-image: -moz-linear-gradient(#75ae5c, #67a54b);
  background-image: -o-linear-gradient(#75ae5c, #67a54b);
  background-image: linear-gradient(#75ae5c, #67a54b);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#75ae5c', EndColorStr='#67a54b');
  /* for IE 6 - 9 */
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #98c286;
  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #98c286;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #98c286;
}

.fbbutton.special:active {
  border-color: #3b6e22;
  background: #609946;
  filter: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/* ............................................................................................................. Disable */
.fbbutton.disable {
  z-index: 0;
  border-color: #c8c8c8;
  color: #b8b8b8;
  background: #f2f2f2;
  cursor: default;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.fbbutton.confirm.disable {
  color: #fff;
  border-color: #94a2bf;
  background: #adbad4;
}

.fbbutton.special.disable {
  color: #fff;
  border-color: #9db791;
  background: #b4d3a7;
}

.fbbutton.disable.icon:before,
.fbbutton.disable.icon:after {
  opacity: 0.5;
}

/* ------------------------------------------------------------------------------------------------------------- BUTTON GROUPS */
.fbbutton-group {
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0;
  /* IE hacks */
  zoom: 1;
  *display: inline;
}

.fbbutton + .fbbutton,
.fbbutton + .fbbutton-group,
.fbbutton-group + .fbbutton,
.fbbutton-group + .fbbutton-group {
  margin-left: 3px;
}

.fbbutton-group li {
  float: left;
  padding: 0;
  margin: 0;
}

.fbbutton-group .fbbutton {
  float: left;
  margin-left: -1px;
}

.fbbutton-group .fbbutton:hover,
.fbbutton-group .fbbutton:focus,
.fbbutton-group .fbbutton:active {
  z-index: 2;
}

.fbbutton-group > .fbbutton:first-child,
.fbbutton-group li:first-child .fbbutton {
  margin-left: 0;
}

/* ------------------------------------------------------------------------------------------------------------- BUTTON CONTAINER */
/* For mixing buttons and button groups, e.g., in a navigation bar */
.fbbutton-toolbar {
  padding: 6px;
  border-top: 1px solid #ccc;
  background: #f2f2f2;
}

.fbbutton-toolbar .fbbutton,
.fbbutton-toolbar .fbbutton-group {
  vertical-align: bottom;
}