/* Benj Arriola's Defaul

 ****************************************************************************/

/* Link underlines tend to make hypertext less readable, 
 * because underlines obscure the shapes of the lower halves of words
  ****************************************************************************/
:link,:visited,:hover { text-decoration:none; }

/* No list-markers by default, since lists are used more often for semantics */
ul,ol { list-style:none; }

/* Avoid browser default inconsistent heading font-sizes and pre/code too    */
h1,h2,h3,h4,h5,h6,pre,code { font-size:12px; font-weight: normal; }

/* Remove the inconsistent (among browsers) default ul,ol padding or margin
 * the default spacing on headings does not match nor align with normal
 * interline spacing at all, so let's get rid of it.
 * Zero out the spacing around pre, form, body, html, p, blockquote as well
 * form elements are oddly inconsistent, and not quite CSS emulatable.
 * Nonetheless, strip their margin and padding as well.
 *****************************************************************************/
hr,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,div,dd,dt,dl
{ margin:0; padding:0; }

/* whoever thought blue linked image borders were a good idea?
 *****************************************************************************/
a img,:link img,:visited img { border:none; }

/* more varnish stripping as necessary...
 *****************************************************************************/
#ttlFeatureBox div, .titles div, #ttlLocationSidebar span, #ttlServicesSidebar span, #ttlFeatureBox span, #ttlContactSidebar span, .readmore span, .titles span, #mast span, #head span, h1 span, h2 span, h3 span, h4 span, h5 span, h6 span { display:none; }

/* use this class to indent a paragraph 20 pixel...
 *****************************************************************************/
.indent { margin:0 0 0 20px; }

/* use for top of page link
 *****************************************************************************/
.topofpage { text-align: right; }

/* use to clear below floats
 *****************************************************************************/
.clear { clear: both; height: 1px; overflow: hidden;}

/* Default font settings for this website. This may very depending on the 
 * design. Also set your colors and underlines here for links.
 *****************************************************************************/
h1,h2,h3,h4,h5,h6,p,li{
	font: 12px Arial, Helvetica, sans-serif;
	color: #fff;
}
a:link, a:visited{
	font: 12px Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: underline;
}

a:hover, a:active{
	color: #7A4525;
	text-decoration: none;
}

/* Most of the sites I build are in a 760px to 780px container.
 *****************************************************************************/
body {
	text-align: center;
	color: #464646;
	background: #000 url(../images/allpages/back.jpg) repeat-x top;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}

#container{
	background: url(../images/allpages/container-back.jpg);
	margin: 0 auto 0 auto;
	text-align: left;
	width: 780px;
}

/* Default values end here.
 *****************************************************************************/

/*
 * This file is a modification of:
 * ----------------------------------------------------------------------------
 * undohtml.css
 * (C) 2004 Tantek Celik. Some Rights Reserved.
 * http://creativecommons.org/licenses/by/2.0
 * This style sheet is licensed under a Creative Commons License.
 * ---------------------------------------------------------------------------- 
 * Purpose: undo some of the default styling of common (X)HTML browsers
 *****************************************************************************/

/* Thanks to Mike Hawkins for sharing, and to him and Andy Waer for the 
 * mini-lessons. Custom modifications to the file by:
 * Benj Arriola http://www.benjarriola.com (spammers, go away!)
 *****************************************************************************/

/* Main Boxes
 *****************************************************************************/

#head{
	background: url(../images/allpages/head.jpg);
	width: 780px;
	height: 104px;
	position: relative;
}
		#head a{
			position: absolute;
			margin: 27px 0 0 41px;
			width: 250px;
			height: 46px;
		}
		
#main-content{
	background: url(../images/beam.jpg) no-repeat top;
	width: 779px;
}

#mast{
	height: 223px;
}

