/* Position relative so that we can hide behind the welcome message*/
#page_body {
	position: relative
}

#statuspage {
	margin-top: 5px;
}
/* Welcome Message Setup */
#welcomepage {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: white;
	.jumbotron {
		width: 80%;
		text-align: center;
		left: 0;
		right: 0;
		margin: auto;
	}
}

/* Title Boxes */
.displaybox {
	border-radius: 4px;
	position: relative;
	border: 1px solid #ddd;
	-webkit-box-shadow: 6px 10px 11px -2px rgba(163, 163, 163, 0.49);
	-moz-box-shadow: 6px 10px 11px -2px rgba(163, 163, 163, 0.49);
	box-shadow: 6px 10px 11px -2px rgba(163, 163, 163, 0.49);
	.title-bar {
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		font-weight: bold;
		background-color: #f5f5f5;
		border-bottom: 1px solid #ddd;
		color: #6F6F6F;
		text-align: center;
		font-size: 120%;
		cursor:move;
		padding: 1px;
	}
	.reload {
		right: 4px;
		position: absolute;
		cursor: pointer;
	}
	.shadow {
		display:none;
		background-color: lightgrey;
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 2;
		opacity: .5;
	}
	.box {
		padding: 5px;
		border: 1px solid #d1d1d1;
		border-radius: 5px;
		margin: 5px;
		margin-left: 2.5px;
		margin-right: 2.5px;
	}
	.container-fluid .less-padding {
		padding-left: 0px;
		padding-right: 0px;
	}
	.content {
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		background-color: white;
		padding: 5px;
		font-size: 95%;
		ul {
			margin-left: -15px;
		}
	}
}

#page_Main_Overview_overview {
	.summary {
		border: 1px solid lightgrey;
		border-radius: 5px;
		padding: 3px;
		margin-bottom: 10px;
		font-size: small;
		.status-element {
			border-radius: 1px;
			padding: 2px;
			margin-bottom: 2px;
			.status-icon {
				position: absolute;
				right: 20px;
			}
		}
		.status-element:hover {
			background-color: whitesmoke;
		}
	}
	.showAll {
		cursor: pointer;
	}
	.showAll:hover {
		background-color: rgba(128, 128, 128, 0.23);
		border-radius: 20px;
	}
	.panel-group {
		margin-bottom: 0px;
	}
}

/* The header of the Sysalert box */
.sysalerts {
	padding: 5px;
	div {
		padding-bottom: 0.5em;
	}
	p {
		font-size:85%;
	}
}


#notifications_group {
	.panel-heading {
		cursor: pointer;
	}
	/* So we have an anchor for the timestamp */
	.panel-body {
		position: relative;
		padding: 5px;
	}

	.panel-heading {
		padding: 5px;
		.actions {
			right: 20px;
			position: absolute;
			i.fa:hover {
				color:black;
			}
		}
	}
}

.timestamp {
	position: absolute;
	right: -1px;
	bottom: -1px;
	padding: 2px .5em;
	font-size: .8em;
	text-transform: capitalize;
	font-variant: small-caps;
	border-style: solid;
	border-width: 1px;
	-webkit-border-radius: 4px 0 0 0;
	-moz-border-radius: 4px 0 0 0;
	border-radius: 4px 0 0 0;
}

.link {
	position: absolute;
	left: -1px;
	bottom: -1px;
	padding: 2px .5em;
	font-size: .8em;
	font-variant: small-caps;
	border-style: solid;
	border-width: 1px;
	-webkit-border-radius: 0 4px 0 0;
	-moz-border-radius: 0 4px 0 0;
	border-radius: 0 4px 0 0;
	a:hover, a:active, a:visited, a:focus {
		color: inherit;
		text-decoration: none;
	}
}

.panel-title {
	font-size: inherit;
}

.extended_text {
	font-size: small;
	max-height: 100px;
	overflow-x: hidden;
	overflow-y: scroll;
	border: 1px solid lightgrey;
	padding: 2px;
	margin-bottom: 15px;
	border-radius: 5px;
}


//stuff

.sub-header {
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
}

/*
* Top navigation
* Hide default border to remove 1px line.
*/
.navbar-fixed-top {
	border: 0;
}

/*
* Sidebar
*/

/* Hide for mobile, show later */
.sidebar {
	display: none;
}
	@media (min-width: 768px) {
	.sidebar {
		position: fixed;
		top: 29px;
		bottom: 0;
		left: 0;
		z-index: 2;
		display: block;
		padding: 20px;
		overflow-x: hidden;
		overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
		background-color: #f5f5f5;
		border-right: 1px solid #eee;
	}
}

/* Sidebar navigation */
.nav-sidebar {
	margin-right: -21px; /* 20px padding + 1px border */
	margin-bottom: 20px;
	margin-left: -20px;
}
.nav-sidebar > li > a {
	padding-right: 20px;
	padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
	color: #fff;
	background-color: #428bca;
}


/*
* Main content
*/

.main {
	padding: 20px;
}
@media (min-width: 768px) {
	.main {
		padding-right: 40px;
		padding-left: 40px;
	}
}
.main .page-header {
	margin-top: 0;
}


/*
* Placeholder dashboard ideas
*/

.placeholders {
	margin-bottom: 30px;
	text-align: center;
	h4 {
		margin-bottom: 0;
	}
}

.placeholder {
	margin-bottom: 20px;
	img {
		display: inline-block;
		border-radius: 50%;
	}
}

/* Page titles, over the right */
ul>h4 {
	padding-left: 5%;
}

h3,h2 {
	margin-top: -0.5em;
}


/* I like the 'close' button to be more visible. */
button.close {
	opacity: 0.6;
}

/* Blog Box */
.blogheader {
	padding-top: 1em;
	font-size: 1.2em;
}

.blogheader:first-of-type {
	padding-top: 0;
}

.datestamp {
	padding-top: 0.2em;
	font-size: 0.8em;
}
.author {
	padding-bottom: 0.2em;
	font-size: 0.8em;
}

.alert {
	width: 100%;
}

// This is to remove padding from the blog posts, as they may render horizontally
// or vertically.
.nopadding {
	padding: 0 !important
}

// Make jQuery UI Tooltips look the same as FreePBX Tooltips.
.ui-tooltip {
	max-width: 300px;
	padding: 8px;
	box-shadow: none;
	-webkit-box-shadow: none;
}
