@import url('../fonts/dinpro/style.css');
@import url('../fonts/museoslab/style.css');
@import url('../fonts/courseplay/style.css');


/*** TRANSITIONS ***/
a, a:before, a:after, button, button:before, div, fieldset, figure, h3, img, input, label, li, ul, span, textarea {
	-webkit-transition: all 0.1s;
	   -moz-transition: all 0.1s;
		-ms-transition: all 0.1s;
		 -o-transition: all 0.1s;
			transition: all 0.1s;
}

/*** GENERAL ***/
.hover {
	-webkit-user-select: none;
	-webkit-touch-callout: none;        
}
::-moz-selection {
	background: #202020;
	color: #fc950a;
}
::-webkit-selection {
	background: #202020;
	color: #fc950a;
}
::selection {
	background: #202020;
	color: #fc950a;
}

* { /* apply a natural box layout model to all elements */
	padding: 0;
	margin: 0;
	vertical-align: middle;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	 -ms-box-sizing: border-box;
	box-sizing: border-box;
}

/* scroll bar */
::-webkit-scrollbar { width:10px; }
::-moz-scrollbar { width:10px; }

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
	background: rgba(26,26,26,0.8); 
}
::-moz-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
	background: rgba(26,26,26,0.8); 
}
::-webkit-scrollbar-thumb {
	-webkit-border-radius: 3px;
	border-radius: 3px;
	background: rgba(80,80,80,1); 
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8); 
}
::-moz-scrollbar-thumb {
	-moz-border-radius: 3px;
	border-radius: 3px;
	background: rgba(80,80,80,1); 
	-moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(180,180,180,0.4); 
}
::-moz-scrollbar-thumb:window-inactive {
	background: rgba(180,180,180,0.4); 
}


/*** MAIN ***/
html {
	background:#333;
	background:url('../img/noise_128x128_0.15.png') repeat #333;
}
body {
	font-family:DINPro, DIN Pro, DIN Next, Source Sans Pro, Open Sans, Segoe UI, Trebuchet MS, sans-serif;
	font-size:16pt;
	height:auto;
	padding-bottom:7rem; /* footer height + margin */
}

#container {
	color: #F0F0F0;
	font-size: 100%;
	font-weight:300;
	margin:0;
	padding:5em 2em 0 21em;
	width:100%;
}
a:not(.imgLink) {
	color: #FC0;
	padding:2px 4px;
	text-decoration:none;
	border-radius:2px;
}
a:not(.imgLink):hover, a.hover:not(.imgLink), a:not(.imgLink):focus, a:not(.imgLink):active {
	background-color:#FC0;
	color:#333;
}
a.imgLink { display:block; padding:0; }

a.internal { white-space:pre; }
a.internal [class^="icon-"] { font-size:1.1em !important; }

img {
	max-width:100%;
	height:auto;
}


/* SIDEBAR NAV */
#navContainer {
	background:#FC0;
	background:url('../img/noise_128x128_0.05.png') repeat #FC0;
	color:#333;
	padding:2em;
	width:19em;
	z-index:3;

	position:fixed;
	top:0;
	left:0;
	bottom:0;
	text-align:left;
}

#navSidebar a:not(.imgLink) {
	color:#333;
}
#navSidebar a:not(.imgLink):hover, #navSidebar a:not(.imgLink):focus, #navSidebar a:not(.imgLink):active {
	background-color:#333;
	color:#FC0;
}
#navSidebar > ul { list-style:none; }
#navSidebar > ul > li { font-weight:300; position:relative; }
#navSidebar > ul > li.active > a { cursor:default; }
#navSidebar > ul > li.active > a span:last-of-type { 
	cursor:default;
	font-size:1.1em;
	font-weight:500;
	margin-left:1em;
}

#navSidebar span[class^="icon-"] {
	display:inline-block;
	font-size:1em;
	margin-right:0.6em;
	width:1em;
}


#navSidebar hr {
	border-top:   1px solid rgba(  0,  0,  0, 0.1);
	border-bottom:1px solid rgba(255,255,255, 0.4);
}



/* MAIN CONTENT */
main, [role="main"] {
	display:block; /* fix for IE */
	width:100%;
	max-width:41em;
	z-index:1;
}

main hr {
	border-top:1px solid rgba(0,0,0,0.15);
	border-bottom:1px solid rgba(255,255,255,0.05);
	height:2px;
	margin:1em 0;
	width:100%;
}

