<?php
include('views/_header_m.tpl.php');
?>

<style>
	.spacer { padding-top:0px; }
	body, h1, h2, h3, h4, h5, h6 {
		font-family: Montserrat,Oswald,'Open Sans',Helvetica, sans-serif;
	}
	header, footer { display:none !important; }
	#wrapper { color:#000 !important; }
	h1 {
		font-family: Montserrat,Oswald,'Open Sans',Helvetica, sans-serif;
		font-weight:600; font-size:28px; line-height:38px; text-align:center;
	}
	.btn-toogle-menu {
		display: none !important;
	}
	.btn, .btn a, .btn a:active, .btn a:visited {
		border-radius: 0px;
		-moz-border-radius: 0px;
		-webkit-border-radius: 0px;
		margin: 10px;
		font-size: 17px !important;
		font-weight: 300 !important;
		height: 45px !important;
		line-height: 45px !important;
		width: auto;
		display: block;
		padding: 10px 15px !important;
		margin-bottom: 25px;
	}
	.btn-red {
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
	}
	.btn-blue {
		background: #222;
		border-radius: 6px;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
	}

	/* ######################################################### */
	/*                        MOBILE STYLES                      */
	/* ######################################################### */

	@media (min-width: 1025px) and (max-width: 2650px) {
		.applogo {
			margin-right: -165px !important;
		}
	}

	@media (min-width: 980px) and (max-width: 1024px) {

	}

	/* Portrait tablet to landscape and desktop */
	@media (min-width: 768px) and (max-width: 979px) {

	}

	/* Landscape phone to portrait tablet */
	@media (max-width: 767px) {

	}

	/* Landscape phones and down */
	@media (max-width: 586px) {
		.applogo {
			margin-right: -60px !important;
		}
		#header .wrap-top-menu {
			/*position: fixed;
			width: 100%;
			height:41px;*/
		}
		.webviewspace {
			padding-top: 0px;
		}
	}

	/* Landscape phones and down */
	@media (max-width: 480px) {
		.applogo {
			margin-right: 35px !important;
		}
	}
	@media (max-width: 320px) {

	}
</style>

<div class="layout-2cols" style="">
	<div class="content grid_12" style="overflow:hidden;">
		<div class="webviewspace" style="width:auto; overflow:hidden; background:none; padding:0px 15px;
			min-height:800px; text-align:left; font-size:19px; line-height:29px; font-weight:400;">
			<!-- COOL BLUE: 00A1FE -->
			<h1 style="font-weight:600; font-size:28px; text-align:center;">
				VOICE QUIZZES FAQ
			</h1>
			
			More Info/Tips Coming Soon...
			<br /><br />
			
			<h2 style="font-weight:800; line-height:35px;">
    			HOW VOICE QUIZZES WORK
			</h2>
			
			Please enter and save the same email address you registered for on the VoiceChallenges.com website. 
			<br /><br />
			Then, when you complete a Challenge it will automatically be submitted to the Voice Challenge Leaderboard that will soon be released at voicechallenges.com.
			<!--<span style="color:#bbb"><i>*Note: The "Collections" section is accessible by 
			tapping the "more" button (with 3 dots) on the far right of 4 light blue buttons on 
			the app&rsquo;s home page.</i></span>-->	
			
			<br /><br />
			
			
			 
			
<!--			<center>Helpful Tips:</center>
			<br />
			&bull; Instantly update Stars Used (ie. redeemed) on your child&rsquo;s device by saving,
			then giving stars. Specifically:
			<br /><br />
			1. Enter the desired amount, then clicking &ldquo;Save&rdquo;.
			<br /><br />
			2. <i>Then</i>, enter an amount in the Give Stars feature - and click &ldquo;Send now&rdquo;.
			
			<br /><br />
			
			&bull; Test if a device is successfully sync&rsquo;d to receive real-time stars by
			clicking the cell phone icon to the right of the &ldquo;Delete Profile&rdquo; button.
			
			<br /><br />
			
			&bull; Use the &ldquo;Device Type&rdquo; field to describe both the device <i>and</i>
			the child who&rsquo;ll be using it, ie. 
			<span style="font-weight:600;">Johnny/Janie&rsquo;s iPad</span>-->
<!--			<br />
			Cookies:<br /><br />
			<?php 
			
				print_r($_COOKIE);
			
			?>
			
			Session:<br /><br />
			
			<?php 
				echo '<pre>' . print_r($_SESSION['user'], TRUE) . '</pre>';
			?>
			<br /><br />-->


			<!--			<a href="/clients/import" class="btn btn-blue"
			title="Click to open and view in a new tab" style="font-weight:600;">
			<i class="fa fa-cog"
			aria-hidden="true"></i> Edit Account</a>-->

			<center>
			<br /><br />

			<a href="javascript:top.frames.location.reload();" class="refresh" style="color:#ececec;">
				<i class="fa fa-refresh"></i></a>

			<br /><br />

			<a class="" href="/how-it-works-overview/" style="color:#eee; font-size:22px">
				<i class="fa fa-refresh"></i></a>
			</center>
			
		</div>
	</div>
	<div class="clear"></div>
</div>

