<title>Invoice - Ace Admin</title>

<!-- ajax layout which only needs content area -->
<div class="row">
	<div class="col-xs-12">
		<!-- PAGE CONTENT BEGINS -->
		<div class="space-6"></div>

		<div class="row">
			<div class="col-sm-10 col-sm-offset-1">
				<!-- #section:pages/invoice -->
				<div class="widget-box transparent">
					<div class="widget-header widget-header-large">
						<h3 class="widget-title grey lighter">
							<i class="ace-icon fa fa-leaf green"></i>
							Customer Invoice
						</h3>

						<!-- #section:pages/invoice.info -->
						<div class="widget-toolbar no-border invoice-info">
							<span class="invoice-info-label">Invoice:</span>
							<span class="red">#121212</span>

							<br />
							<span class="invoice-info-label">Date:</span>
							<span class="blue">04/04/2014</span>
						</div>

						<div class="widget-toolbar hidden-480">
							<a href="#">
								<i class="ace-icon fa fa-print"></i>
							</a>
						</div>

						<!-- /section:pages/invoice.info -->
					</div>

					<div class="widget-body">
						<div class="widget-main padding-24">
							<div class="row">
								<div class="col-sm-6">
									<div class="row">
										<div class="col-xs-11 label label-lg label-info arrowed-in arrowed-right">
											<b>Company Info</b>
										</div>
									</div>

									<div>
										<ul class="list-unstyled spaced">
											<li>
												<i class="ace-icon fa fa-caret-right blue"></i>Street, City
											</li>

											<li>
												<i class="ace-icon fa fa-caret-right blue"></i>Zip Code
											</li>

											<li>
												<i class="ace-icon fa fa-caret-right blue"></i>State, Country
											</li>

											<li>
												<i class="ace-icon fa fa-caret-right blue"></i>
Phone:
												<b class="red">111-111-111</b>
											</li>

											<li class="divider"></li>

											<li>
												<i class="ace-icon fa fa-caret-right blue"></i>
												Paymant Info
											</li>
										</ul>
									</div>
								</div><!-- /.col -->

								<div class="col-sm-6">
									<div class="row">
										<div class="col-xs-11 label label-lg label-success arrowed-in arrowed-right">
											<b>Customer Info</b>
										</div>
									</div>

									<div>
										<ul class="list-unstyled  spaced">
											<li>
												<i class="ace-icon fa fa-caret-right green"></i>Street, City
											</li>

											<li>
												<i class="ace-icon fa fa-caret-right green"></i>Zip Code
											</li>

											<li>
												<i class="ace-icon fa fa-caret-right green"></i>State, Country
											</li>

											<li class="divider"></li>

											<li>
												<i class="ace-icon fa fa-caret-right green"></i>
												Contact Info
											</li>
										</ul>
									</div>
								</div><!-- /.col -->
							</div><!-- /.row -->

							<div class="space"></div>

							<div>
								<table class="table table-striped table-bordered">
									<thead>
										<tr>
											<th class="center">#</th>
											<th>Product</th>
											<th class="hidden-xs">Description</th>
											<th class="hidden-480">Discount</th>
											<th>Total</th>
										</tr>
									</thead>

									<tbody>
										<tr>
											<td class="center">1</td>

											<td>
												<a href="#">google.com</a>
											</td>
											<td class="hidden-xs">
												1 year domain registration
											</td>
											<td class="hidden-480">
												---
											</td>
											<td>$10</td>
										</tr>

										<tr>
											<td class="center">2</td>

											<td>
												<a href="#">yahoo.com</a>
											</td>
											<td class="hidden-xs">
												5 year domain registration
											</td>
											<td class="hidden-480">
												5%
											</td>
											<td>$45</td>
										</tr>

										<tr>
											<td class="center">3</td>
											<td>Hosting</td>
											<td class="hidden-xs">
												1 year basic hosting
											</td>
											<td class="hidden-480">
												10%
											</td>
											<td>$90</td>
										</tr>

										<tr>
											<td class="center">4</td>
											<td>Design</td>
											<td class="hidden-xs">
												Theme customization
											</td>
											<td class="hidden-480">
												50%
											</td>
											<td>$250</td>
										</tr>
									</tbody>
								</table>
							</div>

							<div class="hr hr8 hr-double hr-dotted"></div>

							<div class="row">
								<div class="col-sm-5 pull-right">
									<h4 class="pull-right">
										Total amount :
										<span class="red">$395</span>
									</h4>
								</div>
								<div class="col-sm-7 pull-left"> Extra Information </div>
							</div>

							<div class="space-6"></div>
							<div class="well">
								Thank you for choosing Ace Company products.
   				We believe you will be satisfied by our services.
							</div>
						</div>
					</div>
				</div>

				<!-- /section:pages/invoice -->
			</div>
		</div>

		<!-- PAGE CONTENT ENDS -->
	</div><!-- /.col -->
</div><!-- /.row -->

<!-- page specific plugin scripts -->
<script type="text/javascript">
	var scripts = [null, null]
	$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
	  //inline scripts related to this page
	});
</script>