@charset "UTF-8";
#cat2-img {
	width: 115px;
	background: url(../Images/backgrounds/bg-cat-img-main.jpg) no-repeat left top;
	height: 150px;
	clear: none;
	float: left;
	text-align: center;
	margin: 0em;
	padding: 0.5em 0em 0em;
}
#cat2-img      .pg-img {
	margin: .25em 0em 0em;
	padding: 0em;
	border: 2px solid #C9D74E;
	vertical-align: bottom;
	text-align: center;
}
#cat2-img    .ts-img {
	margin: .25em 0em 0em;
	padding: 0em;
	border: 2px solid #D37739;
	vertical-align: bottom;
	text-align: center;
}
#cat2-img   .center {
	margin: 0em;
	padding: 0em;
	vertical-align: bottom;
	text-align: center;
}
#catagories2 {
	padding:0;
	margin: 0em;
	overflow: auto;
	float: right;
	clear: none;
	background: url(../Images/backgrounds/bg-cat-scoll.jpg) repeat-y right top;
	width: 283px;
	border-right: 1px dotted #999999;
	height: 170px;
}
#catagories2   h1 {
	color: #FF0000;
	text-decoration: none;
	font: bold 12px/25px Arial, Helvetica, sans-serif;
	text-align: left;
}
#catagories2   ul {
	//margin:1em 0;
	margin: 0px;
	padding: 0px;
}
#catagories2   li {
	display:list-item;
	padding:0px 0px 0.25em 0.25em;
	list-style-image: none;
	list-style-type: none;
	margin: 0px;
	height: auto;
	border-bottom: 1px dotted #999999;
	text-align: left;
}
#catagories2   a {
	color: #333333;
	font: normal 11px Arial, Helvetica, sans-serif;
}
#catagories2   a:hover {
	color: #CCCCCC;
	background: url(none);
	text-decoration: underline;
}
#catagories2   a:active {

}
#catagories2   a:visited {

}
.ts-head {
	font: bold 14px/15px Arial, Helvetica, sans-serif;
	color: #993300;
	text-align: center;
	margin: 0.25em 0em .5em;
	padding: 0em;
}
.pg-head {
	font: bold 14px/15px Arial, Helvetica, sans-serif;
	color: #455100;
	text-align: center;
	margin: 0.25em 0em .5em;
	padding: 0em;
}
.cp-ts-container {
	margin: 0em;
	padding: 0em;
	clear: none;
	float: left;
	height: 170px;
	width: 25.28em;
}
.cp-pg-container {
	margin: 0em;
	padding: 0em;
	clear: none;
	float: left;
	height: 170px;
}

/* SpryCollapsiblePanel.css - version 0.5 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main CollapsiblePanel container. For our
 * default style, the CollapsiblePanel is responsible for drawing the borders
 * around the widget.
 *
 * If you want to constrain the width of the CollapsiblePanel widget, set a width on
 * the CollapsiblePanel container. By default, our CollapsiblePanel expands horizontally to fill
 * up available space.
 *
 * The name of the class ("CollapsiblePanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * CollapsiblePanel container.
 */
.cp {
	margin: 0px;
	padding: 0px;
	clear: none;
	float: left;
	width: 813px;
}


/* This is the selector for a CollapsiblePanel's Content area. It's important to note that
 * you should never put any padding on the content area element if you plan to
 * use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content
 * element can cause the CollapsiblePanel to abruptly grow in height while the panels animate.
 *
 * The name of the class ("CollapsiblePanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style a
 * CollapsiblePanel content container.
 */
.cpContent {
	margin: 0px;
	padding: 0px;
	height: 170px;
}

/* This is the selector for the CollapsiblePanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open or close the panel.
 *
 * The name of the class ("CollapsiblePanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * CollapsiblePanel panel tab container.
 */
.cpTab {
	margin: 0px;
	padding: 2px 0px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	height: 20px;
	background: url(../Images/headers/ts-pg.jpg) no-repeat center top;
}
.cpTab2/* This is the selector for the CollapsiblePanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open or close the panel.
 *
 * The name of the class ("CollapsiblePanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * CollapsiblePanel panel tab container.
 */
 {
	font: bold 0.7em/19px sans-serif;
	margin: 0px;
	padding: 2px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	height: 20px;
	background: url(../Images/headers/fp-pg.jpg) no-repeat left top;
	border-right: 2px solid #999999;
}
.shop-banner {
	margin: 0em 0em 0em 48.2em;
	padding: 0em;
	background: url(../Images/banners/shop.jpg) no-repeat right top;
	position: absolute;
	width: 35px;
	height: 30px;
}
.shop-header {
	font: normal 24px/35px Verdana, Arial, Helvetica, sans-serif;
	color: #fff5ce;
	height: 40px;
	text-align: center;
	background: #730C0D url(../Images/backgrounds/bg-shop-header.jpg) repeat-x left top;
	letter-spacing: .1em;
}
.shop-header img {
	margin: 0em;
	padding: 0.1em .25em 0em 0em;
	vertical-align: middle;
	line-height: 30px;
}


/* An anchor tag can be used inside of a CollapsiblePanelTab so that the
 * keyboard focus ring appears *inside* the tab instead of around the tab.
 * This is an example of how to make the text within the anchor tag look
 * like non-anchor (normal) text.
 */
.cpTab a {
	color: black;
	text-decoration: none;
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "CollapsiblePanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the CollapsiblePanel.
 */
.CollapsiblePanelOpen .CollapsiblePanelTab {
	background: #6600FF;
}

/* This is an example of how to change the appearance of the panel tab when the
 * CollapsiblePanel is closed. The "CollapsiblePanelClosed" class is programatically added and removed
 * whenever the CollapsiblePanel is closed.
 */

.cpClosed .cpTab {
 /* background-color: #EFEFEF */
}

/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.cpTabHover,  .cpOpen .cpTabHover {

}

/* This is an example of how to change the appearance of all the panel tabs when the
 * CollapsiblePanel has focus. The "CollapsiblePanelFocused" class is programatically added and removed
 * whenever the CollapsiblePanel gains or loses keyboard focus.
 */
.cpFocused .cpTab {
	background-color: #3399FF;
}