/* RESPONSIVE STYLES */



/* -----------------------------------------------------------------------------------------------*
*  BOTH DESKTOP STYLES
*  Uses: all desktop views
------------------------------------------------------------------------------------------------- */
@media (min-width: 992px) {

	/* Main Menu - sub menu overrides */
	.mainMenu .dropdown-menu > li > a {
		background-color:#fff !important;
		color:#363636 !important;
		text-transform: capitalize;
	}
	.mainMenu .dropdown-menu > li > a:hover {
		background-color:#eee !important;
		color:#363636 !important;
	}
	.mainMenu .dropdown-menu > li.active > a {
		background-color:#eee !important;
		color:#363636 !important;
	}
	/* End Main Menu - sub menu overrides */

	/* Footer menu spacing*/
	#Footer .nav > li > a {
		padding: 4px;
	}
	/* End Footer menu spacing*/
	
	#productDetailInfo {
		min-height: 400px;
	}

}
/* -------------------------------------------------------------------------------------------END */




/* -----------------------------------------------------------------------------------------------*
*  DESKTOP STYLE 1170PX WIDE
*  Uses: Wide screen PCs
------------------------------------------------------------------------------------------------- */
@media (min-width: 1200px) {

	/* Header Standard */
	#header-standard {
		height:150px;
	}
	/* End Header Standard */

	/* Header Logo */
	#header-logo {
		margin-left: 15px;
		margin-right: 15px;
	}
	/* End Header Logo */


	/* Product images */
	
	/*.galleryImage {
		width: 250px;
		height: 250px;
	}
	*/
	#Addons .galleryImage {
		width: 177px;
		height: 177px;
	}
	.productListImage {
		width: 200px;
		height: 200px;
	}
	.featureImage {
		width: 190px;
		height: 190px;
	}
	/* End Product images */

}
/* -------------------------------------------------------------------------------------------END */




/* -----------------------------------------------------------------------------------------------*
*  DESKTOP STYLE 960PX WIDE
*  Uses: Desktop PCs / ipad landscape - Non Wide Screen up to 1200px
------------------------------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {

	/* Header Standard */
	#header-standard {
		height:150px;
	}
	/* End Header Standard */

	/* Header Logo */
	#header-logo {
		margin-left: 15px;
		margin-right: 15px;
	}
	/* End Header Logo */
	
	#Banner .carousel-inner {
		height: 188px;
	}

	.brand-dropdown{
		max-width:225px;
	}

	/* Product images */
	.galleryImage {
		width: 200px;
		height: 200px;
	}
	.productListImage {
		width: 162px;
		height: 162px;
	}
	.featureImage {
		width: 210px;
		height: 210px;
	}
	/* End Product images */
	
	.blogThumb img {
		width: 320px;
		height: 180px;
	}

}
/* -------------------------------------------------------------------------------------------END */




/* -----------------------------------------------------------------------------------------------*
*  TABLET AND MOBILE STYLES
*  Uses: all mobile phones and tablet views
------------------------------------------------------------------------------------------------- */
@media (max-width: 991px) {

	/* Mobile Header and Menu Style Resets */
	#loginstrip-mobile { background-color: #fff; border-bottom: none; height: 55px; }
	#mobile-headerimage, #searchholder_phone {   
		background-color: #FFFFFF; /* resets background colour to white */
		border-bottom: 1px solid #CCC;
	}
	#mobile-headerimage {   
		padding: 5px 0;
		text-align: center;
		width: 100%;
	}
	/* End Mobile Header and Menu Style Resets */

}
/* -------------------------------------------------------------------------------------------END */




/* -----------------------------------------------------------------------------------------------*
*  TABLET STYLE 742PX WIDE
*  Uses: most tablets landscape and ipad portrait
------------------------------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {

	/* Header Standard */
	#header-standard {
		height:150px; /* sets the height for the header */
	}
	/* End Header Standard */

	/* Header FullWidth */
	#header-fullwidth .headerimage-fullwidth {
		height: 400px; 
	}

	/* End Header FullWidth */

	/* Header Logo */
	#header-logo h3#companySlogan {
		text-align: center;
	}
	#FullWidth-Navigation .mainMenu a {
		min-width: 300px;
		text-align: right;
	}
	/* End Header Logo */

	#Banner {
		margin: 15px 0;
	}
	
	#Banner .carousel-inner {
		height: 181px;
	}
	
	#fullCart {
		border: none;
		padding: 10px 0;
	}

	/* Admin Nav */
	#MobileNavigation {
		margin-bottom: 10px;
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
	}
	.adminMenu {
		margin: -20px -15px 0 -15px; /* pulls admin menu to edges of tablet screen */
		background-color: #FFF !important;
		border: none;
	}
	.adminMenu .navbar-collapse, .adminMenu .navbar-form {
		border: none; /* remove border at top of menu */
	}
	/* add borders to menu items for mobile view */
	.adminMenu li {
		border-bottom: 1px dotted #CCCCCC;
		line-height: 22px;
	}
	.adminMenu li li, .adminMenu li li li  {
		border-bottom: none;
		line-height: 22px;
	}
	/* End Admin Nav */


	/* Product images */
	.galleryImage {
		width: 207px;
		height: 207px;
	}
	.productListImage {
		width: 226px;
		height: 226px;
	}
	.featureImage {
		width: 216px;
		height: 216px;
	}
	/* End Product images */
	
	#productDetailInfo {
		min-height: 400px;
	}
	
	.blogThumb img {
		width: 330px;
		height: 186px;
	}

}
/* -------------------------------------------------------------------------------------------END */




