/* CHANGE PRIMARY SITE IMAGES BELOW */
/* All the main images can be adjusted in the first 100 lines of code in this file */
/* These image include: header background, side (wraparound) background, */
/* front page big image & it's inset image, and the big images on the main site pages */ 
/* (landscaping, property maintenance, etc) */

/* HEADER/SIDE BACKGROUND IMAGES */
.headerbackground{
background-image: url(../images/header_bg-long-grass.jpg);
background-repeat: no-repeat;
height: 120px;
overflow: hidden;
width: 993px;
margin-bottom: -1px;
}

.sidebackground{
background-image: url(../images/side_bg-long-grass.jpg);
background-repeat: no-repeat;
text-align: center;
padding: 0 0 0 0;
width: 200px;
height: 83px;
overflow: hidden;
border-right: 17px solid #c7c8ca;
border-bottom: 3px solid #c7c8ca;
}
/* sidebackground fix for firefox */
html > body .sidebackground{
height: 80px;
}
/* FRONT PAGE MAIN IMAGE */
.mainbody-frontpage_bigimage{
background-image: url(../images/front-page_main-image2.jpg);
background-repeat: no-repeat;
float: right;
/* To switch from wide image to narrow image just swap the height/width below to      */
/* width: 238px; height: 360px and vice versa.  be sure to upload an image that fits  */
/* these dimensions.                                                                  */
/* If you change the orientation of this image, then also change the settings         */
/* for mainbody-frontpage_bigimagecaption below.                                      */
width: 360px;
height: 228px;
margin-right: 8px;
}

/* frontpage bigimage fix for firefox */
html > body .mainbody-frontpage_bigimage{
position: relative;
margin-left: 30px;
top: 0px;
left: -25px;
}

/* FRONT PAGE MAIN IMAGE - CAPTION */
/* Change the position of the caption based on the */
/* width/height set in mainbody-frontpage_bigimage */
.mainbody-frontpage_bigimagecaption{
position: relative;
/* wide image caption position*/        top: 223px; 
/* narrow image caption position */  /* top: 300px; */ 
background-color: #c7c8ca; 
margin-top: 0px; 
margin-bottom: 0px; 
width: 100%; 
text-align: center; 
font-family: arial; 
font-size: 11px; 
color: #4e6e59;
border-top: 3px solid #758c83;
}

/* FRONT PAGE INSET IMAGE */
.mainbody-frontpage_insetimage{
position: relative;
background-image: url(../images/businesscard.jpg);
background-repeat: no-repeat;
height: 109px;
width: 196px;
/***** FRONT PAGE INSET IMAGE LAYOUTS *****/
/***** Uncomment/Comment the alignment code snips below *****/
/***** to change where the image appears inside the big image *****/
/***** This also depends on the height/width set for mainbody-frontpage_bigimage.  *****/
/***** Find the group of code titled NARROW IMAGE SETTINGS or WIDE IMAGE SETTINGS to *****/
/***** find the layout (right/top, left/bottom, etc) you want.  Be sure to comment *****/
/***** out any other positioning for mainbody-frontpage_insetimage to make it inactive.  *****/

/*** HIDE INSET IMAGE: use 'hidden' or 'visible' to toggle image display ***/
visibility: hidden; 
 
/*************************************/
/********* WIDE IMAGE SETTINGS *******/
/*************************************/
/***** ALIGN TO TOP RIGHT CORNER *****/
top: -17px; 
left: -1px; 
float: right; 
/*** ALIGN TO BOTTOM RIGHT CORNER ***/
/* top: 97px; 
   left: -1px; 
   float: right; */
/***** ALIGN TO TOP LEFT CORNER *****/
/* top: -17px; 
   left: 1px; 
   float: left; */
/**** ALIGN TO BOTTOM LEFT CORNER ***/
/* top: 97px; 
   float: left; */
/*************************************/
/*************************************/

/*************************************/
/******* NARROW IMAGE SETTINGS *******/
/*************************************/
/***** ALIGN TO TOP RIGHT CORNER *****/
/* top: -17px; 
left: -1px; 
float: right; */
/**** ALIGN TO BOTTOM RIGHT CORNER ***/
/* top: 97px; 
   left: -1px; 
   float: right; */
/***** ALIGN TO TOP LEFT CORNER ******/
/* top: -17px; 
   left: 1px; 
   float: left; */
/***** ALIGN TO BOTTOM LEFT CORNER ***/
/* top: 97px; 
   float: left; */
/*************************************/
/*************************************/
}

