/* CSS Reset
	Resets most of the known elements to a single default so that there is much less
	chance of markup becoming inconsistant between various browsers that may have
	different browser defaults for undefined elements.
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{font-size:100%;}legend{color:#000;}
      


/* DROPDOWN STUFF THAT I ADDED ASIDE FROM KARL */
 


.suggestionsBox {
width: 100%; 
		float: center; 
		position: relative;
	border: 1px solid #dedede; 
	background-color: #fff; 
	position: relative; 
	padding-top: 10px;
	}
	
	.suggestionList {
		margin: 0px;
		padding: 0px;
	}
	
	.suggestionList li {
		
		margin: 0px 0px 3px 0px;
		padding: 3px;
		cursor: pointer;
	}
	
	.suggestionList li:hover {
		background-color: #659CD8;
	}
	
	
	
	.suggestionsBox2 {
	width: 100%; 
	float: center; 
	border: 1px solid #dedede; 
	background-color: #fff; 
	position: relative; 
	padding-top: 10px; 
	}
	
	.suggestionList2 {
		margin: 0px;
		padding: 0px;
	}
	
	.suggestionList2 li {
		
		margin: 0px 0px 3px 0px;
		padding: 3px;
		cursor: pointer;
	}
	
	.suggestionList2 li:hover {
		background-color: #659CD8;
	}
	
	/* Unrelated to dropdown */
	

	
	
	.changes div:hover {
		background-color: #659CD8;
	}
	
	
	
/* END OF STUFF I ADDED */

  
/* Main CSS */
html, body { text-align: center; } 
/* text-align: center, or IE6 won't center the column */

#wrap { width: 100%; position: relative; }
/* IE does not like to center objects with margin: 0 auto, unless
it is wrapped in a 100% block level container such as a div or table */

#main { width: 694px; margin: 0 auto; }
/* The main container, centered. */

#header { 
	width: 100%; height: 150px; 
/*	background: #fff url('img/logo.jpg') no-repeat center center; */
}

#choose { 
	width: 690px; 
	float: left; 
	border: 1px solid #dedede; 
	background-color: #fff; 
	position: relative; 
	padding-top: 10px; 
}

#choose1:hover {
		background-color: #659CD8;
	}

#choose1 { 
	width: 690px; 
	float: left; 
	border: 1px solid #dedede; 
	background-color: #fff; 
	position: relative; 
}


#choose3 { 
a:link {color: #000000; text-decoration: none; }
	a:active {color: #000000; text-decoration: none; }
	a:visited {color: #000000; text-decoration: none; }
	a:hover {color: #000000; text-decoration: none; }
		font-weight: bold;
	width: 690px; 
	float: left; 
	border: 1px solid #dedede; 
	background-color: #fff; 
	position: relative; 
	
}



	


#choose2 { 
	width: 690px; 
	float: left; 
	border: 0px solid #dedede; 
	background-color: #fff; 
	position: relative; 
	padding-top: 10px; 
}


#footer { width: 100%; padding-top: 50px;  }

#content { 
	width: 100%; padding-top: 200px; 
	background: #fff url('img/compare.jpg') no-repeat 0 0; 
	position: relative; 
}
/* The main content area. Position is set to relative, so that absolute positioned
elements are based off the edge of this container, not the body */

#content input { 
	position: absolute; 
	top: 65px;
	left: 357px;
	height: 36px;
	width: 225px;
	border: none; outline: none;
	font-family: Helvetica, Arial; 
	font-size: 28px; 
	line-height: 36px;
	text-align: center;
}

#content input.left { left: 111px; }
/* The two above were input[type='text'] and input:first-child but 
IE6 does not support this */
        
#content input.submit { 
	position: absolute; 
	height: 52px; 
	width: 200px; 
	top: 123px; 
	border: none; 
	left: 247px; 
	background: none; text-indent: -9999px; 
	cursor: pointer; 
}
/* The above was input[type='submit'] but IE6 does not support this */

#content h3 { 
	font-size: 18px; 
	font-family: Arial; 
	width: 100%; 
	text-align: center; 
	color: #123b77; 
	margin-bottom: 20px; 
}

#content h4 { 
	font-size: 15px; 
	font-family: Arial; 
	width: 100%; 
	text-align: center; 
	color: #123b77; 
	margin-bottom: 20px; 
}


#content h5 { 
	font-size: 15px; 
	font-family: Arial; 
	width: 100%; 
	text-align: center; 
	color: #123b77;  
}

