/*  
Theme Name: Creative Interiors Inc. website
Theme URI: http://www.creativeinteriorsonline.com/
Description: Creative Interiors Inc. WordPress Theme
Version: 1
Author: Jeff Walsh
Author website: http://www.eyegodesign.com/
*/


/* Meyer Resets v1.0 | 20080212
---------------------------------------------------------------------------- */	
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
	

/* General
---------------------------------------------------------------------------- */
body {
	font-size: 11px;
	font-family: Verdana, Helvetica, Arial, Geneva, sans-serif;
	background: #303 url('../images/bg-body.jpg') repeat-x top left;
	color: #333;
	}

p {	line-height: 2; }

a:link { color: #996600; text-decoration: underline; }
a:visited { color: #996600; text-decoration: underline; }
a:hover { color: #CC9900; text-decoration: underline; }

em { font-style: italic; }
strong { font-weight: bold; }
.superscript { font-size: 60%; line-height:1; vertical-align:top;}

ul { list-style: disc; margin-bottom: 12px; }
li { margin: 0 0 5px 0; line-height: 1.3; margin-left: 14px; }

p.intro {
	text-align:justify;
	font-size: 13px;
	line-height: 2.2;
	padding-bottom: 20px;
	margin-bottom: 30px;
	border-bottom: 1px dashed #ccc;
	}

.portrait { border: 3px solid #c93;	}


.twocol-first, .twocol-second {
	width: 200px;
	float: left;
	}
.twocol-first {
	width: 470px;
	margin-right: 30px;
	}
.twocol-first h2, .twocol-second h2 {
	margin-bottom: 8px;
	font-size: 13px;
	color: #656;
	}
.twocol-first p, .twocol-second p {
	margin-bottom: 12px; 
	text-align: justify;
	}
.twocol-second p {
	text-align:left;
	line-height: 1.5;
	}





/* Structure
---------------------------------------------------------------------------- */
#wrap {
	width: 812px;
	margin: 0 auto 20px auto;
	background: url('../images/bg-wrap.gif') repeat-y top left;
}
#logobox {
	width: 800px;
	height: 90px;
	background: #fff url('../images/bg-logobox.jpg') repeat-x top left;
	position: relative;
	left: 6px;
}
#logo {
	width: 353px;
	height: 90px;
	margin: 0 auto;
	padding: 0 2px 0 0;
	background: url('../images/bg-logo.jpg') no-repeat top left;
}
#banner {
	width: 812px;
	height: 76px;
}
#nav {
	width: 800px;
	height: 47px;
	background: #fff url('../images/bg-nav.jpg') repeat-x top left;
	position: relative;
	left: 6px;
	text-align: center;
}
#content {
	width: 700px;
	margin-top: 46px;
	margin-left: 56px;
}
#footer {
	width: 812px;
	height: 70px;
	margin-top: 40px;
	background: url('../images/bg-footer.gif') no-repeat bottom left;
}

/* banner
---------------------------------------------------------------------------- */
#banner {	
	background-color: #fff; 
	background-repeat: no-repeat;
	background-position: top left; 
}
#pghome #banner {background-image: url('../images/bg-banner-home.jpg');}
#pgabout #banner {background-image: url('../images/bg-banner-about.jpg');}
#pgservices #banner {background-image: url('../images/bg-banner-services.jpg');}
#pgshowcase #banner {background-image: url('../images/bg-banner-showcase.jpg');}
#pgblog #banner,
#pg404 #banner {background-image: url('../images/bg-banner-blog.jpg');}
#pgcontact #banner {background-image: url('../images/bg-banner-contact.jpg');}


/* nav
---------------------------------------------------------------------------- */

#nav ul {
	list-style: none;
	width: 275px;
	margin: 0 auto;
	padding: 0 0 0 8px;
}
#nav li { 
	float: left;
	line-height: 1;
	margin: 0;
}
#nav li a { 
	height: 47px;
	display: block;
	background-image: url('../images/bg-navlinks.jpg');
	background-repeat: no-repeat;
}
#nav li a span {
	position: absolute;
	display: block;
	top: -10000px;
	left: -10000px;
	font-size: 1px;
}	
#nav li#navhome a:link, #nav li#navhome a:visited { width: 59px; background-position: 0 0; }
#nav li#navhome a:hover, #pghome #nav li#navhome a { width: 59px; background-position: 0 -47px; }

