/* CSS Document */
/* 
---- Colours ---- 

Text red = #b1003e

*/

@import url(reset.css);
html {
	overflow-y: scroll;  /* always show scroll so pages dont jump in FF */
}
body {
	font-family:Calibri, Arial, Helvetica, sans-serif;
	font-size:101%;
	text-align:center;
	background:#000 url(/img/bg.jpg) no-repeat center top;
}
h1, h2, h3 {
	color:#b1003e;
	text-transform:uppercase;
}
h1 {
	font-size:30px;
	font-weight:normal;
	line-height:1;
}
h2{
	font-size:18px;
	font-weight:normal;
	line-height:1;
}
h3{ /*h1+p*/
	font-size:14px;
	font-weight:normal;
	padding:1em 0 0.5em 0;
	line-height:1.3;
}
h4{
	font-size:14px;
	line-height:1.5;
	color:#3b454b;
	font-weight:bold;
	padding:1em 0 0.5em 0;
}
h1 img{
	float:right;	
	margin:-1em 0 0 0.2em;
}
/*h1+p img{
	float:left;	
}
.category h1+p{
	margin-right:70px;	
	padding-bottom:1em;
}
.category h1+p img{
	position:absolute;
	top:0;
	right:0;
}*/
p, li, td, th {
/*	font-size:0.8em;*/
	font-size:14px;
	line-height:1.5;
	color:#3b454b;
}
#content th{
/*	text-align:right;
	font-weight:bold;
	padding-right:10px;*/
	width:30%;
	text-align:left;
	padding-bottom:3px;
}
#content p{
	padding-bottom:18px;	
}
legend{
	display:none;	
}
blockquote{
	margin-left:80px;	
}
cite{
	font-style:italic;	
}

a:link, #account-nav ul a:visited{
	color:#2f92cf;	
}
a:hover{
	text-decoration:none;	
}
a:visited{

}
a img{
	border:none;	
}
/*------------------------------------------------------------------*/
#container, #masthead {
	width:960px;
	margin:0 auto 0;
	text-align:left;
	position:relative;
}
#container{
	background:#FFF url(/img/dc/container_gradientBackground.png) repeat-x 0 0;
	border-top:1px solid #fff;
	padding-bottom:2em;
	/*z-index:0;*/
}
/* --- Masthead --- */
#masthead{
	margin:0 auto;
	padding-top:38px;
}
#logo{
	height:88px;
	margin:0 0 11px -19px;
}
#logo a{
	display:block;
	text-indent:-999em;	
	background:url(/img/logo_screen.gif) no-repeat left;
	width:163px;
}
#masthead li{
	float:left;	
}
#main-nav{
	float:right;
	margin:-34px 1px 0 0;
/*	background:rgba(255, 255, 255, 0.5);*/
	background:url(/img/nav_background.png) repeat-x bottom;
}
#main-nav a{
	display:block;
	text-decoration:none;
	color:#000;
	line-height:33px;
	text-indent:-999em;
	background:url(/img/bg_nav.gif) no-repeat top left;
	padding:0 3px;
}
#masthead_home a{width:81px; background-position:-7px top}
#masthead_christmas a{background-position:-99px top; width:121px;}
#masthead_parties a{background-position:-233px top; width:92px;}
#masthead_weddings a{background-position:-337px top; width:118px;}
#masthead_partyBombs a{background-position:-467px top; width:141px;}
#masthead_largeEvents a{background-position:-620px top; width:143px;}

#masthead_home a:hover{width:81px; background-position:-7px bottom;}
#masthead_christmas a:hover{background-position:-99px bottom;}
#masthead_parties a:hover{background-position:-233px bottom;}
#masthead_weddings a:hover{background-position:-337px bottom;}
#masthead_partyBombs a:hover{background-position:-467px bottom;}
#masthead_largeEvents a:hover{background-position:-620px bottom;}
#main-nav .on a{
	background:url(/img/bg_nav-on.png) no-repeat;
	position:relative;
	z-index:500;
