/*
		Main Template Styles
	~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ 
*/

* { margin:0; padding:0; } /* Global Reset */

/* Add some margin effect, etc */
#main_content_wrapper h1, h2, h3, h4, h5, h6, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 5%;}
li, dd 		{margin-left:5%; }
fieldset 	{padding: .5em; }
select 		{min-width:1.5em; }

body {
	font-family:'Trebuchet MS',Arial,Helvetica,sans-serif; /* Define the font here, once */
	background: #000 url('../img/bg/bg_body_detailed.gif') top left repeat-x;
	font-size:82%; 
	line-height:1.3em;
	color:#000;
}


a:link, a:visited {color:#fc3; }
a:hover, a:active {color:#ff9; }

#main_content a:link, #main_content a:visited {color:#03c; }
#main_content a:hover, #main_content a:active {color:#06f; }

h1, h2, h3, h4, h5, h6	{font-family: Arial,Verdana,Helvetica,sans-serif; }

div#header { height:140px; position:relative; text-align:center; }
#header h1	{display:none; }
#header	{background: transparent url('../img/bg/bg-header.gif') bottom left no-repeat;}

div#header div.padding {padding:10px 0 0 0;}
#header img {border: 0;}

#page_wrapper {width:980px; margin:1em auto; position:relative; }

div#main_content_wrapper {background:#000 url('../img/bg/bg-main_content.gif') top left repeat-y;}
div#wrap { width:980px; margin: 0 auto; border-bottom:2px solid #900; }


div#left_sidebar {
	width:239px;
	float:left;
	border-right: 1px solid #590000;
	color:#fff;
	background:transparent url('../img/bg/bg-left_sidebar.gif') top left repeat-x;
}
div#main_content {
	width:720px;
	float:left;
	padding:5px 10px;
	background:#fff;
	background:transparent url('../img/bg/bg-main_content_column.gif') top left repeat-x;
}

/* increase line heigh to promote easier readability */
#main_content {line-height:1.8em; letter-spacing:0.01em; }

/* Make sure p has spacing */
#main_content p {margin-bottom: 1.6em;}

/* Main Body Headings */
#main_content h1, #main_content h2	{line-height:120%; font-weight:normal; color:#c00; margin:0.5em 0 1em 0;}
#main_content h1 {font-size: 200%; }
#main_content h2 {font-size:170%;}


div#footer {
	clear:both; 
	padding:10px;
	margin: 20px 0 0 0; 
	background: #000 url('../img/bg/footer-bg.gif') 0 0 repeat-x;
	text-align:center;
	color:#fff;
	font-size:0.8em;
}

div#designer {padding:5px 0; text-align:center; clear:both; }
div#designer a:link,div#designer a:visited { color:#eee; text-decoration:none; }
div#designer a:hover { text-decoration:underline; }
	

/* Left side menu */
div#left_sidebar ul li {list-style-type:none; margin:0;}
div#left_sidebar ul li a:link, div#left_sidebar ul li a:visited {color:#fff; text-decoration:none; width:100%; display:block; }
div#left_sidebar ul li a:hover {text-decoration:underline; }
* html div#left_sidebar ul {width:80%; } /* ie6 fix */

/* Special Offers */
#offers		{width:220px; margin:20px auto 10px auto; }

/* Testimonials */
#testimonials		{width:220px; margin:20px auto 10px auto; }

/*  Float containers fix: */ 
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix{display: inline-block;} 
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;} 
.clearfix{display: block;}
/* End hide from IE-mac */


/* Shopping Cart Pagination */
.pagination	{background: #f0f0f0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 2px 0; font-size: 84%; text-align: center;}
.pagination .next, .pagination .previous	{display:inline; }
.pagination .next a, .pagination .previous a {padding: 2px 6px;}
.pagination .next a:hover, .pagination .next a:focus, .pagination .previous a:hover, .pagination .previous a:hover {color:#e00; }
.pagination .previous a {margin-right: 0;}
.pagination .next a {margin-left: 5px;}

/*
		Navigation Styles
	~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ 
*/

/* BEGIN #topMenu customisation */

#topMenu {
	margin: 	0 auto;
	text-align: center;
	font-size: 0.9em;
	background: url('../img/bg/nav-bg.gif') 0 0 repeat-x;
	border-top: 1px solid #444;
	border-bottom: 8px solid #900;
	position: relative;
}

#nav, #nav ul{float:left; list-style:none; margin:0; padding:0; }

#nav ul	{padding: 0;}
#nav li	{float: left; text-align: left;}
#nav a	{display:block;	text-decoration:none;}

#nav li 	{margin: 0; padding: 0 !important;} /* inherits a padding from somewhere? */
#nav li a {margin: 0; padding: 10px 12px 8px 12px; text-decoration: none;}
#nav li a:hover, #nav li a:focus, #nav li a:active {background: #900; text-decoration: none !important;}

/* Current Menu Item (Can we do this??? and show the user what item/page they are currently on) */
.current-menu {font-weight: bold; background: #700;}
.current-menu ul li {font-weight: normal;}

#nav li ul{
	position:absolute;
	left:-999em;
	height:auto;
	width:14em;
	margin:0;
}
#nav li li{ width:13em; margin: 0; padding:0;}
#nav li ul a {
	width:13.2em;
	color:#fff;
	font-size:0.9em;
	line-height:1em;
}

