@charset "utf-8";

/* CSS Document 

Grey: #e4e4e4;
Brown: #662910;
Yellow: #febc64;
Pink: #d58998;

*/

a {
	color: #febc64;
	font-weight: bold;
	text-decoration: none;
	border-bottom: 1px dotted #febc64;
}

a:hover {
	border-bottom: 1px solid #febc64;
}

.associates {
	position: relative;
	margin-bottom: 36px;
	padding-top:1px;
}

.associates .info {
	position: absolute;
	left: 210px;
	top: 0px;
	margin-left: 12px;
	padding-left: 12px;
	border-left: 2px solid #e9e9e9;
}

#associate-sally .info {
	padding-bottom: 12px;
}

body {
	margin: 0;
	padding: 0;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #662910;
}

#b {
	width: 120px;
	height: 100px;
	position: absolute;
	top: 18px;
	left: 0px;
}
#breadcrumbs {
	margin: 0;
	padding: 0;
	font-size: 10px;
	color: #fff;
	position: relative;
}


#breadcrumbs #youarehere {
	text-align: right;
	color: #aaa;
	border-bottom: 1px solid #e4e4e4;
	display: block;
	margin-right: 20px;
}

#breadcrumbs li {
	list-style-type: none;
	/*height: 18px;*/
	padding: 4px 0px 5px 10px;
	background: url(../images/breadcrumb.png) 89px bottom no-repeat;
	text-align: right;
	width: 90px;
	color: #662910;
}

#breadcrumbs a {
	text-decoration: none;
	color: #662910;
	border: none;

}

#breadcrumbs #breadcrumb_last {
	background-image: none;
}
#breadcrumbs #breadcrumb_last a {
	color: #febc64;
}

#home #b { display: none; }
#home #m { margin-left:0; width: 660px; }


.clear { clear: both; }

#container {
	margin: 0 auto;
	width: 1000px;
	position: relative;
	padding-bottom: 60px;
	/*border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;*/
}

#content {
	margin: 0 auto;
	padding: 0 16px;
	padding-right: 258px;
	padding-bottom: 0;
	width: 724px;
	position: relative;
	border: 1px solid #e4e4e4;
	background: url(../images/tantruth-girl.jpg) top right no-repeat;
	min-height: 600px;
}

#content #home {
}

#content ul li {
	float: none;
}

.demo {
	display:none; width:1000px; height:20px; text-align:center; margin:0; padding:0; position: relative;
}

#footer {
	color: #bbb;
	font-size: 11px;
}

#footer {
	border: none;
}

#footer strong {
	color: #bbb;
}

h2 {
	color: #febc64;
	font-size: 20px;
	text-transform: uppercase;
	margin: 14px 0;
}

h4 {
	color: #c0c0c0;
	font-weight: normal;
	font-family: Arial, serif;
	font-size: 16px;
	margin: 10px 0;
}

h5 {
	margin: 0;
	padding: 0;
	color: #febc64;
}


#home-ul li {
	color: #f4afcb;
	line-height: 1.5em;
	font-size: 11px;
}

#home-ul li span {
	color: #662910;
}

#logo_tantruth {
	margin: 0;
	padding: 0;
	background: url(../images/tantruth_logo.gif) no-repeat;
	text-indent: -999em;
	width: 189px;
	height: 59px;
	float: left;
	position: relative;
	top: 10px;
}

#logo_pbs {
	margin: 4px 0;
	padding: 0;
	background: url(../images/pbs.gif) no-repeat;
	text-indent: -999em;
	width: 366px;
	height: 18px;
}

#logo_sally {
	margin: 12px 0;
	padding: 0;
	background: url(../images/logo-sally.gif) no-repeat;
	width: 200px;
	height: 61px;
	cursor: pointer;
	text-indent: -999em;
	border: 4px solid #e9e9e9;
	
}

#logo_beautyexpress {
	margin: 12px 0;
	padding: 0;
	background: url(../images/logo-beautyexpress.gif) no-repeat;
	width: 200px;
	height: 50px;
	cursor: pointer;
	text-indent: -999em;
	border: 4px solid #e9e9e9;	
}

#logo_pbslogo {
	margin: 12px 0;
	padding: 0;
	background: url(../images/pbslogo.png) no-repeat;
	width: 166px;
	height: 52px;
	cursor: pointer;
	text-indent: -999em;
	border: 4px solid #e9e9e9;	
}
#logo_sally:hover {
	border: 4px solid #febc64;
	
}

#logo_beautyexpress:hover {
	border: 4px solid #febc64;	
}


