/* colors 
$slate='#4e5e6e';
$ltgrey='#f2f2f2';
*/


/* ---------------- */
/* common style defs */
/* ---------------- */
body {
	margin:0;
	padding:0;
	font-family: Verdana, Tahoma, Helvetica, Arial;
	font-size:x-small;
}

a:link {text-decoration: none}
a:visited {text-decoration: none}
a:active {text-decoration: none}

a img {
	border:none;
}

h2 {
	font-size:large;
}

h3 {
	font-size:medium;
}


/* ---------------- */
/* major containers */
/* ---------------- */
#main {
	margin: 1em 3em 1em 2em;
	background-color: #FFF;
	width:980px; 
}

#menu {
	float:left;
	width:150px;
	margin-right:20px;
	padding-top:1em;
}

#content {
  padding-top: 1em;
  padding-bottom: 1em;
  margin: 0px 0px 0px 170px; 
}

#header {
	margin: 0;
	background-color:#4e5e6e;
	background: url(images/header2-filler.gif) repeat-x top;
	width:980px;
}

#footer {
	clear:both;
	padding: 1em;
	margin-top:1em;
	text-align:right; 
	background: url(images/footer2-filler.gif) repeat-x top;
	color:#4e5e6e;
}

#logo {
}

/* ---------------- */
/* header */
/* ---------------- */

#header #search {
	margin-right:3px;
	float:right;
	margin-top:-55px;
}
#bigQuery {
	font-size: 150%;
}
#searchButton {
	padding:0;
}
#header #key {
	float:left;
	margin-left:310px;
	margin-top:-65px;
	width:75px;
	height:35px;
}

/* ---------------- */
/* menus */
/* ---------------- */

/* inspired by http://www.cssplay.co.uk/menus/definition.html# */
/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and 
Opera streches it half way. */

#menu dl {
	margin:0px 5px 15px 0px;
  padding: 0;
  background: #fff;
  color: #7f7f7f; 
	width:145px;
	font-size:small;
}

#menu dt {
  margin:0; 
  padding: 0px 3px 3px 3px; 
  font-size: 1.2em; 
  color: #4e5e6e; 
  border-bottom:1px solid #fff; 
  background: #fff;
	font-weight:bold;
}

#menu dd {
  margin:0; 
  color: #4e5e6e; 
  border-bottom:1px solid #fff; 
}
  
#menu dd a, #menu dd a:visited {
	padding:5px 3px 5px 3px;
	color:#4e5e6e; 
	text-decoration:none; 
	display:block; 
	background: #f2f2f2;
}

#menu dd a span.prodPrice {
	font-style:italic;
	color:#7f7f7f;
  font-size: 0.9em; 
}

#menu dd a:hover, #menu dd a:hover span.prodPrice {
	background: #ff0000;
	color:#ffffff;
}



/* ---------------- */
/* content */
/* ---------------- */
#context, #contextBottom {
	display:block;
	margin-left: 5px;
	margin-right: 3px;
	margin-bottom:1.5em;
  font-size: 1.3em;
	width:55em;
}


#contextBottom {
	padding-top:1em;
	clear:both;
}

.breadcrumb, .sortOrder {
	color:#4e5e6e;
	float:left;
	display:block;
}

.nav {
	text-align:right;
	float:right;
	display:block;
}

.breadcrumb, .sortOrder a:link {
	text-decoration: none;
	color:#4e5e6e;
}
span.nextNav {
	padding-right: 3px;
}

span.prevNav {
	padding-right: 3px;
}

/* ---------------- */
/* product listings */
/* ---------------- */

/* for grid layout of products
	adapted from: http://thecodecentral.com/2007/10/02/tableless-image-gallery-an-experiment-of-fluid-grid
*/
#prodListing{
  padding-top: .2em;
  width:80em;
  padding-bottom: .2em;
}

#prodListing .product a {
  color:#4e5e6e; 
}

#prodListing .product {
  float: left; 
  margin: 5px; 
  width:13em; 
  height:19em; 
  text-align:left; 
  border:solid 1px #7f7f7f;
	vertical-align:middle;
  position:relative; 
	z-index:24;
  color:#4e5e6e; 
}

#prodListing .product .image {
  width:75px; 
  height:8em;
  margin-top:5px;
	display:block;
	margin-left:auto;
	margin-right:auto;
	vertical-align:middle;
}

