@import "reset.css";
@import "shop.css";
@import "navigation.css";
@import "forms.css";
body {
background:#c8c8c8 url(../images/bg.png) top left repeat-x;
color:#6e6e6e;
font-family:Tahoma,Arial,Helvetica,sans-serif;
font-size:100%;
}

#wrapper {
background:#fff;
margin:0 auto;
width:980px;
font-size:0.75em;
}

.header .logo {
	float:left;
	margin:11px 0 0 25px;
}

.content {
	

width:960px;
padding:25px 10px 10px 10px;
}

p.content,
h3.content {
margin:0 0 15px;
padding:0;
}

p {
margin:0 0 10px;
}

h1 {
color:#d9403e;
font-size:1.50em;
font-weight:normal;
margin:5px 0 10px;
}

#recycle h1, #recycle h2 {
	color:#3b6a0c;
}

#sackbags h1, #sackbags h2 {
	color:#0d5355;
}

h2 {
color:#d9403e;

margin:0 0 10px;
}

h3 {
color:#f37404;
font-size:1.25em;
margin:0 0 10px;
}

a {
color:#aaa;
text-decoration:none;
}

a:hover {
color:#7f9ea8;
text-decoration:underline;
}

.hmpg_intro {
	height:77px;
	width:692px;
	background:url(../images/hmpg_intro.jpg) top left no-repeat;
	padding:20px;
}

.hmpg_intro h1 {
	color:#fff;
}

.hmpg_intro p {
	width:460px;
	color:#fff;
}


.bar {
	width:719px;
	height:26px;
	margin:20px 0 10px 6px;
	font-weight:bold;
	line-height:26px;
	padding:0 8px;
	color:#fff;
}

.bar a {
	color:#fff;
	display:block;
}
	

.bar#bar1 {
	background:url(../images/bar1.gif) top left no-repeat;
}

.bar#bar2 {
	background:url(../images/bar2.gif) top left no-repeat;
}

.bar#bar3 {
	background:url(../images/bar3.gif) top left no-repeat;
}

/*-----------------------------------------------header----------------------------------------*/
.header {
background:url(../images/header.jpg) top left no-repeat;
display:block;
float:left;
height:119px;
position:relative;
width:980px;

}

#recycle .header {
	background:url(../images/header-green.jpg) top left no-repeat;
}

#sackbags .header {
	background:url(../images/header-blue.jpg) top left no-repeat;
}

/*-----------------------------------------------login----------------------------------------*/
.header .user {
	margin:66px 0px 0 0;
	float:right;
}


.header #login,
.header #loggedin {
float:left;

margin:0 22px 0 0 ;
padding:5px;

height:45px;
}

.header #login label,
.header #loggedin label {
color:#fff;
font-size:14px;
font-weight:600;
padding-bottom:5px;
}

.header #login a,
.header #loggedin a {
color:#000;
font-size:0.83em;
}


.header #loggedin ul li a {
margin:0;
}

.header #loggedin ul li {
float:left;
margin:8px 15px 0 0;
}

.header #loggedin span.name,
.leftarea #loggedin span.name {
font-weight:bold;
color:#fff;
}

/*----------------------------------------------basket------------------------------------*/

.basket {
color:#fff;
position:relative;
float:left;
margin:7px 20px 0 0;
}

.basket p {
	float:left;
	margin:0 10px 0 0;
	font-weight:bold;
	font-size:14px;
}

.basket a.checkout {

	float:left;
	background:url(../images/submit.png) top left no-repeat !important;
	width:19px;
	height:19px;
	text-indent:-6000px;
	margin:-1px 0 0 5px;
	
}

.basket a {
	color:#fff;
	display:block;
	float:left;
	font-weight:normal;
	text-decoration:none;
	background:#d9403e;
	height:19px;
	line-height:19px;
	padding:0 5px;
	margin:-1px 0 0 0;
	font-size:0.92em;
}

#recycle .basket a {
	background:#3b6a0c;
}

#sackbags .basket a {
	background:#0d5355;
}

.basket strong {
margin:3px 10px 0 0;
}

.basket span {
display:block;
margin:3px 0 0;
width:196px;
}

/*----------------------------------------------footer-------------------------------------------*/
#footer {
background:#e0e0e0;
font-size:0.92em;
margin:25px 10px 10px 10px;
padding:15px;
text-align:right;
}

#footer a {

	color:#5c5c5c;
	border-left:1px solid #888;
	padding:0 5px 0 6px;
}

#footer a:first-child {
	border-left:none;
}

#footer a:hover {
text-decoration:underline;
}

/*----------------------------------------------paging------------------------------------------*/
ul.paging {
border-top:1px solid #e2e2e2;
display:inline;
margin-right:11px;
width:790px;
}

ul.paging li {
float:left;
}

