/* @override http://localhost/tenneco/c/tenneco.css */

/* base.css | v0.2 (03282010) | Thierry Koblentz
 *
 * The purpose of this styles sheet is to set default styles for common browsers and address common issues (missing scrollbar, extended buttons in IE, gap below images, etc.)
 * 
 * Changes in this version:
 *    - styling <pre> and <code> (see "Fixed Monospace Sizing")
 *    - styling <ol> inside <ul> (merci Goulven)
 */

/* using height:100% on html and body allows to style containers with a 100% height
 * the overflow declaration is to make sure there is a gutter for the scollbar in all browsers regardless of content
 * note that there is no font-size declaration set in this rule. If you wish to include one, you should use font-size: 100.01% to prevent bugs in IE and Opera
 */
html {
  height: 100%;
  /* overflow-y: scroll; */
}
/* not all browsers set white as the default background color 
 * color is set to create not too much contrast with the background color
 * line-height is to ensure that text is legible enough (that there is enough space between the upper and lower line) 
 */	
body {
  height: 100%;
  background: #fff;
  color: #444;
  line-height: 1em;
  font-size: 16px;
}

/* this choice of font-family is supposed to render text the same across platforms
 * letter-spacing makes the font a bit more legible
 */
body, input, button, textarea, select, h1, h2, h3, h4, h5, h6 {
  font-family: Arial, Helvetica, sans-serif;
}

pre, tt, code, kbd, samp, var {
  font-family: "Courier New", Courier, monospace;
}

/* These should be self explanatory
 */
h1 {font-size: 1.5em;}
h2 {font-size: 1.4em;}
h3 {font-size: 1.3em;}
h4 {font-size: 1.2em;}
h5 {font-size: 1.1em;}
h6 {font-size: 1em;}

h1, h2, h3, h4, h5 {font-weight: normal;}

/* styling for links and visited links as well as for links in a hovered, focus and active state 
 * make sure to keep these rules in that order, with :active being last
 * text-decoration: none is to make the links more legible while they are in a hovered, focus or active state
 * a:focus and :focus are used to help keyboard users, you may change their styling, but make sure to give users a visual clue of the element's state.
 * outline:none used with the pseudo-class :active is to avoid the sticky outline when a user clicks on a link, but choose to not follow it
 * note that the last rule does not do anything in IE as this browser does not support "outline" (besides, it treats :active and :focus the same)
 */
