<div class="onlyinpro_empty" style="display:none;"><p style="margin:0px 0px 0px 0px;font-weight:normal;">Pro options are hidden. Click the button <span style="font-weight:bold;color:#00cd00;">"Show/hide Pro options"</span> to see them.</p></div>
<h3 class="onlyinpro"><?php echo CMA_Settings::__('Custom CSS'); ?></h3>
<?php echo CMA_SettingsView::renderOnlyin('Pro'); ?>
<div class="onlyinpro"><p><?php echo CMA_Settings::__('Place your styles here to override any CSS rule of the plugin.'); ?></p>
<textarea name="custom_css" class="cma-custom-css" placeholder="<?php _e('Custom CSS', 'cm-answers-pro'); ?>" disabled><?php echo esc_html($customCSS); ?></textarea>
<h3 style="opacity: 0.7"><?php echo CMA_Settings::__('Typical style modifications'); ?></h3>
<p><?php echo CMA_Settings::__('Click on the red value to change it. Press "Add" button to add custom CSS to the textarea.'); ?></p>
<div id="custom-css-editor">
	<h4><?php echo CMA_Settings::__('Change background for wrapper'); ?></h4>
	<pre><code>.cma-main {background: <span>#999999</span> !important;}</code></pre>
	<h4><?php echo CMA_Settings::__('Change background for content'); ?></h4>
	<pre><code>.cma-main #content {background: <span>#cccccc</span> !important;}</code></pre>
	<h4><?php echo CMA_Settings::__('Change header\'s title'); ?></h4>
	<pre><code>.cma-main .entry-title {font-size: <span>12px</span> !important;}</code></pre>
	<h4><?php echo CMA_Settings::__('Right side widget font size and color'); ?></h4>
	<pre><code>.cma-thread-title a {font-size: <span>14px</span>; color: <span>#00b7f3</span>;}</code></pre>
	<h4><?php echo CMA_Settings::__('Question font size in question page'); ?></h4>
	<pre><code>.cma-question-body p {font-size: <span>16px</span>;}</code></pre>
	<h4><?php echo CMA_Settings::__('Size of Answers in question page'); ?></h4>
	<pre><code>.cma-answer-body p {font-size: <span>16px</span>;}</code></pre>
	<h4><?php echo CMA_Settings::__('Best Answer font size'); ?></h4>
	<pre><code>.cma-best-answer-icon .text {font-size: <span>16px</span>;}</code></pre>
	<h4><?php echo CMA_Settings::__('Best Answer icon size'); ?></h4>
	<pre><code>.cma-best-answer-icon .icon {font-size: <span>16px</span>;}</code></pre>
	<h4><?php echo CMA_Settings::__('Questions font size (on questions table)'); ?></h4>
	<pre><code>.cma-thread-list .cma-thread-title {font-size: <span>14px</span>;}</code></pre>
	<h4><?php echo CMA_Settings::__('Question title font size (in thread page)'); ?></h4>
	<pre><code>.cma-wrapper .entry-title {font-size: <span>18px</span> !important;}</code></pre>
	<h4><?php echo CMA_Settings::__('Answers font size (in thread page)'); ?></h4>
	<pre><code>.cma-answer-body {font-size: <span>14px</span>;}</code></pre>
	<h4><?php echo CMA_Settings::__('Comments font size'); ?></h4>
	<pre><code>.cma-comment-content {font-size: <span>14px</span>;}</code></pre>
	<h4><?php echo CMA_Settings::__('Comments font size'); ?></h4>
	<pre><code>.cma-comment-content {font-size: <span>14px</span>;}</code></pre>
	<h4><?php echo CMA_Settings::__('Hide RESOLVED status'); ?></h4>
	<pre><code>.cma-thread-list.display-resolved-prefix .cma-thread-title .resolved, .cma-thread-resolved-flag {display: <span>none</span> !important;}</code></pre>
</div>
<script type="text/javascript">
jQuery(function($) {
	$('#custom-css-editor code').append('<a href="" class="btn disabled">'+ <?php echo json_encode(CMA_Settings::__('Add')); ?> +'</a>');
	$('#custom-css-editor code span').attr('title', <?php echo json_encode(CMA_Settings::__('Edit')); ?>).click(function() {
		var obj = $(this);
		if (obj.find('input').length) return;
		var value = obj.text();
		var input = document.createElement('input');
		input.setAttribute('value', value);
		input.style.width = value.length +"em";
		obj.html(input);
		input.select();
		$(input).blur(function() {
			obj.text($(this).val().length > 0 ? $(this).val() : value);
		});
		
	});
});
</script>
<style type="text/css">
#custom-css-editor code {padding: 10px; display: block; width: 100%; background: #f0f0f0;}
#custom-css-editor a {float: right; margin-top: -3px; border: outset 1px #cccccc; text-decoration: none; padding: 3px 7px;}
#custom-css-editor span {color: red; cursor: pointer;}
#custom-css-editor .btn {margin-top:-5px; background:#fff; color:#000;}
#custom-css-editor .btn.disabled {pointer-events: none; background:#ccc; color:#636363;}
#tab_custom_css .onlyinpro,#tab_custom_css .onlyinpro a {color: #000 !important;}
#tab_custom_css p, #custom-css-editor{opacity: 0.7}
</style>
</div>