@media (min-width: 500px) {
  .only-mobile {
    display: none !important; } }

@media (max-width: 499px) {
  .only-tablet {
    display: none !important; } }
@media (min-width: 960px) {
  .only-tablet {
    display: none !important; } }

@media (max-width: 959px) {
  .only-desktop {
    display: none !important; } }

@media (min-width: 960px) {
  .only-mobile-tablet {
    display: none !important; } }

@media (max-width: 499px) {
  .only-tablet-desktop {
    display: none !important; } }

.grid {
  overflow: auto; }

.col {
  display: block;
  float: left; }

.non_breaking_col {
  display: block;
  float: left; }

.span_1_of_12 {
  width: 8.333%; }

.span_2_of_12 {
  width: 16.666%; }

.span_3_of_12 {
  width: 25%; }

.span_4_of_12 {
  width: 33.333%; }

.span_5_of_12 {
  width: 41.666%; }

.span_6_of_12 {
  width: 50%; }

.span_7_of_12 {
  width: 58.333%; }

.span_8_of_12 {
  width: 66.666%; }

.span_9_of_12 {
  width: 75%; }

.span_10_of_12 {
  width: 75%; }

.span_11_of_12 {
  width: 83%; }

.span_12_of_12 {
  width: 100%; }

@media (max-width: 499px) {
  .grid .col {
    width: 100%; } }
body {
  background: #fdfdff; }

#everything {
  min-height: 100%;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0; }

#hamburger-lock {
  display: none; }

.top-notification {
  width: 100%;
  margin: 10px auto;
  background: #E1E1E1;
  color: #444;
  padding: 20px;
  margin-top: 30px;
  line-height: 1.4em; }
  @media (max-width: 959px) {
    .top-notification {
      width: 100%; } }
  .top-notification strong {
    font-weight: bold; }
  .top-notification a {
    text-decoration: underline; }
  .top-notification.no-email-notification {
    cursor: pointer; }

.header-push {
  height: 47px;
  clear: both; }

@media (min-width: 960px) {
  .layout-sidebar #everything {
    width: 950px;
    margin: 0 auto -103px auto; }

  .layout-nosidebar #everything {
    margin: 0 auto -103px auto; }
  .layout-nosidebar .colwrap {
    width: 950px;
    margin: 0 auto;
    margin-top: 30px; }

  #header-container {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0; }

  .mobile-sidebar {
    display: none !important; }

  .desktop-sidebar {
    float: left;
    width: 234px;
    margin-top: 30px; }

  #content {
    float: right;
    width: 705px;
    padding-top: 2.0em;
    padding-bottom: 2.0em; } }
@media (max-width: 959px) {
  .hamburger-button-wrap {
    position: absolute;
    top: 0px;
    height: 47px;
    left: 10px;
    width: 50px; }

  #hamburger-button {
    font-size: 29px;
    z-index: 1;
    color: #333333; }

  .desktop-sidebar {
    display: none !important; }

  .mobile-sidebar {
    display: none; }

  #content {
    width: 100%;
    margin-top: 2.0em;
    padding-bottom: 2.0em; }

  .hamburger-on #everything {
    position: fixed;
    top: 0; }
  .hamburger-on #footer-container {
    display: none; }
  .hamburger-on .mobile-sidebar {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    background-color: #363636;
    box-shadow: inset -16px 0px 15px -15px black;
    color: #f0f0f0;
    overflow-y: scroll; }
  .hamburger-on .hamburger-lock {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: transparent; } }
@media (max-width: 499px) {
  .hamburger-on .mobile-sidebar {
    width: 70%; }
  .hamburger-on #everything {
    left: 70%; } }
@media (min-width: 500px) and (max-width: 959px) {
  .hamburger-on .mobile-sidebar {
    width: 350px; }
  .hamburger-on #everything {
    left: 350px; } }
#brand-band {
  width: 100%; }
  #brand-band:after {
    content: ' ';
    display: block;
    position: absolute;
    top: 0px;
    left: 0;
    height: 5px;
    background: transparent;
    width: 100%;
    -webkit-box-shadow: inset 0 5px 2px -5px rgba(255, 255, 255, 0.7);
    -moz-box-shadow: inset 0 5px 2px -5px rgba(255, 255, 255, 0.7);
    box-shadow: inset 0 5px 2px -5px rgba(255, 255, 255, 0.7); }