/*	border-bottom:1px solid #CCC;*/
	padding:5px 5px 0 7px;
	margin:-3px -5px 0 -8px;
	cursor:default;
}
#masthead_home.on a{width:81px; background-position:left bottom }
#masthead_christmas.on a{background-position:-94px bottom;}
#masthead_parties.on a{background-position:-227px bottom;}
#masthead_weddings.on a{background-position:-330px bottom;}
#masthead_partyBombs.on a{background-position:-460px bottom;}
#masthead_largeEvents.on a{background-position:-612px bottom;}
#container{
	position:relative;
	z-index:400;
}
/*#main-nav {
	background:url(/img/nav_background.png) repeat-x;
	position:absolute;
	right:0;
	top:45px;
	z-index:2;
}
#main-nav li{
	margin:15px 0 0 0;
	background:url(/img/navigation-ends.gif) no-repeat right top;
	font-size:12px;
	font-weight:bold;
}
#main-nav li:hover{
}
#main-nav a{
	text-decoration:none;
	color:#FFF;
	padding:0 1em 0 1.1em;
	line-height:36px;
	display:block;
	
}


#masthead_home a, #masthead_christmas a, #masthead_parties a, #masthead_Weddings a, #masthead_partyBombs a, #masthead_largeEvents a{
	background:url(/img/nav_bg-HoverState.png) no-repeat 0 -34px;
	text-indent:-9999px;
	width:98px;
	border-right:1px solid #fff;
}
#masthead_home a{background-position:0 -34px; width:86px;}
#masthead_christmas a{background-position:-87px -34px; width:126px;}
#masthead_parties a{background-position:-210px -34px; width:96px;}
#masthead_Weddings a{background-position:-307px -34px; width:126px;}
#masthead_partyBombs a{background-position:-427px -34px; width:146px;}
#masthead_largeEvents a{background-position:-573px -34px; width:146px;}

#masthead_home a .on, #masthead_home a:hover,
#masthead_christmas a .on, #masthead_christmas a:hover,
#masthead_parties a .on, #masthead_parties a:hover,
#masthead_Weddings a .on, #masthead_Weddings a:hover,
#masthead_partyBombs a .on, #masthead_partyBombs a:hover,
#masthead_largeEvents a .on, #masthead_largeEvents a:hover{
	background:url(/img/nav_bg-on2.png) no-repeat 0 -31px;
	text-indent:-9999px;
	z-index:0;
}

#masthead_home a:hover{background-position:-9px -18px;}
#masthead_christmas a:hover{background-position:-141px -18px;}
#masthead_parties a:hover{background-position:-296px -18px;}
#masthead_Weddings a:hover{background-position:-453px -18px;}
#masthead_partyBombs a:hover{background-position:-605px -18px;}
#masthead_largeEvents a:hover{background-position:-788px -18px;}
*/
/*#masthead_home a .on{background-position:-33px -30px; width:128px;}
#masthead_christmas a .on{background-position:-154px -30px; width:98px;}
#masthead_parties a .on{background-position:-311px -30px; width:128px;}
#masthead_Weddings a .on{background-position:-445px -30px; width:148px;}
#masthead_partyBombs a .on{background-position:-600px -30px; width:148px;}
#masthead_largeEvents a .on{background-position:-600px -30px; width:148px;}
*/
#payments{
/*	padding:0.6em 0 0 0.6em;
	margin-right:0.5em;
	width:97%;
	position:absolute;
	right:0;
	top:0;*/
	padding:0 0 5em 28px;
	width:145px;
}
#payments li{
	float:left;	
	padding:0 0 0.2em 0.2em;
	line-height:25px;
}
#extra #payments li:hover{background:none;}
#payments img{
	vertical-align:middle;	
}
#account-nav{
	font-size:18px;
	position:absolute;
	right:0;
	top:23px;
}
#account-nav li{
	padding:0 0.5em 0 0.5em;
	font-size:0.75em;
}
#account-nav .on a{
	color:#63a2cd!important;
	text-decoration:none;
	cursor:default;
	font-weight:bold;
}
#account-nav ul .on a{
	color:#fff !important;
}
#account-nav .basket a{
	background: transparent url(/img/icon_basket.gif) no-repeat left 6px;	
	padding-left:32px;
	
}
#account-nav a{
	color:#fff;
	display:block;
	padding-top:9px;
	text-decoration:none;
}
#account-nav .basket{
	/*background:url(/img/bg_divider.gif) no-repeat right bottom;	*/
	clear:left;
}
/*#account-nav .normallink{
	padding:0 0.5em 3px 0.5em;	
	background:url(/img/bg_divider.gif) no-repeat left bottom;	
}*/
#account-nav li li{
	padding:0 0.3em;
}
#account-nav #payments li{
	padding:0 0.2em;	
}
#account-nav li li strong{
	font-size:1.9em;
	vertical-align:middle;
}
#masthead fieldset{
	position:absolute;
	right:0;
	bottom:0;
	padding:5px;
	width:279px;
	height:26px;
	background:#c8c9c7 url(/img/bg_searchform.gif) no-repeat bottom right;	
}
#masthead input{
	width:190px;	
	margin-left:3px;
	vertical-align:middle;
}
#delivery-notice, .delivery-wholesale{
	position:absolute;
	top:13px;
	left:377px;
	width:184px;
	height:61px;
}
#delivery-notice p a{
	display:block;
	text-indent:-999em;
	height:61px;
	background:url(/img/freedelivery.gif) no-repeat bottom left;	
}
.delivery-wholesale p{
	color:#C00;
	font-size:16px;
	font-weight:bold;
	text-align:center;
	line-height:1.2;
}
.delivery-wholesale p strong{
	display:block;
	font-size:30px;
}
/* -------------------------------------- content --------------------------------------------------- */
#content {
	float:left;
	width:695px;
	padding:64px 0 0 0;
}
#content h1 {
	margin-bottom:15px;
}
#content ul{
	list-style:disc;	
}
.ui-tabs-panel p+ul{
	padding-left:15px;
	margin-top:-15px;
}
#products li{
	/*font-size:0.7em;*/
	position:relative;
	list-style:none;
	padding-bottom:2em;
	float:left;
	/*width:314px;*/
	margin-right:59px;
}
#products li.rightHand{
	margin:0;
}
#products img{
	display:block;	
	margin:0 auto;
	border:2px solid #dedede;
}
#products a:hover img{
	border-color:#14777C;	
}
#products h2{
	font-size:1.2em;
	padding-bottom:0;
	text-transform:none;
	font-weight:normal;
}
#products p{
	padding-bottom:0;
	text-align:right;