/* LANDSCAPING PAGE MAIN IMAGE */
.mainbody-landscaping_bigimage{
background-image: url(../images/landscaping_main-image.jpg);
background-repeat: no-repeat;
float: right;
width: 238px;
height: 317px;
margin-right: 8px;
}
/* landscaping bigimage fix for firefox */
html > body .mainbody-landscaping_bigimage{
position: relative;
margin-left: 30px;
top: 0px;
left: -26px;
}

/* LANDSCAPING PROCESS PAGE MAIN IMAGE */
.mainbody-landscaping-process_bigimage{
background-image: url(../images/landscaping-process_main-image.jpg);
background-repeat: no-repeat;
float: right;
width: 238px;
height: 850px;
margin-right: 8px;
}
/* landscape process bigimage fix for firefox */
html > body .mainbody-landscaping-process_bigimage{
position: relative;
margin-left: 25px;
top: 0px;
left: -26px;
}

/* LANDSCAPING DESIGN PAGE MAIN IMAGE */
.mainbody-design_bigimage{
background-image: url(../images/design_main-image.jpg);
background-repeat: no-repeat;
float: right;
width: 238px;
height: 317px;
margin-right: 8px;
}
/* landscaping design bigimage fix for firefox */
html > body .mainbody-design_bigimage{
position: relative;
margin-left: 25px;
top: 0px;
left: -26px;
}


/* PROPERTY MAINTENANCE PAGE MAIN IMAGE */
.mainbody-property-maintenance_bigimage{
background-image: url(../images/property-maintenance_main-image.jpg);
background-repeat: no-repeat;
float: right;
width: 238px;
height: 317px;
margin-right: 8px;
}
/* property maintenance bigimage fix for firefox */
html > body .mainbody-property-maintenance_bigimage{
position: relative;
margin-left: 25px;
top: 0px;
left: -26px;
}

/* ABOUT US PAGE MAIN IMAGE */
.mainbody-aboutus_bigimage{
background-image: url(../images/about-us_main-image.jpg);
background-repeat: no-repeat;
float: right;
width: 360px;
height: 238px;
margin-right: 8px;
}
/* about us bigimage fix for firefox */
html > body .mainbody-aboutus_bigimage{
position: relative;
margin-left: 25px;
top: 0px;
left: -26px;
}

/* SPRING FALL CLEANUP PAGE MAIN IMAGE */
.mainbody-spring-fall-clean-up_bigimage{
background-image: url(../images/spring-fall-clean-up_main-image.jpg);
background-repeat: no-repeat;
float: right;
width: 238px;
height: 317px;
margin-right: 8px;
}
/* spring fall cleanup bigimage fix for firefox */
html > body .mainbody-spring-fall-clean-up_bigimage{
position: relative;
margin-left: 25px;
top: 0px;
left: -26px;
}

/* LAWN MAINTENANCE PAGE MAIN IMAGE */
.mainbody-lawn-maintenance_bigimage{
background-image: url(../images/lawn-maintenance_main-image.jpg);
background-repeat: no-repeat;
float: right;
width: 238px;
height: 317px;
margin-right: 8px;
}
/* lawn maintenance bigimage fix for firefox */
html > body .mainbody-lawn-maintenance_bigimage{
position: relative;
margin-left: 25px;
top: 0px;
left: -26px;
}

/* LAWN CARE PAGE MAIN IMAGE */
.mainbody-lawn-care_bigimage{
background-image: url(../images/lawn-care_main-image.jpg);
background-repeat: no-repeat;
float: right;
width: 238px;
height: 317px;
margin-right: 8px;
}
/* lawn care bigimage fix for firefox */
html > body .mainbody-lawn-care_bigimage{
position: relative;
margin-left: 25px;
top: 0px;
left: -26px;
}

/* IRRIGATION SERVICE PAGE MAIN IMAGE */
.mainbody-irrigation-service_bigimage{
background-image: url(../images/irrigation-service_main-image.jpg);
background-repeat: no-repeat;
float: right;
width: 238px;
height: 317px;
margin-right: 8px;
}
/* irrigation service bigimage fix for firefox */
html > body .mainbody-irrigation-service_bigimage{
position: relative;
margin-left: 25px;
top: 0px;
left: -26px;
}

