<!--

/* Menu Boxes, GLOBAL CONTROL */
/* Menu Boxes are used on the left and right panes of all screens */
/* Note, the width of all boxes is 100%, the actual width is determined by the master table set in top.html, box menus can be swapped from left to right as required */

    	/* Font & color, for ALL text items within left and right menu boxes */
    	.menu_boxtext_h1,
    	.menu_boxtext_h2,
		.menu_boxtext,
		.menu_boxlist,
		.menu_boxcartitem_link
    	{
    	}

/* ________________________________________________________________________________________________________________ */


/* ___ BOX FRAME (start) ___ */

		/* This did use floats, but ran into problems at the last minute with firefox, so changed to widths in the html, which were already in tds anyway */

    	/* Box Frame, to set the overall box size and position*/
    	.menu_boxframe
    	{
    	width:100%;			/* 99.6 may seem like an odd number, but it was a quick frig to get the left, middle, right boxes all lining up perfectly, fix it if i need to at a later point */
    	}

    	.menu_boxframe_checkout
    	{
		margin-top:6px;		/* sets gap between progress bar, and main white box, and also main white box, and bottom_checkout frame */
    	width: 944px;			/* virtually full width please, in line with the width of the progress bar */
    	}

    	.menu_boxframe_mod4_carousel_products
    	{
    	width:620px;
    	}

    	.menu_boxframe_halfwidth_left
    	{
		vertical-align:top;
    	}

    	.menu_boxframe_halfwidth_right
    	{
		vertical-align:top;
    	}

/* ___ BOX FRAME (end) ___ */


/* ________________________________________________________________________________________________________________ */


