@charset "UTF-8";

/* ========================================== LANDING PAGE === */
body#stylistTips.landing {background:#000000 url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/stylist-tips-bg.jpg) no-repeat center top;}
body#stylistTips.landing #mainColumn {width:100%;padding-top:5px;float:left;}
#landingInfo {float:left;width:290px;padding:0 10px;}
#landingInfo h1 {padding:40px 0 20px 0;}
#landingInfo p {width:250px; font-size:13px;}
#landingInfo a.meetTSButton {display:block;width:267px;height:1px;overflow:hidden;margin:20px 0;padding-top:32px;text-align:right;
background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/meet-the-stylist.png) no-repeat left top;}
#landingInfo a.meetTSButton:hover {background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/meet-the-stylist-hover.png) no-repeat left top;}

div#landingGroups {margin-left:325px;}
dl.landingGroup {
	width:635px;
	height:133px;
	padding:4px 3px 4px 3px;
	text-transform:uppercase;
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/group-box-bg.png) no-repeat center center;
}
dl.landingGroup dt a {
	color:#c2c2c2;
	font-size:10px;
}
dl.landingGroup dt a:hover {
	color:#c2c2c2;
}
dl.landingGroup dt {
	position:relative;
	float:left;
	width:228px;
	height:133px;
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/group-definition-bg.jpg) no-repeat left top;
}
dl.landingGroup dt:hover {
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/group-definition-bg-hover.jpg) no-repeat left top;
}
dl.landingGroup dt span {
	display:block;
	font-size:30px;
	line-height:30px;
	color:#FFFFFF;
	padding:30px 0 0 22px;
}
dl.landingGroup dt a {
	position:absolute;
	width:198px;
	padding:100px 0 8px 22px;
	left:0;
	bottom:0;
	color:#c2c2c2;
	font-weight:bold;
}
dl.landingGroup dt a:hover {
	color:#c2c2c2;
}
dl.landingGroup dd {
	margin-left:228px;
/*	height:100%;*/
	height:127px;
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/group-desc-bg.jpg) no-repeat left top;
	position:relative;
}
dl.landingGroup dd:hover {
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/group-desc-bg-hover.jpg) no-repeat left top;
}
dl.landingGroup dd a.left,
dl.landingGroup dd a.right {
	float:left;
	display:block;
	height:127px;
	width:24px;
}
dl.landingGroup dd a.leftReplace,
dl.landingGroup dd a.rightReplace {
	position:absolute;
	background:#0F0;
	height:127px;
	width:24px;
}
dl.landingGroup dd a.left {
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/arrow-left.png) no-repeat left center;
	visibility:hidden;
}
dl.landingGroup dd a.left:hover {
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/arrow-left-hover.png) no-repeat left center;
}
dl.landingGroup dd a.leftReplace {
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/arrow-left-deact.png) no-repeat left center;
	left:0;
}
dl.landingGroup dd a.right {
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/arrow-right.png) no-repeat right center;
}
dl.landingGroup dd a.right:hover {
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/arrow-right-hover.png) no-repeat right center;
}
dl.landingGroup dd a.rightReplace {
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/arrow-right-deact.png) no-repeat right center;
	right:4px;
}
dl.landingGroup dd div.scrollingWindow {
	float:left;
	height:127px;
	width:355px;
	overflow:hidden;
	position:relative;
}
dl.landingGroup dd div.scrollingWindow ul.scrollingBlock {
	position:absolute;
	left:0;
	top:0;
	list-style-position:inside;
}
dl.landingGroup dd div.scrollingWindow ul.scrollingBlock li {
	position:relative;
	height:127px;
	width:355px;
	float:left;
}
dl.landingGroup dd div.scrollingWindow ul.scrollingBlock li a.seeAll {
	position:absolute;
	bottom:0;
	right:10px;
	width:340px;
	text-align:right;
	padding:105px 0 5px 0;
	z-index:200;
	background:url(/images/spacer.gif);
}
dl.landingGroup dd span {
	display:block;
	width:50;
	font-size:30px;
	line-height:30px;
	color:#FFFFFF;
	padding:30px 0 0 140px;
}
dl.landingGroup dd li img.thumb {
	position:absolute;
	left:0;top:0;z-index:1;
}
dl.landingGroup dd div.scrollingWindow ul.scrollingBlock li em {
	position:relative;
	margin-right:8px;
	padding:5px 0 5px 5px;
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/counter-left.png) no-repeat left center;
}
dl.landingGroup dd div.scrollingWindow ul.scrollingBlock li em img {position:absolute;top:2px;right:-6px;}

