/* First some corrections to some old inline styles */
.contentPhotoHolder {
	float: right;
}

.contentPhotoHolder img {
	float: right;
	margin-left: 10px;
	margin-right: 10px;
}

#page_content img#mainimage {
	/* quaint filmstrip style image selector from the old site that survives on a few pages */
	width: auto;
	height: auto;
	max-width: 100%;
	margin: 0px 10px 10px;
}

#frmContactUs textarea {
	width: 675px;
}
.tablet-only {
	display: none !important;
}
.mobile-only {
	display:none !important;
}
.responsive-only {
	display:none !important;
}

/* New packaging layout styles for desktop and mobile */
.tiny-packaging.container_12 {
	max-width:768px;
}
/*.tiny-packaging.container_12 .package_image.grid_5 {
	max-width:300px;
}*/
.tbox {
	width: 900px !important;
	max-width: 95% !important;
}
.tbox .tinner#frameless {
	max-width: 95%;
}
.tbox .tinner .tcontent iframe {
	max-width: 99%;
	padding-left: 10px;
}
.tiny-packaging .packageImage {
	max-height: 300px;
	max-width: 300px;
}
.tiny-packaging .grid_12 {
	width:95%;
}
#creammask.tmask {
	/* Prevent unnecessary horizontal scroll occasionally caused 
		when there is some wide debug in the footer which tricks the tinybox auto resizing */
	max-width: 101%;
}
.search-description img {
	margin-bottom: 12px;
}

/* Mini grid style product listings on popular search results pages */
.madeira-wine #page_content #contentSearchResults>div>div,
.White-port #page_content #contentSearchResults>div>div {
	min-height: 322px;
}
.christmas-wine-gifts #page_content #contentSearchResults>div>div {
	min-height: 375px;
}
.LBV #page_content #contentSearchResults>div>div,
.Tawny-port #page_content #contentSearchResults>div>div {
	min-height: 335px;
}
#page_content #contentSearchResults>div>div>div:first-child {
	min-height: 211px !important;
	position:relative;
}
#page_content #contentSearchResults>div>div>div:first-child img {
	position:absolute;
	margin-left:auto;
	margin-right:auto;
	bottom: 0px;
	left:0;
	right:0;
	max-height:100%;
}
#page_content #contentSearchResults p.pagination {
	clear:left;
}

/* ------------------------------------------
	NAV TOGGLE STYLES
--------------------------------------------- */

@font-face {
	font-family: "responsivenav";
	src:url("/img/icons/responsivenav.eot");
	src:url("/img/icons/responsivenav.eot?#iefix") format("embedded-opentype"),
		url("/img/icons/responsivenav.ttf") format("truetype"),
		url("/img/icons/responsivenav.woff") format("woff"),
		url("/img/icons/responsivenav.svg#responsivenav") format("svg");
	font-weight: normal;
	font-style: normal;
}

.nav-toggle {
	position: fixed;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-decoration: none;
	text-indent: -999px;
	position: relative;
	overflow: hidden;
	width: 45px;
	height: 55px;
	float: right;
	left: 10px;
}

.nav-toggle:before {
	color: #660000; /* Edit this to change the icon color */
	font-family: "responsivenav", sans-serif;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	font-size: 28px;
	text-transform: none;
	position: absolute;
	content: "≡";
	text-indent: 0;
	text-align: center;
	line-height: 55px;
	speak: none;
	width: 100%;
	top: 0;
	left: 0px;
}

.nav-toggle.active::before {
	font-size: 24px;
	content:"x";
}

/* ------------------------------------------------------------------------------------------------------------------------- */
/* Everything wider than portrait tablet (landscape tablet, desktop) */
@media only screen and (min-width: 960px) {
	.desktop-hidden {
		display: none !important;
	}
}

/* ------------------------------------------------------------------------------------------------------------------------- */
/* Everything wider than mobile (portrait tablet, landscape tablet, desktop) */
@media only screen and (min-width: 768px) {
	/* prevent the burger menu appearing */
	.js .nav-collapse {
		position: relative;
	}
	.js .nav-collapse.closed {
		max-height: none;
	}
	.nav-toggle {
		display: none;
	}
	.order-alt #addressTable td:first-child {
		min-width:120px;
	}
}

