@charset "utf-8";
/* CSS Document */

body {
	background:url(../images/background2.gif);
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: small;  /* for compliant browsers */
	background: url(../images/background2.gif);
	color: #000;
}
	
*html body {
	font-size: x-small; /* for IE5/Win simplified hack which did work */ 
	f\ont-size: small; /*  for other IE versions */
}
	
html>body { /* be nice to Opera hack */ 
	font-size: small;
}

.clearfix:after{
	content:".";	/* add a period inside, at the end of the containing div -- NO CSS VALIDATION ON QUOTEMARKS */
	display:block;	/* otherwise this won't work */
	height:0;	/* so it will not create a gap between the bottom of the floated content and the containing area */
	clear:both;	/* so it appears after the floated content */
	visibility:hidden;	/* so we don't see the period */
}
.clearfix {
	display:inline-table;	/* an odd fix for IE */
}
/* Hide from IE Mac \*/
.clearfix {
	display:block;
}	
/* End hide from IE Mac */

/* backslash hack hides from IE mac \*/
* html .clearfix {height: 1%;}
/* end backslash hack */

/* ------------------------------------- start of wrapper -------------------------- */

#wrapper {
	margin:0 auto;
	padding:0 10px; /* lets see if this works */
	width:1000px;
	min-height:825px;
	background:#999999 url(../images/wrappergradbar1.gif) repeat-x;
	border-top:5px solid #aaa;
	border-right:5px solid #333;
	border-bottom:5px solid #333;
	border-left:5px solid #666;
	color:#ffffff;
}
 
/* ------------------------------------- start of navbar -------------------------- */

#navbar {
	width:255px;
	height:650px;
	text-align: center;
}

ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

li {
	display: inline; /* :KLUDGE: Removes large gaps in IE/Win */
}

#about a {
	display: block;
	color:#000;
	font-size:0px; /* to make very small */
	width: 220px;
	height: 71px; /* adjusted for each link */
	list-style-type:none;
	text-decoration: none;
	background: url(../images/about_us.gif) no-repeat left bottom;
	text-transform: uppercase;
}

#about a:hover {
	background: url(../images/about_us.gif) no-repeat right bottom;
}

#aboutselected a{
	display: block;
	color:#000;
	font-size:0px; /* to make very small */
	width: 220px;
	height: 71px; /* adjusted for each link */
	list-style-type:none;
	text-decoration: none;
	background: url(../images/about_us.gif) no-repeat right bottom;
	text-transform: uppercase;	
} /* to keep hover on the selected page */

#aboutselected a:active {
	background: url(../images/about_us.gif) no-repeat left bottom;
}

#contact a {
	display: block;
	color:#000;
	font-size:0px; /* to make very small */
	width: 220px;
	height: 56px; /* adjusted for each link */
	list-style-type:none;
	text-decoration: none;
	background: url(../images/contactus.gif) no-repeat left bottom;
	text-transform: uppercase;
}

#contact a:hover {
	background: url(../images/contactus.gif) no-repeat right bottom;
}

#contactselected a {
	display: block;
	color:#000;
	font-size:0px; /* to make very small */
	width: 220px;
	height: 56px; /* adjusted for each link */
	list-style-type:none;
	text-decoration: none;
	background: url(../images/contactus.gif) no-repeat right bottom;
	text-transform: uppercase;
}

#contactselected a:active {
	background: url(../images/contactus.gif) no-repeat left bottom;
}

#stock a {
	display: block;
	color:#000;
	font-size:0px; /* to make very small */
	width: 220px;
	height: 56px; /* adjusted for each link */
	list-style-type:none;
	text-decoration: none;
	background: url(../images/stock.gif) no-repeat left bottom;
	text-transform: uppercase;
}

#stock a:hover {
	background: url(../images/stock.gif) no-repeat right bottom;
}

#stockselected a {
	display: block;
	color:#000;
	font-size:0px; /* to make very small */
	width: 220px;
	height: 56px; /* adjusted for each link */
	list-style-type:none;
	text-decoration: none;
	background: url(../images/stock.gif) no-repeat right bottom;
	text-transform: uppercase;
}

