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

/* top, right, bottom, left */

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	background-color: #d2f1d3;
	background-image: url(../img/body-background.png);
	background-repeat: repeat-x;
	color: #000000;
	margin: 0px;
	padding: 0px;
}
div#shadow {
	background-image:url(../img/body-shadows.png);
	background-repeat: no-repeat;
	width: 1302px;
	margin-left: auto;
	margin-right: auto;
}
a {
	color: #000000;
	font-weight: bold;
}
a:hover {
	color: #18879a;
	font-weight: bold;
}
a.teal {
	color: #18879a;
	font-weight: bold;
}
a.teal:hover {
	color: #66afbd;
	font-weight: bold;
}
a.green {
	color: #5cad5e;
	font-weight: bold;
	text-decoration: none;
}
a.green:hover {
	color: #000000;
	font-weight: bold;
}
img {
	border: none;
}
.greenText {
	color: #5cad5e;
}
.tealText {
	color: #18879a;
	font-size: 14px;
	font-weight: bold;
}
.smallText {
	font-size: 9px;
}
h3#steps a {
	 text-decoration: none;
	 color: #5cad5e;
}
h3#steps a:hover {
	color: #18879a;
}
p#shop a {
	text-decoration: none;
	color: #5cad5e;
}
p#shop a:hover {
	color: #18879a;
}
h1 {
	font-size: 2.54em;
}
h2 {
	font-size: 1.61em;
	color: #66afbd;		/* Light Teal */
}
h3 {
	font-size: 1.3em;
	color: #5cad5e;		/* Green */
}
h4 {
	font-size: 1.3em;
	color: #18879a;		/* Teal */
	font-weight:normal;
}
.greenTitle {
	font-size: 15px;
	color: #5cad5e;		/* Green */
}
.greenTitle a {
	font-size: 15px;
	font-weight: lighter;
	color: #5cad5e;
	text-decoration: none;
}
.greenTitle a:hover {
	text-decoration: underline;
}
.clear {
	clear: both;
}
.container {
	margin: auto;
	width: 920px;
}
.disclaimer {
	font-size: 10px;
	color: #18879a;
}

/* header */
.header {
	background-image: url(../img/header-background.jpg);
	background-repeat: no-repeat;
	background-color: #ecf9f0;
	height: 105px;
	width: 920px;
	margin: auto;
	padding: 0px;
}
.header h1 {
	text-align: right;
	width: 500px;
	float: right;
	position: relative;
	top: 30px;
	right: 40px;
}
.header img#logo {
	height: 105px;
	width: 267px;
	float: left;
}
/* end header */

/* nav */
.nav {
	background-image: url(../img/nav-background.png);
	background-repeat: repeat-x;
	background-color: #ecf9f0;
	height: 29px;
	width: 920px;
	margin: auto;
	padding: 0px;
}
.nav a {
	color: #18879a;
	font-weight: bold;
	text-decoration: none;
}
.nav a:hover {
	text-decoration: none;
	color: #66afbd;
}
.nav ul {
	list-style: none;
	margin-top: 0px;
	padding-top: 7px;
}
.nav ul li {
	display: inline;
	padding: 6px;
	border-left: solid;
	border-left-width: 2px;
	border-left-color: #ffffff;
}
.nav ul li#home {
	display: inline;
	padding: 6px;
	border: none;
}
/* end nav */

/* content */
.contentHomepage {
	background-image: url(../img/homepage-background-image2.jpg);
	background-repeat: no-repeat;
	background-color: #ecf9f0;
	height: auto;
	width: 920px;
	margin: auto;
	padding: 0px;
}
.contentContainerHomepage {
	margin-top: 0px;
	height: 350px;
	width: 420px;
	padding: 10px 0 0 20px;
	position: relative;
	top: -16px;
}

.contentBlowout {
	background-image: url(../img/content-box-blowout.png);
	background-repeat: no-repeat;
	margin:0 5px 0 6px;
	min-height:280px;
	width:605px;
	float:left;
}


.contentLeft {
	background-image: url(../img/content-box-homepage.png);
	background-repeat: no-repeat;
	margin: 0px 0px 0px 11px;
	height: 240px;
	width: 289px;
	float: left;
}

.contentMiddle {
	background-image: url(../img/content-box-homepage.png);
	background-repeat: no-repeat;
	margin: 0px 16px 0px 16px;
	height: 240px;
	width: 289px;
	float: left;
}
.contentRight {
	background-image: url(../img/content-box-new.png);
	background-repeat: no-repeat;
	margin: 0px 10px 0px 0px;
	height: 240px;
	width: 289px;
	float: left;
}
.content {
	background-color: #ecf9f0;
	min-height: 520px;
	width: 920px;
	margin: auto;
	padding: 0px;
}
.contentContainer {
	margin-top: 0px;
	margin-left: 10px;
	/*min-height: 500px;*/
	width: 590px;
	padding: 10px;
	float: left;
	/*position: relative;
	top: -10px;*/
}
.rightColumn {
	width: 267px;
	float: right;
	margin: 16px 16px 0px 16px;
}
.contentTop {
	background-image: url(../img/content-box.png);
	background-repeat: no-repeat;
	height: 164px;
	width: 235px;
}
.contentMid {
	background-image: url(../img/content-box.png);
	background-repeat: no-repeat;
	height: 164px;
	width: 235px;
}
.contentBottom {
	background-image: url(../img/content-box.png);
	background-repeat: no-repeat;
	height: 164px;
	width: 235px;
}
.shopNav ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}
.shopNav ul li {
	display: inline;
}
.shopcolumns { width: 235px; float: left; padding-left: 50px; }
/* end content */