.brand-hero {
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

.brand-avatar {
  position: absolute;
  display: block;
  left: 50%;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

@media (min-width: 960px) {
  #brand-band {
    height: 200px;
    position: absolute;
    top: 47px;
    left: 0px; }

  .brand-push {
    height: 200px; }

  .brand-hero {
    width: 950px;
    margin: 0 auto; } }
@media (min-width: 500px) {
  #brand-band {
    height: 200px; }

  .brand-hero {
    display: block;
    height: 200px;
    display: block; }

  .brand-avatar {
    margin-left: -35px;
    top: 50px;
    width: 70px;
    height: 70px; } }
@media (max-width: 959px) {
  #brand-band {
    position: relative;
    overflow: hidden;
    width: 100%; }

  .brand-hero {
    width: 100%; }

  .mode-selection {
    position: absolute;
    bottom: 5px;
    right: 5px;
    text-align: center;
    color: #b6b6b6; }

  .mode-selection .selected {
    color: #000; }

  .secondary {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    background-color: #f3f4f6;
    text-align: center;
    border-bottom: 1px solid #d3d3d3; }
    .secondary h1 {
      font-weight: normal;
      padding-top: 10px;
      padding-bottom: 10px;
      font-size: 1.93em; }
    .secondary p {
      font-size: 1em;
      width: 80%;
      margin: 0 auto;
      padding-bottom: 10px; } }
@media (max-width: 499px) {
  #brand-band {
    height: 115px; }

  .brand-hero {
    height: 115px;
    background-position: 50% 100%; }

  .brand-avatar {
    margin-left: -25px;
    top: 20px;
    width: 50px;
    height: 50px; } }
.hamburger-menu ul {
  padding: 0px;
  list-style-type: none; }
  .hamburger-menu ul li a {
    width: 100%;
    display: inline-block; }

@media (min-width: 960px) {
  .hamburger-menu ul {
    margin-left: -5px;
    color: #333333;
    line-height: 30px;
    font-size: 14px; }
    .hamburger-menu ul i {
      display: inline-block;
      line-height: 36px;
      font-size: 16px;
      width: 30px;
      text-align: center;
      position: absolute;
      top: 0px;
      left: 8px; }
  .hamburger-menu li {
    padding-left: 5px;
    margin-bottom: 3px;
    width: 220px;
    border: 1px solid transparent;
    position: relative; }
    .hamburger-menu li a {
      padding: 2px 5px 2px 36px; }
  .hamburger-menu li:hover,
  .hamburger-menu li.active {
    background-color: #fbfbfb;
    border: 1px solid #d5d5d5; }
  .hamburger-menu .divider {
    margin-top: 10px;
    margin-bottom: 30px; } }
@media (max-width: 959px) {
  .hamburger-menu ul {
    margin: 0px;
    padding: 0px 3%;
    padding-top: 20px; }
  .hamburger-menu li {
    margin: 5px 0px;
    width: 100%;
    position: relative; }
    .hamburger-menu li a {
      padding: 10px 5px 10px 38px; }
  .hamburger-menu li:hover,
  .hamburger-menu li.active {
    background-color: #3c3c3c; }
  .hamburger-menu i {
    line-height: 33px;
    display: inline-block;
    font-size: 22px;
    width: 40px;
    text-align: center;
    vertical-align: -2px;
    position: absolute;
    top: 0;
    left: 0; }
  .hamburger-menu .secondary-menu {
    padding-top: 10px;
    border-top: 1px solid #3c3c3c; }
    .hamburger-menu .secondary-menu i {
      color: #9a9a9a; }
  .hamburger-menu .divider {
    border-top: 1px solid #3c3c3c; } }
#user-box {
  position: relative;
  padding: 10px;
  font-weight: bold; }
  #user-box img {
    width: 49px;
    height: 49px;
    display: inline-block;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 0 none;
    -webkit-box-shadow: 0 0 0 2px white, 0 1px 1px 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 0 2px white, 0 1px 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 0 2px white, 0 1px 1px 2px rgba(0, 0, 0, 0.3);
    background: white; }
  #user-box div {
    position: absolute;
    top: 5px;
    left: 67px;
    display: block;
    width: 88px;
    height: 45px;
    margin: 5px;
    font-size: 13px;
    line-height: 1.3em; }
  #user-box a {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #a2a1a2;
    vertical-align: top; }

#header-container {
  width: 100%;
  height: 47px;
  line-height: 47px;
  color: #dfdfdf;
  background: #fff;
  border-bottom: 1px solid #dde1e5;
  position: absolute; }

@media (min-width: 960px) {
  #header {
    width: 940px;
    margin: 0 auto;
    position: relative; }
    #header .logowrap {
      display: inline-block;
      position: absolute;
      height: 45px;
      top: 0;
      left: 0;
      z-index: 5;
      text-align: center; }
    #header .brandlogo {
      display: inline-block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 5; }
    #header #logo {
      display: block;
      position: absolute;
      background: url("../img/logo2_x1.png?v=2") no-repeat 50% 50%;
      width: 64px;
      height: 18px;
      z-index: 5;
      left: 0px;
      top: 13px; }

  .right-top-menu {
    position: absolute;
    right: 4px;
    height: 47px;
    color: #333333; }
    .right-top-menu .orange-button {
      display: inline-block;
      line-height: 28px;
      padding: 0px 12px;
      border-radius: 3px;
      font-size: 13px;
      letter-spacing: 1px;
      text-transform: uppercase;
      border: #444 1px solid;
      color: #444; }
    .right-top-menu a {
      margin: 0px 10px; }
      .right-top-menu a i {
        vertical-align: -2px;
        font-size: 19px; } }
@media (max-width: 959px) {
  #header {
    position: relative; }
    #header .logowrap {
      display: inline-block;
      position: absolute;
      top: 0;
      left: 50px;
      right: 50px;
      height: 45px;
      z-index: 5;
      text-align: center; }
      #header .logowrap .brandlogo {
        vertical-align: middle; }
    #header #logo {
      display: inline-block;
      background: url("../img/logo2_x1.png?v=2") no-repeat 50% 50%;
      width: 150px;
      height: 45px; } }
    @media (max-width: 959px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 959px) and (min-resolution: 192dpi) {
      #header #logo {
        background: url("../img/logo2_x2.png?v=2") no-repeat 50% 50%;
        background-size: 74px 23px; } }

