body, html { -ms-overflow-style: scrollbar; }

#ms-designer-ribbon { position: relative; z-index: 12; }

/* Top part where the logo and menu are situated at */
header {	
	position: relative;	
}
header section.container-fluid.noPadding {
	position: relative;
	background-color: #007548;
	z-index: 10;
}
.logo {
	display: inline-block;
	width: 100%;
	max-width: 170px;
}
header .logo img {
	width: 170px;
}

.noPadding {
	padding: 0px !important;
}

/* Menu styles start here */
header .menu {
	font-family: Dodger;
	font-weight: normal;
	font-size: 14px;
	display: inline-block;	
	width: 100%;
	max-width: 560px;
	border: 0;
	background: none;
	min-height: 1px;
	margin: 0px;
	float: right;
	text-align: right;
}

.menu ul.navbar-nav {
	position: relative;
}
.menu ul.navbar-nav li a {
	line-height: 70px;
	padding: 0px 15px;
	color: white;
	font-size: 20px;
	font-family: Dodger;
	text-decoration: none;
	
	-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;
}
.menu ul.navbar-nav li a:hover, .menu ul.navbar-nav li a:focus {
	opacity: 0.8;
	color: white;
}

.menu .findTelkom_site {
	display: block;
	width: 135px;
	text-align: right;
	margin-top: 12px;
}
.menu .findTelkom_site label {
	color: white;
	cursor: pointer;
	font-weight: normal;
	margin: 12px 0px 0px 0px;
	
	-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;
}
.menu .findTelkom_site label:hover {
	opacity: 0.8;
}
.menu input.findTelkom_siteInput {
	display: none;
	position: absolute;
	cursor: pointer;
	left: 0;
	background: transparent;
	font-weight: normal;
	font-size: 14px;
	padding: 10px 15px;	
	color: white;
	width: 135px;
	border: 0;
	
	-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;
}
.menu .findTelkom_siteInput:focus {
	outline: none !important;
	background: #0083c2;
	border-bottom: 1px solid #e7e7e7;
	width: 450px;
	margin-left: -310px;
}

.menu .findTelkom_siteInput::-moz-selection { /* Code for Firefox */
  color: white;
  background: #0083c2;
}

.menu .burgerMenu {
	position: relative;
	right: -15px;
	display: inline-block;
	z-index: 6;
	cursor: pointer;
	color: white;
	font-size: 18px;
	padding: 21px 25px 21px 25px;
	width: auto;
	background: #00462b;
	
	-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;
}
.menu .burgerMenu i {
	margin-top: 4px;
}
.menu .burgerMenu:hover i, .menu .burgerMenu.active i {
	opacity: 0.8;
}

@media (min-width: 48em) {
  header .logo img {
		width: 86%;  
  }
	header .menu {
		max-width: 550px;
	}
	.menu ul.navbar-nav li a {
		line-height: 58px;
	}
	.menu .burgerMenu {
		padding: 16px 20px 16px 20px
	}
	.menu .findTelkom_site label {
		margin: 7px 0px 0px 0px;
	}
	.menu input.findTelkom_siteInput {
		top: 7px;
	}
}
@media (min-width: 120em) {
	header .logo img {
		width: 100%;
		margin-top: 1px;
  }
	.menu ul.navbar-nav li a {
		line-height: 70px;
	}
	.menu .burgerMenu {
		padding: 22px 25px 22px 25px
	}
	.menu .findTelkom_site label {
		margin: 12px 0px 0px 0px;
	}
	.menu input.findTelkom_siteInput {
		top: 15px;
	}
	header .menu {
		max-width: 560px;
	}
}

/* This is the menu after the BurgerMenu has been clicked */
.menu-expand {
	display: none;
	position: absolute;
	right: 0px;
	z-index: 6;
	background-color: #00462b;
	text-align: left;
	padding: 0px;
}
.menu-expand ul {
	display: block;
	top: 0px;
	padding: 0px;
	margin: 0px;
}
.menu-expand ul li {
	display: block;
	padding: 0px 5px;
}
.menu-expand ul li a {
	display: block;
	color: white;
	font-size: 24px;
	font-weight: normal;
	padding: 3px 15px;
}
.menu-expand ul li a:hover {
	background-color: #005e9b;
	opacity: 0.8;
	text-decoration: none;
}

