/** ================================================================== **/
/** ==================== Desktop Very Wide Screen ==================== **/
/** ================================================================== **/

@media (min-width: 1401px)
{
	.container {
		width: 1400px !important;
	}
	#navContainer {
		max-width: 1400px !important;
	}
}

@media (max-width: 1400px)
{
	#navContainer {
		max-width: 1170px !important;
	}
}

/** ================================================================== **/
/** ====================== Desktop Wide Screen ======================= **/
/** ================================================================== **/
@media (max-width: 1170px)
{
	#navContainer {
		max-width: 1170px !important;
	}
}



/** ================================================================== **/
/** ============== Desktop 4:3 screen / iPad Landscape =============== **/
/** ================================================================== **/
@media (max-width: 999px)
{
	#navContainer {
		max-width: 990px !important;
	}
	
	.navbar-default {
		background-color: #ffffff;
	}
	

}

@media (min-width: 768px)
{


/*
	#top-navbar .navbar-nav
	{
		padding-left: 40px;
	}
*/
/*
	.container {
		width: 970px !important;
	}
*/
}
/** ================================================================== **/
/** ================== Phone Size / Portrait Tablet ================== **/
/** ================================================================== **/
@media (max-width: 767px)
{

	/* Bootstrap CSS Options */

	.no-padding-xs
	{
		padding-left:  0px !important;
		padding-right: 0px !important;
	}
	.no-padding-right-xs
	{
		padding-right: 0px !important;
	}
	.no-padding-left-xs
	{
		padding-left:  0px !important;
	}
	
	.no-margin-xs
	{
		margin-left:  0px !important;
		margin-right: 0px !important;
	}
	
	.col-padding-50-xs
	{
		padding-left:  50px !important;
		padding-right: 50px !important;
	}
	
	.col-padding-30-xs
	{
		padding-left:  30px !important;
		padding-right: 30px !important;
	}
	
	.col-padding-20-xs
	{
		padding-left:  20px !important;
		padding-right: 20px !important;
	}
	
	.col-padding-10-xs
	{
		padding-left:  10px !important;
		padding-right: 10px !important;
	}
	
	.col-padding-5-xs
	{
		padding-left:  5px !important;
		padding-right: 5px !important;
	}


	#top-navbar
	{
		height: 65px !important;
	}
	#top-navbar .navbar-brand
	{
		padding-top: 10px;
	}
	body {
		padding-top: 65px !important; /* should equals to #top-navbar.height */
	}
	body.no-topbar {
		padding-top: 0px !important;
	}
	

	/* Content */
	#pageDescription {
		font-size: 12px !important;
	}
	.page-content {
		padding: 0px 20px;
	}

	
	#pageTitle span {
		font-size: 14px !important;
		padding: 10px 25px 9px 25px !important;
	}
	
	ul.navbar-nav li
	{
		text-align: center;	
	}
	#top-navbar .navbar-nav
	{
		padding-left: 40px;
		padding-right: 40px;
	}


	#top-navbar .navbar-collapse
	{
		margin-top: 4px;
		border:1px #999999 solid;
		/* Add shadow under top-navbar */
		box-shadow:         0px 1px 4px #777777;  /* Firefox 4.0+, Opera, IE 9 */
		-webkit-box-shadow: 0px 1px 4px #777777;  /* Chrome and Safari         */
		-moz-box-shadow:    0px 1px 4px #777777;  /* Firefox 3.6               */
	}
	
	button.navbar-toggle
	{
		margin-top: 12px;
	}	

