/* -----------------------------------
 * Slidebars
 * Version 0.10.3
 * http://plugins.adchsm.me/slidebars/
 *
 * Written by Adam Smith
 * http://www.adchsm.me/
 *
 * Released under MIT License
 * http://plugins.adchsm.me/slidebars/license.txt
 *
 * -------------------
 * Slidebars CSS Index
 *
 * 001 - Box Model, Html & Body
 * 002 - Site
 * 003 - Slidebars
 * 004 - Animation
 * 005 - Helper Classes
 *
 * ----------------------------
 * 001 - Box Model, Html & Body
 */

html, body, #sb-site, .sb-site-container, .sb-slidebar {
	/* Set box model to prevent any user added margins or paddings from altering the widths or heights. */
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

html, body {
	width: 100%;
	overflow-x: hidden; /* Stops horizontal scrolling. */
}

html {
	height: 100%; /* Site is as tall as device. */
}

body {
	min-height: 100%;
	height: auto;
	position: relative; /* Required for static Slidebars to function properly. */
	background-color:#f2f2f2;
}

/* Site scroll locking - prevent site from scrolling when a Slidebar is open, except when static Slidebars are only available. */
html.sb-scroll-lock.sb-active:not(.sb-static) {
	overflow: hidden;
}

/* ----------
 * 002 - Site
 */

#sb-site, .sb-site-container {/* You may now use class .sb-site-container instead of #sb-site and use your own id. However please make sure you don't set any of the following styles any differently on your id. */
	position: relative;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;/* Site sits above Slidebars */
	background-color: #ffffff;/* Default background colour, overwrite this with your own css. I suggest moving your html or body background styling here. Making this transparent will allow the Slidebars beneath to be visible. */
	min-height: calc(100vh - 56px);
	overflow-y: auto;
	overflow-x: hidden;
	background-color: #F2F2F2;
	z-index: 2;/* Site sits above Slidebars */
}

#sb-site {
	height: calc(100vh - 56px);
	min-height: calc(100vh - 56px);
	margin-top: 56px;
}


/* Micro clearfix by Nicolas Gallagher, ensures the site container hits the top and bottom of the screen. */
#sb-site:before, #sb-site:after, .sb-site-container:before, .sb-site-container:after {
	content: ' ';
	display: table;
}

#sb-site:before, #sb-site:after, .sb-site-container:before, .sb-site-container:after {
    clear: both;
}

/* ---------------
 * 003 - Slidebars
 */

.sb-slidebar {
	overflow-y: auto;/* Enable vertical scrolling on Slidebars when needed. */
	position: fixed;
	margin-top:56px;
	margin-bottom: 0px;
	height:auto;
	top: 0;
	bottom:0;
	z-index: 0;/* Slidebars sit behind sb-site. */
	display: none;/* Initially hide the Slidebars. Changed from visibility to display to allow -webkit-overflow-scrolling. */
	background-color: #eee;/* Default Slidebars background colour, overwrite this with your own css. */
}

.sb-slidebar:not('.aval-observation-content'), .sb-slidebar * {
	-webkit-transform: translateZ( 0px ); /* Fixes issues with translated and z-indexed elements on iOS 7. */
}

.sb-left {
	left: 0;/* Set Slidebar to the left. */
	width:250px;
	background-color: #fff;
	box-shadow: rgba(0,0,0,0.2) 0 0 8px 0;
}

.sb-right,.sb-right2 {
	right: 0; /* Set Slidebar to the right. */
	width:100%;
	background-color: white;
}

html.sb-static .sb-slidebar,
.sb-slidebar.sb-static {
	position: absolute; /* Makes Slidebars scroll naturally with the site, and unfixes them for Android Browser < 3 and iOS < 5. */
}

.sb-slidebar.sb-active {
	/* z-index: 90001; */
	display: block; /* Makes Slidebars visibile when open. Changed from visibility to display to allow -webkit-overflow-scrolling. */
}

.sb-style-overlay {
	z-index: 9999; /* Set z-index high to ensure it overlays any other site elements. */
}

.sb-momentum-scrolling {
	-webkit-overflow-scrolling: touch; /* Adds native momentum scrolling for iOS & Android devices. */
}

/* ---------------
 * 004 - Animation
 */

.sb-slide, #sb-site, .sb-site-container, .sb-slidebar {
	/*-webkit-transform: translate( 0px );
	   -moz-transform: translate( 0px );
	     -o-transform: translate( 0px );
	        transform: translate( 0px );*/
	
	-webkit-transition: -webkit-transform 400ms ease;
	   -moz-transition:    -moz-transform 400ms ease;
	     -o-transition:      -o-transform 400ms ease;
	        transition:         transform 400ms ease;
	
	-webkit-transition-property: -webkit-transform, left, right; /* Add left/right for Android < 4.4. */
	-webkit-backface-visibility: hidden; /* Prevents flickering. This is non essential, and you may remove it if your having problems with fixed background images in Chrome. */
}

/* --------------------
 * 005 - Helper Classes
 */
 
.sb-hide { 
	display: none; /* Optionally applied to control classes when Slidebars is disabled over a certain width. */
}

.sb-right {
	z-index: 1;
}

.sb-right,.sb-right2 {
	width: auto;
	right: 0;
	left: 0;
	padding-left:15px;
	padding-right:15px;
	padding-top:20px;
	padding-bottom:56px;
	background-color: #F2F2F2;
}


@media (max-width: 1024.99px) {

	.sb-right,.sb-right2 {
		width: auto;
		right: 0;
		left: 0;
		padding-left:0;
		padding-right:0;
		padding-top:0;
		padding-bottom:0;
		background-color: #F2F2F2;
		overflow-x: hidden;
	}

}

@media (min-width: 1024px)
{
	.sb-right,.sb-right2 {
		padding-bottom:12px;
	}
}

@media (min-width: 60.0em) and (not (display-mode:fullscreen)) {
	body:not(.page_cockpit):not(.page_pistecheck):not(.page_rescuedoc):not(.page_assessment):not(.page_explodoc):not(.page_runtracker):not(.page_snowprofiler) .sb-right,.sb-right2 {
		padding-left:40px;
		padding-right:40px;
		padding-top:20px;
		padding-bottom:20px;
		margin-left: 250px;
	}
	
	body:not(.page_cockpit):not(.page_pistecheck):not(.page_rescuedoc):not(.page_assessment):not(.page_explodoc):not(.page_runtracker):not(.page_snowprofiler) .sb-left {
		z-index: 3;
		display: block;
	}

	body:not(.page_cockpit):not(.page_pistecheck):not(.page_rescuedoc):not(.page_assessment):not(.page_explodoc):not(.page_runtracker):not(.page_snowprofiler) .sb-left + #sb-site, .sb-site-container {
		-webkit-transform: translate( 250px );
		   -moz-transform: translate( 250px );
			 -o-transform: translate( 250px );
				transform: translate( 250px );
		margin-right:250px;
	}
}

@media (display-mode: fullscreen) {
	.sb-left{
		z-index: 3;
		display: none;
	}

	.sb-left + #sb-site, .sb-site-container {
		-webkit-transform: translate( 0 );
		   -moz-transform: translate( 0 );
			 -o-transform: translate( 0 );
				transform: translate( 0 );
		margin-right:0;
	}	
}