/** Layout --------------------------**/
.clear {clear:both;}

body {background:#c9df9f url(../images/bg.jpg) repeat-x;}

#wrapper {
	margin: auto;
	width:952px;
	position: relative;/*
	left: 50%;
	margin-left: -488px; */
	margin-top: 30px;
	text-align: left;
	}
#masthead {
	position: relative;
	background: transparent url(../images/bg.jpg) top left;
	text-align:left;
	}
#masthead {height: 125px;padding-bottom:30px; position:relative;}	
/*#masthead {height: 155px;padding-bottom:35px;}*//*Backup*/
/* .shop #masthead {height: 185px;} */

#footer {width:100%; position:relative; text-align:center; background-color:#FFFFCC; height:42px; padding-top:5px; margin-left:1px;}
#footer a{ text-decoration: underline; color:#D47B21;}
#home #footer {width:100%; position:absolute; text-align:center; top:645px; height:55px;}

#logo {width:108px; height:108px; position:absolute; left:0px; clear:left; top:0px;}
/* top logo text */
h1 {
	width:522px; height:58px; 
	position:absolute; left:200px; top:35px;
	clear:left; 
	font-size:1.7em; font-weight: normal; font:"trebuchet ms"; color:#525252; 
	line-height:1.5em;}


h1 a {display:block; height: 130px; width: 800px;}	
#secondary_navigation {
	position: absolute;
	top: 135px;
	left:-45px;
	text-align: left;
	font-size:1em;
	}
.top_level_pages #secondary_navigation{left: -60px; top: 115px;}	
#home #secondary_navigation {left: -50px; top: 115px;}

#secondary_navigation ul{margin: 2px; margin-left: 30px;}	
#secondary_navigation li {float: left;padding: 5px 2px; margin-left:10px;}
.top_level_pages #secondary_navigation li, #home #secondary_navigation li {padding: 2px 10px;}
.top_level_pages #secondary_navigation .linktosub, #home #masthead .linktosub {display:none;}

.artificial_grass_section #secondary_navigation #ag {display:none;}
.play_areas  #secondary_navigation #pss {display:none;}
.commercial #secondary_navigation #cc {display:none;}
.maintenance_section #secondary_navigation #ssm {display:none;}
.top_level_pages #home #main {padding-top: 45px; }	
/* #main .button, #masthead .button {height: 120px; margin-bottom:5px;} */
#home #main .button{height: 93px;}

.play_areas #main .column .button, #sport_surfaces #main .column .button {width:230px; height:85px; overflow:hidden; background-repeat:no-repeat;}
.play_areas .column .button a, #sport_surfaces .column .button a {width: 230px;height:85px; overflow:hidden;}


#sport_surfaces #main .column .button {height: 100px;}
#sport_surfaces .column .button a{height: 100px;}
#sport_surfaces #a2 #b7 {float: left; margin-right: 8px;}

#home .column {width: 230px;}
.column {
	position: absolute;
	top: 20px;
	left: 0;
}
.top_level_pages .column {top: 60px;}
.play_areas #b1 {top:180px;}
.play_areas #b2 {top:290px;}
.play_areas #b3 {top:400px;}
.play_areas #b4 {top:510px;}
.play_areas #b5 {top:620px;}
.play_areas #b6 {top:730px;}

#wet_pour #b5 {float:left; clear: left; margin: 8px;}
#wet_pour #b6 {float:left; clear: left; margin: 8px;}

#wet_pour #b1 .button {background-image: url(../images/pic11-thumb.jpg);}
#wet_pour #b2 .button {background-image: url(../images/pic12-thumb.jpg);}
#wet_pour #b3 .button {background-image: url(../images/pic13-thumb.jpg);}
#wet_pour #b4 .button {background-image: url(../images/pic14-thumb.jpg);}
#wet_pour #a2 #b5 .button {background-image: url(../images/pic15-thumb.jpg);width:230px;}
#wet_pour #a2 #b6 .button {background-image: url(../images/pic16-thumb.jpg);width:230px;}

#sport_surfaces #b1 {top: 60px;}

