body > .notifications
{
    position: fixed;
    z-index: 10;
    bottom: 0;
    left: 0;
    right: 0;

    .notification
    {
        position: relative;
        padding: steps(1) steps(2) steps(0.5);

        @include for-at-least-normal-tablets
        {
            padding: steps(2) steps(4) steps(1);
        }

        p
        {
            @include small-text;

            margin-bottom: 0;
        }

        a
        {
            text-decoration: underline;
        }

        &.message-sent
        {
            @include inverted($background-color: $color-alert, $text-color: $color-text-inverted-lighter);

            p
            {
                text-align: center;
            }
        }
    }
}

body > .browser-notification
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: steps(19.5);
	text-align: center;
	text-transform: uppercase;
	z-index: 1500;
	background-color: $color-brand-normal;
	color: $color-background-lightest;

	h1
    {
		font-size: 25px;
		line-height: 25px;
		margin: 30px 0 10px;
	}

	p
    {
		font-size: 14px;
		line-height: 20px;
		margin: 0;
	}

	.update
    {
		display: block;
		position: relative;
		padding: 10px 20px;
		margin: 30px auto 0;
		width: 230px; /*need for IE*/
		color: $color-background-lightest;
		text-decoration: none;
		border: 1px solid $color-background-lightest;
		cursor: pointer;

		&:hover
        {
			color: $color-brand-normal;
			background-color: $color-background-lightest;
		}
	}

	* html &
    {
		position: absolute;
	}
}
