/**
 * 
 *  File: menu.css
 *
 *  SM Visual Studio web development menu style definitions
 *  Default styles. Default for wide normal media elements.
 *  Responsive size are: wide, desktop, laptop, tablet, phone
 *
 *  Version: 2.0.0
 *  Author: Stefano Mengarelli
 *  Copyright: (C) 2017 by Stefano Mengarelli
 * 
 *  January 2017
 * 
 */

/**
 *  Menu table classes
 */

.menu-table {
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	border:0px none;
	border-collapse:collapse;
	width:100%;
}

.menu-cell-left {
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	border:0px none;
	border-collapse:collapse;
	align-content:flex-start;
	vertical-align:middle;
	display:table-cell;
	text-align:left;
}

.menu-cell-right {
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	border:0px none;
	border-collapse:collapse;
	align-content:flex-end;
	vertical-align:middle;
	display:table-cell;
	text-align:right;
}

/**
 *  Menu items classes
 */

.menu-items {
	background: #F0F0F0;
	background-color: #F0F0F0;
	background-image: none;
	background-position: top;
	background-repeat: no-repeat;
	display: block;
	height: 100px;
	overflow: hidden;
	text-align: center;
	text-wrap: none;
	vertical-align: middle;
	white-space: nowrap;
	width: 100%;
}

.menu-item, .menu-item-selected, .menu-item-pad {
	background: #F0F0F0;
	background-color: #F0F0F0;
	background-image: none;
	background-position: top;
	background-repeat: no-repeat;
	color: #000;
	display: block;
	float: left;
	font-family: 'Quicksand_Medium',sans-serif, Arial, Helvetica;
	font-size: 12pt;
	height: 100px;
	line-height: 100px;
	overflow: hidden;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
	text-wrap: none;
	vertical-align: middle;
	white-space: nowrap;
	width: auto;
}

.menu-item:hover {
	background:#000;
	color:#FFF000;
}

.menu-item-selected {
	background:#333;
	color:#FFF000;
}

.menu-item-selected:hover {
	background:#333;
	color:#FFF000;
}

.menu-item-pad {
	padding-left:0px;
	padding-right:0px;
	width:0px;
}

.menu-item-link {
	color:#000000;
	text-decoration:none;
}

.menu-item-link:hover {
	background:#000;
	color:#FFF000;
	text-decoration:none;
}

.menu-item-link:visited {
	color:#000;
	text-decoration:none;
}

.menu-item-link:visited:hover {
	background:#FFF000;
	color:#000;
	text-decoration:none;
}

.menu-subitem-span {
	text-wrap:none;
	white-space: nowrap;
	width:auto;
}

/**
 *  Menu subitems classes
 */

.menu-subitems {
	display: none;
	position: absolute;
	z-index: 9120;
	width: 240px;
	overflow-x: hidden;
	overflow-y: auto;
	clear: both;
	text-wrap: none;
	white-space: nowrap;
	background: #F0F0F0;
	border-top: 1px dotted #F0F0F0;
	border-left: 1px solid #909090;
	border-right: 1px solid #909090;
	border-bottom: 1px solid #909090;
	color: #000000;
}

.menu-subitem {
	display:block;
	width:100%;
	height:32px;
	line-height:32px;
	text-wrap:none;
	white-space: nowrap;
	text-align:left;
	text-decoration:none;
	padding: 4px 4px 4px 4px;
	padding-left:10px;
}

.menu-subitem:hover {
	background:#000000;
	color:#FFF000;
}

.menu-subitem-link {
	text-decoration:none;
	color:#000000;
}

.menu-subitem-link:hover {
	text-decoration:none;
	color:#FFF000;
}

.menu-subitem-link:visited {
	text-decoration:none;
	color:#000000;
}

.menu-subitem-link:visited:hover {
	text-decoration:none;
	color:#FFF000;
}

/**
 *  Menu popup items classes
 */

