/*
	Template styling
*/
.tpl-wrapper {
	position: relative;
	height: 100%;
}

/* Header */
.tpl-title-pane {
	position:fixed;
	height: 60px;
	left: 0;
	top: 0;
	right: 0;
	background-color: #0f0;
	border-bottom: 1px #060 solid;
	padding: .2em;
	z-index:3;
}

.tpl-title-pane h1 {
	float: left;
	font-size: 1.5em;
}

.tpl-title-pane h2 {
	margin-top: 26px;
	font-size: 1.2em;
	float: right;
}

/* Menu activator */
.tpl-menu-activator {
	position:fixed;
	right: 0;
	bottom: 0;
	height:60px;
	width:60px;
	background-color: #060;
	cursor: pointer;
	z-index:6;
}

.tpl-menu-activator .bar1,
.tpl-menu-activator .bar2,
.tpl-menu-activator .bar3 {
	width: 35px;
	height: 6px;
	background-color: #fff;
	margin: 10px auto;
	transition: 0.4s;
}

 /* Menu */
.tpl-menu-pane-backdrop {
	position: fixed;
	display: none;
	top: 60px;
	bottom: 60px;
	left:0;
	width:100%;
	background-color: #666;
	height: 100%;
	z-index:4;
	border-right: 1px #000 solid;
}

.tpl-menu-pane {
	position: absolute;
	display: none;
	top: 60px;
	bottom: 60px;
	left:0;
	width:100%;
	overflow: auto;
	z-index: 5;
}

/* Hidden menu activator */
#tpl-menu-hidden ul {
	display: none;
}

.tpl-hidden-activator {
	background-color: #888;
	margin: .2em;
	padding: .3em;
}

/* Main content container */
.tpl-content-header {
	margin-bottom: 4px;
}

.tpl-content-pane {
	position: absolute;
	top: 60px;
	left: 0;
	right: 0;
	bottom: 60px;
	padding: 5px 10px 20px 10px;
	background-color: #999;
	overflow: auto;
}

/* Footer */
.tpl-footer-pane {
	position:fixed;
	height: 60px;
	left: 0;
	bottom: 0;
	right: 60px;
	background-color: #cfc;
	border-top: 1px #060 solid;
	padding: .2em;
	z-index:6;
}

/* Overlays */
#overlay-widget-group-right {
	bottom: 60px;
}

/*
	Expanded styling for devices over 800 pixels in width
*/
@media only screen and (min-width: 1200px)
{
	/* Header */
	.tpl-title-pane {
		position:absolute;
		right: 0;
	}

	/* Menu activator */
	.tpl-menu-activator {
		position:absolute;
		display: none;
	}

	/* Menu */
	.tpl-menu-pane-backdrop {
		display: block;
		width:180px;
	}

	.tpl-menu-pane {
		display: block;
		width:180px;
		overflow: inherit;
	}

	/* Main Content */
	.tpl-content-pane {
		left: 180px;
		bottom: auto;
	}

	/* Footer */
	.tpl-footer-pane {
		display: none;
	}

}