/* -----------------------------------------------------------------------------------------------*
*  MOBILE STYLES SINGLE COLUMN UP TO 767PX WIDE
*  Uses: all mobile phones and some tablet portrait
*  480PX wide mobile style uses these styles as well unless explicitly specified own styles
------------------------------------------------------------------------------------------------- */
@media (max-width: 767px) {

	/* Main Container */
	.container {
		border: none !important; /* removes border on mobile views */
	}
	/* End Main Container */

	#toTop {
		display: none !important;
	}
	
	/* Pagination */
	.pagerWrapper {
		float: none !important;
		text-align: center;
		width: 100%;
	}
	/* End Pagination */

	/* Hide Breadcrumbs */
	.breadcrumb {
		display: none;
	}
	/* End Hide Breadcrumbs */

	/* Cart Summary */
	.cartsummary_controls, .savecart_controls {
		width: 50%;
	}
	.cartsummary_controls div, .savecart_controls div {
		width: 100%;
		max-width: 250px;
	}
	.mobile_buttonsnosavedcart {
		float: none !important;
		margin: auto;
	}
	#fullCart {
		border: none;
		padding: 10px 0;
	}
	#ajaxFullCart {
		margin: 0 -15px;
		padding: 0 15px;
		border-bottom: 1px solid #ccc;
	}
	/* End Cart Summary */

	/* Admin Nav */
	.adminMenu {
		margin: -10px -15px 0 -15px; /* pulls admin menu to edges of mobile screen */
		background-color: #FFF !important;
		border: none;
	}
	.adminMenu .navbar-collapse, .adminMenu .navbar-form {
		border: none; /* remove border at top of menu */
	}
	/* add borders to menu items for mobile view */
	.adminMenu li {
		border-bottom: 1px dotted #CCCCCC;
		line-height: 22px;
	}
	.adminMenu li li, .adminMenu li li li  {
		border-bottom: none;
		line-height: 22px;
	}
	/* End Admin Nav */

	/* Quick Order */
	.quickOrderImage {
		max-width: 100px;
		max-height: 100px;
		float: right;
	}
	/* End Quick Order */

	/* Product Listing */
	.listCart {
		margin:auto;
	}
	
	/* Product images */
	.featureImage {
		width: 140px;
		height: 140px;
	}
	.galleryImage {
		max-width: 220px;
		height: 220px;
	}
	/* End Product images */
	
	/* Product Detail */
	#productDetailInfo {
		width: 100%; /* fix issue if no description */
	}
	.productDetailImagesWrapper {
		width:100%;
		justify-content:center;
	}

	/*  Blog and News
	+---------------------------------------------------------------------------+
	                                                                           */
	.blogDate {
		top: 0;
		right: 30px;
		left: inherit;
	}
	.blogThumb img {
		width:100%;
		height:	auto;
		max-height: 300px;
	}
	.blogThumbMissing {
		padding-left: 5px !important;
		padding-top: 30px !important;
	}
	.blogContent img {
		width: 100%;
		height: inherit;
		padding: 10px;
	}
	
	#News h2 {
		text-align: center;
	}

	/* End Blog and News */

	/* Footer */
	/* RESET ALL COLOURS TO DEFAULT GREY BACKGROUND/WHITE TEXT FOR MOBILE */
	.footer, body { background-color: #3b3f47 !important; }						/* full width background*/
	.footer-main { background-color: #3b3f47 !important; }						/* quicklinks section */
	/* End Footer */
	
}
/* -------------------------------------------------------------------------------------------END */




/* -----------------------------------------------------------------------------------------------*
*  TINY MOBILE STYLES SINGLE COLUMN UP TO 480PX WIDE
*  Uses: mobile phones
*  Includes above styles as well unless explicitly specified in this style - min width 310px
------------------------------------------------------------------------------------------------- */
@media (max-width: 480px) {

	/* Product images */
	.featureImage {
		width: 248px;
		height: 248px;
	}
	/* End Product images */
	
	.AccountMenu-button {
		display: block;
		width: 150px;
		margin: auto;
		margin-bottom: 5px;
	}

}
/* -------------------------------------------------------------------------------------------END */




/* -----------------------------------------------------------------------------------------------*
*  REALLLY TINY MOBILE STYLES SINGLE COLUMN UP TO 350PX WIDE
*  Uses: mobile phones
*  Includes above styles as well unless explicitly specified in this style - min width 310px
------------------------------------------------------------------------------------------------- */
@media (max-width: 350px) {
	/* hides the arrows on the home page featured header in small mobile view */
	.btn-featured.prev1, .btn-featured.next1,.btn-featured.prev2, .btn-featured.next2 {    
		display:none !important;
	}
}
/* -------------------------------------------------------------------------------------------END */


/* -----------------------------------------------------------------------------------------------*
*  Printed Media
*  Uses: ctrl+p and print buttons
*  Effectively uses mobile sizing in addition to the rules below
------------------------------------------------------------------------------------------------- */

@media print{
	#Header, #Navigation, #MobileNavigation, #Login, #mobile-headerimage, .footer {
		display:none;
	}
	#Sidebar{
		display:none !important; /*bootstrap currently uses important for some visibility classes*/
	}

}