/* ========================================== HOW TO/STYLIST/HAIRCARE GENERAL === */
.stepsIntro {min-height:50px;padding:15px 15px 10px 15px;border-bottom:1px solid #000000;}
.stepsIntro .shareLinks {float:right;width:117px;height:37px;padding:8px 8px;;background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/shareLinks-bg.png) no-repeat center top;font-size:11px;color:#e1e1e1;line-height:13px;}
.stepsIntro p {font-size:15px;color:#e1e1e1;line-height:18px;}

/* ========================================== HOW TO DETAILS === */
body#stylistTips.howTodetails {background:#000000 url(/images/stylistTips-bg.jpg) no-repeat center top;}
body#stylistTips.howTodetails #right #relatedProducts {display:none;}
body.howTodetails h1 {padding-bottom:10px;}
#howToVideo {position:relative;z-index:1;min-height:80px;padding:35px 10px 13px 10px;background:url(/images/stylingTips-shelf.png) no-repeat center bottom;}
#howToVideo #video {background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/howto-video-bg.png) no-repeat center bottom;}
#howToVideo #video div {width:640px;margin:0 auto;}

#howToInfo {position:relative;padding:13px;background:#000000 url(/images/tabs-details-bg.jpg) no-repeat center top; min-height:344px;}
#howToInfo .flashProducts {position:absolute;left:13px;top:13px;z-index:10;}
#howToInfo .stepsInfo {margin-left:200px;}
#howToInfo .stepsIntro {
	border-bottom:none;
	min-height:60px;
	padding:0;
}

#howToInfo .stepsInfo dl dt {float:left;clear:both;width:50px;margin-bottom:23px;position:relative;top:-8px;}
#howToInfo .stepsInfo dl dd {clear:right;margin-left:60px;font-size:13px;line-height:15px;color:#cccccc;margin-bottom:23px; padding:0;}
#howToInfo .stepsInfo dl dd img {float:right;position:relative;left:5px;margin:0 0 15px 15px;width:149px;height:96px;}
#howToInfo .stepsInfo dl dd a {color:#59b3ff;font-style:italic;}
#howToInfo .stepsInfo dl dd a:hover {text-decoration:underline;}

/* ========================================== HOW-TO GROUP PAGE === */
body#stylistTips.howToGroup {background:#000000 url(/images/stylistTips-bg.jpg) no-repeat center top;}
body.howToGroup h1 {padding-bottom:10px;}
#groupTitles {position:relative;z-index:1;min-height:80px;padding:35px 10px 13px 7px;background:url(/images/stylingTips-shelf.png) no-repeat center bottom;}
body.howToGroup #groupTitles div img {position:absolute;left:155px;top:3px;}

#howToGroup {position:relative;background:url(/images/tabs-details-bg.jpg) no-repeat center top; min-height:344px;}

#howToGroup .stepsInfo ul {padding:10px 15px;}
#howToGroup .stepsInfo ul li {
	clear:left;
	position:relative;
	margin:8px 0;
	width:701px;
	height:93px;
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/groups-bg.png) no-repeat left center;}
#howToGroup .stepsInfo ul li:hover {background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/groups-bg-hover.png) no-repeat left center;}
#howToGroup .stepsInfo ul li:hover a.videoLink {border:1px solid #FFFFFF;}
#howToGroup .stepsInfo ul li:hover a.videoLink span {background:url(/images/icons/video-play-over.png) no-repeat center center;}
#howToGroup .stepsInfo ul li dl {
	padding:3px 4px 5px 4px;
}
#howToGroup .stepsInfo ul li dt {float:left;width:121px;padding:20px 0 0 15px;font-size:18px;}
#howToGroup .stepsInfo ul li dd {margin-left:170px;padding:17px 100px 0 0;}
#howToGroup .stepsInfo ul a.videoLink {float:left;margin-right:10px;margin-bottom:15px;}
#howToGroup .stepsInfo ul li dd p {padding:0;font-size:14px;font-weight:100;line-height:17px;}
#howToGroup .stepsInfo ul li dd p a {display:block;color:#FFF;font-size:10px;}
#howToGroup .stepsInfo ul li a.invLink {
	position:absolute;
	width:701px;
	height:93px;
	top:0;
	left:0;
}