@media (max-width: 959px) {
  .right-top-menu {
    position: absolute;
    right: 4px;
    color: #333333; }
    .right-top-menu i {
      vertical-align: -2px;
      font-size: 19px;
      margin: 0px 9px; }
    .right-top-menu .top-search-cancel-btn {
      margin: 0px 10px;
      font-size: 16px; } }
/*
	To push the footer to the bottom on big screens
	http://ryanfait.com/sticky-footer/
*/
.footer-push {
  height: 103px;
  clear: both; }

#everything {
  min-height: 100%;
  height: auto !important;
  height: 100%; }

#footer {
  padding: 1.0em;
  background: #ffffff;
  border-top: 1px solid #c7cbcd;
  clear: both;
  text-align: center;
  line-height: 2.0em;
  color: #959da2; }
  #footer p {
    margin-bottom: 0.5em;
    font-weight: 100; }
  #footer a:hover {
    text-decoration: underline; }
  @media (min-width: 500px) {
    #footer {
      font-size: 1.0em; }
      #footer span {
        vertical-align: -5px;
        font-size: 34px;
        margin-left: 5px;
        margin-right: 5px; } }
  @media (max-width: 499px) {
    #footer {
      font-size: 1em; }
      #footer span {
        vertical-align: -3px;
        font-size: 25px;
        margin-left: 0px;
        margin-right: 0px; } }

@media (min-width: 500px) {
  .only-mobile {
    display: none !important; } }

@media (max-width: 499px) {
  .only-tablet {
    display: none !important; } }
@media (min-width: 960px) {
  .only-tablet {
    display: none !important; } }

@media (max-width: 959px) {
  .only-desktop {
    display: none !important; } }

@media (min-width: 960px) {
  .only-mobile-tablet {
    display: none !important; } }

@media (max-width: 499px) {
  .only-tablet-desktop {
    display: none !important; } }

#topSearch #top_search_results h2 {
  font-size: 20px;
  font-weight: normal;
  padding: 10px; }
#topSearch #top_search_results strong {
  font-weight: bold; }
#topSearch #top_search_results #top_search_loader {
  padding: 20px;
  text-align: center; }
#topSearch #top_search_results ul {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-top: 5px;
  margin-bottom: 5px; }
#topSearch #top_search_results li {
  padding: 10px;
  overflow: hidden;
  line-height: 1.5em;
  font-size: 0.9em; }
#topSearch #top_search_results li a img {
  max-width: 100%;
  max-height: 100%; }
