/* MINI_FEATURE styles */
.mini-feature .content-title { margin-bottom: 10px; }

#home .container { margin-top: 10px;}
#home .container#promotion { padding: 0 0 0 15px; border-left: 1px solid #eee; margin-right: 0; }
#home .container#promotion h3 {
    background: url("/en_US/_images/content/company/icon_bulb.png") no-repeat scroll left center transparent;
    padding: 5px 0 5px 20px;
}

/* shell */
.mf-wrapper { margin: 0 0 20px 0; padding: 10px; border: 1px solid #cccccc; background: #fff; position: relative; }
#home .mf-wrapper { margin: 0; padding: 0; border: none; background: none; }
	.mf-image-wrapper { margin: 0 0 20px 0; padding: 0; border: 0px solid #cccccc; background: #fff; position: relative; }
.mf-body { position: relative; width: 100%; background: #eeeeee; }
#home .mf-body { background: none;}
/* content */
.mf-content { position: relative; z-index: 1; background: #eeeeee; overflow: hidden; }
.mf-content .mf-image, .mf-content .mf-text { overflow: hidden; }
#home .mf-content { background: none; }
	.mf-image img { display: block; }
	.mf-image img.vjs-poster { position: absolute; margin: auto; top:0; bottom:0; }
.mf-text { width: auto; padding: 15px 20px 5px 20px; }
#home .mf-text { padding: 0; }
	.mf-text .text-title { font-weight: bold; padding-bottom: 3px; }
	.mf-text p, .mf-text ul { margin: 0; padding: 0 0 15px 0; }

.mini-feature ul.body-list { margin-left: -10px; }

/* controls */
.mf-controls { margin: 0; padding: 0; width: 100%; height: 50px; position: relative; bottom: 0; z-index: 10; background: #eeeeee; }
#home .mf-controls { background: none; }
	.mf-count { padding-left: 20px; color: #444; font-size: 1em; line-height: 30px; }
	
/* paging */	
.mf-controls a { display: block; width: 30px; height: 30px; text-indent: -9999px; overflow: hidden; position: relative; }
.mf-controls a.disabled { cursor: default; }
	.mf-prev { position: absolute; top: 0; right: 55px;}
		.mf-prev a { background: url('/en_US/_images/mini_features/icons/leftarrow-gray.png') 0 0 no-repeat; }
		.mf-prev a.disabled { background-image: url('/en_US/_images/mini_features/icons/leftarrow-gray-disabled.png'); }
	.mf-next { position: absolute; top: 0; right: 20px; }
		.mf-next a { background: url('/en_US/_images/mini_features/icons/rightarrow-gray.png') 0 0 no-repeat; }
		.mf-next a.disabled { background-image: url('/en_US/_images/mini_features/icons/rightarrow-gray-disabled.png'); }

/* IE 6 - spans are injected dynamically for IE6 only */
* html .mf-controls a { background: url('/en_US/_images/d.gif') !important; }
.mf-controls a span { position: absolute; top: 0; left: 0; width: 30px; height: 30px; }
.mf-controls a span.active { cursor: pointer }
.mf-controls a.disabled span.disabled { display: block; }
.mf-controls a span.disabled, .mf-controls a.disabled span.active { display: none; }
.mf-prev a span.disabled { background-image: url('/en_US/_images/mini_features/icons/leftarrow-gray-disabled.png'); }
.mf-prev a span.active { background-image: url('/en_US/_images/mini_features/icons/leftarrow-gray.png'); }
.mf-next a span.disabled { background-image: url('/en_US/_images/mini_features/icons/rightarrow-gray-disabled.png'); }
.mf-next a span.active { background-image: url('/en_US/_images/mini_features/icons/rightarrow-gray.png'); }

/* variations */
.mf-background {}
	.mf-background .mf-image { position: relative; border: 0; z-index: 1; }
	.mf-background .mf-text { position: absolute; bottom: 0; left: 0; padding-right: 240px; z-index: 2; }
	.mf-background .mf-controls { position: relative; margin-top: -50px; z-index: 3; }

.mf-invert {}
	.mf-invert .mf-count { color: white; }
	.mf-invert .mf-prev a { background-image: url('/en_US/_images/mini_features/icons/leftarrow-white.png'); }
	.mf-invert .mf-prev a.disabled { background-image: url('/en_US/_images/mini_features/icons/leftarrow-white-disabled.png'); }
	.mf-invert .mf-next a { background-image: url('/en_US/_images/mini_features/icons/rightarrow-white.png'); }
	.mf-invert .mf-next a.disabled { background-image: url('/en_US/_images/mini_features/icons/rightarrow-white-disabled.png'); }
	
.mf-pantene {
	clear: both;
	border-top: 1px solid #cccccc;
	padding-top: 15px;
}
	.mf-pantene img { float: left; }
	.mf-pantene p { float: right; width: 263px; }
	
/* IE 6 - spans are injected dynamically for IE6 only */
.mf-invert .mf-prev a span.disabled { background-image: url('/en_US/_images/mini_features/icons/leftarrow-white-disabled.png'); }
.mf-invert .mf-prev a span.active { background-image: url('/en_US/_images/mini_features/icons/leftarrow-white.png'); }
.mf-invert .mf-next a span.disabled { background-image: url('/en_US/_images/mini_features/icons/rightarrow-white-disabled.png'); }
.mf-invert .mf-next a span.active { background-image: url('/en_US/_images/mini_features/icons/rightarrow-white.png'); }


/* javascript/flash tweaks */
.flash-enabled .mini-feature .content-title { margin-bottom: 0.5em; }
.js-enabled .mf-image { border-bottom: 10px solid white; }
.js-enabled .mf-background .mf-image { border-bottom: 0; }
.flash-enabled .mf-downloads { position: absolute; left: -9999px; }

.mf-nojs {}
	.mf-nojs .mf-text { padding-bottom: 0; }


/* watch video button */
.new-video-button {	
	background: none repeat scroll 0 0 transparent;
	background-color: white;
	
	background-image: linear-gradient(bottom, rgb(239,239,239) 0%, rgb(255,255,255) 75%);
	background-image: -o-linear-gradient(bottom, rgb(239,239,239) 0%, rgb(255,255,255) 75%);
	background-image: -moz-linear-gradient(bottom, rgb(239,239,239) 0%, rgb(255,255,255) 75%);
	background-image: -webkit-linear-gradient(bottom, rgb(239,239,239) 0%, rgb(255,255,255) 75%);
	background-image: -ms-linear-gradient(bottom, rgb(239,239,239) 0%, rgb(255,255,255) 75%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(239,239,239)),
		color-stop(0.75, rgb(255,255,255))
	);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#efefef'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#efefef')"; /* IE8 */
	
	border: 1px solid #ccc;
	color: #444;
	font-size: 0.9em;
    font-weight: bold;
    padding: 7px 9px;
    text-transform: uppercase;
}
.new-video-button:hover {	
	background: none repeat scroll 0 0 transparent;
	background-color: #efefef;
	
	background-image: linear-gradient(bottom, rgb(220,220,220) 0%, rgb(239,239,239) 75%);
	background-image: -o-linear-gradient(bottom, rgb(220,220,220) 0%, rgb(239,239,239) 75%);
	background-image: -moz-linear-gradient(bottom, rgb(220,220,220) 0%, rgb(239,239,239) 75%);
	background-image: -webkit-linear-gradient(bottom, rgb(220,220,220) 0%, rgb(239,239,239) 75%);
	background-image: -ms-linear-gradient(bottom, rgb(220,220,220) 0%, rgb(239,239,239) 75%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(220,220,220)),
		color-stop(0.75, rgb(239,239,239))
	);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#efefef', EndColorStr='#c8c8c8'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#efefef', EndColorStr='#c8c8c8')"; /* IE8 */
	
    text-decoration: none;
}
#innovations-index.new-video-button {
	position: relative;
	top: 8px;
	left: 27px;
}

/* one-off styles */
#prestobarba-sizable-reach .mf-image {
	width: 517px;
	height: 182px;
	background: url('/en_US/_images/mini_features/prestobarba-illus-01-notext.jpg') no-repeat scroll 0 0;
}

#prestobarba-sizable-reach .mf-image p {
	padding-left: 25px;
	width: 225px;
    margin: 6px 0 0 0;
}

#prestobarba-sizable-reach .mf-image p.grey-text {
	font-family: "Frutiger Next Medium";
	color: #666;
	font-size: 1.2em;
    line-height: 1.15em;
}

