.section {
	word-wrap: break-word;
	word-break: break-word;
}

.section img {
	max-width: 100%;
}

.section .title:focus {
	outline-width: thin;
}

body:not(.user-is-tabbing) .title:focus {
	outline: none;
}
/*
 * Map Actions
 * Partially duplicated in storymaps/common/builder/ckeditor/editor.css
 */

.textEditorContent .entry a:not([data-storymaps]) {
	text-decoration: underline;
}

/*
.section a:not([data-storymaps]):hover {
	text-decoration: none;
}
*/

/*
.section a:not([data-storymaps]):after {
	display:inline-block;
	font-family: 'Glyphicons Halflings';
	content: "\e164";
	margin-left: 2px;
	font-size: 70%;
}
*/

/* same border-bottom color as journal.
 * consider matching this dynamically
 * with the link color */
.textEditorContent a[data-storymaps] {
	border-bottom: 1px dashed #555;
	text-decoration: none;
	cursor: pointer;
}

/*
 * Inline media
 */

figure {
	margin: 15px 0;
	display: block; /* For IE8 */
	max-width: 100%;
}

figure img {
	max-width: 100%;
}

/* this is default figcaption color. if you change this here,
 * you also have to change the rule that gets applied in builder
 * in ckeditor/editor.css */
figure figcaption {
	text-align: left;
	display: block; /* For IE8 */
	font-size: 0.85em;
	color: #5F5F5F;
	margin-top: 6px;
}

/* if you change this here, you also have to change the
 * #caption-style inline style tag to the editor head
 * in InlineEditor.js */
body[data-theme-major=black] figure figcaption {
	color: #aaa;
}

/*
 * Image full screen V1.0
 */

/*
 * Extra wrapper around image and full screen button
 *  for proper alignement of full screen button in all text centering
 */

.image-wrapper {
	display: inline-block;
	position: relative;
	cursor: default;
	pointer-events: none;
	min-width: 36px;
	min-height: 36px;
	max-width: 100%;
}

.btn-fullscreen {
	display: none;
	position: absolute;
	right: 10px;
	width: 26px;
	height: 26px;
	background: url('../../../../resources/tpl/viewer/icons/media-fullscreen.png') 0 0;
	opacity: 0.6;
	margin-top: 10px;
	border: none;
}

.btn-fullscreen:hover,
.btn-fullscreen:focus {
	opacity: 1.0;
	cursor: pointer;
}

/* focus mainstage button: hidden until focused with keyboard navigation */

.centering {
	width: 100%;
	text-align: center;
}

.image-container.has-width img {
	height: inherit;
}


/*
 * The container is supposed to be an image-container except when ckeditor bug and decide to use a p
 * (seems to happen a lot when playing with alignement)
 */
/*.image-container*/.has-width:not(.float-right) .btn-fullscreen {
	vertical-align: top;
}

/* sometimes the RTE get rid of the fullscreen class so assume user wants that */
p.has-width.float-right img {
	cursor: pointer;
}

.image-container.has-width.float-right {
	text-align: right !important;
}

.activate-fullscreen .btn-fullscreen {
	display: inline-block;
}

.image-container.activate-fullscreen .image-wrapper,
/* that should not happen */
figure > .image-wrapper {
	cursor: pointer;
	pointer-events: all;
}

p[tabindex='0'] > .image-wrapper {
	cursor: pointer;
	pointer-events: all;
}

/*
 * Image included in a link
 * The full screen button is not honored but the link is
 */

.image-container > a > .image-wrapper {
	cursor: pointer;
	pointer-events: all;
}

/* if an image is a link, don't show fullscreen btn */
.image-container > a > .image-wrapper img {
	pointer-events: none;
}

/* if an image is a link, don't show fullscreen button */
.image-container > a > .image-wrapper .btn-fullscreen {
	display: none;
}

/*
 * Image full screen compatibility for V1.0-beta
 */

.btn-fullscreen-container {
 	display: block;
}

.btn-fullscreen-container > span {
 	display: block;
}

/*
 * Image full screen modal
 */

#cboxContent {
	position: initial !important;
}

/* Title of the full screen box */
#cboxTitle {
	padding: 0 25px;
	overflow: hidden;
	height: 19px;
	bottom: 20px !important;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#cboxClose {
	/* give focus ring a bit of space */
	top: 3px;
	right: 3px !important;
	outline-width: medium;
	bottom: initial !important;
	width: 39px !important;
	height: 39px;
	background: url('../../../../resources/tpl/viewer/icons/media-fullscreen-close.png') !important;
	color: transparent !important;
}

#cboxClose:hover {
	background-position-y: -39px !important;
}

/*
 * Iframe
 */

.textEditorContent iframe {
	border: none;
	background-color: transparent;
	display: block;
}

.iframe-container {
	position: relative;
}

.iframe-container.custom iframe {
	max-width: 100%;
}

.iframe-container .visible-on-focus.skip-iframe,
.iframe-container .visible-on-focus.skip-back {
	padding: 5px 10px;
	position: absolute;
	z-index: 10;
}

.iframe-container .visible-on-focus.skip-iframe {
	top: 0;
}

.iframe-container .visible-on-focus.skip-back {
	bottom: 0;
}

.cke_inner.cke_reset {
	background-color: transparent;
}

/*
 * Main Stage BACK
 */

.mediaBackContainer {
	display: none;
	position: absolute;
	top: 0px;
	text-align:center;
	z-index: 30;
	border: none;
	padding: 0;
}

.backButton {
	display:inline-block;
	border: 1px solid #428BC9;
	border-top: none;
	background-color: #FFF;
	color: #000;
	font-size: 20px;
	padding: 9px 18px 6px 15px;
	cursor: pointer;
	z-index: 30;
	box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.backArrow {
	display: inline-block;
	width: 28px;
	height: 28px;
	background: url('../../../../resources/tpl/viewer/icons/mainmedia-back.png');
	margin-right: 6px;
}

.backLbl {
	font-size: 1.2em;
	vertical-align: 6px;
	font-family: 'open_sanssemibold', sans-serif;
	text-transform: uppercase;
}