/* /////////////////////////////////
	Rhonda Ingle CSS 
	by Benek Lisefski
	http://www.benekdesign.com
///////////////////////////////// */

/* reset whitespace */
* { 
	margin:0;
	padding:0;
}

/* /////////////////////////////////
	LAYOUT
///////////////////////////////// */

html, body {
	height: 100%;
	overflow: auto;
}

body {
	font: normal 12px arial, 'lucida sans unicode', 'lucida grande', trebuchet, "sans serif";
	color: #000;
	background: #fff;
	line-height: 18px;
}

.center {
	width: 780px;
	margin: 0 auto;
}

#content {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: auto;
}

.left {
	float: left;
}

.right {
	float: right;
}

.clearDiv { 
	clear: both; 
	height: 0; 
	line-height: 0px;
	font-size: 0px;
	text-indent: -5000px;
}

.clear {
	clear: both;
}

.hidden {
	display: none;
}

#top {
	height: 118px;
	padding-top: 1px;
}

/* /////////////////////////////////
	TEXT + HTML
///////////////////////////////// */

h1 {
	font: normal 60px arial;
	margin: 24px 0 24px;
	color: #fff;
	letter-spacing: -1px;
}

#h1whatwedo {
	width: 281px;
	height: 41px;
	background: transparent url('../i/h1-whatwedo.gif') no-repeat left top;
	text-indent: -5000px;
	overflow: hidden;
	margin-top: 36px;
	margin-bottom: 40px;
}

#h1projects {
	width: 378px;
	height: 118px;
	background: transparent url('../i/h1-projects.gif') no-repeat left top;
	text-indent: -5000px;
	overflow: hidden;
	margin-top: 0px;
	margin-bottom: 0px;
}

#h1whattheysaid {
	width: 345px;
	height: 54px;
	background: transparent url('../i/h1-whattheysaid.gif') no-repeat left top;
	text-indent: -5000px;
	overflow: hidden;
	margin-top: 36px;
	margin-bottom: 0px;
}

h2 {
	font: normal 36px arial;
	margin: 24px 0 18px 0;
	color: #f37321;
	letter-spacing: -1px;
}

#h2feelathome {
	width: 370px;
	height: 34px;
	background: transparent url('../i/h2-feelathome.gif') no-repeat left top;
	text-indent: -5000px;
	overflow: hidden;
	margin-top: 32px;
}

#h2gettingstarted {
	width: 270px;
	height: 33px;
	background: transparent url('../i/h2-gettingstarted.gif') no-repeat left top;
	text-indent: -5000px;
	overflow: hidden;
	margin-top: 24px;
}

#h2gettingintouch {
	width: 219px;
	height: 33px;
	background: transparent url('../i/h2-gettingintouch.gif') no-repeat left top;
	text-indent: -5000px;
	overflow: hidden;
	margin-top: 46px;
}

h3 {
	font: bold 18px arial;
	margin: 24px 0 18px 0;
	color: #000;
	font-style: italic;
}

h4 {
	font: bold 12px arial;
	margin: 18px 0 12px;
	color: #000;
}

p, ul, ol {
	margin: 12px 0;
}

ul {
	list-style-type: none;
}

ul li {
	margin-bottom: 2px;
}

p.em {
	color: #f37321;
	font-style: italic;
	overflow: visible;
	zoom: 1;
}

p.small {
	font-size: 11px;
}

ul.bullet li {
	padding-left: 16px;
	background: transparent url('../i/bullet.gif') no-repeat left 6px;
}


/* /////////////////////////////////
	LINKS
///////////////////////////////// */

a img { border: none }

a,
a:visited {
	color: #f37321;
	text-decoration: none;
}

a:hover {
	color: #d85603;
	text-decoration: none;
}

a:focus {
	outline: 0;
}

p a,
p a:visited {
	font-weight: bold;
	text-decoration: underline;
}

p a:hover {
	color: #d85603;
	text-decoration: underline;
}

/* /////////////////////////////////
	HEADER
///////////////////////////////// */

#logo {
	display: block;
	width: 183px;
	height: 56px;
	background: transparent url('../i/interior-design.gif') no-repeat left top;
	text-indent: -5000px;
	margin: 34px 0 0 0;
}

/* /////////////////////////////////
	NAV
///////////////////////////////// */

ul#nav {
	margin: 0;
	list-style-type: none;
	font: normal 14px tahoma, arial;
	width: 183px;
	height: 173px;
	background: #f37321;
	padding-top: 10px;
	position: fixed;
	left: 50%;
	margin-left: -398px;
	top: 119px;
	z-index: 100;
	
}

* html ul#nav {
	position: absolute;
}

ul#nav li {
	display: block;
	margin: 0;
}

ul#nav li a,
ul#nav li a:visited {
	color: #fff;
	font: normal 10px arial;
	text-transform: uppercase;
	background: transparent;
	display: block;
	width: 153px;
	padding: 5px 15px;
}

ul#nav li a.current,
ul#nav li a.current:visited {
	background: #f58a28;
	text-decoration: none;
}

ul#nav li a:hover {
	background: #f58a28;
	text-decoration: none;
}

#projectNav {
	width: 171px;
	float: right;
	background: #eeebe6;
	font-size: 11px;
	margin: 0 0 24px 0;
	padding-bottom: 12px;
}

#projectNav li {
	margin-left: 20px;
	border-top: solid 1px #fff;
	padding: 5px 20px 3px 0;
}

#projectNav li a.current {
	color: #000;
	font-weight: bold;
}

#clientNav {
	font-size: 11px;
	margin: 376px 0 24px 0;
}

