@charset "UTF-8";

/* CSS Document Alberto Culver- TRESEMME 2.0	*/
/* --------------------------------------------- */
/* Developed by: Hristo Hristov                  							*/
/* Created: 05/09/2010                           							*/
/* Updated: 06/24/2010 - Hristo Hristov          					*/
/* --------------------------------------------- */

/* ========================================== LAYOUT CODE === */


/* ========================================== NEWS ARTICLES === */
body#awards.news {background:#000000 url(/images/background-dark.jpg) no-repeat center top;}
body#awards.news #mainColumn {width:100%;padding-top:20px;float:left;}
#newsInfo {padding:0 7px;}
#newsInfo h1 {padding:20px 0; position:relative;left:-2px; width:100%;}

ul.articlesBlocks {clear:both;height:300px;margin:0 0 20px 7px;}
ul.articlesBlocks li {float:left;width:228px;margin-bottom:10px;
	padding-left:20px;
	background:url(/images/line-vertical-short.png) no-repeat left center;}
ul.articlesBlocks > li {min-height:300px;}
ul.articlesBlocks li.first {padding-left:0;background:none;}
ul.articlesBlocks li.nobg {background:none;}

ul.articlesBlocks li img.newsImg {position:relative;left:-5px;}
ul.articlesBlocks li h2 {padding:10px 20px 5px 0;}
ul.articlesBlocks li h2 a {font-size:18px;text-transform:none;color:#e1e1e1;}
ul.articlesBlocks li h2 a:hover {color:#fff;}
ul.articlesBlocks li h2 a img {padding:0 5px;}
ul.articlesBlocks li h2 a span {position:relative;top:-2px;visibility:hidden;font-size:11px;font-style:italic;font-weight:100;}
ul.articlesBlocks li h2 a:hover span {visibility:visible;}
ul.articlesBlocks li p {font-size:12px;font-weight:100;line-height:17px;padding-right:35px;}
ul.articlesBlocks li p a {font-size:11px;font-style:italic;color:#fff;}
ul.articlesBlocks li p a:hover {text-decoration:underline;}

/* ==================== LANDING PAGE === REUSES NEWS ARTICLES ======= */
body#awards.landing {background:#000000 url(/images/background-dark.jpg) no-repeat center top;}
body#awards.landing #mainColumn {width:100%;padding-top:20px;float:left;}

ul.offers li {width:213px;height:91px;background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/awards/offers-bg.png) no-repeat center center;}
ul.offers li:hover {background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/awards/offers-bg-hover.png) no-repeat center center;}
ul.offers li img {padding:20px 0 0 10px;}

.viewAllLink {padding-left:500px;clear:both;}
.viewAllLink a {font-size:10px;padding:3px 20px;text-transform:uppercase;background:url(/images/icons/arrow-square.jpg) no-repeat right center;}
.viewAllLink a:hover {background:url(/images/icons/arrow-square-hover.jpg) no-repeat right center;}


/* ========================================== BEAUTY AWARDS === */
body#awards.beautyAwards {background:#000000 url(http://cdn-sm.tresemme.com/Tresemme/US/files/awards/awards-bg.jpg) no-repeat center top;}
body#awards.beautyAwards #mainColumn {width:100%;padding-top:20px;float:left;}

.beautyAwards #newsInfo h1 {padding:20px 0 10px 0;}
.beautyAwards #newsInfo p {font-size:13px;width:300px;}

div.productsShelf {clear:both;padding-left:10px;}
div.productsShelf ul {clear:both;height:280px;}
div.productsShelf li {float:left;position:relative;width:265px;height:280px;background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/awards/shelf-bg-left.png) no-repeat center bottom;}

div.productsShelf li dt {position:absolute;width:127px;height:280px;text-align:center;}
div.productsShelf li:hover dt {background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/awards/shelf-product-glow.png) no-repeat center 25px;}
div.productsShelf li dt div {position: absolute;margin: 0pt auto; width: 127px;left:0; bottom: 50px;text-align:center;}
div.productsShelf li dd {position:absolute;left:120px;bottom:70px;}
div.productsShelf li dd h4 {font-size:17px; padding-bottom:10px;color:#FFF;}
div.productsShelf li dd a {font-size:12px;color:#e9e9e9;}
ul.secondLine li + li {background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/awards/shelf-bg-left.png) no-repeat -40px bottom;}
ul.secondLine li + li + li {background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/awards/shelf-bg-left.png) no-repeat center bottom;}

div.productsShelf li.shelfEnd {width:24px;background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/awards/shelf-bg-right.png) no-repeat right bottom;}
div.productsShelf li.awardSeal {width:140px;background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/awards/shelf-bg-left.png) no-repeat left bottom;}
div.productsShelf li.awardSeal img {padding-top:40px;}
ul.secondLine li.awardSeal {width:140px;background:none;}


