<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head><!-- If you delete this tag, the sky will fall on your head --><meta name="viewport" content="width=device-width" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Creator</title>
	<style type="text/css">/* ------------------------------------- 
		GLOBAL 
------------------------------------- */
* { 
	margin:0;
	padding:0;
}
* { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }

img { 
	max-width: 100%; 
}
.collapse {
	margin:0;
	padding:0;
}
body {
	-webkit-font-smoothing:antialiased; 
	-webkit-text-size-adjust:none; 
	width: 100%!important; 
	height: 100%;
}


/* ------------------------------------- 
		ELEMENTS 
------------------------------------- */
a { color: #2BA6CB;}

code {
	font-family: Courier, 'New Courier', monospace;
}

.btn {
	text-decoration:none;
	color: #FFF;
	background-color: #666;
	padding:10px 16px;
	font-weight:bold;
	margin-right:10px;
	text-align:center;
	cursor:pointer;
	display: inline-block;
}

p.callout {
	padding:15px;
	background-color:#ECF8FF;
	margin-bottom: 15px;
}
.callout a {
	font-weight:bold;
	color: #2BA6CB;
}

table.social {
/* 	padding:15px; */
	background-color: #ebebeb;
	
}
.social .soc-btn {
	padding: 3px 7px;
	font-size:12px;
	margin-bottom:10px;
	text-decoration:none;
	color: #FFF;font-weight:bold;
	display:block;
	text-align:center;
}
a.fb { background-color: #3B5998!important; }
a.tw { background-color: #1daced!important; }
a.gp { background-color: #DB4A39!important; }
a.ms { background-color: #000!important; }

.sidebar .soc-btn { 
	display:block;
	width:100%;
}

/* ------------------------------------- 
		HEADER 
------------------------------------- */
table.head-wrap { width: 100%;}

.header.container table td.logo { padding: 15px; }
.header.container table td.label { padding: 15px; padding-left:0px;}


/* ------------------------------------- 
		BODY 
------------------------------------- */
table.body-wrap { width: 100%;}


/* ------------------------------------- 
		FOOTER 
------------------------------------- */
table.footer-wrap { width: 100%;	clear:both!important;
}
.footer-wrap .container td.content  p { border-top: 1px solid rgb(215,215,215); padding-top:15px;}
.footer-wrap .container td.content p {
	font-size:10px;
	font-weight: bold;
	
}


/* ------------------------------------- 
		TYPOGRAPHY 
------------------------------------- */
h1,h2,h3,h4,h5,h6 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.1; margin-bottom:15px; color:#000;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; }

h1 { font-weight:200; font-size: 44px;}
h2 { font-weight:200; font-size: 37px;}
h3 { font-weight:500; font-size: 27px;}
h4 { font-weight:500; font-size: 23px;}
h5 { font-weight:900; font-size: 17px;}
h6 { font-weight:900; font-size: 14px; text-transform: uppercase; color:#444;}

.collapse { margin:0!important;}

p, ul { 
	margin-bottom: 10px; 
	font-weight: normal; 
	font-size:14px; 
	line-height:1.6;
}
p.lead { font-size:17px; }
p.last { margin-bottom:0px;}

ul li {
	margin-left:5px;
	list-style-position: inside;
}

/* ------------------------------------- 
		SIDEBAR 
------------------------------------- */
ul.sidebar {
	background:#ebebeb;
	display:block;
	list-style-type: none;
}
ul.sidebar li { display: block; margin:0;}
ul.sidebar li a {
	text-decoration:none;
	color: #666;
	padding:10px 16px;
/* 	font-weight:bold; */
	margin-right:10px;
/* 	text-align:center; */
	cursor:pointer;
	border-bottom: 1px solid #777777;
	border-top: 1px solid #FFFFFF;
	display:block;
	margin:0;
}
ul.sidebar li a.last { border-bottom-width:0px;}
ul.sidebar li a h1,ul.sidebar li a h2,ul.sidebar li a h3,ul.sidebar li a h4,ul.sidebar li a h5,ul.sidebar li a h6,ul.sidebar li a p { margin-bottom:0!important;}



/* --------------------------------------------------- 
		RESPONSIVENESS
		Nuke it from orbit. It's the only way to be sure. 
------------------------------------------------------ */

/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
	display:block!important;
	max-width:600px!important;
	margin:0 auto!important; /* makes it centered */
	clear:both!important;
}

/* This should also be a block element, so that it will fill 100% of the .container */
.content {
	padding:15px;
	max-width:600px;
	margin:0 auto;
	display:block; 
}

/* Let's make sure tables in the content area are 100% wide */
.content table { width: 100%; }


/* Odds and ends */
.column {
	width: 300px;
	float:left;
}
.column tr td { padding: 15px; }
.column-wrap { 
	padding:0!important; 
	margin:0 auto; 
	max-width:600px!important;
}
.column table { width:100%;}
.social .column {
	width: 280px;
	min-width: 279px;
	float:left;
}

/* Be sure to place a .clear element after each set of columns, just to be safe */
.clear { display: block; clear: both; }


/* ------------------------------------------- 
		PHONE
		For clients that support media queries.
		Nothing fancy. 
-------------------------------------------- */
@media only screen and (max-width: 600px) {
	
	a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important;}

	div[class="column"] { width: auto!important; float:none!important;}
	
	table.social div[class="column"] {
		width:auto!important;
	}

}
	</style>
</head>
<body bgcolor="#FFFFFF" style="cursor: auto;"><!-- HEADER -->
<table bgcolor="#999999" class="head-wrap">
	<tbody>
		<tr>
			<td>&nbsp;</td>
			<td class="header container">
			<div class="content">
			<table bgcolor="#999999">
				<tbody>
					<tr>
						<td><img alt="" src="https://placehold.it/200x50/" /></td>
						<td align="right">
						<h6 class="collapse">CATCHY SLOGAN HERE</h6>
						</td>
					</tr>
				</tbody>
			</table>
			</div>
			</td>
			<td>&nbsp;</td>
		</tr>
	</tbody>
</table>
<!-- /HEADER --><!-- BODY -->

<table class="body-wrap">
	<tbody>
		<tr>
			<td>&nbsp;</td>
			<td bgcolor="#FFFFFF" class="container">
			<div class="content">
			<table>
				<tbody>
					<tr>
						<td>
						<h3>[newsletters_subject]</h3>

						<p class="lead">Put an introduction or summary of your newsletter here. Entice your readers to continue reading the rest of the newsletter.</p>
						<!-- A Real Hero (and a real human being) -->

						<p><img alt="" src="https://placehold.it/600x300" /></p>
						<!-- /hero --><!-- Callout Panel -->

						<p class="callout">A call to action or business highlight goes here for your readers to click on. Link to a product,&nbsp;new service or limited offer you have right now. <a href="#">Do it Now! »</a></p>
						<!-- /Callout Panel -->

						<div>[newsletters_main_content]</div>
						
						<p>The shortcode above is replaced with the content that you type into the editor. Use headings, paragraphs and other formatting in your newsletters to make them beautiful. Below is an example of how you can create beautiful newsletters. Use class <code>.btn</code> on any link to style it as a button.</p>

						<h3>Title Ipsum <small>This is a note.</small></h3>

						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						<a class="btn">Click Me!</a><br />
						<br />
						<!-- social & contact -->
						<table class="social" width="100%">
							<tbody>
								<tr>
									<td><!--- column 1 -->
									<table align="left" class="column">
										<tbody>
											<tr>
												<td>
												<h5>Connect with Us:</h5>

												<p><a class="soc-btn fb" href="#">Facebook</a> <a class="soc-btn tw" href="#">Twitter</a> <a class="soc-btn gp" href="#">Google+</a></p>
												</td>
											</tr>
										</tbody>
									</table>
									<!-- /column 1 --></td>
									<td><!--- column 2 -->
									<table align="left" class="column">
										<tbody>
											<tr>
												<td>
												<h5>Contact Info:</h5>

												<p>Phone: <strong>123.456.0600</strong><br />
												Email: <strong><a href="emailto:email@example.com">email@example.com</a></strong></p>
												</td>
											</tr>
										</tbody>
									</table>
									<!-- /column 2 --></td>
								</tr>
							</tbody>
						</table>
						<!-- /social & contact --></td>
					</tr>
				</tbody>
			</table>
			</div>
			</td>
			<td>&nbsp;</td>
		</tr>
	</tbody>
</table>
<!-- /BODY --><!-- FOOTER -->

<table class="footer-wrap">
	<tbody>
		<tr>
			<td>&nbsp;</td>
			<td class="container"><!-- content -->
			<div class="content">
			<table>
				<tbody>
					<tr>
						<td align="center">
						<p><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="[newsletters_unsubscribeurl]"><unsubscribe>Unsubscribe</unsubscribe></a></p>
						</td>
					</tr>
				</tbody>
			</table>
			</div>
			<!-- /content --></td>
			<td>&nbsp;</td>
		</tr>
	</tbody>
</table>
<!-- /FOOTER --></body>
</html>
