/*.menu-collapse {
    float: left;
    clear: both;
    border: 2px solid orange;
    width: 100%;
    background: blue;
}

*/
/* --------------------------------------------------------------------------------------- the scrollmenu ---------  */
#menuChannels {
  font-size: 12px;
  font-size: 1.2rem;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  width: 312px;
  float: left;
  margin: 14px 0 14px 14px;
}

.scrollHeader,
.scrollFooter {
  /* background */
  background: -moz-linear-gradient(top, white 0%, #edf0f1 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #edf0f1), color-stop(100%, #edf0f1));
  background: -webkit-linear-gradient(top, white 0%, #edf0f1 100%);
  background: -o-linear-gradient(top, white 0%, #edf0f1 100%);
  background: -ms-linear-gradient(top, white 0%, #edf0f1 100%);
  -pie-background: linear-gradient(#ffffff, #edf0f1);
  /* @codingStandardsIgnoreStart  */
  background: linear-gradient(top, #ffffff 0%, #edf0f1 100%);
  /* @codingStandardsIgnoreEnd  */
  /* border radius */
  -o-border-radius: 13px 13px 0 0;
  border-radius: 13px 13px 0 0;
  -moz-border-radius: 13px 13px 0 0;
  -webkit-border-radius: 13px 13px 0 0;
  behavior: url("tvlive/PIE.htc");
}

.scrollFooter {
  height: 30px;
  /* border radius */
  -o-border-radius: 0px 0px 13px 13px;
  border-radius: 0px 0px 13px 13px;
  -moz-border-radius: 0px 0px 13px 13px;
  -webkit-border-radius: 0px 0px 13px 13px;
  behavior: url("tvlive/PIE.htc");
}

.scrollHeader h3.scrollHeading {
  font-size: 22px;
  color: #002b45;
}

/* ------------------------------------------------------------------------------------- The list itselve ---------- */
.jcarousel-skin-tango {
  clear: both;
}

/* Clip the list to the height 600px; */
.jcarousel-skin-tango .jcarousel-clip {
  height: 560px;
}

/* White block at bottom to scroll */
.jcarousel-skin-tango .jcarousel-next-vertical,
.jcarousel-skin-tango .jcarousel-prev-vertical {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 25px;
  width: 100%;
  cursor: pointer;
  background: white url("../images/tveverywhere/arrows.png") no-repeat center -38px;
  opacity: 0.6;
  filter: alpha(opacity=60);
  -moz-box-shadow: 0 0 4px #A8B6BF;
  box-shadow: 0 0 5px #A8B6BF;
  -webkit-box-shadow: 0 0 4px #A8B6BF;
}

/* White block at bottom to scroll */
.jcarousel-skin-tango .jcarousel-prev-vertical {
  background-position: center 5px;
}

li.menuClickItem.menuClickItem,
ll.jcarousel li.menuClickItem {
  width: 100%;
  background: #108ebd;
  border-bottom: 1px dotted #FFFFFF;
  height: 63px;
}
li.menuClickItem.activeItem,
ll.jcarousel li.activeItem {
  background-color: #fff;
}

li.activeItem {
  background-color: #fff;
}

.jcarousel-skin-tango .jcarousel-clip {
  height: 560px;
}

/* 
***************************************
sass structure for the Bouquet dropdown
*/
.sprite-image, h3.listHeading span.menu, h3.listHeading.bouquet-selected span.menu, .scrollHeader ul.menu-collapse .bouquet, .ie7 .scrollHeader h3.listHeading,
.ie8 .scrollHeader h3.listHeading {
  background-image: url('../images/spr_icons-sd4aab54d34.png');
  background-repeat: no-repeat;
}

h3.listHeading {
  line-height: 46px;
  font-size: 22px;
  text-align: center;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #c2e6f7), color-stop(68%, #ffffff));
  background-image: -webkit-linear-gradient(#c2e6f7 1%, #ffffff 68%);
  background-image: -moz-linear-gradient(#c2e6f7 1%, #ffffff 68%);
  background-image: -o-linear-gradient(#c2e6f7 1%, #ffffff 68%);
  background-image: linear-gradient(#c2e6f7 1%, #ffffff 68%);
  -webkit-border-radius: 13px 13px 0 0;
  -moz-border-radius: 13px 13px 0 0;
  -ms-border-radius: 13px 13px 0 0;
  -o-border-radius: 13px 13px 0 0;
  border-radius: 13px 13px 0 0;
  -webkit-box-shadow: inset #9cc2d3 0px 3px 2px;
  -moz-box-shadow: inset #9cc2d3 0px 3px 2px;
  box-shadow: inset #9cc2d3 0px 3px 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
h3.listHeading span.menu {
  text-indent: -99999px;
  display: block;
  position: absolute;
  top: 13px;
  right: 10px;
  height: 25px;
  width: 27px;
  background-position: -27px 0;
}
h3.listHeading .title {
  float: left;
  width: 100%;
}

h3.listHeading.bouquet-selected {
  background: url("../images/bg/menuChannels-item-overlay.png") repeat-x;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  color: #fff;
}
h3.listHeading.bouquet-selected span.menu {
  height: 25px;
  width: 27px;
  background-position: 0 0;
}

#menuChannels .title {
  float: left;
  width: 80%;
  text-align: left;
  padding-left: 15px;
}
#menuChannels .icon-bouquet {
  float: left;
  width: 60px;
  height: 47px;
  text-align: center;
  display: table;
  margin: 0 16px 0 0;
  border-right: 3px dotted #fff;
}
#menuChannels span.icon-bouquet-span {
  display: table-cell;
  vertical-align: middle;
  height: 100%;
}
#menuChannels span.icon-bouquet-span img {
  margin: 0 auto;
}

/* Extra fallback to hide the icon in the Live Tv tab - data does not belong there as a standard */
li#liveCarousel .icon-bouquet {
  display: none;
}

ul.menu-collapse li#liveCarousel {
  display: none;
}

#menuChannels h3.listHeading.liveCarousel .icon-bouquet {
  display: none;
}
#menuChannels h3.listHeading.liveCarousel .title {
  width: 100%;
  text-align: center;
}

ul.menu-collapse li#liveCarousel span.title {
  text-align: center;
  width: 100%;
}

/* The dropdown view */
#menuChannels.columnRight #bouquets ul.jcarousel {
  background: none repeat scroll 0 0 #EFEFEF;
  min-height: 560px !important;
}

/* The dropdown view */
.scrollHeader ul.menu-collapse {
  background: none repeat scroll 0 0 #EFEFEF;
  height: 560px;
  position: absolute;
  width: 310px;
  z-index: 1000;
}
.scrollHeader ul.menu-collapse .bouquet {
  /* the Bouquet grey header */
  display: block;
  position: relative;
  top: 0;
  z-index: 15;
  height: 41px;
  width: 310px;
  background-position: 0 -47px;
  text-align: center;
  font-family: "Georgia", Times New Roman, times, serif;
  color: #fefefe;
  font-size: 20px;
  line-height: 30px;
  border: 0;
}
.scrollHeader ul.menu-collapse li {
  /* the list items in the dropdown */
  background: url("../images/bg/menuChannels-item-overlay.png") repeat-x #0f4260;
  border-bottom: 1px solid #2f5973;
  width: 100%;
  height: 47px;
  font-family: "Georgia", Times New Roman, times, serif;
  color: #a0caee;
  font-size: 21px;
  line-height: 46px;
  position: relative;
  z-index: 1;
}
.scrollHeader ul.menu-collapse li:hover {
  cursor: pointer;
  color: #fff;
}
.scrollHeader ul.menu-collapse li .icon-bouquet {
  float: left;
  width: 60px;
  height: 47px;
  text-align: center;
  display: table;
  margin: 0 16px 0 0;
  border-right: 3px dotted #fff;
}

.scrollHeader ul.menu-collapse li#liveCarousel {
  color: #fff;
  border-bottom: none;
  height: 46px;
}

