/*
Author: 	Bill Westhead
Date:		31/01/2006
Modified:	02/02/2006

Usage: 
	****Struct(ure) ids define layout
	****Panel ids block page content
	****Space ids areas designate for whitespace or transparency
*/

/*	Import definitions used for left navigation panel */
@import url(/css/leftNavigation_2009.css);
@import url(/css/topNavigation.css);
@import url(/css/productList_2009.css);
@import url(/css/productDetail_2009.css);
@import url(/css/b4gShop_2009.css);
@import url(/css/b4gCart_2009.css);

/*
Amendments before live :-
	url() references need to be absolute urls (for consistency): replace ../ with /
		NB: imported css also.

*/
/* Global attrbitutes */
	* {
		font-family: arial,helvetica,sans serif;
		margin: 0px;
		padding: 0px;
		
		color: #444444;
/*		background-color: #fffcfc; */
		background: none;
	}
select, select option {
		background-color: #fffcfc !important;
}
/*
	Begin ELEMENT level defintions
*/
	select option { background-color: #ffffff; }


	a {
		text-decoration: none;
	}
	
	html,body {
		text-align: center;
		background-color: #fffcfc;
		background: #fffcfc;
}
	
	div {
		position: relative; 
		vertical-align: top;
		text-align: left;
	}
	
	em {
		color: #ff9f00;
		font-style: normal;
	}
	
	img {
		border: none;
		border-style: none;
		border-width: 0px;
		margin: 0px;
		vertical-align: middle;
		
		margin-right: 7px;
		margin-top: 2px;
	}

	td img {
		margin: 0px !important;
		padding: 0px !important;
	}

	table.shop_nav_bar {
		width: 75%;
		margin-left: auto;
		margin-right: auto;
	}

	table.shop_nav_bar tr td {
		padding: 0px !important;
	}

	ul {
		list-style-type: disc;
 /*		list-style-image: url(/images/tick.png);  Set bullet image, a 14 x 14 px teardrop */
 /*		margin-left: 0px;  This line removes the default list indenting and keeps lists in line with other paragraphs */
		padding-left: 1em;  /* These next 2 lines ensure that the indent hangs for wrapping text */
		text-indent: -1em; 
	}
	
	ol {
		margin: 15px;
		list-style-type: decimal;
	}

	ol li {
		font-size: 11px;
		margin-left: 1em;
	}
	
	ul li {  /* For list elements use 12 px Arial, used for navigation and selling points */
		text-indent: 0px;  /* This fixes the indent for wrapped lines of text */
	}
	
	li {
		font-size: 12px;
	}

	h4 {
		margin-top: 10px;
		margin-bottom: 20px;

		color: #ff9f00;
		font-size: 18px;
		font-weight: bold;
		font-style: italic;
	}
/* 
	End ELEMENT level definitions
*/
/*
	Begin CLASS level definitions
*/
	div.panels {
		display: inline;
	}
	
	div.inlineStruct {
		display: inline;
	}
	
	p.textHeadline {
		font-family: arial,helvetica,sans serif;
		font-size: 20px;
		font-weight: bold;
		color: #333;
		text-align: left;
		margin-top: 2px;
	}
	
	p.textSubHeading, label.textSubHeading {
		font-size: 14px;
		font-weight: bold;
		text-align: left;
		margin-top: 4px;
		margin-bottom: 4px;
		
		min-width: 300px;
	}

	p.textSubHeading big {
		font-size: 18px;
		font-weight: bold;
	}
	
	p.textBody {
		font-size: 12px;
		text-align: justify;
		
		margin-bottom: 10px;
		margin-left: 7px;
		margin-right: 7px;
		color: #444444 !important;
	}
	
	p.textBody a {
		color: #444;
		background-color: #fffcfc;
		font-weight: normal;
	}
	
	a.bookmark {
		color: blue;
		text-decoration: underline;
		font-size: 12px;
		font-weight: bold;
	}

	img.productImg {
		border: 1px solid #ccc;
		cursor: pointer;
	}

	img.paraRight {
		float: right;
		border: 1px solid #ccc;
		margin: 2px;
		padding: 0px;
	}

	div.helpHeader {
		width: 100%;
		height: 18px;
		font-size: 11px;
		text-align: right;
		cursor: pointer;
		color: #fff;
		background-color: #ff9f00;
	}
/*
	End CLASS level definitions
*/

/* 	All remaining are ID level definitions */
/*
	Begin header structure, banner and top navigation bar, used by all pages
*/
	div#pageStruct {
		width: 990px;
		height: auto;
		min-height: 500px;
		margin-top: 0px;
		
		background-color: #fff;
		text-align: center;
		margin-right: auto;
		margin-left: auto;
border-right: 1px solid #cccccc;
border-left: 1px solid #cccccc;
	}
	
	div#headerStruct {
		border-width: 0px;
		border-style: solid;
		border-color: #ff9f00;
		
		width: inherit;
		height: 130px;
		text-align: center;
		
		background-color: #fff;
	}
	
	div#navBarRedStruct {
		width: inherit;
		height: 25px;
		
		border-width: 0px;
		background-image: url(/images/navline.gif);
		/*
		border-bottom-width: 1px;
		border-bottom-color: #000;
		border-bottom-style: solid;
		*/
	}
	/*
		Three div structure for tagline
		NB: text needs to be manually split over two lines
	*/	
		div.navFloatRight {
			float: right;
			height: 56px;
			width: auto;
			padding: 14px;
			padding-bottom: 0px !important;
			margin: 0px;
			margin-top: 37px;
			margin-bottom: 7px;
			text-align: right;
			vertical-align: middle;
			background: url(/images/navbar_bg.png);
			background-repeat: repeat-x;
		}

		div.navFloatRight a {
			color: #ffffff !important;
			font-size: 22px;
			font-weight: bold;
		}
				
		div.navFloatRight#rhs {
			margin-right: 20px;
			width: 20px;
			padding: 0px !important;
			background: url(/images/navbar_rhs.png) !important;
			background-repeat: no-repeat !important;
		}
		div.navFloatRight#lhs {
			margin-left: 20px;
			width: 18px;
			padding: 0px !important;
			background: url(/images/navbar_lhs.png) !important;
			background-repeat: no-repeat !important;
		}
