#wrapper {
	border: 1px solid #AAAAAA;
	height: auto;
	width: 80%;
	margin: Auto;
	padding: Auto;
	text-align: left;
	background-image: url(../images/shell-background.jpg);
	background-repeat: repeat-x;
}

a.toggle:link, a.toggle:visited, a.toggle:hover {
	background-color: #003399;
	font-size: xx-small;
	text-decoration: none;
	color: #FFFFFF;
	border: 1px solid #999999;
	margin: 0px;
	padding: 2px;
	height: auto;
	text-align: right;
	width: 98%;
	display: block;
	background-image: url(../images/main-nav-background.jpg);
	background-repeat: repeat-x;
}
a.toggle:hover {
	background-color: #99CCFF;
	color: #003366;
	background-image: none;
}

.clear {
	line-height: 0px;
	clear: both;
	float: none;
	height: 0px;
	width: 0px;
	padding: 0px;
	margin-top: -2px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

/* Banner at the top */
#branding {
	height: 80px;
	width: 77%;
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom: 0%;
	margin-top: 1%;
	padding: 1%;
	border: 1px solid #AAAAAA;
	background-color: #FFFFFF;
	float: left;
	display: inline;

	background-image: url(../images/brandingBanner.jpg);
	background-repeat: repeat-x;
	}


/* This is the pageMessage - it is the warnings and confirmations. Default is that it sits ontop of the branding */
#pageMessage {
	float: left;
	display: inline;

	width: 15%;
	margin-top: 1%;
	margin-right: 0%;
	margin-bottom: 0%;
	margin-left: 0%;
	padding: 1%;
	height: 80px;
	border: 1px solid #003366;
	overflow: auto;
	background-image: url(../images/pageMessage.jpg);
	background-repeat: repeat-x;
	background-color: #000000;
	color: #000000;
}

#pageMessageAlert {
	float: left;
	display: inline;

	width: 15%;
	margin-top: 1%;
	margin-right: 0%;
	margin-bottom: 0%;
	margin-left: 0%;
	padding: 1%;
	height: 80px;
	border: 1px solid #003366;
	overflow: auto;
	background-image: url(../images/pageMessage2.jpg);
	background-repeat: repeat-x;
	background-color: #000000;
	color: #000000;
}

#pageMessage h3, #pageMessageAlert h3 {
	color: #FFFFFF;
}

/* LOGIN BOX */
#loginBox {
	width: 40%;
	margin-left: 30%;
	margin-right: 30%;
	margin-bottom: 4%;
	margin-top: 4%;
	padding: 1%;
	background-color: #FFFFFF;
	float: left;
	display: inline;

	border-top: 1px solid #000000;
	border-right: 3px ridge #666666;
	border-bottom: 3px groove #666666;
	border-left: 1px solid #000000;
	}


/* This is Admin Control Panel navigation */
#adminNavigation {
	background-color: #003366;
	width: 98%;
	padding: 0px;
	border: 1px solid #AAAAAA;
	z-index: 6;
	margin-top: 1%;
	margin-right: 1%;
	margin-bottom: 0%;
	margin-left: 1%;
	background-repeat: repeat-x;
}




/* This is for all the basic Admin Control Panel Pages */
.GenericAdminArea {
	width: 96%;
	margin: 1%;
	padding: 1%;
	float: left;
	display: inline;

	border: 1px solid #AAAAAA;
	z-index: 0;
	background-color: #FFFFFF;
}

/* This is for the 'Mirror' of the customer facing site navigation */
#siteNavigation {
	margin: 8px;
	padding: 0px;
	border: 1px solid #AAAAAA;
	float: left;
	display: inline;
	z-index: 4;
	width: 142px;
	background-color: #FFFFFF;
}

/* This is for all 'Pages' and it is where all the modules load into */
#pagesMainAdminArea {
	width: 77%;
	margin: 5px;
	padding: 5px;
	float: left;
	display: inline;
	border: 1px solid #000000;
	z-index: 0;
	background-color: #FFFFFF;
}

/* IE ONLY */
* html #pagesMainAdminArea {
width: 70%;
}

