/* Top Navigation Menu */

.tsr-topnav {
	overflow: hidden;
	background-color:var(--main-color-scheme-a);	
}

.tsr-topnav a {
	color: var(--secondary-font-color);
	font-family: var(--secondary-font);
	font-weight:600;
	font-size: 15px;
	text-align: center;
	float: left;
	display: block;
	padding: 12px 16px;	
}

.tsr-topnav a:hover {
	background-color:var(--main-color-scheme-b);
}

.tsr-topnav .active {
	background-color:var(--main-color-scheme-b);
}

.tsr-topnav .icon {
	display: none;
}

/* General Web Template */

.top-container {
	margin:auto;
	width:100%;
	text-align:center;
	padding-top:20px;
	padding-bottom:10px;
	background-repeat:no-repeat;
	background-size: cover;
}

.logo {
	width:100%;
}

.logo img {
	width:500px;
}

.stats-container {
	width:100%;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
	margin-bottom:10px;
	background-color:var(--main-color-scheme-c);
	padding:3px 3px;
	border-radius:6px;		
}

.wrap {
	margin:auto;
	width:100%;
	min-height: 100%;
}

.template {
	width:75%;
	min-width:1240px;
	margin:auto;
	min-height:920px;
	z-index: 1;
}

.body {
	width:100%;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;  
	margin:auto;
}

.footer {
	width:100%;
	font-size:12px;
	font-family: var(--secondary-font);
	font-weight:600;
	text-align:center;
	background-color: var(--main-color-scheme-c);
	position: relative;
	clear:both;
	padding-top:25px;
	padding-bottom:25px;
}

.right-menu {
	width:22%;
	float:right;
	margin-left:10px;
}

.left-menu {
	width:22%;
	float:left;
	margin-right:10px;
}

.half-content {
	width: calc(78% - 50px);
	margin-bottom:100px;
}

.full-content {
	width:calc(100% - 20px);
	margin-bottom:100px;
}

.left-content{
	float:right;
}

.right-content{
	float:left;
}

.left-menu, .right-menu, .half-content, .full-content  {
	background-color:var(--main-color-scheme-c);
	padding:10px;
	border-radius:6px;
}

.pageheading {
	width:100%;
	font-family: var(--secondary-font);
	font-size:24px;
	font-weight:600;
	color:var(--main-color-scheme-a);
	text-indent:10px;
	padding-top:10px;
	padding-bottom:10px;
	border-bottom:3px solid var(--main-color-scheme-a);
}

/* Stats Bar */

.stats-bar {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-areas:
		"grid-a grid-b grid-c grid-d";
		grid-gap:4px;
	text-decoration:none;
	font-family: var(--secondary-font);
	color:var(--secondary-font-color);
	padding:6px;
}

.stat-bar {
	text-align:left;
	border-radius:6px;
	background-color:var(--main-color-scheme-a);
	padding:8px;
}

.stat-bar-title {
	height:12px;
	padding:5px;
}

.stat-bar-image img {
	width:14px; 
	height:14px;
}

.stat-bar-image {
	padding-right:4px;
	float:left;
}

/* Side Menu */

.categories {
	width:100%;
	text-align:center;
}

.navigation {
	text-align:center;
	padding:5px;
	margin-top:2px;
	margin-bottom:-5px;
}

.smart-grid-menu
{
	padding-bottom:3px;
}

.menuicon:last-child {
	margin-right:0;
}

.menuicon {
	display: inline-block;
	text-align:center;
	vertical-align:middle;	
	width:18%;
	margin-right:6%;
	padding:3%;
	text-align:center;
	color:#fff;
	font-size:18px;
	border-radius:2px;
	background-color: var(--main-color-scheme-a);
}

.menuicon:hover {
	background-color: var(--main-color-scheme-b);
	opacity:1;
	filter:alpha(opacity=100);
	-webkit-transition:all 0.1s ease-in-out;
	-moz-transition:all 0.1s ease-in-out;
	-o-transition:all 0.1s ease-in-out;
	transition:all 0.1s ease-in-out;
	cursor:pointer;
}

.menuheading {
	width:100%;
	text-align:center;
	font-family: var(--secondary-font);
	font-size:16px;
	font-weight:600;
	color:var(--main-color-scheme-a);
	padding-top:6px;
	padding-bottom:6px;
	margin-bottom:6px;
	text-transform:uppercase;
	border-bottom:3px solid var(--main-color-scheme-a);
}

.menulink {
	display:block;
	width:100%;
	line-height:28px;
	text-indent:10%;
}

.navigation {
	width:100%;
	text-align:center;
}

.travellink {
	display:inline-block;	
	width:40%;
	line-height:28px;
	text-align:center;
}

.menulink, .travellink {
	font-family: var(--secondary-font);
	font-size:13px;
	font-weight:600;	
	color:#fff;
	background-color:var(--main-color-scheme-a);
	margin-bottom:5px;
	border-radius:2px;
}

.menulink:hover, .travellink:hover {
	background-color:var(--main-color-scheme-b);	
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	opacity:1;
	filter:alpha(opacity=100);
	-webkit-transition:all 0.1s ease-in-out;
	-moz-transition:all 0.1s ease-in-out;
	-o-transition:all 0.1s ease-in-out;
	transition:all 0.1s ease-in-out;
}

/* Error Pages */

.error {
	position: fixed;	  
	top: 40%;	  
	left: 50%;  
	transform: translate(-50%, -50%);
}

.error-title {
	font-size:100px;
	font-weight:bold;
	text-align:center;	
}

.error-body {	
	font-size:20px;
	text-align:center;
	font-family: var(--secondary-font);	
}

/* Other */

#serverTime{
	font-size:14px;
}

#tab1, #tab2, #tab3, #tab4, #tab5, #tab6{
	display:none;
}

.tooltip_templates{
	display: none;
}

.tooltip-style-two{
	cursor:help;
}

/* Resolution scales */

@media screen and (max-width: 1260px), screen and (max-device-width: 1260px)
{
	.template
	{
		width:calc(100% - 20px);
		padding: 0px 10px 0px 10px;
		min-width:0;

	}
}

@media screen and (max-width: 1020px), screen and (max-device-width: 1020px)
{
	.left-menu, .right-menu, .half-content, .full-content
	{
		width:calc(100% - 20px);
		margin-bottom:10px;
	}
	.stat-title, .stat-cap
	{
		display:none;
	}
	.menulink, .travellink	
	{
		margin:3px;
		line-height:30px;
		width:calc(33.3% - 6px); 
		white-space:nowrap;
		display:inline-block;
	}
	.menulink
	{
		border-radius:6px;	
	}	
}

@media screen and (max-width: 640px), screen and (max-device-width: 640px)
{	
	.tsr-topnav a:not(:first-child)
	{
		display: none;
	}
	.tsr-topnav a.icon
	{
		float: right;
		display: block;
	}
	.tsr-topnav.responsive
	{
		position: relative;
	}
	.tsr-topnav.responsive .icon
	{
		position: absolute;
		right: 0;
		top: 0;
	}
	.tsr-topnav.responsive a
	{
		float: none;
		display: block;
		text-align: left;
	}
	.menulink, .travellink	
	{
		font-size:12px;
		width:calc(50% - 6px); 
	}
	.pageheading 
	{
		text-indent:0;
		text-align:center;
		padding-top:0;
		padding-bottom:6px;
	}
}