@charset "UTF-8"; /* CSS Document */

/*** some people may not like to clear all of their padding and margin spacing but I do, I want to have full control ****/

*{
margin:0px;
padding:0px;
}

a{
	outline:none;
}

a:link, a:visited{
	color:#000;
	text-decoration:underline;
}

a:active, a:hover{
	color:#000;
	text-decoration:none;
}

.float-left{
	float:left;
	margin-left:40px;
	margin-right:15px;
}

.paypal{
	margin:-10px 0px 20px 40px;
	
}

.clear{
	clear:both;
}

/*** I usually do center aligned designs so I am going to set the container to sit in the middle of the page ****/

body {
	background:url(images/straw.jpg) top center no-repeat; 
	background-color:#f7e7c6;
	font-family:Arial, Helvetica, sans-serif;
}

#bigcontain{
	width:1024px;	
	margin:0px auto;
}

#container{
width:1017px;
margin:0px auto; /**** learn css shortcuts, it will make your life easier ****/
background:url(images/paper-bg-top.png) top center no-repeat;
}

    #inside-container{
    width:1017px;
    margin:0px auto; /**** learn css shortcuts, it will make your life easier ****/
    background:url(images/paper-bg-top-inside.png) top center no-repeat;
    }
	
	#homelink{
		width:327px;
		height:209px;
		display:block;
		position:absolute;
		z-index:20;
	}

#straps{
width:1217px;
height:372px;
background:url(images/strap.png) 700px 0px no-repeat;
position:absolute;
top:0px;
}

#shoes{
width:1117px;
height:279px;
background:url(images/shoes.png) 720px 0px no-repeat;
position:absolute;
top:0px;
}

#content-contain{
background:url(images/paper-bg-repeat.png) repeat-y;
margin-top:139px;
}

#content{
background:url(images/content-bg.png) no-repeat;
margin:79px 0 0 0;
}

    #inside-content{
    background:url(images/content-bg-inside.png) no-repeat;
    margin:79px 0 0 0;
    }

#header{
width:1017px;
padding:150px 0 0 0;
}


	
    #nav { 
	    background:url("images/nav.png") no-repeat; 
	    height:60px;
	    width:375px; 
	    position:absolute;
	    margin:5px 0 0 365px;
	    padding:0px 0px 0px 0px; 
	    }

    #nav span { display: none; }

    #nav li, #nav a { height:30px; display:block; 	z-index:10; } /* change height here also */

    #nav li {
	    float:left;
	    list-style:none;
	    _display:inline;
	    }

    #nav-01 { width: 145px;}
    #nav-02 { width: 110px;}
    #nav-03 { width: 119px;}
    #nav-04 { width: 145px;}
    #nav-05 { width: 129px;}
    #nav-06 { width: 100px;}

    /*-------------- (-79px) X position of button / (-30px) height of image from above ------------- */

    #nav-01 a:hover { background:url("images/nav.png")  0px -60px no-repeat; }
    #nav-02 a:hover { background:url("images/nav.png")  -145px -60px no-repeat; }
    #nav-03 a:hover { background:url("images/nav.png")  -255px -60px no-repeat; }
    #nav-04 a:hover { background:url("images/nav.png")  0px -90px no-repeat; }
    #nav-05 a:hover { background:url("images/nav.png")  -145px -90px no-repeat; }
    #nav-06 a:hover { background:url("images/nav.png")  -274px -90px no-repeat; }

    /*-------------- Keeps the hover state on each page based on body id ------------- */

    body#index #nav-01 { background:url("images/nav.jpg")  -43px -239px no-repeat; }
    body#about #nav-02 { background:url("images/nav.jpg")  -117px -239px no-repeat; }
    body#services #nav-03 { background:url("images/nav.jpg")  -201px -239px no-repeat; }
    body#tour #nav-04 { background:url("images/nav.jpg")  -304px -239px no-repeat; }
    body#contact #nav-05, body#thankyou #nav-05 { background:url("images/nav.jpg")  -378px -239px no-repeat; }
    body#studio-hair #nav-06 { background:url("images/nav.jpg")  -43px -276px no-repeat; }
    body#massage-to-go #nav-07 { background:url("images/nav.jpg")  -177px -276px no-repeat; }
    body#specials #nav-08  { background:url("images/nav.jpg")  -352px -276px no-repeat; }	

#banner{
width:939px;
height:315px;
margin:0px 0 0 37px;
}

#leftcol{
width:700px;
float:left;
background-color:none;
margin:0 0 0 0px;
}

#left-col-top{
width:659px;
height:96px;
float:left;
background:url(images/heading-graphic.jpg) no-repeat;
margin:20px 0 0 35px;
}

#left-col-top-program{
width:659px;
height:96px;
float:left;
background:url(images/heading-ourprogram.jpg) no-repeat;
margin:20px 0 -35px 35px;
}

#left-col-top-benefits{
width:659px;
height:96px;
float:left;
background:url(images/heading-benefits.jpg) no-repeat;
margin:20px 0 -35px 35px;
}

