@charset "UTF-8";
@import url(reset.css);
@import url(menu.css);

/******************************************************************************************************

										Market Hardware Core CSS

/******************************************************************************************************/

/* typography */
body { font-size: 0.75em /* 12px */; background: #a19c5a url(/design/header.gif) repeat-x; color: #523f23; font-family: Verdana, sans-serif; line-height: 1.5em; margin: 0 auto; }

h1, h2, h3, h4, h5, h6 { color: #523f23; margin-bottom: 5px; font-weight: 300; }
h1 { font-size: 1.5em /* 18px */; }
h2 { font-size: 1.4em /* 15px */; }
h3 { font-size: 1.3em /* 14px */; }
h4, h5, h6 { font-size: 1em /* 13px */; font-weight: bold; }

p, ul, ol { margin-bottom: 1.1em; } /* DO NOT RESIZE */
li { margin-bottom: 0.5em; }

a, a:visited { color: #4b471a; text-decoration: underline; }
a:hover, a:active { color: #4b471a; text-decoration: none; }

/* group (also known as clearfix) applies style to div's containing other floating elements - FLOAT CHILDREN LEFT AND CLEAR NONE */
.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.group { zoom: 1; display: block; }

/* layout */
#branding { position:relative; display: block; height: 311px; margin: 0 auto 3px; width: 838px; }
#branding h1 { margin: 0 auto; width: 838px; }
#branding h1 a { display: block; width: 302px; height: 260px; text-decoration: none; background: url(/design/logo.gif) no-repeat; text-indent: -99999px; }
#branding p { display: block; margin: 0 auto; width: 838px;  }
#branding p strong { font-size: 1.5em; font-weight: normal; }
#branding p a { text-decoration: none; font-size: 1.1em; }
#branding p a:hover { text-decoration: underline; }
#branding p * { width: 302px; display: block; text-align: center; }

.home #branding { background: url(/design/catdog.png) right center no-repeat; }
.different #branding { background: url(/design/why_were_different.jpg) right center no-repeat; }
.dogs #branding { background: url(/design/services_for_dogs.jpg) right center no-repeat; }
.cats #branding { background: url(/design/servicesforcats.jpg) 85% 50% no-repeat; }
.forms #branding { background: url(/design/forms.jpg)  85% 50% no-repeat; }
.tour #branding { background: url(/design/tour.jpg) right center no-repeat; }
.artices #branding { background: url(/design/articles.jpg) right center no-repeat; }
.request #branding { background: url(/design/request.jpg) 85% 50% no-repeat; }
.contact #branding { background: url(/design/contact.jpg) right center no-repeat; }

#callout ul, #callout li { margin: 0; padding: 0; text-indent: 0; list-style-type: none; }

#container { width: 838px; margin: 0 auto; background: url(/design/drip.gif); }
#leftcol, #rightcol { float: left; clear: none; display: inline; }
#leftcol { width: 230px; padding-bottom: 60px; margin-bottom: 1em; background: url(/design/creditcard.gif) bottom center no-repeat; }
#rightcol { margin-left: 30px; width: 545px; padding: 25px 0; }
#rightcol img { padding: 10px; }

/* * * * Customizable Menu Code  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#nav { display: block; width: 100%; background: #c58e4d; padding: 8px 0; font-size: 1.1em; font-weight: bold; border-bottom: 3px solid #c4be84; }
#nav ul {
	font-size:1em; /* prevents inheritence */
}	

#nav li {
	border-right: 0px solid #000; /* adds border to the right of each horiz level 1 menu item *//* set to 0px to remove */
}

#nav li:hover,
#nav li.hover {	
	background: #b48145; /* background color of hovered menu items */
}

#nav ul li.first  {
	border-left: none; /* no divider needed to the left of first list item */
}	

#nav ul li.last  {
	border-right: none; /* no divider needed to the right of first last item */
}	

#nav a {
	color:#e7dfae;	/* sets the color of all menu types */
	padding: .5em 8px; /* pads the link away from the list item - set vertical height in ems */
	text-decoration: none;
}	
#nav a:hover,
.home #nav #nav-home a,
.different #nav #nav-different a,
.dogs #nav #nav-dogs a,
.cats #nav #nav-cats a,
.forms #nav #nav-forms a,
.tour #nav #nav-tour a,
.articles #nav #nav-articles a,
.request #nav #nav-request a,
.contact #nav #nav-contact a {
	background:#b48145; /* background color of hovered menu items */
	color: #4b471a; /* MH CORE default. Developer should change */
}

/* start of drop style */
#nav li li { 
	background: #b48145;
}

#nav ul li ul li ul  {
	border-top:1px solid #000; /* sets the border-top of levels 3 and 4 of a horizontal menu - set to 0px to remove - for a vertical menu, you will set this for levels 1 - 4 below */
} 

#nav li li li { 
	background:#000; /* background color of the level 3 menu */
}

#nav li li li li { 
	background:#000; /* background color of the level 4 menu */
}

#nav li ul  {
	border-top: 1px solid #000; /* hack - adds a top border to the drop-downs for IE6 */
}	

#callout { padding-top: 20px; }
#callout a { color: #e7dfae; text-decoration: none; }
#callout a:hover { text-decoration: underline; }
#callout p a { display: block; margin-left: 20px; padding-left: 23px; background: url(/design/speechbaloon.gif) no-repeat;padding-top: 12px; }

#callout div { margin: 15px 3px; background: #6d683b; padding: 10px 43px; color: #e7dfae; }

#callout li { display: block; margin-left: 20px; margin-bottom: 20px; }
#callout li a { display: block; padding-left: 55px; line-height: 45px; }
#callout li.dog a { background: url(/design/icon-dog.gif) no-repeat; }
#callout li.cat a { background: url(/design/icon-cat.gif) no-repeat; }

#callout li.events {border-top: 1px solid #6D683B; padding-top: 15px; margin-right: 20px;}
#callout li.events a {background: url(/design/calendar.gif) no-repeat;}

/* ------ */

#footer { margin: 0 auto; font-size: 80%; text-align: center; color: #e7dfae; float: left; clear: both; width: 100%; background: #c48d4d url(/design/footer.gif) repeat-x; padding-top: 5px; overflow: hidden;  }
#footer p { margin: 0 1em 10px; }
#footer a, #footer a:visited { color: #4b471a; text-decoration: underline; }
#footer a:hover, #footer a:active { color: #4b471a; text-decoration: none; }

.breadcrumb { font-size:85%; padding-bottom: 10px; }
.breadcrumb a { outline: none; }
blockquote { margin: 10px 10px; padding: 5px; background: #f2f2f2; border-bottom: 1px solid #e2e2e2; border-right: 1px solid #e2e2e2; }
blockquote p { padding-left: 10px; }

@import url(form.css);