<patTemplate:tmpl name="pageoutput" unusedvars="strip">
<style>
@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
    width: 100%;
    *width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */    
@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}
</style>

<h2 class="page-header">{_JOMRES_OVERALL_ROOMS_BOOKED}</h2>

<div class="container-fluid">
	<div class="row seven-cols">
		<patTemplate:tmpl name="rows" unusedvars="strip">
		<div class="col-md-1">
			<h5 class="text-center">{DATE_OF_MONTH} {MONTH_NAME}</h5>
			<div class="progress-circle {OVER50} p{PERCENTAGE}">
				<span>{PERCENTAGE}%</span>
				<div class="left-half-clipper">
					<div class="first50-bar"></div>
					<div class="value-bar"></div>
				</div>
			</div>
		</div>
		</patTemplate:tmpl>
	</div>
</div>

</patTemplate:tmpl>