<!DOCTYPE html>
      <html ng-app="myapp">
        <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <link rel="image_src" href="{$commonMetaImage|default:''}" />
          <title>Style Guide</title>
          {include file='CommonStyles.tpl'}
            <style>
                .post-cmt-listing h3 {
                    padding: 20px 25px 20px;
                    border-bottom: 1px solid #e6e6e6;
                    font-size: 16px;
                    font-weight: 700;
                    margin: 0;
                }
                .post-cmt-listing .forms {
                    max-width: 630px;
                    width: 100%;
                    padding: 10px 25px;
                }
                .post-cmt-listing .forms > li {
                    padding-bottom: 20px;
                }
                .bx-contr.active{
                    border: #25a249 solid 1px !important;
                }
                .bx-contr.active .hoverbx a{     
                    opacity: 1 !important;
                    -webkit-transform: translate(0, 0) !important;
                    -ms-transform: translate(0, 0) !important;
                    -o-transform: translate(0, 0) !important;
                    transform: translate(0, 0) !important;
                }
            </style>
        </head>
        <body ng-controller="SearchCtrl">
          
          {*<!------------------------------------ Begin : Outer Pane ------------------------------------->*}
          <div id="main">
            {*<!------------------------------ Begin : Header Pane----------------------------------------> *}
            <header>
   <div class="header-bottom text-center">
      <div class="container padding-vertical clearfix pos-rel">
           {if $commonCompanyLogo} 
                  {html->anchor href="/" title="{$commonSiteName}" class="img-responsive" content="<img src='{$commonCompanyLogo}' border='0' alt='Logo' />"}
                  {else}
                  {html->anchor href="/" title="{$commonSiteName}"  caption="{$commonSiteName}"}
                  {/if} 
          
         </div>
       
      </div>
   </div>
  