#stockselected a:active {
	background: url(../images/stock.gif) no-repeat left bottom;
}

#design a {
	display: block;
	color:#000;
	font-size:0px; /* to make very small */
	width: 220px;
	height: 56px; /* adjusted for each link */
	list-style-type:none;
	text-decoration: none;
	background: url(../images/design.gif) no-repeat left bottom;
	text-transform: uppercase;
}

#design a:hover {
	background: url(../images/design.gif) no-repeat right bottom;
}

#designselected a {
	display: block;
	color:#000;
	font-size:0px; /* to make very small */
	width: 220px;
	height: 56px; /* adjusted for each link */
	list-style-type:none;
	text-decoration: none;
	background: url(../images/design.gif) no-repeat right bottom;
	text-transform: uppercase;
}

#designselected a:active {
	background: url(../images/design.gif) no-repeat left bottom;
}

#anticopy a {
	display: block;
	color:#000;
	font-size:0px; /* to make very small */
	width: 220px;
	height: 56px; /* adjusted for each link */
	list-style-type:none;
	text-decoration: none;
	background: url(../images/anticopy.gif) no-repeat left bottom;
	text-transform: uppercase;
}

#anticopy a:hover {
	background: url(../images/anticopy.gif) no-repeat right bottom;
}

#antiselected a {
	display: block;
	color:#000;
	font-size:0px; /* to make very small */
	width: 220px;
	height: 56px; /* adjusted for each link */
	list-style-type:none;
	text-decoration: none;
	background: url(../images/anticopy.gif) no-repeat right bottom;
	text-transform: uppercase;
}

#antiselected a:active {
	background: url(../images/anticopy.gif) no-repeat left bottom;
}

.aclist a{
	color:#80D2EE;
	font-size:90%;
	display:list-item;
	list-style-type: square;
	line-height:1.6em;
	list-style-position:outside;
	text-decoration:none;
	margin-left:-10px;
	*margin-left:10px; /* IE hack */
}

.aclist a:hover {
	color:#FFFFFF;	
}

.aclistselected a{
	color:#FFFFFF;
	font-size:90%;
	display:list-item;
	list-style-type: square;
	line-height:1.6em;
	list-style-position:outside;
	text-decoration:none;
	margin-left:-10px;
	*margin-left:10px; /* IE hack */
}

#image a {
	display: block;
	color:#000;
	font-size:0px; /* to make very small */
	width: 220px;
	height: 117px; /* adjusted for each link */
	list-style-type:none;
	text-decoration: none;
	background: url(../images/imagegallery.gif) no-repeat left bottom;
	text-transform: uppercase;
}

#image a:hover {
	background: url(../images/imagegallery.gif) no-repeat right bottom;
}

#imageselected a {
	display: block;
	color:#000;
	font-size:0px; /* to make very small */
	width: 220px;
	height: 117px; /* adjusted for each link */
	list-style-type:none;
	text-decoration: none;
	background: url(../images/imagegallery.gif) no-repeat right bottom;
	text-transform: uppercase;
}

#imageselected a:active {
	background: url(../images/imagegallery.gif) no-repeat left bottom;
}

#home a {
	display: block; /* */
	margin-top:10px;
	margin-left:5px;
	color:#000;
	font-size:0px; /* to make very small */
	width: 220px;
	height: 209px; /* adjusted for each link */
	list-style-type:none;
	text-decoration: none;
	background: url(../images/HCC_smallbkgd2.gif) no-repeat left bottom;
	text-transform: uppercase;
}

#home a:hover {
	margin-top:10px;
	background: url(../images/HCC_smallbkgd2.gif) no-repeat right bottom;
}

#spacer1 {
	width:220px;
	height:135px;
	margin-top:20px;
	background:url(../images/HCC_spacer.gif);
}


/* ------------------------------------- start of containers -------------------------- */
#splashcontainer {
	margin-top: -600px;
	width:735px;
	height:405px;
	float:right;
}

#aboutcontainer {
	background:url(../images/HCC_aboutus_bkgd.gif) no-repeat;
	text-align:center;
	font-size:130%;
	font-weight:400;
	line-height:125%;
	color:#FFFFFF;
	margin-top: -600px;
	margin-right:50px;
	*margin-right:20px; /* IE5 hack */
	width:675px;
	height:1%;
	float:right;
}

