/* panel */

.ui-panel {
	width: 17em;
	min-height: 100%;
	border-width: 0;
	position: absolute;
	top: 0;
	display: block;
}
.ui-panel-closed {
	width: 0;
	overflow: hidden;
}
.ui-panel-fixed {
	position: fixed;
	bottom: -1px; /* fixes gap on Chrome for Android */
	padding-bottom: 1px;
}
.ui-panel-display-overlay {
	z-index: 1001; /* fixed toolbars have z-index 1000 */
}
.ui-panel-display-reveal {
	z-index: 0;
}
.ui-panel-display-push {
	z-index: 999;
}
.ui-panel-inner {
	padding: 15px;
}

/* content-wrap */
.ui-panel-content-wrap {
	position: relative;
	left: 0;
	min-height: inherit;
	border: none;
	z-index: 999;
}
.ui-panel-content-wrap-display-overlay,
.ui-panel-animate.ui-panel-content-wrap > .ui-header, /* ios4 fix */
.ui-panel-content-wrap-closed {
	position: static;
}

/* dismiss */
.ui-panel-dismiss {
	position: absolute;
	top: 0;
	left:0;
	height: 100%;
	width: 100%;
	z-index: 1002;
	display: none;
}
.ui-panel-dismiss-open {
	display: block;
}

/* animate class is added to panel, wrapper and fixed toolbars */
.ui-panel-animate {
	-webkit-transition: -webkit-transform 350ms ease;
	-moz-transition: -moz-transform 350ms ease;
	transition: transform 350ms ease;
}

/* hardware acceleration for smoother transitions */
.ui-panel-animate.ui-panel:not(.ui-panel-display-reveal),
.ui-panel-animate.ui-panel:not(.ui-panel-display-reveal) > div,
.ui-panel-animate.ui-panel-content-wrap,
.ui-panel-animate.ui-panel-content-fixed-toolbar {
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0,0,0);
}

/* positioning: panel */
/* panel left  */
.ui-panel-position-left {
	left: -17em;
}
/* animated: panel left (for overlay and push) */
.ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-left.ui-panel-display-push {
	left: 0;
	-webkit-transform: translate3d(-17em,0,0);
	-moz-transform: translate3d(-17em,0,0);
	transform: translate3d(-17em,0,0);
}
/* panel left open */
.ui-panel-position-left.ui-panel-display-reveal, /* negate "panel left" for reveal */
.ui-panel-position-left.ui-panel-open {
	left: 0;
}
/* animated: panel left open (for overlay and push) */
.ui-panel-animate.ui-panel-position-left.ui-panel-open.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-left.ui-panel-open.ui-panel-display-push {
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
/* panel right */
.ui-panel-position-right {
	right: -17em;
}
/* animated: panel right (for overlay and push) */
.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
	right: 0;
	-webkit-transform: translate3d(17em,0,0);
	-moz-transform: translate3d(17em,0,0);
	transform: translate3d(17em,0,0);
}
/* panel right open */
.ui-panel-position-right.ui-panel-display-reveal,  /* negate "panel right" for reveal */
.ui-panel-position-right.ui-panel-open {
	right: 0;
}
/* animated: panel right open (for overlay and push) */
.ui-panel-animate.ui-panel-position-right.ui-panel-open.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-right.ui-panel-open.ui-panel-display-push {
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/* positioning: content wrap, fixed toolbars and dismiss */
/* panel left open */
.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open,
.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open{
	left: 17em;
}
/* panel left dismiss open */
.ui-panel-dismiss-position-left.ui-panel-dismiss-open {
	left: 0;
	-webkit-transform: translate3d(17em,0,0);
	-moz-transform: translate3d(17em,0,0);
	transform: translate3d(17em,0,0);
}
/* animated: panel left open (for reveal and push) */
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal,
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push,
.ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal,
.ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
	left: 0;
	-webkit-transform: translate3d(17em,0,0);
	-moz-transform: translate3d(17em,0,0);
	transform: translate3d(17em,0,0);
}
/* panel right open */
.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open,
.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open {
	left:-17em;
}
/* panel right dismiss open */
.ui-panel-dismiss-position-right.ui-panel-dismiss-open {
	left: 0;
	-webkit-transform: translate3d(-17em,0,0);
	-moz-transform: translate3d(-17em,0,0);
	transform: translate3d(-17em,0,0);
}
/* animated: panel right open (for reveal and push) */
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, 
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push,
.ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, 
.ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
	left: 0;
	-webkit-transform: translate3d(-17em,0,0);
	-moz-transform: translate3d(-17em,0,0);
	transform: translate3d(-17em,0,0);
}
/* negate "panel left/right open" for overlay */
.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-overlay,
.ui-panel-content-wrap-open.ui-panel-content-wrap-display-overlay {
	left: 0;
}

/* always disable overflow-x to prevent zoom issue on Android */
.ui-page-active.ui-page-panel {
	overflow-x: hidden;
}