/* ___ BOX HEADERS (start) ___ */

		/* Box Header, set the standard set-up, and base variant with BLUE header */

    	/* Box Heading Container, don't think this is in use */
    	.menu_boxheading_container
		{
		}

    	/* Box Heading, sets the image and height of the box heading */
	   	.menu_boxheading,
   		.menu_boxheading_variant0,
    	.menu_boxheading_variant1,
   		.menu_boxheading_variant2,
   		.menu_boxheading_bluebar,
   		.menu_boxheading_silverbar,
   		.menu_boxheading_darkgrey,
   		.menu_boxheading_darkblue,
   		.menu_boxheading_oeblue,
   		.menu_boxheading_black,
   		.menu_boxheading_yellow,
   		.menu_boxheading_variant5
    	{
		position:relative; left:0px; top:0px;		/* can now use absolute in any nested css */
		background-image:url('../images/boxheader/navy/top.gif'); 
		background-position: 0px 0px;
   		background-repeat: repeat-x;
		height:23px;
   		}
    
    	/* Box Heading, top left corner */
   		.menu_boxheading_left,
   		.menu_boxheading_left_variant0,
    	.menu_boxheading_left_variant1,
   		.menu_boxheading_left_variant2,
   		.menu_boxheading_left_bluebar,
   		.menu_boxheading_left_silverbar,
   		.menu_boxheading_left_darkgrey,
   		.menu_boxheading_left_darkblue,
   		.menu_boxheading_left_oeblue,
   		.menu_boxheading_left_black,
   		.menu_boxheading_left_yellow,
   		.menu_boxheading_left_variant5,
   		.menu_boxheading_left_grey
    	{
		position:absolute; left:-2px; top:0px;
		background-image:url('../images/boxheader/navy/topleft.gif'); 
    	background-repeat: no-repeat;
		width:6px;
		height:23px;
    	}

    	/* Box Heading, top right corner */
   		.menu_boxheading_right,
    	.menu_boxheading_right_variant0,
   		.menu_boxheading_right_variant1,
   		.menu_boxheading_right_variant2,
   		.menu_boxheading_right_bluebar,
   		.menu_boxheading_right_silverbar,
   		.menu_boxheading_right_darkgrey,
   		.menu_boxheading_right_darkblue,
   		.menu_boxheading_right_oeblue,
   		.menu_boxheading_right_black,
   		.menu_boxheading_right_yellow,
    	.menu_boxheading_right_variant5,
    	.menu_boxheading_right_grey
   		{
		position:absolute; right:-4px; top:0px;
		background-image:url('../images/boxheader/navy/topright.gif'); 
   		background-repeat: no-repeat;
		width:6px;
		height:23px;
   		}

		/* Box Header, Variant 0, same as above, but with BLUE header */

    		.menu_boxheading_variant0
	    	{
			background-image:url('../images/boxheader/blue/top.gif'); 
   			}
    
	    	.menu_boxheading_left_variant0
			{
			background-image:url('../images/boxheader/blue/topleft.gif'); 
	    	}

    		.menu_boxheading_right_variant0
			{
			background-image:url('../images/boxheader/blue/topright.gif'); 
			}

		/* Box Header, Variant 1, same as above, but with GREEN header */

	    	.menu_boxheading_variant1
			{
			background-image:url('../images/boxheader/green/top.gif'); 
	   		}
    
	    	.menu_boxheading_left_variant1
   			{
			background-image:url('../images/boxheader/green/topleft.gif'); 
	   		}

	    	.menu_boxheading_right_variant1
			{
			background-image:url('../images/boxheader/green/topright.gif'); 
	    	}

		/* Box Header, Variant 2, same as above, but with RED header */

	    	.menu_boxheading_variant2
    		{
			background-image:url('../images/boxheader/red/top.gif'); 
   			}
   
	    	.menu_boxheading_left_variant2
   			{
			background-image:url('../images/boxheader/red/topleft.gif'); 
	    	}

	    	.menu_boxheading_right_variant2
   			{
			background-image:url('../images/boxheader/red/topright.gif'); 
	    	}

		/* Box Header, Variant 5, with no coloured top banner */

	    	.menu_boxheading_variant5
    		{
			background-image:url('../images/boxheader/top.gif'); 
	    	height:6px;
    		}
    
    		.menu_boxheading_left_variant5
    		{
			position:absolute; left:-1px; top:0px;
			background-image:url('../images/boxheader/topleft.gif'); 
			height:6px;
	    	}

	    	.menu_boxheading_right_variant5
    		{
			position:absolute; right:-3px; top:0px;
			background-image:url('../images/boxheader/topright.gif'); 
			height6px;
    		}

		/* Box Header, Blue Bar, BLUE header, but with rounded corners */

	   		.menu_boxheading_bluebar
    		{
			background-image:url('../images/boxheader/navy/top_rounded.gif'); 
			height:22px;
   			}

	    	.menu_boxheading_left_bluebar
			{
			background-image:url('../images/boxheader/navy/topleft_rounded.gif'); 
			height:22px;
	    	}

	    	.menu_boxheading_right_bluebar
			{
			background-image:url('../images/boxheader/navy/topright_rounded.gif'); 
			height:22px;
			}

		/* Box Header, Silver Bar, SILVER header, but with rounded corners */

	   		.menu_boxheading_silverbar
    		{
			background-image:url('../images/boxheader/silver/top_rounded.gif'); 
			height:22px;
   			}

	    	.menu_boxheading_left_silverbar
			{
			background-image:url('../images/boxheader/silver/topleft_rounded.gif'); 
			height:22px;
	    	}

	    	.menu_boxheading_right_silverbar
			{
			background-image:url('../images/boxheader/silver/topright_rounded.gif'); 
			height:22px;
			}


		/* Box Header, Dark Grey, Dark Grey header, used for section pages only (csp) and (per) */

	   		.menu_boxheading_darkgrey
    		{
			background-image:url('../images/boxheader/darkgrey/top.gif'); 
			height:22px;
   			}

	    	.menu_boxheading_left_darkgrey
			{
			background-image:url('../images/boxheader/darkgrey/topleft.gif'); 
			height:22px;
	    	}

	    	.menu_boxheading_right_darkgrey
			{
			background-image:url('../images/boxheader/darkgrey/topright.gif'); 
			height:22px;
			}

		/* Box Header, Dark Blue, Dark Blue header, used for section pages only (vdo) */

	   		.menu_boxheading_darkblue
    		{
			background-image:url('../images/boxheader/darkblue/top.gif'); 
			height:22px;
   			}

	    	.menu_boxheading_left_darkblue
			{
			background-image:url('../images/boxheader/darkblue/topleft.gif'); 
			height:22px;
	    	}

	    	.menu_boxheading_right_darkblue
			{
			background-image:url('../images/boxheader/darkblue/topright.gif'); 
			height:22px;
			}

		/* Box Header, OE Blue, OE Blue header, used for section pages only (rubber seals shop) */

	   		.menu_boxheading_oeblue
    		{
			background-image:url('../images/boxheader/oeblue/top.gif'); 
			height:22px;
   			}

	    	.menu_boxheading_left_oeblue
			{
			background-image:url('../images/boxheader/oeblue/topleft.gif'); 
			height:22px;
	    	}

	    	.menu_boxheading_right_oeblue
			{
			background-image:url('../images/boxheader/oeblue/topright.gif'); 
			height:22px;
			}

		/* Box Header, Black, Black header, used for section pages only (Pertronix and Flat-4) */

	   		.menu_boxheading_black
    		{
			background-image:url('../images/boxheader/black/top.gif'); 
			height:22px;
   			}

	    	.menu_boxheading_left_black
			{
			background-image:url('../images/boxheader/black/topleft.gif'); 
			height:22px;
	    	}

	    	.menu_boxheading_right_black
			{
			background-image:url('../images/boxheader/black/topright.gif'); 
			height:22px;
			}

		/* Box Header, Yellow, Yellow header, used for section pages only (Spax) */

	   		.menu_boxheading_yellow
    		{
			background-image:url('../images/boxheader/yellow/top.gif'); 
			height:22px;
   			}

	    	.menu_boxheading_left_yellow
			{
			background-image:url('../images/boxheader/yellow/topleft.gif'); 
			height:22px;
	    	}

	    	.menu_boxheading_right_yellow
			{
			background-image:url('../images/boxheader/yellow/topright.gif'); 
			height:22px;
			}

		/* Box Header, Grey, no top banner, pale grey though */

    		.menu_boxheading_left_grey
    		{
			position:absolute; left:-1px; top:0px;
			background-image:url('../images/boxheader/grey/topleft.gif'); 
			height:6px;
	    	}

	    	.menu_boxheading_right_grey
    		{
			position:absolute; right:-3px; top:0px;
			background-image:url('../images/boxheader/grey/topright.gif'); 
			height6px;
    		}

