@charset "utf-8";
/* CSS Document */

/* Specifications for the treatment of standard HTML tags  */
body  {
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-color: #FFFFFF;
}
a:link {
	text-decoration: underline;
	color: #696969;
}
a:hover {
	text-decoration: underline;
	color: #0066FF;
}
a:visited {
	text-decoration: underline;
	color: #9966FF;
	list-style-position: outside;
}
h1, h2, h3, h4 {
	color: #336699;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1 {
	font-size: 16px;
	padding-top: 0px;
	margin-top: 8px;
	margin-bottom: 15px;
}
h2 {
	font-size: 14px;
	margin-top: 10px;
	margin-bottom: 6px;
}
h3 {
	font-size: 12px;
	font-weight: bold;
	margin-top: 8px;
	margin-bottom: 5px;

}
h4 {
	font-size: 10px;
	font-weight: bold;
}
p {
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-bottom: 10px;
	margin-top: 0px;
	margin-left: 0px;
}
small {
	font-size: 10px;
}

/* Some item needed for our MailChimp customized forms. */
.pageTitle {background-color:#DDDDDD; padding:8px; font-size:16px; font-weight:bold; color:#000000; text-align:left;}
.pageTitleAlert {background-color:#FF0000; padding:8px; font-size:16px; font-weight:bold; color:#FFFFFF; text-align:left;}
.pageTitleSuccess {background-color:#33CC00; padding:8px; font-size:16px; font-weight:bold; color:#FFFFFF; text-align:left;}
.formLabel {font-size:13px;}
.error {color:#FF0000; font-weight:bold; font-size:11px;}

/*  General formatting not addressed by HTML  */


.no-border { /* Add this to any item that you do not want to have a border. Ex. a picture that's a link. */
	border: none;
}
.upsold { /* The highlight color for upsold products in as they appear in the upsold products table. */
	
}
.button-format {
	font-size: 12px;
	color: #336699;
}
.old-price {
	text-decoration: line-through;
	
}
.no-side-pad td {
	padding-left: 0px;
	padding-right: 0px;
}
.no-side-pad tr {
	padding-left: 0px;
	padding-right: 0px;
}
.no-side-pad table {
	padding-left: 0px;
	padding-right: 0px;
}
.breadcrumbs {
	line-height: 20px;
}


/*  The containter that holds everything; it sets the width for the page  */

#container { /* Used to be an id tag to hold all page content. Now is used as a class for the table that wraps all content. A table was used to shrink wrap the page content because the table expands batter with overflow while allowing the expandable banner width to be set to 100%. */
	/* using 40px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar, even on most older monitors */
	width: 760px;
	background: #FFFFFF;
	margin: 0 auto;
	text-align: left;
	border: none;
	overflow: visible;
} 
#banner-containter { /* The container for all the component of the logo banner at the top of the page. */
	width: auto;
	margin-left: auto;
	margin-right: auto;
}


/* Pseudo button made from links */
.pseudo-button a:link { /* Also used for links that are meant to look like rollover buttons without the main body of the page. */
	text-decoration: none;
	color: #696969;
	font-weight: bold;
}
.pseudo-button a:visited {
	text-decoration: none;
	font-weight: bold;
	color: #696969;
}
.pseudo-button a:hover {
	text-decoration: none;
	color: #0066FF;
}
.pseudo-button ul a:hover {
	margin: 0;
	
}
.pseudo-button ul li a:hover {
	padding-left: 0px;
	text-decoration: none;
	color: #0066FF;
}

/* Widgets and modules formatting--notably Wow Wow Widgets by Latu.net */
.widgettable {
	margin: 0px;
}
.widgettable tr {
	text-align: center;
}
.widgettable td {
	text-align: center;
}
.widget-thumb-w-details {
	height: 130px;
}

/*  Main content (main display area) specifications, for pages with a left sidebar  */

.twoColFixLtHdr #mainContent {
	width: 520px;
	margin-left: 225px;
	
} 
.twoColFixLtHdr #mainContent p {
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-bottom: 10px;
	margin-top: 0px;
	margin-left: 0px;
	width: 500px;
}
.twoColFixLtHdr #mainContent table {
	font-size: 12px;
}
.twoColFixLtHdr #mainContent th {
	background-image: url(graphics/layout_graphics/nav-bars/expandable/nav-bar-mid-orig.jpg);
	background-repeat: repeat-x;
	background-position: center;
	color: white;
	font-weight: bold;
	height: auto;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 8px;
	text-align: left;
}
.twoColFixLtHdr #mainContent td {
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 8px;
}
.twoColFixLtHdr #mainContent tr {
	
}

	
.twoColFixLtHdr #mainContent ul {
 	margin: 0;
	padding: 0;
	list-style-type: circle;
	list-style-position: inside;
}
.twoColFixLtHdr #mainContent li {
	margin: 0;
	padding: 0;
}
.twoColFixLtHdr #mainContent-alt1 p {
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-bottom: 10px;
	margin-top: 0px;
	margin-left: 0px;
	width: 600px;
}
.twoColFixLtHdr #mainContent-alt1 table {
	font-size: 10px;
}
.twoColFixLtHdr #mainContent-alt1 th {
	background-image: url(graphics/layout_graphics/nav-bars/expandable/nav-bar-mid-orig.jpg);
	background-repeat: repeat-x;
	background-position: center;
	color: white;
	font-weight: bold;
	height: auto;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 8px;
	text-align: left;
}
.twoColFixLtHdr #mainContent-alt1 td {
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 8px;
}
.twoColFixLtHdr #mainContent-alt1 ul {
 	margin: 0;
	padding: 0;
	list-style-type: circle;
	list-style-position: inside;
}

