responsive-767px-max-bootstrap2.less

//
// Responsive: Landscape phone to desktop/tablet
// --------------------------------------------------

// For sreens that are on the money with the page width, lets add some space
@media (max-width: @oscarpagewidth) {
	.header {
	  .page_inner {
	    padding-left:20px;
	    padding-right:20px;
	  }
	}
}

@media (max-width: 767px) {

	// Remove padding here, we are setting in on page inner
	body {
	padding: 0;
	}

	// Utilities
	.align-right,
	.align-center {
		text-align: left;
	}

	// Make the brand a little more significant
	.header h1 {
		text-align: center;
	}
	// Padding for the static navbars
	.navbar-static-top .navbar-inner,
	.checkoutNav ul {
		padding:5px;
	}
	.navbar-static-top {
		margin-left:0;
		margin-right:0;
	}
	// Make the navbar collase button the same height as the other navbar buttons
	.btn-navbar > span {
		display:inline-block;
	}
	.navbar.primary {
		.btn-navbar {
			// Lets move the browse button to the left, with basket total on right
			&.btn-nav-collapse {
				float:left;
			}
		}
		.nav {
			margin-top:10px;
		}
		input[type="search"] {
			width:100px;
		}
	}

	// The carousel JS isn't initialised for mobile, great, but we should make the products visible
	.es-carousel-wrapper,
	.es-carousel {
		border:none;
		padding:0;
	}
	.es-carousel {
		ul {
			display:block;
			margin-left: 0;
			margin-right: 0;
			li {
				float:none;
				height:auto;
				display:block;
			}
		}
	}

	// Product lists need to remove some shackles
	.product_pod,
	.product_pod .availability,
	.availability,
	.rg-image {
		text-align: left;
	}
	.image_container img,
	.product_pod .star {
		margin-left:0;
		margin-right:0;
	}
	.product_pod {
		position: relative;
		height: auto;
		.product_price {
			position: static;
			width: auto;
			min-height: 0;
		}
	}

	// Basket items
	.basket-items {
	  img {
	    margin: 0 0 @baseLineHeight / 2;
	  }
	}

	// Checkout navigation
	.nav-checkout {
		// For mobile lets only show the active and the previous link in the checkout
		.previous span,
		.visited,
		.disabled {
			display:none;
		}
		// Center the active state
		.active {
			position:absolute;
			top:0;
			left:0;
		}
		// Previous needs to be above active to be clickable
		.previous {
			position:relative;
			z-index: 1;
		}
	}

}

// Override for Bootstrap 2.3.1/2.3.2
// Fix disappearing menu in mobile Android Chrome
// https://github.com/twbs/bootstrap/issues/11145
@media (max-width: 480px) {
	.nav-collapse {
		-webkit-transform: none;
	}
}