/* footer */
.footer {
	background-image:url(../img/footer-background.png);
	background-position: bottom;
	background-repeat: repeat-x;
	background-color: #ecf9f0;
	height: 100px;
	width: 920px;
	margin: auto;
	padding: 0px;
	color: #66afbd;
	padding-top: 3px;
	padding-bottom: 10px;
	font-size: 1em;
	text-align: center;
}
.footer ul {
	clear:both;
	list-style: none;
	margin: 0px;
	padding: 15px;
	text-align: center;
}
.footer ul li {
	display: inline;
	color: #5cad5e;
}
.footer a {
	text-decoration: none;
	color: #5cad5e;
}
.footer a:hover {
	text-decoration: underline;
}
#footerEmail {
	text-decoration: none;
	color: #66afbd;
	font-weight: normal;
}
#footerEmail:hover {
	text-decoration: underline;
}
/* end footer */

/* form */
#formContents {
	padding-left: 22px;
}
#cap {
	width: 178px;
	padding-left: 22px;
}
#thanks {
	width: 260px;
	position: relative;
	top: 120px;
	margin-left: auto;
	margin-right: auto;
}
.contactForm {
	background-image: url(../img/form-background.png);
	background-repeat: no-repeat;
	background-position: top;
	border: ridge;
	border-color: #18879a;
	height: 450px;
	width: 350px;
	float:left;
}
input.submit {
	background-color:#EFF8F0;
	background-image:url(../img/button.png);
	background-repeat:no-repeat;
	border:medium none;
	display:block;
	height:31px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	width:160px;
}
input.submit:hover {
	font-weight: bold;
}
input.field {
	width: 300px;
}
/* end form */

ol#four-easy-steps {
	list-style: none;
	font-size: 14px;
	font-weight: bold;
}
.four-steps {
	font-size: 13px;
	font-weight: bold;
	padding-left: 15px;
}
.four-steps img {
	position: relative;
	top: 10px;
	right: 4px;
}

.center {
	margin: 0px auto;
	text-align: center;
}

/* Left Box - Index - Positioning */
#htw { width: 174px; position: relative; top: 50px; left: 25px; display: inline; }
#video { width: 100px; position: relative; top: 48px; left: 30px; display: inline; font-size: 20px; color: #18879a; }
#tv { width: 125px; float: left; position: relative; top: 68px; left: 10px; border: 2px solid #18879a; }
#seenontv { width: 125px; float: right; position: relative; top: 50px; left: -14px; font-size: 14px; color: #18879a; }
#playbutton { width: 26px; float: right; position: relative; top: 156px; right: -10px; }
#watch { width: 100px; float: right; font-size: 14px; font-weight: bold; color: #18879a; position: relative; top: 53px; right: 8px; }
#watch a { font-weight: bold; color: #18879a; text-decoration: none; }
#watch a:hover { text-decoration: underline; }


/* Middle Box - Index - Positioning */
#shop { width: 115px; float: right; position: relative; top: 42px; right: 2px; font-size: 20px; font-weight: bold; color: #5cad5e; }
#online { font-size: 20px; font-weight: normal; color: #18879a; }
#model { width: 174px; float: left; z-index: -1; }
#award { width: 200px; float: right; position: relative; top: -130px; right: -38px; z-index: 0; }


/* Right Box - Index - Positioning */
#nelsonj { width: 266px; position: relative; top: -8px; left: 7px; z-index: 0; z-index: 100; }
#hairkit { width: 266px; float: left; position: relative; top: 40px; left: 17px; font-size: 20px; font-weight: bold; color: #5cad5e; }
#kit { font-size: 18px; font-weight: normal; color: #5cad5e; }
#hair { font-size: 16px; font-weight: normal; color: #18879a; position: relative; z-index: 200; }
/* END Right Box - Index - Positioning */

#soon { font-size: 14px; font-weight: normal; color: #5cad5e; position: relative; top: 30px; left: 17px; }

/* Top Box - All Pages - Positioning */
#box-top-images {
	margin: 0 auto;
	text-align:center;
	position:relative;
	top:14px;
}
/* END Top Box - All Pages - Positioning */

/* Middle Box - All Pages - Positioning */
#shop-about { width: 120px; float: right; position: relative; right: 4px; font-size: 18px; font-weight: bold; color: #5cad5e; }
#online-about { font-size: 18px; font-weight: normal; color: #18879a; }
#model-about { width: 102px; float: left; z-index: 0; }
#retailer-about { font-size: 16px; font-weight: normal; color: #18879a; position: relative; left: -2px; }
/* END Middle Box - All Pages - Positioning */

/* Bottom Box - All Pages - Positioning */
#nelsonj-about { width: 228px; position: relative; top: -35px; left: 5px; z-index: 0; }
#hairkit-about { width: 230px; float: left; position: relative; left: 14px; font-size: 18px; font-weight: bold; color: #5cad5e; }
#kit-about { font-size: 16px; font-weight: normal; color: #5cad5e; }
.hair-about { font-size: 14px; font-weight: normal; color: #18879a; position: relative; left: 0px; z-index: 100; }
/* END Bottom Box - All Pages - Positioning */

#soon-about { font-size: 12px; font-weight: normal; color: #5cad5e; position: relative; top: -2px; left: 14px; }

/* Products Page */
#slides { width: 174px; float: left; }
#productsText { width: 380px; float: right; padding: 10px 10px 10px 20px; }
#award-products { width: 153px; float: right; position: relative; top: -10px; right: 20px; }
#productsLeft { width: 160px; float: left; position: relative; top: 8px; }
/* END Products Page */

#steps { display:block; margin-left:auto; margin-right:auto; }

#contactPage { width: 200px; float: right; padding-right: 20px; }

#testimonial-img {
	margin:0 auto;
	padding-left:190px;
	text-align:center;
}

#shop-award-img {
	position: relative;
	left: -42px;
	top: -25px;
}