a { color: #a9724a; }
a:hover { text-decoration: none;}
*:focus { outline: none; }

/* margin and padding values are reset for all these elements
 * you could remove from there elements you do not used in your documents, but I don't think it'd worth it 
 */
body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, blockquote, th, td {
  margin: 0;
  padding: 0;
}

/* this is to prevent border from showing around fieldsets and images (i.e., images inside anchors)
 */
fieldset, img {
  border: 0;
}

/* to prevent a gap from showing below images in some browsers 
 */
img {vertical-align: bottom;}

/* Styling of list items
 * This styles sheet contains a class to apply on lists to reset list-type and margin on LIs
 */
/*
ol li,
ul ol li {list-style-type: decimal;}
ul li {list-style-type: disc;}
ul ul li {list-style-type: circle;}
ul ul ul li {list-style-type: square;}
ol ol li {list-style-type: lower-alpha;}
ol ol ol li {list-style-type: lower-roman;}
*/

/* These should be self explanatory
 * I believe *most* UAs style sub and sup like this by default so I am not sure there is value to include these rules here
 */
sub {
  vertical-align: sub;
  font-size: smaller;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

/* color is to make that element stands out (see color set via body)
 * padding is used so Internet Explorer does not cut-off descenders in letters like p, g, etc.)
 */
legend {
  padding-bottom: .5em; 
}

/* according to Eric Meyer's reset: tables still need 'cellspacing="0"' in the markup
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* caption and summary are very important for tabular data but because caption is nearly impossible to style across browsers many authors do not use it or use display:none to "hide" it (which is almost the same as not using it).
 * so to prevent such workaround, I am positioning this element off-screen
 */
caption {
  position: absolute;
  left: -999em;
}

/* all th should be centered unless they are in tbody (table body)
 */
th {text-align: center;} 
tbody th {text-align: left;} 

/* See Eric Meyer's article about Fixed Monospace Sizing 
 * http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
 */
code {color: #06f;}
code, pre {font-family: "Courier New", monospace, serif; font-size: 1em;}

/* This should be self explanatory
 */
blockquote, q, em, cite, dfn, i, cite, var, address {
  font-style: italic;
}

/* to prevent some browsers from inserting quotes on "q" and "p" ("p" in blockquotes)
 */
blockquote p:before, blockquote p:after, q:before, q:after {content: '';}

/* These should be self explanatory
 */
th, strong, dt, b {
  font-weight: bold;
}

ins {
  text-decoration: none;
  border-bottom: 3px double #333;
}

del {text-decoration: line-through;} 

abbr, 
acronym {
  border-bottom: 1px dotted #333;
  font-variant: normal;
} 

/* Creating white space (vertical gutters) via padding
 * most authors do not set right/left padding or margin on these elements, they rather use an extra wrapper or style the container with padding to create the left and right gap/gutter they need
 * I find that the latter creates less robust layouts because it leads authors to mix padding with width which creates issue with the broken box model (IE5 or IE6 in quirks mode) 
 * so imho, setting this style using the child combinator (i.e., div > h1) should be the best way to do it, but unfortunately IE 6 does not support such syntax, so I have to go with the following + a reset (see next rule)  
 */
/* h1, h2, h3, h4, h5, h6, p, pre, ol, dl, fieldset, address {padding:0 30px;} */

/* this is to reset the left/right gaps (created by the previous and next rules) on nested elements
 */
dd p, dd pre, dd ul, dd ol, dd dl, li p, li pre, li ul, li ol, li dl, fieldset p, fieldset ul, fieldset ol {
  padding-right: 0;
  padding-left: 0;
}

/* These should be self explanatory
 */
dd {
  padding-left: 20px;
  margin-top: .5em;
}

/* we cannot use padding on a table to create left and right gaps (as we do with the elements above), instead we use margin 
 */ 
 * /*
table {
  margin-right: 30px;
  margin-left: 30px;
} 
*/

/* we use margin for hr for the same reason we do for table 
 */
hr {
  margin-right: 30px;
  margin-left: 30px;
  border-style: inset;
  border-width: 1px;
}

/* top margin solution */
/* this is my approach to create white space between elements, you do not have to adhere to it
 * rather than stylling these elements with top and bottom margin, or simply bottom margin I only use top margin
 */
/* h1, h2, h3, h4, h5, h6, p, pre, dt, hr, legend, input, button, textarea, select, address, table {margin-top: 1.2em;} */

/* top padding solution */
/* this is a different approach which may be less frustrating for novice because it avoids running into collapsing margin and allows to clear floats while preserving space above the element
 * if you decide to give this a try, then comment out the above rule and uncomment the two next ones
 */
 /* 
 h1, h2, h3, h4, h5, h6, p, pre, dt, dd, li, legend, address {padding-top: 1.2em;}
 hr, input, button, textarea, select, table {margin-top: 1.2em;}
 */

/* line height helps to set the vertical alignment of radio buttons and check boxes (remember to group these in fieldsets) 
 */
fieldset {line-height: 1;}

/* vertical alignment of checkboxes (a different value is served to IE 7)
 */
/*
input[type="checkbox"] {
  vertical-align: bottom; 
  *vertical-align: baseline;
}
*/

/* vertical alignment of radio buttons
 */
/*
input[type="radio"] {vertical-align: text-bottom;}
*/

/* vertical alignment of input fields for IE 6
 */
/*
input {_vertical-align: text-bottom;}
*/

/* a specific font-size is set for these elements
 */
input, button, textarea, select, optgroup, option {
  font-size: 1em;
}

/* this is to fix IE 6 and 7 which create extra right/left padding on buttons
 * IMPORTANT: because IE 6 does not understand the first selector below, you need to apply the class "inputButton" to all input of type="button" in your documents
 * the first declaration is for IE 6 and 7, the second one for IE 6 only, the third one is for all browsers.
 */

/*
button,
input[type="submit"],
input[type="reset"],
input[type="button"],
.inputButton {
  *overflow: visible;
  _width: 0;
  padding: .2em .4em;
}
*/

.block {
  padding: 0 30px;
  margin-top: 1.2em;
}

/* to swap padding for margin
 * for example, this class could be used on a heading you'd style with a bottom border
 */
.padding2margin {
  margin-right: 30px;
  margin-left: 30px;
  padding-right: 0;
  padding-left: 0;
}

/* list items are styled by default with markers (disc, etc.) and left margin
 * if you apply the class "noMarker" to a list, its items won't display markers and won't have left margin
 */
.noMarker li {
  list-style: none;
  margin-left: 0;
}

/* .clearfix { overflow: auto; } */

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
	}



/* LAYOUT */

body {
	background: #fff url(../i/themes/default/header_bg.jpg) no-repeat center -21px;
	}
	
#layout {
	width: 1034px;
	margin: 0 auto;	
	}
	
#header {
	position: relative;
	height: 300px;
	}
	#header div.links {
		position: absolute;
		top: 50px;
		right: 35px;
		color: #aaa;
		}
		#header div.links a {
			color: #f5d200;
			font-size: 14px;
			font-weight: bold;
			margin: 0 5px;
			}
	#header img.header {
		position: absolute;
		left: 20px;
		bottom: 0;
		display: block;
		border-top: 3px solid #bbb;
		}
	#header h1 {
		position: absolute;
		top: 25px;
		left: 30px;
		margin: 0;
		padding: 0 !important;
	 	width: 210px;
		height: 46px;
		}
		#header h1 a {
			display: block;
		 	width: 198px;
			height: 49px;
			background: transparent url(../i/themes/default/logo.png) no-repeat center;
			text-indent: -1000px;
			overflow: hidden;
			}
	
