/** Side pane **/

.content-container.content-offset-sidepane-left {
	margin-left: 320px;
}
.content-container.content-offset-sidepane-thin-left {
	margin-left: 200px;
}

.sidepane-colorpad {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
}
.sidepane-colorpad-thin {
	width: 200px;
}

.sidepane {
	float: left;
	height: 100%;

	/* This has been moved within a media query (see end of file) so that we can use the tag style when on a narrow screen */
	/*background: transparent !important;*/ /* !important overrides tag styles */

	padding-bottom: 1000000px;
	margin-bottom: -1000000px;
}

/* Scroll content system */

@media(min-width: 768px) {
	.sidepane:before {
		content:'';
		float: left;
		height: 100%;
	}

	.sidepane-content {
		position: relative;
	}

	.sidepane-content:after {
	    content:'';
	    display: block;
	    clear: both;
	}

	.sidepane-fixed .sidepane-content-inner {
		position: absolute;
		top: 0; bottom: 40; left: 0; right: 0;
		overflow: scroll;
	}
}
/*@media(max-width: 767px) {
	.sidepane-fixed .sidepane-content-inner {
		bottom: none !important;
	}
}*/

/** **/

.sidepane-fixed {
	position: fixed;
}

.sidepane-pad {
	padding-top: 15px;
	padding-left: 10px;
	padding-right: 20px;
}
.sidepane.fixed-width {
	width: 290px;
}
.sidepane-thin.fixed-width {
	width: 180px;
}
.sidepane-colorpad.fixed-width {
	min-width: 320px;
}

.sidepane h1 {
	/* there were !important signs on this, but now removed to make overriding easier */
	padding: 0;
	margin: 0;

	/*font-family: 'Roboto Slab', serif;*/
	font-family: "Open Sans";
	font-size: 24px;
	font-weight: normal;
	color: #fff;
}

.sidepane h1 .fa {
	color: rgba(255, 255, 255, 0.55);
	display: inline-block;
	font-size: 75%;
	margin-right: 3px;
	margin-top: -5px;
	vertical-align: middle;
}

.sidepane .sidepane-header a {
	text-decoration: none !important;
	font-weight: bold;
}

.sidepane .sidepane-header a:hover h1 .fa {
	color: #fff;
}

/*.sidepane .sidepane-header */a.rootNodeLink,
.sidepane .sidepane-header .ownerLink  {
	color: #fff;
	display: block;
	margin-bottom: 5px;
	opacity: 0.75;
	margin-left: 3px;
}

/*.sidepane .sidepane-header*/a.rootNodeLink:hover,
.sidepane .sidepane-header a.ownerLink:hover {
	opacity: 1.00;
}


.sidepane .sidepane-header {
	/*margin-bottom: 10px;*/
	margin: 0 0 10px !important;
	padding-bottom: 5px;
	border-bottom: 4px solid rgba(255,255,255,0.25);
}

.sidepane .sidepane-header-editing h1 {
	border: 1px dotted #fff;
	padding-left: 5px !important;
	padding-right: 5px !important;
}

.sidepane .sidepane-header-editing h1:focus {
	outline: 0px;
}

.sidepane .tags > span:first-child {
	color: #fff;
	text-transform: uppercase;
	font-size: 10px;
	display: inline-block;
	margin-left: 5px;
	padding-right: 5px;
}

.sidepane .tags .tag {
	background: rgba(0,0,0,0.05);
	color: #fff;
	border: 1px solid #fff;
}

.sidepane h2 a {
	color: #fff;
	text-decoration: none;
}

.sidepane h2 {
	padding: 7px;
	padding-top: 0px;
	padding-left: 5px;
	padding-bottom: 5px;
	margin: 0px;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: bold;
	color: #fff;
	display: block;
}

.sidepane h2 .subtitle {
	display: block;
	font-weight: normal;
	opacity: 0.50;
	text-transform: none;
	float: right;
}

.sidepane h2 .button, .sidepane h2 img {
	float: right;
}

.sidepane .sidepane-section {
	padding-bottom: 10px;
	/*padding-top: 7px;*/
}

.sidepane .sidepane-section-inactive {
	opacity: 0.75;
}

.sidepane .sidepane-section .gapBottom {
	margin-bottom: 5px;
}

.sidepane .sidepane-section > ul {
	padding: 0px;
	margin: 0px;
	list-style: none;
	font-size: 13px;
}

.sidepane .sidepane-section > ul li {
	padding: 0;
	margin: 0;
}

.sidepane .sidepane-section > ul li a {
	color: rgba(255,255,255,0.75);
	text-decoration: none;
	display: block;
	padding: 5px;
	cursor: pointer;
}
.sidepane .sidepane-section > ul li a:hover {
	color: rgba(255,255,255,1.0);
	background: rgba(0,0,0,0.05);
}
.sidepane .sidepane-section > ul li a.active {
	font-weight: bold;
}

