/* css for the slideout itself */

/*TODO: jquery overlay perhaps */
.slideout-panel:before {
  content: '';
  display: block;
  background-color: rgba(0,0,0,0);
  transition: background-color 0.5s ease-in-out;
}

.slideout-panel-open:before {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(0,0,0,.5);
  z-index: 99;
}

.slideout-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 256px;
  min-height: 100%; /* fallback */
  min-height: 100vh;
  overflow-y: auto;
  /* FIXME: and for other browsers: */
  -webkit-overflow-scrolling: touch;
  z-index: 0;
  display: none;
}

body.mobileSafari .slideout-menu {
	position: absolute; /* fixed position bug iOS */
}

body.iphone .slideout-menu {
	min-height: 100%; /* 100vh would be behind "flash" buttons on bottom of device */
}

.slideout-menu-left {
  left: 0;
}

.slideout-menu-right {
  right: 0;
}

.slideout-panel {
  position: relative;
  z-index: 1;
  will-change: transform;
  background-color: #FFF; /* A background-color is required */
  min-height: 100%; /* fallback */
  min-height: 100vh;
}

body.iphone .slideout-panel {
	min-height: 100%; /* 100vh would be behind "flash" buttons on bottom of device */
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
  overflow: hidden;
}

.slideout-open .slideout-menu {
  display: block;
}


/* nav_menu_slider */

#nav_menu_slider {
	background-color: #1D1F20;
	background-image: linear-gradient(145deg, #1D1F20, #404348);
	color: #fff;
}

#nav_menu_slider a {
	display: block;
	padding: 10px 20px;
	text-decoration: none;
	color: #fff;
}

#nav_menu_slider a:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

#nav_menu_slider ul,
#nav_menu_slider li{
	display: block;
    padding: 0;
    text-decoration: none;
    list-style:none;
}

#nav_menu_slider li.mobile-hide {
	display:none;
}

#nav_menu_slider_whoami {
	border-bottom: 1px solid white;
	padding: 0.5em;
	text-align: right;
}

#nav_menu_slider_businessid {
	position: fixed;
	bottom: 0px;
	right: 0px;
	padding: 0.5em;
	text-align: right;
}

.slideout_panel_only {
	display: none;
}
#nav_menu_slider .slideout_panel_only {
	display: block;
}
/* header */

#header {
	width:100%;
	height:50px;
	margin:0px;
	color:#fff;
	z-index:100;
	position: fixed;
	background-color:#063f60;
	top:0;
}

body.mobileSafari #header{
	position: absolute;
}

/* just to take up same space as header */
.header_spacer {
	width:100%;
	height:50px;
	margin:0px;
}

/* navbar main sections */

#navbar_logo_section {
	float:left;display:inline;padding-top:5px;margin-left:10px
}
#navbar_app_logo {
	margin-right:30px;
	height:40px;
}

#navbar_menu_section {
	float:left;
	margin-left: 7em;
}

#navbar_activate_now_section {
	display: none;
	float: right;
	margin: 16px 3em 5px 0px;
}
#menu_activate_now_section {
	margin: 16px 3em 5px 0px;
}

#navbar_whoami_section {
	float:right;padding-top:7px;text-align:right;margin-right:20px;
}

#navbar_notifications_icon {
	float:right;
	padding-top:14px;
	margin-right:2em;
	font-size:20px;
}
#navbar_notifications_content {
	z-index:99998;
	width:325px;
	max-height:550px;
	border: 2px solid #cccccc;
	border: 2px solid rgba(0,0,0,0.15);
	border-top:0px;
	box-shadow: 0 6px 12px rgba(0,0,0,0.175);
	background-color:#fff;
	color: #2e6e9e;
	position:absolute;top:50px;right:0px;
	border-radius: 0px 0px 8px 8px;
	overflow-y:scroll;
}

.toggled-user {
	color:yellow;
	font-weight:normal
}

#navbar_logout_icon,
#navbar_menu_icon {}
#header .navbar-icon-section {
	float:right;padding-left:10px;padding-top:13px;text-align:right;margin-right:20px;
}