#body {
	padding: 20px 40px 40px 40px;
	background: transparent url(../i/body_bg.png) no-repeat top center;
	min-height: 600px;
  	height: auto !important;
 	height: 600px;
	}
	#body #sidebar {
		float: left;
		width: 200px;
		}	
		#body #sidebar h3 {
			font-size: 20px;
			font-weight: bold;
			margin: 0 0 10px 0;
			}
			#body #sidebar h3 em {
				font-weight: normal;
				color: #999;
				font-style: normal;
				}
			#body #sidebar ul.cart {
				margin-left: 12px;
				padding-left: 12px;
				}
				#body #sidebar ul.cart li {
					margin: 0.5em 0;
					}
	#body #content {
		float: right;
		width: 720px;
		}	
		#body #content.full {
			float: none;
			width: 920px;
			margin: 0 auto;
			}	
		#body #content h2 {
			margin: 10px -10px 20px -10px;
			padding: 0 10px 15px 10px;
			border-bottom: 1px solid #ddd;		
			font-size: 30px;
			letter-spacing: -1px;
			}
		#body #content p {
			margin: 0.25em 0 1.25em 0;
			line-height: 1.25em;
			}
	
#footer {
	clear: both;
	background: transparent url(../i/themes/default/footer_bg.jpg) no-repeat top center;
	}
	#footer div.content {
		position: relative;
		margin: 0 auto;
		padding: 20px 30px;
		width: 934px;
		height: 165px;
		background-color: #393939;
		}
		#footer div.content h3 {
			color: #a9724a;
			font-size: 25px;
			font-weight: bold;
			margin: 10px 0 20px 0;
			text-align: center;
			text-shadow: #000 1px 1px 1px;
			}
		#footer div.content ul {
			margin: 0;
			padding: 0;
			list-style-type: none;
			}
			#footer div.content ul li {
				float: left;
				margin: 0 9px;
				display: inline;
				}
				#footer div.content ul li a, 
				#footer div.content ul li img {
					display: block;
					width: 136px;
					height: 49px;
					}
		#footer div.content .copyright {
			width: 934px;
			position: absolute;
			bottom: 20px;
			left: 30px; 
			text-align: center;
			font-size: 13px;
			color: #888;
			padding-top: 10px;
			border-top: 1px solid #555;
			}
			#footer div.content .copyright a {
				color: #a9724a;
				font-weight: bold;
				margin: 0 5px;
				}
		
		