#left{
	width: 504px;
	float: left;
	margin: 0 0 0 15px;
	display: inline;
}
		.titles{
			width: 500px;
			height: 51px;
			margin: 0 0 26px 0;
		}
		#left p{
			margin: 10px 38px 5px 31px;
			line-height: 19px;
		}
		#left blockquote{
			margin: 10px 38px 5px 31px;
			line-height: 19px;
		}
		#left blockquote p{
			margin: 5px 15px;
			font-style: italic;
		}
		#left ul{
			margin: 0 38px 5px 31px;
			
		}
		.anchorlist{
			float: left;
			with: 200px;
			display: inline;
		}
		#left ul li, #left .anchorlist ul li{
			list-style: circle;
			margin: 0 0 0 20px;
		}
		#left .anchorlist ul li{
			list-style: circle;
			margin: 0px;
		}
		#left h1{
			margin: 20px 38px 5px 31px;
			font-size: 16px;
			font-weight: bold;
		}
		#left h2{
			margin: 20px 38px 5px 31px;
			font-size: 14px;
			font-weight: bold;
		}
		#left h3{
			margin: 20px 38px 5px 31px;
			font-size: 12px;
			font-weight: bold;
		}
		#left .clickvideo{ margin-left: -18px;}
		.readmore{
			background: url(../images/allpages/readmore.jpg);
			height: 28px;
			width: 78px;
			margin: 0px 0 0 382px;
			position: relative;
		}
				.readmore a{
					position: absolute;
					height: 28px;
					width: 78px;
					margin: 0;
				}

		#feature-box-top{
			background: url(../images/allpages/feature-box-top.jpg) no-repeat top right;
			width: 467px;
			margin: -15px 0 0 0;
		}
				#feature-box-top hr{
					display: none;
				}
				#feature-box-left{
					background: url(../images/allpages/feature-box-left.jpg) no-repeat top left;
				}
				#feature-box-left p{
					margin: 0 10px 10px 215px;
					line-height: 18px;
				}
				#feature-box-left h3{
					margin: 0 10px 10px 215px;
					line-height: 18px;
					font-weight: bold;
					font-size: 14px;
				}
				#feature-box-bottom{
					background: url(../images/allpages/feature-box-bottom.jpg) no-repeat bottom right;
					height: 33px;
					width: 467px;
				}
						#feature-box-bottom hr{
							display: none;
						}
#pics { margin:10px 0px 0 20px;}	
	#pics p {margin:0 0 0 10px;}
#right{
	width: 247px;
	float: left;
}		
		#right p{
			margin: 0 0 0 27px;
		}

#footer{
	background: #464646 url(../images/allpages/footer.jpg) no-repeat top;
	clear: both;
}

		#footer p{
			text-align: center;
			color: #838448;
			padding: 20px 0;
		}
		
		#footer a{
			color: #838448;
			text-decoration: none;
		}
		#footer a:hover{
			color: #fff;
			text-decoration: underline;
		}
		
/* Other Details
 *****************************************************************************/

/* Inset */
		.img-pics {border: 1px solid #9FA067; padding:4px;}

		.img-right, a img,:link img,:visited img.img-right {
			margin: 0 30px 0 10px;
			padding: 4px;
			border: 1px solid #9FA067; 
		}
		 
/* Titles */

		#ttlHome{
			background: url(../images/titles/home.jpg) no-repeat left;
			margin: 0 40px 0 20px;
		}
		#ttlAbout{
			background: url(../images/titles/about.jpg) no-repeat left;
			margin: 0 40px 0 20px;
		}
		#ttlGrounds{
			background: url(../images/titles/grounds.jpg) no-repeat left;
			margin: 0 40px 0 20px;
		}
		#ttlIrrigation{
			background: url(../images/titles/irrigation.jpg) no-repeat left;
			margin: 0 40px 0 20px;
		}
		#ttlInvoice{
			background: url(../images/titles/invoice.jpg) no-repeat left;
			margin: 0 40px 0 20px;
		}
		#ttlFeature{
			background: url(../images/titles/feature.jpg) no-repeat left;
		}
		#ttlContact{
			background: url(../images/titles/contact.jpg) no-repeat left;
			margin: 0 40px 0 20px;
		}
		#ttlGrounds_Top{
                        background: url(../images/titles/grounds_top.jpg);
			height: 170px;
                        width: 215px;
			margin: 10px 0 25px 26px;
                }
                #ttlIrr_Top{
                        background: url(../images/titles/irrigation_top.jpg);
                        height: 210px;
                        width: 163px;
                        margin: 10px 0 25px 26px;
                }
                #ttlIrr_Bottom{
                        background: url(../images/titles/irrigation_bot.jpg);
                        height: 210px;
                        width: 163px;
                        margin: 107px 0 25px 26px;
                }

		#ttlMeet{
			background: url(../images/titles/meet.jpg) no-repeat left;
		}
		#ttlContactSidebar{
			background: url(../images/titles/login.jpg);
			height: 21px;
			width: 84px;
			margin: 107px 0 25px 26px;
		}
		#ttlLocationSidebar{
			background: url(../images/titles/location-sidebar.jpg);
			height: 20px;
			width: 65px;
			margin: 107px 0 25px 26px;
		}
		#ttlServicesSidebar{
			background: url(../images/titles/services-sidebar.jpg);
			height: 21px;
			width: 65px;
			margin: 75px 0 25px 26px;
		}
		#ttlFeatureBox{
			height:45px;
			width: 158px;
			margin: 0 0 15px 215px;
			padding: 0px 0 0 0; 
		}
 
