/* Code Box */
.codeBox {
	background-color: @wcfContentBackgroundColor;
	clear: both;
	
	> div {
		padding: @wcfGapMedium @wcfGapLarge @wcfGapMedium @wcfGapMedium;
		
		.boxShadowNative(~"inset 4em 0 0 " @wcfContainerBackgroundColor ~", inset 4.1em 0 0" lighten(@wcfContainerBorderColor, 10%));
		
		> div {
			margin: 0 0 @wcfGapSmall 3.4em;
			
			> h3 {
				font-size: @wcfTitleFontSize;
				font-weight: bold;
				padding-left: @wcfGapSmall;
				position: relative;
				
				> span.icon {
					position: absolute;
					right: 0;
					top: 3px;
				}
			}
		}
		
		> ol {
			list-style-type: decimal;
			margin-left: 3.4em;
			
			> li {
				font-family: Consolas, 'Courier New', monospace;
				margin: 0;
				padding-left: @wcfGapSmall;
				position: relative;
				white-space: pre-wrap;
				word-break: break-all;
				word-wrap: break-word;
				
				> .lineAnchor {
					display: block;
					height: 1.4em;
					left: -3.6em;
					position: absolute;
					top: 0;
					width: 3.0em;
				}
				
				&:target {
					background-color: @wcfHighlightBackgroundColor; 
				}
			}
		}
	}
}

@media only screen and (max-width: 800px) {
	.codeBox {
		> div {
			padding: @wcfGapSmall;
			
			.boxShadow(0, 0, transparent);
			
			> div {
				margin-left: 0;
				
				> h3 {
					padding-left: 0;
				}
			}
			
			> ol {
				list-style-type: none;
				margin-left: 0;
				overflow: auto;
				
				> li {
					padding-left: 0;
					white-space: pre;
					word-wrap: normal;
				}
			}
		}
	}
}

/* ############## Code Styles ############## */

/* -- -- -- Code Box -- -- -- */

.codeBox .hlQuotes {
	color: red;
}

.codeBox .hlComments,
.codeBox .hlOperators {
	color: green;
}

.codeBox .hlKeywords1 {
	color: blue;
}

.codeBox .hlKeywords2 {
	color: darkred;
}

.codeBox .hlKeywords3 {
	color: darkviolet;
}

.codeBox .hlKeywords4 {
	color: darkgoldenrod;
}

.codeBox .hlKeywords5 {
	color: crimson;
}

.codeBox .hlNumbers {
	color: darkorange;
}

/* -- -- -- Code Highlighters -- -- -- */

/* DIFF */

.diffHighlighter .hlComments {
	color: darkviolet;
}

.diffHighlighter .hlRemoved {
	color: red;
}

.diffHighlighter .hlAdded {
	color: green;
}

/* PHP */

.phpHighlighter .hlKeywords2 {
	color: green;
}

.phpHighlighter .hlComments {
	color: darkgoldenrod;
}

/* CSS */

.cssHighlighter .hlComments {
	color: #236e26;
}

.cssHighlighter .hlColors {
	color: #751116;
}

.cssHighlighter .hlNumbers,
.sqlHighlighter .hlNumbers {
	color: #1906fd;
}

.cssHighlighter .hlKeywords1 {
	color: #87154f;
}

.cssHighlighter .hlKeywords2 {
	color: #994509;
}

.cssHighlighter .hlKeywords3,
.cssHighlighter .hlKeywords4 {
	color: inherit;
}

/* SQL */

.sqlHighlighter .hlKeywords1 {
	color: #663821;
}

.sqlHighlighter .hlKeywords2 {
	color: #871550;
}

/* Quote Box */
.quoteBox {
	background-color: @wcfContentBackgroundColor;
	clear: both;
	min-height: 28px;
	margin-bottom: @wcfGapTiny;
	position: relative;
	
	&.containerPadding {
		padding-left: 54px;
	}
	
	&::before {
		content: "\f10d";
		color: @wcfDimmedColor;
		font-family: FontAwesome;
		font-size: 28px;
		position: absolute;
		left: @wcfGapMedium;
		top: @wcfGapSmall;
	}
	
	> header {
		padding-bottom: @wcfGapTiny;
		border-bottom: 1px dotted @wcfContainerBorderColor;
		margin-bottom: @wcfGapSmall;
		
		> h3 {
			font-weight: bold;
		}
	}
	
	/* nested quotes */
	.quoteBox {
		background-image: none;
		padding-left: @wcfGapLarge;
		min-height: 0;
		
		&::before {
			display: none;
		}
	}
}

@media only screen and (max-width: 800px) {
	.quoteBox {
		&::before {
			font-size: 14px;
			left: @wcfGapSmall;
		}
		
		&.containerPadding {
			padding-left: 28px;
		}
		
		.quoteBox {
			padding-left: @wcfGapSmall;
		}
	}
}

/* spoiler box */
.spoilerBox {
	background-color: @wcfContentBackgroundColor;
	clear: both;
	padding-bottom: @wcfGapSmall;
	
	> header {
		margin-bottom: @wcfGapSmall;
	}
	
	> div {
		overflow: hidden;
		padding-bottom: @wcfGapSmall;
	}
}

/* inline code tag */
.inlineCode {
	background-color: @wcfContentBackgroundColor;
	border: 1px solid @wcfContainerBorderColor;
	border-radius: 3px;
	display: inline-block;
	font-family: Consolas, 'Courier New', monospace;
	margin: 0 2px;
	padding: 0 5px;
	word-break: break-all;
	word-wrap: break-word;
}

/* smiley list */
ul.smileyList > li {
	display: inline;
}

/* bbcode table */
.bbcodeTable {
	display: inline-block;
}

@media screen and (max-width: 800px) {
	.bbcodeTable {
		display: block;
	}
}

/* media provider */
/* thanks for this generic class name usage, github */
.gist .highlight {
	background-color: inherit;
}