@charset "utf-8";
/* CSS Document */

.box_1 {
	/*position:absolute;
	left:33px;
	top:35px;*/
	width:163px;
	height:200px;
	/*z-index:1;*/
	border: 1px solid #0099CC;
	text-align:center;
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
	overflow:hidden;
}

.box_1 img {
	border-bottom: 1px solid #0099CC;
	height:163px;
	width:163px;
	/*position:relative;
	top:0px;
	left:0px;*/
}

.box_1 a {
	color: #0099CC;
	text-align:center;
	text-decoration:none;
	line-height:12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
}
.box_1 a:hover {
	text-decoration:underline;
}
/* For 1 wide box with skyscraper to right - to be displayed INSIDE ID "category_Container_1" */
.box_2 {
	/*position:absolute;
	left:33px;
	top:35px;*/
	width:503px;
	height:102px;
	/*z-index:1;*/
	border: 1px solid #0099CC;
	text-align:left;
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
	overflow:hidden;
	display:block; /*ADDED TO TEST */
}
.box_2 img {
	/*width:102px;
	height:102px;*/
	float:left;
	margin-right:10px;
}
.box_2_info {
	width:390px;
	height:62px;
	float:right;
	overflow:hidden;
	display:block;
}
.box_2 a {
	color:#0099CC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	line-height: 12px;
	padding-top: 5px;
}
.box_2 a:hover {
	font-size: 11px;
}
.box_prices2 {
	width:390px;
	height:38px;
	float:right;
	overflow:hidden;
	display:block;
}

/* For 1 wide box */
.box_3 {	/*position:absolute;
	left:33px;
	top:35px;*/
	width:673px;
	height:102px;
	/*z-index:1;*/
	border: 1px solid #0099CC;
	text-align:left;
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
	overflow:hidden;
}
.box_3 img {
	/*width:102px;
	height:102px;*/
	float:left;
	margin-right:10px;
}
.box_3 a {
	color:#0099CC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	line-height: 12px;
	padding-top: 5px;
}
.box_3 a:hover {
	font-size: 11px;
}

.box_3_info {
	width:370px;
	height:102px;
	float:right;
	overflow:hidden;
}
.box_prices3 {
	width:150px;
	padding:10px;
	float:right;
	line-height: 150%;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #999999;
	margin-top: 5px;
	overflow:hidden;
}

/* For two mid size boxes wide */
.box_4 {	/*position:absolute;
	left:33px;
	top:35px;*/
	width:333px;
	height:120px;
	/*z-index:1;*/
	border: 1px solid #0099CC;
	text-align:left;
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
	overflow:hidden;
}
.box_4 img {
	/*width:120px;
	height:120px;*/
	float:left;
	margin-right:5px;
}
.box_4 a {
	color:#0099CC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	line-height: 11px;
}
.box_4 a:hover {
	font-size: 10px;
}
.box_4_info {
	width:205px;
	height:68px;
	float:right;
	overflow:hidden;
}
.box_prices4 {
	width:205px;
	height:50px;
	float:right;
	overflow:hidden;
}

/* For tiles cat layouts */
.box_9 {	/*position:absolute;
	left:33px;
	top:35px;*/
	width:333px;
	height:120px;
	/*z-index:1;*/
	border: 1px solid #0099CC;
	text-align:left;
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
	overflow:hidden;
}
.box_9 img {
	/*width:120px;
	height:120px;*/
	float:left;
	margin-right:10px;
}
.box_9 a {
	color:#0099CC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	line-height: 11px;
}
.box_9 a:hover {
	font-size: 10px;
}
.box_9_info {
	width:200px;
	height:50px;
	float:right;
	overflow:hidden;
}
.box_prices9 {
	width:200px;
	height:70px;
	float:right;
	overflow:hidden;
}
.perMetre {
	font-size: 12px;
	font-weight:bold;
	line-height: 18px;
	margin-bottom: 7px;
	color:#0099cc;
}	
.grey_text_tiles {
	color:#999999;
	margin-right:5px;
	display: block; 
	position: relative; 
	top: -23px; 
	left: 126px; 
	line-height: 11px;
}

/* END tiles */

.grey_text {
	color:#999999;
	margin-right:5px;
}
.our_price {
	color:#0099CC;
	font-size:12px;
	font-weight:bold;
}
.price {
	font-size:14px;
	font-weight:bold;
	color:#FF9900;
	margin-right:10px;
}
.sale_price {
	color:#CC0000;
	font-size:11px;
	font-weight:bold;
}


.jan_sale_price {
	color:#CC0000;
	font-size:10px;
	font-weight:bold;
}

.saleprice {
	color:#CC0000;
	font-size:12px;
	font-weight:bold;
}

