/*CSS for http://www.groutwiz.com, done by Stevie Chancellor */

/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
	display: block;
}

/*basics*/

html, body {
background: url('../imgs/bg2.jpg') repeat;
color:#18130c;
font:normal 14px/21px Arial, Helvetica, sans-serif;
margin:0;
padding:0;
text-align:left;
}

p {
color:#000;
font:14px/21px Arial, Helvetica, sans-serif;
margin:5px 0;
}

h2 {
color:#000;
font:26px/38px Arial, Helvetica, sans-serif;
margin:5px 0;
text-align:left;
}

h3 {
color:#000;
font-size:24px;
line-height:36px;
margin:5px 0;
font-weight:bold;
}

h4 {
color:#b1b12a;
font-size:22px;
line-height:33px;
margin:5px;
font-weight:bold;
}

h5 {
color:#b1b12a;
font-size:20px;
line-height:30px;
margin:7px 0 3px 5px;
font-weight:bold;
}

#container {
background:#f9f4ec;
width:930px;
margin:50px auto 0;
	-moz-box-shadow:0 7px 9px #a19075;
	-webkit-box-shadow:0 7px 9px #a19075;
box-shadow: 0 7px 9px #a19075;
padding:15px;
}

a:link, a:hover, a:active, a:visit {
color:#000;
font: normal 14px/21px Arial, Helvetica, sans-serif;
}

strong { font-weight:bold; }

em {font-style:italic; }

p { margin:11px 0; }

ul { list-style-image: url('../imgs/bullet.gif');  }

/*header*/
header {
width:930px;
height:165px;
}

#logo {
width:350px;
float:left;
margin-bottom:10px;
}

#logo img { margin-top:-63px; }

#hook {
width:350px;
float:right;
font-size:28px;
line-height:32px;
font-weight:bold;
text-align:right;
margin-top:35px;
}

#hook span {
font-size:18px;
line-height:26px;
font-weight:normal;
font-style:italic;
}

/* navigation */
nav {
width:960px;
height:50px;
clear:both;
margin:10px 0 0 -15px;
}

nav ul {
background:#c9b491;
border-top:1px solid #d6cab8;
height:50px;
list-style-type:none;
}

nav li {
display:inline;
padding:10px;
}

nav li a {
color:#fff;
text-transform:uppercase;
font-size:13px;
padding:10px 0;
text-decoration:none;
line-height:52px;
}

nav li a:hover {
color:#000;
text-decoration:underline;
cursor:help;
}

/* featured */
#featured {
background:#8cd4f4;
height:300px;
border-bottom:1px solid #c9b491;
margin: 0 auto 0 -15px;
width: 960px;
}

#leftFeatured {
float:left;
width:550px;
}

#rightFeatured {
float:right;
width:400px;
margin:35px 0 0 10px;
}

#featured h3 {
color:#00759F;
font:bold 30px/45px Arial, Helvetica, sans-serif;
padding:30px 0 10px 15px;
	-moz-text-shadow:0 1px 1px #e9f3f7, 0 0 1px #4ba1c1;
	-webkit-text-shadow:0 1px 1px, #e9f3f7, 0 0 1px #4ab1c1;
text-shadow: 0 1px 1px #e9f3f7, 0 0 1px #4ba1c1;
float:left;
}

#featured p {
color:#fff;
font-size:18px;
line-height:21px;
padding:0 0 10px 30px;
text-align:left;
width:465px;
margin:7px 0;
}

.greenButton{
width:181px;
height:46px;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebeb4c', endColorstr='#cccc33'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#ebeb4c), to(#cccc33)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #ebeb4c,  #cccc33); /* for firefox 3.6+ */
background:#d2d238;
	-moz-border-radius:8px;
border-radius: 8px;
	-webkit-box-shadow:0 1px 1px #45aee9;
	-moz-box-shadow:0 1px 1px #45aee9;
box-shadow: 0 1px 1px #45aee9;
border:1px solid #cccc33;
margin-left:300px;
}

#featured a {
color:#fff;
font-size:18px;
text-decoration:none;
float:right;
margin:15px;
}

#featured a:hover { color:#000; }

#intro { margin-bottom:20px; }

/* content */
#content, #contentFaq {
width:462px;
float:left;
padding:5px 15px 10px 0;
margin:10px 0 0 0;
border-right:1px dotted #dfd3c0;
}

