/* Start temp	******************************* */
html body{
	width: 100%;
	height: 100%;
	background-color: #808080;
}

/* Waiting on these videos...*/
#step-4-content .group_videos{
	/*display:none;*/
}
/*Quiz for second release (currently a work in progress)*/
.coffee-quiz{
	/*display:none !important;*/
}
/* end temp	******************************* */



.promo_body{
	background: transparent url(../img/bkd_main.jpg) no-repeat left top;
/*	width:1125px;*/
	width:1024px;
	height:768px;
	margin:0 auto;
}

/* ********************************************************

HEADER

********************************************************* */

.header{
height:157px;
position: relative;
left:0;
top:0;
}
.logo_starbucks a{
	display:block;
	text-indent: -9999px;
	width: 113px;
	height: 117px;
	background: transparent url(../img/logo_starbucks.jpg) left top no-repeat;
	position:absolute;
	top:22px;
	left:100px;
}
.link_back{
	position:absolute;
	top:22px;
/*	left:840px;*/
	right:50px;
	
	font-family:	Verdana,sans-serif;
	font-size: 11px;
	font-weight: 400;
	color:#513e27;
	
	text-decoration: none;
}
a.link_back:hover{
	color:#301B11;
}

#share {
position:absolute;
top:121px;
/*left:827px;*/
right:46px;
}
#share p {
float:left;
font-family:	Verdana,sans-serif;
font-size: 10px;
font-weight: 400;
line-height: 16px;
color: #513e27;
margin:0;
padding:0;
}
#share ul {
float:left;
margin:2px 0 0 10px;
padding:0;
}
#share li {
float:left;
margin:0 2px 0 0;
padding:0;
}
#share li a {
background:transparent url(../img/share_icons.png) no-repeat scroll 2px 2px;
display:block;
height:14px;
overflow:hidden;
text-indent:-9999px;
width:14px;
}
li#share_facebook a {
}
li#share_facebook a:hover, li#share_facebook a:focus {
background-position:2px -10px;
}
li#share_delicious a {
background-position:-11px 2px;
}
li#share_delicious a:hover, li#share_delicious a:focus {
background-position:-11px -10px;
}
li#share_myspace a {
background-position:-25px 2px;
}
li#share_myspace a:hover, li#share_myspace a:focus {
background-position:-25px -10px;
}
li#share_stumbleupon a {
background-position:-39px 2px;
}
li#share_stumbleupon a:hover, li#share_stumbleupon a:focus {
background-position:-39px -10px;
}
li#share_digg a {
background-position:-53px 2px;
}
li#share_digg a:hover, li#share_digg a:focus {
background-position:-53px -10px;
}
li#share_twitter a {
background-position:-66px 2px;
}
li#share_twitter a:hover, li#share_twitter a:focus {
background-position:-66px -10px;
}
li#share_reddit a {
background-position:-79px 2px;
}
li#share_reddit a:hover, li#share_reddit a:focus {
background-position:-79px -10px;
}

/* ********************************************************

MAIN

********************************************************* */

