/* CSS Document */

body {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	background: url(../../images/global/bodyBack.gif) top left repeat-x #ffeed8;
	color: #000;
	}
	
p, ul, li, form, table, h1, h2, h3, input, select, label {
	margin: 0px;
	padding: 0px;
	}
	
h1, h2, h3 {
	font-weight: normal;
	font-size: 1em;
	}

a {
	text-decoration: none;
	color: #c55710;
	}

a:hover {
	text-decoration: none;
	}
	
img {
	border: 0;
	}
	
ul, li {
	}
		
.png {
	behavior: url("includes/htc/iepngfix.htc");
}
		
.back {
	behavior: url("includes/htc/iepngfixBACK.htc");
}

.floatLeft {
	float: left;
}

.floatRight {
	float: right;
}

h1, h2, h3 {
	color: #c55710;
	font-family: Georgia, "Times New Roman", Times, serif;
}

/* ------------------------------------- † LAYOUT † ---- */

#container {
	width: 983px;
	margin: 0px auto;
}

#header {
	float: left;
	width: 983px;
	margin: 25px 0px 0px 0px;
	position: relative;
}

#header .content {
	float: left;
	width: 977px;
	padding: 0px 3px;
	background: url(../../images/global/headerBack.png) top left repeat-y;
}

#header #logo {
	float: left;
	width: 207px;
	display: inline;
	margin: 10px 0px 0px 30px;
}

#header .content #slogan {
	float: left;
	display: inline;
	margin: 32px 5px 0px 5px;
	width: 410px;
}

#header .content #slogan h1 {
	font-size: 2.5em;
	text-align: center;
	width: 380px;
	float:left;
	line-height: 1em;
}

#header .content #slogan h1 span.lrg {
	font-size: 1.6em;
	position: relative;
}

#header .content #slogan h1 span.sml {
	font-size: 0.6em;
	position: relative;
}

#header .content #basket {
	float: right;
	display: inline;
	width: 227px;
	margin: 15px 10px 15px 0px;
}

#header .content #basket .top {
	float: left;
	width: 227px;
}

#header .content #basket .bottom {
	float: left;
	width: 227px;
}

#header .content #basket .content {
	float: left;
	width: 227px;
	background: url(../../images/global/basketBack.gif) top left repeat-y;
}

#header .content #basket .content p {
	float: left;
	width: 211px;
	padding: 0px 0px 6px 14px;
	color: #c55710;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.4em;
}

#header .content #basket .content .items {
	float: left;
	width: 102px;
	padding: 4px 0px 5px 15px;
	background: #e28719;
	color: #fff;
	font-weight: bold;
	font-size: 1.2em;
}

#header .content #basket .content .total {
	float: left;
	width: 104px;
	padding: 4px 0px 5px 0px;
	background: #e28719;
	color: #fff;
	font-weight: bold;
	font-size: 1.2em;
}

#header .content #basket .content .buttons {
	float: left;
	width: 199px;
	padding: 6px 0px 0px 11px;
}

#header .content #basket .content .buttons a {
	float: left;
}

#header .content #basket .content .buttons img {
	float: left;
}

#navWrap {
	float: left;
	width: 983px;
}

#navWrap .bottom {
	float: left;
	width: 983px;
	background: url(../../images/global/navBottom.png) 0px 0px no-repeat;
}

#navWrap .menu {
	float: left;
	width: 977px;
	padding: 0px 3px;
	background: url(../../images/global/headerBack.png) top left repeat-y;
}

#navWrap ul {
	float: left;
	width: 952px;
	background: url(../../images/global/navBack.gif) bottom left repeat-x #e58a19;
	padding: 7px 0px 0px 25px;
	list-style: none;
}

#navWrap ul li {
	float: left;
	margin: 0px 4px 0px 0px;
	position: relative;
	display: block;
}

#navWrap ul li a {
	float: left;
	background: url(../../images/global/navLeft.gif) top left no-repeat;
	padding: 0px 0px 0px 7px;
	color: #fff;
	font-weight: bold;
}

#navWrap ul li a span {
	float: left;
	background: url(../../images/global/navRight.gif) top right no-repeat;
	padding: 4px 14px 5px 7px;
}

#navWrap ul li a:hover {
	background: url(../../images/global/navLeftMO.gif) top left no-repeat;
	cursor: pointer;
}

#navWrap ul li a:hover span {
	background: url(../../images/global/navRightMO.gif) top right no-repeat;
}