</header>
            {*<!------------------------------- End : Header ------------------------------------------->*}
            <div id="content-wrapper" ng-show="!query" >
              <div class="container">
                <div class="light-bg padding">
                    <h6 class="text-center margin-bottom text-uppercase" style="text-decoration: underline;">Heading Fonts </h6>
                    <h1>heading 1 : font-size:30px, font-weight: semibold</h1>
                    <div class="h1style margin-bottom">.h1style : Class for  heading 1 style</div>
                    <h2>heading 2 : font-size:22px, font-weight: semibold</h2> 
                    <div class="h2style margin-bottom">.h2style : Class for  heading 2 style</div>
                    <h3>heading 3 : font-size:20px, font-weight: semibold</h3>
                    <div class="h3style margin-bottom">.h3style : Class for  heading 3 style</div>
                    <h4>heading 4 : font-size:18px, font-weight: normal</h4>
                    <div class="h4style margin-bottom">.h4style : Class for  heading 4 style</div>
                    <h5>heading 5 : font-size:16px, font-weight: light</h5>
                    <div class="h5style margin-bottom">.h5style : Class for  heading 5 style</div>
                    <h6>heading 6 : font-size:14px, font-weight: semibold</h6>
                    <div class="h6style margin-bottom">.h6style : Class for  heading 6 style</div>
                </div>
                  <div class=" padding margin-top">
                    <h6 class="text-center margin-bottom text-uppercase" style="text-decoration: underline;">Common Classes </h6>
                      <div style="font-size: 15px;">
                        .rmv-padding : Class for remove padding<br>
                        .rmv-padding-vertical : Class for remove vertical padding<br>
                        .rmv-padding-horizontal : Class for remove horizontal padding<br>
                        .rmv-padding-left : Class for remove left padding<br>
                        .rmv-padding-right : Class for remove right padding<br>
                        .rmv-padding-top : Class for remove top padding<br>
                        .rmv-padding-bottom : Class for remove bottom padding<br>
                        .padding  : Class for padding 10px<br>
                        .padding-vertical : Class for vertical padding 10px<br>
                        .padding-horizontal : Class for horizontal padding 10px<br>
                        .padding-left : Class for left padding 10px<br>
                        .padding-right : Class for right padding 10px<br>
                        .padding-top : Class for top padding 10px<br>
                        .padding-bottom : Class for bottom padding 10px<br>
                        .padding-vertical-half : Class for vertical padding 5px<br>
                        .padding-top-half : Class for top padding 5px<br>
                        .padding-bottom-half : Class for bottom padding 5px<br>
                        .margin-vertical : Class for vertical margin 15px<br>
                        .margin-horizontal : Class for horizontal margin 15px<br>
                        .margin-left : Class for left margin 15px<br>
                        .margin-right : Class for right margin 15px<br>
                        .margin-top : Class for top margin 15px<br>
                        .margin-bottom : Class for bottom margin 15px<br>
                        .dark : Class for font color black <br> 
                        <span class="fade-text">.fade-text : Class for font color fade</span> <br> 
                        <span class="dark-bg light">.dark-bg : Class for background color black </span><br>
                        .light : Class for font color white<br>  
                        <span class="light-bg">.light-bg : Class for background color white</span> <br> 
                        <span class="bpfc">.bpfc : Class for font color brand-parimary </span><br> 
                        <span class="font-bold">.font-bold : Class for font weight bold</span> <br> 
                        <span class="font-semibold">.font-semibold : Class for font weight semibold</span> <br> 
                      </div>
                  </div> 
                  <div class="light-bg padding margin-top">
                     <h6 class="text-center margin-bottom text-uppercase" style="text-decoration: underline;">Buttons</h6>
                      <div>
                        <a class="btn btn-primary">Button Primary</a>
                        <a class="btn btn-default">Button Default</a>
                        <a class="btn btn-success">Button Success</a>
                          
                        <div class = "input-group" style="width:400px; float:right;">
                         <input type = "text" class = "form-control" placeholder="Text box style">
                         <span class = "input-group-addon btn-primary" style="background-color:#25a249; border-color: #25a249 ; color: #fff; "> Subscribe</span>
                      </div>
                      </div>
                  </div>
                  <div class="margin-vertical clearfix">
                      <h6 class="text-center margin-bottom text-uppercase" style="text-decoration: underline;">Tabs</h6>
                  <div class="sorting-pane ">
                    <div class="sort-left">
                    <div class="sortBuy">Sort By
                    </div>
                    <ul>
                      <li>
                        <a class="sortby">Popularity</a>  
                      </li>
                      <li>
                        <a class="sortby">Newly Listed</a>
                      </li>
                      <li>
                        <a class="sortby active">Price High to Low</a>
                      </li>
                      <li>
                        <a class="sortby">Price Low to High</a>
                      </li>
                      <li>
                         <a class="sortby">Discount</a>
                      </li>
                    </ul>
                  </div>
                  </div>
                      </div>
              
                    <div class=" padding">
                    <h6 class="text-center margin-bottom text-uppercase" style="text-decoration: underline;">Category</h6>
                        <div class="clearfix">
                        <div class="col-xs-2 left-content-block margin-bottom padding light-bg">
              
              <div class="leftlistBx category-browse padding">
                
                <div class="whiteBx">
                  <a class="refine-icon pull-right"></a>
                  <h5>Browse</h5>
                
                       <div class="collapse in " id="demo">
                      <div class="clearfix">
                  <div class="listMenu listMenuScroll clearfix">
                     
                    <ul>
			<li><a>Accessories</a></li>
			<li><a>Cooling</a></li>
			<li><a>Fitness and Sports</a></li>
			<li><a>Kids</a></li>
			<li><a>Furniture</a></li>
			<li><a>Watch</a></li>
			<li><a>Home Appliances</a></li>
			<li><a>E-Commerce</a></li>
			</ul>
                    </div>
                    <a class="btn btn-default btn-sm pull-right text-uppercase margin-top view-btn"> View More</a>
                           </div>
                    </div>
             
                </div>
              </div>
           <div class="leftlistBx refine-search padding-horizontal">
	<a data-toggle="collapse" data-target="#demo-refine" class="refine-icon pull-right"></a>
	<h4 class="margin-bottom font-semibold">Refine
	</h4>
	<div class="whiteBx clearfix collapse in" id="demo-refine">
	
		<a class="pull-right">Reset</a>
		<h6>
		<span class="openListing"></span>Brands					
		</h6>
		<div>
		<div class="listMenu listMenuScroll slip">
		<ul>
			<li class="li_brandIDs">
                <input type="checkbox" class="checkbox_brandIDs" />
                <label>Brand1</label>
			</li>
		</ul>						
		</div>	
		</div>
	<h6>
	<span class="openListing"></span>Price Range					
	</h6>
	<div class="">
	<div class="pricerange-bx">
			<!-- {form->textbox name="price-amount" disabled="disabled"} -->
			<div id="price-amount">₹ 0 - ₹ 26250.495</div>
        <p></p>
		<div id="price-range"></div>
		<br/>
	</div>
	</div>
	<h6>
	<span class="openListing spriteImg"></span>{$language.lblDiscount}						
	</h6>
	<div class="listMenu">
	<ul>
			<li>
                <input type="radio" class="searchDiscountRange" /><label>10% And Above</label>
                <input type="radio" class="searchDiscountRange" /><label>20% And Above</label>
                <input type="radio" class="searchDiscountRange" /><label>30% And Above</label>
                <input type="radio" class="searchDiscountRange" /><label>40% And Above</label>
                <input type="radio" class="searchDiscountRange" /><label>50% And Above</label>
			</li>						
	</ul>						
	</div>
    </div>
