* {
	margin: 0;
	padding: 0;
}
body {
	background: #c90 url(http://muledesign.com/images/v3-body-bkgd.jpg) 0 0 repeat-x;
	font: small Helvetica, Arial, "Lucida Grande", sans-serif;
	color: #000;
}
blockquote {
	/*text-indent: 1em;*/
	margin: 20px 15px 20px 33px;
	padding:0 45px 0 8px;
	/*background: url(http://muledesign.com/images/v3-quotes.gif) no-repeat top left;*/
	border-left:1px solid #ccc;
}
/*#blogcontent blockquote p { margin-bottom:1em; }*/
a {
	color: #cc9900;
	text-decoration: none;
	outline: none;
}
a:hover {
	background: #fcf3dc;
	text-decoration: underline;
}

a img {
	border: 0;
}

.clearing {
	clear: both;
}

.clearfix:after {
	content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* basic styles for all <ul>s used as horizontal menus */
ul.hmenu {
	list-style-type: none;
}
	
	ul.hmenu li {
		float: left;
		width: auto;
		border-left: 1px solid #000;
		line-height: 1;
		padding-left: 1em;
		margin-right: 1em;
	}
	
	ul.hmenu li.first {
		border: 0;
		padding-left: 0;
	}


#container {
	width: 100%;
}
#banner,
#content .inner,
#footer {
	width: 950px;
	margin: 0 auto 0 auto;
}
/*.portfolio #banner,
.portfolio #content .inner,
.portfolio #footer {
	width: 950px;
}
*/
#banner {
	padding: 40px 0 28px 0;
	background-image: none;
	height: 79px;
	position: relative;
}
	#banner p a, #banner h1 a {
		display: block;
		background: transparent url(http://muledesign.com/images/v3-banner-logo.gif) 5000px 0 no-repeat;
		height: 79px;
		width: 5255px;
		margin-left: -5000px;
		border: none;
	}
 
/*  #banner ul { left: 570px;line-height: 0;list-style-type: none;height: 12px;position: absolute;top: 100px; }
    #banner li { border: 0;float: left;height: 11px;margin-right: 0;padding-left: 0; }
    #banner li.first { border-left: none; }
    #banner li a {
        background: url(http://www.muledesign.com/images/mule-menu.png) 0 0 no-repeat;
        border-left: 2px solid #f7e5b2;color: #2F2617;display: block;float: left;height: 11px;outline: none;text-indent: -5000px; }
    #banner li.first a { border-left: none;}
    #banner li a:hover { color: #f7e5b2; }
    #banner li#nav-about a { width: 85px; }
    #banner li#nav-about a:hover,
    #banner li#nav-about a.active { background-position: 0 -11px; }
    #banner li#nav-portfolio a { background-position: -87px 0;width: 82px; }
    #banner li#nav-portfolio a:hover, 
    #banner li#nav-portfolio a.active { background-position: -87px -11px; }
    #banner li#nav-weblog a { background-position: -171px 0;width: 95px; }
    #banner li#nav-weblog a:hover, 
    #banner li#nav-weblog a.active { background-position: -171px -11px; }
    #banner li#nav-contact a { background-position:-269px 0;width:79px; }
    #banner li#nav-contact a:hover, 
    #banner li#nav-contact a.active { background-position:-269px -11px; }
*/

#banner ul { list-style-type:none;position: absolute;right:0;top:100px; }
#banner li { border:0;float:left;margin-right:0;padding-left:0; }
#banner li.first { border-left:none; }
#banner li a { border-left:2px solid #f7e5b2;color:#2F2617;display:block;font-weight:bold;float:left;outline:none;text-transform:uppercase;margin-left:10px;padding-left:10px; }
	#banner li.first a { border-left:none;margin-left:0;padding-left:0; }
	#banner li a.active,
	#banner li a:hover { background:none;color:#f7e5b2;text-decoration:none; }

#content {
	clear: both;
	padding: 35px 0 80px 0;
	position: relative;
	color: #333; /*#f7e5b2;*/
	background-color: #fff;
	width: 100%;
	float: left;
}
#footer	{
	clear: both;
	padding: 30px 0 60px 0;
	color: #462d00;
}
	#footer p {
		float: left;
		margin-right: 10px;
		padding-left:30px;
		line-height: 1;
	}
	#footer ul.hmenu li {
		border-left-color: #462d00;
	}
	#footer li a {
		color: #f7e5b2;
	}
	#footer li a:hover {
		background: none;
		text-decoration: underline;
	}