/* ========================================== TIPS GROUP PAGE === */
body#stylistTips.tipsGroup {background:#000000 url(/images/stylistTips-bg.jpg) no-repeat center top;}
body.tipsGroup h1 {padding-bottom:10px;}
body.tipsGroup #groupTitles div img {position:absolute;left:95px;top:3px;}

#tipsGroup {position:relative;background-color:#000000;background-image:url(/images/tabs-details-bg.jpg);background-repeat:no-repeat;background-position:center top; min-height:344px;}
#tipsGroup .stepsInfo ul {padding:10px 15px;}
#tipsGroup .stepsInfo ul li {
	clear:left;
	overflow:visible;
	position:relative;
	padding:10px 0;
	width:701px;
}
#tipsGroup .stepsInfo ul li dl {
	padding:3px 4px 5px 4px;
}
#tipsGroup .stepsInfo ul li dt {float:left;position:relative;width:53px;height:45px;text-transform:uppercase;font-size:10px;font-weight:100;background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/tips-numbers-bg.png) no-repeat right top;}
#tipsGroup .stepsInfo ul li dt span {position:absolute;left:-2px;top:0;width:50px;}
#tipsGroup .stepsInfo ul li dd {margin-left:72px;padding:9px 75px 0 0;font-size:14px;font-weight:100;line-height:16px;}
#tipsGroup .stepsInfo ul a.videoLink {float:left;margin-right:10px;}
#tipsGroup .stepsInfo ul li dd a {font-style:italic !important;}
#tipsGroup .stepsInfo ul li dd a:hover {text-decoration:underline;}

/* ========================================== STYLIST === */
body#stylistTips.stylist {background:#000000 url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/stylist-tips-bg.jpg) no-repeat center top;}
body#stylistTips.stylist #mainColumn {width:100%;padding-top:5px;float:left;}
#pageInfo {float:left;width:260px;padding:0 8px;}
#pageInfo h1 {padding:40px 0 20px 0; position:relative;left:-2px;width:100%;}
#pageInfo p {width:250px; font-size:13px;}
#ourStylists {margin-left:330px;}
#ourStylists div.stylistInfo {position:relative;width:527px;margin-bottom:20px;padding:15px 15px 5px 15px;background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/stylistInfo-bg.jpg) no-repeat left top;}
#ourStylists div.stylistInfo p {color:#e1e1e1;font-size:13px;}
#ourStylists div.stylistInfo em {font-style:italic;font-weight:100;}
div.stylistInfo .stylistHeader {position:relative;height:80px;padding:40px 0 0 135px;}
div.stylistInfo .stylistHeader img {position:absolute;top:0;left:-4px;}
div.stylistInfo .stylistHeader h2 {font-size:30px;color:#eaeaea;}
div.stylistInfo .stylistHeader p.subTitle {color:#ababab !important;font-style:italic;}
body#stylistTips.stylist p.more {background:url(/images/line-horizontal-short.png) no-repeat left top;padding:5px 0 0 0;margin:5px 0 0 0;}
span.spanOn { visibility:visible;}
span.spanOff { visibility:hidden;}
img.stylistShadow {position:absolute;left:-20px;bottom:-10px;z-index:-1;}

/* ========================================== HOW-TOS PAGE === */
body#stylistTips.howTos {background:#000000 url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/stylist-tips-bg.jpg) no-repeat center top;}
body#stylistTips.howTos #mainColumn {width:100%;padding-top:5px;float:left;}
#howTosInfo {float:left;width:290px;padding:0 8px;}
#howTosInfo h1 {padding:20px 0 10px 0;position:relative;left:-2px;width:100%;}
#howTosInfo p {width:250px; font-size:13px;}
#howTosInfo a.meetTSButton {display:block;width:267px;height:1px;overflow:hidden;margin:20px 0;padding-top:32px;text-align:right;
background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/meet-the-stylist.png) no-repeat left top;}
#landingInfo a.meetTSButton:hover {background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/meet-the-stylist-hover.png) no-repeat left top;}

div.featured {margin-left:325px;}

div#howTosBlocks {clear:both;padding-top:20px;}
html>body div#howTosBlocks ul li {float:left;position:relative;width:318px;height:140px;padding:2px 4px 4px 4px; background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/how-tos-bg.pngg) no-repeat center center;}
html>body div#howTosBlocks ul li:hover {background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/how-tos-bg-hover.pngg) no-repeat center center;}