ul.paging li a {
background:#e2e2e2;
color:#f68b0c;
display:block;
margin-left:1px;
margin-top:10px;
padding:3px 5px;
text-decoration:none;
}

ul.paging li a:hover {
background:#fff;
}

ul.paging li a.active {
background:#f68b0c;
color:#fff;
}



/*----------------------------------------------Breadcrumb------------------------------------------*/
.breadcrumb {
border-bottom:1px solid #d9403e;
color:#6e6865;
float:left;
font-size:100%;
margin:0 0 10px;
padding:0 0 10px;
width:100%;
}

#recycle .breadcrumb {
	border-bottom:1px solid #3b6a0c;
}

#sackbags .breadcrumb {
	border-bottom:1px solid #0d5355;
}

.breadcrumb a {
color:#6e6865;
text-decoration:none;
}

.breadcrumb a:hover {
color:#6e6865;
text-decoration:underline;
}

.basketnav {
float:left;
margin-bottom:10px;
width:100%;
}

.basketnav a:first-child {
border-left:1px solid #4586a2;
}

.basketnav a {
background:url(../images/breadcrumb.gif) no-repeat top right;
color:#bbb;
display:block;
float:left;
font-weight:bold;
height:31px;
line-height:31px;
margin:0 -16px 5px 0;
padding:0 67px;
text-decoration:none;
}

/*-----------------------------------------------review-------------------------------------------
 no images to edit,
 just change ".stars .color" background color to change star colour*/
.stars {
height:17px;
position:relative;
width:100px;
}

.stars img {
position:absolute;
z-index:2;
}

.stars .color {
background:#f3a92e;
height:17px;
position:absolute;
z-index:1;
}

.rating {
font-weight:bold;
margin:0 4px 0 0;
}

.review {
border-bottom:1px solid #d2d1d1;
padding:10px;
}

.leftarea {
width:208px;
}

/*----------------------------------------------right hand column------------------------------------------*/
.content .right_col {
display:block;
float:right;
margin:0 2px 0 15px;
text-align:center;
width:186px;
}

.content .right_col .feature {
background-color:#f0f9ff;
margin:0 0 5px;
padding:10px;
width:166px;
}

/*----------------------------------------------styles in templates------------------------------------------*/
.deliverytop {
background:#bbe0f4;
color:#526066;
padding:2px;
}

.deliverymiddle {
background:#e1eef4;
border-left:1px solid #fff;
border-top:1px solid #fff;
color:#526066;
padding:2px;
}

.newsthumb {
background: #FFFFFF;
border:1px solid #CCCCCC;
float:left;
height:100px;
padding:2px;
width:100px;
margin:0 10px 10px 0;
}

.small {
color:#98918d;
float:left;
font-size:90%;
margin-bottom:8px;
}

.small1 {
color:#98918d;
float:left;
font-size:90%;
}

.buttonwrap {
color:#507990;
float:right;
width:500px;
}

a.button {
background:#a19e9b;
color:#fff;
float:right;
margin-left:3px;
margin-top:0;
padding:3px;
text-align:center;
text-decoration:none;
}

a.button:hover {
background:#ccc;
}


.rightside {

}

.rightlist {
background:#ccc;
color:#fff;
text-align:left;
width:210px;
float:left;
}

.rightlist h3 {
color:#888;
margin:10px;

}

.rightlist ol.links {
color:#0d81b3;
font-size:90%;

}

.rightlist ol.links li {
	
}

.rightlist ol.links li a {
	color:#888;
	line-height:17px;
	padding:5px 10px;
	display:block;
}

.rightlist ol.links li.even {
	background:#eee;
}




.rightlist .downloads a {
background-image:url(/images/pdf.gif);
background-repeat:no-repeat;
color:#0d81b3;
line-height:17px;
margin-bottom:4px;
padding-bottom:4px;
padding-left:20px;
text-decoration:none;
}

.newsdiv {
-moz-border-radius:6px 6px 6px 6px;
-moz-box-shadow:1px 1px 0 #CCCCCC, -1px 1px 0 #CCCCCC, -1px -1px 0 #CCCCCC, 1px -1px 0 #CCCCCC;
-webkit-border-radius:6px 6px 6px 6px;
-webit-box-shadow:1px 1px 0 #CCCCCC, -1px 1px 0 #CCCCCC, -1px -1px 0 #CCCCCC, 1px -1px 0 #CCCCCC;
background:none repeat scroll 0 0 #EFEFEF;
border:1px solid #FFFFFF;
*border:1px solid #ccc;
clear:both;
margin:20px 0 20px 1px;
padding:10px;
width:710px;
}

.pages {
color:#666;
float:left;
padding-top:5px;
width:100px;
}

.cpages-img {
margin-bottom:10px;
}

