/*
 * Mamas & Papas Style Sheet
 * Description : A default stylesheet loaded on all pages within controller.class.php.
 * It is one of 7 stylesheets loaded on every page by default, they are (in order) :
 *
 *                              generic/buttons.css
 *                              generic/default.css
 *                              generic/navigation.css
 *                              generic/templates.css
 *                              generic/dirty.css
 *                              generic/modes.css
 *                              celebros/autocomplete.css
 *
 * They all exist within the ""web/css/generic" folder. It contains two types of template definition. This
 * file is NOT A DUMPING GROUND for any adhoc page-specific class. Please use the appropriate CSS,
 * create a new CSS file else use "dirty.css" for anything temporary such as promotions or code that needs to be
 * refactored.
 *
 * SECTION 1 contains layout definitions that are mostly referenced directly by container.tpl or any directly
 * included file as follows...
 *      DEBUGGER
 *      If DEBUG is ON, a div displayed directly after the HTML BODY tag and prior to anything else.
 *      MAIN
 *      Outside of the actual body tag and debug classes, the "MainContainer" is the uppermost container.
 *      HEADER
 *      Contains the top-level navigation bar and everything above it.
 *      TOP LINKS CONTAINER
 *      Formats the links displayed in the header such as "Sign In", "Gift List" and "Our Stores" etc...
 *      LOCALE
 *      Formats the British and Irish flags displayed in the header.
 *      SEARCH
 *      Referenced within header.inc it contains a form with search box displayed in the header of most pages.
 *      TOP SHOPPING BAG
 *      Formats the mini shopping cart displayed at the top of each page
 *      DYNAMIC
 *      Optional div displayed directly below the "header" container containing the breadcrumbs.
 *      BREADCRUMBS
 *      Formats the breadcrumbs if they exist.
 *      BODY
 *      Not to be confused with the HTML body tag it formats everything between the header and the footer.
 *      FOOTER
 *      Displayed at the base of each page.
 *
 * SECTION 2 contains layout definitions for MAJOR globally exploited classes as follows...
 *      TOOL TIPS
 *      Mouseover effect displaying DB driven hints and tips against individual elements
 *      PAGINATE
 *      Pagination layout.
 *      PAGE NUMBERS
 *      Format the buttons used for pagination.
 *      ACCORDIAN
 *      Formats the left navigation bar, a javascript accordian solution.
 *      CAPTION BOXES
 *      Various IDs and associated definitions used across the website
 *          BOX 1
 *          Mostly used as a "message box" populated dynamically.
 *          BOX 2
 *          Referenced in various TPL files. Left hand side - white - as used as simple emphasis box
 *          BOX 3
 *          Referenced in various TPL files. Left hand side - red - as used in delivery
 *          BOX 4
 *          Referenced in various TPL files. Left hand side - red - as used in delivery
 *
 * SECTION 3 contains any miscellaneous standalone definitionsd that needs to exist globally.
 *
 *
 * Author : Tom Llewellyn/Rob Farnell/Charles Jackson
 * Dated : 2007, last update 2010.
 *
 */

/*
 * Miscellaneous global IE Fix for various containers listed below
 */
* html #HeaderContainerLogo,* html #HeaderContainer,* html #DynamicContainer,* html #BodyContainer,* html #HeroContainer, * html #FooterBlocksContainer {
    width: 992px;
}

/* common sprite styles */
.sprite {
	overflow:hidden;
	white-space:nowrap
}

/* SECTION 1 */


/* DEBUGGER
 * The debugger classes are referenced within the container.tpl file
 */

/* Top-level container for debug info */
#debugbar {
    background-color:#ccc; /* Pale Grey */
    width:100%;
    border-bottom:4px solid #fff; /* White */
    color:#777; /* Navy Blue */
    font-size:10px;
}

/* Referenced in container.tpl */
#debugbar input{
    background-color:#eee; /* Bright Blue */
    color:#777; /* Navy Blue */
    border:1px solid #777; /* Navy Blue */
    font-size:10px;
    margin:0;
    padding:0;

}

