<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Flickr - Bad, bad panda! Come on. We want photos.</title>
		<style>
		
		header {
			display:block;
			position:absolute;
			top:0;
			left:0;right:0;
			height:50px;
			background: -moz-linear-gradient(top,  rgba(0,0,0,0.87) 0%, rgba(79,79,79,1) 99%); /* FF3.6+ */

			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.87)), color-stop(99%,rgba(79,79,79,1))); /* Chrome,Safari4+ */

			background: -webkit-linear-gradient(top,  rgba(0,0,0,0.87) 0%,rgba(79,79,79,1) 99%); /* Chrome10+,Safari5.1+ */

			background: -o-linear-gradient(top,  rgba(0,0,0,0.87) 0%,rgba(79,79,79,1) 99%); /* Opera 11.10+ */

			background: -ms-linear-gradient(top,  rgba(0,0,0,0.87) 0%,rgba(79,79,79,1) 99%); /* IE10+ */

			background: linear-gradient(to bottom,  rgba(0,0,0,0.87) 0%,rgba(79,79,79,1) 99%); /* W3C */

			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#de000000', endColorstr='#4f4f4f',GradientType=0 ); /* IE6-9 */

			
		}
		
		#header-logo {
			text-indent: -9999px;
			display: block;
			position: absolute;
			left: 0;
			height: 51px;
			width: 96px;
			background-position: center center;
			background-image: url(http://l.yimg.com/g/images/flickr_logo_small_white.png);
			background-image: -webkit-image-set(url(http://l.yimg.com/g/images/flickr_logo_small_white.png) 1x,url(http://l.yimg.com/g/images/flickr_logo_large_white.png) 2x);
			background-repeat: no-repeat;
		}
		
		#header-logout {
			color:white;
			position:absolute;
			top:0;
			right:0;
			height:50px;
			width:100px;
			padding:15px;
			text-align:right;
			cursor: pointer; cursor: hand;
			display:none;
		}
		
		#header-logout a {
			color:white;
		}
		
		body {
			margin:0; padding:0; 
			font-family: "Helvetica Neue", helvetica, arial, sans-serif; 
			font-weight:300;
			color: #000;
			overflow:hidden;
			height:100vh;
			width:100vw;
		}

		#bg {
			transition:width 2s;
			min-width: 600px;
			min-height: 445px;
			height:100vh;
			width:100vw;
			background-size: cover;
			background-color:white;
			background-image:url('http://l.yimg.com/g/images/Panda_XL.jpg');
			background-repeat:no-repeat;
			background-position:center center;
		}

		.content {
			position: absolute;
			top:20vh;
			width:3%;
			right:3vw; 
			z-index: 1;
			padding: 10px;
			width:44%;
			width:44vw;
			min-width:525px;
		}

		.content span {
			line-height: 1.6em;
			font-size: 17px;
		}

		h1 {
			margin: 0;
			font-weight: 300;
			font-size: 44px;
			margin-bottom: 24px;
		}

		a.attribution {
			position: absolute;
			bottom: 0;
			right: 10px;
			background-color: #000;
			background: rgba(0,0,0,0.45);
			font-size: 11px;
			padding: 7px 13px;
			color: #dfdfdf;
		}

		.the-error {
			position:absolute;
			bottom:60px;
			background:rgba(0,0,0,.7);
			border-radius:3px;
			color:#0F0;
			padding:1em;
			width:100%;
			margin:0 auto;
		}
		.the-error pre {margin:0}
		
		#the-gif {
			position:absolute;
			bottom:20px;
			right:150px;
			height:100px;
			border-radius:3px
		}
		
		@media all and (max-width: 1600px) {
			#bg {
				background-image: url('http://l.yimg.com/g/images/Panda_L.jpg');
			}
		}
		
		@media all and (max-width: 941px) {
			h1 {
				font-size: 1.5em;
				margin-bottom: 5vw;
			}
			
			.content {
				top:40px;
				right:15vw; 
				margin:20px auto 0 auto; 
				width:auto;
				min-width:20px;
			}
			
			#the-gif {display:none;}
			
			.the-error {
				position:absolute;
				bottom:60px;
				background:rgba(0,0,0,.7);
				border-radius:3px;
				color:#0F0;
				padding:10px;
			}
		}
		
		@media all and (max-width: 667px) {
			
			#bg {
				background-position:right bottom;
			}
		}
		
		</style>
		<!--[if lt IE 10]>
			<style>
			
			#bg {
				background-position:center center;
				height:1000px;
			}
			.the-error {
				background:rgb(0,0,0);
			}
			.content {
				margin:60px 20px 0 50%;
				width:700px;
			}
			
			</style>
		<![endif]-->
    </head>
    <body>
		<header>
			<span id="header-logo"></span>
			<span id="header-logout"><a href="/logout.gne">Sign out</a></span>
			<script> // Dont judge me!
			
			var raw_cookie = document.cookie.split(';'),
			    cooked     = null;
	
			for(var i=0; raw_cookie.length > i; i++) {
				cooked = raw_cookie[i].split('=');
				if(cooked[0].replace(/^\s+/, '') === 'cookie_accid' && cooked[1].length) {
					document.getElementById('header-logout').style.display="block";
				}
			}
			
			</script>
		</header>
		<div id="bg">
		<a class="attribution" href="/photos/toyokazu/8644384737/">by Toyokazu</a>
		<div class="content">	
			<h1>Bad, bad panda!<br/>Come on. We want photos.</h1>
								<span>We&#8217;re aware of the problem and are fixing it. Thanks for your patience.</span>
						</div>
		
		    </body>
</html>
