/* 
* Author : Thunder Mountain @ Disney Interactive
* Description : Stylesheet for Disney social share bar
*/

.tmsb-container {
	width: 100%;
	font-size: 0;
	display: block;
}

.tmsb-mobile {
	width: 100%;
	height: 40px;
	font-size: 0;
	position: fixed;
	bottom: 0px;
	-webkit-transform: translateY(81px);
	transform: translateY(81px);
	z-index: 999;
}

.tmsb-mobile span {
	display: inline-block;
	height: 40px;
	width: 20%;
	margin: 0;
	overflow: hidden;
	text-indent: 100%;
	vertical-align: top;
	white-space: nowrap;
	cursor: pointer; 
}

.tmsb-container span {
	display: inline-block;
	height: 40px;
	width: 40px;
	margin: 0 12px 16px 0;
	overflow: hidden;
	text-indent: 100%;
	vertical-align: top;
	white-space: nowrap;
	cursor: pointer;
}

.tmsb-container span.tmsb-fb,
.tmsb-mobile span.tmsb-fb {
	background-color: #3569B4;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 21px 19px;
	background-image: url( "../images/tmsb_share_fb.png" );
}

.tmsb-container span.tmsb-tw,
.tmsb-mobile span.tmsb-tw {
	background-color: #42B3EA;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 22px 20px;
	background-image: url( "../images/tmsb_share_tw.png" );
}

.tmsb-container span.tmsb-gp,
.tmsb-mobile span.tmsb-gp {
	background-color: #DF4A32;
	background-position: 11px center;
	background-repeat: no-repeat;
	background-size: 21px 19px;
	background-image: url( "../images/tmsb_share_gp.png" );
}
#product-desktop-social-container .tmsb-container span.tmsb-gp
{
	background-position: 15px center;
}


.tmsb-container span.tmsb-tb,
.tmsb-mobile span.tmsb-tb {
	background-color: #36465D;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 26px 24px;
	background-image: url( "../images/tmsb_share_tb.png" );
}

.tmsb-container span.tmsb-pn,
.tmsb-mobile span.tmsb-pn {
	background-color: #FE0000;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 26px 24px;
	background-image: url( "../images/tmsb_share_pn.png" );
}


.tmsb-container span.tmsb-em,
.tmsb-mobile span.tmsb-em {
	background-color: #2fbbb8;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 21px 19px;
	background-image: url( "../images/tmsb_share_em.png" );
}



.tmsb-active {
	-webkit-backface-visibility: hidden;
	
    -webkit-animation: tmsb-slide-up 400ms ease forwards;
    -moz-animation: tmsb-slide-up 400ms ease forwards;
    animation: tmsb-slide-up 400ms ease forwards;
    
}
@-webkit-keyframes tmsb-slide-up {
 	0% { transform: translateY(41); -webkit-transform: translateY(41); }
	100% { transform: translateY(0); -webkit-transform: translateY(0); } 
}

@-moz-keyframes tmsb-slide-up {
	0% { transform: translateY(41); -moz-transform: translateY(41); }
	100% { transform: translateY(0); -moz-transform: translateY(0); }
}

@keyframes tmsb-slide-up {
	0% { transform: translateY(41); transform: translateY(41); }
	100% { transform: translateY(0); transform: translateY(0); } 
}

.tmsb-deactivate {
	-webkit-backface-visibility: hidden;
	
    -webkit-animation: tmsb-slide-down 400ms ease forwards;
    -moz-animation: tmsb-slide-down 400ms ease forwards;
    animation: tmsb-slide-down 400ms ease forwards;
    
}
@-webkit-keyframes tmsb-slide-down {
 	0% { transform: translateY(0); -webkit-transform: translateY(0); }
	100% { transform: translateY(82); -webkit-transform: translateY(82); } 
}

@-moz-keyframes tmsb-slide-down {
	0% { transform: translateY(0); -moz-transform: translateY(0); }
	100% { transform: translateY(82); -moz-transform: translateY(82); }
}

@keyframes tmsb-slide-down {
	0% { transform: translateY(0); transform: translateY(0); }
	100% { transform: translateY(82); transform: translateY(82); } 
}

@media screen and (max-width: 520px) {

	.tmsb-container span {
		margin: 0;
		width: 20%;
	}

}

@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (-moz-min-device-pixel-ratio: 2),
       screen and (-o-min-device-pixel-ratio: 2/1),
       screen and (min-device-pixel-ratio: 2) {

       	.tmsb-container span.tmsb-fb,
	   	.tmsb-mobile span.tmsb-fb { background-image: url( "../images/tmsb_share_fb@2x.png" ); }
	   	.tmsb-container span.tmsb-tw,
	   	.tmsb-mobile span.tmsb-tw { background-image: url( "../images/tmsb_share_tw@2x.png" ); }
	   	.tmsb-container span.tmsb-gp,
	   	.tmsb-mobile span.tmsb-gp { background-image: url( "../images/tmsb_share_gp@2x.png" ); }
	   	.tmsb-container span.tmsb-tb,
	   	.tmsb-mobile span.tmsb-tb { background-image: url( "../images/tmsb_share_tb@2x.png" ); }
	   	.tmsb-container span.tmsb-pn,
	   	.tmsb-mobile span.tmsb-pn { background-image: url( "../images/tmsb_share_pn@2x.png" ); }
	   	.tmsb-container span.tmsb-em,
	   	.tmsb-mobile span.tmsb-em { background-image: url( "../images/tmsb_share_em@2x.png" ); }
}