@media (max-width: 959px) {
  #topSearch .search-overlay {
    position: fixed;
    z-index: 49;
    top: 47px;
    left: 0;
    width: 100%;
    height: 130%;
    background: rgba(255, 255, 255, 0.3); }
    .ie7 #topSearch .search-overlay, .ie8 #topSearch .search-overlay {
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi/P///3EGIGBigAKAAAMAOugDyAhZF4QAAAAASUVORK5CYII=") repeat; }
  #topSearch #top-search-form {
    position: absolute;
    z-index: 50;
    top: 47px;
    width: 100%;
    height: 50px;
    background-color: #fdfdff;
    border-bottom: 1px solid #dde1e5;
    border-top: solid 1px #dde1e5; }
    #topSearch #top-search-form .grey-box {
      position: relative;
      display: block;
      width: 90%;
      height: 31px;
      margin: 0 auto;
      margin-top: 9px; }
      #topSearch #top-search-form .grey-box input {
        display: block;
        width: 85%;
        height: 31px;
        border: none;
        outline: none;
        background: #fdfdff;
        border: solid 1px #fdfdff;
        font-size: 14px;
        margin: 0;
        padding: 5px;
        padding-left: 12px;
        color: #333333; }
      #topSearch #top-search-form .grey-box i {
        position: absolute;
        right: 5px;
        top: 0px;
        font-size: 20px;
        color: #14B1E7;
        line-height: 35px; }
  #topSearch #top_search_results {
    position: absolute;
    z-index: 50;
    top: 97px;
    width: 100%;
    background-color: #fdfdff;
    border-bottom: solid 1px #000;
    color: #212121; }
    #topSearch #top_search_results h2 {
      border-bottom: 1px solid #BFC2C4; }
  #topSearch .search_result_badge_image {
    display: block;
    float: left;
    width: 20%;
    max-height: 20%;
    text-align: center; }
  #topSearch .search_result_badge_details {
    display: block;
    float: left;
    width: 79%;
    padding-left: 10px; } }
@media (min-width: 960px) {
  #topSearch .search-overlay {
    position: fixed;
    z-index: 49;
    top: 0;
    left: 0;
    width: 100%;
    height: 130%;
    background: rgba(255, 255, 255, 0.3); }
    .ie7 #topSearch .search-overlay, .ie8 #topSearch .search-overlay {
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi/P///3EGIGBigAKAAAMAOugDyAhZF4QAAAAASUVORK5CYII=") repeat; }
  #topSearch #top-search-form {
    position: relative;
    z-index: 50;
    left: 120px;
    width: 240px;
    border-radius: 3px;
    top: -5px;
    height: 37px;
    background-color: #fdfdff;
    border: 1px solid #dde1e5; }
    #topSearch #top-search-form i {
      position: absolute;
      top: 0px;
      line-height: 31px;
      left: 211px;
      color: #14B1E7;
      font-size: 19px;
      display: inline-block;
      text-align: center; }
    #topSearch #top-search-form input {
      display: block;
      width: 200px;
      height: 37px;
      border: none;
      outline: none;
      background: #373737;
      background: transparent;
      font-size: 14px;
      margin: 0;
      padding: 5px;
      padding-left: 12px;
      color: #333333; }
    #topSearch #top-search-form input::-webkit-input-placeholder,
    #topSearch #top-search-form input:-moz-placeholder,
    #topSearch #top-search-form input::-moz-placeholder,
    #topSearch #top-search-form input:-ms-input-placeholder {
      color: #efefef; }
  #topSearch #top_search_results {
    color: #000;
    position: absolute;
    z-index: 50;
    left: 2px;
    top: 100%;
    width: 400px;
    background: #FFF;
    border: 1px solid #bfc2c4;
    -webkit-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.35);
    box-shadow: 0 1px 30px rgba(0, 0, 0, 0.35); }
    #topSearch #top_search_results h2 {
      border-bottom: 1px solid #bfc2c4; }
  #topSearch .search_result_badge_image {
    display: block;
    float: left;
    width: 50px;
    height: 50px;
    text-align: center; }
  #topSearch .search_result_badge_details {
    display: block;
    float: left;
    width: 300px;
    padding-left: 10px; }
  #topSearch li:hover {
    background-color: #e9eaeb; }
  #topSearch li a {
    display: block;
    color: #000; } }

/*
   Note:
   This sheet won't be included on dialog iframes.
   Only put stuff here that is specific to BBQ (basno.com)
*/