/*
    Jumpeye framework    
	Version: 1.0.0
	www.jumpeye.com
	
	Created by Jumpeye Components
 
 
    Menu style-8
*/

    .style-8 ul.main-level {
    	width: auto;
    	margin: 10px auto;
    	border: 1px solid #ababab;
    	background: #fff;
		-moz-box-shadow: 0 1px 2px -2px rgba(0,0,0,0.9);
		-webkit-box-shadow: 0 1px 2px -2px rgba(0,0,0,0.9);
		box-shadow: 0 1px 2px -2px rgba(0,0,0,0.9);
    }
    
	.style-8 ul.main-level li {
		float: left;
		border-right: 1px solid #ababab;
		position: relative;
  	}
    
    .style-8 ul.main-level li > a { border-top: 5px solid #fff; }
    
    
    .style-8 ul.main-level > li.down > ul.sub-level li:first-child { border-top: 1px solid #ababab; }
    .style-8 ul.main-level > li.down > ul.sub-level li > a{ border: 0; border-left: 5px solid #fff; padding-top: 11px; }
    .style-8 ul.main-level > li.down > ul.sub-level li { border: solid #ababab; border-width: 0 1px 1px 1px; }
    
    .style-8 ul.main-level > li.down > ul.sub-level li > ul > li:last-child { border-bottom: 1px solid #ababab; }
    .style-8 ul.main-level > li.down > ul.sub-level li > ul > li > a { border: 0; border-left: 5px solid #fff; padding-top: 11px; }
       
	.style-8 ul.main-level a {
		float: left;
		padding: 6px 36px 10px;
		color: #000;
		font: 14px Arial, Helvetica;
		text-decoration: none;
	}
   
    .style-8 ul.main-level li.flyout:active > a,        
    .style-8 ul.main-level li.down:active > a { color: #666; }
           
	.style-8 ul.main-level li:hover > a { color: #000; }
    
	.style-8 ul.main-level li:active > a { color: #9b9b9b; }    
	
    
    /* menu arrow */
    .style-8 ul.main-level > li.down > span.arrow-down {
        width: 0;
        border:  solid 4px; 
        border-color: #000 transparent  transparent  transparent; 
        position: absolute;
        right: 15px; top: 17px;
    }    
    
    .style-8 ul.main-level > li.down:hover > a+span.arrow-down,
    .style-8 ul.main-level > li.down:active > a+span.arrow-down { border-color: #000 transparent transparent transparent; }
        
    /* menu arrow */
    .style-8 ul.sub-level > li.flyout > span.arrow-right {
        width: 0;
        border:  solid 4px; 
        border-color: transparent  transparent  transparent #000; 
        position: absolute;
        right: 11px; top: 15px;
    } 

    .style-8 ul.sub-level > li.flyout:hover > a+span.arrow-right,
    .style-8 ul.sub-level > li.flyout:active > a+span.arrow-right { border-color: transparent transparent transparent #000; } 
        
	.style-8 ul.main-level ul {
		margin: 20px 0 0 0;
		opacity: 0;
        display: none;
		position: absolute;
		top: 37px;
		left: -1px;
		z-index: 1;    
		background: #fff;
		-moz-box-shadow: 0 1px 2px -2px rgba(0,0,0,0.9);
		-webkit-box-shadow: 0 1px 2px -2px rgba(0,0,0,0.9);
		box-shadow: 0 1px 2px -2px rgba(0,0,0,0.9);        
	}

	.style-8 ul.main-level li:hover > ul {
		opacity: 1;
        display: block;
		margin: 0;
	}
	
	.style-8 ul.main-level ul ul {
		top: -1px;
		left: 100%; /* this arrange the submenu next to its parent menu */
		margin: 0 0 0 20px;
        z-index: 1;  
    }
	
	.style-8 ul.main-level ul li {
		float: none;
		display: block;
		border: 0;
	}
	
	.style-8 ul.main-level ul a {    
		padding: 6px 36px 10px;
		min-width:  100px;
		display: block;
		white-space: nowrap;
		float: none;
		text-transform: none;
	}
    
	.style-8 ul.main-level ul li:first-child > a {
        border: solid #ababab;
        border-width: 1px;
	}

    .style-8 ul.main-level ul li > a {
        border: solid #ababab;
        border-width: 1px 1px 1px 1px;        
    }

  
	.style-8 ul.main-level ul li:last-child > a {
        border: 1px solid #ababab;
	}    

    /* colors */
    /* orange */
    .style-8.orange ul.main-level li > a:hover{ border-top: 5px solid #ff6c00; }
    .style-8.orange ul.main-level > li.down > ul.sub-level li > a:hover{ border-left: 5px solid #ff6c00; }    
    .style-8.orange ul.main-level > li.down > ul.sub-level li > ul > li > a:hover { border-left: 5px solid #ff6c00; border-top: 0; }
    .style-8.orange ul.main-level li.down:hover > a { border-top: 5px solid #ff6c00; }

    /* green */
    .style-8.green ul.main-level li > a:hover{ border-top: 5px solid #a4d600; }
    .style-8.green ul.main-level > li.down > ul.sub-level li > a:hover{ border-left: 5px solid #a4d600; }    
    .style-8.green ul.main-level > li.down > ul.sub-level li > ul > li > a:hover { border-left: 5px solid #a4d600; border-top: 0; }
    .style-8.green ul.main-level li.down:hover > a { border-top: 5px solid #a4d600; }

    /* blue */
    .style-8.blue ul.main-level li > a:hover{ border-top: 5px solid #00a6ef; }
    .style-8.blue ul.main-level > li.down > ul.sub-level li > a:hover{ border-left: 5px solid #00a6ef; }    
    .style-8.blue ul.main-level > li.down > ul.sub-level li > ul > li > a:hover { border-left: 5px solid #00a6ef; border-top: 0; }
    .style-8.blue ul.main-level li.down:hover > a { border-top: 5px solid #00a6ef; }    

    /* purple */
    .style-8.purple ul.main-level li > a:hover{ border-top: 5px solid #a100ff; }
    .style-8.purple ul.main-level > li.down > ul.sub-level li > a:hover{ border-left: 5px solid #a100ff; }    
    .style-8.purple ul.main-level > li.down > ul.sub-level li > ul > li > a:hover { border-left: 5px solid #a100ff; border-top: 0; }
    .style-8.purple ul.main-level li.down:hover > a { border-top: 5px solid #a100ff; }   
    
    /* aqua */
    .style-8.aqua ul.main-level li > a:hover{ border-top: 5px solid #00bbcb; }
    .style-8.aqua ul.main-level > li.down > ul.sub-level li > a:hover{ border-left: 5px solid #00bbcb; }    
    .style-8.aqua ul.main-level > li.down > ul.sub-level li > ul > li > a:hover { border-left: 5px solid #00bbcb; border-top: 0; }
    .style-8.aqua ul.main-level li.down:hover > a { border-top: 5px solid #00bbcb; }       

    /* magenta */
    .style-8.magenta ul.main-level li > a:hover{ border-top: 5px solid #b70442; }
    .style-8.magenta ul.main-level > li.down > ul.sub-level li > a:hover{ border-left: 5px solid #b70442; }    
    .style-8.magenta ul.main-level > li.down > ul.sub-level li > ul > li > a:hover { border-left: 5px solid #b70442; border-top: 0; }
    .style-8.magenta ul.main-level li.down:hover > a { border-top: 5px solid #b70442; }   



	/* style-8 Mobile */
	@media screen and (max-width: 767px) {
         
        /* letiltjuk a ez 1. szintű almenü megjelenítését */ 
        .style-8 ul.main-level li:hover > ul{ display: none; } 
        
        /* letiltjuk a sub-level almenük megjelenítését */
        .style-8 ul.sub-level li:hover > ul { display: none; }

		.style-8.menu {	position: relative;	}

		.style-8.menu * {
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}

		/* menu icon */
		.style-8.menu-trigger {
			display: block; /* show menu icon */
			height: 40px;
			line-height: 38px;
			cursor: pointer;		
			padding: 0 0 0 35px;
			color: #666;
            text-transform: uppercase;
            font-family: Arial;
            font-size: 14px;            
			background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAYAAADphp8SAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAABAAAAAQBPJcTWAAAAB3RJTUUH3AcXCDMtaWGtPwAAACFJREFUeJxjTEtL+89ABcBEDUOoatAwBoyjsTYEwTCONQDytwajyt1MFAAAAABJRU5ErkJggg==) no-repeat 10px center, #fff;
    	    border: 1px solid #ababab;
    		box-shadow: 0 1px 2px -2px rgba(0,0,0,0.9);             
		}
		
		/* main nav */

        .style-8 ul.main-level * {
            box-shadow: none !important;
            border: 0 !important;
        }

       
		.style-8 ul.main-level {
			margin: 0; padding: 10px;
			position: absolute;
			top: 40px;
			width: 100%;
			z-index: 1;
            background: #fff;
			display: none;
            box-shadow: 0 1px 2px -2px rgba(0,0,0,0.9);
		}



		.style-8 ul.main-level ul {
			position: static;
            display: none; /* hide submenus */
			opacity: 1;
			margin: 0;
			background: none;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
		}

		.style-8 ul.main-level ul ul {
			margin: 0 0 0 0 !important;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
		}

		.style-8 ul.main-level li {
			position: static;
			display: block;
			float: none;
			border: 0;
			margin: 5px;
            margin-right: 0px;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
		}
        

		.style-8 ul.main-level ul li{
			margin-left: 30px;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
		}

		.style-8 ul.main-level a{
			display: block;
			float: none;
			padding: 0;
            padding: 5px !important;              
		}

        
	    .style-8 ul.main-level a:hover{
			color: #000 !important;
            background: none !important;
		}	

		.style-8 ul.main-level ul a{
			padding: 0;
			width: auto;
            margin-left: 0px;           
		}

		.style-8 ul.main-level ul a:hover { background: none; color: #000; }
        
        .style-8 ul.main-level > li.down { position: relative; }
        .style-8 ul.sub-level > li.flyout { position: relative; }

        .style-8 ul.main-level > li.down > a > span.arrow-down,
        .style-8 ul.sub-level > li.flyout > a > span.arrow-right {
            width: 0 !important; height: 0 !important;
            border:  solid 4px !important;
            border-color: transparent transparent transparent #666 !important;
            position:  absolute;
            top: 9px;          
        }    

        .style-8 ul.main-level > li.down > a > span.down-active,
        .style-8 ul.sub-level > li.flyout > a > span.flyout-active {
            border-color: #000 transparent transparent transparent !important;
            top: 12px;  
        }
 
        .style-8 ul.main-level > li.down:hover > a > span.arrow-down {
            border-left-color:  #000 !important;
        }    
    
        .style-8 ul.main-level > li.down:hover > a > span.down-active {
            border-left-color: transparent !important;    
        }
        
        .style-8 ul.main-level a:hover { background: #f1f1f1 !important; }
  
        .style-8.green ul.main-level a:hover { box-shadow: -5px 0 0 0 #a4d600 !important; }
        .style-8.orange ul.main-level a:hover { box-shadow: -5px 0 0 0 #ff6c00 !important; }
        .style-8.blue ul.main-level a:hover { box-shadow: -5px 0 0 0 #00a6ef !important; }
        .style-8.purple ul.main-level a:hover { box-shadow: -5px 0 0 0 #a100ff !important; }
        .style-8.aqua ul.main-level a:hover { box-shadow: -5px 0 0 0 #00bbcb !important; }
        .style-8.magenta ul.main-level a:hover { box-shadow: -5px 0 0 0 #b70442 !important; }

	}


	/* iPad */
	.style-8.no-transition {
		-webkit-transition: none;
		-moz-transition: none;
		-ms-transition: none;
		-o-transition: none;
		transition: none;
		opacity: 1;
		visibility: visible;
		display: none;  		
	}

	.style-8 ul.main-level li:hover > .no-transition { display: block;	}

    /* active state */
    .style-8.menu.vertical.orange li.active { 
        color: #9b9b9b; 
        box-shadow: inset 5px 0 0 0 #ff6c00;
        -moz-box-shadow: inset 5px 0 0 0 #ff6c00;
        -webkit-box-shadow: inset 5px 0 0 0 #ff6c00;
    }
    .style-8.menu.orange ul.main-level li.active > a { color: #9b9b9b; border-top: 5px solid #ff6c00; }
    .style-8.menu.orange ul.sub-level li.active > a { color: #9b9b9b; border-left: 5px solid #ff6c00; border-top: none; }    
    
    .style-8.menu.vertical.blue li.active { 
        color: #9b9b9b; 
        box-shadow: inset 5px 0 0 0 #00a6ef;
        -moz-box-shadow: inset 5px 0 0 0 #00a6ef;
        -webkit-box-shadow: inset 5px 0 0 0 #00a6ef;
    }
    .style-8.menu.blue ul.main-level li.active > a { color: #9b9b9b; border-top: 5px solid #00a6ef; }
    .style-8.menu.blue ul.sub-level li.active > a { color: #9b9b9b; border-left: 5px solid #00a6ef; border-top: none; }
        
    .style-8.menu.vertical.green li.active { 
        color: #9b9b9b; 
        box-shadow: inset 5px 0 0 0 #a4d600;
        -moz-box-shadow: inset 5px 0 0 0 #a4d600;
        -webkit-box-shadow: inset 5px 0 0 0 #a4d600;
    }
    .style-8.menu.green ul.main-level li.active > a { color: #9b9b9b; border-top: 5px solid #a4d600; }
    .style-8.menu.green ul.sub-level li.active > a { color: #9b9b9b; border-left: 5px solid #a4d600; border-top: none; }
    
    .style-8.menu.vertical.purple li.active { 
        color: #9b9b9b; 
        box-shadow: inset 5px 0 0 0 #a100ff;
        -moz-box-shadow: inset 5px 0 0 0 #a100ff;
        -webkit-box-shadow: inset 5px 0 0 0 #a100ff;
    }
    .style-8.menu.purple ul.main-level li.active > a { color: #9b9b9b; border-top: 5px solid #a100ff; }
    .style-8.menu.purple ul.sub-level li.active > a { color: #9b9b9b; border-left: 5px solid #a100ff; border-top: none; }    
    
    .style-8.menu.vertical.aqua li.active { 
        color: #9b9b9b; 
        box-shadow: inset 5px 0 0 0 #00bbcb;
        -moz-box-shadow: inset 5px 0 0 0 #00bbcb;
        -webkit-box-shadow: inset 5px 0 0 0 #00bbcb;
    }
    .style-8.menu.aqua ul.main-level li.active > a { color: #9b9b9b; border-top: 5px solid #00bbcb; }
    .style-8.menu.aqua ul.sub-level li.active > a { color: #9b9b9b; border-left: 5px solid #00bbcb; border-top: none; }
        
    .style-8.menu.vertical.magenta li.active { 
        color: #9b9b9b; 
        box-shadow: inset 5px 0 0 0 #b70442;
        -moz-box-shadow: inset 5px 0 0 0 #b70442;
        -webkit-box-shadow: inset 5px 0 0 0 #b70442;
    }
    .style-8.menu.magenta ul.main-level li.active > a { color: #9b9b9b; border-top: 5px solid #b70442; }
    .style-8.menu.magenta ul.sub-level li.active > a { color: #9b9b9b; border-left: 5px solid #b70442; border-top: none; }    


/* -- vertical -- */

    .style-8.vertical ul.main-level li:hover { background: rgba(255,255,255,0.3) !important; }
    .style-8.vertical ul.main-level li:hover > a { background: none !important; }
    
    .style-8.vertical ul.main-level > li.down:hover > a+span.arrow-down,
    .style-8.vertical ul.main-level > li.down:active > a+span.arrow-down,
    .style-8.vertical ul.sub-level > li.flyout:hover > a+span.arrow-right,
    .style-8.vertical ul.sub-level > li.flyout:active > a+span.arrow-right { border-color: transparent transparent transparent #fff; } 

    .style-8.vertical ul.main-level ul li > a { box-shadow: none; }
    .style-8.vertical ul.main-level ul li:last-child a { box-shadow: none; } 
    .style-8.vertical ul.main-level ul li:first-child > a { box-shadow: none; border-top: none; }
       
	.style-8.menu.vertical ul li a { 
	   padding:10px !important;
       height: auto;
       display: block;
       white-space: normal;
       float: none;
	}
    
    .style-8.menu.vertical { height: auto; width: 100%; border: 0; }
    .style-8.menu.vertical ul.main-level { width: 100%; height: auto; border: 1px solid #ababab; }   


	.style-8.menu.vertical li {
    	list-style: none;
    	position: relative;
    	width:100%;
        height: auto;
    	line-height: 30px;
    	cursor:pointer;
	}

    .style-8.vertical a { border: 0px !important; }
    
    .style-8.vertical ul.main-level li:hover { padding: 0; }
    .style-8.vertical ul.main-level li:hover > a { padding-left: 0; padding-right: 0; }
    
    .style-8.orange.vertical ul.main-level > li:hover,
    .style-8.orange.vertical ul.sub-level > li:hover {
        box-shadow: inset 5px 0 0 0 #ff6c00;
        -moz-box-shadow: inset 5px 0 0 0 #ff6c00;
        -webkit-box-shadow: inset 5px 0 0 0 #ff6c00;        
    }
    
    .style-8.blue.vertical ul.main-level > li:hover,
    .style-8.blue.vertical ul.sub-level > li:hover { 
        box-shadow: inset 5px 0 0 0 #00a6ef;
        -moz-box-shadow: inset 5px 0 0 0 #00a6ef;
        -webkit-box-shadow: inset 5px 0 0 0 #00a6ef;
    }
    
    .style-8.green.vertical ul.main-level li:hover,
    .style-8.green.vertical ul.sub-level > li:hover {
        box-shadow: inset 5px 0 0 0 #a4d600;
        -moz-box-shadow: inset 5px 0 0 0 #a4d600;
        -webkit-box-shadow: inset 5px 0 0 0 #a4d600;        
    }
    
    .style-8.aqua.vertical ul.main-level li:hover,
    .style-8.aqua.vertical ul.sub-level > li:hover {
        box-shadow: inset 5px 0 0 0 #00bbcb;
        -moz-box-shadow: inset 5px 0 0 0 #00bbcb;
        -webkit-box-shadow: inset 5px 0 0 0 #00bbcb;            
    }
    
    .style-8.purple.vertical ul.main-level li:hover,
    .style-8.purple.vertical ul.sub-level > li:hover { 
        box-shadow: inset 5px 0 0 0 #a100ff;
        -moz-box-shadow: inset 5px 0 0 0 #a100ff;
        -webkit-box-shadow: inset 5px 0 0 0 #a100ff;             
    }
    
    .style-8.magenta.vertical ul.main-level li:hover,
    .style-8.magenta.vertical ul.sub-level > li:hover { 
        box-shadow: inset 5px 0 0 0 #b70442;
        -moz-box-shadow: inset 5px 0 0 0 #b70442;
        -webkit-box-shadow: inset 5px 0 0 0 #b70442;             
    }

    .style-8.menu.vertical ul.main-level{
        border-bottom: none;
    }
    
    .style-8.menu.vertical ul.sub-level,
    .style-8.menu.vertical ul.sub-level ul { 
        opacity: 1;
        display: none;
        position: absolute;
        width: 100%;
        top: -1px;
        left: 100%;
    }   
    
	.style-8.menu.vertical, .style-8.menu.vertical ul, .style-8.menu.vertical li{
	   padding:0;
	   margin:0;
	}
    
	.style-8.menu.vertical ul li.down:hover > ul.sub-level { display:block;	}
        
    .style-8.menu.vertical ul.sub-level { display: none; }
    
	.style-8.menu.vertical ul li.flyout:hover > ul.sub-level { display:block; }    
    
    .style-8.menu.vertical ul.sub-level > li.flyout > span.arrow-right,
    .style-8.menu.vertical ul.main-level > li.down > span.arrow-down {
        width: 0;
        border:  solid 4px; 
        border-color: transparent  transparent  transparent #000; 
        position: absolute;
        right: 11px; top: 14px;
    }

    .style-8.menu.vertical ul.sub-level > li.flyout:hover > span.arrow-right,
    .style-8.menu.vertical ul.main-level > li.down:hover > span.arrow-down {
        border-color: transparent  transparent  transparent #000; 
    } 
 
    .style-8.vertical ul.main-level > li:first-child { border-top: 0 !important; }

 
    .style-8.vertical ul.sub-level > li:first-child,
    .style-8.vertical ul.main-level > li:first-child { border-bottom: 1px solid #ababab; } 
    
    .style-8.vertical ul.sub-level > li { 
        border: 0 !important;
        border-bottom: 1px solid #ababab !important;
    }
    
    .style-8.vertical ul.sub-level > li:last-child { border: 0 !important;}
  
    
    .style-8.vertical ul.sub-level { border: 1px solid #ababab; }

    .style-8.vertical ul.sub-level > li,
    .style-8.vertical ul.main-level > li { border-bottom: 1px solid #ababab; }