@import url(https://fonts.googleapis.com/css?family=Roboto:300);
 html, body {
	 padding: 0;
	 margin: 0;
	 font-family: Roboto;
	 background-color: #eee;
}
 section {
	 position: relative;
	 width: 400px;
	 background-color: #fff;
	 box-shadow: 0px 2px 10px rgba(0, 0, 0, .3);
	 overflow: hidden;
	 margin: 20px auto;
	 border-radius: 2px;
}
 .header {
	 width: 100%;
	 height: 250px;
	 background-color: #3498db;
	 overflow: hidden;
}
 .header .circle {
	 position: relative;
	 top: 20px;
	 left: 60px;
	 width: 50px;
	 height: 50px;
	 background-color: #f1c40f;
	 box-shadow: 0px 3px 3px rgba(0, 0, 0, .3);
	 border-radius: 50%;
	 z-index: 10;
}
 .header h1 {
	 position: relative;
	 top: 10px;
	 left: 110px;
	 font-size: 2.5em;
	 color: #fff;
	 border-bottom: 1px solid #f1c40f;
}
 .line {
	 position: absolute;
	 z-index: 0;
	 top: 50px;
	 left: 85px;
	 height: calc(100% + 200px);
	 width: 0px;
	 border-right: 1px solid #f1c40f;
}
 #content {
	 width: 100%;
	 height: 700px;
	 overflow: hidden;
	 padding-top: 20px;
	 overflow-y: auto;
	 overflow-x: hidden;
}
 #content::-webkit-scrollbar {
	 width: 6px;
	 background-color: #ebebeb;
}
 #content::-webkit-scrollbar-thumb {
	 background-color: #ccc;
}
 #content .object {
	 width: 100%;
}
 #content .object:after {
	 content: "";
	 display: block;
	 height: 0;
	 clear: both;
}
 #content .object .date {
	 float: left;
	 width: 40px;
	 height: 40px;
	 margin: 20px;
	 background-color: #f1c40f;
	 color: #fff;
	 border-radius: 10px;
	 text-align: center;
	 line-height: 1.9em;
	 font-size: 1.4em;
}
 #content .object .circle {
	 position: relative;
	 float: left;
	 z-index: 10;
	 margin: 30px 0 0 -5px;
	 width: 20px;
	 height: 20px;
	 background-color: #3498db;
	 border-radius: 50%;
}
 #content .object .context {
	 float: left;
	 color: #666;
	 width: 250px;
	 min-height: 40px;
	 margin: 10px 0 10px 0px;
	 padding: 20px;
	 line-height: 1.5em;
}