/*
 * Style tweaks
 * --------------------------------------------------
 */

 /* Colour Codes*/
  /*

  standard text: #000000
  Aveda logo (Pantone 384 as per their spec): #939905
  Green from leaf - html background: (also used for borders, menu background): #B7CCA1
  Link: #6B8055 (same palette as green from leaf but darkened by 30%)
  */ 
 
html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
	font-family: Arial,Tahoma;
	background-image: url("/common/Background.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;	
	background-attachment: fixed;
}
	
body {
	padding-top: 222px;
	/* for sticky-footer */
	display:flex;
	min-height: 100vh;
	flex-direction:column;
	/* for sticky-footer */
}

@media(min-width:600px){
	body {
		padding-top:276px;
	}
}

@media(min-width:768px){
	body {
		padding-top:288px;
	}
}

@media(min-width:992px){
	body {
		padding-top:170px;
	}
}

@media(min-width:1200px){
	body {
		padding-top:200px;
	}
}

/* for sticky-footer - wrapper wraps everything */
#wrapper {
	flex:1 0 auto;
	margin-top:0px;
}

/* for sticky-footer */

.hero-image {
		/*background-image:url('SalonMain.jpg');*/
		height:500px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
		padding-top:400px;
}

footer
{
 color:#ffffff;
 background-color:#B7CCA1;
 /*background-color:#ffffff;*/
 /*margin-top:10px;*/
 padding: 40px 0;
}

.sticky-footer {
	flex-shrink:0;
	padding:20px;
}

footer a
{
color:#6B8055;
}

footer a:hover
{
color:#000000;
}

.navbar-fixed-top {
    /*top: 0;*/
    border: none;
}

.navbar-collapse {
	background-color: #B7CCA1;
}


/* To do with menu height on smaller devices / landscape on phone */
/*.navbar .navbar-collapse.in { max-height: 100vh !important; overflow-y: scroll !important; overflow-x: hidden !important; }*/
/*.navbar .navbar-collapse.in { max-height: 310px !important; overflow-y: scroll !important; overflow-x: hidden !important; }*/
.navbar .navbar-collapse.in {max-height:1000px !important; overflow-y: hidden !important; overflow-x: hidden !important; }

.navbav-fixed-top, .navbar-inverse
{
	background: transparent;
}

.navbar-toggle
{
 background-color: #B7CCA1;
 border:none;
}

/*
.navbar-inverse::after {
max-height:0px;
margin-bottom: 0px;
padding-bottom:0px;
background-color: #ff0000;
}
*/


.dropdown-toggle
{
 /*background-color:rgba(61,111,61,0.9);*/ /* don't need to declare the background-color on this as it is already declared in the navbar */
	background-color:#B7CCA1;
}

.dropdown-menu
{
 background-color: #B7CCA1;
}

.nav.navbar-nav {
background-color:#B7CCA1;
}

.nav.navbar-nav li
{
	margin-bottom:0px;
}

.nav.navbar-nav li a
{
color:#000000;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
}

.nav.navbar-nav li a:hover
{
/*color:#ffffff;*/
background-color:#ffffff;
color: #000000;
}

/* AHM 10/09/2017 To keep hamburger menu dropdown li styling the same for all viewport widths */
.nav.navbar-nav .open .dropdown-menu > li > a
{
/*color:#ffffff;*/
}

.nav.navbar-nav .open .dropdown-menu > li > a:hover
{
color:#000000;
background-color:#ffffff;
}

.page-w-hero {
	margin-left:0px;
	margin-right:0px;
}

.page-no-hero {
	margin-bottom:20px;
	margin-right:0px;
	padding-top: 50px;
}

@media(min-width:600px){
	.page-no-hero {
		padding-top:80px;
	}
}

h1
{
/*margin-top: 20px;*/
margin-bottom: 20px;
color: #000000;
/*font-size: 14pt;*/
font-size:1.5em;
font-weight: bold;
font-family: Arial,Tahoma;
}

h1 a:link
{
/*font-size: 12pt;*/
font-weight: bold;
text-decoration: none;	
color: #6B8055;
}

h2
{
/*margin-top: 20px;*/
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
color: #000000;
/*font-size: 10pt;*/
font-weight: bold;
font-family: Arial,Tahoma;
}

h2 a:link
{
font-weight: bold;
text-decoration: none;
color: #6B8055;		  
}

h3 
{
/*margin-top: 20px;*/
margin-bottom: 10px;
/*margin-left: 20px;
margin-right: 20px;*/
color: #000000;
/*font-size: 10pt;*/
font-weight: bold;
font-family: Arial,Tahoma;
}

h3 a:link
{
font-weight: bold;
text-decoration: none;			  
}

h4
{
/*margin-top: 20px;*/
margin-bottom: 10px;
/*margin-left: 20px;
margin-right: 20px;*/
/*color: #EA9D00;*/
color: #000000;
/*font-size: 10pt;*/
font-weight: bold;
font-family: Arial,Tahoma;
}

h5
{
margin-top: 0px;
margin-bottom: 10px;
/*margin-left: 20px;
margin-right: 20px;*/
/*color: #EA9D00;*/
color: #000000;
/*font-size: 10pt;*/
font-weight: bold;
font-family: Arial,Tahoma;
}

h5 a:link
{
font-weight: bold;
text-decoration: none;
color: #99B2CC;		  
}

p
{
margin-top: 0px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
color: #000000;
/*font-size: 10pt;*/
font-family: Arial,Tahoma;
text-align: justify;
max-height: 999999px; /* this prevents font-boosting in Android Chrome browser */
}

a
{
color: #6B8055;
font-weight: bold;
}

.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
	background-color: #B7CCA1;
	/*rgba(183, 204, 161, 0.4);*/
}

th, td
{
padding:5px;
color: #000000;
/*font-size: 10pt;*/
font-family: Arial,Tahoma;
}
/*
td a
{
color: #6B8055;
font-weight: bold;
}
*/

li
{
margin-top: 0px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
color: #000000;
}

input[type=submit]
{
color: #000000;
background-color: #B7CCA1
}

input[type=button]
{
color: #000000;
background-color: #B7CCA1;
}
	
label
{
color: #000000;
font-weight: normal;
}
.btn.btn-primary.btn-lg
{
 background-color:#B7CCA1;
 border:none;
 color:#000000;
}

.btn.btn-primary.btn-voucher
{
 background-image: url("/common/Background.png");
 padding: 10px;	
 font-weight:bold;
 max-width: 200px;
}

.staff-image-overlay
{
	position: absolute;
	width: 80%;
	max-width: 300px;
	background-color: rgba(255,255,255,0.6);
	top: 85%;
	left: 50%;
  transform: translate(-50%,-50%);
	text-align:center;
	padding:5px;
	border-radius:5px;
}

/* .modal-open padding-right below needed to be set to 0px to prevent the container below the menu from being set with padding-right: 17px; */
.modal-open {
	padding-right: 0px !important;
}

.popup-close {
    position: absolute;
    height: 25px;
    width: 25px;
    left: auto;
    right: 30px;
    bottom: auto;
    top: 10px;
    padding: 0px;
    color: #ffffff;
    font-family: Arial;
    font-weight: 100;
    font-size: 24px;
    line-height: 24px;
    border: 2px solid #ffffff;
    border-radius: 26px;
    background-color: #B7CCA1;
		z-index: 1;
}

.modal-dialog {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
	border: none;
}

.modal-content	{
	border: 10px solid #B7CCA1;
}

@media (min-width: 768px) {
  .modal-dialog {
    width: 514px;
    /margin: 30px auto;*/
		margin: 0 auto;
  }
}