div.banner_rotator
{
    width:620px;
    height:286px;
    border: 0px solid #c0c0c0;
    border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    -webkit-border-radius: 0 0 6px 6px;
    position:relative;
    background-color:#f0f0f0;
    overflow: hidden;
    background-image:url(bg-br.png);
    background-repeat: repeat-x;
    background-position: bottom left;
}

div.banner_rotator div.banners  div.banner
{
	position:absolute;
    display:none;
}

div.banner_rotator div.banners  div.banner.active
{
	display:block;
}
div.banner_rotator div.banners  div.banner.zindex
{
	z-index:2;
}
div.banner_rotator div.banners  div.banner img.promo
{
    border:0;
width:620px;
height:258px;
	animation: animationFrames ease 1s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	animation-fill-mode:forwards; /*when the spec is finished*/
	-webkit-animation: animationFrames ease 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
	-moz-animation: animationFrames ease 1s;
	-moz-animation-iteration-count: 1;
	-moz-transform-origin: 50% 50%;
	-moz-animation-fill-mode:forwards; /*FF 5+*/
	-o-animation: animationFrames ease 1s;
	-o-animation-iteration-count: 1;
	-o-transform-origin: 50% 50%;
	-o-animation-fill-mode:forwards; /*Not implemented yet*/
	-ms-animation: animationFrames ease 1s;
	-ms-animation-iteration-count: 1;
	-ms-transform-origin: 50% 50%;
	-ms-animation-fill-mode:forwards; /*IE 10+*/
}

div.banner_rotator div.banners  div.banner img.masked
{
width:620px;
height:258px;
	opacity:0;
	margin-top:-262px;
	-webkit-mask-image:url(mask.png);
	position:absolute;
	z-index:3;
	display:none;
	
	animation: masking linear  1s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	animation-fill-mode:forwards; /*when the spec is finished*/
	-webkit-animation: masking linear  1s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
	-moz-animation: masking linear  1s;
	-moz-animation-iteration-count: 1;
	-moz-transform-origin: 50% 50%;
	-moz-animation-fill-mode:forwards; /*FF 5+*/
	-o-animation: masking linear  1s;
	-o-animation-iteration-count: 1;
	-o-transform-origin: 50% 50%;
	-o-animation-fill-mode:forwards; /*Not implemented yet*/
	
	animation:none\9;
	
}

div.banner_rotator div.banners  div.banner img.masked.active
{
	display:block;
	
}

@keyframes animationFrames{
  0% {
    opacity:0;
    transform:  translate(20px,0px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    opacity:0;
    -moz-transform:  translate(20px,0px)  ;
  }
  100% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    opacity:0;
    -webkit-transform:  translate(20px,0px)  ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes animationFrames {
  0% {
    opacity:0;
    -o-transform:  translate(20px,0px)  ;
  }
  100% {
    opacity:1;
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    opacity:0;
    -ms-transform:  translate(20px,0px)  ;
  }
  100% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  ;
  }
}




@keyframes masking{
  0% {
    opacity:0;
    -webkit-mask-position-x:-10px;
  }
  50% {
    opacity:1;
    -webkit-mask-position-x:0px;
  }
  100% {
    opacity:0;
    -webkit-mask-position-x:10px;
  }
}

@-moz-keyframes masking{
  0% {
    opacity:0;
    -webkit-mask-position-x:-10px;
  }
  50% {
    opacity:1;
    -webkit-mask-position-x:0px;
  }
  100% {
    opacity:0;
    -webkit-mask-position-x:10px;
  }
}

@-webkit-keyframes masking{
  0% {
    opacity:0;
    -webkit-mask-position-x:-10px;
  }
  50% {
    opacity:1;
    -webkit-mask-position-x:0px;
  }
  100% {
    opacity:0;
    -webkit-mask-position-x:10px;
  }
}

@-o-keyframes masking{
  0% {
    opacity:0;
    -webkit-mask-position-x:-10px;
  }
  50% {
    opacity:1;
    -webkit-mask-position-x:0px;
  }
  100% {
    opacity:0;
    -webkit-mask-position-x:10px;
  }
}

@-ms-keyframes masking{
  0% {
    opacity:0;
    -webkit-mask-position-x:-10px;
  }
  50% {
    opacity:1;
    -webkit-mask-position-x:0px;
  }
  100% {
    opacity:0;
    -webkit-mask-position-x:10px;
  }
}





div.banner_rotator div.buttons
{
    position:absolute;
    top:258px;
    left:0px;
}
div.banner_rotator div.buttons div
{
    float:left;
    border-top:1px solid #FFFFFF;
    border-right:1px solid #C0C0C0;
    border-bottom:0;
    border-left:1px solid #FFFFFF;
    width:38px;
    height:26px;
}
div.banner_rotator div.buttons div.control
{
    border-left:0;
    cursor: pointer;
	display:none;
    //cursor: hand;
}
div.banner_rotator div.buttons div.play
{
    background-image:url(b-play.png);
    background-repeat: no-repeat;
    background-position: center center;
}
div.banner_rotator div.buttons div.pause
{
    background-image:url(b-pause.png);
    background-repeat: no-repeat;
    background-position: center center;
}
div.banner_rotator div.buttons div.button
{
    text-align:center;
	transition:all ease 200ms;
    padding-top:5px;
    width:39.5px;
    height:22px;
    font-weight:bold;
    font-family:Verdana;
    font-size:9pt;
    text-shadow:#bbb 1px 1px 1px;
    color:#666;
    cursor: pointer;
    //cursor: hand;
}
div.banner_rotator div.buttons div.active
{
    font-size:11pt;
	color:#505050;
	text-shadow:#A0A0A0 1px 1px 1px;
    padding-top:3px;
}
div.fade
{
    position:absolute;
    top:0px;
    left:0px;
    background-color:#FFFFFF;
    width:620px;
    height:260px;
    display:none;
}