.box_additionals {
	/*position:absolute;
	left:33px;
	top:35px;*/
	width:104px;
	height:185px;
	/*z-index:1;*/
	border: 1px solid #000000;
	text-align:center;
	float: left;
	margin-left: 5px;
	margin-bottom: 5px;
	background: #FFFFFF;
	overflow:hidden;
}

.box_additionals img {
	/*border-bottom: 1px solid #000000;
	width:104px;
	height:104px;
	position:relative;
	top:0px;
	left:0px;*/
}
.box_additionals_pic {
	width:104px;
	height:104px;
	position:relative;
	top:0px;
	left:0px;
}
.box_additionals_info {
	top:105px;
	height:60px;
	width:104px;
	border-top-width: 1px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #000000;
	right: 0px;
}

.box_additionals a {
	color: #000000;
	text-align:center;
	text-decoration:none;
	line-height:12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: normal;
}
.box_additionals a:hover {
	text-decoration:underline;
	font-size:9px;
}


/* For THREE large boxes */
.box_7 {	/*position:absolute;
	left:33px;
	top:35px;*/
	width:219px;
	height:320px;
	/*z-index:1;*/
	border: 1px solid #0099CC;
	text-align:left;
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
	overflow:hidden;
}
.box_7 img {
	border-bottom:solid 1px #0099CC;
	margin-bottom: 5px;
}
.box_7 a {
	color:#0099CC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	line-height: 11px;
}
.box_7 a:hover {
	font-size: 10px;
}
.box_7_info {
	width:210px;
	height:26px;
	float:right;
	overflow:hidden;
}
.box_prices7 {
	width:210px;
	height:50px;
	margin-top:10px;
	float:right;
	overflow:hidden;
}

/* For TWO large boxes - should also have a skyscraper banner */
.box_8 {	/*position:absolute;
	left:33px;
	top:35px;*/
	width:248px;
	height:340px;
	/*z-index:1;*/
	border: 1px solid #0099CC;
	text-align:left;
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
	overflow:hidden;
}
.box_8 img {
	border-bottom:solid 1px #0099CC;
	margin-bottom: 5px;
}
.box_8 a {
	color:#0099CC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	line-height: 11px;
}
.box_8 a:hover {
	font-size: 10px;
}
.box_8_info {
	width:230px;
	height:24px;
	margin-left:8px;
	float:left;
	padding-right:10px;
	overflow:hidden;
}
.box_prices8 {
	width:210px;
	height:50px;
	margin-top:10px;
	margin-left:8px;
	float:left;
	overflow:hidden;
}
/* NEW STYLES */
.box_5 {
	float: left;
	height: 175px;
	width: 333px;
	overflow:hidden; /* to stop box expanding in certain browsers */
	margin-right: 5px;
	margin-bottom: 5px;
	position: relative;
}
.box5_img {margin-top:-20px;  /*BECAUSE height of the title bar (see below) = 20px */
	z-index:1;
	border:0px;
}
.box5_bar {
	background-image: url(transparent-strip.png);
	background-repeat: repeat-x;
	height: 20px;
	width: 333px;
	top: 155px; /* enclosing box is 175px - this makes our 20px bar align perfectly with bottom of it in at least 5 browsers */
	position: relative;
	z-index:2;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:white;
	line-height: 20px; /* to make the text display in the vertical center of the bar */
	background-position: top;
	font-size: 14px;
}
.box5_bar a {
	padding-left:10px;
	color:#FFFFFF;
	text-decoration:none;
	z-index:2;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	}
.button_link_5 {
	border:none;
	z-index:4;
	bottom: 0;
	right: 0;
	position: absolute;
	overflow: hidden;
}
.box6 {
	float: left;
	height: 175px;
	width: 671px;
	overflow:hidden; /* to stop box expanding in certain browsers */
	margin-right: 5px;
	margin-bottom: 5px;
	position: relative;
}
.box6_img {
	z-index:1;
	border:0;
}
.box6_bar {
	background-image: url('transparent-strip.png');
	background-repeat: repeat-x;
	height: 20px;
	width: 671px;
	/*top: 155px;*/ /* enclosing box is 175px - this makes our 20px bar align perfectly with bottom of it in at least 5 browsers */
	bottom: 0;
	position: absolute;
	z-index:2;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:white;
	line-height: 20px; /* to make the text display in the vertical center of the bar */
	background-position: top;
	font-size: 14px;
}
.box6_bar a {
	padding-left:10px;
	color:#FFFFFF;
	text-decoration:none;
	z-index:2;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	}
.button_link_6 {
	border:none;
	z-index:4;
	bottom: 0;
	right: 0;
	position: absolute;
	overflow: hidden;
}

.promo_image {
	position: absolute;
	bottom: 25px;
}

.promo_image img {
	border: 0;
}

.promo_image.right {
	right: 5px;
}

.promo_image.left {
	left: 5px;
}

