.colBoxScrollNavigation {
position:relative;
z-index:12;
height:35px;
}
.colBoxScrollNavigation.leftArrow:before {
content:'';
display:block;
position:absolute;
border-radius:100px;
left:3px;
top:50%;
margin-top:-7px;
width:14px;
height:14px;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANdJREFUeNrkl0EKgzAURLV6je56qi56qS7cpLQUPFlvUSzpBCLYTRLNfDqlAyMqfvJAzfzfeO8bA3ewgyf4nHu+DQeyOvgOH+P1C+5TBTtjgKBbtor8Ckb/qTHeT9Z+HYAFUQXAgKgGqIWgANRA0AC2QlABtkDQAdZCmACsgTADKIUwBSiBMAcogXDWACVRPsVkDHrAB/jJzv5clC9jeA9fF1A8/cI3IfF3yOwTMjumTHbIpKhMPyHTWcn0mDLdtszcITOBpUDcX07l86In+BLPh1zBW4ABAPhz75jMU7VOAAAAAElFTkSuQmCC) no-repeat center center #CCC;
border:1px solid #FFF;
background-size:7px 7px;
background-position:center center;
z-index:12;
-webkit-animation:colBoxScrollNavigation 3s linear infinite;
animation:colBoxScrollNavigation 3s linear infinite;
}
.colBoxScrollNavigation.rightArrow:after {
content:'';
display:block;
position:absolute;
border-radius:100px;
right:3px;
top:50%;
margin-top:-7px;
width:14px;
height:14px;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAOJJREFUeNrUl00KwjAQhaMVb+HFuvBSLtxElEJ7Ko9SiTOQRRRpmpk3jB14JaUT8tH8vElIKYUFXUgzKZK6Sq5YO34sxEzqcnsinUmvAI595fujaPekoYDCReVX8RSM6TNG9NSsSTIHWZtoCtKSbAbS2sEERNIJDiKlh4Jo5hIGol3ZEBDEPleDoE49FQjSDcUgaFv+BRK1Vi6JI+lJOuV3tv6Dxspbg23+XgB8lwMiK9/UmnDfHe7nhPuJ6e4d7i7qXk+4V1buNaZ7te1+7/iLG1i0BtjMrfyaB71ZAXC8BRgATljwmHm55lkAAAAASUVORK5CYII=) no-repeat center center #CCC;
border:1px solid #FFF;
background-size:7px 7px;
background-position:center center;
z-index:12;
-webkit-animation:colBoxScrollNavigation 3s linear infinite;
animation:colBoxScrollNavigation 3s linear infinite;
}
@-webkit-keyframes colBoxScrollNavigation {
0% {opacity:0.5;}
25% {opacity:1.0;}
75% {opacity:1.0;}
100% {opacity:0.5;}
}
@keyframes colBoxScrollNavigation {
0% {opacity:0.2;}
25% {opacity:1.0;}
75% {opacity:1.0;}
100% {opacity:0.2;}
}

.colBoxScrollNavOut {
overflow:scroll;
-webkit-overflow-scrolling:touch;
background:rgba(0,0,0,0.1);
z-index:11;
white-space:nowrap;
}
.colBoxScrollNavIn {
position:relative;
}
.colBoxScrollNavIn a {
display:inline-block;
padding:7px 9px;
font-size:11px;
font-weight:bold;
border-right:1px solid rgba(0,0,0,0.1);
background:rgba(0,0,0,0.4);
color:#FFF;
}
.colBoxScrollNavIn a:first-child {
border-left:1px solid rgba(0,0,0,0.1);
}
.colBoxScrollNavIn a:nth-child(even) {
background:rgba(0,0,0,0.35);
}
.colBoxScrollNavIn a.active {
background:rgba(0,0,0,0.5);
}
.colBoxScrollNavIn a.NewMark {
position:relative;
padding-right:47px;
}
.colBoxScrollNavIn a.NewMark:before {
content:'';
display:block;
position:absolute;
top:9px;
right:35px;
width:0;
height:0;
border:8px solid transparent;
border-right:8px solid rgba(255,255,255,0.9);
}
.colBoxScrollNavIn a.NewMark:after {
content:'New';
position:absolute;
top:9px;
right:10px;
padding:0 3px;
font-size:9px;
font-weight:normal;
color:#F00;
background:rgba(255,255,255,0.9);
font-family:Arial,Verdana;
display:inline-block;
width:19px;
height:16px;
line-height:16px;
}
.colBoxScrollNavOut.bg-White .colBoxScrollNavIn a.NewMark:before {
border-right-color:rgba(230,230,230,0.9);
}
.colBoxScrollNavOut.bg-White .colBoxScrollNavIn a.NewMark:after {
background:rgba(230,230,230,0.9);
}
.colBoxScrollNavOut.bg-White {background:rgba(255,255,255,0.1);border-top:1px solid rgba(230,230,230,1);border-bottom:1px solid rgba(230,230,230,1);}
.colBoxScrollNavOut.bg-White #colBoxHeaderNavigationIn a {border-color:rgba(230,230,230,1);background:rgba(255,255,255,0.6);color:#000;}
.colBoxScrollNavOut.bg-White #colBoxHeaderNavigationIn a:nth-child(even) {background:rgba(255,255,255,0.55);}
.colBoxScrollNavOut.bg-White #colBoxHeaderNavigationIn a.active {background:rgba(255,255,255,0.7);}
.colBoxScrollNavOut.bg-Red {background:rgba(230,0,18,0.1);}
.colBoxScrollNavOut.bg-Red #colBoxHeaderNavigationIn a {border-color:rgba(230,0,18,0.3);background:rgba(230,0,18,0.6);}
.colBoxScrollNavOut.bg-Red #colBoxHeaderNavigationIn a:nth-child(even) {background:rgba(230,0,18,0.55);}
.colBoxScrollNavOut.bg-Red #colBoxHeaderNavigationIn a.active {background:rgba(230,0,18,0.7);}
.colBoxScrollNavOut.bg-Orange {background:rgba(243,152,0,0.1);}
.colBoxScrollNavOut.bg-Orange #colBoxHeaderNavigationIn a {border-color:rgba(243,152,0,0.5);background:rgba(243,152,0,0.8);}
.colBoxScrollNavOut.bg-Orange #colBoxHeaderNavigationIn a:nth-child(even) {background:rgba(243,152,0,0.75);}
.colBoxScrollNavOut.bg-Orange #colBoxHeaderNavigationIn a.active {background:rgba(243,152,0,0.9);}
.colBoxScrollNavOut.bg-Green {background:rgba(0,153,9,0.1);}
.colBoxScrollNavOut.bg-Green #colBoxHeaderNavigationIn a {border-color:rgba(0,153,9,0.5);background:rgba(0,153,9,0.7);}
.colBoxScrollNavOut.bg-Green #colBoxHeaderNavigationIn a:nth-child(even) {background:rgba(0,153,9,0.65);}
.colBoxScrollNavOut.bg-Green #colBoxHeaderNavigationIn a.active {background:rgba(0,153,9,0.8);}
.colBoxScrollNavOut.bg-Blue {background:rgba(0,104,183,0.1);}
.colBoxScrollNavOut.bg-Blue #colBoxHeaderNavigationIn a {border-color:rgba(0,104,183,0.5);background:rgba(0,104,183,0.7);}
.colBoxScrollNavOut.bg-Blue #colBoxHeaderNavigationIn a:nth-child(even) {background:rgba(0,104,183,0.65);}
.colBoxScrollNavOut.bg-Blue #colBoxHeaderNavigationIn a.active {background:rgba(0,104,183,0.8);}