/* CSS Document */
/*CF2006 HEADER STYLING - these classes must not be used for anything but the header!*/
/*this outer container will center the site depending on the browser*/
div#confettiContainer
{
	margin-left:auto;
	margin-right:auto;
	width:940px;
}
/*the BG colour that surrounds the logo, banner*/
.mainHeaderBGImg
{
	float:left;
	position:relative;
	z-index:1;
	background:url(https://image.confetti.co.uk/i/header_images/mastHeadBack.jpg) top left repeat-x #969;
	width:100%;
	height:94px;
}
/*a simple bg colour than an image*/
.mainHeaderBG, .MENUBLOCK
{
	z-index:2;
	background-color:#fff;
	border-collapse:collapse;
}
/*the background for the main menu navigation*/
.mainHeaderNavBG
{
	background:url(https://image.confetti.co.uk/i/homepagePics/headerBackMainNav.jpg) top right repeat-x;
	height:22px;
	padding-left:2px;
	padding-right:2px;
	padding-bottom:0px;
	padding-top:0px;
}
/*the BG for the login section on the top right which has a nice swirly image*/
.mainHeaderBGRight
{
	float:right;
	position:relative;
	background:url(https://image.confetti.co.uk/i/homepagePics/loginBackgrd.jpg) top right no-repeat;
	height:117px;
	width:228px;
	text-align:right;
}

/*the bg colour for the sub navigationmenu area of the main menu*/
.mainHeaderSubNavBG
{
	background-color:#D6C2D6;
	padding-left:5px;
	padding-right:5px;
	padding-bottom:2px;
	padding-top:2px;
	width:940px;
	
}
/*Main menu navigation*/
/* navigation */
#mainNav {
	float:left;
	position:relative;
	z-index:2;
	height:23px;
	margin:-1px 0 0 0;
	padding:0px;
}
#mainNav ul {
	float:left;
	list-style:none;
	color:#FFF;
	margin:0;
	padding:0px;
	padding:0 0 0 0px;
	width:920px;
}
#mainNav ul li {
	
	height:23px;
	float:left;
	padding-left:8px;
	padding-top:0px;
	padding-right:0px;
	padding-bottom:0px;
}
/*position the headings so they are 15 pixels apart from eachother, any lower it will cause a nudging effect when the on class is used on a selected menu name*/
#mainNav ul span {

	float:left;
	height:23px;
	padding:0px 8px 0px 0px;
}
/*set the colour of the main menu text*/
#mainNav a {
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	color:#FFF;
	cursor:pointer;
	position:relative;
	text-decoration:none;
	top:3px;
}
/*Set the hover colour*/
#mainNav a:hover {
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	color:#5E365E;
	text-decoration:none;
}
/*use this class on the "li" tags, it will create a border around the menu name */
#mainNav .on {
	background:url(https://image.confetti.co.uk/i/homepagePics/mainLeft.jpg) top left repeat-x ;
	color:#5E365E;
	font-weight:bolder;
	padding-left:8px;
	padding-bottom:0px;
	padding-right:0px;
	padding-top:0px;
}
/*within the li tag there should be spans, this will create the closing border around the text
giving the impression the of a tabular effect!*/
#mainNav .on span {
	float:left;
	position:relative;
	background:url(https://image.confetti.co.uk/i/homepagePics/mainright.jpg) bottom right no-repeat;
		
}
/*the text within the on class SHOULD NOT have an a tag, it should be encapsulated with an em tag to show that the tab is selected so the text within the tab is now bolded!*/
#mainNav .on span em {
	font-size:100%;
	font-style:normal;
	font-weight:bolder;
	position:relative;
	top:0px;
}

/*Class to hold Confetti Baby image link*/
#confettiBabyImage {
	padding-left:0px;
	padding-bottom:0px;
	padding-right:0px;
	padding-top:0px;
}

/*sub menu styling, this is copy from the FC style that was made*/
/*first ID creates the bg and a border image from the left side*/
#subNav {
	font-size:100%;
	float:left;
	/*position:relative;*/
	z-index:3;
	margin-top:0;
	/*background: #D6C2D6 url(/i/header_images/subNavBackLft.gif) bottom left no-repeat;*/
	height:23px;
	width:100%;
}
/*second is a class of the same name, this ensures the element to have a rounded border on each ends using the id on the outer element and class within it which will make a image border on the right*/
#subNav .subNav {
	/*background:url(https://image.confetti.co.uk/i/header_images/subNavBackRgt.gif) bottom right no-repeat;*/
	width:940px;
	height:23px;
	color:#330066;
}
#subNav ul {
	list-style:none;
	color:#5E365E;
	margin:0 0 0 0px;
	padding: 1px 0 0 0;
	white-space:nowrap;
}
#subNav ul a {
	
	color:#5E365E;

}
#subNav ul a:hover {
	
	color:#5E365E;
	
}
#subNav ul li {
	float:left;
	height:23px;
	padding-left:5px;
	width:10%;
}
#subNav ul li {
	width:auto;
}
#subNav ul span {
	float:left;
	height:23px;
	padding:0 5px 0 0;
}
/*text style for the sub menu text links*/
#subNav a {
	
	font-size:12px;
	font-weight:normal;
	cursor:pointer;
	position:relative;
	top:4px;
}
#subNav a:hover {
	
	font-size:12px;
	font-weight:normal;
	cursor:pointer;
	position:relative;
	top:4px;
	color:#5E365E;
}
/*hover colour for the sub text link*/