/* Autocomplete Styles */
.ui-autocomplete-loading {
   background: #0083c2;
 }
 
.ui-menu {	
	position: absolute;
	z-index: 11;
	background-color: #005e9b;
	width: 430px;
	max-height: 60%;
	overflow: auto;
	padding: 0px;
	box-shadow: 0px 5px 15px -8px #000000;
}
.ui-menu .ui-menu-item {
	color: white;
	font-weight: normal;
	font-size: 14px;
	cursor: pointer;
	border-radius: 0px;
	list-style: none;
	padding: 8px 15px;
	font-family: TelkomLight;
}
.ui-menu .ui-menu-item:hover {
	background-color: #0083c2;
	color: #e3e3e3;
}

/* Message for when there is no search results on the "Find a telkom Search bar" */
p.empty {
	position: absolute;
	text-align: left;
	display: none;
	z-index: 2;
	right: -10px;
	top: 56px;
	background-color: #005e9b;
	width: 450px;
	overflow: auto;
	box-shadow: 0px 5px 15px -8px #000000;
	font-weight: normal;
	font-size: 14px;
	color: white;
	padding: 6px 15px 8px 15px;
}
p.empty:hover {
	background-color: #0083c2;
	color: #e3e3e3;
}
p.empty a {
	line-height: 30px !important;
	font-family: TelkomLight;
}
p.empty a:hover {
	opacity: 1 !important;
}


/* Search bar */

.searchItem {
  background: #0083c2;
  margin: 10px 0px 0px 0px;
  padding: 5px 15px 10px 15px !important;
}
#txtSearch {
  background: #0083c2;
  color: white !important;
  border: none;
  border-radius: 0px;
  font-size: 22px;
  box-shadow: none;
  width: 84%;
  display: inline-block !important;
}
#txtSearch::-webkit-input-placeholder {
   color: white;
}

#txtSearch:-moz-placeholder { /* Firefox 18- */
   color: white;  
}

#txtSearch::-moz-placeholder {  /* Firefox 19+ */
   color: white;  
}

#txtSearch:-ms-input-placeholder {  
   color: white;  
}

.searchItem span {
  color: white;
  text-align: right;
  font-size: 20px;
  width: 15%;
  /* right: -15px; */
  position: relative;
  /* top: 7px; */
  display: inline-block !important;
}

/* This is the blackhole that appears when you click the menu (to pull the focus on the menu alone) */
/* ps. Its not really a blackhole (so relax, its save to click the menu) its just a darker background that appears over the page */
.blacked-out { 
	display: none; 
	position: fixed; 
	left: 0; 
	top: 0;
	z-index: 5;
	 
	height: 100%; 
	width: 100%; 
	background-color: black;
	 
	filter: alpha(opacity=65);  /* IE */ 
	-khtml-opacity: 0.65;       /* Safari (old versions) */ 
	-moz-opacity: 0.65;         /* Firefox */ 
	opacity: 0.65;              /* New Browsers */ 
}


	
/* Smaller Desktop Screens (desktops, 1200px and up) */
@media (max-width: 1200px) {
	
}

/* Medium devices (tablets, 992px and up) */
@media (max-width: 992px) {

}

/* Small devices (tablets, 768px and up) */
@media (max-width: 768px) {
	.navbar-collapse { border: 0; box-shadow: none !important; }
	.menu { width: 100%; position: absolute; top: 0; right: 0; }
	.menu-expand { width: 100%; }	 
	.ui-menu { background: #0083c2; right: 0px !important; width: 100% !important; max-height: 60%; z-index: 10; }
	.ui-menu .ui-menu-item { font-size: 20px; }
	.ui-menu .ui-menu-item:hover { background-color: #0083c2; color: #e3e3e3; }
	p.empty { top: 145px; width: 100%; background: #0083c2; padding: 15px; }
	.menu .findTelkom_site { width: 100%; text-align: left; margin-top: 0px; padding-left: 15px; font-size: 24px; }
	.menu .findTelkom_site label { margin: 5px 0px 0px 0px; }
	.menu input.findTelkom_siteInput { left: 0px; background: #0083c2; font-weight: normal;	font-size: 22px; padding: 8px 20px;	width: 100%; border: 0; }
	.menu .findTelkom_siteInput:focus { width: 100%; margin-left: 0px; }
}

@media (max-width: 480px) {
	
}