/* CSS Document */

 @import url(reset.css);
 @import url(typography.css);

* {
	margin:0;
	padding:0;
	}

html, body{
	height:100%;
	}
	
body{
	background-color:#009999;
	}
	
#distance {
	width:1px;
	height:50%;
	margin-bottom:-180px; /* half of container's height */
	float:left;
	}

#container {
	margin:0 auto;
	position:relative; /* puts container in front of distance */
	text-align:left;
	height:360px;
	width:630px;
	clear:left;
	background:url(img/cont-bg.png) center bottom;
	border:4px solid #fff;
	line-height:1.6;
	}
	
#header h1{
	display:block;
	margin:20px 0 0 25px;
	font-size:2em;
	color:#009999;
	}
	
#content a.mobile{text-decoration: none; font-weight:bold;}


#content{
	display:block;
	width:310px;
	margin:0 0 0 25px;
	top:10px;
	right:10px;
	}
	
	#footer{
		color:#FFF;
		text-align:left;
		font-weight:bold;
		padding-top:120px;
		padding-left:245px;
		font-size:12px;
		}
	
.clear{clear:both;}

@media only screen and (max-width: 680px) {
#distance {
			display:none;
	}

		#container {
		margin:2em auto;
		position:relative; /* puts container in front of distance */
		text-align:left;
		height:auto;
		width:90%;
		max-width:456px;
		clear:left;
		background:url(img/cont-bg-mob.png);
		background-size:100%;
		background-position: bottom center;
		background-repeat: no-repeat;
		background-color: #fff;

		border:4px solid #fff;
	}

	#content{
	display:block;
	width:90%;
	max-width:456px;
	margin:0 0 20% 25px;
	top:10px;
	right:10px;
	}

	a{line-height:2.5;}

		
	}