/* ___ BOX HEADERS (end) ___ */


/* ________________________________________________________________________________________________________________ */


/* ___ BOX FOOTERS (start) ___ */

    	/* Box Footer, sets the box line */
    	.menu_boxfooter
    	{
		position:relative; left:0px; top:0px;		/* can now use absolute in any nested css */
		background-image:url('../images/boxheader/bottom.gif'); 
    	height:5px;
		margin-bottom: 10px;								/* This sets the gap under EVERY curved corner box on the website */
    	}
    
    	/* Box Footer, bottom left corner, bottom right corner */
    	.menu_boxfooter_left,
    	.menu_boxfooter_right
    	{
    	background-repeat: no-repeat;
		width:5px;
    	height:5px;
		}

    	.menu_boxfooter_left
    	{
		position:absolute; left:-1px; top:0px;
		background-image:url('../images/boxheader/bottomleft.gif'); 
    	}

    	/* Box Footer, bottom right corner */
    	.menu_boxfooter_right
    	{
		position:absolute; right:-3px; top 0px;
		background-image:url('../images/boxheader/bottomright.gif'); 
    	}

/* ___ BOX FOOTERS (end) ___ */


/* ________________________________________________________________________________________________________________ */


/* ___ BOX SIDES (start) ___ */

		/* Left box side */
    	.menu_boxborder_left
    	{
		position:relative; left:-1px;
		background-position: left;
		background-image:url('../images/boxheader/left.gif'); 
    	background-repeat: repeat-y;
		_height: 0;												/* Hack to fix peekaboo bug in IE6 */
		min-height: 0;											/* Hack to fix peekaboo bug in IE7 */
    	}

		/* Right box side, use menu_boxcontent */
    	.menu_boxcontent,
    	.menu_boxcontent_variant1,
    	.menu_boxcontent_variant5
    	{
		position:relative; left:4px;
		background-position: right;
		background-image:url('../images/boxheader/right.gif'); 
    	background-repeat: repeat-y;
     	background-color: #F5F5F5;						/* Standard variant has a Pale grey background */
    	padding-top:5px;
		_height: 0;												/* Hack to fix peekaboo bug in IE6 */
		min-height: 0;											/* Hack to fix peekaboo bug in IE7 */
    	}

		/* Variant 1 and 5, both have a white background */
    	.menu_boxcontent_variant1,
    	.menu_boxcontent_variant5
    	{
     	background-color: white
    	}

