/* GroutRx Version 1.1 css file 
Design by Sandra Mello */

/*Default style for the body. Background variations: #F1F6FF is a pale blue,  #B0C4DE is a standard light steel blue. Steel blue gradient image is based on #B0C4DE which blends into the ivory #FFFF0 background. Default text is dark gray.*/

body {
	margin: 0;
	padding: 0;
	background: #FFFFF0 url(images/bluebody02.jpg) repeat-x;
	text-align: center;
	font: normal 100% Verdana, Helvetica, Arial, sans-serif;
	color: #2D2D2D;
}

/* Branding styles. This is the logo with tagline and backdrop at the top of the page.  As the tagline doesn't work well for search engines, I changed it from an h1 to a p, with its own styling. This change can cause the image to be placed off-center until the page is re-loaded. By listing the styling at the top of this page, I'm hoping to prevent this from happening. */
/* Branding aka Header  */

#branding {
	width: 730px;
	height: 99px;
	margin: 0 auto;
	padding: 0;
	background: #E6E6FA;
	border: outset medium #B0C4DE;
	border-bottom: none;
}

#branding p {
	margin: 0;
	padding: 0;
}

#branding img {
	border: 0;
}


/* Default styles for the headers. #FFA500 is a css2 standard orange,  #F77F00 is a close equivalent to Pantone 151. #004A91 is a steel blue */

h1, h2, h3, h4, h5 {
	margin: 0;
	padding: 2em 0 0.5em 0;
	text-align: left;
	font-weight: normal;
	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
	color: #F77F00;
}

h1 {
	font-size: 1.125em;
}

h2 {
	font-size: 1em;
}

h3, h4, h5 {
	font-size: 0.875em;
}



p, blockquote, ul {
	font-size: 0.875em;
	margin: 0;
	padding: 0.875em 0 0 0;	
	line-height: 1.5em;
	text-align: left;
	color:  #2D2D2D;
}

ol {
	font-size: 0.875em;
	margin: 0;
	padding: 0 0 0 3em;
	line-height: 1.5em;
	color:  #2D2D2D;
}
	 

li {
	list-style: square inside;
}

li li, dl dl {
	font-size: 1em;
}

ol li {
	list-style: decimal inside;
}

dl {
	font-size: 0.750em;
	padding-left: 1em; 
	text-align: left;
}


dt {
	line-height: 1.5em;

}

dd {
	line-height: 1.2em;
	padding-bottom: 1em;
}

 img {
	border: 0;
}

/*Styles for links/anchors. Bright blue is #1F237D, #0000EE is a deeper blue */

a {
	text-decoration: none;
}

a:link {
	color: #0000EE;
	text-decoration: none;
}

a:visited {
	color: #6A5ACD;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:active {
	color: #F77F00;
}



/* Class for brand emphasis in spans */

.brand {
	font-size: 110%;
}



/* Navigation aka Menu Bar */

#navigation {
	width: 730px;
	height: 30px;
	margin: 0 auto;
	overflow: hidden;
	border: outset medium #B0C4DE;
	border-top: none;
	border-bottom: none;
	overflow: visible;
}


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

#navigation li {
	display: inline;

}

/* The entire area around the anchor/link becomes clickable by making it 'a' a block element */
#navigation a {
	display: block;
	float: left;
	padding: 10px 20px 6px 20px;
	text-decoration: none;
	font: normal 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
	background: url(images/divider.jpg) no-repeat right;
	color: #696969;
}


#navigation a:hover {
	color: #F77F00;
}

/* Navigation class highlighting text on current page  */

#navigation a.current { 
	background: #FFFFF0;
	color: #2D2D2D;
}

/* Footer Navigation */

#bottom-navigation {
	width: 730px;
	height: 30px;
	padding: 0;
	margin: 10px auto 0 auto;
	overflow: visible;
}


#bottom-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#bottom-navigation li {
	display: inline;
}

/* The entire area around the 'a' anchor/link becomes clickable by making it a block element */
#bottom-navigation a {
	display: block;
	float: left;
	padding: 10px 20px 0 20px;
	text-decoration: none;
	font: normal 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
	border-right: solid thin #FFFFFF;
	color: #696969;
}


#bottom-navigation a:hover {
	color: #F77F00;
}

/* Navigation class highlighting text on current page  */

#bottom-navigation a.current { 
	color: #2D2D2D;
}