/* Referenced in container.tpl */
#debugbar select{
    background-color:#eee; /* Bright Blue */
    color:#777; /* Navy Blue */
    border:1px solid #777; /* Navy Blue */
    font-size:10px;
    margin:0;
    padding:0;
}

/* Referenced in container.tpl */
#debugbar .formContainer{
    float: left;
    margin: 1px 25px 3px 3px;
}

/* Referenced in container.tpl */
#debugbar .closeDebugbar{
    float: right;537
    margin: 3px 3px 3px 0;
}

/*
 * Outside of the actual body tag and debug classes, the "MainContainer" is the uppermost container. 
 * Has two directly associated classes listed below that are loaded dynamically.
 */
#MainContainer {
    width:100%;
    /*background-color:#989898;*/ /* White */
	margin-top:-1px; /* To accomdate iframe for coremetrics tracking*/
}

#MainContainer .skate{
    background-image:url(/images/generic/skate_back.gif);
    background:#00CCFF; /* Turquoise */
}

/*
 * The following 3 "Header" CSS definitions contains the top-level navigation bar and everything
 * above it including the site logo and mini shopping bag.
 */
/*#HeaderSpan {
   width: 100%;
   height: 1%;
   margin: 0 auto 0 auto;
   display:table;
   background-color: #ebe6d9;
}*/

#HeaderContainer {
    width: 992px;
    margin: 0 auto 0 auto;
	background-color:#3b3b39;
	position:relative; /* required for mini bag */
    z-index:50; /* required for mini bag + nav to display top */
	height:136px;
}

#HeaderContainerLogo {
    max-width: 992px;
    height: 85px;
    margin: 0 auto 0 auto;
}

/*
 * Header logo
 */
#logo {
	/*margin: 30px 0 30px 30px;
	float: left;*/
	left:30px;
	position:absolute;
	top:30px
}

/* Referenced in header.inc, a container used to display affiliate image logo */
#afflogo {
    left:30px;
    position:absolute;
    top:20px
}

/* Referenced in header.inc, contains a tag line directly beneath the affiliate logo */
#brandingDiv {
    display: block;
    font-size: 12px;
    color: #ccc;
}

/*
 * TopLinkContainer* formats the links displayed in the header such as "Sign In", "Gift List" and 
 * "Our Stores" etc... It also contains the "SearchContainer" and associated form.
 * The links are displayed as an inline unordered list.
 */
/*#ToplinksContainer {
    float:left;
    margin-top:0px;
	margin-left:48px;
}*/

ul#utilities {
	left:343px;
	position:absolute;
	top:10px;
	z-index:101
}
ul#utilities li {
    float:left;
    font-size:10px;
    padding-right: 5px;
}
ul#utilities a {
    color: #d8d8d7;
    padding:0 5px 0 0;
    margin:0 0 1px 0;
    background-repeat:no-repeat;
    background-position:center left;
    
}
ul#utilities a:hover {
    color: #d8d8d7;
}
ul#utilities li.endUtility{
	border-right:2px dotted #71716f;
}	

/*
 * The "Locale" classes format the union jack and irish flag displayed within the header, when clicked
 * change a users location
 */
/* locale selection */
#Locale {
	background:url(/images/locale/locale_bg.png) left top no-repeat;
	height:19px;
	margin:-3px 0 0 10px;
	position:relative;
	width:49px;
	z-index:11
}
.LocaleExpanded {
	background:url(/images/locale/locale_bg_expand.png) left top no-repeat !important
}
#Locale a {
	border:0;
	display:block;
	height:19px;
	margin-bottom:3px;
	outline:none;
	width:59px
}
#Locale a.eu {background:url(/images/locale/flag/eu_flag.png) 5px 3px no-repeat}
#Locale a.eu:hover {background:url(/images/locale/flag/eu_flag_on.png) 5px 3px no-repeat}
#Locale a.gb {background:url(/images/locale/flag/gb_flag_on.png) 5px 3px no-repeat}
#Locale a.gb:hover {background:url(/images/locale/flag/gb_flag.png) 5px 3px no-repeat}
#Locale a.ie {background:url(/images/locale/flag/ie_flag.png) 5px 3px no-repeat}
#Locale a.ie:hover {background:url(/images/locale/flag/ie_flag_on.png) 5px 3px no-repeat}
#Locale a span {
	display:none
}