/* CATEGORIES */

ul.categories {
	margin: 0 0 30px 0;
	padding: 0;
	}
	ul.categories li {
		list-style-type: none;
		border-bottom: 1px solid #ddd;
		}
		ul.categories li a {
			display: block;
			padding: 10px 15px;
			cursor: pointer;
			text-decoration: none;
			font-size: 17px;
			}
			ul.categories li a small {
				color: #999;	
				font-size: 13px;
				}
			ul.categories li.selected a {
				font-weight: bold;
				}
				ul.categories li.selected a small {
					display: none;
					}

/* PRODUCTS */

ul#products {
	margin: 0;
	padding: 0;
	}
	ul#products li {
		position: relative;
		float: left;
		width: 216px;
		overflow: hidden;
		margin: 20px 12px 20px 12px;
		display: inline;
		}
		ul#products li h4 {
			margin: 0 0 6px 0;
			padding: 0 8px;
			font-weight: bold;
			font-size: 18px;
			}
			ul#products li h4.small {
				font-size: 16px;
				}
			ul#products li h4.smaller {
				font-size: 12px;
				}
			ul#products li h4.smallest {
				font-size: 10px;
				}
			ul#products li h4 span.price {
				position: absolute;
				right: 8px;
				top: 1px;
				color: #c30f1a;
				font-size: 16px;
				}
				ul#products li h4 span.price small {
					font-weight: normal;
					font-size: 14px;
					color: #aaa;
					}
		ul#products li a {
			display: block;
			width: 216px;
			text-decoration: none;
			}
		ul#products li a div.thumb {
			position: relative;
			width: 216px;
			padding: 15px 0 25px 0;
			background: transparent url(../i/product_thumb_bg.png) no-repeat center top;
			clear: both;
			}
			ul#products li a div.thumb img {
				display: block;
				margin: 0 auto;
				height: 200px;
				}
			ul#products li a div.thumb .availableAsFrom {
				width: 216px;
				display: block;
				text-align: center;
				position: absolute;
				bottom: 6px;
				font-size: 13px;
				color: #999;
				text-decoration: none;
				}
		ul#products li a div.more {
			display: block;
			width: 204px;
			padding-right: 12px; 
			height: 31px;
			color: #a3b0c9;
			font-size: 10px;
			line-height: 31px;
			text-align: right;
			font-weight: bold;
			text-transform: uppercase;
			background: transparent url(../i/themes/default/product_more_bg.png) no-repeat 0 0;
			text-decoration: none;
			}
			ul#products li a:hover div.more {
				color: #fff;
				background-position: 0 -31px;
				}

/* CONTACT */

