@import 'mixins.less';

@col2: 460px;
@col3: 300px;
@mainWidth: 1000px;

@menuColor: #303135;
@red: #f35648;
@bgGrey: #f2f2f2;
@blue: #00a0e6;

.selection(#f35648,#fff);

// Elements
body { margin: 0; padding: 0; font-family: 'Asap', sans-serif; font-size: 15px; font-weight: 400; letter-spacing: 0.03em; line-height: 1.466666667; }
main { display: block; position: relative; min-width: 1000px;}

h1 { margin-top: 0; font-size: 2.13em; color: @red; }
h2 { font-size: 1.2em; color: @blue; }
h3 { margin: 0; color: #fff;  }
img { display: block; }
section{ padding-top: 120px; padding-bottom: 100px; }
a{ text-decoration: none;color: #00a0e6; }
ul.list_a{ padding: 0; margin: 0 0 60px 0; width: 100%; list-style: none;
  li{ position: relative; margin: 0 0 10px 0; height: 30px; border-bottom: 2px solid #303135; font-weight: 700; font-size: .933333333em; line-height: 30px; text-transform: uppercase; letter-spacing: 0.05em;
    .arrow{ display: block; position: absolute; right: 0; top: 17px; width: 13px; height: 9px; background: url('/public/images/structure/arrow_btn_red.png')}

    &.active{ border-bottom: 2px solid #00a0e6;
      a{ color: #00a0e6;}
      .arrow{ background: url('/public/images/structure/arrow_btn_blue.png')}
    }
    &:hover a { color: #f35648; }


  }
  a{ color: #000; }
}

// Global classes
.center_div { position: relative; margin: 0 auto; width: @mainWidth;}
.clear { display: block; clear: both;}

// Columns
.col { float: left; margin-bottom: 60px;
  &.g2  { width: @col2; margin-right: 80px;}
  &.g3 { width: @col3; margin-right: 50px;}
  &.last { margin-right: 0;}
}

// Header
header{ width: 100%; height: 70px;
  .logo{ display: block; padding-top: 10px }
  .top_image { display: block; width: 100%;}
  nav{ position: absolute; right: 0; top: 0px; height: 70px; line-height: 70px;
    ul{ float: left; margin: 0; padding: 0;
      li{ float: left; list-style: none;
        a{ display: block; padding: 0 20px; text-decoration: none; color: @menuColor; }
      }
      li.active a{ color: @red; font-weight: 700; }
      li:not(.active) a:hover{ color: @blue; }
    }
  }
}
.bottom_red { border-bottom: 10px solid @red;}
.header_bottom { position: relative; width: 100%;
  &.blue { height: 20px; background-color: @blue;}
  &.red { height: 20px; background-color: @red;}
}
/*#home .header_bottom { position: relative; width: 100%;
  &.blue { height: 150px; background-color: @blue;}
  &.red { height: 20px; background-color: @red;}
}*/

// Header slider
.slider{ position: relative; width: 100%;
  ul{ position: absolute; top: 0; left: 0; overflow: hidden; margin: 0; padding: 0; width: 100%; height: 100%; list-style: none; .opacity(0);
    li{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      figure{ position: absolute; top: 0; left: 100%; z-index: 1; margin: 0; height: 100%; width: 100%; overflow: hidden; .transition(left 700ms ease-in-out);
        &.swiping{ .transition(none) }
      }
      img{ position: absolute; top: 50%; left: 50%; width: 100%; opacity: 0; .transition(opacity 500ms); }

      &.new.next figure{ left: 200%; }
      &.new.prev figure{ left: -200%; }

      &.before_show figure{ left: -100%; }
      &.show figure{ left: 0; }
      &.after_show figure{ left: 100%; }

      &.hide.next figure{ left: -200%; }
      &.hide.prev figure{ left: 200%; }
    }
  }
}

#photo_gallery .slider{ display: none; }

// Photogallery
.photo_spacer {position: relative; height: 60px; width: 100%; background-color: @red; font-size: 1.6em; text-align: center; line-height: 60px;}

// Go to gallery
.goto_gallery{ padding-top: 0; padding-bottom: 30px;
  .photogallery { padding-top: 60px;
    a:hover{
      .photo_title{ color: #00a0e6; }
    }
  }
  .col{ margin-bottom: 30px; }
  .photo_title{ display: block; position: relative; width: @col3; height: 50px; background-color: #fff; color: #000; font-weight: 700; text-align: center; text-transform: uppercase; line-height: 50px; letter-spacing: 0.05em; .bottomBorder(20px); .transition(all 300ms);
  }
}

// Content
.bg_grey { position: relative; background-color: @bgGrey;}
.bg_blue { position: relative; background-color: @blue;}

// Button
.button { display: block; position: relative; margin: 30px 0; height: 60px; width: @col3; background-color: #fff; font-weight: 700; text-align: center; text-transform: uppercase; .border(20px;); line-height: 60px; .transition(all 300ms);
  &.center { left: 50%; margin-left: -(@col3/2); }

  &.white{ background: #fff; color: @red;
    &:hover{ background: @red; color: #fff; }
  }
  &.blue { background: @blue; color: #fff;
    &:hover{ background: @red;  }
  }
}

// About
.funding { padding: 0; list-style: none;
  li { border-bottom: 1px solid @menuColor;}
}

// Agenda
.agenda .col { margin-bottom: 37px; min-height: 100px;}
.agenda_title { position: relative; display: block; width: @col3; font-size: 1em; font-weight: 800; border-bottom: 1px solid #BBBBBB;}
.month_nr{ margin-top: -9px; float: right; font-size: 1.667em; color: @blue;}
.agenda_item { list-style: none; padding: 0;
  span{ display: block; float: left; width: 250px; }
  .date { position: relative; width: 50px; color: @red; font-weight: 800;}
}
.line { position: relative; margin-bottom: 60px; height: 2px; width: 100%; background-color: #BBBBBB;}

// Activities
.monthly_activities { list-style: none; line-height: 30px;
  span { color:#696969; font-style: italic;}
  li { list-style: outside;  list-style-image: url('/public/images/structure/li_item.png'); }
}
.activity { background-color: #fff; padding: 40px 30px;
  ul { padding: 0;  list-style: none; }
  li { border-bottom: 1px solid @menuColor; padding-bottom: 5px; margin-bottom: 15px; text-transform: uppercase; }

  .list_a{
    li:hover{ color: #f35648; border-bottom: 2px solid #f35648; cursor: pointer}
    li.active{ color: #00a0e6; }
  }
}
.goto_activities{ padding-bottom: 30px;
  h2{ margin-top: 0; font-size: 2.13em; color: #fff; }
  .list_a li{ color: #fff; border-bottom: 2px solid #fff;
    .arrow{ background: url('/public/images/structure/arrow_btn_white.png')}
  }
}

// News
h1 .date{ color: #00a0e6; font-size: .5em; }
.intro p{ font-weight: 700;}
.col.intro{ margin-bottom: 30px; }

// Gallery
.col.g3.double{ width: @col3*2 + 50px;  }
.gallery_list{ float: left; }
.gallery{ float: left; margin: 0; padding: 0; list-style: none;
  li{ float: left; width: 198px; margin-right: 28px; margin-bottom: 28px; border-bottom: 10px solid #f35648;
    img{ width: 100%; }
    &:nth-child(3n){ margin-right: 0; }
  }
}

// Footer
footer { position: relative; padding-top: 60px; padding-bottom: 10px; width: 100%; min-width: @mainWidth; background-color: @red; color: #fff;
  h1 { font-size: 1.47em; color: #fff;}
  p { font-size: 1.0666em;}
  a{ color: #fff; text-decoration: underline; }
  .komma_logo{ float:left; display: block; width:33px; height:32px; background-image: url('/public/images/structure/komma_logo.png'); margin-top: 5px;}
  .komma_text{ margin-left: 10px; float: left;}
}