/***********************************************************************
* 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);
*/

#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-top: 3px;
    padding-bottom: 3px;

    margin-top: 5px;
    margin-left: 10px;
    margin-bottom: 3px;

}

/***********************************************************************/
/* #css-menu > ul */
#rx-page-navbar > 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;
*/

}

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

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

/*  zoom: 1; */


}

/***********************************************************************/
/* #css-menu > ul li.right */
#rx-page-navbar > ul li.right
{
  float: right;
}

/***********************************************************************/
/* #css-menu > ul li.has-sub */
#rx-page-navbar > 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;
*/

}

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

}

/***********************************************************************/
/* #css-menu > ul li.has-sub ul */
#rx-page-navbar > 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
 ********************************************************************/
#css-menu > ul li.has-sub ul li
#rx-page-navbar > ul li.has-sub ul li 
{
  display: block;
  padding: 10px;
  margin: 0px;

}

/**********************************************************************
*
***********************************************************************/
#css-menu > ul li.has-sub > a
#rx-page-navbar > 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;
*/
}

/***********************************************************************/

/*
#css-menu > ul li.has-sub > a.active,
#css-menu > ul li.has-sub > a:hover 
*/


#rx-page-navbar > ul li.has-sub > a.active,
#rx-page-navbar > 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                          */
/* #css-menu > ul li a */

#rx-page-navbar > ul li a 
{

  display: block;


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

  font-size: 1.0em;

  font-weight: bold;
  
  margin-top: 0px;
  margin-right: 5px;
  margin-left: 0px;
  margin-bottom: 0px;

 /* margin-left: 4px; */

  text-decoration: none;
  color: #FFFFFF; 
  background: #015580;

  border-radius: 8px;
  
  /* 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 */

/*
#css-menu > ul li a.active,
#css-menu > ul li a:hover 
*/
#rx-page-navbar > ul li a.active,
#rx-page-navbar > 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) 
{
  #css-menu > ul 
  {
    width: 100%;
  }
  #css-menu > ul li#responsive-tab 
  {
    display: block;
  }
  #css-menu > ul li#responsive-tab a 
  {
    background: url('images/menu.png') no-repeat;
/*    background-position: 95% - 35%; */
    background-position: 50%; 
    z-index: 100;

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

  }
  #css-menu > ul li.has-sub ul li 
  {
    display: block !important;
  }
  #css-menu > ul li.has-sub ul li a span 
  {
    display: block;
    padding-left: 24px;
  }
  #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) 
{
  #css-menu > ul > li.collapsed 
  {
    display: inline-block !important;
    *display: inline;
    /*  zoom: 1; */
  }
  #css-menu > ul ul li.collapsed 
  {
    display: block !important;
  }
}


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