#nav li#navabout a:link, #nav li#navabout a:visited { width: 62px; background-position: -62px 0; }
#nav li#navabout a:hover, #pgabout #nav li#navabout a { width: 62px; background-position: -62px -47px; }

#nav li#navservices a:link, #nav li#navservices a:visited { width: 75px; background-position: -121px 0; }
#nav li#navservices a:hover, #pgservices #nav li#navservices a { width: 75px; background-position: -121px -47px; }

#nav li#navshowcase a:link, #nav li#navshowcase a:visited { width: 84px; background-position: -196px 0; }
#nav li#navshowcase a:hover, #pgshowcase #nav li#navshowcase a { width: 84px; background-position: -196px -47px; }

#nav li#navblog a:link, #nav li#navblog a:visited { width: 54px; background-position: -280px 0; }
#nav li#navblog a:hover, #pgblog #nav li#navblog a { width: 54px; background-position: -280px -47px; }

#nav li#navcontact a:link, #nav li#navcontact a:visited { width: 71px; background-position: -334px 0; }
#nav li#navcontact a:hover, #pgcontact #nav li#navcontact a { width: 71px; background-position: -334px -47px; }



/* Headline image replacement
---------------------------------------------------------------------------- */
h1 {
	width: 700px;
	height: 21px;
	margin-bottom:4px;
	background-color: transparent;
	background-image: url('../images/bg-hdr-h1-sprite.gif');	
	background-repeat: no-repeat;	
	text-indent: -9999px;
	}
#pghome h1 {background-position: 0 0;}
#pgabout h1 {background-position: 0 -21px;}
#pgservices h1 {background-position: 0 -42px;}
#pgcontact h1 {	background-position: 0 -63px;}

	
h2 {
	width: 470px;
	height: 18px;
	margin-bottom:4px;
	background-color: transparent;
	background-image: url('../images/bg-hdr-h2-sprite.gif');	
	background-repeat: no-repeat;	
	text-indent: -9999px;
	}	

#pghome h2 {width: 156px;}		
h2#hdr-resid-home {background-position: 0 0;}
h2#hdr-commer-home {background-position: 0 -18px;}

#pgabout h2 {width: 120px; margin: 0 0 2px 147px; line-height: 1;}
h2#hdr-rachel-about {background-position: 0 -36px;}
	
h2#hdr-window-services {background-position: 0 -54px;}
h2#hdr-floor-services {background-position: 0 -72px;}
h2#hdr-walls-services {background-position: 0 -90px;}
h2#hdr-light-services {background-position: 0 -108px;}
h2#hdr-furn-services {background-position: 0 -126px;}
h2#hdr-kitchen-services {background-position: 0 -144px;}
h2#hdr-custom-services {background-position: 0 -162px;}
h2#hdr-cleaning-services {width: 188px; background-position: 0 -180px;}
	


h3#hdr-sidebar-service,
h3#hdr-sidebar-inspiration,
h3#hdr-sidebar-contact {
	width:200px; height:44px;
	margin:0 0 20px 0;
	background-color: transparent;
	background-image: url('../images/bg-hdr-sidebar-sprite.jpg');	
	background-repeat: no-repeat; 
	text-indent: -9999px;
}
h3#hdr-sidebar-inspiration {background-position: 0 0;}
h3#hdr-sidebar-service {background-position: 0 -44px;}
h3#hdr-sidebar-contact {background-position: 0 -88px;}



/* Home
---------------------------------------------------------------------------- */

#pghome p.intro {
	text-align:justify;
	font-size: 13px;
	line-height: 2.2;
	margin-bottom: 20px;
}
#pghome .twocol-first p, #pghome .twocol-second p {
	text-align: justify;
	margin-bottom: 12px;
}
#pghome .twocol-img {
	width: 334px;
	padding: 3px;
	margin-bottom: 18px;
	background-color: #c93;
}
#pghome .twocol-img img {
	border: 1px solid #fff;
}
#pghome .twocol-first, #pghome .twocol-second {
	width: 340px;
	float: left;
}
#pghome .twocol-second p {
	text-align: justify;
	line-height: 2;
	}
