/*
CSS-file for Strictly CSS three column layout 2006
http://www.strictlycss.com
Developed by Eivind Savio
*/
* /*Set's border, padding and margin to 0 for all values*/
{
	padding: 0;
	margin: 0;
	/* border: 0; */
}
* html #mainContainer #ieFrame {
	width: 90%;
}
* html #mainContainer #ieFrameSmall {
	width: 100%;
}
a img {
	border:none;
}
body, html {
	color: #000000; 
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	background-color: #5D5D5D !important;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

body {
	margin-top: 10px;
	min-width: 940px;
}

#content h1 {
	font-size: 22px;
}
#content h2 {
	font-size: 16px;
}
.alertBox {
	background-color:#FFCC66 !important;
	padding:5px !important;
}

#frame {
	text-align:center;
	width:100%;
	margin-top:10px;
}

#breadCrumb {
	text-align:left;
	font-size:10px;
	color: #000000;
	margin:0 0 6px 0;
	padding:0px;
	text-transform:capitalize;
}

#breadCrumb a:link, #breadCrumb a:visited, #breadCrumb a:active {
	color: #000000;
	font-size:10px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	text-decoration: none;
}
#breadCrumb a:hover {
	text-decoration: underline;
}
#breadCrumb strong {
	color: #A81E38;
	font-weight:normal;
}

#breadCrumb h2 {
	font-size:10px;
}

p {
	padding: 7px 0 7px 0;
}

.clear {
	clear: both;
}
.titleCase {
	text-transform: capitalize;
}

#mainContainer {
	width:940px;
	min-height: 500px;
	background: #E1E1E1;
	border:1px solid #000000;
	margin-left: auto;
	margin-right: auto;
}

* html #mainContainer {
	height: 500px; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}

/**************************
HEADER
**************************/
#Header {
	height: 160px;
	width: 940px;
	margin: 0px;
	padding: 0px;
	clear: both;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#Header #LogoRow {
	height: 110px;
	clear: both;
	width: 940px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	
}

#Header #LogoRow #Logo{
	width: 311px;
	float: left;
	margin: 0px;
	padding: 19px 0 0 14px;
	font-size:12px;
}

#Header #LogoRow #Search{
	width: 235px;
	float: left;
	margin: 24px 0 0 40px;
	padding: 0 0 0 0;
	text-align:center;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 10px;
}
#Header #LogoRow #Search strong{
	font-size: 16px;
}
* html #Header #LogoRow #Search{ /* ie hack */
	width: 215px;
}

#Header #LogoRow #User{
	width: 325px;
	float: left;
	margin: 24px 15px 0 0;
	padding: 0 0 0 0;
	text-align:right;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 12px;
	line-height:25px;
}
#Header #LogoRow #User strong{
	font-size:16px;
}

#Header #LogoRow #User a:link, #Header #LogoRow #User a:visited, #Header #LogoRow #User a:active {
	color: #000000;
	text-decoration: underline;
}
#Header #LogoRow #User a:hover {
	color: #000000;
	text-decoration: none;
}

#Header #Links {
	width: 940px;
	height: 17px;
	text-align: left;
	padding: 0 0 0 6px;
	float: left;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 12px;
}
#Header #Links a:link, #Header #Links a:visited, #Header #Links a:active {
	color: #A81E38; /* #A81E38; */
	text-decoration: underline;
	font-weight:bold;
}
#Header #Links a:hover {
	color: #000000;
	text-decoration: none;
}


#Header #BlackBar {
	background-color:#000000;
	width:940px;
	height:10px;
	clear: both;
}


#Header #Menu  {
	padding: 0px;
	width: 940px;
	height: 23px;
	clear: both;
	text-align: center;
	background-position: left;
	background-image: url(../images/menuTop/filler.jpg);
	background-repeat: no-repeat;
	font-size:10px;
}

#Header #Menu ul {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width:486px;
	height:23px;
	margin-left: auto;
	margin-right: auto;
	list-style-type: none;
}

#Header #Menu ul li {
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	height:23px;
	text-align: center;
	list-style-type:none;
	float: left;
	cursor: pointer;
	background-position: left;
	background-repeat: no-repeat;
}

/* Top Rollovers */
#Header #Menu #Home a {
display:block;
width: 56px;
padding:0;
margin:0;
background: url("../images/menuTop/Home.jpg") 0 0 no-repeat;
text-decoration: none;
line-height:23px;
}
#Header #Menu #Home a:hover { 
background-position: 0 -23px;
}

#Header #Menu #Login a {
display:block;
width:59px;
padding:0;
margin:0;
background: url("../images/menuTop/Login.jpg") 0 0 no-repeat;
text-decoration: none;
line-height:23px;
}
#Header #Menu #Login a:hover { 
background-position: 0 -23px;
}

