@import url(../../../common/css/siteGlobal.css);

.footer-desktop,
.nav-button-container .dropdown-menu .header,
.nav-button-container-mobile .dropdown-menu-items-li,
.nav-button-container .dropdown-menu,
.help-modal .modal-dialog .modal-content .help-dialog
{
  background-image: -webkit-linear-gradient(top, #7d7d7d 0%, #3a3a3a 100%); background-image: -o-linear-gradient(top, #7d7d7d 0%, #3a3a3a 100%); background-image: linear-gradient(to bottom, #7d7d7d 0%, #3a3a3a 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF7d7d7d', endColorstr='#FF3a3a3a', GradientType=0);
}

/* --------------------------------------------------------------------------------------------
	primary color 
-------------------------------------------------------------------------------------------- */

.header-desktop {
  border-bottom: 2px solid #7d7d7d;
}

.nav-button-container .dropdown-menu li a,
.nav-button-container-mobile .dropdown-menu-items-li #mobile-menu-resources ul li a {
   border-top: 1px solid #7d7d7d;
}

.nav-button-container-mobile .dropdown-menu-items-li,
.nav-button-container .dropdown-menu .header {
   border-bottom:1px solid #7d7d7d;
}

HTML.ie8 .in.modal .modal-dialog .modal-content .bulletin-dialog .close IMG,
.modal-dialog .modal-content .bulletin-dialog,
.header-mobile-settings.open,
.cls-mobile .mejs-controls .mejs-time-rail .mejs-time-total,
.header-mobile {
	background:#7d7d7d;
}

.header-mobile nav,
.header-mobile nav [role="tablist"] > li {
    color: #7d7d7d;
}

/* --------------------------------------------------------------------------------------------
	secondary color
-------------------------------------------------------------------------------------------- */

/* hover color for navigation menu */
.nav-button-container.open a.nav-button,
html.cls-desktop .nav-button:hover,
html.cls-desktop .nav-button-container .dropdown-menu li a:hover,
.nav-button-container-mobile .dropdown-menu-items-li #mobile-menu-resources ul li a,
html.cls-mobile .audio-container,
.header-mobile nav,
.header-mobile nav [role="tablist"] .active {
	background:#3a3a3a;
}

/* --------------------------------------------------------------------------------------------
	Other stylings [ Filter, Border etc... ]
-------------------------------------------------------------------------------------------- */

/* --- Styling for Footer and Mobile Header ---- */
.header-mobile-menu .icon, .header-mobile-settings .icon {
  background-image: url("../images/icon-all.png");
  background-repeat: no-repeat;
}

html.cls-desktop .nav-button-container .dropdown-menu li a:hover{color:#fff;}

/* ---- Dropdown menu for the Audio and the Resource tab ---- */
.nav-button-container-mobile .dropdown-menu-items-li #mobile-menu-resources ul li:first-child a {
  border-top: none;
}

.progress.nav-progress, html.cls-desktop .mejs-controls .mejs-time-rail .mejs-time-total,
html.cls-tablet .mejs-controls .mejs-time-rail .mejs-time-total,
html.cls-tablet .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
background-image: -webkit-linear-gradient(top, #3a3a3a 0%, #0e0e0e 100%); background-image: -o-linear-gradient(top, #3a3a3a 0%, #0e0e0e 100%); background-image: linear-gradient(to bottom, #3a3a3a 0%, #0e0e0e 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF3a3a3a', endColorstr='#FF0e0e0e', GradientType=0);	
	}


/* --------------------------------------------------------------------------------------------
	Mandatory styles
-------------------------------------------------------------------------------------------- */
.footer-desktop .nav-button .icon,
.header-desktop-close-button,
.header-desktop-breadcrumbs .divider,
html.rtl .header-desktop-breadcrumbs .divider,
.nav-button-container .dropdown-menu .header .menu-close {
  background-image: url("../images/icon-all.png");
  background-repeat: no-repeat;
}

.bulletin-icon {
  background-image: url("../images/icon-bulletin-bg.png");
}


/*------Styling for the Swipe Icon -------*/
html.touch .swipe-icon {
  background-image: url("../images/swipe_icon.png");
}