/** ************************************* **

	TABLE CONTENTS
	---------------------------
		01. Fonts & Links
		02. Blue Banner
		03. Mobile User Menu
		04. Demo Site Indicator
		05. Resources
		06. Layout
		07. Colour Scheme
		08. Responsive 
	---------------------------

 ** ************************************* **/





@font-face {
	font-family: 'Myriad-Pro';
	src: url('../fonts/MyriadWebPro.ttf');
	/*src: url('http://www2.gov.bc.ca/StaticWebResources/static/shared/fonts/MyriadWebPro.ttf');*/
}

html {
  position: relative;
  min-height: 100%;
}




/** 01. Fonts & Links
 **************************************************************** */

body {
    font-family: Myriad-Pro, Calibri, Arial, sans serif;   
	background-color:#fff;
	font-size:16px;	
}

a { text-decoration: underline; }
a.btn { text-decoration: none; }


section h1 { 
    font-weight:normal;
    font-size: 26px;
    padding:10px 0px 0px 0px;
}
section h2 { 
    font-weight:normal;
    font-size:20px;
	line-height: 26px;
}
section h3 { 
	font-weight:bold;
    font-size:18px;
	line-height: 26px;
}






/** 02. Blue Banner
 **************************************************************** */

#bcGov {
	background-color: transparent;
	border-bottom: 2px solid transparent;	
	margin-top: 0px!important;
	padding-bottom: 5px;
}  
#bcGov .gov-brand { 
	min-height: 50px; 
	width: 100%;	
	padding-top: 8px!important;	
	line-height: 26px;
	position:relative;
}
#bcGov .gov-brand a.govlogo { 
	text-indent: -9999px;	
	background: url('../images/BCID_Rev_130.png'); 
	background-repeat:no-repeat;
	width: 125px;
	height: 38px;
	background-size: 125px;
} 
#bcGov .site-title {
	vertical-align:top;
	font-size: 20px; 
	line-height: 26px;
	margin-top: 7px;
	font-weight:normal;
}

#bcGov a.site-title { text-decoration: none; }
#bcGov a.site-title:hover { text-decoration: underline; }
#bcGov .gov-brand .seperator  { display:none; }


#bcGov .logo,
#bcGov a.govlogo,
#bcGov a.site-title,
#bcGov .seperator,
#bcGov button.btn-mobile {
	float:left;
	text-align: left;
}
#bcGov button.btn-mobile {
	float:right;	
}

#bcGov button.btn-mobile {
	color:#003366;
	background: #bcbec5;
	padding:6px 10px 2px 10px;
	-webkit-border-radius: 2px;
	   -moz-border-radius: 2px;
			border-radius: 2px;
}	

#bcGov button.btn-mobile i {
	padding:0px; 
	margin:0px;
	font-size:21px;
}

#LoggedInUser { 
	display: none; 
	line-height: 35px;
	font-size: 15px;
}


#LoggedInUser a { text-decoration:none; }
#LoggedInUser a:hover { text-decoration:underline; }
#bcGov .login-seperator { display:inline-block; width: 1px;height: 15px; background-color: #eaeaea; vertical-align:middle; margin: 0px 5px; }
.user-display-name,
.logout {
	display:inline;
}

#bcGov ul.user-menu {
	margin: 0;
	padding: 10px 20px 20px 20px;	
	-webkit-border-radius: 0px;
	   -moz-border-radius: 0px;
	border-radius: 0px;
	-webkit-box-shadow: 0 0 0;
	   -moz-box-shadow: 0 0 0;
    left:auto;
	width: 100%;
	min-width: 150px;
	max-width: 300px;
	right: 0px;
	z-index: 999999;
    margin-right: 5px;
	top: 40px;
	background-color: #ffffff; 		/* dropdown background color */
	background-color:#fff;
	border-left: solid 1px #748bad;
	border-right: solid 1px #748bad;
	border-bottom: solid 1px #748bad;
	box-shadow: 0 4px 4px -4px #eee;
}