.filmstrip_container{
	position: relative;
	top:0;
	left:0;
	height:478px;
}
a.filmstrip_next,
a.filmstrip_previous{
	display:block;
	text-indent: -9999px;
	width: 46px;
	height: 86px;
	background-image: url(../img/btn_filmstrip.png);
	background-color: transparent;
	position:absolute;
	top:198px;
	cursor:pointer;
	
	display:none;
	z-index: 100;
}
a.filmstrip_next{
	background-position:-120px 0;
	left:978px;
}
a.filmstrip_next:hover{
	background-position:-120px -180px;
}
a.filmstrip_previous{
	background-position:0px 0;
	left:0px;
}
a.filmstrip_previous:hover{
	background-position:0px -180px;
}
.filmstrip_mask{
/*	width: 1125px;*/
	width:1024px;
	height: 478px;
	overflow: hidden;
	position:relative;
}
#filmstrip_content{
	width: 6145px;
	height: 478px;
	background: url(../img/filmstrip_steps.png) no-repeat 0px top;
	position:relative;
}
#filmstrip_content li{
	width:512px;
	height: 478px;
	float:left;
	position: relative;
}
#filmstrip_content .step-9,
#filmstrip_content .step-0{
/*	width: 1125px;*/
	width:1024px;
	float:left;
}
#filmstrip_content ol .step-title,
#filmstrip_content .step-0 h1,
#filmstrip_content .step-0 h2{
	text-indent: -9999px;
}
#filmstrip_content .step-0 .step-teaser{
margin-left:378px;
margin-top:118px;
}
#filmstrip_content .step-0 h1{
height:213px;
margin-bottom:35px;
width:395px;
}
#filmstrip_content .step-0 h2{
height:26px;
margin-bottom:8px;
margin-left:85px;
width:244px;
}
.step-title{
	display:block;
}
#filmstrip_content .step-1 .step-teaser{
	margin-left:158px;
	margin-top:183px;
}
#filmstrip_content .step-1 .step-title{
	width: 215px;
	height: 101px;
	margin-bottom: 8px;
}
#filmstrip_content .step-2 .step-teaser{
	margin-left:29px; margin-top:145px;
}
#filmstrip_content .step-2 .step-title{
	width: 206px;
	height: 66px;
	margin-bottom: 8px;
}
#filmstrip_content .step-3 .step-teaser{
	margin-left:170px; margin-top:345px;
}
#filmstrip_content .step-3 .step-title{
height:63px;
margin-bottom:11px;
width:181px;
}
#filmstrip_content .step-4 .step-teaser{
	margin-left:205px; margin-top:148px;
}
#filmstrip_content .step-4 .step-title{
height:68px;
margin-bottom:7px;
width:242px;
}
#filmstrip_content .step-5 .step-teaser{
margin-left:206px; margin-top:183px;
}
#filmstrip_content .step-5 .step-title{
height:100px;
margin-bottom:11px;
width:182px;
}
#filmstrip_content .step-5 .popup-trigger{
margin-left:52px;
}
#filmstrip_content .step-6 .step-teaser{
margin-left:10px; margin-top:265px;
}
#filmstrip_content .step-6 .step-title{
height:99px;
margin-bottom:10px;
width:214px;
}
#filmstrip_content .step-7 .step-teaser{
margin-left:203px; margin-top:132px;
}
#filmstrip_content .step-7 .step-title{
height:65px;
margin-bottom:11px;
width:201px;
}
#filmstrip_content .step-8 .step-teaser{
margin-left:120px; margin-top:298px;
}
#filmstrip_content .step-8 .step-title{
height:64px;
margin-bottom:12px;
width:291px;
}
#filmstrip_content .step-9 .step-teaser{
margin-left:195px; margin-top:140px;
}
#filmstrip_content .step-9 .step-title{
height:64px;
margin-bottom:10px;
width:241px;
}

/* ********************************************************

Pop-up

********************************************************* */

.popup-trigger{
	display:block;
	text-indent: -9999px;
	width: 90px;
	height: 27px;
	background: transparent url(../img/bkd_popup-trigger.jpg) no-repeat scroll left top;
}
a.popup-trigger:hover{
	background: transparent url(../img/bkd_popup-trigger.jpg) no-repeat  scroll left -40px ;
}
.popup-content{
	display:block;
	/*width: 1125px;*/
	width:1024px;
	height: 478px;
	background: transparent url( ../img/filmstrip_pop-up-bkd.png ) left top no-repeat;
	position:absolute;
	top:0px;
	left:0px;
	
	display:none;
	z-index:300;
}
.step-container{
height:258px;
left:295px;
position:absolute;
top:111px;
width:521px;
overflow:hidden;
}
.popup-content  #step-1-content,
.popup-content  #step-2-content,
.popup-content  #step-3-content,
.popup-content  #step-4-content,
.popup-content  #step-5-content,
.popup-content  #step-6-content,
.popup-content  #step-7-content,
.popup-content  #step-8-content,
.popup-content  #step-9-content{
	display:none;
}
.popup-content  h3{
	position:absolute;
	top:0px;
	left:5px;
	width: 345px;
	height: 63px;
	background: url(../img/bkd_popup-headers.jpg) no-repeat left top;
	text-indent:-9999px;
}
.popup-content #step-2-content h3{
	background-position: left -70px;
}
.popup-content #step-3-content h3{
	background-position: left -140px;
}
.popup-content #step-4-content h3{
	background-position: left -210px;
}
.popup-content #step-5-content h3{
	background-position: left -280px;
}
.popup-content #step-6-content h3{
	background-position: left -350px;
}
.popup-content #step-7-content h3{
	background-position: left -420px;
}
.popup-content #step-8-content h3{
	background-position: left -490px;
}
.popup-content #step-9-content h3{
	background-position: left -560px;
}
.popup-content  .step-copy{
	position:absolute;
	top:71px;
	left:34px;
	width: 291px;
	height: 165px;
	overflow:auto;
	
	font-family: verdana, sans-serif;
	font-size: 10px;
	line-height:13px;
	color:#2e1f0a;
	
}
.popup-content  .step-copy p{
	margin-bottom: 13px;
}