.twoColFixLtHdr #mainContent-alt1 li {
	width: 760px;
	margin: 0;
	padding: 0;
}
.twoColFixLtHdr #mainContent-alt2 { /* A printer friendly div, intended for use in pages where Miva's header and footer are not displayed. */
	width: 740px;
}
.main-cont-img {
	padding-bottom: 15px;
	width: 465px;
	text-align: left;
}

.cat-page-insert {
	width: 515px;
}

/*  An alternate configuration of the main content when no sidebar is displayed  */

#mainContent-alt1 {
	margin-top: 0px;
	margin-right: 0;
	margin-left: 0;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0;
	padding-left: 20px;
}
.paragraph-container-alt1 {
	width: 550px;
	padding-right: 30px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

/*  Footer specifications  */

.twoColFixLtHdr #footer { 
	height: auto;
	padding-top: 15px;

} 
.twoColFixLtHdr #footer-bottom {
	
	background-repeat: no-repeat;
	background-position: bottom;
	margin: 0;
	width: 760px;
	height: 15px;
}
.twoColFixLtHdr #footer-links-bar {
	background-image: url(graphics/layout_graphics/nav-bars/nav-bar-saphire-15px-high.jpg);
	background-repeat: no-repeat;
	padding: 3px 10px 0 20px;
	height: 20px;
	text-align: right;
	font-size: 10px;

}
/* Pseudo button made from links */
.twoColFixLtHdr #footer-links-bar a:link { /* Also used for links that are meant to look like rollover buttons without the main body of the page. */
	text-decoration: none;
	color: #FFFFFF;
	font-weight: bold;
}
.twoColFixLtHdr #footer-links-bar a:visited {
	text-decoration: none;
	font-weight: bold;
	color: #FFFFFF;
}
.twoColFixLtHdr #footer-links-bar a:hover {
	text-decoration: none;
	color: #FFFF66;
}
.twoColFixLtHdr #footer-links-bar ul a:hover {
	margin: 0;
	
}
.twoColFixLtHdr #footer-links-bar ul li a:hover {
	padding-left: 0px;
	text-decoration: underline;
	color: #FFFF66;
}

.twoColFixLtHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

/* General alignment classes  */

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.center {
	margin-left: auto;
	margin-right: auto;
}
.text-right {
	text-align: right;
}


/*  SIDEBAR specifications  */

.twoColFixLtHdr #sidebar1 {
	width: 200px;
	font-size: 10px;
	float: left;

}
.twoColFixLtHdr #sidebar1 h3 {
	margin-bottom: 5px;
}
.twoColFixLtHdr #sidebar1 p {
	margin-bottom: 15px;
}
.sidebar-middle {
	/* background-image: url(graphics/layout_graphics/nav-bars/red-box-middle-190px.jpg); */
	background-repeat: repeat-y;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 15px;
}
.sidebar-top {

}
.sidebar-bottom {
	/* background-image: url(graphics/layout_graphics/nav-bars/red-box-bottom-190px.jpg); */
	height: 35px;
	background-repeat: no-repeat;
}