h1, h2, h3, h4, h5 {
	display:block;
	width:100%;
}
h1, h2 { 
	font-family:Museo Slab, MuseoSlab, 'Adelle-SemiBold', serif;
	font-weight:100;
}
h1 { line-height:1; font-size:3em; }
h2 { border-bottom:1px solid #b3b3b3; font-size:1.5em; margin:0 0 0.5em; }
h3 {
	background:rgba(0,0,0,0.4);
	border-left:5px solid #FC0;
	border-right:5px solid #FC0;
	font-size:1.1em;
	font-weight:300;
	margin:0 0 1em;
	padding:0.1em 1em;
}
h4 {
	background:rgba(0,0,0,0.2);
	padding:0.1em 0.5em;
}
h4, h5 {
	font-weight:500;
}


/*
h3 { border-bottom:1px solid #d6d6d6; font-size:1.4em;  margin:0 0 10px;}
h4 { font-size:1.05em; }
h5 { font-size:1.2em; font-style:italic; margin:0 0 10px; }
*/

.donateButton {
	margin-top:1.5em;
}

#installation ul { list-style:none; margin:0; padding:0; }
#installation ul li pre { font-size:0.8em; margin-left:2em; }

.emphasize1 { font-weight:500; }
.emphasize2 { font-style:italic; }
.emphasize3 { font-weight:500; font-style:italic; }

.iconLink { text-decoration:none; }

.content code, .content pre {
	background:#1a1a1a;
	border:1px solid #0d0d0d;
	border-radius:2px;
	font-family:Consolas, Monaco, Cuisine, monospace;
	font-size:0.8em;
	padding:3px 6px;
}
.content pre {
	white-space:pre-wrap;
	word-wrap:break-word;
}
.content kbd {
	display: inline;
	display: inline-block;
	min-width: 1em;
	padding:3px 6px;
	font: 600 .9em/1 Consolas, Monaco, Cuisine, "Lucida Grande", Lucida, Arial, sans-serif;
	text-align: center;
	text-decoration: none;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	border:1px solid #D6D6D6;
	cursor: default;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;

	background:#F9F9F9;
	background:-moz-linear-gradient(top, rgb(230, 230, 230), rgb(255, 255, 255));
	background:-webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
	color:#404040;
	text-shadow:0 0 2px white;
	-moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgba(200, 200, 200, 0.2), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
	-webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgba(200, 200, 200, 0.2), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
	box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgba(200, 200, 200, 0.2), 0 .1em 0 rgb(160, 160, 160), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
}
kbd[title], .key[title] {
	cursor: help;
}
.content p { font-size:0.95em; line-height:1.7em; padding:0.5em 0; }
.content p:first-of-type { padding-top:0; }
.content p:last-child { padding-bottom:0; }
.content ul, .content ol { list-style-position:outside; margin-left:1.15em; }
.content ol {
	counter-reset:li; /* Initiate a counter */
	margin-left:0; /* Remove the default left margin */
	padding-left:0; /* Remove the default left padding */
}
ol > li {
	position:relative; /* Create a positioning context */
	margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
	padding:4px 0 4px 8px; /* Add some spacing around the content */
	list-style:none; /* Disable the normal item numbering */
	border-top:2px solid #666;
	/*background:#f6f6f6;*/
}
ol > li:before {
	content:counter(li); /* Use the counter as content */
	counter-increment:li; /* Increment the counter by 1 */
	/* Position and style the number */
	position:absolute;
	top:-2px;
	left:-2em;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	width:2em;
	/* Some space between the number and the content in browsers that support
	   generated content but not positioning it (Camino 2 is one example) */
	margin-right:0.5em;
	padding:0;
	border-top:2px solid #666;
	color:#fff;
	background:#666;
	font-weight:500;
	text-align:center;
}
li ol, li ul { margin-top:6px; }
ol ol li:last-child { margin-bottom:0; }


span.inline[class^="icon-"] {
	display:inline-block;
	font-size:0.9em;
	margin:0 0.2em;
	text-align:center;
}
span.inline[class^="icon-"][title] { cursor:help; }
h4 span[class^="icon-"] {
	font-size:0.9em;
	margin:0 0.2em 0 0;
	text-align:center;
}

p.info {
	background:rgba(255,255,255,0.1);
	padding:0.5em 0.8em !important;
	font-style:italic;
}

img.infoImg {
	border:1px solid rgba(255,255,255,0.35);
	padding:5px;
	width:100%;
	max-width:100%;
}
img.origSize {
	width:auto !important;
	max-width:auto !important;
}


footer {
	background:rgba(26,26,26,0.8);
	padding:0.7em 0 0.7em 26.25em; /* 26.25 = 21 / 0.8 (adjusting for footer's font size) */
	font-size:0.8em;
	height:4.5em;
	width:100%;
	z-index:2;

	position:fixed;
	bottom:0;
	left:0;
	right:0;
	text-align:left;
}
#navFooter li { border-left:1px solid #646464; display:inline-block; padding:0 0.5em; }
#navFooter li:first-of-type { border-left-color:transparent; padding-left:0; }
#navFooter li:last-of-type { padding-right:0; }

footer .inactive { display:none !important; }

/* MEDIA QUERIES */
@media only screen and (max-width: 1250px) {
	#container.contentContainer {
		padding:2.5em 2em 0 14em;
	}

	.contentContainer footer {
		font-size:0.65em;
		padding-left:21.54em; /* 21.54 = 14 / 0.65 (adjusting for footer's font size) */
	}
}

@media only screen and (max-width: 850px) {
	.contentContainer #navFooter li:nth-child(2), .contentContainer #navFooter li:nth-child(3) { display:none; } /* hide bug tracker and GitHub issue tracker */
}

@media only screen and (max-width: 650px) {
	#container.contentContainer  {
		padding:1em 1em 0 3em;
	}
	.contentContainer footer {
		display:none; 
	}
}