/*
 * MENU.CSS - THEME 'channel4'
 * 
 */



/* MENU BUTTON */

.rcMenuButt:before {
	content: 'menu';
	 font-size: 28px;
	padding-left: 18px;
}

.rcMenuButt, body .rcMenuButt.rcTouch { 
	width: 100px;
	height: 50px;
	background-color: #555555;
	color: #ffffff;
}
.rcMenuButt:hover, body .rcMenuButt.rcTouch:hover { 
	text-decoration: none;
}



/* MENU */

.rcMenu {
	background-color: #555555;
	color: #ffffff;
	-webkit-border-radius: 0px;
    border-radius: 0px;
    padding: 0 12px 8px 2px;
}

.rcMenu li, body .rcMenu .rcTouch {
	color: #ffffff;
	padding-right: 22px;
}
.rcMenu li:hover, body .rcMenu .rcTouch.ton:hover {
	color: #ffbc21;
}

.rcMenu li.rcActiveOption div {
	background: none !important;
	color: #ffbc21;
}

.rcMenu li.rcLocked, body .rcMenu li.rcTouch.rcLocked:hover {
	color:#999999;
	background-image:url('../img/menu_lock.png');
	background-repeat: no-repeat;
	background-position: right center;
}

.rcMenu li.rcLocked:hover, body .rcMenu li.rcLocked.rcTouch.ton {
	color:#999999;
}
.rcMenu li.rcCompleted, body .rcMenu li.rcTouch.rcCompleted:hover {
	background-image:url('../img/menu_tick.png');
	background-repeat: no-repeat;
	background-position: right center;
}




@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.rcMenu li.rcActiveOption div {
		background-image: url('../img/menu_chevron@2x.png');
		background-size: 7px 7px;
	}
	
	.rcMenu li.rcLocked, body .rcMenu li.rcTouch.rcLocked:hover {
		background-image:url('../img/menu_lock@2x.png');
		background-size: 11px 15px;
	}

	.rcMenu li.rcCompleted, body .rcMenu li.rcTouch.rcCompleted:hover {
		background-image:url('../img/menu_tick@2x.png');
		background-size: 14px 9px;
	}
}





/* === RESPONSIVE CHANGES === */

/* Large Desktop (over 1200px) - precede with .desktop_l */

body.desktop_l
{}

.desktop_l .rcModule
{}



/* Small Desktop (1024px to 1200px) - precede with .desktop_s */

body.desktop_s
{}

.desktop_s .rcModule
{}



/* Large Tablet (769px to 1024px) - precede with .tablet_l */

/* MEDIA QUERY IS A TEMPORARY FIX FOR CAROUSELS IN IE9 - REMOVE AGAIN WHEN SASS ALLOWS NESTING OF IE9 TAG? */
@media only screen 
and (max-device-width : 1024px) {


.tablet_l .rcMenuButt, body .rcMenuButt.rcTouch:hover {
	background-image: url('../img/menu_butt@2x.png');
	background-repeat: no-repeat;
	background-size: 17px 13px;
	background-position: 18px 16px;
	width: 50px;
	height: 48px;
	border-radius: 0px 0px 0px 10px;
	background-color: #76b74a !important;
	color: #ffffff;
}

.theme1.tablet_l .rcMenuButt, body.theme1 .rcMenuButt.rcTouch:hover {
	background-color: #ffbc21 !important;
	color: #333333 !important;
}

}
.tablet_l .rcMenuButt, body.tablet_l .rcMenuButt.rcTouch { 
}

}

/* Mobile (below 480px) - precede with .mobile */


body.mobile
{}

.mobile .rcModule
{}

.mobile .rcMenuButt, body .rcMenuButt.rcTouch:hover {
}