#home .column {top:0;}
#a1 {}
#a2 {left:240px;}
#home #b1 {left:480px;}
#home #b2 {left:720px;}

.largecontent_leftnav #a2 {width: 706px;}
.largecontent_leftnav #a2 div.content {width: 684px;}
.largecontent_leftnav #a2 div.button {width: 706px;}
.largecontent_leftnav #b1 div.button {width: 230px; height: 85px; overflow: hidden;}
.column .content {width:210px;padding: 10px; border:1px solid transparent; background-color:#FFFFCC;}
#home .column .content {height: 270px;}
.column .caption {font-size: 0.95em; padding: 0 10px;}

/* Navigation -------------------*/
#home #main_nav,#homepage #main_nav {display:none;}
#main_nav {position:absolute; top: 0; left:0; }
#main_nav li {
	position: absolute;
	height:20px;
	width:230px;
	padding-top:15px;
	font-size:1.5em;
	font-weight:bold;
	line-height:1.3em;
		}
#main #main_nav li .button {height:28px;}		
#main_nav li.button a {height: 30px;}
#main_nav li.button a span {
	padding: 2px; 
	position: absolute; left:0; top: 31px; font-size:1.3em; cursor:pointer; font-weight: bold;}
#main_nav li.button a:link, #masthead #main_nav li.button a:visited {color: #444;}
 
#main_nav li#n1 {}
#main_nav li#n2 {left: 240px;}
#main_nav li#n3 {left: 480px;}
#main_nav li#n4 {left: 720px;}

#main_nav a:link, #main_nav a:visited {color:#666666;}

