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

body {
	background:#4c96aa url(taps-background-image.jpg) repeat-x fixed;
	height:100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;

}

h3 {
	font-weight:bold;
}

/* Encloses EVERYTHING on the page */
#main_container {
	position:relative;
	width:904px;
	height:100%;
	text-align:center;
	background-color:#ffffff;
	margin-top:0;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	overflow: visible;

}

	

/* Container for holding all head of page content including top navigation and breadcrumb trail */
#head_container {
background: url(taps-banner.jpg) no-repeat top right;
	position: relative;
	height: 150px;
	width: 902px;
	top: 0px;
	text-decoration:none;
}

/* grey gradient background on strip below top nav links */
#main_container #head_container #breadcrumbs_container {
	background-image: url(breadcrumb-trail-background.png);
	background-repeat: repeat-x ;
	height: 28px;
	width: 884px;
	position: absolute;
	left: 10px;
	top: 100px;
}



/* For positioning main logo in top left of screen */
#main_container #head_container #taps_Logo {
	position: absolute;
	left: 1px;
	top: 1px;
	height: 99px;
	width: 220px;
}

/* For positioning and containing Top Navigation */
#head_container #top_nav {
	background-image:url(top-links-background.png);
	position:absolute;
	left: 221px;
	top: 65px;
	height: 34px;
	width: 670px;
	padding-top: 8px;
}
#head_container #top_nav a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	height:34px;
	/* padding top and bottom don't seem to work here! Had to add it to container above instead */
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}

#head_container #top_nav a:hover {
	background-image:url(additional-products-background.jpg);
	}

/* Container for left hand side navigation section */
#left_nav {
	position:relative;
	left:10px;
	top:0px;
	width:200px;
	text-align: left;
	float:left;
	/* Adding float left to test */
}

/* Any <a> inside the left_nav container */
/*#left_nav a {
	display:block;
	color:#25A8C6;
	text-decoration:none;
	text-indent: 11px;
	line-height: 150%;
	font-weight: normal;
	letter-spacing: 1pt;
} HIDE THIS FOR TEST */

/*  Positioned below head_Container and with the left_nav on its left, this contains all product info and additional items */
#details_Container {
	width:686px;
	left: 0px;
	position: relative;
	float: right;
	text-align:left;
	/* border:#CC0000 solid 1px; */
}

/* The container for the left hand side of the product pages including title, price, and details */
#main_container #details_Container #left_Details {
	float: left;
	width: 360px;
	text-align: left;
	padding-left:5px; /* MAY remove padding */
	padding-right:5px;
}
#main_container #details_Container #left_Details h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #175e85;
	line-height:14px;
}

#main_container #details_Container #left_Details ul li  {
	list-style-image: url(blue-bullet.png);
	margin: 0;
	padding: 0;
	margin-left: -15px;
	margin-bottom: 4px;
	line-height: 120%; /* was 0.9 em */
}

/* The container for the right hand side of the product pages including pictures */
#main_container #details_Container #right_Details {
	width: 303px; /* was 305 */
	text-align: left;
	float: right;
	/* padding-right: 10px;   MAY remove padding */
	margin-right:10px;
	margin-bottom:5px;
}



#right_details img {
	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: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
}

/* Additional Items container should appear below item info in right and left _Details IDs */
#additional_Items_Container {
	clear: both;
	padding-top:5px;
	padding-left:1px;
	margin-left:0px;
	margin-right:10px;
	margin-top:10px;
	overflow: visible;
	text-align:left;
	border-top-width: 1px;
	border-top-style: dashed;
	border-top-color: #000000;
}
.additional_Items_Bottom {
	clear: both;	
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left:6px;
}

/* Right side column for category pages */
#main_container #details_Container #Category_Right_Column {
	width:163px;
	height:612px;
	float:left;
	/*border:1px solid #25A8C6;*/
	border:1px solid #054570;
	margin-bottom: 4px;
	overflow: hidden;
}
#main_container #details_Container #category_Container_1 {
	float: left;
	width: 510px;
	text-align: left;
}
#main_container #details_Container #category_Container_2 {
	float: left;
	width: 686px; /* was 680 */
	text-align: left;
}


/* FOOTER can be used inside the details_Container ID - it gets pushed down by content above it  */
#footer {
	clear: both;
	padding: 5px;
	margin-left:0px;
	margin-right:10px;
	background-color:#eeeeee;
	text-align:center;
}
.footer2 {
	clear: both;
	background-color:#00ffff;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;	/*width:902px;*/
}

/* This makes the white background stretch to the bottom of the page */