#prodListing .product .prodDesc {
  height:5em;
  text-align:left;
  margin: 10px 5px 5px 5px;
	display:block;
}

#prodListing .product .prodPrice {
  text-align:left;
	font-size:1.1em;
	display:block;
	bottom:0px;
	position:relative;
	text-align:left;
}

#prodListing .product .prodPriceDate {
	font-size:0.9em;
  color:#555555; 
	display:block;
  margin: 0px 0px 0px 0px;
	bottom:0px;
	position:relative;
	text-align:left;
}

#prodListing .product span{ 
	display: none; 
}

/* for hovering 
	adapted from: http://trentrichardson.com/examples/csstooltips/
*/
/*background:; ie hack, something must be changed in a for ie to execute it*/
#prodListing .product:hover { 
	z-index:25; 
	color: #aaaaff; 
	background:none;
}


#prodListing .product:hover span.tooltip, 
#prodListing .product:hover span.tooltip1{
	display:block;
	position:absolute;
	top:1em; left:11.5em;
	padding: 0 0 0 0;
	width:247px;
	color: #333333;
	text-align: left;
}

#prodListing .product:hover span.tooltip2{
	display:block;
	position:absolute;
	top:1em; right:12.0em;
	padding: 0 0 0 0;
	width:247px;
	color: #333333;
	text-align: left;
}

#prodListing .product:hover span.heading a, 
#prodListing .product:hover span.heading2 a {
	color: #4e5e6e;
	font-weight:bold;
}

#prodListing  .product:hover span.heading{
	background: url(images/commentBubble-left-filler.gif) repeat bottom;
	padding: 0px 8px 10px 15px; 
	display: block;
	font-size: 1.5em;
	color: #4e5e6e;
	text-align:left;
}

#prodListing  .product:hover span.heading2{
	background: url(images/commentBubble-right-filler.gif) repeat bottom;
	padding: 0px 15px 10px 8px; 
	display: block;
	font-size: 1.5em;
	color: #fff;
	text-align:left;
	color: #4e5e6e;
}

#prodListing  .product:hover span.top{
	display: block;
	padding: 12px 5px 0px 0px;
	background: url(images/commentBubble-left.gif) no-repeat top;
	color: #4e5e6e;
}

#prodListing .product:hover span.middle {
	display: block;
	background: url(images/commentBubble-left-filler.gif) repeat bottom; 
	padding: 5px 20px 0px 15px; 
	font-size: 1.2em;
	color: #4e5e6e;
}

#prodListing .product:hover span.bottom{
	display: block;
	padding:3px 20px 10px;
	background: url(images/commentBubble-left.gif) no-repeat bottom;
	color: #4e5e6e;
}

#prodListing  .product:hover span.top2{
	display: block;
	padding: 16px 5px 0px 0px;
	background: url(images/commentBubble-right.gif) no-repeat top;
	color: #4e5e6e;
}

#prodListing .product:hover span.middle2 {
	display: block;
	background: url(images/commentBubble-right-filler.gif) repeat bottom; 
	padding: 5px 20px 0px 8px; 
	font-size: 1.2em;
	color: #4e5e6e;
}

#prodListing .product:hover span.bottom2{
	display: block;
	padding:3px 20px 10px;
	background: url(images/commentBubble-right.gif) no-repeat bottom;
	color: #4e5e6e;
}

div.bar{ 
	display: block;
  background-color: #fff;
	border: solid 1px #666;
	width: 100px;
	height: 1.2em;
	margin-left:5px;
	float:left;
}

div.bar div{ 
  background-color: #f00;
	display: block;
	height: 1.2em;
}

div.numReviews{ 
	display: block;
  background-color: #fff;
	margin-left:5px;
	float:left;
	height: 1.4em;
	width: 10em;
	margin-top:5px;
}

div.numReviews div{ 
  background: #fff url('images/reviewScale.png') no-repeat 0% 0;
	display: block;
	height: 1.4em;
}

#prodListing .product:hover span.middle span.large{ 
	font-size:1.5em;
	display: block;
	float:right;
}

#prodListing .product:hover span.middle span.largeLeft,
#prodListing .product:hover span.middle2 span.largeLeft{ 
	font-size:1.3em;
	display: block;
	float:left;
	color: #4e5e6e;
}


/* doesn't look used anymore 
#prodListing .product:hover span.middle span.upDown{ 
	display: block;
  background-color: #fff;
	border: solid 1px #666;
	width: 10px;
	height: 10px;
	margin-right:10px;
	float:right;
}
*/

