/* FrmViewer transforms <p> to <div class="smPagesParagraph"> to allow use
   of content page extensions, which may contain block elements not allowed
   in ordinary paragraphs. Make div paragraphs look like normal paragraphs. */
div.smPagesParagraph
{
	margin-top: 1em;
	margin-bottom: 1em;
}

div.smPagesClear
{
	clear: both;
}

/* IE11 bug fix - min-height defaults to 100px, which should have been 0px */
html.SMPagesEditor body
{
	min-height: 0px;
}

/* Remove margin surrounding paragraphs in tables */
html.SMPagesEditor table p,	/* Paragraphs in tables in TinyMCE editor */
table div.smPagesParagraph	/* Paragraphs in tables in FrmViewer (<p> is transformed to <div class="smPagesParagraph">) */
{
	margin: 0px;
}

/* Style Page Extension place holder in TinyMCE - set centered background image */
html.SMPagesEditor img[src*="extensions/SMPages/editor/plugins/smextensions/img/placeholder.gif"]
{
	border: 1px dotted #3A3A3A;
	background: #D5D5D5 url("editor/plugins/smextensions/img/button.gif") no-repeat center;
	box-sizing: border-box;
	opacity: 0.7;
}

/* Cards support (optimized for page width of 800px) */

div.SMPagesCard
{
	float: left;

	margin: 20px;
	padding: 10px;

	width: 185px; /* Width of SMPagesCardSmall and SMPagesCardHidden */
}
div.SMPagesCardMedium
{
	width: 430px;
}
div.SMPagesCardLarge
{
	width: 675px;
}
html.SMPagesEditor div.SMPagesCardHidden
{
	opacity: 0.3;
}
html.SMPagesViewer div.SMPagesCardHidden
{
	visibility: hidden;
}
html.SMPagesEditor div.SMPagesCard
{
	outline: 1px dashed gray;
	*border: 1px dashed gray; /* IE7 alternative to outline which is not supported - expands width of cards by 2px! */
}

/* Card header and footer (tabs like) */

/* Using span which allows for background color to be changed using editor */
span.SMPagesCardHeader,
span.SMPagesCardFooter
{
	display: block;

	margin: -10px;
	margin-bottom: 10px;
	padding: 10px;

	font-size: 16px;
	font-weight: bold;

	background-color: #000000;
	color: #FFFFFF;
}
span.SMPagesCardFooter
{
	margin-bottom: -10px;
	margin-top: 10px;
}

/* Remove margin-top from footer if it comes after a header - this allows us to use the
   headers and a footer at the end to build a simple menu without spacing between elements. */
span.SMPagesCardHeader + span.SMPagesCardFooter
{
	margin-top: -10px;
}

/* Handle content in Cards */

/* Snap images to card edges (only images added using image picker in editor, not images or button icons from e.g. Page Extensions) */
div.SMPagesCard img[width][height][src^="files/images/"],			/* Does not work in TinyMCE on IE7/IE8 since full URLs are used internally in DOM - data-mce-src DOM attribute can be used instead */
div.SMPagesCard img[width][height][data-mce-src^="files/images/"]	/* IE7/IE8 fix - this attribute contains the relative image path in TinyMCE on IE7/IE8 */
{
	margin: -10px;			/* Overflow padding in card (edge to edge) */
	display: block;			/* Remove spacing below image */
}

/* Make page extension place holder image stretch to fill cards in editor */
div.SMPagesCard img[src*="extensions/SMPages/editor/plugins/smextensions/img/placeholder.gif"] /* Using *= since domain is included when added, and stripped off when saved */
{
	width: 100% !important;	/* using !important to overrule width specified in inline style attribute */
}