#LocaleSelect {
	background:url(/images/locale/locale_bg_expand.png) left bottom no-repeat;
	height:42px;
	left:0;
	margin:0;
	padding:0;
	position:absolute;
	top:19px;
	white-space:nowrap;
	width:59px;
	z-index:999
}
#LocaleSelect a {
	color:#999;
	display:block;
	background:none;
	border-right:none;
	margin:0;
	text-decoration:none
}
#LocaleSelect dd {
	margin:0 0 0 0;
	padding:0
}
#LocaleSelect dd.last {
	padding:0
}
#LocaleSelect dt {
	display:none
}

/*
 * Referenced within header.inc it contains a form with search box displayed in the header of most pages
 */
#SearchContainer {
    margin-left:15px;
    position:relative;
    right: 17px;
}

/*
 * Formats the input field on the search form within the searchContainer listed at the top of most pages
 */

#SearchContainer .search_box {
    font-size:0.9em;
    width:200px;
    padding:2px;
    vertical-align:top;
    color:#999999; /* Dark Blue */
}

/*
 * TopShoppingBag* is used to format the mini shopping cart displayed at the top of each page. The
 * "TopShoopingBag" ID is the top-level container and is referenced in container.tpl.
 */
#TopShoppingBag {
    background:url(/images/backgrounds/shoppingbag_bgbottom.png) bottom center no-repeat;
    color:#fff; /* White */
    cursor:pointer;
    z-index: 200; /*must be bigger than everything other than lightwindows*/
	padding-bottom:11px;
    position: absolute;
    right:9px;
    top:-2px;
    height: auto;
    width:216px; /*IE7*/
}

/* Referenced in container.tpl */
#TopShoppingBag #TopShoppingBagSummary {
	background:#e2e1e0 url(/images/backgrounds/shoppingbag_top.jpg) left top no-repeat;
    color:#fff; /* White */
    cursor:pointer;
    height:49px;
    position:relative
}

/* Referenced in container.tpl */
#TopShoppingBag #TopShoppingBagSummary .summaryBasket {
	color:#67645f;
	font-size:12px;
}

/* Referenced in container.tpl */
#TopShoppingBag #TopShoppingBagSummary .summaryBasket a.shoppingBag {
	background:url(/images/backgrounds/shoppingbag.png) left top no-repeat;
	height:26px;
	left:10px;
	position:absolute;
	text-indent:41px;
	top:24px;
	width:41px
}
#TopShoppingBag #TopShoppingBagSummary .hasItems a.shoppingBag {
	background-position:0 -26px
}

/* Referenced in container.tpl */
#TopShoppingBag #TopShoppingBagSummary .summaryBasket a.checkOut {
	background:url(/images/backgrounds/checkout_btn.jpg) left top no-repeat;
	height:18px;
	position:absolute;
	right:10px;
	text-indent:64px;
	top:30px;
	width:64px
}
#TopShoppingBag #TopShoppingBagSummary .hasItems a.checkOut {
	background-position:0 -18px
}

/* Referenced in container.tpl */
#TopShoppingBag #TopShoppingBagSummary .summaryBasket ul {
	padding:22px 0 0 51px
}

/* Referenced in container.tpl */
#TopShoppingBag div#TopShoppingBagPreview {
	background-color:#e2e1e0;
    position:relative;
    text-align:left;
	width:216px;	/* needs to match the width of the container for bizarre css reasons */
}

/* Referenced in container.tpl */
#TopShoppingBag div#TopShoppingBagPreview li {
    position:relative;
}

/* Referenced in container.tpl */
#TopShoppingBag ul#TopShoppingBagItems {
	padding-top:10px
}

/* Referenced in container.tpl */
#TopShoppingBag ul#TopShoppingBagItems li.promotion {
    background-color:#d1d0cf; /* Darker Grey */
    padding:6px 0 6px 0;
}

