<fieldset>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12">
<div id="scroll">
<p style="font-size: 16px;"><span class="style1">Use this calculator to determine the cost for 250 pieces of books and below. For quotes over 250 pieces, please fill out our</span> <a href="http://www.sureprintanddesign.ca/bookprintingquotation.html" style="color: #cc0000;" target="_blank">online quote request form</a><span class="style1"> to get an estimate within 24 hours. </span></p>
<p class="style1" style="font-size: 16px; padding-top: 10px;">Please note, sales tax is not displayed. If applicable, sales taxes will be applied at the time an order is placed on your account.</p>
</div>
<form class="form-horizontal" id="orderform" method="POST">
<div id="box4hl1" class="clearfix" style="width:70%;">
<div class="listing">
<div class="add topp" onclick="$('.binding').slideToggle();$('.sizes').hide();$('.option').hide();$('.covers').hide();$('.inside-pages').hide();$('.num_copies').hide();$('.extra').hide();$('.personal').hide();">
Choose Binding ✔ <span class="roundd bindinghead">?</span></div>
<div class="add binding">
<div class="main-label">
Binding <!-- <em class="red-star">*</em> --></div>
<div class="selectCover">
<div class="input-parent">
<ul class="binding_list">
<li>
<span class="frame bclick"><img alt="" class="binding_radio" src="http://order.sureprintanddesign.ca/order/statics/images/perfect-bound.png" width="120" /> </span> <input <?php if ($btype=="perfect"){?>checked="checked"<?php }elseif ($btype==""){?>checked="checked"<?php }?> class="binding_radio bclick required ng-valid ng-dirty ng-touched ng-valid-parse method" name="data[BindingType]" type="radio" value="perfect" />
<div class="fig-text">
<label><strong>Perfect Binding</strong></label></div>
</li>
<li>
<span class="frame bclick"><img alt="" class="binding_radio" src="http://order.sureprintanddesign.ca/order/statics/images/hardcover-casebound.png" width="120" /></span> <input <?php if ($btype=="hardcover"){?>checked="checked"<?php }?> class="binding_radio bclick required ng-valid ng-dirty ng-touched method" name="data[BindingType]" type="radio" value="hardcover" />
<div class="fig-text">
<label><strong>Casebound Smyth Sewn</strong></label></div>
</li>
<li>
<span class="frame bclick"><img alt="" class="binding_radio" src="http://order.sureprintanddesign.ca/order/statics/images/saddle-stitching.png" width="120" /> </span> <input <?php if ($btype=="saddle"){?>checked="checked"<?php }?> class="binding_radio bclick required ng-pristine ng-untouched ng-valid method" name="data[BindingType]" type="radio" value="saddle" />
<div class="fig-text">
<label><strong>Saddle Stitch</strong></label></div>
</li>
<li>
<span class="frame bclick"><img alt="" class="binding_radio" src="http://order.sureprintanddesign.ca/order/statics/images/coil-bound.png" width="120" /> </span> <input <?php if ($btype=="coil"){?>checked="checked"<?php }?> class="binding_radio bclick required ng-pristine ng-untouched ng-valid method" name="data[BindingType]" type="radio" value="coil" />
<div class="fig-text">
<label><strong>Coil Bound</strong></label></div>
</li>
<li>
<span class="frame bclick"><img alt="" class="binding_radio" src="http://order.sureprintanddesign.ca/order/statics/images/wire-o-bound.png" width="120" /></span> <input <?php if ($btype=="wire"){?>checked="checked"<?php }?> class="binding_radio bclick required ng-pristine ng-untouched ng-valid method" name="data[BindingType]" type="radio" value="wire" />
<div class="fig-text">
<label><strong>Wire-O Bound</strong></label></div>
</li>
<li>
<span class="frame bclick">
<img alt="" class="binding_radio" src="<?php echo $base_url;?>/images/img/boardbook.png" width="120" style="height: 66px;"/></span>
<input class="binding_radio bclick required ng-pristine ng-untouched ng-valid method" name="data[BindingType]" type="radio" value="board" />
<div class="fig-text">
<label><strong>Board Book</strong></label></div>
</li>
<li>
<span class="frame bclick">
<img alt="" class="binding_radio" src="<?php echo $base_url;?>/images/img/Flexibound.png" width="120" style="height: 66px;"/></span>
<input class="binding_radio bclick required ng-pristine ng-untouched ng-valid method" name="data[BindingType]" type="radio" value="flexi" />
<div class="fig-text">
<label><strong>Flexi Bound</strong></label></div>
</li>
<li>
<span class="frame bclick"><img alt="" class="binding_radio" src="http://order.sureprintanddesign.ca/order/statics/images/wire-o-bound.png" width="120" /></span> <input <?php if ($btype=="other"){?>checked="checked"<?php }?> class="binding_radio bclick required ng-pristine ng-untouched ng-valid method" name="data[BindingType]" type="radio" value="other" />
<div class="fig-text">
<label><strong>Other</strong></label></div>
</li>
</ul>
</div>
<div class="input-parent">
<ul style="clear:all;">
<li style="text-align: right;">
<button class="btn btn-info" onclick="return get_datat();" type="button">Next</button></li>
</ul>
</div></div>
</div>
<div class="custom_data">
<div class="add sizeshead topp">
Book Size</div>
<div class="add covershead topp">
Book Cover</div>
<div class="add inside-pageshead topp">
Inside Pages</div>
<div class="add num_copieshead topp">
Number Of Copies</div>
<div class="add extrahead topp">
Extras</div>
<div class="add personalhead topp">
Personal Details</div>
</div>
</div>
</div>
</form>
<div class="custom_side_bar_main" style="width:28%;">
<div class="listing">
<div class="add topp">
Result
</div>
<div class="add printingprice"></div>
<form action="<?php echo $base_url; ?>" method="get">
<div id="show_price" style="display: none;" class="add">
<input type="hidden" value="content/order-details" name="q"/>
<input type="hidden" value="" name="act_id" id="act_id"/>
<div class="well well-sm">
<h3> Shipping/Pickup Setting </h3>
<div>
<label>Options</label>
<select class="form-control" name="shippingOpt" id="shippingOpt" required onchange="if(this.value=='pickup'){$('#shipping_detail').hide();$('#price-submit').show();}else{$('#shipping_detail').show();$('#price-submit').hide();}">
<option value="delivery" selected="">Shipping to address</option>
<option value="pickup">Pickup at store</option>
</select>
</div>
<div id="shipping_detail">
<br/>
<div>
<label>Country</label>
<select class="form-control" name="shippingCountry" id="shippingCountry" >
<option value="">Choose one</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
</select>
</div>
<br/>
<div>
<label>Postal Code</label>
<span class="inlineBlock">
<input type="text" class="form-control" style="height:30px; width:200px;" name="shippingPostCode" id="shippingPostCode" placeholder="Postal Code">
</span>
</div>
<br/>
<button type="button" id="getShippingFee" class="btn btn-xs btn-info" style="width: 200px;"><i class="fa fa-car"></i> Check Shipping Fee</button>
</div>
</div>
<div class="well well-sm">
<h3> Shipping Options </h3>
<p id="re-shipping" style="font-size: 11px;"></p>
</div>
<p><button class="btn btn-info" id="price-submit" type="submit" style="width: 200px;display: none;"> <i class="fa fa-shopping-cart"></i> Place Order</button></p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