#logo_pbslogo:hover {
	border: 4px solid #febc64;	
}

#m {
	margin-left: 102px;
	padding: 0 16px 16px 16px;
	width: 510px;
}

p {
	font-size: 11px;
	color: #662910;
}

.product {
	margin: 0;
	padding: 0;
	width: 620px;
	position: relative;
	background: url(../images/flower.gif) 290px 48px no-repeat;
	margin-bottom: 1em;
	/*border: 1px solid red;*/
}

#poster, #appointment-cards, #therapist-badge, #consumer-leaflet, #retail-stand, #window-sticker, #dvd, #certificate {
	background: none;
}

.product .left .image {
	background: red;
	height: 360px;
	width: 360px;
	margin: 0 auto;
	/*border: 1px solid red;*/
	position: absolute;
	top: -48px;
	right: 0px;
}

.product .description {
	margin: 0;
	padding: 0;
	width:460px;
	/*min-height: 25em;
	border: 1px solid blue;*/
}

.product .purchasewith strong {
	color: #a9a9a9;
}

.product .description p {
	margin: 0;
	padding: 0;
	margin-right: 200px;
	line-height: 1.5em;
}


#self-tan-lotion-with-colour-guide .left .image {
	background: url(../images/self-tan-lotion-with-colour-guide.gif) center center no-repeat;
	/*width: 81px;*/
}
#self-tan-lotion-body-and-face .left .image {
	background: url(../images/self-tan-lotion-body-and-face.gif) center center no-repeat;
}
#secret-sun-daily-gradual-tan .left .image {
	background: url(../images/secret-sun-daily-gradual-tan.gif) center center no-repeat;
}
#bronzing-gel-body-and-face .left .image {
	background: url(../images/bronzing-gel-body-and-face.gif) center center no-repeat;
	top: -64px;
}
#salon-spray-with-colour-guide .left .image {
	background: url(../images/salon-spray-with-colour-guide.gif) center center no-repeat;
	top: -32px;
}
#salon-spray-with-colour-guide-extra-dark .left .image {
	background: url(../images/salon-spray-with-colour-guide-extra-dark.gif) center center no-repeat;
	top: -64px;
}
#boost-juice-tan-intensifier .left .image {
	background: url(../images/boost-juice-tan-intensifier.gif) center center no-repeat;
	top: -32px;
}
#smoothing-scrub .left .image {
	background: url(../images/smoothing-scrub.gif) center center no-repeat;
	top: -56px;
}
#smoothing-spray .left .image {
	background: url(../images/smoothing-spray.gif) center center no-repeat;
	top: -64px;
}
#tan-stand-kit-a .left .image {
	background: url(../images/tan-stand-kit-a.gif) center center no-repeat;
	right: -20px;
}
#tan-stand-kit-b .left .image {
	background: url(../images/tan-stand-kit-a.gif) center center no-repeat;
	right: -20px;
}
#tan-stand-kit-pro-100 .left .image {
	background: url(../images/tan-stand-kit-pro-100.gif) center center no-repeat;
	top: -108px;
	right: 32px;
}
#application-mitt .left .image {
	background: url(../images/application-mitt4.gif) center center no-repeat;
	top: -128px;
}
#retail-bag .left .image {
	background: url(../images/retail-bag.gif) center center no-repeat;
	top: -32px;
}
#trial-kit .left .image {
	background: url(../images/trial-kit2.gif) center center no-repeat;
	right: 36px;
	top: -64px;
}
#appointment-cards .left .image {
	background: url(../images/appointment-cards2.gif) center center no-repeat;
	top: 40px;
	right: 48px;
}
#certificate .left .image {
	background: url(../images/certificate2.gif) center center no-repeat;
	top: -32px;
	right: 24px;
}
#consumer-leaflet .left .image {
	background: url(../images/consumer-leaflet.gif) center center no-repeat;
	top: -16px;
}
#dvd .left .image {
	background: url(../images/dvd.gif) center center no-repeat;
	top: -32px;
}
#poster .left .image {
	background: url(../images/poster2.gif) center center no-repeat;
	top: -24px;
}
#retail-stand .left .image {
	background: url(../images/retail-stand2.gif) center center no-repeat;
	top: -32px;
}
#therapist-badge .left .image {
	background: url(../images/therapist-badge2.gif) center center no-repeat;
	top: -38px;
	right: 16px;
}
#window-sticker .left .image {
	background: url(../images/therapist-badge.gif) center center no-repeat;
	top: -24px;
	right: 0px;
}
/* no flower */
#trial-kit {
	background: none;
}
#application-mitt {
	background: none;
}