#prestobarba-sizable-reach .mf-image p.orange-text {
	font-family: "Frutiger Next Bold";
	color: #f75e00;
	font-size: 1.65em;
    line-height: 1.15em;
}


/*******
 * Styles for all marquee slideshows on site. 
 ******/
#sustainability.category #lead, #company.category #lead {
	margin: 0 0 20px 0;
	height: auto;
}

#sustain_marquee, #sustain_marquee .marquee-viewport, #sustain_marquee .marquee-panel,
#company_marquee, #company_marquee .marquee-viewport, #company_marquee .marquee-panel,
#hom_marquee, #home_marquee .marquee-viewport, #home_marquee .marquee-panel {
	min-height: 390px;
	max-height: 450px;
	width: 935px; /* You must explicitly state the width for these 3 selectors for any marquee element.  Change the ID to reflect your ID.  It must be the same width for all 3 selectors. */
	overflow: hidden;
}

#sustain_marquee .marquee-panels,
#company_marquee .marquee-panels,
#home_marquee .marquee-panels,
#social_marquee .marquee-panels {
	opacity: 0;
}

#sustain_marquee .marquee-panel .overlay,
#company_marquee .marquee-panel .overlay,
#home_marquee .marquee-panel .overlay {
	background: center left no-repeat;
	position: relative;
	z-index: 10;
	width: 935px; height: 390px;
}
#home_marquee div.overlay .text2,
#sustain_marquee div.overlay .text2 {
	color: white;
	position: absolute;
	font-family: "Frutiger Next Bold",Arial,Helvetica,sans-serif;
    font-size: 30px;
    left: 30px !important;
    line-height: 36px;
    top: 156px;
    width: 380px;
}

