<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="pagebgr" style="min-height:740px;">
<center>
<br /><br /></center>
<div class="container">
<div class="stepwizard">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step col-xs-3">
<a href="#step-1" type="button" class="btn btn-success btn-circle"><span class="glyphicon glyphicon-file"></span></a>
<p><small>Type</small></p>
</div>
<div class="stepwizard-step col-xs-3">
<a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled"><span class="glyphicon glyphicon-th-large"></span></a>
<p><small>Design</small></p>
</div>
<div class="stepwizard-step col-xs-3">
<a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled"><span class="glyphicon glyphicon-home"></span></a>
<p><small>Info</small></p>
</div>
<div class="stepwizard-step col-xs-3">
<a href="#step-4" type="button" class="btn btn-default btn-circle" disabled="disabled"><span class="glyphicon glyphicon-ok"></span></a>
<p><small>Ready</small></p>
</div>
</div>
</div>
</div>
<form action="/flyer_step2.php?<?php echo http_build_query($_GET); ?>" method="post">
<input type="hidden" name="page_id" value="<?php echo $pageData; ?>">
<input type="hidden" name="user_id" value="<?php echo $userData; ?>">
<input type="hidden" name="created" value="<?php echo $created; ?>">
<div class="panel panel-primary setup-content" id="step-1">
<div class="panel-heading">
<h3 class="panel-title">Request a Flyer</h3>
</div>
<div class="panel-body">
<div class="myfields" style = "padding-bottom: 200px;">
<div class="row text-center">
<div class="col">
<label class="btn btn-primary new_listing">
New Listing
<input type="radio" name="flyertype" class="flyertype" value="new_listing" />
</label>
<label class="btn btn-primary open_house">
Open House
<input type="radio" name="flyertype" class="flyertype" value="open_house" />
</label>
<label class="btn btn-primary just_sold">
Just Sold
<input type="radio" name="flyertype" class="flyertype" value="just_sold" />
</label>
<br />
</div>
</div>
</div>
</div>
</div></form>
</section>
body{
padding:0px;
margin:0px;
font-family: 'Open Sans', sans-serif;
background-color: #F4F9FF;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
header{
padding: 15px 45px 10px;
background-color: #fff;
}
header img{
max-width: 180px;
}
section{
padding: 30px 25px 150px;
position: relative;
bottom: 190px;
left: 0;
right: 0;
top: 0px;
height: 100%;
}
.home_center{
padding-top: 100px;
}
.left_side{
width: 48%;
display: inline-block;
vertical-align: middle;
padding-right: 1%;
}
.right_side{
width: 50%;
display: inline-block;
vertical-align: middle;
float: right;
}
section img{
max-width: 100%;
}
footer{
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #38BEEF;
color: #fff;
padding: 20px 35px;
font-size: 14px;
}
.footer-left{
width: 49%;
display: inline-block;
}
.footer-right{
width: 49%;
display: inline-block;
text-align: right;
}
h1{
font-family: 'Pacifico', cursive;
color: #305887;
font-size: 56px;
margin: 0px;
padding: 0px;
}
p{
color:#333333;
font-size:16px;
margin-top: 0px;
margin-bottom: 25px;
}
strong{
color: #305887;
margin-bottom: 10px;
display: block;
}
.orange_button{
color: #ffff;
display: inline-block;
border-radius: 5px;
text-decoration: none;
font-size: 14px;
border: 0px;
margin-top: 5px;
max-width: 280px;
}
.rowsmall{
max-width: 1000px;
margin:auto;
}
footer a{
color:#fff;
text-decoration:none;
}
#userData{
max-width: 80%;
margin: auto;
text-align: center;
}
.comp_img{
max-width: 65%;
float: left;
margin-left: -5%;
margin-bottom:25px;
}
#userData .left_side{
vertical-align: top;
padding-top: 0px;
text-align:left;
font-size:12px;
color:#305887;
}
#userData .right_side{
text-align:left;
font-size:12px;
color:#305887;
}
#userData input{
border-radius: 2px;
-webkit-appearance: none;
box-shadow: none;
border: 1px #CCCCCC solid;
font-size: 14px;
padding: 7px 12px;
margin-top: 5px;
margin-left: 4%;
margin-right: 4%;
width: 84%;
}
#userData input[type="radio"]{
-webkit-appearance: radio;
width:inherit;
}
#userData label, #profile_form label{
margin-left: 4%;
max-width: 500px;
margin: auto;
}
.thankyou{
text-align:center;
}
hr{
opacity: 0.5;
}
#admin_nav{
float: right;
}
#admin_nav ul{
list-style: none;
margin: 0px;
padding: 0px;
}
#admin_nav li{
display: inline-block;
font-size: 14px;
text-transform: uppercase;
padding: 10px;
}
#admin_nav a{
display: inline-block;
border: 1px #ccc solid;
padding: 7px;
border-radius: 5px;
text-decoration: none;
color: #333;
}
.calendarpass{
font-weight:bold;
color: #38BEEF;
}
@media screen and (max-width:768px){
.left_side,.right_side, .footer-left,.footer-right{
width:100%;
}
}
ol {
counter-reset: item;
}
ol > li {
counter-increment: item;
}
ol ol > li {
display: block;
}
ol ol > li:before {
content: counters(item, ".") ". ";
margin-left: -20px;
}
.glballis td{
padding: 5px;
font-size: 11px;
max-width: 380px;
}
.glballis tr:nth-child(2n) {background: #dae3ef}
.propp{
background-color: #E0E9FF;
}
.boostpp{
background-color: #FFFAE5;
}
.elitepp{
background-color: #EEFFEB;
}
.pausedpp{
background-color: #EFEFEF;
}
.profile_title{
text-align: center;
}
#profile_form{
text-align: center;
}
.facebook_btn{
background-color: #305887;
color: #fff !important;
padding: 8px;
display: block;
text-align: Center;
text-decoration: none;
margin: 8px 5px 8px 12px;
border-radius: 5px;
}
.twitter_btn{
background-color: #38BEEF;
color: #fff !important;
padding: 8px;
display: block;
text-align: Center;
text-decoration: none;
margin: 8px 5px 8px 12px;
border-radius: 5px;
}
.insta_btn{
background-color: #A67F40;
color: #fff !important;
padding: 8px;
display: block;
text-align: Center;
text-decoration: none;
margin: 8px 5px 8px 12px;
border-radius: 5px;
}
.boxblue {
border:#38BEEF 1px solid !important;
border-radius:5px;
padding: 10px;
margin:15px;
font-size:14px;
}
.box_title{
background-color: #F4F9FF;
margin-top: -20px;
max-width: 150px;
margin-left: auto;
margin-right: auto;
}
#reviewer1, #reviewer2, #reviewer3{
max-width:10px;
}
textarea{
max-width: 90%;
border-radius: 5px;
border-color: #ccc;
padding: 8px;
}
.submit_btn{
background-color: #305887;
border-radius: 5px !important;
border: 0px !important;
padding: 13px !important;
color: #fff;
letter-spacing: 0px;
width: 300px !important;
font-size: 17px !important;
cursor: pointer;
text-decoration:none;
}
.submit_btn:hover{
background-color: #38BEEF;
}
.scroll_section{
border: #38BEEF 1px solid;
border-radius: 5px;
}
.scroll_section .sec_title{
display: inline-block;
}
.scroll_section form{
display: inline-block;
}
.fullrow{
width: 180px;
display: inline-block;
padding: 20px;
border: #fff 2px solid;
border-radius: 5px;
margin: 10px;
box-shadow: 0px 0px 10px #ccc;
}
.section_tools{
background-color: #38BEEF;
color: #fff;
padding: 15px;
}
.idisabled{
opacity: 0.3;
}
.left_side3 {
width: 30%;
display: inline-block;
vertical-align: middle;
}
.center_side3{
width: 30%;
display: inline-block;
vertical-align: middle;
}
.right_side3{
width: 30%;
display: inline-block;
vertical-align: middle;
}
.useractivity_box{
display: block;
background-color: #d9dde3;
margin-left: -25px;
padding: 5px 25px 25px;
margin-right: -25px;
}
.useractivity_box td{
padding: 5px;
font-size: 11px;
}
.useractivity_box tr:nth-child(odd) {background: rgba(255,255,255,0.3)}
.useractivity_box tr:nth-child(even) {background: rgba(255,255,255,0.5)}
.blue_button{
background-color: #4468b0;
color: #fff;
text-decoration: none;
padding: 15px 35px;
border-radius: 10px;
max-width: 200px;
margin: auto;
float: left;
display: block;
text-transform: uppercase;
font-weight: bold;
}
.comp_box{
text-align: left;
}
.comp_img img{
max-width: 100% !important;
}
@media only screen and (min-width: 1450px){
.comp_img img{
max-width: 800px !important;
}
}
.openadvset{
text-align:left;
text-decoration:underline;
}
#chosenim img{
cursor: pointer;
}
#chosenim label{
padding:10px;
}
#chosenim .checked img{
border: 5px #38BEEF solid;
padding: 10px;
}
#chosenim .unchecked img{
transform:scale(0.9);
}
#chosenim .submit_btn{
display: none;
}
#chosenim .checked .submit_btn{
display: inline-block;
}
#step-1, #step-2, #step-3, #step-4{
width: 900px;
margin: 20px auto 65px;
max-width: 100%;
border: none;
border-radius: 0px !important;
box-shadow: 0 1px 33px rgba(0,0,0,.3);
}
.panel-heading{
border-radius: 0px !important;
border: none!important;
background-color: #F0843C !important;
}
.panel-title {
font-family: 'Pacifico', cursive;
color: #ffffff;
font-size: 26px !important;
margin: 0px;
padding: 10px;
font-weight: 100;
text-align: left;
}
.stepwizard-step{
text-align:center;
}
.pagebgr{
background-color: #F4F9FF;
padding:20px;
}
.btn-success{
color: #fff;
background-color: #00c1f4 !important;
border: none !important;
}
.btn-circle{ border-color: none;
border-radius: 50% !important;
width: 50px;
height: 50px;
font-size: 22px;
padding-top: 10px;
padding-right: 9px;
margin-bottom: 5px;
}
.btn-circle .glyphicon{
font-size: 22px;
padding-top: 5px;
padding-left: 2px;
}
.new_listing{
background-color: #e9f5ff !important;
border-color: #00c1f4 !important;
color: #1d588a !important;
}
.open_house{
background-color: #f9fbf7 !important;
border-color: #5cb85c !important;
color: #0b752f !important;
}
.just_sold{
background-color: #fbfbf7 !important;
border-color: #A67F40 !important;
color: #A67F40 !important;
}
.btn-primary{
font-size: 18px;
width: 200px !important;
line-height: 160px !important;
margin: 10px !important;
text-transform: uppercase !important;
}
.btn-done{
background-color: #5cb85c !important;
color: #fff !important;
}
.btn-primary:hover{
background-color: #e0f5e0 !important;
}
.btn-primary:active{
background-color: #d9eaef !important;
}
.btn_on{
background-color: #18bc4f !important;
}
input.flyertype{
display: none;
}
.pagebgr{
min-height:80vh;
}
.myfields{
padding-top: 85px !important;
padding-bottom: 85px !important;
}
.mydesign{
padding: 20px !important;
}
.mydesign img{
border: 3px #ccc solid !important;
}
.mydesign img:hover{
border: 3px #00c1f4 solid !important;
}
.mydesign img:active{
border: 3px #5cb85c solid !important;
}
.mydesign .on img{
border: 3px #5cb85c solid !important;
}
.mydesign input{
display: none;
}
.mydesign label{
padding: 5px !important;
margin-bottom: 20px !important;
}
.myinfo form{
text-align:left;
}
.myinfo{
padding: 20px 40px !important;
}
.myinfo .maxlength-feedback{
display: block;
text-align: right;
}
.myinfo #maxLength{
width: 100%;
max-width: 100%;
}
.myinfo h3{
color: #1d588a;
font-size: 18px;
font-weight: bold;
}
.submitflyer{
padding: 10px 60px !important;
}
.mainflyerform{
text-align: left !important;
}
.mainflyerform #displayValue, .mainflyerform input{
margin: 0px !important;
}
$(function () {
$('input[type=radio]').on('change', function() {
$(this).closest('label').addClass('btn_on');
$(this).closest("form").submit();
});
});
