/* ################################################################### */
/* ################################################################### */
/*
		NOTE: this css contains a lot of hacks for IE 6 & 7
		if you're updating the style see also ie.css
*/
/* ################################################################### */
/* ################################################################### */



/************************* GENERAL CRAP ***************************/
* {	padding: 0px; margin: 0px; }
h1,h2,h3,h4,h5,h6 {color:#000;font-family:"helvetica", Arial, sans-serif;}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {color:#F00;}
a {color:#F00;text-decoration:none;}
a:hover, a:focus {color: #F00; text-decoration:none;}

/* IE  pseudo-class hack, see also ie.css */
.before { display: none; }
.after { display: none; }
.superafter {dislay: none; }

.tiny{ font-size: 10px; }



/************************* BODY, CONTAINER etc ***************************/
body {
	color: #666; 
	background: #1B2233; 
	font-family: "helvetica", Arial, sans-serif;
	padding: 0px;
	margin: 0px;
	background: url(../img/faHeader_tile.gif) repeat;
}
.container {
	background-color: #FFF;
	background: url(../img/content_tile.gif) repeat;
	margin-top: 35px;
}
.container-inner { width:980px; margin:0 auto; padding: 0px 50px; background: url(../img/content_background.gif) repeat-y; }




/************************* MASTHEAD ************************************/
.pusher { cursor:pointer; }
#header { background-color:#FFF; }
#header:after { border-top: 1px dashed #999; border-bottom: 2px solid #CCC; height: 10px; content: ".";display: block;line-height: 1px;font-size: 1px;color: transparent; clear: both; background: #FFF; }


/************************* HEADER ************************************/
#header span {color:#666;font-size:.8em;text-transform:lowercase;font-weight:normal;}
			/* faHeader */
		#header #faHeader{ float: left; display: inline; width: 1080px; height: 35px; margin-top: -35px; 
		margin-left: -50px; background-color: #222f42; background: url(../img/faHeader_background.gif) repeat-y; }
		#header #faHeader span { float: left; display: inline; background: url(../img/TheFA_masthead.jpg) no-repeat; width: 135px; height: 31px; margin-left: 60px; }
	
			/* headerImage */
		#header #headerImage span{ float: left; display: inline; width: 700px; height: 100px; margin: 10px 0px 10px 20px; background: url(../img/ENGLAND_HEADER.jpg) no-repeat; }

			/* headerNavList */
		#headerNavContainer {padding: 0;font-family:Verdana, Arial, sans-serif; font-size: 13px;text-align: right; float:right; width: 200px; overflow: hidden;  }
		ul#headerNavlist {list-style: none; clear: none; }
		ul#headerNavList li {clear: none;};
		ul#headerNavlist li a:hover, ul#headerNavlist li a:focus{ text-decoration: none; }
		ul#headerNavlist li a span.text{ 
			text-transform: uppercase; font-weight: bold; color: #666; float: right; display: inline; margin-top: 75px; margin-right: 15px; text-decoration: none; }
		ul#headerNavlist li a:hover span.text, ul#headerNavlist li a:focus span.text{ color: #F00; }
		#headerNavContainer ul#headerNavlist li a span.text:after{ content: url(../img/linkGraphic_normal.jpg); padding-left: 5px; }
	
	
/* ************************* CONTENT CONTAINER *********************** */
#contentContainer { background: url(../img/navList_tile.gif) repeat-y left; background-color: #FFF; }
#contentContainer:after { border-top: 2px solid #CCC; content: ".";display: block;line-height: 1px;font-size: 1px;color: transparent; clear: both; background-color: #FFF; }
		/* -------------------- NAV LIST -------------------- */
		#navList { float: left; display: inline; width: 240px; margin: 20px 5px 20px 10px; font-family:Verdana, Arial, sans-serif; font-size: 13px; }
			#navList h2 { margin-bottom: 6px; color: #666; font-family:Verdana, Arial, sans-serif; font-size: 13px; }
			#navList ul { list-style: none; margin-left: 20px; margin-right: 5px; margin-bottom: 20px; }
			#navList ul li { line-height: 0.9em; margin-bottom: 0.5em; }
			#navList ul li:before { content: url(../img/linkGraphic_normal.jpg); padding-right: 5px; margin-left: -17px; }
			#navList ul li a { color: #999; font-size: 0.9em; font-weight: lighter; text-transform: uppercase; }
			#navList ul li a:hover, #navList ul li a:focus {color: #F00; text-decoration:none;}
		
		/* -------------------- CONTENT -------------------- */
		#content {
			float: left;
			display: inline;
			width: 650px;
			margin-top: 20px;
			margin-bottom: 20px;
			margin-left: 50px;
			background-color: #FFF;
		}
			#content h2 { color: #CCC; margin-bottom: 15px; }
			#content h3 { color: #666; margin-bottom: 10px; }
			
			
			/* -------------------- Category List -------------------- */	
			#content .categoryList{ overflow: hidden;  }
			#content .categoryList ul{ list-style: none; overflow: hidden; }
			#content .categoryList ul li{ float: left; display: inline; width: 650px; height: 100px; background: url(../img/list_categoryBackground.jpg) no-repeat; margin-bottom: 10px; overflow: hidden; }
				#content .categoryList ul li.featured{ border-bottom: 1px dashed #999; padding-bottom: 20px; margin-bottom: 20px; }
			#content .categoryList ul li a{ color: #666; text-transform: uppercase; font-weight: 600 ; display: inline; overflow: hidden;  }
			#content .categoryList ul li a:hover, #content .categoryList ul li a:focus{ color: #F00; }
			#content .categoryList ul li a span.text{ float: left; display: inline; width: 480px; height: 90px; padding-top: 10px; padding-left: 20px; }
				#content .categoryList ul li a span.before {display: inline; background: url(../img/EnglandBadge_category.jpg) no-repeat; width: 84px; height: 87px; float: left; margin-top: 5px; margin-left: 10px; }
				#content .categoryList ul li a span.after { display: inline; background: url(../img/linkGraphic_category.jpg) no-repeat bottom; float: left; width: 30px; height: 90px; }
				
			#content .productList{}
		
			
			/* -------------------- PRODUCTS -------------------- */
			.product-description{ float: left; display: inline; width: 500px; font-size: 12px; clear: left; }
			.product-title{ font-size: 18px; display: inline; float: left; color: #666; }
				.product-no-description .product-title {}
			
			.product-thumbnail, .blank-thumbnail { float: right; display: inline; background-color: #FFF; margin: 0px 10px; font-size: 8px; }
				.blank-thumbnail { background-color: transparent; display: none; }
				.product-no-description .blank-thumbnail { display: none; }
				.product-no-description .product-thumbnail{ float: right; display: inline; }
			
			.product-price { float: right; display: inline; clear: right; margin: 5px 10px; text-align: center; width: 50px; }
				.product-no-description .product-price { float: right; display: inline; margin: 0px 10px; }
			
			.product-date { float: left; display: inline; font-size: 14px; padding-top: 2px; }
				.product-date:before{ content:"-"; padding: 0px 10px; }
			
			.product-buynow { float: right; display: inline; clear: right;  }
				.product-buynow span:hover input, .product-buynow span:focus input{ background: url(../img/button_buynow_over.gif) no-repeat top; }
				.product-buynow span input {background: url(../img/button_buynow_normal.gif) no-repeat top; }



/* ************************* FOOTER *********************** */
#footer {
	border-bottom: 1px dashed #CCC; 
	height: 20px;
	background-color: #FFF; 
}


/* **************************** FLOATS & IMAGES ***************************** */
.right { float: right; } .left { float: left; } .middle {margin: 0 auto;float:left;} .clear { clear: both; }
img.centered{display: block;margin-left: auto;margin-right: auto;}
img.alignright{padding: 4px;margin: 3px 0 2px 10px;display: inline;}
img.alignleft{padding: 4px;margin: 3px 10px 2px 0;display: inline;}
.alignleft{float: left;} .alignright{float: right;} .aligncenter,div.aligncenter {display: block;margin-left: auto;margin-right: auto;}

/***************************** ETC *****************************/
/* remember to define focus styles! */
:focus {outline: 0;}

/* =========================================== */
/* ROUNDED CORNER CRAP */

.box {
	float: left;
	display: inline;
	margin-bottom: 10px;
	margin-right: 10px;
	color: #666
}
.box-container { padding: 13px; border: 2px solid #CCC; width: 600px; }
.box-container:after, .product-no-description:after { content: ".";display: block;line-height: 1px;font-size: 1px;color: transparent; clear: both; }

.box-highlight {  background: url(../img/list_product_tile-highlight.jpg) repeat-x; }
.box1 { background: url(../img/list_product_tile1.jpg) repeat-x; }
.box2 { background: url(../img/list_product_tile2.jpg) repeat-x; }

.box-highlight .tr { background: url(../img/corners2/tr.gif) no-repeat top right; float: right; display: inline; height: 15px; width: 15px; }
.box-highlight .br { background: url(../img/corners2/br.gif) no-repeat bottom right; float: right; display: inline; height: 15px; width: 15px; margin-top: -15px; }
.box-highlight .bl { background: url(../img/corners2/bl.gif) no-repeat bottom left; float: left; display: inline; height: 15px; width: 15px; margin-top: -15px; }
.box-highlight .tl { background: url(../img/corners2/tl.gif) no-repeat top left; float: left; display: inline; height: 15px; width: 15px; }

.box1 .tr { background: url(../img/corners1/tr.gif) no-repeat top right; float: right; display: inline; height: 15px; width: 15px; }
.box1 .br { background: url(../img/corners1/br.gif) no-repeat bottom right; float: right; display: inline; height: 15px; width: 15px; margin-top: -15px; }
.box1 .bl { background: url(../img/corners1/bl.gif) no-repeat bottom left; float: left; display: inline; height: 15px; width: 15px; margin-top: -15px; }
.box1 .tl { background: url(../img/corners1/tl.gif) no-repeat top left; float: left; display: inline; height: 15px; width: 15px; }

.box2 .tr { background: url(../img/corners2/tr.gif) no-repeat top right; float: right; display: inline; height: 15px; width: 15px; }
.box2 .br { background: url(../img/corners2/br.gif) no-repeat bottom right; float: right; display: inline; height: 15px; width: 15px; margin-top: -15px; }
.box2 .bl { background: url(../img/corners2/bl.gif) no-repeat bottom left; float: left; display: inline; height: 15px; width: 15px; margin-top: -15px; }
.box2 .tl { background: url(../img/corners2/tl.gif) no-repeat top left; float: left; display: inline; height: 15px; width: 15px; }



/* ******* ERROR TESTING!!!!!!!! *************************** */
/*

div { border: 1px solid red; }
div div div{ border: 1px solid green; }
span { border: 1px solid cyan; }

* {
	border: 1px solid red;
}
*/