#bottom {
	/*background-position: bottom;
	background-image: url(images/container-background.gif);*/
	background-color: #FFFFFF;
	clear: both;
	border-bottom:#000000 solid 1px;
	padding-bottom:3px;
}
/*#left_nav a:hover {
	color: #ffffff;
}*/
/* FOLLOWING SECTION FOR CONTROLLING THE LEFT ACCORDIAN MENU */
.arrowlistmenu{
width: 194px; /*width of accordion menu*/
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #41545A;
	background: white url(titlebar.png) repeat-x top left;
	margin-bottom: 10px; /*bottom spacing between header and rest of content*/
	/*text-transform: uppercase;*/
padding: 4px 0 4px 10px; /*header text is indented 10px*/
	/*cursor: hand;*/
cursor: pointer;
	font-size: 10px;
	font-weight: bold;
}

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(titlebar.png);
margin-bottom: 10px;
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul ol li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul ol li a{
color: #25a8c6;
background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul ol li a:visited{
color: #25a8c6;
}

.arrowlistmenu ul ol li a:hover{ /*hover state CSS*/
color: #25a8c6;
background-color: #F3F3F3;
}
/* END OF ACCORDIAN MENU SECTION */

.arrowlistmenu h3 a {
	color:#FFFFFF;
	}

/* Top Navigation */


/* CONTAINER is just for positioning and overall size */
#nav {
	position:absolute;
	width:673px;
	top:66px;
	left:221px;
}

/* Fills the width of above container with a background image and puts a two pixel orange line underneath it */
#nav ul {
	float:left;
	width:100%;
	margin:0;
	padding:0;
	list-style:none;
	background-color: #175D83;
	background-image: url(top-links-background.png);
	background-repeat: repeat-x;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #FF6600;
}
#nav li {
	display:inline;
	margin:0;
	padding:0;
}

/* left and right padding on text links, white border on right for dividing line, line height same height as background image used */
#nav a {
	display:block;
	float:left;
	width:auto;
	margin:0;
	padding:0 15px;
	color:#fff;
	font-weight:bold;
	font-size:12px;
	line-height:32px;
	text-decoration:none;
	background-color: #006666;
	background-image: url(top-links-background.png);
	background-repeat: repeat-x;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border-right-width: 1px;
	border-right-style: solid;
	border-bottom-style: none;
	border-right-color: #ffffff;
}
#nav a:hover,
#nav a:focus,
#nav a:active {
	background-color: #175D83;
	background-image: url(top-links-background-rollover.png);
	background-repeat: repeat-x;
	color: #FFFF66;
}
/* If a link is in the "sel" class, it uses a different background */
#nav .sel a {
	background-color: #FF6600;
	background-image: url(top-links-background-selected.png);
	background-repeat: repeat-x;
}
#nav .sel a:focus {
	background-color: #175D83;
	background-image: url(top-links-background-rollover.png);
	background-repeat: repeat-x;
}
#breadcrumb_trail {
	float:left;
	margin-left:10px; /* was 210 */
	padding-top:7px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	color: #25a8c6;
	font-size: 11px;
}

#breadcrumb_trail a{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:normal;
	color: #ff3366;
	font-size: 10px;
}

#breadcrumb_trail a hover{
	color: #24a3c2;
	text-decoration: underline;
}


.checkoutHead {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#FFFFFF;
	line-height:20px;
}
.ManuPN {
	color:#999999;
	font-size:9px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: right;
}
/*Special Offers Slider*/

.sliderwrapper{
	position: relative; /*leave as is*/
	float:right;
	margin-right:8px;
	overflow: hidden; /*leave as is*/
	width: 682px; /*width of featured content slider*/
	height: 99px;}

.sliderwrapper .contentdiv{
	visibility: hidden; /*leave as is*/
	position: absolute; /*leave as is*/
	left: 0;  /*leave as is*/
	top: 0;  /*leave as is*/
	background: #ffffff;
	width: 682px; /*width of content DIVs within slider. Total width should equal slider's inner width (682+0+0=682) */
	height: 100%;
	filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1; }

.pagination{
	width: 682px; /*Width of pagination DIV. Total width should equal slider's outer width (682+0+0=682)*/
	text-align: right;
	background-color:#003399;
	background-image:url(file:top-links-background.png);
	padding: 0px 0px 0px 0px;
}

.pagination a{
	padding: 0 5px;
	text-decoration: none; 
	color: #ffffff;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;}

.pagination a:hover, .pagination a.selected{
	color: #000;
	background-color: #ffffff;}