div#howTosBlocks ul li span {
	display:block;
	width:50;
	font-size:30px;
	line-height:30px;
	color:#FFFFFF;
	padding:18px 0 0 145px;
}
div#howTosBlocks ul li img.howToImg {
	position:absolute;
	left:15px;top:8px;
}
div#howTosBlocks ul a {color:#e2e2e2;font-size:10px;text-transform:uppercase;}
div#howTosBlocks ul a:hover {color:#e2e2e2;}
div#howTosBlocks ul a.hoverLink {position:absolute;top:0;left:0;width:318px;height:110px;z-index:100;}
div#howTosBlocks ul a.seeAll {position:absolute;right:15px;bottom:13px;width:295px;text-align:right;padding:105px 0 0 0;
	background:url(/images/spacer.gif);
	z-index:200;
}
div#howTosBlocks ul li em {
	position:relative;
	margin-right:8px;
	padding:5px 0 5px 5px;
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/counter-left.png) no-repeat left center;
}
div#howTosBlocks ul li em img {position:absolute;top:2px;right:-6px;}




dl.featuredSlider {
	width:637px;
	height:181px;
	padding:0;
	background:none;
	position:relative;
}
dl.featuredSlider img.shadow {position:absolute;left:-26px;bottom:-9px;}
dl.featuredSlider dd {position:relative;padding:0;}
dl.featuredSlider dd a.left,
dl.featuredSlider dd a.right {
	position:absolute;
	top:0;
	display:block;
	height:181px;
	width:44px;
	z-index:100;
}
dl.featuredSlider dd a.left {left:0;}
dl.featuredSlider dd a.right {right:0;}

dl.featuredSlider dd a.leftReplace,
dl.featuredSlider dd a.rightReplace {
	position:absolute;
	background:#0F0;
	height:181px;
	width:44px;
	z-index:200;
}
dl.featuredSlider dd a.left {
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/arrow-left.png) no-repeat center center;
	visibility:hidden;
}
dl.featuredSlider dd a.left:hover {
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/arrow-left-hover.png) no-repeat center center;
}
dl.featuredSlider dd a.leftReplace {
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/arrow-left.png) no-repeat center center;
	left:0;
	filter:alpha(opacity=40);
	opacity: 0.4;
	-moz-opacity:0.4;
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
	-khtml-opacity: 0.4;
	-ms-filter: �progid:DXImageTransform.Microsoft.Alpha(Opacity=40)�;
}
dl.featuredSlider dd a.right {
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/arrow-right.png) no-repeat center center;
}
dl.featuredSlider dd a.right:hover {
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/arrow-right-hover.png) no-repeat center center;
}
dl.featuredSlider dd a.rightReplace {
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/arrow-right.png) no-repeat center center;
	right:4px;
	filter:alpha(opacity=40);
	opacity: 0.4;
	-moz-opacity:0.4;
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
	-khtml-opacity: 0.4;
	-ms-filter: �progid:DXImageTransform.Microsoft.Alpha(Opacity=40)�;
}
dl.featuredSlider dd div.scrollingWindow {
	float:left;
	height:181px;
	width:637px;
	overflow:hidden;
	position:relative;
}
dl.featuredSlider dd div.scrollingWindow ul.scrollingBlock {
	position:absolute;
	left:0;
	top:0;
	list-style-position:inside;
}
dl.featuredSlider dd div.scrollingWindow ul.scrollingBlock li {
	position:relative;
	height:131px;
	width:527px;
	padding:25px 55px;
	float:left;
}
dd div.scrollingWindow ul.scrollingBlock li.slide1 {
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/featured-bg.jpg) no-repeat center center;
}
dd:hover div.scrollingWindow ul.scrollingBlock li.slide1 {
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/featured-bg-hover.jpg) no-repeat center center;
}
dd div.scrollingWindow ul.scrollingBlock li.styling {
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/featured-styling.jpg) no-repeat center center;
}
dd:hover div.scrollingWindow ul.scrollingBlock li.styling {
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/featured-styling-hover.jpg) no-repeat center center;
}
dd div.scrollingWindow ul.scrollingBlock li.hairCare {
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/featured-haircare.jpg) no-repeat center center;
}
dd:hover div.scrollingWindow ul.scrollingBlock li.hairCare {
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/featured-haircare-hover.jpg) no-repeat center center;
}
dl.featuredSlider dd p {width:260px;color:#e2e2e2;font-size:13px;line-height:16px;}
dl.featuredSlider dd p.subTitle {color:#e2e2e2;font-size:9px;}
dl.featuredSlider dd a.watchVideo {width:170px;color:#e2e2e2;display:block;margin-top:10px;}


.shareLinks {text-transform:uppercase;}