#designcontainer {
	color:#000;
	margin-top: -630px;
	border-top: #0011aa solid 5px;
	border-right: #0044dd solid 5px;
	border-bottom: #0044dd solid 5px;
	border-left: #0011aa solid 5px;
	background:#ffffff url(../images/design_image2.gif) right no-repeat ;
	padding:10px;
	width:705px;
	height:550px;
	float:right;	
}

#designtype {
	width:190px;
	padding-top:20px;
	margin-left:20px;
}

#designtype li {
	display:list-item;
	line-height:130%; 
	list-style-type:none;
	clear:both;
}

#ac_container1 {
	color:#000;
	margin-top: -630px;
	border-top: #0011aa solid 5px;
	border-right: #0044dd solid 5px;
	border-bottom: #0044dd solid 5px;
	border-left: #0011aa solid 5px;
	background:#ffffff url(../images/AC_pic1.gif) right top no-repeat;
	padding:10px;
	width:705px;
	height:700px;
	float:right;	
}

#ac_type {
	width:270px;
	padding-top:20px;
	margin-left:20px;
	*font-size:90%; /* IEhack */
}

#ac_type2 {
	width:200px;
	padding-top:20px;
	margin-left:20px;
	*font-size:90%;
}

#ac_container2 {
	color:#000;
	margin-top: -630px;
	border-top: #0011aa solid 5px;
	border-right: #0044dd solid 5px;
	border-bottom: #0044dd solid 5px;
	border-left: #0011aa solid 5px;
	background:#ffffff url(../images/ac2.gif) right top no-repeat;
	padding:10px;
	width:705px;
	height:700px;
	float:right;	
}

#ac_container3 {
	color:#000;
	margin-top: -630px;
	border-top: #0011aa solid 5px;
	border-right: #0044dd solid 5px;
	border-bottom: #0044dd solid 5px;
	border-left: #0011aa solid 5px;
	background:#ffffff url(../images/ac3.gif) right top no-repeat;
	padding:10px;
	width:705px;
	height:700px;
	float:right;	
}

#ac_container4 {
	color:#000;
	margin-top: -630px;
	border-top: #0011aa solid 5px;
	border-right: #0044dd solid 5px;
	border-bottom: #0044dd solid 5px;
	border-left: #0011aa solid 5px;
	background:#ffffff url(../images/ac4.gif) right top no-repeat;
	padding:10px;
	width:705px;
	height:700px;
	float:right;	
}

#ac_container5 {
	color:#000;
	margin-top: -630px;
	border-top: #0011aa solid 5px;
	border-right: #0044dd solid 5px;
	border-bottom: #0044dd solid 5px;
	border-left: #0011aa solid 5px;
	background:#ffffff url(../images/ac5.gif) right top no-repeat;
	padding:10px;
	width:705px;
	height:700px;
	float:right;	
}

#imagecontainer {
	color:#000;
	margin-top: -630px;
	border-top: #0011aa solid 5px;
	border-right: #0044dd solid 5px;
	border-bottom: #0044dd solid 5px;
	border-left: #0011aa solid 5px;
	background:#ffffff;
	padding:10px;
	width:705px;
	height:650px;
	float:right;	
}

#imagetype {
	width:660px;
	padding-top:20px;
	margin-left:20px;
	font-size:120%
}

#imagetype a {
	font-size:70%;
}


#stockcontainer {
	color:#000;
	margin-top: -630px;
	margin-bottom:25px;
	border-top: #0011aa solid 5px;
	border-right: #0044dd solid 5px;
	border-bottom: #0044dd solid 5px;
	border-left: #0011aa solid 5px;
	background:#ffffff;
	padding:10px;
	width:705px;
	height:925px;
	float:right;	
}

#stocktype {
	width:660px;
	padding-top:20px;
	margin-left:20px;
	font-size:100%
}

#stocktype a {
	font-size:70%;
}

/* ------------------------------------- start of stockpiclist -------------------------- */

