/* CSS Document */
/*
	Core CSS style For the site
*/

/* Generic */

html, body {
	height:100%;
	overflow-x:hidden;
	overflow-y:auto;
	background-color:#F6F7F4;
}

.content {
	padding:10px 3% 10px 3%;
}

	h1 {
		font-size: 20px;
		color:#555;
		font-weight:bold;
		margin-top: 12px;
		margin-bottom: 8px;
	}
	
	h2 {
		font-size:18px;
		color:#505050;
		font-weight: 600;
		margin-top: 8px;
		margin-bottom: 4px;
	}
	
	h3 {
		font-size:14px;
		color:#747474;
		font-weight: 600;
		margin-top: 4px;
		margin-bottom: 0px;
	}

	table {
		xwidth:100%;
		border-collapse: collapse;
	}

	th {
		background-color:#F7F5EF;
		padding: 8px 5px;
		border: 1px solid #ddd;
		color:grey;
	}
	
	td {
		padding:3px 5px;
	}
	
	table.bordered td {
		border:1px solid #ddd;
	}

label { font-weight: 400;}

input:not([type=checkbox]):not([type=radio]), textarea {
	padding:8px 10px;
	border:1px solid #ddd;
	width:99%;
	margin:3px;
}

input.autosize {
	width:auto !important;
}

select {
	padding: 8px 10px !important;
	border: 1px solid #ddd;
	margin:3px;
}

.imagewrapper img {
	max-width: 100%;
}

.iwrapper {
	position:relative;
	border-top:1px solid #ddd;
	border-left:1px solid #ddd;
	border-right:1px solid #ddd;
	border-bottom:none;
	
}
	.iwrapper:first-child {
		border-radius: 3px 3px 0 0;
	}
	
	.iwrapper:last-child {
		border-bottom:1px solid #ddd;
		border-radius: 0 0 3px 3px;
	}
	
	.iwrapper input:not([type=checkbox]):not([type=radio]), .iwrapper textarea {
		border:none;
		margin:0;
	}

.footer {
	background-color:grey;
	font-size:90%;
	color:white;
	padding: 5px;
}

	.footer * {
		font-size:90%;
		color:#eee;
	}
	
	.footer a:hover {
		color:#eee;
		text-decoration:underline;
		cursor:pointer;
	}

li > a {
	/* display:block; */
}

.banner1 {
	background-color:#eee;
	padding:20px;
}
.banner2 {
	background-color:#f6f6f6;
	padding:14px;
}

.banner3 {
	background-color:#fcfcfc;
	padding:8px;
}

.hot {
	cursor:pointer;
}

/* Text style classes */
.text-fade {
	color:#ccc;
}

/* header */
.header {
	position:fixed;
	width:100%;
	height:60px;
	border-bottom:1px solid #eee;
	z-index: 9;
    opacity: 1;
    background-color: #ffffff;
}

	.header:after {
		content: "";
		display: table;
		clear: both;
	}
	
	.header .rightcol:after {
		content: "";
		display: table;
		clear: both;
	}
	
	.header .rightcol {
		background-color:white;
	}
	
	.header .rightcol .searchbar {
		float: left;
		width: 60%;
	}
	
	.header .rightcol .actionbar {
		float: right;
		width:40%;
		height:100%;
	}

.branding {
	width: 100%;
	height: 100%;
	padding: 0px;
	background-color: #fff;
	text-align:center;
}

	.branding a {
		line-height:58px;
	}
	
	.branding img {
		width:90%;
		max-width:220px;
	}

.searchbar input {
	outline:none;
}

	.searchbar .content:before {
		content: '\f002';
		font-family: FontAwesome;
		color:#bbb;
		font-size: 16px;
	}
	
	.searchbar .content input {
		border:none;
		width:90%;
		height:38px;
		padding-left:10px;
		font-size:14px;
		color: grey;
	}

.actionbar ul {
	margin:0px;
}

	.actionbar ul:after {
		content: "";
		display: table;
		clear: both;
	}
	
	.actionbar ul > li {
		float: right;
		list-style: none;
		width:60px;
		text-align:center;
		line-height: 58px;
		height: 60px;
		border-left:1px solid #eee;
		color:grey;
		cursor:pointer;
	}
	
	.actionbar ul > li:hover {
		background-color:#eee;
	}