/* This sits withing the #pagesMainAdminArea and has the menu for the available modules */
#tabNav{
	padding: 0px;
	z-index: 0;
	margin-top: -5px;
	margin-left: -5px;
	margin-right: -5px;
}


.button ul {
	list-style-type:none;
	height: auto;
	margin: 0px;
	padding: 0px;
}

.button li {
	height: auto;
	margin: 0px;
	padding: 0px;
}


a.button:link, a.button:visited, a.button:hover {
	background-color: #CCCCCC;
	display: block;
	font-size: xx-small;
	text-decoration: none;
	color: #000000;
	border: 1px solid #999999;
	margin: 0px;
	float: left;
	display: inline;
	text-align: center;
	padding: 3px;
	height: auto;
	width: 110px;
}
a.button:hover {
	background-color: #EEEEEE;
}


a.headerLink:link, a.headerLink:visited, a.headerLink:hover {
	font-size: small;
	text-decoration: none;
	color: #000000;
	margin: 0px;
	font-weight: bold;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
a.headerLink:hover {
	text-decoration: underline;
	color: #333333;
}


.bigButton ul {
	list-style-type:none;
	width: 100%;
}

.bigButton li {
	height: 25px;
	line-height: normal;
	width: 100%;
}


a.bigButton:link, a.bigButton:visited, a.bigButton:hover {
	background-color: #CCCCCC;
	display: block;
	font-size: xx-small;
	text-decoration: none;
	color: #000000;
	border: 1px solid #999999;
	margin: 5px 5px 0px;
	float: left;
	display: inline;
	width: 160px;
	text-align: center;
	vertical-align: middle;
	padding: 3px;
}
a.bigButton:hover {
	background-color: #EEEEEE;
}

a.displaySiteButton:link, a.displaySiteButton:visited, a.displaySiteButton:hover {
	background-color: #990000;
	display: block;
	font-size: xx-small;
	text-decoration: none;
	color: #FFFFFF;
	border: 1px solid #000000;
	margin: 15px 0px 10px 7px;
	width: 120px;
	text-align: center;
	vertical-align: middle;
	padding: 3px;
	font-weight: bold;
}
a.displaySiteButton:hover {
	background-color: #FFFFFF;
	color: #990000;
}


a.miniButton:link, a.miniButton:visited, a.miniButton:hover {
	background-color: #CCCCCC;
	display: block;
	font-size: xx-small;
	text-decoration: none;
	color: #000000;
	border: 1px solid #999999;
	text-align: center;
	padding: 0px;
	height: auto;
	margin-top: -1px;
	margin-right: -1px;
	margin-bottom: 0px;
	margin-left: -1px;
}
a.miniButton:hover {
	background-color: #EEEEEE;
}

.buttonContainerBox {
	margin: 0px;
	padding: 2px;
	height: auto;
	float: left;
	display: inline;
	width: 75px;
}

.buttonContainerBoxDone {
	margin: 0px;
	padding: 2px;
	height: auto;
	float: left;
	display: inline;
	width: 75px;
	border: 5px solid #3399CC;
}

.shopFrame {
	margin: 1%;
	padding: 0px;
	float: none;
	height: 800px;
	width: 96%;
	border: 0px none #000000;
}

















































/* ================================================================ 
/* ================================================================ 
	ADMIN MENU
/* ================================================================ 
/* ================================================================  
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.menucontainer{
	background-color: #ACC8F6;
	
}

.menu {
	position:relative;
	font-size:11px;
	margin: 0px;
	z-index: 6;
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
	padding:0;
	margin:0;
	list-style-type:none;
	float:center;
	position:center;
	width: 100%;
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
	float:left;
	position:relative;
	text-align: center;
	}

/* style the links for the top level */
.menu a, .menu a:visited {
	display:block;
	background-image: url(../images/main-nav-background.jpg);
	font-size:11px;
	text-decoration:none;
	color:#FFFFFF;
	width:65px;
	height:18px;
	line-height:18px;
	border-top: 1px solid #003366;
	border-right: 1px solid #0099CC;
	border-bottom: 1px none #003366;
	border-left: 1px solid #003366;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:65px;
w\idth:65px;
}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
	display:block;
	background:F6F6F6;
	color:#000000;
	height:auto;
	line-height:18px;
	padding:0px;
	width:140px;
	text-align: left;
	margin: 0px;
	border: 1px solid #FFFFFF;
}




