body
{
    font-family:Helvetica,Arial,sans-serif;
}

/*** Site Structure ***/

#Header
{
    height:100%;
    overflow:auto;
}

#Footer
{
    font-weight:normal;
    text-align:center;
    padding:10px;
}

.HomeDepartments a
{
    text-decoration:none;
}

/*** Header Elements ***/

.Logo
{
    width:100%;
    text-align:center;
    padding-top:10px;
}

.Logo img
{
    max-width:100%;
    height:inherit !important;
}

.SearchBox input.Text
{
    width:76%;
    float:left;
    position:relative;
    z-index:9
}

.SearchBox .SearchButton
{
    float:right;
    width:20%;
        position:relative;
    z-index:12

}

.SearchBox .SearchButton input.Button
{
}



/*** Home Page Elements ***/

.HomeDepartments
{
    text-align:center;
    border-bottom:1px solid #CCCCCC;
}

.HomeDepartment
{
    border-top:1px solid #CCCCCC;
}


.HomeDepartmentImage
{
    padding:2px 0;
}

.HomeDepartmentImage img
{
    max-width:98% !important;
}

.HomeDepartment h2
{
    margin:0;
    padding:5px 0;
}

.HomeDepartment a
{
    font-size:12px;
}


/*** Page Content ***/

#PrimaryContent h1
{
    margin-top:0;
    font-size:18px;
}

/** More Menu **/

.MoreMenu
{
    display:none;
    width:100%;
    z-index:9;
    margin-bottom:12px;
}

.MoreMenu ul
{
    width:100%;
    margin:0 !important;
}


/*** Gallery Elements for Home and Product Page ***/

.ImageGallery 
{
  overflow: hidden;
  position: relative;
  max-width:100%;
  margin-bottom:10px;
}

.SliderContainer 
{
  overflow: hidden;
  position: relative;
  max-height:100%;
}

.SliderContainer > div 
{
  float:left;
  width:100%;
  max-height:100%;
  position: relative;
  text-align:center;
  
/** Align images Vertically **/
  
/* Internet Explorer 10 */
    display:-ms-flexbox;
    -ms-flex-pack:center;
    -ms-flex-align:center;

/* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;

/* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;

/* W3C */
    display:box;
    box-pack:center;
    box-align:center;
}

.SliderContainer > div img 
{
    max-width:100%;
    max-height:100%;
    width:auto !important;
    height:auto !important;
}

.GalleryPosition
{
    position:absolute;
    font-size:0;
    text-align:center;
    bottom:10px;
    width:100%;
}

.GalleryPosition a
{
    display:inline-block;
    background:#111111;
    height:8px;
    width:8px;
    margin:4px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.GalleryPosition a.On
{
    background:#7CC4E7;
}

/** Resolves issue thumb slider glitching on gallery **/
.ui-page 
{
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	#OrderList table.OrderListView, #OrderList table.OrderListView thead, #OrderList table.OrderListView tbody, #OrderList table.OrderListView th, #OrderList table.OrderListView td, #OrderList table.OrderListView tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	#OrderList table.OrderListView thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	
	#OrderList table.OrderListView td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		padding-left: 50%; 
	}
	
	#OrderList table.OrderListView td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 3px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*Label the data
	*/
	#OrderList table.OrderListView td:nth-of-type(1):before { content: ""; }
	#OrderList table.OrderListView td:nth-of-type(2):before { content: "Order No."; font-weight:bold; }
	#OrderList table.OrderListView td:nth-of-type(3):before { content: "Order Ref."; font-weight:bold; }
	#OrderList table.OrderListView td:nth-of-type(4):before { content: "Total"; font-weight:bold; }
	#OrderList table.OrderListView td:nth-of-type(5):before { content: "Details"; font-weight:bold; }
	#OrderList table.OrderListView td:nth-of-type(6):before { content: ""; }


#OrderList table.OrderListView tbody tr 
{
    margin-top:20px;
}

#OrderList table.OrderListView tbody tr td:first-child 
{
    font-weight:bold;
}

#OrderList table.OrderListView td 
{
    min-height:20px;
}

/* Force table to not be like tables anymore */
	table.HistoryView, table.HistoryView thead, table.HistoryView tbody, table.HistoryView th, table.HistoryView td, table.HistoryView tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	table.HistoryView thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	
	table.HistoryView td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		padding-left: 50%; 
	}
	
	table.HistoryView td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 3px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*Label the data
	*/
	table.HistoryView td:nth-of-type(1):before { content: "Description"; font-weight:bold; }
	table.HistoryView td:nth-of-type(2):before { content: "Stock Code"; font-weight:bold; }
	table.HistoryView td:nth-of-type(3):before { content: "Price"; font-weight:bold; }
	table.HistoryView td:nth-of-type(4):before { content: "Quantity"; font-weight:bold; }
	table.HistoryView td:nth-of-type(5):before { content: ""; display:none; }
	table.HistoryView td:nth-of-type(6):before { content: "Sub Total"; font-weight:bold; }
	td.Total:before { content: "" !important;}

/*table.HistoryView tbody tr 
{
    margin-top:20px;
}*/

/*table.HistoryView tbody tr td:first-child 
{
    font-weight:bold;
}*/

/*table.HistoryView td 
{
    min-height:20px;
}
*/

td.OrderRepeatButtons, td.Total 
{
    padding-left:0px !important;
    width:100%;
    }
td.Total:first-child {font-weight:bold;}


	/* Force table to not be like tables anymore */
	#DeptBg table.OrderListView, #DeptBg table.OrderListView thead, #DeptBg table.OrderListView tbody, #DeptBg table.OrderListView th, #DeptBg table.OrderListView td, #DeptBg table.OrderListView tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	#DeptBg table.OrderListView thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	
	#DeptBg table.OrderListView td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		padding-left: 50%; 
	}
	
	#DeptBg table.OrderListView td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 3px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*Label the data
	*/
	#DeptBg table.OrderListView td:nth-of-type(1):before { content: ""; }
	#DeptBg table.OrderListView td:nth-of-type(2):before { content: "Order No."; font-weight:bold; }
	#DeptBg table.OrderListView td:nth-of-type(3):before { content: "Order Ref."; font-weight:bold; }
	#DeptBg table.OrderListView td:nth-of-type(4):before { content: "Total"; font-weight:bold; }
	#DeptBg table.OrderListView td:nth-of-type(5):before { content: "Details"; font-weight:bold; }
	#DeptBg table.OrderListView td:nth-of-type(6):before { content: ""; }


#DeptBg table.OrderListView tbody tr 
{
    margin-top:20px;
}

#DeptBg table.OrderListView tbody tr td:first-child 
{
    font-weight:bold;
}

#DeptBg table.OrderListView td 
{
    min-height:20px;
}

}