#bcGov ul.user-menu  li { line-height: 20px; }
#bcGov ul.user-menu  li a {  text-decoration: underline; color: #1a5a96; }







/** 03. Mobile User Menu
 **************************************************************** **/
.login-register-options-mobile { 
	width: 100%; 
	text-align:center;
	padding: 5px;
	margin: 10px 0px;
	display:none;
}

header #topNav #LoggedInUserMobile  {
	padding: 5px;
}
header #topNav #LoggedInUserMobile a { text-decoration: none; font-size: 14px; font-weight: normal; }
header #topNav #LoggedInUserMobile a:hover { text-decoration: underline; }

header #topNav .logged-in-menu {
	
	width: 100%;
	margin-top:10px;
	display:none;
}

header #topNav {
	margin-top: 0px; 
	padding:0px;
		
}	

header #topNav .nav-main { margin-left: -15px; }


header #topNav div.nav-main-collapse {
	margin-top:10px;
	z-index:300;
}

header #topNav div.nav-main-collapse,
header #topNav div.nav-main-collapse.in {
	overflow-y: visible;
}

header #topNav div.nav-main-collapse.in {
	overflow-y: visible;
	float: none;
	margin: 0;
}


header #topNav nav ul.nav-main {
	margin: -7px 0 0px 0;
	z-index:300;
}

header #topNav nav ul.nav-main li a {
	background: none;
	font-style: normal;
	line-height: 20px;
	font-weight: 100;
	position: relative;
	font-size: 15px;
}

header #topNav nav ul.nav-main li:nth-child(n+2) a:after {
    content: "";
    background: #748bad;
    position: absolute;
    bottom: 25%;
    left: 0;
    height: 50%;
    width: 1px;
}





header #topNav nav ul.nav-main li a:hover { 
	text-decoration:underline;  
}


header #topNav nav ul.nav-main li.mobile-only {
	display:none;
}


header #topNav nav ul.nav-pills > li > a,
header #topNav nav ul.nav-pills > li > a:hover,
header #topNav nav ul.nav-pills > li > a:focus,
header #topNav nav ul.nav-pills > li.active > a,
header #topNav nav ul.nav-pills > li.active > a:hover,
header #topNav nav ul.nav-pills > li.active > a:focus {
	-webkit-border-radius: 0;
	   -moz-border-radius: 0;
			border-radius: 0;

	border: 0;
	background: none;
	
}
header #topNav nav ul.nav-pills > li.active > a,
header #topNav nav ul.nav-pills > li.active > a:hover,
header #topNav nav ul.nav-pills > li.active > a:focus {
	background-image: url("../../MyGovBc/images/nav-ribbon-arrow.png");
	background-size: 25px;
    background-position: center bottom;
    background-repeat: no-repeat;
	text-decoration:underline;
}



header #topNav li.divider {
	border:0;
	border-bottom:#465260 1px solid;
	border-top:#1B1F23 1px solid;
	padding:0;
}







/** 04. Demo Site Indicator
 **************************************************************** */
.demo-site-notice { 	
	padding: 7px;
	text-align:center;
	font-size: 13px;
	width: 100%;
 	background-color: #000000;
	color: #fff;
}
/* add other colours here */




/** 05. Resources
 **************************************************************** */
.margin-top10 { margin-top: 10px; }
.margin-bottom10 { margin-bottom: 10px; }
.margin-bottom20 { margin-bottom: 20px; }
.margin-bottom40 { margin-bottom: 40px; }



/** 06. Layout
 **************************************************************** */


section { margin-top: 10px; }

