<?php
function my_admin_menu() {
	add_theme_page( 'Getting Started', 'Getting Started', 'manage_options', 'estelle_started.php', 'estelle_started', '', 100  );
}
add_action( 'admin_menu', 'my_admin_menu' );


function estelle_started() { ?>

<style>
body {font-size: 1.4em;}
body p {font-size: 1em;}

/********** Miscellaneous **********/
img {max-width: 100%; height: auto;}
.img-browser {border: 1px solid #ddd; border-top: 15px solid #ddd; border-radius: 3px; -webkit-border-radius: 3px;}
a .img-browser {border-color: #ddd; color: #ddd;}
.split-columns {width: 100%; margin: 20px 0;}
.split-columns:after {content: ''; height: 10px; display: block; clear: both;}
.large-icon {text-align: center; font-size: 5em; width: 100px; height: 100px; display: block; margin: 0 auto;}
.text-center {text-align: center;}

/********** Input and label **********/
select:focus,
textarea:focus,
input:focus {border: 1px solid #888; -webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, .2); box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, .2);}

label {display: inline-block; margin-right: 20px; vertical-align: top;}
select {height: 28px;}
select,
textarea,
input {border: 1px solid #ccc; color: #888; padding: 8px 10px; font-size: 1em; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; font-family: 'Proxima Nova', Arial, Verdana, Tahoma, Sans-serif;}
.input-button,
input[type=submit] {border: 1px solid #000; background: #000; color: #fff; cursor: pointer; padding: 8px 15px; font-size: 1em; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}
.input-button:hover,
input[type=submit]:hover {border: 1px solid #000; background: #fff; color: #000; -webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, .2); box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, .2);}

/********** Shortcodes **********/
.left,
.right,
.col1,
.col2,
.col3,
.col3-2,
.col3-1,
.col4-1,
.col4-2,
.col4-3,
.col4-4,
.col5-1,
.col5-2,
.col5-3,
.col5-4,
.col5-5 {margin-bottom: 20px;}

.left,
.right {width: 38%; line-height: 1.8em; display: inline-block; vertical-align: top; margin: 0 5%;}

.col1,
.col2 {width: 30%; margin-right: 5%; float: left; line-height: 1.8em;}
.col3 {width: 30%; float: right; line-height: 1.8em;}

.col3-2 {width: 64%; float: left; line-height: 1.8em;}
.col3-1 {width: 32%; float: right; line-height: 1.8em;}

.col4-1,
.col4-2,
.col4-3 {width: 22%; margin-right: 4%; float: left; line-height: 1.8em;}
.col4-4 {width: 22%; float: right; line-height: 1.8em;}

.col5-1 {width: 18%; float: left; line-height: 1.8em;}
.col5-2,
.col5-3,
.col5-4 {width: 18%; margin: 0 0 0 2%; float: left; line-height: 1.8em;}
.col5-5 {width: 18%; float: right; line-height: 1.8em;}

.doc-column {width: 50%; margin: 0 auto; font-size: .7em;}

/********** @media **********/
@media all and (max-width: 480px) {

  /********** Shortcodes **********/
  .left,
  .right,
  .col1,
  .col2,
  .col3,
  .col3-2,
  .col3-1,
  .col4-1,
  .col4-2,
  .col4-3,
  .col4-4,
  .col5-1,
  .col5-2,
  .col5-3,
  .col5-4,
  .col5-5 {float: none; width: 100%; clear: both; line-height: 1.8em;}

  .pullquote {width: 85%;}

  .sc-slide {position: relative; overflow: hidden; width: 100%; height: auto; margin: 0 0 20px 0; padding: 0;}

}

/********** @media **********/
@media all and (min-width: 481px) and (max-width: 1199px) {

}

/********** @media **********/
@media all and (min-width: 1200px) {

}
</style>

<div class="wrap text-center">

	<h1>Welcome to Bluchic!</h1>

	<p>Sweet deal <strong>15% off</strong> when you upgrade to the premium theme.</p>

	<section class="split-columns">
		<article class="col1">
			<a href="http://www.bluchic.com/shop/wordpress-themes/jacqueline-theme/" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/includes/images/screenshot-jacqueline.jpg" alt="Jacqueline Theme" /></a>
		</article><!-- .col1 -->
		<article class="col2">
			<a href="http://www.bluchic.com/shop/wordpress-themes/isabelle-theme/" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/includes/images/screenshot-isabelle.jpg" alt="Isabelle Theme" /></a>
		</article><!-- .col2 -->
		<article class="col3">
			<a href="http://www.bluchic.com/shop/wordpress-themes/samantha-theme/" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/includes/images/screenshot-samantha.jpg" alt="Samantha Theme" /></a>
		</article><!-- .col3 -->
	</section><!-- .split-columns -->

	<p>As a bonus for subscribing, save <strong>15% off</strong> your next Bluchic purchase with coupon code <strong>BCFORYOU</strong> at checkout.</p>
	<p><a href="http://www.bluchic.com/shop/" style="display:block; width:100%; padding:20px 0; background:#000; color:#fff; text-decoration:none;" target="_blank">REDEEM NOW</a></p>

<?php }
