/*
 * Responsive layout only.
 * Upload this one file to:
 * includes/templates/businessr_black/css/stylesheet_z_responsive.css
 * Zen Cart loads every style*.css file automatically, so no other file needs to change.
 * Desktop layout is left as it is. These rules apply only on smaller screens
 * and override the old fixed widths, including inline styles.
 */

 @media (max-width: 979px) {
	.container-fluid,
	.mainWrapper,
	#header_wrapper,
	#contentMainWrapper,
	.bottom-wrapper,
	.footer-links,
	#footer {
		width: auto !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	#firstTop,
	#thirdTop {
		width: auto !important;
		max-width: 100% !important;
		height: auto !important;
	}

	#top_nav,
	#tab_nav {
		height: auto;
	}

	#tab_nav li {
		float: none;
		display: inline-block;
		vertical-align: top;
	}

	.topper-menu {
		float: none !important;
		clear: both;
	}

	.topper-menu li {
		float: none;
		display: inline-block;
		margin: 4px 8px 4px 0;
	}

	.search-header,
	.search-header-input input,
	.td-search-header {
		width: auto !important;
		max-width: 100%;
	}

	.leftBoxContainer,
	.rightBoxContainer {
		width: auto !important;
		max-width: 100%;
		box-sizing: border-box;
	}

	img,
	iframe,
	video,
	embed,
	table {
		max-width: 100%;
	}

	.h-banners li {
		width: 33.3% !important;
	}

	.h-banners li img {
		width: 100% !important;
		height: auto;
	}
}

@media (max-width: 767px) {
	body {
		padding: 10px 8px 0;
	}

	#firstTop,
	#thirdTop,
	#firstTopSpan {
		float: none !important;
		display: block;
		width: 100% !important;
		height: auto !important;
		text-align: center !important;
	}

	#navColumnOne,
	#navColumnTwo,
	#login_logout_section,
	#top_nav,
	#tools_wrapper,
	.search-header,
	#nav-cat,
	.cart-header-wrapper,
	.topper-menu {
		display: none;
	}

	#columnCenter,
	.row-fluid #columnCenter,
	.row-fluid .span12,
	#contentMainWrapper {
		width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		display: block;
	}

	#top_nav_mobile {
		display: block;
		width: auto;
		margin: 0;
		border-top: 1px solid #222;
		border-bottom: 1px solid #222;
	}

	#tab_nav_mobile {
		height: 50px;
		width: auto;
		background: #111 url("../images/menu_bg.png") repeat-x left top;
	}

	#tab_nav_mobile li {
		float: left;
		width: 25%;
		height: 50px;
		padding: 0;
		margin: 0;
		text-align: center;
		background: url("../images/tm_menu_icons.png") no-repeat center 9px;
	}

	#tab_nav_mobile li a {
		display: block;
		width: 100%;
		height: auto;
		margin: 4px 4px;
	}

	#tab_nav_mobile li img {
		height: 40px;
		width: 80%;
	}

	#tab_nav_mobile li.tm-account {
		background-position: center 29% !important;
	}

	#tab_nav_mobile li.tm-cart {
		background-position: center 67% !important;
	}

	#tab_nav_mobile li.tm-search {
		background-position: center 102% !important;
	}

	.centerBoxContentsNew,
	.centerBoxContentsFeatured,
	.centerBoxContentsSpecials,
	.centerBoxContentsAlsoPurch,
	.specialsListBoxContents {
		width: 50% !important;
		box-sizing: border-box;
	}

	.listingProductImage,
	.home-banner,
	.flexslider,
	.carousel,
	.slides,
	#logo img {
		max-width: 100% !important;
		height: auto;
	}

	#logo {
		width: auto;
		max-width: 220px;
	}

	.footer-links,
	#siteinfoLegal,
	#siteinfoIP {
		float: none;
		width: auto !important;
		text-align: center;
	}

	.footer-links li {
		float: none;
	}

	.cart-dropdown-wrapper {
		width: 90% !important;
		margin: -1px 0 0;
		right: auto;
	}

	.left-side-info,
	.right-side-info {
		float: none !important;
		width: auto !important;
		margin: 0 !important;
	}

	#cartAdd {
		float: none;
	}
}

@media (max-width: 480px) {
	body {
		padding: 0;
	}

	.centerBoxContentsNew,
	.centerBoxContentsFeatured,
	.centerBoxContentsSpecials,
	.centerBoxContentsAlsoPurch,
	.specialsListBoxContents,
	.categoryListBoxContents,
	.additionalImages {
		width: 100% !important;
		height: auto !important;
	}

	#logo {
		max-width: 180px;
	}
}