#left-col-top-about{
width:659px;
height:96px;
float:left;
background:url(images/heading-about.jpg) no-repeat;
margin:20px 0 -35px 35px;
}

#left-col-top-getinvolved{
width:659px;
height:96px;
float:left;
background:url(images/heading-getinvolved.jpg) no-repeat;
margin:20px 0 -35px 35px;
}

#left-col-top-resources{
width:659px;
height:96px;
float:left;
background:url(images/heading-resources.jpg) no-repeat;
margin:20px 0 -35px 35px;
}

#left-col-top-contact{
width:659px;
height:96px;
float:left;
background:url(images/heading-contact.jpg) no-repeat;
margin:20px 0 -35px 35px;
}

#left-col-top-thankyou{
width:659px;
height:96px;
float:left;
background:url(images/heading-thankyou.jpg) no-repeat;
margin:20px 0 -35px 35px;
}

#left-col-contain{
width:659px;
background:url(images/leftcol-content-bgrepeat.png) repeat-y;
float:left;
margin:0 0 0 35px;
}

#left-col-bot{
width:659px;
height:27px;
float:left;
background:url(images/leftcol-content-bottom.png) no-repeat;
margin:0px 0 0 35px;
}

    .heading{
    margin:0 20px 20px 20px;
    }

    .heading2{
    font-family:Helvetica, Arial, sans-serif;
    color:#e03b3a;
    font-size:22px;
    margin:0px 0 10px 43px;
    }

    .heading3{
    font-family:Helvetica, Arial, sans-serif;
    color:#e03b3a;
	font-style:italic;
    margin:10px 0 10px 43px;
    }

    .left-col-content{
    line-height:25px;
    font-size:12px;
    font-family:Helvetica, Arial, sans-serif;
    margin:0 280px 20px 43px;
    }

    #image{
    width:284px;
    height:213px;
    background:url(images/homepage-pic.jpg);
    float:right;
    margin:0px 40px 0 0;
    }

    #program{
    width:284px;
    height:213px;
    background:url(images/program-01.png);
    float:right;
    margin:0px 40px 0 0;
    }

    #benefit{
    width:284px;
    height:213px;
    background:url(images/benefits-02.png);
    float:right;
    margin:0px 40px 0 0;
    }

    #about{
    width:284px;
    height:213px;
    background:url(images/about-prince.png);
    float:right;
    margin:0px 40px 0 0;
    }

    #getinvolved{
    width:284px;
    height:213px;
    background:url(images/anywhere.png);
    float:right;
    margin:0px 40px 0 0;
    }

    #resources{
    width:284px;
    height:213px;
    background:url(images/resources-01.png);
    float:right;
    margin:0px 40px 0 0;
    }

    #contact{
    width:284px;
    height:426px;
    background:url(images/contact-01.png);
    float:right;
    margin:0px 40px 0 0;
    }

    .left-col-content-bot{
    line-height:25px;
    font-size:12px;
    font-family:Helvetica, Arial, sans-serif;
    margin:0 43px 0 43px;
    }

    .psp{
    line-height:25px;
    font-size:12px;
    font-family:Helvetica, Arial, sans-serif;
    margin:0 43px 20px 83px;
    }

	
	#leftcol p{
		margin-bottom:20px;
	}

#rightcol{
width:275px;
float:left;
background-color:none;
margin:0px 0px 0 0;
}

	#rightcol img{
		margin-top:0px;
	}
	
	#rightcol p{
		font-size:12px;
		margin:10px 20px 0px 20px;
		line-height:22px;
	}
	
	#rightcol h3{
		margin:10px 20px 0px 20px;
	}

#contact-quick{
margin:0 0 20px 0px;
}

#quick-contact{
margin:0 0 0 43px;
}

#contact-us{
width:190px;
height:36px;
background:url(images/rightcol-subhead-contact.png);
}

    input#name{
    font-family:Helvetica, Arial, sans-serif;
    font-size:12px;
    padding:10px 0 10px 10px;
    width:257px;
    border:2px solid;
    }

    input#email{
    font-family:Helvetica, Arial, sans-serif;
    font-size:12px;
    padding:10px 0 10px 10px;
    width:257px;
    border:2px solid;
    }

    input#phone{
    font-family:Helvetica, Arial, sans-serif;
    font-size:12px;
    padding:10px 0 10px 10px;
    width:257px;
    border:2px solid;
    }

    textarea#comment{
    font-family:Helvetica, Arial, sans-serif;
    font-size:12px;
    padding:10px 0 0px 10px;
    width:257px;
    border:2px solid;
    }

    input#Submit{
    font-family:Helvetica, Arial, sans-serif;
    font-size:12px;
    padding:10px 15px 10px 15px;
    background-color:white;
    border:2px solid;
    }

    input#spam{
    display:none;
    }

#clear{
clear:both; /*** this stops the floating ***/
}

#footer{
height:117px; /*** you don't always need set a height for the footer ***/
background:url(images/paper-bg-bottom.png) no-repeat;
margin:0px 0 0 0;
padding-top:20px;
}

    #footer p{
    font-family:Helvetica, Arial, sans-serif;
    font-size:12px;
    padding:10px 0 0 47px;
	}