/*
    Document   : bf_menu.css
    Created on : July 19, 2021, 12:51:00 PM
    Author     : Barry Ford
    Description: Appearance and Behavior classes for image menu buttons
*/

.menu_container {
	display: table-cell;
	height: 40px;
}

/*menu_container sub-div*/
.menu_container div {
	float: left;
	margin: 3px 8px 0 8px;
}

/*menu_container sub-div anchor*/
.menu_container div a {
	vertical-align: middle;
}

/*Menu ID descriptions*/
/*Home*/
#home_m {
	background-image: url(../images/home_idle_40px.png);
	background-repeat: no-repeat;
	height: 40px;
	width: 40px;
	background-size: 100% 100%;
}

#home_m:hover {
	background-image: url(../images/home_hover_40px.png);
}

/*Events*/
#events_m {
	background-image: url(../images/mnu_EVENTS_idle.png);
	background-repeat: no-repeat;
	height: 40px;
	width: 85px;
	background-size: 100% 100%;
}

#events_m:hover {
	background-image: url(../images/mnu_EVENTS_hover.png);
}

/*Media*/
#media_m {
	background-image: url(../images/mnu_MEDIA_idle.png);
	background-repeat: no-repeat;
	height: 40px;
	width: 85px;
	background-size: 100% 100%;
}

#media_m:hover {
	background-image: url(../images/mnu_MEDIA_hover.png);
}

/*Contact_Follow*/
#contact_follow_m {
	background-image: url(../images/mnu_CONTACT_FOLLOW_idle.webp);
	background-repeat: no-repeat;
	height: 40px;
	width: 150px;
	background-size: 100% 100%;
}

#contact_follow_m:hover {
	background-image: url(../images/mnu_CONTACT_FOLLOW_hover.webp);
	height: 40px;
}

/*About*/
#about_m {
	background-image: url(../images/mnu_ABOUT_idle.png);
	background-repeat: no-repeat;
	height: 40px;
	width: 85px;
	background-size: 100% 100%;
}

#about_m:hover {
	background-image: url(../images/mnu_ABOUT_hover.png);
}

/*SMALLER SCREEN MEDIA QUERY*/
@media all and (max-device-width: 500px) {

	.menu_container div {
		margin: 2px 4px 0 4px;
	}

	#home_m {
		height: 32px;
		width: 32px;
	}

	#events_m {
		height: 28px;
		width: 53px;
	}

	#media_m {
		height: 28px;
		width: 53px;
	}

	#contact_follow_m {
		height: 28px;
		width: 84px;
	}

	#about_m {
		height: 28px;
		width: 53px;
	}
}

/*SMALLER SCREEN Landscape MEDIA QUERY*/
/* @media (max-device-width: 800px) { */
@media (orientation: landscape)and (max-device-width: 600px) {

	.menu_container div {
		margin: 2px 5px 0 5px;
	}

	#home_m {
		height: 32px;
		width: 32px;
	}

	#events_m {
		height: 28px;
		width: 53px;
	}

	#media_m {
		height: 28px;
		width: 53px;
	}

	#contact_follow_m {
		height: 28px;
		width: 84px;
	}

	#about_m {
		height: 28px;
		width: 53px;
	}
}