#Header #Menu #Cart a {
display:block;
width:115px;
padding:0;
margin:0;
background: url("../images/menuTop/Cart.jpg") 0 0 no-repeat;
text-decoration: none;
line-height:23px;
}
#Header #Menu #Cart a:hover { 
background-position: 0 -23px;
}

#Header #Menu #Catalog a {
display:block;
width:151px;
padding:0;
margin:0;
background: url("../images/menuTop/Catalog.jpg") 0 0 no-repeat;
text-decoration: none;
line-height:23px;
}
#Header #Menu #Catalog a:hover { 
background-position: 0 -23px;
}

#Header #Menu #Status a {
display:block;
width:105px;
padding:0;
margin:0;
background: url("../images/menuTop/Status.jpg") 0 0 no-repeat;
text-decoration: none;
line-height:23px;
}
#Header #Menu #Status a:hover { 
background-position: 0 -23px;
}
/* End Top Rollovers */


/**************************
CONTENT AND COLUMNS
**************************/
.outer {
	border-left: 198px solid #E1E1E1; /*** This is the width and the color for our left column ***/
	/* Assume no right panel
	border-right: 167px solid #E1E1E1; /*** This is the width and the color for our right column ***/
}

* html .outer {
	/*** No need for hacking IE on this layout ***/
}

.inner {
	width: 100%; 
}

* html .inner {
	/*** No need for hacking IE on this layout ***/
}

/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid 
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout. It blows 
my mind that all this hacking is being caused by the mighty Gecko engine! (shakes head ruefully)
***/
.float-wrap {
	float: left;
	width: 100%;
	margin-left: -198px; /*** Same length as .outer border-left but with negative value ***/
}

* html .float-wrap {
	/*** No need for hacking IE on this layout ***/
}

#content {
	float: right;
	/*background: #FFFFFF; */		
	margin-right: -198px;  /*** Same length as .outer border-left but with negative value ***/
	width: 100%;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 12px;
	color: #000000;
}

* html #content {
	position: relative;
}


.contentWrap{
	padding: 10px 20px 10px 20px;
}


/**************************
BUTTONS
**************************/
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

a.button{
background: transparent url('../images/general/ButtonEdge.png') no-repeat bottom left;
display: block;
float: left;
line-height: 16px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background */
height: 25px; /* Height of button background height */
padding-left: 10px; /* Width of left menu image */
text-decoration:none !important;
color: #FFFFFF; /*button text color*/
font-size:11px;
border:0px dashed blue;
}

a.button span{
background: transparent url('../images/general/ButtonFill.png') no-repeat bottom right;
display: block;
padding: 5px 10px 4px 0; /*Set 10px below to match value of 'padding-left' value above*/
text-decoration:none !important;
}

a.button:hover{ /* Hover state CSS */
background-position: top left;
text-decoration:none !important;
}

a.button:hover span{ /* Hover state CSS */
background-position: top right;
text-decoration:none !important;
color: #FFFFFF;
}

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width:100%;
border:0px dashed red;
}
.buttonwrapper input{ 
	display:block;
	border:1px solid yellow;
	border:none;
	padding:0 4px 0 0;
	margin:0px;
	background-color:transparent;
	cursor:pointer;
	height:16px;
	color:#FFFFFF;
	font-size:11px;
}

.center {
	margin-left:41px;
}
* html .center {
	margin-left:28px;
}
/**************************
LEFT COLUMN
**************************/
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, 
div.left is carried over into the proper position. 
***/
#leftCol {
	float: left;
	width: 198px;
	min-height: 533px;
	padding: 0px;
	font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;
	font-size: 12px;
	color: #000000;
	text-align: left;
}

* html #leftCol {
	position: relative;  /*** IE needs this  ***/
	height: 533px;
}


#leftCol #BGextender {
	background-image: url(../images/menuLeft/BGfiller.jpg);
	background-repeat: repeat-y;
	background-position: top left;
}
#leftCol #BGextender #Panel {
	background-image: url(../images/menuLeft/BGgradient.jpg);
	background-repeat: no-repeat;
	background-position: top left;
}
#leftCol #BGextender #Panel #BGfooter {
	background-image: url(../images/menuLeft/BGbottom.jpg);
	background-repeat: no-repeat;
	background-position: bottom left;
}


#leftCol a:link, #leftCol a:visited, #leftCol a:active {
	color: #000000;
	font-weight: bold;
	text-decoration: none;
}
#leftCol a:hover {
	text-decoration: none;
}


#leftCol ul {
	width: 169px;
	margin: 0px 0px 0px 0px;
	padding: 23px 0px 12px 10px;
	list-style-type: none;
	color: #000000;
	font-weight: bold;
	overflow:hidden;
}

