/*
 * Using a table to properly align Side Accordion Panel and Main Stage seems to be
 * the only way to have the edit button to properly overflow the Side Panel
 */
.containerPanelInner {
	table-layout: fixed;
	width: 100%;
	height: 100%;
}

/*
 * Accordion
 */

#accordionPanel {
	display: none;
	position: relative;
	height: 100%;
	opacity: 1.0;
	vertical-align: top;
}

body.layout-accordion:not(.isBuilderLanding) #accordionPanel {
	display: table-cell;
}

/*
 * Tab and bullet description
 */

#descLegendPanel {
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
	z-index: 2;
}

body.layout-tab:not(.isBuilderLanding) #descLegendPanel,
body.layout-bullet:not(.isBuilderLanding) #descLegendPanel {
	display: block;
}

body.layout-tab:not(.isBuilderLanding) #nav-bar,
body.layout-bullet:not(.isBuilderLanding) #nav-bar {
	display: block;
}

/*
 * Tab and bullet right panel alignment
 */

body.layout-tab-right #descLegendPanel,
body.layout-bullet-right #descLegendPanel {
	left: inherit;
	right: 0;
}

/*
 * Right layout Map attribution
 */

body.layout-tab-right:not(.mobile-view) .esriAttribution,
body.layout-bullet-right:not(.mobile-view) .esriAttribution {
	margin-top: 18px;
	float: right;
}

/*
 * Map controls legend
 */

body.layout-accordion .mainMediaContainer .legendContainer,
body.layout-tab .mainMediaContainer .legendContainer,
body.layout-bullet .mainMediaContainer .legendContainer {
	right: 20px;
}

/*
 * Builder mask never display in viewer
 */

.builder-mask {
	display: none;
}

/*
 * Header layout
 */

body.layout-bullet #headerDesktop.compact {
	height: 53px;
}

body.layout-bullet #headerDesktop .textArea {
	padding-top: 6px;
}

body.layout-bullet #headerDesktop .rightArea {
	padding-top: 18px;
}

body.layout-bullet #headerDesktop.hideDesktop {
	height: 6px;
	/* hide the bullet tooltip */
	z-index: 9;
}

.skip-to-content {
	position: absolute;
	z-index: 3; /* over side panel */
}

body.layout-tab-left .mainMediaContainer .return-to-content,
body.layout-accordion-left .mainMediaContainer .return-to-content,
body.layout-bullet-left .mainMediaContainer .return-to-content {
	left: auto;
	right: 20%;
}

body.layout-tab-right .mainMediaContainer .return-to-content,
body.layout-accordion-right .mainMediaContainer .return-to-content,
body.layout-bullet-right .mainMediaContainer .return-to-content {
	right: auto;
	left: 20%;
}