<style type="text/css" media="screen">
* {margin: 0; padding: 0; border: 0;}

body {background-color:#ffffff; margin-left:0px; margin-right:0px; margin-top:20px; margin-bottom:20px; color:#000000; font-family:Arial, Verdana, Helvetica, serif; font-size: 9pt; color: #000000; font-weight:normal;}
/*Sets the background colour of the screen and also the margins which the actual web page is set in from the four outer edges of the screen. Also sets default colour, size, weight and type of fonts used throughout the web site*/

#bgcontain {text-align: left; width: 900px; margin: 0 auto; background-color:#ffffff;}
/*BgContain is the outer edge of the web page and contains all of the web page - where WIDTH being the overall width of the web page. background-image is the background image on all of the displayed web site*/
/* bgcontain holds left faux column tab */
/* nn6/7 will put content out of scrollable reach if auto is used unless the min-width is on body */

#header, #subnav, #footer {color: #000; clear: both; width: 100%;}

#footer {background: #87cefa; padding: 1px 0;}
/*Footer is area under the three main columns*/

#content-shell {/* right faux column tab */
background: url(/acatalog/images/logos/browny2.gif) repeat-y 100% 0; float: left; width: 100%;}
/*This area holds the central main content, as well as Left and Right areas*/

#content-shell:after {
 /* this is for NN6 to clear floats */
    content: "."; display: block; height: 0px; clear: both; visibility: hidden;}

#center {margin: 0 120px 0 120px;}
#centerwrap {float:left; width: 100%;margin: 0 -95% 0 0;}
/*Center and Centerwrap relate to central content area*/

#left {float:left; width: 120px; margin: 0 0 0 -5%;}
#right {float:right; width: 120px; margin: 0;}
/*left relates to Left Side Links and right to Right Links content*/

/************* IE Mac CSS Only  works for Win too **************/
* html div#centerwrap {margin: 0 -100% 0 0;}
* html div#left {margin: 0;}

div h3, div p {margin: 1em 0; padding: 0 20px; } /* not sure if this is needed */

