/* Ensure that main.css is included first before doing       */
/* something stupid. It is a dependency for this stylesheet. */
/* ~Clara Nguyen                                             */

@font-face {
	font-family: inconsolata;
	src: url("../font/inconsolata.otf");
}

div.lab-letter {
	font-size: 400%;
	width: 100%;
	text-align: center;
	line-height: 100px;
}

span.lab-section {
	font-size: 150%;
}

pre {
	/* border: 1px solid #BBB; */
    padding: 8px;
    overflow-x: auto;
    background-color: #e0e0e0;
    color: #000000;
    /* border-radius: 4px; */
    /* box-shadow: 2px 2px 8px #c7c7c7; */
	border-left: 4px solid #c3c3c3;

	background-image: radial-gradient(#d4d4d4 20%, transparent 20%), radial-gradient(#d4d4d4 20%, transparent 20%);
    background-repeat: repeat;
    background-position: 0 0;
    background-size: 3px 3px;
}

/* Code without a pre on the outside */
code {
	background-color: #D8D8D8;
	/* border: 1px solid #C3C3C3; */
    padding: 2px 4px;
    border-radius: 4px;
}

/* Code with a pre on the outside */
pre code {
	background-color: transparent;
	border: 1px solid transparent;
	padding: 0px;
	border-radius: 0px;
	text-shadow: 0px 0px 0px transparent;
}

pre, code {
	font-family: inconsolata !important;
	font-size: 90%;
	tab-size: 4;
}

/* Label for the code blocks */
.code-label {
	position: relative;
	top: 16px;
	left: 20px;
	font-size: 14px;
	font-variant: all-small-caps;
	font-weight: bold;
}

/* Class Content Tags */

.content-tag {
	float: left;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.25);
	box-sizing: border-box;
	margin: 0px 6px 0px 0px;
	padding: 0px 4px;
	font-size: 95%;
}

.content-tag.CONTENT_MINI_GUIDES {
	background-color: #f3eabe;
	color: #6b6858;
}

.content-tag.CONTENT_LAB_HINTS {
	background-color: #b4e4cc;
	color: #356f52;
}

.content-tag.CONTENT_SIMULATOR {
	background-color: #aad0ff;
	color: #364250;
}

.content-tag.CONTENT_TEMPLATE {
	background-color: #d9c2e4;
	color: #312b33;
}

.content-tag.CONTENT_FILES {
	background-color: #ffdb9c;
	color: #524734;
}

.content-tag.CONTENT_NONE {
	background-color: #333;
	color: #fff;
	font-weight: bold;
}

/* Oh yeah and their dark versions */

body.dark .content-tag.CONTENT_MINI_GUIDES {
	background-color: #424238;
	color: #fff;
	border-color: #f3eabe3f;
}

body.dark .content-tag.CONTENT_LAB_HINTS {
	background-color: #254434;
	color: #fff;
	border-color: #b4e4cc3f;
}

body.dark .content-tag.CONTENT_SIMULATOR {
	background-color: #364250;
	color: #FFF;
	border-color: #aad0ff3f;
}

body.dark .content-tag.CONTENT_TEMPLATE {
	background-color: #35283c;
	color: #FFF;
	border-color: #d9c2e43f;
}

body.dark .content-tag.CONTENT_FILES {
	background-color: #4e432f;
	color: #FFF;
	border-color: #ffdb9c3f;
}

body.dark .content-tag.CONTENT_NONE {
	background-color: #080808;
	color: #aaa;
	border-color: #8888883f;
	font-weight: bold;
}