/**
 * Base 
 */

body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure {
  margin: 0;
  padding: 0;
}

body {
	color: #333333;
 	background-color: #e6e6e6;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

h1 {
	-webkit-font-smoothing: antialiased;
	font-size: 44px;
	font-weight: 100;
	color: rgb(34, 44, 55);
	line-height: 1.1em;
	margin-bottom: 10px;
}

h2 {
	-webkit-font-smoothing: antialiased;
	font-size: 32px;
	font-weight: 100;
	color: rgb(34, 44, 55);
	line-height: 1.1em;
	padding-top: 8px;
	margin-bottom: 10px;	
}

h3 {
	-webkit-font-smoothing: antialiased;
	font-size: 24px;
	font-weight: 300;
	color: rgb(34, 44, 55);
	line-height: 1.1em;
	padding-top: 8px;
	margin-bottom: 10px;		
}

a { 
	color: #3366dd;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: #5588dd;
}

ol, ul {
	margin-left: 24px;
	line-height: 1.4em;
	margin-bottom: 20px;
}

figure.highlight {
	background-color: white;
	padding: 10px;
	line-height: 1.3em;
	margin-bottom: 10px;
	border: solid 1px #ddd;
}

figure.highlight pre,
figure.highlight pre span {
	font-family: 'Roboto Mono', monospace;
	font-size: 13px;
}

input.grey-button {
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	background-color: #334444;
	padding: 10px;
	border: solid black 1px;
	color: white;
}

input.grey-button:hover {
	background-color: #556666;
	cursor: pointer;
}

.fixed-width-block {
	font-family: 'Roboto Mono', monospace;
	font-size: 13px;	
	padding: 1px 4px 1px 4px;
	background-color: #fdfcf5;
	border: solid #d6d5d3 1px;
	border-radius: 4px;
	color: #ce1d53;
}

pre.fixed-width-block,
div.fixed-width-block {
	color: #ce1d53;
	padding: 8px;
	margin-bottom: 12px;
}


/**
 * Site Header 
 */

.site-header {
	position: absolute;
	background-color: #111111;
	width: 100%;
	padding: 16px 0px 16px 0px;	
	margin: 0px 0px 0px 0px;
}

.site-title {
	padding-left: 12px;
}

.site-title a {
	font-family: "Century Gothic";
	letter-spacing: -1px;
	color: #f6f6f6;
	font-size: 20px;
}


/**
 * Main Page Layout
 */

.page-container {
	display: table;
	max-width: 1200px;	
	min-height: 100vh;
	background-color: #f6f6f6;
}

@media screen and (min-width: 1200px) {
	.page-container {
		min-width: 1200px;
	}
}

@media screen and (max-width: 1200px) {
	.page-container {
		width: 100%;
	}
}


body.fullwidth .page-container {
	max-width: 100%;
	width: 100%;
}

/**
 * Sidebar
 */

.site-sidebar {
	display: table-cell;
	vertical-align: top;
	background-color: #333;
	color: #ccc;
	width: 180px;
	padding: 8px 12px 8px 12px;
	padding-top: 68px;	
	font-size: 1.1em;
}

.site-sidebar .menu-section-header {
	font-size: 1.1em;
	font-weight: 100;	
	padding-top: 6px;
	padding-bottom: 6px;
}

.site-sidebar ul {
	list-style: none;
}

.site-sidebar ul.menu {
	margin-bottom: 12px;
}

.site-sidebar ul.menu li a {
	display: block;
	margin-left: -36px;
	margin-right: -12px;
	padding: 6px 6px 6px 16px;
	color: #eee;
	font-weight: 300;
}

.site-sidebar ul.menu li a:hover {
	background-color: #6688cc;
	text-decoration: none;
}

.site-sidebar ul.menu li.current a {
	background-color: #dd9933;
}


/**
 * Page Content
 */

.page-content {
	dispaly: table-cell;
	vertical-align: top;
	margin-top: 58px;	
	padding: 20px;
	padding-top: 12px;
	font-size: 16px;
}

.page-content p {
	color: rgb(90, 90, 90);
	margin-bottom: 14px;
	line-height: 1.5em;
}

.page-content .right-aligned-figure {
	float: right;
	padding-left: 10px;
	padding-bottom: 10px;
}

.page-content table {
	background-color: white;
	border: solid 1px #ccc;
	margin-bottom: 10px;
}

.page-content table thead th {
	text-align: left;
	padding: 5px;
}

.page-content table td {
	padding: 5px;
}

/**
 * Post Styles
 */

ul.post-categories {
	list-style: none;
	margin-bottom: 14px;
}

ul.post-categories li {
	display: inline;
	padding: 6px;
	background-color: #bbddff;
	border-radius: 4px;
}


/**
 * Spoilers
 */

input.spoiler-button {
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	background-color: #ffcc44;
	border: solid black 1px;
	padding: 8px 12px 8px 12px;
}

input.spoiler-button:hover {
	background-color: #ee9922;
	cursor: pointer;
}


div.spoiler {
	display: none;
}

div.spoiler-content {
	padding: 10px 10px 0px 10px;
	border: dashed 1px #aaa;
	margin-bottom: 10px;
}


/**
 * Code Editor
 */

@keyframes clear-console {
    0%   { background-color: #ccc; }
    100% { background-color: white; }
}

.clear-console-output-anim {
    animation-name: clear-console;
    animation-duration: 0.5s;	
}

#code-editor { 
    position: relative;
    width: 100%;
    height: 454px;
    top: 0px;
    right: 0;
    bottom: 0;
    left: 0px;
}

#console-output {
	background-color: white;
	border: solid 1px #bbb;
	height: 440px;
	padding: 6px;
	font-size: 10pt;
	line-height: 1.4em;
	overflow: auto;
}

.console-output-error {
	color: #cc5533;
}


/**
 * Exercises
 */

#exercise-sidebar {
	float: right; 
	width: 400px; 
	max-height: 600px; 
	overflow-y: scroll; 
	background-color: white; 
	border: solid 1px #999999; 
	padding: 10px
}