#nav li ul {
	position: absolute;
	left: -999em;
	background: none;
	padding: 5px 5px 5px 5px;
	width: 100px;
	}


#nav li ul li a, #nav li ul li a:hover, #nav li ul li a span, #nav li ul li a:hover span {
	background: none;
}

#nav li ul li a {
	background: #e48a19;
	float: left;
	width: 100px;
}

#nav li ul li a:hover {
	background: #c47615;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: -5px;
	top: 24px;
}

#main {
	float: left;
	width: 976px;
	padding: 6px 0px 0px 4px;
}

#main.index {
	float: left;
	width: 980px;
	padding: 6px 0px 0px 0px;
}

#main .left {
	float: left;
	width: 734px;
	padding: 6px 0px 0px 0px;
	background: #fff;
}

#main .left .images {
	float: right;
	width: 250px;
	padding: 0px 10px 0px 15px;
}

#main .left .images .image.news {
	float: right;
	width: 250px;
	padding: 0px 0px 10px 0px;
}

#main .left p {
	margin: 0px 20px 20px 20px;
}

#main .left h1, h2, h3 {
	margin: 5px 20px 5px 20px;
	font-size: 1.4em;
}

#main .left ul {
	padding: 0px 0px 20px 20px;
	list-style: inside;
}

#main .left ol li {
	margin: 0px 20px 0px 0px;
}

#main .left .leftCol {
	float: left;
	width: 474px;
	padding: 0px 20px 0px 20px;
	margin: 15px 0px;
	border-right: 1px solid #ececec;
}

#main .left .leftCol .beermat {
	float: left;
	width: 100%;
	text-align: center;
}

#main .left .leftCol p {
	font-size: 0.9em;
	color: #5a5a5a;
	margin: 0px 0px 12px 0px;
}

#main .left .leftCol h2 {
	font-size: 1.8em;
	margin: 0px 0px 10px 0px;
}

#main .left .leftCol h2 span {
	font-size: 0.6em;
	color: #5a5a5a;
}

#main .left .rightCol {
	float: right;
	width: 204px;
	padding: 0px 0px 0px 0px;
}

#main .left .rightCol ul {
	float: right;
	padding: 0;
	width: 200px;
	list-style: none;
}

#main .left .rightCol ul li {
	float: left;
	width: 95px;
	height: 114px;
}

#main .left .rightCol li a {
	float: left;
	width: 95px;
	text-align: center;
	position: relative;
}

#main .left .rightCol li a span {
	position: absolute;
	left: -999em;
	top: 2px;
	clear: both;
}

#main .left .rightCol li a:hover {
	clear: both;
	z-index: 1;
	cursor: pointer;
}

#main .left .rightCol li a:hover span {
	left: 6px;
	z-index: 99;
}

#main .left .rightCol h3 {
	font-size: 1.7em;
	margin: 20px 0px 10px 10px;
}

/*#main .left .top {
	float: left;
	width: 740px;
}

#main .left .bottom {
	float: left;
	width: 740px;
}

#main .left .content {
	float: left;
	width: 734px;
	padding: 0px 3px;
	background: url(../../images/panels/leftColumnBack.png) top left repeat-y;
}*/

#main .mainImg {
	float: left;
	width: 734px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 10px 0px;
}

#main .left.beers {
	float: left;
	width: 714px !important;
	padding: 20px 0px 0px 20px;
	/*margin: 0px 0px 0px 4px;*/
	display: inline;
	background: url(../../images/panels/beermatBack.gif) top left repeat-x #f49b1a;
}

#main .left.beers .row {
	float: left;
	width: 714px;
	padding: 0px 0px 0px 0px;
}

#main .left.beers .row2 {
	float: left;
	width: 674px;
	padding: 0px 0px 20px 40px;
}

#main .left.beers p {
	float: left;
	display: inline;
	margin: 37px 9px 0px 9px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.5em;
	color: #fff;
}

#main .left.beers a {
	float: left;
	display: inline;
	margin: 4px 0px 0px 6px;
}

#main .indexText {
	float: left;
	width: 733px;
	padding: 17px 0px 5px 0px;
}

#main .indexText h2 {
	font-size: 2.5em;
	text-align: center;
	width: 410px;
	line-height: 1em;
	margin: 0px 0px 3px 0px;
}

#main .indexText h2 span.lrg {
	font-size: 1.6em;
	position: relative;
}

