<div class="to_demo_wrap">
	<a href="" class="to_demo_pin iconadmin-pin" title="<?php esc_attr_e('Pin/Unpin demo-block by the right side of the window', 'writer-ancora'); ?>"></a>
	<div class="to_demo_body_wrap">
		<div class="to_demo_body">
			<h1 class="to_demo_header"><?php esc_html_e('Header with','writer-ancora');?> <span class="to_demo_header_link"><?php esc_html_e('inner link','writer-ancora');?></span> <?php esc_html_e('and it','writer-ancora');?> <span class="to_demo_header_hover"><?php esc_html_e('hovered state','writer-ancora');?></span></h1>
			<p class="to_demo_info"><?php esc_html_e('Posted','writer-ancora');?> <span class="to_demo_info_link"><?php esc_html_e('12 May, 2015','writer-ancora');?></span> <?php esc_html_e('by','writer-ancora');?> <span class="to_demo_info_hover"><?php esc_html_e('Author name hovered','writer-ancora');?></span>.</p>
			<p class="to_demo_text"><?php esc_html_e('This is default post content. Colors of each text element are set based on the color you choose below.','writer-ancora');?></p>
			<p class="to_demo_text"><span class="to_demo_text_link"><?php esc_html_e('link example','writer-ancora');?></span> <?php esc_html_e('and','writer-ancora');?> <span class="to_demo_text_hover"><?php esc_html_e('hovered link','writer-ancora');?></span></p>

			<?php 
			$colors = writer_ancora_storage_get('custom_colors');
			if (is_array($colors) && count($colors) > 0) {
				foreach ($colors as $slug=>$scheme) { 
					?>
					<h3 class="to_demo_header"><?php esc_html_e('Accent colors','writer-ancora');?></h3>
					<?php if (isset($scheme['accent1'])) { ?>
						<div class="to_demo_columns3"><p class="to_demo_text"><span class="to_demo_accent1"><?php esc_html_e('accent1 example','writer-ancora');?></span> <?php esc_html_e('and','writer-ancora');?> <span class="to_demo_accent1_hover"><?php esc_html_e('hovered accent1','writer-ancora');?></span></p></div>
					<?php } ?>
					<?php if (isset($scheme['accent2'])) { ?>
						<div class="to_demo_columns3"><p class="to_demo_text"><span class="to_demo_accent2"><?php esc_html_e('accent2 example','writer-ancora');?></span> <?php esc_html_e('and','writer-ancora');?> <span class="to_demo_accent2_hover"><?php esc_html_e('hovered accent2','writer-ancora');?></span></p></div>
					<?php } ?>
					<?php if (isset($scheme['accent3'])) { ?>
						<div class="to_demo_columns3"><p class="to_demo_text"><span class="to_demo_accent3"><?php esc_html_e('accent3 example','writer-ancora');?></span> <?php esc_html_e('and','writer-ancora');?> <span class="to_demo_accent3_hover"><?php esc_html_e('hovered accent3','writer-ancora');?></span></p></div>
					<?php } ?>
		
					<h3 class="to_demo_header"><?php esc_html_e('Inverse colors (on accented backgrounds)','writer-ancora');?></h3>
					<?php if (isset($scheme['accent1'])) { ?>
						<div class="to_demo_columns3 to_demo_accent1_bg to_demo_inverse_block">
							<h4 class="to_demo_accent1_hover_bg to_demo_inverse_dark"><?php esc_html_e('Accented block header','writer-ancora');?></h4>
							<div>
								<p class="to_demo_inverse_light"><?php esc_html_e('Posted','writer-ancora');?> <span class="to_demo_inverse_link"><?php esc_html_e('12 May, 2015','writer-ancora');?></span> <?php esc_html_e('by','writer-ancora');?> <span class="to_demo_inverse_hover"><?php esc_html_e('Author name hovered','writer-ancora');?></span>.</p>
								<p class="to_demo_inverse_text"><?php esc_html_e('This is a inversed colors example for the normal text','writer-ancora');?></p>
								<p class="to_demo_inverse_text"><span class="to_demo_inverse_link"><?php esc_html_e('link example','writer-ancora');?></span> <?php esc_html_e('and','writer-ancora');?> <span class="to_demo_inverse_hover"><?php esc_html_e('hovered link','writer-ancora');?></span></p>
							</div>
						</div>
					<?php } ?>
					<?php if (isset($scheme['accent2'])) { ?>
						<div class="to_demo_columns3 to_demo_accent2_bg to_demo_inverse_block">
							<h4 class="to_demo_accent2_hover_bg to_demo_inverse_dark"><?php esc_html_e('Accented block header','writer-ancora');?></h4>
							<div>
								<p class="to_demo_inverse_light"><?php esc_html_e('Posted','writer-ancora');?> <span class="to_demo_inverse_link"><?php esc_html_e('12 May, 2015','writer-ancora');?></span> <?php esc_html_e('by','writer-ancora');?> <span class="to_demo_inverse_hover"><?php esc_html_e('Author name hovered','writer-ancora');?></span>.</p>
								<p class="to_demo_inverse_text"><?php esc_html_e('This is a inversed colors example for the normal text','writer-ancora');?></p>
								<p class="to_demo_inverse_text"><span class="to_demo_inverse_link"><?php esc_html_e('link example','writer-ancora');?></span> <?php esc_html_e('and','writer-ancora');?> <span class="to_demo_inverse_hover"><?php esc_html_e('hovered link','writer-ancora');?></span></p>
							</div>
						</div>
					<?php } ?>
					<?php if (isset($scheme['accent3'])) { ?>
						<div class="to_demo_columns3 to_demo_accent3_bg to_demo_inverse_block">
							<h4 class="to_demo_accent3_hover_bg to_demo_inverse_dark"><?php esc_html_e('Accented block header','writer-ancora');?></h4>
							<div>
								<p class="to_demo_inverse_light"><?php esc_html_e('Posted','writer-ancora');?> <span class="to_demo_inverse_link"><?php esc_html_e('12 May, 2015','writer-ancora');?></span> <?php esc_html_e('by','writer-ancora');?> <span class="to_demo_inverse_hover"><?php esc_html_e('Author name hovered','writer-ancora');?></span>.</p>
								<p class="to_demo_inverse_text"><?php esc_html_e('This is a inversed colors example for the normal text','writer-ancora');?></p>
								<p class="to_demo_inverse_text"><span class="to_demo_inverse_link"><?php esc_html_e('link example','writer-ancora');?></span> <?php esc_html_e('and','writer-ancora');?> <span class="to_demo_inverse_hover"><?php esc_html_e('hovered link','writer-ancora');?></span></p>
							</div>
						</div>
					<?php } ?>
					<?php 
					break;
				}
			}
			?>
	
			<h3 class="to_demo_header"><?php esc_html_e('Alternative colors used to decorate highlight blocks and form fields','writer-ancora');?></h3>
			<div class="to_demo_columns2">
				<div class="to_demo_alter_block">
					<h4 class="to_demo_alter_header"><?php esc_html_e('Highlight block header','writer-ancora');?></h4>
					<p class="to_demo_alter_text"><?php esc_html_e('This is a plain text in the highlight block. This is a plain text in the highlight block.','writer-ancora');?></p>
					<p class="to_demo_alter_text"><span class="to_demo_alter_link"><?php esc_html_e('link example','writer-ancora');?></span> <?php esc_html_e('and','writer-ancora');?> <span class="to_demo_alter_hover"><?php esc_html_e('hovered link','writer-ancora');?></span></p>
				</div>
			</div>
			<div class="to_demo_columns2">
				<div class="to_demo_form_fields">
					<h4 class="to_demo_header"><?php esc_html_e('Form field','writer-ancora');?></h4>
				<input type="text" class="to_demo_field" value="<?php esc_attr_e('Input field example','writer-ancora');?>">
				<h4 class="to_demo_header"><?php esc_html_e('Form field focused','writer-ancora');?></h4>
				<input type="text" class="to_demo_field_focused" value="<?php esc_attr_e('Focused field example','writer-ancora');?>">
			</div>
		</div>
	</div>
	</div>
</div>