ul#stockpics{	/*photos_plants is the id of the ul */
	width:660px;	 /*give the max width of the gallery */
	margin:0; /*_*/
	padding:0;
	list-style:none;	/* remove the bullets */
	height:370px;	/* to show the effect of the floated list items */
}


#stockpics li{
	display:inline;	/* to make the list items stack */
	float:left;		/**/
	width:100px;	/* and keep the lines of */
	left:685px;		/*trying to set IE to max */
	height:100px;	/* equal size */
	padding:2px;
	margin:14px; 
}

#stockpics li a{
	padding:0px;
	margin:5px;	/* space out the list items */
	display:block;	/* make the link fill the list item */
}

#stockpics li a img{
	border:3px solid #aa0000; /* thin red line */
	background:#FFFFFF;
	padding:10px;	/* show the background colour around the image */
	margin:0px;	/* no extra space so the li dimensions work */
	width:100px;	/* keep all images the same size */
	height:100px;
}

/* ------------------------------------- start of form -------------------------- */

#form {
	float:right;
	margin-top: -600px;  /* why does this work */
	line-height: 3em;
}

#form .style1 {
	color:#ffffff;
}

#orEmail {
	color:#ffffff;
	text-decoration:none;
	margin-left:200px;
}

#orEmail a:link{
	text-decoration:underline;
	color:#ffffff;
}
#orEmail a:visited{
	text-decoration:underline;
	color:#999999;
}
#orEmail a:hover{
	text-decoration:none;
	color:#80D2EE;
}
#orEmail a:active{
	text-decoration:none;
	color:#aa0000;
}

#orEmail h2 {
	color:#FFFFFF;
}
/* ------------------------------------- start of forEmail temp page -------------------------- */

#forEmail {
	width:450px;
	text-align:left;
	font-size:150%;
	color:#ffffff;
	text-decoration:none;
	padding-left:100px;
	margin-top:-500px;
	margin-left:300px;
	*margin-left:175px;
	float:left;
}

#forEmail h2 {
	font-size:80%;
	text-align:left;
}

#forEmail li {
	font-size:65%;
	text-align:left;
	}

#forEmail a:link{
	text-decoration:underline;
	color:#ffffff;
	text-align:left;
	}
	
#forEmail a:visited{
	text-decoration:underline;
	color:#999999;
	text-align:left;
	}
	
#forEmail a:hover{
	text-decoration:none;
	color:#80D2EE;
	text-align:left;
	}
	
#forEmail a:active{
	text-decoration:none;
	color:#aa0000;
	text-align:left;
	}
	
/* ------------------------------------- start of forEmail links -------------------------- */


.linklist li {
	line-height:2em;
	display:block;
}

.linklist li a{
	text-decoration:underline;
	color:#ffffff;
}

.linklist li a:visited{
	text-decoration:underline;
	color:#999999;
}

.linklist li a:hover{
	text-decoration:none;
	color:#80D2EE;
}


/* ------------------------------------- start of secgraphics -------------------------- */

#secgraphics {
	margin-top:-170px;
	width:735px;
	height:135px;
	float:right;

}

/* ------------------------------------- start of footer -------------------------- */

#copyrite {
	color:#FFFFFF;
	margin-top:205px;
	margin-left:15px;
	width:960px;
	text-align:center;
	font-size:90%;
	padding-bottom: 50px;
}
#copyrite a:link {
	text-decoration: underline;
	color:#FFFFFF;
}
#copyrite a:visited {
	text-decoration: underline;
	color: #dddddd;
}
#copyrite a:hover {
	text-decoration:none;
	color: #80D2EE;
}
#copyrite a:active {
	text-decoration:none;
	color:#aa0000;
}

#copyrite2 {		/* ------------- for contactus temp -------------- */
	margin:-100px auto 0 auto;
	color:#FFFFFF;
	width:960px;
	text-align:center;
	font-size:90%;
	padding:50px 0;
}
#copyrite2 a:link {
	text-decoration: underline;
	color:#FFFFFF;
}
#copyrite2 a:visited {
	text-decoration: underline;
	color: #dddddd;
}
#copyrite2 a:hover {
	text-decoration:none;
	color: #80D2EE;
}
#copyrite2 a:active {
	text-decoration:none;
	color:#aa0000;
}