@charset "UTF-8";

/* Element Reset */
body, table, input, textarea, select, button {
	font-family: sans-serif;
	font-size: 12px;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
	display: block;
}
body {
	position: relative;
}
a img {
	border: 0;
}
[hidden] {
	display: none;
}

/* Content Default Styles */
.xe_content, .rhymix_content {
	font-family: $default_font_family;
	font-size: $default_font_size;
	line-height: $default_line_height;
	@if $default_word_break == 'none' {
		white-space: nowrap;
	} @else {
		word-break: $default_word_break;
		word-wrap: break-word;
	}
	p {
		margin: 0 0 $default_paragraph_spacing 0;
		line-height: $default_line_height;
		span {
			line-height: $default_line_height;
		}
	}
	img, video {
		max-width: 100%;
		height: auto;
	}
	table {
		font: inherit;
	}
	blockquote {
		padding: 2px 0;
		border-style: solid;
		border-color: #ccc;
		border-width: 0;
		border-left-width: 5px;
		padding-left: 20px;
		padding-right: 8px;
		&:lang(ar), &:lang(arc), &:lang(dv), &:lang(ha), &:lang(he), &:lang(khw), &:lang(ks), &:lang(ku), &:lang(ps), &:lang(fa), &:lang(ur), &:lang(yi) {
			border-left-width: 0px;
			border-right-width: 5px;
			padding-left: 8px;
			padding-right: 20px;
		}
	}

	/* lists */
	ul {
		list-style-type: disc;
	}
	ol {
		list-style-type: decimal;
	}
	ul, ol {
		display: block;
		margin-left: 1em;
		margin-right: 0;
		padding-left: 25px;
		padding-right: 0;
		&:lang(ar), &:lang(arc), &:lang(dv), &:lang(ha), &:lang(he), &:lang(khw), &:lang(ks), &:lang(ku), &:lang(ps), &:lang(fa), &:lang(ur), &:lang(yi) {
			padding-left: 0px;
			padding-right: 25px;
			margin-left: 0;
			margin-right: 1em;
		}
	}
	li {
		display: list-item;
	}
}
@media screen {
	img, video {
		max-width: none;
	}
}

/* Clearfix */
.xe-clearfix {
	&:before, &:after {
		content: " ";
		display: table;
	}
	&:after {
		clear: both;
	}
}
.xe-widget-wrapper {
	overflow: hidden;
}

/* Popup Menu Area */
#rhymix_popup_menu, #popup_menu_area {
	position: absolute;
	z-index: 9999;
	margin: 10px 0;
	padding: 0;
	border: 1px solid #eeeeee;
	border-radius: 2px;
	font-size: 12px;
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	background: #fff;
	min-width:80px;
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	li {
		margin: 0;
		padding: 0;
		line-height: 1.5;
	}
	a {
		display: block;
		padding: 5px;
		text-decoration: none;
		color: #212121;
		&:hover, &:active, &:focus {
			background: #eeeeee;
			outline: none;
		}
	}
}
@media screen and (max-width: 400px) {
	#rhymix_popup_menu, #popup_menu_area {
		min-width:120px;
		max-width:95%;
		font-size: 13px;
		a {
			display: block;
			padding: 10px;
			text-decoration: none;
			color: #212121;
		}
	}
}

/* Editable Preview */
.editable_preview {
	width: 100%;
	min-height: 240px;
	max-height: 440px;
	box-sizing: border-box;
	margin: 0;
	padding: 6px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	overflow-y: auto;
	cursor: text;
	p {
		margin-bottom: $default_paragraph_spacing !important;
	}
}
.editable_preview_iframe {
	width: 100%;
	height: 440px;
	box-sizing: border-box;
	margin: 0 0 -4px 0;
	padding: 0;
	border: 0;
}