.linkstop {
background:#bbe0f4;
color:#526066;
padding:5px;
}

.linksmiddle {
background:#f5f5f5;
border-left:1px solid #fff;
border-top:1px solid #fff;
color:#526066;
padding:5px;
}

.linksmiddle a {
color:#005174;
}

.linksmiddle a:hover {
color:#888;
}

.btn1 {
background-color:#dfdfdf;
color:#666;
width:80px;
}



.linkswrap {
clear:both;
float:left;
margin-bottom:20px;
width:80%;
}

.comments {
background:#fef2dd;
padding:10px;
}

.comments a {
color:#fa6400;
float:left;
}

.comments a:hover {
color:#fb6602;
}

.comments .commentbutton {
background:#fb8a02;
border:1px solid #fb8a02;
color:#fff;
float:right;
font-size:100%;
padding-bottom:2px;
padding-top:2px;
width:100px;
}

.comments .commentbutton a:hover {
background:#fb6602;
}

.comments .line {
border-bottom:1px dotted #f42b6e;
height:1px;
width:100%;
}

.comments label {
float:left;
width:100px;
}

.comments input {
color:#666;
float:left;
font-size:100%;
margin-bottom:2px;
width:230px;
}

.comments textarea {
color:#666;
width:230px;
}

.errortop {
color:red;
float:right;
font-size:100%;
margin-bottom:3px;
margin-top:0;
text-align:left;
width:292px;
}

.date {
font-size:90%;
font-weight:bold;
}

/*------------------------sitemap---------------------*/
ul.sitemap a {
text-decoration:none;
}

ul.sitemap li ul li {
font-weight:normal;
padding:5px 5px 5px 20px;
}

ul.sitemap li {
font-weight:bold;
padding:2px;
text-indent:3px;
}

ul.sitemap li ul {
margin:10px 0 0;
}

.leftarea #login a:hover,
.leftarea #loggedin a:hover,
.breadcrumb .on {
color:#d9403e;
}

#recycle .leftarea #login a:hover,
#recycle .leftarea #loggedin a:hover,
#recycle .breadcrumb .on {
color:#3b6a0c;
}

#sackbags .leftarea #login a:hover,
#sackbags .leftarea #loggedin a:hover,
#sackbags .breadcrumb .on {
color:#0d5355;
}

.basketnav a:hover,
.basketnav a:hover,
.basketnav a.active {
background:url(../images/breadcrumb2.gif) no-repeat top right;
color:#888;
}

.deliverytable,
.linkstable {
border-bottom:1px solid #fff;
border-right:1px solid #e1eef4;
}

.rightlist ul.downloads,
.rightlist ul.links {
color:#0d81b3;
font-size:90%;
list-style:none;
margin:0 0 20px;
padding:0;
}


/*-----------------------------Slideshow--------------------------------*/

#shopcontent #s3slider {
   width: 774px; /* important to be same as image width */
   height: 190px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

#shopcontent #s3sliderContent {
   width: 774px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

#shopcontent #s3sliderContent img {
	width:774px;
}

.with_right_col #s3sliderContent img {
	width:538px !important;
}

.with_right_col #s3slider {
   width: 538px !important; /* important to be same as image width */
   height: 190px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

.with_right_col #s3sliderContent {
   width: 538px !important; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.s3sliderImage div {
   position: absolute; /* important */
   font: 12px Arial, Helvetica, sans-serif;
   background:url(../images/half.png);
   color: #fff;
   display: none; /* important */
   width:120px;
   height:190px;
   right: 0;
   top: 0;
   /*left:0;
   bottom:0;*/

   /*
       use top/bottom/right/left to position the text div and width and height for it's shape
   */
}

.s3sliderImage div span {
	display:block;
	padding: 10px 13px;
}


/*---------------------------homepage features-----------------------------------*/

.features {
	margin:10px 0 15px -11px;
	_margin:10px 0 15px -4px;
}
.feature {
	float:left;
	width:228px;
	padding:6px;
	_padding:0;
	margin:0 0 0 5px;
	_margin:0 0 0 4px;
	display:inline;
	
}
.with_right_col .feature {
	padding:6px !important;
}


.homepage_text p {
	margin:0 0 0 6px;
}


















#shopcontent div.desc table {

	margin:10px auto;
	border-collapse:collapse;
}

#shopcontent div.desc table thead tr th {
	text-align:left;
	padding:8px;
	background:#e7f6f6;
	border:1px solid #ccc;
}

#shopcontent div.desc table tbody tr td {
	padding:4px 8px;
	border:1px solid #ccc;
}

#shopcontent div.desc table tbody tr {
	background:#fff;
}

#shopcontent div.desc table tbody tr.alternate {
	background:#f6f6f6;
}

#shopcontent div.desc table tbody tr.over {
	background:#fff0bd;
}