.menu {overflow: hidden;}
.menu .items{width: auto;height: auto;padding: 0px;margin: 0px;}
.menu .item {width: auto;height: auto;padding: 0px;margin: 0px;}
.menu .item a {display: block;padding: 0px;margin: 0px;vertical-align: middle;text-transform: capitalize;font-weight: bold;cursor: pointer;}
.menu .item .separator {padding: 0px;margin: 0px;width: 50px;height: 100%;border: none;}

/**
 * HORIZONTAL 
*/
.h-menu {display:block;float:left;}
.h-menu .items {display: block;float: left;}
.h-menu .item {display: block;float: left;}
.h-menu .item a{display: block;float: left;text-align: center;}

/**
 * POPUP
 */ 
.popup-layout .menu{position: absolute;top:100px;width:200px; height:auto;}
.popup-menu{filter:'alpha(opacity=80)';opacity:0.8;z-index: 50;margin: 0px;padding: 0px;width: 206px;}
.popup-menu .items {border: 1px solid gray;margin: 0px;padding: 0px;width: 204px;}
.popup-menu .items .item {border: 1px solid white;width: 200px;;margin: 0px;padding: 0px;}
.popup-menu .items .item a {border: 1px solid gray;display: block; font-size: 14px;text-indent: 20px;height: 20px;width: 100%;text-align: left;}
.popup-menu .submenu a:before {content:' + ' ;background: url(/framework/images/menu/plus.gif) 0px 5px no-repeat;color: transparent;}
.popup-menu .submenu.show-menu .menu a:before {content:none;}
.popup-menu .submenu.show-menu a:before {content:' - ' ;background: url(/framework/images/menu/minus.gif) 0px 5px no-repeat;}
.popup-menu .submenu .item a{text-indent: 25px;}

/**
 * GRID
 */
.grid-menu {display: block;height:auto; border: 1px solid lightgray;}
.grid-menu .items{display: inline;float:left;}
.grid-menu .item {display: block;float: left;height: 40px;margin: 20px;vertical-align: middle;}
.grid-menu .item a {color: black;font-size: 30px;text-align: center;border:2px solid black;}
.grid-menu .item a:hover {filter:'alpha(opacity=70)'; opacity:0.7;}
.grid-menu .item a {display: block;width: 100%; height: 100%;}

/**
 * ICONS
*/
.icon-delete-item a {background: url(/framework/images/menu/delete.gif) 2px 2px no-repeat;}
.icon-clone-node a {background: url(/framework/images/menu/clone.gif) 2px 2px no-repeat;}
.icon-restore-template a {background: url(/framework/images/menu/restore.gif) 2px 2px no-repeat;}
.icon-go-into a {background: url(/framework/images/menu/gointo.gif) 2px 2px no-repeat;}
.icon-clone-node a {background: url(/framework/images/menu/clone.gif) 2px 2px no-repeat;}
.icon-create-sequence a {background: url(/framework/images/table/sequence.gif) 2px 2px no-repeat;}
.icon-clone-item a {background: url(/framework/images/menu/clone.gif) 2px 2px no-repeat;}

.menu .item.submenu {background-color: red;} 
.menu .item.submenu .menu{display:none;margin: 0px;border:none;z-index: 20;}
.menu .item.submenu .menu.show-menu{display:block;}
.menu .item.submenu .menu .items {border: none;}
.menu .item.submenu .menu .item {border: none;}


/**
.hidden-menu {display: none}
	DEFAULT SIZE
*/
.test .menu{margin: 30px;}
.menu {width: 200px;}
.h-menu {height: auto;width: auto;}
.h-menu .item a {height: 30px;width: 160px;}
.breadcrumbs {height: 20px;border:none;}
.breadcrumbs .item a{width: auto;}
.breadcrumbs .item{width: auto;}

/**
	CUSTOMIZED SIZE
*/
.menu.m-width-xxs{width: 50px;}
.menu.m-width-xs{width: 100px;}
.menu.m-width-s{width: 200px;}
.menu.m-width-m{width: 300px;}
.menu.m-width-l{width: 450px;}
.menu.m-width-xl{width: 600px;}
.menu.m	width-xxl{width: 800px;}