/* ------------------------------------------------------------------------------------------------------------------------- */
/*
* 960 Responsive Grid
* Copyright 2012, Tyler Wolff
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/10/2012
*/

/* Tablet Portrait width to 960px */
@media only screen and (min-width: 768px) and (max-width: 959px) {

	.cfdebug {
		display: none;
	}
	.tablet-only {
		display: inherit !important;
	}
	.tablet-hidden {
		display: none !important;
	}
	.responsive-only {
		display: inherit !important;
	}

	body {
		min-width: 768px;
	}

	.container_12,
	.container_16 {
		width: 768px;
	}

	#top_bar .grid_2 {
		width:auto;
	}
	#social_icons {
	}
	
	#contact_icons {
		width:auto;
		text-align:center;
	}
	#top_bar .grid_5.push_5 {
		left:300px;
		width:auto;
	}
	
	/* hack for misleading class added by temp who was not familiar with 960gs! */
	.grid_20 {
		position: static;
		float:none;
		width:auto;
	}
	#basket.grid_8 .grid_20 { /* diff hack for above when CA enabled */
		float:right;
		position:relative;
	}
	#basket.grid_8 #accountNav {
		width:330px;
	}
	#information {
		width:auto;
	}
	
	/* At this slightly reduced width we can still use the old background sprite for the nav, 
		for now, by reducing the button widths and compensating the sprite position */
	.nav ul#navigation.container_12 li a {
		width:128px;
	}
	.nav ul#navigation.container_12 li a.about {
		background-position: -170px 0;
	}
	.nav ul#navigation.container_12 li a.news {
		background-position: -336px 0;
	}
	.nav ul#navigation.container_12 li a.links {
		background-position: -504px 0;
	}
	.nav ul#navigation.container_12 li a.contact {
		background-position: -670px 0;
	}
	.nav ul#navigation.container_12 li a.apply_now {
		background-position: -832px 0;
	}
	
	.nav ul#navigation.container_12 li a.about:hover {
		background-position: -170px -40px;
	}
	.nav ul#navigation.container_12 li a.news:hover {
		background-position: -336px -40px;
	}
	.nav ul#navigation.container_12 li a.links:hover {
		background-position: -504px -40px;
	}
	.nav ul#navigation.container_12 li a.contact:hover {
		background-position: -670px -40px;
	}
	.nav ul#navigation.container_12 li a.apply_now:hover {
		background-position: -832px -40px;
	}

	#page_content img {
		max-width: 100%;
		height: auto;
	}
	
	ul#navigation {
		width: 768px;
	}
	
	/* homepage hero image */
	img#header_image {
		width:100%;
		height:auto;
	}
	
	#quick_search {
		min-height: 0px;
		margin-top: 20px;
		margin-left: 10px;
	}
	
	#quick_search #search-content {
		min-height: 0px;
		margin-top: 5px;
	}
	#quick_search span.search_title {
		margin-bottom:5px;
	}
	
	
	#content_left {
		/* Temporary kludge because we have some old fixed width 185px content in the left sidebar, 
			but at this breakpoint the grid_3 is only 172px wide, 
			so we 'borrow' from the margin in order to avoid overlap with main content. */
		margin-left: 0px;
	}
	#container .grid_3.alpha.sidebar {
		margin-left: 7px;
		margin-right: 15px;
	}
	
	/* right sidebar on homepage */
	#content_right {
		width: auto;
		float: left;
	}
	#best_sellers {
		width: auto;
		min-height: 0px;
		background-image: none;
		border-radius: 10px;
		float:left;
	}
	#best_sellers .best_seller_item {
		float: left;
		min-height: 115px;
		margin-right: 10px;
	}
	#best_sellers p.more {
		float:left;
		padding-left:0px;
	}
	#best_sellers_bottom {
		display:none;
	}

	/* Contact Us */
	.contentPhotoHolder img {
		width:245px;
	}
	#frmContactUs textarea {
		max-width: 100%;
	}
	
	/* Search results */
	.product_image {
	}
	p.vintage-year-list a {
		padding:10px 3px;
		line-height:33px;
	}
	p.vintage-year-list br {
		display:none;
	}
	p.pagination a,
	p.pagination span {
		padding:10px 10px;
		line-height:33px;
	}
	#page_content p.pagination {
		margin-bottom: 0px;
	}
	
	/* Mini grid style product listings on popular search results pages */
	#page_content #contentSearchResults>img.red_line {
		display: none;
	}
	/* Need to override some inline styles for desktop that were baked into many of the pages. TODO replace the inline styles */
	#page_content #contentSearchResults>div {
		float:none !important;
		display:inline;
		width:auto;
	}
	#page_content #contentSearchResults>div>div {
		min-height: 303px;
		margin-bottom: 20px;
	}
	
	/* Product Detail */
	/* desktop layout has negative margin positioning hackery, overriding it here */
	.selected_product img {
		margin-left: 0px;
		margin-top: 0px;
	}
	h2.gift_box_note {
		margin-left: 0px;
	}
	.productDetail #content_left .sidebar_product_image img{
		max-width: 200px;
		height: auto;
	}
	.productDetail #page_content .product_info.grid_7 {
		width:500px;
		margin-left: 30px;
	}
	.productDetail #page_content .red_line {
		margin-left: 0px;
	}
	
	/* packaging options */
	.tiny-packaging .packageImage {
		max-height: 300px;
		max-width: 300px;
	}
}