/*
	End header structure
*/

div#mainContentStruct {
	width: 980;
	height: 449px;
	min-height: 550px;

}
/*
div#leftPanel {
	position: relative;
	width: 185px;
	height: 375px;

	top: 0px;
	left: 0px;
	
	text-align: center;
	
	border: 1px solid green;
}
*/
div#globalFooter {
	clear: both;
	display: block;
	width: 500px;
	float: none;  /*	this seems to fix the Firefox float problem */
	height: 50px;
	margin-left: auto !important;
	margin-right: auto !important;
	
	text-align: center;
}

div#globalFooter a {
	font-size: 11px;
	font-weight: bold;
	color: #ff9f00;
	background-color: #fff;
}
/*
	Begin rightPanel structure - this is broken down on the homepage, but the whole Struct is used for product lists and information pages
	NB: Product detail pages make no use of these structures.
*/
	div#rightPanelStruct {
		float: right !important;
		margin-left: -15px;
		margin-right: 0px;
		height: 375px;
		width: 805px;
		min-height: 375px;
		scroll-y: auto;
	}
	
	div#rightPanel {
		float: left;
		width: 280px;
	}

	div#rightPanelFull {
		float: left;
		width: 548px;
	}

	div#rightPanel ul li {
		margin-top: 2px;
		margin-bottom: 14px;
	}
	
	div#rightSpace {
		float: right;
		width: 268px;
		height: 270px;
	}
	
	div#rightUpperPanel {
		float: right;
		width: 268px;
		height: 200px;
	}

	div#rightLowerPanel {
		float: right;
		width: 268px;
		height: 200px;
	}

	div#rightLowerPanel ul li {
		margin-top: 2px;
		margin-bottom: 14px;
	}
/*
	End rightPanel structure
*/

/* Admin CSS */

tr.tdLtGrey td {
	color: #300;
	background-color: #fff6f6;
	border-top: 1px solid #ff9f00;
}

tr.tdDkGrey td {
	color: #300;
	background-color: #ffe6e6;
	border-top: 1px solid #ff9f00;
}

tr.tdInactiveGrey td {
	color: #300;
	background-color: #ccc;
	border-top: 1px solid #ff9f00;
}

input.admField, select.admField, option.amdField {
	width: 150px;
	font-size: 11px;
}

textarea.admField {
	width: 300px;
	font-size: 11px;
}

.clearfix {
	display: block;
	clear: both;
}
.clearfix {
	width: 980px;
	display: inline-block;
}

.textTopline {
	font-size: 200%;
	margin-left: 7px;
	margin-right: 7px;
	font-style: italic;
}

.textToplineLight {
	color: #444444;
}

.textToplineDark {
	color: #444444;
	font-weight: bold;
}

.textBodyGrey {
	color: #444444;
}

tr.confirmHeadBar td {
	background-color: #f9c452;
	color: #ffffff;
	font-weight: bold;
}

tr.confirmRow td {
	font-size: 14px;
	border-bottom: 1px solid #ff9f00;
}

td.confirmCost {
	text-align: center;
}

tr.confirmRowTotal td {
	font-weight: bold;
	border-bottom: 0px solid white !important;
}

td.confirmRemove {
	text-align: center;
}