li.first {
	border: 0;
	padding-left: 0;
}

a img, p a img {
	border: 0;
}

	#people {
		float: left;
		width: 300px;
	}

	.person {
		float: left;
		width: 130px;
		margin: 0 18px 18px 0;
	}
	.person img {
		display:block;
	}
	.personname {
		background: transparent url(/images/people/nameplates.png) 0 0 no-repeat;
		width: 130px;
		height: 42px;
	}

	.personname:hover {
		background: transparent url(/images/people/nameplates.png) 0 -42px no-repeat;
	}


	#erika .personname  { background-position: -130px 0; }
	#erika .personname:hover { background-position: -130px -42px; }
	#sandy .personname { background-position: -260px 0; }
	#sandy .personname:hover { background-position: -260px -42px; }
	#david .personname { background-position: -390px 0; }
	#david .personname:hover { background-position: -390px -42px; }
	#amber .personname { background-position: -520px 0; }
	#amber .personname:hover { background-position: -520px -42px; }
	#katie .personname { background-position: -650px 0; }
	#katie .personname:hover { background-position: -650px -42px; }


	.personname p {
		display: none;
	}

	#mike-pop, #erika-pop,
	#sandy-pop, #david-pop, 
	#amber-pop, #katie-pop {
		display: none;
	}
	.personinfo {
		position: absolute;
		top: 45px;
		left: 348px;
		width: 450px;
		border: 1px solid #666;
		background: #fff;
		line-height: 1.6;
		padding: 10px 15px 0 15px;
		color: #333;
		z-index: 5000;
	}
	.personinfo h3 {
		font-size: 2em;
		padding: 0;
		color: #a0721b;
		margin: 0;
	}
	.personsays {
		color: #432b00;
		font-weight: bold;
	}
	.personquote {
		margin: 4px 0;
	}
	.personinfo p {
		margin-bottom:8px;
	}
	.personinfo ul {
		list-style-type: none;
		margin: 8px 0 8px 0;
		font-size: 95%;
	}

	.personinfo ul li {
		padding-left: 15px;
		background: url(/images/v3-bullet-arrow.gif) 0 center no-repeat;
	}

	.personinfo ul li a {
		color: #432b00;
	}

	.personinfo .closer {
		padding: 2px 10px;
		margin: 3px -15px 2px -15px;
		text-align: right;
	}
	.personinfo .closer a {
		color: #a0721b;
		text-decoration: none;
		padding-left: 16px;
		background: url(/images/v3-close-pop-up.gif) 0 center no-repeat;
	}

#who-copy.faded #top {
	background-color: #F7EFD4;
	color: #9F9376;
}

#who-copy.faded #bottom {
	background-color: #fcf6ea;
	color: #d9d1b6;
}

#who-copy {
	float: left;
	width: 500px;
/*	padding: 5px 0;*/
}

#who-copy h1 span, #who-copy h2 span {
	display: none;
}
#who-copy p {
	line-height: 1.6;
	margin-left: 3px;
}
#who-copy #top {
	background-color: #f7e5b2;
	color: #805a17;
	font-size: 110%;
	padding: 30px 24px 30px;
	margin-bottom: 22px;
}

#who-copy #top h1 {
	background: url(/images/v3-about-who-we-are.gif) 0 0 no-repeat;
	width: 239px;
	height: 30px;
	margin-bottom: 14px;
}
#who-copy #bottom {
	background-color: #fcf3dc;
	color: #805a17;
	font-size: 105%;
	line-height: 1.6;
	padding: 30px 24px 30px;
	margin-bottom: 22px;
}
#who-copy #bottom h2 {
	background: url(/images/v3-about-why-were-here.gif) 0 0 no-repeat;
	width: 228px;
	height: 22px;
	margin-bottom: 10px;
}
#who-copy #hire-us-button {
	text-align: right;
}

/* contact page - /reach_us/ - */

