Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----

.masthead {
    width: 768px;
    
    &.masthead-theme-standard {
        background-color: #fff;
    }

    &.in-story {
        position: fixed;
    }

    .lt-ie8 & {
        width: 315px; // ie7 min-width
    }

    // responsive

    .viewport-small-10 & {

        .flyout-panel {

            .search-input {
                width: 270px;
            }

        } // end flyout-panel

    } // end viewport-small-10

    // 765
    .viewport-medium-10 & {

        // hopefully 3.4 selector functions will fix this
        @at-root .lt-ie8.viewport-medium-10 .masthead {
            width: 100%; // undo 768 initial width
        }

        .flyout-panel {

            .search-input {
                width: 495px;
            }

        } // end flyout-panel

        &.in-story {

            .notifications-button {
                display: none;

                &.new {
                    display: inline-block;
                }

            } // end notifications-button

        } // end theme-in-story

    } // end viewport-medium-10

} // end masthead-theme-standard

SassMeister-output.css

.masthead {
  width: 768px;
}
.masthead.masthead-theme-standard {
  background-color: #fff;
}
.masthead.in-story {
  position: fixed;
}
.lt-ie8 .masthead {
  width: 315px;
}
.viewport-small-10 .masthead .flyout-panel .search-input {
  width: 270px;
}
.lt-ie8.viewport-medium-10 .masthead {
  width: 100%;
}
.viewport-medium-10 .masthead .flyout-panel .search-input {
  width: 495px;
}
.viewport-medium-10 .masthead.in-story .notifications-button {
  display: none;
}
.viewport-medium-10 .masthead.in-story .notifications-button.new {
  display: inline-block;
}