/* bsodblue v2 - Bootstrap v4 */

/* synatax highlighter */

@import "pygments-native.css";

/*highlight code styles in main content only */
#article-content > p .highlighter-rouge {
	padding: 0.2rem 0.3rem;
    font-size: 87.5%;
	font-family: monospace;
    color: #cc523e;
    background-color: #f9f2f4;
    border-radius: 2px;
}
#article-content > ul > li .highlighter-rouge {
	padding: 0.2rem 0.3rem;
    font-size: 87.5%;
	font-family: monospace;
    color: #cc523e;
    background-color: #f9f2f4;
    border-radius: 2px;
}

.highlight pre {
	padding: 10px;
	border-radius: 5px;
	background-color: #4D4D4D;
}

blockquote {
	display: block;
	font-size: inherit;
	font-style: italic;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 20px;
	padding-left: 20px;
	margin-right: 40px;
	border-left: 3px solid #ccc;
  }


body {
	font-family: 'Open Sans',sans-serif;;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #212529;
    text-align: left;
}
a:hover {
	text-decoration: none;
}
a, a:visited {
	color: #3e81f2;
	text-decoration: none;
}
a:hover {
	color: #33ccff;
}
.jumbotron {
	background-image: url("../images/bsod-alt.png");
	background-size: cover;
	padding-left: 20px;
	margin-bottom: 0;
}
.jumbotron h1 {
	margin: 0;
	color: #3e81f2;
	font-size: 3.5em;
	padding: 20px 0 0 20px;
	font-weight: bold;
	font-family: 'Orbitron', sans-serif;
}
.jumbotron h2 {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	margin: 10px 0 0 0;
	color: #ccc;
	padding: 0 0 0 30px;
}
.navbar {
	border-top: 1px solid #5cb85c;
	z-index: 20;
}
.main-container {
	margin-top: 40px;
}
#side-bar {
	font-size: 85%;
	color: #3e81f2;
	margin-bottom: 50px;
}
#side-bar ul {
	padding-left: 25px;
}
#side-bar a, #side-bar a:visited {	
	color: #3e81f2;
	margin: 4px 0 4px 0;
}
#side-bar a:hover {
	color: #33ccff;
}
#side-bar h4 {
	padding: 0px 0px 10px;
	margin: 10px 0 20px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	color: #333;
	white-space: nowrap;
	vertical-align: baseline;
	border-bottom: 1px solid #e4e4e4;
}
#side-bar .list-group a {
	color: #555;
}
#side-bar .oi-tag {
	color: #3e81f2;
}
.news-item {
	line-height: 25px;
	margin-top: 25px;
	margin-bottom: 70px;
	font-size: 12px;
}
.news-item a, .news-item a:visited {
	color: #555;
}
.news-item a:hover {
	color: #3e81f2;
}
.news-item-title {
	font-size: 24px;
	text-decoration: none;	
}
.news-item-meta {
	margin-right: .8rem;
}
.updated-date {
	color: #5cb85c;
}
.news-item-blurb {
	margin-top: 10px;
	line-height: 25px;
	font-size: 14px;
}
.category-label {
	background-color: #5cb85c;
	padding: .2em .6em .3em;
	font-weight: 500;
	white-space: nowrap;
	border-radius: .25em;
	color: #fff;
	font-size: 95%;
	margin: 0px 3px 0px 3px;
}
/* cheatsheet menu */
.cheatsheet_item {
    margin-top: 50px
}
.cheatsheet_item h1 {
    font-size: 1.4rem;
    color: #555;
}
.cheatsheet_item h2 {
    font-size: 0.8rem;
    margin-bottom: 20px;
    color: #555;
}
/* article specific styling */
header {
	border-bottom: 2px solid #5cb85c;	
	font-size: 12px;
	margin-bottom: 40px;
	padding-bottom: 20px;
}
header h1 {
	font-size: 2rem;
	color: #555;
}
article p {
	line-height: 25px;
	margin-bottom: 20px;
}
.post-title-image {
	margin-right: 15px;
}
/* Generic article definitions, in lieu of Bootstrap */

#article-content h1 {
	font-size: 2rem;
	color: #555;
	margin: 50px 0 20px 0;
}
#article-content h2 {
	font-size: 1.5rem;
	color: #555;
	margin: 50px 0 10px 0;
}
#article-content ol, #article-content ul {
	margin-bottom: 20px;
}
#article-content li {
	line-height: 28px;
}
.all-news-item h1 {
	font-size: 1.3rem;
	margin: 0;
	padding: 0;
}
.all-news-item a, .all-news-item a:visited {
	color: #555;
}
.all-news-item a:hover {
	color: #3e81f2;
}
.all-news-item {
	margin-bottom: 40px;
}
.all-news-item .post-date {
	font-size: 12px;
}
/*  fix for floated left images within article */
.margin-right {
	margin-right: 20px;
}
/* markdown styles */

@keyframes easter {
		0%   {left:50px; top:235px; visibility:visible; }
		8% { height: 65px;} 
		25%  {left:50px; top:170px; height: 65px;}
		100%  {left:900px; top:170px; height: 65px;}
 }
#easter-div {
	position: absolute;
	left: 50px;
	top: 235px;
	width: 65px;
	height: 30px;
	animation-name: easter;	
	animation-duration: 8s;
	background-image:url("/images/shroom.png");
	background-repeat: no-repeat;
	visibility: hidden;
	z-index: 10;
	animation-iteration-count: 1;
	animation-play-state: paused;
}

#easter-trigger {
	width: 20px;
	height: 20px;
}

@media only screen and (max-width:600px) {
	#easter-div { display: none !important; }
 }