/*
CSS for Old Town Hair Designers in Tacoma, WA
For use on http://www.oldtownhairdesigners.com/ only

Author: Sarah M.
Portfolio: http://www.come-to-me.org/portfolio
*/

* {
margin: 0;
padding: 0;
}

body {
margin: 0;
background: #efbfdc url('images/bg.png');
font-family: Verdana, Arial, Sans-Serif;
font-size: 62.5%;
color: #000000;
text-align: center;
}

#page {
margin: 20px auto;
padding: 0;
width: 700px;
background-color: #f9e8f2;
font-size: 1.2em;
text-align: left;
border: 1px solid #822f5d;
}

#header {
width: 700px;
height: 165px;
background: #822f5d url('images/header.png') no-repeat center top;
}

#nav {
width: 700px;
height: 45px;
background-color: #d589b4;
border-top: 1px solid #822f5d;
border-bottom: 1px solid #822f5d;
}

#content {
padding: 20px;
width: 660px;
text-align: justify;
line-height: 1.4em;
}

* html #content {
\width: 700px; /* for IE5 and IE6 in quirks mode */
w\idth: 660px; /* for IE6 in standards mode */
}

#footer {
clear: both;
margin: 0 auto;
padding: 0;
width: 700px;
height: 50px;
background-color: #bc488a;
border-top: 1px solid #822f5d;
}


/* Nav */
#nav ul, #nav ul li {
margin: 0;
padding: 0;
height: 45px;
list-style: none;
line-height: 45px;
}

#nav ul li {
float: left;
display: block;
line-height: 45px;
} 

#nav ul li a {
display: block;
}

#nav ul li a span {
height: 45px;
display: none;
line-height: 45px;
}

#nav .home a {
width: 164px;
height: 45px;
background: #d589b4 url('images/home.png') no-repeat center top;
}

#nav .salon a {
width: 157px;
height: 45px;
background: #d589b4 url('images/salon.png') no-repeat center top;
}

#nav .services a {
width: 201px;
height: 45px;
background: #d589b4 url('images/services.png') no-repeat center top;
}

#nav .stylists a {
width: 178px;
height: 45px;
background: #d589b4 url('images/stylists.png') no-repeat center top;
}

#nav .home a:hover, #nav .homeh a {
width: 164px;
height: 45px;
background: #d589b4 url('images/homehover.png') no-repeat center top;
}

#nav .salon a:hover, #nav .salonh a {
width: 157px;
height: 45px;
background: #d589b4 url('images/salonhover.png') no-repeat center top;
}

#nav .services a:hover, #nav .servicesh a {
width: 201px;
height: 45px;
background: #d589b4 url('images/serviceshover.png') no-repeat center top;
}

#nav .stylists a:hover, #nav .stylistsh a {
width: 178px;
height: 45px;
background: #d589b4 url('images/stylistshover.png') no-repeat center top;
}


/* Footer */
#footer p {
margin: 0;
padding-top: 6px;
color: #f9e8f2;
font-size: 0.8em;
text-align: center;
}


/* Headers */
#header h1 {
display:none;
}

h2, h3, h4, h5 {
margin: 15px 0 5px 0;
}

h1 {
margin: 10px 0;
font-size: 1.8em;
}

h2 {
font-size: 1.5em;
}

h3 {
font-size: 1.2em;
}

h4 {
font-size: 1em;
}

h5, .small {
font-size: .8em;
}


/* Lists */
#content ul, #content ol {
margin: 0 0 0 10px;
padding: 0 0 0 10px;
}

#content ul {
list-style: none;
}

#content li {
margin: 5px 0 3px 10px;
}

#content ul li, #content ol li li {
padding-left: 10px;
background: url('images/bullet.png') no-repeat left;
background-position: 0 .5em;
}


/* Images */
p img {
padding: 0;
max-width: 100%;
}

img.alignleft, img.centered, img.alignright {
display: inline;
border: 1px #822f5d solid;
}

img.alignleft {
margin: 0 8px 2px 0;
float: left
}

img.centered {
margin: 2px auto;
display: block;
}

img.alignright {
margin: 0 0 2px 8px;
float: right;
}

.alignleft {
float: left
}

.centered {
text-align: center;
}

.alignright {
float: right;
}


/* Links */
a, a:link, a:visited {
color: #bc488a;
font-weight: bold;
text-decoration: none;
}

a:hover {
color: #d589b4;
}

a img {
border: none;
}


/* Classes, IDs, Tags, Extras */
hr, .skip {
display: none;
}

p {
margin: 11px 0;
}