#bullets {
	margin: 0;
	padding: 0;
	margin-top: 18px;
	position: relative;
	right: 10px;
}

#bullets li {
	margin: 0;
	padding: 8px 0px;
	height: 14px;
	margin-bottom: 10px;
	background: url(../images/bullet2.gif) #0000ff no-repeat;
	position: relative;
	list-style-type: none;
	width: 600px;
}

#bullets li#first {
	background-color: #f4afcb;
	position: relative;
}

#bullets li#second {
	background-color: #fedfb3;
}

#bullets li strong {
	margin: 0;
	padding: 0;
	line-height: 1.2em;
	position: absolute;
	display: block;
	padding-left: 10px;
	overflow: visible;
	
}

#volumes span {
	margin: 0 4px;
}

#notes {
	padding: 1em 1em 1em 1em;
	border: 1px solid #ccc;
	position: relative;
	right: 1em;
	width: 572px;
}

#marketing-and-support-materials{
	background: green;
}

#notes h5 {
	margin: 0;
	padding: 0;
	font-size: 1em;
	color: #662910;
}

#shopping-basket {
	background: url(../images/shopping-basket_hover.png) no-repeat;
	width: 120px;
	height: 40px;
	display: block;
	text-indent: -9999em;
	border: 4px solid transparent;
	position: relative;
	top: 0px;
	left: 0px;
	
}

#shopping-basket:hover {
	background: url(../images/shopping-basket_hover2.png) no-repeat;
}

strong {
	color: #662910;
}

.tips {

	margin: 0px;
}

.tips li {
	margin: 0px;
	/*font-size: 1.2em;*/
}

#tan-tips h3 {
	height: 60px;
	width: 179px;
	text-indent: -999em;
}

#tan-tips ul {
	position: relative;
	left: 46px;
	bottom: 16px;
}

#tips-prepare {
	background: url(../images/tips-prepare.png) no-repeat;
}

#tips-apply {
	background: url(../images/tips-apply.png) no-repeat;
}

#tips-prolong {
	background: url(../images/tips-prolong.png) no-repeat;
}

ul {
	margin: 0;
	padding: 0;
	margin-left: 16px;
	margin-top: 12px;
	margin-bottom: 12px;
}

ul li {
	list-style-type: square;
}

#vertical_container  {
	background: #fff;
}

#vertical_container p  {
	padding: 0px 36px;
}

#vertical_container strong {
	font-weight: bold;
	font-size: 13px;
	color: #662910;
	display: block;
	background: #efefef;
	border: 1px solid #ccc;
	padding: 0px 16px;
}

#vertical_container strong:hover {
	cursor: pointer;
}

/*-----------------------------------------------------------------*/

#primary {
	margin: 0;
	padding: 0;
	font-size: 12px;
	margin-left: 6px;
	margin-bottom: 20px;
	position: relative;
	color: #ccc;
	font-weight: bold;
	clear: both;
}



#primary a {
	text-decoration: none;
	padding: 0 6px;
	color: #662910;
	border-bottom: none;
}



#primary a:hover {
	text-decoration: none;
	color: #fff;
	background: #662910;
	border-bottom: none;
}

#primary li {
	margin: 0;
	padding: 0;
	float: left;
	padding: 0 0 0 0px;
	list-style-type: none;
	background: none;
}

#secondary {
	margin: 0;
	padding: 0;
	font-size: 11px;
	position: relative;
	color: #bbb;
	text-transform: uppercase;
	font-weight: bold;
	clear: both;
	height: 32px;
	display: none;
}



#secondary strong {
	text-decoration: none;
	padding: 0 12px;
	color: #febc64;
	/*
	cursor: pointer;
	cursor: hand;
	*/
}



#secondary strong:hover {
	text-decoration: none;
	color: #fff;
	background: #febc64;
	border-bottom: 1px dotted #febc64;
	/*
	cursor: pointer;
	cursor: hand;
	*/
}

#secondary li {
	margin: 0;
	padding: 0;
	float: left;
	padding: 0 0px 0 0px;
	list-style-type: none;
}

#secondary li strong {
	margin: 0;
	padding: 0;
	padding: 0 12px 0px 12px;
	list-style-type: none;
}


#tertiary {
	margin: 0;
	padding: 0;
	font-size: 11px;
	position: relative;
	color: #d7d7d7;
	text-transform: capitalize;
	font-weight: bold;
	clear: both;
	height: 18px;
	display: none;
}

