/*

Notice: This file also contains optimizations for printing.
		Be aware that media queries affect printing unless
		specifically targeted for the screen.

Notice: The !important statement is used a lot.
        The reason for this is that mobile.css needs to take precedence
        in almost every situation, even when template specific styles are
        applied (e.g. templates/Sunrise/style.css which loads after mobile.css).

*/

div.TPLMenuMobile
{
	display: none;
}

/*@media (max-device-width: 768px)*/
/*@media (max-width: 768px)*/
@media screen and (max-width: 900px)
{
	/* Make background image scale properly and prevent it from scrolling along with content on mobile devices with Android/iOS.
	   Unfortunately this prevents us from using e.g. window.scrollTo(..) or document.body.scrollTop=0 in JavaScript - it no longer works. */
	html.Normal
	{
		height: 100%;
		overflow: hidden;
	}
	html.Normal body
	{
		height:100%;
		overflow: auto;
		-webkit-overflow-scrolling: touch; /* Notice related fix on input controls below */
	}
	html.TplBrowserSafari.TplMobileDevice input:focus,
	html.TplBrowserSafari.TplMobileDevice textarea:focus
	{
		/* -webkit-overflow-scrolling:touch added above is required to enable scrolling in Safari on iOS.
		   But unfortunately it comes with other problems such as text being hidden while typing in input fields.
		   Applying GPU rendering resolves that particular problem. */
		-webkit-transform: translate3d(0, 0, 0);
	}
}
@media (max-width: 900px)
{
	div.TPLTop,
	div.TPLMiddle,
	div.TPLBottom
	{
		/* Margins may have been applied in Designer - prevent vertical scroll on mobile */
		margin-left: 0px !important;
		margin-right: 0px !important;
	}

	div.TPLPage
	{
		width: 100% !important;
		margin: 0px;
	}

	/* Set small paddings/margins to reduce waste of space on small screens */
	/* NOTICE: This reduces control over the design - we might want to get rid of this optimization at some point.
	   Try adding a background color and borders to e.g. the header and resize the page to mobil size.
	   It looks less than acceptable with header content being sqeezed up against the edge of the header.
	   With the introduction of relative units (em, %) and more resolution breakpoints in SMCMS 4.4+,
	   hardcoding smaller paddings/margins is no longer necessary. But naturally removing this optimization
	   will force users to use relative units and resolution breakpoints to make their websites look
	   properly on mobile - at least if their desktop version has large padding/margins.
	   Also notice that removing the optimizations will be considered a breaking change, so consider moving
	   this change to a new version of _BaseGeneric (e.g. _BaseGeneric3) and make sure all built-in templates
	   look properly without the hardcoded optimization.
	   All optmizations that should be considered for removal has been tagged with "TBD-Remove" */

	div.TPLHeader,
	div.TPLContent, /*html.Normal div.SMExtension,*/
	div.TPLFooter
	{
		margin: 0px 0px 0px 0px !important;		/* TBD-Remove */
		padding: 0px 0px 0px 0px !important;	/* TBD-Remove */

		/* Disable margin collapse (padding with 0px above enabled it, but it's disabled by default in page.css, header.css, and footer.css).
		   Make contained elements with top/bottom margins expand the content area rather than
	       causing spacing above and below it.
	       Examples: https://jsfiddle.net/275z819u/ and http://jsfiddle.net/o1vkar7c/2/
	       Also see https://stackoverflow.com/questions/13573653/css-margin-terror-margin-adds-space-outside-parent-element. */
		padding-top: 0.03px !important; 	/*1px*/		/* TBD-Remove - Added by Designer to Header/Footer (but not Content) when padding-top is set to 0! See SMDesigner/Designer.js > GetIndentationCss(..) */
		padding-bottom: 0.03px !important;	/*1px*/		/* TBD-Remove - Added by Designer to Header/Footer (but not Content) when padding-bottom is set to 0! See SMDesigner/Designer.js > GetIndentationCss(..) */
	}
	div.TPLHeader
	{
		margin-top: 20px !important;
		float: none !important;
		position: static !important;
	}
	div.TPLContent
	{
		margin-top: 20px !important;		/* TBD-Remove */
		margin-bottom: 20px !important;		/* TBD-Remove */
	}
	div.TPLFooter
	{
		margin-bottom: 20px !important;
		padding-left: 1.5em !important;		/* TBD-Remove */
		padding-right: 1.5em !important;	/* TBD-Remove */
	}
	div.TPLHeader,
	div.TPLContent,
	div.TPLFooter
	{
		margin-left: 10px !important;
		margin-right: 10px !important;
	}
	html.Normal div.SMExtension /* Indenting content in div.TPLContent */
	{
		margin: 1.5em 1.5em 1.5em 1.5em !important; /* TBD-Remove */
	}

	html.SMPagesCardLayout div.SMExtension
	{
		margin: 0px 0px 0px 0px !important;
	}
	html.SMPagesCardLayout div.TPLContent
	{
		margin-top: 0px !important;
		margin-bottom: 0px !important;
	}

	html:not(.SMPagesCardLayout) div.TPLContent, /* :not is likely to be supported on mobile */
	html:not(.SMPagesCardLayout) div.TPLFooter
	{
		/* TPLContent and TPLFooter may have been joined i Designer. In this case
		   border radius is removed from TPLContent bottom and from TPLFooter top.
		   However, in mobile view, TPLContent and TPLFooter is always separated,
		   so we remove rounded corners completely, to make sure TPLContent top
		   and TPLFooter bottom is not rounded, while TPLContent bottom and
		   TPLFooter top is not.
		   There is no need to do this for Cards Layout since cards and footer
		   is never joined. */
		border-radius: 0px !important;
	}

	/* Menu */

	div.TPLMenuMobile
	{
		display: block;
	}

	div.TPLMenuMobile select,
	div.TPLMenuMobile:before
	{
		/* Position select menu and icon (pseudo element)
		   on top of each other in upper right corner. */

		position: fixed;
		top: 5px;
		right: 5px;
		z-index: 999;

		display: block;
		width: 50px;
		height: 50px;
	}

	div.TPLMenuMobile select
	{
		/* Make select element invisible */

		-webkit-appearance: none;
		-moz-appearance: none;
		border: none;
		border-radius: 0px;
		background: transparent;
		font-size: 0px; /* Safari Mobile fix - prevent item title from being shown when selected - unfortunately breaks drop down in Firefox on Desktop */
	}
	div.TPLMenuMobile select option
	{
		font-size: 14px; /* Fix FireFox which does not show menu when font-size is set to 0px on select element (see above) */
	}
	div.TPLMenuMobile:before
	{
		/* Create menu icon shown on top of select element */

		/* Copied from FontAwesome .fa class */
		display: inline-block;
		font: normal normal normal 14px/1 FontAwesome;
		font-size: inherit;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		transform: translate(0, 0);

		content: "\f0c9";
		font-size: 20px;
		line-height: 50px;
		text-align: center;
		color: whitesmoke;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 8px;
	}

	div.TPLMenu
	{
		display: none;
	}

	/* Links */

	div.TPLLinks
	{
		display: none;
	}

	/* Content */

	html.SMPagesViewer.SMPagesClassicLayout div.TPLContent img[width][height][src^="files/images/"]
	{
		/* Optimize images in ordinary content pages (Classic Layout)
		   so they shrink properly on small screens. */

		max-width: 100% !important;
		width: auto !important;
		height: auto !important;
	}
	html.SMPagesViewer.SMPagesClassicLayout div.TPLContent img[width][height][src^="files/images/"][style*="float"]
	{
		/* Disable image floating on mobile - place image on separate line, centered */

		float: none !important;
		display: block !important;
		margin: 1em auto 1em auto !important;
	}

	div.SMPagesCard img[width][height][src^="files/images/"]:first-child,
	div.SMPagesCard img[width][height][data-mce-src^="files/images/"]:first-child
	{
		/* Optimize Cards containing "fullscreen" image (only element, edge-to-edge) */

		width: 100% !important;
		height: auto !important;
		margin: 0px !important;
	}

	div.SMPagesCard
	{
		/* Make cards consume full page width and set proper spacing */

		float: none;
		box-sizing: border-box !important;
		width: 100% !important;
		margin-left: 0px !important;
		margin-right: 0px !important;
	}

	html.SMPagesCustomFooter.SMPagesCardLayout div.TPLFooter
	{
		/* Prevent double spacing between last card and footer */

		margin-top: 0px !important;
	}

	/* Image montage. */
	/* Have each image appear on new line with full width and proper spacing. */

	div.SMImageMontageContainer > a
	{
		display: block !important;
		float: none !important;
		position: static !important;
		width: 100% !important;
		height: auto !important;
		margin: 15px 0px 15px 0px !important;
	}
	div.SMImageMontageContainer > a > img
	{
		position: static !important;
		width: 100% !important;
		height: auto !important;
	}

	div.SMImageMontageButton,
	div.SMImageMontageTitle,
	div.SMImageMontageDescription
	{
		display: none !important;
	}

	img.SMImageMontageFullScreenImage
	{
		position: static !important;
		width: auto !important;
		height: auto !important;
		max-height: 100% !important;
		max-width: 100% !important;
		display: block !important;
		margin: 0 auto !important;
		border: none !important;
		border-radius: 0px !important;
	}

	/* Page Extensions - Iframes / external modules - stretch to full width */

	div.TPLContent div.SMPagesExtension
	{
		display: block !important;
	}
	div.TPLContent div.SMExternalModulesContentPageExtension,
	div.TPLContent div.SMExternalModulesContentPageExtension iframe
	{
		width: 100% !important;
	}
}

@media print
{
	/* Hide menus when printing */
	div.TPLMenu, div.TPLMenuMobile
	{
		display: none;
	}

	/* Hide header image when printing */
	div.SMExtension.SMPages:before
	{
		display: none !important;
	}

	/* Remove background colors, background images, and shadows when printing */
	*
	{
		color: #333 !important;
		text-shadow: none !important;
		background: none !important;
	}

	/* Style links with underline when printing */
	div.TPLContent a,
	div.TPLFooter a
	{
		text-decoration: underline !important;
	}
}