/* Referenced in container.tpl */
#TopShoppingBag ul#TopShoppingBagItems li.promotion ul {
    clear:both;
    margin-bottom:6px;
}

/* Referenced in container.tpl */
#TopShoppingBag ul#TopShoppingBagItems li.item {
	background:url(/images/backgrounds/shoppingbag_divider.png) center top no-repeat;
    color:#67645f; /* Grey */
    min-height:44px;
	margin-bottom:8px;
    padding-left:52px;
    padding-right:15px;
	padding-top:8px;
    position:relative;
    text-align:left;
	width:149px;
	font-size:11px;
}
#TopShoppingBag ul#TopShoppingBagItems li.item:last-child {
	margin-bottom:0
}

/* Referenced in container.tpl */
#TopShoppingBag ul#TopShoppingBagItems li.item img {
    border:1px solid #777;
	left:10px;
	position:absolute;
}

/* Referenced in container.tpl */
#TopShoppingBag ul#TopShoppingBagItems li.item div {
    width:110px;
}

/* Referenced in container.tpl */
#TopShoppingBag ul#TopShoppingBagItems li.item span.itemprice {
    color:#595854;
    display:block;
    font-size: 1.0em;
    font-weight: bold;
    position:absolute;
    right:10px;
    text-align:right;
    top:8px;
    width:75px
}

/* Referenced in container.tpl */
#TopShoppingBag ul#TopShoppingBagItems span.itemprice del {
    color:#666666 /*Grey */
}

/* Referenced in container.tpl */
#TopShoppingBag ul#TopShoppingBagItems span.itemprice ins {
    color:#4c4c4c;
    text-decoration:none
}

/* Referenced in container.tpl */
#TopShoppingBag ul#TopShoppingBagItems li.promotion ins.promotionsaving {
    color:#4c4c4c;
	display:block;
    font-size:1.3em;
    font-weight:bold;
    margin:0 6px 0 6px;
    text-align:right;
    text-decoration:none;
}
#TopShoppingBag ul#TopShoppingBagItems li.promotion ins.promotionsaving span{
	color:#4c4c4c;
	text-decoration:line-through;
	padding-right:10px;	
}


/* Referenced in container.tpl */
#TopShoppingBag ul#TopShoppingBagItems li.promotion span.promotionmessage {
    color:#595854; /* Grey */
    display:block;
    font-size:1.1em;
    font-weight:bold;
    /*margin:0 0 6px 6px;*/
	padding:5px 10px 10px 10px;
    text-decoration:none;
}

/* Referenced in container.tpl */
#TopShoppingBag .strike_msg{
    font-weight:bold;
    color:#595854; /* Grey */
    padding:10px 0 0 0;
    text-align:center;
}

.orderByPhone{
    position:absolute;
    right:15px;
    top:65px;
    color:#fff;
    font-size:14px;      
}

/*
 * The Dynamic container is an optional div displayed directly below the "header" container and before the "body" container.
 * It is used to display breadcrumb if they exist
 */
#DynamicContainer {
    margin: 0 auto 0 auto;
    width: 992px;
}

#DynamicContainer a {
    color:#3a3a3b; /* Dark Grey */
}

#DynamicContainer a:hover {
    color:#87a712; /* Lime Green */
}

/*
 * Formats ther breadcrumbs that are displayed within the dynamic container.
 */
#Breadcrumbs {
    /*width: 982px;*/
    /*float: left;*/
    padding: 8px 0px 12px 10px;
    color:#d0d7c7; /* Pale Grey */
    font-weight:bold;
    font-size: 1em;
	position:relative;
	/*z-index:19; */
	background-color:#ffffff;
}

#Breadcrumbs a{
    font-weight:normal;
    text-decoration:underline;
}

#Breadcrumbs a:hover{
    color:#87A712; /* Lime Green */
}

/*
 * The BodyContainer exists directly below the header container and should not to be confused with the "body" HTML tag.
 * Contains everything bar the header and the footer.
 */
#BodyContainer{
    width: 992px;
    margin: 0 auto;
	background-color:#FFFFFF;
	min-height:420px;
}