/* ========================================== ARTICLE DETAILS === */
body#awards.articleDetails {background:#000000 url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/stylist-tips-bg.jpg) no-repeat center top;}
#groupTitles {position:relative;z-index:1;min-height:100px;padding:35px 10px 13px 7px;background:url(/images/stylingTips-shelf.png) no-repeat center bottom;}
#groupTitles.withGallery {position:relative;z-index:1;min-height:0px;padding:35px 0px 0px 0px;background:none;}
#groupTitles.withGallery div.h2title,#groupTitles.withGallery h1 {padding-left:7px;}

#videoSlider {position:relative;z-index:1;min-height:300px;padding:35px 10px 13px 10px;background:url(/images/product-detail-shelf.png) no-repeat center bottom;}
#groupTitles h1.initiativeTitle + #videoSlider {padding-top:0px;}
#groupTitles p {width:600px;font-size:16px;font-weight:100;line-height:19px;margin-bottom:20px;}
div.banner {position:relative;text-align:center;top:5px;}
div.banner img.shadow {position:absolute;left:-3px;bottom:-7px;z-index:-1;}
/*body.articleDetails #groupTitles div img {position:absolute;left:155px;top:3px;}*/

a.archiveLink {position:absolute; right:0; top:0;text-transform:uppercase;font-size:11px;font-weight:bold;z-index:100;}
div.archiveLink {position:absolute; right:0; top:0;text-transform:uppercase;font-size:11px;font-weight:bold;z-index:100;}
div.archiveLink ul {position:absolute; right:5px; top:1em;z-index:110; visibility:hidden;width:200px;text-align:right;}
div.archiveLink:hover ul {visibility:visible;}

#articleText {position:relative;padding:15px;
	background:url(/images/tabs-details-bg.jpg) no-repeat center top; 
	min-height:290px;
}
#articleText h1 {color:#ffffff;max-width:567px;}
#articleText p {color:#ababab;font-size:14px;line-height:20px;padding-bottom:20px;}
#articleText p em {font-weight:normal !important;font-style:italic !important;}
.articleIntro {height:80px;}

#articleText .shareLinks,
.articleIntro .shareLinks {float:right;height:37px;padding:8px 8px;;background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/awards/shareLinks-bg.png) no-repeat center top;font-size:11px;color:#e1e1e1;line-height:13px;} /*width:117px;*/

#articleText .shareLinks {}
.articleIntro .shareLinks {}

