src/scss/ddgc/_blog.scss
/* styling for the DuckDuckGo Blog, and some styling for the forums */

.blog-content { 
	width: 72%;
	float: left;
	position: relative;
}		
	.blog-content h2 { 
		color: #3363b3;
		font-weight: bold; 
		font-size: 2.3em; 
		line-height: 1.05;
	}

	.blog-content .post-meta, .post-meta, .author-meta { 
		display: block;
		color: #727b88;
		line-height: 1;
		margin: 14px 0 20px;
	}
	.forum-title .post-meta { margin-top: 6px; }
		.post-meta .user-info, .author-meta .user-info {
			display: inline-block;
		}
			.post-meta .user-info img, .author-meta .user-info img{
				display: inline-block;
				margin-bottom: -3px;
				margin-top: -6px;
			}
			.lt-ie9 .post-meta .user-info, .lt-ie9 .author-meta .user-info {
				display: inline; 
			}	
	
.daily-posts, .author-info { 
	position: relative; 
	margin: 0 0 25px;
}
.date-box {
	width: 45px;
	height: 45px;
	text-align: center;
	background: #ffd76a;
	color: #474338;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	position: absolute;
	top: -4px;
	left: 0;
}
	.date-box .num, .date-box .month { display: block; line-height: 1; font-weight: bold; }
	.date-box .num { font-size: 1.4em; padding-top: 4px; }
	.date-box .month { text-transform: uppercase; }
	.date-box:before { 
		display: block; 
		position: absolute; 
		z-index: -1; 
		content: ""; 
		width: 0; 
		height: 0;     
		top: 50%;
		margin-top: -7px;
		border-bottom: 7px solid transparent; 
		border-top: 7px solid transparent;        
		border-right: 0;
	}  
	  .date-box:before {    
		right: -7px; 
		border-left: 7px solid #ffd76a;     
	  }
	  