/* Quick Contact Form */

		#quickcontactform1 input, #quickcontactform1 textarea{
			color: #000;
			background: #fff;
			font: 12px Arial, Helvetica, sans-serif;
			margin: 0 0 2px 27px;
		}
		
		#quickcontactform1 textarea{
			height: 82px;
			overflow: auto;
		}
		
		.quickcontact1{
			width: 168px;
		}
		
		#quickcontactform1 .quickcontact-button1{
			width: 60px;
			border: 1px solid #000;
			margin: 2px 0 31px 27px;
		}


		

/* Horizontal SpriteNav */

		#h-spritenav1, #h-spritenav1 li, #h-spritenav1 a{
			/* Change height of nav */
			height: 54px;
		}
		
		#h-spritenav1{
			/* Change image of nav */
			background: url(../images/allpages/topnav.jpg) no-repeat left top;
			position: relative;
			/* Change width of nav */
			width: 780px;
		}
		
		#h-spritenav1 li a span{
			display: none
		}
		
		#h-spritenav1 li{
			list-style-type: none;
			position: absolute;
			top: 0px;
			display: block;
		}
		
		#h-spritenav1 a{
			display: block;
		}
		
		/* Change left coordinate and width of link */
		#h-spritenav1-1{left:  15px; width:  88px}
		#h-spritenav1-2{left:  103px; width:  112px}
		#h-spritenav1-3{left: 215px; width:  209px}
		/*#h-spritenav1-4{left: 324px; width:  82px}*/
		#h-spritenav1-5{left: 436px; width: 105px}
		#h-spritenav1-6{left: 539px; width: 117px}
		#h-spritenav1-7{left: 650px; width: 112px}
		
		/* Change image of nav and negative left coordinate and negative height */
		#h-spritenav1-1 a:hover{background: url(../images/allpages/topnav.jpg) no-repeat  -15px -54px}
		#h-spritenav1-2 a:hover{background: url(../images/allpages/topnav.jpg) no-repeat  -103px -54px}
		#h-spritenav1-3 a:hover{background: url(../images/allpages/topnav.jpg) no-repeat -215px -54px}
	/*	#h-spritenav1-4 a:hover{background: url(../images/allpages/topnav.jpg) no-repeat -324px -54px} */
		#h-spritenav1-5 a:hover{background: url(../images/allpages/topnav.jpg) no-repeat -436px -54px}
		#h-spritenav1-6 a:hover{background: url(../images/allpages/topnav.jpg) no-repeat -539px -54px}
		#h-spritenav1-7 a:hover{background: url(../images/allpages/topnav.jpg) no-repeat -650px -54px}


		

