/* CSS Document */

/* Authored by:
------------------------------------------
The Graphic Element
June 2008
http://www.thegraphicelement.com

License: Copyright (c) 2008, The Graphic Element, All rights reserved.
------------------------------------------ */

/* Imported Styles
------------------------------------------ */
@import url(reset.css);

/* Go on just say it...
------------------------------------------ */
@import url(http://www.stephenies.com/css/reset.css);


/* Global
------------------------- */
  body { color: #333; background-color: #c1d088; }
  a:link, a:visited, a:hover, a:active { text-decoration: none; }
	a:focus { outline: none; } /*corrects FF link outline*/
	body, input, table, td, th, textarea { font-family: "Lucida Grande", Arial, Helvetica, Verdana, Geneva, sans-serif; }

  h1, h2, h3, h4 { font-family: Georgia, Times, "Times New Roman", serif;  }
	h1 { margin-bottom: 1em; color: #1A4683; font-size: 2.3em; }
	h2 { color: #446BA0; font-size: 1.7em; }
	h3 { margin-top: .8em; font-weight: bold; font-size: 1.3em; font-family: "Lucida Grande", Arial, Helvetica, Verdana, Geneva, sans-serif; }

	#wrapper { margin: 20px auto; width: 800px; background: #fff url(../img/wrapper-bg.gif) no-repeat 0 0; }


/* Header
------------------------- */
	#header { padding-bottom: 150px; width: 800px; background: url(../img/header.jpg) no-repeat 0 100%; }
	#logo { position: relative; top: 12px; left: 15px; }
	#contact-info { position: relative; top: 12px; left: 313px; }
	

/* Nav
------------------------- */
	#nav { margin-top: 20px; width: 800px; height: 30px; background: #a9b772; }
	#nav li { float: left; }
	#nav a { display: block; }
	#nav li a#n-home, #nav li a#n-about, #nav li a#n-services, #nav li a#n-makeup, #nav li a#n-boutique, #nav li a#n-referrals, #nav li a#n-contact { padding: 0; height: 30px; text-indent: -999em; background-image: url(../img/nav.gif); background-repeat: no-repeat; }

	/* BUTTONS */
	#nav li a#n-home { background-position: 0 0; width: 79px; }
	#nav li a#n-about { background-position: -79px 0; width: 81px; }
	#nav li a#n-services { background-position: -160px 0; width: 97px; }
	#nav li a#n-makeup { background-position: -257px 0; width: 232px; }
	#nav li a#n-boutique { background-position: -489px 0; width: 105px; }
	#nav li a#n-referrals { background-position: -594px 0; width: 105px; }
	#nav li a#n-contact { background-position: -699px 0; width: 101px; }
	
	/* OVER STATES - use li:hover so item stays selected */
	#nav li:hover a#n-home { background-position: 0 -30px; }
	#nav li:hover a#n-about { background-position: -79px -30px; }
	#nav li:hover a#n-services { background-position: -160px -30px; }
	#nav li:hover a#n-makeup { background-position: -257px -30px; }
	#nav li:hover a#n-boutique { background-position: -489px -30px; }
	#nav li:hover a#n-referrals { background-position: -594px -30px; }
	#nav li:hover a#n-contact { background-position: -699px -30px; }
	
	/* ON STATES */
	body#home #nav li a#n-home { background-position: 0 -60px; }
	body#about #nav li a#n-about { background-position: -79px -60px; }
	body#services #nav li a#n-services { background-position: -160px -60px; }
	body#makeup #nav li a#n-makeup { background-position: -257px -60px; }
	body#boutique #nav li a#n-boutique { background-position: -489px -60px; }
	body#referrals #nav li a#n-referrals { background-position: -594px -60px; }
	body#contact #nav li a#n-contact { background-position: -699px -60px; }
	
	/* 1ST DROP DOWN */
	#nav ul { z-index: 500; float: left; padding: 5px 0 10px; background: transparent url(../img/nav-dd-curve.png) no-repeat 0 100%; }
	#nav li ul { position: absolute; width: 120px; height: auto; }
	#nav ul li { position: relative; margin-left: 0; width: 120px; font-size: 1.1em; }
	#nav li ul a { margin-left: 0; padding: .5em 10px; }
  #nav li:hover ul a { color: #516c20; }
	#nav li ul a:hover, #nav li ul li:hover { color: #dce5b8; background: #a9b772; }
	
	/* HIDE & REVEAL */
	#nav ul, #nav li:hover ul ul { left: -999em; }
	#nav li:hover ul, #nav ul li:hover ul { left: auto; }


/* Content
------------------------- */
	#content-wrapper { margin-top: 30px; width: 800px; }
	#content { float: right; width: 540px; padding: 0 30px; overflow: auto; }
	
	p { margin: .5em 0 1em; line-height: 1.6em; }
	#content p, #content li { font-size: 1.3em; }
	p.clear { clear: both; }
	
	#content a { color: #6c84a5; text-decoration: underline; }
	#content a:hover { color: #a9b772; }
	
	#content img { margin-bottom: .8em; }
	img.right { float: right; margin: 0 0 0 10px; }
	img.left { float: left; margin: 0 10px 0 0; }
	
	#content h2 { margin-top: 1.2em; }
	#content h2 a { color: #446BA0; text-decoration: none; }
	#content h2 a:hover { color: #A9B772; }
	
	#content ul { margin: .7em 0 .8em 25px; list-style: disc; }
	#content ul li { margin-bottom: .3em; }
	#content ul.nobullet { margin-left: 0; list-style: none; }
	
	/* SIDEBAR */
	#sidebar { float: left; width: 170px; padding: 55px 0 0 30px; background: url(../img/eyes.gif) no-repeat 40px 0; }
	#sidebar h2 { margin-bottom: .3em; color: #333; font-size: 1.7em; }
	#sidebar form#ccform { margin-bottom: 15px; }
	#sidebar form h2 { padding: 0; background: none; }
	#sidebar form input { width: 150px; color: #666; }
	#sidebar form input#join { margin-top: 5px; width: auto; color: #000; }
	#sidebar a#chiropractor-btn { display: block; margin-bottom: 20px; width: 155px; color: #1A4683; font-weight: bold; font-size: 1.2em; text-align: center; }
	#sidebar a#chiropractor-btn img { display: block; margin: 0 auto 3px; }

	
	/* PAINLESS PERMANENT MAKEUP */
	body#makeup #photo-btns { margin: 4em 0 0; list-style: none; }
	body#makeup #photo-btns li { float: left; width: 125px; }
	body#makeup #photo-btns li a { padding-top: 60px; display: block; color: #333; text-align: center; text-decoration: none; background-repeat: no-repeat; background-position: 56% 0; }
	body#makeup #photo-btns li#eyeliner a { background-image: url(../assets/pm-btn-eyeliner.jpg); }
	body#makeup #photo-btns li#eyebrows a { background-image: url(../assets/pm-btn-eyebrows.jpg); }
	body#makeup #photo-btns li#lips a { background-image: url(../assets/pm-btn-lips.jpg); }
	body#makeup #photo-btns li#scartissue a { background-image: url(../assets/pm-btn-scartissue.jpg); }
	body#makeup #content img { margin-top: 20px; }
	
	/* SERVICES */
	#content a.more { padding-right: 13px; background: url(../img/link-arrow.gif) no-repeat 100% 50%; }
	#content a.more:hover { background-image: url(../img/link-arrow-over.gif); }
	body.skincare #content blockquote { clear: right; margin: 20px 0 0; }
	body.skincare #content blockquote img { float: right; margin-left: 10px; }
	body.skincare #content blockquote p { margin: 0; padding: 10px 0 0 10px; font-size: 1.1em; line-height: 1.9em; background: url(..//img/quote.gif) no-repeat 0 0; }
	
	/* BOUTIQUE */
	body#boutique #content ul ul { margin: .3em 0 0 25px; font-size: 100%; list-style: circle; }
	
	/* REFERRALS */
	body#referrals #content ul.section { float: left; margin: 0 10px 3em 0; width: 250px; list-style: none; }
	body#referrals #content ul.section li { font-size: 1.2em; padding-bottom: .8em; }
	body#referrals #content h2 { margin-bottom: .8em; }
	body#referrals #content h2.clear { clear: left; padding-top: .4em; border-top: 1px solid #ccc; }
	

/* Footer
------------------------- */
	#footer { clear: both; padding: 30px 10px 10px 200px; width: 590px; text-align: center; }
	#footer li { display: inline; padding: 0 .3em 0 .5em; font-size: 1em; border-left: 1px solid #ccc; }
	#footer li.first { border: none; }
	#footer a { color: #6c84a5; }
	#footer a:hover { color: #a9b772; }
	#footer li#credit { display: block; color: #516c20; line-height: 1.7em; border: none; }
	#footer li#credit a { color: #516c20; }
	#footer li#credit a:hover { color: #a9b772; }