/* ------------------------------------------------------------------------------------------------------------------------- */
/* All Mobile Widths (excluding tablet) */
@media only screen and (max-width: 767px) {
	
	.cfdebug,
	.cfdump_query,
	.cfdump_struct {
		display: none;
	}
	.mobile-only {
		display: inherit !important;
	}
	.mobile-hidden {
		display: none !important;
	}
	.responsive-only {
		display: inherit !important;
	}
	
	.mobile-center {
		margin-left:auto;
		margin-right:auto;
		text-align:center;
	}
	
	body {
		min-width: 300px;
	}

	.nav-toggle {
		margin-top: -62px
	}
	/* Override old desktop sprite navigation styles */
	nav ul#navigation {
		width:100%; margin:0; list-style:none; height: auto !important;
	}
	nav ul#navigation li {
		display:block; height: auto !important;
	}
	nav ul#navigation li a,
	nav ul#navigation li a:hover {
		display:block; float:left; background-image:none; text-indent: 0; width:100% !important; height: auto !important;
	}
	/* ------------------------------------------
		NAVIGATION STYLES
		(+ responsive-nav.css file is loaded in the <head>)
	--------------------------------------------- */
	.fixed {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
	}
	.nav-collapse,
	.nav-collapse * {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.nav-collapse,
	.nav-collapse ul {
		list-style: none;
		width: 100%;
		float: left;
	}
	.nav-collapse li {
		float: left;
		width: 100%;
	}
	.nav-collapse a {
		color: #eadcbf;
		text-decoration: none;
		width: 100%;
		background: #660000;
		border-bottom: 1px solid #eadcbf;
		padding: 0.7em 1em;
		float: left;
		text-align: center;
		font-size: 13px;
		font-weight: bold;
	}
	.nav-collapse a:hover {
	background: #eadcbf;
	color: #660000;
	border: 1px solid #660000;
	}
	.nav-collapse ul ul a {
		background: #660000;
		padding-left: 2em;
	}
	
	div.nav {
		margin-left: auto;
		margin-right: auto;
	}
	
	.container_12,
	.container_16,
	div.nav {
		width: 300px;
	}

	#container.container_12	{
		padding-left:10px;
		padding-right:10px;
	}
	
	#top_bar .grid_2 {
		width:auto;
	}
	#social_icons {
		margin-left: 0px;
		width:auto;
	}
	
	#contact_icons {
		display:none;
	}
	#top_bar .grid_5.push_5 {
		left:10px;
		width:auto;
	}
	
	/* unhack for misleading class added by temp who was not familiar with 960gs! */
	.grid_20 {
		position: static;
		float:none;
		width:auto;
	}
	#basket.grid_8 .grid_20 { /* diff hack for above when CA enabled */
		float:right;
		position:relative;
		top:0px !important;
	}
	#basket.grid_8 #accountNav {
		top:0px !important;
	}
	#login {
		display:none;
	}
	#information {
		width:auto;
		height:auto;
		margin-left:0px;
		max-width:185px;
	}
	#information.loggedIn {
		margin-top:2px;
	}
	#information a.welcomeMsg.mobile-only span{
		text-decoration: underline;
	}
	
	#logo.grid_4 {
		width:150px;
		margin-left: -5px;
		margin-top:10px;
	}
	#logo.grid_4 img {
		width: 150px;
		height: auto;
	}
	#basket.grid_2.push_5,
	#basket.grid_8 {
		width:auto;
		margin-left: -20px;
		-webkit-transform: scale(0.7);
		-moz-transform: scale(0.7);
		transform: scale(0.7);
		margin-top: 4px !important; /*override old inline style*/
	}
	
	#page_content img {
		max-width: 100%;
		height: auto;
	}
	
	#page_home #content_right {
		display:none;
	}
	
	ul#navigation {
		width: 300px;
	}
	
	img#header_image {
		display:none;
	}
	#container .home-header {
		background-image: url("/images/site_v2/Vintage-wine-barrels.jpg");
		background-repeat: no-repeat;
		background-position: 83% 75%;
		height:auto;
		min-height:325px;
		margin-bottom:10px;
	}
	#quick_search {
		margin:20px auto;
		position:static;
	}
	#search-content {
		margin-top:0px;
		padding-top:10px;
	}
	
	/* Cheeky vertical switcheroo with inspiration from http://tanalin.com/en/articles/css-block-order/ */
	#container.container_12 {
		display: table;
	}
	#container.container_12 .grid_3.alpha.sidebar {
		float:none;
		display: table-footer-group; 
	}
	#container.container_12 #page_content.grid_9.omega {
		float:none;
		display: table-row-group;
	}
	
	/* Variation on above for homepage which has different markup */
	#page_home #page_content {
		display: table;
	}
	#page_home #content_left {
		float:none;
		display: table-footer-group; 
	}
	#page_home #content_center {
		float:none;
		display: table-row-group;
	}
	
	#content_left {
		width: 100%;
		margin-left:0px;
	}
	
	#content_left div.promo,
	#content_left div#quick_search_product,
	#page_home #content_left div#popular_search,
	#page_home #content_left div#declared_years {
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
	
	#page_home #content_left div#popular_search,
	#page_home #content_left div#declared_years {
		width:165px;
		border-radius:10px;
		background-image:none;		
	}
	#page_home #content_left div#popular_search p ,
	#page_home #content_left div#declared_years p{
		width:182px;
		display:inline-block;
	}
	#page_home #quick_search_product_bottom,
	#page_home #declared_years_bottom {
		display:none;
	}

	/* homepage grid layout */
	.centre-box-grid {
		max-width: 100%;
		margin-left: 0px;
	}
	.centre-box-grid .grid-row {
		width:auto;
		display:inline;
	}
	.centre-box-grid .grid-column,
	.centre-box-grid .grid-column.first,
	.centre-box-grid .grid-column.last	{
		clear:none;
		width:44%;
		padding-left:3%;
		padding-right:3%;
		height: 300px;
	}
	
	#content_clear {
		height:1px;
	}
	/* footer rearrangement */
	#footer strong {
		font-weight: bold;
	}	
	#footer .grid_3 ul {
		margin-bottom: 25px;
	}	
	#footer .grid_3 li {
		display: inline-block;
		width: 90px;
		padding: 0px 7px 10px 0px;
		vertical-align: middle;
	}
	/* #footer .grid_3 li::after {
		content:"\2003\2014\2003";
	} */
	#footer .grid_3 li a {
	}
	
	.contentPhotoHolder img {
		width:100%;
		float:none;
		margin: 0px;
	}
	
	/* Contact Us */
	#frmContactUs textarea {
		max-width: 100%;
		width:275px !important;
	}
	
	/* Search results */
	.product_image {
		text-align: center;
	}
	#page_content .product_image img {
		margin-top: 10px;
	}
	.product_info {
		padding-left: 0px;
	}
	p.vintage-year-list a {
		padding:8px 3px;
		line-height:33px;
	}
	p.vintage-year-list br {
		display:none;
	}
	p.pagination a,
	p.pagination a.first,
	p.pagination span {
		padding:8px 10px;
		line-height:33px;
	}
	
	p.pagination a,
	p.vintage-year-list a {
		border: 1px solid #eadcbf;
		border-radius: 10px;
	}
	p.pagination a.highlighted {
		border-color: #701111;
	}
	
	/* Mini grid style product listings on popular search results pages */
	/* Need to override some inline styles for desktop that were baked into many of the pages. TODO replace the inline styles */
	#page_content #contentSearchResults>div {
	}
	#page_content #contentSearchResults>div>div {
		width:44% !important;
		padding-left:3% !important;
		padding-right:0px;
		margin-bottom:20px;
		min-height: 310px;
	}
	#page_content #contentSearchResults>div>div>div {
		width:100% !important;
		padding-left:0px !important;
		padding-right:0px !important;
		text-align:center;
	}
	
	/* Product Detail */
	/* desktop layout has negative margin positioning hackery, overriding it here */
	.selected_product img {
		margin-left: auto;
		margin-right: auto;
		margin-top: 10px;
		display: inherit;
	}
	h2.gift_box_note {
		margin-left: 0px;
	}
	/* Buy Now button on product detail page, element type depends upon whether packaging options exist and/or in noscript mode */
	#frmAddProduct input.buy_bttn,
	#frmAddProduct a.buy_link {
		right: 0px !important;
	}
	.product_info_delivery {
		margin-top: 20px !important;
	}
	
	/* Basket */
	div.breadcrumbs ul#breadcrumbs li div:after {
		border-top: 12px solid transparent;
		border-bottom: 12px solid transparent;
		border-left: 16px solid #eadcbf;
		position: absolute;
		top: 0%;
		margin-top: 0px;
		left: 100%;
		z-index: 2;
	}
	div.breadcrumbs ul#breadcrumbs li.backward div:before,
	div.breadcrumbs ul#breadcrumbs li.forward div:before {
		border-top: 12px solid transparent;
		border-bottom: 12px solid transparent;
		border-left: 16px solid rgb(149,77,77);
		position: absolute;
		top: 0%;
		margin-top: 0px;
		margin-left: 1px;
		left: 100%;
		z-index: 1;
	}
	div.breadcrumbs ul#breadcrumbs li div {
		padding-right:25px;
	}
	div.breadcrumbs ul#breadcrumbs li.selected div {
		padding-right:15px;
	}
	div.breadcrumbs ul#breadcrumbs li.selected div:after {
		left:102%;
	}
	div.breadcrumbs ul#breadcrumbs li:first-child.selected div:after {
		left:106%;
	}
	div.breadcrumbs ul#breadcrumbs li {
		margin-left:-21px;
	}
	div.breadcrumbs ul#breadcrumbs li:first-child {
		margin-left: 0px;
	}
	.checkout div.breadcrumbs ul#breadcrumbs li.selected div:after {
		left:100%;
	}
	
	textarea#custNotes {
		width:100% !important;
		min-width: 278px;
	}
	#frmOrderForm div.orderFormInner {
		max-width:100%;
		width:auto !important;
	}
	#page_content img.red_line {
		height:2px;
	}
	/* packaging options */
	.tiny-packaging #page_content img.red_line {
		height:2px;
	}
	.tiny-packaging .packageImage {
		max-height: 300px;
		max-width: 100%;
	}
	.tiny-packaging #page_content .packaging-details p.package_description {
		/* remove bottom margin when buy_bttn is underneath on narrow displays */
		margin-bottom: 0px;
	}
	.tiny-packaging #page_content .packaging-details-wrapper {
		margin-bottom: 15px;
	}
	.tiny-packaging #page_content .packaging-details-wrapper h2:first-child {
		margin-top: 15px;
	}
	.tiny-packaging.from-basket  #page_content .packaging-details  form {
		margin-top: 10px !important;
	}
	/* checkout/order page */
	textarea#delivNotes,
	textarea#CustNotes,
	select#deliveryTypeID	{
		max-width: 250px;
	}
	.checkout #content_left {
		display: none;
	}
	
	.accountHomeBox .boxDetails p {
		margin:10px 0px 15px !important;
	}
	.accountHomeBox .boxDetails p a {
		padding:8px 0px;
	}
	#formContinueReg {
		margin-top:10px;
	}
}
/* ------------------------------------------------------------------------------------------------------------------------- */
/* Mobile Landscape Width to Tablet Portrait Width */
@media only screen and (min-width: 480px) and (max-width: 767px) {

	.cfdebug {
		display:none;
	}

	body {
		min-width: 480px;
	}

	.nav-toggle {
		margin-top: -81px;
	}
	
	.container_12,
	.container_16,
	div.nav {
		width: 420px;
	}
	
	#container.container_12 {
		padding-left:10px;
		padding-right:10px;
	}
	#login {
		display:block;
	}
	#social_icons {
		margin-left: 20px;
	}
	#information {
		width:auto;
		height:inherit;
		max-width:185px;
		margin-left:15px;
	}
	#contact_icons {
		width:auto;
		text-align:center;
		display:block;
	}
	#logo.grid_4 {
		width:220px;
		/*margin-left:-5px;*/
		margin-top:15px;
		margin-bottom:7px
	}
	#logo.grid_4 img {
		width: 220px;
		height: auto;
	}
	#basket.grid_2.push_5,
	#basket.grid_8 {
		width:auto;
		margin-left:5px;
		margin-right:0px;
		-webkit-transform: none;
		-moz-transform: none;
		transform: none;
		margin-top: 20px !important;
	}
	
	#page_content img {
		max-width: 100%;
		height: auto;
	}

	#page_content p.search-description img {
		max-width: 60%;
		height: auto;
	}
		

	ul#navigation {
		width: 420px;
	}

	img#header_image {
		display:none;
		/*width:100%;
		height:auto;*/
	}
	#container .home-header {
		background-position: 86% 75%;
	}
	
	#content_left {
		width: 100%;
		margin-left:15px;
	}
	
	#content_left div.promo {
		float:left;
		margin-right: 20px;
	}
	
	#page_home #content_left div#popular_search,
	#page_home #content_left div#declared_years {
		width:400px;
	}
	#page_home #content_left div.promo {
		margin-left:12px;
		margin-right:12px;
	}
	
	#footer .grid_3 li {
		width:130px;
	}
	
	.contentPhotoHolder img {
		width:223px;
	}
	
	#frmContactUs textarea {
		max-width: 100%;
		width:275px !important;
	}
	
	/* Product Detail */
	/* Buy Now button on product detail page, element type depends upon whether packaging options exist and/or in noscript mode */
	#frmAddProduct input.buy_bttn,
	#frmAddProduct a.buy_link {
		right: 115px !important;
	}
	
	/* Basket */
	div.breadcrumbs ul#breadcrumbs li:first-child.selected div:after {
		left:100%;
	}
	.checkout div.breadcrumbs ul#breadcrumbs li.selected div:after {
		left:102%;
	}
	/* packaging options */
	.tiny-packaging #page_content .packaging-details p.package_description {
		/* keep bottom margin when buy_bttn is to the right on larger mobiles */
		margin-bottom: 15px;
	}
	.tiny-packaging #page_content .packaging-details {
		position:relative;
	}
	.tiny-packaging #page_content .packaging-details  form {
		position:absolute;
		top: 60px;
		right:-25px;
	}
	.tiny-packaging.from-basket #page_content .packaging-details  form {
		right:0px;
	}
	.order-alt #addressTable td:first-child {
		min-width:100px;
	}
}
@media only screen and (max-width: 359px) {
	.checkout textarea {
		width: 200px;
		max-width: 200px;
	}
	.checkout select {
		width: 206px;
		max-width: 206px;
	}
	.checkout div.breadcrumbs ul#breadcrumbs li.selected div:after {
		left:102%;
	}
}
@media only screen and (max-width: 339px) {
	.checkout #page_content form,
	#frmOrder2 {
		max-width:95%;
	}
}