/* Vertical SpriteNav */
		
		#v-spritenav1 li, #v-spritenav1 a {
			height: 30px;
			display: block;
		}
		
		#v-spritenav1 li a span{
			display: none
		}
		
		#v-spritenav1{
			width: 246px;
			height: 227px;
			background: url(../images/allpages/sidenav.jpg);
			position: relative;
		}
		
		#v-spritenav1 li{
			list-style: none;
			position: absolute;
		}
		
		#v-spritenav1-1, #v-spritenav1-2, #v-spritenav1-3, #v-spritenav1-4, #v-spritenav1-5, #v-spritenav1-6, #v-spritenav1-7{left: 0; width: 246px;} 
		
		#v-spritenav1-1{top:  11px;}
		#v-spritenav1-2{top:  41px;}
		#v-spritenav1-3{top:  71px;}
		#v-spritenav1-4{top: 101px;}
		#v-spritenav1-5{top: 131px;}
		#v-spritenav1-6{top: 161px;}
		#v-spritenav1-7{top: 191px;}
		
		
		#v-spritenav1-1 a:hover{background: transparent url(../images/allpages/sidenav.jpg) -246px  -11px no-repeat;}
		#v-spritenav1-2 a:hover{background: transparent url(../images/allpages/sidenav.jpg) -246px  -41px no-repeat;}
		#v-spritenav1-3 a:hover{background: transparent url(../images/allpages/sidenav.jpg) -246px  -71px no-repeat;}
		#v-spritenav1-4 a:hover{background: transparent url(../images/allpages/sidenav.jpg) -246px -101px no-repeat;}
		#v-spritenav1-5 a:hover{background: transparent url(../images/allpages/sidenav.jpg) -246px -131px no-repeat;}
		#v-spritenav1-6 a:hover{background: transparent url(../images/allpages/sidenav.jpg) -246px -161px no-repeat;}
		#v-spritenav1-7 a:hover{background: transparent url(../images/allpages/sidenav.jpg) -246px -191px no-repeat;}


/* Text Nav */
	
		#text-nav{
			clear: both;
			width: 740px;
			margin: 0 auto 0px auto;
			text-align: center;
			padding: 52px 0 0 0;
		}	

		#text-nav ul{
			margin: 0 0 0 0;
		}
			
		#text-nav li{
			padding: 0 15px;
			display: inline;
			background: none;
			font-size: 12px;
			line-height: 13px;
		}
		
		#text-nav li.first{border: none;}
		#text-nav a:link, #text-nav a:visited{color: #fff; text-decoration: none;}
		#text-nav a:hover, #text-nav a:active{color: #838448; text-decoration: underline;}
		
		
/* ------ Main Contact Form ---------*/
		#big-contact{
			width: 350px;
			margin: 0 auto;
		}

		#big-contact label{
			border:none;
			margin: 40px auto 0 auto;
			width: 350px;
		}
		

		#big-contact input, #big-contact textarea, #big-contact option, #big-contact select{
			font-family: Arial, Helvetica, sans-serif;
			font-size: 11px;
			width: 130px;
			color: #000;
		}

		#big-contact br{
			clear: both;
		}
		
		#big-contact p
			{
				text-align:center;
				margin: 10px 0 10px 0;
				font-size: 12px;
			}
	
		#big-contact label input, #big-contact label select{
			position: absolute;
			left: 110%;
			top: -1px;
			width: 130px;
			color: #000;
		}
	
		#big-contact form, #big-contact label, #big-contact input, #big-contact textarea, #big-contact select{
			font-size: 12px;
			color: #fff;
		}
		#big-contact form, #big-contact input, #big-contact textarea, #big-contact select{
			font-size: 12px;
			color: #000;
		}
	
		#big-contact label{
			position: relative;
			width: 140px;
			display: block;
			margin: 0 10px;
			text-align: right;
			height: 20px;
		}
		
		#big-contact fieldset{
			width: 300px;
			padding: 5px 10px;
		}
		
		#big-contact hr{
			border: 0px;
			height: 1px;
			color: #fff;
			background: #fff;
			margin: 0 0 20px 0;
		}

		#big-contact label textarea{
			position: absolute;
			left: 110%;
			top: 0px;
			width: 160px;
			height: 100px;
		}

		#big-contact .radio{
			top:0;
			width: 14px;
		}
		
		#big-contact .reset{
			width:60px;
			margin: 10px 0 0 90px;
		}

		#big-contact .reset-clear{
			width:60px;
			margin: 100px 0 0 90px;
			background: #fff;
			color: #000;
			border: 1px solid #000;
		}
		
		#big-contact .submit{
			width:60px;
			margin: 10px 0 0 12px;
			background: #fff;
			color: #000;
			border: 1px solid #000;
		}
		
		#big-contact .clear-textarea{
			margin:100px 0 10px 0;
		}
		
		#big-contact .subscribe{
			width:90px;
			margin: 10px 0 0 110px;
		}
		
		#big-contact .submit-center{
			width:140px;
			margin: 10px 0 0 80px;
		}
		

		#center-column-inside #big-contact label{
			font: 12px Arial,Helvetica,sans-serif;
		}

		
		
		
		
		
		
		