.breadcrumb { background-color: #ffffff; margin-bottom: 0px; }



.how-to-link { font-size: 16px; display:block; margin-top: 30px; text-align: center; }
@media all and (min-width: 478px) {
	.how-to-link { margin-top: 20px; text-align: left; font-size: 18px;}
}
@media all and (min-width: 650px) {
	.how-to-link { padding-left: 20px; display:inline;  margin-top: 0px; text-align: left;  }	
}


.container .jumbotron  {
	padding-right: 20px;
    padding-left: 20px;
	margin-left: -15px;
	margin-right: -15px;
	
}

.jumbotron h1 { font-size: 28px; margin-top: 0px; line-height: 32px;margin-bottom: 12px; }
.jumbotron p { font-size: 18px; }

@media all and (min-width: 768px) {
	.jumbotron h1 { font-size: 34px; margin-top: 0px; }
	.jumbotron p { font-size: 20px; }
	.container .jumbotron {
		padding-right: 60px;
		padding-left: 60px;
		margin-left: 0px;
		margin-right: 0px;
	}
}

.bg-licence {
	background-color: #eee;
	padding: 15px;
}

.bg-licence h2 { font-weight: bold; }

@media all and (min-width: 768px) {
  .bg-licence {
    padding: 15px 30px;
  }
}


.form-group { margin-bottom: 20px; }
.form-group input { max-width: 320px; }


label { font-weight: bold; }
label.optional { font-weight: normal; }









/** 07. Colour Scheme

* Colors
	B.C. Government Colour 003366 #003366 Header & footer 83% opacity for title bars
	B.C. Government colour  #2b5580 Emulates #003366 at 83% over white [not used]
	B.C. Government colour #1a5a96 Links and title links
	B.C. Government colour #38598a Second level navigation bar (use #fff for navigation text)
	B.C. Government colour #5475a7 Third level navigation bar (use #fff for navigation text)
	B.C. Government colour #f2f2f2 Background grey left and right side bars (outside content body)
	B.C. Government colour #fcba19 Highlight gold
	B.C. Government colour #494949 Site wide text
	B.C. Government Corporate Online Branding Colour #bcbec5 #bcbec5 Return to Top icon, search icon and search box text
 **************************************************************** **/
body, 
h1, 
h2, 
h3, 
h4, 
h5, 
footer p { 
	color: #494949; 
}	
	
.footer,
.footer-stick-to-bottom {
  background-color: #f5f5f5;
}
	
header#bcGov,
footer #footerWrapper {
	border-color: #fcba19;	
}
header#bcGov .seperator { 
	background-color: #fcba19;
}

footer #footerWrapper,
header#bcGov {
	background-color: #003366;	
}
				
a { color: #1a5a96; }

a:hover, a:active {
	color:#2b5580;
}

.panel-heading {  
	border-color: #336699; 
	color:#fff; 
}
.panel-body { 
	background:#f9f9f9; 
	border-color: #ececec; 
	
}



.btn-device {  background-color: #eaeaea; border-color: #cccccc; border-width: 1px; color: #494949; }
.btn-device:hover { background-color: #ffffff; }
.btn-device h2 { color:#494949; }
.btn-device:hover h2 {  color: #494949; }

.btn-other-login,
.btn-other-login:hover, 
.btn-other-login:active, 
.btn-other-login:focus,
ul.inline li a:link, 
nav ul.inline li a:visited,
header#bcGov a,
header#bcGov .site-title,
header#bcGov .site-title-small,
footer, 
footer a, 
footer span,
#DisplayNameOnMobile {
	color: #fff;
}



.panel-heading,
.btn-other-login {
	background-color: #336699; 
}

/* Buttons */
.btn-primary {		
	background-color: #003366;
	border: #003366 1px solid;
	color: #ffffff;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {	
	background-color: #2f567b !important;
	color: #ffffff;
}
















/** 08. Responsive 
 **************************************************************** */

@media (min-width: 768px) {

	#bcGov {	
		height: 75px; 
	}
	
	#bcGov a.govlogo {
		margin-top: 10px;
		background-image: url('../images/BCID_Rev_130.png');
		width: 140px;
		height: 35px;
		background-size: 130px;	
		background-position: center;		
	}

	#bcGov .site-title {
		font-size: 22px;
		line-height: 42px;
	}	
	
	
	#LoggedInUser { 
		line-height: 55px;
	}
	
	
	@media only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min--moz-device-pixel-ratio: 2),
	only screen and (-o-min-device-pixel-ratio: 2/1),
	only screen and (min-device-pixel-ratio: 2),
	only screen and (min-resolution: 192dpi),
	only screen and (min-resolution: 2dppx) {
	
		#bcGov a.govlogo { 
			background-image: url('../images/BCID_Rev_130@2x.png'); 
		}
	}
	

}






















