@charset "utf-8";
/* CSS for Hard Topix */

html, body {
  margin: 0; padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #333333;
  line-height: 22px;
  background-color: #281D0D;
}

a:link, a:visited { text-decoration: underline; color: #779EBB; }
a:hover { color: #5484A7; }

h3 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; color: #C4D1D2; }

#top {
  width: 100%;
  height: 95px;
  background-image: url(../images/nav-bg.jpg);
  border-top: 12px solid #5E7B7D;
}

#nav-bg {
  margin: 0 auto;
  width: 999px;
  height: 95px;
}

.logo-eh { width: 167px; height: 84px; }

.logo-eh-p { margin-top: 14px; width: 258px; height: 45px; }

.pic-overlap {
  margin-left: 145px;
  width: 589px;
  height: 95px;
  background-image: url(../images/pic-overlap-bg.jpg);
}

#main {
  width: 100%;
  height: 411px;
  background-image: url(../images/main-bg.jpg);
}

#content-main {
  margin: 0 auto;
  padding: 0;
  width: 999px;
  height: 411px;
}

.content {
  margin-left: 10px;
  width: 370px;
}

.home-header {
  width: 380px;
  height: 67px;
}

#pic {width: 614px; height: 411px; }

#bottom-main {
  margin: 0 auto;
  width: 999px;
  color: #C4D1D2;
}

.bottom-content {
  width: 250px;
  margin-left: 30px;
  padding-top: 13px;
}

.spacer { margin-top: 20px; width: 1px; height: 425px; background-color: #C4D1D2; }

#footer { margin: 20px auto; width: 999px; text-align: center; font-size: 11px; color: #C4D1D2; clear: both; }

.topic { font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; color: #FFFFFF; }

#portfolio-nav-bg {
  margin: 0 auto;
  width: 999px;
}

#portfolio-main {
  margin: 40px auto;
  width: 999px;
}

/* Photo Gallery Home */

#large-pic {
  margin-top: 69px;
  margin-right: 14px; /* Was the only way I could separate the picture from the other column */
}

#largeImg {
  border: none;
}

.thumbs { margin-left: 0px; }

.thumbs img {
	border: 1px solid #EFEFEF;
	width: 110px;
	height: 83px;
}

/* NAV Classes */

#nav a:link, #nav a:visited {
text-decoration:none;
list-style:none;
background-position: 0 0;
}

#nav li a:hover {
  list-style:none;
  background-position: 0 -52px;
  display:block;
	height: 52px;
}

#nav li a {
  display:block;
	height: 52px;
}

#nav {
  margin:0 0 0 0px; padding:0;
  list-style:none;
  text-indent: -5000px;
}

#nav li {
  margin: 32px 0 0 0;
  background: none;
  margin-right: 0;
  text-align: center;
  float: left;
  list-style: none;
  padding-left: 0;
}

#nav li #home {
  background-image: url(../images/buttons/home.jpg);
  width: 102px;
}

#nav li #services {
  background-image: url(../images/buttons/products.jpg);
	width: 120px;
}

#nav li #portfolio {
  background-image: url(../images/buttons/portfolio.jpg);
  width: 135px;
}

#nav li #contact {
    background-image: url(../images/buttons/contact.jpg);
	width: 141px;
}

#nav li #faqs {
    background-image: url(../images/buttons/faqs.jpg);
	width: 91px;
}


/* pNAV Classes */

#pnav a:link, #pnav a:visited {
text-decoration:none;
list-style:none;
background-position: 0 0;
font-size: 14px;
color: #FFFFFF;
}

#pnav li a:hover {
  list-style:none;
  color: #CCCCCC;
}

#pnav li a {
  display:block;
}

#pnav {
  margin:0 0 0 227px; padding:0;
  list-style:none;
}

#pnav li {
  margin: 32px 0 0 0;
  background: none;
  margin-right: 0;
  text-align: center;
  float: left;
  list-style: none;
  padding-left: 0;
}

/* PortfolioNAV Classes */

.entrance2 {
	padding-left:0px;
	width: 250px;
	text-align: left;
	float:left;
	clear:both;
	margin-bottom: -18px;
	clear: both;
}

.wrapper2 {
  width: 840px;
}

h4 {
	width: 250px;
	height: 332px;
	overflow: hidden;
	list-style:none;
	float:left;
}

h4 a {
	text-indent: -5000px;
	display: block;
	width: 250px;
	height: 332px;
	position:relative;
	background-position: 0 0;
	list-style:none;
	float:left;
}

#sinks a,   #sinks a span   { background-image: url(../images/portfolio/sinks.jpg); }
#countertops a,   #countertops a span   { background-image: url(../images/portfolio/countertops.jpg); }
#outdoor a,   #outdoor a span   { background-image: url(../images/portfolio/outdoor-precast.jpg); }
#surrounds a,   #surrounds a span   { background-image: url(../images/portfolio/concrete-surrounds.jpg); }
#creativity a,   #creativity a span   { background-image: url(../images/portfolio/creativity.jpg); }

h4 a span {
	display: block;
	position: absolute;
	top:0;
	left:0;
	width: 250px;
	height: 332px;
	background-position: -250px 0;
	visibility: hidden;
	list-style:none;
	float:left;
}
h4 a:focus, h4 a:hover {
	cursor: pointer;
}

.wrapper2 {
	float: left;
	width: 999px;
	margin: 0 0 0 0;
	margin-bottom: 30px;
}

#sinks, #countertops, #surrounds, #creativity {
	float: left;
	position: relative;
	width: 250px;
	padding-right: 41px;
}