/* SPRITE NAVIGATION */
#h-suckersprite1 {
	background: url(../images/h-suckerspritenav.jpg) top left no-repeat;					
	width: 600px;		/* Benj - Width whole navigation */
	height: 30px;		/* Benj - Height of Nav Bar */
	text-align: left;	/* Benj - Clear out align center styles */
}
#h-suckersprite1 span { display: none; }
#h-suckersprite1 li { 
	position: relative;
	float: left;
	list-style: none;
}
#h-suckersprite1 li, #h-suckersprite1 a { 
	height: 30px;			/* Benj - Height of Nav Bar */
	display: block;
}

/* left - Offset from left edge, for the first button. */
/* width - Width of each button */
#h-suckersprite1-01 {left: 79px; width: 79px;}
#h-suckersprite1-02 {left: 79px; width: 89px;}
#h-suckersprite1-03 {left: 79px; width: 94px;}
#h-suckersprite1-04 {left: 79px; width: 87px;}
#h-suckersprite1-05 {left: 79px; width: 89px;}

/* Position of each button, then negative of height */
#h-suckersprite1-01 a:hover {background: transparent url(../images/h-suckerspritenav.jpg) -79px -30px no-repeat;}
#h-suckersprite1-02 a:hover {background: transparent url(../images/h-suckerspritenav.jpg) -158px -30px no-repeat;}
#h-suckersprite1-03 a:hover {background: transparent url(../images/h-suckerspritenav.jpg) -247px -30px no-repeat;}
#h-suckersprite1-04 a:hover {background: transparent url(../images/h-suckerspritenav.jpg) -341px -30px no-repeat;}
#h-suckersprite1-05 a:hover {background: transparent url(../images/h-suckerspritenav.jpg) -428px -30px no-repeat;}

/* SON OF SUCKERFISH */

#h-suckersprite1 li ul {
	position: absolute;
	left: -9999px;
	background-color: #720000;	/* Background color of drop down h-suckersprite1 - add more styles (i.e. background image) if you want */
}

#h-suckersprite1 li ul li {
	height: 20px;				/* Height of each drop down h-suckersprite1 item */
}
#h-suckersprite1 li ul li a {
	width: 100%;
	height: 20px;				/* Height of each drop down h-suckersprite1 item, should match above */
	line-height: 20px;			/* Height of each drop down h-suckersprite1 item again, should match above */
}
#h-suckersprite1 li ul li a span {
	display: block;
	padding-left: 5px;
}

/* Drop down link styles */
#h-suckersprite1 a:link, #h-suckersprite1 a:visited, #h-suckersprite1 a:hover, #h-suckersprite1 a:active {
	font-size: 11px;
	color: #FFFFFF;
	text-decoration: none;
}

#h-suckersprite1 li:hover ul, #h-suckersprite1 li.hsfhover ul	{ left: auto; } 

/* Hover styles for drop down items */
#h-suckersprite1-03 ul a:hover, #h-suckersprite1-04 ul a:hover { 
	background-image: none;
	background-color: #AA0000; 
}

/* width of drop down h-suckersprite1 - choose width that allows items to display on one line */
#h-suckersprite1-03 ul, #h-suckersprite1-03 li { width: 260px; }		
#h-suckersprite1-04 ul, #h-suckersprite1-04 li { width: 90px; }