#main .indexText h2 span.sml {
	font-size: 0.6em;
	position: relative;
}
#main .indexText .text {
	float: left;
}
#main .indexText .trade-text {float: left; width:410px;}
#main .indexText .img {float: right; width:320px; text-align:right}
#main .indexText .index-logos {
	float: right;
	text-align:right;
	margin:23px -250px 0 0;
	position:relative;
}
#main .indexText .index-logos img {
	display:inline;
	padding:0 0 0 5px;
}
#main .right {
	float: right;
	width: 232px;
}

#main .right .panel {
	float: left;
	width: 232px;
	position: relative;
	margin: 0px 0px 9px 0px;
}

#main .right .panel img {
	float: left;
}

#main .right .panel img.arrowCap {
	position: absolute;
	bottom: 10px;
	right: 10px;
	clear: both;
}

#main .right .panel span {
	position: absolute;
	top: 9px;
	right: 12px;
	clear: both;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.7em;
	text-align: right;
}

#main .right .panel span.white {
	color: #fff;
}

#main .right .logos {
	float: right;
	width: 230px;
	padding: 23px 0px 0px 0px;
}

#main .right .logos .ibd-rutland {
	padding: 10px 0px 5px 0;
}

#main .right .logos img {
	float: right;
	display: inline;
	margin: 0px 25px 0px 0px;
}


#footer {
	float: left;
	display: inline;
	width: 946px;
	padding: 10px 20px;
	margin: 10px 0px 20px 0px;
	background: #f3cfab;
	font-size: 0.9em;
	color: #a77436;
}

#footer a {
	color: #a77436;
	text-decoration: underline;
}

#footer ul.left {
	float: left;
	list-style: none;
}

#footer ul.left li {
	float: left;
	margin: 0px 10px 0px 0px;
}

#footer ul.right {
	float: right;
	text-align: right;
	list-style: none;
}

.map {
	float: right;
	width: 280px;
}

.form {
	float: left;
	display: inline;
	width: 480px;
	padding: 10px;
	background: #FFEED8;
	margin: 0px 0px 20px 20px;
}

.form .row {
	float: left;
	width: 280px;
	margin: 0px 0px 5px 0px;
}

.form .name {
	float: left;
	width: 90px;
	text-align: right;
}

.form .input {
	float: right;
	width: 180px;
}

.form .submit {
	float: right;
	width: 180px;
}

.form .input input {
	float: left;
	width: 300px;
	padding: 1px 2px 3px 2px;
	border: 1px solid #F3CFAB;
}

.form .input textarea {
	float: left;
	width: 300px;
	height: 200px;
	padding: 1px 2px 3px 2px;
	border: 1px solid #F3CFAB;
}
.wholesale {
	float: right;
	width: 720px;
}
.wholesale img {
	margin: 10px 10px;
}
.wholesale * {
	vertical-align: middle;
}
.contentImg {
	float: right;
	display: inline;
	margin: 0px 20px 10px 10px;
	clear: right;
}

/* † ------------------------------- CART ---- † */

.cart {
	float: left;
	display: inline;
	width: 694px;
	margin: 0px 20px;
	padding: 10px 0px;
	color: #5a5a5a;
	border-top: 1px solid #ececec;
	border-bottom: 1px solid #ececec;
}

.cart .row {
	float: left;
	width: 100%;
	padding: 0px 0px 5px 0px;
}

.cart .row.sml {
	font-size: 0.9em;
}

.cart .row .remove {
	float: left;
	width: 55px;
	text-align: center;
}

.cart .row .remove.top {
	padding: 4px 0px 0px 0px;
}

.cart .row .product {
	float: left;
	width: 250px;
	padding: 4px 10px 0px 10px;
}

.cart .row .price {
	float: left;
	width: 80px;
	padding: 4px 10px 0px 0px;
}

.cart .row .qty {
	float: left;
	width: 85px;
	padding: 4px 10px 0px 0px;
}

.cart .row .qty input {
	float: left;
	width: 35px;
	font-size: 1em;
	padding: 0px 2px 3px 2px;
}

.cart .row .total {
	float: left;
	width: 62px;
	padding: 4px 10px 0px 0px;
}

.cart .row .update {
	float: left;
	width: 110px;
	padding: 4px 0px 0px 0px;
}

.totals {
	float: left;
	display: inline;
	width: 694px;
	margin: 0px 20px;
	padding: 10px 0px;
	color: #5a5a5a;
	border-bottom: 1px solid #ececec;
}

.totals .left {
	float: left;
	width: 494px !important;
	text-align: right;
	padding: 0px !important;
}

