/*
define only

- debuging styles (debugging headline, ...)
*/

.debug {
	border: 1px solid #FF6C2D;
	color: #FF6C2D;
	font-size: 10px;
	padding: 4px;
	background-color: #F9F9F9;
	font-weight: normal;
}

	.debug h1, .debug h2 {
		text-decoration: underline;
		font-family: 'Open Sans', sans-serif;
		font-size: 10px;
		font-weight: normal;
		margin: 0 0 10px 0;
	}

	.debug h2 {
		text-decoration: none;
	}

	.debug .error {
		color: red;
		font-weight: bold;
	}

	.debug a {
		color: #FF6C2D;
		background-color: #F9F9F9;
	}

	.debug.CssJavascriptIncludes {
		position: fixed;
		top: 90px;
		padding: 6px 5px 5px 5px;
		z-index: 1;
	}

		.debug.CssJavascriptIncludes.minimized {
			-ms-opacity: 0.6;
			opacity: 0.6;
		}

		.debug.CssJavascriptIncludes .min-or-max {
			display: block;
			text-align: right;
			margin-bottom: 10px;
		}

			.debug.CssJavascriptIncludes .min-or-max a {
				border: 1px solid grey;
				padding: 0 3px 1px 3px;
				-ms-border-radius: 3px;
				border-radius: 3px;
			}

/* Debug Mode START */
#debugContainer div.container.seperate {
	counter-increment: row;
	counter-reset: column;
	display: block !important; /* override tab logic */
	position: relative;
}

	#debugContainer div.container.seperate > div.row {
		border: 3px solid #d00;
		padding: 5px;
	}

		#debugContainer div.container.seperate:before,
		#debugContainer div.container.seperate > div.row > div[class^='col-lg']:before,
		#debugContainer div[class^='col-lg'] div.container:before,
		#debugContainer div.box:before {
			background: #fff;
			border-radius: 50%;
			display: block;
			font-size: 2em;
			height: 2em;
			line-height: 1.8em;
			text-align: center;
			width: 2em;
			z-index: 1;
		}

	#debugContainer div.container.seperate:before {
		border: 3px solid #d00;
		color: #d00;
		content: counter(row);
		left: -1em;
		position: absolute;
	}

	#debugContainer div.container.seperate > div.row > div[class^='col-lg'] {
		border: 3px solid #ea0;
		counter-increment: column;
		counter-reset: box;
		position: relative;
	}

		#debugContainer div.container.seperate > div.row > div[class^='col-lg']:before {
			border: 3px solid #ea0;
			content: counter(column);
			color: #ea0;
			margin: -0.5em auto 0;
		}

#debugContainer div.box,
#debugContainer div[class^='col-lg'] div.container {
	border: 3px solid #04e;
	counter-increment: box;
	position: relative;
}

	#debugContainer div[class^='col-lg'] div.container:before,
	#debugContainer div.box:before {
		border: 3px solid #04e;
		content: counter(box);
		color: #04e;
		margin: -0.5em auto 0;
	}

.debug b {
	word-wrap: break-word;
}
/* Debug Mode END */