/* Here we go. */
/* change css based on width */

/* iphone */
@media only screen and (max-device-width: 480px) {
	#unnecessary li {
		position: absolute;
	}
}

/* ipad */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) {
	#unnecessary li {
		position: absolute;
	}
}

@media screen and (min-width: 480px) {
	
	#wrap  {
		margin-left: 0;
	}

	#unnecessary {
		display: block;
	}
	
	h1 {
		line-height: 176px;
		font-size: 120px; 
		height: 130px;
	}

	h1 a {
		text-decoration: none;
		letter-spacing: -11px;
	}
	
	h1 a em {
		font-size: 26px;
		line-height: 75px; 
		width: 95%;
		top: 30px;
		display: block;
	}
	
	li#nav-home a,
	li#nav-home a:active {
		padding-left: 80px;
	}
	body {
		padding-top: 50px;
	}
	
	#day,
	#year {
		display: block;
	}
	#content {
		margin-left: 70px;
	}
	
	#navigation li a {
		font-size: 18px;
	}
	
	#navigation {
		height: 55px;
	}
	
	.meta p {
		margin: 0;
		float: right;
	}

	#article,
	#comments {
		margin-top: 0;
	}
	
	.article #content {
		padding: 0 20px 30px 10px;
	}
	
}
@media screen and (min-width: 600px) {
	
	h1 {
		line-height: 220px;
		font-size: 159px; 
		height: 160px;
	}

	h1 a {
		text-decoration: none;
		letter-spacing: -15px;
	}
	
	h1 a em {
		font-size: 30px;
		line-height: 75px; 
		width: 97%;
		top: 52px;
		display: block;
	}
	
	#navigation {
		padding: 10px 0;
		height: 55px;
	}

	
	#year {
		padding-left: 60px; 
	}
	
	#year h3 {
		display: block;
	}
	
	#day h3 {
		display: block;
	}
	
	.meta ul {
		display: block;
	}
	
	.meta p {
		margin: 0 40px 0 0;
	}
	
	#article,
	#comments {
		padding: 36px 40px 18px;
		padding-bottom: 0;
	}
	
	#article h3 {
		padding: 18px 40px;
		margin: 36px -40px 18px;
	}
	
	#about {
		margin: 0 40px 30px 10px;
	}
	
	#footer {
		padding: 20px 0 25px 130px;
	}
	#footer li {
		white-space: nowrap;
	}
	
	#author {
		margin: 20px 120px 20px 0;
		padding: 10px 60px 1px 20px;
	}
	
	#author img {
		right: -120px;
		top: 10px;
		left: auto;
	}
	
	#related ul li {
		padding: 10px 1% 0 0;
		margin: 0;
		display: inline-block;
		width: 48%;
	}
	
	p.image img {
		margin-left: -10px; 
		border: 10px solid rgba(255, 255, 255, .75);
	}

}
@media screen and (min-width: 768px) {

	h1 {
		line-height: 232px;
		font-size: 194px; 
		height: 160px;
	}

	h1 a {
		text-decoration: none;
		letter-spacing: -15px;
	}
	
	h1 a em {
		font-size: 34px;
		line-height: 75px; 
		width: 97%;
		top: 50px;
		display: block;
	}
	
	h2 {
		font-size: 36px;
		line-height: 40px;
		padding: 10px 0;
	}

	#navigation {
		padding: 20px 0;
		height: 55px;
	}

	li#nav-home a,
	li#nav-home a:active {
		padding-left: 100px;
	}

	#year ul li.pre4,
	#year ul li.pre5,
	#year ul li.pre6,
	#year ul li.pre7 {
		display: block;
	}
	
	#day {
		top: 186px;
	}
	
}
@media screen and (min-width: 980px) {
	#wrap {
		width: 970px;
	}
	#content {
		width: 900px;
		float: left;
		margin-top: 0;
	}
	
	#about {
		width: 200px;
		margin-bottom: 20px;
		margin-right: 30px;
		float: right;
		clear: none;
	}
	
	#year ul li.pre {
		display: block;
	}
	
	h1 {
		line-height: 250px;
		font-size: 210px; 
		height: 170px;
		padding-left: 75px;
	}

	h1 a {
		letter-spacing: -15px;
		margin-top: -45px;
	}
	
	h1 a em {
		font-size: 36px;
		line-height: 75px; 
		letter-spacing: 0;
		position: absolute;
		width: 880px;
		top: 55px;
	}
	
	#day {
		top: 190px;
	}
	
	.article #content {
		width: 860px;
		padding: 0 30px 30px 10px;
	}
	
	#author {
		width: 180px;
		padding: 80px 20px 1px;
		margin-top: 100px;
		margin-bottom: 20px;
		position: relative;
		clear: none;
		float: none;
	}
	
	#author img {
		top: -100px;
		left: 10px;
		right: auto;	
	}
	
	#related {
		width: 180px;
		padding: 20px 20px 1px;
		clear: none;
	}
	
	#related ul li {
		width: 180px;
		padding: 10px 0;
		margin: 0;
		display: block;
	}
	
	#article {
		padding: 36px 40px 18px;
		padding-bottom: 0;
		width: 540px;
		float: right;
		margin-top: 0;
	}
	
	.meta {
		float: right;
		width: 620px;
		position: relative;
	}
	
	.meta h2 {
		padding-left: 40px;
	}
	
	.meta ul {
		margin: 0 0 0 40px;
	}
	
	.meta h2 strong {
		left: -50px;
		top: 0;
	}
	
	.author h2 {
		width: 540px;
		float: right;
		margin-bottom: 10px;
	}
	
}