/* shadows and borders */
.ui-panel-display-reveal {
	-webkit-box-shadow: inset -5px 0 5px rgba(0,0,0,.15);
	-moz-box-shadow: inset -5px 0 5px rgba(0,0,0,.15);
	box-shadow: inset -5px 0 5px rgba(0,0,0,.15);
}
.ui-panel-position-right.ui-panel-display-reveal {
	-webkit-box-shadow: inset 5px 0 5px rgba(0,0,0,.15);
	-moz-box-shadow: inset 5px 0 5px rgba(0,0,0,.15);
	box-shadow: inset 5px 0 5px rgba(0,0,0,.15);
}
.ui-panel-position-right.ui-panel-display-overlay {
	-webkit-box-shadow: -5px 0px 5px rgba(0,0,0,.15);
	-moz-box-shadow: -5px 0px 5px rgba(0,0,0,.15);
	box-shadow: -5px 0px 5px rgba(0,0,0,.15);
}
.ui-panel-position-left.ui-panel-display-overlay {
	-webkit-box-shadow: 5px 0px 5px rgba(0,0,0,.15);
	-moz-box-shadow: 5px 0px 5px rgba(0,0,0,.15);
	box-shadow: 5px 0px 5px rgba(0,0,0,.15);
}
.ui-panel-display-push.ui-panel-open.ui-panel-position-left {
	border-right-width: 1px;
	margin-right: -1px;
}
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push {
	margin-left: 1px;
}
.ui-panel-display-push.ui-panel-open.ui-panel-position-right {
	border-left-width: 1px;
	margin-left: -1px;
}
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push {
	margin-right: 1px;
}

/* wrap push on wide viewports once open */
@media (min-width:55em){
	.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push,
	.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal,
	.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-push,
	.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal {
		margin-right: 17em;
	}
	.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-wrap-display-push.ui-panel-content-fixed-toolbar-position-right,
	.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-wrap-display-reveal.ui-panel-content-fixed-toolbar-position-right,
	.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
	.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
		margin: 0 0 0 17em;
	}
	.ui-responsive-panel .ui-panel-dismiss-display-push {
		display: none;
	}
}

/* panel top */

/* position of the top or bottom panel */
.ui-panel-position-bottom,
.ui-panel-position-top{
	width:100%;
	min-height: 0;
	min-width: 100%;
	max-height: 14em;
	display:block;
	overflow: hidden;
	z-index:1003;
	position:fixed;
	left:0;
	right:0;
}

/* top or bottom panel when closed */
.ui-panel-position-bottom.ui-panel-closed,
.ui-panel-position-top.ui-panel-closed{
	height: 0;
}

.ui-page-active.ui-page-panel{
	overflow-y:hidden;
}

.ui-panel-display-push.ui-panel-open.ui-panel-position-top {
	border-bottom-width: 1px;
	margin-bottom: 1px;
}

.ui-panel-position-top.ui-panel-fixed{
	bottom:auto;
	padding-bottom:auto;	
}

/* modal panel when top panel is open */
.ui-panel-dismiss-position-top.ui-panel-dismiss-open {
	bottom: -5em;
	top:0;
	position: absolute;
}

.ui-panel-dismiss{
	display:block;
	visibility:hidden;
	background-color: #000;
	opacity: 0;
}

.ui-panel-dismiss-open {
	visibility:visible;
}

/* top panel when closed */
.ui-panel-animate.ui-panel-position-top.ui-panel-display-overlay, 
.ui-panel-animate.ui-panel-position-top.ui-panel-display-push{
	-webkit-transform: translate3d(0,-5em,0);
	-moz-transform: translate3d(0,-5em,0);
	transform: translate3d(0,-5em,0);
}

.ui-panel-position-top.ui-panel-display-overlay {
	-webkit-box-shadow: 0px 5px 5px rgba(0,0,0,.15);
	-moz-box-shadow: 0px 5px 5px rgba(0,0,0,.15);
	box-shadow: 0px 5px 5px rgba(0,0,0,.15);
}

/* panel top - fixed toolbar */

.ui-panel-animate.ui-panel-content-fixed-toolbar-position-top.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push {
	margin-top: 1px;
}

.ui-footer.ui-panel-content-fixed-toolbar-position-top.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push{
	bottom:0;
	-webkit-transform: translate3d(0,5em,0);
	-moz-transform: translate3d(0,5em,0);
	transform: translate3d(0,5em,0);
}

/* styling to make the modal dark with opacity */
.background-opaque{
	opacity: 0.5;
	transition: opacity 350ms ease;
	-webkit-transition: opacity 350ms ease, -webkit-transform 350ms ease;
	-moz-transition: opacity 350ms ease;
}

.background-bright{
	transition: opacity 350ms ease, visibility 0s 350ms;
	-webkit-transition: opacity 350ms ease, visibility 0s 350ms, -webkit-transform 350ms ease;
	-moz-transition: opacity 350ms ease, visibility 0s 350ms;
}


/* panel bottom */

/* position of the top panel */
.ui-panel-position-bottom{
	bottom:-1px;
	top: auto;
}

.ui-panel-display-push.ui-panel-open.ui-panel-position-bottom {
	border-top-width: 1px;
	margin-top: 1px;
}

/* modal panel when bottom panel is open */
.ui-panel-dismiss-position-bottom.ui-panel-dismiss-open {

	bottom:0;
	position: absolute;
}

/* bottom panel when closed */
.ui-panel-animate.ui-panel-position-bottom.ui-panel-display-overlay, 
.ui-panel-animate.ui-panel-position-bottom.ui-panel-display-push{
	-webkit-transform: translate3d(0,5em,0);
	-moz-transform: translate3d(0,5em,0);
	transform: translate3d(0,5em,0);
}

.ui-panel-position-bottom.ui-panel-display-overlay {
	-webkit-box-shadow: 0px -5px 5px rgba(0,0,0,.15);
	-moz-box-shadow: 0px -5px 5px rgba(0,0,0,.15);
	box-shadow: 0px -5px 5px rgba(0,0,0,.15);
}

/* panel bottom - fixed toolbar */

.ui-panel-animate.ui-panel-content-fixed-toolbar-position-bottom.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push {
	margin-bottom: 1px;
}

.ui-header.ui-panel-content-fixed-toolbar-position-bottom.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push{
	top:0;
	-webkit-transform: translate3d(0,-5em,0);
	-moz-transform: translate3d(0,-5em,0);
	transform: translate3d(0,-5em,0);
}
