/* ==================================================================================================================================================================================== */
/* RBShops 2015 - www.ledgrow.eu
/* menu related css file
/* ==================================================================================================================================================================================== */

/* =========================================================================================================================================================================== */
/* In order for the responsive menu to work we need to keep the following structure: 
/* wihtout it the responsive part will not work.
/*
/*
/* <div class="menuoverflow">
/* 	<div class="menuoverflow">
/* 		menu hier
/* 	</div>
/* </div>
/* 
/* =========================================================================================================================================================================== */

/* menu overflow
============================================================================================================== */   
    .menuoverflow { overflow:visible; }
    #menu-trigger { display: none; }
/* =========================================================================================================== */

/*  from 1024 pixels
============================================================================================================== */
@media screen and (min-width: 1024px) {
    #menu       { display: table; margin: 0 auto; min-height: 62px; text-align:center; background-color: #DFDCD6; }
    #menu li    { float: left; position: relative; display: inline; background-color: #DFDCD6; text-align: center; margin: 0;}
    
    #menu a:link  { float: left; width: 96px; padding-top: 5px; padding-bottom: 5px; font-size: 9pt; text-decoration: none; color: #000; border: 0px solid #000; }
    #menu a:hover { background-color: #FF9B00; }  
}
/* =========================================================================================================== */

/*  between 960 and 1024 pixels
============================================================================================================= */
@media screen and (min-width: 901px) and (max-width: 1024px) {    
    #menu       { display: table; margin: 0 auto; text-align:center; }
    #menu li    { float: left; position: relative; display: inline; background-color: #DFDCD6; text-align: center; margin: 0;}
    
    #menu a:link  { float: left; width: 77px; padding-top: 5px; padding-bottom: 5px; font-size: 8pt; text-decoration: none; color: #000; border: 0px solid #000; }
    #menu a:hover { background-color: #FF9B00; }
}
/* =========================================================================================================== */

/*  up to 901 pixels generic
============================================================================================================== */
@media screen and (max-width: 900px) {    
    #menu-trigger { display             : block; 
                    height              : 50px; 
                    cursor              : pointer; 
                    padding             : 0; 
                    color               : #000; 
                    text-align          : left; 
                    text-transform      : uppercase; 
                    font-weight         : bold; font-size: 0pt; 
                    background-image    : url('../../images/list-menu-icon.png');
                    background-repeat   : no-repeat;
                    background-position : center;
                    background-size     : 100px 50px;                    
                    margin-top          : 40px;
    }    

    #menu           { margin: 0; padding: 0px; position: absolute; z-index: 1; display: none; background-color: #339933; }
    #menu li        { position: static; display: block; float: none; border: 0; box-shadow: none; text-align: center; margin: 0; padding: 0; }
    #menu a         { display: block; float: none !important; color: #000; text-decoration: none; border-top: 1px solid #000; padding: 10px;} 
    #menu a:hover   { background-color: #FFF; color: #339933; }             
}

@media screen and (width: 900px) {
    .logo           { width: 50%; float: right; }
    #menuContainer  { position: relative; width: 50%; float: left; }        
    #menu           { top: 90px; width: 200%; }        
}

@media screen and (width: 800px) {
    .logo           { width: 50%; float: right; }
    #menuContainer  { position: relative; width: 50%; float: left; }        
    #menu           { top: 90px; width: 200%; }        
}

@media screen and (width: 768px) {
    .logo           { width: 50%; float: right; }
    #menuContainer  { position: relative; width: 50%; float: left; }        
    #menu           { top: 90px; width: 200%; }        
}

@media screen and (width: 640px) {
    .logo           { width: 50%; float: right; }
    #menuContainer  { position: relative; width: 50%; float: left; }        
    #menu           { top: 90px; width: 200%; }
}

@media screen and (width: 600px) {
    .logo           { width: 50%; float: right; }
    #menuContainer  { position: relative; width: 50%; float: left; }        
    #menu           { top: 90px; width: 200%; }
}

@media screen and (width: 480px) {
    #menu           { top: 230px; width: 93%; }    
}

@media screen and (max-width: 360px)  {
    #menu           { top: 230px; width: 90%; }    
}

/* iPad */
.no-transition { transition: none; opacity: 1; visibility: visible; display: none; }
#menu li:hover > .no-transition { display: block; }
/* =========================================================================================================== */