/* The only divs in the content area will be floated product boxes */  



      
#compare { 
	width: 340px; 
	float: left; 
	border: 1px solid #dedede; 
	background-color: #fff; 
	position: relative; 
	padding-top: 10px; 
}

#compare_specs { 
	width: 340px; 
	float: left; 
	border: 1px solid #dedede; 
	background-color: #fff; 
	position: relative; 
	padding-top: 10px; 
}

#compare_review { 
	width: 340px; 
	float: left; 
	border: 1px solid #dedede; 
	background-color: #fff; 
	position: relative; 
	padding-top: 10px; 
}






#compare1 { 
	width: 680px; 
	float: left; 
	border: 1px solid #dedede; 
	background-color: #fff; 
	position: relative; 
	padding-top: 10px; 
}

#compare_specs1 { 
	width: 680px; 
	float: left; 
	border: 1px solid #dedede; 
	background-color: #fff; 
	position: relative; 
	padding-top: 10px; 
}

#compare_review1 { 
	width: 680px; 
	float: left; 
	border: 1px solid #dedede; 
	background-color: #fff; 
	position: relative; 
	padding-top: 10px; 
}



#content div.right { margin-left: 10px; }
/* The above was div + div , but IE6 does not support this */

#content > br { clear: left; }
/* The above was div + div:after but IE does not support that, 
so we have to use a br tag to clear the float */
        
#choosetable { width: 100%; border: none; margin: 0 auto; }


/* Since tables will only appear in product boxes no need to define #content in front */
#mainc { width: 320px; border: none; margin: 0 auto; }
td { 
	font-family: Arial; 
	font-size: 12px; 
	padding: 10px; 
	color: #001e62; 
	font-weight: bold; 
	text-align: left; 
}

#mainc1 { width: 640px; border: none; margin: 0 auto; }
td { 
	font-family: Arial; 
	font-size: 12px; 
	padding: 10px; 
	color: #001e62; 
	font-weight: bold; 
	text-align: left; 
}

td.right { text-align: right; font-weight: normal; color: #616161; }
td.cat { font-weight: normal; }
/* Above was td + td , but IE6 does not support that */
        
thead tr { background-color: #f9d769; border-bottom: 1px solid #e7ca6e; }
thead tr td { color: #692800; }
thead tr td.right { padding: 0px; padding-right: 5px; }
div.right thead tr { background-color: #87b2db; border-bottom: 1px solid #7facd7; }
div.right thead tr td { color: #fff; }
/* Preferably it would be nice to use the CSS 3 methods below, but IE does not yet support this, 
Safari, Opera, Firefox, Chrome, etc do
        
tbody tr:nth-child(odd) { background-color:#fff; }
tbody tr:nth-child(even) { background-color:#eff2f5; border-bottom: 1px solid #e8ebef; } 
        
So instead we need to use an alt class
*/
tbody tr { background-color: #fff; vertical-align: top; }
tbody tr.alt { background-color: #eff2f5; border-bottom: 1px solid #e8ebef; }

/* The copyright notice */
#footer > p { 
	font-family: Arial; 
	font-size: 12px; 
	color: #b1b1b1; 
	line-height: 16px; 
}
#nav {
	background: #8fbeec url('img/footm.jpg') no-repeat center center;
	height: 41px; width: auto; display: inline-block;
	position: relative; margin: 0 auto; margin-bottom: 20px;
	padding-left: 10px; padding-right: 10px;
}

#nav .l { position: absolute; left: 0px; top: 0px; height: 41px; width: 8px; overflow: hidden; background: #8fbeec url('img/footl.jpg') no-repeat 0 0; }
#nav .r { position: absolute; right: 0px; top: 0px; height: 41px; width: 8px; overflow: hidden; background: #8fbeec url('img/footr.jpg') no-repeat 0 0; }
#nav p { padding-top: 15px; font-family: Arial; font-size: 12px; color: #053767; }
#nav p a { text-decoration: none; font-family: Arial; font-size: 12px; color: #053767; margin-left: 10px; margin-right: 10px; }
#nav p a:hover { text-decoration: underline; }

      ul#tabs { list-style-type: none; padding: 0 0 0.3em 0;font-family: Arial; font-size: 18px;  } 
      ul#tabs li { display: inline; }
      ul#tabs li a { color: #000; background-color: #fff; border: 1px solid #c9c3ba; padding: 0.3em; text-decoration: none; }
      ul#tabs li a:hover { background-color: #eff2f5; }
      ul#tabs li a.selected { color: #000; background-color: #eff2f5; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
      div.tabContent { }
      div.tabContent.hide { display: none; }
      
      a.link {
    display: block;
}