.articleIntro p {font-size:15px;color:#ababab;line-height:18px;}
.shareLinks {text-transform:uppercase;}
#articleText .textSeparator {text-align:center;clear:left;}
#articleText a {color:#fff;text-decoration:underline;}
#articleText a:hover {color:#fff;text-decoration:underline;}
#articleText h4 {font-size:14px;color:#e2e2e2;text-transform:uppercase;font-weight:100;}
#articleText h5 {font-size:24px;color:#ababab;font-style:italic;text-transform:uppercase;font-weight:100;z-index:1000;}
#articleText img.articleImage {float:left;margin:0 15px 15px 0;}
h5.quoteBox {width:280px;float:left;margin:0 10px 5px 0;padding:2px 15px 5px 15px;background:url(/images/icons/quotes-start.png) no-repeat left 3px;}
h5.quoteBox img {position:relative;bottom:7px;left:2px;}

#articleText ul.list {font-size:14px;line-height:20px;color:#ababab;padding-left:20px;list-style-image:url(/images/icons/list-bullets-med.gif);}
#articleText ul.list li {padding-bottom:15px;}

div.mGallery {width:176px;float:left;margin-right:25px;}
div.mGallery li {position:relative;padding:15px 0;min-height:45px;font-size:10px;
	text-transform:uppercase;font-weight:bold;color:#ababab;
	border-bottom:1px solid #565656;
}

#articleText div.mGallery li a:hover {text-decoration:none;color:#fff;}
div.mGallery li a.videoLink {float:left;margin-right:10px;}
div.mGallery li a.imageLink {float:left;margin-right:10px;}

div.mGallery li:hover a.videoLink {border:1px solid #FFFFFF;}
div.mGallery li:hover a.videoLink span {background:url(/images/icons/video-play-over.png) no-repeat center center;}
div.mGallery li:hover {color:#fff;}
div.mGallery a.bottomArrow {position:relative;z-index:10;bottom:1px;}


/*Video Slider setup*/
#videoSlider > div {width:642px;margin:0 auto;}
#videoSlider img.videoShadow {position:absolute;bottom:7px;left:18px;}
#videoSlider .video {position:relative;background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/awards/video-slider-bg.jpg) no-repeat left top;padding:1px;}
#videoSlider .video #galleryTop .wraptocenter {height:360px;width:640px;}
#videoSlider .video .videoDesc {position:absolute;bottom:0;left:300px;}
#videoSlider #descText {
	margin-top:1px;padding:12px 16px;
	background:#171717;
}
#videoSlider #descText p {font-size:12px;}
#videoSlider #descText a {color:#CCC;}
#videoSlider #descText a:hover {color:#fff;}
#videoSlider #descText .description {font-size:12px;}
#videoSlider #descText h3 {text-transform:uppercase;color:#e2e2e2;}
#videoSlider .videoDip {background:#171717;margin-top:1px;}

dl.videoDip {
	width:642px;
	height:69px;
	padding:0;
	background:none;
	position:relative;
}
dl.videoDip img.shadow {position:absolute;left:-26px;bottom:-9px;}
dl.videoDip dd {position:relative;padding:0;}
dl.videoDip dd a.left,
dl.videoDip dd a.right {
	position:absolute;
	top:0;
	display:block;
	height:69px;
	width:44px;
	z-index:100;
}
dl.videoDip dd a.left {left:-44px;}
dl.videoDip dd a.right {right:-44px;}

dl.videoDip dd a.leftReplace,
dl.videoDip dd a.rightReplace {
	position:absolute;
	display:block;
	background:#0F0;
	height:69px;
	width:44px;
	z-index:200;
}
dl.videoDip 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.videoDip 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.videoDip dd a.leftReplace {
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/arrow-left.png) no-repeat center center;
	left:-44px;
	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.videoDip dd a.right {
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/arrow-right.png) no-repeat center center;
}
dl.videoDip 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.videoDip dd a.rightReplace {
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/arrow-right.png) no-repeat center center;
	right:-44px;
	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.videoDip dd div.scrollingWindow {
	float:left;
	height:69px;
	width:640px;
	overflow:hidden;
	position:relative;
}
dl.videoDip dd div.scrollingWindow ul.scrollingBlock {
	position:absolute;
	left:0;
	top:0;
	list-style-position:inside;
}
dl.videoDip dd div.scrollingWindow ul.scrollingBlock li {
	position:relative;
	float:left;
	height:45px;
	width:191px;
	padding:12px;
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/awards/video-divider.png) no-repeat right top;
}
dl.videoDip dd div.scrollingWindow ul.scrollingBlock li a span{
	text-transform:none;
}
dl.videoDip dd div.scrollingWindow ul.scrollingBlock li.selected {
	background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/awards/video-divider-selected.png) no-repeat right top;
}
ul.scrollingBlock li:hover a {color:#e8e8e8;}
dl.videoDip dd a {text-transform:uppercase;font-size:10px;}
ul.scrollingBlock li:hover a.videoLink {border:1px solid #FFFFFF;}
ul.scrollingBlock li:hover a.videoLink span {	background:url(/images/icons/video-play-over.png) no-repeat center center;}
dl.videoDip .videoLink,
dl.videoDip .imageLink {float:left;margin-right:10px;text-align:center;}


/* ========================================== STYLE NEWS === */
body#awards.styleNews {background:#000000 url(http://cdn-sm.tresemme.com/Tresemme/US/files/awards/awards-bg.jpg) no-repeat center top;}
body#awards.styleNews #mainColumn {width:100%;padding-top:20px;float:left;}
body#awards.styleNews #newsInfo {text-align:center;}
body#awards.styleNews #newsInfo div {position:relative;top:25px;padding:9px 21px 7px 21px;background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/awards/flash-landing-bg.png) no-repeat center center;}


/* ========================================== SAVINGS === */
body#awards.savings {background:#000000 url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/stylist-tips-bg.jpg) no-repeat center top;}
body#awards.savings #mainColumn {width:100%;padding-top:25px;float:left;}
#savingsInfo {float:left;width:290px;padding:0 10px;}
#savingsInfo h1 {padding:5px 0 20px 0;}
#savingsInfo p {width:250px; font-size:13px;}
#savingsInfo 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;}
#savingsInfo a.meetTSButton:hover {background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/stylist-tips/meet-the-stylist-hover.png) no-repeat left top;}

p.past {margin-left:325px;text-transform:uppercase;padding:10px 0 0 0;}
ul.savingsBanners {margin:0 0 0 325px;}
ul.savingsBanners li {position:relative;width:558px;height:145px;margin:8px 0;padding:1px;background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/awards/savings-blocks-bg.jpg) no-repeat center center;}
ul.savingsBanners li:hover {background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/awards/savings-blocks-bg-hover.jpg) no-repeat center center;}
ul.savingsBanners li.over div {
	opacity: 0.3;
	filter:alpha(opacity=30);
	-moz-opacity:0.3;
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
	-khtml-opacity: 0.3;
	-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=30)”;
}
ul.savingsBanners li.over span {display:block;position:absolute;width:270px;height:30px;top:60px;left:150px;background:#000;color:#fff;text-align:center;}
ul.savingsBanners li.over:hover {background:url(http://cdn-sm.tresemme.com/Tresemme/US/files/awards/savings-blocks-bg.jpg) no-repeat center center;}

.freshstartAd {
	color:#ffde26;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
}

.freshstartAdHeader {
	color:#ffde26;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
}
