html, body {
	margin:0;
	padding:0;
	height:100%;
	overflow-x: hidden;
}
body {
	background-color: #eee;
	color:#888;
}

/* GENERICS */
.wrapper{display:block; width:100%; margin:0; padding:0; text-align:left; word-wrap:break-word;}
.clear, .group{display:block;}
.clear::before, .clear::after, .group::before, .group::after{display:table; content:"";}
.clear, .clear::after, .group, .group::after{clear:both;}

/* Centre a containing element horizontally */
.hoc{display:block; margin:0 auto;}

.header, .footer {
	position:fixed;
	height: 50px;
	background-color: #333;
	color:#ccc;
	font-size: 20px;
}

.footer {
	height: 32px;
	bottom:0;
	top:auto;
	font-size: 16px;
	color:#888;
}

.framedcontent {
	position:absolute;
	top:50px;
	bottom:32px;
	background-color: #eee;
	color: #333;
	overflow:hidden;
}

.content {
	background-color: #eee;
	color: #333;
	overflow:auto;
}

a{color:#F4A330;}
a{outline:none; text-decoration:none;}
a:active, a:focus{background:transparent;}/* IE10 + 11 Bugfix - prevents grey background */

.menu {
		padding: 0;
		margin: 0;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		justify-content: space-around;
		-webkit-justify-content: space-around;
		flex-wrap: nowrap;
		-webkit-flex-wrap: nowrap;
}

.menu a {
	margin:0px 5px 0px 2px;
	font-size:16px;
	width: 100%;
}

.menu a:last-child {
	margin-right:2px;
}

.icon {
	background-color:transparent;
	border: none;
	color: white;
	padding: 0;
	cursor: pointer;
	width: 30px;
	height: 30px;
	vertical-align: middle;
}
.icon img {
	border: none;
	padding: 0;
	width: 30px;
	height: 30px;
	vertical-align: middle;
}

.cmdbutton {
	display: block;
	-moz-box-shadow:inset 0px 1px 8px 0px #6096b8;
	-webkit-box-shadow:inset 0px 1px 8px 0px #6096b8;
	box-shadow:inset 0px 1px 8px 0px #6096b8;
	background-color:#26516d;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #26516d;
	cursor:pointer;
	padding:1px 8px;
	text-decoration:none;
	text-align: center;
	font-size: 16px;
	color:#ccc;
	margin-bottom: 2px;
}
.cmdbutton:active, .cmdbutton:focus {
	background-color:#6096b8;
} 

.selbutton {
	display: inline-block;
	-moz-box-shadow:inset 0px 1px 8px 0px #fff;
	-webkit-box-shadow:inset 0px 1px 8px 0px #fff;
	box-shadow:inset 0px 1px 8px 0px #fff;
	background-color:#ddd;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #aaa;
	cursor:pointer;
	padding:5px 10px;
	text-decoration:none;
	text-align: center;
	font-size: 16px;
	color:#333;
}
.selbutton:active, .selbutton:focus {
	background-color:#eee;
} 

.smaller {
	padding:2px 5px;
	font-size: 14px;
}

.greenbutton {
	display: inline-block;
	-moz-box-shadow:inset 0px 1px 8px 0px #609668;
	-webkit-box-shadow:inset 0px 1px 8px 0px #609668;
	box-shadow:inset 0px 1px 8px 0px #609668;
	background-color:#26512d;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #26512d;
	cursor:pointer;
	/* color:#ffffff; */
	padding:1px 8px;
	text-decoration:none;
	text-align: center;
	font-size: 16px;
	color:#ccc;
}
.greenbutton:active, .greenbutton:focus {
	background-color:#609668;
} 

.modal,
.modal-box {
    z-index: 900;
}

.hidden {
	display: none;
}

.block {
	display: block;
}

.inline {
	display: inline-block;
	padding: 0px 5px;
}

.centered {
	margin: auto;
}

.bordered {
	border:1px solid #303030;
	border-collapse: collapse;
}

.modal { 
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(0,0,0,0.5);
	overflow: auto;
}

.modal-box {
	position: relative;
	width: 80%;
	max-width: 920px;
	margin: 100px auto;
	padding: 10px;
	background: #ECEFF1;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #26516d;
	align-content: center;
	text-align: center;
}

/* Spinner CSS Animation */

.sk-fading-circle {
	margin: 100px auto;
	width: 40px;
	height: 40px;
	position: relative;
	}

	.sk-fading-circle .sk-circle {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	}

	.sk-fading-circle .sk-circle:before {
	content: '';
	display: block;
	margin: 0 auto;
	width: 15%;
	height: 15%;
	background-color: #333;
	border-radius: 100%;
	-webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
			animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
	}
	.sk-fading-circle .sk-circle2 {
	-webkit-transform: rotate(30deg);
		-ms-transform: rotate(30deg);
			transform: rotate(30deg);
	}
	.sk-fading-circle .sk-circle3 {
	-webkit-transform: rotate(60deg);
		-ms-transform: rotate(60deg);
			transform: rotate(60deg);
	}
	.sk-fading-circle .sk-circle4 {
	-webkit-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
			transform: rotate(90deg);
	}
	.sk-fading-circle .sk-circle5 {
	-webkit-transform: rotate(120deg);
		-ms-transform: rotate(120deg);
			transform: rotate(120deg);
	}
	.sk-fading-circle .sk-circle6 {
	-webkit-transform: rotate(150deg);
		-ms-transform: rotate(150deg);
			transform: rotate(150deg);
	}
	.sk-fading-circle .sk-circle7 {
	-webkit-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
			transform: rotate(180deg);
	}
	.sk-fading-circle .sk-circle8 {
	-webkit-transform: rotate(210deg);
		-ms-transform: rotate(210deg);
			transform: rotate(210deg);
	}
	.sk-fading-circle .sk-circle9 {
	-webkit-transform: rotate(240deg);
		-ms-transform: rotate(240deg);
			transform: rotate(240deg);
	}
	.sk-fading-circle .sk-circle10 {
	-webkit-transform: rotate(270deg);
		-ms-transform: rotate(270deg);
			transform: rotate(270deg);
	}
	.sk-fading-circle .sk-circle11 {
	-webkit-transform: rotate(300deg);
		-ms-transform: rotate(300deg);
			transform: rotate(300deg); 
	}
	.sk-fading-circle .sk-circle12 {
	-webkit-transform: rotate(330deg);
		-ms-transform: rotate(330deg);
			transform: rotate(330deg); 
	}
	.sk-fading-circle .sk-circle2:before {
	-webkit-animation-delay: -1.1s;
			animation-delay: -1.1s; 
	}
	.sk-fading-circle .sk-circle3:before {
	-webkit-animation-delay: -1s;
			animation-delay: -1s; 
	}
	.sk-fading-circle .sk-circle4:before {
	-webkit-animation-delay: -0.9s;
			animation-delay: -0.9s; 
	}
	.sk-fading-circle .sk-circle5:before {
	-webkit-animation-delay: -0.8s;
			animation-delay: -0.8s; 
	}
	.sk-fading-circle .sk-circle6:before {
	-webkit-animation-delay: -0.7s;
			animation-delay: -0.7s; 
	}
	.sk-fading-circle .sk-circle7:before {
	-webkit-animation-delay: -0.6s;
			animation-delay: -0.6s; 
	}
	.sk-fading-circle .sk-circle8:before {
	-webkit-animation-delay: -0.5s;
			animation-delay: -0.5s; 
	}
	.sk-fading-circle .sk-circle9:before {
	-webkit-animation-delay: -0.4s;
			animation-delay: -0.4s;
	}
	.sk-fading-circle .sk-circle10:before {
	-webkit-animation-delay: -0.3s;
			animation-delay: -0.3s;
	}
	.sk-fading-circle .sk-circle11:before {
	-webkit-animation-delay: -0.2s;
			animation-delay: -0.2s;
	}
	.sk-fading-circle .sk-circle12:before {
	-webkit-animation-delay: -0.1s;
			animation-delay: -0.1s;
	}

	@-webkit-keyframes sk-circleFadeDelay {
	0%, 39%, 100% { opacity: 0; }
	40% { opacity: 1; }
	}

	@keyframes sk-circleFadeDelay {
	0%, 39%, 100% { opacity: 0; }
	40% { opacity: 1; } 
	}