</div>
       
                    </div>
                        </div>
                      <div class="post-cmt-listing light-bg padding-top">
            <h6 class="text-center margin-bottom text-uppercase" style="text-decoration: underline;">Forms</h6>

                <h3>Write A Review</h3>
              
              <ul class="clearfix forms" >
                 <li class="clearfix">
                 <p class="col-xs-2">
                  <strong> Rating</strong>  <span class="mndty">* &nbsp;</span></p>
                
                  <div class="col-xs-10">

					<ul class="unit-rating">
                                            
                                            <li id="current-rating-temp" class="current-rating" style="width:{20 * $showRating}px;border:none;">{$showRating}/5</li>
                                     
                                          </ul>
                                          
                                         
                                           </div>
                </li>                

                <li class="clearfix">
                <p class="col-xs-2">
               <strong> Title<span class="mndty">* &nbsp;</span></strong></p>
                     <div class="col-xs-10"> 
                  <input type="text" class="form-control">
                    </div>
                 
                </li>                
                <li class="clearfix">
                <p class="col-xs-2">
                 Comments<span class="mndty">* &nbsp;</span></p>
                  <div class="col-xs-10"> 
                      <textarea rows="5" class="form-control"></textarea>
					</div>
                </li>
                 <li> 
               <div class="col-xs-10 col-xs-offset-2">
                 <a class="btn btn-primary">Submit</a></div>
                 </li>
                 
              </ul>

          </div>
                  <div class="light-bg padding margin-vertical">
                      <h6 class="text-center margin-bottom text-uppercase" style="text-decoration: underline;">Breadcrumb</h6>
                      <div style="background:#f1f1f1;" class="padding">
                    <div class="bredcrumb">
            <a href="#">Home</a>
 			 
					<span class="icon-arrow-right "></span> 
				<a href="#">Home Appliances</a>
										 
					<span class="icon-arrow-right "></span> 
                        <a href="#">Air Conditioners</a>
																
            <!-- Breadcrumbs END here -->
          </div>
                          </div>
                  </div>
                <div class=" padding ">
                    <h6 class="text-center margin-bottom text-uppercase" style="text-decoration: underline;">Product and Selection</h6>
                    <ul class="cateListing">
                        <li class="col-xs-4">
                 <div class="bx-contr">

                    <div class="imageBox"> 
                        <a><img class='lazy img-responsive' data-original='{$view_public_path}/uploads/catalog/product/custom/{$resProduct.productImage}' src='{$view_images}/loader-small.gif' alt='{$resProduct.productTitle}'></a>
                        <div class="view-section">
                            <div class="hoverbx"> <a href="#" class="text-uppercase"> View Details</a></div>
                        </div>
                    </div>
                     <div class="productTitle deatils clearfix">
                         <a href="#" class="slip">Wills Lifestyle Navy Cotton Rich...</a>
                         <div class="clearfix">
				<div class="pull-left"><strike>₹ 1000</strike> <span class="price">₹ 10</span> 
				                </div>
                                        <div class="offerPrice pull-left margin-left btn-primary">99<span>% off</span></div>
                                         </div>
                         <div class="Comparebx">
			
			<span class="addtoCompare iconappend2 slip">
				<input type="checkbox" class="compareIt" id="compare">  <label for="compare"> Compare</label>
			</span>
            </div>
                     </div>

                </div>
                            </li>
                        <li class="col-xs-4">
                 <div class="bx-contr active">

                    <div class="imageBox"> 
                        <a><img class='lazy img-responsive' data-original='{$view_public_path}/uploads/catalog/product/custom/{$resProduct.productImage}' src='{$view_images}/loader-small.gif' alt='{$resProduct.productTitle}'></a>
                        <div class="view-section">
                            <div class="hoverbx"> <a href="#" class="text-uppercase"> View Details</a></div>
                        </div>
                    </div>
                     <div class="productTitle deatils clearfix">
                         <a href="#" class="slip">Wills Lifestyle Navy Cotton Rich...</a>
                         <div class="clearfix">
				<div class="pull-left"><strike>₹ 1000</strike> <span class="price">₹ 10</span> 
				                </div>
                                        <div class="offerPrice pull-left margin-left btn-primary">99<span>% off</span></div>
                                         </div>
                         <div class="Comparebx">
			
			<span class="addtoCompare iconappend2 slip">
				<input type="checkbox" class="compareIt" id="compare">  <label for="compare"> Compare</label>
			</span>
            </div>
                     </div>

                </div>
                            </li>
                    </ul>
                  </div>
                  
                  </div>
                
              </div>
           
           
          </div>
          {*<!--------------------------- End : Outer Pane ----------------------------------------> *}
            <script src="{$common_frontend_js}/catalog.page.js"></script>
        </body>
      </html>