.menu.m-height-xxs{height: 15px;}
.menu.m-height-xs{height: 30px;}
.menu.m-height-s{height: 45px;}
.menu.m-height-m{height: 60px;}
.menu.m-height-l{height: 120px;}
.menu.m-height-xl{height: 240px;}
.menu.m	height-xxl{height: 400px;}

.menu.item-height-xxs .item a{height: 15px;}
.menu.item-height-xs .item a{height: 30px;}
.menu.item-height-s .item a{height: 40px;}
.menu.item-height-m .item a{height: 80px;}
.menu.item-height-l .item a{height: 120px;}
.menu.item-height-xl .item a{height: 200px;}
.menu.item-height-xxl .item a{height: 220px;}

.menu.item-width-xs .item a{width: 80px;}
.menu.item-width-s .item a{width: 120px;}
.menu.item-width-m .item z{width: 160px;}
.menu.item-width-l .item a{width: 180px;}
.menu.item-width-xl .item a{width: 200px;}
.menu.item-width-xxl .item a{width: 220px;}

.menu .item.width-xxs{width: 20px;}
.menu .item.width-xs{width: 30px;}
.menu .item.width-s{width: 40px;}
.menu .item.width-m{width: 200px;}
.menu .item.width-l{width: 200px;}
.menu .item.width-xl{width: 240px;}
.menu .item.width-xxl{width: 280px;}

.menu .item.height-xxs{height: 20px;}
.menu .item.height-xs{height: 30px;}
.menu .item.height-s{height: 40px;}
.menu .item.height-m{height: 100px;}
.menu .item.height-l{height: 160px;}
.menu .item.height-xl{height: 200px;}
.menu .item.height-xxl{height: 280px;}

/**
	DEFAULT COLOR
**/
.menu .item a:hover {color: lightgray;}

/**
	GRID COLOR
**/
.grid-color {background-color: gray;border-color: black;}
.grid-color .item a {background-color: buttonface;color: black;border-color: black;} 
.grid-color .item a:hover {background-color: black;color: white;border-color: white;} 

/**
	TREE MENU COLOR
**/
.tree .menu{}
.tree .menu .items {background-color: lightGray; border: 1px solid gray;}
.tree .menu .item {border: 1px solid white;}
.tree .menu .item a {border: 1px solid gray;background-color: lightGray; color: black;}
.tree .menu .item a:hover {color: gray;background-color: white}
.tree .menu .item .current a {color: gray;background-color: white}
.tree .menu .submenu a:before {color: transparent;}
.tree .menu .submenu .item a{background-color: gray;color: white;}
.tree .menu .submenu .item a:hover{background-color: white;color: gray;}

.menu.top-menu{background-color: lightblue;color: navy;font-size: 12px;height: 15px;padding: 0px;margin: 0px;}
.menu.top-menu .items{height: 15px;padding: 0px;margin: 0px;}
.menu.top-menu .item{border-left:1px solid navy;padding: 0px;}
.menu.top-menu .item a{height: 15px;padding: 0px;margin: 0px;width: 180px;}
.menu.top-menu .first.item{border-left:none}

/**
	BREADCRUMBS
*/
.breadcrumbs {display: block;width: auto;float: left;}
.breadcrumbs .separator {background: url(/framework/images/other/right.gif) center 1px no-repeat;display: block;float:left; width: 30px;height: 30px;}
.breadcrumbs .separator *{display: block;float:left; width: 30px;height: 30px;margin: 0px;padding: 0px;}
.breadcrumbs .item {display: inline;width: auto;}
.breadcrumbs .item a{display: inline;text-align: center;padding: 0px 0px 0px 0px;}

/**
	PROCESS
*/
.process-menu {display: block;float: left;width: auto;height: 30px;padding: 0px;margin: 0px;}
.process-menu .separator {background: url(/framework/images/other/right.gif) center 5px no-repeat;display: block;float:left; width: 20px;height: 30px;}
.process-menu .item a{display: inline;text-align: center;padding: 0px 5px 0px 5px;}

.menu .item .off a {color: white;background-color: lightgray;}
.menu .item .off a:hover {cursor: default;color: white;background-color: lightgray;}
.special{position:absolute;left:100px;display: block;border:1px solid black;}
.ok{left:300px;}
.special {width: 50px;height: 50px;}
.special a{text-align: center;border:1px solid blue;width: 100%;display: block;vertical-align: text-bottom;height: 80%}
.special a *{vertical-align: middle;}