.scrollHeader ul.menu-collapse li#liveCarousel:hover {
  background: url("../images/bg/livetv-item.png") repeat-x;
  color: #45545F;
  border-bottom: none;
}

/* ie7 - ie8 fallbacks */
/* Giving a background image to the header */
.ie7 .scrollHeader,
.ie8 .scrollHeader {
  position: relative;
}
.ie7 .scrollHeader h3.listHeading,
.ie8 .scrollHeader h3.listHeading {
  z-index: 0;
  position: relative;
  behavior: url("/tv-overal/PIE.htc");
  height: 49px;
  width: 310px;
  background-position: 0 -88px;
  background-color: none;
}
.ie7 .scrollHeader h3.listHeading.bouquet-selected,
.ie8 .scrollHeader h3.listHeading.bouquet-selected {
  background: url("../images/bg/menuChannels-item-overlay.png") repeat-x;
}

/* ie7 only fallbacks */
.ie7 #menuChannels {
  position: relative;
}
.ie7 #menuChannels li.menuClickItem {
  width: 311px;
}

.ie7 .scrollHeader ul.menu-collapse {
  z-index: 500;
}

.ie7 .scrollHeader {
  z-index: 1000;
}

.ie7 span.icon-bouquet-span {
  margin-top: 10px;
}

.ie7 .scrollHeader ul.menu-collapse li {
  margin: 0;
  clear: both;
  float: left;
}

.ie7 #menuChannels .icon-bouquet span.icon-bouquet-span img {
  margin-top: 10px;
  display: block;
}