#contact-form, #directions-content, #photos-content {
	background-color: #f7e5b2;
}
#contact-form {
	float: right;
	width: 410px;
	padding: 20px;
	color: #805a17;
}
	#contact-form a {
		color: #c90;
		text-decoration: underline;
	}
	#contact-form h1 {
		width: 5250px;
		height: 30px;
		margin: 0 0 18px -5000px;
		background: url(/images/v3-title-contact-us.gif) 5000px 0 no-repeat;
	}
	#contact-form fieldset {
		border: 0;
		border-top: 1px solid #805a17;
		margin-top: 18px;
		padding-top: 18px;
	}
	#contact-form .tell-us {
		background-color: #ffc;
		margin-bottom: 12px;
	}
	#contact-form input.tell-us, #contact-form select.tell-us {
		width: 75%;
	}
	#contact-form textarea.tell-us {
		width: 100%;
		height: 100px;
	}
	#contact-form .required {
		font-weight:bold;
		text-transform: uppercase;
		color: #c90;
	}
	#contact-form label {
		display:block;
		color: #c90;
		text-transform: uppercase;
		margin-bottom: 2px;
		font-size: .9em;
	}
	#contact-form div.footer {
		text-align: right;
		padding-bottom: 10px;
	}
	#contact-form p.instructions {
		font-size: .9em;
		margin-top: 2px;
		margin-bottom: 14px;
	}
	#contact-error {
		list-style-type: none;
	}
	#contact-error li {
		margin: 10px 0;
	}
	#contact-form input.error,
	#contact-form textarea.error {
		border: 2px solid #f00;
	}
	#contact-form label.error,
	#contact-form div.error {
		color: #f00;
	}
#office-directions {
	float: left;
	width: 450px;
	color: #805a17;
}
#office-banner {
	height: 40px;
	width: 434px;
	padding: 0 5px 8px 10px;
}
#office-banner h2 {
	font-size: 110%;
	color: #c90;
	float: left;
	padding: 0 6px 5px 0;
}
#office-banner p {
	border-left: 3px solid #f7e5b2;
	font-size: 100%;
	float: left;
	padding: 0 0 0 6px;
	line-height:1.2em;
}
#office-banner abbr {
	text-decoration: none;
	border: 0;
}
#office-banner .tel .value {
	margin-right: 10px;
}
#office-tabs {
	list-style-type: none;
}
#office-tabs li {
	float: left;
	width: auto;
	background-color: #fcf3dc;
}
#office-tabs li a {
	display: block;
	width: 130px;
	height: 10px;
	padding: 10px;
	color: #c90;
	text-transform: uppercase;
}
#office-tabs li.active {
	background-color: #f7e5b2;
}
#office-tabs li.active a {
	color: #805a17;
}
#office-tabs li#photos a {
	background-image: url(/images/v3-txt-studio-photos.gif);
	background-position: 10px center;
	background-repeat: no-repeat;
}
#office-tabs li#directions a {
	background-image: url(/images/v3-txt-maps-directions.gif);
	background-position: 10px center;
	background-repeat: no-repeat;
}
#office-tabs li a span {
	display: none;
}
#directions-content { 
	display: none;
	clear: left;
	padding: 12px; 
}
	#directions-content a {
		color: #c90;
		text-decoration: underline;
	}
	#directions-content a.toggle-on {
		font-weight: bold;
		color: #805a17;
		text-decoration: none;
	}
	#wherefrom {
		font-weight: bold;
		color: #805a17;
		margin: 10px 0 8px 0;
	}
	#starting-points {
		list-style-type: none;
		margin-bottom: 10px;
	}
	#starting-points a.toggle {
		padding-left: 12px;
		background: url(/images/v3-expand-up.gif) left center no-repeat;
	}
	#starting-points li {
		margin-bottom: 5px;
	}
	#starting-points li ol {
		padding-left: 30px;

	}
	#directions-content ol {
		margin: 8px 0;
	}
	#directions-content ol li {
		margin-bottom: 4px;
	}
#photos-content {
	display: block;
	clear: left;
	padding: 12px;
}
	#imagegallery {
		list-style-type: none;
	}
	#imagegallery li {
		float: left;
		padding: 10px 5px 0 6px;
	}
	
	#imagegallery li a img {
		outline: none;
	}
	#imagegallery li a:hover img {
		margin: -3px;
		border: 3px solid #c90;
	}