/* Make sub menu visible on hover */
#nav li:hover ul	{left:auto; z-index:6000;}

/* Set Link colours */
#nav a:link, #nav a:visited {color:#fff;}
#nav a:active, #nav a:hover {text-decoration:underline; }

/* Sub Menu Links */
#nav .nav2 a:link, #nav .nav2 a:visited {color:#fff; background:#900;}
#nav .nav2 a:active, #nav .nav2 a:hover {text-decoration:underline; color:#fff; background:#000; }
#nav .nav2 {border:0; margin: 0;}

span#john-agar			{position:absolute; right:5px; top:3px; font-size:0.9em; }
#john-agar				{width:80px; height:27px; background: #900; border:1px solid #300; color:#fff; }
#john-agar:hover		{color:#900; background: #fff; border:1px solid #300;}
span#john-agar a		{text-decoration:none; text-align:center; position:relative; top:24%; color:#fff; }
span#john-agar a:hover, #john-agar:hover a	{text-decoration:underline; color:#900; }

/* End #topMenu customisation */

/*
		Catalog Styles
	~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ 
*/

.product {float: left; width: 220px; }

.table-center{text-align: center; }

table.cart		{width:600px; font-size:88%; line-height:1.3em; margin:0 0 1em 0;}
table.checkout	{font-size:88%; line-height:1.3em; margin:0 0 1em 0; }

table.catalog 		{width:98%; font-size:88%; line-height:1.5em; margin:0 0 1em 0; }
table.catalog th	{background:#900; padding: 3px; text-align:left; color:#fff; }
table.catalog td	{padding:1px; text-align:center;}

billingDetailsSection {width: 600px;}

.checkoutSection {
	color:#000; 
	font-size:88%; 
	line-height:1.3em; 
	margin:0 0 1em 0; 
}

.checkoutSection .label			{font-size:100%; color:#000; }
.checkoutSection .output		{font-size:100%; }
.checkoutSection .statusOutput	{font-size:100%; color:#009933;}

#productsSection				{padding:20px 5px; }

.myFaces_panelTabbedPane_inactiveHeaderCell input{
	background-color: #FFFFFF !important;
	font-family: verdana !important;
	font-size: 12px !important;
	font-weight: bold !important;
}
	
.myFaces_panelTabbedPane_activeHeaderCell input{
	background-color: #FFFFFF !important;
	font-family: verdana !important;
	font-size: 12px !important;
	font-weight: bold !important;
}

/* Side Cart Box */
div.cart				{width:210px; margin:auto; background:transparent url('../img/bg/bg-sidebox_long.gif') top left no-repeat;}
div.cart .end-sidebox	{background:transparent url('../img/bg/bg-sidebox_bottom.gif') bottom left no-repeat; height:9px;}
div.cart h2				{padding:20px 0 10px 0;}

.cart-total		{font-weight:bold; color:#fefefe; font-size:1.2em; text-align:right; }
.cart-contents	{margin:2px 5px; color:#000; font-style:italic; text-align:center; background: #ffffc0; border-top: 2px solid #e1b82d; border-bottom: 2px solid #e1b82d; padding: 2px 0;}


img.removeButton {
	height: 48px;
	width: 170px;
	background: url(../img/Remove.jpg); 
	border: 0px;

}

img.checkoutButton {
	height: 48px;
	width: 170px;
	background: url(../img/Checkout.jpg); 
	border: 0px;

}

img.viewButton {
	height: 48px;
	width: 170px;
	background: url(../img/ViewMore.jpg); 
	border: 0px;
}

img.catalogButton {

	width: 100px;
	height: 28px;
	border: 0px;
}
	
img.catalogImage {

	border: 0px;
	border-color: white;
	padding: 0px;
}