#home_marquee div.report .text2,
#sustain_marquee div.report .text2 {
	font-size:19px;
	line-height:24px;
}

.overlay .body1 {
    font-family: "Frutiger Next Medium","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
    font-size: 14px;
    line-height: 1.5;
    width: 320px;
}
#sustain_marquee div.overlay.waste .text2 {
	top: 110px;
}
.overlay a.link1, .overlay a.video-link {
	color: white !important;
	position: absolute;
    background: url("/en_US/_images/home-marquee-arrow.png") no-repeat scroll 0 4px transparent;
    font-family: "Frutiger Next Bold","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif !important;
    font-size: 14px;
    padding: 0 0 0 17px;
    top: 280px;
    left: 30px;
}

.report a.link1 {
	top:325px;
}

div.overlay.report .text2,
div.overlay.report .text1,
div.overlay.report .text3,
div.overlay.report a.link1 {
	color: #0046ac !important;
}
div.overlay .text1 {
	position: absolute;
	left: 30px;
	top: 90px;
}
div.overlay.report .text1 {
    background: url("/en_US/_images/content/home/feature_sr2014/sr2014_thumb.png") no-repeat left center;
    padding: 20px 0 15px 95px;
}
#sustain_marquee div.overlay.csdw .text2 {
	top: 140px;
}
div.overlay.csdw .text3 {
	position: absolute;
	left: 30px;
	top: 220px;
	color: white;
}

li.marquee-panel div.overlay img {
	position: absolute;
	left: -500px;
	top: 0;
	/* visibility: hidden; */
}

#company_marquee li.current div.overlay.slide-1 img.text1 {
	left: 604px;
	top: -200px;
}
#company_marquee li.current div.overlay.slide-1 img.text2 {
	left: -300px;
	top: 200px;
}
#company_marquee li.current div.overlay.slide-2 img.text1 {
	left: 31px;
	top: -200px;
}
#company_marquee li.current div.overlay.slide-2 img.text2 {
	left: 1000px;
	top: 224px;
}
#company_marquee li.current div.overlay.slide-3 img.text1 {
	left: 74px;
	top: -200px;
}
#company_marquee li.current div.overlay.slide-3 img.text2 {
	left: 1000px;
	top: 225px;
}
#company_marquee li.current div.overlay.slide-4 img.text1 {
	left: 119px;
	top: -200px;
}
#company_marquee li.current div.overlay.slide-4 img.text2 {
	left: 1000px;
	top: 224px;
}
#company_marquee li.current div.overlay.slide-5 img.text1 {
	left: 93px;
	top: -200px;
}
#company_marquee li.current div.overlay.slide-5 img.text2 {
	left: 1000px;
	top: 172px;
}
#company_marquee li.current div.overlay.slide-6 img.text1 {
	left: 76px;
	top: -200px;
}
#company_marquee li.current div.overlay.slide-6 img.text2 {
	left: 1000px;
	top: 194px;
}
#company_marquee li.current div.overlay.slide-7 img.text1 {
	left: 30px;
	top: -200px;
}
#company_marquee li.current div.overlay.slide-7 img.text2 {
	left: 1000px;
	top: 197px;
}