/* ___ BOX SIDES (end) ___ */


/* ________________________________________________________________________________________________________________ */


/* ___ BOX CONTENT (start) ___ */

    	/* Box Content, right box border (see above) and background for the main content of the box, also sets top padding */
		/*                    however, the bottom padding is controlled by boxtext, which is used within boxsection */
    	.menu_boxcontent,
		.menu_boxcontent_minicart,
		.menu-backing-banners,
		.menu-backing-banners:hover
    	{
    	}
    	
    	.menu_boxcontent,
		.menu_boxcontent_minicart
    	{
    	}

		/* Individual boxcontents, to change the background colour of boxes individually */
    	.menu_boxcontent_minicart
    	{
    	}
    
/* ___ BOX CONTENT (end) ___ */


/* ________________________________________________________________________________________________________________ */


/* ___ BOX TEXTS AND LISTS (start) ___ */

    	/* Box h1 text, font size and position, used within boxheading */
    	.menu_boxtext_h1
    	{
		font-family:impact;
		font-weight:normal;
		font-size:10.5pt;
		word-spacing: 2px;
		color: #FFFFCC;
		color: white;
    	padding-top:2px;
    	padding-left:11px;
    	}

    	/* Box h1 text, font size and position, used within boxheading */
    	.menu_boxtext_h1_right
    	{
    	font-weight:bold;
		color:white;
		text-align:right;
		position:relative; bottom:13px;
    	padding-right:8px;
    	}

        /* Box h2 text, sub header texts */
    	.menu_boxtext_h2,
		.menu_boxcarttotal
    	{
		font-weight:bold; 
    	margin-left:10px;
    	margin-right:5px;
		margin-bottom:5px;
    	}

    	/* Box text, for normal text, used within boxcontent, can be used multiple times to create paragraphs, due to bottom padding*/
    	.menu_boxtext
    	{
    	margin-left:5px;
    	margin-right:5px;
		padding-bottom:5px;
    	}

    	/* Box text, as above, but just with large paddings*/
    	.menu_boxtext_large_padding
    	{
		padding-top:8px;
    	margin-left:10px;
    	margin-right:15px;
		padding-bottom:12px;
    	}

    	/* Box list, uses p classes on each line within a list, used within boxcontent */


		.menu_boxlistcurrent
    	{
		color:#030928;
		}

    	.menu_boxlist
    	{
		margin-left:4px;
		margin-right:4px;
		border:1px solid #F5F5F5;						/* needs a hidden border, to avoid a widget shuffle on hover */
    	}

    	.menu_boxlist,
		.menu_boxlistcurrent
    	{
		position:relative; left:-2px;
		background-color:transparent;
    	padding-top: 2px;
    	padding-bottom: 1px;
    	padding-left: 8px;
    	height:15px;
		overflow:hidden;
		position:relative;z-index:2;
    	}
    	
		.menu_boxlistcurrent,
		.menu_boxlistcurrent:hover
    	{
		position:relative; left:7px;
	   	background-color: white;
		border-top:1px solid #DEDEDE;
		border-left:1px solid #DEDEDE;
		border-bottom:1px solid #DEDEDE;
		font-weight:bold;
    	}

    	.menu_boxlist:hover,
		.menu_boxlistcurrent:hover
    	{
    	background-color: white;
    	}

    	.menu_boxlist:hover
    	{
		border:1px solid #DEDEDE;
    	}


