/* @group layout */

body {
  background: $body-background;
  font-family: $body-font-family;
  font-size: $font-size;
  line-height: $body-line-height;
  color: $text-color;
}

#page-wrapper {
  background-color: $page-background;
  border: 1px solid $page-bordercolor;
  @include boxshadow(0 0 5px $page-bordercolor);
  position: relative;
}
#content {
  clear: both;
}
.belowContent {
  margin-top: 3em;
}

.fixedWidth {
  width: $page-fixed-width;
  margin: 0 auto;
}

/* @end */

/* @group headings */

h1 {
  font-size: $font-size-36;
}
h2 {
  font-size: $font-size-18;
}
h1, h2, h3 {
  margin: 1.5em 0 1em 0;
  font-family: $heading-font-family;
  line-height: $heading-line-height;
  &.documentFirstHeading {
    margin: 0;
  }
}

/* @end */

/* @group links */

a,
:link,
:visited {
  color: $link-color;
  text-decoration: $link-textdecoration;
  &:hover {
    color: $link-color-hover;
    text-decoration: $link-textdecoration-hover;
  }
}

/* @end */

/* @group top actions */

#portal-topactions {
  min-height: 2em;
}
#portal-topactions ul {
  @include ul($style: 'inline');
  padding: 0.75em 0;
}
#portal-topactions li {
  border-right: 1px solid $text-color;
  padding-right: 0.5em;
  margin-right: 0.5em;
  &.lastItem {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
  }
}
#portal-topactions ul a {
  color: $text-color;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

/* @end */

/* @group banner-image */

#banner-image {
  margin-bottom: 1em;
}
#banner-image img {
  height: auto;
  width: 100%;
}

/* @end */

/* @group header */

#header {
  position: relative;
  z-index: 3;
}
.logoRow {
  min-height: 6em;
}
#header-delimiter {
  border-top: 5px solid $global-navigation-border-color;
}
#portal-logo {
  margin: 1.5em 0;
  height: $logo-height;
  display: block;
  float: left;
  img {
    max-height: 100%;
  }
}

/* @end */

/* @group personal tools */

#portal-personaltools-wrapper {
  float: right;
}
#anon-personalbar > a {
  display: inline;
  border-left: 1px solid $text-color;
  margin-left: 0.25em;
  padding-left: 0.5em;
}
#anon-personalbar > a:first-child {
  margin-left: 0;
  padding-left: 0;
  border-left: none;
}

/* @end */

/* @group breadcrumbs */

#portal-breadcrumbs {
  margin-bottom: 1em;
}

/* @end */

/* @group document actions */

#document-actions ul {
  @include ul($style: 'inline');
  float: right;
  & li a {
    font-size: 1.5em;
    margin-left: 0.25em;
    text-decoration: none;
  }
}

/* @end */

/* @group global navigation */

#portal-globalnav {
  @include ul($style: 'inline');
  padding-top: 0.75em;
  & > li {
    float: left;
    & .wrapper {
      white-space: nowrap;
      padding: 1em 1em 0.7em 1em;
      margin: 1px;
      margin-bottom: 0;
    }
    & > .wrapper a {
      color: $global-navigation-color;
      font-size: $global-navigation-fontsize;
      text-decoration: none;
      &:hover {
        color: $global-navigation-color-hover;
      }
      &:active {}
      &:focus {}
    }
  }
  & li:first-child {
    margin-left: 0;
    & .wrapper {
      padding-left: 0;
    }
    &.flyoutActive {
      margin-left: -1em;
      & .wrapper {
        padding-left: 1em;
      }
    }
  }
}
#portal-globalnav li.selected {
  padding-bottom: 1em;
  /* there should not be a border for now, let this as hint if you like to enable this. */
  /* border-bottom: 5px solid $global-navigation-border-color-active; */
  margin-bottom: -5px;
  & > .wrapper > a{
    color: $global-navigation-color-selected;
    &:after {
      color: $global-navigation-color-selected;
    }
  }
}

/* @end */

/* @group left navigation */

