@import url("base_style.css");

#reviewContest {
  font-size: .7em;
}

body {
	/*background: #fff url(/graphics/bg.gif) repeat-x;*/
  background-position: 0px 130px;
	color: #000;
}

#pageWrap {
  background: #fff url(/graphics/bg_left.gif) repeat-y;
  }	

/* We're not using our right column, so no need for extra padding. (Reduce from ntl_core.css) */
#pageMain {
  padding-right: 10px; 
  }
  
#pageBottom {
  border-top: 1px solid #eee;
  margin: auto;
  width: 80%;
}
	
/* Logo and navigation at the top of the page */
.topBox {
	background: white;
	font-size: .8em;
  height: 108px;
	width: 100%;
	position: relative;
}

.logoBox {
 float: left;
 margin: 3px 0;
 width: 225px;
 }
 
/* Order- and cart-related items at the very top */
.navShop {
	padding: 4px;
	position: absolute;
	bottom: 0;
	right: 0;
}
	
.navShop a {
	padding: 0 6px;
}	

.topDiv { 
  background: transparent url('/graphics/gradient_bg.png') repeat-x;
  border: 1px solid #A9A7DF;
  border-left: 0;
  border-right: 0;
  height: 37px;
  width: 100%; 
  }

/* Navigation */

.breadcrumb {
	color: #6B5AA6;
	font-size: .7em;
	margin-top: 20px;
	padding: 10px 0;
}
	
.pageNav {
	color: gray;
	font-size: .9em;
}	

.pageNav .current {
	font-weight: bold;
}

.pageViewing {
	color: gray;
	font-size: .7em;
	padding-top: 2px;
}	
	
/* Sort form and elements */

.nosort {
  color: gray;
	font-size: .8em;
	line-height: 1.2em;
	margin: 14px 0;
}

.sortform {
	font-size: .8em;
}

/* Height and top margin give this pretty much the same position in IE and FF */
/* Text-indent pushes aside the text IE requires.  */
.sortform button {
	border: 0;
  font-size: 0;
	height: 20px;
	margin-top: -4px;
	width: 20px;
}

button.arrowup {	
	background: url(/graphics/arr_up.gif) no-repeat;
	background-position: 50% 50%;
}
	
button.arrowup:hover {
	background: url(/graphics/arr_down.gif) no-repeat;
	background-position: 50% 50%;		
  }	
	
button.arrowdown {	
	background: url(/graphics/arr_down.gif) no-repeat;
	background-position: 50% 50%;	
}	
	
button.arrowdown:hover {
	background: url(/graphics/arr_up.gif) no-repeat;
	background-position: 50% 50%;		
  }		

.sortform .buttonlabel {
	font-size: .9em;
	margin-left: 4px;
  }

/* Search */

.searchForm .textInput {
  color: #777777;
  width: 370px;
  }
  
.searchForm .subButton {
  background: url(/graphics/go.gif) no-repeat;
  border: none;
  cursor: pointer;
  height: 24px;
  margin-bottom: -4px; /* This makes all form elements line up in IE 8 while hardly affecting FF 3.6. Gofigure. */
  width: 27px;
  }
  
.searchForm .small {
  font-size: .7em;
  line-height: .8em;
  }  

#topSearch {
  padding: 4px;
  }

#topSearch label {
  color: #6b5aa6;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  }

/* Left navigation */

#leftNav {  /* I don't love the extra padding and margin, but it's for consistancy at the moment */
	background: #eaeaea;
  min-height: 100%;
  margin-top: 20px;
  padding: 30px 20px 30px 10px;
}

.leftNavHead {
  color: #6B5AA6;
  font-size: 1.3em;
  line-height: 1.7em;
}

/* Left navigation list items and nested categories */

#leftNav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}	

.lnTop {
  border-bottom: 1px dotted #A9A7DF;
	color: #6B5AA6;
	font-size: .8em;
	padding: 4px;
}

.lnOne {
	font-size: .9em;
	font-weight: normal;	
	padding: 2px 0 0 8px;
}

.lnTwo {
	font-size: .9em;
	font-weight: normal;	
	padding: 2px 0 0 8px;	
}
/* Social items on left nav */

.lnSocial {
	margin:auto;
	padding: 4px 0;
	text-align:center;
	width:200px;
}


/* Manufacturer Filter */

#manFilter {
  margin-left: 230px;
  text-align: center;
}

#manFilter label {
  color: #6b5aa6;
  font-family: Arial, Helvetica, sans-serif;
  font-size: .9em;
  font-weight: bold;
  }

#manFilter label span {
  font-size: .7em;
}

#manFilter select {
  color: gray;
  font-size: .7em;
  width: 145px;
}

/* Bottom navigation etc */

.navBottom {
	font-size: .8em;
	margin: auto;
	margin-left: 230px;
	text-align: center;
}

.navBottom .links a {	
	padding: 0 4px;
}

.copyright {
  font-size: 85%;
  margin: 24px 0;
  }

/* Products/categories pages */