#sustain_marquee .marquee-panel .overlay.palm { background-image: url('/en_US/_images/slides/sustainability_palmoil.jpg'); }
#sustain_marquee .marquee-panel .overlay.pr { background-image: url('/en_US/_images/content/sustainability/bg_pr.jpg'); }
#sustain_marquee .marquee-panel .overlay.waste { background-image: url('/en_US/_images/slides/sustainability_zerowaste.jpg'); }
#sustain_marquee .marquee-panel .overlay.report { background-image: url('/en_US/_images/content/home/feature_sr2014/sr2014_bg.jpg'); }
#sustain_marquee .marquee-panel .overlay.environment { background-image: url('/en_US/_images/slides/slide_2.jpg'); }
#sustain_marquee .marquee-panel .overlay.csdw { background-image: url('/en_US/_images/slides/slide_3.jpg'); }
/*
#sustain_marquee .marquee-panel .overlay.slide-4 { background-image: url('/en_US/_images/slides/slide_4.jpg'); }    	
#sustain_marquee .marquee-panel .overlay.slide-5 { background-image: url('/en_US/_images/slides/slide_5.jpg'); }   
*/ 

#company_marquee .marquee-panel .overlay.slide-1 { background-image: url('/en_US/_images/slides/company/slide_1.jpg'); }
#company_marquee .marquee-panel .overlay.slide-2 { background-image: url('/en_US/_images/slides/company/slide_2.jpg'); }
#company_marquee .marquee-panel .overlay.slide-3 { background-image: url('/en_US/_images/slides/company/slide_3.jpg'); }
#company_marquee .marquee-panel .overlay.slide-4 { background-image: url('/en_US/_images/slides/company/slide_4.jpg'); }    	
#company_marquee .marquee-panel .overlay.slide-5 { background-image: url('/en_US/_images/slides/company/slide_5.jpg'); }    
#company_marquee .marquee-panel .overlay.slide-6 { background-image: url('/en_US/_images/slides/company/slide_6.jpg'); }    	
#company_marquee .marquee-panel .overlay.slide-7 { background-image: url('/en_US/_images/slides/company/PG_CompanyLanding_Header.jpg'); }    


#lead .marquee .marquee-nav {
	float: left;
	margin-top: 8px;
}

#lead .marquee .slide-nav {
	width: 100px;
	float: right;
	z-index: 10;
	margin-top: 20px;
}

#lead .marquee .slide-nav .slide-loc {
	margin-left: -50px;
	float: left;
}

#lead .marquee .slide-nav .slide-btn {
	float: left;
}

#lead .marquee .marquee_prev, .marquee_next {
	background: url('/en_US/_images/slides/marquee_nav.png') no-repeat top left;
	width: 30px;
	height: 30px;
	padding: 5px;
	float: left;
}

#lead .marquee .marquee_next { background-position: 0 0; width: 30px; height: 30px; } 
#lead .marquee .marquee_next:hover { background-position: -50px 0; width: 30px; height: 30px; } 
#lead .marquee .marquee_prev { background-position: -100px 0; width: 30px; height: 30px; } 
#lead .marquee .marquee_prev:hover { background-position: -150px 0; width: 30px; height: 30px; } 

#social_marquee, #social_marquee .marquee-viewport, #social_marquee .marquee-panel {
	min-height: 350px;
	max-height: 450px;
	width: 661px; /* You must explicitly state the width for these 3 selectors for any marquee element.  Change the ID to reflect your ID.  It must be the same width for all 3 selectors. */
	overflow: hidden;
}


/*******
 * Begin marquee.js library styles 
 ******/
 
.marquee { 
/**
 * Width must be specified for .marquee.  
 * However, DO NOT attach it to this selector.  
 * Attach it using something else, like an ID.
 **/
    overflow:hidden;
    position:relative;
}

.marquee-viewport {
/**
 * Width must be specified for .marquee-viewport.  
 * However, DO NOT attach it to this selector.  
 * Attach it using something else, like an ID + .marquee-viewport.  It should be the same value as .marquee's applied width.
 **/    
 height: auto;
 overflow: hidden;
}

.marquee-panels {
    height:auto;
    padding:0;
    margin:0;
    list-style: none;
    width:10000px; /* Adjust as needed so that all .marquee-panel elements fit */
}

.marquee .marquee-panel {
    clear: none !important;
    float: left !important;;
}

.marquee-nav ol, .marquee-nav ul {
    margin:0px !important;
    padding:0;
    list-style:none;
    float: right;
}
#lead .marquee .marquee-nav li.current a {
	color: #999;
}
.marquee-nav li {
    cursor:pointer;
    display: none;
    font-size: 1.083em;
    color: #999;
}

.marquee-nav li.current { 
    cursor:default;
    display: block;
}