/*******
Global foooter
********/
#globalFooter{
	width:992px;
	height:185px;
	overflow:hidden;
	margin:0 auto;
	background-color:#484846;
	position:relative;
	margin-bottom:20px;
}
#FooterBlocksContainer{
	padding:0 0 0 20px
}

#FooterBlocksContainer p strong, #FooterBlocksContainer .socialMedia_footer dt strong{
	font-size:15px;
	color:#FFFFFF;
}
#FooterBlocksContainer .footerColumn{
	float:left;
	margin:10px 20px 0 0;
}
#FooterBlocksContainer .footerColumn li{
	background:url(/images/homepage/footer_bullets.png) left center no-repeat;
	padding:0 0 0 20px;
}
#FooterBlocksContainer .footerColumn li a, #FooterBlocksContainer .footerColumn li a:link, #FooterBlocksContainer .footerColumn li a:active, #FooterBlocksContainer .footerColumn li, #FooterBlocksContainer .socialMedia_footer a{
	color:#ffffff;
	font-size:12px;
	text-decoration:none;
}
#FooterBlocksContainer .footerColumn li a:hover, #FooterBlocksContainer .socialMedia_footer dl dd a:hover{
	text-decoration:underline;
}
#FooterBlocksContainer .footerColumn li.openTimes{
	background:none!important;
}
#FooterBlocksContainer .footerColumn li.openTimes a, #FooterBlocksContainer .socialMedia_footer dd{
	color:#8e8e8a;
	font-size:12px;
}
#FooterBlocksContainer .cardLogos {
	position:absolute;
	bottom:20px;
	right:20px;
}
#FooterBlocksContainer .trustWave {
    position:absolute;
    bottom:80px;
    right:5px;
}
#FooterBlocksContainer .socialMedia_footer {
position:absolute;
right:20px;
top:20px;
text-align:right;
}
#FooterBlocksContainer .socialMedia_footer dl{
	position:relative;
	width:200px;
	min-height:50px;
}
#FooterBlocksContainer .socialMedia_footer dl dt{
	padding-bottom:10px;
}
#FooterBlocksContainer .socialMedia_footer dl dd.copy{
	position:absolute;
	right:30px;
}
#FooterBlocksContainer .socialMedia_footer dl dd a{
	background:url(/images/footer/footericon_twitter.png) right bottom no-repeat;
	height:27px;
	display:block;
}
#FooterBlocksContainer .socialMedia_footer dl dd a:hover{
	background-position:right bottom;
	text-decoration:underline;
	color:#66c8e8
	
}
#FooterBlocksContainer .socialMedia_footer dl dd span{
	position:absolute;
	bottom:1px;
	right:30px;
}


/*
 * Formats the footer displayed at the base of every page.
 */

/*
 * Top level footer div within which all other formatting exists it is referenced in container.tpl
 */
/*#FooterSpan {
    width: 100%;
    height: 170px;
    display:table;
    background-image:url(/images/backgrounds/bg_footer.gif);
    background-position:top;
    background-repeat:repeat-x;
}*/

/* Format the links */
/*#FooterSpan a {
    color: #3a3a3b; /* dark grey */
    /*text-decoration:none;*/
/*}*/

/* Format the footer mouseover effect */
/*#FooterSpan a:hover {
    text-decoration:underline;
}*/

/*
 * Container DIV for the block listings displayed within the footer, it is referenced within footer.inc
 */
/*#FooterBlocksContainer {
    width: 100%;
    max-width:992px;
    min-width: 992px;
    margin: 10px auto 0 auto;
}

/* Format the unordered lists within the footer, referenced in footer.inc */
/*#FooterBlocksContainer ul {
    padding-top: 10px;
}*/

/* Formats the individual listings */
/*#FooterBlocksContainer li {
    padding-left: 10px;
    background-image:url(/images/buttons/arrow_footer.gif);
    background-repeat:no-repeat;
    background-position:left center;
}*/