/* page content */

.leftcol {
	float: left;
	width: 20%;
	height:100%;
}

.rightcol {
	float: right;
	width: 80%;	
	height:100%;
	position: relative;
}
.page-content {
	width: 100%;
	height:auto;
	min-height:100%;
	padding-top:60px;
	position:absolute;
	background-color: #F6F7F4;
}

	.page-content:after {
		content: "";
		display: table;
		clear: both;
	}


	.page-content .leftcol {
		background-color: #42454A;
		position:relative;
	}
	
	.page-content-navigation ul li {
		list-style: none;
		text-align:left;
		color:white;
		cursor:pointer;
	}
	
	.page-content-dashboard {
		xfont-family: -apple-system, Calibri, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:13px; font-weight:400; color: #333333;
	}

	.page-content-navigation-footer {
		position: fixed;
		bottom: 0px;
		left: 0;
		height: 40px;
		line-height: 40px;
		background-color: rgba(246,247,244, 0.2);
		width: 100%;
		color: white;
		padding: 0px;
	}
		.page-content-navigation-footer .nav-bar-item {
			padding: 0 16px;
		}
/* Responsive */

@media only screen and (max-width: 768px) {
	
	.header .rightcol .searchbar {
		width:100% !important;
	}
	
	.actionbar ul:before {
		content: "\f054";
		display: block;
		top: 50%;
		left: 50%;
		position: absolute;
		font:normal normal normal 14px/1 FontAwesome;
		
		-moz-transform: translate(-50%,-50%) rotate(0deg);
		-webkit-transform: translate(-50%,-50%) rotate(0deg);
		-o-transform: translate(-50%,-50%) rotate(0deg);
		-ms-transform: translate(-50%,-50%) rotate(0deg);
		-khtml-transform: translate(-50%,-50%) rotate(0deg);
		transform: translate(-50%,-50%) rotate(0deg);
		
		transition: all 1s ease;
		-moz-transition: all 1s ease;
		-webkit-transition: all 1s ease;
		-o-transition: all 1s ease;
		-ms-transition: all 1s ease;
		-khtml-transition: all 1s ease;
	}
	
	.actionbar ul {
		padding-top:59px;
		max-height: 59px;
		background-color: #fcfcfc;
		overflow:hidden;
		-webkit-transition: max-height 0.8s ease-out;
		-moz-transition: max-height 0.8s ease-out;
		-o-transition: max-height 0.8s ease-out;
		transition: max-height 0.8s ease-out;
	}
	
	.actionbar ul:hover {
		max-height:500px;
		-webkit-transition: max-height 0.8s ease-out;
		-moz-transition: max-height 0.8s ease-out;
		-o-transition: max-height 0.8s ease-out;
		transition: max-height 0.8s ease-out;
	}
	
	.actionbar ul:hover:before {
		content: "\f054";
		
		-moz-transform: translate(-50%,-50%) rotate(90deg);
		-webkit-transform: translate(-50%,-50%) rotate(90deg);
		-o-transform: translate(-50%,-50%) rotate(90deg);
		-ms-transform: translate(-50%,-50%) rotate(90deg);
		-khtml-transform: translate(-50%,-50%) rotate(90deg);
		transform: translate(-50%,-50%) rotate(90deg);
		transition: all 0.6s ease;
		-moz-transition: all 0.6s ease;
		-webkit-transition: all 0.6s ease;
		-o-transition: all 0.6s ease;
		-ms-transition: all 0.6s ease;
		-khtml-transition: all 0.6s ease;
	}
	
	.header .rightcol .actionbar {
		position: absolute !important;
		top:0px !important;
		right:0px !important;
		width:60px !important;
	}
	
	/*
    .page-content .leftcol, .leftcol {
        display:none;
    }
	*/
	.header .leftcol {
		display:none;
	}
	
	
	.page-content .leftcol {
		width:100%;
		z-index:9;
	}	
	
	.page-content .rightcol, .rightcol {
		float: none;
		width:100%;
	}
}

@media only screen and (min-width: 1400px) {
	.leftcol {
		width: 16%;
	}
	
	.rightcol {
		width: 84%;	
	}
}

@media only screen and (min-width: 1800px) {
	.leftcol {
		width: 12%;
	}
	
	.rightcol {
		width: 88%;	
	}
}