.twoColFixLtHdr #cat-tree {
	font-size: 10px;

}
.menu-cat-tree {
	margin-left: 0px;
	text-indent: 0px;
}	
.menu-cat-tree a {
color: #339999;
padding: 0px;
font-weight: normal;
}
.menu-cat-tree a:hover {
color: #0066FF;
padding: 0px;

}
.menu-cat-tree ul{
	margin-left: 0px;
}
.menu-cat-tree ul li{
	display: block;
	margin: 0;
	padding-top: 3px;
}
.menu-cat-tree ul li a:hover {
	text-decoration: underline;
}
.twoColFixLtHdr #sidebar1 ul { /*Sets the link behavior for this sidebar.*/
	list-style:none;
	margin:0;
	padding:0;
}
.side-item { /*A class for formatting sidebar items grouped within a div tag. */
	padding-bottom: 15px;
}
#sidebar1 h4 {
	font-weight: bold;
	margin-bottom: 3px;
}
#sidebar p {
	padding-bottom: 10px;
}
.sidebar-header {
	font-size: 10px;
	font-weight: bold;
	padding-bottom: 10px;
	color: #004050;
}
.current-cat-in-tree {
	font-weight: bold;
}
.cat-link-other { /* Any link in the cat tree that isn't for the currently displayed page. */
	
}
.subcat-in-tree {
	border-left: 1px;
	border-left-color: #004050;
	border-left-style: solid;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 5px;	
}
.subcat-in-tree a {
}
.menu-cat-tree a:hover {
	color: #0066FF;
}
.subcat-in-tree ul{
	margin-left: 0px;

}
#cat-tree a:link {
	text-decoration: none;
	color: #696969;
	font-weight: bold;
}
#cat-tree a:visited {
	text-decoration: none;
	font-weight: bold;
	color: #696969;
}
#cat-tree a:hover {
	text-decoration: underline;
	color: #0066FF;
}
#cat-tree ul a:hover {
	margin: 0;
	
}
#cat-tree ul li a:hover {
	display: block;
	padding-left: 0px;
	text-decoration: underline;
	color: #0066FF;
}
.subcat-in-tree ul li {
	display: block;
	margin: 0;
	padding: 0;
	padding: 0 0 0 5px;
}

.subcat-in-search/* Specifications for the search form on the advanced search page. */
/* Java Script is used on this page to tie the subcategories to the parent cats and simplify the options the cutsotmer sees. */
 {
	visibility: hidden;	
}
.search-by-cat-default {
	visibility: hidden;
}
.search-by-cat-java {
	visibility: visible;
}

/* Specifications for the mini search form */
.search-button {
	width: 30px;
	height: 22px;
	font-size: 10px;
	margin-top: 0px;
	font-weight: bold;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #336699;
	/* background-image: url(graphics/layout_graphics/search-normal.gif); */
	
}

.search-box { /* Formatting for the text box that customers type their search terms into. */
	height: 15px;
	font-size: 11px;
	width: 100px;
	text-decoration: none;
	background-color: #FFFFFF;
	color: #336699;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #333333;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #333333;
}
.search-form {
	margin-top: 0px;
	font-size: 10px;
	height: 15px;
	margin-left: 10px;
}

.side-spacer { /* A spacer div tag class for separating groups of items on the sidebar. */
	height: 25px;
	width: auto;
}
.side-header-img {
	padding-bottom: 5px;
}

/*  Content at the Top of the Page  */
#banner-table {
	width: 760px;
	height: 100px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(graphics/layout_graphics/banners/AT_CatalogBanner_plain.jpg);
	background-position: top;
	background-repeat: no-repeat;
}

#click-banner {
	margin-top: 0px;
	margin-left: 0px;
	width: 400px;
	height: 50px;
}
#logoBanner {
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	height:auto;
} 
#top-address-bar {
	margin-top: 15px;
	margin-left: 0px;
	text-align: left;
	padding-left: 10px;
	padding-top: 5px;
	color: #336699;
	font-weight: bold;
}
.twoColFixLtHdr #header {
	padding: 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	height: 100px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	width: 760px;
} 

#top-spacer {
	height: 8px;	
}


/*  The customer links at the top of the page  */
/*  Also the rest of the contents in the navbar-item file  */

.twoColFixLtHdr #top-nav-bar {
	height: auto;
	margin-bottom: 35px;
}
.customer-links-top {
	/* The horizontal navigation item with login, shopping cart, and home links. Miva calls it "navbar". */
	text-align:right;

} 