/*#FooterBlocksContainer li.footerTitle, #FooterBlocksContainer p.footerTitle{
	color:#7f7b78;
	font-size:130%;
	font-weight:bold;*/
	/*letter-spacing:-1px;*/
	/*line-height:18px;
	background-image:none;
	margin-left:-10px;
	padding-bottom:10px;
}
#FooterBlocksContainer li.introCopy{
	width:150px;
	background-image:none;
	margin-left:0;
	padding-left:0;
}*/



.EUcontactUs{
	background:url(/images/backgrounds/contact_us_divider.png) right 31px no-repeat;
	color:#fff;
	padding-right:20px!important;
	width:150px
}
.EUcontactUs .buttonGeneric {
	margin-top:10px;
}

/*
 * Each unordererd list within the footer has a container DIV name FooterBlock* where * equals 1 thru 5. They are referenced
 * in footer.inc. There are generic qualities between them and all sub formatting below.
 */
#FooterBlock1, #FooterBlock2, #FooterBlock3, #FooterBlock4 {
	float: left;
    height: auto;
    padding: 0 0 10px 0;
	margin-right:28px;
}

/*#FooterBlock1 {	width: 19%; }
#FooterBlock2 { width: 19%; }
#FooterBlock3 { width: 17%; }
#FooterBlock4 { width: 14%; }*/



/*
 * The very first unordered list in the footer ghas a left margin for aesthatic purposes
 */
#FooterBlock1, #FooterBlock1 ul li{
    margin-left:15px;
}

/* IE6 width fix */
* html #FooterBlock2 {
    width:17%;
}

/*
 * FooterBlock5 contains the right-aligned images displayed in the footer and requires different formatting to the
 * previous 4 unordered lists.
 */
#FooterBlock5 {
    width: 29%;
    height: auto;
    text-align: center;
    float: right;
    padding-top:10px;
}

#FooterBlock5 img{
    margin:0 5px 0 0;
}

/*
 * The *Sifr classes format the title headings for each unordered list displayed in the footer for example, "4 Simple Ways to Buy"
 */
#FooterBlock1Sifr, #FooterBlock2Sifr, #FooterBlock3Sifr, #FooterBlock4Sifr{
    font-size: 1.4em;
    color: #3a3a3b; /* Dark Grey */
}
/* Sets a margin required for the first unordered list */
#FooterBlock1Sifr{
    margin-left: 10px;
}

/*
 * Format the telephonw number displayed in the footer
 */
#FooterBlocksContainer .footerColumn em{
    font-size: 1.5em;
    color: #ffffff;
    margin: 10px 0 0 5px;
    padding-left: 25px;
    background:url(/images/homepage/footer_telicon.png) left center no-repeat;
	font-style:normal;
	position:absolute;
	left:20px;
	bottom:20px;
}

/* SECTION 2 */

/* Tooltips CSS definitions */
.tooltip {
    position: absolute!important;
    overflow:hidden;
    font-size: 12px;
    z-index: 10000!important;
}

