/* typography */
html {
	font-family: 'Source Code Pro', monospace;
	color: #686868;
}


/* header */
header {
	width: auto;
	margin: 0 auto;
}

header img.dada-hand {
	width: 100%;
	height: 100%;
}

.preamble {
	text-align: center;
	margin: 0 auto 20px auto;
	max-width: 500px;
}

.preamble h1,
.preamble h5 {
	margin: 0 0 15px 0;
}

.preamble h1 {
	width: 500px;
	position: relative;
	left: 50%;
	margin-left: -250px;
}

.preamble p {
	text-align: left;
	padding: 5px 25px;
}

.preamble .source {
	display: inline-block;
	margin-bottom: 15px;
}

/* tweets */
div#latestTweet {
	width: 450px;	
	margin: 0 auto;
}

#latestTweet ul li {
	width: 450px;
	float: left;
	border-top: 1px dotted #686868;
	padding: 20px 0;	
}

#latestTweet .user {
	width: 450px;
	float: left;
	margin-bottom: 5px;
	position: relative;
}

#latestTweet a {
	text-decoration: none;
	word-wrap: break-word;
}

#latestTweet a > span {
	word-wrap: break-word;
	max-width: 450px;
}

#latestTweet .user a {
	float: left;
}

#latestTweet .user a img {
    border-radius: 50%;
    display: inline-block;
    float: left;
    box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.3);
}

#latestTweet span {
	display: inline-block;
	padding: 1px 5px;
}

#latestTweet .user a span {
	width: 350px;
	float: left;
}

#latestTweet .user a span > span {
	padding: 0;
}

#latestTweet .user a span span[title="Verified Account"] {
	width: auto;
	position: absolute;
	top: -3;
	left: 33px;
	z-index: 2;
	color: #fff;
	background-color: #55acee;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	text-align: center;
}

#latestTweet p.tweet {
	float: left;
	margin-bottom: 10px;
}

#latestTweet p.timePosted {
	float: left;
}

#latestTweet p.interact {
	float: right;
}

#latestTweet .interact a.twitter_reply_icon,
#latestTweet .interact a.twitter_retweet_icon {
	margin-right: 10px;
}

#latestTweet .interact a.twitter_reply_icon:after,
#latestTweet .interact a.twitter_retweet_icon:after {
	content: "/";
	display: inline-block;
	position: absolute;
}


#latestTweet .media {
	float: left;
}

#latestTweet .media > img {
	width: 450px;
}

/* footer */
footer {
	clear: both;
	width: 100%;
}

footer p {
	text-align: center;
	padding: 20px 0;
}

footer p span {
	font-size: 28px;
	line-height: 11px;
	position: relative;
	top: 4px;
}

/* begin up to portrait iphone6plus ----------- */
@media only screen and (max-width : 450px) {

/* header */
header {
/*
	width: 450px;
	position: relative;
	left: 50%;
	margin-left: -225px;
*/
}

header img.dada-hand {
/*
	width: 450px;
	height: 242px;
*/

}

.preamble {
	max-width: 100%;
}

/* tweets */
div#latestTweet {
	width: auto;	
}

#latestTweet ul li {
	width: auto;
	padding-left: 5px;
	padding-right: 5px;
}

#latestTweet .user {
	width: auto;
}

#latestTweet a > span {
	max-width: 100%;
}

#latestTweet .user a span {
	width: 250px;
}

#latestTweet .media > img {
	width: 100%;
}

}
/* end up to portrait iphone6plus ----------- */