/* navbar other */

#demo_notice {
	clear:both;border-bottom:2px solid #063f60;display:inline-block;width:100%;padding-bottom:8px;padding-top:8px
}
#navbar_whoami_menu_logout {
	z-index:99999;
	width:250px;
 	padding:4px;
	border: 2px solid #cccccc;
	border: 2px solid rgba(0,0,0,0.15);
	border-top:0px;
	box-shadow: 0 6px 12px rgba(0,0,0,0.175);
	background-color:#fff;
	color: #2e6e9e;

	position:absolute;top:50px;right:0px;
	border-right: 0px;
	border-radius:  0px 0px 0px 8px;
}
#navbar_whoami_menu_logout .toggled-user {
	color:inherit;
	font-weight:inherit;
}
#navbar_whoami_menu_logout .name_and_salon {
	margin-bottom:2em;
}

/* css nav menu (to override jquery's) */

/* li = .ui-menu-item */
/* ul = .ui-menu */

/* main horizontal menu */
#nav {
	background-color: #063f60;
    color: #fff;
    height: 50px;
	line-height: 50px;
	border: 0;
	padding: 0;
	margin: 0;
}

/* all items */
#nav .ui-menu-item {
	/* FIXME: padding in % so that it adjusts with font size */
	padding: 0 1.25em;
	background-color:#fff;
	color:#333;
}

#nav .ui-menu-item > a {
	/* fixes ui widget 'a' colors */
	color:inherit;
	text-decoration:none;
}

/* first level (horizontal) items */
#nav > .ui-menu-item {
	background-color: #063f60;
    color: #fff;
	height: 50px;
	border: 0;
	margin: 0;
}

/* all submenus: */
#nav .ui-menu {
	line-height: 35px;
	border: 1px solid #cccccc;
	border: 1px solid rgba(0,0,0,0.15);
	box-shadow: 0 6px 12px rgba(0,0,0,0.175);
}

/* #nav2 ul li a:hover, #nav2 li a:hover */
#nav li.ui-state-active,
#nav li.ui-state-focus {
  color:#000;
  font-weight:normal;
  border: inherit;
  border-top: 0; /* fixes jquery-ui active border */
  margin-top: 0; /* fixes jquery-ui active border */
  background-image:none;
  background-color:#eee;
}
#nav li.ui-state-focus {
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
  background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF5F5F5', endColorstr='#FFE8E8E8', GradientType=0);
  background-color: #e8e8e8;
}

/* other */

.activation-link,
#nav_menu_slider .activation-link{
	color: white !important;
	background-color: green;
	border: 2px solid white;
	padding: 5px 10px;
	text-decoration: none;
}
#nav_menu_slider .activation-link{
	display: inline-block;
	margin-top: 1em;
}

/* media query changes: */
/*
	1240px can't do navbar_whoami_section w/rosy
	1273px w/bodybrite.png - 107 px ide
		SR-white logo is 193 px wide.
	----
*/

@media screen and (min-width: 1325px){
	#navbar_whoami_section {
		display:block;
	}
	#navbar_whoami_menu_logout .name_and_salon {
		display:none;
	}
}

@media screen and (min-width: 1245px){
	#navbar_activate_now_section {
		display:block;
	}
	#menu_activate_now_section {
		display:none;
	}
}

/* < 960 */
html.max-width-desk #navbar_app_logo{
	margin-right:10px;
}
html.max-width-desk #navbar_menu_section{
	margin-left: 3em;
	font-size: 12px;
}
html.max-width-desk #navbar_notifications_icon {margin-right: 0.75em;}

/* fixme: somehow leave this alone: */
html.max-width-desk #nav .ui-menu-item {
	padding: 0 0.8em;
}
html.max-width-desk #demo_notice{
	font-size:12px;
}

/* < 750 */
html.max-width-tablet #navbar_menu_section{
	/* just so we get less flash of content waiting for javascript hide action */
	display: none;
/*	margin-left:20px;
	float:right;*/
}