/* Primary Link Button */
	
	.btn-primary-link, .btn-primary-link img.bg {
		width: 300px !important;
		height: 33px !important;
		margin: 0px auto;
	}
	.btn-primary-link div.caption {
		top: -33px !important;
		line-height: 33px !important;
	}
	.btn-primary-link a:link, .btn-primary-link a:visited {
		font-size: 11px !important;
		letter-spacing: 2px !important;
		font-weight: bold !important;	
	}
	
	
	
	/* 	Mobile Nav */
	#mobileNav {
		position: fixed;
		top: 65px;
		right: 0px;
		width: 260px;
		height: 1000px;
		border-left: 1px #5ec5d8 solid;
		border-bottom: 1px #5ec5d8 solid;
		background: rgba(239, 255, 255, 0.95);
		padding: 20px 20px;
		overflow-y: scroll;
	}
	#mobileNav a:link, #mobileNav a:hover, #mobileNav a:visited {
		text-decoration: none;
	}
	
	#mobileNav .glyphicon {
		font-size: 11px;
		margin-top: 5px;
		margin-right: 5px;
		color: #005c97;
		float: right;
	}

	#mobileNav .main {
		font-size: 14px;
		color: #01426b;
		padding: 8px 0px;
		border-bottom: 1px #c9e5ee solid;
	}
	
	#mobileNav .subnav {
		display: none;
		padding-bottom: 16px;
	}



	#mobileNav .sub1 a:link,
	#mobileNav .sub1 a:hover,
	#mobileNav .sub1 a:visited {
		color: #01426b;
		text-decoration: none;
	}

	#mobileNav .sub1 {
		font-size: 14px;
		color: #01426b;
		line-height: 18px;
		padding: 10px 0px 5px 12px;
	}

	#mobileNav .sub2 {
		font-size: 12px;
		color: #6b6b6b;
		line-height: 18px;
		padding: 0px 0px 0px 12px;
	}

	#mobileNav .sub2 a:link,
	#mobileNav .sub2 a:hover,
	#mobileNav .sub2 a:visited {
		color: #6b6b6b;
		padding: 0px 0px 0px 12px;
		text-decoration: none;
	}
	
	#mobileNav small {
		font-size: 11px !important;
		color: #6b6b6b !important;
		line-height: 13px !important;
	}
	
	#mobileNav .main small {
		margin-left: 15px;
	}
	
	#mobileNav .no-vertical-padding {
		padding-top: 3px !important;
		padding-bottom: 3px !important;
	}
	
	/* Scroll-down Indication */
	#scrollDownIndication {
		bottom: 38px !important;
		border-bottom: 1px rgba(255, 255, 255, 0.8) solid;
		font-size: 12px !important;
		height: 30px !important;
		padding-top: 7px !important;
	}
	
	
}

/** ================================================================== **/
/** ======================= Smaller Phone Size ======================= **/
/** ================================================================== **/
@media (max-width: 640px)
{	
}

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

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

@media (max-width: 320px)
{	
	.hidden-xxs
	{
		display: none;
	}
}






/** ================================================================== **/
/** =========================== All Sizes ============================ **/
/** ================================================================== **/

/*
@font-face {
    font-family: GillSansLight;
    src:	url('fonts/gillsans-light.woff') format('woff'),
    		url('fonts/gillsans-light.ttf' ) format('truetype');
}
*/

@font-face {
	font-family:'GillSans-Light';
	src: url('fonts/gillsans-light.eot');
	src: url('fonts/gillsans-light.eot?#iefix') format('embedded-opentype'),
		url('fonts/gillsans-light.woff') format('woff'),
		url('fonts/gillsans-light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-2122;
}

/* General Style */
body {
	font-family: Arial,"Microsoft Yahei","Hiragino Sans GB",sans-serif;
	padding-top: 70px; /* should equals to #top-navbar.height */
	overflow-x: hidden;
}
	body.no-topbar {
		padding-top: 0px;
	}


.bold {
	color: #005b96;
	font-weight: bold;
}


#pageTitle {
	margin: 40px auto 30px auto;		
	font-weight: bold;
	font-size: 18px;
	text-align: center;
	color: #005c97;
}

#pageTitle span {
	background-color: #005c97;
	color: #ffffff;
	font-weight: bold;
	font-size: 18px;
	padding: 12px 25px 10px 25px;
	border-radius: 12px;
	text-align: center;
	margin-bottom: 200px !important;
	clear: both;
}

#pageDescription {
	text-align: center;
	color: #6b6b6b;
	font-size: 16px;
	margin-bottom: 40px;
	line-height: 22px;
	padding-left: 20px;
	padding-right: 20px;
}

.page-content {
	text-align: left;
	padding: 0px 20px;
}













/* Top Navigation Bar */
/*
#navContainer {
	max-width: 1400px;
}
*/
#navContainer {
	max-width: 768px;
}

#top-navbar {
	height: 70px;
	z-index: 10000;	
	/* Add shadow under top-navbar */
  box-shadow:         0px 1px 4px #cccccc;  /* Firefox 4.0+, Opera, IE 9 */
  -webkit-box-shadow: 0px 1px 4px #cccccc;  /* Chrome and Safari         */
  -moz-box-shadow:    0px 1px 4px #cccccc;  /* Firefox 3.6               */
}