#clientNav li {
	margin-left: 20px;
	border-bottom: solid 1px #eeebe6;
	padding: 4px 20px 4px 0;
}

#clientNav li a.current {
	color: #000;
	font-weight: bold;
}

/* /////////////////////////////////
	CONTENT 
///////////////////////////////// */

.col-1-2 {
	width: 378px;
}

.col-2-3 {
	width: 378px;
}

.col-2-4 {
	width: 574px;
}

.col-3-4 {
	width: 402px;
}

.col-4 {
	width: 195px;
}

.padLeft1 {
	padding-left: 207px;
}

.padLeft2 {
	padding-left: 378px;
}

.marginLeft1 {
	margin-left: 207px;
}

.padLeftText {
	margin-left: 26px;
}

.box {
	padding: 8px 0 20px;
	background: #fff;
}

.box p,
.box ul,
.box h2, 
.box h4 {
	margin-left: 26px;
	margin-right: 0;
}

.dark {
	background: #eeebe6 url('../i/bg-stripe.gif') repeat-y left top;
	padding-bottom: 28px;
}

.dark p,
.dark p.em,
.dark ul,
.dark h4 {
	margin-left: 46px;
	margin-right: 26px;
}

#home {
	background: transparent url('../i/banner.jpg') no-repeat left top;
	padding: 403px 0 24px 0;
}

#home p {
	margin-right: 66px;
}

#services {
	height: 889px;
	background: transparent url('../i/bg-services.jpg') no-repeat left top;
	padding: 1px 0;
}

#services p.em {
	margin-right: 20px;
}

#started {
	margin-top: -16px;
	margin-right: -1px;
}

#services #started p.em {
	margin-right: 26px;
}

#projects {
	background: #f7f5f2 url('../i/bg-stripe2.gif') repeat-y left top;
	margin-bottom: 24px;
	min-height: 500px;
	display: none;
}

#projects .col-3-4 {
	background: #f7f5f2 url('../i/bg-projects.jpg') no-repeat -378px top;
	padding-top: 26px;
}

.projectDetails {
	margin: 0 26px;
	padding: 0 0 26px 0;
}

.thumbGrid {
	margin-right: -26px;
	width: 375px;
	overflow: hidden;
	padding-top: 18px;
}

a.thumb {
	display: block;
	float: left;
	width: 100px;
	height: 100px;
	position: relative;
	margin: 0 20px 20px 0;
}

a.thumb .mag{
	display: block;
	width: 21px;
	height: 21px;
	background: transparent url('../i/mag.png') no-repeat right top;
	z-index: 50;
	position: absolute;
	top: -10px;
	right: -11px;
}

a.thumb img {
	border: solid 1px #f7f5f2;
	display: block;
}

a.thumb:hover img {
	border-color: #000;
}

#clients {
	background: transparent url('../i/bg-clients.jpg') no-repeat left top;
	padding: 1px 0 0;
	margin-top: 26px;
}

#clients p.intro {
	margin: 24px 170px 0 0;
	height: 207px;
}

.testimonial {
	padding: 0 26px 0 0;
	font-size: 11px;
}

.testimonial .dark {
	margin: 28px 0 0 0;
	padding-bottom: 1px;
}

.testimonial .dark p.em {
	margin-bottom: 0;
}

#contactTop {
	clear: both;
	height: 18px;
	overflow: hidden;
	background: transparent url('../i/bg-contact-top.jpg') no-repeat left top;
	margin-top: -1px;
}

#contactTop .dark {
	width: 352px;
	height: 18px;
	padding: 0;
	margin-top: 0;
	margin-bottom: 0;
	color: #ddd7cd;
}

#contact {
	background: transparent url('../i/bg-contact.jpg') no-repeat left -18px;
	height: 887px;
	padding-top: 1px;
}

#contact h2 {
	color: #fff;
}

#contact .intro {
	font-style: italic;
	line-height: 24px;
	margin-right: 26px;
}

#contact .intro strong {
	font-size: 16px;
}

/* /////////////////////////////////
	FORMS
///////////////////////////////// */

form.box {
	margin-top: 24px;
}

fieldset {
	border: 0;
}

#contact .box ul {
	margin: 0;
	padding: 12px 0;
}

#contact .box ul li {
	width: 402px;
	float: left;
	clear: both;
	margin-bottom: 6px;
}

label { 
	display: block;
	float: left;
	clear: left;
	font: bold 12px arial;
	color: #000;
	margin: 6px 0 0 26px;
	display: inline;
}

input.input {
	display: block;
	float: right;
	font: normal 12px arial;
	background: #eeebe6;
	border: 0;
	border-right: solid 12px #ddd7cd;
	color: #000;
	padding: 8px 6px;
	width: 250px;
}

textarea.input {
	display: block;
	float: right;
	font: normal 12px arial;
	background: #eeebe6;
	border: 0;
	border-right: solid 12px #ddd7cd;
	padding: 8px 6px;
	width: 250px;
	height: 180px;
}

a.button,
a.button:visited {
	font: normal 10px arial, tahoma;
	text-transform: uppercase;
	background: #f58a28;
	color: #fff;
	border-right: solid 12px #f37321;
	margin: 6px 0 0;
	padding: 6px 12px;
	display: block;
	float: right;
}

a.button:hover {
	background: #f7962b;
	border-color: #f58a28;
	cursor: pointer;
}


/* /////////////////////////////////
	FOOTER
///////////////////////////////// */

#footer {
	clear: both;
	margin: 18px 0 0 26px;
	height: 50px;
}

.valid{ border: 2px solid green !important; }
.invalid{ border: 2px solid #800 !important; }
.notice {color: green; font-size: 1.2em;font-weight: bold;}