.popup-content .step-extras{
	position:absolute;
	top:7px;
	left:365px;
	width: 156px;
	height: 245px;
}
.step-extras h4{
	font-family: Verdana, sans-serif;
	font-size: 12px;
	font-weight:100;
	color:#f8f4cd;
}
.step-extras .group_videos{
	margin-bottom: 11px;
}
.step-extras .group_photos{
	margin-bottom: 16px;
}
.step-extras .group_videos h4{
	margin-bottom: 9px;
	clear:both;
}
.step-extras .group_photos h4{
	margin-bottom: 9px;
	clear:both;
}
.step-extras .group_links{
	position:relative;
}
.step-extras .group_links .links{
	width:156px;
	overflow:hidden;
}
.step-extras .group_links .links li{
	width:600px;
}
.step-extras .group_links a{
	white-space: nowrap;
}
.step-extras .group_links .link_mask{
	position:absolute;
	top:0px;
	right:0px;
	z-index:10;
}
.step-extras .group_links h4{
	margin-bottom: 4px;
	clear:both;
}
.step-extras .thumbnails{
	width:150px;
	overflow:auto;
}
.step-extras .thumbnails li{
	float:left;
	padding-right: 7px;
}
.step-extras .thumbnails a{
	background: url(../img/bkd_thumnail-mask.png) no-repeat left top;
	width: 68px;
	height: 52px;
	display:block;
}
.step-extras .thumbnails a:hover{
	background: url(../img/bkd_thumnail-mask.png) no-repeat left -80px;
}
.step-extras .thumbnails a img{
	margin: 1px 0 0 1px;
}
.step-extras .links li{
	line-height:14px;
}
.step-extras .links a{
	font-family: Verdana, sans-serif;
	font-size: 10px;
	line-height:14px;
	font-weight:100;
	text-decoration: none;
	color:#f8f4cd;
}
.step-extras .links a:hover{
	color:#301b11;
}
/* image detail*/
.popup_image-detail{
	display:none;
/*	width:1125px;*/
	width:1024px;
	height:478px;
	left:0;
	position:absolute;
	top:0;
	z-index:20;
}
.popup_image-detail{
	height:478px;
/*	width:1125px;*/
	width:1024px;
	background: url(../img/bkd_shade.png) repeat left top;
}
.popup_image-detail .image-container{
	overflow:auto;
	position:relative;
	margin:0 auto;
	background: #f7f4cb none no-repeat left top;
	height:52px;
	width:68px;
	
	position:relative;
	top:225px;
	left:168px;
}
.popup_image-detail img{
	border:2px solid #f7f4cb;
	position:relative;
	z-index: 15;
}
.detail-close{
	z-index:20;
	position:absolute;
	top:5px;
	right:5px;
	text-indent: -9999px;
	width: 15px;
	height: 15px;
	background: transparent url(../img/popup-close.png) left top no-repeat;
	cursor: pointer;
	display:none;
}
/*video detail*/
.popup_video-detail{
	display:none;
/*	width:1125px;*/
	width:1024px;	
	height:478px;
	left:0;
	position:absolute;
	top:0;
	z-index:20;
}
.popup_video-detail{
	height:478px;
	width:1024px;
	background: url(../img/bkd_shade.png) repeat left top;
}