.side_nav {list-style-type: none; line-height: 2em; border-top: 1px solid #CC7311;}
.side_nav li {list-style-type: none;padding-left: 15px;
	background:transparent url(../images/bullet.gif) left 50% no-repeat;}
/*----------------------------------*/


ul.sidenav { position:fixed;}
ul.sidenav li, .intro {background-color:#FFFFCC; padding: 10px; margin-bottom: 20px; width: 213px;}
ul.sidenav li {border: 1px solid #CC7311;}


#measuretable {width:130px; position:relative; float:right; clear:right; line-height:20px;}
#measuretable td { height:16px; padding:0px 0px 0px 5px; border:solid 1px #CCCCCC;}
#measuretable th { padding-left: 5px; border:solid 1px #CCCCCC;}
/*
#measuretable table { border:solid 1px #CCCCCC;}
*/

.button {margin:0}
/*
#sport_surfaces #a1 .button	{background: transparent url(../images/sport_surfaces.jpg) top left no-repeat;}
#contact_page #a1 .button	{background: transparent url(../images/tennis-button.jpg) top left no-repeat;}
#play_areas #a2 .button	{background: transparent url(../images/play_surfaces.jpg) top left no-repeat;}
#garden_surfaces #a1 .button {background: transparent url(../images/garden-surfaces.jpg) top left no-repeat;}
#maintenance #a1 .button	{background: transparent url(../images/maintenance-surfaces.jpg) top left no-repeat;}
*/


#home #a1 .button	{background: transparent url(../images/garden-button.jpg) top left no-repeat;}
#home #a2 .button	{background: transparent url(../images/play-button.jpg) top left no-repeat;}
#home #b1 .button	{background: transparent url(../images/sport-button.jpg) top left no-repeat;}
#home #b2 .button	{background: transparent url(../images/maintenance-button.jpg) top left no-repeat;}

#play_areas #b1 .button {background: transparent url(../images/wetpour-button.jpg) top left no-repeat;}
#play_areas #b2 .button {background: transparent url(../images/proplay-button.jpg) top left no-repeat;}
#play_areas #b3 .button {background: transparent url(../images/tiles-button.jpg) top left no-repeat;}

#maintenance #a1 .button {background: transparent url(../images/maintenance-banner.jpg) top left no-repeat;}
.button {border: 1px solid #CC7311;}
.button a {display: block; height: 85px;}

#home .button a{height:92px;}

h2, h3 {
	padding: 3px 0 8px 2px; width: auto; line-height:1.5em;
	background: transparent; 
	text-align:left; 
	font-size:1.4em; 
	font:"trebuchet ms"; 
	color:#525252; 
	display: block;
}
h2 {
	font-size:1.5em; 
}
#home h2 {height: 2.8em;}
.content h3 {font-size:1.2em;}
h2 a {color:#525252;}
#a1 h2 {width:210px;}
#a2 h2 {}
#a3 h2 {}
#a4 h2 {}
#b1 h2 {}
#b2 h2 {}
#b3 h2 {}
#b4 h2 {}
#action {width:240px;text-align: center; position:absolute; top: 0px; right: 0;}
#action * {float: right; clear: right;}




#action img {margin: 3px 0;}


/* Play areas and maintenanve sections layout --------------*/
.largecontent_leftnav #column_a, .largecontent_leftnav #column_a .intro {width: 710px;}
.largecontent_leftnav #column_b {float: left; width:230px;}
.largecontent_leftnav #column_a {float: right;}

/* Typography -----------------*/ 


body {font-family: Verdana, Arial, Helvetica, sans-serif;}
#home #main ul {list-style-type: none;}
.content ul li {text-indent: 0;}
p {line-height: 1.5em;}
#home #main li { 
	padding-left: 15px;
	background:transparent url(../images/bullet.gif) left 50% no-repeat;
}
input[type="text"] {font-size: 100%; font-family: inherit;}
li {list-style: none;}
/* Links -----------------------*/

.content a:link {text-decoration: underline; color:#444;}
.content a:visited {text-decoration: underline; color:#666;}
.content a:hover {text-decoration: underline; }
#secondary_navigation a:active, a:focus {text-decoration: underline; color: #000; }
 



/* Form elements ----------------*/
#submit {padding: 5px; width: 50px; border: 1px solid orange;}

/* shared exclusions */
#proplay #main #column_a{width: 648px;}
#proplay #main #column_b{width: 325px;}

/* Images -------------------*/
.content img {border: 1px solid #ccc; margin: 8px;}
.content a img {border: 1px solid orange;}
.content .button img {padding:0; margin:0; border:none;}
.content .button a img {border: none;}
.button a {padding: 0;}
.intro img.floated_left {float: left; margin: 5px; clear: left;}
.intro img.floated_right {float:right; margin:5px; clear: right;}
.banner img {width:708px; height:87px; border: 1px solid orange; padding:0; margin:0;}
.imgfloatright {float:right; margin:5px; clear: right;}
.imgfloatleft {float:left; margin:5px; clear: left;}

/* Shop ---------------------*/
.shop #a1 .column .content {text-align:left;}
.shop table .img {margin: 0 8px 0 0;}
#cart_status {position: absolute; top: 140px; left:0; font-family: Verdana, Arial, Helvetica, sans-serif;line-height:1.5em;}

/* exceptions */
#maintenance #a1, #rubber_tiler #a1{ top:12px; left:0px; position:relative; float:left; clear:left;}
#home #homelowernav1, #home #homelowernav2, #home #homelowernav3, #home #homelowernav4 {height:470px;}
#shoppage #secondary_navigation {
	position: absolute;
	top: 137px;
	left:-47px;
	text-align: left;
	}
#shoppage #secondary_navigation ul{margin: 2px; margin-left: 30px;}	
#shoppage #secondary_navigation li {float: left;padding: 5px 2px; }
.top_level_pages #secondary_navigation, #home #secondary_navigation li {padding: 5px 10px;}

/* news related */
.newswrapper {margin-left:2px; margin-right:2px; position:relative;}
.newscontent {position:relative; float:right; padding-right:20px; clear:right;}
.newsimg {position:relative; float:left; border:solid 1px color orange; max-height:250px; max-width:150px;}
.newsimgarea {position:relative; float:left; padding-right:10px; margin-bottom:20px;}
.newsdate {position:absolute; width:80px; top:-20px; left:10px; font-size:11px;}
.newsdate2 {position:relative; float:right; width:80px; clear:right;}
#recentnews {width:512px; position:absolute; right:240px; margin-top:-150px;}
#recentnewstitle {width:180px; position:absolute; right:240px; margin-top:-36px;}
#news .side_nav li{ background-position:0px 10px; font-size:11px;}
#recentnews a, #recentnews a:visited {color:#00CC00; text-decoration:none;}
#recentnews a:hover, #recentnews a:active {color:#00CC00; text-decoration:underline;}


/* Gallery related */
#gallery .side_nav li{ background-position:0px 10px; }
#gallery .newsimgarea {position:relative; float:left; padding-right:10px; margin-bottom:20px; width:250px; height:150px;}
.gallerycatimgarea {position:relative; float:left; padding-right:10px; margin-bottom:20px; text-align:center;}
.gallerycatimg {position:relative; border:solid 1px color orange; max-height:150px; max-width:250px;}
#gallery .content a:link,#gallerycat .content a:link {text-decoration: underline; color:#444;}
#gallery .content a:visited,#gallerycat .content a:visited {text-decoration: underline; color:#666;}
#gallery .content a:hover,#gallerycat .content a:hover {text-decoration: underline; }
#gallerycat .newswrapper {margin-top:30px;}
.galleryimage {height:112px; padding:10px; position:relative; float:left; text-align:center;}
#fullsizeimagediv {position:relative; text-align:center;}

/* * * GOOGLE * * */
#googlearea { position:relative; padding-left:20px; padding-right:20px; margin-top:10px; text-align:center;}

/* shop area */
#shopwrapper {position:relative; padding:0px;}
.shopprodlist {width:160px; height:350px; position:relative; float:left; padding:3px 2px 8px 3px; border:1px solid #CCC; margin:0 2px 10px 2px;}
.shopprodlistimg {width:160px; position:relative; height:130px; text-align:center; }
.shopprodlisttxt {width:154px; min-height:165px; position:relative; float:left; clear:left; padding:2px; margin:2px 0 2px 0; background-color:#EEE; border:1px solid #CCC;}
.shopprodlistlink {width:156px; height:20px; position:relative; float:left; clear:left; padding:2px;text-align:center;}
.shopprodlistcost {width:156px; height:20px; position:relative; float:left; clear:left; padding:2px;text-align:center;}
.prodlistimg {max-width:160px; max-height:120px; position:relative; }
.shopprodlisttxt h6 {margin:0; font-size:12px; font-weight:bold; color:#666;}
.content #shopwrapper img {border: 1px solid orange; margin: 0; position:relative;}

/* view product */
#product-left-column-full {width:420px; position:relative; float:left; text-align:center;}
#product-right-column-full {width:260px; position:relative; float:right;}
#product-left-column-full2 {width:280px; position:relative; float:left; text-align:center; border:1px solid #CCC;}
#product-right-column-full2 {width:400px; position:relative; float:right;}
#product-left-column {width:280px; position:relative; float:left; text-align:center;}
#product-right-column {width:400px; position:relative; float:right;}
#product-docs{width:250px; position:relative; float:left; text-align:left;  margin:10px; padding:2px;}
#product-links {width:250px; position:relative; float:left; text-align:left;  margin:10px; padding:2px;background-color:#EEE; border:1px solid #CCC;}
#product-links h4,#product-right-column h4 {margin:0; font-size:12px; font-weight:bold; color:#666;}
#product-right-column table td, #product-left-column table td,#product-right-column table,#product-left-column {padding:0; margin:0;}
#prod-right-div {padding:10px; background-color:#EEE; border:1px solid #CCC;}
.docwrap {width:250px; position:relative; margin-bottom:5px;background-color:#FFF; border:1px solid #CCCCCC; padding:4px; height:40px;padding:0 0 6px 0;}
.docimg {width:50px; position:relative; float:left;}
.doctext {width:200px; position:relative; float:right;}
.content #shopwrapper .docwrap img {border:0;}
#product-right-column p,#product-left-column p {margin:0;}
table.tblprodsub {background-color:#FFF; border:1px solid #CCCCCC;}
table.tblprodsub td {padding-left:5px;border:1px solid #CCCCCC;}

/* side downloads */
#sidedownloads {position:relative; width:220px;}
#sidedownloads h3 {margin:0;}
.sidedownloadentry {position:relative; float:left; width:216px; padding:2px;}
.sidedownloadimage {position:relative; float:left; width:34px; text-align:left;}
.sidedownloadlink {position:relative; float:right; width:162px; padding:5px 0 0 0;}

/* images */
.imagewrap {width:320px; position:relative; padding:5px 0; text-align:center; float:left; margin-right:10px;}
.imagewrap220 {width:220px; position:relative; padding:5px 0; text-align:center; float:left; margin-right:5px;}

/* HOMEPAGE */
.content h2 {
	padding: 0px; margin:2px 0 5px 0;
}
#homepage .indexlowernav li { 
	padding-left: 15px;
	background:transparent url(../images/bullet.gif) left 50% no-repeat; margin:0;
}
#leftarea {position:relative; width:270px; float:left; padding-top:10px;}
#rightarea {position:relative; width:605px; float:right; padding-top:10px;}
#columnhome1 {padding-top:85px;}
#columnhome2 {float:left;}
#columnhome3 {padding-top:85px; float:right;}
.columnhome {position:relative; width:260px;}
#homelowernav1  {background-color:#FFFFCC; width:240px;}
/*  background-color:#FFFFCC; */
#homepage #main {position: relative;padding-top:0px;}
#homepage .linktosub {display:none;}
#homepage #secondary_navigation {
	position: relative;
	top: 0px;
	left:-45px;
	text-align: left;
	font-size:1em;
	}
#homepage #secondary_navigation li {padding-left: 15px;}
#homepage #masthead {height: 110px;padding-bottom:0px; position:relative;}	
#homepage #recentnews {width:512px; position:absolute; left:200px; margin-top:-100px;}
#homepage #recentnewstitle {width:180px; position:absolute; right:240px; margin-top:-36px;}
#homepage .indexlowernav {position:relative; clear:both; width:240px;}
#areawrapper {position:relative;}
.areaentry { position:relative;margin:0 0 5px 0; font-size:14px; width:665px;}
.areaentrylink { position:relative;margin:0 0 5px 0; font-size:14px; text-align:center;}
.areatxt {position:relative; width:406px; float:left; padding:4px 0 0 4px}
.areaimg {position:relative; width:250px; float:right;}
.areaimg img { margin:0; padding:0; border:0; width:250px;}
.arealeft {position:relative; width:290px; float:left; margin:0 0 0 35px; text-align:center;}
.arearight {position:relative; width:290px; float:right; margin:0 35px 0 0; text-align:center;}
#areaentrylinkdiv {position:relative; width:250px; text-align:center;}
#areaentrylinkdivimg {position:relative; width:40px; float:left;}
#areaentrylinkdivtxt {position:relative; width:205px; float:right; text-align:left; padding:5px 0 0 0;}
#areaentrylinkdivimg img { margin:0; border:0;}
#contentheader {position:relative;}
#contentlogo {position:relative; width:150px; float:left;}
#contentrightheader {position:relative; width:520px; float:right; padding:10px 0 0 0;}
#contentlogo img {margin:0; border:1px solid #CCCCCC;}
img.noborder {border:0;}
#main {position: relative; width:952px; padding-top:40px;}
#leftnavigation {position:relative; background-color:#FFFFCC; border:1px solid transparent; padding:10px 10px 10px 0; width:200px; float:left; margin:10px 5px 10px 0;}
#maincontent {position:relative;  background-color:#FFFFCC; border:1px solid transparent; width:696px; padding:0 5px;}
#maincontenthdr, #maincontentlinks {position:relative;  width:706px;}
#contentwrapper {position:relative;  border:1px solid transparent; padding:5px; width:706px; float:right;margin:10px 5px 10px 0;}
#contentwrapper div.banner img {border:1px solid orange;height:87px;margin:0;padding:0;width:708px;}
.mainrighttxt {position:relative; float:right; width:400px; padding:5px;}
/* .indexlowernav {position:absolute; clear:both; top:380px; width:210px;} */