/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
	background:F6F6F6;
	color:#000000;
	text-align: left;
	}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
	visibility:hidden;
	position:absolute;
	height:18px;
	top:18px;
	left:0;
	width:110px;
	text-align: left;
	/* background:url(../images/drop-bg.jpg) repeat-y; */
}


/* another hack for IE5.5 */
* html .menu ul ul {
top:18px;
t\op:18px;
border: 1px solid #003366;
}

/* position the third level flyout menu */
.menu ul ul ul{
left:143px; 
top:0;
width:142px;
border: 1px solid #003366;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-150px;
}







/***************************************************************************/
/* This filters down the levels too
/***************************************************************************/
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
	height:18px;
	color:#FFFFFF;
	padding:0px 0px 0px 20px;
	width:110px;
	text-align: left;
	display: block;
	margin: 0px;
	border: 1px solid #FFFFFF;
}
* html .menu ul ul a{
width:110px;
w\idth:110px;
}



/***************************************************************************/
/* this filters down to the other layers too
/***************************************************************************/
/* style the top level hover */
.menu a:hover {
	color:#000000;
	background:#FFEEC2;
	border-top: 1px solid #003366;
	border-right: 1px solid #0099CC;
	border-bottom: 1px none #003366;
	border-left: 1px solid #003366;
}

.menu ul ul a:hover{
	color:#000000;
	background:#FFEEC2;
	border-top: 1px solid #003366;
	border-right: 1px solid #0099CC;
	border-bottom: 1px none #003366;
	border-left: 1px solid #003366;
	
}


.menu :hover > a {
	color:#000000;
	background:#FFEEC2;
	border-bottom: 1px none #003366;
	border-top: 1px solid #003366;
	border-right: 1px solid #0099CC;
	border-bottom: 1px none #003366;
	border-left: 1px solid #003366;
}

.menu ul ul :hover > a {
	color:#000000;
	background:#FFEEC2;
	border-bottom: 1px none #003366;
	border-top: 1px solid #003366;
	border-right: 1px solid #0099CC;
	border-bottom: 1px solid #003366;
	border-left: 1px solid #003366;
}
/***************************************************************************/


/***************************************************************************/
/***************************************************************************/
/* style the second level hover */
.menu ul ul a.drop:hover{
color:#000000;
background:#FFEEC2;

}

.menu ul ul :hover > a.drop {
	color:#000000;
	background:#FFEEC2;
}
/***************************************************************************/


/***************************************************************************/
/***************************************************************************/
/* style the third level hover */
.menu ul ul ul a:hover {
color:#000000;
background:#FFEEC2;
}
/***************************************************************************/







/***************************************************************************/
/*  					DON'T EDIT THESE ONES BELOW 					   */
/***************************************************************************/

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul, .menu ul a:hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}

/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
	visibility:visible;
}


/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}	
/***************************************************************************/
/***************************************************************************/
