#column-navigation .portletContextNavigation {
  border: 1px solid $lightgray2;
  border-width: 1px 0;
  & ul {
    @include ul($style: 'plain');
    line-height: 1.25em;
    & li {
      margin-bottom: 0;
      padding: 0;
      display: block;
      & a {
        padding: 0.4em 1em;
        display: block;
        text-decoration: none;
        padding-left: 1.5em;
      }
    }
  }
  & .current {
    border-bottom: 1px solid $lightgray2;
    padding: 0.5em 0.5em;
    @include gradient($navigation-gradient-from, $navigation-gradient-to);
    font-weight: bold;
  }
  & .parent, & .sibling {
    border-bottom: 1px solid $lightgray2;
    & a {
      padding-left: 0.5em;
    }
    &.sibling {
      background-color: $navigation-sibling-background;
      &.beforeContext {
        border-top: none;
        border-bottom: 1px solid $lightgray2;
      }
      &.afterContext {
        border-top: 1px solid $lightgray2;
        border-bottom: none;
      }
      &:hover {
        @include gradient($navigation-gradient-from, $navigation-gradient-to);
      }
    }
  }
}

/* @end */

/* @group mobile navigation */

.mobileButtons,
.mobileButtons a {
  background: transparent;
}
.mobileButtons a {
  /* TODO move to variables */
  border: 1px solid #a0babd;
  padding: 0.25em 0.75em;
  margin: 0.25em;
  width: auto;
  height: auto;
  font-size: 1.25em;
  &.selected {
    background: $global-navigation-color;
    border-color: $global-navigation-color;
    color: $page-background;
  }
  &:hover {
    text-decoration: none;
  }
}


#slider-container .iconFont {
  font-family: 'icomoon';
  background-color: $lightgray;
  padding: 1em;
}
#slider-container .mobileNavigation li a {
  background-color: $page-background;
  padding: 1em;
  margin: 0;
}
#slider-container .globalnav a.slide,
#slider-container .globalnav a.slideBack {
  background-image: none;
  height: auto;
  width: auto;
  min-width: 0;
}
#slider-container .globalnav a.slideBack {
  background: $page-background;
}
#slider-container .globalnav a.current {
  border-top: none;
}
#slider-container .globalnav a.slide {
  padding: 1em 0.75em;
  background-color: $lightgray;
}
#slider-container .globalnav a.slideBack {
  padding: 0;
  & > span {
    padding: 1em 0.75em;
    display: block;
    float: left;
  }
}
#slider-container .slideNavi {
  font-size: $font-size-18;
  width: 90%;
  left: 5%;
  top: 1em;
}
div.slideNavi.loading {
  background-color: $page-background;
}
div.slideNavi .globalnav {
  border: 1px solid $mobile-navigation-bordercolor;
  @include boxshadow(0 0 1em $darkgray);
}
div.slideNavi .globalnav li a {
  border: none;
  border-top: 1px solid $lightgray2;
}
#slider-container .globalnav a.slideBack {
  border: none;
}
.globalnav a:hover {
  color: $link-color-hover;
}

/* @end */

/* @group side portlets */

#column-sidebar dl.portlet {
  background-color: $lightgray;
  padding: 1em;
  margin-bottom: 1em;
  &.simplelayoutDropZonePortlet {
    h1,h2,h3 {
      margin-top: 0;
    }
  }
  & dt.portletHeader {
    margin-bottom: 0.75em;
  }
}

/* @end */

/* @group news portlet */

.portlet.portletCollection.newsTemplate {
  .portletItemTitle {
    font-size: $font-size-18;
    margin: 0.25em 0 0.25em 0;
  }
  .portletFooter,
  .portletItem {
    border-top: 1px solid $lightgray2;
    padding-top: 1em;
    margin-top: 1em;
  }
  .portletItemMore {
    margin-top: 0.25em;
    display: block;
  }
}

/* @end */

/* @group address block */

.AddressBlock ul {
  @include ul($style: 'plain');
}

/* @end */

/* @group portlets */

dl.portlet {
  & dt.portletHeader {
    cursor: default;
    font-size: $font-size-18;
    margin-bottom: 1em;
  }
}
dl.teaser_portlet .portletHeader img {
  display: block;
  margin-bottom: 0.5em;
}
.simplelayoutDropZonePortlet h2 {
  font-weight: normal;
}

.managedPortlet {
  border: 1px solid $lightgray2;
  background-color: $lightgray;
  margin: 1em 0;
  @include borderradius();
  overflow: hidden;
}
.managedPortletActions > a,
.portlet-action {
  float: left;
  padding: 0.5em;
  text-decoration: none;
  &:hover {
    text-decoration: none;
  }
}
.managedPortlet .portletHeader > a {
  display: block;
  clear: both;
  padding: 0.5em;
  background-color: $page-background;
  border-top: 1px solid $lightgray2;
}
.portlet-action button {
  border: none;
  background: transparent;
}
.portlet-action.delete {
  float: right;
}
.managedPortletActions > a.delete {
  float: right;
}
.managedPortletActions > a.delete,
.portlet-action.delete button {
  color: #F00;
}

