/* @group buttons */

.mobileButtons {
  position: absolute;
  background-color: #AAAAAA;
  top: 0;
  right: 0;
  display: none;
}
.mobileButtons a {
  width: 24px;
  height: 24px;
  padding: 16px;
  display: block;
  background: url(++resource++ftw.mobilenavigation/mobile_buttons.png) no-repeat center center #aaa;
  float: right;
}
.mobileButtons a.selected {
  background-color: #000000;
}
.mobileButtons a > .hiddenStructure {
  text-indent: -2000em;
}
.mobileButtons #toggle_slidenavi,
.mobileButtons #toggle_navigation {
  background-position: 16px 16px;
}
.mobileButtons #toggle_usermenu { background-position: 16px -56px; }
.mobileButtons #toggle_search { background-position: 16px -128px; }

/* @end group */

/* @group mobile navigation */

div.slideNavi.loading,
.globalnav,
#portal-globalnav.mobileNavigation {
  position:absolute;
  top: 0;
  margin-top: 56px;
  background-color: #DDD;
  width: 100%;
  display: none;
  z-index: 5;
}

.globalnav li,
#portal-globalnav.mobileNavigation li {
  display: block;
  position: relative;
}
.globalnav li a,
#portal-globalnav.mobileNavigation li a {
  display: block;
  padding: 1em;
  border: none;
  background-color: #DDDDDD;
  border-top: 1px solid #000;
  margin-right: 42px;
  overflow: hidden;
}
.globalnav li a.slide,
.globalnav li.noChildren a,
#portal-globalnav.mobileNavigation li.noChildren a,
#portal-globalnav.mobileNavigation li a.loadChildren {
  margin-right: 0;
}
.globalnav li a.slide:hover,
.globalnav li a.slideBack:hover,
#portal-globalnav.mobileNavigation li a.loadChildren:hover {
  text-decoration: none;
}
#portal-globalnav.mobileNavigation li a.loadChildren {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  min-width: 48px;
  height: 48px;
  padding: 0;
}
#portal-globalnav.mobileNavigation li a.loadChildren,
#portal-globalnav.mobileNavigation li a.loadChildren:hover {
  background: url(++resource++ftw.mobilenavigation/expand-navi.png) no-repeat center center;
}
#portal-globalnav.mobileNavigation li.expanded > a.loadChildren {
  background: url(++resource++ftw.mobilenavigation/collapse-navi.png) no-repeat center center;
}
#portal-globalnav.mobileNavigation li.loading > a.loadChildren {
  background: url(++resource++ftw.mobilenavigation/spinner.gif) no-repeat center center;
}
#portal-globalnav.mobileNavigation li > ul {
  display: none;
}
#portal-globalnav.mobileNavigation li.expanded > ul {
  display: block;
}
#portal-globalnav.mobileNavigation li.level1 a {
  margin-left: 1.5em;
}
#portal-globalnav.mobileNavigation li.level2 a {
  margin-left: 3em;
}
#portal-globalnav.mobileNavigation li a.loadChildren:hover {
  background-color: #DDDDDD;
}

/* Overwrite default selected styling in globalnav */
.globalnav .selected a,
.globalnav a:hover,
#portal-globalnav.mobileNavigation .selected a,
#portal-globalnav.mobileNavigation a:hover {
  background: #DDDDDD;
  color: #205C90;
}
.globalnav .selected > a,
.globalnav > a:hover,
#portal-globalnav.mobileNavigation .selected > a,
#portal-globalnav.mobileNavigation > a:hover {
  background: #205C90;
  color: #FFFFFF;
}

/* @end */

/* @group slide navigation */

.globalnav {
  display: block;
}
div.slideNavi.loading {
  background-image: url(++resource++ftw.mobilenavigation/spinner_big.gif);
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 200px;
  display: block;
}
#slider-container .slideNavi {
  position: absolute;
  top: 0;
  width: 100%;
}
#slider-container .globalnav  li {
  display: block;
}
#slider-container .globalnav a.slideBack {
  background: url(slide-back.png) no-repeat left center #DDDDDD;
  padding-left: 40px;
  margin-right: 0;
  border-bottom: 1px solid #000;
  float: left;
}
#slider-container .globalnav a.slide {
  background: url(expand-navi.png) no-repeat center center;
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  min-width: 48px;
  height: 48px;
  padding: 0;
}

/* @end */

/* @group responsive */

@media screen and (max-width: 769px) {
  .mobileButtons {
    display: block;
    z-index: 4;
  }
  #portal-globalnav,
  #portal-personaltools dt.actionMenuHeader,
  #portal-searchbox {
    display: none;
  }

  #portal-personaltools {
    width: 100%;
    position: absolute;
    margin-top: 52px;
    background-color: transparent;
  }

  #portal-personaltools a {
    font-size: 150%;
  }

  #portal-searchbox {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 54px;
    background: #EEE;
    z-index: 3;
    padding: 1em;
  }
}
@media screen and (min-width: 770px) {
  /* fix navi (ugly) */
  #portal-globalnav {
    display: block !important;
  }
  .globalnav,
  #portal-globalnav > li.expanded > ul,
  #portal-globalnav .loadChildren {
    display: none !important;
  }
}

/* @end */