/* ================================================================ 
/* ================================================================ 
	SITE MENU - I.E. THE NAVIGATION OF THE CONSUMER SITE
/* ================================================================ 
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.sitemenu {
	position:relative;
	font-size:11px;
	background-color: #336666;
	margin: 0px;
	z-index: 4;
	border: 1px solid #003366;
}

/* remove all the bullets, borders and padding from the default list styling */
.sitemenu ul {
	padding:0;
	margin:0;
	list-style-type:none;
	float:center;
	position:center;
	width: 100%;
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.sitemenu li {
	/* float:left; */
	position:relative;
	text-align: center;
	}

/* style the links for the top level */
.sitemenu a, .sitemenu a:visited {
	display:block;
	font-size:11px;
	text-decoration:none;
	color:#FFFFFF;
	width:134px;
	height:21px;
	line-height:21px;
	border: 1px solid #336666;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .sitemenu a, * html .sitemenu a:visited {
width:134px;
w\idth:134px;
}

/* style the second level background */
.sitemenu ul ul a.drop, .sitemenu ul ul a.drop:visited {
	display:block;
	background:F6F6F6;
	color:#000000;
	height:auto;
	line-height:25px;
	padding:25px;
	width:132px;
	text-align: left;
	margin: 5px;

}




/* style the third level background */
.sitemenu ul ul ul a, .sitemenu ul ul ul a:visited {
	background:F6F6F6;
	color:#000000;
	text-align: left;
	width:100px;
	}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.sitemenu ul ul {
	visibility:hidden;
	position:absolute;
	height:auto;
	top:0px;
	left:139px;
	width:142px;
	text-align: left;
	border: 1px solid #003366;
	background:url(../images/drop-bg.jpg) repeat-y;
}


/* another hack for IE5.5  AND IE 6*/
* html .sitemenu ul ul {
top:2px;
t\op:2px;
left:133px;
border: 1px solid #003366;
background: #EEEEEE url(none);
}


/* position the third level flyout menu */
.sitemenu ul ul ul{
left:139px; 
top:0;
width:139px;
border: 1px solid #003366;
}
/* position the third level flyout menu for a left flyout */
.sitemenu ul ul ul.left {
left:-150px;
}







/***************************************************************************/
/* This filters down the levels too
/***************************************************************************/
/* style the second level links */
.sitemenu ul ul a, .sitemenu ul ul a:visited {
	height:auto;
	color: #000000;
	line-height:1em;
	padding:3px 0px 3px 27px;
	width:110px;
	text-align: left;
	margin-left: 2px;
	margin-top: 1px;/* yet another hack for IE5.5 */
	border: 1px solid transparent;
	display: block;
	margin-bottom: 2px;
}

* html .sitemenu ul ul a{
	width:110px;
	w\idth:110px;
	background-color: #DDDDDD;
	border: 1px solid #DDDDDD;
}

* html .sitemenu ul ul a:visited{
	width:110px;
	w\idth:110px;
	background-color: #DDDDDD;
	border: 1px solid #DDDDDD;
}

* html .sitemenu ul ul a:hover{
	width:110px;
	w\idth:110px;
	background-color: #DDDDDD;
	border: 1px solid #000000;
}



/***************************************************************************/
/* this filters down to the other layers too
/***************************************************************************/
/* style the top level hover */
.sitemenu a:hover, .sitemenu ul ul a:hover{
color:#000000;
background:#FFEEC2;
border: 1px solid #333333;
}
.sitemenu :hover > a, .sitemenu ul ul :hover > a {
	color:#000000;
	background:#FFEEC2;
	border: 1px solid #333333;
}
/***************************************************************************/


/***************************************************************************/
/***************************************************************************/
/* style the second level hover */
.sitemenu ul ul a.drop:hover{
color:#000000;
background:#FFEEC2;

}

.sitemenu ul ul :hover > a.drop {
	color:#000000;
	background:#FFEEC2;
}
/***************************************************************************/


/***************************************************************************/
/***************************************************************************/
/* style the third level hover */
.sitemenu ul ul ul a:hover {
color:#000000;
background:#FFEEC2;
}
/***************************************************************************/







/***************************************************************************/
/*  					DON'T EDIT THESE ONES BELOW 					   */
/***************************************************************************/

/* make the second level visible when hover on first level list OR link */
.sitemenu ul li:hover ul, .sitemenu ul a:hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.sitemenu ul :hover ul ul{
visibility:hidden;
}

/* make the third level visible when you hover over second level list OR link */
.sitemenu ul :hover ul :hover ul{
	visibility:visible;
}


/* style the table so that it takes no part in the layout - required for IE to work */
.sitemenu table {position:absolute; top:0; left:0;}	
/***************************************************************************/
/***************************************************************************/




























/* ================================================================ 
/* ================================================================ 
	TAB MENU
/* ================================================================ 
/* ================================================================  
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.tabmenucontainer{
	
}

.tabmenu {
	position:relative;
	font-size:11px;
	background-image: url(../images/sub-nav-background.jpg);
	background-repeat: repeat-x;
	margin: 0px;
	z-index: 0;
}

/* remove all the bullets, borders and padding from the default list styling */
.tabmenu ul {
	padding:0;
	margin:0;
	list-style-type:none;
	float:center;
	position:center;
	width: 100%;
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.tabmenu li {
	float:left;
	position:relative;
	text-align: center;
	}

/* style the links for the top level */
.tabmenu a, .tabmenu a:visited {
	display:block;
	font-size:11px;
	text-decoration:none;
	background:F6F6F6;
	color:#000000;
	width:65px;
	height:21px;
	line-height:21px;
	border-top: 1px solid #EEEEEE;
	border-right: 1px solid #999999;
	border-bottom: 1px solid #999999;
	border-left: 1px solid #EEEEEE;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .tabmenu a, * html .tabmenu a:visited {
width:65px;
w\idth:65px;
}

/* style the second level background */
.tabmenu ul ul a.drop, .tabmenu ul ul a.drop:visited {
	display:block;
	background:F6F6F6;
	color:#000000;
	height:auto;
	line-height:25px;
	padding:25px;
	width:140px;
	text-align: left;
	margin: 5px;

}




/* style the third level background */
.tabmenu ul ul ul a, .tabmenu ul ul ul a:visited {
	background:F6F6F6;
	color:#000000;
	text-align: left;
	}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.tabmenu ul ul {
	visibility:hidden;
	position:absolute;
	height:auto;
	top:22px;
	left:0;
	width:145px;
	text-align: left;
	border: 1px solid #003366;
	background-image: url(../images/drop-bg.jpg);
	background-repeat: repeat-y;
}


/* another hack for IE5.5 */
* html .tabmenu ul ul {
top:20px;
t\op:21px;
border: 1px solid #003366;
}

/* position the third level flyout menu */
.tabmenu ul ul ul{
left:143px; 
top:0;
width:142px;
border: 1px solid #003366;
}
/* position the third level flyout menu for a left flyout */
.tabmenu ul ul ul.left {
left:-150px;
}







/***************************************************************************/
/* This filters down the levels too
/***************************************************************************/
/* style the second level links */
.tabmenu ul ul a, .tabmenu ul ul a:visited {
	height:auto;
	line-height:1em;
	padding:3px 0px 3px 27px;
	width:110px;
	text-align: left;
	margin-left: 2px;
	margin-top: 1px;/* yet another hack for IE5.5 */
	border: 1px solid transparent;
	display: block;
	margin-bottom: 2px;
}
* html .tabmenu ul ul a{
width:110px;
w\idth:110px;
}



/***************************************************************************/
/* this filters down to the other layers too
/***************************************************************************/
/* style the top level hover */
.tabmenu a:hover, .tabmenu ul ul a:hover{
color:#000000;
background:#FFEEC2;
border: 1px solid #333333;
}
.tabmenu :hover > a, .tabmenu ul ul :hover > a {
	color:#000000;
	background:#FFEEC2;
	border: 1px solid #333333;
}
/***************************************************************************/


/***************************************************************************/
/***************************************************************************/
/* style the second level hover */
.tabmenu ul ul a.drop:hover{
color:#000000;
background:#FFEEC2;

}

.tabmenu ul ul :hover > a.drop {
	color:#000000;
	background:#FFEEC2;
}
/***************************************************************************/


/***************************************************************************/
/***************************************************************************/
/* style the third level hover */
.tabmenu ul ul ul a:hover {
color:#000000;
background:#FFEEC2;
}
/***************************************************************************/







/***************************************************************************/
/*  					DON'T EDIT THESE ONES BELOW 					   */
/***************************************************************************/

/* make the second level visible when hover on first level list OR link */
.tabmenu ul li:hover ul, .tabmenu ul a:hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.tabmenu ul :hover ul ul{
visibility:hidden;
}

/* make the third level visible when you hover over second level list OR link */
.tabmenu ul :hover ul :hover ul{
	visibility:visible;
}


/* style the table so that it takes no part in the layout - required for IE to work */
.tabmenu table {position:absolute; top:0; left:0;}	
/***************************************************************************/
/***************************************************************************/