.sidepane .sidepane-section > ul li a span.sidebar-count {
	float: right;
	font-size: 11px;
	color: #fff !important;
	font-weight: normal !important;
	padding-top: 2px;
	border-radius: 3px;
	background: #51aaef;
	padding-left: 3px;
	padding-right: 3px;
	font-weight: bold !important;
} 

.sidepane .sidepane-section > div {
	padding-left: 4px;
	padding-right: 8px;
}

.sidepane .fa {
	color: #fff;
}

/*
.sidepane .sidepane-section input {
	vertical-align: middle;
}
.sidepane .sidepane-section > div label {
	margin-right: 15px;
}
.sidepane .sidepane-section > div input {
	margin-right: 3px;
    margin-top: -3px;
}
*/

.sidepane .sidepane-section-header-toggle {
	cursor: pointer;
}

/*
.sidepane .sidepane-section > div .indent {
	padding-left: 5px;
}
.sidepane .sidepane-section > div .indent-noIcon {
	padding-left: 17px;
}
.sidepane .sidepane-section > div .indent .fa {
	margin-right: 5px;
}
*/

.sidepane .helpPopover {
	margin-top: 10px;
}
.sidepane .helpPopover .helpPopover-toggle {
	font-size: 22px;
}

/***********************************************************/

/** Responsiveness **/

@media (max-width: 767px) {
	.sidepane {
		float: none;

		padding-bottom: 0;
		margin-bottom: 0;
	}

	.sidepane-colorpad {
		display: none;
	}

	.sidepane-pad {
		padding-bottom: 10px;
		padding-right: 10px;
	}

	.sidepane-fixed {
		position: relative;
	}

	.sidepane.fixed-width {
		width: auto;
	}
}

@media (min-width: 768px) {
	.sidepane-colorpadded {
		background: transparent !important;
	}
}

/***********************************************************/

/** Sidepane Themes **/

/* Dark (for if the background is light) */

.sidepane-dark {

}

.sidepane-dark h1,
.sidepane-dark h1 .fa,
.sidepane-dark .tags > span:first-child,
.sidepane-dark h2 a,
.sidepane-dark h2,
.sidepane-dark .fa {
	color: #474747;
}

.sidepane-dark .sidepane-section > ul li a,
.sidepane-dark .sidepane-section > ul li a:hover,
.sidepane-dark .sidepane-section > ul li a.active {
	color: #727272;
}

/***********************************************************/

/** Sidepane-Navbar **/
/* A sidepane which displays specifically as a navbar on the side */

.content-container.content-offset-sidepane-navcol-left {
	margin-left: 215px;
}

.sidepane-navcol {
	width: 205px;
	padding-top: 15px;
	padding-left: 10px;
	color: rgba(0,0,0,0.75); /* as otherwise defaults to white because of .sidepane */
}

.sidepane-navcol .fa {
	color: rgba(0,0,0,0.75); /* as otherwise defaults to white because of .sidepane */
}

.sidepane-navcol > div {
	border-radius: 3px;
	border: 1px solid;
	border-color: #e5e6e9 #dfe0e4 #d0d1d5;
	background: #fff;
}

.sidepane-navcol .section {
	border-bottom: 1px solid #e5e6e9;
}
.sidepane-navcol .section:last-child {
	border-bottom: 0px;
}

.sidepane-navcol .section > a,
.sidepane-navcol .section .subsection > a {
	display: block;
	padding: 14px 12px;
	color: rgba(0,0,0,0.75);
	text-decoration: none;
}

.sidepane-navcol .section .subsection > a {
	padding-top: 0px;
	padding-bottom: 10px;
	padding-left: 18px;
}

.sidepane-navcol .section .subsection > a .fa {
	margin-right: 5px;
}

.sidepane-navcol .section-header {
	background: #f6f7f8;
	font-weight: bold;
}

.sidepane-navcol .section-header > a .fa {
	color: rgba(0,0,0,0.75);
	font-size: 15px;
	margin-right: 5px;
	font-weight: bold;
}

.sidepane-navcol .section-selected > a {
	font-weight: bold;
}

.sidepane-navcol .section-selected-active > a {
	color: #51aaef;
}

.sidepane-navcol .section-selected > a:first-child {
	padding-bottom: 6px;
}

.sidepane-navcol .section > a.sub {
	padding-left: 25px;
	padding-top: 6px;
	padding-bottom: 6px;

	font-size: 12px;
	font-weight: normal;
	color: rgba(0,0,0,0.75);
}
.sidepane-navcol .section > a.sub-selected {
	font-weight: bold;
	color: #51aaef;
}

.sidepane-navcol .section > a:last-child {
	padding-bottom: 12px !important;
}

@media(max-width: 767px) {
	.sidepane-navcol {
		display: none;
	}

	.content-container.content-offset-sidepane-navcol-left {
		margin-left: 0px;
	}
}