/* ---------------- */
/* homepage         */
/* ---------------- */
#intro {
	margin-bottom:0em;
	padding-bottom:0;
	font-size:1.5em;
	font-weight:normal;
}

#recentComments h2{
	margin-bottom:0em;
	padding-bottom:0;
	font-size:1.7em;
}

#topMovers, #recentComments {
  float: left; 
  width:100%;
  text-align:left; 
	vertical-align:middle;
	z-index:24;
	min-width:400px;
}
#topMovers h2{
	margin-bottom:0;
	padding-bottom:0;
	font-size:1.7em;
}


/* ---------------- */
/* product page     */
/* ---------------- */
.negReviews, .posReviews {
	float: left;
  text-align:left; 
  width:37%;
	min-width:100px;
	position:relative;
	font-size:small;
	margin-bottom:2em;
}

.negReviews {
	margin-right:4%;
}
.posReviews {
	margin-right:4%;
}

.rightSkyscraper {
	float:right;
	margin-right:0%;
}

/* for chat bubbles - using the willmayo.com technique */
.negReview, .posReview {
	margin-top:2em;
}

.negReview blockquote {
	border: 1px solid #ff0000;
}

.posReview blockquote {
	border: 1px solid #339900;
}

.negReview blockquote, .posReview blockquote {
	background-color:#ffffff;
	margin: 0px;
	padding: 0px;
}

.negReviews h2 {
	color:#ff0000;
}

.posReviews h2 {
	color:#339900;
}
.negReview cite {
	background:transparent url('images/negCommentVee.png') no-repeat scroll 20px 0pt;
}

.posReview cite {
	background:transparent url('images/posCommentVee.png') no-repeat scroll 20px 0pt;
}
.negReview cite, .posReview cite {
	font-style:normal;
	margin:0px;
	top:6px;
	position:relative;
	padding:7px 0px 0px 10px;
	color:#666666;
}

blockquote .review{
	margin: 10px;
	padding: 0px;
}


.reviewTitle, .reviewDate {
	font-weight:bold;
}

.bigImage {
	float:left;
	margin-right: 25px;
}

.tags {
	background-color:#f2f2f2;
	min-height: 5em;
}

.negTag, 
#prodListing .product:hover span.middle2 div.tags .negTag, 
#prodListing .product:hover span.middle div.tags .negTag{ 
	color:#ff0000;
}

.posTag {
	color:#339900;
}

.negTag:hover, .negHighlight, 
#prodListing .product:hover span.middle2 div.tags .negTag:hover, 
#prodListing .product:hover span.middle div.tags .negTag:hover { 
	color:#ffffff;
	background-color:#ff0000;
}

.posTag:hover , .posHighlight{
	color:#ffffff;
	background-color:#339900;
}

table.barChart {
/*	margin-left:23%; */
	margin-left:25px;
	float:left;
	border-collapse:collapse;
	border-style:none;
}
span.chartBar, span.chartBarNoBgd {
	width: 100px;
	height: 12px;
	display:block;
}

span.chartBar {
  background-color:#f2f2f2;
}



div.numReviewsSmall{ 
	display: block;
  background-color: #fff;
	height: 12px;
}

div.numReviewsSmall div{ 
  background: #fff url('images/reviewScale-small.png') no-repeat 0% 0;
	display: block;
	height: 12px;
}



div.red, div.slate {
	display:block;
	height: 12px;
}
div.red {
  background-color:#ff0000;
}
div.slate {
  background-color:#4e5e6e;
}
	
th {
	text-align:left;
	font-weight:normal;
}

#prodHeader {
	display:block;
	min-height: 230px;
	height: 21em;
}

#feature {
	display:block;
	min-height: 275px;
	height: 30em;
}

#featuredProduct #neg-default, #featuredProduct #pos-default {
	float:left;
	width: 30%;
	margin-right:4%;
}

#reviewsContainer {
	clear:top;
	display:block;
	margin-bottom:1em;
	margin-top:1em;
}

#priceListing {
  text-align:center;
	position:relative;
}
#priceListing .prodPrice {
	font-size:1.5em;
	color:#4e5e6e;
	font-weight:bold;
}

#priceListing .prodPriceDate {
	font-size:0.9em;
  color:#555555; 
	position:relative;
	margin-bottom:1em;
}

#priceListing .prodPriceDate a:link {
	text-decoration:none;
	color:#555555;
}