.menu-popup-button {
	background: #F0F0F0;
	background-color: #F0F0F0;
	background-image: url('/smweb/images/menu-black.png');
	background-position-x: center;
	background-position-y: center;
	background-repeat: no-repeat;
	color: #000;
	display: none;
	float: left;
	font-family: 'Quicksand_Medium',sans-serif, Arial, Helvetica;
	font-size: 12pt;
	height: 100px;
	line-height: 64px;
	overflow: hidden;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
	text-wrap: none;
	vertical-align: middle;
	white-space: nowrap;
	width: 64px;
}

.menu-popup-items {
	display: none;
}

.menu-popup-item, .menu-popup-item-selected {
	background: #F0F0F0;
	background-color: #F0F0F0;
	background-image: none;
	background-position: top;
	background-repeat: no-repeat;
	color: #444;
	display: block;
	font-family: 'Quicksand_Medium',sans-serif, Arial, Helvetica;
	font-size: 12pt;
	height: 64px;
	line-height: 64px;
	overflow: hidden;
	padding-left: 32px;
	padding-right: 0px;
	text-align: left;
	text-wrap: none;
	vertical-align: middle;
	white-space: nowrap;
	width: 100%;
}

.menu-popup-item:hover {
	background:#000;
	color:#FFF000;
}

.menu-popup-item-selected {
	background:#333;
	color:#FFF000;
}

.menu-popup-item-selected:hover {
	background:#333;
	color:#FFF000;
}

.menu-popup-item-link {
	color:#000000;
	text-decoration:none;
}

.menu-popup-item-link:hover {
	background:#000;
	color:#FFF000;
	text-decoration:none;
}

.menu-popup-item-link:visited {
	color:#000;
	text-decoration:none;
}

.menu-popup-item-link:visited:hover {
	background:#E0E0E0;
	color:#000;
	text-decoration:none;
}

/**
 *  Menu popup subitems classes
 */

.menu-popup-subitems {
	display:none;
}

.menu-popup-subitem {
	background:#FFFFC0;
	background-color:#FFFFC0;
	background-image:none;
	background-position:top;
	background-repeat:no-repeat;
	color:#222;
	display:block;
	font-family: 'Quicksand_Medium',sans-serif, Arial, Helvetica;
	font-size:12pt;
	height:64px;
	line-height:64px;
	overflow:hidden;
	padding-left:48px;
	padding-right:0px;
	text-align:left;
	text-wrap:none;
	vertical-align:middle;
	white-space: nowrap;
	width:100%;
}

.menu-popup-subitem:hover {
	background:#000000;
	color:#FFF000;
}

.menu-popup-subitem-link {
	color:#000000;
	text-decoration:none;
}

.menu-popup-subitem-link:hover {
	text-decoration:none;
	color:#FFF000;
}

.menu-popup-subitem-link:visited {
	text-decoration:none;
	color:#000000;
}

.menu-popup-subitem-link:visited:hover {
	text-decoration:none;
	color:#FFF000;
}



/**
 *  Responsive desktop media elements up to 1280 px width 
 */

@media only screen and (max-width: 1280px) {

	.menu-popup-button {
		display:none;
	}

	.menu-item, .menu-item-selected {
		display: block;
	}

	.menu-popup-items {
		display: none;
	}

}

/**
 *  Responsive laptop media elements up to 1024 px width
 */
@media only screen and (max-width: 1024px)
{ 

	.menu-popup-button {
		display:none;
	}

	.menu-item, .menu-item-selected {
		display:block;
	}

	.menu-popup-items {
		display: none;
	}

}

/**
 *  Responsive tablet media elements up to 768 px width
 */
@media only screen and (max-width: 768px)
{ 

	.menu-popup-button {
		display:block;
	}

	.menu-item, .menu-item-selected {
		display: none;
	}

	.menu-popup-items {
		display: none;
	}

}

/**
 *  Responsive phone media elements up to 480 px width
 */
@media only screen and (max-width: 480px)
{ 

	.menu-popup-button {
		display:block;
	}

	.menu-item, .menu-item-selected {
		display: none;
	}

	.menu-popup-items {
		display: none;
	}

}