#fullContent {
width:930px;
margin:20px 0;
}

#content p, #fullContent h2, #contentFaq h2 { margin:15px 15px 0 15px; }

#content h2, #testimonials h2, #fullContent h2, #contentFaq h2 {
font-weight:bold;
margin:10px 0 0 0;
}

#fullContent h2 { text-align:center; }

#content a, #fullContent a {
color:#000;
font:bold 18px/27px Arial, Helvetica, sans-serif;
text-align:right;
text-decoration:none;
float:right;
margin:7px 10px 10px 0;
}

#content p a {
font-size:14px;
text-align:normal;
float:none;
text-decoration:underline;
margin:0;
}

#content a:hover{ text-decoration:underline; }

#fullContent a:hover{ text-decoration:underline; }

#contentFaq a:hover { text-decoration:underline; }

#fullContent ul, #fullContent ol, #contentFaq ol, #contentFaq ul { margin:0 0 10px 45px; }

#fullContent a {
float:none;
text-align:left;
font:14px/21px Arial, Helvetica, sans-serif;
font-weight:bold;
text-decoration:underline;
}

#fullContent li a, #fullContent li, #contentFaq li { margin:5px 0 o 5px; }

.noMargin { margin:0 0 0 0; }

.tileInfo {
border-bottom:1px dotted #dfd3c0;
padding:20px 0 ;
}

.lastTile { border-bottom:none; }

#contentFaq { width:600px; float:left; }

#contentFaq ol { list-style-type:decimal; }

#contentFaq li a {
color:#000000;
font:14px/21px Arial, Helvetica, sans-serif;
text-decoration:underline;
}

#sidebarFaq {
width:900px;
float:right;
margin-right:30px;
}

/* testimonials - front page*/
#testimonials {
width:397px;
float:left;
padding:10px 15px 10px 30px;
margin:10px 0 0 0;
}

#testimonials p { margin-left:15px;}

#testimonials img { float:left; }

#testimonials a {
color:#000;
font:bold 18px/27px Arial, Helvetica, sans-serif;
text-align:right;
text-decoration:none;
float:right;
margin:15px 10px 20px 0;
}

#testimonials a:hover{text-decoration:underline; }

.testimonialSingle {
margin:30px 0 0 12px;
background:#efe6d6;
padding:9px;
font-style:italic;
}

.testfirst { margin-top:10px; }

.name{
font-weight:bold;
font-style:normal;
margin:10px 0 0 5px;
}

.logoRefs {
width:397px;
margin:0 auto;
padding-bottom:10px;
}

.logoRefs img {
float:none;
}

.second img{
margin:0 13px;
}


/* why Grout? */
#whyGrout {
width:930px;
margin:20px 0;
border-top:1px dotted #dfd3c0;
border-bottom:1px dotted #dfd3c0;
}

#whyGrout h2 {
color:#000;
font-size:30px;
line-height:36px;
font-weight:bold;
margin:10px auto;
text-align:center;
}

#whyGrout ul { height:190px; }

#whyGrout li {
display:inline;
width:295px;
float:left;
}

#whyGrout span {
color:#000;
font-size:18px;
font-weight:bold;
line-height:24px;
}

#whyGrout img{
float:left;
padding-top:10px;
}

.rightCell {
display:table-cell;
padding:0 0 0 17px;
}

/*sidebar */
#sidebar {
width:275px;
float:left;
margin:5px 0 0 15px;
}

#sidebar li {
padding:15px 0;
list-style-image:none;
border-bottom:1px dotted #dfd3c0;
text-align:center;
}

/* photo gallery page */
#featuredProjects {
width:750px;
margin:0 auto;
height:250px;
border:1px solid #e7e789;
}

#featuredProjects h5 { color:#003399; }

/* faq */
.msgHeader {
text-decoration:underline;
cursor:help;
}

.msgBody {
background:#EDE8E1;
border:1px solid #fff;
padding:5px 10px;
margin:0 0 10px 0;
}

/* footer */
footer {
font:12px/16px Arial, Helvetica, sans-serif;
width:960px;
margin:10px auto;
text-align:center;
}

#socialMedia {
width:300px;
margin:0 auto;
height:50px;
}