.tooltip .xtop, .tooltip .xbottom { display: block; background: transparent; font-size: 1px; }
.tooltip .xb1, .tooltip .xb2, .tooltip .xb3, .tooltip .xb4 { display: block; overflow: hidden; }
.tooltip .xb1, .tooltip .xb2, .tooltip .xb3 { height: 1px; }
.tooltip .xb2, .tooltip .xb3, .tooltip .xb4 { background: #666; border-left: 1px solid #333; border-right: 1px solid #333; }
.tooltip .xbottom .xb2, .tooltip .xbottom .xb3, .tooltip .xbottom .xb4 { background: #666; }
.tooltip .xb1 { margin: 0 5px; background: #333; }
.tooltip .xb2 { margin: 0 3px; border-width: 0 2px; }
.tooltip .xb3 { margin: 0 2px; }
.tooltip .xb4 { height: 2px; margin: 0 1px; }

/* Referenced in tooltips.js */
.tooltip .xboxcontent {
    padding: 0 .5em;
    margin: 0;
    color: #000; /* Black */
    text-shadow: 2px 2px 0px #CCC; /* grey */
    word-wrap:break-word;
    border: 1px solid #333; /* Dark Blue */
    border-width: 0px 1px 0 1px;
    background-color: #666; /* Navy Blue */
}


/*
 * Pagination - The "paginate" class if referenced in pagedquerypaginator.class.php only
 */
ul.pagination{
    margin:20px 0 0 0;
    float:right;
}
ul.pagination li{
    list-style:none;
    float:left;
    margin:0 0 0 5px;
}
ul.pagination li.page_numbers a, ul.pagination li.page_numbers_on a{
    display:block;
    width:21px;
    height:17px;
    text-align:center;
    padding:4px 0 0 0;
    font-size:12px;
    font-weight:bold;
    color:#6c6c6c;
    text-decoration:none;
    background:url(/images/range/pagination_tabs.png) 0 top no-repeat;
}

ul.pagination li a:hover, ul.pagination li.page_numbers_on a{
    background-position:0 -21px;
    color:#ffffff;
    text-decoration:none;
}
ul.pagination li.previous a{
    overflow:hidden;
    text-indent:26px;
    white-space:nowrap;
    display:block;
    width:26px;
    height:26px;
    background:url(/images/range/page_navigation.png) 0 bottom no-repeat;
}
ul.pagination li.previous a:hover{
    background-position:0 0;
}
ul.pagination li.next a{
    overflow:hidden;
    text-indent:26px;
    white-space:nowrap;
    display:block;
    width:26px;
    height:26px;
    background:url(/images/range/page_navigation.png) -26px bottom no-repeat;
}
ul.pagination li.next a:hover{
    background-position:-26px 0;
}
ul.pagination li.pageInfo, ul.pagination li.pageInfo a{
    padding:5px 0 0 0;
    color:#acacac;
    font-weight:bold;
    text-decoration:none;
}
ul.pagination li.pageInfo a:hover{
    color:#6C6C6C;
}
/* 
 * Accordion controls the left-hand navigation effects and is referenced by accordin.js, container.js,@charset
 * generic.xsl and create.xml,
 */
div.accordion {}

/* referenced in accordian.js and generic.xsl */
div.accordion fieldset.accordionPanel div.accordionPanelContent {
    border-color:#ccc; /* grey */
    border-style:solid;
    border-width:0 1px 0 1px;
    margin-bottom:0;
    padding:15px;
    position:relative;
}

/* referenced in accordian.js and generic.xsl */
div.accordion fieldset.accordionPanel div.accordionPanelContentLast {
    border-width:0 1px 1px 1px;
}

/* referenced in accordian.js and generic.xsl */
div.accordion fieldset.accordionPanel legend {
    color:#FFFFFF; /* white */
    display:block;
    font-weight:bold;
    margin-left:-7px;
    padding:0;
    width:100%
}

/* referenced in accordian.js and generic.xsl */
div.accordion fieldset.accordionPanel legend span {
    background:transparent url(/images/backgrounds/tab.png) right top no-repeat;
    color:#FFFFFF; /* white */
    cursor:pointer;
    display:block;
    height:31px;
    line-height:31px;
    padding-left:10px;
    width:590px
}

/* referenced in accordian.js and generic.xsl */
div.accordion fieldset legend:hover span:hover {
    background-position:right -31px;
}

/* referenced in accordian.js and generic.xsl */
div.accordion fieldset.accordionPanelOpen legend span {
    background-position:right -62px;
}

/* referenced in accordian.js and generic.xsl */
div.accordion fieldset.accordionPanelOpen legend:hover span {
    background-position:right -93px;
}

/* SECTION 3 */

/*
 * Just a.n.other set of styles that are referenced within many template files. Mostly used as
 * a "message box" populated dynamically.
 */
.CaptionBox1 { 
    padding:3%;
    border:#cccccc solid 1px;
    background-color:#f9f9f9;
    width: 94%;
    height: 1%;
    display: table;
    margin-bottom: 12px;
}

/* Referenced in various TPL files */
.CaptionBox1 .image {
    float: left;
    width: 38%;
    padding-right: 2px;
}

/* Referenced in various TPL files */
.CaptionBox1 .image img {
    border: 1px solid #CCCCCC;
}

/* Referenced in various TPL files */
.CaptionBox1 .text {
    padding-left: 2%;
    float: right;
    width: 58%;
}

/* Referenced in various TPL files */
.CaptionBox1 .text p {
    padding: 0px;
    margin: 0px;
}

/* Referenced in various TPL files */
.CaptionBox1 li{
    background-image:url(/images/footer/bullit_arrow.gif);
    padding-left:20px;
    background-repeat:no-repeat;
    background-position:center left;
    line-height:2em;
}

/* Referenced in various TPL files */
.CaptionBox1 li ul li{
    background-image:none; /*reset to prevent arrow showing on form elements when
                            nesting lists. Eg */
}

/*
 * CAPTION2
 * Referenced in many TPL template files
 */
.CaptionBox2 {
    border-top: 1px dashed #cccccc;
    border-bottom: 1px dashed #cccccc;
    width: 94%;
    padding: 3%;
}

/* Referenced in various TPL template files */
.CaptionBox2 li{
    background-image:url(/images/footer/bullit_arrow.gif);
    padding-left:20px;
    background-repeat:no-repeat;
    background-position:center left;
    line-height:2em;
}

/*
 * CAPTION BOX 3
 * Referenced in various TPL files. Left hand side - white - as used as simple emphasis box
 */
.CaptionBox3 {
    width: 94%;
    height: 1%;
    display: table;
    border: 1px solid #CCCCCC;
    background-color:#FFFFFF;
    padding: 3%;
}

/* Referenced in various TPL template files */
.CaptionBox3 li{
    background-image:url(/images/footer/bullit_arrow.gif);
    padding-left:20px;
    background-repeat:no-repeat;
    background-position:center left;
    line-height:2em;
}

/*
 * CAPTION BOX 3
 * Referenced in various TPL files. Left hand side - red - as used in delivery
 */
.CaptionBox4 {
    width: 94%;
    height: 1%;
    display: table;
    border: 1px solid #6E2638; /* Dark red */
    background-color:#f8f4f5; /* pale grey */
    color: #6E2638;
    padding: 2%;
}

/* gift wrap */
.giftWrap {
	margin-top:6px
}
.giftWrap img {
	vertical-align:middle
}
.giftWrap label {
	padding:0
}
.giftWrap label input {
	vertical-align:middle
}
.giftWrap label strong {
	color:#87A712
}
/*notices style*/
.notice{
background:url(/images/backgrounds/system_msg_bg.jpg) 0 0 no-repeat;
width:436px;
min-height:75px;
margin-bottom:20px;
}
.notice ul{
background:url(/images/backgrounds/notice_shadow.png) 0 bottom no-repeat;
min-height:75px;
padding-bottom:30px

}
.notice h2{
padding:20px 0 0 10px;
color:#807c79;
font-size:14px;
}
.notice li{
padding:10px 0 0 10px;
width:350px;
color:#807c79;
}


/**************************
Top navigation search
**************************/
#frmSearchTerm {
	height:28px;
	left:340px;
	position:absolute;
	top:40px;
	z-index:10
}
#frmSearchTerm #mainSearch_btn {
	background:url(/images/generic/search.png) right top no-repeat;
	border:medium none;
	color:#ffffff;
	cursor:pointer;
	float:left;
	height:28px;
	margin:0;
	width:80px;
	vertical-align:middle
}
#frmSearchTerm #mainSearch_btn:hover {
	background-position: right bottom;
}
#frmSearchTerm fieldset {
	border:0;
	margin:0
}
#frmSearchTerm .searchfield {
	background:url(/images/generic/search.png) left top no-repeat;
	border:0;
	color:#999999;
	float:left;
	font-size:11px;
	height:28px;
	line-height:28px;
	margin:0;
	padding-left:7px;
	width:210px;
	vertical-align:middle
}
#frmSearchTerm label{
	display:none
}

/*********************
new header style
*********************/

#UserName {
	color:#67645F;
	float:none;
	font-size:10px;
	margin:0;
	padding:0;
	position:absolute;
	right:20px;
	text-align:right;
	top:4px;
	z-index:201
}