/*
 * Side navigation
 *
 * Scrollspy and affixed enhanced navigation to highlight sections and secondary
 * sections of docs content.
 */

/*
 * Side menu slide out
 * 
 */

#pageslide{
	/* These styles MUST be included. Do not change. */
	display:none;
	position:absolute;
	position:fixed;
	top:0;
	height:100%;
	z-index:999999;
	overflow:scroll;
-webkit-overflow-scrolling: touch;

	/* Specify the width of your pageslide here */
	width:200px;
	padding:5px;

	/* These styles are optional, and describe how the pageslide will look */
	background-color:#333333;
	color:#fff;
}
 
.open{}

.no-scrolling{ height:100%; overflow:hidden; position:fixed; }    

/* Mobile and iPad Portrait */
@media only screen and (max-width: 1000px){
	#panel-body{ width:748px; }
}

/* Mobile Landscape and Portrait */
@media only screen and (max-width: 1000px){
	#panel-body{ width:400px; }
	
	ul#nav{display:block;}
 
	#pageslide{ width:200px; background-color:#333333; }
	#pageslide ul{ margin:0; padding:0; }
	#pageslide ul li{ display:block; list-style-type:none; margin:0; padding:0; font-size:14px; }
	#pageslide ul li ul li{ display:block; list-style-type:none; margin:0; padding:0 0 0 15px; font-size:14px; }
	#pageslide a{ display:block; color:#fff; width:100%; padding:5px; font-size:14px; }
	#pageslide a:hover,
	#pageslide a:focus{ text-decoration:none; background-color:#555; color:#fff !important; }
}

/* Mobile Portrait */
@media only screen and (max-width: 1000px) {
	#panel-body{ width: 220px; }
}

/* break points to keep the page slide menu happy */
@media (min-width: 280px) and (max-width: 300px){.container{ width:295px; }}
@media (min-width: 300px) and (max-width: 320px){.container{ width:393px; }}
@media (min-width: 320px) and (max-width: 340px){.container{ width:320px; }}
@media (min-width: 340px) and (max-width: 360px){.container{ width:345px; }}
@media (min-width: 360px) and (max-width: 380px){.container{ width:365px; }}
@media (min-width: 380px) and (max-width: 400px){.container{ width:385px; }}
@media (min-width: 400px) and (max-width: 420px){.container{ width:405px; }}
@media (min-width: 420px) and (max-width: 440px){.container{ width:425px; }}
@media (min-width: 440px) and (max-width: 480px){.container{ width:445px; }}
@media (min-width: 480px) and (max-width: 500px){.container{ width:485px; }}
@media (min-width: 500px) and (max-width: 520px){.container{ width:505px; }}
@media (min-width: 520px) and (max-width: 540px){.container{ width:525px; }}
@media (min-width: 540px) and (max-width: 560px){.container{ width:545px; }}
@media (min-width: 560px) and (max-width: 580px){.container{ width:565px; }}
@media (min-width: 580px) and (max-width: 600px){.container{ width:585px; }}
@media (min-width: 600px) and (max-width: 620px){.container{ width:605px; }}
@media (min-width: 620px) and (max-width: 640px){.container{ width:625px; }}
@media (min-width: 640px) and (max-width: 660px){.container{ width:645px; }}
@media (min-width: 660px) and (max-width: 680px){.container{ width:665px; }}
@media (min-width: 680px) and (max-width: 700px){.container{ width:685px; }}
@media (min-width: 700px) and (max-width: 720px){.container{ width:700px; }}
@media (min-width: 720px) and (max-width: 740px){.container{ width:720px; }}
@media (min-width: 740px) and (max-width: 760px){.container{ width:740px; }}
@media (min-width: 768px) and (max-width: 800px){.container{ width:768px; }}
@media (min-width: 800px) and (max-width: 900px){.container{ width:800px; }}
@media (min-width: 900px) and (max-width: 990px){.container{ width:900px; }}

/* end break points to keep the page slide menu happy */