@media only screen and (max-width: 800px) {
  .default_product {
    margin-right:0;
  }

  #user_utility #user_profile_action {
    max-width: 1px;
    width:1px;
    background-position: 50% center;
    padding-right:30px;
    padding-left: 15px;
    text-indent:666em;
    margin-left:0;
    margin-right:20px;
  }

  #user_utility #user_product_action {
    background-position: 50% center;
    width: 30px;
    padding-right: 0;
    text-indent: 666em;
  }

  #user_product_list {
    left: -170px;
  }

  #user_profile_list {
    left:-60px;
    right: auto;
  }

  #settings_utility a#settings_snapshot {
    background-position:center center;
    text-indent:666em;
    overflow:hidden;
    white-space:nowrap;
    width:15px;
    padding:6px 15px 4px 15px;
  }
}

@media only screen and (max-width: 940px) {
  header h2 {
    font-size: 22px;
    margin-left: 65px;
  }

  #subnav ul li {
    margin:0 1.5vw;
  }
}

@media only screen and (max-width: 1584px) {
  div.weather_daily .weather_daily_content .weather_daily_models .weather_daily_model {
    margin: 0 1.5vw 1.2vh 1.5vw
  }
}

@media only screen and (max-width: 1184px) {
  div.weather_report .weather_image_days {}
  div.weather_report .weather_image_days .weather_image_day+.weather_image_day {
    margin-left: 1.5vw
  }
}

@media only screen and (max-width: 1684px) {
  .date_range_start {
    width: 60%;
    margin: 0 auto;
    float: none
  }
  .date_range_end {
    width: 60%;
    margin: 10px auto 0 auto;
    float: none
  }
}

@media only screen and (min-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: 20px;
  }
}

@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 60px;
    width: 60px;
    right: 30px;
    bottom: 30px;
  }
}

/*
 * Changes layout for viewports less than 1280px
 * - Gutter drops to bottom
 * - Date ranges are resized
 */

@media only screen and (max-width: 1693px) {
  /*
  div.content_with_sidebar_and_gutter { width:79% }
  div.sidebar_collapsed + div.content_with_gutter  {width:100%; min-width:960px}
  div.weather_product {min-width:1024px}
  */
}

/*
 * Change layout for viewports less than 960px
 * - Shrink header and logo
 * - Drop all block elements into vertical layout
 * - Squeeze images into max-width of viewport *
 */

@media only screen and (min-device-width: 319px) and (max-device-width: 960px) {
  header {
    height: 40px;
    min-width: 0px
  }
  #settings_utility {
    margin: 3px 10px 0 0;
  }
  header h1.logo {
    margin-top: 5px;
    background-size: 60px auto;
    background-position: center center;
    width: 74px;
  }
  header h1.logo a {
    width: 74px;
  }
  header h2 {
    margin: 5px 10px 0px 15px;
    font-style: italic;
    font-size: 14px;
    line-height: 20px;
    max-width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-right: 0;
    background: none;
  }
  #user_utility {
    height: 22px;
    height: 30px;
    margin: 0 20px 0 0;
  }
  #user_utility a {
    padding: 6px 12px;
    font-size: 16px
  }
  #user_utility #user_product_action {
    padding: 0 12px;
    margin: 0
  }
  #user_utility #user_profile_action {
    background-position: 90% 3px
  }
  #user_product_list {
    right: auto;
    left: 0px;
    top: 26px
  }
  #user_utility #user_product_action {
    background-image: none
  }
  div.weather_report_product div.forecast_section div.image_section_thumbnails {
    width: 100%
  }
  #application_error {
    width: 280px
  }
  div.weather_product {
    min-width: 0px;
    position: relative;
  }
  div.sidebar {
    display: block;
    width: 100%;
    min-height: 0;
    max-width: none
  }
  div.content {
    clear: left;
    width: 100%;
    min-width: 0;
    min-height: 0
  }
  div.tabs>ul {
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden
  }
  div.tabs>ul>li {
    width: 75px;
    overflow: hidden;
    font-size: 10px;
    line-height: 12px
  }
  div.tabs>ul>li+li {
    margin-left: 1%
  }
  div.tabs>ul>li>a {
    padding: 8px 4px;
    display: block
  }
  div.tabs div.tab {
    min-height: 0;
    overflow: auto
  }
  div.gutter {
    clear: left;
    display: block;
    width: 100%;
    border-top: 1px solid #DDD
  }
  span.custom_input input {
    opacity: 1 !important
  }
  span.custom_input span.checkbox, span.custom_input span.radio {
    display: none !important
  }
  .model_image {
    padding: 0
  }
  .model_image .image_options {
    width: 100%
  }
  .model_image .image_thumbs {
    width: 100%
  }
  .model_image>img {
    width: 100%;
    height: auto
  }
  .data_options {
    width: 100%
  }
}