<style type="text/css">
	input.btn-flat {
		padding: 10px;
		font-weight: 300;
		font-size: 15px;
		border: 1px solid #326bb9;
		color: #FFF;
		background: #4392ec;
		background: -moz-linear-gradient(top, #4392ec 0%, #377ae8 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4392ec), color-stop(100%,#377ae8));
		background: -webkit-linear-gradient(top, #4392ec 0%,#377ae8 100%);
		background: -o-linear-gradient(top, #4392ec 0%,#377ae8 100%);
		background: -ms-linear-gradient(top, #4392ec 0%,#377ae8 100%);
		background: linear-gradient(top, #4392ec 0%,#377ae8 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4392ec', endColorstr='#377ae8',GradientType=0 );
		-moz-transition: all 0.3s ease 0s;
		-webkit-transition: all 0.3s ease 0s;
		-o-transition: all 0.3s ease 0s;
		-ms-transition: all 0.3s ease 0s;
		transition: all 0.3s ease 0s;
		-webkit-border-radius: 50px;
		-moz-border-radius: 50px;
		border-radius: 50px;
		box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
	}
	input.btn-flat:hover {
		border: 1px solid #326bb9;
		color: #FFF;
		background: #449afc;
		background: -moz-linear-gradient(top, #377ae8 0%, #4392ec 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#377ae8), color-stop(100%,#4392ec));
		background: -webkit-linear-gradient(top, #377ae8 0%,#4392ec 100%);
		background: -o-linear-gradient(top, #377ae8 0%,#4392ec 100%);
		background: -ms-linear-gradient(top, #377ae8 0%,#4392ec 100%);
		background: linear-gradient(top, #377ae8 0%,#4392ec 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4392ec', endColorstr='#4392ec',GradientType=0 );
	}
	.fa-chevron-down{
		transform: rotate(0deg);
		transition: transform .3s linear;
	}

	.fa-chevron-down.open{
		transform: rotate(180deg);
		transition: transform .3s linear;
	}
	.quickpostform ::-webkit-input-placeholder {
		/* Edge */
		color: #bbb;
	}

	.quickpostform :-ms-input-placeholder {
		/* Internet Explorer 10-11 */
		color: #bbb;
	}

	.quickpostform ::placeholder {
		color: #bbb;
	}
	
	.whatdoyouneed { 
		font-size:11px; height:17px; line-height:17px; 
	}	
		
	/* ####################################### */
	/*        MOBILE STYLES START HERE         */
	/* ####################################### */

	/* ####################################### */
	/*        Landscape phones and down        */
	/* ####################################### */

	@media (max-width: 586px) {
		.whatdoyouneed { 
			font-size:15px; height:23px; line-height:23px; 
		}	
	}
		
</style>
			<div class="quickpostform" style="text-align:center; font-size:17px;
				margin:15px auto 0; -webkit-box-sizing: border-box; position:relative;
				-moz-box-sizing: border-box; box-sizing: border-box; width:100%; max-width:1250px;">
					
				<form method="post" enctype="multipart/form-data" data-ajax="false" action="/project/addquick" 
					style="-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: 
					border-box; width:100%;">

					<div class="grid_5 blockit" style="margin-top:10px; margin-left:0; background:none;
					 -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
					 <div class="whatdoyouneed" style="color:#777; background:none;
							 text-align:left;">
							 &nbsp;What is your mob or opportunity about?
					</div>
							 
						<?php if ($_SESSION['loggedin']) { ?>
						
							<input id="quicktitle" class="txt" type="text" name="title"
							placeholder="Goal/FlipMob Title"
							style="background:#e7e7e7; -webkit-border-radius:8px; -moz-border-radius:8px; 
							border-radius:8px; padding:15px; margin:0; font-weight:300; width:100%; 
							-webkit-box-sizing: border-box; -moz-box-sizing: border-box; 
							box-sizing: border-box; border:1px solid #fff;">
						
						<?php } else { ?>
							
							<input id="pleaselogin" class="txt" type="text"
							placeholder="Goal/FlipMob Title"
							style="background:#e7e7e7; -webkit-border-radius:8px; -moz-border-radius:8px;
							border-radius:8px;
							padding:15px; margin:0; font-weight:300; width:100%; -webkit-box-sizing: border-box;
							-moz-box-sizing: border-box; box-sizing: border-box; border:1px solid #fff;">
													
						<?php } ?>	 
							 
						
						<input class="txt" type="hidden" name="is_active" value="1">
					</div>
					<div class="grid_3 blockit" style="margin-top:10px; margin-left:0;
					-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
					<div style="font-size:11px; color:#777; background:none; height:17px; line-height:17px;
							text-align:left;">&nbsp;Select Category</div>
						<select id="quickcat" class="txt" type="text" name="category_id" 
							style="padding:13px 15px 13px; background:#e7e7e7; -webkit-border-radius:8px; -moz-border-radius:8px; 
							border-radius:8px; margin:0; font-weight:300; width:100%; -webkit-box-sizing: border-box;
							-moz-box-sizing: border-box; box-sizing: border-box; border:1px solid #fff; height:53px;">
							<option value="">Select Category</option>
							<?php
							foreach ($categories as $index => $category)
								echo "<option value='{$category['id']}'>{$category['title']}</option>";
							?>
						</select>
					</div>
					<div class="grid_2 blockit" style="margin-top:10px; margin-left:0;
					-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
					<div style="font-size:11px; color:#777; background:none; height:17px; line-height:17px;
						text-align:left;">&nbsp;Total Needed? <a href="#yourbudget" class="loginpop"
						title="Total amount needed"><img 
						src="/static/client/info_icon_black.png" alt="i" 
						style="height:15px; margin-top:-3px; margin-left:3px"></a>
					</div>
							
							<input class="txt" type="text" name="budget"
							placeholder="Budget" id="budget"
							style="background:#e7e7e7; -webkit-border-radius:8px; -moz-border-radius:8px;
							border-radius:8px; padding:15px; margin:0; font-weight:300; width:100%;
							-webkit-box-sizing: border-box; -moz-box-sizing: border-box;
							box-sizing: border-box; border:1px solid #fff;">
						<!--<textarea id="descrip" class="ckeditor txt" name="description" rows="5"
							style="background:#e7e7e7; -webkit-border-radius:8px; -moz-border-radius:8px;
							border-radius:8px; min-height:60px; max-height:60px; padding:10px; margin:0; font-weight:300;
						width:100%; -webkit-box-sizing: border-box; border:1px solid #fff;
						-moz-box-sizing: border-box; box-sizing: border-box;"
						placeholder="Quick description..."></textarea>-->
					</div>
					<div class="grid_2 blockit" style="text-align:center; margin-top:25px;
						-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 
						text-align:center;">
						
						<?php if ($_SESSION['loggedin']) { ?>
						
						<input id="quickpost" class="btn-flat" type="submit" value="Create Mob"
							style="margin:8px 5px 5px; width:90%; max-width:350px" />
							<!--<a href="javascript:;" id="reserveformtop" class="btn-o"
								style="width:155px; text-align:center; margin-top:20px;">Reserve AppWrapr</a>-->

						<?php } else { ?>
							<input id="loginfirst" class="btn-flat" type="button" value="Create a Mob"
							style="margin:8px 5px 5px; width:90%; max-width:350px;" />
						
						<?php } ?>
						
					</div>
					<div class="clear"></div>
					
					<div style="font-size:14px; margin-top:10px">
						<span id="chevron_ppp" style="display:inline-block;">Enter/Verify your Contact Info</span>
						<i id="chevron_pp" class="fa fa-chevron-down open"></i>
					</div>
					
					<div id="pp_inputs" style="display:none; background:none; font-size:17px; line-height:26px; 
					padding:10px 20px 20px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius:8px;
					font-family:Montserrat,Raleway,'Open Sans',Helvetica,Verdana,sans-serif; margin-top:0px;
					border:0px solid #ddd; text-align:center; max-width:720px; margin:0 auto;">
<!--						<div class="grid_3 blockit" style="margin-left:0;
						 -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
						 &nbsp;
						</div>-->
						<div class="grid_6 blockit" style="margin-top:10px; margin-left:0;
						 -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
						 	<div style="font-size:11px; color:#777; background:none; height:17px; line-height:17px;
							 text-align:left;">&nbsp;Email (Optional)</div>
							<input class="txt" type="text" name="email" id="email"
							placeholder="youremail@somesite.com" onblur="checkEmail()"
							value="<?php if (!empty($_SESSION['user']['email'])) {
							echo $_SESSION['user']['email']; } ?>"
							style="background:#e7e7e7; -webkit-border-radius:8px; -moz-border-radius:8px; 
							border-radius:8px; float:left;
							padding:12px; margin:0; font-weight:300; width:100%; -webkit-box-sizing: border-box;
							-moz-box-sizing: border-box; box-sizing: border-box; border:1px solid #fff;">
						</div>
						<div class="grid_6 blockit" style="margin-top:10px; margin-left:0;
						-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
						<div style="font-size:11px; color:#777; background:none; height:17px; line-height:17px;
							 text-align:left;">&nbsp;Phone (for optional Text Message)</div>
							<input class="txt" type="text" name="phone" 
							placeholder="###-###-####" id="phone" maxlength="12" onblur="formatPhoneNumber()"
							value="<?php if (!empty($_SESSION['user']['phone'])) {
							echo $_SESSION['user']['phone']; } ?>"
							style="background:#e7e7e7; -webkit-border-radius:8px; -moz-border-radius:8px; 
							border-radius:8px; float:left;
							padding:12px; margin:0; font-weight:300; width:100%; -webkit-box-sizing: border-box;
							-moz-box-sizing: border-box; box-sizing: border-box; border:1px solid #fff;">
						</div>
						<div class="clear"></div>
<!--						<div class="grid_3 blockit" style="margin-left:0;
						-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
						&nbsp;
						</div>-->
							<!--<a href="#" style="font-weight:600;" title="Link">Link <i 
							class="fa fa-angle-right"></i></a>-->			
					</div>

				</form>
			</div><!-- QUICK POST FORM ENDS HERE -->
			
<script type="text/javascript">
$(document).ready(function(){
	
	$("#loginfirst,#pleaselogin").click(function() {
		// $("#entercode").keyup(function(e){
		//$("#apply-ref").click(function(e){
		alert('Please login to create a mob...');
	}); 
    
    // QUICK POST FORM VALIDATION 
	$("#quickpost").click(function(e) {
		//		if (! $("#check_terms").is(":checked")) {
		//			e.preventDefault();
		//			var confirm_box = confirm('You must check the Terms checkbox.');
		//			return false;
		//		}

		if (! $("#quicktitle").val().length) {
			e.preventDefault();
			alert('You must enter Goal/FlipMob Title/Name.');
			return false;
		}

		if (! $("#quickcat").val().length) {
			e.preventDefault();
			alert('You must choose a Category/Type.');
			return false;
		}

		if (! $("#budget").val().length) {
			e.preventDefault();
			alert('You must enter an estimated budget.');
			return false;
		}

//		if (! $("#descrip").val().length) {
//			e.preventDefault();
//			alert('You must enter quick, simple description.');
//			return false;
//		}

		return true;
	});
	
	/////////////////////////////////

	$('#chevron_pp').click(function () {
		$("#chevron_pp").toggleClass('fa-chevron-down fa-chevron-down open');
		//$("#pp_inputs").toggle();
		$('#pp_inputs').slideToggle({
			direction: "down"
		}, 300);
	});
	     
});
</script>			