/* @end */

/* @group byline */

.documentByLine {
  color: $text-color-light;
  margin-bottom: 1em;
}

/* @end */

/* @group text / content */

p {
  margin-bottom: 1em;
}
ul {
  @include ul();
  &.listTypePlain {
    @include ul($style:'plain');
  }
}
ol {
  @include ul();
  list-style: decimal;
}
#column-content dl {
  & dt {
    font-weight: bold;
  }
  & dd {
    margin-bottom: 1em;
  }
}
.discreet {
  color: $text-color-light;
}
.documentDescription {
  display: none;
}

/* @end */

/* @group below-content viewlet */

#viewlet-below-content {
  margin-top: 2em;
}

/* @end */

/* @group category tags */

#category.documentByLine .separator {
  display: none;
}
#category.documentByLine a {
  @include borderradius();
  background-color: $global-navigation-color;
  color: $page-background;
  padding: 0.25em 0.5em;
  &:hover {
    color: $page-background;
  }
}

/* @end */

/* @group fieldsets */

fieldset {
  margin: 1em 0;
  border-width: 0 0 1px 0;
}

/* @end */

/* @group linkList */

.linkList,
.subelements-listing,
.topic_listing {
  @include linklist();
}

/* @end */

/* @group subsite */

body.template-subsite_view h1.documentFirstHeading {
  display: none;
}
#content-core .subsiteColumns .column {
  min-height: 1px;
}
.template-subsite_view #page-wrapper #columns .column .portletStaticText .portletItem ul {
  @include linklist();
}

/* @end */

/* @group topic listing

.topic_listing {
  @include linklist();
}

/* @end */

/* @group news listing */

.newsListing .tileItem {
  border-bottom: 1px solid $lightgray;
}
.newsListing .documentByLine .dtstart {
  color: $text-color;
  font-weight: bold;
}

/* @end */

/* @group simplelayout */

div.sl-controls {
  padding-top: 0;
}
/* padding changes slot-width */
.simplelayout-content div[id*="slot"] {
  padding: 0;
}
.sl-img-small .sl-img-wrapper,
.sl-img-middle .sl-img-wrapper {
  margin-right: 2em;
}

/* @end */

/* @group to_top link */

.to_top {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0.25em 0.5em;
  background-color: $lightgray;
  @include borderradius($border-radius $border-radius 0 0);
}

/* @end */

/* @group footer */

#footer {
  background-color: $footer-background;
  color: $footer-color;
  & a {
    color: $footer-color;
  }
  & ul {
    @include ul($style: 'plain');
  }
  & .portlet {
    padding-left: 3em;
    margin: 2em 0;
    border-left: 1px solid $footer-border-color;
    & li {
      display: block;
      margin-bottom: 0.5em;
    }
  }
  & .cell:first-child .portlet {
    border-left: none;
  }
}
#bottom-actions {
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}

/* @end */

/* @group site-actions */

#portal-siteactions {
  @include ul($style: 'inline');
  & a {
    color: $darkgray;
  }
  & li {
    border-left: 1px solid $darkgray;
    padding-left: 0.5em;
    margin-left: 0.5em;
  }
  & li:first-child {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
  }
}

/* @end */

/* @group login */

#login-form {
  margin: 2em 0;
}

#login-form label {
  min-width: 8em;
  display: inline-block;
}

/* @end */

/* @group collapsible */

dl.collapsible {
  dt {
    cursor: pointer;
  }
  dd {
    display: none;
  }
  &.expandedBlockCollapsible dd {
    display: block;
  }
}

/* @end */

/* @group sitemap */

.template-sitemap #content {
  padding-left: 2em;
  ul#portal-sitemap {
    & li {
      display: list-item;
      list-style: disc;
      margin-bottom: 0em;
      & a:before {
        /* no content type icons */
        display: none;
      }
    }
  }
}

/* @end */








/* @group Invisibles */

* {
  outline: none;
}
.hiddenStructure {
  display: block;
  background: transparent;
  background-image: none; /* safari bug */
  border: none;
  height: 0.1em;
  overflow: hidden;
  padding: 0;
  margin: -0.1em 0 0 -0.1em !important;
  width: 1px;
}
#content .visualNoMarker {
  list-style:none;
  margin-left: 0;
}
.visualClear {
  clear: both;
}
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* @end */