ul.contact {
	list-style-type: none;	
	padding: 10px 20px;
	margin: 0;
	background-color: #eee;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	}
	ul.contact li {
		margin: 0.5em 0;
		}	
		
/* HOW TO ORDER */

ul.howToOrder {
	list-style-type: decimal;	
	padding: 10px 40px;
	margin: 10px 0 0 0;
	background-color: #eee;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	}
	ul.howToOrder li {
		margin: 0.75em 0;
		}	
		
		
/* PRODUCT */

div#product {
	/* border: 1px dotted #999; */
	}
	div#product div.info {
		float: right;
		width: 325px;				
		}
		#body div#product div.info h2 {
			margin: 20px 0 20px 0;
			padding: 0;
			border: none;
			font-size: 25px;
			font-weight: bold;
			}
		div#product div.info .price {
			display: block;
			font-size: 38px;
			font-weight: bold;
			color: #c30f1a;
			letter-spacing: -1px;
			margin-bottom: 20px;
			}
			div#product div.info .price small {
				font-size: 35px;
				color: #aaa;
				font-weight: normal;
				font-size: 30px;
				}
		#body div#product div.info .description {
			font-size: 15px;
			margin: 25px 0 25px 0;
			line-height: 1.25em;
			}
	div#product div.pictures {
		float: left;
		width: 350px;				
		}
		div#product div.pictures .noPicture {
			width: 348px;
			height: 348px;
			border: 1px solid #ccc;
			line-height: 325px;
			text-align: center;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			font-style: italic;
			}
		div#product div.pictures ul.thumbnails {
			list-style-type: none;
			width: 350px;
			margin: 10px 0;
			}
			div#product div.pictures ul.thumbnails li {
				float: left;
				margin: 0 5px 10px 5px;
				display: inline;
				}
				div#product div.pictures ul.thumbnails li a,
				div#product div.pictures ul.thumbnails li a img {
					display: block;
					width: 75px;
					height: 75px;
					}
				div#product div.pictures ul.thumbnails li a {
					border: 1px solid #ccc;
					}
	div#product .addToCart input.quantity {
		font-weight: bold;
		text-align: center;
		font-size: 15px;
		}
	div#product .addToCart select {
		font-size: 15px;
		}
	div#product .addToCart input {
		font-size: 15px;
		}

	#product div.info p.large_order_subtext{
	font-size: 10pt;
		}

#product div.info p.large_order_text span.large_order_subtext {
	font-size: 10pt;
}
		
	#product div.info p.large_order_text{
		font-size: 11 pt;
		margin: 10px 0 5px 0;
		}
	
		
	
/* LOGIN */

#loginForm {
	width: 250px;
	margin: 75px auto 0 auto;
	background-color: #eee;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 20px;
	}
	#loginForm input[type="text"],
	#loginForm input[type="password"] {
		width: 240px;
		font-size: 18px;
		}
	#loginForm span.error {
		display: block;
		font-size: 12px;
		font-weight: bold;
		color: red;
		margin-top: 10px;
		}
	#loginForm label {
		display: block;
		font-weight: bold;
		margin: 20px 0 5px 0;
		}
	#body #loginForm p {
		margin: 20px 0 0 0;
		}
		#body #loginForm p input {
			font-size: 18px;
			font-weight: bold;
			}
	
/* CART */

table.cart {
	width: 100%;
	border-collapse: collapse;
	}
	table.cart.checkout {
		width: 910px;
		margin: 0 auto 20px auto;
		}
	table.cart td,
	table.cart th {
		padding: 8px 12px;
		vertical-align: middle;
		border-bottom: 1px solid #eee;
		}
	table.cart th {
		font-size: 14px;
		font-weight: bold;
		border-width: 2px;
		}
	table.cart .quantity {
		text-align: center;
		}
	table.cart .price {
		text-align: right;
		white-space: nowrap;
		}
		table.cart tr.total .price {
			font-weight: bold;
			text-align: right;
			}
	table.cart .sku {
		text-align: center;
		}
		table.cart td.sku {
			font-size: 13px;
			color: #666;
			}
	table.cart .product {
		text-align: left;
		width: 100%;
		line-height: 1.4em;
		}
	table.cart tr.shipping td {
		padding: 15px 12px;
		}
		table.cart tr.shipping td .error {
			margin-top: 8px;
			font-size: 13px;
			}
	table.cart td.shipping {
		text-align: left;
		}
		table.cart td.shipping input,
		table.cart td.shipping select {
			font-size: 13px;
			}
		table.cart tr.shipping td.price {
			font-weight: bold;
			}
	table.cart .total {
		text-align: right;
		white-space: nowrap;
		}
	table.cart .quantity input {
		text-align: center;	
		font-weight: bold;
		}
		table.cart tr.total .quantity input {
			font-weight: normal;
			font-size: 13px;
			}
	table.cart .product .title {
		font-size: 18px;
		}
		table.cart .product .title strong {
			color: #333;
			}
	table.cart .product .size {
		font-size: 12px;
		color: #999;
		}
		table.cart .product .size strong {
			color: #333;
			}
	table.cart .remove {
		font-size: 13px;
		font-weight: bold;	
		}