/* LANDSCAPE BEDS PAGE MAIN IMAGE */
.mainbody-landscape-beds_bigimage{
background-image: url(../images/landscape-beds_main-image.jpg);
background-repeat: no-repeat;
float: right;
width: 238px;
height: 317px;
margin-right: 8px;
}
/* landscape beds bigimage fix for firefox */
html > body .mainbody-landscape-beds_bigimage{
position: relative;
margin-left: 25px;
top: 0px;
left: -26px;
}

/* TREE SHRUB CARE PAGE MAIN IMAGE */
.mainbody-tree-shrub-care_bigimage{
background-image: url(../images/tree-shrub-care_main-image.jpg);
background-repeat: no-repeat;
float: right;
width: 238px;
height: 317px;
margin-right: 8px;
}
/* landscape beds bigimage fix for firefox */
html > body .mainbody-landscape-beds_bigimage{
position: relative;
margin-left: 25px;
top: 0px;
left: -26px;
}

/* SNOW PLOWING PAGE MAIN IMAGE */
.mainbody-snow-plowing_bigimage{
background-image: url(../images/snow-plowing_main-image.jpg);
background-repeat: no-repeat;
float: right;
width: 238px;
height: 317px;
margin-right: 8px;
}
/* snow plowing bigimage fix for firefox */
html > body .mainbody-snow-plowing_bigimage{
position: relative;
margin-left: 25px;
top: 0px;
left: -24px;
}

/* HOLIDAY LIGHTING PAGE MAIN IMAGE */
.mainbody-holiday-lighting_bigimage{
background-image: url(../images/holiday-lighting_main-image.jpg);
background-repeat: no-repeat;
float: right;
width: 238px;
height: 317px;
margin-right: 8px;
}
/* holiday lighting bigimage fix for firefox */
html > body .mainbody-holiday-lighting_bigimage{
position: relative;
margin-left: 25px;
top: 0px;
left: -26px;
}


/***********************************************************************/
/* HEADER CONTENT - SEE TOP OF THIS FILE FOR BACKGROUND IMAGE SETTINGS */
/***********************************************************************/

.headerlogo{
background-image: url(../images/header_logo.png);

height: 116px;
width: 275px;
float: left;
margin-top: 5px;
margin-left: 20px;
position: absolute;
z-index: 100;
}

.headercontent{
float: right;
margin-top: 15px;
margin-right: 20px;
}

.headercontent a{
font-family: arial; 
font-size: 14px;
font-weight: bold;
color: #222272;
text-decoration: none;
}

.headerborder{
height: 20px; 
padding-top: 0px; 
margin-top: 0px; 
position: relative; 
left: -115px; 
text-align: center; 
width: 800px; 
background-color: #c7c8ca; 
border-top: 3px solid #758c83; 
border-left: 3px solid #758c83;
}
/* fix headerborder for firefox */
html > body .headerborder{
left: -114px; 
width: 793px; 
}

.headermenu{
position: absolute;
top: 98px;
left: 295px;
}
/* fix headermenu for firefox */
html > body .headermenu{
top: 97px;
left: 311px;
}

.headermenu-content ul{
padding: 0;
margin-right: 400px;
font: bold 16px Arial;
list-style-type: none;
overflow: hidden;
background: transparent;
width: 650px;
font-weight: bold;
margin-bottom: 0px;
}

.headermenu-content li{
width: 110px;
display: inline;
text-align: center;
margin: 0;
}

.headermenu-content li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 0px 8px; /*padding inside each tab*/
color: #4e6e59;
}

.headermenu-content li a:visited{
color: #4e6e59;
/* shadow effect for top menu text 
filter: Shadow(Color=#000000, Direction=135, Strength=2); */
}

.headermenu-content li a:hover{
color: green;
background: white; /*background of tabs for hover state */
/* make links transparent
opacity:0.6; filter:alpha(opacity=60); */
}

.headermenu-content a.selected{
background: #8a8b8f; /*background of tab with "selected" class assigned to its LI */
}

html > body .headermenu-content ul{
position: relative;
top: -17px;
left: 130px;
font: bold 16px Arial;
list-style-type: none;
background: transparent;
font-weight: bold;
overflow: hidden;
}