/* HORIZONTAL NAV BAR at top of page */
#horizontal-band-1 {
	background-image: url(graphics/layout_graphics/nav-bars/nav-bar-slim-band-less-bright-yellow.jpg);
	width:760px;
	height:20px;
	font-size: 10px;
	font-weight: bold;
	text-align:center;
	padding: 2px 0 0 0;
}

.c-links-yellow {
	height: 20px;
	background-image: url(graphics/layout_graphics/nav-bars/nav-bar-slim-band-less-bright-yellow.jpg);
	background-repeat: repeat-x;
	padding-top: 3px;
	padding-right: 15px;
	background-position: left top;
	width: auto;
	text-align: right;
	font-size: 10px;
	font-weight: bold;
	margin-top: 0px;
	margin-bottom: 0;
	margin-left: 0;
	padding-left: 15px;
	margin: 0;
}

.customerLinks a:link { /* Also used for links that are meant to look like rollover buttons without the main body of the page. */
	text-decoration: none;
	color: #696969;
	font-weight: bold;
}
.customerLinks a:visited {
	text-decoration: none;
	color: #696969;
	font-weight: bold;
}
.customerLinks a:hover {
	text-decoration: underline;
	color: #0066FF;
}
.customerLinks ul a:hover {
	margin: 0;
	
}
.customerLinks ul li a:hover {
	padding-left: 0px;
	text-decoration: underline;
	color: #0066FF;
}


#cat-bar {
	padding-bottom: 10px;
	height: 60px;
}

/* The CSS animated nav bar w pseudo rollover buttons. */
.top-cats-wide-nav { /* This div hold the top level categories at the top of the page. */
	width: 755px;
	height: auto;
	background-color: #FFFFFF;
	text-align: center;
	color: #696969;
	font-weight: bold;
	margin-left: auto;
	margin-right: 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;
	border-top-color: #CCCCCC;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #CCCCCC;
	margin-top: 4px;
}
.tiny-basket-total { /* Pretty much what it sounds like. Just the total from the basket. */
	font-size: 10px;
	padding-left: 15px;
	padding-right: 15px;
	margin: 0;
	padding-top: 0px;
}
.cat-wrapper { /* Hold a single category title. */
	font-size: 11px;
	margin: 3px;
	padding-top: 1px;
	padding-right: 8px;
	padding-bottom: 1px;
	padding-left: 8px;
	font-family: Arial, Helvetica, sans-serif;
	/* border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CCCCCC;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #CCCCCC;
	background-image: url(graphics/layout_graphics/buttons/yellow-blue-pattern-button-.jpg);
	background-repeat: repeat-x;
	background-position: center top; */
}
.cat-wrapper a:link { /* Also used for links that are meant to look like rollover buttons without the main body of the page. */
	text-decoration: none;
	color: #336699;
	font-weight: bold;
}
.cat-wrapper a:visited {
	text-decoration: none;
	font-weight: bold;
	color: #336699;
}
.cat-wrapper a:hover {
	text-decoration: none;
	color: #FF6600;
}
.top-cat-row {
	margin-top: 6px;
	margin-right: 0px;
	margin-bottom: 6px;
	margin-left: 0px;
}
.bar-w-srch-n-baskettotal {/* The div that holds a minibasket total before shipping and a tiny search form. */
	height: 0px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #CCCCCC;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #CCCCCC;
	margin-right: auto;
	margin-left: auto;
}

/*  Page specific formatting: Affiliate and Customer pages  */
.account-info-labels { /* For the create new account and modify account display page. Same page handles both types of requests. */
	font-size: 10px;
}
.ship-table { /* The shipping estimates table to show customers what their options will be before checkout. */

}
.ship-item { /* An individual shipping option. */
	margin-bottom: 5px;
	
}
.basket-table {
 font-size: 10pt;
}
.options-box { /* The div box for grouping account features. */
	margin-top: 20px;
	margin-left: 0px;
	text-align: left;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 0px;
	font-weight: normal;
}
.opt-table-cell {
	border: 1px solid #336699;
}
.opt-box-header { /* The header for options-box. */
	font-size: 12px;
	font-weight: bold;
	margin-top: 0px;
	margin-bottom: 8px;
	color: #004050;
}
.opt-box-spacer { /* A spacer for separating form elements and lines of text in the options-box div tag. */
	height: 8px;
}
.opt-box-form {
	margin-top: 0px;
	margin-bottom: 8px;
}