/** 14. Responsive - Mobile Menu
 **************************************************************** 	*/
@media (min-width: 500px) {
	#LoggedInUser,
	#LoginOrRegister { display: inline; float:right; } 
	#bcGov button.btn-mobile {
		display: none;
	}	
	header #topNav { display:none; }
}

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


@media only screen and (max-width: 479px) {

	.btn-fullwidth-xs { 
		width: 100%;
	}

	.btn-primary {
		width: 100%;
	}
}





@media (max-width: 767px) {


	header #topNav .logged-in-menu { display: block; }

	header #topNav { margin-top: -2px; 
	

	box-shadow: 0 4px 4px -4px #eee;
	
	background-color:#f1f2f7;
	background-color: #2b5580;
	border-bottom-color:#eaeaea;
		
	}	

	header #topNav .nav-main { margin-left: 0px; }

	



	header #topNav div.nav-main-collapse,
	header #topNav div.nav-main-collapse.in {
		width: 100%;
		overflow: hidden;
		overflow-y: hidden;
		overflow-x: hidden;
	}

	header #topNav div.nav-main-collapse {
		float: none;
	}

	header #topNav nav.nav-main ul.nav-main {
		float: none;
		position: static;
		margin: 0px 0px 8px 0px;
		overflow-x:hidden;
	}

	header #topNav div.nav-main-collapse.collapse {
		display: none !important;
	}

	header #topNav div.nav-main-collapse {
		top: 8px;
		position: relative;
	}
	header #topNav div.nav-main-collapse.topFix {
		margin-top:-18px !important;
	}
	header #topNav div.nav-main-collapse.in {
		display: block !important;
	}

	header #topNav div.nav-collapse div.container nav.nav-main {
		float: left;
		width: 100%;
	}

	header #topNav div.nav-main-collapse {
		margin: -8px -15px 0 -15px !important;
		max-height: none;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
		background-color: #003366;
		border-bottom: solid 10px #fff;
	}
	header #topNav div.nav-main-collapse.topFix {
		margin-top:-18px !important;
	}

	header > div.container {
		margin-bottom: 0;
	}

	header #topNav nav ul.nav-main {
		margin-right: -10px;
	}

	header #topNav div.nav-collapse {
		background: #003366;
		width: 100%;
		clear: both;
		width: 100%;
	}

	header #topNav nav.nav-main {
		padding: 10px 0;
		clear: both;
		display: block;
		float: none;
		width: 100%;
	}

	header #topNav nav ul.nav-main li.log-out {
		border-left-width: 0px;
	}

	header #topNav nav.nav-main ul,
	header #topNav nav.nav-main ul li {
		padding: 0;
		margin: 0;
	}

	header #topNav nav.nav-main ul li {
		clear: both;
		float: none;
		display: block;
		border-bottom: 1px solid #383F49;
	}

	header #topNav nav ul.nav-main > li + li {
		margin-left: 0;
	}

	header #topNav nav ul.nav-main ul.dropdown-menu { 
		border-width: 0px;
		width: 100%;
		max-width:inherit;
		min-width: inherit;
	}
	header #topNav nav ul.nav-main li ul a {
		text-decoration:none;
	}




	header #topNav nav ul.nav-main li a,
	header #topNav nav ul.nav-main ul.dropdown-menu li > a {
		padding: 9px 8px;
		border: 0;
		border-top: 0;
		margin: 0;
	}

	header #topNav nav.nav-main ul li:last-child,
	header #topNav nav ul.nav-main ul.dropdown-menu li > a {
		border-bottom: none;
	}

	header #topNav nav ul.nav-main li.dropdown:hover > a {
		margin-bottom: -2px;
	}

	header #topNav nav ul.nav-main li a {
		color: #FFF;
		clear: both;
		float: none;
		display: block;
		padding-left: 0;
		font-size: 14px;
	}
	
	header #topNav nav ul.nav-main li:nth-child(n+2) a:after {
		width: 0px;
	}
		
	
	header #topNav nav ul.nav-main li.mobile-only {
		display:block;
	}



	header #topNav nav ul.nav-main li a i.icon-angle-down {
		position: absolute;
		right: 5px;
		top: 10px;
	}

	header #topNav nav.nav-main ul ul {
		margin-left: 20px !important;
	}

	header #topNav nav.nav-main ul.dropdown-menu {
		position: static;
		clear: both;
		float: none;
		display: none !important;
	}

	header #topNav nav ul.nav-main ul.dropdown-menu {
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}

	header #topNav nav.nav-main li.resp-active > ul.dropdown-menu {
		display: block !important;
	}

	header #topNav nav ul.nav-main ul.dropdown-menu ul.dropdown-menu {
		border: 0;
		margin: 0 5px;
		padding-left: 35px;
	}

	
	header #topNav nav ul.nav-main .dropdown-submenu > a:after {
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid #FFF;
	}

	header #topNav nav ul.nav-main .dropdown-submenu:hover > a:after {
		border-left-color: transparent;
	}

	header #topNav nav ul.nav-pills > li > a:before,
	header #topNav nav ul.nav-main li.dropdown:hover > a:after {
		display: none;
	}

	header #topNav nav ul.nav-main i.icon-caret-down {
		float: right;
	}

	header #topNav nav ul.nav-main ul.dropdown-menu,
	header #topNav nav ul.nav-main li.dropdown.open a.dropdown-toggle,
	header #topNav nav ul.nav-main li a,
	header #topNav nav ul.nav-main li.active a,
	header #topNav nav ul.nav-main li.dropdown:hover a,
	header #topNav nav ul.nav-main ul.dropdown-menu li:hover > a,
	header #topNav nav ul.nav-main li.dropdown:hover ul.dropdown-menu li > a:hover {
		background: none; 
		background-color: transparent;
		color: #FFF;
	}

	header.center nav ul.nav-main > li {
		display: block;
	}

	header #topNav nav ul.nav-main ul.sub-menu {
		padding: 0;
		margin: 0 0 10px 0;
	}

	header #topNav nav ul.nav-main ul.sub-menu ul.sub-menu {
		margin-top: 10px;
	}

	header #topNav nav ul.nav-main i.icon-caret-down {
		color: #ADB0AD !important;
	}

	

	header #topNav ul.scroll-menu {
		position: relative;
		display: inherit !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		-moz-overflow-scrolling: touch;
		-ms-overflow-scrolling: touch;
		-o-overflow-scrolling: touch;
		overflow-scrolling: touch;
		top: 0 !important;
		left: 0 !important;
		width: 100%;
		height: auto;
		max-height: 460px;
		margin: 0;
		border-left: none;
		border-right: none;
		-webkit-border-radius: 0 !important;
		-moz-border-radius: 0 !important;
		-ms-border-radius: 0 !important;
		-o-border-radius: 0 !important;
		border-radius: 0 !important;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		-ms-box-shadow: none;
		-o-box-shadow: none;
		box-shadow: none;
	}
	header #topNav ul.scroll-menu-2x {
		max-height: 230px;
	}

	header #topNav nav.nav-main ul li.login-register-options {
		margin:0;
		padding:20px 10px 0 0;
		background-color:transparent !important;
		display:block;
		width:100%;
	}
	header #topNav li.login-register-options:before {
		display:none !important;
	}
	
	.login-register-options-mobile { 
		display:inline;
	}

	/* Update to enforce button style 
	header #topNav .btn { 
		display: inline-block; 
	}*/
	
	
	
	
	
	
}