body {
	background-color: @bodycolor;
	font-family: @base-font;
	font-color: @textcolor;
}
.id-hash {
    span.hash {
        padding: 0 10px 0 0;
        color: #bbb;
        &.hover {
            color: #aaa;
            text-decoration: underline;
        }
    }
    span.header {
        color: #333;
        code {
            background-color: #f4f4f4;
            padding: 0 5px;
            .rounded(4px);
        }
        &.hover {
            color: #000;
        }
    }
}
.navigation-wrapper {
	.container();
	padding: 2em 0 0;
	font-family: @heading-font;
	font-weight: 700;
	text-transform: uppercase;
	.clearfix();
}
.site-name {
	.grid(12,10);
	.prefix(12,1);
	.suffix(12,1);
	margin-bottom: 1em;
	float: none;
	display: block;
}
.top-navigation {
	.grid(12,10);
	.prefix(12,1);
	.suffix(12,1);
	margin-bottom: 1em;
	float: none;
	display: block;
	text-transform: lowercase;
}
.top-navigation {
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	li {
		list-style-type: none;
		display: inline;
		margin-right: 25px;
		white-space: nowrap;
		.hl-nav a,
		a { 
			decoration: none;
			border-bottom: 0 solid transparent;
			.transition(all .2s);
		}
		&.hl-nav a {
            color: #f28f1d;
            &:hover {
                color: #d9801a;
            }
		}
	}
}
#main {
	counter-reset: captions;
	.container();
	.clearfix();
	clear: both;
	margin-top: 1em;
	article {
		.container();
		.grid(12,10);
		.prefix(12,1);
		.suffix(12,1);
		margin-bottom: 2em;
	}
}
#index {
	.container();
	.grid(12,10);
	.prefix(12,1);
	.suffix(12,1);
	/*
	width: 80%;
	margin-left: 20%;
	min-height: 450px;
	*/
	margin-bottom: 2em;
	h3 {
		margin: 0;
		padding-bottom: .5em;
		.font-rem(28);
		border-bottom: 1px solid lighten(@black,70);
	}
	article {
		h2 {
			margin-bottom: 4px;
			.font-rem(20);
			text-transform: uppercase;
		}
		p {
			.font-rem(14);
		}
		p+p {
			text-indent: 0;
		}
	}
}
.image-wrap {
	position: relative;
	margin-bottom: 2em;
	//height: 248px;
	/*
	margin: 0 auto 2em auto;
	display: block;
	width: 1024px;
	height: 256px;
	*/
	/*
	&:after {
		content: " ";
		display: block;
		position: absolute;
		bottom: -1px;
		left: 8%;
		width: 0;
		height: 0;
		border: 20px solid transparent;
		border-bottom-color: @bodycolor;
	}
	*/
	img {
		width: 100%;
		height: auto;
		-ms-interpolation-mode: bicubic;
	}
	.headline-wrap {
		position: absolute;
		bottom: 25px;
		.prefix(12,1);
		h1, h2 {
			color: @white;
			.text-shadow(0 1px 2px rgba(0,0,0,.25));
		}
	}
}
.headline-wrap .comments {
    padding: 0 0 0 20px;
    &:hover {
        text-decoration: underline;
    }
}
.byline {
	clear: both;
	font-size: 80%;
}
.article-author-top,
.article-author-bottom {
    clear: both;
    /*
    position: fixed;
    */
	h3 {
		margin-bottom: 0;
	}
	p {
		font-size: 80%;
		font-style: italic;
	}
	a, a:hover {
		border-bottom: 0 solid transparent;
	}
	img.bio-photo {
		width: 100px;
		height: 100px;
		.rounded(100px);
	}
}
.author-social {
  display: block;
  margin-bottom: 5px;
  .font-rem(14);
  color: @black;
  &:visited {
    color: @black;
  }
  &:hover {
    .scale(1.1);
  }
  &:active {
    .translate(0, 2px);
  }
}
.article-author-top {
	display: none;
	margin-bottom: 2em;
}
.article-author-bottom {
	margin-bottom: 1em;
	.bio-photo {
		float: left;
		margin-right: 25px;
	}
	.author-social {
		display: inline-block;
		margin-right: 5px;
	}
}
.article-wrap {
	// Dotted line underlines for links
	p > a,
	li > a {
	    color: #3c86c2;
		&:hover {
			color: #276ea8;
		}
        &:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 1px;
            bottom: 0;
            left: 0;
            background-color: #276ea8;
            visibility: hidden;
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
            -webkit-transition: all 0.3s ease-in-out 0s;
            transition: all 0.3s ease-in-out 0s;
        }
        &:hover:before {
            visibility: visible;
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
        }
	}
	p > a.reversefootnote, 
	li > a.reversefootnote {
		border-bottom-width: 0;
	}
	p {
	    text-align: justify;
	}
}
.toc {
	display: none;
	font-size: 95%;
	.opacity(0.7);
	.transition(opacity 0.2s ease-in-out);
	&:hover {
		.opacity(1);
	}
	header {
		background: lighten(@black, 10);
	}
	h3 {
		margin: 0;
		padding: 5px 10px;
		color: @white;
		&:hover {
			cursor: pointer;
		}
	}
	ul {
		margin: 2px 0 0;
		padding: 0;
		background: lighten(@black, 30);
		line-height: 1;
	}
	li {
		display: block;
		margin: 0;
		padding: 0;
		font-family: @heading-font;
		border-bottom: 1px solid darken(@white, 50);
		&:last-child {
			border-bottom-width: 0;
		}
		a {
			padding: 10px;
			display: block;
			color: @white;
			border-bottom-width: 0;
			&:hover {
				font-weight: 400;
				:before {
					content: "\00bb";
					padding-right: 5px;
				}
			}
		}
		ul {
			margin: 0;
			border-top: 1px solid darken(@white, 50);
		}
	}
}
.image-grid {
	.clearfix();
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
	li {
		.grid(12,6);
	}
}
.recent-grid {
	.clearfix();
	list-style: none;
	margin: 1em 0;
	li {
		display: inline;
		a { 
			border-bottom: 0 solid transparent;
			&:hover {
				border-bottom: 0 solid transparent;
			}
		}
	}
	img {
		width: 19%;
		margin-bottom: 1%;
	}
}
.holder {
	font-family: @heading-font;
	a {
		cursor: pointer;
		margin: 0 5px;
	}
	a.jp-previous {
		margin-left: 0;
		margin-right: 15px;
	}
	a.jp-next {
		margin-left: 15px;
		margin-right: 0;
	}
	a.jp-current {
		font-weight: bold;
	}
	a.jp-disabled, 
	a.jp-disabled:hover {
	}
	a.jp-current, 
	a.jp-current:hover,  
	a.jp-disabled, 
	a.jp-disabled:hover {
		cursor: default;
		background: none;
	}
	span {
		margin: 0 5px;
	}
}
.footer-wrap {
	.container();
	.clearfix();
	clear: both;
	margin-top: 1em;
	padding-top: 2em;
	padding-bottom: 3em;
	background-color: @black;
	a,
	a:active,
	a:visited,
	p,
	h4,
	h5,
	h6,
	span {
		color: darken(@white, 25);
	}
	span { 
		.font-rem(14);
	}
	a {
		border-bottom: 0 solid transparent;
		&:hover {
			color: @white;
			border-bottom: 0 solid transparent;
		}
	}
	footer {
		.grid(12,10);
		.prefix(12,1);
		.suffix(12,1);
	}
}
.related-articles {
	.grid(12,10);
	.prefix(12,1);
	.suffix(12,1);
	//margin-bottom: 2em;
	h4 {
		
		text-transform: uppercase;
		margin-bottom: 0;
	}
	ul {
	    margin-bottom: 2em;
        li {
            margin-bottom: 0;
            color: @white;
        }
	}
}
.footer-icons {
	li {
		display: inline-block;
		padding-right: 5px;
		a {
			color: lighten(@basecolor, 40%);
			.transition(.4s linear);
		}
	}
}
a.author-social {
    font-size: .9em;
    .fa {
        font-family: 'fontawesomeregular';
        font-style: normal;
        &.icon-twitter-squared:hover,
        &.icon-twitter-squared.hover {
            .transition(.2s linear);
            color: #2aa9df;
        }
        &.icon-facebook-squared:hover,
        &.icon-facebook-squared.hover {
            .transition(.2s linear);
            color: #3a5a98;
        }
        &.icon-gplus-squared:hover,
        &.icon-gplus-squared.hover {
            .transition(.2s linear);
            color: #b63324;
        }
        &.icon-linkedin-squared:hover,
        &.icon-linkedin-squared.hover {
            .transition(.2s linear);
            color: #1683bb;
        }
        &.icon-github-squared:hover,
        &.icon-github-squared.hover {
            .transition(.2s linear);
            color: #4183c4;
        }
        &.icon-stack-overflow:hover,
        &.icon-stack-overflow.hover {
            .transition(.2s linear);
            color: #fe7a15;
        }
        &.icon-bitbucket-squared:hover,
        &.icon-bitbucket-squared.hover {
            .transition(.2s linear);
            color: #205081;
        }
        // Nuget
        &.icon-box:hover,
        &.icon-box.hover {
            .transition(.2s linear);
            color: #4aa2c8;
        }
    }
}

// Browser Upgrade
// --------------------------------------------------
.browser-upgrade {
	background: #000;
	text-align: center;
	margin: 0 0 2em 0;
	padding: 10px;
	text-align: center;
	color: @white;
	a {
		color: @white;
		border-bottom: 1px dotted @white;
		text-decoration: none;
		&:hover {
			border-bottom: 1px solid @white;
		}
	}
}

// Google Search
// --------------------------------------------------
#goog-fixurl {
	ul {
		list-style: none;
		margin-left: 0;
		padding-left: 0;
		li {
			list-style-type: none;
		}
	}
}
#goog-wm-qt {
	width: auto;
	margin-right: 10px;
	margin-bottom: 20px;
	padding: 8px 20px;
	display: inline-block;
	.font-rem(14);
	background-color: @white;
	color: @black;
	border-width: 2px !important;
	border-style: solid !important;
	border-color: lighten(@black,50);
	.rounded(3px);
}
#goog-wm-sb {
	.btn();
}
