/* ****************************************************************************
* MENU DEFINITION
**************************************************************************** */

/**********************************************/
/* Color definitions
  Yellow 1: rgb(255,243,180) #FFF3B4
  Yellow 2: rgb(255,231,105) #FFE769
  Yellow 3: rgb(255,221,81) #FFDD51
  Yellow 4: rgb(246,201,76) #F6C94C

  Blue/Green 1: rgb(0,136,135) #008887
  Blue/Green 2: rgb(51,160,159) #33A09F
  Blue/Green 3: rgb(102,184,183) #66B8B7

  Green 1: rgb(102,160,135) #66A087
  Green 2: rgb(168,188,125) #A8BC7D
  Green 3: rgb(203,215,177) #CBD7B1
  Green 4: rgb(202,201,119) #CAC977

  Blue 1: rgb(127,183,192) #7FB7C0
  Blue 2: rgb(128,189,209) #80BDD1
  Blue 3: rgb(198,226,227) #C6E2E3

  Grey 1: rgb(50,50,50) #323232
  Grey 2: rgb(179,179,179) #B3B3B3
  Grey 3: rgb(242,242,242) #F2F2F2

*/

/* ****************************************************************************
* Main navigation
**************************************************************************** */

/* GENERAL / ALL LEVELS */
#main_navigation ul {padding:0; margin: 0px; list-style-type: none; }
#main_navigation ul li {padding:0; margin: 0px; text-align:left; font-size: 1em;}
#main_navigation ul li:before {content:"";}
#main_navigation ul li a{padding:0; margin: 0px;}


/* LEVEL 1 */
#main_navigation > ul {}
#main_navigation > ul > li {float:left; display:block;}
#main_navigation > ul > li:first-child {}
#main_navigation > ul > li > span{position:relative; z-index:900; display:block; color:rgb(50,50,50); text-decoration:none; margin:0; padding:19px 48px 18px 12px; font-size: 1.05em; }
#main_navigation > ul > li > span:hover{ color:rgb(0,136,135); cursor:default;}
#main_navigation > ul > li.has_submenu { }
#main_navigation > ul > li.has_submenu > a{ }
#main_navigation > ul > li.has_submenu > a:hover{ }


/* LEVEL 2 */
#main_navigation > ul > li > ul {display:none; z-index:1000; position:absolute; top:100%; border:1px solid rgb(0,136,135); border-width:1px 1px 0 1px; list-style-type:none;}
#main_navigation > ul > li:hover > ul {display: block; }
#main_navigation > ul > li > ul > li {position: relative; border-bottom:1px solid rgb(0,136,135);}
#main_navigation > ul > li > ul > li a{display:block; padding:5px 12px; color:rgb(0,136,135); text-decoration:none; background-color:white; font-weight: normal;}
#main_navigation > ul > li > ul > li a:hover{color:rgb(50,50,50); }
#main_navigation > ul > li > ul > li.has_submenu > span{display:block; padding:5px 12px; color:rgb(0,136,135); text-decoration:none; background-color:white; font-weight: normal;}
#main_navigation > ul > li > ul > li.has_submenu > span:hover{cursor:pointer;}
#main_navigation > ul > li > ul > li.has_submenu.collapsed > span:after{font-family: 'FontAwesome'; content:"\f0da"; margin:3px 0 0 10px; display: inline-block; font-weight: normal;}
#main_navigation > ul > li > ul > li.has_submenu.expanded > span:after{font-family: 'FontAwesome'; content:"\f0d7"; margin:3px 0 0 10px; display: inline-block; font-weight: normal;}



/* LEVEL 3 */
#main_navigation > ul > li > ul > li > ul { display:none; z-index:1000; min-width:10em; width:100%; }
#main_navigation > ul > li > ul > li:hover ul{ _display:block;}
#main_navigation > ul > li > ul > li > ul > li { min-width: 10em; color:rgb(150,150,150);}
#main_navigation > ul > li > ul > li > ul > li:first-child {}
#main_navigation > ul > li > ul > li > ul > li a{ color:rgb(50,50,50); padding-left:30px; }




/* ****************************************************************************
* ICLEI Europe / Utilities LINK 
**************************************************************************** */
#main_navigation > ul > #id_7 {display:none;}
#main_navigation > ul > #id_7 a{}







/**********************************************/
/* Media Queries 
/**********************************************/

/* 980 - 1200 */
@media only screen and (min-width: 980px) and (max-width:1199px) {          


  /**********************************************/
  /* Adapt padding between menu points to fit screen width
  /* change padding to fit besides appearing logo
  /**********************************************/
  #main_navigation > ul > .lvl_1 > span{padding-left:20px; padding-right:20px;}
  #main_navigation > ul > li > ul.sub-menu { margin-left:20px;}

  /**********************************************/
  /* Sticky / Affix
  /**********************************************/
  #navigation_box_frame.affix #logo_navigation_box #main_navigation_box #main_navigation ul .lvl_1 span{padding-left:20px; padding-right:20px;}
  #navigation_box_frame.affix #logo_navigation_box #main_navigation_box #main_navigation > ul > li > ul.sub-menu {margin-left:20px; }


}


