<div class="environment @Server.Environment.ToString().ToLower()">
  @Server.Environment.ToString().ToUpper() ENVIRONMENT
</div>
<style>
	.environment {
		display: block;
		position: absolute;
		width: 100%;
		padding: 5px 0;
		font-weight: bold;
		text-align: center;
		color: #fff;
	}

	.environment.local {
		background-color: #56ca85;
	}

	.environment.development {
		background-color: #000dbe;
	}

	.environment.test {
		background-color: #be5500;
	}

	.environment.production {
		display: none;
	}
</style>

<script type="text/javascript">
  $(document).ready(function () {
    if ($(".development").length || $(".test").length || $(".local").length) {
      setTimeout("HideEnvironment('.environment')", 2000);   
      $(".title").mouseenter(function () {
        ShowEnvironment();
      })
        .mouseleave(function(){
        HideEnvironment(".environment");
      });
    }
  });

  function ShowEnvironment() {
      $(".environment").stop().animate({
          height: '22px',
          padding: '5px 0px',
          'text-indent': '-0px'
      }, 400);
  }

  function HideEnvironment(selector) {
      $(selector).stop().animate({
          height: '2px',
          padding: '0px 0px',
         'text-indent': '-9999px'
      }, 400);
  }
</script>