/*the li tag should use this class to make the left border appear around the submenu text, this will only work within the #subNav*/
#subNav .on {
	font-weight:bold;
	padding-left:10px;
	height:25px;
	position: relative;
	top: -2px;
	margin-bottom: -3px;
	color:#fff;
}
/*the span will create the right border around the submenu heading that is selected*/
#subNav .on span {
	float:left;
	font-size:13px;
	position:relative;
	padding:2px 10px 0 0;
	color:#FFFFFF;
}
/*the text within the selected sub tab should ONLY have a em like the mainmenu tabs, so it will appear bolded!*/
#subNav .on span em {
font-size:13px;
	font-size:100%;
	font-style:normal;
	position:relative;
	top:4px;
}
/*span tag should start with this, as it will level the breadcrumb text and the search bar on the opposite end*/
.breadCrumbBG
{
	background-color:#F3E8F4;
}
.breadCrumbContainer
{
	display:inline;
	float:left;
	margin:4px 0px 0px 0px;
	padding-left:5px;
	padding-right:5px;
	padding-bottom:0px;
	padding-top:2px;
	
}	
/*Removes padding and cellspacing from the master table and borders*/
body {
	margin-top:0px;
	/*margin-left:0px;*/
	
/*topmargin="3" leftmargin="3" marginwidth="3" marginheight="3"*/
}
table.master {

/*	width:auto;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	border-collapse:collapse;*/
}
/*top menu block style*/
.header {
 /*	padding:0px;
 	margin:0px;*/
}
/*left column style*/
td.left 
{
	width:139px;
    font-size:x-small;
	vertical-align:top;
	background-color:#c9b9c9;
	color:#33CC33;
 	padding:0px 0px 0px 0px;
 	margin: 0px 0px 0px 0px;	
 	border:none;
	border-style:none;	
}
/*core body style*/
td.body {
	margin-left: auto; 
	margin-right: auto;
	vertical-align:text-top;
	width:515px;
}
/*style for the promos on the right*/
.right {
	border-collapse:collapse;
	vertical-align:top;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px;
}
/*Remove the bordering around the promo images*/
.right img {
	border:none;
}
/*banner border removal*/
.bannerBlock img
{
	border:none;
}
/*Celebrations/retail column will contain images with links the borders need to be removed*/
.retailColumn img
{
	border:none;
}
/*left styling*/
.leftshop{
 	width:139px;
   /* font-size:x-small;*/
 	background-color:#c9b9c9;
 	vertical-align:top;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
 	margin:0px;
 	border:none;
 	border-style:none;
	/*text-decoration:none;*/
}
/*left side shop listings, text that are not bold*/
.subchannel
{
    text-decoration: none;
	font-size:x-small;
    color:#330066;
	padding-left:10px;

}
/*left side shop listings text*/
a.subchannelbld:visited, a.subchannelbld:active, a.subchannelbld:link, a.subchannelbld:hover
{
   	text-decoration: none;
	font-size:85%;
	font-weight:bold;
	color:#330066;
	padding-left:10px;
}
/*end of left styling*/



/* OLD Footer Styling
/*anchor class for the footer text that appear as links
.footer
{
	font-size:x-small;
	color:#330066;
	padding:0px;
	margin:0px;
	line-height:12px;
	
}
.footerText
{
	font-size:x-small;
	color:#330066;
	padding:0px;
	margin:0px;	
	line-height:12px;
}
/*anchor class for the footer text that appear as links
a.footerlink
{
	font-size:x-small;
	color:#330066;
	padding:0px;
	margin:0px;	
	line-height:12px;
}
a.footerlink:hover
{
    color: #990066;
	line-height:12px;
}
/*footer headings appear in bold black
.footerheadings
{
	font-size:85%;
	font-weight:bold;
	background-color:#fff;
	color:#000000;
	padding:0px;
	margin:0px;	
	line-height:15px;
}
*/




/*set required form inputs and selects to a light yellowy colour to indicate an error*/
.formError
{
	background-color:#fffce2;
}


/* This portion is for sub navigation colour for various categories*/
.homeColorBG
{
background-color:#6666FF;
}
/*---------------------------------------------------------------------- */

/*added by b.p 07.01.22 - remove form padding, inline causes validation errors*/
.removeFormPadding
{
	padding:0px;
	margin:0px;
}




/* ######### Style for Drop Down Menu ######### */



.chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
content: " v";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}


.dropmenudiv{
position:absolute;
margin-top: 16px;
margin-left:0px;
border-bottom-width: 1px;
font:normal 12px Verdana;
line-height:8px;
z-index:100;
background-color: #D6C2D6;
width: 180px;
visibility: hidden;


/* filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); Add Shadow in IE. Remove if desired*/
}


.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid white; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color:#330066;

}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background:url(https://image.confetti.co.uk/i/homepagePics/mainLeft.jpg) top left repeat-x;
background-color: #D6C2D6;
color:#330066;
}


.chromemenuActive		{
	display:block;
	visibility:visible;
}.chromemenuInactive	{
	display:none;
	visibility:hidden;
}
.formError
{
	background-color:#fffce2;
}


div.mainFormError p.error
{color:#FF0000; padding: 1em;}
div.voucherError p.error
{color:#333333;  padding: 1em;}
div.error
{ background-color:#FFFCE2; }

.errorBlockRed
{ background-color:#fffce2; }