/* Specs for the category and page templates. */
.this-page {
	font-weight:bold;
}
.inline-box {
	margin: 5px;
}


/* The specs for the Site Map (SMAP) page. */
.smap-item-3-col { /* A class for a single item on the SMAP page. */
	padding: 8px;
	width: 120px;	
}
.smap-item-1-col {
	display: block;
}
.smap-row {
	width: 100%;
}
.smap-group { /* A class for a group of similar items. Ex. all categories. */ 
	display: block;
}


/* Formatting for hiding and revealing JavaScript elements so that forms that are enhanced with JavaScript can still work ok and look ok with it disabled. */
.dynamic-html { /* Hides the JavaScript enhanced form elements. This property is dynamically modified with JavaScript to show the elements. */
	visibility: visible;
}
.plain-html { /* Shows plain HTML alternatives for dynamically enhanced forms. If JavaScript is enabled in the browser, a JavaScript function will modify this property to hide the non-dynamic HTML. */
	visibility: hidden;
}
.hidden {
	visibility: hidden;
}


/* Lightbox formatting */
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/* SpryTabbedPanels.css - Revision: Spry Preview Release 1.4 */

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

/* Horizontal Tabbed Panels
 *
 * The default style for a TabbedPanels widget places all tab buttons
 * (left aligned) above the content panel.
 */

/* This is the selector for the main TabbedPanels container. For our
 * default style, this container does not contribute anything visually,
 * but it is floated left to make sure that any floating or clearing done
 * with any of its child elements are contained completely within the
 * TabbedPanels container, to minimize any impact or undesireable
 * interaction with other floated elements on the page that may be used
 * for layout.
 *
 * If you want to constrain the width of the TabbedPanels widget, set a
 * width on the TabbedPanels container. By default, the TabbedPanels widget
 * expands horizontally to fill up available space.
 *
 * The name of the class ("TabbedPanels") used in this selector is not
 * necessary to make the widget function. You can use any class name you
 * want to style the TabbedPanels container.
 */
.TabbedPanels {
	padding: 0px;
	float: left;
	clear: none;
	width: 100%;
	margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
}

/* This is the selector for the TabGroup. The TabGroup container houses
 * all of the tab buttons for each tabbed panel in the widget. This container
 * does not contribute anything visually to the look of the widget for our
 * default style.
 *
 * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
 * necessary to make the widget function. You can use any class name you
 * want to style the TabGroup container.
 */
.TabbedPanelsTabGroup {
	margin: 0px;
	padding: 0px;
}

/* This is the selector for the TabbedPanelsTab. This container houses
 * the title for the panel. This is also the tab "button" that the user clicks
 * on to activate the corresponding content panel so that it appears on top
 * of the other tabbed panels contained in the widget.
 *
 * For our default style, each tab is positioned relatively 1 pixel down from
 * where it wold normally render. This allows each tab to overlap the content
 * panel that renders below it. Each tab is rendered with a 1 pixel bottom
 * border that has a color that matches the top border of the current content
 * panel. This gives the appearance that the tab is being drawn behind the
 * content panel.
 *
 * The name of the class ("TabbedPanelsTab") used in this selector is not
 * necessary to make the widget function. You can use any class name you want
 * to style this tab container.
 */
.TabbedPanelsTab {
	position: relative;
	top: 1px;
	float: left;
	list-style: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
	font-family: sans-serif;
	font-size: 12px;
	font-weight: bold;
	background-image: url(graphics/layout_graphics/buttons/blue_pattern_button_back.jpg);
	color: #336699;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 5px;
	padding-right: 15px;
	padding-bottom: 5px;
	padding-left: 15px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #336699;
	border-left-color: #999999;
}

/* The class formats an empty div tab to produce a line across the untabbed part of the window. */
.TabbedPanelsTabEmpty {
	position: relative;
	top: 1px;
	float: left;
	list-style: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
	font-family: sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #336699;
	margin-top: 0px;
	margin-right: 3px;
	margin-bottom: 0px;
	margin-left: 3px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;

	border-bottom-width: 1px;


	border-bottom-style: solid;


	border-bottom-color: #336699;

}

/* This selector is an example of how to change the appearnce of a tab button
 * container as the mouse enters it. The class "TabbedPanelsTabHover" is
 * programatically added and removed from the tab element as the mouse enters
 * and exits the container.
 */