/*Following are needed*/
.yellowboxheading{color:#993333; font-size:14pt; font-weight:bold;}
.titlestrip{font-size:12pt; font-weight:bold; background-color:#f0f0f0;}

/*End of needed*/















.b {font-weight:bold;}
.c {text-align:center;}
.j {text-align:justify;}
.l {text-align:left;}
.gr {color:#336633;}
.inlinec {display:inline; text-align:center;}
.reclink {background:#ffff99;}
.green-back{background-color:#bdfcc9;}

.main {width: 97%; background: #f7f8f8; padding: 5px; margin: 5px; color: #000000; border-color: #999999; border-style: solid; border-width: 1px;}

.category {font-size: 12px; background: #F8F8F9; border-style: solid; border-width: 1px; border-color: #C5C9CF;}
.link{font-size: 12px; background: #FAFCFE; border-style: inset; border-width: 2px; border-color: #EAECED;}
.smalltext{color:#000000;font-size:8pt;}		 			
.photolegend{color:#000000; font-size:8pt; text-align:center;font-weight:normal;}
.detailsborder{padding: 10px; margin: 10px; font-size: 12px; border-style: outset; border-width: 2px; border-color: #003366;}
.details{padding:10px; margin:10px; font-size:12px; background:#FDFEFF; border-style:solid; border-width:1px; border-color:#004455;}
.superlink {background-color:#00ff00;}
.fulllink {background-color:#336633;}
.associatelink {background-color:#ccffcc;}

h1	{color:#336633; display:inline; margin-left:20px; margin-right:20px; font-size:16pt; font-weight:bold;}	
h2  {color:#336633; margin-left:15px; margin-right:20px; font-size:14pt; font-weight:normal; text-align:center;}
h3	{color:#336633; margin-left:10px; margin-right:10px; font-size:12pt; font-weight:normal;}			
	

.nav-directory	{color:#336633; margin-left:10px; margin-right:10px; font-size:12pt; font-weight:bold;}
.nav-directory-small {color:#336633; margin-left:2px; margin-right:2px; font-size:10pt; font-weight:bold;}
.menu {background-image:url(/images/cell_back.gif);background-repeat:repeat-y; background-color:#ccffcc;}	
	



a{text-decoration: none; color:#336633;}
a:hover{text-decoration: underline; color:#336633;}

a.greenlink:link		{color:green;text-decoration:underline; font-size:9pt;}	
a.greenlink:visited		{color:green;text-decoration:none; font-size:9pt;}
a.greenlink:hover		{color:#336633;text-decoration:underline; font-size:9pt;}
a.greenlink:active		{color:#000000; font-size:9pt;}


a.whitelink:link		{color:#ffffff;text-decoration:underline; font-size:9pt;}	
a.whitelink:visited		{color:#ffffff;text-decoration:none; font-size:9pt;}
a.whitelink:hover		{color:#336633;text-decoration:underline; font-size:9pt;}
a.whitelink:active		{color:#000000; font-size:9pt;}

a.mainlink:link			{color:#336633;text-decoration:underline; font-size:12pt;}	
a.mainlink:visited		{color:#336666;text-decoration:underline; font-size:12pt;}
a.mainlink:hover		{color:#bbbbbb;text-decoration:underline; font-size:12pt;}
a.mainlink:active		{color:#000000; font-size:12pt;}

a.blacklink:link		{color:#000000;text-decoration:underline}	
a.blacklink:visited		{color:#000000;text-decoration:none}
a.blacklink:hover		{color:#336633;text-decoration:underline}
a.blacklink:active		{color:#ffffff}
		 
a.links:link			{color:#000000;text-decoration:none;font-weight:normal}	
a.links:visited			{color:#000000;text-decoration:none;font-weight:normal}
a.links:hover			{color:#000000;text-decoration:none}
a.links:active			{color:#000000}

a.greylink:link			{color:#bbbbbb;text-decoration:underline;font-size:8pt;}	
a.greylink:visited		{color:#bbbbbb;text-decoration:none;font-size:8pt;}
a.greylink:hover		{color:#bbbbbb;text-decoration:none;underline-size:8pt;}
a.greylink:active		{color:#bbbbbb;text-decoration:none;font-size:8pt;}

.greysmall				{color:#bbbbbb;text-decoration:none;font-size:8pt;}



.search-online-shop {float:left; width:120px; height:35px; background: url(/acatalog/images/logos/search-online-shop.jpg) no-repeat 0 0px;}
a.search-online-shop:hover {float:left; width:120px; height:35px; background: url(/acatalog/images/logos/click-shop.jpg) no-repeat 0px 0px;}



.add-big-link {position: absolute; top:60px; left:0px; width:125px; height:66px; background: url(/images/add-big-link.jpg) no-repeat 0 0px;}
a.add-big-link:hover {position: absolute; top:60px; left:0px; width:125px; height:66px; background: url(/images/add-big-link-hover.jpg) no-repeat 0px 0px;}


.add-link {position: absolute; top:140px; left:650px; width:115px; height:28px; background: url(/images/add-your-link.jpg) no-repeat 0 0px;}
a.add-link:hover {position: absolute; top:140px; left:650px; width:115px; height:28px; background: url(/images/add-your-link-click-here.jpg) no-repeat 0px 0px;}

.garden-buildings {float:left; width:115px; height:28px; background: url(/images/garden-buildings.jpg) no-repeat 0 0px;}
a.garden-buildings:hover {float:left; width:115px; height:28px; background: url(/images/clickhere.jpg) no-repeat 0px 0px;}

.garages {float:left; width:115px; height:28px; background: url(/images/garages.jpg) no-repeat 0 0px;}
a.garages:hover {float:left; width:115px; height:28px; background: url(/images/clickhere.jpg) no-repeat 0px 0px;}

.greenhouses {float:left; width:115px; height:28px; background: url(/images/greenhouses.jpg) no-repeat 0 0px;}
a.greenhouses:hover {float:left; width:115px; height:28px; background: url(/images/clickhere.jpg) no-repeat 0px 0px;}

.shed-plans {float:left; width:115px; height:28px; background: url(/images/shed-plans.jpg) no-repeat 0 0px;}
a.shed-plans:hover {float:left; width:115px; height:28px; background: url(/images/clickhere.jpg) no-repeat 0px 0px;}

.conservatories {float:left; width:115px; height:28px; background: url(/images/conservatories.jpg) no-repeat 0 0px;}
a.conservatories:hover {float:left; width:115px; height:28px; background: url(/images/clickhere.jpg) no-repeat 0px 0px;}

.decking-fencing {float:left; width:115px; height:28px; background: url(/images/decking-fencing.jpg) no-repeat 0 0px;}
a.decking-fencing:hover {float:left; width:115px; height:28px; background: url(/images/clickhere.jpg) no-repeat 0px 0px;}

.garden-accessories {float:left; width:115px; height:28px; background: url(/images/garden-accessories.jpg) no-repeat 0 0px;}
a.garden-accessories:hover {float:left; width:115px; height:28px; background: url(/images/clickhere.jpg) no-repeat 0px 0px;}

.pools-spas {float:left; width:115px; height:28px; background: url(/images/pools-spas.jpg) no-repeat 0 0px;}
a.pools-spas:hover {float:left; width:115px; height:28px; background: url(/images/clickhere.jpg) no-repeat 0px 0px;}

.play-equipment {float:left; width:115px; height:28px; background: url(/images/play-equipment.jpg) no-repeat 0 0px;}
a.play-equipment:hover {float:left; width:115px; height:28px; background: url(/images/clickhere.jpg) no-repeat 0px 0px;}

.more-links {float:left; width:115px; height:28px; background: url(/images/more-links.jpg) no-repeat 0 0px;}
a.more-links:hover {float:left; width:115px; height:28px; background: url(/images/clickhere.jpg) no-repeat 0px 0px;}

.place-order {float:left; width:100px; height:25px; background: url(/images/logos/place-order.jpg) no-repeat 0 0px;}
a.place-order:hover {float:left; width:100px; height:25px; background: url(/images/logos/clickhere.jpg) no-repeat 0px 0px;}
				


body{background-color:#ffffcc; margin-left:0px; margin-right:0px; margin-top:20px; margin-bottom:20px; color:#000000; font-family:Arial, Verdana, Helvetica, serif;}

body, table, tr, td, p{font-family:Arial, Verdana, Helvetica, serif; font-size: 9pt; color: #000000; font-weight:normal;}
	
p{margin-top: 0; margin-bottom: 0; margin-left: 0px; margin-right: 0px;}	

#bgcontain {width: 900px;  margin: 0 auto; border: solid brown 1px; position: relative; background-image:url(/images/cell_back.gif);background-repeat:repeat-y; } 
/*BgContain is the outer edge of the web page and contains all of the web page - where WIDTH being the overall width of the web page*/

#leftcontent {position: absolute; height:1400px; left:0px; top:130px; width:115px; border:0px solid #fff; background-image:url(/images/cell_back.gif);background-repeat:repeat-y; background-color:#ffffff;}
/*LeftContent is the left hand column set with a HEIGHT to ensure that it does not get covered over if there is only a small amount of content*/

#rightcontent {position: absolute; height:1400px; right:0px; top:130px; width:125px; border:0px solid #000; background:#ffffff; text-align:center; }
/*RightContent is the right hand column set with a HEIGHT to ensure that it does not get covered over if there is only a small amount of content*/

#content-shell {width:900px;}
/*Content-Shell is the outer area where the content will go with the WIDTH same as in BgContain*/

.content{float:left; width:660px; margin-left: 115px; margin-right: 125px; background:#ffffff;}
/*Content- This is where the main content of the web page will go. The margin-left will be set to the width of LeftContent and the margin-right will be set to the width of RightContent* - I use a invisible .gif set to the Height as in LeftContent and RightContent and aligned to left*/

#banner {background:#ffffff; width:900px;}
/*Banner is where the top banner will go with the WIDTH same as in BgContain*/
#footer {background:#ffffff; width:900px; text-align:center; border:0px solid #000; clear:both;}
/*Footer is where the footer will go with the WIDTH same as in BgContain*/