#top-navbar .navbar-brand
{
    padding-top: 12px;
}

#top-navbar .navbar-collapse
{
	padding-top: 10px;
	background: #f8f8f8;
}


/* Top Navigation Button (Mobile) */
.navbar-toggle {
	border: 0px #ff0000 solid !important;
	border-radius: 0;
	padding: 9px;
}

.navbar-toggle .icon-bar {
	background: #005c97 !important;
	width: 32px;
	height: 3px;
	border-radius: 2px;
}


/* Top Navigation Bar Items */


#top-navbar .navbar-nav li,  #top-navbar .navbar-nav li a, #top-navbar .navbar-nav li a:link, #top-navbar .navbar-nav li a:visited
{
 	color: #01426b;
}

#top-navbar .navbar-nav li a:hover
{
 	color: #287f96;
}

#top-navbar .navbar-nav {
	padding-left: 40px;
}

/* IE 8 fix */
#top-navbar .navbar-nav > li > a {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}


/* Set Nav Item Size : Override Bootstrap CSS */
.nav > li {
	margin-top: 10px;
	margin-top: 9px\9; /* IE 6/7/8 */
	color: #01426b;
	font-size: 16px;
	font-weight: normal;
	margin-right: 22px;
}

.nav > li  .small {
	margin-top: 0px !important;
	margin-top: 0px\9; /* IE 6/7/8 */
	color: #6b6b6b !important;
	font-size: 10px !important;
	font-weight: normal;
	line-height: 18px !important;
	letter-spacing: 0px;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus
{
	background: none !important;
}

.nav > li > a {
	padding:  0px 0px;
	letter-spacing: 4px;
}





/* Social Buttons (Nav Right) */


.navbar-right .social-button {
	height: 27px;
	margin-top: 20px;
	margin-right: 8px;
}


/* Sub Menus - Service */
/*

#subMenuService
{
	position: fixed;
	display: none;
	top: 60px;
	width: 575px;
	height: 250px;
	background: url(../images/common/submenu-service-bg.png) center top;
	z-index: 10000;
	padding-left: 40px;
}

#subMenuService div
{
	width: 212px;
	margin: 45px 15px;
	text-align: left;
	float: left;
}

#subMenuService div p
{
	color: #878787;
	font-size: 12px;
	line-height: 15px;
	margin: 0px;
}

#subMenuService div p.title
{
	color: #01426b;
	font-size: 14px;
	line-height: 30px;
	margin: 0px;
}
*/

/* Sub Menu Arrow */
#subMenuArrow
{
	position: absolute;
	top: 70px;
	z-index: 12000 !important;
	display: none;
}


/* Sub Menus - Financial Plan */

#subMenuFinancialPlan
{
	padding-left: 70px !important;
}

#subMenuFinancialPlan div.left
{
	width: 140px;
	margin: 30px 15px;
	text-align: left;
	float: left;
}
#subMenuFinancialPlan div.center
{
	width: 180px;
	margin: 45px 25px;
	text-align: left;
	float: left;
}
#subMenuFinancialPlan div.right
{
	width: 150px;
	margin: 30px 25px;
	text-align: left;
	float: left;
}
#subMenuFinancialPlan div.split
{
	width: 1px;
	height: 230px;
	border-right: 1px #bfbfbf solid;
	margin: 45px 20px 0px 20px;
	float: left;
}

#subMenuFinancialPlan div p, 
#subMenuFinancialPlan a:link, 
#subMenuFinancialPlan a:visited 
{
	color: #6b6b6b;
	font-size: 12px;
	line-height: 18px;
	margin: 0px;
	border: 1px #ff000 solid;
	text-decoration: none;
/* 	font-weight: bold; */
}

#subMenuFinancialPlan div p a:hover
{
	text-decoration: underline;
}

#subMenuFinancialPlan div p.title, 
#subMenuFinancialPlan div p.title a:link,
#subMenuFinancialPlan div p.title a:visited
{
	color: #01426b;
	font-size: 14px;
	line-height: 30px;
	margin: 0px;
	text-decoration: none;
/* 	font-weight: bold; */
}

#subMenuFinancialPlan div p.title a:hover {
	text-decoration: underline;
}





/* Sub Menus - Common */

.submenu
{
	position: fixed;
	display: none;
	top: 60px;
	width: 790px;
	height: 312px;
/* 	background: url(../images/common/submenu-bg-2.png) center top; */
	z-index: 10000;
	padding-left: 20px;
}

