/* --------------------------------------
Basic Style Sheet for La de' Paws

version:	1.0
modified:	May 25, 2007
author:		Tammy C. Wilson
email:		info@agilewebdev.com
website:	http://www.agilewebdev.com
 -------------------------------------- */

/* Key color palatte
Red		(Main headings)						#D2242B
Brown	(Subheadings, Navbar background)	#862C38
Cream	(Background)						#FCF5E2
*/

/* Table of Contents
    * Global Styles  (body, paragraphs, lists, etc)
    * Header
    * Page Structure
    * Headings
    * Text Styles
    * Navigation
    * Forms
    * Comments
    * Extras
*/

/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/
/* -----------------------------------*/

/* This resets ALL padding & margins */
* {
	padding:0;
	margin:0;
}

/* This adds reasonable padding & margins */
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:.5em; }
li, dd { margin-left:5%; }
fieldset { padding: .5em; }

body {
	background-image: url(images/bkgrd_stripes.gif);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	min-width: 750px; /* Not supported in IE 5-6 */
}

img { border-style: none; }

strong { 
	color: #D2242B;
	font-size: 20px;
 }
 
#container { margin: 2%; }

#content {
	border: solid 2px #862C38;
	background-color: #FCF5E2;
/*	background-image: url(images/Paw_tile_cream.png); */
}

.clearthis { 
	clear: both;
	line-height: 0;
	height: 0; 
}

.about_sep { 
	background: url(images/pawDivider.gif) repeat-x;
	padding-top: 40px;
}

.left {
	margin: .5em;
	width: 50%;
	float: left;
/* IE 7 screws up the display of the content div and makes it larger on the right than the other divs on some pages only. This border seems to resolve the issue. */
	border: solid #FCF5E2; 
}

.right { margin: .5em; }

.section { 
	clear: both;
	margin: 15px 0;
}

p {	color: #000000; }

h1 {
	font-family: "Trebuchet MS", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	font-size: xx-large;
	font-variant: small-caps;
	font-weight: bold;
	color: #D2242B;
	text-align: center;
	margin-top: 20px;
}

h2 {
	font-family: "Trebuchet MS", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	font-size: x-large;
	font-weight: bold;
	color: #862C38;
}

h3 {
	font-family: "Trebuchet MS", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	font-size: large;
	font-weight: bold;
	color: #862C38;
}

h4 {
	font-family: "Trebuchet MS", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	font-size: 120%;
	font-weight: bold;
	color: #862C38;
	line-height: 2em;
}

ul { list-style: none; }

li {
	margin-left: 40px;
	line-height: 2em;
	background: url(images/brown_paw15.gif) no-repeat 0 50%;
	padding-left: 20px;
}

dt {
	margin-left: 53%;
	line-height: 2em;
	background: url(images/brown_paw15.gif) no-repeat 0 50%;
	padding-left: 20px;
}

.hours dt {
	margin-left: 0;
}

label, .label {
	font-variant: small-caps;
	color: #862C38;
	font-size: 90%;
	font-weight: bold;
}

body#home #home_nav a,
body#groom #groom_nav a,
body#create #create_nav a,
body#bakery #bakery_nav a,
body#boutique #boutique_nav a,
body#help #help_nav a,
body#about #about_nav a,
body#contact #contact_nav a {
	color: #D2242B;
 	background: url(images/red_paw15.gif) no-repeat 0 50%; 
	margin: 0 0 0 -20px;
/* Problems with IE 6, doesn't handle negative margins (in list items?). This makes the nav bar look acceptable, but
really has too much "space" in standards compliant browsers, not enough in IE6 and IE6 does not display the red_paw image */	
	text-indent: 15px;
	padding: 0px 0px 0px 20px; 
}

a:link { color: blue; }

#nav a:link { color: #EADB9A; }

#nav a:visited { 
	color: #D5B533;
	font-style: italic;
}

a:visited {	color: #006600; }

a:hover { color: #00CC66; }

#nav a:hover {
	color: #FCF5E2;
	font-style: italic;
}

#nav a:active, a:active { color: #D2242B; }

#nav {
	float: left;
	width: 100%;
	height: 35px;
	margin: 0;
	padding: 0;
	background: url(images/band_35.gif) repeat-x;
}

#nav li {
	float: left;
	margin: 9px 0px 0px 20px;
	padding: 0px 0px 0px 20px;
	font-size: 85%;
	line-height: 1em;
	background: url(images/cream_paw15.gif) no-repeat 0 50%;
	position: relative;
}

#nav a {
	float: left;
	display: block;
	margin: 0;
	padding: 0 4px 0 0;
	text-decoration: none;
	color: #EADB9A;
	font-weight: bold;
}

#header {
	background-color: #FCF5E2;
	padding: 10px;
	border: solid 2px #862C38;
}


.img_left { 
	float:left; 
	margin: 0px 20px 10px 20px;
}

.img_right { float: right; margin: 0 20px 10px 20px; }

#img_header { margin: 30px 0 0 30px; }

#footer {
	clear: both;
	font-size: 70%;
	font-style: italic;
	color: #862C38;
	text-align: center;
	line-height: 1em;
	padding: 5px 0px;
	border-top: solid 1px #862C38;
	border: solid 2px #862C38;
	background-color: #FCF5E2;
	background-image: url(images/Paw_tile_cream.png);
}

#footer img { margin-top: 10px; }

div.row {
	clear: both;
	margin-bottom: 5px;
}

div.row span.label {
	float: left;
	width: 150px;
	text-align: right;
}

address { 
	float: right;
	font-size: 75%;
	text-align: right; 
	margin-top: 20px; 
	color: #D2242B;
	font-weight: bold;
	line-height: 150%;
}

#form {
	clear: both;
	width: 590px; 
	border: 1px solid; 
	padding: 5px; 
	margin: 10px auto; 
	background-color: #EADB9A;
}

.collapsed { display: none; }

.req {
	color: #D2242B; 
	font-size: 80%;
}

.layer {
	position:absolute;
	width:35px;
	height:36px;
	visibility: hidden;
}

#Layer1 {
	left:1184px;
	top:229px;
}

#Layer2 {
	left:1131px;
	top:137px;
}

#Layer3 {
	left:998px;
	top:155px;
}

#Layer4 {
	left:973px;
	top:47px;
}

#Layer5 {
	left:838px;
	top:99px;
}

#Layer6 {
	left:739px;
	top:22px;
}

#Layer7 {
	left:674px;
	top:122px;
}

#Layer8 {
	left:570px;
	top:52px;
}
#Layer9 {
	left:454px;
	top:128px;
}

#links { 
	float: right;
	font-size: 70%; 
	margin-top: 100px; 
}