@charset "utf-8";

/* === General stuff === */

html, body{
	height:100%;
	background:#186aa9 url(../images/sky-background.png) top repeat-x;	
	overflow:hidden;
	padding:0;
	margin:0;
	font-family:Arial, Helvetica, sans-serif;
	margin-top: 5px;
}

.footer{
	display: none;
}

a{
	color:#3680b1;	
}

img, a img{
	border:0px none;	
	outline:none;
}

/* === Main Section === */

#wrapper{	
	width:980px;
	margin:0px auto;
	position:relative;
	height:100%;
	background:url(../images/sky-shine.jpg) top left no-repeat;
}

div.top-left{
	position:absolute;
	right:0px;
}

div.not-found-text{
	position:absolute;
	top:35px;
	right:0px;
	width:430px;
}

h1.not-found-text{
	font-size:50px;
	color:#fff;
	letter-spacing:2px;
	margin-bottom:20px;
}

div.graphic{
	position:absolute;
	top:80px;
	left:0px;
}

div.planet{
	position:absolute;
	bottom:-720px;
	margin:0px auto;
	z-index:0;
}

div.planet>img{
	width:960px;
}

div.dog-wrapper{
	position:absolute;
	top:45px;
	left:440px;
}

div.dog{
	position:absolute;
	bottom:0px;
	left:0px;
	width:80px;
	height:80px;
	z-index:999;
	background:url(../images/dog1.png) 0px 0px no-repeat;
}

div.dog-bubble{
	font-size:18px;
	line-height:1.5;
	font-style:italic;
	height:179px;
	width:246px;
	background:url(../images/bubble.png) top center no-repeat;
	padding:20px 0px;
	position:absolute;
	bottom:0px;
	left:30px;
	z-index:999;
	opacity:0;
	color:#555555;
	text-shadow:1px 1px 0 #ffffff;
}

div.dog-bubble>p{
	text-align:center;
	padding:0px 35px;	
}

div.bubble-options{
	opacity:0;
	visibility:hidden;
	display:none;
}

/* === Responsive === */

/* #Small laptop screens
================================================== */

    @media only screen and (max-width: 960px) {
    	#wrapper{
    		width:600px;
    		background-image:none;
			margin-top: 50px;
    	}

        div.planet{
			position:absolute;
			bottom:-300px;
			margin:0 auto 0 -280px;
			z-index:0;
			left:50%;
			
		}

		div.planet>img{
			width:560px;
		}

		div.dog-wrapper{
			position:absolute;
			top:30px;
			left:250px;
			
		}

		div.graphic{
			position:absolute;
			top:50px;
			left:40px;
			
		}

		div.top-left {
		    position: absolute;
		    right: 0px;
		    top: -40px;
		}

		div.graphic>img{
			width:60%;
		}

		div.graphic{
			left: 0px;
		    position: absolute;
		    top: 20px;
		}

		div.not-found-text{
			right:0px;
			top:22px;
			width:320px;
		}

		h1.not-found-text{
			font-size:35px;
		}

    }


/*  #Tablets and small screens
================================================== */

    @media only screen and (max-width: 767px) {
        
    	#wrapper{
    		width:400px;
    		background-image:none;
    	}

    	div.graphic>img{
			width:40%;
		}

        div.planet{
			position:absolute;
			bottom:-170px;
			margin:0 auto 0 -180px;
			z-index:0;
			left:50%;
			
		}

		div.planet>img{
			width:360px;
		}

		div.dog-wrapper{
			position:absolute;
			top:30px;
			left:150px;
			
		}

		div.graphic{
			position:absolute;
			top:20px;
			left:0px;
			
		}

		div.top-left {
		    position: absolute;
		    right: 390px;
		    top: 170px;
		}

		h1.not-found-text {
		    font-size: 26px;
		}

		div.not-found-text {
		    right: -60px;
		    top: 33px;
		    width: 270px;
		}

		div.top-left {
		    position: absolute;
		    right: 0;
		    top: -38px;
		}

    }


/* #Mobile phones
================================================== */

    @media only screen and (max-width: 479px){
        
    	#wrapper{
    		width:320px;
    		background-image:none;
    	}

		h1.not-found-text {
		    font-size: 20px;
		    text-align: center;
		}

		div.not-found-text {
		    right: 20px;
		    top: 210px;
		}

    	div.graphic>img{
			width:100%;
		}
		

        div.planet{
			position:absolute;
			bottom:-70px;
			margin:0 auto 0 -100px;
			z-index:0;
			left:50%;
			
		}

		div.planet>img{
			width:200px;
		}

		div.dog-wrapper {
		    left: 70px;
		    position: absolute;
		    top: 26px;
		}

		div.dog-bubble{
			font-size:10px;
			line-height:1.5;
			font-style:italic;
			height:107px;
			width:147px;
			background:url(../images/bubble.png) top center no-repeat;
			background-size: contain;
			padding:10px 0px;
			position:absolute;
			bottom:0px;
			left:55px;
			z-index:999;
			opacity:0;
			color:#555555;
			text-shadow:1px 1px 0 #ffffff;
		}
    }