/**
 * ---------------
 * CSS To make webpage styles look more like their ckEditor editor counterpart.
 * ---------------
 */

html[data-page-type="webpage"] #content, .blog-post-content {
	/* Emoji fonts are added to visualise them nicely in Internet Explorer. */
	font-family: sans-serif, Arial, Verdana, "Trebuchet MS", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 14px; color: #333;

	blockquote { font-style: italic; font-family: Georgia, Times, "Times New Roman", serif; padding: 2px 0; border-style: solid; border-color: #ccc; border-width: 0; }
	
	ol,ul,dl
	{
		/* IE7: reset rtl list margin. (#7334) */
		*margin-right: 0px;
		/* Preserved spaces for list items with text direction different than the list. (#6249,#8049)*/
		padding: 0 40px;
	}

	h1,h2,h3,h4,h5,h6 {	font-weight: normal; line-height: 1.2; font-family: inherit; }
	hr { border: 0px; border-top: 1px solid #ccc; }
	img.right { border: 1px solid #ccc; float: right; margin-left: 15px; padding: 5px; }
	img.left { border: 1px solid #ccc; float: left; margin-right: 15px; padding: 5px; }
	pre {
		white-space: pre-wrap; /* CSS 2.1 */
		word-wrap: break-word; /* IE7 */
		-moz-tab-size: 4;
		tab-size: 4;
	}

	.marker { background-color: Yellow; }
	span[lang] { font-style: italic; }
	figure:has(img) { text-align: center; outline: solid 1px #ccc; background: rgba(0,0,0,0.05); padding: 10px; margin: 10px 20px; display: inline-block; }
	figure:has(img) > figcaption { text-align: center; display: block; /* For IE8 */ }
	figure table { border-bottom: 1px solid #c0c0c0; }
	a > img { padding: 1px; margin: 1px; border: none; outline: 1px solid #0782C1; }
	.code-featured { border: 5px solid red; }
	.math-featured { padding: 20px; box-shadow: 0 0 2px rgba(200, 0, 0, 1); background-color: rgba(255, 0, 0, 0.05); margin: 10px; }
	.image-clean { border: 0; background: none; padding: 0; }
	.image-clean > figcaption { font-size: .9em; text-align: right; }
	.image-grayscale { background-color: white; color: #666; }
	.image-grayscale img, img.image-grayscale { filter: grayscale(100%); }
	.embed-240p { max-width: 426px; max-height: 240px; margin:0 auto; }
	.embed-360p { max-width: 640px; max-height: 360px; margin:0 auto; }
	.embed-480p { max-width: 854px; max-height: 480px; margin:0 auto; }
	.embed-720p { max-width: 1280px; max-height: 720px; margin:0 auto; }
	.embed-1080p { max-width: 1920px; max-height: 1080px; margin:0 auto; }
	
	p { font-size: initial; margin-block-start: 1em; margin-block-end: 1em; }
	h1, h2, h3, h4 { font-size: initial; margin-block-start: 1em; margin-block-end: 1em; }
	li { list-style: disc; padding: initial; margin: initial; }
	ul { padding: initial; margin: initial; margin-block-start: 1em; margin-block-end: 1em; }	
	ol, ul, dl { padding: 0 40px; }
	a { text-decoration: underline; }

	h1 { font-size: 2em; margin-block-start: 0.67em; margin-block-end: 0.67em; }
	h2 { font-size: 1.5em; margin-block-start: 0.83em; margin-block-end: 0.83em; }
	h3 { font-size: 1em ;margin-block-start: 1em;margin-block-end: 1em;}
}


html[data-page-type="blogs"] #content .blog-post-content {
	font-size: 14px;
	
	p { font-size: 1em; margin: 0;  margin-block-start: 0; margin-block-end: 0; }
	h1 { font-size: 1em; margin-block-start: 0.67em; margin-block-end: 0.67em; }
	h2 { font-size: 1em; margin-block-start: 0.83em; margin-block-end: 0.83em; }
	h3 { font-size: 1em ;margin-block-start: 1em;margin-block-end: 1em;}
	h3 { margin: 0; }

	*[style*="text-align:center;"] { text-align:center!important; }
	table p { margin: 0; font-size: inherit; }
	table tr, table td { min-width: 2em; padding: .4em; }

	& > img {
		float: none!important;
	}
}


html[data-page-type="product"] #content span[itemprop="description"] {
	p { font-size: initial; margin-block-start: 1em; margin-block-end: 1em; }
	li { list-style: disc; padding: initial; margin: initial; }
	ul { padding: initial; margin: initial; margin-block-start: 1em; margin-block-end: 1em; }	
	ol, ul, dl { padding: 0 40px; }
}