.popup_video-detail .detail-close{
	display:block;
}

.popup_video-detail .video-container{
	display:block;
	background: #f5f5f3 none;	
	position:relative;
	
	height:402px;
	
	width:919px;
	_width:506px;
		
	margin:0 auto;
	overflow:hidden;
	
	padding:5px;		
	_padding:0;
	
	border:1px solid #000;
	top:57px;
	left:0px;
}
.popup_video-detail img{
	border:2px solid #f7f4cb;
	position:relative;
	z-index: 15;
}




.popup-close{
	position:absolute;
	top:116px;
	left:797px;
	display:block;
	text-indent: -9999px;
	width: 15px;
	height: 15px;
	background: transparent url(../img/popup-close.png) left top no-repeat;
	cursor: pointer;
}
a.popup-close:hover,
a.detail-close:hover,
a.quiz-close:hover{
	background: transparent url(../img/popup-close.png) left -20px no-repeat;
}

.detail-image img{
	border:2px solid #f7f5ce;
}
.detail-image .popup-close{
	position:absolute;
	top:116px;
	left:797px;
	display:block;
	text-indent: -9999px;
	width: 15px;
	height: 15px;
	background: transparent url(../img/popup-close.png) left top no-repeat;
	cursor: pointer;
}

/* ********************************************************

Quiz

********************************************************* */

 .quiz-close{
	position:absolute;
	top:116px;
	left:771px;
	display:block;
	text-indent: -9999px;
	width: 15px;
	height: 15px;
	background: transparent url(../img/popup-close.png) left top no-repeat;
	cursor: pointer;
}

.step-0 .coffee-quiz{
	display:block;
	text-indent: -9999px;
	width: 218px;
	height: 86px;
	background: transparent url(../img/filmstrip_coffee-quiz_step-0.jpg) left top no-repeat;
	position:absolute;
	top:356px;
	left:729px;
}
.step-0 .coffee-quiz a{
	display:block;
	text-indent: -9999px;
	width: 90px;
	height: 14px;
	background: transparent url(../img/filmstrip_coffee-quiz-link_step-0.png) left top no-repeat;
	position:absolute;
	top:60px;
	left:16px;
}
.step-0 .coffee-quiz a:hover{
	background: transparent url(../img/filmstrip_coffee-quiz-link_step-0.png) left -20px no-repeat;
}

