/**
 * HTML part
 */
<!--[if IE 7]>
      <div id="ie-notification" class="hidden">
        <div class="container">
          <p><b>Your browser seems to be a bit out of date.</b> To view this website properly, please upgrade your browser.</p>
          <a href="http://browsehappy.com/" class="button btn-primary" target="_blank">Upgrade</a> <a href="#" id="dismiss-ie-note">Don't show this again</a>
        </div>
      </div>
    <![endif]-->
 
/**
 * SCSS part
 */
 
$ie-notification-height: 63px;
$ie-notification-bg-color: #f8f3d0;
 
.ie7.oldie body {
        padding-top: $header-height + $ie-notification-height;
    }
#ie-notification {
    background: $ie-notification-bg-color;
    color: $base-color;
 
    .container {
        height: $ie-notification-height;
        line-height: $ie-notification-height;
 
        p,
        a {
            margin-right: 20px;
            @include inline-block;
        }
        #dismiss-ie-note {
            background: sprite($sprite-notification, cancel, 0px, 23px) no-repeat;
            padding: 0 0 0 25px;
            font-weight: 700;
            margin: 0;
        }
    }
}
 
 
 
/**
 * jQuery part -- on DOM ready event...
 */
$(function() {
 
    //DISMISS IE NOTIFICATION and SET COOKIE
    if ( $.cookie('ie7note') != 1) {
        $("#ie-notification").removeClass('hidden');
    }
    $("#dismiss-ie-note").click(function() {
        $("#ie-notification").slideUp("slow"); //create effect
        $("body").addClass("regular");
        $.cookie('ie7note', 1);
    });
});