#pghome .twocol-first {
	margin-right: 20px;
}
#pghome #section {
	width: 700px;
	padding-top: 16px; 
	margin-top: 25px;
	float: left;
	background: url('../images/bg-section.jpg') no-repeat top left;
}
#pghome #section-hdr {
	width: 40px;
	height: 28px;
	margin-left: 12px;
	margin-right: 48px;
	float: left;
	background: url('../images/bg-section-hdr-blog.jpg') no-repeat top left;
}
#pghome #section .post {
	width: 175px;
	margin-right: 12px;
	padding-left: 12px;
	float: left;
	border-left: 1px solid #ccc;
}
#pghome #section .post h3 {
	color: #711;
	margin-bottom: 12px;
}
#pghome #section .post p {
	margin-bottom: 12px;
}
#pghome #section .post p.readfull {
	margin-bottom: 0;
	font-size: 9px;
	line-height: 1;
}

#pghome #section .post p.readfull a:link { color: #999; text-decoration: none; }
#pghome #section .post p.readfull a:visited { color: #999; text-decoration: none; }
#pghome #section .post p.readfull a:hover { color: #666; text-decoration: underline; }



/* About
---------------------------------------------------------------------------- */

#pgabout .title { line-height: 1; font-weight: bold; color: #757; color: #545; color: #656;}

#pgabout .portrait { 
	float: left; 
	margin: 0 15px 0 0; 
	}


	
/* Services
---------------------------------------------------------------------------- */


	
/* Contact
---------------------------------------------------------------------------- */
#pgcontact #section {
	padding: 2px 0 1px 0;
	margin: 0 0 15px 0;
	border: 1px solid #C3B6C3;
	border-style: solid none;
	}

span.required-directions, span.required  { font-size: 10px; color: #999; }
span.required-directions { float: right; position: relative; top: -5px; }
		
.twocol-first .form-error, .twocol-first .form-msg { margin: 0 0 15px 0; padding: 15px 0 0 0; border: 1px solid #C3B6C3; border-style: solid none none none; }

.form-error strong, .twocol-first .form-error {color: #656;}
.form-msg strong, .twocol-first .form-msg { color: #c93; } 
.form-field-error { display: block; margin: 4px 0; font-weight: bold; line-height: 1; color: #656; }


#contact-form label { display: block; float: left; width: 180px; margin: 0 20px 0 0; line-height: 1; }	
#contact-form p.form-row { clear: left; margin: 0 0 20px 0;}

#contact-form p.form-row { 
	margin: 0 0 1px 0;
	padding: 14px 10px 14px 14px;
	background: #F1EFF1 url("../images/bg-form-row.gif") no-repeat;
	}

#contact-form input, #contact-form textarea { 
	width: 230px; padding: 4px; border: 1px solid #999; 
	font-size: 11px; font-family: Verdana, Helvetica, Arial, Geneva, sans-serif;
	} 
#contact-form input:focus, #contact-form textarea:focus { border: 1px solid #666; } 

#contact-form .form-button input { width: 95px; padding: 0; border-style: none; }	

#pgcontact .twocol-second h3 { margin: 0 0 4px 0; }	
#pgcontact .twocol-second h3#hdr-sidebar-contact {margin:0 0 20px 0;}
#pgcontact .twocol-second h4 { margin: 0 0 3px 0; padding: 0; font-weight: bold; color: #666; line-height: 1.5;}


/* Footer
---------------------------------------------------------------------------- */
#footer {
	width: 812px;
	height: 70px;
	margin-top: 40px;
	background: url('../images/bg-footer.gif') no-repeat bottom left;
}
#footer p {
	width: 700px;
	margin-left: 56px;
	padding-top: 12px;
	text-align: center;
	border-top: 1px solid #ddd;
	font-size: 10px;
	line-height: 1.3;
	color: #999;
}
#footer p.sitemeta {
	padding-top: 4px;
	border-style: none;
}


#footer a:link { color: #999; text-decoration: none; }
#footer a:visited { color: #999; text-decoration: none; }
#footer a:hover { color: #666; text-decoration: underline; }







/* General
---------------------------------------------------------------------------- */
.hide {
	position: absolute;
	display: block;
	top: -10000px;
	left: -10000px;
	font-size: 1px;
}
.fl { float: left; }
.fr { float: right; }
img.fl, img.fr { 
	position: relative; top: 7px; 
	border: 3px solid #c93;
	}
img.fl { margin: 0 15px 10px 0; }
img.fr { margin: 0 0 10px 15px; }
.clear { clear: both; }