/*	font-size:14px;*/
	clear:both;
}
#products p input{
	vertical-align:middle;	
	margin:0 -3px 0 0.5em;
}
#products select{
	width:188px;	
	font-size:12px;
}
#products .qtyHeading{
	font-size:13px;
	line-height:1;
	font-weight:bold;
}
.qtyHeading span{
	display:block;
	margin:0 0 0 auto;
	width:74px;
	text-align:right;
}
#products table {
	width:318px;
	margin:0 0 0.2em 0;
}
#products table th{
	vertical-align:bottom;
	padding-top:7px;
}
#products table td{
	border-top:1px solid #CCC;
	padding:0.2em 0;
/*	vertical-align:middle;*/
	font-size:12px;
}
#products td input{
	width:35px;	
}
/* --- Product specific info --- */
#price{
/*	
	clear:left;
	padding:1em 0.3em 0.5em 0.3em;
	text-align:center;	position:relative;
	position:absolute;
	margin-top:160px;*/
	background:#ebebeb;
	float:left;	
	width:170px;
	margin-top:1em;
}
#price img{
	margin-bottom:1.1em;	
}
/*#price p{
	padding:0.3em;	
	text-align:center;
}*/
#price strong{
	color:#900;
	font-weight:bold;
}
#price del{
	font-size:0.9em;	
	position:absolute;
	margin-top:-1.2em;
}
/*.productBadge{
	position:absolute;
	height:56px;
	width:56px;
	text-indent:-999em;
	right:2px;
	top:-60px;
	background:no-repeat top left;
}
.threefortwo{
	background-image:url(/img/badge_threefortwo.png);	
}*/
#description{
	width:380px;
	float:right;
}
#productinfo{
/*	margin-left:190px;	*/
}
#tags{
	font-size:11px;	
}
#content #tellafriend{
	padding-left:18px;
	background:url(/img/icon_envelope.gif) no-repeat left;
	clear:both;
	padding-bottom:0;
}
#happycustomer{
	float:left;	
}
/*For the modal pop ups shopping basket*/
.simplemodal-data {
	padding:20px!important;
	text-align:left;
}
#ModalBasket td{
	padding:0.2em;
	vertical-align:top;
	text-align:left;
	border-top:1px solid #DDD;
}
#ModalBasket img{
	vertical-align:top;	
}
#ModalBasket .button{
	display:block;
	height:32px;
	text-decoration:none;
	text-indent:-999em;
	float:right;
	width:106px;
	background:url(/img/button_basket.gif);
	margin-top:1em;
}
#ModalBasket .continue{
	float:left;
	margin-top:25px;
}
/*This form code is for the checkout and contact pages*/
fieldset.checkout{
	border-bottom:1px solid #DDD;	
	padding:0 1em 1.5em 1em;
	margin:2em -0.4em 0 -0.4em;
	background:url(/img/bg_gradient.gif) top repeat-x;
}
.simplemodal-data .checkout{
	background:none;	
	border:none;
	margin-top:0;
}
.checkout input, .checkout textarea, .checkout select{
	display:block;	
	width:15em;
}
.check input{
	display:inline;	
	width:auto;
	vertical-align:middle;
}
.postcode{
	width:6em;	
}
.checkout label, #content .label{
	font-size:14px;	
	font-weight:bold;
	color:#333;
	display:block;
	padding:0.8em 0 0 0;
	margin:0;
}
.checkout label.noheading{
	padding:0;
}
.checkout table label{/*.Net controls are in tables... using it to target radio button lists*/
	font-weight:normal;
}
#content #mainContent{
	margin-bottom:50px;
	/*width:430px;*/
}
#content #mainContent p{
	width:410px;
}
#content #mainContent ul{
	list-style:none;
	width:410px;
}
#content #mainContent li{
	border-bottom:1px solid #CCC;
	padding:10px 0;
}
#content #mainContent li a{
	color:#b1003e;
	text-decoration:none;
}
#content #categoryListImage{
	float:right;
	margin-top:12px;
}
/* --- Extra --- */
#extra {
	float:left;
	width:217px;
	padding:64px 0 0 0;
	margin-right:10px;
	clear:both;
	border-left:1px solid #f0f0f0;
}
#extra h2{
	color:#b1003e;
	margin-left:28px;
	font-size:16px;
}
#extra li{
	margin-bottom:2em;
	border-bottom:none;	
}
#extra li li{
	margin:0;
	border-bottom:none;
}
#extra li li:hover, #extra li li.on {
	background: url(/img/dc/extra_hoverBackground.png) no-repeat 0 0;
}
#extra li a:hover, #extra li a.on{
	color:#b1003e;
	display:block;
}
#extra li p{
	font-size:12px;
	line-height:1.4;
}
#extra li li a{
	text-decoration:none;	
	display:block;
	color:#000;
	padding:0.3em 0;
}
#extra #categoryLinks {
	width:198px;
}
#extra #categoryLinks li {
	padding-right:28px;	
}
#extra #categoryLinks li a {
	border-bottom:1px solid #dcdee5;
	padding-left:28px;
}
#extra #sagepayLogo {
	padding:20px 0 0 28px;
}
#offercode{
	background:#fff0c5;
	padding:0.3em 0 0.3em 0.3em;
}
#offercode input{
	width:125px;	
}
#guarantee{
	background:#ebebeb url(/img/seal.gif) no-repeat top right;
	padding:0.6em 50px 0.6em 0.6em;
}
#newsletter-signup{
	padding-left:28px;
	width:145px;
}
#newsletter-signup h3 {
	padding-top:0;
}
#newsletter-signup p{
	padding:0 0 0.4em 0;
}
#newsletter-signup input{
	
}
#newsletter-signup .textbox{
	margin-bottom:3px;
}
#newsletter-signup .button{
	float:right;	
}
/* -- Footer -- */
#footer {
	clear:both;
	color:#fff;
	font-size:14px;
	padding:2em 0 0;
	background:url(/img/bg_footer.png) no-repeat top;
}
#footer ul{
	width:17em;	
	margin:0 auto;
}
#footer li, #footer p{
	line-height:1.4;
}
#footer li {
	float:left;
	padding:0 0.15em;
}
#footer p{
	clear:both;	
	padding:0.5em 0;
}
#footer a, #footer p{
	color:#fff;	
}
/* -- Decorative shadows -- */
/*These are in spans, positioned off the edge of the container div, to allow the container to still have a white background.  Any other ideas on how to achive this affect without using extra markup? */
#shadow-bottomleft, #shadow-bottomright, #shadow-topleft, #shadow-topright{
	position:absolute;
	display:block;
	width:8px;
	height:470px;
}
#shadow-bottomleft{
	background:url(/img/bg_shadow-bottom-left.png) no-repeat bottom right;
	left:-8px;
	bottom:0;
}
#shadow-bottomright{
	background:url(/img/bg_shadow-bottom-right.png) no-repeat bottom left;
	right:-8px;
	bottom:0;
}
#shadow-topleft{
	background:url(/img/bg_shadow-top-left.png) no-repeat top right;
	left:-8px;
	top:-5px;
}
#shadow-topright{
	background:url(/img/bg_shadow-top-right.png) no-repeat top left;
	right:-8px;
	top:-5px;
}
/* -- Classes -- */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/*.textbox{
	border:1px solid #CCC;
}*/
.hidden{
	position:absolute;
	left:-999em;
}
input.button{
	text-indent:-999em;
	border:none;
	clear:both;
}
.right{text-align:right;}
#masthead input.search{
	background-image:url(/img/button_search.gif);
	width:75px;	
	height:31px;
	margin-left:0;
}
#offercode input.apply{
	background-image:url(/img/button_apply.gif);	
	width:75px;
}
#newsletter-signup input.signup{
	background-image:url(/img/button_signup.gif);	
	width:73px;
	height:31px;
}
input.save{
	background-image:url(/img/button_save.gif);
	width:99px;
	height:30px;
	margin:5px 0 0 120px;
}
#content input.apply{
	background-image:url(/img/button_apply-orange.gif);
	width:104px;
	height:38px;
	margin:10px 0 0 120px;
}
#btnLogIn{
	background:url(/img/button_login-white.gif) no-repeat top left;	
	width:65px;
	height:28px;	
	margin:5px 0 0 191px;
}
.button a{
	display:block;
	height:28px;
	text-decoration:none;
	text-indent:-999em;
}
.buynow a{
	background:#e4780f url(/img/button_buynow.gif) no-repeat top left;
	width:105px;
	height:39px;
	margin:0 auto;
}
.threefortwo a{ /*3 for 2 button on product page*/
	background:url(/img/button_offer-3for2.gif);
	width:165px;
	height:39px;
	margin:0 auto;
}
.btnAddOfferCode{
	width:72px !important;
	height:24px;
	padding-top:5px;
	margin:-3.4em 0 0 190px;
}
.offer{
	display:block;
	position:absolute;
	width:56px;
	height:56px;
	background:url(/img/badge_threefortwo.png) no-repeat top left;
	text-indent:-999em;
	right:85px;
	top:120px;
}
.send a, input.send{
	background-image:url(/img/button_send.gif);
	width:75px;
	height:32px;
}
.send a{margin-left:145px;}
/*.price{
	color:#000;
	font-size:1.1em;
	padding:0.5em 0;
	font-weight:bold;
}*/
.category .price{
	display:block;	
	padding-bottom:0;
}
.category h2{
	text-transform:none;
}
.category h2 span{
	color:#333;
	font-size:12px;
	padding-left:5px;
}
.category #content #mainContent h2 a:hover{
	text-decoration:underline;	
}
.sale{
	color:#900;
	font-size:1.2em;
}
a.action{
	float:right;	
}
.error, .note, .information{
	background:transparent url(/img/icon_warning.gif) no-repeat left center;
	padding-left:18px!important;
	font-weight:bold;
	color:#900;
	font-size:14px;
	padding-bottom:0!important;
}
.information{
	color:#3B454B;	
	background-image:url(/img/icon_info.gif);
}
.note{
	color:#557B20;	
	background-image:url(/img/icon_tick.gif);
}
.watermarkOn {
	color:#999;
}
.minor{/*information that is of less importance, but neccessary - use to de-emphasise things*/
	color:#999;
	font-size:11px;
}
.total{
	font-weight:bold;
	text-align:right;
	line-height:40px;
	border-top:1px solid #DCDEE5;
	border-bottom:2px solid #DCDEE5;
	margin-top:1em;
}
.btnPostCodeLookUp {
	display:none;
}
.imgLoaderContainer {
	text-align:center;
}
/*-- Checkout -- */
#content .ddDatePickerDayDropDown, #content .ddDatePickerMonthDropDown, #content .ddDatePickerYearDropDown {
	display:inline;
	width:50px;
}
/*.checkout #rdoLstGender label, 
.checkout #rdoLstGender input, 
.checkout #rdoLstDietaryStatus label, 
.checkout #rdoLstDietaryStatus input, 
.checkout #ctlEditDetails_rdoLstDietaryStatus label, 
.checkout #ctlEditDetails_rdoLstGender label,
.checkout #ctlEditDetails_rdoLstDietaryStatus input
.checkout #ctlEditDetails_rdoLstGender input,
.defaultDelCheckbox input {
	display:inline;
}
.defaultDelCheckbox input {
	width:auto;
}
.checkout #rdoLstGender input, .checkout #rdoLstDietaryStatus input, .checkout #ctlEditDetails_rdoLstGender input, .checkout #ctlEditDetails_rdoLstDietaryStatus input {
	width:0;
	margin-right:1.5em;
}

.js .lblStreetName, .js .lookupResults, .js .btnFetchAddress, .js .addressContainer, .js .check, .checkout .btnEnterAddress, .js .btnNoJsSelectDeliveryAddress {
	display:none;
}
.js .checkout .btnEnterAddress {
	display:inline;
	font-weight:normal;
}
#content .postcode {
	display:inline;
	width:6em;
}
.checkout .btnFindAddress {
	display:inline;
	width:auto;
	margin:0 0 -8px;
}
*/
/* ---------------------------------------- Browser testing ------------------------------------------ */