/* alert */
#rhymix_alert {
	display: none;
	position: fixed;
	left: 50%;
	bottom: 20%;
	min-width: 250px;
	max-width: 500px;
	background-color: #000;
	color: #fff;
	font-size: 16px;
	text-align: center;
	opacity: 0.6;
	padding: 12px 20px;
	border: 1px solid #fff;
	border-radius: 10px;
	transform: translateX(-50%);
	z-index: 999999999;
}

/* Debug */
#rhymix_debug_button {
	display: none;
	position: fixed;
	left: 0; bottom: 40px;
	background: #eeeeee;
	background: linear-gradient(to bottom, #f4f4f4 0%, #eaeaea 100%);
	border: 1px solid #ccc; border-left: 0;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.18), 0 0 6px 0 rgba(0, 0, 0, 0.12);
	z-index: 1073741824;
	&.visible {
		display: block;
		@media print {
			display: none;
		}
	}
	&:hover {
		background: #dddddd;
		background: linear-gradient(to bottom, #e8e8e8 0%, #d9d9d9 100%);
	}
	a {
		display: block;
		font: bold 12px/14px Arial, sans-serif;
		color: #444;
		text-decoration: none;
		padding: 4px 8px;
		&.has_errors {
			color: #f44336;
		}
	}
}
#rhymix_debug_panel {
	display: none;
	position: fixed;
	left: 0; top: 0;
	max-width: 100%;
	height: 100%;
	overflow-y: scroll;
	background: #fcfcfc;
	box-sizing: border-box;
	border-right: 1px solid #ccc;
	box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.18), 0 0 8px 0 rgba(0, 0, 0, 0.12);
	z-index: 1073741824;
	.debug_header {
		clear: both;
		width: 100%;
		height: 36px;
		background: #444444;
		background: linear-gradient(to right, #222222 0%, #444444 40%, #eeeeee 100%);
		position: relative;
		h2 {
			font: bold 16px/20px Arial, sans-serif;
			color: #fcfcfc;
			position: absolute;
			left: 10px; top: 10px;
			margin: 0; padding: 0;
		}
		.debug_maximize {
			font: normal 20px/24px Arial, sans-serif;
			text-decoration: none;
			color: #444444;
			position: absolute;
			right: 32px; top: 6px;
		}
		.debug_close {
			font: normal 28px/28px Arial, sans-serif;
			text-decoration: none;
			color: #444444;
			position: absolute;
			right: 10px; top: 4px;
			&:hover {
				color: #f44336;
			}
		}
	}
	.debug_page {
		clear: both;
		margin: 12px 10px;
		font: normal 12px/16px Arial, NanumBarunGothic, NanumGothic, "Malgun Gothic", sans-serif;
		.debug_page_header {
			padding-bottom: 8px;
			border-bottom: 1px solid #ddd;
			position: relative;
			cursor: pointer;
			h3 {
				color: #444;
				font: inherit;
				font-size: 14px;
				font-weight: bold;
				margin: 0;
				padding: 0;
			}
		}
		.debug_page_collapse {
			display: block;
			position: absolute;
			right: 0; top: 0;
			color: #999;
			font-size: 10px;
			line-height: 12px;
			text-decoration: none;
			padding: 2px 2px;
		}
		.debug_page_body {
			margin: 8px 4px 8px 10px;
			h4 {
				color: #444;
				font: inherit;
				font-size: 13px;
				font-weight: bold;
				margin: 0 0 8px 0;
				padding: 0;
			}
		}
		.debug_entry {
			font-family: Consolas, "Courier New", monospace;
			color: #444;
			margin-left: 38px;
			margin-bottom: 8px;
			text-indent: -28px;
			word-wrap: break-word;
			word-break: break-all;
			&.pre_wrap {
				white-space: pre-wrap;
			}
			ul.debug_metadata {
				margin: 0 0 0 -16px; padding: 0;
				li {
					list-style: disc;
					margin: 0; padding: 0; text-indent: 0;
				}
			}
			ul.debug_backtrace {
				margin: 4px 0 0 16px; padding: 0;
				li {
					list-style: disc;
					margin: 0; padding: 0; text-indent: 0;
					color: #888;
					ul {
						padding-left: 20px;
						li {
							list-style: circle;
						}
					}
				}
			}
		}
	}
}