.step-9 .coffee-quiz{
	display:block;
	text-indent: -9999px;
	width: 218px;
	height: 219px;
	background: transparent url(../img/filmstrip_coffee-quiz.jpg) left top no-repeat;
	position:absolute;
	top:137px;
	left:753px;
}
.step-9 .coffee-quiz a{
	display:block;
	text-indent: -9999px;
	width: 108px;
	height: 16px;
	background: transparent url(../img/filmstrip_coffee-quiz-link.png) left top no-repeat;
	position:absolute;
	top:63px;
	left:57px;
}
.step-9 .coffee-quiz a:hover{
	background: transparent url(../img/filmstrip_coffee-quiz-link.png) left -20px no-repeat;
}
.quiz-content{
	display:block;
/*	width: 1125px;*/
	width:1024px;
	height: 478px;
	background: transparent url( ../img/quiz_pop-up-bkd.png ) -25px top no-repeat;
	position:absolute;
	top:0px;
	left:0px;
	
	display:none;
	z-index:200;
}
.quiz-mask{
	height:190px;
	width:481px;
	position:absolute;
	top:166px;
	left:290px;
	overflow:hidden;
}
.question-container{
	height: 190px;
	width: 11462px;
	position: relative;
}
.question-group{
	float:left;
	
	position:relative;
	
	color:#2e1f0a;	
	font-family:	Verdana,sans-serif;

	height:170px;
	padding: 10px 20px 10px 30px;
	width:431px;
}
.question-group h3{
	font-size: 16px;
	line-height:18px;
	font-weight: 100;
	margin-bottom:2px;
	font-weight:bold;
}
.question-group label{
	display:block;
	padding-left: 30px;
	font-size:12px;
	line-height:12px;
/*	margin-bottom:4px;*/
	position: relative;
}
.question-group label input{
/*
position:absolute;
left:10px;
top:-2px;
*/
position:relative;
top:2px;

}
#progress-group{
	position:absolute;
	top:159px;
	left:20px;
	width: 445px;
	text-align:center;
	z-index:101;
}
#progress-group h4{
	color:#2e1f0a;	
	font-family:	Verdana,sans-serif;
	font-size: 10px;
	font-weight: 100;
	margin-bottom: 4px;
}
#progress-group div{
	background-color: #301b11;
	width: 445px;
	height: 7px;
	
}
#progress-group div div{
	background-color: #a78965;
	width:9%;
	float:left;
}
#quiz-result{
	display:none;
	height:190px;
	width:481px;
	
	position:absolute;
	top:0px;
	left:0px;
	z-index:100;	
	
	background: transparent url(../img/quiz_pop-up-bkd.png) no-repeat scroll -316px -166px;
}
#quiz-result h3{
color:#A78965;
font-family:Verdana,sans-serif;
font-size:16px;
font-weight:100;
left:26px;
position:absolute;
top:15px;
}
#beverage-options{
	overflow:hidden;
	height:190px;
	width:481px;
}
#quiz-result div div{
	padding:39px 141px 8px 28px;
	height: 148px; 
	width: 322px;
	
	color:#2e1f0a;
	font-family:	Verdana,sans-serif;
	
	background: transparent url(../img/bkd_coffee-beverages.jpg) no-repeat right top;
	
	display:none;
}
#quiz-result #beverage-options h4{
font-size:13px;
font-weight:900;
margin-bottom:3px;
}
#quiz-result #beverage-options p{	
	font-size: 12px;
	font-weight: 100;
	line-height:16px;
	padding-right: 10px;
}

#quiz-result div #coffee{
	background-position: right 0px;
}
#quiz-result div #latte{
	background-position: right -200px;
}
#quiz-result div #cappuccino{
	background-position: right -400px;
}
#quiz-result div #americano{
	background-position: right -600px;
}
#quiz-result div #caramel-macchiato{
	background-position: right -800px;
}
#quiz-result div #cafe-mocha{
	background-position: right -1000px;
}
#quiz-result div #hot-chocolate{
	background-position: right -1200px;
}
#quiz-result div #iced-coffee{
	background-position: right -1400px;
}
#quiz-result div #espresso-single{
	background-position: right -1600px;
}

#quiz-result div #extra-shot{
	background-position: right -1600px;
}

#quiz-result div #espresso-double{
	background-position: right -1800px;
}
#quiz-result div #espresso-tripple{
	background-position: right -2000px;
}

#quiz-result .coffee #coffee,
#quiz-result .latte #latte,
#quiz-result .cappuccino #cappuccino,
#quiz-result .americano #americano,
#quiz-result .caramel-macchiato #caramel-macchiato,
#quiz-result .cafe-mocha #cafe-mocha,
#quiz-result .hot-chocolate #hot-chocolate,
#quiz-result .iced-coffee #iced-coffee,
#quiz-result .espresso-single #espresso-single,
#quiz-result .espresso-double #espresso-double,
#quiz-result .espresso-tripple #espresso-tripple{
	display:block;
}


#quiz-result .next_question{
left:430px;
color:#2E1F0A;
position:absolute;
top:6px;
text-decoration:none;
font-family:Verdana,sans-serif;
font-size:10px;
font-weight:bold;
}


#beverage-options .result{
	position:absolute;
}


/* ********************************************************

FOOTER

********************************************************* */