/* SPRITE NAVIGATION */
#v-suckersprite {
	position: relative;
	background: url(../images/v-suckerspritenav.jpg) top left no-repeat;					
	width: 100px;		/* Width of buttons, not entite image (or half of entire image) */
	height: 150px;		/* Height of entire image */
	}

#v-suckersprite li span { display: none; }

#v-suckersprite li {
	float: left;
	list-style: none;
	}

#v-suckersprite li, #v-suckersprite a { 
	height: 30px;			/* Each button must have the same height, define it here */
	display: block;
	}

/* Fix IE5.01Win jumping bug - Hide from IE Mac \*/
* html #v-suckersprite li { height:1% }
/* End */

/* Increments of each button height defined above */
#v-suckersprite-01 { top:   0px }
#v-suckersprite-02 { top:  30px }
#v-suckersprite-03 { top:  60px }
#v-suckersprite-04 { top:  90px }
#v-suckersprite-05 { top: 120px }

/* width set here should be same width set in #v-suckersprite */
#v-suckersprite-01, #v-suckersprite-02, #v-suckersprite-03, #v-suckersprite-04, #v-suckersprite-05 { left: 0px; width: 100px; }

/* Changed values should match "top" numbers specified above */
#v-suckersprite-01 a:hover { background: transparent url(../images/v-suckerspritenav.jpg) -100px   -0px no-repeat; }
#v-suckersprite-02 a:hover { background: transparent url(../images/v-suckerspritenav.jpg) -100px  -30px no-repeat; }
#v-suckersprite-03 a:hover { background: transparent url(../images/v-suckerspritenav.jpg) -100px  -60px no-repeat; }
#v-suckersprite-04 a:hover { background: transparent url(../images/v-suckerspritenav.jpg) -100px  -90px no-repeat; }
#v-suckersprite-05 a:hover { background: transparent url(../images/v-suckerspritenav.jpg) -100px -120px no-repeat; }

/* SON OF SUCKERFISH */

#v-suckersprite li ul {
	position: absolute;
	left: -9999px;
	background-color: #720000;	/* Background color of drop down menu - add more styles (i.e. background image) if you want */
	margin-left: 100px;			/* Set to same width as in #v-suckersprite */
	margin-top: -30px;			/* Set to each button height, same as used above */
	}

#v-suckersprite li ul li {
	height: 20px;				/* Height of each drop down menu item */
	}

#v-suckersprite li ul li a {
	width: 100%;
	height: 20px;				/* Height of each drop down menu item, should match above */
	line-height: 20px;			/* Height of each drop down menu item again, should match above */
	}

#v-suckersprite li ul li a span {
	display: block;
	padding-left: 5px;
	}

/* Drop down link styles */
#v-suckersprite a:link, #v-suckersprite a:visited, #v-suckersprite a:hover, #v-suckersprite a:active {
	font-size: 11px;
	color: #FFFFFF;
	text-decoration: none;
	}

#v-suckersprite li:hover ul, #v-suckersprite li.vsfhover ul	{ left: auto; }

/* Hover styles for drop down items */
#v-suckersprite-03 ul a:hover, #v-suckersprite-04 ul a:hover { 
	background-image: none;
	background-color: #AA0000;
	}

/* width of drop down menu - choose width that allows items to display on one line */
#v-suckersprite-03 ul, #v-suckersprite-03 li { width: 260px; }		
#v-suckersprite-04 ul, #v-suckersprite-04 li { width: 90px; }





/* Tooltip */

a.tooltip-1{
	position:relative;
	z-index:1;
	color:#333333;
	text-decoration:none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	border: 1px solid #ccc;
	padding: 2px;
	text-decoration: none;
}

a.tooltip-1:hover{
	z-index:99;
	padding: 2px;
    background-color:#CCC; color:#333;
	border: 1px solid #000;
	text-decoration: none;
}

a.tooltip-1 span{display: none}

a.tooltip-1:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:12px; left:22px; width:120px;
    border:1px solid #000;
	padding:5px;
	background-color: #999; color:#FFF;
}