/* Button (for XE compatibility) */
@mixin btnArea {
	clear: both;
	margin: 10px 0;
	padding: 0;
	text-align: right;
	&:after {
		clear: both;
		display: block;
		content: "";
	}
}
@mixin btn {
	display: inline-block;
	margin: 0;
	padding: 0 12px !important;
	height: 24px !important;
	overflow: visible;
	border: 1px solid #bbbbbb;
	border-color: #e6e6e6 #e6e6e6 #bfbfbf;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	border-bottom-color: #a2a2a2;
	border-radius: 2px;
	text-decoration: none !important;
	text-align: center;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
	vertical-align: top;
	line-height: 24px !important;
	font-family: inherit;
	font-size: 12px;
	color: #333333;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
	background-color: #f5f5f5;
	background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
	background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
	background-image: -webkit-gradient(top, #ffffff, #e6e6e6);
	background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
	background-image: linear-gradient(top, #ffffff, #e6e6e6);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
	&:hover, &:active, &[disabled] {
		color: #333;
		background-color: #e6e6e6;
	}
	>a, >button, >input, >span {
		display: inline-block;
		margin: 0 -12px !important;
		padding: 0 12px !important;
		overflow: visible;
		width: auto;
		height: 24px;
		border: 0;
		vertical-align: top;
		text-decoration: none !important;
		line-height: 24px;
		font-family: inherit;
		font-size: 12px;
		color: #333;
		cursor: pointer;
		background: none;
	}
	input&, button& {
		height: 26px !important;
	}
}
@mixin btnGroup {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	vertical-align: middle;
	font-size: 0;
	&+.btn-group {
		margin-left: 5px;
	}
	>.btn {
		position: relative;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		&+.btn {
			margin-left: -1px;
		}
		&:first-child {
			margin-left: 0;
			-webkit-border-bottom-left-radius: 4px;
			-moz-border-radius-bottomleft: 4px;
			border-bottom-left-radius: 4px;
			-webkit-border-top-left-radius: 4px;
			-moz-border-radius-topleft: 4px;
			border-top-left-radius: 4px;
		}
		&:last-child {
			-webkit-border-top-right-radius: 4px;
			-moz-border-radius-topright: 4px;
			border-top-right-radius: 4px;
			-webkit-border-bottom-right-radius: 4px;
			-moz-border-radius-bottomright: 4px;
			border-bottom-right-radius: 4px;
		}
		&:hover, &:focus, &:active, &.active {
			z-index: 2;
		}
	}
}
.btnArea {
	@if $enable_xe_btn_styles {
		@include btnArea;
	}
}
.btn {
	@if $enable_xe_btn_styles {
		@include btn;
	}
}
.btn-group {
	@if $enable_xe_btn_styles {
		@include btnGroup;
	}
}
.rhymix_button_wrapper {
	@include btnArea;
}
.rhymix_button {
	@include btn;
}

/* Message (for XE compatibility) */
@mixin messageBox {
	position: relative;
	margin: 1em 0;
	padding: 0 1em;
	border: 1px solid #ddd;
	border-radius: 4px;
	line-height: 1.4;
	font-size: 13px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	background-color: #f8f8f8;
	p {
		margin: 1em 0 !important;
	}
	&.info {
		border-color: #BCE8F1;
		color: #3A87AD;
		background-color: #D9EDF7;
	}
	&.error {
		border-color: #EED3D7;
		color: #B94A48;
		background-color: #F2DEDE;
	}
	&.update {
		border-color: #D6E9C6;
		color: #468847;
		background-color: #DFF0D8;
	}
	body > & {
		margin: 1em;
	}
}
.message {
	@if $enable_xe_msg_styles {
		@include messageBox;
	}
}
.rhymix_message {
	@include messageBox;
}