.totals .right {
	float: right;
	width: 200px !important;
	padding: 0px !important;
}

.totals p {
	padding: 0px !important;
	margin: 10px 0px 0px 17px !important;
}

.continue {
	float: right;
	display: inline;
	margin: 15px 20px 45px 0px;
}

#worldpayimage{
	padding-left:20px;
	margin-top:10px;
}

.row {
	float: left;
	width: 100%;
}
.row * {
	vertical-align: middle;
}
.row select {
	margin: 0 10px 0 0;
	font-size: 1em;
}
.totals select {
	font-size: 1em;
	margin: 10px 0 0 10px;
}
#main .cartpage {
	padding: 0 20px 20px 20px;
	width: 694px;
}
#main .cartpage p {
	margin: 15px 0 0 0;
}
#main .cartpage h2 {
	margin: 15px 0 0 0;
}
#main .cartpage h3 {
	margin: 15px 0 0 0;
}
#main .cartpage table {
	margin: 15px 0 0 0;
	border-collapse: collapse;
}
#main .cartpage td {
	border: 1px solid #CB7F16;
	padding: 3px;
}
#main .cartpage .title td {
	background: #EE951A;
	color: #fff;
	font-weight: bold;
}
#main .cartpage .invoice {
	float: left;
}
#main .cartpage .delivery {
	float: right;
}

#map{
	width: 360px;
	height: 250px;
	float:right;
	margin:0 30px 50px 0px;
}

#invoices {
	float: left;
	display: inline;
	width: 689px;
	padding: 0px 0px 30px 0px;
	margin: 0px 22px 0px 23px;
	border-top: 1px solid #ececec;
}

#main h1.invoice-title {
	padding: 5px 0px 0px 5px;
	font-size: 1.75em;
}

#invoices .row {
	float: left;
	width: 100%;
	padding: 5px 0px;
}

#invoices .row.alt {
	background: #f5f5f5;
}

#invoices .row .top {
	padding: 4px 0px 0px 10px;
	color: #5a5a5a!important;
	font-size: 0.9em;
}

#invoices .row .date.top {
	padding: 4px 0px 0px 0px;
	color: #5a5a5a;
	font-size: 0.9em;
}

#invoices .row .order {
	float: left;
	width: 141px;
	padding: 4px 0px 0px 10px;
	color: #bd571f;
}

#invoices .row .date {
	float: left;
	width: 195px;
	color: #5a5a5a;
	padding: 4px 0px 0px 0px;
}

#invoices .row .status {
	float: left;
	width: 194px;
}

#invoices .row .details {
	float: left;
	width: 139px;
	padding: 3px 0px 0px 0px;
}

#invoices .paging {
	float: left;
	width: 673px;
	padding: 7px 8px;
	margin: 15px 0px 0px 0px;
	background: #f9e7d1;
	font-size: 0.9em;
	color: #5a5a5a;
	font-weight: bold;
}

#invoices .paging span {
	float: left;
}

#invoices .paging span p {
	float: left;
	margin: 0px;
	padding: 3px 6px 0px 0px;
}

#invoices .paging span select {
	float: left;
	font-size: 1em;
	margin: 1px 0px 0px 0px;
	padding: 1px 1px 2px 0px;
	width: 158px;
}

#invoices .paging a {
	float: right;
	margin: 0px 0px 0px 5px;
}

/* styles added by Gary 21/01/10 */