html > body .headermenu-content li{
display: inline;
text-align: center;
margin: 0;
/* width: 110px; */
}

html > body .headermenu-content li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 0px 28px; /*padding inside each tab*/
color: #4e6e59;
}

html > body .headermenu-content li a:visited{
color: #4e6e59;
/* shadow effect for top menu text 
filter: Shadow(Color=#000000, Direction=135, Strength=2); */
}

html > body .headermenu-content li a:hover{
color: green;
background: white; /*background of tabs for hover state */
/* MAKE LINKS TRANSPARENT
opacity:0.6;
filter:alpha(opacity=60); */
}

html > body .headermenu-content a.selected{
background: #8a8b8f; /*background of tab with "selected" class assigned to its LI */
}

/**************************************************************************/
/* LEFT SIDE CONTENT - SEE TOP OF THIS FILE FOR BACKGROUND IMAGE SETTINGS */
/**************************************************************************/
.side{
background-color: #c7c8ca;
height: 100%;
}

.sidecontent{
width: 183px;
height: 100%;
font-family: arial; 
font-size: 20px; 
color: yellow; 
font-weight: bold;
border-right: 3px solid #758c83;
border-bottom: 3px solid #758c83;
}
/* sidecontent fix for firefox */
html > body .sidecontent{
width: 197px;
}


.side-testimonials{
margin: -10 10 10 10; 
padding: 3 3 3 3;
}
.side-testimonials-comment{
margin: 15 0 0 0;
font-family: verdana;
font-size: 10px;
color: #4e6e59;
text-align: left;
}
.side-testimonials-name{
margin: 0 0 0 0;
font-family: verdana;
font-size: 10px;
color: #4e6e59;
font-weight: bold;
text-align: right;
}

.main-testimonials-comment{
margin: 35 0 0 0;
font-family: verdana;
font-size: 13px;
color: #000000;
text-align: left;
}
.main-testimonials-name{
margin: 0 0 0 0;
font-family: verdana;
font-size: 13px;
color: #4e6e59;
font-weight: bold;
text-align: right;
}

/* SIDE MAIN MENU */
#menu ul { 
	margin: 0; 
	padding: 0; 
	list-style: none;
	width: 184px; /* Width of Menu Items */ 
	border: 0px solid #4e6e59; 
} 
/* fix width for firefox */
html > body #menu ul { 
width: 200px; /* Width of Menu Items */ 
}

#menu ul li { 
	position: relative; 
} 

#menu li ul { 
	position: absolute; 
	left: 183px; /*Set 1px less than menu width */ 
	top: 0; 
	display: block; 
} 

/* fix position for firefox */
html > body #menu li ul { 
	left: 199px; /*Set 1px less than menu width */ 
} 

#menu li:hover ul {
	display: block; 
} 

#menu li:hover>ul { 
	visibility:visible; 
} 

#menu ul ul {
	visibility:hidden; 
} 

/* Fix IE. Hide from IE Mac \*/ 
* html #menu ul li { float: left; height: 1%; } 
* html #menu ul li a { height: 1%; } 
/* End */ 

/* Make-up syles */ 

#menu ul, li { 
	margin: 0 0 0 0; 
} 

/* Styles for Menu Items */ 
#menu ul a { 
	display: block; 
  background: #c7c8ca;
  font: bold 15px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
  color: black;
  text-decoration: none; 
  border-bottom: 1px solid #B5B5B5;
	padding: 3px;
	padding-left: 10px;
	border: 1px solid #ccc; 
	border-bottom:  1px solid white;
} 

/* Hover Styles */ 
#menu ul a:hover { 
	color: white; 
	background: #4e6e59; 
} 

/* Sub Menu Styles */ 
#menu li ul a { 	
  width: 183px;
  text-decoration: none; 
	font-size: 13px;
	color: black; 
	background: white; /* IE6 Bug */ 
	padding: 3px; 
	border: 1px solid #758c83; 
	z-index: 200;
/*	border-bottom: 0; */
} 
/* fix submenu width for firefox  */
html > body #menu li ul a { 	
  width: 199px;
 }

/* Sub Menu Hover Styles */ 
#menu li ul a:hover { 
	color: black; 
	background: #c7c8ca; 
} 