/* 768 - 980 */
@media only screen and (min-width: 768px) and (max-width:979px) {          

  
  /**********************************************/
  /* Adapt padding between menu points to fit screen width
  /* change padding to fit besides appearing logo
  /**********************************************/
  #main_navigation > ul > .lvl_1 > span{padding-left:9px; padding-right:10px; font-size:1em;}
  #main_navigation > ul > li > ul.sub-menu { margin-left:9px;}

  /**********************************************/
  /* Sticky / Affix
  /**********************************************/
  #navigation_box_frame.affix #logo_navigation_box #main_navigation_box #main_navigation ul .lvl_1 span{padding-left:9px; padding-right:10px;}
  #navigation_box_frame.affix #logo_navigation_box #main_navigation_box #main_navigation > ul > li > ul.sub-menu {margin-left:9px; }


}
 




/* < 768  */
@media only screen and (max-width: 767px){

    /* ****************************************************************************
    * Main navigation
    **************************************************************************** */

    /* GENERAL / ALL LEVELS */
    #main_navigation ul { list-style-type: none; padding:0; margin:0; background-color:white;}
    #main_navigation ul li {display:block; padding:0; margin: 0; text-align:left;}
    #main_navigation ul li a{display:block; padding:0; margin: 0; color:rgb(0,136,135);}
    #main_navigation ul li span{display:block; padding:0; margin: 0; color:rgb(0,136,135);}

    /* LEVEL 1 */
    #main_navigation > ul {}
    #main_navigation > ul > li {float:none; display:block; border-top:1px solid rgb(0,136,135);}
    #main_navigation > ul > li:first-child { border-top:none;}
    #main_navigation > ul > li > span{display:block; padding:15px 0 15px 20px; color:rgb(0,136,135);}
    #main_navigation > ul > li > span:hover{cursor:pointer;}
    #main_navigation > ul > li.has_submenu > span{}
    #main_navigation > ul > li.has_submenu.collapsed > span:after{font-family: 'FontAwesome'; content:"\f0da"; margin:3px 0 0 10px; display: inline-block; font-weight: normal;}
    #main_navigation > ul > li.has_submenu.expanded > span:after{font-family: 'FontAwesome'; content:"\f0d7"; margin:3px 0 0 10px; display: inline-block; font-weight: normal;}


    /* LEVEL 2 */
    #main_navigation > ul > li > ul {position:relative; display:none; border:none; margin-top:-10px;}
    #main_navigation > ul > li:hover > ul {display:none;} /* delete later ? */
    #main_navigation > ul > li > ul > li {display:block; border:none; }
    #main_navigation > ul > li > ul > li a{display:block; padding:5px 0 5px 60px; color:rgb(0,136,135); text-decoration:none; background-color:white; font-weight: normal;}

    #main_navigation > ul > li > ul > li.has_submenu > span{display:block; padding:5px 0 5px 60px; color:rgb(0,136,135); text-decoration:none; background-color:white; font-weight: normal;}
    #main_navigation > ul > li > ul > li.has_submenu > span:after{font-family: 'FontAwesome'; content:"\f0da"; margin:3px 0 0 10px; display: inline-block; font-weight: normal;}


    /* LEVEL 3 */
    #main_navigation > ul > li > ul > li > ul{position:relative; display:none; border:none;}
    #main_navigation > ul > li > ul > li:hover > ul {display:none;} /* delete later ? */
    #main_navigation > ul > li > ul > li > ul > li {display:block; border:none; }
    #main_navigation > ul > li > ul > li > ul > li a{display:block; padding:5px 0 5px 100px; color:rgb(0,136,135); text-decoration:none; background-color:white; font-weight: normal;}

    #main_navigation > ul > li > ul > li > ul > li span{}
    #main_navigation > ul > li > ul > li > ul > li.has_submenu > span:after{font-family: 'FontAwesome'; content:"\f0da"; margin:3px 0 0 10px; display: inline-block; font-weight: normal;}
    #main_navigation > ul > li > ul > li > ul > li.has_submenu > span{}




    /* LEVEL 3 */
/*    #main_navigation > ul > li > ul > li > ul {position:relative; display:none; }
    #main_navigation > ul > li > ul > li > ul > li{display:block; }
    #main_navigation > ul > li > ul > li > ul > li a{display:block; text-decoration:none; padding:10px 0;}
    #main_navigation > ul > li > ul > li > ul > li a:hover{text-decoration:none;}
*/



} /* end of < 768  */