/* SIGN IN */

div.signIn {
	font-size: 14px;
	background-color: #eee;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	padding: 12px;
	margin-top: 40px;
	}

/* CHECKOUT */

#addressForm {
	margin-top: 40px;
	}
	#addressForm div.address {
		width: 400px;
		padding: 20px;
		padding-bottom: 5px;
		background-color: #eee;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		display: inline;
		}
		#addressForm div.address h3 {
			margin-bottom: 1em;
			font-weight: bold;
			}
	#addressForm div.shipping {
		float: left;
		margin-left: 5px;
		}
	#addressForm div.billing {
		float: right;
		margin-right: 5px;
		padding-bottom: 20px;
		}


/* SEND TO A FRIEND */

div#sendToFriend {
	margin: 30px 0 0 0; 
	}
	div#sendToFriend form {
		padding: 5px 15px 15px 15px;
		background-color: #f3f3f3;
		-moz-border-radius: 8px;
		-webkit-border-radius: 8px;
		margin-left: -15px;
		}
	div#sendToFriend label {
		margin: 10px 0 4px 0;
		}
	div#sendToFriend h3 {
		font-size: 17px;
		font-weight: bold;
		margin-bottom: 8px;
		}
	a#sendToFriendLink {
		display: block;
		margin-top: 30px;
		font-weight: bold;
		font-size: 17px;
		}

/* MESSAGES */

div.message {
	margin-bottom: 1em;
	padding: 18px 20px 18px 50px;
	background-repeat: no-repeat;
	background-position: 12px 12px;
	font-size: 18px;
	border: 2px solid #000;
	}
	div.message a {
		color: #333;
		}
	div.message.warning {
		background-color: #fff9e9;
		border-color: #ffb900;
		background-image: url(../i/warning_icon.png);
		}
		div.message.warning a {
			color: #9c7100;
			}
	div.message.success {
		background-color: #f0ffe5;
		border-color: #a3d380;
		background-image: url(../i/success_icon.png);
		}
		div.message.success a {
			color: #366315;
			}
	div.message.error {
		background-color: #ffece5;
		border-color: #cb4b1c;
		background-image: url(../i/error_icon.png);
		}
		div.message.error a {
			color: #cb4b1c;
			}
	div.message ul {
		margin: 12px 0 0 16px;
		padding: 0 0 0 16px;
		list-style: disc;
		}
		div.message ul li {
			font-size: 16px;
			margin: 6px 0 0 0;
			}
			
/* FORM */
		
.form {
	}
	.form input {
		font-size: 15px;
		}
	.form label {
		display: block;
		font-weight: bold;
		cursor: pointer; 
		font-size: 14px;
		}
		.form label .required {
			font-weight: bold;
			color: red;
			}
	.form fieldset {
		margin: 0 0 10px 0;
		}
	.form .field {
		float: left;
		margin: 0 6px 12px 0;
		}
		.form .field label {
			margin: 3px 0 0 1px;
			font-size: 13px;
			font-weight: normal;
			color: #444;
			}
			.form .field label small {
				font-size: 11px;
				font-size: 11px;
				color: #888;
				position: relative;
				top: -1px;
				}

.error {
	display: block;
	font-size: 12px;
	font-weight: bold;
	clear: both;	
	color: red;	
	margin: 3px 0;
	}
				
#body #sidebar,
#body #content,
ul#products li {
	outline: 0px dotted #ccc;
	}