/***********************************************************************
* http://cssmenumaker.com/menu/cherry-responsive-menu
* http://inspirationalpixels.com/tutorials/creating-tabs-with-html-css-and-jquery
* And some modification by me
***********************************************************************/
/*
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
*/

#rx-css-menu 
{
/*
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
  font-size: 10px;
  line-height: 15px; 
*/
/*    text-transform: uppercase; */
    font-size: 1.0em;
    font-family: arial;
    font-style:normal;
    text-align: left;
    color: black;
    background-color: #FFFFFF;
    padding: 0px;
    z-index: 100;

    padding-left: 0px;
    padding-top: 3px;
    padding-bottom: 3px;

    height: 35px;

    border: var(--rx-css-menu-border-x);
    
}

/***********************************************************************/
#rx-css-menu > ul 
{
  width: auto;
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  color: #000000;
  background-color: #FFFFFF;

/*
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
*/
/*
  background: #00;
*/
/*  
  border: 1px solid #ece6e8;
  border-bottom: 3px solid #d9ced2; 

  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
*/

}

/**********************************************************************/
#rx-css-menu > ul li#responsive-tab 
{
  display: none;
  /* Hide for large screens */
}

/* Background behind buttons */
#rx-css-menu > ul li 
{
  display: inline-block;
  /* display: inline; */
  background-color: #FFFFFF;

/*  zoom: 1; */


}

/***********************************************************************/
#cssmenu > ul li.right 
{
  float: right;
}

/***********************************************************************/
#rx-css-menu > ul li.has-sub 
{
    z-index: 100;
    
    position: relative;

    background-color: #FFFFFF;

/*
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
*/

}

/***********************************************************************/
#rx-css-menu > ul li.has-sub:hover ul 
{
  display: block;
  background-color: #FFFFFF;

}

/***********************************************************************/
#rx-css-menu > ul li.has-sub ul 
{
  display: none;
  width: 200px;
  position: absolute;
  margin: 0px;
  padding: 0px;
  color: black;
  list-style-type: none;
  background-color: #000000;

/*
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
*/

/* 
   background: #ADD8E6;
   background-color: #0000FF;
*/


/*
  border: 1px solid #ece6e8;
  border-bottom: 3px solid #d9ced2;
  border-top: 0 none;
*/
}

/*********************************************************************
 * Background of drop down
 * And property of drop down
 ********************************************************************/
#rx-css-menu > ul li.has-sub ul li 
{
  display: block;
  padding: 0px;
  margin: 0px;

}

/**********************************************************************
*
***********************************************************************/
#rx-css-menu > ul li.has-sub > a 
{
  /* background-image: url('/img/caret.png'); */
  background-repeat: no-repeat;
  /* background-attatchment: fixed; */
  background-position: 95% -10%;
  z-index: 100;

/* FIX */
/*  background-color: #4477FF; */

/*
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
*/
}

/***********************************************************************/
#rx-css-menu > ul li.has-sub > a.active,
#rx-css-menu > ul li.has-sub > a:hover 
{
    /* background: #ccc url('/img/caret.png') no-repeat; */
    
    background-position: 95% -10%;
    background-color: #ccc;
    z-index: 100;
    
/*
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
*/

/*  background: #66CCF3; */
}


/***********************************************************************/
/* Background on buttons with <a href.. > tag                          */
#rx-css-menu > ul li a 
{

  display: block;


  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 5px;

  font-size: 1em;

  margin-top: 0px;
  margin-right: 5px;
  margin-left: 0px;
  margin-bottom: 0px;

 /* margin-left: 4px; */

  text-decoration: none;
  color: #000000;
  /*  background: #ADD8E6; */
    
  background-color: #ccc; 

/*
  border-top: 1px solid #161411;
  border-bottom: 1px solid #161411;
  border-left: 1px solid #161411;
  border-right: 1px solid #161411;
*/


  /*
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
 */
  
  /* background: #66CCF3; */
  
  /* background-color: #A9A9A9; */

  /*
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  */

  /*
    color: #747474;
    text-shadow: 0px 1px 0px #fff;
  */
}

/***********************************************************************/
/* Color when hovering overa button */
#rx-css-menu > ul li a.active,
#rx-css-menu > ul li a:hover 
{

    background-color: #6699CC;
    
    background: #66CCF3;
    /*  background: #66CCFF; */
    color: #000000;
    
/*
	border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
*/

/*  text-shadow: 0px 1px 0px #000; */
}

/***********************************************************************/
@media (max-width: 600px) 
{
  #rx-css-menu > ul 
  {
    width: 100%;
  }
  #rx-css-menu > ul li#responsive-tab 
  {
    display: block;
  }
  #rx-css-menu > ul li#responsive-tab a 
  {
    background: url('images/menu.png') no-repeat;
/*    background-position: 95% - 35%; */
    background-position: 50%; 
    z-index: 100;

  }
  #rx-css-menu > ul li#responsive-tab a:hover 
  {
      /*    
      background-color: #d80041; 
      */
      background-color: #6699CC;
      background: #6699CC;
      background-position: 95% 135%;
  }
  #rx-css-menu > ul li 
  {
    display: none;
  }
  #rx-css-menu > ul li.right 
  {
    float: none;
  }
  #rx-css-menu > ul li.has-sub 
  {
    position: relative;
  }
  #rx-css-menu > ul li.has-sub ul 
  {
    display: block;
    position: static;
    width: 100%;
    background: #00FF00;
    border: 0 none;

  }
  #rx-css-menu > ul li.has-sub ul li 
  {
    display: block !important;
  }
  #rx-css-menu > ul li.has-sub ul li a span 
  {
    display: block;
    padding-left: 24px;
  }
  #rx-css-menu > ul li.has-sub > a 
  {
    background-image: none;
  }
}

/***********************************************************************/
/* Make sure they show even if hidden in mobile view by JS */
@media (min-width: 600px) 
{
  #rx-css-menu > ul > li.collapsed 
  {
    display: inline-block !important;
    /* display: inline; */
    /*  zoom: 1; */
  }
  #rx-css-menu > ul ul li.collapsed 
  {
    display: block !important;
  }
}


/**********************************************************************
 *  END
 **********************************************************************/