#tertiary ul{
	margin: 0;
	padding: 0;
	display: block;
}



#tertiary a {
	text-decoration: none;
	padding: 0 12px;
	color: #f4afcb;
	border-bottom: none;
}

 


#tertiary a:hover {
	text-decoration: none;
	color: #fff;
	background: #f4afcb;
	border-bottom: 1px dotted #febc64;
	border-bottom: none;
}

#tertiary li {
	margin: 0;
	padding: 0;
	float: left;
	padding: 0 0 0 0px;
	list-style-type: none;
}

ol li a {
	border-bottom: none;
}

ol li a:hover {
	border-bottom: none;
}

/*---------------------------------------------*/
#accordion {
	width: 580px;
}

.stretchtoggle {
	margin: 0;
	padding: 10px 20px;
	display: block;
	border: 1px solid #c9c9c9;
	border-bottom: none;
	background: #e9e9e9;
	width: 538px;
	height: 11px;
	color: #662910;
}

a:hover.stretchtoggle {
	border-bottom: none;
}

.stretcher {
	padding: 12px 20px 12px 20px;
	border: none;
	border-left: 1px solid #c9c9c9;
	border-right: 1px solid #c9c9c9;
	position: relative;
	width: 538px;
	background: #fff;
	height: auto;
}

.stretcher h5 {
	padding-top: 12px;
	color: #febc64;
	font-size: 11px;
}

.stretcher p {
	margin-bottom: 0px;
}

.stretcher #tips li {
	margin-top: 0px;
}

.stretcher img {
	float: right;
	position: relative;
	top: 0px;
	margin: 12px 0px 12px 12px;
	padding: 8px;
	border: 1px solid #d8d8d8;
	border-bottom: 1px solid #a8a8a8;
	background: #fff;
}

#tan-tips a.stretchtoggle {
	margin: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	height: 28px;
	font-size: 18px;
	font-weight: normal;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

#tan-tips .stretcher ul {
	position: relative;
	left: 16px;
}

#border-bottom {
	border-bottom: 1px solid #c9c9c9;
}

/*------------------------------------ contact-us ---------*/

.error {
	color: red;
}

fieldset {
	width: 540px;
	border: 1px solid #c6c6c6;
	padding: 0 12px 16px 12px;
	margin: 0;
}

fieldset legend {
	color: #febc64;
	font-weight: bold;
	font-size: 13px;
	padding: 0 5px;
}

fieldset .field {
	margin: 10px 0px;
	padding: 0;
	display: block;
	position: relative;
	width: 540px;	
}

fieldset hr {
	display: none;
}

fieldset .hr {
	border-bottom: 1px dotted #c6c6c6;
	margin: 20px 0px 14px 0px;
	
}

fieldset label {
	margin: 0;
	padding: 0;
	width: 100px;
	height: 10px;
}

fieldset input {
	margin: 0;
	padding: 0;
	position: absolute;
	right: 0px;
	width: 300px;
}

#buttons input {
	position: relative;
	width: auto;
}

#buttons {
	position: relative;
	top: 10px;
}


fieldset textarea {
	width: 536px;
	height: 48px;
}


/*-----------------------------------------------------*/
.lh {
	line-height: 1.5em;
}

#quotes {
	background: url(../images/quotes3.gif) no-repeat;
	width: 527px;
	height: 353px;
	display: block;
	clear: both;
	text-indent: -999em;
}

#quotes blockquote cite {
	display: none;
}

#poster #notes { top: 220px; }
#appointment-cards #notes { top: 92px; }
#therapist-badge #notes { top: 56px; }
#consumer-leaflet #notes { top: 180px; }
#retail-stand #notes { top: 104px; }
#window-sticker #notes { top: 76px; }
#dvd #notes { top: 96px; }
#certificate #notes { top: 180px; }


#products ol {
	padding-left: 10px;
}

#products ol ol {
	list-style-type: lower-roman;
}

.emphasis {
	background-color: #f0f0f0;
	padding: 10px;
	width: 540px;
}

.emphasis a {
	color: #662910;
	padding: 10px;
	border: none;
	font-weight: normal;
	text-decoration:underline;
}

.new {
	font-weight: normal;
	background: #f4afcb;
	color: white;
	position: relative;
	right: 12px;
	bottom: 1px;
	padding: 0px 2px;
	font-size: 8px;
	letter-spacing: 0.1em;
	
}

p .new {
	right: 0px;
	bottom: 0px;
	font-size:12px;
	padding: 0 5px;
}