/*
.submenu.bg-1 { background: url(../images/common/submenu-bg-1.png) center top !important; }
.submenu.bg-2 { background: url(../images/common/submenu-bg-2.png) center top !important; }
.submenu.bg-3 { background: url(../images/common/submenu-bg-3.png) center top !important; }
.submenu.bg-4 { background: url(../images/common/submenu-bg-4.png) center top !important; }
.submenu.bg-5 { background: url(../images/common/submenu-bg-5.png) center top !important; }
.submenu.bg-6 { background: url(../images/common/submenu-bg-6.png) center top !important; }
*/

.submenu.bg-1 { background: url(../images/common/submenu-bg.png) center top !important; }
.submenu.bg-2 { background: url(../images/common/submenu-bg.png) center top !important; }
.submenu.bg-3 { background: url(../images/common/submenu-bg.png) center top !important; }
.submenu.bg-4 { background: url(../images/common/submenu-bg.png) center top !important; }
.submenu.bg-5 { background: url(../images/common/submenu-bg.png) center top !important; }
.submenu.bg-6 { background: url(../images/common/submenu-bg.png) center top !important; }

.submenu div.left
{
	width: 430px;
	margin-top: 30px;
	margin-right: 20px;
	text-align: center;
	float: left;
}

.submenu div.left > div
{
	width: 190px;
	height: 120px;
	margin-top: 70px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
/* 	border: 1px blue solid; */
}

/* Product */
.submenu div.left.product > div
{
	width: 293px !important;
	margin-top: 10px !important;
	margin-left: 80px !important;
}
.submenu div.left.product > div img
{
	margin-bottom: 5px !important;
	border: 1px #d1f0f5 solid;
}

/* Service */
.submenu div.left.service > div
{
	margin-top: 10px !important;
}
.submenu div.left.service > div img
{
	margin-bottom: 5px !important;
	border: 1px #d1f0f5 solid;
}

/* About Us */
.submenu div.left.aboutus > div
{
	margin-top: 10px !important;
}
.submenu div.aboutus > div img
{
	margin-bottom: 15px !important;
	border: 1px #d1f0f5 solid;
}
.submenu div.aboutus p
{
	line-height: 25px; 
}

/* News */
.submenu div.left.news > div
{
	margin-top: 10px !important;
}
.submenu div.news > div img
{
	margin-bottom: 15px !important;
	border: 1px #d1f0f5 solid;
}
.submenu div.news p
{
	line-height: 25px; 
}



.submenu div.left > div > p
{
/*
	font-size: 14px;
	color: #01426b;
*/
	margin-top: 5px;
}

.submenu div.right
{
	width: 150px;
	margin-top: 30px;
	margin-left: 40px;
	text-align: left;
	float: left;
}
.submenu div.split
{
	width: 1px;
	height: 230px;
	border-right: 1px #bfbfbf solid;
	margin: 45px 20px 0px 20px;
	float: left;
}

.submenu p, 
.submenu a:link, 
.submenu a:visited 
{
	color: #6b6b6b;
	font-size: 12px;
	line-height: 18px;
	margin: 0px;
	border: 1px #ff000 solid;
	text-decoration: none;
/* 	font-weight: bold; */
}

.submenu a:hover
{
	text-decoration: underline;
}

.submenu p.title
{
	color: #01426b;
	font-size: 14px;
	line-height: 30px;
	margin: 0px;
/* 	font-weight: bold; */
}



/* Sub Menus - Common */


























#top-logon, #top-signup
{
	width: 94px;
	height: 35px;
	margin-top: 5px;
	margin-left: 5px;
}

#top-navbar .navbar-right
{
/* 	background:  */
	
}

#top-navbar {
	z-index: 9000 !important;
}






#footerBar
{
/* 	background-color: #f3f7fa; */
}

#footer
{
	text-align: center;
	padding-top:50px;
	padding-bottom:30px;
}


/* Customise Bootstraps Theme */


/* Button - GREEN */
.btn-default.green
{
	border-color: #40d1c4;
	color: #38baa2;
}
.btn-default.green:hover,
.btn-default.green:focus {
  background-color: #ffffff;
  border-color: #149779;
  color: #149779;
  /*background-position: 0 -15px;*/
}


.btn-primary.green {
	background-color: #4acbad;
	border-color: #38af92;
}