#leftCol ul li {
	margin:0px;
	padding:2px 0 3px 0;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: top left;
}
#leftCol ul li.level2 {
	padding:2px 0 3px 10px;
}
#leftCol ul li.level3 {
	padding:2px 0 3px 20px;
}

#leftCol ul li a, a.multiline {
	color: #000000;
	font-weight: bold;
	text-decoration: none;
	padding:2px 150px 2px 4px;
	white-space: nowrap;
}
a.multiline{ /* CURRENTLY NOT WORKING */
	white-space: normal;
	width:169px;
	background-color:lime;
}
#leftCol ul li a:hover {
	background-color:#FFFFFF;
	padding:2px 150px 2px 4px;
}
#leftCol ul li a.gray20:hover {
	background-color:#EEEEEE;
}
#leftCol ul li a.gray40:hover {
	background-color:#D0D0D0;
}
#leftCol ul li a.gray60:hover {
	background-color:#C0C0C0;
}


/* Left Rollovers */
#leftCol #DVDfav a {
display:block;
width: 169px;
padding:0;
margin:0;
background: url("../images/menuLeft/DVD_Favorites.jpg") 0 0 no-repeat;
text-decoration: none;
line-height:20px;
z-index:50;
}
#leftCol #DVDfav a:hover { 
background-position: 0 -20px;
}

#leftCol #Clearance a {
display:block;
width: 169px;
padding:0 0 0 18px;
margin:0;
background: url("../images/menuLeft/Clearance.jpg") 0 0 no-repeat;
text-decoration: none;
line-height:16px;
color:#A81E38;
}
#leftCol #Clearance a:hover { 
background-position: 0 -16px;
color:#FFFFFF;
}

#leftCol #Storage a {
display:block;
width: 169px;
padding:0;
margin:0;
background: url("../images/menuLeft/Storage.jpg") 0 0 no-repeat;
text-decoration: none;
line-height:17px;
}
#leftCol #Storage a:hover { 
background-position: 0 -17px;
}
/* End Rollovers */

#leftCol div.banPos {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	float: left;
	clear:both;
	width: 198px;
	text-align:center
}

/*************************
RIGHT COLUMN
**************************/

#rightCol {
	float: right; 
	width: 167px;
	padding: 0 0 0 0;
	min-height: 533px;
	margin-right: -167px; /** This negative margin-right value is the width of the right column + the padding, in this example 130px. ***/
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

* html #rightCol {
	height: 533px;
	position: relative;  /*** IE needs this  ***/
}

#rightCol #topTen {
	padding: 0;
	margin: 35px 0 0 0;
	width: 145px;
	/*height:521px;*/
	text-transform: capitalize;
	text-align: left;
}

#rightCol #topTen li {
	margin:0;
	padding:0;
	list-style-type:none;
	border:0px solid red;
}
#rightCol #topTen li.odd {
	background-color: #4373A7;
}
#rightCol #topTen li.even {
	background-color: #2A5C91;
}
#rightCol #topTen li.graphic {
	height:46px;
	border:0px solid red;
}
#rightCol #topTen li.graphic img {
	padding:0;
	margin:0;
	border:0px solid blue;
}
#rightCol #topTen li.footer {
	background-color:#E1E1E1;
	height:20px;
}

#rightCol #topTen .number {
	float:left;
	display:block;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	padding:8px 4px 4px 4px;
	width:25px;
	border:0px solid orange;
}
#rightCol #topTen .info {
	float:left;
	width:105px;
	display:block;
	padding:4px 0 4px 2px;
	font-size: 10px;
	color: #FFFFFF;
	text-align:left;
	vertical-align:middle;
	border:0px solid green;
}

#rightCol #topTen a:link, #rightCol #topTen a:visited, #rightCol #topTen a:active {
	color: #FFCC00;
	text-decoration: underline;
}
#rightCol #topTen a:hover {
	text-decoration: none;
}


/*********************************************************
	Buckets
***********************************************************/
#topBucket{
	padding:6px;
	text-align:left;
	margin:0px 0 2px 6px;
}

#bottomBucket{
	/* background-color:#C2A687; */
	padding:6px;
	margin:6px 0 0 6px;
	clear:both;
	text-align:left;
}


/**************************
FOOTER
**************************/
#footer {
	text-align: right;
	background-color: #000000;
	width: 940px;
	height: 22px;
	line-height: 22px;
}

/**************************
BOTTOM BANNERS
**************************/
#bottomBanners {
	padding: 10px;
	margin: 10px;
	clear: both;
	text-align: center;
}

#bottomBanners div.banPos {
	margin: 0 10px 0 10px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 0 0 0;
	width:250px;
	height: 150px;
}