.login-error-msg{border:1px solid #CC0000; padding:5px; margin:0 0 15px 0;float:left}
.login-error-msg .image{float:left; width:25px}
.login-error-msg .copy{float:left; width:443px}
.trade-current-promotion{float:left;width:100%;}
.trade-current-promotion .logo{float:left;width:100%; background:url(../../images/panels/current-promotion-img-bg.jpg) left top no-repeat; height:398px; width:238px; margin:10px 0 0 0}
.trade-current-promotion .logo img{padding:140px 0 0 36px;}
.trade-current-promotion .copy{float:left;width:100%; text-align:center; background:url(../../images/panels/current-promotion-text-bg.jpg) repeat-y left bottom; min-height:106px; height:auto !important; height:106px}
.trade-current-promotion .copy p{color:#fff; padding:0 20px}
.trade-current-promotion .copy h3{color:#ffd200; padding:0 20px}
.trade-current-promotion .bottom{float:left;width:100%;}
.trade-index-margins{margin:15px 0 10px 0}
.loggedin{float:left; margin:15px 0 0 0}

/* styles added by Gary 01/02/10 */
.trade-login {
	float:right;
	width:237px;
	margin:14px 0 0 0
}
.trade-login .top {
	float:left;
	width:100%
}

.trade-login .bottom {
	float:left;
	width:100%
}

.trade-login .middle {
	float:left;
	width:237px;
	background-image: url(../../images/panels/trade-login-back.jpg);
	background-repeat: repeat-y;
	background-position: left top;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #bd571f;
	font-size: 	1.41em;
	position:relative;
	min-height:80px;
	height:auto !important;
	height:80px
}
.trade-login .middle p {
	float:left;
	padding:0 15px
}
.trade-login .middle .left{
	float:left;
	padding:7px 0 0 15px;	
}
.trade-login .middle .left img{
	float:left
}
.trade-login .middle .left .logout{
	margin:5px 0 0 0	
}
.trade-login .middle .right{
	float:right;
	padding:0 4px 0 0;
	position:absolute;
	right:0;
	bottom:-7px
}
.ie6 .trade-login .middle .right{
	float:right;
	padding:0 4px 0 0;
	position:absolute;
	right:5px;
	bottom:-7px
}

/* invoice pop up styles */

.invoice-pop-up { background:#fff }
.invoice-pop-up h1, 
.invoice-pop-up h2, 
.invoice-pop-up h3 { font-family:Arial, Helvetica, sans-serif; margin:0; padding:0 }
.invoice-pop-up .print { float:left; margin:0 0 0 -14px; position:relative; display:inline }
.invoice-pop-up .delete { float:right; display:inline; margin:0 -10px 0 0; position:relative }
.invoice-pop-up .buttonrow { padding:0 0 16px }
.invoice-pop-up h2 { color:#6f6f6f; font-weight:bold; font-size:1.5em; margin:0 13px 0 3px; display:inline}
.invoice-pop-up h3 { font-size:0.91em; color:#6f6f6f; font-weight:bold; margin:0; display:inline; float:left}
.invoice-pop-up .payment-outstanding { display:inline; float:left; margin:-6px 0 0 69px; padding:0 0 7px; position:relative } 	
.invoice-pop-up .date-and-time { float:left; color:#bd571f; margin:0 0 0 50px }
.invoice-pop-up .divider { border-bottom:1px solid #e9e9e9; float:left; width:100%; padding:15px 0 17px  }
.invoice-pop-up .address { float:left; color:#bd571f; margin:0 0 0 57px; line-height:17px }
.invoice-pop-up #container { width:772px; padding: 14px 28px; overflow: hidden; }
.invoice-pop-up #container .row { width:100%; float:left }
.invoice-pop-up #container .title { padding:0 0 13px; border-bottom:1px solid #e9e9e9 }
.invoice-pop-up #container .title span { font-size:1.5em; color:#bd571f; display:inline }
.invoice-pop-up #container .left { float:left; width:335px; padding:0 0 0 4px }
.invoice-pop-up #container .right { float:right; width:396px }
.invoice-pop-up .pay-now { float:right; margin: 16px -5px 0 0; display:inline; position:relative }
.invoice-pop-up .order-details-title { margin:14px 0 0 3px; float:left; width:100% }
.invoice-pop-up .order-total-bottom { float:right; padding:31px 30px 0 0; margin:0 -3px 0 0; position:relative }
.invoice-pop-up .order-total-bottom h2 { float:left; margin:0 15px 0 0 }
.invoice-pop-up .order-total-bottom span { float:left; font-size:1.5em; color:#bd571f }
.invoice-pop-up-table { float:left; margin:15px 0 0; width:772px }
.invoice-pop-up-table th { color:#5a5a5a; font-weight:bold; font-size:0.91em }
.invoice-pop-up-table td { font-size:1em; padding:11px 0 }
.invoice-pop-up-table .product a { color:#bd571f }
.invoice-pop-up-table .product a:hover { text-decoration:underline }
.invoice-pop-up-table .whiterow { background:#fff }
.invoice-pop-up-table .greyrow { background:#f5f5f5 }
.invoice-pop-up-table .stockcode { padding:0 0 0 10px; width:74px }
.invoice-pop-up-table .product { width:148px }
.invoice-pop-up-table .product-options { width:148px }
.invoice-pop-up-table .qty { width:55px }
.invoice-pop-up-table .ppu { width:76px }
.invoice-pop-up-table .order-total { width:88px }
.invoice-pop-up-table .dispatched { width:98px; text-align:center }
.invoice-pop-up-table .cancelled { width:85px; text-align:center }