/* Content */
/*background can be white #FFFFFF for higher contrast; this is ivory #FFFFF0, cornsilk is #FFF8DC */

#content {
	width: 682px;
	margin: 0 auto;
	padding: 0 24px 10px 24px;
	background: #FFFFF0 url(images/contentblue.jpg) repeat-x left bottom;
	border: outset medium #B0C4DE;
	border-top-style: none;
}

/* Banner just below header and menu used as title for page */ 

#banner  h1 {
	color: #F77F00;
}

/* Phone numbers */
#call-link {

	margin: 0 0 1.5em 0;
	padding: 1em 0em .3em 1em;
	background: #FFFFF0;
	color: #2D2D2D;
}

#call-link li {
	list-style: none;
}

#call-link a {
	text-decoration: underline;
}

/* Home page */


#home-pix {
	float: right;
	padding: 20px;
	margin: 10px 0 5px 20px;
	background-color: #FFFFF0;
	border: outset medium #B0C4DE;
}

#offer {
	margin: 1em;
	padding: 0 2em 1em 3em;
}

#offer a {
	text-decoration: underline;
}


/* try background as light blue: #E6E6FA or cornsilk yellow: #FFF8DC yellow: #FFFF99*/
#services, #tile-types {
	margin: 0 0 1em 0;
	padding: 1em 0em 1em 1em;
	background: #FFFACD;
}


/* Before and After page.  */

#descriptions h2 {
	margin: 2em 0 0 0;
}

.pix {
	margin-left: 30px;
	padding: 10px;
	background-color: #FFFFF0;
	border: outset medium #B0C4DE;
}


/* FAQ page */

#faqoverview {
	text-align: left;
	margin: 0 auto 4em auto;
	font-weight: normal;
	font-size: 1.1em;
}

#faqpix {
	float: right;
	padding: 20px;
	margin: 0 0 20px 20px;
	background-color: #FFFFF0;
	border: outset medium #B0C4DE;
}

#faqoverview li {
	line-height: 1.8em;
	list-style: none;
}

#rid, #clean, #color, #loose, #replace, #acrylic {
	background: #E6E6FA;
	padding: .5em;
}

#mildew, #prevent, #seal,  #crumbling, #tiletypes, #antique , #microban  {
	padding: .5em;
}

#terms h2 {
	margin: 2em auto 2em 2.5em;
}

#glossary {
	margin: 2em auto 1em auto;
	background: #FFFACD;
	padding: .5em;
}


/* Contact Us page */

#contactpix {
	float: right;
	padding: 20px;
	margin: 20px 0 20px 20px;
	background-color: #FFFFF0;
	border: outset medium #B0C4DE;
}
	

.vcard {
	clear: both;
	font-size: 0.875em;
	text-align: center;
	margin: 1em;
	padding: 1em;
}

.fn-org h2 {
	font-size: 1.125em;
	text-align: center;
}

/* Coupon and Discount Page */

#coupon {
	padding: 20px;
	margin: 30px;
	background-color: #FFFFF0;
	border: thin dotted #2D2D2D;
}


#coupon-pix {
	float: right;
	padding: 10px;
	background-color: transparent;
}


/* Site Information aka Footer */

#site-info {
	width: 734px;
	margin: 0 auto;	
	text-align: justify;
	background-color: #2D2D2E;
	border-top: solid thick #F77F00;
	color: #D8D8D8;
}
	
#site-info p, #site-info ol, #site-info ul {
	margin: 0;
	padding: .5em;
	font-size: 0.750em;
	text-align: center;
	color: #999999;
}

#site-info a {
	color: #D8D8D8;
}

#site-info a:hover {
	text-decoration: underline;
	color: #F77F00;
}

/* The custom 404 Error page which people reach if they follow an outdated link from a search engine, or for myriad other reasons  */
 

#errors h2, #errors h3  {
	line-height: 2em;
	text-align: center;
	font-weight: bold;
	color: #000000;
}


#errors h3 {
	font-size: 0.875em;
}

#ugly {
	font: 1.2em "Arial Black", Arial, sans-serif;
}

#follow h4 {
	line-height: 2em;
	text-align: center;
	font-size: 1.125em;
	font-weight: bold;
}

#follow {
	margin: 0 0 1.5em 0;
	padding: 2em;
	background: #FFFACD;
}