.footer{
	position: relative;
	top:0;
	left:0;/*
	height:160px;*/
	overflow: hidden; height: 133px;
}
.footer,
.footer a{
	color:#fbfbfb;
	font-family:	Verdana,sans-serif;
	font-size: 11px;
	font-weight: 400;
	text-decoration:none;
}
.footer .links{
	position:absolute;
	top:70px;
	left:100px;
}
.footer .links li{
	float:left;
	padding-right:11px;
}
.footer .links li a{
	margin-left:11px;
}
.footer .links li a:hover{
color:#301b11;
}
.footer .links li{
	background: url(../img/bkd_footer-tick.jpg) no-repeat right 50%;
}
.footer .links li.last{
	background: none no-repeat left top;
}

.footer .copyright{
	position:absolute;
	top:114px;
	left:110px;
	height: 15px;
}
.logo_shared-planet{
	display:block;
	text-indent: -9999px;
	width: 209px;
	height: 52px;
	background: transparent url(../img/logo_shared-planet.jpg) left top no-repeat;
	position:absolute;
	top:70px;
	left:663px;
}
.logo_fairtrade{
	display:block;
	text-indent: -9999px;
	width: 86px;
	height: 52px;
	background: transparent url(../img/logo_fairtrade.jpg) left top no-repeat;
	position:absolute;
	top:72px;
	left:888px;
}

.pagination{
	position:absolute;
	top:11px;
	left:455px;
}
.pagination li{
	float: left;
	text-indent: -9999px;
	width: 11px;
	height: 11px;
	background: transparent url(../img/bkd_progress-dots.png) left top no-repeat;
	margin-right:9px;
}
.pagination div{
	display:none;
	text-indent: -9999px;
	width: 11px;
	height: 11px;
	background: transparent url(../img/bkd_progress-dots.png) left -20px no-repeat;
}
.pagination span{
	color:#2e1f0a;
	font-size:10px;
	position:absolute;
	top:16px;
	left:0px;
	display:block;
	width:110px;
	height:15px;
	text-align:center;
	
}
.pagination span em{
	font-style:normal;
}
/* ********************************************************

NO JS - breaks ie6?

********************************************************* */

.no-js .filmstrip_mask {
height:493px;
overflow:auto;
}
.no-js .popup-content{
	position:static;
	display:block;
	background-position: 50% 50%;
	background-color: #a78965;
	width:auto;
	height:290px;
}
.no-js .step-container{
	overflow:hidden;
	width: 521px;
	height: 258px;
	
	position:relative;
	top:15px;
	left:295px;
}
.no-js .popup-content  #step-1-content,
.no-js .popup-content  #step-2-content,
.no-js .popup-content  #step-3-content,
.no-js .popup-content  #step-4-content,
.no-js .popup-content  #step-5-content,
.no-js .popup-content  #step-6-content,
.no-js .popup-content  #step-7-content,
.no-js .popup-content  #step-8-content,
.no-js .popup-content  #step-9-content{
	display:block;
	position:relative;
	width:521px;
	height:258px;
}
.no-js .popup-content  #step-1-content h3,
.no-js .popup-content  #step-2-content h3,
.no-js .popup-content  #step-3-content h3,
.no-js .popup-content  #step-4-content h3,
.no-js .popup-content  #step-5-content h3,
.no-js .popup-content  #step-6-content h3,
.no-js .popup-content  #step-7-content h3,
.no-js .popup-content  #step-8-content h3,
.no-js .popup-content  #step-9-content h3{

	position:absolute;
	top:0;
	left:0;
}
.no-js .popup-content  #step-1-content .step-copy,
.no-js .popup-content  #step-2-content .step-copy,
.no-js .popup-content  #step-3-content .step-copy,
.no-js .popup-content  #step-4-content .step-copy,
.no-js .popup-content  #step-5-content .step-copy,
.no-js .popup-content  #step-6-content .step-copy,
.no-js .popup-content  #step-7-content .step-copy,
.no-js .popup-content  #step-8-content .step-copy,
.no-js .popup-content  #step-9-content .step-copy{
	position:absolute;
	top:68px;
	left:32px;
}
.no-js .footer{
	background: url(../img/bkd_main.jpg) no-repeat left bottom;
/*	width: 1125px;*/
	width:1024px;	
	height: 160px;
}
.no-js .coffee-quiz{
	display:none;
}