/* ___ BOX TEXTS AND LISTS (end) ___ */


/* ________________________________________________________________________________________________________________ */


/* ___ BOX BUTTONS AND TEXT INPUTS (start) ___ */

		/* Menu Box Buttons and Text Inputs, all used within boxcontent */
	
    	/* Text Input boxes, used within boxes */
    	.menu_boxtextinput
    	{
    	background-color: #FFFFFF;
    	border: 1px #CCCCCC; 
    	border-style: solid; 
    	height: 13px; 
    	padding-left:5px;
    	padding-top:1px;
    	}
    
    	/* Select boxes, used within boxes */
    	.menu_boxselectinput
    	{
    	background-color: #FFFFFF;
    	height: 18px; 
    	padding-left:0px;
		text-align: right;
    	}

    	/* Submit button, used within product /sections (also used elsewhere, so these really needs moving to another css file */
    	.original_style_boxbutton40,
    	.original_style_boxbutton50
    	{
		font-size:7pt;
		color:black;
    	background-color: #E6E5E7;
    	border: 1px solid #A5A5A5;
    	height: 18px;
		padding-top:2px;
		padding-right:5px;
    	width: 60px;
    	cursor: pointer;
    	}

    	.original_style_boxbutton50
    	{
    	width: 50px;
    	}

    	.original_style_boxbutton40:hover,
    	.original_style_boxbutton50:hover
    	{
		color:#0A3971;
    	background-color: #CDD3D9;
		}

    	/* Submit button, used within forms, within boxes (also used elsewhere now, so these really needs moving to another css file */
    	.menu_boxbutton40,
    	.menu_boxbutton40b,
    	.menu_boxbutton60,
    	.menu_boxbutton60b,
    	.menu_boxbutton60c,
		.menu_boxbutton92
    	{
    	background-repeat: no-repeat;
    	color: white;
    	border: 0px;
    	height: 21px;
    	text-align:center;
    	cursor: pointer;
    	}
    
    	.menu_boxbutton40,				/* used for input type submit */
    	.menu_boxbutton60,
    	.menu_boxbutton60c
    	{
		display:-moz-inline-box;				/* had to use this to get text to align properly in FF */
		display:inline-block;
    	background-image: url('../images/buttons/buttonblack_40.gif');
    	width: 40px;
    	padding-bottom: 3px;
    	*padding-bottom: 2px;				/* IE only */
    	*padding-right: 2px;					/* IE only */
		text-align:center;
    	}
    
    	.menu_boxbutton60,
    	.menu_boxbutton60c
    	{
    	background-image: url('../images/buttons/buttonblack_62.gif');
    	width: 62px;
		font-size:10.5px;
    	*padding-bottom: 1px;				/* IE only */
    	}

    	.menu_boxbutton60c				/* used for a submit on cart_checkout_link.html */
    	{
		font-size:11px;
    	}

    	.menu_boxbutton40b,				/* used for aref's */
    	.menu_boxbutton60b
    	{
		display:-moz-inline-block;	
		display:inline-block;
    	background-image: url('../images/buttons/buttonblack_40.gif');
    	background-color: transparent;
    	width: 40px;
    	padding-top:3px;
		margin-top:3px;
		padding-bottom:3px;
		text-align:center;
    	}

    	.menu_boxbutton60b
    	{
    	background-image: url('../images/buttons/buttonblack_62.gif');
    	width: 62px;
    	}

    	.menu_boxbutton92				/* this was a quick cheat to get firefox working in customer login (2 box version) */
    	{
    	background-image: url('../images/buttons/buttonblack_92.gif');
    	background-color: transparent;
    	background-repeat: no-repeat;
    	color: white;
    	border: 0px;
    	height: 21px;
    	cursor: pointer;
    	width: 92px;
    	padding-top:3px;
		margin-top:5px;
		padding-bottom:5px;
		text-align:center;
    	}
    
    	.menu_boxbutton92ff				/* this was a quick cheat to get firefox working in customer login (2 box version) */
    	{
    	background-image: url('../images/buttons/buttonblack_92.gif');
    	background-color: transparent;
    	background-repeat: no-repeat;
    	color: white;
    	border: 0px;
    	height: 21px;
    	cursor: pointer;
    	width: 92px;
    	padding-top:3px;
		padding-left:5px;
		padding-right:20px;
		margin-top:5px;
		padding-bottom:5px;
		text-align:center;
    	}

    	/* Submit button, hover */
    	.menu_boxbutton40:hover,
    	.menu_boxbutton40b:hover
    	{
    	background-image: url('../images/buttons/buttonblackblue_40.gif');
    	}
    
    	.menu_boxbutton60:hover,
    	.menu_boxbutton60b:hover,
    	.menu_boxbutton60c:hover
    	{
    	background-image: url('../images/buttons/buttonblackblue_62.gif');
    	}

    	.menu_boxbutton92:hover,
    	.menu_boxbutton92ff:hover
    	{
    	background-image: url('../images/buttons/buttonblackblue_92.gif');
    	}