.TabbedPanelsTabHover {
	background-color: #CCC;
}

/* This selector is an example of how to change the appearance of a tab button
 * container after the user has clicked on it to activate a content panel.
 * The class "TabbedPanelsTabSelected" is programatically added and removed
 * from the tab element as the user clicks on the tab button containers in
 * the widget.
 *
 * As mentioned above, for our default style, tab buttons are positioned
 * 1 pixel down from where it would normally render. When the tab button is
 * selected, we change its bottom border to match the background color of the
 * content panel so that it looks like the tab is part of the content panel.
 */
.TabbedPanelsTabSelected {
	background-image: url(graphics/layout_graphics/buttons/blue_pattern_button_flipped.jpg);
	color: #336699;
	border-top-color: #336699;
	border-right-color: #336699;
	border-left-color: #336699;
	border-bottom-style: none;
	background-position: bottom;
}

/* This selector is an example of how to make a link inside of a tab button
 * look like normal text. Users may want to use links inside of a tab button
 * so that when it gets focus, the text *inside* the tab button gets a focus
 * ring around it, instead of the focus ring around the entire tab.
 */
.TabbedPanelsTab a {
	color: black;
	text-decoration: none;
}

/* This is the selector for the ContentGroup. The ContentGroup container houses
 * all of the content panels for each tabbed panel in the widget. For our
 * default style, this container provides the background color and borders that
 * surround the content.
 *
 * The name of the class ("TabbedPanelsContentGroup") used in this selector is
 * not necessary to make the widget function. You can use any class name you
 * want to style the ContentGroup container.
 */
.TabbedPanelsContentGroup {
	clear: both;
	margin: 0px;
}

/* This is the selector for the Content panel. The Content panel holds the
 * content for a single tabbed panel. For our default style, this container
 * provides some padding, so that the content is not pushed up against the
 * widget borders.
 *
 * The name of the class ("TabbedPanelsContent") used in this selector is
 * not necessary to make the widget function. You can use any class name you
 * want to style the Content container.
 */
.TabbedPanelsContent {
	padding: 4px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #336699;
	vertical-align: top;
}
.TabbedPanelsContent ul li {
	line-height: 15px;
	text-indent: 3px;
	height: auto;
	
}
.TabbedPanelsContent img {
	vertical-align:top;
}

/* This selector is an example of how to change the appearnce of the currently
 * active container panel. The class "TabbedPanelsContentVisible" is
 * programatically added and removed from the content element as the panel
 * is activated/deactivated.
 */
.TabbedPanelsContentVisible {
}

/* Vertical Tabbed Panels
 *
 * The following rules override some of the default rules above so that the
 * TabbedPanels widget renders with its tab buttons along the left side of
 * the currently active content panel.
 *
 * With the rules defined below, the only change that will have to be made
 * to switch a horizontal tabbed panels widget to a vertical tabbed panels
 * widget, is to use the "VTabbedPanels" class on the top-level widget
 * container element, instead of "TabbedPanels".
 */

/* This selector floats the TabGroup so that the tab buttons it contains
 * render to the left of the active content panel. A border is drawn around
 * the group container to make it look like a list container.
 */
.VTabbedPanels .TabbedPanelsTabGroup {
	float: left;
	width: 10em;
	height: 20em;
	background-color: #EEE;
	position: relative;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
	border-left: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
}

/* This selector disables the float property that is placed on each tab button
 * by the default TabbedPanelsTab selector rule above. It also draws a bottom
 * border for the tab. The tab button will get its left and right border from
 * the TabGroup, and its top border from the TabGroup or tab button above it.
 */
.VTabbedPanels .TabbedPanelsTab {
	float: none;
	margin: 0px;
	border-top: none;
	border-left: none;
	border-right: none;
}

/* This selector disables the float property that is placed on each tab button
 * by the default TabbedPanelsTab selector rule above. It also draws a bottom
 * border for the tab. The tab button will get its left and right border from
 * the TabGroup, and its top border from the TabGroup or tab button above it.
 */
.VTabbedPanels .TabbedPanelsTabSelected {
	background-color: #EEE;
	border-bottom: solid 1px #999;
}

/* This selector floats the content panels for the widget so that they
 * render to the right of the tabbed buttons.
 */
.VTabbedPanels .TabbedPanelsContentGroup {
	clear: none;
	float: left;
	padding: 0px;
	width: 30em;
	height: 20em;
}