<script>
	$(document).ready(function() {
		$("#Prefs").click(function(e) {
			// $("#entercode").keyup(function(e){
			//$("#apply-ref").click(function(e){
			//e.preventDefault();

			alert('Coming Soon');
			//reserveNow();

		});

		$("#reserveformtop,#reserveformbottom").click(function() {
			// $("#entercode").keyup(function(e){
			//$("#apply-ref").click(function(e){

			//alert('Reserve Clicked');
			//reserveNow();

		});
		// ~ LINE 355
		$("#reserveformunlogged,#reserveformunlogged2").click(function() {
			// $("#entercode").keyup(function(e){
			//$("#apply-ref").click(function(e){

			alert('Please login to reserve your AppWrapr');
			resmsg = "Please login to reserve your AppWrapr";
			$('.reservemsgunlogged').html('<center style="color:#29CE29; font-weight:500; font-size:15px">' + resmsg + '</center>');
			$('.reservemsgunlogged2').html('<center style="color:#29CE29; font-weight:500; font-size:15px">' + resmsg + '</center>');
			$('.reservemsgunlogged').delay(500).fadeOut('slow');
			$('.reservemsgunlogged2').delay(500).fadeOut('slow');
		});

		$(".more").click(function () {
			$(".morediv").slideToggle(0, function () {
			});
		});
		
		// IMAGE ZOOM
		$(document).on('click', '.pop' ,function (e) {
			// write your logic
			//alert('PopImg');
			var src= $(this).find('img').attr('src');
			//alert(src);
			$('.modal-content').attr('src', src);
			//$('.modal-content').attr('src', $('.imageresource').attr('src')); // here asign the image to the modal when the user click the enlarge link
			$('.modal').show(); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function
		});

		$(".close").on("click", function() {
			$('.modal').hide();
		});

	});
	///////////////////////////////////////////////
	// DOCUMENT READY ENDS
	///////////////////////////////////////////////
</script>

<!-- The Modal -->
<div id="myModal" class="modal">

	<!-- The Close Button -->
	<span class="close">&times;</span>

	<!-- Modal Content (The Image) -->
 	<img class="modal-content" id="img01" style="padding:2px; border:1px solid #777;"><

	<!-- Modal Caption (Image Text) -->
	<!--<div id="caption">Image Caption....</div>-->
</div>


<style type="text/css">
	/* Style the Image Used to Trigger the Modal */
	#myImg {
		border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
		cursor: pointer;
		transition: 0.3s;
	}

	#myImg:hover {
		opacity: 0.7;
	}

	/* The Modal (background) */
	.modal {
		display: none; /* Hidden by default */
		position: fixed; /* Stay in place */
		z-index: 999; /* Sit on top */
		padding-top: 10px; /* Location of the box */
		left: 0;
		top: 0;
		width: 100%; /* Full width */
		height: 100%; /* Full height */
		overflow: auto; /* Enable scroll if needed */
		/*background-color:red;*/
		background: url('/static/js/fancybox/fancybox_overlay.png');
		/*background-color: rgb(0,0,0);*/ /* Fallback color */
		/*background-color: rgba(0,0,0,0.9);*/ /* Black w/ opacity */
	}

	/* Modal Content (Image) */
	.modal-content {
		border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;
		margin:  20px auto 0;
		display: block;
		width: auto;
		max-width: 700px;
		/*max-height:80%;*/
		/*background:red;*/
		box-shadow: 12px 0 15px -1px rgb(0 0 0 / 80%), -12px 0 8px -1px rgb(0 0 0 / 80%);
		z-index: 9999999999 !important;
		/*border:1px solid blue;*/
	}

	/* Caption of Modal Image (Image Text) - Same Width as the Image */
	#caption {
		margin: auto;
		display: block;
		width: 80%;
		max-width: 700px;
		text-align: center;
		color: #ccc;
		padding: 10px 0;
		height: 150px;
	}

	/* Add Animation - Zoom in the Modal */
	.modal-content, #caption {
		animation-name: zoom;
		animation-duration: 0.6s;
	}

	@keyframes zoom {
		from {
			transform: scale(0)
		}
		to {
			transform: scale(1)
		}
	}

	/* The Close Button */
	.close {
		position: absolute;
		top: 10px;
		right: 35px;
		color: #f1f1f1;
		font-size: 40px;
		font-weight: 300;
		transition: 0.3s;
	}

	.close:hover,
	.close:focus {
		color: #bbb;
		text-decoration: none;
		cursor: pointer;
	}

	/* 100% Image Width on Smaller Screens */
	@media only screen and (max-width: 700px){
		/* The Modal (background) */
		.modal {
			padding-top: 0px; /* Location of the box */
		}
		.modal-content {
/*			width: 85%;
			margin:0 auto;*/
			margin:  20px auto 0;
			display: block;
			width: auto;
			/*margin:10% 5% 0;*/
		}
		/* The Close Button */
		.close {
			position: absolute;
			top: 5px;
			right: 35px;
			color: #f1f1f1;
			font-size: 40px;
			font-weight: 300;
			transition: 0.3s;
		}
		
	}
</style>

<?php
include 'views/_footer.tpl.php';
?>