.post-snippet, .post-body {
	margin: 0 48px 48px 75px;
}
.post-comments { 
	margin-right: 48px; 
	margin-bottom: 48px;
}
.post-snippet {
	margin-right: 88px;
}

		.blog-content .comment + .notice { 
			margin-top: 16px; 
		}
	
	.post-snippet .more-link { 
		display: block; 
		color: #771700;
		margin-bottom: 13px;
		line-height: 1;
	}
        .post-readmore { display: block; margin-top: 1em; }
		.post-snippet .more-link:hover { color: #9f1e00; }
	.post-actions, .author-contacts { 
		padding: 12px 0; 
		border-top: 1px solid #d7d7d7;
		border-bottom: 1px solid #d7d7d7;
		line-height: 1em;
	}
    .post-actions {
        margin-top: 13px; 
    }
		.action-item {
			display: inline-block;
			margin-right: 25px;			
		}
			.button-group .action-item { margin-right: 0; }			
			
		.comments-link { 
			font-weight: bold; 
		}
			.comments-link__icon {
				color: #c2c2c2;
				text-shadow: -1px 0 0 #a7a7a7;
				font-size: 1.1em;
				margin: -5px 0;
				position: relative;
				top: 1px;
			}
		.action-item .button, .action-item.button { 
			font-weight: normal; 
			padding: 2px 8px 3px;			
			line-height: 1.2em;
		}
			.action-item  .button__label {
				padding-left: 3px;
			}
		
			.action-item .button.fb { padding-left: 4px; }
			.action-item .button.tw { padding-left: 6px; }			
			.action-item__icon {
				position: relative;
				top: 2px;			
			}
		.action-item .icon-twitter { color: #2fa9ef; }
			.action-item .tw .icon-twitter { color: #fff; }
		.action-item .icon-facebook-sign { color: #3f569b; }

.author-photo {
	display: block; 		
	padding: 4px;
	border: 1px solid #d7d7d7;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	float: left;
}
	.author-photo img { width: 147px; }
	.lt-ie9 .author-photo img { max-width: 147px; }
.author-details {
	margin: 0 88px 0 177px;
}
		
.sidebar--blog { 
	float: left; 	
	margin: 0 auto 25px;
	width: 28%; 
}
	.sidebar-contents { padding: 0 48px 0 6px; }
	.sidebar section, .sidebar__section { margin-bottom: 20px;}
	.sidebar section.search, .sidebar__section--search { margin-bottom: 36px; }	
	.sidebar section.menu-list, .sidebar__section--menu-list { margin-bottom: 25px; }	
	.sidebar h5 { 
		color: #979797; 
		font-size: 13px;
		font-weight: bold;
		padding: 0 0 10px;
		margin: 0 0 22px;
		border-bottom: 1px solid #d7d7d7;		
	}
		
		.sidebar .menu-list h5 { margin-bottom: 10px; }
		.sidebar .one-field { max-width: 400px; margin: 0 auto; }
		.sidebar img { display: block; margin: 0 auto; }
		.sidebar .menu-list ul {
			font-size: 13px;
			line-height: 1.54;
			margin-bottom: 0;
		}
			.sidebar .menu-list li {
				list-style: none;
				padding-left: 20px;
                text-indent: -4px;
				position: relative;
                line-height: 1.3;
                margin-bottom: 0.5em;
			}
				.sidebar .menu-list li:before {
					position: absolute;
					top: 50%;
					left: 2px;
					content: "";
					display: block;
					border: 4px solid transparent;
					border-left: 5px solid #d9d9d9;
					border-right: none;
					margin-top: -5px;
				}
				.sidebar .menu-list li .icon {
					margin-left: 4px;
				}
	.sidebar ul a { color: #474747; text-decoration: none; }
		.sidebar ul a:hover { color: #979797; }
		.sidebar ul a.rss { color: #ec8547; }
			.sidebar ul a.rss:hover { color: #fb965a; }
			
	.sidebar-social .icons { text-align: center; }
	.sidebar-social .icon {
		display: inline-block;
		width: 31px;
		height: 31px;
		margin: 0 6px;
		background: url('../img/social-sketch-icons.png') 0 0 no-repeat;
		text-indent: -9999px;
		opacity: 0.9;
	}
		.sidebar-social .icon.fb { background-position: 0 0; }
		.sidebar-social .icon.rss { background-position: -31px 0; }
		.sidebar-social .icon.re { background-position: -61px 0; }
		.sidebar-social .icon.tw { background-position: 100% 0; }
		.sidebar-social .icon:hover { opacity: 1; }
		
.blog-home .blog-content, .blog-home .sidebar { margin-top: 25px; }

.blog-content .comment_add_title { margin-bottom: 10px; }
.comment-body .my_comment { margin-top: 16px; }

.blog-list__title {
	display: inline-block;
	margin: 0 8px 0 0;
	line-height: 32px;
}
.blog-list__badge {
	vertical-align: middle;
	margin-top: -6px;
}
	
@media only screen and (max-width: 1100px) {
	.page-blog .topmsg {	zoom: 0.8; }
}
@media only screen and (max-width: 1050px) {
	.page-blog .topmsg {	zoom: 0.7; }
}
@media only screen and (max-width: 990px) {	
	.page-blog .topmsg {	display: none; }
	.post-body, .post-comments  { margin-right: 24px; }
}
@media only screen and (max-width: 50em) {
	.page-blog .topmsg {	display: block; zoom: 0.9;}
	.blog-content { float: none; width: 100%; margin: 0 auto 10px; }
	.post-comments { margin-right: 0; }
	.sidebar { width: 100%; }
		.sidebar-contents { padding: 0 6px; }
	.tab-half { float: left; width: 50%; }
	.tab-third { float: left; width: 33%; }
		.sidebar .tab-half h5, .tab-mid h5 { text-align: center; }
}
@media only screen and (max-width: 40em) {
	.tab-half, .tab-third { float: none; width: auto; }
		.sidebar .tab-half h5, .tab-mid h5 { text-align: left; }
	.blog-content { width: auto; }
	.post-snippet, .post-body { margin: 0 auto 48px; }
		.blog-content .notice { margin-right: auto; }
	.date-box { display: none; }
	.blog-content h2 { font-size: 1.8em; }
	.author-photo img { width: 100px; }
	.author-details { margin: 0 18px 0 120px; }
	.action-item { margin-right: 15px; }
}