.ptRow {
  border-bottom: 1px solid #eee;
  /* Some weird spacing shifts happen when we remove content from the right column. */
  /* This margin setting keeps our category pages looking tidy. */
  margin-right: 20px;
}

div.prodCell {
  float: left;
  height: 300px;
  margin: 6px 10px 6px 0;
  padding: 6px 0;
  text-align: center;
  width: 215px;
  }

.ptFloatLeft {
  float: left;
  }

.ptFloatRight {
  float: right;
  }

.ptImgBox {
  height: 140px;
  margin: auto;
  margin-bottom: 8px;
  text-align: center;
  }

.ptImgBox a {
  display: block;
  }

.ptStuffBox {
  bottom: 0;
  position: absolute;
  width: 100%;
  }

.ptThumb {
	padding: 4px 0;
}

.ptName {
	font-size: .9em;
	font-weight: bold;
	height: 30px;
	line-height: 1.2em;
}

.ptDesc	{
	font-size: .8em;
	line-height: 140%;
	height: 40px;
}

.ptPrice, .ptRating {	
	color: gray;
  float: left;
	font-size: .8em;
	font-weight: bold;
	padding: 3px 0 0 0;
	width: 43%;
}

.ptPrice a, ptRating a {
	color: gray;
  } 
 
.ptManufacturer {
  color: gray;
  font-size: 10px;
  }

.ptOos {
	color: gray;
	font-size: .8em;
	font-style: italic;
}

/* Related/recommended items */

.relatedBox {
  border: 1px solid #eee;
  padding: 0 4px;
  }

div.recProdCell {
  float: left;
  margin: auto;
  padding: 5px 6px;
  position: relative;
  width: 122px;
  }
  
.recProdCell a {
  font-weight: normal;
  }

.recProdCell .ptName	{
	height: auto;
}
	
.recProdCell .ptPrice {
  float: none;
  width: 100%;
  }

.recProdCell .ptRate {
  float: none;
  }

/* Individual Product Pages */

/* Holds the image and the basic info */

.prodImage {
  float: left; 
  margin-right: 12px;
  min-height: 300px;
  min-width: 260px;
  }

.prodImage img {
  display: block;
  margin: auto;
  }

/* Our cart button */
.prodInfo img {
  margin-left: -6px;
  }

h1.prodName {
	color: #6B5AA6;
	margin-bottom: 0;
}

.prodManu {
  font-size: .9em;
  font-style: italic;
  }

.prodPid { 
	color: gray;
	font-size: .9em;
	padding: 4px; 
}

.prodDesc { 
	font-size: .9em;
	margin: 6px 0 8px 0;
	width: 80%;
}

.prodPrice {
	color: gray;
	font-size: 1.6em;
	font-weight: bold;
	padding: 4px 0;
}
	
.prodRate {
  font-size: 95%;
  } 
	
.prodRateMeta {	
  visibility: hidden;
  }
	
.prodCatMeta {
  color: gray;
  font-size: .8em;
  }	

.prodOos {
	color: gray;
	font-style: italic;
}

.prodNotify {
	font-size: .9em;
	font-style: italic;
}

.prodOptions {
	padding: 8px 0;
}

.prodOptions .label {
	font-size: .7em;
}

.prodOptions form {
	margin-top: 0;
	padding-top: 4px;
}	

.prodOptions select {
	width: 220px;
}

.reviewNote {
  font-size: .8em;
  font-style: italic;
  padding: 12px 0;
  }

.reviewRow {
  font-size: .8em;
  padding: 12px;
  border-bottom: 1px solid #eee;  
  }

.reviewTitle {
  font-weight: bold;
}

 .reviewStars {
  padding: 4px 0 4px 0;
  }

.reviewText {
  padding: 6px 0;
  }

#entryMoreCart {
  padding: 12px 0;
  }

#entryMoreCart .name {
  color:#333;
  font-size:14px;
  font-weight:bold;
  padding:6px;
  }

#entryMoreCart .price {
  color:#e23636;
  font-size:18px;
  font-weight:bold;
  padding:6px;  
  }

.moreCartThumb {
  float:left;
  height:140px;
  min-width: 100px;
  padding:0 12px 0 0;
  }

.moreCartThumb img {
    margin: auto;
/*    left: 45%; Works great on a skinny image; how about a regular sized one? - Answer: Not good! */
    position: relative;
  }


#entryMoreCart .cartButton img {
  margin-left: -5px;
}

/* Notifications lists and stuff */

.notifyLink {
	font-size: .8em;
	font-style: italic;
	line-height: 1.2em;
}

table.notifyList {
	margin-bottom: 12px;
}

.notifyList td {
	font-size: .9em;
	padding: 4px;
}

.notifyOptions {
	font-size: .9em;
}

/* Non-store pages */

.article {
  margin: 24px 36px 48px 12px;
  }
  
/* General */

.small {
  font-size: small;
  }

.sc {
	font-variant: small-caps;
}
	
.center {
  text-align: center;
  margin: auto;
  }	
  
br.clear {
  clear: both;
  }