/* ___ BOX BUTTONS AND TEXT INPUTS (end) ___ */


/* ________________________________________________________________________________________________________________ */


/* ___ BOX IMAGES AND BANNERS (start) ___ */

		/* Menu Banners (Product Pictures), border is set along with boxcontent further up the page  */
    	.menu-backing-banners
    	{
    	margin-bottom: 9px;
    	}

/* ___ BOX IMAGES AND BANNERS (start) ___ */


/* ________________________________________________________________________________________________________________ */


/* ___ MINI CART SPECIFIC (start) ___ */

		/* Mini-Cart only, its in this css as all left / menu box items are in this css * /

		/* Box cart heading */
    	.menu_boxcartheading
    	{
		font-weight:bold; 
		padding-top:3px;
		padding-bottom:2px;
		margin-bottom:2px;
		}

    	/* Box cart item, individual product with qty, mainly here for underlines under each item */
    	.menu_boxcartitem
    	{
    	border-bottom: 1px solid #CCCCCC; 
		padding-bottom:4px;
		margin-bottom:1px;
    	}

    	.menu_boxcartitem,
		.menu_boxcartheading
    	{
     	border-bottom: 1px solid #CCCCCC; 
		}

    	/* Box cart item, product link */
    	.menu_boxcartitem_link
    	{
    	}

		/* Box cart total, its main formatting is taken from boxtext_h2 further up the page */
    	.menu_boxcarttotal
    	{
		text-align: right;
		padding-bottom:0px;
		}

		/* Box currency select, formatting is done elsewhere, this is just for additional control of positioning */
    	.menu_boxcartcurrencyselect
    	{
		}

/* ___ MINI CART SPECIFIC (end) ___ */

/* ________________________________________________________________________________________________________________ */


/* ___ SHOPPING CART SPECIFIC (start) ___ */

		/* addresses position */

    	.cart_address
    	{
		position:relative; left:8px; top:0px;
		}

		/* addresses edit button position */
    	.cart_address_edit_button
    	{
		position:relative; left:165px;
		}

/* ___ SHOPPING CART SPECIFIC (end) ___ */

-->