/*

  INSTRUKTIONER
  =============================================================================================================================================
  
  CONTAINERS (<UL></UL>) 
  ----------------------------------------------
  Finns i 3 levels och classes är:  
  [container]  [root/sub_container]  [container_level(N)] 
  
  
  ITEMS (<LI></LI>)
  ----------------------------------------------  
  Finns i 3 levels och classes är:
  [item]  [root/sub_item]  [item_level(N)]   
  
  
  I designer kan man välja i vilken av klasserna man vill apply CSS i. Det spelar ingen roll vilken.
  3 exempel:
  
  1. Ger man "border" till classen "container_level2" så kommer alla bara containern i level 2 få en border (level 2 men inte level 1 & 3).
  2. Eller t ex ger man en "border" till classen "sub_container" så kommer alla sub containers få en border (level 2 & 3 men inte level 1).
  3. Ger man däremot en border till classen "container" så kommer alla containers få en border (Alla levels)
  
  Spaceholders är bara till för att hovering inte ska försvinna om det är avstånd mellan de olika nivåerna
  *Notera att det är skillnad på start classen. .CSS_TOP_NAV_MOBILE eller .CSS_LEFT_NAV
  
  =============================================================================================================================================  
*/


/* ======= TOP NAVS ===================================================================== */

.CSS_TOP_NAV_MOBILE  { background-color: #363638; z-index: 999; font-family: 'Open Sans',Arial,Verdana,Tahoma,Sans-serif; font-weight: 300; } 
.TOP_NAV_MOBILE_DROPDOWN { display: none; }
.TOP_NAV_MOBILE_DROPDOWN_open { padding: 2%; padding-left: 3%; padding-right: 3%; cursor: pointer; }
.TOP_NAV_MOBILE_DROPDOWN_open .mobile-button { float: left; width: 10%; }
.TOP_NAV_MOBILE_DROPDOWN_open .mobile-button div { padding-bottom: 15%; margin: 17% 0; background-color: #eee; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; }
.TOP_NAV_MOBILE_DROPDOWN_open .mobile-logo { float: left; overflow: hidden; }
.TOP_NAV_MOBILE_DROPDOWN_open .mobile-logo img { width: 100%; height: auto; }


/* ALL LEVELS */
.CSS_TOP_NAV_MOBILE .container { list-style: none; padding: 0; font-size: 0px; }
.CSS_TOP_NAV_MOBILE .item  { position: relative; font-size: 3rem; } 
.CSS_TOP_NAV_MOBILE .item a{ display: block; color: #eee; padding: 5%; cursor: pointer; }  

/* ALL SUBS */
.CSS_TOP_NAV_MOBILE .sub_container { display: none; }
.CSS_TOP_NAV_MOBILE .sub_item{ text-align: left; white-space: nowrap; }

/* LEVEL ONE */
.CSS_TOP_NAV_MOBILE .container_level1  { }
.CSS_TOP_NAV_MOBILE .item_level1>a { width: 84%; border-top: 1px #29282D solid; }
.CSS_TOP_NAV_MOBILE .item_level1:first-child>a  { border-top: 0px #29282D solid; }

/* LEVEL TWO */
.CSS_TOP_NAV_MOBILE .container_level2>a  { margin-left: 3%;  }

/* LEVEL THREE */
.CSS_TOP_NAV_MOBILE .container_level3>a { margin-left: 6%; }