/* Icon Styles */ 
#menu ul a.submenu {background: #c7c8ca url('../images/r_arrow.gif') no-repeat right; } 
#menu ul a.submenu:hover {background: #4e6e59 url('../images/r_arrow.gif') no-repeat right;}
#menu ul a.submenu2 {background: white url('../images/r_arrow.gif') no-repeat right; }
#menu ul a.submenu2:hover {background: #c7c8ca url('../images/r_arrow.gif') no-repeat right;}



/**************************************************************************/
/* MAIN BODY CONTENT - SEE TOP OF THIS FILE FOR BACKGROUND IMAGE SETTINGS */
/**************************************************************************/
.page{
height: 1250px;
}

.mainbody{
width: 98%;
margin-left: 10px;
}

.mainbody-text{
margin-top: 0px; 
margin-right: 15px; 
margin-left: 5px; 
font-family: arial; 
color: black; 
font-weight: normal; 
font-size: 13px;
}

.mainbody-text a{
color: darkgreen;
text-decoration: none;
font-weight: bold;
}

.mainbody-text a:hover{
text-decoration: underline;
font-weight: bold;

}

/**************************************************************************/
/* EXTRA FUNCTIONALITY ITEMS SUCH AS:                                 *****/
/* TOOL TIPS, IMAGE HOVER, AND THE CONTACT FORM VALIDATION MESSAGES   *****/
/**************************************************************************/

/* CONTACT FORM ERROR MESSAGE HANDLING */
#msg {display:none; position:absolute; z-index:200; background:url('../images/msg_arrow.gif') left center no-repeat; padding-left:7px}
#msgcontent {font-family: verdana; font-weight: bold; font-size: 11px; color: red; display:block; background:#f3e6e6; border:2px solid #924949; border-left:none; padding:5px; min-width:150px; max-width:250px}

/*** CSS TOOLTIPS ***/
.tooltip { 
position:relative; 
z-index:24; 
}
.tooltip span { 
display:none;
}
.tooltip:hover {
z-index:25;
}
.tooltip:hover span {
display:block;
position:absolute;
width:200px;
top:150px;
left:-40px;
background-color:#c7c8ca; 
border:3px solid #758c83;
padding:5px;
font-size:11px;
font-weight: bold;
color:#000000;
text-decoration: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
opacity:0.8;
filter:alpha(opacity=80); */
}
/* fix tooltip position for firefox */
html > body .tooltip:hover span {
top: 45px;
left:-45px;
}

/* IMAGE THUMBNAIL HOVER - USED ON DESIGN PAGE */
.thumbnail{
position: relative;
z-index: -1;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 50px;
left: 100px; /*position where enlarged image should offset horizontally */
}


/* TEXT HEADERS & ANCHOR */
.biglink a{
color: darkgreen;
text-decoration: none;
font-size: 16px;
font-weight: bold;
}


h1 {
position: relative;
top: 0px;
width: 150px;
height: 35px;
background-color: #4e6e59;
margin-bottom: 0px;
margin-top: -3px;
width: 120px;
border-top: medium solid #758c83;
z-index: 100;
color: white;
font-family: verdana; 
font-size: 12px; 
font-weight: bold; 
text-decoration: none;
}

h1 a{
color: white;
text-decoration: none;
}

h2 { 
font-family: verdana; 
font-size: 18px; 
font-weight: bold; 
color: #222272; 
margin: 0px;

} 

h3 { 
font-family: verdana; 
font-size: 15px; 
font-weight: bold; 
color: darkgreen; 
margin-bottom: 0x;
} 




/******************************************************************************/
/******             LEGACY CSS FROM OLD SITE DESIGN                  **********/
/****** Only parts of this code is still used.  As the new site is   **********/
/****** developed, we will remove these elements as needed.          **********/
/******************************************************************************/


td {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-decoration: none;
}

.darkgreen a{
color: darkgreen;
}

.siteMAP {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-decoration: none;
	color: #003300;
}

.siteMAP:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-decoration: underline;
	color: #4e6e59;
}

.green12PX {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #003300;
}
.green14PX {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #003300;
}
.black12PX {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}
.white10px {
	font-size: 10px;
	color: #FFFFFF;
}
.white {
	color: #FFFFFF;
	text-decoration: none;
}
.style2 {
	font-size: 16px;
	font-weight: bold;
}
.style3 {font-size: 14px}
.style5 {font-size: 16px; font-weight: bold; color: #551B53; }