.btn-primary.green:hover,
.btn-primary.green:focus {
  background-color: #00b892;
  border-color: #1f977f;
  /*background-position: 0 -15px;*/
}


/* Button - NORMAL */
.btn-primary {
	background-color: #007bc6;
	border-color: #013d79;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #3079c2;
  border-color: #013d79;
  /*background-position: 0 -15px;*/
}

.btn-default
{
	border-color: #3079c2;
	color: #3079c2;
}

.btn-default:hover,
.btn-default:focus {
  background-color: #ffffff;
  border-color: #013d79;
  color: #013d79;
  /*background-position: 0 -15px;*/
}




/* 007bc6 */








/* Bootstrap CSS Options */

.no-padding
{
	padding-left:  0px !important;
	padding-right: 0px !important;
}

.no-margin
{
	margin-left:  0px !important;
	margin-right: 0px !important;
}

.col-padding-50
{
	padding-left:  50px !important;
	padding-right: 50px !important;
}

.col-padding-30
{
	padding-left:  30px !important;
	padding-right: 30px !important;
}

.col-padding-20
{
	padding-left:  20px !important;
	padding-right: 20px !important;
}

.col-padding-10
{
	padding-left:  10px !important;
	padding-right: 10px !important;
}

.col-padding-5
{
	padding-left:  5px !important;
	padding-right: 5px !important;
}

/* Right Nav */
#rightNav {
	position: fixed;
	display: none;
	float: right;
	width: 50px; 
	top: 320px;
	right: 0px;
	line-height: 1px;
	z-index: 20000;
}

#rightNavCaption {
	position: absolute;
	display: none;
	background: #d0ae82;
	color: #ffffff;
	font-size: 14px;
	padding: 5px 10px;
	border: 1px #c49a6c solid;
	border-radius: 4px;
	z-index: 20000;
}

#bottomNav {
	display: none;
	position: fixed;
	bottom: 0px;
	width: 100%; 
	height: 38px;
	background: rgba(0, 75, 122, 0.9);
	z-index: 20000;
	margin-top: 40px;
}
#bottomNav div {
	width: 25%; 
	height: 38px;
	padding-top: 5px;
	float: left;
	text-align: center;
	z-index: 20000;
	border-right: 1px #4d8eab solid;
}

#bottomNav div img {
	height: 30px;
}

/* Scroll-down Indication */
#scrollDownIndication {
	display: none;
/*
	background-color: rgba(0, 79, 126, 0.9);
	border-top: 1px rgba(255, 255, 255, 0.2) solid;
*/
	width: 100%;
/* 	height: 40px; */
	height: 80px;
	position: fixed;
	bottom: 0px;
	font-size: 16px;
	color: #ffffff;
	text-align: center;
	padding-top: 10px;
	text-shadow: 1px 1px 1px #111111;
}


/* Pagination */

.pagination {
	text-align: center;	
}
.pagination ul {
	padding: 0px;
	margin-top: 20px;
}

.pagination ul li {
	list-style: none;
	width: 18px;
	height: 25px;
	color: #565555;
	line-height: 25px;
	float: left; 
}

.pagination ul li a:link,
.pagination ul li a:hover,
.pagination ul li a:visited {
	font-size: 14px;
	color: #565555 !important;
	text-decoration: none;
}

.pagination ul li.action-button-left {
	width: 70px;
	text-align: left;
}
.pagination ul li.action-button-right {
	width: 70px;
	text-align: right;
}

.pagination ul li.active {
	background: #005c97;
	width: 25px;
	color: #ffffff;
	border-radius: 20px;
}

.pagination ul li.active a:link,
.pagination ul li.active a:hover,
.pagination ul li.active a:visited {
	color: #ffffff !important;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none !important;
}

/* Primary Link Button */

.btn-primary-link, .btn-primary-link img.bg {
	width: 350px;
	height: 50px;
	margin: 0px auto;
}
.btn-primary-link div.caption {
	text-align: center;
	position: relative;
	top: -50px;
	line-height: 50px;
}
.btn-primary-link a:link, .btn-primary-link a:visited {
	color: #f3f3f3;
	text-decoration: underline;
	font-size: 14px;
	letter-spacing: 3px;
	font-weight: bold;
	
}
.btn-primary-link a:hover {
	color: #ffffff;
	text-decoration: underline;
}


/* Mobile Nav */
#mobileNav {
	display: none;
}