#headlistwrap {background:#149566 url(../img/bg-pattern.jpg) bottom repeat-x; padding-top:90px; line-height:10px; padding-bottom:16px; 

	box-shadow: inset 0 -3px 3px rgba(0,0,0,0.2); 
	-webkit-box-shadow: inset 0 -3px 3px rgba(0,0,0,0.2); 
	-moz-box-shadow: inset 0 -3px 3px rgba(0,0,0,0.2);
	}

.headchannellisting {padding: 25px 0 0 0; width: 850px; margin:0 auto; }

.headchannellisting li { list-style-type: none; width: 100%; max-width: 290px; margin: 0px 0px 5px 0px; }
.headchannellisting li:hover { background: rgb(220, 220, 220); }
.headchannellisting li img { float: left; max-width: 50px; margin: 0px 15px 0px 0px; }
.headchannellisting li span { line-height: 50px; }

.headchannelitem a { width: 110px; background: url(../img/bg-headimg-short.png) 24px 10px no-repeat; 
 margin: 0px 0px 0px 10px; display: block; float: left; text-align:center; }

.headchannelitem a:hover {  
			animation:headShine .3s linear;
			-moz-animation:headShine .3s linear;
            -webkit-animation:headShine .3s linear;
          }

.headchannelitem a  {
	color: #fff !important;
	text-transform: uppercase;
	font: 13px "Iceland", Arial;
	text-shadow:1px 1px 0px #000; 
	transition: .1s ease-out;
}

.headchannelitem a:hover {
 
}

.headname {	
	display: block;
	line-height: 11px !important;
	padding-top: 5px;
	}

.headchannelitem a .headpic {
	display:block;
	height:84px;
	width:84px;
	background-position:left top;
	background-repeat:no-repeat;
	}
	
.headchannelitem a:hover .headpic{
	display:block;
	height:84px;
	width:84px;
	background-position:left bottom;
	cursor: pointer; 
	          
          animation:bounceUp .6s ease-out;
          -moz-animation:bounceUp .6s ease-out;
          -webkit-animation:bounceUp .6s ease-out;	
          }
	


@keyframes bounceUp {
        0%{ margin-top:-2px; margin-bottom:2px;}
        10%{ margin-top:-7px; margin-bottom:7px;}
        25%{ margin-top:-8px; margin-bottom:8px;}
        30%{ margin-top:-3px; margin-bottom:3px;}
        40%{ margin-top:0px; margin-bottom:0px;}
        50%{ margin-top:-2px; margin-bottom:2px;}
        60%{ margin-top:0px; margin-bottom:0;}
        80%{ margin-top:-1px; margin-bottom:1px;}
        100%{ margin-top:0; margin-bottom:0;}
}

@-moz-keyframes bounceUp {
        0%{ margin-top:-2px; margin-bottom:2px;}
        10%{ margin-top:-7px; margin-bottom:7px;}
        25%{ margin-top:-8px; margin-bottom:8px;}
        30%{ margin-top:-3px; margin-bottom:3px;}
        40%{ margin-top:0px; margin-bottom:0px;}
        50%{ margin-top:-2px; margin-bottom:2px;}
        60%{ margin-top:0px; margin-bottom:0;}
        80%{ margin-top:-1px; margin-bottom:1px;}
        100%{ margin-top:0; margin-bottom:0;}
}

@-webkit-keyframes bounceUp {
        0%{ margin-top:-2px; margin-bottom:2px;}
        10%{ margin-top:-7px; margin-bottom:7px;}
        25%{ margin-top:-8px; margin-bottom:8px;}
        30%{ margin-top:-3px; margin-bottom:3px;}
        40%{ margin-top:0px; margin-bottom:0px;}
        50%{ margin-top:-2px; margin-bottom:2px;}
        60%{ margin-top:0px; margin-bottom:0;}
        80%{ margin-top:-1px; margin-bottom:1px;}
        100%{ margin-top:0; margin-bottom:0;}
}


@keyframes headShine {
	0% {background-image: url(../img/bghead-1.png);}
	15% {background-image: url(../img/bghead-2.png);}
	30% {background-image: url(../img/bghead-3.png);}
	45% {background-image: url(../img/bghead-4.png);}
	60% {background-image: url(../img/bghead-5.png);}
	75% {background-image: url(../img/bghead-6.png);}
	90% {background-image: url(../img/bghead-7.png);}
	100% {background-image: url(../img/bg-headimg-short.png);}
}		

@-moz-keyframes headShine {
	0% {background-image: url(../img/bghead-1.png);}
	15% {background-image: url(../img/bghead-2.png);}
	30% {background-image: url(../img/bghead-3.png);}
	45% {background-image: url(../img/bghead-4.png);}
	60% {background-image: url(../img/bghead-5.png);}
	75% {background-image: url(../img/bghead-6.png);}
	90% {background-image: url(../img/bghead-7.png);}
	100% {background-image: url(../img/bg-headimg-short.png);}
}	

@-webkit-keyframes headShine {
	0% {background-image: url(../img/bghead-1.png);}
	15% {background-image: url(../img/bghead-2.png);}
	30% {background-image: url(../img/bghead-3.png);}
	45% {background-image: url(../img/bghead-4.png);}
	60% {background-image: url(../img/bghead-5.png);}
	75% {background-image: url(../img/bghead-6.png);}
	90% {background-image: url(../img/bghead-7.png);}
	100% {background-image: url(../img/bg-headimg-short.png);}
}	
	

.headchannelitem a span {
	font-size:inherit;
	line-height:inherit;
}

.headchannelitem a:hover {}

.headchannelitem img { display: block; margin: 0 0 10px 0;}





@media screen and (max-width:959px) and (min-width: 640px) {

	.headlistwrap {}
	.headchannellisting {margin:-7px auto 0 auto; display:block; width:680px}
	
	.headchannelitem a {
		width: 80px;
		background: url(../img/bg-headimg-short.png) 14px 6px no-repeat;
		background-size: auto 54px;
		margin: 0px 0px 0px 15px;
		display: block;
		float: left;
		text-align:center;
	}
	.headchannelitem span {display:none;}
	
	.headchannelitem a .headpic {
		display:block;
		height:64px !important;
		width:64px !important;
		background-position:left top;
		background-size: 100% auto;
	}
}