/* ==========================================================
Master Stylesheet

website:   Celtic Carma 2010
version:   B01
updated:   June 30 2010

============================================================ */

/* Reset and General Architecture */
blockquote,body,caption,div,dl,dt,dd,form,fieldset,h1,h2,h3,h4,h5,h6,html,li,ul,ol,p,pre,textarea,table,td,th {margin:0; padding:0;}
a{outline: none; text-decoration: none;}
a IMG{border: none;}
ul{list-style-type: none; margin: 0px 0px 24px 0px;}
/*ul span{position: relative; left: -5000px;}*/
.clearfix:after{content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
html{height: 101%;}
body{color: #000; background: #fff url(../i/str/bdbg01.jpg) top center repeat-y; font-family: Georgia, "Times New Roman", Times, serif; line-height: 24px; text-align: center;}

#wrapper{position: relative; text-align: left; font-size: 11px; height: auto; margin: auto; width: 920px;}
#header, ul#navigation, #text, #aveda{position: absolute;}
#footer, #instep{height: 70px;}

body#home #wrapper{height: 700px; background: url(../i/str/contentbg01.jpg) top center no-repeat;}
body#services #wrapper{height: 700px;background: url(../i/str/contentbg02.jpg) top center no-repeat;}
body#products #wrapper{height: 670px; background: url(../i/str/contentbg03.jpg) top center no-repeat;}

#header{top: 30px; left: 0px;  width: 410px; height: 39px;}
#header IMG{margin-left: 30px;}

ul#navigation{top: 50px; left: 500px; width: 400px; height: 24px;}
ul#navigation li{float: left; display: block; height: 24px; padding: 0px 15px 0px 15px;}
ul#navigation li.home{width: 40px; }
ul#navigation li.services{width: 52px;}
ul#navigation li.products{width: 58px;}
ul#navigation li.appt{width: 120px;}
ul#navigation li a{display: block; width: auto; height: 24px;}
ul#navigation li a, a:link a:visited a:active{font-size: 13px; color: #666;}
ul#navigation li a:hover, ul#navigation li a.crt{color: #691509;}

h1{font-size: 17px; margin-bottom: 36px;}
h1 span{font-family: "Palatino Linotype", georgia, serif; font-style: italic; font-size: 16px;}

#text {width: 400px; top: 110px; left: 32px; line-height: 23px;}
#text p{margin-bottom: 18px;}

/* Services List */
dl{width: 400px; margin: 0px; padding: 0px; line-height: 36px;}
dt{float: left; width: 200px;}
dd{float: right; width: 200px;}

/* Aveda Products */
#aveda{width: 920px; height: 522px; top: 105px;}

#footer{width: 100%;}
#instep{width: 960px; margin: auto; text-align: left; background: url(../i/str/footerbg01.jpg) top center no-repeat; font-size: 11px;}
#instep p.facebook{margin-left: 50px; padding-bottom: 2px; padding-left: 30px; background: url(../i/str/facebook.jpg) 0px 2px no-repeat;}
#instep p#address{position: relative; top: -50px; left: 500px; width: 200px;}
#instep p a, a:link a:visited a:active{color: gray;}
#instep p a:hover{color: #691509;}