/*
 * Original template logo was 34px high; current logo 74px.
 * This takes away 20px of the padding around the logo, but adds it back to all
 * other elements in the header, so they're centered with the new logo.
 */
#header .main-header {
	padding: 10px 0;
}
.header-left-menu,
.header-social-link,
.mobile-menu-trigger {
	padding: 20px 0;
}

/*
 * Set logo dimensions so the logo itself can be bigger (retina stuff)
 */
.logo-area img {
	width: 74px;
	height: 74px;
}

/*
 * Stack Overflow color is not known in template CSS.
 */
.social.bg.color .stackoverflow a,
.social.bg .stackoverflow a:hover {
	background: #FF7A00 !important
}
.social.textcolor .stackoverflow.active i,
.social.text-hover .stackoverflow a,
.social.textcolor .stackoverflow a:hover {
	color: #FF7A00 !important
}

/*
 * Make the hexagon only half as big.
 */
.hexagon {
	width: 35px;
	height: 20.205px;
}
.hexagon:before,
.hexagon:after {
	width: 24.75px;
	height: 24.75px;
	left: 0;
}
.hexagon:before {
	top: -12.37435px;
}
.hexagon:after {
	bottom: -12.37435px;
}

.entry-item .entry-icon {
	margin-top: -40px;
}

/*
 * Force blog header images to take up full width.
 */
.entry-header img {
	width: 100%;
}

/*
 * Add inactive state to buttons, to gray out next/previous when not needed.
 */
.pagenavi ul li a.inactive,
.pagenavi ul li span.inactive {
	background-color: transparent;
	color: inherit;
}

/*
 * Override butt ugly highlight style. & make big code blocks should take full
 * content width.
 */
div.highlighter-rouge pre {
	margin: 0 -30px 10px;
	padding: 10px 30px;
	background: #f5f5f5;
	border: none;
	border-radius: 0;
	display: block;
}

/*
 * Default color for elements not styled in syntax.css
 */
div.highlighter-rouge code {
	color: #000;
}

/*
 * Spread out tweets over full footer length.
 */
#last-tweet-footer ul li {
	padding-top: 0;
}

#last-tweet-footer ul li:before {
	top: 5px;
}

#last-tweet-footer ul li .tweets_txt {
	padding-right: 20px;
}

/*
 * Top posts widget: make entry-info band less pronounced, shrink it a bit in
 * height. Also make for a bit more room between post title & next post image.
 */
#sidebar .widget.top-post ul li .img-wrap .entry-info {
	padding: 5px 20px;
}

.top-20 {
	margin-top: 10px!important;
	margin-bottom: 20px;
}

/*
 * Have some padding between table columns.
 */
td, th {
	padding: 0 5px;
}

/*
 * Minor changes to portfolio CSS, I'm using it to display photos.
 */
.portfolio-item:hover .portfolio-info {
	background: rgba(0, 0, 0, 0.3);
}

.portfolio-item .portfolio-link a {
	width: 100%;
}

/*
 * In photos page, I'm doing a bit of a hack by combining class="alert" with
 * id="content" (to get it white and stuff). This just finetunes it to exactly
 * how I want it ;)
 */
.page #content.alert {
	margin-left: 15px;
	margin-right: 15px;
	padding: 15px 20px;
}

/*
 * Title have a default & a "large" style in style.css. There's a huge
 * difference between both, though - I want something in between!
 */
h1.medium {
	font-size: 28px;
	line-height: 36px;
}
h2.medium {
	font-size: 25px;
	line-height: 33px;
}
h3.medium {
	font-size: 23px;
	line-height: 30px;
}
h4.medium {
	font-size: 20px;
	line-height: 28px;
}
h5.medium {
	font-size: 18px;
	line-height: 24px;
}
h6.medium {
	font-size: 15px;
	line-height: 18px;
}

/*
 * Slightly increase footer social buttons' icon size.
 */
.widget.footer-social li a {
	font-size: 20px;
}

/*
 * Make ads stand out from content by letting them occupy full content width.
 */
.ad.margin {
	margin: 15px -30px;
	padding: 15px 30px;
	background-color: #f9f9f9;
	text-align: center;
}


/* Make text colors a bit darker, for more contrast */
a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: #000;
	font-weight: 400;
}
body {
	color: #222;
}
input, textarea,
input:focus, textarea:focus {
	color: #222;
}
*::-moz-placeholder {
	color: #444;
}
#footer {
	color: #ccc;
}